/* =====================================================================
   DESIGN TOKENS
   ---------------------------------------------------------------------
   The Axil theme (style.min.css) already ships a token layer. Two gaps
   in it caused most of the drift on this site, so both are repaired here
   rather than patched selector-by-selector:

   1. The brand indigo was never a token. Every section that needed it
      hard-coded its own near-miss: #5865ff, #5860ff, #5046e5, #4b46ff,
      #4435ff. Five colours doing one job. --ds-brand now owns it.

   2. --color-body was #777777, which is 4.48:1 on white and fails
      WCAG AA for normal text. It is a theme-wide token, so the failure
      showed up everywhere it was used. Repaired below to 6.1:1.

   custom.css loads after style.min.css, so these overrides win.
===================================================================== */

:root {
    /* --- Brand indigo ------------------------------------------------ */
    --ds-brand-700: #3730a3;
    --ds-brand-600: #4338ca;
    --ds-brand: #4f46e5;
    --ds-brand-400: #6366f1;
    --ds-brand-50: #eef2ff;

    /* --- Ink (all ratios measured on #ffffff) ------------------------ */
    --ds-ink: #0f1115; /* 18.4:1 headings          */
    --ds-ink-2: #3d424d; /* 10.1:1 strong body       */
    --ds-ink-3: #5b6270; /*  6.1:1 body / muted      */
    --ds-ink-4: #6b7280; /*  4.8:1 de-emphasised meta */

    /* --- Surfaces ---------------------------------------------------- */
    --ds-surface: #ffffff;
    --ds-surface-2: #f7f8fa;
    --ds-surface-3: #eef0f4;
    --ds-border: #e4e7ec;
    --ds-border-strong: #d3d8e0;

    /* --- Trust accent (in-stock, guarantees, confirmations) ---------- */
    --ds-green: #15803d;
    --ds-green-50: #ecfdf3;

    /* --- Spacing scale ----------------------------------------------- */
    --ds-1: 4px;
    --ds-2: 8px;
    --ds-3: 12px;
    --ds-4: 16px;
    --ds-5: 24px;
    --ds-6: 32px;
    --ds-7: 48px;
    --ds-8: 64px;
    --ds-9: 80px;

    /* --- Radius ------------------------------------------------------ */
    --ds-r-sm: 8px;
    --ds-r-md: 12px;
    --ds-r-lg: 16px;
    --ds-r-xl: 20px;
    --ds-r-pill: 999px;

    /* --- Elevation --------------------------------------------------- */
    --ds-shadow-1:
        0 1px 2px rgba(15, 17, 21, 0.04), 0 1px 3px rgba(15, 17, 21, 0.06);
    --ds-shadow-2:
        0 2px 4px rgba(15, 17, 21, 0.04), 0 6px 16px rgba(15, 17, 21, 0.07);
    --ds-shadow-3:
        0 4px 8px rgba(15, 17, 21, 0.05), 0 16px 40px rgba(15, 17, 21, 0.11);

    /* --- Motion ------------------------------------------------------ */
    /* ease-out-quint: fast departure, long settle. No bounce. */
    --ds-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ds-fast: 160ms;
    --ds-base: 240ms;

    /* --- Semantic z-index scale -------------------------------------- */
    /* One ladder so header chrome, dropdowns and the search modal stack in
       a defined order instead of trading arbitrary 9/999/99999 values. */
    --ds-z-header: 100;
    --ds-z-dropdown: 200;
    --ds-z-offcanvas: 900;
    --ds-z-modal: 1000;

    /* --- Repaired theme tokens --------------------------------------- */

    /* Was #777777 — 4.48:1 on white, failing AA for normal text. */
    --color-body: #5b6270;

    /* The theme's accent tokens both pointed at #3577f0, a blue that is
     not the brand indigo. That put two different blues on the same page:
     anything styled by the theme (Add to Cart, "View All", links) came
     out #3577f0 while anything added since came out #4f46e5. Repointing
     them here fixes every one of those in one place instead of chasing
     individual selectors.

     Primary and secondary stay distinct from each other so any
     hover/active pairs the theme builds on them still read as a change. */
    --color-primary: #4f46e5;
    --color-secondary: #4338ca;
    --light-primary: #6366f1;
}

/* =====================================================================
   GLOBAL POLISH
===================================================================== */

/* Visible keyboard focus everywhere. The theme sets `outline: none` in
   several places; this restores a consistent, high-contrast ring for
   keyboard users only, so mouse users never see it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ds-brand);
    outline-offset: 3px;
    border-radius: var(--ds-r-sm);
}

/* Screen-reader-only text that stays focusable. */
.cs-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Headings wrap into even lines instead of leaving one orphaned word. */
.cs-hero-title,
.cs-hero-gradient-title,
.browse-title,
.section-title-wrapper .title,
.section-title-border .title {
    text-wrap: balance;
}

.cs-hero-description,
.browse-desc {
    text-wrap: pretty;
}

/* Motion is a preference, not a given. Every transition and animation
   collapses to an instant state change when the user asks for that. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        /* Negative delay starts every animation already finished, so staggered
       entrances land on their end state instead of holding content
       invisible for the length of the delay. */
        animation-delay: -1ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================
      AGE VERIFICATION POPUP
===================================== */

.age-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
}

/* POPUP */
.age-popup {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 18px;
    padding: 32px 28px 24px;
    text-align: center;
    box-shadow: 0 30px 70px rgba(15, 17, 21, 0.28);
    animation: popupShow 0.35s var(--ds-ease);
}

/* Animation */

@keyframes popupShow {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ICON */

/* Was a #c9c9e8-to-white gradient disc. Flat brand tint instead — the
   gradient added nothing and put a second, off-palette lilac into a
   panel that only needs one accent. */
.age-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--ds-5);
    border-radius: 50%;
    background: var(--ds-brand-50);
    display: flex;
    align-items: center;
    justify-content: center;
}

.age-icon i {
    font-size: 26px;
    color: var(--ds-brand-600);
}

/* TITLE */

.age-popup h2 {
    font-size: clamp(22px, 18px + 0.8vw, 26px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--ds-ink);
    margin: 0 0 var(--ds-3);
    text-wrap: balance;
}

/* DESCRIPTION */
.age-description {
    font-size: 15px;
    /* was `font-weight: 10` — not a usable value; browsers clamp it to the
     thinnest face available, which is why this read so faint. */
    font-weight: 400;
    line-height: 1.6;
    margin: 0 auto var(--ds-5);
    max-width: 34ch;
    color: var(--ds-ink-3);
    text-wrap: pretty;
}

/* HEALTH WARNING — legally mandated, so it gets the emphasis that the
   softer confirmation line used to take. Amber is the one warm colour on
   the page and it is here on purpose: it is the standard signal for a
   health caution and should not be mistaken for brand decoration. */
.health-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;

    margin: 0 0 var(--ds-5);
    padding: 12px 14px;

    border-radius: var(--ds-r-sm);
    background: #fff8ed;
    border: 1px solid #f5dfb8;

    font-size: 13.5px;
    line-height: 1.5;
    color: #6b4708;
}

.health-warning i {
    font-size: 14px;
    line-height: 1.45;
    /* Darkened from #c07b0a, which measured 3.27:1 on this ground. It is
     decorative so AA does not strictly demand 4.5, but a mandated health
     warning is the wrong place to rely on that exemption. */
    color: #9a6206;
    flex-shrink: 0;
}

.health-warning strong {
    font-weight: 700;
    color: #5a3c07;
}

/* BUTTONS */

.age-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Common Button Style */

.age-buttons button {
    /* Flex-centre the label so it sits dead-centre regardless of the theme's
       global `button { line-height: normal }` reset — a plain fixed-height
       button leaves the text baseline-aligned and reads as bottom-heavy. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 var(--ds-4);
    border-radius: var(--ds-r-sm);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color var(--ds-fast) var(--ds-ease),
        border-color var(--ds-fast) var(--ds-ease),
        color var(--ds-fast) var(--ds-ease);
}

/* Decline.

   This was 35% wide at 12px against a large gradient primary — small
   enough that it nudged people toward "18 or older" regardless of age.
   On a legal age gate that nudge is the one thing the control must not
   do, so both options are now legible and comfortably clickable. The
   primary is still visually primary; it just no longer wins by making
   the alternative hard to find. */
.under-age {
    flex: 1 1 42%;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--ds-border-strong);
    color: var(--ds-ink);
}

.under-age:hover {
    background: var(--ds-surface-2);
    border-color: var(--ds-ink-4);
    color: var(--ds-ink);
}

/* Enter */

.enter-age {
    flex: 1 1 58%;
    min-width: 0;
    border: 1px solid var(--ds-brand);
    background: var(--ds-brand);
    color: #fff;
}

.enter-age:hover {
    background: var(--ds-brand-600);
    border-color: var(--ds-brand-600);
    color: #fff;
}

/* Confirmation line — supporting text under the choice, not a boxed
   callout competing with the health warning above it. */
.age-confirm {
    margin: var(--ds-4) 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ds-ink-4);
}

/* =====================================
        TABLET
===================================== */

@media (max-width: 768px) {
    .age-popup {
        width: 90%;
        padding: 35px 25px;
    }

    .age-popup h2 {
        font-size: 26px;
    }

    .age-description {
        font-size: 16px;
    }

    .age-buttons {
        flex-direction: column;
    }

    .age-buttons button {
        width: 100%;
        /* Reset the row-layout flex split. Once the container is a column the
           flex-basis (58%/42%) governs the MAIN axis = height, which overrode
           `height` and collapsed each button to a sliver. `0 0 auto` hands
           sizing back to the height property. */
        flex: 0 0 auto;
    }
}

/* =====================================
        MOBILE
===================================== */

@media (max-width: 480px) {
    .age-popup {
        border-radius: 22px;
        padding: 30px 18px;
    }
    .age-description {
        font-size: 16px;
    }

    .health-warning {
        font-size: 16px;
    }

    .age-icon {
        width: 75px;
        height: 75px;
    }

    .age-icon i {
        font-size: 32px;
    }

    .age-popup h2 {
        font-size: 27px;
    }

    .age-warning {
        font-size: 12px;
        padding: 15px;
    }

    .age-buttons button {
        /* Medium, tap-friendly pills on phones. Centring is handled by the
           flex + line-height:1 on the base rule, so the height never leaves
           the label sitting low. */
        height: 50px;
        padding: 0 24px;
        border-radius: 25px;
        font-size: 15.5px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }
}

/*==========================================
        ZENO PREMIUM OFFER BANNER
==========================================*/

#zenoPromoBanner {
    width: 100%;
    padding: 18px 28px;
    background: linear-gradient(90deg, #5860ff 70%, #8ea8ff 100%);
    overflow: hidden;
}

.zenoPromoContainer {
    max-width: 1380px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/*--------------------
LEFT
--------------------*/

.zenoPromoLeft {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
}

.zenoIconCircle {
    width: 58px;
    height: 58px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.14);

    border: 1px solid rgba(255, 255, 255, 0.18);

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    flex-shrink: 0;
}

.zenoIconCircle svg {
    width: 24px;
    height: 24px;
}

.zenoPromoText {
    display: flex;
    flex-direction: column;
}

.zenoSmallText {
    color: #f2f0ff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 3px;
}

.zenoPromoText h2 {
    margin: 0;

    color: #fff;

    font-size: 32px;

    line-height: 1.1;

    font-weight: 700;
}

.zenoPromoText h2 span {
    text-decoration: underline;
}

.zenoPromoText p {
    margin-top: 6px;

    color: #eef2ff;

    font-size: 15px;

    line-height: 1.4;
}

/*--------------------
RIGHT BUTTON
--------------------*/

.zenoPromoBtn {
    background: #fff;

    color: #4b46ff;

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 24px;

    border-radius: 999px;

    font-size: 16px;

    font-weight: 600;

    white-space: nowrap;

    transition: 0.3s;

    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.zenoPromoBtn:hover {
    transform: translateY(-2px);
}

.zenoCountry {
    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: #eef2ff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 700;
}

.zenoPromoBtn strong {
    text-decoration: underline;
}

/*=================================
Laptop
=================================*/

@media (max-width: 1200px) {
    .zenoPromoText h2 {
        font-size: 28px;
    }

    .zenoPromoBtn {
        font-size: 15px;
    }
}

/*=================================
Tablet
=================================*/

@media (max-width: 992px) {
    #zenoPromoBanner {
        padding: 18px;
    }

    .zenoPromoContainer {
        flex-direction: column;

        text-align: center;

        gap: 18px;
    }

    .zenoPromoLeft {
        flex-direction: column;

        gap: 14px;
    }

    .zenoPromoText h2 {
        font-size: 26px;
    }

    .zenoPromoBtn {
        width: auto;
    }
}

/*=================================
Mobile
=================================*/

@media (max-width: 768px) {
    /* Makes it look like a premium floating card */

    #zenoPromoBanner {
        margin: 12px;

        width: calc(100% - 24px);

        border-radius: 22px;

        padding: 14px 16px;

        box-shadow: 0 10px 28px rgba(25, 25, 60, 0.16);
    }

    .zenoPromoContainer {
        gap: 12px;
    }

    .zenoPromoLeft {
        gap: 12px;
    }

    .zenoIconCircle {
        width: 46px;
        height: 46px;
    }

    .zenoIconCircle svg {
        width: 20px;
        height: 20px;
    }

    .zenoSmallText {
        font-size: 10px;

        margin-bottom: 2px;
    }

    .zenoPromoText h2 {
        font-size: 19px;

        line-height: 1.2;
    }

    .zenoPromoText p {
        margin-top: 4px;

        font-size: 12px;
    }

    .zenoPromoBtn {
        width: 100%;

        justify-content: center;

        padding: 10px 16px;

        font-size: 13px;

        border-radius: 50px;
    }

    .zenoCountry {
        width: 28px;
        height: 28px;

        font-size: 12px;
    }
}

/*=================================
Small Mobile
=================================*/

@media (max-width: 480px) {
    #zenoPromoBanner {
        margin: 10px;

        width: calc(100% - 20px);

        padding: 12px 14px;

        border-radius: 20px;
    }

    .zenoIconCircle {
        width: 42px;
        height: 42px;
    }

    .zenoPromoText h2 {
        font-size: 17px;
    }

    .zenoPromoText p {
        font-size: 11px;
    }

    .zenoSmallText {
        font-size: 9px;
    }

    .zenoPromoBtn {
        padding: 9px 14px;

        font-size: 12px;
    }

    .zenoCountry {
        width: 26px;
        height: 26px;

        font-size: 11px;
    }
}

/* ================================
   PREMIUM HERO SECTION
================================ */

.cs-hero-section {
    position: relative;

    width: 100%;

    /* Was a stock pastel JPEG (bg/bg-image-4.jpg): a muddy blur that added
     an image request, washed the type out, and carried no brand. The
     field is now drawn in CSS — see .cs-hero-bg below. */
    background-image: none !important;
    background: linear-gradient(180deg, #f2f3ff 0%, #f9f9fe 46%, #ffffff 100%);

    overflow: hidden;
    padding: clamp(56px, 5.6vw, 104px) 20px;
}

/* ---- Animated background field ------------------------------------- */

.cs-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Soft colour blooms. Built from radial-gradients rather than a blurred
   solid — same softness, but no `filter: blur()` repaint cost across a
   full-bleed area. */
.cs-hero-blob {
    position: absolute;
    display: block;
    border-radius: 50%;
    will-change: transform;
}

/* Positioned to frame the headline rather than pool at the edges: two
   blooms shoulder the type from either side, the third lifts the base. */
.cs-hero-blob--1 {
    width: 48vw;
    height: 48vw;
    top: -14%;
    left: -12%;
    background: radial-gradient(
        circle at center,
        rgba(79, 70, 229, 0.36),
        rgba(79, 70, 229, 0) 66%
    );
    animation: csDrift1 26s var(--ds-ease) infinite;
}

.cs-hero-blob--2 {
    width: 44vw;
    height: 44vw;
    top: -4%;
    right: -14%;
    background: radial-gradient(
        circle at center,
        rgba(99, 102, 241, 0.32),
        rgba(99, 102, 241, 0) 68%
    );
    animation: csDrift2 32s var(--ds-ease) infinite;
}

.cs-hero-blob--3 {
    width: 56vw;
    height: 40vw;
    bottom: -30%;
    left: 24%;
    background: radial-gradient(
        ellipse at center,
        rgba(56, 189, 248, 0.22),
        rgba(56, 189, 248, 0) 68%
    );
    animation: csDrift3 38s var(--ds-ease) infinite;
}

/* Fine dot lattice, masked to fade out before it reaches any edge so it
   reads as texture rather than as a pattern that got cut off. */
.cs-hero-grid {
    position: absolute;
    inset: 0;
    /* Kept faint: at 0.16 the lattice read as graph paper and competed with
     the headline. It should register as texture, not as a grid. */
    background-image: radial-gradient(
        rgba(15, 17, 21, 0.09) 1px,
        transparent 1px
    );
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(
        ellipse 60% 54% at 50% 42%,
        #000 18%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 60% 54% at 50% 42%,
        #000 18%,
        transparent 100%
    );
}

@keyframes csDrift1 {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(7%, 5%, 0) scale(1.14);
    }
}

@keyframes csDrift2 {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1.08);
    }
    50% {
        transform: translate3d(-6%, 7%, 0) scale(1);
    }
}

@keyframes csDrift3 {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(-5%, -6%, 0) scale(1.1);
    }
}

/* ---- Entrance ------------------------------------------------------- */

/* Plain CSS animations, not class-triggered reveals: they always run, so
   the hero can never ship blank if a script fails or an observer never
   fires. Under reduced motion the global rule lands them instantly. */
.cs-hero-content > * {
    animation: csRise 680ms var(--ds-ease) both;
}

.cs-hero-content > *:nth-child(1) {
    animation-delay: 40ms;
}
.cs-hero-content > *:nth-child(2) {
    animation-delay: 110ms;
}
.cs-hero-content > *:nth-child(3) {
    animation-delay: 180ms;
}
.cs-hero-content > *:nth-child(4) {
    animation-delay: 250ms;
}
.cs-hero-content > *:nth-child(5) {
    animation-delay: 320ms;
}
.cs-hero-content > *:nth-child(6) {
    animation-delay: 390ms;
}

@keyframes csRise {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.cs-hero-container {
    position: relative;

    z-index: 2;

    max-width: 1100px;

    margin: auto;
}

.cs-hero-content {
    text-align: center;

    max-width: 850px;

    margin: auto;
}

/* Tag */

.cs-hero-tag {
    display: inline-flex;

    align-items: center;

    gap: var(--ds-2);

    padding: var(--ds-2) var(--ds-4);

    border-radius: var(--ds-r-pill);

    background: var(--ds-surface);

    border: 1px solid var(--ds-border);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.01em;

    color: var(--ds-ink-2);

    box-shadow: var(--ds-shadow-1);

    margin-bottom: var(--ds-4);
}

/* Main title */

/* Dominant element in the hero. Fluid from 32px to 56px so it never
   overflows on small screens and never shouts on large ones. */
.cs-hero-title {
    margin: 0;

    /* px, not rem: this theme sets html{font-size:10px}, so rem units here
     resolve to 10/16ths of their apparent value. */
    font-size: clamp(32px, 20px + 2.4vw, 56px);

    line-height: 1.04;

    font-weight: 800;

    color: var(--ds-ink);

    letter-spacing: -0.028em;
}

.cs-hero-title span {
    display: block;
}

/* Gradient */

/* Supporting value proposition. Sits UNDER the h1 in the hierarchy —
   it used to be set larger (48px) than the h1 (46px), which made the two
   headings compete instead of reading in order.

   The gradient text-clip is gone: it carried no meaning, and when
   background-clip failed it rendered the headline invisible. Solid
   indigo at 7.9:1. */
.cs-hero-gradient-title {
    margin: var(--ds-3) 0 var(--ds-4);

    font-size: clamp(18px, 12px + 1.1vw, 28px);

    line-height: 1.25;

    font-weight: 600;

    letter-spacing: -0.01em;

    color: var(--ds-brand-600);
}

/* Description */

.cs-hero-description {
    /* ~62ch at this size — inside the 65-75ch readable band. */
    max-width: 58ch;

    margin: auto;

    color: var(--ds-ink-3);

    font-size: 17px;

    line-height: 1.65;
}

/* Buttons */

.cs-hero-buttons {
    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 25px;
}

.cs-main-btn,
.cs-second-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--ds-2);

    /* 48px clears the 44px minimum touch target. */
    min-height: 48px;

    padding: 0 var(--ds-6);

    border-radius: var(--ds-r-pill);

    font-size: 15px;

    font-weight: 600;

    text-decoration: none;

    /* Named properties only. `transition: 0.3s` animated every animatable
     property including layout ones, which is what made these buttons
     feel slightly soft on hover. */
    transition:
        transform var(--ds-base) var(--ds-ease),
        box-shadow var(--ds-base) var(--ds-ease),
        background-color var(--ds-fast) var(--ds-ease),
        border-color var(--ds-fast) var(--ds-ease);
}

.cs-main-btn {
    color: #fff;

    background: var(--ds-brand);

    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.28);
}

.cs-main-btn:hover {
    color: #fff;

    background: var(--ds-brand-600);

    transform: translateY(-2px);

    box-shadow: 0 12px 26px rgba(79, 70, 229, 0.34);
}

/* Press feedback: the button settles back to the surface. */
.cs-main-btn:active {
    transform: translateY(0);

    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.26);
}

.cs-second-btn {
    color: var(--ds-ink);

    background: var(--ds-surface);

    border: 1px solid var(--ds-border-strong);
}

.cs-second-btn:hover {
    color: var(--ds-ink);

    border-color: var(--ds-ink);

    transform: translateY(-2px);

    box-shadow: var(--ds-shadow-2);
}

.cs-second-btn:active {
    transform: translateY(0);

    box-shadow: var(--ds-shadow-1);
}

/* Orders */

.cs-order-box {
    display: inline-flex;

    align-items: center;

    gap: var(--ds-2);

    margin-top: var(--ds-5);

    padding: var(--ds-3) var(--ds-5);

    background: var(--ds-surface);

    border: 1px solid var(--ds-border);

    border-radius: var(--ds-r-pill);

    font-size: 14px;

    color: var(--ds-ink-2);

    box-shadow: var(--ds-shadow-1);
}

.cs-order-box b {
    color: var(--ds-ink);

    font-weight: 700;
}

.cs-live-dot {
    width: 8px;

    height: 8px;

    background: var(--ds-green);

    border-radius: 50%;

    /* Ring gives the dot presence at 8px without enlarging it. */
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.16);

    flex-shrink: 0;
}

/* ================================
   TABLET
================================ */

@media (max-width: 992px) {
    .cs-hero-section {
        padding: var(--ds-7) var(--ds-4);
    }

    /* Both headings were pinned to 38px here, which erased the size
     difference between them. The clamp() on each now handles every
     width, so these fixed overrides are gone. */
}

/* ================================
   MOBILE
================================ */

@media (max-width: 768px) {
    .cs-hero-section {
        padding: var(--ds-7) var(--ds-4);
    }

    .cs-hero-description {
        font-size: 15px;
    }

    .cs-hero-buttons {
        flex-direction: column;

        align-items: center;
    }

    /* Full-width to the container rather than a fixed 260px, so the two
     buttons match each other at every phone width. */
    .cs-main-btn,
    .cs-second-btn {
        width: 100%;

        max-width: 320px;
    }
}

@media (max-width: 480px) {
    .cs-hero-section {
        padding: var(--ds-6) var(--ds-4);
    }

    /* 27px title over a 25px subhead left the two effectively the same
     size on phones — the exact hierarchy problem the desktop layout
     had. clamp() keeps them 32px / 18px here instead. */
}

/* =====================================
      BRAND LOGO — "DISCOUNT SMOKES"
   Wordmark ratio ≈ 5.86 : 1. Sized by
   HEIGHT so the wide mark never grows the
   header row, and capped by WIDTH so it
   scales down proportionally (never
   squished, never overflowing) on small
   screens. Covers the header (dark + light
   variants), the mobile nav brand, and the
   dark footer.
===================================== */

/* =====================================================================
   BRAND MARK

   The mark is a 684x125 wordmark (~5.5:1), so it is capped by HEIGHT and
   left to take whatever width that gives: 36px tall lands it at ~197px
   wide in the header. An earlier square crest needed a tall cap to stay
   legible; the wordmark does not, so the caps come back down per surface.

   The nav row is an 80px line-height, which is the ceiling in the header
   — a 36px mark leaves ample clearance either side without growing the row.
===================================================================== */

/* `a.` rather than a bare class: the theme sets `.header-brand a
   { display: block }`, one element more specific than a single class.

   `flex` and not `inline-flex`: as an inline-level box the link sat on a
   text baseline, so the brand column measured 88px around an 80px crest
   — 8px of descender space that pushed the whole header row taller. */
a.brand-lockup {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.brand-lockup img {
    width: auto;
    height: auto;
    max-height: 36px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* A little breathing room above and below the brand row. With a 36px mark
   the row height is driven by the nav items, not the logo. */
@media (min-width: 992px) {
    .header-navbar {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* The footer has vertical room the header doesn't. */
.footer-dark .brand-lockup img {
    max-height: 104px;
}

.mobile-nav-brand .brand-lockup img {
    max-height: 32px;
}

@media (max-width: 991px) {
    .brand-lockup img {
        max-height: 32px;
    }
}

@media (max-width: 575px) {
    .brand-lockup img {
        max-height: 28px;
    }

    .footer-dark .brand-lockup img {
        max-height: 88px;
    }
}

/* The ~5.5:1 wordmark reads clearly at 28-32px tall, which still gives
   ~150-175px of width. These selectors are more specific than
   `.brand-lockup img`, so they have to carry the responsive values
   rather than being left to fight it. */

/* Tablet */
@media (max-width: 991px) {
    .header-brand .logo img,
    .mobile-nav-brand .logo img {
        max-height: 32px;
    }
}

/* Mobile — still clears the menu & cart icons at this size */
@media (max-width: 575px) {
    .header-brand .logo img,
    .mobile-nav-brand .logo img {
        max-height: 28px;
    }

    .axil-footer-widget .logo img,
    .axil-footer-widget .logo img.light-logo {
        max-height: 88px;
    }
}

/* =====================================
      HEADER NAV
===================================== */

@media (min-width: 992px) {
    /* Nine top-level items (through "Terms and Conditions") is a lot for a
       fixed-width container, so tighten the per-item gap and trim the label
       size a touch to keep the row from wrapping onto a second line. The
       Brands parent gets a little extra right margin so its dropdown chevron
       (positioned at right:-14px) clears the next item. */
    .header-main-nav .mainmenu > li {
        margin: 0 7px;
    }
    .header-main-nav .mainmenu > li > a {
        font-size: 14px;
        /* The theme gives each link an 80px line-height/height, which is what
           drove the header's overall height. The nav items are the tallest
           thing in the row, so trimming this to 56px shrinks the whole bar
           (~88px -> ~64px) without touching the logo or action icons. The
           underline still tracks the text because it's offset from 50%. */
        line-height: 56px;
        height: 56px;
    }
    .header-main-nav .mainmenu > li.menu-item-has-children {
        margin-right: 18px;
    }
}

/*==================================================
        PREMIUM FOOTER GRID
===================================================*/

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.3fr 1fr 1fr;
    gap: 55px;
    align-items: start;
}

.footer-column {
    min-width: 0;
}

.footer-sub-widget {
    margin-top: 45px;
}

.footer-column .axil-footer-widget:last-child {
    margin-bottom: 0;
}

/* Prevent long links from breaking layout */

.axil-footer-widget .inner ul li a {
    display: inline-block;
    line-height: 1.6;
    word-break: break-word;
}

/*==========================
Large Laptop
===========================*/

@media (max-width: 1200px) {
    .footer-grid {
        grid-template-columns: 1.3fr 1fr 1.2fr 1fr 1fr;
        gap: 35px;
    }
}

/*==========================
Tablet
===========================*/

@media (max-width: 991px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 45px 40px;
    }

    .footer-sub-widget {
        margin-top: 35px;
    }
}

/*==========================
Mobile
===========================*/

@media (max-width: 767px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .footer-column {
        margin-bottom: 20px;
    }

    .footer-sub-widget {
        margin-top: 30px;
    }
}

/*=========================================
LEFT FOOTER BRAND
==========================================*/

.footer-brand-box {
    max-width: 360px;
}

.footer-logo {
    margin-bottom: 28px;
}

.footer-logo img {
    width: 200px;
    max-width: 100%;
    height: auto;
    display: block;
}

.footer-description {
    color: #acacac;

    font-size: 14px;

    line-height: 1.9;

    margin-bottom: 10px;
}

/* Newsletter */

.footer-newsletter {
    margin-top: 29px;
}

.footer-newsletter h5 {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 18px;
    line-height: 1.3;
}

.newsletter-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 360px;
}

.newsletter-box input {
    width: 100%;
    min-width: 0;
    height: 50px;
    border: none;
    outline: none;
    background: #fff;
    border-radius: 35px;
    padding: 0 22px;
    font-size: 15px;
}

/* This button was #38ace2 cyan, hovering to #3577f0 — a third and fourth
   blue, neither of them the brand. Now on the brand token like every
   other primary action. */
.newsletter-box button {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 35px;
    background: var(--ds-brand);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color var(--ds-fast) var(--ds-ease),
        transform var(--ds-fast) var(--ds-ease);
}

.newsletter-box button:hover {
    background: var(--ds-brand-600);
}

.newsletter-box button:active {
    transform: scale(0.99);
}

/*==========================
Tablet
===========================*/

@media (max-width: 991px) {
    .footer-brand-box {
        max-width: 100%;
        font-size: 60px;
    }

    .footer-newsletter form {
        max-width: 550px;
    }
}

/*==========================
Mobile
===========================*/

@media (max-width: 575px) {
    .footer-logo {
        text-align: center;
    }

    .footer-logo img {
        margin: auto;

        width: 170px;
    }

    .footer-description {
        text-align: center;

        font-size: 15px;
    }

    .footer-newsletter h5 {
        text-align: center;

        font-size: 24px;
    }

    .footer-newsletter form {
        flex-direction: column;
    }

    .newsletter-box {
        max-width: 100%;
        /* flex-direction:column; */
    }

    .newsletter-box input {
        width: 100%;
    }

    .newsletter-box button {
        width: 100%;
    }
}

/*=========================================
STATUTORY WARNING
==========================================*/

.footer-warning {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 0;
    background: transparent;
}

.footer-warning p {
    margin: 0;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 400;
}

.footer-warning p span {
    color: #fbbf24;
    font-weight: 600;
}

/* Mobile */

@media (max-width: 575px) {
    .footer-warning {
        padding: 14px 12px;
    }

    .footer-warning p {
        font-size: 12px;
        line-height: 1.7;
    }
}

/*=====================================================
SHOP BY CATEGORY
======================================================*/

.shop-category-area {
    padding: 5px 0 10px !important;
}

.axil-product-area.axil-section-gap {
    padding-top: 30px !important;
    padding-bottom: 5px !important;
}

/*---------------------------------------------------*/

.category-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-right: 16px !important;
    margin-right: 0 !important;
}

.category-title-wrapper .title {
    margin-bottom: 10px;
    font-size: 34px;
}

.category-view-all {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-2);

    /* 44px minimum touch target — it was a bare text link before. */
    min-height: 44px;
    padding: 0 var(--ds-2);

    font-size: 15px;
    font-weight: 600;
    color: var(--ds-ink);
    text-decoration: none;
    transition: color var(--ds-fast) var(--ds-ease);
}

.category-view-all i {
    font-size: 13px;
    transition: transform var(--ds-base) var(--ds-ease);
}

.category-view-all:hover {
    color: var(--ds-brand-600);
}

.category-view-all:hover i {
    transform: translateX(4px);
}

/*---------------------------------------------------*/
/* Row */

.category-row {
    --bs-gutter-x: 22px;
    --bs-gutter-y: 22px;
}

/*---------------------------------------------------*/
/* Card */

/* Photo-free category tiles.

   The previous version put one photograph behind all four cards, and
   that photograph is a plain-packaging health warning — so the row read
   as the same anti-smoking graphic repeated four times instead of four
   destinations, and no amount of scrim work fixed the repetition. With
   no distinct per-category art available, type and iconography carry
   the identity instead. These are also the one dark block on an
   otherwise light page, which gives the row real presence. */
.category-card {
    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    width: 100%;

    /* A fixed ratio rather than a fixed height, so the object-fit crop
     window below stays a constant fraction of the source at every
     breakpoint. With a fixed height the card's aspect changed per
     column count, which moved the crop and let the lettering back in. */
    aspect-ratio: 3 / 2;

    padding: var(--ds-5);

    overflow: hidden;

    /* Matches the 8px on the Add to Cart button, so the two adjacent
     sections share one corner radius instead of reading as two
     different systems. */
    border-radius: var(--ds-r-sm);

    background: #14152b;

    text-decoration: none;

    box-shadow: var(--ds-shadow-2);

    transition:
        transform var(--ds-base) var(--ds-ease),
        box-shadow var(--ds-base) var(--ds-ease);
}

/* ---- Media -----------------------------------------------------------

   All four tiles share one source file. Sampling its luminance row by
   row shows exactly what is in it:

     0-6%    bright white margin
     7-41%   plain-packaging warning lettering
     42-92%  the photograph
     93-100% bright white margin

   Only that middle 50% is usable — the two bright margins were what read
   as a "frame" baked into the card, and the lettering is what made four
   copies of one picture so obvious.

   At a 3:2 card, object-fit:cover shows 66.7% of the source height, so
   scale(1.36) narrows it to 49% — just inside the usable band, and the
   smallest zoom that clears the lettering and both margins. Anything
   less lets them back in; anything more is needlessly tight.

   object-position then varies horizontally per card, so each tile frames
   a different part of the picture. */
.category-card-media {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 50% 100%;

    transform: scale(1.36);

    transition: transform 800ms var(--ds-ease);
}

.category-card--1 .category-card-media {
    object-position: 12% 100%;
}

.category-card--2 .category-card-media {
    object-position: 40% 100%;
}

.category-card--3 .category-card-media {
    object-position: 63% 100%;
}

.category-card--4 .category-card-media {
    object-position: 90% 100%;
}

.category-card:hover .category-card-media {
    transform: scale(1.44);
}

/* Bottom-weighted scrim, tinted toward brand so the photography reads as
   part of the palette rather than as a grey rectangle.

   The subject of the photograph sits dead centre, so every crop of it
   necessarily contains the hand — horizontal framing alone can only do
   so much to separate the four. Each card therefore also grades to its
   own hue. All four stay inside the brand's indigo-to-violet range, so
   they read as one set with four members rather than four colours. */
.category-card-scrim {
    --tint: 32, 30, 78;

    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(12, 13, 32, 0.94) 0%,
        rgba(16, 17, 40, 0.74) 32%,
        rgba(var(--tint), 0.5) 62%,
        rgba(var(--tint), 0.38) 100%
    );
    pointer-events: none;
    transition: opacity var(--ds-base) var(--ds-ease);
}

.category-card--2 .category-card-scrim {
    --tint: 52, 28, 92;
}

.category-card--3 .category-card-scrim {
    --tint: 20, 38, 92;
}

.category-card--4 .category-card-scrim {
    --tint: 62, 26, 72;
}

/* Deeper, more saturated scrim cross-fades in on hover. A stacked layer
   is used because browsers cannot interpolate between two gradients —
   transitioning the gradient itself would snap rather than blend. */
.category-card-scrim::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(
        to top,
        rgba(10, 10, 28, 0.96) 0%,
        rgba(30, 26, 92, 0.78) 34%,
        rgba(49, 42, 148, 0.46) 68%,
        rgba(67, 56, 202, 0.32) 100%
    );
    transition: opacity var(--ds-base) var(--ds-ease);
}

.category-card:hover .category-card-scrim::before {
    opacity: 1;
}

/* Hairline ring keeps the tile edge defined against the white section. */
.category-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    pointer-events: none;
    transition: box-shadow var(--ds-base) var(--ds-ease);
}

.category-card:hover::after {
    box-shadow: inset 0 0 0 1px rgba(165, 180, 252, 0.45);
}

/* Same icon-plate language as the guarantee panel above, inverted for a
   dark ground — the two sections read as one system. */
.category-card-icon {
    position: relative;
    z-index: 1;

    width: 46px;
    height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--ds-r-md);

    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #c7d2fe;

    transition:
        background-color var(--ds-base) var(--ds-ease),
        border-color var(--ds-base) var(--ds-ease),
        color var(--ds-base) var(--ds-ease),
        transform var(--ds-base) var(--ds-ease);
}

.category-card-icon i {
    font-size: 21px;
    line-height: 1;
}

.category-card:hover .category-card-icon {
    background: var(--ds-brand);
    border-color: var(--ds-brand-400);
    color: #fff;
    transform: translateY(-2px);
}

.category-card-name {
    position: relative;
    z-index: 1;

    margin: 0;

    display: flex;

    align-items: center;

    gap: var(--ds-2);

    color: #fff;

    font-size: 20px;

    font-weight: 700;

    line-height: 1.25;

    letter-spacing: -0.01em;

    transition: transform var(--ds-base) var(--ds-ease);
}

.category-card:hover .category-card-name {
    transform: translateX(2px);
}

/* Go-arrow. Inline SVG data URI rather than an icon-font glyph so it is
   never announced as stray text and needs no font to have loaded. */
.category-card-name::after {
    content: "";

    width: 17px;
    height: 17px;
    flex-shrink: 0;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px 17px;

    opacity: 0;
    transform: translateX(-6px);

    transition:
        opacity var(--ds-base) var(--ds-ease),
        transform var(--ds-base) var(--ds-ease);
}

.category-card:hover .category-card-name::after,
.category-card:focus-visible .category-card-name::after {
    opacity: 1;
    transform: translateX(0);
}

/*---------------------------------------------------*/
/* Hover */

.category-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 38px rgba(15, 17, 21, 0.26),
        0 4px 10px rgba(15, 17, 21, 0.12);
}

.category-card:active {
    transform: translateY(-2px);
}

/*---------------------------------------------------*/
/* Large Screen */

/* No per-breakpoint heights below: the card's 3:2 aspect-ratio drives
   sizing, which is what keeps the image crop stable across column
   counts. */

/*---------------------------------------------------*/
/* Tablet */

@media (max-width: 991px) {
    .category-title-wrapper {
        margin-bottom: 20px;
    }

    .category-row {
        --bs-gutter-x: 18px;
        --bs-gutter-y: 18px;
    }

    .category-card {
        padding: var(--ds-4);
    }

    .category-card-name {
        font-size: 18px;
    }
}

/*---------------------------------------------------*/
/* Mobile */

@media (max-width: 767px) {
    .category-title-wrapper {
        flex-direction: row;

        align-items: center;
    }

    .category-title-wrapper .title {
        font-size: 26px;
    }

    .category-row {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 12px;
    }

    .category-card {
        border-radius: 14px;
        padding: var(--ds-4);
    }

    .category-card-icon {
        width: 40px;
        height: 40px;
    }

    .category-card-icon i {
        font-size: 18px;
    }

    .category-card-name {
        font-size: 17px;
    }

    .category-view-all {
        font-size: 14px;
    }
}

/*---------------------------------------------------*/
/* Small Mobile */

@media (max-width: 575px) {
    .category-card {
        padding: var(--ds-3);
    }

    .category-title-wrapper .title {
        font-size: 22px;
    }

    .category-card-icon {
        width: 36px;
        height: 36px;
    }

    .category-card-icon i {
        font-size: 16px;
    }

    .category-card-name {
        font-size: 16px;
    }

    .category-row {
        --bs-gutter-x: 10px;
        --bs-gutter-y: 10px;
    }
}

/*==================================================
SERVICE AREA
==================================================*/

/* This panel is the first trust signal after the hero, so it gets real
   separation from it rather than being tucked against it. */
.service-area {
    padding: var(--ds-7) 0 var(--ds-2) !important;
}

/* One panel, four cells — replaces four separate bordered cards. Four
   identical cards side by side is the weakest version of this pattern:
   it repeats the same frame four times to say one thing. A single
   segmented panel reads as one guarantee bar.

   The dividers are the 1px grid gap showing the container's tinted
   background through it. That means they redraw themselves correctly at
   any column count — 4-up, 2-up, 1-up — with no per-breakpoint
   nth-child bookkeeping and no dangling border on the last cell. */
.service-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;

    margin: 0;
    padding: 0;
    list-style: none;

    background: var(--ds-border);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    overflow: hidden;

    box-shadow: var(--ds-shadow-1);
}

.service-panel-item {
    display: flex;
    align-items: center;
    gap: var(--ds-4);

    /* The theme sets `margin: 8px 0` on every li. Left alone, that shrinks
     each cell's painted box inside its grid area and lets 17px of the
     container's divider colour show between rows — so the horizontal
     rule rendered far heavier than the vertical one. */
    margin: 0;

    padding: var(--ds-5);
    min-width: 0;

    background: var(--ds-surface);

    transition: background-color var(--ds-fast) var(--ds-ease);
}

.service-panel-item:hover {
    background: var(--ds-surface-2);
}

.service-panel-item:hover .service-panel-icon {
    background: var(--ds-brand);
    color: #fff;
    transform: scale(1.05);
}

.service-panel-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--ds-r-md);

    background: var(--ds-brand-50);
    color: var(--ds-brand-600);

    transition:
        background-color var(--ds-base) var(--ds-ease),
        color var(--ds-base) var(--ds-ease),
        transform var(--ds-base) var(--ds-ease);
}

.service-panel-icon i {
    font-size: 22px;
    line-height: 1;
}

.service-panel-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.service-panel-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ds-ink);
}

.service-panel-meta {
    font-size: 14px;
    line-height: 1.45;
    color: var(--ds-ink-3); /* was #777 — 4.48:1, under AA */
}

/*=========================================
TABLET
=========================================*/

/* Tablet: two cells per row. The gap dividers become a cross without any
   extra rules — the vertical hairline between the columns and the
   horizontal one between the rows are both just the gap. */
@media (max-width: 991px) {
    .service-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-panel-item {
        padding: var(--ds-4);
    }

    .service-panel-icon {
        width: 44px;
        height: 44px;
    }

    .service-panel-icon i {
        font-size: 20px;
    }

    .service-panel-title {
        font-size: 15px;
    }
}

/*=========================================
MOBILE
=========================================*/

@media (max-width: 575px) {
    .service-area {
        padding: var(--ds-6) 0 var(--ds-2) !important;
    }

    /* Still two up, but each cell stacks. Two columns at this width leaves
     roughly 90px beside a horizontal icon, which shredded every label
     into three lines; stacking gives the copy the full cell width. */
    .service-panel-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ds-3);

        padding: var(--ds-4) var(--ds-3);
    }

    .service-panel-icon {
        width: 40px;
        height: 40px;
    }

    .service-panel-icon i {
        font-size: 18px;
    }

    .service-panel-title {
        font-size: 15px;
    }

    /* Floor is 14px — anything smaller is under the readable minimum. */
    .service-panel-meta {
        font-size: 14px;
    }
}

/* ===================================================
   BROWSE BLOCK  (popular searches / cities / guides)
   ---------------------------------------------------
   Previously three separately-headed pill grids stacked
   on top of each other — 16 + 10 + 3 links, each with
   its own <h2>, running close to a full viewport for
   what is an internal-linking block.

   Now one block with three tabs. Inactive panels use
   the `hidden` attribute rather than being conditionally
   rendered, so all 29 links stay in the DOM for
   crawlers while only one grid is on screen at a time.
=================================================== */

.browse-section {
    background: var(--ds-surface);
    padding: var(--ds-8) 0;
    width: 100%;
}

.browse-container {
    max-width: 1180px;
    margin: auto;
    padding: 0 20px;
}

.browse-title {
    text-align: center;
    margin: 0 0 var(--ds-3);
}

.browse-desc {
    max-width: 66ch;
    margin: 0 auto var(--ds-6);
    text-align: center;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ds-ink-3);
}

/* --- Tabs ------------------------------------------------------------ */

.browse-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ds-1);

    width: fit-content;
    margin: 0 auto var(--ds-6);
    padding: var(--ds-1);

    background: var(--ds-surface-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-pill);
}

.browse-tab {
    appearance: none;
    border: 0;
    background: transparent;

    /* The theme applies `width: 100%` to every input/button/select/textarea,
     which made each tab fill the row and stack them vertically. */
    width: auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 0 var(--ds-5);

    border-radius: var(--ds-r-pill);

    font-size: 14px;
    font-weight: 600;
    color: var(--ds-ink-3);
    cursor: pointer;

    transition:
        background-color var(--ds-fast) var(--ds-ease),
        color var(--ds-fast) var(--ds-ease);
}

.browse-tab:hover {
    color: var(--ds-ink);
}

.browse-tab.is-active {
    background: var(--ds-brand);
    color: #fff;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.28);
}

/* --- Panels ---------------------------------------------------------- */

.browse-panel[hidden] {
    display: none;
}

/* Short fade so switching tabs reads as a change of content rather than
   an instant swap. Opacity only — the grid height differs per panel and
   animating that would thrash layout. */
.browse-panel {
    animation: browseFade 240ms var(--ds-ease) both;
}

.browse-panel:focus-visible {
    outline: 2px solid var(--ds-brand);
    outline-offset: 6px;
    border-radius: var(--ds-r-sm);
}

@keyframes browseFade {
    from {
        opacity: 0;
        transform: translate3d(0, 4px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* --- Link grids ------------------------------------------------------ */

/* One column rule for all three panels.

   Previously each panel set its own count — 4 for searches, 5 for
   cities, 3 for guides — so the same button rendered at three different
   widths depending on which tab you were on. auto-fit with a 320px
   minimum gives every button the guides' width (3 up at this container
   size) and reflows to 2 and then 1 on narrower screens without needing
   a breakpoint for each panel. */
.browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--ds-3);
}

/* All three panels share the Guides treatment: leading brand icon, text
   aligned left, taller row. The centred label-only chips read as one
   thing and the guides as another; this makes the whole block one
   component. */
.browse-grid a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ds-3);

    min-height: 58px;
    padding: var(--ds-3) var(--ds-4);

    border-radius: var(--ds-r-sm);
    background: var(--ds-surface-2);
    border: 1px solid var(--ds-border);

    color: var(--ds-ink-2);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;

    /* Was nowrap + ellipsis, which truncated the longer labels. */
    overflow-wrap: break-word;

    transition:
        background-color var(--ds-fast) var(--ds-ease),
        color var(--ds-fast) var(--ds-ease),
        border-color var(--ds-fast) var(--ds-ease),
        transform var(--ds-base) var(--ds-ease),
        box-shadow var(--ds-base) var(--ds-ease);
}

.browse-grid a:hover {
    background: var(--ds-ink);
    color: #fff;
    border-color: var(--ds-ink);
    transform: translateY(-2px);
    box-shadow: var(--ds-shadow-2);
}

.browse-grid a:active {
    transform: translateY(0);
}

/* The city panel previously carried a brand-tinted surface of its own,
   left over from when these were three separate sections. Inside one
   tabbed component that tint just read as an inconsistency, so all
   three panels now share the same surface — the tab is what tells you
   which set you are looking at. */

.browse-grid a i {
    font-size: 18px;
    line-height: 1;
    color: var(--ds-brand-600);
    flex-shrink: 0;
    transition: color var(--ds-fast) var(--ds-ease);
}

.browse-grid a:hover i {
    color: #fff;
}

/* ===================================================
   TABLET
=================================================== */

@media (max-width: 991px) {
    .browse-section {
        padding: var(--ds-7) 0;
    }
    /* Column count is handled by auto-fit above — no override needed. */
}

/* ===================================================
   MOBILE
=================================================== */

@media (max-width: 767px) {
    .browse-section {
        padding: var(--ds-6) 0;
    }

    .browse-container {
        padding: 0 16px;
    }

    .browse-desc {
        font-size: 14px;
        margin-bottom: var(--ds-5);
    }

    /* Tabs go full width and share the row evenly rather than wrapping
     into a ragged second line. */
    .browse-tabs {
        width: 100%;
    }

    .browse-tab {
        flex: 1;
        min-width: 0;
        padding: 0 var(--ds-2);
        font-size: 13px;
        text-align: center;
    }

    /* auto-fit already drops to a single column here (320px minimum vs a
     ~358px content width), so only the gap needs tightening. */
    .browse-grid {
        gap: var(--ds-2);
    }

    .browse-grid a {
        min-height: 52px;
        padding: var(--ds-3) var(--ds-4);
        font-size: 14px;
    }
}

/* ===================================================
   SMALL PHONES
=================================================== */

@media (max-width: 420px) {
    .browse-desc {
        font-size: 13px;
    }

    .browse-tab {
        font-size: 12px;
        padding: 0 var(--ds-1);
    }

    .browse-grid a {
        font-size: 13px;
        gap: var(--ds-2);
    }
}

/* ===================================
   CONTACT SECTION
======================================*/

.custom-contact-section {
    background: #f8fafc;
    padding: 35px 0;
}

/* Smaller Container */

.custom-contact-section .container {
    max-width: 760px;
}

/* Card */

.premium-contact-card {
    background: #fff;
    border-radius: 18px;
    padding: 26px;
    border: 1px solid #eceff3;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.07);
    transition: 0.3s ease;
}

.premium-contact-card:hover {
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.1);
}

/* =========================
      Heading
========================= */

.contact-header {
    text-align: center;
    margin-bottom: 22px;
}

.contact-badge {
    display: inline-block;
    padding: 6px 16px;
    background: #eef4ff;
    color: #3577f0;
    border-radius: 30px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.contact-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
    line-height: 1.25;
}

.contact-header p {
    max-width: 420px;
    margin: auto;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

/* Remove blue line */
.contact-header::after {
    display: none;
}

/* =========================
      Form
========================= */

.custom-contact-section .form-group {
    position: relative;
    margin-bottom: 18px;
}

.custom-contact-section label {
    display: inline-flex;
    align-items: center;
    margin: 0 0 8px;
    padding: 4px 10px;
    background: #eef4ff;
    border: 1px solid #dbe7ff;
    border-radius: 20px;
    color: #3577f0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(53, 119, 240, 0.08);
}

.custom-contact-section label span {
    color: #ef4444;
    margin-left: 3px;
}

/* Inputs */

.custom-contact-section input,
.custom-contact-section textarea {
    width: 100%;
    background: #f8fafc;
    border: 1px solid #d8dee8;
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 12px;
    color: #111827;
    transition: 0.3s;
}

.custom-contact-section input {
    height: 46px;
    font-size: 12px;
}

.custom-contact-section textarea {
    font-size: 12px;
    min-height: 110px;
    resize: vertical;
}

.custom-contact-section input:focus,
.custom-contact-section textarea:focus {
    outline: none;
    background: #fff;
    border-color: #3577f0;
    box-shadow: 0 0 0 3px rgba(53, 119, 240, 0.1);
}

/* Button */

.premium-btn {
    width: 100%;
    height: 48px;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    padding: 0 20px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
}

.premium-btn::before,
.premium-btn::after {
    display: none !important;
    transform: none !important;
    transition: none !important;
}

.custom-contact-section p {
    width: 100% !important;
}

/* ===========================
      Tablet
=========================== */

@media (max-width: 991px) {
    .custom-contact-section {
        padding: 30px 0;
    }

    .premium-contact-card {
        padding: 22px;
    }

    .contact-header h2 {
        font-size: 22px;
    }
}

/* ===========================
      Mobile
=========================== */

@media (max-width: 767px) {
    .custom-contact-section {
        padding: 25px 0;
    }

    .custom-contact-section .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .premium-contact-card {
        padding: 18px;
        border-radius: 16px;
    }

    .contact-header {
        margin-bottom: 18px;
    }

    .contact-badge {
        font-size: 10px;
        padding: 5px 14px;
    }

    .contact-header h2 {
        font-size: 20px;
    }

    .contact-header p {
        font-size: 13px;
    }

    .custom-contact-section label {
        font-size: 11px;
    }

    .custom-contact-section input {
        height: 44px;
        font-size: 14px;
    }

    .custom-contact-section textarea {
        min-height: 95px;
        font-size: 13px;
    }

    .premium-btn {
        height: 46px;
        font-size: 14px;
    }
}

/* Small Phones */

@media (max-width: 480px) {
    .premium-contact-card {
        padding: 16px;
    }

    .contact-header h2 {
        font-size: 20px;
    }

    .contact-header p {
        font-size: 13px;
    }
}

/*===================================================
LOGIN SECTION
===================================================*/

.custom-login-section {
    background: #f8fafc;
    padding: 35px 0;
}

.custom-login-section .container {
    max-width: 760px;
}

/* Card */

.premium-login-card {
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.07);
    transition: 0.3s;
}

.premium-login-card:hover {
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.1);
}

/* Header */

.login-header {
    text-align: center;
    margin-bottom: 24px;
}

.login-badge {
    display: inline-block;
    padding: 6px 16px;
    background: #eef4ff;
    color: #3577f0;
    border-radius: 30px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.login-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.login-header p {
    font-size: 14px;
    color: #6b7280;
    max-width: 420px;
    margin: auto;
    line-height: 1.6;
}

/* Divider */

/* Form */

.login-form .form-group {
    margin-bottom: 18px;
}

.login-form label {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    margin: 0 0 8px;
    background: #eef4ff;
    border: 1px solid #dbe7ff;
    border-radius: 20px;
    color: #3577f0;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
}

.login-form input {
    width: 100%;
    height: 46px;
    border: 1px solid #d8dee8;
    border-radius: 14px;
    background: #f8fafc;
    padding: 0 16px;
    font-size: 12px;
    transition: 0.3s;
}

.login-form input:hover {
    background: #fff;
}

.login-form input:focus {
    outline: none;
    border-color: #3577f0;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(53, 119, 240, 0.1);
}

/* Button */

.premium-btn {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 30px;
    background: #3577f0;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.premium-btn:hover {
    background: #2563eb;
}

/* Footer */

.login-footer {
    margin-top: 22px;
    text-align: center;
}

.login-footer p {
    color: #6b7280;
    margin: 0;
    font-size: 14px;
}

.login-footer a {
    color: #3577f0;
    font-weight: 600;
    text-decoration: none;
}

.login-footer a:hover {
    text-decoration: underline;
}

/*=========================
Tablet
=========================*/

@media (max-width: 991px) {
    .custom-login-section {
        padding: 30px 0;
    }

    .premium-login-card {
        padding: 22px;
    }

    .login-header h1 {
        font-size: 22px;
    }
}

/*=========================
Mobile
=========================*/

@media (max-width: 767px) {
    .custom-login-section {
        padding: 25px 0;
    }

    .custom-login-section .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .premium-login-card {
        padding: 18px;
        border-radius: 16px;
    }

    .login-header {
        margin-bottom: 20px;
    }

    .login-header h1 {
        font-size: 20px;
    }

    .login-header p {
        font-size: 13px;
    }

    .login-form label {
        font-size: 11px;
    }

    .login-form input {
        height: 44px;
        font-size: 13px;
    }

    .premium-btn {
        height: 46px;
        font-size: 14px;
    }
}

/* Small Phones */

@media (max-width: 480px) {
    .premium-login-card {
        padding: 16px;
    }

    .login-header h1 {
        font-size: 20px;
    }

    .login-header p {
        font-size: 13px;
    }
}

/*====================================================
    nav bar ACCOUNT MENU/icon
=====================================================*/

/* Main wrapper */
.premium-account-item {
    position: relative;
}
/* Account Icon Button

   The theme gives every header action a scale-in circle on hover via
   `.header-action > ul > li > a::after`. That selector targets anchors,
   and this control is a <button>, so it missed out and had grown its own
   look instead: a permanently filled #3577f0 disc with a dark ring —
   which read as a different component sitting next to the cart, in the
   old off-brand blue.

   It now uses the identical treatment: a bare icon at rest, and the same
   45px circle scaling in behind it on hover. */
.premium-account-btn {
    position: relative;
    z-index: 1;

    width: 24px;
    height: 24px;
    padding: 0;

    display: flex;
    align-items: center !important;
    justify-content: center;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 50%;
    cursor: pointer;
}

/* Matches .header-action > ul > li > a::after exactly: 45px circle,
   inset -10.5px around the 24px icon box, scaled from 0.

   The theme animates this with `transition: 0.3s` (default easing), so
   the timing is matched rather than using the design-system curve —
   otherwise the two icons sitting side by side expand at visibly
   different speeds. */
.premium-account-btn::after {
    content: "";
    position: absolute;
    top: -10.5px;
    right: -10.5px;
    bottom: -10.5px;
    left: -10.5px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--ds-brand-600);
    transform: scale(0);
    z-index: -1;
    transition: transform 0.3s ease;
}

.premium-account-btn:hover::after,
.premium-account-btn:focus-visible::after,
.premium-account-btn.is-open::after {
    transform: scale(1);
}

/* Icon — SVG line-icon on a 24px box, flex-centred like the search
   trigger. Same 1.4 stroke as search, so the account glyph carries the
   same weight as the cart and magnifier instead of the old 34px flaticon
   that rendered heavier. Its ink bottom (path at y21 of a 24 viewBox)
   lands on the cart's, so no per-glyph baseline nudge is needed. */
.premium-account-btn__icon {
    display: block;
    color: var(--color-heading);
    transition: color 0.3s ease;
}

/* The theme's own button hover would otherwise paint over the circle. */
.premium-account-btn:hover,
.premium-account-btn:focus,
.premium-account-btn:active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none;
}

.premium-account-btn:hover .premium-account-btn__icon,
.premium-account-btn:focus-visible .premium-account-btn__icon,
.premium-account-btn.is-open .premium-account-btn__icon {
    color: #fff;
    transform: none;
}
/* Dropdown */
/* Panel — deliberately the same object as the Products dropdown: same
   radius, same border, same two-layer shadow. Two menus hanging off one
   header should not look like they came from different sites. */
.premium-account-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: 248px;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--ds-border);
    box-shadow:
        0 2px 6px rgba(15, 17, 21, 0.06),
        0 14px 34px rgba(15, 17, 21, 0.13);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition:
        opacity var(--ds-base) var(--ds-ease),
        transform var(--ds-base) var(--ds-ease),
        visibility var(--ds-base);
    z-index: 99999;
}

.premium-account-dropdown.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Header — plain type on white. This was a cyan-to-indigo gradient band
   with a 40px avatar disc: a lot of decoration to say "Your account",
   and the cyan was not a brand colour at all. */
.premium-account-top {
    padding: 16px 16px 4px;
}

.premium-account-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--ds-ink);
}

.premium-account-sub {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ds-ink-3);
}

/* Body */
.premium-account-body {
    padding: 12px 16px 16px;
}

/* Buttons */
.premium-btn {
    height: 42px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-2);
    border-radius: var(--ds-r-sm);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition:
        background-color var(--ds-fast) var(--ds-ease),
        border-color var(--ds-fast) var(--ds-ease),
        color var(--ds-fast) var(--ds-ease);
    margin-bottom: var(--ds-2);
}

/* Solid brand, matching every other primary action on the site. The
   gradient version shared nothing with the hero button it sits above. */
.premium-btn-login {
    color: #fff;
    background: var(--ds-brand);
}

.premium-btn-login:hover {
    color: #fff;
    background: var(--ds-brand-600);
}

.premium-btn-register {
    color: var(--ds-ink);
    background: #fff;
    border: 1px solid var(--ds-border-strong);
}

.premium-btn-register:hover {
    color: var(--ds-ink);
    background: var(--ds-surface-2);
    border-color: var(--ds-ink-4);
}

.premium-btn:last-child {
    margin-bottom: 0;
}

/* Footer link, separated by a hairline rather than more button weight. */
.premium-account-foot {
    border-top: 1px solid var(--ds-border);
    background: var(--ds-surface-2);
}

.premium-account-foot a {
    display: flex;
    align-items: center;
    gap: var(--ds-2);
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-ink-3);
    text-decoration: none;
    transition:
        color var(--ds-fast) var(--ds-ease),
        background-color var(--ds-fast) var(--ds-ease);
}

.premium-account-foot a i {
    font-size: 14px;
    color: var(--ds-ink-4);
    transition: color var(--ds-fast) var(--ds-ease);
}

.premium-account-foot a:hover {
    color: var(--ds-brand-600);
    background: var(--ds-brand-50);
}

.premium-account-foot a:hover i {
    color: var(--ds-brand);
}

/* Tablet */

@media (max-width: 991px) {
    .premium-account-dropdown {
        width: 220px;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .premium-account-btn {
        width: 26px;
        height: 26px;
    }
    /* Icon size is not overridden here: the cart stays 24px at every
       width, so the person keeps its base 34px to match it. The old
       17px rule shrank only the person and left it half the cart. */
    .premium-account-dropdown {
        width: 210px;
        right: -10px;
    }
    .premium-account-top {
        padding: 14px;
    }
    .premium-account-body {
        padding: 12px;
    }
}

/* Small phones */

@media (max-width: 380px) {
    .premium-account-dropdown {
        width: 190px;
        right: -5px;
    }
    .premium-account-btn {
        width: 24px;
        height: 24px;
    }
}

/*=========================
    ABOUT SECTION
=========================*/

.about-main {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 68px 20px 88px;
    background: var(--ds-surface-2, #f7f8fa);
}

.about-main .about-container {
    width: 100%;
    max-width: 920px;
}

/*=========================
    HERO
=========================*/

.about-main .about-hero {
    text-align: center;
    margin-bottom: 35px;
}

.about-main .about-label {
    display: inline-block;
    padding: 6px 14px;
    background: var(--ds-brand-50, #eef2ff);
    color: var(--ds-brand-600, #4338ca);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.about-main .about-hero h1 {
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ds-ink, #0f1115);
}

.about-main .about-subtitle {
    max-width: 580px;
    margin: 16px auto 0;
    color: var(--ds-ink-3, #5b6270);
    font-size: 17px;
    line-height: 1.7;
}

/*=========================
    STORY CARD
=========================*/

.about-main .about-story {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--ds-border, #e4e7ec);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 44px -30px rgba(15, 17, 21, 0.28);
    margin-bottom: 56px;
}

.about-main .story-line {
    width: 5px;
    flex: 0 0 auto;
    background: linear-gradient(180deg, #6366f1, #4f46e5);
}

.about-main .story-content {
    padding: 32px 38px;
}

.about-main .story-content p {
    margin: 0;
    color: var(--ds-ink-3, #5b6270);
    font-size: 15.5px;
    line-height: 1.85;
}

.about-main .story-content p:first-child {
    margin-bottom: 18px;
}

.about-main .story-content strong {
    color: var(--ds-ink, #0f1115);
    font-weight: 600;
}

/*=========================
    TITLE
=========================*/

.about-main .about-section-title {
    text-align: center;
    margin-bottom: 28px;
}

.about-main .about-section-title span {
    display: block;
    color: var(--ds-brand-600, #4338ca);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.about-main .about-section-title h2 {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ds-ink, #0f1115);
}

/*=========================
    FEATURES
=========================*/

.about-main .about-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.about-main .feature-box {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 24px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--ds-border, #e4e7ec);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.about-main .feature-box:hover {
    transform: translateY(-3px);
    border-color: #d8dbe3;
    box-shadow: 0 14px 34px -20px rgba(15, 17, 21, 0.26);
}

.about-main .feature-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-brand-50, #eef2ff);
    color: var(--ds-brand, #4f46e5);
    font-size: 20px;
}

.about-main .feature-content h3 {
    margin: 2px 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ds-ink, #0f1115);
}

.about-main .feature-content p {
    margin: 0;
    color: var(--ds-ink-3, #5b6270);
    font-size: 14.5px;
    line-height: 1.7;
}

/*=========================
    WARNING
=========================*/

.about-main .about-warning {
    margin-top: 35px;
    background: #2f2f33;
    padding: 16px 20px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    border-radius: 20px;
}

.about-main .warning-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.about-main .warning-icon i {
    color: #ffc94d;
    font-size: 16px;
}
.about-main .warning-content {
    flex: 1;
}
.about-main .warning-content strong {
    display: block;
    color: #fff;
    font-size: 15px;
    margin-bottom: 3px;
    font-weight: 600;
}

.about-main .warning-content p {
    margin: 0;
    color: #d8d8d8;
    font-size: 13px;
    line-height: 1.6;
}

/*=========================
    CLOSING CTA
=========================*/

.about-main .about-cta {
    margin-top: 44px;
    text-align: center;
    padding: 46px 28px;
    border-radius: 22px;
    background: linear-gradient(158deg, #6366f1 0%, #4f46e5 58%, #4338ca 100%);
    color: #ffffff;
}
.about-main .about-cta h2 {
    margin: 0 0 8px;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
}
.about-main .about-cta p {
    margin: 0 auto 24px;
    max-width: 540px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}
.about-main .about-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.about-main .about-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--ds-brand-700, #3730a3);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        background-color 0.16s ease;
}
.about-main .about-cta__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(15, 17, 21, 0.22);
}
.about-main .about-cta__btn--ghost {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
}
.about-main .about-cta__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.24);
}

/*=========================
    HOVER EFFECTS
=========================*/

.about-main .about-story,
.about-main .feature-box,
.about-main .about-warning {
    transition: 0.35s ease;
}

.about-main .about-story:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.about-main .about-warning:hover {
    transform: translateY(-3px);
}

/*=========================
    TABLET
=========================*/

@media (max-width: 900px) {
    .about-main {
        padding: 50px 18px;
    }

    .about-main .about-container {
        max-width: 760px;
    }

    .about-main .about-hero h1 {
        font-size: 32px;
    }

    .about-main .about-features {
        grid-template-columns: 1fr;
    }
    .about-main .about-warning {
        padding: 15px 16px;
        gap: 12px;
    }

    .about-main .warning-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }

    .about-main .warning-icon i {
        font-size: 15px;
    }

    .about-main .warning-content strong {
        font-size: 14px;
    }

    .about-main .warning-content p {
        font-size: 12.5px;
        line-height: 1.55;
    }
}

/*=========================
    MOBILE
=========================*/

@media (max-width: 600px) {
    .about-main {
        padding: 40px 15px;
    }

    .about-main .about-label {
        font-size: 10px;
    }

    .about-main .about-hero h1 {
        font-size: 27px;
    }

    .about-main .about-subtitle {
        font-size: 15px;
    }

    .about-main .about-story {
        border-radius: 16px;
    }

    .about-main .story-content {
        padding: 22px;
    }

    .about-main .story-content p {
        font-size: 14px;
    }

    .about-main .about-section-title h2 {
        font-size: 24px;
    }

    .about-main .feature-box {
        padding: 18px;
    }

    .about-main .feature-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
        font-size: 18px;
    }

    .about-main .feature-content h3 {
        font-size: 16px;
    }

    .about-main .feature-content p {
        font-size: 13px;
    }

    .about-main .about-warning {
        align-items: flex-start;
        padding: 14px;
        gap: 10px;
        border-radius: 14px;
    }

    .about-main .warning-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .about-main .warning-icon i {
        font-size: 14px;
    }

    .about-main .warning-content strong {
        font-size: 13px;
        margin-bottom: 2px;
    }

    .about-main .warning-content p {
        font-size: 12px;
        line-height: 1.5;
    }
}

/*====================================
        PRIVACY POLICY
====================================*/

.privacy-main {
    width: 100%;
    padding: 64px 18px 84px;
    display: flex;
    justify-content: center;
    background: var(--ds-surface-2, #f7f8fa);
}

.privacy-main .privacy-container {
    width: 100%;
    max-width: 820px;
}

/*================ HEADER ================*/

.privacy-main .privacy-header {
    text-align: center;
    margin-bottom: 40px;
}

.privacy-main .privacy-label {
    display: inline-block;
    background: var(--ds-brand-50, #eef2ff);
    color: var(--ds-brand-600, #4338ca);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.privacy-main .privacy-header h1 {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ds-ink, #0f1115);
}

.privacy-main .privacy-updated {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 16px 0 0;
    padding: 5px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--ds-border, #e4e7ec);
    font-size: 13px;
    color: var(--ds-ink-4, #6b7280);
}

.privacy-main .privacy-updated strong {
    color: var(--ds-ink-2, #3d424d);
    font-weight: 600;
}

.privacy-main .privacy-intro {
    max-width: 620px;
    margin: 18px auto 0;
    font-size: 15px;
    color: var(--ds-ink-3, #5b6270);
    line-height: 1.7;
}

/*================ CONTENT ================*/

.privacy-main .policy-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.privacy-main .policy-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #ffffff;
    border: 1px solid var(--ds-border, #e4e7ec);
    border-radius: 16px;
    padding: 24px 26px;
    transition:
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.privacy-main .policy-card:hover {
    border-color: #d8dbe3;
    box-shadow: 0 10px 30px -18px rgba(15, 17, 21, 0.22);
}

/*================ NUMBER ================*/

.privacy-main .policy-number {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 11px;
    background: var(--ds-brand-50, #eef2ff);
    color: var(--ds-brand, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/*================ TEXT ================*/

.privacy-main .policy-content {
    flex: 1;
    min-width: 0;
}

.privacy-main .policy-content h2 {
    margin: 6px 0 10px;
    font-size: 19px;
    color: var(--ds-ink, #0f1115);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.privacy-main .policy-content p {
    margin: 0 0 10px;
    color: var(--ds-ink-3, #5b6270);
    line-height: 1.75;
    font-size: 15px;
}

.privacy-main .policy-content p:last-child {
    margin-bottom: 0;
}

.privacy-main .policy-content ul {
    margin: 10px 0 0;
    padding-left: 20px;
}

.privacy-main .policy-content li {
    margin-bottom: 7px;
    color: var(--ds-ink-3, #5b6270);
    line-height: 1.7;
    font-size: 15px;
}

.privacy-main .policy-content li:last-child {
    margin-bottom: 0;
}

/*================ TABLET ================*/

@media (max-width: 768px) {
    .privacy-main {
        padding: 45px 16px;
    }

    .privacy-main .privacy-header h1 {
        font-size: 29px;
    }

    .privacy-main .policy-card {
        padding: 16px;
    }
}

/*================ MOBILE ================*/

@media (max-width: 600px) {
    .privacy-main {
        padding: 35px 14px;
    }

    .privacy-main .privacy-header {
        margin-bottom: 28px;
    }

    .privacy-main .privacy-header h1 {
        font-size: 25px;
    }

    .privacy-main .privacy-intro {
        font-size: 13px;
    }

    .privacy-main .policy-card {
        gap: 12px;

        padding: 15px;

        border-radius: 12px;
    }

    .privacy-main .policy-number {
        width: 38px;
        height: 38px;
        min-width: 38px;

        font-size: 13px;

        border-radius: 10px;
    }

    .privacy-main .policy-content h2 {
        font-size: 16px;

        margin-bottom: 6px;
    }

    .privacy-main .policy-content p,
    .privacy-main .policy-content li {
        font-size: 12.5px;

        line-height: 1.55;
    }

    .privacy-main .policy-content ul {
        padding-left: 16px;
    }
}

/*======================================
            CHECKOUT SECTION
======================================*/

.checkout-main {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 55px 18px;
    background: #fafafa;
}

.checkout-main .checkout-container {
    width: 100%;
    max-width: 1140px;
}

/*======================================
            HEADER
======================================*/

.checkout-main .checkout-header {
    text-align: center;
    margin-bottom: 22px;
}

.checkout-main .checkout-badge {
    display: inline-block;
    padding: 6px 16px;
    background: #f2efff;
    color: #5d46ff;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    margin-bottom: 12px;
}

.checkout-main .checkout-header h1 {
    margin: 0;
    font-size: 38px;
    font-weight: 700;
    color: #222;
}

.checkout-main .checkout-header p {
    max-width: 600px;
    margin: 14px auto 0;
    color: #666;
    font-size: 15px;
    line-height: 1.7;
}

/*======================================
            TRUST BAR
======================================*/

.checkout-main .checkout-trust {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
    margin-bottom: 28px;
    margin-top: 20px;
}

.checkout-main .trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #555;
}

.checkout-main .trust-item i {
    color: #5d46ff;
    font-size: 14px;
}

/*======================================
            GRID
======================================*/

.checkout-main .checkout-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 22px;
    align-items: start;
}

/*======================================
            SHIPPING CARD
======================================*/

.checkout-main .checkout-form-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}

.checkout-main .checkout-form-card h2 {
    margin: 0 0 20px;
    color: #222;
    font-size: 24px;
}

/*======================================
            FORM
======================================*/

.checkout-main form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checkout-main .form-grid {
    display: grid;
    gap: 16px;
}

.checkout-main .form-grid.two {
    grid-template-columns: repeat(2, 1fr);
}

.checkout-main .form-grid.three {
    grid-template-columns: repeat(3, 1fr);
}

.checkout-main .form-group {
    display: flex;
    flex-direction: column;
}

.checkout-main label {
    margin-bottom: 7px;
    color: #333;
    font-size: 13px;
    font-weight: 600;
}

.checkout-main input,
.checkout-main textarea {
    width: 100%;

    border: 1px solid #d9d9d9;

    border-radius: 12px;

    background: #fff;

    padding: 12px 15px;

    font-size: 14px;

    outline: none;

    transition: 0.3s;
}

.checkout-main textarea {
    resize: vertical;
    min-height: 95px;
}

.checkout-main input:focus,
.checkout-main textarea:focus {
    border-color: #5d46ff;

    box-shadow: 0 0 0 3px rgba(93, 70, 255, 0.08);
}

.checkout-main input::placeholder,
.checkout-main textarea::placeholder {
    color: #999;
}

/*======================================
            TABLET
======================================*/

@media (max-width: 992px) {
    .checkout-main {
        padding: 45px 16px;
    }

    .checkout-main .checkout-grid {
        grid-template-columns: 1fr;
    }

    .checkout-main .checkout-header h1 {
        font-size: 34px;
    }

    .checkout-main .checkout-form-card {
        padding: 22px;
    }
}

/*======================================
        CHECKOUT SECTION
======================================*/

.checkout-main {
    width: 100%;
    padding: 40px 16px;
    background: #fafafa;
}

.checkout-main .checkout-container {
    max-width: 1080px;
    margin: 0 auto;
}

/*======================================
        HEADER
======================================*/

.checkout-main .checkout-header {
    text-align: center;
    margin-bottom: 16px;
}

.checkout-main .checkout-badge {
    display: inline-block;
    padding: 5px 14px;
    background: #f3f1ff;
    color: #5b4ff7;
    border-radius: 30px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
    margin-bottom: 10px;
}

.checkout-main .checkout-header h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: #222;
}

.checkout-main .checkout-header p {
    max-width: 520px;
    margin: 10px auto 0;
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

/*======================================
        TRUST BAR
======================================*/

.checkout-main .checkout-trust {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 20px;
}

.checkout-main .trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #666;
}

.checkout-main .trust-item i {
    color: #5b4ff7;
    font-size: 12px;
}

/*======================================
        GRID
======================================*/

.checkout-main .checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) 320px;
    gap: 18px;
    align-items: start;
}

/*======================================
        SHIPPING CARD
======================================*/

.checkout-main .checkout-form-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 18px;
}

.checkout-main .checkout-form-card h2 {
    margin: 0 0 38px;
    font-size: 20px;
    color: #222;
}

/*======================================
            FORM
======================================*/

.checkout-main form {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.checkout-main .form-grid {
    display: grid;
    gap: 12px;
}

.checkout-main .form-grid.two {
    grid-template-columns: repeat(2, 1fr);
}

.checkout-main .form-grid.three {
    grid-template-columns: repeat(3, 1fr);
}

.checkout-main .form-group {
    display: flex;
    flex-direction: column;
}

.checkout-main label {
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
}

.checkout-main input,
.checkout-main textarea {
    width: 100%;
    border: 1px solid #dadada;
    border-radius: 10px;
    background: #fff;
    padding: 10px 13px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.checkout-main input {
    height: 42px;
}

.checkout-main textarea {
    min-height: 80px;
    resize: vertical;
}

.checkout-main input:focus,
.checkout-main textarea:focus {
    border-color: #5b4ff7;
}

.checkout-main input::placeholder,
.checkout-main textarea::placeholder {
    color: #999;
}

/*======================================
        TABLET
======================================*/

@media (max-width: 992px) {
    .checkout-main {
        padding: 35px 14px;
    }

    .checkout-main .checkout-grid {
        grid-template-columns: 1fr;
    }

    .checkout-main .checkout-header h1 {
        font-size: 28px;
    }

    .checkout-main .checkout-form-card {
        padding: 16px;
    }
}

/*======================================
        MOBILE
======================================*/

@media (max-width: 768px) {
    .checkout-main .checkout-header {
        margin-bottom: 14px;
    }

    .checkout-main .checkout-header h1 {
        font-size: 25px;
    }

    .checkout-main .checkout-header p {
        font-size: 13px;
    }

    .checkout-main .checkout-trust {
        gap: 12px;
        margin-bottom: 16px;
    }

    .checkout-main .trust-item {
        font-size: 11px;
    }

    .checkout-main .form-grid.two,
    .checkout-main .form-grid.three {
        grid-template-columns: 1fr;
    }

    .checkout-main .checkout-form-card {
        padding: 15px;
    }

    .checkout-main .checkout-form-card h2 {
        font-size: 20px;
    }

    .checkout-main input {
        height: 40px;
        font-size: 13px;
    }

    .checkout-main textarea {
        min-height: 75px;
        font-size: 13px;
    }
}
/*======================================
        ORDER SUMMARY
======================================*/

.checkout-main .order-summary {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 18px;
}

.checkout-main .order-summary h2 {
    margin: 0 0 16px;
    font-size: 22px;
    color: #222;
}

.checkout-main .summary-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}

.checkout-main .summary-product {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.checkout-main .summary-product img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ececec;
}

.checkout-main .summary-product h4 {
    margin: 0 0 3px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    color: #222;
}

.checkout-main .summary-product p {
    margin: 0;
    font-size: 12px;
    color: #666;
}

.checkout-main .summary-product strong {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #222;
}

/*======================================
        COUPON
======================================*/

.checkout-main .coupon-box {
    border-top: 1px solid #ececec;
    margin-top: 16px;
    padding-top: 16px;
}

.checkout-main .coupon-box label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
}

.checkout-main .coupon-row {
    display: grid;
    grid-template-columns: 1fr 78px;
    gap: 8px;
}

.checkout-main .coupon-row input {
    height: 40px;
}

.checkout-main .coupon-row button {
    height: 40px;
    border: none;
    border-radius: 10px;
    background: #5b4ff7;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/*======================================
        TOTAL
======================================*/

.checkout-main .summary-total {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #ececec;
}

.checkout-main .summary-total > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
    color: #555;
}

.checkout-main .summary-total .grand-total {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #ececec;
    font-size: 15px;
    font-weight: 700;
}

.checkout-main .summary-total .grand-total strong {
    color: #5b4ff7;
    font-size: 18px;
}

/*======================================
        PLACE ORDER
======================================*/

.checkout-main .place-order-btn {
    width: 100%;
    height: 44px;
    margin-top: 16px;
    border: none;
    border-radius: 10px;
    background: #5b4ff7;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/*======================================
        PAYMENT
======================================*/

.checkout-main .payment-card {
    margin-top: 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f6f4ff;
    border: 1px solid #ddd6ff;
    border-radius: 14px;
    padding: 16px;
}

.checkout-main .payment-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5b4ff7;
    font-size: 16px;
}

.checkout-main .payment-content h3 {
    margin: 2px 0 8px;
    font-size: 16px;
    color: #222;
}

.checkout-main .payment-content p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.6;
    color: #555;
}

.checkout-main .payment-content p:last-child {
    margin-bottom: 0;
}

/*======================================
        MOBILE
======================================*/

@media (max-width: 768px) {
    .checkout-main .order-summary {
        padding: 16px;
    }

    .checkout-main .order-summary h2 {
        font-size: 20px;
    }

    .checkout-main .summary-product img {
        width: 48px;
        height: 48px;
    }

    .checkout-main .summary-product h4 {
        font-size: 12px;
    }

    .checkout-main .summary-product p,
    .checkout-main .summary-product strong {
        font-size: 11px;
    }

    .checkout-main .coupon-row {
        grid-template-columns: 1fr 70px;
    }

    .checkout-main .coupon-row input,
    .checkout-main .coupon-row button {
        height: 38px;
    }

    .checkout-main .place-order-btn {
        height: 42px;
        font-size: 13px;
    }

    .checkout-main .payment-card {
        padding: 15px;
    }

    .checkout-main .payment-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 15px;
    }

    .checkout-main .payment-content h3 {
        font-size: 15px;
    }

    .checkout-main .payment-content p {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .checkout-main .coupon-row {
        grid-template-columns: 1fr;
    }

    .checkout-main .coupon-row button {
        width: 100%;
    }

    .checkout-main .summary-total .grand-total strong {
        font-size: 17px;
    }

    .checkout-main .payment-card {
        flex-direction: column;
    }
}

/*======================================
            CART SECTION
======================================*/

.cart-main {
    width: 100%;
    padding: 40px 16px;
    background: #fafafa;
}

.cart-main .cart-container {
    max-width: 1120px;
    margin: 0 auto;
}

/*======================================
            HEADER
======================================*/

.cart-main .cart-header {
    text-align: center;
    margin-bottom: 18px;
}

.cart-main .cart-badge {
    display: inline-block;
    padding: 5px 14px;
    background: #f2efff;
    color: #5b4ff7;
    border-radius: 30px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    margin-bottom: 10px;
}

.cart-main .cart-header h1 {
    margin: 0;
    font-size: 32px;
    color: #222;
    font-weight: 700;
}

.cart-main .cart-header h1 span {
    color: #5b4ff7;
    font-size: 26px;
}

.cart-main .cart-header p {
    margin-top: 10px;
    color: #666;
    font-size: 14px;
}

/*======================================
        SHIPPING BAR
======================================*/

.cart-main .shipping-progress {
    background: #fff;

    border: 1px solid #ececec;

    border-radius: 14px;

    padding: 16px;

    margin-bottom: 18px;
}

.cart-main .shipping-top {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 10px;

    gap: 12px;
}

.cart-main .shipping-left {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #5b4ff7;

    font-size: 13px;

    font-weight: 600;
}

.cart-main .shipping-top strong {
    font-size: 13px;

    color: #333;
}

.cart-main .progress-bar {
    height: 8px;

    background: #ececec;

    border-radius: 30px;

    overflow: hidden;
}

.cart-main .progress-bar span {
    display: block;

    width: 100%;

    height: 100%;

    background: #5b4ff7;
}

/*======================================
            GRID
======================================*/

.cart-main .cart-grid {
    display: grid;

    grid-template-columns: minmax(0, 1.8fr) 330px;

    gap: 18px;

    align-items: start;
}

/*======================================
        PRODUCT LIST
======================================*/

.cart-main .cart-products {
    display: flex;

    flex-direction: column;

    gap: 16px;
}

.cart-main .cart-card {
    display: flex;

    align-items: center;

    gap: 16px;

    background: #fff;

    border: 1px solid #ececec;

    border-radius: 14px;

    padding: 16px;
}

.cart-main .cart-image img {
    width: 78px;

    height: 78px;

    object-fit: cover;

    border-radius: 10px;
}

.cart-main .cart-info {
    flex: 1;
}

.cart-main .cart-info h2 {
    margin: 0 0 8px;

    font-size: 18px;

    color: #222;

    line-height: 1.45;
}

.cart-main .cart-info .price {
    color: #5b4ff7;

    font-size: 16px;

    font-weight: 700;
}

/*======================================
        ACTIONS
======================================*/

.cart-main .cart-actions {
    display: flex !important;

    flex-direction: row !important;

    justify-content: flex-end !important;

    align-items: center !important;

    gap: 5px !important;
}

.cart-main .remove-btn {
    border: none;

    background: none;

    color: #ff3b30;

    cursor: pointer;

    font-size: 18px;

    padding: 0;
}

.cart-main .qty-box {
    display: flex;
    width: 140px !important;

    align-items: center;

    border: 1px solid #ddd;

    border-radius: 30px;

    overflow: hidden;
}

.cart-main .qty-box button {
    width: 34px;

    height: 34px;

    border: none;

    background: #fff;

    cursor: pointer;

    font-size: 18px;

    color: #333;
}

.cart-main .qty-box span {
    width: 34px;

    text-align: center;

    font-size: 14px;

    font-weight: 600;
}

/*======================================
        TABLET
======================================*/

@media (max-width: 992px) {
    .cart-main {
        padding: 35px 14px;
    }

    .cart-main .cart-grid {
        grid-template-columns: 1fr;
    }

    .cart-main .cart-header h1 {
        font-size: 28px;
    }

    .cart-main .qty-box {
        display: flex;
        width: 90px;
        align-items: center;

        border: 1px solid #ddd;

        border-radius: 30px;

        overflow: hidden;
    }

    .cart-main .qty-box button {
        width: 34px;

        height: 34px;

        border: none;

        background: #fff;

        cursor: pointer;

        font-size: 18px;

        color: #333;
    }
}

/*======================================
        ORDER SUMMARY
======================================*/

.cart-main .cart-summary {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 18px;
    position: sticky;
    top: 20px;
}

.cart-main .cart-summary h2 {
    margin: 0 0 18px;
    font-size: 24px;
    color: #222;
}

/*======================================
        SUMMARY ROWS
======================================*/

.cart-main .summary-row {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 0;

    font-size: 14px;

    color: #555;
}

.cart-main .summary-row strong {
    font-weight: 600;

    color: #222;
}

.cart-main .summary-total {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 14px;

    padding-top: 16px;

    border-top: 1px solid #ececec;
}

.cart-main .summary-total span {
    font-size: 18px;

    font-weight: 700;

    color: #222;
}

.cart-main .summary-total strong {
    font-size: 24px;

    color: #5b4ff7;

    font-weight: 700;
}

/*======================================
        FEATURES
======================================*/

.cart-main .summary-features {
    margin: 18px 0;

    padding-top: 16px;

    border-top: 1px solid #ececec;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 10px;
}

.cart-main .summary-features div {
    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 12px;

    color: #555;
}

.cart-main .summary-features i {
    color: #5b4ff7;

    font-size: 12px;
}

/*======================================
            BUTTONS
======================================*/

.cart-main .checkout-btn,
.cart-main .continue-btn {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 44px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;
}

.cart-main .checkout-btn {
    background: #5b4ff7;

    color: #fff;

    margin-bottom: 10px;
}

.cart-main .continue-btn {
    border: 1px solid #dcdcdc;

    color: #333;

    background: #fff;
}

/*======================================
        MOBILE
======================================*/

@media (max-width: 768px) {
    .cart-main {
        padding: 32px 14px;
    }

    .cart-main .cart-summary {
        position: static;

        padding: 16px;

        margin-top: 16px;
    }

    .cart-main .cart-summary h2 {
        font-size: 21px;
    }

    .cart-main .summary-total strong {
        font-size: 20px;
    }

    .cart-main .summary-features {
        grid-template-columns: 1fr 1fr;

        gap: 8px;
    }

    .cart-main .summary-features div {
        font-size: 11px;
    }

    .cart-main .checkout-btn,
    .cart-main .continue-btn {
        height: 42px;

        font-size: 13px;
    }

    .cart-main .cart-card {
        align-items: flex-start;

        gap: 14px;
    }

    .cart-main .cart-image img {
        width: 68px;

        height: 68px;
    }

    .cart-main .cart-info h2 {
        font-size: 16px;
    }

    .cart-main .cart-info .price {
        font-size: 15px;
    }

    .cart-main .cart-actions {
        display: flex !important;

        flex-direction: row !important;

        justify-content: flex-end !important;

        align-items: center !important;

        gap: 1px !important;
    }

    .cart-main .qty-box button {
        width: 30px;

        height: 30px;

        font-size: 16px;
    }

    .cart-main .qty-box span {
        width: 30px;

        font-size: 13px;
    }
}
/*======================================
        MOBILE
======================================*/

@media (max-width: 520px) {
    .cart-main {
        padding: 24px 12px;
    }

    /* Header */

    .cart-main .cart-header {
        margin-bottom: 14px;
    }

    .cart-main .cart-header h1 {
        font-size: 23px;
    }

    .cart-main .cart-header h1 span {
        font-size: 18px;
    }

    /* Shipping */

    .cart-main .shipping-progress {
        padding: 12px;
    }

    .cart-main .shipping-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .cart-main .shipping-left {
        font-size: 11px;
    }

    .cart-main .shipping-top strong {
        font-size: 11px;
    }

    /*=========================
        Product Card
=========================*/

    .cart-main .cart-card {
        display: grid;

        grid-template-columns: 60px 1fr;

        grid-template-areas:
            "image info"
            "image actions";

        gap: 8px 12px;

        align-items: start;

        padding: 14px;
    }

    .cart-main .cart-image {
        grid-area: image;
    }

    .cart-main .cart-image img {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        object-fit: cover;
    }

    .cart-main .cart-info {
        grid-area: info;
    }

    .cart-main .cart-info h2 {
        margin: 0 0 4px;

        font-size: 14px;

        line-height: 1.35;
    }

    .cart-main .cart-info .price {
        font-size: 14px;

        font-weight: 600;
    }

    /* Bottom Row */

    .cart-main .cart-actions {
        grid-area: actions;

        display: flex;

        justify-content: flex-end;

        align-items: center;

        gap: 15px !important;

        width: 100%;
    }

    /* Delete */

    .cart-main .remove-btn {
        width: 24px;

        height: 24px;

        display: flex;

        align-items: center;

        justify-content: center;

        border: none;

        background: none;

        color: #ff3b30;

        font-size: 15px;

        padding: 0;

        cursor: pointer;
    }

    /* Qty */

    .cart-main .qty-box {
        display: flex;
        width: 90px !important;

        align-items: center;

        border: 1px solid #ddd;

        border-radius: 30px;

        overflow: hidden;
    }

    .cart-main .qty-box button {
        width: 28px;

        height: 28px;

        border: none;

        background: #fff;

        font-size: 15px;
    }

    .cart-main .qty-box span {
        width: 28px;

        text-align: center;

        font-size: 12px;

        font-weight: 600;
    }

    /*=========================
        Summary
=========================*/

    .cart-main .cart-summary {
        padding: 14px;

        margin-top: 14px;
    }

    .cart-main .cart-summary h2 {
        font-size: 19px;

        margin-bottom: 14px;
    }

    .cart-main .summary-row {
        padding: 8px 0;

        font-size: 13px;
    }

    .cart-main .summary-total span {
        font-size: 16px;
    }

    .cart-main .summary-total strong {
        font-size: 18px;
    }

    .cart-main .summary-features {
        grid-template-columns: 1fr 1fr;

        gap: 8px;

        margin: 14px 0;
    }

    .cart-main .summary-features div {
        font-size: 11px;
    }

    .cart-main .checkout-btn,
    .cart-main .continue-btn {
        height: 40px;

        font-size: 13px;
    }
}

/* ============================================
   ALL PRODUCTS PAGE - CUSTOM CSS (FINAL)
   Blue Theme (#3577F0) - Fully Responsive
   ============================================ */

/* Main Container */
.all-products-section {
    width: 100%;
    padding: 40px 0;
    background-color: #ffffff !important;
    color: black !important;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Page Header */
.page-header {
    margin-bottom: 30px;
}

.page-title {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a1a !important;
    margin: 0;
    padding: 0;
}

/* Filter Bar - Horizontal Layout */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
    align-items: center;
}

/* Reset link — matches the dropdown height, reads as a quiet action beside
   them until hovered. Only rendered when a filter is actually applied. */
.filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ds-ink-3);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color 0.16s ease,
        background-color 0.16s ease;
}
.filter-clear i {
    font-size: 12px;
}
.filter-clear:hover,
.filter-clear:focus-visible {
    color: var(--ds-brand-600);
    background: var(--ds-surface-2);
    outline: none;
}

.dropdown {
    /* Cancel the theme's `select { width: 100% }` so each control sizes to
       its content, and its `select { height: 55px }` which is what made the
       filters so tall — a class beats the element rule, so this height wins. */
    width: auto;
    min-width: 150px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    font-family: inherit;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233577F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px;
    padding-right: 32px;
    white-space: nowrap;
}

.dropdown:hover {
    border-color: #3577f0;
    box-shadow: 0 2px 8px rgba(53, 119, 240, 0.15);
}

.dropdown:focus {
    outline: none;
    border-color: #3577f0;
    box-shadow: 0 0 0 3px rgba(53, 119, 240, 0.1);
}

/* =====================================================================
   STOREFRONT PRODUCT CARD — shared partial (partials/product-card).
   Rebuilt on the DS design tokens; brand indigo, not the old #3577f0.
   Price selectors are scoped to .product-card so the theme's own
   `.axil-product` cards (home page, footer) keep their own styling.
   ===================================================================== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--ds-5);
    margin-bottom: var(--ds-7);
}

/* --- Empty state (no results / no brand / no category) ------------------
   Centered card: soft brand-tinted icon disc, a clear heading, a
   supportive line and two clear next steps. Spans the whole grid so it
   sits centered rather than stuck in the first column. --------------- */
.products-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 480px;
    margin: 24px auto 8px;
    padding: 44px 28px;
}
.products-empty__icon {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ds-brand-50, #eef2ff);
    color: var(--ds-brand, #4f46e5);
    margin-bottom: 22px;
    box-shadow: 0 0 0 8px rgba(79, 70, 229, 0.05);
}
.products-empty__icon svg {
    width: 38px;
    height: 38px;
}
.products-empty__title {
    margin: 0 0 10px;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ds-ink, #0f1115);
}
.products-empty__text {
    margin: 0 0 26px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ds-ink-3, #5b6270);
}
.products-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.products-empty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 24px;
    border-radius: var(--ds-r-pill, 999px);
    background: var(--ds-brand, #4f46e5);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition:
        background-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}
.products-empty__btn:hover,
.products-empty__btn:focus-visible {
    /* Re-assert white — the theme's global `a:hover { color: primary }`
       otherwise recolours the label to the brand blue, hiding it against
       the button's own blue fill. */
    color: #fff;
    background: var(--ds-brand-600, #4338ca);
    box-shadow: 0 10px 22px rgba(79, 70, 229, 0.22);
    outline: none;
}
.products-empty__btn:active {
    transform: translateY(1px);
}
.products-empty__btn--ghost {
    background: transparent;
    color: var(--ds-ink-2, #3d424d);
    border: 1px solid var(--ds-border, #e4e7ec);
}
.products-empty__btn--ghost:hover,
.products-empty__btn--ghost:focus-visible {
    background: var(--ds-surface-2, #f7f8fa);
    color: var(--ds-ink, #0f1115);
    box-shadow: none;
}

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--ds-3);
    /* Padding frames the image as an inset, rounded tile inside the card
       (the image no longer bleeds to the card edge). */
    padding: var(--ds-3);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-xl);
    box-shadow: var(--ds-shadow-1);
    transition:
        transform var(--ds-base) var(--ds-ease),
        box-shadow var(--ds-base) var(--ds-ease),
        border-color var(--ds-base) var(--ds-ease);
}

.product-card:hover {
    transform: translateY(-4px);
    border-color: var(--ds-border-strong);
    box-shadow: var(--ds-shadow-3);
}

/* --- Media --------------------------------------------------------- */
.product-image-wrapper {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--ds-r-lg);
    background: var(--ds-surface-3);
}

.product-card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ds-base) var(--ds-ease);
}

.product-card:hover .product-image {
    transform: scale(1.04);
}

/* Sale / stock tags — stacked, solid fills so they stay legible over
   any product image, light or dark. */
.product-tags {
    position: absolute;
    top: var(--ds-3);
    left: var(--ds-3);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-2);
    z-index: 2;
}

.product-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: var(--ds-r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #fff;
    background: var(--ds-brand);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.18),
        0 2px 8px rgba(15, 17, 21, 0.3);
}

.product-badge--out {
    /* Light chip + ink text stays legible on the (often dark) product
       images where a near-black "sold out" chip would disappear. */
    background: rgba(255, 255, 255, 0.95);
    color: var(--ds-ink-2);
}

/* --- Body ---------------------------------------------------------- */
.product-info {
    display: flex;
    flex-direction: column;
    gap: var(--ds-3);
    flex: 1 1 auto;
}

.product-name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.product-name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--ds-ink);
    text-decoration: none;
    transition: color var(--ds-fast) var(--ds-ease);
}

.product-name a:hover {
    color: var(--ds-brand);
}

.product-rating {
    display: flex;
    align-items: center;
    gap: var(--ds-2);
    font-size: 12px;
}

.product-rating .stars {
    color: #f5a623;
    font-size: 13px;
    letter-spacing: 1px;
}

.product-rating .rating-count {
    color: var(--ds-ink-4);
}

/* Price — scoped to the card so the theme cards are untouched. Current
   price is ink-black + bold (plain, trustworthy); the deal is carried by
   the badge and the struck original. */
.product-card .product-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--ds-2);
    margin-top: auto;
}

.product-card .current-price {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ds-ink);
}

.product-card .old-price {
    font-size: 14px;
    font-weight: 500;
    color: var(--ds-ink-4);
    text-decoration: line-through;
    text-decoration-color: var(--ds-border-strong);
}

/* --- Add to cart --------------------------------------------------- */
.product-cart-form {
    margin: 0;
}

.add-to-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-2);
    width: 100%;
    padding: 9px var(--ds-4);
    border: 1px solid transparent;
    border-radius: var(--ds-r-md);
    background: var(--ds-brand);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition:
        background var(--ds-fast) var(--ds-ease),
        transform var(--ds-fast) var(--ds-ease),
        box-shadow var(--ds-fast) var(--ds-ease);
}

.add-to-cart-btn i {
    font-size: 15px;
}

.add-to-cart-btn:hover {
    background: var(--ds-brand-600);
    color: #fff;
    box-shadow: var(--ds-shadow-2);
}

.add-to-cart-btn:active {
    transform: translateY(1px);
}

.add-to-cart-btn--disabled,
.add-to-cart-btn:disabled {
    background: var(--ds-surface-3);
    color: var(--ds-ink-4);
    cursor: not-allowed;
    box-shadow: none;
}

/* Out-of-stock: mute the image so the state reads before any hover. */
.product-card.is-out-of-stock .product-image {
    filter: grayscale(0.5) opacity(0.75);
}

/* ============================================
   RESPONSIVE — products page + card
   ============================================ */

/* Tablet — 768px and below */
@media (max-width: 768px) {
    .page-title {
        font-size: 28px;
    }

    .filter-bar {
        max-width: 100%;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ds-4);
    }

    .product-name {
        font-size: 14px;
    }

    .product-card .current-price {
        font-size: 19px;
    }

    .add-to-cart-btn {
        padding: 10px var(--ds-3);
        font-size: 13px;
    }
}

/* Small devices — 480px and below */
@media (max-width: 480px) {
    .all-products-section {
        padding: 20px 0;
    }

    .container {
        padding: 0 12px;
    }

    .page-header {
        margin-bottom: 20px;
    }

    .page-title {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .filter-bar {
        gap: 10px;
        margin-bottom: 20px;
        max-width: 100%;
        flex-wrap: wrap;
    }

    .dropdown {
        padding: 4px 12px;
        font-size: 12px;
        flex: 1;
        min-width: 140px;
        background-position: right 6px center;
        background-size: 16px;
        padding-right: 28px;
    }

    .products-grid {
        gap: var(--ds-3);
    }

    .product-badge {
        padding: 4px 8px;
        font-size: 10px;
    }

    .product-info {
        gap: var(--ds-2);
    }

    .product-name {
        font-size: 13px;
    }

    .product-card .current-price {
        font-size: 18px;
    }

    .product-card .old-price {
        font-size: 13px;
    }

    .add-to-cart-btn {
        padding: 10px var(--ds-3);
        font-size: 12px;
    }
}

/* Extra small — 360px and below */
@media (max-width: 360px) {
    .container {
        padding: 0 10px;
    }

    .page-title {
        font-size: 20px;
    }

    .filter-bar {
        gap: 8px;
    }

    .dropdown {
        padding: 8px 10px;
        font-size: 11px;
        min-width: 130px;
    }

    .products-grid {
        gap: 10px;
    }

    .product-name {
        font-size: 12px;
    }

    .product-card .current-price {
        font-size: 17px;
    }
}

/* Respect reduced-motion: no transforms or transitions on the card. */
@media (prefers-reduced-motion: reduce) {
    .product-card,
    .product-card:hover,
    .product-image,
    .product-card:hover .product-image,
    .add-to-cart-btn,
    .add-to-cart-btn:active {
        transition: none;
        transform: none;
    }
}

/* ============================================
   SINGLE PRODUCT PAGE - COMPLETE FIXED CSS
   Blue Theme (#3577F0) - Fully Responsive
   ============================================ */

/* Force white background in all cases */
.single-product-section {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    padding: 40px 0;
    width: 100%;
}

.single-product-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Product Container - Two Column Layout */
.single-product-section .product-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: flex-start;
}

/* ============================================
   PRODUCT IMAGE SECTION
   ============================================ */

.single-product-section .product-image-section {
    width: 100%;
}

.single-product-section .product-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--ds-surface-2, #f7f8fa);
    border: 1px solid var(--ds-border, #e4e7ec);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-product-section .product-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Product Discount Badge */
.single-product-section .product-discount-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--ds-brand, #4f46e5);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.28);
    z-index: 2;
}

/* ============================================
   PRODUCT DETAILS SECTION
   ============================================ */

.single-product-section .product-details-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Product Title */
.single-product-section .product-title {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ds-ink, #0f1115);
    margin: 0;
    line-height: 1.25;
}

/* Product Price Section */
.single-product-section .product-price-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.single-product-section .product-price {
    font-size: 32px;
    font-weight: 700;
    color: var(--ds-brand, #4f46e5);
}

.single-product-section .product-original-price {
    font-size: 18px;
    color: #999;
    text-decoration: line-through;
    margin-right: 10px;
}

/* Product Rating Section */
.single-product-section .product-rating-section {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.single-product-section .product-stars {
    font-size: 18px;
    color: #ffc107;
    letter-spacing: 2px;
}

.single-product-section .product-review-count {
    color: #666;
}

/* Product Status */
.single-product-section .product-status {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.single-product-section .status-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #3577f0;
}

.single-product-section .status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: #e8f0ff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
}

.single-product-section .status-text {
    color: #1a1a1a;
}

/* Product Description */
.single-product-section .product-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ds-ink-3, #5b6270);
}

.single-product-section .product-description p {
    margin: 0;
}

/* ============================================
   PRODUCT ACTIONS - BEAUTIFUL COUNTER
   ============================================ */

.single-product-section .product-actions {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 10px;
}

/* Quantity Selector - Beautiful Design */
.single-product-section .quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--ds-border, #e4e7ec);
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    padding: 5px;
    gap: 4px;
    height: fit-content;
}

.single-product-section .quantity-btn {
    width: 40px;
    height: 40px;
    border: none;
    background-color: var(--ds-surface-2, #f7f8fa);
    cursor: pointer;
    font-size: 20px;
    color: var(--ds-ink-2, #3d424d);
    font-weight: bold;
    transition:
        background-color 0.16s ease,
        color 0.16s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.single-product-section .quantity-btn:hover {
    background-color: var(--ds-brand-50, #eef2ff);
    color: var(--ds-brand-600, #4338ca);
}

.single-product-section .quantity-btn:active {
    transform: scale(0.95);
}

.single-product-section .minus-btn {
    order: 1;
}

.single-product-section .plus-btn {
    order: 3;
}

.single-product-section .quantity-input {
    width: 54px;
    height: 40px;
    border: none;
    background-color: transparent;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--ds-ink, #0f1115);
    order: 2;
    padding: 0;
}

.single-product-section .quantity-input:focus {
    outline: none;
}

/* Remove number input spinners */
.single-product-section .quantity-input::-webkit-outer-spin-button,
.single-product-section .quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.single-product-section .quantity-input[type="number"] {
    -moz-appearance: textfield;
}

/* Add to Cart Button */
.single-product-section .add-to-cart-btn {
    padding: 0 34px;
    height: 52px;
    background-color: var(--ds-brand, #4f46e5);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.24);
    white-space: nowrap;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 52px;
}

.single-product-section .add-to-cart-btn:hover {
    background-color: var(--ds-brand-600, #4338ca);
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.32);
    transform: translateY(-2px);
}

.single-product-section .add-to-cart-btn:active {
    transform: translateY(0);
}

/* Out of stock / disabled: a muted, flat control — no brand fill, no glow,
   no hover lift — so it plainly reads as unavailable instead of looking
   like an active CTA dimmed with opacity. Scoped here to beat the brand
   background + shadow set on the base single-product button above. */
.single-product-section .add-to-cart-btn:disabled,
.single-product-section .add-to-cart-btn[disabled] {
    background-color: var(--ds-surface-3, #eef0f4);
    color: var(--ds-ink-4, #6b7280);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}

.single-product-section .add-to-cart-btn:disabled:hover,
.single-product-section .add-to-cart-btn[disabled]:hover {
    background-color: var(--ds-surface-3, #eef0f4);
    box-shadow: none;
    transform: none;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet - 768px and below */
@media (max-width: 768px) {
    .single-product-section .product-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .single-product-section .product-title {
        font-size: 24px;
    }

    .single-product-section .product-price {
        font-size: 28px;
    }

    .single-product-section .product-original-price {
        font-size: 16px;
    }

    .single-product-section .product-actions {
        gap: 15px;
        align-items: flex-start;
    }
}

/* Mobile - 480px and below */
@media (max-width: 480px) {
    .single-product-section {
        padding: 20px 0;
    }

    .single-product-section .container {
        padding: 0 12px;
    }

    .single-product-section .product-container {
        gap: 20px;
    }

    .single-product-section .product-image-wrapper {
        aspect-ratio: 1 / 1;
        border-radius: 6px;
    }

    .single-product-section .product-discount-badge {
        top: 12px;
        left: 12px;
        padding: 6px 12px;
        font-size: 12px;
    }

    .single-product-section .product-details-section {
        gap: 16px;
    }

    .single-product-section .product-title {
        font-size: 20px;
        line-height: 1.3;
    }

    .single-product-section .product-price-section {
        gap: 10px;
    }

    .single-product-section .product-price {
        font-size: 24px;
    }

    .single-product-section .product-original-price {
        font-size: 14px;
    }

    .single-product-section .product-rating-section {
        font-size: 13px;
    }

    .single-product-section .product-stars {
        font-size: 16px;
    }

    .single-product-section .product-status {
        gap: 8px;
        padding: 12px 0;
    }

    .single-product-section .status-item {
        font-size: 13px;
        gap: 8px;
    }

    .single-product-section .status-icon {
        width: 18px;
        height: 18px;
        font-size: 11px;
    }

    .single-product-section .product-description {
        font-size: 13px;
        line-height: 1.5;
    }

    .single-product-section .product-actions {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-top: 8px;
    }

    .single-product-section .quantity-selector {
        align-self: stretch;
        /* Edge-to-edge on the full-width box: − pinned left, + pinned right,
           the value centred — instead of the whole cluster floating in the
           middle with dead space on either side. */
        justify-content: space-between;
        border: 1px solid var(--ds-border, #e4e7ec);
        padding: 5px 8px;
    }

    .single-product-section .quantity-btn {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .single-product-section .quantity-input {
        width: 46px;
        height: 38px;
        font-size: 16px;
    }

    .single-product-section .add-to-cart-btn {
        font-size: 15px;
        text-align: center;
        width: 100%;
        align-self: stretch;
        /* Reset the row-layout `flex: 1`. Once the actions stack into a column
           its flex-basis:0% governs the MAIN axis = height and collapses the
           button; `0 0 auto` hands sizing back to the 52px height. */
        flex: 0 0 auto;
    }
}

/* Extra Small - 360px and below */
@media (max-width: 360px) {
    .single-product-section .container {
        padding: 0 10px;
    }

    .single-product-section .product-title {
        font-size: 18px;
    }

    .single-product-section .product-price {
        font-size: 22px;
    }

    .single-product-section .product-original-price {
        font-size: 13px;
    }

    .single-product-section .product-discount-badge {
        padding: 5px 10px;
        font-size: 11px;
    }

    .single-product-section .status-item {
        font-size: 12px;
    }

    .single-product-section .product-description {
        font-size: 12px;
    }

    .single-product-section .quantity-selector {
        gap: 6px;
        padding: 3px;
    }

    .single-product-section .quantity-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .single-product-section .quantity-input {
        width: 30px;
        height: 36px;
        font-size: 15px;
    }

    .single-product-section .add-to-cart-btn {
        padding: 10px 24px;
        font-size: 13px;
    }
}

/* Dark Mode - Force White Background */
@media (prefers-color-scheme: dark) {
    .single-product-section {
        background-color: #ffffff !important;
        color: #1a1a1a !important;
    }

    .single-product-section .product-title {
        color: #1a1a1a !important;
    }

    .single-product-section .product-image-wrapper {
        background-color: var(--ds-surface-2, #f7f8fa) !important;
    }

    .single-product-section .product-description {
        color: var(--ds-ink-3, #5b6270) !important;
    }

    .single-product-section .quantity-selector {
        border-color: var(--ds-border, #e4e7ec) !important;
        background: #ffffff !important;
    }

    .single-product-section .quantity-input {
        color: var(--ds-ink, #0f1115) !important;
    }
}

/*=========================================
    CATEGORY PAGE  ("Shop by category")
    ----------------------------------------
    A category launcher whose card mirrors the storefront product card
    (.product-card) — same shell, radii, shadow ladder and hover lift — so
    it reads as a sibling. The categories carry no photos, so each card
    shows a line-icon in a brand-tinted tile; the accent hue is passed per
    card via --cat-fg / --cat-bg from the template.
=========================================*/

.cats {
    padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px);
}

.cats__inner {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Header --------------------------------------------------------- */
.cats__head {
    max-width: 580px;
    margin: 0 auto clamp(28px, 4vw, 46px);
    text-align: center;
}

.cats__eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: var(--ds-r-pill);
    background: var(--ds-brand-50);
    color: var(--ds-brand-600);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cats__title {
    margin: 0;
    font-size: clamp(30px, 5vw, 46px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ds-ink);
}

.cats__sub {
    margin: 14px auto 0;
    max-width: 460px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ds-ink-3);
}

/* --- Grid ----------------------------------------------------------- */
.cats__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(14px, 2vw, 22px);
}

@media (min-width: 992px) {
    .cats__grid { grid-template-columns: repeat(4, 1fr); }
}

/* Stay 2-up on phones to match the storefront product grid; only drop to a
   single column on the very narrowest screens where two would crowd. */
@media (max-width: 360px) {
    .cats__grid { grid-template-columns: 1fr; }
}

/* --- Card (mirrors .product-card) ----------------------------------- */
.cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--ds-3);
    padding: var(--ds-3);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-xl);
    box-shadow: var(--ds-shadow-1);
    text-decoration: none;
    transition:
        transform var(--ds-base) var(--ds-ease),
        box-shadow var(--ds-base) var(--ds-ease),
        border-color var(--ds-base) var(--ds-ease);
}

.cat-card:hover {
    transform: translateY(-4px);
    border-color: var(--ds-border-strong);
    box-shadow: var(--ds-shadow-3);
}

.cat-card:focus-visible {
    outline: 2px solid var(--ds-brand);
    outline-offset: 2px;
}

/* Media tile — line-icon on a tinted, faintly dotted panel so the
   image-less card still has texture and presence. */
.cat-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    border-radius: var(--ds-r-lg);
    background-color: var(--cat-bg, var(--ds-surface-3));
    background-image: radial-gradient(rgba(15, 17, 21, 0.05) 1px, transparent 1.4px);
    background-size: 15px 15px;
    overflow: hidden;
}

.cat-card__icon {
    width: 46%;
    max-width: 92px;
    height: auto;
    color: var(--cat-fg, var(--ds-brand));
    transition: transform var(--ds-base) var(--ds-ease);
}

.cat-card:hover .cat-card__icon {
    transform: scale(1.07) translateY(-2px);
}

/* Status flag — only surfaces when a category has no stock yet, mirroring
   the product card's "sold out" chip convention. */
.cat-card__badge {
    position: absolute;
    top: var(--ds-3);
    left: var(--ds-3);
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: var(--ds-r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #fff;
    background: var(--cat-fg, var(--ds-brand));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.18),
        0 2px 8px rgba(15, 17, 21, 0.25);
}

/* --- Body ----------------------------------------------------------- */
.cat-card__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    padding: 2px 4px 4px;
}

.cat-card__name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ds-ink);
    transition: color var(--ds-fast) var(--ds-ease);
}

.cat-card:hover .cat-card__name {
    color: var(--ds-brand);
}

.cat-card__meta {
    font-size: 13px;
    color: var(--ds-ink-4);
}

.cat-card__go {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ds-brand-600);
}

.cat-card__go svg {
    transition: transform var(--ds-fast) var(--ds-ease);
}

.cat-card:hover .cat-card__go svg {
    transform: translateX(4px);
}

.cats__empty {
    text-align: center;
    color: var(--ds-ink-4);
    font-size: 15px;
    padding: 40px 0;
}

/* Gentle staggered rise on load; disabled for reduced-motion. */
@keyframes catRise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .cat-card {
        animation: catRise var(--ds-base) var(--ds-ease) backwards;
        animation-delay: calc(var(--i, 0) * 70ms);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cat-card,
    .cat-card__icon,
    .cat-card__go svg {
        transition: none;
    }
    .cat-card:hover {
        transform: none;
    }
}

/* ==========================================
   CONTACT SUCCESS MESSAGE
========================================== */

.nf-contact-ok {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;

    margin: 0 0 30px;
    padding: 22px 26px;

    background: #fff;
    border: 1px solid rgb(6, 47, 122);
    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.05),
        0 18px 40px rgba(53, 119, 240, 0.08);

    animation: slideDown 0.4s ease;
    transition: all 0.3s ease;
}

/* Left Accent Bar */
.nf-contact-ok::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 5px;
    border-radius: 0 8px 8px 0;

    background: linear-gradient(to bottom, #5b95ff, #3577f0, #245fd6);
}

/* Tick Icon */
.success-icon {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 14px;

    background: linear-gradient(135deg, #3577f0, #5b95ff);

    color: #fff;

    font-size: 24px;
    font-weight: 700;

    box-shadow: 0 8px 20px rgba(53, 119, 240, 0.25);
}

/* Text Container */
.nf-contact-ok div {
    flex: 1;
}

/* Heading */
.nf-contact-ok strong {
    display: block;
    margin-bottom: 4px;

    font-size: 17px;
    font-weight: 700;
    color: #111827;
}

/* Message */
.nf-contact-ok span:not(.success-icon) {
    display: block;

    color: #6b7280;

    font-size: 15px;
    line-height: 1.7;
}

/* Hover Effect */
.nf-contact-ok:hover {
    transform: translateY(-3px);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.08),
        0 25px 50px rgba(53, 119, 240, 0.12);
}

/* Animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =====================================================================
   HOMEPAGE POLISH
   ---------------------------------------------------------------------
   Overrides for markup owned by the Axil theme (style.min.css), where
   the offending values live inside the minified bundle and can't be
   edited at source without forking it.
===================================================================== */

/* --- Featured products ---------------------------------------------- */

/* The struck-through original price was #d6d6d6 on white — 1.45:1, which
   is effectively invisible and defeats the point of showing a discount.
   Hierarchy now comes from size, weight and the strikethrough rather
   than from washing the colour out. */
/* Selector shape matches the theme's own
   `.axil-product .product-content .product-price-variant span.price.old-price`
   so it actually wins the cascade rather than losing by one element. */
.axil-product .product-content .product-price-variant span.price.old-price {
    color: var(--ds-ink-4); /* 4.8:1 */
    font-size: 15px;
    font-weight: 500;
    text-decoration: line-through;
}

.axil-product .product-content .product-price-variant span.price.current-price {
    color: var(--ds-ink);
    font-size: 20px;
    font-weight: 700;
}

/* Review count sat at #777 (4.48:1) and 12px. */
.axil-product .product-rating .rating-number {
    color: var(--ds-ink-3);
    font-size: 13px;
}

.axil-product .product-rating .icon i {
    color: #f0a020; /* amber that still reads on white, unlike #ffc107 */
}

.axil-product .product-content .title a {
    color: var(--ds-ink);
    transition: color var(--ds-fast) var(--ds-ease);
}

.axil-product .product-content .title a:hover {
    color: var(--ds-brand-600);
}

/* Discount badge stays on the theme's near-black rather than going
   brand: with Add to Cart now indigo, a dark badge separates the two
   instead of putting two indigo elements on one thumbnail. */
.axil-product .product-badget {
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Add to Cart is the page's primary conversion action, so it gets a real
   control height and a pressed state rather than just a colour. */
.axil-product .cart-action li.select-option a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-2);
    min-height: 44px;
    font-weight: 600;
    transition:
        background-color var(--ds-fast) var(--ds-ease),
        transform var(--ds-fast) var(--ds-ease);
}

.axil-product .cart-action li.select-option a:hover {
    background-color: var(--ds-brand-600);
}

.axil-product .cart-action li.select-option a:active {
    transform: scale(0.985);
}

/* "View All Products" was a 16px underlined link while the identical
   action one section above ("View all") was a 15px arrow link. Same job,
   same treatment. */
.section-title-border .view-btn a {
    font-size: 15px;
    text-decoration: none;
}

.section-title-border .view-btn a::after {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-left: var(--ds-2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234338ca' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
    transition: transform var(--ds-base) var(--ds-ease);
}

.section-title-border .view-btn a:hover::after {
    transform: translateX(4px);
}

/* --- Customer reviews ----------------------------------------------- */

/* The theme staggered the carousel with:

     .testimonial-style-one-wrapper .slick-current.slick-active + .slick-active
       { margin-top: 30px }

   That targets whichever slide currently sits in the SECOND visible
   position, not a particular card. It was merely odd-looking while the
   carousel was static, but the slider now auto-advances, and a
   position-based offset means every card drops 30px as it enters slot
   two and jumps back as it leaves — the row would bounce on every
   tick. Levelled so the motion reads as a clean horizontal slide. */
.testimonial-style-one-wrapper .slick-current.slick-active + .slick-active {
    margin-top: 0;
}

.testimonial-style-one .review-speech p {
    color: var(--ds-ink-2);
    text-wrap: pretty;
}

/* The author avatar is an empty div on every card. An empty box with
   dimensions reads as a failed image load; hiding it until there is a
   real avatar is the honest state. */
.testimonial-style-one .media .thumbnail:empty {
    display: none;
}

.testimonial-style-one .media-body .designation {
    color: var(--ds-ink-3); /* was #777 — 4.07:1 */
}

.testimonial-style-one .media-body .title {
    color: var(--ds-ink);
}

/* --- Free shipping promo banner ------------------------------------- */

/* Consolidated onto the brand token. This banner previously used
   #5860ff / #8ea8ff / #4b46ff, none of which matched the indigo used by
   the hero button or the age gate. */
#zenoPromoBanner {
    background: linear-gradient(
        90deg,
        var(--ds-brand-600) 0%,
        var(--ds-brand) 62%,
        var(--ds-brand-400) 100%
    );
}

/* The eyebrow was "✨ LIMITED TIME OFFER". Sentence case with a bolt
   icon: same emphasis, one type system, no emoji font dependency. */
.zenoSmallText {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-2);
    letter-spacing: 0.08em;
    color: #e8e6ff;
}

.zenoSmallText i {
    font-size: 11px;
}

.zenoPromoText p {
    /* Pure white at reduced opacity keeps this on the banner's own hue
     instead of going grey on a coloured ground. */
    color: rgba(255, 255, 255, 0.88);
}

.zenoPromoBtn {
    color: var(--ds-brand-600);
    min-height: 48px;
    transition:
        transform var(--ds-base) var(--ds-ease),
        box-shadow var(--ds-base) var(--ds-ease);
}

.zenoPromoBtn:hover {
    color: var(--ds-brand-700);
    box-shadow: var(--ds-shadow-3);
}

.zenoPromoBtn:active {
    transform: translateY(0);
}

/* Was a 34px circle containing the letters "AU". Now it carries the
   actual flag, so it becomes a flag-shaped chip: the national flag is
   2:1, and cropping it into a circle would cut the Southern Cross off. */
.zenoCountry {
    width: 34px;
    height: 17px;
    padding: 0;
    border-radius: 3px;
    overflow: hidden;
    background: transparent;
    box-shadow:
        0 0 0 1px rgba(15, 17, 21, 0.14),
        0 1px 2px rgba(15, 17, 21, 0.2);
    flex-shrink: 0;
}

.zenoFlag {
    display: block;
    width: 100%;
    height: 100%;
}

.zenoPromoBtnText {
    white-space: nowrap;
}

/* Focus ring needs to clear the indigo ground, so it inverts here. */
#zenoPromoBanner a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* --- Section headings ------------------------------------------------ */

/* "Shop by Category", "Featured Products" and "Customer Reviews" were
   set at three different sizes by three different rules. One scale. */
.category-title-wrapper .title,
.section-title-border .title,
.axil-testimoial-area .section-title-wrapper .title,
.category-container h2,
.city-guide-container h2 {
    font-size: clamp(24px, 18px + 1vw, 32px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ds-ink);
}

.category-title-wrapper .title,
.section-title-border .title,
.axil-testimoial-area .section-title-wrapper .title {
    margin-bottom: 0;
}

.section-title-border .view-btn a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--ds-brand-600);
    transition: color var(--ds-fast) var(--ds-ease);
}

.section-title-border .view-btn a:hover {
    color: var(--ds-brand-700);
}

/* --- Newsletter ------------------------------------------------------ */

/* --- Newsletter ------------------------------------------------------ */

/* Replaces the stock pastel photograph panel. Carries the hero's
   background treatment — light ground, drifting blooms, masked dot
   lattice — so the page opens and closes in the same visual language. */
.cs-newsletter {
    position: relative;
    overflow: hidden;

    padding: clamp(40px, 5vw, 72px) clamp(20px, 4vw, 64px);

    border-radius: var(--ds-r-lg);
    border: 1px solid var(--ds-border);

    background: linear-gradient(180deg, #f2f3ff 0%, #f9f9fe 46%, #ffffff 100%);
}

.cs-newsletter-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Percentage-sized rather than the hero's vw units: this is a contained
   panel, so the blooms scale to the panel instead of the viewport. The
   drift keyframes are the hero's, reused. */
.cs-newsletter-blob {
    position: absolute;
    display: block;
    border-radius: 50%;
    will-change: transform;
}

.cs-newsletter-blob--1 {
    width: 52%;
    height: 190%;
    top: -46%;
    left: -8%;
    background: radial-gradient(
        circle at center,
        rgba(79, 70, 229, 0.3),
        rgba(79, 70, 229, 0) 66%
    );
    animation: csDrift1 26s var(--ds-ease) infinite;
}

.cs-newsletter-blob--2 {
    width: 46%;
    height: 175%;
    top: -30%;
    right: -10%;
    background: radial-gradient(
        circle at center,
        rgba(99, 102, 241, 0.28),
        rgba(99, 102, 241, 0) 68%
    );
    animation: csDrift2 32s var(--ds-ease) infinite;
}

.cs-newsletter-blob--3 {
    width: 54%;
    height: 150%;
    bottom: -60%;
    left: 26%;
    background: radial-gradient(
        ellipse at center,
        rgba(56, 189, 248, 0.2),
        rgba(56, 189, 248, 0) 68%
    );
    animation: csDrift3 38s var(--ds-ease) infinite;
}

.cs-newsletter-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        rgba(15, 17, 21, 0.09) 1px,
        transparent 1px
    );
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(
        ellipse 62% 60% at 50% 46%,
        #000 18%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 62% 60% at 50% 46%,
        #000 18%,
        transparent 100%
    );
}

.cs-newsletter-inner {
    position: relative;
    z-index: 1;

    max-width: 620px;
    margin: 0 auto;

    /* The old layout pinned everything to the left of a very wide panel,
     leaving two thirds of it empty. */
    text-align: center;
}

.cs-newsletter-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-2);

    margin-bottom: var(--ds-3);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-brand-600);
}

.cs-newsletter-title {
    margin: 0 0 var(--ds-3);

    font-size: clamp(24px, 18px + 1vw, 32px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ds-ink);

    text-wrap: balance;
}

.cs-newsletter-desc {
    margin: 0 auto var(--ds-6);
    max-width: 46ch;

    font-size: 15px;
    line-height: 1.65;
    color: var(--ds-ink-3);

    text-wrap: pretty;
}

.cs-newsletter-form {
    position: relative;
    z-index: 1;

    display: flex;
    gap: var(--ds-3);
    align-items: stretch;

    max-width: 520px;
    margin: 0 auto;
}

.cs-newsletter-field {
    position: relative;
    flex: 1;
    min-width: 0;
}

.cs-newsletter-field i {
    position: absolute;
    left: var(--ds-4);
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--ds-ink-4);
    pointer-events: none;
}

.cs-newsletter-field input {
    width: 100%;
    min-height: 52px;

    padding: 0 var(--ds-4) 0 44px;

    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-r-sm);
    background: #fff;

    font-size: 15px;
    color: var(--ds-ink);

    transition:
        border-color var(--ds-fast) var(--ds-ease),
        box-shadow var(--ds-fast) var(--ds-ease);
}

.cs-newsletter-field input::placeholder {
    /* Placeholders need the same 4.5:1 as body text. */
    color: var(--ds-ink-4);
    opacity: 1;
}

.cs-newsletter-field input:focus {
    outline: none;
    border-color: var(--ds-brand-400);
    box-shadow: 0 0 0 4px rgba(165, 180, 252, 0.35);
}

/* Same solid indigo as the hero's "Shop now", so the page's two primary
   actions look like the same button. */
.cs-newsletter-btn {
    width: auto;
    flex-shrink: 0;

    min-height: 52px;
    padding: 0 var(--ds-6);

    border: 0;
    border-radius: var(--ds-r-sm);
    background: var(--ds-brand);

    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;

    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.24);

    transition:
        background-color var(--ds-fast) var(--ds-ease),
        transform var(--ds-fast) var(--ds-ease),
        box-shadow var(--ds-base) var(--ds-ease);
}

.cs-newsletter-btn:hover {
    background: var(--ds-brand-600);
    box-shadow: 0 12px 26px rgba(79, 70, 229, 0.3);
}

.cs-newsletter-btn:active {
    transform: scale(0.985);
}

.cs-newsletter-note {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-2);

    margin: var(--ds-4) 0 0;

    font-size: 13px;
    color: var(--ds-ink-3);
}

/* Post-submit confirmation (replaces the form) + inline validation error. */
.cs-newsletter-ok {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto;
    padding: 14px 22px;
    border-radius: var(--ds-r-pill, 999px);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #bbf0cf;
    color: #15803d;
    font-size: 15px;
    font-weight: 600;
}
.cs-newsletter-ok i {
    color: #16a34a;
}
.cs-newsletter-err {
    position: relative;
    z-index: 1;
    margin: 10px 0 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #b42318;
}

@media (max-width: 575px) {
    /* Stack rather than squeeze a 52px button beside the field. */
    .cs-newsletter-form {
        flex-direction: column;
    }

    .cs-newsletter-btn {
        width: 100%;
    }

    .cs-newsletter-note {
        text-align: center;
    }
}

/* --- Footer ----------------------------------------------------------- */

/* Payment marks. Vector, so they stay sharp on retina where the old
   20-58px PNGs went soft, and monochrome so five different brand
   palettes don't fight each other in the corner of a dark footer. */
.payment-icons-bottom {
    display: flex;
    align-items: center;
    gap: var(--ds-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.payment-icons-bottom li {
    margin: 0;
    line-height: 1;
}

.payment-icons-bottom i {
    font-size: 30px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.62);
    transition: color var(--ds-fast) var(--ds-ease);
}

.payment-icons-bottom li:hover i {
    color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 767px) {
    .payment-icons-bottom {
        gap: var(--ds-3);
    }

    .payment-icons-bottom i {
        font-size: 26px;
    }

    /* The back-to-top button is fixed to the bottom-right and was sitting
     on top of the payment marks once the footer stacked. */
    .copyright-area {
        padding-bottom: 76px;
    }
}

/* Delivery / support facts that replaced the duplicate subscribe form. */
.footer-assurances {
    margin: var(--ds-5) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--ds-3);
}

.footer-assurances li {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-3);
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}

.footer-assurances i {
    font-size: 16px;
    line-height: 1.4;
    color: var(--ds-brand-400);
    flex-shrink: 0;
}

.footer-assurances a {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--ds-fast) var(--ds-ease);
}

.footer-assurances a:hover {
    color: #fff;
}

/* The heading was 15px against 16px links — smaller than the thing it
   was meant to label, so weight was carrying the whole hierarchy on its
   own. Four signals now separate them: the heading is larger, heavier,
   brighter, and has real space beneath it. */
/* Scoped under .footer-dark to match the theme's own
   `.footer-dark .axil-footer-widget .widget-title`, which sets the
   heading to #c8c8c8 and outranked a two-class selector — leaving the
   heading and its links only a hair apart in brightness. */
.footer-dark .axil-footer-widget .widget-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: #fff;
    margin-bottom: var(--ds-5);
}

.footer-dark .axil-footer-widget .inner ul li a {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.62);
    transition: color var(--ds-fast) var(--ds-ease);
}

.footer-dark .axil-footer-widget .inner ul li a:hover {
    color: #fff;
}

/* A sub-widget sits directly under another list, so it needs a clear
   break above it or the two columns run together as one long list. */
.axil-footer-widget.footer-sub-widget {
    margin-top: var(--ds-7);
}

/* --- Statutory warning ----------------------------------------------- */

/* The ⚠️ emoji here rendered in each platform's emoji font — glossy and
   off-brand on Apple, flat orange on Windows, missing on some Linux
   builds. A legally required warning should not look like a chat
   sticker, and it should render identically everywhere. */
.footer-warning p span {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-2);
}

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

/* At rest the header sits flat on the page. Once content scrolls beneath
   it, it earns a frosted ground and a shadow so the boundary between
   "chrome" and "page" is unambiguous — it was previously a flat white
   bar that merged into any white section passing under it. */
.header.axil-header .axil-mainmenu {
    transition:
        background-color var(--ds-base) var(--ds-ease),
        box-shadow var(--ds-base) var(--ds-ease);
}

.header.axil-header.is-scrolled .axil-mainmenu {
    background: rgba(255, 255, 255, 0.84);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow:
        0 1px 0 var(--ds-border),
        0 6px 24px rgba(15, 17, 21, 0.07);
}

/* The theme already ships a hover underline on ::before: black, sitting
   29px up from the anchor's bottom edge (which rendered it as a detached
   line well below the label), and animated by transitioning `width`.
   Ours sits tight under the text and wipes via background-size, so the
   theme's is switched off rather than left to draw a second underline.
   The theme does exactly this itself for header-style-7. */
.mainmenu > li > a::before {
    display: none;
}

/* ::after is the dropdown chevron on parent items, so the underline is
   drawn as a background gradient to avoid taking a pseudo-element the
   theme is already using. */
.mainmenu > li > a {
    background-image: linear-gradient(var(--ds-brand), var(--ds-brand));
    background-repeat: no-repeat;
    /* Measured from the text's centre line, not the anchor's bottom edge.
     These links get their height from an 80px line-height with no
     padding, so a bottom-anchored offset dropped the rule ~24px below
     the label. Offsetting from 50% keeps the underline the same few
     pixels under the text even if the header row changes height. */
    background-position: 0 calc(50% + 16px);
    background-size: 0% 2px;
    transition:
        background-size var(--ds-base) var(--ds-ease),
        color var(--ds-fast) var(--ds-ease);
}

.mainmenu > li > a:hover,
.mainmenu > li > a:focus-visible,
.mainmenu > li > a.active,
.mainmenu > .menu-item-has-children.menu-item-open > a {
    color: var(--ds-brand-600);
    background-size: 100% 2px;
}

/* Dropdown panel. The theme gave it 15px/10px padding with 5px item
   rows and a colour-only hover, so items sat cramped against the panel
   edge with no hit-area feedback. */
.mainmenu > .menu-item-has-children .axil-submenu {
    min-width: 214px;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid var(--ds-border);
    /* Two-layer shadow: a tight one to seat the panel against the page and
     a wide soft one for depth. A single large blur reads as a smudge. */
    box-shadow:
        0 2px 6px rgba(15, 17, 21, 0.06),
        0 14px 34px rgba(15, 17, 21, 0.13);
}

.mainmenu > .menu-item-has-children .axil-submenu li + li {
    margin-top: 2px;
}

.mainmenu > .menu-item-has-children .axil-submenu li a {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px 12px;
    border-radius: 9px;

    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--ds-ink-2);

    transition:
        background-color var(--ds-fast) var(--ds-ease),
        color var(--ds-fast) var(--ds-ease);
}

.mainmenu > .menu-item-has-children .axil-submenu li a i {
    font-size: 15px;
    line-height: 1;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    color: var(--ds-ink-4);
    transition: color var(--ds-fast) var(--ds-ease);
}

/* Whole row highlights, not just the label — the target is the row. */
.mainmenu > .menu-item-has-children .axil-submenu li a:hover,
.mainmenu > .menu-item-has-children .axil-submenu li a:focus-visible,
.mainmenu > .menu-item-has-children .axil-submenu li a.active {
    color: var(--ds-brand-600);
    background-color: var(--ds-brand-50);
}

.mainmenu > .menu-item-has-children .axil-submenu li a:hover i,
.mainmenu > .menu-item-has-children .axil-submenu li a:focus-visible i,
.mainmenu > .menu-item-has-children .axil-submenu li a.active i {
    color: var(--ds-brand);
}

/* ----------------------------------------------------------------------
   Brands dropdown chevron (desktop)
   ----------------------------------------------------------------------
   The theme pins its `::after` chevron at `top: 1px` — a value tuned for
   the old 80px-tall link. Now the link is 56px it sat too high, and the
   glyph never reacted to the menu opening. Centre it on the text and flip
   it 180deg while the panel is open (same :hover/:focus-within triggers
   that open the panel, plus the theme's .menu-item-open state) so the
   arrow reads as a real open/close affordance and tints with the label.
   ------------------------------------------------------------------- */
@media (min-width: 992px) {
    .mainmenu > .menu-item-has-children > a::after {
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
        transform-origin: center;
        transition:
            transform var(--ds-fast) var(--ds-ease),
            color var(--ds-fast) var(--ds-ease);
    }

    .mainmenu > .menu-item-has-children:hover > a::after,
    .mainmenu > .menu-item-has-children:focus-within > a::after,
    .mainmenu > .menu-item-has-children.menu-item-open > a::after {
        transform: translateY(-50%) rotate(180deg);
        color: var(--ds-brand-600);
    }
}

/* ======================================================================
   BRANDS MEGA-PANEL (desktop dropdown)
   ----------------------------------------------------------------------
   The theme opens `.axil-submenu` on hover of the parent item. Left plain
   it was a 12-item single column — long, thin, and easy to read as broken.
   The `.brands-menu` modifier turns it into a two-column panel with a
   labelled head and a "view all" foot, a hover-intent bridge so the cursor
   can cross the gap without it closing, and a soft rise-in on open.
   ==================================================================== */
@media (min-width: 992px) {
    .mainmenu > .menu-item-has-children .axil-submenu.brands-menu {
        /* Panel sits above all page content via the shared z ladder. */
        z-index: var(--ds-z-dropdown);
        left: 0;
        /* Two columns so 12 brands read as a compact block instead of one
           tall strip that ran off the bottom of shorter screens. */
        min-width: 400px;
        padding: 8px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 4px;
        /* Rise + fade governed here so it's the same on every open, not the
           theme's abrupt top:100%→90% jump. */
        transform: translateY(6px);
        transition:
            opacity var(--ds-base) var(--ds-ease),
            transform var(--ds-base) var(--ds-ease),
            visibility var(--ds-base);
    }

    .mainmenu > .menu-item-has-children:hover .axil-submenu.brands-menu,
    .mainmenu > .menu-item-has-children:focus-within .axil-submenu.brands-menu {
        top: 100%;
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        z-index: var(--ds-z-dropdown);
    }

    /* Tighter rows inside the compact two-column brands panel than the
       theme's default submenu links, so the block stays short. */
    .brands-menu .brands-menu__item a {
        padding: 6px 10px;
        font-size: 14px;
    }

    /* Invisible bridge spanning the 6px gap between the label and the panel,
       so moving the pointer down into the panel never crosses dead space. */
    .mainmenu > .menu-item-has-children .axil-submenu.brands-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -10px;
        height: 10px;
    }

    .brands-menu .brands-menu__head {
        grid-column: 1 / -1;
        margin: 2px 10px 6px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--ds-border);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ds-ink-4);
    }

    .brands-menu .brands-menu__all {
        grid-column: 1 / -1;
        margin-top: 6px;
        padding-top: 8px;
        border-top: 1px solid var(--ds-border);
    }
    .brands-menu .brands-menu__all a {
        justify-content: space-between;
        font-weight: 600;
        color: var(--ds-brand-600);
    }
    .brands-menu .brands-menu__all a i {
        color: var(--ds-brand);
        font-size: 12px;
        width: auto;
        transition: transform var(--ds-fast) var(--ds-ease);
    }
    .brands-menu .brands-menu__all a:hover i {
        transform: translateX(3px);
    }
}

/* Reduced motion: no rise, just a crossfade. */
@media (prefers-reduced-motion: reduce) {
    .mainmenu > .menu-item-has-children .axil-submenu.brands-menu {
        transform: none;
        transition: opacity var(--ds-fast) linear, visibility var(--ds-fast);
    }
    .mainmenu
        > .menu-item-has-children:hover
        .axil-submenu.brands-menu {
        transform: none;
    }
}

/* ======================================================================
   HEADER ACTION ICONS — one icon system across the row
   ----------------------------------------------------------------------
   Search, cart, account and the mobile menu button are all inline
   line-icons on a 24px box with a 1.4 stroke and round caps/joins. The
   previous flaticon glyphs mixed drawing systems, sizes and weights
   (the magnifier drew thin, the person had to be blown up to 34px), so
   the row never read as one set. Every icon here shares the same viewBox
   and stroke, so they match in size, weight and baseline by construction.
   Search and account keep the scale-in hover disc; the cart inherits the
   theme's own disc (both go white on hover via currentColor).
   ==================================================================== */
.header-search-trigger-item {
    position: relative;
}
.header-search-trigger {
    position: relative;
    z-index: 1;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 50%;
    color: var(--color-heading);
    cursor: pointer;
}
/* Same 45px hover disc as the account button, so the whole action row
   shares one hover language. */
.header-search-trigger::after {
    content: "";
    position: absolute;
    inset: -10.5px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--ds-brand-600);
    transform: scale(0);
    z-index: -1;
    transition: transform 0.3s ease;
}
.header-search-trigger:hover::after,
.header-search-trigger:focus-visible::after {
    transform: scale(1);
}
/* SVG line-icon. Its ink box is normalised to y3–21, identical to the cart
   and account glyphs, so no baseline nudge is needed — all three sit level. */
.header-search-trigger__icon {
    display: block;
    color: var(--color-heading);
    transition: color 0.3s ease;
}
.header-search-trigger:hover,
.header-search-trigger:focus,
.header-search-trigger:active {
    background: transparent;
    border: 0;
    box-shadow: none;
}
.header-search-trigger:hover .header-search-trigger__icon,
.header-search-trigger:focus-visible .header-search-trigger__icon {
    color: #fff;
}

/* Cart — SVG on its anchor. No color set here: it inherits the anchor's
   colour, which the theme flips to white on hover (over the scale-in disc).
   Its wheels already sit at the box's base (y21 of the viewBox), so unlike
   the magnifier it needs no baseline nudge. */
.shopping-cart > a .shopping-cart__icon {
    display: block;
}

/* Mobile menu button. Block-level flex (not inline-flex): as an inline
   element it sat in the li's 27px line-box, inflating the li to ~32px and
   lifting the icon ~4px above the cart / account glyphs. `display:flex`
   drops the line-box so the li is exactly 24px and the icon rides the same
   centre + baseline as the rest of the row. */
.axil-mobile-toggle .menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--color-heading);
    line-height: 1;
}
.axil-mobile-toggle .menu-btn .menu-btn__icon {
    display: block;
}

/* ======================================================================
   SEARCH MODAL
   ==================================================================== */
.cs-search[hidden] {
    display: none;
}
.cs-search {
    position: fixed;
    inset: 0;
    z-index: var(--ds-z-modal);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(12px, 8vh, 96px) 16px 16px;
}
.cs-search__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 17, 21, 0.44);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--ds-base) var(--ds-ease);
}
.cs-search.is-open .cs-search__backdrop {
    opacity: 1;
}
.cs-search__panel {
    position: relative;
    width: 100%;
    max-width: 620px;
    max-height: min(72vh, 640px);
    display: flex;
    flex-direction: column;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    box-shadow: var(--ds-shadow-3);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
    transition:
        opacity var(--ds-base) var(--ds-ease),
        transform var(--ds-base) var(--ds-ease);
}
.cs-search.is-open .cs-search__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Search bar */
.cs-search__form {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ds-border);
}
.cs-search__leadicon {
    font-size: 18px;
    color: var(--ds-ink-4);
    flex-shrink: 0;
}
.cs-search__input {
    /* width:auto defeats the theme's `input[type=search]{width:270px}` and
       `input,button{width:100%}` resets, which would otherwise become the
       flex-basis and break the row. */
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 28px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--ds-ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}
.cs-search__input::placeholder {
    color: var(--ds-ink-4);
    font-weight: 400;
}
.cs-search__input:focus {
    outline: none;
}
/* Kill the native search clear/decoration for a clean field. */
.cs-search__input::-webkit-search-decoration,
.cs-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
.cs-search__close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Explicit basis + width so the theme's `input,button{width:100%}` reset
       can't inflate it into the input's space. */
    flex: 0 0 auto;
    width: auto;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-sm);
    background: var(--ds-surface-2);
    color: var(--ds-ink-3);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition:
        color var(--ds-fast) var(--ds-ease),
        border-color var(--ds-fast) var(--ds-ease),
        background-color var(--ds-fast) var(--ds-ease);
}
.cs-search__close:hover,
.cs-search__close:focus-visible {
    color: var(--ds-ink);
    border-color: var(--ds-border-strong);
    background: var(--ds-surface-3);
    outline: none;
}
.cs-search__esc {
    letter-spacing: 0.02em;
}
.cs-search__close i {
    font-size: 12px;
}

/* Results area */
.cs-search__results {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
}
.cs-search__hint {
    margin: 0;
    padding: 26px 12px;
    text-align: center;
    color: var(--ds-ink-4);
    font-size: 14px;
}
.cs-search__hint.is-loading {
    color: var(--ds-ink-3);
}
.cs-search__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cs-search__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 10px;
    border-radius: var(--ds-r-md);
    color: var(--ds-ink);
    text-decoration: none;
    scroll-margin: 8px;
    transition: background-color var(--ds-fast) var(--ds-ease);
}
.cs-search__row.is-active,
.cs-search__row:hover {
    background: var(--ds-brand-50);
}
.cs-search__thumb {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: var(--ds-r-sm);
    border: 1px solid var(--ds-border);
    background: var(--ds-surface-2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cs-search__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cs-search__rowbody {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cs-search__name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ds-ink);
    /* Two lines max, then ellipsis — product names run long. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cs-search__brand {
    font-size: 12px;
    font-weight: 500;
    color: var(--ds-ink-4);
}
.cs-search__oos {
    color: #b42318;
    font-weight: 600;
}
.cs-search__price {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-left: 6px;
}
.cs-search__oldprice {
    font-size: 12px;
    color: var(--ds-ink-4);
    text-decoration: line-through;
}
.cs-search__nowprice {
    font-size: 14px;
    font-weight: 700;
    color: var(--ds-ink);
}
.cs-search__row.is-active .cs-search__nowprice {
    color: var(--ds-brand-700);
}

/* View-all row */
.cs-search__viewall {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding: 12px 14px;
    border-radius: var(--ds-r-md);
    background: var(--ds-surface-2);
    color: var(--ds-brand-600);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    scroll-margin: 8px;
    transition:
        background-color var(--ds-fast) var(--ds-ease),
        color var(--ds-fast) var(--ds-ease);
}
.cs-search__viewall i {
    font-size: 12px;
    transition: transform var(--ds-fast) var(--ds-ease);
}
.cs-search__viewall.is-active,
.cs-search__viewall:hover {
    background: var(--ds-brand-600);
    color: #fff;
}
.cs-search__viewall.is-active i,
.cs-search__viewall:hover i {
    transform: translateX(3px);
}

/* Empty state */
.cs-search__empty {
    padding: 30px 20px 34px;
    text-align: center;
}
.cs-search__empty-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ds-ink);
}
.cs-search__empty-sub {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--ds-ink-4);
}
.cs-search__empty-cta {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    border-radius: var(--ds-r-pill);
    background: var(--ds-brand);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--ds-fast) var(--ds-ease);
}
.cs-search__empty-cta:hover {
    background: var(--ds-brand-600);
    color: #fff;
}

/* Footer hints */
.cs-search__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 10px 16px;
    border-top: 1px solid var(--ds-border);
    background: var(--ds-surface-2);
    font-size: 11.5px;
    color: var(--ds-ink-4);
}
.cs-search__foot span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cs-search__foot kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid var(--ds-border-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--ds-surface);
    font-family: inherit;
    font-size: 11px;
    color: var(--ds-ink-3);
}
/* Footer hints only add value on pointer + keyboard; hide on small screens. */
@media (max-width: 575px) {
    .cs-search__foot {
        display: none;
    }
    .cs-search__esc {
        display: none;
    }
}

/* Lock background scroll while the modal is open. */
.cs-search-lock {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .cs-search__backdrop,
    .cs-search__panel {
        transition: opacity var(--ds-fast) linear;
        transform: none;
    }
    .cs-search.is-open .cs-search__panel {
        transform: none;
    }
}

/* ======================================================================
   MOBILE OFF-CANVAS NAV (< 992px)
   ----------------------------------------------------------------------
   The theme slid `.mainmenu-nav` in from the right as a plain scrolling
   list — a janky `right` animation, rows staggering in over a full second,
   and no chrome beyond a logo. This rebuilds it as a modern app drawer:

     • a fixed brand + close row,
     • a search entry that opens the shared product-search modal,
     • roomy 48px rounded rows with an accordion that binds its submenu
       into one tinted card, and
     • a pinned footer carrying the account actions and the store's trust
       promises (free shipping, 48h dispatch) right where the visitor
       decides whether to act.

   Motion is transform-based (GPU) with a tight entrance; the backdrop
   gains a soft scrim + blur. The desktop horizontal nav is untouched —
   the drawer-only pieces are hidden at >=992px at the end of this block.
   ==================================================================== */
@media (max-width: 991px) {
    /* ---- Panel: GPU slide, rounded leading edge, elevation ---- */
    .header-main-nav .mainmenu-nav {
        right: 0;
        /* Pin to the viewport, not the sticky header. The header's
           backdrop-filter makes it the containing block for this fixed panel,
           so the theme's top/bottom:0 collapses the drawer to the 60px header
           once the page is scrolled (the page then shows through). An explicit
           viewport height keeps the drawer full-height in every scroll state. */
        top: 0;
        bottom: auto;
        height: 100vh;
        height: 100dvh;
        width: min(420px, 100vw);
        padding: 0;
        display: flex;
        flex-direction: column;
        background: var(--ds-surface);
        border-radius: 0;
        box-shadow: var(--ds-shadow-3);
        opacity: 1;
        visibility: hidden;
        overflow: hidden;
        transform: translateX(100%);
        transition:
            transform var(--ds-base) var(--ds-ease),
            visibility 0s linear var(--ds-base);
    }
    .header-main-nav.open .mainmenu-nav {
        transform: translateX(0);
        visibility: visible;
        transition:
            transform var(--ds-base) var(--ds-ease),
            visibility 0s;
    }

    /* Lock the page behind the open drawer — it was scrolling through the
       fixed panel. `.open` lands on <body>; :has() reaches the real <html>
       scroller too. */
    html:has(body.open),
    body.open {
        overflow: hidden;
    }

    /* ---- Header row: brand left, close right ---- */
    .mainmenu-nav .mobile-nav-brand {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0;
        padding: 14px 16px;
        background: var(--ds-surface);
        border-bottom: 1px solid var(--ds-border);
    }
    .mainmenu-nav .mobile-nav-brand .logo img {
        max-height: 30px;
        width: auto;
    }
    .mainmenu-nav .mobile-close-btn {
        position: static;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 0;
        background: var(--ds-surface-2);
        color: var(--ds-ink-2);
        transition:
            background-color var(--ds-fast) var(--ds-ease),
            color var(--ds-fast) var(--ds-ease);
    }
    .mainmenu-nav .mobile-close-btn svg {
        display: block;
    }
    .mainmenu-nav .mobile-close-btn:hover,
    .mainmenu-nav .mobile-close-btn:focus-visible {
        background: var(--ds-surface-3);
        color: var(--ds-ink);
        outline: none;
    }

    /* ---- Search entry (opens the shared product-search modal) ---- */
    .mnav-search {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 14px 16px 4px;
        padding: 0 14px;
        min-height: 46px;
        border-radius: var(--ds-r-md);
        border: 1px solid var(--ds-border);
        background: var(--ds-surface-2);
        color: var(--ds-ink-4);
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
        transition:
            background-color var(--ds-fast) var(--ds-ease),
            border-color var(--ds-fast) var(--ds-ease);
    }
    .mnav-search__i {
        flex: 0 0 auto;
        color: var(--ds-ink-3);
    }
    .mnav-search:hover,
    .mnav-search:focus-visible {
        background: var(--ds-surface);
        border-color: var(--ds-border-strong);
        outline: none;
    }

    /* ---- Scrollable nav list ---- */
    .header-main-nav .mainmenu-nav .mainmenu {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 8px 12px 14px;
    }
    .mainmenu-nav .mainmenu > li {
        margin: 1px 0 !important;
        border: 0;
    }
    .header-main-nav .mainmenu-nav .mainmenu > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 48px;
        height: auto !important;
        padding: 6px 14px;
        border-radius: var(--ds-r-md);
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--ds-ink-2);
        transition:
            background-color var(--ds-fast) var(--ds-ease),
            color var(--ds-fast) var(--ds-ease);
    }
    .header-main-nav .mainmenu-nav .mainmenu > li > a:hover,
    .header-main-nav .mainmenu-nav .mainmenu > li > a:focus-visible {
        background: var(--ds-surface-2);
        color: var(--ds-ink);
        outline: none;
    }
    /* Current page */
    .mainmenu-nav .mainmenu > li.current > a,
    .mainmenu-nav .mainmenu > li.current-menu-item > a {
        background: var(--ds-brand-50);
        color: var(--ds-brand-600);
    }

    /* Section label between the shop + info groups */
    .mnav-label {
        margin: 14px 8px 2px !important;
        padding: 14px 6px 0;
        border-top: 1px solid var(--ds-border);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--ds-ink-4);
        list-style: none;
    }

    /* ---- Accordion: chevron + tinted group card ---- */
    .mainmenu-nav .mainmenu > li.menu-item-has-children > a::after {
        transition: transform var(--ds-base) var(--ds-ease);
    }
    .mainmenu-nav .mainmenu > li.menu-item-has-children.open > a::after {
        transform: rotate(180deg);
    }
    /* Open Brands accordion: parent link + submenu bound into one tinted
       card so the expanded list reads as "inside Brands", not floating. */
    .header-main-nav .mainmenu-nav .mainmenu > li.menu-item-has-children.open {
        margin: 8px 0 !important;
        padding: 2px 6px 8px;
        background: var(--ds-surface-2);
        border: 1px solid var(--ds-border);
        border-radius: var(--ds-r-lg);
    }
    .mainmenu-nav .mainmenu > li.menu-item-has-children.open > a {
        background: transparent;
        color: var(--ds-brand-600);
    }
    /* Submenu: drop the desktop card; it lives inside the group card now.
       Two compact columns keep the 12-brand list short (was one long column
       that forced a lot of scrolling). Column layout works over the theme's
       inline display:block; the head + "view all" span both columns. */
    .mainmenu-nav .mainmenu > .menu-item-has-children .axil-submenu.brands-menu {
        column-count: 2;
        column-gap: 10px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        padding: 0 2px;
        margin: 0;
    }
    .brands-menu .brands-menu__head {
        column-span: all;
        margin: 2px 8px 4px;
        padding: 0;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--ds-ink-4);
    }
    .mainmenu-nav .brands-menu .brands-menu__item {
        margin: 0;
        break-inside: avoid;
    }
    .mainmenu-nav .brands-menu .brands-menu__item a {
        min-height: 40px;
        padding: 6px 10px;
        border-radius: var(--ds-r-sm);
        font-size: 14px;
        font-weight: 500;
        color: var(--ds-ink-3);
    }
    .mainmenu-nav .brands-menu .brands-menu__item a:hover,
    .mainmenu-nav .brands-menu .brands-menu__item a:focus-visible {
        background: var(--ds-surface);
        color: var(--ds-brand-600);
    }
    .mainmenu-nav .brands-menu .brands-menu__all {
        column-span: all;
        margin: 4px 4px 0;
        padding-top: 8px;
        border-top: 1px solid var(--ds-border);
    }
    .mainmenu-nav .brands-menu .brands-menu__all a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 42px;
        padding: 6px 10px;
        font-size: 13.5px;
        font-weight: 700;
        color: var(--ds-brand-600);
    }
    .mainmenu-nav .brands-menu .brands-menu__all a i {
        font-size: 12px;
        width: auto;
    }

    /* ---- Entrance: tight staggered rows (was the theme's 0.3–1s crawl) ---- */
    .header-main-nav .mainmenu-nav .mainmenu > li {
        transform: translateY(7px);
        opacity: 0;
        transition:
            transform var(--ds-base) var(--ds-ease),
            opacity var(--ds-base) var(--ds-ease);
    }
    .header-main-nav.open .mainmenu-nav .mainmenu > li {
        transform: translateY(0);
        opacity: 1;
    }
    .header-main-nav.open .mainmenu-nav .mainmenu > li:nth-child(1) { transition-delay: 0.06s; }
    .header-main-nav.open .mainmenu-nav .mainmenu > li:nth-child(2) { transition-delay: 0.09s; }
    .header-main-nav.open .mainmenu-nav .mainmenu > li:nth-child(3) { transition-delay: 0.12s; }
    .header-main-nav.open .mainmenu-nav .mainmenu > li:nth-child(4) { transition-delay: 0.15s; }
    .header-main-nav.open .mainmenu-nav .mainmenu > li:nth-child(5) { transition-delay: 0.18s; }
    .header-main-nav.open .mainmenu-nav .mainmenu > li:nth-child(6) { transition-delay: 0.21s; }
    .header-main-nav.open .mainmenu-nav .mainmenu > li:nth-child(7) { transition-delay: 0.24s; }
    .header-main-nav.open .mainmenu-nav .mainmenu > li:nth-child(8) { transition-delay: 0.27s; }
    .header-main-nav.open .mainmenu-nav .mainmenu > li:nth-child(9) { transition-delay: 0.30s; }
    .header-main-nav.open .mainmenu-nav .mainmenu > li:nth-child(n + 10) { transition-delay: 0.33s; }

    /* ---- Footer: account actions + trust promises ---- */
    .mnav-foot {
        flex: 0 0 auto;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--ds-border);
        background: var(--ds-surface);
    }
    .mnav-account {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .mnav-account--auth {
        grid-template-columns: 1fr;
    }
    .mnav-account--auth .mnav-account__row {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .mnav-account--auth .mnav-account__row form {
        display: contents;
    }
    .mnav-hi {
        grid-column: 1 / -1;
        margin: 0 2px 4px;
        font-size: 13px;
        line-height: 1.4;
        color: var(--ds-ink-3);
    }
    .mnav-hi b {
        color: var(--ds-ink);
        font-weight: 700;
    }
    .mnav-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 46px;
        padding: 0 14px;
        border-radius: var(--ds-r-md);
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        cursor: pointer;
        transition:
            background-color var(--ds-fast) var(--ds-ease),
            border-color var(--ds-fast) var(--ds-ease),
            color var(--ds-fast) var(--ds-ease);
    }
    .mnav-btn--primary {
        background: var(--ds-brand);
        color: #fff;
        border: 1px solid var(--ds-brand);
    }
    .mnav-btn--primary:hover,
    .mnav-btn--primary:focus-visible {
        background: var(--ds-brand-600);
        border-color: var(--ds-brand-600);
        color: #fff;
        outline: none;
    }
    .mnav-btn--ghost {
        background: var(--ds-surface);
        color: var(--ds-ink-2);
        border: 1px solid var(--ds-border-strong);
    }
    .mnav-btn--ghost:hover,
    .mnav-btn--ghost:focus-visible {
        background: var(--ds-surface-2);
        color: var(--ds-ink);
        outline: none;
    }
    .mnav-trust {
        list-style: none;
        margin: 13px 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 7px;
    }
    .mnav-trust li {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--ds-ink-3);
    }
    .mnav-trust svg {
        flex: 0 0 auto;
        color: var(--ds-green);
    }

    /* ---- Backdrop: scrim + fade-in, identical to the cart drawer overlay ---- */
    body.open .closeMask {
        background: rgba(15, 17, 21, 0.5);
        animation: mnavFade var(--ds-base) var(--ds-ease);
    }
    @keyframes mnavFade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* ---- Reduced motion: no slide, no stagger ---- */
    @media (prefers-reduced-motion: reduce) {
        .header-main-nav .mainmenu-nav {
            transition: visibility 0s !important;
        }
        .header-main-nav .mainmenu-nav .mainmenu > li {
            transform: none !important;
            opacity: 1 !important;
            transition: none !important;
        }
        body.open .closeMask {
            animation: none !important;
        }
    }
}

/* Drawer-only chrome never shows in the desktop horizontal nav. */
@media (min-width: 992px) {
    .mnav-search,
    .mnav-foot,
    .mnav-label,
    .mnav-tree {
        display: none !important;
    }
}

/* ======================================================================
   MOBILE MENU TREE (drawer-only)
   ----------------------------------------------------------------------
   The desktop `.mainmenu` markup is shared with the horizontal header, so
   it can't be re-nested into collapsible groups without breaking the top
   bar. Instead the phone drawer renders a dedicated tree: named groups
   (Shop / Brands / Help), each a chip + label + chevron that collapses,
   with children hung off a vertical connector guide-line and a leading
   icon per row — the Linear-style grouped-nav pattern. On phones we hide
   the shared list and show this; the desktop nav is never touched.
   ==================================================================== */
@media (max-width: 991px) {
    /* Swap the shared horizontal list out for the tree on phones. */
    .header-main-nav .mainmenu-nav .mainmenu {
        display: none;
    }
    .mnav-tree {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 6px 12px 14px;
        list-style: none;
    }

    /* A leaf row: the top-level Home link and every nested item share it. */
    .mnav-row {
        display: flex;
        align-items: center;
        gap: 11px;
        min-height: 46px;
        padding: 6px 12px;
        border-radius: var(--ds-r-md);
        color: var(--ds-ink-2);
        font-size: 15px;
        font-weight: 600;
        transition:
            background-color var(--ds-fast) var(--ds-ease),
            color var(--ds-fast) var(--ds-ease);
    }
    .mnav-row .mnav-ico {
        min-width: 20px;
        text-align: center;
        font-size: 16px;
        color: var(--ds-brand);
        transition: color var(--ds-fast) var(--ds-ease);
    }
    .mnav-row:hover,
    .mnav-row:focus-visible {
        background: var(--ds-surface-2);
        color: var(--ds-ink);
        outline: none;
    }
    .mnav-row:hover .mnav-ico {
        color: var(--ds-brand-600);
    }
    /* Current page = brand-tint pill. */
    .mnav-row.is-current {
        background: var(--ds-brand-50);
        color: var(--ds-brand-600);
    }
    .mnav-row.is-current .mnav-ico {
        color: var(--ds-brand);
    }
    .mnav-row__badge {
        margin-left: auto;
        background: var(--ds-brand);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        padding: 1px 8px;
        border-radius: var(--ds-r-pill);
        line-height: 1.5;
    }

    /* ---- Group: chip + label + collapse chevron ---- */
    .mnav-grp {
        margin: 2px 0;
    }
    .mnav-grp__head {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 11px;
        min-height: 46px;
        padding: 6px 12px;
        background: transparent;
        border: 0;
        cursor: pointer;
        border-radius: var(--ds-r-md);
        color: var(--ds-ink);
        font: inherit;
        font-size: 15px;
        font-weight: 700;
        transition: background-color var(--ds-fast) var(--ds-ease);
    }
    .mnav-grp__head:hover,
    .mnav-grp__head:focus-visible {
        background: var(--ds-surface-2);
        outline: none;
    }
    .mnav-chip {
        width: 24px;
        height: 24px;
        flex: 0 0 auto;
        border-radius: 8px;
        display: grid;
        place-items: center;
        font-size: 13px;
        color: #fff;
    }
    .mnav-chip--amber {
        background: linear-gradient(160deg, #fbbf24, #f59e0b);
    }
    .mnav-chip--indigo {
        background: linear-gradient(160deg, var(--ds-brand-400), var(--ds-brand));
    }
    .mnav-chip--violet {
        background: linear-gradient(160deg, #a78bfa, #8b5cf6);
    }
    .mnav-grp__label {
        flex: 1;
        text-align: left;
        white-space: nowrap;
    }
    .mnav-grp__chev {
        font-size: 12px;
        color: var(--ds-ink-4);
        transition: transform var(--ds-base) var(--ds-ease);
    }
    .mnav-grp.is-collapsed .mnav-grp__chev {
        transform: rotate(-90deg);
    }

    /* ---- Children hung off a vertical connector guide-line ---- */
    .mnav-grp__items {
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
        overflow: hidden;
        /* Bounded-height accordion: content stays well under the cap, so the
           height tween never clips and reads as a clean slide. */
        max-height: 640px;
        transition: max-height var(--ds-base) var(--ds-ease);
    }
    .mnav-grp.is-collapsed .mnav-grp__items {
        max-height: 0;
    }
    .mnav-grp__items::before {
        content: "";
        position: absolute;
        left: 23px;
        top: 0;
        bottom: 8px;
        width: 1.5px;
        background: var(--ds-border);
        border-radius: 2px;
    }
    .mnav-grp__items .mnav-row {
        margin-left: 16px;
        min-height: 42px;
        font-size: 14.5px;
        font-weight: 500;
        color: var(--ds-ink-3);
    }
    .mnav-grp__items .mnav-row .mnav-ico {
        font-size: 15px;
    }
    /* Active child pins a brand tick onto the guide-line. */
    .mnav-grp__items .mnav-row.is-current {
        position: relative;
    }
    .mnav-grp__items .mnav-row.is-current::before {
        content: "";
        position: absolute;
        left: -17px;
        top: 50%;
        transform: translateY(-50%);
        width: 1.5px;
        height: 24px;
        background: var(--ds-brand);
        border-radius: 2px;
    }

    /* Brands list: single column. */
    .mnav-grp__items.is-2col {
        columns: 1;
    }
    .mnav-grp__items.is-2col .mnav-row {
        break-inside: avoid;
    }
    .mnav-grp__all {
        columns: 1;
        column-span: all;
        margin-top: 2px;
    }
    .mnav-grp__all .mnav-row {
        color: var(--ds-brand-600);
        font-weight: 700;
    }
    .mnav-grp__all .mnav-row .mnav-ico {
        color: var(--ds-brand);
    }
}

/* --- Store pagination (product listings) -------------------------------
   Borderless: plain-text page numbers with the current page as a filled
   indigo disc, text Prev/Next with chevrons, and a right-aligned result
   count. --------------------------------------------------------------- */
.store-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    margin: 44px 0 8px;
}
.store-pagination-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.store-page a,
.store-page span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--ds-ink-2, #3d424d);
    text-decoration: none;
    transition:
        color var(--ds-fast) var(--ds-ease),
        background-color var(--ds-fast) var(--ds-ease);
}
.store-page a:hover,
.store-page a:focus-visible {
    background: var(--ds-surface-2, #f7f8fa);
    color: var(--ds-brand-600, #4338ca);
    outline: none;
}
/* Current page — filled disc with a soft ring, like the reference. */
.store-page.is-active span {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    background: var(--ds-brand, #4f46e5);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}
/* Previous / Next — label + chevron, no box. */
.store-page--edge a,
.store-page--edge span {
    padding: 0 10px;
    font-weight: 600;
    color: var(--ds-ink, #0f1115);
}
.store-page--edge svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.store-page.is-dots span {
    min-width: 24px;
    padding: 0 2px;
    color: var(--ds-ink-4, #6b7280);
    cursor: default;
}
/* Disabled Prev/Next at the list ends. */
.store-page.is-disabled span {
    color: #c2c5cd;
    cursor: default;
}
/* Right-aligned result count. */
.store-pagination-summary {
    margin: 0;
    color: var(--ds-ink-4, #6b7280);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .store-pagination {
        justify-content: center;
    }
    .store-pagination-summary {
        width: 100%;
        text-align: center;
        order: 2;
    }
}

/* --- Product reviews --------------------------------------------------- */
.spReview_summaryLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 14px auto 0;
    color: #3577f0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}
.spReview_summaryLink:hover {
    color: #1c4942;
}
.spReview_summaryStars,
.spReviews_stars {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #d69a16;
    font-size: 14px;
    line-height: 1;
}
.spReviews {
    padding: 34px 15px 78px;
    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(79, 70, 229, 0.12),
            transparent 30%
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(245, 248, 255, 1));
}
.spReviews_shell {
    max-width: 1180px;
    margin: 0 auto;
}
.spReviews_head {
    max-width: 760px;
    margin-bottom: 22px;
}
.spReviews_head > div:first-child {
    min-width: 0;
}
.spReviews_kicker {
    display: inline-block;
    margin-bottom: 10px;
    color: black;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.spReviews_head h2 {
    max-width: 760px;
    font-size: clamp(28px, 3vw, 40px);
    color: black;
    text-wrap: balance;
}
.spReviews_head p {
    max-width: 590px;
    margin: 12px 0 0;
    color: #6d706d;
    font-size: 15.5px;
    line-height: 1.7;
    text-wrap: pretty;
}
.spReviews_alert {
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 14px;
    padding: 12px 15px;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}
.spReviews_alert.success {
    background: #E4ECFD;
    color: #3577F0;
    border: 1px solid #509ccb;
}
.spReviews_alert.error {
    background: #fdecea;
    color: #b0271b;
    border: 1px solid #f4cdc8;
}
.spReviews_grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 22px;
    align-items: start;
}
.spReviews_list {
    display: grid;
    gap: 14px;
}
.spReview_card,
.spReviews_empty,
.spReview_form {
    border: 1px solid rgba(36, 84, 75, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 36px rgba(28, 73, 66, 0.07);
}
.spReview_card {
    padding: 22px;
}
.spReview_cardTop {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    margin-bottom: 14px;
}
.spReview_avatar {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(36, 84, 75, 0.09);
    color: #24544b;
    border: 1px solid rgba(36, 84, 75, 0.14);
    font-size: 17px;
    font-weight: 800;
}
.spReview_card h3 {
    color: #1c4942;
    font-family: var(--default-font);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 6px;
}
.spReview_card p {
    color: #616761;
    font-size: 15px;
    line-height: 1.75;
    margin: 0 0 16px;
    text-wrap: pretty;
}
.spReview_meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid rgba(36, 84, 75, 0.1);
    padding-top: 13px;
    color: #5d756d;
    font-size: 12.5px;
    font-weight: 700;
}
.spReviews_empty {
    min-height: 260px;
    padding: 34px 24px;
    display: grid;
    place-items: center;
    text-align: center;
    align-content: center;
}
.spReviews_empty i {
    color: var(--ds-brand, #4f46e5);
    font-size: 34px;
    margin-bottom: 12px;
}
.spReviews_empty h3 {
    color: black;
    font-family: var(--default-font);
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
}
.spReviews_empty p {
    max-width: 430px;
    margin: 0;
    color: #6d706d;
    font-size: 14.5px;
    line-height: 1.7;
}
.spReview_form {
    position: sticky;
    top: 22px;
    padding: 24px;
}
.spReview_formHead {
    margin-bottom: 18px;
}
.spReview_formHead span {
    color: var(--ds-brand-600, #4338ca);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.spReview_formHead h3 {
    color: black;
    font-family: var(--default-font);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    margin-top: 6px;
}
.spReview_account {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(36, 84, 75, 0.12);
    border-radius: 16px;
    background: #f6faf7;
    padding: 12px;
    margin-bottom: 16px;
}
.spReview_accountIcon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: #24544b;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
}
.spReview_account span,
.spReview_account small {
    display: block;
    color: #5d756d;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

/* Reviews rendered as a chat-style thread of message bubbles (avatar + bubble). */
.spReviews_thread {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.spReview_msg {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.spReview_msgAvatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 16px;
    color: #fff;
    background: #3577F0;
    box-shadow: 0 4px 10px rgba(36, 84, 75, 0.22);
}
.spReview_bubble {
    position: relative;
    max-width: 640px;
    background: #fff;
    border: 1px solid rgba(36, 84, 75, 0.12);
    border-radius: 4px 16px 16px 16px;
    padding: 11px 16px 12px;
    box-shadow: 0 6px 18px rgba(31, 77, 69, 0.06);
}
.spReview_bubble::before {
    content: "";
    position: absolute;
    top: 13px;
    left: -7px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-left: 1px solid rgba(36, 84, 75, 0.12);
    border-bottom: 1px solid rgba(36, 84, 75, 0.12);
    transform: rotate(45deg);
    border-radius: 0 0 0 3px;
}
.spReview_bubbleHead {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}
.spReview_bubbleName {
    font-weight: 800;
    color: black;
    font-size: 14px;
}
.spReview_bubbleBody {
    margin: 2px 0 6px;
    color: #40564f;
    font-size: 14.5px;
    line-height: 1.5;
}
.spReview_bubbleTime {
    color: #6d706d;
    font-size: 11.5px;
    font-weight: 600;
}
@media (max-width: 767px) {
    .spReview_msgAvatar {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }
    .spReview_bubble {
        padding: 10px 13px 11px;
    }
}

/* Threaded replies under a review (customer or store/admin), plus the reply composer. */
.spReview_col {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.spReply_msg {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-left: 22px;
}
.spReply_avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 12px;
    color: #24544b;
    background: #dfeae6;
}
.spReply_avatar.is-admin {
    background: linear-gradient(135deg, #24544b, #2f6a5d);
    color: #fff;
    font-size: 13px;
}
.spReply_bubble {
    position: relative;
    max-width: 560px;
    background: #f4f8f6;
    border: 1px solid rgba(36, 84, 75, 0.1);
    border-radius: 4px 14px 14px 14px;
    padding: 8px 13px 9px;
}
.spReply_bubble.is-admin {
    background: #eef5f1;
    border-color: rgba(36, 84, 75, 0.2);
}
.spReply_head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}
.spReply_name {
    font-weight: 800;
    color: #1f4d45;
    font-size: 12.5px;
}
.spReply_badge {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: #24544b;
    border-radius: 999px;
    padding: 1px 7px;
}
.spReply_body {
    margin: 1px 0 4px;
    color: #40564f;
    font-size: 13px;
    line-height: 1.45;
}
.spReply_time {
    color: #8a938f;
    font-size: 10.5px;
    font-weight: 600;
}
.spReply_compose {
    margin-left: 22px;
}
.spReply_toggle {
    border: none;
    background: transparent;
    color: #24544b;
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    padding: 2px 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.spReply_toggle:hover {
    color: #1f4d45;
    text-decoration: underline;
}
.spReply_form {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 560px;
}
.spReply_form textarea {
    width: 100%;
    border: 1px solid rgba(36, 84, 75, 0.18);
    border-radius: 10px;
    padding: 8px 11px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    background: #fff;
}
.spReply_form textarea:focus {
    outline: none;
    border-color: #24544b;
    box-shadow: 0 0 0 3px rgba(36, 84, 75, 0.12);
}
.spReply_send {
    align-self: flex-start;
    border: none;
    background: #24544b;
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    border-radius: 999px;
    padding: 7px 16px;
    cursor: pointer;
}
.spReply_send:hover {
    background: #1f4d45;
}
.spReply_signin {
    margin-left: 22px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #24544b;
    font-weight: 700;
    font-size: 12.5px;
    text-decoration: none;
}
.spReply_signin:hover {
    text-decoration: underline;
}
@media (max-width: 767px) {
    .spReply_msg,
    .spReply_compose,
    .spReply_signin {
        margin-left: 8px;
    }
}
.spReview_account strong {
    display: block;
    overflow-wrap: anywhere;
    color: #1c4942;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
}
.spReview_form label {
    display: block;
    margin-bottom: 14px;
}
.spReview_form label > span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: black;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 7px;
}
.spReview_form label > span em {
    color: #8f9893;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}
.spReview_form input,
.spReview_form select,
.spReview_form textarea {
    width: 100%;
    border: 1px solid var(--ds-border, #e4e7ec);
    border-radius: 12px;
    background: #ffffff;
    color: var(--ds-ink, #0f1115);
    font-family: var(--default-font);
    font-size: 14.5px;
    line-height: 1.35;
    padding: 12px 13px;
    outline: none;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}
.spReview_form textarea {
    min-height: 132px;
    resize: vertical;
}
.spReview_form input:focus,
.spReview_form select:focus,
.spReview_form textarea:focus {
    border-color: var(--ds-brand, #4f46e5);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.16);
}
.spReview_form small {
    display: block;
    margin-top: 6px;
    color: #b0271b;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
}
.spReviews_hp {
    display: none !important;
}
.spReview_submit {
    width: 100%;
    min-height: 50px;
    border: none;
    border-radius: 12px;
    background: var(--ds-brand, #4f46e5);
    color: #fff;
    font-family: var(--default-font);
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}
.spReview_submit:hover {
    background: var(--ds-brand-600, #4338ca);
    box-shadow: 0 12px 26px rgba(79, 70, 229, 0.28);
    transform: translateY(-2px);
}
.spReview_submit:active {
    transform: scale(0.98);
}

/* Interactive star-rating input (accessible radiogroup; row-reverse fills 1..N). */
.spReview_ratingField {
    margin-bottom: 14px;
}
.spReview_ratingLabel {
    display: block;
    color: black;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 7px;
}
.spStarRate {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}
.spStarRate input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
/* The site theme styles every radio label with a ::before circle + ::after
   tick and a 28px left pad. On the star rating we override all of that with
   higher-specificity selectors: the label draws a font-independent Unicode
   star, and the theme's circle/tick pseudo-elements are neutralised. */
.spStarRate input[type="radio"] ~ label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: static;
    margin: 0;
    padding: 2px;
    line-height: 1;
    color: #d3d8e0;
    cursor: pointer;
    border-radius: 8px;
    transition:
        color 0.14s ease,
        transform 0.14s ease;
}
.spStarRate label i {
    display: none;
}
.spStarRate input[type="radio"] ~ label::before {
    content: "\2605";
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: "Segoe UI Symbol", "Apple Color Emoji", system-ui, sans-serif;
    font-size: 30px;
    line-height: 1;
    color: inherit;
}
.spStarRate input[type="radio"] ~ label::after {
    content: none;
    display: none;
}
.spStarRate input[type="radio"]:checked ~ label::before {
    background: none;
    border: 0;
}
.spStarRate label:hover {
    transform: scale(1.12);
}
.spStarRate input[type="radio"]:checked ~ label,
.spStarRate label:hover,
.spStarRate label:hover ~ label {
    color: #f59e0b;
}
.spStarRate input:focus-visible + label {
    outline: 2px solid var(--ds-brand, #4f46e5);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .spStarRate label {
        transition: color 0.14s ease;
    }
    .spStarRate label:hover {
        transform: none;
    }
}

/* Reply composer name input (sits above the reply textarea). */
.spReply_nameInput {
    width: 100%;
    max-width: 260px;
    border: 1px solid rgba(36, 84, 75, 0.18);
    border-radius: 10px;
    padding: 8px 11px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    color: #24544b;
}
.spReply_nameInput:focus {
    outline: none;
    border-color: #24544b;
    box-shadow: 0 0 0 3px rgba(36, 84, 75, 0.12);
}
.spReview_signInCard {
    display: grid;
    gap: 16px;
}
.spReview_signInIcon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(255, 209, 102, 0.22);
    color: #24544b;
    font-size: 25px;
}
.spReview_signInCard p {
    margin: 0;
    color: #616761;
    font-size: 14.5px;
    line-height: 1.7;
}
.spReview_signInActions {
    display: grid;
    gap: 10px;
}
.spReview_secondaryLink {
    min-height: 44px;
    border: 1px solid rgba(36, 84, 75, 0.18);
    border-radius: 13px;
    color: #24544b;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    transition:
        border-color 0.18s ease,
        color 0.18s ease,
        background-color 0.18s ease;
}
.spReview_secondaryLink:hover {
    border-color: #24544b;
    color: #1c4942;
    background: #f6faf7;
}

@media (max-width: 991px) {
    .spReviews_grid {
        grid-template-columns: 1fr;
    }
    .spReview_form {
        position: static;
    }
}

@media (max-width: 575px) {
    .spReviews {
        padding: 26px 14px 56px;
    }
    .spReview_card,
    .spReviews_empty,
    .spReview_form {
        border-radius: 16px;
        padding: 18px;
    }
    .spReview_meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

/* ============================================================
   Customer auth (sign in / sign up).
   Trust-first split panel: a flat deep-indigo panel stating the
   store's real terms (the conversion lever for a skeptical buyer)
   beside a crafted form. No gradients/glow — believability, not
   decoration. px units throughout (theme sets html{font-size:10px}).
   ============================================================ */
.cs-auth-section {
    padding: 56px 0 84px;
    background: #f5f6f8;
}
.cs-auth {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    max-width: 1000px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e6e8ee;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px -34px rgba(15, 17, 21, 0.30);
}

/* ---- Left: trust panel (brighter indigo, was a flat deep #3730a3) ---- */
.cs-auth-aside {
    background: linear-gradient(158deg, #6366f1 0%, #4f46e5 58%, #4338ca 100%);
    color: #ffffff;
    padding: 46px 40px;
    display: flex;
    flex-direction: column;
}

/* Home / browse escape hatch inside the panel. */
.cs-auth-browse {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    margin: 0 0 26px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition:
        background-color 0.16s ease,
        transform 0.16s ease;
}
.cs-auth-browse:hover,
.cs-auth-browse:focus-visible {
    background: rgba(255, 255, 255, 0.26);
    color: #ffffff;
    outline: none;
}
.cs-auth-browse:active {
    transform: translateY(1px);
}
.cs-auth-browse i {
    font-size: 12px;
}
.cs-auth-crest {
    cursor: pointer;
}
.cs-auth-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 30px;
}
/* White pill sized to the wordmark: the mark carries black lettering, so
   it needs a light backing to read against the deep-indigo aside. Width is
   left to the logo (a ~5.5:1 wordmark) rather than pinned to a square. */
.cs-auth-crest {
    display: inline-grid;
    place-items: center;
    width: auto;
    height: auto;
    padding: 9px 14px;
    background: #ffffff;
    border-radius: 12px;
    flex: 0 0 auto;
}
.cs-auth-crest img {
    height: 24px;
    width: auto;
    display: block;
}
.cs-auth-brand b {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.01em;
}
.cs-auth-pitch {
    font-size: 24px;
    line-height: 1.28;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 28px;
    max-width: 20ch;
    color: #ffffff;
}
.cs-auth-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.cs-auth-points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
}
.cs-auth-points i {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 10px;
    margin-top: 1px;
}
.cs-auth-assure {
    margin-top: auto;
    padding-top: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}
.cs-auth-assure i {
    font-size: 16px;
}

/* ---- Right: form panel ---- */
.cs-auth-main {
    padding: 46px 46px 40px;
}
.cs-auth-head {
    margin-bottom: 22px;
}
.cs-auth-head h1 {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0f1115;
    margin: 0 0 6px;
    line-height: 1.14;
}
.cs-auth-head p {
    font-size: 14px;
    color: #5b6270;
    margin: 0;
}
.cs-auth-head a,
.cs-auth-foot a {
    color: #4f46e5;
    font-weight: 600;
}
.cs-auth-head a:hover,
.cs-auth-foot a:hover {
    color: #4338ca;
}

.cs-auth-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.cs-auth-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.cs-auth-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cs-auth-field > label {
    font-size: 13px;
    font-weight: 600;
    color: #3d424d;
    margin-bottom: 7px;
}
.cs-auth-field input,
.cs-auth-field select,
.cs-auth-field textarea {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    font-size: 15px;
    font-family: inherit;
    color: #0f1115;
    background: #ffffff;
    border: 1px solid #d5d7de;
    border-radius: 11px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
    appearance: none;
    -webkit-appearance: none;
}
.cs-auth-field textarea {
    height: auto;
    min-height: 128px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}
.cs-auth-field select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6270' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}
.cs-auth-field input::placeholder {
    color: #949aa6;
}
.cs-auth-field input:focus,
.cs-auth-field select:focus,
.cs-auth-field textarea:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.16);
}
.cs-auth-field input[readonly] {
    background: #f3f4f6;
    color: #6b7280;
    cursor: default;
}
.cs-auth-field.has-error input,
.cs-auth-field.has-error select {
    border-color: #d9564d;
}
.cs-auth-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #b42318;
}

.cs-auth-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #3d424d;
    line-height: 1.4;
    cursor: pointer;
    margin: 1px 0;
}
.cs-auth-check input {
    /* The Axil theme hides native checkboxes (opacity:0; position:absolute) to
       swap in its own sprite. We're drawing our own box here, so force it back
       into the flow and visible. */
    opacity: 1 !important;
    position: static !important;
    appearance: none;
    -webkit-appearance: none;
    width: 19px;
    height: 19px;
    margin: 0;
    flex: 0 0 auto;
    border: 1.5px solid #b7bcc7;
    border-radius: 5px;
    background: #ffffff;
    cursor: pointer;
    display: grid;
    place-content: center;
    transition: background 140ms ease, border-color 140ms ease;
}
.cs-auth-check input::after {
    content: "";
    width: 11px;
    height: 11px;
    transform: scale(0);
    transition: transform 120ms ease;
    background: #ffffff;
    clip-path: polygon(14% 44%, 0 65%, 43% 100%, 100% 22%, 84% 8%, 40% 66%);
}
.cs-auth-check input:checked {
    background: #4f46e5;
    border-color: #4f46e5;
}
.cs-auth-check input:checked::after {
    transform: scale(1);
}
.cs-auth-check input:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

.cs-auth-btn {
    width: 100%;
    height: 50px;
    margin-top: 6px;
    background: #4f46e5;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
.cs-auth-btn:hover {
    background: #4338ca;
    box-shadow: 0 12px 26px -12px rgba(79, 70, 229, 0.65);
}
.cs-auth-btn:active {
    transform: translateY(1px);
}
.cs-auth-btn:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

.cs-auth-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: #fef2f2;
    border: 1px solid #f5cccc;
    border-radius: 11px;
    color: #a4291f;
    font-size: 14px;
    line-height: 1.35;
}
.cs-auth-alert i {
    flex: 0 0 auto;
}
.cs-auth-alert--ok {
    background: #ecfdf3;
    border-color: #bbf0cf;
    color: #15803d;
}

.cs-auth-foot {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #edeff3;
    font-size: 14px;
    color: #5b6270;
}

/* ---- Global auth flash (sits under the header) ---- */
.cs-flash-wrap {
    padding: 16px 0 0;
}
.cs-flash {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 13px 16px;
    border-radius: 11px;
    font-size: 14px;
    line-height: 1.35;
}
.cs-flash i {
    font-size: 16px;
    flex: 0 0 auto;
}
.cs-flash--ok {
    background: #edfbf3;
    border: 1px solid #bfe9d0;
    color: #10683b;
}
.cs-flash--err {
    background: #fef2f2;
    border: 1px solid #f5cccc;
    color: #a4291f;
}

@media (max-width: 767px) {
    .cs-auth-section {
        padding: 32px 0 56px;
    }
    .cs-auth {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
    .cs-auth-aside {
        padding: 30px 26px 28px;
    }
    .cs-auth-pitch {
        font-size: 20px;
        margin-bottom: 22px;
    }
    .cs-auth-points {
        gap: 12px;
    }
    .cs-auth-assure {
        padding-top: 22px;
    }
    .cs-auth-main {
        padding: 30px 26px 32px;
    }
    .cs-auth-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-auth-field input,
    .cs-auth-field select,
    .cs-auth-btn {
        transition: none;
    }
}

/* ---- Cart badge + add-to-cart toast ---- */
.shopping-cart > a {
    position: relative;
}
.cs-cart-count {
    position: absolute;
    top: -7px;
    right: -9px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #4f46e5;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
}
#cs-toast-host {
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.cs-toast {
    background: #0f1115;
    color: #fff;
    padding: 11px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.35;
    box-shadow: 0 12px 34px -12px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    max-width: 300px;
}
.cs-toast.show {
    opacity: 1;
    transform: none;
}
.cs-toast--ok {
    background: #10683b;
}
.cs-toast--err {
    background: #a4291f;
}

/* ============ Mini auth pages (forgot / reset / verify email) ============ */
.csm-section { padding: 56px 0 84px; }
.csm-wrap { max-width: 460px; margin: 0 auto; }
.csm-card { background: #fff; border: 1px solid #e6e8ee; border-radius: 16px; padding: 34px 32px; box-shadow: 0 6px 24px rgba(16, 18, 32, .05); }
.csm-icon { width: 56px; height: 56px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: #eef2ff; color: #4f46e5; font-size: 23px; }
.csm-card h1 { font-size: 23px; font-weight: 700; color: #0f1115; text-align: center; margin: 0 0 8px; letter-spacing: -.3px; }
.csm-lead { color: #5b6270; font-size: 14.5px; line-height: 1.6; text-align: center; margin: 0 auto 24px; max-width: 360px; }
.csm-alert { padding: 11px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.5; margin-bottom: 18px; }
.csm-alert.ok { background: #edfbf3; border: 1px solid #b9e6cd; color: #10683b; }
.csm-alert.err { background: #fef2f2; border: 1px solid #f5cccc; color: #a4291f; }
.csm-form { display: flex; flex-direction: column; gap: 15px; }
.csm-field label { display: block; font-size: 13px; font-weight: 600; color: #3d424d; margin-bottom: 6px; }
.csm-field input { width: 100%; height: 46px; padding: 0 13px; font-size: 15px; border: 1px solid #d5d7de; border-radius: 10px; color: #0f1115; background: #fff; }
.csm-field input:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
.csm-field .csm-err { display: block; color: #a4291f; font-size: 12.5px; margin-top: 5px; }
.csm-btn { background: #4f46e5; color: #fff; font-weight: 600; font-size: 15px; padding: 13px; border: 0; border-radius: 11px; cursor: pointer; transition: background .16s; width: 100%; }
.csm-btn:hover { background: #4338ca; }
.csm-foot { text-align: center; margin-top: 20px; font-size: 13.5px; color: #5b6270; }
.csm-foot a { color: #4f46e5; font-weight: 600; }
.csm-foot a:hover { color: #4338ca; }

/* ============ Customer account area ============ */
.cs-acct { padding: 40px 0 72px; }
.cs-acct-head { margin-bottom: 26px; }
.cs-acct-head h1 { font-size: 26px; font-weight: 700; color: #0f1115; letter-spacing: -.4px; margin: 0 0 4px; }
.cs-acct-head p { color: #5b6270; font-size: 15px; margin: 0; }
.cs-acct-grid { display: grid; grid-template-columns: 248px 1fr; gap: 26px; align-items: start; }
@media (max-width: 860px) { .cs-acct-grid { grid-template-columns: 1fr; } }
/* sidebar */
.cs-acct-side { background: #fff; border: 1px solid #e6e8ee; border-radius: 16px; padding: 20px; position: sticky; top: 20px; }
.cs-acct-user { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 12px; border-bottom: 1px solid #eef0f5; }
.cs-acct-avatar { width: 44px; height: 44px; border-radius: 50%; background: #eef2ff; color: #4f46e5; display: grid; place-items: center; font-weight: 700; font-size: 17px; flex: 0 0 auto; }
.cs-acct-user strong { display: block; font-size: 14.5px; color: #0f1115; line-height: 1.3; }
.cs-acct-user span { display: block; font-size: 12.5px; color: #8a91a3; word-break: break-word; }
.cs-acct-nav { display: flex; flex-direction: column; gap: 3px; }
.cs-acct-nav a, .cs-acct-nav button { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: #3d424d; background: none; border: 0; width: 100%; text-align: left; cursor: pointer; transition: background .14s, color .14s; }
.cs-acct-nav a:hover, .cs-acct-nav button:hover { background: #f4f5fb; color: #4f46e5; }
.cs-acct-nav a.is-active { background: #4f46e5; color: #fff; }
.cs-acct-nav i { width: 18px; text-align: center; font-size: 15px; }
.cs-acct-nav .cs-acct-signout { color: #a4291f; margin-top: 4px; border-top: 1px solid #eef0f5; border-radius: 0 0 10px 10px; padding-top: 14px; }
.cs-acct-nav .cs-acct-signout:hover { background: #fef2f2; color: #a4291f; }
/* content */
.cs-acct-main { min-width: 0; }
.cs-acct-card { background: #fff; border: 1px solid #e6e8ee; border-radius: 16px; padding: 24px; margin-bottom: 20px; }
.cs-acct-card h2 { font-size: 17px; font-weight: 700; color: #0f1115; margin: 0 0 16px; }
.cs-acct-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 20px; }
.cs-acct-stat { background: #fff; border: 1px solid #e6e8ee; border-radius: 14px; padding: 18px 20px; }
.cs-acct-stat .v { font-size: 26px; font-weight: 800; color: #0f1115; letter-spacing: -.5px; }
.cs-acct-stat .l { font-size: 13px; color: #5b6270; margin-top: 2px; }
/* order rows */
.cs-acct-order { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; border-bottom: 1px solid #eef0f5; }
.cs-acct-order:last-child { border-bottom: 0; }
.cs-acct-order-info .num { font-weight: 700; color: #0f1115; font-size: 14.5px; }
.cs-acct-order-info .meta { color: #8a91a3; font-size: 13px; margin-top: 2px; }
.cs-acct-order-right { text-align: right; white-space: nowrap; }
.cs-acct-order-right .tot { font-weight: 700; color: #0f1115; font-size: 14.5px; }
.cs-acct-pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef2ff; color: #3730a3; margin-top: 4px; }
.cs-acct-pill.is-cancelled { background: #fef2f2; color: #a4291f; }
.cs-acct-pill.is-delivered { background: #edfbf3; color: #10683b; }
.cs-acct-pill.is-await { background: #fff7ed; color: #9a3412; }
.cs-acct-link { color: #4f46e5; font-weight: 600; font-size: 14px; }
.cs-acct-link:hover { color: #4338ca; }
.cs-acct-empty { text-align: center; padding: 40px 20px; color: #5b6270; }
.cs-acct-empty i { font-size: 34px; color: #c3c8d6; display: block; margin-bottom: 12px; }
.cs-acct-empty .csm-btn, .cs-acct-btn { display: inline-block; width: auto; background: #4f46e5; color: #fff; font-weight: 600; padding: 11px 22px; border-radius: 10px; margin-top: 14px; }
.cs-acct-btn:hover { background: #4338ca; color: #fff; }
/* profile form */
.cs-acct-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs-acct-form .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .cs-acct-form { grid-template-columns: 1fr; } }
.cs-acct-form label { display: block; font-size: 13px; font-weight: 600; color: #3d424d; margin-bottom: 6px; }
.cs-acct-form input, .cs-acct-form select { width: 100%; height: 46px; padding: 0 13px; font-size: 15px; border: 1px solid #d5d7de; border-radius: 10px; color: #0f1115; background: #fff; }
.cs-acct-form input:focus, .cs-acct-form select:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.cs-acct-form input[readonly] { background: #f4f5fb; color: #8a91a3; }
.cs-acct-form .err { color: #a4291f; font-size: 12.5px; margin-top: 5px; display: block; }
/* order detail */
.cs-acct-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #3d424d; padding: 10px 0; border-bottom: 1px solid #f2f4f8; }
.cs-acct-sum { display: flex; justify-content: space-between; font-size: 14px; color: #5b6270; padding: 5px 0; }
.cs-acct-sum.total { font-weight: 800; color: #0f1115; font-size: 16px; border-top: 1px solid #e6e8ee; margin-top: 6px; padding-top: 12px; }
.cs-acct-back { color: #5b6270; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.cs-acct-back:hover { color: #4f46e5; }

/* Order status timeline (shared by track page + account order detail) */
.cs-tr-timeline { display: flex; flex-direction: column; gap: 2px; }
.cs-tr-stage { display: flex; gap: 14px; padding: 12px 0; position: relative; opacity: .5; }
.cs-tr-stage.is-done { opacity: 1; }
.cs-tr-stage-ico { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #eef2ff; color: #4f46e5; font-size: 15px; }
.cs-tr-stage.is-done .cs-tr-stage-ico { background: #4f46e5; color: #fff; }
.cs-tr-stage-body strong { display: block; color: #0f1115; font-size: 15px; }
.cs-tr-stage-body span { color: #6b7280; font-size: 13px; }

/* =====================================================================
   SLIDE-OUT CART DRAWER  (partials/cart-drawer + cart-drawer-body)
   Shares CartService money math with the /cart page and checkout.
   ===================================================================== */
html.cs-drawer-lock {
    overflow: hidden;
}

.cs-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--ds-z-modal);
    background: rgba(15, 17, 21, 0.5);
    opacity: 0;
    transition: opacity var(--ds-base) var(--ds-ease);
}

.cs-drawer-overlay.is-open {
    opacity: 1;
}

.cs-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: calc(var(--ds-z-modal) + 1);
    display: flex;
    flex-direction: column;
    width: min(420px, 100vw);
    height: 100%;
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-3);
    transform: translateX(100%);
    transition: transform var(--ds-base) var(--ds-ease);
    will-change: transform;
}

.cs-drawer.is-open {
    transform: translateX(0);
}

.cs-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-3);
    padding: var(--ds-4) var(--ds-5);
    border-bottom: 1px solid var(--ds-border);
}

.cs-drawer-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ds-ink);
}

.cs-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--ds-r-pill);
    background: var(--ds-surface-2);
    color: var(--ds-ink-2);
    font-size: 18px;
    cursor: pointer;
    transition:
        background var(--ds-fast) var(--ds-ease),
        color var(--ds-fast) var(--ds-ease);
}

.cs-drawer-close:hover {
    background: var(--ds-surface-3);
    color: var(--ds-ink);
}

.cs-drawer-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Items list scrolls; the footer stays pinned to the bottom. */
.cs-drawer-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--ds-3);
    padding: var(--ds-3) var(--ds-4);
}

.cs-drawer-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: var(--ds-3);
    align-items: start;
}

.cs-drawer-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: var(--ds-r-md);
    background: var(--ds-surface-3);
}

.cs-drawer-item-name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ds-ink);
    text-decoration: none;
}

.cs-drawer-item-name:hover {
    color: var(--ds-brand);
}

.cs-drawer-item-unit {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--ds-ink-4);
}

.cs-drawer-qty {
    display: inline-flex;
    align-items: center;
    width: max-content;
    margin-top: var(--ds-1);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-pill);
    overflow: hidden;
}

.cs-drawer-qty form {
    display: flex;
    margin: 0;
}

.cs-drawer-qty-btn {
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    color: var(--ds-ink-2);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--ds-fast) var(--ds-ease);
}

.cs-drawer-qty-btn:hover:not(:disabled) {
    background: var(--ds-surface-2);
}

.cs-drawer-qty-btn:disabled {
    color: var(--ds-border-strong);
    cursor: not-allowed;
}

.cs-drawer-qty-val {
    min-width: 26px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-ink);
}

.cs-drawer-item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--ds-2);
}

.cs-drawer-line {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ds-ink);
    white-space: nowrap;
}

.cs-drawer-remove {
    padding: 2px;
    border: 0;
    background: none;
    color: var(--ds-ink-4);
    font-size: 15px;
    cursor: pointer;
    transition: color var(--ds-fast) var(--ds-ease);
}

.cs-drawer-remove:hover {
    color: #b42318;
}

.cs-drawer-footer {
    padding: var(--ds-4) var(--ds-5);
    border-top: 1px solid var(--ds-border);
    background: var(--ds-surface);
}

.cs-drawer-subtotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    color: var(--ds-ink);
}

.cs-drawer-note {
    margin: var(--ds-1) 0 var(--ds-3);
    font-size: 12.5px;
    color: var(--ds-ink-4);
}

.cs-drawer-checkout {
    display: block;
    padding: 10px var(--ds-4);
    border-radius: var(--ds-r-md);
    background: var(--ds-brand);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background var(--ds-fast) var(--ds-ease);
}

.cs-drawer-checkout:hover {
    background: var(--ds-brand-600);
    color: #fff;
}

.cs-drawer-viewcart {
    display: block;
    margin-top: var(--ds-3);
    font-size: 13.5px;
    color: var(--ds-ink-3);
    text-align: center;
    text-decoration: none;
}

.cs-drawer-viewcart:hover {
    color: var(--ds-brand);
}

.cs-drawer-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ds-3);
    padding: var(--ds-7) var(--ds-5);
    text-align: center;
    color: var(--ds-ink-3);
}

.cs-drawer-empty i {
    font-size: 40px;
    color: var(--ds-border-strong);
}

.cs-drawer-empty p {
    margin: 0;
    font-size: 15px;
}

.cs-drawer-browse {
    margin-top: var(--ds-2);
    padding-left: var(--ds-6);
    padding-right: var(--ds-6);
}

@media (max-width: 480px) {
    .cs-drawer-head,
    .cs-drawer-items,
    .cs-drawer-footer {
        padding-left: var(--ds-4);
        padding-right: var(--ds-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-drawer,
    .cs-drawer-overlay {
        transition: none;
    }
}

/* Value-change pop: the quantity, line total and subtotal briefly scale and
   flash the brand colour when the shopper changes a quantity in the drawer.
   The JS adds .cs-bump only to the values that actually changed. */
@keyframes cs-bump {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.22);
        color: var(--ds-brand);
    }
    100% {
        transform: scale(1);
    }
}

.cs-bump {
    animation: cs-bump 360ms var(--ds-ease);
    transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
    .cs-bump {
        animation: none;
    }
}

/* =====================================================================
   BLOG — nutrafol editorial design, rethemed to the DiscountSmokes indigo
   ---------------------------------------------------------------------
   Reproduces the reference blog's composition — Marcellus serif headings,
   borderless rounded-image cards with a diagonal shine on hover, a filled
   brand-colour blockquote, solid brand tag pills and avatar comment
   threads — mapped onto the --ds-* tokens. Marcellus is loaded in the
   layout head and scoped to the blog only, so the rest of the site is
   untouched. custom.css loads last, so these win.
===================================================================== */

.page-blog,
.page-single-post {
    --blog-serif: "Marcellus", Georgia, "Times New Roman", serif;
    background: var(--ds-surface);
}

/* Shared image frame: rounded, clipped, with nutrafol's diagonal shine sweep. */
.post-featured-image a,
.post-image .image-anime {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 24px;
}
.post-featured-image a::after,
.post-image .image-anime::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
    pointer-events: none;
}
.post-featured-image a:hover::after,
.post-image .image-anime:hover::after {
    height: 250%;
    background: transparent;
    transition: all 600ms linear;
}
/* nutrafol gates .reveal with visibility:hidden (JS-revealed). Keep it visible. */
.page-single-post .reveal {
    visibility: visible;
}

/* ==========================  BLOG LIST  ============================ */
.page-blog {
    padding: clamp(56px, 8vw, 100px) 0;
}
.blog-list-header {
    max-width: 760px;
    margin: 0 auto clamp(32px, 5vw, 44px);
    text-align: center;
}
.blog-list-header h1 {
    font-family: "DM Sans", system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 4vw, 42px);
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--ds-ink);
    margin: 0 0 10px;
    text-wrap: balance;
}
.blog-list-header p {
    margin: 0;
    color: var(--ds-ink-3);
    font-size: 16px;
    line-height: 1.65;
}

/* Borderless card: rounded image, serif title, excerpt, read-more. */
.page-blog .row > [class*="col-"] {
    margin-bottom: 30px;
}
.post-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.post-featured-image {
    margin-bottom: 20px;
    aspect-ratio: 1 / 0.7;
}
.post-featured-image a {
    height: 100%;
}
.post-featured-image figure {
    margin: 0;
    height: 100%;
}
.post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--ds-surface-2);
    transition: transform 500ms var(--ds-ease);
}
.post-item:hover .post-featured-image img {
    transform: scale(1.06);
}
.post-featured-image__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 30% 22%, var(--ds-brand-50), transparent 62%),
        var(--ds-surface-2);
    color: var(--ds-brand-400);
    font-size: 2.6rem;
}
.post-item-content {
    margin-bottom: 16px;
}
.post-item-content h2 {
    margin: 0 0 10px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.01em;
    line-height: 1.35;
}
.post-item-content h2 a {
    color: var(--ds-ink);
    transition: color var(--ds-fast) var(--ds-ease);
}
.post-item-content h2 a:hover {
    color: var(--ds-brand);
}
.post-item-excerpt {
    margin: 0;
    color: var(--ds-ink-3);
    font-size: 14.5px;
    line-height: 1.65;
}
.post-item-btn {
    margin-top: auto;
}
.readmore-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ds-brand);
    font-weight: 600;
    font-size: 14.5px;
    text-transform: capitalize;
    transition: color var(--ds-fast) var(--ds-ease);
}
.readmore-btn::after {
    content: "\2192";
    font-size: 1.1em;
    transition: transform var(--ds-fast) var(--ds-ease);
}
.readmore-btn:hover {
    color: var(--ds-brand-600);
}
.readmore-btn:hover::after {
    transform: translateX(4px);
}
.blog-empty {
    padding: 48px 0;
    text-align: center;
    color: var(--ds-ink-3);
    font-size: 16px;
}

/* Pagination — nutrafol's filled squares, rethemed. */
.page-pagination {
    margin-top: 40px;
    text-align: center;
}
.page-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.page-pagination .pagination li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
    border-radius: 10px;
    background: var(--ds-surface-2);
    color: var(--ds-ink-2);
    font-weight: 700;
    line-height: 1;
    transition: all var(--ds-fast) var(--ds-ease);
}
.page-pagination .pagination li a:hover,
.page-pagination .pagination li.active a {
    background: var(--ds-brand);
    color: #fff;
}
.page-pagination .pagination li.disabled a {
    opacity: 0.45;
    pointer-events: none;
}

/* =========================  BLOG SINGLE  ========================== */
.page-single-post {
    padding: clamp(48px, 7vw, 100px) 0 clamp(40px, 6vw, 60px);
}
.post-single {
    max-width: 820px;
    margin: 0 auto;
}
.post-single-header {
    margin: 0 0 22px;
}
.post-single-title {
    margin: 0 0 14px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 4vw, 44px);
    letter-spacing: -0.02em;
    line-height: 1.16;
    color: var(--ds-ink);
    text-wrap: balance;
}
.post-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    color: var(--ds-ink-4);
    font-size: 15px;
}
.post-meta-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.post-meta-row i {
    color: var(--ds-brand);
}
.post-image {
    margin: 0 0 34px;
}
.post-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
@media (max-width: 576px) {
    .post-image img {
        aspect-ratio: 4 / 3;
    }
}

/* Article body — nutrafol's large serif headings + reading rhythm. */
.post-entry {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--ds-border);
    color: var(--ds-ink-2);
    font-size: 17px;
    line-height: 1.75;
    text-wrap: pretty;
}
.post-entry > *:first-child {
    margin-top: 0;
}
.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6 {
    margin: 1.4em 0 0.5em;
    font-family: "DM Sans", system-ui, sans-serif;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ds-ink);
    text-wrap: balance;
}
.post-entry h1 { font-size: clamp(26px, 2.4vw + 14px, 34px); }
.post-entry h2 { font-size: clamp(22px, 2vw + 12px, 28px); }
.post-entry h3 { font-size: clamp(19px, 1.4vw + 12px, 23px); }
.post-entry h4 { font-size: 18px; }
.post-entry h5 { font-size: 16px; }
.post-entry h6 { font-size: 15px; }
.post-entry p {
    margin: 0 0 1.25em;
}
.post-entry p:last-child {
    margin-bottom: 0;
}
.post-entry a {
    color: var(--ds-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.post-entry a:hover {
    color: var(--ds-brand-600);
}
.post-entry strong {
    color: var(--ds-ink);
    font-weight: 700;
}
.post-entry ul,
.post-entry ol {
    margin: 0 0 1.25em;
    padding-left: 1.4em;
}
.post-entry li {
    margin-bottom: 0.6em;
    line-height: 1.7;
}
.post-entry li::marker {
    color: var(--ds-brand);
}
.post-entry img {
    max-width: 100%;
    height: auto;
    margin: 1.5em 0;
    border-radius: 16px;
}
.post-entry hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--ds-border);
}

/* Filled blockquote box (nutrafol's dark panel → indigo, SVG icon → glyph). */
.post-entry blockquote {
    position: relative;
    margin: 1.75em 0;
    padding: 30px 32px 30px 84px;
    border-radius: 20px;
    background: var(--ds-brand);
    color: #fff;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.55;
}
.post-entry blockquote::before {
    content: "\201C";
    position: absolute;
    top: 16px;
    left: 28px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.4rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
}
.post-entry blockquote p {
    margin: 0 0 0.5em;
    color: #fff;
}
.post-entry blockquote p:last-child {
    margin-bottom: 0;
}

/* Tags — solid brand pills. */
.post-tag-links {
    margin-bottom: 30px;
}
.post-tags .tag-links {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    color: var(--ds-ink-3);
    font-weight: 600;
    font-size: 14px;
}
.post-tags .tag-links a {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 10px;
    background: var(--ds-brand);
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    text-transform: capitalize;
    transition: background var(--ds-fast) var(--ds-ease);
}
.post-tags .tag-links a:hover {
    background: var(--ds-brand-600);
}

/* ===========================  COMMENTS  =========================== */
.blog-comments {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid var(--ds-border);
}
.blog-comments-title {
    margin: 0 0 24px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--ds-ink);
}
.blog-comment-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 0.95rem;
}
.blog-comment-alert.success {
    background: var(--ds-green-50);
    border-color: #bbf7d0;
    color: #14532d;
}
.blog-comment-alert.error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b3261e;
}
.blog-comment-list,
.blog-comment-replies {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
}
.blog-comment-list > li {
    margin-bottom: 22px;
}
/* Replies sit indented under their parent — the offset + the tinted author
   card carry the nesting, so no dangling thread-line is needed. */
.blog-comment-replies {
    margin: 14px 0 0;
    padding-left: 53px;
}
.blog-comment-replies > li {
    margin-top: 14px;
}
.blog-comment {
    display: flex;
    gap: 13px;
    align-items: flex-start;
}
.blog-comment-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ds-brand-50);
    color: var(--ds-brand-600);
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
}
.blog-comment.is-author .blog-comment-avatar {
    background: var(--ds-brand);
    color: #fff;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.28);
}
.blog-comment-main {
    flex: 1;
    min-width: 0;
    padding: 13px 18px;
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    background: var(--ds-surface);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.blog-comment-main:hover {
    border-color: #d8dbe3;
    box-shadow: 0 6px 20px -14px rgba(15, 17, 21, 0.2);
}
.blog-comment.is-author .blog-comment-main {
    border-color: #c7d2fe;
    background: var(--ds-brand-50);
}
.blog-comment.is-author .blog-comment-main:hover {
    border-color: #a5b4fc;
    box-shadow: none;
}
.blog-comment-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}
.blog-comment-name {
    color: var(--ds-ink);
    font-weight: 700;
}
.blog-comment-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ds-brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.blog-comment-date {
    margin-left: auto;
    color: var(--ds-ink-4);
    font-size: 13px;
}
.blog-comment-text {
    color: var(--ds-ink-2);
    font-size: 16px;
    line-height: 1.65;
    overflow-wrap: break-word;
}
.blog-comment-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ds-brand);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.blog-comment-reply-btn:hover {
    text-decoration: underline;
}
.blog-comment-form-wrap {
    position: relative;
    margin-top: 10px;
    padding: 26px;
    border: 1px solid var(--ds-border);
    border-radius: 20px;
    background: var(--ds-surface);
}
.blog-comment-form-title {
    margin: 0 0 16px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.01em;
    color: var(--ds-ink);
}
.blog-comment-replying {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--ds-brand-50);
    color: var(--ds-ink-3);
    font-size: 14px;
}
.blog-comment-replying strong {
    color: var(--ds-ink);
}
.blog-comment-replying button {
    /* Cancel the theme's button { width:100% } so it stays inline. */
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ds-brand);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.blog-comment-replying button:hover {
    color: var(--ds-brand-600);
}
.blog-comment-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.blog-comment-field {
    margin-bottom: 16px;
}
.blog-comment-field input,
.blog-comment-field textarea {
    width: 100%;
    padding: 0 14px;
    /* The theme forces line-height:60px on text inputs — pin height + a normal
       line-height so the fields aren't ballooned. */
    height: 48px;
    line-height: 1.4;
    border: 1px solid var(--ds-border-strong);
    border-radius: 12px;
    background: var(--ds-surface);
    color: var(--ds-ink);
    font-family: inherit;
    font-size: 15px;
    transition:
        border-color var(--ds-fast) var(--ds-ease),
        box-shadow var(--ds-fast) var(--ds-ease);
}
.blog-comment-field textarea {
    height: auto;
    min-height: 130px;
    padding: 12px 14px;
    line-height: 1.6;
    resize: vertical;
}
.blog-comment-field input::placeholder,
.blog-comment-field textarea::placeholder {
    color: var(--ds-ink-4);
}
.blog-comment-field input:focus,
.blog-comment-field textarea:focus {
    outline: none;
    border-color: var(--ds-brand);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
}
.blog-comment-error {
    display: block;
    margin-top: 6px;
    color: #b3261e;
    font-size: 13px;
}
.blog-comment-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.blog-comment-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 48px;
    margin-top: 4px;
    padding: 0 30px;
    border: 0;
    border-radius: 12px;
    background: var(--ds-brand);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.22);
    cursor: pointer;
    transition:
        background var(--ds-fast) var(--ds-ease),
        transform var(--ds-fast) var(--ds-ease);
}
.blog-comment-submit:hover {
    background: var(--ds-brand-600);
    color: #fff;
}
.blog-comment-submit:active {
    transform: translateY(1px);
}

/* Responsive */
@media (max-width: 575.98px) {
    .blog-comment-form-grid {
        grid-template-columns: 1fr;
    }
    .blog-comment-form-wrap {
        padding: 20px;
    }
    .blog-comment-replies {
        padding-left: 14px;
    }
    .post-entry blockquote {
        padding: 26px 22px 26px 62px;
        font-size: 1.1rem;
    }
    .post-entry blockquote::before {
        top: 16px;
        left: 20px;
        font-size: 2.6rem;
    }
}

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    .post-featured-image img,
    .post-item-content h2 a,
    .readmore-btn::after,
    .page-pagination .pagination li a,
    .post-tags .tag-links a,
    .blog-comment-submit,
    .post-featured-image a::after,
    .post-image .image-anime::after {
        transition: none;
    }
    .post-item:hover .post-featured-image img {
        transform: none;
    }
    .readmore-btn:hover::after {
        transform: none;
    }
    .post-featured-image a:hover::after,
    .post-image .image-anime:hover::after {
        height: 0;
    }
}