/* Metric-matched fallback for Instrument Serif. Ensures the hero text
   can render IMMEDIATELY in a local serif (Times New Roman / Georgia)
   with overrides that approximate Instrument Serif's metrics, then swap
   to the real woff2 with no layout shift. Used in the --font-heading
   stack as the second candidate. */
@font-face {
    font-family: 'Instrument Serif Fallback';
    src: local('Times New Roman'), local('Times'), local('Georgia');
    size-adjust: 90%;
    ascent-override: 95%;
    descent-override: 22%;
    line-gap-override: 0%;
}

/* Archivo (body font) — declared in the deferred sheet so its woff2
   doesn't compete with the LCP-critical Instrument Serif fetch.
   Instrument Serif @font-face stays inline in each page's critical CSS.
   font-display:swap shows fallback briefly until Archivo arrives. */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 300 600;
    font-stretch: 100% 125%;
    font-display: swap;
    src: url(/assets/fonts/archivo-variable-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 300 600;
    font-stretch: 100% 125%;
    font-display: swap;
    src: url(/assets/fonts/archivo-variable-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
    /* Colors */
    --color-bg: #090908;
    --color-bg-elevated: #1a1a1a;
    --color-bg-dark: #020202;
    --color-cream: #F0EDE8;
    --color-surface-light: #F2F2F2;
    --color-border: #212120;
    --color-border-light: #D5D0C8;
    --color-text: #FFFFFF;
    --color-text-dark: #090908;
    --color-text-muted: #848483;
    --color-text-muted-light: #6B6860;
    --color-accent: #aa7b37;
    --color-accent-light: #BF9456;
    --color-accent-hover: #c9924a;
    --color-bg-section: #0f0f0e;
    --color-surface-dark: #222;

    /* Opacity colors */
    --color-text-70: rgba(255, 255, 255, 0.7);
    --color-text-80: rgba(255, 255, 255, 0.8);
    --color-text-15: rgba(255, 255, 255, 0.15);
    --color-text-30: rgba(255, 255, 255, 0.3);
    --color-text-08: rgba(255, 255, 255, 0.08);
    --color-bg-75: rgba(9, 9, 8, 0.75);
    --color-bg-60: rgba(9, 9, 8, 0.6);

    /* Notice semantic tokens — tweak here to restyle banners site-wide */
    --color-notice-info-bg: rgba(255, 255, 255, 0.04);
    --color-notice-info-accent: var(--color-text-muted);
    --color-notice-success-bg: rgba(170, 123, 55, 0.10);
    --color-notice-success-accent: var(--color-accent);
    --color-notice-error-bg: rgba(217, 74, 74, 0.12);
    --color-notice-error-accent: #d94a4a;

    /* Overlays & shadows */
    --overlay-light: rgba(0, 0, 0, 0.15);
    --overlay-medium: rgba(0, 0, 0, 0.45);
    --overlay-heavy: rgba(0, 0, 0, 0.6);
    --overlay-dark: rgba(0, 0, 0, 0.8);
    --overlay-darkest: rgba(0, 0, 0, 0.9);
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 -20px 60px rgba(0, 0, 0, 0.4);

    /* Fonts */
    --font-heading: 'Instrument Serif', 'Instrument Serif Fallback', serif;
    --font-body: 'Archivo', sans-serif;
    --font-mono: monospace;

    /* Type scale: 1.414 (augmented fourth), base 18px */
    --text-sm: 0.707rem;
    --text-base: 0.8rem;
    --text-lg: 1rem;
    --text-h4: 1.414rem;
    --text-h3: 2rem;
    --text-h2: 2.827rem;
    --text-h1: 3.998rem;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-section: 8rem;

    /* Radius */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-full: 50%;
}

html {
    font-size: 18px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-stretch: expanded;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

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

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

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

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.75rem 0;
    background-color: var(--color-bg-75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
}

.site-logo img {
    width: 100px;
    height: auto;
    flex-shrink: 0;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
}

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

.site-nav {
    display: flex;
    gap: 1.25rem;
    list-style: none;
}

.site-nav a {
    color: var(--color-text-70);
    font-size: var(--text-sm);
    font-stretch: normal;
    letter-spacing: 0.1em;
    font-weight: 500;
    transition: color 0.3s;
    white-space: nowrap;
}

.site-nav a:hover {
    color: var(--color-text);
}

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

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 1001;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    transition: transform 0.3s, opacity 0.3s;
}

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    padding: var(--space-xl);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s, visibility 0s linear 0.3s;
}

.mobile-nav.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding-top: 12px;
    transition: opacity 0.3s, visibility 0s;
}

.mobile-nav__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-nav__close {
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    padding: 4px;
}

.mobile-nav__links {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: var(--space-lg);
}

.mobile-nav__links a {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    color: var(--color-text);
    letter-spacing: 0.02em;
    transition: color 0.3s;
}

.mobile-nav__links a:hover {
    color: var(--color-accent);
}

.mobile-nav__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    padding-bottom: var(--space-xl);
}

.mobile-nav__phone {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    letter-spacing: 0.1em;
}

@media (max-width: 1280px) {
    .nav-toggle {
        display: flex;
    }

    nav, .header-right {
        display: none;
    }

    /* Keep the cart icon visible on mobile, sitting just left of the hamburger. */
    .site-header .header-cart {
        display: flex;
        margin-left: auto;
        margin-right: var(--space-xl);
    }

    .site-header .container {
        flex-direction: row;
        gap: 0;
    }

    .header-actions {
        gap: 0.75rem;
    }
}

/* ===================== BUTTONS ===================== */

.btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    font-size: var(--text-sm);
    font-family: var(--font-body);
    font-stretch: normal;
    letter-spacing: 0.1em;
    font-weight: 600;
    border-radius: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn--outline {
    border: 1px solid var(--color-text-30);
    color: var(--color-text);
    background: transparent;
}

.btn--outline:hover {
    border-color: var(--color-text);
    background: var(--color-text);
    color: var(--color-bg);
}

.btn--accent {
    background: var(--color-accent);
    color: var(--color-text);
}

.btn--accent:hover {
    background: var(--color-accent-hover);
}

.btn--dark {
    background: var(--color-text-dark);
    color: var(--color-text);
}

.btn--dark:hover {
    background: var(--color-surface-dark);
}

.btn--dark-outline {
    border: 1px solid var(--color-text-dark);
    color: var(--color-text-dark);
    background: transparent;
}

.btn--dark-outline:hover {
    background: var(--color-text-dark);
    color: var(--color-cream);
}

.btn--large {
    padding: 1.125rem 3rem;
    font-size: var(--text-sm);
}

/* ===================== HERO (fixed bg + content scrolls over) ===================== */

.hero-wrapper {
    position: relative;
}

/* Fixed background image — stays in place while everything scrolls */
.hero__bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -2;
}

.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--overlay-medium);
    z-index: -1;
}

/* Hero text content — scrolls normally with the page */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 1;
}

.hero__content {
    padding: 0 2rem;
}

.hero__title {
    font-family: var(--font-heading);
    font-size: var(--text-h1);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: 2rem;
    max-width: 800px;
}

.hero__title span {
    display: block;
    opacity: 0;
    transform: translateY(60px);
    animation: heroReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero__title span:nth-child(2) { animation-delay: 0.15s; }
.hero__title span:nth-child(3) { animation-delay: 0.3s; }

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

.hero__cta {
    margin-top: 1.5rem;
    opacity: 0;
    animation: heroReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}


/* ===================== MARQUEE ===================== */

.marquee {
    overflow: hidden;
    white-space: nowrap;
    padding: 1.5rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.marquee--cream {
    background: var(--color-cream);
    border-color: var(--color-border-light);
}

.marquee__track {
    display: inline-flex;
    animation: marqueeScroll 25s linear infinite;
}

.marquee--reverse .marquee__track {
    animation-direction: reverse;
}

.marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    padding: 0 2rem;
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: 400;

    letter-spacing: 0.05em;
    color: var(--color-text);
}

.marquee--cream .marquee__item {
    color: var(--color-text-dark);
}

.marquee__item::after {
    content: '\25C6';
    font-size: 0.5em;
    opacity: 0.4;
}

.marquee--badges {
    padding: 1rem 0;
    border-top: none;
    border-bottom: none;
}

.marquee--badges .marquee__track {
    animation: marqueeScroll 30s linear infinite;
}

.marquee__badge {
    height: 60px;
    width: auto;
    margin: 0 2rem;
    flex-shrink: 0;
    filter: grayscale(1) brightness(0.8);
    opacity: 0.6;
}


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

/* ===================== FOUNDER ===================== */

.founder {
    padding: 6rem 0 4rem;
    overflow: hidden;
}

.founder__inner {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
}

.founder__name {
    font-family: var(--font-heading);
    font-size: var(--text-h1);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-top: -20%;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
    text-transform: none;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
    will-change: transform;
}

.founder__image-wrap {
    position: relative;
    z-index: 1;
    max-width: 500px;
    margin: 0 auto;
    overflow: hidden;
}

.founder__image {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
}

.founder__quote {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: 400;
    line-height: 1.4;
    font-style: italic;
    margin-top: 4rem;
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
    text-transform: none;
}

.founder__title {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    text-transform: none;
    margin-bottom: 2rem;
}

.founder__cta {
    margin-top: 1rem;
}

/* ===================== ABOUT (full-width image section) ===================== */

.about-hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.about-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.about-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.15);
    will-change: transform;
}

.about-hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-medium);
    z-index: 1;
}

.about-hero__content {
    position: relative;
    z-index: 2;
    padding: 6rem 3rem 0;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.about-hero__heading {
    font-family: var(--font-heading);
    font-size: var(--text-h1);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
    text-transform: none;
    margin-top: auto;
}

.about-hero__body {
    max-width: 560px;
}

.about-hero__text {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--color-text-80);
    margin-bottom: 1rem;
}

.about-hero__stats {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 4rem;
    padding: 2.5rem 3rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.about-hero__stats-bg {
    position: relative;
    z-index: 2;
    background-color: var(--overlay-light);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.about__stat-number {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 400;
    color: var(--color-accent);
}

.about__stat-stars {
    color: var(--color-accent);
    font-size: 0.6em;
    letter-spacing: 0.05em;
}

.about__stat-label {
    font-size: var(--text-sm);
    letter-spacing: 0.15em;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

/* ===================== GIFT TICKET ===================== */

.gift-ticket {
    padding: var(--space-4xl) 0;
    background: var(--color-bg-section);
}

.gift-ticket__card {
    display: grid;
    grid-template-columns: 1fr 1.4fr auto;
    border-radius: 0;
    overflow: hidden;
    background: var(--color-bg);
    min-height: 420px;
}

.gift-ticket__content {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gift-ticket__label {
    font-size: var(--text-sm);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1.5rem;
}

.gift-ticket__heading {
    font-family: var(--font-heading);
    font-size: var(--text-h1);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

.gift-ticket__text {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 340px;
}

.gift-ticket__video {
    position: relative;
    overflow: hidden;
}

.gift-ticket__video-wrap {
    width: 100%;
    height: 100%;
    position: relative;
}

.gift-ticket__video-wrap iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.gift-ticket__unmute {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 0;
    background: var(--overlay-heavy);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-text-15);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    z-index: 2;
}

.gift-ticket__unmute:hover {
    background: var(--overlay-dark);
}

.gift-ticket__stub {
    width: 100px;
    background: var(--color-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0.75rem;
    position: relative;
    border-left: 2px dashed rgba(0, 0, 0, 0.15);
}

.gift-ticket__stub::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -13px;
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: var(--color-bg);
}

.gift-ticket__stub::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: -13px;
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: var(--color-bg);
}

.gift-ticket__stub-logo {
    width: 50px;
    height: auto;
    filter: brightness(0);
}

.gift-ticket__stub-barcode {
    writing-mode: vertical-rl;
    font-family: var(--font-mono);
    font-size: 1.5rem;
    letter-spacing: -0.1em;
    color: rgba(0, 0, 0, 0.4);
    line-height: 1;
}

@media (max-width: 900px) {
    .gift-ticket__card {
        grid-template-columns: 1fr;
        grid-template-rows: auto 300px auto;
    }

    .gift-ticket__content {
        padding: 2.5rem 2rem;
    }

    .gift-ticket__video {
        min-height: 300px;
    }

    .gift-ticket__stub {
        width: 100%;
        flex-direction: row;
        padding: 1rem 2rem;
        border-left: none;
        border-top: 2px dashed rgba(0, 0, 0, 0.15);
    }

    .gift-ticket__stub::before {
        top: -13px;
        left: auto;
        right: -12px;
    }

    .gift-ticket__stub::after {
        bottom: auto;
        top: -13px;
        left: -12px;
    }

    .gift-ticket__stub-barcode {
        writing-mode: horizontal-tb;
    }
}

/* ===================== CHECKOUT DRAWER ===================== */

.checkout-drawer__backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay-medium);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s, visibility 0s linear 0.3s;
}

.checkout-drawer__backdrop.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s, visibility 0s;
}

.checkout-drawer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    z-index: 9999;
    background: var(--color-cream);
    color: var(--color-text-dark);
    border-radius: 0;
    padding: 1.5rem 2rem 2.5rem;
    width: 100%;
    max-width: 480px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.35s;
    visibility: hidden;
}

.checkout-drawer.active {
    transform: translateX(-50%) translateY(0);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

.checkout-drawer__handle {
    width: 36px;
    height: 4px;
    background: var(--overlay-light);
    border-radius: 0;
    margin: 0 auto 1.25rem;
}

.checkout-drawer__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.checkout-drawer__title {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: 400;
}

.checkout-drawer__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-muted-light);
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
}

.checkout-drawer__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted-light);
    margin-bottom: 1.5rem;
}

.checkout-drawer__amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.voucher-tag {
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border-light);
    border-radius: 0;
    background: none;
    color: var(--color-text-dark);
    font-family: var(--font-body);
    font-size: var(--text-base);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.voucher-tag:hover {
    border-color: var(--color-accent);
}

.voucher-tag.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text);
}

.checkout-drawer__input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--color-text);
    border: 1px solid var(--color-border-light);
    border-radius: 0;
    color: var(--color-text-dark);
    font-family: var(--font-body);
    font-size: var(--text-base);
    margin-bottom: 1.25rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.checkout-drawer__input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent);
}

.checkout-drawer__pay {
    width: 100%;
    text-align: center;
    margin-bottom: 0.75rem;
}

.checkout-drawer__secure {
    font-size: var(--text-sm);
    color: var(--color-text-muted-light);
    text-align: center;
}

@media (min-width: 769px) {
    .checkout-drawer {
        bottom: auto;
        top: 50%;
        transform: translateX(-50%) translateY(-50%) scale(0.95);
        opacity: 0;
        pointer-events: none;
        border-radius: 0;
        transition: transform 0.3s, opacity 0.3s;
    }

    .checkout-drawer.active {
        transform: translateX(-50%) translateY(-50%) scale(1);
        opacity: 1;
        pointer-events: auto;
    }

    .checkout-drawer__handle {
        display: none;
    }
}

/* ===================== TEAM ===================== */

.team {
    padding: var(--space-section) 0;
}

.team__heading {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 400;

    text-align: center;
    margin-bottom: 4rem;
    letter-spacing: -0.01em;
}

.team__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.team__member {
    position: relative;
    overflow: hidden;
}

.team__member img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.team__member:hover img {
    transform: scale(1.05);
}

.team__member-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.75) 50%, transparent 100%);
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.team__member:hover .team__member-info {
    transform: translateY(0);
}

.team__member-name {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 400;

    margin-bottom: 0.25rem;
}

.team__member-role {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ===================== TESTIMONIALS ===================== */

.testimonials {
    padding: var(--space-section) 0;
    background: var(--color-cream);
    color: var(--color-text-dark);
}

.testimonials .section-heading {
    color: var(--color-text-dark);
}

.testimonials__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 900px;
    margin: 0 auto;
}

.testimonial {
    text-align: center;
    padding: 2.5rem;
}

.testimonial__thumb {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 2rem;
    cursor: pointer;
}

.testimonial__photo {
    width: 200px;
    height: 200px;
    border-radius: 0;
    object-fit: cover;
}

.testimonial__play {
    position: absolute;
    bottom: -8px;
    right: 0;
    width: 44px;
    height: 44px;
    border-radius: 0;
    background: var(--color-text);
    color: var(--color-text-dark);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    z-index: 1;
}

.testimonial__play:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.testimonial__thumb:hover .testimonial__photo {
    filter: brightness(0.85);
    transition: filter 0.3s;
}

.testimonial__quote {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 1.5rem;
    color: var(--color-text-muted-light);
}

.testimonial__name {
    font-weight: 600;
    font-size: var(--text-base);

    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}

.testimonial__role {
    color: var(--color-text-muted-light);
    font-size: var(--text-sm);
}

/* ===================== VIDEO OVERLAY ===================== */

.video-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--overlay-darkest);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s, visibility 0s linear 0.3s;
}

.video-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s, visibility 0s;
}

.video-overlay__inner {
    position: relative;
    width: 90vw;
    max-width: 900px;
    aspect-ratio: 16/9;
}

.video-overlay__player {
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
}

.video-overlay__player iframe {
    width: 100%;
    height: 100%;
}

.video-overlay__close {
    position: absolute;
    top: -3rem;
    right: 0;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
    line-height: 1;
}

.video-overlay__close:hover {
    opacity: 1;
}

/* ===================== SECTION HEADING ===================== */

.section-heading {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 400;

    text-align: center;
    margin-bottom: 3rem;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

/* ===================== STORE ===================== */

.store-section {
    padding: var(--space-section) 0;
}

.store__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 1000px;
    margin: 0 auto;
}

.store__category {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 500;

    letter-spacing: 0.1em;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.store__category:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: translateY(-2px);
}

/* ===================== SOCIAL ===================== */

.social-section {
    padding: var(--space-4xl) 0;
    background: var(--color-cream);
    color: var(--color-text-dark);
}

.social-section .section-heading {
    color: var(--color-text-dark);
}

.social-section__text {
    color: var(--color-text-muted-light);
    font-size: var(--text-base);
    max-width: 480px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.social-section__links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.social-section__links a {
    color: var(--color-text-dark);
    transition: color 0.3s, transform 0.3s;
}

.social-section__links a:hover {
    color: var(--color-accent);
    transform: translateY(-2px);
}

/* ===================== BEFORE & AFTER ===================== */

.before-after {
    padding: var(--space-section) 0;
}

.ba-pair {
    position: relative;
    max-width: 900px;
    margin: 0 auto 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    overflow: hidden;
}

.ba-pair__before {
    overflow: hidden;
}

.ba-pair__after {
    overflow: hidden;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0s;
}

.ba-pair__before img,
.ba-pair__after img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
}

.ba-pair__after.revealed {
    transition: none;
}

/* ===================== FAQ ===================== */

.faq {
    padding: var(--space-section) 0;
    background: var(--color-cream);
    color: var(--color-text-dark);
}

.faq .section-heading {
    color: var(--color-text-dark);
    text-align: left;
    max-width: 900px;
    margin: 0 auto 3rem;
}

.faq__grid {
    max-width: 900px;
    margin: 0 auto;
}

.faq__item {
    border-bottom: 1px solid var(--color-border-light);
}

.faq__item:first-child {
    border-top: 1px solid var(--color-border-light);
}

.faq__item summary {
    font-weight: 600;
    font-size: var(--text-base);
    cursor: pointer;
    padding: 1.25rem 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s;
}

.faq__item summary:hover {
    color: var(--color-accent);
}

.faq__item summary::after {
    content: '+';
    font-size: var(--text-h4);
    font-weight: 300;
    color: var(--color-text-muted-light);
    flex-shrink: 0;
    margin-left: 1rem;
    transition: transform 0.3s;
}

.faq__item[open] summary::after {
    content: '\2212';
    transform: rotate(180deg);
}

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

summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.faq__item p {
    color: var(--color-text-muted-light);
    font-size: var(--text-base);
    line-height: 1.7;
    font-weight: 300;
    padding: 0 0 1.25rem 0;
    max-width: 680px;
}

.faq__item a {
    color: var(--color-accent);
}

/* ===================== BRANDS ===================== */

.brands {
    padding: var(--space-4xl) 0;
}

.brands__grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap;
}

.brands__grid img {
    height: 36px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.35;
    transition: opacity 0.4s;
}

.brands__grid > :nth-child(1) img,
.brands__grid > img:nth-child(1) {
    height: 56px;
}

.brands__grid > :nth-child(3) img,
.brands__grid > img:nth-child(3) {
    height: 29px;
}

.brands__grid img:hover {
    opacity: 0.7;
}

/* ===================== BOTTOM REVEAL (curtain effect) ===================== */

.main-wrapper {
    position: relative;
    z-index: 1;
    isolation: isolate;
}

.bottom-reveal {
    position: sticky;
    bottom: 0;
    background: var(--color-bg);
}

.page-body {
    position: relative;
    z-index: 2;
    background: var(--color-bg);
    border-radius: 0;
    margin-top: -2rem;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.4);
}

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

.site-footer {
    padding: 4rem 0 2rem;
    border-top: 1px solid var(--color-border);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

.footer__brand {
    font-family: var(--font-heading);
    font-size: var(--text-h4);

    margin-bottom: 1rem;
}

.footer__desc {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.7;
}

.footer__col-title {
    font-size: var(--text-sm);

    letter-spacing: 0.15em;
    color: var(--color-text-muted);
    margin-bottom: 1.25rem;
}

.footer__links {
    list-style: none;
}

.footer__links li {
    margin-bottom: 0.625rem;
}

.footer__links a {
    color: var(--color-text-muted);
    font-size: 12px;
    transition: color 0.3s;
}

.footer__links a:hover {
    color: var(--color-text);
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.footer__social {
    display: flex;
    gap: 1rem;
}

.footer__social a {
    color: var(--color-text-muted);
    transition: color 0.3s;
}

.footer__social a:hover {
    color: var(--color-text);
}

/* ===================== PHILOSOPHY PILLARS (About page style) ===================== */

.philosophy {
    padding: var(--space-section) 0;
}

.philosophy__header {
    text-align: center;
    margin-bottom: 5rem;
}

.philosophy__label {
    font-size: var(--text-sm);

    letter-spacing: 0.2em;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.philosophy__title {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 400;

    letter-spacing: -0.02em;
}

.philosophy__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto;
}

.philosophy__pillar {
    padding: 2.5rem 0;
    border-top: 1px solid var(--color-border);
}

.philosophy__pillar-number {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--color-accent);
    margin-bottom: 1.5rem;
    letter-spacing: 0.1em;
}

.philosophy__pillar-title {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: 400;

    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}

.philosophy__pillar-text {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: 1.7;
}

/* ===================== TREATMENTS LIST (Treatments page style) ===================== */

.treatments {
    background: var(--color-cream);
    color: var(--color-text-dark);
    padding: var(--space-section) 0;
}

.treatments__category {
    max-width: 900px;
    margin: 0 auto 4rem;
}

.treatments__category:last-child {
    margin-bottom: 0;
}

.treatments__cat-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-text-dark);
}

.treatments__cat-title {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: 400;

    letter-spacing: 0.02em;
}

.treatments__cat-count {
    font-size: var(--text-sm);

    letter-spacing: 0.15em;
    color: var(--color-text-muted-light);
}

.treatments__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border-light);
    transition: padding-left 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;
    cursor: default;
}

.treatments__item:hover {
    padding-left: 1rem;
    color: var(--color-accent);
}

.treatments__item-name {
    font-size: var(--text-base);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.treatments__item-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
}

.treatments__item-duration {
    font-size: var(--text-sm);
    color: var(--color-text-muted-light);

    letter-spacing: 0.1em;
}

.treatments--dark {
    background: var(--color-bg);
    color: var(--color-text);
}

.treatments--dark .treatments__cat-header {
    border-bottom-color: var(--color-border);
}

.treatments--dark .treatments__cat-title {
    color: var(--color-text);
}

.treatments--dark .treatments__cat-count {
    color: var(--color-text-muted);
}

.treatments--dark .treatments__item {
    border-bottom-color: var(--color-border);
    color: var(--color-text);
}

.treatments--dark .treatments__item:hover {
    color: var(--color-accent);
}

.treatments--dark .treatments__item-duration {
    color: var(--color-text-muted);
}

.page-content__title {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 400;
    margin-bottom: 3rem;
}

.treatments--dark .page-content__title {
    color: var(--color-text);
}

.treatments__item-price {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 400;
    min-width: 60px;
    text-align: right;
}

/* ===================== LOCATION CARD (Locations page style) ===================== */

.location {
    padding: var(--space-section) 0;
    background: var(--color-bg-dark);
}

.location .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
    max-width: 1100px;
}

.location__label {
    font-size: var(--text-sm);

    letter-spacing: 0.2em;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.location__name {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 400;

    letter-spacing: -0.01em;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.location__desc {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 480px;
}

.location__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.location__detail-label {
    font-size: var(--text-sm);

    letter-spacing: 0.15em;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}

.location__detail-value {
    font-size: var(--text-base);
    line-height: 1.7;
}

.location__detail-value a {
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    transition: border-color 0.3s, color 0.3s;
}

.location__detail-value a:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.location__image-col {
    position: relative;
}

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

.location__cta {
    margin-top: 2.5rem;
}

.location__map-col {
    position: sticky;
    top: 8rem;
}

.location__map-wrap {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
}

.location__map-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.location__map-links {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: var(--text-sm);
}

.location__map-links a {
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    transition: color 0.3s;
}

.location__map-links a:hover {
    color: var(--color-accent);
}

.location__map-links span {
    color: var(--color-text-muted);
}

/* ===================== SPLIT TEXT ANIMATION ===================== */

.split-text .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.6s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-text.visible .char {
    opacity: 1;
    transform: translateY(0);
}

/* ===================== COUNTER ANIMATION ===================== */

.counter[data-target] {
    font-variant-numeric: tabular-nums;
}

/* ===================== ANIMATIONS ===================== */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

.reveal--up {
    transform: translateY(40px);
}

.reveal.visible {
    opacity: 1;
    transform: translate(0);
}

.reveal-clip {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-clip.visible {
    clip-path: inset(0 0 0 0);
}

.stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.stagger > .reveal:nth-child(2) { transition-delay: 0.1s; }
.stagger > .reveal:nth-child(3) { transition-delay: 0.2s; }
.stagger > .reveal:nth-child(4) { transition-delay: 0.3s; }
.stagger > .reveal:nth-child(5) { transition-delay: 0.4s; }
.stagger > .reveal:nth-child(6) { transition-delay: 0.5s; }
.stagger > .reveal:nth-child(7) { transition-delay: 0.6s; }
.stagger > .reveal:nth-child(8) { transition-delay: 0.7s; }
.stagger > .reveal:nth-child(9) { transition-delay: 0.8s; }

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

.header-cart {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--color-text);
    transition: color 0.3s;
}

.header-cart:hover {
    color: var(--color-accent);
}

.header-cart__count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--color-accent);
    color: var(--color-text);
    font-size: 0.65rem;
    font-weight: 600;
    width: 18px;
    height: 18px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.header-cart__count[hidden] {
    display: none;
}

/* ===================== WC NOTICES (dark) ===================== */

body .woocommerce-notices-wrapper:empty {
    display: none;
}

body .woocommerce-notices-wrapper,
body .woocommerce-NoticeGroup {
    margin-bottom: var(--space-md);
}

body .woocommerce-info,
body .woocommerce-message,
body .woocommerce-error,
body ul.woocommerce-error,
body .wc-block-components-notice-banner {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-sm);
    box-sizing: border-box;
    width: 100%;
    padding: 0.75rem 1rem !important;
    margin: 0 0 var(--space-md) 0 !important;
    list-style: none !important;
    background: var(--color-notice-info-bg) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    border-left: 6px solid var(--color-notice-info-accent) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
}

body .woocommerce-message,
body .wc-block-components-notice-banner.is-success {
    background: var(--color-notice-success-bg) !important;
    border-left-color: var(--color-notice-success-accent) !important;
}

body .woocommerce-error,
body ul.woocommerce-error,
body .wc-block-components-notice-banner.is-error {
    background: var(--color-notice-error-bg) !important;
    border-left-color: var(--color-notice-error-accent) !important;
    color: var(--color-text) !important;
}

body .woocommerce-info::before,
body .woocommerce-info::after,
body .woocommerce-message::before,
body .woocommerce-message::after,
body .woocommerce-error::before,
body .woocommerce-error::after,
body ul.woocommerce-error::before,
body ul.woocommerce-error::after,
body .wc-block-components-notice-banner > svg {
    display: none !important;
    content: none !important;
}

/* Block-notice content wrapper: stack text and CTA button vertically. Use
   column-reverse because WC emits the <a.button> BEFORE the message text in
   the DOM — reversing visually puts the body copy on top and the CTA below. */
/* Only reverse the child order for SUCCESS notices (WC emits the "View cart"
   <a> before the body text, we want it below). Error notices put the summary
   BEFORE the <ul> list and must stay in natural DOM order. */
body .wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__content {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
}

body .woocommerce-info li,
body .woocommerce-message li,
body .woocommerce-error li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

body .woocommerce-info *,
body .woocommerce-message *,
body .woocommerce-error * {
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: 0;
}

body .woocommerce-info a:not(.button),
body .woocommerce-message a:not(.button),
body .woocommerce-error a:not(.button) {
    color: var(--color-accent);
    text-decoration: none;
}
body .woocommerce-info a:not(.button):hover,
body .woocommerce-message a:not(.button):hover,
body .woocommerce-error a:not(.button):hover {
    color: var(--color-accent-hover);
}

body .woocommerce-info .button,
body .woocommerce-message .button,
body .woocommerce-error .button,
body .wc-block-components-notice-banner .button,
body .wc-block-components-notice-banner a.wc-forward,
body .wc-block-components-notice-banner a.button.wc-forward {
    align-self: flex-start;
    margin: 0 !important;
    padding: 0.5rem 1.25rem !important;
    background: transparent !important;
    color: var(--color-accent-light) !important;
    border: 1px solid var(--color-accent-light) !important;
    border-radius: 0 !important;
    font-size: 0.8125rem !important;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
    display: inline-flex !important;
    align-items: center;
    width: fit-content;
}
body .woocommerce-info .button:hover,
body .woocommerce-message .button:hover,
body .woocommerce-error .button:hover,
body .wc-block-components-notice-banner .button:hover,
body .wc-block-components-notice-banner a.wc-forward:hover {
    background: var(--color-accent-light) !important;
    color: #0a0a0a !important;
}

.woocommerce-form-coupon-toggle {
    margin-bottom: var(--space-md);
}
.woocommerce-form-coupon-toggle .showcoupon {
    color: var(--color-accent);
    text-decoration: none;
}

/* Paysera validation error messages (non-WC class) */
body .paysera-delivery-error {
    color: var(--color-notice-error-accent) !important;
    background: var(--color-notice-error-bg) !important;
    border-left: 6px solid var(--color-notice-error-accent) !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0.25rem 0 !important;
    font-size: 0.8125rem;
}

/* ===================== SHOP ===================== */

/* Shop layout — sidebar (category tree) + product grid */
.shop-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--space-2xl);
    align-items: start;
    margin-top: var(--space-xl);
}

.shop__sidebar {
    position: sticky;
    top: 6rem;
    padding-right: var(--space-md);
}

.shop__sidebar-title {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 var(--space-md);
    color: var(--color-text);
}

/* Mobile-only toggle — hidden on desktop (see min-width rule below). */
.shop__sidebar-toggle {
    display: none;
    width: 100%;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.75rem 1rem;
    margin-bottom: var(--space-md);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.82rem;
    text-transform: none;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.shop__sidebar-toggle:hover {
    border-color: var(--color-accent);
}

.shop__sidebar-toggle-label {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.shop__sidebar-toggle-current {
    flex: 1;
    text-align: left;
    color: var(--color-text);
}

.shop__sidebar-toggle svg {
    transition: transform 0.2s ease;
}

.shop__sidebar-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.shop__sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shop__sidebar-content > .shop__sidebar-title + * {
    margin-bottom: var(--space-lg);
}

.shop__sidebar-content > .shop__sidebar-title:not(:first-child) {
    margin-top: var(--space-lg);
}

.shop__brands .cat-item > a {
    display: block;
    padding: 0.45rem 0;
    font-size: 0.82rem;
    color: var(--color-text-70);
    text-transform: none;
    letter-spacing: 0.02em;
    line-height: 1.35;
    transition: color 0.15s ease;
}

.shop__brands .cat-item > a:hover {
    color: var(--color-text);
}

.shop__brands .cat-item.current-cat > a {
    color: var(--color-accent);
}

.shop__sidebar .cat-item {
    margin: 0;
}

.shop__sidebar .cat-item > a {
    display: block;
    padding: 0.45rem 0;
    font-size: 0.82rem;
    color: var(--color-text-70);
    text-transform: none;
    letter-spacing: 0.02em;
    line-height: 1.35;
    transition: color 0.15s ease;
}

.shop__sidebar .cat-item > a:hover {
    color: var(--color-text);
}

.shop__sidebar .cat-item.current-cat > a,
.shop__sidebar .cat-item.current-cat-parent > a,
.shop__sidebar .cat-item.current-cat-ancestor > a {
    color: var(--color-accent);
}

/* Nested children: left-indented with a hairline guide */
.shop__sidebar .children {
    list-style: none;
    padding: 0 0 0 0.75rem;
    margin: 0.1rem 0 0.3rem 0.4rem;
    border-left: 1px solid var(--color-border);
}

.shop__sidebar .children .cat-item > a {
    padding: 0.35rem 0;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.shop__sidebar .children .cat-item > a:hover {
    color: var(--color-text);
}

/* Product count suffix that wp_list_categories emits */
.shop__sidebar .cat-item > a .count,
.shop__sidebar .cat-item > a:has(+ .count) {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    margin-left: 0.25rem;
}

.shop__main {
    min-width: 0;
}

@media (max-width: 900px) {
    .shop-layout {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    .shop__sidebar {
        position: static;
        padding-right: 0;
        border-right: 0;
        padding-bottom: 0;
    }
    /* Show the mobile toggle; hide the full filters content by default.
       Unhides when the toggle is expanded. */
    .shop__sidebar-toggle {
        display: flex;
    }
    .shop__sidebar-content {
        display: none;
    }
    .shop__sidebar-toggle[aria-expanded="true"] + .shop__sidebar-content {
        display: block;
        padding-bottom: var(--space-md);
        border-bottom: 1px solid var(--color-border);
        margin-bottom: var(--space-md);
    }
}

/* Legacy pill rules kept for any orphan references; can be deleted once no
   other template renders .shop__filters. */
.shop__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
}

.shop__filter-pill {
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    letter-spacing: 0.08em;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.shop__filter-pill:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
}

.shop__filter-pill.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text);
}

.shop__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.shop__card {
    display: block;
    overflow: hidden;
    transition: transform 0.3s;
}

.shop__card:hover {
    transform: translateY(-4px);
}

.shop__card-image {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0;
    margin-bottom: var(--space-md);
    background: var(--color-bg-elevated);
}

.shop__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

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

.shop__card-name {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    margin-bottom: var(--space-xs);
    color: var(--color-text);
}

.shop__card-price {
    font-size: var(--text-base);
    color: var(--color-accent);
}

.shop__empty {
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-section) 0;
}

/* Product detail */

.product-detail__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.25rem 0;
    margin-bottom: var(--space-2xl);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    border: 0;
    border-radius: 0;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.product-detail__back:hover {
    color: var(--color-text);
}

.product-detail__back svg {
    transition: transform 0.2s;
}

.product-detail__back:hover svg {
    transform: translateX(-2px);
}

.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

.product-detail__main-image {
    width: 100%;
    border-radius: 0;
}

.product-detail__thumbs {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.product-detail__thumb {
    width: 64px;
    height: 64px;
    border-radius: 0;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    background: none;
    transition: border-color 0.2s;
}

.product-detail__thumb.active {
    border-color: var(--color-accent);
}

.product-detail__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-detail__category {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

.product-detail__category a {
    color: var(--color-text-muted);
}

.product-detail__name {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 400;
    margin-bottom: var(--space-md);
}

.product-detail__price {
    font-size: var(--text-h3);
    color: var(--color-accent);
    margin-bottom: var(--space-xl);
}

.product-detail__description,
.product-detail__short-desc {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: 1.8;
    margin-bottom: var(--space-xl);
}

.product-detail__add-to-cart {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    margin-bottom: var(--space-xl);
}

.product-detail__add-to-cart .quantity {
    display: flex;
    align-items: center;
}

.product-detail__add-to-cart .quantity input {
    width: 60px;
    text-align: center;
    padding: 0.75rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 0;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
}

.product-detail__out-of-stock {
    color: var(--color-text-muted);
    font-size: var(--text-base);
}

/* Any oEmbed / YouTube / Vimeo iframe inside flow content — cap width so it
   doesn't force horizontal page scroll on mobile. Special-case iframes
   (gift-ticket zoom, video overlay modal, Google Maps embeds) live in their
   own wrappers with explicit positioning and aren't affected. */
.product-detail__description iframe,
.product-detail__short-desc iframe,
.prose iframe,
.page-content p iframe,
.wp-embed-responsive :where(iframe, object, embed) {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
}

/* WooCommerce pagination */
.woocommerce-pagination {
    margin-top: var(--space-2xl);
    text-align: center;
}

.woocommerce-pagination .page-numbers {
    display: inline-flex;
    gap: var(--space-sm);
    list-style: none;
}

.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span {
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0;
    color: var(--color-text-muted);
    transition: all 0.2s;
}

.woocommerce-pagination .page-numbers li span.current,
.woocommerce-pagination .page-numbers li a:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text);
}

/* ===================== CART (Fukasawa × Apple HIG) ===================== */

.cart__title {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 400;
    margin-bottom: var(--space-2xl);
    letter-spacing: -0.01em;
}

.cart__continue {
    display: inline-block;
    margin-top: var(--space-xl);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.05em;
    transition: color 0.2s;
}

.cart__continue:hover {
    color: var(--color-text);
}

.cart-empty {
    text-align: center;
    padding: 8rem 0;
}

.cart-empty__heading {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 400;
    margin-bottom: var(--space-md);
    letter-spacing: -0.01em;
}

.cart-empty__text {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    margin-bottom: var(--space-2xl);
}

/* Two-column layout */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-3xl);
    align-items: start;
}

/* Cart row — hairline dividers, no boxes */
.cart-items {
    border-top: 1px solid var(--color-border);
}

.cart-row {
    display: grid;
    grid-template-columns: 80px 1fr auto auto 44px;
    gap: var(--space-xl);
    align-items: center;
    padding: var(--space-xl) 0;
    border-bottom: 1px solid var(--color-border);
}

.cart-row__image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 0;
    background: var(--color-bg-elevated);
}

.cart-row__name {
    display: block;
    font-size: var(--text-base);
    color: var(--color-text);
    margin-bottom: var(--space-xs);
    line-height: 1.4;
}

.cart-row__name:hover {
    color: var(--color-accent);
}

.cart-row__price {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.cart-row__subtotal {
    font-size: var(--text-base);
    color: var(--color-text);
    white-space: nowrap;
    min-width: 70px;
    text-align: right;
}

.cart-row__remove {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: color 0.2s;
    border-radius: 0;
}

.cart-row__remove:hover {
    color: var(--color-text);
    background: var(--color-bg-elevated);
}

/* Quantity stepper — Apple HIG 44pt touch targets */
.qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 0;
    overflow: hidden;
}

.qty-stepper__btn {
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.qty-stepper__btn:hover {
    background: var(--color-bg-elevated);
}

.qty-stepper__input {
    width: 40px;
    height: 44px;
    text-align: center;
    background: none;
    border: none;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    -moz-appearance: textfield;
    appearance: textfield;
}

.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-stepper__input:focus {
    outline: none;
}

/* Cart summary (sticky) */
.cart-summary {
    position: sticky;
    top: var(--space-2xl);
    padding: var(--space-2xl);
    background: var(--color-bg-elevated);
    border-radius: 0;
}

.cart-summary__heading {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: 400;
    margin-bottom: var(--space-xl);
}

.cart-summary__row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    font-size: var(--text-base);
    color: var(--color-text);
}

.cart-summary__row--muted span:last-child {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.cart-summary__row--total {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xl);
    font-size: var(--text-h4);
}

.cart-summary__cta {
    width: 100%;
    text-align: center;
}

.cart-summary__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Cart coupon form — input matches checkout contact-field styling,
   button tinted with the Twine (--color-accent-light) palette. */
.cart-coupon {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.cart-coupon__label {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cart-coupon__row {
    display: flex;
    gap: var(--space-sm);
}

.cart-coupon #coupon_code {
    flex: 1;
    box-sizing: border-box;
    height: 48px;
    padding: 0 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    text-transform: none;
    letter-spacing: 0;
    transition: border-color 0.2s ease;
}

.cart-coupon #coupon_code:focus {
    outline: none;
    border-color: var(--color-accent-light);
}

.cart-coupon__apply,
.cart-coupon [name="apply_coupon"] {
    flex: 0 0 48px;
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    color: var(--color-accent-light);
    border: 1px solid var(--color-accent-light);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.cart-coupon__apply:hover,
.cart-coupon [name="apply_coupon"]:hover {
    background: var(--color-accent-light);
    color: var(--color-bg);
}

.cart-coupon--disabled {
    opacity: 0.5;
    pointer-events: none;
}

.cart-coupon [disabled] {
    cursor: not-allowed;
}

.cart-coupon [disabled]:hover {
    background: transparent;
    color: var(--color-accent-light);
}

/* ===================== CHECKOUT (Fukasawa × Apple HIG) ===================== */

.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-3xl);
    align-items: start;
}

.checkout-step {
    padding: var(--space-2xl) 0;
    border-bottom: 1px solid var(--color-border);
}

.checkout-step:first-child {
    padding-top: 0;
}

.checkout-step:last-child {
    border-bottom: none;
}

.checkout-step__title {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: 400;
    margin-bottom: var(--space-xl);
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
}

.checkout-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
    border-radius: 0;
    font-size: var(--text-base);
    color: var(--color-text-muted);
    flex-shrink: 0;
    align-self: center;
}

.checkout-step__hint {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Delivery options — radio cards with large touch targets */
.delivery-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.delivery-option {
    display: flex;
    align-items: center;
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: 0;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    min-height: 64px;
}

.delivery-option:hover {
    border-color: var(--color-text-muted);
}

.delivery-option:has(input:checked) {
    border-color: var(--color-accent);
    background: rgba(170, 123, 55, 0.05);
}

.delivery-option input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-accent);
    margin-right: var(--space-md);
    cursor: pointer;
}

.delivery-option__name {
    font-size: var(--text-base);
    color: var(--color-text);
}

/* Shipping fields (progressive disclosure) */
.shipping-fields {
    margin-top: var(--space-xl);
    padding: var(--space-xl);
    background: var(--color-bg-elevated);
    border-radius: 0;
}

/* WooCommerce form fields */
.checkout-step .form-row {
    margin-bottom: var(--space-md);
}

.checkout-step .form-row-first,
.checkout-step .form-row-last {
    width: calc(50% - var(--space-sm) / 2);
    display: inline-block;
    vertical-align: top;
}

.checkout-step .form-row-first {
    margin-right: var(--space-sm);
}

.checkout-step .form-row label {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
    letter-spacing: 0.04em;
}

.checkout-step .form-row label .required {
    color: var(--color-accent);
    text-decoration: none;
    margin-left: 2px;
}

.checkout-step .form-row input,
.checkout-step .form-row select,
.checkout-step .form-row textarea {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: border-color 0.2s;
}

.checkout-step .form-row input:focus,
.checkout-step .form-row select:focus,
.checkout-step .form-row textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.checkout-step .form-row select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23848483' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* Payment methods */
.wc_payment_methods {
    list-style: none;
    padding: 0;
    margin-bottom: var(--space-xl);
}

.wc_payment_method {
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: 0;
    margin-bottom: var(--space-md);
    transition: border-color 0.2s;
}

.wc_payment_method:has(input:checked) {
    border-color: var(--color-accent);
    background: rgba(170, 123, 55, 0.05);
}

.wc_payment_method label {
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.wc_payment_method input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-accent);
}

.payment_box {
    padding: var(--space-md) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
}

/* Terms checkbox + label — inline layout */
.woocommerce-terms-and-conditions-wrapper {
    margin-bottom: var(--space-lg);
}

/* Outer wrapper: flex row so the checkbox sits left of the text block. */
.wc-terms-and-conditions,
.form-row.validate-required label.checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--space-sm) !important;
    font-size: 1rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--color-text) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    cursor: pointer;
}

/* Inner text span must stay inline so the sentence flows naturally;
   flex on this element split "Aš perskaičiau... <a>sąlygomis ir
   taisyklėmis</a>" into two columns. */
.woocommerce-terms-and-conditions-checkbox-text {
    display: inline !important;
    font-size: 1rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--color-text) !important;
    line-height: 1.4 !important;
}

.wc-terms-and-conditions a,
.woocommerce-terms-and-conditions-checkbox-text a {
    color: var(--color-accent);
    text-decoration: none;
}

input[type="checkbox"]#terms,
.woocommerce-form__input-checkbox {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--color-accent);
    margin: 0 !important;
    flex-shrink: 0;
    margin-top: 2px !important;
}

/* ===================== WC My Account (login / register / lost-password / dashboard) ===================== */

.woocommerce-account .woocommerce {
    max-width: 560px;
    margin: 4rem auto;
    padding: 0 1.5rem;
}

.woocommerce-account .woocommerce > p,
.woocommerce-account .woocommerce-ResetPassword > p,
.woocommerce-account .woocommerce-form-login > p {
    color: var(--color-text-70);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.woocommerce-account .form-row,
.woocommerce-account .woocommerce-form-row {
    margin-bottom: 1.25rem;
}

.woocommerce-account .form-row label,
.woocommerce-account .woocommerce-form-row label {
    display: block;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
    color: var(--color-text);
    opacity: 0.7;
}

.woocommerce-account .form-row input.input-text,
.woocommerce-account .woocommerce-form-row input.input-text,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"] {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: border-color 0.2s;
}

.woocommerce-account input[type="text"]:focus,
.woocommerce-account input[type="email"]:focus,
.woocommerce-account input[type="password"]:focus {
    outline: none;
    border-color: var(--color-accent);
}

.woocommerce-account button.button,
.woocommerce-account button[type="submit"],
.woocommerce-account .woocommerce-Button {
    display: inline-block;
    padding: 0.875rem 2.5rem;
    font-size: var(--text-sm);
    font-family: var(--font-body);
    letter-spacing: 0.1em;
    font-weight: 600;
    border-radius: 0;
    border: none;
    cursor: pointer;
    background: var(--color-accent);
    color: var(--color-text);
    transition: background 0.3s;
}

.woocommerce-account button.button:hover,
.woocommerce-account button[type="submit"]:hover,
.woocommerce-account .woocommerce-Button:hover {
    background: var(--color-accent-hover);
}

/* Place order CTA */
#place_order {
    width: 100%;
    height: 52px;
    padding: 0 2rem;
    background: var(--color-accent);
    color: var(--color-text);
    border: none;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    cursor: pointer;
    transition: background 0.3s;
}

#place_order:hover {
    background: var(--color-accent-hover);
}

/* Paysera terminal fields — hidden by default, shown when omniva selected */
.paysera-terminal-fields {
    display: none;
    margin-top: var(--space-xl);
    padding: var(--space-xl);
    background: var(--color-bg-elevated);
    border-radius: 0;
}

/* Paysera delivery rows — label + dropdown layout */
.paysera-delivery-terminal-country,
.paysera-delivery-terminal-city,
.paysera-delivery-terminal-location {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-md) !important;
    margin-bottom: var(--space-md) !important;
    padding: 0 !important;
}

/* The label inside the row */
.paysera-delivery-terminal-country > label,
.paysera-delivery-terminal-city > label,
.paysera-delivery-terminal-location > label,
.paysera-delivery-terminal-country > span:first-child,
.paysera-delivery-terminal-city > span:first-child,
.paysera-delivery-terminal-location > span:first-child {
    flex: 1;
    font-size: 1rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--color-text) !important;
    margin: 0 !important;
}

/* The select/dropdown */
.paysera-delivery-terminal-country select,
.paysera-delivery-terminal-city select,
.paysera-delivery-terminal-location select,
select.paysera-delivery-terminal {
    flex: 1;
    font-size: var(--text-base) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    height: 44px !important;
    padding: 0.5rem 2.5rem 0.5rem 1rem !important;
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    font-family: var(--font-body) !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23848483' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
}

/* Select2 dropdowns — normalize font size */
.select2-container,
.select2-container *,
.select2-dropdown,
.select2-dropdown *,
.select2-results__option,
.select2-selection__rendered,
.select2-search__field,
.select2-selection--single {
    font-size: var(--text-base) !important;
    font-family: var(--font-body) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}

.select2-container--default .select2-selection--single {
    height: 44px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    background: var(--color-bg) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px !important;
    padding-left: 1rem !important;
    padding-right: 2.5rem !important;
    color: var(--color-text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px !important;
}

.select2-dropdown {
    background: var(--color-bg-elevated) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    color: var(--color-text) !important;
}

.select2-results__option {
    padding: 0.5rem 1rem !important;
    color: var(--color-text) !important;
}

.select2-results__option--highlighted {
    background: var(--color-accent) !important;
    color: var(--color-text) !important;
}

.select2-search__field {
    padding: 0.5rem !important;
    background: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    color: var(--color-text) !important;
}

/* Container wrapper */
.paysera-delivery-fields,
.paysera-delivery-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

/* Checkout summary (sticky) */
.checkout-summary {
    position: sticky;
    top: var(--space-2xl);
    padding: var(--space-2xl);
    background: var(--color-bg-elevated);
    border-radius: 0;
}

.checkout-summary__heading {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: 400;
    margin-bottom: var(--space-xl);
}

.checkout-summary__items {
    margin-bottom: var(--space-xl);
}

.checkout-summary__item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
}

.checkout-summary__item-img {
    position: relative;
    flex-shrink: 0;
}

.checkout-summary__item-img img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 0;
    background: var(--color-bg);
}

.checkout-summary__item-qty {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--color-accent);
    color: var(--color-text);
    font-size: 0.7rem;
    width: 20px;
    height: 20px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.checkout-summary__item-info {
    flex: 1;
    min-width: 0;
}

.checkout-summary__item-name {
    font-size: var(--text-sm);
    color: var(--color-text);
    margin-bottom: 1px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.checkout-summary__item-price {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.checkout-summary__row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    font-size: var(--text-base);
    color: var(--color-text);
    border-top: 1px solid var(--color-border);
}

.checkout-summary__row--total {
    font-size: var(--text-h4);
    font-family: var(--font-heading);
    font-weight: 400;
    margin-top: var(--space-sm);
    padding-top: var(--space-md);
}

.checkout-summary__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--space-xl);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ===================== ORDER CONFIRMATION ===================== */

.order-result {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: var(--space-2xl) 0 var(--space-section);
}

.order-result--failed {
    padding-top: var(--space-section);
}

.order-result__icon {
    margin-bottom: var(--space-xl);
}

.order-result__heading {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 400;
    margin-bottom: var(--space-sm);
}

.order-result__text {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    margin-bottom: var(--space-2xl);
}

.order-result__notice {
    max-width: 560px;
    margin: 0 auto var(--space-2xl);
    padding: var(--space-md) var(--space-lg);
    border-left: 3px solid var(--color-accent);
    background: rgba(170, 123, 55, 0.08);
    color: var(--color-text);
    font-size: var(--text-base);
    text-align: left;
}

.order-result__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    text-align: left;
    padding: var(--space-xl);
    background: var(--color-bg-elevated);
    border-radius: 0;
    margin-bottom: var(--space-2xl);
}

.order-result__detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.order-result__label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
}

.order-result__value {
    font-size: var(--text-base);
    color: var(--color-text);
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

.order-result__subtitle {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: 400;
    text-align: left;
    margin-bottom: var(--space-lg);
}

.order-result__items {
    border-top: 1px solid var(--color-border);
    margin-bottom: var(--space-2xl);
}

.order-result__item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
}

.order-result__item-img img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 0;
    background: var(--color-bg-elevated);
}

.order-result__item-info {
    flex: 1;
    text-align: left;
}

.order-result__item-name {
    display: block;
    font-size: var(--text-base);
    color: var(--color-text);
    margin-bottom: 2px;
}

.order-result__item-qty {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.order-result__item-total {
    font-size: var(--text-base);
    color: var(--color-text);
    white-space: nowrap;
}

.order-result__continue {
    margin-top: var(--space-md);
}

@media (max-width: 768px) {
    .order-result__details {
        grid-template-columns: 1fr;
    }
}

/* Mobile responsive */
@media (max-width: 900px) {
    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary,
    .checkout-summary {
        position: static;
    }

    .cart-row {
        grid-template-columns: 60px 1fr 44px;
        grid-template-areas:
            "image info remove"
            "image stepper subtotal";
        gap: var(--space-md);
        row-gap: var(--space-sm);
    }

    .cart-row__image { grid-area: image; }
    .cart-row__info { grid-area: info; }
    .cart-row__remove { grid-area: remove; }
    .cart-row .qty-stepper { grid-area: stepper; }
    .cart-row__subtotal { grid-area: subtotal; }

    .checkout-step .form-row-first,
    .checkout-step .form-row-last {
        width: 100%;
        margin-right: 0;
    }
}

/* Shop responsive */
@media (max-width: 768px) {
    .shop__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    /* Cart + checkout: collapse the 2-column grid layouts that are fixed-width
       on desktop (1fr + 380/400px) — otherwise the right column + gap force
       the document wider than the viewport. */
    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr !important;
        gap: var(--space-xl) !important;
    }
    .cart-layout > *,
    .checkout-layout > *,
    .cart-items,
    .cart-summary,
    .checkout-form__main,
    .checkout-summary {
        min-width: 0;
    }

    /* Cart row (image + info + qty-stepper + subtotal + remove): stack into
       3 zones for mobile — image top-left, info + remove on row 1, stepper
       + subtotal on row 2. Col 3 is auto so the price can be wider than the
       remove icon without pushing the whole page past the viewport. */
    .cart-row {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        grid-template-areas:
            "image info remove"
            "image stepper subtotal";
        gap: var(--space-sm) var(--space-md);
        align-items: start;
    }
    .cart-row__image { grid-area: image; }
    .cart-row__info { grid-area: info; min-width: 0; }
    .cart-row__remove { grid-area: remove; width: 32px; height: 32px; justify-self: end; }
    .cart-row .qty-stepper { grid-area: stepper; }
    .cart-row__subtotal { grid-area: subtotal; align-self: center; text-align: right; min-width: 0; }
    .cart-row__image img { width: 64px; height: 64px; }
    .cart-row__name { font-size: var(--text-sm); word-break: break-word; }

    /* WC form-row halves shouldn't stay inline on mobile. */
    .checkout-step .form-row-first,
    .checkout-step .form-row-last {
        width: 100% !important;
        margin-right: 0 !important;
        display: block !important;
    }


    /* Paysera terminal row wraps label + select vertically on narrow screens. */
    .paysera-delivery-terminal-country,
    .paysera-delivery-terminal-city,
    .paysera-delivery-terminal-location {
        flex-direction: column;
        align-items: stretch !important;
        gap: var(--space-xs) !important;
    }

    /* PDP: stack columns, scale typography down, break long words, min-width:0
       so grid children don't force overflow from their content. */
    .product-detail {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        min-width: 0;
    }
    .product-detail > * {
        min-width: 0;
    }
    .product-detail__name {
        font-size: 1.75rem;
        line-height: 1.1;
        letter-spacing: -0.005em;
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    }
    .product-detail__category {
        font-size: 0.65rem;
        letter-spacing: 0.08em;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }
    .product-detail__price {
        font-size: 1.5rem;
    }
    .product-detail__description,
    .product-detail__short-desc {
        font-size: 0.85rem;
        line-height: 1.6;
        overflow-wrap: break-word;
    }
    .product-detail__thumbs {
        flex-wrap: wrap;
    }

    /* Sub-pages: reduce the 10rem desktop top padding that leaves a giant empty
       gap under the header on phones. */
    .page-content {
        padding: 5rem 0 3rem;
    }
    .page-content h1 {
        font-size: 2rem;
    }
}

/* ===================== PAGE CONTENT (sub-pages) ===================== */

.page-content {
    padding: 10rem 0 4rem;
}

.page-content h1 {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 400;

    margin-bottom: 2rem;
    letter-spacing: -0.01em;
}

.page-content p {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    max-width: 720px;
    font-size: var(--text-base);
    line-height: 1.8;
}

/* Prose — readable sentence-case body text. Opt-in override for the global
   uppercase body style; use anywhere there's article/long-form content. */
.prose {
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: 1.8;
    max-width: 720px;
}

.prose p {
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text);
    margin-bottom: 1.25rem;
}

.prose p:last-child {
    margin-bottom: 0;
}

.prose ul,
.prose ol {
    margin: 0 0 1.25rem 1.25rem;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text);
}

.prose li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
    text-transform: none;
    letter-spacing: 0;
}

.prose a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.prose a:hover {
    color: var(--color-accent-hover);
}

.prose h2 {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: 400;
    text-transform: none;
    letter-spacing: -0.005em;
    line-height: 1.15;
    margin: 2.5rem 0 1rem;
    color: var(--color-text);
    max-width: none;
}

.prose h3 {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin: 2rem 0 0.75rem;
    color: var(--color-text);
}

.prose address {
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 1.25rem;
    color: var(--color-text-muted);
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0 1.5rem;
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: 0;
    display: block;
    overflow-x: auto;
}

.prose th,
.prose td {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
    color: var(--color-text);
    line-height: 1.5;
}

.prose th {
    background: var(--color-bg-elevated);
    font-weight: 600;
    color: var(--color-text);
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1024px) {
    .services-section .container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .services__nav {
        position: static;
    }

    .services__image-area {
        position: static;
    }

    .favorites .container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .founder .container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

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

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

    .location .container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

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

@media (max-width: 768px) {
    :root {
        --text-sm: 0.75rem;
        --text-base: 0.833rem;
        --text-h4: 1.2rem;
        --text-h3: 1.6rem;
        --text-h2: 2.2rem;
        --text-h1: 2.8rem;
        --space-section: 5rem;
        --space-4xl: 4rem;
        --space-3xl: 3rem;
    }

    html {
        font-size: 16px;
    }

    .about-hero__heading {
        margin-bottom: 30vh;
    }

    .about-hero__stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .page-body {
        border-radius: 0;
    }

    /* On mobile, drop the sticky curtain reveal. The .page-body sits
       above .bottom-reveal via z-index on desktop to create the reveal;
       on mobile the sticky bottom-reveal ended up shorter than expected
       and .page-body scrolled over the top of brands + footer, hiding them. */
    .bottom-reveal {
        position: static;
    }

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

    /* On mobile, always show the team member name/role — no hover reveal */
    .team__member-info {
        transform: translateY(0);
    }

    /* Order-received summary: collapse 2-col grid so long emails /
       payment labels don't overflow the card on narrow screens. */
    .order-result__details {
        grid-template-columns: 1fr;
        padding: var(--space-lg);
    }

    .testimonials__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .before-after__grid {
        grid-template-columns: 1fr;
    }

    .about__stats {
        flex-direction: column;
        gap: 2rem;
    }

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

    .footer__bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

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

    .philosophy__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

    .treatments__item-meta {
        gap: 0.75rem;
    }
}

/* ===================== UTILITY CLASSES ===================== */

.text-center-mt {
    text-align: center;
    margin-top: 2.5rem;
}

.text-center-mt-lg {
    text-align: center;
    margin-top: 3rem;
}

.text-center {
    text-align: center;
}

.section-heading--dark {
    color: var(--color-text-dark);
    margin-bottom: 4rem;
}

.section-heading--left {
    text-align: left;
}