/*
Theme Name: COSM'ETHIQUE Premium
Theme URI: https://cosmethique.local
Description: Thème WordPress ecommerce premium pour une marque de cosmétiques naturels, compatible Elementor et WooCommerce.
Version: 2.4.5
Author: Abdelmajid Benider
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theme-perso
Domain Path: /languages
Requires at least: 5.8
Requires PHP: 7.4
*/

:root {
    --cream: #FFFFFF;
    --ivory: #ffffff;
    --beige: #FFFFFF;
    --beige-deep: #1E9CA6;
    --sage: #2B7D8A;
    --sage-dark: #0D1B3D;
    --gold: #1E9CA6;
    --ink: #0D1B3D;
    --muted: #506875;
    --line: rgba(13, 27, 61, 0.13);
    --white: #ffffff;
    --shadow: 0 22px 60px rgba(13, 27, 61, 0.13);
    --soft-shadow: 0 12px 32px rgba(13, 27, 61, 0.1);
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Inter", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    margin-top: 0 !important;
    padding-top: 0;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding-top: 0 !important;
    color: var(--ink);
    background: var(--cream);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
}

.site {
    transition: opacity 0.28s ease, transform 0.28s ease;
}

body.cosmethique-page-leaving .site {
    opacity: 0;
    transform: translateY(6px);
}

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

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

a:hover {
    color: var(--sage-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 1rem;
    color: var(--ink);
    font-family: var(--serif);
    font-weight: 700;
    line-height: 1.05;
}

h1 {
    font-size: clamp(2.7rem, 7vw, 5.6rem);
}

h2 {
    font-size: clamp(2.1rem, 4vw, 3.6rem);
}

h3 {
    font-size: clamp(1.35rem, 2vw, 1.8rem);
}

p {
    margin: 0 0 1rem;
    color: var(--muted);
}

ul,
ol {
    color: var(--muted);
}

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

button {
    cursor: pointer;
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.screen-reader-text,
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    z-index: 9999;
    top: 12px;
    left: 12px;
    width: auto;
    height: auto;
    padding: 10px 14px;
    clip: auto;
    color: var(--white);
    background: var(--ink);
}

.button,
.added_to_cart,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--sage);
    color: var(--white);
    font-family: var(--sans);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

.button:hover,
.added_to_cart:hover,
.wp-element-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    transform: translateY(-2px);
    box-shadow: var(--soft-shadow);
    background: var(--sage-dark);
    color: var(--white);
}

.button:active,
.added_to_cart:active,
.wp-element-button:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 8px 18px rgba(13, 27, 61, 0.1);
}

.button svg,
.header-icon svg,
.shop-picto-grid svg,
.home-expertise-cards span,
.account-benefit-card svg,
.diagnostic-indicators svg,
.cosmethique-map-marker {
    transition: transform 0.28s ease;
}

.button:hover svg,
.button:focus-visible svg,
.header-icon:hover svg,
.header-icon:focus-visible svg,
.shop-picto-grid > *:hover svg,
.home-expertise-cards article:hover span,
.account-benefit-card:hover svg,
.diagnostic-indicators > *:hover svg,
.cosmethique-map-marker:hover {
    transform: scale(1.06) rotate(-3deg);
}

.button-light {
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
}

.button-outline {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}

.button-outline:hover {
    background: var(--ink);
    color: var(--white);
}

.eyebrow {
    margin-bottom: 0.8rem;
    color: var(--sage-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.section {
    padding: clamp(72px, 9vw, 124px) 0;
}

.section-heading {
    width: min(720px, 100%);
    margin: 0 auto 42px;
    text-align: center;
}

.section-cta {
    margin-top: 42px;
    text-align: center;
}

.site-header {
    position: relative;
    top: auto;
    margin-top: 0;
    transform: none;
    z-index: 1000;
    background: rgba(225, 229, 242, 0.92);
    border-bottom: 1px solid rgba(13, 27, 61, 0.08);
    backdrop-filter: blur(18px);
    transition: background 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease, backdrop-filter 0.32s ease;
}

#page,
.site,
body.admin-bar #page,
body.admin-bar .site,
body.admin-bar .site-header,
body.admin-bar .promo-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.site-header,
.promo-bar,
.header-shell {
    margin-top: 0 !important;
}

body.admin-bar .site-header,
body.admin-bar .promo-bar {
    position: relative !important;
    top: auto !important;
    transform: none !important;
}

.promo-bar {
    overflow: hidden;
    min-height: 36px;
    padding: 0;
    background: var(--ink);
    color: var(--cream);
    font-size: 0.82rem;
    font-weight: 600;
}

.promo-track {
    display: flex;
    width: max-content;
    min-height: 36px;
    align-items: center;
    gap: 34px;
    padding: 0 18px;
    animation: promo-marquee 32s linear infinite;
}

.promo-track span {
    position: relative;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    white-space: nowrap;
}

.promo-track span::after {
    content: "";
    width: 5px;
    height: 5px;
    margin-left: 26px;
    border-radius: 50%;
    background: var(--gold);
}

.promo-track strong {
    color: var(--white);
}

.promo-marquee:hover .promo-track {
    animation-play-state: paused;
}

@keyframes promo-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.header-shell {
    width: min(1380px, calc(100% - 32px));
    margin: 0 auto;
}

.header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: center;
    min-height: 76px;
}

.brand-logo,
.footer-logo {
    display: inline-flex;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.custom-logo-link img {
    max-height: 58px;
    width: auto;
}

.site-navigation {
    justify-self: center;
}

.primary-menu,
.footer-menu {
    display: flex;
    gap: clamp(16px, 2vw, 30px);
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.primary-menu a {
    position: relative;
    display: inline-flex;
    padding: 10px 0;
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 600;
}

.primary-menu a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 6px;
    left: 0;
    height: 1px;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--gold);
    transition: transform 180ms ease;
}

.primary-menu a:hover::after,
.primary-menu .current-menu-item > a::after {
    transform: scaleX(1);
}

.header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.product-search-form {
    position: relative;
    display: grid;
    grid-template-columns: minmax(120px, 180px) 36px;
    align-items: center;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    z-index: 80;
}

.product-search-form input {
    min-width: 0;
    padding: 0 0 0 16px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
}

input.is-demo-placeholder,
textarea.is-demo-placeholder,
select.is-demo-placeholder {
    color: rgba(80, 104, 117, 0.58) !important;
}

.product-search-form button,
.header-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink);
}

.product-search-form button {
    border: 0;
    cursor: pointer;
}

.smart-search-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(430px, calc(100vw - 32px));
    max-height: min(72vh, 620px);
    overflow: hidden auto;
    padding: 10px;
    border: 1px solid #e8ebf1;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(13, 27, 61, 0.16);
    transform-origin: top right;
    animation: smartSearchIn 220ms ease both;
}

.smart-search-panel[hidden] {
    display: none;
}

.smart-search-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.smart-search-results {
    display: grid;
    gap: 6px;
}

.smart-search-item {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 16px;
    color: #0d1b3d;
    text-decoration: none;
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.smart-search-item:hover,
.smart-search-item:focus-visible,
.smart-search-item.is-active {
    border-color: rgba(43, 125, 138, 0.22);
    background: #f5f7ff;
    box-shadow: 0 12px 26px rgba(13, 27, 61, 0.08);
    color: #0d1b3d;
    transform: translateY(-2px);
    outline: none;
}

.smart-search-thumb {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border-radius: 14px;
    background: #f8f3ec;
}

.smart-search-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 260ms ease;
}

.smart-search-item:hover .smart-search-thumb img,
.smart-search-item.is-active .smart-search-thumb img {
    transform: scale(1.05);
}

.smart-search-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(43, 125, 138, 0.12);
    color: #2b7d8a;
    font-size: 0.84rem;
    font-weight: 800;
    text-transform: uppercase;
}

.smart-search-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.smart-search-type {
    color: #2b7d8a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.smart-search-copy strong {
    color: #0d1b3d;
    font-family: var(--font-heading);
    font-size: 1.04rem;
    line-height: 1.16;
}

.smart-search-copy small {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.smart-search-copy mark {
    padding: 0 2px;
    border-radius: 5px;
    background: rgba(30, 156, 166, 0.16);
    color: inherit;
}

.smart-search-empty {
    display: grid;
    gap: 14px;
    padding: 18px;
    color: #0d1b3d;
    text-align: center;
}

.smart-search-empty p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.smart-search-empty-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.smart-search-empty-links a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid #e8ebf1;
    border-radius: 999px;
    background: #fff;
    color: #0d1b3d;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.smart-search-empty-links a:hover,
.smart-search-empty-links a:focus-visible {
    border-color: #2b7d8a;
    background: #2b7d8a;
    color: #fff;
    transform: translateY(-1px);
    outline: none;
}

.smart-search-loading {
    height: 74px;
    border-radius: 16px;
    background: linear-gradient(90deg, #f5f7ff 0%, #fff 48%, #f5f7ff 100%);
    background-size: 220% 100%;
    animation: smartSearchLoading 900ms ease infinite;
}

@keyframes smartSearchIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes smartSearchLoading {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .smart-search-panel,
    .smart-search-loading,
    .smart-search-item,
    .smart-search-thumb img,
    .smart-search-empty-links a {
        animation: none;
        transition: none;
    }
}

.product-search-form svg,
.header-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.language-switcher {
    position: relative;
    z-index: 30;
    flex: 0 0 auto;
}

.language-switcher-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 126px;
    height: 42px;
    padding: 0 18px;
    border: 1px solid #e8e6e1;
    border-radius: 999px;
    background: #ffffff;
    color: #0D1B3D;
    box-shadow: 0 10px 24px rgba(13, 27, 61, 0.07);
    cursor: pointer;
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.language-switcher-toggle:hover,
.language-switcher-toggle:focus-visible,
.language-switcher.is-open .language-switcher-toggle {
    border-color: rgba(13, 27, 61, 0.16);
    background: #FFFFFF;
    box-shadow: 0 14px 30px rgba(13, 27, 61, 0.1);
    transform: translateY(-1px);
}

.language-switcher-toggle svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.language-switcher.is-open .language-switcher-toggle svg {
    transform: rotate(180deg);
}

.language-label-short {
    display: none;
}

.language-switcher-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 178px;
    padding: 8px;
    border: 1px solid #e8e6e1;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(13, 27, 61, 0.13);
    transform-origin: top right;
}

.language-switcher-menu:not([hidden]) {
    animation: language-menu-in 0.28s ease both;
}

@keyframes language-menu-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.language-switcher-option,
.language-switcher-option:visited {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 12px;
    border-radius: 12px;
    color: #0D1B3D;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.language-switcher-option:hover,
.language-switcher-option:focus-visible {
    background: #FFFFFF;
    color: #0D1B3D;
    transform: translateX(2px);
}

.language-switcher-option.is-active {
    background: #FFFFFF;
}

.language-switcher-option.is-active::after {
    content: "✓";
    color: #0D1B3D;
    font-weight: 700;
}

.cosmethique-rtl {
    direction: rtl;
    text-align: right;
}

.cosmethique-rtl .primary-menu {
    flex-direction: row-reverse;
}

.cosmethique-rtl .product-search-form input,
.cosmethique-rtl input,
.cosmethique-rtl textarea,
.cosmethique-rtl select {
    text-align: right;
}

.cosmethique-rtl .language-switcher-menu {
    right: auto;
    left: 0;
    transform-origin: top left;
}

.cosmethique-rtl .language-switcher-option:hover,
.cosmethique-rtl .language-switcher-option:focus-visible {
    transform: translateX(-2px);
}

.instagram-link {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.instagram-link:hover,
.instagram-link:focus-visible {
    transform: scale(1.08);
    color: #2B7D8A;
}

.instagram-link[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 20;
    width: max-content;
    max-width: 220px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #2B7D8A;
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.instagram-link[data-tooltip]:hover::after,
.instagram-link[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.social-link,
.contact-social-card {
    cursor: pointer;
    transition: transform 250ms ease, box-shadow 250ms ease, color 250ms ease, background 250ms ease, border-color 250ms ease;
}

.social-link svg,
.contact-social-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.social-link:hover,
.social-link:focus-visible,
.contact-social-card:hover,
.contact-social-card:focus-visible {
    color: #2B7D8A;
    transform: translateY(-3px) scale(1.05) rotate(2deg);
}

.social-link[data-tooltip] {
    position: relative;
}

.social-link[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 20;
    width: max-content;
    max-width: 220px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #2B7D8A;
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 250ms ease, transform 250ms ease;
}

.social-link[data-tooltip]:hover::after,
.social-link[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.cart-link {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--white);
    font-size: 0.68rem;
    font-weight: 700;
}

.mobile-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
}

.mobile-menu-toggle span:not(.screen-reader-text) {
    display: block;
    width: 18px;
    height: 2px;
    margin: 4px auto;
    background: var(--ink);
}

.hero-section {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(620px, 82vh, 760px);
    padding: 110px 20px 92px;
    overflow: hidden;
    color: var(--white);
}

.hero-media,
.hero-overlay {
    position: absolute;
    inset: 0;
}

.hero-media {
    background-position: center;
    background-size: cover;
    transform: scale(1.02);
    animation: hero-media-reveal 1.05s ease both, hero-media-breathe 9s ease-in-out 1.1s infinite;
    will-change: transform;
}

.hero-overlay {
    background: linear-gradient(90deg, rgba(13, 27, 61, 0.82), rgba(13, 27, 61, 0.48) 48%, rgba(13, 27, 61, 0.18));
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
}

.hero-content .eyebrow,
.hero-content h1,
.hero-content p:not(.eyebrow),
.hero-actions,
.floating-review {
    opacity: 0;
    transform: translateY(20px);
    animation: hero-copy-reveal 0.78s ease forwards;
}

.hero-content .eyebrow {
    animation-delay: 0.12s;
}

.hero-content h1 {
    animation-delay: 0.24s;
}

.hero-content p:not(.eyebrow) {
    animation-delay: 0.36s;
}

.hero-actions {
    animation-delay: 0.48s;
}

.floating-review {
    animation-delay: 0.62s;
}

.hero-content h1 {
    max-width: 760px;
    color: var(--white);
}

.hero-content p:not(.eyebrow) {
    max-width: 560px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 1.08rem;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.hero-section .eyebrow,
.promo-card .eyebrow {
    color: var(--beige);
}

.floating-review {
    position: absolute;
    right: max(28px, calc((100vw - 1180px) / 2));
    bottom: 54px;
    z-index: 2;
    width: min(300px, calc(100% - 40px));
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
}

.floating-review strong {
    display: block;
    color: var(--white);
    font-family: var(--serif);
    font-size: 2rem;
}

.floating-review p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
}

@keyframes hero-copy-reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hero-media-reveal {
    from {
        opacity: 0;
        transform: scale(1.08);
    }
    to {
        opacity: 1;
        transform: scale(1.02);
    }
}

@keyframes hero-media-breathe {
    0%,
    100% {
        filter: saturate(1);
    }
    50% {
        filter: saturate(1.04) brightness(1.02);
    }
}

.floating-review {
    animation: hero-copy-reveal 0.78s ease 0.62s forwards, luxe-soft-float 7s ease-in-out 1.55s infinite;
}

.motion-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.72s ease var(--reveal-delay, 0ms), transform 0.72s ease var(--reveal-delay, 0ms);
}

.motion-reveal--left {
    transform: translateX(-28px);
}

.motion-reveal--right {
    transform: translateX(28px);
}

.motion-reveal--scale {
    transform: translateY(22px) scale(0.985);
}

.motion-reveal.is-visible,
.motion-reveal--left.is-visible,
.motion-reveal--right.is-visible,
.motion-reveal--scale.is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

@keyframes luxe-soft-float {
    0%,
    100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -6px;
    }
}

.stars {
    color: var(--gold);
    letter-spacing: 0.08em;
}

.trust-bar {
    background: var(--ivory);
    border-bottom: 1px solid var(--line);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
}

.trust-grid div {
    padding: 26px 18px;
    text-align: center;
}

.trust-grid strong,
.trust-grid span {
    display: block;
}

.trust-grid strong {
    margin-bottom: 4px;
    font-size: 0.9rem;
}

.trust-grid span {
    color: var(--muted);
    font-size: 0.8rem;
}

.payment-home-strip {
    padding: 18px 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
}

.payment-home-strip .container {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.payment-home-strip span,
.payment-home-strip strong {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 8px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--ivory);
    color: var(--ink);
    font-size: 0.84rem;
}

.payment-home-strip strong {
    border-color: rgba(43, 125, 138, 0.34);
    background: #FFFFFF;
    color: var(--sage-dark);
}

.category-grid,
.products-grid,
.blog-grid,
.testimonial-grid,
.promo-grid {
    display: grid;
    gap: 24px;
}

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

.category-card,
.product-card,
.blog-card,
.testimonial-grid figure,
.highlight-panel,
.form-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.category-card,
.product-card,
.blog-card {
    overflow: hidden;
    transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.product-card {
    cursor: pointer;
}

.front-page .product-card .button,
.product-card .button {
    opacity: 0.94;
    transform: translateY(2px);
}

.front-page .product-card:hover .button,
.front-page .product-card:focus-within .button,
.product-card:hover .button,
.product-card:focus-within .button {
    opacity: 1;
    transform: translateY(-2px);
}

.product-card .product-price {
    transition: color 0.28s ease, transform 0.28s ease;
}

.product-card:hover .product-price,
.product-card:focus-within .product-price {
    color: var(--sage-dark);
    transform: translateY(-1px);
}

button.category-card {
    display: grid;
    width: 100%;
    padding: 0;
    overflow: hidden;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

button.category-card.is-active {
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(43, 125, 138, 0.16), var(--soft-shadow);
}

.front-page .category-card,
.front-page .product-card,
.front-page .promo-card,
.front-page .story-grid,
.front-page .testimonial-grid figure,
.front-page .blog-card {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 560ms ease var(--reveal-delay, 0ms), transform 560ms ease var(--reveal-delay, 0ms), box-shadow 260ms ease, border-color 260ms ease;
}

.front-page .category-card.is-visible,
.front-page .product-card.is-visible,
.front-page .promo-card.is-visible,
.front-page .story-grid.is-visible,
.front-page .testimonial-grid figure.is-visible,
.front-page .blog-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.category-card:hover,
.product-card:hover,
.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--soft-shadow);
}

.category-card:hover img,
.category-card:focus-within img,
.product-card:hover .product-image img,
.product-card:focus-within .product-image img,
.blog-card:hover img,
.blog-card:focus-within img,
.blog-showcase-card:hover img,
.blog-showcase-card:focus-within img {
    transform: scale(1.045);
}

.category-card img,
.product-image img,
.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.48s ease, filter 0.48s ease;
}

.category-card img {
    aspect-ratio: 4 / 4.2;
}

.category-card span,
.product-body,
.blog-card div:not(.blog-image) {
    padding: 22px;
}

.category-card strong,
.category-card em {
    display: block;
}

.category-card strong {
    margin-bottom: 8px;
    font-family: var(--serif);
    font-size: 1.35rem;
    line-height: 1.1;
}

.category-card em {
    color: var(--muted);
    font-style: normal;
    font-size: 0.92rem;
}

.category-card p,
.blog-card p {
    margin-bottom: 0;
}

.category-card a {
    display: inline-flex;
    margin-top: 18px;
    color: var(--sage-dark);
    font-weight: 700;
}

.home-univers-section {
    position: relative;
    overflow: hidden;
    padding: clamp(66px, 9vw, 120px) 0;
    background: #FFFFFF;
}

.home-univers-heading {
    display: grid;
    gap: 12px;
    max-width: 780px;
    margin: 0 auto clamp(30px, 5vw, 56px);
    text-align: center;
}

.home-univers-heading h2 {
    margin: 0;
    color: #0D1B3D;
    font-family: var(--serif);
    font-size: clamp(2.7rem, 5.4vw, 5.6rem);
    line-height: 0.96;
    letter-spacing: 0;
}

.home-univers-heading p:not(.eyebrow) {
    margin: 0;
    color: #6b7c8f;
    font-size: 1.04rem;
    line-height: 1.75;
}

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

.home-universe-card {
    min-height: clamp(440px, 42vw, 580px);
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 680ms ease var(--reveal-delay, 0ms), transform 680ms ease var(--reveal-delay, 0ms);
}

.home-universe-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.home-universe-card--wide {
    grid-column: span 3;
    min-height: clamp(430px, 40vw, 620px);
}

.home-universe-card a {
    position: relative;
    display: grid;
    height: 100%;
    min-height: inherit;
    overflow: hidden;
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 28px;
    background: #FFFFFF;
    box-shadow: 0 18px 54px rgba(13, 27, 61, 0.08);
    color: #0D1B3D;
    isolation: isolate;
    transition: transform 360ms ease, box-shadow 360ms ease, border-color 360ms ease;
}

.home-universe-card a:hover,
.home-universe-card a:focus-visible {
    border-color: rgba(13, 27, 61, 0.16);
    box-shadow: 0 28px 74px rgba(13, 27, 61, 0.15);
    transform: translateY(-8px);
}

.home-universe-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.home-universe-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(13, 27, 61, 0.04), rgba(13, 27, 61, 0.54));
    pointer-events: none;
}

.home-universe-media::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -70%;
    z-index: 3;
    width: 42%;
    background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    opacity: 0;
    transform: skewX(-18deg);
    pointer-events: none;
}

.home-universe-card a:hover .home-universe-media::after,
.home-universe-card a:focus-visible .home-universe-media::after {
    animation: home-universe-shine 900ms ease;
}

@keyframes home-universe-shine {
    0% {
        left: -70%;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        left: 128%;
        opacity: 0;
    }
}

.home-universe-media img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    transform: translateY(var(--universe-parallax, 0px)) scale(1.01);
    transition: transform 700ms ease, filter 700ms ease;
}

.home-universe-card a:hover .home-universe-media img,
.home-universe-card a:focus-visible .home-universe-media img {
    filter: saturate(1.04) contrast(1.02);
    transform: translateY(calc(var(--universe-parallax, 0px) - 6px)) scale(1.075);
}

.home-universe-content {
    position: relative;
    z-index: 4;
    display: grid;
    align-self: end;
    gap: 12px;
    max-width: 520px;
    padding: clamp(24px, 4vw, 42px);
    color: #ffffff;
    transform: translateY(12px);
    transition: transform 360ms ease;
}

.home-universe-card a:hover .home-universe-content,
.home-universe-card a:focus-visible .home-universe-content {
    transform: translateY(0);
}

.home-universe-kicker {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-universe-content strong {
    font-family: var(--serif);
    font-size: clamp(2.1rem, 4vw, 4rem);
    font-weight: 700;
    line-height: 0.98;
}

.home-universe-content em {
    max-width: 440px;
    color: rgba(255, 255, 255, 0.86);
    font-style: normal;
    line-height: 1.65;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 360ms ease, transform 360ms ease;
}

.home-universe-card a:hover .home-universe-content em,
.home-universe-card a:focus-visible .home-universe-content em {
    opacity: 1;
    transform: translateY(0);
}

.home-universe-button {
    display: inline-flex;
    width: fit-content;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    padding: 12px 18px;
    border-radius: 999px;
    background: #2B7D8A;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(13, 27, 61, 0.22);
    transform: translateY(16px);
    transition: transform 360ms ease, background 300ms ease;
}

.home-universe-card a:hover .home-universe-button,
.home-universe-card a:focus-visible .home-universe-button {
    background: #1E9CA6;
    transform: translateY(0);
}

.featured-products {
    background: var(--ivory);
}

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

.product-image,
.blog-image {
    position: relative;
    display: block;
    background: var(--beige);
}

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

.product-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.product-body h3 {
    margin-bottom: 0.55rem;
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.35;
}

.product-price {
    margin-bottom: 18px;
    color: var(--sage-dark);
    font-weight: 700;
}

.product-card[hidden] {
    display: none;
}

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

.promo-card {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 36px;
    border-radius: 8px;
    background-position: center;
    background-size: cover;
    color: var(--white);
}

.promo-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(13, 27, 61, 0.74), rgba(13, 27, 61, 0.14));
}

.promo-card > div {
    position: relative;
    z-index: 1;
    max-width: 480px;
}

.promo-card h2 {
    color: var(--white);
}

.promo-card p:not(.eyebrow) {
    color: rgba(255, 255, 255, 0.86);
}

.home-diagnostic-cta {
    padding: clamp(62px, 8vw, 112px) 0;
    overflow: hidden;
    background: #FFFFFF;
}

.home-diagnostic-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
    gap: clamp(28px, 5vw, 74px);
    align-items: center;
    padding: clamp(26px, 5vw, 56px);
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 28px 78px rgba(13, 27, 61, 0.09);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 560ms ease, transform 560ms ease, box-shadow 320ms ease;
}

.home-diagnostic-panel.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.home-diagnostic-copy {
    display: grid;
    gap: 18px;
    align-content: center;
}

.home-diagnostic-copy h2 {
    max-width: 520px;
    margin: 0;
    color: #0D1B3D;
    font-size: clamp(3rem, 5.5vw, 6rem);
    line-height: 0.94;
}

.home-diagnostic-copy p:not(.eyebrow) {
    max-width: 560px;
    margin: 0;
    color: #6b7c8f;
    font-size: clamp(1.02rem, 1.4vw, 1.18rem);
    line-height: 1.75;
}

.home-diagnostic-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    margin: 4px 0 8px;
    list-style: none;
}

.home-diagnostic-benefits li {
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid #e7ecf5;
    border-radius: 999px;
    background: #ffffff;
    color: #0D1B3D;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
}

.home-diagnostic-benefits li::before {
    content: "✓";
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 999px;
    background: #2B7D8A;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
}

.home-diagnostic-copy .button {
    width: fit-content;
    margin-top: 2px;
    transition: transform 260ms ease, background 260ms ease, box-shadow 260ms ease;
}

.home-diagnostic-copy .button:hover,
.home-diagnostic-copy .button:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(43, 138, 157, 0.22);
}

.home-diagnostic-media {
    position: relative;
    min-height: clamp(360px, 42vw, 560px);
    margin: 0;
    overflow: hidden;
    border-radius: 28px;
    background: #FFFFFF;
    box-shadow: 0 22px 58px rgba(13, 27, 61, 0.1);
}

.home-diagnostic-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.14) 36%, rgba(255, 255, 255, 0.42) 46%, rgba(255, 255, 255, 0.08) 56%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-120%);
}

.home-diagnostic-panel:hover .home-diagnostic-media::before,
.home-diagnostic-panel:focus-within .home-diagnostic-media::before {
    animation: home-diagnostic-shine 950ms ease;
}

.home-diagnostic-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    object-position: center;
    transition: transform 700ms ease, filter 700ms ease;
}

.home-diagnostic-panel:hover .home-diagnostic-media img,
.home-diagnostic-panel:focus-within .home-diagnostic-media img {
    filter: saturate(1.03) contrast(1.02);
    transform: scale(1.045);
}

@keyframes home-diagnostic-shine {
    0% {
        opacity: 0;
        transform: translateX(-120%);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(120%);
    }
}

.story-section {
    background: var(--cream);
}

.home-expertise-section {
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 9vw, 132px) 0;
    background:
        radial-gradient(circle at 84% 18%, rgba(43, 138, 157, 0.1), transparent 32%),
        linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%);
}

.home-expertise-section::before {
    content: "";
    position: absolute;
    inset: 8% auto auto -6%;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.48);
    filter: blur(10px);
    pointer-events: none;
}

.home-expertise-heading {
    max-width: 820px;
    margin: 0 auto clamp(36px, 5vw, 64px);
    text-align: center;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 700ms ease, transform 700ms ease;
}

.home-expertise-heading.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.home-expertise-heading h2 {
    margin: 0;
    color: var(--navy);
    font-family: var(--serif);
    font-size: clamp(3rem, 7vw, 6.4rem);
    line-height: 0.95;
}

.home-expertise-heading p:not(.eyebrow) {
    max-width: 720px;
    margin: 18px auto 0;
    color: var(--muted);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.8;
}

.home-expertise-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}

.home-expertise-copy {
    position: relative;
    z-index: 1;
    padding: clamp(28px, 4.5vw, 56px);
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 26px 70px rgba(13, 27, 61, 0.1);
    backdrop-filter: blur(18px);
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 720ms ease, transform 720ms ease;
}

.home-expertise-copy.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.home-expertise-copy h3 {
    max-width: 520px;
    margin: 0 0 20px;
    color: var(--navy);
    font-family: var(--serif);
    font-size: clamp(2.55rem, 5vw, 5.2rem);
    line-height: 0.96;
}

.home-expertise-copy p:not(.eyebrow) {
    max-width: 620px;
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.82;
}

.home-expertise-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.home-expertise-cards article {
    min-height: 134px;
    padding: 20px;
    border: 1px solid rgba(232, 230, 225, 0.9);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 16px 36px rgba(13, 27, 61, 0.08);
    backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 680ms ease, transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.home-expertise-cards article.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.home-expertise-cards article:nth-child(2) {
    transition-delay: 80ms;
}

.home-expertise-cards article:nth-child(3) {
    transition-delay: 140ms;
}

.home-expertise-cards article:nth-child(4) {
    transition-delay: 200ms;
}

.home-expertise-cards article:hover,
.home-expertise-cards article:focus-within {
    border-color: rgba(43, 138, 157, 0.32);
    box-shadow: 0 24px 52px rgba(13, 27, 61, 0.15);
    transform: translateY(-8px) rotate(-1.2deg);
}

.home-expertise-cards span {
    display: grid;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    place-items: center;
    border-radius: 16px;
    background: #FFFFFF;
    color: var(--navy);
    font-size: 1.35rem;
}

.home-expertise-cards strong {
    display: block;
    color: var(--navy);
    font-size: 0.98rem;
    line-height: 1.35;
}

.home-expertise-media {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 32px 80px rgba(13, 27, 61, 0.16);
    opacity: 0;
    transform: translateY(34px) scale(0.985);
    transition: opacity 780ms ease, transform 780ms ease, box-shadow 300ms ease;
}

.home-expertise-media.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.home-expertise-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.28) 45%, transparent 70%);
    opacity: 0;
    transform: translateX(-120%);
    pointer-events: none;
}

.home-expertise-media:hover,
.home-expertise-media:focus-within {
    box-shadow: 0 38px 90px rgba(13, 27, 61, 0.2);
}

.home-expertise-media:hover::after,
.home-expertise-media:focus-within::after {
    animation: home-expertise-shine 950ms ease;
}

.home-expertise-media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform 650ms ease;
}

.home-expertise-media:hover img,
.home-expertise-media:focus-within img {
    transform: scale(1.045) translateY(-4px);
}

@keyframes home-expertise-shine {
    0% {
        opacity: 0;
        transform: translateX(-120%);
    }

    35% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(120%);
    }
}

.story-grid,
.two-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(32px, 6vw, 76px);
    align-items: center;
}

.story-grid img,
.page-featured-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: var(--shadow);
    aspect-ratio: 4 / 4.5;
    object-fit: cover;
}

.testimonials-section {
    background: var(--ivory);
}

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

.testimonial-grid figure {
    margin: 0;
    padding: 28px;
}

.testimonial-grid blockquote {
    margin: 12px 0 18px;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1.35rem;
    line-height: 1.22;
}

.testimonial-grid figcaption {
    color: var(--muted);
    font-weight: 700;
}

.blog-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--cream) 100%);
}

.blog-page-main {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--cream) 42%, var(--ivory) 100%);
}

.blog-page-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(70px, 9vw, 118px) 0 28px;
    text-align: center;
}

.blog-page-hero::before,
.blog-page-hero::after,
.blog-section::before,
.blog-section::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 220px;
    height: 220px;
    border-radius: 48% 52% 42% 58%;
    background:
        radial-gradient(ellipse at 36% 44%, rgba(43, 125, 138, 0.22) 0 12%, transparent 13%),
        radial-gradient(ellipse at 60% 34%, rgba(13, 27, 61, 0.16) 0 10%, transparent 11%),
        radial-gradient(ellipse at 54% 62%, rgba(43, 125, 138, 0.18) 0 11%, transparent 12%);
    opacity: 0.65;
    pointer-events: none;
}

.blog-page-hero::before,
.blog-section::before {
    top: 56px;
    left: -82px;
    transform: rotate(-24deg);
}

.blog-page-hero::after,
.blog-section::after {
    right: -86px;
    bottom: 38px;
    transform: rotate(28deg);
}

.blog-page-hero .container,
.blog-section .container {
    position: relative;
    z-index: 1;
}

.blog-page-hero h1 {
    color: var(--ink);
}

.blog-page-hero p:not(.eyebrow) {
    width: min(680px, 100%);
    margin: 0 auto;
    color: var(--muted);
    font-size: 1.14rem;
}

.blog-showcase-heading {
    margin-bottom: 38px;
}

.blog-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.blog-showcase-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 42px rgba(13, 27, 61, 0.09);
    transition: opacity 0.62s ease var(--reveal-delay, 0ms), transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}

.blog-showcase-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 60px rgba(13, 27, 61, 0.14);
}

.blog-showcase-image {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9.6;
    background: var(--beige);
}

.blog-showcase-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.48s ease, filter 0.48s ease;
}

.blog-showcase-card:hover .blog-showcase-image img {
    filter: saturate(1.04) contrast(1.02);
    transform: scale(1.05);
}

.blog-showcase-image span {
    position: absolute;
    top: 20px;
    left: 20px;
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 7px 14px;
    border-radius: 8px;
    background: rgba(111, 142, 103, 0.88);
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.blog-showcase-body {
    position: relative;
    display: grid;
    align-content: start;
    padding: 24px 30px 28px;
}

.blog-showcase-body::after {
    content: "";
    position: absolute;
    right: 24px;
    bottom: 16px;
    width: 86px;
    height: 96px;
    opacity: 0.28;
    background:
        linear-gradient(65deg, transparent 49%, var(--sage) 50% 52%, transparent 53%),
        radial-gradient(ellipse at 34% 72%, transparent 55%, var(--sage) 56% 59%, transparent 60%),
        radial-gradient(ellipse at 56% 54%, transparent 55%, var(--sage) 56% 59%, transparent 60%),
        radial-gradient(ellipse at 72% 34%, transparent 55%, var(--sage) 56% 59%, transparent 60%);
    pointer-events: none;
}

.blog-showcase-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.blog-showcase-meta span::before {
    content: "○";
    margin-right: 7px;
    color: var(--sage-dark);
}

.blog-showcase-card h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 16px;
    color: var(--ink);
    font-size: clamp(1.62rem, 2.2vw, 2.18rem);
    line-height: 1.12;
}

.blog-showcase-card p {
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
    color: var(--muted);
}

.blog-showcase-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    gap: 18px;
    align-items: center;
    justify-self: start;
    color: var(--sage-dark);
    font-weight: 700;
}

.blog-showcase-cta {
    margin-top: 28px;
    text-align: center;
}

.blog-showcase-cta .button {
    gap: 26px;
    min-width: 280px;
    background: linear-gradient(135deg, var(--sage-dark), #2B7D8A);
}

.blog-page-showcase {
    padding-top: 36px;
}

.blog-all-posts {
    background: var(--ivory);
}

.blog-page-main,
.blog-article-main {
    --blog-blue: #0D1B3D;
    --blog-soft-blue: #FFFFFF;
    --blog-beige: #FFFFFF;
    --blog-sage: #2B7D8A;
}

.blog-featured-section {
    padding: 20px 0 34px;
}

.blog-featured-card {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 28px;
    align-items: stretch;
    overflow: hidden;
    padding: 28px;
    border: 1px solid rgba(43, 125, 138, 0.1);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 22px 60px rgba(43, 125, 138, 0.08);
}

.blog-featured-copy {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: clamp(8px, 2vw, 22px);
}

.blog-featured-copy h2 {
    color: var(--blog-blue);
    font-size: clamp(2rem, 4vw, 3.8rem);
}

.blog-featured-copy p {
    max-width: 560px;
    margin-bottom: 24px;
    color: #526272;
}

.blog-featured-image {
    overflow: hidden;
    border-radius: 20px;
    background: var(--blog-beige);
}

.blog-featured-image img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
}

.blog-pill {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    margin-bottom: 16px;
    padding: 7px 14px;
    border-radius: 9px;
    background: var(--blog-sage);
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.blog-toolbar {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 28px;
}

.blog-filter-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.blog-filter-list button,
.blog-sort select {
    min-height: 38px;
    padding: 9px 16px;
    border: 1px solid rgba(43, 125, 138, 0.12);
    border-radius: 999px;
    background: var(--white);
    color: var(--blog-blue);
    font-size: 0.84rem;
    font-weight: 700;
}

.blog-filter-list button.is-active {
    background: var(--blog-blue);
    color: var(--white);
}

.blog-sort {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: #667687;
    font-size: 0.84rem;
    font-weight: 700;
}

.blog-layout,
.blog-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}

.blog-layout {
    grid-template-columns: minmax(0, 1fr) 330px;
}

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

.blog-showcase-card {
    border-radius: 22px;
    border-color: rgba(43, 125, 138, 0.1);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 44px rgba(43, 125, 138, 0.08);
    transition: transform 300ms ease, box-shadow 300ms ease;
}

.blog-showcase-card[hidden] {
    display: none;
}

.blog-showcase-card:hover {
    box-shadow: 0 26px 66px rgba(43, 125, 138, 0.14);
}

.blog-showcase-image {
    border-radius: 22px 22px 0 0;
}

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

.blog-showcase-image span {
    background: rgba(43, 125, 138, 0.92);
    border-radius: 9px;
}

.blog-showcase-body {
    padding: 26px 28px 28px;
}

.blog-showcase-card h3 {
    color: var(--blog-blue);
}

.blog-showcase-stats {
    display: flex;
    gap: 18px;
    margin: 2px 0 20px;
    color: #667687;
    font-size: 0.82rem;
    font-weight: 700;
}

.blog-showcase-link {
    color: var(--blog-blue);
}

.blog-sidebar,
.blog-article-sidebar {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 130px;
}

.blog-sidebar-card {
    padding: 24px;
    border: 1px solid rgba(43, 125, 138, 0.1);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 42px rgba(43, 125, 138, 0.07);
}

.blog-sidebar-card h2 {
    margin-bottom: 18px;
    color: var(--blog-blue);
    font-size: 1.55rem;
}

.blog-sidebar-card a {
    display: grid;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(43, 125, 138, 0.08);
    color: var(--blog-blue);
    font-weight: 700;
}

.blog-sidebar-card a:last-child {
    border-bottom: 0;
}

.blog-sidebar-card a span {
    color: #667687;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.blog-newsletter-card {
    background: linear-gradient(135deg, var(--blog-beige), var(--blog-soft-blue));
}

.blog-newsletter-card .newsletter-form {
    gap: 10px;
}

.blog-newsletter-card .button {
    width: 100%;
}

.blog-trust-section {
    padding: 28px 0;
    background: rgba(237, 244, 252, 0.72);
    border-top: 1px solid rgba(43, 125, 138, 0.08);
}

.blog-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.blog-trust-grid div {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
}

.blog-trust-grid span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--white);
    color: var(--blog-blue);
    font-weight: 700;
}

.blog-trust-grid strong {
    color: var(--blog-blue);
    font-size: 0.92rem;
    line-height: 1.25;
}

.blog-article-hero {
    padding: clamp(48px, 7vw, 90px) 0 28px;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--blog-soft-blue) 100%);
}

.blog-article-hero h1 {
    width: min(820px, 100%);
    margin-top: 14px;
    color: var(--blog-blue);
    font-size: clamp(2.35rem, 5vw, 4.7rem);
}

.blog-breadcrumb {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 26px;
    color: #667687;
    font-size: 0.84rem;
    font-weight: 700;
}

.blog-article-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    color: #566777;
    font-size: 0.86rem;
    font-weight: 700;
}

.blog-article-layout {
    grid-template-columns: 72px minmax(0, 1fr) 320px;
    padding: clamp(34px, 6vw, 68px) 0;
}

.blog-share-rail {
    position: sticky;
    top: 130px;
    display: grid;
    gap: 10px;
    justify-items: center;
    align-self: start;
}

.blog-share-rail > span {
    color: #667687;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    writing-mode: vertical-rl;
}

.blog-share-rail a,
.blog-share-rail button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #e8ebf1;
    border-radius: 50%;
    background: var(--white);
    color: #0D1B3D;
    font-size: 0;
    box-shadow: 0 10px 24px rgba(43, 125, 138, 0.07);
    cursor: pointer;
    transition: transform 250ms ease, box-shadow 250ms ease, color 250ms ease, background 250ms ease, border-color 250ms ease;
}

.blog-share-link svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.blog-share-rail a:hover,
.blog-share-rail a:focus-visible,
.blog-share-rail button:hover,
.blog-share-rail button:focus-visible {
    border-color: #0D1B3D;
    background: #0D1B3D;
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(13, 27, 61, 0.18);
    transform: translateY(-3px) scale(1.05) rotate(2deg);
}

.blog-share-rail a:active,
.blog-share-rail button:active {
    transform: translateY(0) scale(0.97);
}

.blog-article-content {
    min-width: 0;
}

.blog-article-image {
    overflow: hidden;
    margin: 0 0 28px;
    border-radius: 24px;
    background: var(--blog-beige);
    box-shadow: 0 20px 52px rgba(43, 125, 138, 0.09);
}

.blog-article-image img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.blog-article-content .entry-content {
    width: 100%;
    padding: 0 4px;
}

.blog-article-content .entry-content p {
    color: #526272;
    font-size: 1.04rem;
}

.blog-article-content .entry-content h2 {
    margin-top: 2rem;
    color: var(--blog-blue);
}

.toc-card ol {
    display: grid;
    gap: 12px;
    margin: 0;
    padding-left: 1.2rem;
    color: #526272;
    font-size: 0.92rem;
}

.ingredient-card div {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ingredient-card span {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--blog-soft-blue);
    color: var(--blog-blue);
    font-size: 0.82rem;
    font-weight: 700;
}

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

.blog-image {
    aspect-ratio: 16 / 10;
}

.magazine-card {
    display: grid;
    grid-template-rows: auto 1fr;
}

.magazine-card .blog-link {
    display: inline-flex;
    margin-top: 18px;
    color: var(--sage-dark);
    font-weight: 700;
}

.inspiration-notes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 28px;
}

.inspiration-notes article {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.66);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.inspiration-notes article:hover {
    transform: translateY(-4px);
    box-shadow: var(--soft-shadow);
}

.inspiration-notes span {
    display: inline-flex;
    margin-bottom: 12px;
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.inspiration-notes h3 {
    font-size: 1.45rem;
}

.blog-card time,
.post-meta,
.entry-meta {
    display: block;
    margin-bottom: 10px;
    color: var(--sage-dark);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.newsletter-section {
    padding: clamp(60px, 8vw, 92px) 0;
    background: var(--ink);
}

.newsletter-panel {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 460px);
    gap: 42px;
    align-items: center;
}

.newsletter-panel h2 {
    color: var(--white);
}

.newsletter-form {
    display: grid;
    gap: 12px;
}

.newsletter-form input,
.cosmethique-form input,
.cosmethique-form textarea,
.cosmethique-form select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.search-form input[type="search"] {
    width: 100%;
    min-height: 50px;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    outline: 0;
    background: var(--white);
    color: var(--ink);
}

.newsletter-form small {
    color: rgba(255, 255, 255, 0.64);
}

.page-hero,
.archive-hero {
    padding: clamp(70px, 10vw, 128px) 0 clamp(44px, 7vw, 78px);
    background: linear-gradient(135deg, var(--ivory), var(--beige));
    border-bottom: 1px solid var(--line);
}

.page-hero .container,
.archive-hero .container {
    width: min(900px, calc(100% - 40px));
}

.page-hero p:not(.eyebrow),
.archive-hero p:not(.eyebrow) {
    font-size: 1.08rem;
}

.page-hero--compact,
.archive-hero--product {
    display: flex;
    align-items: center;
    min-height: 320px;
    padding-top: 70px;
    padding-bottom: 70px;
}

.page-hero--compact .container,
.archive-hero--product .container {
    display: grid;
    gap: 18px;
}

.page-hero--compact .eyebrow,
.archive-hero--product .eyebrow {
    margin-bottom: 0;
}

.page-hero--compact h1,
.archive-hero--product h1 {
    margin-bottom: 0;
    font-size: clamp(48px, 5vw, 78px);
    line-height: 1.05;
}

.page-hero--compact p:not(.eyebrow),
.archive-hero--product p:not(.eyebrow) {
    max-width: 620px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
}

.page-content-wrap,
.archive-wrap,
.single-wrap {
    padding: clamp(52px, 8vw, 94px) 0;
}

.page-content-wrap--compact,
.archive-wrap--product {
    padding-top: clamp(24px, 4vw, 42px);
}

.entry-content {
    width: min(900px, 100%);
    margin: 0 auto;
}

.entry-content > * + * {
    margin-top: 1.1rem;
}

.rich-section {
    width: min(1080px, 100%);
    margin: 0 auto;
}

.highlight-panel,
.form-card {
    padding: clamp(24px, 4vw, 38px);
}

.check-list {
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
}

.check-list li::before {
    content: "";
    position: absolute;
    top: 0.68em;
    left: 0;
    width: 12px;
    height: 8px;
    border-bottom: 2px solid var(--sage);
    border-left: 2px solid var(--sage);
    transform: rotate(-45deg);
}

.diagnostic-page {
    width: min(1240px, calc(100vw - 34px));
    margin: 0 0 0 50%;
    color: #0D1B3D;
    transform: translateX(-50%);
}

.diagnostic-intro {
    display: grid;
    max-width: 760px;
    margin: 0 auto clamp(30px, 5vw, 54px);
    text-align: center;
}

.diagnostic-intro h2 {
    max-width: 720px;
    margin: 0 auto 14px;
    color: #0D1B3D;
    font-size: clamp(2.5rem, 5vw, 4.8rem);
    line-height: 1;
}

.diagnostic-intro p:not(.eyebrow) {
    margin: 0;
    color: #6b7c8f;
    font-size: 1.05rem;
    line-height: 1.8;
}

.diagnostic-shell {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: clamp(22px, 4vw, 42px);
    align-items: start;
}

.diagnostic-side-card,
.diagnostic-widget {
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 70px rgba(13, 27, 61, 0.08);
}

.diagnostic-side-card {
    position: sticky;
    top: 140px;
    display: grid;
    gap: 18px;
    padding: clamp(26px, 4vw, 36px);
    overflow: hidden;
}

.diagnostic-side-card::after {
    content: "";
    position: absolute;
    right: -55px;
    bottom: -70px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgba(191, 216, 247, 0.42);
    filter: blur(4px);
}

.diagnostic-side-icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0D1B3D;
}

.diagnostic-side-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.diagnostic-side-card h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #0D1B3D;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    line-height: 1.05;
}

.diagnostic-side-card p,
.diagnostic-side-card li {
    position: relative;
    z-index: 1;
    color: #6b7c8f;
    line-height: 1.75;
}

.diagnostic-side-card p {
    margin: 0;
}

.diagnostic-side-card ul {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 4px 0 0;
    list-style: none;
}

.diagnostic-side-card li {
    display: flex;
    gap: 10px;
    align-items: center;
}

.diagnostic-side-card li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #2B7D8A;
}

.diagnostic-widget {
    padding: clamp(24px, 4vw, 42px);
}

.diagnostic-progress {
    display: grid;
    gap: 12px;
    margin-bottom: clamp(28px, 4vw, 42px);
    color: #0D1B3D;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

.diagnostic-progress-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #FFFFFF;
}

.diagnostic-progress-track span {
    display: block;
    width: 16.66%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0D1B3D, #2B7D8A);
    transition: width 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

.diagnostic-form {
    display: grid;
    gap: clamp(24px, 4vw, 38px);
}

.diagnostic-widget.is-ready .diagnostic-step {
    display: none;
}

.diagnostic-widget.is-ready .diagnostic-step.is-active {
    display: grid;
    animation: diagnostic-step-in 360ms ease both;
}

.diagnostic-step {
    gap: clamp(22px, 4vw, 34px);
}

.diagnostic-step h3,
.diagnostic-result h3 {
    max-width: 720px;
    margin: 0;
    color: #0D1B3D;
    font-size: clamp(2.1rem, 4.4vw, 4.15rem);
    line-height: 1.04;
}

.diagnostic-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

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

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

.diagnostic-options label {
    position: relative;
    display: grid;
    min-height: 76px;
    place-items: center;
    padding: 18px;
    border: 1px solid #e7ecf5;
    border-radius: 20px;
    background: #ffffff;
    color: #0D1B3D;
    cursor: pointer;
    font-weight: 700;
    text-align: center;
    transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease, background 250ms ease;
}

.diagnostic-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.diagnostic-options label:hover,
.diagnostic-options label:focus-within,
.diagnostic-options label.is-selected {
    transform: translateY(-3px);
    border-color: rgba(18, 52, 74, 0.38);
    background: #FFFFFF;
    box-shadow: 0 16px 36px rgba(13, 27, 61, 0.09);
}

.diagnostic-options label.is-selected::after {
    content: "✓";
    position: absolute;
    top: 12px;
    right: 14px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: #0D1B3D;
    color: #fff;
    font-size: 0.8rem;
    animation: diagnostic-check-in 260ms ease both;
}

@keyframes diagnostic-check-in {
    from {
        opacity: 0;
        transform: scale(0.68) rotate(-12deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

.diagnostic-actions,
.diagnostic-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.diagnostic-actions {
    justify-content: space-between;
}

.diagnostic-actions .button[disabled] {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

.diagnostic-result {
    animation: diagnostic-step-in 400ms ease both;
}

.diagnostic-result .eyebrow {
    margin-bottom: 12px;
}

.diagnostic-routine-columns {
    display: grid;
    gap: 18px;
    margin: clamp(22px, 4vw, 34px) 0;
}

.diagnostic-routine-group {
    display: grid;
    gap: 16px;
}

.diagnostic-routine-group h4,
.diagnostic-why h4 {
    margin: 0;
    color: #0D1B3D;
    font-family: var(--sans);
    font-size: 0.86rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.diagnostic-products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.diagnostic-product-card {
    display: grid;
    gap: 10px;
    min-height: 100%;
    padding: 12px;
    border: 1px solid #e7ecf5;
    border-radius: 22px;
    background: #fff;
    color: #0D1B3D;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(13, 27, 61, 0.06);
    transition: transform 250ms ease, box-shadow 250ms ease;
}

.diagnostic-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(13, 27, 61, 0.11);
}

.diagnostic-product-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 18px;
    background: #FFFFFF;
}

.diagnostic-product-card span,
.diagnostic-product-card strong {
    display: block;
    color: #0D1B3D;
}

.diagnostic-product-card span {
    font-weight: 700;
    line-height: 1.25;
}

.diagnostic-product-card strong {
    font-size: 0.98rem;
}

.diagnostic-product-card em,
.diagnostic-why p {
    color: #6b7c8f;
    font-style: normal;
    line-height: 1.65;
}

.diagnostic-product-card em {
    font-size: 0.9rem;
}

.diagnostic-why {
    display: grid;
    gap: 10px;
    padding: clamp(20px, 3vw, 28px);
    margin-bottom: 22px;
    border-radius: 22px;
    background: #FFFFFF;
}

.diagnostic-why p {
    max-width: 760px;
    margin: 0;
}

@keyframes diagnostic-step-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-content-wrap--diagnostic {
    padding: 0 0 clamp(54px, 8vw, 96px);
}

.page-content-wrap--diagnostic .entry-content {
    width: 100%;
}

.page-content-wrap--diagnostic .entry-content > * + * {
    margin-top: 0;
}

.page-content-wrap--account {
    padding: 0;
}

.page-content-wrap--account .entry-content {
    width: 100%;
}

.page-content-wrap--account .entry-content > * + * {
    margin-top: 0;
}

.diagnostic-page {
    display: grid;
    gap: clamp(24px, 4vw, 48px);
    width: min(1280px, calc(100vw - 34px));
    padding-top: clamp(22px, 3vw, 34px);
}

.diagnostic-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(360px, 1.14fr);
    gap: clamp(24px, 5vw, 62px);
    align-items: center;
    min-height: min(400px, calc(100vh - 180px));
    padding: clamp(24px, 4vw, 44px);
    overflow: hidden;
    border: 1px solid #e7ecf5;
    border-radius: 30px;
    background: linear-gradient(135deg, #FFFFFF 0%, #ffffff 56%, #FFFFFF 100%);
    box-shadow: 0 24px 70px rgba(13, 27, 61, 0.08);
}

.diagnostic-hero-copy {
    display: grid;
    gap: 16px;
    align-content: center;
    animation: diagnostic-step-in 560ms ease both;
}

.diagnostic-hero h1 {
    max-width: 560px;
    margin: 0;
    color: #0D1B3D;
    font-size: clamp(3.4rem, 6vw, 6.3rem);
    line-height: 0.9;
}

.diagnostic-hero p:not(.eyebrow) {
    max-width: 520px;
    margin: 0 0 8px;
    color: #6b7c8f;
    font-size: clamp(1.02rem, 1.4vw, 1.18rem);
    line-height: 1.65;
}

.diagnostic-hero .button {
    width: fit-content;
}

.diagnostic-hero-media {
    position: relative;
    min-height: 318px;
    margin: 0;
    overflow: hidden;
    border-radius: 26px;
    background: #FFFFFF;
    box-shadow: 0 22px 58px rgba(13, 27, 61, 0.1);
    animation: diagnostic-hero-media-in 650ms 80ms ease both;
}

.diagnostic-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 35%, transparent 65%, rgba(255, 255, 255, 0.22));
    pointer-events: none;
}

.diagnostic-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 318px;
    object-fit: cover;
    object-position: center;
}

.diagnostic-indicators {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.diagnostic-indicators article {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 86px;
    padding: 18px;
    border: 1px solid #e7ecf5;
    border-radius: 22px;
    background: #ffffff;
    color: #0D1B3D;
    box-shadow: 0 16px 42px rgba(13, 27, 61, 0.06);
    animation: diagnostic-step-in 520ms ease both;
}

.diagnostic-indicators article:nth-child(2) {
    animation-delay: 80ms;
}

.diagnostic-indicators article:nth-child(3) {
    animation-delay: 160ms;
}

.diagnostic-indicators article:nth-child(4) {
    animation-delay: 240ms;
}

.diagnostic-indicators span {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 999px;
    background: #FFFFFF;
}

.diagnostic-indicators strong {
    font-size: 0.96rem;
    line-height: 1.25;
}

.diagnostic-shell {
    display: block;
    width: min(100%, 1040px);
    margin: 0 auto;
}

.diagnostic-widget {
    padding: clamp(24px, 5vw, 52px);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.94);
}

.diagnostic-step {
    min-height: 360px;
    align-content: center;
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid #e7ecf5;
    border-radius: 26px;
    background: linear-gradient(135deg, #ffffff, #FFFFFF);
}

.diagnostic-step-kicker {
    width: fit-content;
    margin: 0;
    padding: 8px 13px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0D1B3D;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.diagnostic-step h3,
.diagnostic-result h3 {
    font-size: clamp(2.45rem, 4.7vw, 4.8rem);
}

.diagnostic-options label {
    min-height: 104px;
    border-radius: 24px;
    font-size: clamp(1rem, 1.4vw, 1.14rem);
}

.diagnostic-options label.is-selected {
    border-color: #0D1B3D;
    background: linear-gradient(135deg, #FFFFFF, #FFFFFF);
}

.diagnostic-actions {
    margin-top: -12px;
}

.diagnostic-score {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    width: min(100%, 430px);
    padding: 16px 18px;
    margin: 18px 0 8px;
    border: 1px solid #e7ecf5;
    border-radius: 22px;
    background: #FFFFFF;
}

.diagnostic-score span {
    color: #6b7c8f;
    font-weight: 700;
}

.diagnostic-score strong {
    color: #0D1B3D;
    font-family: var(--serif);
    font-size: clamp(2.6rem, 5vw, 4rem);
    line-height: 0.9;
}

.diagnostic-product-card {
    text-decoration: none;
}

.diagnostic-product-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: auto;
}

.diagnostic-product-actions .button {
    width: 100%;
    min-height: 42px;
    padding: 12px 14px;
    font-size: 0.82rem;
}

@keyframes diagnostic-hero-media-in {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.about-brand-page {
    width: min(1240px, calc(100vw - 34px));
    margin: 0 0 0 50%;
    transform: translateX(-50%);
    color: #0D1B3D;
}

.about-brand-page section + section {
    margin-top: clamp(58px, 8vw, 108px);
}

.about-story-section,
.about-eco-section {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}

.about-story-copy,
.about-eco-section > div {
    display: grid;
    gap: 18px;
}

.about-story-copy h2,
.about-section-heading h2,
.about-eco-section h2,
.about-cta-section h2 {
    max-width: 760px;
    margin-bottom: 0;
    color: #0D1B3D;
    font-family: var(--serif);
    font-size: clamp(2.7rem, 5vw, 5.2rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.about-story-copy p,
.about-eco-section p,
.about-cta-section p {
    max-width: 620px;
    margin: 0;
    color: #506875;
    font-size: 1.03rem;
    line-height: 1.75;
}

.about-story-media,
.about-eco-section figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid #e7ecf5;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 22px 60px rgba(13, 27, 61, 0.1);
}

.about-story-media img,
.about-eco-section img {
    display: block;
    width: 100%;
    min-height: clamp(420px, 45vw, 620px);
    object-fit: cover;
    transition: transform 600ms ease;
}

.about-story-media:hover img,
.about-eco-section figure:hover img,
.about-ingredient-card:hover img {
    transform: scale(1.045);
}

.about-section-heading {
    display: grid;
    gap: 12px;
    margin-bottom: clamp(24px, 4vw, 42px);
    text-align: center;
    justify-items: center;
}

.about-section-heading h2 {
    font-size: clamp(2.35rem, 4vw, 4.2rem);
}

.about-philosophy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.about-value-card,
.about-number-card,
.about-process-step,
.about-ingredient-card,
.about-testimonial-card {
    border: 1px solid #e7ecf5;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 16px 45px rgba(13, 27, 61, 0.07);
}

.about-value-card {
    display: grid;
    gap: 14px;
    min-height: 220px;
    padding: clamp(24px, 4vw, 38px);
    transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.about-value-card:hover,
.about-process-step:hover,
.about-ingredient-card:hover,
.about-testimonial-card:hover {
    border-color: rgba(13, 27, 61, 0.18);
    box-shadow: 0 24px 62px rgba(13, 27, 61, 0.12);
    transform: translateY(-6px);
}

.about-value-card span,
.about-process-icon {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: #FFFFFF;
    color: #0D1B3D;
}

.about-value-card svg,
.about-process-icon svg,
.about-eco-list svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-value-card h3,
.about-process-step h3,
.about-ingredient-card h3 {
    margin: 0;
    color: #0D1B3D;
    font-family: var(--serif);
    font-size: 1.75rem;
    line-height: 1.05;
}

.about-value-card p,
.about-ingredient-card p,
.about-testimonial-card blockquote,
.about-testimonial-card span,
.about-number-card span {
    margin: 0;
    color: #6b7c8f;
    line-height: 1.65;
}

.about-numbers-section {
    padding: clamp(28px, 5vw, 54px);
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 28px;
    background: #FFFFFF;
}

.about-number-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.about-number-card {
    display: grid;
    gap: 8px;
    min-height: 150px;
    place-items: center;
    padding: 24px 16px;
    text-align: center;
}

.about-number-card strong {
    color: #0D1B3D;
    font-family: var(--serif);
    font-size: clamp(2.6rem, 5vw, 4.5rem);
    line-height: 0.95;
}

.about-number-card em {
    font-style: normal;
}

.about-process-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.about-process-timeline::before {
    content: "";
    position: absolute;
    top: 68px;
    right: 8%;
    left: 8%;
    height: 1px;
    background: #e7ecf5;
}

.about-process-step {
    position: relative;
    display: grid;
    gap: 12px;
    min-height: 188px;
    padding: 22px 16px;
    text-align: center;
    justify-items: center;
    transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.about-process-step:not(:last-child)::after {
    content: "↓";
    position: absolute;
    top: 58px;
    right: -13px;
    z-index: 2;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0D1B3D;
    font-weight: 700;
    transform: rotate(-90deg);
}

.about-process-index {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #0D1B3D;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
}

.about-process-step h3 {
    max-width: 150px;
    font-size: 1.25rem;
}

.about-ingredient-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.about-ingredient-card {
    overflow: hidden;
    transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.about-ingredient-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1.1 / 1;
    object-fit: cover;
    transition: transform 500ms ease;
}

.about-ingredient-card div {
    display: grid;
    gap: 8px;
    padding: 22px;
}

.about-eco-section {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid #e7ecf5;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 20px 58px rgba(13, 27, 61, 0.08);
}

.about-eco-section figure {
    box-shadow: none;
}

.about-eco-list {
    display: grid;
    gap: 12px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.about-eco-list li {
    display: flex;
    gap: 12px;
    align-items: center;
    color: #0D1B3D;
    font-weight: 700;
}

.about-eco-list svg {
    flex: 0 0 auto;
    color: #2B7D8A;
}

.about-eco-badge {
    display: inline-flex;
    width: fit-content;
    margin-top: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0D1B3D;
    font-weight: 700;
}

.about-testimonial-slider {
    position: relative;
    display: grid;
    min-height: 360px;
}

.about-testimonial-card {
    position: relative;
    grid-area: 1 / 1;
    display: grid;
    gap: 12px;
    justify-items: center;
    width: min(100%, 860px);
    max-width: 860px;
    min-height: 340px;
    margin: 0 auto;
    padding: clamp(34px, 5vw, 58px);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    text-align: center;
    transform: translateY(10px) scale(0.98);
    transition: opacity 360ms ease, transform 360ms ease;
}

.about-testimonial-card.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.about-testimonial-card img {
    width: 86px;
    height: 86px;
    border: 4px solid #FFFFFF;
    border-radius: 50%;
    object-fit: cover;
}

.about-testimonial-card figcaption {
    display: grid;
    gap: 2px;
}

.about-testimonial-card figcaption strong {
    color: #0D1B3D;
    font-size: 1rem;
}

.about-testimonial-card blockquote {
    width: min(100%, 700px);
    max-width: 700px;
    overflow-wrap: break-word;
    word-break: normal;
    text-align: center;
    font-size: clamp(0.98rem, 1.35vw, 1.12rem);
    line-height: 1.8;
}

.about-testimonial-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 18px;
}

.about-testimonial-controls button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(13, 27, 61, 0.22);
    cursor: pointer;
    transition: width 300ms ease, background 300ms ease;
}

.about-testimonial-controls button[aria-current="true"] {
    width: 32px;
    background: #0D1B3D;
}

.about-cta-section {
    position: relative;
    overflow: hidden;
    padding: clamp(44px, 8vw, 78px);
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 28px;
    background: #FFFFFF;
}

.about-cta-section > div {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    max-width: 720px;
}

.about-cta-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.about-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 520ms ease, transform 520ms ease;
}

.about-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cosmethique-rtl .about-story-section,
.cosmethique-rtl .about-eco-section {
    direction: rtl;
}

.cosmethique-rtl .about-eco-list li {
    justify-content: flex-start;
}

.contact-details {
    display: grid;
    gap: 10px;
    margin-top: 26px;
}

.contact-social-section {
    width: min(1080px, 100%);
    margin: clamp(34px, 6vw, 72px) auto 0;
    padding: clamp(30px, 5vw, 54px);
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 28px;
    background: linear-gradient(135deg, #ffffff 0%, #FFFFFF 100%);
    box-shadow: 0 18px 48px rgba(13, 27, 61, 0.08);
}

.contact-social-section .section-heading {
    max-width: 620px;
    margin: 0 auto clamp(24px, 4vw, 34px);
    text-align: center;
}

.contact-social-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.contact-social-card {
    display: grid;
    justify-items: center;
    gap: 10px;
    min-height: 190px;
    padding: 28px 20px;
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--ink);
    text-align: center;
    box-shadow: 0 12px 30px rgba(13, 27, 61, 0.06);
}

.contact-social-card:hover,
.contact-social-card:focus-visible {
    border-color: rgba(43, 125, 138, 0.2);
    background: #ffffff;
    box-shadow: 0 20px 46px rgba(13, 27, 61, 0.12);
}

.contact-social-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(13, 27, 61, 0.1);
    border-radius: 50%;
    background: #FFFFFF;
    color: #2B7D8A;
}

.contact-social-card strong {
    font-family: var(--serif);
    font-size: 1.55rem;
    line-height: 1;
    color: var(--ink);
}

.contact-social-card span:last-child {
    color: var(--muted);
    font-size: 0.94rem;
}

.cosmethique-form {
    display: grid;
    gap: 16px;
}

.wpcf7-form,
.wpforms-form {
    display: grid;
    gap: 16px;
}

.wpcf7-form input,
.wpcf7-form textarea,
.wpforms-form input,
.wpforms-form textarea,
.wpforms-form select {
    width: 100%;
    min-height: 50px;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.cosmethique-form label {
    display: grid;
    gap: 8px;
    color: var(--ink);
    font-weight: 700;
}

.cosmethique-form .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 600;
}

.cosmethique-form .checkbox-label input {
    width: auto;
    min-height: auto;
    margin-top: 0.35em;
}

.franchise-section {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(32px, 6vw, 76px);
    align-items: start;
}

.franchise-network {
    width: min(1280px, calc(100vw - 40px));
    margin: 0 0 clamp(38px, 6vw, 76px) 50%;
    padding: clamp(28px, 5vw, 58px);
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 30px;
    background: #FFFFFF;
    box-shadow: 0 24px 64px rgba(13, 27, 61, 0.06);
    transform: translateX(-50%);
}

.franchise-network-shell {
    display: grid;
    grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.12fr);
    gap: clamp(28px, 5vw, 62px);
    align-items: center;
}

.franchise-network-copy {
    min-width: 0;
}

.franchise-network-copy h2 {
    max-width: 560px;
    margin-bottom: 16px;
    color: #0D1B3D;
    font-size: clamp(2.4rem, 4.2vw, 4.6rem);
    line-height: 1.02;
}

.franchise-network-copy p:not(.eyebrow) {
    max-width: 600px;
    color: #506875;
    font-size: 1rem;
    line-height: 1.7;
}

.franchise-network-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.franchise-network-stats div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    min-height: 122px;
    padding: 18px;
    border: 1px solid rgba(13, 27, 61, 0.09);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(13, 27, 61, 0.05);
}

.franchise-network-stats span {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(13, 27, 61, 0.1);
    border-radius: 999px;
    background: #FFFFFF;
    color: #0D1B3D;
}

.franchise-network-stats svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.franchise-network-stats strong {
    align-self: end;
    color: #0D1B3D;
    font-family: var(--serif);
    font-size: clamp(2.1rem, 3.4vw, 3.25rem);
    font-style: normal;
    line-height: 0.94;
}

.franchise-network-stats em {
    font-style: normal;
}

.franchise-network-stats small {
    grid-column: 2;
    color: #6b7c8f;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.franchise-map-card {
    overflow: hidden;
    border: 1px solid rgba(13, 27, 61, 0.09);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 22px 54px rgba(13, 27, 61, 0.08);
}

.franchise-map {
    width: 100%;
    min-height: clamp(380px, 42vw, 560px);
    background: #FFFFFF;
}

.franchise-map-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border-top: 1px solid rgba(13, 27, 61, 0.08);
    background: #ffffff;
}

.franchise-map-cta p {
    margin: 0;
    color: #0D1B3D;
    font-weight: 700;
}

.cosmethique-map-marker-wrap {
    background: transparent;
    border: 0;
}

.cosmethique-map-marker {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 2px solid #0D1B3D;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 12px 24px rgba(13, 27, 61, 0.2);
    color: #0D1B3D;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cosmethique-map-marker:hover {
    box-shadow: 0 18px 34px rgba(13, 27, 61, 0.25);
    transform: translateY(-2px) scale(1.08);
}

.cosmethique-map-marker strong {
    font-family: var(--serif);
    font-size: 0.95rem;
    line-height: 1;
}

.cosmethique-leaflet-popup .leaflet-popup-content-wrapper {
    border-radius: 22px;
    box-shadow: 0 18px 48px rgba(13, 27, 61, 0.16);
}

.cosmethique-leaflet-popup .leaflet-popup-content {
    margin: 0;
}

.cosmethique-map-popup {
    display: grid;
    gap: 8px;
    min-width: 240px;
    padding: 18px;
    color: #0D1B3D;
}

.cosmethique-map-popup-logo {
    color: #0D1B3D;
    font-family: var(--serif);
    font-size: 1.05rem;
    letter-spacing: 0.08em;
}

.cosmethique-map-popup h3,
.cosmethique-map-popup p {
    margin: 0;
}

.cosmethique-map-popup p {
    color: #6b7c8f;
    font-size: 0.88rem;
    line-height: 1.45;
}

.cosmethique-map-popup .button {
    min-height: 40px;
    margin-top: 4px;
    padding: 10px 14px;
    font-size: 0.82rem;
}

.leaflet-popup-content .popup-btn,
.leaflet-popup-content .popup-btn:link,
.leaflet-popup-content .popup-btn:visited,
.leaflet-popup-content .popup-btn:hover,
.leaflet-popup-content .popup-btn:active,
.cosmethique-map-popup .popup-btn,
.cosmethique-map-popup .popup-btn:link,
.cosmethique-map-popup .popup-btn:visited,
.cosmethique-map-popup .popup-btn:hover,
.cosmethique-map-popup .popup-btn:active {
    min-height: 44px;
    padding: 12px 24px;
    border-radius: 999px;
    background: #2B7D8A;
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.leaflet-popup-content .popup-btn:hover,
.leaflet-popup-content .popup-btn:focus-visible,
.cosmethique-map-popup .popup-btn:hover,
.cosmethique-map-popup .popup-btn:focus-visible {
    background: #1E9CA6;
    color: #ffffff !important;
}

.franchise-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 30px 0;
}

.franchise-stats div {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--ivory);
}

.franchise-stats strong {
    display: block;
    margin-bottom: 6px;
    color: var(--sage-dark);
    font-family: var(--serif);
    font-size: 2.2rem;
    line-height: 1;
}

.franchise-stats span {
    display: block;
    color: var(--muted);
    font-size: 0.9rem;
}

.legal-content {
    width: min(860px, 100%);
    margin: 0 auto;
    padding: clamp(26px, 5vw, 48px);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--ivory);
}

.archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.post-card,
.single-article,
.woocommerce div.product,
.woocommerce-cart-form,
.woocommerce-checkout,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.75);
}

.post-card {
    overflow: hidden;
}

.post-card .post-thumbnail {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--beige);
}

.post-card .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card-content {
    padding: 24px;
}

.single-article {
    width: min(900px, 100%);
    margin: 0 auto;
    padding: clamp(26px, 5vw, 54px);
}

.single-article .post-thumbnail {
    margin: 28px 0;
}

.single-article .post-thumbnail img {
    border-radius: 8px;
}

.post-navigation,
.pagination,
.woocommerce-pagination {
    margin-top: 40px;
}

.nav-links,
.page-numbers {
    display: flex;
    gap: 10px;
    justify-content: center;
    list-style: none;
}

.widget {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--ivory);
}

.site-footer {
    position: relative;
    overflow: hidden;
    background: #0D1B3D;
    color: rgba(255, 255, 255, 0.78);
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 16%, rgba(30, 156, 166, 0.18), transparent 28%),
        radial-gradient(circle at 86% 0%, rgba(43, 125, 138, 0.2), transparent 24%);
    opacity: 0.82;
}

.footer-main {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 1.45fr) repeat(2, minmax(170px, 0.72fr)) minmax(280px, 1fr);
    gap: clamp(24px, 4vw, 48px);
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
    padding: clamp(48px, 7vw, 78px) 0 34px;
}

.footer-logo,
.site-footer h2 {
    color: var(--white);
}

.footer-brand p,
.site-footer p,
.site-footer a {
    color: rgba(255, 255, 255, 0.72);
}

.footer-brand-rich {
    display: grid;
    align-content: start;
    gap: 20px;
}

.footer-brand-rich > p {
    max-width: 340px;
    margin: 0;
    line-height: 1.8;
}

.social-links,
.footer-column,
.footer-menu {
    display: grid;
    gap: 10px;
}

.social-links {
    grid-auto-flow: column;
    justify-content: start;
    margin-top: 0;
}

.social-links a {
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    transition: color 300ms ease, transform 300ms ease, border-color 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

.social-links .social-link {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
}

.social-links a:hover,
.social-links a:focus-visible,
.site-footer a:hover,
.site-footer a:focus-visible {
    color: #ffffff;
}

.social-links a:hover,
.social-links a:focus-visible {
    border-color: rgba(255, 255, 255, 0.64);
    transform: translateY(-2px) scale(1.04);
}

.social-links .social-link:hover,
.social-links .social-link:focus-visible {
    border-color: rgba(255, 255, 255, 0.86);
    background: #ffffff;
    color: #1E9CA6;
    box-shadow: 0 14px 28px rgba(13, 27, 61, 0.22);
    transform: translateY(-3px) scale(1.05) rotate(2deg);
}

.footer-commitments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 6px;
}

.footer-commitment-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 92px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 16px 36px rgba(13, 27, 61, 0.14);
    transition: transform 300ms ease, border-color 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

.footer-commitment-card:hover,
.footer-commitment-card:focus-within {
    border-color: rgba(30, 156, 166, 0.58);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 24px 48px rgba(13, 27, 61, 0.22);
    transform: translateY(-4px);
}

.footer-commitment-icon,
.footer-trust-badges svg {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.footer-commitment-icon {
    background: rgba(30, 156, 166, 0.16);
    color: #ffffff;
}

.footer-commitment-icon svg,
.footer-trust-badges svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer-commitment-card strong,
.footer-commitment-card small {
    display: block;
}

.footer-commitment-card strong {
    color: #ffffff;
    font-size: 0.82rem;
    line-height: 1.35;
}

.footer-commitment-card small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.72rem;
    line-height: 1.45;
}

.footer-column h2 {
    margin-bottom: 14px;
    font-family: var(--sans);
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-link-list {
    display: grid;
    gap: 2px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer-link-list a,
.footer-link-list button {
    position: relative;
    display: flex;
    min-height: 36px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 7px 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: color 300ms ease, border-color 300ms ease, transform 300ms ease;
}

.footer-link-list a::after,
.footer-link-list button::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(30, 156, 166, 0), rgba(30, 156, 166, 0.92), rgba(30, 156, 166, 0));
    content: "";
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: opacity 280ms ease, transform 280ms ease;
}

.footer-link-list a span,
.footer-link-list button span {
    color: rgba(30, 156, 166, 0.86);
    font-size: 1.15rem;
    line-height: 1;
    transition: transform 300ms ease;
}

.footer-link-list a:hover,
.footer-link-list a:focus-visible,
.footer-link-list button:hover,
.footer-link-list button:focus-visible {
    border-color: rgba(30, 156, 166, 0.42);
    color: #ffffff;
    outline: none;
    transform: translateX(3px);
}

.footer-link-list a:hover::after,
.footer-link-list a:focus-visible::after,
.footer-link-list button:hover::after,
.footer-link-list button:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

.footer-link-list a:hover span,
.footer-link-list a:focus-visible span,
.footer-link-list button:hover span,
.footer-link-list button:focus-visible span {
    transform: translateX(4px);
}

.footer-newsletter {
    display: grid;
    gap: 10px;
    margin-top: 24px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 20px 48px rgba(13, 27, 61, 0.16);
}

.footer-newsletter h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.footer-newsletter p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.9rem;
}

.footer-newsletter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 6px;
}

.footer-newsletter-form input {
    min-width: 0;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: #ffffff;
    color: #0D1B3D;
    padding: 0 16px;
}

.footer-newsletter-form input::placeholder {
    color: #7b8898;
}

.footer-newsletter-form input:focus {
    outline: none;
    border-color: #1E9CA6;
    box-shadow: 0 0 0 4px rgba(30, 156, 166, 0.16);
}

.footer-newsletter-form button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 0 17px;
    border: 1px solid #2B7D8A;
    border-radius: 999px;
    background: #2B7D8A;
    color: #ffffff;
    font-weight: 700;
    transition: transform 300ms ease, box-shadow 300ms ease, background 300ms ease;
}

.footer-newsletter-form button:hover,
.footer-newsletter-form button:focus-visible {
    background: #1E9CA6;
    box-shadow: 0 16px 30px rgba(30, 156, 166, 0.18);
    transform: translateY(-2px);
}

.footer-newsletter-form button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer-newsletter-form .newsletter-status {
    grid-column: 1 / -1;
    min-height: 18px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
}

.footer-newsletter-form.is-error .newsletter-status {
    color: #ffffff;
}

.footer-newsletter-form.is-error input {
    border-color: #1E9CA6;
}

.footer-newsletter-form.is-success .newsletter-status {
    color: #ffffff;
}

.footer-bottom {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1.2fr) minmax(260px, 0.9fr);
    gap: 20px;
    align-items: center;
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
    padding: 24px 0 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom p {
    margin: 0;
    font-size: 0.86rem;
}

.footer-payment-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.payment-logo {
    display: inline-flex;
    transition: transform 300ms ease, filter 300ms ease;
}

.payment-logo:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.payment-logo svg {
    width: 78px;
    height: 28px;
}

.payment-logo rect {
    fill: #ffffff;
}

.payment-logo text {
    fill: #0D1B3D;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
}

.payment-logo--visa text {
    fill: #2B7D8A;
    font-size: 13px;
    letter-spacing: 0.08em;
}

.payment-logo--mastercard circle:first-of-type {
    fill: #2B7D8A;
    opacity: 0.92;
}

.payment-logo--mastercard circle:last-of-type {
    fill: #1E9CA6;
    opacity: 0.86;
}

.payment-logo--mastercard text {
    font-size: 5px;
}

.payment-logo--paypal text,
.payment-logo--klarna text,
.payment-logo--cb text {
    fill: #0D1B3D;
}

.footer-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.footer-trust-badges span {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.76rem;
    white-space: nowrap;
    transition: transform 300ms ease, border-color 300ms ease, background 300ms ease;
}

.footer-trust-badges span:hover {
    border-color: rgba(30, 156, 166, 0.5);
    background: rgba(30, 156, 166, 0.12);
    transform: translateY(-2px);
}

.footer-trust-badges svg {
    width: 17px;
    height: 17px;
    color: #ffffff;
}

.payment-loyalty-strip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
    padding: 0 0 28px;
}

.payment-loyalty-strip strong {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border: 1px solid rgba(30, 156, 166, 0.38);
    border-radius: 999px;
    background: rgba(30, 156, 166, 0.12);
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 700;
    text-align: center;
}

.footer-cookie-link {
    color: rgba(255, 255, 255, 0.72);
}

.footer-cookie-link:hover,
.footer-cookie-link:focus-visible {
    color: var(--white);
    outline: none;
}

.footer-cookie-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 5px;
}

.footer-cookie-link--inline {
    color: inherit;
}

.cookie-banner {
    position: fixed;
    right: 22px;
    bottom: 22px;
    left: 22px;
    z-index: 1100;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    width: min(1040px, calc(100% - 44px));
    margin: 0 auto;
    padding: clamp(18px, 2.3vw, 26px);
    border: 1px solid #e8ebf1;
    border-radius: 20px;
    background: #ffffff;
    color: #0D1B3D;
    box-shadow: 0 22px 70px rgba(13, 27, 61, 0.16);
    opacity: 0;
    transform: translateY(18px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookie-banner[hidden],
.cookie-modal[hidden] {
    display: none;
}

.cookie-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cookie-banner strong {
    display: block;
    margin-bottom: 8px;
    color: #0D1B3D;
    font-family: var(--serif);
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    line-height: 1;
}

.cookie-banner p {
    max-width: 720px;
    margin: 0;
    color: #506875;
    font-size: 0.94rem;
    line-height: 1.7;
}

.cookie-banner a {
    display: inline-flex;
    margin-top: 10px;
    color: #0D1B3D;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.cookie-actions,
.cookie-modal-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cookie-button {
    min-height: 46px;
    padding: 12px 18px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.cookie-button:hover,
.cookie-button:focus-visible {
    transform: translateY(-2px);
    outline: none;
    box-shadow: 0 14px 30px rgba(13, 27, 61, 0.13);
}

.cookie-button--accept {
    border: 1px solid #0D1B3D;
    background: #0D1B3D;
    color: #ffffff;
}

.cookie-button--accept:hover,
.cookie-button--accept:focus-visible {
    background: #0D1B3D;
    color: #ffffff;
}

.cookie-button--refuse {
    border: 1px solid #0D1B3D;
    background: #ffffff;
    color: #0D1B3D;
}

.cookie-button--refuse:hover,
.cookie-button--refuse:focus-visible {
    background: #FFFFFF;
    color: #0D1B3D;
}

.cookie-button--customize {
    border: 1px solid #e8ebf1;
    background: #f6f8fb;
    color: #0D1B3D;
}

.cookie-button--customize:hover,
.cookie-button--customize:focus-visible {
    background: #FFFFFF;
    color: #0D1B3D;
}

.cookie-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 22px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.cookie-modal.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.cookie-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 24, 35, 0.48);
    backdrop-filter: blur(8px);
}

.cookie-modal-panel {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    max-height: min(780px, calc(100vh - 44px));
    overflow: auto;
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid #e8ebf1;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 28px 90px rgba(13, 27, 61, 0.24);
    transform: scale(0.96) translateY(10px);
    transition: transform 0.28s ease;
}

.cookie-modal.is-visible .cookie-modal-panel {
    transform: scale(1) translateY(0);
}

.cookie-modal-panel:focus {
    outline: none;
}

.cookie-modal-panel:focus-visible {
    box-shadow: 0 28px 90px rgba(13, 27, 61, 0.24), 0 0 0 4px rgba(43, 125, 138, 0.18);
}

.cookie-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #e8ebf1;
    border-radius: 999px;
    background: #ffffff;
    color: #0D1B3D;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.cookie-modal-close:hover,
.cookie-modal-close:focus-visible {
    background: #FFFFFF;
    outline: none;
    transform: rotate(6deg);
}

.cookie-modal h2 {
    margin-bottom: 12px;
    color: #0D1B3D;
}

.cookie-modal p {
    color: #506875;
}

.cookie-preferences {
    display: grid;
    gap: 14px;
    margin: 26px 0;
}

.cookie-preference {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border: 1px solid #e8ebf1;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff, #FFFFFF);
}

.cookie-preference h3 {
    margin-bottom: 5px;
    color: #0D1B3D;
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.25;
}

.cookie-preference p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
}

.cookie-toggle {
    position: relative;
    display: inline-flex;
    width: 68px;
    height: 38px;
    align-items: center;
    cursor: pointer;
}

.cookie-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cookie-toggle span {
    position: relative;
    display: block;
    width: 68px;
    height: 38px;
    overflow: hidden;
    border: 1px solid #dce3ed;
    border-radius: 999px;
    background: #edf1f6;
    color: transparent;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.cookie-toggle span::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(13, 27, 61, 0.18);
    transition: transform 0.25s ease;
}

.cookie-toggle input:checked + span {
    border-color: #0D1B3D;
    background: #0D1B3D;
}

.cookie-toggle input:checked + span::after {
    transform: translateX(30px);
}

.cookie-toggle input:focus-visible + span {
    outline: 3px solid rgba(43, 125, 138, 0.25);
    outline-offset: 3px;
}

.cookie-toggle.is-disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

body.cookie-modal-open {
    overflow: hidden;
}

.cookie-policy-page {
    display: grid;
    gap: clamp(26px, 4vw, 44px);
}

.cookie-policy-intro,
.cookie-policy-table-wrap,
.cookie-policy-rights {
    padding: clamp(26px, 5vw, 58px);
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 20px 60px rgba(13, 27, 61, 0.08);
}

.cookie-policy-intro {
    background:
        radial-gradient(circle at top right, rgba(191, 216, 247, 0.34), transparent 34%),
        #ffffff;
}

.cookie-policy-intro p {
    max-width: 760px;
}

.cookie-policy-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.cookie-policy-grid article {
    min-height: 100%;
    padding: 22px;
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 38px rgba(13, 27, 61, 0.08);
}

.cookie-policy-grid h3 {
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.25;
}

.cookie-policy-grid p,
.cookie-policy-rights p {
    color: var(--muted);
}

.cookie-policy-grid small {
    display: block;
    margin-top: 14px;
    color: #0D1B3D;
    font-weight: 700;
}

.cookie-policy-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 18px;
    background: #ffffff;
}

.cookie-policy-table th,
.cookie-policy-table td {
    padding: 16px;
    border-bottom: 1px solid #e8ebf1;
    text-align: left;
    vertical-align: top;
}

.cookie-policy-table th {
    background: #FFFFFF;
    color: #0D1B3D;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cookie-policy-table td {
    color: var(--muted);
}

.cookie-policy-table td:first-child {
    color: #0D1B3D;
    font-weight: 700;
}

.account-premium {
    --account-bg: #FFFFFF;
    --account-ink: #0D1B3D;
    --account-muted: #6b7c8f;
    --account-line: #e8ebf1;
    width: 100%;
    overflow: hidden;
    background: var(--account-bg);
}

.account-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    gap: clamp(34px, 6vw, 86px);
    align-items: center;
    min-height: min(720px, calc(100vh - 120px));
    padding: clamp(56px, 8vw, 118px) clamp(22px, 6vw, 76px);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(237, 244, 252, 0.96)),
        repeating-linear-gradient(135deg, rgba(13, 27, 61, 0.025) 0 1px, transparent 1px 18px);
}

.account-hero::before,
.account-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0.5;
    filter: blur(0.2px);
}

.account-hero::before {
    top: 11%;
    right: 8%;
    width: 210px;
    height: 150px;
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 64% 36% 58% 42%;
    transform: rotate(-9deg);
}

.account-hero::after {
    bottom: 12%;
    left: 5%;
    width: 170px;
    height: 120px;
    border: 1px solid rgba(13, 27, 61, 0.06);
    border-radius: 42% 58% 36% 64%;
    transform: rotate(14deg);
}

.account-hero-copy,
.account-hero-visual {
    opacity: 0;
    transform: translateY(26px);
    animation: account-fade-up 0.78s ease forwards;
}

.account-login-card,
.account-benefit-card,
.account-stats-band {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.account-login-card.is-visible,
.account-benefit-card.is-visible,
.account-stats-band.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.account-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 620px;
}

.account-hero-copy h1 {
    margin-bottom: 18px;
    color: var(--account-ink);
    font-size: 7rem;
}

.account-hero-copy > p:not(.eyebrow) {
    max-width: 560px;
    margin: 0 0 30px;
    color: var(--account-muted);
    font-size: 1.14rem;
    line-height: 1.75;
}

.account-hero-actions {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    animation: account-fade-up 0.74s ease 0.18s both;
}

.account-hero-actions .button {
    min-width: 160px;
    justify-content: center;
    border-radius: 999px;
}

.account-hero-visual {
    position: relative;
    z-index: 1;
    min-height: clamp(380px, 44vw, 620px);
    animation-delay: 0.16s;
}

.account-orbit {
    position: absolute;
    inset: 10% 8%;
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 42% 58% 48% 52%;
    transform: rotate(-8deg);
}

.account-orbit--two {
    inset: 20% 20% 15% 4%;
    border-color: rgba(13, 27, 61, 0.05);
    transform: rotate(11deg);
}

.account-floating-product {
    position: absolute;
    width: clamp(132px, 15vw, 220px);
    margin: 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 24px 60px rgba(13, 27, 61, 0.12);
    backdrop-filter: blur(12px);
    animation: account-product-in 0.85s ease both, account-floating 7s ease-in-out infinite;
    transform-origin: center;
}

.account-floating-product img {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 22px;
    object-fit: cover;
    background: #FFFFFF;
}

.account-floating-product--1 {
    top: 3%;
    left: 20%;
    animation-delay: 0.2s, 1s;
}

.account-floating-product--2 {
    top: 17%;
    right: 8%;
    width: clamp(156px, 18vw, 250px);
    animation-delay: 0.32s, 0.2s;
}

.account-floating-product--3 {
    bottom: 10%;
    left: 8%;
    width: clamp(160px, 18vw, 260px);
    animation-delay: 0.42s, 0.7s;
}

.account-floating-product--4 {
    right: 18%;
    bottom: 2%;
    animation-delay: 0.52s, 1.4s;
}

.account-floating-product:hover {
    animation-play-state: running;
    box-shadow: 0 30px 74px rgba(13, 27, 61, 0.17);
}

.account-beauty-card {
    position: absolute;
    right: 4%;
    bottom: 18%;
    display: grid;
    gap: 4px;
    width: min(250px, 46%);
    padding: 18px;
    border: 1px solid rgba(232, 235, 241, 0.9);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 48px rgba(13, 27, 61, 0.13);
    animation: account-fade-up 0.72s ease 0.62s both;
}

.account-beauty-card span,
.account-login-heading span,
.account-benefit-card span {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid #e8ebf1;
    border-radius: 50%;
    background: #ffffff;
    color: var(--account-ink);
}

.account-beauty-card svg,
.account-login-heading svg,
.account-benefit-card svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-beauty-card strong {
    color: var(--account-ink);
    font-size: 1rem;
}

.account-beauty-card small {
    color: var(--account-muted);
    line-height: 1.4;
}

.account-access-section {
    display: grid;
    place-items: center;
    padding: clamp(42px, 7vw, 86px) clamp(20px, 5vw, 64px);
}

.account-login-card {
    width: min(1120px, 100%);
    padding: clamp(22px, 4vw, 42px);
    border: 1px solid var(--account-line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 26px 80px rgba(13, 27, 61, 0.1);
}

.account-login-heading {
    display: grid;
    justify-items: center;
    margin: 0 auto 28px;
    text-align: center;
}

.account-login-heading h2 {
    margin: 14px 0 8px;
    color: var(--account-ink);
    font-size: 3.6rem;
}

.account-login-heading p {
    margin: 0;
    color: var(--account-muted);
}

.account-woocommerce-wrap .woocommerce {
    max-width: 100%;
}

.account-woocommerce-wrap .woocommerce-notices-wrapper {
    max-width: 760px;
    margin: 0 auto 18px;
}

.account-woocommerce-wrap .u-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 520px));
    gap: 22px;
    justify-content: center;
}

.account-woocommerce-wrap .u-column1,
.account-woocommerce-wrap .u-column2,
.account-woocommerce-wrap .woocommerce-form,
.account-woocommerce-wrap .woocommerce-MyAccount-navigation,
.account-woocommerce-wrap .woocommerce-MyAccount-content {
    border: 1px solid var(--account-line);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(13, 27, 61, 0.08);
}

.account-woocommerce-wrap .u-column1,
.account-woocommerce-wrap .u-column2 {
    max-width: 520px;
    padding: clamp(20px, 3vw, 30px);
}

.account-woocommerce-wrap .u-column1 h2,
.account-woocommerce-wrap .u-column2 h2,
.account-woocommerce-wrap .woocommerce-MyAccount-content h2,
.account-woocommerce-wrap .woocommerce-MyAccount-content h3 {
    color: var(--account-ink);
    font-size: 2.15rem;
}

.account-woocommerce-wrap .woocommerce-form {
    padding: 0;
    border: 0;
    box-shadow: none;
}

.account-woocommerce-wrap .form-row {
    margin: 0 0 16px;
}

.account-woocommerce-wrap label {
    color: var(--account-ink);
    font-weight: 700;
}

.account-woocommerce-wrap .woocommerce-Input,
.account-woocommerce-wrap input.input-text,
.account-woocommerce-wrap input[type="text"],
.account-woocommerce-wrap input[type="email"],
.account-woocommerce-wrap input[type="password"],
.account-woocommerce-wrap input[type="tel"],
.account-woocommerce-wrap select,
.account-woocommerce-wrap textarea {
    width: 100%;
    min-height: 54px;
    padding: 0 18px 0 48px;
    border: 1px solid var(--account-line);
    border-radius: 999px;
    background-color: #FFFFFF;
    color: var(--account-ink);
    font-family: var(--sans);
    font-size: 0.98rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.account-woocommerce-wrap textarea {
    min-height: 120px;
    padding-top: 16px;
    border-radius: 24px;
}

.account-woocommerce-wrap input[type="text"],
.account-woocommerce-wrap input[type="email"] {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%230D1B3D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 18px center;
    background-size: 18px;
}

.account-woocommerce-wrap input[type="password"] {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%230D1B3D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 18px center;
    background-size: 18px;
}

.account-woocommerce-wrap input:focus,
.account-woocommerce-wrap select:focus,
.account-woocommerce-wrap textarea:focus {
    border-color: #0D1B3D;
    outline: none;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(13, 27, 61, 0.08), 0 12px 30px rgba(13, 27, 61, 0.08);
}

.account-woocommerce-wrap .woocommerce-button,
.account-woocommerce-wrap button.button,
.account-woocommerce-wrap a.button {
    min-height: 50px;
    padding: 13px 24px;
    border: 1px solid #0D1B3D;
    border-radius: 999px;
    background: #0D1B3D;
    color: #ffffff;
    font-weight: 700;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.account-woocommerce-wrap .woocommerce-button:hover,
.account-woocommerce-wrap button.button:hover,
.account-woocommerce-wrap a.button:hover,
.account-woocommerce-wrap .woocommerce-button:focus-visible,
.account-woocommerce-wrap button.button:focus-visible,
.account-woocommerce-wrap a.button:focus-visible {
    background: #0D1B3D;
    color: #ffffff;
    outline: none;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 16px 34px rgba(13, 27, 61, 0.18);
}

.account-woocommerce-wrap .woocommerce-LostPassword a,
.account-woocommerce-wrap a {
    color: #0D1B3D;
    font-weight: 700;
}

.account-woocommerce-wrap .woocommerce-form-login__rememberme {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 14px;
}

.account-woocommerce-wrap .woocommerce-MyAccount-navigation {
    float: none;
    width: 100%;
    margin: 0 0 22px;
    padding: 18px;
}

.account-woocommerce-wrap .woocommerce-MyAccount-navigation ul {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-woocommerce-wrap .woocommerce-MyAccount-navigation a {
    display: inline-flex;
    padding: 10px 14px;
    border: 1px solid var(--account-line);
    border-radius: 999px;
    background: #FFFFFF;
}

.account-woocommerce-wrap .woocommerce-MyAccount-navigation .is-active a,
.account-woocommerce-wrap .woocommerce-MyAccount-navigation a:hover {
    background: #0D1B3D;
    color: #ffffff;
}

.account-woocommerce-wrap .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
    padding: clamp(20px, 4vw, 34px);
}

.account-benefits-section {
    padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 64px);
}

.account-benefits-section .section-heading {
    max-width: 760px;
    margin: 0 auto 28px;
    text-align: center;
}

.account-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.account-benefit-card {
    min-height: 230px;
    padding: 24px;
    border: 1px solid var(--account-line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 44px rgba(13, 27, 61, 0.08);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.account-benefit-card:nth-child(2) {
    transition-delay: 0.08s;
}

.account-benefit-card:nth-child(3) {
    transition-delay: 0.16s;
}

.account-benefit-card:nth-child(4) {
    transition-delay: 0.24s;
}

.account-benefit-card:hover {
    border-color: rgba(13, 27, 61, 0.18);
    box-shadow: 0 24px 64px rgba(13, 27, 61, 0.13);
    transform: translateY(-8px);
}

.account-benefit-card:hover span {
    transform: translateY(-3px) rotate(-4deg);
}

.account-benefit-card span {
    margin-bottom: 20px;
    transition: transform 0.28s ease;
}

.account-benefit-card h3 {
    margin-bottom: 10px;
    color: var(--account-ink);
    font-family: var(--sans);
    font-size: 1.05rem;
}

.account-benefit-card p {
    margin: 0;
    color: var(--account-muted);
}

.account-stats-band {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto clamp(42px, 7vw, 86px);
    overflow: hidden;
    border: 1px solid var(--account-line);
    border-radius: 24px;
    background: var(--account-line);
    box-shadow: 0 20px 60px rgba(13, 27, 61, 0.08);
}

.account-stats-band div {
    display: grid;
    gap: 6px;
    place-items: center;
    min-height: 136px;
    padding: 20px;
    background: #ffffff;
    text-align: center;
}

.account-stats-band strong {
    color: var(--account-ink);
    font-family: var(--serif);
    font-size: 3.2rem;
    line-height: 1;
}

.account-stats-band em {
    font-style: normal;
}

.account-stats-band span {
    color: var(--account-muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.account-tracking-page {
    display: grid;
    gap: 24px;
}

.account-tracking-header {
    padding: clamp(22px, 4vw, 36px);
    border: 1px solid var(--account-line);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(191, 216, 247, 0.28), transparent 36%),
        #ffffff;
    box-shadow: 0 18px 48px rgba(13, 27, 61, 0.08);
}

.account-tracking-header h2 {
    margin-bottom: 10px;
    color: var(--account-ink);
    font-size: 2.6rem;
}

.account-tracking-header p:not(.eyebrow) {
    max-width: 620px;
    margin: 0;
    color: var(--account-muted);
}

.account-tracking-list {
    display: grid;
    gap: 20px;
}

.account-tracking-card {
    display: grid;
    gap: 22px;
    padding: clamp(20px, 4vw, 32px);
    border: 1px solid var(--account-line);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(13, 27, 61, 0.08);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.account-tracking-card:hover {
    border-color: rgba(13, 27, 61, 0.18);
    box-shadow: 0 24px 64px rgba(13, 27, 61, 0.13);
    transform: translateY(-4px);
}

.account-tracking-card-head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
}

.account-tracking-card-head span,
.account-tracking-meta small {
    display: block;
    color: var(--account-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-tracking-card-head strong {
    display: block;
    margin-top: 4px;
    color: var(--account-ink);
    font-family: var(--serif);
    font-size: 1.8rem;
    line-height: 1;
}

.account-tracking-card-head mark {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 8px 13px;
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--account-ink);
    font-weight: 700;
}

.account-tracking-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.account-tracking-meta > div {
    min-height: 112px;
    padding: 16px;
    border: 1px solid var(--account-line);
    border-radius: 18px;
    background: #FFFFFF;
}

.account-tracking-meta p {
    margin: 8px 0 0;
    color: var(--account-ink);
    font-weight: 700;
    line-height: 1.55;
}

.account-tracking-timeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.account-tracking-timeline li {
    position: relative;
    display: grid;
    gap: 10px;
    justify-items: center;
    color: var(--account-muted);
    text-align: center;
}

.account-tracking-timeline li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 18px;
    left: calc(50% + 18px);
    width: calc(100% - 36px);
    height: 2px;
    background: #e8ebf1;
}

.account-tracking-timeline li.is-complete:not(:last-child)::after {
    background: #0D1B3D;
}

.account-tracking-timeline li > span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid #e8ebf1;
    border-radius: 999px;
    background: #ffffff;
    color: #0D1B3D;
    box-shadow: 0 8px 20px rgba(13, 27, 61, 0.08);
}

.account-tracking-timeline li > span::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #c9d3df;
}

.account-tracking-timeline li.is-complete > span {
    border-color: #0D1B3D;
    background: #0D1B3D;
    color: #ffffff;
}

.account-tracking-timeline li.is-complete > span::before {
    display: none;
}

.account-tracking-timeline svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-tracking-timeline li.is-active > span {
    animation: tracking-pulse 1.6s ease-in-out infinite;
}

.account-tracking-timeline strong {
    max-width: 120px;
    font-size: 0.85rem;
    line-height: 1.35;
}

.account-tracking-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.account-tracking-actions .button {
    border-radius: 999px;
}

.account-tracking-empty {
    display: grid;
    justify-items: center;
    gap: 16px;
    padding: clamp(34px, 7vw, 72px);
    border: 1px solid var(--account-line);
    border-radius: 24px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 18px 48px rgba(13, 27, 61, 0.08);
}

.account-tracking-empty-visual {
    display: grid;
    place-items: center;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFFFFF, #ffffff);
    color: var(--account-ink);
}

.account-tracking-empty-visual svg {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-tracking-empty h3 {
    margin: 0;
    color: var(--account-ink);
    font-size: 2rem;
}

@keyframes tracking-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(13, 27, 61, 0.24);
    }
    50% {
        box-shadow: 0 0 0 9px rgba(13, 27, 61, 0);
    }
}

@keyframes account-fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes account-product-in {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.94) rotate(-4deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes account-floating {
    0%,
    100% {
        translate: 0 0;
        rotate: -1deg;
    }
    50% {
        translate: 0 -14px;
        rotate: 1.4deg;
    }
}

@media (max-width: 1180px) {
    .account-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .account-hero-copy {
        max-width: 760px;
        text-align: center;
        justify-self: center;
    }

    .account-hero-copy h1 {
        font-size: 5.6rem;
    }

    .account-hero-copy > p:not(.eyebrow) {
        margin-right: auto;
        margin-left: auto;
    }

    .account-hero-actions {
        justify-content: center;
    }

    .account-hero-visual {
        width: min(760px, 100%);
        justify-self: center;
    }

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

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

    .cart-premium-layout,
    .cart-premium-hero,
    .cart-empty-premium {
        grid-template-columns: 1fr;
    }

    .cart-summary-card {
        position: static;
    }

    .cart-product-card {
        grid-template-columns: 120px minmax(0, 1fr) minmax(140px, 0.65fr);
    }

    .cart-product-quantity,
    .cart-product-subtotal,
    .cart-product-remove {
        grid-column: auto;
    }

    .cart-benefits-grid,
    .cart-recommendations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .account-hero {
        padding: 44px 18px 34px;
    }

    .account-hero-copy h1 {
        font-size: 3.8rem;
    }

    .account-hero-copy > p:not(.eyebrow) {
        font-size: 1rem;
    }

    .account-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .account-hero-actions .button {
        width: 100%;
    }

    .account-hero-visual {
        min-height: 430px;
    }

    .account-floating-product {
        width: 138px;
        border-radius: 20px;
    }

    .account-floating-product img {
        border-radius: 16px;
    }

    .account-floating-product--1 {
        top: 2%;
        left: 6%;
    }

    .account-floating-product--2 {
        top: 8%;
        right: 4%;
        width: 158px;
    }

    .account-floating-product--3 {
        bottom: 8%;
        left: 2%;
        width: 160px;
    }

    .account-floating-product--4 {
        right: 5%;
        bottom: 0;
        width: 136px;
    }

    .account-beauty-card {
        right: 50%;
        bottom: 34%;
        width: min(230px, 82%);
        transform: translateX(50%);
    }

    .account-access-section {
        padding: 34px 16px;
    }

    .account-login-card {
        padding: 18px;
        border-radius: 20px;
    }

    .account-login-heading h2 {
        font-size: 2.7rem;
    }

    .account-woocommerce-wrap .u-columns {
        grid-template-columns: 1fr;
    }

    .account-woocommerce-wrap .u-column1,
    .account-woocommerce-wrap .u-column2 {
        max-width: none;
    }

    .account-woocommerce-wrap .woocommerce-MyAccount-navigation ul {
        display: grid;
        grid-template-columns: 1fr;
    }

    .account-tracking-header h2 {
        font-size: 2.15rem;
    }

    .account-tracking-card-head {
        display: grid;
    }

    .account-tracking-meta {
        grid-template-columns: 1fr;
    }

    .account-tracking-timeline {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .account-tracking-timeline li {
        grid-template-columns: 38px 1fr;
        justify-items: start;
        text-align: left;
    }

    .account-tracking-timeline li:not(:last-child)::after {
        top: 42px;
        left: 18px;
        width: 2px;
        height: calc(100% - 20px);
    }

    .account-tracking-timeline strong {
        max-width: none;
        align-self: center;
    }

    .account-tracking-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .account-tracking-actions .button {
        width: 100%;
        justify-content: center;
    }

    .account-benefits-grid,
    .account-stats-band {
        grid-template-columns: 1fr;
    }

    .account-benefit-card {
        min-height: 0;
    }

    .account-stats-band strong {
        font-size: 2.7rem;
    }
}

.shop-redesign {
    --shop-bg: #FFFFFF;
    --shop-card: #ffffff;
    --shop-title: #0D1B3D;
    --shop-text: #6b7c8f;
    --shop-beige: #FFFFFF;
    --shop-border: #e7ecf5;
    background: var(--shop-bg);
    color: var(--shop-title);
    padding-bottom: clamp(34px, 6vw, 72px);
}

.shop-redesign .button-primary,
.shop-redesign .woocommerce a.button,
.shop-redesign .woocommerce button.button {
    border-color: #0D1B3D;
    background: #0D1B3D;
    color: #ffffff;
}

.shop-redesign .button-primary:hover,
.shop-redesign .button-primary:focus-visible {
    border-color: #0D1B3D;
    background: #0D1B3D;
    color: #ffffff;
}

.shop-hero-premium,
.shop-premium-block,
.shop-promo-section,
.shop-packs-section {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
}

.shop-hero-premium {
    display: grid;
    grid-template-columns: minmax(320px, 0.4fr) minmax(0, 0.6fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    padding: clamp(52px, 8vw, 96px) 0 clamp(34px, 6vw, 70px);
}

.shop-hero-content {
    display: grid;
    gap: 20px;
    align-content: center;
    animation: shop-hero-copy-in 0.7s ease both;
}

.shop-hero-premium h1 {
    margin: 0;
    color: var(--shop-title);
    font-size: clamp(4.2rem, 8vw, 7.8rem);
    line-height: 0.95;
}

.shop-hero-premium p:not(.shop-label) {
    width: min(470px, 100%);
    margin: 0;
    color: var(--shop-text);
    font-size: 1.08rem;
}

.shop-hero-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
}

.shop-button-secondary {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 1px solid var(--shop-border);
    border-radius: 999px;
    background: #ffffff;
    color: var(--shop-title);
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(15, 49, 72, 0.05);
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.shop-button-secondary:hover,
.shop-button-secondary:focus-visible {
    border-color: #d8dfeb;
    background: var(--shop-beige);
    color: var(--shop-title);
    outline: none;
    transform: translateY(-2px);
}

.shop-hero-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 14px;
    margin-top: 8px;
}

.shop-hero-benefits span {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: var(--shop-text);
    font-size: 0.88rem;
    font-weight: 700;
}

.shop-hero-benefits svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--shop-title);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
}

.shop-hero-slider-card {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--shop-border);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(15, 49, 72, 0.09);
    animation: shop-hero-slider-in 0.72s 0.08s ease both;
}

.shop-hero-slides {
    position: relative;
    min-height: clamp(430px, 46vw, 620px);
    overflow: hidden;
}

.shop-hero-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: scale(1.035);
    transition: opacity 0.65s ease, transform 0.75s ease;
}

.shop-hero-slide.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}

.shop-hero-slide img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: clamp(430px, 46vw, 620px);
    object-fit: cover;
}

.shop-hero-slide figcaption {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    display: grid;
    gap: 5px;
    max-width: min(360px, calc(100% - 48px));
    padding: 16px 18px;
    border: 1px solid rgba(231, 236, 245, 0.88);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 16px 38px rgba(15, 49, 72, 0.1);
    backdrop-filter: blur(12px);
}

.shop-hero-slide figcaption span {
    color: var(--shop-text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.shop-hero-slide figcaption strong {
    color: var(--shop-title);
    font-family: var(--serif);
    font-size: clamp(1.18rem, 2vw, 1.65rem);
    line-height: 1.05;
}

.shop-hero-arrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--shop-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--shop-title);
    cursor: pointer;
    box-shadow: 0 12px 32px rgba(15, 49, 72, 0.08);
    transform: translateY(-50%);
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.shop-hero-arrow:hover,
.shop-hero-arrow:focus-visible {
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 49, 72, 0.13);
    outline: none;
    transform: translateY(-50%) scale(1.06);
}

.shop-hero-arrow svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.1;
}

.shop-hero-prev {
    left: 18px;
}

.shop-hero-next {
    right: 18px;
}

.shop-hero-pagination {
    position: absolute;
    z-index: 5;
    bottom: 18px;
    left: 50%;
    display: inline-flex;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(231, 236, 245, 0.86);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 10px 28px rgba(15, 49, 72, 0.08);
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
}

.shop-hero-pagination button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d8dfeb;
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}

.shop-hero-pagination button[aria-current="true"] {
    width: 28px;
    background: var(--shop-title);
}

.shop-floating-card {
    position: absolute;
    z-index: 6;
    display: grid;
    gap: 2px;
    min-width: 132px;
    padding: 14px 16px;
    border: 1px solid var(--shop-border);
    border-radius: 18px;
    background: #ffffff;
    color: var(--shop-title);
    box-shadow: 0 18px 42px rgba(15, 49, 72, 0.12);
    animation: shop-floating-in 0.65s ease both;
}

.shop-floating-card strong {
    color: var(--shop-title);
    font-size: 1.15rem;
}

.shop-floating-card em {
    color: var(--shop-text);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 700;
}

.shop-floating-card span {
    color: var(--shop-title);
    font-size: 0.88rem;
    letter-spacing: 1px;
}

.shop-floating-card svg {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    fill: none;
    stroke: var(--shop-title);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
}

.shop-floating-review {
    bottom: 52px;
    left: 24px;
    animation-delay: 0.34s;
}

.shop-floating-delivery {
    top: 26px;
    right: 26px;
    animation-delay: 0.48s;
}

.shop-floating-natural {
    top: 174px;
    right: 34px;
    min-width: 108px;
    animation-delay: 0.62s;
}

.shop-anchor {
    height: 1px;
    scroll-margin-top: 120px;
}

@keyframes shop-hero-copy-in {
    from {
        opacity: 0;
        transform: translateX(-28px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes shop-hero-slider-in {
    from {
        opacity: 0;
        transform: scale(0.965);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shop-floating-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.shop-premium-block {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
    gap: 0;
    align-items: stretch;
    margin-top: 28px;
}

.shop-premium-block,
.shop-promo-section,
.shop-packs-section,
.shop-product-card,
.shop-pack-card {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.62s ease var(--reveal-delay, 0ms), transform 0.62s ease var(--reveal-delay, 0ms), box-shadow 0.32s ease, border-color 0.32s ease;
}

.shop-premium-block.is-visible,
.shop-promo-section.is-visible,
.shop-packs-section.is-visible,
.shop-product-card.is-visible,
.shop-pack-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.shop-lifestyle-photo {
    position: relative;
    z-index: 2;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--shop-border);
    border-radius: 28px;
    background: var(--shop-beige);
    box-shadow: 0 18px 54px rgba(15, 49, 72, 0.08);
}

.shop-lifestyle-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.shop-premium-block:hover .shop-lifestyle-photo img {
    transform: scale(1.035);
}

.shop-section-panel {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1fr);
    gap: clamp(18px, 3vw, 34px);
    align-items: center;
    margin: 24px 0 24px -34px;
    padding: clamp(22px, 4vw, 42px) clamp(20px, 4vw, 48px) clamp(22px, 4vw, 42px) clamp(44px, 6vw, 72px);
    border: 1px solid var(--shop-border);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 24px 70px rgba(15, 49, 72, 0.07);
    backdrop-filter: blur(16px);
    min-width: 0;
}

.shop-info-card {
    display: grid;
    gap: 13px;
    min-width: 0;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--shop-border);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 49, 72, 0.05);
}

.shop-icon-badge {
    display: inline-grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 1px solid var(--shop-border);
    border-radius: 999px;
    background: #ffffff;
    color: var(--shop-title);
    box-shadow: 0 12px 32px rgba(15, 49, 72, 0.07);
}

.shop-icon-badge svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.45;
}

.shop-label {
    margin: 0;
    color: var(--shop-title);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.shop-info-card h2,
.shop-promo-intro h2,
.shop-packs-header h2 {
    margin: 0;
    color: var(--shop-title);
    font-size: clamp(2rem, 3.5vw, 3.6rem);
    line-height: 1;
}

.shop-block-soins-du-visage .shop-info-card h2 {
    max-width: 270px;
    font-size: clamp(1.88rem, 3vw, 2.85rem);
    line-height: 1.04;
    text-wrap: balance;
}

.shop-block-soins-du-visage .shop-info-card {
    overflow: hidden;
}

.shop-block-soins-du-corps .shop-info-card h2 {
    max-width: 310px;
    text-wrap: balance;
}

.shop-block-soins-cheveux .shop-info-card h2 {
    max-width: 330px;
    text-wrap: balance;
}

.shop-block-accessoires-beaute .shop-info-card h2 {
    max-width: 100%;
    font-size: clamp(38px, 3vw, 48px);
    line-height: 1.05;
    overflow-wrap: break-word;
    text-wrap: balance;
    word-break: normal;
}

.shop-info-card p:not(.shop-label),
.shop-promo-intro p:not(.shop-label),
.shop-pack-card p {
    color: var(--shop-text);
    font-size: 0.96rem;
}

.shop-picto-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 6px;
}

.shop-picto {
    display: grid;
    justify-items: center;
    gap: 5px;
    color: var(--shop-title);
    text-align: center;
}

.shop-picto svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.55;
}

.shop-picto em {
    color: var(--shop-text);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 700;
}

.shop-products-slider {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(168px, 1fr);
    align-items: stretch;
    gap: 16px;
    overflow-x: auto;
    padding: 8px 4px 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.shop-product-card {
    position: relative;
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--shop-border);
    border-radius: 24px;
    background: var(--shop-card);
    box-shadow: 0 14px 34px rgba(15, 49, 72, 0.06);
    scroll-snap-align: start;
    transition: opacity 0.45s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    height: 100%;
}

.shop-product-card:hover,
.shop-product-card:focus-within {
    border-color: #d8dfeb;
    box-shadow: 0 22px 48px rgba(15, 49, 72, 0.11);
    transform: translateY(-4px);
}

.shop-product-card a:first-of-type {
    display: grid;
    gap: 10px;
    color: var(--shop-title);
}

.shop-product-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1.08;
    border-radius: 18px;
    background: var(--shop-beige);
    object-fit: cover;
    transition: transform 0.35s ease;
}

.shop-product-card:hover img {
    transform: scale(1.035);
}

.shop-product-card img.cosmethique-product-fallback-img,
.woocommerce img.cosmethique-product-fallback-img,
.cosmethique-cart-thumb.cosmethique-product-fallback-img {
    padding: clamp(18px, 7%, 34px);
    background: linear-gradient(135deg, #ffffff 0%, #FFFFFF 58%, #FFFFFF 100%);
    object-fit: contain;
}

.shop-product-card strong {
    color: var(--shop-title);
    font-family: var(--serif);
    font-size: 1.05rem;
    line-height: 1.08;
    min-height: 2.25em;
}

.shop-product-card p {
    margin: 0;
    color: var(--shop-text);
    font-size: 0.82rem;
    line-height: 1.45;
    min-height: 3.6em;
}

.shop-product-price {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
    color: var(--shop-title);
    font-weight: 700;
}

.shop-product-price del {
    color: var(--shop-text);
    font-weight: 600;
}

.shop-product-price ins {
    color: var(--shop-title);
    text-decoration: none;
}

.shop-product-discount {
    position: absolute;
    z-index: 2;
    top: 18px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 999px;
    background: #0D1B3D;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 700;
}

.visage-category-page {
    background: #FFFFFF;
    color: #0D1B3D;
    padding-bottom: clamp(42px, 7vw, 84px);
}

.visage-category-page .button-primary {
    border-color: #0D1B3D;
    background: #0D1B3D;
    color: #ffffff;
}

.visage-category-page .button-primary:hover,
.visage-category-page .button-primary:focus-visible {
    border-color: #0D1B3D;
    background: #0D1B3D;
    color: #ffffff;
}

.visage-category-hero,
.visage-collection,
.visage-routine-note {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
}

.visage-category-hero {
    display: grid;
    grid-template-columns: minmax(300px, 0.42fr) minmax(0, 0.58fr);
    gap: clamp(28px, 5vw, 70px);
    align-items: center;
    padding: clamp(54px, 8vw, 96px) 0 clamp(36px, 6vw, 72px);
}

.visage-category-copy {
    display: grid;
    gap: 18px;
    animation: shop-hero-copy-in 0.7s ease both;
}

.visage-category-copy h1 {
    margin: 0;
    color: #0D1B3D;
    font-size: clamp(3.2rem, 7vw, 6.7rem);
    line-height: 0.95;
}

.visage-category-copy p:not(.shop-label) {
    max-width: 500px;
    margin: 0;
    color: #6b7c8f;
    font-size: 1.05rem;
    line-height: 1.7;
}

.visage-category-copy .button {
    width: fit-content;
}

.visage-category-hero figure {
    margin: 0;
    overflow: hidden;
    border: 1px solid #e7ecf5;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(15, 48, 72, 0.09);
    animation: shop-hero-slider-in 0.72s 0.08s ease both;
}

.visage-category-hero img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.visage-collection {
    padding: clamp(24px, 4vw, 44px);
    border: 1px solid #e7ecf5;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 20px 60px rgba(15, 48, 72, 0.06);
}

.visage-collection-heading {
    display: grid;
    gap: 8px;
    margin-bottom: 24px;
}

.visage-collection-heading h2,
.visage-routine-note h2 {
    margin: 0;
    color: #0D1B3D;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1;
}

.visage-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.visage-product-grid .shop-product-card {
    opacity: 1;
    transform: none;
}

.visage-product-grid .shop-product-card img {
    aspect-ratio: 1 / 1.08;
    object-fit: cover;
}

.visage-routine-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 28px;
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid #e7ecf5;
    border-radius: 28px;
    background: #FFFFFF;
}

.shop-promo-section,
.shop-packs-section {
    margin-top: 34px;
    padding: clamp(22px, 4vw, 42px);
    border: 1px solid var(--shop-border);
    border-radius: 30px;
    background: var(--shop-beige);
    box-shadow: 0 20px 60px rgba(15, 49, 72, 0.07);
}

.shop-promo-section {
    display: grid;
    grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 42px);
    align-items: center;
}

.shop-promo-intro {
    display: grid;
    gap: 14px;
}

.shop-countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 4px;
}

.shop-countdown span {
    display: grid;
    place-items: center;
    min-height: 64px;
    border: 1px solid var(--shop-border);
    border-radius: 16px;
    background: #ffffff;
    color: var(--shop-text);
    font-size: 0.7rem;
    font-weight: 700;
}

.shop-countdown strong {
    color: var(--shop-title);
    font-size: 1.15rem;
}

.shop-offer-card .button {
    min-height: 40px;
    margin-top: 4px;
    padding: 9px 14px;
    font-size: 0.8rem;
}

.shop-packs-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.shop-pack-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.shop-pack-card {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--shop-border);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(15, 49, 72, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.shop-pack-card:hover {
    box-shadow: 0 24px 54px rgba(15, 49, 72, 0.11);
    transform: translateY(-4px);
}

.shop-pack-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    background: var(--shop-beige);
    object-fit: cover;
}

.shop-pack-card div {
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: 10px;
    padding: 20px;
}

.shop-pack-card h3 {
    margin: 0;
    color: var(--shop-title);
    font-size: clamp(1.24rem, 1.7vw, 1.45rem);
    line-height: 1.08;
    overflow-wrap: break-word;
    word-break: normal;
}

.shop-pack-card p {
    margin: 0;
    color: var(--shop-text);
    font-size: 0.9rem;
    line-height: 1.55;
    overflow-wrap: break-word;
    word-break: normal;
}

.shop-pack-card span {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: baseline;
    color: var(--shop-title);
    font-weight: 700;
}

.shop-pack-card del {
    color: var(--shop-text);
    font-size: 0.92rem;
    font-weight: 600;
}

.shop-pack-price strong,
.shop-pack-price ins {
    color: var(--shop-title);
    font-weight: 700;
    text-decoration: none;
}

.shop-pack-card .button {
    align-self: end;
    justify-self: stretch;
    min-height: 42px;
    padding: 10px 16px;
    text-align: center;
}

.packs-category-page .visage-category-hero,
.packs-category-page .visage-collection,
.packs-category-page .visage-routine-note {
    border-color: #e7ecf5;
}

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

.woocommerce .woocommerce-breadcrumb,
.woocommerce-result-count,
.woocommerce-ordering {
    margin-bottom: 26px;
}

.woocommerce-result-count {
    display: none;
}

.cosmethique-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin: 0 0 28px;
}

.cosmethique-product-count {
    margin: 0;
    color: rgba(18, 52, 74, 0.68);
    font-size: 0.92rem;
    font-weight: 600;
}

.woocommerce .cosmethique-ordering,
.woocommerce-page .cosmethique-ordering {
    float: none;
    position: relative;
    margin: 0;
}

.cosmethique-sort {
    position: relative;
    min-width: 256px;
}

.cosmethique-sort-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    min-height: 52px;
    padding: 0 18px;
    border: 1px solid rgba(18, 52, 74, 0.11);
    border-radius: 18px;
    background: #ffffff;
    color: #0D1B3D;
    box-shadow: 0 12px 34px rgba(18, 52, 74, 0.08);
    cursor: pointer;
    font: inherit;
    font-size: 0.94rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.cosmethique-sort-toggle:hover,
.cosmethique-sort-toggle:focus-visible {
    border-color: rgba(43, 125, 138, 0.28);
    background: #FFFFFF;
    box-shadow: 0 16px 42px rgba(18, 52, 74, 0.12);
    outline: none;
}

.cosmethique-sort-toggle strong {
    font-weight: 700;
}

.cosmethique-sort-chevron {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform 0.3s ease;
}

.cosmethique-ordering.is-open .cosmethique-sort-chevron {
    transform: rotate(180deg);
}

.cosmethique-sort-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 10px);
    right: 0;
    width: min(310px, calc(100vw - 40px));
    padding: 8px;
    border: 1px solid rgba(18, 52, 74, 0.1);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 24px 56px rgba(18, 52, 74, 0.14);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cosmethique-ordering.is-open .cosmethique-sort-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.cosmethique-sort-option {
    display: grid;
    grid-template-columns: 28px 1fr 22px;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding: 12px 13px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #0D1B3D;
    cursor: pointer;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.cosmethique-sort-option:hover,
.cosmethique-sort-option:focus-visible {
    background: #FFFFFF;
    outline: none;
}

.cosmethique-sort-option.is-selected {
    background: rgba(237, 244, 252, 0.88);
    color: #2B7D8A;
}

.cosmethique-sort-option.is-selected .cosmethique-sort-check {
    opacity: 1;
    transform: scale(1);
}

.cosmethique-sort-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(237, 244, 252, 0.86);
    color: #2B7D8A;
}

.cosmethique-sort-option-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.cosmethique-sort-check {
    color: #2B7D8A;
    font-size: 1rem;
    font-weight: 700;
    opacity: 0;
    text-align: center;
    transform: scale(0.72);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.woocommerce ul.products {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

body.cosmethique-sorting .woocommerce ul.products {
    opacity: 0.46;
    transform: translateY(5px);
}

.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    position: relative;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--ivory);
}

.woocommerce ul.products li.product a img {
    width: 100%;
    aspect-ratio: 3 / 4;
    margin: 0;
    object-fit: cover;
    background: var(--beige);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button {
    margin-left: 20px;
    margin-right: 20px;
}

.woocommerce ul.products li.product .button {
    margin-bottom: 22px;
}

.woocommerce span.onsale {
    min-height: auto;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--gold);
}

.woocommerce div.product {
    --product-font: Futura, "Futura PT", "DM Sans", Inter, system-ui, sans-serif;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: clamp(22px, 5vw, 48px);
    font-family: var(--product-font);
}

.cosmethique-product-gallery {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 36px;
}

.cosmethique-gallery-main,
.cosmethique-gallery-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: var(--beige);
}

.cosmethique-gallery-main {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    cursor: zoom-in;
}

.cosmethique-gallery-main img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cosmethique-gallery-main:hover img,
.cosmethique-gallery-main:focus-visible img {
    transform: scale(1.035);
}

.cosmethique-gallery-main.is-changing img {
    opacity: 0;
}

.cosmethique-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.cosmethique-gallery-thumb {
    width: 100%;
    padding: 0;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.cosmethique-gallery-thumb:hover,
.cosmethique-gallery-thumb:focus-visible {
    border-color: rgba(18, 52, 74, 0.32);
    box-shadow: 0 12px 28px rgba(18, 52, 74, 0.12);
    outline: none;
    transform: translateY(-2px);
}

.cosmethique-gallery-thumb.is-active {
    border-color: #0D1B3D;
}

.cosmethique-gallery-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.cosmethique-gallery-thumb:hover img,
.cosmethique-gallery-thumb:focus-visible img {
    transform: scale(1.04);
}

.cosmethique-gallery-lightbox {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: none;
    place-items: center;
    padding: 28px;
    background: rgba(13, 27, 61, 0.76);
    backdrop-filter: blur(14px);
}

.cosmethique-gallery-lightbox.is-visible {
    display: grid;
}

.cosmethique-lightbox-image {
    max-width: min(92vw, 980px);
    max-height: 86vh;
    border-radius: 16px;
    background: var(--ivory);
    object-fit: contain;
    box-shadow: 0 28px 80px rgba(13, 27, 61, 0.3);
}

.cosmethique-lightbox-close,
.cosmethique-lightbox-nav {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #0D1B3D;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease;
}

.cosmethique-lightbox-close:hover,
.cosmethique-lightbox-close:focus-visible,
.cosmethique-lightbox-nav:hover,
.cosmethique-lightbox-nav:focus-visible {
    background: #ffffff;
    outline: none;
    transform: scale(1.06);
}

.cosmethique-lightbox-close {
    top: 22px;
    right: 22px;
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
    line-height: 1;
}

.cosmethique-lightbox-nav {
    top: 50%;
    width: 48px;
    height: 48px;
    font-size: 1.8rem;
    transform: translateY(-50%);
}

.cosmethique-lightbox-nav:hover,
.cosmethique-lightbox-nav:focus-visible {
    transform: translateY(-50%) scale(1.06);
}

.cosmethique-lightbox-prev {
    left: 22px;
}

.cosmethique-lightbox-next {
    right: 22px;
}

.woocommerce div.product .product_title {
    max-width: 100%;
    margin-bottom: 12px;
    color: #0D1B3D;
    font-family: var(--product-font);
    font-size: clamp(2rem, 3.5vw, 3.9rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.05;
    overflow-wrap: anywhere;
    text-wrap: balance;
    word-break: normal;
    hyphens: auto;
}

.product-premium-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: #5f7280;
    font-size: 0.92rem;
    font-weight: 700;
}

.product-premium-rating .stars {
    color: #2B7D8A;
    letter-spacing: 0.08em;
}

.product-premium-rating strong {
    color: #0D1B3D;
    font-weight: 700;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--sage-dark);
    font-size: 1.35rem;
    font-weight: 700;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    max-width: 620px;
    color: #536b78;
    font-size: 1.03rem;
    line-height: 1.75;
}

.product-benefit-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0;
}

.product-benefit-cards span {
    display: flex;
    min-height: 66px;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid #E8EBF1;
    border-radius: 18px;
    background: #ffffff;
    color: #0D1B3D;
    font-size: 0.88rem;
    font-weight: 850;
    box-shadow: 0 12px 28px rgba(13, 27, 61, 0.05);
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.product-benefit-cards span:hover {
    transform: translateY(-4px);
    border-color: rgba(43, 125, 138, 0.34);
    box-shadow: 0 18px 42px rgba(13, 27, 61, 0.1);
}

.product-benefit-cards i {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #E8EBF1;
    color: #0D1B3D;
    font-style: normal;
    font-size: 0.74rem;
    font-weight: 700;
}

.woocommerce div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 24px 0 0;
}

.woocommerce div.product form.cart div.quantity {
    margin: 0;
}

.woocommerce div.product form.cart .quantity input.qty {
    width: 88px;
    min-height: 54px;
    border: 1px solid #E8EBF1;
    border-radius: 999px;
    background: #ffffff;
    color: #0D1B3D;
    font-family: var(--product-font);
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(13, 27, 61, 0.05);
}

.woocommerce div.product form.cart .button {
    min-height: 54px;
    border-radius: 999px;
    font-family: var(--product-font);
    font-weight: 700;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
    padding-inline: 28px;
    background: #0D1B3D;
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(13, 27, 61, 0.18);
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible {
    transform: translateY(-2px);
    background: #2B7D8A;
    color: #ffffff;
}

.product-buy-now-button {
    padding-inline: 28px;
    border: 1px solid #2B7D8A;
    background: #ffffff;
    color: #0D1B3D;
}

.product-buy-now-button:hover,
.product-buy-now-button:focus-visible {
    transform: translateY(-2px);
    background: #E8EBF1;
    color: #0D1B3D;
    box-shadow: 0 14px 28px rgba(13, 27, 61, 0.1);
}

.woocommerce div.product .product_meta,
.woocommerce div.product .woocommerce-tabs {
    display: none !important;
}

.product-pack-summary {
    display: grid;
    gap: 12px;
    margin: 22px 0 0;
    padding: 18px;
    border: 1px solid rgba(18, 52, 74, 0.1);
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 14px 34px rgba(15, 49, 72, 0.06);
}

.product-pack-summary span {
    display: inline-flex;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    background: #ffffff;
    color: #0D1B3D;
    font-size: 0.84rem;
    font-weight: 700;
}

.product-pack-summary h2 {
    margin: 0;
    color: #0D1B3D;
    font-size: 1.35rem;
    line-height: 1.1;
}

.product-pack-summary ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-pack-summary li {
    padding: 8px 11px;
    border: 1px solid rgba(18, 52, 74, 0.1);
    border-radius: 999px;
    background: #ffffff;
    color: #506875;
    font-size: 0.84rem;
    font-weight: 650;
}

.product-coupon-bar {
    display: grid;
    gap: 12px;
    margin-top: 22px;
    padding: 18px;
    border: 1px solid rgba(18, 52, 74, 0.1);
    border-radius: 8px;
    background: #FFFFFF;
}

.product-coupon-bar label {
    color: var(--ink);
    font-weight: 700;
}

.product-coupon-bar > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.product-coupon-bar input {
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid rgba(18, 52, 74, 0.12);
    border-radius: 8px;
    background: var(--white);
}

.product-coupon-bar small {
    color: var(--muted);
}

.product-reassurance {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 22px;
}

.product-reassurance span {
    padding: 16px 14px;
    border: 1px solid #E8EBF1;
    border-radius: 18px;
    background: #ffffff;
    color: #0D1B3D;
    font-size: 0.82rem;
    font-weight: 850;
    text-align: center;
    box-shadow: 0 12px 28px rgba(13, 27, 61, 0.05);
}

.product-review-highlights {
    clear: both;
    padding-top: 38px;
}

.product-review-highlights h2 {
    margin-bottom: 20px;
}

.product-review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    gap: 18px;
}

.product-review-grid figure {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--ivory);
}

.product-review-grid blockquote {
    margin: 10px 0 16px;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1.2rem;
    line-height: 1.3;
}

.product-review-grid figcaption {
    color: var(--muted);
    font-weight: 700;
}

.product-premium-sections {
    clear: both;
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    gap: clamp(34px, 6vw, 72px);
    padding-top: clamp(28px, 5vw, 64px);
    font-family: var(--product-font);
}

.product-premium-section {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid #E8EBF1;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 22px 60px rgba(13, 27, 61, 0.07);
}

.product-section-heading {
    display: grid;
    gap: 10px;
    margin-bottom: 22px;
}

.product-section-heading span {
    color: #2B7D8A;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.product-section-heading h2 {
    margin: 0;
    color: #0D1B3D;
    font-family: var(--product-font);
    font-size: clamp(1.7rem, 3vw, 2.8rem);
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.05;
}

.product-review-grid--premium figure {
    display: grid;
    gap: 12px;
    border-radius: 22px;
    background: #FFFFFF;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.product-review-grid--premium figure:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 44px rgba(13, 27, 61, 0.1);
}

.product-review-grid--premium img {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    object-fit: cover;
    background: #E8EBF1;
}

.product-faq-list {
    display: grid;
    gap: 12px;
}

.product-faq-list details {
    border: 1px solid #E8EBF1;
    border-radius: 18px;
    background: #FFFFFF;
    overflow: hidden;
}

.product-faq-list summary {
    padding: 18px 20px;
    color: #0D1B3D;
    cursor: pointer;
    font-weight: 700;
}

.product-faq-list p {
    margin: 0;
    padding: 0 20px 20px;
    color: #536b78;
    line-height: 1.75;
}

.product-ingredient-grid,
.premium-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    gap: 16px;
}

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

.product-ingredient-grid article,
.premium-product-card {
    display: grid;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    gap: 12px;
    padding: 16px;
    border: 1px solid #E8EBF1;
    border-radius: 24px;
    background: #FFFFFF;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.product-ingredient-grid article:hover,
.premium-product-card:hover {
    transform: translateY(-5px);
    border-color: rgba(43, 125, 138, 0.32);
    box-shadow: 0 18px 44px rgba(13, 27, 61, 0.1);
}

.product-ingredient-grid img {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    object-fit: contain;
    background: #ffffff;
}

.product-ingredient-grid h3,
.premium-product-card h3 {
    margin: 0;
    color: #0D1B3D;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.product-ingredient-grid p,
.premium-product-card p {
    margin: 0;
    color: #536b78;
    line-height: 1.6;
}

.premium-product-card img {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1.05;
    border-radius: 18px;
    object-fit: contain;
    background: #ffffff;
    transition: transform 0.28s ease;
}

.premium-product-card:hover img {
    transform: scale(1.035);
}

.premium-product-card .button {
    width: 100%;
    border-radius: 999px;
    text-align: center;
}

.woocommerce div.product {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.85fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
    width: min(1440px, calc(100% - clamp(28px, 5vw, 72px)));
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: clip;
    isolation: isolate;
}

.woocommerce div.product::before,
.woocommerce div.product::after {
    display: none;
}

.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
    float: none;
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow: visible;
}

.woocommerce div.product .cosmethique-product-gallery {
    position: relative;
    top: auto;
    z-index: auto;
    align-self: start;
    float: none;
    width: auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: clamp(14px, 2vw, 22px);
    border: 1px solid #E8EBF1;
    border-radius: 32px;
    background: linear-gradient(145deg, #ffffff 0%, #FFFFFF 54%, rgba(191, 216, 247, 0.24) 100%);
    box-shadow: 0 28px 72px rgba(13, 27, 61, 0.09);
    overflow: hidden;
}

.woocommerce div.product .cosmethique-gallery-main {
    border-radius: 26px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(13, 27, 61, 0.04);
}

.woocommerce div.product .cosmethique-gallery-main img {
    aspect-ratio: 1 / 1.08;
    padding: clamp(10px, 2vw, 22px);
    object-fit: contain;
}

.woocommerce div.product .cosmethique-gallery-thumbs {
    gap: 14px;
    margin-top: 16px;
}

.woocommerce div.product .cosmethique-gallery-thumb {
    border-radius: 18px;
    background: #ffffff;
}

.cosmethique-product-hero-copy {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    gap: 18px;
    padding: clamp(24px, 4vw, 46px);
    border: 1px solid #E8EBF1;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 28px 72px rgba(13, 27, 61, 0.09);
    animation: productFadeUp 0.72s ease both;
}

.product-hero-kicker {
    color: #2B7D8A;
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.product-hero-title {
    max-width: 100%;
    margin: 0;
    color: #0D1B3D;
    font-family: var(--product-font);
    font-size: clamp(2.15rem, 3.55vw, 4.15rem);
    font-weight: 850;
    line-height: 1.04;
    overflow-wrap: anywhere;
    text-wrap: balance;
    word-break: normal;
    hyphens: auto;
}

.product-hero-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    color: #647487;
    font-size: 0.96rem;
    font-weight: 750;
}

.product-hero-rating span {
    color: #2B7D8A;
    letter-spacing: 0.06em;
}

.product-hero-rating strong,
.product-hero-rating em {
    color: #0D1B3D;
    font-style: normal;
}

.product-hero-price {
    color: #0D1B3D;
    font-family: var(--product-font);
    font-size: clamp(1.45rem, 2.4vw, 2.1rem);
    font-weight: 850;
}

.product-hero-price del {
    margin-right: 10px;
    color: #7A8898;
    font-weight: 700;
}

.product-hero-price ins {
    color: #2B7D8A;
    text-decoration: none;
}

.product-hero-description {
    max-width: 660px;
    margin: 0;
    color: #5F7280;
    font-size: 1.04rem;
    line-height: 1.8;
    overflow-wrap: break-word;
}

.product-hero-status,
.product-hero-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.product-hero-status span {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 38px;
    padding: 9px 14px;
    border: 1px solid #E8EBF1;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0D1B3D;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: break-word;
    white-space: normal;
}

.product-hero-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-hero-benefits span {
    display: flex;
    min-width: 0;
    min-height: 70px;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #E8EBF1;
    border-radius: 20px;
    background: #FFFFFF;
    color: #0D1B3D;
    font-size: 0.88rem;
    font-weight: 850;
    line-height: 1.25;
    overflow-wrap: break-word;
    box-shadow: 0 12px 30px rgba(13, 27, 61, 0.05);
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.product-hero-benefits span:hover {
    transform: translateY(-4px);
    border-color: rgba(43, 125, 138, 0.34);
    box-shadow: 0 18px 42px rgba(13, 27, 61, 0.1);
}

.product-hero-benefits i {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #E8EBF1;
    color: #0D1B3D;
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 850;
}

.product-hero-benefits span > strong,
.product-hero-benefits span > b,
.product-hero-benefits span > em {
    min-width: 0;
    overflow-wrap: break-word;
}

.product-hero-purchase {
    display: grid;
    gap: 12px;
    margin-top: 2px;
}

.product-hero-purchase .cart {
    margin: 0;
}

.product-favorite-button {
    width: fit-content;
    min-height: 52px;
    padding-inline: 26px;
    border: 1px solid #E8EBF1;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0D1B3D;
    font-family: var(--product-font);
    font-weight: 850;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.product-favorite-button:hover,
.product-favorite-button:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(43, 125, 138, 0.42);
    box-shadow: 0 16px 34px rgba(13, 27, 61, 0.1);
    outline: none;
}

.woocommerce div.product .product-premium-sections {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 0;
    margin-top: clamp(16px, 3vw, 36px);
}

.product-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    gap: 16px;
}

.product-detail-grid article {
    display: grid;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    gap: 13px;
    min-height: 230px;
    padding: 22px;
    border: 1px solid #E8EBF1;
    border-radius: 24px;
    background: linear-gradient(145deg, #FFFFFF, rgba(191, 216, 247, 0.15));
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.product-detail-grid article:hover {
    transform: translateY(-6px);
    border-color: rgba(43, 125, 138, 0.34);
    box-shadow: 0 20px 50px rgba(13, 27, 61, 0.1);
}

.product-detail-grid article > span {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #0D1B3D;
    color: #FFFFFF;
    font-size: 1rem;
}

.product-detail-grid h3,
.product-routine-timeline h3 {
    margin: 0;
    color: #0D1B3D;
    font-size: 1.08rem;
    line-height: 1.24;
}

.product-detail-grid p,
.product-routine-timeline p {
    margin: 0;
    color: #5F7280;
    line-height: 1.7;
}

.product-routine-timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    gap: 18px;
}

.product-routine-timeline article {
    position: relative;
    display: grid;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    gap: 12px;
    padding: 24px;
    border-radius: 24px;
    background: #FFFFFF;
    border: 1px solid #E8EBF1;
    box-shadow: 0 14px 34px rgba(13, 27, 61, 0.06);
}

.product-routine-timeline article:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -18px;
    width: 18px;
    height: 1px;
    background: #BFD8F7;
}

.product-routine-timeline span {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #2B7D8A;
    color: #FFFFFF;
    font-weight: 850;
}

.product-review-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.product-review-filters button {
    border: 1px solid #E8EBF1;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0D1B3D;
    cursor: pointer;
    font-family: var(--product-font);
    font-size: 0.85rem;
    font-weight: 850;
    padding: 10px 15px;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.product-review-filters button:hover,
.product-review-filters button:focus-visible {
    transform: translateY(-2px);
    background: #0D1B3D;
    color: #FFFFFF;
    outline: none;
}

.premium-product-grid--slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
}

.premium-product-grid--slider .premium-product-card {
    width: 100%;
    flex: none;
    scroll-snap-align: start;
}

.single-product .site-main,
.single-product .content-area,
.single-product .entry-content {
    overflow-x: hidden;
}

.single-product .woocommerce div.product {
    width: min(1360px, calc(100vw - clamp(32px, 6vw, 88px)));
    max-width: 100%;
}

.single-product .woocommerce div.product > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.single-product .woocommerce div.product .product-premium-sections,
.single-product .woocommerce div.product .related,
.single-product .woocommerce div.product .upsells,
.single-product .woocommerce div.product .recently-viewed-products {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin-inline: 0;
}

.single-product .woocommerce div.product .cosmethique-product-gallery,
.single-product .woocommerce div.product .cosmethique-product-hero-copy,
.single-product .woocommerce div.product .product-premium-section,
.single-product .woocommerce div.product .product-detail-grid,
.single-product .woocommerce div.product .product-routine-timeline,
.single-product .woocommerce div.product .product-review-grid,
.single-product .woocommerce div.product .product-ingredient-grid,
.single-product .woocommerce div.product .premium-product-grid {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.single-product .woocommerce div.product .product-premium-section > *,
.single-product .woocommerce div.product .product-detail-grid > *,
.single-product .woocommerce div.product .product-routine-timeline > *,
.single-product .woocommerce div.product .product-review-grid > *,
.single-product .woocommerce div.product .product-ingredient-grid > *,
.single-product .woocommerce div.product .premium-product-grid > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.single-product .woocommerce div.product img,
.single-product .woocommerce div.product video,
.single-product .woocommerce div.product iframe {
    max-width: 100%;
}

.single-product .product-hero-title {
    font-size: clamp(2.05rem, 3vw, 3.65rem);
    overflow-wrap: anywhere;
}

@keyframes productFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.woocommerce div.product .woocommerce-tabs {
    clear: both;
    padding-top: 36px;
}

.woocommerce div.product .woocommerce-tabs .panel {
    line-height: 1.8;
}

.woocommerce div.product .woocommerce-tabs .panel ul {
    padding-left: 1.25rem;
}

.woocommerce table.shop_table {
    border-color: var(--line);
    border-radius: 8px;
    background: var(--ivory);
}

.woocommerce table.shop_table .product-thumbnail img,
.cosmethique-cart-thumb {
    width: 76px;
    height: 92px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--beige);
}

.woocommerce-cart-form,
.woocommerce-checkout,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation {
    padding: 24px;
}

.checkout-payment-options {
    margin: 22px 0;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--cream);
}

.checkout-payment-options h2 {
    margin-bottom: 14px;
    font-size: 1.6rem;
}

.checkout-payment-grid {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.checkout-payment-grid span,
.checkout-payment-grid strong {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 8px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--ivory);
    color: var(--ink);
    font-size: 0.84rem;
}

.checkout-payment-grid strong {
    border-color: rgba(43, 125, 138, 0.34);
    background: #FFFFFF;
    color: var(--sage-dark);
}

.checkout-payment-options p {
    margin: 0;
    font-size: 0.9rem;
}

.page-content-wrap--checkout {
    width: min(1360px, calc(100% - 40px));
    margin: 0 auto;
    padding: clamp(28px, 5vw, 64px) 0;
}

.page-content-wrap--checkout .entry-content {
    width: 100%;
    max-width: none;
}

.checkout-premium-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 430px);
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    min-height: clamp(300px, 30vw, 390px);
    overflow: hidden;
    margin-bottom: clamp(20px, 4vw, 36px);
    padding: clamp(34px, 6vw, 68px);
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 30px;
    background: radial-gradient(circle at 88% 18%, rgba(191, 216, 247, 0.5), transparent 32%), linear-gradient(135deg, #ffffff 0%, #FFFFFF 58%, #FFFFFF 100%);
    box-shadow: 0 26px 70px rgba(13, 27, 61, 0.1);
}

.checkout-hero-shape {
    position: absolute;
    border-radius: 42% 58% 64% 36%;
    background: rgba(255, 255, 255, 0.58);
    pointer-events: none;
}

.checkout-hero-shape--one {
    right: 22%;
    top: 12%;
    width: 160px;
    height: 130px;
}

.checkout-hero-shape--two {
    right: 3%;
    bottom: 10%;
    width: 230px;
    height: 170px;
    opacity: 0.72;
}

.checkout-premium-copy {
    position: relative;
    z-index: 1;
    animation: checkoutFadeUp 0.75s ease both;
}

.checkout-premium-copy h1 {
    max-width: 760px;
    margin: 0;
    color: var(--ink);
    font-size: clamp(3rem, 6vw, 5.6rem);
    line-height: 0.96;
}

.checkout-premium-copy p:not(.eyebrow) {
    max-width: 620px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.75;
}

.checkout-hero-products {
    position: relative;
    z-index: 1;
    min-height: 260px;
    animation: checkoutHeroZoom 0.8s ease both 0.12s;
}

.checkout-floating-product {
    position: absolute;
    width: min(34vw, 190px);
    aspect-ratio: 4 / 5;
    object-fit: contain;
    border-radius: 22px;
    filter: drop-shadow(0 22px 28px rgba(13, 27, 61, 0.16));
    animation: checkoutFloating 5.6s ease-in-out infinite;
}

.checkout-floating-product--one {
    left: 2%;
    bottom: 2%;
}

.checkout-floating-product--two {
    left: 36%;
    top: 0;
    animation-delay: 0.5s;
}

.checkout-floating-product--three {
    right: 0;
    bottom: 8%;
    animation-delay: 1s;
}

.checkout-progress-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    overflow: hidden;
    margin-bottom: clamp(22px, 4vw, 36px);
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(13, 27, 61, 0.08);
}

.checkout-progress-step {
    position: relative;
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
}

.checkout-progress-step + .checkout-progress-step::before {
    content: "";
    position: absolute;
    left: 0;
    width: 1px;
    height: 24px;
    background: var(--line);
}

.checkout-progress-step.is-complete,
.checkout-progress-step.is-active {
    color: var(--ink);
}

.checkout-progress-step.is-active span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.checkout-progress-step.is-active span::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sage);
    box-shadow: 0 0 0 7px rgba(43, 125, 138, 0.1);
}

.cosmethique-checkout {
    padding: 0;
}

.checkout-premium-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    gap: clamp(24px, 4vw, 44px);
    align-items: start;
}

.checkout-left-column,
.checkout-customer-details {
    display: grid;
    gap: clamp(18px, 3vw, 28px);
}

.checkout-summary-column {
    position: sticky;
    top: 116px;
    display: grid;
    gap: 18px;
}

.checkout-step-card,
.checkout-coupon-card,
.checkout-order-summary-card {
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 22px 58px rgba(13, 27, 61, 0.08);
}

.checkout-step-card {
    padding: clamp(22px, 4vw, 34px);
}

.checkout-step-heading {
    margin-bottom: 22px;
}

.checkout-step-heading > span,
.checkout-order-summary-card .eyebrow {
    display: inline-flex;
    margin-bottom: 10px;
    color: var(--sage-dark);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.checkout-step-heading h2,
.checkout-order-summary-card h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1;
}

.checkout-step-heading p {
    max-width: 620px;
    margin: 12px 0 0;
    color: var(--muted);
    line-height: 1.65;
}

.cosmethique-checkout .woocommerce-billing-fields h3,
.cosmethique-checkout .woocommerce-shipping-fields h3,
.cosmethique-checkout .woocommerce-additional-fields h3 {
    margin: 0 0 18px;
    color: var(--ink);
    font-size: 1.35rem;
}

.cosmethique-checkout .form-row {
    margin: 0 0 18px;
}

.cosmethique-checkout .form-row label {
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 700;
}

.cosmethique-checkout .form-row .required {
    color: var(--sage-dark);
}

.cosmethique-checkout input.input-text,
.cosmethique-checkout select,
.cosmethique-checkout textarea,
.checkout-coupon-panel input {
    min-height: 52px;
    width: 100%;
    border: 1px solid #e8e6e1;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--ink);
    font: inherit;
    padding: 13px 18px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.cosmethique-checkout textarea {
    min-height: 130px;
    border-radius: 22px;
    resize: vertical;
}

.cosmethique-checkout input.input-text:focus,
.cosmethique-checkout select:focus,
.cosmethique-checkout textarea:focus,
.checkout-coupon-panel input:focus {
    outline: none;
    border-color: var(--sage);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(43, 125, 138, 0.1);
}

.cosmethique-checkout .select2-container--default .select2-selection--single {
    min-height: 52px;
    border: 1px solid #e8e6e1;
    border-radius: 999px;
    background: #FFFFFF;
}

.cosmethique-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 11px 18px;
    color: var(--ink);
}

.checkout-coupon-card {
    overflow: hidden;
}

.checkout-coupon-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 0;
    background: #ffffff;
    color: var(--ink);
    cursor: pointer;
    padding: 20px 22px;
    text-align: left;
}

.checkout-coupon-toggle span {
    color: var(--ink);
    font-weight: 700;
}

.checkout-coupon-toggle small {
    color: var(--sage-dark);
    font-weight: 700;
}

.checkout-coupon-panel {
    padding: 0 22px 22px;
    animation: checkoutFadeUp 0.25s ease both;
}

.checkout-coupon-panel label {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.checkout-coupon-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.checkout-apply-coupon {
    min-height: 52px;
    border-radius: 999px;
    background: var(--sage);
    color: #ffffff;
}

.checkout-apply-coupon:hover,
.checkout-apply-coupon:focus {
    background: var(--sage-dark);
    color: #ffffff;
}

.checkout-apply-coupon.is-loading {
    opacity: 0.7;
}

.checkout-coupon-feedback {
    min-height: 1.4em;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.checkout-order-summary-card {
    overflow: hidden;
    padding: 24px;
}

.checkout-order-summary-card h2 {
    margin-bottom: 20px;
}

.checkout-review-products {
    display: grid;
    gap: 14px;
    margin-bottom: 20px;
}

.checkout-review-item {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 18px;
    background: #FFFFFF;
}

.checkout-review-thumb img {
    width: 82px;
    height: 92px;
    border-radius: 14px;
    object-fit: cover;
    background: var(--beige);
}

.checkout-review-info h3 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 0.96rem;
    line-height: 1.25;
}

.checkout-review-info span,
.checkout-review-info dl {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.checkout-review-price {
    color: var(--ink);
    font-weight: 700;
    text-align: right;
}

.checkout-review-totals.shop_table {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.checkout-review-totals th,
.checkout-review-totals td,
.checkout-review-totals.shop_table th,
.checkout-review-totals.shop_table td {
    border: 0;
    padding: 11px 0;
    color: var(--muted);
    font-size: 0.95rem;
    vertical-align: top;
}

.checkout-review-totals th {
    font-weight: 700;
    text-align: left;
}

.checkout-review-totals td {
    color: var(--ink);
    font-weight: 700;
    text-align: right;
}

.checkout-review-totals .shipping th,
.checkout-review-totals .shipping td {
    display: block;
    width: 100%;
    text-align: left;
}

.checkout-review-totals .shipping ul {
    margin: 8px 0 0;
    padding: 0;
}

.checkout-review-totals .shipping li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 8px 0;
}

.checkout-total-row--grand th,
.checkout-total-row--grand td {
    padding-top: 18px;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-size: 1.25rem;
}

.woocommerce-checkout #payment {
    border: 0;
    border-radius: 22px;
    background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods {
    display: grid;
    gap: 12px;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
    overflow: hidden;
    padding: 16px 18px;
    border: 1px solid rgba(13, 27, 61, 0.1);
    border-radius: 18px;
    background: #FFFFFF;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.woocommerce-checkout #payment ul.payment_methods li:hover {
    transform: translateY(-2px);
    border-color: rgba(43, 125, 138, 0.36);
    box-shadow: 0 16px 34px rgba(13, 27, 61, 0.08);
}

.woocommerce-checkout #payment ul.payment_methods li.is-payment-open {
    border-color: rgba(43, 125, 138, 0.42);
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(13, 27, 61, 0.09);
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    accent-color: #2B7D8A;
    vertical-align: middle;
}

.woocommerce-checkout #payment ul.payment_methods li label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked + label {
    color: var(--sage-dark);
}

.cosmethique-payment-logo {
    display: inline-flex;
    min-width: 42px;
    height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 1px solid #E8EBF1;
    border-radius: 999px;
    background: #ffffff;
    color: #0D1B3D;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(13, 27, 61, 0.06);
}

.cosmethique-payment-logo--apple span {
    font-family: -apple-system, BlinkMacSystemFont, "DM Sans", sans-serif;
}

.cosmethique-payment-logo--google span {
    font-weight: 700;
}

.woocommerce-checkout #payment div.payment_box {
    margin: 14px 0 0;
    border-radius: 16px;
    background: var(--cream);
    color: var(--muted);
    will-change: max-height, opacity;
}

.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: var(--cream);
}

.cosmethique-card-payment-form,
.cosmethique-wallet-payment,
.cosmethique-choice-list {
    animation: checkoutFadeUp 0.28s ease both;
}

.cosmethique-payment-brand-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.cosmethique-payment-brand-row span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid #E8EBF1;
    border-radius: 999px;
    background: #ffffff;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(13, 27, 61, 0.05);
}

.cosmethique-payment-brand-row span:nth-child(1) {
    color: #0D1B3D;
}

.cosmethique-payment-brand-row span:nth-child(2) {
    color: #2B7D8A;
}

.cosmethique-payment-brand-row span:nth-child(3) {
    color: #0D1B3D;
}

.cosmethique-card-fields {
    display: grid;
    gap: 14px;
}

.cosmethique-card-fields label {
    display: grid;
    gap: 7px;
    margin: 0;
}

.cosmethique-card-fields label span {
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 700;
}

.cosmethique-card-fields input {
    width: 100%;
    height: 52px;
    border: 1px solid #E8EBF1;
    border-radius: 12px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
    padding: 0 15px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.cosmethique-card-fields input::placeholder {
    color: #a8b2c3;
}

.cosmethique-card-fields input:focus {
    outline: none;
    border-color: #2B7D8A;
    box-shadow: 0 0 0 4px rgba(43, 125, 138, 0.1);
    transform: translateY(-1px);
}

.cosmethique-card-field-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.7fr);
    gap: 12px;
}

.cosmethique-wallet-payment {
    display: grid;
    gap: 12px;
    padding: 4px 0;
}

.cosmethique-wallet-logo {
    display: inline-flex;
    width: fit-content;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border: 1px solid #E8EBF1;
    border-radius: 999px;
    background: #ffffff;
    color: #0D1B3D;
    font-size: 0.92rem;
    font-weight: 700;
    box-shadow: 0 12px 26px rgba(13, 27, 61, 0.07);
}

.cosmethique-wallet-logo--apple {
    font-family: -apple-system, BlinkMacSystemFont, "DM Sans", sans-serif;
}

.cosmethique-wallet-payment p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.65;
}

.cosmethique-choice-list {
    display: grid;
    gap: 10px;
}

.cosmethique-choice-list label {
    display: flex;
    min-height: 50px;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #E8EBF1;
    border-radius: 14px;
    background: #ffffff;
    color: var(--ink);
    cursor: pointer;
    font-weight: 700;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.cosmethique-choice-list label:hover {
    transform: translateY(-2px);
    border-color: rgba(43, 125, 138, 0.4);
    box-shadow: 0 12px 26px rgba(13, 27, 61, 0.08);
}

.cosmethique-choice-list input {
    accent-color: #2B7D8A;
}

.cosmethique-choice-list--installments label {
    min-height: 78px;
    align-items: center;
    gap: 16px;
}

.installment-provider-logo {
    display: inline-flex;
    width: 96px;
    height: 36px;
    flex: 0 0 96px;
    align-items: center;
    justify-content: flex-start;
}

.installment-provider-logo img {
    display: block;
    width: auto;
    max-width: 96px;
    height: auto;
    max-height: 36px;
    object-fit: contain;
}

.installment-provider-copy {
    display: grid;
    flex: 1 1 auto;
    gap: 3px;
    min-width: 0;
}

.installment-provider-copy strong {
    color: #0D1B3D;
    font-size: 0.94rem;
    line-height: 1.2;
}

.installment-provider-copy small {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
}

.cosmethique-choice-list--installments input[type="radio"] {
    flex: 0 0 auto;
    margin-left: auto;
}

.woocommerce-checkout #payment .place-order {
    display: block;
    position: static;
    overflow: visible;
    margin: 0;
}

.woocommerce-checkout #place_order {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    margin: 0 0 40px;
    border-radius: 999px;
    background: var(--ink);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 18px 34px rgba(13, 27, 61, 0.18);
    transform: none;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #place_order:focus {
    background: #0D1B3D;
    color: #ffffff;
}

.woocommerce-checkout #place_order:active {
    transform: none;
}

.checkout-secure-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    clear: both;
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.checkout-secure-note > span {
    grid-row: span 2;
    color: #2B7D8A;
}

.checkout-secure-note strong {
    color: #0D1B3D;
    font-weight: 700;
}

.checkout-secure-note small {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.checkout-payment-options {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    padding: 14px 18px;
    border-radius: 18px;
    background: var(--cream);
}

.checkout-payment-lock {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(13, 27, 61, 0.08);
}

.checkout-payment-options p {
    margin: 0;
    color: var(--ink);
    font-weight: 700;
}

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    display: grid;
    gap: 6px;
    margin: 0 0 22px;
    padding: 18px 20px 18px 52px;
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 18px;
    background: #ffffff;
    color: var(--ink);
    box-shadow: 0 14px 38px rgba(13, 27, 61, 0.08);
}

.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
    top: 18px;
    left: 22px;
    color: var(--sage);
}

@keyframes checkoutFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes checkoutHeroZoom {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes checkoutFloating {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.page-content-wrap--cart {
    width: min(1320px, calc(100% - 40px));
    margin: 0 auto;
    padding: clamp(28px, 5vw, 64px) 0;
}

.page-content-wrap--cart .entry-content {
    width: 100%;
    max-width: none;
}

.cart-premium-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    align-items: center;
    gap: clamp(26px, 5vw, 70px);
    min-height: clamp(300px, 34vw, 430px);
    overflow: hidden;
    margin-bottom: clamp(22px, 4vw, 38px);
    padding: clamp(34px, 6vw, 70px);
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 30px;
    background: radial-gradient(circle at 88% 20%, rgba(191, 216, 247, 0.46), transparent 30%), linear-gradient(135deg, #ffffff 0%, #FFFFFF 54%, #FFFFFF 100%);
    box-shadow: 0 26px 70px rgba(13, 27, 61, 0.1);
}

.cart-hero-shape {
    position: absolute;
    border-radius: 38% 62% 64% 36%;
    background: rgba(255, 255, 255, 0.58);
    filter: blur(1px);
    pointer-events: none;
}

.cart-hero-shape--one {
    right: 18%;
    top: 12%;
    width: 170px;
    height: 110px;
    animation: cart-float 8s ease-in-out infinite;
}

.cart-hero-shape--two {
    right: 4%;
    bottom: 10%;
    width: 220px;
    height: 150px;
    animation: cart-float 9s ease-in-out infinite reverse;
}

.cart-hero-copy,
.cart-hero-products,
.cart-empty-premium,
.cart-progress-steps,
.cart-free-shipping,
.cart-product-card,
.cart-summary-card,
.cart-benefits-grid article,
.cart-recommendation-card {
    animation: cart-fade-up 0.7s ease both;
}

.cart-hero-copy h2 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(3.3rem, 7vw, 6.8rem);
    line-height: 0.95;
}

.cart-hero-copy p:not(.eyebrow) {
    max-width: 560px;
    margin-top: 18px;
    color: var(--muted);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
}

.cart-hero-products {
    position: relative;
    z-index: 1;
    min-height: 260px;
}

.cart-hero-products img {
    position: absolute;
    width: clamp(120px, 14vw, 190px);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 20px 46px rgba(13, 27, 61, 0.14);
    animation: cart-product-float 7s ease-in-out infinite;
}

.cart-hero-products img:nth-child(1) {
    left: 0;
    bottom: 6%;
    transform: rotate(-7deg);
}

.cart-hero-products img:nth-child(2) {
    left: 34%;
    top: 0;
    animation-delay: 0.8s;
}

.cart-hero-products img:nth-child(3) {
    right: 0;
    bottom: 0;
    transform: rotate(6deg);
    animation-delay: 1.5s;
}

.cart-progress-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(13, 27, 61, 0.07);
}

.cart-progress-steps span {
    display: grid;
    place-items: center;
    min-height: 42px;
    border-radius: 999px;
    color: var(--muted);
    font-weight: 700;
    text-align: center;
}

.cart-progress-steps span.is-active {
    background: #0D1B3D;
    color: #ffffff;
}

.cart-free-shipping {
    display: grid;
    gap: 14px;
    margin-bottom: clamp(24px, 4vw, 38px);
    padding: 22px;
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(13, 27, 61, 0.07);
}

.cart-free-shipping strong {
    display: block;
    color: var(--ink);
    font-size: 1.05rem;
}

.cart-free-shipping span {
    color: var(--muted);
}

.cart-free-shipping-track {
    overflow: hidden;
    height: 10px;
    border-radius: 999px;
    background: #e8ebf1;
}

.cart-free-shipping-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0D1B3D, #2B7D8A);
    transition: width 0.7s ease;
}

.cosmethique-cart-form {
    padding: 0;
    border: 0;
    background: transparent;
}

.cart-premium-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: clamp(22px, 4vw, 34px);
    align-items: start;
}

.cart-items-panel {
    display: grid;
    gap: 18px;
}

.cart-product-card {
    position: relative;
    display: grid;
    grid-template-columns: 132px minmax(0, 1.25fr) minmax(110px, 0.6fr) minmax(150px, 0.7fr) minmax(120px, 0.6fr) 42px;
    gap: 18px;
    align-items: center;
    padding: clamp(16px, 2.4vw, 24px);
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(13, 27, 61, 0.08);
    transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}

.cart-product-card:hover,
.cart-product-card:focus-within {
    border-color: rgba(43, 125, 138, 0.18);
    box-shadow: 0 26px 58px rgba(13, 27, 61, 0.12);
    transform: translateY(-4px);
}

.cart-product-card.is-quantity-updated {
    border-color: rgba(43, 138, 157, 0.36);
    box-shadow: 0 24px 58px rgba(43, 138, 157, 0.14);
}

.cart-product-media {
    overflow: hidden;
    border-radius: 20px;
    background: #FFFFFF;
}

.cart-product-media img {
    width: 100%;
    aspect-ratio: 1 / 1.15;
    object-fit: cover;
    transition: transform 300ms ease;
}

.cart-product-card:hover .cart-product-media img {
    transform: scale(1.04);
}

.cart-product-info span,
.cart-product-price small,
.cart-product-quantity small,
.cart-product-subtotal small {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cart-product-info h3 {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    line-height: 1.05;
}

.cart-product-price strong,
.cart-product-subtotal strong {
    color: var(--ink);
    font-size: 1rem;
}

.cart-quantity-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    border: 1px solid rgba(13, 27, 61, 0.1);
    border-radius: 999px;
    background: #FFFFFF;
}

.cart-quantity-control button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: var(--ink);
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 700;
    transition: transform 200ms ease, background 200ms ease, color 200ms ease;
}

.cart-quantity-control button:hover,
.cart-quantity-control button:focus-visible {
    background: #0D1B3D;
    color: #ffffff;
    transform: scale(1.05);
}

.cart-quantity-control .quantity input.qty {
    width: 52px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-weight: 700;
    text-align: center;
}

.cart-product-remove .remove {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(13, 27, 61, 0.1);
    border-radius: 50%;
    background: #ffffff;
    color: var(--muted) !important;
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 220ms ease, background 220ms ease, color 220ms ease;
}

.cart-product-remove .remove:hover,
.cart-product-remove .remove:focus-visible {
    background: #0D1B3D;
    color: #ffffff !important;
    transform: scale(1.05);
}

.cart-actions-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: end;
    justify-content: space-between;
    padding: 22px;
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.78);
}

.cart-coupon-premium {
    display: grid;
    flex: 1 1 360px;
    gap: 8px;
}

.cart-coupon-premium label {
    color: var(--ink);
    font-weight: 700;
}

.cart-coupon-premium > div {
    display: flex;
    gap: 10px;
}

.cart-coupon-premium input {
    min-height: 48px;
    border: 1px solid rgba(13, 27, 61, 0.12);
    border-radius: 999px;
    padding: 0 18px;
    background: #ffffff;
}

.cart-update-button {
    min-height: 48px;
}

.cart-summary-card {
    position: sticky;
    top: 130px;
    padding: clamp(22px, 3vw, 30px);
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 24px 64px rgba(13, 27, 61, 0.12);
}

.cart-summary-card h2 {
    margin: 0 0 22px;
    font-size: clamp(2rem, 3vw, 2.8rem);
}

.cart-summary-card dl {
    display: grid;
    gap: 13px;
    margin: 0 0 24px;
}

.cart-summary-card dl div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(13, 27, 61, 0.08);
}

.cart-summary-card dt {
    color: var(--muted);
}

.cart-summary-card dd {
    margin: 0;
    color: var(--ink);
    font-weight: 700;
    text-align: right;
}

.cart-summary-total {
    align-items: baseline;
    border-bottom: 0 !important;
}

.cart-summary-total dt,
.cart-summary-total dd {
    color: var(--ink);
    font-size: 1.22rem;
}

.cart-summary-card .checkout-button {
    width: 100%;
}

.cart-continue-link {
    display: block;
    margin-top: 16px;
    color: var(--muted);
    font-weight: 700;
    text-align: center;
}

.cart-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: clamp(28px, 5vw, 54px);
}

.cart-benefits-grid article {
    padding: 24px 18px;
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 24px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 16px 36px rgba(13, 27, 61, 0.07);
    transition: transform 250ms ease, box-shadow 250ms ease;
}

.cart-benefits-grid article:hover {
    box-shadow: 0 22px 48px rgba(13, 27, 61, 0.11);
    transform: translateY(-5px);
}

.cart-benefits-grid span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #0D1B3D;
    font-size: 1.35rem;
}

.cart-benefits-grid strong {
    display: block;
    color: var(--ink);
    font-size: 1rem;
}

.cart-benefits-grid p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.cart-empty-premium {
    display: grid;
    grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 64px);
    padding: clamp(28px, 5vw, 58px);
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 30px;
    background: #ffffff;
    box-shadow: 0 22px 60px rgba(13, 27, 61, 0.09);
}

.cart-empty-visual {
    position: relative;
    min-height: 340px;
    margin: 0;
    border-radius: 28px;
    background: linear-gradient(135deg, #FFFFFF, #FFFFFF);
}

.cart-empty-visual > span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 120px;
    border: 2px solid rgba(13, 27, 61, 0.2);
    border-radius: 34px;
    color: transparent;
    transform: translate(-50%, -50%);
}

.cart-empty-visual > span::before,
.cart-empty-visual > span::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(13, 27, 61, 0.22);
}

.cart-empty-visual > span::before {
    top: -28px;
    left: 50%;
    width: 82px;
    height: 34px;
    border: 2px solid rgba(13, 27, 61, 0.22);
    border-bottom: 0;
    background: transparent;
    transform: translateX(-50%);
}

.cart-empty-visual > span::after {
    bottom: -18px;
    left: 50%;
    width: 94px;
    height: 8px;
    transform: translateX(-50%);
}

.cart-empty-visual img {
    position: absolute;
    width: 130px;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(13, 27, 61, 0.13);
    animation: cart-product-float 7s ease-in-out infinite;
}

.cart-empty-visual img:nth-of-type(1) {
    left: 8%;
    bottom: 12%;
    transform: rotate(-8deg);
}

.cart-empty-visual img:nth-of-type(2) {
    right: 8%;
    top: 12%;
    transform: rotate(7deg);
    animation-delay: 1s;
}

.cart-empty-premium h2 {
    margin: 0;
    font-size: clamp(2.7rem, 5vw, 5rem);
    line-height: 0.98;
}

.cart-empty-premium p:not(.eyebrow) {
    max-width: 620px;
    color: var(--muted);
    font-size: 1.06rem;
}

.cart-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.cart-recommendations {
    margin-top: clamp(34px, 6vw, 66px);
}

.cart-recommendations-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.cart-recommendation-card {
    overflow: hidden;
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(13, 27, 61, 0.08);
    transition: transform 250ms ease, box-shadow 250ms ease;
}

.cart-recommendation-card:hover {
    box-shadow: 0 24px 52px rgba(13, 27, 61, 0.12);
    transform: translateY(-5px);
}

.cart-recommendation-media {
    display: block;
    overflow: hidden;
    background: #FFFFFF;
}

.cart-recommendation-media img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 300ms ease;
}

.cart-recommendation-card:hover .cart-recommendation-media img {
    transform: scale(1.05);
}

.cart-recommendation-card > div {
    display: grid;
    gap: 10px;
    padding: 18px;
}

.cart-recommendation-card h3 {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.1;
}

.cart-recommendation-card p {
    margin: 0;
    color: var(--ink);
    font-weight: 700;
}

@keyframes cart-fade-up {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cart-float {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(3deg);
    }
}

@keyframes cart-product-float {
    0%,
    100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -8px;
    }
}

.cosmethique-gateway-note {
    margin: 0;
}

.cosmethique-security-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 1120px) {
    .header-inner {
        grid-template-columns: auto auto 1fr;
    }

    .mobile-menu-toggle {
        display: inline-block;
        justify-self: end;
    }

    .site-navigation {
        position: absolute;
        top: 100%;
        right: 16px;
        left: 16px;
        display: none;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--ivory);
        box-shadow: var(--soft-shadow);
    }

    .site-navigation.is-open {
        display: block;
    }

    .primary-menu {
        display: grid;
        gap: 6px;
    }

    .header-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
        padding-bottom: 14px;
    }

    .product-search-form {
        flex: 1;
        grid-template-columns: 1fr 42px;
    }

    .smart-search-panel {
        right: auto;
        left: 0;
        width: 100%;
        max-height: 62vh;
        border-radius: 18px;
    }

    .language-switcher-toggle {
        min-width: 112px;
    }
}

@media (max-width: 900px) {
    .shop-hero-premium,
    .shop-premium-block,
    .shop-promo-section,
    .shop-packs-section,
    .visage-category-hero,
    .visage-collection,
    .visage-routine-note {
        width: min(100% - 30px, 1280px);
    }

    .shop-hero-premium,
    .shop-premium-block,
    .shop-section-panel,
    .shop-promo-section,
    .visage-category-hero,
    .about-story-section,
    .about-eco-section {
        grid-template-columns: 1fr;
    }

    .shop-hero-premium {
        gap: 24px;
        padding-top: 40px;
    }

    .page-hero--compact,
    .archive-hero--product {
        min-height: 300px;
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .shop-hero-content {
        max-width: 720px;
    }

    .shop-hero-premium h1 {
        font-size: clamp(3.6rem, 12vw, 6rem);
    }

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

    .shop-hero-slides,
    .shop-hero-slide img {
        min-height: clamp(360px, 62vw, 560px);
    }

    .shop-floating-review {
        bottom: 54px;
        left: 18px;
    }

    .shop-floating-delivery {
        top: 18px;
        right: 18px;
    }

    .shop-floating-natural {
        top: auto;
        right: 18px;
        bottom: 112px;
    }

    .shop-section-panel {
        margin: -26px 14px 0;
        padding: clamp(22px, 5vw, 34px);
    }

    .shop-lifestyle-photo img {
        min-height: 300px;
    }

    .shop-products-slider {
        grid-auto-columns: minmax(190px, 42vw);
    }

    .home-univers-grid {
        grid-template-columns: 1fr 1fr;
    }

    .home-universe-card--wide {
        grid-column: span 2;
    }

    .home-universe-card {
        min-height: 430px;
    }

    .home-diagnostic-panel {
        grid-template-columns: 1fr;
    }

    .home-expertise-grid {
        grid-template-columns: 1fr;
    }

    .home-expertise-media {
        order: -1;
    }

    .home-expertise-media img {
        min-height: clamp(330px, 58vw, 520px);
    }

    .home-diagnostic-media {
        min-height: clamp(330px, 62vw, 520px);
        order: 2;
    }

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

    .shop-packs-header {
        align-items: start;
        flex-direction: column;
    }

    .shop-block-soins-du-visage .shop-info-card h2 {
        max-width: 100%;
    }

    .shop-block-accessoires-beaute .shop-info-card h2 {
        max-width: 100%;
        font-size: 42px;
        line-height: 1.05;
    }

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

    .visage-routine-note {
        align-items: start;
        flex-direction: column;
    }

    .cosmethique-product-gallery {
        float: none;
        width: 100%;
    }

    .diagnostic-shell {
        grid-template-columns: 1fr;
    }

    .diagnostic-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .diagnostic-hero-media,
    .diagnostic-hero-media img {
        min-height: 340px;
    }

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

    .diagnostic-side-card {
        position: relative;
        top: auto;
    }

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

    .trust-grid,
    .category-grid,
    .products-grid,
    .promo-grid,
    .story-grid,
    .franchise-section,
    .franchise-network-shell,
    .testimonial-grid,
    .blog-grid,
    .magazine-grid,
    .blog-showcase-grid,
    .inspiration-notes,
    .newsletter-panel,
    .two-columns,
    .archive-grid,
    .footer-main,
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }

    .franchise-network {
        width: min(100% - 30px, 1280px);
        padding: clamp(24px, 5vw, 42px);
    }

    .franchise-map {
        min-height: 430px;
    }

    .cosmethique-shop-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 24px;
    }

    .cosmethique-product-count {
        text-align: left;
    }

    .woocommerce .cosmethique-ordering,
    .woocommerce-page .cosmethique-ordering,
    .cosmethique-sort,
    .cosmethique-sort-toggle {
        width: 100%;
    }

    .cosmethique-sort-menu {
        right: auto;
        left: 0;
        width: 100%;
    }

    .hero-section {
        min-height: 610px;
        align-items: end;
        padding-bottom: 240px;
    }

    .floating-review {
        right: 20px;
        bottom: 54px;
        left: 20px;
        width: auto;
    }

    .footer-bottom {
        display: grid;
    }

    .cosmethique-product-gallery {
        float: none;
        width: 100%;
    }

    .cosmethique-gallery-thumbs {
        display: flex;
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

    .cosmethique-gallery-thumb {
        flex: 0 0 30%;
        min-width: 92px;
        scroll-snap-align: start;
    }

    .cosmethique-gallery-lightbox {
        padding: 14px;
    }

    .cosmethique-lightbox-nav {
        width: 42px;
        height: 42px;
    }

    .product-coupon-bar > div {
        grid-template-columns: 1fr;
    }

    .product-reassurance,
    .product-review-grid,
    .about-number-grid,
    .about-ingredient-grid {
        grid-template-columns: 1fr;
    }

    .about-brand-page {
        width: min(100% - 30px, 1240px);
    }

    .about-story-media img,
    .about-eco-section img {
        min-height: 360px;
    }

    .about-philosophy-grid {
        grid-template-columns: 1fr;
    }

    .about-process-timeline {
        grid-template-columns: 1fr;
    }

    .about-process-timeline::before {
        top: 0;
        bottom: 0;
        left: 27px;
        width: 1px;
        height: auto;
    }

    .about-process-step {
        grid-template-columns: auto auto 1fr;
        min-height: auto;
        text-align: left;
        justify-items: start;
        align-items: center;
    }

    .about-process-step:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: -20px;
        left: 18px;
        transform: none;
    }

    .about-process-step h3 {
        max-width: none;
    }

    .about-testimonial-slider {
        min-height: 390px;
    }

    .about-testimonial-card {
        min-height: 370px;
        padding: clamp(30px, 6vw, 46px);
    }

    .cookie-banner {
        grid-template-columns: 1fr;
        right: 16px;
        bottom: 16px;
        left: 16px;
        width: calc(100% - 32px);
        padding: 18px;
    }

    .cookie-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .cookie-actions .cookie-button,
    .cookie-modal-actions .cookie-button {
        width: 100%;
        justify-content: center;
    }

    .cookie-modal {
        padding: 16px;
    }

    .cookie-modal-panel {
        max-height: calc(100vh - 32px);
        border-radius: 20px;
    }

    .cookie-preference {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .cookie-modal-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .cookie-policy-grid {
        grid-template-columns: 1fr;
    }

    .cookie-policy-table-wrap {
        overflow-x: auto;
    }

    .cookie-policy-table {
        min-width: 680px;
    }

    .blog-featured-card,
    .blog-layout,
    .blog-article-layout,
    .blog-showcase-grid-large,
    .blog-trust-grid {
        grid-template-columns: 1fr;
    }

    .blog-featured-card {
        padding: 18px;
        border-radius: 20px;
    }

    .blog-toolbar {
        align-items: stretch;
    }

    .blog-sort,
    .blog-sort select {
        width: 100%;
    }

    .blog-sidebar,
    .blog-article-sidebar,
    .blog-share-rail {
        position: static;
    }

    .blog-share-rail {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        order: 1;
        gap: 8px;
        margin-bottom: 18px;
    }

    .blog-share-rail > span {
        flex-basis: 100%;
        writing-mode: horizontal-tb;
    }

    .blog-share-rail a,
    .blog-share-rail button {
        width: 38px;
        height: 38px;
    }

    .blog-share-link svg {
        width: 17px;
        height: 17px;
    }

    .blog-article-content {
        order: 2;
    }

    .blog-article-sidebar {
        order: 3;
    }
}

@media (max-width: 560px) {
    .container,
    .header-shell,
    .footer-main,
    .footer-bottom {
        width: min(100% - 28px, 1180px);
    }

    .header-inner {
        gap: 12px;
    }

    .brand-logo {
        font-size: 1.32rem;
    }

    .header-actions {
        gap: 8px;
    }

    .language-switcher-toggle {
        min-width: 64px;
        height: 38px;
        padding: 0 13px;
        font-size: 0.82rem;
    }

    .language-label-full {
        display: none;
    }

    .language-label-short {
        display: inline;
    }

    .language-switcher-menu {
        right: 0;
        min-width: min(190px, calc(100vw - 30px));
        border-radius: 16px;
    }

    .header-icon {
        width: 38px;
        height: 38px;
    }

    .button,
    .woocommerce a.button,
    .woocommerce button.button {
        width: 100%;
    }

    .about-brand-page {
        width: min(100% - 24px, 1240px);
    }

    .about-story-copy h2,
    .about-section-heading h2,
    .about-eco-section h2,
    .about-cta-section h2 {
        font-size: clamp(2.25rem, 13vw, 3.4rem);
        line-height: 1.02;
    }

    .about-story-media,
    .about-eco-section,
    .about-cta-section,
    .about-numbers-section {
        border-radius: 22px;
    }

    .about-story-media img,
    .about-eco-section img {
        min-height: 300px;
    }

    .about-number-grid {
        grid-template-columns: 1fr;
    }

    .about-number-card {
        min-height: 126px;
    }

    .about-ingredient-grid {
        grid-template-columns: 1fr;
    }

    .about-testimonial-slider {
        min-height: 470px;
    }

    .about-testimonial-card {
        min-height: 450px;
        padding: 30px 22px;
    }

    .about-testimonial-card blockquote {
        font-size: 0.98rem;
        line-height: 1.8;
    }

    .diagnostic-page {
        width: min(100% - 24px, 1240px);
        gap: 24px;
        padding-top: 18px;
    }

    .diagnostic-hero {
        padding: 22px;
        border-radius: 24px;
    }

    .diagnostic-hero h1 {
        font-size: clamp(3rem, 17vw, 4.4rem);
    }

    .diagnostic-hero .button {
        width: 100%;
    }

    .diagnostic-hero-media,
    .diagnostic-hero-media img {
        min-height: 280px;
        border-radius: 20px;
    }

    .diagnostic-indicators {
        grid-template-columns: 1fr;
    }

    .diagnostic-intro h2,
    .diagnostic-step h3,
    .diagnostic-result h3 {
        font-size: clamp(2.1rem, 12vw, 3.35rem);
    }

    .diagnostic-widget,
    .diagnostic-side-card {
        border-radius: 22px;
    }

    .diagnostic-widget {
        padding: 18px;
    }

    .diagnostic-step {
        min-height: 330px;
        padding: 20px;
        border-radius: 22px;
    }

    .diagnostic-options,
    .diagnostic-options--three,
    .diagnostic-options--two,
    .diagnostic-products {
        grid-template-columns: 1fr;
    }

    .diagnostic-actions,
    .diagnostic-result-actions {
        display: grid;
    }

    .about-cta-actions {
        display: grid;
    }

    .shop-redesign {
        padding-bottom: 34px;
    }

    .shop-hero-premium,
    .shop-premium-block,
    .shop-promo-section,
    .shop-packs-section,
    .visage-category-hero,
    .visage-collection,
    .visage-routine-note {
        width: min(100% - 24px, 1280px);
    }

    .shop-hero-premium h1 {
        font-size: clamp(2.65rem, 16vw, 4rem);
    }

    .shop-hero-premium {
        width: 100%;
        padding-right: 12px;
        padding-left: 12px;
    }

    .home-univers-section {
        padding: 54px 0;
    }

    .home-univers-grid {
        grid-template-columns: 1fr;
    }

    .home-universe-card,
    .home-universe-card--wide {
        grid-column: auto;
        min-height: 420px;
    }

    .home-universe-card a {
        border-radius: 24px;
    }

    .home-universe-content {
        padding: 24px;
        transform: translateY(0);
    }

    .home-universe-content em {
        opacity: 1;
        transform: none;
    }

    .home-universe-button {
        width: 100%;
        transform: none;
    }

    .home-diagnostic-cta {
        padding: 54px 0;
    }

    .home-diagnostic-panel {
        padding: 22px;
        border-radius: 24px;
    }

    .home-diagnostic-copy h2 {
        font-size: clamp(2.55rem, 14vw, 4rem);
    }

    .home-diagnostic-benefits {
        grid-template-columns: 1fr;
    }

    .home-diagnostic-benefits li {
        border-radius: 18px;
    }

    .home-diagnostic-copy .button {
        width: 100%;
    }

    .home-diagnostic-media {
        min-height: 310px;
        border-radius: 22px;
    }

    .home-expertise-section {
        padding: 56px 0;
    }

    .home-expertise-heading {
        margin-bottom: 28px;
        text-align: left;
    }

    .home-expertise-heading h2 {
        font-size: clamp(2.7rem, 16vw, 4.25rem);
    }

    .home-expertise-copy {
        padding: 24px;
        border-radius: 24px;
    }

    .home-expertise-copy h3 {
        font-size: clamp(2.35rem, 14vw, 3.75rem);
    }

    .home-expertise-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .home-expertise-cards article {
        min-height: 126px;
        padding: 16px;
        border-radius: 18px;
    }

    .home-expertise-cards span {
        width: 38px;
        height: 38px;
        margin-bottom: 14px;
        border-radius: 14px;
    }

    .home-expertise-cards strong {
        font-size: 0.86rem;
    }

    .home-expertise-media {
        border-radius: 24px;
    }

    .home-expertise-media img {
        min-height: 300px;
        aspect-ratio: 4 / 3;
    }

    .shop-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .shop-hero-benefits {
        grid-template-columns: 1fr;
    }

    .page-hero--compact,
    .archive-hero--product {
        min-height: auto;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .page-hero--compact h1,
    .archive-hero--product h1 {
        font-size: clamp(38px, 12vw, 56px);
    }

    .page-hero--compact p:not(.eyebrow),
    .archive-hero--product p:not(.eyebrow) {
        max-width: 100%;
    }

    .page-content-wrap--compact,
    .archive-wrap--product {
        padding-top: 24px;
    }

    .shop-hero-premium figure,
    .shop-hero-slider-card,
    .shop-lifestyle-photo,
    .shop-section-panel,
    .shop-promo-section,
    .shop-packs-section {
        border-radius: 22px;
    }

    .shop-hero-slides,
    .shop-hero-slide img {
        min-height: 430px;
    }

    .shop-hero-slide figcaption {
        right: 14px;
        bottom: 72px;
        left: 14px;
        max-width: none;
    }

    .shop-hero-arrow {
        width: 40px;
        height: 40px;
    }

    .shop-hero-prev {
        left: 10px;
    }

    .shop-hero-next {
        right: 10px;
    }

    .shop-floating-card {
        min-width: 0;
        padding: 11px 12px;
        border-radius: 15px;
    }

    .shop-floating-review {
        right: auto;
        bottom: 14px;
        left: 14px;
        max-width: 155px;
    }

    .shop-floating-delivery {
        top: 14px;
        right: 14px;
        max-width: 138px;
    }

    .shop-floating-natural {
        top: 14px;
        right: auto;
        bottom: auto;
        left: 14px;
        max-width: 96px;
    }

    .shop-floating-natural svg,
    .shop-floating-delivery svg {
        width: 20px;
        height: 20px;
    }

    .shop-section-panel {
        margin-right: 0;
        margin-left: 0;
    }

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

    .shop-products-slider {
        grid-auto-columns: minmax(170px, 76vw);
        margin-right: -12px;
        padding-right: 12px;
    }

    .shop-pack-grid,
    .packs-product-grid {
        grid-template-columns: 1fr;
    }

    .shop-product-card {
        border-radius: 20px;
    }

    .shop-product-card img {
        border-radius: 15px;
    }

    .shop-block-soins-du-visage .shop-info-card h2 {
        font-size: clamp(1.85rem, 11vw, 2.6rem);
        line-height: 1.03;
    }

    .shop-block-accessoires-beaute .shop-info-card h2 {
        max-width: 100%;
        font-size: 34px;
        line-height: 1.06;
    }

    .visage-category-copy h1 {
        font-size: clamp(2.65rem, 15vw, 4.4rem);
    }

    .visage-category-hero figure,
    .visage-collection,
    .visage-routine-note {
        border-radius: 22px;
    }

    .visage-product-grid {
        grid-template-columns: 1fr;
    }

    .visage-category-copy .button {
        width: 100%;
    }

    .product-reassurance,
    .product-review-grid,
    .product-coupon-bar > div {
        grid-template-columns: 1fr;
    }

    .woocommerce div.product .product_title {
        font-size: clamp(1.9rem, 10vw, 2.85rem);
        line-height: 1.06;
        overflow-wrap: anywhere;
    }

    .hero-actions {
        display: grid;
    }

    .franchise-stats {
        grid-template-columns: 1fr;
    }

    .franchise-network {
        width: min(100% - 24px, 1280px);
        border-radius: 24px;
    }

    .franchise-network-stats {
        grid-template-columns: 1fr;
    }

    .franchise-map-card {
        border-radius: 22px;
    }

    .franchise-map {
        min-height: 360px;
    }

    .franchise-map-cta {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 1180px) {
    .checkout-premium-layout,
    .checkout-premium-hero {
        grid-template-columns: 1fr;
    }

    .checkout-summary-column {
        position: static;
    }

    .checkout-hero-products {
        min-height: 240px;
    }

    .cart-premium-layout,
    .cart-premium-hero,
    .cart-empty-premium {
        grid-template-columns: 1fr;
    }

    .cart-summary-card {
        position: static;
    }

    .cart-product-card {
        grid-template-columns: 120px minmax(0, 1fr) minmax(140px, 0.65fr);
    }

    .cart-benefits-grid,
    .cart-recommendations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .contact-social-section {
        padding: 26px 18px;
        border-radius: 22px;
    }

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

    .contact-social-card {
        min-height: 160px;
    }

    .social-links {
        justify-content: start;
    }

    .page-content-wrap--checkout {
        width: min(100% - 24px, 1360px);
        padding-top: 24px;
    }

    .checkout-premium-hero {
        padding: 28px 20px;
        border-radius: 24px;
    }

    .checkout-premium-copy h1 {
        font-size: clamp(2.5rem, 15vw, 4rem);
    }

    .checkout-progress-steps {
        grid-template-columns: 1fr 1fr;
        border-radius: 24px;
    }

    .checkout-progress-step {
        min-height: 52px;
        font-size: 0.88rem;
    }

    .checkout-step-card,
    .checkout-order-summary-card {
        padding: 22px 18px;
        border-radius: 22px;
    }

    .checkout-coupon-fields,
    .checkout-review-item,
    .cosmethique-card-field-grid {
        grid-template-columns: 1fr;
    }

    .cosmethique-choice-list--installments label {
        gap: 12px;
        min-height: 74px;
        padding: 12px;
    }

    .installment-provider-logo {
        width: 82px;
        flex-basis: 82px;
    }

    .installment-provider-logo img {
        max-width: 82px;
        max-height: 32px;
    }

    .installment-provider-copy small {
        font-size: 0.74rem;
    }

    .checkout-review-price {
        text-align: left;
    }

    .checkout-coupon-fields .button,
    .woocommerce-checkout #place_order {
        width: 100%;
    }

    .checkout-hero-products {
        min-height: 220px;
    }

    .checkout-floating-product {
        width: min(38vw, 150px);
    }

    .page-content-wrap--cart {
        width: min(100% - 24px, 1320px);
        padding-top: 24px;
    }

    .cart-premium-hero,
    .cart-empty-premium {
        grid-template-columns: 1fr;
        padding: 28px 20px;
        border-radius: 24px;
    }

    .cart-hero-products {
        min-height: 220px;
    }

    .cart-progress-steps {
        grid-template-columns: 1fr 1fr;
        border-radius: 24px;
    }

    .cart-premium-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary-card {
        position: static;
        order: 2;
    }

    .cart-product-card {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 14px;
    }

    .cart-product-price,
    .cart-product-quantity,
    .cart-product-subtotal {
        grid-column: 1 / -1;
    }

    .cart-product-remove {
        position: absolute;
        top: 14px;
        right: 14px;
    }

    .cart-actions-panel,
    .cart-coupon-premium > div,
    .cart-empty-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .cart-actions-panel .button,
    .cart-coupon-premium input,
    .cart-empty-actions .button {
        width: 100%;
    }

    .cart-benefits-grid,
    .cart-recommendations-grid {
        grid-template-columns: 1fr;
    }

    .cart-empty-visual {
        min-height: 280px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .site,
    body.cosmethique-page-leaving .site,
    .motion-reveal,
    .front-page .category-card,
    .front-page .product-card,
    .front-page .promo-card,
    .front-page .story-grid,
    .front-page .testimonial-grid figure,
    .front-page .blog-card,
    .home-universe-card,
    .home-diagnostic-panel,
    .home-expertise-heading,
    .home-expertise-copy,
    .home-expertise-media,
    .home-expertise-cards article,
    .about-reveal,
    .shop-premium-block,
    .shop-promo-section,
    .shop-packs-section,
    .shop-product-card,
    .shop-pack-card,
    .account-login-card,
    .account-benefit-card,
    .account-stats-band,
    .checkout-premium-copy,
    .checkout-hero-products,
    .checkout-floating-product,
    .hero-content .eyebrow,
    .hero-content h1,
    .hero-content p:not(.eyebrow),
    .hero-actions,
    .floating-review {
        opacity: 1 !important;
        transform: none !important;
        translate: none !important;
    }
}

@media (max-width: 1180px) {
    .woocommerce div.product {
        grid-template-columns: 1fr;
        max-width: min(100% - 30px, 980px);
        width: min(100% - 30px, 980px);
        padding-inline: 0;
    }

    .woocommerce div.product .cosmethique-product-gallery {
        position: relative;
        top: auto;
    }

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

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

}

@media (max-width: 900px) {
    .cosmethique-product-hero-copy {
        padding: 22px;
        border-radius: 24px;
    }

    .product-hero-title {
        font-size: clamp(2.05rem, 10vw, 3.35rem);
        line-height: 1.04;
    }

    .product-hero-benefits,
    .product-detail-grid,
    .product-routine-timeline {
        grid-template-columns: 1fr;
    }

    .product-routine-timeline article:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: -18px;
        left: 32px;
        width: 1px;
        height: 18px;
    }

    .product-benefit-cards,
    .product-reassurance,
    .product-review-grid,
    .product-ingredient-grid,
    .premium-product-grid {
        grid-template-columns: 1fr;
    }

    .woocommerce div.product form.cart {
        display: grid;
        grid-template-columns: 1fr;
    }

    .woocommerce div.product form.cart div.quantity,
    .woocommerce div.product form.cart .quantity input.qty,
    .woocommerce div.product form.cart .button {
        width: 100%;
    }

    .product-favorite-button {
        width: 100%;
    }

}

@media (max-width: 640px) {
    .woocommerce div.product {
        max-width: min(100% - 24px, 620px);
        width: min(100% - 24px, 620px);
        padding-top: 20px;
    }

    .woocommerce div.product .cosmethique-product-gallery {
        padding: 12px;
        border-radius: 24px;
    }

    .woocommerce div.product .cosmethique-gallery-main img {
        aspect-ratio: 1 / 1.05;
        padding: 8px;
    }

    .product-hero-status {
        display: grid;
        grid-template-columns: 1fr;
    }

    .product-detail-grid article {
        min-height: auto;
    }

    .product-premium-section {
        padding: 20px;
        border-radius: 22px;
    }

    .product-premium-rating {
        align-items: flex-start;
    }
}

/* COSM'ETHIQUE official Figma palette */
:root {
    --cosm-blue-night: #0D1B3D;
    --cosm-petrol: #2B7D8A;
    --cosm-turquoise: #1E9CA6;
    --cosm-white: #FFFFFF;
    --cream: var(--cosm-white);
    --ivory: var(--cosm-white);
    --beige: var(--cosm-white);
    --beige-deep: var(--cosm-turquoise);
    --sage: var(--cosm-petrol);
    --sage-dark: var(--cosm-blue-night);
    --gold: var(--cosm-turquoise);
    --ink: var(--cosm-blue-night);
    --white: var(--cosm-white);
    --line: rgba(13, 27, 61, 0.13);
    --shadow: 0 22px 60px rgba(13, 27, 61, 0.13);
    --soft-shadow: 0 12px 32px rgba(13, 27, 61, 0.1);
}

body,
.site,
.shop-redesign,
.account-premium,
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.blog-page-main,
.blog-article-main {
    background-color: var(--cosm-white);
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.site-logo,
.footer-logo,
.entry-title,
.page-title,
.woocommerce div.product .product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.cart_totals h2,
.checkout-premium-title,
.account-premium h1,
.account-premium h2,
.blog-page-main h1,
.blog-page-main h2,
.blog-article-main h1,
.blog-article-main h2 {
    color: var(--cosm-blue-night);
}

.topbar,
.promo-bar,
.site-footer,
.footer-bottom,
.woocommerce button.button.alt,
.woocommerce #payment #place_order {
    background-color: var(--cosm-blue-night);
    color: var(--cosm-white);
}

.button,
.added_to_cart,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
button[type="submit"],
input[type="submit"],
.cta-button,
.hero-actions a:first-child,
.shop-info-card .button,
.visage-category-page .button-primary {
    border-color: var(--cosm-petrol);
    background-color: var(--cosm-petrol);
    color: var(--cosm-white);
}

.button:hover,
.button:focus-visible,
.added_to_cart:hover,
.added_to_cart:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible,
.woocommerce a.button:hover,
.woocommerce a.button:focus-visible,
.woocommerce button.button:hover,
.woocommerce button.button:focus-visible,
.woocommerce input.button:hover,
.woocommerce input.button:focus-visible,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit:focus-visible,
button[type="submit"]:hover,
button[type="submit"]:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible {
    border-color: var(--cosm-turquoise);
    background-color: var(--cosm-turquoise);
    color: var(--cosm-white);
}

a,
.main-navigation a,
.site-header a,
.site-footer a,
.woocommerce-Price-amount,
.price,
.amount,
.product-price,
.shop-product-price,
.shop-pack-price,
.badge,
.product-badge,
.onsale,
.eyebrow,
.shop-label {
    color: var(--cosm-blue-night);
}

a:hover,
a:focus-visible,
.main-navigation a:hover,
.main-navigation a:focus-visible,
.site-header a:hover,
.site-header a:focus-visible,
.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--cosm-turquoise);
}

.onsale,
.product-badge,
.badge,
.shop-product-card .product-badge,
.woocommerce span.onsale {
    border-color: rgba(43, 125, 138, 0.18);
    background-color: rgba(30, 156, 166, 0.12);
    color: var(--cosm-blue-night);
}

.product-card,
.shop-product-card,
.shop-pack-card,
.post-card,
.single-article,
.woocommerce div.product,
.woocommerce-cart-form,
.woocommerce-checkout,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation,
.cart_totals,
.checkout-premium-summary,
.account-login-card,
.blog-featured-card,
.blog-card,
.cookie-banner,
.cookie-modal-panel {
    border-color: rgba(13, 27, 61, 0.13);
    background-color: var(--cosm-white);
}

.single-product .woocommerce div.product {
    border-color: transparent;
    background-color: transparent;
}

input:focus,
textarea:focus,
select:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--cosm-petrol);
    box-shadow: 0 0 0 4px rgba(43, 125, 138, 0.12);
}

.product-search-form:focus-within {
    border-color: rgba(43, 125, 138, 0.32);
    box-shadow: 0 10px 24px rgba(13, 27, 61, 0.08);
}

.product-search-form input,
.product-search-form input:focus,
.product-search-form input:focus-visible,
.product-search-form input[type="search"],
.product-search-form input[type="search"]:focus,
.product-search-form input[type="search"]:focus-visible {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.product-search-form input[type="search"]::-webkit-search-decoration,
.product-search-form input[type="search"]::-webkit-search-cancel-button,
.product-search-form input[type="search"]::-webkit-search-results-button,
.product-search-form input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.site-footer,
.site-footer p,
.site-footer a,
.site-footer button,
.footer-link-list a,
.footer-link-list button {
    color: rgba(255, 255, 255, 0.74);
}

.site-footer h2,
.site-footer h3,
.site-footer .footer-logo,
.footer-commitment-card strong,
.footer-newsletter h3,
.site-footer .footer-newsletter-form button,
.footer-bottom p,
.payment-loyalty-strip strong {
    color: #FFFFFF;
}

.site-footer a:hover,
.site-footer a:focus-visible,
.site-footer button:hover,
.site-footer button:focus-visible,
.footer-link-list a:hover,
.footer-link-list a:focus-visible,
.footer-link-list button:hover,
.footer-link-list button:focus-visible {
    color: #FFFFFF;
}

.site-footer .social-link:hover,
.site-footer .social-link:focus-visible {
    color: #1E9CA6;
}

@media (max-width: 1180px) {
    .footer-main {
        grid-template-columns: minmax(0, 1.2fr) minmax(170px, 0.8fr);
    }

    .footer-utility-column {
        grid-column: 1 / -1;
    }

    .footer-newsletter {
        max-width: 680px;
    }

    .footer-bottom {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .footer-trust-badges {
        justify-content: center;
    }
}

@media (max-width: 720px) {
    .footer-main {
        grid-template-columns: 1fr;
        width: min(100% - 30px, 1280px);
        padding-top: 42px;
    }

    .footer-commitments {
        grid-template-columns: 1fr;
    }

    .footer-newsletter-form {
        grid-template-columns: 1fr;
    }

    .footer-newsletter-form button,
    .footer-newsletter-form input {
        width: 100%;
    }

    .footer-bottom,
    .payment-loyalty-strip {
        width: min(100% - 30px, 1280px);
    }

    .footer-payment-logos {
        gap: 7px;
    }

    .payment-logo svg {
        width: 72px;
        height: 27px;
    }

    .footer-trust-badges {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .footer-trust-badges span {
        justify-content: center;
    }
}

.site-footer[data-animate] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.site-footer[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .site-footer[data-animate] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Pages institutionnelles premium */
.page-content-wrap--institutional {
    padding: 0;
    max-width: none;
}

.institutional-page {
    --institutional-navy: #0D1B3D;
    --institutional-teal: #2B7D8A;
    --institutional-turquoise: #1E9CA6;
    --institutional-soft: #F5F7FF;
    --institutional-cream: #F8F4EE;
    --institutional-border: #E7ECF5;
    overflow: hidden;
    background: #FFFFFF;
    color: var(--institutional-navy);
}

.institutional-hero {
    position: relative;
    padding: clamp(58px, 7vw, 104px) 0 clamp(42px, 6vw, 82px);
    background:
        radial-gradient(circle at 10% 10%, rgba(191, 216, 247, 0.46), transparent 34%),
        linear-gradient(135deg, #FFFFFF 0%, #F5F7FF 58%, #F8F4EE 100%);
}

.institutional-hero::before,
.institutional-hero::after {
    position: absolute;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(43, 125, 138, 0.12);
    border-radius: 42% 58% 64% 36%;
    content: "";
    pointer-events: none;
}

.institutional-hero::before {
    top: 28px;
    left: -110px;
}

.institutional-hero::after {
    right: -90px;
    bottom: -80px;
    transform: rotate(24deg);
}

.institutional-hero-grid,
.institutional-split-grid,
.boutiques-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.institutional-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 650px;
}

.institutional-hero .eyebrow,
.institutional-section .eyebrow,
.institutional-split .eyebrow,
.institutional-cta .eyebrow {
    color: var(--institutional-teal);
    letter-spacing: 0.12em;
}

.institutional-hero h1,
.institutional-section-heading h2,
.institutional-split-copy h2,
.institutional-cta h2,
.boutiques-copy h2 {
    max-width: 760px;
    margin: 0;
    color: var(--institutional-navy);
    font-size: clamp(42px, 5.2vw, 82px);
    line-height: 1.03;
}

.institutional-hero p:not(.eyebrow),
.institutional-split-copy p,
.boutiques-copy p {
    max-width: 620px;
    color: #5F6F84;
    font-size: clamp(1rem, 1.2vw, 1.16rem);
    line-height: 1.8;
}

.institutional-hero-media,
.institutional-split figure {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(231, 236, 245, 0.9);
    border-radius: 32px;
    background: #FFFFFF;
    box-shadow: 0 28px 70px rgba(13, 27, 61, 0.12);
}

.institutional-hero-media img,
.institutional-split figure img {
    display: block;
    width: 100%;
    aspect-ratio: 1.16 / 1;
    object-fit: cover;
    transition: transform 700ms ease, filter 700ms ease;
}

.institutional-hero-media:hover img,
.institutional-split figure:hover img,
.ingredient-library-card:hover img,
.boutique-card:hover img,
.review-page-card:hover img {
    filter: saturate(1.04) contrast(1.02);
    transform: scale(1.045);
}

.institutional-section,
.institutional-split {
    padding: clamp(62px, 8vw, 112px) 0;
}

.institutional-section--soft {
    background: var(--institutional-soft);
}

.institutional-section-heading,
.institutional-toolbar {
    display: flex;
    gap: 24px;
    align-items: end;
    justify-content: space-between;
    margin-bottom: clamp(28px, 4vw, 48px);
}

.institutional-section-heading {
    display: block;
    max-width: 820px;
}

.institutional-section-heading h2,
.institutional-split-copy h2,
.institutional-cta h2,
.boutiques-copy h2 {
    font-size: clamp(34px, 4vw, 60px);
}

.institutional-card-grid,
.ingredient-library-grid,
.boutique-card-grid,
.review-card-grid,
.faq-category-grid,
.certification-grid {
    display: grid;
    gap: 22px;
}

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

.institutional-value-card,
.ingredient-library-card,
.faq-category-card,
.boutique-card,
.review-page-card,
.certification-badge,
.commitment-timeline-card,
.institutional-stat-card,
.ingredient-feature-card,
.quality-motion-card,
.quality-gallery-card,
.quality-choice-card,
.faq-popular-card,
.faq-search-panel,
.faq-contact-panel {
    border: 1px solid var(--institutional-border);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 45px rgba(13, 27, 61, 0.07);
    transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.institutional-value-card {
    min-height: 250px;
    padding: 28px;
    border-radius: 28px;
    transform-style: preserve-3d;
}

.institutional-value-card:hover,
.ingredient-library-card:hover,
.faq-category-card:hover,
.boutique-card:hover,
.review-page-card:hover,
.certification-badge:hover,
.commitment-timeline-card:hover,
.institutional-stat-card:hover,
.ingredient-feature-card:hover,
.quality-gallery-card:hover,
.quality-choice-card:hover,
.faq-popular-card:hover {
    border-color: rgba(43, 125, 138, 0.28);
    box-shadow: 0 26px 66px rgba(13, 27, 61, 0.13);
    transform: translateY(-8px) rotateX(1deg) rotateY(-1deg);
}

.institutional-icon {
    display: inline-grid;
    width: 52px;
    height: 52px;
    place-items: center;
    margin-bottom: 18px;
    border: 1px solid rgba(43, 125, 138, 0.16);
    border-radius: 999px;
    background: linear-gradient(145deg, #FFFFFF, #F5F7FF);
    color: var(--institutional-teal);
    box-shadow: 0 12px 28px rgba(13, 27, 61, 0.08);
}

.institutional-icon svg,
.institutional-check-list svg,
.certification-badge svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.institutional-value-card h3,
.ingredient-library-card h3,
.faq-category-card h2,
.boutique-card h3,
.review-page-card strong {
    margin: 0 0 12px;
    color: var(--institutional-navy);
    font-size: clamp(1.16rem, 1.35vw, 1.45rem);
}

.institutional-value-card p,
.ingredient-library-card p,
.faq-category-card p,
.boutique-card p,
.review-page-card p {
    margin: 0;
    color: #607184;
    line-height: 1.7;
}

.institutional-split {
    background: var(--institutional-cream);
}

.institutional-split-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
}

.institutional-check-list {
    display: grid;
    gap: 14px;
    padding: 0;
    margin: 28px 0 0;
    list-style: none;
}

.institutional-check-list li {
    display: flex;
    gap: 12px;
    align-items: center;
    color: var(--institutional-navy);
    font-weight: 700;
}

.institutional-check-list svg {
    flex: 0 0 22px;
    color: var(--institutional-turquoise);
}

.commitment-timeline,
.institutional-stats-grid,
.ingredient-feature-grid,
.quality-gallery-grid,
.quality-choice-grid,
.faq-popular-grid {
    display: grid;
    gap: 20px;
}

.commitment-timeline {
    position: relative;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 26px;
}

.commitment-timeline::before {
    position: absolute;
    top: 50%;
    right: 8%;
    left: 8%;
    height: 1px;
    background: linear-gradient(90deg, rgba(43, 125, 138, 0), rgba(43, 125, 138, 0.38), rgba(43, 125, 138, 0));
    content: "";
}

.commitment-timeline-card,
.institutional-stat-card,
.ingredient-feature-card,
.quality-choice-card,
.faq-popular-card {
    position: relative;
    z-index: 1;
    padding: 26px;
    border-radius: 26px;
}

.commitment-timeline-card h3,
.ingredient-feature-card h3,
.quality-choice-card h3,
.faq-popular-card h3,
.quality-gallery-card h3 {
    margin: 0 0 10px;
    color: var(--institutional-navy);
}

.commitment-timeline-card p,
.ingredient-feature-card p,
.quality-choice-card p,
.faq-popular-card p,
.quality-gallery-card p,
.faq-contact-panel p,
.quality-motion-card p {
    margin: 0;
    color: #607184;
    line-height: 1.72;
}

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

.institutional-stat-card {
    text-align: center;
}

.institutional-stat-card strong {
    display: block;
    color: var(--institutional-navy);
    font-size: clamp(2.8rem, 5vw, 5.6rem);
    line-height: 0.95;
}

.institutional-stat-card p {
    margin: 12px 0 0;
    color: #607184;
    font-weight: 800;
}

.institutional-toolbar {
    align-items: center;
}

.institutional-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.institutional-filter button {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--institutional-border);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--institutional-navy);
    font-weight: 700;
    cursor: pointer;
    transition: background 250ms ease, color 250ms ease, border-color 250ms ease, transform 250ms ease;
}

.institutional-filter button:hover,
.institutional-filter button:focus-visible,
.institutional-filter button.is-active {
    border-color: var(--institutional-teal);
    background: var(--institutional-navy);
    color: #FFFFFF;
    outline: none;
    transform: translateY(-2px);
}

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

.ingredient-library-card {
    overflow: hidden;
    border-radius: 26px;
}

.ingredient-library-card figure {
    overflow: hidden;
    margin: 0;
    background: var(--institutional-soft);
}

.ingredient-library-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1.08 / 1;
    object-fit: cover;
    transition: transform 650ms ease, filter 650ms ease;
}

.ingredient-library-card img[src$=".svg"] {
    padding: 32px;
    object-fit: contain;
}

.ingredient-library-card > div {
    padding: 24px;
}

.ingredient-library-card dl {
    display: grid;
    gap: 8px;
    margin: 20px 0 0;
    color: #607184;
}

.ingredient-library-card dt {
    color: var(--institutional-navy);
    font-weight: 800;
}

.ingredient-library-card dd {
    margin: 0 0 8px;
}

.ingredient-detail-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 18px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--institutional-navy);
    color: #FFFFFF;
    font-weight: 800;
    cursor: pointer;
    transition: transform 250ms ease, box-shadow 250ms ease, background 250ms ease;
}

.ingredient-detail-button:hover,
.ingredient-detail-button:focus-visible {
    background: var(--institutional-teal);
    box-shadow: 0 14px 32px rgba(13, 27, 61, 0.16);
    outline: none;
    transform: translateY(-2px);
}

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

.ingredient-detail-panel[hidden],
.ingredient-detail-card[hidden] {
    display: none !important;
}

.ingredient-panel-open {
    overflow: hidden;
}

.ingredient-detail-panel {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 24px;
}

.ingredient-panel-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(13, 27, 61, 0.58);
    cursor: pointer;
}

.ingredient-panel-dialog {
    position: relative;
    z-index: 1;
    width: min(980px, 100%);
    max-height: min(720px, 90vh);
    overflow: auto;
    border: 1px solid rgba(231, 236, 245, 0.9);
    border-radius: 30px;
    background: #FFFFFF;
    box-shadow: 0 34px 90px rgba(13, 27, 61, 0.28);
    animation: ingredientPanelIn 260ms ease both;
}

.ingredient-panel-close {
    position: sticky;
    top: 16px;
    left: auto;
    float: right;
    z-index: 2;
    min-height: 40px;
    margin: 16px 16px 0 0;
    padding: 0 16px;
    border: 1px solid var(--institutional-border);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--institutional-navy);
    font-weight: 800;
    cursor: pointer;
}

.ingredient-detail-card {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 46px);
    align-items: center;
    padding: clamp(26px, 5vw, 58px);
}

.ingredient-detail-card figure {
    overflow: hidden;
    margin: 0;
    border-radius: 24px;
    background: var(--institutional-soft);
}

.ingredient-detail-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 28px;
}

.ingredient-detail-card h2 {
    margin: 0 0 14px;
    color: var(--institutional-navy);
    font-size: clamp(34px, 4vw, 56px);
}

@keyframes ingredientPanelIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.quality-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.quality-motion-section {
    padding-bottom: 0;
}

.quality-motion-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(24px, 4vw, 54px);
    align-items: center;
    overflow: hidden;
    padding: clamp(28px, 5vw, 58px);
    border-radius: 34px;
    background:
        radial-gradient(circle at 80% 24%, rgba(191, 216, 247, 0.7), transparent 24%),
        linear-gradient(135deg, #FFFFFF, #F8F4EE);
}

.quality-motion-card h2 {
    max-width: 720px;
    margin: 0 0 16px;
    color: var(--institutional-navy);
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.06;
}

.quality-orbit {
    position: relative;
    min-height: 280px;
}

.quality-orbit span {
    position: absolute;
    display: block;
    border: 1px solid rgba(43, 125, 138, 0.18);
    border-radius: 38% 62% 58% 42%;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 44px rgba(13, 27, 61, 0.08);
    animation: qualityFloat 7s ease-in-out infinite;
}

.quality-orbit span:nth-child(1) {
    inset: 24px 40px auto auto;
    width: 170px;
    height: 170px;
}

.quality-orbit span:nth-child(2) {
    top: 116px;
    left: 18px;
    width: 130px;
    height: 130px;
    animation-delay: -1.8s;
}

.quality-orbit span:nth-child(3) {
    right: 70px;
    bottom: 12px;
    width: 90px;
    height: 90px;
    animation-delay: -3.2s;
}

@keyframes qualityFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

.quality-timeline::before {
    position: absolute;
    top: 54px;
    right: 7%;
    left: 7%;
    height: 1px;
    background: linear-gradient(90deg, rgba(43, 125, 138, 0), rgba(43, 125, 138, 0.45), rgba(43, 125, 138, 0));
    content: "";
}

.quality-step {
    position: relative;
    display: grid;
    align-content: start;
    min-height: 260px;
    padding: 22px;
    border: 1px solid var(--institutional-border);
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0 18px 40px rgba(13, 27, 61, 0.07);
}

.quality-step-number {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    margin-bottom: 16px;
    border-radius: 999px;
    background: var(--institutional-navy);
    color: #FFFFFF;
    font-weight: 800;
}

.quality-step .institutional-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
}

.quality-step h3 {
    margin: 0 0 10px;
    color: var(--institutional-navy);
    font-size: 1.05rem;
}

.quality-step p {
    margin: 0;
    color: #607184;
    font-size: 0.95rem;
    line-height: 1.6;
}

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

.certification-badge {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 76px;
    padding: 18px 20px;
    border-radius: 20px;
    color: var(--institutional-navy);
    font-weight: 800;
}

.certification-badge svg {
    color: var(--institutional-teal);
}

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

.quality-gallery-card {
    overflow: hidden;
    border-radius: 28px;
}

.quality-gallery-card figure {
    overflow: hidden;
    margin: 0;
}

.quality-gallery-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1.1 / 1;
    object-fit: cover;
    transition: transform 650ms ease, filter 650ms ease;
}

.quality-gallery-card:hover img {
    filter: saturate(1.04) contrast(1.02);
    transform: scale(1.045);
}

.quality-gallery-card div {
    padding: 24px;
}

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

.boutiques-layout {
    align-items: stretch;
}

.boutique-map-panel,
.boutiques-copy {
    border: 1px solid var(--institutional-border);
    border-radius: 30px;
    background: #FFFFFF;
    box-shadow: 0 22px 60px rgba(13, 27, 61, 0.08);
}

.boutique-map-panel {
    padding: 18px;
}

.boutique-map-visual {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(circle at 58% 44%, rgba(191, 216, 247, 0.72), transparent 9%),
        radial-gradient(circle at 43% 60%, rgba(43, 125, 138, 0.12), transparent 11%),
        linear-gradient(145deg, #F8F4EE, #FFFFFF);
}

.boutique-map-visual::before {
    position: absolute;
    inset: 11% 21% 9% 27%;
    border: 2px solid rgba(13, 27, 61, 0.12);
    border-radius: 48% 46% 38% 56%;
    background: rgba(255, 255, 255, 0.42);
    content: "";
    transform: rotate(-8deg);
}

.boutique-map-pin {
    position: absolute;
    top: var(--pin-top, 50%);
    left: var(--pin-left, 50%);
    display: grid;
    gap: 5px;
    justify-items: center;
    border: 0;
    background: transparent;
    color: var(--institutional-navy);
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.boutique-map-pin span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 2px solid var(--institutional-navy);
    border-radius: 999px;
    background: var(--institutional-cream);
    color: var(--institutional-navy);
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow: 0 12px 26px rgba(13, 27, 61, 0.16);
    transition: transform 250ms ease, background 250ms ease, color 250ms ease;
}

.boutique-map-pin strong {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    font-size: 0.78rem;
}

.boutique-map-pin:hover span,
.boutique-map-pin:focus-visible span,
.boutique-map-pin.is-active span {
    background: var(--institutional-navy);
    color: #FFFFFF;
    transform: translateY(-4px) scale(1.04);
}

.boutiques-copy {
    display: grid;
    align-content: center;
    padding: clamp(28px, 4vw, 54px);
}

.boutique-search {
    display: grid;
    gap: 12px;
    margin-top: 26px;
    color: var(--institutional-navy);
    font-weight: 800;
}

.boutique-search input {
    width: 100%;
    height: 54px;
    padding: 0 20px;
    border: 1px solid var(--institutional-border);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--institutional-navy);
    box-shadow: 0 12px 28px rgba(13, 27, 61, 0.06);
}

.boutique-search input:focus {
    border-color: var(--institutional-teal);
    outline: none;
    box-shadow: 0 0 0 4px rgba(43, 125, 138, 0.12);
}

.boutique-card-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 24px;
}

.boutique-card {
    overflow: hidden;
    border-radius: 24px;
}

.boutique-card.is-highlighted {
    border-color: rgba(30, 156, 166, 0.55);
    box-shadow: 0 28px 72px rgba(13, 27, 61, 0.16);
    transform: translateY(-8px);
}

.boutique-card img,
.review-page-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1.2 / 1;
    object-fit: cover;
    transition: transform 650ms ease, filter 650ms ease;
}

.boutique-card div {
    padding: 22px;
}

.boutique-card span {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--institutional-soft);
    color: var(--institutional-teal);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.boutique-card .button {
    width: 100%;
    margin-top: 18px;
}

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

.faq-search-panel,
.faq-contact-panel {
    display: flex;
    gap: clamp(20px, 4vw, 48px);
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: clamp(24px, 4vw, 42px);
    border-radius: 30px;
    background: linear-gradient(135deg, #FFFFFF, var(--institutional-soft));
}

.faq-search-panel h2,
.faq-contact-panel h2 {
    margin: 0;
    color: var(--institutional-navy);
    font-size: clamp(30px, 3.4vw, 52px);
    line-height: 1.08;
}

.faq-search-panel label {
    flex: 0 1 430px;
}

.faq-search-panel input {
    width: 100%;
    height: 56px;
    padding: 0 20px;
    border: 1px solid var(--institutional-border);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--institutional-navy);
    box-shadow: 0 14px 34px rgba(13, 27, 61, 0.07);
}

.faq-search-panel input:focus {
    border-color: var(--institutional-teal);
    outline: none;
    box-shadow: 0 0 0 4px rgba(43, 125, 138, 0.12);
}

.faq-popular-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 24px;
}

.faq-category-card {
    padding: 28px;
    border-radius: 28px;
}

.faq-category-card.is-empty {
    display: none;
}

.institutional-accordion {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.institutional-accordion details {
    overflow: hidden;
    border: 1px solid var(--institutional-border);
    border-radius: 18px;
    background: var(--institutional-soft);
}

.institutional-accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 16px 18px;
    color: var(--institutional-navy);
    font-weight: 900;
    cursor: pointer;
}

.institutional-accordion summary::after {
    content: "+";
    color: var(--institutional-teal);
    font-size: 1.2rem;
}

.institutional-accordion details[open] summary::after {
    content: "−";
}

.institutional-accordion details p {
    padding: 0 18px 18px;
}

.faq-contact-panel {
    margin-bottom: 0;
}

.faq-contact-panel .button {
    flex: 0 0 auto;
}

.review-summary {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid var(--institutional-border);
    border-radius: 30px;
    background: linear-gradient(135deg, #FFFFFF, var(--institutional-soft));
    box-shadow: 0 20px 55px rgba(13, 27, 61, 0.08);
}

.review-summary strong {
    display: block;
    color: var(--institutional-navy);
    font-size: clamp(42px, 5vw, 70px);
    line-height: 1;
}

.review-stars {
    color: var(--institutional-teal);
    letter-spacing: 0.08em;
}

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

.review-page-card {
    overflow: hidden;
    border-radius: 28px;
}

.review-page-card div {
    padding: 26px;
}

.review-page-card p {
    margin: 12px 0 18px;
}

.review-page-card small {
    display: block;
    color: #607184;
}

.institutional-cta {
    padding: clamp(54px, 7vw, 90px) 0;
    background: var(--institutional-navy);
}

.institutional-cta-inner {
    display: grid;
    justify-items: center;
    text-align: center;
}

.institutional-cta h2 {
    max-width: 760px;
    color: #FFFFFF;
}

.institutional-cta .button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 28px;
}

.institutional-cta .button-secondary {
    border-color: rgba(255, 255, 255, 0.42);
    color: #FFFFFF;
}

[data-filter-card][hidden],
[data-store-card][hidden] {
    display: none !important;
}

@media (max-width: 1180px) {
    .institutional-card-grid--four,
    .ingredient-library-grid,
    .quality-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quality-timeline,
    .boutique-card-grid,
    .commitment-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quality-timeline::before,
    .commitment-timeline::before {
        display: none;
    }
}

@media (max-width: 900px) {
    .institutional-hero-grid,
    .institutional-split-grid,
    .boutiques-layout {
        grid-template-columns: 1fr;
    }

    .institutional-hero-media {
        order: -1;
    }

    .institutional-toolbar,
    .review-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .institutional-filter {
        justify-content: flex-start;
    }

    .faq-category-grid,
    .review-card-grid,
    .certification-grid,
    .institutional-stats-grid,
    .ingredient-feature-grid,
    .quality-choice-grid,
    .faq-popular-grid {
        grid-template-columns: 1fr;
    }

    .quality-motion-card,
    .ingredient-detail-card {
        grid-template-columns: 1fr;
    }

    .quality-orbit {
        min-height: 180px;
        order: -1;
    }

    .faq-search-panel,
    .faq-contact-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .faq-search-panel label,
    .faq-contact-panel .button {
        width: 100%;
    }

    .boutique-map-visual {
        min-height: 420px;
    }
}

@media (max-width: 640px) {
    .institutional-hero {
        padding: 42px 0 34px;
    }

    .institutional-section,
    .institutional-split {
        padding: 48px 0;
    }

    .institutional-card-grid--four,
    .ingredient-library-grid,
    .quality-timeline,
    .boutique-card-grid,
    .commitment-timeline,
    .quality-gallery-grid {
        grid-template-columns: 1fr;
    }

    .institutional-value-card,
    .faq-category-card,
    .commitment-timeline-card,
    .institutional-stat-card,
    .ingredient-feature-card,
    .quality-choice-card,
    .faq-popular-card {
        min-height: auto;
        padding: 22px;
    }

    .ingredient-detail-panel {
        padding: 12px;
    }

    .ingredient-panel-dialog {
        border-radius: 22px;
    }

    .ingredient-detail-card {
        padding: 22px;
    }

    .boutique-map-visual {
        min-height: 340px;
    }

    .boutique-map-pin strong {
        display: none;
    }

    .institutional-cta .button-group,
    .institutional-cta .button {
        width: 100%;
    }
}

/* Page Nos engagements immersive */
.institutional-page--engagements {
    background: #FFFFFF;
}

.commitments-wide,
.commitments-hero-inner {
    width: min(1780px, calc(100% - clamp(32px, 6vw, 132px)));
    max-width: none;
    margin: 0 auto;
}

.commitments-hero {
    position: relative;
    display: grid;
    min-height: clamp(680px, 88vh, 980px);
    align-items: center;
    overflow: hidden;
    padding: clamp(72px, 8vw, 132px) 0;
    background:
        radial-gradient(circle at 8% 18%, rgba(191, 216, 247, 0.5), transparent 28%),
        radial-gradient(circle at 86% 12%, rgba(30, 156, 166, 0.14), transparent 24%),
        linear-gradient(135deg, #FFFFFF 0%, #F5F7FF 54%, #F8F4EE 100%);
}

.commitments-hero::before {
    position: absolute;
    inset: 8% auto auto -12%;
    width: 38vw;
    height: 38vw;
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 46% 54% 62% 38%;
    content: "";
}

.commitments-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(44px, 7vw, 130px);
    align-items: center;
}

.commitments-hero-copy {
    max-width: 820px;
}

.commitments-hero .eyebrow,
.commitments-section-heading .eyebrow,
.commitments-action-copy .eyebrow {
    color: var(--institutional-teal);
    letter-spacing: 0.14em;
}

.commitments-hero h1 {
    max-width: 900px;
    margin: 0;
    color: var(--institutional-navy);
    font-size: clamp(64px, 8.4vw, 146px);
    line-height: 0.92;
}

.commitments-hero-copy > p:not(.eyebrow) {
    max-width: 720px;
    margin: 28px 0 0;
    color: #5F6F84;
    font-size: clamp(1.08rem, 1.35vw, 1.34rem);
    line-height: 1.85;
}

.commitments-hero .button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.commitments-hero-collage {
    position: relative;
    min-height: clamp(500px, 67vh, 760px);
}

.commitments-collage-card {
    position: absolute;
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(231, 236, 245, 0.9);
    border-radius: clamp(26px, 3vw, 46px);
    background: #FFFFFF;
    box-shadow: 0 34px 90px rgba(13, 27, 61, 0.16);
    animation: commitmentsFloat 7s ease-in-out infinite;
}

.commitments-collage-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 800ms ease, filter 800ms ease;
}

.commitments-collage-card:hover img,
.commitments-action-media:hover img,
.commitments-priority-card:hover img,
.commitments-quote-banner:hover img {
    filter: saturate(1.04) contrast(1.03);
    transform: translate3d(0, var(--commitments-parallax, 0px), 0) scale(1.06);
}

.commitments-collage-card--large {
    inset: 0 5% 17% 12%;
}

.commitments-collage-card--small {
    right: 0;
    bottom: 4%;
    width: 34%;
    height: 42%;
    animation-delay: -2s;
}

.commitments-collage-card--wide {
    bottom: 0;
    left: 0;
    width: 48%;
    height: 30%;
    animation-delay: -4s;
}

.commitments-floating-note {
    position: absolute;
    right: 4%;
    top: 9%;
    display: grid;
    min-width: 170px;
    padding: 22px 24px;
    border: 1px solid rgba(231, 236, 245, 0.95);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 22px 60px rgba(13, 27, 61, 0.13);
    backdrop-filter: blur(14px);
}

.commitments-floating-note strong {
    color: var(--institutional-navy);
    font-size: clamp(2.3rem, 4vw, 4.4rem);
    line-height: 1;
}

.commitments-floating-note span {
    color: #607184;
    font-weight: 800;
}

@keyframes commitmentsFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.commitments-values-section,
.commitments-priorities-section {
    padding: clamp(86px, 10vw, 162px) 0;
}

.commitments-section-heading {
    max-width: 1120px;
    margin-bottom: clamp(42px, 5vw, 78px);
}

.commitments-section-heading h2 {
    max-width: 1040px;
    margin: 0;
    color: var(--institutional-navy);
    font-size: clamp(46px, 6vw, 104px);
    line-height: 0.98;
}

.commitments-values-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr 1fr 0.92fr;
    gap: clamp(18px, 2vw, 32px);
}

.commitments-value-card,
.commitments-priority-card,
.commitments-stat-card {
    border: 1px solid var(--institutional-border);
    background: #FFFFFF;
    box-shadow: 0 22px 60px rgba(13, 27, 61, 0.08);
    transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
}

.commitments-value-card {
    min-height: clamp(270px, 24vw, 410px);
    padding: clamp(28px, 3.2vw, 54px);
    border-radius: 38px;
}

.commitments-value-card:nth-child(1),
.commitments-value-card:nth-child(6) {
    grid-row: span 2;
    background:
        radial-gradient(circle at 84% 12%, rgba(30, 156, 166, 0.12), transparent 30%),
        linear-gradient(145deg, #FFFFFF, #F5F7FF);
}

.commitments-value-card:hover,
.commitments-priority-card:hover,
.commitments-stat-card:hover {
    border-color: rgba(43, 125, 138, 0.32);
    box-shadow: 0 34px 90px rgba(13, 27, 61, 0.14);
    transform: translateY(-10px);
}

.commitments-value-card .institutional-icon {
    width: 64px;
    height: 64px;
}

.commitments-value-card h3 {
    max-width: 420px;
    margin: 0 0 14px;
    color: var(--institutional-navy);
    font-size: clamp(1.45rem, 2.05vw, 2.35rem);
    line-height: 1.08;
}

.commitments-value-card p {
    max-width: 460px;
    margin: 0;
    color: #607184;
    line-height: 1.75;
}

.commitments-stats-band {
    padding: clamp(72px, 9vw, 136px) 0;
    background:
        radial-gradient(circle at 15% 22%, rgba(30, 156, 166, 0.2), transparent 28%),
        linear-gradient(135deg, #0D1B3D 0%, #08152F 100%);
}

.commitments-stats-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.8fr 1fr 1.05fr;
    gap: clamp(18px, 2vw, 32px);
}

.commitments-stat-card {
    display: grid;
    min-height: clamp(260px, 25vw, 390px);
    place-items: center;
    padding: clamp(28px, 4vw, 58px);
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 38px;
    background: rgba(255, 255, 255, 0.06);
    text-align: center;
}

.commitments-stat-card strong {
    display: block;
    color: #FFFFFF;
    font-size: clamp(4.2rem, 8.4vw, 10rem);
    line-height: 0.9;
}

.commitments-stat-card p {
    max-width: 260px;
    margin: 18px auto 0;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 800;
    line-height: 1.35;
}

.commitments-action-section {
    background: #F8F4EE;
}

.commitments-action-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    min-height: clamp(700px, 88vh, 980px);
}

.commitments-action-media {
    overflow: hidden;
    margin: 0;
}

.commitments-action-media img,
.commitments-quote-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate3d(0, var(--commitments-parallax, 0px), 0) scale(1.02);
    transition: transform 800ms ease, filter 800ms ease;
}

.commitments-action-copy {
    display: grid;
    align-content: center;
    padding: clamp(46px, 7vw, 118px);
}

.commitments-action-copy h2 {
    max-width: 760px;
    margin: 0;
    color: var(--institutional-navy);
    font-size: clamp(46px, 5.6vw, 98px);
    line-height: 0.98;
}

.commitments-action-copy > p:not(.eyebrow) {
    max-width: 660px;
    color: #607184;
    font-size: clamp(1.02rem, 1.2vw, 1.22rem);
    line-height: 1.85;
}

.commitments-action-timeline {
    display: grid;
    gap: 18px;
    margin-top: clamp(28px, 4vw, 54px);
}

.commitments-action-timeline article {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 20px;
    border: 1px solid rgba(231, 236, 245, 0.9);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 16px 40px rgba(13, 27, 61, 0.06);
}

.commitments-action-timeline h3 {
    margin: 0 0 6px;
    color: var(--institutional-navy);
}

.commitments-action-timeline p {
    margin: 0;
    color: #607184;
    line-height: 1.65;
}

.commitments-priorities-section {
    background:
        radial-gradient(circle at 92% 12%, rgba(191, 216, 247, 0.48), transparent 24%),
        #FFFFFF;
}

.commitments-priorities-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.9fr 0.9fr;
    gap: clamp(18px, 2vw, 32px);
}

.commitments-priority-card {
    overflow: hidden;
    border-radius: 38px;
}

.commitments-priority-card:first-child {
    grid-row: span 2;
}

.commitments-priority-card figure {
    overflow: hidden;
    margin: 0;
}

.commitments-priority-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1.18 / 1;
    object-fit: cover;
    transition: transform 800ms ease, filter 800ms ease;
}

.commitments-priority-card:first-child img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 520px;
}

.commitments-priority-card div {
    padding: clamp(24px, 3vw, 44px);
}

.commitments-priority-card h3 {
    margin: 0 0 10px;
    color: var(--institutional-navy);
    font-size: clamp(1.35rem, 1.8vw, 2rem);
}

.commitments-priority-card p {
    margin: 0;
    color: #607184;
    line-height: 1.7;
}

.commitments-quote-banner {
    position: relative;
    min-height: clamp(520px, 72vh, 820px);
    overflow: hidden;
    background: var(--institutional-navy);
}

.commitments-quote-banner::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13, 27, 61, 0.82), rgba(13, 27, 61, 0.28));
    content: "";
}

.commitments-quote-banner div {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    align-content: center;
    width: min(1320px, calc(100% - clamp(32px, 8vw, 150px)));
    margin: 0 auto;
    pointer-events: none;
}

.commitments-quote-banner p {
    max-width: 940px;
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(46px, 6vw, 104px);
    line-height: 1;
}

.institutional-page--engagements .institutional-cta {
    padding: clamp(78px, 10vw, 150px) 0;
}

.institutional-page--engagements .institutional-cta-inner {
    width: min(1320px, calc(100% - clamp(32px, 8vw, 150px)));
    min-height: 360px;
    justify-content: center;
    padding: clamp(34px, 6vw, 84px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 46px;
    background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 1180px) {
    .commitments-hero-inner,
    .commitments-action-grid {
        grid-template-columns: 1fr;
    }

    .commitments-hero-collage {
        min-height: 560px;
        order: -1;
    }

    .commitments-values-grid,
    .commitments-stats-grid,
    .commitments-priorities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commitments-value-card:nth-child(n),
    .commitments-priority-card:first-child {
        grid-row: auto;
    }

    .commitments-action-media {
        min-height: 520px;
    }
}

@media (max-width: 720px) {
    .commitments-wide,
    .commitments-hero-inner {
        width: min(100% - 28px, 100%);
    }

    .commitments-hero {
        min-height: auto;
        padding: 46px 0 64px;
    }

    .commitments-hero h1,
    .commitments-section-heading h2,
    .commitments-action-copy h2,
    .commitments-quote-banner p {
        font-size: clamp(42px, 14vw, 70px);
    }

    .commitments-hero-collage {
        min-height: 420px;
    }

    .commitments-collage-card--large {
        inset: 0 0 22% 0;
    }

    .commitments-collage-card--small {
        width: 42%;
        height: 36%;
    }

    .commitments-collage-card--wide {
        width: 58%;
        height: 28%;
    }

    .commitments-values-section,
    .commitments-priorities-section,
    .commitments-stats-band {
        padding: 58px 0;
    }

    .commitments-values-grid,
    .commitments-stats-grid,
    .commitments-priorities-grid {
        grid-template-columns: 1fr;
    }

    .commitments-value-card,
    .commitments-stat-card {
        min-height: auto;
    }

    .commitments-action-grid {
        min-height: auto;
    }

    .commitments-action-media,
    .commitments-quote-banner {
        min-height: 420px;
    }

    .commitments-action-copy {
        padding: 34px 18px 54px;
    }

    .commitments-action-timeline article {
        grid-template-columns: 1fr;
    }

    .commitments-priority-card:first-child img {
        min-height: 320px;
    }

    .institutional-page--engagements .institutional-cta-inner {
        width: min(100% - 28px, 100%);
        border-radius: 30px;
    }
}

/* Footer premium minimaliste */
.site-footer {
    --footer-navy: #0D1B3D;
    --footer-teal: #2B7D8A;
    --footer-gold: rgba(248, 244, 238, 0.84);
    --footer-line: rgba(255, 255, 255, 0.13);
    background:
        radial-gradient(circle at 10% 0%, rgba(30, 156, 166, 0.12), transparent 24%),
        linear-gradient(180deg, #0D1B3D 0%, #08152F 100%);
}

.site-footer::before {
    opacity: 0.34;
}

.footer-newsletter--top {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    gap: clamp(24px, 4vw, 58px);
    align-items: center;
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    padding: clamp(34px, 5vw, 58px) 0;
    border: 0;
    border-bottom: 1px solid var(--footer-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.footer-newsletter-copy {
    display: grid;
    gap: 8px;
}

.footer-newsletter--top .eyebrow {
    margin: 0;
    color: rgba(248, 244, 238, 0.72);
    letter-spacing: 0.14em;
}

.footer-newsletter--top h2 {
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(1.55rem, 2.6vw, 2.55rem);
    line-height: 1.1;
}

.footer-newsletter--top p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
}

.footer-newsletter--top .footer-newsletter-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    width: 100%;
    margin: 0;
}

.footer-newsletter--top .footer-newsletter-form input {
    height: 54px;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.08);
    transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.footer-newsletter--top .footer-newsletter-form input:focus {
    border-color: rgba(248, 244, 238, 0.9);
    box-shadow: 0 0 0 4px rgba(30, 156, 166, 0.16), 0 18px 40px rgba(0, 0, 0, 0.14);
    transform: translateY(-1px);
}

.footer-newsletter--top .footer-newsletter-form button {
    min-width: 142px;
    min-height: 54px;
    background: #FFFFFF;
    color: var(--footer-navy);
    border-color: #FFFFFF;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
}

.footer-newsletter--top .footer-newsletter-form button:hover,
.footer-newsletter--top .footer-newsletter-form button:focus-visible {
    background: #F8F4EE;
    color: var(--footer-navy);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.18);
}

.footer-main--minimal {
    grid-template-columns: minmax(240px, 1.25fr) repeat(3, minmax(150px, 0.72fr)) minmax(220px, 0.9fr);
    gap: clamp(28px, 4.8vw, 68px);
    padding: clamp(42px, 6vw, 72px) 0 clamp(34px, 4vw, 52px);
}

.footer-main--minimal .footer-brand-rich {
    gap: 18px;
}

.footer-main--minimal .footer-logo {
    font-size: clamp(1.7rem, 2.2vw, 2.25rem);
    letter-spacing: 0.04em;
}

.footer-main--minimal .footer-brand-rich > p:not(.footer-brand-note) {
    max-width: 300px;
    color: rgba(255, 255, 255, 0.66);
    line-height: 1.75;
}

.footer-brand-note {
    max-width: 310px;
    margin: 2px 0 0;
    color: rgba(248, 244, 238, 0.72);
    font-size: 0.82rem;
}

.footer-main--minimal .social-links {
    gap: 9px;
}

.footer-main--minimal .social-links .social-link {
    width: 40px;
    height: 40px;
    background: transparent;
}

.footer-nav-group {
    display: block;
}

.footer-nav-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    list-style: none;
    text-transform: uppercase;
    cursor: default;
}

.footer-nav-group summary::-webkit-details-marker {
    display: none;
}

.footer-nav-group summary > span {
    display: none;
}

.footer-main--minimal .footer-link-list {
    gap: 7px;
}

.footer-main--minimal .footer-link-list a,
.footer-main--minimal .footer-link-list button {
    min-height: 30px;
    padding: 2px 0 5px;
    border-bottom: 0;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.9rem;
}

.footer-main--minimal .footer-link-list a::after,
.footer-main--minimal .footer-link-list button::after {
    right: auto;
    width: 32px;
    background: rgba(248, 244, 238, 0.74);
}

.footer-main--minimal .footer-link-list a span,
.footer-main--minimal .footer-link-list button span {
    color: rgba(248, 244, 238, 0.72);
    opacity: 0;
}

.footer-main--minimal .footer-link-list a:hover,
.footer-main--minimal .footer-link-list a:focus-visible,
.footer-main--minimal .footer-link-list button:hover,
.footer-main--minimal .footer-link-list button:focus-visible {
    color: #FFFFFF;
    transform: translateX(4px);
}

.footer-main--minimal .footer-link-list a:hover span,
.footer-main--minimal .footer-link-list a:focus-visible span,
.footer-main--minimal .footer-link-list button:hover span,
.footer-main--minimal .footer-link-list button:focus-visible span {
    opacity: 1;
}

.footer-contact-card {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 0;
    color: rgba(255, 255, 255, 0.68);
}

.footer-contact-mark {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    margin-bottom: 4px;
    border: 1px solid rgba(248, 244, 238, 0.34);
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.footer-contact-card h2 {
    margin: 0 0 8px;
    color: #FFFFFF;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.footer-contact-card a,
.footer-contact-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.92rem;
    line-height: 1.6;
    text-decoration: none;
}

.footer-contact-card a {
    transition: color 260ms ease, transform 260ms ease;
}

.footer-contact-card a:hover,
.footer-contact-card a:focus-visible {
    color: #FFFFFF;
    transform: translateX(3px);
}

.footer-bottom {
    grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1fr) minmax(250px, 0.95fr);
    gap: clamp(18px, 3vw, 36px);
    padding: 20px 0;
}

.footer-payment-logos {
    gap: 7px;
}

.footer-payment-logos .payment-logo svg {
    width: 66px;
    height: 24px;
}

.footer-trust-badges {
    gap: 7px;
}

.footer-trust-badges span {
    min-height: 32px;
    padding: 6px 10px;
    background: transparent;
    font-size: 0.72rem;
}

.payment-loyalty-strip {
    padding-bottom: 22px;
}

.payment-loyalty-strip strong {
    min-height: 34px;
    padding: 7px 14px;
    background: transparent;
    font-size: 0.78rem;
}

@media (max-width: 1180px) {
    .footer-main--minimal {
        grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(180px, 0.8fr));
    }

    .footer-contact-card {
        grid-column: 2 / -1;
    }
}

@media (max-width: 820px) {
    .footer-newsletter--top {
        grid-template-columns: 1fr;
        width: min(100% - 32px, 1280px);
    }

    .footer-newsletter--top .footer-newsletter-form {
        grid-template-columns: 1fr;
    }

    .footer-newsletter--top .footer-newsletter-form button,
    .footer-newsletter--top .footer-newsletter-form input {
        width: 100%;
    }

    .footer-main--minimal {
        grid-template-columns: 1fr;
        width: min(100% - 32px, 1280px);
        gap: 0;
    }

    .footer-contact-card {
        grid-column: auto;
        padding-top: 26px;
    }

    .footer-nav-group {
        border-top: 1px solid var(--footer-line);
    }

    .footer-nav-group summary {
        min-height: 58px;
        margin: 0;
        cursor: pointer;
    }

    .footer-nav-group summary > span {
        display: inline-flex;
        transition: transform 250ms ease;
    }

    .footer-nav-group[open] summary > span {
        transform: rotate(45deg);
    }

    .footer-nav-group .footer-link-list {
        padding-bottom: 18px;
    }

    .footer-bottom {
        grid-template-columns: 1fr;
        width: min(100% - 32px, 1280px);
        text-align: center;
    }

    .footer-trust-badges,
    .footer-payment-logos {
        justify-content: center;
    }
}

/* Footer compact premium */
.site-footer {
    overflow: hidden;
}

.footer-newsletter--top {
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.85fr);
    gap: clamp(18px, 3vw, 38px);
    width: min(1180px, calc(100% - 40px));
    padding: clamp(18px, 3vw, 32px) 0;
}

.footer-newsletter-copy {
    gap: 5px;
}

.footer-newsletter--top .eyebrow {
    font-size: 0.68rem;
}

.footer-newsletter--top h2 {
    font-size: clamp(1.22rem, 2vw, 1.85rem);
    line-height: 1.08;
}

.footer-newsletter--top p {
    max-width: 520px;
    font-size: 0.86rem;
    line-height: 1.55;
}

.footer-newsletter--top .footer-newsletter-form {
    gap: 8px;
}

.footer-newsletter--top .footer-newsletter-form input {
    height: 46px;
    padding-right: 15px;
    padding-left: 15px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
}

.footer-newsletter--top .footer-newsletter-form button {
    min-width: 124px;
    min-height: 46px;
    padding: 0 16px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

.footer-newsletter--top .footer-newsletter-form .newsletter-status {
    min-height: 14px;
    font-size: 0.72rem;
}

.footer-main--minimal {
    grid-template-columns: minmax(220px, 1.05fr) repeat(3, minmax(132px, 0.64fr)) minmax(190px, 0.75fr);
    gap: clamp(20px, 3vw, 42px);
    width: min(1180px, calc(100% - 40px));
    padding: clamp(26px, 4vw, 44px) 0 clamp(20px, 3vw, 34px);
}

.footer-main--minimal .footer-brand-rich {
    gap: 10px;
}

.footer-main--minimal .footer-logo {
    font-size: clamp(1.45rem, 1.8vw, 1.9rem);
}

.footer-main--minimal .footer-brand-rich > p:not(.footer-brand-note) {
    max-width: 270px;
    font-size: 0.88rem;
    line-height: 1.55;
}

.footer-brand-note {
    max-width: 270px;
    font-size: 0.72rem;
    line-height: 1.45;
}

.footer-main--minimal .social-links {
    gap: 7px;
}

.footer-main--minimal .social-links .social-link {
    width: 34px;
    height: 34px;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.045);
}

.footer-main--minimal .social-links .social-link svg {
    width: 17px;
    height: 17px;
}

.footer-nav-group summary {
    min-height: auto;
    margin-bottom: 10px;
    font-size: 0.68rem;
    letter-spacing: 0.11em;
}

.footer-main--minimal .footer-link-list {
    gap: 3px;
}

.footer-main--minimal .footer-link-list a,
.footer-main--minimal .footer-link-list button {
    min-height: 24px;
    padding: 1px 0 3px;
    font-size: 0.8rem;
    line-height: 1.35;
}

.footer-main--minimal .footer-link-list a span,
.footer-main--minimal .footer-link-list button span {
    font-size: 0.96rem;
}

.footer-contact-card {
    gap: 6px;
}

.footer-contact-mark {
    width: 34px;
    height: 34px;
    margin-bottom: 2px;
    font-size: 0.68rem;
}

.footer-contact-card h2 {
    margin-bottom: 5px;
    font-size: 0.68rem;
}

.footer-contact-card a,
.footer-contact-card p {
    font-size: 0.82rem;
    line-height: 1.45;
}

.footer-bottom {
    grid-template-columns: minmax(190px, 0.78fr) minmax(420px, 1.2fr) minmax(260px, 0.86fr);
    gap: clamp(12px, 2vw, 24px);
    width: min(1180px, calc(100% - 40px));
    padding: 14px 0 18px;
}

.footer-bottom p {
    font-size: 0.76rem;
    line-height: 1.45;
}

.footer-payment-logos {
    flex-wrap: nowrap;
    gap: 6px;
}

.footer-payment-logos .payment-logo {
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.footer-payment-logos .payment-logo svg {
    width: 58px;
    height: 22px;
    display: block;
}

.footer-payment-logos .payment-logo text {
    font-size: 9px;
    dominant-baseline: middle;
}

.footer-payment-logos .payment-logo--visa text {
    font-size: 10px;
}

.footer-payment-logos .payment-logo--mastercard text {
    font-size: 4.5px;
}

.footer-payment-logos .payment-logo--klarna text {
    font-size: 8.5px;
}

.footer-payment-logos .payment-logo--apple text,
.footer-payment-logos .payment-logo--google text {
    font-size: 8.5px;
}

.footer-trust-badges {
    gap: 5px;
}

.footer-trust-badges span {
    min-height: 26px;
    gap: 5px;
    padding: 4px 8px;
    font-size: 0.65rem;
}

.footer-trust-badges svg {
    width: 13px;
    height: 13px;
}

.payment-loyalty-strip {
    display: none;
}

@media (max-width: 1180px) {
    .footer-main--minimal {
        grid-template-columns: minmax(0, 1fr) repeat(2, minmax(160px, 0.72fr));
        gap: 24px;
    }

    .footer-bottom {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-payment-logos,
    .footer-trust-badges {
        justify-content: center;
    }
}

@media (max-width: 820px) {
    .footer-newsletter--top {
        grid-template-columns: 1fr;
        width: min(100% - 32px, 1180px);
        padding: 22px 0;
    }

    .footer-newsletter--top .footer-newsletter-form {
        grid-template-columns: 1fr;
    }

    .footer-main--minimal {
        width: min(100% - 32px, 1180px);
        padding: 24px 0;
    }

    .footer-nav-group summary {
        min-height: 48px;
        margin: 0;
    }

    .footer-nav-group .footer-link-list {
        padding-bottom: 12px;
    }

    .footer-contact-card {
        padding-top: 18px;
    }

    .footer-bottom {
        width: min(100% - 32px, 1180px);
        padding: 14px 0 18px;
    }

    .footer-payment-logos {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* Ajustement FAQ : même logique premium et largeur que la boutique */
.page-content-wrap--faq .entry-content {
    width: 100%;
    margin: 0;
}

.institutional-page--faq .faq-full,
.faq-shop-hero {
    width: min(1280px, calc(100% - 40px));
    max-width: none;
    margin-right: auto;
    margin-left: auto;
}

.faq-shop-hero {
    display: grid;
    grid-template-columns: minmax(320px, 0.4fr) minmax(0, 0.6fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    padding: clamp(52px, 8vw, 96px) 0 clamp(34px, 6vw, 70px);
    background: #FFFFFF;
}

.faq-shop-hero-content {
    display: grid;
    gap: 20px;
    align-content: center;
    animation: shop-hero-copy-in 0.7s ease both;
}

.faq-shop-hero h1 {
    margin: 0;
    color: #0D1B3D;
    font-size: clamp(4.2rem, 8vw, 7.8rem);
    line-height: 0.95;
    letter-spacing: 0;
}

.faq-shop-hero p:not(.shop-label) {
    width: min(500px, 100%);
    margin: 0;
    color: #6B7C8F;
    font-size: 1.08rem;
    line-height: 1.55;
}

.faq-shop-visual-card {
    position: relative;
    min-height: clamp(430px, 46vw, 620px);
    margin: 0;
    overflow: hidden;
    border: 1px solid #E7ECF5;
    border-radius: 28px;
    background: #FFFFFF;
    box-shadow: 0 24px 70px rgba(15, 49, 72, 0.09);
    animation: shop-hero-slider-in 0.72s 0.08s ease both;
}

.faq-shop-visual-card::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 27, 61, 0.02), rgba(13, 27, 61, 0.16));
    content: "";
    pointer-events: none;
}

.faq-shop-visual-card > img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: clamp(430px, 46vw, 620px);
    object-fit: cover;
    transition: transform 700ms ease, filter 700ms ease;
}

.faq-shop-visual-card:hover > img {
    filter: saturate(1.04) contrast(1.02);
    transform: scale(1.035);
}

.faq-shop-visual-card figcaption {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 3;
    display: grid;
    gap: 6px;
    max-width: min(390px, calc(100% - 48px));
    padding: 18px 20px;
    border: 1px solid rgba(231, 236, 245, 0.88);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 38px rgba(15, 49, 72, 0.1);
    backdrop-filter: blur(12px);
}

.faq-shop-visual-card figcaption span {
    color: #6B7C8F;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.faq-shop-visual-card figcaption strong {
    color: #0D1B3D;
    font-family: var(--serif);
    font-size: clamp(1.18rem, 2vw, 1.65rem);
    line-height: 1.05;
}

.faq-floating-contact {
    bottom: 52px;
    left: 24px;
    animation-delay: 0.34s;
}

.faq-floating-answer {
    top: 26px;
    right: 26px;
    animation-delay: 0.48s;
}

.faq-floating-icon svg {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
}

.institutional-page--faq .faq-search-immersive,
.institutional-page--faq .faq-categories-immersive,
.institutional-page--faq .faq-questions-immersive,
.institutional-page--faq .faq-popular-immersive,
.institutional-page--faq .faq-help-immersive {
    padding: clamp(56px, 7vw, 96px) 0;
}

.institutional-page--faq .faq-section-heading h2,
.institutional-page--faq .faq-search-copy h2,
.institutional-page--faq .faq-question-aside h2,
.institutional-page--faq .faq-help-copy h2 {
    font-size: clamp(2.8rem, 5.2vw, 5.9rem);
    line-height: 0.98;
}

.institutional-page--faq .faq-search-giant {
    min-height: clamp(76px, 7vw, 96px);
}

.institutional-page--faq .faq-category-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.institutional-page--faq .faq-category-tile {
    min-height: 230px;
}

.institutional-page--faq .faq-categories-immersive {
    padding-top: clamp(54px, 7vw, 104px);
    background:
        radial-gradient(circle at 12% 0%, rgba(191, 216, 247, 0.5), transparent 30%),
        linear-gradient(135deg, #FFFFFF 0%, #F8F4EE 48%, #F5F7FF 100%);
}

.institutional-page--faq .faq-categories-immersive .faq-section-heading {
    max-width: 1180px;
}

.institutional-page--faq .faq-categories-immersive .faq-section-heading h2 {
    max-width: 1050px;
}

.institutional-page--faq .faq-category-tile {
    position: relative;
    overflow: hidden;
    align-content: start;
    min-height: 280px;
}

.institutional-page--faq .faq-category-tile::before {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 88% 12%, rgba(30, 156, 166, 0.12), transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 255, 0.82));
    content: "";
    opacity: 0;
    transition: opacity 300ms ease;
}

.institutional-page--faq .faq-category-tile > * {
    position: relative;
    z-index: 1;
}

.institutional-page--faq .faq-category-tile:hover::before,
.institutional-page--faq .faq-category-tile:focus-visible::before {
    opacity: 1;
}

.faq-category-topline {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(34px, 4vw, 58px);
}

.institutional-page--faq .faq-category-tile .institutional-icon {
    margin-bottom: 0;
}

.faq-category-count {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid rgba(13, 27, 61, 0.1);
    border-radius: 999px;
    background: #FFFFFF;
    color: #6B7C8F;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.institutional-page--faq .faq-category-tile em {
    display: inline-flex;
    align-items: center;
    margin-top: 24px;
    color: #2B7D8A;
    font-size: 0.88rem;
    font-style: normal;
    font-weight: 900;
    transition: color 250ms ease, transform 250ms ease;
}

.institutional-page--faq .faq-category-tile em::after {
    margin-left: 10px;
    content: "→";
    transition: transform 250ms ease;
}

.institutional-page--faq .faq-category-tile:hover em,
.institutional-page--faq .faq-category-tile:focus-visible em {
    color: #0D1B3D;
    transform: translateY(-2px);
}

.institutional-page--faq .faq-category-tile:hover em::after,
.institutional-page--faq .faq-category-tile:focus-visible em::after {
    transform: translateX(5px);
}

.institutional-page--faq .faq-questions-layout {
    grid-template-columns: minmax(280px, 0.34fr) minmax(0, 0.66fr);
}

.institutional-page--faq .faq-help-grid {
    grid-template-columns: minmax(0, 0.56fr) minmax(0, 0.44fr);
}

@media (max-width: 900px) {
    .faq-shop-hero,
    .institutional-page--faq .faq-full {
        width: min(100% - 30px, 1280px);
    }

    .faq-shop-hero,
    .institutional-page--faq .faq-questions-layout,
    .institutional-page--faq .faq-help-grid {
        grid-template-columns: 1fr;
    }

    .faq-shop-hero {
        gap: 24px;
        padding-top: 40px;
    }

    .faq-shop-hero-content {
        max-width: 720px;
    }

    .faq-shop-hero h1 {
        font-size: clamp(3.6rem, 12vw, 6rem);
    }

    .faq-shop-visual-card,
    .faq-shop-visual-card > img {
        min-height: clamp(360px, 62vw, 560px);
    }

    .institutional-page--faq .faq-category-strip,
    .institutional-page--faq .faq-popular-large-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .institutional-page--faq .faq-question-aside {
        position: relative;
        top: auto;
    }
}

@media (max-width: 640px) {
    .faq-shop-hero,
    .institutional-page--faq .faq-full {
        width: min(100% - 28px, 100%);
    }

    .faq-shop-hero h1 {
        font-size: clamp(3.4rem, 16vw, 5rem);
    }

    .faq-shop-hero .shop-hero-actions,
    .faq-shop-hero .button {
        width: 100%;
    }

    .faq-shop-hero .shop-hero-benefits {
        grid-template-columns: 1fr;
    }

    .faq-shop-visual-card figcaption {
        right: 14px;
        bottom: 14px;
        left: 14px;
        max-width: none;
    }

    .faq-floating-contact {
        bottom: 116px;
        left: 14px;
    }

    .faq-floating-answer {
        top: 14px;
        right: 14px;
    }

    .institutional-page--faq .faq-category-strip,
    .institutional-page--faq .faq-popular-large-grid {
        grid-template-columns: 1fr;
    }
}

/* FAQ search responsive fix */
.institutional-page--faq .faq-search-immersive {
    overflow: hidden;
}

.institutional-page--faq .faq-search-giant {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.institutional-page--faq .faq-search-giant input {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    text-overflow: ellipsis;
}

.institutional-page--faq .faq-search-copy h2 {
    max-width: 1120px;
    overflow-wrap: break-word;
}

.institutional-page--faq .faq-suggestion-list {
    max-width: 100%;
}

@media (max-width: 1024px) {
    .institutional-page--faq .faq-search-copy h2 {
        font-size: clamp(3rem, 8vw, 5rem);
    }

    .institutional-page--faq .faq-search-giant {
        min-height: 78px;
        padding-right: 24px;
        padding-left: 20px;
    }

    .institutional-page--faq .faq-search-giant input {
        font-size: clamp(1rem, 2.5vw, 1.25rem);
    }
}

@media (max-width: 720px) {
    .institutional-page--faq .faq-search-copy {
        margin-bottom: 24px;
    }

    .institutional-page--faq .faq-search-copy h2 {
        font-size: clamp(2.4rem, 11vw, 4rem);
        line-height: 1.04;
    }

    .institutional-page--faq .faq-search-giant {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        min-height: 64px;
        padding-right: 16px;
        padding-left: 12px;
        border-radius: 24px;
    }

    .institutional-page--faq .faq-search-icon {
        width: 42px;
        height: 42px;
    }

    .institutional-page--faq .faq-search-icon svg {
        width: 20px;
        height: 20px;
    }

    .institutional-page--faq .faq-search-giant input {
        font-size: 1rem;
        line-height: 1.2;
    }

    .institutional-page--faq .faq-suggestion-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .institutional-page--faq .faq-suggestion-list button {
        width: 100%;
        min-height: 42px;
        padding: 0 14px;
        font-size: 0.86rem;
        white-space: nowrap;
    }
}

@media (max-width: 420px) {
    .institutional-page--faq .faq-search-copy h2 {
        font-size: clamp(2.15rem, 13vw, 3.2rem);
    }

    .institutional-page--faq .faq-search-giant {
        grid-template-columns: 36px minmax(0, 1fr);
        min-height: 58px;
        padding-right: 12px;
        padding-left: 10px;
        border-radius: 20px;
    }

    .institutional-page--faq .faq-search-icon {
        width: 36px;
        height: 36px;
    }

    .institutional-page--faq .faq-suggestion-list {
        grid-template-columns: 1fr;
    }
}

/* Pages institutionnelles alignées sur la forme Boutique / FAQ */
.page-content-wrap--engagements .entry-content,
.page-content-wrap--ingredients .entry-content,
.page-content-wrap--qualite .entry-content {
    width: 100%;
    margin: 0;
}

.institutional-shop-hero,
.institutional-page--ingredients .container,
.institutional-page--qualite .container,
.institutional-page--engagements .commitments-wide,
.institutional-page--engagements .commitments-hero-inner {
    width: min(1280px, calc(100% - 40px));
    max-width: none;
    margin-right: auto;
    margin-left: auto;
}

.institutional-shop-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(320px, 0.4fr) minmax(0, 0.6fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    padding: clamp(52px, 8vw, 96px) 0 clamp(34px, 6vw, 70px);
    background: #FFFFFF;
}

.institutional-shop-hero-content {
    display: grid;
    gap: 20px;
    align-content: center;
    animation: shop-hero-copy-in 0.7s ease both;
}

.institutional-shop-hero h1 {
    margin: 0;
    color: #0D1B3D;
    font-size: clamp(4rem, 7.4vw, 7.2rem);
    line-height: 0.95;
    letter-spacing: 0;
}

.institutional-shop-hero p:not(.shop-label) {
    width: min(520px, 100%);
    margin: 0;
    color: #6B7C8F;
    font-size: 1.08rem;
    line-height: 1.6;
}

.institutional-shop-visual-card {
    position: relative;
    min-height: clamp(430px, 46vw, 620px);
    margin: 0;
    overflow: hidden;
    border: 1px solid #E7ECF5;
    border-radius: 28px;
    background: #FFFFFF;
    box-shadow: 0 24px 70px rgba(15, 49, 72, 0.09);
    animation: shop-hero-slider-in 0.72s 0.08s ease both;
}

.institutional-shop-visual-card::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 27, 61, 0.01), rgba(13, 27, 61, 0.14));
    content: "";
    pointer-events: none;
}

.institutional-shop-visual-card > img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: clamp(430px, 46vw, 620px);
    object-fit: cover;
    transition: transform 700ms ease, filter 700ms ease;
}

.institutional-shop-visual-card:hover > img {
    filter: saturate(1.04) contrast(1.02);
    transform: scale(1.035);
}

.institutional-shop-visual-card figcaption {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 3;
    display: grid;
    gap: 6px;
    max-width: min(390px, calc(100% - 48px));
    padding: 18px 20px;
    border: 1px solid rgba(231, 236, 245, 0.88);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 38px rgba(15, 49, 72, 0.1);
    backdrop-filter: blur(12px);
}

.institutional-shop-visual-card figcaption span {
    color: #6B7C8F;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.institutional-shop-visual-card figcaption strong {
    color: #0D1B3D;
    font-family: var(--serif);
    font-size: clamp(1.18rem, 2vw, 1.65rem);
    line-height: 1.05;
}

.institutional-floating-card--one {
    bottom: 52px;
    left: 24px;
    animation-delay: 0.34s;
}

.institutional-floating-card--two {
    top: 26px;
    right: 26px;
    animation-delay: 0.48s;
}

.institutional-page--engagements .commitments-values-section,
.institutional-page--engagements .commitments-priorities-section,
.institutional-page--ingredients .institutional-section,
.institutional-page--qualite .institutional-section {
    padding: clamp(58px, 7vw, 104px) 0;
}

.institutional-page--engagements .commitments-values-section,
.institutional-page--ingredients .institutional-section--ingredients-library,
.institutional-page--qualite .institutional-section--quality-process {
    background:
        radial-gradient(circle at 12% 0%, rgba(191, 216, 247, 0.36), transparent 30%),
        #FFFFFF;
}

.institutional-page--ingredients .institutional-toolbar,
.institutional-page--qualite .quality-motion-card {
    border: 1px solid rgba(231, 236, 245, 0.9);
    border-radius: 30px;
    background: linear-gradient(135deg, #FFFFFF, #F5F7FF);
    box-shadow: 0 24px 70px rgba(13, 27, 61, 0.08);
}

.institutional-page--ingredients .institutional-toolbar {
    padding: clamp(24px, 4vw, 42px);
}

.institutional-page--ingredients .ingredient-library-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 30px);
}

.institutional-page--ingredients .ingredient-library-card {
    min-height: 100%;
    border: 1px solid rgba(231, 236, 245, 0.9);
    background: #FFFFFF;
    box-shadow: 0 24px 70px rgba(13, 27, 61, 0.07);
    transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.institutional-page--ingredients .ingredient-library-card:hover {
    border-color: rgba(43, 125, 138, 0.26);
    box-shadow: 0 34px 90px rgba(13, 27, 61, 0.11);
    transform: translateY(-7px);
}

.institutional-page--ingredients .ingredient-library-card figure {
    min-height: 250px;
}

.institutional-page--ingredients .ingredient-library-card h3,
.institutional-page--qualite .quality-step h3,
.institutional-page--engagements .commitments-value-card h3 {
    font-size: clamp(1.18rem, 1.7vw, 1.62rem);
}

.institutional-page--ingredients .ingredient-feature-grid,
.institutional-page--qualite .quality-choice-grid,
.institutional-page--qualite .certification-grid {
    gap: clamp(18px, 2vw, 28px);
}

.institutional-page--qualite .quality-motion-card {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.38fr);
    padding: clamp(30px, 5vw, 58px);
}

.institutional-page--qualite .quality-timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 28px);
}

.institutional-page--qualite .quality-timeline::before {
    display: none;
}

.institutional-page--qualite .quality-step {
    min-height: 260px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: 28px;
    transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.institutional-page--qualite .quality-step:hover {
    border-color: rgba(43, 125, 138, 0.26);
    box-shadow: 0 28px 76px rgba(13, 27, 61, 0.11);
    transform: translateY(-7px);
}

.institutional-page--qualite .quality-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 30px);
}

.institutional-page--qualite .quality-gallery-card {
    display: grid;
    grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.48fr);
    align-items: stretch;
    border: 1px solid rgba(231, 236, 245, 0.9);
    background: #FFFFFF;
    box-shadow: 0 24px 70px rgba(13, 27, 61, 0.07);
}

.institutional-page--qualite .quality-gallery-card figure,
.institutional-page--qualite .quality-gallery-card img {
    height: 100%;
}

.institutional-page--engagements .commitments-values-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 28px);
}

.institutional-page--engagements .commitments-value-card {
    min-height: 280px;
}

.institutional-page--engagements .commitments-action-grid {
    width: min(1280px, calc(100% - 40px));
    min-height: 620px;
    margin: 0 auto;
    border-radius: 34px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(13, 27, 61, 0.08);
}

.institutional-page--engagements .commitments-action-copy {
    background: #FFFFFF;
}

.institutional-page--engagements .commitments-priorities-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.institutional-page--engagements .commitments-priority-card:first-child {
    grid-column: span 2;
}

@media (max-width: 1100px) {
    .institutional-shop-hero,
    .institutional-page--engagements .commitments-action-grid {
        grid-template-columns: 1fr;
    }

    .institutional-shop-hero-content {
        max-width: 720px;
    }

    .institutional-shop-hero h1 {
        font-size: clamp(3.6rem, 12vw, 6rem);
    }

    .institutional-page--ingredients .ingredient-library-grid,
    .institutional-page--qualite .quality-timeline,
    .institutional-page--engagements .commitments-values-grid,
    .institutional-page--engagements .commitments-priorities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .institutional-page--engagements .commitments-priority-card:first-child {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .institutional-shop-hero,
    .institutional-page--ingredients .container,
    .institutional-page--qualite .container,
    .institutional-page--engagements .commitments-wide,
    .institutional-page--engagements .commitments-action-grid {
        width: min(100% - 28px, 100%);
    }

    .institutional-shop-hero {
        gap: 24px;
        padding-top: 40px;
    }

    .institutional-shop-hero h1 {
        font-size: clamp(3.2rem, 15vw, 5rem);
    }

    .institutional-shop-hero .shop-hero-actions,
    .institutional-shop-hero .button {
        width: 100%;
    }

    .institutional-shop-hero .shop-hero-benefits,
    .institutional-page--ingredients .ingredient-library-grid,
    .institutional-page--ingredients .ingredient-feature-grid,
    .institutional-page--qualite .quality-timeline,
    .institutional-page--qualite .quality-gallery-grid,
    .institutional-page--qualite .quality-choice-grid,
    .institutional-page--qualite .certification-grid,
    .institutional-page--engagements .commitments-values-grid,
    .institutional-page--engagements .commitments-stats-grid,
    .institutional-page--engagements .commitments-priorities-grid {
        grid-template-columns: 1fr;
    }

    .institutional-shop-visual-card,
    .institutional-shop-visual-card > img {
        min-height: 360px;
    }

    .institutional-shop-visual-card figcaption {
        right: 14px;
        bottom: 14px;
        left: 14px;
        max-width: none;
    }

    .institutional-floating-card--one {
        bottom: 112px;
        left: 14px;
    }

    .institutional-floating-card--two {
        top: 14px;
        right: 14px;
    }

    .institutional-page--qualite .quality-motion-card,
    .institutional-page--qualite .quality-gallery-card {
        grid-template-columns: 1fr;
    }
}

/* Finition pages institutionnelles : même présence visuelle que Boutique / FAQ */
.page-content-wrap--engagements,
.page-content-wrap--ingredients,
.page-content-wrap--qualite {
    width: 100%;
    max-width: none;
    padding: 0;
}

.page-content-wrap--engagements .entry-content > *,
.page-content-wrap--ingredients .entry-content > *,
.page-content-wrap--qualite .entry-content > * {
    margin-top: 0;
}

.institutional-page--engagements,
.institutional-page--ingredients,
.institutional-page--qualite {
    background:
        linear-gradient(180deg, #FFFFFF 0%, #F5F7FF 36%, #FFFFFF 100%);
}

.institutional-page--engagements .institutional-shop-hero,
.institutional-page--ingredients .institutional-shop-hero,
.institutional-page--qualite .institutional-shop-hero {
    width: min(1280px, calc(100% - 40px));
    min-height: clamp(560px, 76vh, 760px);
    padding-top: clamp(58px, 8vw, 112px);
    padding-bottom: clamp(52px, 7vw, 92px);
}

.institutional-page--engagements .institutional-shop-hero::before,
.institutional-page--ingredients .institutional-shop-hero::before,
.institutional-page--qualite .institutional-shop-hero::before {
    position: absolute;
    inset: 14% auto auto -8%;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(191, 216, 247, 0.7);
    border-radius: 42% 58% 66% 34%;
    content: "";
    pointer-events: none;
}

.institutional-page--engagements .institutional-shop-hero-content,
.institutional-page--ingredients .institutional-shop-hero-content,
.institutional-page--qualite .institutional-shop-hero-content {
    position: relative;
    z-index: 1;
}

.institutional-page--engagements .institutional-shop-hero h1,
.institutional-page--ingredients .institutional-shop-hero h1,
.institutional-page--qualite .institutional-shop-hero h1 {
    max-width: 720px;
    font-size: clamp(5.2rem, 8.1vw, 8.2rem);
}

.institutional-page--ingredients .institutional-section,
.institutional-page--qualite .institutional-section,
.institutional-page--engagements .commitments-values-section,
.institutional-page--engagements .commitments-priorities-section,
.institutional-page--engagements .commitments-action-section {
    position: relative;
}

.institutional-page--ingredients .institutional-section--ingredients-library,
.institutional-page--qualite .institutional-section--quality-process {
    padding-top: clamp(70px, 8vw, 122px);
}

.institutional-page--ingredients .institutional-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin-bottom: clamp(28px, 4vw, 56px);
}

.institutional-page--ingredients .institutional-toolbar h2,
.institutional-page--qualite .institutional-section-heading h2 {
    max-width: 940px;
    font-size: clamp(3.2rem, 5.4vw, 6.2rem);
    line-height: 0.98;
}

.institutional-page--ingredients .ingredient-library-card {
    overflow: hidden;
    border-radius: 30px;
}

.institutional-page--ingredients .ingredient-library-card figure {
    overflow: hidden;
    margin: 0;
    background:
        radial-gradient(circle at 72% 18%, rgba(191, 216, 247, 0.5), transparent 28%),
        #F8F4EE;
}

.institutional-page--ingredients .ingredient-library-card figure img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
}

.institutional-page--ingredients .ingredient-library-card > div {
    padding: clamp(22px, 3vw, 34px);
}

.institutional-page--ingredients .ingredient-library-card dl {
    display: grid;
    grid-template-columns: minmax(110px, 0.38fr) minmax(0, 1fr);
    gap: 8px 14px;
    margin: 20px 0 0;
}

.institutional-page--ingredients .ingredient-library-card dt {
    color: #0D1B3D;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.institutional-page--ingredients .ingredient-library-card dd {
    margin: 0;
    color: #607184;
    line-height: 1.55;
}

.institutional-page--ingredients .ingredient-detail-button {
    margin-top: 24px;
}

.institutional-page--ingredients .institutional-section--soft {
    background:
        radial-gradient(circle at 88% 4%, rgba(191, 216, 247, 0.56), transparent 24%),
        #F8F4EE;
}

.institutional-page--ingredients .ingredient-feature-card,
.institutional-page--qualite .quality-choice-card,
.institutional-page--qualite .certification-badge {
    border-radius: 28px;
    box-shadow: 0 24px 70px rgba(13, 27, 61, 0.075);
    transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}

.institutional-page--ingredients .ingredient-feature-card:hover,
.institutional-page--qualite .quality-choice-card:hover,
.institutional-page--qualite .certification-badge:hover {
    border-color: rgba(43, 125, 138, 0.3);
    box-shadow: 0 34px 90px rgba(13, 27, 61, 0.12);
    transform: translateY(-7px);
}

.institutional-page--qualite .quality-motion-section {
    background:
        linear-gradient(135deg, #F8F4EE 0%, #FFFFFF 54%, #F5F7FF 100%);
}

.institutional-page--qualite .quality-motion-card {
    min-height: clamp(360px, 38vw, 520px);
}

.institutional-page--qualite .quality-timeline {
    align-items: stretch;
}

.institutional-page--qualite .institutional-section--quality-certifications {
    background:
        radial-gradient(circle at 12% 8%, rgba(30, 156, 166, 0.1), transparent 28%),
        #F8F4EE;
}

.institutional-page--qualite .certification-badge {
    justify-content: flex-start;
    min-height: 94px;
    padding: 22px 24px;
    background: #FFFFFF;
}

.institutional-page--qualite .quality-gallery-card {
    overflow: hidden;
    min-height: 330px;
    border-radius: 30px;
}

.institutional-page--qualite .quality-gallery-card figure {
    overflow: hidden;
    margin: 0;
}

.institutional-page--qualite .quality-gallery-card div {
    display: grid;
    align-content: center;
    padding: clamp(24px, 3vw, 40px);
}

.institutional-page--qualite .quality-gallery-card h3,
.institutional-page--qualite .quality-choice-card h3,
.institutional-page--ingredients .ingredient-feature-card h3 {
    margin-top: 0;
    color: #0D1B3D;
}

.institutional-page--engagements .commitments-stats-band {
    margin: 0;
}

.institutional-page--engagements .commitments-stats-band {
    padding: clamp(58px, 7vw, 96px) 0;
    overflow: hidden;
}

.institutional-page--engagements .commitments-stats-grid {
    width: min(1280px, calc(100% - 40px));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 24px);
    align-items: stretch;
}

.institutional-page--engagements .commitments-stat-card {
    min-width: 0;
    min-height: clamp(210px, 18vw, 280px);
    padding: clamp(24px, 3vw, 38px);
    border-color: rgba(255, 255, 255, 0.14);
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.14);
}

.institutional-page--engagements .commitments-stat-card strong {
    max-width: 100%;
    color: #FFFFFF;
    font-size: clamp(3rem, 4.8vw, 5.8rem);
    line-height: 0.92;
    letter-spacing: 0;
    overflow-wrap: normal;
    white-space: nowrap;
}

.institutional-page--engagements .commitments-stat-card:last-child strong {
    font-size: clamp(2.65rem, 4.15vw, 5rem);
}

.institutional-page--engagements .commitments-stat-card p {
    max-width: 220px;
    margin-top: clamp(14px, 2vw, 22px);
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(0.9rem, 1vw, 1.04rem);
    line-height: 1.35;
}

.institutional-page--engagements .commitments-values-section {
    background:
        radial-gradient(circle at 8% 0%, rgba(191, 216, 247, 0.5), transparent 30%),
        #FFFFFF;
}

.institutional-page--engagements .commitments-priorities-section {
    background:
        radial-gradient(circle at 90% 8%, rgba(191, 216, 247, 0.5), transparent 24%),
        #F5F7FF;
}

@media (max-width: 1100px) {
    .institutional-page--engagements .institutional-shop-hero,
    .institutional-page--ingredients .institutional-shop-hero,
    .institutional-page--qualite .institutional-shop-hero,
    .institutional-page--ingredients .institutional-toolbar {
        grid-template-columns: 1fr;
    }

    .institutional-page--ingredients .institutional-filter {
        justify-content: flex-start;
    }

    .institutional-page--engagements .commitments-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .institutional-page--engagements .institutional-shop-hero,
    .institutional-page--ingredients .institutional-shop-hero,
    .institutional-page--qualite .institutional-shop-hero {
        width: min(100% - 28px, 100%);
        min-height: auto;
        padding-top: 42px;
        padding-bottom: 48px;
    }

    .institutional-page--engagements .institutional-shop-hero h1,
    .institutional-page--ingredients .institutional-shop-hero h1,
    .institutional-page--qualite .institutional-shop-hero h1,
    .institutional-page--ingredients .institutional-toolbar h2,
    .institutional-page--qualite .institutional-section-heading h2 {
        font-size: clamp(3rem, 14vw, 4.7rem);
    }

    .institutional-page--ingredients .ingredient-library-card dl {
        grid-template-columns: 1fr;
    }

    .institutional-page--engagements .commitments-stats-grid {
        width: min(100% - 28px, 100%);
        grid-template-columns: 1fr;
    }

    .institutional-page--engagements .commitments-stat-card {
        min-height: 178px;
    }

    .institutional-page--engagements .commitments-stat-card strong {
        font-size: clamp(3rem, 16vw, 4.9rem);
    }

    .institutional-page--engagements .commitments-stat-card:last-child strong {
        font-size: clamp(2.85rem, 14vw, 4.4rem);
    }

    .institutional-page--qualite .quality-gallery-card,
    .institutional-page--qualite .quality-motion-card {
        min-height: auto;
    }
}

/* FAQ immersive pleine largeur */
.institutional-page--faq {
    --faq-navy: #0D1B3D;
    --faq-petrol: #2B7D8A;
    --faq-turquoise: #1E9CA6;
    --faq-soft: #F5F7FF;
    --faq-cream: #F8F4EE;
    --faq-border: #E7ECF5;
    background:
        linear-gradient(180deg, #FFFFFF 0%, #F5F7FF 44%, #FFFFFF 100%);
}

.faq-full {
    width: min(1840px, calc(100% - clamp(28px, 5vw, 124px)));
    max-width: none;
    margin: 0 auto;
}

.faq-immersive-hero {
    position: relative;
    display: grid;
    min-height: clamp(660px, 88vh, 940px);
    overflow: hidden;
    isolation: isolate;
    background: var(--faq-navy);
}

.faq-immersive-hero > img {
    position: absolute;
    inset: -6% 0;
    z-index: -2;
    width: 100%;
    height: 112%;
    object-fit: cover;
    transform: translate3d(0, var(--faq-parallax, 0), 0) scale(1.04);
    filter: saturate(0.96) contrast(1.04);
}

.faq-immersive-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 78% 30%, rgba(30, 156, 166, 0.22), transparent 34%),
        linear-gradient(90deg, rgba(13, 27, 61, 0.86) 0%, rgba(13, 27, 61, 0.58) 46%, rgba(13, 27, 61, 0.18) 100%),
        linear-gradient(180deg, rgba(13, 27, 61, 0.08), rgba(13, 27, 61, 0.42));
}

.faq-immersive-hero-content {
    display: grid;
    align-content: end;
    width: min(1560px, calc(100% - clamp(32px, 8vw, 154px)));
    min-height: inherit;
    margin: 0 auto;
    padding: clamp(88px, 11vw, 170px) 0 clamp(70px, 10vw, 150px);
}

.faq-immersive-hero .eyebrow {
    color: rgba(255, 255, 255, 0.78);
}

.faq-immersive-hero h1 {
    max-width: 1080px;
    margin: 10px 0 0;
    color: #FFFFFF;
    font-size: clamp(70px, 10vw, 168px);
    line-height: 0.92;
    letter-spacing: 0;
}

.faq-immersive-hero p:not(.eyebrow) {
    max-width: 700px;
    margin: 26px 0 34px;
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(1.08rem, 1.5vw, 1.42rem);
    line-height: 1.75;
}

.faq-search-immersive,
.faq-categories-immersive,
.faq-questions-immersive,
.faq-popular-immersive,
.faq-help-immersive {
    padding: clamp(72px, 8vw, 136px) 0;
}

.faq-search-immersive {
    background:
        radial-gradient(circle at 16% 0%, rgba(191, 216, 247, 0.38), transparent 32%),
        #FFFFFF;
}

.faq-search-copy {
    display: grid;
    gap: 12px;
    max-width: 980px;
    margin-bottom: clamp(30px, 4vw, 54px);
}

.faq-section-heading h2,
.faq-search-copy h2,
.faq-question-aside h2,
.faq-help-copy h2 {
    margin: 0;
    color: var(--faq-navy);
    font-size: clamp(42px, 5vw, 84px);
    line-height: 1;
}

.faq-search-giant {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(14px, 2vw, 26px);
    align-items: center;
    min-height: clamp(78px, 8vw, 108px);
    padding: 0 clamp(22px, 4vw, 42px);
    border: 1px solid rgba(13, 27, 61, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 30px 90px rgba(13, 27, 61, 0.11);
    transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.faq-search-giant:focus-within {
    border-color: rgba(43, 125, 138, 0.42);
    box-shadow: 0 36px 100px rgba(13, 27, 61, 0.15), 0 0 0 5px rgba(43, 125, 138, 0.1);
    transform: translateY(-2px);
}

.faq-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(48px, 5vw, 66px);
    height: clamp(48px, 5vw, 66px);
    border-radius: 50%;
    background: var(--faq-soft);
    color: var(--faq-petrol);
}

.faq-search-icon svg {
    width: 24px;
    height: 24px;
}

.faq-search-giant input {
    width: 100%;
    min-width: 0;
    border: 0 !important;
    outline: 0 !important;
    background: transparent;
    box-shadow: none !important;
    color: var(--faq-navy);
    font-size: clamp(1.08rem, 1.7vw, 1.55rem);
}

.faq-suggestion-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.faq-suggestion-list button {
    min-height: 42px;
    padding: 0 20px;
    border: 1px solid rgba(13, 27, 61, 0.1);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--faq-navy);
    font-weight: 800;
    cursor: pointer;
    transition: transform 250ms ease, border-color 250ms ease, background 250ms ease, color 250ms ease;
}

.faq-suggestion-list button:hover,
.faq-suggestion-list button:focus-visible {
    border-color: var(--faq-petrol);
    background: var(--faq-navy);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.faq-categories-immersive {
    background:
        linear-gradient(135deg, #F8F4EE 0%, #FFFFFF 48%, #F5F7FF 100%);
}

.faq-section-heading {
    display: grid;
    gap: 12px;
    max-width: 1100px;
    margin-bottom: clamp(34px, 5vw, 68px);
}

.faq-category-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
}

.faq-category-tile {
    display: grid;
    min-height: clamp(210px, 18vw, 290px);
    padding: clamp(24px, 3vw, 38px);
    border: 1px solid rgba(13, 27, 61, 0.09);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--faq-navy);
    text-align: left;
    box-shadow: 0 24px 70px rgba(13, 27, 61, 0.08);
    cursor: pointer;
    transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease, background 300ms ease;
}

.faq-category-tile .institutional-icon {
    width: 58px;
    height: 58px;
    margin-bottom: clamp(28px, 4vw, 58px);
}

.faq-category-tile strong {
    display: block;
    font-size: clamp(1.22rem, 1.7vw, 1.72rem);
    line-height: 1.12;
}

.faq-category-tile small {
    display: block;
    margin-top: 10px;
    color: #66778B;
    font-size: 0.98rem;
    line-height: 1.55;
}

.faq-category-tile:hover,
.faq-category-tile:focus-visible {
    border-color: rgba(43, 125, 138, 0.34);
    background: #FFFFFF;
    box-shadow: 0 34px 92px rgba(13, 27, 61, 0.13);
    transform: translateY(-8px);
}

.faq-questions-immersive {
    background: var(--faq-soft);
}

.faq-questions-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.38fr) minmax(0, 1fr);
    gap: clamp(34px, 5vw, 86px);
    align-items: start;
}

.faq-question-aside {
    position: sticky;
    top: 34px;
    display: grid;
    gap: 18px;
    padding: clamp(26px, 4vw, 48px);
    border-radius: 34px;
    background: linear-gradient(145deg, #FFFFFF, #F8F4EE);
    box-shadow: 0 26px 76px rgba(13, 27, 61, 0.1);
}

.faq-question-aside p:not(.eyebrow),
.faq-help-copy p {
    color: #617286;
    font-size: clamp(1rem, 1.15vw, 1.16rem);
    line-height: 1.85;
}

.faq-accordion-column,
.faq-large-accordion-list {
    display: grid;
    gap: clamp(18px, 2.4vw, 30px);
}

.faq-accordion-group {
    display: grid;
    gap: 20px;
    padding: clamp(24px, 3vw, 42px);
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 22px 70px rgba(13, 27, 61, 0.08);
}

.faq-accordion-group.is-empty {
    display: none;
}

.faq-accordion-group header {
    display: flex;
    gap: 18px;
    align-items: center;
}

.faq-accordion-group header p {
    margin: 0 0 5px;
    color: var(--faq-petrol);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.faq-accordion-group h3 {
    margin: 0;
    color: var(--faq-navy);
    font-size: clamp(1.8rem, 2.7vw, 3.3rem);
    line-height: 1.04;
}

.faq-large-accordion {
    overflow: hidden;
    border: 1px solid var(--faq-border);
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0 14px 34px rgba(13, 27, 61, 0.055);
    transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}

.faq-large-accordion:hover {
    border-color: rgba(43, 125, 138, 0.32);
    box-shadow: 0 22px 58px rgba(13, 27, 61, 0.09);
    transform: translateY(-3px);
}

.faq-large-accordion[open] {
    border-color: rgba(43, 125, 138, 0.42);
}

.faq-large-accordion summary {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    min-height: clamp(78px, 7vw, 104px);
    padding: clamp(20px, 3vw, 34px);
    color: var(--faq-navy);
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

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

.faq-large-accordion summary::after {
    display: inline-grid;
    flex: 0 0 42px;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--faq-soft);
    color: var(--faq-petrol);
    content: "+";
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 250ms ease, background 250ms ease, color 250ms ease;
}

.faq-large-accordion[open] summary::after {
    background: var(--faq-navy);
    color: #FFFFFF;
    content: "-";
    transform: rotate(180deg);
}

.faq-large-accordion summary span {
    font-size: clamp(1.1rem, 1.5vw, 1.42rem);
    line-height: 1.35;
}

.faq-large-accordion p {
    max-width: 920px;
    margin: 0;
    padding: 0 clamp(20px, 3vw, 34px) clamp(24px, 3vw, 34px);
    color: #607184;
    font-size: clamp(1rem, 1.1vw, 1.12rem);
    line-height: 1.85;
}

.faq-popular-immersive {
    background: #FFFFFF;
}

.faq-popular-large-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
}

.faq-popular-large-card {
    display: grid;
    align-content: start;
    min-height: 260px;
    padding: clamp(24px, 3vw, 38px);
    border: 1px solid rgba(13, 27, 61, 0.08);
    border-radius: 30px;
    background: linear-gradient(145deg, #FFFFFF, #F5F7FF);
    box-shadow: 0 24px 70px rgba(13, 27, 61, 0.08);
    transition: transform 280ms ease, box-shadow 280ms ease;
}

.faq-popular-large-card:hover {
    box-shadow: 0 34px 90px rgba(13, 27, 61, 0.12);
    transform: translateY(-7px);
}

.faq-popular-large-card h3 {
    margin: 24px 0 12px;
    color: var(--faq-navy);
    font-size: clamp(1.25rem, 1.7vw, 1.8rem);
    line-height: 1.12;
}

.faq-popular-large-card p {
    margin: 0;
    color: #607184;
    line-height: 1.75;
}

.faq-help-immersive {
    background:
        radial-gradient(circle at 85% 0%, rgba(191, 216, 247, 0.44), transparent 26%),
        var(--faq-cream);
}

.faq-help-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(30px, 5vw, 82px);
    align-items: center;
}

.faq-help-media {
    overflow: hidden;
    min-height: clamp(420px, 52vw, 720px);
    margin: 0;
    border-radius: 38px;
    background: #FFFFFF;
    box-shadow: 0 32px 94px rgba(13, 27, 61, 0.13);
}

.faq-help-media img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    transform: translate3d(0, var(--faq-parallax, 0), 0) scale(1.03);
    transition: transform 700ms ease;
}

.faq-help-media:hover img {
    transform: translate3d(0, var(--faq-parallax, 0), 0) scale(1.07);
}

.faq-help-copy {
    display: grid;
    gap: 18px;
    max-width: 720px;
}

.faq-help-copy .button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
}

@media (max-width: 1180px) {
    .faq-category-strip,
    .faq-popular-large-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .faq-questions-layout,
    .faq-help-grid {
        grid-template-columns: 1fr;
    }

    .faq-question-aside {
        position: relative;
        top: auto;
    }
}

@media (max-width: 720px) {
    .faq-full,
    .faq-immersive-hero-content {
        width: min(100% - 28px, 100%);
    }

    .faq-immersive-hero {
        min-height: 620px;
    }

    .faq-immersive-hero h1 {
        font-size: clamp(56px, 17vw, 86px);
    }

    .faq-search-immersive,
    .faq-categories-immersive,
    .faq-questions-immersive,
    .faq-popular-immersive,
    .faq-help-immersive {
        padding: 58px 0;
    }

    .faq-search-giant {
        min-height: 70px;
        padding: 0 18px;
    }

    .faq-search-icon {
        width: 44px;
        height: 44px;
    }

    .faq-category-strip,
    .faq-popular-large-grid {
        grid-template-columns: 1fr;
    }

    .faq-category-tile {
        min-height: 190px;
    }

    .faq-accordion-group,
    .faq-question-aside {
        padding: 22px;
        border-radius: 26px;
    }

    .faq-large-accordion summary {
        min-height: 74px;
    }

    .faq-help-media {
        min-height: 360px;
        order: -1;
        border-radius: 28px;
    }

    .faq-help-copy .button-group,
    .faq-help-copy .button {
        width: 100%;
    }
}