/* ═════════════════════════════════════════════════════════════════════════
   CLEARVYZR — MOBILE STYLESHEET
   ═════════════════════════════════════════════════════════════════════════
   Loaded after app.css, product-clearvyzr.css, and shop.css so its rules
   win on equal-specificity selectors. Targets the mobile experience as a
   first-class citizen: most visitors are on phones.

   Breakpoints (mobile-first ordering):
     ≤ 1024  tablet & below
     ≤  768  mobile (large phones)
     ≤  560  mobile (typical phones)
     ≤  380  small phones (SE, mini, fold)

   All sizes are tuned for portrait viewing. Touch targets stay ≥ 44px.
   Inputs stay ≥ 16px font-size to prevent iOS zoom.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── GLOBAL MOBILE FOUNDATIONS ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* Touch-friendly tap behavior across the site */
    html { -webkit-text-size-adjust: 100%; }

    body.clearvyzr-theme {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
    }

    /* Buttons & links get reasonable tap states */
    .cv-button,
    .cv-pp-btn-primary,
    .cv-prod-buybox__btn,
    .cv-shop-hero__cta,
    .cv-final-cta__btn {
        -webkit-tap-highlight-color: transparent;
    }

    /* Inputs at ≥16px so iOS doesn't zoom in on focus */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="password"],
    input[type="url"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   HEADER — slide-in drawer on mobile
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    :root { --cv-header-h: 60px; }

    .cv-header {
        background: #fff;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    }

    .cv-header__inner {
        width: 100%;
        padding: 0 18px;
        min-height: var(--cv-header-h);
        grid-template-columns: 1fr auto auto !important;
        gap: 12px;
        align-items: center;
    }

    .cv-logo img {
        height: 26px;
        width: auto;
    }

    /* Hide desktop nav on mobile; drawer takes over */
    .cv-nav { display: none; }

    /* Header action area: keep ONLY the BUY NOW button (or cart icon),
       drop the locale pill into the drawer where it has room to breathe. */
    .cv-header__actions {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        grid-column: 2;
    }

    .cv-header__actions .cv-locale-pill {
        display: none;
    }

    .cv-header__actions {
        gap: 6px;
    }

    .cv-header-buy {
        height: 36px !important;
        padding: 0 14px !important;
        font-size: 11px !important;
        letter-spacing: 0.1em !important;
    }

    .cv-header-icon {
        width: 38px !important;
        height: 38px !important;
    }

    /* Cart icon was removed from the header — CheckoutWC's side-cart widget
       handles cart UI already, so adding our own would be redundant. */

    /* Hamburger button — clean 3-line, animates to X */
    .cv-menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
        background: transparent;
        border: 0;
        cursor: pointer;
        grid-column: 3;
        position: relative;
        z-index: 100002;
    }

    .cv-menu-toggle span {
        position: absolute;
        left: 12px;
        right: 12px;
        height: 2px;
        background: currentColor;
        color: #0b0b0b;
        transition: transform .25s ease, opacity .15s ease, top .25s ease;
        margin: 0;
        width: auto;
    }

    .cv-menu-toggle span:nth-child(1) { top: 16px; }
    .cv-menu-toggle span:nth-child(2) { top: 21px; }
    .cv-menu-toggle span:nth-child(3) { top: 26px; }

    .cv-menu-toggle[aria-expanded="true"] span:nth-child(1) {
        top: 21px;
        transform: rotate(45deg);
    }
    .cv-menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }
    .cv-menu-toggle[aria-expanded="true"] span:nth-child(3) {
        top: 21px;
        transform: rotate(-45deg);
    }

    /* Mobile drawer — full-screen slide-in from the right */
    .cv-mobile-panel {
        position: fixed !important;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(86vw, 360px);
        max-width: 360px;
        padding: calc(var(--cv-header-h) + 24px) 28px 32px;
        background: #fff;
        border-top: 0 !important;
        box-shadow: -16px 0 40px rgba(0, 0, 0, 0.16);
        transform: translateX(100%);
        transition: transform .32s cubic-bezier(0.2, 0.8, 0.2, 1);
        z-index: 100001;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        display: flex !important;
        flex-direction: column;
        gap: 0;
    }

    /* Drawer slides in when JS toggles the body class */
    body.cv-menu-open .cv-mobile-panel {
        transform: translateX(0);
    }

    /* Drawer backdrop — dark veil behind the panel.
       z-index 99998 keeps it BELOW the header strip (99999) so the drawer
       (which lives inside .cv-header) renders on top of the backdrop. If
       the backdrop sits above 99999 it traps the drawer inside the header's
       own stacking context and ends up painting over the menu links. */
    body.cv-menu-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(11, 11, 11, 0.5);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 99998;
        animation: cv-menu-veil-in .25s ease forwards;
        pointer-events: none;
    }

    @keyframes cv-menu-veil-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    body.cv-menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    /* Drawer eyebrow — "MENU" label at top */
    .cv-mobile-panel__eyebrow {
        font-family: var(--cv-font-body);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: rgba(0, 0, 0, 0.4);
        margin-bottom: 18px;
    }

    /* Primary nav block */
    .cv-mobile-panel__nav {
        display: flex;
        flex-direction: column;
    }

    /* Each primary link: monospace number + big label, no border noise */
    .cv-mobile-link {
        display: grid !important;
        grid-template-columns: 32px 1fr;
        align-items: center;
        gap: 14px;
        padding: 16px 0 !important;
        font-family: var(--cv-font-body);
        text-decoration: none !important;
        color: #0b0b0b !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        transition: transform .15s ease, color .15s ease;
        /* Staggered reveal once the drawer slides in. */
        opacity: 0;
        transform: translateX(20px);
    }

    .cv-mobile-link__num {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.18em;
        color: rgba(0, 0, 0, 0.35);
        font-family: "SFMono-Regular", Consolas, Menlo, monospace;
    }

    .cv-mobile-link__label {
        font-size: 24px;
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1;
    }

    .cv-mobile-link[aria-current="page"] .cv-mobile-link__label::after {
        content: "•";
        margin-left: 8px;
        color: #0b0b0b;
    }

    .cv-mobile-link:active {
        transform: translateX(4px);
    }

    /* Staggered slide-in when drawer opens */
    body.cv-menu-open .cv-mobile-link {
        animation: cv-mobile-link-in .35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    body.cv-menu-open .cv-mobile-link:nth-child(1) { animation-delay: .08s; }
    body.cv-menu-open .cv-mobile-link:nth-child(2) { animation-delay: .14s; }
    body.cv-menu-open .cv-mobile-link:nth-child(3) { animation-delay: .20s; }
    body.cv-menu-open .cv-mobile-link:nth-child(4) { animation-delay: .26s; }

    @keyframes cv-mobile-link-in {
        to { opacity: 1; transform: translateX(0); }
    }

    .cv-mobile-panel__divider {
        height: 1px;
        background: transparent;
        margin: 24px 0 4px;
    }

    /* Utility row: Account only (Cart removed — CheckoutWC's side-cart
       widget handles cart UI already). Full-width pill. */
    .cv-mobile-panel__utility {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 16px;
    }

    .cv-mobile-util {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        height: 48px;
        padding: 0 14px !important;
        background: #f3f3f0;
        color: #0b0b0b !important;
        font-family: var(--cv-font-body);
        font-size: 14px;
        font-weight: 500;
        text-decoration: none !important;
        border-radius: 6px;
        transition: background-color .15s ease;
    }

    .cv-mobile-util:active { background: #e8e8e3; }

    .cv-mobile-util svg { width: 18px; height: 18px; flex-shrink: 0; }

    .cv-mobile-util__count {
        position: absolute;
        top: 8px;
        right: 12px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        background: #d69a29;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        border-radius: 999px;
    }

    /* Big primary CTA inside drawer (replaces the old auto-stick BUY NOW link) */
    .cv-mobile-buy {
        display: inline-flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: 60px;
        margin: 8px 0 18px !important;
        padding: 0 22px !important;
        background: #0b0b0b;
        color: #fff !important;
        font-family: var(--cv-font-body);
        font-size: 15px !important;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-decoration: none !important;
        border-radius: 0;
        transition: background-color .15s ease;
    }

    .cv-mobile-buy:active { background: #2a2a2a; }
    .cv-mobile-buy svg { width: 18px; height: 18px; flex-shrink: 0; }

    /* Locale switch trigger inside drawer — visual region + language card */
    .cv-mobile-locale {
        display: block !important;
        width: 100%;
        margin-top: auto;
        padding: 4px 0 0 !important;
        background: transparent;
        border: 0;
        font-family: var(--cv-font-body);
        cursor: pointer;
        text-align: left;
    }

    .cv-mobile-locale__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .cv-mobile-locale__head-label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(0, 0, 0, 0.5);
    }

    .cv-mobile-locale__change {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 600;
        color: #0b0b0b;
    }

    .cv-mobile-locale__change svg {
        width: 13px;
        height: 13px;
    }

    .cv-mobile-locale__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .cv-mobile-locale__cell {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        padding: 11px 12px;
        border: 1px solid rgba(0, 0, 0, 0.10);
        border-radius: 12px;
        background: #fafafa;
    }

    .cv-mobile-locale__flag {
        font-size: 22px;
        line-height: 1;
        flex: none;
    }

    .cv-mobile-locale__icon {
        flex: none;
        color: #0b0b0b;
    }

    .cv-mobile-locale__icon svg {
        width: 20px;
        height: 20px;
        display: block;
    }

    .cv-mobile-locale__cell-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .cv-mobile-locale__k {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(0, 0, 0, 0.45);
    }

    .cv-mobile-locale__v {
        font-size: 14px;
        font-weight: 600;
        color: #0b0b0b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Header dark mode on mobile — flat white drawer still, but header inverts */
    body.cv-header-dark.clearvyzr-theme .cv-menu-toggle span {
        color: #fff;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   HOMEPAGE — hero, statement, product feature, love grid, testimonials, CTA
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ─── Hero / scroll sequence ──────────────────────────────────────── */
    .cv-scroll-scene {
        /* Lock scroll-sequence height so it doesn't overflow on tall phones */
        min-height: 70vh;
    }

    .cv-main-fallback {
        min-height: 70vh;
        padding: 24px;
    }

    .cv-main-fallback h1 {
        font-size: clamp(32px, 8vw, 44px) !important;
        line-height: 1.05;
    }

    /* Scroll hint — bigger and pinned to the TOP of the viewport on mobile.
       Sits just under the fixed header so it's the first thing in the hero.
       Tappable on mobile (override the desktop pointer-events: none) so users
       can tap it to scroll down. */
    .cv-scroll-hint {
        top: calc(var(--cv-header-h, 60px) + 16px) !important;
        bottom: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        gap: 14px !important;
        pointer-events: auto !important;
        cursor: pointer;
        padding: 8px 14px;
    }

    .cv-scroll-hint:active {
        opacity: 0.7 !important;
    }

    .cv-scroll-hint__label {
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 0.36em !important;
    }

    .cv-scroll-hint__rail {
        width: 34px !important;
        height: 58px !important;
        border-width: 2.5px !important;
    }

    .cv-scroll-hint__dot {
        top: 9px !important;
        width: 5px !important;
        height: 12px !important;
        margin-left: -2.5px !important;
    }

    /* ─── Big statement section ───────────────────────────────────────── */
    .cv-statement {
        padding: 70px 22px !important;
        text-align: center;
    }

    .cv-statement__title {
        font-size: clamp(28px, 7.5vw, 38px) !important;
        line-height: 1.1 !important;
        letter-spacing: -0.02em;
        margin-bottom: 18px !important;
    }

    .cv-statement__copy {
        font-size: 15px !important;
        line-height: 1.65 !important;
        margin-bottom: 28px !important;
    }

    .cv-statement__btn {
        height: 52px !important;
        padding: 0 28px !important;
        font-size: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ─── Product Feature ──────────────────────────────────────────────── */
    .cv-pf {
        padding: 60px 0 !important;
    }

    .cv-pf__grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
        padding: 0 20px;
    }

    .cv-pf__img {
        max-width: 480px;
        margin: 0 auto;
    }

    .cv-pf__tag {
        font-size: 11px !important;
        letter-spacing: 0.18em !important;
    }

    .cv-pf__title {
        font-size: clamp(28px, 7vw, 38px) !important;
        line-height: 1.08 !important;
    }

    .cv-pf__desc {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    .cv-pf__points li {
        font-size: 14px !important;
    }

    .cv-pf__price-row {
        flex-wrap: wrap;
        align-items: baseline;
    }

    .cv-pf__price {
        font-size: 30px !important;
    }

    .cv-pf__cta-row {
        flex-direction: column;
        gap: 10px !important;
    }

    .cv-pf__btn {
        width: 100% !important;
        height: 56px !important;
        font-size: 14px !important;
        justify-content: center !important;
    }

    /* ─── Why Riders Love ClearVyzr ───────────────────────────────────── */
    .cv-love {
        padding: 60px 20px !important;
    }

    .cv-love__inner > h2 {
        font-size: clamp(26px, 6.5vw, 34px) !important;
        line-height: 1.1 !important;
        text-align: center;
        margin-bottom: 36px !important;
    }

    .cv-love__grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .cv-love__column {
        gap: 24px !important;
    }

    .cv-love__item {
        gap: 16px !important;
    }

    .cv-love__item h3 {
        font-size: 16px !important;
    }

    .cv-love__item p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .cv-love__icon {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0;
    }

    /* ─── Testimonials ─────────────────────────────────────────────────── */
    .cv-testimonials {
        padding: 60px 20px !important;
    }

    .cv-testimonials__head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
        margin-bottom: 32px !important;
    }

    .cv-testimonials__title {
        font-size: clamp(26px, 6.5vw, 34px) !important;
    }

    .cv-testimonials__avg {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .cv-testimonials__avg-num {
        font-size: 24px !important;
    }

    .cv-testimonials__grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .cv-test-card {
        padding: 24px !important;
    }

    .cv-test-card__quote {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* ─── Final CTA ────────────────────────────────────────────────────── */
    .cv-final-cta {
        padding: 70px 22px !important;
    }

    .cv-final-cta__title {
        font-size: clamp(36px, 9vw, 52px) !important;
        line-height: 1.05 !important;
    }

    .cv-final-cta__copy {
        font-size: 15px !important;
        margin-bottom: 28px !important;
    }

    .cv-final-cta__btn {
        width: 100%;
        max-width: 360px;
        height: 56px !important;
        font-size: 14px !important;
        justify-content: center !important;
    }

    .cv-final-cta__meta {
        flex-wrap: wrap;
        font-size: 12px !important;
        gap: 8px !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   PRODUCT PAGE (ClearVyzr main product) — stacked layout + sticky cart bar
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .cv-pp-split {
        grid-template-columns: 1fr !important;
    }

    .cv-pp-gallery-wrap {
        border-right: 0 !important;
        border-bottom: 1px solid var(--pp-border, #e4e2dc);
    }

    /* Mobile gallery: drop the sticky behavior entirely, restructure as a
       swipeable strip with thumbnails BELOW the main image. */
    .cv-pp-gallery-sticky {
        position: static !important;
        height: auto !important;
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column-reverse;
    }

    .cv-pp-thumbs {
        flex-direction: row !important;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: 0 !important;
        border-top: 1px solid var(--pp-border);
        padding: 10px 14px !important;
        gap: 8px !important;
        scroll-snap-type: x mandatory;
    }

    .cv-pp-thumb {
        scroll-snap-align: start;
        width: 64px !important;
        height: 64px !important;
        flex-shrink: 0;
    }

    .cv-pp-main {
        aspect-ratio: 1 / 1;
        width: 100%;
    }

    .cv-pp-buybox {
        padding: 28px 20px 100px !important; /* room for sticky bottom bar */
    }
}

@media (max-width: 768px) {
    .cv-pp-name {
        font-size: clamp(26px, 6vw, 32px) !important;
        margin-bottom: 12px !important;
    }

    .cv-pp-sub {
        font-size: 14px !important;
        max-width: none !important;
    }

    .cv-pp-price { font-size: 28px !important; }

    .cv-pp-qty-chips { gap: 6px !important; }
    .cv-pp-chip {
        width: 48px !important;
        height: 48px !important;
        font-size: 15px !important;
    }

    /* Scroll-feature panels on mobile — each panel becomes a full-bleed
       editorial card with its OWN product image baked in above the text.
       Replaces the desktop sticky-image-column approach (which fights with
       mobile viewport sizes). The desktop sticky column is hidden below. */
    .cv-pp-scroll {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
        gap: 0 !important;
        display: block !important;
    }

    /* Desktop sticky-image column has nothing to do on mobile */
    .cv-pp-scroll__img {
        display: none !important;
    }

    .cv-pp-scroll__text {
        padding: 0 !important;
        gap: 0 !important;
    }

    .cv-pp-panel {
        position: relative;
        display: block !important;
        min-height: auto !important;
        height: auto !important;
        padding: 0 !important;
        opacity: 1 !important; /* drop the desktop 0.3 fade dim */
        border-bottom: 1px solid var(--pp-border, #e4e2dc);
        overflow: hidden;
    }

    .cv-pp-panel:last-child { border-bottom: 0; }

    /* Per-panel product image — full-bleed across the viewport,
       3:2 aspect, soft fade-up reveal once the panel enters view. */
    .cv-pp-panel__img {
        display: block !important;
        position: relative;
        width: 100%;
        aspect-ratio: 4 / 3;
        background: linear-gradient(135deg, #f3f3f0 0%, #e9e9e3 100%);
        overflow: hidden;
        opacity: 0;
        transform: translateY(28px);
        transition: opacity .7s cubic-bezier(0.16, 1, 0.3, 1),
                    transform .7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* `.is-seen` is added once and never removed (see product-clearvyzr.js),
       so the reveal animation isn't undone when the user scrolls past. */
    .cv-pp-panel.is-seen .cv-pp-panel__img,
    .cv-pp-panel.is-active .cv-pp-panel__img {
        opacity: 1;
        transform: translateY(0);
    }

    .cv-pp-panel__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Slow zoom-in once the panel enters view — gives the static
           photo a sense of life as the user reaches it. */
        transform: scale(1.06);
        transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .cv-pp-panel.is-seen .cv-pp-panel__img img,
    .cv-pp-panel.is-active .cv-pp-panel__img img {
        transform: scale(1);
    }

    /* Text block sits inside the panel, below the image */
    .cv-pp-panel__num {
        display: block !important;
        font-size: 11px !important;
        font-weight: 600;
        letter-spacing: 0.22em !important;
        text-transform: uppercase;
        color: var(--pp-text-muted, #8c8a82) !important;
        margin: 36px 22px 14px !important;
    }

    .cv-pp-panel__title {
        font-size: clamp(30px, 8vw, 40px) !important;
        font-weight: 700 !important;
        line-height: 1.05 !important;
        letter-spacing: -0.025em !important;
        margin: 0 22px 14px !important;
        color: var(--pp-text, #111110) !important;
    }

    .cv-pp-panel__desc {
        font-size: 15px !important;
        line-height: 1.65 !important;
        margin: 0 22px 50px !important;
        max-width: none !important;
    }

    .cv-pp-panel__desc strong {
        color: var(--pp-text, #111110);
        font-weight: 600;
    }

    /* What's Included grid */
    .cv-pp-included {
        padding: 60px 20px !important;
    }

    .cv-pp-included__grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* How it works */
    .cv-pp-how {
        padding: 60px 20px !important;
    }

    .cv-pp-how__steps {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    /* Specs */
    .cv-pp-specs {
        padding: 60px 20px !important;
    }

    .cv-pp-specs__grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* Reviews */
    .cv-pp-reviews {
        padding: 60px 20px !important;
    }

    .cv-pp-reviews__top {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 18px;
    }

    .cv-pp-reviews__grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* FAQ */
    .cv-pp-faq {
        padding: 60px 20px !important;
    }

    /* End-of-page CTA */
    .cv-pp-cta {
        flex-direction: column !important;
        gap: 24px !important;
        padding: 60px 20px !important;
        text-align: center;
    }

    .cv-pp-cta__btn {
        width: 100%;
        justify-content: center !important;
    }

    /* Sticky bottom add-to-cart bar — only shown after JS adds .is-visible
       once the user scrolls past the inline buy box. */
    .cv-pp-sticky {
        display: block !important;
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        background: #fff;
        border-top: 1px solid var(--pp-border, #e4e2dc);
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
        transform: translateY(110%);
        opacity: 0;
        transition: transform .25s ease, opacity .2s ease;
        pointer-events: none;
    }

    .cv-pp-sticky.is-visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .cv-pp-sticky__inner {
        display: flex !important;
        align-items: center !important;
        gap: 12px;
    }

    .cv-pp-sticky__info {
        flex: 1;
        min-width: 0;
    }

    .cv-pp-sticky__name {
        font-size: 13px !important;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cv-pp-sticky__price {
        font-size: 14px !important;
        font-weight: 700;
        color: #0b0b0b;
    }

    .cv-pp-sticky__btn {
        height: 48px !important;
        padding: 0 22px !important;
        background: #0b0b0b;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        text-decoration: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   DEFAULT PRODUCT PAGE (refill, covers, gift card) — stacked + touch-friendly
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cv-prod-crumbs {
        padding: 12px 18px !important;
        font-size: 12px !important;
    }

    .cv-prod-hero {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .cv-prod-hero__gallery {
        padding: 20px !important;
    }

    .cv-prod-hero__gallery-thumbs {
        flex-direction: row !important;
        overflow-x: auto;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .cv-prod-hero__gallery-main {
        aspect-ratio: 1 / 1;
    }

    /* Gift card hero — center the card, no transform on mobile */
    .cv-prod-hero--gift .cv-prod-hero__gift-canvas {
        padding: 32px 20px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .cv-prod-gift-card {
        width: min(86vw, 360px);
        max-width: 360px;
        aspect-ratio: 1.586 / 1;
        transform: rotate(-3deg);
        margin: 0 auto;
    }

    .cv-prod-buybox {
        padding: 28px 20px !important;
    }

    .cv-prod-buybox__name {
        font-size: clamp(24px, 6vw, 32px) !important;
        line-height: 1.1 !important;
        margin-bottom: 12px !important;
    }

    .cv-prod-buybox__lede {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .cv-prod-buybox__price {
        font-size: 28px !important;
    }

    /* Amount picker grid responds to width */
    .cv-prod-amount-grid {
        grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
    }

    .cv-prod-amount-chip {
        padding: 14px !important;
        font-size: 16px !important;
    }

    .cv-prod-qty-chips { gap: 6px !important; }

    .cv-prod-qty-chip {
        width: 48px !important;
        height: 48px !important;
        font-size: 15px !important;
    }

    .cv-prod-buybox__btn {
        height: 54px !important;
        font-size: 14px !important;
    }

    .cv-prod-buybox__trust {
        flex-wrap: wrap;
        gap: 10px 18px !important;
    }

    .cv-prod-buybox__specs {
        grid-template-columns: 1fr !important;
    }

    /* Feature strip */
    .cv-prod-features {
        padding: 50px 20px !important;
    }

    .cv-prod-features__inner {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .cv-prod-feature__title {
        font-size: 22px !important;
    }

    /* How it works (gift card) */
    .cv-prod-how {
        padding: 50px 20px !important;
    }

    .cv-prod-how__head h2 {
        font-size: clamp(26px, 6vw, 34px) !important;
    }

    .cv-prod-how__grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* CTA strip back to main product */
    .cv-prod-cta {
        padding: 50px 20px !important;
    }

    .cv-prod-cta__inner {
        flex-direction: column;
        gap: 22px;
        text-align: center;
    }

    .cv-prod-cta__btn {
        width: 100%;
        justify-content: center !important;
    }

    /* Gift card form on the gift-card product page — touch-friendly inputs */
    .cv-prod--gift-card .cv-prod-buybox__gift-form input,
    .cv-prod--gift-card .cv-prod-buybox__gift-form textarea,
    .cv-prod--gift-card .cv-prod-buybox__gift-form select {
        font-size: 16px !important; /* prevents iOS zoom */
        padding: 14px !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   SHOP PAGE — split tiles stack, product grid 2-col, hero
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cv-shop-hero {
        min-height: 60vh !important;
    }

    .cv-shop-hero__content {
        padding: 0 22px !important;
    }

    .cv-shop-hero__eyebrow {
        font-size: 10px !important;
        letter-spacing: 0.2em !important;
    }

    .cv-shop-hero__title {
        font-size: clamp(36px, 10vw, 56px) !important;
        line-height: 1 !important;
    }

    /* Split tiles stack vertically */
    .cv-shop-split {
        grid-template-columns: 1fr !important;
    }

    .cv-shop-tile {
        padding: 70px 28px !important;
        min-height: 380px;
    }

    .cv-shop-tile h2 {
        font-size: clamp(40px, 12vw, 60px) !important;
    }

    .cv-shop-tile p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    .cv-shop-tile__cta {
        padding: 14px 26px !important;
        font-size: 12px !important;
    }

    /* Collection head */
    .cv-shop-collection {
        padding: 70px 22px 40px !important;
    }

    .cv-shop-collection__title {
        font-size: clamp(28px, 7vw, 40px) !important;
        line-height: 1.08 !important;
    }

    .cv-shop-collection__lede {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* Product grid — 2 columns on mobile */
    .cv-shop-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    .cv-shop-card__img {
        margin-bottom: 14px !important;
    }

    .cv-shop-card__tag {
        font-size: 10px !important;
        margin-bottom: 6px !important;
    }

    .cv-shop-card__name {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    .cv-shop-card__rating {
        font-size: 11px !important;
    }

    .cv-shop-card__price {
        font-size: 14px !important;
    }

    .cv-shop-card__cta {
        font-size: 11px !important;
    }

    .cv-shop-card__bottom {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    /* Mini gift card thumbnail still works in 2-col */
    .cv-shop-card__gift-card {
        width: 92%;
    }

    .cv-shop-card__gift-val {
        font-size: 28px !important;
    }

    .cv-shop-card__gift-logo {
        font-size: 12px !important;
    }

    .cv-shop-card__gift-label {
        font-size: 8px !important;
    }

    .cv-shop-card__gift-code {
        font-size: 7px !important;
    }

    /* Story strip */
    .cv-shop-story {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
    }

    .cv-shop-story__text {
        padding: 60px 22px !important;
        order: 2;
    }

    .cv-shop-story__img {
        order: 1;
        height: 280px;
    }

    .cv-shop-story h2 {
        font-size: clamp(30px, 8vw, 44px) !important;
        line-height: 1.05 !important;
    }

    .cv-shop-story__actions {
        flex-direction: column;
        gap: 10px;
    }

    .cv-shop-story__btn {
        width: 100%;
        height: 52px !important;
        justify-content: center !important;
    }

    /* Trust bar 2x2 grid */
    .cv-shop-trust {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 40px 22px !important;
        gap: 28px 16px !important;
    }

    .cv-shop-trust__cell {
        gap: 6px !important;
    }

    .cv-shop-trust__t {
        font-size: 13px !important;
    }

    .cv-shop-trust__d {
        font-size: 11px !important;
        line-height: 1.5 !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   FOOTER — stacked columns, locale chip below
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cv-footer {
        padding: 50px 0 0;
    }

    .cv-footer__grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 36px 24px !important;
        padding: 0 24px;
    }

    .cv-footer__brand {
        grid-column: 1 / -1;
        text-align: center;
    }

    .cv-footer__brand .cv-footer__wordmark {
        display: inline-block;
    }

    .cv-footer__brand .cv-footer__wordmark img {
        height: 30px;
    }

    .cv-footer__tagline {
        font-size: 14px !important;
        line-height: 1.6 !important;
        max-width: 320px;
        margin: 12px auto 0 !important;
    }

    .cv-footer__col--news {
        grid-column: 1 / -1;
    }

    .cv-footer h3 {
        font-size: 11px !important;
        letter-spacing: 0.2em !important;
        margin-bottom: 14px !important;
    }

    .cv-footer__col a {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    /* Bottom bar — stack copy / social / locale */
    .cv-footer__bar {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 24px !important;
        margin-top: 8px;
        text-align: center;
    }

    .cv-footer__copy,
    .cv-footer__social,
    .cv-footer__locale {
        grid-column: 1 !important;
        justify-self: center !important;
    }

    .cv-footer__locale {
        font-size: 12px !important;
        padding: 9px 14px !important;
    }
}

@media (max-width: 480px) {
    .cv-footer__grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        text-align: center;
    }

    .cv-footer__col {
        align-items: center;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   CONTACT PAGE — stacked form + aside
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cv-contact-hero {
        padding: 80px 22px 40px !important;
    }

    .cv-contact-hero__title {
        font-size: clamp(36px, 9vw, 52px) !important;
        line-height: 1.05 !important;
    }

    .cv-contact-hero__copy {
        font-size: 15px !important;
    }

    .cv-contact-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 0 22px 50px !important;
    }

    .cv-contact-aside {
        padding: 28px !important;
        order: 2;
    }

    .cv-contact-form-wrap {
        padding: 0 !important;
    }

    .cv-contact-faq {
        padding: 50px 22px !important;
    }

    .cv-contact-faq h2 {
        font-size: clamp(26px, 6vw, 34px) !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   404 PAGE — visor stacks below text
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cv-404__hero {
        padding: 100px 22px 60px !important;
        min-height: auto !important;
    }

    .cv-404__hero-inner {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .cv-404__title {
        font-size: clamp(40px, 11vw, 60px) !important;
    }

    .cv-404__lede {
        font-size: 15px !important;
        margin-bottom: 28px !important;
    }

    .cv-404__cta-row {
        flex-direction: column;
        gap: 10px !important;
    }

    .cv-404__btn {
        width: 100%;
        height: 54px;
        justify-content: center;
    }

    .cv-404__visor {
        max-width: 320px;
        margin: 0 auto;
        gap: 18px !important;
    }

    .cv-404__watermark {
        font-size: clamp(180px, 70vw, 320px) !important;
        opacity: 0.7;
    }

    .cv-404__dest {
        padding: 50px 22px 70px !important;
    }

    .cv-404__dest-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   NOTIFY-ME MODAL — full-screen friendly on mobile
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .cv-notify-modal {
        padding: 0 !important;
        align-items: flex-end;
    }

    .cv-notify-modal__panel {
        max-width: none !important;
        width: 100% !important;
        border-radius: 18px 18px 0 0 !important;
        padding: 30px 22px calc(24px + env(safe-area-inset-bottom)) !important;
        animation: cv-notify-slide-up .28s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    @keyframes cv-notify-slide-up {
        from { opacity: 0; transform: translateY(40px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .cv-notify-modal__title {
        font-size: 22px !important;
    }

    .cv-notify-modal__input,
    .cv-notify-modal__submit {
        font-size: 16px !important;
    }

    .cv-notify-modal__submit {
        height: 54px !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   MOBILE CART (WooCommerce default cart page)
   ─────────────────────────────────────────────────────────────────────────
   Restyles WC's default `.shop_table.cart` from a horizontal table into
   stacked product cards. Each row becomes a card with image + meta. The
   "Proceed to Checkout" CTA becomes a sticky bottom bar with the total.
   Scoped to .woocommerce-cart so we don't bleed onto checkout, account, etc.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Wrap the whole cart in a cleaner container */
    .woocommerce-cart .woocommerce {
        padding: 24px 18px 120px !important;
        max-width: none !important;
    }

    .woocommerce-cart .woocommerce h1,
    .woocommerce-cart .woocommerce h2 {
        font-family: var(--cv-font-body);
        font-size: 24px !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em;
        margin: 0 0 18px;
    }

    /* WC notices */
    .woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message,
    .woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info,
    .woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error {
        padding: 14px 18px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        background: #f3f3f0 !important;
        border-left: 3px solid #0b0b0b !important;
        margin-bottom: 18px;
    }

    /* Cart form */
    .woocommerce-cart .woocommerce-cart-form {
        margin: 0 0 24px;
    }

    /* Hide the column headers (Product / Price / Quantity / Subtotal)
       since we're stacking the row contents anyway. */
    .woocommerce-cart .shop_table.cart thead {
        display: none !important;
    }

    .woocommerce-cart .shop_table.cart {
        border: 0 !important;
        background: transparent !important;
        display: block !important;
        width: 100% !important;
    }

    .woocommerce-cart .shop_table.cart tbody,
    .woocommerce-cart .shop_table.cart tfoot {
        display: block !important;
        width: 100% !important;
    }

    /* Each cart row becomes a card */
    .woocommerce-cart .shop_table.cart tr.cart_item {
        position: relative;
        display: grid !important;
        grid-template-columns: 88px 1fr;
        grid-template-areas:
            "thumb info"
            "thumb info"
            "thumb qty";
        gap: 14px;
        padding: 18px;
        margin-bottom: 12px;
        background: #fff;
        border: 1px solid #ececea;
        border-radius: 10px;
    }

    .woocommerce-cart .shop_table.cart tr.cart_item td {
        display: block !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        text-align: left !important;
    }

    .woocommerce-cart .shop_table.cart .product-thumbnail {
        grid-area: thumb;
    }

    .woocommerce-cart .shop_table.cart .product-thumbnail img {
        width: 88px !important;
        height: 88px;
        object-fit: cover;
        border-radius: 8px;
        display: block;
    }

    .woocommerce-cart .shop_table.cart .product-name {
        grid-area: info;
        font-family: var(--cv-font-body);
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        color: #0b0b0b;
        padding-right: 36px !important; /* space for remove button */
    }

    .woocommerce-cart .shop_table.cart .product-name a {
        color: #0b0b0b !important;
        text-decoration: none !important;
    }

    /* WC variation text (e.g. "Denomination: $50") under the product name */
    .woocommerce-cart .shop_table.cart .product-name .variation,
    .woocommerce-cart .shop_table.cart .product-name dl.variation {
        font-size: 12px;
        color: #6a6a6a;
        margin: 4px 0 0;
    }

    .woocommerce-cart .shop_table.cart .product-name .variation dt,
    .woocommerce-cart .shop_table.cart .product-name .variation dd {
        display: inline;
        margin: 0;
    }

    /* Hide separate Price + Subtotal cells — we'll show the subtotal next to qty */
    .woocommerce-cart .shop_table.cart .product-price {
        display: none !important;
    }

    .woocommerce-cart .shop_table.cart .product-quantity {
        grid-area: qty;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }

    /* Quantity input — touch friendly */
    .woocommerce-cart .shop_table.cart .quantity {
        display: inline-flex !important;
        align-items: center;
        border: 1px solid #d8d8d4;
        border-radius: 999px;
        overflow: hidden;
        height: 40px;
    }

    .woocommerce-cart .shop_table.cart .quantity input.qty {
        width: 50px !important;
        height: 40px !important;
        border: 0 !important;
        background: transparent !important;
        text-align: center;
        font-size: 15px;
        font-weight: 600;
        color: #0b0b0b;
        padding: 0 !important;
        -moz-appearance: textfield;
    }

    .woocommerce-cart .shop_table.cart .quantity input.qty::-webkit-outer-spin-button,
    .woocommerce-cart .shop_table.cart .quantity input.qty::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Subtotal cell — show inline at the right of the qty row */
    .woocommerce-cart .shop_table.cart .product-subtotal {
        display: block !important;
        font-size: 15px;
        font-weight: 700;
        color: #0b0b0b;
        text-align: right !important;
        font-family: var(--cv-font-body);
    }

    /* Remove button — pinned to top-right of each card */
    .woocommerce-cart .shop_table.cart .product-remove {
        position: absolute !important;
        top: 14px;
        right: 14px;
        width: 28px;
        height: 28px;
        padding: 0 !important;
    }

    .woocommerce-cart .shop_table.cart .product-remove .remove {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        color: #888 !important;
        background: #f3f3f0 !important;
        border-radius: 999px;
        font-size: 16px !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        transition: background-color .15s ease, color .15s ease;
    }

    .woocommerce-cart .shop_table.cart .product-remove .remove:hover {
        background: #d6d6d3 !important;
        color: #0b0b0b !important;
    }

    /* Coupon row */
    .woocommerce-cart .shop_table.cart .actions {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        background: transparent !important;
        padding: 0 !important;
        margin-top: 8px;
    }

    .woocommerce-cart .shop_table.cart .coupon {
        display: flex !important;
        gap: 8px;
        width: 100% !important;
    }

    .woocommerce-cart .shop_table.cart .coupon input.input-text,
    .woocommerce-cart .shop_table.cart .coupon input[name="coupon_code"] {
        flex: 1;
        height: 48px !important;
        padding: 0 16px !important;
        background: #fff !important;
        border: 1px solid #d8d8d4 !important;
        border-radius: 8px !important;
        font-size: 14px !important;
    }

    .woocommerce-cart .shop_table.cart .coupon button[name="apply_coupon"],
    .woocommerce-cart .shop_table.cart .coupon .button {
        height: 48px !important;
        padding: 0 18px !important;
        background: transparent !important;
        color: #0b0b0b !important;
        border: 1px solid #0b0b0b !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 0.04em !important;
    }

    /* "Update cart" button — hide. WC auto-saves quantity changes via AJAX in
       most modern themes, so this button is rarely needed on mobile. */
    .woocommerce-cart .shop_table.cart button[name="update_cart"] {
        display: none !important;
    }

    /* Totals card */
    .woocommerce-cart .cart-collaterals {
        margin-top: 24px;
    }

    .woocommerce-cart .cart-collaterals .cart_totals {
        background: #fff;
        border: 1px solid #ececea;
        border-radius: 10px;
        padding: 18px;
        width: 100% !important;
        float: none !important;
    }

    .woocommerce-cart .cart-collaterals .cart_totals h2 {
        font-size: 16px !important;
        letter-spacing: 0.18em !important;
        text-transform: uppercase;
        margin: 0 0 14px;
        color: #555;
        font-weight: 700;
    }

    .woocommerce-cart .cart-collaterals .cart_totals table {
        width: 100% !important;
        border: 0 !important;
    }

    .woocommerce-cart .cart-collaterals .cart_totals table th,
    .woocommerce-cart .cart-collaterals .cart_totals table td {
        padding: 10px 0 !important;
        border: 0 !important;
        background: transparent !important;
        font-size: 14px !important;
    }

    .woocommerce-cart .cart-collaterals .cart_totals table th {
        font-weight: 500 !important;
        color: #555 !important;
        text-align: left !important;
    }

    .woocommerce-cart .cart-collaterals .cart_totals table td {
        font-weight: 600 !important;
        color: #0b0b0b !important;
        text-align: right !important;
    }

    .woocommerce-cart .cart-collaterals .cart_totals .order-total td,
    .woocommerce-cart .cart-collaterals .cart_totals .order-total th {
        font-size: 18px !important;
        font-weight: 700 !important;
        padding-top: 14px !important;
        border-top: 1px solid #ececea !important;
    }

    /* Shipping section inside totals */
    .woocommerce-cart .cart_totals .shipping ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .woocommerce-cart .cart_totals .shipping ul li {
        font-size: 13px;
        line-height: 1.6;
    }

    /* Hide the inline "Proceed to checkout" button in the totals card —
       the sticky footer bar takes over. */
    .woocommerce-cart .cart_totals .wc-proceed-to-checkout {
        display: none !important;
    }

    /* Cross-sells — hide on mobile or simplify (default WC look is messy) */
    .woocommerce-cart .cross-sells {
        margin-top: 32px;
    }

    .woocommerce-cart .cross-sells > h2 {
        font-size: 18px !important;
    }

    .woocommerce-cart .cross-sells ul.products {
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
        display: grid !important;
        list-style: none;
        padding: 0;
    }

    /* Sticky checkout bar — pinned to bottom of viewport */
    .woocommerce-cart::after {
        content: "";
        display: block;
        height: 80px; /* matches the sticky bar's height + breathing room */
    }

    /* Build the sticky bar via the WC totals' .wc-proceed-to-checkout block:
       move it out of flow and pin to bottom. We re-show it here (the rule
       above hides it inside the card). */
    .woocommerce-cart .cart_totals .wc-proceed-to-checkout {
        display: block !important;
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        background: #fff;
        border-top: 1px solid #ececea;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
        margin: 0 !important;
    }

    .woocommerce-cart .cart_totals .wc-proceed-to-checkout .checkout-button,
    .woocommerce-cart .cart_totals .wc-proceed-to-checkout a.button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        height: 54px;
        padding: 0 22px !important;
        background: #0b0b0b !important;
        color: #fff !important;
        font-family: var(--cv-font-body);
        font-size: 15px !important;
        font-weight: 600 !important;
        letter-spacing: 0.04em !important;
        text-decoration: none !important;
        border-radius: 0 !important;
        border: 0 !important;
    }

    /* Empty cart state */
    .woocommerce-cart .cart-empty,
    .woocommerce-cart .wc-empty-cart-message {
        text-align: center;
        padding: 60px 22px !important;
        font-size: 15px;
    }

    .woocommerce-cart .return-to-shop a.button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        height: 52px;
        padding: 0 28px !important;
        background: #0b0b0b !important;
        color: #fff !important;
        font-family: var(--cv-font-body);
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none !important;
        border-radius: 0 !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   FLOATING BUY-NOW (homepage) — bottom-right on mobile, smaller
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cv-floating-buy-now {
        right: 16px !important;
        bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        padding: 14px 22px !important;
        font-size: 12px !important;
        letter-spacing: 0.12em !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   SMALL PHONE TUNING (≤ 380px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    :root { --cv-header-h: 56px; }

    .cv-header__inner { padding: 0 14px; }
    .cv-header-buy { padding: 0 12px !important; font-size: 10px !important; }
    .cv-logo img { height: 22px; }

    .cv-statement__title,
    .cv-pf__title,
    .cv-final-cta__title {
        font-size: clamp(24px, 8vw, 32px) !important;
    }

    .cv-shop-tile { padding: 60px 22px !important; min-height: 320px; }

    .cv-shop-grid { gap: 10px !important; }
    .cv-shop-card__tag { font-size: 9px !important; }
    .cv-shop-card__name { font-size: 13px !important; }
    .cv-shop-card__price { font-size: 13px !important; }
}

/* ═════════════════════════════════════════════════════════════════════════
   SAFE-AREA INSETS (notch / dynamic island / home-bar)
   ════════════════════════════════════════════════════════════════════════ */
@supports (padding: max(0px)) {
    @media (max-width: 1024px) {
        .cv-mobile-panel {
            padding-top: max(calc(var(--cv-header-h) + 24px), env(safe-area-inset-top));
            padding-bottom: max(32px, env(safe-area-inset-bottom));
        }
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — kill non-essential animations
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .cv-mobile-panel,
    .cv-notify-modal__panel,
    .cv-scroll-hint__dot,
    .cv-pp-stock__dot,
    .cv-404__eyebrow-dot {
        animation: none !important;
        transition: none !important;
    }
}