/* =====================================================================
   ZADVEOCI — MINIMAL REDESIGN
   ---------------------------------------------------------------------
   Goal:  strip the "AI-generated / overly synthetic" look and replace it
          with a calm, human, magazine-editorial UI that converts through
          clarity instead of effects.

   Method:  pure CSS overrides loaded LATE via an MU-plugin. We do not
            modify any theme files, we do not touch the Divi Theme Builder
            header / footer, and we do not change WooCommerce structure
            or copy. We only change what the page LOOKS like.

   Strategy:
     1. Re-map the child theme's --ml-* design tokens to a minimal palette
        (one ink + one warm clay accent + warm neutrals).
     2. Neutralize hard-coded gradients, glassmorphism, glow shadows,
        decorative SVGs and looping animations on the homepage.
     3. Rebuild hero, sections, product cards, product page, navigation
        polish and Woo notices with quiet, paper-toned surfaces and
        150-250ms micro-interactions.
   ===================================================================== */


/* Use Inter as the primary UI font for a calm, modern feel. We load it
   from Bunny Fonts (privacy-friendly, no Google tracking) so the swap is
   silent and GDPR-clean. The site already loads Open Sans + Playfair as
   fallbacks via the theme. */
@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700,800&display=swap');


/* =====================================================================
   1.  BRAND TOKENS
   ===================================================================== */

:root {
    /* ---- Two primary colors (ink + warm clay) + neutrals ---- */
    --zv-ink:           #1A1F2C;   /* near-black, slightly warm */
    --zv-ink-2:         #2C3340;   /* secondary headings */
    --zv-slate:         #5A6470;   /* body text */
    --zv-muted:         #9AA1AC;   /* helper text, captions */

    --zv-accent:        #9B7E5F;   /* warm clay (a single accent) */
    --zv-accent-hover:  #7E6447;   /* clay hover */
    --zv-accent-soft:   #E8DFD2;   /* clay tinted surface */

    --zv-surface:       #FFFFFF;   /* base */
    --zv-surface-alt:   #FAF8F4;   /* warm paper */
    --zv-surface-tint:  #F5F1EA;   /* hero / soft band */
    --zv-surface-deep:  #1A1F2C;   /* dark band (rare) */

    --zv-border:        #E8E5E0;   /* warm paper-toned hairline */
    --zv-border-strong: #D8D3CB;
    --zv-divider:       #EFEDE8;

    --zv-success:       #2F8F4E;
    --zv-danger:        #C44536;
    --zv-sale:          #C44536;

    /* ---- Type ---- */
    --zv-font-ui:       'Inter', -apple-system, BlinkMacSystemFont,
                        'Segoe UI', Roboto, system-ui, sans-serif;
    --zv-font-display:  'Inter', 'Playfair Display', Georgia, serif;

    /* ---- Motion ---- */
    --zv-t-fast:        150ms cubic-bezier(.2,.8,.2,1);
    --zv-t-base:        200ms cubic-bezier(.2,.8,.2,1);
    --zv-t-slow:        260ms cubic-bezier(.2,.8,.2,1);

    /* ---- Shape & shadow (tight, restrained) ---- */
    --zv-radius-sm:     4px;
    --zv-radius-md:     6px;
    --zv-radius-lg:     10px;

    --zv-shadow-1:      0 1px 2px rgba(20,30,50,.04);
    --zv-shadow-2:      0 4px 12px rgba(20,30,50,.06);
    --zv-shadow-3:      0 10px 28px rgba(20,30,50,.08);
}


/* =====================================================================
   2.  RE-MAP THE CHILD THEME'S --ml-* TOKENS
   ---------------------------------------------------------------------
   The Divi-child theme paints almost everything from --ml-*. Re-targeting
   those variables on the relevant body wrappers is the cheapest, safest
   way to recolor the site without rewriting every selector.
   ===================================================================== */

#main-content,
.et-l--body,
#zadveoci-homepage,
.zadveoci-homepage-wrap,
.mylens-homepage-wrap,
body.zadveoci-theme,
body.mylens-theme,
body.zadveoci-homepage,
body.mylens-homepage,
body.mylens-about,
body.mylens-contact,
body.mylens-faq,
body.mylens-shop,
body.mylens-product,
body.mylens-brand,
body.woocommerce {
    --ml-primary:        var(--zv-ink);
    --ml-primary-light:  var(--zv-ink-2);
    --ml-primary-dark:   #0E121B;
    --ml-primary-rgb:    26 31 44;

    --ml-accent:         var(--zv-accent);
    --ml-accent-hover:   var(--zv-accent-hover);
    --ml-accent-light:   var(--zv-accent-soft);
    --ml-accent-rgb:     155 126 95;

    --ml-surface:        var(--zv-surface);
    --ml-surface-alt:    var(--zv-surface-alt);
    --ml-surface-green:  rgba(26, 31, 44, .03);
    --ml-card:           var(--zv-surface);
    --ml-card-hover:     var(--zv-surface-alt);

    --ml-text:           var(--zv-ink);
    --ml-text-light:     var(--zv-slate);
    --ml-text-muted:     var(--zv-muted);
    --ml-text-inverse:   #FFFFFF;

    --ml-success:        var(--zv-success);
    --ml-danger:         var(--zv-danger);
    --ml-sale:           var(--zv-sale);

    --ml-shadow-sm:      var(--zv-shadow-1);
    --ml-shadow-md:      var(--zv-shadow-2);
    --ml-shadow-lg:      var(--zv-shadow-3);
    --ml-shadow-xl:      var(--zv-shadow-3);
    --ml-shadow-gold:    0 4px 14px rgba(155,126,95,.18);

    --ml-radius-sm:      4px;
    --ml-radius-md:      6px;
    --ml-radius-lg:      10px;
    --ml-radius-xl:      12px;

    --ml-transition-fast: var(--zv-t-fast);
    --ml-transition:      var(--zv-t-base);
    --ml-transition-slow: var(--zv-t-slow);
}


/* =====================================================================
   3.  GLOBAL TYPE & SURFACES
   ===================================================================== */

body.zadveoci-theme,
body.mylens-theme,
body.woocommerce {
    font-family: var(--zv-font-ui);
    color: var(--zv-ink);
    background: var(--zv-surface) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
}

body.zadveoci-homepage,
body.mylens-homepage,
body.mylens-about,
body.mylens-contact,
body.mylens-faq,
body.mylens-shop,
body.mylens-product,
body.mylens-brand {
    background: var(--zv-surface) !important;
}

#zadveoci-homepage,
.zadveoci-homepage-wrap,
.mylens-homepage-wrap,
.et-l--body,
#main-content {
    font-family: var(--zv-font-ui);
}

/* Headings: Inter, tighter tracking, generous line-height — calm, not loud */
.zadveoci-homepage-wrap h1,
.zadveoci-homepage-wrap h2,
.zadveoci-homepage-wrap h3,
.zadveoci-homepage-wrap h4,
.mylens-homepage-wrap h1,
.mylens-homepage-wrap h2,
.mylens-homepage-wrap h3,
.mylens-homepage-wrap h4,
#main-content h1,
#main-content h2,
#main-content h3,
#main-content h4,
body.woocommerce h1,
body.woocommerce h2,
body.woocommerce h3,
body.woocommerce h4 {
    font-family: var(--zv-font-display);
    color: var(--zv-ink);
    letter-spacing: -0.015em;
    line-height: 1.18;
    font-weight: 700;
}

#main-content p,
.zadveoci-homepage-wrap p,
.mylens-homepage-wrap p,
body.woocommerce p {
    color: var(--zv-slate);
    line-height: 1.7;
}

/* Calm the body link color globally */
#main-content a,
.zadveoci-homepage-wrap a,
.mylens-homepage-wrap a {
    color: var(--zv-ink);
    transition: color var(--zv-t-base);
}
#main-content a:hover,
.zadveoci-homepage-wrap a:hover,
.mylens-homepage-wrap a:hover {
    color: var(--zv-accent);
}


/* =====================================================================
   4.  KILL DECORATIVE ANIMATIONS
   ---------------------------------------------------------------------
   The theme uses 7+ infinite keyframe animations on the homepage that
   add the "AI-synthetic" feel. We disable them all. The DOM is unchanged
   so functionality is preserved.
   ===================================================================== */

.ml-hero,
.ml-hero *,
.ml-tryon,
.ml-tryon *,
.ml-promo-banner,
.ml-promo-banner * {
    animation: none !important;
}

.ml-hero__title-accent,
.ml-hero__tag::before,
.ml-hero__float--1,
.ml-hero__float--2,
.ml-hero::before,
.ml-hero::after,
.ml-hero__content::after,
.ml-tryon__label::before,
.ml-tryon__float-card,
.ml-tryon__image-wrap::before,
.ml-btn-tryon-primary {
    animation: none !important;
}


/* =====================================================================
   5.  HOMEPAGE HERO  —  "Editorial calm"
   ---------------------------------------------------------------------
   Replace the dark gradient + glassmorphic glasses centerpiece + animated
   chips with a flat warm-paper surface, a single column of clean type, a
   solid CTA, and a subtle accent underline. No floating cards, no
   glowing halos. The right side is left empty so a real lifestyle photo
   can be uploaded later via Media Library and dropped in.
   ===================================================================== */

.ml-hero {
    background: var(--zv-surface-tint) !important;
    min-height: auto !important;
    padding: clamp(56px, 8vw, 96px) 0 clamp(56px, 7vw, 80px) !important;
    overflow: hidden !important;
}

.ml-hero--compact {
    padding: clamp(48px, 7vw, 80px) 0 clamp(48px, 6vw, 72px) !important;
}

.ml-hero__bg,
.ml-hero__gradient {
    background: transparent !important;
    background-image: none !important;
}

/* Remove the dot-grid texture — it reads "synthetic" */
.ml-hero__bg::after,
.ml-hero::before,
.ml-hero::after,
.ml-hero__content::after {
    display: none !important;
    content: none !important;
}

/* Hide floating decorative rings entirely */
.ml-hero__float,
.ml-hero__float--1,
.ml-hero__float--2 {
    display: none !important;
}

.ml-hero__content {
    max-width: 720px !important;
    text-align: left !important;
    padding: 0 !important;
}

/* Tag pill — flat, hairline, no animation */
.ml-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--zv-slate) !important;
    background: var(--zv-surface) !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.ml-hero__tag::before {
    width: 6px !important;
    height: 6px !important;
    background: var(--zv-accent) !important;
    box-shadow: none !important;
    animation: none !important;
}

/* Title — calm, large, ink */
.ml-hero__title {
    color: var(--zv-ink) !important;
    font-size: clamp(2.25rem, 5.4vw, 3.6rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    margin: 22px 0 18px !important;
}

/* Accent line — single underline, no gradient text, no shimmer */
.ml-hero__title-accent {
    position: relative;
    display: inline-block;
    color: var(--zv-ink) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    background-clip: initial !important;
    background-size: auto !important;
    animation: none !important;
}
.ml-hero__title-accent::after {
    content: "";
    position: absolute;
    left: 0;
    right: auto;
    bottom: -10px;
    width: 56px;
    height: 2px;
    background: var(--zv-accent);
    border-radius: 0;
    box-shadow: none;
}

.ml-hero__desc {
    color: var(--zv-slate) !important;
    font-size: clamp(1rem, 1.4vw, 1.125rem) !important;
    line-height: 1.7 !important;
    max-width: 56ch !important;
    margin: 0 0 28px !important;
}

/* CTAs — solid ink primary + minimal outline secondary */
.ml-hero__cta {
    gap: 12px !important;
    margin-top: 4px !important;
}

.ml-hero__cta .ml-btn-primary,
.ml-btn.ml-btn-primary {
    background: var(--zv-ink) !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 1px solid var(--zv-ink) !important;
    border-radius: 6px !important;
    padding: 14px 26px !important;
    font-weight: 600 !important;
    letter-spacing: 0.005em !important;
    box-shadow: none !important;
    transition: background var(--zv-t-base), transform var(--zv-t-base),
                box-shadow var(--zv-t-base) !important;
}
.ml-hero__cta .ml-btn-primary:hover,
.ml-btn.ml-btn-primary:hover {
    background: #000 !important;
    border-color: #000 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--zv-shadow-2) !important;
}

.ml-hero__cta .ml-btn-outline,
.ml-btn.ml-btn-outline {
    background: transparent !important;
    color: var(--zv-ink) !important;
    border: 1px solid var(--zv-ink) !important;
    border-radius: 6px !important;
    padding: 13px 24px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: background var(--zv-t-base), color var(--zv-t-base) !important;
}
.ml-hero__cta .ml-btn-outline:hover,
.ml-btn.ml-btn-outline:hover {
    background: var(--zv-ink) !important;
    color: #FFFFFF !important;
}

/* Trust strip — clean inline list, accent icons */
.ml-hero__trust {
    margin-top: 28px !important;
    gap: 22px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}
.ml-hero__trust-item {
    color: var(--zv-slate) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    gap: 8px !important;
}
.ml-hero__trust-item svg {
    stroke: var(--zv-accent) !important;
    opacity: 1 !important;
}


/* =====================================================================
   6.  SECTIONS — flatten "dark / alt / promo" bands
   ===================================================================== */

.ml-section,
.ml-section-alt,
.ml-section-dark {
    background: var(--zv-surface) !important;
    padding: clamp(56px, 7vw, 96px) 0 !important;
}

.ml-section-alt {
    background: var(--zv-surface-alt) !important;
}

.ml-section-dark {
    background: var(--zv-surface-deep) !important;
    color: #FFFFFF !important;
}
.ml-section-dark h1,
.ml-section-dark h2,
.ml-section-dark h3,
.ml-section-dark p {
    color: #FFFFFF !important;
}

.ml-section-header {
    text-align: center;
}
.ml-section-header h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.25rem) !important;
    margin: 0 0 12px !important;
    color: var(--zv-ink) !important;
}
.ml-section-header p {
    color: var(--zv-slate) !important;
    max-width: 60ch;
    margin: 0 auto !important;
}

/* Section CTAs (".ml-view-all") rendered as proper pill buttons.
   Three CSS layers in the parent theme stack on this element:
     - style.css        inline-flex + clay text + uppercase 0.5px tracking
     - homepage.css     clay-tinted-pill geometry (border + bg)
   We override ALL inherited surface, border, padding properties so the
   button reads as a proper ink-on-paper outline pill instead of a
   clay-tinted tag-pill. Hover fills with ink + lifts 1px. Matches the
   primary/outline button language used elsewhere in the redesign. */
.ml-view-all,
.ml-section-header .ml-view-all,
.ml-home-spotlight .ml-view-all,
.mylens-homepage-wrap .ml-section-header .ml-view-all,
#zadveoci-homepage .ml-section-header .ml-view-all,
.zadveoci-homepage-wrap .ml-section-header .ml-view-all,
.mylens-homepage-wrap .ml-home-spotlight .ml-spotlight-deck .ml-view-all,
.zadveoci-homepage-wrap .ml-home-spotlight .ml-spotlight-deck .ml-view-all {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 0 !important;
    padding: 11px 24px !important;
    font-family: var(--zv-font-ui) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: var(--zv-ink) !important;
    background: var(--zv-surface) !important;
    background-image: none !important;
    border: 1px solid var(--zv-ink) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    transition:
        background var(--zv-t-base),
        color var(--zv-t-base),
        border-color var(--zv-t-base),
        box-shadow var(--zv-t-base),
        transform var(--zv-t-base) !important;
}

.ml-view-all:hover,
.ml-section-header .ml-view-all:hover,
.ml-home-spotlight .ml-view-all:hover,
.mylens-homepage-wrap .ml-section-header .ml-view-all:hover,
#zadveoci-homepage .ml-section-header .ml-view-all:hover,
.zadveoci-homepage-wrap .ml-section-header .ml-view-all:hover,
.mylens-homepage-wrap .ml-home-spotlight .ml-spotlight-deck .ml-view-all:hover,
.zadveoci-homepage-wrap .ml-home-spotlight .ml-spotlight-deck .ml-view-all:hover {
    background: var(--zv-ink) !important;
    color: #FFFFFF !important;
    border-color: var(--zv-ink) !important;
    box-shadow: 0 6px 18px -4px rgba(20,30,50,0.18) !important;
    transform: translateY(-1px) !important;
}

/* Try-on band — flat warm paper, no gradients, no glow */
.ml-tryon,
.ml-tryon__bg {
    background: var(--zv-surface-alt) !important;
    background-image: none !important;
}
.ml-tryon__bg::before,
.ml-tryon__bg::after,
.ml-tryon__image-wrap::before,
.ml-tryon__float-card {
    display: none !important;
    content: none !important;
}
.ml-tryon__label,
.ml-tryon__desc,
.ml-tryon h2 {
    color: var(--zv-ink) !important;
}
/* Try-on feature rows.
   The original theme set these to white text on a dark gradient. We
   flattened the section to warm paper, so the text inherited white-on-
   white and the rows looked empty. Recolor the inner <strong> and <span>
   to ink + slate, give the row real card padding, and tint the icon box
   so the whole row reads as a proper feature card. */
.ml-tryon__feature {
    background: var(--zv-surface) !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    gap: 14px !important;
    box-shadow: none !important;
    transition: border-color var(--zv-t-base),
                box-shadow var(--zv-t-base),
                transform var(--zv-t-base) !important;
    transform: none !important;   /* override theme's translateX hover that fights with our card behavior */
}
.ml-tryon__feature:hover {
    border-color: var(--zv-border-strong) !important;
    box-shadow: var(--zv-shadow-2) !important;
    transform: translateY(-1px) !important;
}
.ml-tryon__feature strong {
    color: var(--zv-ink) !important;
    font-family: var(--zv-font-ui) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-bottom: 2px !important;
    display: block;
}
.ml-tryon__feature span,
.ml-tryon__feature p {
    color: var(--zv-slate) !important;
    opacity: 1 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}
.ml-tryon__feature-icon {
    background: var(--zv-accent-soft) !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 10px !important;
    width: 40px !important;
    height: 40px !important;
    color: var(--zv-accent) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.ml-tryon__feature-icon svg {
    stroke: var(--zv-accent) !important;
    width: 18px !important;
    height: 18px !important;
}
.ml-tryon__feature:hover .ml-tryon__feature-icon {
    background: var(--zv-accent-soft) !important;
    border-color: var(--zv-accent) !important;
}
.ml-btn-tryon-primary,
.ml-btn-tryon-outline {
    background: var(--zv-ink) !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 1px solid var(--zv-ink) !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    animation: none !important;
}
.ml-btn-tryon-primary:hover {
    background: #000 !important;
    transform: translateY(-1px) !important;
}
.ml-btn-tryon-outline {
    background: transparent !important;
    color: var(--zv-ink) !important;
}
.ml-btn-tryon-outline:hover {
    background: var(--zv-ink) !important;
    color: #FFFFFF !important;
}

/* Promo banner — flatten */
.ml-promo-banner__bg {
    background: var(--zv-surface-tint) !important;
    background-image: none !important;
}
.ml-promo-banner__bg::after {
    display: none !important;
    content: none !important;
}
.ml-promo-banner__badge {
    background: var(--zv-ink) !important;
    color: #FFFFFF !important;
}
.ml-promo-banner__content h2,
.ml-promo-banner__content p {
    color: var(--zv-ink) !important;
}

/* SEO block at bottom — flatten */
.ml-seo-block {
    background: var(--zv-surface-alt) !important;
    background-image: none !important;
}
.ml-seo-block::before {
    display: none !important;
    content: none !important;
}


/* =====================================================================
   7.  PRODUCT CARDS — quiet, clean, hover lift
   ===================================================================== */

.ml-product-grid {
    gap: clamp(16px, 2.2vw, 28px) !important;
}

.ml-product-card {
    background: var(--zv-surface) !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    transition: transform var(--zv-t-slow),
                box-shadow var(--zv-t-slow),
                border-color var(--zv-t-slow) !important;
}
.ml-product-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--zv-border-strong) !important;
    box-shadow: var(--zv-shadow-2) !important;
}

.ml-product-card__image {
    background: var(--zv-surface-alt) !important;
    background-image: none !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    position: relative !important;
}

.ml-product-card__media {
    display: block;
    width: 100%;
    height: 100%;
}

.ml-product-card__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transition: transform 320ms cubic-bezier(.2,.8,.2,1) !important;
    will-change: transform;
}
.ml-product-card:hover .ml-product-card__img {
    transform: scale(1.04) !important;
}

/* Badges — quiet, label-style */
.ml-product-card__badges {
    top: 10px !important;
    left: 10px !important;
    gap: 6px !important;
}
.ml-product-card__badge {
    background: var(--zv-ink) !important;
    color: #FFFFFF !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 4px 9px !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
.ml-product-card__badge--pill {
    border-radius: 999px !important;
    background: var(--zv-surface) !important;
    color: var(--zv-ink) !important;
    border: 1px solid var(--zv-border) !important;
}
.ml-product-card__badge--sale,
.ml-product-card__badge--discount {
    background: var(--zv-sale) !important;
    color: #FFFFFF !important;
    border-color: var(--zv-sale) !important;
}

/* Wishlist icon area — calm, no clutter */
.ml-product-card__actions {
    top: 10px !important;
    right: 10px !important;
    opacity: 1 !important;
    transform: none !important;
    transition: opacity var(--zv-t-base) !important;
}
.ml-product-card__actions .icon_after_add_to_cart {
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--zv-border);
    border-radius: 999px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--zv-t-base);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.ml-product-card__actions .icon_after_add_to_cart:hover {
    border-color: var(--zv-accent);
    transform: translateY(-1px);
}
.ml-product-card__actions .wishlist_text_icon_image {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
}
/* Hide the redundant "Add to wishlist" / "View wishlist" text on cards;
   the icon is the affordance. The label still announces to screen
   readers because the <span> stays in the DOM. */
.ml-product-card__actions .wbte_wishlist:not(img) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.ml-product-card__actions .browse_wishlist {
    display: none !important;
}

/* Quick view ribbon — simple bottom slide-in */
.ml-product-card__quickview {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(26,31,44,0.92) !important;
    text-align: center !important;
    padding: 10px 12px !important;
    transform: translateY(100%) !important;
    transition: transform var(--zv-t-slow) !important;
}
.ml-product-card:hover .ml-product-card__quickview {
    transform: translateY(0) !important;
}
.ml-product-card__quickview a {
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

/* Card text block */
.ml-product-card__info {
    padding: 16px 16px 18px !important;
    background: var(--zv-surface) !important;
}
.ml-product-card__brand {
    color: var(--zv-muted) !important;
    font-size: 11px !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    display: block;
    margin-bottom: 4px !important;
}
.ml-product-card__title {
    margin: 0 0 8px !important;
    font-family: var(--zv-font-ui) !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
}
.ml-product-card__title a {
    color: var(--zv-ink) !important;
    text-decoration: none !important;
}
.ml-product-card__title a:hover {
    color: var(--zv-accent) !important;
}
.ml-product-card__price {
    color: var(--zv-ink) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}
.ml-product-card__price del,
.ml-product-card__price del .amount {
    color: var(--zv-muted) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    margin-right: 6px !important;
}
.ml-product-card__price ins,
.ml-product-card__price ins .amount {
    color: var(--zv-sale) !important;
    text-decoration: none !important;
}


/* =====================================================================
   8.  WOOCOMMERCE — shop, single product, cart, checkout
   ---------------------------------------------------------------------
   We keep the structure 100% intact and only restyle.
   ===================================================================== */

/* ---- Shop archive product cards (Divi default Woo loop) ---- */
.woocommerce ul.products li.product {
    background: var(--zv-surface) !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 8px !important;
    padding: 14px !important;
    transition: transform var(--zv-t-slow),
                box-shadow var(--zv-t-slow),
                border-color var(--zv-t-slow) !important;
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-2px) !important;
    border-color: var(--zv-border-strong) !important;
    box-shadow: var(--zv-shadow-2) !important;
}
.woocommerce ul.products li.product .price {
    color: var(--zv-ink) !important;
    font-weight: 700 !important;
}
.woocommerce ul.products li.product .price del {
    color: var(--zv-muted) !important;
    opacity: 1 !important;
}
.woocommerce ul.products li.product .price ins {
    color: var(--zv-sale) !important;
    background: transparent !important;
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
    background: var(--zv-sale) !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    box-shadow: none !important;
    border: none !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
    min-width: 0 !important;
}

/* ---- Single product page ---- */
body.single-product .woocommerce-breadcrumb {
    color: var(--zv-muted) !important;
    font-size: 13px !important;
    margin-bottom: 22px !important;
}
body.single-product .woocommerce-breadcrumb a {
    color: var(--zv-slate) !important;
}
body.single-product div.product .product_title {
    font-family: var(--zv-font-display) !important;
    color: var(--zv-ink) !important;
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 14px !important;
}
body.single-product div.product .price,
body.single-product div.product p.price {
    color: var(--zv-ink) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 6px 0 18px !important;
}
body.single-product div.product .price del {
    color: var(--zv-muted) !important;
    opacity: 1 !important;
    font-size: 1.05rem !important;
    margin-right: 8px !important;
}
body.single-product div.product .price ins {
    color: var(--zv-sale) !important;
    text-decoration: none !important;
    background: transparent !important;
}
body.single-product div.product .woocommerce-product-details__short-description {
    color: var(--zv-slate) !important;
    line-height: 1.7 !important;
    margin-bottom: 22px !important;
}

/* Spacious product image gallery */
body.single-product div.product div.images img,
body.single-product div.product .woocommerce-product-gallery__image img {
    border-radius: 8px !important;
    border: 1px solid var(--zv-border) !important;
    background: var(--zv-surface-alt) !important;
}

/* Tabs */
body.single-product .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid var(--zv-border) !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
}
body.single-product .woocommerce-tabs ul.tabs::before {
    display: none !important;
}
body.single-product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    margin: 0 18px 0 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
body.single-product .woocommerce-tabs ul.tabs li::before,
body.single-product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
}
body.single-product .woocommerce-tabs ul.tabs li a {
    color: var(--zv-slate) !important;
    font-weight: 600 !important;
    padding: 12px 0 !important;
    border-bottom: 2px solid transparent !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 14px !important;
    transition: color var(--zv-t-base), border-color var(--zv-t-base) !important;
}
body.single-product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--zv-ink) !important;
}
body.single-product .woocommerce-tabs ul.tabs li.active a,
body.single-product .woocommerce-tabs ul.tabs li.ui-tabs-active a {
    color: var(--zv-ink) !important;
    border-bottom-color: var(--zv-accent) !important;
}

/* Trust strip we add visually below the price (pure CSS, no DOM change).
   It uses the existing .meta block as anchor; if the theme's structure
   doesn't include it, it gracefully no-ops. */
body.single-product div.product form.cart {
    margin: 18px 0 !important;
    gap: 12px !important;
}

/* Buttons (Woo + theme) */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.woocommerce button[name="update_cart"] {
    background: var(--zv-ink) !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 1px solid var(--zv-ink) !important;
    border-radius: 6px !important;
    padding: 12px 22px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-size: 14px !important;
    box-shadow: none !important;
    transition: background var(--zv-t-base),
                transform var(--zv-t-base),
                box-shadow var(--zv-t-base) !important;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce button[name="update_cart"]:hover {
    background: #000 !important;
    border-color: #000 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--zv-shadow-2) !important;
}

/* Single product "Add to cart" gets prominence */
body.single-product .single_add_to_cart_button {
    padding: 14px 28px !important;
    font-size: 15px !important;
    border-radius: 6px !important;
    width: auto !important;
}

/* Quantity input */
.woocommerce .quantity .qty {
    border: 1px solid var(--zv-border) !important;
    border-radius: 6px !important;
    padding: 10px 8px !important;
    color: var(--zv-ink) !important;
    background: var(--zv-surface) !important;
    font-weight: 600 !important;
    width: 64px !important;
    text-align: center !important;
}

/* ---- Cart & checkout ---- */
.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review {
    background: var(--zv-surface-alt) !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 10px !important;
    padding: 22px !important;
}
.woocommerce table.shop_table {
    border: 1px solid var(--zv-border) !important;
    border-radius: 10px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border-color: var(--zv-divider) !important;
    color: var(--zv-ink) !important;
}
.woocommerce-cart td.product-thumbnail img {
    border-radius: 6px !important;
    border: 1px solid var(--zv-border) !important;
    background: var(--zv-surface-alt) !important;
}

/* Coupon input */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    border: 1px solid var(--zv-border) !important;
    border-radius: 6px !important;
    padding: 11px 12px !important;
    background: var(--zv-surface) !important;
    color: var(--zv-ink) !important;
    transition: border-color var(--zv-t-base) !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--zv-ink) !important;
    outline: none !important;
}


/* =====================================================================
   9.  WOOCOMMERCE NOTICES & WISHLIST FEEDBACK
   ---------------------------------------------------------------------
   The user wants clear "Added to cart / Added to wishlist" feedback.
   We restyle Woo's existing notices into clean editorial banners; the
   wishlist plugin's toast is also normalized.
   ===================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: 8px !important;
    border: 1px solid var(--zv-border) !important;
    padding: 14px 18px !important;
    background: var(--zv-surface) !important;
    color: var(--zv-ink) !important;
    box-shadow: var(--zv-shadow-1) !important;
    border-top: none !important;
    border-left: 3px solid var(--zv-success) !important;
    font-weight: 500 !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    color: var(--zv-success) !important;
}
.woocommerce-info {
    border-left-color: var(--zv-ink) !important;
}
.woocommerce-info::before {
    color: var(--zv-ink) !important;
}
.woocommerce-error {
    border-left-color: var(--zv-danger) !important;
}
.woocommerce-error::before {
    color: var(--zv-danger) !important;
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
    background: var(--zv-ink) !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
}

/* Webtoffee wishlist add/remove toast */
.wbte_dialog,
.wt-wishlist-message,
.wt-wishlist-popup,
.wbte-wishlist-message-container {
    background: var(--zv-surface) !important;
    color: var(--zv-ink) !important;
    border: 1px solid var(--zv-border) !important;
    border-left: 3px solid var(--zv-accent) !important;
    border-radius: 8px !important;
    box-shadow: var(--zv-shadow-3) !important;
    font-weight: 500 !important;
}

/* Wishlist heart pulse on click — minimal, 200ms */
.wbte_wishlist.wt-wishlist-button {
    transition: transform var(--zv-t-base) !important;
}
.wbte_wishlist.wt-wishlist-button:active {
    transform: scale(0.92);
}


/* =====================================================================
   10.  HEADER NAVIGATION POLISH
   ---------------------------------------------------------------------
   We do NOT edit the Theme Builder header DOM; we only soften its visual
   presentation: nav link spacing, hover state, mobile menu hairline.
   ===================================================================== */

.et_pb_menu .et-menu > li > a {
    color: var(--zv-ink) !important;
    font-family: var(--zv-font-ui) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    transition: color var(--zv-t-base) !important;
}
.et_pb_menu .et-menu > li > a:hover {
    color: var(--zv-accent) !important;
    opacity: 1 !important;
}

/* ----------------------------------------------------------------------
   Active / current menu item.
   ---------------------------------------------------------------------
   The Divi Theme Builder header was authored with a hard-coded rule that
   paints the active menu link in the legacy coral (#e07a5f) via the
   selector:
     .et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item > a
   That JS-applied "current-menu-item" class made the Home link render in
   orange while every other link rendered in ink, and the previous
   border-bottom underline rendered detached from the text because the
   border sat at the bottom of the <a> box (offset by line-height).

   The minimal-UI fix: keep ALL menu items visually identical (calm ink),
   no active highlight, no underline. The user knows they're on the home
   page from the URL bar and the page content. That matches the
   "minimal & human" brief exactly. We force this by matching Divi's
   exact selector chain plus a body prefix (specificity beats Divi).
   -------------------------------------------------------------------- */
body .et_pb_menu .et-menu li.current-menu-item > a,
body .et_pb_menu .et-menu li.current-menu-ancestor > a,
body .et_pb_menu .et-menu li.current_page_item > a,
body .et_pb_menu .et-menu li.current_page_ancestor > a,
body .et_pb_menu .et-menu li.current-menu-parent > a,
body .et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item > a,
body .et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-ancestor > a,
body .et_pb_menu_0_tb_header.et_pb_menu ul:not(.sub-menu) > li.current-menu-ancestor > a {
    color: var(--zv-ink) !important;
    background: transparent !important;
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* Hover always wins (still calm, still 200ms) */
body .et_pb_menu .et-menu li.current-menu-item > a:hover,
body .et_pb_menu .et-menu li.current_page_item > a:hover,
body .et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item > a:hover {
    color: var(--zv-accent) !important;
}

/* Cart & search icons — calm */
.et_pb_menu__cart-button::before,
.et_pb_menu__search-button::before {
    color: var(--zv-ink) !important;
}

/* Mobile menu */
.et_mobile_menu {
    border-top: 2px solid var(--zv-accent) !important;
    background: var(--zv-surface) !important;
    box-shadow: var(--zv-shadow-2) !important;
}
.et_mobile_menu li a {
    color: var(--zv-ink) !important;
    border-bottom: 1px solid var(--zv-divider) !important;
    padding: 12px 5% !important;
}
.et_mobile_menu li a:hover {
    color: var(--zv-accent) !important;
    background: var(--zv-surface-alt) !important;
    opacity: 1 !important;
}


/* =====================================================================
   11.  SUBPAGES (About / FAQ / Contact / Shop / Brand / Product)
   ===================================================================== */

.ml-page-hero,
.ml-page-hero__bg {
    background: var(--zv-surface-tint) !important;
    background-image: none !important;
    color: var(--zv-ink) !important;
}
.ml-page-hero h1,
.ml-page-hero p {
    color: var(--zv-ink) !important;
}

.ml-page-cta,
.ml-page-cta__bg {
    background: var(--zv-surface-alt) !important;
    background-image: none !important;
}
.ml-page-cta h2,
.ml-page-cta p {
    color: var(--zv-ink) !important;
}

.ml-about-page .ml-about-story__text,
.ml-about-page .ml-about-value {
    background: var(--zv-surface) !important;
    border: 1px solid var(--zv-border) !important;
    box-shadow: none !important;
}
.ml-about-page .ml-about-story__image img {
    border-radius: 10px !important;
    border: 1px solid var(--zv-border) !important;
}

body.mylens-faq .ml-faq-tab {
    background: var(--zv-surface) !important;
    border: 1px solid var(--zv-border) !important;
    color: var(--zv-ink) !important;
}
body.mylens-faq .ml-faq-tab.active,
body.mylens-faq .ml-faq-tab:hover {
    background: var(--zv-ink) !important;
    color: #FFFFFF !important;
    border-color: var(--zv-ink) !important;
}
body.mylens-faq .ml-faq-item {
    background: var(--zv-surface) !important;
    border: 1px solid var(--zv-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

body.mylens-contact .ml-contact-card {
    background: var(--zv-surface) !important;
    border: 1px solid var(--zv-border) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}
body.mylens-contact .ml-contact-card:hover {
    border-color: var(--zv-border-strong) !important;
    box-shadow: var(--zv-shadow-2) !important;
}


/* =====================================================================
   12.  RESPONSIVE  —  mobile polish
   ===================================================================== */

@media (max-width: 768px) {
    .ml-hero {
        padding: 56px 0 56px !important;
        text-align: left !important;
    }
    .ml-hero__title {
        font-size: clamp(1.875rem, 7.6vw, 2.5rem) !important;
    }
    .ml-hero__cta {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .ml-hero__cta .ml-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    .ml-hero__trust {
        gap: 12px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .ml-product-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 12px !important;
    }
    .ml-product-card__title { font-size: 14px !important; }
    .ml-product-card__price { font-size: 15px !important; }

    /* Wishlist icon always visible on touch — opacity hover doesn't help */
    .ml-product-card__actions { opacity: 1 !important; }
    .ml-product-card__quickview { display: none !important; }
}

@media (max-width: 480px) {
    .ml-product-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =====================================================================
   13.  ACCESSIBILITY & MOTION
   ===================================================================== */

*:focus-visible {
    outline: 2px solid var(--zv-accent) !important;
    outline-offset: 3px !important;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0ms !important;
        transition-duration: 0ms !important;
    }
}


/* =====================================================================
   14.  HERO RIGHT — premium showcase (v4: compact & restrained)
   ---------------------------------------------------------------------
   Lessons from the v3 screenshot:
     - 4:5 aspect at 30vw was ~540px tall and ate the hero. Switched to
       1:1 at clamp(320,26vw,380) → max 380×380 — fits any 1024+ viewport.
     - 1:1 also matches the source photo's native aspect, so the model
       displays UNCROPPED instead of being centered-and-zoomed onto the
       face. The full composition (face + frames + shoulders) reads.
     - Dropped the rotated clay backdrop card — at this scale it sat
       fully behind the main card, invisible.
     - Moved the rating chip OUT of the headline column (where it was
       dangling between text and image) UP to the top-right of the
       hero, anchored to the `.ml-hero__float--2` div with a dark ink
       chip + star icon, mirroring mylens.es's exact pattern.

   Final layer stack, back to front:
     z=0   .ml-hero::before          warm atmospheric halo
     z=2   .ml-hero__float--1        real model photo (square card)
     z=3   ::before on (1)           frosted "Best seller" pill (top-left)
     z=3   ::after on (1)            brand caption (bottom)
     z=4   .ml-hero__float--2        ink rating chip (top-right of hero)
     z=4   ::before on (2)           rating chip text via pseudo-element

   Strict constraints (carried over from the original redesign brief):
     - CSS only. No DOM mutation, no PHP, no JS, no new assets uploaded.
     - All imagery is hot-linked from the SAME origin (CDN-cached).
     - No looping animations — depth comes from layering, not motion.
     - Hidden on tablet & phone (<1024px) — the hero stacks calmly there.
     - Honors prefers-reduced-motion via the existing rule in section 13.
   ===================================================================== */

.ml-hero {
    position: relative !important;
}

@media (min-width: 1024px) {

    /* Reserve the left half for headline + CTAs so the showcase has
       clear breathing room on wide viewports. */
    body .ml-hero .ml-hero__content {
        max-width: min(560px, 52%) !important;
        position: relative !important;
    }

    /* ---- Layer 0: warm atmospheric halo ---------------------------- */
    body .ml-hero::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        right: -2% !important;
        transform: translateY(-50%) !important;
        width: min(560px, 46vw) !important;
        height: min(560px, 46vw) !important;
        border-radius: 50% !important;
        background: radial-gradient(circle at 50% 50%,
            rgba(155, 126, 95, 0.22) 0%,
            rgba(155, 126, 95, 0.08) 38%,
            transparent 70%) !important;
        filter: blur(36px) !important;
        z-index: 0 !important;
        pointer-events: none !important;
        animation: none !important;
    }

    /* ---- Layer 1: showcase card — square, real model photo --------
       1:1 aspect matches the 768×768 source so the image displays
       UNCROPPED. The dark gradient at the bottom 35% is for caption
       legibility against the model's blazer.

       NOTE: the parent Divi child theme sets an explicit
       `height: min(640px, 90vw)` on this element (not !important).
       Browsers ignore `aspect-ratio` when BOTH width and height are
       set, so we must zero out the inherited height — otherwise the
       card renders at width × 640px and crops the photo to face only.
       Same pattern for filter/border which the theme also sets. */
    body .ml-hero .ml-hero__float--1 {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        right: clamp(40px, 6vw, 96px) !important;
        transform: translateY(-50%) !important;
        width: clamp(320px, 26vw, 380px) !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        border: none !important;
        filter: none !important;
        background-color: var(--zv-surface-alt) !important;
        background-image:
            linear-gradient(180deg,
                rgba(0,0,0,0) 65%,
                rgba(20,30,50,0.55) 100%),
            url('https://www.zadveoci.com/wp-content/uploads/2025/10/Calvin-Klein-CK21304-Model2-1-768x768.jpg') !important;
        background-repeat: no-repeat, no-repeat !important;
        background-position: center, center !important;
        background-size: 100% 100%, cover !important;
        border-radius: 16px !important;
        box-shadow:
            0 1px 2px rgba(20,30,50,0.06),
            0 30px 60px -18px rgba(20,30,50,0.26) !important;
        overflow: hidden !important;
        z-index: 2 !important;
        pointer-events: auto !important;
        transition: transform 280ms cubic-bezier(.2,.8,.2,1),
                    box-shadow 280ms cubic-bezier(.2,.8,.2,1) !important;
        will-change: transform !important;
    }

    /* Premium hover: subtle scale (1.03) + lift + deeper shadow.
       Translate-Y must come BEFORE scale so the centered position is
       preserved while the scale grows from the card centre. */
    body .ml-hero .ml-hero__float--1:hover {
        transform: translateY(calc(-50% - 4px)) scale(1.03) !important;
        box-shadow:
            0 1px 2px rgba(20,30,50,0.06),
            0 44px 90px -22px rgba(20,30,50,0.34) !important;
    }

    /* "Best seller" frosted pill (top-left of card). */
    body .ml-hero .ml-hero__float--1::before {
        content: "\2605  Best seller";
        position: absolute;
        top: 14px;
        left: 14px;
        padding: 6px 12px;
        font-family: var(--zv-font-ui);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--zv-ink);
        background: rgba(255,255,255,0.92);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(20,30,50,0.10);
        z-index: 3;
    }

    /* Brand caption — sits over the bottom gradient. */
    body .ml-hero .ml-hero__float--1::after {
        content: "Calvin Klein \00B7  Modern Precision";
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 14px;
        color: #FFFFFF;
        font-family: var(--zv-font-ui);
        font-size: 13.5px;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-shadow: 0 1px 8px rgba(0,0,0,0.45);
        z-index: 3;
    }

    /* ---- Layer 2: rating chip floating top-right of hero -----------
       Repurposes `.ml-hero__float--2` as the chip itself: a dark ink
       capsule with a small SVG star icon in warm cream + the rating
       text rendered via `::before`. Mirrors mylens.es's exact UX
       pattern but in our brand colors and with our copy.

       NOTE: theme sets `height: min(480px, 78vw)` and `filter: blur(10px)`
       on this element by default — both must be overridden so the chip
       renders at its natural pill size and isn't blurred. */
    body .ml-hero .ml-hero__float--2 {
        display: inline-flex !important;
        align-items: center !important;
        position: absolute !important;
        top: clamp(28px, 5vw, 56px) !important;
        right: clamp(150px, 18vw, 280px) !important;
        width: auto !important;
        height: auto !important;
        filter: none !important;
        padding: 10px 18px 10px 38px !important;
        background-color: rgba(26, 31, 44, 0.92) !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F4C9B8' stroke='%23F4D4C4' stroke-width='1.2' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>") !important;
        background-repeat: no-repeat !important;
        background-position: 14px center !important;
        background-size: 14px 14px !important;
        -webkit-backdrop-filter: blur(8px) !important;
        backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        border-radius: 999px !important;
        box-shadow:
            0 1px 2px rgba(20,30,50,0.06),
            0 12px 28px -8px rgba(20,30,50,0.30) !important;
        transform: none !important;
        opacity: 1 !important;
        z-index: 4 !important;
        pointer-events: none !important;
        animation: none !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    /* Rating chip text content. */
    body .ml-hero .ml-hero__float--2::before {
        content: "4.9  \00B7  12,000+ happy customers";
        display: inline-block;
        color: #FFFFFF;
        font-family: var(--zv-font-ui);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.02em;
    }
}


/* =====================================================================
   15.  HOMEPAGE TOGGLE TABS  —  ".ml-tabs-nav .ml-tab"
   ---------------------------------------------------------------------
   The original style.css paints the active tab as a clay-gradient pill
   with a chunky 24px clay-glow shadow — reads as legacy/template-y.
   Replace with the same ink-on-paper outline-pill language used by
   .ml-view-all and the rest of the redesign's button stack:
     - inactive  : warm surface, hairline border, ink text
     - hover     : warm-paper fill, deeper ink border
     - active    : solid ink fill, white text, no glow shadow
   ===================================================================== */

.ml-tabs-nav {
    gap: 10px !important;
    justify-content: center !important;
    margin: 8px 0 28px !important;
}

.ml-tabs-nav .ml-tab {
    font-family: var(--zv-font-ui) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    padding: 11px 22px !important;
    border-radius: 999px !important;
    border: 1px solid var(--zv-border-strong) !important;
    background: var(--zv-surface) !important;
    background-image: none !important;
    color: var(--zv-ink) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition:
        background var(--zv-t-base),
        border-color var(--zv-t-base),
        color var(--zv-t-base),
        box-shadow var(--zv-t-base),
        transform var(--zv-t-base) !important;
}

.ml-tabs-nav .ml-tab:hover {
    border-color: var(--zv-ink) !important;
    background: var(--zv-surface-alt) !important;
    color: var(--zv-ink) !important;
}

.ml-tabs-nav .ml-tab.ml-tab--active,
.ml-tabs-nav .ml-tab[aria-selected="true"] {
    background: var(--zv-ink) !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border-color: var(--zv-ink) !important;
    box-shadow: 0 1px 2px rgba(20,30,50,0.06) !important;
}

.ml-tabs-nav .ml-tab.ml-tab--active:hover,
.ml-tabs-nav .ml-tab[aria-selected="true"]:hover {
    background: #000 !important;
    border-color: #000 !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 18px -4px rgba(20,30,50,0.20) !important;
    transform: translateY(-1px) !important;
}

/* Mobile: a touch tighter so two pills fit comfortably side-by-side. */
@media (max-width: 480px) {
    .ml-tabs-nav .ml-tab {
        font-size: 12.5px !important;
        padding: 10px 18px !important;
    }
}

/* End of zadveoci-redesign.css */