/*!
 * MyLens — Minimal Override Layer (v3.0.0)
 * ----------------------------------------------------------------------
 * Goal: shift the site away from the "AI / synthetic" aesthetic toward a
 * calm, human, editorial feel without changing markup or breaking
 * WooCommerce. Loaded after every other site stylesheet, so its tokens
 * cascade into the existing component styles.
 *
 * Design principles
 *   • Limit palette to ink + warm neutrals + ONE accent.
 *   • Kill glassmorphism, gradient-shifting text, animated dots, noise.
 *   • Replace heavy shadows with subtle 1-px hairlines.
 *   • Single transition curve, single duration (180 ms).
 *   • Body type: Inter only. Display type: Playfair, restrained.
 * ----------------------------------------------------------------------
 */

/* ============================================================
   1.  TOKEN OVERRIDES
   ============================================================ */
:root {
    /* Ink + warm neutrals */
    --ml-primary:        #1d1d1d;
    --ml-primary-light:  #2e2e2e;
    --ml-primary-dark:   #0a0a0a;
    --ml-primary-rgb:    29 29 29;

    /* One restrained accent — muted terracotta */
    --ml-accent:         #b9533d;
    --ml-accent-hover:   #9a4231;
    --ml-accent-light:   #ead7cf;
    --ml-accent-rgb:     185 83 61;

    /* Warm paper surfaces */
    --ml-surface:        #faf7f2;
    --ml-surface-alt:    #f1ece3;
    --ml-card:           #ffffff;
    --ml-card-hover:     #fcfaf6;
    --ml-white:          #ffffff;

    /* Text scale */
    --ml-text:           #1a1a1a;
    --ml-text-light:     #5a5a5a;
    --ml-text-muted:     #8a8580;
    --ml-text-inverse:   #faf7f2;

    /* Hairline borders */
    --ml-border:         rgba(26, 26, 26, 0.10);
    --ml-border-strong:  rgba(26, 26, 26, 0.18);

    /* Semantic — desaturated */
    --ml-success:        #2f6b3a;
    --ml-danger:         #a13a2c;
    --ml-warning:        #a26a17;
    --ml-info:           #2a5b8a;
    --ml-sale:           #a13a2c;

    /* Type — drop DM Sans, keep two families */
    --ml-font-heading:   'Playfair Display', Georgia, 'Times New Roman', serif;
    --ml-font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --ml-font-accent:    'Inter', sans-serif;

    /* Radii — restrained */
    --ml-radius-sm:      4px;
    --ml-radius-md:      6px;
    --ml-radius-lg:      10px;
    --ml-radius-xl:      14px;
    --ml-radius-full:    9999px;

    /* Shadows — almost imperceptible */
    --ml-shadow-xs:      0 1px 2px rgba(20, 20, 20, 0.04);
    --ml-shadow-sm:      0 1px 3px rgba(20, 20, 20, 0.06), 0 1px 2px rgba(20, 20, 20, 0.04);
    --ml-shadow-md:      0 4px 12px rgba(20, 20, 20, 0.08);
    --ml-shadow-lg:      0 8px 24px rgba(20, 20, 20, 0.10);

    /* Motion */
    --ml-ease:           cubic-bezier(0.4, 0, 0.2, 1);
    --ml-dur:            180ms;
}

/* ============================================================
   2.  GLOBAL TYPE & RESET (light touch)
   ============================================================ */
body,
body.mylens-theme {
    background: var(--ml-surface);
    color: var(--ml-text);
    font-family: var(--ml-font-body);
    font-size: 16px;
    line-height: 1.65;
    font-feature-settings: 'cv11', 'ss03', 'cv02';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mylens-theme h1,
.mylens-theme h2,
.mylens-theme h3,
.mylens-theme h4,
.mylens-theme .ml-section-header h2,
.mylens-theme .ml-hero__title,
.mylens-theme .ml-product-summary__title,
.mylens-theme .ml-product-card__title {
    color: var(--ml-text);
    letter-spacing: -0.01em;
    line-height: 1.18;
    text-wrap: balance;
}

/* Display headings get Playfair, body headings stay Inter for calm */
.mylens-theme .ml-hero__title,
.mylens-theme .ml-section-header h2,
.mylens-theme .ml-promo-banner h2,
.mylens-theme .ml-tryon__content h2,
.mylens-theme .ml-product-summary__title {
    font-family: var(--ml-font-heading);
    font-weight: 600;
}

a { transition: color var(--ml-dur) var(--ml-ease); }

::selection { background: var(--ml-accent-light); color: var(--ml-text); }

/* Honour reduced-motion everywhere */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   3.  CONTAINER / SECTION GEOMETRY
   ============================================================ */
.ml-container {
    max-width: 1240px;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.ml-section {
    padding-block: clamp(64px, 8vw, 110px);
    background: var(--ml-surface);
}

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

.ml-section.ml-section-dark {
    background: var(--ml-primary);
    color: var(--ml-text-inverse);
}
.ml-section.ml-section-dark h2,
.ml-section.ml-section-dark h3,
.ml-section.ml-section-dark p,
.ml-section.ml-section-dark strong,
.ml-section.ml-section-dark span { color: inherit; }

.ml-section-header {
    margin-bottom: clamp(2rem, 4vw, 3rem);
    text-align: left;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 1.25rem;
}
.ml-section-header h2 {
    grid-column: 1 / -1;
    font-size: clamp(1.625rem, 3.2vw, 2.25rem);
    margin: 0 0 0.25rem;
}
/* Accent bar under section titles — left-align (never `margin: auto`) */
.mylens-theme .ml-section-header h2::after {
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-top: clamp(12px, 1.5vw, 16px) !important;
    margin-bottom: 0 !important;
}
.ml-section-header p {
    grid-column: 1;
    color: var(--ml-text-light);
    font-size: 1rem;
    margin: 0;
    max-width: 56ch;
}
.ml-section-header .ml-view-all {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    color: var(--ml-text);
    font-weight: 500;
    font-size: 0.9375rem;
    text-decoration: none;
    border-bottom: 1px solid var(--ml-border);
    padding-bottom: 2px;
    transition: border-color var(--ml-dur) var(--ml-ease), color var(--ml-dur) var(--ml-ease);
}
.ml-section-header .ml-view-all:hover {
    color: var(--ml-accent);
    border-bottom-color: var(--ml-accent);
}
@media (max-width: 600px) {
    .ml-section-header { grid-template-columns: 1fr; }
    .ml-section-header .ml-view-all { grid-column: 1; grid-row: auto; }
}

/* ============================================================
   4.  HERO — calm, editorial, no gradient theatrics
   ============================================================ */
.mylens-homepage .ml-hero {
    background: var(--ml-surface);
    min-height: clamp(540px, 70vh, 760px);
    border-bottom: 1px solid var(--ml-border);
    overflow: hidden;
    position: relative;
}

/* Replace dark forest gradient + noise + radial glows with a quiet warm wash */
.mylens-homepage .ml-hero__bg { z-index: 0; }
.mylens-homepage .ml-hero__gradient {
    background:
        radial-gradient(ellipse 70% 50% at 100% 100%, rgba(185, 83, 61, 0.06), transparent 70%),
        linear-gradient(180deg, var(--ml-surface) 0%, var(--ml-surface-alt) 100%);
    animation: none !important;
}
.mylens-homepage .ml-hero__bg::after { display: none !important; }

.mylens-homepage .ml-hero__content {
    max-width: min(640px, 92vw);
    padding-block: clamp(3rem, 8vw, 5rem);
}

/* Tag — flat eyebrow, no glassmorphism, no pulsing dot */
.mylens-homepage .ml-hero__tag {
    display: inline-flex;
    align-items: center;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border: 0;
    padding: 0;
    color: var(--ml-text-light);
    font-family: var(--ml-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    border-radius: 0;
}
.mylens-homepage .ml-hero__tag::before {
    width: 28px;
    height: 1px;
    border-radius: 0;
    background: var(--ml-accent);
    box-shadow: none;
    animation: none;
    margin-right: 4px;
}

/* Title — Playfair, no animated gradient text */
.mylens-homepage .ml-hero__title {
    font-family: var(--ml-font-heading);
    font-weight: 600;
    color: var(--ml-text);
    font-size: clamp(2.25rem, 5.5vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}
.mylens-homepage .ml-hero__title-accent {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: var(--ml-accent) !important;
    background-clip: initial !important;
    color: var(--ml-accent) !important;
    animation: none !important;
    font-style: italic;
    font-weight: 500;
}

.mylens-homepage .ml-hero__desc {
    color: var(--ml-text-light);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.6;
    max-width: 52ch;
    margin-bottom: 1.75rem;
}

.mylens-homepage .ml-hero__cta { gap: 0.75rem; flex-wrap: wrap; }

/* Trust row — quiet, no dark pill, just inline icons */
.mylens-homepage .ml-hero__trust {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ml-border);
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
}
.mylens-homepage .ml-hero__trust-item {
    color: var(--ml-text-light);
    font-size: 0.875rem;
    background: transparent;
    padding: 0;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.mylens-homepage .ml-hero__trust-item svg {
    color: var(--ml-text-light);
    stroke-width: 1.5;
    opacity: 0.85;
}

/* Hide decorative floating frame images — they read as "stock illustration" */
.mylens-homepage .ml-hero__float { display: none !important; }

/* ============================================================
   5.  BUTTONS — flat, single accent, calm hover
   ============================================================ */
.mylens-theme .ml-btn,
.mylens-theme .ml-btn-primary,
.mylens-theme .ml-btn-outline,
.mylens-theme .ml-btn-lg,
.mylens-theme .ml-product-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--ml-font-body);
    font-weight: 500;
    font-size: 0.9375rem;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    border-radius: var(--ml-radius-md);
    padding: 0.75rem 1.5rem;
    line-height: 1.2;
    transition:
        background-color var(--ml-dur) var(--ml-ease),
        color var(--ml-dur) var(--ml-ease),
        border-color var(--ml-dur) var(--ml-ease),
        transform var(--ml-dur) var(--ml-ease);
    box-shadow: none;
    border: 1px solid transparent;
    cursor: pointer;
}
.mylens-theme .ml-btn-lg {
    padding: 0.95rem 1.75rem;
    font-size: 1rem;
}

.mylens-theme .ml-btn-primary {
    background: var(--ml-text);
    color: var(--ml-text-inverse);
    border-color: var(--ml-text);
}
.mylens-theme .ml-btn-primary:hover,
.mylens-theme .ml-btn-primary:focus-visible {
    background: var(--ml-primary-light);
    border-color: var(--ml-primary-light);
    color: var(--ml-text-inverse);
    transform: none;
    box-shadow: var(--ml-shadow-sm);
}

.mylens-theme .ml-btn-outline {
    background: transparent;
    color: var(--ml-text);
    border-color: var(--ml-border-strong);
}
.mylens-theme .ml-btn-outline:hover,
.mylens-theme .ml-btn-outline:focus-visible {
    background: var(--ml-text);
    color: var(--ml-text-inverse);
    border-color: var(--ml-text);
}

/* Hero outline: homepage.css historically styled this for a *dark* hero
   (white on glass). Cream hero needs ink text + hairline border. */
.mylens-homepage-wrap .ml-hero .ml-btn-outline {
    background: transparent;
    color: var(--ml-text);
    border-color: var(--ml-border-strong);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    letter-spacing: 0;
}
.mylens-homepage-wrap .ml-hero .ml-btn-outline:hover,
.mylens-homepage-wrap .ml-hero .ml-btn-outline:focus-visible {
    background: var(--ml-text);
    color: var(--ml-text-inverse);
    border-color: var(--ml-text);
}

/* Dark sections invert outline button */
.ml-section-dark .ml-btn-outline {
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
}
.ml-section-dark .ml-btn-outline:hover {
    background: #fff;
    color: var(--ml-text);
    border-color: #fff;
}

/* ============================================================
   6.  PRODUCT CARD — clean, image-led, calm hover
   ============================================================ */
.mylens-theme .ml-product-card {
    background: var(--ml-card);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius-lg);
    overflow: hidden;
    transition: border-color var(--ml-dur) var(--ml-ease),
                transform var(--ml-dur) var(--ml-ease);
    box-shadow: none;
}
.mylens-theme .ml-product-card:hover {
    border-color: var(--ml-border-strong);
    transform: translateY(-2px);
    box-shadow: var(--ml-shadow-sm);
}

.mylens-theme .ml-product-card__image {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--ml-surface-alt);
    overflow: hidden;
}
.mylens-theme .ml-product-card__media,
.mylens-theme .ml-product-card__media img {
    width: 100%;
    height: 100%;
    display: block;
}
.mylens-theme .ml-product-card__img {
    object-fit: cover;
    transition: transform 400ms var(--ml-ease), opacity var(--ml-dur) var(--ml-ease);
}
.mylens-theme .ml-product-card__media:hover .ml-product-card__img--primary {
    transform: scale(1.04);
}

/* Secondary image swap on hover */
.mylens-theme .ml-product-card--dual-img .ml-product-card__img--alt {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.mylens-theme .ml-product-card--dual-img .ml-product-card__media:hover
    .ml-product-card__img--primary { opacity: 0; }
.mylens-theme .ml-product-card--dual-img .ml-product-card__media:hover
    .ml-product-card__img--alt     { opacity: 1; }

/* Badge — small, monochrome, pill */
.mylens-theme .ml-product-card__badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}
.mylens-theme .ml-product-card__badge {
    background: rgba(255, 255, 255, 0.96);
    color: var(--ml-text);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    text-transform: uppercase;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
.mylens-theme .ml-product-card__badge--bestseller,
.mylens-theme .ml-product-card__badge--hot,
.mylens-theme .ml-product-card__badge--trending {
    background: var(--ml-text);
    color: var(--ml-text-inverse);
    border-color: var(--ml-text);
}

/* Quickview — minimal, hidden until hover.
   The wrapper inherits a dark gradient overlay from homepage.css /
   shop.css; we clear it here so only the small white pill remains. */
.mylens-theme .ml-product-card__quickview,
.mylens-homepage-wrap .ml-product-card__quickview,
.mylens-shop .ml-product-card__quickview {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translate(-50%, 6px);
    opacity: 0;
    transition: opacity var(--ml-dur) var(--ml-ease), transform var(--ml-dur) var(--ml-ease);
    pointer-events: none;
    z-index: 3;
    width: max-content !important;
    max-width: calc(100% - 24px);
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Do NOT use `inset: auto` — it resets `left` and breaks translate(-50%) centering. */
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: 0 !important;
}
.mylens-theme .ml-product-card__quickview::before,
.mylens-theme .ml-product-card__quickview::after,
.mylens-homepage-wrap .ml-product-card__quickview::before,
.mylens-homepage-wrap .ml-product-card__quickview::after,
.mylens-shop .ml-product-card__quickview::before,
.mylens-shop .ml-product-card__quickview::after {
    display: none !important;
    content: none !important;
}
.mylens-theme .ml-product-card__quickview a {
    display: inline-block;
    background: rgba(255, 255, 255, 0.96);
    color: var(--ml-text);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius-full);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}
.mylens-theme .ml-product-card:hover .ml-product-card__quickview {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}
@media (hover: none) {
    .mylens-theme .ml-product-card__quickview { display: none; }
}

/* Info block */
.mylens-theme .ml-product-card__info {
    padding: 1rem 1.125rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.mylens-theme .ml-product-card__brand {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ml-text-muted);
}
.mylens-theme .ml-product-card__title {
    font-family: var(--ml-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
    margin: 0;
    color: var(--ml-text);
}
.mylens-theme .ml-product-card__title a {
    color: inherit;
    text-decoration: none;
}
.mylens-theme .ml-product-card__title a:hover { color: var(--ml-accent); }
.mylens-theme .ml-product-card__price {
    color: var(--ml-text);
    font-weight: 600;
    font-size: 1rem;
    margin-top: 0.125rem;
}
.mylens-theme .ml-product-card__price del { color: var(--ml-text-muted); margin-right: 0.4rem; font-weight: 400; }
.mylens-theme .ml-product-card__price ins { text-decoration: none; color: var(--ml-accent); }

.mylens-theme .ml-product-card__cta {
    margin-top: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    color: var(--ml-text);
    border: 1px solid var(--ml-border-strong);
    font-size: 0.875rem;
    font-weight: 500;
}
.mylens-theme .ml-product-card__cta:hover {
    background: var(--ml-text);
    color: var(--ml-text-inverse);
    border-color: var(--ml-text);
}

/* ============================================================
   7.  PRODUCT GRID
   ============================================================ */
.mylens-theme .ml-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
}
.mylens-theme .ml-product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
    .mylens-theme .ml-product-grid,
    .mylens-theme .ml-product-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .mylens-theme .ml-product-grid,
    .mylens-theme .ml-product-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .mylens-theme .ml-product-grid,
    .mylens-theme .ml-product-grid--4 { grid-template-columns: 1fr; }
}

/* ============================================================
   8.  TRY-ON / FEATURE PROMO BLOCK
   ----------------------------------------------------------------
   The section markup is `<section class="ml-section ml-section-dark
   ml-tryon">` — i.e. it intentionally carries the dark variant.
   We keep the rich dark background (it pairs beautifully with the
   real product photography) and ensure every text/border/icon
   colour is readable on top of it.
   ============================================================ */
.mylens-theme .ml-tryon,
.mylens-theme .ml-section.ml-section-dark.ml-tryon {
    background: #161618 !important;
    color: #f5f1ea !important;
}

.mylens-theme .ml-tryon h2,
.mylens-theme .ml-tryon__content h2 {
    font-family: var(--ml-font-heading) !important;
    font-weight: 600 !important;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem) !important;
    color: #f5f1ea !important;
    letter-spacing: -0.01em !important;
    line-height: 1.15 !important;
    margin: 0 0 0.875rem !important;
}

.mylens-theme .ml-tryon p,
.mylens-theme .ml-tryon__content p {
    color: rgba(245, 241, 234, 0.78) !important;
    font-size: 1.0625rem !important;
    line-height: 1.65 !important;
}

.mylens-theme .ml-tryon__label {
    background: transparent !important;
    color: rgba(245, 241, 234, 0.65) !important;
    border: 0 !important;
    padding: 0 !important;
    font-family: var(--ml-font-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    margin-bottom: 0.875rem !important;
    display: inline-block !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.mylens-theme .ml-tryon__label::before {
    content: '' !important;
    display: inline-block !important;
    width: 24px !important;
    height: 1px !important;
    background: var(--ml-accent) !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none !important;
}

.mylens-theme .ml-tryon__features {
    margin-top: 1.5rem !important;
}
.mylens-theme .ml-tryon__feature {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: start !important;
    gap: 0.875rem !important;
    padding: 0.875rem 0 !important;
    border-bottom: 1px solid rgba(245, 241, 234, 0.10) !important;
}
.mylens-theme .ml-tryon__feature:last-child { border-bottom: 0 !important; }

.mylens-theme .ml-tryon__feature-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--ml-radius-md) !important;
    background: rgba(245, 241, 234, 0.06) !important;
    border: 1px solid rgba(245, 241, 234, 0.14) !important;
    display: grid !important;
    place-items: center !important;
    box-shadow: none !important;
    color: var(--ml-accent) !important;
}
.mylens-theme .ml-tryon__feature-icon svg {
    stroke: var(--ml-accent) !important;
    stroke-width: 1.5 !important;
    color: var(--ml-accent) !important;
}

.mylens-theme .ml-tryon__feature strong {
    font-weight: 600 !important;
    color: #f5f1ea !important;
    display: block !important;
    margin-bottom: 2px !important;
    font-size: 0.9375rem !important;
}
.mylens-theme .ml-tryon__feature span {
    color: rgba(245, 241, 234, 0.7) !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

/* Buttons inside the dark section — invert primary, light outline */
.mylens-theme .ml-tryon .ml-btn-primary {
    background: #f5f1ea !important;
    color: #161618 !important;
    border-color: #f5f1ea !important;
}
.mylens-theme .ml-tryon .ml-btn-primary:hover {
    background: var(--ml-accent) !important;
    color: #fff !important;
    border-color: var(--ml-accent) !important;
}
.mylens-theme .ml-tryon .ml-btn-outline {
    background: transparent !important;
    color: #f5f1ea !important;
    border-color: rgba(245, 241, 234, 0.30) !important;
}
.mylens-theme .ml-tryon .ml-btn-outline:hover {
    background: #f5f1ea !important;
    color: #161618 !important;
    border-color: #f5f1ea !important;
}

/* Hide glassmorphic floating "stat" cards — they read as AI-stock */
.mylens-theme .ml-tryon__float-card,
.mylens-theme .ml-tryon__float-card--top,
.mylens-theme .ml-tryon__float-card--bottom { display: none !important; }

/* Frame the lifestyle photo with a soft hairline so it sits on the dark bg */
.mylens-theme .ml-tryon__image-wrap {
    border-radius: var(--ml-radius-xl) !important;
    overflow: hidden !important;
    background: rgba(245, 241, 234, 0.04) !important;
    border: 1px solid rgba(245, 241, 234, 0.10) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
}
.mylens-theme .ml-tryon__image-wrap img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    filter: none;
}

/* ============================================================
   9.  PROMO BANNER — quiet, not loud
   ============================================================ */
.mylens-theme .ml-promo-banner {
    background: var(--ml-text);
    color: var(--ml-text-inverse);
    padding-block: clamp(3rem, 5vw, 4.5rem);
    border: 0;
    position: relative;
}
.mylens-theme .ml-promo-banner__bg { display: none !important; }
.mylens-theme .ml-promo-banner__content {
    text-align: center;
    max-width: 620px;
    margin-inline: auto;
}
.mylens-theme .ml-promo-banner__badge {
    display: inline-block;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.24);
    padding: 4px 12px;
    border-radius: var(--ml-radius-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.mylens-theme .ml-promo-banner h2 {
    font-family: var(--ml-font-heading);
    font-weight: 600;
    font-size: clamp(1.625rem, 3.5vw, 2.5rem);
    color: #fff;
    margin: 0 0 0.75rem;
    letter-spacing: -0.01em;
}
.mylens-theme .ml-promo-banner p {
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 1.75rem;
    font-size: 1rem;
}
.mylens-theme .ml-promo-banner .ml-btn-primary {
    background: #fff;
    color: var(--ml-text);
    border-color: #fff;
}
.mylens-theme .ml-promo-banner .ml-btn-primary:hover {
    background: var(--ml-accent);
    border-color: var(--ml-accent);
    color: #fff;
}

/* ============================================================
   10. STEPS / HOW IT WORKS
   ============================================================ */
.mylens-theme .ml-steps {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: start;
    gap: clamp(1rem, 2vw, 2rem);
}
.mylens-theme .ml-step {
    text-align: left;
    padding: 1.5rem;
    background: var(--ml-card);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius-lg);
    box-shadow: none;
}
.mylens-theme .ml-step__number {
    font-family: var(--ml-font-body);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    color: var(--ml-text-muted);
    margin-bottom: 0.875rem;
}
.mylens-theme .ml-step__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 1rem;
    background: transparent;
    display: grid;
    place-items: center;
    border-radius: 0;
}
.mylens-theme .ml-step__icon svg { stroke: var(--ml-accent); stroke-width: 1.4; }
.mylens-theme .ml-step h3 {
    font-family: var(--ml-font-body);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--ml-text);
    margin: 0 0 0.5rem;
}
.mylens-theme .ml-step p {
    color: var(--ml-text-light);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}
.mylens-theme .ml-step__connector svg { stroke: var(--ml-border-strong); opacity: 0.6; }
@media (max-width: 800px) {
    .mylens-theme .ml-steps { grid-template-columns: 1fr; }
    .mylens-theme .ml-step__connector { display: none; }
}

/* ============================================================
   11. TESTIMONIALS — quieter cards, no shadows
   ============================================================ */
.mylens-theme .ml-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
}
@media (max-width: 880px) { .mylens-theme .ml-testimonials__grid { grid-template-columns: 1fr; } }

.mylens-theme .ml-testimonial {
    background: var(--ml-card);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius-lg);
    padding: 1.75rem;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.mylens-theme .ml-testimonial__stars svg { fill: var(--ml-accent); stroke: var(--ml-accent); }
.mylens-theme .ml-testimonial blockquote {
    font-family: var(--ml-font-heading);
    font-style: italic;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--ml-text);
    margin: 0;
    font-weight: 400;
}
.mylens-theme .ml-testimonial__author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--ml-border);
}
.mylens-theme .ml-testimonial__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ml-surface-alt);
    color: var(--ml-text);
    font-weight: 600;
    font-size: 0.875rem;
    display: grid;
    place-items: center;
}
.mylens-theme .ml-testimonial__author strong { display: block; font-size: 0.9375rem; font-weight: 600; }
.mylens-theme .ml-testimonial__author span { font-size: 0.8125rem; color: var(--ml-text-muted); }

/* ============================================================
   12. SHOP-BY-BRAND
   ============================================================ */
.mylens-theme .ml-brands__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 760px) { .mylens-theme .ml-brands__grid { grid-template-columns: repeat(2, 1fr); } }
.mylens-theme .ml-brand-card {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    background: var(--ml-card);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius-md);
    text-decoration: none;
    transition: border-color var(--ml-dur) var(--ml-ease), background var(--ml-dur) var(--ml-ease);
}
.mylens-theme .ml-brand-card:hover {
    border-color: var(--ml-text);
    background: var(--ml-card-hover);
}
.mylens-theme .ml-brand-card__name {
    font-family: var(--ml-font-heading);
    font-weight: 500;
    font-style: italic;
    font-size: 1.125rem;
    color: var(--ml-text);
    letter-spacing: -0.01em;
}

/* ============================================================
   13. SEO BLOCK
   ============================================================ */
.mylens-theme .ml-seo-block {
    padding-block: clamp(2.5rem, 5vw, 4rem);
    background: var(--ml-surface);
    border-top: 1px solid var(--ml-border);
}
.mylens-theme .ml-seo-block p {
    max-width: 72ch;
    margin: 0 auto;
    color: var(--ml-text-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
    text-align: center;
}

/* ============================================================
   14. SHOP ARCHIVE
   ============================================================ */

/* --- Shop / category / brand hero — dark by design, force readable text --- */
.mylens-theme .ml-page-hero,
.mylens-shop .ml-page-hero {
    background: #161618 !important;
    color: #f5f1ea !important;
    padding-block: clamp(3rem, 6vw, 5rem) !important;
    border-bottom: 1px solid rgba(245, 241, 234, 0.06) !important;
    position: relative;
}
.mylens-theme .ml-page-hero__bg,
.mylens-shop .ml-page-hero__bg {
    background: linear-gradient(180deg, rgba(245, 241, 234, 0.02), transparent) !important;
    opacity: 0.6 !important;
}

.mylens-theme .ml-page-hero h1,
.mylens-shop .ml-page-hero h1 {
    font-family: var(--ml-font-heading) !important;
    font-weight: 600 !important;
    font-size: clamp(2rem, 4.5vw, 3rem) !important;
    color: #f5f1ea !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
    margin: 0.5rem 0 0.875rem !important;
    text-align: center;
}
.mylens-theme .ml-page-hero h1 .ml-text-accent,
.mylens-shop .ml-page-hero h1 .ml-text-accent {
    color: var(--ml-accent) !important;
    background: none !important;
    -webkit-text-fill-color: var(--ml-accent) !important;
    font-style: italic;
    font-weight: 500;
}

.mylens-theme .ml-page-hero__sub,
.mylens-shop .ml-page-hero__sub {
    color: rgba(245, 241, 234, 0.72) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    max-width: 56ch;
    margin: 0 auto !important;
    text-align: center;
}

.mylens-theme .ml-page-hero__kicker,
.mylens-shop .ml-page-hero__kicker {
    color: rgba(245, 241, 234, 0.55) !important;
    font-family: var(--ml-font-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: block;
    text-align: center;
    margin-bottom: 0.5rem;
}

.mylens-theme .ml-page-hero .ml-breadcrumb,
.mylens-shop .ml-page-hero .ml-breadcrumb {
    color: rgba(245, 241, 234, 0.55) !important;
    font-size: 0.8125rem !important;
    text-align: center;
    justify-content: center;
    margin-bottom: 0.875rem !important;
}
.mylens-theme .ml-page-hero .ml-breadcrumb a,
.mylens-shop .ml-page-hero .ml-breadcrumb a {
    color: rgba(245, 241, 234, 0.65) !important;
    text-decoration: none;
}
.mylens-theme .ml-page-hero .ml-breadcrumb a:hover,
.mylens-shop .ml-page-hero .ml-breadcrumb a:hover {
    color: #f5f1ea !important;
}

.mylens-theme .ml-page-hero__back,
.mylens-shop .ml-page-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(245, 241, 234, 0.24) !important;
    border-radius: var(--ml-radius-full);
    color: #f5f1ea !important;
    background: transparent !important;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background var(--ml-dur) var(--ml-ease), border-color var(--ml-dur) var(--ml-ease) !important;
}
.mylens-theme .ml-page-hero__back:hover,
.mylens-shop .ml-page-hero__back:hover {
    background: #f5f1ea !important;
    color: #161618 !important;
    border-color: #f5f1ea !important;
}

/* --- Trust bar --- */
.mylens-shop .ml-shop-trust { background: var(--ml-card); border-bottom: 1px solid var(--ml-border); }
.mylens-shop .ml-shop-trust__item { color: var(--ml-text-light); font-size: 0.875rem; }

.mylens-shop .ml-filter-pill,
.mylens-shop .ml-filter-dropdown__toggle {
    background: var(--ml-card);
    border: 1px solid var(--ml-border);
    color: var(--ml-text);
    border-radius: var(--ml-radius-full);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: border-color var(--ml-dur) var(--ml-ease),
                background var(--ml-dur) var(--ml-ease);
    box-shadow: none;
}
.mylens-shop .ml-filter-pill:hover,
.mylens-shop .ml-filter-dropdown__toggle:hover { border-color: var(--ml-text); }
.mylens-shop .ml-filter-pill--active {
    background: var(--ml-text);
    color: var(--ml-text-inverse);
    border-color: var(--ml-text);
}
.mylens-shop .ml-filter-pill__count { color: inherit; opacity: 0.7; }
.mylens-shop .ml-filter-dropdown__panel {
    background: var(--ml-card);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius-md);
    box-shadow: var(--ml-shadow-md);
}

.mylens-shop .ml-shop-toolbar {
    border-bottom: 1px solid var(--ml-border);
    padding-block: 1rem;
}
.mylens-shop .ml-shop-count { color: var(--ml-text-light); font-size: 0.9375rem; }

.mylens-shop .ml-shop-pagination .page-numbers {
    border: 1px solid var(--ml-border);
    background: var(--ml-card);
    color: var(--ml-text);
    border-radius: var(--ml-radius-md);
    padding: 0.5rem 0.875rem;
    font-weight: 500;
    margin: 0 2px;
    transition: border-color var(--ml-dur) var(--ml-ease), background var(--ml-dur) var(--ml-ease);
}
.mylens-shop .ml-shop-pagination .page-numbers.current,
.mylens-shop .ml-shop-pagination .page-numbers:hover {
    background: var(--ml-text);
    color: var(--ml-text-inverse);
    border-color: var(--ml-text);
}

/* ============================================================
   15. SINGLE PRODUCT — Divi 5 WooCommerce modules
   ----------------------------------------------------------------
   The product page is rendered by Divi's WooCommerce modules
   (et_pb_wc_*) rather than the standard WC theme template, so
   we target both the Divi module classes AND the underlying
   WC class names that still exist when present.
   ============================================================ */
body.single-product { background: var(--ml-surface); }

/* --- Title (Divi's WC Title module ONLY) ---
   Scope strictly to .et_pb_wc_title — earlier we used the umbrella
   .et_pb_module .et_pb_module_header which over-styled every Divi
   blurb header (trust strip, feature cards, etc.) into a giant
   Playfair serif. */
body.single-product .et_pb_wc_title h1,
body.single-product .et_pb_wc_title h2,
body.single-product .et_pb_wc_title .et_pb_module_header,
body.single-product div.product .product_title,
body.single-product .woocommerce div.product .product_title {
    font-family: var(--ml-font-heading) !important;
    font-weight: 600 !important;
    font-size: clamp(1.75rem, 3.4vw, 2.5rem) !important;
    color: var(--ml-text) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 0.75rem !important;
}
/* Related-products / upsells section headings — also Playfair but smaller */
body.single-product .et_pb_wc_related_products > h2,
body.single-product .et_pb_wc_related_products .et_pb_module_header,
body.single-product .et_pb_wc_upsells > h2,
body.single-product .et_pb_wc_upsells .et_pb_module_header {
    font-family: var(--ml-font-heading) !important;
    font-weight: 600 !important;
    font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
    margin: 0 0 1.5rem !important;
}

/* --- Divi blurb cards (trust strip + feature cards) ---
   These were over-styled by the umbrella title selector. Restore
   them to a clean sans-serif card layout. Selector is scoped to
   blurbs that live INSIDE blurb modules so we don't bleed into
   anything else. */
body.single-product .et_pb_blurb .et_pb_module_header,
body.single-product .et_pb_blurb h1.et_pb_module_header,
body.single-product .et_pb_blurb h2.et_pb_module_header,
body.single-product .et_pb_blurb h3.et_pb_module_header,
body.single-product .et_pb_blurb h4.et_pb_module_header,
body.single-product .et_pb_blurb h5.et_pb_module_header,
body.single-product .et_pb_blurb h6.et_pb_module_header {
    font-family: var(--ml-font-body) !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    line-height: 1.3 !important;
    letter-spacing: 0.02em !important;
    color: var(--ml-text) !important;
    text-transform: none !important;
    margin: 0 0 0.375rem !important;
    text-align: left;
}
body.single-product .et_pb_blurb_description,
body.single-product .et_pb_blurb_description p {
    font-family: var(--ml-font-body) !important;
    font-size: 0.8125rem !important;
    line-height: 1.5 !important;
    color: var(--ml-text-light) !important;
    margin: 0 !important;
}
body.single-product .et_pb_blurb {
    background: var(--ml-card);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius-md);
    padding: 1.25rem 1.125rem !important;
    box-shadow: none !important;
}
body.single-product .et_pb_blurb .et_pb_main_blurb_image {
    margin-bottom: 0.625rem !important;
}
body.single-product .et_pb_blurb .et_pb_blurb_position_left .et_pb_blurb_container {
    padding-left: 1rem;
}
body.single-product .et_pb_blurb .et_pb_blurb_main_image,
body.single-product .et_pb_blurb .et_pb_image_wrap {
    color: var(--ml-accent) !important;
}
body.single-product .et_pb_blurb .et-pb-icon {
    color: var(--ml-accent) !important;
    font-size: 24px !important;
}

/* --- Price (Divi WC Price module + WC fallback) --- */
body.single-product .et_pb_wc_price .price,
body.single-product .et_pb_wc_price p.price,
body.single-product .woocommerce div.product p.price,
body.single-product .woocommerce div.product span.price {
    color: var(--ml-text) !important;
    font-family: var(--ml-font-body) !important;
    font-weight: 600 !important;
    font-size: clamp(1.25rem, 2.2vw, 1.625rem) !important;
}
body.single-product .et_pb_wc_price del,
body.single-product .woocommerce div.product p.price del,
body.single-product .woocommerce div.product span.price del {
    color: var(--ml-text-muted) !important;
    font-weight: 400 !important;
    margin-right: 0.5rem !important;
}
body.single-product .et_pb_wc_price ins,
body.single-product .woocommerce div.product p.price ins,
body.single-product .woocommerce div.product span.price ins {
    color: var(--ml-accent) !important;
    text-decoration: none !important;
}

/* --- Gallery (Divi WC Gallery + WC default) --- */
body.single-product .et_pb_wc_images .woocommerce-product-gallery__image img,
body.single-product .et_pb_wc_gallery .et-pb-gallery-image img,
body.single-product .woocommerce-product-gallery__image img {
    border-radius: var(--ml-radius-lg);
    background: var(--ml-card);
    border: 1px solid var(--ml-border);
}

/* --- Tabs (Divi WC Tabs + WC default) --- */
body.single-product .et_pb_wc_tabs ul.et_pb_tabs_controls li,
body.single-product .woocommerce ul.tabs.wc-tabs li,
body.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 0.75rem 0 !important;
    margin-right: 1.75rem !important;
    box-shadow: none !important;
    list-style: none !important;
}
body.single-product .et_pb_wc_tabs ul.et_pb_tabs_controls li a,
body.single-product .woocommerce ul.tabs.wc-tabs li a,
body.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: var(--ml-text-light) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    padding: 0 !important;
    font-family: var(--ml-font-body) !important;
}
body.single-product .et_pb_wc_tabs ul.et_pb_tabs_controls li.et_pb_tab_active,
body.single-product .woocommerce ul.tabs.wc-tabs li.active,
body.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: var(--ml-text) !important;
    background: transparent !important;
}
body.single-product .et_pb_wc_tabs ul.et_pb_tabs_controls li.et_pb_tab_active a,
body.single-product .woocommerce ul.tabs.wc-tabs li.active a,
body.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--ml-text) !important;
}
body.single-product .et_pb_wc_tabs .et_pb_tabs_controls {
    background: transparent !important;
    border-bottom: 1px solid var(--ml-border) !important;
}

/* --- Add-to-cart (Divi WC Add to Cart + WC default) --- */
body.single-product .et_pb_wc_add_to_cart form.cart .quantity .qty,
body.single-product .woocommerce div.product form.cart .quantity .qty {
    border: 1px solid var(--ml-border-strong) !important;
    border-radius: var(--ml-radius-md) !important;
    padding: 0.65rem 0.5rem !important;
    background: var(--ml-card) !important;
    width: 80px !important;
    text-align: center !important;
    font-weight: 500 !important;
}
body.single-product .et_pb_wc_add_to_cart form.cart .button,
body.single-product .et_pb_wc_add_to_cart .single_add_to_cart_button,
body.single-product .woocommerce div.product form.cart .button,
body.single-product .woocommerce div.product .single_add_to_cart_button,
body.single-product .single_add_to_cart_button {
    background: var(--ml-text) !important;
    color: var(--ml-text-inverse) !important;
    border: 1px solid var(--ml-text) !important;
    border-radius: var(--ml-radius-md) !important;
    font-weight: 500 !important;
    font-size: 0.9375rem !important;
    padding: 0.85rem 1.5rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transition: background var(--ml-dur) var(--ml-ease), border-color var(--ml-dur) var(--ml-ease) !important;
}
body.single-product .single_add_to_cart_button:hover,
body.single-product .et_pb_wc_add_to_cart form.cart .button:hover,
body.single-product .woocommerce div.product form.cart .button:hover,
body.single-product .woocommerce div.product .single_add_to_cart_button:hover {
    background: var(--ml-accent) !important;
    border-color: var(--ml-accent) !important;
}

/* --- Variations (Divi WC) --- */
body.single-product .variations select,
body.single-product .et_pb_wc_add_to_cart .variations select {
    border: 1px solid var(--ml-border-strong) !important;
    border-radius: var(--ml-radius-md) !important;
    padding: 0.6rem 2rem 0.6rem 0.875rem !important;
    background: var(--ml-card) !important;
    font-family: var(--ml-font-body) !important;
    font-size: 0.9375rem !important;
    color: var(--ml-text) !important;
}
body.single-product .variations th {
    font-weight: 600 !important;
    color: var(--ml-text) !important;
    font-family: var(--ml-font-body) !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* --- Breadcrumb --- */
body.single-product .et_pb_wc_breadcrumb,
body.single-product .et_pb_wc_breadcrumb a,
body.single-product .woocommerce-breadcrumb,
body.single-product .woocommerce-breadcrumb a {
    color: var(--ml-text-light) !important;
    font-size: 0.875rem !important;
    font-family: var(--ml-font-body) !important;
}
body.single-product .et_pb_wc_breadcrumb a:hover,
body.single-product .woocommerce-breadcrumb a:hover {
    color: var(--ml-text) !important;
}

/* --- Description / Meta --- */
body.single-product .et_pb_wc_description p,
body.single-product .et_pb_wc_meta {
    color: var(--ml-text-light) !important;
    font-size: 0.9375rem !important;
    line-height: 1.65 !important;
}
body.single-product .et_pb_wc_meta .sku_wrapper,
body.single-product .et_pb_wc_meta .posted_in {
    color: var(--ml-text-muted) !important;
    font-size: 0.8125rem !important;
}

/* --- Reviews / Rating --- */
body.single-product .star-rating,
body.single-product .et_pb_wc_reviews .star-rating { color: var(--ml-accent) !important; }

/* Quiet WooCommerce notices */
.woocommerce-message,
.woocommerce-info {
    background: var(--ml-card) !important;
    border-top: 2px solid var(--ml-accent) !important;
    color: var(--ml-text) !important;
    box-shadow: var(--ml-shadow-sm) !important;
    border-radius: var(--ml-radius-md) !important;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--ml-accent) !important; }
.woocommerce-error {
    background: var(--ml-card) !important;
    border-top: 2px solid var(--ml-danger) !important;
    color: var(--ml-text) !important;
    border-radius: var(--ml-radius-md) !important;
}
.woocommerce-error::before { color: var(--ml-danger) !important; }

.woocommerce a.button,
.woocommerce-page a.button,
.woocommerce input.button,
.woocommerce-page button.button.alt,
.woocommerce-page #respond input#submit {
    background: var(--ml-text) !important;
    color: var(--ml-text-inverse) !important;
    border-radius: var(--ml-radius-md) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    box-shadow: none !important;
}
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce-page button.button.alt:hover {
    background: var(--ml-accent) !important;
}

/* ============================================================
   16. CART / CHECKOUT polish
   ============================================================ */
body.woocommerce-cart, body.woocommerce-checkout { background: var(--ml-surface); }
body.woocommerce-cart .woocommerce table.shop_table,
body.woocommerce-checkout .woocommerce table.shop_table {
    background: var(--ml-card);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius-md);
    border-collapse: separate;
    overflow: hidden;
}
body.woocommerce-cart .woocommerce table.shop_table th,
body.woocommerce-checkout .woocommerce table.shop_table th {
    background: var(--ml-surface-alt);
    color: var(--ml-text);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--ml-border);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    border: 1px solid var(--ml-border-strong) !important;
    border-radius: var(--ml-radius-md) !important;
    padding: 0.7rem 0.875rem !important;
    background: var(--ml-card) !important;
    transition: border-color var(--ml-dur) var(--ml-ease), box-shadow var(--ml-dur) var(--ml-ease) !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    outline: none !important;
    border-color: var(--ml-text) !important;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.06) !important;
}

/* ============================================================
   17. HEADER / NAV — calmer Divi menu
   ============================================================ */
#main-header, #top-header { box-shadow: none !important; }
#main-header { background: var(--ml-surface) !important; border-bottom: 1px solid var(--ml-border); }
#top-menu li a, #et-secondary-nav li a, .et_pb_menu li a {
    font-family: var(--ml-font-body) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--ml-text) !important;
    transition: color var(--ml-dur) var(--ml-ease) !important;
}
#top-menu li a:hover, #et-secondary-nav li a:hover, .et_pb_menu li a:hover {
    color: var(--ml-accent) !important;
    opacity: 1 !important;
}
#top-menu li.current-menu-item > a,
.et_pb_menu li.current-menu-item > a { color: var(--ml-text) !important; }

/* ============================================================
   18. TOAST (used by minimal.js)
   ============================================================ */
.ml-toast-stack {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.ml-toast {
    pointer-events: auto;
    background: var(--ml-text);
    color: var(--ml-text-inverse);
    padding: 0.75rem 1rem 0.75rem 0.875rem;
    border-radius: var(--ml-radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
    box-shadow: var(--ml-shadow-md);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 220px;
    max-width: 360px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--ml-dur) var(--ml-ease), transform var(--ml-dur) var(--ml-ease);
}
.ml-toast.is-visible { opacity: 1; transform: translateY(0); }
.ml-toast--success { background: var(--ml-text); }
.ml-toast--success .ml-toast__icon { color: #87d29c; }
.ml-toast--info    .ml-toast__icon { color: #ead7cf; }
.ml-toast__icon { display: inline-flex; }
.ml-toast a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: auto;
    font-weight: 600;
}
@media (max-width: 480px) {
    .ml-toast-stack { left: 12px; right: 12px; bottom: 12px; }
    .ml-toast { min-width: 0; max-width: none; width: 100%; }
}

/* ============================================================
   19. UTILITY: subtle entrance, no big swoops
   ============================================================ */
.ml-fade-up { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
    .ml-fade-up.is-out-of-view { opacity: 0; transform: translateY(8px); }
    .ml-fade-up.is-in-view {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 320ms var(--ml-ease), transform 320ms var(--ml-ease);
    }
}

/* ============================================================
   20. KILL-SWITCHES for legacy "AI / synthetic" decorations
   ============================================================ */
@keyframes heroGradientShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.mylens-theme [class*="__float"]:not(.ml-product-card *):not(.ml-tryon__image-wrap),
.mylens-theme .ml-hero__bg::before,
.mylens-theme .ml-promo-banner__bg,
.mylens-theme .ml-tryon__float-card { display: none !important; }

/* End of minimal.css */