/* =========================================================
   shop.css — Public online storefront (per-business, white-labeled)
   Modern, responsive redesign — replaces the inline <style> blocks
   previously duplicated across resources/views/shop/*.blade.php.
   ========================================================= */

:root {
    --shop-ink: #1c1a17;
    --shop-ink-soft: #6b6459;
    --shop-border: #e8e1d6;
    --shop-surface: #ffffff;
    --shop-bg: #faf7f1;
    --shop-accent: #16181c;      /* overridden inline per-business via receipt_color */
    --shop-accent-ink: #ffffff;  /* text color placed on the accent */
    --shop-danger: #b3261e;
    --shop-success: #1e7a4c;
    --shop-warning: #92660c;
    --shop-radius: 0;
    --shop-radius-sm: 0;
    --shop-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 12px 28px -6px rgba(0,0,0,0.14);
    --shop-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --shop-font-display: 'Poppins', var(--shop-font);
}

/* Self-hosted (this stylesheet is deliberately self-contained and does
   not load main.css, so the Poppins face is redeclared here). */
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/poppins-latin-400-normal.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/poppins-latin-500-normal.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/poppins-latin-600-normal.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/poppins-latin-700-normal.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins/poppins-latin-800-normal.woff2') format('woff2');
    font-weight: 800; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--shop-font);
    background: var(--shop-bg);
    color: var(--shop-ink);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    /* Sticky footer: on a short page (e.g. an empty cart) the footer
       previously sat right under the content with a large dead gap of
       page background below it down to the viewport edge, instead of
       staying pinned to the bottom. min-height:100vh + .shop-wrap
       growing to fill the remaining space pushes the footer down to the
       bottom of the VIEWPORT on short pages, while still flowing
       naturally below content (not overlapping it) on long ones — not
       position:fixed, which would sit on top of content permanently. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: inherit; }

/* ── Nav ─────────────────────────────────────────────────── */
.shop-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--shop-surface);
    border-bottom: 1px solid var(--shop-border);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.shop-nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.shop-nav-brand img { height: 32px; width: 32px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.shop-nav-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.shop-nav-logo {
    font-family: var(--shop-font-display);
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shop-nav-tag {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--shop-accent);
}
.shop-nav-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.shop-nav-track {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--shop-ink-soft);
    text-decoration: none;
    white-space: nowrap;
}
.shop-nav-track:hover { color: var(--shop-ink); text-decoration: underline; }
.shop-nav-cart {
    display: flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--shop-bg);
    border: 1px solid var(--shop-border);
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.shop-nav-cart:hover { background: var(--shop-border); }
.shop-nav-cart svg { width: 16px; height: 16px; flex-shrink: 0; }
.cart-badge {
    background: var(--shop-accent);
    color: var(--shop-accent-ink);
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Page wrap ───────────────────────────────────────────── */
.shop-wrap { max-width: 1180px; margin: 0 auto; padding: 28px 20px 56px; width: 100%; flex: 1 0 auto; }

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
    padding: 13px 16px;
    border-radius: var(--shop-radius-sm);
    margin-bottom: 20px;
    font-size: 0.92rem;
    border: 1px solid transparent;
}
.alert-success { background: #eaf6ef; color: #145c37; border-color: #cdead9; }
.alert-error { background: #fbeceb; color: #8c2019; border-color: #f3d3d0; }

/* A page-level "added to cart" style message previously sat INLINE at
   the top of .shop-wrap, in normal document flow — it pushed the
   category pills/grid down by its own height for as long as it stayed
   on screen (and it never went away on its own, since it only ever
   cleared on the NEXT page load). Floating it removes it from the
   flow entirely (nothing below it shifts) and it now auto-dismisses. */
.shop-toast {
    position: fixed;
    top: 81px; /* .shop-nav is a sticky 65px-tall bar — sit below it, not on top of it */
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    max-width: calc(100vw - 32px);
    width: fit-content;
    box-shadow: var(--shop-shadow);
    transition: opacity 0.25s, transform 0.25s;
}
.shop-toast.shop-toast-hide { opacity: 0; transform: translate(-50%, -12px); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 22px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    cursor: pointer;
    font-family: var(--shop-font-display);
    font-size: 0.94rem;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
    transition: transform 0.1s, filter 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.98); }
.btn-dark { background: var(--shop-accent); color: var(--shop-accent-ink); }
.btn-dark:hover { filter: brightness(0.9); }
.btn-dark:disabled { background: #c7c7c7; cursor: not-allowed; }
.btn-outline { background: var(--shop-surface); color: var(--shop-ink); border-color: var(--shop-border); }
.btn-outline:hover { background: var(--shop-bg); }
.btn-block { width: fit-content; }

/* ── Category pills ───────────────────────────────────────
   The earlier circle+label version (a full icon-tile per category,
   ~100px tall with the label underneath) was too heavy for what's
   really just a filter row — and with 7+ categories, hashing to a
   single letter meant "Bakery"/"Beverages" both showed "B" with
   only color left to tell them apart. A thin single-line pill with
   the full name right there removes BOTH problems at once: the
   name alone disambiguates (no letter needed), and the color dot
   becomes a lightweight accent rather than the only identifier. */
.category-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    margin: 0 0 24px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.category-pills::-webkit-scrollbar { display: none; }
.category-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 9px;
    border-radius: 999px;
    border: 1.5px solid var(--shop-border);
    background: var(--shop-surface);
    color: var(--shop-ink-soft);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.category-pill-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.category-pill:hover { border-color: var(--shop-ink); color: var(--shop-ink); }
.category-pill.active {
    background: var(--shop-ink);
    border-color: var(--shop-ink);
    color: #fff;
}
.category-pill.active .category-pill-dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }

/* ── Product grid ────────────────────────────────────────── */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 18px;
}
.product-card {
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.18s, transform 0.18s;
}
.product-card:hover { box-shadow: var(--shop-shadow); transform: translateY(-2px); }
.product-card-link { text-decoration: none; color: inherit; display: block; }
/* A bundle has no detail page to link to like a regular product does —
   this just makes the image/name area trigger the same Add to Cart
   the button does, so the card isn't dead space next to product cards
   where that area IS clickable. */
.bundle-card-clickable { cursor: pointer; }

.product-tile {
    aspect-ratio: 2 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--shop-font-display);
    font-weight: 800;
    font-size: 1.1rem;
    color: rgba(255,255,255,0.95);
    letter-spacing: -0.02em;
    position: relative;
    overflow: hidden;
}
.product-tile::before {
    /* Large, low-opacity rotated icon watermark — gives every placeholder
       tile some real visual texture instead of a flat color + bare letter,
       without needing an actual product photo (no image field exists
       anywhere in the app yet). */
    content: '';
    position: absolute;
    right: -14%;
    bottom: -18%;
    width: 68%;
    aspect-ratio: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.3'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.22;
    transform: rotate(-10deg);
}
.product-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 120% at 15% 15%, rgba(255,255,255,0.26), transparent 55%);
}
.product-tile span { position: relative; z-index: 1; }

/* A real uploaded photo — same slot/aspect-ratio as the placeholder tile
   above, but as an actual <img> so it needs its own sizing rule (::before/
   ::after watermark and gradient don't render on a replaced element like
   img, so no conflict with the placeholder's rules).
   object-fit was 'cover' — for anything taller/narrower than the square
   tile (i.e. almost every real bottle/box/sack photo a shop owner takes on
   their phone) that crops the top and bottom clean off, showing only a
   cross-section of the middle. 'contain' always shows the whole photo,
   letterboxed on a neutral fill instead — you can actually tell what the
   product is. */
.product-tile-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--shop-surface-2, #f3f1ec);
    display: block;
}

.product-card-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card-name {
    font-weight: 650;
    font-size: 0.65rem;
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.3em;
}
.product-card-price { font-family: var(--shop-font-display); font-size: 0.7rem; font-weight: 800; margin: 2px 0 0; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.product-card-price .price-was { font-size: 0.62rem; font-weight: 400; color: var(--shop-ink-soft); text-decoration: line-through; }
.product-card-price .price-off-badge { font-size: 0.6rem; font-weight: 800; color: var(--shop-success); background: #eaf6ef; padding: 1px 6px; border-radius: 999px; }

/* Compact rating line for a grid card — same markup/classes as the
   product detail page's .product-rating-line, just smaller to fit a
   dense card instead of sitting under a large page heading. */
.product-card-body .product-rating-line { font-size: 0.6rem; margin: 0; gap: 4px; }
.product-card-body .product-rating-line .stars-display { font-size: 0.65rem; }

/* Scoped override, not a change to the base .stock-badge rule below —
   that rule is shared with the single product detail page
   (product.blade.php), which has its own separate scoped override
   further down (.product-detail .stock-badge) rather than sharing
   this one, since each page's card/layout proportions differ. */
.product-card-body .stock-badge { font-size: 0.6rem; padding: 2px 7px; }

.stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.stock-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stock-badge.in { background: #eaf6ef; color: var(--shop-success); }
.stock-badge.low { background: #fbf3e3; color: var(--shop-warning); }
.stock-badge.out { background: #fbeceb; color: var(--shop-danger); }

.product-card-body form,
.product-card-body .btn { margin-top: auto; }
/* Scoped, not a change to the base .btn rule — that's shared with
   cart/checkout/product-detail buttons elsewhere in the shop, which
   weren't part of this "shrink the grid" request. Once the card's own
   text shrank, the full-size button read oversized next to it. */
.product-card-body .btn { font-size: 0.7rem; padding: 8px 10px; }

.empty-state { text-align: center; padding: 72px 16px; color: var(--shop-ink-soft); }
.empty-state svg { width: 24px; height: 24px; opacity: 0.4; margin-bottom: 12px; }

/* ── Pagination (Laravel default links wrapper) ─────────── */
.shop-wrap nav[role="navigation"] { margin-top: 32px; display: flex; justify-content: center; }

/* ── Product detail page ─────────────────────────────────── */
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--shop-ink-soft); text-decoration: none; font-size: 0.65rem; font-weight: 600; margin-bottom: 20px; }
.back-link:hover { color: var(--shop-ink); }
/* Both columns capped to a fixed width (NOT 1fr on the text side) —
   with 1fr, the text column grew to fill whatever was left in the
   page's 1180px max-width, which read fine back when the title/price
   were full-size but left a huge dead stretch of empty space once
   that text shrank to roughly half size. Capping both keeps the
   whole block proportioned to its own (now smaller) content instead
   of stretching to the page width. */
.product-detail { display: grid; grid-template-columns: minmax(0,300px) minmax(0,360px); gap: 28px; align-items: start; }
@media (max-width: 760px) { .product-detail { grid-template-columns: 1fr; gap: 24px; } }

.product-img-box {
    border-radius: var(--shop-radius);
    aspect-ratio: 2 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--shop-font-display);
    font-weight: 800;
    font-size: 2.3rem;
    color: rgba(255,255,255,0.95);
    position: relative;
    overflow: hidden;
}
.product-img-box::before {
    content: '';
    position: absolute;
    right: -10%;
    bottom: -14%;
    width: 62%;
    aspect-ratio: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.3'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.2;
    transform: rotate(-10deg);
}
.product-img-box::after { content:''; position:absolute; inset:0; background: radial-gradient(120% 120% at 15% 15%, rgba(255,255,255,0.24), transparent 55%); }
.product-img-box span { position: relative; z-index: 1; }

/* Real uploaded photo — ::before/::after watermark above don't render on
   a replaced element, so a bare img with this class needs its own fit.
   object-fit: contain (was cover) — same reasoning as .product-tile-photo
   above: a customer looking at ONE product's own detail page should see
   the whole photo they're deciding to buy, not a center-cropped slice
   with the cap/base/label cut off. */
.product-img-box-photo { padding: 0; background: var(--shop-surface-2, #f3f1ec); }
.product-img-box-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Swipeable mobile gallery — a real horizontally-snapping strip of every
   product image, one full-width "page" at a time (matches the Jumia
   reference's mobile product page); desktop/tablet keep the existing
   single-image-plus-click-to-swap-thumbnails layout below instead, since
   there's ample width there for thumbnails to just sit beside the image. */
.product-gallery-swipe { display: none; }
@media (max-width: 760px) {
    .product-gallery-swipe {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; border-radius: var(--shop-radius);
        background: var(--shop-surface-2, #f3f1ec); aspect-ratio: 2 / 1;
    }
    .product-gallery-swipe img {
        flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain;
        scroll-snap-align: start;
    }
    .product-gallery-swipe::-webkit-scrollbar { display: none; }
    .product-detail > div:first-child > .product-img-box-photo,
    .product-detail > div:first-child > .product-gallery-thumbs {
        display: none;
    }
}

.product-gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gallery-thumb {
    width: 28px; height: 28px; object-fit: contain; background: var(--shop-surface-2, #f3f1ec);
    border-radius: var(--shop-radius-sm);
    cursor: pointer; border: 2px solid transparent; opacity: 0.75;
}
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.active { border-color: var(--shop-accent, #234d3a); opacity: 1; }

.product-title { font-family: var(--shop-font-display); font-size: clamp(0.7rem, 0.55rem + 0.5vw, 0.9rem); font-weight: 800; margin: 0 0 8px; letter-spacing: -0.02em; }

/* Cart's heading was a bare <h1> with only an inline margin/letter-spacing
   override — no font-family, so it silently fell back to body's regular
   font (var(--shop-font)) instead of the Poppins display font every other
   page's main heading uses (.shop-hero h1, .product-title, .confirm-title,
   .section-title all set font-family explicitly). Matches product-title's
   scale rather than the home hero's larger one, since this is a secondary
   page heading like Product/Confirmation, not the storefront's big intro. */
.cart-title { font-family: var(--shop-font-display); font-size: clamp(0.7rem, 0.55rem + 0.5vw, 0.9rem); font-weight: 800; margin: 0 0 24px; letter-spacing: -0.02em; }
.product-price { font-size: 0.95rem; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.product-price .price-was { font-size: 0.65rem; font-weight: 500; color: var(--shop-ink-soft); text-decoration: line-through; }
.product-price .price-off-badge { font-size: 0.6rem; font-weight: 800; color: var(--shop-success); background: #eaf6ef; padding: 2px 8px; border-radius: 999px; }
.product-desc { color: var(--shop-ink-soft); margin: 0 0 22px; font-size: 0.72rem; }
/* Scoped, not a change to the shared base .stock-badge/.btn rules —
   those are used by cart/checkout/the product grid too. See the same
   reasoning on .product-card-body's equivalents further up. */
.product-detail .stock-badge { font-size: 0.65rem; padding: 2px 8px; }
.product-detail #add-to-cart-btn { font-size: 0.7rem; padding: 10px 16px; }

/* Rating line directly under the title — same data the review section
   below already computes, just surfaced where a shopper actually decides
   whether to buy, not only after they've scrolled past the whole page. */
.product-rating-line { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 0.65rem; color: var(--shop-ink-soft); }
.product-rating-line .stars-display { color: #f0a000; font-size: 0.7rem; letter-spacing: 1px; }
.product-rating-line .stars-display .star-empty { color: var(--shop-border); }
.product-rating-line a { color: var(--shop-ink-soft); text-decoration: underline; }

/* Delivery estimate — reuses the exact same business->delivery_zones data
   cart/checkout already read; purely informational here (doesn't set
   anything), just lets a shopper see the delivery cost before committing,
   same value Jumia's own location picker gives on the product page. */
.delivery-estimate { border: 1px solid var(--shop-border); border-radius: var(--shop-radius); padding: 14px 16px; margin: 4px 0 22px; }
.delivery-estimate-label { font-weight: 700; font-size: 0.65rem; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.delivery-estimate-label svg { width: 16px; height: 16px; flex-shrink: 0; }
.delivery-option-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--shop-border); }
.delivery-option-row svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--shop-ink-soft); }
.delivery-option-title { font-size: 0.68rem; }
.delivery-option-title strong { color: var(--shop-ink); }
.delivery-option-sub { font-size: 0.6rem; color: var(--shop-ink-soft); margin-top: 2px; }

/* Sticky mobile Add-to-Cart bar — the single highest-value pattern from
   the Jumia reference: the primary purchase action stays reachable with
   zero scrolling, the whole way down the page. Desktop/tablet keep the
   normal inline button in the form (plenty of room there; a fixed bar
   would just be redundant chrome on a wide screen). */
.mobile-buy-bar { display: none; }
@media (max-width: 760px) {
    .mobile-buy-bar {
        display: flex; align-items: center; gap: 10px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        background: var(--shop-surface); border-top: 1px solid var(--shop-border);
        padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    }
    .mobile-buy-bar .mobile-buy-price { flex: 0 0 auto; font-weight: 800; font-size: 0.75rem; white-space: nowrap; }
    .mobile-buy-bar button { font-size: 0.7rem; }
    .mobile-buy-bar button { flex: 1 1 auto; }
    /* The in-form button stays in the document (keeps the form's native
       submit working without any JS duplication) but is visually hidden
       on mobile, where the fixed bar's own mirrored button is shown
       instead — see the small sync script at the bottom of product.blade.php. */
    .product-detail .qty-row + button#add-to-cart-btn { display: none; }
    /* Breathing room so the fixed bar never covers the last bit of content. */
    body:has(.mobile-buy-bar) { padding-bottom: 76px; }
}

.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-weight: 700; font-size: 0.82rem; margin-bottom: 7px; }
.form-control {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--shop-border);
    border-radius: var(--shop-radius-sm);
    font-family: var(--shop-font);
    font-size: 0.95rem;
    background: var(--shop-surface);
    color: var(--shop-ink);
    outline: none;
    transition: border-color 0.15s;
}
.form-control:focus { border-color: var(--shop-accent); }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6067' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

.qty-row { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.qty-row label { font-weight: 700; font-size: 0.82rem; }
.qty-input { width: 84px; text-align: center; }

.waitlist-box { background: var(--shop-surface); border: 1px solid var(--shop-border); border-radius: var(--shop-radius); padding: 22px; margin-top: 28px; }
.waitlist-box h3 { margin: 0 0 6px; font-size: 1.05rem; }
.waitlist-box p { color: var(--shop-ink-soft); margin: 0 0 16px; font-size: 0.92rem; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* ── Cart table ──────────────────────────────────────────── */
.cart-table-wrap { background: var(--shop-surface); border: 1px solid var(--shop-border); border-radius: var(--shop-radius); overflow: hidden; margin-bottom: 28px; }
.cart-table { width: 100%; border-collapse: collapse; font-size: 0.68rem; }
.cart-table th {
    text-align: left;
    padding: 13px 16px;
    background: var(--shop-bg);
    border-bottom: 1px solid var(--shop-border);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--shop-ink-soft);
    font-weight: 700;
}
.cart-table td { padding: 14px 16px; border-bottom: 1px solid var(--shop-border); vertical-align: middle; }
.cart-table tbody tr:last-child td { border-bottom: none; }
.cart-total-row td { padding: 13px 16px; font-weight: 700; border-top: 1.5px solid var(--shop-ink); border-bottom: none !important; }
.cart-total-row.grand td { font-size: 0.78rem; }

/* ── Cart line actions (qty + remove) ────────────────────── */
.qty-form { display: inline-flex; align-items: center; gap: 6px; }
.qty-form input {
    width: 44px;
    padding: 6px 4px;
    text-align: center;
    border: 1.5px solid var(--shop-border);
    border-radius: var(--shop-radius-sm);
    font-family: var(--shop-font);
    font-size: 0.68rem;
}
.qty-form input:focus { outline: none; border-color: var(--shop-accent); }
.qty-update-btn {
    border: none;
    background: none;
    color: var(--shop-ink-soft);
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 2px;
    text-decoration: underline;
}
.qty-update-btn:hover { color: var(--shop-ink); }
.cart-remove-btn {
    border: none;
    background: none;
    color: var(--shop-ink-soft);
    cursor: pointer;
    padding: 6px;
    display: inline-flex;
    border-radius: 999px;
    transition: background 0.15s, color 0.15s;
}
.cart-remove-btn:hover { background: #fbeceb; color: var(--shop-danger); }
.cart-remove-btn svg { width: 16px; height: 16px; }

.section-title { font-family: var(--shop-font-display); font-size: 0.75rem; font-weight: 800; margin: 36px 0 16px; letter-spacing: -0.01em; }
.checkout-form { max-width: 520px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 700; font-size: 0.65rem; margin-bottom: 7px; }
.radio-row { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 0.68rem; margin-bottom: 9px; cursor: pointer; }
.radio-row input { width: auto; accent-color: var(--shop-accent); }
.checkbox-row { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 0.68rem; cursor: pointer; }
.checkbox-row input { width: auto; accent-color: var(--shop-accent); }

/* ── Confirmation page ───────────────────────────────────── */
.confirm-wrap { max-width: 540px; margin: 24px auto 0; text-align: center; }
.confirm-icon { margin-bottom: 18px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; }
.confirm-icon svg { width: 18px; height: 18px; }
.confirm-icon.success { background: #eaf6ef; color: var(--shop-success); }
.confirm-icon.pending { background: #fbf3e3; color: #92660c; }
.confirm-icon.error { background: #fbeceb; color: var(--shop-danger); }
.confirm-title { font-family: var(--shop-font-display); margin: 0 0 10px; font-size: 0.9rem; font-weight: 800; letter-spacing: -0.02em; }
.confirm-text { color: var(--shop-ink-soft); margin: 0 0 28px; font-size: 0.72rem; }
.confirm-ref { font-size: 0.65rem; color: var(--shop-ink-soft); margin-bottom: 28px; }

.order-summary { background: var(--shop-surface); border: 1px solid var(--shop-border); border-radius: var(--shop-radius); padding: 22px; text-align: left; margin-bottom: 28px; }
.order-summary-title { display: block; margin-bottom: 12px; font-weight: 800; font-size: 0.7rem; }
.order-summary-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--shop-border); font-size: 0.68rem; }
.order-summary-row:last-of-type { border-bottom: none; }
.order-summary-row.total { padding-top: 12px; margin-top: 4px; border-top: 1.5px solid var(--shop-ink); border-bottom: none; font-weight: 800; }

/* ── Return request (confirmation page) ──────────────────── */
.return-request-box { border: 1px solid var(--shop-border); border-radius: var(--shop-radius); padding: 18px; text-align: left; margin: 0 0 20px; }
.return-request-status { font-size: 0.68rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.order-status-pill { display: inline-block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; }
.order-status-pill.pending { background: #fbf3e3; color: var(--shop-warning); }
.order-status-pill.success { background: #eaf6ef; color: var(--shop-success); }
.order-status-pill.error { background: #fbeceb; color: var(--shop-danger); }

/* ── Footer ──────────────────────────────────────────────── */
.shop-footer { text-align: center; padding: 12px 16px; color: var(--shop-ink-soft); font-size: 0.62rem; border-top: 1px solid var(--shop-border); margin-top: 40px; }

/* ── Responsive ──────────────────────────────────────────── */
/* Tablet: the grid's own auto-fill already flexes nicely down to ~900px,
   but a real tablet (768px, the classic iPad portrait width) has room for
   3 comfortable columns rather than falling into the phone's 2-column tier. */
@media (max-width: 900px) and (min-width: 601px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .shop-wrap { padding: 20px 14px 44px; }
    .product-card-body { padding: 10px 11px 12px; }

    .shop-nav { padding: 12px 14px; }
    .shop-nav-cart span.cart-label { display: none; }
    .shop-nav-right { gap: 10px; }
    .shop-nav-track { font-size: 0.6rem; }

    /* Cart table → card-stack. A horizontal-scrolling table cuts the Total
       column off-screen by default at this width — exactly the numbers a
       shopper most needs to see before checking out. Same card-stack
       pattern the rest of the app (public/css/responsive.css) already uses
       for every other table. Applies from 768px down (not just phones) so
       a small-tablet/landscape-phone width doesn't fall into the gap
       between "has room for the full table" and "gets the phone layout". */
    .cart-table-wrap { overflow: visible; }
    .cart-table, .cart-table thead, .cart-table tbody, .cart-table tfoot,
    .cart-table th, .cart-table td, .cart-table tr { display: block; }
    .cart-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

    /* Line items: each field gets a small uppercase label prefix. */
    .cart-table tbody tr { padding: 12px 16px; border-bottom: 1px solid var(--shop-border); }
    .cart-table tbody tr:last-child { border-bottom: none; }
    .cart-table tbody td { padding: 3px 0; position: relative; padding-left: 42%; text-align: right; min-height: 22px; }
    .cart-table tbody td::before {
        position: absolute; left: 0; width: 40%; text-align: left;
        font-weight: 700; font-size: 0.72rem; color: var(--shop-ink-soft);
        content: attr(data-label); text-transform: uppercase; letter-spacing: 0.04em;
    }

    /* Summary rows (Subtotal/Delivery/Total) already have their own label
       cell — keep each as one label+value line, not a second stacked field. */
    .cart-table tfoot tr { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; }
    .cart-table tfoot td { padding: 0; }

    /* Cart's "Update" link and remove button were the same tiny size at
       every breakpoint — an underlined text link and a ~28×28px icon
       button, both well under the ~44px touch-target minimum, sitting in
       the cart's most-tapped row right where the card-stack above already
       gives them more room to work with. */
    .qty-update-btn { padding: 10px 8px; font-size: 0.85rem; }
    .cart-remove-btn { padding: 12px; }
    .cart-remove-btn svg { width: 18px; height: 18px; }

    /* Delivery checkbox and M-Pesa/Cash payment radios had no padding at
       all — the clickable area was just the text's own line-box (~20px
       tall), on the two fields a shopper must tap right before checkout. */
    .radio-row, .checkbox-row { padding: 10px 0; }
}

@media (max-width: 600px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 480px) {
    .category-pill { padding: 6px 12px 6px 8px; font-size: 0.78rem; }
}

/* ── Product Reviews ──────────────────────────────────────────
   Star display (read-only, filled by rating) + a pure-CSS star
   picker for the write-a-review form — no JS needed for either. */
.stars-display { color: #d9a441; letter-spacing: 1px; font-size: 1rem; }
.stars-display .star-empty { color: var(--shop-border); }

.review-summary {
    display: flex; align-items: center; gap: 10px; margin: 4px 0 20px;
    padding-bottom: 16px; border-bottom: 1px solid var(--shop-border);
}
.review-summary .avg-rating { font-size: 1.4rem; font-weight: 700; color: var(--shop-ink); }
.review-summary .review-count { color: var(--shop-ink-soft); font-size: 0.85rem; }

.review-list { margin-top: 8px; }
.review-item { padding: 16px 0; border-bottom: 1px solid var(--shop-border); }
.review-item:last-child { border-bottom: none; }
.review-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.review-author { font-weight: 600; color: var(--shop-ink); font-size: 0.92rem; }
.verified-purchase-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--shop-success);
    background: #eaf6ef;
    padding: 1px 7px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}
.review-date { color: var(--shop-ink-soft); font-size: 0.78rem; }
.review-body { color: var(--shop-ink); font-size: 0.9rem; line-height: 1.6; margin-top: 4px; }
.no-reviews { color: var(--shop-ink-soft); font-size: 0.9rem; padding: 12px 0; }

/* Star picker: 5 radios rendered highest-value first in the DOM, then
   flipped visually with row-reverse — a star and everything to its left
   (i.e. every later, lower-value radio in DOM order, which row-reverse
   places visually to the left) lights up via the general sibling
   combinator, all without a single line of JS. */
.star-picker {
    display: flex; flex-direction: row-reverse; justify-content: flex-end;
    gap: 2px; margin: 4px 0 16px;
}
.star-picker input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-picker label {
    font-size: 1.6rem; line-height: 1; color: var(--shop-border);
    cursor: pointer; transition: color .12s ease;
}
.star-picker input:checked ~ label,
.star-picker label:hover,
.star-picker label:hover ~ label {
    color: #d9a441;
}

.review-form-box {
    margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--shop-border);
}
.review-form-box h3 { font-size: 1.05rem; margin-bottom: 4px; }
.review-form-box p.hint { color: var(--shop-ink-soft); font-size: 0.85rem; margin-bottom: 14px; }