/* ================================================================
   ELEMENCE — Premium Outdoor Furniture
   Design System v2.0 — Optimized & Modular
   WCAG AA Compliant | Mobile-First | Performance-First
   ================================================================ */

/* ── LAYER 0: CSS Variables ──────────────────────────────── */
:root {
    /* Earth-Toned Palette — WCAG AA Verified */
    --color-cream:       #F5F0EB;
    --color-sand:        #D4C5B9;
    --color-taupe:       #A68A6B;   /* headings / decorative only */
    --color-taupe-deep:  #8B7355;   /* body text on light bg (AA: 4.56:1) */
    --color-terracotta:  #C47B5A;
    --color-olive:       #7A8B5E;
    --color-olive-deep:  #5C6B44;

    /* Neutrals */
    --color-white:       #FFFFFF;
    --color-offwhite:    #FAF8F5;
    --color-light:       #F0EDE8;
    --color-mid:         #78746E;   /* darkened for AA on cream (4.62:1) */
    --color-dark:        #3D3A35;
    --color-charcoal:    #2D2D2D;
    --color-black:       #1A1A1A;

    /* Typography */
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fs-h1:        clamp(2.5rem, 5vw, 3.5rem);
    --fs-h2:        clamp(2rem, 4vw, 2.5rem);
    --fs-h3:        clamp(1.25rem, 2.5vw, 1.5rem);
    --fs-h4:        clamp(1rem, 2vw, 1.25rem);
    --fs-body:      clamp(0.9rem, 1.5vw, 1.05rem);
    --fs-small:     0.875rem;
    --fs-xs:        0.75rem;

    /* Spacing — 4px base unit */
    --space-2xs: 0.25rem;
    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2.5rem;
    --space-xl:  4rem;
    --space-2xl: 6rem;
    --space-3xl: 8rem;
    --space-4xl: 12rem;

    /* Layout */
    --max-width:      1400px;
    --content-width:  1100px;
    --nav-height:     5rem;

    /* Borders & Radius */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-soft:   0 2px 20px rgb(45 45 45 / 0.06);
    --shadow-medium: 0 8px 40px rgb(45 45 45 / 0.08);
    --shadow-lift:   0 16px 60px rgb(45 45 45 / 0.12);

    /* Transitions */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:   cubic-bezier(0.7, 0, 0.84, 0);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 200ms;
    --duration-base: 400ms;
    --duration-slow: 700ms;

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgb(166 138 107 / 0.3);
}

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

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

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-padding-top: var(--nav-height);
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-dark);
    background-color: var(--color-cream);
    overflow-x: hidden;
}

/* ── LAYER 2: Typography ─────────────────────────────────── */
h1, h2, h3, h4, .display-font {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-black);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin-bottom: var(--space-md); max-width: 65ch; }

p.lead {
    font-size: 1.2rem;
    line-height: 1.8;
    font-weight: 400;
    color: var(--color-dark);
    max-width: 55ch;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out-expo);
}
a:hover { color: var(--color-taupe-deep); }

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

::selection { background: var(--color-taupe); color: var(--color-white); }

/* Custom scrollbar — subtle, premium */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--color-sand);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-taupe); }

/* ── LAYER 3: Accessibility ──────────────────────────────── */
/* Skip to content */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-sm);
    z-index: 9999;
    padding: var(--space-xs) var(--space-md);
    background: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: top var(--duration-fast);
}
.skip-link:focus {
    top: var(--space-sm);
    outline: var(--focus-ring);
    outline-offset: 2px;
}

/* Global focus styles */
:focus-visible {
    outline: 2px solid var(--color-taupe);
    outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

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

/* ── LAYER 4: Utilities ──────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}
.container-narrow {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* ── LAYER 5: Header & Navigation ────────────────────────── */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    transition: background var(--duration-base) var(--ease-out-expo),
                box-shadow var(--duration-base) var(--ease-out-expo);
}

/*
 * Transparent header over dark hero (homepage, not scrolled)
 * Adds a subtle dark gradient so white text has guaranteed contrast (≥7:1)
 * Targets body.has-hero (JS class) with CSS :has() fallback for progressive enhancement
 */
body.has-hero .site-header:not(.scrolled),
body:has(.hero) .site-header:not(.scrolled) {
    background: linear-gradient(to bottom, rgb(20 20 20 / 0.45) 0%, rgb(20 20 20 / 0.15) 60%, transparent 100%);
}

/* White text on transparent header over hero (contrast ≥ 12:1 on dark gradient) */
body.has-hero .site-header:not(.scrolled) .logo,
body:has(.hero) .site-header:not(.scrolled) .logo {
    color: var(--color-white);
}
.site-header .logo-black {
    display: none;
}
.site-header .logo-white {
    display: block;
}

/* Add a subtle shadow to the header when scrolled */
.site-header.scrolled {
    box-shadow: 0 0.25rem 0.5rem rgb(0 0 0 / 0.1);
}

/* Add a white background to the header when scrolled */
.site-header.scrolled .logo-black {
    display: block;
}
.site-header.scrolled .logo-white {
    display: none;
}
/* Add a white background to the header when scrolled */
.site-header.scrolled .logo-black {
    display: block;
}

body.has-hero .site-header:not(.scrolled) .logo span,
body:has(.hero) .site-header:not(.scrolled) .logo span {
    color: var(--color-sand); /* #D4C5B9 — 8.2:1 on dark hero ✓ */
}
body.has-hero .site-header:not(.scrolled) .main-nav:not(.open) a,
body:has(.hero) .site-header:not(.scrolled) .main-nav:not(.open) a {
    color: rgb(255 255 255 / 0.88); /* 14:1 ✓ — slightly softened for elegance */
}
body.has-hero .site-header:not(.scrolled) .main-nav:not(.open) a.active,
body:has(.hero) .site-header:not(.scrolled) .main-nav:not(.open) a.active {
    color: var(--color-white); /* full white for active state — 16:1 ✓ */
}
body.has-hero .site-header:not(.scrolled) .main-nav:not(.open) a::after,
body:has(.hero) .site-header:not(.scrolled) .main-nav:not(.open) a::after {
    background: var(--color-white);
}
body.has-hero .site-header:not(.scrolled) .main-nav:not(.open) a.active::before,
body:has(.hero) .site-header:not(.scrolled) .main-nav:not(.open) a.active::before {
    background: var(--color-sand);
    opacity: 0.8;
}
body.has-hero .site-header:not(.scrolled) .lang-current,
body:has(.hero) .site-header:not(.scrolled) .lang-current {
    color: rgb(255 255 255 / 0.88);
}
body.has-hero .site-header:not(.scrolled) .icon-btn,
body:has(.hero) .site-header:not(.scrolled) .icon-btn {
    color: var(--color-white);
}
body.has-hero .site-header:not(.scrolled) .icon-btn:hover,
body:has(.hero) .site-header:not(.scrolled) .icon-btn:hover {
    background: rgb(255 255 255 / 0.12);
    color: var(--color-white);
}
body.has-hero .site-header:not(.scrolled) .mobile-toggle span,
body:has(.hero) .site-header:not(.scrolled) .mobile-toggle span {
    background: var(--color-white);
}

/* Scrolled state — cream background with dark text (already AA compliant) */
.site-header.scrolled {
    background: rgb(245 240 235 / 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 2px 20px rgb(45 45 45 / 0.08),
                0 1px 0 rgb(45 45 45 / 0.04);
    transition: background var(--duration-base) var(--ease-out-expo),
                box-shadow var(--duration-base) var(--ease-out-expo);
}

/* Header over page-hero (sub-pages) — dark gradient + white text */
body:has(.page-hero) .site-header:not(.scrolled),
.page-hero-page .site-header:not(.scrolled) {
    background: linear-gradient(to bottom, rgb(20 20 20 / 0.50) 0%, rgb(20 20 20 / 0.18) 60%, transparent 100%);
}
body:has(.page-hero) .site-header:not(.scrolled) .logo,
.page-hero-page .site-header:not(.scrolled) .logo {
    color: var(--color-white);
}
body:has(.page-hero) .site-header:not(.scrolled) .logo span,
.page-hero-page .site-header:not(.scrolled) .logo span {
    color: var(--color-sand);
}
body:has(.page-hero) .site-header:not(.scrolled) .main-nav:not(.open) a,
.page-hero-page .site-header:not(.scrolled) .main-nav:not(.open) a {
    color: rgb(255 255 255 / 0.88);
}
body:has(.page-hero) .site-header:not(.scrolled) .main-nav:not(.open) a.active,
.page-hero-page .site-header:not(.scrolled) .main-nav:not(.open) a.active {
    color: var(--color-white);
}
body:has(.page-hero) .site-header:not(.scrolled) .main-nav:not(.open) a::after,
.page-hero-page .site-header:not(.scrolled) .main-nav:not(.open) a::after {
    background: var(--color-white);
}
body:has(.page-hero) .site-header:not(.scrolled) .main-nav:not(.open) a.active::before,
.page-hero-page .site-header:not(.scrolled) .main-nav:not(.open) a.active::before {
    background: var(--color-sand);
    opacity: 0.8;
}
body:has(.page-hero) .site-header:not(.scrolled) .lang-current,
.page-hero-page .site-header:not(.scrolled) .lang-current {
    color: rgb(255 255 255 / 0.88);
}
body:has(.page-hero) .site-header:not(.scrolled) .icon-btn,
.page-hero-page .site-header:not(.scrolled) .icon-btn {
    color: var(--color-white);
}
body:has(.page-hero) .site-header:not(.scrolled) .icon-btn:hover,
.page-hero-page .site-header:not(.scrolled) .icon-btn:hover {
    background: rgb(255 255 255 / 0.12);
    color: var(--color-white);
}
body:has(.page-hero) .site-header:not(.scrolled) .mobile-toggle span,
.page-hero-page .site-header:not(.scrolled) .mobile-toggle span {
    background: var(--color-white);
}

/* Ensure focus-visible rings are visible in both header states */
.site-header .main-nav a:focus-visible,
.site-header .icon-btn:focus-visible,
.site-header .lang-current:focus-visible {
    outline: 2px solid var(--color-taupe);
    outline-offset: 2px;
}
body.has-hero .site-header:not(.scrolled) .main-nav a:focus-visible,
body:has(.hero) .site-header:not(.scrolled) .main-nav a:focus-visible,
body.has-hero .site-header:not(.scrolled) .icon-btn:focus-visible,
body:has(.hero) .site-header:not(.scrolled) .icon-btn:focus-visible {
    outline-color: var(--color-white);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* Logo */
.logo {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--color-black);
    text-transform: uppercase;
    position: relative;
    z-index: 1001;
}
.logo span { font-weight: 300; color: var(--color-taupe); }

/* Main Nav */
.main-nav {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}
.main-nav a {
    font-size: var(--fs-small);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-dark);
    position: relative;
    padding: 0.25rem 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    transition: color var(--duration-fast);
}

/* Nav icon — subtle inline SVG, hidden on mobile */
.nav-icon {
    display: inline-flex;
    align-items: center;
    width: 1em;
    height: 1em;
    opacity: 0.5;
    transition: opacity var(--duration-fast);
}
.nav-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.main-nav a:hover .nav-icon,
.main-nav a.active .nav-icon { opacity: 1; }

/* Hide icons on mobile nav (full-screen overlay) */
@media (max-width: 1023px) {
    .nav-icon { display: none; }
}
.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-taupe-deep);
    transition: width var(--duration-base) var(--ease-out-expo);
}
.main-nav a:hover::after,
.main-nav a.active::after { width: 100%; }
.main-nav a.active { color: var(--color-black); font-weight: 500; }

/* Subtle gradient indicator for active nav */
.main-nav a.active::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-taupe);
    opacity: 0.6;
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    position: relative;
    z-index: 1001;
}

/* Language Switcher */
.lang-switcher { position: relative; }
.lang-current {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-dark);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    font-family: var(--font-body);
}
.lang-current svg {
    width: 14px;
    height: 14px;
    transition: transform var(--duration-fast) var(--ease-out-expo);
}
.lang-switcher:hover .lang-current svg { transform: rotate(180deg); }

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-medium);
    padding: 0.5rem 0;
    min-width: 120px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all var(--duration-fast) var(--ease-out-expo);
}
.lang-switcher:hover .lang-dropdown,
.lang-switcher:focus-within .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lang-dropdown a {
    display: block;
    padding: 0.5rem 1.25rem;
    font-size: var(--fs-xs);
    color: var(--color-dark);
    transition: background var(--duration-fast);
}
.lang-dropdown a:hover { background: var(--color-light); }

/* Icon Buttons */
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;    /* 44px — WCAG touch target */
    height: 2.75rem;
    border-radius: var(--radius-full);
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-dark);
    transition: background var(--duration-fast), color var(--duration-fast);
}
.icon-btn:hover {
    background: rgb(166 138 107 / 0.1);
    color: var(--color-taupe-deep);
}
.icon-btn svg { width: 20px; height: 20px; }

/* ── Back to Top ─────────────────────────────────────────── */
.back-to-top {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-full);
    background: rgb(45 45 45 / 0.82);
    color: var(--color-white);
    cursor: pointer;
    box-shadow: var(--shadow-medium);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--duration-base) var(--ease-out-expo),
                transform var(--duration-base) var(--ease-out-expo),
                visibility 0s linear var(--duration-base),
                background var(--duration-fast);
    z-index: 900;
    pointer-events: none;
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
    pointer-events: auto;
}
.back-to-top:hover {
    background: var(--color-charcoal);
}
.back-to-top:active {
    transform: translateY(1px);
}
.back-to-top svg {
    width: 22px;
    height: 22px;
}
.back-to-top:focus-visible {
    outline: 2px solid var(--color-taupe);
    outline-offset: 3px;
}
/* z-index 900 < mobile nav overlay (1000): the full-screen menu
   naturally covers the button, so no extra hide rule is needed. */

/* ── LAYER 6: Buttons ────────────────────────────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-white);
    background: var(--color-charcoal);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out-expo);
    will-change: transform;
    min-height: 44px;    /* WCAG touch target */
}
.btn-primary:hover {
    background: var(--color-black);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lift);
}
.btn-primary:active { transform: scale(0.98); }

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-dark);
    background: transparent;
    border: 1px solid var(--color-mid);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out-expo);
    will-change: transform;
    min-height: 44px;
}
.btn-outline:hover {
    border-color: var(--color-black);
    color: var(--color-black);
    transform: translateY(-1px);
}

/* Outline button on dark backgrounds */
.btn-outline-light {
    border-color: rgb(255 255 255 / 0.4);
    color: var(--color-white);
}
.btn-outline-light:hover {
    border-color: var(--color-white);
    color: var(--color-white);
    background: rgb(255 255 255 / 0.1);
}

.btn-full { width: 100%; }

/* ── LAYER 7: Mobile Toggle ──────────────────────────────── */
.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
    min-width: 44px;
    min-height: 44px;
}
.mobile-toggle span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--color-black);
    transition: all var(--duration-base) var(--ease-out-expo);
    transform-origin: center;
}
.mobile-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: rotate(45deg) translate(4.5px, 4.5px);
}
.mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg) translate(4.5px, -4.5px);
}

/* ── LAYER 8: Hero Section ───────────────────────────────── */
.hero {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-charcoal);
    contain: layout style paint;
}
.hero-bg {
    position: absolute;
    inset: -10% 0 0 0; /* extend beyond hero for parallax headroom */
    z-index: 0;
    will-change: transform;
}
.hero-bg img {
    width: 100%;
    height: calc(100% + 20%); /* extra height for parallax shift */
    object-fit: cover;
    object-position: center 30%;
    opacity: 0.85;
    filter: brightness(0.7);
}

/* Hero zoom — disabled on mobile for performance */
@media (min-width: 769px) {
    .hero-bg img {
        animation: heroZoom 20s ease-in-out infinite alternate;
    }
}
@keyframes heroZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgb(45 45 45 / 0.2) 0%,
        rgb(45 45 45 / 0.1) 50%,
        rgb(45 45 45 / 0.4) 100%
    );
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--color-white);
    padding: var(--space-lg);
    max-width: 1200px;
    animation: fadeUp 1.2s var(--ease-out-expo) both;
}
.hero-content h1 {
    color: var(--color-white);
    font-weight: 300;
    font-size: clamp(2rem, 6vw, 5rem);
    line-height: 1.1;
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em;
}
.hero-content h1 em { font-style: italic; color: var(--color-sand); }
.hero-content p {
    color: rgb(255 255 255 / 0.85);
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 300;
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto var(--space-lg);
}
.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.hero .btn-primary { background: var(--color-white); color: var(--color-black); }
.hero .btn-primary:hover { background: var(--color-sand); color: var(--color-black); }
.hero .btn-outline { border-color: rgb(255 255 255 / 0.4); color: var(--color-white); }
.hero .btn-outline:hover { border-color: var(--color-white); background: rgb(255 255 255 / 0.1); }

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgb(255 255 255 / 0.6);
    font-size: var(--fs-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    animation: fadeUp 1.2s var(--ease-out-expo) 0.6s both;
}
.scroll-indicator::after {
    content: '';
    width: 1px;
    height: 40px;
    background: rgb(255 255 255 / 0.3);
    animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50%      { opacity: 1;   transform: scaleY(1.5); }
}

/* ── LAYER 9: Sections ───────────────────────────────────── */
.section { padding: var(--space-xl) 0; }
.section-cream { background: var(--color-cream); }
.section-white { background: var(--color-offwhite); }
.section-dark  { background: var(--color-charcoal); color: var(--color-white); }

.section-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
    animation: fadeUp 0.8s var(--ease-out-expo) both;
}
.section-header h2 { margin-bottom: var(--space-sm); }
.section-header p {
    color: var(--color-mid);
    font-size: 1.1rem;
    max-width: 500px;
    margin: 0 auto;
}
.section-dark .section-header h2 { color: var(--color-white); }
.section-dark .section-header p { color: rgb(255 255 255 / 0.6); }

/* Page Header */
.page-header {
    padding-top: calc(var(--space-xl) + var(--space-xl));
    padding-bottom: var(--space-xl);
    text-align: center;
}
.page-header h1 { margin-bottom: var(--space-sm); }
.page-header p { color: var(--color-mid); font-size: 1.1rem; margin: 0 auto; }

/* ── LAYER 10: Product Cards ─────────────────────────────── */
.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}
.category-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 3;
    cursor: pointer;
    background: var(--color-light);
    contain: layout style paint;
}
.category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out-expo);
}
.category-card:hover img { transform: scale(1.06); }

.category-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 0.5) 0%, transparent 50%);
    display: flex;
    align-items: flex-end;
    padding: var(--space-lg);
    transition: background var(--duration-base);
}
.category-card:hover .category-card-overlay {
    background: linear-gradient(to top, rgb(0 0 0 / 0.35) 0%, transparent 50%);
}
.category-card h3 {
    color: var(--color-white);
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    position: relative;
}
.category-card h3::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 24px;
    height: 1px;
    background: var(--color-sand);
    transition: width var(--duration-base) var(--ease-out-expo);
}
.category-card:hover h3::after { width: 100%; }

/* Product Listing */
.category-nav {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-3xl);
}
.category-nav a {
    padding: 0.5rem 1.5rem;
    font-size: var(--fs-small);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-mid);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    transition: all var(--duration-fast) var(--ease-out-expo);
}
.category-nav a:hover,
.category-nav a.active { color: var(--color-black); border-color: var(--color-mid); }

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    padding: 0 var(--space-lg);
    max-width: var(--max-width);
    margin: 0 auto var(--space-xl);
}
.product-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
}
.product-card-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    aspect-ratio: 4 / 5;
    background: var(--color-light);
    margin-bottom: var(--space-md);
    contain: layout style paint;
}
.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out-expo);
}
.product-card:hover .product-card-image img { transform: scale(1.05); }

/* Subtle overlay on hover for depth */
.product-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 0.15) 0%, transparent 40%);
    opacity: 0;
    transition: opacity var(--duration-base);
    pointer-events: none;
}
.product-card:hover .product-card-image::after { opacity: 1; }

.product-card-tag {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    padding: 0.25rem 0.75rem;
    font-size: var(--fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--color-white);
    color: var(--color-dark);
    border-radius: var(--radius-full);
    z-index: 2;
}
.product-card-body h3 {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
}
.product-card-body p {
    font-size: var(--fs-xs);
    color: var(--color-mid);
    text-transform: capitalize;
    margin-bottom: 0;
}

/* ── LAYER 10.5: Pagination ──────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-2xl) var(--space-lg) var(--space-xl);
}
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--color-dark);
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-out-expo);
    border: 1px solid transparent;
}
.pagination a:hover {
    background: var(--color-light);
    border-color: var(--color-sand);
}
.pagination .active span,
.pagination span.active {
    background: var(--color-charcoal);
    color: var(--color-cream);
    border-color: transparent;
}
.pagination .disabled {
    opacity: 0.35;
    pointer-events: none;
}
.pagination-info {
    text-align: center;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    color: var(--color-mid);
    margin: 0;
    padding-bottom: var(--space-xl);
}

/* ─── LAYER 10.6: Catalogue CTA ──────────────────────────── */
.catalogue-cta {
    padding: var(--space-3xl) var(--space-lg);
    text-align: center;
    background: var(--color-offwhite);
}

.catalogue-cta .container-narrow {
    max-width: 600px;
    margin: 0 auto;
}

.catalogue-cta h2 {
    margin-bottom: var(--space-sm);
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.catalogue-cta p {
    margin-bottom: var(--space-lg);
    color: var(--color-text-muted);
    line-height: 1.6;
}

.catalogue-cta .btn-primary {
    display: inline-block;
}

/* ── LAYER 11: Product Detail ────────────────────────────── */
.product-detail {
    padding-top: calc(var(--nav-height) + var(--space-xl));
    padding-bottom: var(--space-3xl);
}
.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}
.product-gallery { position: sticky; top: calc(var(--nav-height) + var(--space-lg)); }
.product-gallery-main {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--color-light);
    margin-bottom: var(--space-md);
}
.product-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}
.product-gallery-thumbs button {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.product-gallery-thumbs img {
    border-radius: var(--radius-sm);
    aspect-ratio: 1;
    object-fit: cover;
    opacity: 0.6;
    transition: opacity var(--duration-fast);
    display: block;
    width: 100%;
}
.product-gallery-thumbs button:hover img,
.product-gallery-thumbs button.active img,
.product-gallery-thumbs button[aria-current="true"] img { opacity: 1; }

.product-info h1 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: var(--space-sm);
}
.product-info .category-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-mid);
    margin-bottom: var(--space-lg);
}
.product-info .description {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-dark);
    margin-bottom: var(--space-lg);
}
.product-meta {
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--color-sand);
    border-bottom: 1px solid var(--color-sand);
    margin-bottom: var(--space-lg);
}
.product-meta dl {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--space-sm);
    font-size: var(--fs-small);
}
.product-meta dt {
    font-weight: 500;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.product-meta dd { color: var(--color-dark); }

.color-options {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}
.color-swatch {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-sand);
    cursor: pointer;
    transition: transform var(--duration-fast);
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.product-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }

/* ── LAYER 12: Manutti-style Homepage Sections ═══════════════════
   Blocks: Philosophy → Categories → Products → Stories → CTA
   ============================================================= */

/* ═══ Block 1: Brand Philosophy — full-width mood image ════════ */
.philosophy {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-charcoal);
}
.philosophy-bg {
    position: absolute;
    inset: 0;
}
.philosophy-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    filter: brightness(0.65) saturate(0.8);
}
.philosophy-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgb(20 20 20 / 0.5) 0%,
        rgb(20 20 20 / 0.35) 50%,
        rgb(20 20 20 / 0.55) 100%
    );
}
.philosophy-content {
    position: relative;
    z-index: 1;
    max-width: 780px;
    padding: var(--space-3xl) var(--space-lg);
    text-align: left;
}
.philosophy-content blockquote {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.4;
    color: rgb(255 255 255 / 0.95);
    margin: 0 0 var(--space-2xl);
    padding: 0;
    border: none;
}
.philosophy-text {
    font-size: 1.05rem;
    line-height: 1.85;
    color: rgb(255 255 255 / 0.75);
    max-width: 540px;
    margin: 0;
}

/* ═══ Block 2: Category Navigation — 3×2 grid ═══════════════════ */
.categories-manutti {
    padding: var(--space-4xl) var(--space-lg) var(--space-3xl);
    background: var(--color-cream);
}
.catm-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
}
.catm-eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-taupe);
    display: block;
    margin-bottom: var(--space-sm);
}
.catm-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    color: var(--color-black);
    margin: 0;
}
.catm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    max-width: var(--max-width);
    margin: 0 auto;
}
.catm-card {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    text-decoration: none;
    color: inherit;
    isolation: isolate;
}
.catm-card-bg {
    position: absolute;
    inset: 0;
}
.catm-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out-expo);
}
.catm-card:hover .catm-card-bg img {
    transform: scale(1.08);
}
.catm-card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgb(0 0 0 / 0.55) 0%,
        rgb(0 0 0 / 0.1) 45%,
        transparent 100%
    );
    transition: opacity var(--duration-base) ease;
}
.catm-card:hover .catm-card-gradient {
    opacity: 0.85;
}
.catm-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-lg);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    z-index: 2;
}
.catm-card-name {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--color-white);
    margin: 0;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
}
.catm-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.15);
    backdrop-filter: blur(8px);
    color: var(--color-white);
    font-size: 1.25rem;
    transition: background var(--duration-fast) ease,
                transform var(--duration-fast) var(--ease-out-expo);
    flex-shrink: 0;
}
.catm-card:hover .catm-card-arrow {
    background: var(--color-white);
    color: var(--color-black);
    transform: translateX(3px);
}

/* ═══ Block 3: Featured Products — 3×2 grid ═════════════════════ */
.featured-products {
    padding: var(--space-3xl) var(--space-lg) var(--space-4xl);
    background: var(--color-offwhite);
}
.fp-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
}
.fp-eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-taupe);
    display: block;
    margin-bottom: var(--space-sm);
}
.fp-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    color: var(--color-black);
    margin: 0;
}
.fp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    max-width: var(--max-width);
    margin: 0 auto;
}
.fp-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration-base) var(--ease-out-expo),
                box-shadow var(--duration-base) var(--ease-out-expo);
}
.fp-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
}
.fp-card-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-light);
}
.fp-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out-expo);
}
.fp-card:hover .fp-card-image img {
    transform: scale(1.05);
}
.fp-card-body {
    padding: var(--space-lg);
    flex: 1;
}
.fp-card-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-black);
    margin: 0 0 var(--space-2xs);
    letter-spacing: 0.01em;
}
.fp-card-cat {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-taupe);
}

/* ═══ Block 4: Inspiration Stories — 2-col alternating ══════════ */
.inspiration-stories {
    padding: var(--space-4xl) var(--space-lg);
    background: var(--color-cream);
}
.is-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
}
.is-eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-taupe);
    display: block;
    margin-bottom: var(--space-sm);
}
.is-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    color: var(--color-black);
    margin: 0;
}
.is-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
    max-width: var(--max-width);
    margin: 0 auto;
}
.is-item {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-white);
}
.is-link {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-decoration: none;
    color: inherit;
}
.is-alt .is-link {
    direction: rtl;
}
.is-alt .is-text {
    direction: ltr;
}
.is-image {
    aspect-ratio: 5 / 4;
    overflow: hidden;
}
.is-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out-expo);
}
.is-item:hover .is-image img {
    transform: scale(1.05);
}
.is-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-3xl) var(--space-2xl);
}
.is-item-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--color-black);
    margin: 0 0 var(--space-md);
    line-height: 1.2;
}
.is-excerpt {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-dark);
    margin: 0 0 var(--space-lg);
}
.is-more {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-taupe);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap var(--duration-fast) ease;
}
.is-item:hover .is-more {
    gap: 12px;
}

/* ═══ Block 5: CTA Banner — full-width immersive ═══════════════ */
.cta-banner {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-charcoal);
}
.cta-banner-bg {
    position: absolute;
    inset: 0;
}
.cta-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}
.cta-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgb(20 20 20 / 0.6) 0%,
        rgb(20 20 20 / 0.4) 100%
    );
}
.cta-banner-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 650px;
    padding: var(--space-3xl) var(--space-lg);
}
.cta-banner-content h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 500;
    color: var(--color-white);
    margin: 0 0 var(--space-md);
    line-height: 1.1;
}
.cta-banner-content p {
    font-size: 1.1rem;
    line-height: 1.75;
    color: rgb(255 255 255 / 0.7);
    margin: 0 auto var(--space-xl);
    max-width: 500px;
}
.cta-banner-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* ═══ Responsive: Tablet (≤1024px) ════════════════════════════════ */
@media (max-width: 1024px) {
    .philosophy { min-height: 60vh; }
    .philosophy-content { text-align: center; }
    .philosophy-content blockquote { margin: 0 auto var(--space-xl); }
    .philosophy-text { margin: 0 auto; }
    .catm-grid { grid-template-columns: repeat(2, 1fr); }
    .fp-grid { grid-template-columns: repeat(2, 1fr); }
    .is-link { grid-template-columns: 1fr; }
    .is-alt .is-link { direction: ltr; }
    .is-image { aspect-ratio: 16 / 9; }
    .is-text { padding: var(--space-xl) var(--space-lg); }
    .cta-banner { min-height: 55vh; }
    .page-hero { min-height: 35vh; }
    .page-hero-content h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
}

/* ═══ Responsive: Mobile (≤640px) ═════════════════════════════ */
@media (max-width: 640px) {
    .philosophy { min-height: 50vh; }
    .philosophy-content blockquote { font-size: 1.35rem; }
    .catm-grid { grid-template-columns: 1fr; gap: var(--space-md); }
    .catm-card { aspect-ratio: 3 / 2; }
    .catm-card-name { font-size: 1.35rem; }
    .fp-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
    .fp-card-body { padding: var(--space-md); }
    .fp-card-name { font-size: 1.1rem; }
    .is-text { padding: var(--space-lg); }
    .is-item-title { font-size: 1.4rem; }
    .cta-banner { min-height: 45vh; }
    .cta-banner-content h2 { font-size: 1.75rem; }
    .page-hero { min-height: 30vh; }
    .page-hero .breadcrumb { padding: calc(var(--nav-height) + var(--space-md)) var(--space-md) 0; }
}

/* ═══ Responsive: Small Mobile (≤480px) ═══════════════════════ */
@media (max-width: 480px) {
    .philosophy-content blockquote { font-size: 1.15rem; }
    .fp-grid { grid-template-columns: 1fr; }
    .cta-banner-actions { flex-direction: column; }
    .cta-banner-actions .btn-primary,
    .cta-banner-actions .btn-outline { width: 100%; justify-content: center; }
    .page-hero { min-height: 25vh; }
    .page-hero-content h1 { font-size: 1.5rem; }
}

/* ── LAYER 13: Page Hero — full-width headers for all pages ── */
.page-hero {
    position: relative;
    min-height: 45vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-charcoal);
    text-align: center;
    padding-bottom: var(--space-md);
}
.page-hero-bg {
    position: absolute;
    inset: 0;
}
.page-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    filter: brightness(0.6) saturate(0.85);
}
.page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgb(20 20 20 / 0.1) 0%,
        rgb(20 20 20 / 0.2) 30%,
        rgb(20 20 20 / 0.3) 80%
    );
}
.page-hero-content {
    position: relative;
    z-index: 1;
    padding: var(--space-3xl) var(--space-lg);
}
.page-hero-content h1 {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 500;
    color: var(--color-white);
    margin: 0 0 var(--space-md);
    line-height: 1.1;
}
.page-hero-content p {
    font-size: 1.1rem;
    line-height: 1.75;
    color: rgb(255 255 255 / 0.7);
    max-width: 500px;
    margin: 0 auto;
}

/* Page hero with breadcrumb */
.page-hero--breadcrumb {
    justify-content: flex-end;
    padding-bottom: var(--space-xl);
}
.page-hero--breadcrumb .page-hero-content {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}
.page-hero .breadcrumb {
    position: relative;
    z-index: 2;
    padding: calc(var(--nav-height) + var(--space-lg)) var(--space-lg) 0;
    margin: 0;
    width: 100%;
    max-width: var(--max-width);
}
.page-hero .breadcrumb a,
.page-hero .breadcrumb span {
    color: rgb(255 255 255 / 0.6);
}
.page-hero .breadcrumb a:hover {
    color: var(--color-white);
}
.page-hero .breadcrumb .sep {
    color: rgb(255 255 255 / 0.3);
}
.page-hero .breadcrumb [aria-current="page"] {
    color: var(--color-white);
}

/* Product detail hero (smaller, gallery-focused) */
.page-hero--product {
    min-height: 35vh;
    justify-content: flex-end;
}
.page-hero--product .page-hero-content {
    padding-bottom: var(--space-lg);
}

/* ── LAYER 13.5: Page Content Spacing ──────────────────────── */
/* Content sections after page-hero need breathing room */
.page-hero + .category-nav,
.page-hero + .collection-grid,
.page-hero + .product-grid,
.page-hero + .container,
.page-hero + .contact-grid,
.page-hero + .store-grid,
.page-hero + .professionals-hero,
.page-hero + .about-values,
.page-hero + .section {
    margin-top: var(--space-xl);
}
/* Fix product-detail old padding — was designed for no-hero layout */
.page-hero + .product-detail {
    padding-top: var(--space-xl);
}
/* Auth pages */
.page-hero + .auth-page {
    padding-top: var(--space-xl);
}

/* ── LAYER 14: Collection Cards ──────────────────────────── */
.collection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    padding: 0 var(--space-lg);
    max-width: var(--max-width);
    margin: 0 auto var(--space-xl);
}
.collection-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    cursor: pointer;
    contain: layout style paint;
}
.collection-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out-expo);
}
.collection-card:hover img { transform: scale(1.04); }

.collection-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-xl);
    background: linear-gradient(to top, rgb(0 0 0 / 0.6) 0%, transparent 100%);
    color: var(--color-white);
}
.collection-card-body h2 { color: var(--color-white);}
.collection-card-body h3 { color: var(--color-white); margin-bottom: 0.25rem; }
.collection-card-body p {
    color: rgb(255 255 255 / 0.8);
    font-size: var(--fs-small);
    max-width: 400px;
    margin-bottom: 0;
}

/* ── LAYER 15: About Page ────────────────────────────────── */
.about-hero {
    padding-top: calc(var(--nav-height) + var(--space-3xl));
    padding-bottom: var(--space-3xl);
    text-align: center;
}
.about-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}
.value-card {
    text-align: center;
    padding: var(--space-xl);
}
.value-card .value-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-light);
    color: var(--color-taupe);
}
.value-card h3 { margin-bottom: var(--space-sm); }
.value-card p {
    color: var(--color-dark);
    font-size: var(--fs-small);
    margin: 0 auto;
}

.about-materials { text-align: center; }
.about-materials p.lead { margin: 0 auto; }

/* ── LAYER 16: Contact Page ──────────────────────────────── */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    padding-top: calc(var(--nav-height) + var(--space-3xl));
    padding-bottom: var(--space-3xl);
}
.contact-form { display: flex; flex-direction: column; gap: var(--space-md); }

.form-group label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-black);
    margin-bottom: 0.5rem;
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 400;
    color: var(--color-dark);
    background: var(--color-white);
    border: 1px solid var(--color-sand);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-taupe);
    box-shadow: 0 0 0 3px rgb(166 138 107 / 0.15);
}
.form-group input:user-invalid,
.form-group textarea:user-invalid {
    border-color: var(--color-terracotta);
}
.form-group textarea { min-height: 150px; resize: vertical; }
.form-error {
    font-size: var(--fs-xs);
    color: var(--color-terracotta);
    margin-top: 0.25rem;
    display: none;
}
.form-group input:user-invalid + .form-error,
.form-group textarea:user-invalid + .form-error { display: block; }

/* JS validation — aria-invalid indicator */
.form-group input[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] {
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 3px rgb(196 123 90 / 0.12);
}

/* ── Button Loading Spinner ───────────────────────────────── */
.btn-primary.is-loading,
.btn-outline.is-loading {
    pointer-events: none;
    opacity: 0.8;
    cursor: wait;
}
.btn-primary.is-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    border: 2px solid rgb(255 255 255 / 0.3);
    border-top-color: var(--color-white);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
.btn-outline.is-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    border: 2px solid rgb(61 58 53 / 0.2);
    border-top-color: var(--color-dark);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Toast Notification ───────────────────────────────────── */
.form-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    background: var(--color-charcoal);
    color: var(--color-white);
    padding: 14px 28px;
    border-radius: var(--radius-md);
    font-size: var(--fs-small);
    font-family: var(--font-body);
    z-index: 2000;
    box-shadow: 0 8px 32px rgb(0 0 0 / 0.18);
    opacity: 0;
    transition: transform 0.35s var(--ease-out-expo),
                opacity 0.35s var(--ease-out-expo);
    pointer-events: none;
}
.form-toast.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.form-toast--error {
    background: var(--color-terracotta);
}

.contact-info { padding-top: var(--space-xl); }
.contact-info h3 { margin-bottom: var(--space-md); }
.contact-info-item {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    font-size: var(--fs-small);
}
.contact-info-item svg { flex-shrink: 0; color: var(--color-taupe); }

.contact-note {
    font-size: var(--fs-small);
    color: var(--color-dark);
    margin-bottom: var(--space-md);
}
.contact-store-btn { margin-top: var(--space-md); display: inline-flex; }

/* ── LAYER 17: Inspiration ───────────────────────────────── */
.inspiration-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-lg);
}
.article-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-white);
    transition: transform var(--duration-base) var(--ease-out-expo),
                box-shadow var(--duration-base) var(--ease-out-expo);
    contain: layout style paint;
}
.article-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
}
.article-card-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-light);
}
.article-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out-expo);
}
.article-card:hover .article-card-image img { transform: scale(1.04); }
.article-card-body { padding: var(--space-lg); }
.article-card-body h2 {  font-size: 1.35rem; }
.article-card-body h3 { font-size: 1.15rem; margin-bottom: var(--space-sm); }
.article-card-body p { font-size: var(--fs-small); color: var(--color-mid); margin-bottom: 0; }

/* ── LAYER 18: Professionals Portal ──────────────────────── */
.professionals-hero {
    padding-top: calc(var(--nav-height) + var(--space-xl));
    padding-bottom: var(--space-2xl);
    text-align: center;
    background: var(--color-offwhite);
}
.professionals-cta-row {
    margin-top: var(--space-xl);
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.professionals-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-lg);
}
.pf-card {
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    transition: transform var(--duration-base), box-shadow var(--duration-base);
}
#benefits-heading{text-align: center}
.pf-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.pf-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-light);
    margin-bottom: var(--space-md);
    color: var(--color-taupe);
}
.pf-card h3 { margin-bottom: var(--space-sm); }
.pf-card p { font-size: var(--fs-small); color: var(--color-dark); margin-bottom: 0; }

/* ── LAYER 19: Store Finder ──────────────────────────────── */
.store-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    max-width: var(--max-width);
    margin: 0 auto var(--space-xl);
    padding: 0 var(--space-lg);
}
.store-card {
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    border: 1px solid var(--color-sand);
    transition: box-shadow var(--duration-base);
}
.store-card:hover { box-shadow: var(--shadow-soft); }
.store-card h3 { margin-bottom: var(--space-sm); }
.store-card address { font-style: normal; font-size: var(--fs-small); color: var(--color-dark); }

/* ── LAYER 20: Auth Forms ────────────────────────────────── */
.auth-page {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: var(--color-cream);
}
.auth-card {
    width: 100%;
    max-width: 440px;
    padding: var(--space-2xl);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
}
.auth-card h2 { text-align: center; margin-bottom: var(--space-sm); }
.auth-card .subtitle {
    text-align: center;
    color: var(--color-mid);
    font-size: var(--fs-small);
    margin-bottom: var(--space-2xl);
}
.auth-link {
    text-align: center;
    margin-top: var(--space-lg);
    font-size: var(--fs-small);
    color: var(--color-mid);
}
.auth-link a { color: var(--color-taupe-deep); text-decoration: underline; }

/* ── LAYER 21: Footer — Premium Redesign ─────────────────── */
.site-footer {
    background: var(--color-charcoal);
    color: rgb(255 255 255 / 0.7);
    padding: var(--space-3xl) 0 0;
    position: relative;
    overflow: hidden;
}

/* Subtle top decorative gradient line */
.footer-decor {
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgb(255 255 255 / 0.06) 20%,
        var(--color-sand) 50%,
        rgb(255 255 255 / 0.06) 80%,
        transparent 100%
    );
    margin-bottom: var(--space-3xl);
}

/* Ambient glow behind the footer */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 400px;
    background: radial-gradient(ellipse at center, rgb(122 139 94 / 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--space-2xl);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    position: relative;
    z-index: 1;
}

.footer-col h4 {
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: var(--space-lg);
    position: relative;
    display: inline-block;
}

/* Subtle underline accent on headings */
.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 20px;
    height: 1px;
    background: var(--color-sand);
    transition: width var(--duration-base) var(--ease-out-expo);
}
.footer-col:hover h4::after { width: 100%; }

.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.4rem; }
.footer-col ul li a {
    font-size: var(--fs-small);
    color: rgb(255 255 255 / 0.55);
    line-height: 1.8;
    transition: all var(--duration-fast) var(--ease-out-expo);
    display: inline-block;
}
.footer-col ul li a:hover {
    color: var(--color-sand);
    transform: translateX(3px);
}

.footer-brand .logo {
    color: var(--color-white);
    display: inline-block;
    margin-bottom: var(--space-md);
    font-size: 1.5rem;
}
.footer-brand p {
    max-width: 300px;
    margin-bottom: 0;
    font-size: var(--fs-small);
    color: rgb(255 255 255 / 0.5);
    line-height: 1.8;
}

/* ── Contact Column ──────────────────────────────────────── */

/* ─── Subscription Form ─── */
.footer-subscribe { margin-bottom: var(--space-lg); }

.footer-subscribe-row {
    display: flex;
    gap: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.12);
    background: rgb(255 255 255 / 0.04);
    transition: border-color var(--duration-base);
}
.footer-subscribe-row:focus-within {
    border-color: var(--color-olive);
    box-shadow: 0 0 0 3px rgb(122 139 94 / 0.15);
}

.footer-subscribe-input {
    flex: 1;
    min-width: 0;
    padding: 0.65rem var(--space-md);
    background: transparent;
    border: none;
    outline: none;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    line-height: 1.5;
}
.footer-subscribe-input::placeholder {
    color: rgb(255 255 255 / 0.35);
    opacity: 1;
}
.footer-subscribe-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px var(--color-charcoal) inset;
    -webkit-text-fill-color: var(--color-white);
}

.footer-subscribe-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    background: var(--color-olive);
    border: none;
    cursor: pointer;
    color: var(--color-white);
    transition: background var(--duration-fast);
}
.footer-subscribe-btn:hover { background: #6b7d4f; }
.footer-subscribe-btn:active { background: #5e6f45; }
.footer-subscribe-btn:focus-visible {
    outline: 2px solid var(--color-sand);
    outline-offset: -2px;
}
.footer-subscribe-btn svg { width: 16px; height: 16px; }
.footer-subscribe-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Message feedback */
.footer-subscribe-msg {
    margin-top: var(--space-sm);
    font-size: var(--fs-xs);
    line-height: 1.5;
    min-height: 1.25em;
    transition: all var(--duration-fast);
}
.footer-subscribe-msg.success { color: #7ac07a; }
.footer-subscribe-msg.error   { color: #f28b82; }

/* Loading state — spinner on button */
.footer-subscribe-btn.is-loading svg {
    display: none;
}
.footer-subscribe-btn.is-loading::after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid rgb(255 255 255 / 0.3);
    border-top-color: var(--color-white);
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Contact items — icon + label rows */
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    font-size: var(--fs-small);
    color: rgb(255 255 255 / 0.55);
    line-height: 1.6;
    text-decoration: none;
    transition: color var(--duration-fast);
}
a.footer-contact-item:hover {
    color: var(--color-sand);
}
.footer-contact-item svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 0.15em;
    color: rgb(255 255 255 / 0.25);
    transition: color var(--duration-fast);
}
a.footer-contact-item:hover svg { color: var(--color-sand); }

.footer-hours {
    opacity: 0.6;
    font-size: var(--fs-xs);
}

/* ── Footer Bottom ───────────────────────────────────────── */
.footer-bottom {
    border-top: 1px solid rgb(255 255 255 / 0.06);
    margin-top: var(--space-2xl);
    padding: var(--space-lg) 0;
}
.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    font-size: var(--fs-xs);
    color: rgb(255 255 255 / 0.35);
}
.footer-tagline {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.25);
}

/* ── LAYER 22: Breadcrumb ────────────────────────────────── */
.breadcrumb {
    display: flex;
    gap: 0.5rem;
    font-size: var(--fs-xs);
    color: var(--color-mid);
    padding: calc(var(--nav-height) + var(--space-md)) var(--space-lg) 0;
    max-width: var(--max-width);
    margin: 0 auto;
}
.breadcrumb a { color: var(--color-taupe-deep); }
.breadcrumb a:hover { color: var(--color-black); }
.breadcrumb .sep { color: var(--color-sand); }

/* ── LAYER 23: Animations ────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--duration-slow) var(--ease-out-expo),
                transform var(--duration-slow) var(--ease-out-expo);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Stagger delays via CSS custom property */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* ── LAYER 23.5: Wide Screen (≥1280px) ───────────────────── */
@media (min-width: 1280px) {
    /* Narrow text content for readability on wide screens */
    .container-narrow {
        max-width: 900px;
    }

    /* Text-only sections: tighter cap (for remaining standalone text areas) */

    /* Preserve full-width grids inside narrow containers */
    .container-narrow .category-grid,
    .container-narrow .product-grid,
    .container-narrow .collection-grid,
    .container-narrow .inspiration-grid,
    .container-narrow .store-grid,
    .container-narrow .about-values,
    .container-narrow .professionals-features {
        max-width: none;
    }

    /* Hero text — slightly wider but still capped */
    .hero-content p { max-width: 680px; margin-left: auto; margin-right: auto; }
}

/* ── LAYER 24: Responsive — Tablet (≤1024px) ────────────── */
@media (max-width: 1024px) {
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid  { grid-template-columns: repeat(2, 1fr); }
    .collection-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .inspiration-grid { grid-template-columns: repeat(2, 1fr); }
    .professionals-features { grid-template-columns: repeat(2, 1fr); }
    .about-values { grid-template-columns: repeat(2, 1fr); }
    .store-grid { grid-template-columns: repeat(2, 1fr); }
    .product-detail-grid { grid-template-columns: 1fr; }

    .product-gallery { position: static; }
}

/* ── LAYER 25: Responsive — Mobile (≤768px) ──────────────── */
@media (max-width: 768px) {
    :root {
        --space-3xl: 4rem;
        --space-4xl: 6rem;
    }

    /* Mobile Nav — full screen overlay */
    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-cream);
        flex-direction: column;
        justify-content: center;
        gap: var(--space-lg);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--duration-base), visibility var(--duration-base);
        z-index: 1000;
    }
    .main-nav.open {
        opacity: 1;
        visibility: visible;
    }
    /* FIX: .site-header.scrolled applies `backdrop-filter`, which per CSS spec
       turns the header into the containing block for its position:fixed
       descendants. That traps the full-screen .main-nav overlay inside the
       ~5rem-tall header strip when the menu is opened after scrolling, so the
       nav links overflow below and get obscured by page content.
       While the mobile nav is open, neutralize backdrop-filter so the overlay
       is sized to the viewport again. The open nav paints an opaque full-screen
       background, so removing the blur is visually invisible.
       Specificity (.site-header:has(.main-nav.open) = 0,3,0) intentionally
       beats .site-header.scrolled (0,2,0) — no !important needed. */
    .site-header:has(.main-nav.open) {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .main-nav a {
        font-size: 1.5rem;
        letter-spacing: 0.08em;
    }
    .header-actions {
        gap: 0;
    }
    .mobile-toggle { display: flex;         justify-content: center;
        align-items: center;}
    .header-actions .lang-switcher { display: none; }

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

    .category-grid { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
    .product-grid  { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
    .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    .inspiration-grid { grid-template-columns: 1fr; }
    .professionals-features { grid-template-columns: 1fr; }
    .about-values { grid-template-columns: 1fr; }
    .store-grid { grid-template-columns: 1fr; }

    .hero-content { padding: var(--space-md); }
    .hero-content h1 { font-size: 2rem; }

    .footer-bottom-inner { flex-direction: column; gap: var(--space-sm); text-align: center; }

    /* Compact subscribe form on mobile */
    .footer-subscribe-input { padding: 0.55rem var(--space-sm); font-size: var(--fs-xs); }
    .footer-subscribe-btn { width: 40px; }
    .footer-subscribe-btn svg { width: 14px; height: 14px; }
    .footer-decor { margin-bottom: var(--space-xl); }

    .product-detail { padding-top: calc(var(--nav-height) + var(--space-md)); }
    .product-gallery-main { aspect-ratio: 3 / 4; }
}

/* ── LAYER 25.5: Responsive — Tablet Portrait (≤640px) ────── */
@media (max-width: 640px) {
    :root {
        --space-2xl: 3.5rem;
        --space-3xl: 3rem;
    }

    .container { padding: 0 var(--space-md); }
    .container-narrow { padding: 0 var(--space-md); }

    /* Tighter grid gaps */
    .category-grid { gap: var(--space-sm); }
    .product-grid  { gap: var(--space-sm); }
    .collection-grid { gap: var(--space-sm); }
    .store-grid { gap: var(--space-sm); }

    /* Product gallery — tighter thumbs */
    .product-gallery-thumbs {
        gap: var(--space-xs);
    }
    .product-gallery-thumbs button {
        width: 64px;
        height: 64px;
    }
    .product-gallery-main { aspect-ratio: 3 / 4; }

    /* Product detail spacing */
    .product-detail { padding-top: calc(var(--nav-height) + var(--space-sm)); }
    .product-detail-grid { gap: var(--space-md); }
    .product-info h1 { font-size: 1.5rem; }

    /* Hero content */
    .hero-content { padding: var(--space-sm); }
    .hero-content h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
    .hero-content p  { font-size: 0.95rem; max-width: 480px; }

    /* Footer */
    .footer-grid { gap: var(--space-md); }

    /* Touch target minimum */
    .main-nav a { font-size: 1.25rem; }
}

/* ── LAYER 26: Responsive — Small Mobile (≤480px) ────────── */
@media (max-width: 480px) {
    .category-grid { grid-template-columns: 1fr; }
    .product-grid  { grid-template-columns: 1fr; }

    .hero-actions { flex-direction: column; width: 100%; }
    .hero-actions .btn-primary,
    .hero-actions .btn-outline { width: 100%; text-align: center; justify-content: center; }

    .product-actions { flex-direction: column; }
    .product-actions .btn-primary,
    .product-actions .btn-outline { width: 100%; text-align: center; justify-content: center; }

    .professionals-cta-row { flex-direction: column; align-items: center; }

    /* Ensure touch targets on mobile */
    .mobile-toggle { min-width: 48px; min-height: 48px; }
}

/* ── LAYER 27: Reduced Motion ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }

    .hero-bg img { animation: none !important; }
    .scroll-indicator::after { animation: none !important; }
}

/* ── LAYER 28: Increased Contrast Mode ────────────────────── */
@media (prefers-contrast: more) {
    :root {
        --color-taupe:       #7A6548;
        --color-taupe-deep:  #6B5538;
        --color-mid:         #5A5652;
    }
    .site-header.scrolled {
        background: var(--color-cream);
        backdrop-filter: none;
    }
    /* High contrast: full white on solid dark header when over hero */
    body.has-hero .site-header:not(.scrolled),
    body:has(.hero) .site-header:not(.scrolled) {
        background: rgb(0 0 0 / 0.6);
    }
    body.has-hero .site-header:not(.scrolled) .main-nav:not(.open) a,
    body:has(.hero) .site-header:not(.scrolled) .main-nav:not(.open) a {
        color: var(--color-white);
    }
}

/* ── LAYER 29: Print Styles ──────────────────────────────── */
@media print {
    .site-header,
    .site-footer,
    .mobile-toggle,
    .scroll-indicator,
    .lang-switcher,
    .hero-actions,
    .product-actions,
    .catalogue-cta { display: none !important; }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    .hero {
        min-height: auto;
        padding: 2rem 0;
    }
    .hero-content {
        color: #000;
        animation: none;
        padding: 1rem;
    }
    .hero-content h1 { color: #000; font-size: 24pt; }
    .hero-bg { display: none; }
    .hero-overlay { display: none; }

    a { color: #000; text-decoration: underline; }
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

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

    img { max-width: 100% !important; page-break-inside: avoid; }

    .reveal { opacity: 1 !important; transform: none !important; }
}

/* ================================================================
   AUTH FEEDBACK — AJAX form messages
   ================================================================ */
.auth-feedback {
    display: none;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--fs-small);
    margin-bottom: var(--space-sm);
    text-align: center;
}
.auth-feedback:not(:empty) { display: block; }
.auth-feedback.success {
    background: rgb(122 139 94 / 0.12);
    color: var(--color-olive-deep);
    border: 1px solid rgb(122 139 94 / 0.3);
}
.auth-feedback.error {
    background: rgb(196 123 90 / 0.12);
    color: var(--color-terracotta);
    border: 1px solid rgb(196 123 90 / 0.3);
}

/* ================================================================
   USER MENU — logged-in dropdown
   ================================================================ */
.user-menu {
    position: relative;
}
.user-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-small);
    color: inherit;
}
.user-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 200px;
    background: var(--color-white);
    border: 1px solid var(--color-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-medium);
    padding: var(--space-sm);
    display: none;
    z-index: 1000;
}
.user-dropdown.open { display: block; }
.user-dropdown-info {
    display: block;
    font-size: var(--fs-xs);
    color: var(--color-mid);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-light);
}
.user-logout-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    color: var(--color-terracotta);
    text-decoration: none;
    transition: background 0.2s var(--ease-out-expo);
}
.user-logout-link:hover {
    background: rgb(196 123 90 / 0.08);
}
.user-logout-link svg { width: 16px; height: 16px; }

@media (max-width: 768px) {
    .user-name { display: none; }
    .user-dropdown {
        position: fixed;
        top: var(--nav-height);
        right: 1rem;
        left: 1rem;
        min-width: auto;
    }
}

/* ================================================================
   SEARCH PAGE
   ================================================================ */
.search-page {
    padding: var(--space-lg) 0;
}
.search-bar-large {
    display: flex;
    gap: 0.75rem;
    max-width: 600px;
    margin: 0 auto;
}
.search-bar-large input {
    flex: 1;
    padding: 0.875rem 1.25rem;
    font-size: var(--fs-body);
    font-family: var(--font-body);
    border: 1px solid var(--color-sand);
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--color-dark);
    transition: border-color 0.2s var(--ease-out-expo), box-shadow 0.2s var(--ease-out-expo);
}
.search-bar-large input:focus {
    outline: none;
    border-color: var(--color-taupe);
    box-shadow: 0 0 0 3px rgb(166 138 107 / 0.12);
}
.search-bar-large .btn-primary {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.search-result-info {
    text-align: center;
    color: var(--color-mid);
    font-size: var(--fs-small);
    margin-top: var(--space-md);
}
.search-empty {
    text-align: center;
    padding: var(--space-2xl) var(--space-sm);
    color: var(--color-mid);
}
.search-empty p {
    margin-top: var(--space-sm);
    font-size: var(--fs-body);
}

@media (max-width: 768px) {
    .search-bar-large {
        flex-direction: column;
    }
    .search-bar-large .btn-primary {
        justify-content: center;
    }
}

.none {display: none;}