/* ============================================================
   Store Polish — additive UI/UX layer (does NOT override existing rules)
   - Scroll-reveal (one-shot, IntersectionObserver-driven)
   - 3D tilt / depth on hover (GPU-only)
   - Image fade-in on load
   - Subtle hero ambience (CSS-only)
   - Refined focus-visible across interactive elements
   - prefers-reduced-motion safety net (overrides ALL polish motion)
   ============================================================ */

/* -- 1. Motion tokens -------------------------------------------------- */
:root {
    --pp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --pp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --pp-reveal-dur: 620ms;
    --pp-press-dur: 120ms;
    --pp-focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

/* -- 2. Scroll-reveal -------------------------------------------------- */
/* Targets get [data-pp-reveal] (set by JS or template). They start hidden
   below their final position; the .pp-in class swaps them in. */
[data-pp-reveal] {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity var(--pp-reveal-dur) var(--pp-ease-out),
        transform var(--pp-reveal-dur) var(--pp-ease-out);
    will-change: opacity, transform;
}
[data-pp-reveal="left"]  { transform: translate3d(-22px, 0, 0); }
[data-pp-reveal="right"] { transform: translate3d(22px, 0, 0); }
[data-pp-reveal="zoom"]  { transform: scale(0.96); }
[data-pp-reveal].pp-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Stagger child reveal inside any container marked [data-pp-stagger]. */
[data-pp-stagger] > * { transition-delay: 0ms; }
[data-pp-stagger].pp-in > *:nth-child(1) { transition-delay: 40ms; }
[data-pp-stagger].pp-in > *:nth-child(2) { transition-delay: 90ms; }
[data-pp-stagger].pp-in > *:nth-child(3) { transition-delay: 140ms; }
[data-pp-stagger].pp-in > *:nth-child(4) { transition-delay: 190ms; }
[data-pp-stagger].pp-in > *:nth-child(5) { transition-delay: 240ms; }
[data-pp-stagger].pp-in > *:nth-child(6) { transition-delay: 290ms; }
[data-pp-stagger].pp-in > *:nth-child(7) { transition-delay: 340ms; }
[data-pp-stagger].pp-in > *:nth-child(8) { transition-delay: 390ms; }

/* -- 3. 3D tilt on hover (cards) -------------------------------------- */
/* CSS-only "lean toward you" effect — no JS, no per-frame work.
   Pointer-fine devices only; mobile keeps the existing flat hover. */
@media (hover: hover) and (pointer: fine) {
    .product-card,
    .hp-new-card,
    .hp-scroll-card,
    .hp-cat-card,
    .hp-promo {
        transform-style: preserve-3d;
        perspective: 900px;
    }
    /* Subtle 3D pop layered on top of the existing translateY hover.
       Uses :where() so it does NOT raise specificity above existing rules. */
    :where(.product-card, .hp-new-card, .hp-scroll-card, .hp-cat-card, .hp-promo):hover {
        will-change: transform;
    }
    /* JS sets --pp-tx and --pp-ty when pointer is over .pp-tilt. */
    .pp-tilt {
        transform-style: preserve-3d;
        perspective: 1000px;
        transition: transform 320ms var(--pp-ease-out);
    }
    .pp-tilt .pp-tilt-inner {
        transform:
            rotateX(var(--pp-ty, 0deg))
            rotateY(var(--pp-tx, 0deg))
            translateZ(0);
        transform-style: preserve-3d;
        transition: transform 220ms var(--pp-ease-out);
        will-change: transform;
    }
    .pp-tilt:hover .pp-tilt-inner {
        transition: none; /* live pointer follow */
    }
    /* Sheen that sweeps across an image when its card is hovered. */
    .pp-glare {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }
    .pp-glare::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            115deg,
            transparent 30%,
            rgba(255,255,255,0.18) 50%,
            transparent 70%
        );
        transform: translateX(-120%);
        transition: transform 720ms var(--pp-ease-out);
        pointer-events: none;
        z-index: 4;
        mix-blend-mode: screen;
    }
    .pp-glare:hover::after { transform: translateX(120%); }
}

/* -- 4. Hero ambience (CSS-only, GPU) --------------------------------- */
/* Soft floating orbs behind the hero glow. Pure transform animation. */
.hp-hero::before,
.hp-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(40px);
    opacity: 0.45;
    will-change: transform;
}
.hp-hero::before {
    width: 320px; height: 320px;
    left: -80px; top: 20%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 60%, transparent) 0%, transparent 70%);
    animation: ppFloatA 14s ease-in-out infinite;
}
.hp-hero::after {
    width: 380px; height: 380px;
    right: -100px; bottom: 10%;
    background: radial-gradient(circle, color-mix(in srgb, var(--secondary-color, var(--primary-color)) 50%, transparent) 0%, transparent 70%);
    animation: ppFloatB 18s ease-in-out infinite;
}
@keyframes ppFloatA {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(40px, -30px, 0) scale(1.08); }
}
@keyframes ppFloatB {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-30px, 20px, 0) scale(1.1); }
}

/* Subtle breath on hero product image (paused on hover so JS tilt wins). */
.hp-hero-product-img img {
    animation: ppBreath 6s ease-in-out infinite;
}
.hp-hero-product-img:hover img { animation-play-state: paused; }
@keyframes ppBreath {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* -- 5. Image fade-in on load ----------------------------------------- */
img[data-pp-fade] {
    opacity: 0;
    transition: opacity 480ms var(--pp-ease-out);
}
img[data-pp-fade].pp-loaded { opacity: 1; }

/* -- 6. Refined focus-visible (a11y) ---------------------------------- */
:where(a, button, [role="button"], input, select, textarea, summary)
    :focus-visible {
    outline: none;
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.filter-chip:focus-visible,
.category-pill:focus-visible,
.cart-trigger-pill:focus-visible,
.desktop-account-btn:focus-visible,
.desktop-search-btn:focus-visible,
.desktop-currency-btn:focus-visible,
.nav-expand-btn:focus-visible,
.hp-hero-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: var(--pp-focus-ring);
    border-radius: inherit;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--primary-color) !important;
    box-shadow: var(--pp-focus-ring);
}

/* -- 7. Micro-press on buttons (extra haptic feel) -------------------- */
.btn,
.hp-hero-btn,
.cart-trigger-pill,
.hp-promo-cta-outline,
.hp-promo-cta-full,
.sheet-add-btn,
.cart-checkout-btn,
.ft-newsletter-btn {
    transition:
        transform var(--pp-press-dur) var(--pp-ease-out),
        box-shadow var(--dur-fast, 180ms) var(--pp-ease-out),
        background var(--dur-fast, 180ms) var(--pp-ease-out),
        filter var(--dur-fast, 180ms) var(--pp-ease-out),
        border-color var(--dur-fast, 180ms) var(--pp-ease-out),
        color var(--dur-fast, 180ms) var(--pp-ease-out);
}
.btn:active,
.cart-trigger-pill:active,
.hp-promo-cta-outline:active,
.hp-promo-cta-full:active,
.sheet-add-btn:active:not(:disabled),
.cart-checkout-btn:active,
.ft-newsletter-btn:active {
    transform: scale(0.97);
}

/* -- 8. Smooth card lift sync (uses existing translateY but cleaner) -- */
.hp-promo,
.hp-cat-card,
.hp-scroll-card,
.hp-new-card,
.product-card {
    backface-visibility: hidden;
}

/* -- 9. Sticky CTA shimmer when stock is low (gentle attention) ------- */
.pd-badge-low-stock {
    position: relative;
    overflow: hidden;
}
.pd-badge-low-stock::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: translateX(-100%);
    animation: ppShine 2.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ppShine {
    0%, 60% { transform: translateX(-100%); }
    100%    { transform: translateX(120%); }
}

/* -- 10. Improved scroll-snap pacing for horizontal tracks ------------ */
.hp-scroll-track,
.hp-brands-track,
.hp-cat-track {
    scroll-padding-inline: 20px;
}

/* -- 11. Toast subtle slide-in (if a toast appears) ------------------- */
.toast,
.toast-container > * {
    animation: ppToastIn 320ms var(--pp-ease-out);
}
@keyframes ppToastIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* -- 12. Cart badge gentle pulse when item count > 0 ------------------ */
.cart-badge-pill:not(.hidden) {
    animation: ppBadgePulse 2.6s ease-in-out infinite;
}
@keyframes ppBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 0%, transparent); }
}

/* -- 13. Smoother sticky navbar shadow when scrolled ------------------ */
.store-navbar-compact.pp-scrolled {
    box-shadow:
        0 8px 28px rgba(0,0,0,0.08),
        0 2px 6px rgba(0,0,0,0.04);
}
body.dark-home .store-navbar-compact.pp-scrolled {
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}

/* -- 14. Section breathing room for revealed sections ----------------- */
/* Add a tiny "content-visibility" optimization for long-scroll sections.
   Keeps initial paint cheap on long product lists. */
.hp-products-scroll-section,
.hp-promo-section,
.hp-promos,
.hp-cat-showcase,
.hp-brands,
.hp-new-products {
    content-visibility: auto;
    contain-intrinsic-size: 1px 480px;
}

/* -- 15. Page transition inbound polish -------------------------------- */
/* Pair with view-transitions: gives non-VT browsers a softer first paint. */
@media not all and (prefers-reduced-motion: reduce) {
    main#ptContent { animation: ppPageIn 380ms var(--pp-ease-out) both; }
    @keyframes ppPageIn {
        from { opacity: 0.001; transform: translateY(10px); }
        to   { opacity: 1; transform: none; }
    }
}

/* -- 16. Reduced motion: kill all polish motion ------------------------ */
@media (prefers-reduced-motion: reduce) {
    [data-pp-reveal],
    [data-pp-reveal].pp-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .pp-tilt,
    .pp-tilt .pp-tilt-inner {
        transform: none !important;
        transition: none !important;
    }
    .pp-glare::after,
    .hp-hero::before,
    .hp-hero::after,
    .hp-hero-product-img img,
    .pd-badge-low-stock::after,
    .cart-badge-pill:not(.hidden),
    main#ptContent {
        animation: none !important;
        transform: none !important;
    }
    img[data-pp-fade] {
        opacity: 1 !important;
        transition: none !important;
    }
}

/* =====================================================================
   PART 2 — Substantive UX refactors
   Cart drawer breakdown, applied-filter chips, footer columns,
   scroll-to-top, inline checkout login, sticky sort bar.
   ===================================================================== */

/* -- Cart drawer: structured totals ----------------------------------- */
/* Cart panel is always dark — use light-on-dark colors directly. */
.cart-totals {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 0 4px;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 4px;
}
.cart-totals-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
}
.cart-totals-label { color: rgba(255,255,255,0.65); }
.cart-totals-value { color: #fff; font-weight: 600; }
.cart-totals-muted { color: rgba(255,255,255,0.55); }
.cart-totals-free { color: #22c55e !important; font-weight: 700; }
.cart-totals-total {
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px dashed rgba(255,255,255,0.12);
    font-size: 16px;
    font-weight: 800;
}
.cart-totals-total .cart-totals-label { color: #fff; font-weight: 800; }
.cart-totals-total .cart-totals-value,
.cart-totals-total .cart-total-amount { color: #fff; font-weight: 800; font-size: 18px; }

/* -- Free-shipping progress bar --------------------------------------- */
.cart-freeship-bar {
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    margin-bottom: 10px;
}
.cart-freeship-text {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.3;
}
.cart-freeship-bar.cart-freeship-done .cart-freeship-text { color: #22c55e; }
.cart-freeship-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    overflow: hidden;
}
.cart-freeship-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color, var(--primary-color)));
    transition: width 480ms var(--pp-ease-out);
}
.cart-freeship-bar.cart-freeship-done .cart-freeship-fill {
    background: linear-gradient(90deg, var(--success), color-mix(in srgb, var(--success) 60%, white));
}

/* -- "Continue shopping" secondary cart action ------------------------ */
.cart-continue-shopping {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cart-continue-shopping:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
}

/* -- Trust strip in cart ---------------------------------------------- */
.cart-trust-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 4px 0;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-wrap: wrap;
}
.cart-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cart-trust-item svg { color: #22c55e; flex-shrink: 0; }

/* -- Better savings row ----------------------------------------------- */
.cart-savings {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin: 8px 0;
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--success);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}
.cart-savings[style*="display: none"],
.cart-savings[style*="display:none"] { display: none !important; }

/* -- Checkout CTA with chevron ---------------------------------------- */
.cart-checkout-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
[dir="rtl"] .cart-checkout-btn svg { transform: scaleX(-1); }

/* -- Empty-cart CTA --------------------------------------------------- */
.cart-empty-cta {
    margin-top: 14px;
    padding: 10px 22px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    box-shadow: 0 0 20px color-mix(in srgb, var(--primary-color) 35%, transparent);
}
.cart-empty-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* -- Applied-filter chip bar (products page) -------------------------- */
.pp-applied-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 0 16px;
    margin: 0 0 8px;
    border-bottom: 1px solid var(--border-light);
}
.pp-applied-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-inline-end: 4px;
}
.pp-applied-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 12px;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
    font-family: inherit;
}
.pp-applied-chip:hover {
    background: color-mix(in srgb, var(--primary-color) 18%, transparent);
}
.pp-applied-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary-color) 20%, transparent);
}
.pp-applied-chip-x svg { width: 9px; height: 9px; color: var(--primary-color); }
.pp-applied-clear {
    margin-inline-start: auto;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.pp-applied-clear:hover { color: var(--danger); }

/* -- Sticky sort + count bar on products page ------------------------- */
.pp-sort-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0 12px;
    flex-wrap: wrap;
}
.pp-sort-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}
.pp-sort-count strong { color: var(--text-primary); font-weight: 800; }
.pp-sort-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pp-sort-label { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.pp-sort-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 8px 32px 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    background: var(--surface-solid);
    color: var(--text-primary);
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color var(--dur-fast) var(--ease);
}
[dir="rtl"] .pp-sort-select { padding: 8px 14px 8px 32px; background-position: left 10px center; }
.pp-sort-select:focus-visible { border-color: var(--primary-color); }
.pp-mobile-filter-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.pp-mobile-filter-btn:hover { background: var(--glass-strong); }
.pp-mobile-filter-btn .pp-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    background: var(--primary-color);
    color: white;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
}

/* -- Footer: multi-column on desktop, accordion on mobile -------------
   The footer (.ft) is ALWAYS dark, on every page (not theme-dependent),
   so colors must be hard-coded light-on-dark — don't use --text-* vars
   here (those flip with body.dark-home and break contrast elsewhere).
*/
@media (min-width: 768px) {
    .ft-accordions {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 32px 24px;
        align-items: start;
    }
    .ft-accordion-btn {
        pointer-events: none;
        cursor: default;
        padding: 0 0 14px !important;
        border-bottom: none !important;
        font-size: 13px;
        font-weight: 800 !important;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #ffffff !important;
        background: transparent !important;
    }
    .ft-accordion-btn > svg { display: none; }
    .ft-accordion-body {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0 !important;
        overflow: visible !important;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .ft-accordion-body p,
    .ft-accordion-body a {
        font-size: 13px;
        line-height: 1.6;
        color: rgba(255,255,255,0.65) !important;
        transition: color var(--dur-fast) var(--ease);
    }
    .ft-accordion-body a:hover { color: #ffffff !important; }
}

/* Mobile accordion buttons should also be readable on the dark footer */
@media (max-width: 767px) {
    .ft-accordion-btn { color: #ffffff !important; }
    .ft-accordion-body p,
    .ft-accordion-body a { color: rgba(255,255,255,0.65) !important; }
    .ft-accordion-body a:hover { color: #ffffff !important; }
}

/* -- Scroll-to-top button --------------------------------------------- */
.pp-scroll-top {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    z-index: 150;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.pp-scroll-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.pp-scroll-top:hover { filter: brightness(1.1); transform: translateY(-2px); }
.pp-scroll-top:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

@media (max-width: 768px) {
    .pp-scroll-top { bottom: 80px; }  /* avoid mobile sticky CTA */
}

/* -- Inline checkout login panel -------------------------------------- */
.co-auth-card {
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 22px 18px;
    box-shadow: var(--shadow-sm);
}
.co-auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--glass-strong);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 18px;
}
.co-auth-tab {
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur-fast) var(--ease);
}
.co-auth-tab.active {
    background: var(--surface-solid);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
}
.co-auth-fields { display: flex; flex-direction: column; gap: 12px; }
.co-auth-field { display: flex; flex-direction: column; gap: 5px; }
.co-auth-field label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.co-auth-input {
    padding: 11px 14px;
    background: var(--surface-solid);
    border: 1.5px solid var(--input-border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
    font-family: inherit;
}
.co-auth-input:focus { border-color: var(--primary-color); box-shadow: var(--pp-focus-ring); outline: none; }
.co-auth-submit {
    margin-top: 6px;
    padding: 13px 22px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: filter var(--dur-fast) var(--ease), transform var(--pp-press-dur) var(--ease);
    box-shadow: 0 0 20px color-mix(in srgb, var(--primary-color) 30%, transparent);
    font-family: inherit;
}
.co-auth-submit:hover { filter: brightness(1.1); }
.co-auth-submit:active { transform: scale(0.97); }
.co-auth-error {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    color: var(--danger);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.co-auth-hint {
    margin-top: 14px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.co-auth-hint a { color: var(--primary-color); font-weight: 600; }
.co-auth-divider {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 16px 0;
    position: relative;
}
.co-auth-divider::before,
.co-auth-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 24px);
    height: 1px;
    background: var(--border-light);
}
.co-auth-divider::before { left: 0; }
.co-auth-divider::after  { right: 0; }

/* -- Inline checkout summary aside ------------------------------------ */
.co-summary {
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
}
.co-summary-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 14px;
}
.co-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.co-summary-row strong { color: var(--text-primary); font-weight: 700; }
.co-summary-total {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
}
.co-summary-line {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
}
.co-summary-line:last-child { border-bottom: none; }
.co-summary-thumb {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--glass);
    flex-shrink: 0;
    overflow: hidden;
}
.co-summary-thumb img { width: 100%; height: 100%; object-fit: cover; }
.co-summary-name { flex: 1; min-width: 0; }
.co-summary-name strong { display: block; font-weight: 700; color: var(--text-primary); }
.co-summary-name span  { display: block; color: var(--text-muted); font-size: 11px; }
.co-summary-amt { font-weight: 700; color: var(--text-primary); white-space: nowrap; }

/* -- Cart drawer items: small visual upgrade -------------------------- */
.cart-empty {
    padding: 36px 24px;
    text-align: center;
    color: var(--text-secondary);
}
.cart-empty-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--glass-strong);
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
}
.cart-empty h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.cart-empty p { font-size: 13px; line-height: 1.5; }

/* -- Mobile filter button visibility ---------------------------------- */
@media (max-width: 900px) {
    .pp-mobile-filter-btn { display: inline-flex; }
}

/* -- Carousel drag affordance + safety ------------------------------- */
.hp-scroll-track,
.hp-brands-track,
.hp-cat-track {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    /* IMPORTANT: never let scroll-reveal hide these (interactive elements). */
    opacity: 1 !important;
    transform: none !important;
    /* Allow horizontal swipe on touch while letting page scroll vertically. */
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
}
.hp-scroll-track.pp-dragging,
.hp-brands-track.pp-dragging,
.hp-cat-track.pp-dragging {
    cursor: grabbing;
    /* Snap MUST be disabled mid-drag or it fights the user. */
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
}
.hp-scroll-track.pp-dragging *,
.hp-brands-track.pp-dragging *,
.hp-cat-track.pp-dragging * {
    pointer-events: none;
}

/* =====================================================================
   PART 3 — Visual redesign pass
   1. Product card badge stacking (no more overlapping labels)
   2. Product detail page modernization
   3. Product sheet modernization
   4. Futuristic homepage layer
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Product card badge system — fixed positional slots, no overlap
   --------------------------------------------------------------------- */

/* Image wrap becomes a positioning grid for badges */
.product-image-wrap { isolation: isolate; }

/* Status badge (Discontinued / Pre-Order / Sold Out): top-left, primary slot */
.product-image-wrap > .product-badge {
    top: 10px;
    left: 10px;
    z-index: 4;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 5px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
}
[dir="rtl"] .product-image-wrap > .product-badge { left: auto; right: 10px; }

/* Stronger versions for contrast */
.badge-discontinued {
    background: rgba(194,65,12,0.92) !important;
    color: #fff !important;
    border-color: rgba(194,65,12,0.4) !important;
}
.badge-preorder {
    background: rgba(139,92,246,0.92) !important;
    color: #fff !important;
    border-color: rgba(139,92,246,0.4) !important;
}
.badge-out {
    background: rgba(38,38,38,0.78) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.18) !important;
}
.badge-new {
    background: rgba(22,163,74,0.92) !important;
    color: #fff !important;
    border-color: rgba(22,163,74,0.4) !important;
}
.badge-sale {
    background: rgba(220,38,38,0.92) !important;
    color: #fff !important;
    border-color: rgba(220,38,38,0.4) !important;
}

/* Brand badge moves to BOTTOM-LEFT of the image (away from status) */
img.product-brand-badge {
    top: auto !important;
    bottom: 8px !important;
    inset-inline-start: 8px !important;
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    object-fit: contain !important;
    background: rgba(255,255,255,0.92) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 8px !important;
    padding: 4px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04) !important;
    z-index: 3 !important;
}
body.dark-home img.product-brand-badge {
    background: rgba(20,20,32,0.92) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08) !important;
}

/* Wishlist stays top-right but with a clean white pill on light background */
.product-wishlist-btn {
    background: rgba(255,255,255,0.92) !important;
    color: rgba(26,26,46,0.55) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    backdrop-filter: blur(8px);
}
.product-wishlist-btn:hover { color: #F87171 !important; background: rgba(255,255,255,1) !important; }
.product-wishlist-btn.active { color: #F87171 !important; background: rgba(255,255,255,1) !important; }
body.dark-home .product-wishlist-btn {
    background: rgba(20,20,32,0.85) !important;
    color: rgba(255,255,255,0.7) !important;
}

/* Hide footer stock badge when its top counterpart already says the same.
   Modern :has() — fails open in older browsers (badge stays). */
.product-card:has(.badge-discontinued) .product-stock-badge,
.product-card:has(.badge-preorder)     .product-stock-badge.preorder,
.product-card:has(.badge-out)          .product-stock-badge.out-of-stock {
    display: none;
}

/* Footer row: ensure wrapping so badges never collide on narrow widths */
.product-footer {
    gap: 6px 8px;
}
.product-stock-badge {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
}
.product-discount-badge {
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 10.5px;
}

/* ---------------------------------------------------------------------
   2. Product detail page (PDP) modernization
   Sharper hierarchy, stronger price, depth on gallery & buy box.
   --------------------------------------------------------------------- */

/* Gallery card: real depth, soft inner radius */
.pd-main-image-wrap {
    position: relative;
    border-radius: 20px !important;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--primary-color) 6%, transparent), transparent 55%),
        linear-gradient(180deg, #fafafe 0%, #f1f4fb 100%) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 12px 32px -16px rgba(15,23,42,0.18),
        0 0 0 1px rgba(15,23,42,0.04);
    transition: box-shadow 320ms var(--pp-ease-out);
}
.pd-main-image-wrap:hover {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 18px 40px -16px rgba(15,23,42,0.22),
        0 0 0 1px color-mix(in srgb, var(--primary-color) 12%, rgba(15,23,42,0.06));
}
body.dark-home .pd-main-image-wrap {
    background:
        radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--primary-color) 14%, transparent), transparent 55%),
        linear-gradient(180deg, #14141f 0%, #0c0c14 100%) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 18px 48px -20px rgba(0,0,0,0.6),
        0 0 0 1px rgba(255,255,255,0.06);
}

/* Bigger zoom button affordance */
.pd-zoom-btn {
    width: 40px !important;
    height: 40px !important;
    background: rgba(255,255,255,0.85) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.06);
    transition: transform 220ms var(--pp-ease-out), background 220ms var(--pp-ease-out);
}
.pd-zoom-btn:hover { transform: scale(1.06); background: #fff !important; }

/* Thumbnails: refined */
.pd-thumb {
    border-radius: 12px;
    border: 2px solid transparent;
    background: var(--surface-solid);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.06);
    transition: all 200ms var(--pp-ease-out);
}
.pd-thumb:hover { transform: translateY(-2px); }
.pd-thumb.pd-thumb-active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

/* Title: larger, tighter tracking */
.pd-title {
    font-size: clamp(26px, 3vw, 34px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    font-weight: 800 !important;
    margin: 6px 0 4px !important;
}

/* Subtitle: cleaner */
.pd-subtitle {
    font-size: 15px !important;
    color: var(--text-secondary) !important;
    line-height: 1.5 !important;
    margin: 0 0 16px !important;
}

/* PRICE: command attention */
.pd-price-stock-row { margin: 6px 0 22px !important; }
.pd-price-group { gap: 10px !important; flex-wrap: wrap; align-items: baseline; }
.pd-price {
    font-size: clamp(30px, 3.4vw, 38px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;
    line-height: 1 !important;
    background: linear-gradient(135deg, var(--text-primary), color-mix(in srgb, var(--primary-color) 45%, var(--text-primary)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pd-currency {
    font-size: 14px !important;
    color: var(--text-secondary) !important;
    font-weight: 700 !important;
}
.pd-original-price {
    font-size: 16px !important;
    color: var(--text-muted) !important;
}
.pd-discount-badge {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(220,38,38,0.25);
}

/* Chip row: stronger contrast on stock status */
.pd-chip {
    border-radius: 999px !important;
    padding: 5px 12px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}
.pd-chip-stock { background: rgba(22,163,74,0.12) !important; color: #15803d !important; }
.pd-chip-outstock { background: rgba(239,68,68,0.12) !important; color: #b91c1c !important; }
.pd-chip-preorder { background: rgba(139,92,246,0.12) !important; color: #6d28d9 !important; }

/* Service group cards: real surface, clear hover, modern indicator */
.pd-svc-group {
    border-radius: 16px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface-solid) !important;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
    margin-bottom: 12px;
}
body.dark-home .pd-svc-group {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
.pd-svc-group-top {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border-light) !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.015), transparent);
}
body.dark-home .pd-svc-group-top { background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent); }
.pd-svc-group-title {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-primary) !important;
}
.pd-svc-pill {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    background: var(--glass-strong) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-light);
}
.pd-svc-pill-rec {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 20%, transparent), color-mix(in srgb, var(--primary-color) 10%, transparent)) !important;
    color: var(--primary-color) !important;
    border-color: color-mix(in srgb, var(--primary-color) 25%, transparent) !important;
}
.pd-svc-list { padding: 6px !important; gap: 4px; }
.pd-svc-item {
    width: 100%;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    background: transparent !important;
    border: 1.5px solid transparent !important;
    transition: all 180ms var(--pp-ease-out) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
}
.pd-svc-item:hover { background: var(--glass-strong) !important; }
.pd-svc-item--on {
    background: color-mix(in srgb, var(--primary-color) 8%, var(--surface-solid)) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 12%, transparent);
}
body.dark-home .pd-svc-item--on {
    background: color-mix(in srgb, var(--primary-color) 18%, rgba(0,0,0,0.4)) !important;
}
.pd-svc-item-indicator {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    border: 2px solid var(--border) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 180ms var(--pp-ease-out);
}
.pd-svc-item--on .pd-svc-item-indicator {
    border-color: var(--primary-color) !important;
    background: var(--primary-color) !important;
    color: #fff !important;
}
.pd-svc-item-indicator-dot,
.pd-svc-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    transition: background 180ms var(--pp-ease-out);
}
.pd-svc-item--on .pd-svc-item-dot { background: #fff; }
.pd-svc-item-indicator svg { color: #fff; opacity: 0; transition: opacity 180ms var(--pp-ease-out); }
.pd-svc-item--on .pd-svc-item-indicator svg { opacity: 1; }
.pd-svc-item-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}
.pd-svc-item-price {
    margin-inline-start: auto;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}
.pd-svc-item-free {
    color: var(--success) !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Quantity + Add-to-cart: bigger and modern */
.pd-qty-cart-row {
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 4px 16px rgba(15,23,42,0.04);
    align-items: stretch !important;
    margin-top: 16px !important;
}
body.dark-home .pd-qty-cart-row {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.pd-qty-selector {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start !important;
}
.pd-qty-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pd-qty-controls {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--store-bg);
}
.pd-qty-controls button {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 160ms var(--pp-ease-out);
}
.pd-qty-controls button:hover:not(:disabled) { background: var(--glass-strong); }
.pd-qty-controls button:disabled { opacity: 0.3; cursor: not-allowed; }
.pd-qty-val {
    min-width: 28px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-align: center;
}
.pd-add-btn {
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em;
    padding: 14px 22px !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary-color) 20%, transparent),
        0 6px 20px color-mix(in srgb, var(--primary-color) 30%, transparent) !important;
    background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 65%, #000)) !important;
    transition: transform 160ms var(--pp-ease-out), box-shadow 220ms var(--pp-ease-out), filter 160ms var(--pp-ease-out) !important;
}
.pd-add-btn:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary-color) 30%, transparent),
        0 10px 28px color-mix(in srgb, var(--primary-color) 45%, transparent) !important;
}
.pd-add-btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }

/* Trust badges row: cleaner card */
.pd-trust-badges,
.pd-trust-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px;
}
.pd-trust-item,
.pd-trust-badge {
    background: var(--surface-solid);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    transition: all 180ms var(--pp-ease-out);
}
.pd-trust-item:hover,
.pd-trust-badge:hover {
    border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15,23,42,0.06);
}
.pd-trust-item svg,
.pd-trust-badge svg { color: var(--primary-color); }

/* Wishlist & Share row */
.pd-secondary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}
.pd-wishlist-btn,
.pd-share-btn {
    border-radius: 12px !important;
    padding: 11px 14px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    transition: all 180ms var(--pp-ease-out) !important;
}

/* Other Versions cards: depth + chevron animation */
.pd-versions-wrap {
    border-radius: 16px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface-solid) !important;
    overflow: hidden;
    margin: 14px 0;
}
.pd-versions-header {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border-light) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-secondary);
}
.pd-version-card {
    border-radius: 0 !important;
    border-bottom: 1px solid var(--border-light);
    transition: background 180ms var(--pp-ease-out);
}
.pd-version-card:last-child { border-bottom: none; }
.pd-version-card:hover { background: var(--glass-strong) !important; }
.pd-version-arrow { transition: transform 200ms var(--pp-ease-out); }
.pd-version-card:hover .pd-version-arrow { transform: translateX(3px); }
[dir="rtl"] .pd-version-card:hover .pd-version-arrow { transform: translateX(-3px) scaleX(-1); }
[dir="rtl"] .pd-version-arrow { transform: scaleX(-1); }

/* Breadcrumb: cleaner */
.pd-breadcrumb, .store-breadcrumb {
    margin: 14px 0 18px !important;
    font-size: 12.5px !important;
    color: var(--text-muted) !important;
}
.pd-breadcrumb a, .store-breadcrumb a {
    color: var(--text-secondary) !important;
    transition: color 160ms var(--pp-ease-out);
}
.pd-breadcrumb a:hover, .store-breadcrumb a:hover {
    color: var(--primary-color) !important;
}

/* Sticky cart bar — tidy hierarchy */
.pd-sticky-cart-bar {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: color-mix(in srgb, var(--surface-solid) 92%, transparent) !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -8px 24px rgba(15,23,42,0.08);
}

/* ---------------------------------------------------------------------
   3. Product sheet (bottom-sheet) modernization
   --------------------------------------------------------------------- */

/* Sheet background: subtle gradient depth */
.product-sheet {
    border-radius: 28px 28px 0 0 !important;
    background:
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--primary-color) 6%, transparent), transparent 60%),
        var(--surface-solid) !important;
}
body.dark-home .product-sheet {
    background:
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--primary-color) 16%, transparent), transparent 60%),
        #141420 !important;
}

/* Larger drag handle */
.sheet-drag-handle {
    width: 48px !important;
    height: 5px !important;
    background: var(--border) !important;
    border-radius: 999px !important;
}

/* Sheet close button: cleaner */
.sheet-close-btn {
    width: 38px !important;
    height: 38px !important;
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
    color: var(--text-primary) !important;
}

/* Sheet image area: gradient + radius */
.sheet-image-wrap {
    background:
        radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--primary-color) 7%, transparent), transparent 60%),
        linear-gradient(180deg, #fafafe 0%, #f1f4fb 100%) !important;
}
body.dark-home .sheet-image-wrap {
    background:
        radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--primary-color) 15%, transparent), transparent 60%),
        linear-gradient(180deg, #14141f 0%, #0c0c14 100%) !important;
}

/* Product name in sheet: bigger and tighter */
.sheet-product-name {
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
}

/* Price in sheet: stronger */
.sheet-price {
    font-size: 28px !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
}
.sheet-currency { font-weight: 700 !important; font-size: 13px !important; }

/* Sheet service group: matches PDP style */
.sheet-service-group {
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface-solid);
    margin-bottom: 10px;
    overflow: hidden;
}
body.dark-home .sheet-service-group {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}
.sheet-svc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    background: linear-gradient(180deg, rgba(0,0,0,0.015), transparent);
}
body.dark-home .sheet-svc-header { background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent); }
.sheet-service-group-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
}
.sheet-svc-type-label {
    margin-inline-start: auto;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
}
.sheet-service-options { padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.sheet-service-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    cursor: pointer;
    transition: all 180ms var(--pp-ease-out);
}
.sheet-service-btn:hover { background: var(--glass-strong); }
.sheet-service-btn.active {
    background: color-mix(in srgb, var(--primary-color) 8%, var(--surface-solid));
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 12%, transparent);
}
body.dark-home .sheet-service-btn.active {
    background: color-mix(in srgb, var(--primary-color) 18%, rgba(0,0,0,0.4));
}
.sheet-svc-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 180ms var(--pp-ease-out);
}
.sheet-service-btn.active .sheet-svc-indicator {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
}
.sheet-svc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    transition: background 180ms var(--pp-ease-out);
}
.sheet-service-btn.active .sheet-svc-dot { background: #fff; }
.sheet-svc-indicator svg { color: #fff; opacity: 0; transition: opacity 180ms var(--pp-ease-out); }
.sheet-service-btn.active .sheet-svc-indicator svg { opacity: 1; }
.sheet-service-btn-icon { font-size: 14px; }
.sheet-service-btn-name { font-size: 14px; font-weight: 600; }
.sheet-service-btn-price {
    margin-inline-start: auto;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
}
.sheet-service-btn:not(.active) .sheet-service-btn-price:not(:has(:not(.sheet-svc-free))) { color: var(--text-secondary); }

/* Sheet quantity + add-to-cart sticky CTA */
.sheet-qty-control {
    border-radius: 999px !important;
    overflow: hidden;
}
.sheet-qty-btn {
    width: 36px !important;
    height: 36px !important;
    border: none !important;
    border-radius: 0 !important;
}
.sheet-add-btn {
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 65%, #000)) !important;
    color: #fff !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary-color) 20%, transparent),
        0 8px 24px color-mix(in srgb, var(--primary-color) 32%, transparent) !important;
}
/* Disabled state — high contrast, no surprise red/blue clash */
.sheet-add-btn:disabled,
.sheet-add-btn[disabled] {
    background: rgba(0,0,0,0.06) !important;
    color: rgba(0,0,0,0.45) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    filter: none !important;
}
body.dark-home .sheet-add-btn:disabled,
body.dark-home .sheet-add-btn[disabled] {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.45) !important;
}
/* Discontinued: clearly a stop-sign, not the primary CTA.
   Boosted specificity to outrank both .sheet-add-btn and :disabled rules. */
button.sheet-add-btn.sheet-add-btn--discontinued,
button.sheet-add-btn.sheet-add-btn--discontinued:disabled,
button.sheet-add-btn[disabled].sheet-add-btn--discontinued {
    background: linear-gradient(135deg, #fef2f2, #fef3c7) !important;
    color: #b45309 !important;
    border: 1.5px solid rgba(180,83,9,0.25) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    filter: none !important;
}
body.dark-home button.sheet-add-btn.sheet-add-btn--discontinued,
body.dark-home button.sheet-add-btn.sheet-add-btn--discontinued:disabled,
body.dark-home button.sheet-add-btn[disabled].sheet-add-btn--discontinued {
    background: linear-gradient(135deg, rgba(180,83,9,0.22), rgba(180,83,9,0.1)) !important;
    color: #fbbf24 !important;
    border-color: rgba(251,191,36,0.35) !important;
}
button.sheet-add-btn.sheet-add-btn--discontinued svg {
    color: currentColor;
    opacity: 1;
}
/* Pre-order / back-order also need their own treatment so they don't
   inherit a colored bg that fights the primary gradient. */
.sheet-add-btn.sheet-preorder-btn {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
    color: #fff !important;
    box-shadow:
        0 0 0 1px rgba(139,92,246,0.3),
        0 8px 24px rgba(139,92,246,0.35) !important;
}
.sheet-wishlist-btn {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    background: var(--surface-solid) !important;
    border: 1.5px solid var(--border) !important;
    transition: all 180ms var(--pp-ease-out) !important;
}
.sheet-wishlist-btn:hover {
    border-color: #F87171 !important;
    color: #F87171 !important;
}
.sheet-view-details {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 0 !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    font-weight: 600;
    transition: color 180ms var(--pp-ease-out) !important;
}
.sheet-view-details:hover { color: var(--primary-color) !important; }

/* Hide legacy lube section when the modern service-groups renderer is active.
   (CSS belt-and-suspenders alongside the JS guard.) */
.sheet-services:not(:empty) ~ .sheet-lube-service { display: none !important; }

/* Sheet badges chip row */
.sheet-chip {
    border-radius: 999px !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

/* ---------------------------------------------------------------------
   4. Futuristic homepage layer
   Aurora + grid + scanline + ambient orb depth. All transform/opacity.
   --------------------------------------------------------------------- */

/* Aurora background under the hero, dark-home only */
body.dark-home {
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--primary-color) 28%, transparent), transparent 70%),
        radial-gradient(ellipse 60% 40% at 90% 30%, color-mix(in srgb, var(--secondary-color, var(--primary-color)) 22%, transparent), transparent 70%),
        radial-gradient(ellipse 60% 40% at 10% 70%, color-mix(in srgb, var(--primary-color) 18%, transparent), transparent 70%),
        #07070d;
}

/* Hero: deeper aurora layered backdrop */
body.dark-home .hp-hero {
    background:
        radial-gradient(ellipse 60% 70% at 50% 110%, color-mix(in srgb, var(--primary-color) 30%, transparent), transparent 70%),
        radial-gradient(ellipse 50% 60% at 10% 10%, color-mix(in srgb, var(--secondary-color, var(--primary-color)) 22%, transparent), transparent 70%),
        radial-gradient(ellipse 50% 60% at 90% 10%, color-mix(in srgb, #5b3bff 30%, transparent), transparent 70%),
        linear-gradient(180deg, #0a0a14 0%, #050509 100%) !important;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

/* Subtle grid overlay on the hero (futuristic) */
body.dark-home .hp-hero .hp-hero-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, black, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 75%);
    pointer-events: none;
    opacity: 0.7;
}

/* Scanline glow line */
body.dark-home .hp-hero::before {
    background:
        radial-gradient(circle at center, color-mix(in srgb, var(--primary-color) 65%, transparent) 0%, transparent 60%) !important;
    width: 460px !important;
    height: 460px !important;
    filter: blur(60px) !important;
    opacity: 0.55 !important;
    top: 28% !important;
    animation: ppFloatA 18s ease-in-out infinite !important;
}
body.dark-home .hp-hero::after {
    background:
        radial-gradient(circle at center, color-mix(in srgb, var(--secondary-color, #6366f1) 60%, transparent) 0%, transparent 60%) !important;
    width: 420px !important;
    height: 420px !important;
    filter: blur(60px) !important;
    opacity: 0.5 !important;
    animation: ppFloatB 22s ease-in-out infinite !important;
}

/* Hero title: futuristic gradient text */
.hp-hero-title {
    background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--primary-color) 55%, #ffffff) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 24px color-mix(in srgb, var(--primary-color) 35%, transparent));
}

/* Hero subtitle: tracking + soft glow */
.hp-hero-sub {
    text-transform: uppercase;
    letter-spacing: 0.25em !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: color-mix(in srgb, var(--primary-color) 60%, white) !important;
    padding: 6px 14px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 40%, transparent);
    border-radius: 999px;
    display: inline-block;
    backdrop-filter: blur(6px);
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

/* Hero CTA: glowing pill */
.hp-hero-btn {
    background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 65%, #5b3bff)) !important;
    border: none !important;
    color: #fff !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary-color) 35%, transparent),
        0 0 32px color-mix(in srgb, var(--primary-color) 55%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.25) !important;
    padding: 14px 32px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}
.hp-hero-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 900ms var(--pp-ease-out);
    pointer-events: none;
}
.hp-hero-btn:hover::after { transform: translateX(120%); }
.hp-hero-btn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary-color) 50%, transparent),
        0 0 48px color-mix(in srgb, var(--primary-color) 75%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

/* Hero product image: ring + glow */
.hp-hero-product-img::before {
    content: "";
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 30%, transparent), transparent 65%);
    z-index: -1;
    filter: blur(30px);
    animation: ppHaloPulse 6s ease-in-out infinite;
}
@keyframes ppHaloPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.08); opacity: 0.9; }
}

/* Section titles on home: futuristic accent */
body.dark-home .hp-section-title {
    background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--primary-color) 40%, #ffffff));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.dark-home .hp-section-header {
    position: relative;
}
body.dark-home .hp-section-header::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--primary-color), transparent);
    box-shadow: 0 0 12px var(--primary-color);
    opacity: 0.7;
}
[dir="rtl"] body.dark-home .hp-section-header::before { left: auto; right: 20px; }

/* Brand chips: ring glow on hover */
body.dark-home .hp-brand-chip img {
    border: 2px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.03) !important;
    transition: all 280ms var(--pp-ease-out);
}
body.dark-home .hp-brand-chip:hover img {
    border-color: var(--primary-color) !important;
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--primary-color) 20%, transparent),
        0 0 28px color-mix(in srgb, var(--primary-color) 40%, transparent) !important;
    transform: scale(1.08) translateY(-2px);
}

/* Product cards on home (dark) get cleaner depth */
body.dark-home .hp-new-card,
body.dark-home .hp-scroll-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    transition: all 320ms var(--pp-ease-out);
}
body.dark-home .hp-new-card:hover,
body.dark-home .hp-scroll-card:hover {
    border-color: color-mix(in srgb, var(--primary-color) 40%, rgba(255,255,255,0.12)) !important;
    box-shadow:
        0 18px 40px rgba(0,0,0,0.5),
        0 0 0 1px color-mix(in srgb, var(--primary-color) 30%, transparent),
        0 0 32px color-mix(in srgb, var(--primary-color) 18%, transparent) !important;
}

/* Promo cards: glowing edges */
body.dark-home .hp-promo {
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    transition: all 320ms var(--pp-ease-out);
}
body.dark-home .hp-promo:hover {
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow:
        0 24px 48px rgba(0,0,0,0.55),
        0 0 36px color-mix(in srgb, var(--primary-color) 22%, transparent);
    transform: translateY(-4px);
}

/* CTA outline on promos: shinier */
body.dark-home .hp-promo-cta-outline {
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255,255,255,0.18) !important;
    transition: all 220ms var(--pp-ease-out);
}
body.dark-home .hp-promo-cta-outline:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 28px color-mix(in srgb, var(--primary-color) 50%, transparent) !important;
}

/* Hero glow ring for product image (when image present) */
.hp-hero-product-img {
    position: relative;
    isolation: isolate;
}
.hp-hero-product-img::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            color-mix(in srgb, var(--primary-color) 35%, transparent) 90deg,
            transparent 180deg,
            color-mix(in srgb, var(--secondary-color, #6366f1) 30%, transparent) 270deg,
            transparent 360deg
        );
    filter: blur(40px);
    opacity: 0.7;
    z-index: -1;
    animation: ppHeroRing 14s linear infinite;
}
@keyframes ppHeroRing {
    to { transform: rotate(360deg); }
}

/* Reduced motion safety for new home animations */
@media (prefers-reduced-motion: reduce) {
    .hp-hero-product-img::before,
    .hp-hero-product-img::after,
    .hp-hero-btn::after {
        animation: none !important;
        transform: none !important;
    }
}

/* On light home (other pages), don't apply the dark-only aurora */
body:not(.dark-home) .hp-hero-title,
body:not(.dark-home) .hp-section-title {
    background: none;
    -webkit-text-fill-color: initial;
    color: var(--text-primary);
}