/* --- shades.tokens.css --- */
/**
 * SUPERLAC SHADES SYSTEM — DESIGN TOKENS
 * Isolated. No inheritance from style.css or global tokens.css.
 * This file is the single source of truth for the shades application.
 */

:root {
    /* ═══════════════════════════════════════════
       COLOR SYSTEM — Strict Monochromatic + Pastel Green
       ═══════════════════════════════════════════ */

    /* Base Surfaces */
    --s-bg:           #FAFAF8;   /* Page background — barely warm white */
    --s-bg-pure:      #FFFFFF;   /* Pure white for cards/panels */
    --s-bg-soft:      #F5F5F3;   /* Recessed areas */
    --s-bg-dim:       #EFEFED;   /* Borders, dividers */

    /* Pastel Green Accent Scale */
    --s-green-100:    #EBF5ED;   /* Backgrounds, washes */
    --s-green-200:    #CFE8D2;   /* Main accent */
    --s-green-300:    #AECDB4;   /* Deep accent, hover states */
    --s-green-400:    #8AB59E;   /* Active states */
    --s-green-glow:   rgba(207, 232, 210, 0.35);  /* Ambient glow */

    /* Typography */
    --s-text-primary: #1A1A1A;   /* Primary text */
    --s-text-secondary: #5A5A58; /* Supporting text */
    --s-text-tertiary: #8A8A87;  /* Captions, labels */
    --s-text-inverse: #FFFFFF;   /* On dark backgrounds */

    /* ═══════════════════════════════════════════
       Z-INDEX ARCHITECTURE — Centralized, No Randoms
       ═══════════════════════════════════════════ */

    --s-z-background: 0;   /* Background decorative elements */
    --s-z-base:      10;   /* Normal page content */
    --s-z-content:   20;   /* Elevated cards, interactive content */
    --s-z-floating:  40;   /* Dock, sticky elements */
    --s-z-overlay:   80;   /* Drawers, panels */
    --s-z-modal:    120;   /* Modals, sheets */
    --s-z-max:      999;   /* Navbar, critical UI */

    /* ═══════════════════════════════════════════
       SPACING SYSTEM — Strict 8px Base Grid
       ═══════════════════════════════════════════ */

    --s-space-2xs:  4px;    /*  4px */
    --s-space-xs:   8px;    /*  8px */
    --s-space-sm:  16px;    /* 16px */
    --s-space-md:  24px;    /* 24px */
    --s-space-lg:  48px;    /* 48px */
    --s-space-xl:  80px;    /* 80px */
    --s-space-2xl: 120px;   /* 120px */
    --s-space-3xl: 180px;   /* 180px */

    /* ═══════════════════════════════════════════
       TYPOGRAPHY SYSTEM
       ═══════════════════════════════════════════ */

    --s-font-main:   'Outfit', sans-serif;
    --s-font-serif:  'Playfair Display', serif;

    /* Editorial Scale */
    --s-text-hero:      6rem;      /* 96px — cinematic hero */
    --s-text-headline:  3.5rem;    /* 56px — section heads */
    --s-text-subhead:   1.375rem;  /* 22px — sub-sections */
    --s-text-body:      1.0625rem; /* 17px — reading body */
    --s-text-caption:   0.8125rem; /* 13px — labels, captions */
    --s-text-micro:     0.6875rem; /* 11px — metadata */

    /* Line Heights */
    --s-lh-tight:      1.1;   /* Display type */
    --s-lh-editorial:  1.3;   /* Titles */
    --s-lh-reading:    1.75;  /* Body text */

    /* Letter Spacing */
    --s-ls-tight:    -0.025em;
    --s-ls-normal:    0em;
    --s-ls-wide:      0.04em;
    --s-ls-widest:    0.12em;

    /* Max Content Width */
    --s-measure:      65ch;   /* Optimal line length */

    /* ═══════════════════════════════════════════
       RADIUS SYSTEM
       ═══════════════════════════════════════════ */

    --s-radius-sm:   6px;
    --s-radius-md:  12px;
    --s-radius-lg:  20px;
    --s-radius-xl:  32px;
    --s-radius-pill: 999px;

    /* ═══════════════════════════════════════════
       SHADOW SYSTEM — Architectural Restraint
       ═══════════════════════════════════════════ */

    --s-shadow-xs:  0 2px 8px rgba(0, 0, 0, 0.04);
    --s-shadow-sm:  0 4px 16px rgba(0, 0, 0, 0.05);
    --s-shadow-md:  0 8px 32px rgba(0, 0, 0, 0.06);
    --s-shadow-lg:  0 20px 60px rgba(0, 0, 0, 0.07);
    --s-shadow-xl:  0 40px 100px rgba(0, 0, 0, 0.08);

    /* ═══════════════════════════════════════════
       GLASS SYSTEM — Max 1 blur per component
       blur <= 10px, opacity >= 0.82 for readability
       ═══════════════════════════════════════════ */

    --s-glass-bg:     rgba(252, 252, 250, 0.88);  /* Warm tint — visible on white */
    --s-glass-border: 1px solid rgba(0, 0, 0, 0.06);
    --s-glass-blur:   8px;   /* Hard cap at 10px */
    --s-glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);

    /* ═══════════════════════════════════════════
       MOTION SYSTEM — Restrained Luxury
       ═══════════════════════════════════════════ */

    --s-ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
    --s-ease-spring:  cubic-bezier(0.2, 0.8, 0.2, 1.1);
    --s-ease-out:     cubic-bezier(0, 0, 0.2, 1);
    --s-dur-fast:     200ms;
    --s-dur-base:     360ms;
    --s-dur-slow:     600ms;
    --s-dur-cinematic: 1200ms;
}

/* --- shades.base.css --- */
/**
 * SUPERLAC SHADES SYSTEM — BASE STYLES
 * Scoped resets and base typography for the shades application.
 * Does NOT conflict with style.css — all rules use .shades-app scope or explicit overrides.
 */

/* Font Import — moved to HTML <head> as async preload */

/* Page-Level Overrides — wins over style.css body rules */
body.shades-page {
    background-color: var(--s-bg) !important;
    color: var(--s-text-primary) !important;
    font-family: var(--s-font-main) !important;
    font-size: var(--s-text-body) !important;
    line-height: var(--s-lh-reading) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Typography Hierarchy */
.s-display {
    font-size: var(--s-text-hero);
    line-height: var(--s-lh-tight);
    letter-spacing: var(--s-ls-tight);
    font-weight: 300;
    font-family: var(--s-font-main);
}

.s-display em,
.s-display i {
    font-family: var(--s-font-serif);
    font-style: italic;
    font-weight: 400;
}

.s-headline {
    font-size: var(--s-text-headline);
    line-height: var(--s-lh-editorial);
    letter-spacing: var(--s-ls-tight);
    font-weight: 400;
}

.s-subhead {
    font-size: var(--s-text-subhead);
    line-height: var(--s-lh-reading);
    font-weight: 400;
    color: var(--s-text-secondary);
}

.s-body {
    font-size: var(--s-text-body);
    line-height: var(--s-lh-reading);
    color: var(--s-text-secondary);
    max-width: var(--s-measure);
}

.s-caption {
    font-size: var(--s-text-caption);
    letter-spacing: var(--s-ls-widest);
    text-transform: uppercase;
    font-weight: 600;
    color: var(--s-text-tertiary);
}

.s-micro {
    font-size: var(--s-text-micro);
    letter-spacing: var(--s-ls-widest);
    text-transform: uppercase;
    font-weight: 600;
    color: var(--s-text-tertiary);
}

/* Responsive Typography */
@media (max-width: 1280px) {
    :root {
        --s-text-hero: 5rem;
        --s-text-headline: 3rem;
    }
}

@media (max-width: 1024px) {
    :root {
        --s-text-hero: 4rem;
        --s-text-headline: 2.5rem;
    }
}

@media (max-width: 768px) {
    :root {
        --s-text-hero: 2.5rem;
        --s-text-headline: 2rem;
        --s-text-subhead: 1.125rem;
    }
}

@media (max-width: 480px) {
    :root {
        --s-text-hero: 2.25rem;
        --s-text-headline: 1.75rem;
    }
}

/* Link Resets */
.shades-page a {
    text-decoration: none;
    color: inherit;
}

/* Image Defaults */
.shades-page img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* List Resets — Only for shades-specific content, don't break global nav */
.shades-page main ul,
.shades-page main ol,
.shades-page footer ul,
.shades-page .s-shade-registry ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Button Reset */
.shades-page button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* Select Reset */
.shades-page select {
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

/* --- shades.layout.css --- */
/**
 * SUPERLAC SHADES SYSTEM — LAYOUT
 * Section containers, grid systems, and spatial rhythm.
 * Tailwind is used only for flex/grid primitives (layout, not styling).
 */

/* ── Page Container ── */
.s-container {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--s-space-lg);
    padding-right: var(--s-space-lg);
}

@media (max-width: 1024px) {
    .s-container {
        padding-left: var(--s-space-md);
        padding-right: var(--s-space-md);
    }
}

@media (max-width: 768px) {
    .s-container {
        padding-left: var(--s-space-sm);
        padding-right: var(--s-space-sm);
    }
}

/* ── Section Rhythm ── */
.s-section {
    padding-top: var(--s-space-2xl);
    padding-bottom: var(--s-space-2xl);
}

.s-section-sm {
    padding-top: var(--s-space-xl);
    padding-bottom: var(--s-space-xl);
}

.s-section-hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 100px; /* Clear fixed navbar */
}

@media (max-width: 768px) {
    .s-section {
        padding-top: var(--s-space-lg);
        padding-bottom: var(--s-space-lg);
    }
    .s-section-sm {
        padding-top: var(--s-space-lg);
        padding-bottom: var(--s-space-lg);
    }
    .s-section-hero {
        min-height: auto;
        padding-top: 100px;
        padding-bottom: var(--s-space-lg);
    }
}

/* ── Editorial Grid ── */
/* Asymmetric hero: 55% text / 45% visual */
.s-hero-grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: var(--s-space-lg);
    align-items: center;
    width: 100%;
}

/* Narrative Hero: 60/40 with more whitespace */
.s-narrative-hero-grid {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: var(--s-space-xl);
    align-items: center;
    width: 100%;
}

/* Floating Asymmetric Layout */
.s-layout-asymmetric {
    display: flex;
    flex-direction: column;
    gap: var(--s-space-3xl);
}

.s-layout-row {
    display: flex;
    align-items: center;
    gap: var(--s-space-2xl);
}

.s-layout-row.reverse {
    flex-direction: row-reverse;
}

/* Visual Silence Utility */
.s-visual-silence {
    padding: var(--s-space-3xl) 0;
}

.s-text-measure {
    max-width: var(--s-measure);
}

@media (max-width: 900px) {
    .s-narrative-hero-grid,
    .s-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--s-space-lg);
    }
    .s-layout-row,
    .s-layout-row.reverse {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-space-lg);
    }
}

/* Standard content grids */
.s-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-space-md);
}

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

/* ══════════════════════════════════════════════════
   SHADE REGISTRY — 3 COLUMNS PER ROW (Strict)
   ══════════════════════════════════════════════════ */
.s-shade-registry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-space-md);
}

/* Feature card — no spanning, uniform 3-col grid */
.s-shade-registry .s-card-feature {
    grid-column: span 1;
}

/* Wide editorial insert spans full width */
.s-editorial-insert {
    grid-column: 1 / -1;
    padding: var(--s-space-2xl) 0;
}

/* Tablet: 2 columns */
@media (max-width: 900px) {
    .s-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--s-space-md);
    }
    .s-shade-registry {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

/* Small mobile: Maintain architectural 3-column grid */
@media (max-width: 480px) {
    .s-shade-registry {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px; /* Slightly tighter gap for small screens */
    }
    .s-grid-2,
    .s-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ── Spacing Utilities ── */
.s-mt-xs  { margin-top: var(--s-space-xs); }
.s-mt-sm  { margin-top: var(--s-space-sm); }
.s-mt-md  { margin-top: var(--s-space-md); }
.s-mt-lg  { margin-top: var(--s-space-lg); }
.s-mt-xl  { margin-top: var(--s-space-xl); }

.s-mb-xs  { margin-bottom: var(--s-space-xs); }
.s-mb-sm  { margin-bottom: var(--s-space-sm); }
.s-mb-md  { margin-bottom: var(--s-space-md); }
.s-mb-lg  { margin-bottom: var(--s-space-lg); }
.s-mb-xl  { margin-bottom: var(--s-space-xl); }

/* ── Divider ── */
.s-divider {
    width: 100%;
    height: 1px;
    background: var(--s-bg-dim);
    margin: var(--s-space-2xl) 0;
}

/* ── Quote Rest Area ── */
.s-rest-area {
    background: var(--s-bg-soft);
    padding: var(--s-space-3xl) 0;
    text-align: center;
}

@media (max-width: 768px) {
    .s-rest-area {
        padding: var(--s-space-xl) 0;
    }
    .s-divider {
        margin: var(--s-space-lg) 0;
    }
}

/* --- shades.components.css --- */
/**
 * SUPERLAC SHADES SYSTEM — COMPONENTS
 * All interactive components: cards, dock, glass, buttons, filters, palette.
 *
 * RULES:
 * - All elements MUST be visible by default (opacity: 1, no GSAP gates)
 * - NO mix-blend-mode that causes invisible rendering
 * - Max 1 backdrop-filter per component
 * - Glass opacity >= 0.82
 */

/* ══════════════════════════════════════════════════
   HERO COMPONENTS
   ══════════════════════════════════════════════════ */

/* Hero ambient glow — background decoration ONLY */
.s-hero-glow {
    position: absolute;
    top: -10%;
    right: -5%;
    width: 55%;
    height: 120%;
    background: radial-gradient(ellipse 60% 70% at 70% 40%,
            var(--s-green-glow) 0%,
            transparent 70%);
    z-index: var(--s-z-background);
    pointer-events: none;
    /* NO animation — luxury moves less */
}

/* Hero image composition */
.s-hero-image-wrap {
    position: relative;
    z-index: var(--s-z-base);
}

.s-hero-image {
    width: 100%;
    height: 80vh;
    max-height: 700px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--s-radius-xl);
    /* NO mix-blend-overlay — use box-shadow for depth */
    box-shadow: var(--s-shadow-xl);
}

/* Floating green accent shape behind image */
.s-hero-image-accent {
    position: absolute;
    bottom: -24px;
    left: -24px;
    width: 60%;
    height: 60%;
    background: var(--s-green-100);
    border-radius: var(--s-radius-xl);
    z-index: -1;
}

@media (max-width: 900px) {
    .s-hero-image {
        height: 50vw;
        max-height: 400px;
    }

    .s-hero-glow {
        width: 100%;
        top: auto;
        bottom: 0;
        right: 0;
        height: 50%;
    }
}

@media (max-width: 640px) {
    .s-hero-image-wrap {
        display: none;
        /* Hide on small mobile — keep text focus */
    }
}

/* Hero badge */
.s-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-space-xs);
    background: var(--s-green-100);
    border: 1px solid var(--s-green-200);
    border-radius: var(--s-radius-pill);
    padding: 6px 16px;
    font-size: var(--s-text-micro);
    letter-spacing: var(--s-ls-widest);
    text-transform: uppercase;
    color: var(--s-green-400);
    font-weight: 600;
    margin-bottom: var(--s-space-md);
}

/* ══════════════════════════════════════════════════
   MATERIAL EXPERIENCE COMPONENTS (Liquid Sample & Tactility)
   ══════════════════════════════════════════════════ */

/**
 * Liquid Material Sample
 * A floating architectural paint tile with depth, grain, and reflection.
 * Renamed from 'Liquid Card' to emphasize physical material quality.
 */
.s-liquid-sample-wrap {
    position: relative;
    perspective: 1200px;
    z-index: var(--s-z-content);
}

.s-liquid-sample {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    background-color: var(--s-sample-color, #e0e0e0);
    border-radius: var(--s-radius-lg);
    box-shadow: 
        0 30px 60px rgba(0,0,0,0.12),
        inset 0 0 40px rgba(255,255,255,0.05);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.8s var(--s-ease-smooth);
}

/* Material Texture: Subtle Paint Grain */
.s-liquid-sample::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Ambient Liquid Gradient */
.s-liquid-sample-liquid {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 30% 30%, 
        rgba(255,255,255,0.1) 0%, 
        transparent 60%);
    filter: blur(40px);
    opacity: 0.5;
}

/* Edge Reflection (Bevel) */
.s-liquid-sample::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, 
        transparent, 
        rgba(255,255,255,0.4), 
        transparent);
}

/* Material Gloss/Reflection Highlight */
.s-liquid-sample-liquid {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 70% 20%, 
        rgba(255,255,255,0.2) 0%, 
        transparent 50%);
    filter: blur(30px);
    opacity: 0.6;
    pointer-events: none;
}

/**
 * Tactile Material Library
 * Grid items for material pairings (wood, stone, metal).
 */
.s-material-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--s-space-lg);
}

.s-material-item {
    position: relative;
    border-radius: var(--s-radius-md);
    overflow: hidden;
    aspect-ratio: 1/1;
    background: var(--s-bg-dim);
    transition: all var(--s-dur-base) var(--s-ease-smooth);
}

.s-material-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--s-shadow-lg);
}

.s-material-texture {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.9;
}

/* Specific Material Overlays with Color Fallbacks */
.s-tex-walnut { background-color: #3d2b1f; background-image: url('https://images.unsplash.com/photo-1588345921523-c2dce2a7ecbc?q=80&w=800'); }
.s-tex-brass  { background-color: #b5a642; background-image: url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=80&w=800'); }
.s-tex-linen  { background-color: #f5f5dc; background-image: url('https://images.unsplash.com/photo-1584622650111-993a426fbf0a?q=80&w=800'); }
.s-tex-stone  { background-color: #a8a8a8; background-image: url('https://images.unsplash.com/photo-1516541196182-6bdb0516ed27?q=80&w=800'); }

.s-material-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--s-space-md);
    background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
    color: white;
}

/**
 * Editorial Floating Composition
 * For asymmetrical, breathable layouts.
 */
.s-float-block {
    position: relative;
    padding: var(--s-space-2xl) 0;
}

.s-float-content {
    max-width: 500px;
    margin-left: 10%;
}

.s-float-visual {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 45%;
    z-index: -1;
}

/* ── NARRATIVE MOBILE OVERRIDES ── */
@media (max-width: 900px) {
    .s-narrative-hero-grid {
        padding-bottom: var(--s-space-xl);
    }
    
    .s-liquid-sample-wrap {
        margin: var(--s-space-lg) auto 0;
        width: 80%;
    }

    .s-material-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-space-md);
    }
    
    .s-float-block {
        padding: var(--s-space-lg) 0;
    }
    
    .s-visual-silence {
        padding: var(--s-space-xl) 0;
    }
}

@media (max-width: 600px) {
    .s-material-grid {
        grid-template-columns: 1fr;
    }
    
    .s-liquid-sample-wrap {
        width: 100%;
    }
}

/* Hero stat row */
.s-hero-stats {
    display: flex;
    gap: var(--s-space-lg);
    margin-top: var(--s-space-lg);
    padding-top: var(--s-space-lg);
    border-top: 1px solid var(--s-bg-dim);
}

.s-hero-stat-value {
    font-size: 1.75rem;
    font-weight: 300;
    letter-spacing: var(--s-ls-tight);
    color: var(--s-text-primary);
}

.s-hero-stat-label {
    font-size: var(--s-text-caption);
    color: var(--s-text-tertiary);
    letter-spacing: var(--s-ls-wide);
    text-transform: uppercase;
    margin-top: 2px;
}

/* ══════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════ */

.s-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--s-space-xs);
    background: #1a3a2a;
    color: #ffffff !important;
    padding: 14px 32px;
    border-radius: var(--s-radius-pill);
    font-size: var(--s-text-caption);
    font-weight: 600;
    letter-spacing: var(--s-ls-wide);
    text-transform: uppercase;
    transition: background var(--s-dur-base) var(--s-ease-smooth),
        transform var(--s-dur-base) var(--s-ease-smooth),
        box-shadow var(--s-dur-base) var(--s-ease-smooth);
}

.s-btn-primary:hover {
    background: #0f2a1c;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(26, 58, 42, 0.35);
    color: #ffffff !important;
}

.s-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--s-space-xs);
    background: #ffffff;
    color: #1a1a1a;
    padding: 14px 32px;
    border-radius: var(--s-radius-pill);
    border: 1.5px solid #d4d4d4;
    font-size: var(--s-text-caption);
    font-weight: 600;
    letter-spacing: var(--s-ls-wide);
    text-transform: uppercase;
    transition: all var(--s-dur-base) var(--s-ease-smooth);
}

.s-btn-ghost:hover {
    border-color: #1a3a2a;
    background: #1a3a2a;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(26, 58, 42, 0.2);
}

/* ══════════════════════════════════════════════════
   DISCOVERY DOCK (Glass — Single Blur Layer)
   ══════════════════════════════════════════════════ */

.s-dock {
    background: var(--s-glass-bg);
    backdrop-filter: blur(var(--s-glass-blur));
    -webkit-backdrop-filter: blur(var(--s-glass-blur));
    border: var(--s-glass-border);
    border-radius: var(--s-radius-pill);
    box-shadow: var(--s-glass-shadow);
    padding: var(--s-space-sm) var(--s-space-md);
    display: flex;
    align-items: center;
    gap: var(--s-space-md);
    flex-wrap: wrap;
    /* Wrap on narrow screens */
    /* Visible by default — no GSAP opacity gate */
    position: sticky;
    top: 90px;
    z-index: var(--s-z-floating);
    margin: 0 auto;
    max-width: 900px;
    margin-bottom: var(--s-space-2xl);
}

.s-dock-divider {
    width: 1px;
    height: 32px;
    background: var(--s-bg-dim);
    flex-shrink: 0;
}

.s-dock-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--s-text-caption);
    font-weight: 600;
    letter-spacing: var(--s-ls-wide);
    text-transform: uppercase;
    color: var(--s-text-tertiary);
    flex-shrink: 0;
}

.s-dock-label svg {
    color: var(--s-green-300);
}

/* Dock inputs */
.s-dock-select,
.s-dock-input {
    background: var(--s-bg-soft);
    border: 1px solid var(--s-bg-dim);
    border-radius: var(--s-radius-pill);
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--s-text-primary);
    outline: none;
    transition: border-color var(--s-dur-base) var(--s-ease-smooth),
        background var(--s-dur-base) var(--s-ease-smooth);
    /* NO backdrop-filter — dock already has it */
}

.s-dock-select:hover,
.s-dock-select:focus,
.s-dock-input:hover,
.s-dock-input:focus {
    border-color: var(--s-green-300);
    background: var(--s-bg-pure);
}

.s-dock-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.s-dock-input-wrap .s-dock-input {
    padding-left: 40px;
    width: 180px;
    transition: all var(--s-dur-slow) var(--s-ease-smooth);
}

.s-dock-input-wrap .s-dock-input:focus {
    width: 240px;
}

.s-dock-input-icon {
    position: absolute;
    left: 14px;
    color: var(--s-text-tertiary);
    pointer-events: none;
    width: 15px;
    height: 15px;
}

@media (max-width: 900px) {
    .s-dock {
        border-radius: var(--s-radius-xl);
        flex-direction: column;
        align-items: stretch;
        position: relative;
        top: auto;
        margin-bottom: var(--s-space-xl);
    }

    .s-dock-divider {
        width: 100%;
        height: 1px;
    }

    .s-dock-input-wrap .s-dock-input,
    .s-dock-input-wrap .s-dock-input:focus {
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════
   FILTER PILLS
   ══════════════════════════════════════════════════ */

.s-filter-bar {
    display: flex;
    gap: var(--s-space-xs);
    flex-wrap: wrap;
    align-items: center;
}

.s-filter-pill {
    padding: 8px 20px;
    border-radius: var(--s-radius-pill);
    background: var(--s-bg-soft);
    border: 1px solid transparent;
    font-size: var(--s-text-caption);
    font-weight: 500;
    color: var(--s-text-secondary);
    transition: all var(--s-dur-base) var(--s-ease-smooth);
    cursor: pointer;
}

.s-filter-pill:hover {
    border-color: var(--s-bg-dim);
    color: var(--s-text-primary);
}

.s-filter-pill.active {
    background: var(--s-text-primary);
    color: var(--s-text-inverse);
    border-color: var(--s-text-primary);
}

/* ══════════════════════════════════════════════════
   SHADE CARDS — Visible by Default
   ══════════════════════════════════════════════════ */

/* Base card */
.s-shade-card {
    cursor: pointer;
    transition: transform var(--s-dur-slow) var(--s-ease-spring);
    /* Always visible — GSAP only enhances */
}

.s-shade-card:hover {
    transform: translateY(-8px);
}

/* Color swatch — the core of every card */
.s-shade-swatch {
    border-radius: var(--s-radius-lg);
    overflow: hidden;
    position: relative;
    /* NO mix-blend-mode, NO opacity layers that obscure color */
}

.s-shade-swatch-color {
    width: 100%;
    height: 100%;
    /* Color set via inline style: background-color: {hex} */
    /* Subtle grain texture overlay — NOT mix-blend */
    position: relative;
}

.s-shade-swatch-color::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/assets/images/shade_texture.png');
    background-size: cover;
    opacity: 0.08;
    /* Subtle — does not obscure the color */
    mix-blend-mode: normal;
    /* Explicit normal — no weird blend */
}

/* Card metadata area */
.s-shade-meta {
    padding: var(--s-space-sm) 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.s-shade-name {
    font-size: 1.125rem;
    font-weight: 300;
    color: var(--s-text-primary);
    letter-spacing: -0.01em;
}

.s-shade-family {
    font-size: var(--s-text-caption);
    letter-spacing: var(--s-ls-widest);
    text-transform: uppercase;
    color: var(--s-text-tertiary);
    margin-bottom: 4px;
}

/* Save / heart button */
.s-shade-save {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--s-bg-soft);
    border: 1px solid var(--s-bg-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--s-dur-base) var(--s-ease-spring);
    color: var(--s-text-tertiary);
}

.s-shade-save:hover {
    background: var(--s-green-200);
    border-color: var(--s-green-300);
    color: var(--s-green-400);
    transform: scale(1.1);
}

.s-shade-save.saved {
    background: var(--s-green-200);
    border-color: var(--s-green-300);
    color: var(--s-green-400);
}

/* Small standard card */
.s-card-standard .s-shade-swatch {
    height: 220px;
}

/* Feature card — 2-column span, taller */
.s-card-feature .s-shade-swatch {
    height: 360px;
}

.s-card-feature .s-shade-name {
    font-size: 1.5rem;
}

/* ══════════════════════════════════════════════════
   EDITORIAL INSERT — Palette Banner
   ══════════════════════════════════════════════════ */

.s-editorial-banner {
    background: var(--s-bg-soft);
    border-radius: var(--s-radius-xl);
    padding: var(--s-space-xl) var(--s-space-2xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-space-lg);
}

.s-editorial-banner-palette {
    display: flex;
    gap: var(--s-space-xs);
}

.s-editorial-banner-swatch {
    width: 56px;
    height: 80px;
    border-radius: var(--s-radius-md);
    flex-shrink: 0;
    transition: transform var(--s-dur-slow) var(--s-ease-spring);
}

.s-editorial-banner-swatch:hover {
    transform: translateY(-8px);
}

@media (max-width: 768px) {
    .s-editorial-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--s-space-lg);
    }
}

/* ══════════════════════════════════════════════════
   PALETTE BOTTOM SHEET
   ══════════════════════════════════════════════════ */

.s-palette-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid var(--s-bg-dim);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 48px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    padding: var(--s-space-lg);
    max-height: 60vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform var(--s-dur-slow) var(--s-ease-smooth);
}

.s-palette-sheet.open {
    transform: translateY(0);
}

.s-palette-sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--s-bg-dim);
    border-radius: var(--s-radius-pill);
    margin: 0 auto var(--s-space-md);
}

/* Floating Palette Mini Card — Always Visible */
.s-palette-trigger {
    position: fixed;
    bottom: var(--s-space-lg);
    right: var(--s-space-lg);
    z-index: 9998;
    background: #ffffff;
    color: #1a1a1a;
    border-radius: 20px;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all var(--s-dur-base) var(--s-ease-spring);
    cursor: pointer;
    /* Always visible as a floating mini card */
}

.s-palette-trigger:hover {
    background: #1a3a2a;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(26, 58, 42, 0.3);
}

.s-palette-trigger:hover .s-palette-count {
    background: #ffffff;
    color: #1a3a2a;
}

.s-palette-count {
    background: var(--s-green-200);
    color: var(--s-green-400);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

/* ══════════════════════════════════════════════════
   LOADING STATE
   ══════════════════════════════════════════════════ */

.s-skeleton {
    border-radius: var(--s-radius-lg);
    background: linear-gradient(90deg,
            var(--s-bg-dim) 25%,
            var(--s-bg-soft) 50%,
            var(--s-bg-dim) 75%);
    background-size: 200% 100%;
    animation: s-shimmer 1.4s ease-in-out infinite;
}

@keyframes s-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Empty state */
.s-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--s-space-2xl) var(--s-space-lg);
    color: var(--s-text-tertiary);
}
/* --- shades.motion.css --- */
/**
 * SUPERLAC SHADES SYSTEM — MOTION
 * Restrained luxury animations.
 *
 * RULES:
 * 1. All elements VISIBLE by default (no opacity:0 base states)
 * 2. GSAP enhances visible elements — never reveals hidden ones
 * 3. Max 2 ambient animations on the page simultaneously
 * 4. prefers-reduced-motion fully supported
 * 5. NO floating dock, NO drifting layers
 */

/* ── GSAP Entry Animation Classes ──
   These are applied by JS AFTER the element is already visible.
   Base state is always opacity:1
*/

/* Fade in from below — used for cards as they scroll into view */
.s-anim-up {
    /* Default: visible */
    opacity: 1;
    transform: translateY(0);
}

/* State set by JS before GSAP takes over */
.s-anim-up[data-gsap-init="true"] {
    opacity: 0;
    transform: translateY(24px);
}

/* ── Ambient Green Glow — Only 1 on page ── */
@keyframes s-glow-breathe {
    0%   { opacity: 0.25; transform: scale(1); }
    50%  { opacity: 0.35; transform: scale(1.04); }
    100% { opacity: 0.25; transform: scale(1); }
}

.s-hero-glow {
    animation: s-glow-breathe 10s ease-in-out infinite;
}

/* ── Card Hover — CSS only, no GSAP needed ── */
/* Defined in components.css via transform */

/* ── Section fade reveal — triggered by IntersectionObserver ── */
.s-reveal {
    opacity: 1;
    transform: none;
    transition: opacity var(--s-dur-cinematic) var(--s-ease-smooth),
                transform var(--s-dur-cinematic) var(--s-ease-smooth);
}

.s-reveal[data-state="hidden"] {
    opacity: 0;
    transform: translateY(32px);
}

.s-reveal[data-state="visible"] {
    opacity: 1;
    transform: translateY(0);
}

/* ── Save Button Pulse — haptic feedback analog ── */
@keyframes s-save-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(174, 205, 180, 0.6); }
    70%  { box-shadow: 0 0 0 12px rgba(174, 205, 180, 0); }
    100% { box-shadow: 0 0 0 0 rgba(174, 205, 180, 0); }
}

.s-shade-save.pulse {
    animation: s-save-pulse 0.5s var(--s-ease-out) 1;
}

/* ══════════════════════════════════════════════════
   prefers-reduced-motion — Disable Everything
   ══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .s-hero-glow {
        animation: none;
        opacity: 0.2;
    }

    .s-reveal[data-state="hidden"] {
        opacity: 1;
        transform: none;
    }
}

/* ══════════════════════════════════════════════════
   Mobile Performance — Disable heavy effects
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Disable backdrop blur on mobile (GPU intensive) */
    .s-dock {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--s-bg-pure);
        border: 1px solid var(--s-bg-dim);
    }
}

/* --- shades.utilities.css --- */
/**
 * SUPERLAC SHADES SYSTEM — UTILITIES
 * Debug mode, mobile performance flags, and helper classes.
 */

/* ── Debug Mode ──
   Activated via: window.__SUPERLAC_DEBUG__ = true
   body gets class 'debug-mode' from JS
*/

body.debug-mode * {
    outline: 1px solid rgba(255, 0, 0, 0.2) !important;
}

body.debug-mode .s-container {
    outline: 2px solid rgba(0, 100, 255, 0.4) !important;
}

body.debug-mode .s-section,
body.debug-mode .s-section-hero {
    outline: 2px solid rgba(0, 200, 100, 0.4) !important;
}

body.debug-mode [style*="z-index"]::before {
    content: attr(data-z);
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    font-size: 10px;
    padding: 2px 4px;
    z-index: 999999;
}

/* Show overflow clipping */
body.debug-mode .overflow-hidden,
body.debug-mode [class*="overflow"] {
    outline: 2px dashed rgba(255, 165, 0, 0.6) !important;
}

/* ── Performance Mode ──
   Applied by JS when deviceMemory < 4 or hardwareConcurrency <= 2
*/

body.perf-mode .s-hero-glow {
    display: none;
}

body.perf-mode .s-shade-card {
    transition: none;
}

body.perf-mode .s-shade-swatch-color::after {
    display: none; /* Remove texture overlay */
}

/* ── Utility Helpers ── */

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

.s-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.s-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.s-gap-xs { gap: var(--s-space-xs); }
.s-gap-sm { gap: var(--s-space-sm); }
.s-gap-md { gap: var(--s-space-md); }

/* Content priority system — visual weight control */
.s-priority-primary {
    /* Full presence — hero, main CTAs */
    opacity: 1;
}

.s-priority-secondary {
    /* Slightly receded — supporting content */
    opacity: 0.85;
}

.s-priority-tertiary {
    /* Passive — decorative, metadata */
    opacity: 0.55;
}

/* --- shades.mobile.css --- */
/**
 * SUPERLAC SHADES SYSTEM — MOBILE ADDITIONS
 * Complete mobile responsiveness for every section.
 *
 * Phase 8: Touch targets, safe area insets, iOS fixes, scroll snap on mobile
 */

/* ══════════════════════════════════════════════════
   TOUCH TARGETS — 44px minimum (Apple HIG standard)
   ══════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {

    /* All interactive elements: minimum 44px touch target */
    .s-btn-primary,
    .s-btn-ghost {
        min-height: 48px;
        padding: 14px 28px;
    }

    .s-filter-pill {
        min-height: 44px;
        padding: 10px 20px;
    }

    .s-shade-save {
        width: 48px;
        height: 48px;
    }

    .s-dock-select,
    .s-dock-input {
        min-height: 48px;
        padding: 12px 18px;
        font-size: 16px; /* Prevents iOS zoom on input focus */
    }

    /* Disable hover states that feel wrong on touch */
    .s-shade-card:hover {
        transform: none;
    }

    .s-shade-card:active {
        transform: scale(0.98);
        transition: transform 100ms ease;
    }

    .s-editorial-banner-swatch:hover {
        transform: none;
    }
}

/* ══════════════════════════════════════════════════
   SAFE AREA INSETS — Notch/Island phones
   ══════════════════════════════════════════════════ */

.s-palette-trigger {
    bottom: calc(var(--s-space-lg) + env(safe-area-inset-bottom, 0px));
    right: calc(var(--s-space-lg) + env(safe-area-inset-right, 0px));
}

.s-palette-sheet {
    padding-bottom: calc(var(--s-space-lg) + env(safe-area-inset-bottom, 0px));
    padding-left: calc(var(--s-space-lg) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--s-space-lg) + env(safe-area-inset-right, 0px));
}

/* ══════════════════════════════════════════════════
   MOBILE-SPECIFIC LAYOUT FIXES (≤768px)
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Hero stat row — reduce gap on small screens */
    .s-hero-stats {
        gap: var(--s-space-sm);
        flex-wrap: wrap;
    }

    .s-hero-stat-value {
        font-size: 1.5rem;
    }

    /* Card swatches — shorter on mobile */
    .s-card-standard .s-shade-swatch {
        height: 160px;
    }

    .s-card-feature .s-shade-swatch {
        height: 200px;
    }

    /* Palette sheet — full width, taller on mobile */
    .s-palette-sheet {
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: var(--s-space-md);
    }

    /* Palette swatches — horizontally scrollable on small screens */
    #palette-swatches {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--s-space-xs);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #palette-swatches::-webkit-scrollbar {
        display: none;
    }

    /* Filter pills — horizontal scroll on mobile with full-bleed feel */
    .s-filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 12px;
        margin-bottom: -8px;
        gap: 12px;
        width: calc(100% + (var(--s-space-sm) * 2));
        margin-left: calc(var(--s-space-sm) * -1);
        padding-left: var(--s-space-sm);
        padding-right: var(--s-space-sm);
    }

    .s-filter-bar::-webkit-scrollbar {
        display: none;
    }

    .s-filter-pill {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 13px;
        padding: 10px 22px;
    }

    /* Editorial banner — stack vertically on mobile */
    .s-editorial-banner-palette {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--s-space-xs);
        scrollbar-width: none;
    }

    .s-editorial-banner-palette::-webkit-scrollbar {
        display: none;
    }

    /* Hero badge — smaller on mobile */
    .s-hero-badge {
        font-size: 9px;
        padding: 5px 12px;
    }

    /* Hero buttons — full width on mobile */
    .s-hero-content .flex {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .s-hero-content .s-btn-primary,
    .s-hero-content .s-btn-ghost {
        text-align: center;
        justify-content: center;
        width: 100%;
    }

    /* Shade card meta — tighter on mobile */
    .s-shade-meta {
        padding: 10px 0;
    }

    .s-shade-name {
        font-size: 0.95rem;
    }

    .s-shade-family {
        font-size: 10px;
    }

    /* Section headings — tighter */
    .s-flex-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--s-space-md) !important;
    }

    .s-headline {
        font-size: 2rem;
        line-height: var(--s-lh-tight);
    }

    .s-caption {
        font-size: 11px;
    }

    /* Palette trigger on mobile — smaller & tighter */
    .s-palette-trigger {
        padding: 10px 16px;
        font-size: 11px;
        border-radius: 16px;
        bottom: 16px;
        right: 16px;
    }

    /* Back to top — tighter positioning */
    .s-back-to-top {
        width: 42px;
        height: 42px;
        bottom: 80px;
        right: 16px;
    }

    /* Palette sheet actions — stack vertically */
    .s-palette-sheet .flex.gap-3 {
        flex-direction: column;
        gap: 8px;
    }

    .s-palette-sheet .s-btn-ghost,
    .s-palette-sheet .s-btn-primary {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Dock — position relative on mobile (sticky causes iOS issues) */
    .s-dock {
        position: relative;
        top: auto;
    }

    /* Trending section header */
    .s-flex-between .s-btn-ghost {
        align-self: flex-start;
        padding: 10px 20px;
        font-size: 11px;
    }
}

/* ══════════════════════════════════════════════════
   VERY SMALL MOBILE (320px — SE, Moto G)
   ══════════════════════════════════════════════════ */

@media (max-width: 380px) {
    .s-card-standard .s-shade-swatch {
        height: 140px;
    }

    .s-hero-stat-value {
        font-size: 1.25rem;
    }

    .s-hero-stats {
        gap: var(--s-space-xs);
    }

    .s-hero-content .s-btn-primary,
    .s-hero-content .s-btn-ghost {
        padding: 12px 20px;
        font-size: 11px;
    }

    .s-palette-trigger {
        padding: 8px 12px;
        font-size: 10px;
        gap: 6px;
    }

    .s-palette-count {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }
}

/* ══════════════════════════════════════════════════
   RECENTLY VIEWED — Horizontal Scroll Strip
   ══════════════════════════════════════════════════ */

.s-recents-strip {
    display: flex;
    gap: var(--s-space-sm);
    overflow-x: auto;
    padding-bottom: var(--s-space-xs);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.s-recents-strip::-webkit-scrollbar {
    display: none;
}

.s-recent-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-space-xs);
    background: var(--s-bg-pure);
    border: 1px solid var(--s-bg-dim);
    border-radius: var(--s-radius-pill);
    padding: 6px 14px 6px 6px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all var(--s-dur-base) var(--s-ease-smooth);
    min-height: 44px; /* Touch target */
}

.s-recent-chip:hover {
    border-color: var(--s-bg-dim);
    box-shadow: var(--s-shadow-sm);
    transform: translateY(-1px);
}

.s-recent-chip-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.s-recent-chip-name {
    font-size: var(--s-text-caption);
    font-weight: 500;
    color: var(--s-text-secondary);
}

/* ══════════════════════════════════════════════════
   BACK TO TOP BUTTON
   ══════════════════════════════════════════════════ */

.s-back-to-top {
    position: fixed;
    bottom: calc(var(--s-space-3xl) + env(safe-area-inset-bottom, 0px));
    right: var(--s-space-lg);
    z-index: 9997;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--s-text-primary);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: all var(--s-dur-base) var(--s-ease-spring);
}

.s-back-to-top.visible {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.s-back-to-top:hover {
    background: #1a3a2a;
    color: #ffffff;
    border-color: #1a3a2a;
    transform: translateY(-2px);
}

/* When palette trigger is visible, shift back-to-top above it */
.s-back-to-top.palette-offset {
    bottom: calc(var(--s-space-3xl) + 68px + env(safe-area-inset-bottom, 0px));
}

/* --- shades-shell.css --- */
/**
 * SUPERLAC SHADES — SHELL INTEGRATION CSS
 * ════════════════════════════════════════════════════════════════
 *
 * PURPOSE: Spacing & context adjustments for the shades pages
 *          to integrate seamlessly with the global navbar/footer
 *          injected by main.js → initLayout().
 *
 * RULES (STRICT):
 *   ✅  Use scoped modifiers (.shades-page prefix)
 *   ✅  Adjust spacing, overlap, and transparency
 *   ✅  Keep z-index aligned with --s-z-max tokens
 *   ❌  DO NOT rebuild or override .nav-container-pill core layout
 *   ❌  DO NOT duplicate .nav-bar-pill, .nav-link-pill, or footer markup
 *   ❌  DO NOT alter shared navigation logic
 *   ❌  DO NOT break global responsiveness
 */


/* ════════════════════════════════════════════════════════════════
   1. HERO OVERLAP HANDLING
   Ensures the hero section starts below the injected sticky navbar.
   The navbar height is approx 72px (pill bar + container padding).
   ════════════════════════════════════════════════════════════════ */

/**
 * Shades page body — no body-level padding needed because the
 * hero is full-bleed and overlaps the navbar intentionally.
 * The navbar uses position:fixed (via .nav-container-pill) so the
 * hero simply renders behind it.
 */
.shades-page #app-wrapper {
    /* Remove any top-padding that index.html might apply */
    padding-top: 0;
}

/**
 * Hero section — push content below the navbar so headline text
 * does not collide with the nav pill when reading.
 * Uses padding-top = navbar height + comfortable breathing room.
 */
.shades-page .s-section-hero {
    padding-top: calc(72px + var(--s-space-xl));
}

/**
 * On mobile the navbar is smaller (~60px), so reduce the offset.
 */
@media (max-width: 768px) {
    .shades-page .s-section-hero {
        padding-top: calc(60px + var(--s-space-lg));
    }
}


/* ════════════════════════════════════════════════════════════════
   2. CONTEXTUAL NAVBAR TRANSPARENCY (Shades-Specific)
   The monochromatic page background is warmer than the global
   default. Add a very slight warm tint to the navbar backdrop
   when on shades pages to blend with --s-bg (#FAFAF8).
   ════════════════════════════════════════════════════════════════ */

.shades-page #navbar-container {
    /* Very subtle warm-white tint — blends with shades background */
    /* This is a modifier ONLY — does not change the navbar structure */
    --nav-bg-tint: rgba(250, 250, 248, 0.04);
}

/**
 * When scrolled on a shades page, slightly increase navbar opacity
 * for better legibility against the light monochromatic content.
 */
.shades-page #navbar-container.scrolled {
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
}


/* ════════════════════════════════════════════════════════════════
   3. Z-INDEX ALIGNMENT
   Ensure the injected navbar sits above shades content layers
   using the centralized token --s-z-max (999).
   ════════════════════════════════════════════════════════════════ */

.shades-page #navbar-container {
    z-index: var(--s-z-max); /* 999 — above all shades content */
}

/* Force dark text for global navbar on monochromatic pages */
.shades-page .nav-link-pill,
.shades-page .nav-bar-pill .nav-logo-pill-wrapper,
.shades-page .nav-bar-pill #menu-toggle {
    color: #1A1A1A !important;
}

.shades-page .btn-pill-dark {
    background: #1A1A1A !important;
    color: #FFFFFF !important;
}

/* ── Mobile Navbar Alignment Correction ── */
@media (max-width: 1024px) {
    .shades-page .nav-bar-pill {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 16px !important;
        width: 100% !important;
    }

    .shades-page .nav-pill-right {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* Ensure logo doesn't shrink too much */
    .shades-page .nav-logo-pill-wrapper {
        padding: 8px !important;
    }
}

.shades-page .btn-ai-visualizer {
    background: #1A3A2A !important;
    color: #FFFFFF !important;
    border: none !important;
}

.shades-page #navbar-container .nav-pill-center ul {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/**
 * Discovery dock is sticky within the page — must stay below navbar.
 * --s-z-floating = 40, which is far below --s-z-max = 999.
 */
.shades-page #discovery-dock {
    z-index: var(--s-z-floating); /* 40 */
}

/**
 * Palette trigger and back-to-top stay in overlay zone.
 * --s-z-overlay = 80
 */
.shades-page .s-palette-trigger,
.shades-page .s-back-to-top {
    z-index: var(--s-z-overlay); /* 80 */
}

/**
 * Palette sheet (bottom drawer) is modal-level.
 * --s-z-modal = 120
 */
.shades-page .s-palette-sheet {
    z-index: var(--s-z-modal); /* 120 */
}
.shades-page .s-palette-sheet.open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}

.s-palette-trigger {
    transition: all var(--s-dur-base) var(--s-ease-spring);
    cursor: pointer;
    visibility: hidden; /* Only shown when shades are saved */
    opacity: 0;
}

.s-palette-trigger.visible {
    visibility: visible;
    opacity: 1;
}


/* ════════════════════════════════════════════════════════════════
   4. FOOTER INTEGRATION
   The footer is injected by main.js into #footer-placeholder.
   On shades pages we add bottom padding to the last section
   so the footer doesn't collide with the palette trigger button.
   ════════════════════════════════════════════════════════════════ */

.shades-page #shade-registry {
    padding-bottom: calc(var(--s-space-2xl) + 80px); /* 80px = palette trigger height */
}

.shades-page #footer-placeholder footer {
    /* Slight top separator to distinguish from shades content */
    border-top: 1px solid var(--s-bg-dim);
    margin-top: 0;
}


/* ════════════════════════════════════════════════════════════════
   6. NAVBAR PROTECTION (SHIELD FROM SHADES-SYSTEM RESETS)
   Shades-system has aggressive resets (.shades-page img { height: auto })
   that break the circular logo and button colors. We restore them here.
   ════════════════════════════════════════════════════════════════ */

/**
 * Restore circular logo wrapper and square image.
 * Overrides: .shades-page img { height: auto }
 */
.shades-page .nav-logo-pill-wrapper,
body:has(#immersive-shade-experience) .nav-logo-pill-wrapper {
    width: 86px !important;
    height: 86px !important;
    padding: 10px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
}

.shades-page .nav-logo-pill,
body:has(#immersive-shade-experience) .nav-logo-pill {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
}

/**
 * Restore button colors (Force white text).
 * Overrides: .shades-page a { color: inherit }
 */
.shades-page .btn-pill-dark,
.shades-page .btn-ai-visualizer,
body:has(#immersive-shade-experience) .btn-pill-dark,
body:has(#immersive-shade-experience) .btn-ai-visualizer {
    color: #ffffff !important;
    text-decoration: none !important;
}

/**
 * Ensure nav links use Outfit font and correct weights.
 * Overrides: body.shades-page { font-family: ... !important }
 * Overrides: body.shades-page { font-size: 17px !important }
 */
.shades-page .nav-link-pill,
body:has(#immersive-shade-experience) .nav-link-pill {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important; /* Force exact size from style.css */
    line-height: 1.5 !important;  /* Match landing page better (1.7 body -> ~24px height) */
    color: #1a1a1a !important;
    letter-spacing: 0 !important;
}

/**
 * Restore Navbar Center Pill Padding & Styling.
 * Overrides: .shades-page ul { padding: 0 } which breaks Tailwind px-8 py-3.
 */
.shades-page .nav-pill-center ul,
body:has(#immersive-shade-experience) .nav-pill-center ul {
    padding: 12px 32px !important; /* Force exact vertical padding from landing page measurement */
    gap: 32px !important;           /* 2rem = 32px */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.85) !important; /* Slightly more opaque */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    border-radius: 999px !important;
    margin: 0 !important;
    list-style: none !important;
}

/**
 * Fix navbar horizontal container width.
 * In shades.html, the 'container' class might be restricted by shades.layout.css.
 */
.shades-page .nav-bar-pill.container,
body:has(#immersive-shade-experience) .nav-bar-pill.container {
    max-width: 1440px !important;
    width: 95% !important;
    margin: 0 auto !important;
}

/* On scrolled state, ensure the background is solid white if needed */
.shades-page #navbar-container.scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* ════════════════════════════════════════════════════════════════
   7. MOBILE NAVIGATION FIXES
   Adjusts logo size and menu positioning for mobile viewports.
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    /* Restore smaller logo wrapper for mobile */
    .shades-page .nav-logo-pill-wrapper,
    body:has(#immersive-shade-experience) .nav-logo-pill-wrapper {
        width: 64px !important;
        height: 64px !important;
        padding: 8px !important;
    }

    .shades-page .nav-logo-pill,
    body:has(#immersive-shade-experience) .nav-logo-pill {
        width: 48px !important;
        height: 48px !important;
    }

    /* Shift mobile menu down to clear the logo properly (matches main site 80px) */
    .shades-page #mobile-menu,
    body:has(#immersive-shade-experience) #mobile-menu {
        top: 80px !important;
        left: 0;
        right: 0;
        width: auto !important;
    }

    /* Improve mobile menu contrast against shades-system backgrounds */
    .shades-page .mobile-nav-panel-pill,
    body:has(#immersive-shade-experience) .mobile-nav-panel-pill {
        background: #ffffff !important; /* Fully opaque to hide hero text */
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
        margin: 12px !important;
        border-radius: 24px !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
    }

    /* Enforce navigation link styling */
    .shades-page .nav-link-mobile,
    body:has(#immersive-shade-experience) .nav-link-mobile {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-weight: 600 !important;
        color: #1a3a2a !important;
        padding: 16px 0 !important;
        font-size: 19px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    }

    .shades-page .nav-link-mobile:last-child,
    body:has(#immersive-shade-experience) .nav-link-mobile:last-child {
        border-bottom: none;
    }

    /* Fix AI Visualizer button in mobile menu */
    .shades-page .mobile-nav-panel-pill .btn-ai-visualizer,
    body:has(#immersive-shade-experience) .mobile-nav-panel-pill .btn-ai-visualizer {
        background: #1a3a2a !important; 
        color: #ffffff !important;
        padding: 16px !important;
        border-radius: 12px !important;
        margin-top: 10px !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        font-size: 16px !important;
    }

    /* Align Contact Us button to match main site */
    .shades-page .mobile-nav-panel-pill .btn-pill-dark,
    body:has(#immersive-shade-experience) .mobile-nav-panel-pill .btn-pill-dark {
        display: block !important;
        width: 100% !important;
        background: #1a1a1a !important;
        color: #ffffff !important;
        padding: 16px !important;
        border-radius: 12px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-align: center !important;
    }

    /* Ensure the mobile panel container has enough horizontal room */
    .shades-page .mobile-nav-panel-pill ul,
    body:has(#immersive-shade-experience) .mobile-nav-panel-pill ul {
        padding: 40px 24px !important; /* Proper padding for mobile links */
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
}


/* ════════════════════════════════════════════════════════════════
   5. SHADE DETAIL PAGE (shade.html) — HERO SPECIFICS
   The shade detail uses a full-screen hero. The navbar overlay
   should be transparent on this page for the cinematic effect.
   ════════════════════════════════════════════════════════════════ */

/* shade.html body does not have .shades-page class, so scope separately */
body:has(#immersive-shade-experience) #navbar-container {
    /* Transparent over the full-bleed hero image */
    background: transparent;
    box-shadow: none;
    border-bottom: none;
}

body:has(#immersive-shade-experience) #navbar-container.scrolled {
    /* Restore background once user scrolls past the hero */
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* Shade detail hero — no extra offset needed (it's full-screen) */
body:has(#immersive-shade-experience) .shade-hero {
    /* Full viewport from top — navbar overlays it intentionally */
    padding-top: 0;
    min-height: 100dvh;
}