/* Premium E-commerce Storefront CSS Architecture */

/* Global safe base — without this, any element declaring both width:100%
   (or a fixed width) AND padding adds that padding ON TOP of the declared
   width (browser default content-box), silently overflowing its container.
   This was the confirmed root cause of page-level horizontal overflow (see
   .hero-neo-wrap below): 100% width + 28px+28px padding under content-box
   rendered 56px wider than the true viewport. border-box makes width
   declarations include padding/border, which is what every component on
   this site already assumes when it writes width:100% next to a padding
   value. */
*, *::before, *::after { box-sizing: border-box; }

/* img/video/svg must never be wider than their container regardless of the
   source file's own intrinsic pixel dimensions — a second common overflow
   source distinct from the box-sizing one above. */
img, video, svg { max-width: 100%; }

/* Cart count micro-animation — shared across every header/mobile-nav variant's
   [data-sf-cart-badge] element (all 8 theme families use the same attribute
   hook), triggered briefly by cart-ajax.js on a successful add. Kept as one
   small scale/opacity pulse, not a continuous animation. */
@keyframes sf-badge-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.35); opacity: 0.85; } 100% { transform: scale(1); } }
[data-sf-cart-badge].sf-badge-pulse { animation: sf-badge-pulse 0.28s ease-out 1; }
@media (prefers-reduced-motion: reduce) { [data-sf-cart-badge].sf-badge-pulse { animation: none; } }

/* "Bird flies to cart" success animation (cart-ajax.js's flyBirdToCart()).
   Family-agnostic and shared globally — it's triggered from Add to Cart
   regardless of which of the 8 theme families/product-card variants is
   active, and the target is whichever header/mobile-nav cart icon is
   currently visible, so none of those per-family files need to know about
   it. The bird's own outer wrapper carries the flight's translate/rotate/
   scale (set inline per-frame by the Web Animations API in JS); everything
   below is just the CONTINUOUS micro-motion nested inside it — wing flap,
   a small body bob, a subtle tail sway — which layers on top without
   fighting the flight transform since it's on different (inner) elements. */
.sf-bird {
    position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25));
    will-change: transform;
}
.sf-bird-wing-left { transform-box: fill-box; transform-origin: 90% 50%; animation: sf-bird-flap-left 0.11s ease-in-out infinite alternate; }
.sf-bird-wing-right { transform-box: fill-box; transform-origin: 10% 50%; animation: sf-bird-flap-right 0.11s ease-in-out infinite alternate; }
@keyframes sf-bird-flap-left { from { transform: rotate(0deg); } to { transform: rotate(-32deg); } }
@keyframes sf-bird-flap-right { from { transform: rotate(0deg); } to { transform: rotate(32deg); } }
.sf-bird-body { transform-box: fill-box; transform-origin: 50% 50%; animation: sf-bird-bob 0.4s ease-in-out infinite alternate; }
@keyframes sf-bird-bob { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
.sf-bird-tail { transform-box: fill-box; transform-origin: 90% 20%; animation: sf-bird-tail-sway 0.3s ease-in-out infinite alternate; }
@keyframes sf-bird-tail-sway { from { transform: rotate(0deg); } to { transform: rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) {
    .sf-bird-wing-left, .sf-bird-wing-right, .sf-bird-body, .sf-bird-tail { animation: none !important; }
}

/* Formation sparkle — a few tiny dots that pop briefly at the button's edge
   right as the bird starts forming there (see spawnFormationParticles() in
   cart-ajax.js), reinforcing "the button released this bird" rather than it
   fading in from nowhere. Short-lived and self-removing, same as the
   arrival burst below. */
.sf-bird-particle {
    position: fixed; top: 0; left: 0; width: 5px; height: 5px; border-radius: 50%;
    background: var(--add-to-cart-bg, #6655F5);
    pointer-events: none; z-index: 99999;
}

/* Soft arrival glow where the bird lands — a short-lived, self-removing
   element (see cart-ajax.js), not a persistent decoration. */
.sf-bird-burst {
    position: fixed; top: 0; left: 0; width: 22px; height: 22px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--add-to-cart-bg, #6655F5) 70%, white), transparent 70%);
    pointer-events: none; z-index: 99999;
}

/* Cart icon "received the bird" bounce — a temporary class toggled by JS on
   whichever cart icon element is currently visible (works for any of the 8
   header/mobile-nav variants without any of them needing their own rule). */
.sf-cart-bounce { animation: sf-cart-bounce-anim 0.4s cubic-bezier(.34,1.56,.64,1) 1; }
@keyframes sf-cart-bounce-anim { 0% { transform: scale(1); } 35% { transform: scale(1.15); } 70% { transform: scale(0.96); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .sf-cart-bounce { animation: none; } }

/* Reduced-motion fallback for the bird flight itself — a small, brief
   fade/scale confirmation directly on the cart icon instead of the full
   flight (still a real transition, but nowhere near the size/duration
   guidelines flag as motion-sensitive; the cart-count update itself is
   unaffected either way). */
.sf-cart-rm-confirm { animation: sf-cart-rm-confirm-anim 0.35s ease-out 1; }
@keyframes sf-cart-rm-confirm-anim { 0% { opacity: 0.4; transform: scale(0.85); } 100% { opacity: 1; transform: scale(1); } }

/* Cart Drawer — site-wide chrome (see storefront/partials/cart-drawer.php),
   opened by cart-ajax.js after the bird animation lands. Slides in from the
   right using only `transform` (never `right`/`width`), so it never
   contributes to the document's scrollable width even while off-screen —
   the same reasoning already applied to the mobile bottom nav elsewhere in
   this file. Sits above the bird layer (z-index 99999) since the drawer is
   the LAST thing to appear in the sequence. */
.sf-cart-drawer-backdrop {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(15, 23, 42, 0.42);
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.sf-cart-drawer-backdrop.sf-drawer-open {
    opacity: 1; visibility: visible;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
}
.sf-cart-drawer {
    position: absolute; top: 0; right: 0; height: 100%;
    width: min(400px, 92vw); max-width: 100%; box-sizing: border-box;
    background: var(--card-bg-color, var(--bg-color, #fff));
    box-shadow: -12px 0 32px rgba(0,0,0,0.18);
    border-radius: var(--theme-radius-section, 16px) 0 0 var(--theme-radius-section, 16px);
    display: flex; flex-direction: column;
    transform: translateX(100%) scale(0.96);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(.22,.9,.32,1), opacity 0.28s ease;
}
.sf-cart-drawer-backdrop.sf-drawer-open .sf-cart-drawer { transform: translateX(0) scale(1); opacity: 1; }
.sf-cart-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.08)); flex-shrink: 0;
}
.sf-cart-drawer-header h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--heading-color); }
.sf-cart-drawer-close {
    border: none; background: transparent; cursor: pointer; font-size: 1.5rem; line-height: 1;
    color: var(--muted-color, var(--text-color)); padding: 4px 8px; border-radius: 8px;
}
.sf-cart-drawer-close:hover { color: var(--heading-color); }
.sf-cart-drawer-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; min-width: 0; }

.sf-drawer-empty { text-align: center; padding: 2.5rem 0.5rem; color: var(--muted-color); }
.sf-drawer-empty p { margin: 0 0 1rem; }

.sf-drawer-item { display: flex; align-items: center; gap: 12px; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.06)); }
.sf-drawer-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sf-drawer-item-img { width: 56px; height: 56px; border-radius: var(--theme-radius-image, 12px); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sf-drawer-item-img img { width: 100%; height: 100%; object-fit: contain; }
.sf-drawer-item-details { flex: 1; min-width: 0; }
.sf-drawer-item-title { display: block; font-size: 0.88rem; font-weight: 600; color: var(--heading-color); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-drawer-item-variant { font-size: 0.76rem; color: var(--muted-color); margin: 2px 0; }
.sf-drawer-item-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-size: 0.82rem; }
.sf-drawer-item-qty { color: var(--muted-color); }
.sf-drawer-item-price { font-weight: 700; color: var(--price-color, var(--heading-color)); }
.sf-drawer-remove-form { margin: 0; flex-shrink: 0; }
.sf-drawer-remove-btn { border: none; background: transparent; color: var(--muted-color); font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 4px 6px; }
.sf-drawer-remove-btn:hover { color: #ef4444; }

/* Offer tracker(s) — same .ot-card markup/behavior as the Order Summary
   page, just sitting inside the drawer's own padded body here instead of
   its own panel container, so no extra horizontal padding is needed. */
.sf-drawer-offers { margin-top: 4px; margin-bottom: 4px; }

.sf-drawer-footer { border-top: 1px solid var(--border-color, rgba(0,0,0,0.08)); padding: 1.1rem 1.5rem 1.4rem; flex-shrink: 0; }
.sf-drawer-subtotal-row { display: flex; justify-content: space-between; font-size: 0.95rem; font-weight: 700; color: var(--heading-color); margin-bottom: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
    .sf-cart-drawer-backdrop, .sf-cart-drawer { transition: none; }
}

/* Homepage/category-grid Size/Colour picker popup (cart-ajax.js) — shown
   only when a product card's Add to Cart is clicked for a product that has
   Size/Colour configured in Admin. The Product Detail page never uses
   this; its own picker sits directly on the page (see shop/show.php's
   .pd-variant-* rules) per the explicit "no popup on the product page"
   requirement. Centered modal (not a slide-in drawer like the cart one
   above) since this is a short, blocking decision, not a persistent panel. */
.pc-variant-modal-backdrop {
    position: fixed; inset: 0; z-index: 100001;
    background: rgba(15, 23, 42, 0.5);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.pc-variant-modal-backdrop.pc-variant-modal-open {
    opacity: 1; visibility: visible;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
}
.pc-variant-modal {
    position: relative; width: min(380px, 100%); box-sizing: border-box;
    background: var(--card-bg-color, var(--bg-color, #fff));
    border-radius: var(--theme-radius-card, 20px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    padding: 1.75rem;
    transform: scale(0.95); transition: transform 0.2s ease;
}
.pc-variant-modal-backdrop.pc-variant-modal-open .pc-variant-modal { transform: scale(1); }
.pc-variant-modal-close {
    position: absolute; top: 12px; right: 12px;
    border: none; background: transparent; cursor: pointer; font-size: 1.4rem; line-height: 1;
    color: var(--muted-color, var(--text-color)); padding: 4px 8px; border-radius: 8px;
}
.pc-variant-modal-close:hover { color: var(--heading-color); }
.pc-variant-modal-title { margin: 0 0 1.1rem; font-size: 1.05rem; font-weight: 700; color: var(--heading-color); padding-right: 1.5rem; }
.pc-variant-group { margin-bottom: 1.1rem; }
.pc-variant-group h5 { margin: 0 0 8px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted-color); }
.pc-variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-variant-pill {
    padding: 7px 14px; border-radius: 999px; border: none; cursor: pointer;
    background: var(--card-bg-color); color: var(--heading-color);
    font-size: 0.82rem; font-weight: 600;
    box-shadow: 3px 3px 6px rgba(163,171,186,0.4), -3px -3px 6px rgba(255,255,255,0.8);
    transition: box-shadow 0.15s ease, color 0.15s ease;
}
.pc-variant-pill.pc-variant-selected {
    color: var(--primary-color);
    box-shadow: inset 3px 3px 6px rgba(163,171,186,0.5), inset -3px -3px 6px rgba(255,255,255,0.8), 0 0 0 2px var(--primary-color);
}
.pc-variant-modal-error { color: #ef4444; font-size: 0.82rem; margin: 0 0 1rem; }
.pc-variant-modal-confirm { width: 100%; }
@media (prefers-reduced-motion: reduce) {
    .pc-variant-modal-backdrop, .pc-variant-modal { transition: none; }
}

/* ==========================================================================
   "Proceed to Payment" / Cart Popup Checkout button animation — premium
   gradient + electric glow CTA. Two call sites: the Cart Drawer's Checkout
   button (cart-drawer-fragment.php) and the Order Summary page's final
   submit button (checkout/summary.php), one component, not a per-page
   reimplementation. Purely decorative additions on top of each button's
   existing .sfp-btn/.sfp-btn-primary classes; href/action, text, and click
   behavior are all unchanged. Reuses the SAME color tokens that already
   drive the Checkout page's own "Electric Border" effect (--checkout-
   electric-primary/-secondary/-glow, Theme Customizer -> Checkout Electric
   Border) instead of inventing a new palette, and reuses .sf-glow-border
   (above) for the traveling-light border instead of a second
   implementation. Deliberately a DIFFERENT technique from the Cart page's
   .sf-glass-cta (below) — opaque raised surface + electric glow here vs.
   true translucency/blur there — so the two primary checkout-flow CTAs
   never look like copies of each other.

   On the Cart Drawer specifically, every layer is additionally paused via
   .sf-cart-drawer-backdrop:not(.sf-drawer-open) below — the popup's own
   existing open/close class is the single source of truth for "is this
   animation allowed to run" there; no extra JS state needed to start/stop
   it (cart-ajax.js only gains one line to build the glow SVG when the
   drawer fragment is (re)injected — see refreshDrawerFragment() there).
   On the Summary page there's no popup to pause for, so the same rule is
   simply a no-op and the animation runs continuously, which is what's
   wanted there too.
   ========================================================================== */
.sf-checkout-glow-btn {
    --glow-border-width: 1.5px;
    --glow-border-radius: var(--theme-radius-button, 18px);
    --glow-color-1: var(--checkout-electric-primary, var(--primary-color, #6366f1));
    --glow-color-2: var(--checkout-electric-secondary, var(--accent-color, #8b5cf6));
    --glow-cycle-ms: 2600ms;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    animation: sf-checkout-pulse 2600ms ease-in-out infinite;
    transition: transform 0.25s ease, filter 0.2s ease;
}
.sf-checkout-glow-btn .sf-checkout-icon,
.sf-checkout-glow-btn .sf-checkout-label { position: relative; z-index: 2; }
.sf-checkout-glow-btn .sf-checkout-arrow {
    position: relative; z-index: 2; display: inline-block;
    animation: sf-checkout-arrow-nudge 1500ms ease-in-out infinite;
}
.sf-checkout-shine {
    position: absolute; top: 0; left: 0; z-index: 1;
    width: 45%; height: 100%; pointer-events: none;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: translateX(-160%) skewX(-20deg);
    animation: sf-checkout-shine-sweep 3200ms ease-in-out infinite;
}
@keyframes sf-checkout-pulse {
    0%, 100% {
        box-shadow: 6px 6px 12px rgba(163,171,186,0.45), -6px -6px 12px rgba(255,255,255,0.85), 0 0 0 0 transparent;
    }
    50% {
        box-shadow: 6px 6px 12px rgba(163,171,186,0.45), -6px -6px 12px rgba(255,255,255,0.85),
                    0 0 16px 2px color-mix(in srgb, var(--checkout-electric-glow, var(--primary-color, #6366f1)) 55%, transparent);
    }
}
@keyframes sf-checkout-shine-sweep {
    0% { transform: translateX(-160%) skewX(-20deg); }
    35% { transform: translateX(260%) skewX(-20deg); }
    100% { transform: translateX(260%) skewX(-20deg); }
}
@keyframes sf-checkout-arrow-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}
/* Specificity bumped (.sfp-btn + .sf-checkout-glow-btn) so this reliably
   beats storefront-pages.css's own .sfp-btn:hover regardless of link
   load order between the two stylesheets. */
.sfp-btn.sf-checkout-glow-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.06);
    --glow-cycle-ms: 1300ms;
    animation-duration: 1300ms;
}
.sfp-btn.sf-checkout-glow-btn:hover .sf-checkout-shine { animation-duration: 1400ms; }

.sf-cart-drawer-backdrop:not(.sf-drawer-open) .sf-checkout-glow-btn,
.sf-cart-drawer-backdrop:not(.sf-drawer-open) .sf-checkout-glow-btn .sf-checkout-shine,
.sf-cart-drawer-backdrop:not(.sf-drawer-open) .sf-checkout-glow-btn .sf-checkout-arrow,
.sf-cart-drawer-backdrop:not(.sf-drawer-open) .sf-checkout-glow-btn .sf-glow-comet {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .sf-checkout-glow-btn,
    .sf-checkout-glow-btn .sf-checkout-shine,
    .sf-checkout-glow-btn .sf-checkout-arrow { animation: none; }
    .sfp-btn.sf-checkout-glow-btn:hover { transform: none; }
}

@media (max-width: 480px) {
    .sf-checkout-glow-btn { letter-spacing: 0.02em; }
}

/* ==========================================================================
   Premium two-tone redesign — ONLY the Order Summary page's "Proceed to
   Payment" button and the Payment page's "Pay" button (#pay-submit-btn).
   Both already carry .sf-checkout-glow-btn (shared with the Cart Drawer's
   own Checkout button, which must stay exactly as-is), so this is layered
   on via one additional marker class, .sf-premium-pay-btn, rather than
   editing .sf-checkout-glow-btn itself — that keeps the Cart Drawer button
   untouched while only these two get the new look. Every override below is
   written as ".sfp-btn.sf-premium-pay-btn" (same specificity-bump
   convention already used for .sf-checkout-glow-btn:hover above) so it
   reliably wins over .sfp-btn / .sfp-btn-primary / .sf-checkout-glow-btn
   regardless of stylesheet order.

   Gradient uses the site's two most relevant existing tokens rather than
   new hardcoded colors: --add-to-cart-bg (the Home page Add to Cart
   button's dark primary color, per request) blending into
   --checkout-electric-primary (the blue this checkout flow's own "Electric
   Border" already uses) — so it reads as "premium two-color" while still
   tracking Theme Customizer edits to either color. The shine sweep
   (.sf-checkout-shine) and glow border (.sf-glow-border) are inherited
   unchanged from .sf-checkout-glow-btn — no need to reinvent those.
   ========================================================================== */
.sfp-btn.sf-premium-pay-btn {
    --glow-border-radius: 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--add-to-cart-bg, #6655F5) 100%, black 10%) 0%,
        var(--add-to-cart-bg, #6655F5) 50%,
        var(--checkout-electric-primary, #3b82f6) 100%);
    color: #ffffff;
    border-radius: 16px;
    padding: 19px 32px;
    font-size: 1.05rem;
    min-height: 58px;
    box-shadow:
        0 10px 26px color-mix(in srgb, var(--add-to-cart-bg, #6655F5) 38%, transparent),
        0 3px 8px rgba(0, 0, 0, 0.22);
    animation: sf-premium-pay-pulse 2600ms ease-in-out infinite;
}
.sfp-btn.sf-premium-pay-btn .sf-checkout-shine {
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}
@keyframes sf-premium-pay-pulse {
    0%, 100% {
        box-shadow:
            0 10px 26px color-mix(in srgb, var(--add-to-cart-bg, #6655F5) 38%, transparent),
            0 3px 8px rgba(0, 0, 0, 0.22);
    }
    50% {
        box-shadow:
            0 10px 26px color-mix(in srgb, var(--add-to-cart-bg, #6655F5) 38%, transparent),
            0 3px 8px rgba(0, 0, 0, 0.22),
            0 0 22px 3px color-mix(in srgb, var(--checkout-electric-primary, #3b82f6) 55%, transparent);
    }
}
.sfp-btn.sf-premium-pay-btn:hover {
    filter: brightness(1.08);
    box-shadow:
        0 14px 30px color-mix(in srgb, var(--add-to-cart-bg, #6655F5) 45%, transparent),
        0 4px 10px rgba(0, 0, 0, 0.26);
}
.sfp-btn.sf-premium-pay-btn:active {
    transform: translateY(1px) scale(0.99);
    filter: brightness(0.96);
    box-shadow:
        0 6px 16px color-mix(in srgb, var(--add-to-cart-bg, #6655F5) 35%, transparent),
        0 2px 5px rgba(0, 0, 0, 0.2);
}
@media (max-width: 640px) {
    .sfp-btn.sf-premium-pay-btn { padding: 17px 26px; font-size: 1rem; min-height: 54px; }
}
@media (max-width: 480px) {
    .sfp-btn.sf-premium-pay-btn { padding: 16px 22px; min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
    .sfp-btn.sf-premium-pay-btn { animation: none; }
}

/* ==========================================================================
   Cart Page — "Proceed to Checkout" Liquid Glass CTA. Purely decorative
   additions on top of the button's existing .sfp-btn/.sfp-btn-primary
   classes; href, text, and click behavior (see cart/index.php) are all
   unchanged. Deliberately a DIFFERENT visual technique from the Summary
   page's .sf-checkout-glow-btn above (opaque raised surface + electric
   glow) — true translucency/blur here instead, so the two primary CTAs in
   the checkout flow never look like copies of each other. Reuses
   .sf-glow-border (this file, above) for the animated border instead of a
   second implementation, and the same theme color tokens
   (--primary-color/--accent-color) rather than a new palette.
   ========================================================================== */
.sfp-btn.sf-glass-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary-color, #6366f1) 24%, transparent),
        color-mix(in srgb, var(--accent-color, #8b5cf6) 16%, transparent));
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.32);
    box-shadow:
        0 10px 30px color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.06);
    animation: sf-glass-breathe 3400ms ease-in-out infinite;
    transition: transform 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
    --glow-border-width: 1.5px;
    --glow-border-radius: var(--theme-radius-button, 18px);
    --glow-color-1: var(--primary-color, #6366f1);
    --glow-color-2: var(--accent-color, #8b5cf6);
    --glow-cycle-ms: 4200ms;
}
.sf-glass-cta .sf-glass-label,
.sf-glass-cta .sf-glass-arrow { position: relative; z-index: 2; }
.sf-glass-cta .sf-glass-arrow {
    display: inline-block;
    animation: sf-glass-arrow-nudge 1700ms ease-in-out infinite;
}
.sf-glass-shimmer {
    position: absolute; top: 0; left: 0; z-index: 1;
    width: 55%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
    filter: blur(2px);
    transform: translateX(-170%) skewX(-18deg);
    animation: sf-glass-shimmer-sweep 4500ms ease-in-out infinite;
}
@keyframes sf-glass-breathe {
    0%, 100% {
        box-shadow:
            0 10px 30px color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent),
            inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.06);
    }
    50% {
        box-shadow:
            0 14px 38px color-mix(in srgb, var(--primary-color, #6366f1) 32%, transparent),
            inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.06);
    }
}
@keyframes sf-glass-shimmer-sweep {
    0% { transform: translateX(-170%) skewX(-18deg); }
    40% { transform: translateX(220%) skewX(-18deg); }
    100% { transform: translateX(220%) skewX(-18deg); }
}
@keyframes sf-glass-arrow-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}
/* Specificity bumped (.sfp-btn + .sf-glass-cta) so this reliably beats
   storefront-pages.css's own .sfp-btn/.sfp-btn:hover regardless of link
   load order between the two stylesheets. */
.sfp-btn.sf-glass-cta:hover {
    transform: translateY(-3px);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    --glow-cycle-ms: 2000ms;
    box-shadow:
        0 16px 42px color-mix(in srgb, var(--primary-color, #6366f1) 38%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -1px 0 rgba(0,0,0,0.06);
}
.sfp-btn.sf-glass-cta:hover .sf-glass-shimmer { animation-duration: 2000ms; }
.sfp-btn.sf-glass-cta:hover .sf-glass-arrow { animation-duration: 900ms; }

@media (prefers-reduced-motion: reduce) {
    .sf-glass-cta, .sf-glass-shimmer, .sf-glass-arrow { animation: none; }
    .sfp-btn.sf-glass-cta:hover { transform: none; }
}
@media (max-width: 480px) {
    .sf-glass-cta { letter-spacing: 0.01em; }
}

/* ==========================================================================
   Mobile Navigation Drawer — site-wide chrome (see storefront/partials/
   mobile-nav-drawer.php), one shared component every theme family's header
   hamburger button opens (public/assets/js/mobile-nav-drawer.js). Slides in
   from the LEFT using only `transform`, same reasoning as the cart drawer
   (never contributes to scrollable width while off-screen). Desktop nav is
   completely untouched — this only ever appears inside the ≤860px hamburger
   media query each header variant already gates on.
   ========================================================================== */
.sf-navdrawer-backdrop {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(15, 23, 42, 0.42);
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.sf-navdrawer-backdrop.sf-drawer-open {
    opacity: 1; visibility: visible;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
}
.sf-navdrawer {
    position: absolute; top: 0; left: 0; height: 100%;
    width: min(360px, 85vw); max-width: 88vw; box-sizing: border-box;
    background: var(--card-bg-color, var(--bg-color, #fff));
    box-shadow: 12px 0 32px rgba(0,0,0,0.18);
    border-radius: 0 var(--theme-radius-section, 16px) var(--theme-radius-section, 16px) 0;
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(.22,.9,.32,1);
}
.sf-navdrawer-backdrop.sf-drawer-open .sf-navdrawer { transform: translateX(0); }
.sf-navdrawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.08)); flex-shrink: 0;
    background: var(--card-bg-color, #fff);
}
.sf-navdrawer-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--heading-color); }
.sf-navdrawer-close {
    border: none; background: transparent; cursor: pointer; font-size: 1.5rem; line-height: 1;
    color: var(--muted-color, var(--text-color)); padding: 4px 8px; border-radius: 8px;
}
.sf-navdrawer-close:hover { color: var(--heading-color); }

/* Premium menu cards — scrollable body, native scrollbar hidden (scrolling
   itself stays fully functional, just visually clean, per spec). */
.sf-navdrawer-nav {
    flex: 1; overflow-y: auto; overscroll-behavior: contain;
    padding: 1.1rem 1.1rem 1.75rem;
    scrollbar-width: none; -ms-overflow-style: none;
}
.sf-navdrawer-nav::-webkit-scrollbar { display: none; width: 0; height: 0; }

.sf-navdrawer-group-label {
    margin: 0 0 10px; padding: 0 2px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase;
    color: var(--muted-color, #64748b);
}
.sf-navdrawer-group { display: flex; flex-direction: column; gap: 15px; margin-bottom: 24px; }
.sf-navdrawer-group:last-child { margin-bottom: 0; }

/* Each menu entry is a soft, rounded card: icon left, title+description
   center, chevron right — same recipe for every item (Main Menu + Help &
   Support), consistent height via shared padding/gap rather than a fixed
   px height. */
.sf-navdrawer-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    border-radius: 17px;
    background: var(--card-bg-color, #fff);
    border: 1px solid var(--border-color, rgba(15,23,42,0.07));
    box-shadow: 0 2px 10px rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.04);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.sf-navdrawer-backdrop.sf-drawer-open .sf-navdrawer-card {
    animation: sf-navcard-in 0.42s cubic-bezier(.22,.9,.32,1) both;
    animation-delay: calc(var(--sf-nav-i, 1) * 45ms);
}
@keyframes sf-navcard-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.sf-navdrawer-card:hover {
    border-color: color-mix(in srgb, var(--primary-color, #0f172a) 20%, var(--border-color, #e2e8f0));
    box-shadow: 0 4px 14px rgba(15,23,42,0.08);
}
.sf-navdrawer-card:active {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(15,23,42,0.07);
    transition-duration: 0.15s;
}

.sf-navdrawer-icon {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, #d9a066 15%, #fff8f0);
    color: var(--heading-color, #3a3f47);
}
.sf-navdrawer-icon svg { width: 22px; height: 22px; }

.sf-navdrawer-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sf-navdrawer-card-title {
    font-size: 1.06rem; font-weight: 700; color: var(--heading-color); line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sf-navdrawer-card-desc {
    font-size: 0.83rem; font-weight: 400; color: var(--muted-color, #64748b); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sf-navdrawer-chevron { flex-shrink: 0; width: 20px; height: 20px; color: var(--muted-color, #94a3b8); opacity: 0.65; }

body.sf-navdrawer-locked { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
    .sf-navdrawer-backdrop, .sf-navdrawer, .sf-navdrawer-card { transition: none; }
    .sf-navdrawer-backdrop.sf-drawer-open .sf-navdrawer-card { animation: none; }
}
/* Desktop never shows the hamburger (each header variant already gates its
   own hamburger button behind a ≤860px media query), but this is a hard
   backstop so the drawer can never accidentally render open-capable chrome
   on wide viewports regardless of that per-family CSS. */
@media (min-width: 861px) {
    .sf-navdrawer-backdrop { display: none; }
}

/* ==========================================================================
   Shared animated "traveling light" border (public/assets/js/glow-border.js)
   Used by the Announcement Bar and the Cart popup. A thin bright comet
   circles the host's perimeter via an SVG <rect>'s stroke-dashoffset, plus
   an optional soft static ambient halo underneath. Configured per host via
   CSS custom properties set inline by each renderer:
     --glow-border-width, --glow-border-radius, --glow-cycle-ms,
     --glow-color-1, --glow-color-2
   ========================================================================== */
.sf-glow-border { position: relative; isolation: isolate; }
.sf-glow-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.sf-glow-ambient {
    fill: none;
    stroke: var(--glow-color-2, var(--accent-color, var(--primary-color, #6366f1)));
    stroke-width: calc(var(--glow-border-width, 2px) * 2.4);
    opacity: 0.16;
    filter: blur(5px);
}
.sf-glow-comet {
    fill: none;
    stroke: var(--glow-color-1, var(--primary-color, #6366f1));
    stroke-width: var(--glow-border-width, 2px);
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px var(--glow-color-1, var(--primary-color, #6366f1)))
            drop-shadow(0 0 7px var(--glow-color-2, var(--accent-color, #8b5cf6)));
    animation: sf-glow-travel var(--glow-cycle-ms, 5000ms) linear infinite;
}
@keyframes sf-glow-travel {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: var(--glow-perimeter, 600px); }
}
.sf-glow-border.sf-glow-noglow .sf-glow-ambient { display: none; }
.sf-glow-border.sf-glow-static .sf-glow-comet { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .sf-glow-comet { animation: none !important; }
}

/* ==========================================================================
   Announcement Bar — live text (auto-scroll marquee) + optional glow border.
   See storefront/sections/announcement.php for the settings-driven markup.
   ========================================================================== */
.sf-announcement-bar { position: relative; overflow: hidden; }
.sf-announce-track {
    display: flex;
    width: max-content;
    animation: sf-announce-scroll linear infinite;
    animation-duration: var(--announce-scroll-ms, 25000ms);
}
.sf-announce-track.sf-announce-static { animation: none; width: 100%; }
.sf-announce-group { display: flex; align-items: center; flex-shrink: 0; padding-right: 56px; gap: 14px; }
.sf-announce-static .sf-announce-group { padding-right: 0; width: 100%; justify-content: inherit; }
.sf-announce-msg { white-space: nowrap; }
.sf-announce-dot { opacity: 0.55; }
.sf-announce-link { color: inherit; text-decoration: none; }
@keyframes sf-announce-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .sf-announce-track { animation: none; }
}
/* Pause on hover — desktop only; touch devices don't reliably fire :hover,
   so mobile stays smoothly scrolling as required. */
@media (hover: hover) and (pointer: fine) {
    .sf-announcement-bar:hover .sf-announce-track { animation-play-state: paused; }
}

:root {
    /* Color Palette - these will be overridden by frontend.php DB values */
    --bg-color: #ffffff;
    --primary-color: #0f172a;
    --secondary-color: #3b82f6;
    --accent-color: #ef4444;
    --text-color: #1e293b;
    --border-color: #e2e8f0;
    
    /* Spacing & Sizing */
    --container-width: 1200px;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;
    
    /* Layout */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
    
    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Outfit', var(--font-sans);
}

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--theme-body-font, var(--font-sans));
    font-weight: var(--theme-body-weight, 400);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    max-width: 100vw;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--theme-heading-font, var(--font-heading));
    margin-top: 0;
    font-weight: var(--theme-heading-weight, 600);
    line-height: 1.3;
    color: var(--heading-color, var(--text-color));
    letter-spacing: var(--theme-letter-spacing, 0px);
    text-transform: var(--theme-text-transform, none);
}

/* ================================================================
   Premium typography system — main section headings ("Shop by
   Category", "Best Sellers", "Featured Products", "New Arrivals")
   and secondary row/tab headings (category-carousel rows, the
   category-tab product-grid title). Presentation-only: applied as
   an ADDITIONAL class alongside each section's own existing heading
   class, so per-section font-size/color/margin rules are untouched
   — this only layers in a slightly bolder weight, subtle
   letter-spacing, a one-time fade-up entrance, and (for main
   headings only) a soft theme-colored accent underline.
   display:inline-block lets one rule correctly serve both
   left-aligned headings (normal block flow) and center-aligned ones
   (parent already has text-align:center) without any per-page
   override. ================================================== */
.sf-section-heading {
    position: relative;
    display: inline-block;
    font-weight: 800;
    letter-spacing: 0.3px;
    line-height: 1.25;
    padding-bottom: 12px;
    animation: sf-heading-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sf-section-heading::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 42px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary-color, #6655F5), color-mix(in srgb, var(--primary-color, #6655F5) 20%, transparent));
    background-size: 200% 100%;
    animation: sf-heading-accent-flow 3.5s ease-in-out infinite;
}
.sf-heading-refined {
    letter-spacing: 0.3px;
    animation: sf-heading-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sf-heading-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes sf-heading-accent-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .sf-section-heading, .sf-heading-refined { animation: none; }
    .sf-section-heading::after { animation: none; }
}

a {
    color: var(--link-color, var(--primary-color));
    text-decoration: none;
    transition: color var(--theme-transition, 0.2s ease);
}

a:hover {
    color: var(--secondary-color);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Theme Engine — cheap, CSS-only section entrance (paired with the small
   IntersectionObserver in layouts/frontend.php, only added when the selected
   preset's animation.entrance is on). No animation loop, no library. */
.sf-entrance { opacity: 0; transform: translateY(24px); transition: opacity var(--theme-transition, 0.4s ease), transform var(--theme-transition, 0.4s ease); }
.sf-entrance-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .sf-entrance { opacity: 1; transform: none; transition: none; }
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Utilities */
.container {
    max-width: var(--theme-max-width, var(--container-width));
    margin: 0 auto;
    padding: 0 var(--space-sm);
}

.section {
    padding: var(--theme-section-spacing, var(--space-lg)) 0;
}

.text-center { text-align: center; }
.mb-2 { margin-bottom: var(--space-xs); }
.mb-4 { margin-bottom: var(--space-sm); }
.mb-8 { margin-bottom: var(--space-md); }
.mt-4 { margin-top: var(--space-sm); }
.mt-8 { margin-top: var(--space-md); }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: var(--theme-radius-button, var(--radius-sm));
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--theme-transition, 0.2s ease), color var(--theme-transition, 0.2s ease), transform var(--theme-transition, 0.2s ease), box-shadow var(--theme-transition, 0.2s ease), border-color var(--theme-transition, 0.2s ease);
    border: var(--theme-border-width, 0) var(--theme-border-style, solid) transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.875rem;
}

.btn-primary {
    background-color: var(--button-bg, var(--primary-color));
    color: var(--button-text, #ffffff);
    border-color: var(--button-border-color, transparent);
}

body[data-button-hover="lift"] .btn-primary:hover { transform: translateY(var(--theme-hover-lift, -1px)); }
body[data-button-hover="scale"] .btn-primary:hover { transform: scale(1.03); }
body[data-button-hover="glow"] .btn-primary:hover { box-shadow: var(--theme-shadow-md); }
.btn-primary:hover {
    background-color: var(--button-hover-bg, var(--button-bg, var(--primary-color)));
    box-shadow: var(--theme-shadow-sm, var(--shadow-md));
    color: var(--button-hover-text, var(--button-text, #ffffff));
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: #ffffff;
}

/* 1. Announcement Bar */
.announcement-bar {
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 10px 0;
    font-size: 13px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
    width: 100%;
}

/* 2. Header */
.store-header {
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 15px 0;
}
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-color);
    font-family: var(--font-heading);
}
.header-nav {
    display: flex;
    gap: 30px;
}
.header-nav a {
    font-weight: 500;
    color: var(--text-color);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
}
.header-nav a:hover {
    color: var(--secondary-color);
}
.header-icons {
    display: flex;
    gap: 20px;
    align-items: center;
}
.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    padding: 5px;
    display: flex;
    align-items: center;
}
.icon-btn:hover {
    color: var(--secondary-color);
}
.mobile-menu-btn {
    display: none;
}

/* 3. Hero Banner */
.hero-banner {
    position: relative;
    background-color: var(--border-color);
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}
.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 800px;
    padding: 0 20px;
}
.hero-title {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--text-color);
}
.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    color: var(--text-color);
    opacity: 0.8;
}
.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* 4. Category Showcase — responsive CSS grid, 4 columns at every breakpoint
   (no horizontal carousel; a 5th+ category simply wraps to the next row). */
.category-showcase-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.category-sc-card {
    text-align: center;
    text-decoration: none;
    transition: transform var(--theme-transition, 0.2s ease);
    min-width: 0; /* allow grid item to shrink below content size, prevents overflow */
}
body[data-card-hover="lift"] .category-sc-card:hover { transform: translateY(var(--theme-hover-lift, -5px)); }
body[data-card-hover="scale"] .category-sc-card:hover { transform: scale(1.04); }
.category-sc-img-wrap {
    background: var(--card-bg-color, #ffffff);
    border-radius: var(--theme-radius-image, 20px);
    padding: 15px;
    box-shadow: var(--theme-shadow-sm, 0 4px 15px rgba(0,0,0,0.03));
    border: var(--theme-border-width, 1px) var(--theme-border-style, solid) var(--border-color, #f1f5f9);
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 15px;
    transition: border-color var(--theme-transition, 0.2s ease), box-shadow var(--theme-transition, 0.2s ease);
    backdrop-filter: var(--theme-glass-blur, none);
    -webkit-backdrop-filter: var(--theme-glass-blur, none);
}
.category-sc-card:hover .category-sc-img-wrap {
    box-shadow: var(--theme-shadow-md, 0 10px 25px rgba(0,0,0,0.06));
}
.category-sc-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.category-sc-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading-color, #334155);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 5. Product Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.product-card {
    position: relative;
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    transform: translateY(-4px);
}
.product-image-wrap {
    position: relative;
    aspect-ratio: 3/4;
    background: var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 1rem;
}
.product-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.product-card:hover .product-image-wrap img {
    transform: scale(1.05);
}
.badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--accent-color);
    color: white;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 2;
}
.product-actions {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.1), transparent);
    transition: bottom 0.3s ease;
    z-index: 2;
}
.product-card:hover .product-actions {
    bottom: 0;
}
.action-btn {
    background: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    color: var(--primary-color);
    transition: all 0.2s;
}
.action-btn:hover {
    background: var(--primary-color);
    color: white;
}
.product-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.product-info h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    flex-grow: 1;
}
.product-info h3 a {
    color: var(--text-color);
}
.product-price {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--primary-color);
}
.product-price-old {
    color: var(--text-color);
    opacity: 0.6;
    text-decoration: line-through;
    font-size: 0.875rem;
    margin-left: 8px;
    font-weight: 400;
}

/* 7. Promotional Banner */
.promo-banner {
    position: relative;
    background: var(--primary-color);
    color: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: var(--space-lg);
}
.promo-banner::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.05), transparent);
}
.promo-content {
    position: relative;
    z-index: 10;
    max-width: 50%;
}
.promo-content h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: white;
}
.promo-content p {
    color: rgba(255,255,255,0.8);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* 9. Why Choose Us */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--theme-grid-gap, 30px);
}
.feature-card {
    text-align: center;
    padding: 2rem;
    background: var(--card-bg-color, var(--bg-color));
    border: var(--theme-border-width, 1px) var(--theme-border-style, solid) var(--border-color);
    border-radius: var(--theme-radius-card, var(--radius-md));
    box-shadow: var(--theme-shadow-sm, none);
    transition: box-shadow var(--theme-transition, 0.3s ease), transform var(--theme-transition, 0.3s ease);
    backdrop-filter: var(--theme-glass-blur, none);
    -webkit-backdrop-filter: var(--theme-glass-blur, none);
}
body[data-card-hover="lift"] .feature-card:hover { transform: translateY(var(--theme-hover-lift, -4px)); box-shadow: var(--theme-shadow-md); }
body[data-card-hover="scale"] .feature-card:hover { transform: scale(1.02); }
body[data-card-hover="shadow"] .feature-card:hover { box-shadow: var(--theme-shadow-lg, var(--shadow-md)); }
.feature-icon {
    width: 60px;
    height: 60px;
    background: var(--bg-color);
    border: var(--theme-border-width, 1px) var(--theme-border-style, solid) var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--secondary-color);
    box-shadow: var(--theme-shadow-sm, var(--shadow-sm));
}
.feature-card h3 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    color: var(--heading-color);
}
.feature-card p {
    color: var(--muted-color, var(--text-color));
    font-size: 0.875rem;
}

/* 11. Customer Reviews */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--theme-grid-gap, 30px);
}
.review-card {
    background: var(--card-bg-color, var(--bg-color));
    padding: 2rem;
    border-radius: var(--theme-radius-card, var(--radius-md));
    border: var(--theme-border-width, 1px) var(--theme-border-style, solid) var(--border-color);
    box-shadow: var(--theme-shadow-sm, none);
    backdrop-filter: var(--theme-glass-blur, none);
    -webkit-backdrop-filter: var(--theme-glass-blur, none);
}
.review-stars {
    color: #fbbf24;
    margin-bottom: 1rem;
}
.review-text {
    font-size: 0.95rem;
    font-style: italic;
    margin-bottom: 1.5rem;
    color: var(--muted-color, var(--text-color));
}
.review-author {
    font-weight: 600;
    color: var(--heading-color);
}

/* 12. Newsletter */
.newsletter-section {
    background: var(--surface-color, var(--border-color));
    padding: var(--space-xl) 0;
    text-align: center;
}
.newsletter-form {
    display: flex;
    max-width: 500px;
    margin: 2rem auto 0;
    gap: 10px;
}
.newsletter-input {
    flex: 1;
    padding: 1rem;
    border: var(--theme-border-width, 1px) var(--theme-border-style, solid) var(--border-color);
    border-radius: var(--theme-radius-input, var(--radius-sm));
    font-size: 1rem;
    outline: none;
}
.newsletter-input:focus {
    border-color: var(--primary-color);
}

/* 13. Footer — background/text color are set inline per-render by
   storefront/sections/footer.php (custom section color, else the global
   Theme Colors --footer-bg/--footer-text); these class rules are only the
   defensive fallback if that inline style is ever absent. Everything below
   uses currentColor/inherit so it tracks whichever color actually applies,
   rather than assuming the footer is always white-on-dark. */
.store-footer {
    background: var(--footer-bg, var(--primary-color));
    color: var(--footer-text, white);
    padding: var(--space-xl) 0 var(--space-md);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 3rem;
}
.footer-col h4 {
    color: var(--footer-heading-color, inherit);
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
    font-family: var(--theme-heading-font, var(--font-heading));
}
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li {
    margin-bottom: 0.75rem;
}
.footer-links a {
    color: var(--footer-link-color, inherit);
    font-size: 0.9rem;
}
.footer-links a:hover {
    text-decoration: underline;
}
.footer-bottom {
    border-top: 1px solid currentColor;
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: inherit;
    font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .category-showcase-row { gap: 20px; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .reviews-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(3, 1fr); }
    .hero-title { font-size: 3rem; }
}

@media (max-width: 768px) {
    .header-nav { display: none; }
    .mobile-menu-btn { display: block; }
    /* Exactly 2 product cards per row on mobile, per requirement — minmax(0, 1fr)
       (not plain 1fr) lets a card shrink below its content's intrinsic width so
       long titles/prices/badges never force horizontal page overflow. */
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .hero-title { font-size: 2.5rem; }
    .hero-banner { height: 500px; }
    .promo-banner { flex-direction: column; text-align: center; }
    .promo-content { max-width: 100%; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .newsletter-form { flex-direction: column; }
    .announcement-bar { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 10px; }

    /* Still exactly 4 columns per row on mobile — a 5th/6th/etc. category
       wraps naturally onto the next row via CSS grid, no carousel. */
    .category-showcase-row { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .category-sc-img-wrap { border-radius: 14px; padding: 8px; margin-bottom: 8px; }
    .category-sc-name { font-size: 0.75rem; }
}

@media (max-width: 480px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .product-image-wrap { margin-bottom: 0.5rem; }
    .product-info h3 { font-size: 0.9rem; }
    .new-product-card { padding: 8px; border-radius: 14px; }
    .npc-image-container { border-radius: 12px; margin-bottom: 8px; }
    .npc-image-container img.npc-image { padding: 10px; }
    .npc-title { font-size: 0.85rem; }
    .npc-price { font-size: 1.05rem; }
    .npc-original-price { font-size: 0.75rem; }
    .npc-badge { font-size: 9px; padding: 3px 7px; }
    .npc-add-btn { font-size: 0.72rem; padding: 9px 8px; gap: 4px; }
    .features-grid { grid-template-columns: 1fr; }
    .reviews-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero-title { font-size: 2rem; }
    .footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
}/* --- Product Card (theme-engine driven — see :root vars in layouts/frontend.php) --- */
.new-product-card {
    background-color: var(--card-bg-color, var(--surface-color, #fbfaf8));
    border-radius: var(--theme-radius-card, 18px);
    border: var(--theme-border-width, 1px) var(--theme-border-style, solid) var(--border-color, #f0ede7);
    box-shadow: var(--theme-shadow-sm, none);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow var(--theme-transition, 0.25s ease), border-color var(--theme-transition, 0.25s ease), transform var(--theme-transition, 0.25s ease);
    padding: 10px;
    height: 100%;
    min-width: 0;
    backdrop-filter: var(--theme-glass-blur, none);
    -webkit-backdrop-filter: var(--theme-glass-blur, none);
}
body[data-card-hover="lift"] .new-product-card:hover { transform: translateY(var(--theme-hover-lift, -4px)); box-shadow: var(--theme-shadow-md, 0 6px 18px rgba(0,0,0,0.06)); }
body[data-card-hover="scale"] .new-product-card:hover { transform: scale(1.02); box-shadow: var(--theme-shadow-md); }
body[data-card-hover="shadow"] .new-product-card:hover { box-shadow: var(--theme-shadow-lg, 0 6px 18px rgba(0,0,0,0.06)); }
.npc-badges-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin-bottom: 8px;
    min-height: 22px;
}
.npc-badge {
    padding: 4px 9px;
    border-radius: var(--theme-radius-badge, 20px);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.npc-discount-badge {
    background-color: var(--sale-color, #1c1c1c);
    color: #fff;
}
.npc-delivery-badge {
    background-color: transparent;
    color: var(--badge-color, #4b5563);
    border: 1px solid var(--border-color, #d8d3c9);
    margin-left: auto;
}
.npc-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    background-color: var(--section-bg-color, #f3f0ea);
    border-radius: var(--theme-radius-image, 14px);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.npc-image-container img.npc-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    transition: transform var(--theme-transition, 0.4s ease);
}
body[data-image-hover="zoom"] .new-product-card:hover img.npc-image {
    transform: scale(1.06);
}
.npc-rating-wrap {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 8px;
}
.npc-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background-color: var(--rating-color, var(--heading-color, #1c1c1c));
    color: #fff;
    padding: 3px 9px;
    border-radius: var(--theme-radius-badge, 20px);
    font-size: 11px;
    font-weight: 700;
}
.npc-rating svg { color: #fbbf24; flex-shrink: 0; }
.npc-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.npc-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 4px;
    margin-top: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--theme-heading-font, var(--font-sans));
}
.npc-title a {
    color: var(--heading-color, #1c1c1c);
}
.npc-variant {
    font-size: 0.78rem;
    color: var(--muted-color, #8a8478);
    margin-bottom: 10px;
    font-weight: 500;
    text-transform: capitalize;
}
.npc-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    margin-top: auto;
}
.npc-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--price-color, #1c1c1c);
}
.npc-original-price {
    font-size: 0.85rem;
    color: var(--compare-price-color, var(--muted-color, #a39d8f));
    text-decoration: line-through;
    font-weight: 500;
}
.npc-add-form {
    margin: 0;
    width: 100%;
}
.npc-add-btn {
    width: 100%;
    background-color: var(--card-bg-color, #fdfcfa);
    color: var(--button-border-color, var(--button-bg, #3a2f28));
    border: 1.5px solid var(--button-border-color, var(--button-bg, #3a2f28));
    padding: 11px 14px;
    border-radius: var(--theme-radius-button, 30px);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color var(--theme-transition, 0.2s ease), color var(--theme-transition, 0.2s ease), border-color var(--theme-transition, 0.2s ease), transform var(--theme-transition, 0.2s ease);
}
body[data-button-hover="lift"] .npc-add-btn:hover { transform: translateY(var(--theme-hover-lift, -2px)); }
body[data-button-hover="scale"] .npc-add-btn:hover { transform: scale(1.03); }
body[data-button-hover="glow"] .npc-add-btn:hover { box-shadow: var(--theme-shadow-md); }
.npc-add-btn:hover {
    background-color: var(--button-hover-bg, var(--button-bg, #3a2f28));
    border-color: var(--button-hover-bg, var(--button-bg, #3a2f28));
    color: var(--button-hover-text, var(--button-text, #fff));
}
.npc-add-btn-plus {
    font-size: 1rem;
    line-height: 1;
}
/* 14. Cart Page */
.cart-page-wrap {
    padding: var(--space-xl) 0;
    background: #f8fafc;
}
.cart-header {
    margin-bottom: var(--space-lg);
    text-align: center;
}
.cart-header h1 {
    font-size: 2.5rem;
    color: var(--primary-color);
}
.cart-container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.cart-items {
    flex: 1;
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}
.cart-item {
    display: flex;
    gap: 20px;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
}
.cart-item:last-child {
    border-bottom: none;
}
.cart-item-img {
    width: 100px;
    height: 100px;
    background: #f1f5f9;
    border-radius: var(--radius-md);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-item-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.cart-item-details {
    flex: 1;
}
.cart-item-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.cart-item-title a {
    color: var(--text-color);
}
.cart-item-variant {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 10px;
}
.cart-qty-ctrl {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    width: max-content;
}
.cart-qty-btn {
    background: #f8fafc;
    border: none;
    padding: 5px 12px;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-color);
    transition: background 0.2s;
}
.cart-qty-btn:hover {
    background: #e2e8f0;
}
.cart-qty-input {
    width: 40px;
    text-align: center;
    border: none;
    font-weight: 600;
    background: transparent;
    pointer-events: none; /* simple read-only visually */
}
.cart-item-price {
    text-align: right;
    font-weight: 700;
    font-size: 1.1rem;
}
.cart-item-remove {
    background: none;
    border: none;
    color: var(--accent-color);
    font-size: 0.85rem;
    cursor: pointer;
    margin-top: 5px;
}
.cart-item-remove:hover {
    text-decoration: underline;
}
.cart-summary {
    width: 350px;
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    position: sticky;
    top: 100px;
}
.cart-summary h3 {
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--text-color);
}
.summary-total {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
}
.checkout-btn {
    width: 100%;
    margin-top: var(--space-md);
    padding: 15px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 700;
}
@media(max-width: 768px) {
    .cart-container { flex-direction: column; }
    .cart-summary { width: 100%; }
}

/* ============================================================
   THEME ENGINE — VISUAL STYLE FAMILIES
   ============================================================
   Every preset in ThemeEngine::presets() carries a `visual_style` key
   (see app/Models/ThemeEngine.php) rendered as body[data-visual-style]
   (layouts/frontend.php + admin/store/preview.php). This is the layer
   that makes each preset a genuinely different DESIGN LANGUAGE, not just
   a different color/radius/shadow token set: real borders, real inset/
   outset shadow techniques, real translucency, real structural spans.
   Nothing here duplicates business logic — every rule targets the SAME
   shared markup (.sf-header, .sf-hero, .new-product-card, etc.) that
   every page already renders through the existing PHP section files.
   "flat" (Minimalism, Card-Based) intentionally has no overrides here —
   it IS the baseline already defined above.
   ============================================================ */

/* ---------- HEADER ---------- */
body[data-visual-style="luxury_frame"] .sf-header { border-bottom: 1px solid rgba(176,141,87,0.35); box-shadow: none; }
body[data-visual-style="luxury_frame"] .sf-nav a { text-transform: uppercase; font-size: 12px; letter-spacing: 1.5px; }
body[data-visual-style="luxury_frame"] .sf-logo-fallback { letter-spacing: 3px; font-weight: 500; text-transform: uppercase; font-size: 16px; }

body[data-visual-style="glass"] .sf-header { border-bottom: 1px solid rgba(255,255,255,0.35); box-shadow: 0 8px 32px rgba(31,58,109,0.1); }
body[data-visual-style="glass"] .sf-header:not(.sf-header-overlay) { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background-color: rgba(255,255,255,0.55) !important; }
body[data-visual-style="glass"] .sf-cart-link { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

body[data-visual-style="neo"] .sf-header { border-bottom: none; box-shadow: 0 4px 14px rgba(163,171,186,0.35); }
body[data-visual-style="neo"] .sf-cart-link { box-shadow: 3px 3px 6px rgba(163,171,186,0.5), -3px -3px 6px rgba(255,255,255,0.8); border: none !important; }

body[data-visual-style="skeuo"] .sf-header:not(.sf-header-overlay) { background-image: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(0,0,0,0.03)); border-bottom: 1px solid rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 3px 10px rgba(0,0,0,0.15); }
body[data-visual-style="skeuo"] .sf-cart-link { background-image: linear-gradient(to bottom, rgba(255,255,255,0.7), transparent); box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 2px 4px rgba(0,0,0,0.18); }

body[data-visual-style="spatial"] .sf-header:not(.sf-header-overlay) { box-shadow: 0 10px 30px rgba(15,23,42,0.08); border-bottom: none; }

body[data-visual-style="editorial"] .sf-header { border-bottom: 2px solid var(--heading-color, #111); box-shadow: none; }
body[data-visual-style="editorial"] .sf-nav a { text-transform: uppercase; font-size: 12px; letter-spacing: 1px; font-weight: 700; }

body[data-visual-style="modern_bold"] .sf-header { box-shadow: 0 2px 16px rgba(0,0,0,0.06); }
body[data-visual-style="modern_bold"] .sf-cart-link { background-image: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); }
body[data-visual-style="modern_bold"] .sf-cart-link svg { stroke: #fff !important; }

/* ---------- HERO ---------- */
body[data-visual-style="luxury_frame"] .sf-hero-content { border: 1px solid rgba(255,255,255,0.35); padding: 40px 48px; }
body[data-visual-style="luxury_frame"] .sf-hero-heading { text-transform: uppercase; letter-spacing: 2px; }

body[data-visual-style="glass"] .sf-hero-content { background: rgba(255,255,255,0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.35); border-radius: var(--theme-radius-section, 24px); padding: 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }

body[data-visual-style="skeuo"] .sf-hero-content { background: rgba(20,15,10,0.35); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--theme-radius-section, 10px); padding: 36px 40px; box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 20px 40px rgba(0,0,0,0.3); }

body[data-visual-style="spatial"] .sf-hero { z-index: 1; }
body[data-visual-style="spatial"] .sf-hero-content { transform: translateY(10px); filter: drop-shadow(0 30px 40px rgba(0,0,0,0.35)); }

body[data-visual-style="editorial"] .sf-hero-content { max-width: 720px; text-align: left !important; }
body[data-visual-style="editorial"] .sf-hero-heading { font-size: calc(56px * var(--theme-heading-scale, 1)) !important; text-transform: none; }
body[data-visual-style="editorial"] .sf-hero-desc { font-size: 19px; max-width: 480px; }

body[data-visual-style="immersive"] .sf-hero-overlay { background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.45)); }
body[data-visual-style="immersive"] .sf-hero-heading { font-size: calc(58px * var(--theme-heading-scale, 1)) !important; }
body[data-visual-style="immersive"] .sf-hero-content { max-width: 760px; }

body[data-visual-style="bento"] .sf-hero-content { border-radius: var(--theme-radius-section, 24px); }

body[data-visual-style="clay"] .sf-hero-content { background: rgba(255,255,255,0.16); border-radius: var(--theme-radius-section, 32px); padding: 36px 44px; box-shadow: 0 20px 50px rgba(0,0,0,0.15); }

/* ---------- CATEGORY SHOWCASE ---------- */
body[data-visual-style="luxury_frame"] .category-sc-img-wrap { border-radius: 50%; border: 1px solid rgba(176,141,87,0.5); box-shadow: none; padding: 10px; }
body[data-visual-style="luxury_frame"] .category-sc-name { text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem; font-weight: 500; }

body[data-visual-style="glass"] .category-sc-img-wrap { background: rgba(255,255,255,0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 8px 24px rgba(31,58,109,0.12); }

body[data-visual-style="neo"] .category-sc-img-wrap { border: none; border-radius: 50%; box-shadow: 8px 8px 16px rgba(163,171,186,0.5), -8px -8px 16px rgba(255,255,255,0.85); }
body[data-visual-style="neo"] .category-sc-card:hover .category-sc-img-wrap { box-shadow: inset 5px 5px 10px rgba(163,171,186,0.5), inset -5px -5px 10px rgba(255,255,255,0.85); }

body[data-visual-style="clay"] .category-sc-img-wrap { border-radius: 50%; box-shadow: inset 0 6px 10px rgba(255,255,255,0.6), 10px 10px 20px rgba(0,0,0,0.12); }

body[data-visual-style="skeuo"] .category-sc-img-wrap { border-radius: 50%; border: 6px solid #fffdf8; box-shadow: 0 0 0 1px rgba(0,0,0,0.15), 0 6px 14px rgba(0,0,0,0.22), inset 0 2px 4px rgba(0,0,0,0.08); }
body[data-visual-style="skeuo"] .category-sc-name { font-weight: 600; }

body[data-visual-style="spatial"] .category-sc-img-wrap { box-shadow: 0 16px 30px rgba(15,23,42,0.14); }
body[data-visual-style="spatial"] .category-sc-card:hover { transform: translateY(-10px) scale(1.03); }

body[data-visual-style="image_first"] .category-sc-img-wrap { border-radius: 50%; padding: 0; box-shadow: none; border: none; }
body[data-visual-style="image_first"] .category-sc-img-wrap img { width: 100%; height: 100%; object-fit: cover; }

body[data-visual-style="bento"] .category-sc-img-wrap { border-radius: var(--theme-radius-image, 20px); }

/* Bento's asymmetric emphasis is desktop-only — mobile keeps the required
   4-per-row grid intact regardless of preset. */
@media (min-width: 769px) {
    body[data-visual-style="bento"] .category-showcase-row > a:first-child .category-sc-img-wrap { box-shadow: var(--theme-shadow-lg); }
}

/* ---------- PRODUCT CARD ---------- */
body[data-visual-style="luxury_frame"] .new-product-card { background: transparent; border: none; box-shadow: none; padding: 0; }
body[data-visual-style="luxury_frame"] .npc-image-container { border: 1px solid var(--border-color); background-color: transparent; }
body[data-visual-style="luxury_frame"] .npc-details { padding-top: 14px; border-top: 1px solid var(--border-color); }
body[data-visual-style="luxury_frame"] .npc-variant { text-transform: uppercase; letter-spacing: 1px; font-size: 0.7rem; }
body[data-visual-style="luxury_frame"] .npc-add-btn { border-radius: 2px; text-transform: uppercase; letter-spacing: 1.5px; }

body[data-visual-style="glass"] .new-product-card { border: 1px solid rgba(255,255,255,0.4); box-shadow: 0 8px 32px rgba(31,58,109,0.12); }
body[data-visual-style="glass"] .npc-image-container { background: rgba(255,255,255,0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body[data-visual-style="glass"] .new-product-card:hover { box-shadow: 0 16px 44px rgba(31,58,109,0.2); border-color: rgba(255,255,255,0.7); }
body[data-visual-style="glass"] .npc-add-btn { background: rgba(255,255,255,0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

body[data-visual-style="neo"] .new-product-card { border: none; box-shadow: 8px 8px 16px rgba(163,171,186,0.45), -8px -8px 16px rgba(255,255,255,0.85); }
body[data-visual-style="neo"] .new-product-card:hover { box-shadow: 10px 10px 20px rgba(163,171,186,0.5), -10px -10px 20px rgba(255,255,255,0.9); }
body[data-visual-style="neo"] .npc-image-container { box-shadow: inset 4px 4px 8px rgba(163,171,186,0.4), inset -4px -4px 8px rgba(255,255,255,0.7); background-color: transparent; }
body[data-visual-style="neo"] .npc-badge, body[data-visual-style="neo"] .npc-rating { box-shadow: 2px 2px 4px rgba(163,171,186,0.4), -2px -2px 4px rgba(255,255,255,0.7); }
body[data-visual-style="neo"] .npc-add-btn { border: none !important; box-shadow: 4px 4px 8px rgba(163,171,186,0.45), -4px -4px 8px rgba(255,255,255,0.85); }
body[data-visual-style="neo"] .npc-add-btn:active { box-shadow: inset 3px 3px 6px rgba(163,171,186,0.5), inset -3px -3px 6px rgba(255,255,255,0.8); }

body[data-visual-style="clay"] .new-product-card { border: none; box-shadow: inset 0 3px 6px rgba(255,255,255,0.6), 10px 10px 24px rgba(0,0,0,0.1); }
body[data-visual-style="clay"] .npc-image-container { box-shadow: inset 0 4px 10px rgba(255,255,255,0.7); }
body[data-visual-style="clay"] .npc-add-btn { box-shadow: inset 0 2px 4px rgba(255,255,255,0.5), 4px 4px 10px rgba(0,0,0,0.12); border: none !important; }

body[data-visual-style="skeuo"] .new-product-card { background-image: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(0,0,0,0.02)); border: 1px solid rgba(0,0,0,0.12); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 6px 14px rgba(0,0,0,0.14); }
body[data-visual-style="skeuo"] .npc-image-container { border: 3px solid #fffdf8; box-shadow: 0 0 0 1px rgba(0,0,0,0.15), inset 0 2px 5px rgba(0,0,0,0.12); }
body[data-visual-style="skeuo"] .npc-add-btn { background-image: linear-gradient(to bottom, rgba(255,255,255,0.35), transparent); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 3px 6px rgba(0,0,0,0.2); }
body[data-visual-style="skeuo"] .npc-add-btn:active { box-shadow: 0 1px 4px rgba(0,0,0,0.25) inset; transform: translateY(1px); }
body[data-visual-style="skeuo"] .npc-discount-badge, body[data-visual-style="skeuo"] .npc-rating { box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 2px 5px rgba(0,0,0,0.2); }

body[data-visual-style="spatial"] .new-product-card { box-shadow: var(--theme-shadow-md); }
body[data-visual-style="spatial"] .new-product-card:hover { box-shadow: var(--theme-shadow-lg); transform: translateY(-10px) scale(1.015); }

body[data-visual-style="image_first"] .npc-image-container { aspect-ratio: 4/5; }
body[data-visual-style="image_first"] .npc-image-container img.npc-image { padding: 4px; }
body[data-visual-style="image_first"] .new-product-card { border: none; box-shadow: none; background: transparent; padding: 0; }

body[data-visual-style="editorial"] .new-product-card { background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0; }
body[data-visual-style="editorial"] .npc-image-container { border-radius: 0; background-color: var(--section-bg-color); }
body[data-visual-style="editorial"] .npc-title { font-size: 1.05rem; text-transform: none; }
body[data-visual-style="editorial"] .npc-price-row { border-top: 1px solid var(--border-color); padding-top: 10px; }
body[data-visual-style="editorial"] .npc-add-btn { border-radius: 0; }

body[data-visual-style="immersive"] .new-product-card { border: none; box-shadow: 0 20px 40px rgba(0,0,0,0.35); }
body[data-visual-style="immersive"] .npc-image-container { border-radius: var(--theme-radius-image); }

body[data-visual-style="modern_bold"] .new-product-card { border: none; position: relative; }
body[data-visual-style="modern_bold"] .new-product-card::before { content: ""; position: absolute; top: 0; left: 10px; right: 10px; height: 4px; border-radius: 0 0 4px 4px; background-image: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); }
body[data-visual-style="modern_bold"] .npc-add-btn { background-image: linear-gradient(135deg, var(--button-bg), var(--secondary-color)); border: none !important; color: var(--button-text) !important; }
body[data-visual-style="modern_bold"] .npc-add-btn:hover { background-image: linear-gradient(135deg, var(--button-hover-bg), var(--primary-color)); }

/* Bento — first product card in each grid becomes a large feature tile on
   desktop (structural span, not just a bigger shadow). Mobile keeps the
   required 2-per-row grid untouched. */
@media (min-width: 769px) {
    body[data-visual-style="bento"] .product-grid { grid-auto-flow: dense; }
    body[data-visual-style="bento"] .product-grid > div:first-child,
    body[data-visual-style="bento"] .product-grid > .new-product-card:first-child {
        grid-column: span 2; grid-row: span 2;
    }
    body[data-visual-style="bento"] .product-grid > div:first-child .npc-image-container,
    body[data-visual-style="bento"] .product-grid > .new-product-card:first-child .npc-image-container {
        aspect-ratio: 1/1.1;
    }
}
body[data-visual-style="bento"] .new-product-card { border-radius: var(--theme-radius-card); }

/* ---------- PROMOTIONAL BANNER ---------- */
body[data-visual-style="glass"] .sf-promo-banner { background: rgba(255,255,255,0.15) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.35); }
body[data-visual-style="neo"] .sf-promo-banner { box-shadow: 10px 10px 20px rgba(163,171,186,0.4), -10px -10px 20px rgba(255,255,255,0.8); }
body[data-visual-style="clay"] .sf-promo-banner { box-shadow: inset 0 4px 10px rgba(255,255,255,0.3), 14px 14px 30px rgba(0,0,0,0.15); }
body[data-visual-style="skeuo"] .sf-promo-banner { box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 26px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.15); }
body[data-visual-style="spatial"] .sf-promo-banner { box-shadow: var(--theme-shadow-lg); }
body[data-visual-style="luxury_frame"] .sf-promo-banner { border-radius: 4px; border: 1px solid rgba(255,255,255,0.3); }
body[data-visual-style="editorial"] .sf-promo-banner { border-radius: 0; }

/* ---------- WHY CHOOSE US ---------- */
body[data-visual-style="glass"] .feature-card { background: rgba(255,255,255,0.35) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.4); }
body[data-visual-style="neo"] .feature-card { border: none !important; box-shadow: 8px 8px 16px rgba(163,171,186,0.4), -8px -8px 16px rgba(255,255,255,0.8) !important; }
body[data-visual-style="neo"] .feature-icon { box-shadow: inset 3px 3px 6px rgba(163,171,186,0.4), inset -3px -3px 6px rgba(255,255,255,0.7); border: none; }
body[data-visual-style="clay"] .feature-card { border: none !important; box-shadow: inset 0 3px 6px rgba(255,255,255,0.5), 10px 10px 20px rgba(0,0,0,0.1) !important; }
body[data-visual-style="skeuo"] .feature-card { background-image: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 10px rgba(0,0,0,0.14) !important; }
body[data-visual-style="luxury_frame"] .feature-card { border-radius: 0; background: transparent !important; box-shadow: none !important; border-top: 1px solid var(--border-color); }

/* ---------- REVIEWS ---------- */
body[data-visual-style="glass"] .review-card { background: rgba(255,255,255,0.35) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.4); }
body[data-visual-style="neo"] .review-card { border: none !important; box-shadow: 8px 8px 16px rgba(163,171,186,0.4), -8px -8px 16px rgba(255,255,255,0.8) !important; }
body[data-visual-style="clay"] .review-card { border: none !important; box-shadow: inset 0 3px 6px rgba(255,255,255,0.5), 10px 10px 20px rgba(0,0,0,0.1) !important; }
body[data-visual-style="skeuo"] .review-card { position: relative; background-image: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 10px rgba(0,0,0,0.14) !important; }
body[data-visual-style="skeuo"] .review-card::before { content: "\201C"; position: absolute; top: 6px; left: 16px; font-size: 3rem; font-family: Georgia, serif; color: var(--muted-color); opacity: 0.35; line-height: 1; }
body[data-visual-style="luxury_frame"] .review-card { border-radius: 0; border: none !important; border-top: 1px solid var(--border-color); background: transparent !important; }
body[data-visual-style="editorial"] .review-card { border-radius: 0; border: none !important; box-shadow: none !important; background: transparent !important; border-left: 3px solid var(--heading-color); padding-left: 1.5rem; }

/* ---------- NEWSLETTER ---------- */
body[data-visual-style="glass"] .newsletter-section { position: relative; }
body[data-visual-style="glass"] .newsletter-form { background: rgba(255,255,255,0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.4); border-radius: var(--theme-radius-section, 20px); padding: 20px; }
body[data-visual-style="neo"] .newsletter-input { border: none !important; box-shadow: inset 3px 3px 6px rgba(163,171,186,0.4), inset -3px -3px 6px rgba(255,255,255,0.7); }
body[data-visual-style="skeuo"] .newsletter-input { border: 1px solid rgba(0,0,0,0.15); box-shadow: inset 0 2px 4px rgba(0,0,0,0.12); }
body[data-visual-style="clay"] .newsletter-input { border: none !important; box-shadow: inset 0 3px 6px rgba(0,0,0,0.08); }

/* ---------- FOOTER ---------- */
body[data-visual-style="glass"] .store-footer { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
body[data-visual-style="skeuo"] .store-footer { box-shadow: 0 -1px 0 rgba(255,255,255,0.08) inset, 0 -6px 16px rgba(0,0,0,0.2); }
body[data-visual-style="luxury_frame"] .store-footer { border-top: 1px solid rgba(255,255,255,0.15); }
body[data-visual-style="spatial"] .store-footer { box-shadow: 0 -20px 40px rgba(0,0,0,0.06); }

/* ---------- GENERIC BUTTONS (site-wide .btn-primary, e.g. Shop/Cart/Checkout) ---------- */
body[data-visual-style="neo"] .btn-primary { border: none !important; box-shadow: 5px 5px 10px rgba(163,171,186,0.45), -5px -5px 10px rgba(255,255,255,0.85); }
body[data-visual-style="neo"] .btn-primary:active { box-shadow: inset 3px 3px 6px rgba(163,171,186,0.5), inset -3px -3px 6px rgba(255,255,255,0.8); }
body[data-visual-style="clay"] .btn-primary { border: none !important; box-shadow: inset 0 2px 4px rgba(255,255,255,0.5), 6px 6px 14px rgba(0,0,0,0.14); }
body[data-visual-style="skeuo"] .btn-primary { background-image: linear-gradient(to bottom, rgba(255,255,255,0.25), transparent); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 3px 8px rgba(0,0,0,0.25); }
body[data-visual-style="skeuo"] .btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(0,0,0,0.3) inset; }
body[data-visual-style="glass"] .btn-primary { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.4); }
body[data-visual-style="modern_bold"] .btn-primary { background-image: linear-gradient(135deg, var(--button-bg), var(--secondary-color)); }
body[data-visual-style="luxury_frame"] .btn-primary { text-transform: uppercase; letter-spacing: 1.5px; }

/* ---------- BACKDROP WASH ----------
   Glass-family translucency reads as "glass" only if there's something
   colorful behind it to blur — a fixed, decorative gradient wash gives every
   glass panel (header, cards, promo, reviews, newsletter) real depth to
   refract, instead of just looking like white-with-low-opacity. */
body[data-visual-style="glass"] body,
body[data-visual-style="glass"] { position: relative; }
body[data-visual-style="glass"]::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(circle at 15% 20%, rgba(125,211,252,0.35), transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(167,139,250,0.3), transparent 45%),
        radial-gradient(circle at 50% 80%, rgba(29,78,216,0.2), transparent 50%),
        var(--bg-color);
}

/* Spatial's layered-depth signature: a large soft radial glow anchored behind
   the hero, reinforcing "floating above the page" without any extra markup. */
body[data-visual-style="spatial"]::before {
    content: ""; position: fixed; top: -10%; left: 50%; transform: translateX(-50%);
    width: 140%; height: 60vh; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(8,145,178,0.08), transparent 65%);
}

/* Section 21: Category Showcase click-to-filter — theme-agnostic (works
   identically across all 8 families since it only reads existing theme
   tokens, no bespoke-per-family markup needed for this small a UI element). */
.sf-cat-trigger { transition: box-shadow var(--theme-transition, 0.2s ease), transform var(--theme-transition, 0.2s ease); }
.sf-cat-trigger.sf-cat-active { box-shadow: 0 0 0 2px var(--primary-color, #0f172a); border-radius: var(--theme-radius-image, 12px); }
.sf-cat-products { margin-top: 1rem; }
/* Category Tabs -> Products container: a single self-styled fragment (heading row + carousel, see category-products-fragment.php), not a bare card grid — no forced grid layout needed here. */
@keyframes sf-cat-products-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.sf-cat-products-loading, .sf-empty-cat { text-align: center; padding: 2.5rem; color: var(--muted-color, #64748b); }

/* Section 22: Shared Product Carousel Utility (theme-agnostic, applied to
   Featured Products / Best Sellers / New Arrivals / Category Carousels).
   Scoped to the compound selector .sf-carousel-track.product-grid so the
   plain .product-grid rule above (used nowhere outside these sections) is
   never affected unless a section explicitly opts in to carousel mode.
   ================================================================
   ORBIT / COVERFLOW ENGINE — ported verbatim (structure, custom-property
   names, transform recipe, transform-origin, transition timing/easing) from
   a supplied reference implementation, per explicit instruction to reuse
   that exact animation mechanism rather than the previous book-page-turn
   system. Every card is a position:absolute sibling stacked at the stage's
   center; carousel.js assigns each one a data-pos attribute (0 = active,
   ±1/±2/±3 = receded neighbors) and the seven --x/--y/--z/--ry/--rz/
   --scale/--opacity rule-sets below are what actually produce the fanned,
   depth-staggered arrangement — nothing else does. Only --orbit-gap/
   --orbit-card-w (and the mobile block's raw px offsets) were retargeted
   from the source's fixed hero-section sizing to this project's smaller,
   responsive in-page card sizing; the geometry/multipliers themselves are
   untouched. */
.sf-carousel-wrap {
    position: relative;
    overflow: hidden; /* clips the fanned side-cards to this row's own bounds so they can't spill into surrounding page content or cause horizontal page overflow */
    padding: 28px 0;
    /* Restored from the pre-orbit layout — --orbit-card-w below is the SAME
       cqw-based formula this project used before this animation swap, so
       cards render at their original pixel size at every viewport width;
       cqw only resolves against an ancestor with container-type set. */
    container-type: inline-size;
    container-name: sf-carousel;
}
.sf-carousel-track.product-grid {
    /* Card WIDTH — the single source of truth for every carousel card's
       size site-wide (Featured Products, Best Sellers, New Arrivals,
       Category Product Carousel, Order Summary carousel, Related
       Products all share this rule). Divisor increased from 3.6 to 4.2
       "cards" of viewport width to bring the compact look back — more
       cards visible at once, smaller card, smaller image (height and
       fan spacing below both derive from this one value, so they shrink
       proportionally with zero separate tuning). */
    --orbit-card-w: calc((100cqw - 3 * var(--theme-grid-gap, 24px)) / 4.2);
    /* Fan spacing ONLY (how far neighbor cards sit from the active one) —
       not a card-size property at all, so it's free to scale with the
       (restored, unchanged) card width rather than being a fixed px value
       calibrated against a different size. */
    --orbit-gap: calc(var(--orbit-card-w) * 0.55);
    position: relative;
    height: calc(var(--orbit-card-w) * 7 / 5 + 96px); /* card's own 5:7 aspect-ratio height + vertical breathing room for the arc's y-offsets */
    perspective: 1500px;
    perspective-origin: 50% 46%;
    touch-action: pan-y; /* horizontal drag is handled manually in JS; vertical stays native so page scroll can never get stuck */
    user-select: none;
    outline: none;
    cursor: grab;
}
.sf-carousel-track.product-grid.is-dragging { cursor: grabbing; }
/* One-time "you can swipe this" attention hint (carousel.js) — reuses the
   same --drag-x custom property the live drag already reads (see the
   .sf-carousel-track.product-grid > * transform above), just driven by a
   short scripted sequence instead of a live pointer position. Needs its
   own, snappier transition (the default is a 720ms card-to-card snap,
   much too slow for a ~350ms nudge) scoped to .is-hinting so it never
   affects the real drag/snap transitions. */
.sf-carousel-track.product-grid.is-hinting > * {
    transition: transform 350ms cubic-bezier(.4, 0, .2, 1);
}
.sf-carousel-track.product-grid > * {
    --x: 0px; --y: 0px; --z: 0px; --ry: 0deg; --rz: 0deg; --scale: 1; --opacity: 1;
    position: absolute;
    top: 50%; left: 50%;
    width: var(--orbit-card-w);
    aspect-ratio: 5 / 7;
    visibility: hidden;
    opacity: var(--opacity);
    pointer-events: none;
    transform:
        translate3d(calc(-50% + var(--x) + var(--drag-x, 0px)), calc(-50% + var(--y)), var(--z))
        rotateY(var(--ry))
        rotateZ(var(--rz))
        scale(var(--scale));
    transform-origin: 50% 84%;
    transition: transform 720ms cubic-bezier(.16,1,.3,1), opacity 360ms ease;
    will-change: transform, opacity;
}
.sf-carousel-track.product-grid.is-dragging > * { transition: none; }
.sf-carousel-track.product-grid > *[data-pos] { visibility: visible; pointer-events: auto; }
.sf-carousel-track.product-grid > *[data-pos="0"] {
    --x: 0px; --y: 12px; --z: 110px; --ry: 0deg; --rz: 0deg; --scale: 1; --opacity: 1;
    z-index: 12;
}
.sf-carousel-track.product-grid > *[data-pos="1"] {
    --x: calc(var(--orbit-gap) * 1); --y: -2px; --z: 28px; --ry: -16deg; --rz: 1deg; --scale: .80; --opacity: .88;
    z-index: 10;
}
.sf-carousel-track.product-grid > *[data-pos="-1"] {
    --x: calc(var(--orbit-gap) * -1); --y: -2px; --z: 28px; --ry: 16deg; --rz: -1deg; --scale: .80; --opacity: .88;
    z-index: 10;
}
.sf-carousel-track.product-grid > *[data-pos="2"] {
    --x: calc(var(--orbit-gap) * 1.82); --y: -28px; --z: -78px; --ry: -27deg; --rz: 2.2deg; --scale: .62; --opacity: .56;
    z-index: 8;
}
.sf-carousel-track.product-grid > *[data-pos="-2"] {
    --x: calc(var(--orbit-gap) * -1.82); --y: -28px; --z: -78px; --ry: 27deg; --rz: -2.2deg; --scale: .62; --opacity: .56;
    z-index: 8;
}
.sf-carousel-track.product-grid > *[data-pos="3"] {
    --x: calc(var(--orbit-gap) * 2.42); --y: -62px; --z: -168px; --ry: -35deg; --rz: 3.1deg; --scale: .47; --opacity: .22;
    z-index: 6;
}
.sf-carousel-track.product-grid > *[data-pos="-3"] {
    --x: calc(var(--orbit-gap) * -2.42); --y: -62px; --z: -168px; --ry: 35deg; --rz: -3.1deg; --scale: .47; --opacity: .22;
    z-index: 6;
}
@media (max-width: 1024px) {
    /* Was a fixed "2 full cards, no peek" formula (each card = 50% of the
       wrap) — too large for a tablet-width carousel row. Narrowed so
       ~2.6 cards are visible instead of exactly 2. */
    .sf-carousel-track.product-grid { --orbit-card-w: calc((100cqw - 2 * 15px) / 2.6); }
}
@media (max-width: 640px) {
    /* Was 82cqw — a single card took up 82% of the screen width, leaving
       only a sliver of the next card visible. This was the main source of
       the "cards look oversized on mobile" complaint. Narrowed so close to
       2 cards are visible at once instead of essentially 1. */
    .sf-carousel-track.product-grid { --orbit-card-w: 58cqw; }
    /* Positions ±3 are dropped on the smallest screens (matches the source
       implementation's own mobile override) — not enough width for a
       7-deep fan without the outermost pair reading as clutter. */
    .sf-carousel-track.product-grid > *[data-pos="3"],
    .sf-carousel-track.product-grid > *[data-pos="-3"] {
        visibility: hidden; pointer-events: none; opacity: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sf-carousel-track.product-grid > * { transition-duration: .01ms !important; }
}
/* Product images inside a carousel must never be natively drag-able (a
   browser can otherwise pick up an <img> and show a drag-ghost on
   mousedown/long-press, which reads as "the card is moving"). The
   draggable="false" HTML attribute on the <img> itself (see
   product-card/neo.php) is the primary, cross-browser fix; this is the
   WebKit/Blink-specific belt-and-braces backup. */
.sf-carousel-track.product-grid img { -webkit-user-drag: none; user-drag: none; }
.sf-carousel-arrow {
    position: absolute; top: 40%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--card-bg-color, #fff); box-shadow: var(--theme-shadow-md, 0 4px 14px rgba(0,0,0,0.12));
    border: none; cursor: pointer; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1; color: var(--heading-color, #111);
}
/* Positive insets (not negative) — the wrap is overflow:hidden (it's the
   real clipping viewport now, see above), so an arrow positioned outside
   its own box via a negative offset would be clipped and unclickable. */
.sf-carousel-arrow.prev { left: 8px; }
.sf-carousel-arrow.next { right: 8px; }
.sf-view-more-row { text-align: center; margin-top: 2rem; }
@media (max-width: 900px) { .sf-carousel-arrow { display: none; } }

/* Product Display Style: List / Line — the vertical-stack alternative to
   the carousel above (Admin -> Online Store -> Featured Products/Best
   Sellers/New Arrivals -> Display Style). Reuses the exact same card
   component (.pc-edit, product-card/editorial.php) the carousel already
   uses — only the container changes from a horizontal-scroll track to a
   centered vertical stack, so card design/spacing/badges are untouched.
   .pc-edit has no intrinsic width of its own outside .sf-carousel-track
   (which normally sizes it via --orbit-card-w), so a max-width is set
   here instead, capping it at a readable list-item size instead of
   stretching edge-to-edge at its tall 5:7 aspect ratio. */
.sf-product-list { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.sf-product-list .pc-edit { width: 100%; max-width: 360px; }
@media (max-width: 480px) {
    .sf-product-list { gap: 20px; }
    .sf-product-list .pc-edit { max-width: 300px; }
}