/*
Theme Name: Luxe Hair Astra Child
Theme URI: https://example.com/
Description: Premium Luxe Hair WooCommerce child theme built on Astra.
Author: Luxe Hair
Template: astra
Version: 1.0.0
Text Domain: luxe-hair
*/

/* =========================================================
   LUXE HAIR
   Clean Premium Hair-Care System
   style.css — design tokens, glassmorphism,
   accessibility & performance upgrades
   ========================================================= */


/* =========================================================
   01 — DESIGN TOKENS
   ========================================================= */

:root {
    /* --- brand palette --- */
    --ivory: #f7f4ee;
    --ivory-light: #fbfaf7;
    --sand: #e9e1d5;

    --espresso: #241d19;
    --brown: #5f4d42;
    --muted: #8b7c71;

    --olive: #6d7752;
    --olive-dark: rgba(20, 126, 53, 0.3);

    --gold: #b99663;

    --white: #ffffff;

    /* --- enhanced accessibility colors --- */
    --text-on-primary: #ffffff;
    --text-on-secondary: #ffffff;
    --text-on-accent: #ffffff;

    --border: rgba(36, 29, 25, 0.10);
    --border-light: rgba(36, 29, 25, 0.06);

    /* --- semantic aliases --- */
    --color-primary: var(--espresso);
    --color-secondary: var(--olive);
    --color-accent: var(--gold);

    /* --- spacing scale --- */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 40px;
    --spacing-6: 56px;

    /* --- type --- */
    --font-size-base: 1rem;

    /* --- layout --- */
    --container: 1280px;
    --padding: clamp(20px, 4vw, 56px);

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;

    /* --- elevation --- */
    --shadow-soft: 0 12px 35px rgba(36, 29, 25, 0.07);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-hover: 0 24px 60px rgba(36, 29, 25, 0.12);

    /* --- motion --- */
    --ease: cubic-bezier(.22, 1, .36, 1);

    /* --- glassmorphism --- */
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-border: rgba(255, 255, 255, 0.65);
    --glass-blur: blur(20px) saturate(1.15);
    --glass-hover-bg: rgba(255, 255, 255, 0.80);
    --glass-shadow: 0 18px 45px rgba(36, 29, 25, 0.14);

    /* --- inverted surfaces (buttons / stats panel) --- */
    --btn-bg: var(--espresso);
    --btn-fg: #ffffff;
    --btn-bg-hover:   #b99663;

    --panel-bg: var(--espresso);
    --panel-fg: #ffffff;
    --panel-border: rgba(255, 255, 255, 0.14);
    --panel-muted: #bdb0a5;
    --panel-accent: #c8ad80;

    /* --- component surfaces --- */
    --nav-bg: rgba(247, 244, 238, 0.88);
    --badge-bg: rgba(255, 255, 255, 0.88);
    --badge-fg: var(--espresso);
    --badge-border: rgba(255, 255, 255, 0.80);

    --overlay-btn-bg: rgba(255, 255, 255, 0.94);
    --overlay-btn-fg: var(--espresso);

    --card-border: rgba(255, 255, 255, 0.65);
    --benefit-bg: rgba(255, 255, 255, 0.50);

    --section-alt-a: #f0e9df;
    --section-alt-b: #eee7dc;

    --display-ghost: rgba(36, 29, 25, 0.055);
    --selection: rgba(109, 119, 82, 0.18);
    --ripple: currentColor;

    color-scheme: light;
}


/* =========================================================
   02 — RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    background: var(--ivory);
}

body {
    margin: 0;
    min-height: 100vh;

    background: var(--ivory);
    color: var(--espresso);

    font-family:
            "DM Sans",
            system-ui,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;

    font-size: var(--font-size-base);
    line-height: 1.6;
    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
    width: 100%;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

::selection {
    background: var(--selection);
}


/* =========================================================
   03 — GRAIN
   ========================================================= */

.grain {
    position: fixed;
    inset: 0;

    z-index: 9999;
    pointer-events: none;

    opacity: 0.018;

    background-image:
            url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='noise'>\
<feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/>\
</filter>\
<rect width='100%' height='100%' filter='url(%23noise)' opacity='.35'/>\
</svg>");
}


/* =========================================================
   04 — SKIP LINK
   ========================================================= */

.skip-link {
    position: fixed;
    top: -80px;
    left: 0;

    z-index: 10000;

    padding: 12px 22px;

    background: var(--btn-bg);
    color: var(--btn-fg);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;

    border-radius: 0 0 var(--radius-sm) 0;

    transition: top .3s var(--ease);
}

.skip-link:focus {
    top: 0;
}

#main-content:focus {
    outline: none;
}


/* =========================================================
   05 — FOCUS VISIBLE
   ========================================================= */

:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 3px;
}

.card img,
.product-image img {
    outline-offset: -4px;
}


/* =========================================================
   06 — NAVIGATION
   ========================================================= */
/* =========================================================
   LUXE HAIR GLOBAL NAVIGATION
   ========================================================= */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    min-height: 100px;
    padding: 18px var(--padding);

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

    gap: 35px;

    box-sizing: border-box;

    transition:
            background .4s ease,
            backdrop-filter .4s ease,
            min-height .4s var(--ease),
            box-shadow .4s ease,
            border-color .4s ease;
}


/* =========================================================
   LOGO
   ========================================================= */

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    flex-shrink: 0;

    color: var(--espresso);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 700;

    letter-spacing: -.02em;

    white-space: nowrap;
    text-decoration: none;
}

.logo-dot {
    width: 20px;
    height: 20px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle at 35% 30%,
                    #d9c49d,
                    var(--gold) 45%,
                    #80633e 100%
            );

    box-shadow:
            0 5px 14px rgba(100, 70, 35, .20);
}


/* =========================================================
   RIGHT SIDE OF NAVBAR
   ========================================================= */

.nav-menu-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 28px;

    margin-left: auto;
}


/* =========================================================
   WORDPRESS MENU WRAPPER
   ========================================================= */

.nav-links {
    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;
}


/* =========================================================
   ACTUAL WORDPRESS UL
   IMPORTANT: YOUR HEADER USES "primary-menu"
   ========================================================= */

.nav-links .primary-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;

    gap: clamp(20px, 2.6vw, 38px);

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


/* =========================================================
   MENU ITEMS
   ========================================================= */

.nav-links .primary-menu > li {
    display: inline-flex !important;
    align-items: center;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


/* =========================================================
   MENU LINKS
   ========================================================= */

.nav-links .primary-menu > li > a {
    position: relative;

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

    width: auto !important;

    padding: 8px 0;

    color: var(--brown);

    font-size: 13px;
    font-weight: 500;

    line-height: 1;

    white-space: nowrap;

    text-decoration: none;

    transition:
            color .25s ease,
            transform .25s ease;
}


/* HOVER */

.nav-links .primary-menu > li > a:hover {
    color: var(--espresso);

    transform: translateY(-2px);
}


/* UNDERLINE */

.nav-links .primary-menu > li > a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 0;
    height: 1px;

    background: var(--espresso);

    transition: width .35s var(--ease);
}


.nav-links .primary-menu > li > a:hover::after {
    width: 100%;
}


/* ACTIVE PAGE */

.nav-links .primary-menu > li.current-menu-item > a,
.nav-links .primary-menu > li.current-menu-ancestor > a {
    color: var(--espresso);
}


.nav-links .primary-menu > li.current-menu-item > a::after,
.nav-links .primary-menu > li.current-menu-ancestor > a::after {
    width: 100%;
}


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

.nav-cart {
    position: relative;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

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

    color: var(--espresso);

    border-radius: 50%;

    text-decoration: none;

    transition:
            background .25s ease,
            transform .25s ease;
}

.nav-cart:hover {
    background: rgba(36, 29, 25, .06);

    transform: translateY(-2px);
}

.nav-cart svg {
    width: 20px;
    height: 20px;
}

.nav-cart-count {
    position: absolute;

    top: 2px;
    right: 0;

    min-width: 16px;
    height: 16px;

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

    padding: 0 4px;

    box-sizing: border-box;

    border-radius: 999px;

    background: var(--espresso);
    color: #fff;

    font-size: 9px;
    font-weight: 700;

    line-height: 1;
}


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

.mobile-menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: var(--espresso);

    cursor: pointer;
}

.mobile-menu-toggle svg {
    width: 22px;
    height: 22px;
}


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

@media (max-width: 900px) {

    .nav {
        min-height: 72px;

        padding: 14px 20px;
    }

    .nav-links {
        display: none;
    }

    .mobile-menu-toggle {
        display: inline-flex;

        align-items: center;
        justify-content: center;
    }
}
/* =========================================================
   07 — HERO
   ========================================================= */

.hero {
    position: relative;

    min-height: 100vh;
    min-height: 900px;

    padding: 150px var(--padding) 90px;

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

    overflow: hidden;

    background:
            radial-gradient(
                    700px 500px at 50% 20%,
                    rgba(185, 150, 99, .09),
                    transparent 70%
            ),
            var(--ivory);
}


/* HERO CONTENT */

.hero-content {
    position: relative;
    z-index: 10;

    width: min(900px, 100%);

    text-align: center;
}

.hero-title {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(48px, 7vw, 100px);
    font-weight: 500;

    line-height: .95;
    letter-spacing: -.055em;
}

.hero-title .highlight {
    display: inline-block;

    font-style: italic;
    font-weight: 400;

    color: var(--olive);
}

.hero-subtitle {
    max-width: 580px;

    margin: 28px auto 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.8;
}


/* HERO BUTTON */

.hero-actions {
    margin-top: 34px;

    display: flex;
    justify-content: center;
}

.hero-cta {
    position: relative;

    min-height: 50px;
    padding: 0 27px;

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

    overflow: hidden;
    isolation: isolate;

    border-radius: 999px;

    cursor: pointer;

    background: var(--btn-bg);
    color: var(--btn-fg);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .04em;

    transition:
            transform .35s var(--ease),
            background .35s ease,
            box-shadow .35s ease,
            color .35s ease;
}

.hero-cta:hover {
    transform: translateY(-3px);

    background: var(--btn-bg-hover);

    box-shadow: 0 14px 30px rgba(36, 29, 25, .15);
}


/* HERO VISUAL */

.hero-visual {
    position: relative;

    width: 100%;
    max-width: 1400px;

    margin-top: 35px;

    min-height: 390px;
}


/* LARGE TYPOGRAPHY */

.big-results-wrap {
    position: absolute;

    inset: 70px 0 auto;
    z-index: 1;

    display: flex;
    justify-content: center;

    pointer-events: none;
}

.big-results {
    white-space: nowrap;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(80px, 17vw, 250px);

    font-style: italic;
    font-weight: 400;

    line-height: .8;
    letter-spacing: -.08em;

    color: var(--display-ghost);

    user-select: none;
}

.big-results .letter {
    display: inline-block;
}


/* =========================================================
   08 — HERO IMAGE CARDS
   ========================================================= */

.cards-row {
    position: absolute;

    inset: 30px 0 auto;
    height: 330px;

    z-index: 5;

    pointer-events: none;
}

.cards-row > * {
    pointer-events: auto;
}

.card {
    position: absolute;

    overflow: hidden;

    border-radius: 18px;

    border: 1px solid var(--card-border);
    background: var(--sand);

    box-shadow: 0 20px 45px rgba(36, 29, 25, .16);

    transition:
            box-shadow .5s ease,
            border-color .4s ease;

    will-change: transform;

    transform-origin: center center;
}

.card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
            transform .8s var(--ease),
            filter .5s ease;
}

.card:hover {
    box-shadow: 0 30px 65px rgba(36, 29, 25, .22);
}

.card:hover img {
    transform: scale(1.045);
}


/* CARD POSITIONS */

.card-1 { width: 125px; height: 175px; left: 4%;  top: 50px; z-index: 1; }
.card-2 { width: 155px; height: 215px; left: 13%; top: 30px; z-index: 2; }
.card-3 { width: 190px; height: 255px; left: 24%; top: 45px; z-index: 4; }
.card-4 { width: 145px; height: 195px; left: 37%; top: 75px; z-index: 3; }
.card-5 { width: 225px; height: 305px; left: 43%; top: 0;    z-index: 6; }
.card-6 { width: 155px; height: 210px; left: 59%; top: 60px; z-index: 3; }
.card-7 { width: 170px; height: 235px; left: 70%; top: 40px; z-index: 4; }
.card-8 { width: 125px; height: 170px; left: 85%; top: 60px; z-index: 2; }


/* HERO TRUST LINE */

.subline {
    position: absolute;

    left: 0;
    right: 0;
    bottom: -35px;

    z-index: 10;

    text-align: center;
}

.subline-text {
    color: var(--muted);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .16em;
    text-transform: uppercase;
}


/* =========================================================
   09 — SHARED SECTION HEADER
   ========================================================= */

.section-header {
    width: min(var(--container), 100%);

    margin: 0 auto 100px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 400px);

    gap: 60px;
    align-items: end;
}

.section-title {
    margin: 0 0 20px 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(44px, 5.2vw, 72px);
    font-weight: 600;

    line-height: 1.0;
    letter-spacing: -.06em;

    position: relative;
}

.section-title::before {
    content: attr(data-eyebrow);

    display: block;

    margin-bottom: 20px;

    color: var(--muted);

    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;

    letter-spacing: .26em;
    text-transform: uppercase;
}

.section-subtitle {
    max-width: 420px;
    margin: 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.85;
}




.product-highlights {
    position: relative;
    overflow: hidden;

    padding: 170px var(--padding) 155px;

    background:
            radial-gradient(
                    circle at 15% 20%,
                    rgba(181, 151, 102, .055),
                    transparent 34%
            ),
            radial-gradient(
                    circle at 85% 75%,
                    rgba(74, 67, 47, .045),
                    transparent 30%
            ),
            var(--ivory-light);
}


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

.product-highlights .section-header {
    width: min(760px, 100%);
    margin: 0 auto 65px;

    text-align: center;
}

.product-highlights .section-title {
    position: relative;

    margin: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 400;

    line-height: .98;
    letter-spacing: -.045em;

    color: var(--espresso);
}

.product-highlights .section-title::before {
    content: attr(data-eyebrow);

    display: block;

    margin-bottom: 18px;

    color: var(--gold);

    font-family:
            Inter,
            Arial,
            sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .22em;
    text-transform: uppercase;
}

.product-highlights .section-subtitle {
    max-width: 560px;

    margin: 22px auto 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.8;
}


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

.products-grid {
    width: min(var(--container), 100%);
    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.product-card {
    position: relative;

    overflow: hidden;

    background:
            linear-gradient(
                    145deg,
                    rgba(255,255,255,.72),
                    rgba(248,243,234,.55)
            );

    border: 1px solid rgba(63, 49, 35, .09);

    border-radius: 2px;

    box-shadow:
            0 10px 30px rgba(35, 27, 19, .035);

    transition:
            transform .65s cubic-bezier(.22,.61,.36,1),
            box-shadow .65s cubic-bezier(.22,.61,.36,1),
            border-color .4s ease,
            opacity .3s ease;

    will-change: transform;
}

.product-card::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;
    z-index: 2;

    background:
            linear-gradient(
                    135deg,
                    rgba(255,255,255,.35),
                    transparent 35%
            );

    opacity: 0;

    transition: opacity .5s ease;
}

.product-card:hover {
    transform: translateY(-12px) scale(1.02);

    border-color: rgba(80, 63, 43, .18);

    box-shadow:
            0 28px 65px rgba(39, 29, 20, .13);

    opacity: 1;
}

.product-card:hover::before {
    opacity: 1;
}


/* =========================================================
   BADGE
   ========================================================= */

.product-badge {
    position: absolute;

    top: 16px;
    left: 16px;

    z-index: 10;

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

    min-height: 27px;

    padding: 0 11px;

    border-radius: 999px;

    background: rgba(247, 242, 232, .78);

    border: 1px solid rgba(54, 43, 31, .10);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    color: var(--espresso);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .14em;
    text-transform: uppercase;

    box-shadow:
            0 5px 18px rgba(30, 23, 17, .07);
}

.product-badge.bestseller {
    background: var(--espresso);
    color: var(--white);

    border-color: var(--espresso);
}

.product-badge.new {
    background: rgba(255,255,255,.72);
    color: var(--olive-dark);
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.product-image {
    position: relative;

    aspect-ratio: 4 / 4.85;

    overflow: hidden;

    background:
            linear-gradient(
                    145deg,
                    #eee7dc,
                    #ddd2c2
            );

    isolation: isolate;
}


/* IMAGE */

.product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform: scale(1.001);

    filter:
            saturate(.94)
            contrast(.98);

    transition:
            transform 1.1s cubic-bezier(.16,1,.3,1),
            filter .7s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.075);

    filter:
            saturate(1)
            contrast(1.02);
}


/* IMAGE LIGHT */

.product-image::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
            linear-gradient(
                    125deg,
                    rgba(255,255,255,.18),
                    transparent 38%,
                    transparent 65%,
                    rgba(20,15,10,.08)
            );

    opacity: .45;

    transition:
            opacity .6s ease;
}

.product-card:hover .product-image::before {
    opacity: .8;
}


/* IMAGE BOTTOM GRADIENT */

.product-image::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
            linear-gradient(
                    to bottom,
                    transparent 45%,
                    rgba(15,11,8,.30) 100%
            );

    opacity: 0;

    transition:
            opacity .5s ease;
}

.product-card:hover .product-image::after {
    opacity: 1;
}


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

.product-overlay {
    position: absolute;

    left: 16px;
    right: 16px;
    bottom: 16px;

    z-index: 8;

    display: grid;

    grid-template-columns:
        .75fr 1.25fr;

    gap: 7px;

    opacity: 0;

    transform:
            translateY(16px);

    transition:
            opacity .4s ease,
            transform .55s cubic-bezier(.22,.61,.36,1);
}

.product-card:hover .product-overlay,
.product-card:focus-within .product-overlay {
    opacity: 1;

    transform:
            translateY(0);
}



/* =========================================================
   PREMIUM PRODUCT BUTTONS
   ========================================================= */

.quick-view-btn,
.add-to-cart-btn {
    position: relative;

    min-height: 54px;
    padding: 0 28px;

    border: 0;
    border-radius: 999px;

    cursor: pointer;

    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    line-height: 1;

    text-transform: uppercase;

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

    white-space: nowrap;

    transition:
            transform .35s cubic-bezier(.22, 1, .36, 1),
            background .35s ease,
            color .35s ease,
            box-shadow .35s ease,
            border-color .35s ease,
            opacity .2s ease;
}


/* =========================================================
   QUICK VIEW
   ========================================================= */

.quick-view-btn {
    min-width: 150px;

    background:
            rgba(255, 255, 255, .88);

    color:
            var(--espresso);

    backdrop-filter:
            blur(18px) saturate(130%);

    -webkit-backdrop-filter:
            blur(18px) saturate(130%);

    border:
            1px solid rgba(20, 15, 10, .08);

    box-shadow:
            0 10px 30px rgba(20, 15, 10, .10),
            inset 0 1px 0 rgba(255,255,255,.75);
}


/* =========================================================
   ADD TO CART
   ========================================================= */

.add-to-cart-btn {
    min-width: 170px;

    background:
            var(--espresso);

    color:
            var(--white);

    border:
            1px solid rgba(35, 25, 17, .12);

    box-shadow:
            0 10px 30px rgba(35, 25, 17, .18),
            inset 0 1px 0 rgba(255,255,255,.08);
}


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

.quick-view-btn:hover,
.add-to-cart-btn:hover {
    transform:
            translateY(-4px) scale(1.035);
}


/* Quick View Hover */

.quick-view-btn:hover {
    background:
            rgba(255, 255, 255, .98);

    box-shadow:
            0 16px 38px rgba(20, 15, 10, .16),
            inset 0 1px 0 rgba(255,255,255,1);

    border-color:
            rgba(20, 15, 10, .12);
}


/* Add To Cart Hover */

.add-to-cart-btn:hover {
    background:
            var(--btn-bg-hover);

    box-shadow:
            0 16px 38px rgba(35, 25, 17, .24),
            inset 0 1px 0 rgba(255,255,255,.10);

    border-color:
            rgba(35, 25, 17, .18);
}


/* =========================================================
   ACTIVE
   ========================================================= */

.quick-view-btn:active,
.add-to-cart-btn:active {
    transform:
            translateY(-1px) scale(.99);

    transition-duration:
            .12s;
}


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

@media (max-width: 768px) {

    .quick-view-btn,
    .add-to-cart-btn {
        min-height: 52px;
        padding: 0 24px;
        font-size: 10px;
    }

    .quick-view-btn {
        min-width: 140px;
    }

    .add-to-cart-btn {
        min-width: 155px;
    }
}


/* =========================================================
   PRODUCT INFO
   ========================================================= */

.product-info {
    position: relative;

    padding:
            24px
            21px
            26px;
}


/* SMALL DECORATIVE LINE */

.product-info::before {
    content: "";

    display: block;

    width: 25px;
    height: 1px;

    margin-bottom: 17px;

    background:
            var(--gold);

    opacity: .75;

    transition:
            width .4s ease;
}

.product-card:hover .product-info::before {
    width: 42px;
}


/* PRODUCT TITLE */

.product-title {
    margin:
            0 0 12px;

    font-family:
            Georgia,
            "Times New Roman",
            serif;

    font-size: 22px;
    font-weight: 600;

    line-height: 1.2;

    letter-spacing: -.03em;

    color:
            var(--espresso);
}


/* DESCRIPTION */

.product-description {
    margin: 0 0 16px;

    min-height: 48px;

    color:
            var(--muted);

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   PRICE
   ========================================================= */

.product-price {
    display: flex;
    align-items: center;

    margin-top: 22px;
    padding-top: 12px;
    border-top: 1px solid rgba(63, 49, 35, .08);
}

.price {
    color:
            var(--espresso);

    font-size: 16px;
    font-weight: 800;

    letter-spacing: -.01em;
}


/* =========================================================
   RATING
   ========================================================= */

.product-rating {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 12px;
}

.stars {
    color:
            var(--gold);

    font-size: 11px;

    letter-spacing: .1em;

    transition: transform .2s ease, color .2s ease;
}

.product-card:hover .stars {
    transform: scale(1.1);
    color: var(--gold-dark, #5a622e);
}

.count {
    color:
            var(--muted);

    font-size: 9px;

    letter-spacing: .02em;
}


/* =========================================================
   FOOTER
   ========================================================= */

.section-footer,
.ingredient-footer {
    display: flex;
    justify-content: center;

    margin-top: 65px;
}

.view-all-btn {
    position: relative;

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

    padding:
            0 0 9px;

    color:
            var(--espresso);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;

    transition:
            color .3s ease;
}

.view-all-btn::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background:
            var(--espresso);

    transform-origin: right;

    transform:
            scaleX(.32);

    transition:
            transform .5s cubic-bezier(.22,.61,.36,1);
}

.view-all-btn:hover {
    color:
            var(--gold);
}

.view-all-btn:hover::after {
    background:
            var(--gold);

    transform-origin: left;

    transform:
            scaleX(1);
}


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

@media (max-width: 1100px) {

    .products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

    .product-highlights {
        padding:
                110px
                var(--padding)
                105px;
    }
}


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

@media (max-width: 640px) {

    .product-highlights {
        padding:
                90px
                var(--padding)
                85px;
    }

    .product-highlights .section-header {
        margin-bottom: 45px;
    }

    .product-highlights .section-title {
        font-size:
                clamp(38px, 12vw, 52px);
    }

    .product-highlights .section-subtitle {
        font-size: 12px;

        max-width: 330px;
    }

    .products-grid {
        grid-template-columns:
            1fr;

        gap: 16px;
    }

    .product-image {
        aspect-ratio:
                4 / 4.7;
    }

    .product-info {
        padding:
                21px
                19px
                23px;
    }

    /*
     * Keep actions visible on touch devices.
     * There is no hover state on phones.
     */
    .product-overlay {
        opacity: 1;

        transform:
                translateY(0);

        bottom: 14px;
        left: 14px;
        right: 14px;
    }

    .quick-view-btn,
    .add-to-cart-btn {
        min-height: 42px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .product-card,
    .product-image img,
    .product-overlay,
    .product-image::before,
    .product-image::after,
    .product-info::before,
    .view-all-btn::after {
        transition: none !important;
    }

    .product-card:hover {
        transform: none;
    }

    .product-card:hover .product-image img {
        transform: none;
    }
}


/* =========================================================
   11 — INGREDIENTS
   ========================================================= */

.ingredient-spotlight {
    position: relative;

    padding: 150px var(--padding) 155px;

    background:
            linear-gradient(
                    180deg,
                    var(--section-alt-a) 0%,
                    var(--section-alt-b) 100%
            );
}

.ingredients-grid {
    width: min(var(--container), 100%);
    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;

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

    border-radius: var(--radius-lg);
    overflow: hidden;
}


/* INGREDIENT CARD — GLASS */

.ingredient-card {
    position: relative;

    min-height: 300px;
    padding: 34px;

    background: var(--glass-bg);

    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);

    transition:
            background .35s ease,
            transform .4s var(--ease);

    will-change: transform;
}

.ingredient-card:hover {
    background: var(--glass-hover-bg);
    transform: translateY(-4px);
    z-index: 2;
}


/* ICON */

.ingredient-icon {
    width: 46px;
    height: 46px;

    margin-bottom: 26px;

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

    border: 1px solid var(--border);
    border-radius: 50%;

    background: var(--ivory-light);
    color: var(--olive-dark);

    contain: content;
}

.ingredient-icon svg {
    width: 21px;
    height: 21px;
}


/* NAME */

.ingredient-name {
    margin: 0 0 12px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;

    line-height: 1.1;
    letter-spacing: -.025em;
}


/* DESCRIPTION */

.ingredient-description {
    max-width: 390px;
    margin: 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.75;
}


/* BENEFITS */

.ingredient-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 24px;
}

.benefit-tag {
    padding: 6px 9px;

    border: 1px solid var(--border);
    border-radius: 999px;

    color: var(--brown);
    background: var(--benefit-bg);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: .06em;
    text-transform: uppercase;
}


/* =========================================================
   12 — BRAND STORY
   ========================================================= */

.brand-story {
    padding: 165px var(--padding) 150px;

    background: var(--ivory);
}

.brand-head {
    width: min(var(--container), 100%);
    margin: 0 auto 65px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 400px);

    gap: 70px;
    align-items: end;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 17px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .25em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--gold);
}

.brand-head h2 {
    margin: 0;
    max-width: 700px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(45px, 5.5vw, 78px);
    font-weight: 500;

    line-height: .94;
    letter-spacing: -.06em;
}

.brand-head h2 em {
    color: var(--olive);

    font-style: italic;
    font-weight: 400;
}

.brand-head p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.8;
}


/* BRAND GRID */

.brand-grid {
    width: min(var(--container), 100%);
    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;

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

    border-radius: var(--radius-lg);
    overflow: hidden;
}


/* BRAND CARD — GLASS */

.b-card {
    position: relative;

    min-height: 275px;
    padding: 35px 28px;

    background: var(--glass-bg);

    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);

    transition: background .35s ease;

    will-change: transform, opacity;
}

.b-card:hover {
    background: var(--glass-hover-bg);
}


/* ICON */

.b-icon {
    width: 50px;
    height: 50px;

    margin-bottom: 25px;

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

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

    color: var(--olive-dark);

    contain: content;
}

.b-icon svg {
    width: 25px;
    height: 25px;
}


/* BRAND TITLE */

.b-title {
    margin: 0 0 12px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 500;

    letter-spacing: -.02em;
}


/* BRAND TEXT */

.b-text {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.75;
}


/* =========================================================
   13 — STATS
   ========================================================= */

.stats {
    padding: 40px var(--padding) 110px;

    background: var(--ivory);
}

.stats-inner {
    position: relative;

    width: min(var(--container), 100%);
    margin: 0 auto;

    padding: 70px 60px;

    display: grid;

    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    align-items: end;

    overflow: hidden;

    border: 1px solid transparent;
    border-radius: 30px;

    background: var(--panel-bg);
    color: var(--panel-fg);

    box-shadow: 0 25px 70px rgba(36, 29, 25, .16);
}

.stats-inner::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    top: -300px;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(185, 150, 99, .18),
                    transparent 70%
            );

    pointer-events: none;
}

.stats h3 {
    position: relative;
    z-index: 2;

    margin: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 3.5vw, 48px);
    font-weight: 500;

    line-height: .98;
    letter-spacing: -.045em;
}

.stats h3 em {
    color: var(--panel-accent);
    font-style: italic;
}

.stats h3 .stats-main,
.stats h3 .stats-sub {
    display: block;
}

.stats h3 .stats-main {
    margin-bottom: 8px;
}

.stat-block {
    position: relative;
    z-index: 2;
}

.stat-block .num {
    display: flex;
    align-items: baseline;
    gap: 4px;

    font-size: clamp(42px, 4.5vw, 65px);
    font-weight: 600;

    line-height: 1;
    letter-spacing: -.06em;
}

.stat-block .num small {
    color: var(--panel-muted);

    font-size: .4em;
    font-weight: 400;

    letter-spacing: 0;
}

.stat-block .lbl {
    margin-top: 14px;
    padding-top: 12px;

    border-top: 1px solid var(--panel-border);

    color: var(--panel-muted);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: .16em;
    text-transform: uppercase;
}


/* =========================================================
   14 — MICRO-INTERACTION: RIPPLE
   ========================================================= */

.ripple {
    position: absolute;

    display: block;

    border-radius: 50%;

    pointer-events: none;

    background: var(--ripple);
    opacity: .32;

    transform: scale(0);

    animation: luxe-ripple .7s var(--ease) forwards;
}

@keyframes luxe-ripple {
    from {
        transform: scale(0);
        opacity: .32;
    }
    to {
        transform: scale(2.4);
        opacity: 0;
    }
}


/* =========================================================
   15 — PERFORMANCE
   ========================================================= */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .product-card,
    .ingredient-card,
    .b-card {
        will-change: transform;
    }
}

.card,
.product-card,
.ingredient-card,
.b-card {
    backface-visibility: hidden;
}


/* =========================================================
   16 — TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .hero {
        min-height: 850px;
    }

    .card-1 { left: 1%; }
    .card-2 { left: 8%; }
    .card-3 { left: 18%; }
    .card-4 { left: 33%; }
    .card-5 { left: 41%; }
    .card-6 { left: 57%; }
    .card-7 { left: 70%; }
    .card-8 { left: 87%; }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ingredients-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .brand-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-inner {
        grid-template-columns: 1.3fr 1fr 1fr;
        padding: 55px 40px;
    }

    .stats h3 {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   17 — MOBILE
   ========================================================= */

@media (max-width: 750px) {

    :root {
        --padding: 20px;
    }


    /* NAV */

    .nav {
        min-height: 68px;
        padding: 14px 20px;
    }

    .nav-links {
        display: none;
    }

    .logo {
        font-size: 16px;
    }


    /* HERO */

    .hero {
        min-height: 760px;
        padding: 120px 20px 70px;
    }

    .hero-title {
        font-size: clamp(44px, 13vw, 70px);
    }

    .hero-subtitle {
        max-width: 450px;
        font-size: 13px;
    }

    .hero-visual {
        min-height: 290px;
        margin-top: 30px;
    }

    .big-results-wrap {
        top: 55px;
    }

    .big-results {
        font-size: 20vw;
    }

    .cards-row {
        height: 250px;
    }


    /* HIDE OUTER CARDS ON SMALL SCREENS */

    .card-1,
    .card-2,
    .card-7,
    .card-8 {
        display: none;
    }

    .card-3 {
        width: 115px;
        height: 165px;
        left: 7%;
        top: 50px;
    }

    .card-4 {
        width: 105px;
        height: 145px;
        left: 25%;
        top: 80px;
    }

    /* NOTE: no CSS transform here — GSAP owns the transform */
    .card-5 {
        width: 145px;
        height: 205px;
        left: calc(50% - 72.5px);
        top: 0;
    }

    .card-6 {
        width: 105px;
        height: 145px;
        left: auto;
        right: 8%;
        top: 70px;
    }

    .subline {
        bottom: -25px;
    }

    .subline-text {
        font-size: 8px;
        letter-spacing: .10em;
    }


    /* SECTIONS */

    .product-highlights,
    .ingredient-spotlight,
    .brand-story {
        padding: 90px 20px;
    }

    .stats {
        padding: 20px 20px 80px;
    }


    /* SECTION HEADER */

    .section-header {
        display: block;
        margin-bottom: 40px;
    }

    .section-title {
        font-size: clamp(40px, 12vw, 58px);
    }

    .section-subtitle {
        margin-top: 20px;
        max-width: 500px;
        font-size: 13px;
    }


    /* PRODUCTS */

    .products-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .product-card {
        border-radius: 18px;
    }

    /* Always reveal actions on touch devices */
    .product-overlay {
        opacity: 1;
        transform: none;
    }


    /* INGREDIENTS */

    .ingredients-grid {
        grid-template-columns: 1fr;
        border-radius: 18px;
    }

    .ingredient-card {
        min-height: auto;
        padding: 28px;
    }

    .ingredient-card:hover {
        transform: none;
    }


    /* BRAND */

    .brand-head {
        display: block;
        margin-bottom: 45px;
    }

    .brand-head h2 {
        font-size: clamp(43px, 12vw, 62px);
    }

    .brand-head p {
        max-width: 500px;
        margin-top: 25px;
    }

    .brand-grid {
        grid-template-columns: 1fr;
        border-radius: 18px;
    }

    .b-card {
        min-height: auto;
        padding: 30px 25px;
    }


    /* STATS */

    .stats-inner {
        grid-template-columns: 1fr 1fr;
        gap: 35px 20px;
        padding: 45px 25px;
        border-radius: 22px;
    }

    .stats h3 {
        grid-column: 1 / -1;
        font-size: 35px;
    }

    .stat-block .num {
        font-size: 40px;
    }

    .stat-block .lbl {
        font-size: 8px;
        letter-spacing: .09em;
    }
}


/* =========================================================
   18 — SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .hero {
        min-height: 700px;
    }

    .hero-title {
        font-size: 43px;
    }

    .hero-subtitle {
        font-size: 12px;
    }

    .hero-cta {
        min-height: 46px;
        padding: 0 22px;
    }

    .hero-visual {
        min-height: 240px;
    }

    .cards-row {
        top: 15px;
    }

    .card-3 {
        width: 92px;
        height: 135px;
        left: 4%;
    }

    .card-4 {
        width: 84px;
        height: 120px;
        left: 23%;
        top: 65px;
    }

    .card-5 {
        width: 120px;
        height: 170px;
        left: calc(50% - 60px);
    }

    .card-6 {
        width: 84px;
        height: 120px;
        right: 5%;
        top: 60px;
    }

    .product-highlights,
    .ingredient-spotlight,
    .brand-story {
        padding-top: 75px;
        padding-bottom: 80px;
    }

    .section-title {
        font-size: 39px;
    }

    .product-info {
        padding: 19px;
    }

    .ingredient-card {
        padding: 24px;
    }

    .ingredient-name {
        font-size: 21px;
    }

    .brand-head h2 {
        font-size: 42px;
    }

    .stats-inner {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 40px 25px;
    }

    .stats h3 {
        grid-column: auto;
    }

    .stat-block .num {
        font-size: 48px;
    }
}


/* =========================================================
   19 — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .ripple {
        display: none !important;
    }

    .card,
    .product-card,
    .ingredient-card,
    .b-card {
        will-change: auto !important;
    }
}

/* =========================================================
   WORDPRESS / ASTRA CHILD THEME OVERRIDES
   ========================================================= */

body.home .site-header,
body.home .site-footer,
body.home .ast-footer-overlay,
body.home .ast-builder-footer-grid-columns {
    display: none;
}

body.home .site-content,
body.home .content-area,
body.home .site-main {
    margin: 0;
    padding: 0;
}

body.home .ast-container,
body.home .entry-content {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.luxe-site {
    position: relative;
}

.nav {
    width: 100%;
}

.nav-menu-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.6vw, 38px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-links li {
    margin: 0;
    padding: 0;
}

.nav-links a {
    display: inline-block;
}

.nav-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--espresso);
    border-radius: 50%;
    transition: background .25s ease, transform .25s ease;
}

.nav-cart:hover {
    background: rgba(36,29,25,.06);
    transform: translateY(-1px);
}

.nav-cart svg {
    width: 18px;
    height: 18px;
}

.nav-cart-count {
    position: absolute;
    top: -1px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--espresso);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
}

.mobile-menu-toggle {
    display: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: var(--espresso);
    align-items: center;
    justify-content: center;
}

.mobile-menu-toggle svg {
    width: 18px;
    height: 18px;
}

.mobile-menu-panel {
    display: none;
}

.quick-view-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(36,29,25,.42);
    backdrop-filter: blur(10px);
}

.quick-view-modal.is-open {
    display: flex;
}

.quick-view-dialog {
    position: relative;
    width: min(900px, 100%);
    max-height: min(760px, 90vh);
    overflow: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--ivory-light);
    border: 1px solid var(--border);
    border-radius: 26px;
    box-shadow: 0 30px 100px rgba(36,29,25,.25);
}

.quick-view-media {
    min-height: 480px;
    background: var(--sand);
}

.quick-view-media img {
    width: 100%;
    height: 100%;
    min-height: 480px;
    object-fit: cover;
}

.quick-view-content {
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quick-view-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.88);
    color: var(--espresso);
    font-size: 20px;
}

.quick-view-content h2 {
    margin: 0 0 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1;
    letter-spacing: -.04em;
}

.quick-view-price {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 700;
}

.quick-view-description {
    margin: 0 0 24px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

.quick-view-actions {
    display: flex;
    gap: 10px;
}

.quick-view-actions a {
    min-height: 44px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: 11px;
    font-weight: 700;
}

.luxe-mobile-menu-open {
    overflow: hidden;
}

@media (max-width: 900px) {
    .nav-links {
        gap: 18px;
    }
}

@media (max-width: 750px) {
    .nav-menu-wrap {
        gap: 8px;
    }

    .nav-links {
        display: none;
    }

    .mobile-menu-toggle {
        display: inline-flex;
    }

    .mobile-menu-panel {
        position: fixed;
        top: 68px;
        left: 0;
        right: 0;
        z-index: 999;
        padding: 24px 20px 30px;
        background: rgba(247,244,238,.97);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border-light);
        box-shadow: 0 20px 50px rgba(36,29,25,.10);
    }

    .mobile-menu-panel.is-open {
        display: block;
    }

    .mobile-menu-panel .nav-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .mobile-menu-panel .nav-links a {
        font-size: 15px;
    }

    .quick-view-dialog {
        grid-template-columns: 1fr;
        max-height: 92vh;
    }

    .quick-view-media,
    .quick-view-media img {
        min-height: 280px;
        max-height: 360px;
    }

    .quick-view-content {
        padding: 30px 24px 35px;
    }
}

/* =========================================================
   FINAL ASTRA / WORDPRESS LAYOUT FIXES
   Preserve the original Luxe Hair design exactly.
   ========================================================= */

html,
body,
body.luxe-hair-home,
body.home {
    width: 100%;
    max-width: none !important;
}

body.luxe-hair-home #page,
body.luxe-hair-home .site,
body.luxe-hair-home .site-content,
body.luxe-hair-home .content-area,
body.luxe-hair-home #primary,
body.luxe-hair-home .site-main,
body.luxe-hair-home .ast-container,
body.luxe-hair-home .entry-content,
body.home #page,
body.home .site,
body.home .site-content,
body.home .content-area,
body.home #primary,
body.home .site-main,
body.home .ast-container,
body.home .entry-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.luxe-hair-home .luxe-site,
body.home .luxe-site {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Prevent Astra's article/page wrappers from creating a centered column. */
body.luxe-hair-home article,
body.luxe-hair-home .entry-header,
body.luxe-hair-home .entry-content {
    max-width: none !important;
}

/* Original navigation geometry */
body.luxe-hair-home .nav,
body.home .nav {
    width: 100%;
    max-width: none;
    left: 0;
    right: 0;
}

body.luxe-hair-home .nav-menu-wrap,
body.home .nav-menu-wrap {
    flex: 1;
}

body.luxe-hair-home .nav-menu-wrap .nav-links,
body.home .nav-menu-wrap .nav-links {
    margin-left: auto;
}

/* Mobile panel must never appear on desktop. */
body.luxe-hair-home .mobile-menu-panel,
body.home .mobile-menu-panel {
    display: none !important;
}

body.luxe-hair-home .mobile-menu-panel.is-open,
body.home .mobile-menu-panel.is-open {
    display: block !important;
}

/* Keep the original hero in normal document order. */
body.luxe-hair-home .hero,
body.home .hero {
    width: 100%;
    max-width: none;
}

body.luxe-hair-home .hero-content,
body.home .hero-content {
    order: 1;
}

body.luxe-hair-home .hero-visual,
body.home .hero-visual {
    order: 2;
}

/* Do not let WordPress buttons override the original CTA styling. */
body.luxe-hair-home .hero-cta,
body.home .hero-cta {
    border: 0;
    box-shadow: none;
}

/* WooCommerce must inherit the Luxe Hair typography. */
body.luxe-hair-home .woocommerce,
body.luxe-hair-home .woocommerce-page {
    font-family: "DM Sans", system-ui, sans-serif;
}

/* Product links must keep the original card typography. */
body.luxe-hair-home .product-title a {
    color: inherit;
}

/* Avoid Astra/WooCommerce default list indentation. */
body.luxe-hair-home .products-grid,
body.luxe-hair-home .ingredients-grid,
body.luxe-hair-home .brand-grid,
body.luxe-hair-home .nav-links {
    list-style: none;
}

@media (max-width: 750px) {
    body.luxe-hair-home .mobile-menu-panel.is-open,
    body.home .mobile-menu-panel.is-open {
        display: block !important;
    }
}
/* =========================================================
   LUXE HAIR — PREMIUM GLASS SYSTEM
   Visual hierarchy:
   NAV        → frosted glass on scroll
   PRODUCTS   → subtle luxury glass
   BADGES     → stronger glass
   INGREDIENTS→ premium glass
   BRAND      → premium glass
   QUICK VIEW → strong frosted glass
   HERO       → very subtle glass atmosphere
   BUTTONS    → glass only for secondary actions
   BACKGROUND → ivory / cream remains dominant
   ========================================================= */


/* =========================================================
   01 — GLASS TOKENS
   ========================================================= */

:root {
    --glass-soft-bg:
            linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.62),
                    rgba(248, 243, 234, 0.42)
            );

    --glass-premium-bg:
            linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.58),
                    rgba(255, 255, 255, 0.36)
            );

    --glass-strong-bg:
            linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.76),
                    rgba(247, 244, 238, 0.64)
            );

    --glass-soft-border:
            rgba(255, 255, 255, 0.68);

    --glass-premium-border:
            rgba(255, 255, 255, 0.56);

    --glass-strong-border:
            rgba(255, 255, 255, 0.80);

    --glass-soft-blur:
            blur(10px) saturate(1.08);

    --glass-premium-blur:
            blur(18px) saturate(1.12);

    --glass-strong-blur:
            blur(28px) saturate(1.20);

    --glass-inner-light:
            inset 0 1px 0 rgba(255, 255, 255, 0.62);

    --glass-soft-shadow:
            0 14px 38px rgba(36, 29, 25, 0.055);

    --glass-premium-shadow:
            0 18px 45px rgba(36, 29, 25, 0.075);

    --glass-strong-shadow:
            0 35px 100px rgba(36, 29, 25, 0.25);
}


/* =========================================================
   02 — NAVIGATION
   Frosted glass ONLY after scrolling
   ========================================================= */

.nav {
    background: transparent;

    border-bottom: 1px solid transparent;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    box-shadow: none;
}

.nav.scrolled {
    min-height: 68px;

    background:
            rgba(247, 244, 238, 0.72);

    border-bottom:
            1px solid rgba(255, 255, 255, 0.64);

    backdrop-filter:
            blur(22px) saturate(1.15);

    -webkit-backdrop-filter:
            blur(22px) saturate(1.15);

    box-shadow:
            0 8px 30px rgba(36, 29, 25, 0.055),
            inset 0 1px 0 rgba(255, 255, 255, 0.55);
}


/* =========================================================
   03 — HERO
   Very subtle atmospheric glass
   ========================================================= */

.hero {
    isolation: isolate;
}

.hero::before {
    content: "";

    position: absolute;

    width: 620px;
    height: 420px;

    top: 14%;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

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

    filter:
            blur(60px);

    pointer-events: none;

    z-index: 0;
}

.hero::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
            linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 0.16),
                    transparent 30%,
                    transparent 70%,
                    rgba(185, 150, 99, 0.035)
            );

    pointer-events: none;

    z-index: 0;
}

.hero-content,
.hero-visual {
    position: relative;
    z-index: 2;
}


/* =========================================================
   04 — HERO IMAGE CARDS
   Keep photography dominant
   ========================================================= */

.card {
    border:
            1px solid rgba(255, 255, 255, 0.68);

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

    box-shadow:
            0 20px 45px rgba(36, 29, 25, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.32);
}


/* =========================================================
   05 — PRODUCT CARDS
   Subtle luxury glass
   ========================================================= */

.product-card {
    background:
            var(--glass-soft-bg);

    border:
            1px solid var(--glass-soft-border);

    backdrop-filter:
            var(--glass-soft-blur);

    -webkit-backdrop-filter:
            var(--glass-soft-blur);

    box-shadow:
            var(--glass-soft-shadow),
            var(--glass-inner-light);

    transition:
            transform .65s cubic-bezier(.22,.61,.36,1),
            box-shadow .65s cubic-bezier(.22,.61,.36,1),
            border-color .4s ease,
            background .4s ease,
            opacity .3s ease;
}

.product-card:hover {
    background:
            linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.72),
                    rgba(248, 243, 234, 0.50)
            );

    border-color:
            rgba(255, 255, 255, 0.82);

    box-shadow:
            0 28px 65px rgba(39, 29, 20, 0.13),
            inset 0 1px 0 rgba(255, 255, 255, 0.72);
}


/* =========================================================
   06 — PRODUCT BADGES
   Stronger glass
   ========================================================= */

.product-badge {
    background:
            rgba(255, 255, 255, 0.70);

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

    backdrop-filter:
            blur(18px) saturate(1.20);

    -webkit-backdrop-filter:
            blur(18px) saturate(1.20);

    box-shadow:
            0 8px 24px rgba(30, 23, 17, 0.09),
            inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.product-badge.new {
    background:
            rgba(255, 255, 255, 0.72);

    color:
            var(--olive-dark);
}

.product-badge.bestseller {
    /*
     * Keep Sale / Bestseller dark.
     * This preserves the visual hierarchy.
     */
    background:
            rgba(36, 29, 25, 0.92);

    color:
            var(--white);

    border-color:
            rgba(36, 29, 25, 0.92);

    box-shadow:
            0 8px 24px rgba(30, 23, 17, 0.15);
}


/* =========================================================
   07 — PRODUCT QUICK VIEW BUTTON
   Glass secondary action
   ========================================================= */

.quick-view-btn {
    background:
            rgba(255, 255, 255, 0.68);

    color:
            var(--espresso);

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

    backdrop-filter:
            blur(18px) saturate(1.15);

    -webkit-backdrop-filter:
            blur(18px) saturate(1.15);

    box-shadow:
            0 8px 25px rgba(20, 15, 10, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.quick-view-btn:hover {
    background:
            rgba(255, 255, 255, 0.90);

    border-color:
            rgba(255, 255, 255, 0.95);

    box-shadow:
            0 12px 30px rgba(20, 15, 10, 0.13),
            inset 0 1px 0 rgba(255, 255, 255, 0.85);
}


/* =========================================================
   08 — ADD TO CART
   REMAINS SOLID — NOT GLASS
   ========================================================= */

.add-to-cart-btn {
    background:
            var(--espresso);

    color:
            var(--white);

    border:
            1px solid rgba(35, 25, 17, 0.10);

    box-shadow:
            0 8px 25px rgba(35, 25, 17, 0.15);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.add-to-cart-btn:hover {
    background:
            var(--btn-bg-hover);

    box-shadow:
            0 12px 30px rgba(35, 25, 17, 0.20);
}


/* =========================================================
   09 — INGREDIENT CARDS
   Premium glass
   ========================================================= */

.ingredient-card {
    background:
            var(--glass-premium-bg);

    border:
            1px solid var(--glass-premium-border);

    backdrop-filter:
            var(--glass-premium-blur);

    -webkit-backdrop-filter:
            var(--glass-premium-blur);

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.55);

    transition:
            background .35s ease,
            transform .4s var(--ease),
            box-shadow .35s ease;
}

.ingredient-card:hover {
    background:
            linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.70),
                    rgba(255, 255, 255, 0.46)
            );

    box-shadow:
            0 18px 45px rgba(36, 29, 25, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.72);

    transform:
            translateY(-4px);

    z-index: 2;
}


/* INGREDIENT ICON */

.ingredient-icon {
    background:
            rgba(255, 255, 255, 0.38);

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

    backdrop-filter:
            blur(10px);

    -webkit-backdrop-filter:
            blur(10px);

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.55);
}


/* BENEFIT TAGS */

.benefit-tag {
    background:
            rgba(255, 255, 255, 0.46);

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

    backdrop-filter:
            blur(8px);

    -webkit-backdrop-filter:
            blur(8px);

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.40);
}


/* =========================================================
   10 — BRAND CARDS
   Premium glass
   ========================================================= */

.b-card {
    background:
            var(--glass-premium-bg);

    border:
            1px solid var(--glass-premium-border);

    backdrop-filter:
            var(--glass-premium-blur);

    -webkit-backdrop-filter:
            var(--glass-premium-blur);

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.50);

    transition:
            background .35s ease,
            transform .4s var(--ease),
            box-shadow .35s ease;
}

.b-card:hover {
    background:
            linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.68),
                    rgba(255, 255, 255, 0.44)
            );

    box-shadow:
            0 18px 45px rgba(36, 29, 25, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.70);
}


/* BRAND ICON */

.b-icon {
    border-bottom:
            1px solid rgba(255, 255, 255, 0.48);
}


/* =========================================================
   11 — SECONDARY SECTION BUTTONS
   Glass only here
   ========================================================= */

.view-all-btn {
    min-height: 42px;

    padding:
            0 20px;

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

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

    border-radius:
            999px;

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

    backdrop-filter:
            blur(14px) saturate(1.10);

    -webkit-backdrop-filter:
            blur(14px) saturate(1.10);

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.58),
            0 8px 22px rgba(36, 29, 25, 0.035);

    transition:
            color .3s ease,
            background .3s ease,
            border-color .3s ease,
            transform .3s var(--ease),
            box-shadow .3s ease;
}

.view-all-btn::after {
    /*
     * Keep the existing luxury underline,
     * but make it work with the glass pill.
     */
    left: 20px;
    right: 20px;
    bottom: 7px;
    width: auto;
}

.view-all-btn:hover {
    color:
            var(--espresso);

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

    border-color:
            rgba(255, 255, 255, 0.82);

    transform:
            translateY(-2px);

    box-shadow:
            0 12px 30px rgba(36, 29, 25, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.78);
}


/* =========================================================
   12 — QUICK VIEW MODAL
   Strong frosted glass
   ========================================================= */

.quick-view-modal {
    background:
            rgba(36, 29, 25, 0.30);

    backdrop-filter:
            blur(16px) saturate(1.12);

    -webkit-backdrop-filter:
            blur(16px) saturate(1.12);
}

.quick-view-dialog {
    background:
            var(--glass-strong-bg);

    border:
            1px solid var(--glass-strong-border);

    backdrop-filter:
            var(--glass-strong-blur);

    -webkit-backdrop-filter:
            var(--glass-strong-blur);

    box-shadow:
            var(--glass-strong-shadow),
            inset 0 1px 0 rgba(255, 255, 255, 0.76);

    isolation: isolate;
}

.quick-view-dialog::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
            linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 0.28),
                    transparent 35%,
                    transparent 70%,
                    rgba(185, 150, 99, 0.04)
            );

    border-radius:
            inherit;
}


/* QUICK VIEW CLOSE */

.quick-view-close {
    background:
            rgba(255, 255, 255, 0.66);

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

    backdrop-filter:
            blur(14px);

    -webkit-backdrop-filter:
            blur(14px);

    box-shadow:
            0 6px 20px rgba(36, 29, 25, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.65);

    transition:
            transform .3s var(--ease),
            background .3s ease;
}

.quick-view-close:hover {
    background:
            rgba(255, 255, 255, 0.88);

    transform:
            scale(1.05);
}


/* =========================================================
   13 — MOBILE GLASS
   ========================================================= */

@media (max-width: 750px) {

    .nav.scrolled {
        background:
                rgba(247, 244, 238, 0.82);

        backdrop-filter:
                blur(20px) saturate(1.12);

        -webkit-backdrop-filter:
                blur(20px) saturate(1.12);
    }

    .mobile-menu-panel {
        background:
                rgba(247, 244, 238, 0.78) !important;

        border-bottom:
                1px solid rgba(255, 255, 255, 0.64);

        backdrop-filter:
                blur(24px) saturate(1.15);

        -webkit-backdrop-filter:
                blur(24px) saturate(1.15);

        box-shadow:
                0 20px 50px rgba(36, 29, 25, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.55);
    }

    .mobile-menu-toggle {
        background:
                rgba(255, 255, 255, 0.40);

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

        backdrop-filter:
                blur(12px);

        -webkit-backdrop-filter:
                blur(12px);
    }

    .product-card {
        backdrop-filter:
                blur(8px) saturate(1.06);

        -webkit-backdrop-filter:
                blur(8px) saturate(1.06);
    }

    .quick-view-dialog {
        backdrop-filter:
                blur(22px) saturate(1.16);

        -webkit-backdrop-filter:
                blur(22px) saturate(1.16);
    }
}


/* =========================================================
   14 — FALLBACK
   Browsers without backdrop-filter
   ========================================================= */

@supports not (
    backdrop-filter: blur(10px)
) {

    .nav.scrolled {
        background:
                rgba(247, 244, 238, 0.96);
    }

    .product-card {
        background:
                rgba(250, 247, 241, 0.96);
    }

    .product-badge,
    .quick-view-btn {
        background:
                rgba(255, 255, 255, 0.94);
    }

    .ingredient-card,
    .b-card {
        background:
                rgba(250, 247, 241, 0.94);
    }

    .quick-view-modal {
        background:
                rgba(36, 29, 25, 0.48);
    }

    .quick-view-dialog {
        background:
                rgba(251, 250, 247, 0.98);
    }

    .view-all-btn {
        background:
                rgba(255, 255, 255, 0.90);
    }
}


/* =========================================================
   15 — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .nav,
    .product-card,
    .ingredient-card,
    .b-card,
    .view-all-btn,
    .quick-view-close {
        transition: none !important;
    }
}

/* =========================================================
   CELLULAR DERMAL INTELLIGENCE
   INTENSE PREMIUM GLASSMORPHISM
   ========================================================= */

.dermal-intelligence {
    position: relative;
    overflow: hidden;

    padding: 125px var(--padding);

    /*
     * Keep the background visible through the glass.
     * This is important for a convincing glass effect.
     */
    background:
            radial-gradient(
                    circle at 12% 18%,
                    rgba(255, 255, 255, .72),
                    transparent 28%
            ),
            radial-gradient(
                    circle at 88% 78%,
                    rgba(188, 158, 112, .20),
                    transparent 32%
            ),
            radial-gradient(
                    circle at 50% 50%,
                    rgba(255, 255, 255, .35),
                    transparent 45%
            ),
            var(--ivory-light);
}


/* =========================================================
   AMBIENT LIGHT
   ========================================================= */

.dermal-intelligence::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    top: -330px;
    left: -180px;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(255,255,255,.85) 0%,
                    rgba(255,255,255,.28) 42%,
                    transparent 72%
            );

    filter: blur(25px);

    pointer-events: none;
}


.dermal-intelligence::after {
    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    right: -220px;
    bottom: -280px;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(196,169,128,.28) 0%,
                    rgba(196,169,128,.08) 45%,
                    transparent 72%
            );

    filter: blur(35px);

    pointer-events: none;
}


/* =========================================================
   MAIN GLASS PANEL
   ========================================================= */

.dermal-intelligence-inner {
    position: relative;
    z-index: 2;

    width: min(var(--container), 100%);

    margin: 0 auto;

    padding: 78px 72px;

    overflow: hidden;

    border-radius: 34px;

    /*
     * LOW opacity = more visible glass.
     */
    background:
            linear-gradient(
                    135deg,
                    rgba(255,255,255,.34),
                    rgba(255,255,255,.13)
            );

    /*
     * Strong glass edge.
     */
    border:
            1px solid rgba(255,255,255,.88);

    /*
     * Strong frosted glass.
     */
    backdrop-filter:
            blur(50px)
            saturate(190%);

    -webkit-backdrop-filter:
            blur(50px)
            saturate(190%);

    /*
     * Luxury layered shadow + inner reflections.
     */
    box-shadow:
            0 35px 100px rgba(35,26,18,.13),
            0 10px 35px rgba(35,26,18,.06),

            inset 0 1px 0 rgba(255,255,255,.98),
            inset 0 -1px 0 rgba(255,255,255,.25),
            inset 0 0 45px rgba(255,255,255,.13);
}


/* =========================================================
   GLASS REFLECTION
   ========================================================= */

.dermal-intelligence-inner::before {
    content: "";

    position: absolute;

    inset: 1px;

    border-radius: inherit;

    pointer-events: none;

    background:
            linear-gradient(
                    120deg,
                    rgba(255,255,255,.42) 0%,
                    rgba(255,255,255,.15) 18%,
                    transparent 38%,
                    transparent 68%,
                    rgba(255,255,255,.12) 88%,
                    rgba(255,255,255,.25) 100%
            );

    opacity: .9;
}


/* =========================================================
   GLASS LIGHT STREAK
   ========================================================= */

.dermal-intelligence-inner::after {
    content: "";

    position: absolute;

    width: 75%;
    height: 180px;

    top: -120px;
    left: 8%;

    transform: rotate(-8deg);

    border-radius: 50%;

    background:
            rgba(255,255,255,.22);

    filter: blur(35px);

    pointer-events: none;
}


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

.dermal-intelligence-content {
    position: relative;
    z-index: 5;

    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    gap: 70px;

    align-items: center;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.dermal-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

    color: var(--gold);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .22em;

    text-transform: uppercase;
}


.dermal-eyebrow::before {
    content: "";

    width: 28px;
    height: 1px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    var(--gold)
            );
}


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

.dermal-title {
    max-width: 680px;

    margin: 0;

    font-family:
            Georgia,
            "Times New Roman",
            serif;

    font-size:
            clamp(44px, 5vw, 72px);

    font-weight: 400;

    line-height: .96;

    letter-spacing: -.048em;

    color: var(--espresso);
}


.dermal-title em {
    font-style: italic;
    font-weight: 400;

    color: var(--olive-dark);
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.dermal-description {
    max-width: 540px;

    margin: 27px 0 0;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.85;
}


/* =========================================================
   STATS
   ========================================================= */

.dermal-stats {
    display: grid;

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

    gap: 12px;
}


/* =========================================================
   GLASS STAT CARD
   ========================================================= */

.dermal-stat {
    position: relative;

    min-height: 155px;

    padding: 25px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    border-radius: 22px;

    /*
     * Strong transparent glass.
     */
    background:
            linear-gradient(
                    135deg,
                    rgba(255,255,255,.42),
                    rgba(255,255,255,.12)
            );

    border:
            1px solid rgba(255,255,255,.80);

    backdrop-filter:
            blur(32px)
            saturate(180%);

    -webkit-backdrop-filter:
            blur(32px)
            saturate(180%);

    box-shadow:
            0 15px 40px rgba(35,25,17,.07),

            inset 0 1px 0 rgba(255,255,255,.95),
            inset 0 -1px 0 rgba(255,255,255,.20),
            inset 0 0 30px rgba(255,255,255,.12);

    transition:
            transform .5s cubic-bezier(.22,.61,.36,1),
            background .45s ease,
            border-color .45s ease,
            box-shadow .45s ease;
}


/* =========================================================
   STAT CARD HOVER
   ========================================================= */

.dermal-stat:hover {
    transform:
            translateY(-7px);

    background:
            linear-gradient(
                    135deg,
                    rgba(255,255,255,.56),
                    rgba(255,255,255,.18)
            );

    border-color:
            rgba(255,255,255,.95);

    box-shadow:
            0 22px 55px rgba(35,25,17,.11),

            inset 0 1px 0 rgba(255,255,255,1),
            inset 0 0 35px rgba(255,255,255,.18);
}


/* =========================================================
   STAT GLASS REFLECTION
   ========================================================= */

.dermal-stat::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 70px;

    top: -35px;
    left: -25px;

    transform: rotate(-18deg);

    background:
            rgba(255,255,255,.25);

    filter: blur(18px);

    pointer-events: none;
}


/* =========================================================
   DECORATIVE GLASS RING
   ========================================================= */

.dermal-stat::after {
    content: "";

    position: absolute;

    width: 85px;
    height: 85px;

    right: -35px;
    top: -35px;

    border-radius: 50%;

    border:
            1px solid rgba(255,255,255,.45);

    box-shadow:
            inset 0 0 20px rgba(255,255,255,.12);

    pointer-events: none;
}


/* =========================================================
   STAT VALUE
   ========================================================= */

.dermal-stat-value {
    position: relative;
    z-index: 2;

    font-family:
            Georgia,
            "Times New Roman",
            serif;

    font-size: 43px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: -.045em;

    color: var(--espresso);
}


/* =========================================================
   STAT LABEL
   ========================================================= */

.dermal-stat-label {
    position: relative;
    z-index: 2;

    color: var(--muted);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .13em;

    line-height: 1.5;

    text-transform: uppercase;
}


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

@media (max-width: 900px) {

    .dermal-intelligence {
        padding:
                90px
                var(--padding);
    }

    .dermal-intelligence-inner {
        padding:
                55px 35px;

        border-radius: 28px;

        backdrop-filter:
                blur(40px)
                saturate(180%);

        -webkit-backdrop-filter:
                blur(40px)
                saturate(180%);
    }

    .dermal-intelligence-content {
        grid-template-columns: 1fr;

        gap: 48px;
    }
}


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

@media (max-width: 560px) {

    .dermal-intelligence {
        padding:
                70px
                var(--padding);
    }

    .dermal-intelligence-inner {
        padding:
                42px 21px;

        border-radius: 24px;
    }

    .dermal-title {
        font-size: 43px;
    }

    .dermal-description {
        font-size: 12px;

        line-height: 1.8;
    }

    .dermal-stats {
        gap: 9px;
    }

    .dermal-stat {
        min-height: 130px;

        padding: 19px;

        border-radius: 18px;
    }

    .dermal-stat-value {
        font-size: 33px;
    }

    .dermal-stat-label {
        font-size: 8px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .dermal-stat {
        transition: none;
    }

    .dermal-stat:hover {
        transform: none;
    }
}

.product-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* PERFECT CIRCLE */

.quick-view-btn,
.add-to-cart-btn {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;

    padding: 0;

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

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;

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

    color: #fff;

    text-decoration: none;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.22);

    transition:
            transform .35s cubic-bezier(.22, 1, .36, 1),
            background .3s ease,
            border-color .3s ease,
            box-shadow .3s ease;
}

/* ICON */

.quick-view-btn svg,
.add-to-cart-btn svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

/* HOVER */

.quick-view-btn:hover,
.add-to-cart-btn:hover {
    transform: translateY(-5px);

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

    border-color: rgba(255, 255, 255, 0.55);

    color: #fff;

    box-shadow:
            0 16px 40px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.quick-view-btn:hover svg,
.add-to-cart-btn:hover svg {
    transform: scale(1.12);
}

/* CLICK */

.quick-view-btn:active,
.add-to-cart-btn:active {
    transform: scale(.94);
}

/* MOBILE */

@media (max-width: 768px) {

    .quick-view-btn,
    .add-to-cart-btn {
        width: 46px;
        height: 46px;

        min-width: 46px;
        min-height: 46px;
    }

    .quick-view-btn svg,
    .add-to-cart-btn svg {
        width: 17px;
        height: 17px;
    }
}

/* =========================================================
   LUXE HAIR — PRODUCTS
   ========================================================= */

.luxe-products-section {
    width: 100%;
    padding: 80px 0;
}


/* HEADER */

.luxe-products-header {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}

.luxe-products-eyebrow {
    display: block;

    margin-bottom: 16px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .28em;

    text-transform: uppercase;

    opacity: .45;
}

.luxe-products-header h2 {
    margin: 0 0 14px;

    font-size: clamp(38px, 5vw, 64px);

    font-weight: 500;

    line-height: .95;

    letter-spacing: -.045em;
}

.luxe-products-header p {
    margin: 0;

    font-size: 14px;

    line-height: 1.7;

    opacity: .55;
}


/* GRID */

.luxe-products-grid {
    display: grid;

    width: 100%;

    gap: 24px;
}

.luxe-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.luxe-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.luxe-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* CARD */

.luxe-product-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    border-radius: 24px;

    background:
            rgba(255,255,255,.55);

    border:
            1px solid rgba(255,255,255,.7);

    box-shadow:
            0 18px 60px rgba(20,25,40,.07);

    transition:
            transform .55s cubic-bezier(.22,1,.36,1),
            box-shadow .55s ease;
}

.luxe-product-card:hover {
    transform: translateY(-8px);

    box-shadow:
            0 30px 90px rgba(20,25,40,.14);
}


/* IMAGE */

.luxe-product-media {
    position: relative;

    overflow: hidden;

    aspect-ratio: 1 / 1.15;
}

.luxe-product-image-link {
    display: block;

    width: 100%;
    height: 100%;
}

.luxe-product-image {
    display: block;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    object-fit: cover;

    transition:
            transform .8s cubic-bezier(.22,1,.36,1);
}

.luxe-product-card:hover .luxe-product-image {
    transform: scale(1.055);
}


/* ACTIONS */

.luxe-product-actions {
    position: absolute;

    right: 18px;
    bottom: 18px;

    display: flex;

    gap: 8px;

    z-index: 5;
}

.luxe-product-action {
    width: 46px;
    height: 46px;

    display: flex;

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

    border-radius: 50%;

    color: #111827;

    background:
            rgba(255,255,255,.72);

    border:
            1px solid rgba(255,255,255,.85);

    backdrop-filter:
            blur(18px);

    -webkit-backdrop-filter:
            blur(18px);

    box-shadow:
            0 10px 30px rgba(0,0,0,.10);

    transition:
            transform .35s ease,
            background .35s ease,
            box-shadow .35s ease;
}

.luxe-product-action:hover {
    transform: translateY(-4px) scale(1.05);

    background:
            rgba(255,255,255,.95);

    box-shadow:
            0 14px 35px rgba(0,0,0,.16);
}

.luxe-product-action svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* SALE */

.luxe-sale-badge {
    position: absolute;

    top: 18px;
    left: 18px;

    z-index: 5;

    padding: 8px 12px;

    border-radius: 999px;

    background:
            rgba(255,255,255,.72);

    border:
            1px solid rgba(255,255,255,.85);

    backdrop-filter:
            blur(15px);

    -webkit-backdrop-filter:
            blur(15px);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;
}


/* INFO */

.luxe-product-info {
    padding: 20px 21px 23px;
}

.luxe-product-title {
    margin: 0 0 8px !important;

    font-size: 15px !important;

    font-weight: 500 !important;

    line-height: 1.35 !important;
}

.luxe-product-title a {
    color: inherit;

    text-decoration: none;
}

.luxe-product-price {
    font-size: 13px;

    font-weight: 600;
}

.luxe-product-price del {
    opacity: .4;

    margin-right: 5px;
}

.luxe-product-price ins {
    text-decoration: none;
}


/* EMPTY */

.luxe-products-empty {
    padding: 60px 20px;

    text-align: center;

    opacity: .5;
}


/* TABLET */

@media (max-width: 1024px) {

    .luxe-columns-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .luxe-products-section {
        padding: 60px 0;
    }
}


/* MOBILE */

@media (max-width: 767px) {

    .luxe-products-section {
        padding: 45px 0;
    }

    .luxe-products-header {
        margin-bottom: 35px;
    }

    .luxe-products-grid {
        gap: 14px;
    }

    .luxe-columns-4,
    .luxe-columns-3,
    .luxe-columns-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .luxe-product-card {
        border-radius: 17px;
    }

    .luxe-product-actions {
        right: 10px;
        bottom: 10px;

        gap: 6px;
    }

    .luxe-product-action {
        width: 38px;
        height: 38px;
    }

    .luxe-product-action svg {
        width: 15px;
        height: 15px;
    }

    .luxe-product-info {
        padding: 14px;
    }

    .luxe-product-title {
        font-size: 12px !important;
    }

    .luxe-product-price {
        font-size: 11px;
    }

    .luxe-sale-badge {
        top: 10px;
        left: 10px;

        padding: 7px 9px;

        font-size: 8px;
    }
}
/* =========================================================
   LUXE HAIR — LOGO
   ========================================================= */

.logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    text-decoration: none;
    line-height: 0;
}

.site-logo {
    display: block;
    width: auto;
    height: 58px;
    max-width: 220px;
    object-fit: contain;
    transition:
            transform 0.3s ease,
            opacity 0.3s ease;
}

.logo:hover .site-logo {
    transform: scale(1.03);
    opacity: 0.9;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.nav {
    min-height: 92px;
    padding: 0 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* =========================================================
   NAV RIGHT SIDE
   ========================================================= */

.nav-menu-wrap {
    display: flex;
    align-items: center;
    gap: 28px;
}


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

@media (max-width: 768px) {

    .nav {
        min-height: 78px;
        padding: 0 20px;
    }

    .site-logo {
        height: 46px;
        max-width: 175px;
    }

}


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

@media (max-width: 480px) {

    .site-logo {
        height: 42px;
        max-width: 155px;
    }

    .nav {
        padding: 0 16px;
    }

}
/* =========================================================
   LUXE HAIR — WOOCOMMERCE / BOUTIQUE LOGO
   Keep homepage logo unchanged
   ========================================================= */

/* =========================================================
   LOGO — DEFAULT
   ========================================================= */

.site-logo {
    display: block;
    width: auto;
    height: 58px;
    max-width: 220px;
    object-fit: contain;
    transition: transform 0.3s ease, opacity 0.3s ease;
}


/* =========================================================
   WOOCOMMERCE PAGES
   Boutique / Mon compte / Panier / Checkout
   ========================================================= */

body.woocommerce .site-logo,
body.woocommerce-page .site-logo,
body.woocommerce-cart .site-logo,
body.woocommerce-account .site-logo,
body.woocommerce-checkout .site-logo {
    height: 44px;
    max-width: 175px;
}


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

@media (max-width: 768px) {

    .site-logo {
        height: 46px;
        max-width: 175px;
    }

    body.woocommerce .site-logo,
    body.woocommerce-page .site-logo,
    body.woocommerce-cart .site-logo,
    body.woocommerce-account .site-logo,
    body.woocommerce-checkout .site-logo {
        height: 40px;
        max-width: 155px;
    }

}