:root {
    --lavender-deep: #6B5B7A;
    --lavender-mid: #8E7D9B;
    --lavender-soft: #B8A9C9;
    --lavender-pale: #E8E0F0;
    --lavender-whisper: #F5F2F8;
    --accent-olive: #6e7f5f;
    --line-soft: #dad3e5;
    --white: #FFFFFF;
    --gray-50: #FAFAFA;
    --gray-100: #F5F5F5;
    --gray-200: #E8E8E8;
    --gray-300: #D4D4D4;
    --gray-600: #6B6B6B;
    --gray-800: #2D2D2D;
    --gray-900: #1A1A1A;
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Outfit', -apple-system, sans-serif;
    --step-h1: clamp(3.5rem, 9vw, 4.5rem);
    --step-h2: clamp(2.2rem, 5vw, 3rem);
    --step-h3: clamp(1.4rem, 3vw, 1.85rem);
    --step-body: 1.05rem;
    --step-micro: 0.78rem;
    /* Transition tokens */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 0.15s;
    --duration-base: 0.25s;
    --duration-slow: 0.4s;
    /* Design system tokens */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-pill: 999px;
    --shadow-card: 0 8px 24px rgba(31,27,24,0.06);
    --shadow-hover: 0 16px 44px rgba(31,27,24,0.14);
    --shadow-elevated: 0 24px 64px rgba(31,27,24,0.18);
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4.5rem;
    --space-xl: 6.25rem;
    --space-2xl: 8rem;
}

/* Global focus-visible */
:focus-visible {
    outline: 2px solid var(--lavender-mid);
    outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* Scroll-reveal animation */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
[data-reveal] { opacity: 0; }
[data-reveal].revealed {
    animation: fadeUp var(--duration-slow) var(--ease-out) forwards;
    animation-delay: var(--reveal-delay, 0s);
}

/* Cart badge bump */
@keyframes bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.cart-count.bump { animation: bump 0.3s var(--ease-out); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); font-size: var(--step-body); line-height: 1.65; color: var(--gray-800); background: var(--lavender-whisper); }
body.shop-page { background: var(--white); }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; height: auto; display: block; }

/* Navigation */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 1rem 2rem; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); }
.nav-light { border-bottom: 1px solid var(--gray-200); }
.nav-container { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; }
.nav-links { display: flex; gap: 2rem; }
.nav-link { font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-600); position: relative; transition: color var(--duration-fast); }
.nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: var(--lavender-deep); transform: scaleX(0); transform-origin: center; transition: transform var(--duration-base) var(--ease-out); }
.nav-link:hover, .nav-link.active { color: var(--gray-900); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-actions { display: flex; gap: 1rem; }
/* AI Scan Nav Button */
.hai-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: white;
    background: var(--lavender-deep);
    border-radius: 60px;
    transition: all 0.3s;
    white-space: nowrap;
}
.hai-nav-btn:hover {
    background: var(--gray-900);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107,91,122,0.3);
}
.hai-nav-btn.active {
    background: var(--gray-900);
}
.hai-nav-btn svg {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .hai-nav-btn { display: none; }
}

.search-toggle, .cart-toggle { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--gray-800); transition: background var(--duration-fast), color var(--duration-fast); }
.search-toggle:hover, .cart-toggle:hover { background: var(--lavender-pale); }
.cart-toggle { position: relative; }
.cart-count { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; background: var(--lavender-deep); color: white; font-size: 0.625rem; font-weight: 600; border-radius: 50%; display: none; align-items: center; justify-content: center; opacity: 0; transform: scale(0.5); transition: all 0.3s; }
.cart-count.visible { display: flex; opacity: 1; transform: scale(1); }

/* Search Overlay */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background:
        radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,0.16), transparent 60%),
        radial-gradient(900px 500px at 80% 85%, rgba(255,255,255,0.1), transparent 65%),
        linear-gradient(135deg, rgba(54, 47, 62, 0.78), rgba(83, 69, 98, 0.84));
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-base), visibility var(--duration-base);
}
.search-overlay.active { opacity: 1; visibility: visible; }
.search-container {
    position: relative;
    width: min(760px, 100%);
    background: rgba(248, 246, 251, 0.95);
    border: 1px solid rgba(255,255,255,0.52);
    border-radius: 24px;
    box-shadow: 0 30px 90px rgba(20, 18, 24, 0.35);
    padding: 1.25rem;
}
.search-close {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--gray-700);
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,0.06);
    transition: all var(--duration-fast);
}
.search-close:hover {
    color: var(--gray-900);
    background: #fff;
    transform: rotate(90deg);
}
.search-form {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.4rem;
}
.search-input {
    flex: 1;
    height: 50px;
    padding: 0 1rem 0 1.15rem;
    font-size: 1rem;
    color: var(--gray-900);
    background: #fff;
    border: 1px solid #d8d2e2;
    border-radius: 14px;
    outline: none;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.search-input:focus {
    border-color: var(--lavender-mid);
    box-shadow: 0 0 0 4px rgba(184,169,201,0.2);
}
.search-submit {
    height: 50px;
    padding: 0 1.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: white;
    background: linear-gradient(135deg, var(--gray-900), #252128);
    border-radius: 14px;
    transition: transform var(--duration-fast), box-shadow var(--duration-fast);
}
.search-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(26, 26, 26, 0.28);
}
.search-results {
    margin-top: 1rem;
    max-height: 46vh;
    overflow-y: auto;
    padding-right: 0.25rem;
}
.search-results::-webkit-scrollbar { width: 8px; }
.search-results::-webkit-scrollbar-thumb { background: rgba(120, 102, 138, 0.35); border-radius: 8px; }
.search-result-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem;
    background: #fff;
    border: 1px solid #e6e0ee;
    border-radius: 14px;
    margin-bottom: 0.55rem;
    transition: transform var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.search-result-item:hover {
    transform: translateY(-1px);
    border-color: #c9b8df;
    box-shadow: 0 10px 24px rgba(79, 64, 92, 0.12);
}
.search-result-image {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    background: #faf9fc;
    border: 1px solid #ece7f3;
    flex-shrink: 0;
}
.search-result-image img { width: 100%; height: 100%; object-fit: contain; }
.search-result-info { min-width: 0; }
.search-result-name {
    font-weight: 500;
    color: var(--gray-900);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-result-price {
    margin-top: 0.2rem;
    font-size: 0.82rem;
    color: var(--lavender-deep);
}
.search-no-results {
    text-align: center;
    color: var(--gray-600);
    background: #fff;
    border: 1px dashed #d7cfdf;
    border-radius: 14px;
    padding: 1rem;
}
.search-results .loading-spinner {
    padding: 1.5rem 0.5rem;
    color: var(--gray-600);
}
.search-results .spinner {
    width: 30px;
    height: 30px;
    border-width: 2px;
}

@media (max-width: 768px) {
    .search-overlay {
        align-items: flex-start;
        padding: calc(1rem + env(safe-area-inset-top, 0px)) 0.75rem 1rem;
    }
    .search-container {
        border-radius: 18px;
        padding: 0.85rem;
    }
    .search-form {
        flex-direction: column;
        gap: 0.6rem;
    }
    .search-input,
    .search-submit {
        width: 100%;
        height: 46px;
        border-radius: 12px;
    }
    .search-results {
        max-height: calc(100vh - 220px);
    }
    .search-result-name {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

/* Cart Sidebar */
.cart-overlay { position: fixed; inset: 0; z-index: 1500; background: rgba(26,26,26,0.5); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--duration-base), visibility var(--duration-base); }
.cart-overlay.active { opacity: 1; visibility: visible; }
.cart-sidebar { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1600; width: 100%; max-width: 420px; background: white; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.4s var(--ease-out); }
.cart-sidebar.active { transform: translateX(0); }
.cart-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--gray-100); }
.cart-header h2 { font-family: var(--font-display); font-size: 1.375rem; }
.cart-close { font-size: 1.75rem; color: var(--gray-600); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background var(--duration-fast); }
.cart-close:hover { background: var(--lavender-pale); }
.cart-items { flex: 1; overflow-y: auto; padding: 0.5rem 1rem; }
.cart-empty-state { text-align: center; padding: 4rem 2rem; }
.cart-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.3; }
.cart-empty-title { font-family: var(--font-display); font-size: 1.375rem; margin-bottom: 0.5rem; color: var(--gray-800); }
.cart-empty-text { font-size: 0.875rem; color: var(--gray-600); margin-bottom: 1.5rem; }
.cart-empty-cta { display: inline-block; padding: 0.75rem 2rem; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: white; background: var(--lavender-deep); border-radius: var(--radius-pill); text-decoration: none; transition: background var(--duration-fast), transform var(--duration-fast); }
.cart-empty-cta:hover { background: var(--gray-900); transform: translateY(-1px); }
.cart-empty { text-align: center; color: var(--gray-600); padding: 3rem 1rem; }
.cart-item { display: flex; gap: 1rem; padding: 1rem 0.5rem; border-bottom: 1px solid var(--gray-100); transition: background var(--duration-fast); }
.cart-item:last-child { border-bottom: none; }
.cart-item-image { width: 72px; height: 72px; border-radius: var(--radius-sm); overflow: hidden; background: var(--gray-50); flex-shrink: 0; }
.cart-item-image img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cart-item-details { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cart-item-name { font-weight: 500; font-size: 0.875rem; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-variant-row { margin-top: 0.25rem; margin-bottom: 0.35rem; }
.cart-item-variant-label {
    display: block;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-600);
    margin-bottom: 0.2rem;
}
.cart-item-variant-select {
    width: 100%;
    padding: 0.42rem 1.8rem 0.42rem 0.58rem;
    font-size: 0.76rem;
    font-family: var(--font-body);
    color: var(--gray-800);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%236B6B6B' d='M6 9L1 4h10z'/%3E%3C/svg%3E") no-repeat right 0.55rem center;
    appearance: none;
    outline: none;
}
.cart-item-variant-select:focus {
    border-color: var(--lavender-deep);
}
.cart-item-variant-select:disabled {
    opacity: 0.7;
    cursor: wait;
}
.cart-item-price { color: var(--gray-600); font-size: 0.8125rem; }
.cart-item-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; }
.quantity-btn { width: 28px; height: 28px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 1rem; color: var(--gray-600); display: flex; align-items: center; justify-content: center; transition: all var(--duration-fast); }
.quantity-btn:hover { background: var(--lavender-pale); border-color: var(--lavender-mid); }
.quantity-btn:active { transform: scale(0.92); }
.cart-item-quantity { min-width: 24px; text-align: center; font-weight: 600; font-size: 0.875rem; }
.cart-item-remove { margin-left: auto; color: var(--gray-300); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; transition: color var(--duration-fast); }
.cart-item-remove:hover { color: #c53030; }
.cart-footer { padding: 1.25rem 1.5rem; border-top: 1px solid var(--gray-100); background: var(--gray-50); }
.cart-summary { margin-bottom: 1rem; }
.cart-line { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--gray-600); margin-bottom: 0.375rem; }
.cart-total { display: flex; justify-content: space-between; font-size: 1rem; font-weight: 600; padding-top: 0.75rem; border-top: 1px solid var(--gray-200); margin-top: 0.5rem; }
.cart-total span:last-child { font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; color: var(--gray-900); }
.checkout-btn { width: 100%; padding: 1rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: white; background: var(--gray-900); border-radius: var(--radius-pill); transition: background var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast); }
.checkout-btn:hover:not(:disabled) { background: var(--lavender-deep); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(107,91,122,0.25); }
.checkout-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Hero */
.hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8rem 2rem 6rem;
    position: relative;
    overflow: hidden;
    background: var(--lavender-whisper);
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 80%, rgba(184,169,201,0.4) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 15%, rgba(142,125,155,0.25) 0%, transparent 50%),
        radial-gradient(circle at 50% 120%, rgba(107,91,122,0.1) 0%, transparent 40%);
    pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.hero-tagline { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--lavender-deep); margin-bottom: 1.5rem; }
.hero-title { font-family: var(--font-display); font-size: clamp(3rem, 9vw, 5.5rem); font-weight: 400; line-height: 1.05; color: var(--gray-900); margin-bottom: 1.5rem; }
.hero-title span { display: block; }
.hero-title .accent { font-style: italic; color: var(--lavender-deep); }
.hero-description { font-size: 1.0625rem; color: var(--gray-600); max-width: 480px; margin: 0 auto 2.5rem; line-height: 1.7; }
.hero-cta { display: inline-block; padding: 1.125rem 3rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: white; background: var(--gray-900); border-radius: var(--radius-pill); transition: background var(--duration-base), transform var(--duration-base), box-shadow var(--duration-base); }
.hero-cta:hover { background: var(--lavender-deep); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(107,91,122,0.35); }
.hero-secondary-cta { display: block; margin-top: 1.25rem; font-size: 0.875rem; color: var(--lavender-mid); font-weight: 500; transition: color var(--duration-fast); letter-spacing: 0.02em; }
.hero-secondary-cta:hover { color: var(--lavender-deep); }

/* Brand Bar */
.brand-bar {
    padding: 1rem 2rem;
    background: white;
    border-bottom: 1px solid var(--gray-100);
}
.brand-bar-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}
.brand-bar-item {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.brand-bar-sep { color: var(--gray-300); font-size: 0.625rem; }

/* Featured */
.featured { padding: var(--space-xl) 2rem; background: white; }
.section-header { text-align: center; margin-bottom: 3rem; }
.section-tag { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--lavender-deep); margin-bottom: 0.75rem; }
.section-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 400; color: var(--gray-900); }
.section-subtitle { font-size: 0.9375rem; color: var(--gray-600); margin-top: 0.5rem; max-width: 480px; margin-left: auto; margin-right: auto; }
.featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; max-width: 1400px; margin: 0 auto; }
.featured-cta { text-align: center; margin-top: 3rem; }
.view-all-btn { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-800); border-bottom: 1px solid var(--gray-300); padding-bottom: 0.25rem; transition: color var(--duration-fast), border-color var(--duration-fast); }
.view-all-btn:hover { color: var(--lavender-deep); border-color: var(--lavender-deep); }
.view-all-btn-full { display: inline-block; padding: 1rem 3rem; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: white; background: var(--gray-900); border-radius: var(--radius-pill); transition: background var(--duration-base), transform var(--duration-base), box-shadow var(--duration-base); }
.view-all-btn-full:hover { background: var(--lavender-deep); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(107,91,122,0.35); }

/* Product Cards */
.product-card {
    background: white;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
    position: relative;
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}
.product-image {
    aspect-ratio: 1;
    background: var(--gray-50);
    overflow: hidden;
    position: relative;
}
.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1.25rem;
    transition: transform var(--duration-slow) var(--ease-out);
}
.product-card:hover .product-image img { transform: scale(1.05); }
.product-image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-300); font-size: 0.875rem; }
/* Quick view overlay on hover */
.product-image-link { display: block; position: relative; }
.quick-view-btn {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    padding: 0.625rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: white;
    background: rgba(26,26,26,0.9);
    backdrop-filter: blur(8px);
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--duration-fast), transform var(--duration-base) var(--ease-out);
    z-index: 2;
    white-space: nowrap;
}
.product-card:hover .quick-view-btn {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.quick-view-btn:hover { background: var(--lavender-deep); }

.product-info { padding: 1rem 1.25rem 1.25rem; }
.product-brand-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lavender-mid);
    margin-bottom: 0.25rem;
}
.product-name {
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--gray-900);
    margin-bottom: 0.375rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--duration-fast);
}
.product-name-link { text-decoration: none; color: inherit; }
.product-name-link:hover .product-name { color: var(--lavender-deep); }
.product-price { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--lavender-deep); margin-bottom: 0.5rem; }
.product-review-stars { min-height: 18px; margin-bottom: 0.625rem; }
.product-buttons { display: flex; gap: 0.5rem; }
.add-to-cart-btn {
    flex: 1;
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lavender-deep);
    background: var(--lavender-pale);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
}
.add-to-cart-btn:hover { background: var(--lavender-deep); color: white; transform: translateY(-1px); }
.add-to-cart-btn:active { transform: translateY(0); }
.buy-now-btn-small {
    flex: 1;
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: white;
    background: var(--gray-900);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background var(--duration-fast), transform var(--duration-fast);
}
.buy-now-btn-small:hover { background: var(--lavender-deep); transform: translateY(-1px); }
.buy-now-btn-small:active { transform: translateY(0); }

/* Salon Section */
.salon-section { padding: var(--space-xl) 2rem; background: var(--lavender-whisper); }
.salon-compact { max-width: 900px; margin: 0 auto; border-radius: var(--radius-md); overflow: hidden; position: relative; box-shadow: var(--shadow-elevated); }
.salon-compact img { width: 100%; height: 350px; object-fit: cover; display: block; }
.salon-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 2.5rem; background: linear-gradient(transparent, rgba(0,0,0,0.75)); color: white; text-align: center; }
.salon-overlay h2 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; margin-bottom: 0.5rem; }
.salon-phone { font-size: 1.125rem; color: white; font-weight: 500; opacity: 0.9; transition: opacity var(--duration-fast); }
.salon-phone:hover { opacity: 1; }

/* About Section */
.about-section { padding: var(--space-xl) 2rem; background: var(--white); }
.about-content { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-lg); align-items: center; }
.about-image { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-elevated); }
.about-image img { width: 100%; }
.about-text h2 { font-family: var(--font-display); font-size: 2.5rem; font-weight: 400; margin-bottom: 1.25rem; }
.about-text p { color: var(--gray-600); line-height: 1.8; margin-bottom: 0.75rem; font-size: 0.9375rem; }
.about-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.about-read-more {
    display: inline-block;
    padding: 0.75rem 2rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lavender-deep);
    border: 2px solid var(--lavender-soft);
    border-radius: var(--radius-pill);
    transition: all var(--duration-base);
}
.about-read-more:hover { background: var(--lavender-deep); color: white; border-color: var(--lavender-deep); text-decoration: none; transform: translateY(-1px); }
.about-phone { font-size: 0.875rem; color: var(--gray-600); }
.about-phone a { color: var(--gray-600); transition: color var(--duration-fast); }
.about-phone a:hover { color: var(--lavender-deep); }
.contact-info { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.contact-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.125rem; border-radius: var(--radius-pill); font-weight: 500; font-size: 0.875rem; transition: all var(--duration-base); }
.contact-link.phone { background: var(--lavender-pale); color: var(--lavender-deep); }
.contact-link.phone:hover { background: var(--lavender-deep); color: white; }
.contact-link.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: white; }
.contact-link.instagram:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(188,24,136,0.3); }

/* Shop Page */
.shop-header { padding: calc(4rem + 80px) 2rem 3rem; text-align: center; background: white; border-bottom: 1px solid var(--gray-100); }
.shop-header h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 400; margin-bottom: 0.25rem; }
.shop-header p { color: var(--gray-600); }
.shop-main { padding: 3rem 2rem; background: white; min-height: 60vh; }
.shop-layout { display: flex; gap: 3rem; max-width: 1600px; margin: 0 auto; }
.filter-sidebar { width: 220px; flex-shrink: 0; position: sticky; top: 100px; height: fit-content; }
.filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--gray-200); }
.filter-header h3 { font-family: var(--font-display); font-size: 1.25rem; }
.filter-clear { font-size: 0.75rem; text-transform: uppercase; color: var(--gray-600); transition: color var(--duration-fast); }
.filter-clear:hover { color: var(--lavender-deep); }
.filter-list { display: flex; flex-direction: column; gap: 2px; }
.filter-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: 8px; cursor: pointer; transition: background var(--duration-fast); }
.filter-item:hover { background: var(--gray-50); }
.filter-item input { width: 16px; height: 16px; accent-color: var(--lavender-deep); }
.filter-name { flex: 1; font-size: 0.9375rem; }
.filter-count { font-size: 0.8125rem; color: var(--gray-600); background: var(--gray-100); padding: 2px 8px; border-radius: 10px; }
.products-container { flex: 1; min-width: 0; }
.products-count { font-size: 0.875rem; color: var(--gray-600); margin-bottom: 1rem; }
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2rem; }
.loading-spinner { grid-column: 1 / -1; text-align: center; padding: 4rem; color: var(--gray-600); }
.spinner { width: 40px; height: 40px; margin: 0 auto 1rem; border: 3px solid var(--lavender-pale); border-top-color: var(--lavender-deep); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error, .no-products { grid-column: 1 / -1; text-align: center; padding: 4rem; color: var(--gray-600); }

/* Product Detail Page */
.product-page { padding: calc(4rem + 80px) 2rem 4rem; min-height: 70vh; background: white; }
.product-container { max-width: 1100px; margin: 0 auto; }
.back-link { display: inline-block; font-size: 0.875rem; color: var(--gray-600); margin-bottom: 2rem; transition: color var(--duration-fast); }
.back-link:hover { color: var(--lavender-deep); }
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.product-detail-image { background: white; border-radius: 16px; overflow: hidden; border: 1px solid var(--gray-100); }
.product-detail-image img { width: 100%; height: auto; object-fit: contain; padding: 2rem; }
.product-brand { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lavender-deep); margin-bottom: 0.5rem; }
.product-detail-name { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 400; line-height: 1.2; margin-bottom: 1rem; }
.product-detail-price { font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; margin-bottom: 2rem; }
.product-description { margin-bottom: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-200); }
.product-description h3 { font-family: var(--font-display); font-size: 1.125rem; margin-bottom: 0.5rem; }
.product-description p { color: var(--gray-600); line-height: 1.8; }
.product-variants { margin-bottom: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-200); }
.variant-label { display: block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-800); margin-bottom: 0.75rem; }
.variant-select { width: 100%; padding: 0.875rem 1.25rem; font-size: 1rem; font-family: var(--font-body); color: var(--gray-800); background: white; border: 2px solid var(--gray-200); border-radius: 12px; outline: none; cursor: pointer; transition: all 0.2s; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B6B6B' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 3rem; }
.variant-select:hover { border-color: var(--lavender-mid); }
.variant-select:focus { border-color: var(--lavender-deep); box-shadow: 0 0 0 3px var(--lavender-pale); }
.product-single-variant { font-size: 0.9rem; color: var(--gray-600); margin-top: 0.5rem; }
.product-actions { display: flex; gap: 1.25rem; margin-top: 0.5rem; }
.buy-now-btn { flex: 1; padding: 1.25rem 2rem; font-size: 0.9375rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: white; background: var(--gray-900); border-radius: 12px; transition: all 0.3s ease; }
.buy-now-btn:hover:not(:disabled) { background: var(--lavender-deep); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(107, 91, 122, 0.3); }
.buy-now-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.add-to-cart-btn-large { flex: 1; padding: 1.25rem 2rem; font-size: 0.9375rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: var(--lavender-deep); background: var(--lavender-pale); border-radius: 12px; border: 2px solid var(--lavender-pale); transition: all 0.3s ease; }
.add-to-cart-btn-large:hover { background: var(--lavender-soft); border-color: var(--lavender-soft); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(184, 169, 201, 0.3); }

/* Footer */
.footer { padding: 3rem 2rem; background: var(--gray-900); color: white; text-align: center; }
.footer-light { background: var(--gray-50); color: var(--gray-800); border-top: 1px solid var(--gray-200); }
.footer-logo { font-family: var(--font-display); font-size: 1.25rem; display: block; margin-bottom: 0.5rem; }
.footer p { font-size: 0.875rem; opacity: 0.7; }

.mobile-filter-toggle { display: none; }

/* Responsive */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .hero { min-height: auto; padding: calc(3.5rem + 60px) 1rem 2rem; }
    .hero-tagline { margin-bottom: 0.75rem; }
    .hero-title { margin-bottom: 1rem; }
    .hero-description { margin-bottom: 1.5rem; }
    .hero-secondary-cta { margin-top: 0.75rem; }
    .mode-toggle-container { margin-top: 1rem; }
    .salon-compact img { height: 250px; }
    .has-sale-banner .hero { padding-top: calc(3.5rem + 60px + 32px); }
    .has-sale-banner .shop-header { padding-top: calc(3rem + 60px + 32px); }
    .has-sale-banner .product-page { padding-top: calc(3rem + 60px + 32px); }
    .sale-banner a { font-size: 0.65rem; }
    .shop-header { padding: calc(3rem + 60px) 1rem 1.5rem; }
    .shop-header .mode-toggle-container { margin-top: 0.5rem !important; }
    .mode-toggle-container .mens-mode-btn,
    .mode-toggle-container .womens-mode-btn { font-size: 0.6875rem; padding: 0.375rem 0.875rem; }
    .shop-layout { flex-direction: column; }
    .filter-sidebar { width: 100%; position: static; }
    .filter-header { display: none; }
    .filter-list { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; display: none; }
    .filter-list.mobile-visible { display: flex; }
    .filter-item { padding: 0.5rem 0.75rem; background: var(--gray-50); border-radius: 20px; }
    .mobile-filter-toggle { display: flex; align-items: center; gap: 0.375rem; width: 100%; padding: 0.625rem 1rem; font-size: 0.8125rem; font-weight: 500; color: var(--gray-800); background: var(--gray-50); border-radius: 8px; margin-bottom: 0.75rem; }
    .mobile-filter-toggle svg { transition: transform 0.2s; }
    .mobile-filter-toggle.open svg { transform: rotate(180deg); }
    .featured-grid, .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .product-buttons { flex-direction: column; gap: 0.375rem; }
    .add-to-cart-btn, .buy-now-btn-small { width: 100%; text-align: center; font-size: 0.6875rem; padding: 0.5rem 0.5rem; }
    .product-detail { grid-template-columns: 1fr; gap: 2rem; }
    .product-actions { flex-direction: column; gap: 1rem; }
    .buy-now-btn, .add-to-cart-btn-large { padding: 1.125rem 1.5rem; font-size: 0.9375rem; }
    .about-content { grid-template-columns: 1fr; gap: 2rem; }
    .cart-sidebar { max-width: 100%; }
}

/* Pickup Modal */
.pickup-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(107, 91, 122, 0.85);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.pickup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.pickup-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    z-index: 3001;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.pickup-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.pickup-content {
    padding: 2.5rem;
    position: relative;
}

.pickup-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    color: var(--gray-600);
    opacity: 0.6;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: opacity var(--duration-fast), background var(--duration-fast);
}

.pickup-close:hover {
    opacity: 1;
    background: var(--lavender-pale);
}

.pickup-modal h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--lavender-deep);
}

.pickup-description {
    color: var(--gray-600);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.pickup-form {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.pickup-zip-input {
    flex: 1;
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s;
}

.pickup-zip-input:focus {
    border-color: var(--lavender-mid);
}

.pickup-submit-btn {
    padding: 0.875rem 1.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    background: var(--lavender-deep);
    border-radius: 8px;
    transition: all 0.2s;
}

.pickup-submit-btn:hover {
    background: var(--lavender-mid);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107, 91, 122, 0.3);
}

.pickup-result {
    min-height: 60px;
}

.pickup-checking {
    text-align: center;
    color: var(--gray-600);
    font-style: italic;
}

.pickup-error {
    padding: 1rem;
    background: #FEE;
    border-left: 3px solid #E53;
    color: #C33;
    border-radius: 4px;
    font-size: 0.9rem;
}

.pickup-eligible {
    padding: 1.5rem;
    background: var(--lavender-whisper);
    border-radius: 12px;
    border: 2px solid var(--lavender-soft);
}

.pickup-eligible h4 {
    color: var(--lavender-deep);
    margin-bottom: 0.75rem;
    font-size: 1.125rem;
}

.pickup-eligible p {
    color: var(--gray-600);
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.pickup-phone-input {
    width: 100%;
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    outline: none;
    margin-bottom: 1rem;
    transition: border-color 0.2s;
}

.pickup-phone-input:focus {
    border-color: var(--lavender-mid);
}

.confirm-pickup-btn {
    width: 100%;
    padding: 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    background: var(--lavender-deep);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.2s;
}

.confirm-pickup-btn:hover {
    background: var(--lavender-mid);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107, 91, 122, 0.3);
}

.pickup-cancel-btn {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-600);
    background: transparent;
    border-radius: 8px;
    transition: background var(--duration-fast), color var(--duration-fast);
}

.pickup-cancel-btn:hover {
    background: var(--gray-100);
}

.pickup-not-eligible {
    padding: 1.5rem;
    background: var(--gray-100);
    border-radius: 12px;
    text-align: center;
}

.pickup-not-eligible h4 {
    color: var(--gray-800);
    margin-bottom: 0.75rem;
    font-size: 1.125rem;
}

.pickup-not-eligible p {
    color: var(--gray-600);
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.pickup-ok-btn {
    padding: 0.875rem 1.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    background: var(--lavender-deep);
    border-radius: 8px;
    transition: all 0.2s;
}

.pickup-ok-btn:hover {
    background: var(--lavender-mid);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107, 91, 122, 0.3);
}

.pickup-check-btn {
    width: 100%;
    padding: 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lavender-deep);
    background: var(--lavender-pale);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.2s;
}

.pickup-check-btn:hover {
    background: var(--lavender-soft);
    transform: translateY(-1px);
}

.checkout-btn {
    font-size: 0.85rem !important;
}

/* ============================================
   Hamburger Menu
   ============================================ */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 50%;
}
.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gray-800);
    border-radius: 2px;
    transition: all 0.3s;
}
.nav-hamburger { transition: background var(--duration-fast); }
.nav-hamburger:hover { background: var(--lavender-pale); }

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

/* Mobile Menu */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: rgba(26,26,26,0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-base), visibility var(--duration-base);
}
.mobile-menu-overlay.active { opacity: 1; visibility: visible; }

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2600;
    width: 320px;
    max-width: 85vw;
    background: white;
    padding: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease-out);
    box-shadow: -8px 0 40px rgba(0,0,0,0.15);
    overflow-y: auto;
}
.mobile-menu.active { transform: translateX(0); }

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid var(--gray-100);
}
.mobile-menu-brand {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--gray-900);
}
.mobile-menu-close {
    font-size: 1.75rem;
    color: var(--gray-600);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.mobile-menu-close:hover { background: var(--lavender-pale); color: var(--lavender-deep); }

.mobile-menu-section-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--lavender-mid);
    padding: 1.25rem 1.5rem 0.5rem;
}
.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-800);
    border-bottom: none;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.mobile-menu-link:hover { background: var(--lavender-whisper); color: var(--lavender-deep); }
.mobile-menu-link:active { background: var(--lavender-pale); }
.mobile-menu-link svg { flex-shrink: 0; color: var(--lavender-mid); }

.mobile-menu-divider { height: 1px; background: var(--gray-100); margin: 0.5rem 1.5rem; }

.mobile-menu-footer {
    margin-top: auto;
    padding: 1.5rem;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}
.mobile-menu-mode { display: flex; gap: 0.5rem; }
.mobile-menu-mode-btn {
    flex: 1;
    padding: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--radius-sm);
    border: 2px solid var(--gray-200);
    color: var(--gray-600);
    background: white;
    transition: all var(--duration-fast);
}
.mobile-menu-mode-btn:hover { border-color: var(--lavender-deep); color: var(--lavender-deep); }
body.mens-mode #mobileMenuMensBtn { background: var(--lavender-deep); color: white; border-color: var(--lavender-deep); }
body:not(.mens-mode) #mobileMenuWomensBtn { background: var(--lavender-deep); color: white; border-color: var(--lavender-deep); }

/* ============================================
   Trust Badges
   ============================================ */
.trust-badges {
    padding: 3rem 2rem;
    background: var(--lavender-whisper);
}
.trust-badges-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}
.trust-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: white;
    border-radius: 30px;
    box-shadow: 0 2px 10px rgba(107,91,122,0.08);
    border: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.trust-badge:hover {
    box-shadow: 0 4px 16px rgba(107,91,122,0.15);
}
.trust-badge.open {
    border-color: var(--lavender-deep);
}
.trust-detail-panel {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #5a5a5a;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}
.trust-detail-panel.visible {
    max-height: 120px;
    opacity: 1;
    margin-top: 1.5rem;
}
.trust-icon {
    color: var(--lavender-deep);
    font-size: 1rem;
}
.trust-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-800);
}

/* ============================================
   Product Policies (Product Page)
   ============================================ */
.product-policies {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.policy-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--gray-600);
    font-size: 0.875rem;
}
.policy-item svg {
    flex-shrink: 0;
    color: var(--lavender-deep);
}

/* ============================================
   Newsletter / Sale CTA Section
   ============================================ */
.newsletter-section {
    padding: var(--space-xl) 2rem;
    background: var(--gray-900);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.newsletter-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(107,91,122,0.3) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 50%, rgba(142,125,155,0.2) 0%, transparent 50%);
    pointer-events: none;
}
.newsletter-content {
    max-width: 520px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.newsletter-content h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 400;
    margin-bottom: 0.75rem;
    color: white;
}
.newsletter-content p {
    color: rgba(255,255,255,0.7);
    margin-bottom: 2rem;
    font-size: 1rem;
}
.newsletter-content p strong { color: white; font-weight: 600; }
.newsletter-btn {
    display: inline-block;
    padding: 1rem 3rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-900);
    background: white;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--duration-base);
}
.newsletter-btn:hover { background: var(--lavender-pale); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }

/* ============================================
   Quick View Modal
   ============================================ */
.quickview-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(26,26,26,0.6);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-base), visibility var(--duration-base);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.quickview-overlay.active { opacity: 1; visibility: visible; }
.quickview-modal {
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated);
    max-width: 780px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    transform: scale(0.95) translateY(16px);
    transition: transform 0.35s var(--ease-out);
    position: relative;
}
.quickview-overlay.active .quickview-modal {
    transform: scale(1) translateY(0);
}
.quickview-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--gray-600);
    background: white;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: background var(--duration-fast), color var(--duration-fast);
}
.quickview-close:hover { background: var(--lavender-pale); color: var(--lavender-deep); }
.quickview-image {
    background: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    overflow: hidden;
}
.quickview-image img { max-width: 100%; max-height: 400px; object-fit: contain; }
.quickview-details { padding: 2rem; display: flex; flex-direction: column; }
.quickview-brand { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lavender-mid); margin-bottom: 0.5rem; }
.quickview-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; line-height: 1.25; margin-bottom: 0.75rem; color: var(--gray-900); }
.quickview-price { font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; color: var(--lavender-deep); margin-bottom: 1.5rem; }
.quickview-variants { margin-bottom: 1.5rem; }
.quickview-variants label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-800); margin-bottom: 0.5rem; }
.quickview-variants select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    font-family: var(--font-body);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-sm);
    outline: none;
    cursor: pointer;
    transition: border-color var(--duration-fast);
    appearance: none;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B6B6B' d='M6 9L1 4h10z'/%3E%3C/svg%3E") no-repeat right 1rem center;
}
.quickview-variants select:focus { border-color: var(--lavender-deep); }
.quickview-actions { display: flex; gap: 0.75rem; margin-top: auto; }
.quickview-add-btn {
    flex: 1;
    padding: 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: white;
    background: var(--gray-900);
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast), transform var(--duration-fast);
}
.quickview-add-btn:hover { background: var(--lavender-deep); transform: translateY(-1px); }
.quickview-view-btn {
    flex: 1;
    padding: 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lavender-deep);
    background: var(--lavender-pale);
    border-radius: var(--radius-sm);
    text-decoration: none;
    text-align: center;
    transition: background var(--duration-fast), transform var(--duration-fast);
}
.quickview-view-btn:hover { background: var(--lavender-soft); transform: translateY(-1px); }
@media (max-width: 640px) {
    .quickview-modal { grid-template-columns: 1fr; max-height: 85vh; }
    .quickview-image { border-radius: var(--radius-md) var(--radius-md) 0 0; padding: 1.5rem; max-height: 280px; }
    .quickview-details { padding: 1.5rem; }
}

@media (max-width: 768px) {
    .pickup-form { flex-direction: column; }
    .pickup-submit-btn { width: 100%; }
    .pickup-modal { width: 95%; }
}

/* ============================================
   Related Products
   ============================================ */
.related-products {
    max-width: 1100px;
    margin: 4rem auto 0;
    padding-top: 3rem;
    border-top: 1px solid var(--gray-200);
}
.related-header {
    text-align: center;
    margin-bottom: 2rem;
}
.related-header h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 400;
}
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

/* ============================================
   Footer Trust Bar
   ============================================ */
.footer-trust-bar {
    max-width: 1200px;
    margin: 0 auto 2rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footer-trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    opacity: 0.7;
}
.footer-trust-item svg { flex-shrink: 0; }

/* ============================================
   Improved Footer
   ============================================ */
.footer-main {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    text-align: left;
}
.footer-brand { }
.footer-tagline {
    font-size: 0.875rem;
    opacity: 0.7;
    margin-top: 0.5rem;
    line-height: 1.5;
}
.footer-links h4 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 1rem;
}
.footer-links a {
    display: block;
    font-size: 0.875rem;
    opacity: 0.7;
    margin-bottom: 0.5rem;
    transition: opacity 0.2s;
}
.footer-links a:hover { opacity: 1; }
.footer-bottom {
    max-width: 1200px;
    margin: 2rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.15);
    text-align: center;
}
.footer-light .footer-bottom {
    border-top-color: var(--gray-200);
}

@media (max-width: 768px) {
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    .footer-brand { grid-column: 1 / -1; text-align: center; }
}

@media (max-width: 480px) {
    .footer-main { grid-template-columns: 1fr; text-align: center; }
}

/* ============================================
   Shop Controls & Sort
   ============================================ */
.shop-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.sort-select {
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    font-size: 0.875rem;
    font-family: var(--font-body);
    color: var(--gray-800);
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B6B6B' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    transition: border-color 0.2s;
}
.sort-select:hover { border-color: var(--lavender-mid); }
.sort-select:focus { border-color: var(--lavender-deep); box-shadow: 0 0 0 3px var(--lavender-pale); }

/* ============================================
   Toast Notification
   ============================================ */
.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--gray-900);
    color: white;
    padding: 0.875rem 1.75rem;
    border-radius: 60px;
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 4000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
.toast.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ============================================
   Skeleton Loading
   ============================================ */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2rem;
    grid-column: 1 / -1;
}
.skeleton-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
}
.skeleton-image {
    aspect-ratio: 1;
    background: linear-gradient(110deg, var(--gray-100) 8%, var(--gray-50) 18%, var(--gray-100) 33%);
    background-size: 200% 100%;
    animation: shimmer 1.5s linear infinite;
}
.skeleton-text {
    height: 14px;
    margin: 1rem;
    background: linear-gradient(110deg, var(--gray-100) 8%, var(--gray-50) 18%, var(--gray-100) 33%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: shimmer 1.5s linear infinite;
}
.skeleton-text.short { width: 40%; margin-top: 0.5rem; }
@keyframes shimmer { to { background-position-x: -200%; } }

/* ============================================
   Breadcrumbs
   ============================================ */
.breadcrumbs {
    margin-bottom: 2rem;
    font-size: 0.875rem;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.breadcrumbs a {
    color: var(--gray-600);
    transition: color 0.2s;
}
.breadcrumbs a:hover { color: var(--lavender-deep); }
.breadcrumb-sep { color: var(--gray-300); }
.breadcrumb-current {
    color: var(--gray-800);
    font-weight: 500;
}

/* ============================================
   Back to Top
   ============================================ */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    background: var(--lavender-deep);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(107,91,122,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover {
    background: var(--gray-900);
    transform: translateY(-2px);
}

/* ============================================
   Policies Page
   ============================================ */
.policies-page {
    padding: calc(4rem + 80px) 2rem 4rem;
    min-height: 70vh;
    background: white;
}
.policies-container {
    max-width: 800px;
    margin: 0 auto;
}
.policies-container h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 400;
    margin-bottom: 2.5rem;
    text-align: center;
}
.policy-section {
    margin-bottom: 3rem;
}
.policy-section h2 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--lavender-deep);
}
.policy-section h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
    color: var(--gray-800);
}
.policy-section p {
    color: var(--gray-600);
    line-height: 1.8;
    margin-bottom: 0.75rem;
}
.policy-section ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
}
.policy-section ul li {
    color: var(--gray-600);
    line-height: 1.8;
    padding-left: 1.25rem;
    position: relative;
}
.policy-section ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 6px;
    height: 6px;
    background: var(--lavender-deep);
    border-radius: 50%;
}
.policy-section a {
    color: var(--lavender-deep);
    font-weight: 500;
}
.policy-section a:hover {
    text-decoration: underline;
}

/* ============================================
   Men's Mode Theme Override
   ============================================ */
body.mens-mode {
    --lavender-deep: #2f4f6e;
    --lavender-mid: #4e7599;
    --lavender-soft: #9fb9d4;
    --lavender-pale: #d8e4f0;
    --lavender-whisper: #edf3f9;
    --line-soft: #c9d9e8;
}

body.mens-mode .hero {
    background: radial-gradient(ellipse at 20% 80%, rgba(78,117,153,0.2) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(159,185,212,0.24) 0%, transparent 40%),
                linear-gradient(135deg, #edf3f9 0%, #dce8f3 50%, #cedfee 100%);
}

body.mens-mode .nav {
    background: rgba(255, 255, 255, 0.95);
}

body.mens-mode .search-overlay {
    background:
        radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,0.14), transparent 60%),
        radial-gradient(900px 500px at 80% 85%, rgba(255,255,255,0.08), transparent 65%),
        linear-gradient(135deg, rgba(34, 55, 76, 0.78), rgba(46, 74, 102, 0.84));
}

body.mens-mode .pickup-overlay {
    background: rgba(47, 79, 110, 0.85);
}

body.mens-mode .salon-section {
    background: var(--lavender-whisper);
}

body.mens-mode .brand-bar {
    display: none;
}

body.mens-mode .why-buy .why-buy-icon {
    background: var(--lavender-pale);
}

body.mens-mode .newsletter-section {
    background: var(--lavender-pale);
}

body.mens-mode .ha-promo-section {
    background: var(--lavender-pale);
}

body.mens-mode .testimonials-section {
    background: #edf3f9;
    border-top-color: #c9d9e8;
    border-bottom-color: #c9d9e8;
}

body.mens-mode .help-chooser {
    background: linear-gradient(160deg, #edf3f9 0%, #dce8f3 100%);
}

body.mens-mode .help-chooser-call {
    background: var(--lavender-deep);
}

body.mens-mode .help-chooser-scan {
    border-color: #bdd0e2;
}

body.mens-mode .credential-chips span {
    background: #eef4fa;
    border-color: #c9d9e8;
}

body.mens-mode .contact-link.phone {
    background: var(--lavender-pale);
    color: var(--lavender-deep);
}
body.mens-mode .contact-link.phone:hover {
    background: var(--lavender-deep);
    color: white;
}

/* Men's Mode Toggle Button */
.mode-toggle-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.mens-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-600);
    background: transparent;
    border: 2px solid var(--gray-300);
    border-radius: 60px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mens-mode-btn:hover {
    color: var(--lavender-deep);
    border-color: var(--lavender-deep);
    background: rgba(47, 79, 110, 0.08);
}

.mens-mode-btn.active {
    color: white;
    background: var(--lavender-deep);
    border-color: var(--lavender-deep);
}

.mens-mode-btn.active:hover {
    background: var(--lavender-mid);
    border-color: var(--lavender-mid);
}

.mens-mode-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Coming Soon placeholder for men's products */
.mens-coming-soon {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
}

.mens-coming-soon h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    color: var(--gray-800);
    margin-bottom: 0.75rem;
}

.mens-coming-soon p {
    color: var(--gray-600);
    font-size: 1.0625rem;
    max-width: 450px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Back to Women's link */
.womens-mode-btn {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lavender-deep);
    background: transparent;
    border: 2px solid var(--lavender-deep);
    border-radius: 60px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.womens-mode-btn:hover {
    color: white;
    background: var(--lavender-deep);
}

body.mens-mode .womens-mode-btn {
    display: inline-flex;
}

body.mens-mode .mens-mode-btn {
    color: white;
    background: var(--lavender-deep);
    border-color: var(--lavender-deep);
}

/* ============================================
   Hair Analysis Page
   ============================================ */
.ha-main {
    padding: calc(4rem + 80px) 2rem 4rem;
    min-height: 70vh;
    background: white;
    max-width: 900px;
    margin: 0 auto;
}

.ha-hero {
    text-align: center;
    margin-bottom: 3rem;
}
.ha-hero-tag {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lavender-deep);
    margin-bottom: 0.5rem;
}
.ha-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 400;
    margin-bottom: 1rem;
}
.ha-hero-desc {
    color: var(--gray-600);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}
.ha-hero-trust {
    margin-top: 0.85rem;
    color: var(--gray-600);
    font-size: 0.875rem;
}
.ha-hero-how {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lavender-deep);
    font-weight: 600;
}
.ha-how-section {
    margin-bottom: 1.75rem;
}
.ha-how-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
.ha-how-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    padding: 1rem;
}
.ha-how-card h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin-bottom: 0.35rem;
}
.ha-how-card p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.55;
}

.ha-why-photo {
    margin-bottom: 1.25rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--lavender-whisper);
}
.ha-why-photo h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: 0.35rem;
}
.ha-why-photo p {
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 0.6rem;
}
.ha-why-photo ul {
    list-style: disc;
    margin: 0;
    padding-left: 1.1rem;
    color: var(--gray-700);
    line-height: 1.6;
}

.ha-quiz-section {
    margin-bottom: 2rem;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    padding: 1.2rem;
    background: white;
}
.ha-quiz-head h2 {
    font-family: var(--font-display);
    font-size: 1.65rem;
    margin-bottom: 0.25rem;
}
.ha-quiz-head p {
    color: var(--gray-600);
    margin-bottom: 0.85rem;
}
.ha-quiz-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: end;
}
.ha-quiz-form label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-600);
}
.ha-quiz-form select {
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: white;
    color: var(--gray-900);
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: 0;
}
.ha-quiz-form select:focus {
    border-color: var(--lavender-deep);
    box-shadow: 0 0 0 3px var(--lavender-pale);
}
.ha-quiz-btn {
    grid-column: 1 / -1;
    padding: 0.85rem 1.2rem;
    border-radius: 999px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: white;
    background: var(--gray-900);
    transition: transform var(--duration-fast), background var(--duration-fast);
}
.ha-quiz-btn:hover:not(:disabled) {
    background: var(--lavender-deep);
    transform: translateY(-1px);
}
.ha-quiz-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.ha-quiz-results {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line-soft);
}
.ha-quiz-results h3 {
    font-family: var(--font-display);
    font-size: 1.55rem;
    margin-bottom: 0.3rem;
}
.ha-quiz-results > p {
    color: var(--gray-600);
    margin-bottom: 0.9rem;
}
.ha-quiz-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}
.ha-quiz-card {
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ha-quiz-card .ha-rec-image {
    width: 100%;
    height: 160px;
    border-bottom: 1px solid var(--line-soft);
}
.ha-quiz-card-info {
    padding: 0.8rem;
}
.ha-quiz-card-info .ha-rec-price {
    margin-bottom: 0.75rem;
}
.ha-quiz-view-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    background: var(--lavender-pale);
    color: var(--lavender-deep);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.ha-quiz-view-link:hover {
    background: var(--lavender-soft);
}

/* Upload Dropzone */
.ha-dropzone {
    border: 2px dashed var(--gray-300);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: var(--gray-50);
    position: relative;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ha-dropzone:hover, .ha-dropzone.dragover {
    border-color: var(--lavender-deep);
    background: var(--lavender-whisper);
}
.ha-upload-icon {
    color: var(--lavender-mid);
    margin-bottom: 1rem;
}
.ha-dropzone-text {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--gray-800);
    margin-bottom: 0.25rem;
}
.ha-dropzone-subtext {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-bottom: 1rem;
}
.ha-dropzone-hint {
    font-size: 0.8125rem;
    color: var(--lavender-mid);
    font-style: italic;
}

/* Preview */
.ha-preview {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}
.ha-preview img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
    max-height: 350px;
}
.ha-preview-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 32px;
    height: 32px;
    background: rgba(0,0,0,0.6);
    color: white;
    border-radius: 50%;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    transition: background var(--duration-fast);
    justify-content: center;
}
.ha-preview-remove:hover {
    background: rgba(0,0,0,0.8);
}

/* Analyze Button */
.ha-analyze-btn {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 1.5rem auto 0;
    padding: 1.125rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    background: var(--lavender-deep);
    border-radius: 60px;
    transition: all 0.3s;
}
.ha-analyze-btn:hover:not(:disabled) {
    background: var(--gray-900);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(107,91,122,0.3);
}
.ha-analyze-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.ha-option-row {
    margin: 1rem auto 0;
    max-width: 400px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--gray-700);
    font-size: 0.95rem;
}
.ha-option-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--lavender-deep);
}

/* Loading State */
.ha-loading-content {
    text-align: center;
    padding: 4rem 2rem;
}
.ha-loading-spinner {
    margin: 0 auto 2rem;
    width: 60px;
    height: 60px;
    position: relative;
}
.ha-spinner-ring {
    width: 60px;
    height: 60px;
    border: 3px solid var(--lavender-pale);
    border-top-color: var(--lavender-deep);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.ha-loading-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 0.75rem;
}
.ha-loading-text {
    color: var(--gray-600);
    max-width: 450px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Analysis Results Card */
.ha-analysis-card {
    background: var(--lavender-whisper);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 3rem;
}
.ha-analysis-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    text-align: center;
}
.ha-analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.ha-analysis-item {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
}
.ha-analysis-item h4 {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lavender-deep);
    margin-bottom: 0.5rem;
}
.ha-analysis-item p {
    color: var(--gray-600);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Recommendations */
.ha-rec-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 400;
    text-align: center;
    margin-bottom: 0.25rem;
}
.ha-rec-subtitle {
    text-align: center;
    color: var(--gray-600);
    margin-bottom: 2rem;
}
.ha-rec-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.ha-rec-card {
    display: flex;
    gap: 1.5rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow 0.3s;
}
.ha-rec-card:hover {
    box-shadow: 0 8px 30px rgba(107,91,122,0.12);
}
.ha-rec-image {
    width: 160px;
    flex-shrink: 0;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ha-rec-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
}
.ha-rec-info {
    flex: 1;
    padding: 1.25rem 1.25rem 1.25rem 0;
    display: flex;
    flex-direction: column;
}
.ha-rec-name {
    font-weight: 500;
    font-size: 1rem;
    color: var(--gray-900);
    margin-bottom: 0.25rem;
    line-height: 1.3;
    transition: color var(--duration-fast);
}
.ha-rec-name-link:hover .ha-rec-name {
    color: var(--lavender-deep);
}
.ha-rec-brand {
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lavender-deep);
    margin-bottom: 0.25rem;
}
.ha-rec-price {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--gray-800);
    margin-bottom: 0.75rem;
}
.ha-rec-reason {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--lavender-whisper);
    border-radius: 8px;
    border-left: 3px solid var(--lavender-deep);
}
.ha-rec-card .product-buttons {
    margin-top: auto;
}

/* Results Actions */
.ha-results-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 3rem;
}
.ha-try-again-btn {
    padding: 1rem 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lavender-deep);
    background: var(--lavender-pale);
    border-radius: 60px;
    transition: all 0.3s;
}
.ha-try-again-btn:hover {
    background: var(--lavender-soft);
    transform: translateY(-2px);
}
.ha-browse-btn {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    background: var(--gray-900);
    border-radius: 60px;
    transition: all 0.3s;
}
.ha-browse-btn:hover {
    background: var(--lavender-deep);
    transform: translateY(-2px);
}

/* Error State */
.ha-error {
    text-align: center;
    padding: 4rem 2rem;
}
.ha-error-text {
    color: var(--gray-600);
    font-size: 1.0625rem;
    margin-bottom: 2rem;
}

/* Why Buy Section */
.why-buy { padding: 4rem 2rem; background: white; }
.why-buy-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.why-buy-item { text-align: center; padding: 1.5rem 1rem; }
.why-buy-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--lavender-pale); border-radius: 50%; margin-bottom: 1.25rem; color: var(--lavender-deep); }
.why-buy-item h3 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; margin-bottom: 0.75rem; color: var(--gray-900); }
.why-buy-item p { font-size: 0.9375rem; color: var(--gray-600); line-height: 1.7; }
.why-buy-item p a { color: var(--lavender-deep); font-weight: 500; }
.why-buy-item p a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .why-buy-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .why-buy-item { padding: 1rem; }
}

/* Homepage Promo Section */
.ha-promo-section {
    padding: 3.5rem 2rem;
    background: var(--lavender-pale);
    text-align: center;
}
.ha-promo-content {
    max-width: 650px;
    margin: 0 auto;
}
.ha-promo-tag {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--lavender-deep);
    margin-bottom: 0.75rem;
}
.ha-promo-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--gray-900);
}
.ha-promo-desc {
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 2rem;
}
.ha-promo-cta {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    background: var(--lavender-deep);
    border-radius: 60px;
    transition: all 0.3s;
}
.ha-promo-cta:hover {
    background: var(--gray-900);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(107,91,122,0.3);
}

/* Mobile camera upload */
.ha-mobile-upload {
    display: none;
}
.ha-camera-icon {
    color: var(--lavender-mid);
    margin-bottom: 1rem;
}
.ha-mobile-upload-text {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

/* Hair Analysis Responsive */
@media (max-width: 768px) {
    .ha-main { padding: calc(4rem + 60px) 1rem 3rem; }
    .ha-how-grid { grid-template-columns: 1fr; }
    .ha-quiz-form { grid-template-columns: 1fr; }
    .ha-quiz-grid { grid-template-columns: 1fr; }
    .ha-analysis-grid { grid-template-columns: 1fr; }
    .ha-rec-card { flex-direction: column; }
    .ha-rec-image { width: 100%; height: 200px; }
    .ha-rec-info { padding: 1.25rem; }
    .ha-results-actions { flex-direction: column; align-items: center; }
    .ha-dropzone {
        padding: 2rem 1rem;
        min-height: 200px;
        border: none;
        background: transparent;
    }
    .ha-dropzone:hover, .ha-dropzone.dragover {
        background: transparent;
        border: none;
    }
    .ha-desktop-upload { display: none !important; }
    .ha-mobile-upload { display: flex; flex-direction: column; align-items: center; }
}

/* Men's mode overrides for hair analysis */
body.mens-mode .ha-analysis-card {
    background: var(--lavender-whisper);
}
body.mens-mode .ha-rec-reason {
    background: var(--lavender-whisper);
    border-left-color: var(--lavender-deep);
}
/* ============================================
   About Page
   ============================================ */
.about-page-main {
    padding: calc(4rem + 80px) 2rem 4rem;
    min-height: 70vh;
    background: white;
}

.about-page-header {
    text-align: center;
    margin-bottom: 3rem;
}
.about-page-tag {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lavender-deep);
    margin-bottom: 0.5rem;
}
.about-page-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 400;
    font-style: italic;
}

.about-page-hero {
    max-width: 1000px;
    margin: 0 auto 4rem;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 3rem;
    align-items: center;
}
.about-page-image {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(107,91,122,0.15);
}
.about-page-image img {
    width: 100%;
    display: block;
}
.about-page-intro h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 1.25rem;
    color: var(--gray-900);
}
.about-page-intro p {
    color: var(--gray-600);
    line-height: 1.8;
    margin-bottom: 1rem;
}

/* Credentials */
.about-page-credentials {
    max-width: 1000px;
    margin: 0 auto 4rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.credential-card {
    background: var(--lavender-whisper);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
}
.credential-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: white;
    border-radius: 50%;
    margin-bottom: 1rem;
    color: var(--lavender-deep);
    box-shadow: 0 2px 10px rgba(107,91,122,0.1);
}
.credential-card h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: var(--gray-900);
}
.credential-card p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.7;
}

/* Philosophy */
.about-page-philosophy {
    max-width: 750px;
    margin: 0 auto 4rem;
    text-align: center;
}
.about-page-philosophy h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 400;
    margin-bottom: 1.5rem;
    color: var(--gray-900);
}
.about-page-philosophy p {
    color: var(--gray-600);
    line-height: 1.8;
    margin-bottom: 1rem;
}

/* Salon Image */
.about-page-salon {
    max-width: 800px;
    margin: 0 auto 4rem;
}
.about-salon-image {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(107,91,122,0.2);
}
.about-salon-image img {
    width: 100%;
    display: block;
}

/* Contact */
.about-page-contact {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 2rem;
}
.about-page-contact h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 0.75rem;
}
.about-page-contact > p {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}
.about-contact-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}
.about-cta-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.about-cta-btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    background: var(--gray-900);
    border-radius: 60px;
    transition: all 0.3s;
}
.about-cta-btn:hover {
    background: var(--lavender-deep);
    transform: translateY(-2px);
}
.about-cta-secondary {
    background: var(--lavender-pale);
    color: var(--lavender-deep);
}
.about-cta-secondary:hover {
    background: var(--lavender-deep);
    color: white;
}

/* About Page Responsive */
@media (max-width: 768px) {
    .about-page-main { padding: calc(4rem + 60px) 1rem 3rem; }
    .about-page-hero { grid-template-columns: 1fr; gap: 2rem; }
    .about-page-credentials { grid-template-columns: 1fr; }
    .about-cta-row { flex-direction: column; align-items: center; }
}

/* ============================================
   Homepage Trust Bar (secure checkout etc.)
   ============================================ */
.trust-bar {
    padding: 1.5rem 2rem;
    background: white;
    border-top: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
}
.trust-bar-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}
.trust-bar-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-600);
}
.trust-bar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lavender-deep);
}

@media (max-width: 768px) {
    .trust-bar-container {
        gap: 1rem 2rem;
    }
}

/* ============================================
   Checkout Page
   ============================================ */
.checkout-page {
    padding: calc(4rem + 80px) 2rem 4rem;
    min-height: 70vh;
    background: white;
}
.checkout-container {
    max-width: 900px;
    margin: 0 auto;
}
.checkout-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 400;
    text-align: center;
    margin-bottom: 2.5rem;
}
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
.checkout-section-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--gray-200);
}

/* Order Summary */
.checkout-items {
    margin-bottom: 1.5rem;
}
.checkout-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--gray-100);
}
.checkout-item:last-child {
    border-bottom: none;
}
.checkout-item-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gray-50);
    flex-shrink: 0;
}
.checkout-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.checkout-item-info {
    flex: 1;
    min-width: 0;
}
.checkout-item-name {
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.checkout-item-qty {
    font-size: 0.8125rem;
    color: var(--gray-600);
    margin-top: 2px;
}
.checkout-item-price {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 500;
    flex-shrink: 0;
}
.checkout-totals {
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}
.checkout-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.9375rem;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
}
.checkout-total-line {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--gray-900);
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
    margin-top: 0.5rem;
}
.checkout-total-line span:last-child {
    font-family: var(--font-display);
    font-size: 1.5rem;
}

/* Checkout Item Controls */
.checkout-item-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 4px;
}
.checkout-qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--gray-200);
    background: white;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.checkout-qty-btn:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}
.checkout-item-controls .checkout-item-qty {
    font-size: 0.8125rem;
    color: var(--gray-700);
    min-width: 1.25rem;
    text-align: center;
}
.checkout-remove-btn {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--gray-500);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    transition: color var(--duration-fast);
}
.checkout-remove-btn:hover {
    color: #C33;
}

/* Promo Code */
.checkout-promo {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}
.promo-input-row {
    display: flex;
    gap: 0.5rem;
}
.promo-input {
    flex: 1;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: var(--font-body);
}
.promo-input:focus {
    outline: none;
    border-color: var(--lavender-deep);
}
.promo-apply-btn {
    padding: 0.625rem 1.25rem;
    background: var(--gray-900);
    color: white;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.promo-apply-btn:hover:not(:disabled) {
    background: var(--lavender-deep);
}
.promo-apply-btn:disabled {
    opacity: 0.6;
    cursor: default;
}
.promo-remove-btn {
    padding: 0.625rem 1rem;
    background: transparent;
    color: var(--gray-500);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.promo-remove-btn:hover {
    color: #C33;
    border-color: #C33;
}
.promo-message {
    font-size: 0.8125rem;
    margin-top: 0.375rem;
    min-height: 1.25rem;
}
.promo-success { color: #2a7d2e; }
.promo-error { color: #C33; }
.discount-amount { color: #2a7d2e; font-weight: 500; }

/* Shipping Address Form */
.checkout-address-form {
    margin-bottom: 1.5rem;
}
.address-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.address-row-3 {
    grid-template-columns: 1fr auto auto;
}
.address-field {
    margin-bottom: 0.75rem;
}
.address-field label {
    display: block;
    font-size: 0.8125rem;
    color: var(--gray-600);
    margin-bottom: 0.25rem;
    font-weight: 400;
}
.address-field input,
.address-field select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: var(--font-body);
    background: white;
}
.address-field input:focus,
.address-field select:focus {
    outline: none;
    border-color: var(--lavender-deep);
    box-shadow: 0 0 0 3px rgba(107,91,122,0.1);
}
.address-field-sm {
    max-width: 100px;
}
.address-field-sm select,
.address-field-sm input {
    padding: 0.625rem 0.5rem;
}

/* Payment Section */
.checkout-card-container {
    min-height: 89px;
    margin-bottom: 1.5rem;
}
.checkout-wallet-buttons {
    margin-bottom: 1.5rem;
}
.wallet-button-container {
    display: none;
    margin-bottom: 0.75rem;
    min-height: 48px;
    width: 100%;
}
.wallet-button-container iframe,
.wallet-button-container button,
.wallet-button-container div {
    width: 100% !important;
    max-width: 100% !important;
}
.apple-pay-button {
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: buy;
    -apple-pay-button-style: black;
    display: none;
    width: 100%;
    min-height: 48px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 0.75rem;
}
.checkout-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.25rem 0;
    color: var(--gray-600);
    font-size: 0.8125rem;
}
.checkout-divider::before,
.checkout-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}
.checkout-pay-btn {
    width: 100%;
    padding: 1.125rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    background: var(--lavender-deep);
    border-radius: 12px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.checkout-pay-btn:hover:not(:disabled) {
    background: var(--gray-900);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(107,91,122,0.3);
}
.checkout-pay-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pay-btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.pay-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.checkout-errors {
    margin-top: 1rem;
    padding: 1rem;
    background: #FEE;
    border-left: 3px solid #E53;
    color: #C33;
    border-radius: 4px;
    font-size: 0.9rem;
    /* Smooth slide-down reveal */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 1rem;
    margin-top: 0;
    transition: max-height var(--duration-base) var(--ease-out),
                opacity var(--duration-base),
                padding var(--duration-base),
                margin var(--duration-base);
}
.checkout-errors.visible {
    max-height: 200px;
    opacity: 1;
    padding: 1rem;
    margin-top: 1rem;
}
.checkout-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    color: var(--gray-600);
}
.checkout-secure-note svg {
    color: var(--lavender-deep);
    flex-shrink: 0;
}

/* Success State */
.checkout-success {
    text-align: center;
    padding: 4rem 2rem;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.checkout-success.visible {
    opacity: 1;
    transform: translateY(0);
}
.success-icon {
    color: var(--lavender-deep);
    margin-bottom: 1.5rem;
}
.success-title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 1rem;
}
.success-message {
    color: var(--gray-600);
    font-size: 1.0625rem;
    max-width: 500px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}
.local-receipt-card {
    max-width: 540px;
    margin: 0 auto 2rem;
    text-align: left;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
}
.local-receipt-title {
    margin: 0 0 0.25rem;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
}
.local-receipt-order {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--gray-600);
}
.local-receipt-items {
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    padding: 0.5rem 0;
}
.local-receipt-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    padding: 0.4rem 0;
    color: var(--gray-700);
}
.local-receipt-totals {
    padding-top: 0.6rem;
}
.local-receipt-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--gray-700);
    padding: 0.2rem 0;
}
.local-receipt-total {
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--gray-200);
    font-weight: 600;
    color: var(--gray-900);
}
.success-continue-btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    background: var(--gray-900);
    border-radius: 60px;
    transition: all 0.3s;
}
.success-continue-btn:hover {
    background: var(--lavender-deep);
    transform: translateY(-2px);
}
.success-receipt-link {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.85rem 2.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-900);
    background: transparent;
    border: 2px solid var(--gray-900);
    border-radius: 60px;
    text-decoration: none;
    transition: all var(--duration-fast);
}
.success-receipt-link:hover {
    background: var(--gray-900);
    color: white;
    transform: translateY(-2px);
}

/* Error State */
.checkout-error-state {
    text-align: center;
    padding: 4rem 2rem;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.checkout-error-state.visible {
    opacity: 1;
    transform: translateY(0);
}
.checkout-error-state h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 1rem;
}
.checkout-error-state p {
    color: var(--gray-600);
    margin-bottom: 2rem;
}
.checkout-retry-btn {
    padding: 1rem 2.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    background: var(--lavender-deep);
    border-radius: 60px;
    transition: all 0.3s;
}
.checkout-retry-btn:hover {
    background: var(--gray-900);
    transform: translateY(-2px);
}

/* Checkout Responsive */
@media (max-width: 768px) {
    .checkout-page { padding: calc(4rem + 60px) 1rem 3rem; }
    .checkout-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .checkout-summary {
        order: 1;
    }
    .checkout-payment {
        order: 2;
    }
    .address-row {
        grid-template-columns: 1fr;
    }
    .address-row-3 {
        grid-template-columns: 1fr 80px 80px;
    }
    .address-field-sm {
        max-width: none;
    }
}

/* Sale Banner */
.sale-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    background: var(--gray-900);
    text-align: center;
    padding: 0.5rem 1rem;
}
.sale-banner a {
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}
.has-sale-banner .nav {
    top: 32px;
}
.has-sale-banner .product-page {
    padding-top: calc(4rem + 80px + 32px);
}
.has-sale-banner .shop-header {
    padding-top: calc(4rem + 80px + 32px);
}
.has-sale-banner .hero {
    padding-top: calc(6rem + 32px);
}
.has-sale-banner .search-overlay {
    padding-top: calc(2rem + 32px);
}

/* Sale Badge */
.sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: var(--gray-900);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    text-transform: uppercase;
}
.product-image {
    position: relative;
}

/* Sale Pricing */
.price-original {
    text-decoration: line-through;
    color: var(--gray-600);
    font-weight: 400;
    font-size: 0.9em;
}
.price-sale {
    color: var(--lavender-deep);
    font-weight: 600;
}
.product-detail-price .price-original {
    font-size: 0.85em;
}
.product-detail-price .price-sale {
    font-size: 1.1em;
}

/* Product Card Review Stars */
.product-review-stars {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    min-height: 1.25rem;
    margin-bottom: 0.25rem;
}
.product-review-stars .star { font-size: 0.8rem; }
.card-review-count {
    font-size: 0.75rem;
    color: var(--gray-600);
    margin-left: 0.25rem;
}

/* Reviews Section */
.reviews-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 2rem;
}
.reviews-container {
    border-top: 1px solid var(--gray-200);
    padding-top: 2.5rem;
}
.reviews-empty {
    text-align: center;
    color: var(--gray-600);
    font-size: 1rem;
    padding: 1.5rem 0;
}
.reviews-avg {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.reviews-stars .star { font-size: 1.25rem; }
.reviews-avg-num {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--gray-900);
}
.reviews-count {
    color: var(--gray-600);
    font-size: 0.9rem;
}
.star-filled { color: var(--lavender-deep); }
.star-empty { color: var(--gray-300); }

.review-card {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--gray-200);
}
.review-card:last-child { border-bottom: none; }
.review-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--lavender-pale);
    color: var(--lavender-deep);
    font-weight: 600;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.review-author {
    font-weight: 500;
    color: var(--gray-900);
}
.review-verified {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2a7d2e;
    background: #e8f5e9;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}
.review-stars .star { font-size: 0.9rem; }
.review-date {
    color: var(--gray-600);
    font-size: 0.8rem;
    margin-left: auto;
}
.review-text {
    color: var(--gray-800);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Review Form */
.review-form-wrapper {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-200);
}
.review-form-wrapper h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--gray-900);
}
.review-form-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.75rem;
}
.review-input {
    flex: 1;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-family: var(--font-body);
    border: 2px solid var(--gray-200);
    border-radius: 60px;
    outline: none;
    background: var(--white);
    transition: border-color 0.2s;
}
.review-input:focus { border-color: var(--lavender-deep); }
.review-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-family: var(--font-body);
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    outline: none;
    resize: vertical;
    margin-bottom: 0.75rem;
    transition: border-color 0.2s;
}
.review-textarea:focus { border-color: var(--lavender-deep); }
.star-rating-input {
    display: flex;
    gap: 0.25rem;
}
.star-pick {
    font-size: 1.5rem;
    color: var(--gray-300);
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
    user-select: none;
}
.star-pick:hover, .star-pick.hover { color: var(--lavender-mid); transform: scale(1.15); }
.star-pick.active { color: var(--lavender-deep); }
.star-rating-input.shake {
    animation: shake 0.4s ease;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.review-submit-btn {
    padding: 0.75rem 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    background: var(--lavender-deep);
    border-radius: 60px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}
.review-submit-btn:hover {
    background: var(--gray-900);
    transform: translateY(-1px);
}
.review-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Review Image Upload */
.review-image-upload {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.review-image-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--lavender-deep);
    border: 2px solid var(--gray-200);
    border-radius: 60px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.review-image-label:hover { border-color: var(--lavender-deep); }
.review-image-preview { display: flex; gap: 0.5rem; }
.review-image-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
}
.review-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.review-image-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.review-image-error {
    font-size: 0.8rem;
    color: #c44;
}
.review-image-display {
    margin-top: 0.75rem;
}
.review-image-display img {
    max-width: 240px;
    max-height: 180px;
    border-radius: 8px;
    object-fit: cover;
}

/* Show More Reviews */
.reviews-show-more {
    display: block;
    margin: 1.5rem auto 0;
    padding: 0.65rem 2rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--lavender-deep);
    background: none;
    border: 2px solid var(--lavender-soft);
    border-radius: 60px;
    cursor: pointer;
    transition: all 0.2s;
}
.reviews-show-more:hover {
    background: var(--lavender-pale);
    border-color: var(--lavender-deep);
}

@media (max-width: 768px) {
    .reviews-section { padding: 2rem 1rem; }
    .review-form-row { flex-direction: column; align-items: stretch; }
    .star-rating-input { justify-content: center; }
    .review-date { margin-left: 0; }
    .review-submit-btn { width: 100%; }
    .review-image-display img { max-width: 100%; }
}

/* ============================================
   2026 Design Refresh
   ============================================ */
.hero {
    min-height: 88vh;
    background: linear-gradient(150deg, #f5f2f8 20%, #ebe4f2 65%, #e4dcee 100%);
}
.hero::before {
    background:
        radial-gradient(ellipse 82% 62% at 10% 88%, rgba(142,125,155,0.24) 0%, transparent 60%),
        radial-gradient(ellipse 60% 52% at 90% 10%, rgba(184,169,201,0.2) 0%, transparent 52%),
        radial-gradient(circle at 45% 108%, rgba(107,91,122,0.12) 0%, transparent 40%);
}
.hero-content { max-width: 780px; }
.hero-title { font-size: var(--step-h1); }
.hero-description { font-size: 1.12rem; max-width: 560px; }
.hero-proof {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}
.hero-cta-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.85rem;
}
.hero-cta,
.hero-secondary-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 210px;
    padding: 0.95rem 1.5rem;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--step-micro);
    font-weight: 600;
}
.hero-cta {
    background: var(--lavender-deep);
    color: white;
}
.hero-cta:hover {
    background: var(--gray-900);
    box-shadow: 0 12px 32px rgba(31,27,24,0.25);
}
.hero-secondary-cta {
    margin-top: 0;
    color: var(--gray-900);
    background: rgba(255,255,255,0.8);
    border: 1px solid var(--line-soft);
}
.hero-secondary-cta:hover {
    background: white;
    color: var(--lavender-deep);
}

.trust-metrics {
    padding: 0 2rem;
    margin-top: -2rem;
    position: relative;
    z-index: 2;
}
.trust-metrics-grid {
    max-width: 1100px;
    margin: 0 auto;
    background: white;
    border: 1px solid var(--line-soft);
    border-radius: 20px;
    box-shadow: var(--shadow-card);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.trust-metric-item {
    padding: 1.25rem 1rem;
    text-align: center;
    border-right: 1px solid var(--gray-100);
}
.trust-metric-item:last-child { border-right: none; }
.trust-metric-item h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--gray-900);
}
.trust-metric-item p {
    font-size: 0.82rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.featured,
.about-section,
.salon-section,
.ha-promo-section,
.testimonials-section,
.help-chooser,
.shop-main,
.product-page {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.testimonials-section {
    padding-left: 2rem;
    padding-right: 2rem;
    background: var(--lavender-whisper);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}
.testimonials-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.testimonial-card {
    background: white;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    padding: 1.4rem;
    box-shadow: var(--shadow-card);
}
.testimonial-quote {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.35;
    margin-bottom: 0.7rem;
}
.testimonial-case {
    font-size: 0.78rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.8rem;
}
.testimonial-author {
    color: var(--gray-600);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.credential-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.credential-chips span {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-900);
    background: var(--gray-100);
    border: 1px solid var(--line-soft);
}

.help-chooser {
    padding-left: 2rem;
    padding-right: 2rem;
    background: linear-gradient(160deg, #f5f2f8 0%, #e6ddee 100%);
}
.help-chooser-content {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}
.help-chooser-content h2 {
    font-family: var(--font-display);
    font-size: var(--step-h2);
    margin-bottom: 0.5rem;
}
.help-chooser-content p {
    color: var(--gray-600);
    max-width: 680px;
    margin: 0 auto 1.4rem;
}
.help-chooser-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.help-chooser-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 210px;
    padding: 0.9rem 1.4rem;
    border-radius: 999px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
}
.help-chooser-call {
    background: var(--gray-900);
    color: white;
}
.help-chooser-scan {
    background: white;
    color: var(--gray-900);
    border: 1px solid var(--line-soft);
}

.shop-header {
    background: var(--lavender-whisper);
    border-bottom: 1px solid var(--line-soft);
}
.shop-layout { gap: 2.2rem; }
.filter-sidebar {
    width: 260px;
    background: white;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 1rem;
}
.filter-item {
    border: 1px solid transparent;
}
.filter-item:hover {
    border-color: var(--line-soft);
}
.shop-controls {
    padding: 0.8rem 1rem;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--lavender-whisper);
}
.active-filter-pills {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.9rem 0 1rem;
}
.active-filter-pills.visible { display: flex; }
.active-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: var(--lavender-whisper);
    color: var(--gray-900);
    font-size: 0.78rem;
    font-weight: 500;
}
.active-filter-clear-all {
    font-size: 0.77rem;
    color: var(--lavender-deep);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.no-products-state {
    grid-column: 1 / -1;
    text-align: center;
    background: var(--lavender-whisper);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 2.2rem 1.4rem;
}
.no-products-state h3 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}
.no-products-state p {
    color: var(--gray-600);
    margin-bottom: 1rem;
}
.no-products-clear {
    padding: 0.65rem 1.2rem;
    background: var(--lavender-deep);
    color: white;
    border-radius: 999px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.product-card {
    border: 1px solid var(--line-soft);
    box-shadow: none;
}
.product-card:hover {
    box-shadow: var(--shadow-hover);
}
.sale-badge {
    top: 0.8rem;
    left: 0.8rem;
    background: var(--gray-900);
    border-radius: 999px;
    padding: 0.35rem 0.6rem;
    z-index: 3;
}
.product-badge {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    z-index: 2;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.32rem 0.55rem;
    border-radius: 999px;
    font-weight: 700;
    max-width: calc(100% - 1.6rem);
    white-space: nowrap;
}
.sale-badge + .product-badge { top: 2.6rem; }
.product-badge-primary {
    background: rgba(107,91,122,0.12);
    color: var(--lavender-deep);
}
.product-badge-warning {
    background: rgba(140,66,66,0.14);
    color: #7c2f2f;
}
.product-badge-neutral {
    background: rgba(31,27,24,0.08);
    color: var(--gray-900);
}
.product-benefits {
    margin-bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.product-benefits span {
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-600);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    padding: 0.23rem 0.45rem;
}

.product-page {
    background: linear-gradient(180deg, #ffffff 0%, var(--lavender-whisper) 100%);
}
.product-container {
    background: white;
    border: 1px solid var(--line-soft);
    border-radius: 20px;
    padding: 1.8rem;
}
.product-outcomes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.2rem;
    list-style: none;
}
.product-outcomes li {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-600);
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
}
.product-help-inline {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.product-help-inline p {
    color: var(--gray-600);
    font-size: 0.87rem;
}
.product-help-inline a {
    color: var(--lavender-deep);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.product-guidance-grid {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}
.product-guidance-card {
    padding: 1.15rem;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--lavender-whisper);
}
.product-guidance-card h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin-bottom: 0.4rem;
}
.product-guidance-card p,
.product-guidance-card li {
    color: var(--gray-600);
    font-size: 0.9rem;
    line-height: 1.6;
}
.product-guidance-card ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.product-guidance-card li::before {
    content: '\\2022';
    color: var(--lavender-deep);
    margin-right: 0.35rem;
}
.product-stylist-note {
    background: linear-gradient(140deg, var(--lavender-whisper) 0%, var(--lavender-pale) 100%);
}
.product-pro-tip {
    margin-top: 0.6rem;
    color: var(--gray-700);
}

body.mens-mode .product-badge-primary {
    background: rgba(47,79,110,0.14);
}

.product-mobile-sticky {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1700;
    display: none;
    align-items: center;
    gap: 0.8rem;
    background: white;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    padding: 0.5rem 0.6rem 0.5rem 1rem;
    box-shadow: var(--shadow-elevated);
}
.product-mobile-sticky-price {
    font-family: var(--font-display);
    font-size: 1.3rem;
    line-height: 1;
    color: var(--gray-900);
    margin-right: auto;
}
.product-mobile-sticky-btn {
    padding: 0.72rem 1.2rem;
    border-radius: 999px;
    background: var(--lavender-deep);
    color: white;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.74rem;
}

.help-chip {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 1700;
    background: rgba(255,255,255,0.96);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    box-shadow: var(--shadow-hover);
    padding: 0.65rem 0.7rem;
    max-width: 175px;
    width: fit-content;
}
.help-chip p {
    font-size: 0.69rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-600);
    margin-bottom: 0.25rem;
}
.help-chip-links {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.help-chip-links a {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--gray-900);
}
.help-chip-links a:last-child { color: var(--lavender-deep); }

@media (max-width: 1024px) {
    .testimonials-grid { grid-template-columns: 1fr; }
    .trust-metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-metric-item:nth-child(2) { border-right: none; }
    .trust-metric-item:nth-child(-n+2) { border-bottom: 1px solid var(--gray-100); }
}

@media (max-width: 768px) {
    .hero {
        min-height: auto;
        padding-top: calc(3.8rem + 60px);
    }
    .hero-description {
        font-size: 1rem;
        margin-bottom: 1.1rem;
    }
    .hero-proof { margin-bottom: 0.85rem; }
    .hero-cta-group {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-cta,
    .hero-secondary-cta {
        width: 100%;
        min-width: 0;
    }
    .trust-metrics {
        margin-top: -0.8rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .trust-metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-metric-item {
        border-right: 1px solid var(--gray-100);
        border-bottom: 1px solid var(--gray-100);
    }
    .trust-metric-item:nth-child(2n) { border-right: none; }
    .trust-metric-item:nth-last-child(-n+2) { border-bottom: none; }
    .testimonials-section,
    .help-chooser {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .shop-controls { padding: 0.7rem 0.75rem; }
    .sale-badge + .product-badge {
        top: 2.35rem;
        font-size: 0.58rem;
        padding: 0.28rem 0.45rem;
    }
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem;
    }
    .product-container { padding: 1.1rem; }
    .product-guidance-grid { grid-template-columns: 1fr; }
    .product-help-inline {
        flex-direction: column;
        align-items: flex-start;
    }
    .help-chip {
        left: auto;
        right: 0.7rem;
        max-width: 140px;
        width: auto !important;
        bottom: 0.7rem;
        border-radius: 12px;
        padding: 0.44rem 0.5rem;
        opacity: 0.95;
    }
    .help-chip p {
        font-size: 0.58rem;
        margin-bottom: 0.14rem;
    }
    .help-chip-links a {
        font-size: 0.64rem;
    }
}

@media (min-width: 769px) {
    .product-mobile-sticky { display: none !important; }
}

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