/* ==========================================================================
   L'ANZA — distributeurswebsite
   Volledig lokaal: geen externe fonts of CDN's (GDPR-proof).
   ========================================================================== */

@font-face {
    font-family: "GT Super Display";
    src: url("../fonts/gt-super-display-light.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "GT Super Display";
    src: url("../fonts/gt-super-display-light-italic.woff2") format("woff2");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "GT Super Display";
    src: url("../fonts/gt-super-display-regular.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "GT Super Display";
    src: url("../fonts/gt-super-display-regular-italic.woff2") format("woff2");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "GT Super Text";
    src: url("../fonts/gt-super-text-regular.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "GT Super Text";
    src: url("../fonts/gt-super-text-regular-italic.woff2") format("woff2");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Shippori Antique";
    src: url("../fonts/shippori-antique-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --black: #111111;
    --white: #ffffff;
    --cream: #f8f5f0;      /* basisachtergrond (USA-site) */
    --grey-100: #ede6dc;   /* warme beige vlakken (USA-site) */
    --grey-200: #ddd5c8;   /* warme randen */
    --grey-400: #b8b0a4;
    --grey-600: #6f6a60;
    --gold: #a8895a;
    --gold-dark: #8a6f44;
    --serif: "GT Super Display", "Times New Roman", serif;
    --serif-text: "GT Super Text", "Times New Roman", serif;
    --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --lanza-heading: "Shippori Antique", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --container: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--black);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
}

/* De salonpagina volgt de officiële L'ANZA-typografie. */
.page-salon {
    font-family: var(--serif-text);
    font-weight: 300;
}

.page-salon .footer-menu a,
.page-salon .footer-social-handle { font-family: var(--serif-text); }

.page-salon .salon-form input,
.page-salon .salon-form textarea {
    font-family: var(--serif-text);
    font-weight: 300;
}

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

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

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; }

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.15rem; }

.lead { font-size: 1.1rem; color: var(--grey-600); max-width: 60ch; }
.narrow { max-width: 70ch; }
.center { text-align: center; }

.kicker {
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.72rem;
    color: var(--gold);
    margin-bottom: 0.8rem;
}

/* ----------------------------------------------------------------- knoppen */
.btn {
    display: inline-block;
    padding: 14px 34px;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px solid var(--black);
    transition: all 0.25s ease;
    cursor: pointer;
}

.btn-primary { background: var(--black); color: var(--white); }
.btn-primary:hover { background: var(--gold-dark); border-color: var(--gold-dark); }

.btn-outline { background: transparent; color: var(--black); }
.btn-outline:hover { background: var(--black); color: var(--white); }

.text-link {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 2px;
    color: var(--black);
}
.text-link:hover { color: var(--gold-dark); }

/* ------------------------------------------------------------------ header */
.site-header { border-bottom: 1px solid var(--grey-200); background: var(--cream); position: sticky; top: 0; z-index: 50; }

.header-inner {
    display: flex;
    align-items: center;
    gap: 32px;
    min-height: 76px;
}

.brand {
    display: flex;
    align-items: center;
    line-height: 0;
}

.brand svg { display: block; }

.main-nav { display: flex; gap: 28px; margin-left: auto; }

.main-nav a {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
}

.main-nav a:hover, .main-nav a.active { border-bottom-color: var(--gold); }

/* salon CTA-knop in de nav */
.main-nav .nav-cta {
    background: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
    padding: 10px 20px;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.main-nav .nav-cta:hover,
.main-nav .nav-cta.active {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    color: var(--white);
}

/* taalwissel */
.lang-switch { position: relative; }

.lang-current {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    background: none;
    border: 1px solid var(--grey-200);
    padding: 8px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lang-flag {
    width: 18px;
    height: 14px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.lang-current::after { content: " \25BE"; font-size: 0.6rem; }

.lang-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--white);
    border: 1px solid var(--grey-200);
    list-style: none;
    min-width: 160px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.lang-switch.open .lang-menu { display: block; }

.lang-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 0.85rem;
}

.lang-menu a:hover { background: var(--grey-100); }

.header-actions {
    display: flex;
    align-items: center;
}

.header-action-link {
    border-bottom: 1px solid transparent;
}

.header-action-link:hover,
.header-action-link.active { border-bottom-color: var(--gold); }

.header-salon-bar {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 9px 24px;
    background: var(--black);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.3;
    text-transform: uppercase;
    transition: background .2s ease;
}

.header-salon-bar:hover,
.header-salon-bar.active { background: var(--gold-dark); }

.header-salon-bar-kicker { color: #dbc49c; }
.header-salon-bar-arrow { font-size: 1rem; line-height: 0; transition: transform .2s ease; }
.header-salon-bar:hover .header-salon-bar-arrow { transform: translateX(4px); }

.header-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
}

.header-search svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.nav-mobile-only { display: none; }
.main-nav .nav-item.nav-mobile-only { display: none; }

/* hamburger */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--black);
    margin: 5px 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ------------------------------------------------- mega menu / dropdowns */
.nav-item { display: flex; align-items: center; }

.main-nav .nav-trigger {
    font-family: inherit;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--black);
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    padding: 6px 0;
    display: inline-flex;
    align-items: center;
}

.main-nav .nav-trigger:hover,
.main-nav .nav-trigger.active { border-bottom-color: var(--gold); }

.nav-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 7px;
    display: inline-block;
    transition: transform 0.2s ease;
}

.mega-head {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    color: var(--grey-600);
    margin-bottom: 18px;
}

.mega-quicklinks {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.main-nav .mega-quicklinks a {
    width: fit-content;
    padding: 0 0 2px;
    border-bottom-color: transparent;
    font-family: var(--serif);
    font-size: 1.45rem;
    line-height: 1.15;
    letter-spacing: 0;
    white-space: nowrap;
}

.main-nav .mega-quicklinks a:hover { border-bottom-color: var(--black); }

.mega-col ul { list-style: none; display: grid; gap: 12px; }
.mega-col a {
    padding: 0;
    border: 0;
    font-family: var(--serif);
    font-size: 1.05rem;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--black);
}
.mega-col a:hover { color: var(--gold-dark); }

.main-nav .mega-promo {
    display: flex;
    flex-direction: column;
    align-self: start;
    padding: 0;
    border: 0;
    text-transform: none;
    letter-spacing: 0;
}

.mega-promo-image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #d6d0c6;
}

.mega-promo-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
    transition: transform 0.35s ease;
}

.mega-promo:hover .mega-promo-image img { transform: scale(1.035); }

.mega-promo-title {
    margin-top: 14px;
    font-family: var(--serif);
    font-size: 1.35rem;
    line-height: 1.2;
}

.mega-promo-copy {
    margin-top: 4px;
    color: var(--grey-600);
    font-size: 0.78rem;
    line-height: 1.4;
}

.mega-viewall {
    display: inline-block;
    margin-top: 20px;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-dark);
}
.mega-viewall:hover { color: var(--black); }

.dropdown-menu a { display: block; }
.dropdown-menu a:hover, .dropdown-menu a.active { color: var(--gold-dark); }

@media (min-width: 1101px) {
    .header-inner {
        position: relative;
        width: 100%;
        max-width: none;
        min-height: 86px;
        padding-right: 42px;
        padding-left: 42px;
    }

    .brand {
        position: absolute;
        left: 50%;
        z-index: 2;
        padding: 10px 22px;
        background: var(--cream);
        transform: translateX(-50%);
    }

    .brand svg { width: 170px; height: auto; }

    .main-nav {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 42px;
        align-items: center;
        gap: 32px;
        margin-left: 0;
    }

    .main-nav > a,
    .main-nav .nav-trigger {
        font-family: var(--serif-text);
        font-size: 1rem;
        font-weight: 300;
        letter-spacing: 0;
        text-transform: none;
    }

    .main-nav > a { align-self: center; }
    .nav-item.has-panel { position: relative; }

    .header-actions {
        position: absolute;
        right: 42px;
        gap: 26px;
    }

    .header-action-link {
        padding: 6px 0;
        font-family: var(--serif-text);
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.2;
    }

    .nav-panel {
        position: absolute;
        top: 100%;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.12s ease, visibility 0s linear 0.12s;
        z-index: 60;
    }

    .mega-menu {
        position: fixed;
        /* Een kleine overlap voorkomt dat :hover wegvalt wanneer de muis
           van de navigatie naar het vaste paneel beweegt. */
        top: calc(var(--panel-top, 130px) - 3px);
        left: 0;
        right: 0;
        width: auto;
        background: var(--cream);
        border-top: 1px solid var(--grey-200);
        border-bottom: 1px solid var(--grey-200);
        box-shadow: 0 18px 30px rgba(0, 0, 0, 0.07);
        padding: 44px 0 48px;
    }

    .mega-grid {
        display: grid;
        grid-template-columns: 0.72fr 1.45fr 1.15fr 0.85fr 1.6fr;
        gap: clamp(26px, 3vw, 52px);
        align-items: start;
    }

    .mega-quicklinks {
        min-height: 100%;
        padding-right: 28px;
        border-right: 1px solid var(--grey-200);
    }

    .dropdown-menu {
        position: fixed;
        top: calc(var(--panel-top, 130px) - 3px);
        left: 0;
        right: 0;
        width: auto;
        background: var(--cream);
        border-top: 1px solid var(--grey-200);
        border-bottom: 1px solid var(--grey-200);
        box-shadow: 0 18px 30px rgba(0, 0, 0, 0.07);
        padding: 44px 0 48px;
    }

    .discover-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(26px, 3vw, 52px);
    }

    .pro-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(26px, 3vw, 52px);
    }

    .dropdown-menu a {
        width: fit-content;
        padding: 0 0 3px;
        border-bottom: 1px solid transparent;
        font-family: var(--serif);
        font-size: 1.25rem;
        line-height: 1.3;
        letter-spacing: 0;
        text-transform: none;
    }

    .dropdown-menu a:hover,
    .dropdown-menu a.active {
        border-bottom-color: var(--gold);
        color: var(--black);
    }

    .nav-item.has-panel:hover > .nav-panel,
    .nav-item.has-panel:focus-within > .nav-panel,
    .nav-item.has-panel.hover-open > .nav-panel,
    .nav-item.has-panel.open > .nav-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .nav-item.has-panel:hover .nav-caret,
    .nav-item.has-panel:focus-within .nav-caret,
    .nav-item.has-panel.hover-open .nav-caret,
    .nav-item.has-panel.open .nav-caret { transform: rotate(180deg); }

    .header-pro-trigger {
        appearance: none;
        background: transparent;
        border: 0;
        border-bottom: 1px solid transparent;
        color: inherit;
        cursor: pointer;
    }
}

/* stijlfilter (chips) op de productenpagina */
.style-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.style-chip {
    border: 1px solid var(--grey-200);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey-600);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.style-chip:hover { border-color: var(--gold); color: var(--black); }
.style-chip.active { background: var(--black); border-color: var(--black); color: var(--white); }

/* -------------------------------------------------------- hero (slider) */
.hero-slider { background: var(--grey-100); overflow: hidden; position: relative; }

.hero-track { display: flex; transition: transform 0.6s ease; }

.hero-slide { min-width: 100%; }

.hero-split {
    display: grid;
    grid-template-columns: minmax(420px, 44%) 1fr;
    min-height: 540px;
}

.hero-text-col {
    display: flex;
    align-items: center;
    padding: 64px clamp(24px, 6vw, 96px) 88px;
}

.hero-title { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0.4rem 0 1.2rem; }

.hero-slide .lead { margin-bottom: 2rem; }

.hero-photo { position: relative; overflow: hidden; }

.hero-photo-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 10%;
}

.hero-photo-bg-kho { object-position: center top; }
.hero-photo-bg-scalp { object-position: center; }

.hero-photo-product {
    position: absolute;
    bottom: 0;
    left: clamp(-40px, -3vw, -20px);
    max-height: 62%;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.25));
}

.hero-dots {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.hero-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid var(--black);
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.hero-dots button.active { background: var(--black); }

/* ---------------------------------------------------------- sliders/tabs */
.slider-nav { display: flex; gap: 8px; }

.slider-btn {
    width: 42px;
    height: 42px;
    border: 1px solid var(--grey-200);
    background: var(--white);
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.slider-btn:hover { background: var(--black); color: var(--white); border-color: var(--black); }

.slider-btn:disabled {
    opacity: 0.32;
    cursor: default;
}

.slider-btn:disabled:hover {
    background: var(--white);
    color: var(--black);
    border-color: var(--grey-200);
}

.product-slider {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 32px) / 4);
    gap: 32px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.product-slider::-webkit-scrollbar { display: none; }

.product-slider .product-card { scroll-snap-align: start; }

.tab-buttons { display: flex; justify-content: center; gap: 8px; margin-bottom: 36px; }

.tab-btn {
    padding: 12px 28px;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--grey-200);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn.active { background: var(--black); color: var(--white); border-color: var(--black); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.center-head { margin-left: auto; margin-right: auto; text-align: center; }

/* Haarwensen: grote tabbladen met uitklappende fotokaarten */
.shopby-section { padding-bottom: 0; overflow: hidden; }

.shopby-section .tab-buttons {
    justify-content: flex-start;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: -1px;
}

.shopby-section .tab-btn {
    width: clamp(230px, 27vw, 360px);
    padding: 28px 36px;
    font-family: var(--serif);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.1;
    text-transform: none;
    border: 1px solid var(--black);
    border-radius: 12px 12px 0 0;
}

.shopby-strip {
    display: flex;
    min-height: clamp(520px, 54vw, 760px);
    background: var(--black);
    gap: 2px;
}

.shopby-tile {
    position: relative;
    display: block;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    transition: flex-grow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.shopby-tile:first-child { flex-grow: 2.7; }

.shopby-strip:has(.shopby-tile:hover) .shopby-tile { flex-grow: 1; }
.shopby-strip .shopby-tile:hover { flex-grow: 2.7; }

.shopby-tile img {
    width: 100%;
    height: 100%;
    min-height: clamp(520px, 54vw, 760px);
    object-fit: cover;
    transition: transform 0.55s ease;
}

.shopby-tile:hover img { transform: scale(1.04); }

.shopby-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(17, 17, 17, 0.55), rgba(17, 17, 17, 0) 40%);
}

.shopby-label {
    position: absolute;
    left: clamp(22px, 2.4vw, 46px);
    right: 22px;
    bottom: clamp(24px, 3vw, 48px);
    z-index: 1;
    font-family: var(--serif);
    font-size: clamp(1.15rem, 1.8vw, 2rem);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--white);
    text-wrap: balance;
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35);
}

.shopby-footer { background: var(--grey-100); padding: 26px 0; text-align: center; }

/* ----------------------------------------------------------------- quote */
.quote-section { text-align: center; }

.quote-text {
    font-family: var(--serif);
    font-size: clamp(1.25rem, 2.4vw, 1.65rem);
    line-height: 1.45;
    max-width: 32em;
    margin: 0 auto 22px;
}

.quote-source {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.quote-name { font-style: italic; color: var(--grey-600); font-size: 0.85rem; }

/* ------------------------------------------------------------- complexes */
.section-grey { background: var(--grey-100); }

.complex-card { background: var(--white); padding: 24px; display: flex; flex-direction: column; }

.complex-image {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    position: relative;
}

.complex-image > img:first-child { max-height: 85%; max-width: 85%; object-fit: contain; }

.complex-ingredient {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 86px;
    height: 100px;
    object-fit: cover;
    border: 3px solid var(--white);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.complex-tag {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 6px;
}

.complex-card h3 { margin-bottom: 0.6rem; }

.complex-text { font-size: 0.9rem; color: var(--grey-600); margin-bottom: 1.2rem; flex-grow: 1; }

/* complex-feature op de productdetailpagina (beeld + tekst) */
.complex-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.complex-feature .complex-image { margin-bottom: 0; background: var(--white); aspect-ratio: 4 / 3; }
.complex-feature-text h2 { margin: 0.4rem 0 1rem; }
.complex-feature-text p { color: var(--grey-600); margin-bottom: 1.4rem; max-width: 48ch; }
@media (max-width: 820px) { .complex-feature { grid-template-columns: 1fr; gap: 24px; } }

/* ------------------------------------------------------------ healthy-blok */
.healthy-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.healthy-photo { position: relative; min-height: 420px; }

.healthy-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.healthy-content {
    padding: clamp(48px, 7vw, 96px);
    align-self: center;
}

.healthy-content h2 { margin-bottom: 1rem; }

.healthy-text { color: var(--grey-400); margin-bottom: 1.6rem; font-size: 1.05rem; max-width: 52ch; }

.btn-light { border-color: var(--white); color: var(--white); background: transparent; }
.btn-light:hover { background: var(--white); color: var(--black); }

/* --------------------------------------------------------- collectie-hero */
.collection-hero {
    display: grid;
    grid-template-columns: minmax(420px, 46%) 1fr;
    background: var(--grey-100);
    min-height: 420px;
}

.collection-hero-text {
    align-self: center;
    padding: 56px clamp(24px, 6vw, 96px);
}

.collection-hero-text .tagline {
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--gold-dark);
    margin: 0.4rem 0 1rem;
}

.collection-hero-photo { position: relative; overflow: hidden; }

.collection-hero-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collection-hero-photo-scalp-therapy img { object-position: center 35%; }

/* foto-variant van collectiekaarten (cover i.p.v. productrender) */
.collection-card-photo img {
    width: 100%;
    height: 100%;
    max-height: none;
    max-width: none;
    object-fit: cover;
}

/* ----------------------------------------------------------- about-pagina */
.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 56px;
    align-items: start;
}

.about-photo img { width: 100%; object-fit: cover; aspect-ratio: 4 / 5; }

.page-about { font-family: var(--serif-text); font-weight: 300; }
.about-hero { position: relative; display: grid; min-height: clamp(420px, 48vw, 670px); place-items: end start; overflow: hidden; background: var(--black); color: var(--white); }
.about-hero > img, .about-pillar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-hero > img { object-position: center 24%; }
.about-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.08) 68%); }
.about-hero-copy { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(52px, 7vw, 96px); }
.about-hero-copy .kicker { color: var(--white); opacity: .78; }
.about-hero h1 { max-width: 9ch; font-size: clamp(3.6rem, 8vw, 7.4rem); font-weight: 100; letter-spacing: -.045em; line-height: .86; }

.about-story { text-align: center; }
.about-story-inner { max-width: 1040px; }
.about-story h2 { margin: 0 auto clamp(28px, 4vw, 48px); font-size: clamp(2.7rem, 5.4vw, 5.6rem); font-weight: 100; line-height: .92; letter-spacing: -.035em; }
.about-story-copy { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); text-align: left; }
.about-story-copy p { color: #383530; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.7; }

.about-features { padding-top: 28px; }
.about-feature-list { display: grid; gap: clamp(64px, 10vw, 132px); }
.about-feature { display: grid; grid-template-columns: minmax(260px, .82fr) minmax(340px, 1.18fr); gap: clamp(36px, 8vw, 116px); align-items: center; max-width: 1050px; }
.about-feature:nth-child(even) { margin-left: auto; grid-template-columns: minmax(340px, 1.18fr) minmax(260px, .82fr); }
.about-feature:nth-child(even) .about-feature-media { order: 2; }
.about-feature-media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--grey-100); }
.about-feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.about-feature-media img[src*="about-experts-fatima-5.jpg"] { object-position: center top; transform-origin: center top; }
.about-feature:hover .about-feature-media img { transform: scale(1.025); }
.about-feature-index { margin-bottom: 22px; color: var(--gold-dark); font-family: var(--serif); font-size: 1rem; }
.about-feature-copy h2 { max-width: 12ch; margin-bottom: 22px; font-size: clamp(2rem, 4vw, 4.15rem); font-weight: 100; letter-spacing: -.035em; line-height: .93; text-transform: uppercase; }
.about-feature-copy > p:not(.about-feature-index) { max-width: 48ch; margin-bottom: 30px; color: var(--grey-600); font-size: 1.02rem; line-height: 1.65; }

.about-mission { margin-top: clamp(28px, 5vw, 72px); padding: clamp(76px, 10vw, 140px) 0; }
.about-mission-head { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(44px, 8vw, 110px); align-items: center; }
.about-big-mark { display: flex; align-items: center; justify-content: center; }
.about-big-mark img { width: min(100%, 590px); height: auto; }
.about-mission-copy h2 { max-width: 11ch; margin-bottom: 24px; font-size: clamp(2.7rem, 5vw, 5rem); font-weight: 100; letter-spacing: -.035em; line-height: .92; }
.about-mission-copy > p:not(.kicker) { color: var(--grey-600); font-size: 1.08rem; line-height: 1.7; }
.about-mission-words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--grey-200); }
.about-mission-words strong, .about-mission-words span { display: block; }
.about-mission-words strong { margin-bottom: 6px; font-family: var(--serif); font-size: 1.12rem; font-weight: 300; text-transform: uppercase; }
.about-mission-words span { color: var(--grey-600); font-family: var(--sans); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }

.about-pillar { position: relative; display: grid; min-height: clamp(500px, 52vw, 720px); align-items: center; overflow: hidden; background: var(--black); color: var(--white); }
.about-pillar-shade { position: absolute; inset: 0; background: rgba(8,8,8,.4); }
.about-pillar-copy { position: relative; z-index: 1; width: 100%; }
.about-pillar-copy > * { max-width: 500px; }
.about-pillar-copy-right > * { margin-left: auto; }
.about-pillar-copy h2 { margin-bottom: 18px; font-size: clamp(3.2rem, 7vw, 7rem); font-weight: 100; letter-spacing: -.04em; line-height: .88; text-transform: uppercase; }
.about-pillar-copy p:not(.kicker) { font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.65; }
.about-pillar .kicker { color: var(--white); opacity: .75; }

@media (max-width: 820px) {
    .about-story-copy, .about-mission-head { grid-template-columns: 1fr; }
    .about-feature, .about-feature:nth-child(even) { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 28px; }
    .about-mission-head { gap: 66px; }
}

@media (max-width: 620px) {
    .about-hero { min-height: 470px; }
    .about-hero > img { object-position: 60% center; }
    .about-story-copy { gap: 18px; }
    .about-feature, .about-feature:nth-child(even) { grid-template-columns: 1fr; }
    .about-feature:nth-child(even) .about-feature-media { order: 0; }
    .about-feature-media { aspect-ratio: 4 / 4.6; }
    .about-feature-copy { padding: 0 6px; }
    .about-mission-words { grid-template-columns: 1fr; }
    .about-pillar { min-height: 580px; align-items: end; }
    .about-pillar-copy { padding-bottom: 52px; }
    .about-pillar-copy-right > * { margin-left: 0; }
}

/* --------------------------------------------------------------- usp strip */
.usp-strip { border-top: 1px solid var(--grey-200); border-bottom: 1px solid var(--grey-200); background: var(--cream); }

.usp-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    padding-top: 22px;
    padding-bottom: 22px;
}

.usp-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey-600);
}

.usp-item svg { width: 22px; height: 22px; color: var(--gold); flex-shrink: 0; }

/* ---------------------------------------------------------------- secties */
.section { padding: 72px 0; }
.section-tight { padding: 40px 0; }
.section-dark { background: var(--black); color: var(--white); }
.section-dark .section-head p { color: var(--grey-400); }

.page-head { padding-bottom: 24px; background: var(--grey-100); }
.page-head .tagline { font-family: var(--serif); font-size: 1.3rem; color: var(--gold-dark); margin: 0.4rem 0 1rem; }

.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head p { color: var(--grey-600); margin-top: 0.8rem; }

.section-head-row {
    max-width: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
}

/* ------------------------------------------------------------------- grids */
.grid { display: grid; gap: 32px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------------------------------------------------------- product cards */
.product-card { display: flex; flex-direction: column; }

.product-card-image {
    position: relative;
    background: var(--grey-100);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    overflow: hidden;
}

.product-card-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
    padding: 4px 10px 3px;
    border: 1px solid #c48f7c;
    background: #d8a895;
    font-family: var(--serif);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-transform: uppercase;
}

.product-card-badge--scalp {
    border-color: #405048;
    background: #405048;
    color: var(--white);
}

.product-card-image img {
    max-height: 82%;
    max-width: 82%;
    object-fit: contain;
    transition: transform 0.35s ease;
}

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

.product-card-collection {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 4px;
}

.product-card h3 { font-family: var(--sans); font-weight: 600; font-size: 0.95rem; }

.product-card-price { margin-top: 6px; font-size: 0.95rem; color: var(--grey-600); }
.product-card-price .from { font-size: 0.78rem; }

/* ----------------------------------------- collectie-detail (catalogus) */
.collection-catalog {
    padding: clamp(42px, 2.5vw, 48px) 0 72px;
    background: #fbf8f5;
}

.collection-catalog-shell {
    width: min(calc(100% - 160px), 1800px);
    margin: 0 auto;
}

.collection-catalog-head {
    margin-bottom: 48px;
}

.collection-catalog-complex {
    margin-bottom: 14px;
    color: var(--gold-dark);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    line-height: 1.4;
    text-transform: uppercase;
}

.collection-catalog-head h1 {
    font-family: "GT Super Display", "Times New Roman", serif;
    font-size: clamp(3.7rem, 4vw, 4.4rem);
    font-style: italic;
    font-weight: 100;
    letter-spacing: -0.045em;
    line-height: 0.92;
}

.collection-catalog-description {
    max-width: 1180px;
    margin-top: 24px;
    color: var(--grey-600);
    font-family: var(--serif);
    font-size: clamp(1.05rem, 1.2vw, 1.25rem);
    line-height: 1.55;
}

.collection-catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 21px;
}

.collection-filter-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.collection-toolbar-label {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.collection-select {
    display: block;
    position: relative;
}

.collection-select select {
    min-width: 0;
    height: 42px;
    padding: 0 38px 0 16px;
    border: 1px solid #c9c1b7;
    border-radius: 0;
    color: var(--black);
    background-color: transparent;
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.collection-filter-group .collection-select:nth-of-type(1) select { width: 180px; }
.collection-filter-group .collection-select:nth-of-type(2) select { width: 120px; }
.collection-filter-group .collection-select:nth-of-type(3) select { width: 130px; }

.collection-select select:focus-visible {
    outline: 1px solid var(--black);
    outline-offset: 2px;
}

.collection-products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 58px 40px;
}

.collection-product-item,
.collection-product-item .product-card {
    min-width: 0;
    height: 100%;
}

.collection-products-grid .product-card-image {
    aspect-ratio: 4 / 5;
    margin-bottom: 26px;
    background: var(--grey-100);
}

.collection-products-grid .product-card-image img {
    max-width: 78%;
    max-height: 78%;
}

.collection-products-grid .product-card-image img[src*="healing-style-sculpting-paste-01-nl.png"] {
    position: relative;
    top: 9.4%;
}

.collection-products-grid .product-card-collection {
    margin-bottom: 6px;
    color: var(--black);
    font-family: var(--serif);
    font-size: 1rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.collection-products-grid .product-card h3 {
    font-family: var(--serif);
    font-size: clamp(1.12rem, 1.45vw, 1.45rem);
    font-weight: 500;
    line-height: 1.08;
    text-transform: uppercase;
}

.collection-products-grid .product-card-price {
    margin-top: 12px;
    color: var(--black);
    font-family: var(--serif);
    font-size: 1rem;
}

.collection-empty {
    padding: 72px 0;
    color: var(--grey-600);
    font-family: var(--serif);
    font-size: 1.35rem;
    font-style: italic;
    text-align: center;
}

.collection-catalog .price-note { margin-top: 58px; }

@media (max-width: 1100px) {
    .collection-catalog-shell { width: calc(100% - 80px); }
    .collection-catalog-toolbar { align-items: flex-start; flex-direction: column; }
    .collection-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 28px; }
}

@media (max-width: 820px) {
    .collection-catalog-shell { width: calc(100% - 48px); }
    .collection-catalog-head { margin-bottom: 42px; }
    .collection-catalog-description { margin-top: 20px; }
    .collection-filter-group { align-items: flex-start; flex-wrap: wrap; }
    .collection-filter-group .collection-toolbar-label { width: 100%; }
    .collection-select { flex: 1 1 180px; }
    .collection-select select { width: 100%; min-width: 0; }
    .collection-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 20px; }
}

@media (max-width: 520px) {
    .collection-catalog { padding-top: 48px; }
    .collection-catalog-shell { width: calc(100% - 32px); }
    .collection-catalog-head h1 { font-size: clamp(3.2rem, 16vw, 4.6rem); }
    .collection-filter-group { display: grid; width: 100%; grid-template-columns: 1fr 1fr; }
    .collection-filter-group .collection-toolbar-label { grid-column: 1 / -1; }
    .collection-toolbar-label { font-size: 0.9rem; }
    .collection-select select { height: 50px; padding-left: 12px; font-size: 0.88rem; }
    .collection-products-grid .product-card-image { margin-bottom: 14px; }
    .collection-products-grid .product-card-collection { font-size: 0.86rem; }
    .collection-products-grid .product-card h3 { font-size: 0.96rem; }
}

/* ------------------------------------------------------- collection cards */
.collection-card { display: flex; flex-direction: column; }

.collection-card-image {
    background: var(--grey-100);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    overflow: hidden;
}

.collection-card-image img {
    max-height: 80%;
    max-width: 70%;
    object-fit: contain;
    transition: transform 0.35s ease;
}

.collection-card:hover .collection-card-image img { transform: scale(1.05); }

.collection-card h3 { font-size: 1.3rem; margin-bottom: 4px; }
.collection-card p { color: var(--grey-600); font-size: 0.95rem; margin-bottom: 10px; }
.collection-card .meta { font-size: 0.78rem; color: var(--grey-400); }

/* ----------------------------------------------- homepage collections */
.home-collections {
    background: #fbf8f5;
    padding: clamp(76px, 6vw, 118px) 0 clamp(84px, 7vw, 132px);
}

.home-collections-inner {
    width: min(100% - 80px, 1550px);
    margin: 0 auto;
}

.home-collections-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: clamp(34px, 3vw, 58px);
}

.home-collections-head h2,
.home-collections-head a {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 100;
    color: var(--black);
}

.home-collections-head h2 {
    font-size: clamp(3.6rem, 5.8vw, 6.8rem);
    line-height: 0.92;
    letter-spacing: -0.045em;
    margin: 0;
}

.home-collections-head a {
    border-bottom: 1px solid currentColor;
    font-size: clamp(1.3rem, 2vw, 2.15rem);
    line-height: 1.1;
    padding-bottom: 4px;
    white-space: nowrap;
}

.home-collections-head a:hover { color: var(--gold-dark); }

.home-collections-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(36px, 3vw, 52px) clamp(16px, 1.7vw, 28px);
}

.home-collections-grid .collection-editorial-title {
    margin-top: 16px;
    font-size: clamp(1.25rem, 1.45vw, 1.65rem);
}

.home-collections-grid .collection-editorial-tagline {
    min-height: 2.9em;
    margin-top: 8px;
    font-size: clamp(0.95rem, 1.05vw, 1.12rem);
}

.home-collections-grid .collection-editorial-button {
    margin-top: 18px;
    padding: 12px 16px;
    font-size: 1rem;
}

.collections-editorial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(42px, 4vw, 68px) clamp(22px, 2.25vw, 44px);
}

.collections-page-head h1 {
    font-family: var(--serif);
    font-weight: 100;
}

.collection-editorial-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.collection-editorial-image {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #d8d0c4;
}

.collection-editorial-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.collection-editorial-card:hover .collection-editorial-image img { transform: scale(1.025); }

.collection-editorial-title,
.collection-editorial-tagline,
.collection-editorial-button {
    display: block;
}

.collection-editorial-title {
    margin-top: 20px;
    font-family: var(--serif);
    font-weight: 100;
    font-size: clamp(1.45rem, 2vw, 2.15rem);
    line-height: 1.08;
    text-transform: uppercase;
}

.collection-editorial-tagline {
    min-height: 3.1em;
    margin-top: 12px;
    font-family: var(--serif);
    font-size: clamp(1.05rem, 1.35vw, 1.35rem);
    font-style: italic;
    font-weight: 100;
    line-height: 1.35;
}

.collection-editorial-button {
    margin-top: 24px;
    padding: 15px 20px;
    background: var(--grey-100);
    font-family: var(--serif);
    font-size: 1.08rem;
    font-style: italic;
    font-weight: 100;
    line-height: 1.2;
    text-align: center;
    transition: background 0.25s ease, color 0.25s ease;
}

.collection-editorial-card:hover .collection-editorial-button {
    background: var(--black);
    color: var(--white);
}

/* ----------------------------------------------------------------- pillars */
.pillars { margin-top: 16px; }

.pillar-number {
    font-family: var(--serif);
    font-size: 2rem;
    color: var(--gold);
    display: block;
    margin-bottom: 0.6rem;
}

.pillar h3 { margin-bottom: 0.5rem; font-size: 1.3rem; }
.section-dark .pillar p { color: var(--grey-400); }

/* ----------------------------------------------------------- productdetail */
.breadcrumb { font-size: 0.8rem; color: var(--grey-600); margin-bottom: 32px; }
.breadcrumb a:hover { color: var(--gold-dark); }

.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.product-gallery {
    min-width: 0;
    position: sticky;
    top: 110px;
}

.product-detail-image {
    overflow: hidden;
    background: var(--grey-100);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-detail-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}

img[src*="healing-style-sculpting-paste-01-nl.png"] {
    background-color: #EDE6DC;
}

.product-gallery--full-bleed .product-detail-image img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}

.product-gallery--localized-media .product-detail-image img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

.product-gallery--zoomed-primary .product-detail-image img[src*="healing-moisture-conditioner-01.png"],
.product-gallery--zoomed-primary .product-gallery-thumb img[src*="healing-moisture-conditioner-01.png"] {
    transform: scale(1.55);
    transform-origin: center;
}

.product-gallery--zoomed-primary .product-detail-image img[src*="healing-volume-shampoo-01.png"],
.product-gallery--zoomed-primary .product-gallery-thumb img[src*="healing-volume-shampoo-01.png"] {
    transform: scale(1.48);
    transform-origin: center;
}

.product-gallery--zoomed-primary .product-detail-image img[src*="healing-volume-shampoo-02.png"],
.product-gallery--zoomed-primary .product-gallery-thumb img[src*="healing-volume-shampoo-02.png"] {
    transform: scale(1.12);
    transform-origin: center;
}

.product-gallery--zoomed-primary .product-detail-image img[src*="healing-volume-conditioner-01.png"],
.product-gallery--zoomed-primary .product-gallery-thumb img[src*="healing-volume-conditioner-01.png"] {
    transform: scale(1.48);
    transform-origin: center;
}

.product-gallery--zoomed-primary .product-detail-image img[src*="healing-volume-conditioner-02.png"],
.product-gallery--zoomed-primary .product-gallery-thumb img[src*="healing-volume-conditioner-02.png"] {
    transform: scale(1.12);
    transform-origin: center;
}

.product-gallery--zoomed-primary .product-detail-image img[src*="healing-moisture-moisturizing-mist-01.png"],
.product-gallery--zoomed-primary .product-gallery-thumb img[src*="healing-moisture-moisturizing-mist-01.png"] {
    transform: scale(1.3);
    transform-origin: center;
}

.product-gallery--zoomed-primary .product-detail-image img[src*="healing-moisture-hair-masque-01.png"],
.product-gallery--zoomed-primary .product-gallery-thumb img[src*="healing-moisture-hair-masque-01.png"] {
    transform: scale(1.45) translateY(-2%);
    transform-origin: center;
}

.product-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.product-gallery-thumb {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--grey-200);
    background: var(--white);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-gallery-thumb:hover,
.product-gallery-thumb.active,
.product-gallery-thumb:focus-visible {
    border-color: var(--gold-dark);
    box-shadow: inset 0 0 0 1px var(--gold-dark);
}

.product-gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-howto-inner.product-howto-inner--text-only { grid-template-columns: minmax(0, 1fr); }

.product-detail-info h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 1rem; }
.product-detail-info .lead { margin-bottom: 2rem; }

.variant-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }

.variant-table th, .variant-table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--grey-200);
    font-size: 0.92rem;
}

.variant-table th {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-600);
}

.variant-table .num { text-align: right; }
.variant-table td.num { font-weight: 600; }

.variant-row { transition: background-color 0.2s ease; }
.variant-row.active { background: rgba(177, 137, 78, 0.08); }

.variant-select {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid var(--grey-300);
    background: var(--white);
    color: var(--black);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.variant-select:hover,
.variant-select:focus-visible {
    border-color: var(--gold-dark);
    background: var(--gold-dark);
    color: var(--white);
}

.variant-select[aria-pressed="true"] {
    border-color: var(--black);
    background: var(--black);
    color: var(--white);
}

.price-note { font-size: 0.8rem; color: var(--grey-400); margin-bottom: 0.6rem; }

.availability {
    font-size: 0.9rem;
    color: var(--grey-600);
    background: var(--grey-100);
    border-left: 2px solid var(--gold);
    padding: 14px 18px;
    margin-bottom: 2rem;
}

.availability a {
    display: inline-block;
    color: var(--gold-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

.availability a:hover,
.availability a:focus-visible { color: var(--black); }

.product-accordions {
    margin: 8px 0 32px;
    border-top: 1px solid var(--grey-200);
}

.product-accordion {
    border-bottom: 1px solid var(--grey-200);
}

.product-accordion summary {
    position: relative;
    padding: 15px 38px 15px 0;
    font-family: var(--serif);
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    line-height: 1.15;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.product-accordion summary::-webkit-details-marker { display: none; }

.product-accordion summary::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 7px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
}

.product-accordion[open] summary::after {
    transform: translateY(-30%) rotate(225deg);
}

.product-accordion-content {
    padding: 0 32px 18px 0;
    color: var(--grey-600);
    font-size: 0.92rem;
    line-height: 1.7;
}

.product-accordion-content ul {
    display: grid;
    gap: 7px;
    padding-left: 20px;
}

.product-disclaimer {
    margin-top: 14px;
    font-size: 0.76rem;
    color: var(--grey-400);
}

.product-ingredients {
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

/* Productverhaal volgens de actuele L'ANZA-productpagina */
.product-results-section {
    background: #ede6dc;
}

.product-results-inner,
.product-howto-inner {
    display: grid;
    width: min(100%, 1550px);
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-results-inner {
    padding-left: clamp(32px, 4vw, 64px);
}

.product-results-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: clamp(64px, 6.25vw, 96px) clamp(52px, 6.25vw, 96px) clamp(64px, 6.25vw, 96px) 0;
}

.product-editorial-title {
    margin: 0 0 34px;
    font-family: var(--serif);
    font-size: clamp(3.1rem, 4.5vw, 4.8rem);
    font-weight: 100;
    line-height: 1;
    letter-spacing: -0.025em;
}

.product-editorial-title em {
    font-weight: inherit;
}

.product-results-copy > h3 {
    margin: 0 0 18px;
    font-family: var(--serif);
    font-size: clamp(2rem, 2.8vw, 3rem);
    font-weight: 100;
    line-height: 1.06;
}

.product-results-tag {
    margin-bottom: 28px;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.product-results-description {
    max-width: 57ch;
    margin-bottom: 38px;
    font-family: var(--serif-text);
    font-size: clamp(0.95rem, 1.1vw, 1.08rem);
    line-height: 1.55;
}

.product-key-ingredients h2,
.product-best-for h2 {
    margin-bottom: 22px;
    font-family: var(--serif);
    font-size: clamp(1.65rem, 2.25vw, 2.3rem);
    font-weight: 100;
    line-height: 1;
}

.product-key-ingredients dl {
    display: grid;
    gap: 18px;
    margin: 0;
}

.product-key-ingredients dt {
    margin-bottom: 2px;
    font-family: var(--serif-text);
    font-style: italic;
    font-size: 1rem;
}

.product-key-ingredients dd {
    margin: 0;
    font-family: var(--serif-text);
    line-height: 1.45;
}

.product-key-ingredients dd::before {
    content: "– ";
}

.product-results-media {
    min-height: 100%;
    overflow: hidden;
    background: #e5ddd1;
}

.product-results-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-results-media--image-only img {
    height: auto;
    object-fit: contain;
    transform: none;
}

/* Stimulating Treatment volgt de ruime 50/50-opbouw van de bronpagina. */
.product-results-section--stimulating-treatment .product-results-inner {
    width: 100%;
    max-width: 175rem;
    padding-left: clamp(24px, 5vw, 80px);
}

.product-results-section--stimulating-treatment .product-results-copy {
    padding: 80px 80px 80px 0;
}

.product-results-section--stimulating-treatment .product-editorial-title {
    margin-bottom: 40px;
    font-size: clamp(2.5rem, 4.44vw, 4rem);
}

.product-results-section--stimulating-treatment .product-results-copy > h3 {
    margin-bottom: 32px;
    font-size: clamp(1.5rem, 2.78vw, 2.5rem);
}

.product-results-section--stimulating-treatment .product-results-tag,
.product-results-section--stimulating-treatment .product-results-description {
    margin-bottom: 40px;
}

.product-results-section--stimulating-treatment .product-results-media,
.product-results-section--stimulating-treatment .product-results-media img {
    aspect-ratio: 1 / 1;
}

.product-howto-section--stimulating-treatment .product-howto-inner {
    width: 100%;
    max-width: 175rem;
    gap: 64px;
    padding: 88px clamp(24px, 5vw, 80px);
}

.product-howto-section--stimulating-treatment .product-howto-video {
    min-height: 1px;
    background: transparent;
}

.product-howto-inner {
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
    padding: clamp(64px, 6.9vw, 106px) clamp(32px, 4vw, 64px);
}

.product-howto-video {
    overflow: hidden;
    background: #e5ddd1;
}

.product-howto-video video,
.product-howto-video > img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.product-howto-copy .product-editorial-title {
    margin-bottom: 10px;
}

.product-howto-steps {
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

.product-howto-steps li {
    padding: 12px 0;
    border-bottom: 1px solid #8d7960;
    font-family: var(--serif-text);
    font-size: clamp(0.98rem, 1.1vw, 1.08rem);
    line-height: 1.45;
}

.product-best-for ul {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--serif-text);
    line-height: 1.45;
}

.product-related-title {
    font-size: clamp(2.5rem, 4.2vw, 4.3rem);
    font-weight: 100;
    letter-spacing: -0.025em;
}

.product-related-title em { font-weight: inherit; }

.product-related-section { overflow: hidden; }
.product-related-section .section-head { align-items: center; }
.product-related-slider { overscroll-behavior-inline: contain; }

@media (max-width: 900px) {
    .product-results-inner,
    .product-howto-inner {
        grid-template-columns: 1fr;
    }

    .product-results-inner { padding-left: 0; }
    .product-results-copy { padding: 56px 24px 60px; }
    .product-results-media { aspect-ratio: 1 / 1; }
    .product-howto-inner { gap: 34px; padding: 0 0 56px; }
    .product-howto-copy { padding: 0 24px; }
    .product-howto-video { order: 0; }
    .product-howto-copy { order: 1; }

    .product-results-section--stimulating-treatment .product-results-copy {
        padding: 80px 16px;
    }

    .product-results-section--stimulating-treatment .product-editorial-title,
    .product-results-section--stimulating-treatment .product-results-copy > h3 {
        margin-bottom: 16px;
    }

    .product-results-section--stimulating-treatment .product-results-tag,
    .product-results-section--stimulating-treatment .product-results-description {
        margin-bottom: 32px;
    }

    .product-howto-section--stimulating-treatment .product-howto-inner {
        gap: 32px;
        padding: 0 0 52px;
    }

    .product-howto-section--stimulating-treatment .product-howto-video {
        display: none;
    }
}

/* ------------------------------------------------------------------- prose */
.prose { max-width: 760px; }
.prose p { margin-bottom: 1.4rem; color: #333; }
.prose h2 { margin: 2.4rem 0 1rem; }

/* --------------------------------------------------------------- why-pagina */
.page-why { font-family: var(--serif-text); font-weight: 300; }

.why-hero {
    position: relative;
    overflow: hidden;
    background: #eee5d9;
}

.why-hero-inner {
    position: relative;
    width: 100%;
    min-height: clamp(560px, 50vw, 760px);
    margin: 0 auto;
}

.why-hero-copy {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: clamp(560px, 50vw, 760px);
    width: min(50%, 760px);
    flex-direction: column;
    justify-content: center;
    padding: clamp(70px, 8vw, 132px) clamp(32px, 7vw, 120px);
}

.why-hero-copy .kicker { margin-bottom: 28px; }

.why-hero h1 {
    max-width: 8ch;
    margin-bottom: 30px;
    font-size: clamp(4.1rem, 7vw, 7rem);
    font-weight: 100;
    letter-spacing: -0.045em;
    line-height: 0.88;
}

.why-hero-copy > p:last-child {
    max-width: 540px;
    color: #4b4741;
    font-size: clamp(1.05rem, 1.35vw, 1.3rem);
    line-height: 1.65;
}

.why-hero-media { position: absolute; z-index: 0; inset: 0; overflow: hidden; background: #eee5d9; }
.why-hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

.why-promise { padding: clamp(30px, 4vw, 54px) 0; background: #e8ded1; }
.why-promise-copy { padding-left: clamp(22px, 3vw, 42px); border-left: 1px solid var(--gold); }
.why-promise h2 { margin-bottom: 6px; font-size: clamp(2rem, 3.4vw, 3.6rem); font-weight: 100; letter-spacing: -0.025em; line-height: 1; }
.why-promise p { color: #49453f; font-size: 0.98rem; }

.why-story-modern { padding: clamp(78px, 9vw, 136px) 0; background: var(--cream); }
.why-story-inner { display: grid; grid-template-columns: minmax(320px, 0.78fr) minmax(480px, 1.22fr); width: min(calc(100% - 80px), 1500px); margin: 0 auto; align-items: stretch; }
.why-story-copy { align-self: center; padding: clamp(30px, 6vw, 92px) clamp(32px, 7vw, 112px) clamp(30px, 6vw, 92px) 0; }
.why-story-copy h2 { max-width: 11ch; margin: 16px 0 28px; font-size: clamp(2.9rem, 5.2vw, 5.5rem); font-weight: 100; letter-spacing: -0.04em; line-height: 0.93; }
.why-story-copy > p:not(.kicker) { max-width: 52ch; margin-bottom: 20px; color: #4a4640; font-size: 1rem; line-height: 1.75; }
.why-story-media { min-height: clamp(480px, 49vw, 690px); overflow: hidden; }
.why-story-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.why-technology { padding-top: clamp(86px, 10vw, 140px); padding-bottom: clamp(86px, 10vw, 140px); }
.why-technology .section-head h2 { font-size: clamp(2.8rem, 5vw, 5rem); font-weight: 100; letter-spacing: -0.035em; line-height: 0.95; }

.why-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.why-row + .why-row { margin-top: 56px; }

.why-photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--grey-100); }
.why-photo img { width: 100%; height: 100%; object-fit: cover; }

.why-row-flip .why-photo { order: 2; }

.why-row-text .pillar-number { display: block; margin-bottom: 0.6rem; }
.why-row-text h3 { font-size: 1.5rem; margin-bottom: 0.8rem; }
.why-row-text p { color: var(--grey-600); margin-bottom: 1.2rem; }

.big-section .section-head { margin-left: auto; margin-right: auto; margin-bottom: 56px; }
.big-title { font-size: clamp(2rem, 4.5vw, 3.2rem); letter-spacing: 0.04em; margin-top: 0.4rem; }

.big-photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--grey-100); }
.big-photo img { width: 100%; height: 100%; object-fit: cover; }

.big-card h3 {
    font-family: var(--sans);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 1.2rem 0 0.4rem;
}

.big-card p { color: var(--grey-400); font-size: 0.92rem; }

.band-buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

@media (max-width: 820px) {
    .why-hero-inner { display: flex; flex-direction: column; min-height: 0; }
    .why-hero-copy { min-height: 0; width: 100%; padding: 64px 32px 54px; }
    .why-hero h1 { max-width: none; }
    .why-hero-media { position: relative; min-height: 560px; }
    .why-hero-media img { width: 100%; object-position: 68% center; }
    .why-story-inner { grid-template-columns: 1fr; width: calc(100% - 48px); }
    .why-story-copy { padding: 0 0 52px; }
    .why-story-media { min-height: 520px; }
    .why-row { grid-template-columns: 1fr; gap: 20px; }
    .why-row + .why-row { margin-top: 44px; }
    .why-row-flip .why-photo { order: 0; }
}

@media (max-width: 560px) {
    .why-hero-copy { padding: 54px 24px 46px; }
    .why-hero h1 { font-size: clamp(3.5rem, 18vw, 5rem); }
    .why-hero-media { min-height: 440px; }
    .why-promise { padding: 34px 0; }
    .why-story-modern { padding: 70px 0; }
    .why-story-inner { width: calc(100% - 32px); }
    .why-story-media { min-height: 400px; }
}

/* Why L'ANZA — opbouw naar de officiële Waarom-pagina */
.page-why { background: #f7f4ef; }
.page-why h1, .page-why h2, .page-why h3, .why-nano-diagram strong { font-family: var(--lanza-heading); }

.why-cover { position: relative; display: grid; min-height: clamp(440px, 38vw, 570px); align-items: end; overflow: hidden; background: #79756e; color: var(--white); }
.why-cover > img, .why-contact > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why-cover > img { object-fit: cover; object-position: center 44%; }
.why-cover-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,20,18,.76) 0%, rgba(20,20,18,.68) 43%, rgba(20,20,18,.12) 64%, transparent 76%); }
.why-cover-copy { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(44px, 6vw, 76px); }
.why-cover-copy > * { max-width: 560px; }
.why-cover .kicker { color: var(--white); opacity: .76; }
.why-cover h1 { margin: 10px 0 18px; font-size: clamp(2.35rem, 4vw, 4.2rem); font-weight: 400; letter-spacing: -.04em; line-height: .98; text-transform: uppercase; }
.why-cover-copy > p:last-child { font-size: clamp(.94rem, 1.1vw, 1.05rem); line-height: 1.6; }

.why-wild { display: grid; grid-template-columns: minmax(340px, .82fr) minmax(420px, 1.18fr); min-height: 500px; background: #ede6dc; color: var(--black); }
.why-wild-copy, .why-science-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(46px, 6vw, 82px); }
.why-wild-copy .kicker, .why-science-copy .kicker { color: inherit; opacity: .68; }
.why-wild h2, .why-science h2 { margin: 11px 0 18px; font-size: clamp(2rem, 3.35vw, 3.55rem); font-weight: 400; letter-spacing: -.035em; line-height: 1; text-transform: uppercase; }
.why-wild-copy > p:not(.kicker), .why-science-copy > p:not(.kicker) { max-width: 47ch; margin-bottom: 22px; font-size: .95rem; line-height: 1.6; }
.why-wild-copy .btn { align-self: flex-start; }
.why-wild-copy .btn-light { border-color: var(--black); color: var(--black); }
.why-wild-copy .btn-light:hover { border-color: var(--black); background: var(--black); color: var(--white); }
.why-wild-media, .why-science-media { position: relative; min-height: 500px; overflow: hidden; }
.why-wild-media img, .why-science-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why-wild-media img { object-position: 68% center; }

.why-commitment { padding-top: clamp(60px, 7vw, 88px); padding-bottom: clamp(60px, 7vw, 88px); background: #f7f4ef; }
.why-commitment .section-head h2, .why-ingredients .section-head h2 { font-size: clamp(2.15rem, 3.6vw, 3.65rem); font-weight: 400; letter-spacing: -.035em; line-height: 1; text-transform: uppercase; }
.why-commitment-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 38px; border-top: 1px solid #bcb7ae; }
.why-commitment-grid article { padding: 28px clamp(20px, 3vw, 40px) 0; text-align: center; }
.why-commitment-grid article + article { border-left: 1px solid #bcb7ae; }
.why-commitment-grid span { color: var(--gold-dark); font-family: var(--serif); }
.why-commitment-grid h3 { margin: 12px 0 10px; font-size: .82rem; font-weight: 400; letter-spacing: .07em; line-height: 1.35; text-transform: uppercase; }
.why-commitment-grid p { color: var(--grey-600); font-size: .88rem; line-height: 1.55; }

.why-ingredients { padding: clamp(62px, 7vw, 92px) 0; background: #f7f3ee; }
.why-ingredient-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 4vw, 60px); margin-top: 36px; }
.why-ingredient-card { min-width: 0; }
.why-botanical-cluster { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(8px, 1vw, 14px); }
.why-botanical-cluster span { display: block; aspect-ratio: 1; border-radius: 50%; background-image: var(--botanical-image); background-repeat: no-repeat; background-size: 878% 406%; background-position: var(--botanical-position); }
.why-ingredient-card h3 { margin-top: 18px; font-size: .76rem; font-weight: 400; letter-spacing: .07em; line-height: 1.4; text-align: center; text-transform: uppercase; }

.why-science { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 500px; background: #ede6dc; }
.why-science-media img { object-position: center; }
.why-science-copy { color: #1e1d1a; }
.why-science-copy .text-link { width: fit-content; }

.why-nano { padding-top: clamp(62px, 7vw, 92px); padding-bottom: clamp(62px, 7vw, 92px); background: var(--white); }
.why-nano-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(52px, 8vw, 110px); align-items: center; }
.why-nano-copy h2 { margin: 10px 0 20px; font-size: clamp(2.5rem, 4.5vw, 4.6rem); font-weight: 400; letter-spacing: -.045em; line-height: .92; text-transform: uppercase; }
.why-nano-copy h2 sup { font-size: .38em; vertical-align: super; }
.why-nano-copy > p:last-child { max-width: 48ch; color: var(--grey-600); font-size: .92rem; line-height: 1.6; }
.why-nano-diagram { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 28px; align-items: start; }
.why-nano-step { text-align: center; }
.why-nano-step span { display: block; width: clamp(70px, 8vw, 100px); aspect-ratio: 1; margin: 0 auto 14px; border: 1px solid #7d776f; border-radius: 50%; background: radial-gradient(circle, #b99a78 0 7%, transparent 8% 17%, #cdb79f 18% 22%, transparent 23% 38%, #d9cec0 39% 42%, transparent 43%); }
.why-nano-step p { font-size: .74rem; font-weight: 600; letter-spacing: .06em; line-height: 1.45; text-transform: uppercase; }
.why-nano-diagram strong { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid #bcb7ae; font-size: clamp(.9rem, 1.45vw, 1.2rem); font-weight: 400; letter-spacing: .06em; line-height: 1.4; text-align: center; text-transform: uppercase; }

.why-contact { position: relative; display: grid; min-height: clamp(340px, 34vw, 460px); place-items: center; overflow: hidden; background: #111; color: var(--white); text-align: center; }
.why-contact-shade { position: absolute; inset: 0; background: rgba(8,8,8,.58); }
.why-contact-copy { position: relative; z-index: 1; }
.why-contact-copy h2 { margin-bottom: 12px; font-size: clamp(2.25rem, 4.3vw, 4.2rem); font-weight: 400; letter-spacing: -.04em; line-height: .96; text-transform: uppercase; }
.why-contact-copy p { margin-bottom: 20px; font-size: .96rem; }

@media (max-width: 900px) {
    .why-wild, .why-science { grid-template-columns: 1fr 1fr; }
    .why-wild-copy, .why-science-copy { padding: 56px 36px; }
    .why-ingredient-grid { grid-template-columns: repeat(2, 1fr); gap: 42px 28px; }
    .why-nano-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .why-cover { display: block; min-height: 0; background: #363633; }
    .why-cover > img { height: auto; aspect-ratio: 2600 / 1235; object-fit: contain; object-position: center; }
    .why-cover-shade { top: 47.5vw; background: #363633; }
    .why-cover-copy { padding-top: calc(47.5vw + 32px); padding-bottom: 36px; }
    .why-cover h1 { font-size: clamp(2.15rem, 10vw, 3.25rem); }
    .why-wild, .why-science { grid-template-columns: 1fr; }
    .why-wild-media, .why-science-media { min-height: 390px; }
    .why-wild-media { order: -1; }
    .why-wild-copy, .why-science-copy { padding: 40px 24px 46px; }
    .why-commitment-grid { grid-template-columns: 1fr; }
    .why-commitment-grid article { padding: 26px 10px; }
    .why-commitment-grid article + article { border-top: 1px solid #bcb7ae; border-left: 0; }
    .why-ingredient-card h3 { font-size: .72rem; }
    .why-nano-diagram { gap: 28px 16px; }
    .why-contact > img { object-position: 45% center; }
}

/* ---------------------------------------------------------------- contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

.contact-block h2 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.contact-block > p { color: var(--grey-600); margin-bottom: 1.4rem; }

.contact-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.contact-list strong { display: inline-block; min-width: 90px; font-weight: 600; }
.contact-list a { border-bottom: 1px solid var(--gold); }

.contact-block-accent { background: var(--grey-100); padding: 36px; }

/* contact: kaart met iconen + social */
.contact-item { display: flex; align-items: flex-start; gap: 14px; }
.contact-item > span:last-child { display: flex; flex-direction: column; }
.contact-icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--gold); margin-top: 2px; }
.contact-icon svg { width: 100%; height: 100%; display: block; }
.contact-label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-600); margin-bottom: 2px; }

.contact-socials { display: flex; gap: 12px; margin-top: 28px; }
.contact-socials a {
    width: 42px;
    height: 42px;
    border: 1px solid var(--grey-200);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.contact-socials a:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.contact-socials svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------ salon-pagina */
.salon-atelier-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(540px, 56vw, 700px);
    overflow: hidden;
    isolation: isolate;
    color: var(--white);
}

.salon-atelier-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -2;
}

.salon-atelier-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(17, 17, 17, 0.16) 0%, rgba(17, 17, 17, 0.28) 42%, rgba(17, 17, 17, 0.84) 100%),
        linear-gradient(90deg, rgba(17, 17, 17, 0.38) 0%, transparent 65%);
}

.salon-atelier-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(300px, 0.72fr);
    gap: clamp(48px, 8vw, 140px);
    align-items: end;
    width: 100%;
    padding-top: 96px;
    padding-bottom: clamp(54px, 6vw, 82px);
}

.salon-atelier-hero .kicker,
.salon-atelier-education-card .kicker { color: #dbc49c; }

.salon-atelier-hero h1 {
    max-width: 9ch;
    color: var(--white);
    font-size: clamp(4rem, 6.2vw, 6.8rem);
    font-weight: 300;
    line-height: 0.88;
    letter-spacing: -0.045em;
}

.salon-atelier-hero-copy {
    max-width: 520px;
    padding-bottom: 6px;
}

.salon-atelier-hero-copy p {
    margin-bottom: 32px;
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(1.05rem, 1.35vw, 1.35rem);
    line-height: 1.65;
}

.salon-atelier-manifesto,
.salon-atelier-support-section,
.salon-atelier-form-section {
    padding: clamp(88px, 9vw, 144px) 0;
}

.salon-atelier-manifesto { background: var(--white); }

.salon-atelier-manifesto-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(64px, 9vw, 150px);
    align-items: start;
}

.salon-atelier-manifesto-title {
    position: sticky;
    top: 148px;
}

.salon-atelier-manifesto-title h2,
.salon-atelier-support-head h2,
.salon-atelier-band-content h2,
.salon-form-intro h2,
.salon-atelier-education-card h2 {
    font-weight: 300;
    letter-spacing: -0.025em;
}

.salon-atelier-manifesto-title h2 { font-size: clamp(3.2rem, 5.3vw, 6rem); }

.salon-atelier-lead {
    color: var(--grey-600);
    font-size: clamp(1.08rem, 1.45vw, 1.35rem);
    line-height: 1.7;
}

.salon-atelier-pillar-list { margin-top: clamp(42px, 5vw, 72px); }

.salon-atelier-pillar-row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 24px;
    padding: 34px 0 38px;
    border-top: 1px solid var(--grey-200);
}

.salon-atelier-pillar-row:last-child { border-bottom: 1px solid var(--grey-200); }

.salon-atelier-pillar-row > span,
.salon-atelier-support-item > span {
    color: var(--gold);
    font-family: var(--serif);
    font-size: 1.25rem;
}

.salon-atelier-pillar-row h3,
.salon-atelier-support-item h3 {
    margin-bottom: 12px;
    font-size: clamp(1.7rem, 2.3vw, 2.35rem);
    font-weight: 300;
}

.salon-atelier-pillar-row p,
.salon-atelier-support-item p { color: var(--grey-600); line-height: 1.7; }

@media (min-width: 821px) {
    .salon-atelier-manifesto-content .salon-atelier-lead {
        font-size: clamp(0.95rem, 1.1vw, 1.08rem);
        line-height: 1.55;
    }

    .salon-atelier-manifesto-content .salon-atelier-pillar-list { margin-top: 24px; }

    .salon-atelier-manifesto-content .salon-atelier-pillar-row {
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 18px;
        padding: 25px 0 28px;
    }

    .salon-atelier-manifesto-content .salon-atelier-pillar-row h3 {
        margin-bottom: 6px;
        font-size: clamp(1.55rem, 1.75vw, 1.9rem);
    }

    .salon-atelier-manifesto-content .salon-atelier-pillar-row p {
        font-size: 0.9rem;
        line-height: 1.55;
    }
}

.salon-atelier-education {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(660px, 62vw, 860px);
    overflow: hidden;
    isolation: isolate;
}

.salon-atelier-education > img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.salon-atelier-education::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(17, 17, 17, 0.7) 0%, rgba(17, 17, 17, 0.16) 72%);
}

.salon-atelier-education-inner { width: 100%; padding-top: 72px; padding-bottom: 72px; }

.salon-atelier-education-card {
    max-width: 630px;
    padding: clamp(44px, 6vw, 78px);
    background: rgba(17, 17, 17, 0.94);
    color: var(--white);
}

.salon-atelier-education-card h2 {
    max-width: 10ch;
    margin-bottom: 24px;
    color: var(--white);
    font-size: clamp(3.1rem, 5vw, 5.5rem);
    line-height: 0.98;
}

.salon-atelier-education-card > p:not(.kicker) {
    margin-bottom: 32px;
    color: var(--grey-200);
    font-size: 1.05rem;
    line-height: 1.75;
}

.salon-atelier-support-section { background: var(--grey-100); }

.salon-atelier-support-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
    gap: clamp(50px, 9vw, 150px);
    align-items: end;
    margin-bottom: clamp(56px, 7vw, 92px);
}

.salon-atelier-support-head h2 { max-width: 10ch; font-size: clamp(3.2rem, 5.8vw, 6.2rem); }

.salon-atelier-support-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(173, 137, 79, 0.55);
    border-bottom: 1px solid rgba(173, 137, 79, 0.55);
}

.salon-atelier-support-item {
    min-height: 320px;
    padding: 44px clamp(28px, 3.5vw, 56px) 48px;
}

.salon-atelier-support-item + .salon-atelier-support-item {
    border-left: 1px solid rgba(173, 137, 79, 0.55);
}

.salon-atelier-support-item h3 { margin-top: 42px; }

.salon-atelier-band {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(560px, 58vw, 760px);
    overflow: hidden;
    isolation: isolate;
}

.salon-atelier-band > img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 36%;
}

.salon-atelier-band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(17, 17, 17, 0.54);
}

.salon-atelier-band-content {
    width: min(calc(100% - 48px), 820px);
    margin: 0 auto;
    padding: 80px 0;
    color: var(--white);
    text-align: center;
}

.salon-atelier-band-content h2 {
    margin-bottom: 24px;
    color: var(--white);
    font-size: clamp(3.7rem, 7vw, 7.2rem);
    line-height: 0.95;
}

.salon-atelier-band-content p {
    max-width: 620px;
    margin: 0 auto 34px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.08rem;
    line-height: 1.7;
}

.salon-atelier-form-section {
    scroll-margin-top: 100px;
    background: #eee8de;
}

.salon-form-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 56px;
    align-items: start;
}

.salon-form-intro .lead { margin: 1.2rem 0 2.2rem; color: var(--grey-600); line-height: 1.7; }
.salon-form-photo { overflow: hidden; }
.salon-form-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.7s ease; }
.salon-form-photo:hover img { transform: scale(1.025); }

.salon-atelier-form-grid {
    gap: clamp(56px, 8vw, 120px);
    align-items: stretch;
}

.salon-atelier-form-grid .salon-form-intro {
    display: flex;
    flex-direction: column;
}

.salon-atelier-form-grid .salon-form-photo { flex: 1; min-height: 0; }
.salon-atelier-form-grid .salon-form-photo img { display: block; height: 100%; aspect-ratio: auto; }

.salon-form.salon-atelier-form {
    padding: clamp(30px, 4.2vw, 54px);
    border-left: 4px solid var(--gold);
    box-shadow: 0 20px 60px rgba(17, 17, 17, 0.07);
}

.salon-form,
.contact-form {
    background: var(--white);
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#contact-form { margin-top: 0; }
.contact-form { border: 1px solid var(--grey-200); }

.contact-salons { background: var(--grey-100); padding: clamp(32px, 5vw, 56px); text-align: center; }
.contact-salons p { color: var(--grey-600); max-width: 60ch; margin: 0.6rem auto 1.6rem; }

.form-row { display: flex; flex-direction: column; gap: 12px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.form-field { display: flex; flex-direction: column; gap: 6px; }

.form-field span {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-600);
}

.form-field input,
.form-field textarea {
    font: inherit;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--grey-200);
    background: var(--white);
}

.form-field input:focus,
.form-field textarea:focus { outline: none; border-color: var(--gold); }

.form-field.has-error input,
.form-field.has-error textarea { border-color: #b3261e; }

.form-check { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; cursor: pointer; }
.form-check input { width: 16px; height: 16px; accent-color: var(--black); }

.form-hp { position: absolute; left: -9999px; opacity: 0; }

.salon-form button,
.contact-form button { align-self: flex-start; }

.form-success { background: #eef5ee; border-left: 2px solid #3a7d44; padding: 14px 18px; font-size: 0.95rem; }
.form-error { background: #faeeed; border-left: 2px solid #b3261e; padding: 14px 18px; font-size: 0.95rem; }

/* ----------------------------------------------------------------- footer */
.site-footer {
    margin-top: 0;
    padding: 56px 0 32px;
    background: #242424;
    color: var(--white);
}

.footer-shell {
    width: min(calc(100% - 80px), 1550px);
    margin: 0 auto;
}

.footer-top {
    display: grid;
    grid-template-columns: minmax(230px, 1.35fr) repeat(3, minmax(150px, 1fr));
    gap: clamp(40px, 5vw, 84px);
}

.footer-brand {
    max-width: 340px;
}

.footer-brand-logo {
    display: block;
    width: 140px;
    height: auto;
    margin-bottom: 28px;
}

.footer-brand p {
    max-width: 310px;
    font-family: var(--serif-text);
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.65;
    opacity: 0.78;
}

.footer-menu {
    min-width: 150px;
}

.site-footer h4 {
    margin-bottom: 40px;
    color: var(--white);
    font-family: var(--serif);
    font-size: clamp(1rem, 1.67vw, 1.5rem);
    font-weight: 300;
    letter-spacing: normal;
    line-height: 1;
    text-transform: uppercase;
}

.site-footer ul {
    list-style: none;
}

.footer-menu ul {
    display: grid;
    gap: 24px;
}

.footer-menu a {
    color: var(--white);
    font-family: var(--serif);
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.2;
}

.footer-menu a:hover { text-decoration: underline; text-underline-offset: 4px; }

.footer-connect {
    min-width: 150px;
}

.footer-socials {
    display: grid;
    gap: 24px;
}

.footer-socials a {
    color: var(--white);
    font-family: var(--serif);
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.2;
    transition: opacity 0.2s ease;
}

.footer-socials a:hover { opacity: 0.6; text-decoration: underline; text-underline-offset: 4px; }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 115px;
    font-size: 0.78rem;
    line-height: 1.4;
}

@media (max-width: 820px) {
    .site-footer { padding: 48px 0 36px; }
    .footer-shell { width: calc(100% - 48px); }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 56px 40px; }
    .footer-brand { grid-column: 1 / -1; }
    .site-footer h4 { margin-bottom: 24px; }
    .footer-bottom { margin-top: 64px; }
}

@media (max-width: 520px) {
    .footer-shell { width: calc(100% - 32px); }
    .footer-top { grid-template-columns: 1fr; }
    .footer-brand { grid-column: auto; }
    .footer-menu { min-width: 0; }
    .footer-menu a { font-size: 0.98rem; }
    .footer-bottom { flex-direction: column; margin-top: 56px; font-size: 0.72rem; }
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
    .header-actions { margin-left: auto; }
    .header-action-link,
    .header-search { display: none; }
}

@media (min-width: 821px) and (max-width: 1100px) {
    .header-inner {
        position: relative;
        justify-content: space-between;
    }

    .brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .nav-toggle { display: block; }
    .lang-switch { margin-left: 0; }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        right: auto;
        width: 100vw;
        background: var(--white);
        border-bottom: 1px solid var(--grey-200);
        flex-direction: column;
        gap: 0;
        margin-left: 0;
        padding: 8px 24px 16px;
        transform: translateX(-50%);
    }

    .main-nav.open { display: flex; }
    .main-nav > a { padding: 12px 0; border-bottom: 1px solid var(--grey-100); }
    .main-nav .nav-mobile-only { display: block; }
    .main-nav .nav-item.nav-mobile-only { display: flex; }

    .main-nav .nav-cta {
        justify-content: center;
        text-align: center;
        margin-top: 14px;
        padding: 14px 20px;
    }

    .nav-item { flex-direction: column; align-items: stretch; }

    .main-nav .nav-trigger {
        width: 100%;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid var(--grey-100);
        font-size: 0.82rem;
    }

    .nav-panel { display: none; }
    .nav-item.open > .nav-panel { display: block; padding: 4px 0 10px; }
    .mega-menu, .dropdown-menu { background: transparent; border: 0; box-shadow: none; padding: 0; }
    .discover-grid, .pro-grid { display: block; padding: 0; }
    .mega-grid { display: block; padding: 0; }
    .mega-quicklinks { gap: 0; padding: 6px 0; }
    .main-nav .mega-quicklinks a {
        width: 100%;
        padding: 9px 0 9px 12px;
        font-family: var(--sans);
        font-size: 0.95rem;
        letter-spacing: 0.04em;
    }
    .mega-col { padding: 6px 0; }
    .mega-quicklinks + .mega-col,
    .mega-col + .mega-col { border-top: 1px solid var(--grey-100); padding-top: 12px; }
    .mega-head { margin-bottom: 8px; }
    .mega-col ul { gap: 0; }
    .mega-col a, .dropdown-menu a {
        display: block;
        padding: 9px 0 9px 12px;
        font-family: var(--sans);
        font-size: 0.95rem;
    }
    .mega-viewall { margin-top: 6px; padding-left: 12px; }
    .mega-promo { display: none !important; }
}

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(3, 1fr); }

    .salon-atelier-hero-inner {
        grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
        gap: 48px;
    }

    .salon-atelier-manifesto-grid { gap: 64px; }
    .salon-atelier-support-item { padding-right: 28px; padding-left: 28px; }
}

@media (max-width: 820px) {
    .header-inner { position: relative; justify-content: space-between; }
    .brand { position: absolute; left: 50%; transform: translateX(-50%); }
    .lang-switch { margin-left: 0; }
    .nav-toggle { display: block; order: -1; }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        border-bottom: 1px solid var(--grey-200);
        flex-direction: column;
        gap: 0;
        padding: 8px 24px 16px;
    }

    .main-nav.open { display: flex; }
    .main-nav > a { padding: 12px 0; border-bottom: 1px solid var(--grey-100); }
    .main-nav .nav-mobile-only { display: block; }
    .main-nav .nav-item.nav-mobile-only { display: flex; }

    /* salon CTA als volle knop in mobiel menu */
    .main-nav .nav-cta {
        justify-content: center;
        text-align: center;
        margin-top: 14px;
        padding: 14px 20px;
    }

    /* mega menu / dropdowns als accordion */
    .nav-item { flex-direction: column; align-items: stretch; }

    .main-nav .nav-trigger {
        width: 100%;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid var(--grey-100);
        font-size: 0.82rem;
    }

    .nav-panel { display: none; }
    .nav-item.open > .nav-panel { display: block; padding: 4px 0 10px; }

    .mega-menu, .dropdown-menu { background: transparent; border: 0; box-shadow: none; padding: 0; }
    .discover-grid, .pro-grid { display: block; padding: 0; }
    .mega-grid { display: block; padding: 0; }
    .mega-quicklinks { gap: 0; padding: 6px 0; }
    .main-nav .mega-quicklinks a {
        width: 100%;
        padding: 9px 0 9px 12px;
        font-family: var(--sans);
        font-size: 0.95rem;
        letter-spacing: 0.04em;
    }
    .mega-col { padding: 6px 0; }
    .mega-quicklinks + .mega-col,
    .mega-col + .mega-col { border-top: 1px solid var(--grey-100); padding-top: 12px; }
    .mega-head { margin-bottom: 8px; }
    .mega-col ul { gap: 0; }
    .mega-col a, .dropdown-menu a {
        display: block;
        padding: 9px 0 9px 12px;
        font-family: var(--sans);
        font-size: 0.95rem;
    }
    .mega-viewall { margin-top: 6px; padding-left: 12px; }
    .mega-promo { display: none !important; }

    .hero-split { grid-template-columns: 1fr; min-height: 0; }
    .hero-text-col { padding: 40px 24px 32px; }
    .hero-photo { min-height: 320px; order: -1; }
    .hero-photo-product { max-height: 70%; left: 12px; }

    .product-slider { grid-auto-columns: calc((100% - 18px) / 2); gap: 18px; }

    .healthy-section { grid-template-columns: 1fr; }
    .healthy-photo { min-height: 280px; }

    .collection-hero { grid-template-columns: 1fr; min-height: 0; }
    .collection-hero-photo { min-height: 260px; order: -1; }
    .collection-hero-text { padding: 32px 24px 40px; }

    .about-grid { grid-template-columns: 1fr; }
    .about-photo { order: -1; max-width: 420px; }

    .complex-grid { grid-template-columns: 1fr 1fr; }

    .home-collections-inner { width: min(100% - 48px, 1550px); }
    .home-collections-head { align-items: baseline; }
    .home-collections-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 16px; }
    .collections-editorial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .shopby-section .tab-buttons { gap: 8px; }
    .shopby-section .tab-btn { width: 50%; padding: 20px 14px; font-size: 1.05rem; }
    .shopby-section .shopby-strip,
    .shopby-section .shopby-strip-3 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 0;
    }
    .shopby-section .shopby-tile,
    .shopby-section .shopby-tile:first-child,
    .shopby-section .shopby-strip .shopby-tile:hover { min-height: 320px; }
    .shopby-section .shopby-tile img { min-height: 320px; height: 320px; }
    .shopby-section .shopby-label { font-size: clamp(1rem, 4.5vw, 1.5rem); }

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

    .usp-grid { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }

    .product-detail { grid-template-columns: 1fr; gap: 32px; }
    .product-gallery { position: static; }
    .product-gallery-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .contact-grid { grid-template-columns: 1fr; }

    .salon-form-grid { grid-template-columns: 1fr; gap: 32px; }
    .form-row-2 { grid-template-columns: 1fr; }
    .salon-form, .contact-form { padding: 24px; }

    .salon-atelier-hero {
        min-height: 640px;
        align-items: flex-end;
    }

    .salon-atelier-hero-inner {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-top: 72px;
        padding-bottom: 48px;
    }

    .salon-atelier-hero h1 { max-width: 8ch; font-size: clamp(3.6rem, 12vw, 5.8rem); }
    .salon-atelier-hero-copy { max-width: 580px; }

    .salon-atelier-manifesto-grid { grid-template-columns: 1fr; gap: 42px; }
    .salon-atelier-manifesto-title { position: static; }
    .salon-atelier-manifesto-title h2 { max-width: 10ch; }

    .salon-atelier-education { min-height: 640px; }
    .salon-atelier-education-card { max-width: 560px; }

    .salon-atelier-support-head { grid-template-columns: 1fr; gap: 30px; }
    .salon-atelier-support-grid { grid-template-columns: 1fr; }
    .salon-atelier-support-item { min-height: 0; padding: 38px 0 42px; }
    .salon-atelier-support-item + .salon-atelier-support-item { border-top: 1px solid rgba(173, 137, 79, 0.55); border-left: 0; }
    .salon-atelier-support-item h3 { margin-top: 26px; }

    .salon-atelier-band { min-height: 600px; }
    .salon-atelier-form-grid { gap: 48px; align-items: start; }
    .salon-atelier-form-grid .salon-form-intro { display: block; }
    .salon-atelier-form-grid .salon-form-photo img { height: auto; aspect-ratio: 4 / 3; }
    .salon-form.salon-atelier-form { padding: 30px; border-left-width: 3px; }
}

@media (max-width: 520px) {
    .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; gap: 18px; }
    .complex-grid { grid-template-columns: 1fr; }
    .usp-grid { grid-template-columns: repeat(2, 1fr); }
    .section { padding: 48px 0; }
    .home-collections { padding: 58px 0 64px; }
    .home-collections-inner { width: calc(100% - 32px); }
    .home-collections-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
    }
    .home-collections-head h2 { font-size: clamp(3.25rem, 16vw, 4.75rem); }
    .home-collections-head a { font-size: 1.3rem; }
    .home-collections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }
    .home-collections-grid .collection-editorial-title { margin-top: 12px; font-size: 1.12rem; }
    .home-collections-grid .collection-editorial-tagline { min-height: 0; font-size: 0.92rem; }
    .home-collections-grid .collection-editorial-button { margin-top: 14px; padding: 11px 8px; font-size: 0.9rem; }
    .collections-editorial-grid { grid-template-columns: 1fr; gap: 44px; }
    .collection-editorial-title { margin-top: 16px; }
    .collection-editorial-tagline { min-height: 0; }
    .collection-editorial-button { margin-top: 18px; }
    .header-inner { gap: 16px; }
    .brand svg { width: 130px; height: auto; }

    .salon-atelier-hero { min-height: 570px; }
    .salon-atelier-hero-inner { padding-top: 56px; padding-bottom: 36px; }
    .salon-atelier-hero h1 { font-size: clamp(3.2rem, 15vw, 4.7rem); }
    .salon-atelier-hero-copy p { margin-bottom: 24px; font-size: 1rem; }

    .salon-atelier-manifesto,
    .salon-atelier-support-section,
    .salon-atelier-form-section { padding: 68px 0; }

    .salon-atelier-pillar-row { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 26px 0 30px; }
    .salon-atelier-pillar-row h3 { font-size: 1.6rem; }

    .salon-atelier-education { min-height: 580px; }
    .salon-atelier-education-inner { padding-top: 28px; padding-bottom: 28px; }
    .salon-atelier-education-card { padding: 36px 24px 40px; }
    .salon-atelier-education-card h2 { font-size: 3.2rem; }

    .salon-atelier-support-head { margin-bottom: 38px; }
    .salon-atelier-support-head h2 { font-size: 3.5rem; }
    .salon-atelier-band { min-height: 540px; }
    .salon-atelier-band-content h2 { font-size: clamp(3.3rem, 16vw, 5rem); }

    .salon-form.salon-atelier-form { padding: 26px 20px; }
}

/* ------------------------------------------------------- blog (L'ANZA Buzz) */
.article-card { display: flex; flex-direction: column; }

.article-card-image {
    aspect-ratio: 4 / 3;
    background: var(--grey-100);
    overflow: hidden;
    margin-bottom: 16px;
}

.article-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.article-card:hover .article-card-image img { transform: scale(1.04); }

.article-card-date {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--grey-400);
    margin-bottom: 0.5rem;
}

.article-card h3 { margin-bottom: 0.5rem; }
.article-card p { font-size: 0.9rem; color: var(--grey-600); margin-bottom: 1rem; flex-grow: 1; }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 56px; }

.page-btn {
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--grey-200);
    font-size: 0.85rem;
    padding: 0 12px;
}

a.page-btn:hover { border-color: var(--black); }
.page-btn.active { background: var(--black); color: var(--white); border-color: var(--black); }
.page-btn.disabled { color: var(--grey-400); }

.page-head .article-title { max-width: 24ch; }

.article-date {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--grey-600);
    margin-top: 1rem;
}

.article-hero { max-height: 480px; overflow: hidden; margin-bottom: 48px; background: var(--grey-100); }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }

.article-body { margin: 0 auto; }
.article-paragraph { margin-bottom: 1.2rem; }

.article-tip { margin-top: 2.6rem; }

.article-tip-title {
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    margin-bottom: 0.8rem;
}

.article-tip-title .pillar-number { flex-shrink: 0; }

.tip-product {
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid var(--grey-200);
    background: var(--white);
    padding: 16px 20px;
    margin: 1.4rem 0;
}

.tip-product-image {
    width: 72px;
    height: 88px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grey-100);
}

.tip-product-image img { max-width: 85%; max-height: 85%; object-fit: contain; }

.tip-product-info { display: flex; flex-direction: column; gap: 4px; }

.tip-product-label {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}

.tip-product-name { font-family: var(--serif); font-size: 1.05rem; }

.article-outro { margin-top: 2.6rem; }
.article-back { margin-top: 3rem; }

@media (max-width: 520px) {
    .article-card { grid-column: 1 / -1; }
    .tip-product { flex-direction: row; padding: 12px 14px; gap: 14px; }
    .article-tip-title { gap: 12px; }
}

/* ------------------------------------------------------- hair consult */
.hair-consult-page main { background: #fff; }
.hair-quiz { min-height: 700px; color: #0b0b0b; font-family: Arial, Helvetica, sans-serif; }
.hair-quiz-step { display: none; }
.hair-quiz-step.active { display: block; animation: hairQuizFade .28s ease; }

@keyframes hairQuizFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.hair-quiz-intro.active { display: grid; grid-template-columns: 1fr 1fr; min-height: 700px; }
.hair-quiz-intro-image { min-width: 0; }
.hair-quiz-intro-image img { display: block; width: 100%; height: 100%; min-height: 700px; object-fit: cover; object-position: center; }
.hair-quiz-intro-copy { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 42px; text-align: center; }
.hair-quiz-intro-copy h1 { margin: 0 0 32px; font: 400 clamp(2rem, 3.1vw, 3rem)/1.18 Arial, Helvetica, sans-serif; letter-spacing: -.035em; }

.hair-quiz-primary { display: inline-flex; align-items: center; justify-content: center; min-width: 160px; min-height: 50px; padding: 15px 22px; border: 1px solid #000; border-radius: 0; background: #000; color: #fff; font: 700 .78rem/1.3 Arial, Helvetica, sans-serif; letter-spacing: .02em; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.hair-quiz-primary:hover { background: #fff; color: #000; }

.hair-quiz-question { min-height: 700px; padding-top: 1px; }
.hair-quiz-progress { display: flex; align-items: flex-start; gap: 18px; width: min(720px, calc(100% - 48px)); margin: 0 auto; padding-top: 40px; }
.hair-quiz-progress strong { min-width: 44px; margin-top: -18px; font: 700 .82rem/1 Arial, Helvetica, sans-serif; }
.hair-quiz-progress-line { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 2px; background: #e4e9e7; }
.hair-quiz-progress-line span { width: 12px; height: 12px; border-radius: 50%; background: #e4e9e7; }
.hair-quiz-progress-line span.is-current, .hair-quiz-progress-line span.is-complete { background: #000; }

.hair-quiz-question-layout { display: grid; grid-template-columns: minmax(0, 65%) minmax(330px, 35%); min-height: 650px; margin-top: 28px; }
.hair-quiz-question-copy { display: flex; flex-direction: column; justify-content: center; width: min(620px, calc(100% - 64px)); margin: 0 auto; padding: 38px 0 56px; }
.hair-quiz-question-layout:not(.is-icons) .hair-quiz-question-copy { justify-content: flex-start; padding-top: 64px; }
.hair-quiz-question-copy h2 { margin: 0 0 28px; font: 400 clamp(1.85rem, 2.5vw, 2.55rem)/1.18 Arial, Helvetica, sans-serif; letter-spacing: -.035em; text-align: center; }
.hair-quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.hair-quiz-option { display: flex; align-items: center; gap: 15px; min-height: 64px; padding: 14px 20px; border: 1px solid #111; border-radius: 16px; background: #fff; color: #111; font: 400 1rem/1.2 Arial, Helvetica, sans-serif; text-align: left; cursor: pointer; transition: background .18s, color .18s; }
.hair-quiz-option:hover, .hair-quiz-option.selected { background: #000; color: #fff; }
.hair-quiz-radio { flex: 0 0 17px; width: 17px; height: 17px; border: 1px solid currentColor; border-radius: 50%; }
.hair-quiz-option.selected .hair-quiz-radio { border: 5px solid #fff; }
.hair-quiz-question-image { min-height: 650px; overflow: hidden; }
.hair-quiz-question-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hair-quiz-question-layout.is-icons { display: block; }
.hair-quiz-question-layout.is-icons .hair-quiz-question-copy { width: min(860px, calc(100% - 48px)); min-height: 620px; padding-bottom: 70px; }
.hair-quiz-question-layout.is-icons .hair-quiz-question-copy h2 { margin-bottom: 48px; font-size: clamp(2.35rem, 3.3vw, 3.2rem); }
.hair-quiz-icon-options { grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 4vw, 54px); }
.hair-quiz-icon-options .hair-quiz-option { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #111; text-align: center; }
.hair-quiz-type-icon { width: 150px; height: 150px; border-radius: 50%; color: #111; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transition: color .18s ease, background .18s ease, transform .18s ease; }
.hair-quiz-icon-options .hair-quiz-option:hover .hair-quiz-type-icon { background: #f2f2f0; transform: scale(1.025); }
.hair-quiz-icon-options .hair-quiz-option.selected .hair-quiz-type-icon { background: #111; color: #fff; transform: scale(1.025); }
.hair-quiz-icon-options .hair-quiz-option:hover, .hair-quiz-icon-options .hair-quiz-option.selected { background: transparent; color: #000; }

.hair-quiz-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.hair-quiz-nav, .hair-quiz-skip { border: 0; background: transparent; color: #111; font: 700 .8rem/1 Arial, Helvetica, sans-serif; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.hair-quiz-back { justify-self: start; }
.hair-quiz-next { justify-self: end; }
.hair-quiz-next:disabled { opacity: .35; cursor: default; }
.hair-quiz-skip { align-self: center; margin: 26px auto 0; padding: 0 38px 9px; border-bottom: 1px solid #111; }

.hair-quiz-results { padding: 0 0 80px; }
.hair-quiz-result-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 590px; background: #f4f4f2; }
.hair-quiz-result-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 70px clamp(32px, 7vw, 110px); }
.hair-quiz-result-copy > p { margin: 0 0 14px; font: 700 .78rem/1 Arial, Helvetica, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.hair-quiz-result-copy h2 { margin: 0 0 20px; font-size: clamp(2.4rem, 5vw, 4.6rem); }
.hair-quiz-result-copy > div { max-width: 50ch; margin-bottom: 30px; line-height: 1.65; }
.hair-quiz-result-image { display: flex; min-width: 0; align-items: center; justify-content: center; padding: clamp(44px, 5vw, 76px); }
.hair-quiz-result-image img { display: block; width: 100%; max-width: 760px; height: auto; max-height: 640px; object-fit: contain; }
.hair-quiz-products { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.hair-quiz-products [data-consult-product][hidden] { display: none; }
.hair-quiz-products > h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    min-height: clamp(190px, 18vw, 270px);
    margin: 0 calc(50% - 50vw) clamp(42px, 5vw, 68px);
    padding: 36px 24px;
    background: #f3efe9;
    font-family: var(--serif);
    font-size: clamp(2.5rem, 5vw, 4.9rem);
    font-weight: 400;
    letter-spacing: -.04em;
    line-height: .95;
    text-align: center;
}
.hair-quiz-products .product-card { text-align: left; }
.hair-quiz-restart { display: block; margin: 58px auto 0; }

@media (max-width: 820px) {
    .hair-quiz, .hair-quiz-question { min-height: 0; }
    .hair-quiz-intro.active { grid-template-columns: 1fr; min-height: 0; }
    .hair-quiz-intro-image img { min-height: 0; aspect-ratio: 1 / .95; object-position: center top; }
    .hair-quiz-intro-copy { min-height: 330px; padding: 54px 24px; }
    .hair-quiz-question-layout { grid-template-columns: 1fr; min-height: 0; }
    .hair-quiz-question-copy { width: min(620px, calc(100% - 40px)); padding: 60px 0 46px; }
    .hair-quiz-question-image { grid-row: 1; min-height: 0; }
    .hair-quiz-question-image img { aspect-ratio: 1 / .82; object-position: center 30%; }
    .hair-quiz-question-layout.is-icons .hair-quiz-question-copy { min-height: 590px; }
    .hair-quiz-icon-options { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
    .hair-quiz-type-icon { width: 112px; height: 112px; }
    .hair-quiz-result-hero { grid-template-columns: 1fr; }
    .hair-quiz-result-image { grid-row: 1; min-height: 380px; padding: 32px; }
}

@media (max-width: 560px) {
    .hair-quiz-progress { width: calc(100% - 40px); padding-top: 28px; }
    .hair-quiz-progress-line span { width: 9px; height: 9px; }
    .hair-quiz-options { grid-template-columns: 1fr; gap: 12px; }
    .hair-quiz-icon-options { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
    .hair-quiz-icon-options .hair-quiz-option { min-height: 118px; }
    .hair-quiz-type-icon { width: 112px; height: 112px; }
    .hair-quiz-question-layout.is-icons .hair-quiz-question-copy h2 { margin-bottom: 36px; }
    .hair-quiz-question-copy h2 { font-size: 1.8rem; }
    .hair-quiz-actions { margin-top: 36px; }
}

/* ------------------------------------------------------ Scalp Therapy launch */
.scalp-page { background: var(--cream); }

.scalp-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(380px, 44%) minmax(0, 56%);
    min-height: clamp(620px, 72vw, 820px);
    overflow: hidden;
    background: #e8e0d6;
}

.scalp-hero-image {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 66% bottom;
}

.scalp-hero-inner {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    min-height: clamp(620px, 72vw, 820px);
    display: flex;
    align-items: center;
    width: 100%;
    padding-left: max(24px, calc((100vw - var(--container)) / 2 + 24px));
    padding-right: clamp(24px, 4vw, 72px);
}

.scalp-hero-copy {
    width: 100%;
    max-width: 520px;
    padding: 72px 0 96px;
}

.scalp-hero h1 {
    font-size: clamp(3rem, 6.2vw, 5.6rem);
    letter-spacing: -0.025em;
    max-width: 9ch;
}

.scalp-hero-tagline {
    font-family: var(--serif);
    font-size: clamp(1.25rem, 2.1vw, 1.8rem);
    margin: 0.9rem 0 1.35rem;
}

.scalp-hero .lead { color: #4c4944; max-width: 47ch; }

.scalp-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 2rem;
}

.scalp-manifesto-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(40px, 8vw, 120px);
    align-items: start;
}

.scalp-manifesto h2 { font-size: clamp(2.2rem, 4.7vw, 4rem); max-width: 12ch; }
.scalp-manifesto-copy { font-size: 1.05rem; color: var(--grey-600); max-width: 61ch; }
.scalp-manifesto-copy p + p { margin-top: 1.2rem; }

.scalp-editorial-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 680px;
}

.scalp-editorial-photo { overflow: hidden; }
.scalp-editorial-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

.scalp-editorial-copy {
    align-self: center;
    padding: clamp(56px, 8vw, 112px);
    max-width: 680px;
}

.scalp-editorial-copy h2 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); margin-bottom: 1.1rem; }
.scalp-editorial-copy > p:not(.kicker) { color: var(--grey-600); }

.scalp-benefits { list-style: none; margin-top: 2rem; border-top: 1px solid var(--grey-200); }
.scalp-benefits li { padding: 14px 0; border-bottom: 1px solid var(--grey-200); }
.scalp-benefits li::before { content: "\2014"; color: var(--gold); margin-right: 12px; }

.scalp-innovation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.scalp-innovation-card { display: flex; flex-direction: column; background: var(--white); }

.scalp-innovation-image {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--grey-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scalp-innovation-image img { width: 100%; height: 100%; object-fit: cover; }
.scalp-innovation-card:nth-child(2) .scalp-innovation-image img { object-fit: contain; padding: 8%; }
.scalp-innovation-body { padding: 28px; flex-grow: 1; }
.scalp-innovation-body h3 { font-size: 1.45rem; margin-bottom: 0.7rem; }
.scalp-innovation-body > p:last-child { color: var(--grey-600); }

.scalp-ritual { overflow: hidden; }
.scalp-ritual-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 48px; }
.scalp-ritual-head h2 { font-size: clamp(2.3rem, 5vw, 4.2rem); }
.scalp-ritual-head > p { color: var(--grey-400); max-width: 58ch; }

.scalp-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid #3b3b3b; }
.scalp-step { padding: 26px 24px 34px 0; border-right: 1px solid #3b3b3b; }
.scalp-step + .scalp-step { padding-left: 24px; }
.scalp-step:last-child { border-right: 0; }
.scalp-step-number { display: block; font-family: var(--serif); font-size: 2rem; color: var(--gold); }

/* --------------------------------------------------------- store locator */
.store-locator-hero {
    padding: clamp(52px, 6vw, 80px) 0 clamp(40px, 4vw, 60px);
    background: var(--black);
    color: var(--white);
}

.store-locator-hero .container { max-width: var(--container); }
.store-locator-hero .kicker { color: #c9ad80; }

.store-locator-hero h1 {
    font-size: clamp(2.8rem, 5vw, 4.6rem);
    font-weight: 100;
    line-height: 1;
}

.store-locator-hero h1 span { display: block; }

.store-locator-hero .lead {
    max-width: 58ch;
    margin-top: 22px;
    color: #d8d3cc;
    font-family: var(--serif-text);
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    font-weight: 300;
}

.store-locator-section { padding: clamp(56px, 7vw, 96px) 0; }

.store-locator-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 260px);
    gap: 20px;
    align-items: end;
    padding: clamp(24px, 3vw, 36px);
    background: var(--white);
    border: 1px solid var(--grey-200);
}

.store-locator-search label {
    display: block;
    margin-bottom: 9px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.store-search-input-wrap { position: relative; }

.store-search-input-wrap svg {
    position: absolute;
    top: 50%;
    left: 18px;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    pointer-events: none;
}

.store-locator-search input,
.store-locator-search select {
    width: 100%;
    height: 56px;
    border: 1px solid #cfc7bb;
    border-radius: 0;
    background: var(--cream);
    color: var(--black);
    font: inherit;
}

.store-locator-search input { padding: 0 18px 0 54px; }
.store-locator-search select { padding: 0 42px 0 16px; }

.store-locator-search input:focus,
.store-locator-search select:focus {
    border-color: var(--black);
    outline: 2px solid rgba(17, 17, 17, 0.12);
    outline-offset: 2px;
}

.store-locator-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 24px 0 18px;
}

.store-results-limit { color: var(--grey-600); font-size: 0.88rem; }

.store-locator-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(24px, 3vw, 42px);
    align-items: start;
}

.store-results {
    display: grid;
    gap: 12px;
    max-height: 720px;
    padding-right: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.store-card {
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.store-card:hover,
.store-card.active {
    border-color: var(--black);
    box-shadow: 0 8px 26px rgba(24, 20, 16, 0.07);
}

.store-card-name {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 100;
}

.store-card-address {
    margin-top: 10px;
    color: #413d37;
    font-style: normal;
    line-height: 1.55;
}

.store-card-country {
    margin-top: 8px;
    color: var(--grey-600);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.store-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    margin-top: 18px;
}

.store-card-map {
    min-height: 42px;
    padding: 9px 16px;
    border: 1px solid var(--black);
    background: var(--black);
    color: var(--white);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.store-card-map:hover { background: transparent; color: var(--black); }

.store-card-link {
    border-bottom: 1px solid currentColor;
    font-size: 0.82rem;
    line-height: 1.35;
}

.store-card-link:hover { color: var(--gold-dark); }

.store-map-panel {
    position: sticky;
    top: calc(var(--panel-top, 88px) + 22px);
    min-height: 720px;
    overflow: hidden;
    background: #e8e0d5;
    border: 1px solid var(--grey-200);
}

.store-map {
    display: block;
    width: 100%;
    height: 720px;
    background: #e8e0d5;
}

.store-map.is-unavailable {
    display: grid;
    place-items: center;
    padding: 32px;
    color: var(--grey-600);
    text-align: center;
}

.store-map.leaflet-container { font-family: var(--sans); }

.store-map .store-map-marker {
    width: 28px;
    height: 36px;
    border: 0;
    background: transparent;
}

.store-map-marker::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 4px;
    width: 20px;
    height: 20px;
    transform: rotate(-45deg);
    border: 2px solid var(--white);
    border-radius: 50% 50% 50% 0;
    background: var(--black);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.28);
}

.store-map-marker::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--white);
}

.store-map-popup h3 { margin-bottom: 6px; font-size: 1.2rem; font-weight: 100; }
.store-map-popup address { color: #413d37; font-style: normal; line-height: 1.45; }
.store-map-popup a { display: inline-block; margin-top: 10px; border-bottom: 1px solid currentColor; font-size: 0.78rem; }
.store-map .leaflet-popup-content { margin: 16px 18px; }
.store-map .leaflet-control-attribution { font-size: 0.64rem; }

.store-empty {
    padding: 52px 32px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    text-align: center;
}

.store-empty h2 { font-weight: 100; }
.store-empty p { margin-top: 10px; color: var(--grey-600); }
.store-results[aria-busy="true"] { opacity: 0.55; pointer-events: none; transition: opacity 0.2s ease; }

@media (max-width: 900px) {
    .store-locator-layout { grid-template-columns: 1fr; }
    .store-map-panel { position: relative; top: auto; min-height: 460px; order: -1; }
    .store-map { height: 460px; }
    .store-results { max-height: 680px; }
}

@media (max-width: 640px) {
    .store-locator-hero h1 { font-size: clamp(2.55rem, 11.5vw, 3.7rem); }
    .store-locator-search { grid-template-columns: 1fr; padding: 20px; }
    .store-locator-summary { display: block; }
    .store-results-limit { margin-top: 6px; }
    .store-map-panel { min-height: 360px; }
    .store-map { height: 360px; }
    .store-card { padding: 20px; }
}
.scalp-step-action { margin: 0.35rem 0 0.5rem; color: var(--gold); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; }
.scalp-step h3 { font-size: 1.25rem; margin-bottom: 0.65rem; }
.scalp-step > p:last-child { color: var(--grey-400); font-size: 0.9rem; }

.scalp-ritual-visual { margin-top: 22px; height: clamp(360px, 52vw, 650px); overflow: hidden; }
.scalp-ritual-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.scalp-signals-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 96px); align-items: center; }
.scalp-signals-copy h2 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); margin-bottom: 1rem; }
.scalp-signals-copy > p:not(.kicker) { color: var(--grey-600); }
.scalp-signals-copy ul { list-style: none; margin-top: 1.8rem; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.scalp-signals-copy li { border-left: 1px solid var(--gold); padding-left: 14px; }
.scalp-signals-photo { min-height: 560px; overflow: hidden; }
.scalp-signals-photo img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; }

.scalp-closing { display: grid; grid-template-columns: 0.8fr 1.2fr; background: var(--black); color: var(--white); }
.scalp-closing-photo { min-height: 500px; overflow: hidden; }
.scalp-closing-photo img { width: 100%; height: 100%; object-fit: cover; }
.scalp-closing-copy { align-self: center; padding: clamp(56px, 8vw, 112px); }
.scalp-closing-copy h2 { font-size: clamp(2.3rem, 4.8vw, 4rem); max-width: 12ch; margin-bottom: 1rem; }
.scalp-closing-copy > p:not(.kicker) { color: var(--grey-400); max-width: 52ch; }
.scalp-light-link { color: var(--white); }
.scalp-light-link:hover { color: var(--grey-400); }

@media (max-width: 1024px) {
    .scalp-hero { grid-template-columns: minmax(340px, 48%) minmax(0, 52%); }
    .scalp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .scalp-step:nth-child(3) { border-right: 0; }
    .scalp-step:nth-child(n + 4) { border-top: 1px solid #3b3b3b; }
}

@media (max-width: 820px) {
    .scalp-hero { grid-template-columns: 1fr; grid-template-rows: minmax(410px, 55vw) auto; min-height: 0; }
    .scalp-hero-image { grid-column: 1; grid-row: 1; object-position: 64% bottom; }
    .scalp-hero-inner { grid-column: 1; grid-row: 2; min-height: 0; padding: 0 24px; }
    .scalp-hero-copy { max-width: 620px; padding: 48px 0 64px; }
    .scalp-manifesto-grid,
    .scalp-editorial-split,
    .scalp-ritual-head,
    .scalp-signals-grid,
    .scalp-closing { grid-template-columns: 1fr; }
    .scalp-manifesto h2 { max-width: 16ch; }
    .scalp-editorial-photo { min-height: 560px; }
    .scalp-editorial-copy { max-width: none; }
    .scalp-innovation-grid { grid-template-columns: 1fr; }
    .scalp-innovation-card { display: grid; grid-template-columns: 0.9fr 1.1fr; }
    .scalp-innovation-image { aspect-ratio: 1 / 1; }
    .scalp-ritual-head { gap: 20px; }
    .scalp-signals-photo { min-height: 420px; }
    .scalp-signals-photo img { min-height: 420px; }
    .scalp-closing-photo { min-height: 420px; }
}

@media (max-width: 600px) {
    .scalp-hero { grid-template-rows: 340px auto; background: #e4ddd3; }
    .scalp-hero-image { object-position: 69% bottom; }
    .scalp-hero-copy { padding: 42px 0 52px; }
    .scalp-hero-copy .lead { max-width: 31ch; }
    .scalp-actions { gap: 18px; align-items: flex-start; flex-direction: column; }
    .scalp-editorial-photo { min-height: 450px; }
    .scalp-editorial-copy { padding: 48px 24px; }
    .scalp-innovation-card { display: flex; }
    .scalp-innovation-body { padding: 24px; }
    .scalp-steps { grid-template-columns: 1fr; }
    .scalp-step,
    .scalp-step + .scalp-step { padding: 22px 0; border-right: 0; border-top: 1px solid #3b3b3b; }
    .scalp-step:first-child { border-top: 0; }
    .scalp-ritual-visual { height: 410px; }
    .scalp-ritual-visual img { object-position: 70% center; }
    .scalp-signals-copy ul { grid-template-columns: 1fr; }
    .scalp-signals-photo { min-height: 360px; }
    .scalp-signals-photo img { min-height: 360px; }
    .scalp-closing-photo { min-height: 340px; }
    .scalp-closing-copy { padding: 48px 24px; }
}

/* --------------------------------------------------------- L'ANZA Pro */
.education-page main { background: #f7f3ed; }

.education-team-intro {
    max-width: 980px;
    padding-top: clamp(72px, 9vw, 132px);
    padding-bottom: clamp(70px, 8vw, 116px);
}

.education-team-intro h1 {
    max-width: none;
    margin: 12px 0 34px;
    font-family: "GT Super Display", "Times New Roman", serif;
    font-size: clamp(3rem, 5vw, 4.9rem);
    font-weight: 300;
    line-height: 1;
    white-space: nowrap;
}

.education-team-copy {
    max-width: 760px;
    color: var(--grey-600);
    font-family: "GT Super Display", "Times New Roman", serif;
    font-size: clamp(1.08rem, 1.55vw, 1.3rem);
    font-weight: 100;
    line-height: 1.65;
}

.education-team-copy p + p { margin-top: 18px; }

.education-people { padding-bottom: clamp(80px, 10vw, 140px); }
.education-people h2 { margin-bottom: 34px; font-size: clamp(2rem, 3.8vw, 3.4rem); }

.education-people-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2.3vw, 36px);
}

.education-people-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.education-person-image { aspect-ratio: 1; overflow: hidden; background: transparent; }
.education-person-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.education-person:hover img { transform: scale(1.025); }
.education-person h3 { margin-top: 17px; font: 400 1rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.education-freelance-title { margin-top: clamp(70px, 8vw, 110px); }

.education-cta { padding: clamp(56px, 7vw, 88px) 0; background: var(--gold); }
.education-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.education-cta h2 { max-width: 16ch; margin-top: 8px; font-size: clamp(2.2rem, 4vw, 4rem); }
.education-cta .btn { flex: 0 0 auto; }

.education-video-hero { position: relative; min-height: clamp(330px, 37vw, 560px); overflow: hidden; background: #d8d4cf; }
.education-video-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.education-video-hero::after { content: ''; position: absolute; inset: 0; background: rgba(20, 18, 15, .16); }
.education-video-hero-title { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: inherit; padding: 40px 24px; text-align: center; }
.education-video-hero-title h1 { padding: 24px clamp(28px, 5vw, 68px); background: rgba(247, 243, 237, .94); font-size: clamp(2.4rem, 5vw, 5rem); }

.education-video-content { padding-top: clamp(70px, 9vw, 120px); padding-bottom: clamp(90px, 11vw, 150px); }
.education-video-heading { max-width: 730px; margin-bottom: clamp(52px, 7vw, 88px); }
.education-video-heading h2 { margin: 10px 0 22px; font-size: clamp(2.5rem, 5vw, 4.8rem); line-height: 1; }
.education-video-heading > p:last-child { color: var(--grey-600); font-size: 1.08rem; }

.education-video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.education-video-card { display: flex; flex-direction: column; background: #fff; }
.education-video-image { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #e4dfd8; }
.education-video-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.education-video-card:hover .education-video-image img { transform: scale(1.035); }
.education-video-card-copy { display: flex; flex: 1; flex-direction: column; padding: clamp(24px, 3vw, 38px); }
.education-video-card h3 { margin-bottom: 14px; font-size: clamp(1.7rem, 2.5vw, 2.35rem); }
.education-video-card p { margin-bottom: 28px; color: var(--grey-600); line-height: 1.65; }
.education-video-card .text-link { width: fit-content; margin-top: auto; }

@media (max-width: 900px) {
    .education-people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .education-people-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .education-video-grid { grid-template-columns: 1fr; }
    .education-video-card { display: grid; grid-template-columns: minmax(230px, .85fr) minmax(0, 1.15fr); }
}

@media (max-width: 620px) {
    .education-team-intro { padding-top: 58px; padding-bottom: 64px; }
    .education-team-intro h1 { font-size: clamp(2.8rem, 13vw, 4rem); white-space: normal; }
    .education-people-grid, .education-people-grid-3 { grid-template-columns: 1fr; }
    .education-cta-inner { align-items: flex-start; flex-direction: column; }
    .education-video-hero { min-height: 300px; }
    .education-video-card { display: flex; }
}

/* ------------------------------------------------ Editorial Academy */
.education-videos-page main { background: #f7f3ed; }

.academy-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(360px, 0.78fr);
    width: min(calc(100% - 80px), 1550px);
    min-height: clamp(440px, 37vw, 560px);
    margin: clamp(28px, 3vw, 48px) auto 0;
    background: #eee5d8;
}

.academy-feature-media,
.academy-card-media {
    position: relative;
    display: block;
    overflow: hidden;
    background: #d4c9ba;
}

.academy-feature-media img,
.academy-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.academy-feature-media:hover img,
.academy-card:hover .academy-card-media img { transform: scale(1.025); }

.academy-feature-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(40px, 5vw, 72px);
}

.academy-feature-copy h1 {
    max-width: 10ch;
    margin-bottom: 26px;
    font-size: clamp(2.75rem, 4vw, 4.8rem);
    font-weight: 100;
    line-height: 0.92;
    letter-spacing: -0.04em;
}

.academy-feature-copy > p:not(.kicker) {
    max-width: 46ch;
    margin-bottom: 28px;
    color: var(--grey-600);
    font-family: var(--serif-text);
    font-size: clamp(1rem, 1.2vw, 1.16rem);
    line-height: 1.7;
}

.academy-feature-copy .text-link { width: fit-content; }

.academy-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 68px;
    color: var(--white);
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease;
}

.academy-play svg { width: 100%; height: 100%; fill: rgba(17, 17, 17, 0.7); stroke: rgba(255, 255, 255, 0.84); stroke-width: 1; }
.academy-play svg path { fill: var(--white); stroke: none; }
.academy-feature-media:hover .academy-play,
.academy-card-media:hover .academy-play { transform: translate(-50%, -50%) scale(1.08); }

.academy-play-small { width: 54px; height: 54px; }

.academy-duration {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 5px 8px;
    background: rgba(17, 17, 17, 0.86);
    color: var(--white);
    font-size: 0.72rem;
    line-height: 1;
}

.academy-library { padding: clamp(76px, 9vw, 132px) 0 clamp(88px, 10vw, 150px); }

.academy-library-shell {
    width: min(calc(100% - 80px), 1550px);
    margin: 0 auto;
}

.academy-library-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 42px;
    margin-bottom: clamp(42px, 6vw, 74px);
}

.academy-library-head h2 {
    margin-bottom: 18px;
    font-size: clamp(3.4rem, 6vw, 6.8rem);
    font-weight: 100;
    line-height: 0.9;
    letter-spacing: -0.04em;
}

.academy-library-intro {
    max-width: 62ch;
    color: var(--grey-600);
    font-family: var(--serif-text);
    font-size: 1.08rem;
    line-height: 1.65;
}

.academy-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding-bottom: 4px;
}

.academy-filter {
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid #c9c1b7;
    border-radius: 0;
    background: transparent;
    color: var(--black);
    font: 500 0.72rem/1 var(--sans);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.academy-filter:hover { border-color: var(--black); }
.academy-filter.active,
.academy-filter[aria-pressed="true"] { border-color: var(--black); background: var(--black); color: var(--white); }

.academy-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 46px);
}

.academy-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    background: var(--white);
}

.academy-card[hidden] { display: none; }
.academy-card-media { aspect-ratio: 16 / 9; }

.academy-card-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(22px, 2.6vw, 34px);
}

.academy-card-category {
    margin-bottom: 12px;
    color: var(--gold-dark);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.academy-card h3 {
    margin-bottom: 28px;
    font-size: clamp(1.65rem, 2.25vw, 2.45rem);
    font-weight: 100;
    line-height: 1.05;
}

.academy-card .text-link { width: fit-content; margin-top: auto; }

.academy-empty {
    padding: 56px 24px;
    border: 1px solid var(--grey-200);
    color: var(--grey-600);
    text-align: center;
}

.academy-channel-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: clamp(56px, 7vw, 96px);
    padding-top: 34px;
    border-top: 1px solid var(--grey-200);
}

.academy-channel-cta p {
    max-width: 40ch;
    font-family: var(--serif);
    font-size: clamp(1.45rem, 2.4vw, 2.2rem);
    font-style: italic;
    line-height: 1.2;
}

@media (max-width: 1024px) {
    .academy-feature { grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr); }
    .academy-library-head { align-items: flex-start; flex-direction: column; }
    .academy-filters { justify-content: flex-start; }
    .academy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .academy-feature { grid-template-columns: 1fr; width: 100%; min-height: 0; margin-top: 0; }
    .academy-feature-media { aspect-ratio: 16 / 9; }
    .academy-feature-copy { padding: 44px 24px 54px; }
    .academy-feature-copy h1 { max-width: 11ch; font-size: clamp(3rem, 13vw, 4.7rem); }
    .academy-library-shell { width: calc(100% - 40px); }
    .academy-library-head h2 { font-size: clamp(3.4rem, 15vw, 5rem); }
    .academy-filters { flex-wrap: nowrap; width: calc(100vw - 20px); padding: 0 20px 8px 0; overflow-x: auto; scrollbar-width: none; }
    .academy-filters::-webkit-scrollbar { display: none; }
    .academy-filter { flex: 0 0 auto; }
    .academy-grid { grid-template-columns: 1fr; }
    .academy-card-copy { padding: 24px; }
    .academy-channel-cta { align-items: flex-start; flex-direction: column; }
}

/* ------------------------------------------------ mobiele eindcontrole
   Houd alle primaire bediening goed raakbaar en voorkom dat lange menu's of
   grote displaykoppen buiten een smal telefoonscherm vallen. */
@media (max-width: 1100px) {
    .main-nav {
        top: calc(100% + 42px);
        max-height: calc(100dvh - 118px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 820px) {
    .nav-toggle {
        width: 44px;
        height: 44px;
        padding: 10px;
    }

    .brand,
    .lang-current {
        min-height: 44px;
    }

    .main-nav > a,
    .main-nav .nav-trigger,
    .main-nav .mega-quicklinks a,
    .mega-col a,
    .dropdown-menu a {
        min-height: 44px;
    }

    .hero-dots {
        bottom: 7px;
        gap: 0;
    }

    .hero-dots button {
        position: relative;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .hero-dots button::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        border: 1px solid var(--black);
        border-radius: 50%;
        background: transparent;
        transform: translate(-50%, -50%);
    }

    .hero-dots button.active { background: transparent; }
    .hero-dots button.active::after { background: var(--black); }

    .slider-btn,
    .page-btn,
    .contact-socials a,
    .footer-socials a {
        min-width: 44px;
        width: 44px;
        min-height: 44px;
        height: 44px;
    }

    .style-chip,
    .text-link,
    .variant-select,
    .store-card-link,
    .hair-quiz-nav,
    .hair-quiz-skip,
    .breadcrumb a,
    .contact-list a,
    .home-collections-head a {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
    }

    .breadcrumb a { min-width: 44px; }

    .collection-select select,
    .store-card-map {
        min-height: 44px;
    }

    .store-map.leaflet-container .leaflet-control-zoom.leaflet-bar a {
        min-width: 44px;
        width: 44px;
        min-height: 44px;
        height: 44px;
        line-height: 44px;
    }

    .form-check {
        min-height: 44px;
    }

    .form-check input {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }

    .footer-menu ul { gap: 4px; }
    .footer-menu a {
        display: flex;
        min-height: 44px;
        align-items: center;
    }

    .salon-atelier-support-head > * { min-width: 0; }
}

@media (max-width: 520px) {
    .main-nav {
        top: calc(100% + 38px);
        max-height: calc(100dvh - 114px);
    }

    .header-salon-bar {
        min-height: 38px;
        gap: 10px;
        padding: 8px 16px;
        font-size: 0.64rem;
    }

    .header-salon-bar-kicker { display: none; }

    .salon-atelier-support-head h2 {
        max-width: 100%;
        font-size: clamp(2.75rem, 12.5vw, 3.25rem);
    }
}

/* ------------------------------------------------ haarconsult pop-up */
body.consult-popup-open { overflow: hidden; }

.consult-popup-launcher {
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 900;
    display: flex;
    width: 64px;
    height: 250px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0 10px 10px 0;
    background: var(--black);
    box-shadow: 0 10px 40px rgba(17, 17, 17, .14);
    color: var(--white);
    cursor: pointer;
    transform: translateY(-50%);
    transition: width .2s ease, background .2s ease, color .2s ease;
}

.consult-popup-launcher span {
    white-space: nowrap;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .025em;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.consult-popup-launcher:hover,
.consult-popup-launcher:focus-visible {
    width: 72px;
    background: var(--white);
    color: var(--black);
}
.consult-popup-launcher[aria-expanded="true"] { opacity: 0; pointer-events: none; }

.consult-popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 18px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .26s ease, visibility .26s ease;
}

.consult-popup[hidden] { display: none; }
.consult-popup.is-open { opacity: 1; visibility: visible; }

.consult-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, .68);
    backdrop-filter: blur(3px);
}

.consult-popup-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(460px, calc(100% - 18px));
    max-height: calc(100dvh - 36px);
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--cream);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .24);
    outline: 0;
    transform: translateX(calc(-100% - 36px));
    transition: transform .38s cubic-bezier(.2, .7, .2, 1);
}

.consult-popup.is-open .consult-popup-dialog { transform: translateX(0); }

.consult-popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(17, 17, 17, .16);
    border-radius: 50%;
    background: rgba(248, 245, 240, .9);
    color: var(--black);
    cursor: pointer;
}

.consult-popup-close span::before,
.consult-popup-close span::after {
    content: "";
    position: absolute;
    top: 21px;
    left: 12px;
    width: 20px;
    height: 1px;
    background: currentColor;
}

.consult-popup-close span::before { transform: rotate(45deg); }
.consult-popup-close span::after { transform: rotate(-45deg); }
.consult-popup-close:hover { background: var(--white); }

.consult-popup-image { flex: 0 0 auto; height: clamp(190px, 31vh, 300px); overflow: hidden; }
.consult-popup-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; }

.consult-popup-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(34px, 5vw, 58px);
}

.consult-popup-copy .kicker { margin-bottom: 18px; color: var(--gold-dark); }
.consult-popup-copy h2 { max-width: 10ch; margin-bottom: 20px; font-size: clamp(2.35rem, 4vw, 3.55rem); line-height: .98; }
.consult-popup-copy > p:not(.kicker) { max-width: 38ch; margin-bottom: 30px; color: var(--grey-600); }

@media (max-width: 720px) {
    .consult-popup-launcher { width: 52px; height: 190px; }
    .consult-popup-launcher:hover,
    .consult-popup-launcher:focus-visible { width: 58px; }
    .consult-popup-launcher span { font-size: .9rem; }
    .consult-popup { align-items: center; padding: 12px; }
    .consult-popup-dialog { width: min(420px, 100%); max-height: calc(100dvh - 24px); }
    .consult-popup-image { min-height: 0; aspect-ratio: 16 / 8.5; }
    .consult-popup-image img { object-position: 50% 36%; }
    .consult-popup-copy { padding: 34px 26px 38px; }
    .consult-popup-copy .kicker { margin-bottom: 12px; }
    .consult-popup-copy h2 { max-width: 12ch; margin-bottom: 14px; font-size: clamp(2rem, 10vw, 3rem); }
    .consult-popup-copy > p:not(.kicker) { margin-bottom: 24px; font-size: .94rem; }
}

@media (prefers-reduced-motion: reduce) {
    .consult-popup,
    .consult-popup-dialog { transition: none; }
}

/* Shared editorial page headers: 2545 × 570 at full design width. */
.uniform-page-hero {
    width: 100%;
    max-width: 2545px;
    height: auto;
    min-height: 0;
    aspect-ratio: 2545 / 570;
    margin-inline: auto;
    padding: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.uniform-page-hero > .container {
    width: 100%;
    padding-top: clamp(20px, 2vw, 48px);
    padding-bottom: clamp(20px, 2vw, 48px);
}
.uniform-page-hero h1 {
    font-size: clamp(2rem, 3.4vw, 4.8rem);
    line-height: 1.04;
    margin-top: 8px;
    margin-bottom: 14px;
}
.uniform-page-hero .kicker { margin-bottom: 10px; }
.uniform-page-hero .lead { margin-top: 14px; }
.uniform-page-hero .salon-atelier-hero-inner {
    gap: clamp(24px, 4vw, 80px);
    align-items: center;
}
.uniform-page-hero .salon-atelier-hero-copy p {
    font-size: clamp(.95rem, 1.1vw, 1.2rem);
    line-height: 1.45;
    margin-bottom: 16px;
}
@media (max-width: 1100px) {
    .uniform-page-hero { aspect-ratio: auto; height: 480px; }
    .uniform-page-hero > img { height: 100%; object-fit: cover; }
    .uniform-page-hero .why-cover-shade { inset: 0; background: rgba(20,20,18,.62); }
    .uniform-page-hero .salon-atelier-hero-inner { grid-template-columns: 1fr; gap: 20px; }
    .uniform-page-hero h1 { max-width: none; font-size: clamp(2rem, 5vw, 3.4rem); }
    .uniform-page-hero .salon-atelier-hero-copy { max-width: 640px; padding: 0; }
}
@media (min-width: 1101px) {
    .uniform-page-hero .why-cover-copy > * { max-width: 850px; }
    .uniform-page-hero.why-cover h1 { font-size: clamp(2rem, 2.5vw, 4rem); }
    .uniform-page-hero .why-cover-copy > p:last-child { font-size: .95rem; line-height: 1.45; }
}

/* Reversed companion to the botanical ingredients block. */
.why-eco { grid-template-columns: minmax(420px, 1.18fr) minmax(340px, .82fr); }
.why-eco .why-wild-media img { object-position: center; }
@media (max-width: 900px) {
    .why-eco { grid-template-columns: 1fr; }
}

.why-science-text-only { display: block; min-height: 0; }
.why-science-text-only .why-science-copy { max-width: 1100px; margin-inline: auto; }
.why-science-text-only .why-science-copy > p:not(.kicker) { max-width: 75ch; }
@media (min-width: 901px) {
    .page-why .why-wild { height: 500px; min-height: 0; }
    .page-why .why-wild-media { min-height: 0; }
    .page-why .why-wild:not(.why-eco) .why-wild-copy { padding-block: 32px; }
    .page-why .why-wild:not(.why-eco) h2 { font-size: clamp(2rem, 2.8vw, 3rem); }
}

/* Soft neutral L’ANZA header. */
.why-brand-hero { background: #F7F4EF; color: #171717; }
.why-brand-hero > .container { max-width: 1280px; }
.why-brand-hero h1, .why-brand-hero .lead { max-width: 650px; }
.why-brand-hero .kicker { color: #927744; }
.why-brand-hero .lead { color: #555; }

.why-brand-hero h1 { max-width: none; white-space: nowrap; }
@media (max-width: 600px) {
    .uniform-page-hero.why-brand-hero h1 { font-size: clamp(1.35rem, 7vw, 2.5rem); }
}

.page-why .why-brand-hero h1 {
    font-family: "GT Super Display", "Times New Roman", serif;
    font-weight: 100;
}


/* Salon: ingredient story and technology, in the existing brand typography. */
.salon-nature { background: #ede6dc; padding-block: clamp(64px, 8vw, 112px); }
.salon-nature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.salon-nature h2, .salon-nature h3, .page-salon .why-ingredients h2, .page-salon .why-nano h2 { font-family: var(--serif); font-weight: 100; text-transform: none; line-height: 1.08; }
.salon-nature h2 { font-size: clamp(2.5rem, 4.5vw, 4.5rem); margin: 18px 0 24px; }
.salon-nature h3 { font-size: clamp(2rem, 3vw, 3rem); margin-bottom: 24px; }
.salon-nature p:not(.kicker) { color: var(--grey-600); font-size: 1.05rem; line-height: 1.7; }
.page-salon .why-ingredient-card h3 { font-family: var(--serif); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.page-salon .why-nano-diagram strong { font-family: var(--serif); text-transform: none; font-size: 1.5rem; letter-spacing: 0; }
@media (max-width: 700px) { .salon-nature-grid { grid-template-columns: 1fr; } }

/* Compact salon benefits with the heading centred beside the list. */
.page-salon .salon-atelier-manifesto { padding-block: clamp(44px, 4vw, 64px); }
.page-salon .salon-atelier-manifesto-grid { align-items: center; gap: clamp(32px, 5vw, 80px); }
.page-salon .salon-atelier-manifesto-title { position: static; }
.page-salon .salon-atelier-manifesto-title h2 { font-size: clamp(2.5rem, 3.6vw, 4rem); line-height: 1.08; max-width: 12ch; }
.page-salon .salon-atelier-manifesto-content .salon-atelier-pillar-list { margin-top: 16px; }
.page-salon .salon-atelier-manifesto-content .salon-atelier-pillar-row { padding: 16px 0; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
.page-salon .salon-atelier-manifesto-content .salon-atelier-pillar-row h3 { font-size: clamp(1.3rem, 1.6vw, 1.65rem); margin-bottom: 5px; line-height: 1.2; }
.page-salon .salon-atelier-manifesto-content .salon-atelier-pillar-row p { font-size: .9rem; line-height: 1.5; }

@media (min-width: 1101px) {
    .page-salon .uniform-page-hero .salon-atelier-hero-inner { align-items: start; }
}

/* Align the two nature stories on shared heading and paragraph rows. */
.salon-nature h2, .salon-nature h3 { font-size: clamp(2rem, 3vw, 3rem); margin: 0; }
@media (min-width: 701px) {
    .salon-nature-grid { align-items: start; row-gap: 24px; }
    .salon-nature-grid > div { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
    .salon-nature-grid > div > .kicker { grid-row: 1; margin: 0; }
    .salon-nature-grid > div > h2, .salon-nature-grid > div > h3 { grid-row: 2; }
    .salon-nature-grid > div > p:not(.kicker) { grid-row: 3; margin: 0; }
}
@media (max-width: 700px) {
    .salon-nature h2, .salon-nature h3 { margin-bottom: 24px; }
}

@media (min-width: 701px) {
    .salon-nature h2, .salon-nature h3 { font-size: clamp(1.5rem, 2.35vw, 2.4rem); }
    .salon-nature h3 > span { white-space: nowrap; }
}

@media (min-width: 1101px) {
    .page-salon .uniform-page-hero .salon-atelier-hero-inner { transform: translateY(16px); }
}

/* Selected brochure concept: centred introduction and photo beside the form. */
.salon-form-option-two { padding-block: 64px; }
.salon-form-option-two .salon-atelier-form-grid { max-width: 1100px; grid-template-columns: .8fr 1.2fr; gap: 0; }
.salon-form-option-two .salon-form-intro { grid-column: 1 / -1; text-align: center; align-items: center; margin-bottom: 32px; }
.salon-form-option-two .salon-form-intro h2 { max-width: none; font-size: clamp(2rem, 3.2vw, 3.4rem); }
.salon-form-option-two .salon-form-intro .lead { max-width: 640px; margin: 12px auto 0; font-size: 1rem; }
.salon-form-option-two .salon-form-photo { margin: 0; position: relative; min-height: 480px; }
.salon-form-option-two .salon-form-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.salon-form-option-two .salon-form.salon-atelier-form { border: 0; box-shadow: none; padding: 32px; gap: 16px; }
.salon-form-option-two textarea { min-height: 80px; height: 80px; }
@media (max-width: 700px) {
    .salon-form-option-two .salon-atelier-form-grid { grid-template-columns: 1fr; }
    .salon-form-option-two .salon-form-photo { min-height: 280px; }
    .salon-form-option-two .salon-form-photo img { object-position: center 25%; }
    .salon-form-option-two .salon-form.salon-atelier-form { padding: 24px; }
}

.page-salon .salon-atelier-manifesto { background: #ede6dc; }
.page-salon .salon-nature { background: var(--white); }

.about-pillars-combined { min-height: 560px; padding-block: 72px; }
.about-pillars-combined .about-pillar-shade { background: rgba(8,8,8,.65); }
.about-pillars-combined-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(28px,5vw,72px); }
.about-pillars-combined-grid h2 { font-family: var(--serif); font-size: clamp(2.5rem,4.5vw,4.5rem); font-weight: 100; line-height: 1.05; margin: 12px 0 20px; }
.about-pillars-combined-grid article > p:last-child { font-size: 1rem; line-height: 1.65; }
@media (max-width: 700px) {
    .about-pillars-combined-grid { grid-template-columns: 1fr; gap: 28px; }
    .about-pillars-combined { padding-block: 48px; }
    .about-pillars-combined-grid h2 { margin: 8px 0 12px; }
}

.about-pillars-combined > img { object-position: center top; }
.about-pillars-combined-grid { column-gap: clamp(40px, 7vw, 112px); row-gap: 18px; }
.about-pillars-combined-grid article { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
.about-pillars-combined-grid article > .kicker { margin: 0; }
.about-pillars-combined-grid h2 { margin: 0; }
.about-pillars-combined-grid article > p:last-child { margin: 0; }
@media (max-width: 700px) {
    .about-pillars-combined-grid { row-gap: 16px; }
    .about-pillars-combined-grid article { padding-bottom: 28px; }
}

@media (min-width: 1101px) {
    .about-pillar-three-lines > span { display: block; white-space: nowrap; }
}

.product-card-image img[src*="ultimate-treatment-"] { mix-blend-mode: multiply; }

.hero-photo:has(.hero-photo-bg-scalp) { background: #f1eade; }
.hero-photo:has(.hero-photo-bg-color10) { background: #f3eee8; }
.hero-photo-bg-scalp, .hero-photo-bg-color10 { object-fit: contain; object-position: center; }

.hero-photo-bg-scalp { object-fit: cover; object-position: right center; }

.hero-photo-bg-color10 { object-fit: cover; object-position: right center; }

/* Zachte aansluiting van de campagnefoto's op het beige tekstvlak. */
.hero-photo:has(.hero-photo-bg-scalp)::after,
.hero-photo:has(.hero-photo-bg-color10)::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right, var(--grey-100) 0%, transparent 32%);
}

@media (max-width: 820px) {
    .hero-photo:has(.hero-photo-bg-scalp)::after,
    .hero-photo:has(.hero-photo-bg-color10)::after {
        background: linear-gradient(to top, var(--grey-100) 0%, transparent 24%);
    }
}

/* Scalp Therapy — campagne, gebruikstips en onderzoeksresultaten. */
.scalp-page .scalp-hero, .scalp-page .scalp-hero-inner { min-height: 620px; }
.scalp-page .scalp-hero h1 { font-size: clamp(3rem, 5.2vw, 5.3rem); max-width: 11ch; }
.scalp-page .scalp-innovation-body { display: flex; flex-direction: column; }
.scalp-page .scalp-innovation-body .text-link { align-self: flex-start; margin-top: auto; }
.scalp-page .scalp-usage { font-size: .9rem; line-height: 1.6; padding: 18px 0; color: #50655b; }
.scalp-evidence { background: #e7ece7; color: #263c32; }
.scalp-evidence h2, .scalp-salon-moment h2 { font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1.08; }
.scalp-evidence .kicker { color: #50655b; }
.scalp-evidence-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin: 42px 0 32px; }
.scalp-evidence-grid > div { border-top: 1px solid #acb9af; padding-top: 20px; }
.scalp-evidence-grid strong { font: 100 clamp(4rem, 7vw, 6.5rem)/1 var(--serif); }
.scalp-evidence-grid strong span { font-size: .5em; }
.scalp-evidence-grid p { margin: 16px 0 0; max-width: 31ch; }
.scalp-study-note { max-width: 100ch; font-size: .8rem; line-height: 1.65; color: #50655b; }
.scalp-salon-moment { background: var(--grey-100); }
@media (max-width: 820px) {
    .scalp-page .scalp-hero, .scalp-page .scalp-hero-inner { min-height: 0; }
    .scalp-evidence-grid { grid-template-columns: 1fr; gap: 24px; }
    .scalp-evidence-grid > div { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center; }
    .scalp-evidence-grid p { margin: 0; }
}
.scalp-page .scalp-innovation-image { aspect-ratio: 4 / 3; }
.scalp-page .scalp-innovation-card:nth-child(1) .scalp-innovation-image img { object-position: right center; }
.scalp-page .scalp-innovation-card:nth-child(2) .scalp-innovation-image img { object-fit: cover; object-position: left center; padding: 0; }
.scalp-page .scalp-innovation-card:nth-child(3) .scalp-innovation-image img { object-position: left center; }
.scalp-page #ritual { scroll-margin-top: 150px; }

/* Compacte Scalp-landingspagina: korte secties en bescheiden fotografie. */
.scalp-page .section { padding: 40px 0; }
.scalp-page .scalp-hero, .scalp-page .scalp-hero-inner { min-height: 400px; }
.scalp-page .scalp-hero-copy { padding: 36px 0; }
.scalp-page .scalp-hero h1 { font-size: clamp(2.5rem, 3.6vw, 3.8rem); max-width: 13ch; }
.scalp-page .scalp-hero-image { max-height: 440px; object-fit: contain; }
.scalp-page .scalp-hero-tagline { font-size: 1.3rem; margin: 12px 0; }
.scalp-page .scalp-actions { margin-top: 20px; gap: 18px; }
.scalp-page h2, .scalp-page .scalp-ritual-head h2 { font-size: clamp(1.9rem, 2.8vw, 2.7rem); line-height: 1.12; }
.scalp-page .section-head { margin-bottom: 24px; }
.scalp-page .scalp-editorial-split { min-height: 0; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); padding: 32px max(24px, calc((100vw - 1192px) / 2)); gap: 40px; }
.scalp-page .scalp-editorial-photo { min-height: 0; height: 280px; }
.scalp-page .scalp-editorial-photo img { object-fit: contain; }
.scalp-page .scalp-editorial-copy { padding: 0; max-width: none; }
.scalp-page .scalp-benefits { margin-top: 14px; }
.scalp-page .scalp-benefits li { padding: 7px 0; }
.scalp-page .scalp-innovation-image { height: 180px; aspect-ratio: auto; }
.scalp-page .scalp-innovation-image img { object-fit: contain; }
.scalp-page .scalp-innovation-body { padding: 20px; }
.scalp-page .scalp-innovation-body h3 { font-size: 1.3rem; }
.scalp-page .scalp-innovation-body p { font-size: .92rem; line-height: 1.55; }
.scalp-page .scalp-usage { padding: 10px 0; }
.scalp-page .scalp-evidence-grid { margin: 24px 0 16px; gap: 28px; }
.scalp-page .scalp-evidence-grid strong { font-size: 3.7rem; }
.scalp-page .scalp-evidence-grid p { margin-top: 8px; }
.scalp-page .scalp-ritual-head { margin-bottom: 22px; gap: 28px; }
.scalp-page .scalp-step { padding-top: 16px; padding-bottom: 16px; }
.scalp-page .scalp-step h3 { font-size: 1.15rem; }
.scalp-page .scalp-signals-grid { display: block; }
.scalp-page .scalp-signals-copy { max-width: none; }
.scalp-page .scalp-signals-copy ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 28px; margin-top: 16px; }
.scalp-page .scalp-signals-copy h2 { max-width: none; }
.scalp-page .scalp-closing { display: block; min-height: 0; }
.scalp-page .scalp-closing-copy { max-width: 1192px; margin: auto; padding: 32px 24px; }
.scalp-page .scalp-closing-copy h2 { max-width: none; }
@media (max-width: 820px) {
    .scalp-page .section { padding: 28px 0; }
    .scalp-page .scalp-hero { grid-template-rows: 210px auto; min-height: 0; }
    .scalp-page .scalp-hero-inner { min-height: 0; }
    .scalp-page .scalp-hero-image { height: 210px; width: 100%; object-position: center; }
    .scalp-page .scalp-hero-copy { padding: 24px 0; }
    .scalp-page .scalp-editorial-split { grid-template-columns: 1fr; gap: 20px; padding: 28px 24px; }
    .scalp-page .scalp-editorial-photo { display: none; }
    .scalp-page .scalp-innovation-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); }
    .scalp-page .scalp-innovation-image { height: 160px; align-self: start; }
    .scalp-page .scalp-innovation-body { padding: 16px; }
    .scalp-page .scalp-innovation-grid { gap: 16px; }
    .scalp-page .scalp-evidence-grid { gap: 12px; }
    .scalp-page .scalp-evidence-grid strong { font-size: 3rem; }
    .scalp-page .scalp-evidence-grid > div { grid-template-columns: 95px 1fr; gap: 12px; padding-top: 12px; }
    .scalp-page .scalp-manifesto-grid { gap: 18px; }
    .scalp-page .scalp-signals-copy ul { grid-template-columns: 1fr 1fr; }
    .scalp-page .scalp-step, .scalp-page .scalp-step + .scalp-step { padding: 12px 0; }
}

/* Gekozen Scalp Therapy-ontwerp: rustige opbouw met botanische header. */
.scalp-luxe { background: #faf7f2; color: #191b17; }
.scalp-luxe-inner { width: min(1100px, calc(100% - 64px)); margin-inline: auto; }
.scalp-luxe h1, .scalp-luxe h2, .scalp-luxe h3 { font-family: var(--serif); font-weight: 100; margin: 0; }
.scalp-luxe h1 { font-size: clamp(2.6rem, 3.7vw, 3.7rem); line-height: 1.04; letter-spacing: -.02em; }
.scalp-luxe h2 { font-size: clamp(1.8rem, 2.5vw, 2.5rem); line-height: 1.12; }
.scalp-luxe h3 { font-size: 1.6rem; line-height: 1.15; }
.scalp-luxe p { font-size: .95rem; line-height: 1.65; margin: 12px 0; }
.scalp-luxe .scalp-luxe-kicker { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: #896e46; margin: 0 0 14px; }
.scalp-luxe-hero { background: #30483c; color: #faf7ef; }
.scalp-luxe-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 48px; padding-block: 40px; }
.scalp-luxe-hero .scalp-luxe-kicker { color: #d0bd95; }
.scalp-luxe .scalp-luxe-intro { max-width: 44ch; margin: 18px 0; }
.scalp-luxe-hero-photo { width: 100%; height: 320px; object-fit: cover; border-radius: 170px 170px 0 0; }
.scalp-luxe-button { display: inline-block; padding: 15px 22px; background: #ede5d7; color: #263d32; font-size: .7rem; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; text-align: center; transition: background .2s; }
.scalp-luxe-button:hover { background: #fffaf0; }
.scalp-luxe-products { padding-block: 40px; scroll-margin-top: 145px; }
.scalp-luxe-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 24px; }
.scalp-luxe-heading p { margin: 0; }
.scalp-luxe-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.scalp-luxe-product { display: block; color: inherit; }
.scalp-luxe-product img { width: 100%; height: 175px; object-fit: cover; display: block; margin-bottom: 18px; }
.scalp-luxe-product .scalp-luxe-kicker { margin-bottom: 8px; }
.scalp-luxe-product p:last-child { margin-bottom: 0; }
.scalp-luxe-product:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.scalp-luxe-complex { padding-block: 40px; background: #EDE6DC; }
.scalp-luxe-complex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.scalp-luxe-steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 18px; }
.scalp-luxe-steps li { border-top: 1px solid #b4bcb4; padding-top: 15px; }
.scalp-luxe-steps h3 { font-size: 1.4rem; }
.scalp-luxe-steps p { font-size: .83rem; margin: 6px 0 0; }
.scalp-luxe-cta { background: #263d32; color: #fff; padding-block: 28px; }
.scalp-luxe-cta .scalp-luxe-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.scalp-luxe-cta h2 { font-size: 1.8rem; }
@media (max-width: 700px) {
    .scalp-luxe-inner { width: calc(100% - 40px); }
    .scalp-luxe-hero-grid { grid-template-columns: 1fr 1fr; gap: 20px; padding-block: 28px; }
    .scalp-luxe h1 { font-size: 2.35rem; }
    .scalp-luxe-hero-photo { height: 250px; }
    .scalp-luxe-heading { display: block; }
    .scalp-luxe-heading p { margin-top: 10px; }
    .scalp-luxe-product-grid { gap: 16px; }
    .scalp-luxe-product img { height: 120px; }
    .scalp-luxe-product h3 { font-size: 1.2rem; }
    .scalp-luxe-complex-grid { grid-template-columns: 1fr; gap: 12px; }
    .scalp-luxe-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .scalp-luxe-cta .scalp-luxe-inner { align-items: flex-start; flex-direction: column; gap: 18px; }
}
@media (max-width: 480px) {
    .scalp-luxe-hero-grid { grid-template-columns: 1fr; }
    .scalp-luxe-hero-photo { height: 200px; border-radius: 100px 100px 0 0; }
    .scalp-luxe h1 { font-size: 2.5rem; }
    .scalp-luxe-products, .scalp-luxe-complex { padding-block: 28px; }
    .scalp-luxe-product-grid { grid-template-columns: 1fr; gap: 24px; }
    .scalp-luxe-product img { height: 145px; object-position: center; }
    .scalp-luxe-product h3 { font-size: 1.5rem; }
}
.scalp-luxe-product img { object-fit: contain; background: #eee7dd; }
.scalp-luxe-product:nth-child(2) img { object-fit: cover; object-position: left center; }

/* Vast formaat voor de drie Scalp-productfoto's, responsief verkleind. */
.scalp-luxe-product img {
    width: 348px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 348 / 175;
}

/* Foto's vullen het volledige Scalp-productblok. */
.scalp-luxe-product img { object-fit: cover; object-position: center; }
.scalp-luxe-product:nth-child(1) img,
.scalp-luxe-product:nth-child(3) img { object-position: center 60%; }
.scalp-luxe-product:nth-child(2) img { object-position: left center; }

/* Originele productpixels behouden; alleen de kadrering aanpassen. */
.scalp-luxe-product-photo {
    position: relative;
    width: 348px;
    max-width: 100%;
    aspect-ratio: 348 / 175;
    overflow: hidden;
    margin-bottom: 18px;
    background: #eee7dd;
    container-type: inline-size;
}
.scalp-luxe-product-photo img { width: 100%; height: 100%; margin: 0; }
.scalp-luxe-product:nth-child(1) .scalp-luxe-product-photo img,
.scalp-luxe-product:nth-child(3) .scalp-luxe-product-photo img {
    position: absolute;
    width: auto;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    top: 0;
}
.scalp-luxe-product:nth-child(1) .scalp-luxe-product-photo img { left: -3.6%; }
.scalp-luxe-product:nth-child(3) .scalp-luxe-product-photo img { left: 38.6%; }
/* Vul de extra ruimte met uitsluitend de bestaande achtergrondrand. */
.scalp-luxe-product:nth-child(1) .scalp-luxe-product-photo {
    background-image: url('/img/site/scalp-therapy/pre-wash.jpg');
    background-size: 2000% 100%;
    background-position: right center;
}
.scalp-luxe-product:nth-child(3) .scalp-luxe-product-photo {
    background-image: url('/img/site/scalp-therapy/leave-on.jpg');
    background-size: 2000% 100%;
    background-position: left center;
}

/* Leave-On Serum subtiel dichterbij, met de volledige verpakking in beeld. */
.scalp-luxe-product:nth-child(3) .scalp-luxe-product-photo img {
    transform: scale(1.08);
    transform-origin: 17% 50%;
}

/* Achtergrond sluit aan op dezelfde vergroting als de serumfoto. */
.scalp-luxe-product:nth-child(3) .scalp-luxe-product-photo { background-image: none; }
.scalp-luxe-product:nth-child(3) .scalp-luxe-product-photo::before {
    content: "";
    position: absolute;
    inset: -4% 0;
    background-image: url('/img/site/scalp-therapy/leave-on.jpg');
    background-size: 100000% 100%;
    background-position: left center;
}
.scalp-luxe-product:nth-child(3) .scalp-luxe-product-photo img {
    mask-image: linear-gradient(to right, transparent, #000 8%);
}

/* Centreer de scrub; behoud de originele foto en verpakking. */
.scalp-luxe-product:nth-child(2) .scalp-luxe-product-photo {
    background-image: url('/img/site/scalp-therapy/scrub-lather.jpg');
    background-size: 100000% 100%;
    background-position: left center;
}
.scalp-luxe-product:nth-child(2) .scalp-luxe-product-photo img {
    position: absolute;
    height: 100%;
    width: auto;
    max-width: none;
    aspect-ratio: auto;
    left: 26.5%;
    top: 0;
    object-fit: contain;
    mask-image: linear-gradient(to right, transparent, #000 5%);
}

/* Headerfoto volgt exact de hoogte van de tekstkolom. */
@media (min-width: 481px) {
    .scalp-luxe-hero-grid { align-items: stretch; }
    .scalp-luxe-hero-photo { height: 100%; min-height: 0; align-self: stretch; object-fit: cover; }
    .scalp-luxe-hero-grid > div { line-height: 0; }
}

/* Subtekst en headerfoto eindigen op dezelfde lijn. */
@media (min-width: 481px) {
    .scalp-luxe-hero-grid > div { display: flex; flex-direction: column; }
    .scalp-luxe-hero .scalp-luxe-intro { margin-bottom: 0; margin-top: auto; padding-top: 18px; }
}

/* Scalp-campagneknop: groene hoverkleur. */
.hero-slide:has(.hero-photo-bg-scalp) .btn-primary:hover,
.hero-slide:has(.hero-photo-bg-scalp) .btn-primary:focus-visible {
    background-color: #2F493C;
    border-color: #2F493C;
    color: #fff;
}

/* Homepage ingredient-first carousel: open three-column composition. */
.ingredient-showcase{background:#ede7dc;padding:88px 0;scroll-margin-top:140px}.ingredient-inner{max-width:1600px;margin:0 auto;padding:0 50px}.ingredient-inner>h2{font-family:var(--serif);font-style:italic;font-weight:100;font-size:clamp(36px,3.1vw,58px);line-height:1;margin:0 0 90px}.ingredient-slide{display:grid;grid-template-columns:30% 40% 22%;gap:4%;align-items:start}.ingredient-slide[hidden]{display:none}.ingredient-product{align-self:end}.ingredient-product img{display:block;width:100%;aspect-ratio:1;object-fit:contain}.ingredient-copy{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;min-height:360px;padding:0 28px}.ingredient-copy h3{font-family:var(--serif);font-weight:100;font-size:clamp(25px,2vw,38px);line-height:1.15;margin:0 0 24px}.ingredient-tag,.ingredient-description{font-family:var(--serif);font-size:16px;line-height:1.4;color:#272521;margin:0}.ingredient-description{margin-top:65px;margin-bottom:16px}.ingredient-botanical{width:100%;aspect-ratio:228/264;object-fit:cover}.ingredient-link{display:block;text-align:center;background:#fff;color:#272521;font:italic 16px/1.4 var(--serif);padding:9px 12px;text-decoration:none}.ingredient-link:hover{background:#f8f5ef}.ingredient-dots{display:flex;justify-content:center;gap:0;margin-top:32px}.ingredient-dots button{width:24px;height:28px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}.ingredient-dots button:before{content:'';width:10px;height:10px;background:#fff;border-radius:50%}.ingredient-dots button[aria-selected=true]:before{background:#292724}.ingredient-dots button:focus-visible,.ingredient-link:focus-visible{outline:2px solid #76614a;outline-offset:3px}@media(max-width:900px){.ingredient-inner{padding:0 30px}.ingredient-copy{padding:0;min-height:290px}.ingredient-description{margin-top:35px}.ingredient-inner>h2{margin-bottom:55px}}@media(max-width:600px){.ingredient-showcase{padding:48px 0}.ingredient-inner{padding:0 24px}.ingredient-inner>h2{font-size:36px;margin-bottom:34px}.ingredient-slide{grid-template-columns:1fr 1fr;gap:24px}.ingredient-product{align-self:center}.ingredient-botanical{grid-column:2;grid-row:1}.ingredient-copy{grid-column:1/-1;grid-row:2;min-height:0}.ingredient-copy h3{font-size:28px;margin-bottom:12px}.ingredient-description{margin-top:22px}.ingredient-dots button{width:44px;height:44px}.ingredient-dots{margin-top:20px}}@media(prefers-reduced-motion:no-preference){.ingredient-slide:not([hidden]){animation:ingredient-reveal .45s ease}@keyframes ingredient-reveal{from{opacity:.25}to{opacity:1}}}
/* Display full-resolution Dutch ingredient artwork without clipping its text. */
.ingredient-botanical{aspect-ratio:1;object-fit:contain;height:auto}

/* Selected ingredient layout: option 1, compact and calm. */
.ingredient-showcase{padding:55px 0}
.ingredient-inner{max-width:1400px}
.ingredient-inner>h2{font-size:46px;margin-bottom:38px}
.ingredient-copy{min-height:0;padding:0;justify-content:center;gap:24px}
.ingredient-description{margin:0 0 20px}
.ingredient-copy h3{font-size:32px;margin-bottom:14px}
.ingredient-link{width:fit-content;padding:12px 24px}
.ingredient-slide{align-items:center;grid-template-columns:25% 43% 24%;gap:4%}
.ingredient-product{align-self:center}
.ingredient-dots{margin-top:24px}
@media(max-width:700px){
 .ingredient-inner{padding:0 24px}
 .ingredient-inner>h2{font-size:34px}
 .ingredient-slide{grid-template-columns:1fr 1fr;gap:24px}
 .ingredient-product{grid-row:1;grid-column:1}
 .ingredient-botanical{grid-row:1;grid-column:2}
 .ingredient-copy{grid-row:2;grid-column:1/-1;padding:0;gap:20px}
 .ingredient-showcase{padding:36px 0}
}

/* Circular edge controls for the continuous bestseller carousel. */
.bestseller-carousel{position:relative}
#bestsellers .slider-nav{position:absolute;inset:0;pointer-events:none;z-index:2}
#bestsellers .slider-btn{position:absolute;top:calc((100cqw - 96px)/8);transform:translateY(-50%);width:54px;height:54px;border:1px solid #c9c3bb;border-radius:50%;background:#fff;color:#292929;display:grid;place-items:center;pointer-events:auto}
.bestseller-carousel{container-type:inline-size}
#bestsellers [data-slider-prev]{left:-27px}
#bestsellers [data-slider-next]{right:-27px}
#bestsellers .slider-btn:hover{background:#f8f5ef;border-color:#92887b}
.carousel-chevron{display:block;width:12px;height:12px;border-top:3px solid currentColor;border-right:3px solid currentColor;transform:rotate(45deg);margin-left:-4px}
.carousel-chevron-prev{transform:rotate(-135deg);margin-left:4px}
@media(max-width:900px){#bestsellers .slider-btn{top:calc((100cqw - 18px)/4);width:44px;height:44px}#bestsellers [data-slider-prev]{left:-12px}#bestsellers [data-slider-next]{right:-12px}}

.mega-promo-cta { margin-top: 12px; font-size: .72rem; text-decoration: underline; text-underline-offset: 4px; }

/* Mobile audit: keep product grids within their available column width. */
.scalp-luxe-product { min-width: 0; }
@media (max-width: 480px) {
    .scalp-luxe-product-grid { grid-template-columns: minmax(0, 1fr); }
    .scalp-luxe-product-photo { width: 100%; }
}

@media (max-width: 820px) {
    /* Haarconsult remains available in the mobile menu without covering content. */
    .consult-popup-launcher { display: none; }
    .collection-select select { font-size: 16px; }
}

/* The slider changes from four to two cards at 820px. */
@media (min-width: 821px) and (max-width: 900px) {
    #bestsellers .slider-btn { top: calc((100cqw - 96px) / 8); }
}

@media (max-width: 480px) {
    .brand svg { width: 110px; height: auto; }
    .lang-current { padding-inline: 8px; gap: 5px; letter-spacing: .06em; }
}

/* Scalp Therapy editorial hero: 426px desktop height. */
.scalp-luxe .scalp-luxe-hero{background:#EDE6DC;color:#26231e}
.scalp-luxe .scalp-luxe-hero-grid{width:100%;height:426px;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.scalp-luxe .scalp-luxe-hero-grid>div{display:flex;flex-direction:column;justify-content:center;padding:24px 11%;line-height:1.6;min-width:0}
.scalp-luxe .scalp-luxe-hero h1{font-size:clamp(36px,3.1vw,56px);line-height:1.04}
.scalp-luxe .scalp-luxe-hero .scalp-luxe-kicker{color:#625a4b;margin:0 0 14px}
.scalp-luxe .scalp-luxe-hero .scalp-luxe-intro{margin:18px 0 0;padding:0}
.scalp-luxe .scalp-luxe-hero-photo{display:block;width:100%;height:426px;min-height:0;object-fit:cover;object-position:center 58%;border-radius:0;align-self:stretch}
@media(max-width:700px){
.scalp-luxe .scalp-luxe-hero-grid{height:auto;grid-template-columns:1fr}
.scalp-luxe .scalp-luxe-hero-grid>div{padding:36px 7%}
.scalp-luxe .scalp-luxe-hero h1{font-size:40px}
.scalp-luxe .scalp-luxe-hero-photo{height:auto;object-fit:contain}
}

/* Blend the photograph into the sage-colored copy panel. */
.scalp-luxe .scalp-luxe-hero-photo{
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 20%);
    mask-image:linear-gradient(to right,transparent 0%,#000 20%);
}
@media(max-width:700px){
    .scalp-luxe .scalp-luxe-hero-photo{
        -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%);
        mask-image:linear-gradient(to bottom,transparent 0%,#000 18%);
    }
}

/* Illustrated five-step ritual and practical questions. */
.scalp-ritual-heading{margin-top:56px}
.scalp-luxe-steps.scalp-ritual-photos{gap:24px;margin-top:28px}
.scalp-ritual-photos li{border:0;padding:0;text-align:center;min-width:0}
.scalp-ritual-photos img{display:block;width:100%;height:200px;object-fit:contain;margin-bottom:18px;mix-blend-mode:multiply}
.scalp-ritual-photos .scalp-luxe-kicker{margin:0 0 10px}
.scalp-ritual-photos h3{font-size:1.3rem;line-height:1.2}
.scalp-ritual-photos p{line-height:1.6}
.scalp-ritual-faq{margin-top:48px;padding-top:28px;border-top:1px solid #b4bcb4}
.scalp-ritual-faq h2{margin-bottom:18px}
.scalp-ritual-faq details{padding:16px 0;border-bottom:1px solid #b4bcb4}
.scalp-ritual-faq summary{cursor:pointer}
.scalp-ritual-faq details p{max-width:720px;margin:12px 0 0}
@media(max-width:700px){.scalp-luxe-steps.scalp-ritual-photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}.scalp-ritual-photos img{height:170px}.scalp-ritual-heading{margin-top:36px}}

/* Wide scrub photograph fills the product card. */
.scalp-luxe-product:nth-child(2) .scalp-luxe-product-photo{background-image:none}
.scalp-luxe-product:nth-child(2) .scalp-luxe-product-photo img{position:static;width:100%;height:100%;max-width:100%;left:auto;object-fit:cover;object-position:center;mask-image:none;-webkit-mask-image:none}

/* Align the scrub packshot's base with the other ritual products. */
.scalp-ritual-photos li:nth-child(2)>img{transform:translateY(22px)}
@media(max-width:700px){.scalp-ritual-photos li:nth-child(2)>img{transform:translateY(19px)}}

/* Subtle divider below the Papaya Soothing Complex introduction. */
.scalp-luxe-complex-grid{border-bottom:1px solid #b4bcb4;padding-bottom:32px}

/* Salon photograph paired with a quiet editorial text block. */
.scalp-salon-story{padding:24px 0 64px}
.scalp-salon-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.scalp-salon-story-grid>img{display:block;width:100%;height:auto}
.scalp-salon-story-grid>div>p:not(.scalp-luxe-kicker){margin:24px 0;max-width:42ch;line-height:1.7}
.scalp-salon-story-grid h2{font-size:clamp(32px,3.2vw,48px);line-height:1.1}
@media(max-width:700px){.scalp-salon-story{padding:12px 0 40px}.scalp-salon-story-grid{grid-template-columns:1fr;gap:28px}}

.scalp-story-divider{border:0;border-top:1px solid #b4bcb4;margin:0 0 24px}

.blog-page-hero h1{font-weight:100}

/* Product search, including mobile navigation. */
.header-search { display:inline-flex; border:0; background:transparent; color:inherit; cursor:pointer; padding:0; flex-shrink:0; }
.site-search-dialog { width:min(600px,calc(100% - 32px)); border:0; padding:28px; background:#f8f5ef; color:#262621; }
.site-search-dialog::backdrop { background:rgb(0 0 0 / 40%); }
.site-search-dialog label { display:block; margin-bottom:16px; font-size:22px; }
.site-search-fields { display:flex; gap:8px; }
.site-search-fields input { min-width:0; flex:1; padding:12px; border:1px solid #aaa; font-size:16px; }
.site-search-fields button { padding:12px; background:#262621; color:white; border:0; cursor:pointer; }
[data-search-close] { margin-top:18px; border:0; background:transparent; cursor:pointer; }