/* ── RESET & VARIABLES ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: clip; }
::selection { background: var(--gold); color: white; }
*:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.skip-nav { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 10001; background: var(--stone-900); color: #fff; padding: 0.75rem 1.5rem; font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; text-decoration: none; border-radius: 0 0 var(--radius-md) 0; }
.skip-nav:focus { position: fixed; left: 0; top: 0; width: auto; height: auto; }
:root {
  --stone-50: #fafaf9; --stone-100: #f5f5f4; --stone-200: #e7e5e4;
  --stone-300: #d6d3d1; --stone-400: #a8a29e; --stone-500: #78716c;
  --stone-600: #57534e; --stone-700: #44403c; --stone-800: #1c1917; --stone-900: #1c1917;
  --gold: #a87935; --gold-light: #c9a668; --sage: #87996b; --terracotta: #c87e5a;
  --gold-dark: #8f6628; --cream: #faf8f5; --charcoal: #2a2523;
  --warm-bg: #ece5d8; --warm-muted: #8a7e68;
  --sage-light: #a3b48e; --sage-dark: #6b7f55; --terracotta-light: #d99570; --terracotta-dark: #b06a45;
  --cream-warm: #f8f5f0; --cream-cool: #f5f5f2;
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --roma-serif: 'Cormorant Garamond', Georgia, serif;
  --roma-sans: 'Inter', system-ui, sans-serif;
  --color-rose: #e11d48;
  --color-rose-dark: #a04438;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.14);
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-reveal: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-editorial: 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  --section-gap-lg: 7rem; --section-gap-md: 5rem; --section-gap-sm: 3.5rem;
  --max-width: 1400px;
  --utility-bar-height: 32px;
  --header-main-height: 58px;
  --header-height: calc(var(--utility-bar-height) + var(--header-main-height));
  --header-height-mobile: 56px;
  --fade-up-distance: 30px;
  --fade-duration: 0.7s;
  /* Border radius */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 50%;
  /* Status colors */
  --color-success: #166534; --color-success-bg: #dcfce7;
  --color-warning: #92400e; --color-warning-bg: #fef3c7;
  --color-error: #991b1b; --color-error-bg: #fee2e2;
  --color-info: #1e40af; --color-info-bg: #dbeafe;
  /* Z-index scale */
  --z-dropdown: 100; --z-sticky: 200; --z-overlay: 500; --z-drawer: 501;
  --z-modal: 600; --z-modal-overlay: 1000; --z-trade-modal: 1100;
  --z-toast: 1200; --z-external: 10000;
}
body { font-family: var(--font-body); background: var(--warm-bg); color: var(--stone-800); overflow-x: clip; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--stone-400); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--stone-500); }

/* ── SKIP LINK ── */
.skip-link { position: absolute; top: -100%; left: 1rem; background: var(--stone-900); color: white; padding: 0.75rem 1.5rem; z-index: calc(var(--z-toast) + 1); font-size: 0.875rem; text-decoration: none; transition: top 0.2s; }
.skip-link:focus { top: 0.5rem; }

/* ── HEADER (Two Row) ── */
header { background: var(--warm-bg); position: sticky; top: 0; z-index: var(--z-dropdown); border-bottom: 0.5px solid rgba(21,18,15,0.07); }

/* Home page: transparent header overlaying the full-viewport hero at the top */
header.header--home { position: fixed; left: 0; right: 0; top: 0; background: transparent; transition: background 0.3s ease, box-shadow 0.3s ease; }
header.header--home:not(.scrolled) .utility-bar { background: transparent; color: #fff; border-bottom-color: rgba(255,255,255,0.18); }
header.header--home:not(.scrolled) .utility-bar-left,
header.header--home:not(.scrolled) .utility-bar-left span,
header.header--home:not(.scrolled) .utility-bar-dot { color: #fff; }
header.header--home:not(.scrolled) .utility-bar-phone { color: rgba(255,255,255,0.92); }
header.header--home:not(.scrolled) { border-bottom-color: rgba(255,255,255,0.18); }
header.header--home:not(.scrolled) .logo-text,
header.header--home:not(.scrolled) .logo-wordmark,
header.header--home:not(.scrolled) .logo-wordmark em,
header.header--home:not(.scrolled) .logo-script { color: #fff; }
header.header--home:not(.scrolled) .header-nav-btn { color: rgba(255,255,255,0.88); }
header.header--home:not(.scrolled) .header-nav-btn:hover,
header.header--home:not(.scrolled) .header-nav-btn.active { color: #fff; }
header.header--home:not(.scrolled) .header-action-btn,
header.header--home:not(.scrolled) .mobile-menu-btn,
header.header--home:not(.scrolled) .mobile-search-btn { color: rgba(255,255,255,0.9); }
header.header--home:not(.scrolled) .header-action-btn:hover { color: #fff; }
header.header--home:not(.scrolled) .header-search input { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); color: #fff; }
header.header--home:not(.scrolled) .header-search input::placeholder { color: rgba(255,255,255,0.7); }
header.header--home:not(.scrolled) .header-search-icon { color: rgba(255,255,255,0.7); }
header.header--home.scrolled { background: var(--warm-bg); box-shadow: 0 2px 16px rgba(21,18,15,0.08); }

/* Utility Bar (Row 1) */
.utility-bar { background: #ece5d8; color: var(--stone-600); font-size: 0.6875rem; letter-spacing: 0.04em; height: var(--utility-bar-height); border-bottom: 0.5px solid rgba(21,18,15,0.07); }
.utility-bar-inner { display: flex; align-items: center; justify-content: space-between; height: var(--utility-bar-height); padding: 0 4rem; max-width: var(--max-width); margin: 0 auto; }
.utility-bar-left { display: flex; align-items: center; gap: 0.35rem; font-size: 0.6875rem; color: var(--stone-500); }
.utility-bar-right { display: flex; align-items: center; gap: 1.25rem; }
.utility-bar a, .utility-bar button { color: var(--stone-600); text-decoration: none; background: none; border: none; cursor: pointer; font-size: 0.6875rem; font-family: var(--font-body); letter-spacing: 0.04em; transition: color 0.2s; padding: 0; line-height: 1; }
.utility-bar a:hover, .utility-bar button:hover { color: var(--stone-900); }
.utility-bar-phone { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 500; }
.utility-bar-phone svg { width: 11px; height: 11px; opacity: 0.6; }
.utility-bar-dot { color: var(--stone-400); font-size: 0.375rem; line-height: 1; }
.utility-bar-consult { color: var(--gold-dark) !important; font-weight: 500; }

/* Main Header (Row 2) — CSS Grid: logo | nav | actions */
.header-main { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2.5rem; height: var(--header-main-height); padding: 0 4rem; max-width: var(--max-width); margin: 0 auto; }
.header-main-left { display: flex; align-items: center; gap: 0.75rem; }
.header-main-right { display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; }
.logo { cursor: pointer; display: flex; align-items: center; justify-content: center; }
.logo img { height: 38px; width: auto; display: block; }
.logo-text { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; padding-bottom: 0.34em; user-select: none; }
.logo-wordmark { font-family: var(--font-heading); font-weight: 400; font-size: 1.5rem; letter-spacing: 0.34em; text-indent: 0.34em; color: var(--stone-900); white-space: nowrap; }
.logo-wordmark em { font-style: normal; font-size: 1em; letter-spacing: normal; text-indent: 0; color: var(--stone-900); }
.logo-script { font-family: 'Pinyon Script', 'Cormorant Garamond', cursive; font-size: 2.05rem; line-height: 1; color: var(--gold); margin-top: -0.30em; align-self: center; white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.header-action-btn { background: none; border: none; cursor: pointer; color: var(--stone-500); display: flex; align-items: center; justify-content: center; position: relative; transition: color var(--transition-base); -webkit-tap-highlight-color: transparent; min-width: 40px; min-height: 40px; }
.header-action-btn:hover { color: var(--stone-900); }
.header-action-btn svg { width: 20px; height: 20px; }

/* Header Nav (centered in main bar) */
.header-nav { display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
.header-nav-btn { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--stone-600); padding: 0.5rem 0.875rem; position: relative; transition: color 0.2s; white-space: nowrap; }
.header-nav-btn::after { content: ''; position: absolute; bottom: 0; left: 0.875rem; right: 0.875rem; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: center; transition: transform 0.22s cubic-bezier(0.25, 0.1, 0.25, 1); }
.header-nav-btn:hover { color: var(--stone-900); }
.header-nav-btn:hover::after, .header-nav-btn.active::after { transform: scaleX(1); }

/* Mega Panel */
@keyframes megaPanelIn { from { transform: translateY(-6px); } to { transform: translateY(0); } }
@keyframes pdpFadeIn { from { opacity: 0; } to { opacity: 1; } }
.mega-panel { position: absolute; top: 100%; left: 0; right: 0; background: var(--warm-bg); box-shadow: 0 12px 40px rgba(21,18,15,0.12); z-index: var(--z-overlay); animation: megaPanelIn 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) both; border-top: 0.5px solid rgba(21,18,15,0.07); max-height: calc(100vh - 90px); overflow-y: auto; }
.mega-panel-inner { max-width: var(--max-width); margin: 0 auto; padding: 2rem 3rem 2.5rem; }
.mega-panel-grid { display: grid; gap: 2rem; }
.mega-panel-grid--shop { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 1.5rem 2rem; }
.mega-panel-col { min-width: 0; }
.mega-panel-col-title { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--stone-800); padding-bottom: 0.625rem; margin-bottom: 0.625rem; border-bottom: 1px solid var(--stone-200); }
.mega-panel-items { display: grid; gap: 0; }
.mega-panel-link { display: flex; align-items: baseline; gap: 0.375rem; padding: 0.3125rem 0; cursor: pointer; text-decoration: none; transition: color 0.15s; background: none; border: none; font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 400; color: var(--stone-600); text-align: left; width: 100%; line-height: 1.35; }
.mega-panel-link:hover { color: var(--gold); }
.mega-panel-link-meta { font-family: var(--font-body); font-size: 0.625rem; color: var(--stone-350, var(--stone-400)); font-weight: 400; white-space: nowrap; opacity: 0.7; }
.mega-panel-link:hover .mega-panel-link-meta { opacity: 1; color: var(--stone-500); }
.mega-panel-view-all { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); margin-top: 0.375rem; padding-top: 0.5rem; border-top: 0.5px solid var(--stone-200); }
.mega-panel-view-all:hover { color: var(--stone-800); }

/* Shop panel — full category tree in masonry columns */
.mega-panel-shop-cols { columns: 5 190px; column-gap: 2rem; }
.mega-panel-shop-cols .mega-panel-col { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 1.75rem; }
.mega-panel-col-title-btn { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--stone-200); cursor: pointer; transition: color 0.15s; }
.mega-panel-col-title-btn:hover { color: var(--gold); }

/* Mega Panel Featured Card */
.mega-panel-featured { display: flex; flex-direction: column; }
.mega-panel-featured-eyebrow { font-family: var(--font-body); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--stone-400); padding-bottom: 0.75rem; margin-bottom: 0.875rem; border-bottom: 0.5px solid var(--stone-200); }
.mega-panel-featured-card { position: relative; width: 100%; aspect-ratio: 4/3; min-height: 220px; overflow: hidden; cursor: pointer; background: var(--stone-200); }
.mega-panel-featured-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); }
.mega-panel-featured-card:hover img { transform: scale(1.04); }
.mega-panel-featured-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(21,18,15,0.65) 0%, transparent 55%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; }
.mega-panel-featured-title { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 400; color: white; line-height: 1.2; margin-bottom: 0.25rem; }
.mega-panel-featured-meta { font-size: 0.75rem; color: rgba(255,255,255,0.7); margin-bottom: 0.75rem; }
.mega-panel-featured-cta { font-size: 0.6875rem; color: var(--gold-light); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }

/* Mega Panel — Services card grid */
.mega-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.mega-svc-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 0.5rem; padding: 1.5rem 1.375rem 1.375rem; background: var(--warm-bg); border: 0.5px solid var(--stone-200); border-radius: 4px; cursor: pointer; transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s; }
.mega-svc-card:hover { border-color: var(--gold); box-shadow: 0 8px 24px rgba(21,18,15,0.08); transform: translateY(-2px); }
.mega-svc-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--stone-100, #f3efe9); color: var(--stone-700); margin-bottom: 0.375rem; transition: background 0.18s, color 0.18s; }
.mega-svc-card:hover .mega-svc-icon { background: var(--gold); color: white; }
.mega-svc-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 500; color: var(--stone-800); line-height: 1.15; }
.mega-svc-desc { font-family: var(--font-body); font-size: 0.8125rem; color: var(--stone-500); line-height: 1.5; }
.mega-svc-cta { margin-top: auto; padding-top: 0.5rem; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); transition: color 0.18s; }
.mega-svc-card:hover .mega-svc-cta { color: var(--stone-800); }
@media (max-width: 900px) { .mega-svc-grid { grid-template-columns: repeat(2, 1fr); } }

/* Scrim overlay */
.mega-menu-scrim { position: fixed; inset: 0; background: rgba(21,18,15,0.2); z-index: calc(var(--z-dropdown) - 1); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.mega-menu-scrim.visible { opacity: 1; pointer-events: auto; }

/* ── Mobile Color Dots ── */
.mobile-color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-right: 0.5rem; vertical-align: middle; }
.mobile-color-dot--bordered { box-shadow: inset 0 0 0 1px var(--stone-300); }

/* ── SEARCH ── */
.header-search { position: relative; display: flex; align-items: center; max-width: 280px; width: 100%; margin: 0; }
.header-search input { width: 100%; height: 40px; padding: 0.5rem 3.5rem 0.5rem 2.25rem; border: 0.5px solid var(--stone-300); background: rgba(21,18,15,0.03); font-family: var(--font-body); font-size: 0.8125rem; color: var(--stone-800); outline: none; transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base); border-radius: 999px; }
.header-search input:focus-visible { outline: none; }
.header-search input::placeholder { color: var(--stone-400); font-size: 0.8125rem; letter-spacing: 0.04em; }
.header-search input:focus { border-color: var(--gold); background: white; box-shadow: none; }
.header-search-icon { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--stone-400); padding: 0; display: flex; align-items: center; justify-content: center; z-index: 1; }
.header-search-icon svg { width: 14px; height: 14px; display: block; }
.header-search-clear { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--stone-400); padding: 0.25rem; display: flex; align-items: center; justify-content: center; z-index: 1; }
.header-search-clear svg { width: 14px; height: 14px; }
.header-search-clear:hover { color: var(--stone-600); }
.header-search-kbd { position: absolute; right: 0.625rem; top: 50%; transform: translateY(-50%); background: var(--stone-200); border-radius: 4px; font-size: 10px; font-family: var(--font-body); color: var(--stone-500); padding: 1px 5px; pointer-events: none; line-height: 1.4; }

/* Search Panel — full-width editorial dropdown */
.search-panel { position: absolute; top: 100%; left: 0; right: 0; background: var(--warm-bg); box-shadow: 0 24px 60px rgba(21,18,15,0.13); z-index: var(--z-overlay); animation: megaPanelIn 0.2s cubic-bezier(.2,.7,.3,1) both; border-top: 0.5px solid rgba(21,18,15,0.07); }
.search-panel-inner { max-width: var(--max-width); margin: 0 auto; }
/* Explore mode — 4 columns */
.search-panel-explore { display: grid; grid-template-columns: 1fr 1fr 1.1fr 1.2fr; padding: 2.5rem 4rem 2.75rem; gap: 3rem; }
.search-panel-section-label { font-family: var(--font-body); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--stone-400); padding-bottom: 0.875rem; margin-bottom: 1.125rem; border-bottom: 0.5px solid rgba(21,18,15,0.07); }
.search-panel-section-label--accent { color: var(--gold); }
/* Recent items */
.search-panel-recent-item { display: flex; align-items: center; gap: 0.625rem; width: 100%; border: none; background: transparent; padding: 0; cursor: pointer; color: var(--stone-800); text-align: left; margin-bottom: 0.75rem; }
.search-panel-recent-item svg { flex-shrink: 0; }
.search-panel-recent-item span { font-family: var(--font-heading); font-size: 0.9375rem; font-style: italic; font-weight: 400; }
.search-panel-recent-item:hover span { color: var(--gold); }
.search-panel-clear { border: none; background: transparent; padding: 0; cursor: pointer; font-family: var(--font-body); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--stone-400); margin-top: 1.125rem; }
.search-panel-clear:hover { color: var(--stone-600); }
/* Trending pills */
.search-panel-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.search-panel-pill { border: 0.5px solid rgba(21,18,15,0.13); background: transparent; cursor: pointer; padding: 0.4375rem 0.75rem; border-radius: 999px; font-family: var(--font-body); font-size: 0.75rem; color: var(--stone-800); transition: background 0.15s, border-color 0.15s, color 0.15s; }
.search-panel-pill:hover { background: var(--gold); color: white; border-color: var(--gold); }
/* Browse category rows */
.search-panel-cat-row { display: flex; align-items: center; gap: 0.75rem; width: 100%; border: none; background: transparent; padding: 0; cursor: pointer; text-align: left; margin-bottom: 0.75rem; text-decoration: none; }
.search-panel-cat-swatch { width: 28px; height: 28px; border-radius: 3px; flex-shrink: 0; background: var(--stone-200); overflow: hidden; }
.search-panel-cat-swatch img { width: 100%; height: 100%; object-fit: cover; }
.search-panel-cat-name { flex: 1; font-family: var(--font-heading); font-size: 1rem; color: var(--stone-800); transition: color 0.15s; }
.search-panel-cat-row:hover .search-panel-cat-name { color: var(--gold); }
.search-panel-cat-meta { font-family: var(--font-body); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; color: var(--stone-400); white-space: nowrap; }
/* Featured promo */
.search-panel-promo { position: relative; aspect-ratio: 4/3; min-height: 200px; border-radius: 4px; overflow: hidden; background: var(--stone-200); cursor: pointer; }
.search-panel-promo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25,0.1,0.25,1); }
.search-panel-promo:hover img { transform: scale(1.04); }
.search-panel-promo-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55) 100%); }
.search-panel-promo-text { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; color: white; }
.search-panel-promo-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; margin-bottom: 0.25rem; }
.search-panel-promo-desc { font-size: 0.75rem; opacity: 0.85; }
.search-panel-promo-bottom { display: flex; align-items: baseline; justify-content: space-between; margin-top: 0.75rem; }
.search-panel-promo-price { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; }
.search-panel-promo-cta { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
/* Results mode — 2 columns */
.search-panel-results { display: grid; grid-template-columns: 1.6fr 1fr; padding: 2.25rem 4rem 2.5rem; gap: 3.5rem; }
/* Result rows */
.search-panel-result { display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 1rem; padding: 0.75rem 0.875rem; margin: 0 -0.875rem; border-radius: 4px; cursor: pointer; transition: background 0.15s; text-decoration: none; }
.search-panel-result:hover { background: var(--stone-50); }
.search-panel-result-img { width: 44px; height: 44px; border-radius: 3px; overflow: hidden; background: var(--stone-200); flex-shrink: 0; }
.search-panel-result-img img { width: 100%; height: 100%; object-fit: cover; }
.search-panel-result-name { font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 400; color: var(--stone-800); }
.search-panel-result-cat { font-family: var(--font-body); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--stone-400); margin-top: 0.3125rem; }
.search-panel-result-price { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; color: var(--stone-800); white-space: nowrap; }
.search-panel-result-enter { font-size: 0.6875rem; letter-spacing: 0.08em; color: transparent; transition: color 0.15s; }
.search-panel-result:hover .search-panel-result-enter { color: var(--gold); }
.search-panel-result.active { background: var(--stone-50); }
.search-panel-result.active .search-panel-result-enter { color: var(--gold); }
.search-panel-seeall { border: none; background: transparent; padding: 0; cursor: pointer; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-top: 1.375rem; }
.search-panel-seeall:hover { color: var(--stone-900); }
/* Sidebar suggestions */
.search-panel-dym-item { margin-bottom: 0.625rem; }
.search-panel-dym-item button { all: unset; cursor: pointer; font-family: var(--font-heading); font-size: 1rem; font-style: italic; color: var(--stone-800); }
.search-panel-dym-item button:hover { color: var(--gold); }
.search-panel-scope-item { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.625rem; cursor: pointer; }
.search-panel-scope-name { font-family: var(--font-heading); font-size: 0.9375rem; color: var(--stone-800); transition: color 0.15s; }
.search-panel-scope-item:hover .search-panel-scope-name { color: var(--gold); }
.search-panel-scope-meta { font-family: var(--font-body); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; color: var(--stone-400); white-space: nowrap; }
/* Empty state */
.search-panel-empty { padding: 2rem 0; font-family: var(--font-heading); font-size: 1.375rem; font-weight: 300; color: var(--stone-400); font-style: italic; }
.search-panel-empty a { all: unset; color: var(--gold); cursor: pointer; text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 4px; }
/* Loading */
.search-panel-loading { padding: 1rem 0; }
/* Footer bar */
.search-panel-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.875rem 4rem; border-top: 0.5px solid rgba(21,18,15,0.07); font-family: var(--font-body); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--stone-400); }
.search-panel-footer-keys { display: flex; gap: 1.25rem; }
.search-panel-footer-keys span { display: flex; align-items: center; gap: 0.25rem; }
.search-panel-kbd { display: inline-block; min-width: 1rem; padding: 0.1875rem 0.3125rem; margin-right: 0.25rem; border: 0.5px solid rgba(21,18,15,0.13); border-radius: 3px; font-size: 0.5625rem; text-align: center; }
.search-panel-footer-action { color: var(--gold); cursor: pointer; }
.search-panel-footer-action:hover { color: var(--stone-900); }

.search-suggestions { position: absolute; top: 100%; left: 0; width: 480px; background: var(--warm-bg); box-shadow: var(--shadow-lg); z-index: calc(var(--z-modal-overlay) + 1); max-height: 560px; overflow-y: auto; border-radius: 12px; margin-top: 4px; }
.search-suggest-section { border-bottom: 1px solid var(--stone-100); padding-bottom: 0.25rem; }
.search-suggest-section:last-of-type { border-bottom: none; }
.search-suggest-label { padding: 0.625rem 1rem 0.375rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone-400); display: flex; justify-content: space-between; align-items: center; }
.search-suggest-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; cursor: pointer; transition: background 0.15s; }
.search-suggest-item:hover, .search-suggest-item.active { background: var(--stone-50); }
.search-suggest-item-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--stone-400); }
.search-suggest-item-icon svg { width: 16px; height: 16px; }
.search-suggest-category-text { flex: 1; font-size: 0.8125rem; font-weight: 500; color: var(--stone-700); }
.search-suggest-count { font-size: 0.6875rem; color: var(--stone-400); flex-shrink: 0; }
.search-suggest-collection-img { width: 48px; height: 48px; object-fit: cover; flex-shrink: 0; background: var(--stone-100); border-radius: 4px; }
.search-suggest-collection-text { flex: 1; min-width: 0; }
.search-suggest-collection-name { font-size: 0.8125rem; font-weight: 500; color: var(--stone-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-suggestion { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; cursor: pointer; transition: background 0.15s; }
.search-suggestion:hover, .search-suggestion.active { background: var(--stone-50); }
.search-suggestion-img { width: 56px; height: 56px; flex-shrink: 0; background: var(--stone-100); border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.search-suggestion-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.search-suggestion-text { flex: 1; min-width: 0; }
.search-suggestion-name { font-size: 0.8125rem; font-weight: 500; color: var(--stone-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-suggestion-variant { font-size: 0.6875rem; color: var(--stone-500); }
.search-suggestion-price { font-size: 0.8125rem; color: var(--gold); font-weight: 500; flex-shrink: 0; }
.search-suggest-footer { padding: 0.7rem 1rem; text-align: center; font-size: 0.8125rem; color: var(--gold); cursor: pointer; border-top: 1px solid var(--stone-100); font-weight: 500; }
.search-suggest-footer:hover { background: var(--stone-50); }
.search-suggest-popular { padding: 0.35rem 1rem; }
.search-suggest-popular-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; margin: 0 -0.5rem; cursor: pointer; color: var(--stone-600); font-size: 0.8125rem; transition: color 0.15s, background 0.15s; border-radius: 4px; }
.search-suggest-popular-item:hover, .search-suggest-popular-item.active { color: var(--stone-800); background: var(--stone-50); }
.search-suggest-popular-item svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--stone-400); }
.search-recent-clear { background: none; border: none; font-size: 0.625rem; color: var(--stone-400); cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-body); }
.search-recent-clear:hover { color: var(--stone-600); }
mark.search-highlight { background: rgba(196, 170, 108, 0.2); color: inherit; padding: 0; border-radius: 1px; }
.search-suggestion-vendor { font-size: 0.6875rem; color: var(--stone-400); margin-top: 1px; }
.search-suggestion-sku { font-size: 0.625rem; color: var(--stone-400); font-family: monospace; margin-top: 1px; }
.search-did-you-mean { padding: 0.75rem 1rem; font-size: 0.8125rem; color: var(--stone-600); cursor: pointer; border-bottom: 1px solid var(--stone-100); }
.search-did-you-mean:hover { background: var(--stone-50); }
.search-did-you-mean strong { color: var(--gold); text-decoration: underline; }
.search-expanded-indicator { padding: 0.5rem 1rem; font-size: 0.75rem; color: var(--stone-500); background: rgba(28,25,23,0.04); border-bottom: 1px solid var(--stone-100); }
.search-expanded-indicator strong { color: var(--stone-700); }
.search-empty-did-you-mean { font-size: 1rem; color: var(--stone-600); margin-bottom: 1.5rem; }
.search-empty-dym-link { background: none; border: none; font-size: 1rem; color: var(--gold); font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0; font-family: var(--font-body); }
.search-empty-dym-link:hover { color: var(--stone-800); }
.browse-did-you-mean { font-size: 0.875rem; color: var(--stone-600); margin: 0 0 1rem; }
.browse-dym-link { background: none; border: none; font-size: 0.875rem; color: var(--gold); font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0; font-family: var(--font-body); }
.browse-dym-link:hover { color: var(--stone-800); }
.search-empty-state { text-align: center; padding: 4rem 2rem; }
.search-empty-state svg { width: 48px; height: 48px; color: var(--stone-300); margin-bottom: 1rem; }
.search-empty-state h2 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; color: var(--stone-700); margin-bottom: 0.5rem; }
.search-empty-state p { font-size: 0.875rem; color: var(--stone-500); margin-bottom: 1rem; }
.search-empty-suggestions, .search-empty-categories { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1.5rem; }
.search-empty-chip, .search-empty-cat-chip { padding: 0.5rem 1rem; border: 1px solid var(--stone-200); background: white; font-size: 0.8125rem; cursor: pointer; font-family: var(--font-body); transition: all 0.15s; border-radius: 0; }
.search-empty-chip:hover { border-color: var(--stone-800); background: var(--stone-50); }
.search-empty-cat-chip { border-color: var(--gold); color: var(--gold); }
.search-empty-cat-chip:hover { background: var(--gold); color: white; }
.search-empty-browse { font-size: 0.8125rem; color: var(--stone-400); margin-bottom: 0.75rem; }
.search-result-count { font-size: 0.875rem; color: var(--stone-400); margin-top: 0.25rem; font-family: var(--font-body); }
.search-suggest-loading { padding: 1.25rem 1rem; text-align: center; font-size: 0.75rem; color: var(--stone-400); display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.search-suggest-loading-dots { display: flex; gap: 3px; }
.search-suggest-loading-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--stone-300); animation: suggestDot 1s infinite ease-in-out; }
.search-suggest-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.search-suggest-loading-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes suggestDot { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }

/* ── SEARCH ENHANCEMENTS ── */
/* Larger product thumbnails */
.search-panel-result--product { grid-template-columns: 56px 1fr auto auto; }
.search-panel-result-img--lg { width: 56px; height: 56px; }
/* Color dot */
.search-panel-color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; border: 1px solid rgba(0,0,0,0.08); flex-shrink: 0; }
/* Sale badge */
.search-panel-sale-tag { display: inline-block; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: #c0392b; color: white; padding: 1px 5px; border-radius: 2px; margin-right: 5px; vertical-align: middle; line-height: 1.4; }
/* Synonym expansion banner */
.search-panel-synonym-banner { padding: 0.5rem 0; margin-bottom: 0.75rem; font-size: 0.75rem; color: var(--stone-500); border-bottom: 0.5px solid var(--stone-100); }
.search-panel-synonym-banner em { font-style: italic; color: var(--stone-700); font-weight: 500; }
.search-panel-synonym-link { all: unset; cursor: pointer; font-size: 0.6875rem; color: var(--gold); margin-left: 0.5rem; text-decoration: underline; text-underline-offset: 2px; }
.search-panel-synonym-link:hover { color: var(--stone-800); }
/* Auto-correct banner */
.search-panel-autocorrect-banner { padding: 0.5rem 0; margin-bottom: 0.75rem; font-size: 0.75rem; color: var(--stone-500); border-bottom: 0.5px solid var(--stone-100); }
.search-panel-autocorrect-banner em { font-style: italic; color: var(--stone-700); font-weight: 500; }
.search-autocorrect-banner { padding: 0.75rem 1rem; font-size: 0.8125rem; color: var(--stone-600); background: rgba(28,25,23,0.03); border-bottom: 1px solid var(--stone-100); }
.search-autocorrect-banner strong { color: var(--stone-800); }
.search-autocorrect-link { all: unset; cursor: pointer; font-size: 0.8125rem; color: var(--gold); text-decoration: underline; text-underline-offset: 2px; font-family: var(--font-body); }
.search-autocorrect-link:hover { color: var(--stone-800); }
/* Mobile larger product thumbnails */
.mobile-search-result-img--lg { width: 56px; height: 56px; }
.mobile-search-result-img--lg img { width: 56px; height: 56px; }

/* Browse toolbar: related searches row */
.browse-related-searches { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 0.5px solid rgba(28,25,23,0.06); }
.browse-related-label { font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-400); margin-right: 4px; flex-shrink: 0; }
.browse-related-pill { border: 1px solid var(--stone-200); background: white; padding: 5px 12px; font-size: 0.75rem; font-family: var(--font-body); color: var(--stone-600); cursor: pointer; transition: all 0.15s; border-radius: 0; }
.browse-related-pill:hover { border-color: var(--stone-800); background: var(--stone-50); color: var(--stone-800); }

/* Browse toolbar: quick category filter pills */
.browse-category-pills { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 14px; margin-bottom: 8px; }
.browse-category-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--gold); background: transparent; color: var(--gold); padding: 5px 14px; font-size: 0.75rem; font-family: var(--font-body); font-weight: 500; cursor: pointer; transition: all 0.15s; border-radius: 0; }
.browse-category-pill:hover { background: var(--gold); color: white; }
.browse-category-pill-count { font-size: 0.625rem; font-weight: 600; opacity: 0.7; }

/* ── MOBILE HEADER ── */
.mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; color: var(--stone-600); padding: 0.5rem; -webkit-tap-highlight-color: transparent; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.mobile-menu-btn svg { width: 24px; height: 24px; }
.mobile-search-btn { display: none; background: none; border: none; cursor: pointer; color: var(--stone-600); padding: 0.5rem; -webkit-tap-highlight-color: transparent; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.mobile-search-btn svg { width: 22px; height: 22px; }

/* ── BUTTONS ── */
.btn { display: inline-block; padding: 1rem 3rem; background: var(--stone-900); color: white; text-decoration: none; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; border: none; transition: all var(--transition-base); font-family: var(--font-body); }
.btn:hover { background: var(--gold); }
.btn:active { transform: scale(0.97); }
.btn-secondary { background: white; color: var(--stone-900); border: 1px solid var(--stone-300); }
.btn-secondary:hover { background: var(--stone-100); }
.roomvo-visualize-btn { background: linear-gradient(135deg, var(--sage) 0%, #5a7a6a 100%); border: none; color: white; font-weight: 600; letter-spacing: 0.04em; transition: all var(--transition-base); box-shadow: 0 2px 8px rgba(90,122,106,0.25); }
/* Roomvo reveals the button by flipping its inline visibility; until then don't reserve space */
.roomvo-visualize-btn[style*="hidden"] { display: none; }
.roomvo-visualize-btn:hover { background: linear-gradient(135deg, #5a7a6a 0%, var(--sage) 100%); box-shadow: 0 4px 14px rgba(90,122,106,0.35); transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: white; }
.btn-gold:hover { background: var(--gold-light); }

/* ── CART ICON ── */
.cart-badge { position: absolute; top: -6px; right: -10px; background: var(--gold); color: white; font-size: 0.6rem; font-weight: 600; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cart-flash { animation: cartPulse 0.6s ease; }
@keyframes cartPulse { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ── CART DRAWER (slide-out) ── */
.cart-drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px); z-index: var(--z-overlay); opacity: 0; transition: opacity var(--transition-base); pointer-events: none; }
.cart-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 90vw; background: var(--warm-bg); z-index: var(--z-drawer); transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.cart-drawer.open { transform: translateX(0); }
.cart-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--stone-200); }
.cart-drawer-head h3 { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 400; }
.cart-drawer-close { background: none; border: none; cursor: pointer; color: var(--stone-600); padding: 0.25rem; transition: color 0.15s; }
.cart-drawer-close:hover { color: var(--stone-900); }
.cart-drawer-close svg { width: 20px; height: 20px; }
.cart-drawer-items { flex: 1; overflow-y: auto; padding: 0; }
.cart-drawer-item { display: flex; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--stone-100); }
.cart-drawer-item-img { width: 72px; height: 72px; flex-shrink: 0; overflow: hidden; background: var(--stone-100); }
.cart-drawer-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-drawer-item-info { flex: 1; min-width: 0; }
.cart-drawer-item-name { font-weight: 500; font-size: 0.875rem; margin-bottom: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-drawer-item-meta { font-size: 0.75rem; color: var(--stone-500); margin-bottom: 0.35rem; }
.cart-drawer-item-bottom { display: flex; justify-content: space-between; align-items: center; }
.cart-drawer-item-price { font-weight: 500; font-size: 0.875rem; }
.cart-drawer-item-remove { background: none; border: none; cursor: pointer; color: var(--stone-400); font-size: 0.75rem; text-decoration: underline; padding: 0; }
.cart-drawer-item-remove:hover { color: var(--stone-800); }
.cart-drawer-footer { padding: 1.25rem 1.5rem; border-top: 1px solid var(--stone-200); background: rgba(28,25,23,0.04); }
.cart-drawer-total { display: flex; justify-content: space-between; font-weight: 600; font-size: 1.05rem; margin-bottom: 1rem; }
.cart-drawer-empty { padding: 3rem 1.5rem; text-align: center; color: var(--stone-500); font-size: 0.875rem; }

/* ── HERO & HOMEPAGE ── */
.hero { position: relative; height: 85vh; min-height: 560px; max-height: 900px; display: flex; align-items: flex-end; justify-content: flex-start; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 8s cubic-bezier(0.25, 0.1, 0.25, 1); }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(21,18,15,0.7) 0%, rgba(21,18,15,0.3) 30%, transparent 60%); pointer-events: none; }
.hero.loaded .hero-bg { transform: scale(1.05); }
.hero-content { position: relative; z-index: 1; color: white; padding: 4rem; max-width: 600px; }
.hero-content h1 { font-family: var(--font-heading); font-size: 3.5rem; font-weight: 300; line-height: 1.1; margin-bottom: 1.25rem; letter-spacing: -0.02em; text-shadow: 0 2px 20px rgba(0,0,0,0.3); }
.hero-content p { display: none; }
.hero-cta { display: inline-block; padding: 1rem 3rem; background: white; color: var(--stone-900); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; cursor: pointer; border: none; transition: all var(--transition-smooth); font-family: var(--font-body); font-weight: 500; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.hero-cta:hover { background: var(--gold); color: white; transform: translateY(-2px); box-shadow: 0 4px 20px rgba(201,166,104,0.35); }
.homepage-section { max-width: var(--max-width); margin: 0 auto; padding: 4rem 3rem; }
.homepage-section h2 { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 300; text-align: center; margin-bottom: 0.5rem; }
.homepage-section .subtitle { text-align: center; color: var(--stone-500); font-size: 1rem; margin-bottom: 3rem; }
.homepage-featured-band { background: var(--stone-100); box-shadow: inset 0 2px 8px rgba(0,0,0,0.06), inset 0 -2px 8px rgba(0,0,0,0.06); padding: 4rem 3rem; }
.homepage-featured-band .homepage-section { padding: 0; }
.category-carousel { position: relative; padding: 0 3rem; }
.category-carousel-track { display: flex; gap: 1.5rem; overflow: hidden; scroll-behavior: smooth; }
.category-tile { position: relative; width: calc((100% - 4.5rem) / 4); min-width: calc((100% - 4.5rem) / 4); aspect-ratio: 4/5; overflow: hidden; cursor: pointer; background: var(--stone-200); flex-shrink: 0; border-radius: 8px; }
.category-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.category-tile:hover img { transform: scale(1.05); }
.category-tile-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 50%); display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; }
.category-tile-name { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 400; color: white; line-height: 1.2; }
.category-tile-count { font-size: 0.875rem; color: rgba(255,255,255,0.7); margin-top: 0.35rem; }
.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: white; border: 1px solid var(--stone-200); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; box-shadow: var(--shadow-md); transition: all var(--transition-base); }
.carousel-arrow:hover { background: var(--stone-900); color: white; border-color: var(--stone-900); }
.carousel-arrow:disabled { opacity: 0; pointer-events: none; }
.carousel-arrow svg { width: 20px; height: 20px; }
.carousel-arrow-left { left: 0; }
.carousel-arrow-right { right: 0; }
.carousel-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stone-300); border: none; cursor: pointer; padding: 0; transition: all var(--transition-base); }
.carousel-dot.active { background: var(--stone-800); width: 24px; border-radius: 4px; }

/* ── HOMEPAGE CATEGORY GRID ── */
.homepage-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.homepage-cat-tile { position: relative; aspect-ratio: 4/5; overflow: hidden; cursor: pointer; background: var(--stone-200); }
.homepage-cat-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); }
.homepage-cat-tile:hover img { transform: scale(1.06); }
.homepage-cat-tile-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(21,18,15,0.6) 0%, rgba(21,18,15,0.05) 50%); display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; transition: background 0.4s; }
.homepage-cat-tile:hover .homepage-cat-tile-overlay { background: linear-gradient(to top, rgba(21,18,15,0.7) 0%, rgba(21,18,15,0.1) 50%); }
.homepage-cat-tile-name { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 400; color: white; line-height: 1.2; }
.homepage-cat-tile-cta { font-size: 0.75rem; color: rgba(255,255,255,0.8); margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; transition: color 0.3s; }
.homepage-cat-tile:hover .homepage-cat-tile-cta { color: var(--gold-light); }

/* ── HOMEPAGE TRADE BAND ── */
.homepage-trade-band { background: var(--stone-900); padding: 5rem 3rem; text-align: center; }
.homepage-trade-band h2 { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 300; color: white; margin-bottom: 0.75rem; }
.homepage-trade-band p { color: var(--stone-400); font-size: 1rem; max-width: 500px; margin: 0 auto 2rem; line-height: 1.6; }
.homepage-trade-band .btn { background: var(--gold); color: white; }
.homepage-trade-band .btn:hover { background: var(--gold-dark); transform: translateY(-1px); }

/* ── CREDENTIAL STRIP ── */
.credential-strip { background: var(--warm-bg); border-bottom: 1px solid var(--stone-200); border-top: 1px solid var(--stone-200); padding: 1.1rem 3rem; }
.credential-strip-inner { display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; max-width: var(--max-width); margin: 0 auto; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--stone-500); font-weight: 500; }
.credential-strip-inner span { white-space: nowrap; }
.credential-strip-inner .cred-dot { margin: 0 1rem; color: var(--stone-300); font-size: 0.5rem; }

/* ── TRUST STRIP ── */
.trust-strip { background: var(--warm-bg); border-bottom: 1px solid var(--stone-200); padding: 1.5rem 3rem; }
.trust-strip-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: var(--max-width); margin: 0 auto; }
.trust-strip-item { display: flex; align-items: center; justify-content: center; gap: 0.75rem; text-align: left; }
.trust-strip-icon { width: 36px; height: 36px; flex-shrink: 0; color: var(--gold); }
.trust-strip-icon svg { width: 100%; height: 100%; }
.trust-strip-text { font-size: 0.8rem; font-weight: 500; color: var(--stone-700); line-height: 1.35; }
.trust-strip-text span { display: block; font-weight: 400; font-size: 0.7rem; color: var(--stone-500); }

/* ── SHOP THE LOOK ── */
.looks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.look-card { position: relative; aspect-ratio: 3/4; overflow: hidden; cursor: pointer; border-radius: var(--radius-md); background: var(--stone-200); }
.look-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); }
.look-card:hover img { transform: scale(1.06); }
.look-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(21,18,15,0.65) 0%, transparent 50%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; }
.look-card-name { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 400; color: white; line-height: 1.2; }
.look-card-cta { font-size: 0.7rem; color: rgba(255,255,255,0.8); margin-top: 0.35rem; text-transform: uppercase; letter-spacing: 0.08em; transition: color 0.3s; }
.look-card:hover .look-card-cta { color: var(--gold-light); }

/* ── QUIZ & VISUALIZER CTA ── */
.homepage-cta-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: var(--max-width); margin: 0 auto; padding: 4rem 3rem; }
.cta-card { position: relative; padding: 3rem; border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 240px; }
.cta-card-dark { background: var(--stone-900); color: white; }
.cta-card-light { background: var(--stone-100); color: var(--stone-800); border: 1px solid var(--stone-200); }
.cta-card h3 { font-family: var(--font-heading); font-size: 2rem; font-weight: 300; margin-bottom: 0.75rem; line-height: 1.2; }
.cta-card p { font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.5rem; max-width: 360px; }
.cta-card-dark p { color: var(--stone-400); }
.cta-card-light p { color: var(--stone-500); }
.cta-card .btn-outline { display: inline-block; padding: 0.875rem 2rem; border: 1px solid; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: all var(--transition-base); background: transparent; font-family: var(--font-body); font-weight: 500; width: fit-content; }
.cta-card-dark .btn-outline { border-color: var(--gold); color: var(--gold); }
.cta-card-dark .btn-outline:hover { background: var(--gold); color: white; }
.cta-card-light .btn-outline { border-color: var(--stone-800); color: var(--stone-800); }
.cta-card-light .btn-outline:hover { background: var(--stone-800); color: white; }
.cta-card-icon { position: absolute; top: 2rem; right: 2rem; width: 48px; height: 48px; opacity: 0.2; }
.cta-card-icon svg { width: 100%; height: 100%; }

/* ── HOW WE HELP ── */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.service-card { text-align: center; padding: 2.5rem 1.5rem; border: 1px solid var(--stone-200); border-radius: var(--radius-md); background: var(--warm-bg); transition: all var(--transition-base); cursor: pointer; }
.service-card:hover { border-color: var(--gold); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.service-card-icon { width: 48px; height: 48px; margin: 0 auto 1.25rem; color: var(--gold); }
.service-card-icon svg { width: 100%; height: 100%; }
.service-card h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; margin-bottom: 0.5rem; }
.service-card p { font-size: 0.8rem; color: var(--stone-500); line-height: 1.5; }

/* ── DESIGN PALETTES ── */
.palettes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.palette-card { display: grid; grid-template-columns: 1fr 1fr; background: var(--warm-bg); border: 1px solid var(--stone-200); overflow: hidden; transition: border-color var(--transition-editorial), box-shadow var(--transition-editorial); cursor: pointer; }
.palette-card:hover { border-color: var(--stone-400); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.palette-card-image { aspect-ratio: 4/5; overflow: hidden; }
.palette-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-editorial); }
.palette-card:hover .palette-card-image img { transform: scale(1.03); }
.palette-card-content { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.palette-card-name { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; color: var(--stone-900); line-height: 1.2; margin-bottom: 0.75rem; }
.palette-card-desc { font-size: 0.85rem; color: var(--stone-500); line-height: 1.6; margin-bottom: 1.25rem; }
.palette-card-cta { font-size: 0.7rem; color: var(--stone-600); text-transform: uppercase; letter-spacing: 0.08em; transition: color 0.3s; }
.palette-card:hover .palette-card-cta { color: var(--stone-900); }

/* ── ROOM INSPIRATION GALLERY ── */
.inspo-gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 0.5rem; }
.inspo-gallery-item { position: relative; overflow: hidden; cursor: pointer; border-radius: var(--radius-sm); aspect-ratio: 4/3; }
.inspo-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); display: block; }
.inspo-gallery-item:hover img { transform: scale(1.05); }
.inspo-gallery-item.tall { grid-row: span 2; aspect-ratio: auto; }
.inspo-gallery-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(21,18,15,0.5) 0%, transparent 100%); padding: 2rem 1.25rem 1rem; display: flex; align-items: flex-end; }
.inspo-gallery-label { color: white; font-family: var(--font-body); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; opacity: 1; }

/* ── QUIZ CTA (single split) ── */
.quiz-cta-section { display: grid; grid-template-columns: 1fr 1fr; max-width: var(--max-width); margin: 0 auto; min-height: 360px; overflow: hidden; }
.quiz-cta-image { overflow: hidden; }
.quiz-cta-image img { width: 100%; height: 100%; object-fit: cover; }
.quiz-cta-content { background: var(--stone-900); color: white; padding: 4rem; display: flex; flex-direction: column; justify-content: center; }
.quiz-cta-content h3 { font-family: var(--font-heading); font-size: 2rem; font-weight: 300; margin-bottom: 1rem; line-height: 1.2; }
.quiz-cta-content p { font-size: 0.9rem; line-height: 1.7; margin-bottom: 2rem; max-width: 400px; color: var(--stone-400); }
.quiz-cta-content .btn-outline { display: inline-block; padding: 0.875rem 2rem; border: 1px solid var(--gold); color: var(--gold); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: all var(--transition-base); background: transparent; font-family: var(--font-body); font-weight: 500; width: fit-content; }
.quiz-cta-content .btn-outline:hover { background: var(--gold); color: white; }

/* ── WHY DESIGNERS CHOOSE US ── */
.why-designers-band { background: var(--cream-warm); padding: var(--section-gap-md) 3rem; }
.why-designers-inner { max-width: var(--max-width); margin: 0 auto; }
.why-designers-inner h2 { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 300; text-align: left; margin-bottom: 0.5rem; }
.why-designers-inner .subtitle { text-align: left; color: var(--stone-500); font-size: 0.95rem; margin-bottom: 3rem; max-width: 520px; }
.why-designers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; }
.why-designers-item { position: relative; padding-left: 4.5rem; min-height: 80px; transition: opacity var(--transition-editorial); }
.why-designers-item:hover { opacity: 0.8; }
.why-designers-number { position: absolute; left: 0; top: -0.25rem; font-family: var(--font-heading); font-size: 3.5rem; font-weight: 300; color: var(--stone-200); line-height: 1; }
.why-designers-item h4 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; margin-bottom: 0.5rem; color: var(--stone-900); }
.why-designers-item p { font-size: 0.85rem; color: var(--stone-500); line-height: 1.6; }

/* ── NEWSLETTER SIGNUP ── */
.newsletter-band { background: var(--stone-100); padding: 4rem 3rem; text-align: center; }
.newsletter-band h2 { font-family: var(--font-heading); font-size: 2rem; font-weight: 300; margin-bottom: 0.5rem; }
.newsletter-band .subtitle { color: var(--stone-500); font-size: 0.9rem; margin-bottom: 2rem; }
.newsletter-form { display: flex; gap: 0.75rem; max-width: 480px; margin: 0 auto; }
.newsletter-form input { flex: 1; padding: 0.875rem 1.25rem; border: 1px solid var(--stone-300); font-size: 0.9rem; font-family: var(--font-body); background: white; outline: none; transition: border-color var(--transition-base); }
.newsletter-form input:focus { border-color: var(--gold); }
.newsletter-form button { padding: 0.875rem 2rem; background: var(--stone-900); color: white; border: none; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; font-family: var(--font-body); font-weight: 500; transition: background var(--transition-base); white-space: nowrap; }
.newsletter-form button:hover { background: var(--gold); }
.newsletter-success { color: var(--color-success); font-size: 0.875rem; margin-top: 1rem; }

/* ── FORMULARY HOMEPAGE ── */
.form-eyebrow { font-family: var(--font-body); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.24em; color: var(--gold); font-weight: 500; margin-bottom: 1.25rem; }
.form-hero { position: relative; text-align: center; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 120px 3rem 110px; background: url('/uploads/homepage/hero.jpg') center/cover no-repeat; }
.form-hero::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.65); pointer-events: none; }
.form-hero-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
.form-hero-headline { font-family: var(--font-heading); font-size: 3.25rem; font-weight: 300; line-height: 1.2; color: white; margin-bottom: 2.5rem; letter-spacing: -0.01em; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
.form-hero-cta { display: inline-block; padding: 1rem 2.75rem; background: white; color: var(--stone-900); font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; border: none; cursor: pointer; transition: all var(--transition-smooth); box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.form-hero-cta:hover { background: var(--gold); color: white; transform: translateY(-2px); box-shadow: 0 4px 20px rgba(201,166,104,0.35); }
.form-cabinet-band { background: var(--warm-bg); }
.form-cabinet-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; }
.form-cabinet-images { display: flex; overflow: hidden; }
.form-cabinet-images img { flex: 1 1 33.333%; min-width: 0; height: 100%; object-fit: cover; display: block; transition: flex 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.6s ease; cursor: pointer; }
.form-cabinet-images:hover img:not(:hover) { flex: 0.7; filter: brightness(0.82); }
.form-cabinet-images:hover img:hover { flex: 1.6; filter: brightness(1.05); }
.form-cabinet-content { padding: 5rem 4rem; display: flex; flex-direction: column; justify-content: center; }
.form-cabinet-content .form-eyebrow { margin-bottom: 1rem; }
.form-cabinet-headline { font-family: var(--font-heading); font-size: 2.375rem; font-weight: 300; line-height: 1.25; color: var(--stone-900); margin-bottom: 1.25rem; }
.form-cabinet-headline em { font-style: italic; }
.form-cabinet-body { font-size: 0.9rem; color: var(--stone-600); line-height: 1.7; margin-bottom: 2rem; max-width: 420px; }
.form-cabinet-stats { display: flex; gap: 2.5rem; margin-bottom: 2rem; }
.form-cabinet-stat { text-align: left; }
.form-cabinet-stat-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--stone-500); margin-bottom: 0.25rem; }
.form-cabinet-stat-value { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 300; color: var(--stone-900); }
.form-cabinet-link { display: inline-block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--stone-900); cursor: pointer; transition: all var(--transition-smooth); background: transparent; border: 1px solid var(--stone-900); font-family: var(--font-body); font-weight: 500; padding: 0.875rem 2.25rem; text-align: center; width: auto; align-self: start; }
.form-cabinet-link:hover { background: var(--stone-900); color: var(--warm-bg); }
.form-section { max-width: var(--max-width); margin: 0 auto; padding: var(--section-gap-md) 3rem; }
.form-section-header { text-align: center; margin-bottom: 3.5rem; }
.form-section-headline { font-family: var(--font-heading); font-size: 2.375rem; font-weight: 300; color: var(--stone-900); line-height: 1.2; }
.form-specimen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.form-specimen-card { cursor: pointer; }
.form-specimen-card-image { position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--stone-100); margin-bottom: 1.25rem; }
.form-specimen-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); display: block; }
.form-specimen-card:hover .form-specimen-card-image img { transform: scale(1.04); }
.form-specimen-card-meta { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--stone-400); margin-bottom: 0.5rem; }
.form-specimen-card-price { font-family: var(--font-body); font-size: 0.8rem; color: var(--stone-700); margin-bottom: 0.25rem; }
.form-specimen-card-name { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; color: var(--stone-900); line-height: 1.3; margin-bottom: 0.35rem; }
.form-specimen-card-desc { font-size: 0.8rem; color: var(--stone-500); line-height: 1.5; margin-bottom: 0.75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.form-specimen-card-cta { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--stone-600); transition: color var(--transition-base); }
.form-specimen-card:hover .form-specimen-card-cta { color: var(--gold); }
.form-counsel-band { background: var(--charcoal); padding: var(--section-gap-md) 3rem; text-align: center; }
.form-counsel-inner { max-width: 640px; margin: 0 auto; }
.form-counsel-headline { font-family: var(--font-heading); font-size: 2.375rem; font-weight: 300; color: white; line-height: 1.25; margin-bottom: 1rem; }
.form-counsel-body { font-size: 0.9rem; color: var(--stone-400); line-height: 1.7; margin-bottom: 2.5rem; }
.form-counsel-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.form-counsel-form { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; max-width: 480px; margin: 0 auto; }
.form-counsel-input { flex: 1 1 260px; padding: 0.875rem 1.25rem; font-family: var(--font-body); font-size: 0.875rem; color: white; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); outline: none; transition: border-color var(--transition-base); }
.form-counsel-input::placeholder { color: var(--stone-400); }
.form-counsel-input:focus { border-color: var(--stone-400); }
.form-counsel-success { font-size: 0.9rem; color: white; letter-spacing: 0.02em; }
.form-counsel-btn { display: inline-block; padding: 0.875rem 2.25rem; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: all var(--transition-base); }
.form-counsel-btn-light { background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.25); }
.form-counsel-btn-light:hover { background: rgba(255,255,255,0.2); }
.form-counsel-btn-outline { background: transparent; color: var(--stone-400); border: 1px solid var(--stone-600); }
.form-counsel-btn-outline:hover { color: white; border-color: var(--stone-400); }

/* ── SHOP LANDING ── */
.shop-landing-hero { background: var(--warm-bg); padding: 100px 3rem 80px; }
.shop-landing-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; max-width: var(--max-width); margin: 0 auto; align-items: start; }
.shop-landing-hero-left .form-eyebrow { margin-bottom: 1rem; }
.shop-landing-hero-headline { font-family: var(--font-heading); font-size: 5.5rem; font-weight: 300; line-height: 1; color: var(--stone-900); letter-spacing: -0.02em; }
.shop-landing-hero-right { padding-top: 1.5rem; }
.shop-landing-hero-intro { font-size: 0.95rem; color: var(--stone-600); line-height: 1.7; margin-bottom: 2rem; max-width: 440px; }
.shop-landing-hero-actions { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; margin-bottom: 2.5rem; }
.shop-landing-hero-btn { display: inline-block; padding: 0.875rem 2.25rem; background: var(--stone-900); color: white; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; border: none; cursor: pointer; transition: all var(--transition-base); }
.shop-landing-hero-btn:hover { background: var(--charcoal); }
.shop-landing-hero-link { font-size: 0.75rem; color: var(--stone-600); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color var(--transition-base); background: none; border: none; font-family: var(--font-body); }
.shop-landing-hero-link:hover { color: var(--stone-900); }
.shop-landing-stat { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--stone-400); }
.shop-landing-stat strong { color: var(--stone-700); font-weight: 600; }
.shop-landing-section { max-width: var(--max-width); margin: 0 auto; padding: var(--section-gap-md) 3rem; }
.shop-landing-section-header { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 2.5rem; }
.shop-landing-section-num { font-family: var(--font-heading); font-size: 0.875rem; font-weight: 400; color: var(--stone-300); }
.shop-landing-section-title { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 300; color: var(--stone-900); }
.shop-cat-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.shop-cat-heroes { display: flex; flex-direction: column; gap: 1rem; }
.shop-cat-grid-right { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1rem; }
.shop-cat-card { position: relative; overflow: hidden; cursor: pointer; background: var(--stone-200); }
.shop-cat-card-hero { aspect-ratio: 16/9; }
.shop-cat-card-std { aspect-ratio: 1; }
.shop-cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); display: block; }
.shop-cat-card:hover img { transform: scale(1.05); }
.shop-cat-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(21,18,15,0.6) 0%, rgba(21,18,15,0.05) 50%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; transition: background 0.4s; }
.shop-cat-card:hover .shop-cat-card-overlay { background: linear-gradient(to top, rgba(21,18,15,0.7) 0%, rgba(21,18,15,0.1) 50%); }
.shop-cat-card-count { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.7); margin-bottom: 0.25rem; }
.shop-cat-card-name { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; color: white; line-height: 1.2; }
.shop-cat-card-hero .shop-cat-card-name { font-size: 1.75rem; }
.shop-cat-card-cta { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.7); margin-top: 0.35rem; transition: color 0.3s; }
.shop-cat-card:hover .shop-cat-card-cta { color: var(--gold-light); }
.shop-featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.shop-featured-card { cursor: pointer; }
.shop-featured-card-image { position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--stone-100); margin-bottom: 1rem; }
.shop-featured-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); display: block; }
.shop-featured-card:hover .shop-featured-card-image img { transform: scale(1.04); }
.shop-featured-card-cat { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--stone-400); margin-bottom: 0.35rem; }
.shop-featured-card-name { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 400; color: var(--stone-900); line-height: 1.3; margin-bottom: 0.25rem; }
.shop-featured-card-meta { font-size: 0.75rem; color: var(--stone-500); margin-bottom: 0.5rem; }
.shop-featured-card-bottom { display: flex; justify-content: space-between; align-items: center; }
.shop-featured-card-price { font-size: 0.8rem; color: var(--stone-700); font-weight: 500; }
.shop-featured-card-cta { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone-500); transition: color var(--transition-base); }
.shop-featured-card:hover .shop-featured-card-cta { color: var(--gold); }
.shop-trade-band { background: var(--stone-900); padding: var(--section-gap-md) 3rem; }
.shop-trade-inner { max-width: var(--max-width); margin: 0 auto; text-align: center; }
.shop-trade-headline { font-family: var(--font-heading); font-size: 2.375rem; font-weight: 300; color: white; line-height: 1.25; margin-bottom: 1rem; }
.shop-trade-body { font-size: 0.9rem; color: var(--stone-400); line-height: 1.7; max-width: 520px; margin: 0 auto 2.5rem; }
.shop-trade-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; max-width: 800px; margin: 0 auto 2.5rem; }
.shop-trade-benefit { text-align: center; }
.shop-trade-benefit-icon { width: 36px; height: 36px; margin: 0 auto 0.75rem; color: var(--gold); }
.shop-trade-benefit-icon svg { width: 100%; height: 100%; }
.shop-trade-benefit-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--stone-400); }
.shop-trade-cta { display: inline-block; padding: 0.875rem 2.75rem; background: var(--gold); color: white; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; border: none; cursor: pointer; transition: all var(--transition-base); }
.shop-trade-cta:hover { background: var(--gold-dark); }

/* ── COLOR SWATCHES ── */
.color-swatches { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; padding: 0 0.25rem; }
.color-swatch { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all var(--transition-base); position: relative; }
.color-swatch:hover, .color-swatch.active { border-color: var(--stone-800); transform: scale(1.15); }
.color-swatch-label { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 0.6rem; white-space: nowrap; color: var(--stone-500); opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.color-swatch:hover .color-swatch-label { opacity: 1; }

/* ── SCROLL REVEAL ── */
.reveal-section { will-change: opacity, transform; }
.reveal-stagger > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.06s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.12s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.18s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.24s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.30s; }
.reveal-stagger > *:nth-child(7) { transition-delay: 0.36s; }
.reveal-stagger > *:nth-child(8) { transition-delay: 0.42s; }

/* ── CATEGORY HERO ── */
.category-hero { position: relative; width: 100%; height: 280px; display: flex; flex-direction: column; justify-content: flex-end; padding: 2.5rem max(3rem, calc((100% - var(--max-width)) / 2 + 3rem)); background-color: var(--stone-800); background-size: cover; background-position: center; overflow: hidden; }
.category-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.15) 100%); z-index: 1; }
.category-hero > * { position: relative; z-index: 2; }
.category-hero .breadcrumbs { margin-bottom: auto; padding-top: 0; }
.category-hero .breadcrumbs a, .category-hero .breadcrumbs span { color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.category-hero .breadcrumbs a:hover { color: white; }
.category-hero .breadcrumbs .breadcrumb-sep { color: rgba(255,255,255,0.6); }
.category-hero h1 { font-family: var(--font-heading); font-size: 3rem; font-weight: 300; color: white; margin-bottom: 0.5rem; letter-spacing: 0.02em; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.category-hero p { color: rgba(255,255,255,0.85); font-size: 1.05rem; max-width: 600px; line-height: 1.6; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }

/* ── CATEGORY HEADER (Editorial) ── */
.category-header-editorial { padding: 36px 80px 44px; border-bottom: 0.5px solid rgba(28,25,23,0.09); background: var(--warm-bg); }
.category-header-editorial .cat-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.category-header-editorial .cat-header-breadcrumb { font: 500 11px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone-500); display: flex; gap: 14px; align-items: center; }
.category-header-editorial .cat-header-breadcrumb a { color: var(--stone-500); text-decoration: none; cursor: pointer; }
.category-header-editorial .cat-header-breadcrumb a:hover { color: var(--gold); }
.category-header-editorial .cat-header-breadcrumb .cat-crumb-sep { width: 14px; height: 1px; background: rgba(28,25,23,0.2); display: inline-block; }
.category-header-editorial .cat-header-breadcrumb .cat-crumb-current { color: var(--stone-800); }
.category-header-editorial .cat-header-stats { font: 500 11px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-800); }
.category-header-editorial .cat-header-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: end; }
.category-header-editorial .cat-header-kicker { font: 500 11px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.category-header-editorial .cat-header-headline { font: 300 88px/0.94 var(--font-heading); letter-spacing: -0.022em; margin: 0; color: var(--stone-800); text-wrap: pretty; }
.category-header-editorial .cat-header-headline em { font-style: italic; }
.category-header-editorial .cat-header-intro { font: 400 16px/1.55 var(--font-body); color: rgba(28,25,23,0.8); margin: 0; max-width: 460px; }
/* Search results variant */
.category-header-search .cat-header-body-search { grid-template-columns: 1fr; }
.category-header-search .cat-header-headline { font-size: 56px; }
.category-header-search .cat-header-headline em { font-style: italic; color: var(--gold); }
/* View mode responsive */
@media (max-width: 768px) {
  /* Contain any stray wide element — without this one overflowing row drags
     the whole page into horizontal scroll on phones. clip (not hidden) so no
     new scroll container is created. */
  html, body { overflow-x: clip; }
  /* Higher specificity than the base `.view-mode-toggle { display:flex }`
     (which appears later in the file), so Grid/Compact/Spec is truly hidden
     on phones. */
  .browse-toolbar-right .view-mode-toggle { display: none; }
  /* Toolbar: stack — count on its own row, then Sort + Filters share one row */
  .browse-toolbar { flex-wrap: wrap; row-gap: 10px; }
  .browse-toolbar .result-count { flex: 1 1 100%; }
  .browse-toolbar-right { flex-wrap: nowrap; gap: 10px; width: 100%; justify-content: space-between; align-items: center; }
  .browse-toolbar-right .sort-group { flex: 0 1 auto; min-width: 0; }
  /* Pagination: wrap and center; slightly smaller touch targets */
  .pagination { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .pagination-pages { order: 3; flex-basis: 100%; justify-content: center; flex-wrap: wrap; }
  .pagination-num, .pagination-ellipsis { width: 32px; height: 32px; }
  .sku-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-header { display: none; }
  .sku-grid--spec { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; border-top: none; }
  .sku-grid--spec .sku-card { display: block; border-bottom: none; border: 0.5px solid rgba(28,25,23,0.13); }
  .sku-grid--spec .sku-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(28,25,23,0.09); background: var(--warm-bg); }
  .sku-grid--spec .sku-card-image { height: 180px; width: 100%; }
  .sku-grid--spec .sku-card-body { display: block; padding: 14px 16px 16px; }
  .sku-grid--spec .sku-card-vendor { text-align: left; min-width: auto; }
  .sku-grid--spec .sku-card-price-row { flex-direction: row; align-items: baseline; margin-top: 8px; }
  .sku-grid--spec .sku-card-qv-gradient { display: block; }
  .sku-grid--spec .sku-card-hover-actions { display: flex; }
  .sku-grid--spec .sku-card-variant-swatches { display: flex; }
  .category-header-search .cat-header-headline { font-size: 28px; }
}
.category-header-editorial .cat-header-right { padding-bottom: 12px; }
.category-header-editorial .cat-header-facts { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-top: 22px; border-top: 0.5px solid rgba(28,25,23,0.13); }
.category-header-editorial .cat-fact-value { font: 400 24px/1 var(--font-heading); color: var(--stone-800); letter-spacing: -0.01em; }
.category-header-editorial .cat-fact-label { font: 500 10px/1.2 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-500); margin-top: 6px; }

/* ── CATEGORY LANDING PAGE ── */
.category-landing { max-width: 1400px; margin: 0 auto; padding: 3rem; }
.category-landing h2 { font-family: var(--font-heading); font-size: 2rem; font-weight: 400; color: var(--stone-900); margin-bottom: 0.5rem; }
.category-landing .subtitle { color: var(--stone-500); margin-bottom: 2rem; font-size: 0.95rem; }
.category-landing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.category-landing-grid .category-tile { width: 100%; min-width: unset; aspect-ratio: 4/5; }

/* ── SUBCATEGORY STRIP ── */
.subcategory-strip { padding: 0 80px; border-bottom: 0.5px solid rgba(28,25,23,0.09); background: var(--warm-bg); }
.subcategory-strip-grid { display: grid; gap: 0; }
.subcategory-strip-tile { height: 100px; overflow: hidden; cursor: pointer; position: relative; transition: all 0.2s ease; border-right: 0.5px solid rgba(28,25,23,0.09); }
.subcategory-strip-tile:last-child { border-right: none; }
.subcategory-strip-tile:hover { opacity: 0.9; }
.subcategory-strip-tile.active { background: var(--gold); }
.subcategory-strip-tile.active .subcategory-tile-label { background: var(--gold); }
.subcategory-tile-bg { position: absolute; inset: 0; }
.subcategory-tile-bg img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.35; }
.subcategory-strip-tile.active .subcategory-tile-bg img { opacity: 0.2; }
.subcategory-strip-placeholder { width: 100%; height: 100%; background: var(--stone-200); }
.subcategory-tile-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 12px; display: flex; align-items: baseline; justify-content: space-between; background: linear-gradient(transparent, rgba(28,25,23,0.6)); z-index: 1; }
.subcategory-strip-name { font: 500 13px/1.2 var(--font-body); color: #fff; }
.subcategory-strip-count { font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.06em; color: rgba(255,255,255,0.7); }
.subcategory-strip-tile.active .subcategory-strip-name,
.subcategory-strip-tile.active .subcategory-strip-count { color: #fff; }

/* ── BROWSE LAYOUT ── */
.browse-layout { display: flex; padding: 36px 80px 60px; gap: 0; }
.browse-layout > * { min-width: 0; }
.browse-content { flex: 1; padding-left: 48px; min-width: 0; }
.browse-header { display: flex; justify-content: space-between; align-items: center; }
.browse-header h1 { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 300; }

/* ── SIDEBAR ── */
.sidebar { position: sticky; top: calc(var(--header-height) + 1rem); align-self: start; max-height: calc(100vh - var(--header-height) - 2rem); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--stone-300) transparent; width: 260px; flex-shrink: 0; padding-right: 36px; border-right: 0.5px solid rgba(28,25,23,0.09); }
.category-sidebar { padding: 0 0 1.25rem; border-bottom: 1px solid var(--stone-200); margin-bottom: 1.25rem; }
.category-sidebar h3 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 500; color: var(--stone-900); margin-bottom: 0.75rem; letter-spacing: 0.01em; }
.category-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.8125rem; color: var(--stone-600); transition: all 0.2s; border-radius: 4px; }
.category-item:hover { color: var(--stone-900); background: var(--stone-50); }
.category-item.active { color: var(--stone-900); font-weight: 600; background: var(--stone-100); }
.category-count { color: var(--stone-400); font-size: 0.75rem; font-weight: 400; }
.category-item.active .category-count { color: var(--stone-500); }

/* Facet Panel */
.filter-panel { padding: 0; margin: 0; border: none; }
.filter-panel-header { display: none; }
.sidebar-refine-header { margin-bottom: 24px; padding-bottom: 14px; border-bottom: 0.5px solid rgba(28,25,23,0.09); }
.sidebar-refine-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sidebar-refine-label { font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone-500); }
.sidebar-refine-active { font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.sidebar-refine-bottom { display: flex; justify-content: space-between; align-items: center; }
.sidebar-refine-category { font: 400 15px/1 var(--font-heading); color: var(--stone-800); letter-spacing: 0.01em; }
.filter-clear { background: none; border: none; color: var(--gold); font: 500 11px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; padding: 0; text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; transition: color 0.15s; }
.filter-clear:hover { color: var(--gold-dark); border-bottom-color: var(--gold-dark); }
.filter-group { margin-bottom: 0; padding: 0; border-bottom: none; }
.filter-group:last-child { border-bottom: none; }
.filter-group + .filter-group { margin-top: 24px; padding-top: 24px; border-top: 0.5px solid rgba(28,25,23,0.07); }
.filter-group-title { font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; text-transform: uppercase; letter-spacing: 0.18em; color: var(--stone-800); margin-bottom: 0; padding: 0.25rem 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: color 0.15s; user-select: none; }
.filter-group-title:hover { color: var(--gold); }
.filter-group-title span:last-child { font-size: 0.875rem; font-weight: 300; color: var(--stone-400); transition: transform 0.2s; }
.filter-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; cursor: pointer; }
.filter-option input[type="checkbox"] { display: none; }
/* Custom FacetCheck */
.facet-check { width: 15px; height: 15px; border: 0.5px solid rgba(28,25,23,0.3); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; background: transparent; outline: none; }
.facet-check:hover { border-color: var(--stone-500); }
.facet-check.checked { background: var(--gold); border-color: var(--gold); }
.facet-check svg { width: 10px; height: 10px; }
.filter-option label { cursor: pointer; flex-grow: 1; font: 400 13px/1.3 var(--font-body); color: rgba(28,25,23,0.8); transition: color 0.15s; }
.filter-option:hover label { color: var(--stone-900); }
.filter-option .filter-count { font: 400 10px/1 ui-monospace, SFMono-Regular, monospace; color: var(--stone-400); flex-shrink: 0; }
.show-more-btn { background: none; border: none; color: var(--gold); font: 500 11px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; padding: 0.625rem 0 0; transition: color 0.15s; }
.show-more-btn:hover { color: var(--gold-dark); text-decoration: underline; }

/* Filter search input */
.filter-search-input { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--stone-200); border-radius: 4px; font-size: 0.75rem; font-family: var(--font-body); margin-bottom: 0.5rem; outline: none; transition: border-color 0.15s; background: var(--stone-50); }
.filter-search-input:focus { border-color: var(--stone-400); }
.filter-search-input::placeholder { color: var(--stone-400); }

/* Scrollable filter value lists */
.filter-values-scroll { max-height: 240px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--stone-300) transparent; }
.filter-values-scroll::-webkit-scrollbar { width: 4px; }
.filter-values-scroll::-webkit-scrollbar-track { background: transparent; }
.filter-values-scroll::-webkit-scrollbar-thumb { background: var(--stone-300); border-radius: 2px; }

/* Filter group count badge */
.filter-group-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 9px; background: var(--gold); color: white; font-size: 0.625rem; font-weight: 600; margin-left: 0.4rem; padding: 0 4px; letter-spacing: 0; text-transform: none; }

/* Accordion animation for filter groups */
.filter-group-content { max-height: 600px; opacity: 1; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; margin-top: 0.625rem; }
.filter-group-content.collapsed { max-height: 0; opacity: 0; margin-top: 0; pointer-events: none; }

/* Mobile filter button badge */
.filter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 9px; background: var(--stone-800); color: white; font-size: 0.625rem; font-weight: 600; margin-left: 0.4rem; padding: 0 4px; }

/* Color family grid */
.color-family-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.25rem; }
.color-family-swatch { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; cursor: pointer; padding: 0.25rem; border-radius: 0; transition: background 0.15s; background: none; border: none; font-family: inherit; }
.color-family-swatch:hover { background: transparent; }
.color-family-swatch.active { background: transparent; }
.color-family-circle { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(28,25,23,0.15); transition: border-color 0.2s, box-shadow 0.2s; flex-shrink: 0; }
.color-family-swatch:hover .color-family-circle { border-color: var(--stone-500); }
.color-family-swatch.active .color-family-circle { border-color: var(--gold); box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 4px var(--warm-bg), 0 0 0 5.5px var(--gold); }
.color-family-name { font: 500 9px/1.2 var(--font-body); color: var(--stone-600); text-align: center; }
.color-family-swatch.active .color-family-name { color: var(--stone-900); font-weight: 600; }

/* Price range filter */
.price-range-wrapper { padding: 0.25rem 0; }
.price-range-slider { position: relative; height: 28px; margin-bottom: 0.75rem; }
.price-range-track { position: absolute; top: 12px; left: 0; right: 0; height: 4px; background: var(--stone-200); border-radius: 2px; }
.price-range-fill { position: absolute; top: 12px; height: 4px; background: var(--stone-700); border-radius: 2px; }
.price-range-slider input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 28px; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; margin: 0; }
.price-range-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: white; border: 2px solid var(--stone-700); cursor: pointer; pointer-events: auto; position: relative; z-index: 2; }
.price-range-slider input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: white; border: 2px solid var(--stone-700); cursor: pointer; pointer-events: auto; }
.price-range-inputs { display: flex; align-items: center; gap: 0.5rem; }
.price-input-wrap { display: flex; align-items: center; border: 1px solid var(--stone-200); border-radius: 4px; padding: 0.25rem 0.4rem; flex: 1; background: white; }
.price-input-wrap span { font-size: 0.75rem; color: var(--stone-500); margin-right: 0.125rem; }
.price-input-wrap input { border: none; outline: none; font-size: 0.75rem; font-family: var(--font-body); width: 100%; background: transparent; -moz-appearance: textfield; }
.price-input-wrap input::-webkit-inner-spin-button, .price-input-wrap input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.price-range-dash { color: var(--stone-400); font-size: 0.75rem; }

/* Vendor filter group */
.vendor-filter-group { /* no special styling needed beyond filter-group */ }

/* Active Filter Pills */
/* Tag chips in filter panel */
.tag-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0.5rem 0; }
.tag-chip { padding: 0.375rem 0.75rem; border: 1px solid var(--stone-200); background: white; font-size: 0.75rem; cursor: pointer; border-radius: 100px; font-family: var(--font-body); transition: all 0.15s; color: var(--stone-600); white-space: nowrap; }
.tag-chip:hover { border-color: var(--stone-400); color: var(--stone-800); }
.tag-chip.active { background: var(--stone-800); color: white; border-color: var(--stone-800); }
.tag-chip .filter-count { font-size: 0.6875rem; opacity: 0.7; margin-left: 0.25rem; }

/* Room tag cards */
.room-tag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.5rem 0; }
.room-tag-card { padding: 0.625rem 0.75rem; border: 1px solid var(--stone-200); background: white; cursor: pointer; border-radius: 4px; transition: all 0.2s; text-align: left; }
.room-tag-card:hover { border-color: var(--stone-400); }
.room-tag-card.active { background: var(--stone-800); border-color: var(--stone-800); color: white; }
.room-tag-card-name { display: block; font: 400 13px/1.3 var(--font-heading); color: var(--stone-800); }
.room-tag-card.active .room-tag-card-name { color: white; }
.room-tag-card-count { display: block; font: 400 10px/1 ui-monospace, SFMono-Regular, monospace; color: var(--stone-400); margin-top: 2px; }
.room-tag-card.active .room-tag-card-count { color: rgba(255,255,255,0.65); }

/* More Filters toggle */
.more-filters-divider { border-top: 0.5px solid rgba(28,25,23,0.09); margin-top: 32px; padding-top: 24px; }
.more-filters-toggle { background: none; border: none; font: 400 15px/1 var(--font-heading); color: var(--stone-600); cursor: pointer; padding: 0; display: flex; align-items: center; gap: 0.5rem; transition: color 0.15s; user-select: none; width: 100%; }
.more-filters-toggle:hover { color: var(--gold); }
.more-filters-content { overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; }
.more-filters-content.collapsed { max-height: 0; opacity: 0; pointer-events: none; }
.more-filters-content.expanded { max-height: 2000px; opacity: 1; }

/* Tag badges on product detail */
.product-tag-badges { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.75rem 0; }
.product-tag-badge { padding: 0.25rem 0.625rem; background: var(--stone-100); color: var(--stone-700); font-size: 0.6875rem; border-radius: 100px; font-weight: 500; }

.active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.active-filters-label { font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone-500); margin-right: 4px; }
.filter-pill { display: inline-flex; align-items: center; gap: 6px; background: transparent; padding: 6px 10px 6px 12px; font: 400 12px/1 var(--font-body); color: var(--stone-700); border-radius: 0; border: 0.5px solid rgba(28,25,23,0.2); }
.filter-pill-group { font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone-500); margin-right: 2px; }
.filter-pill button { background: none; border: none; cursor: pointer; color: var(--stone-400); font: 400 14px/1 var(--font-body); padding: 0 0 0 4px; line-height: 1; transition: color 0.15s; }
.filter-pill button:hover { color: var(--stone-800); }

/* Browse Toolbar */
.browse-toolbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 0.5px solid rgba(28,25,23,0.09); margin-bottom: 22px; flex: 1; gap: 20px; }
.browse-toolbar .result-count { font: 500 11px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone-800); }
.browse-toolbar-right { display: flex; align-items: center; gap: 16px; }
.browse-toolbar select { padding: 0.4rem 0.6rem; border: none; font: 500 11px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.12em; text-transform: uppercase; background: transparent; color: var(--stone-800); cursor: pointer; }
.browse-toolbar .sort-group { display: flex; align-items: center; gap: 10px; }
.browse-toolbar .sort-label { font: 500 11px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone-500); }
/* View mode toggle */
.view-mode-toggle { display: flex; border: 0.5px solid rgba(28,25,23,0.2); }
.view-mode-btn { padding: 6px 12px; background: transparent; border: none; font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-500); cursor: pointer; transition: all 0.15s; border-right: 0.5px solid rgba(28,25,23,0.2); }
.view-mode-btn:last-child { border-right: none; }
.view-mode-btn:hover { color: var(--stone-800); }
.view-mode-btn.active { background: var(--stone-800); color: var(--warm-bg); }

/* ── SKU GRID & CARDS ── */
.sku-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sku-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sku-grid--compact .sku-card-image { height: 200px; }
.sku-grid--compact .sku-card-name { font-size: 16px; }
.sku-grid--compact .sku-card-body { padding: 12px 14px 14px; }
/* Spec / list view */
.sku-grid--spec { grid-template-columns: 1fr; gap: 0; border-top: 0.5px solid rgba(28,25,23,0.12); }
.sku-grid--spec .sku-card { display: grid; grid-template-columns: 120px 1fr; align-items: center; border-bottom: 0.5px solid rgba(28,25,23,0.09); border-left: none; border-right: none; border-top: none; }
.sku-grid--spec .sku-card:hover { transform: none; box-shadow: none; background: rgba(28,25,23,0.025); }
.sku-grid--spec .sku-card:hover .sku-card-image .sku-card-alt-img { opacity: 0; }
.sku-grid--spec .sku-card-image { height: 80px; width: 120px; }
.sku-grid--spec .sku-card-image img { object-fit: cover; }
.sku-grid--spec .sku-card-body { padding: 12px 24px; display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: auto auto; align-items: center; gap: 2px 32px; }
.sku-grid--spec .sku-card-meta-row { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.sku-grid--spec .sku-card-name { grid-column: 1; grid-row: 2; font-size: 16px; }
.sku-grid--spec .sku-card-variant-swatches { display: none; }
.sku-grid--spec .sku-card-vendor { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-width: 140px; text-align: right; }
.sku-grid--spec .sku-card-price-row { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin-top: 0; gap: 16px; flex-direction: column; align-items: flex-end; }
.sku-grid--spec .sku-card-view-link { font-size: 10px; }
.sku-grid--spec .sku-card-qv-gradient { display: none; }
.sku-grid--spec .sku-card-hover-actions { display: none; }
/* Spec view header row */
.spec-header { display: grid; grid-template-columns: 120px 1fr; align-items: center; border-bottom: 1px solid rgba(28,25,23,0.12); padding: 10px 0; }
.spec-header-cols { display: grid; grid-template-columns: 1fr auto auto; gap: 32px; padding: 0 24px; }
.spec-header-col { font: 500 9px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone-400); }
.spec-header-col:nth-child(2) { text-align: right; min-width: 140px; }
.spec-header-col:nth-child(3) { text-align: right; }
.sku-card { cursor: pointer; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; position: relative; content-visibility: auto; contain-intrinsic-size: auto 420px; min-width: 0; border: 0.5px solid rgba(28,25,23,0.13); background: var(--warm-bg); }
.sku-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(28,25,23,0.09); border-color: rgba(28,25,23,0.22); }
/* Image placeholder: containers show a subtle icon background when images fail or are missing */
.sku-card-image, .sibling-card-image, .collection-card-image, .quick-view-main-image, .cart-drawer-item-img,
.sku-detail-image, .form-specimen-card-image, .shop-featured-card-image, .mobile-search-result-img {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect fill='%23f5f0eb' width='100' height='100'/%3E%3Cg transform='translate(25,25)' opacity='0.18'%3E%3Crect x='5' y='5' width='40' height='40' rx='4' fill='none' stroke='%23a0937d' stroke-width='2'/%3E%3Ccircle cx='18' cy='18' r='4' fill='none' stroke='%23a0937d' stroke-width='2'/%3E%3Cpath d='M45 35L33 23 15 45' fill='none' stroke='%23a0937d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 40%;
}
.sku-card-image { width: 100%; height: 280px; background-color: var(--stone-50); overflow: hidden; margin-bottom: 0; position: relative; padding: 0; }
.sku-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; background: var(--warm-bg); transition: transform 600ms ease; }
.sku-card:hover .sku-card-image img { transform: scale(1.04); }
.sku-card--contain .sku-card-image img { object-fit: contain; }
.sku-card-image .sku-card-alt-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s; background: var(--warm-bg); }
.sku-card--contain .sku-card-image .sku-card-alt-img { object-fit: contain; }
.sku-detail--contain .gallery-thumb img { object-fit: contain; }
.sku-detail--contain .sibling-card-image img { object-fit: contain; }
.sku-detail--contain .variant-grid .sibling-card-image img { object-fit: contain; }
.sku-detail--contain .accessory-card-sf-image img { object-fit: contain; }
.sku-detail--contain .accessory-card-sf-img img { object-fit: contain; }
.sku-card:hover .sku-card-image .sku-card-alt-img { opacity: 1; }
/* Hover action buttons (wishlist, compare) */
.sku-card-hover-actions { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 3; opacity: 0; transition: opacity 220ms; }
.sku-card:hover .sku-card-hover-actions { opacity: 1; }
.sku-card-action-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--warm-bg); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.18); transition: all 220ms; color: var(--stone-400); }
.sku-card-action-btn:hover { color: var(--color-rose); background: rgba(255,255,255,1); }
.sku-card-action-btn.active { color: var(--color-rose); opacity: 1; }
.sku-card-action-btn svg { width: 16px; height: 16px; }
/* Gradient quick-view CTA at bottom of image */
.sku-card-qv-gradient { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(0deg, rgba(28,25,23,0.8), transparent); padding: 36px 0 14px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 220ms; z-index: 2; cursor: pointer; }
.sku-card:hover .sku-card-qv-gradient { opacity: 1; }
.sku-card-qv-btn { background: var(--warm-bg); color: var(--stone-800); border: none; padding: 10px 20px; font: 500 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: all 220ms; }
.sku-card-qv-btn:hover { background: var(--stone-800); color: var(--warm-bg); }
.sku-card-body { padding: 16px 20px 18px; display: grid; gap: 6px; }
.sku-card-meta-row { display: flex; justify-content: space-between; font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone-500); }
.sku-card-meta-row .sku-card-stock { }
.sku-card-meta-row .sku-card-stock--in { color: #3a7a4e; }
.sku-card-meta-row .sku-card-stock--low { color: #a87935; }
.sku-card-meta-row .sku-card-stock--out { color: var(--stone-500); }
.sku-card-name { font: 300 22px/1.12 var(--font-heading); letter-spacing: -0.014em; margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.sku-card-vendor { font: 400 13px/1.3 var(--font-body); color: rgba(28,25,23,0.6); letter-spacing: 0; margin-bottom: 0; }
.sku-card-options { font-size: 0.7rem; color: var(--stone-400); margin-bottom: 0; }
.sku-card-variant { font-size: 0.8125rem; color: var(--stone-500); margin-bottom: 0; }
.sku-card-attrs { display: none; }
.sku-card-price-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; }
.sku-card-price { font: 400 18px/1 var(--font-heading); color: var(--stone-800); }
.sku-card-price .price-suffix { font: 400 11px/1 var(--font-body); color: var(--stone-500); }
.sku-card-view-link { font: 500 11px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
/* Variant swatches on PLP cards */
.sku-card-variant-swatches { display: flex; gap: 4px; align-items: center; margin-top: 2px; }
.sku-card-variant-dot { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; border: 0.5px solid rgba(28,25,23,0.15); flex-shrink: 0; }
.sku-card-variant-dot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sku-card-variant-more { font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; color: var(--stone-500); margin-left: 2px; }

/* Stock Badge */
.stock-badge { display: inline-block; font-size: 0.675rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.5rem; margin-bottom: 0.5rem; }
.stock-badge--in-stock { background: var(--color-success-bg); color: var(--color-success); }
.stock-badge--low-stock { background: var(--color-warning-bg); color: var(--color-warning); }
.stock-badge--out-of-stock { background: var(--color-error-bg); color: var(--color-error); }
.stock-badge--unknown { background: var(--stone-100); color: var(--stone-600); }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 8px; padding-top: 32px; border-top: 0.5px solid rgba(28,25,23,0.09); }
.pagination-pages { display: flex; align-items: center; gap: 4px; }
.pagination-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0; border: none; background: transparent; color: var(--stone-500); font: 500 11px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: color 0.2s; }
.pagination-btn:hover:not(:disabled) { color: var(--stone-900); }
.pagination-btn:disabled { opacity: 0.35; cursor: default; }
.pagination-num { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--stone-800); font: 400 14px/1 var(--font-heading); cursor: pointer; transition: all 0.2s; }
.pagination-num:hover:not(.active) { background: rgba(28,25,23,0.05); }
.pagination-num.active { background: var(--stone-800); color: var(--warm-bg); }
.pagination-ellipsis { width: 36px; text-align: center; color: var(--stone-400); font-size: 0.875rem; }

/* ── SKU DETAIL ── */
.sku-detail { max-width: var(--max-width); margin: 0 auto; padding: 2rem 6vw 5rem; }
.sku-detail-main { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: start; }
.sku-detail-gallery { min-width: 0; overflow: hidden; position: sticky; top: 90px; }
.sku-detail-info { min-width: 0; position: sticky; top: 90px; display: grid; gap: 1.375rem; }
.pdp-details-below { margin-top: 3rem; max-width: 720px; }
.sku-detail-image { width: 100%; padding-bottom: 100%; position: relative; background: var(--warm-bg); border-radius: 2px; overflow: hidden; }
.sku-detail-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
/* Blur-up: warm 400px variant paints instantly under the streaming hero */
.sku-detail-image .pdp-hero-lowres { filter: blur(10px); transform: scale(1.03); transition: opacity 0.2s ease; }
.sku-detail-image:has(.pdp-hero-main.is-loaded) .pdp-hero-lowres { opacity: 0; }
.sku-detail-image .pdp-hero-main { opacity: 0; transition: opacity 0.25s ease; }
.sku-detail-image .pdp-hero-main.is-loaded { opacity: 1; }
.gallery-main-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem 1.125rem; font: 500 10px/1.2 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: white; background: linear-gradient(transparent, rgba(28,25,23,0.45)); pointer-events: none; z-index: 1; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.5rem; margin-top: 0.75rem; }
.pdp-specs-section { margin-top: 2.5rem; }
.gallery-thumb { aspect-ratio: 1; overflow: hidden; cursor: pointer; border: 0.5px solid rgba(21,18,15,0.2); transition: border-color 0.2s; flex-shrink: 0; border-radius: 2px; position: relative; }
.gallery-thumb.active { border-width: 1.5px; border-color: var(--stone-900); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 8px; font: 500 9px/1.2 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: white; background: linear-gradient(transparent, rgba(28,25,23,0.56)); pointer-events: none; }
/* PDP Back Button */
.pdp-back-btn { flex-shrink: 0; width: 44px; height: 44px; border: 0.5px solid rgba(21,18,15,0.2); background: transparent; border-radius: 999px; cursor: pointer; display: grid; place-items: center; color: var(--stone-900); transition: border-color 0.15s; padding: 0; margin-bottom: 1rem; }
.pdp-back-btn:hover { border-color: var(--stone-600); }
.pdp-back-btn svg { flex-shrink: 0; }
/* PDP Breadcrumbs */
.pdp-breadcrumbs { display: flex; gap: 0.5rem; align-items: center; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone-500); margin-bottom: 1.75rem; flex-wrap: wrap; }
.pdp-breadcrumbs a { color: var(--stone-500); text-decoration: none; }
.pdp-breadcrumbs a:hover { color: var(--gold); }
.pdp-breadcrumbs .pdp-crumb { width: 14px; height: 1px; background: rgba(21,18,15,0.2); }
/* PDP Buy Box Header */
.pdp-category-label { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone-500); margin-bottom: 0.875rem; }
.sku-detail-title-row { font-family: var(--font-heading); font-size: 2.75rem; font-weight: 300; line-height: 1.12; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.pdp-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pdp-variant-name { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 300; font-style: italic; line-height: 1.3; color: rgba(21,18,15,0.67); margin-top: 0.25rem; }
.pdp-sku-line { display: flex; gap: 0.875rem; align-items: baseline; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-500); margin-top: 1.125rem; }
.pdp-sku-line .pdp-sku-val { color: var(--stone-900); }
.pdp-sku-line .pdp-sku-sep { width: 1px; height: 12px; background: rgba(21,18,15,0.13); }
.pdp-wishlist-heart { flex-shrink: 0; width: 44px; height: 44px; border: 0.5px solid rgba(21,18,15,0.2); background: transparent; border-radius: 999px; cursor: pointer; display: grid; place-items: center; color: var(--stone-900); transition: border-color 0.15s; }
.pdp-wishlist-heart:hover { border-color: var(--stone-600); }
.pdp-wishlist-heart.active { color: var(--color-rose-dark); }
/* PDP Price Block */
.sku-detail-price { padding-top: 1.375rem; border-top: 0.5px solid rgba(21,18,15,0.13); display: grid; gap: 0.375rem; margin: 0; padding-bottom: 0; border-bottom: none; }
.pdp-price-main { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.pdp-price-amount { font-family: var(--font-heading); font-size: 2.75rem; font-weight: 300; line-height: 1; color: var(--stone-900); }
.pdp-price-suffix { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; color: var(--stone-500); }
.pdp-price-strike { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 400; color: var(--stone-500); text-decoration: line-through; }
.pdp-price-badge { padding: 0.3125rem 0.625rem; border-radius: 2px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.pdp-price-badge.trade { background: var(--gold); color: white; }
.pdp-price-badge.sale { background: var(--color-rose-dark); color: white; }
.pdp-price-per-box { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; color: var(--stone-500); }
.pdp-price-roll-badge { font-size: 0.75rem; font-weight: 500; color: #4a7c3e; padding: 0.25rem 0.5rem; background: rgba(74,124,62,0.06); border-radius: 2px; width: fit-content; }
.pdp-klarna { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding: 0.5rem 0.625rem; background: rgba(255,179,199,0.16); border: 0.5px solid rgba(255,179,199,0.55); border-radius: 4px; width: fit-content; max-width: 100%; }
.pdp-klarna-icon { flex-shrink: 0; font-weight: 700; font-size: 0.8125rem; letter-spacing: -0.01em; color: #0b051d; background: #ffb3c7; padding: 0.125rem 0.4rem; border-radius: 3px; }
.pdp-klarna-text { font-size: 0.75rem; color: var(--stone-600); line-height: 1.35; }
.pdp-klarna-text strong { font-weight: 600; color: var(--stone-800); }
.pdp-tier { margin-top: 0.875rem; padding: 0.75rem 0.875rem; background: rgba(168,121,53,0.05); border: 0.5px solid rgba(168,121,53,0.28); border-radius: 4px; }
.pdp-tier-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone-500); }
.pdp-tier-next { color: var(--gold); }
.pdp-tier-track { position: relative; height: 4px; border-radius: 999px; background: var(--stone-200); margin: 0.5rem 0; overflow: hidden; }
.pdp-tier-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: var(--gold); }
.pdp-tier-gap { font-family: var(--font-body); font-size: 0.75rem; color: var(--stone-600); }
.pdp-tier-gap strong { font-weight: 600; color: var(--stone-800); }
.pdp-tier-payoff { margin-top: 0.375rem; font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.4; color: var(--stone-600); }
.pdp-tier-payoff strong { font-weight: 600; color: var(--gold-dark); }
.pdp-tier-save { color: var(--stone-500); }

/* Trade dashboard — Overview concept */
.td-mast { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding: 0.25rem 0 1.25rem; border-bottom: 1px solid var(--stone-800); flex-wrap: wrap; }
.td-mast-k { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone-500); }
.td-mast-tier { color: var(--gold-dark); }
.td-greet { font-family: var(--font-heading); font-weight: 300; font-size: 2.25rem; line-height: 1.05; letter-spacing: -0.01em; margin: 0.4rem 0 0; }
.td-greet em { font-style: italic; color: var(--gold-dark); }
.td-rep-mini { display: flex; align-items: center; gap: 0.75rem; text-align: right; }
.td-rep-mini b { display: block; font-weight: 600; font-size: 0.8125rem; }
.td-rep-mini span { font-size: 0.75rem; color: var(--stone-500); }
.td-rep-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--stone-800); color: var(--gold-light); display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 0.8125rem; flex: none; }
.td-band { display: grid; grid-template-columns: 1fr 300px; border-bottom: 1px solid var(--stone-200); }
.td-band-l { padding: 1.75rem 2.25rem 1.9rem 0; border-right: 1px solid var(--stone-200); }
.td-band-r { padding: 1.75rem 0 1.75rem 2.25rem; display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; }
.td-tier-now { font-family: var(--font-heading); font-weight: 300; font-size: 1.85rem; margin: 0.35rem 0 0; }
.td-tier-now b { font-weight: 500; }
.td-tier-pct { font-weight: 500; font-size: 0.75rem; color: var(--gold-dark); letter-spacing: 0.05em; margin-left: 0.5rem; }
.td-ladder { position: relative; height: 54px; margin-top: 2.1rem; }
.td-ladder-rail { position: absolute; top: 8px; left: 0; right: 0; height: 2px; background: var(--stone-200); }
.td-ladder-fill { position: absolute; top: 8px; left: 0; height: 2px; background: var(--gold); }
.td-stop { position: absolute; top: 0; transform: translateX(-50%); text-align: center; }
.td-stop i { display: block; width: 14px; height: 14px; margin: 0 auto; border-radius: 50%; background: var(--cream); border: 2px solid var(--stone-300); font-style: normal; }
.td-stop.hit i { background: var(--gold); border-color: var(--gold); }
.td-stop small { display: block; margin-top: 8px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.5625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone-500); white-space: nowrap; }
.td-stop.first { transform: none; text-align: left; } .td-stop.first i { margin: 0; }
.td-stop.last { transform: translateX(-100%); text-align: right; } .td-stop.last i { margin: 0 0 0 auto; }
.td-stop.you { top: -28px; } .td-stop.you i { background: var(--stone-800); border-color: var(--stone-800); margin-top: 2px; }
.td-stop.you small { margin-top: 0; margin-bottom: 8px; color: var(--stone-800); font-weight: 600; }
.td-unlock-big { font-family: var(--font-heading); font-weight: 300; font-size: 2rem; line-height: 1; }
.td-unlock-big b { font-weight: 500; }
.td-unlock-note { font-size: 0.75rem; color: var(--stone-500); line-height: 1.55; }
.td-unlock-note b { color: var(--stone-800); }
.td-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--stone-200); }
.td-stat { padding: 1.25rem 0; border-right: 1px solid var(--stone-200); }
.td-stat:last-child { border-right: 0; }
.td-stat + .td-stat { padding-left: 1.5rem; }
.td-stat-v { font-family: var(--font-heading); font-weight: 300; font-size: 1.7rem; line-height: 1.1; margin-top: 0.4rem; }
.td-stat-d { font-size: 0.6875rem; color: var(--stone-500); margin-top: 0.25rem; }
.td-main { display: grid; grid-template-columns: 1fr 300px; align-items: start; }
.td-col-l { border-right: 1px solid var(--stone-200); padding: 1.75rem 2.25rem 2rem 0; }
.td-col-r { padding: 1.75rem 0 2rem 2.25rem; display: grid; gap: 2rem; }
.td-sec-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.9rem; }
.td-sec-h h2 { font-family: var(--font-heading); font-weight: 400; font-size: 1.375rem; margin: 0; }
.td-sec-h a { font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; color: var(--gold-dark); }
.td-otable { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.td-otable th { text-align: left; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-500); padding: 0 0.75rem 0.6rem 0; border-bottom: 1px solid var(--stone-800); font-weight: 500; }
.td-otable td { padding: 0.85rem 0.75rem 0.85rem 0; border-bottom: 1px solid var(--stone-200); vertical-align: top; }
.td-otable .num { text-align: right; padding-right: 0; }
.td-oid { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.6875rem; color: var(--stone-500); }
.td-oname { font-weight: 600; }
.td-oproj { font-size: 0.6875rem; color: var(--stone-500); }
.td-pill { display: inline-block; padding: 0.15rem 0.5rem; font-weight: 500; font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--stone-300); border-radius: 999px; color: var(--stone-500); white-space: nowrap; }
.td-pill.open { border-color: var(--gold); color: var(--gold-dark); }
.td-pill.done { border-color: #cfe0d4; background: #f2f7f3; color: #3f6f4e; }
/* Overview order status — color-coded dot + label (dot and label share the status color) */
.td-ostatus { display: inline-flex; align-items: center; gap: 0.4rem; font: 500 0.75rem/1 'Inter', sans-serif; letter-spacing: 0.01em; white-space: nowrap; }
.td-ostatus-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.td-quote-row { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 0; border-bottom: 1px solid var(--stone-200); gap: 1rem; }
.td-quote-row:last-child { border-bottom: 0; }
.td-qexp { font-size: 0.6875rem; color: #a3552f; margin-top: 0.15rem; }
.td-side-card { border: 1px solid var(--stone-200); background: white; padding: 1.1rem 1.2rem; }
.td-side-card h3 { font-family: var(--font-heading); font-weight: 400; font-size: 1.05rem; margin: 0.3rem 0 0.7rem; }
.td-perk { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--stone-200); font-size: 0.75rem; }
.td-perk:last-child { border-bottom: 0; }
.td-perk span { color: var(--stone-500); } .td-perk b { font-weight: 600; }
.td-reorder { display: flex; gap: 0.7rem; align-items: center; padding: 0.55rem 0; border-bottom: 1px solid var(--stone-200); }
.td-reorder:last-child { border-bottom: 0; }
.td-reorder .sw { width: 36px; height: 36px; flex: none; object-fit: cover; background: var(--stone-100); }
.td-reorder b { display: block; font-size: 0.75rem; }
.td-reorder span { font-size: 0.6875rem; color: var(--stone-500); }
.td-reorder a { margin-left: auto; font-weight: 500; font-size: 0.5625rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; color: var(--gold-dark); }
.td-pm-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.td-pm-actions .btn { flex: 1; text-align: center; padding: 0.6rem 0; font-size: 0.625rem; }
/* Concept-faithful hairline grid. --stone-200 (#e7e5e4, cool) is near-invisible on the
   storefront's warm beige bg (#ece5d8), so the editorial dividers vanished. Recolor every
   td-* hairline to a warm line that reads, mirroring the mockup's #e5e0d8-on-paper. */
.trade-dashboard, .trade-acct-page { --td-line: #d8cdbb; }
.trade-acct-page .td-band,
.trade-acct-page .td-stats,
.trade-acct-page .td-otable td,
.trade-acct-page .td-quote-row,
.trade-acct-page .td-perk,
.trade-acct-page .td-reorder { border-bottom-color: var(--td-line); }
.trade-acct-page .td-band-l,
.trade-acct-page .td-stat,
.trade-acct-page .td-col-l { border-right-color: var(--td-line); }
.trade-acct-page .td-side-card { border-color: var(--td-line); }
.trade-acct-page .td-ladder-rail { background: var(--td-line); }
/* Overview concept renders inside .acct-content; keep its own borders/margins, not the shell's grid gap. */
.trade-acct-body--overview .acct-content > div { display: block; }
@media (max-width: 900px) {
  .td-band, .td-main { grid-template-columns: 1fr; }
  .td-band-l, .td-col-l { border-right: 0; padding-right: 0; }
  .td-band-r, .td-col-r { padding-left: 0; }
  /* Stats stay 2-up on tablet/phone (denser than a single column) until it's very narrow. */
  .td-stats { grid-template-columns: repeat(2, 1fr); column-gap: 1.25rem; }
  .td-stat { border-right: 0; padding: 1rem 0; }
  .td-stat + .td-stat { padding-left: 0; }
}
@media (max-width: 600px) {
  .td-mast { align-items: flex-start; gap: 0.5rem; }
  .td-greet { font-size: 1.75rem; }
  .td-rep-mini { text-align: left; }
  .td-tier-now { font-size: 1.5rem; }
  .td-tier-pct { display: block; margin-left: 0; margin-top: 0.3rem; }
  .td-unlock-big { font-size: 1.6rem; }
  /* The horizontal tier ladder's tiny absolute labels collide on phones; the
     "% to <tier>" line + the "to unlock" card already convey progress, so hide it. */
  .td-ladder { display: none; }
}
@media (max-width: 440px) {
  .td-stats { grid-template-columns: 1fr; }
  .td-stat { padding: 0.85rem 0; }
}

/* Variant Selectors */
.variant-selectors { margin: 0; display: flex; flex-direction: column; gap: 1.375rem; }
.variant-selector-group {}
.variant-selector-label { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone-500); margin-bottom: 0.75rem; display: flex; justify-content: space-between; align-items: baseline; }
.variant-selector-label span { font-family: var(--font-heading); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--stone-900); margin-left: 0.5rem; font-size: 0.9375rem; }
.variant-selectors .color-swatches { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.variant-selectors .color-swatch-wrap { position: relative; cursor: pointer; }
.variant-selectors .color-swatch { width: 70px; height: 70px; overflow: hidden; border: 0.5px solid rgba(21,18,15,0.2); transition: border-color 0.2s; border-radius: 3px; transform: none; position: static; }
.variant-selectors .color-swatch-wrap:hover .color-swatch { border-color: var(--stone-500); }
.variant-selectors .color-swatch.active { border-width: 2px; border-color: var(--stone-900); border-radius: 3px; }
.variant-selectors .color-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.color-swatch-wrap .color-swatch-tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--stone-900); color: white; font-size: 0.6875rem; padding: 0.25rem 0.5rem; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 10; }
.color-swatch-wrap:hover .color-swatch-tooltip { opacity: 1; }
.attr-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.attr-pill { padding: 0.4rem 0.875rem; border: 0.5px solid rgba(21,18,15,0.2); border-radius: 999px; background: transparent; font-size: 0.75rem; cursor: pointer; transition: all 0.15s; color: var(--stone-700); font-family: var(--font-body); }
.attr-pill:hover { border-color: var(--stone-600); }
.attr-pill.active { background: var(--stone-900); color: white; border-color: var(--stone-900); }
.attr-pill.disabled { color: var(--stone-300); border-color: rgba(21,18,15,0.08); text-decoration: line-through; text-decoration-color: var(--stone-300); cursor: pointer; }
.attr-pill.disabled:hover { color: var(--stone-500); border-color: var(--stone-400); text-decoration-color: var(--stone-400); }
.variant-selectors .color-swatch-wrap.disabled { cursor: pointer; }
.variant-selectors .color-swatch-wrap.disabled .color-swatch { opacity: 0.3; border: 2.5px dashed var(--stone-400); filter: grayscale(100%); transform: scale(0.88); border-radius: 3px; }
.variant-selectors .color-swatch-wrap.disabled:hover .color-swatch { border-color: var(--stone-600); opacity: 0.7; filter: grayscale(0%); transform: scale(1); }
.attr-pill.limited { color: var(--stone-300); border-color: rgba(21,18,15,0.08); text-decoration: line-through; text-decoration-color: var(--stone-300); cursor: pointer; }
.attr-pill.limited:hover { color: var(--stone-500); border-color: var(--stone-400); text-decoration-color: var(--stone-400); }
.variant-selectors .color-swatch-wrap.limited { cursor: pointer; }
.variant-selectors .color-swatch-wrap.limited .color-swatch { opacity: 0.45; border: 2px dashed var(--stone-400); border-radius: 3px; }
.variant-selectors .color-swatch-wrap.limited:hover .color-swatch { border-color: var(--stone-600); opacity: 0.8; }
.attr-select { width: 100%; padding: 0.6rem 1rem; border: 1.5px solid var(--stone-300); background: white; font-size: 0.875rem; font-family: var(--font-body); color: var(--stone-800); cursor: pointer; appearance: auto; }
.attr-select:hover { border-color: var(--stone-600); }
.attr-select:focus:not(:focus-visible) { outline: none; border-color: var(--stone-900); }
.attr-select:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* Categorized Specs */
.specs-categorized { margin-bottom: 2rem; }
.specs-category { margin-bottom: 1.5rem; }
.specs-category:last-child { margin-bottom: 0; }
.specs-category-header { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone-500); margin-bottom: 0.5rem; padding-bottom: 0.375rem; border-bottom: 2px solid var(--stone-200); }
/* PDP Section Label (editorial monospace) */
.pdp-section-label { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); padding-bottom: 0.75rem; margin-bottom: 1.375rem; border-bottom: 0.5px solid rgba(21,18,15,0.07); }
.pdp-section-number { display: inline-block; margin-right: 0.5ch; }
/* PDP Specs Table */
.specs-table { width: 100%; table-layout: fixed; margin-bottom: 0; }
.specs-table tr td { padding: 0.625rem 0; border-bottom: 0.5px solid rgba(21,18,15,0.07); font-size: 0.875rem; overflow-wrap: break-word; word-break: break-word; }
.specs-table tr td:first-child { font-weight: 400; color: var(--stone-500); width: 42%; font-family: var(--font-body); }
.specs-table tr td:last-child { font-family: var(--font-heading); font-weight: 400; color: var(--stone-900); }
.specs-table tr:last-child td { border-bottom: none; }
/* PDP Description */
.pdp-desc-section { margin-top: 3.5rem; }
.pdp-desc-label { font: 500 11px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.125rem; padding-bottom: 0.875rem; border-bottom: 0.5px solid rgba(21,18,15,0.07); }
.pdp-description { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 300; line-height: 1.5; color: var(--stone-900); max-width: 720px; text-wrap: pretty; letter-spacing: -0.005em; }
/* PDP Spec PDFs */
.pdp-docs-section { margin-top: 3rem; }
.pdp-docs-label { font: 500 11px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.125rem; padding-bottom: 0.875rem; border-bottom: 0.5px solid rgba(21,18,15,0.07); }
.pdp-pdf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0; }
.pdp-pdf-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; background: rgba(28,25,23,0.04); border-radius: 2px; text-decoration: none; color: var(--stone-900); transition: background 0.15s; }
.pdp-pdf-card:hover { background: var(--stone-100); }
.pdp-pdf-card svg { flex-shrink: 0; color: var(--stone-500); }
.pdp-pdf-card span { font-size: 0.8125rem; font-weight: 400; }
.pdp-pdf-card .pdp-pdf-type { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-500); display: block; margin-top: 0.125rem; }

/* Installation Info Section */
.install-info-section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--stone-200); }
.install-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 1rem; }
.install-badge { display: inline-flex; align-items: center; padding: 0.375rem 0.75rem; background: var(--color-info-bg); color: var(--color-info); font-size: 0.75rem; font-weight: 500; border-radius: var(--radius-sm); }
.install-quote-btn { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding: 0.75rem 1.5rem; background: transparent; border: 2px solid var(--gold); color: var(--stone-800); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: var(--transition-base); }
.install-quote-btn:hover { background: var(--gold); color: white; }

/* Calculator Widget */
.calculator-widget { background: var(--warm-bg); border: 0.5px solid rgba(21,18,15,0.13); border-radius: 4px; padding: 1.75rem; margin: 0; }
.calculator-widget h3 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 300; margin-bottom: 1.5rem; line-height: 1.2; }
.calc-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.calc-input-group { margin-bottom: 0; }
.calc-input-group label { display: block; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone-500); margin-bottom: 0.375rem; }
.calc-input { width: 100%; padding: 0.5rem 0; border: none; border-bottom: 0.5px solid rgba(21,18,15,0.2); font-family: var(--font-heading); font-size: 1.75rem; font-weight: 300; background: transparent; text-align: left; color: var(--stone-900); }
.calc-input:focus { outline: none; border-color: var(--gold); }
.calc-input:focus-visible { outline: none; border-color: var(--gold); }
.calc-input::placeholder { color: rgba(21,18,15,0.2); }
.calc-summary { background: rgba(28,25,23,0.04); padding: 1.25rem; margin-top: 1.25rem; border-left: none; border-radius: 4px; }
.calc-summary-row { display: flex; justify-content: space-between; padding: 0.5rem 0; font-size: 0.8125rem; color: var(--stone-600); }
.calc-summary-row span:last-child { font-weight: 500; color: var(--stone-900); }
.calc-summary-total { display: flex; justify-content: space-between; padding: 0.75rem 0 0; margin-top: 0.375rem; padding-top: 0.75rem; border-top: 0.5px solid rgba(21,18,15,0.13); font-weight: 600; font-size: 1.125rem; }
/* PDP Buttons */
.pdp-btn { width: 100%; height: 52px; display: flex; align-items: center; justify-content: center; gap: 0.625rem; border-radius: 999px; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; text-decoration: none; box-sizing: border-box; }
.pdp-btn-primary { background: var(--stone-900); color: white; border: none; }
.pdp-btn-primary:hover { background: #282420; }
.pdp-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.pdp-btn-ghost { background: transparent; color: var(--stone-900); border: 0.5px solid rgba(21,18,15,0.2); }
.pdp-btn-ghost:hover { border-color: var(--stone-600); }
.pdp-btn-gold { background: var(--gold); color: white; border: none; }
.pdp-btn-gold:hover { background: var(--gold-dark); }
/* Inquiry banners (Please Inquire / Call for Price & Stock) */
.pdp-inquiry-banner { background: var(--stone-900); border-radius: 4px; padding: 1.5rem; text-align: center; }
.pdp-inquiry-title { margin: 0 0 0.375rem; font-family: var(--font-heading); font-size: 1.125rem; font-weight: 300; color: white; }
.pdp-inquiry-sub { margin: 0; font-size: 0.8125rem; color: var(--stone-400); line-height: 1.5; }
/* Per-unit Add to Cart */
.unit-add-to-cart { margin: 0; }
.unit-qty-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.unit-qty-label { font-size: 0.875rem; font-weight: 500; color: var(--stone-700); }
.unit-qty-stepper { display: inline-flex; align-items: center; border: 0.5px solid rgba(21,18,15,0.13); border-radius: 999px; overflow: hidden; }
.unit-qty-stepper button { width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; font-size: 1.125rem; color: var(--stone-600); display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.unit-qty-stepper button:hover { background: var(--stone-100); }
.unit-qty-stepper input { width: 52px; height: 40px; border: none; border-left: 0.5px solid rgba(21,18,15,0.07); border-right: 0.5px solid rgba(21,18,15,0.07); text-align: center; font-size: 1rem; font-weight: 500; font-family: var(--font-body); background: transparent; -moz-appearance: textfield; }
.unit-qty-stepper input::-webkit-inner-spin-button,
.unit-qty-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.unit-qty-stepper input:focus:not(:focus-visible) { outline: none; }
.unit-qty-stepper input:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* PDP Packaging Info */
.packaging-info { margin: 0; font-size: 0.8125rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; padding-top: 1.125rem; border-top: 0.5px solid rgba(21,18,15,0.13); background: transparent; border-radius: 0; overflow: visible; }
.packaging-info h4 { display: none; }
.pdp-pkg-cell { background: transparent; padding: 0; display: grid; gap: 0.25rem; }
.pdp-pkg-cell-label { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone-500); }
.pdp-pkg-cell-value { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; color: var(--stone-900); }

/* Carpet Details Band */
.carpet-specs-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.5px; background: rgba(21,18,15,0.07); border: 0.5px solid rgba(21,18,15,0.07); border-radius: 4px; overflow: hidden; margin: 0; }
.carpet-spec-card { background: rgba(28,25,23,0.04); padding: 0.875rem; text-align: center; }
.carpet-spec-card-label { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.5625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--stone-500); margin-bottom: 0.25rem; }
.carpet-spec-card-value { font-family: var(--font-heading); font-size: 1rem; font-weight: 400; color: var(--stone-900); line-height: 1.3; }

/* Carpet Roll Specifications */
.carpet-roll-info { margin: 0; font-size: 0.8125rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5px; background: rgba(21,18,15,0.07); border: 0.5px solid rgba(21,18,15,0.07); border-radius: 4px; overflow: hidden; }
.carpet-roll-info h4 { display: none; }
.carpet-roll-info-grid { display: contents; }
.carpet-roll-info-row { background: rgba(28,25,23,0.04); padding: 0.875rem; display: grid; gap: 0.25rem; border-bottom: none; }
.carpet-roll-info-row:last-child { border-bottom: none; }
.carpet-roll-info-label { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone-500); }
.carpet-roll-info-value { font-family: var(--font-heading); font-size: 1rem; font-weight: 400; color: var(--stone-900); }

/* Carpet calculator roll width header */
.carpet-roll-width-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1.25rem; padding: 0.625rem 0.875rem; background: rgba(28,25,23,0.04); color: var(--stone-900); border-radius: 4px; font-size: 0.8125rem; font-weight: 500; border: 0.5px solid rgba(21,18,15,0.07); }
.carpet-roll-width-header svg { flex-shrink: 0; color: var(--stone-500); }
/* Calc mode tabs */
.calc-mode-tabs { display: flex; gap: 0.375rem; margin-bottom: 1.25rem; }
.calc-mode-tab { flex: 1; padding: 0.4375rem 0.25rem; border: 0.5px solid rgba(21,18,15,0.13); border-radius: 999px; cursor: pointer; font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; background: transparent; color: var(--stone-600); transition: all 0.15s; }
.calc-mode-tab.active { background: var(--stone-900); color: white; border-color: var(--stone-900); }

/* Carpet calculator overage + weight */
.carpet-overage-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; cursor: pointer; margin-top: 0.75rem; color: var(--stone-600); }
.carpet-overage-label input[type="checkbox"] { accent-color: var(--gold); }
.carpet-seam-note { display: flex; align-items: flex-start; gap: 0.5rem; background: #fef3cd; border: 1px solid #f0d36e; border-radius: 0.375rem; padding: 0.625rem 0.75rem; font-size: 0.8125rem; color: #856404; margin-top: 0.5rem; }
.carpet-seam-note svg { flex-shrink: 0; margin-top: 1px; }

/* Siblings Strip */
/* PDP Section scroll nav */
.pdp-section-nav {
  position: fixed; top: var(--header-height); left: 0; right: 0; z-index: 99;
  display: flex; justify-content: center; gap: 0.125rem;
  padding: 0 1.5rem;
  background: rgba(236,229,216,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 0.5px solid rgba(21,18,15,0.07);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  opacity: 0; pointer-events: none;
  transform: translateY(-100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.pdp-section-nav::-webkit-scrollbar { display: none; }
.pdp-section-nav.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.pdp-section-nav-btn {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--stone-400);
  background: none; border: none; cursor: pointer;
  padding: 0.75rem 1rem;
  position: relative;
  transition: color 0.2s;
  white-space: nowrap;
}
.pdp-section-nav-btn::after {
  content: ''; position: absolute; bottom: 0; left: 1rem; right: 1rem;
  height: 1.5px; background: var(--gold);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.22s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.pdp-section-nav-btn:hover { color: var(--stone-700); }
.pdp-section-nav-btn:hover::after { transform: scaleX(1); }
.pdp-section-nav-btn.active { color: var(--gold-dark); }
.pdp-section-nav-btn.active::after { transform: scaleX(1); }
@media (max-width: 768px) {
  /* Center the tabs when they fit; `safe` falls back to start when they
     overflow so the leftmost tab stays reachable in the scroll. */
  .pdp-section-nav { padding: 0 1rem; gap: 0; justify-content: flex-start; justify-content: safe center; }
  .pdp-section-nav-btn { font-size: 0.625rem; padding: 0.625rem 0.75rem; }
}

.siblings-section { margin-top: 4rem; padding-top: 3rem; border-top: 0.5px solid rgba(21,18,15,0.07); }
.siblings-section-header { margin-bottom: 2rem; }
.siblings-section-eyebrow { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.75rem; }
.siblings-section h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; margin-bottom: 0; line-height: 1.15; }
.siblings-section h2 em { font-style: italic; font-weight: 300; }
.siblings-section-sub { font-size: 0.9375rem; color: rgba(21,18,15,0.6); margin-top: 0.5rem; max-width: 640px; line-height: 1.55; }
.siblings-section-header-row { display: flex; justify-content: space-between; align-items: baseline; }
.siblings-section-aside { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-400); }
.siblings-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
.sibling-card { cursor: pointer; transition: transform 0.2s; }
.sibling-card:hover { transform: translateY(-4px); }
.sibling-card-image { width: 100%; aspect-ratio: 1; background-color: var(--stone-100); overflow: hidden; margin-bottom: 0.5rem; border-radius: 2px; }
.sibling-card-image img { width: 100%; height: 100%; object-fit: cover; }
.sibling-card-name { font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 400; }
.sibling-card-meta { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-500); margin-top: 0.25rem; }
.sibling-card-price { font-size: 0.8125rem; font-weight: 500; margin-top: 0.25rem; color: var(--stone-600); }
.sibling-card-footer { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.5rem; }
.sibling-card-cta { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.sibling-card.is-current { opacity: 0.55; cursor: default; }
.sibling-card.is-current:hover { transform: none; }
.sibling-card.is-current .sibling-card-cta { color: var(--stone-400); }

/* Collection variant grid (wrapping, not scrolling) */
.variant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
.variant-grid .sibling-card { width: auto; flex-shrink: initial; }
.variant-grid .sibling-card-image { width: 100%; height: 0; padding-bottom: 100%; position: relative; }
.variant-grid .sibling-card-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.show-more-btn { display: block; width: 100%; margin-top: 0.75rem; padding: 0.5rem 1rem; background: none; border: 1.5px dashed var(--stone-300); color: var(--stone-600); font-size: 0.8125rem; font-family: var(--font-body); cursor: pointer; transition: all 0.15s; }
.show-more-btn:hover { border-color: var(--stone-500); color: var(--stone-800); }

/* Breadcrumbs */
.breadcrumbs { display: flex; gap: 0.5rem; font-size: 0.8125rem; color: var(--stone-600); margin-bottom: 1.5rem; flex-wrap: wrap; }
.breadcrumbs a { color: var(--stone-600); text-decoration: none; cursor: pointer; }
.breadcrumbs a:hover { color: var(--stone-900); }
.breadcrumbs span { color: var(--stone-400); }

/* Back Button — hidden, breadcrumbs replace it */
.back-btn { display: none; }

/* Installation CTA */
.install-cta { background: var(--warm-bg, #faf8f5); border: 0.5px solid rgba(21,18,15,0.07); border-radius: 2px; padding: 1.125rem 1.25rem; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; }
.install-cta-text { display: grid; gap: 0.125rem; }
.install-cta-title { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 300; color: var(--stone-900); }
.install-cta-sub { font-size: 0.75rem; color: rgba(21,18,15,0.6); }
.install-cta .pdp-btn { width: auto; height: 40px; padding: 0 1.5rem; font-size: 0.75rem; }

/* Accessories Section */
.accessories-section-sf { background: var(--warm-bg, #faf8f5); border: 0.5px solid rgba(21,18,15,0.13); border-radius: 2px; padding: 20px 22px; margin: 0; display: grid; gap: 14px; }
.accessories-section-sf h3 { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 300; line-height: 1.2; margin: 0; }
.accessories-subtitle-sf { font-family: var(--font-body); font-size: 0.75rem; font-weight: 400; color: var(--stone-500); margin: 4px 0 0 0; }
.accessory-group-header { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stone-500); margin: 1.25rem 0 0.5rem; }
.accessory-group-header:first-child { margin-top: 0; }
.accessory-card-sf { background: transparent; border: none; border-top: 0.5px solid rgba(21,18,15,0.07); border-radius: 0; padding: 12px 0; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.accessory-card-sf-image { width: 48px; height: 48px; flex-shrink: 0; border: 0.5px solid rgba(21,18,15,0.07); overflow: hidden; border-radius: 2px; }
.accessory-card-sf-image img { width: 100%; height: 100%; object-fit: cover; }
.accessory-card-sf-header { display: grid; gap: 4px; }
.accessory-card-sf-name { font-family: var(--font-heading); font-weight: 400; font-size: 0.9375rem; line-height: 1.2; }
.accessory-card-sf-color { font-size: 0.8125rem; color: var(--stone-500); width: 100%; }
.accessory-card-sf-sku { font-size: 0.6875rem; color: var(--stone-400); font-family: monospace; }
.accessory-card-sf-price { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-500); }
.accessory-card-sf-actions { display: flex; align-items: center; gap: 8px; }
.acc-stepper { display: flex; align-items: center; gap: 4px; }
.acc-stepper button { width: 26px; height: 26px; border: 0.5px solid rgba(21,18,15,0.2); background: transparent; border-radius: 999px; cursor: pointer; color: var(--stone-900); font-size: 14px; display: flex; align-items: center; justify-content: center; padding: 0; }
.acc-stepper span { width: 24px; text-align: center; font-family: var(--font-heading); font-size: 0.875rem; font-weight: 400; }
.acc-stepper input { width: 34px; text-align: center; font-family: var(--font-heading); font-size: 0.875rem; font-weight: 400; border: none; background: transparent; color: var(--stone-900); padding: 0; -moz-appearance: textfield; appearance: textfield; }
.acc-stepper input::-webkit-outer-spin-button, .acc-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.acc-stepper input:focus { outline: none; border-bottom: 1px solid var(--stone-400); }
.acc-add-btn { padding: 8px 14px; border: none; border-radius: 999px; background: var(--stone-900); color: var(--warm-bg, #ece5d8); cursor: pointer; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 480px) {
  .accessory-card-sf { grid-template-columns: auto 1fr; }
  .accessory-card-sf-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ── COMPARE FEATURE ── */
.compare-checkbox { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--stone-500); margin-top: 0.5rem; cursor: pointer; }
.compare-checkbox input { accent-color: var(--gold); }
.compare-sticky-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--stone-800); color: white; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.75rem 1.5rem; z-index: var(--z-sticky); box-shadow: 0 -2px 12px rgba(0,0,0,0.2); }
.compare-sticky-bar span { font-size: 0.875rem; }
.compare-sticky-bar .btn { padding: 0.5rem 1.5rem; font-size: 0.8125rem; }
.compare-clear-btn { background: none; border: 1px solid rgba(255,255,255,0.3); color: white; padding: 0.5rem 1rem; font-size: 0.8125rem; cursor: pointer; }
.compare-clear-btn:hover { border-color: white; }
.compare-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: var(--z-modal-overlay); display: flex; align-items: center; justify-content: center; padding: 2rem; }
.compare-modal { background: var(--warm-bg); max-width: 900px; width: 100%; max-height: 85vh; overflow: auto; position: relative; }
.compare-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem; border-bottom: 1px solid var(--stone-200); }
.compare-modal-header h2 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; }
.compare-modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--stone-500); padding: 0.5rem; }
.compare-modal-body { padding: 1.5rem 2rem; overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.compare-table th { text-align: center; padding: 0.75rem; vertical-align: bottom; min-width: 140px; }
.compare-table th img { width: 80px; height: 80px; object-fit: cover; margin-bottom: 0.5rem; }
.compare-product-name { font-weight: 500; font-size: 0.8125rem; }
.compare-product-price { color: var(--stone-600); font-size: 0.875rem; margin-top: 0.25rem; }
.compare-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--stone-100); }
.compare-table td:first-child { font-weight: 500; color: var(--stone-600); white-space: nowrap; }
.compare-diff td { background: #fffbeb; }
@media (max-width: 640px) {
  .compare-modal { max-width: 100%; margin: 0; max-height: 100vh; border-radius: 0; }
  .compare-modal-overlay { padding: 0; }
}

/* ── PRODUCT REVIEWS ── */
.reviews-section { border-top: 0.5px solid rgba(21,18,15,0.07); margin-top: 4rem; padding-top: 3rem; }
.reviews-section h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; margin-bottom: 1.5rem; }
.reviews-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 3.5rem; align-items: start; }
.reviews-sidebar { position: sticky; top: 90px; }
.reviews-sidebar-rating { font-family: var(--font-heading); font-size: 4rem; font-weight: 300; line-height: 1; color: var(--stone-900); }
.reviews-sidebar-rating span { font-size: 1.5rem; color: var(--stone-400); }
.reviews-sidebar-stars { margin: 0.625rem 0 0.875rem; }
.reviews-sidebar-count { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-500); margin-bottom: 1.125rem; }
.reviews-dist { display: grid; gap: 0.375rem; }
.reviews-dist-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center; }
.reviews-dist-label { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.6875rem; font-weight: 500; color: var(--stone-400); }
.reviews-dist-bar { height: 4px; background: rgba(21,18,15,0.08); border-radius: 999px; overflow: hidden; }
.reviews-dist-fill { height: 100%; background: var(--gold); border-radius: 999px; }
.reviews-dist-pct { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.6875rem; font-weight: 500; color: var(--stone-400); }
.reviews-main { display: grid; gap: 1.125rem; position: sticky; top: 90px; }
.review-card { padding: 1.375rem 1.625rem; background: var(--warm-bg); border: 0.5px solid rgba(21,18,15,0.07); border-radius: 2px; display: grid; gap: 0.625rem; }
.review-card-header { display: flex; justify-content: space-between; align-items: baseline; }
.review-card-author { font-family: var(--font-heading); font-weight: 400; font-size: 1.125rem; color: var(--stone-900); }
.review-card-meta { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-400); margin-top: 0.25rem; }
.review-card-meta .verified { color: #4a7c3e; }
.review-card-title { font-family: var(--font-body); font-weight: 500; font-size: 0.875rem; color: var(--stone-900); }
.review-card-body { font-size: 0.875rem; color: rgba(21,18,15,0.8); line-height: 1.6; max-width: 640px; text-wrap: pretty; }
/* Review form */
.review-form { background: var(--warm-bg); border: 0.5px solid rgba(21,18,15,0.07); border-radius: 2px; padding: 1.375rem 1.625rem; display: grid; gap: 0.875rem; }
.review-form-title { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 300; color: var(--stone-900); }
.review-form-sub { font-size: 0.75rem; color: rgba(21,18,15,0.6); margin-top: 0.125rem; }
.review-form-label { font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-400); margin-bottom: 0.5rem; }
.star-picker { display: flex; gap: 4px; }
.star-picker button { background: none; border: none; padding: 2px; cursor: pointer; color: var(--stone-300); transition: color 0.15s; }
.star-picker button.active, .star-picker button.hover { color: var(--gold); }
.review-form input, .review-form textarea { width: 100%; padding: 0.5rem 0; border: none; border-bottom: 0.5px solid rgba(21,18,15,0.2); font-family: inherit; font-size: 0.9375rem; color: var(--stone-900); box-sizing: border-box; background: transparent; }
.review-form input:focus, .review-form textarea:focus { outline: none; border-color: var(--gold); }
.review-form textarea { min-height: 80px; resize: vertical; }
.review-form-actions { display: flex; justify-content: flex-end; }
.review-form-actions .pdp-btn { width: auto; padding: 0 2rem; }
/* Guest sign-in card */
.review-signin { background: var(--warm-bg, #faf8f5); border: 0.5px solid rgba(21,18,15,0.07); border-radius: 2px; padding: 1.375rem 1.625rem; display: grid; grid-template-columns: 1fr auto; gap: 1.125rem; align-items: center; }
.review-signin-text { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 300; color: var(--stone-900); }
.review-signin-sub { font-size: 0.75rem; color: rgba(21,18,15,0.6); margin-top: 0.25rem; font-family: var(--font-body); }
.review-signin .pdp-btn { width: auto; height: 40px; padding: 0 1.5rem; font-size: 0.75rem; }
/* Submitted confirmation */
.review-submitted { background: rgba(74,124,62,0.06); border: 0.5px solid rgba(74,124,62,0.27); border-radius: 2px; padding: 1.25rem 1.5rem; }
.review-submitted-label { font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: #4a7c3e; }
.review-submitted-msg { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 300; color: var(--stone-900); margin-top: 0.375rem; }
.review-login-prompt { font-size: 0.875rem; color: var(--stone-500); margin-top: 1.5rem; }
.review-login-prompt a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* PDP Stock Badge */
.pdp-stock-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.03em; text-transform: none; color: var(--stone-800); }
.pdp-stock-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pdp-stock-badge.in-stock .pdp-stock-dot { background: #4a7c3e; }
.pdp-stock-badge.in-stock { color: var(--stone-800); }
.pdp-stock-badge.low-stock .pdp-stock-dot { background: var(--gold); }
.pdp-stock-badge.low-stock { color: var(--stone-800); }
.pdp-stock-badge.out-of-stock .pdp-stock-dot { background: var(--color-rose-dark); }
.pdp-stock-badge.out-of-stock { color: var(--stone-800); }
.pdp-stock-badge.discontinued .pdp-stock-dot { background: var(--stone-400); }
.pdp-stock-badge.discontinued { color: var(--stone-800); }
/* Availability prompt — replaces the "Call for availability" badge when there's
   no live inventory feed. A solid status pill in the rep order-status aesthetic
   (.rov-chip.live) that opens a small contact sheet (call / email / quote). */
.avail-prompt { position: relative; display: inline-block; }
.avail-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; color: #ece5d8; border: none; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
/* Tones track availability (mirrors rep order-status chips) */
.avail-pill.in { background: #3a7a4e; }
.avail-pill.low { background: #a87935; }
.avail-pill.out { background: #c54731; }
.avail-pill.disc { background: #57534e; }
.avail-pill.check { background: #5c6e94; }
button.avail-pill { cursor: pointer; transition: filter 0.15s; }
button.avail-pill:hover, button.avail-pill.open { filter: brightness(0.92); }
.avail-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.avail-pill-caret { width: 12px; height: 12px; margin-left: 1px; flex-shrink: 0; transition: transform 0.15s; }
.avail-pill.open .avail-pill-caret { transform: rotate(180deg); }
.avail-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 240px; background: #fff; border: 0.5px solid rgba(21,18,15,0.15); box-shadow: 0 10px 30px rgba(21,18,15,0.16); padding: 4px; }
.avail-menu-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.625rem 0.75rem; background: transparent; border: none; text-align: left; font-family: var(--font-body); font-size: 0.8125rem; color: var(--stone-900); text-decoration: none; cursor: pointer; box-sizing: border-box; }
.avail-menu-item:hover { background: var(--stone-50); }
.avail-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--stone-500); }
.avail-menu-item strong { font-weight: 600; }
/* ── STOCK ALERTS ── */
.stock-alert-box { background: var(--cream); border: 0.5px solid rgba(21,18,15,0.1); border-radius: var(--radius-md, 8px); padding: 1.125rem 1.25rem; margin: 0; }
.stock-alert-head { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0 0 0.875rem; }
.stock-alert-head > svg { flex: none; margin-top: 0.1rem; color: var(--gold); }
.stock-alert-title { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--stone-900); margin: 0; letter-spacing: 0.005em; }
.stock-alert-sub { font-size: 0.8125rem; line-height: 1.45; color: var(--stone-600); margin: 0.2rem 0 0; }
.stock-alert-form { display: flex; gap: 0.5rem; }
.stock-alert-form input { flex: 1; min-width: 0; padding: 0.625rem 0.875rem; background: #fff; border: 0.5px solid rgba(21,18,15,0.16); border-radius: var(--radius-sm, 6px); font-family: inherit; font-size: 0.8125rem; color: var(--stone-900); transition: border-color 0.18s, box-shadow 0.18s; }
.stock-alert-form input::placeholder { color: var(--stone-500, #a8a29e); }
.stock-alert-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168,121,53,0.12); }
.stock-alert-btn { background: var(--stone-900); color: #fff; border: none; padding: 0.625rem 1.375rem; border-radius: 999px; font-family: inherit; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; white-space: nowrap; transition: background 0.18s, opacity 0.18s; }
.stock-alert-box > .stock-alert-btn { width: 100%; }
.stock-alert-btn:hover:not(:disabled) { background: var(--gold-dark); }
.stock-alert-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.stock-alert-success { font-size: 0.8125rem; line-height: 1.45; color: var(--sage-dark); font-weight: 500; display: flex; align-items: flex-start; gap: 0.5rem; }
.stock-alert-success > svg { flex: none; margin-top: 0.05rem; }

/* ── QUICK VIEW MODAL ── */
.quick-view-overlay { position: fixed; inset: 0; background: rgba(28,25,23,0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; }
.quick-view { background: var(--warm-bg); max-width: 1100px; width: 94%; max-height: 700px; overflow: hidden; display: grid; grid-template-columns: 540px 1fr; position: relative; border-radius: 0; box-shadow: 0 40px 100px rgba(28,25,23,0.35); }
.quick-view-close { position: absolute; top: 12px; right: 12px; background: var(--warm-bg); border: 0.5px solid rgba(28,25,23,0.2); font-size: 18px; font-weight: 300; cursor: pointer; color: var(--stone-800); z-index: 5; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all var(--transition-base); }
.quick-view-close:hover { background: var(--stone-800); color: var(--warm-bg); border-color: var(--stone-800); }
.quick-view-gallery { position: relative; background: var(--warm-bg); display: flex; flex-direction: column; align-self: stretch; }
.quick-view-main-image { height: 540px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }
.quick-view-main-image img { width: 100%; height: 100%; object-fit: contain; background: var(--warm-bg); transition: transform 600ms ease; }
.quick-view-main-image:hover img { transform: scale(1.03); }
/* Blur-up: warm 400px variant paints instantly under the streaming hero */
.quick-view-main-image .qv-hero-lowres { position: absolute; inset: 0; filter: blur(10px); transform: scale(1.03); transition: opacity 0.2s ease; }
.quick-view-main-image:has(.qv-hero-main.is-loaded) .qv-hero-lowres { opacity: 0; }
.quick-view-main-image .qv-hero-main { opacity: 0; transition: opacity 0.25s ease, transform 600ms ease; }
.quick-view-main-image .qv-hero-main.is-loaded { opacity: 1; }
.quick-view-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--warm-bg); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.18); transition: all var(--transition-base); font: 400 18px/1 var(--font-heading); color: var(--stone-800); }
.quick-view-gallery-arrow:hover { background: var(--stone-800); color: var(--warm-bg); }
.quick-view-gallery-arrow:disabled { opacity: 0; pointer-events: none; }
.quick-view-gallery-arrow svg { width: 16px; height: 16px; }
.quick-view-gallery-arrow.left { left: 16px; }
.quick-view-gallery-arrow.right { right: 16px; }
.quick-view-img-counter { position: absolute; bottom: 18px; left: 20px; background: var(--warm-bg); color: var(--stone-800); padding: 6px 12px; font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.16em; z-index: 2; }
.quick-view-thumbstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; padding: 10px 14px; border-top: 0.5px solid rgba(28,25,23,0.13); }
.quick-view-thumb { height: 72px; overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 0.5px rgba(28,25,23,0.2); transition: box-shadow var(--transition-base); }
.quick-view-thumb.active { box-shadow: inset 0 0 0 2px var(--gold); }
.quick-view-thumb img { width: 100%; height: 100%; object-fit: cover; }
.quick-view-variants { display: flex; gap: 8px; flex-wrap: wrap; }
.quick-view-variants-header { display: flex; justify-content: space-between; font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone-500); margin-bottom: 10px; }
.quick-view-variants-header .qv-current-variant { color: var(--stone-800); }
.quick-view-variant-swatch { width: 44px; height: 44px; border-radius: 0; overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 0.5px rgba(28,25,23,0.2); transition: box-shadow var(--transition-base); flex-shrink: 0; }
.quick-view-variant-swatch:hover { box-shadow: inset 0 0 0 1px rgba(28,25,23,0.4); }
.quick-view-variant-swatch.active { box-shadow: 0 0 0 2px var(--gold), 0 0 0 3px var(--warm-bg); }
.quick-view-variant-swatch img { width: 100%; height: 100%; object-fit: cover; }
.quick-view-info { padding: 32px 36px 28px; display: grid; gap: 18px; overflow-y: auto; max-height: 700px; align-content: start; }
.qv-eyebrow { display: flex; justify-content: space-between; align-items: center; padding-right: 56px; }
.qv-eyebrow-cat { font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone-500); }
.qv-eyebrow-stock { font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone-500); }
.quick-view-info h2 { font: 300 44px/1 var(--font-heading); letter-spacing: -0.02em; margin: 0; color: var(--stone-800); }
.qv-variant-label { font: 400 15px/1.4 var(--font-body); color: rgba(28,25,23,0.7); margin-top: -12px; }
.qv-price-block { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 0; border-top: 0.5px solid rgba(28,25,23,0.13); border-bottom: 0.5px solid rgba(28,25,23,0.13); }
.qv-price-amount { font: 300 36px/1 var(--font-heading); color: var(--stone-800); letter-spacing: -0.01em; }
.qv-price-suffix { font: 400 13px/1 var(--font-body); color: var(--stone-500); }
.qv-price-note { font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone-500); margin-top: 6px; }
.qv-price-right { text-align: right; font: 400 13px/1.4 var(--font-body); color: rgba(28,25,23,0.6); }
.qv-price-right strong { color: var(--stone-800); font-weight: 400; }
.qv-price-original { text-decoration: line-through; color: var(--stone-500); font: 400 16px/1 var(--font-heading); margin-right: 8px; }
.qv-sale-tag { font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta); margin-left: 8px; }
.qv-specs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: rgba(28,25,23,0.03); padding: 14px 16px; }
.qv-spec-item { padding-left: 14px; border-left: 0.5px solid rgba(28,25,23,0.13); }
.qv-spec-item:first-child { padding-left: 0; border-left: none; }
.qv-spec-label { font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone-500); margin-bottom: 4px; }
.qv-spec-value { font: 400 14px/1.2 var(--font-heading); color: var(--stone-800); }
.quick-view-actions { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 8px; margin-top: 4px; }
.qv-qty-stepper { display: flex; align-items: stretch; border: 0.5px solid rgba(28,25,23,0.4); }
.qv-qty-stepper button { flex: 1; background: transparent; border: none; cursor: pointer; font: 400 18px/1 var(--font-heading); color: var(--stone-800); transition: background var(--transition-base); }
.qv-qty-stepper button:hover { background: rgba(28,25,23,0.05); }
.qv-qty-stepper .qv-qty-display { flex: 2; display: flex; align-items: center; justify-content: center; font: 400 16px/1 var(--font-heading); color: var(--stone-800); border-left: 0.5px solid rgba(28,25,23,0.13); border-right: 0.5px solid rgba(28,25,23,0.13); }
.qv-btn-primary { padding: 14px 18px; background: var(--stone-800); color: var(--warm-bg); border: none; font: 500 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background var(--transition-base); }
.qv-btn-primary:hover { background: var(--stone-700); }
.qv-btn-secondary { padding: 14px 18px; background: transparent; color: var(--stone-800); border: 0.5px solid rgba(28,25,23,0.4); font: 500 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: all var(--transition-base); }
.qv-btn-secondary:hover { background: var(--stone-800); color: var(--warm-bg); }
.qv-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 0.5px solid rgba(28,25,23,0.1); }
.qv-footer-links { display: flex; gap: 16px; align-items: center; }
.qv-footer-link { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone-800); cursor: pointer; background: none; border: none; padding: 0; text-decoration: none; transition: color var(--transition-base); }
.qv-footer-link:hover { color: var(--gold); }
.qv-footer-link .qv-link-icon { font: 400 14px/1 var(--font-body); }
.qv-detail-link { font: 500 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); text-decoration: none; cursor: pointer; border-bottom: 1px solid var(--gold); padding-bottom: 4px; background: none; border-top: none; border-left: none; border-right: none; transition: color var(--transition-base); }
.qv-detail-link:hover { color: var(--gold-dark); border-bottom-color: var(--gold-dark); }
.quick-view-actions.qv-sqft-actions { grid-template-columns: 1fr 1fr; }
.qv-description { font: 400 13px/1.6 var(--font-body); color: rgba(28,25,23,0.65); }

/* Quick view extracted utility classes */
.qv-error-state { padding: 3rem 2rem; text-align: center; grid-column: 1 / -1; }
.qv-error-text { color: var(--stone-600); margin-bottom: 1rem; }
.qv-swatch-placeholder { width: 100%; height: 100%; background: var(--stone-100); display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 600; color: var(--stone-500); text-align: center; line-height: 1.2; padding: 2px; }
.qv-box-price { color: var(--stone-500); }

/* Browse extracted utility classes */
.browse-toolbar-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; column-gap: 16px; }
/* BrowseToolbar emits the toolbar + category pills + related searches as siblings here;
   keep only the toolbar and Filters button on the first line, drop the pill rows below full-width. */
.browse-toolbar-row > .browse-toolbar { order: 1; }
.browse-toolbar-row > .mobile-filter-btn { order: 2; }
.browse-toolbar-row > .browse-category-pills { order: 3; width: 100%; }
.browse-toolbar-row > .browse-related-searches { order: 4; width: 100%; }
.browse-empty { text-align: center; padding: 4rem; color: var(--stone-600); }
.browse-empty p:first-child { font-size: 1.125rem; margin-bottom: 1rem; }
.browse-empty p:last-child { font-size: 0.875rem; }
.sku-card-trade-strike { text-decoration: line-through; color: var(--stone-500); font-size: 0.875rem; margin-right: 0.5rem; }
.featured-empty { text-align: center; color: var(--stone-500); padding: 2rem 0; }

/* Filter chevron */
.filter-chevron { width: 14px; height: 14px; transition: transform 0.2s; }
.filter-chevron.open { transform: rotate(180deg); }
.filter-no-matches { font-size: 0.75rem; color: var(--stone-400); padding: 0.25rem 0; }

/* ── CART PAGE (editorial redesign) ── */
.ct-wrap { background: var(--warm-bg); color: var(--stone-800); font-family: var(--font-body); }

/* Breadcrumb */
.ct-breadcrumb { display: flex; align-items: center; gap: 14px; font: 500 11px/1 ui-monospace, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--warm-muted); }
.ct-breadcrumb a { color: var(--warm-muted); text-decoration: none; cursor: pointer; }
.ct-breadcrumb a:hover { color: var(--stone-800); }
.ct-breadcrumb-sep { width: 14px; height: 1px; background: rgba(28,25,23,0.2); display: inline-block; }
.ct-breadcrumb-current { color: var(--stone-800); }

/* Cart header */
.ct-header { padding: 36px 80px 36px; border-bottom: 0.5px solid rgba(28,25,23,0.09); }
.ct-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.ct-eyebrow { font: 500 11px/1 ui-monospace, monospace; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 18px; }
.ct-title { font: 300 80px/0.92 var(--font-heading); letter-spacing: -0.022em; margin: 0; color: var(--stone-800); }
.ct-title em { font-style: italic; color: var(--gold); }
.ct-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: end; }
.ct-hero-right { padding-bottom: 12px; }
.ct-hero-desc { font: 400 17px/1.55 var(--font-body); color: rgba(28,25,23,0.8); margin: 0; max-width: 460px; }
.ct-hero-actions { margin-top: 28px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ct-btn-primary { padding: 14px 22px; background: var(--stone-800); color: var(--warm-bg); text-decoration: none; cursor: pointer; text-transform: uppercase; letter-spacing: 0.1em; font: 500 12px/1 var(--font-body); border: none; }
.ct-btn-primary:hover { background: var(--charcoal); }

/* Stats strip */
.ct-stats-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-top: 22px; border-top: 0.5px solid rgba(28,25,23,0.13); }
.ct-stat-value { font: 400 24px/1 var(--font-heading); color: var(--stone-800); letter-spacing: -0.01em; }
.ct-stat-label { font: 500 10px/1.2 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--warm-muted); margin-top: 6px; }

/* Main grid */
.ct-grid { padding: 40px 80px 60px; display: grid; grid-template-columns: 1.55fr 1fr; gap: 48px; }

/* Items header */
.ct-items-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 0.5px solid rgba(28,25,23,0.13); }
.ct-items-title { font: 300 32px/1 var(--font-heading); letter-spacing: -0.014em; margin: 0; color: var(--stone-800); }

/* Line items */
.ct-line { display: grid; grid-template-columns: 120px 1fr auto; gap: 24px; padding: 24px 0; border-bottom: 0.5px solid rgba(28,25,23,0.09); align-items: flex-start; }
.ct-line.ct-line-last { border-bottom: none; }

/* Line thumb */
.ct-line-thumb { width: 120px; height: 120px; position: relative; overflow: hidden; background: var(--stone-100); }
.ct-line-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-line-thumb-placeholder { width: 100%; height: 100%; background: var(--stone-200); }
.ct-line-sample-badge { position: absolute; top: 6px; left: 6px; background: var(--warm-bg); color: var(--stone-800); font: 500 9px/1 ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 7px; }

/* Line info */
.ct-line-info { display: grid; gap: 6px; padding-top: 2px; }
.ct-line-cat { font: 500 10px/1 ui-monospace, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--warm-muted); }
.ct-line-name { font: 300 24px/1.1 var(--font-heading); letter-spacing: -0.014em; color: var(--stone-800); margin: 0; }
.ct-line-variant { font: 400 14px/1.4 var(--font-body); color: rgba(28,25,23,0.7); }
.ct-line-stock { font: 500 11px/1.4 var(--font-body); letter-spacing: 0.04em; margin-top: 2px; }
.ct-line-stock::before { content: '\25CF '; }
.ct-line-stock.in-stock { color: #3a7a4e; }
.ct-line-stock.low-stock { color: #b45309; }
.ct-line-stock.out-stock { color: #dc2626; }
.ct-line-pickup-badge { display: inline-block; background: var(--color-warning-bg); color: var(--color-warning); padding: 4px 8px; font: 500 10px/1 ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 4px; }
.ct-line-actions { display: flex; gap: 18px; align-items: center; margin-top: 8px; font: 500 11px/1 var(--font-body); letter-spacing: 0.08em; }
.ct-line-action-remove { color: var(--warm-muted); cursor: pointer; text-decoration: none; }
.ct-line-action-remove:hover { color: var(--stone-800); }

/* Line right (qty + subtotal) */
.ct-line-right { display: grid; gap: 10px; align-content: flex-start; min-width: 200px; }
.ct-qty-wrap { display: grid; gap: 6px; justify-items: end; }
.ct-qty-stepper { display: flex; align-items: stretch; border: 0.5px solid rgba(28,25,23,0.4); width: 180px; height: 42px; }
.ct-qty-btn { width: 36px; background: transparent; border: none; cursor: pointer; font: 400 18px/1 var(--font-heading); color: var(--stone-800); display: flex; align-items: center; justify-content: center; }
.ct-qty-btn:hover { background: rgba(28,25,23,0.05); }
.ct-qty-value { flex: 1; display: flex; align-items: center; justify-content: center; border-left: 0.5px solid rgba(28,25,23,0.13); border-right: 0.5px solid rgba(28,25,23,0.13); font: 400 15px/1 var(--font-heading); color: var(--stone-800); white-space: nowrap; }
.ct-qty-coverage { font: 500 10px/1 ui-monospace, monospace; letter-spacing: 0.12em; color: var(--warm-muted); text-transform: uppercase; text-align: right; }
.ct-qty-static { font: 400 15px/1 var(--font-heading); color: var(--stone-800); text-align: right; }
.ct-line-unit-price { display: flex; justify-content: space-between; align-items: baseline; font: 500 10px/1 ui-monospace, monospace; letter-spacing: 0.14em; color: var(--warm-muted); text-transform: uppercase; }
.ct-line-unit-price-value { color: var(--stone-800); font: 400 14px/1 var(--font-heading); }
.ct-line-unit-price-suffix { font: 400 10px/1 var(--font-body); color: var(--warm-muted); }
.ct-line-price-tier { font: 500 10px/1 ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage-dark); text-align: right; }
.ct-line-subtotal { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 0.5px solid rgba(28,25,23,0.09); }
.ct-line-subtotal-label { font: 500 11px/1 ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone-800); }
.ct-line-subtotal-value { font: 300 26px/1 var(--font-heading); color: var(--stone-800); letter-spacing: -0.01em; }

/* Promo row */
.ct-promo-row { margin-top: 28px; padding-top: 24px; border-top: 0.5px solid rgba(28,25,23,0.13); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.ct-promo-form { display: flex; align-items: center; }
.ct-promo-input { flex: 1; padding: 13px 16px; border: 0.5px solid rgba(28,25,23,0.2); background: var(--warm-bg); font: 400 14px/1 var(--font-body); color: var(--stone-800); outline: none; }
.ct-promo-input:focus { border-color: var(--gold); }
.ct-promo-apply { padding: 13px 22px; background: transparent; color: var(--stone-800); border: 0.5px solid rgba(28,25,23,0.2); border-left: none; font: 500 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.ct-promo-apply:hover { background: rgba(28,25,23,0.04); }
.ct-promo-apply:disabled { opacity: 0.5; cursor: not-allowed; }
.ct-promo-error { color: #dc2626; font-size: 12px; margin-top: 6px; }
.ct-promo-desc { font: 400 12px/1.4 var(--font-body); color: var(--warm-muted); margin-top: 4px; }
.ct-promo-applied { display: flex; align-items: center; gap: 12px; }
.ct-promo-code-pill { background: var(--color-success-bg); color: var(--color-success); padding: 4px 10px; font: 600 11px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.ct-promo-discount { font: 500 14px/1 var(--font-body); color: var(--color-success); }
.ct-promo-remove { font: 400 11px/1 var(--font-body); color: var(--warm-muted); cursor: pointer; text-decoration: underline; }
.ct-keep-browsing { font: 500 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone-800); text-decoration: none; cursor: pointer; border-bottom: 1px solid var(--stone-800); padding-bottom: 4px; white-space: nowrap; }
.ct-keep-browsing:hover { color: var(--gold); border-color: var(--gold); }

/* Order summary sidebar (dark) */
.ct-summary { position: sticky; top: 24px; align-self: start; }
.ct-summary-inner { background: var(--stone-800); color: var(--warm-bg); padding: 32px; display: grid; gap: 16px; }
.ct-summary-eyebrow { font: 500 11px/1 ui-monospace, monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.ct-summary-lines { display: grid; gap: 10px; margin-top: 4px; }
.ct-summary-line { display: flex; justify-content: space-between; font: 400 13px/1.3 var(--font-body); }
.ct-summary-line > span:first-child { color: rgba(236,229,216,0.7); }
.ct-summary-line > span:last-child { color: var(--warm-bg); }
.ct-summary-line-accent > span:last-child { color: var(--gold); }

/* Delivery inside summary */
.ct-summary-delivery { padding-top: 14px; border-top: 0.5px solid rgba(236,229,216,0.13); display: grid; gap: 8px; }
.ct-summary-delivery-label { font: 500 11px/1 ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(236,229,216,0.7); }
.ct-summary-pickup-notice { font: 400 12px/1.4 var(--font-body); color: #f59e0b; padding: 6px 10px; background: rgba(245,158,11,0.1); }
.ct-delivery-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; border: 0.5px solid rgba(236,229,216,0.13); transition: border-color 0.15s; }
.ct-delivery-option:hover { border-color: rgba(236,229,216,0.3); }
.ct-delivery-option.active { border-color: var(--gold); background: rgba(168,121,53,0.08); }
.ct-delivery-option.disabled { opacity: 0.4; cursor: not-allowed; }
.ct-delivery-option input[type="radio"] { accent-color: var(--gold); margin: 0; }
.ct-delivery-option-title { font: 500 13px/1.2 var(--font-body); color: var(--warm-bg); }
.ct-delivery-option-sub { font: 400 11px/1.2 var(--font-body); color: rgba(236,229,216,0.6); margin-top: 2px; }

/* Shipping inside summary */
.ct-summary-shipping { display: grid; gap: 8px; margin-top: 4px; }
.ct-shipping-zip-row { display: flex; }
.ct-shipping-zip-input { flex: 1; padding: 10px 12px; background: rgba(236,229,216,0.08); border: 0.5px solid rgba(236,229,216,0.2); color: var(--warm-bg); font: 400 13px/1 var(--font-body); outline: none; }
.ct-shipping-zip-input::placeholder { color: rgba(236,229,216,0.4); }
.ct-shipping-zip-input:focus { border-color: var(--gold); }
.ct-shipping-zip-btn { padding: 10px 16px; background: rgba(236,229,216,0.1); border: 0.5px solid rgba(236,229,216,0.2); border-left: none; color: var(--warm-bg); font: 500 11px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.ct-shipping-zip-btn:hover { background: rgba(236,229,216,0.15); }
.ct-shipping-zip-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ct-shipping-error { color: #f87171; font: 400 12px/1.4 var(--font-body); }
.ct-shipping-options { display: grid; gap: 4px; }
.ct-shipping-opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; border: 0.5px solid rgba(236,229,216,0.13); font: 400 12px/1.3 var(--font-body); color: var(--warm-bg); }
.ct-shipping-opt.active { border-color: var(--gold); background: rgba(168,121,53,0.08); }
.ct-shipping-opt input[type="radio"] { accent-color: var(--gold); margin: 0; }
.ct-shipping-opt-info { flex: 1; display: flex; align-items: baseline; gap: 8px; }
.ct-shipping-opt-carrier { font-weight: 500; }
.ct-shipping-opt-days { color: rgba(236,229,216,0.6); font-size: 11px; }
.ct-shipping-opt-price { font-weight: 600; white-space: nowrap; }
.ct-shipping-weight { font: 400 11px/1 var(--font-body); color: rgba(236,229,216,0.5); }
.ct-liftgate-toggle { display: flex; align-items: center; gap: 8px; font: 400 12px/1 var(--font-body); color: rgba(236,229,216,0.7); cursor: pointer; }
.ct-liftgate-toggle input { accent-color: var(--gold); }

/* Total */
.ct-summary-total { padding-top: 12px; display: flex; justify-content: space-between; align-items: baseline; }
.ct-summary-total-label { font: 500 12px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-bg); }
.ct-summary-total-value { font: 300 38px/1 var(--font-heading); color: var(--warm-bg); letter-spacing: -0.01em; }

/* CTA */
.ct-checkout-btn { margin-top: 10px; padding: 16px 0; width: 100%; background: var(--warm-bg); color: var(--stone-800); border: none; font: 500 12px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background 0.15s; }
.ct-checkout-btn:hover { background: #fff; }

/* Trust */
.ct-summary-trust { margin-top: 6px; padding-top: 14px; border-top: 0.5px solid rgba(236,229,216,0.13); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font: 400 11px/1.4 var(--font-body); color: rgba(236,229,216,0.5); }

.sample-tag { display: inline-block; background: var(--gold); color: white; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.5rem; margin-left: 0.5rem; vertical-align: middle; }

/* ── CHECKOUT ── */
/* ── CHECKOUT (editorial redesign) ── */
.co-wrap { background: var(--warm-bg); color: var(--stone-800); font-family: var(--font-body); min-height: 100vh; }

/* Slim checkout header */
.co-header { padding: 1.25rem clamp(1.5rem, 5vw, 5rem); border-bottom: 0.5px solid rgba(28,25,23,0.13); display: flex; align-items: center; justify-content: space-between; }
.co-header-logo { text-decoration: none; cursor: pointer; display: inline-flex; }
.co-header-logo .logo-wordmark { font-size: 1.125rem; }
.co-header-logo .logo-script { font-size: 1.55rem; }
.co-header-meta { display: flex; align-items: center; gap: 1.375rem; font: 500 0.6875rem/1 ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm-muted); }
.co-header-meta .co-secure { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--stone-800); font: 400 0.875rem/1 var(--font-body); }

/* Progress strip */
.co-progress { padding: 1.25rem clamp(1.5rem, 5vw, 5rem) 1.5rem; border-bottom: 0.5px solid rgba(28,25,23,0.09); }
.co-progress-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.co-progress-step { display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.5rem; align-items: center; }
.co-progress-dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 500 0.625rem/1 ui-monospace, monospace; }
.co-progress-dot.past { background: var(--gold); color: var(--warm-bg); border: none; }
.co-progress-dot.current { background: var(--stone-800); color: var(--warm-bg); border: none; }
.co-progress-dot.future { background: transparent; color: var(--stone-800); border: 0.5px solid rgba(28,25,23,0.4); }
.co-progress-label { font: 500 0.6875rem/1.2 var(--font-body); letter-spacing: 0.04em; color: var(--stone-800); }
.co-progress-status { font: 500 0.625rem/1 ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-muted); margin-top: 0.25rem; }

/* Main checkout grid */
.co-grid { padding: 2.5rem clamp(1.5rem, 5vw, 5rem) 5rem; display: grid; grid-template-columns: 1.6fr 1fr; gap: 3.75rem; }
.co-steps { display: grid; gap: 0.875rem; }

/* Step shell */
.co-step { background: var(--warm-bg); border: 0.5px solid rgba(28,25,23,0.13); padding: 1.25rem 1.875rem 1.375rem; transition: all 200ms; }
.co-step.focus { border-color: var(--stone-800); padding: 1.75rem 1.875rem 1.875rem; box-shadow: 0 14px 32px rgba(28,25,23,0.07); }
.co-step-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.75rem; }
.co-step.focus .co-step-head { margin-bottom: 1.375rem; }
.co-step-left { display: flex; align-items: baseline; gap: 1.125rem; }
.co-step-num { font: 500 0.6875rem/1 ui-monospace, monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--warm-muted); }
.co-step-num.saved { color: var(--gold); }
.co-step-title { font: 400 1.25rem/1 var(--font-heading); letter-spacing: -0.012em; color: var(--stone-800); margin: 0; }
.co-step.focus .co-step-title { font-weight: 300; font-size: 1.75rem; }
.co-step-chip { display: flex; align-items: baseline; gap: 0.875rem; }
.co-step-chip-label { font: 500 0.625rem/1 ui-monospace, monospace; letter-spacing: 0.18em; text-transform: uppercase; }
.co-step-chip-action { font: 500 0.6875rem/1 var(--font-body); letter-spacing: 0.08em; color: var(--stone-800); text-transform: uppercase; cursor: pointer; border-bottom: 1px solid rgba(28,25,23,0.4); padding-bottom: 0.125rem; text-decoration: none; background: none; border-top: none; border-left: none; border-right: none; }

/* Contact saved */
.co-contact-saved { display: flex; align-items: center; gap: 1.125rem; }
.co-contact-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--gold); color: #fff; display: flex; align-items: center; justify-content: center; font: 500 0.875rem/1 var(--font-heading); flex-shrink: 0; }
.co-contact-info { font: 400 0.9375rem/1.2 var(--font-body); color: var(--stone-800); }
.co-contact-meta { font: 500 0.625rem/1.4 ui-monospace, monospace; letter-spacing: 0.14em; color: var(--warm-muted); text-transform: uppercase; margin-top: 0.25rem; }

/* Delivery method cards */
.co-delivery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.co-delivery-card { cursor: pointer; position: relative; padding: 1.25rem 1.375rem 1.125rem; border: 0.5px solid rgba(28,25,23,0.2); background: transparent; display: grid; gap: 0.5rem; text-align: left; font-family: var(--font-body); }
.co-delivery-card.selected { border-color: var(--stone-800); background: var(--stone-300); }
.co-delivery-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.co-delivery-card-name { font: 400 1.125rem/1.1 var(--font-heading); color: var(--stone-800); letter-spacing: -0.014em; }
.co-delivery-card-meta { font: 500 0.625rem/1.4 ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm-muted); margin-top: 0.25rem; }
.co-delivery-card-sub { font: 400 0.75rem/1.5 var(--font-body); color: rgba(28,25,23,0.7); margin: 0.25rem 0 0; }
.co-delivery-card-eta { padding-top: 0.625rem; border-top: 0.5px solid rgba(28,25,23,0.13); font: 500 0.6875rem/1 ui-monospace, monospace; letter-spacing: 0.1em; color: var(--stone-800); }
.co-delivery-card-cost { font: 500 0.75rem/1 var(--font-heading); color: var(--stone-800); letter-spacing: -0.01em; }

/* Address saved */
.co-address-saved { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.co-address-text { font: 400 0.9375rem/1.4 var(--font-body); color: var(--stone-800); }
.co-address-distance { font: 500 0.625rem/1 ui-monospace, monospace; letter-spacing: 0.14em; color: var(--warm-muted); text-transform: uppercase; }

/* Checkout form fields (editorial style) */
.co-field { display: grid; gap: 0.75rem; padding: 0.25rem 0; border-bottom: 0.5px solid rgba(28,25,23,0.2); }
.co-field-row { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; align-items: end; }
.co-field-label { font: 500 0.625rem/1 ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm-muted); margin-bottom: 0.25rem; }
.co-field-value { font: 400 1rem/1.2 var(--font-heading); color: var(--stone-800); padding: 0.375rem 0; }
.co-field input, .co-field select, .co-field textarea { width: 100%; font: 400 1rem/1.2 var(--font-heading); color: var(--stone-800); padding: 0.375rem 0; border: none; background: transparent; outline: none; }
.co-field input::placeholder, .co-field textarea::placeholder { color: rgba(28,25,23,0.35); font-style: italic; }
.co-field select { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }

/* Checkout form rows */
.co-form-grid { display: grid; gap: 0.875rem; }
.co-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
.co-form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.875rem; }

/* Payment method tabs */
.co-payment-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.375rem; }
.co-payment-tab { padding: 0.875rem 1rem; border: 0.5px solid rgba(28,25,23,0.2); background: transparent; color: var(--stone-800); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font: 500 0.75rem/1 var(--font-body); letter-spacing: 0.06em; position: relative; }
.co-payment-tab.selected { background: var(--stone-800); color: var(--warm-bg); border-color: var(--stone-800); }
.co-payment-tab .co-trade-badge { position: absolute; top: -0.5rem; right: -0.5rem; background: var(--gold); color: var(--warm-bg); padding: 0.1875rem 0.4375rem; font: 500 0.5625rem/1 ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; }

/* Card form (Stripe element) */
.co-card-form { display: grid; gap: 0.875rem; }
.co-stripe-wrap { padding: 0.75rem 0; border-bottom: 0.5px solid rgba(28,25,23,0.2); }
.co-stripe-wrap .StripeElement { font: 400 1rem/1.2 var(--font-heading); }
.co-stripe-wrap.StripeElement--focus { border-bottom-color: var(--gold); }

/* Save card checkbox */
.co-save-card { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.25rem; font: 400 0.8125rem/1 var(--font-body); color: rgba(28,25,23,0.7); cursor: pointer; }
.co-save-card input[type="checkbox"] { accent-color: var(--stone-800); }
.co-saved-cards { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.co-saved-card { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 0.875rem; border: 1px solid var(--stone-200); cursor: pointer; font: 400 0.875rem/1 var(--font-body); color: var(--stone-700); }
.co-saved-card.selected { border-color: var(--stone-800); background: var(--stone-50); }
.co-saved-card input[type="radio"] { accent-color: var(--stone-800); }
.co-saved-card-brand { font-weight: 500; color: var(--stone-800); text-transform: capitalize; }
.co-saved-card-num { letter-spacing: 0.06em; color: var(--stone-600); }
.co-saved-card-exp { margin-left: auto; font-size: 0.8125rem; color: var(--stone-500); }

/* Place order CTA */
.co-place-order { margin-top: 0.375rem; padding: 1.125rem 0; background: var(--gold); color: var(--warm-bg); border: none; font: 500 0.8125rem/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; width: 100%; transition: background 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.co-place-order:hover:not(:disabled) { background: var(--gold-dark); }
.co-place-order:disabled { opacity: 0.6; cursor: not-allowed; }
.co-terms { font: 400 0.75rem/1.5 var(--font-body); color: var(--warm-muted); margin-top: 0.75rem; }
.co-terms a { color: var(--stone-800); border-bottom: 1px solid rgba(28,25,23,0.2); text-decoration: none; }
.co-terms-check { display: flex; align-items: flex-start; gap: 0.625rem; margin: 0.25rem 0 0.875rem; cursor: pointer; }
.co-terms-check input[type="checkbox"] { accent-color: var(--stone-800); margin-top: 2px; flex-shrink: 0; }
.co-terms-invalid { color: #991b1b; }
.co-terms-invalid a { color: #991b1b; border-bottom-color: rgba(153,27,27,0.35); }
.co-terms-error-msg { font: 400 0.75rem/1.4 var(--font-body); color: #991b1b; margin: -0.375rem 0 0.875rem; }

/* Final-sale notice at checkout */
.co-final-sale { margin: 0.25rem 0 0.75rem; padding: 0.625rem 0.875rem; background: var(--stone-50); border: 0.5px solid rgba(28,25,23,0.12); font: 400 0.75rem/1.5 var(--font-body); color: var(--stone-600); }
.co-final-sale strong { color: var(--stone-800); font-weight: 600; }
.co-final-sale a { color: var(--stone-800); border-bottom: 1px solid rgba(28,25,23,0.2); text-decoration: none; }

/* California Prop 65 warning */
.prop65-warning { display: flex; align-items: flex-start; gap: 0.625rem; margin-top: 1rem; padding: 0.75rem 0.875rem; background: #fffbeb; border: 0.5px solid #fde68a; border-left: 3px solid #f59e0b; font: 400 0.75rem/1.5 var(--font-body); color: #78716c; }
.prop65-warning .prop65-icon { color: #b45309; font-size: 0.875rem; line-height: 1.4; flex-shrink: 0; }
.prop65-warning strong { color: #57534e; font-weight: 600; }
.prop65-warning a { color: #57534e; text-decoration: underline; }
.prop65-compact { margin-top: 0.75rem; padding: 0.5rem 0.75rem; }

/* Notes textarea */
.co-notes textarea { width: 100%; min-height: 4rem; padding: 0.875rem; background: transparent; border: 0.5px solid rgba(28,25,23,0.2); font: 400 0.875rem/1.5 var(--font-body); color: var(--stone-800); resize: vertical; outline: none; box-sizing: border-box; }
.co-notes-hint { margin-top: 0.5rem; font: 500 0.625rem/1 ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm-muted); }

/* Checkout error */
.co-error { background: #fef2f2; border: 0.5px solid #fecaca; border-left: 3px solid #ef4444; color: #991b1b; padding: 1rem 1.25rem; margin-bottom: 0.875rem; font-size: 0.875rem; }

/* Create account */
.co-create-account { display: flex; align-items: center; gap: 0.625rem; cursor: pointer; font: 400 0.8125rem/1 var(--font-body); color: rgba(28,25,23,0.7); margin-top: 0.5rem; }
.co-create-account input[type="checkbox"] { accent-color: var(--stone-800); }
.co-password-fields { margin-top: 0.75rem; display: grid; gap: 0.75rem; }
.co-password-error { color: #dc2626; font-size: 0.8125rem; margin-top: 0.25rem; }

/* Order summary (right, sticky) */
.co-summary { position: sticky; top: 1.5rem; align-self: start; }
.co-summary-box { background: var(--warm-bg); border: 0.5px solid rgba(28,25,23,0.2); padding: 1.5rem; }
.co-summary-header { font: 500 0.6875rem/1 ui-monospace, monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.875rem; }
.co-summary-items { display: grid; gap: 0.75rem; }
.co-summary-item { display: grid; grid-template-columns: 3.25rem 1fr auto; gap: 0.75rem; align-items: center; }
.co-summary-thumb { height: 3.25rem; width: 3.25rem; position: relative; background: var(--stone-200); }
.co-summary-thumb img { display: block; }
.co-summary-thumb-badge { position: absolute; top: -0.25rem; right: -0.25rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--stone-800); color: #fff; font: 500 0.625rem/1 ui-monospace, monospace; display: flex; align-items: center; justify-content: center; }
.co-summary-item-name { font: 400 0.875rem/1.2 var(--font-heading); color: var(--stone-800); letter-spacing: -0.008em; }
.co-summary-item-detail { font: 500 0.625rem/1 ui-monospace, monospace; letter-spacing: 0.14em; color: var(--warm-muted); text-transform: uppercase; margin-top: 0.1875rem; }
.co-summary-item-price { font: 400 0.875rem/1 var(--font-heading); color: var(--stone-800); text-align: right; }
.co-summary-totals { margin-top: 1.125rem; padding-top: 1.125rem; border-top: 0.5px solid rgba(28,25,23,0.13); display: grid; gap: 0.5rem; }
.co-summary-row { display: flex; justify-content: space-between; font: 400 0.8125rem/1.3 var(--font-body); }
.co-summary-row .label { color: var(--warm-muted); }
.co-summary-row .value { color: var(--stone-800); }
.co-summary-row .value.discount { color: var(--gold); }
.co-summary-total { margin-top: 1rem; padding-top: 1rem; border-top: 0.5px solid rgba(28,25,23,0.13); display: flex; justify-content: space-between; align-items: baseline; }
.co-summary-total-label { font: 500 0.75rem/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone-800); }
.co-summary-total-amount { font: 300 2.25rem/1 var(--font-heading); color: var(--stone-800); letter-spacing: -0.01em; }
.co-summary-promo { margin-top: 1rem; padding: 0.75rem 0.875rem; background: var(--stone-300); display: flex; justify-content: space-between; align-items: center; }
.co-summary-promo-code { font: 500 0.625rem/1 ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-800); }
.co-summary-promo-remove { font: 500 0.625rem/1 ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-muted); cursor: pointer; text-decoration: none; background: none; border: none; }
.co-summary-edit-cart { margin-top: 1rem; display: block; text-align: center; font: 500 0.6875rem/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone-800); cursor: pointer; text-decoration: none; }
.co-summary-trust { margin-top: 0.875rem; padding: 0.875rem 1.125rem; border: 0.5px solid rgba(28,25,23,0.13); display: grid; gap: 0.5rem; font: 400 0.75rem/1.4 var(--font-body); color: rgba(28,25,23,0.7); }
.co-promo-input-row { display: flex; gap: 0; margin-top: 0.75rem; }
.co-promo-input-row input { flex: 1; padding: 0.75rem 0.875rem; border: 0.5px solid rgba(28,25,23,0.2); background: var(--warm-bg); font: 400 0.8125rem/1 var(--font-body); color: var(--stone-800); outline: none; }
.co-promo-input-row button { padding: 0.75rem 1.125rem; background: transparent; color: var(--stone-800); border: 0.5px solid rgba(28,25,23,0.2); border-left: none; font: 500 0.6875rem/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.co-promo-error { color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem; }

/* Checkout trust footer */
.co-footer { border-top: 0.5px solid rgba(28,25,23,0.13); padding: 2rem clamp(1.5rem, 5vw, 5rem); display: flex; align-items: center; justify-content: space-between; font: 400 0.75rem/1.4 var(--font-body); color: var(--warm-muted); }
.co-footer-links { display: flex; gap: 1.5rem; }
.co-footer-links a { color: var(--warm-muted); text-decoration: none; cursor: pointer; }
.co-footer-links a:hover { color: var(--stone-800); }

/* Wallet express checkout */
.co-express-section { margin-bottom: 1rem; }
.co-wallet-btn { width: 100%; height: 3rem; background: var(--stone-900); color: white; border: none; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background 0.2s; }
.co-wallet-btn:hover:not(:disabled) { background: #000; }
.co-wallet-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.co-divider { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; font-size: 0.75rem; color: var(--warm-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.co-divider::before, .co-divider::after { content: ''; flex: 1; height: 0.5px; background: rgba(28,25,23,0.2); }
.co-klarna-btn { width: 100%; height: 3rem; background: #ffb3c7; color: #0b051d; border: none; border-radius: 4px; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.4rem; transition: filter 0.15s; }
.co-klarna-btn:hover:not(:disabled) { filter: brightness(0.96); }
.co-klarna-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.co-klarna-word { font-weight: 700; letter-spacing: -0.01em; }
.co-klarna-note { margin-top: 0.5rem; font-size: 0.75rem; color: var(--warm-muted); line-height: 1.4; }

/* Checkout spinner */
.co-spinner { width: 1.125rem; height: 1.125rem; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; }

/* Pickup info box */
.co-pickup-info { background: var(--stone-300); padding: 1.25rem 1.375rem; display: grid; gap: 0.375rem; }
.co-pickup-info .co-pickup-label { font: 500 0.625rem/1 ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.25rem; }
.co-pickup-info .co-pickup-name { font: 400 1.125rem/1.1 var(--font-heading); color: var(--stone-800); }
.co-pickup-info .co-pickup-addr { font: 400 0.8125rem/1.4 var(--font-body); color: rgba(28,25,23,0.7); }
.co-pickup-info .co-pickup-ready { font: 500 0.6875rem/1 ui-monospace, monospace; letter-spacing: 0.1em; color: var(--stone-800); margin-top: 0.5rem; padding-top: 0.625rem; border-top: 0.5px solid rgba(28,25,23,0.13); }

/* In-home measure offer */
.co-measure-offer { background: var(--stone-300); padding: 1.125rem 1.375rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.co-measure-offer-label { font: 500 0.6875rem/1 ui-monospace, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.375rem; }
.co-measure-offer-title { font: 400 1rem/1.3 var(--font-heading); color: var(--stone-800); }
.co-measure-offer-sub { font: 400 0.8125rem/1.4 var(--font-body); color: rgba(28,25,23,0.7); margin-top: 0.25rem; }

/* Schedule toggle */
.co-measure-toggle { background: var(--stone-300); padding: 1.125rem 1.375rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; cursor: pointer; transition: background 200ms, border-color 200ms; border: 0.5px solid transparent; }
.co-measure-toggle.active { background: rgba(200,169,126,0.08); border-color: var(--gold); }
.co-measure-toggle-left { flex: 1; }
.co-toggle-switch { width: 44px; height: 24px; background: rgba(28,25,23,0.15); border-radius: 12px; position: relative; cursor: pointer; transition: background 200ms; flex-shrink: 0; }
.co-toggle-switch.on { background: var(--gold); }
.co-toggle-knob { width: 18px; height: 18px; background: #fff; border-radius: 50%; position: absolute; top: 3px; left: 3px; transition: transform 200ms; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.co-toggle-switch.on .co-toggle-knob { transform: translateX(20px); }

/* Schedule fields */
.co-schedule-fields { margin-top: 1rem; }
.co-schedule-row { display: grid; gap: 1rem; }
.co-schedule-row .co-field input[type="date"] { width: 100%; font: 400 1rem/1.2 var(--font-heading); color: var(--stone-800); padding: 0.5rem 0; border: none; border-bottom: 0.5px solid rgba(28,25,23,0.2); background: transparent; outline: none; cursor: pointer; }
.co-schedule-row .co-field input[type="date"]:focus { border-bottom-color: var(--stone-800); }
.co-time-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.co-time-slot { padding: 0.75rem 0.5rem; border: 0.5px solid rgba(28,25,23,0.2); background: transparent; cursor: pointer; text-align: center; transition: all 200ms; font-family: var(--font-body); }
.co-time-slot:hover { border-color: rgba(28,25,23,0.4); }
.co-time-slot.selected { border-color: var(--stone-800); background: var(--stone-300); }
.co-time-slot-label { display: block; font: 400 0.875rem/1.2 var(--font-heading); color: var(--stone-800); }
.co-time-slot-sub { display: block; font: 500 0.625rem/1 ui-monospace, monospace; letter-spacing: 0.1em; color: var(--warm-muted); margin-top: 0.25rem; }
.co-schedule-note { font: 400 0.75rem/1.4 var(--font-body); color: var(--warm-muted); margin-top: 0.75rem; font-style: italic; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Legacy compatibility */
.dev-badge { font-size: 0.625rem; background: #f59e0b; color: #000; padding: 1px 5px; border-radius: 3px; font-weight: 700; letter-spacing: 0.05em; margin-left: 0.25rem; }
.checkout-error { background: #fef2f2; border: 1px solid #fecaca; border-left: 3px solid #ef4444; color: #991b1b; padding: 1rem; margin-bottom: 1.5rem; font-size: 0.875rem; }

/* ── SKELETON LOADERS ── */
.skeleton-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.skeleton-card-img { width: 100%; aspect-ratio: 1; background: var(--stone-100); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; }
.skeleton-bar { height: 14px; background: var(--stone-100); border-radius: 2px; animation: pulse 1.5s ease-in-out infinite; margin-top: 0.75rem; }
.skeleton-bar-short { width: 60%; }
.skeleton-bar-medium { width: 40%; }
.skeleton-collection-img { width: 100%; aspect-ratio: 4/3; background: var(--stone-100); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; }
.skeleton-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.skeleton-stat-card { height: 100px; background: var(--stone-100); border-radius: 8px; animation: pulse 1.5s ease-in-out infinite; }
.skeleton-table-row { height: 48px; background: var(--stone-100); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; margin-bottom: 0.5rem; }
.skeleton-search-result { display: flex; gap: 0.75rem; padding: 0.75rem 0; }
.skeleton-search-img { width: 56px; height: 56px; background: var(--stone-100); border-radius: 4px; flex-shrink: 0; animation: pulse 1.5s ease-in-out infinite; }
.skeleton-search-lines { flex: 1; }
.skeleton-card:nth-child(2) .skeleton-card-img, .skeleton-card:nth-child(2) .skeleton-bar { animation-delay: 0.15s; }
.skeleton-card:nth-child(3) .skeleton-card-img, .skeleton-card:nth-child(3) .skeleton-bar { animation-delay: 0.3s; }
.skeleton-card:nth-child(4) .skeleton-card-img, .skeleton-card:nth-child(4) .skeleton-bar { animation-delay: 0.45s; }

/* ── CONFIRMATION (editorial redesign) ── */
.conf-wrap { background: var(--warm-bg); color: var(--stone-800); }

/* Confirmation hero */
.conf-hero { padding: 5rem clamp(1.5rem, 5vw, 5rem) 3.5rem; text-align: center; max-width: 750px; margin: 0 auto; }
.conf-check { width: 4rem; height: 4rem; border-radius: 50%; background: var(--gold); color: var(--warm-bg); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.75rem; }
.conf-check svg { width: 1.75rem; height: 1.75rem; }
.conf-hero h1 { font: 300 3.5rem/1.05 var(--font-heading); letter-spacing: -0.015em; margin: 0 0 0.875rem; color: var(--stone-800); }
.conf-order-num { font: 500 0.6875rem/1 ui-monospace, monospace; letter-spacing: 0.22em; text-transform: uppercase; color: var(--warm-muted); }
.conf-hero-sub { margin-top: 1.25rem; font: 400 1rem/1.5 var(--font-body); color: rgba(28,25,23,0.65); max-width: 500px; margin-left: auto; margin-right: auto; }

/* Items ordered */
.conf-items { max-width: 960px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 5rem) 3.5rem; }
.conf-items-header { font: 500 0.6875rem/1 ui-monospace, monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--warm-muted); margin-bottom: 1.125rem; }
.conf-item { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 0.5px solid rgba(28,25,23,0.1); }
.conf-item:last-child { border-bottom: none; }
.conf-item-thumb { width: 3.5rem; height: 3.5rem; background: var(--stone-200); overflow: hidden; }
.conf-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.conf-item-name { font: 400 1rem/1.2 var(--font-heading); color: var(--stone-800); }
.conf-item-detail { font: 500 0.625rem/1.3 ui-monospace, monospace; letter-spacing: 0.12em; color: var(--warm-muted); text-transform: uppercase; margin-top: 0.25rem; }
.conf-item-price { font: 400 1rem/1 var(--font-heading); color: var(--stone-800); text-align: right; }
.conf-item-total-row { display: flex; justify-content: space-between; align-items: baseline; padding: 1.25rem 0 0; margin-top: 0.5rem; border-top: 0.5px solid rgba(28,25,23,0.13); }
.conf-item-total-label { font: 500 0.75rem/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone-800); }
.conf-item-total-amount { font: 300 2rem/1 var(--font-heading); color: var(--stone-800); letter-spacing: -0.01em; }

/* Details grid */
.conf-details { max-width: 960px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 5rem) 3.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.conf-detail-card { padding: 1.5rem 1.375rem 1.375rem; border: 0.5px solid rgba(28,25,23,0.13); background: var(--warm-bg); }
.conf-detail-label { font: 500 0.625rem/1 ui-monospace, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.75rem; }
.conf-detail-title { font: 400 1rem/1.2 var(--font-heading); color: var(--stone-800); margin-bottom: 0.5rem; }
.conf-detail-text { font: 400 0.8125rem/1.5 var(--font-body); color: rgba(28,25,23,0.65); }
.conf-detail-link { display: inline-block; margin-top: 0.75rem; font: 500 0.6875rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-800); cursor: pointer; text-decoration: none; border-bottom: 1px solid rgba(28,25,23,0.3); padding-bottom: 0.125rem; }

/* Sample request section */
.conf-samples { max-width: 960px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 5rem) 3.5rem; }
.conf-samples-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.conf-samples-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.375rem 0.875rem; background: var(--stone-300); font: 500 0.625rem/1 ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone-800); }
.conf-samples-title { font: 400 1.375rem/1.2 var(--font-heading); color: var(--stone-800); }
.conf-sample-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 0.5px solid rgba(28,25,23,0.1); font: 400 0.9375rem/1.3 var(--font-body); color: var(--stone-800); }
.conf-sample-item:last-child { border-bottom: none; }
.conf-sample-free { font: 500 0.625rem/1 ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }

/* Next steps */
.conf-next { max-width: 960px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 5rem) 4rem; }
.conf-next-header { font: 500 0.6875rem/1 ui-monospace, monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--warm-muted); margin-bottom: 1.25rem; }
.conf-next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.conf-next-card { padding: 1.375rem 1.375rem 1.125rem; border: 0.5px solid rgba(28,25,23,0.13); background: var(--warm-bg); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.conf-next-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(28,25,23,0.1); }
.conf-next-card-step { font: 500 0.625rem/1 ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-muted); margin-bottom: 0.75rem; }
.conf-next-card-title { font: 400 1.125rem/1.2 var(--font-heading); color: var(--stone-800); margin-bottom: 0.375rem; }
.conf-next-card-sub { font: 400 0.75rem/1.5 var(--font-body); color: rgba(28,25,23,0.6); }

/* Continue shopping CTA */
.conf-cta { text-align: center; padding: 2.5rem clamp(1.5rem, 5vw, 5rem) 4rem; }
.conf-cta-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 2.5rem; background: var(--stone-800); color: var(--warm-bg); border: none; font: 500 0.8125rem/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; }
.conf-cta-btn:hover { background: var(--gold); }

/* Modal */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: var(--z-modal-overlay); display: flex; align-items: center; justify-content: center; }
.modal-content { background: var(--warm-bg); padding: 3rem; max-width: 480px; width: 90%; max-height: 90vh; overflow-y: auto; position: relative; }
.modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--stone-600); }
.modal-content h2 { font-family: var(--font-heading); font-size: 2rem; font-weight: 300; margin-bottom: 1.5rem; }

/* Modal form fields (checkout-* used in installation quote, sample request, etc.) */
.checkout-field { display: grid; gap: 0.375rem; margin-bottom: 0.875rem; }
.checkout-field label { font: 500 0.625rem/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm-muted, var(--stone-500)); }
.checkout-input { width: 100%; padding: 0.625rem 0; font: 400 1rem/1.2 var(--font-heading); color: var(--stone-800); border: none; border-bottom: 0.5px solid rgba(28,25,23,0.2); background: transparent; outline: none; box-sizing: border-box; }
.checkout-input:focus { border-bottom-color: var(--stone-800); }
.checkout-input::placeholder { color: rgba(28,25,23,0.35); font-style: italic; }
textarea.checkout-input { border: 0.5px solid rgba(28,25,23,0.2); padding: 0.75rem; font-family: var(--font-body); font-size: 0.875rem; resize: vertical; }
.checkout-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Visit recap — dark quote-request card */
.vr-quote-card textarea.checkout-input { border-color: rgba(236,229,216,0.3); color: #ece5d8; }
.vr-quote-card textarea.checkout-input:focus { border-color: var(--gold-light); }
.vr-quote-card textarea.checkout-input::placeholder { color: rgba(236,229,216,0.45); }
.vr-quote-card .btn { background: #ece5d8; color: var(--stone-900); }
.vr-quote-card .btn:hover { background: var(--gold-light); color: var(--stone-900); }

/* Note */
.note { background: #fef3c7; border-left: 3px solid #f59e0b; padding: 1rem; margin: 1.5rem 0; font-size: 0.875rem; line-height: 1.6; }

/* legacy footer selector - see .footer below */
footer { background: var(--stone-900); color: white; padding: 3rem; text-align: center; margin-top: 6rem; }

/* ── TRADE LANDING PAGE ── */
.trade-page { }
.trade-hero { background: var(--stone-900); color: white; padding: 5rem 3rem; text-align: center; }
.trade-hero h1 { font-family: var(--font-heading); font-size: 3.5rem; font-weight: 300; margin-bottom: 1rem; }
.trade-hero p { font-size: 1.125rem; opacity: 0.7; max-width: 600px; margin: 0 auto 2rem; line-height: 1.6; }
.trade-benefits { max-width: var(--max-width); margin: 0 auto; padding: 4rem 3rem; }
.trade-benefits h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; text-align: center; margin-bottom: 3rem; }
.trade-benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.benefit-card { text-align: center; padding: 2rem 1.5rem; }
.benefit-card svg { width: 40px; height: 40px; color: var(--gold); margin-bottom: 1rem; }
.benefit-card h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; margin-bottom: 0.75rem; }
.benefit-card p { font-size: 0.875rem; color: var(--stone-600); line-height: 1.6; }
.trade-how-it-works { background: rgba(28,25,23,0.04); padding: 4rem 3rem; }
.trade-how-it-works h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; text-align: center; margin-bottom: 3rem; }
.trade-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: var(--max-width); margin: 0 auto; }
.trade-step { text-align: center; padding: 1.5rem; }
.step-number { width: 48px; height: 48px; border-radius: 50%; background: var(--gold); color: white; font-family: var(--font-heading); font-size: 1.5rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.trade-step h3 { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 400; margin-bottom: 0.5rem; }
.trade-step p { font-size: 0.8125rem; color: var(--stone-600); line-height: 1.6; }
.trade-tiers { max-width: var(--max-width); margin: 0 auto; padding: 4rem 3rem; }
.trade-tiers h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; text-align: center; margin-bottom: 1rem; }
.trade-tiers-subhead { max-width: 640px; margin: 0 auto 3rem; text-align: center; color: var(--stone-500); line-height: 1.6; }
.trade-tiers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.tier-card { background: var(--warm-bg); border: 1px solid var(--stone-200); padding: 2.5rem 2rem; text-align: center; transition: all var(--transition-base); }
.tier-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tier-card.featured { border-color: var(--gold); }
.tier-card .tier-name { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; margin-bottom: 0.5rem; }
.tier-card .tier-discount { font-size: 2.5rem; font-weight: 300; color: var(--gold); margin-bottom: 0.5rem; }
.tier-card .tier-threshold { font-size: 0.8125rem; color: var(--stone-500); margin-bottom: 1.5rem; }
.tier-card ul { list-style: none; text-align: left; }
.tier-card ul li { padding: 0.4rem 0; font-size: 0.875rem; color: var(--stone-600); }
.tier-card ul li::before { content: '\2713'; color: var(--gold); margin-right: 0.5rem; }
.trade-cta-section { background: var(--stone-900); color: white; padding: 4rem 3rem; text-align: center; }
.trade-cta-section h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; margin-bottom: 1rem; }
.trade-cta-section p { opacity: 0.7; margin-bottom: 2rem; }
.trade-cta-buttons { display: flex; gap: 1rem; justify-content: center; }

/* ── INSTALLATION PAGE ── */
.installation-page { }
.install-hero { background: var(--stone-900); color: white; padding: 5rem 3rem; text-align: center; }
.install-hero.cab-hero { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; background-image: linear-gradient(rgba(20,17,15,0.5), rgba(20,17,15,0.62)), url('/uploads/cabinets/waypoint-oat-kitchen.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
.install-hero h1 { font-family: var(--font-heading); font-size: 3.5rem; font-weight: 300; margin-bottom: 1rem; }
.install-hero p { font-size: 1.125rem; opacity: 0.7; max-width: 600px; margin: 0 auto 2rem; line-height: 1.6; }
.install-types { max-width: var(--max-width); margin: 0 auto; padding: 4rem 3rem; }
.install-types h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; text-align: center; margin-bottom: 3rem; }
.install-types-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.install-type-card { text-align: center; padding: 2rem 1.5rem; border: 1px solid var(--stone-200); transition: all var(--transition-base); }
.install-type-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.install-type-card svg { width: 40px; height: 40px; color: var(--gold); margin-bottom: 1rem; }
.install-type-card h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; margin-bottom: 0.75rem; }
.install-type-card p { font-size: 0.875rem; color: var(--stone-600); line-height: 1.6; }
.install-steps-section { background: rgba(28,25,23,0.04); padding: 4rem 3rem; }
.install-steps-section h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; text-align: center; margin-bottom: 3rem; }
.install-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; max-width: var(--max-width); margin: 0 auto; }
.install-step { text-align: center; padding: 1.5rem; }
.install-step h3 { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 400; margin-bottom: 0.5rem; }
.install-step p { font-size: 0.8125rem; color: var(--stone-600); line-height: 1.6; }
.install-benefits { max-width: var(--max-width); margin: 0 auto; padding: 4rem 3rem; }
.install-benefits h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; text-align: center; margin-bottom: 3rem; }
.install-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.install-area { max-width: var(--max-width); margin: 0 auto; padding: 4rem 3rem; text-align: center; background: rgba(28,25,23,0.04); }
.install-area h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; margin-bottom: 1rem; }
.install-area p { font-size: 1rem; color: var(--stone-600); line-height: 1.8; }
.install-area-cities { font-size: 0.9375rem; color: var(--stone-500); max-width: 700px; margin: 1rem auto 0; }
.install-cta-band { background: var(--stone-900); color: white; padding: 4rem 3rem; text-align: center; }
.install-cta-band h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; margin-bottom: 1rem; }
.install-cta-band p { opacity: 0.7; margin-bottom: 2rem; }
/* Installation — local SEO additions */
.install-hero-eyebrow { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold-light); margin-bottom: 1rem; }
.install-hero-actions { display: flex; gap: 1rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.install-hero-phone { color: white; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.02em; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 2px; }
.install-hero-phone:hover { border-color: var(--gold-light); color: var(--gold-light); }
/* Cabinets — informational line cards */
.cab-section-sub { text-align: center; color: var(--stone-500); font-size: 1rem; line-height: 1.6; max-width: 680px; margin: -1.5rem auto 2.5rem; }
.cab-anatomy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; max-width: var(--max-width); margin: 0 auto; }
.cab-finish-block { max-width: var(--max-width); margin: 0 auto 2.5rem; }
.cab-finish-brand { font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); padding-bottom: 0.75rem; margin-bottom: 1rem; border-bottom: 0.5px solid var(--stone-200); }
.cab-finish-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; }
.cab-finish-note { font-size: 0.8125rem; color: var(--stone-500); line-height: 1.6; margin-top: 1rem; }
.cab-style-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; max-width: var(--max-width); margin: 0 auto; }
.cab-style-card { text-align: center; }
.cab-style-thumb { background: #f3efe9; border: 0.5px solid var(--stone-200); border-radius: 4px; overflow: hidden; aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; transition: border-color 0.18s, box-shadow 0.18s; }
.cab-style-card:hover .cab-style-thumb { border-color: var(--gold); box-shadow: 0 8px 20px rgba(21,18,15,0.08); }
.cab-style-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cab-style-num { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; color: var(--stone-600); margin-top: 0.625rem; }
/* Cabinets — door visualizer: a camera hovering over a table of cabinets; picking one pans to it */
.cab-vis { max-width: 1140px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; outline: none; }
.cab-vis-stage-row { display: flex; align-items: center; justify-content: center; gap: 4rem; width: 100%; }
.cab-vis-stage { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.cab-vis-viewport { position: relative; width: 360px; height: 501px; flex-shrink: 0; overflow: hidden; }
.cab-vis-grid { position: absolute; inset: 0; will-change: transform; }
.cab-vis-tile { position: absolute; width: 210px; height: 351px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #f3efe9; cursor: pointer; }
.cab-vis-tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cab-vis-tile.is-center { box-shadow: 0 16px 40px rgba(21,18,15,0.16); z-index: 3; }
.cab-vis:focus-visible .cab-vis-tile.is-center { border-color: var(--gold); }
/* right-side control panel — door-style + paint-color thumbnails drive the camera */
.cab-vis-controls { flex: 1 1 auto; max-width: 512px; min-width: 0; display: flex; flex-direction: column; }
.cab-vis-ctrl-label { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--stone-500); margin: 0 0 0.85rem; }
.cab-vis-ctrl-label:not(:first-child) { margin-top: 1.6rem; }
.cab-vis-ctrl-styles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.cab-vis-cstyle { padding: 4px; border: 1px solid var(--stone-200); border-radius: 5px; background: #f3efe9; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s; }
.cab-vis-cstyle img { width: 100%; aspect-ratio: 3/4; object-fit: contain; display: block; }
.cab-vis-cstyle:hover:not(.disabled) { border-color: var(--gold); }
.cab-vis-cstyle.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.cab-vis-cstyle.disabled { opacity: 0.32; cursor: default; }
.cab-vis-ctrl-colors { display: grid; grid-template-columns: repeat(7, 1fr); gap: 22px 12px; }
.cab-vis-cswatch { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0; border: none; background: none; cursor: pointer; }
.cab-vis-cswatch-chip { display: block; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12); box-shadow: inset 0 1px 3px rgba(0,0,0,0.14); transition: transform 0.15s, box-shadow 0.15s; }
.cab-vis-cswatch:hover .cab-vis-cswatch-chip { transform: scale(1.08); }
.cab-vis-cswatch.active .cab-vis-cswatch-chip { box-shadow: 0 0 0 2px var(--warm-bg, #fff), 0 0 0 4px var(--gold); }
.cab-vis-cswatch-name { font-family: var(--font-body); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em; color: var(--stone-600); line-height: 1.1; text-align: center; }
@media (max-width: 1040px) { .cab-vis-stage-row { flex-direction: column; align-items: center; gap: 2rem; } .cab-vis-controls { width: 100%; max-width: 520px; flex: none; } }
@media (max-width: 560px) { .cab-vis-ctrl-styles { grid-template-columns: repeat(4, 1fr); } .cab-vis-ctrl-colors { grid-template-columns: repeat(5, 1fr); } }
/* full-size neighbor cabinets tiled around the main; the vignette focuses the center */
.cab-vis-peek { position: absolute; width: 210px; height: 351px; padding: 0; border: none; background: none; cursor: pointer; z-index: 1; }
.cab-vis-peek img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cab-vis-peek-left  { top: 75px; left: -147px; }
.cab-vis-peek-right { top: 75px; left: 297px; }
.cab-vis-peek-up    { left: 75px; top: -288px; }
.cab-vis-peek-down  { left: 75px; top: 438px; }
.cab-vis-peek-ul { left: -147px; top: -288px; }
.cab-vis-peek-ur { left: 297px;  top: -288px; }
.cab-vis-peek-dl { left: -147px; top: 438px; }
.cab-vis-peek-dr { left: 297px;  top: 438px; }
/* vignette keeps the centered cabinet crisp and dissolves the surrounding table toward the edges */
.cab-vis-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 4; background: radial-gradient(ellipse 66% 70% at 50% 50%, transparent 55%, var(--warm-bg) 94%); }
/* arrows anchored to the viewport edges (they stay put while the grid pans beneath) */
.cab-vis-arrow { position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 0.5px solid var(--stone-200); background: rgba(255,255,255,0.92); color: var(--stone-600); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s, box-shadow 0.15s; z-index: 5; }
.cab-vis-arrow svg { width: 19px; height: 19px; }
.cab-vis-arrow:hover { border-color: var(--gold); color: var(--gold); box-shadow: 0 4px 12px rgba(21,18,15,0.14); }
.cab-vis-up    { top: 8px; left: 50%; transform: translateX(-50%); }
.cab-vis-down  { bottom: 8px; left: 50%; transform: translateX(-50%); }
.cab-vis-left  { left: 8px; top: 50%; transform: translateY(-50%); }
.cab-vis-right { right: 8px; top: 50%; transform: translateY(-50%); }
.cab-vis-labels { display: flex; align-items: baseline; gap: 0.625rem; margin-top: 1rem; }
.cab-vis-style { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 400; color: var(--stone-800); }
.cab-vis-dot { color: var(--stone-300); }
.cab-vis-finish { font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); }
.cab-vis-hint { font-size: 0.75rem; color: var(--stone-400); margin-top: 0.5rem; text-align: center; }
@media (max-width: 400px) { .cab-vis-viewport { transform: scale(0.86); } }
/* Cabinets R Us — door-style TIMELINE: door nodes on a rail, focused door blooms into a large card above; series split by labeled bars */
.cru-tl { max-width: 1140px; margin: 0 auto; outline: none; }
.cru-tl-stage { position: relative; height: 372px; }
.cru-tl-bloom { position: absolute; bottom: 0; display: flex; flex-direction: column; align-items: center; transition: left 0.5s cubic-bezier(0.33, 0, 0.18, 1), opacity 0.3s; }
.cru-tl-bloom-frame { width: 100%; height: 300px; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(180deg, #f6f2ea, #e9e2d5); border: 0.5px solid var(--stone-200); border-radius: 8px; box-shadow: 0 22px 50px rgba(21,18,15,0.18); overflow: hidden; }
.cru-tl-bloom-frame img { max-height: 300px; width: auto; max-width: 92%; object-fit: contain; display: block; animation: cruBloomIn 0.45s cubic-bezier(0.33, 0, 0.18, 1); }
@keyframes cruBloomIn { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
.cru-tl-bloom-cap { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 0.7rem; }
.cru-tl-bloom-name { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 400; color: var(--stone-800); line-height: 1; }
.cru-tl-bloom-series { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); }
.cru-tl-caret { position: absolute; top: 100%; margin-top: 6px; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 11px solid var(--stone-400); transform: translateX(-50%); }
/* the rail */
.cru-tl-rail { position: relative; display: flex; align-items: stretch; height: 124px; margin-top: 0.5rem; }
.cru-tl-rail::after { content: ''; position: absolute; left: 20px; right: 20px; top: 84px; height: 2px; background: linear-gradient(90deg, transparent, var(--stone-300) 6%, var(--stone-300) 94%, transparent); z-index: 0; }
.cru-tl-seg { position: relative; display: flex; flex-direction: column; z-index: 1; padding: 0 6px; }
.cru-tl-seg.divided::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 20px; width: 2px; background: var(--stone-300); }
.cru-tl-seg-label { text-align: center; font-family: var(--font-body); font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--stone-500); height: 30px; line-height: 1.2; display: flex; align-items: center; justify-content: center; }
.cru-tl-seg-nodes { flex: 1; display: flex; align-items: center; justify-content: space-evenly; gap: 4px; }
.cru-tl-node { position: relative; width: 30px; height: 60px; flex: 0 0 auto; padding: 0; border: 1px solid var(--stone-200); border-radius: 4px; background: #efeae1; overflow: hidden; cursor: pointer; box-shadow: 0 2px 5px rgba(21,18,15,0.08); transition: transform 0.28s cubic-bezier(0.33,0,0.18,1), box-shadow 0.28s, border-color 0.2s; }
.cru-tl-node img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cru-tl-node::after { content: ''; position: absolute; inset: 0; background: rgba(28,25,23,0.14); transition: opacity 0.25s; }
.cru-tl-node:hover, .cru-tl-node:focus-visible { transform: translateY(-4px) scale(1.14); box-shadow: 0 10px 22px rgba(21,18,15,0.2); border-color: var(--gold); outline: none; }
.cru-tl-node.active { transform: translateY(-6px) scale(1.22); box-shadow: 0 12px 26px rgba(21,18,15,0.24); border-color: var(--gold); z-index: 3; }
.cru-tl-node.active::after, .cru-tl-node:hover::after { opacity: 0; }
.cru-tl .cab-vis-hint { text-align: center; margin-top: 0.75rem; }
@media (max-width: 720px) {
  .cru-tl-stage { height: 296px; }
  .cru-tl-bloom { left: 50% !important; right: auto; transform: translateX(-50%); width: min(248px, 82vw) !important; }
  .cru-tl-bloom-frame { height: 232px; }
  .cru-tl-bloom-frame img { max-height: 232px; }
  .cru-tl-caret { display: none; }
  /* rail becomes a horizontal swipe strip so all 19 doors are reachable */
  .cru-tl-rail { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cru-tl-rail::-webkit-scrollbar { display: none; }
  .cru-tl-rail::after { left: 0; right: 0; top: 84px; }
  .cru-tl-seg { flex: 0 0 auto; padding: 0 10px; }
  .cru-tl-seg-nodes { justify-content: flex-start; gap: 9px; }
  .cru-tl-node { width: 34px; height: 66px; }
  .cru-tl-seg-label { font-size: 0.5625rem; letter-spacing: 0.08em; }
}
@media (max-width: 1024px) { .cab-style-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .cab-style-grid { grid-template-columns: repeat(3, 1fr); } }
/* Europa — finish palette wall: material-family tabs + named finish swatches with material-appropriate CSS treatments */
.eu-wall { max-width: 1080px; margin: 0 auto; }
.eu-tabs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; border-bottom: 0.5px solid var(--stone-200); margin-bottom: 1.9rem; }
.eu-tab { padding: 0.6rem 1.05rem; border: none; background: none; cursor: pointer; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--stone-500); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.2s, border-color 0.2s; }
.eu-tab:hover { color: var(--stone-800); }
.eu-tab.active { color: var(--stone-900); border-bottom-color: var(--gold); }
.eu-body { display: flex; gap: 2.5rem; align-items: flex-start; }
.eu-preview { flex: 0 0 300px; display: flex; flex-direction: column; }
.eu-chip-lg { width: 100%; height: 360px; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 46px rgba(21,18,15,0.16); border: 0.5px solid rgba(21,18,15,0.08); background: #efeae1; }
.eu-chip-lg img { width: 100%; height: 100%; object-fit: cover; display: block; animation: cruBloomIn 0.4s ease; }
.eu-preview-cap { margin-top: 1.1rem; }
.eu-preview-name { display: block; font-family: var(--font-heading); font-size: 1.75rem; font-weight: 400; color: var(--stone-800); line-height: 1.1; }
.eu-preview-fam { display: block; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); margin-top: 5px; }
.eu-preview-blurb { font-size: 0.875rem; line-height: 1.6; color: var(--stone-500); margin-top: 0.8rem; }
.eu-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 1.15rem 0.9rem; align-content: start; min-width: 0; }
.eu-sw { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: none; background: none; cursor: pointer; }
.eu-chip { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #efeae1; border: 0.5px solid rgba(21,18,15,0.1); box-shadow: 0 2px 6px rgba(21,18,15,0.08); transition: transform 0.18s, box-shadow 0.18s; }
.eu-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eu-sw:hover .eu-chip { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(21,18,15,0.16); }
.eu-sw.active .eu-chip { box-shadow: 0 0 0 2px var(--warm-bg, #fff), 0 0 0 4px var(--gold); }
.eu-sw-name { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; color: var(--stone-600); text-align: center; line-height: 1.15; }
.eu-wall .cab-vis-hint { text-align: center; margin-top: 1.6rem; }
@media (max-width: 820px) {
  .eu-body { flex-direction: column; align-items: center; }
  .eu-preview { flex: none; width: 100%; max-width: 380px; flex-direction: row; gap: 1.25rem; align-items: center; }
  .eu-chip-lg { width: 130px; height: 200px; flex: 0 0 130px; }
  .eu-preview-cap { margin-top: 0; }
  .eu-grid { width: 100%; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
}
@media (max-width: 520px) {
  .eu-tab { padding: 0.5rem 0.55rem; font-size: 0.75rem; }
  .eu-preview { flex-direction: column; max-width: 260px; }
  .eu-chip-lg { width: 100%; height: 220px; flex: none; }
}
.cab-mat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cab-mat-card { padding: 1.5rem; border: 0.5px solid var(--stone-200); border-radius: 6px; background: var(--warm-bg); }
.cab-mat-card h4 { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 500; color: var(--stone-800); margin-bottom: 0.5rem; }
.cab-mat-card p { font-size: 0.8125rem; color: var(--stone-600); line-height: 1.55; }
@media (max-width: 768px) { .cab-mat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1024px) { .cab-finish-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .cab-anatomy-grid { grid-template-columns: 1fr; gap: 2.5rem; } .cab-finish-grid { grid-template-columns: repeat(2, 1fr); } }
.cab-lines-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 1140px; margin: 0 auto; }
.cab-line-card { text-align: left; padding: 2rem; border: 0.5px solid var(--stone-200); border-radius: 6px; background: var(--warm-bg); }
.cab-line-eyebrow { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 0.5rem; }
.cab-line-card h3 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; color: var(--stone-800); margin-bottom: 0.625rem; }
.cab-line-pitch { font-size: 0.9375rem; color: var(--stone-600); line-height: 1.6; margin-bottom: 1rem; }
.cab-line-specs { list-style: none; padding: 0; margin: 0 0 1rem; }
.cab-line-specs li { position: relative; padding-left: 1.25rem; font-size: 0.875rem; color: var(--stone-600); line-height: 1.5; margin-bottom: 0.5rem; }
.cab-line-specs li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-size: 0.8125rem; }
.cab-line-bestfor { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stone-500); border-top: 0.5px solid var(--stone-200); padding-top: 0.875rem; }
@media (max-width: 980px) { .cab-lines-grid { grid-template-columns: 1fr; max-width: 480px; } }
.install-area-group { margin-top: 1.5rem; }
.install-area-group h3 { font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--stone-700); margin-bottom: 0.375rem; }
.install-area-nap { font-size: 0.875rem; color: var(--stone-500); margin-top: 1.75rem; }
.install-area-nap a { color: var(--gold); }
/* Reviews */
.install-reviews { max-width: var(--max-width); margin: 0 auto; padding: 4rem 3rem; text-align: center; }
.install-reviews h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; margin-bottom: 1rem; }
.install-reviews-rating { display: flex; gap: 0.625rem; align-items: center; justify-content: center; font-size: 0.9375rem; color: var(--stone-600); margin-bottom: 2.5rem; }
.install-stars { color: var(--gold); letter-spacing: 0.08em; }
.install-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.install-review-card { text-align: left; padding: 1.75rem; border: 0.5px solid var(--stone-200); border-radius: 6px; background: var(--warm-bg); margin: 0; }
.install-review-card p { font-family: var(--font-heading); font-size: 1.0625rem; font-style: italic; color: var(--stone-700); line-height: 1.55; margin: 0.625rem 0 1rem; }
.install-review-card cite { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; color: var(--stone-500); font-style: normal; }
/* Inline quote section */
.install-quote-section { background: rgba(28,25,23,0.04); padding: 4rem 3rem; }
.install-quote-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.install-quote-copy h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; margin-bottom: 1rem; }
.install-quote-copy p { font-size: 1rem; color: var(--stone-600); line-height: 1.7; max-width: 460px; }
.install-quote-card { background: white; border: 0.5px solid var(--stone-200); border-radius: 8px; padding: 2rem; box-shadow: var(--shadow-md, 0 8px 24px rgba(21,18,15,0.06)); }
.install-quote-form .checkout-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.install-quote-form .checkout-field { margin-bottom: 0.875rem; }
.install-quote-form button { margin-top: 0.5rem; }
.install-form-success { text-align: center; padding: 2rem 0; }
.install-form-success-icon { width: 60px; height: 60px; border-radius: 50%; background: #d1fae5; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; }
.install-form-success-icon svg { width: 30px; height: 30px; }
.install-form-success h3 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; margin-bottom: 0.5rem; }
.install-form-success p { color: var(--stone-600); font-size: 0.9375rem; }
/* FAQ */
.install-faq-section { max-width: 820px; margin: 0 auto; padding: 4rem 3rem; }
.install-faq-section h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; text-align: center; margin-bottom: 2.5rem; }
.install-faq-item { border-bottom: 0.5px solid var(--stone-200); }
.install-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: left; background: none; border: none; cursor: pointer; padding: 1.25rem 0; font-family: var(--font-heading); font-size: 1.1875rem; font-weight: 400; color: var(--stone-800); }
.install-faq-q svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--stone-400); transition: transform 0.2s; }
.install-faq-item.open .install-faq-q svg { transform: rotate(180deg); }
.install-faq-a { padding: 0 0 1.25rem; font-size: 0.9375rem; color: var(--stone-600); line-height: 1.7; }
@media (max-width: 768px) {
  .install-quote-inner { grid-template-columns: 1fr; gap: 2rem; }
  .install-reviews-grid { grid-template-columns: 1fr; }
}

/* ── INSPIRATION PAGE ── */
.inspiration-page { }
.inspo-hero { background: var(--stone-900); color: white; padding: 5rem 3rem; text-align: center; }
.inspo-hero h1 { font-family: var(--font-heading); font-size: 3.5rem; font-weight: 300; margin-bottom: 1rem; }
.inspo-hero p { font-size: 1.125rem; opacity: 0.7; max-width: 600px; margin: 0 auto 2rem; line-height: 1.6; }
.inspo-section { max-width: var(--max-width); margin: 0 auto; padding: 4rem 3rem; }
.inspo-section h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; text-align: center; margin-bottom: 0.5rem; }
.inspo-section-sub { text-align: center; color: var(--stone-500); font-size: 1rem; margin-bottom: 3rem; }
.inspo-rooms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.inspo-room-card { border-radius: var(--radius-lg); padding: 2rem 1.5rem; color: white; cursor: pointer; transition: all var(--transition-base); text-align: center; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.inspo-room-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.inspo-room-icon { margin-bottom: 1rem; }
.inspo-room-icon svg { width: 36px; height: 36px; color: white; }
.inspo-room-card h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; margin-bottom: 0.5rem; }
.inspo-room-card p { font-size: 0.8125rem; opacity: 0.85; line-height: 1.5; }
.inspo-tips { background: rgba(28,25,23,0.04); padding: 4rem 3rem; }
.inspo-tips h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; text-align: center; margin-bottom: 0.5rem; }
.inspo-tips .inspo-section-sub { text-align: center; color: var(--stone-500); font-size: 1rem; margin-bottom: 3rem; }
.inspo-tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: var(--max-width); margin: 0 auto; }
.inspo-tip-card { text-align: center; padding: 2rem 1.5rem; }
.inspo-tip-icon { margin-bottom: 1rem; }
.inspo-tip-icon svg { width: 36px; height: 36px; color: var(--gold); }
.inspo-tip-card h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; margin-bottom: 0.75rem; }
.inspo-tip-card p { font-size: 0.875rem; color: var(--stone-600); line-height: 1.7; }
.inspo-styles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.inspo-style-card { border-radius: var(--radius-lg); padding: 2rem 1.5rem; color: white; cursor: pointer; transition: all var(--transition-base); text-align: center; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.inspo-style-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.inspo-style-icon { margin-bottom: 1rem; }
.inspo-style-icon svg { width: 36px; height: 36px; color: white; }
.inspo-style-card h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; margin-bottom: 0.5rem; }
.inspo-style-card p { font-size: 0.8125rem; opacity: 0.85; line-height: 1.5; }
.inspo-cta-band { background: var(--stone-900); color: white; padding: 4rem 3rem; text-align: center; }
.inspo-cta-band h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; margin-bottom: 1rem; }
.inspo-cta-band p { opacity: 0.7; max-width: 500px; margin: 0 auto 2rem; }
.inspo-cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── SALE PAGE ── */
.sale-hero { background: var(--stone-900); color: white; padding: 5rem 3rem; text-align: center; position: relative; overflow: hidden; }
.sale-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(201,166,104,0.15) 0%, transparent 70%); pointer-events: none; }
.sale-hero-badge { display: inline-block; background: var(--gold); color: var(--stone-900); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.375rem 1.25rem; border-radius: 100px; margin-bottom: 1.5rem; position: relative; }
.sale-hero h1 { font-family: var(--font-heading); font-size: 4rem; font-weight: 300; margin-bottom: 1rem; position: relative; }
.sale-hero p { font-size: 1.125rem; opacity: 0.7; max-width: 600px; margin: 0 auto; line-height: 1.6; position: relative; }
.sale-hero-stats { display: flex; gap: 3rem; justify-content: center; margin-top: 2rem; position: relative; }
.sale-hero-stat { text-align: center; }
.sale-hero-stat .stat-value { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 300; color: var(--gold); }
.sale-hero-stat .stat-label { font-size: 0.8125rem; opacity: 0.6; margin-top: 0.25rem; }
.sale-grid-section { max-width: 1400px; margin: 0 auto; padding: 3rem 2rem; }
.sale-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
.sale-toolbar .result-count { font-size: 0.875rem; color: var(--stone-500); }
.sale-toolbar select { padding: 0.5rem 2rem 0.5rem 0.75rem; border: 1px solid var(--stone-300); border-radius: var(--radius-sm); font-size: 0.875rem; background: white; 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 d='M3 5l3 3 3-3' stroke='%2378716c' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; }
.sale-empty { text-align: center; padding: 6rem 2rem; }
.sale-empty h2 { font-family: var(--font-heading); font-size: 2rem; font-weight: 300; margin-bottom: 1rem; color: var(--stone-700); }
.sale-empty p { color: var(--stone-500); margin-bottom: 2rem; }
.sale-cta-band { background: var(--stone-900); color: white; padding: 4rem 3rem; text-align: center; }
.sale-cta-band h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; margin-bottom: 1rem; }
.sale-cta-band p { opacity: 0.7; max-width: 500px; margin: 0 auto 2rem; }
.sale-badge { position: absolute; top: 14px; left: 14px; background: var(--warm-bg); color: var(--stone-800); font: 500 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 10px; border-radius: 0; z-index: 2; }
.sale-price-text { color: #dc2626; font-weight: 600; }
.sale-original-price { text-decoration: line-through; color: var(--stone-400); font-size: 0.875rem; margin-right: 0.5rem; }
.sale-discount-tag { display: inline-block; background: rgba(220,38,38,0.1); color: #dc2626; font-size: 0.6875rem; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: var(--radius-sm); margin-left: 0.5rem; }

@media (max-width: 640px) {
  .sale-hero { padding: 3rem 1.5rem; }
  .sale-hero h1 { font-size: 2.5rem; }
  .sale-hero-stats { gap: 1.5rem; }
  .sale-hero-stat .stat-value { font-size: 1.75rem; }
  .sale-grid-section { padding: 2rem 1rem; }
  .sale-toolbar { flex-direction: column; align-items: flex-start; }
}

/* ── FLOOR QUIZ MODAL ── */
.quiz-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: var(--z-trade-modal); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.quiz-modal { background: var(--warm-bg); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; padding: 2.5rem 2rem; position: relative; border-radius: var(--radius-lg); }
.quiz-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.5rem; color: var(--stone-400); cursor: pointer; line-height: 1; }
.quiz-close:hover { color: var(--stone-800); }
.quiz-progress { display: flex; gap: 0.5rem; margin-bottom: 2rem; }
.quiz-progress-step { flex: 1; height: 3px; background: var(--stone-200); border-radius: 2px; transition: background 0.3s; }
.quiz-progress-step.active { background: var(--gold); }
.quiz-progress-step.done { background: var(--stone-800); }
.quiz-step-label { font-size: 0.7rem; color: var(--stone-400); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.quiz-modal h2 { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 300; margin-bottom: 0.5rem; }
.quiz-modal .subtitle { color: var(--stone-500); font-size: 0.875rem; margin-bottom: 1.5rem; }
.quiz-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.quiz-option { border: 2px solid var(--stone-200); border-radius: var(--radius-md); padding: 1.25rem 1rem; text-align: center; cursor: pointer; transition: all var(--transition-base); background: white; }
.quiz-option:hover { border-color: var(--stone-400); background: var(--stone-50); }
.quiz-option.selected { border-color: var(--gold); background: rgba(201,166,104,0.06); }
.quiz-option-icon { font-size: 1.75rem; margin-bottom: 0.5rem; display: block; }
.quiz-option-icon svg { width: 32px; height: 32px; margin: 0 auto; color: var(--stone-600); }
.quiz-option.selected .quiz-option-icon svg { color: var(--gold); }
.quiz-option-label { font-size: 0.8rem; font-weight: 500; color: var(--stone-700); display: block; }
.quiz-option.selected .quiz-option-label { color: var(--stone-900); }
.quiz-option-desc { font-size: 0.65rem; color: var(--stone-400); margin-top: 0.25rem; display: block; }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; }
.quiz-nav-back { background: none; border: none; color: var(--stone-500); cursor: pointer; font-size: 0.8rem; font-family: var(--font-body); display: flex; align-items: center; gap: 0.35rem; }
.quiz-nav-back:hover { color: var(--stone-800); }
.quiz-nav-back svg { width: 16px; height: 16px; }
.quiz-nav-next { padding: 0.75rem 2rem; background: var(--stone-900); color: white; border: none; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; font-family: var(--font-body); font-weight: 500; transition: background var(--transition-base); }
.quiz-nav-next:hover { background: var(--gold); }
.quiz-nav-next:disabled { opacity: 0.4; cursor: not-allowed; }
.quiz-nav-next:disabled:hover { background: var(--stone-900); }
.quiz-results-header { text-align: center; margin-bottom: 2rem; }
.quiz-results-header h2 { margin-bottom: 0.5rem; }
.quiz-results-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-top: 0.75rem; }
.quiz-results-tag { background: var(--stone-100); color: var(--stone-600); font-size: 0.7rem; padding: 0.3rem 0.75rem; border-radius: 100px; }
.quiz-results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.quiz-result-card { border: 1px solid var(--stone-200); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: all var(--transition-base); }
.quiz-result-card:hover { border-color: var(--gold); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.quiz-result-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.quiz-result-card-info { padding: 0.75rem; }
.quiz-result-card-name { font-size: 0.8rem; font-weight: 500; margin-bottom: 0.15rem; }
.quiz-result-card-price { font-size: 0.75rem; color: var(--stone-500); }
.quiz-view-all { display: block; text-align: center; padding: 0.875rem; background: none; border: 1px solid var(--stone-300); color: var(--stone-700); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; font-family: var(--font-body); font-weight: 500; transition: all var(--transition-base); width: 100%; }
.quiz-view-all:hover { border-color: var(--stone-800); background: var(--stone-800); color: white; }
@media (max-width: 480px) {
  .quiz-modal { padding: 1.5rem 1.25rem; }
  .quiz-options { grid-template-columns: repeat(2, 1fr); }
  .quiz-results-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}

/* ── TRADE MODAL (multi-step) ── */
.trade-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: var(--z-trade-modal); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.trade-modal { background: var(--warm-bg); width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; padding: 2.5rem 2rem; position: relative; }
.trade-modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.5rem; color: var(--stone-400); cursor: pointer; line-height: 1; }
.trade-modal-close:hover { color: var(--stone-800); }
.trade-steps-indicator { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; }
.trade-step-dot { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--stone-400); padding: 0.35rem 0.75rem; border-bottom: 2px solid var(--stone-200); transition: all 0.2s; }
.trade-step-dot.active { color: var(--stone-900); border-bottom-color: var(--gold); }
.trade-step-dot.done { color: var(--sage); border-bottom-color: var(--sage); }
.trade-toggle { text-align: center; margin-top: 1.5rem; font-size: 0.8125rem; color: var(--stone-500); }
.trade-toggle a { color: var(--gold); cursor: pointer; text-decoration: none; }
.trade-toggle a:hover { text-decoration: underline; }
.trade-msg { padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.8125rem; border-radius: 4px; }
.trade-msg-error { background: var(--color-error-bg); border: 1px solid #fecaca; color: var(--color-error); }
.trade-msg-success { background: var(--color-success-bg); border: 1px solid #bbf7d0; color: var(--color-success); }
.trade-doc-upload { border: 2px dashed var(--stone-300); padding: 1.25rem; text-align: center; cursor: pointer; transition: border-color 0.2s; margin-bottom: 0.75rem; font-size: 0.8125rem; color: var(--stone-500); }
.trade-doc-upload:hover { border-color: var(--gold); color: var(--stone-800); }
.trade-doc-upload.uploaded { border-style: solid; border-color: var(--sage); background: #f0fdf4; color: var(--stone-800); }

/* ── TRADE DASHBOARD ── */
.trade-field { margin-bottom: 0.75rem; }
.trade-field label { display: block; margin-bottom: 0.35rem; font-size: 0.8125rem; font-weight: 500; color: var(--stone-800); }
.trade-field input { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--stone-300); border-radius: 6px; font-size: 0.875rem; font-family: var(--font-body); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.trade-field input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,166,104,0.1); }
.trade-field input:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.trade-field select { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--stone-300); border-radius: 6px; font-size: 0.875rem; font-family: var(--font-body); background: white; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.trade-field select:focus:not(:focus-visible) { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,166,104,0.1); }
.trade-btn-row { display: flex; gap: 0.75rem; margin-top: 1rem; }
.trade-btn-row .btn { flex: 1; }
.trade-btn-secondary { flex: 1; padding: 0.65rem 1rem; background: white; color: var(--stone-800); border: 1px solid var(--stone-300); font-family: var(--font-body); font-size: 0.8125rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; transition: background 0.2s; }
.trade-btn-secondary:hover { border-color: var(--stone-800); background: var(--stone-50); }
.trade-dashboard { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }
.trade-dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.trade-dash-header h1 { font-family: var(--font-heading); font-size: 2rem; font-weight: 300; }
.trade-tier-badge { display: inline-block; background: linear-gradient(135deg, #c9a668, #dbb87a); color: white; border-radius: 20px; padding: 0.25rem 0.85rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.trade-dash-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--stone-200); margin-bottom: 2rem; }
.trade-dash-tab { padding: 1rem 1.75rem; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--stone-400); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--font-body); display: flex; align-items: center; gap: 0.5rem; transition: color 0.2s, border-color 0.2s; }
.trade-dash-tab svg { width: 16px; height: 16px; opacity: 0.5; }
.trade-dash-tab:hover { color: var(--stone-800); }
.trade-dash-tab.active { color: var(--stone-900); border-bottom-color: var(--gold); font-weight: 500; }
.trade-dash-tab.active svg { opacity: 1; }
.trade-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
.trade-stat-card { background: var(--warm-bg); border: none; border-radius: 12px; box-shadow: var(--shadow-sm); padding: 1.5rem; position: relative; overflow: hidden; transition: box-shadow 0.3s, transform 0.3s; }
.trade-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(135deg, var(--gold), var(--gold-light)); transform: scaleX(0); transition: transform 0.3s; }
.trade-stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.trade-stat-card:hover::before { transform: scaleX(1); }
.trade-stat-card .stat-icon { position: absolute; top: 1rem; right: 1rem; width: 32px; height: 32px; opacity: 0.12; color: var(--stone-600); }
.trade-stat-card label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone-500); display: block; margin-bottom: 0.5rem; }
.trade-stat-card .value { font-family: var(--font-heading); font-size: 2rem; font-weight: 400; color: var(--stone-900); line-height: 1.1; }
.trade-tier-progress { background: var(--warm-bg); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 1.5rem; margin-bottom: 2rem; }
.trade-tier-bar { height: 12px; background: var(--stone-100); border-radius: 6px; margin: 1rem 0 0.5rem; overflow: hidden; }
.trade-tier-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 6px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.trade-orders-table { width: 100%; border-collapse: collapse; background: var(--warm-bg); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; }
.trade-orders-table th { text-align: left; padding: 1rem 1.25rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone-500); border-bottom: 1px solid var(--stone-200); background: rgba(28,25,23,0.04); }
.trade-orders-table td { padding: 1rem 1.25rem; font-size: 0.875rem; border-bottom: 1px solid var(--stone-100); }
.trade-orders-table tr:last-child td { border-bottom: none; }
.trade-orders-table tbody tr { transition: background-color 0.15s; }
.trade-orders-table tbody tr:hover { background-color: var(--stone-50); }
.trade-status-badge { display: inline-block; padding: 0.2rem 0.65rem; font-size: 0.7rem; font-weight: 600; border-radius: 20px; text-transform: capitalize; }
.trade-status-badge.pending { background: var(--color-warning-bg); color: var(--color-warning); }
.trade-status-badge.confirmed { background: var(--color-info-bg); color: var(--color-info); }
.trade-status-badge.shipped { background: #d1fae5; color: #065f46; }
.trade-status-badge.delivered { background: #dcfce7; color: #16a34a; }
.trade-status-badge.cancelled { background: var(--color-error-bg); color: var(--color-error); }
.trade-status-badge.converted { background: #dcfce7; color: #16a34a; }
.trade-status-badge.sent { background: var(--color-info-bg); color: #2563eb; }
.trade-status-badge.draft { background: var(--stone-100); color: var(--stone-500); }
.trade-status-badge.active { background: #d1fae5; color: #065f46; }
.trade-card { background: var(--warm-bg); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 1.5rem; margin-bottom: 1rem; }
.trade-card h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; margin-bottom: 1rem; }
.trade-project-card { background: var(--warm-bg); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 1.5rem; cursor: pointer; position: relative; overflow: hidden; transition: box-shadow 0.3s, transform 0.3s; }
.trade-project-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.trade-project-card h4 { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 400; margin-bottom: 0.5rem; }
.trade-fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.trade-fav-item { background: var(--warm-bg); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 1rem; text-align: center; transition: box-shadow 0.3s, transform 0.3s; }
.trade-fav-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.trade-fav-item img { width: 100%; height: 140px; object-fit: cover; border-radius: 8px; margin-bottom: 0.75rem; }
.trade-fav-item .name { font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem; }
.trade-rep-card { background: var(--warm-bg); border-left: 3px solid var(--gold); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 2rem; display: flex; gap: 2rem; align-items: center; }
.trade-rep-avatar { width: 64px; height: 64px; background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: white; font-family: var(--font-heading); font-size: 1.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.trade-empty-state { text-align: center; padding: 4rem 2rem; background: var(--warm-bg); border-radius: 12px; box-shadow: var(--shadow-sm); }
.trade-empty-state svg { width: 48px; height: 48px; color: var(--stone-300); margin-bottom: 1rem; }
.trade-empty-state p { color: var(--stone-400); font-size: 0.9375rem; margin-bottom: 1.25rem; }
.bulk-order-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.bulk-order-table th { text-align: left; padding: 0.75rem; font-size: 0.8125rem; font-weight: 500; border-bottom: 1px solid var(--stone-200); }
.bulk-order-table td { padding: 0.5rem 0.75rem; }
.bulk-order-table input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--stone-300); border-radius: 6px; font-size: 0.875rem; font-family: var(--font-body); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.bulk-order-table input:focus:not(:focus-visible) { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,166,104,0.1); }
.bulk-order-table .remove-btn { background: none; border: none; cursor: pointer; color: var(--stone-400); font-size: 1.25rem; }

/* ── COLLECTIONS ── */
.collections-page { max-width: var(--max-width); margin: 3rem auto; padding: 0 3rem; }
.collections-page h1 { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 300; margin-bottom: 0.75rem; }
.collections-page .subtitle { color: var(--stone-600); font-size: 1rem; margin-bottom: 3rem; }
.collections-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; }
.collection-card { cursor: pointer; transition: transform var(--transition-base); position: relative; overflow: hidden; }
.collection-card:hover { transform: translateY(-4px); }
.collection-card-image { width: 100%; aspect-ratio: 4/3; background-color: var(--stone-100); overflow: hidden; }
.collection-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; }
.collection-card:hover .collection-card-image img { transform: scale(1.05); }
.collection-card-info { padding: 1.25rem 0; }
.collection-card-name { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; margin-bottom: 0.25rem; }
.collection-card-count { font-size: 0.8125rem; color: var(--stone-500); }

/* ── BRANDS (/brands A–Z index + /brands/:slug landing) ── */
.brand-index { columns: 4 230px; column-gap: 3.5rem; }
.brand-index-group { break-inside: avoid; margin-bottom: 2.25rem; }
.brand-index-letter { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 400; color: var(--stone-900); margin: 0 0 0.6rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--stone-200); }
.brand-index-list { list-style: none; margin: 0; padding: 0; }
.brand-index-list li { margin: 0; }
.brand-index-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; color: var(--stone-700); text-decoration: none; transition: color 0.15s; }
.brand-index-list a:hover { color: var(--gold-dark); }
.brand-index-list a:hover .brand-index-name { text-decoration: underline; text-underline-offset: 3px; }
.brand-index-name { font-size: 0.9375rem; line-height: 1.4; }
.brand-index-count { font-size: 0.75rem; color: var(--stone-400); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.brand-detail .brand-intro { max-width: 70ch; color: var(--stone-700); font-size: 1.0625rem; line-height: 1.7; margin-bottom: 1.5rem; }
.brand-detail .brand-intro p { margin: 0 0 1rem; }
.brand-detail .brand-footer { max-width: 70ch; color: var(--stone-600); font-size: 0.9375rem; line-height: 1.7; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--stone-200); }
.brand-detail .brand-footer p { margin: 0 0 1rem; }
@media (max-width: 640px) { .brand-index { columns: 2 140px; column-gap: 2rem; } .brand-index-letter { font-size: 1.5rem; } }

/* ── WISHLIST ── */
/* Wishlist heart: now part of .sku-card-hover-actions overlay (positioned via parent) */
.wishlist-heart { position: relative; top: auto; right: auto; z-index: auto; background: var(--warm-bg); border: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--stone-400); transition: all 220ms; opacity: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.wishlist-heart.active { opacity: 1; color: var(--color-rose); animation: wishlistPulse 0.4s ease; }
.wishlist-heart:hover { color: var(--color-rose); background: rgba(255,255,255,1); }
@keyframes wishlistPulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
.wishlist-heart svg { width: 16px; height: 16px; }
.wishlist-header-wrap { position: relative; cursor: pointer; display: flex; align-items: center; color: var(--stone-600); }
.wishlist-header-wrap:hover { color: var(--color-rose); }
.wishlist-header-wrap svg { width: 22px; height: 22px; }
.wishlist-badge { position: absolute; top: -6px; right: -10px; background: var(--color-rose); color: white; font-size: 0.6rem; font-weight: 600; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.wishlist-page { max-width: 1200px; margin: 3rem auto; padding: 0 3rem; }
.wishlist-page h1 { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 300; margin-bottom: 2rem; }
.wishlist-empty { text-align: center; padding: 4rem 0; }
.wishlist-empty p { color: var(--stone-500); margin-bottom: 1.5rem; font-size: 1rem; }

/* ── FOOTER ── */
.footer { background: var(--stone-900); color: white; }
.footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 4rem 3rem; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer-brand .logo-text { margin-bottom: 1rem; }
.footer-brand .logo-wordmark { color: #fff; }
.footer-brand .logo-wordmark em { color: #fff; }
.footer-brand p { font-size: 0.8125rem; color: var(--stone-400); line-height: 1.6; }
.footer-social { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--stone-600); color: var(--stone-400); transition: all 0.2s; text-decoration: none; }
.footer-social a:hover { border-color: white; color: white; }
.footer-social a svg { width: 16px; height: 16px; }
.footer-col h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone-400); margin-bottom: 1rem; }
.footer-col a { display: block; padding: 0.25rem 0; font-size: 0.8125rem; color: var(--stone-300); text-decoration: none; transition: color 0.15s; cursor: pointer; }
.footer-col a:hover { color: white; }
.footer-col .footer-hours { font-size: 0.8125rem; color: var(--stone-400); line-height: 1.8; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 1.5rem 3rem; text-align: center; font-size: 0.75rem; color: var(--stone-500); }
.footer-visit-detail { font-size: 0.8125rem; color: var(--stone-400); line-height: 1.8; }
.footer-visit-detail a { color: var(--stone-300); text-decoration: none; transition: color 0.15s; }
.footer-visit-detail a:hover { color: white; }
.footer-bottom-links { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; }
.footer-bottom-links a { font-size: 11px; color: var(--stone-500); text-decoration: none; transition: color 0.15s; }
.footer-bottom-links a:hover { color: var(--stone-300); }
.footer-bottom-links span { font-size: 11px; color: var(--stone-600); }

/* ── MOBILE NAV DRAWER (drill-in) — styles per Claude Design ── */
.mobile-nav-overlay { position: fixed; inset: 0; background: rgba(21,18,15,0.45); z-index: calc(var(--z-overlay) - 100); opacity: 0; pointer-events: none; transition: opacity var(--transition-base); }
.mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-nav { position: fixed; top: 0; left: 0; bottom: 0; width: 344px; max-width: 88vw; background: var(--cream-warm); z-index: calc(var(--z-overlay) - 99); transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.mobile-nav.open { transform: translateX(0); }

/* Sliding track — root panel + one sub panel; slide left to reveal the sub-section */
.mobile-nav-track { flex: 1; display: flex; width: 200%; min-height: 0; transform: translateX(0); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.mobile-nav-track.show-sub { transform: translateX(-50%); }
.mobile-nav-panel { flex: 0 0 50%; width: 50%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }

/* Header */
.mobile-nav-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.125rem 1.5rem 1rem; border-bottom: 1px solid var(--stone-300); }
.mobile-nav-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; letter-spacing: 0.03em; color: var(--stone-900); line-height: 1; }
.mobile-nav-back { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0; background: none; border: none; cursor: pointer; font-family: var(--font-heading); font-size: 1.375rem; font-weight: 400; letter-spacing: 0.02em; color: var(--stone-900); -webkit-tap-highlight-color: transparent; }
.mobile-nav-back svg { width: 18px; height: 18px; color: var(--stone-500); flex-shrink: 0; }
.mobile-nav-back:hover { color: var(--gold-dark); }
.mobile-nav-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.75rem; background: none; border: none; color: var(--stone-500); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mobile-nav-close svg { width: 18px; height: 18px; }

/* Search entry — a bar that opens the full-screen search overlay */
.mobile-nav-search { display: flex; align-items: center; gap: 0.625rem; padding: 0.9375rem 1.5rem; border-bottom: 1px solid var(--stone-200); background: rgba(255,255,255,0.55); cursor: pointer; }
.mobile-nav-search svg { width: 15px; height: 15px; color: var(--stone-400); flex-shrink: 0; }
.mobile-nav-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-family: var(--font-body); font-size: 0.875rem; color: var(--stone-800); cursor: pointer; }
.mobile-nav-search input::placeholder { color: var(--stone-500); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; }

/* Eyebrow label above the link list */
.mobile-nav-eyebrow { padding: 1.375rem 1.5rem 0.625rem; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--stone-500); }

/* Link list — non-category links sit in a --top group above the "Shop" eyebrow */
.mobile-nav-links { flex: 1; }
.mobile-nav-links--top { flex: 0 0 auto; }
.mobile-nav-links > a { display: flex; align-items: center; min-height: 48px; padding: 0.75rem 1.5rem; font-family: var(--font-heading); font-size: 1.1875rem; font-weight: 400; letter-spacing: 0.01em; color: var(--stone-900); text-decoration: none; cursor: pointer; border-bottom: 1px solid rgba(120,113,108,0.16); transition: color 0.15s; }
.mobile-nav-links > a:hover, .mobile-nav-links > a:active { color: var(--gold-dark); }

/* Category rows — drill in to a separate sub-section (chevron points right) */
.mobile-nav-cat-item { border-bottom: 1px solid rgba(120,113,108,0.16); }
.mobile-nav-cat-header { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; min-height: 48px; padding: 0.75rem 1.5rem; cursor: pointer; font-family: var(--font-heading); font-size: 1.1875rem; font-weight: 400; letter-spacing: 0.01em; color: var(--stone-900); background: none; border: none; width: 100%; text-align: left; transition: color 0.15s; }
.mobile-nav-cat-header > span { flex: 1; min-width: 0; }
.mobile-nav-cat-header svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--stone-400); transition: color 0.15s; }
.mobile-nav-cat-header:hover, .mobile-nav-cat-header:active { color: var(--gold-dark); }
.mobile-nav-cat-header:hover svg { color: var(--gold-dark); }

/* Footer — dark trade CTA above the account block */
.mobile-nav-trade-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: 1.125rem 1.5rem; background: var(--stone-900); color: var(--gold-light); border: none; font-family: var(--font-body); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.18em; cursor: pointer; transition: color var(--transition-base); text-decoration: none; }
.mobile-nav-trade-cta svg { width: 16px; height: 16px; flex-shrink: 0; }
.mobile-nav-trade-cta:hover { color: #fff; }
.mobile-nav-footer { padding: 1.25rem 1.5rem 2rem; border-top: 1px solid var(--stone-300); background: var(--cream-cool); }
.mobile-nav-user { font-family: var(--font-heading); font-style: italic; font-size: 0.9375rem; color: var(--stone-500); margin-bottom: 0.375rem; }
.mobile-nav-footer a { display: block; padding: 0.5rem 0; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--stone-700); text-decoration: none; cursor: pointer; transition: color 0.15s; }
.mobile-nav-footer a:hover { color: var(--gold-dark); }

/* ── FILTER DRAWER (mobile) ── */
.filter-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: calc(var(--z-overlay) - 100); opacity: 0; pointer-events: none; transition: opacity var(--transition-base); }
.filter-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.filter-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 90vw; background: var(--warm-bg); z-index: calc(var(--z-overlay) - 99); transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; }
.filter-drawer.open { transform: translateX(0); }
.filter-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 0.5px solid rgba(28,25,23,0.12); }
.filter-drawer-head h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; display: flex; align-items: center; gap: 0.5rem; }
.filter-drawer-body { flex: 1; overflow-y: auto; padding: 1.25rem; }
.filter-drawer-footer { padding: 1rem 1.25rem; border-top: 0.5px solid rgba(28,25,23,0.12); }
.filter-drawer-results-btn { width: 100%; padding: 0.75rem 1.25rem; background: var(--stone-800); color: white; border: none; font: 500 11px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 0.15s; }
.filter-drawer-results-btn:hover { background: var(--stone-900); }
.filter-drawer-pills { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.75rem 1.25rem; scrollbar-width: none; border-bottom: 0.5px solid rgba(28,25,23,0.06); }
.filter-drawer-pills::-webkit-scrollbar { display: none; }
.filter-drawer-pills:empty { display: none; }
.mobile-filter-btn { display: none; padding: 0.5rem 1rem; border: 1px solid var(--stone-300); background: white; font-size: 0.8125rem; font-family: var(--font-body); cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── MOBILE SEARCH OVERLAY — styles per Claude Design ── */
.mobile-search-overlay { position: fixed; inset: 0; background: var(--cream-warm); z-index: var(--z-overlay); padding: 0; display: flex; flex-direction: column; }
.mobile-search-header { display: flex; align-items: center; gap: 0.75rem; margin: 0; padding: 0.875rem 1.25rem 0.75rem; border-bottom: 1px solid var(--stone-300); }
.mobile-search-icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--stone-400); pointer-events: none; }
.mobile-search-input { flex: 1; min-width: 0; padding: 0.5rem 1.75rem 0.5rem 1.625rem; border: none; border-bottom: 1px solid var(--stone-400); background: none; font-family: var(--font-heading); font-size: 1.25rem; letter-spacing: 0.01em; color: var(--stone-900); outline: none; }
.mobile-search-input::placeholder { font-style: italic; color: var(--stone-400); }
.mobile-search-input:focus { border-bottom-color: var(--gold); }
.mobile-search-input:focus-visible { outline: none; }
.mobile-search-close { background: none; border: none; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--stone-500); cursor: pointer; padding: 0.5rem 0 0.5rem 0.25rem; white-space: nowrap; }
.mobile-search-results { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 2rem; }
.mobile-search-result { display: flex; align-items: center; gap: 1rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid rgba(120,113,108,0.14); cursor: pointer; }
.mobile-search-result:active { background: rgba(255,255,255,0.6); }
.mobile-search-result-img { width: 56px; height: 56px; background: var(--stone-100); flex-shrink: 0; }
.mobile-search-result-img--lg { width: 64px; height: 64px; }
.mobile-search-result-img img { width: 100%; height: 100%; object-fit: cover; }
.mobile-search-result-name { font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 400; line-height: 1.25; color: var(--stone-900); }
.mobile-search-result-meta { font-size: 0.75rem; letter-spacing: 0.02em; color: var(--stone-500); margin-top: 0.25rem; display: flex; align-items: center; gap: 0.375rem; }
.mobile-search-result-price { font-size: 0.8125rem; color: var(--stone-700); margin-top: 0.25rem; }
.mobile-search-result-price .search-panel-sale-tag { margin-right: 0.35rem; }
/* Overlay-scoped restyle of the shared suggest sections */
.mobile-search-overlay .search-suggest-section { padding: 0; }
.mobile-search-overlay .search-suggest-label { display: flex; align-items: center; justify-content: space-between; padding: 1.375rem 1.25rem 0.625rem; font-size: 0.625rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.18em; color: var(--stone-500); }
.mobile-search-overlay .search-recent-clear { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-500); background: none; border: none; cursor: pointer; }
.mobile-search-overlay .search-suggest-popular { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 1.25rem 0.5rem; }
.mobile-search-overlay .search-suggest-popular-item { display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.5625rem 0.8125rem; border: 1px solid var(--stone-300); background: rgba(255,255,255,0.6); font-size: 0.8125rem; color: var(--stone-700); cursor: pointer; }
.mobile-search-overlay .search-suggest-popular-item svg { width: 13px; height: 13px; color: var(--stone-400); }
.mobile-search-overlay .search-suggest-item { padding: 0.75rem 1.25rem; border-bottom: 1px solid rgba(120,113,108,0.14); }
.mobile-search-overlay .search-suggest-footer { margin: 1.25rem 1.25rem 0; padding: 1rem; border: 1px solid var(--stone-900); text-align: center; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.16em; color: var(--stone-900); cursor: pointer; }

/* ── RESPONSIVE (968px) ── */
@media (max-width: 968px) {
  :root { --header-height: var(--header-height-mobile); }
  .utility-bar { display: none; }
  .header-nav { display: none; }
  .mobile-menu-btn { display: flex; }
  .mobile-search-btn { display: flex; }
  .header-search { display: none; }
  .search-panel { display: none; }
  /* Centered logo; account lives in the menu drawer on mobile */
  .header-main { display: flex; align-items: center; justify-content: space-between; position: relative; padding: 0 0.375rem; height: var(--header-height-mobile); border-bottom: 0.5px solid rgba(21,18,15,0.08); gap: 0; }
  .header-main-left { flex: 0 0 auto; }
  .header-main-right { flex: 0 0 auto; gap: 0; }
  .header-main-right .header-action-btn, .header-main-right .mobile-search-btn { min-width: 34px; }
  .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .header-action-btn--account { display: none; }
  .logo-wordmark { font-size: 0.875rem; letter-spacing: 0.08em; text-indent: 0.08em; }
  .logo-script { font-size: 1.3rem; }
  .category-hero { height: 200px; padding: 1.5rem; }
  .category-hero h1 { font-size: 2.25rem; }
  .category-hero p { font-size: 0.9rem; }
  .category-header-editorial { padding: 24px 1.5rem 32px; }
  .category-header-editorial .cat-header-body { grid-template-columns: 1fr; gap: 24px; }
  .category-header-editorial .cat-header-headline { font-size: 48px; }
  .browse-layout { display: block; padding: 1.5rem; }
  .browse-content { padding-left: 0; }
  .sidebar { display: none; }
  .mobile-filter-btn { display: inline-flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; white-space: nowrap; }
  /* Keep the Sort control + Filters button from crowding/overlapping on narrow screens */
  .browse-toolbar-row { row-gap: 12px; }
  .browse-toolbar { min-width: 0; flex: 1 1 auto; }
  .browse-toolbar-right { gap: 10px; min-width: 0; }
  /* Let the count shrink (ellipsis) instead of shoving the Filters button off-screen */
  .browse-toolbar .result-count { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Related searches: single horizontal-scroll strip instead of wrapping into stacked rows */
  .browse-related-searches { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .browse-related-searches::-webkit-scrollbar { display: none; }
  .browse-related-pill { flex: 0 0 auto; white-space: nowrap; }
  .sku-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .skeleton-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .skeleton-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .sku-detail { padding: 2rem 2rem 4rem; }
  .sku-detail-main { gap: 2.5rem; }
  .sku-detail-title-row { font-size: 2.5rem; }
  .sku-detail-gallery { position: static; }
  .sku-detail-info { position: static; }
  .hero { height: 65vh; min-height: 400px; }
  .hero-content { padding: 2.5rem 1.5rem; }
  .hero-content h1 { font-size: 2.75rem; }
  .category-tile { width: calc((100% - 3rem) / 3); min-width: calc((100% - 3rem) / 3); }
  .category-landing { padding: 2rem 1.5rem; }
  .category-landing-grid { grid-template-columns: repeat(2, 1fr); }
  .subcategory-strip { padding: 0 1.5rem; }
  .subcategory-strip-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .subcategory-strip-tile { height: 80px; }
  .homepage-section { padding: 3rem 1.5rem; }
  .homepage-cat-grid { grid-template-columns: 1fr 1fr; }
  .trust-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .trust-strip { padding: 1.25rem 1.5rem; }
  .looks-grid { grid-template-columns: repeat(2, 1fr); }
  .homepage-cta-duo { grid-template-columns: 1fr; padding: 3rem 1.5rem; gap: 1rem; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .homepage-trade-band { padding: 3.5rem 1.5rem; }
  .inspo-gallery { grid-template-columns: repeat(2, 1fr); }
  .inspo-gallery-item.tall { grid-row: span 1; }
  .newsletter-form { max-width: 480px; margin: 0 auto; }
  .credential-strip-inner { gap: 0; font-size: 0.65rem; }
  .credential-strip-inner .cred-dot { margin: 0 0.6rem; }
  .credential-strip { padding: 1rem 1.5rem; }
  .trade-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .trade-steps { grid-template-columns: repeat(2, 1fr); }
  .trade-tiers-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
  .footer-inner .footer-col:nth-child(4),
  .footer-inner .footer-col:nth-child(5) { grid-row: 2; }
  /* Formulary homepage */
  .form-hero { padding: 80px 2rem 70px; }
  .form-hero-headline { font-size: 2.75rem; }
  .form-cabinet-inner { grid-template-columns: 1fr; }
  .form-cabinet-content { padding: 3rem 2rem; order: 1; }
  .form-cabinet-images { order: 2; }
  .form-specimen-grid { grid-template-columns: repeat(2, 1fr); }
  .form-counsel-headline { font-size: 2rem; }
  /* Shop landing */
  .shop-landing-hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .shop-landing-hero-headline { font-size: 4rem; }
  .shop-landing-hero { padding: 70px 2rem 60px; }
  .shop-cat-mosaic { grid-template-columns: 1fr; }
  .shop-cat-heroes { flex-direction: row; gap: 1rem; }
  .shop-cat-grid-right { grid-template-columns: repeat(2, 1fr); }
  .shop-featured-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-trade-benefits { grid-template-columns: repeat(2, 1fr); }
}

/* ── RESPONSIVE (768px) ── */
@media (max-width: 768px) {
  .sku-detail { padding: 1rem; margin-top: 0; }
  /* Reorder PDP: image/thumbs → buy box (info) → specs → description → docs.
     display:contents lifts the gallery's children into the flex flow so the
     info column can slot between the images and the spec sections. */
  .sku-detail-main { display: flex; flex-direction: column; gap: 2rem; align-items: stretch; }
  .sku-detail-gallery { display: contents; }
  .gallery-thumbs { margin-top: -1.25rem; }
  .sku-detail-info { position: static; order: 1; }
  .pdp-specs-section { order: 2; margin-top: 0; }
  /* Specs → compact 2-column stacked grid (label above value), matching the
     packaging-info block above it. Removes the wide desktop label gutter. */
  .specs-table, .specs-table tbody, .specs-table tr, .specs-table td { display: block; }
  .specs-table { table-layout: auto; }
  .specs-table tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; }
  .specs-table tr { display: grid; gap: 0.25rem; align-content: start; }
  .specs-table tr td { padding: 0; border-bottom: none; width: auto; }
  .specs-table tr td:first-child { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone-500); }
  .specs-table tr td:last-child { font-size: 0.9375rem; line-height: 1.35; }
  .specs-table tr:last-child td { border-bottom: none; }
  .pdp-desc-section { order: 3; margin-top: 0; }
  .pdp-docs-section { order: 4; margin-top: 0; }
  .sku-detail-title-row { font-size: 2rem; }
  .pdp-breadcrumbs { display: none; }
  .siblings-section { margin-top: 2rem; padding-top: 2rem; }
  .siblings-strip { grid-template-columns: repeat(2, 1fr); }
  .calc-input-row { grid-template-columns: 1fr; }
  .carpet-specs-band { grid-template-columns: repeat(2, 1fr); }
  .carpet-specs-band > :only-child { grid-column: 1 / -1; }
  .carpet-roll-info { grid-template-columns: 1fr 1fr; }
  .pdp-pdf-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; gap: 2rem; }
  .install-cta { grid-template-columns: 1fr; text-align: center; }
  .install-cta .pdp-btn { width: 100%; justify-self: center; }
  .ct-header { padding: 24px 1.5rem 24px; }
  .ct-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .ct-title { font-size: 48px; }
  .ct-grid { padding: 24px 1.5rem 40px; grid-template-columns: 1fr; gap: 32px; }
  .ct-line { grid-template-columns: 90px 1fr; gap: 16px; }
  .ct-line-right { grid-column: 1 / -1; }
  .ct-qty-stepper { width: 160px; }
  .ct-summary { position: static; }
  .ct-promo-row { grid-template-columns: 1fr; gap: 16px; }
  .checkout-page { grid-template-columns: 1fr !important; padding: 0 1.5rem; }
  .category-hero { height: 160px; padding: 1.25rem 1rem; }
  .category-hero h1 { font-size: 1.75rem; }
  .category-hero p { font-size: 0.8rem; max-width: 400px; }
  .category-header-editorial { padding: 20px 1rem 24px; }
  .category-header-editorial .cat-header-headline { font-size: 36px; }
  .category-header-editorial .cat-header-top { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
  .category-header-editorial .cat-header-facts { grid-template-columns: repeat(2, 1fr); }
  .subcategory-strip { padding: 0 1rem; }
  .subcategory-strip-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .subcategory-strip-tile { height: 70px; }
  .browse-layout { padding: 1rem; }
  .sku-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sku-card-image { height: 180px; }
  .sku-card-body { padding: 12px 14px 14px; }
  .sku-card-name { font-size: 16px; }
  .sku-card-vendor { font-size: 12px; }
  .sku-card-price { font-size: 15px; }
  .sku-card-meta-row { font-size: 9px; }
  .skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .skeleton-stat-grid { grid-template-columns: 1fr; }
  .sku-card-qv-gradient { display: none; }
  .sku-card-hover-actions { opacity: 1; }
  .quick-view { grid-template-columns: 1fr; max-width: 480px; max-height: 90vh; }
  .quick-view-main-image { height: 320px; }
  .quick-view-thumbstrip { grid-template-columns: repeat(4, 1fr); padding: 8px 10px; gap: 6px; }
  .quick-view-thumb { height: 56px; }
  .quick-view-variant-swatch { width: 38px; height: 38px; }
  .quick-view-info { padding: 24px 20px 20px; gap: 14px; max-height: none; }
  .quick-view-info h2 { font-size: 28px; }
  .qv-price-amount { font-size: 28px; }
  .qv-price-block { flex-direction: column; gap: 8px; }
  .qv-price-right { text-align: left; }
  .qv-specs-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .qv-spec-item:nth-child(3) { padding-left: 0; border-left: none; }
  .quick-view-actions { grid-template-columns: 1fr; }
  .quick-view-actions.qv-sqft-actions { grid-template-columns: 1fr; }
  .qv-footer { flex-direction: column; gap: 12px; align-items: stretch; text-align: center; }
  .qv-footer-links { justify-content: center; }
  .qv-detail-link { align-self: center; }
  .hero { height: 55vh; min-height: 360px; }
  .hero-content h1 { font-size: 2.25rem; }
  .homepage-section { padding: 2.5rem 1rem; }
  .homepage-featured-band { padding: 2.5rem 1rem; }
  .homepage-section h2 { font-size: 2rem; }
  .trust-strip { padding: 1rem; }
  .trust-strip-inner { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .trust-strip-item { gap: 0.5rem; }
  .trust-strip-icon { width: 28px; height: 28px; }
  .trust-strip-text { font-size: 0.7rem; }
  .looks-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .look-card-name { font-size: 1.15rem; }
  .homepage-cta-duo { padding: 2.5rem 1rem; gap: 0.75rem; }
  .cta-card { padding: 2rem 1.5rem; min-height: 180px; }
  .cta-card h3 { font-size: 1.5rem; }
  .services-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .service-card { padding: 1.5rem 1rem; }
  .service-card h3 { font-size: 1.1rem; }
  .newsletter-band { padding: 3rem 1rem; }
  .newsletter-form { flex-direction: column; max-width: 400px; margin: 0 auto; }
  .category-tile { width: calc((100% - 1.5rem) / 2); min-width: calc((100% - 1.5rem) / 2); }
  .category-landing { padding: 2rem 1rem; }
  .carousel-arrow { width: 40px; height: 40px; }
  .carousel-arrow-left { left: 0; }
  .carousel-arrow-right { right: 0; }
  .siblings-strip { gap: 0.75rem; }
  .variant-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.75rem; }
  .color-swatch { width: 40px; height: 40px; }
  .attr-pill { font-size: 0.75rem; padding: 0.35rem 0.75rem; }
  .attr-select { font-size: 0.8125rem; padding: 0.5rem 0.75rem; }
  .collections-page { padding: 0 1.5rem; }
  .collections-grid { grid-template-columns: 1fr; }
  .wishlist-page { padding: 0 1.5rem; }
  .trade-dashboard { padding: 0 1rem; }
  .trade-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .trade-dash-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .trade-dash-tab { padding: 0.75rem 1rem; white-space: nowrap; font-size: 0.75rem; }
  .trade-rep-card { flex-direction: column; text-align: center; }
  .trade-hero h1 { font-size: 2.5rem; }
  .trade-benefits-grid { grid-template-columns: 1fr; }
  .trade-steps { grid-template-columns: 1fr; }
  .trade-tiers-grid { grid-template-columns: 1fr; }
  .gallery-thumbs { gap: 0.375rem; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .breadcrumbs { font-size: 0.75rem; }
  .cart-drawer { max-width: 100vw; width: 100vw; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-social { justify-content: flex-start; }
  .footer-bottom { padding: 1rem 1.5rem; }
  .toast-container { bottom: 1rem; right: 1rem; left: 1rem; }
  .toast { min-width: 0; max-width: none; }
  .back-to-top { bottom: 1.5rem; right: 1rem; }
  .not-found-search { flex-direction: column; }

  /* Checkout form rows — stack on mobile */
  .checkout-row { grid-template-columns: 1fr; }
  .checkout-row-3 { grid-template-columns: 1fr; }
  .checkout-input { font-size: 1rem; padding: 0.875rem 1rem; }

  /* Cart qty buttons — larger touch targets */
  .ct-qty-btn { width: 40px; height: 40px; }

  /* Trade tables — scroll wrapper */
  .trade-orders-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bulk-order-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Trade landing — tighter padding */
  .trade-hero { padding: 3rem 1.5rem; }
  .trade-hero p { font-size: 1rem; }
  .trade-benefits { padding: 2.5rem 1.5rem; }
  .trade-how-it-works { padding: 2.5rem 1.5rem; }
  .trade-cta-section { padding: 3rem 1.5rem; }

  /* Hero — image shorter on mobile */
  .hero-image { max-height: 300px; }

  /* Modal — less padding */
  .modal-content { padding: 1.75rem; }

  /* Confirmation page */
  .confirmation-page { padding: 0 1.5rem; margin: 2rem auto; }
  .confirmation-page h1 { font-size: 2rem; }

  /* Header actions — tighter gap on mobile */
  .header-actions { gap: 0.25rem; }

  /* Homepage sections — tighter */
  .homepage-section h2 { font-size: 1.75rem; }
  .homepage-section .subtitle { font-size: 0.875rem; margin-bottom: 2rem; }

  /* Unit qty stepper — bigger touch target */
  .unit-qty-stepper button { width: 44px; height: 44px; }

  /* Wishlist heart — bigger touch target */
  .wishlist-heart { width: 44px; height: 44px; }

  /* Cart page */
  .ct-header { padding: 20px 1rem 20px; }
  .ct-title { font-size: 40px; }
  .ct-grid { padding: 20px 1rem 32px; gap: 24px; }
  .ct-line-name { font-size: 20px; }
  .ct-line-thumb { width: 90px; height: 90px; }
  .ct-summary-total-value { font-size: 30px; }

  /* Installation page */
  .install-types-grid { grid-template-columns: repeat(2, 1fr); }
  .install-steps { grid-template-columns: repeat(2, 1fr); }
  .install-benefits-grid { grid-template-columns: repeat(2, 1fr); }

  /* Not found */
  .not-found-page { margin: 2rem auto; padding: 0 1rem; }
  /* Formulary homepage */
  .form-hero { padding: 60px 1.5rem 50px; }
  .form-hero-headline { font-size: 2.25rem; }
  .form-cabinet-content { padding: 2.5rem 1.5rem; }
  .form-cabinet-headline { font-size: 1.75rem; }
  .form-cabinet-stats { gap: 1.5rem; }
  .form-specimen-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .form-section { padding: 3rem 1.5rem; }
  .form-section-headline { font-size: 1.75rem; }
  .form-counsel-band { padding: 3rem 1.5rem; }
  .form-counsel-headline { font-size: 1.75rem; }
  .form-counsel-actions { flex-direction: column; align-items: center; }
  /* Shop landing */
  .shop-landing-hero { padding: 50px 1.5rem 40px; }
  .shop-landing-hero-headline { font-size: 3.25rem; }
  .shop-landing-section { padding: 3rem 1.5rem; }
  .shop-cat-heroes { flex-direction: column; }
  .shop-featured-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .shop-trade-band { padding: 3rem 1.5rem; }
  .shop-trade-benefits { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .shop-trade-headline { font-size: 1.75rem; }
}

/* ── RESPONSIVE (480px) ── */
@media (max-width: 480px) {
  .sku-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sku-card-image { height: 150px; }
  .sku-card-body { padding: 10px 12px 12px; gap: 4px; }
  .sku-card-name { font-size: 14px; }
  .sku-card-vendor { font-size: 11px; }
  .sku-card-price { font-size: 14px; }
  .sku-card-meta-row { font-size: 8px; letter-spacing: 0.12em; }
  .sku-card-view-link { display: none; }
  .sku-card-variant { font-size: 0.7rem; }
  .category-header-editorial .cat-header-headline { font-size: 28px; }
  .category-header-editorial .cat-header-facts { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .category-header-editorial .cat-fact-value { font-size: 18px; }
  .hero-content { padding: 2rem 1.25rem; }
  .hero-content h1 { font-size: 1.75rem; }
  .hero-content p { font-size: 0.875rem; }
  .hero-cta { padding: 0.875rem 2rem; font-size: 0.75rem; }
  .homepage-cat-grid { grid-template-columns: 1fr; gap: 0.375rem; }
  .homepage-cat-tile-overlay { padding: 1.25rem; }
  .homepage-cat-tile-name { font-size: 1.25rem; }
  .homepage-featured-band { padding: 2.5rem 1rem; }
  .homepage-trade-band { padding: 2.5rem 1rem; }
  .homepage-trade-band h2 { font-size: 1.75rem; }
  .credential-strip { padding: 0.75rem 1rem; }
  .credential-strip-inner { font-size: 0.6rem; flex-direction: column; gap: 0.25rem; text-align: center; }
  .credential-strip-inner .cred-dot { display: none; }
  .inspo-gallery { grid-template-columns: 1fr 1fr; gap: 0.375rem; }
  .inspo-gallery-item.tall { grid-row: span 1; }
  .quiz-cta-content { padding: 2.5rem 1.25rem; }
  .quiz-cta-content h3 { font-size: 1.5rem; }
  .why-designers-band { padding: 2.5rem 1rem; }
  .why-designers-inner h2 { font-size: 2rem; text-align: center; }
  .why-designers-inner .subtitle { text-align: center; margin-left: auto; margin-right: auto; }
  .why-designers-item { padding-left: 3.5rem; }
  .why-designers-number { font-size: 2.5rem; }
  .newsletter-band { padding: 2.5rem 1rem; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form button { width: 100%; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .footer-social { justify-content: center; }
  .category-landing { padding: 1.5rem 0.75rem; }
  .category-landing-grid { grid-template-columns: 1fr; }
  .subcategory-strip { padding: 12px 0.75rem; }
  .subcategory-strip-tile { min-width: 100px; }
  .subcategory-strip-label { display: none; }
  .subcategory-strip-name { font-size: 12px; padding: 18px 8px 8px; }
  .category-tile { width: 85%; min-width: 85%; }
  .category-carousel { padding: 0 1rem; }
  .category-carousel-track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .category-tile { scroll-snap-align: start; }
  .carousel-arrow { display: none; }
  .trade-stat-grid { grid-template-columns: 1fr 1fr; }
  .trade-hero { padding: 2.5rem 1rem; }
  .trade-hero h1 { font-size: 1.75rem; }
  .trade-hero p { font-size: 0.9rem; }
  .trade-cta-buttons { flex-direction: column; }
  .trade-benefits { padding: 2rem 1rem; }
  .trade-benefits h2 { font-size: 1.75rem; margin-bottom: 2rem; }
  .trade-how-it-works { padding: 2rem 1rem; }
  .trade-how-it-works h2 { font-size: 1.75rem; margin-bottom: 2rem; }
  .install-hero { padding: 2.5rem 1rem; }
  .install-hero h1 { font-size: 1.75rem; }
  .install-hero p { font-size: 0.9rem; }
  .install-types { padding: 2rem 1rem; }
  .install-types h2 { font-size: 1.75rem; margin-bottom: 2rem; }
  .install-types-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .install-steps-section { padding: 2rem 1rem; }
  .install-steps-section h2 { font-size: 1.75rem; margin-bottom: 2rem; }
  .install-steps { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .install-benefits { padding: 2rem 1rem; }
  .install-benefits h2 { font-size: 1.75rem; margin-bottom: 2rem; }
  .install-benefits-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .install-area { padding: 2rem 1rem; }
  .install-cta-band { padding: 2.5rem 1rem; }

  /* Inspiration — responsive */
  .inspo-hero { padding: 2.5rem 1rem; }
  .inspo-hero h1 { font-size: 1.75rem; }
  .inspo-hero p { font-size: 0.9rem; }
  .inspo-section { padding: 2rem 1rem; }
  .inspo-section h2 { font-size: 1.75rem; }
  .inspo-rooms-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .inspo-tips { padding: 2rem 1rem; }
  .inspo-tips h2 { font-size: 1.75rem; }
  .inspo-tips-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .inspo-styles-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .inspo-cta-band { padding: 2.5rem 1rem; }
  .inspo-cta-band h2 { font-size: 1.75rem; }

  /* Checkout — tighter */
  .checkout-page { padding: 0 1rem; margin: 1.5rem auto; gap: 1.5rem; }
  .checkout-page h1 { font-size: 1.75rem; margin-bottom: 1rem; }
  .checkout-section h3 { font-size: 1.25rem; margin-bottom: 1rem; }
  .checkout-btn { padding: 1rem; font-size: 0.875rem; }
  .payment-method-tabs { flex-direction: column; gap: 0.5rem; }
  .payment-method-tab { padding: 0.75rem; font-size: 0.8125rem; }

  /* Cart — tighter */
  .ct-header { padding: 16px 0.75rem; }
  .ct-title { font-size: 36px; }
  .ct-eyebrow { font-size: 10px; margin-bottom: 12px; }
  .ct-grid { padding: 16px 0.75rem 24px; }
  .ct-line { grid-template-columns: 80px 1fr; gap: 12px; }
  .ct-line-thumb { width: 80px; height: 80px; }
  .ct-line-name { font-size: 18px; }
  .ct-qty-stepper { width: 140px; height: 40px; }
  .ct-line-subtotal-value { font-size: 22px; }
  .ct-summary-inner { padding: 24px; }

  /* Modal — full width */
  .modal-content { padding: 1.25rem; width: 95%; }
  .modal-content h2 { font-size: 1.5rem; }
  .quick-view { max-width: 95vw; max-height: 95vh; }
  .quick-view-main-image { height: 260px; }
  .quick-view-info h2 { font-size: 24px; }
  .qv-price-amount { font-size: 24px; }
  .qv-eyebrow { flex-direction: column; gap: 6px; align-items: flex-start; }
  .qv-specs-grid { grid-template-columns: 1fr 1fr; }
  .qv-footer-links { flex-wrap: wrap; gap: 10px; }

  /* SKU detail — tighter */
  .sku-detail { padding: 0.75rem; }
  .sku-detail-title-row { font-size: 1.625rem; }
  .pdp-price-amount { font-size: 2rem; }
  .packaging-info { grid-template-columns: 1fr; }
  .siblings-strip { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

  /* Cart line items — compact mobile */
  .ct-line { padding: 16px 0; }

  /* Collections */
  .collections-page { padding: 0 1rem; margin: 1.5rem auto; }
  .collections-page h1 { font-size: 2rem; }
  .collections-grid { gap: 1.25rem; }

  /* Wishlist */
  .wishlist-page { padding: 0 1rem; }

  /* Footer */
  .footer-bottom { flex-direction: column; text-align: center; gap: 0.5rem; }

  /* Confirmation */
  .confirmation-page { padding: 0 1rem; margin: 1.5rem auto; }
  .confirmation-page h1 { font-size: 1.75rem; }
  .confirmation-check { width: 64px; height: 64px; margin-bottom: 1.5rem; }
  .confirmation-check svg { width: 32px; height: 32px; }
  .confirmation-details { padding: 1.25rem; }

  /* Trade dashboard */
  .trade-dashboard { padding: 0 0.75rem; }
  .trade-dash-header h1 { font-size: 1.5rem; }
  .trade-stat-card { padding: 1rem; }
  .trade-stat-card .value { font-size: 1.5rem; }
  .trade-stat-card label { font-size: 0.625rem; }
  .trade-dash-tab { padding: 0.625rem 0.75rem; font-size: 0.6875rem; }
  .trade-card { padding: 1rem; }

  /* Homepage sections */
  .homepage-section { padding: 2.5rem 1rem; }
  .homepage-section h2 { font-size: 1.5rem; }
  .homepage-section .subtitle { font-size: 0.8125rem; }

  /* Category hero — match browse padding */
  .category-hero { padding: 1rem 0.75rem; }
  .category-hero h1 { font-size: 1.5rem; }

  /* Browse layout */
  .browse-layout { padding: 0.75rem; }
  .mobile-filter-btn { font-size: 0.75rem; padding: 0.5rem 0.75rem; }

  /* Inspiration — tighter at 480 */
  .inspo-section { padding: 1.5rem 0.75rem; }
  .inspo-rooms-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .inspo-room-card { padding: 1.25rem 1rem; min-height: 140px; }
  .inspo-styles-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .inspo-style-card { padding: 1.25rem 1rem; min-height: 130px; }
  .inspo-cta-buttons { flex-direction: column; align-items: center; }

  /* Stock alert — stack */
  .stock-alert-form { flex-direction: column; }
  .stock-alert-form input { width: 100%; }
  /* Formulary homepage */
  .form-hero { padding: 48px 1.25rem 40px; }
  .form-hero-headline { font-size: 1.75rem; }
  .form-hero-cta { width: 100%; text-align: center; }
  .form-cabinet-images { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .form-cabinet-content { padding: 2rem 1.25rem; }
  .form-cabinet-headline { font-size: 1.5rem; }
  .form-cabinet-stats { flex-direction: column; gap: 1rem; }
  .form-section { padding: 2.5rem 1.25rem; }
  .form-section-headline { font-size: 1.5rem; }
  .form-specimen-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .form-counsel-band { padding: 2.5rem 1.25rem; }
  .form-counsel-headline { font-size: 1.5rem; }
  .form-counsel-btn { width: 100%; text-align: center; }
  .form-counsel-input { flex-basis: 100%; }
  /* Shop landing */
  .shop-landing-hero { padding: 40px 1.25rem 30px; }
  .shop-landing-hero-headline { font-size: 2.5rem; }
  .shop-landing-section { padding: 2.5rem 1.25rem; }
  .shop-cat-grid-right { grid-template-columns: 1fr; }
  .shop-featured-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .shop-trade-band { padding: 2.5rem 1.25rem; }
  .shop-trade-benefits { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .shop-trade-headline { font-size: 1.5rem; }
}

/* ── TOAST NOTIFICATIONS ── */
.toast-container { position: fixed; bottom: 2rem; right: 2rem; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.25rem; background: var(--warm-bg); border: 1px solid var(--stone-200); box-shadow: var(--shadow-lg); font-size: 0.875rem; color: var(--stone-800); pointer-events: auto; animation: toastIn 0.3s ease-out; min-width: 240px; max-width: 380px; }
.toast-leaving { animation: toastOut 0.3s ease-in forwards; }
.toast-success { border-left: 3px solid var(--sage); }
.toast-success svg { color: var(--sage); }
.toast-error { border-left: 3px solid #ef4444; }
.toast-error svg { color: #ef4444; }
.toast-info { border-left: 3px solid var(--gold); }
.toast-info svg { color: var(--gold); }
@keyframes toastIn { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(1rem); } }

/* ── BACK TO TOP ── */
.back-to-top { position: fixed; bottom: 5rem; right: 2rem; z-index: var(--z-sticky); width: 44px; height: 44px; border-radius: 50%; background: var(--stone-800); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: background var(--transition-base), transform var(--transition-base); animation: toastIn 0.3s ease-out; }
.back-to-top:hover { background: var(--stone-900); transform: translateY(-2px); }

/* ── 404 / NOT FOUND ── */
.not-found-page { max-width: 800px; margin: 4rem auto; padding: 0 2rem; }
.not-found-hero { text-align: center; margin-bottom: 2rem; }
.not-found-search { display: flex; gap: 0.5rem; max-width: 420px; margin: 0 auto; }
.not-found-search input { flex: 1; padding: 0.75rem 1rem; border: 1px solid var(--stone-300); font-family: var(--font-body); font-size: 0.875rem; }
.not-found-search input:focus:not(:focus-visible) { outline: none; border-color: var(--gold); }
.not-found-search .btn { padding: 0.75rem 1.5rem; }
.not-found-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.not-found-cat-link { display: inline-block; padding: 0.5rem 1rem; border: 1px solid var(--stone-300); font-size: 0.8125rem; color: var(--stone-700); cursor: pointer; transition: all 0.15s; text-decoration: none; }
.not-found-cat-link:hover { border-color: var(--gold); color: var(--gold); }

/* ── BREADCRUMB SPACING ── */
.breadcrumbs + h1 { margin-top: 0.5rem; }

/* ── CONFIRM DIALOG ── */
.confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: calc(var(--z-toast) + 10); display: flex; align-items: center; justify-content: center; animation: fadeIn 0.15s ease-out; }
.confirm-dialog { background: var(--warm-bg); border-radius: var(--radius-lg); padding: 2rem; max-width: 400px; width: 90%; box-shadow: var(--shadow-lg); }
.confirm-dialog h3 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; margin-bottom: 0.75rem; }
.confirm-dialog p { font-size: 0.875rem; color: var(--stone-600); line-height: 1.6; margin-bottom: 1.5rem; }
.confirm-dialog-actions { display: flex; gap: 0.75rem; justify-content: flex-end; }
.confirm-dialog-cancel { padding: 0.625rem 1.25rem; background: white; border: 1px solid var(--stone-300); font-family: var(--font-body); font-size: 0.8125rem; cursor: pointer; transition: background 0.15s; }
.confirm-dialog-cancel:hover { background: var(--stone-50); }
.confirm-dialog-confirm { padding: 0.625rem 1.25rem; background: var(--stone-900); color: white; border: none; font-family: var(--font-body); font-size: 0.8125rem; cursor: pointer; transition: background 0.15s; }
.confirm-dialog-confirm:hover { background: var(--stone-800); }
.confirm-dialog-confirm.danger { background: #dc2626; }
.confirm-dialog-confirm.danger:hover { background: #b91c1c; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── IMAGE LIGHTBOX ── */
.lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: calc(var(--z-toast) + 5); display: flex; align-items: center; justify-content: center; animation: fadeIn 0.2s ease-out; }
.lightbox-image { max-width: 90vw; max-height: 85vh; object-fit: contain; }
.lightbox-arrow { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: var(--radius-full); background: rgba(255,255,255,0.15); border: none; color: white; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; min-width: 44px; min-height: 44px; }
.lightbox-arrow:hover { background: rgba(255,255,255,0.3); }
.lightbox-arrow.left { left: 1rem; }
.lightbox-arrow.right { right: 1rem; }
.lightbox-counter { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 0.875rem; }
.lightbox-close { position: fixed; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: var(--radius-full); background: rgba(255,255,255,0.15); border: none; color: white; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.lightbox-close:hover { background: rgba(255,255,255,0.3); }

/* ── TOAST ACTION BUTTON ── */
.toast-action { background: none; border: none; color: var(--gold); font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0; margin-left: 0.5rem; white-space: nowrap; }
.toast-action:hover { color: var(--gold-light); }

/* ── CHECKOUT FIELD ERRORS ── */
.checkout-input.has-error { border-color: #dc2626; }
.checkout-field-error { color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem; }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal-section { opacity: 1 !important; transform: none !important; }
  .hero-image img { transition: none !important; transform: none !important; }
}

/* ── ULTRA-SMALL (360px) ── */
@media (max-width: 360px) {
  .hero-content h1 { font-size: 1.375rem; }
  .hero-cta { padding: 0.75rem 1.5rem; font-size: 0.6875rem; }
  .sku-grid { gap: 0.5rem; }
  .sku-card-name { font-size: 0.8125rem; }
  .sku-card-price { font-size: 0.8125rem; }
  .homepage-section { padding: 2rem 0.75rem; }
  .homepage-section h2 { font-size: 1.375rem; }
  .browse-layout { padding: 0.5rem; }
  .trade-stat-grid { grid-template-columns: 1fr; }
  .trade-stat-card .value { font-size: 1.25rem; }
}

/* ── BROWSER FALLBACKS ── */
@supports not (aspect-ratio: 1) {
  .sku-card-image { position: relative; }
  .sku-card-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .collection-card-image { height: 0; padding-bottom: 75%; position: relative; }
  .collection-card-image img { position: absolute; top: 0; left: 0; }
  .hero { height: auto; padding: 6rem 3rem; }
}
@supports not (gap: 1rem) {
  .filter-option > * + * { margin-left: 0.5rem; }
}

/* ── PRINT STYLESHEET ── */
@media print {
  header, .footer, footer, .mobile-nav-overlay, .mobile-nav, .filter-drawer-overlay,
  .filter-drawer, .cart-drawer-overlay, .cart-drawer, .modal-overlay, .trade-modal-overlay,
  .quick-view-overlay, .mobile-search-overlay, .back-to-top, .toast-container,
  .hero, .hero-cta, .wishlist-heart, .btn, .btn-secondary, .btn-gold,
  .checkout-btn, .mobile-filter-btn, .mobile-menu-btn, .mobile-search-btn,
  .carousel-arrow, .pagination, .back-btn, .install-cta, .stock-alert-box,
  .trade-cta-section, .trade-cta-buttons { display: none !important; }
  body { background: white; color: black; font-size: 12pt; }
  .browse-layout { display: block; padding: 1rem; }
  .browse-content { padding-left: 0; }
  .sidebar { display: none !important; }
  .sku-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .sku-detail { max-width: 100%; padding: 0; margin: 0; }
  .sku-detail-main { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .ct-wrap, .checkout-page, .collections-page, .wishlist-page, .trade-dashboard { max-width: 100%; padding: 0; }
  .ct-grid { grid-template-columns: 1fr; }
  a { text-decoration: none; color: inherit; }
  img { max-width: 100%; }
  * { box-shadow: none !important; }
}

/* ── GOOGLE PLACES AUTOCOMPLETE ── */
.pac-container {
  z-index: var(--z-external);
  font-family: 'Inter', sans-serif;
  border-radius: 8px;
  border: 1px solid var(--stone-200);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  margin-top: 4px;
  overflow: hidden;
}
.pac-item {
  padding: 10px 14px;
  cursor: pointer;
  border-top: 1px solid var(--stone-100);
  font-size: 0.875rem;
  color: var(--stone-700);
  line-height: 1.5;
}
.pac-item:first-child { border-top: none; }
.pac-item:hover, .pac-item-selected {
  background: var(--stone-50);
}
.pac-item-query {
  font-weight: 600;
  color: var(--stone-900);
  font-size: 0.875rem;
}
.pac-matched {
  font-weight: 700;
}
.pac-icon, .pac-icon-marker { display: none; }
.pac-logo::after { display: none; }

/* ── LEGAL PAGES ── */
.legal-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
}
.legal-page h1 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 2.25rem;
  color: var(--stone-900);
  margin-bottom: 0.5rem;
}
.legal-page .legal-effective {
  color: var(--stone-500);
  font-size: 0.875rem;
  margin-bottom: 2.5rem;
}
.legal-page h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.375rem;
  color: var(--stone-800);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--stone-200);
}
.legal-page p {
  color: var(--stone-700);
  line-height: 1.75;
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
}
.legal-page ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.legal-page li {
  color: var(--stone-700);
  line-height: 1.75;
  margin-bottom: 0.375rem;
  font-size: 0.9375rem;
}
.legal-page a {
  color: var(--gold);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--transition-base);
}
.legal-page a:hover {
  color: var(--gold-light);
}
.legal-page .breadcrumbs {
  margin-bottom: 1.5rem;
}

/* ── COOKIE CONSENT BANNER ── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--stone-800);
  color: var(--stone-200);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 2rem;
  z-index: 400;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
}
.cookie-banner p {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
  max-width: 600px;
}
.cookie-banner a {
  color: var(--gold);
  text-decoration: underline;
  cursor: pointer;
}
.cookie-banner a:hover {
  color: var(--gold-light);
}
.cookie-banner-btn {
  background: var(--gold);
  color: white;
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-base);
}
.cookie-banner-btn:hover {
  background: var(--gold-light);
}
@media (max-width: 640px) {
  .cookie-banner {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    text-align: center;
  }
  .legal-page {
    padding: 1.5rem 1.25rem 3rem;
  }
  .legal-page h1 {
    font-size: 1.75rem;
  }
}

/* ── CABINETS PAGE ── */
.cab-btn-primary { transition: opacity 0.2s, transform 0.2s; }
.cab-btn-primary:hover { opacity: 0.88; }
.cab-btn-primary:active { transform: scale(0.97); }
.cab-btn-outline { transition: background 0.2s, color 0.2s, border-color 0.2s; }
.cab-btn-outline:hover { background: var(--stone-900); color: var(--warm-bg); border-color: var(--stone-900); }

@media (max-width: 1024px) {
  .cab-page section { padding-left: 40px !important; padding-right: 40px !important; }
}
@media (max-width: 768px) {
  .cab-page section { padding-left: 24px !important; padding-right: 24px !important; padding-top: 72px !important; padding-bottom: 72px !important; }
}

/* ── CHECKOUT + CONFIRMATION RESPONSIVE ── */
@media (max-width: 1024px) {
  .co-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .co-summary { position: static; }
  .conf-details { grid-template-columns: 1fr; }
  .conf-next-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .co-header { padding: 1rem 1.25rem; }
  .co-header-logo .logo-wordmark { font-size: 1rem; }
  .co-header-logo .logo-script { font-size: 1.35rem; }
  .co-header-meta { gap: 0.75rem; }
  .co-header-meta .co-phone { display: none; }
  .co-progress { padding: 1rem 1.25rem 1.25rem; }
  .co-progress-inner { grid-template-columns: repeat(3, 1fr); gap: 0.25rem; }
  .co-progress-label { font-size: 0.5625rem; }
  .co-grid { padding: 1.5rem 1.25rem 3rem; }
  .co-step { padding: 1rem 1.25rem; }
  .co-step.focus { padding: 1.25rem 1.25rem 1.5rem; }
  .co-step.focus .co-step-title { font-size: 1.375rem; }
  .co-delivery-grid { grid-template-columns: 1fr; }
  .co-form-row-2, .co-form-row-3 { grid-template-columns: 1fr; }
  .co-time-slots { grid-template-columns: repeat(3, 1fr); gap: 0.375rem; }
  .co-time-slot { padding: 0.625rem 0.25rem; }
  .co-time-slot-label { font-size: 0.8125rem; }
  .co-time-slot-sub { font-size: 0.5625rem; }
  .co-payment-tabs { grid-template-columns: 1fr 1fr; }
  .conf-hero { padding: 3rem 1.25rem 2.5rem; }
  .conf-hero h1 { font-size: 2.25rem; }
  .conf-details { grid-template-columns: 1fr; padding-left: 1.25rem; padding-right: 1.25rem; }
  .conf-items { padding-left: 1.25rem; padding-right: 1.25rem; }
  .conf-next { padding-left: 1.25rem; padding-right: 1.25rem; }
  .conf-next-grid { grid-template-columns: 1fr; }
}

/* ── ACCOUNT PAGE (Editorial) ── */
.acct-hero { padding: 2.25rem 5rem 2.5rem; border-bottom: 0.5px solid rgba(28,25,23,0.09); }
.acct-breadcrumb { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-muted); display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1.5rem; }
.acct-breadcrumb a { color: var(--warm-muted); text-decoration: none; cursor: pointer; transition: color 0.15s; }
.acct-breadcrumb a:hover { color: var(--stone-800); }
.acct-breadcrumb-sep { width: 12px; height: 1px; background: rgba(28,25,23,0.18); flex-shrink: 0; }
.acct-breadcrumb-current { color: var(--stone-800); font-weight: 600; }
.acct-hero-meta { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone-800); }
.acct-hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 4rem; align-items: end; }
.acct-hero-eyebrow { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.acct-hero-heading { font-family: var(--font-heading); font-weight: 300; font-size: 4.5rem; line-height: 0.95; letter-spacing: -0.02em; margin: 0; color: var(--stone-800); }
.acct-hero-heading em { color: var(--gold); font-style: italic; }
.acct-body { padding: 2.5rem 5rem 3.75rem; display: grid; grid-template-columns: 240px 1fr; gap: 3rem; }
.acct-sidebar { position: sticky; top: calc(var(--header-height) + 1.5rem); align-self: start; }
.acct-customer-chip { background: var(--stone-800); color: var(--warm-bg); padding: 1.125rem; display: grid; grid-template-columns: 40px 1fr; gap: 0.75rem; align-items: center; margin-bottom: 1rem; border-radius: 6px; }
.acct-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--warm-bg); display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.02em; }
.acct-customer-name { font-family: var(--font-heading); font-size: 1.0625rem; line-height: 1.15; color: var(--warm-bg); letter-spacing: -0.01em; }
.acct-customer-tier { font-family: var(--font-body); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-top: 0.25rem; }
.acct-nav { display: grid; gap: 1px; }
.acct-nav-item { padding: 0.6875rem 1rem; background: transparent; border: none; border-left: 2px solid transparent; cursor: pointer; display: grid; gap: 2px; text-align: left; font-family: var(--font-body); transition: background 0.15s, border-color 0.15s; width: 100%; border-radius: 0 4px 4px 0; }
.acct-nav-item:hover { background: rgba(216,205,182,0.25); }
.acct-nav-item--active { background: rgba(216,205,182,0.5); border-left-color: var(--gold); }
.acct-nav-label { font-size: 0.8125rem; font-weight: 500; color: var(--stone-800); letter-spacing: -0.005em; line-height: 1.2; }
.acct-nav-meta { font-family: var(--font-body); font-size: 0.625rem; font-weight: 400; letter-spacing: 0.04em; color: var(--warm-muted); text-transform: none; }
.acct-signout { margin-top: 1rem; padding: 0.6875rem 1rem; display: block; cursor: pointer; text-decoration: none; color: var(--warm-muted); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border: none; background: none; border-top: 0.5px solid rgba(28,25,23,0.1); width: 100%; text-align: left; font-family: var(--font-body); transition: color 0.15s; }
.acct-signout:hover { color: var(--stone-800); }
.acct-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.acct-stat { padding: 1.125rem 1.25rem; background: rgba(216,205,182,0.45); border-radius: 6px; }
.acct-stat-value { font-family: var(--font-body); font-size: 1.75rem; font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--stone-800); font-variant-numeric: tabular-nums; }
.acct-stat-label { font-family: var(--font-body); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone-700, #44403c); margin-top: 0.5rem; }
.acct-stat-sub { font-size: 0.6875rem; color: var(--warm-muted); margin-top: 0.1875rem; }
.acct-section-head { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: baseline; margin-bottom: 1rem; }
.acct-eyebrow { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.375rem; }
.acct-section-title { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; line-height: 1.05; letter-spacing: -0.016em; color: var(--stone-800); margin: 0; }
.acct-section-title em { color: var(--gold); font-style: italic; }
.acct-section-action { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-800); text-decoration: none; cursor: pointer; border-bottom: 1px solid rgba(28,25,23,0.25); padding-bottom: 0.25rem; align-self: end; background: none; border-top: none; border-left: none; border-right: none; transition: color 0.15s, border-color 0.15s; }
.acct-section-action:hover { color: var(--gold); border-bottom-color: var(--gold); }
.acct-active-order { background: var(--warm-bg); border: 0.5px solid rgba(28,25,23,0.13); border-left: 3px solid var(--gold); display: grid; grid-template-columns: 1.4fr 1fr; border-radius: 6px; overflow: hidden; }
.acct-active-order-main { padding: 1.75rem 2rem; display: grid; gap: 1rem; }
.acct-active-order-actions { background: rgba(216,205,182,0.4); padding: 1.75rem 2rem; display: grid; gap: 0.75rem; align-content: center; }
.acct-action-link { padding: 0.625rem 0.875rem; background: var(--warm-bg); color: var(--stone-800); border: 0.5px solid rgba(28,25,23,0.1); display: flex; align-items: center; justify-content: space-between; cursor: pointer; text-decoration: none; font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; transition: background 0.15s, border-color 0.15s; border-radius: 4px; }
.acct-action-link:hover { background: #fff; border-color: var(--gold); }
.acct-order-row { display: grid; grid-template-columns: 140px 1fr 180px 120px 130px 100px; gap: 1rem; align-items: center; padding: 0.875rem 1.5rem; border-bottom: 0.5px solid rgba(28,25,23,0.06); transition: background 0.15s; cursor: pointer; }
.acct-order-row:hover { background: rgba(216,205,182,0.12); }
.acct-order-row:last-child { border-bottom: none; }
.acct-order-num { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; line-height: 1.2; color: var(--stone-800); letter-spacing: -0.005em; }
.acct-order-date { font-family: var(--font-body); font-size: 0.625rem; font-weight: 400; letter-spacing: 0.02em; color: var(--warm-muted); margin-top: 2px; }
.acct-order-items { font-family: var(--font-body); font-size: 0.75rem; font-weight: 400; color: rgba(28,25,23,0.55); }
.acct-order-detail { font-size: 0.75rem; color: rgba(28,25,23,0.55); line-height: 1.4; }
.acct-order-status { font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; }
.acct-order-total { font-family: var(--font-body); font-size: 1rem; font-weight: 500; line-height: 1; color: var(--stone-800); letter-spacing: -0.01em; text-align: right; font-variant-numeric: tabular-nums; }
.acct-order-action { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--warm-muted); text-decoration: none; text-align: right; transition: color 0.15s; }
.acct-order-action:hover { color: var(--gold); }
.acct-tabs { display: flex; gap: 0; border-bottom: 0.5px solid rgba(28,25,23,0.13); margin-bottom: 1.25rem; }
.acct-tab { padding: 0.75rem 1.25rem 0.875rem; background: transparent; border: none; cursor: pointer; border-bottom: 2px solid transparent; font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--warm-muted); display: inline-flex; align-items: baseline; gap: 0.375rem; margin-bottom: -0.5px; transition: color 0.15s; }
.acct-tab:hover { color: var(--stone-800); }
.acct-tab--active { border-bottom-color: var(--stone-800); color: var(--stone-800); }
.acct-tab-count { font-family: var(--font-body); font-size: 0.625rem; font-weight: 400; letter-spacing: 0.02em; color: var(--warm-muted); }
.acct-tab--active .acct-tab-count { color: var(--gold); font-weight: 500; }
.acct-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.acct-search-box { display: flex; align-items: center; border: 0.5px solid rgba(28,25,23,0.15); border-radius: 4px; background: var(--warm-bg); }
.acct-search-icon { padding: 0.5625rem 0.75rem; font-size: 0.875rem; color: var(--warm-muted); line-height: 1; }
.acct-search-input { padding: 0.5625rem 0; width: 280px; border: none; background: transparent; outline: none; font-family: var(--font-body); font-size: 0.8125rem; color: var(--stone-800); }
.acct-search-input::placeholder { color: var(--warm-muted); }
.acct-toolbar-right { display: flex; align-items: center; gap: 1rem; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.acct-col-headers { display: grid; grid-template-columns: 140px 1fr 180px 120px 130px 100px; gap: 1rem; padding: 0.625rem 1.5rem; background: rgba(216,205,182,0.4); border-radius: 4px; font-family: var(--font-body); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warm-muted); }
.acct-wishlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.875rem; }
.acct-wishlist-card { background: var(--warm-bg); border: 0.5px solid rgba(28,25,23,0.1); text-decoration: none; color: inherit; cursor: pointer; display: grid; grid-template-rows: 180px 1fr; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; border-radius: 6px; }
.acct-wishlist-card:hover { border-color: var(--gold); box-shadow: 0 2px 12px rgba(168,121,53,0.08); }
.acct-wishlist-card img { width: 100%; height: 100%; object-fit: cover; }
.acct-wishlist-card-body { padding: 0.875rem 1rem 1rem; display: grid; gap: 0.1875rem; }
.acct-footer-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0.875rem; }
.acct-footer-card { background: var(--warm-bg); border: 0.5px solid rgba(28,25,23,0.1); padding: 1.375rem 1.5rem; display: grid; gap: 0.75rem; border-radius: 6px; }
.acct-footer-card-head { display: flex; justify-content: space-between; align-items: baseline; }
.acct-footer-card-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 300; letter-spacing: -0.012em; color: var(--stone-800); margin: 0; }
.acct-footer-card-action { font-family: var(--font-body); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); cursor: pointer; text-decoration: none; background: none; border: none; transition: opacity 0.15s; }
.acct-footer-card-action:hover { opacity: 0.7; }
.acct-footer-card-sub { font-family: var(--font-body); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--warm-muted); }
.acct-progress { height: 4px; background: rgba(28,25,23,0.1); position: relative; overflow: hidden; border-radius: 2px; }
.acct-progress-fill { position: absolute; inset: 0; background: var(--gold); border-radius: 2px; }
.acct-progress-steps { margin-top: 0.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; font-family: var(--font-body); font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--warm-muted); }
.acct-order-expanded { padding: 1.25rem 1.5rem; border-top: 0.5px solid rgba(28,25,23,0.06); background: rgba(216,205,182,0.1); }
.acct-address-card { padding: 0.875rem 1rem; border: 0.5px solid rgba(28,25,23,0.1); border-radius: 4px; }
.acct-address-card--primary { background: rgba(216,205,182,0.4); border-color: rgba(168,121,53,0.25); }
.acct-address-label { font-family: var(--font-body); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.acct-payment-card { padding: 0.875rem 1rem; border: 0.5px solid rgba(28,25,23,0.1); display: grid; grid-template-columns: 36px 1fr; gap: 0.75rem; align-items: center; border-radius: 4px; }
.acct-payment-card--default { background: rgba(216,205,182,0.4); border-color: rgba(168,121,53,0.25); }
.acct-payment-badge { padding: 0.375rem 0.5rem; background: var(--stone-800); color: var(--warm-bg); font-family: var(--font-body); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.06em; text-align: center; border-radius: 3px; }
.acct-profile-section { background: var(--warm-bg); border: 0.5px solid rgba(28,25,23,0.1); padding: 1.75rem 2rem; border-radius: 6px; }
.acct-profile-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 300; letter-spacing: -0.012em; color: var(--stone-800); margin: 0 0 1.25rem; }
/* Store credit */
.acct-credit-hero { position: relative; overflow: hidden; border-radius: 8px; padding: 1.6rem 1.75rem; margin-bottom: 1.5rem; background: linear-gradient(135deg, #26221f 0%, #1c1917 60%); box-shadow: 0 10px 28px -14px rgba(28,25,23,0.55); }
.acct-credit-hero::after { content: ''; position: absolute; right: -50px; top: -50px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(201,166,104,0.22), transparent 68%); pointer-events: none; }
.acct-credit-eyebrow { position: relative; z-index: 1; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--gold-light); margin: 0; }
.acct-credit-balance { position: relative; z-index: 1; font-family: var(--font-heading); font-weight: 300; font-size: 3rem; line-height: 1; letter-spacing: -0.02em; color: #fff; margin: 0.4rem 0 0; }
.acct-credit-balance .cents { font-size: 1.6rem; color: rgba(255,255,255,0.6); margin-left: 0.15rem; }
.acct-credit-caption { position: relative; z-index: 1; font-size: 0.8125rem; color: rgba(236,229,216,0.62); margin: 0.6rem 0 0; }
.acct-credit-history-label { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--stone-400); margin: 0 0 0.25rem; }
.acct-credit-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem 0; border-bottom: 0.5px solid rgba(28,25,23,0.1); }
.acct-credit-row:last-child { border-bottom: none; }
.acct-credit-reason { font-size: 0.875rem; color: var(--stone-800); line-height: 1.3; }
.acct-credit-date { font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--stone-400); margin-top: 0.2rem; }
.acct-credit-amt { font-family: var(--font-heading); font-size: 1.15rem; white-space: nowrap; }
.acct-credit-amt.pos { color: var(--sage); }
.acct-credit-amt.neg { color: var(--stone-500); }
/* Checkout — apply store credit */
.co-credit { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; margin-bottom: 1rem; border: 1px solid var(--stone-200); border-left: 3px solid var(--gold); border-radius: 8px; background: linear-gradient(180deg, rgba(168,121,53,0.045), transparent); transition: background 0.2s ease, border-color 0.2s ease; }
.co-credit.applied { background: linear-gradient(180deg, rgba(168,121,53,0.11), rgba(168,121,53,0.03)); border-color: var(--gold); }
.co-credit-icon { flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(168,121,53,0.12); color: var(--gold); }
.co-credit-icon svg { width: 20px; height: 20px; }
.co-credit-body { flex: 1; min-width: 0; }
.co-credit-title { font-size: 0.9rem; font-weight: 600; color: var(--stone-800); letter-spacing: -0.01em; }
.co-credit-sub { font-size: 0.78rem; color: var(--stone-500); margin-top: 0.12rem; }
.co-credit-sub .applied-amt { color: var(--gold); font-weight: 600; }
.co-credit-switch { position: relative; flex: none; width: 44px; height: 26px; cursor: pointer; }
.co-credit-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.co-credit-slider { position: absolute; inset: 0; border-radius: 999px; background: var(--stone-300); transition: background 0.2s ease; }
.co-credit-slider::before { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s ease; }
.co-credit-switch input:checked + .co-credit-slider { background: var(--gold); }
.co-credit-switch input:checked + .co-credit-slider::before { transform: translateX(18px); }
.acct-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
.acct-input { width: 100%; padding: 0.625rem 0.75rem; border: 0.5px solid rgba(28,25,23,0.15); background: transparent; font-family: var(--font-body); font-size: 0.8125rem; color: var(--stone-800); outline: none; transition: border-color 0.15s; border-radius: 4px; }
.acct-input:focus { border-color: var(--gold); }
.acct-input::placeholder { color: var(--warm-muted); }
.acct-input-label { display: block; margin-bottom: 0.3125rem; font-size: 0.75rem; font-weight: 500; color: var(--stone-700, #44403c); font-family: var(--font-body); }
.acct-input-field { margin-bottom: 0.875rem; }
.acct-btn { padding: 0.6875rem 1.5rem; background: var(--stone-800); color: var(--warm-bg); border: none; font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background 0.15s; border-radius: 4px; }
.acct-btn:hover { background: var(--gold); }
.acct-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.acct-btn--outline { background: transparent; color: var(--stone-800); border: 0.5px solid rgba(28,25,23,0.15); }
.acct-btn--outline:hover { border-color: var(--gold); color: var(--gold); background: transparent; }
.acct-msg--success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; padding: 0.625rem 1rem; margin-bottom: 1rem; font-size: 0.8125rem; border-radius: 4px; }
.acct-msg--error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 0.625rem 1rem; margin-bottom: 1rem; font-size: 0.8125rem; border-radius: 4px; }
.acct-content > div { display: grid; gap: 2.75rem; }
.acct-pagination { margin-top: 1.25rem; padding-top: 1rem; border-top: 0.5px solid rgba(28,25,23,0.1); display: flex; justify-content: space-between; align-items: center; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--warm-muted); }
.acct-order-table { background: var(--warm-bg); border: 0.5px solid rgba(28,25,23,0.13); border-radius: 6px; overflow: hidden; }
.acct-page { min-height: 60vh; }

/* ---- Trade dashboard Settings section (in the account shell) ---- */
.trade-acct-page { min-height: 60vh; }
.tacct-card-head { display: flex; justify-content: space-between; align-items: center; }
.tacct-card-head h3 { margin: 0; }
.tacct-info { font-size: 0.875rem; line-height: 1.9; color: var(--stone-700, #44403c); }
.tacct-info strong { color: var(--stone-800); }
.tacct-note { font-size: 0.75rem; color: var(--warm-muted); margin-top: 0.9rem; line-height: 1.5; }
.tacct-btn-row { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.tacct-edit { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }

@media (max-width: 1100px) {
  .acct-hero { padding: 1.75rem 2rem 2rem; }
  .acct-body { padding: 2rem; grid-template-columns: 200px 1fr; gap: 2rem; }
  .acct-hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .acct-hero-heading { font-size: 3rem; }
  .acct-active-order { grid-template-columns: 1fr; }
  .acct-order-row { grid-template-columns: 1fr 1fr auto; gap: 0.5rem 1rem; padding: 0.75rem 1rem; }
  .acct-col-headers { display: none; }
  .acct-footer-row { grid-template-columns: 1fr; }
  .acct-wishlist-grid { grid-template-columns: repeat(2, 1fr); }
  .acct-search-input { width: 200px; }
}
@media (max-width: 768px) {
  .acct-hero { padding: 1.25rem 1.25rem 1.5rem; }
  .acct-body { grid-template-columns: 1fr; padding: 1.25rem 1.25rem 2.5rem; }
  .acct-sidebar { position: static; display: grid; grid-template-columns: 1fr; gap: 0; }
  .acct-sidebar .acct-customer-chip { grid-column: 1 / -1; }
  /* Section switcher becomes a clean, sticky, one-line scrollable tab strip. */
  .acct-sidebar .acct-nav {
    grid-column: 1 / -1; display: flex; overflow-x: auto; gap: 0; -webkit-overflow-scrolling: touch;
    position: sticky; top: var(--header-height, 64px); z-index: 20;
    background: var(--warm-bg); border-bottom: 1px solid rgba(28,25,23,0.1);
    margin: 0 -1.25rem; padding: 0 1.25rem;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
    mask-image: linear-gradient(to right, #000 88%, transparent);
  }
  .acct-sidebar .acct-nav::-webkit-scrollbar { display: none; }
  .acct-sidebar .acct-nav-item { white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; padding: 0.75rem 0.9rem; border-radius: 0; min-height: 44px; align-content: center; }
  .acct-sidebar .acct-nav-item .acct-nav-meta { display: none; }
  .acct-sidebar .acct-nav-item .acct-nav-label { font-size: 0.875rem; }
  .acct-sidebar .acct-nav-item--active { border-bottom-color: var(--gold); background: transparent; }
  .acct-sidebar .acct-nav-item--active .acct-nav-label { color: var(--gold-dark, #8a6a2f); }
  .acct-sidebar .acct-signout { grid-column: 1 / -1; }
  .acct-hero-heading { font-size: 2.5rem; }
  .acct-stats { grid-template-columns: repeat(2, 1fr); }
  .acct-section-title { font-size: 1.625rem; }
  .acct-toolbar { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
  .acct-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .acct-tab { white-space: nowrap; }
  .acct-profile-grid { grid-template-columns: 1fr; }
  .acct-content > div { gap: 2rem; }
  .acct-profile-section { padding: 1.25rem 1.25rem; }
}
/* Phone: restack order/quote/estimate rows into a readable card. Uses flex +
   order so it works for every section (and beats the inline gridTemplateColumns
   set on the quote/estimate rows, which CSS media queries otherwise can't touch). */
@media (max-width: 640px) {
  .acct-col-headers { display: none !important; }
  .acct-order-row {
    display: flex !important; flex-wrap: wrap; align-items: center;
    gap: 0.3rem 0.6rem; padding: 0.85rem 1rem;
  }
  .acct-order-row > * { min-width: 0; }
  .acct-order-row > :first-child { order: 1; }
  .acct-order-row .acct-order-total { order: 2; margin-left: auto; font-size: 1rem; }
  .acct-order-row .acct-order-status { order: 3; }
  .acct-order-row .acct-order-action { order: 4; margin-left: auto; }
  .acct-order-row .acct-order-detail { order: 5; flex-basis: 100%; font-size: 0.75rem; color: var(--warm-muted); }
  .acct-order-row .acct-order-items { order: 6; flex-basis: 100%; }
}

/* ── AUTH FULL-PAGE ─────────────────────────────────────────────── */
.auth-page { width: 100%; min-height: 100vh; display: grid; grid-template-columns: 640px 1fr; font-family: var(--font-body); }
.auth-form-col { background: var(--warm-bg); color: var(--stone-800); padding: 40px 64px; display: grid; grid-template-rows: auto 1fr auto; gap: 24px; overflow: hidden; }
.auth-form-col-inner { align-self: center; display: grid; gap: 28px; max-width: 460px; }
.auth-header { display: flex; justify-content: space-between; align-items: center; }
.auth-header-logo { text-decoration: none; cursor: pointer; display: inline-flex; }
.auth-header-logo .logo-wordmark { font-size: 1.125rem; }
.auth-header-logo .logo-script { font-size: 1.55rem; }
.auth-header-tagline { font: 500 11px/1 ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm-muted); }
.auth-footer { display: flex; justify-content: space-between; align-items: center; font: 400 12px/1.4 var(--font-body); color: var(--warm-muted); }
.auth-footer a { color: var(--warm-muted); text-decoration: none; cursor: pointer; }
.auth-footer a:hover { color: var(--stone-800); }
.auth-footer-links { display: flex; gap: 22px; }

/* Editorial panel */
.auth-panel { position: relative; overflow: hidden; color: var(--warm-bg); display: flex; flex-direction: column; justify-content: space-between; padding: 56px 64px; }
.auth-panel-bg { position: absolute; inset: 0; }
.auth-panel-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,25,23,0.55) 0%, rgba(28,25,23,0.72) 60%, rgba(28,25,23,0.82) 100%); }
.auth-panel-eyebrow { font: 500 11px/1 ui-monospace, monospace; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); position: relative; }
.auth-panel-content { position: relative; max-width: 540px; }
.auth-panel-headline { font: 300 72px/0.95 var(--font-heading); letter-spacing: -0.022em; margin: 0; color: var(--warm-bg); text-wrap: pretty; }
.auth-panel-headline em { font-style: italic; }
.auth-panel-sub { font: 400 16px/1.55 var(--font-body); color: rgba(236,229,216,0.8); margin: 20px 0 0; max-width: 460px; }
.auth-panel-attribution { margin-top: 26px; padding-top: 20px; border-top: 0.5px solid rgba(236,229,216,0.27); font: 500 11px/1.5 ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(236,229,216,0.8); max-width: 360px; }

/* Section eyebrow + title */
.auth-eyebrow { font: 500 11px/1 ui-monospace, monospace; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.auth-title { font: 300 60px/0.95 var(--font-heading); letter-spacing: -0.022em; margin: 0; color: var(--stone-800); }
.auth-subtitle { font: 400 16px/1.55 var(--font-body); color: rgba(28,25,23,0.8); margin: 0; max-width: 460px; }

/* Social buttons */
.auth-social-row { display: grid; gap: 8px; }
.auth-social-btn { width: 100%; padding: 12px 16px; background: var(--warm-bg); color: var(--stone-800); border: 0.5px solid rgba(28,25,23,0.4); font: 500 12px/1 var(--font-body); letter-spacing: 0.06em; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background var(--transition-base); }
.auth-social-btn:hover { background: rgba(28,25,23,0.04); }
.auth-social-icon { width: 18px; height: 18px; border-radius: 50%; background: var(--stone-800); color: var(--warm-bg); display: inline-flex; align-items: center; justify-content: center; font: 500 10px/1 ui-monospace, monospace; }
.google-signin-container { width: 100%; display: flex; justify-content: center; }
.google-signin-container > div { width: 100% !important; }
.google-signin-container iframe { width: 100% !important; }
/* Custom-styled Google button: our visual sits underneath; the real GIS iframe
   is stretched invisibly on top so clicks trigger Google's official flow. */
.google-signin-shell { position: relative; width: 100%; }
.google-visual-btn { pointer-events: none; text-transform: uppercase; font-weight: 600; }
.google-signin-shell:hover .google-visual-btn { background: rgba(28,25,23,0.04); }
.google-signin-overlay { position: absolute; inset: 0; opacity: 0.001; overflow: hidden; }
.google-signin-overlay > div { width: 100% !important; height: 100% !important; }
.google-signin-overlay iframe { width: 100% !important; height: 100% !important; }

/* Divider */
.auth-divider { display: flex; align-items: center; gap: 14px; font: 500 10px/1 ui-monospace, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--warm-muted); }
.auth-divider-line { flex: 1; height: 1px; background: rgba(28,25,23,0.13); }

/* Form fields */
.auth-field { padding-bottom: 8px; border-bottom: 0.5px solid rgba(28,25,23,0.2); }
.auth-field-label { font: 500 10px/1 ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm-muted); margin-bottom: 8px; }
.auth-field-row { display: flex; justify-content: space-between; align-items: baseline; }
.auth-field input { flex: 1; border: none; background: transparent; outline: none; font: 400 18px/1.3 var(--font-heading); color: var(--stone-800); padding: 0; }
.auth-field input::placeholder { color: rgba(28,25,23,0.35); }
.auth-field-right { font: 500 10px/1 ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-muted); cursor: pointer; text-decoration: none; white-space: nowrap; }
.auth-field-right:hover { color: var(--stone-800); }
.auth-field-hint { font: 500 10px/1 ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-muted); white-space: nowrap; }
.auth-field-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* CTA button */
.auth-cta { width: 100%; padding: 16px 24px; background: var(--stone-800); color: var(--warm-bg); border: none; font: 500 12px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background var(--transition-base); }
.auth-cta:hover { background: var(--stone-700); }
.auth-cta:disabled { opacity: 0.5; cursor: not-allowed; }

/* Checkbox */
.auth-checkbox { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font: 400 13px/1.4 var(--font-body); color: rgba(28,25,23,0.7); }
.auth-checkbox-box { width: 16px; height: 16px; border: 0.5px solid rgba(28,25,23,0.4); flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; background: transparent; transition: background var(--transition-base); }
.auth-checkbox-box.checked { background: var(--stone-800); }
.auth-checkbox-check { color: var(--warm-bg); font: 500 11px/1 var(--font-body); }

/* Path picker (sign-up) */
.auth-path-option { cursor: pointer; position: relative; padding: 18px 22px; border: 0.5px solid rgba(28,25,23,0.2); background: transparent; display: grid; grid-template-columns: 20px 1fr auto; gap: 14px; align-items: center; transition: background var(--transition-base), border-color var(--transition-base); }
.auth-path-option.selected { border-color: var(--stone-800); background: #d8cdb6; }
.auth-path-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(28,25,23,0.4); background: transparent; position: relative; }
.auth-path-option.selected .auth-path-radio { border-color: var(--stone-800); background: var(--stone-800); }
.auth-path-radio-dot { position: absolute; inset: 3px; background: var(--warm-bg); border-radius: 50%; display: none; }
.auth-path-option.selected .auth-path-radio-dot { display: block; }
.auth-path-title { font: 400 22px/1.1 var(--font-heading); color: var(--stone-800); letter-spacing: -0.014em; }
.auth-path-sub { font: 400 13px/1.4 var(--font-body); color: rgba(28,25,23,0.6); margin-top: 3px; }
.auth-path-tag { padding: 5px 10px; background: transparent; font: 500 10px/1 ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; }

/* Confirmation banner */
.auth-confirm-banner { background: #d8cdb6; padding: 18px 22px; display: flex; align-items: center; gap: 14px; }
.auth-confirm-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--warm-bg); display: flex; align-items: center; justify-content: center; font: 500 12px/1 var(--font-body); flex-shrink: 0; }
.auth-confirm-title { font: 500 12px/1.2 var(--font-body); color: var(--stone-800); letter-spacing: 0.04em; }
.auth-confirm-sub { font: 400 12px/1.4 var(--font-body); color: rgba(28,25,23,0.6); margin-top: 4px; }
.auth-confirm-sub a { color: var(--stone-800); border-bottom: 1px solid rgba(28,25,23,0.2); text-decoration: none; cursor: pointer; }

/* Footer link row */
.auth-link-row { padding-top: 12px; border-top: 0.5px solid rgba(28,25,23,0.13); display: flex; justify-content: space-between; align-items: center; font: 400 13px/1.4 var(--font-body); color: rgba(28,25,23,0.7); }
.auth-link { font: 500 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone-800); cursor: pointer; text-decoration: none; border-bottom: 1px solid rgba(28,25,23,0.4); padding-bottom: 4px; }
.auth-link:hover { border-bottom-color: var(--stone-800); }

/* Error */
.auth-error { padding: 10px 14px; background: #fef2f2; border: 1px solid #fecaca; font: 400 13px/1.4 var(--font-body); color: #991b1b; }

/* Terms text */
.auth-terms { font: 400 11px/1.45 var(--font-body); color: var(--warm-muted); }
.auth-terms a { color: var(--stone-800); border-bottom: 1px solid rgba(28,25,23,0.2); text-decoration: none; }

/* ── AUTH RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-panel { display: none; }
  .auth-form-col { padding: 32px 24px; min-height: 100vh; }
  .auth-title { font-size: 42px; }
  .auth-panel-headline { font-size: 48px; }
}
@media (max-width: 480px) {
  .auth-form-col { padding: 24px 20px; }
  .auth-title { font-size: 36px; }
  .auth-field-2col { grid-template-columns: 1fr; }
  .auth-header { flex-direction: column; gap: 8px; align-items: flex-start; }
  .auth-footer { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* ===== About Page (The Letter) ===== */
.about-visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 720px) {
  .about-visit-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ===== Trade v2 (landing + application) ===== */
/* The page is built with inline styles ported from the Claude Design mockup;
   these rules only add mobile fallbacks that inline styles can't express. */
.tv2-page select { appearance: none; -webkit-appearance: none; background-image: none; }
.tv2-page a { transition: color 0.15s, opacity 0.15s; }
.tv2-page a:hover { color: var(--gold); }
.tv2-page button:hover:not(:disabled) { opacity: 0.9; }
/* The page inherits body's overflow-x:clip, so anything wider than the viewport
   is silently *cut off on the right* rather than scrollable. The offender on
   phones is the upload dropzone: its inline flex row (label group + Browse
   button) uses the default min-width:auto and refuses to shrink. Let the label
   group shrink and the button wrap below instead of overflowing. */
.tv2-page .tv2-dropzone { flex-wrap: wrap; }
.tv2-page .tv2-dropzone > div:first-child { min-width: 0; flex: 1 1 auto; }
@media (max-width: 1100px) {
  .tv2-page section { padding-left: 40px !important; padding-right: 40px !important; }
  .tv2-page [data-tv2-grid] { grid-template-columns: 1fr 1fr !important; }
  .tv2-page [data-tv2-2col] { grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 720px) {
  .tv2-page section { padding-left: 22px !important; padding-right: 22px !important; padding-top: 44px !important; padding-bottom: 44px !important; }
  .tv2-page [data-tv2-grid], .tv2-page [data-tv2-2col] { grid-template-columns: 1fr !important; gap: 14px !important; }
  .tv2-page h1 { font-size: clamp(40px, 13vw, 84px) !important; }
  .tv2-page h2 { font-size: clamp(30px, 8vw, 52px) !important; }
  /* The white form card sits inside the already-padded section — halve its own
     inner padding so inputs keep a usable width on phones. */
  .tv2-page .tv2-form-card { padding: 28px 22px !important; }
}
@media (max-width: 440px) {
  .tv2-page section { padding-left: 16px !important; padding-right: 16px !important; }
  .tv2-page .tv2-form-card { padding: 22px 16px !important; }
  /* Stack the dropzone (label + Browse) so the button never crowds the label. */
  .tv2-page .tv2-dropzone { flex-direction: column; align-items: stretch !important; gap: 12px !important; }
  .tv2-page .tv2-dropzone > div:last-child { justify-content: flex-end; }
}

/* ===== Buying guides + cost calculator (SEO Phase 4) ===== */
.guide-page { max-width: 780px; margin: 0 auto; padding: 3.5rem 1.5rem 5rem; }
.guide-breadcrumb { font-family: var(--font-body); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--stone-500); margin-bottom: 2rem; }
.guide-breadcrumb a { color: var(--stone-600); text-decoration: none; }
.guide-breadcrumb a:hover { color: var(--gold-dark); }
.guide-breadcrumb span { margin: 0 0.45rem; color: var(--stone-400); }
.guide-header { margin-bottom: 1.75rem; }
.guide-eyebrow { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold-dark); margin-bottom: 0.85rem; }
.guide-page h1 { font-family: var(--font-heading); font-size: 2.75rem; font-weight: 300; line-height: 1.12; color: var(--stone-900); margin: 0; }
.guide-lede { font-size: 1.125rem; color: var(--stone-600); line-height: 1.6; margin: 1rem 0 0; }
.guide-intro { font-size: 1.1875rem; color: var(--stone-700); line-height: 1.7; margin-bottom: 2rem; }
.guide-intro p { margin: 0 0 1rem; }
.guide-body { font-family: var(--font-body); color: var(--stone-700); }
.guide h2, .guide-faq h2, .guide-related h2 { font-family: var(--font-heading); font-size: 1.875rem; font-weight: 300; color: var(--stone-900); margin: 2.75rem 0 1rem; }
.guide h3 { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 400; color: var(--stone-900); margin: 1.75rem 0 0.5rem; }
.guide p { font-size: 1.0625rem; line-height: 1.75; margin: 0 0 1.15rem; }
.guide ul, .guide ol { margin: 0 0 1.35rem; padding-left: 1.35rem; }
.guide li { font-size: 1.0625rem; line-height: 1.7; margin-bottom: 0.55rem; }
.guide strong { color: var(--stone-900); font-weight: 600; }
.guide a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 2px; }
/* Cost tables inside guide content (hand-authored HTML from landing_pages.content_html) */
.guide-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size: 1rem; }
.guide-body table caption { text-align: left; font-family: var(--font-heading); font-size: 1.05rem; color: var(--stone-500); margin-bottom: 0.5rem; }
.guide-body th, .guide-body td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--stone-200); vertical-align: top; }
.guide-body thead th { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--stone-500); border-bottom: 2px solid var(--stone-300); }
.guide-body tbody tr:nth-child(even) { background: var(--stone-50); }
.guide-body td:not(:first-child), .guide-body th:not(:first-child) { white-space: nowrap; }
/* …but prose columns (tier descriptions, notes, "right for") are always last — let them wrap,
   otherwise wide tables blow out of the 780px article column. */
.guide-body td:last-child, .guide-body th:last-child { white-space: normal; }
.guide-body td:first-child { font-weight: 500; color: var(--stone-800); }
.guide-body tfoot td { font-weight: 600; color: var(--stone-900); border-top: 2px solid var(--stone-300); border-bottom: none; }
.guide-callout { background: var(--stone-50); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 1.1rem 1.35rem; margin: 1.75rem 0; }
.guide-callout p { margin: 0; font-size: 1.0625rem; }
@media (max-width: 640px) { .guide-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 0.875rem; } .guide-body th, .guide-body td { padding: 0.55rem 0.5rem; } }
.guide-faq-item { margin-bottom: 1.25rem; }
.guide-faq-item h3 { font-size: 1.25rem; font-weight: 500; margin: 0 0 0.35rem; }
.guide-faq-item p { margin: 0; color: var(--stone-600); }
.guide-related-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.guide-related-links a { font-weight: 500; }
.guide-cta { margin-top: 2.75rem; }
.guide-loading, .guide-empty { text-align: center; padding: 5rem 1.5rem; color: var(--stone-500); }
.guide-empty h1 { font-family: var(--font-heading); font-weight: 300; }

/* Guides index */
.guides-index { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.guides-index li { border-top: 1px solid var(--stone-200); }
.guides-index li:last-child { border-bottom: 1px solid var(--stone-200); }
.guides-index a { display: block; padding: 1.35rem 0.5rem; text-decoration: none; transition: background var(--transition-base); }
.guides-index a:hover { background: var(--cream); }
.guide-card-title { display: block; font-family: var(--font-heading); font-size: 1.375rem; font-weight: 400; color: var(--stone-900); }
.guides-index a:hover .guide-card-title { color: var(--gold-dark); }
.guide-card-desc { display: block; font-size: 0.9375rem; color: var(--stone-500); line-height: 1.5; margin-top: 0.3rem; }

/* Cost calculator */
.cost-calculator { background: var(--cream); border: 1px solid var(--stone-200); border-radius: var(--radius-lg); padding: 2rem 2rem 1.75rem; margin: 2rem 0 2.5rem; }
.cost-calculator h2 { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 300; color: var(--stone-900); margin: 0 0 1.5rem; }
.calc-fields { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; }
.calc-field { display: flex; flex-direction: column; gap: 0.45rem; }
.calc-field label { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone-600); }
.calc-field input, .calc-field select { font-family: var(--font-body); font-size: 1rem; padding: 0.65rem 0.75rem; border: 1px solid var(--stone-300); border-radius: var(--radius-md); background: #fff; color: var(--stone-800); }
.calc-field input { width: 130px; }
.calc-field input:focus, .calc-field select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(168,121,53,0.15); }
.calc-check { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; color: var(--stone-700); }
.calc-check input { width: 16px; height: 16px; accent-color: var(--gold); }
.calc-result { margin-top: 1.75rem; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--stone-500); }
.calc-result strong { display: block; font-family: var(--font-heading); font-size: 2.5rem; font-weight: 300; color: var(--gold-dark); text-transform: none; letter-spacing: normal; margin-top: 0.35rem; }
.calc-hint { margin-top: 1.5rem; color: var(--stone-500); font-size: 0.9375rem; }
.calc-note { margin-top: 1.25rem; font-size: 0.8125rem; color: var(--stone-500); line-height: 1.55; }

@media (max-width: 640px) {
  .guide-page { padding: 2.25rem 1.25rem 3.5rem; }
  .guide-page h1 { font-size: 2rem; }
  .guide h2, .guide-faq h2, .guide-related h2 { font-size: 1.5rem; }
  .cost-calculator { padding: 1.5rem; }
  .calc-field input { width: 100%; }
  .calc-result strong { font-size: 2rem; }
}

/* ==================== Per-city service pages (material install + remodel) ==================== */
/* Purpose-built styling for the link-heavy sections so they match the design system instead of
   rendering as raw browser-blue anchors. Hero/steps/benefits/quote/FAQ reuse the .install-* look. */

/* Hero back-link, sits on the dark install hero */
.svc-back { display: inline-block; margin-top: 1.25rem; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); text-decoration: none; opacity: 0.9; transition: color var(--transition-base), opacity var(--transition-base); }
.svc-back:hover { opacity: 1; color: #fff; }

/* Explore section — "Browse {material}" primary link + shop-material chips */
.svc-explore { max-width: var(--max-width); margin: 0 auto; padding: 4rem 3rem; text-align: center; }
.svc-explore > h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; margin-bottom: 1.75rem; }
.svc-explore-primary { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--gold-dark); text-decoration: none; border-bottom: 1px solid var(--gold-light); padding-bottom: 2px; transition: color var(--transition-base), border-color var(--transition-base); }
.svc-explore-primary:hover { color: var(--gold); border-color: var(--gold); }
.svc-explore-primary span { transition: transform var(--transition-base); }
.svc-explore-primary:hover span { transform: translateX(3px); }

.svc-chip-label { font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--stone-700); margin: 2.25rem 0 1rem; }
.svc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; max-width: 760px; margin: 0 auto; }
.svc-chip { display: inline-block; padding: 0.5rem 1.125rem; border: 1px solid var(--stone-300); border-radius: 999px; font-family: var(--font-body); font-size: 0.875rem; color: var(--stone-700); text-decoration: none; background: #fff; transition: color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); }
.svc-chip:hover { border-color: var(--gold); color: var(--gold-dark); box-shadow: var(--shadow-sm); transform: translateY(-1px); }

.svc-nap { font-size: 0.875rem; color: var(--stone-500); margin-top: 2.5rem; text-align: center; }
.svc-nap a { color: var(--gold); }

/* Remodel hub — room cards */
.svc-rooms { max-width: var(--max-width); margin: 0 auto; padding: 4rem 3rem; }
.svc-rooms > h2 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 300; text-align: center; margin-bottom: 2.5rem; }
.svc-room-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 900px; margin: 0 auto; }
.svc-room-card { display: block; padding: 2.25rem 2rem; background: var(--cream); border: 1px solid var(--stone-200); border-radius: var(--radius-md); text-decoration: none; transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base); }
.svc-room-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--gold-light); }
.svc-room-card h3 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; color: var(--stone-900); margin-bottom: 0.75rem; }
.svc-room-card p { font-size: 0.9375rem; color: var(--stone-600); line-height: 1.7; margin: 0; }
.svc-room-arrow { display: inline-block; margin-top: 1rem; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-dark); }

@media (max-width: 768px) {
  .svc-explore, .svc-rooms { padding: 2.5rem 1.25rem; }
  .svc-room-grid { grid-template-columns: 1fr; }
  .svc-explore > h2, .svc-rooms > h2 { font-size: 1.875rem; }
}

/* ==================== PDP lightbox + dead-click fixes (Clarity 2026-09) ==================== */
.sku-detail-image { cursor: zoom-in; }
.pdp-zoom-hint { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(250,248,245,0.92); border: 0.5px solid rgba(28,25,23,0.15); display: flex; align-items: center; justify-content: center; color: var(--stone-700); pointer-events: none; z-index: 2; }
.pdp-zoom-hint svg { width: 17px; height: 17px; }
.pdp-lightbox { position: fixed; inset: 0; background: rgba(21,18,15,0.94); z-index: calc(var(--z-trade-modal) + 50); display: flex; align-items: center; justify-content: center; animation: pdpFadeIn 160ms ease-out; cursor: default; }
.pdp-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.pdp-lightbox-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: rgba(250,248,245,0.12); border: 0.5px solid rgba(250,248,245,0.3); color: #faf8f5; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition-base); }
.pdp-lightbox-close:hover { background: rgba(250,248,245,0.25); }
.pdp-lightbox-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(250,248,245,0.12); border: 0.5px solid rgba(250,248,245,0.3); color: #faf8f5; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition-base); }
.pdp-lightbox-arrow.prev { left: 14px; }
.pdp-lightbox-arrow.next { right: 14px; }
.pdp-lightbox-arrow:hover { background: rgba(250,248,245,0.25); }
.pdp-lightbox-count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(250,248,245,0.85); font-size: 0.8rem; letter-spacing: 0.06em; }

/* "Call for Price" is a real action now (tel: or scroll to inquiry banner) */
.pdp-price-callforprice { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--stone-900); text-decoration: none; border-bottom: 1px solid var(--stone-400); padding-bottom: 2px; cursor: pointer; transition: border-color var(--transition-base); }
.pdp-price-callforprice svg { width: 18px; height: 18px; color: var(--stone-600); }
.pdp-price-callforprice:hover { border-bottom-color: var(--stone-800); }

/* Variant-switch feedback: visible spinner while the sibling SKU loads
   (the PDP goes pointer-events:none during load — without a cue users re-tap). */
.sku-detail.is-loading::after { content: ''; position: fixed; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2px solid var(--stone-300); border-top-color: var(--stone-800); border-radius: 50%; animation: pdpSpin 700ms linear infinite; z-index: 60; }
@keyframes pdpSpin { to { transform: rotate(360deg); } }

/* INP: skip style/layout work for the offscreen footer on every re-render.
   contain-intrinsic-size keeps the scrollbar stable before it's reached. */
.footer { content-visibility: auto; contain-intrinsic-size: auto 520px; }