/**
 * themes/default/theme.css
 * Default store theme — brand tokens.
 * Override in themes/{store_slug}/theme.css per store.
 */

/* ── BRAND TOKENS ─────────────────────────────────────────────────────── */
:root {
    --accent:    #fbb00b;
    --accent-d:  #d99e0a;
    --accent-t:  #000000;
    --black:     #000000;
    --card:      #111111;
    --card-h:    #191919;
    --nav:       #050505;
    --border:    #1f1f1f;
    --white:     #ffffff;
    --muted:     #666666;
    --green:     #22c55e;
}

/* ── RESET ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── BODY ─────────────────────────────────────────────────────────────── */
body {
    background: #f6f6f4;
    color: #111111;
    font-family: acumin-pro, sans-serif;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 76px; /* bottom nav clearance */
    /* Guards against the 1-2px horizontal scrollbar some browsers add for
       full-bleed elements built with the `100vw` breakout trick (see
       .home-hero-section) — 100vw doesn't subtract the scrollbar's own
       width, so without this a vertical scrollbar can make the page
       scroll a hair horizontally too. Nothing on this site relies on
       body-level horizontal scroll (the pill row's own horizontal scroll
       is contained inside .cat-inner, unaffected by this). */
    overflow-x: hidden;
}

/* ── ANNOUNCEMENT BAR ─────────────────────────────────────────────────── */
#ann {
    background: var(--accent);
    color: #000;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    padding: 8px 44px 8px 16px;
    position: relative;
    letter-spacing: 0.1px;
    /* #ann is now sometimes an <a> (clickable link, added 2026-07-15) and
       sometimes a <div> (no link set) — display/text-decoration keep the
       anchor case looking identical to the div case, since <a> isn't
       block-level and browsers underline/color-link it by default
       otherwise; `color` above already covers both. */
    display: block;
    text-decoration: none;
}
#ann:hover {
    color: #000;
}
#ann-close {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    font-size: 1rem; color: rgba(0,0,0,0.45);
    cursor: pointer; line-height: 1; padding: 0;
}

/* ── STORE STATUS BAR ─────────────────────────────────────────────────── */
.sbar {
    background: var(--nav);
    /* border-bottom: 1px solid var(--border); */
    font-size: 0.75rem;
}
/* .navbar-inner inside .sbar handles padding, max-width, and flex layout */
.sbar .navbar-inner {
    padding-top: 6px;
    padding-bottom: 6px;
}
.sbar-left {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
}
/* Clickable status dot + store name (opens the store-hours modal) — was a
   plain <div>, now a <button>, so reset the native button chrome while
   keeping the exact same flex layout/spacing it had before. */
.sbar-left-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}
.dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 7px var(--green);
    flex-shrink: 0;
}
.dot.closed { background: #ef4444; box-shadow: 0 0 7px #ef4444; } /* legacy 2-state class, kept for safety */

/* 4-state status dot — open (green), opening/closing soon (amber, same as
   brand accent), closed (red). Used by both the header status dot and the
   store-switcher rows below (.store-sw-status-dot mirrors these colors). */
.dot--open { background: var(--green); box-shadow: 0 0 7px var(--green); }
.dot--opening-soon,
.dot--closing-soon { background: var(--accent); box-shadow: 0 0 7px var(--accent); }
.dot--closed { background: #ef4444; box-shadow: 0 0 7px #ef4444; }

.sbar-left strong { color: var(--white); }
.sbar-right { color: var(--muted); font-size: 0.75rem; }
.sbar-right b { color: var(--accent); }

/* ── CART NOTICE (shown after store switch modifies cart) ────────────── */
.cart-notice {
    background: #1a1200;
    border-bottom: 1px solid #4a3500;
    padding: 0;
}
.cart-notice-inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 10px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.8rem;
    color: #e0c060;
}
.cart-notice-inner > i {
    font-size: 1rem;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 1px;
}
.cart-notice-msg {
    flex: 1;
    line-height: 1.5;
}
.cart-notice-msg strong { color: var(--accent); }
.cn-was {
    color: #888;
    text-decoration: line-through;
    font-size: 0.75rem;
}
.cart-notice-close {
    background: none;
    border: none;
    color: #666;
    font-size: 0.9rem;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0 2px;
    transition: color 0.15s;
    line-height: 1;
}
.cart-notice-close:hover { color: #ccc; }

/* ── STORE-SWITCH MODAL ──────────────────────────────────────────────── */
.ssm-content {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    overflow: hidden;
}
.ssm-header {
    background: #0a0a0a;
    border-bottom: 1px solid #1e1e1e;
    padding: 16px 20px;
    color: var(--white);
}
.ssm-header .modal-title { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ssm-body {
    padding: 20px;
    color: #ccc;
    font-size: 0.9rem;
    line-height: 1.55;
}
.ssm-body p { margin-bottom: 0; }
.ssm-sub {
    margin-top: 8px !important;
    font-size: 0.78rem;
    color: #666;
}
.ssm-footer {
    background: #0a0a0a;
    border-top: 1px solid #1e1e1e;
    padding: 14px 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.ssm-cancel {
    background: none;
    border: 1px solid #333;
    color: #888;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 16px;
    transition: border-color 0.15s, color 0.15s;
}
.ssm-cancel:hover { border-color: #555; color: #ccc; }
.ssm-confirm {
    background: var(--accent);
    border: none;
    color: #000;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 8px 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}
.ssm-confirm:hover { background: var(--accent-d); }

/* ── STORE HOURS MODAL (added 2026-07-10) ────────────────────────────────
   Same black/orange treatment as .ssm-* above; .shm-content/.shm-header/
   .shm-body mirror .ssm-content/.ssm-header/.ssm-body (no footer — this
   modal is informational only, just the header's close button). */
.shm-content {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    overflow: hidden;
}
.shm-header {
    background: #0a0a0a;
    border-bottom: 1px solid #1e1e1e;
    padding: 16px 20px;
    color: var(--white);
}
.shm-header .modal-title { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.shm-body {
    padding: 20px;
    color: #ccc;
    font-size: 0.88rem;
}
.shm-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 16px;
    padding: 5px 12px;
    border-radius: 20px;
    background: #1a1a1a;
}
.shm-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.shm-status--open { color: var(--green); }
.shm-status--open .shm-status-dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
.shm-status--opening-soon,
.shm-status--closing-soon { color: var(--accent); }
.shm-status--opening-soon .shm-status-dot,
.shm-status--closing-soon .shm-status-dot { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.shm-status--closed { color: #ef4444; }
.shm-status--closed .shm-status-dot { background: #ef4444; box-shadow: 0 0 6px #ef4444; }

.shm-week { width: 100%; border-collapse: collapse; }
.shm-week tr { border-bottom: 1px solid #1e1e1e; }
.shm-week tr:last-child { border-bottom: none; }
.shm-week td { padding: 9px 4px; }
.shm-day-name { color: #999; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.shm-day-hours { text-align: right; color: #8d8d8d; font-variant-numeric: tabular-nums; }
.shm-closed { color: #666; }
.shm-today { }
.shm-today .shm-day-name, .shm-today .shm-day-hours { color: var(--accent); }
.shm-today-badge {
    background: var(--accent);
    color: #000;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 6px;
    border-radius: 5px;
}

.shm-closures {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #1e1e1e;
}
.shm-closures-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
    margin-bottom: 10px;
}
.shm-closure-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #ccc;
    padding: 6px 0;
}
.shm-closure-row i { color: #ef4444; font-size: 0.85rem; flex-shrink: 0; }
.shm-closure-name { color: #666; font-size: 0.76rem; margin-left: auto; }

/* ── REORDER RESULT MODAL (added 2026-07-04) ─────────────────────────────
   Same black/orange treatment as the store-switch modal above (.ssm-*);
   .rrm-content/.rrm-header/.rrm-body/.rrm-footer mirror .ssm-content/
   .ssm-header/.ssm-body/.ssm-footer exactly, so the two modals read as one
   consistent system. Body content (price-changed / skipped lists) gets its
   own small set of rules below since this modal's body isn't just a
   paragraph like the store-switch one. Markup is injected by
   assets/js/account.js (accEnsureReorderModal()), not present in any page
   template. */
.rrm-content {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    overflow: hidden;
}
.rrm-header {
    background: #0a0a0a;
    border-bottom: 1px solid #1e1e1e;
    padding: 16px 20px;
    color: var(--white);
}
.rrm-header .modal-title { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.rrm-body {
    padding: 20px;
    color: #ccc;
    font-size: 0.9rem;
    line-height: 1.55;
}
.rrm-lead { margin: 0 0 4px; color: #eee; }
.rrm-section-title {
    display: flex; align-items: center; gap: 6px;
    margin: 16px 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--accent);
}
.rrm-section-title-warn { color: #f3a83b; }
.rrm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rrm-list li {
    padding: 8px 10px;
    background: #1a1a1a;
    border-radius: 8px;
    font-size: 0.82rem;
}
.rrm-item-name { color: #eee; font-weight: 600; }
/* Price-change rows: short values, name left / price right, one line. */
.rrm-price-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.rrm-item-detail { color: #999; text-align: right; white-space: nowrap; }
.rrm-item-detail b { color: var(--accent); font-weight: 700; }
/* Skip-reason rows: full sentences, stacked under the item name so a long
   reason wraps normally instead of clipping/crowding a same-line price. */
.rrm-skip-item { display: flex; flex-direction: column; gap: 2px; }
.rrm-item-reason { color: #999; font-size: 0.78rem; line-height: 1.4; }
.rrm-footer {
    background: #0a0a0a;
    border-top: 1px solid #1e1e1e;
    padding: 14px 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ── STORE SWITCHER (in sbar-right) ──────────────────────────────────── */
.store-sw {
    position: relative;
    display: inline-flex;
}
.store-sw-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid #2a2a2a;
    border-radius: 7px;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px 3px 7px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.store-sw-btn:hover { border-color: var(--accent); color: var(--accent); }
.store-sw-btn i { font-size: 0.8rem; }
.store-sw-arrow { transition: transform 0.2s; flex-shrink: 0; }

/* Dropdown */
.store-sw-drop {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 250px;
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    overflow: hidden;
    z-index: 999;
}
.store-sw-drop.open { display: block; }

/* Each store option */
.store-sw-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 0.6rem;
    font-weight: 600;
    color: #ccc;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    border-bottom: 1px solid #1e1e1e;
}
.store-sw-opt:last-child { border-bottom: none; }
.store-sw-opt:hover { background: #1c1c1c; color: var(--accent); }
.store-sw-opt.active { color: var(--accent); }
.store-sw-opt i { font-size: 0.88rem; flex-shrink: 0; }
.store-sw-name { flex: 1; }
.store-sw-city {
    font-size: 0.68rem;
    font-weight: 400;
    color: #555;
    flex-shrink: 0;
}
.store-sw-opt.active .store-sw-city { color: #888; }

/* Per-row open/closed status badge (added 2026-07-10) — small colored dot +
   label, same 4-state palette as the header status dot (.dot--*). Sits at
   the end of each row, wraps onto its own line under the city on narrow
   dropdowns rather than forcing the row wider. */
.store-sw-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.66rem;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
}
.store-sw-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.store-sw-status--open { color: var(--green); }
.store-sw-status--open .store-sw-status-dot { background: var(--green); box-shadow: 0 0 5px var(--green); }
.store-sw-status--opening-soon,
.store-sw-status--closing-soon { color: var(--accent); }
.store-sw-status--opening-soon .store-sw-status-dot,
.store-sw-status--closing-soon .store-sw-status-dot { background: var(--accent); box-shadow: 0 0 5px var(--accent); }
.store-sw-status--closed { color: #ef4444; }
.store-sw-status--closed .store-sw-status-dot { background: #ef4444; box-shadow: 0 0 5px #ef4444; }

/* ── NAVBAR ───────────────────────────────────────────────────────────── */
.navbar-main {
    background: var(--nav);
    /* border-bottom: 1px solid var(--border); */
    position: sticky;
    top: 0;
    z-index: 500;
}
.navbar-inner {
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.brand-icon {
    width: 100px;
    height: auto;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.brand-icon img {
    width: 100%; height: 100%;
    object-fit: contain;
}
.brand-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.3px;
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 7px;
}
/* Language dropdown (redesigned 2026-07-04) — same black-panel/orange-accent
   look as .store-sw* above, swapped in after a native <select> read as out
   of place against the dark nav. Driven by AVAILABLE_LANGUAGES (index.php /
   includes/header.php) — adding a future language never needs a CSS change. */
.lang-sw {
    position: relative;
    display: inline-flex;
}
.lang-sw-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid #2a2a2a;
    border-radius: 7px;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px 3px 7px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.lang-sw-btn:hover { border-color: var(--accent); color: var(--accent); }
.lang-sw-btn i { font-size: 0.8rem; }
.lang-sw-arrow { transition: transform 0.2s; flex-shrink: 0; }

.lang-sw-drop {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 150px;
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    overflow: hidden;
    z-index: 999;
}
.lang-sw-drop.open { display: block; }

.lang-sw-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #ccc;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    border-bottom: 1px solid #1e1e1e;
}
.lang-sw-opt:last-child { border-bottom: none; }
.lang-sw-opt:hover { background: #1c1c1c; color: var(--accent); }
.lang-sw-opt.active { color: var(--accent); }
.lang-sw-opt i { font-size: 0.88rem; flex-shrink: 0; }
.lang-sw-name { flex: 1; }
.n-icon {
    width: 36px; height: 36px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}
.n-icon:hover { border-color: var(--accent); color: var(--accent); }
.cart-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #000;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 0 12px;
    height: 36px;
    color: var(--accent);
    font-weight: 800;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.15s;
}
.cart-btn:hover { border-color: var(--accent); }
/* Changed 2026-07-13, per user report — the previous scale+rotate wobble
   looked fine on the cart icon itself, but .cart-n (the quantity badge,
   position:absolute inside .cart-btn — see below) sits off-center from the
   button's rotation origin, so rotating the whole button swung the number
   through a little arc that read as a "weird movement" rather than a clean
   bump. Swapped for a plain side-to-side shake — translateX only, no
   scale/rotate — so the icon and the number move together in a straight
   line and the badge never seems to swing loose from the button. Same
   class name/duration as before (JS in assets/js/app.js's flyToCart()
   still adds/removes .cart-bump after 450ms — untouched, only the
   keyframes changed here). */
.cart-btn.cart-bump { animation: cartBump .45s ease; }
@keyframes cartBump {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-4px); }
    40%      { transform: translateX(4px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(2px); }
}
.cart-n {
    /* background: var(--accent); */
    color: #fbb00b;
    border-radius: 50%;
    width: 22px;
    height: 19px;
    font-size: 0.65rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 1px;
}
/* Offcanvas cart counter (added 2026-07-08, alongside header.php's new
   #cart-count-offcanvas span) — reuses .cart-n's color/size/font, but must
   NOT inherit position:absolute/top:1px: that's built for the navbar cart
   button, which sits inside .nav-right (position:relative), so the badge
   overlays neatly on the icon's corner. The offcanvas header has no such
   positioned ancestor nearby (.offcanvas itself is position:fixed), so the
   badge was rendering up at the sliding panel's top-left corner instead of
   inline next to the cart icon. Verified via headless-browser screenshot
   before and after this fix — however, the user tried it live and preferred
   the look WITHOUT this override (i.e. keeping .cart-n's absolute/top:1px
   behavior as-is for this element too), so it's commented out on request
   2026-07-08. Left in place, disabled, in case this needs revisiting. */
/*
#cart-count-offcanvas {
    position: static;
    top: auto;
}*/

/* ── CATEGORY PILLS ───────────────────────────────────────────────────── */
.cat-wrap {
    background: var(--nav);
    border-bottom: 1px solid var(--border);
}
.cat-wrap .navbar-inner {
    display: flex;
    align-items: center;
    padding: 0 16px;
}
.cat-inner {
    flex: 1;
    display: flex;
    gap: 6px;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 9px 0;
    scroll-behavior: smooth;
}
.cat-inner::-webkit-scrollbar { display: none; }

/* Scroll arrow buttons */
.cat-arrow {
    flex-shrink: 0;
    display: none; /* hidden by default; JS shows when overflow exists */
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 100%;
    min-height: 44px;
    background: var(--nav);
    border: none;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
    z-index: 2;
}
.cat-arrow:hover { opacity: 1; }
.cat-arrow-left  {
    border-right: 1px solid var(--border);
    box-shadow: 4px 0 8px rgba(0,0,0,0.35);
}
.cat-arrow-right {
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 8px rgba(0,0,0,0.35);
}
.cat-arrow.visible { display: flex; }
@media (min-width: 768px) { .cat-arrow { display: flex; } }

.cpill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: 100px;
    border: 1.5px solid var(--border);
    background: none;
    color: #9c9997;
    font-size: 0.77rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.15s;
}
.cpill.active,
.cpill:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
}

/* ── PRODUCTS-LISTING CATEGORY FILTER (pages/products.php, 2026-07-13) ───
   Same visual language as .cpill above (amber pill, dark chrome) but its
   own class — these chips live IN the page body (with an "All" option
   .cpill deliberately never has, §2.3) rather than in the sticky header,
   and don't need the header row's horizontal-scroll-arrow machinery, so
   they wrap normally instead. */
.pf-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0 4px;
}
.pf-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 100px;
    border: 1.5px solid var(--border);
    background: none;
    color: #9c9997;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.15s;
}
.pf-chip.active,
.pf-chip:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
}

/* ── SEARCH BOX ───────────────────────────────────────────────────────── */
/* Moved 2026-07-14 to sit below .sec-hdr on pages/menu.php and
   pages/products.php (was previously site-wide, above .page-wrap, in
   includes/header.php) — margin/padding retuned for that new position;
   the old duplicate `padding: 0 12px` (dead — immediately overridden by
   the `padding: 9px 13px` below it) dropped while at it. */
.search-box {
    max-width: 1040px;
    margin: 2px auto 4px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #ffffff;
    border: 1px solid #e0e0dc;
    border-radius: 11px;
    padding: 9px 13px;
    transition: border-color 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.search-box:focus-within { border-color: var(--accent); }
.search-box input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #111;
    font-size: 0.85rem;
}
.search-box input::placeholder { color: #bbb; }
.search-box i { color: #bbb; }

/* ── SECTION HEADER ───────────────────────────────────────────────────── */
.sec-hdr {
    position: relative;
    isolation: isolate;              /* keeps the ::before's z-index contained to this element */

    display: inline-flex;
    align-items: center;
    gap: 6px;

    width: fit-content;
    max-width: 100%;
    padding: 14px 40px 8px 16px;

    background-color: #fbb00b;
    color: #111111;
    border-radius: 0 30px 30px 0;    /* left stays square — see note below */
    box-shadow:  #00000020 3px 3px 3px 0px, #00000015 0px 1px 2px;
    height: 50px;
    margin-top: 12px;
    margin-bottom: 12px;
}

/* the amber color bleeding off to the left, "from infinity" */
.sec-hdr::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;        /* butts up flush against the visible pill, zero gap */
    width: 100vw;        /* far more than any screen needs, so it always looks endless */
    background-color: #fbb00b;
    z-index: -1;
}

.sec-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
}
.sec-count { color: #000000; font-weight: 400; font-size: 0.85rem; }
.sec-link {
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.sec-link:hover { text-decoration: underline; }

/* ── PAGE CONTENT WRAPPER ─────────────────────────────────────────────── */
.page-wrap {
    max-width: 1040px;   /* 4 cards × ~240px + gaps — never wider */
    margin: 0 auto;
    padding: 0 12px;
    width: 100%;
}

/* ── PRODUCT GRID ─────────────────────────────────────────────────────── */
.pgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 0 16px;   /* horizontal padding now comes from .page-wrap */
}
@media (min-width: 520px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .pgrid { grid-template-columns: repeat(4, 1fr); } }
/* No 5-column rule — 4 is the max */

/* ── PRODUCT CARD ─────────────────────────────────────────────────────── */
.pc {
    background: #ffffff;
    border-radius: 13px;
    overflow: hidden;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
}
.pc:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.pc-img {
    position: relative;
    aspect-ratio: 1 / 1;   /* always square, no matter how wide the card */
    background: #ffffff;
    overflow: hidden;
}
.pc-img img {
    width: 100%; height: 100%;
    object-fit: cover;      /* fills the square, crops edges — never squishes */
    transition: transform 0.35s;
}
.pc:hover .pc-img img { transform: scale(1.07); }
.pc-ph {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.8rem;
    background: #ffffff;
}

/* Badges */
.badge {
    position: absolute;
    top: 8px; right: 8px;
    border-radius: 5px;
    padding: 5px 7px;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.b-baked  { background: #FF6B35; color: #fff; }
.b-frozen { background: #3B82F6; color: #fff; }
.b-combo  { background: #000000; color: #fff; }
.b-new    { background: var(--green); color: #fff; }
.b-sale   { background: #EF4444; color: #fff; }
.b-hot    { background: #FF6B35; color: #fff; }

/* Reward-eligible icon (added 2026-07-10) — deliberately a SEPARATE small
   marker in the opposite corner from .badge (top-left vs .badge's
   top-right), so a product can show both a Sale badge AND this icon at
   once without ever colliding (confirmed with the user — "a separate small
   icon", not folded into the .badge priority chain above). */
.reward-badge {
    position: absolute;
    top: 8px; left: 8px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
/* Product-detail page's version sits inside a larger image, same icon,
   slightly bigger touch target. */
.pd-main-img-wrap .reward-badge { width: 30px; height: 30px; font-size: 0.95rem; }

/* Card body */
.pc-body { padding: 10px 10px 9px; }
.pc-name {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #111111;
    line-height: 1.3;
    /* Fixed 2026-07-15: was `min-height: 2em`, which is SHORTER than what a
       genuine 2-line title actually renders at (2 lines × 1.3 line-height =
       2.6em). A one-line title only ever grew to fill the too-small 2em
       floor, while a two-line title always overflowed past it to its real
       2.6em — so cards sitting side-by-side in the same grid row ended up
       with different amounts of space between the name and the price
       depending on whether that card's title happened to wrap or not (the
       exact "space when the title takes two lines" the user flagged).
       min-height now matches the real 2-line height exactly, so every card
       reserves the identical amount of name space regardless of line count
       — the price/qty/button row lines up evenly across a row either way. */
    min-height: 2.6em;
    margin-bottom: 5px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.pc-price-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 9px;
}
.pc-price {
    font-size: 1rem;
    font-weight: 800;
    color: var(--accent);
}
.pc-was {
    font-size: 0.72rem;
    color: #aaa;
    text-decoration: line-through;
}
.pc-from {
    font-size: 0.65rem;
    color: #aaa;
    font-weight: 400;
    align-self: center;
}

/* Add to cart actions */
.pc-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}
.qty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f0f0ee;
    border: 1px solid #e0e0dc;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.qty button {
    width: 32px; height: 34px;
    background: none; border: none;
    color: #999;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.15s;
    flex-shrink: 0;
}
.qty button:hover { color: var(--accent); }
.qty span {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 700;
    color: #111;
    text-align: center;
}
.buy {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: var(--accent);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s;
}
.buy:hover { background: var(--accent-d); transform: scale(1.08); }
.buy:active { transform: scale(0.95); }
.buy.build { background: #000000; color: #fff; }
.buy.build:hover { background: #141315; }

/* ── BOTTOM NAV ───────────────────────────────────────────────────────── */
.bnav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--nav);
    border-top: 1px solid var(--border);
    z-index: 600;
}
.bnav .navbar-inner {
    display: flex;
    padding-top: 4px;
    padding-bottom: 4px;
}
.bnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 4px 7px;
    background: none;
    border: none;
    color: #9c9997;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: color 0.15s;
    text-decoration: none;
}
.bnav-item.active, .bnav-item:hover { color: var(--accent); }
.bnav-icon { font-size: 1.25rem; line-height: 1; }

/* ── CART OFFCANVAS ───────────────────────────────────────────────────── */
.offcanvas {
    background: #0c0c0c !important;
    border-left: 1px solid var(--border) !important;
    max-width: 360px;
}
.offcanvas-header { border-bottom: 1px solid var(--border); padding: 15px 18px; }
.offcanvas-body   { padding: 0 18px; background: #ffffff !important; }
.oc-title { color: var(--white); font-size: 0.95rem; font-weight: 700; }

/* Cart items */
.ci {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 0;
    border-bottom: 1px solid #e8e8e8;
}
.ci-thumb {
    width: 56px; height: 56px;
    border-radius: 9px;
    background: #f0f0ee;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    overflow: hidden;
}
.ci-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ci-info { flex: 1; min-width: 0; }
.ci-name  { font-size: 0.82rem; font-weight: 600; color: #111; }
.ci-sub   { font-size: 0.72rem; color: #888; margin-top: 1px; }
.ci-price { font-size: 0.88rem; font-weight: 700; color: var(--accent); margin-top: 3px; }
.ci-qty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.ci-qty button {
    width: 26px; height: 22px;
    background: #f0f0ee;
    border: 1px solid #e0e0dc;
    border-radius: 6px;
    color: #888;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.ci-qty button:hover { color: var(--accent); border-color: var(--accent); }
.ci-qty span { font-size: 0.8rem; font-weight: 700; color: #111; }

/* Remove button + controls column */
.ci-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.cart-remove {
    width: 22px; height: 22px;
    background: none;
    border: none;
    color: #444;
    font-size: 1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
    padding: 0;
}
.cart-remove:hover { color: #e55; background: rgba(229,85,85,0.1); }

/* Cart item detail tags */
.ci-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.ci-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.ci-tag-variant { background: transparent; border: 1px solid #ddd; color: #888; }
.ci-tag-option  { background: rgba(251,176,11,0.12); border: 1px solid rgba(251,176,11,0.3); color: var(--accent); }
.ci-tag-combo   { background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.3); color: #a78bfa; }

/* Combo breakdown */
.ci-combo {
    margin-top: 6px;
    padding: 7px 9px;
    background: #f6f6f4;
    border: 1px solid #e8e8e8;
    border-radius: 7px;
}
.ci-combo-title {
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    margin-bottom: 5px;
}
.ci-combo-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}
.ci-combo-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #a78bfa;
    flex-shrink: 0;
}
.ci-combo-item {
    font-size: 0.7rem;
    color: #555;
    flex: 1;
}
.ci-combo-qty {
    font-size: 0.68rem;
    font-weight: 700;
    color: #a78bfa;
    background: rgba(139,92,246,0.1);
    padding: 1px 6px;
    border-radius: 4px;
}

/* Tip selector */
.tip-section { padding: 14px 0 6px; }
.tip-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #888;
    font-weight: 700;
    margin-bottom: 7px;
}
.tip-btns { display: flex; gap: 5px; }
.tbtn {
    flex: 1;
    padding: 7px 4px;
    background: none;
    border: 1.5px solid #e0e0dc;
    border-radius: 8px;
    color: #888;
    font-size: 0.73rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}
.tbtn.active, .tbtn:hover { border-color: var(--accent); color: var(--accent); }
.tip-amount { text-align: right; font-size: 0.73rem; color: #888; margin-top: 5px; }
.tip-amount b { color: var(--accent); }

/* Checkout page tip buttons — same look as cart offcanvas .tbtn, kept as a
   distinct class (.co-tbtn) so cart.js's global .tbtn click listener does
   not also bind/fire on the checkout page's tip widget. */
.co-tbtn {
    flex: 1;
    padding: 7px 4px;
    background: none;
    border: 1.5px solid #e0e0dc;
    border-radius: 8px;
    color: #888;
    font-size: 0.73rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}
.co-tbtn.active, .co-tbtn:hover { border-color: var(--accent); color: var(--accent); }

/* Inline custom tip input */
.tip-custom-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.tip-custom-input {
    width: 70px;
    padding: 6px 8px;
    background: #f0f0ee;
    border: 1.5px solid #e0e0dc;
    border-radius: 8px;
    color: #111;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
}
.tip-custom-input:focus { outline: none; border-color: var(--accent); }
.tip-custom-unit { color: #888; font-size: 0.82rem; }
.tip-custom-btn {
    flex: 1;
    padding: 6px 10px;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    color: #000;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.tip-custom-btn:hover { background: var(--accent-d); }

/* Order totals */
.tots { padding: 14px 0 0; border-top: 1px solid #e8e8e8; margin-top: 6px; }
.t-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: #888;
    padding: 4px 0;
}
.t-row b { color: #111; }
.t-row.grand {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    padding-top: 11px;
    margin-top: 7px;
    border-top: 1px solid #e8e8e8;
}
.t-row.grand b { color: var(--accent); font-size: 1.1rem; }

/* Checkout / Continue shopping buttons */
.co-btn {
    width: 100%;
    background: var(--accent);
    border: none;
    border-radius: 11px;
    color: #000;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 13px;
    margin-top: 14px;
    cursor: pointer;
    transition: background 0.15s;
    display: block;
    text-align: center;
    text-decoration: none;
}
.co-btn:hover { background: var(--accent-d); }
.cs-btn {
    width: 100%;
    background: none;
    border: 1px solid #e0e0dc;
    border-radius: 11px;
    color: #888;
    font-size: 0.82rem;
    padding: 11px;
    margin-top: 7px;
    cursor: pointer;
    transition: border-color 0.15s;
    margin-bottom: 16px;
    display: block;
    text-align: center;
    text-decoration: none;
}
.cs-btn:hover { border-color: #bbb; }

/* ── EMPTY CART ───────────────────────────────────────────────────────── */
.cart-empty {
    text-align: center;
    padding: 40px 20px;
    color: #aaa;
}
.cart-empty .ce-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.4;
}
.cart-empty p {
    font-size: 0.85rem;
}

/* Product card image & name as links */
a.pc-img {
    display: block;
    text-decoration: none;
    color: inherit;
}
a.pc-name {
    display: block;
    text-decoration: none;
    color: inherit;
}
a.pc-name:hover { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════════
   STORE HIGHLIGHT — dynamic featured side-drawer
   ══════════════════════════════════════════════════════════════════════════ */

/* Floating vertical tab on the right edge (moved from the left edge
   2026-07-15, per the user) */
.hl-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    /* Rotate text vertically — writing-mode is far more reliable than rotated divs.
       No extra rotate() here (unlike the old left-edge version) — plain
       vertical-rl already reads top-to-bottom, which is the correct
       convention for a tab docked on the RIGHT edge (mirrors the old
       180deg-flipped left-edge version, which read bottom-to-top). */
    writing-mode: vertical-rl;
    text-orientation: mixed;

    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border: none;
    border-radius: 8px 0 0 8px;   /* rounded on the left edge (visible side) */
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
    z-index: 1040;

    box-shadow: -3px 0 12px rgba(0,0,0,.25);
    transition: opacity 0.15s, filter 0.15s;
    animation: hl-slide-in 0.5s ease 0.8s both;
}
.hl-tab:hover { filter: brightness(1.08); opacity: 0.95; }

@keyframes hl-slide-in {
    from { right: -60px; opacity: 0; }
    to   { right: 0;     opacity: 1; }
}

.hl-tab-icon { font-size: 1rem; }
.hl-tab-label { text-transform: uppercase; font-size: 0.78rem; }

/* Offcanvas drawer */
.hl-drawer {
    width: min(420px, 92vw) !important;
}

.hl-drawer-header {
    padding: 16px 20px;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hl-drawer-header .offcanvas-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.hl-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px;
    opacity: 0.75;
    transition: opacity 0.15s;
}
.hl-close:hover { opacity: 1; }

.hl-drawer-body {
    padding: 16px;
    background: #f9f9f7;
    overflow-y: auto;
}

.hl-drawer-count {
    font-size: 0.75rem;
    color: var(--muted);
    margin-bottom: 14px;
    text-align: right;
}

/* Mini product grid inside drawer — 2 columns */
.hl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Slightly compact cards inside the drawer */
.hl-grid .pc { font-size: 0.88rem; }
.hl-grid .pc-name { font-size: 0.82rem; }
.hl-grid .pc-price { font-size: 0.92rem; }
.hl-grid .pc-body { padding: 6px 8px 8px; }
.hl-grid .pc-actions { gap: 4px; }
.hl-grid .buy { width: 32px; height: 32px; font-size: 0.9rem; }
.hl-grid .qty { gap: 4px; }
.hl-grid .qm,
.hl-grid .qp { width: 24px; height: 24px; font-size: 0.9rem; }

/* ── UTILITIES ────────────────────────────────────────────────────────── */
.text-accent { color: var(--accent); }
.bg-accent   { background: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
   ══════════════════════════════════════════════════════════════════════════ */

/* Outer wrapper */
.pd-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 16px 60px;
}

/* Breadcrumb */
.pd-breadcrumb {
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 16px;
}
.pd-breadcrumb a {
    color: var(--muted);
    text-decoration: none;
}
.pd-breadcrumb a:hover { color: var(--accent); }
.pd-breadcrumb .sep { margin: 0 6px; }
.pd-breadcrumb .current { color: #333; }

/* Two-column grid: gallery | info. Changed from 1fr 1fr to 1fr 2fr
   (2026-07-13, per user report) — the info column holds .pd-combo-grid
   (repeat(auto-fill, minmax(100px, 1fr))) among other things, and at an
   even 1fr split it only fit 2-3 combo items per row before wrapping,
   forcing a lot of scrolling for any combo with several options. Giving it
   twice the gallery's width lets more combo items sit on one row on
   desktop, without changing the combo grid's own CSS at all (auto-fill just
   fits more into the wider column automatically). */
.pd-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 36px;
    align-items: start;
}
/* Breakpoint raised from 680px to 860px (2026-07-13, per user report) — at
   680px, the two-column layout persisted through the whole "in-between"
   tablet/narrow-laptop range, and with the 1fr 2fr split above that meant
   the gallery column got squeezed down to roughly a third of the content
   width right before it finally broke — too cramped for both the image and
   the combo grid. 860px matches this theme's existing tablet breakpoint
   (see the admin/checkout mobile rules elsewhere in this file), so it now
   collapses to one column while there's still comfortable room, instead of
   squeezing first. */
@media (max-width: 860px) {
    .pd-grid { grid-template-columns: 1fr; gap: 20px; }
    /* The main image is aspect-ratio 1:1 and was set to width:100% — at a
       860px-and-under single-column layout that meant a large, edge-to-edge
       square image dominating the top of the page ("main image way too
       big" — the second half of the same report). Capping .pd-gallery
       itself (not just the image) keeps the thumbnail row aligned to the
       same width, and centers the whole gallery instead of letting it
       stretch to the full (now much wider, pre-collapse) container. Below
       this cap the gallery still shrinks naturally with the viewport — this
       is a ceiling, not a fixed size, so real mobile widths are unaffected.  */
    .pd-gallery { max-width: 420px; width: 100%; margin: 0 auto; }
}

/* ── Gallery ── */
.pd-gallery { position: relative; }

.pd-main-img-wrap {
    position: relative;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd-main-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pd-no-img {
    background: var(--card);
    color: var(--muted);
}
.pd-badge {
    position: absolute;
    top: 10px;
    left: auto;
    right: 10px;
    width: auto;
    font-size: 0.78rem;
}

.pd-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.pd-thumb {
    width: 66px;
    height: 66px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s;
}
.pd-thumb:hover,
.pd-thumb.active {
    border-color: var(--accent);
}

/* ── Info panel ── */
.pd-name {
    font-size: 1.45rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 8px;
    line-height: 1.3;
}

.pd-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 0.85rem;
}
.pd-rating .stars { color: var(--accent); }
.pd-rating-link { color: var(--accent); font-size: 0.8rem; }

.pd-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 14px;
}
.pd-from {
    font-size: 0.85rem;
    color: var(--muted);
}
.pd-price {
    font-size: 1.75rem;
    font-weight: 800;
    color: #111;
}
.pd-price-sep { color: var(--muted); }
.pd-price-max {
    font-size: 1.3rem;
    color: var(--muted);
}
.pd-was {
    font-size: 1rem;
    color: #e55;
    text-decoration: line-through;
    margin-left: 6px;
}

.pd-desc {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 18px;
}
.pd-desc p { margin-bottom: 6px; }

/* Section labels */
.pd-section { margin-bottom: 20px; }
.pd-section-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

/* Variant buttons */
.pd-variants {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.pd-var-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    line-height: 1.25;
}
.pd-var-btn:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.pd-var-btn.active {
    border-color: var(--accent);
    background: #fffbee;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* Checkmark dot in top-right corner when selected */
.pd-var-btn.active::after {
    content: '\2713';
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
    background: var(--accent);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 16px;
    text-align: center;
}
.pd-var-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
}

/* variant_options (§2.5/§4.3) — pill-style option chooser on the product page.
   Lighter-weight than the variant buttons (options are a smaller choice), amber
   accent when selected to match the cart's option tag. */
.pd-options-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-opt-btn {
    padding: 7px 14px;
    border: 1px solid #ddd;
    border-radius: 999px;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.pd-opt-btn:hover { border-color: var(--accent); }
.pd-opt-btn.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #000;
}
.pd-var-price {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
    color: var(--accent);
    font-weight: 700;
}
.pd-var-was {
    font-size: 0.75rem;
    color: #aaa;
    text-decoration: line-through;
    font-weight: 400;
}

/* ── COMBO WIZARD ──────────────────────────────────────────────────────────── */

/* Step dots row */
.wz-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.wz-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: #fff;
    color: #aaa;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}
.wz-dot.done  { border-color: var(--accent); background: var(--accent); color: #fff; }
.wz-dot.active { border-color: var(--accent); color: var(--accent); }
.wz-dot-summary { font-size: 0.95rem; }

/* Wizard panels — only active one visible */
.wz-panel { display: none; }
.wz-panel.active { display: block; }

/* Wizard nav (Back / Next) */
.wz-nav {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    justify-content: space-between;
}
.wz-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 24px;
    border: 2px solid var(--accent);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.wz-back { background: #fff; color: var(--accent); }
.wz-next { background: var(--accent); color: #fff; margin-left: auto; }
.wz-back:hover { background: #fff8ec; }
.wz-next:hover { filter: brightness(1.06); }

/* Summary panel */
.wz-summary { background: #fafafa; border-radius: 12px; padding: 14px; }
.wz-summary-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: #333;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.wz-sum-slot { margin-bottom: 14px; }
.wz-sum-slot-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.wz-sum-items { display: flex; flex-direction: column; gap: 8px; }
.wz-sum-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wz-sum-img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.wz-sum-info { display: flex; flex-direction: column; gap: 2px; }
.wz-sum-name { font-size: 0.85rem; font-weight: 600; color: #222; }
.wz-sum-qty  { font-size: 0.78rem; color: #888; }
.wz-sum-price {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eee;
    font-size: 0.9rem;
    color: #555;
    text-align: right;
}
.wz-sum-price strong {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--accent);
    margin-left: 6px;
}

/* ── PRESET COMBO BREAKDOWN (§4.5 — hardcoded, read-only, no wizard) ─────────── */
.pd-preset-placeholder {
    font-size: 0.82rem;
    color: var(--muted);
    font-style: italic;
}

/* ── COMBO SLOT GRID ───────────────────────────────────────────────────────── */
.pd-combos { display: flex; flex-direction: column; gap: 20px; }

/* Each slot */
.pd-combo-slot {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
}
.pd-combo-slot--invalid { border-color: #e55; }

/* Slot header row: name + counter */
.pd-combo-slot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.pd-combo-slot-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #333;
}
.pd-required { color: #e55; margin-left: 2px; }
.pd-combo-slot-hint {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: #888;
    margin-top: 2px;
}
.pd-combo-counter {
    font-size: 0.82rem;
    font-weight: 700;
    background: var(--accent);
    color: #fff;
    border-radius: 20px;
    padding: 2px 10px;
    letter-spacing: 0.02em;
}

/* Progress bar */
.pd-combo-bar-wrap {
    height: 4px;
    background: #eee;
    border-radius: 4px;
    margin-bottom: 14px;
    overflow: hidden;
}
.pd-combo-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 0.2s ease;
}

/* Product grid */
.pd-combo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

/* Individual product card */
.pd-combo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 6px;
    border-radius: 10px;
    border: 2px solid transparent;
    background: #fafafa;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}
.pd-combo-item--active {
    border-color: var(--accent);
    background: #fff8ec;
}
.pd-combo-item-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
}
.pd-combo-ph {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    background: #f0f0f0;
    border-radius: 8px;
}
.pd-combo-item-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    min-height: 3.6em;        /* room for name + variant label */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
}
.pd-combo-item-var {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--accent);
}

/* Stepper inside each card */
.pd-combo-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pd-cs {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: #fff;
    color: var(--accent);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.pd-cs:disabled {
    border-color: #ccc;
    color: #ccc;
    cursor: not-allowed;
}
.pd-cs:not(:disabled):hover { background: var(--accent); color: #fff; }
.pd-cs-qty {
    font-size: 0.9rem;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    color: #222;
}

/* Combo total row */
.pd-combo-total {
    margin-top: 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    text-align: right;
}
#pd-combo-price-display {
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 800;
    margin-left: 4px;
}

/* Cart row */
.pd-cart-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
}
.pd-qty {
    flex-shrink: 0;
}
.pd-buy {
    flex: 1;
    min-width: 160px;
    padding: 13px 20px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background: var(--accent);
    color: #000;
    transition: background 0.15s, opacity 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.pd-buy:hover { background: var(--accent-d); }
.pd-buy.build { background: #111; color: #fff; }
.pd-buy.build:hover { background: #333; }

.pd-error {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 0.85rem;
}

/* ── Product-page section title (added 2026-07-15) ───────────────────────
   Deliberately separate from .sec-hdr/.sec-title (the amber ribbon still
   used unchanged for category headers, includes/header.php's .cat-wrap and
   pages/menu.php/products.php's section titles) — the user wanted this
   page's "Goes great with"/Customer Reviews headers restyled to something
   lighter, without touching the category ribbon anywhere else. Minimal on
   purpose: no filled background, no accent color beyond the icon itself —
   bold text + a thin bottom rule, so it doesn't add more color to a page
   that already has amber prices/badges throughout. */
.pd-sec-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1.2rem;
    font-weight: 800;
    color: #111111;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1.5px solid #e2e2de;
}

/* ── Goes great with ── */
.pd-suggest-wrap { margin-top: 40px; }
/* Arrow buttons + smooth/drag scrolling added 2026-07-15, per the user —
   same flex-row-with-arrow-siblings structure as .cat-wrap .navbar-inner
   (includes/header.php), driven by the same initHorizontalScroller()
   (assets/js/app.js). */
.pd-suggest-row-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
}
.pd-suggest-row {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* momentum scrolling on older iOS */
    scrollbar-width: none;
}
.pd-suggest-row::-webkit-scrollbar { display: none; }

/* Light-themed counterpart to .cat-arrow — this row sits on the page's
   light background, not the dark nav bar, so a filled dark chevron button
   would look out of place; a plain white circle + shadow matches the rest
   of this page's card language (.pd-suggest-card etc.) instead. */
.pd-suggest-arrow {
    flex-shrink: 0;
    display: none; /* hidden by default; JS shows when overflow exists */
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
    color: #111;
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0.85;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: opacity 0.15s;
}
.pd-suggest-arrow:hover { opacity: 1; }
.pd-suggest-arrow.visible { display: flex; }
@media (min-width: 768px) { .pd-suggest-arrow { display: flex; } }
.pd-suggest-card {
    min-width: 130px;
    max-width: 150px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.pd-suggest-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.pd-suggest-img {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
}
.pd-suggest-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pd-suggest-name {
    padding: 6px 8px 2px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pd-suggest-price {
    padding: 0 8px 8px;
    font-size: 0.78rem;
    color: var(--accent);
    font-weight: 700;
}

/* ── Reviews ── */
.pd-reviews-wrap { margin-top: 40px; }
.pd-review-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.pd-review-avg {
    font-size: 2.2rem;
    font-weight: 800;
    color: #111;
    line-height: 1;
}
.pd-review-summary .stars { color: var(--accent); font-size: 1.1rem; }
.pd-review-count { color: var(--muted); font-size: 0.85rem; }

.pd-review-list { display: flex; flex-direction: column; gap: 16px; }
.pd-review-item {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    padding: 16px;
}
.pd-review-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.pd-reviewer {
    font-weight: 600;
    font-size: 0.9rem;
    color: #222;
}
.pd-review-stars { color: var(--accent); font-size: 0.85rem; }
.pd-review-date  { color: var(--muted); font-size: 0.78rem; margin-left: auto; }
.pd-review-title {
    font-weight: 600;
    font-size: 0.88rem;
    color: #333;
    margin-bottom: 4px;
}
.pd-review-body {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.5;
}
.pd-no-reviews { color: var(--muted); font-size: 0.88rem; margin: 4px 0 20px; }

/* ── Unavailable product / reminder signup (added 2026-07-06, §19) ──────── */
.pd-unavailable-wrap { margin-top: 14px; }
.pd-unavailable-notice {
    display: flex; align-items: center; gap: 8px;
    color: #92400e; background: #fef3c7; border-radius: 10px;
    padding: 12px 16px; font-size: 0.88rem; font-weight: 600; margin-bottom: 14px;
}

/* ── Write a review (added 2026-07-06, §12) ──────────────────────────────── */
.pd-review-form-wrap { margin-top: 20px; }
.pd-review-already {
    display: flex; align-items: center; gap: 8px;
    color: #166534; background: #dcfce7; border-radius: 10px;
    padding: 12px 16px; font-size: 0.88rem; font-weight: 600;
}
.pd-review-form {
    display: flex; flex-direction: column; gap: 14px;
    background: #fff; border: 1px solid #eee; border-radius: 12px;
    padding: 18px; margin-top: 14px; max-width: 460px;
}
.pd-review-field label { display: block; font-size: 0.8rem; font-weight: 600; color: #666; margin-bottom: 4px; }
.pd-review-field input, .pd-review-field textarea {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit;
}
.pd-review-star-input { font-size: 1.5rem; color: var(--accent); cursor: pointer; display: flex; gap: 4px; }
.pd-review-star-input i { cursor: pointer; }
.pd-review-saved-msg { color: #166534; font-size: 0.85rem; font-weight: 600; margin-left: 10px; }

/* ── Gift card form (product page) ──────────────────────────────────────── */
.pd-giftcard {
    background: #fff;
    border: 1.5px solid #f3e0a0;
    border-radius: 14px;
    padding: 18px 20px;
    margin-top: 6px;
}
.pd-gc-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}
.pd-gc-row:last-of-type { margin-bottom: 0; }
.pd-gc-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #555;
    letter-spacing: 0.02em;
}
.pd-required {
    color: #e53e3e;
    margin-left: 2px;
}
.pd-gc-input,
.pd-gc-textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    font-size: 0.9rem;
    color: #222;
    background: #fafafa;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.pd-gc-input:focus,
.pd-gc-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(251,176,11,0.15);
    background: #fff;
}
.pd-gc-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}
.pd-gc-chars {
    font-size: 0.75rem;
    color: #999;
    text-align: right;
    margin-top: 3px;
}

/* ── multi_date_order schedule picker (product page, §4.6) ─────────────── */
.pd-schedule {
    background: #fff;
    border: 1.5px solid #f3e0a0;
    border-radius: 14px;
    padding: 18px 20px;
    margin-top: 6px;
    margin-bottom: 16px;
}
.pd-schedule-methods {
    display: flex;
    gap: 8px;
    margin: 10px 0;
}
.pd-sched-method-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    background: #fafafa;
    font-weight: 600;
    font-size: 0.88rem;
    color: #444;
    cursor: pointer;
    transition: all 0.15s;
}
.pd-sched-method-btn.active {
    border-color: var(--accent);
    background: rgba(251,176,11,0.12);
    color: #000;
}
.pd-schedule-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pd-schedule-date,
.pd-schedule-time {
    flex: 1;
    min-width: 140px;
    padding: 9px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    font-size: 0.9rem;
    color: #222;
    background: #fafafa;
    font-family: inherit;
}
.pd-schedule-date:disabled,
.pd-schedule-time:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.pd-schedule-hint {
    font-size: 0.78rem;
    color: #999;
    margin-top: 6px;
}

/* ── Scheduled dispatch badge (cart item) ──────────────────────────────── */
.ci-schedule {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    padding: 5px 9px;
    background: #eef6ff;
    border: 1px solid #bcdcff;
    border-radius: 8px;
    font-size: 0.76rem;
    color: #1a5aa8;
    font-weight: 600;
}

/* ── BOGO cart line note (§7, added 2026-07-07) ──────────────────────────── */
.ci-bogo-note {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    padding: 5px 9px;
    background: #fff3e0;
    border: 1px solid #ffd9a0;
    border-radius: 8px;
    font-size: 0.76rem;
    color: #a85a00;
    font-weight: 600;
}

/* ── Gift card cart display ──────────────────────────────────────────────── */
.ci-giftcard {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 5px;
    padding: 7px 9px;
    background: #fffbea;
    border: 1px solid #f3e0a0;
    border-radius: 8px;
}
.ci-gc-icon {
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.ci-gc-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.75rem;
    color: #555;
    line-height: 1.4;
}
.ci-gc-line b {
    color: #333;
    font-weight: 700;
}
.ci-gc-email {
    color: #888;
    font-style: italic;
}
.ci-gc-msg {
    color: #666;
    font-style: italic;
}

/* ── Checkout page (§4.6/§10, Phase 4) ──────────────────────────────────── */
.co-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 2px 60px;
}
.co-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 18px;
}
.co-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
}
/* .co-place-wrap (added 2026-07-04) — the Place Order button + its error
   box, pulled out of .co-left into its own grid item (see pages/checkout.php)
   so it can be reordered independently of the form on small screens. On
   desktop, pinning it to column 1 keeps it exactly where it always
   visually was: directly under the Payment section, same width as the
   left column, not spanning the summary column. */
.co-place-wrap { grid-column: 1; }
@media (max-width: 860px) {
    .co-grid { grid-template-columns: 1fr; }
    /* Mobile only (2026-07-04, user request): Order Summary should sit
       above the Place Order button, not below it — the button is always
       last regardless of source order. */
    .co-left       { order: 1; }
    .co-right      { order: 2; }
    .co-place-wrap { order: 3; grid-column: 1; }
}
.co-section {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
/* Gift-card box disabled while the cart itself contains a gift-card
   product (2026-07-04) — can't redeem a card to pay for a new one. */
.co-section-disabled { background: #fafafa; }
.co-section-disabled .co-input,
.co-section-disabled .co-promo-btn { opacity: 0.5; cursor: not-allowed; }
.co-section-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.co-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    font-size: 0.9rem;
    color: #222;
    background: #fafafa;
    margin-bottom: 10px;
    font-family: inherit;
}
.co-input:focus { outline: none; border-color: var(--accent); background: #fff; }
.co-textarea { min-height: 70px; resize: vertical; }

.co-dispatch-methods { display: flex; gap: 8px; margin-bottom: 12px; }
.co-dispatch-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    background: #fafafa;
    font-weight: 600;
    font-size: 0.88rem;
    color: #444;
    cursor: pointer;
}
.co-dispatch-btn.active { border-color: var(--accent); background: rgba(251,176,11,0.12); color: #000; }

.co-slot-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.co-slot-date, .co-slot-time { flex: 1; min-width: 140px; padding: 9px 12px; border: 1.5px solid #e2e8f0; border-radius: 9px; font-size: 0.9rem; background: #fafafa; font-family: inherit; }
.co-slot-date:disabled, .co-slot-time:disabled { opacity: 0.55; cursor: not-allowed; }

/* ASAP delivery (§10) — checkbox row above the date/time picker */
.co-asap-row { margin-bottom: 10px; }
.co-asap-label { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; color: #444; cursor: pointer; }
.co-asap-label input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

.co-address-fields { margin-top: 10px; }

.co-sched-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f2f2f2;
    font-size: 0.86rem;
}
.co-sched-line:last-child { border-bottom: none; }
.co-sched-when { color: #666; font-size: 0.8rem; display: flex; align-items: center; gap: 5px; }

.co-promo-row { display: flex; gap: 8px; }
.co-promo-row .co-input { margin-bottom: 0; }
.co-promo-btn {
    padding: 0 18px;
    background: var(--black);
    color: #fff;
    border: none;
    border-radius: 9px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}
.co-promo-btn:hover { background: #222; }
.co-promo-msg { font-size: 0.8rem; margin-top: 6px; min-height: 1em; }
.co-promo-ok { color: var(--green); }
.co-promo-err { color: #e53e3e; }

/* Delivery-zone hint (added 2026-07-13) — shown above #co-postal once a
   delivery date is picked, so the customer sees the deliverable postal-code
   prefixes before typing their own, instead of only finding out on blur or
   at place-order time. Sits between #co-city and #co-postal (see
   pages/checkout.php); toggled via display:none/'' rather than
   added/removed from the DOM, so no layout shift beyond the toggle itself. */
.co-delivery-zone-hint {
    font-size: 0.8rem;
    color: #444;
    background: #f4f4f4;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    line-height: 1.4;
}
.co-delivery-zone-hint .bi { color: var(--accent); margin-right: 3px; }

/* Applied gift-card chips (multiple per order, 2026-07-04) */
.co-gc-applied { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.co-gc-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    background: #fffbea;
    border: 1px solid #f6d365;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #7a5c00;
}
.co-gc-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.08);
    color: #7a5c00;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.co-gc-remove:hover { background: rgba(0,0,0,0.16); }

.co-stripe-el { padding: 12px; border: 1.5px solid #e2e8f0; border-radius: 9px; background: #fafafa; }
.co-stripe-errors { color: #e53e3e; font-size: 0.8rem; margin-top: 6px; min-height: 1em; }

.co-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 0.85rem;
    margin-bottom: 12px;
}
.co-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #eef6ff;
    border: 1px solid #bcdcff;
    color: #1a5aa8;
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.co-place-btn {
    width: 100%;
    background: var(--accent);
    border: none;
    border-radius: 11px;
    color: #000;
    font-weight: 800;
    font-size: 1rem;
    padding: 15px;
    cursor: pointer;
    transition: background 0.15s;
}
.co-place-btn:hover { background: var(--accent-d); }
.co-place-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.spin { display: inline-block; animation: co-spin 0.8s linear infinite; }
@keyframes co-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.co-summary {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 18px 20px;
    position: sticky;
    top: 16px;
}
.co-summary-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 12px; }
.co-summary-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.co-sum-item { display: flex; gap: 8px; font-size: 0.85rem; align-items: flex-start; }
.co-sum-thumb {
    width: 38px; height: 38px;
    border-radius: 7px;
    background: #f0f0ee;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    overflow: hidden;
}
.co-sum-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* .co-sum-body / .co-sum-top (added 2026-07-08) — see the matching comment
   in pages/checkout.php right above .co-sum-body's opening div for the full
   reasoning. Short version: .co-sum-price used to be a flex sibling of
   .co-sum-name spanning the row's full height, which reserved its width as
   blank space next to the schedule line and combo box below the item name.
   Now .co-sum-body is the flex:1 column, .co-sum-top holds qty+name+price
   on one line, and everything else (schedule, combo box) is a full-width
   block below it — free to use the whole row width, not just what's left
   after a price column that only needs its top line. */
.co-sum-body { flex: 1; min-width: 0; }
.co-sum-top { display: flex; align-items: flex-start; gap: 8px; }
.co-sum-qty { color: #888; font-weight: 700; }
.co-sum-name { flex: 1; min-width: 0; }
.co-sum-variant { color: #888; font-size: 0.78rem; margin-left: 4px; }
/* variant_options (§2.5) — the chosen option, amber to match the cart tag */
.co-sum-option { color: var(--accent-d); font-size: 0.78rem; font-weight: 600; margin-left: 4px; }
.co-sum-price { font-weight: 700; white-space: nowrap; }
.co-sum-sched { color: #1a5aa8; font-size: 0.75rem; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.co-sum-sched-pending { color: #999; font-style: italic; }
.co-sum-combo { color: #7c5cbf; font-size: 0.76rem; margin-top: 2px; }
.co-tots { padding-top: 10px; border-top: 1px solid #e8e8e8; }

.co-empty {
    text-align: center;
    padding: 60px 20px;
    color: #aaa;
}
.co-empty-link {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 22px;
    background: var(--accent);
    color: #000;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
}

/* ── Confirmation page ──────────────────────────────────────────────────── */
.confirm-hero { text-align: center; padding: 30px 16px; }
.confirm-check { font-size: 3rem; color: var(--green); margin-bottom: 10px; }
.confirm-hero h1 { font-size: 1.6rem; font-weight: 800; margin-bottom: 6px; }
.confirm-order-num { font-weight: 700; font-size: 1.1rem; margin-top: 8px; }
.confirm-email-note { color: #888; font-size: 0.85rem; }
/* ── ACCOUNTS / AUTH (added 2026-07-04, §10b) ───────────────────────────── */
.n-icon-avatar { padding: 0; overflow: hidden; }
.n-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }

.auth-wrap {
    max-width: 420px;
    margin: 40px auto 60px;
    padding: 0 16px;
}
.auth-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 28px 24px;
}
.auth-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 18px; text-align: center; }
.auth-error {
    background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
    border-radius: 8px; padding: 10px 12px; font-size: 0.85rem; margin-bottom: 14px;
}
.auth-success {
    background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0;
    border-radius: 8px; padding: 10px 12px; font-size: 0.9rem; margin-bottom: 14px;
}
.auth-oauth-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.auth-oauth-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 14px; border-radius: 9px; border: 1.5px solid #e2e8f0;
    font-weight: 600; font-size: 0.9rem; text-decoration: none; color: #222;
    background: #fafafa; transition: all 0.15s;
}
.auth-oauth-btn:hover { border-color: var(--accent); background: #fff; }
.auth-divider { text-align: center; color: #aaa; font-size: 0.8rem; margin: 16px 0; position: relative; }
.auth-divider::before, .auth-divider::after {
    content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: #e2e8f0;
}
.auth-divider::before { left: 0; } .auth-divider::after { right: 0; }
.auth-divider span { background: #fff; padding: 0 10px; position: relative; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 600; color: #333; }
.auth-label input, .auth-label textarea {
    padding: 10px 12px; border: 1.5px solid #e2e8f0; border-radius: 9px;
    font-size: 0.95rem; font-family: inherit; font-weight: 400; resize: vertical;
}
.auth-optional { font-weight: 400; color: #999; }
.auth-btn {
    padding: 12px 16px; border-radius: 9px; border: none; background: var(--accent);
    color: #000; font-weight: 700; font-size: 0.95rem; cursor: pointer; text-align: center;
    text-decoration: none; display: block; width: 100%;
}
.auth-btn:hover { background: var(--accent-d); }
.auth-btn-outline { background: #fff; border: 1.5px solid #e2e8f0; color: #222; }
.auth-btn-outline:hover { border-color: var(--accent); background: #fafafa; }
.auth-switch { text-align: center; font-size: 0.85rem; color: #666; margin-top: 16px; }
.auth-switch a { color: var(--accent-d); font-weight: 600; text-decoration: none; }
.auth-method-row { display: flex; flex-direction: column; gap: 10px; }
.auth-method-prompt { font-size: 0.9rem; color: #444; margin-bottom: 4px; text-align: center; }

.acc-profile-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.acc-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.acc-avatar-fallback { display: flex; align-items: center; justify-content: center; background: #f2f2f2; color: #999; font-size: 1.4rem; }
.acc-name { font-weight: 700; font-size: 1.05rem; }
.acc-email { color: #888; font-size: 0.85rem; }
.acc-note { color: #777; font-size: 0.85rem; margin-bottom: 20px; line-height: 1.5; }

/* ── Order history (added 2026-07-04, §10c) ─────────────────────────────── */
.acc-wrap { margin: 40px auto 60px; padding: 0 16px; display: flex; flex-direction: column; gap: 20px; }
.acc-logout-btn { margin-left: auto; width: auto; flex: 0 0 auto; }
.acc-orders-card { padding: 24px; }
.acc-section-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 14px; }
.acc-orders-empty { text-align: center; padding: 30px 10px; color: #888; }
.acc-orders-empty p { margin: 10px 0; }
.acc-orders-list { display: flex; flex-direction: column; gap: 8px; }
.acc-order-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border: 1px solid #eee; border-radius: 10px;
    transition: border-color 0.15s, background 0.15s;
}
.acc-order-row:hover { border-color: var(--accent); background: #fafafa; }
/* Reorder button (added 2026-07-04, §10c) sits as a sibling of this link,
   not nested inside it — .acc-order-row used to BE the <a> itself; now it's
   a plain flex row wrapping this link (still carries the original layout)
   plus the reorder button. */
.acc-order-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.acc-order-main { flex: 1; min-width: 0; }
.acc-order-num { font-weight: 700; font-size: 0.9rem; }
.acc-order-date { color: #999; font-size: 0.78rem; margin-top: 2px; }
.acc-status-badge { font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 100px; white-space: nowrap; }
.acc-status-pending   { background: #fef3c7; color: #92400e; }
.acc-status-active    { background: #dbeafe; color: #1e40af; }
.acc-status-done       { background: #dcfce7; color: #166534; }
.acc-status-cancelled  { background: #fee2e2; color: #991b1b; }
.acc-order-total { font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.acc-order-arrow { color: #ccc; }
.acc-order-reorder-btn {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    padding: 7px 12px; border-radius: 100px; border: 1.5px solid var(--border);
    background: #fff; color: #444; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.acc-order-reorder-btn:hover { border-color: var(--accent); background: var(--accent); color: #000; }

/* ── Saved addresses (added 2026-07-04, §10c) ───────────────────────────── */
.acc-addr-card { padding: 24px; }
.acc-addr-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.acc-addr-header .acc-section-title { margin-bottom: 0; }
.acc-addr-add-btn { width: auto; flex: 0 0 auto; padding: 8px 14px; font-size: 0.85rem; }
.acc-addr-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.acc-addr-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border: 1px solid #eee; border-radius: 10px;
}
.acc-addr-info { min-width: 0; }
.acc-addr-label { font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.acc-addr-badge {
    font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 100px;
    background: #dcfce7; color: #166534; white-space: nowrap;
}
.acc-addr-line { color: #666; font-size: 0.82rem; margin-top: 2px; }
.acc-addr-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.acc-addr-link {
    background: none; border: none; padding: 0; font-size: 0.8rem; font-weight: 600;
    color: var(--accent-d); cursor: pointer; white-space: nowrap;
}
.acc-addr-link:hover { text-decoration: underline; }
.acc-addr-link-danger { color: #b91c1c; }
.acc-addr-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid #eee; }
.acc-addr-default-check { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #333; }
.acc-addr-form-actions { display: flex; gap: 10px; }
.acc-addr-form-actions .auth-btn { width: auto; flex: 1; }

/* ── Saved payment methods on account.php (added 2026-07-04, §10c) ───────
   Reuses .acc-addr-badge / .acc-addr-line / .acc-addr-actions / .acc-addr-link
   from the Saved Addresses card above — same visual language, just a
   different list-row shape (.acc-pm-row instead of .acc-addr-row). */
.acc-pm-card { padding: 24px; }
.acc-pm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.acc-pm-header .acc-section-title { margin-bottom: 0; }
.acc-pm-add-btn { width: auto; flex: 0 0 auto; padding: 8px 14px; font-size: 0.85rem; }
.acc-pm-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.acc-pm-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border: 1px solid #eee; border-radius: 10px;
}
.acc-pm-info { min-width: 0; }
.acc-pm-label { font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.acc-pm-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid #eee; }

/* ── Wallet (redeem gift card + history, added 2026-07-08, §10c) ─────────── */
.acc-wallet-card { padding: 24px; }
.acc-wallet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 10px; flex-wrap: wrap; }
.acc-wallet-header .acc-section-title { margin-bottom: 0; }
.acc-wallet-balance { text-align: right; }
.acc-wallet-balance-label { display: block; font-size: 0.72rem; color: #888; text-transform: uppercase; letter-spacing: 0.04em; }
.acc-wallet-balance-amount { display: block; font-size: 1.5rem; font-weight: 800; color: var(--accent-d); line-height: 1.2; }
/* Points headline gets a smaller, lighter-weight unit label right after the
   number (added 2026-07-10) — the number itself keeps carrying the visual
   weight, "points" just reads as its unit. The dollar figure underneath is
   deliberately much smaller/muted — account page shows both per the user,
   but points is clearly the primary framing everywhere else. */
.acc-wallet-balance-pts-label { font-size: 0.85rem; font-weight: 600; color: #999; }
.acc-wallet-balance-dollars { display: block; font-size: 0.82rem; color: #999; margin-top: 2px; }
.acc-wallet-redeem-row { display: flex; gap: 10px; margin-bottom: 6px; }
.acc-wallet-redeem-row input {
    flex: 1; min-width: 0; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 10px;
    font-size: 0.9rem; text-transform: uppercase;
}
.acc-wallet-redeem-row input:focus { outline: none; border-color: var(--accent); }
.acc-wallet-redeem-row .auth-btn { width: auto; flex: 0 0 auto; padding: 10px 18px; }
.acc-wallet-redeem-msg { font-size: 0.82rem; margin-bottom: 14px; }
.acc-wallet-redeem-msg-error { color: #b91c1c; }
.acc-wallet-history-title { font-size: 0.9rem; font-weight: 700; margin: 18px 0 10px; padding-top: 16px; border-top: 1px solid #eee; }
.acc-wallet-history-list { display: flex; flex-direction: column; gap: 8px; }
.acc-wallet-tx-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border: 1px solid #eee; border-radius: 10px;
}
.acc-wallet-tx-info { min-width: 0; }
.acc-wallet-tx-label { font-weight: 700; font-size: 0.86rem; }
.acc-wallet-tx-date { color: #999; font-size: 0.76rem; margin-top: 2px; }
.acc-wallet-tx-note { color: #666; font-size: 0.78rem; margin-top: 2px; }
.acc-wallet-tx-amount { font-weight: 700; font-size: 0.9rem; white-space: nowrap; flex: 0 0 auto; text-align: right; }
.acc-wallet-tx-credit { color: #166534; }
.acc-wallet-tx-debit { color: #b91c1c; }
/* Each history row now shows points (primary) + dollars (secondary, muted)
   stacked, same points-primary/dollars-secondary convention as the balance
   headline above (added 2026-07-10). */
.acc-wallet-tx-pts { font-weight: 700; }
.acc-wallet-tx-dollars { font-weight: 500; font-size: 0.74rem; color: #999; margin-top: 1px; }

/* ── Claim points (added 2026-07-10) ──────────────────────────────────────
   Points now accumulate as pending wallet_transactions rows (claimed='No')
   instead of auto-crediting wallet_balance. This banner surfaces the
   unclaimed total up top with a one-click claim action, and history rows
   for still-unclaimed/expired/claimed reward_earned rows get a status pill
   instead of a +/- dollar amount (they're informational until claimed). */
.acc-claim-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap; padding: 16px 18px; margin-bottom: 14px;
    background: linear-gradient(135deg, rgba(251,176,11,0.14), rgba(251,176,11,0.05));
    border: 1.5px solid rgba(251,176,11,0.45); border-radius: 12px;
}
.acc-claim-banner-text { min-width: 0; }
.acc-claim-banner-title { font-weight: 800; font-size: 0.98rem; color: #7a4d00; }
.acc-claim-banner-sub { font-size: 0.8rem; color: #8a6a2a; margin-top: 3px; }
.acc-claim-btn { width: auto; flex: 0 0 auto; padding: 10px 20px; }

.acc-wallet-tx-status-badge {
    display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.03em; padding: 3px 9px; border-radius: 999px; margin-top: 3px;
}
.acc-wallet-tx-pending .acc-wallet-tx-status-badge { background: rgba(251,176,11,0.16); color: #8a5a00; }
.acc-wallet-tx-claimed .acc-wallet-tx-status-badge { background: rgba(22,101,52,0.12); color: #166534; }
.acc-wallet-tx-expired .acc-wallet-tx-status-badge { background: rgba(0,0,0,0.06); color: #888; }

/* ── History "Show more" pagination (added 2026-07-10) ────────────────────
   Shared by the wallet-history list and the order-history list — both grow
   without bound over a customer's lifetime, so both only render their first
   page and load the rest on demand (assets/js/account.js). Kept visually
   quiet (outline style, centered, full-width on its own row) so it reads as
   "more below" rather than competing with the primary action buttons above
   it on the page. */
.acc-history-more-wrap { display: flex; justify-content: center; margin-top: 14px; }
.acc-history-more-btn {
    padding: 9px 22px; border: 1.5px solid var(--border); border-radius: 999px;
    background: #fff; color: #333; font-weight: 700; font-size: 0.82rem;
    cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.acc-history-more-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-d); }
.acc-history-more-btn:disabled { opacity: 0.6; cursor: default; }

/* ── Account page mobile layout fixes (added 2026-07-06) ─────────────────
   User report: on phones the logout button ran past the card's right edge
   (it was pinned there via margin-left:auto on the same row as the
   avatar/name/email), the address/payment-method Edit/Delete/Set-default
   links sat cramped in a right-hand column next to the info block, and the
   order-history row squeezed order#/date/badge/total/arrow/Reorder all onto
   one line. Below ~560px (phone widths — chosen because that's where these
   specific rows actually got cramped in testing, not tied to any container
   max-width): logout drops to its own full-width row below the name/email
   instead of floating right;
   address/payment-method actions move from a right-aligned vertical column
   to a horizontal row BELOW the address/card details, separated by a thin
   divider; and the order row stacks (order # line, date line, then
   badge+total on their own wrapped line, then a full-width Reorder button
   last) instead of everything fighting for space on one line. */
@media (max-width: 560px) {
    .acc-profile-row { flex-wrap: wrap; }
    .acc-logout-btn {
        flex: 1 1 100%;
        margin-left: 0;
        margin-top: 12px;
        width: 100%;
        text-align: center;
    }

    .acc-addr-row, .acc-pm-row {
        flex-direction: column;
        align-items: stretch;
    }
    .acc-addr-actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 16px;
        width: 100%;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #f0f0f0;
    }

    .acc-order-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .acc-order-link { flex-wrap: wrap; gap: 6px 10px; }
    .acc-order-main { flex: 1 1 100%; }
    .acc-order-arrow { display: none; }
    .acc-order-reorder-btn { width: 100%; justify-content: center; }

    .acc-wallet-header { flex-direction: column; align-items: flex-start; }
    .acc-wallet-balance { text-align: left; }
    .acc-wallet-redeem-row { flex-direction: column; }
    .acc-wallet-redeem-row .auth-btn { width: 100%; }
    .acc-wallet-tx-row { flex-direction: column; align-items: stretch; gap: 4px; }
    .acc-wallet-tx-amount { text-align: right; }
}

/* ── Saved-address chips on checkout (added 2026-07-04, §10c) ───────────── */
.co-saved-addr-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.co-saved-addr-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 100px; border: 1.5px solid var(--border);
    background: #fff; color: #444; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.co-saved-addr-chip.active { border-color: var(--accent); background: var(--accent); color: #000; }
.co-saved-addr-chip-new { color: #888; }
.co-saved-addr-chip-new.active { border-color: var(--accent); background: var(--accent); color: #000; }

/* ── Saved-payment-method chips on checkout (added 2026-07-04, §10c) ────── */
.co-saved-pm-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.co-saved-pm-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 100px; border: 1.5px solid var(--border);
    background: #fff; color: #444; font-size: 0.82rem; font-weight: 600; cursor: pointer;
    text-transform: capitalize;
}
.co-saved-pm-chip.active { border-color: var(--accent); background: var(--accent); color: #000; }
.co-saved-pm-chip-new { color: #888; text-transform: none; }
.co-saved-pm-chip-new.active { border-color: var(--accent); background: var(--accent); color: #000; }
.co-save-card-row { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #333; margin-top: 10px; }

/* ── Admin area (added 2026-07-06) — includes/admin-header.php/-footer.php,
   pages/admin-login.php, admin.php, admin-logout.php. Deliberately its own
   small block rather than reusing the storefront nav's CSS — the admin
   topbar is a fixed dark bar (same brand colors) but a totally different
   layout (no cart/lang switcher/category pills). ────────────────────────── */
.admin-body { background: #f6f6f4; }
.admin-topbar {
    display: flex; align-items: center; gap: 20px;
    background: var(--nav); color: #fff; padding: 12px 24px;
    flex-wrap: wrap;
}
.admin-topbar-brand { font-weight: 800; display: flex; align-items: center; gap: 8px; color: var(--accent); white-space: nowrap; }
.admin-topbar-nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.admin-nav-link {
    color: #ccc; text-decoration: none; font-size: 0.88rem; font-weight: 600;
    padding: 8px 12px; border-radius: 8px;
}
.admin-nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); }
.admin-nav-link.active { color: #000; background: var(--accent); }
.admin-topbar-user { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.admin-topbar-name { font-size: 0.85rem; color: #eee; }
.admin-role-badge {
    font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 100px;
    text-transform: capitalize;
}
.admin-role-admin { background: #dcfce7; color: #166534; }
.admin-role-translator { background: #dbeafe; color: #1e40af; }
.admin-logout-link { color: #ccc; text-decoration: none; font-size: 0.85rem; }
.admin-logout-link:hover { color: #fff; text-decoration: underline; }

.admin-page-wrap { min-height: 100vh; }
.admin-wrap { max-width: 860px; margin: 32px auto 60px; padding: 0 16px; }
.admin-page-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 6px; }

.admin-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 20px; }
.admin-tool-card {
    display: flex; align-items: flex-start; gap: 14px;
    background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 18px;
    text-decoration: none; color: inherit;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: border-color 0.15s, background 0.15s;
}
.admin-tool-card:not(.admin-tool-card-disabled):hover { border-color: var(--accent); background: #fafafa; }
.admin-tool-card i { font-size: 1.6rem; color: var(--accent-d); }
.admin-tool-card-disabled { opacity: 0.6; cursor: default; }
.admin-tool-card-disabled i { color: #aaa; }
.admin-tool-title { font-weight: 700; font-size: 0.95rem; }
.admin-tool-desc { color: #777; font-size: 0.82rem; margin-top: 3px; line-height: 1.4; }
.admin-tool-desc em { font-style: normal; color: #999; }

/* ── Translation editor (added 2026-07-06) — pages/admin-translations.php ── */
.admin-translations-tabs { display: flex; gap: 4px; margin: 18px 0 6px; flex-wrap: wrap; }
.admin-translations-tabs .admin-nav-link { color: #555; }
.admin-translations-tabs .admin-nav-link:hover { color: #000; background: #f0f0f0; }
.admin-translations-tabs .admin-nav-link.active { color: #000; background: var(--accent); }

.admin-translate-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.admin-translate-row { background: #fff; border: 1px solid #eee; border-radius: 12px; overflow: hidden; }
.admin-translate-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 18px; background: none; border: none; text-align: left;
    cursor: pointer; font: inherit;
}
.admin-translate-toggle:hover { background: #fafafa; }
.admin-translate-toggle i { color: #999; transition: transform 0.15s; }
.admin-translate-toggle.open i { transform: rotate(180deg); }
.admin-translate-name { font-weight: 700; font-size: 0.92rem; }
.admin-translate-context { color: #888; font-size: 0.78rem; margin-top: 2px; }
.admin-translate-panel { padding: 4px 18px 18px; border-top: 1px solid #f0f0f0; }
.admin-translate-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.admin-translate-field label { display: block; font-size: 0.78rem; font-weight: 600; color: #666; margin-bottom: 4px; }
.admin-translate-field input, .admin-translate-field textarea {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit;
}
.admin-translate-save-btn { align-self: flex-start; }
.admin-translate-saved-msg { color: #166534; font-size: 0.82rem; font-weight: 600; margin-left: 10px; }

/* ══ /pay + /opay  standalone payment form (2026-07-09) ═══════════════════════
   Mobile-first: single centered card, big tap targets, sticky-feeling submit. */
.pay-wrap {
    max-width: 560px;
    margin: 24px auto 60px;
    padding: 0 14px;
}
.pay-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    overflow: hidden;
}

/* ── Header: who you're paying ── */
.pay-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 22px 20px;
    background: linear-gradient(135deg, #0a0a0a 0%, #1c1c1c 100%);
    color: #fff;
}
.pay-head-icon {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    background: var(--accent);
    color: #000;
    border-radius: 12px;
    font-size: 1.35rem;
}
.pay-head-txt { min-width: 0; }
.pay-head-eyebrow {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 2px;
}
.pay-head-store {
    font-size: 1.28rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
    word-break: break-word;
}
.pay-head-addr {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.72);
    display: flex; align-items: baseline; gap: 5px;
}
.pay-head-addr .bi { color: var(--accent); }

/* ── opay order banner ── */
.pay-order-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 12px 22px;
    background: #fff8e8;
    border-bottom: 1px solid #f2e4c0;
}
.pay-order-label { font-size: 0.82rem; color: #8a6d1f; font-weight: 600; }
.pay-order-ref {
    font-size: 0.98rem; font-weight: 800; color: #6b5310;
    letter-spacing: 0.02em;
}

/* ── Body / fields ── */
.pay-body { padding: 20px 22px 24px; }
.pay-field { margin-bottom: 16px; }
.pay-field > label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 7px;
}
.pay-optional { font-weight: 500; color: var(--muted); font-size: 0.78rem; }

.pay-input, .pay-textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    font: inherit;
    font-size: 1rem;
    background: #fafafa;
    transition: border-color .15s, background .15s, box-shadow .15s;
    -webkit-appearance: none;
}
.pay-input:focus, .pay-textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(251,176,11,0.15);
}
.pay-input[readonly] { background: #f0f0f0; color: #555; cursor: default; }
.pay-textarea { resize: vertical; min-height: 46px; }
.pay-hint { display: block; margin-top: 6px; font-size: 0.76rem; color: var(--muted); }

/* ── Amount field ── */
.pay-amount-wrap {
    display: flex; align-items: center;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    background: #fafafa;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.pay-amount-wrap:focus-within {
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(251,176,11,0.15);
}
.pay-amount-cur {
    padding: 0 10px 0 14px;
    font-size: 1.35rem; font-weight: 800; color: #888;
}
.pay-amount-input {
    flex: 1 1 auto;
    width: 100%;
    border: 0; background: transparent;
    padding: 14px 8px 14px 0;
    font-size: 1.55rem; font-weight: 800; color: #111;
    -webkit-appearance: none;
}
.pay-amount-input:focus { outline: none; }
.pay-amount-input.locked { color: #444; }
.pay-amount-lock { padding: 0 16px; color: var(--accent); font-size: 1rem; }
.pay-tip-custom-wrap { margin-top: 10px; }
.pay-tip-custom-wrap .pay-amount-cur { font-size: 1.1rem; }
.pay-tip-custom-wrap .pay-amount-input { font-size: 1.15rem; padding: 11px 8px 11px 0; }

/* ── Tip chips ── */
.pay-tip-chips {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.pay-tip-chip {
    padding: 11px 4px;
    border: 1px solid #dcdcdc;
    border-radius: 11px;
    background: #fafafa;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: #444;
    cursor: pointer;
    transition: all .12s;
    -webkit-tap-highlight-color: transparent;
}
.pay-tip-chip:hover { border-color: var(--accent); color: #111; }
.pay-tip-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
    box-shadow: 0 3px 10px rgba(251,176,11,0.35);
}
.pay-tip-chip-custom { font-size: 0.78rem; }

/* ── Stripe card element ── */
.pay-stripe-el {
    padding: 14px;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    background: #fafafa;
}
.pay-stripe-errors { color: #c0392b; font-size: 0.82rem; margin-top: 7px; min-height: 1em; }

/* ── Captcha ── */
.pay-captcha { margin: 4px 0 16px; display: flex; justify-content: center; }
/* Keep the reCAPTCHA badge from overflowing narrow phones. */
.pay-captcha .g-recaptcha { transform-origin: center; }
@media (max-width: 360px) {
    .pay-captcha .g-recaptcha { transform: scale(0.86); }
}

/* ── Checkout captcha (added 2026-07-13, fraud-prevention §2) ──
   Same widget/rules as .pay-captcha above, just scoped to checkout.php's
   own class name rather than reusing .pay-captcha directly, so the two
   pages' styling can drift independently later without one silently
   affecting the other. */
.co-captcha { margin: 10px 0 4px; display: flex; justify-content: center; }
.co-captcha .g-recaptcha { transform-origin: center; }
@media (max-width: 360px) {
    .co-captcha .g-recaptcha { transform: scale(0.86); }
}

/* ── Totals ── */
.pay-totals {
    margin: 18px 0 16px;
    padding: 14px 16px;
    background: #f7f7f5;
    border-radius: 14px;
}
.pay-tot-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.92rem; color: #555;
    padding: 3px 0;
}
.pay-tot-row b { color: #333; font-weight: 700; }
.pay-tot-grand {
    margin-top: 8px; padding-top: 10px;
    border-top: 1px dashed #d8d8d2;
    font-size: 1.12rem; color: #111;
}
.pay-tot-grand span { font-weight: 700; }
.pay-tot-grand b { font-size: 1.28rem; font-weight: 800; color: #111; }

/* ── Submit ── */
.pay-submit {
    width: 100%;
    padding: 16px;
    border: 0;
    border-radius: 14px;
    background: var(--accent);
    color: #000;
    font: inherit;
    font-size: 1.08rem;
    font-weight: 800;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .15s, transform .05s;
    -webkit-tap-highlight-color: transparent;
}
.pay-submit:hover:not(:disabled) { background: var(--accent-d); }
.pay-submit:active:not(:disabled) { transform: translateY(1px); }
.pay-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.pay-spinner {
    width: 20px; height: 20px;
    border: 3px solid rgba(0,0,0,0.25);
    border-top-color: #000;
    border-radius: 50%;
    animation: pay-spin 0.7s linear infinite;
}
@keyframes pay-spin { to { transform: rotate(360deg); } }

.pay-secure {
    margin: 14px 0 0;
    text-align: center;
    font-size: 0.76rem;
    color: var(--muted);
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.pay-secure .bi { color: var(--green); }

/* ── Error / notice ── */
.pay-error {
    margin: 0 0 4px;
    padding: 12px 14px;
    background: #fdecea;
    border: 1px solid #f5c6c0;
    border-radius: 12px;
    color: #a5281b;
    font-size: 0.88rem;
    font-weight: 600;
}
.pay-notice {
    padding: 12px 14px;
    background: #fff8e8;
    border: 1px solid #f2e4c0;
    border-radius: 12px;
    color: #8a6d1f;
    font-size: 0.88rem;
}

/* ── Success panel + state pages (not-found / already-paid) ── */
.pay-success, .pay-state {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    padding: 40px 26px 34px;
    text-align: center;
}
.pay-success-check, .pay-state-icon {
    font-size: 3.4rem;
    line-height: 1;
    margin-bottom: 14px;
}
.pay-success-check { color: var(--green); }
.pay-state-icon-ok { color: var(--green); }
.pay-state-icon-warn { color: #e0a90b; }
.pay-success h2, .pay-state h1 {
    font-size: 1.45rem; font-weight: 800; margin: 0 0 8px; color: #111;
}
.pay-success-sub, .pay-state p { color: #555; margin: 0 0 6px; font-size: 0.95rem; }
.pay-state-ref { font-weight: 800; color: #111; }
.pay-success-detail { margin: 18px 0 8px; }
.pay-success-ref { font-weight: 800; color: #6b5310; font-size: 1rem; margin-bottom: 4px; }
.pay-success-amt { font-size: 1.7rem; font-weight: 800; color: #111; }
.pay-success-home {
    display: inline-block;
    margin-top: 18px;
    padding: 12px 24px;
    border-radius: 12px;
    background: #111;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
}
.pay-success-home:hover { background: #000; }

/* ── Larger screens: a touch more breathing room ── */
@media (min-width: 600px) {
    .pay-wrap { margin-top: 40px; }
    .pay-body { padding: 24px 28px 28px; }
    .pay-head { padding: 26px 28px 24px; }
}

/* ══════════════════════════════════════════════════════════════════════
   INFO HUB — added 2026-07-13. Covers pages/info.php, pages/locations.php,
   pages/contact.php, pages/policy.php, pages/terms.php. All of these live
   inside .page-wrap (see includes/header.php), so no extra max-width /
   centering is needed here — just vertical rhythm + the card language
   already used elsewhere (white card, 1px #eee border, 14px radius, faint
   shadow — matching .co-section / .co-summary / .pay-success-home).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Shared page header (title + optional subtitle) ── */
.info-head { padding: 22px 2px 18px; }
.info-title { font-size: 1.5rem; font-weight: 800; color: #111; margin: 0 0 4px; }
.info-sub { color: #666; font-size: 0.9rem; margin: 0; }

/* ── /info hub — "What's New" welcome panel (added 2026-07-15) ──
   Reuses the same amber-icon-chip visual language as .info-card below,
   just laid out as a stacked list (icon + title + description) rather
   than a grid of link-out cards, since these items don't navigate
   anywhere — they're pure informational copy. */
.info-whatsnew {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 20px 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    margin-bottom: 18px;
}
.info-whatsnew-title { font-size: 1.15rem; font-weight: 800; color: #111; margin: 0 0 4px; }
.info-whatsnew-sub { font-size: 0.85rem; color: #666; margin: 0 0 16px; line-height: 1.4; }
.info-whatsnew-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.info-whatsnew-item { display: flex; align-items: flex-start; gap: 14px; }
.info-whatsnew-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(251,176,11,0.12);
    color: var(--accent-d);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.info-whatsnew-body { flex: 1; min-width: 0; }
.info-whatsnew-item-title { font-weight: 700; font-size: 0.92rem; color: #111; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.info-whatsnew-item-desc { font-size: 0.82rem; color: #777; margin: 3px 0 0; line-height: 1.5; }
.info-whatsnew-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--accent-d);
    background: rgba(251,176,11,0.15);
    border-radius: 6px;
    padding: 2px 7px;
}

/* ── /info hub — card grid ── */
.info-wrap { padding-bottom: 24px; }
.info-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.info-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.1s;
}
.info-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.info-card-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(251,176,11,0.12);
    color: var(--accent-d);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.info-card-body { flex: 1; min-width: 0; }
.info-card-title { font-weight: 700; font-size: 0.95rem; color: #111; }
.info-card-desc { font-size: 0.82rem; color: #777; margin-top: 2px; }
.info-card-arrow { color: #ccc; font-size: 1rem; flex-shrink: 0; }

.info-social {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.info-social-label { font-weight: 700; font-size: 0.85rem; color: #444; }
.info-social-icons { display: flex; gap: 10px; }
.info-social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0f0ee;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.info-social-icon:hover { background: var(--accent); color: #000; }

/* ── /locations — retail-partner directory ──────────────────────────────
   Rebuilt 2026-07-13 to match the legacy cachitos.ca/maps layout the user
   showed us: a search sidebar (address/postal search + "use my location" +
   scrollable list) alongside a persistent map with a pin per location.
   The map + address search need a Google Maps JS API key the user is
   adding to store_parameters ('google_maps_api_key') — see
   pages/locations.php / assets/js/locations.js for the graceful-degrade
   behavior when that key isn't set yet (map column just doesn't render;
   "use my location" + distance sort still work with no key at all, since
   that's plain browser geolocation + haversine math). ── */
.loc-wrap { padding-bottom: 24px; }
.loc-empty {
    text-align: center;
    padding: 48px 16px;
    color: #888;
    font-size: 0.9rem;
}
.loc-empty p { margin-top: 10px; }

.loc-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.loc-sidebar { min-width: 0; }
.loc-map-panel {
    display: none; /* shown via JS once the map has a key + finishes loading, or via the mobile toggle */
    min-width: 0;
}
.loc-map-panel.open { display: block; }
.loc-map {
    width: 100%;
    height: 360px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #eee;
    background: #eceae6;
}
.loc-map-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    color: #333;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 4px;
}
.loc-map-toggle:hover { border-color: var(--accent); }
.loc-map-toggle.active { border-color: var(--accent); background: rgba(251,176,11,0.12); color: #000; }

.loc-search {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    margin-bottom: 12px;
}
.loc-search-label { font-weight: 700; font-size: 0.82rem; color: #444; margin-bottom: 8px; }
.loc-search-row { display: flex; gap: 8px; }
.loc-search-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    font-size: 0.88rem;
    color: #222;
    background: #fafafa;
    font-family: inherit;
}
.loc-search-input:focus { outline: none; border-color: var(--accent); background: #fff; }
.loc-search-submit {
    flex-shrink: 0;
    width: 42px;
    border: none;
    border-radius: 9px;
    background: var(--black);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}
.loc-search-submit:hover { background: #222; }
.loc-use-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    background: none;
    border: none;
    padding: 0;
    color: var(--accent-d);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}
.loc-use-location:hover { text-decoration: underline; }
.loc-search-status { font-size: 0.78rem; color: #888; margin-top: 8px; min-height: 1em; }
.loc-search-status.err { color: #b91c1c; }

.loc-list { display: flex; flex-direction: column; gap: 12px; max-height: none; }
.loc-distance {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent-d);
    background: rgba(251,176,11,0.12);
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
}
.loc-card {
    display: flex;
    gap: 14px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    scroll-margin-top: 12px;
    transition: border-color 0.15s;
}
.loc-card.active { border-color: var(--accent); }
.loc-logo {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: #f6f6f4;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loc-logo img { width: 100%; height: 100%; object-fit: cover; }
.loc-logo-ph { color: #bbb; font-size: 1.5rem; }
.loc-body { flex: 1; min-width: 0; }
.loc-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.loc-name { font-weight: 700; font-size: 1rem; color: #111; }
.loc-zone {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--accent-d);
    background: rgba(251,176,11,0.12);
    border-radius: 999px;
    padding: 2px 9px;
}
.loc-line {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    color: #555;
    margin-top: 4px;
}
.loc-line .bi { color: #999; flex-shrink: 0; }
.loc-line a { color: inherit; text-decoration: none; }
.loc-line a:hover { color: var(--accent-d); }
.loc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.loc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--black);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
}
.loc-btn:hover { background: #222; }
.loc-btn-ghost {
    background: #fff;
    color: #333;
    border: 1.5px solid #e2e8f0;
}
.loc-btn-ghost:hover { border-color: var(--accent); color: #111; background: #fff; }
.loc-btn-ghost.active { border-color: var(--accent); background: rgba(251,176,11,0.12); color: #000; }
.loc-map-embed { margin-top: 12px; border-radius: 10px; overflow: hidden; }
.loc-map-embed iframe { width: 100%; min-height: 220px; border: 0; display: block; }

/* Desktop: sidebar (search + list) alongside a persistent map, matching
   the legacy layout — list scrolls independently so the map stays put. */
@media (min-width: 860px) {
    .loc-layout { flex-direction: row; align-items: flex-start; gap: 20px; }
    .loc-sidebar { flex: 0 0 380px; }
    .loc-map-panel {
        display: block; /* no mobile toggle needed once there's room for both */
        flex: 1;
        min-width: 0;
        position: sticky;
        top: 16px;
    }
    .loc-map-toggle { display: none; }
    .loc-map { height: 620px; }
    .loc-list { max-height: 620px; overflow-y: auto; padding-right: 4px; }
}

/* ── /contact ── */
.contact-wrap { padding-bottom: 24px; }
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.contact-info-card, .contact-form-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.contact-store-name { font-weight: 800; font-size: 1.1rem; color: #111; margin-bottom: 8px; }
.contact-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: #555;
    margin-bottom: 6px;
}
.contact-line .bi { color: var(--accent-d); flex-shrink: 0; }
.contact-line a { color: inherit; text-decoration: none; }
.contact-line a:hover { color: var(--accent-d); }
.contact-hours-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: #444;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
    margin-bottom: 4px;
}
.contact-form-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 14px; color: #111; }
.contact-success {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #15803d;
    padding: 12px 14px;
    border-radius: 9px;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

@media (min-width: 760px) {
    .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ── /policy, /terms — static legal pages ── */
.legal-wrap { padding-bottom: 32px; }
.legal-lang-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #eef6ff;
    border: 1px solid #bcdcff;
    color: #1a5aa8;
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 0.85rem;
    margin-bottom: 18px;
}
/* Amber variant (added 2026-07-15) — flags an unofficial/AI-generated
   translation (pages/policy.php's Spanish text) as distinct from the
   blue "not available in this language yet" notice above, which is a
   plain factual statement rather than a disclaimer about content quality. */
.legal-lang-notice-ai {
    background: #fff7e6;
    border-color: #ffdfa3;
    color: #8a5a00;
}
.legal-body {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 22px 22px 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    color: #333;
    font-size: 0.9rem;
    line-height: 1.65;
}
.legal-body h2 { font-size: 1.15rem; font-weight: 800; color: #111; margin: 0 0 14px; }
.legal-body h3 { font-size: 0.98rem; font-weight: 700; color: #111; margin: 20px 0 8px; }
.legal-body p { margin: 0 0 14px; }
.legal-body ul { margin: 0 0 14px; padding-left: 22px; }
.legal-body li { margin-bottom: 6px; }
.legal-body a { color: var(--accent-d); }
.legal-address {
    background: #f6f6f4;
    border-radius: 9px;
    padding: 12px 14px;
    margin: 0 0 14px;
    font-style: normal;
    line-height: 1.6;
}

@media (max-width: 480px) {
    .info-card { padding: 14px; gap: 11px; }
    .info-card-icon { width: 38px; height: 38px; font-size: 1.1rem; }
    .legal-body { padding: 18px 16px 4px; }
}

/* ── / (home hero sections) — added 2026-07-14, restyled 2026-07-14,
   full-bleed section bands added 2026-07-14 ──────────────────────────────
   pages/home.php renders home_sections (type='slides') here — a single
   slide is a static banner, 2+ slides is a Bootstrap carousel (already
   loaded sitewide via includes/footer.php).

   Full-bleed redesign: each section is now its own edge-to-edge colored
   band (`.home-hero-section`, background from the slide's own
   `background_color` field — see pages/home.php), stacked directly against
   the next with no gap, like apple.com's product-page sections. The
   band's own vertical PADDING (not margin) is what separates sections —
   since it's padding, not margin, two consecutive bands' backgrounds
   touch with no sliver of the page's base color showing between them,
   and the very first band's top padding alone gives the breathing room
   below the category pills (no separate :first-child rule needed the way
   a margin-based approach would need).

   `.home-hero-section` breaks out of `.page-wrap`'s 1040px max-width using
   the standard "full-bleed" CSS trick (100vw + negative margin pulls the
   box to the viewport edges regardless of its ancestor's constraint) —
   see body's `overflow-x: hidden` below, which guards against the 1-2px
   horizontal scrollbar some browsers introduce with a raw 100vw value.
   `.home-hero-inner` re-applies .page-wrap's own max-width/padding so the
   actual photo/text content lines up with the rest of the site's content
   column even though its background doesn't. */
.home-hero-section {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 28px 0;
    background-color: var(--card); /* fallback shown until a slide sets its own background_color */
}
.home-hero-inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 12px;
    width: 100%;
}

.home-hero-slide {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: 18px;
    overflow: hidden;
    background: #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08);
}
.home-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Subtle Ken-Burns drift on whichever slide is active — pure CSS, runs
   once per slide activation (animation restarts because Bootstrap toggles
   the .active class off/on, which re-triggers the keyframe). Skipped
   entirely for users who've asked the OS for reduced motion. */
.carousel-item.active .home-hero-img {
    animation: home-hero-kenburns 6s ease-out forwards;
}
@keyframes home-hero-kenburns {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .carousel-item.active .home-hero-img { animation: none; }
}
.home-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 42%, rgba(0,0,0,0.05) 72%, rgba(0,0,0,0) 100%);
    display: flex;
    align-items: flex-end;
    padding: 24px 22px;
}
.home-hero-content { color: #fff; max-width: 480px; }
.home-hero-headline {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    line-height: 1.22;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.home-hero-desc {
    font-size: 0.9rem;
    margin: 0 0 16px;
    opacity: 0.92;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.home-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: #000;
    font-weight: 800;
    letter-spacing: 0.01em;
    padding: 12px 26px;
    border-radius: 999px;
    text-decoration: none;
    border: none;
    font-size: 0.88rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.28);
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.home-hero-btn:hover {
    background: var(--accent-d);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.32);
}
.home-hero-btn:active { transform: translateY(0); }

/* No card wrapper styling on .home-hero-carousel itself any more — it's a
   plain layout container that fills the full-bleed .home-hero-section, one
   .home-hero-inner + .home-hero-slide per carousel-item carries the actual
   rounded/shadowed "photo card" look now. Items stay transparent so the
   outer .home-hero-section's own background-color (one color per section,
   from home_sections.background_color — see pages/home.php) shows through
   uniformly no matter which slide is active; slides no longer carry their
   own individual background colors. */
.home-hero-carousel .carousel-item { background: transparent; }
/* Crossfade instead of Bootstrap's default hard slide (pages/home.php adds
   the .carousel-fade modifier class) — slowed down and eased so it reads
   as a deliberate, premium transition rather than a quick blink. Bootstrap
   only transitions opacity for .carousel-fade, so this override is safe —
   it can't affect the (unused here) slide-transform path. */
.home-hero-carousel.carousel-fade .carousel-item {
    transition: opacity 0.9s cubic-bezier(.4, 0, .2, 1);
}
.home-hero-carousel.carousel-fade .carousel-item.active {
    transition: opacity 0.9s cubic-bezier(.4, 0, .2, 1);
}
.home-hero-carousel .carousel-indicators { margin-bottom: 10px; gap: 5px; }
.home-hero-carousel .carousel-indicators [data-bs-target] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.55);
    border: none;
    opacity: 1;
    transition: background-color 0.15s, width 0.15s;
}
.home-hero-carousel .carousel-indicators .active {
    background-color: var(--accent);
    width: 18px;
    border-radius: 4px;
}
.home-hero-carousel .carousel-control-prev,
.home-hero-carousel .carousel-control-next { width: 44px; opacity: 0; transition: opacity 0.15s; }
.home-hero-carousel:hover .carousel-control-prev,
.home-hero-carousel:hover .carousel-control-next,
.home-hero-carousel:focus-within .carousel-control-prev,
.home-hero-carousel:focus-within .carousel-control-next { opacity: 1; }
.home-hero-carousel .carousel-control-prev-icon,
.home-hero-carousel .carousel-control-next-icon {
    width: 28px;
    height: 28px;
    background-color: rgba(0,0,0,0.35);
    border-radius: 50%;
    background-size: 55%;
    padding: 5px;
}

@media (min-width: 600px) {
    .home-hero-slide { height: 380px; }
    .home-hero-overlay { padding: 30px 32px; }
    .home-hero-headline { font-size: 1.7rem; }
    .home-hero-desc { font-size: 1rem; }
}
@media (min-width: 860px) {
    .home-hero-slide { height: 500px; }
    .home-hero-overlay { padding: 40px 44px; }
    .home-hero-headline { font-size: 2rem; }
}

/* ── / (featured-product hero layouts) — added 2026-07-14, renamed/merged
   2026-07-15 ──────────────────────────────────────────────────────────
   `image_centered` / `image_left` / `image_right` (originally
   `featured_products_centered` / `_left` / `_right`, plus a separate
   `featured_categories` — merged into these 3 same-named-class layouts on
   2026-07-15, see pages/home.php's docblock) — a single featured
   category/product/link, apple.com-product-page style, built from the
   user's two examples (see pages/home.php's docblock for the exact
   references). CSS class names (.home-feat-*) were never tied to the old
   type names, so no class renames were needed here — only the PHP-side
   render branch that emits them changed.
   Unlike .home-hero-slide (photo with text overlaid on a dark gradient),
   text here sits directly on the section's own background — that's what
   .home-hero-section's inline color (from home_sections.font_color,
   added 2026-07-14 same day as a fix for black-on-black text once a
   dark background_color was chosen) is for; blank still falls back to
   the theme's normal body text color, which reads fine against the
   default var(--card) dark background but needs an explicit font_color
   for a light one. */
.home-feat-centered .home-hero-inner,
.home-feat-side .home-hero-inner {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Centered (Apple-style): text block stacked and centered above a large,
   plain product image — no card shadow/rounded corners on the image
   itself, it just sits directly on the section's background, same
   treatment as apple.com's own product hero shots. */
.home-feat-inner-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}
.home-feat-inner-centered .home-feat-text { max-width: 640px; }
.home-feat-inner-centered .home-feat-cta-row { justify-content: center; }
.home-feat-inner-centered .home-feat-media { width: 100%; max-width: 640px; }

/* Left/right (side-by-side): stacked on mobile (image first, text
   second, regardless of _left vs _right — reading order beats visual
   left/right on a narrow screen), side-by-side from 720px up where the
   DOM order pages/home.php already emits (_left = media first, _right =
   text first) is what actually puts the image on the correct side. */
.home-feat-inner-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.home-feat-inner-side .home-feat-text { text-align: left; }
.home-feat-inner-side .home-feat-cta-row { justify-content: flex-start; }
@media (min-width: 720px) {
    .home-feat-inner-side {
        flex-direction: row;
        align-items: center;
        gap: 40px;
    }
    .home-feat-inner-side .home-feat-text,
    .home-feat-inner-side .home-feat-media { flex: 1 1 50%; min-width: 0; }
}

.home-feat-headline {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 10px;
}
.home-feat-desc {
    font-size: 0.98rem;
    line-height: 1.5;
    opacity: 0.85;
    margin: 0 0 18px;
}
.home-feat-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
/* Outline variant of .home-hero-btn (see the slides styling above) — same
   pill shape, transparent fill, border+text in the site's accent color
   instead of a solid fill, for a secondary/lower-emphasis action like
   "Learn more" next to a primary "Buy". */
.home-hero-btn-outline {
    background: transparent;
    color: var(--accent);
    border: 1.5px solid var(--accent);
    box-shadow: none;
}
.home-hero-btn-outline:hover {
    background: var(--accent);
    color: #000;
}

.home-feat-media { width: 100%; }
/* Wraps a slide's <img>/<video> in an <a> for the category/product/link
   click-through (added 2026-07-15 for image_centered/_left/_right — see
   $resolve_media_href in pages/home.php — then reused for `slides` too
   the same day once categories_id moved onto the slide row and the
   resolution logic started applying everywhere). Shared by both
   .home-hero-img (the `slides` type) and .home-feat-img (image_centered/
   _left/_right) — `display: block` keeps the anchor from adding
   inline-element whitespace/gap around the media; no underline/border
   needed since there's no visible text inside the link, just the image. */
.home-media-link { display: block; }
.home-feat-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 420px;
    margin: 0 auto;
    object-fit: contain;
}
@media (min-width: 600px) {
    .home-feat-headline { font-size: 2rem; }
    .home-feat-desc { font-size: 1.05rem; }
}
@media (min-width: 860px) {
    .home-feat-headline { font-size: 2.4rem; }
    .home-feat-img { max-height: 480px; }
}

/* ── / (home placeholder, shown only when no sections are configured yet) ──
   Kept intentionally minimal/quiet: no card, no border, just breathing
   room, matching pages/404.php's own plain centered-message treatment. */
.home-ph { text-align: center; padding: 70px 20px 50px; }
.home-ph-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #f0f0ee;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    font-size: 2.1rem;
    color: #bbb;
    overflow: hidden;
}
.home-ph-icon img { width: 100%; height: 100%; object-fit: cover; }
.home-ph-title { font-size: 1.3rem; font-weight: 800; color: #111; margin: 0 0 8px; }
.home-ph-desc { color: #888; font-size: 0.92rem; margin: 0 0 22px; }

/* ── Maintenance mode (added 2026-07-15) ────────────────────────────────── */
/* pages/maintenance.php — the standalone "site is down" page, no header/
   footer chrome (see that file's own docblock for why). */
.maint-body { background: #f6f6f4; margin: 0; }
.maint-wrap {
    max-width: 440px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 20px;
}
.maint-logo { max-width: 140px; max-height: 70px; object-fit: contain; margin-bottom: 22px; }
.maint-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: #fff7e6; color: #d97706;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem; margin-bottom: 20px;
}
.maint-title { font-size: 1.5rem; font-weight: 800; color: #111; margin: 0 0 10px; }
.maint-text { color: #666; font-size: 0.95rem; line-height: 1.55; margin: 0; }

/* pages/admin-maintenance.php — status banner above the toggle form. */
.maint-status-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: 10px; font-size: 0.92rem;
}
.maint-status-banner i { font-size: 1.1rem; }
.maint-status-on  { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.maint-status-off { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* ── Account: email preferences highlight (added 2026-07-15) ────────────── */
/* Briefly draws the eye to the Email Preferences card when arriving from
   /unsubscribe's ?focus=email-prefs redirect (assets/js/account.js). */
.acc-highlight {
    box-shadow: 0 0 0 3px var(--accent);
    transition: box-shadow 0.3s ease;
}