/*!
 * Zadvaoka — Visual Rebrand 2026  (v2.2)
 * Premium Optical Color System — Modern, clean, optical clarity.
 * ----------------------------------------------------------------------
 * STRATEGY
 *  The Divi-child theme already exposes a rich design system via
 *  `--ml-*` CSS variables (e.g. --ml-primary, --ml-accent, --ml-surface).
 *  Re-defining those variables instantly retheme every `.ml-*` component
 *  on the homepage and across the site (110+ usages).
 *
 * SCOPE
 *  Variables are redefined inside body-content roots ONLY — never on
 *  :root or html — so the Divi Theme Builder header (.et-l--header) and
 *  footer (.et-l--footer) keep the original palette inherited from the
 *  child theme's :root. Layout, spacing, structure, content untouched.
 *
 *  This stylesheet also retones the few HARD-CODED dark gradients in
 *  the homepage CSS (hero, try-on, promo-banner, dark section) so they
 *  match the new optic-ink primary instead of the old purple-black.
 *
 *  WooCommerce/Divi generic overrides at the bottom keep the rebrand
 *  consistent on shop/product/cart/checkout/account pages.
 *
 * ROLLBACK
 *  Delete /wp-content/mu-plugins/zadvaoka-rebrand.php and the
 *  /wp-content/mu-plugins/zadvaoka-rebrand/ directory. Done.
 * ---------------------------------------------------------------------- */


/* ========================================================================
   1. BRAND TOKENS — also exposed as --zv-* for any custom usage
   ======================================================================== */
:root {
    /* Primary — Optic Ink (clean optical navy: trust + premium, no purple cast) */
    --zv-primary:           #0F2A44;
    --zv-primary-hover:     #163A5C;
    --zv-primary-dark:      #091B2D;
    --zv-primary-soft:      #E5ECF4;

    /* Secondary — Lens Teal (clarity, "clean vision") */
    --zv-secondary:         #3E8FA3;
    --zv-secondary-hover:   #347A8C;
    --zv-secondary-soft:    #E2EEF2;

    /* Accent — Champagne (warm metallic luxury, premium eyewear cue) */
    --zv-accent:            #C9A96A;
    --zv-accent-hover:      #B59453;
    --zv-accent-soft:       #F5EFDF;
    --zv-accent-light:      #E8D5A8;

    /* Surfaces — cool clean off-white instead of the old warm cream */
    --zv-bg:                #FFFFFF;
    --zv-bg-mist:           #F6F8FB;
    --zv-bg-fog:            #EEF2F7;
    --zv-bg-ink:            #0F2A44;

    /* Text */
    --zv-text:              #1A2233;
    --zv-text-secondary:    #566177;
    --zv-text-muted:        #8A93A6;
    --zv-text-on-dark:      #F4F6FA;

    /* Borders */
    --zv-border:            #E0E5EE;
    --zv-border-strong:     #C7CFDC;

    /* Status */
    --zv-success:           #2E8C6A;
    --zv-warning:           #D4A93C;
    --zv-error:             #C84B4B;

    /* Elevation */
    --zv-shadow-sm: 0 1px 2px rgba(15, 42, 68, 0.06);
    --zv-shadow-md: 0 6px 18px rgba(15, 42, 68, 0.08);
    --zv-shadow-lg: 0 14px 40px rgba(15, 42, 68, 0.12);
}


/* ========================================================================
   2. RE-MAP THE EXISTING `--ml-*` DESIGN SYSTEM TO THE NEW PALETTE
   ------------------------------------------------------------------------
   Scoped to body-content roots so the Divi Theme Builder header/footer
   keep their inherited :root values from Divi-child/style.css.
   The custom Mylens homepage template uses .mylens-homepage-wrap (no
   #main-content), so we explicitly include it in the scope. We also
   include `body.mylens-homepage` and `body.mylens-theme` so all Mylens
   pages inherit the override at the body level.
   ======================================================================== */
body.mylens-homepage,
body.mylens-theme,
.mylens-homepage-wrap,
#main-content,
.et-l--body,
body.woocommerce,
body.woocommerce-page {
    /* Brand */
    --ml-primary:        #0F2A44;   /* was #1B1B2F purple-black → clean optic ink */
    --ml-primary-light:  #1A3A5C;   /* was #2A2A45 */
    --ml-primary-dark:   #091B2D;   /* was #0F0F1E */
    --ml-accent:         #C9A96A;   /* champagne — refined */
    --ml-accent-hover:   #B59453;   /* was #B8923F */
    --ml-accent-light:   #E8D5A8;

    /* Surfaces — warm cream → cool clean off-white (the most visible shift) */
    --ml-surface:        #F6F8FB;   /* was #F8F6F2 warm cream */
    --ml-surface-alt:    #EEF2F7;   /* was #EFECE5 warm beige */
    --ml-white:          #FFFFFF;
    --ml-card:           #FFFFFF;
    --ml-card-hover:     #FAFBFC;   /* was #FAFAFA — cooler */

    /* Text — cool slate hierarchy */
    --ml-text:           #1A2233;   /* was #2D2D2D */
    --ml-text-light:     #566177;   /* was #6B6B6B */
    --ml-text-muted:     #8A93A6;   /* was #999999 */
    --ml-text-inverse:   #FFFFFF;

    /* Status — softer, more modern */
    --ml-success:        #2E8C6A;   /* was #2E7D32 */
    --ml-danger:         #C84B4B;   /* was #C62828 */
    --ml-warning:        #D4A93C;   /* was #F57F17 */
    --ml-info:           #3E8FA3;   /* was #1565C0 — replace harsh blue with Lens Teal */
    --ml-sale:           #C84B4B;   /* was #C62828 */

    /* Shadows — re-tuned to navy ink (subtler, more premium) */
    --ml-shadow-sm:   0 1px 3px rgba(15,42,68,0.06), 0 1px 2px rgba(15,42,68,0.04);
    --ml-shadow-md:   0 4px 6px rgba(15,42,68,0.05), 0 2px 4px rgba(15,42,68,0.04);
    --ml-shadow-lg:   0 10px 25px rgba(15,42,68,0.08), 0 4px 10px rgba(15,42,68,0.04);
    --ml-shadow-xl:   0 20px 40px rgba(15,42,68,0.10), 0 8px 16px rgba(15,42,68,0.06);
    --ml-shadow-gold: 0 4px 15px rgba(201,169,106,0.3);
}


/* ========================================================================
   3. RE-TONE HARD-CODED DARK GRADIENTS IN homepage.css
   ------------------------------------------------------------------------
   These do NOT use --ml-primary so the variable override above can't reach
   them. We rewrite the gradient stops to use the new optic-ink palette.
   ======================================================================== */

/* The .ml-* classes are unique to the body-content (custom homepage
   template). They never appear inside the theme builder header/footer,
   so we can target them without an ancestor prefix. */

/* ----------------------------------------------------------------------
   ZADVAOKA HERO — "Optical Editorial" redesign.
   ---------------------------------------------------------------------
   The mylens.es theme renders this hero as a deep dark gradient with
   gold accents. To make Zadvaoka visibly different (per the rebrand
   brief and the user's screenshot review), the hero is re-rendered as
   a clean LIGHT editorial composition: cool off-white background with
   navy ink typography, a navy-stroked glasses centerpiece on a soft
   glass tile, white floating chips, and a champagne underline accent
   under "Bold Style." Same DOM, same content — just a different visual
   identity from the source theme.
   --------------------------------------------------------------------- */

/* Section base: flat cool surface */
.ml-hero {
    background: #F4F7FC !important;
}

/* Background layer: clean editorial gradient with a soft right-side mist
   (so the right-hand visual still has visual separation from the body). */
.ml-hero__gradient {
    background:
        radial-gradient(ellipse 60% 80% at 80% 50%, rgba(15,42,68,0.06) 0%, transparent 60%),
        radial-gradient(circle at 14% 22%, rgba(201,169,106,0.10) 0%, transparent 45%),
        linear-gradient(160deg, #FAFCFD 0%, #F2F6FB 50%, #E7EEF6 100%) !important;
}

/* Dot grid: navy dots on light, more subtle */
.ml-hero__bg::after {
    background-image: radial-gradient(rgba(15,42,68,0.07) 1px, transparent 1px) !important;
    opacity: 0.55 !important;
}

/* Hero typography — navy on light */
.ml-hero__title {
    color: #0F2A44 !important;
    text-shadow: none !important;
}
.ml-hero__desc {
    color: #566177 !important;
}

/* "Bold Style" accent: keep champagne wash, add a clean editorial
   underline so the differentiation is structural, not just a color flip */
.ml-hero__title-accent {
    position: relative;
    display: inline-block;
    background: linear-gradient(135deg, #C9A96A 0%, #B59453 50%, #C9A96A 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.ml-hero__title-accent::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 72px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #C9A96A 0%, rgba(201,169,106,0.18) 100%);
    box-shadow: 0 4px 14px rgba(201,169,106,0.30);
}

/* Tag pill — light surface, navy text, champagne pulse dot */
.ml-hero__tag {
    color: #1A2233 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(15,42,68,0.10) !important;
    box-shadow: 0 4px 14px rgba(15,42,68,0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.ml-hero__tag::before {
    background: #C9A96A !important;
    box-shadow: 0 0 0 4px rgba(201,169,106,0.18) !important;
}

/* Trust signals: slate text, champagne icons */
.ml-hero__trust-item {
    color: #566177 !important;
}
.ml-hero__trust-item svg {
    stroke: #C9A96A !important;
    opacity: 1 !important;
}

/* CTAs — navy primary (premium, "trust") instead of gold */
.ml-hero__cta .ml-btn-primary {
    background: #0F2A44 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 2px solid #0F2A44 !important;
    box-shadow: 0 8px 24px rgba(15,42,68,0.20) !important;
}
.ml-hero__cta .ml-btn-primary:hover {
    background: #163A5C !important;
    border-color: #163A5C !important;
    box-shadow: 0 12px 32px rgba(15,42,68,0.28) !important;
    transform: translateY(-2px) !important;
}

/* Outline button — navy outline on white */
.ml-hero__cta .ml-btn-outline {
    background: #FFFFFF !important;
    color: #0F2A44 !important;
    border: 2px solid #0F2A44 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.ml-hero__cta .ml-btn-outline:hover {
    background: #0F2A44 !important;
    color: #FFFFFF !important;
}

/* Outer concentric ring backdrop — re-tone for light */
.ml-hero__float--1 {
    border: 1px solid rgba(15,42,68,0.10) !important;
    box-shadow:
        inset 0 0 0 60px rgba(201,169,106,0.05),
        inset 0 0 0 120px rgba(15,42,68,0.04),
        inset 0 0 0 180px rgba(201,169,106,0.05) !important;
}

/* Inner radial glow halo */
.ml-hero__float--2 {
    background:
        radial-gradient(circle at 50% 50%,
            rgba(201,169,106,0.20) 0%,
            rgba(201,169,106,0.06) 35%,
            transparent 70%) !important;
    filter: blur(10px) !important;
}

/* Glasses centerpiece — re-skin to navy strokes on a clean glass tile */
.ml-hero::before {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 90' fill='none' stroke='%230F2A44' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='55' cy='45' r='34' fill='rgba(15,42,68,0.05)'/><circle cx='165' cy='45' r='34' fill='rgba(15,42,68,0.05)'/><path d='M89 45 Q110 32 131 45'/><path d='M21 47 L4 41'/><path d='M199 47 L216 41'/><circle cx='55' cy='45' r='14' fill='none' stroke='%230F2A44' stroke-width='1' opacity='0.45'/><circle cx='165' cy='45' r='14' fill='none' stroke='%230F2A44' stroke-width='1' opacity='0.45'/></svg>") center/72% no-repeat,
        radial-gradient(circle at 30% 25%, rgba(255,255,255,1) 0%, transparent 50%),
        radial-gradient(circle at 65% 60%, rgba(201,169,106,0.10) 0%, transparent 60%),
        linear-gradient(140deg, #FFFFFF 0%, #F4F8FC 60%, rgba(201,169,106,0.06) 100%) !important;
    border: 1px solid rgba(15,42,68,0.12) !important;
    box-shadow:
        0 30px 80px rgba(15,42,68,0.18),
        0 0 60px rgba(201,169,106,0.18),
        inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* "AI Virtual Try-On" floating chip — white surface, navy text + icon */
.ml-hero::after {
    color: #0F2A44 !important;
    background-color: rgba(255,255,255,0.95) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2A44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: 18px center !important;
    background-size: 18px 18px !important;
    border: 1px solid rgba(15,42,68,0.10) !important;
    box-shadow:
        0 12px 32px rgba(15,42,68,0.12),
        0 0 0 4px rgba(201,169,106,0.10) !important;
}

/* "4.9 / 5 — 25,000+ Happy Buyers" rating chip — white surface */
.ml-hero__content::after {
    color: #0F2A44 !important;
    background-color: rgba(255,255,255,0.97) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C9A96A' stroke='%23C9A96A' stroke-width='1.5' 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: 16px center !important;
    background-size: 16px 16px !important;
    border: 1px solid rgba(15,42,68,0.10) !important;
    box-shadow:
        0 10px 30px rgba(15,42,68,0.12),
        0 0 0 4px rgba(201,169,106,0.08) !important;
}

/* TRY-ON section — same retoning. */
.ml-tryon {
    background: linear-gradient(165deg, #091B2D 0%, #0F2A44 50%, #143350 100%) !important;
}

/* PROMO BANNER background composition. */
.ml-promo-banner__bg {
    background:
        radial-gradient(ellipse at 30% 50%, rgba(201,169,106,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 50%, rgba(201,169,106,0.08) 0%, transparent 50%),
        linear-gradient(160deg, #091B2D 0%, #0F2A44 50%, #143350 100%) !important;
}

/* DARK SECTION utility class. */
.mylens-homepage-wrap .ml-section-dark {
    background: linear-gradient(165deg, #091B2D 0%, #0F2A44 45%, #143350 100%) !important;
}

/* ALT (light) SECTION utility class — also uses hard-coded warm cream stops.
   Re-tone to cool clean off-white. */
.mylens-homepage-wrap .ml-section-alt {
    background:
        radial-gradient(ellipse 120% 70% at 50% 0%, rgba(201,169,106,0.05) 0%, transparent 48%),
        linear-gradient(180deg, #EEF2F7 0%, #F6F8FB 50%, #EEF2F7 100%) !important;
}

/* SEO BLOCK — bottom card with warm beige background. Cool it down. */
.ml-seo-block {
    background:
        radial-gradient(ellipse 90% 55% at 12% 18%, rgba(201,169,106,0.10) 0%, transparent 52%),
        radial-gradient(ellipse 65% 45% at 90% 72%, rgba(15,42,68,0.045) 0%, transparent 48%),
        linear-gradient(175deg, #EEF2F7 0%, #E5ECF4 40%, #DCE3EC 100%) !important;
    border-top: 1px solid rgba(15,42,68,0.065) !important;
}
.ml-seo-block p {
    background: linear-gradient(165deg, rgba(255,255,255,0.99) 0%, #FBFCFE 100%) !important;
    border-left-color: var(--ml-accent) !important;
    color: rgba(26, 34, 51, 0.92) !important;
    box-shadow:
        0 2px 0 rgba(255,255,255,0.9) inset,
        0 1px 0 rgba(201,169,106,0.22),
        0 14px 36px rgba(15,42,68,0.09),
        0 32px 72px rgba(15,42,68,0.08),
        0 6px 16px rgba(201,169,106,0.07) !important;
}

/* PRODUCT CARD image stage — cool the warm peach/beige gradient. */
.mylens-homepage-wrap .ml-product-card__image {
    background: linear-gradient(135deg, #EEF2F7 0%, #F6F8FB 100%) !important;
}

/* Body surface — Mylens theme uses --ml-surface for the page background;
   ensure it's the new cool off-white globally on body content. */
body.mylens-homepage,
body.mylens-theme,
body.mylens-about,
body.mylens-contact,
body.mylens-faq,
body.mylens-shop,
body.mylens-product,
body.mylens-brand {
    background-color: #F6F8FB;
}

/* Brand-page product list — warm cream → cool clean */
.ml-brand-page .ml-shop-products {
    background:
        radial-gradient(ellipse 90% 55% at 50% 0%, rgba(201,169,106,0.05) 0%, transparent 58%),
        linear-gradient(180deg, #F6F8FB 0%, #EEF2F7 100%) !important;
}

/* Single-product related-products image well — warm cream → cool clean */
.woocommerce.single-product .et_pb_wc_related_products section.related ul.products li.product .et_shop_image {
    background: linear-gradient(135deg, #F6F8FB 0%, #EEF2F7 100%) !important;
}

/* Cart product thumbnail backdrop — warm cream → cool clean */
body.woocommerce-cart td.product-thumbnail img {
    background: linear-gradient(135deg, #F6F8FB 0%, #EEF2F7 100%) !important;
}


/* ========================================================================
   3b. SUBPAGE TEMPLATES — About / Contact / FAQ
   ------------------------------------------------------------------------
   These pages use Divi-child/assets/css/pages.css which hard-codes the same
   purple-black gradient as homepage.css for the .ml-page-hero / .ml-page-cta
   bands. About has an extra layer of even-more-specific overrides.

   Re-tone every band to the new optic-ink palette.
   ======================================================================== */

/* Generic shared page hero band (used by about / contact / faq) */
.ml-page-hero__bg {
    background:
        radial-gradient(circle at 30% 50%, rgba(201,169,106,0.10) 0%, transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(201,169,106,0.06) 0%, transparent 40%),
        linear-gradient(160deg, #091B2D 0%, #0F2A44 50%, #1A3A5C 100%) !important;
}
.ml-page-hero__bg::after {
    background-image: radial-gradient(rgba(201,169,106,0.05) 1px, transparent 1px) !important;
}

/* Generic shared page CTA band */
.ml-page-cta__bg {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(201,169,106,0.12) 0%, transparent 60%),
        linear-gradient(160deg, #091B2D 0%, #0F2A44 100%) !important;
}

/* About page-specific HERO override (higher specificity in pages.css) */
.ml-about-page .ml-page-hero__bg {
    background:
        radial-gradient(ellipse 85% 90% at 18% 25%, rgba(201,169,106,0.16) 0%, transparent 55%),
        radial-gradient(circle at 88% 18%, rgba(255,255,255,0.08) 0%, transparent 42%),
        radial-gradient(circle at 50% 100%, rgba(201,169,106,0.07) 0%, transparent 45%),
        linear-gradient(168deg, #081729 0%, #0F2A44 42%, #1F3F60 100%) !important;
}

/* About page-specific CTA override */
.ml-about-page .ml-page-cta__bg {
    background:
        radial-gradient(ellipse 70% 55% at 50% 20%, rgba(201,169,106,0.14) 0%, transparent 58%),
        linear-gradient(168deg, #091B2D 0%, #0F2A44 55%, #112C46 100%) !important;
}

/* About story card — warm cream → cool clean white */
.ml-about-page .ml-about-story__text {
    background:
        linear-gradient(165deg, rgba(255,255,255,0.99) 0%, #FBFCFE 100%) !important;
    border: 1px solid rgba(15,42,68,0.06) !important;
    border-left: 4px solid var(--ml-accent) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 14px 40px rgba(15,42,68,0.07),
        0 4px 14px rgba(201,169,106,0.08) !important;
}

/* About story values cards — keep clean, but ensure border/shadow use ink */
.ml-about-page .ml-about-value {
    border-color: rgba(15,42,68,0.06) !important;
    box-shadow: 0 8px 28px rgba(15,42,68,0.05) !important;
}
.ml-about-page .ml-about-value:hover {
    border-color: rgba(201,169,106,0.35) !important;
    box-shadow:
        0 20px 48px rgba(15,42,68,0.09),
        0 6px 16px rgba(201,169,106,0.10) !important;
}

/* About story image frame — ink-tinted shadow */
.ml-about-page .ml-about-story__image img {
    box-shadow:
        0 24px 60px rgba(15,42,68,0.12),
        0 8px 24px rgba(201,169,106,0.12),
        inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

/* Contact info cards — same surface treatment */
body.mylens-contact .ml-contact-card {
    border-color: rgba(15,42,68,0.06) !important;
    box-shadow: 0 8px 28px rgba(15,42,68,0.06) !important;
}

/* FAQ accordion items — match new ink-tinted surface */
body.mylens-faq .ml-faq-item {
    border-color: rgba(15,42,68,0.05) !important;
}
body.mylens-faq .ml-faq-item:hover {
    box-shadow: 0 4px 16px rgba(15,42,68,0.06) !important;
}
body.mylens-faq .ml-faq-tab {
    border-color: rgba(15,42,68,0.10) !important;
}


/* ========================================================================
   4. BODY-CONTENT TYPOGRAPHY & LINKS — generic non-Divi pages too
   ======================================================================== */
#main-content,
.et-l--body {
    background-color: var(--zv-bg);
    color: var(--zv-text);
}
#main-content p,
.et-l--body p { color: var(--zv-text-secondary); }
#main-content h1, #main-content h2, #main-content h3,
#main-content h4, #main-content h5, #main-content h6,
.et-l--body h1, .et-l--body h2, .et-l--body h3,
.et-l--body h4, .et-l--body h5, .et-l--body h6 { color: var(--zv-text); }

#main-content a,
.et-l--body a {
    color: var(--zv-primary);
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
#main-content a:hover,
.et-l--body a:hover { color: var(--zv-secondary); }

/* Don't recolor product card titles (they're inside <a>) */
#main-content .product .woocommerce-loop-product__title,
#main-content .product h2,
#main-content .product h3,
#main-content .ml-product-card__title,
#main-content ul.products li.product a h2,
#main-content ul.products li.product a h3 { color: var(--zv-text) !important; }

::selection { background: var(--zv-primary); color: #ffffff; }


/* ========================================================================
   5. SECTION SURFACES — re-tone explicit gray/black bgs (Divi pages)
   ======================================================================== */
#main-content .et_pb_section[style*="background-color: #f7f7f7"],
#main-content .et_pb_section[style*="background-color: #f5f5f5"],
#main-content .et_pb_section[style*="background-color: #fafafa"],
#main-content .et_pb_section[style*="background-color:#f7f7f7"],
#main-content .et_pb_section[style*="background-color:#f5f5f5"],
#main-content .et_pb_section[style*="background-color:#fafafa"] {
    background-color: var(--zv-bg-mist) !important;
}
#main-content .et_pb_section[style*="background-color: #000000"],
#main-content .et_pb_section[style*="background-color: #000"],
#main-content .et_pb_section[style*="background-color: #1a1a1a"],
#main-content .et_pb_section[style*="background-color: #222"],
#main-content .et_pb_section[style*="background-color:#000000"],
#main-content .et_pb_section[style*="background-color:#000"] {
    background-color: var(--zv-bg-ink) !important;
}


/* ========================================================================
   6. BUTTONS — Divi
   ======================================================================== */
#main-content .et_pb_button,
#main-content a.et_pb_button,
.et-l--body .et_pb_button,
.et-l--body a.et_pb_button {
    background-color: var(--zv-primary) !important;
    color: var(--zv-text-on-dark) !important;
    border: 2px solid var(--zv-primary) !important;
    border-radius: 6px !important;
    padding: 12px 28px !important;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background-color .25s ease, color .25s ease,
                border-color .25s ease, transform .15s ease,
                box-shadow .25s ease !important;
    box-shadow: var(--zv-shadow-sm);
}
#main-content .et_pb_button:hover,
#main-content a.et_pb_button:hover,
.et-l--body .et_pb_button:hover,
.et-l--body a.et_pb_button:hover {
    background-color: var(--zv-primary-hover) !important;
    border-color: var(--zv-primary-hover) !important;
    color: var(--zv-text-on-dark) !important;
    box-shadow: var(--zv-shadow-md);
}
#main-content .et_pb_button:after,
.et-l--body .et_pb_button:after { color: var(--zv-text-on-dark) !important; }


/* ========================================================================
   7. BUTTONS — WooCommerce
   ======================================================================== */
#main-content .woocommerce a.button,
#main-content .woocommerce button.button,
#main-content .woocommerce input.button,
#main-content .woocommerce ul.products li.product .button,
.woocommerce-page #content .et_pb_module a.button {
    background-color: var(--zv-primary) !important;
    color: var(--zv-text-on-dark) !important;
    border-color: var(--zv-primary) !important;
    border-radius: 6px !important;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
#main-content .woocommerce a.button:hover,
#main-content .woocommerce button.button:hover,
#main-content .woocommerce input.button:hover,
#main-content .woocommerce ul.products li.product .button:hover {
    background-color: var(--zv-accent) !important;
    border-color: var(--zv-accent) !important;
    color: #ffffff !important;
}
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce button.single_add_to_cart_button.button {
    background-color: var(--zv-accent) !important;
    border-color: var(--zv-accent) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce button.single_add_to_cart_button.button:hover {
    background-color: var(--zv-accent-hover) !important;
    border-color: var(--zv-accent-hover) !important;
    color: #ffffff !important;
}


/* ========================================================================
   8. WooCommerce — product cards, prices, badges, ratings
   ======================================================================== */
#main-content .woocommerce ul.products li.product .price,
#main-content .price,
#main-content .woocommerce div.product p.price,
#main-content .woocommerce div.product span.price,
#main-content .woocommerce-Price-amount {
    color: var(--zv-primary) !important;
    font-weight: 700;
}

#main-content .woocommerce ul.products li.product {
    background-color: var(--zv-bg) !important;
    border: 1px solid var(--zv-border);
    border-radius: 10px;
    padding: 14px;
    transition: box-shadow .25s ease, border-color .25s ease;
    box-shadow: var(--zv-shadow-sm);
}
#main-content .woocommerce ul.products li.product:hover {
    border-color: var(--zv-primary-soft);
    box-shadow: var(--zv-shadow-md);
}

#main-content .woocommerce span.onsale {
    background-color: var(--zv-accent) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px;
}

#main-content .woocommerce .star-rating span,
#main-content .woocommerce p.stars a { color: var(--zv-accent) !important; }


/* ========================================================================
   9. Forms / inputs
   ======================================================================== */
#main-content input[type="text"],
#main-content input[type="email"],
#main-content input[type="tel"],
#main-content input[type="search"],
#main-content input[type="number"],
#main-content input[type="password"],
#main-content input[type="url"],
#main-content textarea,
#main-content select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    background-color: var(--zv-bg-mist) !important;
    border: 1px solid var(--zv-border) !important;
    color: var(--zv-text) !important;
    border-radius: 6px !important;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
#main-content input:focus,
#main-content textarea:focus,
#main-content select:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--zv-primary) !important;
    outline: 0 !important;
    background-color: var(--zv-bg) !important;
    box-shadow: 0 0 0 3px rgba(15, 42, 68, .12) !important;
}
#main-content ::placeholder { color: var(--zv-text-muted); opacity: 1; }


/* ========================================================================
   10. Borders, dividers, icons, blockquotes, tabs
   ======================================================================== */
#main-content hr,
#main-content .et_pb_divider .et_pb_divider_internal { border-color: var(--zv-border) !important; }

#main-content .et_pb_blurb .et-pb-icon,
#main-content .et_pb_main_blurb_image .et-pb-icon,
#main-content .et_pb_icon { color: var(--zv-primary) !important; }

#main-content .et_pb_circle_counter .percent-sign,
#main-content .et_pb_number_counter .percent-sign,
#main-content .et_pb_number_counter .percent { color: var(--zv-accent) !important; }

#main-content blockquote {
    border-left: 4px solid var(--zv-accent) !important;
    background-color: var(--zv-bg-mist);
    color: var(--zv-text);
    padding: 18px 22px;
    border-radius: 0 8px 8px 0;
}

#main-content .et_pb_tabs_controls li.et_pb_tab_active { background-color: var(--zv-primary) !important; }
#main-content .et_pb_tabs_controls li.et_pb_tab_active a { color: var(--zv-text-on-dark) !important; }
#main-content .et_pb_tabs_controls li a { color: var(--zv-text) !important; }
#main-content .et_pb_toggle_open .et_pb_toggle_title,
#main-content .et_pb_accordion_item.et_pb_toggle_open .et_pb_toggle_title { color: var(--zv-primary) !important; }


/* ========================================================================
   11. WooCommerce — pagination, breadcrumbs, notices, single tabs
   ======================================================================== */
.woocommerce nav.woocommerce-pagination ul { border-color: var(--zv-border) !important; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    background-color: var(--zv-bg-mist) !important;
    color: var(--zv-text) !important;
    border-color: var(--zv-border) !important;
    border-radius: 6px;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background-color: var(--zv-primary) !important;
    color: var(--zv-text-on-dark) !important;
    border-color: var(--zv-primary) !important;
}

.woocommerce-breadcrumb,
.woocommerce-breadcrumb a { color: var(--zv-text-secondary) !important; }
.woocommerce-breadcrumb a:hover { color: var(--zv-primary) !important; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: 8px !important;
    border-top: none !important;
    border-left: 4px solid !important;
    background-color: var(--zv-bg-mist) !important;
}
.woocommerce-message { border-left-color: var(--zv-success) !important; color: #14543c !important; }
.woocommerce-info    { border-left-color: var(--zv-secondary) !important; color: var(--zv-text) !important; }
.woocommerce-error   { border-left-color: var(--zv-error) !important; color: #6e1f1f !important; }
.woocommerce-message::before { color: var(--zv-success) !important; }
.woocommerce-info::before    { color: var(--zv-secondary) !important; }
.woocommerce-error::before   { color: var(--zv-error) !important; }

.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid var(--zv-border) !important;
    padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-bottom: none !important;
    border-radius: 6px 6px 0 0 !important;
    margin: 0 4px 0 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background-color: var(--zv-bg) !important;
    border-color: var(--zv-border) !important;
    border-bottom-color: var(--zv-bg) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--zv-text-secondary) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--zv-primary) !important; }


/* ========================================================================
   12. Tables (cart, checkout, account)
   ======================================================================== */
.woocommerce table.shop_table {
    border: 1px solid var(--zv-border) !important;
    border-radius: 10px !important;
    overflow: hidden;
    background-color: var(--zv-bg);
}
.woocommerce table.shop_table th {
    background-color: var(--zv-bg-mist) !important;
    color: var(--zv-text) !important;
    border-bottom: 1px solid var(--zv-border) !important;
}
.woocommerce table.shop_table td {
    border-top: 1px solid var(--zv-border) !important;
    color: var(--zv-text-secondary);
}


/* ========================================================================
   13. Mobile — color-only tweaks (no layout changes)
   ======================================================================== */
@media (max-width: 980px) {
    #main-content .et_pb_button,
    #main-content a.et_pb_button { padding: 12px 22px !important; }
}