/* ==========================================================================
   FOREVER LINK | GLOBAL DESIGN SYSTEM (global.css)
   ========================================================================== */

/* --- 1. THE MASTER TOKEN LIBRARY (60-30-10 Rule) --- */
:root {
    /* Global Foundation (60%) */
    --global-bg: #FAFAFA; 
    --global-text: #091413; 
    
    /* Brand & Action Theme (10%) */
    --brand-primary: #F63049;
    --brand-hover: #EB4C4C;
    --brand-soft: #FF7070;
    
    /* Product Theme (Storefront) */
    --product-surface: #B0E4CC;
    --product-interactive: #408A71;
    --product-heading: #091413;
    
    /* Trust & Corporate Theme (Footer/Ecosystem) */
    --corp-surface: #DDE6ED;
    --corp-border: #9DB2BF;
    --corp-icon: #526D82;
    --corp-heading: #27374D;

    /* Ecosystem Program Accents */
    --creator-accent: #E8637A;
    --creator-badge-bg: #FFF0F2;
    --developer-accent: #7C6EF5;
    --developer-badge-bg: #F0EEFF;
    
    /* Global Utilities & Shadows */
    --glass-bg: rgba(250, 250, 250, 0.75);
    --glass-blur: blur(16px);
    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'Space Mono', monospace;
    --shadow-volumetric: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.12));
    --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.03);
    --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-snappy: 0.4s cubic-bezier(0.25, 1, 0.25, 1);
}

/* --- 2. GLOBAL RESET & BASE --- */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { background-color: var(--global-bg); color: var(--global-text); font-family: var(--font-sans); overflow-x: hidden; line-height: 1.6; transition: background-color 0.4s ease, color 0.4s ease; }
button:focus, a:focus, input:focus { outline: none; }

/* Global Brand Elements */
.red-dot { display: inline-block; width: 6px; height: 6px; background-color: var(--brand-primary); border-radius: 50%; }

/* --- 3. GLOBAL UI COMPONENTS (Inputs & Buttons) --- */
.premium-input { width: 100%; padding: 15px 20px; background: #FFF; border: 1px solid transparent; border-radius: 8px; font-family: var(--font-sans); font-size: 0.95rem; color: var(--global-text); outline: none; transition: all var(--ease-snappy); }
.premium-input:focus { border-color: var(--corp-border); box-shadow: 0 10px 20px rgba(39, 55, 77, 0.05); }
.btn-submit { width: 100%; padding: 16px; background: var(--corp-heading); color: #FFF; border: none; border-radius: 8px; font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: background var(--ease-snappy); }
.btn-submit:hover { background: #1A2533; }

/* --- 4. GLOBAL NAVIGATION SYSTEMS --- */
/* A. The Homepage Glass Header */
.glass-header { position: sticky; top: 0; z-index: 1005; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: 15px 5%; }
.nav-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; }
.header-actions { display: flex; gap: 15px; align-items: center; }
.header-actions button { background: none; border: none; color: var(--global-text); font-size: 1.2rem; cursor: pointer; }

/* B. The Storefront Solid Nav */
.gallery-nav.solid-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1005; height: 60px; display: flex; justify-content: space-between; align-items: center; padding: 0 5%; background-color: var(--global-bg); border-bottom: 1px solid rgba(0,0,0,0.06); }
.nav-icon { color: var(--global-text); font-size: 1.4rem; cursor: pointer; background: none; border: none; text-decoration: none; display: flex; align-items: center; }
.nav-brand-compact { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; display: flex; align-items: baseline; gap: 4px; }

/* C. The Universal Apple-Style Hamburger */
.apple-burger { width: 24px; height: 24px; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 5px; position: relative; z-index: 1006; }
.apple-burger .line { width: 100%; height: 1.5px; background-color: var(--global-text); border-radius: 2px; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease; }
.apple-burger.active .top-line { transform: translateY(3.25px) rotate(45deg); }
.apple-burger.active .bottom-line { transform: translateY(-3.25px) rotate(-45deg); }

/* --- 5. GLOBAL SIDEBAR (Apple UX Dropdown) --- */
body.nav-open { overflow: hidden; }
.sidebar-backdrop { position: fixed; inset: 0; background: rgba(250, 250, 250, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; }
.sidebar-backdrop.active { opacity: 1; visibility: visible; }
.apple-sidebar { position: fixed; inset: 0; background: rgba(250, 250, 250, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 1000; padding: 100px 10% 40px; transform: translateY(-100%); transition: transform 0.6s cubic-bezier(0.25, 1, 0.25, 1); overflow-y: auto; }
.apple-sidebar.active { transform: translateY(0); }
.sidebar-links { display: flex; flex-direction: column; gap: 30px; font-size: 1.5rem; font-weight: 600; }
.sidebar-links a { color: var(--global-text); text-decoration: none; transition: color 0.3s ease; }
.sidebar-links a:hover, .accordion-trigger:hover { color: var(--brand-primary); }

.stagger-item { opacity: 0; transform: translateY(40px); transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.apple-sidebar.active .stagger-item:nth-child(1) { transition-delay: 0.10s; opacity: 1; transform: translateY(0); }
.apple-sidebar.active .stagger-item:nth-child(2) { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
.apple-sidebar.active .stagger-item:nth-child(3) { transition-delay: 0.20s; opacity: 1; transform: translateY(0); }
.apple-sidebar.active .stagger-item:nth-child(4) { transition-delay: 0.25s; opacity: 1; transform: translateY(0); }
.apple-sidebar.active .stagger-item:nth-child(5) { transition-delay: 0.30s; opacity: 1; transform: translateY(0); }
.apple-sidebar.active .stagger-item:nth-child(6) { transition-delay: 0.35s; opacity: 1; transform: translateY(0); }
.apple-sidebar.active .stagger-item:nth-child(7) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }
.apple-sidebar.active .stagger-item:nth-child(8) { transition-delay: 0.45s; opacity: 1; transform: translateY(0); }
.accordion-trigger { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: none; font-size: 1.5rem; font-weight: 600; font-family: var(--font-sans); color: var(--global-text); cursor: pointer; text-align: left; padding: 0; }
.chevron-icon { font-size: 1.2rem; color: var(--corp-icon); transition: transform 0.3s ease; }
.accordion-trigger.open .chevron-icon { transform: rotate(-180deg); }
.sidebar-group { display: flex; flex-direction: column; gap: 15px; padding-left: 20px; margin-top: 0; max-height: 0; overflow: hidden; opacity: 0; transition: all 0.4s cubic-bezier(0.25, 1, 0.3, 1); }
.sidebar-group.open { max-height: 150px; opacity: 1; margin-top: 25px; }
.sub-link { font-size: 1.1rem; color: var(--corp-icon) !important; font-weight: 500; }
.sub-link:hover { color: var(--brand-primary) !important; }

		/* --- 6. GLOBAL PREMIUM FOOTER (High Contrast Anchor) --- */
/* Increased specificity to override .corp-zone from Home.css */
footer.premium-footer,
footer.premium-footer.corp-zone { 
    background-color: var(--global-text) !important; /* Forces the deep ink black */
    color: var(--global-bg); 
    padding: 100px 5% 40px; 
    position: relative; 
    border-top: 1px solid rgba(255,255,255,0.1); 
}
.footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1.5fr 1fr; gap: 60px; padding-bottom: 80px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-col-anchor { display: flex; flex-direction: column; gap: 20px; }
.footer-logo { font-family: var(--font-serif); font-weight: 600; color: #FFFFFF; font-size: 2.2rem; display: flex; align-items: center; gap: 6px; letter-spacing: -0.02em; }
.footer-logo::after { content: ''; display: block; width: 6px; height: 6px; background-color: var(--brand-primary); border-radius: 50%; margin-top: 10px; }

/* The Global Typewriter Text - Inverted */
.typewriter-text { color: rgba(250, 250, 250, 0.6); font-size: 1rem; line-height: 1.7; max-width: 320px; min-height: 80px; }
.typewriter-text.is-typing::after { content: '|'; color: #FFFFFF; margin-left: 4px; animation: cursor-blink 0.8s step-end infinite; }
.typewriter-text.typing-done::after { content: '|'; color: rgba(250, 250, 250, 0.6); margin-left: 4px; animation: cursor-fade 2s ease forwards; }
@keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes cursor-fade { 0% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* Footer Inputs & Contact Drawer - Inverted */
.footer-col-input { display: flex; flex-direction: column; }
.footer-heading { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(250, 250, 250, 0.5); margin-bottom: 30px; font-weight: 700; }
.drawer-trigger-wrap { padding: 30px 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.drawer-message { font-family: var(--font-serif); font-size: 1.8rem; color: #FFFFFF; margin-bottom: 20px; line-height: 1.2; }
.btn-morph { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: transparent; border: 1px solid rgba(255,255,255,0.2); border-radius: 100px; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #FFFFFF; cursor: pointer; transition: all var(--ease-snappy); }
.btn-morph:hover, .btn-morph.active { background: #FFFFFF; color: var(--global-text); border-color: #FFFFFF; }
.btn-morph i { transition: transform var(--ease-snappy); }
.btn-morph:hover i, .btn-morph.active i { transform: translateX(4px); }
.contact-drawer { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-10px); transition: all 0.7s cubic-bezier(0.25, 1, 0.25, 1); will-change: max-height, opacity, transform; }
.contact-drawer.open { max-height: 500px; opacity: 1; transform: translateY(0); margin-top: 30px; }
.input-group { display: flex; gap: 20px; margin-bottom: 20px; }
textarea.premium-input { resize: none; height: 100px; margin-bottom: 20px; }

/* Custom Dark Inputs */
.premium-footer .premium-input { 
    background: rgba(255, 255, 255, 0.05); 
    color: #FFF; 
    border-color: rgba(255,255,255,0.1);
}
.premium-footer .premium-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.premium-footer .premium-input:focus { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); }
.premium-footer .btn-submit { background: #FFF; color: var(--global-text); }
.premium-footer .btn-submit:hover { background: #E0E0E0; }

/* Footer Directory & Socials - Inverted */
.footer-col-directory { display: flex; flex-direction: column; align-items: flex-end; }
.nav-links { display: flex; flex-direction: column; align-items: flex-end; gap: 15px; margin-bottom: 50px; }
.nav-link { font-family: var(--font-sans); font-size: 1rem; color: rgba(250, 250, 250, 0.6); text-decoration: none; transition: all var(--ease-snappy); }
.nav-link:hover { color: #FFFFFF; transform: translateX(-5px); }
.social-suite { display: flex; gap: 15px; }
.social-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); color: #FFFFFF; font-size: 1.2rem; text-decoration: none; transition: all var(--ease-snappy); border: 1px solid transparent; }
.social-icon:hover { background: #FFFFFF; color: var(--global-text); transform: translateY(-4px); box-shadow: 0 10px 20px rgba(39, 55, 77, 0.1); border-color: #FFFFFF; }
.footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 30px; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: rgba(250, 250, 250, 0.4); }

/* Footer Responsive Overrides */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-col-directory { align-items: flex-start; grid-column: span 2; flex-direction: row; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 40px; }
    .nav-links { align-items: flex-start; margin-bottom: 0; }
    .nav-link:hover { transform: translateX(5px); }
}
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; gap: 50px; }
    .footer-col-directory { grid-column: span 1; flex-direction: column-reverse; gap: 40px; }
    .input-group { flex-direction: column; gap: 10px; }
    .footer-bottom { flex-direction: column; gap: 15px; text-align: center; }
}

/* ==========================================================================
   7. SEARCH SYSTEM & PROGRESSIVE DISCLOSURE UI
   ========================================================================== */

mark { background-color: rgba(246, 48, 73, 0.15); color: var(--brand-primary); font-weight: 700; padding: 0 2px; border-radius: 2px; }

/* The Suggestion Tray - Tighter Gap */
.suggestion-tray { 
    display: flex; gap: 10px; width: 100%; max-width: 500px; 
    justify-content: flex-start; overflow-x: auto; scrollbar-width: none; 
    opacity: 0; max-height: 0; margin-top: 0; visibility: hidden; 
    transform: translateY(-5px); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    /* Premium Swipe */
    touch-action: pan-x; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.suggestion-tray::-webkit-scrollbar { display: none; }

.suggestion-tray.active { 
    opacity: 1; visibility: visible; max-height: 50px; 
    margin-top: 8px; /* TIGHTER GAP */
    transform: translateY(0); 
}

.suggestion-pill { 
    padding: 6px 16px; background: transparent; border: 1px solid var(--corp-border); 
    border-radius: 100px; font-family: var(--font-mono); font-size: 0.75rem; 
    color: var(--global-text); cursor: pointer; white-space: nowrap; flex-shrink: 0; 
    transition: all 0.2s ease; 
}
.suggestion-pill:hover, .suggestion-pill:active { background: var(--global-text); color: #FFF; border-color: var(--global-text); }


/* The Category Wrapper - Tighter Gap & Safely Centered */
.category-pills-wrapper { 
    width: 100%; max-width: 500px; margin-left: auto; margin-right: auto;
    max-height: 80px; opacity: 1; 
    margin-top: 8px; /* TIGHTER GAP */
    overflow: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
}
body.search-engaged .category-pills-wrapper { max-height: 0; opacity: 0; margin-top: 0; pointer-events: none; }

/* The Category Pills - Anti-Slicing & Magnetic Snapping */
.category-pills { 
    display: flex; gap: 10px; justify-content: flex-start; width: 100%; 
    overflow-x: auto; 
    /* Anti-slicing: 2px left padding. 20px right padding for breathing room */
    padding: 4px 20px 10px 2px; 
    scrollbar-width: none; 
    
    /* Premium Physics */
    touch-action: pan-x; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth; 
    scroll-snap-type: x mandatory; 
}
.category-pills::-webkit-scrollbar { display: none; }

.pill { 
    padding: 8px 20px; background: transparent; border: 1px solid rgba(0,0,0,0.15); 
    border-radius: 100px; font-family: var(--font-mono); font-size: 0.75rem; 
    text-transform: uppercase; cursor: pointer; 
    white-space: nowrap; flex-shrink: 0; 
    -webkit-tap-highlight-color: transparent;
    
    /* Magnetic Scroll alignment & Tactile bounce */
    scroll-snap-align: start; 
    scroll-margin-left: 2px; 
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
    transform: scale(1);
}
.pill.active, .pill:hover { 
    background: var(--global-text); color: #FFF; border-color: var(--global-text); 
    transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
/* The Tactile Tap Bounce */
.pill:active { transform: scale(0.94); }

.empty-state { grid-column: 1 / -1; text-align: center; padding: 40px 20px; }
.empty-state h2 { font-family: var(--font-sans); font-size: 1.5rem; margin-bottom: 10px; color: var(--global-text); }
.empty-state p { color: var(--corp-icon); font-family: var(--font-mono); font-size: 0.9rem; }

.clear-icon { position: absolute; right: 20px; background: none; border: none; color: rgba(0,0,0,0.3); font-size: 1.2rem; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.clear-icon.visible { opacity: 1; pointer-events: auto; }

/* --- THE BESPOKE PORTAL PILL (Ambient Aura Architecture) --- */
.pill.pill-premium {
    position: relative;
    background: transparent; /* Blends in natively with the other unselected pills */
    color: var(--global-text);
    border-color: rgba(0,0,0,0.15); /* Matches inactive filter borders */
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 1; /* Keeps the text above the aura */
}

/* The Animated Aura */
.pill.pill-premium::before {
    content: '';
    position: absolute;
    inset: -2px; /* Pulls the aura slightly outside the physical borders */
    border-radius: 100px;
    /* A soft, dynamic gradient utilizing your brand red and soft mint */
    background: linear-gradient(120deg, rgba(246, 48, 73, 0.15), rgba(176, 228, 204, 0.2), rgba(64, 138, 113, 0.15));
    background-size: 200% 200%;
    filter: blur(4px); /* Diffuses the gradient into a soft cloud */
    z-index: -1; /* Pushes the glow behind the pill text */
    animation: aura-pulse 4s ease infinite alternate;
    transition: all var(--transition-smooth);
}

.pill.pill-premium i {
    color: var(--brand-primary); /* The hook: Solid brand red */
    font-size: 0.9rem;
    transition: transform var(--transition-smooth);
}

/* The Breathing Physics */
@keyframes aura-pulse {
    0% { background-position: 0% 50%; opacity: 0.5; transform: scale(0.98); }
    100% { background-position: 100% 50%; opacity: 1; transform: scale(1.05); }
}

/* The Hover State Expansion */
@media (hover: hover) and (pointer: fine) {
    .pill.pill-premium:hover {
        border-color: var(--brand-primary);
    }
    .pill.pill-premium:hover::before {
        filter: blur(8px); /* The aura intensifies when the mouse approaches */
        opacity: 1;
        transform: scale(1.1);
    }
    .pill.pill-premium:hover i {
        transform: rotate(15deg) scale(1.1);
    }
}
/* ==========================================================================
   8. PROGRESSIVE DISCLOSURE (Search Flow)
   ========================================================================== */

.category-pills-wrapper {
    max-height: 80px; /* Just enough to fit the pills */
    opacity: 1;
    margin-top: 15px; 
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body.search-engaged .category-pills-wrapper {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
}

/* ==========================================================================
   9. UX MICRO-ADJUSTMENTS (Gap & Slicing Fixes)
   ========================================================================== */

/* FIX 1: Kill the invisible Flexbox gap forcing them apart */
.sticky-controls {
    gap: 5px !important; 
    padding-bottom: 10px !important;
}

/* FIX 2: Apply a microscopic, controlled margin instead */
.suggestion-tray.active {
    margin-top: 6px !important; /* Tightly hugs the search bar */
}

.category-pills-wrapper {
    margin-top: 8px !important; /* Tightly hugs the search bar */
}

/* FIX 3: Permanently kill the Desktop "Center" bug */
.category-pills {
    justify-content: flex-start !important; /* Forces left-alignment on all screens */
    padding-left: 2px !important; /* Safe-zone bumper to prevent clipping */
}

/* ==========================================================================
   ADAPTIVE CTA SYSTEM (Orientation Detective)
   ========================================================================== */
.adaptive-cta { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; background: var(--global-text); color: #FFF; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; border: none; font-family: inherit; transform: translateY(100%); transition: transform var(--transition-smooth); }

/* --- LANDSCAPE ARCHITECTURE (Wide Screens / Desktop) --- */
@media (orientation: landscape) {
    /* Show Personalize CTA on hover */
    .card-analog:hover .price-pill { transform: translateY(-100%); opacity: 0; }
    .card-analog:hover .adaptive-cta { transform: translateY(0); }
}

/* --- PORTRAIT ARCHITECTURE (Tall Screens / Mobile) --- */
@media (orientation: portrait) {
    /* Hide the CTA button entirely; the whole card is the trigger */
    .adaptive-cta { display: none !important; }
    
    /* Tactile tap response */
    .card-analog { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; }
    
    /* The 1-Second Loading State (Applied via JS) */
    .card-analog.is-preparing-demo {
        transform: scale(0.95);
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
}

  /* ==========================================================================
   THE TACTILE HANDOFF (Card Loading Micro-Interaction)
   ========================================================================== */

/* 1. The Physical Press: Lock the card in a sunken state */
.card-analog.is-loading-handoff {
    transform: scale(0.96) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
    cursor: wait;
    pointer-events: none; /* Prevents furious double-clicking */
}

/* 2. The Focus Pull: Dim and blur the main content so the eye goes to the loader */
.card-analog.is-loading-handoff .image-breakout,
.card-analog.is-loading-handoff .typography-group,
.card-analog.is-loading-handoff .ingredient-bar {
    opacity: 0.4;
    filter: blur(0.2px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3. The State Mutation: Hide the price and reveal the loader */
.card-analog.is-loading-handoff .price-pill {
    opacity: 0;
    transform: translateY(-10px);
}

.handoff-loader {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: var(--global-bg);
    color: var(--global-text); /* Uses your striking red to draw focus */
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
}

.card-analog.is-loading-handoff .handoff-loader {
    opacity: 1;
    transform: translateY(0);
}

/* Custom smooth spin for the Phosphor loading icon */
@keyframes handoff-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.handoff-loader i {
    animation: handoff-spin 1.2s linear infinite;
    font-size: 1.1rem;
}
/* ==========================================================================
   LIQUID GLASS MONOLITH UI
   ========================================================================== */
body.monolith-open { overflow: hidden; }
body.monolith-open .store-core { transform: scale(0.97); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }

/* The Watercolor Blur Overlay */
.watercolor-void {
    position: fixed; inset: 0; 
    background: rgba(250, 250, 250, 0.15);
    backdrop-filter: blur(60px) saturate(160%); 
    -webkit-backdrop-filter: blur(60px) saturate(160%);
    opacity: 0; visibility: hidden; z-index: 2000;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* The 9:16 Glass Frame */
.glass-monolith {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -45%) scale(0.9);
    height: 85dvh; aspect-ratio: 9 / 16; max-width: 100vw; 
    z-index: 2001; opacity: 0; visibility: hidden;
    border-radius: 36px; overflow: hidden; 
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 40px 100px rgba(0,0,0,0.1), inset 0 0 40px rgba(255,255,255,0.4);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

body.monolith-open .watercolor-void { opacity: 1; visibility: visible; }
body.monolith-open .glass-monolith { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

/* Liquid Glass UI Controls */
.btn-close {
    position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center; cursor: pointer; color: var(--global-text); font-size: 1.1rem; z-index: 2002;
    background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.2s, background 0.2s;
}
.btn-close:active { transform: scale(0.9); background: rgba(255, 255, 255, 0.5); }

.btn-personalize {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    padding: 14px 28px; white-space: nowrap; color: var(--global-text); font-family: var(--font-mono); 
    font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; z-index: 2002;
    background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255,255,255,0.7); border-radius: 100px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: transform 0.2s, background 0.2s;
}
.btn-personalize:active { transform: translateX(-50%) scale(0.95); background: rgba(255, 255, 255, 0.45); }

/* Iframe & Liquid Shimmer */
.product-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; opacity: 0; transition: opacity 1s ease; z-index: 1; }
.product-iframe.loaded { opacity: 1; }

.liquid-shimmer {
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(120deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 80%);
    background-size: 200% 100%; animation: shimmer-flow 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 0.8s ease;
}
.liquid-shimmer.hidden { opacity: 0; pointer-events: none; }
@keyframes shimmer-flow { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (max-width: 768px) {
    .glass-monolith { height: 100dvh; border-radius: 0; border: none; }
    .btn-close { top: calc(20px + env(safe-area-inset-top)); right: 20px; }
    .btn-personalize { bottom: calc(40px + env(safe-area-inset-bottom)); }
}

/* --- 8. UNIVERSAL COMPONENTS (Cards & Search) --- */
/* --- STATIC CONTROLS --- */
.sticky-controls { position: relative; z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 10px 0 20px; background: transparent; }

/* FIX 1: Strictly scoped to the search bar so it doesn't break the Nav */
/* --- BULLETPROOF SEARCH BAR --- */
.search-glass { 
    position: relative; 
    width: 100%; 
    max-width: 500px; 
    display: flex; 
    align-items: center; 
}
.search-glass .search-icon { 
    position: absolute; 
    left: 18px; 
    font-size: 1.2rem; 
    color: rgba(0,0,0,0.4); 
    pointer-events: none; /* Prevents icon from blocking clicks */
    z-index: 2; 
}
.search-glass .premium-input { 
    width: 100%; 
    border-radius: 100px; 
    padding: 14px 20px 14px 50px; /* 50px pushes text past the icon */
    background: rgba(0,0,0,0.03); 
    border: 1px solid transparent; 
    outline: none; 
    transition: all 0.3s ease; 
    font-family: var(--font-mono);
    font-size: 0.85rem;
}
.search-glass .premium-input:focus { 
    background: #FFF; 
    border-color: rgba(0,0,0,0.15); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.03); 
}

/* FIX 2: Flex-start allows scrolling on mobile without cutting the "All" pill */
.category-pills { display: flex; gap: 10px; justify-content: flex-start; width: 100%; max-width: 500px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); will-change: filter, opacity, transform; }
/* Centers the pills beautifully on Desktop */
@media (min-width: 500px) {
    .category-pills { justify-content: center; }
}
.category-pills::-webkit-scrollbar { display: none; }
.pill { padding: 8px 20px; border-radius: 20px; background: transparent; border: 1px solid rgba(0,0,0,0.15); color: var(--global-text); font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; cursor: pointer; transition: 0.3s; white-space: nowrap; flex-shrink: 0; }
.pill.active, .pill:hover { background: var(--global-text); color: #FFF; border-color: var(--global-text); }

/* --- THE ZENITH FOCUS (Native Scroll Architecture) --- */
body.search-engaged { overflow: hidden; }

/* search-engaged handles the layout shifts */
body.search-engaged .section-title { opacity: 0; transform: translateY(-15px) scale(0.98); pointer-events: none; }

/* search-active strictly handles the blur */
body.search-active .premium-grid,
body.search-active .storefront-capstone { filter: blur(8px); opacity: 0.3; transform: scale(0.98); pointer-events: none; }

/* The Grid */
/* Base Mobile Layout (2 Columns) */
.premium-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 15px; row-gap: 50px; padding-top: 50px; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); will-change: filter, opacity, transform; }
.premium-grid.filtering { opacity: 0; transform: translateY(15px); }

/* --- ANALOG CARD UX (MOBILE-FIRST PARITY) --- */
.card-analog { 
    background: #FFFFFF; 
    width: 100%; 
    border-radius: 12px; 
    border: 1px solid rgba(0,0,0,0.04); 
    box-shadow: var(--shadow-card); 
    position: relative; 
    /* STRICT MOBILE PADDING: Prevents the stretched rectangle bug! */
    padding: 0 1rem 1.5rem 1rem; 
    transition: box-shadow var(--transition-smooth); 
    font-family: var(--font-mono); 
    cursor: pointer; 
    -webkit-tap-highlight-color: transparent; 
}

.content-wrapper { display: flex; flex-direction: column; align-items: center; }

/* Mobile Image Breakout */
.image-breakout { 
    margin-top: -35px; /* Smaller mobile lift */
    margin-bottom: 1rem; 
    width: 110%; 
    display: flex; 
    justify-content: center; 
    filter: var(--shadow-volumetric); 
    transition: transform var(--transition-smooth); 
    transform-origin: bottom center; z-index: 5; will-change: transform; 
}
.image-breakout img, .image-breakout svg { width: 100%; height: auto; display: block; }

/* Mobile Typography */
.typography-group { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: 100%;}
.card-badge { display: inline-block; margin-bottom: 0.3rem; padding: 0.2rem 0.6rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--global-text); border: 1px solid var(--global-text); border-radius: 100px; background: transparent; transition: background var(--transition-smooth), color var(--transition-smooth); }
.card-badge:empty { display: none; }
.product-title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--global-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }

/* Hide story entirely on mobile to save vertical space */
.product-story { display: none; } 

.ingredient-bar { display: flex; justify-content: center; gap: 0.6rem; margin-top: 0.4rem; color: var(--corp-icon); }
.ingredient-bar i { font-size: 0.85rem; opacity: 0.7; transition: opacity var(--transition-smooth), transform var(--transition-smooth); }

/* Mobile Action Button Area */
.action-swap-area { position: relative; width: 100%; height: 34px; overflow: hidden; border-radius: 6px; border: 1px solid rgba(0,0,0,0.08); background: var(--global-bg); margin-top: 0.8rem; }
.price-pill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; color: var(--global-text); transition: transform var(--transition-smooth), opacity var(--transition-smooth); }

/* ==========================================================================
   THE LIQUID PORTAL (Hybrid Empty State)
   ========================================================================== */
.bespoke-liquid-portal {
    grid-column: 1 / -1; 
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background: radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, transparent 70%);
    /* Removed cursor: pointer; from here */
}

.portal-text { text-align: center; margin-bottom: 25px; }
.portal-text h3 { 
    font-family: var(--font-sans); font-size: 1.25rem; font-weight: 400; 
    color: var(--global-text); margin: 0 0 8px 0; 
}
.portal-text p { 
    font-family: var(--font-mono); color: var(--text-muted); font-size: 0.85rem; 
    text-transform: uppercase; letter-spacing: 0.05em; margin: 0; 
}

.portal-line {
    width: 40px; height: 1px; background: rgba(0,0,0,0.15); margin-bottom: 25px;
    transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease;
}

.portal-pill {
    background: rgba(255,255,255,0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,0.08); padding: 12px 32px; border-radius: 100px;
    display: flex; align-items: center; gap: 12px; position: relative; z-index: 1;
    transition: border-color 0.4s ease;
    cursor: pointer; /* Added it here instead! */
}

.portal-pill::before {
    content: ''; position: absolute; inset: -2px; border-radius: 100px;
    background: linear-gradient(90deg, rgba(246,48,73,0.15), rgba(64,138,113,0.15));
    filter: blur(8px); z-index: -1; opacity: 0.5; 
    animation: portal-breathe 4s ease infinite alternate;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-pill span { 
    font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; 
    color: var(--global-text); text-transform: uppercase; letter-spacing: 0.05em;
}
.portal-pill i { font-size: 1.1rem; color: var(--text-muted); transition: all 0.4s ease; }

@keyframes portal-breathe {
    0% { transform: scale(0.95); opacity: 0.4; }
    100% { transform: scale(1.05); opacity: 0.7; }
}

@media (hover: hover) and (pointer: fine) {
    .bespoke-liquid-portal:hover .portal-line { width: 140px; background: var(--global-text); }
    .bespoke-liquid-portal:hover .portal-pill { border-color: rgba(0,0,0,0.2); }
    .bespoke-liquid-portal:hover .portal-pill::before { opacity: 1; filter: blur(12px); transform: scale(1.1); }
    .bespoke-liquid-portal:hover .portal-pill i { color: var(--brand-primary); transform: translate(3px, -3px); }
}
.bespoke-liquid-portal:active .portal-pill { transform: scale(0.96); }

/* Elegant divider before showing the trending fallback products */
.fallback-divider {
    grid-column: 1 / -1; text-align: center; position: relative; margin: 20px 0 40px;
}
.fallback-divider::before {
    content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(0,0,0,0.06); z-index: 0;
}
.fallback-divider span {
    position: relative; background: var(--global-bg); padding: 0 20px; font-family: var(--font-mono);
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(0,0,0,0.4); z-index: 1;
}