/* shopifya - Shopifi-inspired dual-canvas commerce system */

:root {
    --ink: #000000;
    --on-dark: #ffffff;
    --canvas-night: #000000;
    --canvas-night-elevated: #0a0a0a;
    --surface-elevated-dark: #1e2c31;
    --canvas-light: #ffffff;
    --canvas-cream: #fbfbf5;
    --aloe-10: #c1fbd4;
    --pistachio-10: #d4f9e0;
    --shade-30: #d4d4d8;
    --shade-40: #a1a1aa;
    --shade-50: #71717a;
    --shade-60: #52525b;
    --hairline-light: #e4e4e7;
    --hairline-dark: #1e2c31;
    --danger: #d92d20;
    --success: #137333;
    --bg-base: var(--canvas-cream);
    --bg-surface: var(--canvas-light);
    --bg-surface-strong: var(--pistachio-10);
    --bg-surface-glass: var(--canvas-light);
    --bg-elevated: var(--canvas-light);
    --accent-cyan: var(--aloe-10);
    --accent-cyan-rgb: 193, 251, 212;
    --accent-purple: var(--ink);
    --accent-purple-rgb: 0, 0, 0;
    --accent-green: var(--success);
    --accent-green-rgb: 19, 115, 51;
    --text-primary: var(--ink);
    --text-secondary: var(--shade-60);
    --text-muted: var(--shade-50);
    --border-color: var(--hairline-light);
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-pill: 9999px;
    --border-radius-sm: var(--radius-md);
    --border-radius-md: var(--radius-lg);
    --border-radius-lg: var(--radius-xl);
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-xxl: 32px;
    --space-huge: 64px;
    --font-display: "NeueHaasGrotesk Display", "Inter Display", Helvetica, Arial, sans-serif;
    --font-sans: "Inter Variable", Inter, Helvetica, Arial, sans-serif;
    --shadow-soft: 0 8px 8px rgba(0,0,0,.10), 0 4px 4px rgba(0,0,0,.10), 0 2px 2px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.08);
    --shadow-modal: 0 25px 50px -12px rgba(0,0,0,.25);
    --shadow-dark: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(255,255,255,.08);
    --ease-smooth: cubic-bezier(.4,0,.2,1);
    --transition-fast: 180ms var(--ease-smooth);
    --transition-normal: 280ms var(--ease-smooth);
}

* { box-sizing: border-box; margin: 0; padding: 0; outline: none; -webkit-tap-highlight-color: transparent; }
html { width: 100%; overflow-x: clip; scroll-behavior: smooth; font-size: 16px; }
body { min-width: 320px; width: 100%; max-width: 100%; overflow-x: hidden; background: var(--canvas-cream); color: var(--ink); font-family: var(--font-sans); font-feature-settings: "ss03"; line-height: 1.5; }
body[data-route="home"], body[data-route="about"], body[data-route="contact"] { background: var(--canvas-night); color: var(--on-dark); }
img, svg, video, canvas { max-width: 100%; }
img { display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
input, select, textarea { border: 0; background: none; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--canvas-cream); }
::-webkit-scrollbar-thumb { background: var(--shade-30); border-radius: var(--radius-pill); }

.app-container { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; margin-top: 78px; }
body[data-route="home"] main { margin-top: 0; }
.container { width: min(100% - 48px, 1440px); margin-inline: auto; }
.glass-panel { background: var(--canvas-light); border: 1px solid var(--hairline-light); box-shadow: var(--shadow-soft); }
body[data-route="home"] .glass-panel, body[data-route="about"] .glass-panel, body[data-route="contact"] .glass-panel { background: var(--canvas-night-elevated); border-color: var(--hairline-dark); box-shadow: var(--shadow-dark); }
.text-gradient-cyan, .text-gradient-purple { background: none; -webkit-text-fill-color: currentColor; color: inherit; }
.bg-gradient-neon { background: var(--aloe-10); }

gf-header { position: fixed; inset: 0 0 auto; z-index: 100; }
.header-wrapper { height: 78px; display: flex; align-items: center; background: var(--canvas-light); border-bottom: 1px solid var(--hairline-light); box-shadow: none; }
body[data-route="home"] .header-wrapper, body[data-route="about"] .header-wrapper, body[data-route="contact"] .header-wrapper { background: var(--canvas-night); color: var(--on-dark); border-bottom-color: var(--hairline-dark); }
.logo-container, .footer-brand-mark { display: inline-flex; align-items: center; gap: var(--space-sm); min-width: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: .42px; }
.logo-icon, .footer-brand-logo { width: 34px; height: 34px; object-fit: cover; border-radius: var(--radius-sm); }
.nav-links { display: flex; align-items: center; gap: var(--space-xxl); font-size: .95rem; font-weight: 420; }
.nav-links a { color: var(--shade-60); padding: var(--space-sm) 0; }
body[data-route="home"] .nav-links a, body[data-route="about"] .nav-links a, body[data-route="contact"] .nav-links a { color: var(--shade-40); }
.nav-links a:hover, .nav-links a.active { color: currentColor; }
.nav-links a::after { display: none; }
.header-actions { display: flex; align-items: center; gap: var(--space-sm); }
.action-btn, .mobile-nav-toggle { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); color: currentColor; transition: background var(--transition-fast); }
.action-btn:hover, .mobile-nav-toggle:hover { background: rgba(0,0,0,.06); }
body[data-route="home"] .action-btn:hover, body[data-route="about"] .action-btn:hover, body[data-route="contact"] .action-btn:hover, body[data-route="home"] .mobile-nav-toggle:hover, body[data-route="about"] .mobile-nav-toggle:hover, body[data-route="contact"] .mobile-nav-toggle:hover { background: rgba(255,255,255,.12); }
.action-badge { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--aloe-10); color: var(--ink); font-size: .68rem; font-weight: 700; }
.mobile-nav-toggle { display: none; font-size: 1.15rem; }

.btn, .filter-btn-pill, .badge-tag, .home-hero-badge, .home-category-count, .detail-meta-tag, .detail-sales-tag, .detail-save-badge, .discount-applied-badge, .contact-highlight-chip { border-radius: var(--radius-pill); }
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 12px 24px; border: 1px solid transparent; font-size: 1rem; font-weight: 550; line-height: 1.2; white-space: normal; text-align: center; transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: var(--on-dark); }
.btn-secondary { background: var(--canvas-light); color: var(--ink); border-color: var(--ink); }
body[data-route="home"] .btn-primary, body[data-route="about"] .btn-primary, body[data-route="contact"] .btn-primary { background: var(--canvas-night); color: var(--on-dark); border: 2px solid var(--on-dark); }
body[data-route="home"] .btn-secondary, body[data-route="about"] .btn-secondary, body[data-route="contact"] .btn-secondary { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.btn-icon, .card-add-btn, .card-wishlist-btn, .qty-btn, .cart-qty-btn, .close-drawer-btn, .modal-close, .cart-item-remove { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); }

.section-eyebrow { display: inline-flex; align-items: center; margin-bottom: var(--space-lg); color: var(--shade-50); font-size: .75rem; font-weight: 500; letter-spacing: .72px; text-transform: uppercase; }
body[data-route="home"] .section-eyebrow, body[data-route="about"] .section-eyebrow, body[data-route="contact"] .section-eyebrow { color: var(--shade-40); }
.section-eyebrow::before { content: ""; width: 28px; height: 1px; margin-right: var(--space-md); background: currentColor; }
.section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-xl); margin-bottom: var(--space-xxl); }
.section-title-wrap h2, .contact-hero-title, .about-hero-wrap h2, .success-title, .legal-title, .auth-header h2, .detail-title, .home-usecase-intro h2, .home-hero-title, .rating-huge, .coupon-value { font-family: var(--font-display); font-weight: 330; letter-spacing: 0; }
.section-title-wrap h2 { max-width: 760px; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.04; }
.section-title-wrap p { max-width: 680px; margin-top: var(--space-md); color: var(--shade-60); font-size: 1rem; }
body[data-route="home"] .section-title-wrap p, body[data-route="about"] .section-title-wrap p, body[data-route="contact"] .section-title-wrap p { color: var(--shade-40); }

.home-hero-section { min-height: 100svh; display: flex; align-items: flex-end; padding: 118px 0 var(--space-huge); margin-bottom: 0; background: var(--canvas-night); }
.home-hero-grid { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.home-hero-copy { padding: 0 0 var(--space-xl); }
.home-hero-title { max-width: 880px; margin-bottom: var(--space-xl); color: var(--on-dark); font-size: clamp(4rem, 8vw, 7.2rem); line-height: .98; letter-spacing: 2.4px; }
.home-hero-desc { max-width: 54ch; margin-bottom: var(--space-xl); color: var(--shade-40); font-size: 1.08rem; font-weight: 420; line-height: 1.6; }
.home-hero-cta-row, .home-hero-badges { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.home-hero-cta-row { margin-bottom: var(--space-xl); }
.home-hero-badge { min-height: 34px; padding: 6px 14px; border: 1px solid var(--hairline-dark); color: var(--shade-40); background: var(--canvas-night-elevated); box-shadow: none; font-size: .85rem; }
.home-hero-badge i { color: var(--aloe-10); }
.home-spotlight-shell { min-height: 680px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.home-showcase-stage { position: relative; min-height: 680px; }
.home-showcase-primary, .home-showcase-secondary { position: absolute; display: block; overflow: hidden; background: var(--canvas-night-elevated); border: 0; box-shadow: none; transition: filter var(--transition-normal), transform var(--transition-normal); }
.home-showcase-primary { inset: 0 -8vw 150px 0; border-radius: var(--radius-xl) 0 0 var(--radius-xl); }
.home-showcase-secondary { right: 4vw; bottom: 0; width: min(72%, 560px); aspect-ratio: 1.55 / 1; border-radius: var(--radius-xl); border: 1px solid rgba(255,255,255,.12); }
.home-showcase-primary-image, .home-showcase-secondary-image { width: 100%; height: 100%; object-fit: cover; }
.home-showcase-primary:hover, .home-showcase-secondary:hover { transform: translateY(-2px); filter: contrast(1.05); }
.home-metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--hairline-dark); border-top: 1px solid var(--hairline-dark); }
.home-metric-card { padding: var(--space-xl); background: var(--canvas-night); color: var(--on-dark); box-shadow: none; border: 0; }
.home-metric-card strong { display: block; margin-bottom: var(--space-sm); color: var(--on-dark); font-family: var(--font-display); font-size: clamp(2rem,4vw,4rem); font-weight: 330; line-height: 1; }
.home-metric-card span { color: var(--shade-40); font-size: .95rem; }
.home-section { padding: clamp(72px,10vw,128px) 0; margin-bottom: 0; }
body[data-route="home"] .home-section:nth-of-type(even) { background: var(--canvas-night); }
body[data-route="home"] .home-section:nth-of-type(odd) { background: var(--canvas-night-elevated); }
.home-category-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--space-lg); }
.home-category-card { grid-column: span 4; min-height: 430px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--radius-lg); background: var(--canvas-night-elevated); border: 1px solid var(--hairline-dark); color: var(--on-dark); box-shadow: var(--shadow-dark); cursor: pointer; }
.home-category-card:nth-child(1), .home-category-card:nth-child(2) { grid-column: span 6; }
.home-category-copy { padding: var(--space-xxl); }
.home-category-topline { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.home-category-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--aloe-10); color: var(--ink); }
.home-category-count { padding: 5px 12px; background: var(--shade-30); color: var(--ink); font-size: .75rem; font-weight: 500; white-space: nowrap; }
.home-category-tag { display: block; margin-bottom: var(--space-sm); color: var(--shade-40); font-size: .75rem; letter-spacing: .72px; text-transform: uppercase; }
.home-category-card h3 { margin-bottom: var(--space-md); font-family: var(--font-display); font-size: clamp(2rem,4vw,3.4rem); font-weight: 330; line-height: 1.04; }
.home-category-card p { color: var(--shade-40); line-height: 1.6; }
.home-category-link { display: inline-flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); color: var(--on-dark); font-weight: 550; }
.home-category-media { min-height: 210px; overflow: hidden; }
.home-category-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-normal); }
.home-category-card:hover .home-category-media img { transform: scale(1.03); }
.home-usecase-band { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: var(--space-xl); padding: var(--space-xxl); border-radius: var(--radius-lg); background: var(--surface-elevated-dark); color: var(--on-dark); }
.home-usecase-intro h2 { margin-bottom: var(--space-lg); font-size: clamp(2.6rem,5vw,4.8rem); line-height: 1.04; }
.home-usecase-intro p { color: var(--shade-40); font-size: 1.05rem; }
.home-usecase-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-md); }
.home-usecase-card { padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--canvas-night); border: 1px solid rgba(255,255,255,.08); }
.home-usecase-card i { margin-bottom: var(--space-lg); color: var(--aloe-10); }
.home-usecase-card h3 { margin-bottom: var(--space-sm); font-size: 1.15rem; font-weight: 550; }
.home-usecase-card p { color: var(--shade-40); line-height: 1.6; }
.home-loading-state { grid-column: 1 / -1; padding: var(--space-xxl); color: var(--shade-50); text-align: center; }

.catalog-layout, .detail-layout, .checkout-layout, .account-layout, .contact-layout, .contact-hero, .reviews-container, .footer-grid, .cart-item-row, .summary-item-row { display: grid; gap: var(--space-xl); }
.catalog-layout > *, .detail-layout > *, .checkout-layout > *, .account-layout > *, .contact-layout > *, .reviews-container > *, .footer-grid > *, .cart-item-row > *, .summary-item-row > *, .home-hero-grid > *, .home-category-grid > * { min-width: 0; }
.catalog-layout { grid-template-columns: 280px minmax(0,1fr); align-items: start; padding: var(--space-huge) 0; }
.filters-sidebar, .catalog-toolbar, .prod-card, .gallery-main-wrap, .thumb-item, .specs-table, .reviews-summary-card, .review-item, .checkout-card, .checkout-summary, .account-menu, .order-card, .auth-container, .legal-wrapper, .success-card, .contact-info-card, .contact-summary-card, .contact-support-tile, .contact-hero-aside, .coupon-card, .payment-method-card { border-radius: var(--radius-lg); background: var(--canvas-light); border: 1px solid var(--hairline-light); box-shadow: var(--shadow-soft); }
.filters-sidebar { position: sticky; top: 102px; padding: var(--space-xl); }
.search-box, .form-input-wrap, .phone-prefix-block, .sort-select { min-height: 44px; border-radius: var(--radius-md); background: var(--canvas-light); border: 1px solid var(--hairline-light); }
.search-box { display: flex; align-items: center; gap: var(--space-sm); padding: 0 var(--space-md); margin-bottom: var(--space-xl); }
.search-box input { width: 100%; }
.filter-group h3 { margin-bottom: var(--space-md); font-size: 1rem; font-weight: 550; }
.filter-options { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.filter-btn-pill { min-height: 36px; padding: 8px 14px; border: 1px solid var(--hairline-light); background: var(--canvas-light); color: var(--shade-60); font-size: .92rem; }
.filter-btn-pill:hover, .filter-btn-pill.active { background: var(--aloe-10); color: var(--ink); border-color: var(--aloe-10); }
.catalog-main { min-width: 0; }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-xl); padding: var(--space-lg); }
.results-count { color: var(--shade-60); font-weight: 550; }
.sort-select-wrap { display: flex; align-items: center; gap: var(--space-sm); }
.sort-select-wrap label { color: var(--shade-60); font-size: .9rem; }
.sort-select { padding: 0 var(--space-md); color: var(--ink); }
.products-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-lg); }
.prod-card { height: 100%; display: flex; flex-direction: column; overflow: hidden; color: var(--ink); transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.prod-card:hover { transform: translateY(-2px); }
.card-media { position: relative; aspect-ratio: 1 / 1; background: var(--canvas-cream); overflow: hidden; }
.card-img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-md); mix-blend-mode: multiply; }
.card-badges { position: absolute; top: var(--space-sm); left: var(--space-sm); display: flex; gap: 4px; }
.badge-tag { padding: 5px 10px; background: var(--aloe-10); color: var(--ink); font-size: .72rem; font-weight: 550; }
.card-wishlist-btn { position: absolute; top: var(--space-sm); right: var(--space-sm); width: 38px; height: 38px; background: var(--canvas-light); color: var(--ink); border: 1px solid var(--hairline-light); }
.card-wishlist-btn.active { background: var(--ink); color: var(--on-dark); }
.card-info { flex: 1; display: flex; flex-direction: column; padding: var(--space-lg); }
.card-category, .rating-num, .price-original, .cart-item-category, .review-date, .summary-item-qty, .legal-meta { color: var(--shade-50); font-size: .82rem; }
.card-title { min-height: 3.6em; margin: 4px 0 var(--space-sm); color: var(--ink); font-weight: 550; line-height: 1.2; overflow: hidden; }
.card-rating-wrap, .card-footer, .detail-category-wrap, .detail-price-line, .qty-selector-wrap, .buy-buttons, .cart-item-meta, .cart-item-actions, .cart-summary-line, .summary-item-meta, .payment-method-option { display: flex; align-items: center; gap: var(--space-sm); }
.card-rating-wrap { justify-content: space-between; margin-bottom: var(--space-md); }
.stars { color: #f6b700; font-size: .8rem; }
.card-footer { margin-top: auto; justify-content: space-between; }
.price-wrap { min-width: 0; }
.price-final, .detail-price-final, .cart-item-price, .summary-item-price, .cart-summary-line.total span, .order-card-total span { font-weight: 700; color: var(--ink); }
.price-final { display: block; overflow-wrap: anywhere; }
.price-original, .detail-price-original { text-decoration: line-through; }
.card-add-btn { width: 42px; height: 42px; flex: 0 0 auto; background: var(--ink); color: var(--on-dark); }

.detail-layout { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: start; padding: var(--space-huge) 0 var(--space-xl); }
.detail-gallery { display: grid; gap: var(--space-md); }
.gallery-main-wrap { aspect-ratio: 1 / 1; overflow: hidden; background: var(--canvas-light); }
.gallery-main-img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-xl); mix-blend-mode: multiply; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--space-sm); }
.thumb-item { aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; }
.thumb-item.active { border-color: var(--ink); }
.thumb-item img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-sm); }
.detail-info { padding: var(--space-lg) 0; }
.detail-category-wrap { flex-wrap: wrap; margin-bottom: var(--space-lg); }
.detail-meta-tag, .detail-sales-tag, .detail-save-badge { min-height: 30px; padding: 5px 12px; background: var(--shade-30); color: var(--ink); font-size: .78rem; font-weight: 550; }
.detail-sales-tag, .detail-save-badge { background: var(--aloe-10); }
.detail-title { margin-bottom: var(--space-lg); font-size: clamp(2.25rem,5vw,4.4rem); line-height: 1.04; }
.detail-rating-line { margin-bottom: var(--space-lg); }
.detail-price-line { flex-wrap: wrap; margin-bottom: var(--space-xl); }
.detail-price-final { font-size: clamp(2rem,4vw,3.2rem); line-height: 1; }
.detail-desc { max-width: 720px; margin-bottom: var(--space-xl); color: var(--shade-60); line-height: 1.7; }
.detail-actions-wrap { display: grid; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.qty-selector-wrap { justify-content: space-between; width: min(100%, 340px); }
.qty-label { color: var(--shade-50); font-size: .75rem; letter-spacing: .72px; }
.qty-btn-group, .cart-item-qty { display: inline-flex; align-items: center; border: 1px solid var(--hairline-light); border-radius: var(--radius-pill); overflow: hidden; background: var(--canvas-light); }
.qty-btn, .cart-qty-btn { width: 38px; height: 38px; }
.qty-val, .cart-qty-val { min-width: 34px; text-align: center; font-weight: 550; }
.buy-buttons { flex-wrap: wrap; }
.tabs-nav { display: flex; gap: var(--space-sm); border-bottom: 1px solid var(--hairline-light); margin-bottom: var(--space-xl); }
.tab-link { padding: 14px 18px; color: var(--shade-60); border-bottom: 2px solid transparent; font-weight: 550; }
.tab-link.active { color: var(--ink); border-bottom-color: var(--ink); }
.tab-link::after { display: none; }
.tab-content-panel { display: none; padding-bottom: var(--space-huge); }
.tab-content-panel.active { display: block; }
.specs-table { width: 100%; border-collapse: collapse; overflow: hidden; }
.specs-table tr + tr, .order-card-header { border-top: 1px solid var(--hairline-light); }
.specs-table td { padding: 16px 18px; vertical-align: top; }
.specs-table td.spec-key { width: 260px; color: var(--shade-60); font-weight: 550; }
.specs-table td.spec-val { color: var(--ink); }
.reviews-container { grid-template-columns: 320px minmax(0,1fr); align-items: start; }
.reviews-summary-card, .review-item { padding: var(--space-xl); }
.rating-huge { font-size: 4rem; line-height: 1; }
.rating-distribution, .reviews-list { display: grid; gap: var(--space-md); }
.dist-row, .review-header { display: flex; align-items: center; gap: var(--space-sm); }
.dist-bar-wrap { flex: 1; height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--shade-30); }
.dist-bar-fill { height: 100%; background: var(--ink); }
.review-header { justify-content: space-between; margin-bottom: var(--space-md); }
.reviewer-name, .seller-author { font-weight: 550; }
.review-content, .seller-reply-item p { color: var(--shade-60); line-height: 1.65; }
.seller-reply-item { margin-top: var(--space-lg); padding: var(--space-lg); border-radius: var(--radius-md); background: var(--canvas-cream); }

.cart-drawer-overlay { position: fixed; inset: 0; z-index: 180; pointer-events: none; background: rgba(0,0,0,0); transition: background var(--transition-normal); }
.cart-drawer-overlay.active { pointer-events: auto; background: rgba(0,0,0,.42); }
.cart-drawer { position: fixed; top: 0; right: 0; z-index: 190; width: min(460px,100vw); height: 100dvh; display: flex; flex-direction: column; transform: translateX(100%); background: var(--canvas-light); color: var(--ink); border-left: 1px solid var(--hairline-light) !important; box-shadow: var(--shadow-modal); transition: transform var(--transition-normal); }
.cart-drawer.active, .cart-drawer-overlay.active + .cart-drawer { transform: translateX(0); }
.cart-drawer-header, .cart-drawer-footer { padding: var(--space-xl); border-bottom: 1px solid var(--hairline-light); }
.cart-drawer-footer { border-top: 1px solid var(--hairline-light); border-bottom: 0; }
.cart-drawer-header { display: flex; align-items: center; justify-content: space-between; }
.cart-drawer-header h3 { font-size: 1.25rem; font-weight: 550; }
.close-drawer-btn, .modal-close, .cart-item-remove { width: 38px; height: 38px; border: 1px solid var(--hairline-light); background: var(--canvas-light); }
.cart-drawer-body { flex: 1; overflow: auto; padding: var(--space-lg); }
.cart-item-row { grid-template-columns: 92px minmax(0,1fr); padding: var(--space-md) 0; }
.cart-item-img, .summary-item-image { overflow: hidden; border-radius: var(--radius-md); background: var(--canvas-cream); }
.cart-item-img { width: 92px; height: 92px; }
.cart-item-img img, .summary-item-image img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-sm); }
.cart-item-copy, .cart-item-meta { justify-content: space-between; }
.cart-item-copy { display: flex; align-items: flex-start; gap: var(--space-sm); }
.cart-item-title { margin: 4px 0 10px; font-weight: 550; line-height: 1.25; overflow-wrap: anywhere; }
.cart-item-meta { flex-wrap: wrap; }
.cart-item-actions { margin-left: auto; }
.cart-item-remove-mobile { display: none; }
.cart-summary-line { justify-content: space-between; padding: var(--space-sm) 0; color: var(--shade-60); }
.cart-summary-line.total { margin-top: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--hairline-light); color: var(--ink); font-size: 1.15rem; }
.checkout-btn { width: 100%; margin-top: var(--space-lg); }
.empty-cart-state, .wishlist-empty-state { display: grid; place-items: center; gap: var(--space-md); min-height: 320px; text-align: center; color: var(--shade-60); }
.empty-cart-state i, .wishlist-empty-state i { font-size: 2.2rem; color: var(--shade-50); }

.modal-overlay { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: var(--space-lg); pointer-events: none; opacity: 0; background: rgba(0,0,0,.42); transition: opacity var(--transition-normal); }
.modal-overlay.active { pointer-events: auto; opacity: 1; }
.modal-container { position: relative; width: min(460px,100%); padding: var(--space-xxl); border-radius: var(--radius-lg); background: var(--canvas-light); color: var(--ink); box-shadow: var(--shadow-modal); }
.modal-close { position: absolute; top: var(--space-md); right: var(--space-md); }
.coupon-card { padding: var(--space-xl); margin: var(--space-xl) 0; background: var(--aloe-10); color: var(--ink); text-align: center; }
.coupon-value { font-size: 3.4rem; line-height: 1; }
.coupon-title, .coupon-code { margin-top: var(--space-sm); font-size: .82rem; font-weight: 550; letter-spacing: .72px; }

.checkout-layout { grid-template-columns: minmax(0,1fr) 380px; align-items: start; padding: var(--space-huge) 0; }
.checkout-card, .checkout-summary, .auth-container, .account-menu, .order-card, .legal-wrapper, .success-card { padding: var(--space-xxl); }
.checkout-section-title { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xl); font-size: 1.1rem; font-weight: 550; }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-lg); }
.form-group { margin-bottom: var(--space-lg); }
.form-group label { display: block; margin-bottom: var(--space-sm); color: var(--shade-60); font-size: .9rem; font-weight: 550; }
.form-input-wrap { display: flex; align-items: center; padding: 0 var(--space-md); }
.form-input-wrap:focus-within, .search-box:focus-within, .sort-select:focus { border-color: var(--ink); }
.form-input-wrap input, .form-input-wrap select, .form-input-wrap textarea { width: 100%; }
.phone-input-container { display: flex; gap: var(--space-sm); }
.phone-prefix-block { width: 64px; display: grid; place-items: center; background: var(--canvas-cream); font-weight: 550; }
.phone-input-container .form-input-wrap { flex: 1; }
.error-msg { display: none; margin-top: 4px; color: var(--danger); font-size: .82rem; }
.form-group.invalid .form-input-wrap { border-color: var(--danger); }
.form-group.invalid .error-msg { display: block; }
.payment-method-card { padding: var(--space-lg); }
.payment-method-option { cursor: pointer; }
.payment-method-option input { accent-color: var(--ink); }
.payment-method-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--aloe-10); }
.payment-method-copy { display: grid; gap: 2px; }
.payment-method-copy small { color: var(--shade-60); }
.checkout-summary { position: sticky; top: 102px; }
.summary-items-list { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); max-height: 360px; overflow: auto; }
.summary-item-row { grid-template-columns: 68px minmax(0,1fr); }
.summary-item-image { width: 68px; height: 68px; }
.summary-item-name { display: block; margin-bottom: 4px; font-weight: 550; line-height: 1.25; }
.summary-item-meta { justify-content: space-between; }
.discount-applied-badge { display: flex; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-lg); padding: 10px 14px; background: var(--aloe-10); color: var(--ink); font-weight: 550; }

.success-card, .auth-container { width: min(100%, 560px); margin: var(--space-huge) auto 0; text-align: center; }
.success-icon, .user-avatar { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto var(--space-lg); border-radius: var(--radius-pill); background: var(--aloe-10); color: var(--ink); font-size: 1.6rem; }
.success-title { margin-bottom: var(--space-md); font-size: clamp(2rem,4vw,3.2rem); line-height: 1.08; }
.success-desc { color: var(--shade-60); line-height: 1.65; }
.legal-wrapper { width: min(100%, 880px); margin: var(--space-huge) auto; }
.legal-title { margin-bottom: var(--space-sm); font-size: clamp(2.4rem,5vw,4rem); }
.legal-meta { margin-bottom: var(--space-xxl); }
.legal-content h3 { margin: var(--space-xl) 0 var(--space-sm); font-size: 1.15rem; font-weight: 550; }
.legal-content p, .legal-content li { color: var(--shade-60); line-height: 1.75; }
.legal-content ul, .legal-content ol { margin-left: var(--space-xl); }

.account-layout { grid-template-columns: 300px minmax(0,1fr); align-items: start; padding: var(--space-huge) 0; }
.account-user-card { padding-bottom: var(--space-xl); margin-bottom: var(--space-xl); border-bottom: 1px solid var(--hairline-light); text-align: center; }
.account-user-name, .account-menu-btn { font-weight: 550; }
.account-user-email { color: var(--shade-50); font-size: .85rem; overflow-wrap: anywhere; }
.account-menu-links, .orders-list, .order-items-grid { display: grid; gap: var(--space-md); }
.account-menu-btn { min-height: 42px; padding: 10px 14px; border-radius: var(--radius-pill); color: var(--shade-60); text-align: left; }
.account-menu-btn:hover, .account-menu-btn.active { background: var(--aloe-10); color: var(--ink); }
.order-card-header { display: flex; justify-content: space-between; gap: var(--space-lg); padding-top: var(--space-lg); margin-bottom: var(--space-lg); }
.order-meta-info { display: flex; gap: var(--space-xl); flex-wrap: wrap; }
.order-meta-info label, .order-card-total label { display: block; color: var(--shade-50); font-size: .74rem; letter-spacing: .72px; text-transform: uppercase; }
.order-meta-info span { color: var(--shade-60); font-weight: 550; }
.order-card-total { text-align: right; }
.order-item-inline { display: flex; justify-content: space-between; gap: var(--space-md); }
.order-item-inline-name { width: min(60%, 520px); color: var(--shade-60); overflow-wrap: anywhere; }

.about-hero-wrap, .contact-hero { padding-top: var(--space-huge); }
.about-hero-wrap { text-align: center; margin-bottom: var(--space-huge); }
.about-hero-wrap h2 { margin-bottom: var(--space-md); font-size: clamp(3.2rem,8vw,6.8rem); color: var(--on-dark); }
.about-content-wrap { width: min(100%, 880px); margin: 0 auto; color: var(--shade-40); font-size: 1.08rem; line-height: 1.75; }
.about-content-wrap p { margin-bottom: var(--space-xl); }
.about-features-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-lg); margin: var(--space-huge) 0; }
.about-feature-box, .contact-info-card, .contact-summary-card, .contact-support-tile, .contact-hero-aside { padding: var(--space-xl); }
.about-feature-box i, .contact-card-head i, .contact-support-tile i, .contact-check-item i { color: var(--aloe-10); }
.about-feature-box h4, .contact-card-head h3, .contact-summary-head h3, .contact-support-tile h4 { margin-bottom: var(--space-sm); color: var(--on-dark); font-weight: 550; }
.about-feature-box p, .contact-card-head p, .contact-summary-head p, .contact-support-tile p, .contact-check-item span { color: var(--shade-40); line-height: 1.65; }
.contact-hero { grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); align-items: stretch; margin-bottom: var(--space-xl); }
.contact-hero-copy { padding: var(--space-xl) 0; }
.contact-hero-title { max-width: 900px; margin-bottom: var(--space-lg); color: var(--on-dark); font-size: clamp(3rem,7vw,6rem); line-height: 1; }
.contact-hero-desc { max-width: 760px; margin-bottom: var(--space-xl); color: var(--shade-40); font-size: 1.08rem; line-height: 1.65; }
.contact-hero-highlights { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.contact-highlight-chip { min-height: 38px; padding: 8px 14px; background: var(--surface-elevated-dark); color: var(--on-dark); border: 1px solid var(--hairline-dark); }
.contact-hero-aside { display: grid; align-content: center; gap: var(--space-md); }
.contact-aside-block { padding: var(--space-lg); border-radius: var(--radius-md); background: var(--canvas-night); }
.contact-aside-label, .contact-meta-label { margin-bottom: 4px; color: var(--shade-40); font-size: .75rem; letter-spacing: .72px; text-transform: uppercase; }
.contact-aside-value, .contact-card-body, .contact-value-link, .contact-check-item strong { color: var(--on-dark); overflow-wrap: anywhere; }
.contact-layout { grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); align-items: start; padding-bottom: var(--space-huge); }
.contact-info-stack, .contact-checklist { display: grid; gap: var(--space-md); }
.contact-card-head { display: flex; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-md); }
.contact-card-head i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--surface-elevated-dark); flex: 0 0 auto; }
.contact-card-body { padding-left: 50px; }
.contact-support-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-md); }
.contact-summary-card { position: sticky; top: 102px; }
.contact-check-item { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: var(--space-sm); }

gf-footer { display: block; margin-top: 0; padding: var(--space-huge) 0 var(--space-xxl); background: var(--canvas-night); color: var(--on-dark); border-top: 1px solid var(--hairline-dark); }
.footer-grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; margin-bottom: var(--space-huge); }
.footer-brand h3 { margin-bottom: var(--space-md); }
.footer-desc, .footer-links a, .contact-info-list, .footer-bottom { color: var(--shade-40); }
.footer-links, .contact-info-list { list-style: none; display: grid; gap: var(--space-sm); }
.footer-column h4 { margin-bottom: var(--space-md); color: var(--on-dark); font-weight: 550; }
.footer-column h4::after { display: none; }
.footer-links a { text-decoration: underline; text-underline-offset: 3px; }
.footer-links a:hover { color: var(--on-dark); }
.contact-info-list li { display: flex; gap: var(--space-sm); }
.contact-info-list i { color: var(--aloe-10); margin-top: 3px; }
.footer-bottom { padding-top: var(--space-xl); border-top: 1px solid var(--hairline-dark); font-size: .86rem; }

/* Unified light canvas: keep the Shopifi layout language, remove route-level dark pages. */
body[data-route="home"], body[data-route="about"], body[data-route="contact"] { background: var(--canvas-cream); color: var(--ink); }
body[data-route="home"] .glass-panel, body[data-route="about"] .glass-panel, body[data-route="contact"] .glass-panel { background: var(--canvas-light); border-color: var(--hairline-light); box-shadow: var(--shadow-soft); }
body[data-route="home"] .header-wrapper, body[data-route="about"] .header-wrapper, body[data-route="contact"] .header-wrapper { background: var(--canvas-light); color: var(--ink); border-bottom-color: var(--hairline-light); }
body[data-route="home"] .nav-links a, body[data-route="about"] .nav-links a, body[data-route="contact"] .nav-links a { color: var(--shade-60); }
body[data-route="home"] .action-btn:hover, body[data-route="about"] .action-btn:hover, body[data-route="contact"] .action-btn:hover, body[data-route="home"] .mobile-nav-toggle:hover, body[data-route="about"] .mobile-nav-toggle:hover, body[data-route="contact"] .mobile-nav-toggle:hover { background: rgba(0,0,0,.06); }
body[data-route="home"] .btn-primary, body[data-route="about"] .btn-primary, body[data-route="contact"] .btn-primary { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
body[data-route="home"] .btn-secondary, body[data-route="about"] .btn-secondary, body[data-route="contact"] .btn-secondary { background: var(--canvas-light); color: var(--ink); border-color: var(--ink); }
body[data-route="home"] .section-eyebrow, body[data-route="about"] .section-eyebrow, body[data-route="contact"] .section-eyebrow { color: var(--shade-50); }
body[data-route="home"] .section-title-wrap p, body[data-route="about"] .section-title-wrap p, body[data-route="contact"] .section-title-wrap p { color: var(--shade-60); }
.home-hero-section { background: var(--canvas-cream); }
.home-hero-title, .about-hero-wrap h2, .contact-hero-title { color: var(--ink); }
.home-hero-desc, .home-metric-card span, .home-category-tag, .home-category-card p, .home-usecase-intro p, .home-usecase-card p, .about-content-wrap, .about-feature-box p, .contact-card-head p, .contact-summary-head p, .contact-support-tile p, .contact-check-item span, .contact-hero-desc { color: var(--shade-60); }
.home-hero-badge { background: var(--canvas-light); color: var(--shade-60); border-color: var(--hairline-light); }
.home-spotlight-shell { background: transparent; }
.home-showcase-primary, .home-showcase-secondary { background: var(--canvas-light); box-shadow: var(--shadow-soft); }
.home-showcase-secondary { border-color: var(--hairline-light); }
.home-metrics-grid { background: var(--hairline-light); border-top-color: var(--hairline-light); }
.home-metric-card { background: var(--canvas-light); color: var(--ink); }
.home-metric-card strong { color: var(--ink); }
body[data-route="home"] .home-section:nth-of-type(even), body[data-route="home"] .home-section:nth-of-type(odd) { background: var(--canvas-cream); }
.home-category-card { background: var(--canvas-light); border-color: var(--hairline-light); color: var(--ink); box-shadow: var(--shadow-soft); }
.home-category-link { color: var(--ink); }
.home-usecase-band { background: var(--pistachio-10); color: var(--ink); }
.home-usecase-card { background: var(--canvas-light); border-color: rgba(0,0,0,.08); }
.about-feature-box h4, .contact-card-head h3, .contact-summary-head h3, .contact-support-tile h4 { color: var(--ink); }
.contact-highlight-chip { background: var(--canvas-light); color: var(--ink); border-color: var(--hairline-light); }
.contact-aside-block { background: var(--canvas-cream); }
.contact-card-head i { background: var(--aloe-10); color: var(--ink); }
.contact-aside-value, .contact-card-body, .contact-value-link, .contact-check-item strong { color: var(--ink); }
gf-footer { background: var(--canvas-light); color: var(--ink); border-top-color: var(--hairline-light); }
.footer-desc, .footer-links a, .contact-info-list, .footer-bottom { color: var(--shade-60); }
.footer-column h4 { color: var(--ink); }
.footer-links a:hover { color: var(--ink); }
.footer-bottom { border-top-color: var(--hairline-light); }

/* Home layout refinement: editorial light hero and bento category board. */
body[data-route="home"] main { margin-top: 78px; }
.home-hero-section { min-height: auto; padding: clamp(64px,8vw,104px) 0 clamp(48px,7vw,80px); align-items: center; }
.home-hero-grid { align-items: center; gap: clamp(28px,5vw,72px); }
.home-hero-title { font-size: clamp(3.8rem,7vw,6.4rem); }
.home-spotlight-shell, .home-showcase-stage { min-height: clamp(420px,48vw,600px); }
.home-metrics-grid { margin-top: clamp(32px,5vw,56px); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.home-section { padding: clamp(56px,8vw,96px) 0; }
.home-categories-section { padding-top: clamp(64px,9vw,112px); }
.home-categories-shell { display: grid; grid-template-columns: minmax(260px,4fr) minmax(0,8fr); gap: clamp(28px,5vw,72px); align-items: start; }
.home-categories-intro { position: sticky; top: 112px; align-self: start; padding: var(--space-xl) 0; }
.home-categories-intro h2 { max-width: 11ch; font-size: clamp(3rem,5.6vw,5.4rem); line-height: .98; }
.home-categories-intro p { max-width: 34ch; font-size: 1.05rem; line-height: 1.65; }
.home-categories-all { margin-top: var(--space-xl); }
.home-categories-board { min-width: 0; padding: var(--space-md); border-radius: var(--radius-xl); background: var(--pistachio-10); }
.home-categories-board .home-category-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--space-md); }
.home-categories-board .home-category-card, .home-categories-board .home-category-card:nth-child(1), .home-categories-board .home-category-card:nth-child(2) { grid-column: span 3; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; background: var(--canvas-light); border-color: rgba(0,0,0,.08); color: var(--ink); box-shadow: none; }
.home-categories-board .home-category-card.featured { min-height: 440px; }
.home-categories-board .home-category-card.compact { grid-column: span 3; min-height: 248px; grid-template-columns: minmax(0,1.1fr) minmax(120px,.9fr); grid-template-rows: 1fr; }
.home-categories-board .home-category-copy { display: flex; min-width: 0; flex-direction: column; padding: clamp(18px,2.4vw,28px); }
.home-categories-board .home-category-topline { margin-bottom: auto; }
.home-categories-board .home-category-tag { color: var(--shade-50); }
.home-categories-board .home-category-card h3 { margin-top: var(--space-lg); font-size: clamp(1.9rem,3.6vw,3.4rem); overflow-wrap: anywhere; }
.home-categories-board .home-category-card.compact h3 { font-size: clamp(1.35rem,2.4vw,2rem); line-height: 1.08; }
.home-categories-board .home-category-card p { max-width: 34ch; color: var(--shade-60); }
.home-categories-board .home-category-card.compact p { display: none; }
.home-categories-board .home-category-link { width: fit-content; margin-top: var(--space-lg); padding: 8px 14px; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-dark); font-size: .9rem; }
.home-categories-board .home-category-media { min-height: 190px; background: var(--canvas-cream); }
.home-categories-board .home-category-card.featured .home-category-media { min-height: 230px; }
.home-categories-board .home-category-card.compact .home-category-media { min-height: 100%; height: 100%; order: 2; }
.home-categories-board .home-category-media img { object-fit: contain; padding: var(--space-lg); mix-blend-mode: multiply; }
.home-categories-board .home-category-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }

.toast-container { position: fixed; top: 22px; right: 22px; z-index: 300; width: min(380px, calc(100vw - 32px)); display: grid; gap: var(--space-sm); }
.toast { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); background: var(--canvas-light); color: var(--ink); border: 1px solid var(--hairline-light); box-shadow: var(--shadow-modal); animation: slideInLeft 240ms var(--ease-smooth); }
.toast.success { border-left: 5px solid var(--success); }
.toast.error { border-left: 5px solid var(--danger); }
@keyframes slideInLeft { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

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

@media (max-width: 1200px) {
    .products-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .home-hero-grid, .detail-layout, .checkout-layout { grid-template-columns: 1fr; }
    .checkout-summary { position: static; }
    .home-showcase-primary { right: 0; }
}

@media (max-width: 900px) {
    main { margin-top: 70px; }
    .container { width: min(100% - 32px, 1440px); }
    .header-wrapper { height: 70px; }
    .nav-links { position: absolute; top: calc(100% + 8px); left: 16px; right: 16px; display: none; flex-direction: column; align-items: stretch; gap: 4px; padding: var(--space-sm); border-radius: var(--radius-lg); background: var(--canvas-light); color: var(--ink); border: 1px solid var(--hairline-light); box-shadow: var(--shadow-modal); }
    .nav-links.mobile-open { display: flex; }
    .nav-links a, body[data-route="home"] .nav-links a, body[data-route="about"] .nav-links a, body[data-route="contact"] .nav-links a { color: var(--ink); padding: 12px 14px; border-radius: var(--radius-md); }
    .nav-links a.active { background: var(--aloe-10); }
    .mobile-nav-toggle { display: inline-flex; }
    .home-hero-section { min-height: auto; padding-top: 104px; }
    .home-spotlight-shell, .home-showcase-stage { min-height: 520px; }
    .home-showcase-primary { inset: 0 0 140px 0; border-radius: var(--radius-xl); }
    .home-showcase-secondary { right: 18px; width: 72%; }
    .home-category-card, .home-category-card:nth-child(1), .home-category-card:nth-child(2) { grid-column: span 6; }
    .home-usecase-band, .contact-hero, .contact-layout, .account-layout, .reviews-container, .footer-grid, .catalog-layout { grid-template-columns: 1fr; }
    .home-usecase-grid, .contact-support-grid { grid-template-columns: 1fr; }
    .filters-sidebar, .contact-summary-card { position: static; }
    .products-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 600px) {
    .container { width: min(100% - 24px, 1440px); }
    .logo-container { max-width: calc(100vw - 170px); font-size: 1.15rem; }
    .logo-container span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .header-actions { gap: 2px; }
    .action-btn, .mobile-nav-toggle { width: 38px; height: 38px; }
    .home-hero-title { font-size: clamp(3.2rem,16vw,4.1rem); letter-spacing: 0; }
    .home-hero-cta-row, .home-hero-badges, .buy-buttons { flex-direction: column; align-items: stretch; }
    .home-hero-cta-row .btn, .buy-buttons .btn { width: 100%; }
    .home-spotlight-shell, .home-showcase-stage { min-height: 420px; }
    .home-showcase-primary { inset: 0 0 118px 0; }
    .home-showcase-secondary { right: 10px; width: 78%; }
    .home-metrics-grid, .home-category-grid, .form-grid-2 { grid-template-columns: 1fr; }
    .gallery-thumbs { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .home-category-card, .home-category-card:nth-child(1), .home-category-card:nth-child(2) { grid-column: 1; min-height: 380px; }
    .section-header, .catalog-toolbar, .order-card-header, .summary-item-meta { flex-direction: column; align-items: flex-start; }
    .products-grid { gap: var(--space-sm); }
    .prod-card { border-radius: var(--radius-md); }
    .card-info { padding: var(--space-md); }
    .card-title { font-size: .86rem; min-height: 4.8em; }
    .card-category, .rating-num, .price-original { font-size: .72rem; }
    .card-footer { align-items: flex-end; }
    .card-add-btn { width: 36px; height: 36px; }
    .detail-title { font-size: clamp(2rem,11vw,3rem); }
    .gallery-main-wrap { aspect-ratio: 1 / 1.05; }
    .tabs-nav { overflow-x: auto; }
    .specs-table, .specs-table tbody, .specs-table tr, .specs-table td { display: block; width: 100%; }
    .specs-table td { padding: 12px 14px; }
    .cart-item-row { grid-template-columns: 84px minmax(0,1fr); }
    .cart-item-img { width: 84px; height: 84px; }
    .cart-item-meta, .cart-summary-line { align-items: flex-start; flex-direction: column; }
    .cart-item-actions { width: 100%; justify-content: space-between; margin-left: 0; }
    .cart-item-remove-mobile { display: inline-flex; }
    .cart-item-actions .cart-item-remove { display: none; }
    .checkout-card, .checkout-summary, .auth-container, .account-menu, .order-card, .legal-wrapper, .success-card, .modal-container, .home-usecase-band { padding: var(--space-lg); }
    .summary-item-row { grid-template-columns: 60px minmax(0,1fr); }
    .summary-item-image { width: 60px; height: 60px; }
    .contact-card-body { padding-left: 0; }
    .about-features-grid { grid-template-columns: 1fr; }
    .toast-container { top: 12px; right: 12px; width: calc(100vw - 24px); }
}

@media (max-width: 900px) {
    body[data-route="home"] main { margin-top: 70px; }
    .home-hero-section { padding-top: 48px; }
    .home-categories-shell { grid-template-columns: 1fr; gap: var(--space-xl); }
    .home-categories-intro { position: static; padding: 0; }
    .home-categories-intro h2 { max-width: 13ch; }
    .home-categories-board .home-category-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .home-categories-board .home-category-card, .home-categories-board .home-category-card:nth-child(1), .home-categories-board .home-category-card:nth-child(2), .home-categories-board .home-category-card.featured, .home-categories-board .home-category-card.compact { grid-column: auto; min-height: 300px; grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; }
    .home-categories-board .home-category-card.compact .home-category-media { min-height: 160px; height: auto; order: initial; }
    .home-categories-board .home-category-card.compact p { display: block; }
}

@media (max-width: 600px) {
    .home-hero-section { padding-top: 36px; padding-bottom: var(--space-xl); }
    .home-hero-title { font-size: clamp(3rem,15vw,4rem); }
    .home-spotlight-shell, .home-showcase-stage { min-height: 360px; }
    .home-categories-section { padding-top: var(--space-huge); }
    .home-categories-intro h2 { max-width: none; font-size: clamp(2.4rem,11vw,3.3rem); }
    .home-categories-board { padding: var(--space-sm); border-radius: var(--radius-lg); }
    .home-categories-board .home-category-grid { grid-template-columns: 1fr; gap: var(--space-sm); }
    .home-categories-board .home-category-card, .home-categories-board .home-category-card:nth-child(1), .home-categories-board .home-category-card:nth-child(2), .home-categories-board .home-category-card.featured, .home-categories-board .home-category-card.compact { min-height: 0; }
    .home-categories-board .home-category-copy { padding: var(--space-lg); }
    .home-categories-board .home-category-topline { margin-bottom: var(--space-xl); }
    .home-categories-board .home-category-card h3, .home-categories-board .home-category-card.compact h3 { font-size: clamp(1.7rem,8vw,2.35rem); }
    .home-categories-board .home-category-media, .home-categories-board .home-category-card.featured .home-category-media, .home-categories-board .home-category-card.compact .home-category-media { min-height: 180px; }
}

/* Focused refinement for the home category bento board. */
.home-categories-shell { grid-template-columns: minmax(260px,3.6fr) minmax(0,8.4fr); gap: clamp(40px,5.6vw,86px); }
.home-categories-intro { padding-top: clamp(20px,3vw,44px); }
.home-categories-intro h2 { max-width: 12ch; font-size: clamp(3.2rem,5vw,5rem); line-height: 1.02; letter-spacing: -1.6px; }
.home-categories-intro p { max-width: 32ch; margin-top: var(--space-xl); }
.home-categories-board { padding: var(--space-sm); border: 1px solid rgba(0,0,0,.06); border-radius: var(--radius-xl); background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(251,251,245,.96)); box-shadow: 0 18px 48px rgba(0,0,0,.06), inset 0 0 0 1px rgba(255,255,255,.82); }
.home-categories-board .home-category-grid { grid-template-columns: repeat(8, minmax(0,1fr)); grid-auto-flow: dense; gap: var(--space-sm); }
.home-categories-board .home-category-card, .home-categories-board .home-category-card:nth-child(1), .home-categories-board .home-category-card:nth-child(2), .home-categories-board .home-category-card.hero, .home-categories-board .home-category-card.featured, .home-categories-board .home-category-card.compact { position: relative; isolation: isolate; min-height: 0; grid-column: span 4; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); overflow: hidden; border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius-lg); background: var(--canvas-light); box-shadow: none; transform: none; }
.home-categories-board .home-category-card.hero { grid-column: span 5; min-height: 440px; background: var(--canvas-light); }
.home-categories-board .home-category-card.featured { grid-column: span 3; min-height: 440px; background: var(--canvas-light); }
.home-categories-board .home-category-card.compact { grid-column: span 4; min-height: 208px; grid-template-columns: minmax(0,1.2fr) minmax(118px,.8fr); grid-template-rows: 1fr; background: var(--canvas-light); }
.home-categories-board .home-category-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 85% 92%, rgba(193,251,212,.45), transparent 34%); opacity: .9; }
.home-categories-board .home-category-copy { position: relative; z-index: 1; padding: clamp(18px,2vw,26px); }
.home-categories-board .home-category-topline { margin-bottom: var(--space-lg); align-items: flex-start; }
.home-categories-board .home-category-icon { width: 34px; height: 34px; }
.home-categories-board .home-category-count { padding: 5px 10px; background: var(--canvas-cream); border: 1px solid var(--hairline-light); color: var(--shade-60); font-size: .72rem; }
.home-categories-board .home-category-tag { margin-bottom: var(--space-sm); color: var(--shade-50); font-size: .68rem; line-height: 1.25; }
.home-categories-board .home-category-card h3 { max-width: 9.5ch; margin: 0 0 var(--space-md); font-size: clamp(2rem,3vw,3rem); line-height: 1.02; letter-spacing: -.8px; }
.home-categories-board .home-category-card.featured h3 { font-size: clamp(1.9rem,2.6vw,2.65rem); }
.home-categories-board .home-category-card.compact h3 { max-width: 11ch; font-size: clamp(1.35rem,1.8vw,1.8rem); line-height: 1.08; }
.home-categories-board .home-category-card p { max-width: 26ch; margin-bottom: var(--space-md); color: var(--shade-60); font-size: .92rem; line-height: 1.55; }
.home-categories-board .home-category-card.compact p { display: none; }
.home-categories-board .home-category-link { min-height: 30px; width: fit-content; margin-top: auto; padding: 6px 11px; background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.10); color: var(--ink); font-size: .78rem; font-weight: 650; }
.home-categories-board .home-category-link i { width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-dark); font-size: .68rem; }
.home-categories-board .home-category-media { align-self: end; min-height: 210px; background: linear-gradient(180deg, var(--canvas-cream), #f7f7ef); border-top: 1px solid rgba(0,0,0,.04); }
.home-categories-board .home-category-card.hero .home-category-media { min-height: 236px; }
.home-categories-board .home-category-card.featured .home-category-media { min-height: 244px; }
.home-categories-board .home-category-card.compact .home-category-media { height: 100%; min-height: 100%; order: 2; border-top: 0; border-left: 1px solid rgba(0,0,0,.04); }
.home-categories-board .home-category-media img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; padding: 10px 12px; mix-blend-mode: multiply; }
.home-categories-board .home-category-card.hero .home-category-media img { padding: 2px 6px 0; transform: scale(1.04); }
.home-categories-board .home-category-card.featured .home-category-media img { padding: 4px 8px 0; transform: scale(.96); }
.home-categories-board .home-category-card.compact .home-category-media img { padding: var(--space-sm); transform: scale(.96); }
.home-categories-board .home-category-card:hover { border-color: rgba(0,0,0,.16); box-shadow: 0 14px 34px rgba(0,0,0,.08); transform: translateY(-2px); }
.home-categories-board .home-category-card:hover .home-category-media img { transform: scale(1); }
.home-categories-board .home-category-card.hero:hover .home-category-media img { transform: scale(1.07); }

@media (max-width: 1100px) {
    .home-categories-shell { grid-template-columns: 1fr; gap: var(--space-xl); }
    .home-categories-intro { position: static; padding-top: 0; }
    .home-categories-intro h2 { max-width: 14ch; }
}

@media (max-width: 900px) {
    .home-categories-board .home-category-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .home-categories-board .home-category-card, .home-categories-board .home-category-card:nth-child(1), .home-categories-board .home-category-card:nth-child(2), .home-categories-board .home-category-card.hero, .home-categories-board .home-category-card.featured, .home-categories-board .home-category-card.compact { grid-column: auto; min-height: 300px; grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
    .home-categories-board .home-category-card.compact p { display: block; }
    .home-categories-board .home-category-card.compact .home-category-media { min-height: 168px; height: auto; order: initial; border-left: 0; border-top: 1px solid rgba(0,0,0,.04); }
}

@media (max-width: 600px) {
    .home-categories-intro h2 { max-width: none; font-size: clamp(2.55rem,11vw,3.35rem); letter-spacing: -1px; }
    .home-categories-board { padding: 6px; border-radius: var(--radius-lg); }
    .home-categories-board .home-category-grid { grid-template-columns: 1fr; gap: 6px; }
    .home-categories-board .home-category-card, .home-categories-board .home-category-card:nth-child(1), .home-categories-board .home-category-card:nth-child(2), .home-categories-board .home-category-card.hero, .home-categories-board .home-category-card.featured, .home-categories-board .home-category-card.compact { min-height: 0; }
    .home-categories-board .home-category-card h3, .home-categories-board .home-category-card.featured h3, .home-categories-board .home-category-card.compact h3 { max-width: 12ch; font-size: clamp(1.75rem,8vw,2.35rem); }
    .home-categories-board .home-category-card.hero .home-category-media, .home-categories-board .home-category-card.featured .home-category-media, .home-categories-board .home-category-card.compact .home-category-media, .home-categories-board .home-category-media { min-height: 176px; }
}

/* Compact the top category cards so they match the lower bento cards visually. */
.home-categories-board .home-category-card.hero,
.home-categories-board .home-category-card.featured {
    min-height: 272px;
}

.home-categories-board .home-category-card.hero {
    grid-column: span 5;
}

.home-categories-board .home-category-card.featured {
    grid-column: span 3;
}

.home-categories-board .home-category-card.hero .home-category-copy,
.home-categories-board .home-category-card.featured .home-category-copy {
    padding: 18px;
}

.home-categories-board .home-category-card.hero .home-category-topline,
.home-categories-board .home-category-card.featured .home-category-topline {
    margin-bottom: var(--space-md);
}

.home-categories-board .home-category-card.hero h3,
.home-categories-board .home-category-card.featured h3 {
    max-width: 10.5ch;
    margin-bottom: var(--space-sm);
    font-size: clamp(1.65rem,2.15vw,2.2rem);
    line-height: 1.04;
}

.home-categories-board .home-category-card.hero p,
.home-categories-board .home-category-card.featured p {
    display: -webkit-box;
    max-width: 28ch;
    margin-bottom: var(--space-sm);
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: .84rem;
    line-height: 1.45;
}

.home-categories-board .home-category-card.hero .home-category-link,
.home-categories-board .home-category-card.featured .home-category-link {
    min-height: 28px;
    padding: 5px 10px;
    font-size: .74rem;
}

.home-categories-board .home-category-card.hero .home-category-media,
.home-categories-board .home-category-card.featured .home-category-media {
    min-height: 138px;
}

.home-categories-board .home-category-card.hero .home-category-media img {
    padding: 4px 10px 0;
    transform: scale(.88);
}

.home-categories-board .home-category-card.featured .home-category-media img {
    padding: 8px 12px 0;
    transform: scale(.82);
}

.home-categories-board .home-category-card.hero:hover .home-category-media img,
.home-categories-board .home-category-card.featured:hover .home-category-media img {
    transform: scale(.9);
}

@media (max-width: 900px) {
    .home-categories-board .home-category-card,
    .home-categories-board .home-category-card:nth-child(1),
    .home-categories-board .home-category-card:nth-child(2),
    .home-categories-board .home-category-card.hero,
    .home-categories-board .home-category-card.featured,
    .home-categories-board .home-category-card.compact {
        min-height: 238px;
    }

    .home-categories-board .home-category-card.hero .home-category-media,
    .home-categories-board .home-category-card.featured .home-category-media,
    .home-categories-board .home-category-card.compact .home-category-media,
    .home-categories-board .home-category-media {
        min-height: 128px;
    }
}

@media (max-width: 600px) {
    .home-categories-board .home-category-card,
    .home-categories-board .home-category-card:nth-child(1),
    .home-categories-board .home-category-card:nth-child(2),
    .home-categories-board .home-category-card.hero,
    .home-categories-board .home-category-card.featured,
    .home-categories-board .home-category-card.compact {
        min-height: 0;
    }

    .home-categories-board .home-category-card.hero h3,
    .home-categories-board .home-category-card.featured h3,
    .home-categories-board .home-category-card.compact h3 {
        font-size: clamp(1.45rem,7vw,2rem);
    }

    .home-categories-board .home-category-card.hero .home-category-media,
    .home-categories-board .home-category-card.featured .home-category-media,
    .home-categories-board .home-category-card.compact .home-category-media,
    .home-categories-board .home-category-media {
        min-height: 136px;
    }
}

/* Final equalization: make the first two categories close to the compact cards. */
.home-categories-board .home-category-card.hero,
.home-categories-board .home-category-card.featured {
    min-height: 220px;
    grid-template-rows: auto 116px;
}

.home-categories-board .home-category-card.compact {
    min-height: 200px;
}

.home-categories-board .home-category-card.hero .home-category-copy,
.home-categories-board .home-category-card.featured .home-category-copy {
    padding: 14px 16px;
}

.home-categories-board .home-category-card.hero .home-category-topline,
.home-categories-board .home-category-card.featured .home-category-topline {
    margin-bottom: 10px;
}

.home-categories-board .home-category-card.hero h3,
.home-categories-board .home-category-card.featured h3 {
    max-width: 12ch;
    margin-bottom: 6px;
    font-size: clamp(1.45rem,1.8vw,1.75rem);
    line-height: 1.05;
    letter-spacing: -.4px;
}

.home-categories-board .home-category-card.hero p,
.home-categories-board .home-category-card.featured p {
    max-width: 30ch;
    margin-bottom: 8px;
    -webkit-line-clamp: 2;
    font-size: .78rem;
    line-height: 1.4;
}

.home-categories-board .home-category-card.hero .home-category-link,
.home-categories-board .home-category-card.featured .home-category-link {
    min-height: 26px;
    padding: 4px 9px;
    font-size: .7rem;
}

.home-categories-board .home-category-card.hero .home-category-link i,
.home-categories-board .home-category-card.featured .home-category-link i {
    width: 18px;
    height: 18px;
    font-size: .62rem;
}

.home-categories-board .home-category-card.hero .home-category-media,
.home-categories-board .home-category-card.featured .home-category-media {
    min-height: 116px;
}

.home-categories-board .home-category-card.hero .home-category-media img,
.home-categories-board .home-category-card.featured .home-category-media img {
    padding: 8px 12px 0;
    transform: scale(.76);
}

.home-categories-board .home-category-card.hero:hover .home-category-media img,
.home-categories-board .home-category-card.featured:hover .home-category-media img {
    transform: scale(.8);
}

@media (max-width: 900px) {
    .home-categories-board .home-category-card,
    .home-categories-board .home-category-card:nth-child(1),
    .home-categories-board .home-category-card:nth-child(2),
    .home-categories-board .home-category-card.hero,
    .home-categories-board .home-category-card.featured,
    .home-categories-board .home-category-card.compact {
        min-height: 220px;
    }

    .home-categories-board .home-category-card.hero,
    .home-categories-board .home-category-card.featured {
        grid-template-rows: auto 118px;
    }

    .home-categories-board .home-category-card.hero .home-category-media,
    .home-categories-board .home-category-card.featured .home-category-media,
    .home-categories-board .home-category-card.compact .home-category-media,
    .home-categories-board .home-category-media {
        min-height: 118px;
    }
}

@media (max-width: 600px) {
    .home-categories-board .home-category-card,
    .home-categories-board .home-category-card:nth-child(1),
    .home-categories-board .home-category-card:nth-child(2),
    .home-categories-board .home-category-card.hero,
    .home-categories-board .home-category-card.featured,
    .home-categories-board .home-category-card.compact {
        min-height: 0;
    }

    .home-categories-board .home-category-card.hero,
    .home-categories-board .home-category-card.featured {
        grid-template-rows: auto 120px;
    }

    .home-categories-board .home-category-card.hero .home-category-media,
    .home-categories-board .home-category-card.featured .home-category-media,
    .home-categories-board .home-category-card.compact .home-category-media,
    .home-categories-board .home-category-media {
        min-height: 120px;
    }
}

/* Category image containment and product detail title polish. */
.home-categories-board .home-category-card.hero,
.home-categories-board .home-category-card.featured {
    grid-template-columns: minmax(0,1fr) minmax(108px,.72fr);
    grid-template-rows: 1fr;
}

.home-categories-board .home-category-card.hero .home-category-copy,
.home-categories-board .home-category-card.featured .home-category-copy {
    min-width: 0;
    padding: 16px 14px 14px 18px;
}

.home-categories-board .home-category-card.hero .home-category-media,
.home-categories-board .home-category-card.featured .home-category-media {
    align-self: stretch;
    height: 100%;
    min-height: 0;
    order: 2;
    border-top: 0;
    border-left: 1px solid rgba(0,0,0,.04);
    background: linear-gradient(180deg, #ffffff, var(--canvas-cream));
}

.home-categories-board .home-category-card.hero .home-category-media img,
.home-categories-board .home-category-card.featured .home-category-media img {
    max-height: 100%;
    object-position: center;
    padding: 10px;
    transform: scale(.78);
}

.home-categories-board .home-category-card.hero:hover .home-category-media img,
.home-categories-board .home-category-card.featured:hover .home-category-media img {
    transform: scale(.82);
}

.home-categories-board .home-category-card.hero h3,
.home-categories-board .home-category-card.featured h3 {
    max-width: 11ch;
}

.detail-info {
    padding-top: var(--space-md);
}

.detail-category-wrap {
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.detail-title {
    max-width: 820px;
    margin-bottom: var(--space-md);
    font-size: clamp(1.9rem,3vw,3.1rem);
    line-height: 1.12;
    letter-spacing: -.6px;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.detail-rating-line {
    margin-bottom: var(--space-md);
}

.detail-price-line {
    margin-bottom: var(--space-lg);
}

@media (max-width: 900px) {
    .home-categories-board .home-category-card.hero,
    .home-categories-board .home-category-card.featured {
        grid-template-columns: minmax(0,1fr) minmax(104px,.62fr);
        grid-template-rows: 1fr;
    }

    .home-categories-board .home-category-card.hero .home-category-media,
    .home-categories-board .home-category-card.featured .home-category-media {
        min-height: 0;
    }

    .detail-title {
        font-size: clamp(1.75rem,5vw,2.6rem);
    }
}

@media (max-width: 600px) {
    .home-categories-board .home-category-card.hero,
    .home-categories-board .home-category-card.featured {
        grid-template-columns: minmax(0,1fr) minmax(96px,.58fr);
        grid-template-rows: 1fr;
    }

    .home-categories-board .home-category-card.hero .home-category-media,
    .home-categories-board .home-category-card.featured .home-category-media {
        min-height: 0;
    }

    .home-categories-board .home-category-card.hero .home-category-media img,
    .home-categories-board .home-category-card.featured .home-category-media img {
        padding: 8px;
        transform: scale(.74);
    }

    .detail-title {
        margin-bottom: var(--space-sm);
        font-size: clamp(1.45rem,7vw,2rem);
        line-height: 1.16;
        letter-spacing: -.3px;
    }
}