/*
  DESIGN PLAN
  Subject: everyday multi-vendor marketplace, mobile-first, Nigerian market.
  Color — cool indigo ground (not the cliché cream), marigold accent (not terracotta):
    --ink        #171A2B  body text
    --indigo     #26305C  brand / primary actions
    --indigo-deep#171F3D  hover/active
    --gold       #E8A23A  price, CTA accent
    --paper      #F5F6FA  page background (pale indigo tint, not cream)
    --surface    #FFFFFF  cards
    --line       #E2E4EE  hairlines
    --success    #2E7D5B  paid / delivered
    --danger     #C0392B  cancelled / error
    --muted      #6B7089  secondary text
  Type — three roles doing three distinct jobs:
    display  Fraunces     product names, vendor names, page headings — warm, editorial
    body     Inter        interface text, everywhere else
    mono     IBM Plex Mono  every number: prices, order numbers, SKUs, timers —
             this is the signature: money and reference numbers are ALWAYS
             monospace, so the eye learns to trust anything set in it as exact.
  Layout — single column mobile-first; a sticky bottom action bar carries the
  one primary action on product/cart/checkout screens.
  Signature — the order-summary "receipt" card gets a perforated top edge
  (radial-gradient punch pattern), used once per page, echoing a till receipt:
  every kobo on this platform is accounted for, so the one place totals are
  shown looks like a receipt tearing off the till.
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
    --ink: #171A2B;
    --indigo: #26305C;
    --indigo-deep: #171F3D;
    --gold: #E8A23A;
    --gold-deep: #C97F1E;
    --paper: #F5F6FA;
    --surface: #FFFFFF;
    --line: #E2E4EE;
    --success: #2E7D5B;
    --success-bg: #E7F3ED;
    --danger: #C0392B;
    --danger-bg: #FBEAE8;
    --amber: #B9791A;
    --amber-bg: #FBF0DD;
    --muted: #6B7089;

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(23,26,43,0.04), 0 8px 24px rgba(23,26,43,0.06);
    --container: 1180px;
    --bottom-bar-h: 68px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 .5em;
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; color: var(--ink); }

.mono, .price, .order-number, .sku, time.exact {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.price { font-weight: 600; }
.price.lg { font-size: 1.4rem; }
.price.strike { color: var(--muted); text-decoration: line-through; font-weight: 500; font-size: 0.9em; }

:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Layout shells ------------------------------------------------------ */

.container { max-width: var(--container); margin: 0 auto; padding: 0 16px; }
.page { padding: 20px 0 48px; min-height: calc(100vh - 300px); }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 24px; }
.grid-2 > * { min-width: 0; }
@media (min-width: 880px) { .grid-2 { grid-template-columns: 1fr 380px; align-items: start; } }

/* Sidebar + content layout (account, vendor, support pages). A plain inline
   style="grid-template-columns:220px 1fr" on .grid-2 was overriding its
   mobile-first single-column default on every screen size — inline styles
   beat a class's @media rule regardless of viewport, so 19 pages were
   forcing a fixed 220px sidebar even on a 320px phone. This class carries
   its own responsive breakpoint instead. */
.grid-sidebar { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 880px) { .grid-sidebar { grid-template-columns: 220px 1fr; align-items: start; } }

/* --- Header / nav -------------------------------------------------------- */

.site-header {
    position: sticky; top: 0; z-index: 40;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.site-header .bar { display: flex; align-items: center; gap: 14px; height: 60px; }
.brand {
    font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 4.2vw, 1.25rem);
    color: var(--indigo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0; /* lets the brand text truncate instead of pushing nav-icons off
                     the viewport — the same grid/flex min-width trap found and
                     fixed for product cards earlier, here on every header that
                     shows a variable-length name (vendor store name, etc).
                     The clamp() + icon-shrinking rules below mean the short,
                     fixed site brand name itself should never actually need
                     this fallback in practice — it exists for the genuinely
                     unbounded case (an arbitrarily long vendor store name),
                     not as the primary fix for the site's own brand text. */
}
.nav-icons { flex-shrink: 0; } /* action buttons never get squeezed — the brand text shrinks first */

/* Free up room for the brand on the narrowest phones by shrinking icon
   buttons and gaps first, per the "brand name has priority, don't ellipsis
   it" requirement — this is what actually keeps "Foodbaskket" fully
   readable down to 320px instead of the ellipsis fallback ever firing. */
@media (max-width: 374px) {
    .site-header .container.bar { padding: 0 10px; gap: 8px; }
    .site-header .icon-btn { width: 34px; height: 34px; }
    .site-header .nav-icons { gap: 2px; }
}

/* Compact header CTAs (vendor "Install"/"View store") — icon-only on
   mobile so they can't crowd the header next to a long store name, full
   label restored once there's room. Compound selector on purpose: same
   specificity trap already found twice this session with .mega-menu and
   .btn both losing silently to a later same-specificity rule. */
.btn.compact-cta { padding: 0 10px; gap: 4px; }
.btn.compact-cta .cta-label { display: none; }
@media (min-width: 480px) { .btn.compact-cta .cta-label { display: inline; } }
@media (max-width: 359px) { .hide-under-360 { display: none; } }

.admin-topbar-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.admin-topbar-name { display: none; }
@media (min-width: 560px) { .admin-topbar-name { display: inline; } }

/* Account nav — horizontal scrollable tabs on mobile (was a plain vertical
   stack of 8 full-width buttons, which is what the spec flagged as wrapping
   awkwardly there), full bordered sidebar list restored once there's room
   for one. */
.account-nav {
    display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 10px;
    -webkit-overflow-scrolling: touch;
}
.account-nav-link {
    flex-shrink: 0; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
    color: var(--muted); background: var(--surface); border: 1px solid var(--line); white-space: nowrap;
}
.account-nav-link.active { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.account-nav-logout { margin-top: 4px; }
@media (min-width: 720px) {
    .account-nav {
        flex-direction: column; overflow-x: visible; padding: 8px;
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    }
    .account-nav-link {
        border: none; background: transparent; border-radius: 8px; text-align: left;
        padding: 9px 12px; color: var(--ink); font-weight: 500;
    }
    .account-nav-link.active { background: var(--paper); color: var(--indigo); font-weight: 600; }
    .account-nav-logout {
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 8px; margin-top: 8px;
    }
}
.search-form { flex: 1; display: none; position: relative; }

/* Live search dropdown */
.live-search-dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 70vh; overflow-y: auto; overflow-x: hidden;
    display: none;
}
.live-search-dropdown.open { display: block; }
.live-search-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-decoration: none; color: inherit;
    border-bottom: 1px solid var(--line);
}
.live-search-item:last-of-type { border-bottom: none; }
.live-search-item:hover, .live-search-item:focus { background: var(--paper); }
.live-search-item .thumb { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--paper); flex-shrink: 0; }
.live-search-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.live-search-item .info { flex: 1; min-width: 0; }
.live-search-item .name { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-search-item .price-row { display: flex; gap: 6px; align-items: baseline; margin-top: 2px; }
.live-search-item .price { font-size: 13px; font-weight: 600; }
.live-search-item .price.strike { font-size: 11px; color: var(--muted); text-decoration: line-through; font-weight: 500; }
.live-search-viewall {
    display: block; text-align: center; padding: 10px; font-size: 13px; font-weight: 600;
    color: var(--indigo); text-decoration: none; background: var(--paper);
}
.live-search-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }
@media (min-width: 720px) { .search-form { display: flex; } }
.search-form input {
    width: 100%; height: 40px; border-radius: 999px; border: 1px solid var(--line);
    padding: 0 16px; font-family: var(--font-body); font-size: 14px; background: var(--paper);
}
.search-form input:focus { border-color: var(--indigo); background: var(--surface); }

.nav-icons { display: flex; align-items: center; gap: 4px; margin-left: auto; }
/* Keeps the mobile header from getting crowded — icons that are also
   reachable elsewhere (the Stores link lives in the mobile menu drawer
   too) drop off below the point where the header actually gets tight.
   Compound selector (not just .desktop-only-icon alone) so this can't
   lose to .icon-btn's own display:flex on specificity/source-order —
   the exact bug class already found twice this session with .mega-menu
   and .btn both silently losing to [hidden] the same way. */
.icon-btn.desktop-only-icon { display: none; }
@media (min-width: 720px) { .icon-btn.desktop-only-icon { display: flex; } }
.icon-btn {
    position: relative; width: 40px; height: 40px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; color: var(--indigo);
}
.icon-btn:hover { background: var(--paper); }
.badge {
    position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px;
    background: var(--gold); color: var(--indigo-deep); font-size: 10px; font-weight: 700;
    border-radius: 999px; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
}

.mobile-search { display: block; padding: 10px 0; }
@media (min-width: 720px) { .mobile-search { display: none; } }
.mobile-search input {
    width: 100%; height: 40px; border-radius: 999px; border: 1px solid var(--line);
    padding: 0 16px; font-size: 14px; background: var(--paper);
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 20px; border-radius: 999px; border: none; cursor: pointer;
    font-family: var(--font-body); font-weight: 600; font-size: 14px;
    transition: transform .08s ease, background .15s ease;
}
.btn[hidden] { display: none; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--indigo); color: #fff; }
.btn-primary:hover { background: var(--indigo-deep); }
.btn-gold { background: var(--gold); color: var(--indigo-deep); }
.btn-gold:hover { background: var(--gold-deep); color: #fff; }
.btn-outline { background: transparent; color: var(--indigo); border: 1.5px solid var(--line); }
.btn-outline:hover { border-color: var(--indigo); }
.btn-ghost { background: transparent; color: var(--muted); height: 36px; padding: 0 12px; }
.btn-ghost:hover { color: var(--ink); }
.btn-danger-ghost { background: transparent; color: var(--danger); height: 36px; padding: 0 12px; }
.btn-block { width: 100%; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- Cards ------------------------------------------------------------------ */

.card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px;
}
.card-flush { padding: 0; overflow: hidden; }

/* --- Product grid ------------------------------------------------------------ */

.product-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 880px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

/* Stat-card grids (report/dashboard summary numbers) — used to have a fixed
   repeat(3 or 4, 1fr) set inline on 11 different pages, which is the same
   grid-track-overflow bug already found and fixed for product cards: at
   320px, 4 fixed tracks leaves ~66px each, too narrow for "Avg. order
   value" or a real money amount. auto-fit/minmax reflows column count
   automatically instead of needing separate breakpoints per page. */
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.stat-grid .card { min-width: 0; }

.product-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; display: flex; flex-direction: column;
    min-width: 0; /* grid items default to min-width:auto, which lets unbreakable
                     content (like a long price) grow the card past its own grid
                     track and overlap the next one — this is the actual fix. */
}
.product-card .thumb {
    aspect-ratio: 1 / 1; background: var(--paper); display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-card .body { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.product-card .vendor { font-size: 11.5px; color: var(--muted); }
.product-card .name {
    font-family: var(--font-display); font-weight: 600; font-size: 14.5px; line-height: 1.25;
    color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card .price-row { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.product-card .price-row .price { font-size: 14.5px; }
.product-card .price-row .price.strike { font-size: 12px; }
.rating-row { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.stars { color: var(--gold); font-size: 12px; }

/* --- Badges / status ---------------------------------------------------------- */

.badge-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-status.green { background: var(--success-bg); color: var(--success); }
.badge-status.red   { background: var(--danger-bg); color: var(--danger); }
.badge-status.amber { background: var(--amber-bg); color: var(--amber); }
.badge-status.grey  { background: var(--paper); color: var(--muted); }
.badge-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- Forms ----------------------------------------------------------------------- */

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.field .error-text { font-size: 12px; color: var(--danger); margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=date], input[type=search], select, textarea {
    width: 100%; height: 46px; border-radius: var(--radius-sm); border: 1.5px solid var(--line);
    padding: 0 14px; font-family: var(--font-body); font-size: 15px; background: var(--surface); color: var(--ink);
}
textarea { height: auto; padding: 12px 14px; min-height: 96px; }
input:focus, select:focus, textarea:focus { border-color: var(--indigo); }
.radio-card {
    display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    padding: 12px 14px; cursor: pointer;
}
.radio-card.selected { border-color: var(--indigo); background: #F1F3FA; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* --- Alerts / flash ---------------------------------------------------------------- */

.alert { border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; margin-bottom: 16px; }
.alert-success { background: var(--success-bg); color: var(--success); }
.alert-error   { background: var(--danger-bg); color: var(--danger); }
.alert-info    { background: #EEF1FB; color: var(--indigo); }

/* --- Signature: receipt summary card ------------------------------------------------ */

.receipt {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    position: relative; overflow: hidden;
}
.receipt::before {
    content: ''; display: block; height: 10px;
    background-image: radial-gradient(circle at 10px 0, transparent 6px, var(--paper) 6.5px);
    background-size: 20px 10px; background-repeat: repeat-x;
}
.receipt .receipt-body { padding: 4px 20px 20px; }
.receipt .row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; font-size: 14px; }
.receipt .row.muted { color: var(--muted); }
.receipt .row.total { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 14px; font-size: 16px; font-weight: 700; }
.receipt .row .amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- Order timeline ------------------------------------------------------------------- */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 12px; padding-bottom: 20px; position: relative; }
.timeline li::before {
    content: ''; position: absolute; left: 9px; top: 22px; bottom: -4px; width: 1.5px; background: var(--line);
}
.timeline li:last-child::before { display: none; }
.timeline .dot { width: 20px; height: 20px; border-radius: 50%; background: var(--success); flex-shrink: 0; margin-top: 2px; }
.timeline li.pending .dot { background: var(--line); }
.timeline .t-title { font-weight: 600; font-size: 14px; }
.timeline .t-desc { font-size: 13px; color: var(--muted); margin-top: 2px; }
.timeline .t-time { font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); margin-top: 3px; }

/* --- Sub-order card in order detail ----------------------------------------------------- */

.suborder { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.suborder .head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--paper); }
.suborder .store { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; }
.suborder .line-item { display: flex; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); }
.suborder .line-item img { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; background: var(--paper); }

/* --- Bottom sticky action bar (mobile) -------------------------------------------------- */

.bottom-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 12px;
}
@media (min-width: 880px) { .bottom-bar { display: none; } }
@media (min-width: 880px) { [data-desktop-cta] { display: flex !important; } }
.bottom-bar .total { flex: 1; }
.bottom-bar .total .label { font-size: 11px; color: var(--muted); }
.bottom-spacer { height: var(--bottom-bar-h); }
@media (min-width: 880px) { .bottom-spacer { display: none; } }

/* --- Utility bar (Jumia-style top strip) ------------------------------------------ */

.utility-bar { background: var(--indigo-deep); color: #B9BEDB; font-size: 12.5px; }
.utility-bar .container { display: flex; align-items: center; gap: 18px; height: 34px; }
.utility-bar a { color: #B9BEDB; }
.utility-bar a:hover { color: #fff; }
.utility-bar .spacer { margin-left: auto; display: flex; gap: 18px; }
@media (max-width: 720px) { .utility-bar { display: none; } }

/* --- Category nav bar with mega menu ------------------------------------------------ */

.category-bar { background: var(--indigo); }
.category-bar .container { display: flex; align-items: center; gap: 4px; height: 44px; }
.all-cats-trigger {
    display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px;
    color: #fff; font-size: 13.5px; font-weight: 600; background: var(--indigo-deep);
    flex-shrink: 0; position: relative;
}
.cat-quicklinks { display: none; gap: 4px; overflow-x: auto; }
@media (min-width: 880px) { .cat-quicklinks { display: flex; } }
.cat-quicklinks a { color: #E4E6F4; font-size: 13px; padding: 0 10px; height: 44px; display: flex; align-items: center; white-space: nowrap; }
.cat-quicklinks a:hover { color: #fff; }

.mega-menu {
    position: absolute; top: 100%; left: 0; z-index: 60; width: min(760px, 92vw);
    background: var(--surface); border-radius: 0 var(--radius) var(--radius) var(--radius);
    box-shadow: var(--shadow); padding: 10px 0; display: grid; grid-template-columns: 220px 1fr;
    max-height: 70vh; overflow: auto;
}
.mega-menu[hidden] { display: none; }
.mega-menu .top-list a {
    display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 13.5px; color: var(--ink);
}
.mega-menu .top-list a:hover, .mega-menu .top-list a.active { background: var(--paper); color: var(--indigo); font-weight: 600; }
.mega-menu .sub-panel { padding: 14px 20px; border-left: 1px solid var(--line); display: none; }
.mega-menu .sub-panel.active { display: block; }
.mega-menu .sub-panel h4 { font-family: var(--font-body); font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.mega-menu .sub-panel a { display: block; padding: 5px 0; font-size: 13.5px; color: var(--ink); }
.mega-menu .sub-panel a:hover { color: var(--indigo); }

/* --- Hero: left category rail + banner + side promos -------------------------------- */

.hero-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 14px; align-items: start; }
.hero-content { min-width: 0; }
.hero-top { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .hero-top { grid-template-columns: minmax(0, 1fr) 220px; }
}

.category-rail { display: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 980px) { .category-rail { display: block; } }
.category-rail a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--line); }
.category-rail a:last-child { border-bottom: none; }
.category-rail a:hover { background: var(--paper); color: var(--indigo); }
.category-rail svg { color: var(--indigo); flex-shrink: 0; }

.hero-banner {
    position: relative; border-radius: var(--radius); overflow: hidden; min-height: 260px;
    background: linear-gradient(120deg, var(--indigo) 0%, var(--indigo-deep) 100%);
    display: flex; align-items: center; color: #fff;
}
@media (min-width: 980px) { .hero-banner { aspect-ratio: 21 / 9; max-height: 380px; } }
.hero-banner .slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-banner .slide { padding: 32px; max-width: 420px; }
.hero-banner .slide .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.hero-banner .slide h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); }
.hero-banner .slide p { color: #C9CDE3; }
.hero-banner .dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.hero-banner .dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); }
.hero-banner .dots span.active { background: var(--gold); width: 18px; border-radius: 3px; }

.side-promos { display: flex; flex-direction: column; gap: 14px; }
.side-promos .promo { border-radius: var(--radius); padding: 20px; color: #fff; min-height: 116px; display: flex; flex-direction: column; justify-content: center; }
.side-promos .promo.a { background: linear-gradient(135deg, var(--gold-deep), var(--gold)); color: var(--indigo-deep); }
.side-promos .promo.b { background: linear-gradient(135deg, #2E7D5B, #3D9970); }
.side-promos .promo strong { font-family: var(--font-display); font-size: 1.05rem; }

/* --- Flash sale strip ---------------------------------------------------------------- */

.flash-strip { background: linear-gradient(90deg, #26305C, #3A4680); border-radius: var(--radius); padding: 16px 20px; margin-top: 16px; color: #fff; }
.flash-strip .head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.flash-strip .head h2 { color: #fff; margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 8px; }
.flash-countdown { display: flex; gap: 6px; align-items: center; font-family: var(--font-mono); }
.flash-countdown .box { background: rgba(255,255,255,.14); border-radius: 6px; padding: 4px 8px; font-weight: 700; font-size: 13px; }
.flash-strip .see-all { margin-left: auto; color: var(--gold); font-weight: 600; font-size: 13px; }
.flash-strip .product-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .flash-strip .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 880px) { .flash-strip .product-grid { grid-template-columns: repeat(6, 1fr); } }
.flash-strip .product-card { border: none; color: var(--ink); }

/* --- Category icon grid --------------------------------------------------------------- */

.cat-icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
@media (min-width: 560px) { .cat-icon-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 880px) { .cat-icon-grid { grid-template-columns: repeat(10, 1fr); } }
.cat-icon-grid a { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cat-icon-grid a:hover { border-color: var(--indigo); }
.cat-icon-grid .icon-circle { width: 44px; height: 44px; border-radius: 50%; background: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--indigo); }
.cat-icon-grid .label { font-size: 11.5px; line-height: 1.2; color: var(--ink); }

/* --- Product shelf (category row with "See all") --------------------------------------- */

.shelf { margin-top: 30px; }
.shelf .shelf-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.shelf .shelf-head h2 { margin: 0; font-size: 1.15rem; }
.shelf .shelf-head a { font-size: 13px; font-weight: 600; color: var(--indigo); display: flex; align-items: center; gap: 2px; }

/* --- Discount badge on product cards ----------------------------------------------------- */

.product-card { position: relative; }
.discount-badge {
    position: absolute; top: 8px; left: 8px; z-index: 2; background: var(--danger); color: #fff;
    font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; font-family: var(--font-mono);
}
.product-card .wishlist-dot {
    position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.product-card .wishlist-dot.active { color: var(--danger); }

/* --- Trust strip (delivery / secure payment / returns) ------------------------------------ */

.trust-strip { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 30px; }
@media (min-width: 720px) { .trust-strip { grid-template-columns: repeat(4,1fr); } }
.trust-strip .item { display: flex; align-items: center; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.trust-strip .item svg { color: var(--indigo); flex-shrink: 0; }
.trust-strip .item .t { font-size: 12.5px; font-weight: 600; }
.trust-strip .item .d { font-size: 11.5px; color: var(--muted); }

/* --- Footer -------------------------------------------------------------------------------- */
.site-footer { background: var(--indigo-deep); color: #C9CDE3; margin-top: 60px; padding: 40px 0 90px; }
@media (min-width: 880px) { .site-footer { padding-bottom: 40px; } }
.site-footer h4 { color: #fff; font-family: var(--font-body); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.site-footer a { color: #C9CDE3; font-size: 13.5px; display: block; padding: 4px 0; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- CMS / WYSIWYG rendered content --------------------------------------------------------- */

.cms-content h2 { font-size: 1.3rem; margin-top: 1.4em; }
.cms-content h3 { font-size: 1.1rem; margin-top: 1.2em; }
.cms-content p { line-height: 1.7; }
.cms-content ul, .cms-content ol { padding-left: 1.4em; margin-bottom: 1em; line-height: 1.7; }
.cms-content a { color: var(--indigo); text-decoration: underline; }
.cms-content blockquote { border-left: 3px solid var(--gold); margin: 1em 0; padding: 4px 0 4px 16px; color: var(--muted); }
.cms-content img { border-radius: var(--radius-sm); margin: 12px 0; }

/* --- About page (bespoke template, not WYSIWYG content) ---------------------------------------- */

.about-hero { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; margin-bottom: 32px; }
@media (min-width: 880px) { .about-hero { grid-template-columns: 1fr 1fr; } }
.about-hero img { width: 100%; border-radius: var(--radius); }
.about-split-heading { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 16px; }
.about-split-heading .accent { color: var(--gold); }
.about-divider { width: 64px; height: 3px; background: var(--gold); border: none; margin: 20px 0; }

.about-highlight {
    background: var(--indigo-deep); color: #fff; border-radius: var(--radius);
    padding: 20px 24px; display: flex; gap: 16px; align-items: flex-start; margin-top: 20px;
}
.about-highlight svg { color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.about-highlight p { color: #E4E6D9; margin: 0; line-height: 1.6; }

.about-callout {
    background: var(--indigo-deep); color: #fff; border-radius: var(--radius);
    padding: 24px 28px; display: flex; gap: 18px; align-items: center; margin: 32px 0;
}
.about-callout .check-circle {
    width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff;
}
.about-callout p { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.about-callout .accent { color: var(--gold); font-weight: 600; }

.why-choose-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 24px; }
@media (min-width: 640px) { .why-choose-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .why-choose-grid { grid-template-columns: repeat(6, 1fr); } }
.why-choose-grid .item { text-align: center; }
.why-choose-grid .icon-circle { width: 64px; height: 64px; margin: 0 auto 12px; background: var(--tan); color: var(--indigo); display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.why-choose-grid h3 { font-size: 0.95rem; margin-bottom: 6px; }
.why-choose-grid p { font-size: 0.82rem; color: var(--muted); line-height: 1.5; margin: 0; }

.about-cta-bar {
    background: var(--indigo-deep); color: #fff; border-radius: var(--radius);
    padding: 24px 28px; margin-top: 40px; display: grid; gap: 20px; grid-template-columns: 1fr;
}
@media (min-width: 880px) { .about-cta-bar { grid-template-columns: 1fr auto auto; align-items: center; } }
.about-cta-bar .brand-line { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; }
.about-cta-bar .brand-line .accent { color: var(--gold); }
.about-cta-bar .tagline .accent { color: var(--gold); font-weight: 700; }
.about-contact-strip { background: #EFEAD9; color: var(--indigo-deep); border-radius: 0 0 var(--radius) var(--radius); padding: 12px 24px; display: flex; gap: 20px; flex-wrap: wrap; font-size: 13.5px; margin-top: -1px; }
.about-contact-strip a { display: flex; align-items: center; gap: 6px; color: var(--indigo-deep); }

/* --- Utility ---------------------------------------------------------------------------------- */

.flex { display: flex; }
/* The clickable list-row pattern (<a class="card flex between center">)
   used throughout vendor/admin/rider list views — store names, product
   names, order numbers are user-generated and can be long. Text wraps by
   default here so this isn't the same unbreakable-content overflow as the
   cart/header cases, but the first child still needs min-width:0 so it
   properly wraps instead of expanding the row past its container in edge
   cases. Scoped to .card.flex specifically, not all .flex usage, since a
   blanket min-width:0 on every flex child could affect unrelated layouts
   that rely on natural min-content sizing (icons, buttons, etc). */
.card.flex > *:first-child { min-width: 0; }
.between { justify-content: space-between; }
.center { align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state h3 { color: var(--ink); }
.skeleton { background: linear-gradient(90deg, var(--line) 25%, #EDEFF6 37%, var(--line) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }