/* ChatNShop — mobile-first styles */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { outline: none; }

/* T6 arrivals card shimmer — visible while product images are loading */
@keyframes t6-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.t6-img-wrap {
    background: linear-gradient(90deg, #f0ece7 25%, #e5dfd8 50%, #f0ece7 75%);
    background-size: 200% 100%;
    animation: t6-shimmer 1.5s ease infinite;
}

/* Hero video — starts transparent so the poster/img beneath shows during buffering;
   JS sets opacity:1 on the 'playing' event for a smooth crossfade. */
.store-hero-video { opacity: 0; transition: opacity 0.9s cubic-bezier(0.25, 0, 0, 1); }

/* T6 exception: video is always fully visible behind the poster img.
   The poster img fades OUT instead of the video fading in — eliminates the
   blended-composite "incomplete" look during the crossfade. */
.sd-t6-main .store-hero-video,
.sh-t6-hero .store-hero-video { opacity: 1 !important; transition: none !important; }

/* T6 poster img: sits on top (z-index:1), Ken Burns drift while video buffers,
   then fades out smoothly when video fires its 'playing' event.
   Specificity 0,2,0 beats .sd-t6-main img (0,1,1) so the opacity transition isn't overridden. */
@keyframes t6-ken-burns { from { transform: scale(1); } to { transform: scale(1.04); } }
.sd-t6-main .t6-hero-poster,
.sh-t6-hero .t6-hero-poster {
    z-index: 1;
    animation: t6-ken-burns 8s ease-out forwards;
    transition: opacity 0.9s cubic-bezier(0.25, 0, 0, 1);
}

/* Suppress native play button overlays on all browsers / iOS */
.store-hero-video::-webkit-media-controls,
.store-hero-video::-webkit-media-controls-overlay-play-button,
.store-hero-video::-webkit-media-controls-start-playback-button { display: none !important; }

html {
    overflow-x: clip;
    max-width: 100%;
}

/* Hide the native page scrollbar everywhere on the buyer storefront — scrolling itself still works
   (wheel/touch/drag), this only removes the visible track/thumb. Matters most when this app is
   shown inside the seller's Appearance Studio live-preview iframe (a separate origin, so it can only
   be styled from in here, not from the parent page), but it's a clean look for real buyers too. */
html, body {
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* old Edge/IE */
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; } /* Chrome/Safari/new Edge */

:root {
    --primary:    #C2410C;
    --primary-d:  #9a3412;
    --primary-l:  #fef0e3;
    --accent:     #f97316;
    --accent-l:   #fef0e3;
    --nav-dark:   #0f2035;
    --nav-border: #f97316;
    --success:    #27ae60;
    --danger:     #dc3545;
    --bg:         #f8fafc;
    --card-bg:    #FFFFFF;
    --text:       #1a2236;
    --muted:      #6C757D;
    --border:     #E9ECEF;
    --radius:     14px;
    --shadow-sm:  0 1px 4px rgba(0,0,0,.07);
    --shadow-md:  0 4px 16px rgba(0,0,0,.1);
    --transition: 0.15s ease;

    /* Status colors */
    --status-pending:   #f97316;
    --status-confirmed: #3B82F6;
    --status-shipped:   #8B5CF6;
    --status-delivered: #10B981;
}

body {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    overscroll-behavior-y: contain;
    width: 100%;
    color: var(--text);
    font-size: 15px;
    line-height: 1.55;
}

/* Prevent background scroll when a bottom sheet is open */
body.scroll-locked {
    overflow: hidden !important;
}
/* Mobile-only variant (see lockBodyScroll in carousel.js) — position:fixed is the iOS
   bounce-prevention trick, and unconditionally forcing it here regardless of which JS mode was
   used meant the desktop "just overflow:hidden" path (see carousel.js) got position:fixed anyway,
   with no top offset to compensate: a fixed body with top:auto renders at document position 0,
   silently snapping the whole page to its very top the instant a product quick-view opens (and
   again on close), no matter where the visitor had scrolled to. Scoped to the mobile marker class
   so desktop locking is overflow-only end to end, and the page simply stays put. */
body.scroll-locked.scroll-locked-fixed {
    position: fixed !important;
    width: 100% !important;
}

/* ---- Bottom nav (mobile only) ---- */
.bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--nav-dark);
    border-top: 2px solid var(--nav-border);
    z-index: 150;
    box-shadow: 0 -2px 12px rgba(0,0,0,.25);
    padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .6rem .5rem;
    font-size: .68rem;
    font-weight: 600;
    color: rgba(255,255,255,.5);
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    min-height: 56px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--transition);
}
.bottom-nav-item .nav-icon { font-size: 1.3rem; line-height: 1; }
.bottom-nav-item.active { color: var(--accent); }
.bottom-nav-item:hover  { color: rgba(255,255,255,.9); }
.bottom-nav-item:active { opacity: .7; }

/* push page content up so bottom nav doesn't overlap */
.page-with-bottom-nav { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

@media (min-width: 768px) {
    .bottom-nav { display: none; }
    .page-with-bottom-nav { padding-bottom: 0; }
}

/* ---- Navbar ---- */
.navbar {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-d) 100%);
    border-bottom: 3px solid var(--nav-border);
    color: #fff;
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(211,84,0,.25);
}
.navbar .brand { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.5px; }
.navbar a { color: #fff; text-decoration: none; font-weight: 500; opacity: .9; transition: opacity var(--transition); }
.navbar a:hover { opacity: 1; }

/* ---- Page wrapper ---- */
.page { max-width: 480px; margin: 0 auto; padding: 1.25rem 1rem; }

/* ---- Cards ---- */
.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border);
    transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); }

/* ---- Order status card borders ---- */
.order-card-pending   { border-left: 4px solid var(--status-pending) !important; }
.order-card-confirmed { border-left: 4px solid var(--status-confirmed) !important; }
.order-card-shipped   { border-left: 4px solid var(--status-shipped) !important; }
.order-card-delivered { border-left: 4px solid var(--status-delivered) !important; }

/* ---- Status pill badges ---- */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 700;
    padding: .2rem .6rem;
    border-radius: 999px;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.status-pill-pending   { background: #fef0e3; color: var(--status-pending); }
.status-pill-confirmed { background: #eff6ff; color: var(--status-confirmed); }
.status-pill-shipped   { background: #f5f3ff; color: var(--status-shipped); }
.status-pill-delivered { background: #ecfdf5; color: var(--status-delivered); }

/* ---- Buyer avatar ---- */
.buyer-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---- Product grid ---- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
@media (min-width: 1100px) {
    .product-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Seller dashboard grid */
.product-grid-seller {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .product-grid-seller { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
    .product-grid-seller { grid-template-columns: repeat(5, 1fr); }
}

/* ---- Product card ---- */
.product-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition), transform var(--transition);
    position: relative;
}
.product-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.product-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: #f0f0f0;
}
.product-card .product-img-placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: #f0e6d3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}
.product-card .product-body { padding: 0.65rem; flex: 1; display: flex; flex-direction: column; }
.product-card .product-name { font-weight: 600; font-size: 0.88rem; margin-bottom: 0.2rem; line-height: 1.3; }
.product-card .product-price { color: var(--primary); font-weight: 700; font-size: 1rem; }
.product-card .stock-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.12rem 0.45rem;
    border-radius: 20px;
    margin-top: 0.2rem;
    margin-bottom: 0.35rem;
}
.badge-ok  { background: #d4edda; color: #155724; }
.badge-low { background: #fef0e3; color: #d35400; }
.badge-out { background: #f8d7da; color: #721c24; }

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    min-height: 44px;
}
.btn:active { transform: scale(.97); }
.btn-primary  { background: var(--primary); color: #fff; }
.btn-primary:hover  { background: var(--primary-d); box-shadow: 0 4px 12px rgba(211,84,0,.35); }
.btn-success  { background: var(--success); color: #fff; }
.btn-success:hover { filter: brightness(1.08); }
.btn-danger   { background: var(--danger);  color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }
.btn-block    { display: flex; width: 100%; text-align: center; }
.btn-sm       { padding: 0.42rem 0.85rem; font-size: 0.8rem; border-radius: 8px; min-height: 36px; }
.btn-wa       { background: #25D366; color: #fff; border-radius: 10px; }
.btn-wa:hover { background: #1ebe57; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ---- Forms ---- */
.form-group { margin-bottom: 1rem; }
.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.form-control {
    display: block;
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    background: #fff;
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255,107,53,.12);
}
.form-control::placeholder { color: #adb5bd; }

/* ---- Status chip (buyer-facing) ---- */
.status-chip {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.status-Pending    { background: #fff3cd; color: #856404; }
.status-Confirmed  { background: #cce5ff; color: #004085; }
.status-Dispatched { background: #d1ecf1; color: #0c5460; }
.status-Delivered  { background: #d4edda; color: #155724; }
.status-Shipped    { background: #ede9fe; color: #5b21b6; }

/* ---- Chips (variant selector) ---- */
.chip-group { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
    padding: 0.3rem 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    background: #fff;
    transition: border-color var(--transition), background var(--transition);
}
.chip:hover { border-color: var(--primary); background: var(--primary-l); }
.chip.selected { border-color: var(--primary); background: var(--primary-l); color: var(--primary); font-weight: 600; }

/* ---- Variant checkbox chips (seller) ---- */
.variant-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .65rem; border-radius: 20px;
    border: 1.5px solid var(--border); background: #fff;
    cursor: pointer; font-size: .85rem; user-select: none;
    transition: border-color .15s, background .15s;
}
.variant-chip-on { border-color: var(--primary); background: #fff3ee; font-weight: 700; }

/* ---- Misc utilities ---- */
.alert { padding: 0.75rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-size: .9rem; }
.alert-danger  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.text-muted { color: var(--muted); font-size: 0.85rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.d-flex { display: flex; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.gap-1 { gap: 0.5rem; }
hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }

/* ---- Image carousel ---- */
.img-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
}
.img-carousel::-webkit-scrollbar { display: none; }
.carousel-img {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 1/1;
    max-height: 420px;
    object-fit: cover;
    scroll-snap-align: start;
}
.carousel-arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: none;
    color: #fff;
    border: none;
    font-size: 2rem;
    font-weight: 700;
    width: auto; height: auto;
    border-radius: 0;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
    opacity: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,.8);
    transition: opacity 0.2s;
    padding: 0 .5rem;
}
.modal-sheet:hover .carousel-arrow,
.product-card:hover .carousel-arrow { opacity: 1; }
.carousel-prev { left: .4rem; }
.carousel-next { right: .4rem; }

/* Hide all carousel arrows on mobile, show on desktop */
.carousel-arrow-btn { display: none; }
@media (min-width: 640px) { .carousel-arrow-btn { display: flex; } }
.carousel-arrow { display: none; }
@media (min-width: 640px) { .carousel-arrow { display: flex; } }
.carousel-dots {
    position: absolute;
    bottom: .5rem; left: 50%; transform: translateX(-50%);
    display: flex; gap: .35rem;
}
.carousel-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.6);
    cursor: pointer;
    transition: background .2s;
}
.carousel-dot.active { background: #fff; transform: scale(1.3); }

/* ---- Product image upload grid ---- */
.img-upload-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.img-thumb-wrap { position: relative; width: 76px; height: 76px; }
.img-thumb {
    width: 76px; height: 76px;
    object-fit: cover;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: #fff;
}
.img-thumb-del {
    position: absolute;
    top: -6px; right: -6px;
    background: var(--danger);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 20px; height: 20px;
    font-size: .65rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.img-thumb-edit {
    position: absolute;
    top: -6px; left: -6px;
    background: #2563eb;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 20px; height: 20px;
    font-size: .65rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.img-thumb-badge {
    position: absolute;
    bottom: 2px; left: 2px;
    background: var(--primary);
    color: #fff;
    font-size: .55rem;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 700;
}
.img-add-btn {
    width: 76px; height: 76px;
    border: 2px dashed var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #fafafa;
    transition: border-color var(--transition), background var(--transition);
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}
.img-add-btn:hover { border-color: var(--primary); background: var(--primary-l); }

/* ---- Floating cart button ---- */
.cart-fab {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    border-radius: 50px;
    padding: .8rem 1.6rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    font-weight: 700;
    font-size: .95rem;
    box-shadow: 0 6px 20px rgba(255,107,53,.45);
    cursor: pointer;
    z-index: 150;
    white-space: nowrap;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.cart-fab:hover { background: var(--primary-d); transform: translateX(-50%) translateY(-2px); }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Order status timeline ---- */
.status-timeline {
    display: flex;
    justify-content: space-between;
    margin-top: .5rem;
    position: relative;
}
.status-timeline::before {
    content: '';
    position: absolute;
    top: 8px; left: 12.5%; right: 12.5%;
    height: 2px;
    background: var(--border);
    z-index: 0;
}
.status-timeline::after {
    content: '';
    position: absolute;
    top: 8px; left: 12.5%;
    height: 2px;
    background: var(--success);
    z-index: 0;
    width: var(--progress, 0%);
    transition: width .4s ease;
}
.status-timeline[data-progress="0"]   { --progress: 0%; }
.status-timeline[data-progress="33"]  { --progress: 25%; }
.status-timeline[data-progress="66"]  { --progress: 50%; }
.status-timeline[data-progress="100"] { --progress: 75%; }
.tl-step { display: flex; flex-direction: column; align-items: center; gap: .3rem; flex: 1; z-index: 1; }
.tl-step-dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--border);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--border);
    transition: background var(--transition), box-shadow var(--transition);
}
.tl-step.done  .tl-step-dot { background: var(--success); box-shadow: 0 0 0 2px var(--success); }
.tl-step.active .tl-step-dot { background: var(--primary); box-shadow: 0 0 0 3px rgba(255,107,53,.25); }
.tl-step.completed .tl-step-dot { background: var(--success); box-shadow: 0 0 0 4px rgba(46,204,113,.35); animation: pulse-green 2s ease-in-out infinite; }
.tl-step-label { font-size: .65rem; color: var(--muted); text-align: center; }
.tl-step.done  .tl-step-label { color: var(--success); font-weight: 600; }
.tl-step.active .tl-step-label { color: var(--primary); font-weight: 700; }
.tl-step.completed .tl-step-label { color: var(--success); font-weight: 700; }
@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 4px rgba(46,204,113,.35); }
    50%       { box-shadow: 0 0 0 8px rgba(46,204,113,.1); }
}

/* ---- Toast notifications ---- */
/* Mobile: full-width snackbar slides up from bottom */
.toast-pop {
    position: fixed;
    bottom: 1.25rem;
    left: 1rem;
    right: 1rem;
    transform: none;
    z-index: 9999;
    padding: .85rem 1rem .85rem 1.25rem;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,.22);
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .9rem;
    font-weight: 500;
    white-space: pre-wrap;
    animation: toast-slide-up .25s ease-out;
}
@keyframes toast-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.toast-pop-error  { background: #dc2626; color: #fff; }
.toast-pop-success { background: #16a34a; color: #fff; }
.toast-pop-close {
    background: rgba(255,255,255,.25);
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 26px; height: 26px;
    cursor: pointer;
    font-size: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
    margin-left: auto;
}
/* Desktop: top-right corner, fixed width */
@media (min-width: 768px) {
    .toast-pop {
        bottom: auto;
        top: 1.25rem;
        left: auto;
        right: 1.5rem;
        width: 380px;
        animation: toast-slide-down .25s ease-out;
    }
    @keyframes toast-slide-down {
        from { opacity: 0; transform: translateY(-12px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ---- Save success pill (inline saves: profile, promos, categories, shipping) ---- */
.save-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(15,32,53,.07);
    border: 1.5px solid rgba(15,32,53,.2);
    color: #0f2035;
    font-size: .8rem;
    font-weight: 700;
    padding: .3rem .75rem;
    border-radius: 99px;
    animation: save-pill-in .2s ease;
}
@keyframes save-pill-in {
    from { opacity: 0; transform: scale(.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* ---- Save success overlay (product saves) ---- */
.save-success-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1rem;
    animation: sso-fade-in .25s ease;
}
@keyframes sso-fade-in {
    from { opacity: 0; } to { opacity: 1; }
}
.save-success-circle {
    width: 88px; height: 88px; border-radius: 50%;
    background: #0f2035;
    box-shadow: 0 0 0 16px rgba(15,32,53,.12), 0 0 0 32px rgba(15,32,53,.06);
    display: flex; align-items: center; justify-content: center;
    animation: sso-pop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes sso-pop {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.save-success-title {
    font-size: 1.5rem; font-weight: 800; color: #0f2035; letter-spacing: -.01em;
}
.save-success-sub {
    font-size: .95rem; color: #64748b; font-weight: 500;
}

/* ---- Modal / bottom sheet ---- */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 200;
    backdrop-filter: blur(2px);
}
.modal-sheet {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2rem);
    max-width: 480px;
    background: #fff;
    border-radius: 20px;
    padding: 1.25rem 1rem 2rem;
    z-index: 201;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
}

/* ---- Section labels ---- */
.section-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .4rem;
}

/* ---- Divider with label ---- */
.divider { border: none; border-top: 1px solid var(--border); margin: .75rem 0; }

/* ---- Snackbar / toast ---- */
.snackbar {
    position: fixed;
    top: 5rem;
    right: 1.25rem;
    min-width: 280px;
    max-width: calc(100vw - 2rem);
    padding: .85rem 1.25rem;
    border-radius: .5rem;
    color: #fff;
    font-size: .92rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
    z-index: 9998;
    animation: snackbar-in .25s ease;
}
.snackbar-danger   { background: var(--danger); }
.snackbar-success  { background: var(--success); }
.snackbar-warning  { background: var(--accent); }
@keyframes snackbar-in {
    from { opacity: 0; transform: translateX(1.5rem); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ---- Meesho-style smooth image loading ---- */
@keyframes shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.img-wrap {
    position: relative;
    overflow: hidden;
    background: #ffffff;
}
.img-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
    animation: shimmer 1.4s infinite linear;
    z-index: 1;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.img-wrap.loaded::before {
    opacity: 0;
}
.img-smooth {
    opacity: 0;
    transition: opacity 0.35s ease;
    position: relative;
    z-index: 2;
}
.img-wrap.loaded .img-smooth {
    opacity: 1;
}
/* A photo the browser already had when it was drawn (App.razor's head script): no fade, so the
   app's redraw on start doesn't replay every photo's fade-in. */
.img-wrap.img-instant::before,
.img-wrap.img-instant .img-smooth {
    transition: none;
}

/* ---- Product-image hover: diagonal shine sweep + subtle zoom ---- */
.img-hover-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0)    0%,
        rgba(255,255,255,.18)  50%,
        rgba(255,255,255,0)    100%
    );
    transform: skewX(-18deg);
    z-index: 3;
    pointer-events: none;
}
.img-hover-shine img {
    transition: transform 0.22s ease;
}
.img-hover-shine:hover img {
    transform: scale(1.05);
}
.img-hover-shine:hover::after {
    animation: img-shine .55s ease-in-out;
}
@keyframes img-shine {
    from { left: -80%; }
    to   { left: 130%; }
}

/* ---- Blazor error UI ---- */
#blazor-error-ui {
    display: none;
    background: #fff3cd;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    z-index: 1000;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
}
/* ---- Seller page root ---- */
.seller-page-root {
    padding: .5rem .85rem 1rem;
}

#blazor-error-ui.blazor-error-boundary { display: block; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* ---- Chat panel (bottom sheet) ---- */
@keyframes chat-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes chat-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.chat-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 4900;
    touch-action: none;
    animation: chat-backdrop-in .2s ease;
}
.chat-panel {
    position: fixed; left: 0; right: 0; bottom: 0;
    height: 90dvh;
    background: #fff;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,.22);
    z-index: 5000;
    display: flex; flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: pan-y;
    animation: chat-slide-up .28s cubic-bezier(.32,.72,0,1);
}
.chat-drag-handle {
    width: 40px; height: 4px;
    background: #dde3ec; border-radius: 99px;
    margin: 0.6rem auto .2rem;
    flex-shrink: 0;
}
@media (max-width: 767px) {
    .chat-panel {
        top: env(safe-area-inset-top, 0px) !important;
        bottom: 0 !important;
        height: auto !important;
        border-radius: 0 !important;
    }
    .chat-drag-handle { display: none; }
}
.chat-header {
    flex-shrink: 0;
    background: #0f2035;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.chat-header-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem .85rem .65rem;
    gap: .5rem;
}
.chat-avatar-circle {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--primary, #f97316); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 800; flex-shrink: 0;
    letter-spacing: -.01em;
}
.chat-header-title { font-size: .93rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header-sub   { font-size: .7rem; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-close-btn {
    border: none; background: rgba(255,255,255,.12); color: #fff;
    width: 2rem; height: 2rem; border-radius: 50%;
    font-size: .85rem; cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    touch-action: manipulation;
}
.chat-close-btn:active { background: rgba(255,255,255,.22); }
.chat-messages {
    flex: 1; overflow-y: auto;
    padding: .75rem .75rem .5rem;
    display: flex; flex-direction: column;
    justify-content: flex-start;
    gap: .4rem;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.chat-empty {
    text-align: center; color: #94a3b8;
    font-size: .85rem; padding: 2rem 1rem;
    margin-top: auto;
}
.chat-msg-row { display: flex; }
.chat-msg-row-left  { justify-content: flex-start; }
.chat-msg-row-right { justify-content: flex-end; }
.chat-date-separator {
    width: 100%; display: flex; align-items: center; justify-content: center;
    margin: .75rem 0 .4rem;
}
.chat-date-separator span {
    background: rgba(0,0,0,.08); color: #64748b;
    font-size: .68rem; font-weight: 600;
    padding: .18rem .65rem; border-radius: 999px;
    letter-spacing: .02em;
}
.chat-bubble {
    max-width: 78%; padding: .55rem .8rem 1.4rem;
    font-size: .88rem; line-height: 1.5;
    position: relative; word-break: break-word;
    min-width: 4.5rem;
}
.chat-bubble-mine {
    background: var(--primary, #f97316); color: #fff;
    border-radius: 18px 18px 4px 18px;
}
.chat-bubble-theirs {
    background: #fff; color: #1a2236;
    border-radius: 18px 18px 18px 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.chat-bubble-buyer-own {
    background: #0f2035; color: #fff;
    border-radius: 18px 18px 4px 18px;
}
.chat-bubble-deleted {
    background: transparent !important;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px !important;
    padding: .4rem .65rem;
}
.chat-deleted-text { color: #94a3b8; font-style: italic; font-size: .82rem; }
.chat-bubble-meta {
    position: absolute; bottom: .3rem; right: .65rem;
    font-size: .67rem; margin: 0;
    display: flex; gap: .3rem; align-items: center; opacity: .7;
}
.chat-edited-mark { font-size: .63rem; }
.chat-bubble-text { white-space: pre-wrap; }
.chat-attachment-thumb {
    max-width: 180px; max-height: 180px;
    border-radius: 12px; object-fit: cover;
    cursor: pointer; display: block; margin-bottom: .3rem;
}
.chat-input-bar {
    flex-shrink: 0;
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem .75rem;
    border-top: 1px solid #f1f5f9;
    background: #fff;
}
.chat-input-footer {
    flex-shrink: 0;
    height: env(safe-area-inset-bottom, 0px);
    background: #fff;
}
.chat-attach-btn {
    cursor: pointer; line-height: 1; flex-shrink: 0;
    width: 2.1rem; height: 2.1rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #f8fafc; border: 1.5px solid #e2e8f0;
    color: #64748b;
    touch-action: manipulation;
}
.chat-attach-btn:active { background: #f1f5f9; }
.chat-pending-attach {
    flex: 1; display: flex; align-items: center; gap: .3rem;
    font-size: .82rem; color: #374151;
    background: #f8fafc; border-radius: 20px;
    padding: .4rem .75rem;
    border: 1.5px solid #e2e8f0;
}
.chat-input {
    flex: 1;
    border: none; border-radius: 22px;
    padding: .55rem .9rem;
    font-size: .9rem; outline: none;
    font-family: inherit;
    -webkit-appearance: none;
    background: #F5F5F7;
    color: #111827;
}
.chat-input:focus { background: #eeeff1; }
.chat-send-btn {
    flex-shrink: 0;
    width: 2.4rem; height: 2.4rem;
    border-radius: 50%; border: none;
    background: var(--primary, #f97316); color: #fff;
    font-size: 1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    touch-action: manipulation;
    transition: opacity .15s, transform .1s;
}
.chat-send-btn:active { transform: scale(.92); }
.chat-send-btn:disabled { opacity: .45; }
.chat-edit-textarea {
    width: 100%; border: 1.5px solid #e2e8f0; border-radius: 8px;
    padding: .4rem .5rem; font-size: .85rem; font-family: inherit;
    resize: vertical; outline: none; box-sizing: border-box;
}
.chat-edit-textarea:focus { border-color: var(--primary, #f97316); }
.chat-edit-save-btn {
    padding: .25rem .6rem; border-radius: 6px; border: none;
    background: var(--primary, #f97316); color: #fff;
    font-size: .8rem; font-weight: 600; cursor: pointer;
}
.chat-edit-cancel-btn {
    padding: .25rem .6rem; border-radius: 6px;
    border: 1px solid #e2e8f0; background: #f8fafc;
    font-size: .8rem; font-weight: 500; cursor: pointer; color: #374151;
}
.chat-context-menu {
    position: fixed;
    background: #fff; border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
    z-index: 5500; overflow: hidden; min-width: 140px;
}
.chat-context-menu button {
    display: block; width: 100%;
    padding: .6rem .9rem;
    text-align: left; border: none; background: none;
    font-size: .88rem; font-weight: 500;
    cursor: pointer; color: #1a2236;
}
.chat-context-menu button:active { background: #f8fafc; }

/* ── Chat panel — desktop modal layout ──────────────────── */
@keyframes chat-desktop-in {
    from { opacity: 0; transform: translate(-50%, -47%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}
@media (min-width: 768px) {
    .chat-panel {
        left: 50%;
        right: auto;
        top: 50%;
        bottom: auto;
        width: 480px;
        height: 640px;
        transform: translate(-50%, -50%);
        border-radius: 20px;
        box-shadow: 0 24px 64px rgba(0,0,0,.28);
        animation: chat-desktop-in .22s cubic-bezier(.32,.72,0,1);
    }
    .chat-drag-handle { display: none; }
}

/* ── Chat panel embedded mode (Messages desktop right panel) ── */
.chat-panel-embedded {
    position: static !important;
    height: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
    z-index: auto !important;
    border-left: 1px solid #f1f5f9;
}

/* ── Messages desktop WhatsApp-style layout ── */
.msg-desktop-root {
    display: flex;
    height: calc(100vh - 56px);
    background: #fff;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin: 0;
}
.msg-left-panel {
    width: 380px;
    flex-shrink: 0;
    border-right: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}
.msg-left-panel-scroll {
    flex: 1;
    overflow-y: auto;
}
.msg-left-search {
    flex-shrink: 0;
    border-bottom: 1px solid #f1f5f9;
}
.msg-right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background: #f8fafc;
}

/* ═══════════════════════════════════════════════════════════
   BUYER STOREFRONT — Design tokens & component overrides
   Scoped to .buyer-storefront wrapper (set in BuyerLayout)
   ═══════════════════════════════════════════════════════════ */
.buyer-storefront {
    --bs-accent:        #C2410C;
    --bs-accent-hover:  #9A3412;
    --bs-bg:            #FDF8F3;
    --bs-hero-bg:       #FFF7ED;
    --bs-border:        #F3E8DC;
    --bs-text-primary:  #1C1917;
    --bs-text-muted:    #78716C;
    --bs-text-hint:     #A8A29E;
    --bs-badge-border:  #FDBA74;
    --bs-success:       #16A34A;
}

/* Mobile buyer: white body so no grey bleeds through product detail overlay */
body:has(.buyer-storefront) { background: white !important; }
/* Desktop: warm off-white behind the 480px column */
@media (min-width: 768px) {
    body:has(.buyer-storefront) { background: #F5F0EB !important; }
}

/* Status badges used in Track & Store buyer pages */
.status-badge-pending {
    display: inline-flex; align-items: center;
    font-size: .72rem; font-weight: 600;
    padding: .2rem .65rem; border-radius: 20px;
    background: #FEF3C7; color: #92400E;
    border: 0.5px solid #FDBA74;
}
.status-badge-confirmed {
    display: inline-flex; align-items: center;
    font-size: .72rem; font-weight: 600;
    padding: .2rem .65rem; border-radius: 20px;
    background: #FFF7ED; color: #9A3412;
    border: 0.5px solid #FDBA74;
}
.status-badge-shipped {
    display: inline-flex; align-items: center;
    font-size: .72rem; font-weight: 600;
    padding: .2rem .65rem; border-radius: 20px;
    background: #EDE9FE; color: #5B21B6;
    border: 0.5px solid #C4B5FD;
}
.status-badge-delivered {
    display: inline-flex; align-items: center;
    font-size: .72rem; font-weight: 600;
    padding: .2rem .65rem; border-radius: 20px;
    background: #ECFDF5; color: #065F46;
    border: 0.5px solid #6EE7B7;
}

/* Order status timeline — buyer storefront colours */
.buyer-storefront .tl-step.done .tl-step-dot      { background: #C2410C; box-shadow: 0 0 0 2px #C2410C; }
.buyer-storefront .tl-step.active .tl-step-dot     { background: #C2410C; box-shadow: 0 0 0 3px rgba(194,65,12,.25); }
.buyer-storefront .tl-step.completed .tl-step-dot  { background: #C2410C; box-shadow: 0 0 0 2px #C2410C; animation: none; }
.buyer-storefront .tl-step.done .tl-step-label     { color: #C2410C; font-weight: 600; }
.buyer-storefront .tl-step.active .tl-step-label   { color: #C2410C; font-weight: 700; }
.buyer-storefront .tl-step.completed .tl-step-label{ color: #C2410C; font-weight: 700; }
.buyer-storefront .status-timeline::after           { background: #C2410C; }

/* ── Store card base (all breakpoints) ── */
.store-product-grid > div {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

@media (max-width: 767px) {
    .store-trust-strip { display: none !important; }
    .store-section-label { display: none !important; }
    .store-section-label.store-category-page { display: block !important; }
}

/* Cart drawer — full-screen checkout (steps 2 & 3) sits below the app bar */
.cart-drawer-fullscreen {
    top: calc(56px + env(safe-area-inset-top));
    left: 0;
    right: 0;
    bottom: 0;
}
@media (min-width: 640px) {
    .cart-drawer-fullscreen {
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%);
        border-radius: 1rem;
        width: 100%;
        max-width: 32rem;
        max-height: 90vh;
        box-shadow: 0 25px 50px rgba(0,0,0,0.25);
    }
}

/* ── Store add-to-cart: hidden on mobile, shown on desktop or list view ── */
.store-add-to-cart-btn { display: none !important; }
.store-list-view .store-add-to-cart-btn { display: flex !important; }
.store-list-view .btn-add-to-cart { padding-top: 12px !important; padding-bottom: 12px !important; font-size: 14px !important; }
/* Meat: always show Add to Cart on the grid card (opens the weight/cut bottom sheet) */
.store-product-grid.store-pg-meat .store-add-to-cart-btn { display: flex !important; }

/* ── Store skeleton: expand buyer wrapper + mobile vs desktop ── */
.buyer-storefront:has(.store-skeleton) {
    max-width: 100% !important;
    background: #F5F0EB !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
}
@media (min-width: 1024px) {
    .sk-mobile-header { display: none !important; }
    .sk-mobile-grid   { display: none !important; }
    .sk-desktop-header { display: none !important; }
    .sk-desktop-body  { display: none !important; }
    .sk-desktop-landing { display: block !important; }
}

/* ── Hide global buyer footer on store pages (store has its own footer) ── */
.buyer-storefront:has(.store-body) .buyer-global-footer {
    display: none !important;
}

/* ── Mobile store footer ── */
.store-mobile-footer {
    display: block;
    padding: 32px 16px calc(20px + env(safe-area-inset-bottom));
    border-top: 0.5px solid #F3E8DC;
    background: white;
    margin-top: 8px;
}
@media (min-width: 768px) {
    .store-mobile-footer { display: none; }
}

/* ── Store desktop responsive layout ── */
@media (min-width: 768px) {
    /* Expand buyer wrapper to full width on store page */
    .buyer-storefront:has(.store-body) {
        max-width: 100% !important;
        background: #FDF8F3 !important;
    }
    /* Clip horizontal overflow so the 100vw topbar doesn't create a scrollbar */
    body:has(.store-body) {
        overflow-x: clip;
    }
    /* Topbar inner rows — full width */
    .store-topbar .store-topbar-inner {
        width: 100%;
    }
    /* Desktop topbar — stretch to full viewport width so all child borders reach the right edge */
    .store-topbar {
        width: 100vw !important;
        background: #FFF7ED !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
        padding-top: 3px !important; /* push content below the fixed accent stripe */
    }
    /* Full-viewport theme accent stripe */
    .store-theme-stripe { display: block !important; }
    .store-desktop-header {
        background: #FFF7ED !important;
    }
    /* Filter/sort row on desktop — slightly deeper warm tone; explicit 100vw so border reaches the right edge */
    .store-filter-row {
        background: #F5EDE2 !important;
        border-bottom: none !important;  /* replaced by ::after which spans left:0→right:0 */
        position: relative;
        width: 100vw !important;
    }
    .store-filter-row::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 0.5px;
        background: #E8DCCF;
        pointer-events: none;
    }
    /* Desktop header: show, Mobile header: hide */
    .store-desktop-header { display: flex !important; }
    .store-mobile-header  { display: none !important; }
    /* Hide trust strip on desktop (moved to header) */
    .store-trust-strip    { display: none !important; }
    /* Hide standalone search row on desktop (moved to header) */
    .store-search-row     { display: none !important; }
    /* Show sort by dropdown on desktop */
    .store-sort-select    { display: flex !important; }
    /* Hide mobile item count on desktop */
    .store-result-count-mobile { display: none !important; }
    /* Show add-to-cart button on desktop */
    .store-add-to-cart-btn { display: flex !important; }
    /* Hide load-more on desktop */
    .store-loadmore-mobile { display: none !important; }
    /* Show pagination on desktop */
    .store-pagination-desktop { display: flex !important; }
    /* Hide mobile-only elements */
    .store-hamburger { display: none !important; }
    .store-mobile-pills { display: none !important; }
    /* Body two-column layout — full width */
    .store-body {
        display: flex !important;
        align-items: flex-start;
        width: 100%;
        padding: 0 !important;
        background: transparent !important;
    }
    /* Desktop sidebar — stretches full height of products column (white panel) */
    .store-sidebar {
        display: block !important;
        width: 200px;
        min-width: 200px;
        flex-shrink: 0;
        align-self: stretch;
        background: #ffffff;
        border-right: 1.5px solid #D6CEC6;
        padding: 0 0 0 24px;
    }
    /* Inner categories list — sticky within the white panel; stops at footer naturally */
    .store-sidebar-sticky {
        position: sticky;
        top: 126px; /* header(72+3 padding) + filter(~48) + stripe(3) */
    }
    /* Main product content */
    .store-main {
        flex: 1;
        min-width: 0;
        padding: 16px 20px 80px !important;
        background: #FDF8F3;
    }
    /* 3-column product grid */
    .store-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
    /* Card hover lift + shadow */
    .store-product-grid > div {
        transition: transform 0.18s ease, box-shadow 0.18s ease;
        border-radius: 16px;
        overflow: hidden;
    }
    .store-product-grid > div:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.11);
    }
    /* Rounded image top corners */
    .store-product-grid > div > div:first-child {
        border-radius: 16px 16px 0 0;
        overflow: hidden;
    }
    /* Sidebar category buttons */
    .store-sidebar button {
        font-weight: 500 !important;
        color: #44403C;
        font-size: 13px;
        line-height: 1.4;
    }
    /* Narrow sidebar when fewer than 4 categories */
    .store-sidebar-narrow {
        width: 170px !important;
        min-width: 170px !important;
    }
    /* Slim Add-to-Cart button on desktop */
    .store-product-grid .btn-add-to-cart {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        min-height: unset !important;
        height: 34px !important;
        font-size: 13px !important;
    }
}
@media (min-width: 960px) {
    .store-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; }
}
/* ── Food store — page background (warm cream throughout) ── */
body:has(.store-product-grid-food) { background: #FDF5EE !important; }
body:has(.store-product-grid-food) .store-topbar { background: #FDF5EE !important; box-shadow: none !important; }
body:has(.store-product-grid-food) .store-main {
    background-color: #FDF5EE !important;
    background-image: var(--s-bg-pattern, none) !important;
    background-size: var(--s-bg-pattern-size, auto) !important;
    background-blend-mode: var(--s-bg-pattern-blend, normal) !important;
}
body:has(.store-product-grid-food) .store-section-bg {
    background-color: #FDF5EE !important;
    background-image: var(--s-bg-pattern, none) !important;
    background-size: var(--s-bg-pattern-size, auto) !important;
    background-blend-mode: var(--s-bg-pattern-blend, normal) !important;
}
body:has(.store-product-grid-food) .store-search-filter-row { background: #FDF5EE !important; border-bottom: 0.5px solid #EDD9C6 !important; }
body:has(.store-product-grid-food) .store-mobile-pills { border-bottom: 0.5px solid #EDD9C6 !important; }

/* ── Food store — premium card design ── */
.store-product-grid-food { gap: 14px !important; }
.store-product-grid-food > div {
    border-radius: 20px !important;
    border: none !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.07), 0 4px 24px rgba(160,60,10,.06) !important;
}
.store-product-grid-food > div > div:first-child {
    border-radius: 20px 20px 0 0 !important;
    background: #FFFFFF !important;
}
.store-product-grid-food .img-wrap {
    background: #FFFFFF !important;
}
.store-product-grid-food > div > div:first-child img {
    object-fit: cover !important;
    object-position: center center !important;
}
.store-product-grid-food > div > div:first-child::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.82));
    pointer-events: none;
    z-index: 1;
}
.store-product-grid-food .store-add-to-cart-btn {
    display: none !important;
}
.store-product-grid-food > div > div:last-child {
    padding: 12px 12px 14px !important;
}
.store-product-grid-food .btn-add-to-cart {
    border-radius: 12px !important;
    min-height: 40px !important;
    height: auto !important;
    font-size: 13px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
    letter-spacing: 0.02em !important;
}
@media (min-width: 768px) {
    .store-product-grid-food > div:hover {
        box-shadow: 0 8px 32px rgba(160,60,10,.14) !important;
        transform: translateY(-4px) !important;
    }
}
@media (max-width: 767px) {
    .store-product-grid-food > div:active {
        transform: scale(.97) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
    }
}
/* ── Fashion editorial grid: every 5th card spans 2 cols for visual rhythm ── */
@media (min-width: 768px) {
    .store-product-grid-fashion > div:nth-child(5n) {
        grid-column: span 2;
    }
}
@media (min-width: 1200px) {
    /* max-width removed — was capping the header element at 1440px and cutting off its border-bottom at wide viewports */
}

/* ── Filter row + sidebar alignment — global, no media query ── */
.store-filter-row { padding-left: 24px !important; }
.store-sidebar-sticky p { padding-left: 0 !important; }

/* ── Shop-view chrome: announce bar now persists on mobile too (was desktop-only), matching what
     the landing/home view already shows on both breakpoints — quiet static line, not the animated
     home ticker, so a seller's real promo message doesn't vanish the moment a buyer starts browsing.
     The 4-up trust strip stays desktop-only — a 4-column grid has nowhere to go at mobile widths. ── */
.store-chrome-announce {
    display: block;
    background: var(--s-band, #0f2035);
    color: #fbf6ef;
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    text-align: center;
    font-weight: 500;
}
.store-chrome-trust { display: none; }
/* 2+ Announcement Bar messages: one at a time, crossfading (keyframes from AnnouncementHelper.BuildTickerCss("sca")). */
.store-chrome-announce--rotate { position: relative; overflow: hidden; height: 2rem; padding: 0; }
.sca-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 1rem;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 1024px) {
    .store-chrome-announce {
        font-size: 0.78rem;
        letter-spacing: 0.18em;
        padding: 0.6rem 2rem;
    }
    .store-chrome-announce--rotate { height: 2.6rem; padding: 0; }
    .store-chrome-trust {
        display: block;
        background: var(--s-band, #0f2035);
        color: #fbf6ef;
        padding: 1.25rem 2rem;
    }
    .store-chrome-trust-grid {
        max-width: 1280px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        align-items: center;
    }
    .store-chrome-trust-item {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        font-size: 0.82rem;
        border-right: 1px solid rgba(246,230,200,0.18);
        padding-right: 1.5rem;
    }
    .store-chrome-trust-item:last-child { border-right: none; }
    .store-chrome-trust-item svg { color: #e8a13a; flex-shrink: 0; }
    .store-chrome-trust-item b {
        display: block;
        font-weight: 700;
        letter-spacing: 0.04em;
        font-size: 0.86rem;
    }
    .store-chrome-trust-item span {
        color: rgba(246,230,200,0.7);
        font-size: 0.7rem;
    }
    /* Hide the inline 3-pill trust display in the desktop topbar since it's replaced by the strip above */
    .store-desktop-header .store-desktop-trust-pills { display: none !important; }
}

/* ── Store desktop footer (hidden on mobile) — layout mirrors landing footer; chrome flips to seller accent ── */
.store-footer { display: none; }
.store-footer-link {
    display: block;
    font-size: 0.86rem;
    font-weight: 500;
    color: rgba(246,230,200,0.7);
    text-decoration: none;
    margin-bottom: 0.55rem;
    transition: color .15s;
    cursor: pointer;
}
.store-footer-link:hover { color: #fbf6ef; }
@media (min-width: 768px) {
    .store-footer {
        display: block;
        background: var(--s-band, #0f2035);
        color: #fbf6ef;
        border-top: 1px solid rgba(246,230,200,0.18);
    }
    .store-footer-inner {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr;
        gap: 2.5rem;
        max-width: 1280px;
        margin: 0 auto;
        padding: 3.5rem 2rem 1.75rem;
    }
    .store-footer-col {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .store-footer-bottom {
        padding: 1.25rem 2rem;
        font-size: 0.78rem;
        color: rgba(246,230,200,0.55);
        border-top: 1px solid rgba(246,230,200,0.15);
        max-width: 1280px;
        margin: 0 auto;
    }
}
@media (min-width: 1200px) {
    .store-footer-inner,
    .store-footer-bottom { max-width: 1400px; padding-left: 2rem; padding-right: 2rem; }
}


/* ═══════════════════════════════════════════════════════
   Premium Store Animations
   ═══════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes storeFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes storeSlideInLeft {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes shimmerSweep {
    0%   { left: -80%; }
    100% { left: 130%; }
}
@keyframes headerDrop {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes badgePop {
    0%   { transform: scale(0.7); opacity: 0; }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1);   opacity: 1; }
}

/* ── 1. Topbar entrance ── */
@media (min-width: 768px) {
    .store-topbar {
        animation: headerDrop .45s cubic-bezier(.22,1,.36,1) both;
    }
}

/* ── 2. Sidebar slide in — applied to inner sticky, NOT the flex spacer (transform on spacer breaks position:fixed) ── */
@media (min-width: 768px) {
    .store-sidebar-sticky {
        animation: storeFadeUp .35s ease .1s both;
    }
}

/* ── 3. Section label + products fade up ── */
@media (min-width: 768px) {
    .store-section-label {
        animation: storeFadeUp .4s ease .15s both;
    }

    /* Staggered product card entrance */
    .store-product-grid > div:nth-child(1)  { animation: storeFadeUp .45s ease .10s both; }
    .store-product-grid > div:nth-child(2)  { animation: storeFadeUp .45s ease .16s both; }
    .store-product-grid > div:nth-child(3)  { animation: storeFadeUp .45s ease .22s both; }
    .store-product-grid > div:nth-child(4)  { animation: storeFadeUp .45s ease .28s both; }
    .store-product-grid > div:nth-child(5)  { animation: storeFadeUp .45s ease .34s both; }
    .store-product-grid > div:nth-child(6)  { animation: storeFadeUp .45s ease .40s both; }
    .store-product-grid > div:nth-child(7)  { animation: storeFadeUp .45s ease .46s both; }
    .store-product-grid > div:nth-child(8)  { animation: storeFadeUp .45s ease .52s both; }
    .store-product-grid > div:nth-child(9)  { animation: storeFadeUp .45s ease .58s both; }
    .store-product-grid > div:nth-child(10) { animation: storeFadeUp .45s ease .64s both; }
    .store-product-grid > div:nth-child(11) { animation: storeFadeUp .45s ease .70s both; }
    .store-product-grid > div:nth-child(12) { animation: storeFadeUp .45s ease .76s both; }
}

/* ── 4. Product card — enhanced hover ── */
@media (min-width: 768px) {
    .store-product-grid > div {
        transition: transform .22s cubic-bezier(.22,1,.36,1),
                    box-shadow .22s cubic-bezier(.22,1,.36,1),
                    border-color .22s ease;
        will-change: transform;
    }
    .store-product-grid > div:hover {
        transform: translateY(-5px) scale(1.012);
        box-shadow: 0 16px 36px rgba(0,0,0,.13);
        border-color: #FDBA74 !important;
    }

    /* Image zoom on card hover */
    .store-product-grid > div:hover img {
        transform: scale(1.07);
    }
    .store-product-grid > div img {
        transition: transform .4s cubic-bezier(.22,1,.36,1);
    }
}

/* ── 5. Add to Cart — shimmer sweep on hover ── */
.store-add-to-cart-btn {
    position: relative;
    overflow: hidden;
    transition: opacity .15s ease, transform .15s ease !important;
}
.store-add-to-cart-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
}
.store-add-to-cart-btn:hover::after {
    animation: shimmerSweep .6s ease forwards;
}
.store-add-to-cart-btn:hover {
    opacity: .92;
    transform: scale(1.01) !important;
}
.store-add-to-cart-btn:active {
    transform: scale(.97) !important;
}

/* ── 6. Sidebar category — smooth active indicator ── */
.store-sidebar button {
    transition: background .18s ease, color .18s ease, border-left-color .18s ease !important;
}
.store-sidebar button:hover {
    background: var(--s-primary-light, #FFF7ED) !important;
    color: var(--s-primary, #C2410C) !important;
}

/* ── 7. Filter pill smooth transition ── */
.store-topbar button {
    transition: background .18s ease, color .18s ease, border-color .18s ease !important;
}

/* ── 8. Desktop header action icons hover ── */
@media (min-width: 768px) {
    .store-desktop-header a,
    .store-desktop-header button {
        transition: opacity .15s ease, transform .15s ease;
    }
    .store-desktop-header a:hover,
    .store-desktop-header button:hover {
        opacity: .75;
        transform: translateY(-1px);
    }
}

/* ── 9. Footer links hover highlight ── */
@media (min-width: 768px) {
    .store-footer-link {
        border-radius: 4px;
        padding: 1px 6px;
        margin-left: -6px;
        transition: color .15s ease, background .15s ease !important;
    }
    .store-footer-link:hover {
        color: #C2410C !important;
        background: #FFF7ED;
    }
}


/* ── B8: Add to Cart "Added!" check icon pop ── */
@keyframes atcCheckPop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.atc-check { animation: atcCheckPop 0.32s cubic-bezier(.34,1.56,.64,1) both; }

/* ── B7: Heart bounce animation — fires when an element gains .heart-burst class ──
   Add the class via the click handler; CSS removes it on animationend (one-shot). */
@keyframes heartPop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.35); }
    55%  { transform: scale(0.9); }
    80%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.heart-burst,
.heart-burst svg,
.store-fav-btn.is-active svg,
.sd-heart.is-active svg {
    animation: heartPop 0.42s cubic-bezier(.5,.02,.32,1) both;
}

/* ── B1: Universal scale-tap feedback ──
   Applied to every card-like surface so every tap feels responsive on touch devices. */
.sh-card-tap,
.store-product-grid > *,
.store-list-view > *,
.sh-cats-grid > *,
.sh-prods-row > * {
    transition: transform .14s ease, box-shadow .14s ease;
    -webkit-tap-highlight-color: transparent;
}
.sh-card-tap:active,
.store-product-grid > *:active,
.store-list-view > *:active,
.sh-cats-grid > *:active,
.sh-prods-row > *:active {
    transform: scale(0.97);
}

/* ── Skeleton uses neutral warm-grays (never seller theme) ──
   Buyer sees a universal "loading" state, then the brand reveals with the real content.
   This single scope override cascades through every var() in the skeleton subtree,
   so we don't have to touch any inline styles. */
.store-skeleton {
    --s-bg:           #f5f1ea;   /* neutral warm cream */
    --s-skeleton:     #e8e1d4;   /* warm tan card body */
    --s-border:       #ece5d8;   /* warm hairline */
    --s-text-accent:  #3a3530;   /* warm dark for announce/trust chrome */
    --s-band:         #3a3530;   /* same neutral warm dark for the announce/trust/footer band bg */
    --s-primary:      #c2a78a;   /* neutral warm tan (overrides hero gradient) */
    --s-primary-light:#f5e8d9;   /* matching pale */
    --s-card-radius:  14px;      /* don't depend on StoreVisualTheme that's not loaded yet */
}

/* ── Skeleton shimmer (mobile + desktop) ── */
@keyframes skeletonShimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}
.store-skeleton .skeleton {
    background: linear-gradient(90deg, var(--s-border) 25%, var(--s-skeleton) 50%, var(--s-border) 75%) !important;
    background-size: 400px 100% !important;
    animation: skeletonShimmer 1.4s infinite !important;
}

/* ── Desktop: heart button spring ── */
@media (min-width: 768px) {
    .store-fav-btn {
        transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), background 0.15s !important;
    }
    .store-fav-btn:hover  { transform: scale(1.18); }
    .store-fav-btn:active { transform: scale(0.9); }
}

/* ── Desktop: search input focus ring ── */
@media (min-width: 768px) {
    .store-desktop-header input[type="search"]:focus {
        border-color: var(--s-primary) !important;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-primary) 15%, transparent);
    }
}

/* ── Desktop: cart FAB spring entry ── */
@keyframes storeFabIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.9); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);   }
}
@media (min-width: 768px) {
    .store-cart-fab { animation: storeFabIn 0.25s cubic-bezier(.34,1.56,.64,1); }
}

/* ── Desktop: add-to-cart toast ── */
@keyframes storeToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(16px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}
.store-toast { display: none; }
@media (min-width: 768px) {
    .store-toast {
        display: block;
        position: fixed;
        bottom: 72px;
        left: 50%;
        transform: translateX(-50%);
        background: #1C1917;
        color: white;
        padding: 10px 18px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 500;
        z-index: 500;
        white-space: nowrap;
        pointer-events: none;
        animation: storeToastIn 0.22s cubic-bezier(.34,1.56,.64,1);
        box-shadow: 0 4px 20px rgba(0,0,0,.25);
    }
}

/* ── Mobile: sticky header entrance ── */
@media (max-width: 767px) {
    .store-mobile-header {
        animation: headerDrop .38s cubic-bezier(.22,1,.36,1) both;
    }
}

/* ── Mobile: section label + staggered product card fade-up ── */
@media (max-width: 767px) {
    .store-section-label {
        animation: storeFadeUp .35s ease .08s both;
    }
    .store-product-grid > div:nth-child(1)  { animation: storeFadeUp .35s ease .08s both; }
    .store-product-grid > div:nth-child(2)  { animation: storeFadeUp .35s ease .13s both; }
    .store-product-grid > div:nth-child(3)  { animation: storeFadeUp .35s ease .18s both; }
    .store-product-grid > div:nth-child(4)  { animation: storeFadeUp .35s ease .23s both; }
    .store-product-grid > div:nth-child(5)  { animation: storeFadeUp .35s ease .28s both; }
    .store-product-grid > div:nth-child(6)  { animation: storeFadeUp .35s ease .33s both; }
    .store-product-grid > div:nth-child(7)  { animation: storeFadeUp .35s ease .38s both; }
    .store-product-grid > div:nth-child(8)  { animation: storeFadeUp .35s ease .43s both; }
}

/* ── Mobile: tap feedback on product cards ── */
@media (max-width: 767px) {
    .store-product-grid > div {
        transition: transform .12s ease;
    }
    .store-product-grid > div:active {
        transform: scale(.97);
    }
}

/* ── Respect reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
    .store-topbar,
    .store-mobile-header,
    .store-sidebar,
    .store-section-label,
    .store-product-grid > div,
    .store-add-to-cart-btn,
    .store-add-to-cart-btn::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ── Gap fixes: filter bar + card image + product name ── */

/* Sort/filter row — hidden on mobile (replaced by bottom sheet chip) */
@media (max-width: 767px) {
    .store-filter-row { display: none !important; }
}

/* Filter bar pills — white pill background on desktop for contrast */
@media (min-width: 768px) {
    .store-filter-row {
        padding: 10px 24px !important;
    }
}

/* ── Mobile: product image refinements ── */
@media (max-width: 767px) {
    /* Match shimmer bg to warm card background — avoids white flash on load */
    .store-product-grid .img-wrap {
        background: #F5F0EB;
    }

    /* Top-align images so product face/logo shows first, not mid-body */
    .store-product-grid > div > div:first-child img {
        object-position: center top;
    }

    /* Subtle bottom scrim — adds depth between image and card body */
    .store-product-grid > div > div:first-child::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 38%;
        background: linear-gradient(to top, rgba(0,0,0,.10) 0%, transparent 100%);
        pointer-events: none;
        z-index: 3;
    }
}

/* Card image — 3:4 portrait ratio fills cleanly, no letterboxing */
@media (min-width: 768px) {
    .store-product-grid > div > div:first-child {
        aspect-ratio: 3 / 4;
        background: #F5F0EB !important;
    }
    .store-product-grid > div > div:first-child img {
        object-fit: cover;
        object-position: center top;
        width: 100%;
        height: 100%;
    }
    /* Subtle inner frame: thin top-of-image gradient for depth */
    .store-product-grid > div > div:first-child::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,.03) 0%, transparent 30%);
        z-index: 1;
        pointer-events: none;
    }
}


/* ── Merged search+filter row: mobile only ── */
@media (min-width: 768px) {
    .store-search-filter-row { display: none !important; }
    .store-mobile-pills { display: none !important; }
}

/* ── Gender filter bar — full-width tab bar on both mobile and desktop ── */
.store-gender-bar {
    display: flex;
    align-items: stretch;
    background: #faf9f7;
    border-bottom: 0.5px solid var(--s-border-warm);
    padding: 0;
    gap: 0;
}
.store-gender-btn {
    flex: 1;
    border: none;
    border-bottom: 2.5px solid transparent;
    border-right: 0.5px solid var(--s-border-warm);
    background: transparent;
    color: #78716C;
    font-size: 12px;
    font-weight: 600;
    padding: 12px 0;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    letter-spacing: 0.02em;
    transition: background .15s ease, color .15s ease, border-bottom-color .15s ease;
}
.store-gender-btn:last-child { border-right: none; }
.store-gender-btn--active {
    background: #fff;
    color: var(--s-primary);
    border-bottom-color: var(--s-primary);
}
.store-gender-btn:not(.store-gender-btn--active):hover {
    background: var(--s-primary-light);
    color: var(--s-text-accent);
}
@media (min-width: 768px) {
    .store-gender-btn {
        font-size: 13px;
        padding: 12px 0;
    }
}

/* Simple layout (3): the gender row folds away while the shopper scrolls down and comes back near the top
   (html[data-scrolled] is set by the scroll script in App.razor). Search and categories stay. */
#store-topbar[data-template="3"] .store-gender-bar { max-height: 60px; overflow: hidden; transition: max-height .22s ease, border-bottom-width .22s ease; }
html[data-scrolled="1"] #store-topbar[data-template="3"] .store-gender-bar { max-height: 0; border-bottom-width: 0; }
@media (prefers-reduced-motion: reduce) { #store-topbar[data-template="3"] .store-gender-bar { transition: none; } }

/* ── Category pill row: hide scrollbar cross-browser ── */
.store-mobile-pills > div::-webkit-scrollbar { display: none; }

/* Store header scroll-compact disabled — full brand row always visible */


/* ════════════════════════════════════════════════════════════════════
   PREMIUM STORE THEMES  —  append ?vstyle=luxe  or  ?vstyle=dark
   Zero backend changes. CSS-only. Works on mobile + desktop.
   data-vstyle is set on .store-body; :has() scopes everything up.
   ════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   LUXE  — Editorial / Fashion Luxury
   Inspired by: Net-a-Porter, The Row, boutique fashion sites
   ────────────────────────────────────────────────────────────────── */
.buyer-storefront:has([data-vstyle="luxe"]) {
    --vstyle-card-bg:     transparent;
    --vstyle-card-radius: 0px;
    --vstyle-page-bg:     #FAF8F4;
}

/* Page & body */
body:has([data-vstyle="luxe"]) { background: #EDE8E2 !important; }

/* Topbar */
.buyer-storefront:has([data-vstyle="luxe"]) .store-topbar {
    background: #FFFFFF !important;
    box-shadow: 0 1px 0 #EAE4DC, 0 2px 12px rgba(0,0,0,.04) !important;
}
.buyer-storefront:has([data-vstyle="luxe"]) .store-desktop-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #EAE4DC !important;
}
.buyer-storefront:has([data-vstyle="luxe"]) .store-filter-row {
    background: #F2EEE9 !important;
}
.buyer-storefront:has([data-vstyle="luxe"]) .store-filter-row::after {
    background: #E5DFDA;
}

/* Accent stripe — thinner for luxe */
.buyer-storefront:has([data-vstyle="luxe"]) .store-theme-stripe { height: 2px !important; }

/* Body & main */
.buyer-storefront:has([data-vstyle="luxe"]) .store-body,
.buyer-storefront:has([data-vstyle="luxe"]) .store-main {
    background-color: #FAF8F4 !important;
    background-image: var(--s-bg-pattern, none) !important;
    background-size: var(--s-bg-pattern-size, auto) !important;
    background-blend-mode: var(--s-bg-pattern-blend, normal) !important;
}

/* Sidebar */
.buyer-storefront:has([data-vstyle="luxe"]) .store-sidebar {
    background: #FFFFFF !important;
    border-right: 1px solid #EAE4DC !important;
}
.buyer-storefront:has([data-vstyle="luxe"]) .store-sidebar-sticky p {
    font-size: 9px !important;
    letter-spacing: .18em !important;
    color: #B8ADA5 !important;
}
.buyer-storefront:has([data-vstyle="luxe"]) .store-sidebar button {
    font-size: 12.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0.025em !important;
    color: #7A6E68 !important;
}
.buyer-storefront:has([data-vstyle="luxe"]) .store-sidebar button:hover {
    background: #FAF8F4 !important;
    color: var(--s-primary) !important;
}

/* Product cards — borderless editorial grid */
.buyer-storefront:has([data-vstyle="luxe"]) .store-product-grid > div {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.buyer-storefront:has([data-vstyle="luxe"]) .store-product-grid > div:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Card image — tall portrait (fashion lookbook ratio) */
.buyer-storefront:has([data-vstyle="luxe"]) .store-product-grid > div > div:first-child {
    aspect-ratio: 2 / 3 !important;
    background: #EDE8E2 !important;
    border-radius: 0 !important;
}
.buyer-storefront:has([data-vstyle="luxe"]) .store-product-grid > div > div:first-child img {
    transition: transform .7s cubic-bezier(.22,1,.36,1) !important;
}
.buyer-storefront:has([data-vstyle="luxe"]) .store-product-grid > div:hover > div:first-child img {
    transform: scale(1.06) !important;
}

/* Filter pills — square-ish, refined */
.buyer-storefront:has([data-vstyle="luxe"]) .store-filter-row button {
    border-radius: 3px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.06em !important;
    font-weight: 500 !important;
}
/* Active Newest pill — outline instead of filled black */
.buyer-storefront:has([data-vstyle="luxe"]) .store-filter-row button[style*="background:#1C1917"],
.buyer-storefront:has([data-vstyle="luxe"]) .store-filter-row button[style*="background: #1C1917"] {
    background: transparent !important;
    color: var(--s-primary) !important;
    border-color: var(--s-primary) !important;
    box-shadow: none !important;
}

/* Section heading */
.buyer-storefront:has([data-vstyle="luxe"]) .store-section-label h2 {
    font-size: 17px !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
}
.buyer-storefront:has([data-vstyle="luxe"]) .store-section-label p {
    font-size: 11px !important;
    letter-spacing: 0.02em !important;
    color: #B8ADA5 !important;
}

/* Mobile: pills refined */
.buyer-storefront:has([data-vstyle="luxe"]) .store-mobile-pills button {
    border-radius: 3px !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
}

/* Mobile: card image portrait */
@media (max-width: 767px) {
    .buyer-storefront:has([data-vstyle="luxe"]) .store-product-grid > div > div:first-child {
        aspect-ratio: 2 / 3 !important;
    }
    .buyer-storefront:has([data-vstyle="luxe"]) .store-product-grid > div {
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        border: none !important;
    }
}


/* ──────────────────────────────────────────────────────────────────
   DARK  — Deep / Dramatic Premium
   Inspired by: Farfetch dark, luxury streetwear sites
   ────────────────────────────────────────────────────────────────── */

/* Page & body */
body:has([data-color-mode="dark"]) { background: #080808 !important; }

/* Topbar */
.buyer-storefront:has([data-color-mode="dark"]) .store-topbar {
    background: #111111 !important;
    box-shadow: 0 1px 0 #2A2A2A !important;
}
.buyer-storefront:has([data-color-mode="dark"]) .store-desktop-header {
    background: #111111 !important;
    border-bottom: 1px solid #252525 !important;
}
.buyer-storefront:has([data-color-mode="dark"]) .store-filter-row {
    background: #0C0C0C !important;
}
.buyer-storefront:has([data-color-mode="dark"]) .store-filter-row::after {
    background: #222;
}

/* Body & main */
.buyer-storefront:has([data-color-mode="dark"]) .store-body,
.buyer-storefront:has([data-color-mode="dark"]) .store-main {
    background-color: #0F0F0F !important;
    background-image: var(--s-bg-pattern, none) !important;
    background-size: var(--s-bg-pattern-size, auto) !important;
    background-blend-mode: var(--s-bg-pattern-blend, normal) !important;
}

/* Sidebar */
.buyer-storefront:has([data-color-mode="dark"]) .store-sidebar {
    background: #111111 !important;
    border-right: 1px solid #242424 !important;
}
.buyer-storefront:has([data-color-mode="dark"]) .store-sidebar-sticky p {
    color: #484848 !important;
}
.buyer-storefront:has([data-color-mode="dark"]) .store-sidebar button {
    color: #888888 !important;
}
.buyer-storefront:has([data-color-mode="dark"]) .store-sidebar button:hover {
    background: #1A1A1A !important;
    color: #E0DBD6 !important;
}

/* T8 (Fresh Market) desktop sidebar — a single-brand catalog reads as premium with serif
   category names and a slower rhythm, not the compact sans-serif marketplace-filter-panel
   look the sidebar otherwise shares with every other template. Colors are left to the
   vstyle rules above/below (dark, luxe, etc.) — only type/spacing is touched here so it never
   fights those for the same properties regardless of stylesheet order. */
.buyer-storefront:has([data-template="8"]) .store-sidebar-sticky p {
    font-size: 10px !important;
    letter-spacing: .16em !important;
}
.buyer-storefront:has([data-template="8"]) .store-sidebar button {
    font-family: var(--s-heading-font, 'Fraunces', 'Playfair Display', Georgia, serif) !important;
    font-size: 14px !important;
    letter-spacing: .01em !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* Search input — dark */
.buyer-storefront:has([data-color-mode="dark"]) input[type="search"] {
    background: #1C1C1C !important;
    border-color: #333 !important;
    color: #E0DBD6 !important;
}

/* Trust badges text — light on dark */
.buyer-storefront:has([data-color-mode="dark"]) .store-desktop-header [style*="color:var(--s-text-accent)"],
.buyer-storefront:has([data-color-mode="dark"]) .store-desktop-header span {
    color: #C8C3BE !important;
}
/* Header icon labels */
.buyer-storefront:has([data-color-mode="dark"]) .store-desktop-header a span,
.buyer-storefront:has([data-color-mode="dark"]) .store-desktop-header button span {
    color: #888 !important;
}
/* Header icon strokes */
.buyer-storefront:has([data-color-mode="dark"]) .store-desktop-header svg[stroke="#4B5563"] { stroke: #777 !important; }
.buyer-storefront:has([data-color-mode="dark"]) .store-desktop-header p[style*="color:#78716C"] { color: #555 !important; }
.buyer-storefront:has([data-color-mode="dark"]) .store-desktop-header p[style*="color:#1C1917"],
.buyer-storefront:has([data-color-mode="dark"]) .store-desktop-header p[style*="font-size:16px"] { color: #E8E3DE !important; }

/* Filter pills — dark style */
.buyer-storefront:has([data-color-mode="dark"]) .store-filter-row button {
    background: #1A1A1A !important;
    border-color: #2E2E2E !important;
    color: #888 !important;
    box-shadow: none !important;
}
/* Active pill (Newest, price sort) — use accent color instead of black */
.buyer-storefront:has([data-color-mode="dark"]) .store-filter-row button[style*="background:#1C1917"],
.buyer-storefront:has([data-color-mode="dark"]) .store-filter-row button[style*="background: #1C1917"] {
    background: var(--s-primary) !important;
    border-color: var(--s-primary) !important;
    color: #fff !important;
    box-shadow: 0 0 12px color-mix(in srgb, var(--s-primary) 40%, transparent) !important;
}
/* In Stock active */
.buyer-storefront:has([data-color-mode="dark"]) .store-filter-row button[style*="background:#16A34A"] {
    box-shadow: 0 0 12px rgba(22,163,74,.35) !important;
}

/* Sort dropdown — dark */
.buyer-storefront:has([data-color-mode="dark"]) .store-sort-select select {
    background: #1A1A1A !important;
    border-color: #2E2E2E !important;
    color: #C8C3BE !important;
}
.buyer-storefront:has([data-color-mode="dark"]) .store-sort-select span {
    color: #555 !important;
}

/* Product cards */
.buyer-storefront:has([data-color-mode="dark"]) .store-product-grid > div {
    background: #1A1A1A !important;
    border: 1px solid #2A2A2A !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.4) !important;
}
.buyer-storefront:has([data-color-mode="dark"]) .store-product-grid > div:hover {
    border-color: var(--s-primary) !important;
    box-shadow: 0 0 0 1px var(--s-primary),
                0 8px 32px rgba(0,0,0,.6) !important;
    transform: translateY(-4px) !important;
}
.buyer-storefront:has([data-color-mode="dark"]) .store-product-grid > div > div:first-child {
    background: #222 !important;
}

/* Inline style overrides: text colors inside cards */
.buyer-storefront:has([data-color-mode="dark"]) .store-product-grid [style*="color:#1C1917"] { color: #E0DBD6 !important; }
.buyer-storefront:has([data-color-mode="dark"]) .store-product-grid [style*="color: #1C1917"] { color: #E0DBD6 !important; }
.buyer-storefront:has([data-color-mode="dark"]) .store-product-grid [style*="color:#78716C"] { color: #7A7470 !important; }
.buyer-storefront:has([data-color-mode="dark"]) .store-product-grid [style*="color: #78716C"] { color: #7A7470 !important; }
/* Card info background */
.buyer-storefront:has([data-color-mode="dark"]) .store-product-grid [style*="background:white"],
.buyer-storefront:has([data-color-mode="dark"]) .store-product-grid [style*="background: white"] { background: #1A1A1A !important; }

/* Section heading */
.buyer-storefront:has([data-color-mode="dark"]) .store-section-label h2 { color: #E8E3DE !important; }
.buyer-storefront:has([data-color-mode="dark"]) .store-section-label p  { color: #555 !important; }

/* Mobile header — dark */
.buyer-storefront:has([data-color-mode="dark"]) .store-mobile-header {
    background: #111111 !important;
    border-bottom-color: #252525 !important;
}
.buyer-storefront:has([data-color-mode="dark"]) .store-mobile-header [style*="color:#1C1917"] { color: #E0DBD6 !important; }
.buyer-storefront:has([data-color-mode="dark"]) .store-mobile-header [style*="color:#78716C"] { color: #666 !important; }
/* Icon SVGs — hardcoded dark stroke invisible on dark bg */
.buyer-storefront:has([data-color-mode="dark"]) .store-mobile-header svg[stroke="#1C1917"] { stroke: #C8C3BE !important; }
.buyer-storefront:has([data-color-mode="dark"]) .store-mobile-header svg[fill="#1C1917"]  { fill: #C8C3BE !important; }

/* Mobile search bar — dark */
.buyer-storefront:has([data-color-mode="dark"]) .store-search-filter-row {
    background: #0C0C0C !important;
    border-bottom-color: #222 !important;
}
/* Search icon — make slightly brighter */
.buyer-storefront:has([data-color-mode="dark"]) .store-search-filter-row svg[stroke="#A8A29E"] { stroke: #6B6560 !important; }
/* Filter button — inactive state */
.buyer-storefront:has([data-color-mode="dark"]) .store-search-filter-row button[style*="background:var(--s-primary-light)"] {
    background: #1C1C1C !important;
    border-color: #333 !important;
    color: #999 !important;
}
/* Filter button — active state (keep primary) */
.buyer-storefront:has([data-color-mode="dark"]) .store-search-filter-row button[style*="background:var(--s-primary)"] {
    background: var(--s-primary) !important;
    border-color: var(--s-primary) !important;
    color: #fff !important;
}

/* Mobile category pills — dark */
.buyer-storefront:has([data-color-mode="dark"]) .store-mobile-pills {
    background: #111111 !important;
    border-bottom-color: #222 !important;
}
.buyer-storefront:has([data-color-mode="dark"]) .store-mobile-pills button[style*="background:var(--s-primary-light)"] {
    background: #1A1A1A !important;
    border-color: #2E2E2E !important;
    color: #888 !important;
}

/* Mobile body */
@media (max-width: 767px) {
    .buyer-storefront:has([data-color-mode="dark"]) {
        background: #0F0F0F !important;
    }
    .buyer-storefront:has([data-color-mode="dark"]) .store-product-grid > div {
        background: #1A1A1A !important;
        border-color: #2A2A2A !important;
    }
}

/* ── Cart Drawer / Checkout — dark ──────────────────────────────────
   The buyer checkout drawer is built almost entirely from raw inline
   hex styles rather than semantic classes, so — matching the pattern
   used everywhere else in this dark theme — it's targeted via #cart-drawer
   plus attribute-substring selectors on the known inline values. */

/* Drawer surface (was daisyUI bg-base-200, pinned white by the theme config).
   The non-!important `color` here is a catch-all inherited default for any element
   with no explicit color of its own (e.g. plain quantity counters) — anything with a
   more specific color rule (below, or its own inline style) still wins over it. */
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer {
    background: #0F0F0F !important;
    color: #E0DBD6;
}
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer .btn { color: #E0DBD6; }
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer .bg-base-100 { background: #1A1A1A !important; }
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer .bg-base-200 { background: #0F0F0F !important; }
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer .bg-base-300 { background: #1A1A1A !important; }
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer .border-base-300 { border-color: #2A2A2A !important; }
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer .text-base-content,
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer .text-base-content\/70,
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer .text-base-content\/60,
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer .text-base-content\/50,
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer .text-base-content\/40,
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer .text-base-content\/30 {
    color: #C8C3BE !important;
}

/* Cards built with Tailwind utility classes (bg-white/border-gray-200 — most of the
   Meat checkout's cards) rather than inline style */
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer .bg-white { background: #1A1A1A !important; }
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer .border-gray-200 { border-color: #2A2A2A !important; }
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer .text-gray-400 { color: #7A7470 !important; }

/* Inputs (Tailwind bg-gray-50 + daisyUI input-bordered) */
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer .bg-gray-50 {
    background: #1C1C1C !important;
    color: #E0DBD6 !important;
}
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer .input-bordered { border-color: #333 !important; }
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer ::placeholder { color: #6B6560 !important; }

/* Inline-style card/banner/sticky-bar backgrounds */
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="background:#fff"] { background: #1A1A1A !important; }

/* Inline-style borders */
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="border:1.5px solid #e2e8f0"],
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="border:1px solid #e2e8f0"],
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="border-top:1px solid #e2e8f0"] {
    border-color: #2A2A2A !important;
}

/* Inline text colors */
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="color:#1a2236"] { color: #E0DBD6 !important; }
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="color:#94a3b8"],
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="color:#64748b"] { color: #8A857F !important; }

/* Toggle/method pills (Delivery/Takeaway, Pay on Delivery/Pickup, UPI): the "selected"
   state uses the theme's light accent tint as a background with accent-colored text/icon
   on top — readable on white, but a pale patch on a near-black page. Match how "active"
   states are already handled elsewhere in this theme: solid accent background, white text. */
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="background:var(--s-primary-light)"] {
    background: var(--s-primary) !important;
}
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="background:var(--s-primary-light)"] * {
    color: #fff !important;
}
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="background:var(--s-primary-light)"] svg {
    stroke: #fff !important;
}

/* PhonePe pill's own brand-purple selected state (independent of seller's accent color) */
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="background:#f5f0ff"] { background: #1A1424 !important; }
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="color:#5f259f"] { color: #B794F6 !important; }

/* Success / WhatsApp (green) banners and cards — darken the light-green background
   and brighten the dark-green text that was tuned for a white background */
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="background:#f0fdf4"] {
    background: #0F1F14 !important;
    border-color: #1E4029 !important;
}
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="color:#16a34a"],
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="color:#15803d"],
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="color:#166534"] { color: #4ADE80 !important; }
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="border:1.5px solid #bbf7d0"],
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="border-top:1px solid #bbf7d0"] { border-color: #1E4029 !important; }

/* Error / out-of-range (red) banners — same treatment */
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="background:#fef2f2"] {
    background: #26100F !important;
    border-color: #4A1F1D !important;
}
.buyer-storefront:has([data-color-mode="dark"]) #cart-drawer [style*="color:#dc2626"] { color: #F87171 !important; }

/* ════════════════════════════════════════════════════════════════════
   LANDING PAGE THEME OVERRIDES (sh-home, sh-hero-mob, trust strip,
   category cards, featured products, about section)
   ════════════════════════════════════════════════════════════════════ */

/* ── LUXE: Landing page ──────────────────────────────────────────── */
.buyer-storefront:has([data-vstyle="luxe"]) .sh-home,
.buyer-storefront:has([data-vstyle="luxe"]) .sh-sec {
    background-color: #FAF8F4 !important;
    background-image: var(--s-bg-pattern, none) !important;
    background-size: var(--s-bg-pattern-size, auto) !important;
    background-blend-mode: var(--s-bg-pattern-blend, normal) !important;
}

/* Hero: always full-bleed, no rounded corners regardless of visual theme */

/* Trust strip cards */
.buyer-storefront:has([data-vstyle="luxe"]) .sh-trust-grid > div,
.buyer-storefront:has([data-vstyle="luxe"]) .sh-trust-grid > a {
    background: transparent !important;
    border-radius: 0px !important;
    border-color: #E2DDD6 !important;
}

/* Category card images */
.buyer-storefront:has([data-vstyle="luxe"]) .sh-cats-grid button > div { border-radius: 4px !important; }

/* Featured product image containers */
.buyer-storefront:has([data-vstyle="luxe"]) .sh-prods-row > div > div:first-child,
.buyer-storefront:has([data-vstyle="luxe"]) .sh-prods-row > button > div { border-radius: 4px !important; }

/* WhatsApp CTA banner */
.buyer-storefront:has([data-vstyle="luxe"]) .sh-sec a[href*="wa.me"] {
    border-radius: 4px !important;
    background: transparent !important;
}

/* Shop-all CTA button */
.buyer-storefront:has([data-vstyle="luxe"]) .sh-sec button[style*="border-radius:14px"] { border-radius: 2px !important; }

/* Desktop hero split image panel */
.buyer-storefront:has([data-vstyle="luxe"]) .sh-hero-split > div:last-child { border-radius: 4px !important; }

/* ── DARK: Landing page ──────────────────────────────────────────── */
.buyer-storefront:has([data-color-mode="dark"]) .sh-home,
.buyer-storefront:has([data-color-mode="dark"]) .sh-sec {
    background-color: #0F0F0F !important;
    background-image: var(--s-bg-pattern, none) !important;
    background-size: var(--s-bg-pattern-size, auto) !important;
    background-blend-mode: var(--s-bg-pattern-blend, normal) !important;
}

/* Trust strip cards */
.buyer-storefront:has([data-color-mode="dark"]) .sh-trust-grid > div,
.buyer-storefront:has([data-color-mode="dark"]) .sh-trust-grid > a {
    background: #1A1A1A !important;
    border-color: #2A2A2A !important;
}
.buyer-storefront:has([data-color-mode="dark"]) .sh-trust-grid [style*="color:#1a1a1a"] { color: #E0DBD6 !important; }
.buyer-storefront:has([data-color-mode="dark"]) .sh-trust-grid [style*="color:#8b8474"] { color: #666 !important; }
/* Trust icon backgrounds */
.buyer-storefront:has([data-color-mode="dark"]) .sh-trust-grid [style*="background:#eff6ff"] { background: #141c2a !important; }
.buyer-storefront:has([data-color-mode="dark"]) .sh-trust-grid [style*="background:#f0fdf4"] { background: #0d2018 !important; }
.buyer-storefront:has([data-color-mode="dark"]) .sh-trust-grid [style*="background:#fff7ed"] { background: #1e1208 !important; }
.buyer-storefront:has([data-color-mode="dark"]) .sh-trust-grid [style*="background:#dcfce7"] { background: #0d2018 !important; }

/* Section headings & eyebrow labels */
.buyer-storefront:has([data-color-mode="dark"]) .sh-sec h2 { color: #E8E3DE !important; }
.buyer-storefront:has([data-color-mode="dark"]) .sh-sec [style*="color:#1a1a1a"] { color: #E0DBD6 !important; }
.buyer-storefront:has([data-color-mode="dark"]) .sh-sec [style*="color:#5b574c"] { color: #666 !important; }
.buyer-storefront:has([data-color-mode="dark"]) .sh-sec [style*="color:#8b8474"] { color: #666 !important; }
.buyer-storefront:has([data-color-mode="dark"]) .sh-sec [style*="border-top:1px solid #ece7df"] { border-color: #2A2A2A !important; }

/* Featured product text */
.buyer-storefront:has([data-color-mode="dark"]) .sh-prods-row [style*="color:#1a1a1a"] { color: #E0DBD6 !important; }
.buyer-storefront:has([data-color-mode="dark"]) .sh-prods-row [style*="color:#a8a094"]  { color: #555 !important; }

/* WhatsApp CTA banner */
.buyer-storefront:has([data-color-mode="dark"]) .sh-sec a[href*="wa.me"] {
    background: #1A1A1A !important;
    border-color: #1e3a28 !important;
}
.buyer-storefront:has([data-color-mode="dark"]) .sh-sec a[href*="wa.me"] [style*="color:#1a1a1a"] { color: #E0DBD6 !important; }
.buyer-storefront:has([data-color-mode="dark"]) .sh-sec a[href*="wa.me"] [style*="color:#5b574c"] { color: #888 !important; }

/* Shop-all CTA button — keep brand color, just adjust glow */
.buyer-storefront:has([data-color-mode="dark"]) .sh-sec button[style*="background:var(--s-primary)"] { box-shadow: 0 6px 20px -6px rgba(0,0,0,.6) !important; }

/* Desktop hero split */
.buyer-storefront:has([data-color-mode="dark"]) .sh-hero-split > div:last-child { border-radius: 4px !important; }
.buyer-storefront:has([data-color-mode="dark"]) .sh-hero-split h1 { color: #E8E3DE !important; }
.buyer-storefront:has([data-color-mode="dark"]) .sh-hero-split p  { color: #777 !important; }

/* About section */
.buyer-storefront:has([data-color-mode="dark"]) .sh-about [style*="color:#1a1a1a"] { color: #E8E3DE !important; }
.buyer-storefront:has([data-color-mode="dark"]) .sh-about [style*="color:#5b574c"] { color: #777 !important; }
.buyer-storefront:has([data-color-mode="dark"]) .sh-about [style*="color:#78716C"] { color: #666 !important; }
.buyer-storefront:has([data-color-mode="dark"]) .sh-about [style*="border:1px solid"] { border-color: #2A2A2A !important; }
.buyer-storefront:has([data-color-mode="dark"]) .sh-about [style*="background:#fff"] { background: #1A1A1A !important; }
.buyer-storefront:has([data-color-mode="dark"]) .sh-about [style*="background:white"] { background: #1A1A1A !important; }

/* ══════════════════════════════════════════════════════════════════════
   RECT THEME  —  Classic rounded cards, neutral grey-white background
   ══════════════════════════════════════════════════════════════════════ */

body:has([data-vstyle="rect"]) { background: #EFEFEF !important; }

.buyer-storefront:has([data-vstyle="rect"]) .store-topbar {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
    box-shadow: none !important;
}
.buyer-storefront:has([data-vstyle="rect"]) .store-desktop-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
    box-shadow: none !important;
}
.buyer-storefront:has([data-vstyle="rect"]) .store-body,
.buyer-storefront:has([data-vstyle="rect"]) .store-main {
    background-color: #F3F4F6 !important;
    background-image: var(--s-bg-pattern, none) !important;
    background-size: var(--s-bg-pattern-size, auto) !important;
    background-blend-mode: var(--s-bg-pattern-blend, normal) !important;
}
.buyer-storefront:has([data-vstyle="rect"]) .store-sidebar {
    background: #FFFFFF !important;
    border-right: 1px solid #E5E7EB !important;
}
.buyer-storefront:has([data-vstyle="rect"]) .store-search-filter-row {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
}
.buyer-storefront:has([data-vstyle="rect"]) .store-mobile-pills {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
}

/* ── Product cards ── */
.buyer-storefront:has([data-vstyle="rect"]) .store-product-grid > div {
    border-radius: 6px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.05) !important;
    background: #FFFFFF !important;
}
.buyer-storefront:has([data-vstyle="rect"]) .store-product-grid > div > div:first-child {
    border-radius: 6px 6px 0 0 !important;
    background: #FFFFFF !important;
}
.buyer-storefront:has([data-vstyle="rect"]) .store-product-grid > div > div:first-child img {
    border-radius: 6px 6px 0 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
}
@media (min-width: 768px) {
    .buyer-storefront:has([data-vstyle="rect"]) .store-product-grid > div:hover {
        box-shadow: 0 8px 28px rgba(0,0,0,.13) !important;
        transform: translateY(-4px) !important;
    }
}
@media (max-width: 767px) {
    .buyer-storefront:has([data-vstyle="rect"]) .store-product-grid > div:active {
        transform: scale(.97) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
    }
}

/* ── Section label ── */
.buyer-storefront:has([data-vstyle="rect"]) .store-section-label h2 { color: #111827 !important; }
.buyer-storefront:has([data-vstyle="rect"]) .store-section-label p  { color: #6B7280 !important; }

/* ── Landing page ── */
.buyer-storefront:has([data-vstyle="rect"]) .sh-home,
.buyer-storefront:has([data-vstyle="rect"]) .sh-sec {
    background-color: #F3F4F6 !important;
    background-image: var(--s-bg-pattern, none) !important;
    background-size: var(--s-bg-pattern-size, auto) !important;
    background-blend-mode: var(--s-bg-pattern-blend, normal) !important;
}
.buyer-storefront:has([data-vstyle="rect"]) .sh-prods-row > div > div:first-child,
.buyer-storefront:has([data-vstyle="rect"]) .sh-prods-row > button > div { border-radius: 8px !important; }

/* ══════════════════════════════════════════════════════════════════════
   ELEGANT THEME  —  Ivory/champagne background, warm white cards
   Best for: Jewellery, Fashion
   ══════════════════════════════════════════════════════════════════════ */

body:has([data-vstyle="elegant"]) { background: #F5F0E8 !important; }

.buyer-storefront:has([data-vstyle="elegant"]) .store-topbar {
    background: #FFFDF9 !important;
    border-bottom: 1px solid #E8DDD0 !important;
    box-shadow: none !important;
}
.buyer-storefront:has([data-vstyle="elegant"]) .store-desktop-header {
    background: #FFFDF9 !important;
    border-bottom: 1px solid #E8DDD0 !important;
    box-shadow: none !important;
}
.buyer-storefront:has([data-vstyle="elegant"]) .store-body,
.buyer-storefront:has([data-vstyle="elegant"]) .store-main {
    background-color: #F5F0E8 !important;
    background-image: var(--s-bg-pattern, none) !important;
    background-size: var(--s-bg-pattern-size, auto) !important;
    background-blend-mode: var(--s-bg-pattern-blend, normal) !important;
}
.buyer-storefront:has([data-vstyle="elegant"]) .store-sidebar {
    background: #FFFDF9 !important;
    border-right: 1px solid #E8DDD0 !important;
}
.buyer-storefront:has([data-vstyle="elegant"]) .store-search-filter-row {
    background: #FFFDF9 !important;
    border-bottom: 1px solid #E8DDD0 !important;
}
.buyer-storefront:has([data-vstyle="elegant"]) .store-mobile-pills {
    background: #FFFDF9 !important;
    border-bottom: 1px solid #E8DDD0 !important;
}

/* ── Product cards ── */
.buyer-storefront:has([data-vstyle="elegant"]) .store-product-grid > div {
    border-radius: 12px !important;
    border: 1px solid #EDE5D8 !important;
    box-shadow: 0 2px 10px rgba(120,80,30,.07), 0 4px 20px rgba(120,80,30,.04) !important;
    background: #FFFDF9 !important;
}
.buyer-storefront:has([data-vstyle="elegant"]) .store-product-grid > div > div:first-child {
    border-radius: 11px 11px 0 0 !important;
    background: #FFFDF9 !important;
}
.buyer-storefront:has([data-vstyle="elegant"]) .store-product-grid > div > div:first-child img {
    border-radius: 11px 11px 0 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
}
@media (min-width: 768px) {
    .buyer-storefront:has([data-vstyle="elegant"]) .store-product-grid > div:hover {
        box-shadow: 0 8px 28px rgba(120,80,30,.14) !important;
        transform: translateY(-3px) !important;
    }
}
@media (max-width: 767px) {
    .buyer-storefront:has([data-vstyle="elegant"]) .store-product-grid > div:active {
        transform: scale(.97) !important;
    }
}

/* ── Accent stripe — thin gold-warm line ── */
.buyer-storefront:has([data-vstyle="elegant"]) .store-theme-stripe { height: 2px !important; }

/* ── Section label ── */
.buyer-storefront:has([data-vstyle="elegant"]) .store-section-label h2 { color: #2D1E0F !important; }
.buyer-storefront:has([data-vstyle="elegant"]) .store-section-label p  { color: #8C7A68 !important; }

/* ── Landing page ── */
.buyer-storefront:has([data-vstyle="elegant"]) .sh-home,
.buyer-storefront:has([data-vstyle="elegant"]) .sh-sec {
    background-color: #F5F0E8 !important;
    background-image: var(--s-bg-pattern, none) !important;
    background-size: var(--s-bg-pattern-size, auto) !important;
    background-blend-mode: var(--s-bg-pattern-blend, normal) !important;
}
.buyer-storefront:has([data-vstyle="elegant"]) .sh-prods-row > div > div:first-child,
.buyer-storefront:has([data-vstyle="elegant"]) .sh-prods-row > button > div { border-radius: 10px !important; }

/* PWA hint popup — center on mobile */
@media (max-width: 640px) {
    .pwa-hint-popup {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
    }
    .pwa-hint-arrow { display: none !important; }
}
/* Modern storefront filters: product-first toolbar on desktop. */
.store-desktop-filterbar { display:none; }
.store-heading-filter-actions { display:none; }
@media (min-width:768px) {
  .store-desktop-filterbar { display:none !important; }
  .store-section-label { position:relative; padding-right:270px !important; }
  .store-heading-filter-actions { position:absolute; top:0; right:2px; display:flex; align-items:center; gap:10px; }
  .store-heading-filter-button,.store-heading-filter-actions select { height:42px; border:1px solid var(--s-border); border-radius:12px; background:var(--s-surface); color:var(--s-ink); padding:0 16px; font:600 13px/1 inherit; cursor:pointer; }
  .store-heading-filter-button b { display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin-left:7px;padding:0 6px;border-radius:999px;background:var(--s-primary);color:#fff;font-size:11px; }
  .store-heading-filter-actions select { min-width:150px; padding-right:32px; }
  .store-heading-active-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
  .store-heading-active-filters button { border:0; border-radius:9px; background:var(--s-primary-light); color:var(--s-text-accent); padding:8px 10px; font:700 12px/1 inherit; cursor:pointer; }
  .store-heading-active-filters button.clear { background:transparent; color:var(--s-primary); text-decoration:underline; text-underline-offset:3px; }
  /* Side drawer: full height, the options body scrolls (inline flex column), footer CTA pinned at the bottom. */
  .store-filter-sheet { top:0 !important; right:0 !important; bottom:0 !important; left:auto !important; width:min(440px,92vw) !important; max-height:none !important; overflow:hidden !important; border-radius:0 !important; padding:22px 0 0 !important; box-shadow:-16px 0 48px rgba(28,25,23,.18) !important; --sfs-x: 24px; }
  .store-filter-sheet > div:first-child { display:none; }
  .store-body[data-vstyle] > .store-sidebar { display:none !important; }
  .store-desktop-filterbar { display:none !important; }
  .store-desktop-filterbar:has(.store-filter-dismiss) { z-index:100; }
  .store-desktop-filterbar__controls { display:flex; align-items:center; gap:10px; padding:6px 0; border:0; }
  .store-filter-trigger { min-height:42px; padding:0 16px; border:1px solid var(--s-border); border-radius:12px; background:var(--s-surface); color:var(--s-ink); font:600 13px/1 inherit; cursor:pointer; display:inline-flex; align-items:center; gap:10px; }
  .store-filter-trigger:hover,.store-filter-trigger.is-active { border-color:var(--s-primary); color:var(--s-primary); background:var(--s-primary-light); }
  .store-filter-trigger--primary b { display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin-left:2px;padding:0 6px;border-radius:999px;background:var(--s-primary);color:#fff;font-size:11px; }
  .store-filter-clear { border:0; background:none; color:var(--s-primary); font:700 12px/1 inherit; cursor:pointer; padding:12px; }
  .store-desktop-filterbar__meta { min-height:52px; flex:1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:6px 0 6px 12px; }
  .store-desktop-filterbar__meta label { display:flex; align-items:center; gap:8px; white-space:nowrap; color:var(--s-ink-muted); font-size:12px; }
  .store-desktop-filterbar__meta select { height:36px; border:1px solid var(--s-border); border-radius:9px; background:var(--s-surface); color:var(--s-ink); padding:0 30px 0 10px; font:600 12px inherit; }
  .store-active-filters { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:var(--s-ink-muted); font-size:12px; }
  .store-active-filters button { border:0; border-radius:9px; background:var(--s-primary-light); color:var(--s-text-accent); padding:8px 10px; font:700 12px/1 inherit; cursor:pointer; }
  .store-active-filters button span { margin-left:6px; font-size:16px; vertical-align:-1px; }
  .store-active-filters .store-filter-clear { background:transparent; color:var(--s-primary); padding:8px 4px; text-decoration:underline; text-underline-offset:3px; }
  .store-filter-popover { position:absolute; z-index:35; top:62px; left:16px; width:min(520px,calc(100% - 32px)); padding:14px; border:1px solid var(--s-border); border-radius:14px; background:var(--s-surface); box-shadow:0 18px 48px rgba(28,25,23,.17); display:flex; flex-wrap:wrap; gap:8px; }
  .store-filter-dismiss { position:fixed; inset:0; z-index:34; width:100vw; height:100vh; border:0; padding:0; background:transparent; cursor:default; }
  .store-popover-option,.store-filter-option-grid button { min-height:40px; border:1px solid var(--s-border); border-radius:10px; background:var(--s-bg); color:var(--s-ink); padding:8px 12px; font:600 12px/1.25 inherit; cursor:pointer; }
  .store-popover-option.is-selected,.store-filter-option-grid button.is-selected { background:var(--s-primary); border-color:var(--s-primary); color:#fff; }
  .store-filter-option-grid { width:100%; display:grid; grid-template-columns:repeat(5,minmax(72px,1fr)); gap:8px; }
  .store-filter-option-grid--colors { grid-template-columns:repeat(4,minmax(100px,1fr)); }
  .store-filter-option-grid--colors button { display:flex; align-items:center; gap:7px; }
  .store-filter-option-grid--colors button span { width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.14); flex:0 0 auto; }
  .store-filter-option-grid button:disabled { opacity:.35; cursor:not-allowed; text-decoration:line-through; }
}

/* iOS Safari zooms into any focused field whose text is under 16px and never zooms back out (search bars at
   13–15px, review form, etc.). Phones only; !important because many fields set their font-size inline. */
@media (max-width: 767px) {
  .buyer-storefront :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]):not([type=color]):not([type=file]), textarea, select) { font-size: max(16px, 1em) !important; }
}

/* The WhatsApp float sits above every sheet (z 9990) — hide it while Filters is open so it can't cover "Show results". */
body:has(.store-filter-sheet) .waf-btn { opacity: 0 !important; pointer-events: none !important; }

/* Template 1 editorial home. Keep seller color/font tokens and existing shopping controls. */
.store-quick-add-sheet { position: fixed; z-index: 1801; left: 0; right: 0; bottom: 0; max-height: 90vh; overflow-y: auto; background: var(--s-surface); border-radius: 20px 20px 0 0; padding: 0 0 calc(env(safe-area-inset-bottom) + 16px); }
.store-quick-add-product { display: flex; align-items: center; gap: 12px; padding: 8px 16px 12px; border-bottom: .5px solid var(--s-border); }
.store-quick-add-content { padding: 14px 16px 8px; }
.t1-quick-add-close { display: none; }
@media (min-width: 1024px) {
  .store-quick-add-sheet.t1-quick-add-sheet { top: 0; right: 0; bottom: 0; left: auto; width: min(480px, 92vw); height: 100dvh; max-height: none; box-sizing: border-box; border-radius: 0; border-left: 1px solid var(--s-border); box-shadow: -24px 0 60px -24px rgba(0,0,0,.35); padding: 0; overscroll-behavior: contain; }
  .t1-quick-add-sheet .store-quick-add-handle { display: none !important; }
  .t1-quick-add-sheet .store-quick-add-product { padding: 28px 56px 22px 24px; gap: 16px; }
  .t1-quick-add-sheet .store-quick-add-product img { width: 88px !important; height: 88px !important; }
  .t1-quick-add-sheet .store-quick-add-content { padding: 24px; }
  .t1-quick-add-sheet .store-quick-add-actions { position: sticky; bottom: 0; z-index: 1; padding: 14px 0 18px; background: var(--s-surface); }
  .t1-quick-add-close { position: absolute; top: 16px; right: 16px; z-index: 3; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--s-border); border-radius: 50%; background: var(--s-surface); color: var(--s-ink); font: 22px/1 var(--s-body-font, sans-serif); cursor: pointer; }
  .t1-quick-add-close:hover { border-color: var(--s-text-accent); color: var(--s-text-accent); }
}
.t1-category-gallery { background: var(--s-bg); padding: clamp(30px, 3vw, 48px) 32px; }
.t1-category-gallery-inner { max-width: 1280px; margin: 0 auto; }
.t1-category-gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 17px; }
.t1-category-gallery-kicker { display: block; color: var(--s-text-accent); font: 700 11px var(--s-body-font, sans-serif); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 12px; }
.t1-category-gallery-heading h2 { color: var(--s-text-accent); font: 400 clamp(30px, 3vw, 42px)/1.08 var(--s-heading-font, Georgia, serif); letter-spacing: -.025em; margin: 0; }
.t1-category-gallery-actions { display: flex; align-items: center; gap: 12px; }
.t1-category-gallery-nav { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--s-border); border-radius: 50%; background: transparent; color: var(--s-text-accent); font: 400 20px var(--s-body-font, sans-serif); cursor: pointer; }
.t1-category-gallery-nav:hover { border-color: var(--s-text-accent); background: var(--s-surface); }
.t1-category-gallery-actions .t1-category-gallery-all { margin-left: 4px; }
.t1-category-gallery-all { border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--s-text-accent); font: 600 14px var(--s-body-font, sans-serif); padding: 0 0 5px; white-space: nowrap; cursor: pointer; }
.t1-category-gallery-all span { margin-left: 6px; }
.t1-category-gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.t1-category-gallery-grid.has-more { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.t1-category-gallery-grid.has-more::-webkit-scrollbar { display: none; }
.t1-category-gallery-grid.has-more > * { flex: 0 0 23%; min-width: 0; }
.t1-category-gallery-grid.has-more > * { scroll-snap-align: start; }
.t1-category-gallery-card { position: relative; display: block; width: 100%; aspect-ratio: 5/6; overflow: hidden; border: 0; border-radius: var(--s-card-radius, 8px); padding: 0; background: var(--s-primary-light); text-align: left; color: #fff; cursor: pointer; isolation: isolate; }
.t1-category-gallery-card > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 20%; transition: transform .5s ease; }
.t1-category-gallery-card:hover > img { transform: scale(1.045); }
.t1-category-gallery-shade { position: absolute; inset: 35% 0 0; z-index: 1; background: linear-gradient(transparent, rgba(20, 12, 10, .82)); pointer-events: none; }
.t1-category-gallery-copy { position: absolute; z-index: 2; left: clamp(12px, 1.2vw, 18px); right: 54px; bottom: clamp(13px, 1.2vw, 18px); display: flex; flex-direction: column; align-items: start; gap: 4px; }
.t1-category-gallery-count { font: 700 9px var(--s-body-font, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.t1-category-gallery-copy strong { font: 400 clamp(18px, 1.6vw, 25px)/1.05 var(--s-heading-font, Georgia, serif); overflow-wrap: anywhere; }
.t1-category-gallery-cta { font: 500 10px var(--s-body-font, sans-serif); opacity: .9; }
.t1-category-gallery-arrow { position: absolute; z-index: 2; right: 14px; bottom: 15px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--s-text-accent); font: 500 18px var(--s-body-font, sans-serif); transition: transform .2s ease; }
.t1-category-gallery-card:hover .t1-category-gallery-arrow { transform: translateX(3px); }
.t1-category-gallery-card.no-photo { color: var(--s-ink); border: 1px solid var(--s-border); }
.t1-category-gallery-card.no-photo .t1-category-gallery-shade { display: none; }
.t1-category-gallery-card.no-photo .t1-category-gallery-cta { color: var(--s-text-accent); }
.t1-category-gallery-card.no-photo .t1-category-gallery-arrow { background: var(--s-primary); color: #fff; }
.t1-category-gallery-hint { color: var(--s-text-accent); font: 600 12px var(--s-body-font, sans-serif); margin: 10px 0 0; text-align: right; }
/* "Shop all" end-cap: only rendered where the grid would otherwise leave an empty slot; brand colour so it reads as a CTA. */
.t1-category-gallery-card.t1-category-gallery-shopall { display: none; background: var(--s-band, var(--s-primary)); color: #fff; }
.t1-category-gallery-shopall .t1-category-gallery-arrow { background: #fff; color: var(--s-band, var(--s-primary)); }
@media (min-width: 761px) { .t1-category-gallery-card.t1-category-gallery-shopall.on-desktop { display: block; } }
@media (max-width: 760px) { .t1-category-gallery-card.t1-category-gallery-shopall.on-mobile { display: block; } }
.t1-category-gallery button:focus-visible { outline: 3px solid var(--s-text-accent); outline-offset: 3px; }
.t1-new-arrivals { padding: 42px 32px 54px; background: var(--s-surface); }
.t1-new-arrivals-inner { max-width: 1280px; margin: 0 auto; }
.t1-new-arrivals-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 24px; }
.t1-new-arrivals-heading h2 { color: var(--s-text-accent); font: 400 clamp(32px, 3vw, 46px)/1.1 var(--s-heading-font, Georgia, serif); margin: 0; }
.t1-new-arrivals-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) {
  .t1-category-gallery { padding: 32px 16px 40px; }
  .t1-category-gallery-heading { align-items: end; gap: 12px; margin-bottom: 20px; }
  .t1-category-gallery-heading h2 { font-size: clamp(30px, 8vw, 42px); }
  .t1-category-gallery-all { font-size: 12px; }
  .t1-category-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .t1-category-gallery-grid.has-more { gap: 10px; }
  .t1-category-gallery-grid.has-more > * { flex-basis: 46%; }
  .t1-category-gallery-grid.has-more.mobile-grid { display: grid; overflow: visible; scroll-snap-type: none; }
  .t1-category-gallery-grid.has-more.mobile-grid > * { min-width: 0; }
  .t1-category-gallery-grid.has-more.mobile-grid + .t1-category-gallery-hint { display: none; }
  .t1-category-gallery-card { aspect-ratio: 4/5; }
  .t1-category-gallery-copy { left: 10px; right: 40px; bottom: 12px; gap: 4px; }
  .t1-category-gallery-copy strong { font-size: clamp(16px, 4vw, 22px); }
  .t1-category-gallery-count { font-size: 9px; }
  .t1-category-gallery-cta { font-size: 9px; }
  .t1-category-gallery-arrow { right: 9px; bottom: 11px; width: 27px; height: 27px; font-size: 15px; }
  .t1-category-gallery-hint { text-align: left; }
  .t1-new-arrivals { padding: 36px 16px 42px; }
  .t1-new-arrivals-heading { margin-bottom: 19px; }
  .t1-new-arrivals-heading h2 { font-size: 32px; }
  .t1-new-arrivals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
}
@media (max-width: 1023px) {
  .t1-category-gallery-nav { display: none; }
}
@media (min-width: 1024px) {
  .t1-category-gallery-hint { display: none; }
}
/* 1280px content + 2×32px padding, so row edges line up with the gallery, Featured and Just added above/below. */
.t1-collection-rows { max-width: 1344px; margin: 0 auto; padding: 34px 32px 56px; }
.t1-collection-row + .t1-collection-row { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--s-border); }
.t1-collection-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }
.t1-collection-top > span { color: var(--s-text-accent); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.t1-collection-top button { flex-shrink: 0; white-space: nowrap; border: 0; border-bottom: 1px solid var(--s-text-accent); background: none; color: var(--s-text-accent); font: 600 13px var(--s-body-font, sans-serif); padding: 0 0 4px; cursor: pointer; }
.t1-collection-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 20px; }
.t1-collection-intro { position: relative; aspect-ratio: 3/4; width: 100%; overflow: hidden; padding: 0; border: 0; border-radius: var(--s-card-radius, 0); text-align: left; background: var(--s-primary-light); color: var(--s-ink); font-family: inherit; cursor: pointer; }
.t1-collection-intro > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.t1-collection-intro:not(.no-photo)::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent, rgba(12, 12, 12, .75)); }
.t1-collection-intro-copy { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 24px; color: #fff; }
.t1-collection-intro-copy small { display: block; margin-bottom: 12px; font: 700 10px var(--s-body-font, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.t1-collection-intro-copy h2 { font: 400 clamp(24px, 2vw, 34px)/1.15 var(--s-heading-font, Georgia, serif); margin: 0 0 15px; overflow-wrap: anywhere; }
.t1-collection-intro-copy > span { font-size: 13px; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.t1-collection-intro.no-photo { border: 1px solid var(--s-border); }
.t1-collection-intro.no-photo .t1-collection-intro-copy { top: 25px; bottom: auto; color: var(--s-ink); }
.t1-collection-intro.no-photo .t1-collection-intro-copy small,
.t1-collection-intro.no-photo .t1-collection-intro-copy > span { color: var(--s-text-accent); }
.t1-collection-product { position: relative; min-width: 0; }
.t1-collection-product-photo { display: block; width: 100%; aspect-ratio: 3/4; border: 0; border-radius: var(--s-card-radius, 0); padding: 0; background: var(--s-primary-light); cursor: pointer; overflow: hidden; }
.t1-collection-product-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.t1-collection-photo-fallback { display: grid; place-items: center; height: 100%; font: 40px var(--s-heading-font, Georgia, serif); }
.t1-collection-fav { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--s-ink); font-size: 23px; cursor: pointer; }
.t1-collection-fav.is-active { color: var(--s-primary); }
.t1-collection-product-name { display: block; width: 100%; margin: 12px 0 4px; border: 0; padding: 0; background: none; color: var(--s-ink); font: 600 14px/1.4 var(--s-body-font, sans-serif); text-align: left; cursor: pointer; }
.t1-collection-price { font: 700 14px var(--s-body-font, sans-serif); color: var(--s-ink); }
.t1-collection-row button:focus-visible { outline: 2px solid var(--s-text-accent); outline-offset: 3px; }
/* Under-filled category (< 4 products): a plain text intro tile spans the empty columns (1 product → 3, 2 → 2, 3 → 1) at
   the product photo height — one column is (grid width - 3 gaps) / 4 and photos are 3:4, so height = (100cqw - 60px) / 3. */
.t1-collection-grid.is-compact { container-type: inline-size; }
.t1-collection-grid.is-compact .t1-collection-intro { grid-column: span var(--t1-span, 1); aspect-ratio: auto; height: calc((100cqw - 60px) / 3); }
.t1-collection-grid.is-compact .t1-collection-intro.no-photo .t1-collection-intro-copy { top: 50%; bottom: auto; left: 40px; right: 40px; transform: translateY(-50%); }
/* Wide tile: copy left, in-stock facts (price, options, colours) right, so it reads as a collection card, not empty colour. */
.t1-collection-facts { display: none; }
@media (min-width: 761px) {
  .t1-collection-grid.is-compact .t1-collection-intro.is-wide { display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); padding: 0 clamp(32px, 4vw, 64px);
    background: linear-gradient(115deg, var(--s-primary-light) 40%, color-mix(in srgb, var(--s-primary-light) 84%, var(--s-primary)) 100%); }
  .t1-collection-grid.is-compact .t1-collection-intro.is-wide .t1-collection-intro-copy { position: static; transform: none; flex: 1 1 55%; min-width: 0; }
  .t1-collection-intro.is-wide .t1-collection-intro-copy h2 { font-size: clamp(30px, 2.8vw, 46px); margin-bottom: 20px; text-wrap: balance; }
  .t1-collection-intro.is-wide .t1-nowrap { white-space: nowrap; }
  .t1-collection-facts { display: flex; flex-direction: column; gap: 22px; flex: 1 1 45%; max-width: 340px; min-width: 0; padding-left: clamp(24px, 3vw, 44px); border-left: 1px solid var(--s-border); }
  .t1-collection-fact { display: flex; flex-direction: column; gap: 9px; }
  .t1-collection-fact-label { color: var(--s-text-accent); font: 700 10px var(--s-body-font, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
  .t1-collection-fact-price { color: var(--s-ink); font: 400 clamp(26px, 2.2vw, 34px)/1 var(--s-heading-font, Georgia, serif); }
  .t1-collection-fact-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .t1-collection-fact-chips > span { min-width: 34px; padding: 6px 9px; border: 1px solid var(--s-border); border-radius: var(--s-chip-radius, 6px); background: var(--s-surface); color: var(--s-ink); font: 600 12px/1 var(--s-body-font, sans-serif); text-align: center; }
  .t1-collection-fact-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .t1-collection-fact-swatches > i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--s-surface); box-shadow: 0 0 0 1px var(--s-border); }
  .t1-collection-fact-names { margin-left: 4px; color: var(--s-ink-muted); font: 500 12px var(--s-body-font, sans-serif); }
}
@media (max-width: 760px) {
  .t1-collection-rows { padding: 26px 16px 42px; }
  .t1-collection-row + .t1-collection-row { margin-top: 32px; padding-top: 28px; }
  /* Phones: rows with 2+ products scroll sideways at 2-up tile size (~2.2 visible so the next tile peeks in as a
     swipe hint); single-product categories and Top picks stay a static 2-up grid — for a single product that is the
     plain intro tile beside it, so the row doesn't sit half empty. */
  .t1-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .t1-collection-grid:not(.is-few):not(.t1-picks-grid) { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .t1-collection-grid:not(.is-few):not(.t1-picks-grid)::-webkit-scrollbar { display: none; }
  .t1-collection-grid:not(.is-few):not(.t1-picks-grid) > * { flex: 0 0 calc((100% - 24px) / 2.2); scroll-snap-align: start; }
  /* Small-category intro in the swipe row: undo the desktop column-span sizing and match the product tiles. */
  .t1-collection-grid.is-compact { container-type: normal; }
  .t1-collection-grid.is-compact .t1-collection-intro { grid-column: auto; height: auto; aspect-ratio: 3/4; }
  .t1-collection-grid.is-compact .t1-collection-intro.no-photo .t1-collection-intro-copy { top: 16px; bottom: auto; left: 14px; right: 14px; transform: none; }
  .t1-collection-intro-copy { left: 14px; right: 14px; bottom: 16px; }
  .t1-collection-intro-copy small { margin-bottom: 8px; }
  .t1-collection-intro-copy h2 { font-size: 21px; margin-bottom: 10px; }
  .t1-collection-intro-copy > span { font-size: 12px; }
  .t1-collection-product-name { font-size: 13px; }
}
.t1-quick-cats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 28px; }
.t1-quick-cats > span { color: var(--s-text-accent); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-right: 8px; }
.t1-quick-cats button { border: 1px solid var(--s-border); background: var(--s-surface); color: var(--s-ink); border-radius: 999px; padding: 10px 16px; font: 600 13px var(--s-body-font, sans-serif); cursor: pointer; text-align: left; }
.t1-quick-cats button:hover { border-color: var(--s-text-accent); color: var(--s-text-accent); }
.t1-quick-cats button:focus-visible { outline: 2px solid var(--s-text-accent); outline-offset: 3px; }
.t1-quick-cats button span { color: var(--s-text-accent); margin-left: 8px; }
@media (max-width: 600px) { .t1-quick-cats { gap: 8px; margin-bottom: 22px; } .t1-quick-cats > span { width: 100%; } .t1-quick-cats button { max-width: 100%; white-space: normal; line-height: 1.35; } }
.store-desktop[data-template="1"] .sd-nav { padding: 18px max(24px, calc((100vw - 1280px)/2)); }
.store-desktop[data-template="1"] .sd-brand-name { font-size: 24px; }
.store-desktop[data-template="1"] .sd-brand-tag { letter-spacing: .16em; font-size: 10px; }
.store-desktop[data-template="1"] .sd-nav-links a { font-size: 12px; letter-spacing: .06em; }
.store-desktop[data-template="1"] .sd-hero { width: calc(100% - 64px); max-width: 1280px; margin: 32px auto 0; grid-template-columns: 1fr 1fr; height: auto; min-height: 420px; max-height: none; background: var(--s-primary-light); border-radius: var(--s-card-radius, 18px); overflow: hidden; }
.store-desktop[data-template="1"] .sd-hero-content { grid-column: 1; grid-row: 1; padding: 42px; max-width: none; }
.store-desktop[data-template="1"] .sd-hero-media { grid-column: 2; grid-row: 1; min-height: 420px; box-shadow: none; background: var(--s-surface); }
.store-desktop[data-template="1"] .sd-hero-headline { font-size: clamp(36px, 3.5vw, 54px); line-height: 1.08; letter-spacing: -.025em; }
.store-desktop[data-template="1"] .sd-hero-lede { font-size: 14px; line-height: 1.8; max-width: 380px; }
.store-desktop[data-template="1"] .sd-hero-stats { display: none; }
.store-desktop[data-template="1"] .sd-hero-slide { background: var(--s-surface) !important; }
.store-desktop[data-template="1"] .sd-hero-slide img[aria-hidden="true"] { display: none; }
/* T1 hides the blurred backdrop above, so a contain-fit hero photo left bare surface-colour bands
   around it. Fill the panel instead (the inline style sets contain, hence !important). */
.store-desktop[data-template="1"] .sd-hero-slide img:not([aria-hidden="true"]) { object-fit: cover !important; object-position: center !important; }
.store-desktop[data-template="1"] .sd-trust { max-width: 1280px; margin: 0 auto; background: transparent; color: var(--s-ink); padding: 22px 0; border-bottom: 1px solid var(--s-border); }
.store-desktop[data-template="1"] .sd-trust-item { border-color: var(--s-border); }
.store-desktop[data-template="1"] .sd-trust-item span { color: var(--s-ink-muted); }
.store-desktop[data-template="1"] .sd-trust-item svg { color: var(--s-text-accent); }
.store-desktop[data-template="1"] .sd-section { padding: 38px 32px 16px; }
.store-desktop[data-template="1"] .sd-section-link { text-transform: none; letter-spacing: 0; font-size: 12px; }
.store-desktop[data-template="1"] .sd-cats-grid { gap: 16px; }
.store-desktop[data-template="1"] .sd-cats-grid--sparse { grid-template-columns: repeat(var(--cols), minmax(0, calc((1280px - 32px) / 3))) !important; justify-content: center; gap: 16px; }
.store-desktop[data-template="1"] .sd-cat-card,
.store-desktop[data-template="1"] .sd-cats-grid--sparse .sd-cat-card { aspect-ratio: auto !important; height: 132px; min-height: 0; background: var(--s-primary-light); border: 1px solid var(--s-border); box-shadow: none; display: flex; align-items: center; }
.store-desktop[data-template="1"] .sd-cat-overlay,
.store-desktop[data-template="1"] .sd-cat-empty,
.store-desktop[data-template="1"] .sd-cat-eyebrow { display: none; }
.store-desktop[data-template="1"] .sd-cat-card > img { display: block; inset: 10px 12px auto auto; width: 108px; height: 108px; border-radius: 10px; object-fit: cover; object-position: top center; }
.store-desktop[data-template="1"] .sd-cat-card:has(> img) .sd-cat-content { padding-right: 132px; }
.store-desktop[data-template="1"] .sd-cat-content { position: static; padding: 22px; color: var(--s-ink); }
.store-desktop[data-template="1"] .sd-cat-content h3 { color: var(--s-ink); font-size: 23px; line-height: 1.25; text-shadow: none; overflow-wrap: anywhere; }
.store-desktop[data-template="1"] .sd-cat-cta { color: var(--s-text-accent); font-size: 11px; letter-spacing: .03em; }
.store-desktop[data-template="1"] .sd-product { background: transparent; border: 0; box-shadow: none; }
.store-desktop[data-template="1"] .sd-section-head h2,
.store-desktop[data-template="1"] .sd-story h2 { color: var(--s-text-accent); }
.sh-home[data-template="1"] .sh-sec-hd h2,
.sh-home[data-template="1"] #sh-story p:first-of-type { color: var(--s-text-accent) !important; }
.store-desktop[data-template="1"] .sd-featured-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.store-desktop[data-template="1"] .sd-product-img { aspect-ratio: 4/5; background: var(--s-surface); }
/* T1 corners all follow the seller's Appearance Studio → Corners setting (--s-card-radius), so every card on the
   home page — hero, category tiles, Featured, category rows, Just added — shares one shape. */
.store-desktop[data-template="1"] .sd-product-img { border-radius: var(--s-card-radius, 12px); overflow: hidden; }
.sh-home[data-template="1"] .sh-prods-row .sh-card-tap > div:first-child,
.sh-home[data-template="1"] .sh-prods-row > button > div { border-radius: var(--s-card-radius, 12px) !important; }
/* Fill the card frame so every card lines up. Contain-fit left uneven white bands whenever a photo's
   ratio differed from 4:5 (square uploads, photos with baked-in white padding). Electronics keeps
   contain: plain product shots on white read better uncropped. */
.store-desktop[data-template="1"] .sd-product-img img { object-fit: cover; object-position: center 20%; } /* bias crops toward face/collar, not the middle */
.store-desktop[data-template="1"][data-store-type="Electronics"] .sd-product-img img { object-fit: contain; }
.store-desktop[data-template="1"] .sd-product-body { border: 0; padding: 14px 0; }
.store-desktop[data-template="1"] .sd-product-name { font-family: var(--s-body-font); font-size: 14px; font-weight: 500; line-height: 1.45; }
.store-desktop[data-template="1"] .sd-product-cat { font-size: 10px; letter-spacing: .08em; }
.store-desktop[data-template="1"] .sd-story { background: transparent; padding: 40px 32px; }
.store-desktop[data-template="1"] :is(a,button):focus-visible { outline: 2px solid var(--s-text-accent); outline-offset: 4px; }
.sh-home[data-template="1"] .sh-hero-mob-text,
.sh-home[data-template="1"] .sh-hero-mob-overlay,
.sh-home[data-template="1"] .sh-hero-mob img[aria-hidden="true"] { display: none; }
.sh-home[data-template="1"] .sh-hero { margin: 16px; padding: 0; background: var(--s-primary-light); }
.sh-home[data-template="1"] .sh-hero-mob { aspect-ratio: 4/3; max-height: 380px; background: var(--s-surface); }
.sh-home[data-template="1"] .sh-hero-mob img:not([aria-hidden="true"]) { object-fit: cover !important; object-position: center 15% !important; } /* phone banners are often portrait: keep heads in frame */
.t1-editorial-copy { padding: 26px 22px; color: var(--s-ink); }
.t1-editorial-copy small { color: var(--s-text-accent); letter-spacing: .12em; text-transform: uppercase; font-size: 10px; }
.t1-editorial-copy h1 { font: 400 34px/1.1 var(--s-heading-font); letter-spacing: -.02em; margin: 16px 0; overflow-wrap: anywhere; }
.t1-editorial-copy p { font-size: 14px; line-height: 1.7; color: var(--s-ink-muted); }
.t1-editorial-copy button { background: var(--s-primary); color: white; border: 0; border-radius: var(--s-btn-radius); padding: 14px 20px; font: inherit; cursor: pointer; }
.sh-home[data-template="1"] .sh-cat-tile > div { aspect-ratio: auto !important; min-height: 100px; background: var(--s-primary-light) !important; border: 1px solid var(--s-border); border-radius: var(--s-card-radius) !important; }
.sh-home[data-template="1"] .sh-cat-tile > div > div:first-of-type { display: none; }
.sh-home[data-template="1"] .sh-cat-tile > div > img { display: block; inset: 10px 10px auto auto !important; width: 78px !important; height: 78px !important; border-radius: 9px; object-fit: cover; object-position: top center; }
.sh-home[data-template="1"] .sh-cat-tile > div:has(> img) > div:last-child { padding-right: 100px; }
.sh-home[data-template="1"] .sh-cat-tile > div > div:last-child { position: static !important; padding: 18px; color: var(--s-ink) !important; }
.sh-home[data-template="1"] .sh-cat-tile > div > div:last-child > div { text-shadow: none !important; }
.sh-home[data-template="1"] .sh-cat-tile > div > div:last-child > div:last-child { display: none; }
@media (min-width: 768px) { .t1-editorial-copy { display: none; } }
/* T1 phone hero: full-width tap target for the one CTA. With a banner photo/video the photo is the hero —
   tall 4:5 frame (faces stay in shot) with the copy laid over a bottom fade, about the same total height as
   the old short strip + copy block. Without one, the copy sits below as a plain block. */
@media (max-width: 767px) {
  .sh-home[data-template="1"] .sh-hero { position: relative; overflow: hidden; border-radius: var(--s-card-radius, 16px); }
  .sh-home[data-template="1"] .sh-hero-mob { aspect-ratio: 17/10; max-height: 240px; }
  .t1-editorial-copy { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 22px; }
  .t1-editorial-copy small { font-weight: 700; letter-spacing: .16em; }
  .t1-editorial-copy h1 { font-size: 27px; line-height: 1.15; letter-spacing: -.01em; margin: 0; }
  .t1-editorial-copy p { margin: 0; line-height: 1.55; }
  .t1-editorial-copy button { width: 100%; margin-top: 12px; padding: 14px 20px; border-radius: var(--s-btn-radius, 12px); font-weight: 700; }
  .sh-home[data-template="1"] .sh-hero:has(.sh-hero-mob :is(img, video)) .sh-hero-mob { aspect-ratio: 4/5; max-height: min(560px, 72svh); }
  .sh-home[data-template="1"] .sh-hero:has(.sh-hero-mob :is(img, video)) .t1-editorial-copy {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 96px 20px 20px; color: #fff; pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(12, 10, 8, .45) 38%, rgba(12, 10, 8, .82) 100%); }
  .sh-home[data-template="1"] .sh-hero:has(.sh-hero-mob :is(img, video)) .t1-editorial-copy :is(small, p) { color: rgba(255, 255, 255, .86); }
  .sh-home[data-template="1"] .sh-hero:has(.sh-hero-mob :is(img, video)) .t1-editorial-copy h1 { color: #fff; font-size: 29px; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
  .sh-home[data-template="1"] .sh-hero:has(.sh-hero-mob :is(img, video)) .t1-editorial-copy button { pointer-events: auto; margin-top: 8px; }
}
/* T1 at >=768px: the generic .sh-hero-split showed different copy (store name) and a different photo
   (first product) from both the T1 phone and desktop heroes. Reuse the T1 phone hero side by side
   instead, so the store reads the same at every width. */
@media (min-width: 768px) {
  .sh-home[data-template="1"] .sh-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 24px 32px; padding: 0; overflow: hidden; }
  .sh-home[data-template="1"] .sh-hero-split { display: none !important; }
  .sh-home[data-template="1"] .t1-editorial-copy { display: flex !important; flex-direction: column; justify-content: center; align-items: flex-start; grid-column: 1; grid-row: 1; padding: 40px; }
  .sh-home[data-template="1"] .sh-hero-mob { display: block !important; grid-column: 2; grid-row: 1; aspect-ratio: auto; max-height: none; height: 100%; min-height: 400px; }
}
@media (max-width: 600px) { .sh-home[data-template="1"] .sh-cats-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .store-desktop[data-template="1"] *, .sh-home[data-template="1"] * { animation: none !important; transition: none !important; } }