@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ------------------------------- tokens -------------------------------- */
/* Content column width. 1180px on laptops; on large screens the site goes
   (almost) full width -- grids are auto-fill, so they just gain columns. */
:root{ --page-max:1180px; }
@media (min-width:1300px){ :root{ --page-max:calc(100vw - 24px); } }

:root{
  --bg:#F5F5F3;
  --surface:#FFFFFF;
  --surface-2:#EDEDEA;
  --ink:#17171A;
  --ink-soft:#5B5B63;
  --ink-faint:#94949C;
  --line:#E3E3E7;
  --line-soft:#EFEFF2;

  --brand-dark:#131317;
  --brand-dark-2:#202027;

  --accent:#D3A034;
  --accent-dark:#B98B24;
  --accent-ink:#17171A;
  --accent-soft:#F6E9CC;

  --success:#2F7D53;
  --success-soft:#E1F0E7;
  --warning:#B4820A;
  --warning-soft:#FBF0D6;
  --danger:#C0392B;
  --danger-soft:#F8E1DD;
  --info:#2C5A82;
  --info-soft:#E3EBF3;

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(15,15,20,.06);
  --shadow-md:0 10px 26px -10px rgba(15,15,20,.22);
  --shadow-lg:0 26px 60px -18px rgba(15,15,20,.32);

  --font-display:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
/* full-bleed sections use 100vw, which includes the vertical scrollbar --
   clip the few px of overflow instead of showing a horizontal scrollbar
   (clip, unlike hidden, doesn't break position:sticky) */
body{ overflow-x:clip; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  font-size:14.5px;
  line-height:1.5;
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
button{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--accent-soft); }

.icon{ display:block; flex-shrink:0; }

/* -------------------------------- layout -------------------------------- */
#app{ min-height:100%; display:flex; flex-direction:column; }

/* --- slim contact strip above the header --- */
.topbar-strip{
  background:#0d0d10; color:rgba(255,255,255,.62);
  font-size:11.5px; border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar-strip .strip-inner{
  max-width:var(--page-max); margin:0 auto; padding:7px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.strip-contact{ display:flex; gap:20px; min-width:0; }
.strip-contact a{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.strip-contact a:hover{ color:#fff; }
.strip-right{ display:flex; align-items:center; gap:16px; }
.strip-social{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.strip-social a{ color:rgba(255,255,255,.5); display:flex; transition:color .15s, transform .15s; }
.strip-social a:hover{ color:var(--accent); transform:translateY(-1px); }
.strip-admin{
  color:rgba(255,255,255,.6); text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18); transition:all .15s;
}
.strip-admin:hover{ color:#fff; border-color:var(--accent); background:rgba(211,160,52,.16); }

/* --- main header --- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:24px;
  padding:0 28px;
  background:rgba(19,19,23,.86);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 30px -18px rgba(0,0,0,.7);
}
.brand{
  display:flex; align-items:center; gap:12px; margin-right:auto;
  border:none; background:none; cursor:pointer; padding:13px 0; color:#fff;
}
.brand-logo{ height:38px; width:auto; border-radius:9px; display:block; box-shadow:var(--shadow-sm); transition:transform .2s ease; }
.brand:hover .brand-logo{ transform:scale(1.05); }
.brand-name{ display:flex; flex-direction:column; line-height:1.05; text-align:left; }
.brand-name strong{ font-family:var(--font-display); font-weight:900; font-size:16px; letter-spacing:.14em; color:#fff; }
.brand-tagline{
  font-size:10px; color:var(--accent); letter-spacing:.22em; text-transform:uppercase; font-weight:700; margin-top:3px;
}

.nav-tabs{ display:flex; align-items:center; gap:4px; }
.nav-tab{
  border:none; background:transparent; cursor:pointer;
  padding:10px 13px; position:relative; border-radius:10px;
  font-size:13.5px; font-weight:600; letter-spacing:.01em;
  color:rgba(255,255,255,.68);
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  transition:color .18s, background .18s;
}
.nav-tab::after{
  content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px;
  border-radius:2px; background:var(--accent);
  transform:scaleX(0); transition:transform .22s ease;
}
.nav-tab:hover{ color:#fff; }
.nav-tab:hover::after{ transform:scaleX(.5); }
.nav-tab.is-active{ color:#fff; }
.nav-tab.is-active::after{ transform:scaleX(1); }
@media (min-width:981px){ .nav-tab:not(.nav-tab-cta) .icon{ display:none; } }
@media (min-width:981px) and (max-width:1200px){
  .topbar{ gap:14px; }
  .brand-name{ display:none; }
  .nav-tab{ padding:10px 9px; }
  .nav-tab::after{ left:9px; right:9px; }
  .nav-tab-cta{ margin-left:6px; padding:10px 14px; }
}
@media (max-width:560px){ .brand-name{ display:none; } }

.nav-tab-cta{
  margin-left:12px; padding:10px 18px; border-radius:var(--radius-pill);
  color:var(--accent-ink); background:var(--accent); font-weight:700;
  box-shadow:0 6px 18px -6px rgba(211,160,52,.6);
  flex-direction:row-reverse;
}
.nav-tab-cta::after{ display:none; }
.nav-tab-cta .icon{ transition:transform .18s; }
.nav-tab-cta:hover{ color:var(--accent-ink); filter:brightness(1.08); }
.nav-tab-cta:hover .icon{ transform:translateX(3px); }
.nav-tab-cta.is-active{ color:var(--accent-ink); }

.topbar-actions{ display:flex; align-items:center; gap:8px; }
.top-action{
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); cursor:pointer;
  color:rgba(255,255,255,.82); font-family:inherit; font-size:12px; font-weight:700;
  padding:8px 13px; border-radius:var(--radius-pill);
  display:flex; align-items:center; gap:7px; position:relative;
  transition:all .15s;
}
.top-action:hover{ color:#fff; border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.1); }
.top-action.is-active{ color:var(--brand-dark); background:#fff; border-color:#fff; }
.top-action.top-cart{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.top-action.top-cart:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }
.top-action .count{
  min-width:18px; height:18px; padding:0 5px; border-radius:var(--radius-pill);
  background:var(--brand-dark); color:#fff; font-size:10.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.nav-toggle{
  display:none; border:none; background:rgba(255,255,255,.08); color:#fff;
  width:38px; height:38px; border-radius:10px; cursor:pointer; align-items:center; justify-content:center;
}

.admin-login-link{
  height:38px; padding:0 16px 0 12px; border-radius:999px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:13.5px; font-weight:600; text-decoration:none; white-space:nowrap;
  color:#fff; background:transparent; border:1px solid rgba(255,255,255,.22);
  transition:border-color .15s, background .15s, color .15s;
}
.admin-login-link:hover{ border-color:var(--accent); color:var(--accent); background:rgba(211,160,52,.08); }

.vendor-avatar{
  width:26px; height:26px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800;
}

main{ flex:1; width:100%; max-width:var(--page-max); margin:0 auto; padding:26px 28px 60px; }

.view{ display:none; animation:fadeUp .28s ease; }
.view.is-active{ display:block; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ------------------------------- steps bar ------------------------------ */
.steps{ display:flex; align-items:center; gap:0; margin-bottom:26px; }
.step{ display:flex; align-items:center; gap:9px; color:var(--ink-faint); }
.step-dot{
  width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:800;
  background:var(--surface); flex-shrink:0;
}
.step-label{ font-size:12px; font-weight:700; white-space:nowrap; text-transform:uppercase; letter-spacing:.03em; }
.step.is-active{ color:var(--ink); }
.step.is-active .step-dot{ border-color:var(--accent); color:var(--ink); background:var(--accent-soft); }
.step.is-done .step-dot{ background:var(--success); border-color:var(--success); color:#fff; }
.step.is-done{ color:var(--ink-soft); }
.step-line{ flex:1; height:1.5px; background:var(--line); margin:0 12px; min-width:20px; }

/* -------------------------------- headers -------------------------------- */
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.page-head h2{ font-size:24px; text-transform:uppercase; letter-spacing:.01em; }
.page-head p{ color:var(--ink-soft); margin-top:5px; font-size:13.5px; }
.eyebrow{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dark); margin-bottom:6px; }

/* --------------------------------- hero slider ------------------------------ */
.hero-slider{
  position:relative;
  margin:-26px calc(50% - 50vw) 28px;
  overflow:hidden;
  color:#fff;
}
.hero-track{ display:flex; transition:transform .65s cubic-bezier(.65,0,.35,1); touch-action:pan-y; }
.hero-slide{
  flex:0 0 100%;
  position:relative;
  padding:72px 40px 60px;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:min(58vh, 520px);
}
.hero-slide::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 90% at 88% 15%, rgba(255,255,255,.12), transparent 65%);
  pointer-events:none;
}
.hero-slide::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,8,10,.65) 0%, rgba(8,8,10,.15) 42%, transparent 68%);
  pointer-events:none;
}
.hero-slide-decor{
  position:absolute; right:-30px; bottom:-46px;
  opacity:.1; pointer-events:none; transform:rotate(-6deg);
}
.hero-slide-decor .icon{ width:280px; height:280px; }
.hero-slide-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; pointer-events:none;
}
.hero-slide-video-tint{ position:absolute; inset:0; background:rgba(10,10,12,.45); pointer-events:none; }
.hero-inner{ max-width:var(--page-max); margin:0 auto; width:100%; position:relative; z-index:1; }
.hero-title{ font-size:clamp(32px,5.2vw,52px); color:#fff; max-width:20ch; text-transform:none; letter-spacing:-.025em; line-height:1.08; }
.hero-sub{ color:rgba(255,255,255,.74); font-size:16px; margin-top:16px; max-width:56ch; line-height:1.65; }
.hero-stats{ display:flex; gap:42px; margin-top:34px; flex-wrap:wrap; }
.hero-stat .v{ font-size:32px; font-weight:900; font-family:var(--font-display); color:var(--accent); line-height:1; }
.hero-stat .l{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.55); font-weight:700; margin-top:7px; }
.hero-cta{ margin-top:32px; }
.hero-cta.btn{ padding:15px 28px; font-size:14px; }

.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.1);
  backdrop-filter:blur(8px); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s, border-color .2s, transform .2s;
  z-index:2;
}
.hero-nav:hover{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.45); transform:translateY(-50%) scale(1.06); }
.hero-nav.prev{ left:22px; }
.hero-nav.next{ right:22px; }

.hero-dots{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; gap:8px; z-index:2;
}
.hero-dot{
  width:9px; height:9px; border-radius:5px; padding:0; border:none; cursor:pointer;
  background:rgba(255,255,255,.35);
  transition:width .25s, background .25s;
}
.hero-dot:hover{ background:rgba(255,255,255,.6); }
.hero-dot.is-active{ width:26px; background:var(--accent); }

/* The home page's own hero (Collections landing) -- bigger and a touch more
   premium than the flat catalogue's hero, which shares the same markup/CSS
   above but doesn't get this modifier class. */
/* 70% of the first screen: viewport height minus the header (strip + nav),
   set by app.js's syncHeaderHeightVar. svh avoids mobile browser-bar jumps. */
.hero-slider.home-hero .hero-slide{ min-height:max(420px, calc((100vh - var(--site-header-h, 124px)) * .7)); min-height:max(420px, calc((100svh - var(--site-header-h, 124px)) * .7)); padding-top:56px; }
.hero-slider.home-hero .hero-title{ font-size:clamp(36px,5.8vw,58px); }
.hero-slider.home-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px; z-index:2;
  background:linear-gradient(90deg, transparent, var(--accent) 25%, var(--accent) 75%, transparent);
  opacity:.85;
}
@media (max-width:640px){
  .hero-slider.home-hero .hero-slide{ min-height:max(400px, calc((100svh - var(--site-header-h, 120px)) * .7)); padding-top:40px; }
}

.back-link{
  display:inline-flex; align-items:center; gap:6px; border:none; background:none;
  color:var(--ink-soft); font-weight:700; font-size:13px; cursor:pointer; padding:6px 0; margin-bottom:10px;
}
.back-link:hover{ color:var(--ink); }

/* --------------------------------- buttons -------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--radius-pill); border:1px solid transparent;
  font-weight:700; font-size:13.5px; cursor:pointer; padding:11px 20px;
  transition:transform .12s, box-shadow .12s, background .15s, opacity .15s;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.btn-primary{ background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 18px -8px rgba(211,160,52,.65); }
.btn-primary:hover:not(:disabled){ background:var(--accent-dark); }
.btn-secondary{ background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn-secondary:hover:not(:disabled){ background:var(--surface-2); }
.btn-ghost{ background:transparent; color:var(--ink-soft); }
.btn-ghost:hover:not(:disabled){ color:var(--ink); background:var(--surface-2); }
.btn-sm{ padding:7px 14px; font-size:12.5px; }
.btn-block{ width:100%; }
.btn-danger-ghost{ background:transparent; color:var(--danger); }
.btn-danger-ghost:hover{ background:var(--danger-soft); }
.btn-icon{ width:32px; height:32px; padding:0; border-radius:50%; }

/* --------------------------------- filters -------------------------------- */
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.search-box{
  display:flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-pill); padding:9px 16px;
  flex:1; min-width:220px; color:var(--ink-faint);
}
.search-box input{ border:none; outline:none; background:none; font-size:13.5px; color:var(--ink); flex:1; font-family:inherit; }
.search-box input::placeholder{ color:var(--ink-faint); }
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  border-radius:var(--radius-pill); padding:8px 15px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em;
  cursor:pointer; transition:all .15s;
}
.chip:hover{ border-color:var(--accent); color:var(--ink); }
.chip.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.select-wrap{
  position:relative; display:flex; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-pill);
}
.select-wrap .icon{
  position:absolute; right:14px; top:50%; transform:translateY(-50%) rotate(90deg);
  color:var(--ink-faint); pointer-events:none;
}
.select-wrap select{
  appearance:none; -webkit-appearance:none; border:none; background:none; outline:none;
  font-family:inherit; font-size:13px; font-weight:700; color:var(--ink);
  padding:9px 34px 9px 16px; cursor:pointer; min-width:150px;
}
.select-wrap:hover{ border-color:var(--accent); }
.select-wrap.is-disabled{ opacity:.5; }
.select-wrap select:disabled{ cursor:not-allowed; }

/* -------------------------------- product grid ----------------------------- */
.product-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:18px; }
.product-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
  transition:transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s cubic-bezier(.22,1,.36,1), border-color .32s;
}
.product-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:transparent;
}
.product-thumb{
  height:150px; position:relative; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.92); overflow:hidden;
}
.product-thumb .icon{ width:38px; height:38px; opacity:.9; transition:opacity .25s; }
.product-card:hover .product-thumb .icon{ opacity:.5; }
.thumb-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.product-thumb .thumb-photo{ transition:transform .5s cubic-bezier(.22,1,.36,1); }
.product-card:hover .product-thumb .thumb-photo{ transform:scale(1.08); }
.product-thumb::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,12,.5), rgba(10,10,12,0) 58%);
  opacity:0; transition:opacity .28s;
}
.product-card:hover .product-thumb::after{ opacity:1; }
.stock-flag{
  position:absolute; top:10px; left:10px; font-size:10px; font-weight:800; letter-spacing:.04em;
  padding:4px 9px; border-radius:var(--radius-pill); text-transform:uppercase; z-index:1;
}
.product-quickview{
  position:absolute; left:50%; bottom:12px; transform:translate(-50%,8px); z-index:1;
  display:flex; align-items:center; gap:6px; background:var(--accent); color:var(--accent-ink);
  border-radius:var(--radius-pill); padding:7px 15px; font-size:11px; font-weight:800;
  letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .22s, transform .22s;
}
.product-card:hover .product-quickview{ opacity:1; transform:translate(-50%,0); }
.product-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-cat{
  align-self:flex-start; font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--accent-dark); font-weight:800; background:var(--accent-soft);
  padding:3px 9px; border-radius:var(--radius-pill);
}
.product-name{ font-size:15px; font-weight:700; font-family:var(--font-display); letter-spacing:-.005em; transition:color .18s; }
.product-card:hover .product-name{ color:var(--accent-dark); }
.product-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.product-price{ font-weight:800; font-size:14.5px; color:var(--ink); }
.product-price small{ font-weight:600; color:var(--ink-faint); font-size:11px; text-transform:uppercase; }
.product-variants-hint{
  display:flex; align-items:center; gap:3px; font-size:11.5px; color:var(--ink-faint);
  transition:color .2s, transform .2s;
}
.product-card:hover .product-variants-hint{ color:var(--accent-dark); transform:translateX(2px); }
.swatch-row{ display:flex; gap:5px; }
.swatch-dot{ width:14px; height:14px; border-radius:50%; border:1.5px solid rgba(0,0,0,.08); transition:transform .18s; }
.product-card:hover .swatch-dot{ transform:scale(1.08); }

/* Prices are hidden site-wide for anonymous visitors (dealer-only pricing) --
   this small tag replaces every numeric price on the public site. */
.product-price--gated{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  color:var(--ink-faint);
}
.product-price--gated .icon{ width:11px; height:11px; opacity:.8; }

/* --------------------------- collection cards --------------------------
   Home-page (Collections) card grid -- a full-bleed photo with the title
   and item count on a gradient scrim, editorial/lookbook style, distinct
   from the flat white-body .product-card used for individual products. */
.coll-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:20px; }
/* wide screens: always 4 per row -- the cards grow instead of adding columns */
@media (min-width:1100px){ .coll-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; } }
.coll-card{
  position:relative; aspect-ratio:4/5; border-radius:16px; overflow:hidden;
  cursor:pointer; background:var(--brand-dark); box-shadow:var(--shadow-sm);
  border:1px solid rgba(15,15,20,.06);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1);
}
.coll-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.coll-card-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.coll-card:hover .coll-card-photo{ transform:scale(1.07); }
.coll-card-icon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.45);
}
.coll-card-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,12,.88) 0%, rgba(10,10,12,.32) 48%, rgba(10,10,12,.03) 72%);
}
.coll-card-overlay{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:16px; color:#fff; }
.coll-card-count{
  display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  background:rgba(255,255,255,.18); backdrop-filter:blur(6px);
  padding:4px 10px; border-radius:var(--radius-pill); margin-bottom:8px;
}
.coll-card-title{
  font-family:var(--font-display); font-size:16.5px; font-weight:800; line-height:1.26;
  margin:0; letter-spacing:-.005em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.coll-card-cta{
  display:flex; align-items:center; gap:5px; margin-top:8px;
  font-size:11px; font-weight:700; color:var(--accent);
  opacity:0; transform:translateY(5px); transition:opacity .2s, transform .2s;
}
.coll-card-cta .icon{ width:11px; height:11px; }
.coll-card:hover .coll-card-cta{ opacity:1; transform:translateY(0); }
@media (max-width:640px){
  .coll-grid{ grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px; }
  .coll-card{ border-radius:13px; }
  .coll-card-overlay{ padding:12px; }
  .coll-card-title{ font-size:14px; }
}

.empty-state{
  text-align:center; padding:60px 20px; color:var(--ink-soft);
  border:1.5px dashed var(--line); border-radius:var(--radius-lg); background:var(--surface);
}
.empty-state .icon{ width:34px; height:34px; color:var(--ink-faint); margin:0 auto 12px; }

/* --------------------------- home page: section heads ---------------------- */
.home-section-head{ max-width:640px; margin:64px 0 26px; }
.home-section-head .eyebrow{ margin-bottom:8px; }
.home-section-head h2{ font-size:clamp(24px,3.2vw,32px); letter-spacing:-.015em; margin:0; }
.home-section-head p{ color:var(--ink-soft); font-size:14.5px; margin-top:10px; line-height:1.6; }
.home-section-head--tight{ margin-top:58px; margin-bottom:20px; }

/* Wraps the search/filter toolbar + collection grid in a soft "floating
   panel" so it reads as its own section instead of sitting bare on the page
   background right under the hero. */
.home-browse-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px; box-shadow:var(--shadow-sm);
}
@media (max-width:640px){ .home-browse-panel{ padding:16px; } }

/* "How It Works" steps on the home page: a large faint step number in the
   corner, a gold icon medallion that fills in on hover, a top accent bar,
   and a dashed connector running behind the medallions on wide screens. */
.home-section-head--center{ text-align:center; margin-left:auto; margin-right:auto; }
.home-section-head--center .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.home-section-head--center .eyebrow::before,
.home-section-head--center .eyebrow::after{ content:""; width:28px; height:1.5px; background:var(--accent); opacity:.7; }

.home-steps{ position:relative; gap:22px; }
@media (min-width:861px){
  .home-steps::before{
    content:""; position:absolute; left:12.5%; right:12.5%; top:72px; height:0;
    border-top:2px dashed rgba(185,139,36,.35); z-index:0;
  }
}
.home-steps .cp-step{
  position:relative; z-index:1; text-align:center; overflow:hidden;
  padding:38px 24px 30px; border-radius:20px;
  box-shadow:0 1px 2px rgba(60,40,10,.04), 0 10px 30px -18px rgba(60,40,10,.25);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.home-steps .cp-step::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-dark));
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.home-steps .cp-step:hover{
  transform:translateY(-6px); border-color:rgba(211,160,52,.45);
  box-shadow:0 22px 44px -22px rgba(120,80,10,.45);
}
.home-steps .cp-step:hover::before{ transform:scaleX(1); }
.home-step-num{
  position:absolute; top:12px; right:18px;
  font-family:var(--font-display); font-size:46px; font-weight:900; line-height:1;
  color:rgba(211,160,52,.15); letter-spacing:-.04em; transition:color .3s ease;
}
.home-steps .cp-step:hover .home-step-num{ color:rgba(211,160,52,.32); }
.home-step-icon{
  position:relative; width:68px; height:68px; margin:0 auto 18px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#FCF1DA,#F1DAAA); color:var(--accent-dark);
  box-shadow:0 0 0 7px #fff, 0 0 0 8px rgba(211,160,52,.22);
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.home-steps .cp-step:hover .home-step-icon{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:#fff; transform:scale(1.06);
}
.home-step-label{
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-dark); margin-bottom:6px;
}
.home-steps .cp-step h3{ font-size:18px; margin-bottom:8px; }
.home-steps .cp-step p{ font-size:13.5px; color:var(--ink-soft); line-height:1.65; }

/* Divider laid on the seam between two home bands: a gold hairline that
   fades out at both ends, with a small diamond in the middle. */
.home-divider{
  position:relative; z-index:2; height:0;
  margin:0 calc(50% - 50vw);
}
.home-divider::before{
  content:""; position:absolute; left:50%; top:-1px; width:min(560px, 70vw); height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, var(--accent) 35%, var(--accent) 65%, transparent);
}
.home-divider span{
  position:absolute; left:50%; top:0; width:16px; height:16px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--accent); border-radius:3px;
  box-shadow:0 0 0 5px var(--bg), 0 0 0 6px rgba(211,160,52,.45);
}

/* --------------------------- home page: trust section -------------------- */
.home-trust-section{ display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center; }
.home-trust-media{ display:flex; justify-content:center; }
.home-trust-media img{ max-width:100%; max-height:460px; object-fit:contain; border-radius:var(--radius-lg); }
.home-trust-copy h2{ font-size:clamp(22px,3vw,30px); margin:0 0 14px; letter-spacing:-.01em; line-height:1.2; }
.home-trust-copy p{ color:var(--ink-soft); line-height:1.7; margin:0 0 20px; }
.home-trust-points{ list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:13px; }
.home-trust-points li{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:650; color:var(--ink); }
.home-trust-points li .icon{ color:var(--accent-dark); flex-shrink:0; }
@media (max-width:800px){
  .home-trust-section{ grid-template-columns:1fr; gap:28px; text-align:center; }
  .home-trust-media{ order:-1; }
  .home-trust-points li{ justify-content:center; }
}

/* --------------------------- home page: CTA banner ------------------------ */
.home-cta-banner{
  position:relative; display:flex; align-items:center; gap:38px;
  margin:56px 0; padding:42px 48px; border-radius:var(--radius-lg);
  background:
    radial-gradient(ellipse 55% 90% at 12% 30%, rgba(211,160,52,.24), transparent 60%),
    linear-gradient(120deg,var(--brand-dark) 0%,#3a1414 85%);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.home-cta-banner::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:radial-gradient(circle, #fff 1px, transparent 1px);
  background-size:20px 20px;
}
.home-cta-badge{
  width:168px; height:168px; border-radius:50%; flex-shrink:0; object-fit:cover;
  position:relative; z-index:1;
  box-shadow:0 0 0 4px rgba(211,160,52,.4), 0 0 0 9px rgba(211,160,52,.12), var(--shadow-lg);
}
.home-cta-copy{ position:relative; z-index:1; }
.home-cta-copy .eyebrow{ color:var(--accent); }
.home-cta-copy h2{ font-family:var(--font-display); font-size:clamp(24px,3.4vw,32px); margin:6px 0 10px; letter-spacing:-.015em; }
.home-cta-copy p{ color:rgba(255,255,255,.75); margin:0 0 22px; max-width:52ch; line-height:1.65; }
.home-cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.home-cta-actions .btn{ padding:13px 24px; }
.home-cta-copy{ flex:1; min-width:0; }
.home-cta-badge{ animation:ctaBadgeFloat 5s ease-in-out infinite; }
@keyframes ctaBadgeFloat{ 50%{ transform:translateY(-6px); } }
.home-cta-banner::after{
  content:""; position:absolute; right:-120px; bottom:-160px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(211,160,52,.18), transparent 65%); pointer-events:none;
}
.home-cta-contact-card{
  position:relative; z-index:1; flex-shrink:0; width:330px;
  display:flex; flex-direction:column; gap:4px; padding:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:18px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.home-cta-contact-card a{
  display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:12px;
  color:#fff; text-decoration:none; font-size:14px; font-weight:600; transition:background .15s;
}
.home-cta-contact-card a:hover{ background:rgba(255,255,255,.07); }
.home-cta-contact-card a > .icon{
  width:40px; height:40px; padding:11px; border-radius:50%; box-sizing:border-box;
  background:rgba(211,160,52,.16); color:var(--accent);
}
.home-cta-contact-card span{ display:flex; flex-direction:column; min-width:0; overflow-wrap:anywhere; }
.home-cta-contact-card small{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.5); }
@media (max-width:1060px){ .home-cta-contact-card{ display:none; } }
@media (prefers-reduced-motion: reduce){ .home-cta-badge{ animation:none; } }
@media (max-width:640px){
  .home-cta-banner{ flex-direction:column; text-align:center; padding:32px 24px; gap:22px; }
  .home-cta-badge{ width:130px; height:130px; }
  .home-cta-copy p{ max-width:none; }
  .home-cta-actions{ justify-content:center; }
}
.empty-state h3{ font-size:16px; margin-bottom:4px; text-transform:none; }
.empty-state p{ font-size:13px; margin-bottom:16px; }

.page-summary{ font-size:12.5px; color:var(--ink-soft); margin-bottom:14px; }

.pagination{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:30px; flex-wrap:wrap; }
.page-btn{
  min-width:34px; height:34px; padding:0 6px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink-soft);
  font-weight:700; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.page-btn:hover:not(:disabled){ border-color:var(--accent); color:var(--ink); }
.page-btn.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.page-btn:disabled{ opacity:.35; cursor:not-allowed; }
.page-ellipsis{ color:var(--ink-faint); font-size:13px; padding:0 4px; }

/* -------------------------------- product detail ---------------------------- */
@keyframes detailFadeIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.detail-grid{
  display:flex; flex-direction:column; gap:28px;
  animation:detailFadeIn .38s cubic-bezier(.22,1,.36,1);
}
.detail-gallery{ display:flex; flex-direction:column; gap:14px; }
.detail-media{
  height:min(66vh,600px); border-radius:var(--radius-lg); position:relative;
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.92);
  box-shadow:var(--shadow-lg); overflow:hidden; border:1px solid var(--line);
}
.detail-media .icon{ width:76px; height:76px; opacity:.92; }
.detail-media .thumb-photo{ border-radius:var(--radius-lg); }
.detail-media.has-photo{ cursor:zoom-in; }
.detail-media .thumb-photo.zoomable{ transition:transform .18s ease; will-change:transform; }
.detail-media.has-photo:hover .thumb-photo.zoomable{ transform:scale(2); }
.zoom-hint{
  position:absolute; bottom:12px; right:12px; display:flex; align-items:center; gap:6px;
  background:rgba(19,19,23,.72); color:#fff; border:none; border-radius:var(--radius-pill);
  padding:7px 13px; font-size:11.5px; font-weight:700; cursor:pointer; pointer-events:none;
  opacity:0; transition:opacity .15s;
}
.detail-media.has-photo:hover .zoom-hint{ opacity:1; }

.detail-download-row{
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:11.5px; color:var(--ink-faint); margin-top:2px;
}
.detail-download-row a{ color:var(--accent-dark); font-weight:700; text-decoration:none; }
.detail-download-row a:hover{ text-decoration:underline; }

.thumb-strip{ display:flex; gap:10px; flex-wrap:wrap; }
.thumb-strip-item{
  width:60px; height:60px; border-radius:var(--radius-sm); overflow:hidden; padding:0;
  border:2px solid transparent; cursor:pointer; background:var(--surface-2); flex-shrink:0;
}
.thumb-strip-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb-strip-item.is-selected{ border-color:var(--accent); }
.thumb-strip-item{ transition:border-color .15s, transform .15s; }
.thumb-strip-item:hover{ border-color:var(--ink-faint); transform:translateY(-2px); }

.detail-info h2{ font-size:25px; margin-bottom:6px; text-transform:none; letter-spacing:-.015em; }
.detail-desc{ color:var(--ink-soft); font-size:13.5px; line-height:1.65; margin:10px 0 22px; max-width:52ch; }

.field-group{ margin-bottom:20px; }
.field-label{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:9px; display:block; }

.variant-list{ display:flex; flex-direction:column; gap:8px; max-height:340px; overflow-y:auto; padding-right:2px; }
.variant-row{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  border:1.5px solid var(--line); background:var(--surface); border-radius:var(--radius);
  padding:10px 13px; cursor:pointer; transition:border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.variant-row:hover{ border-color:var(--ink-faint); transform:translateX(2px); }
.variant-row.is-selected{ border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent) inset; }
.variant-swatch{ width:22px; height:22px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 1px rgba(0,0,0,.08) inset; }
.variant-row-info{ display:flex; flex-direction:column; flex:1; min-width:0; }
.variant-row-name{ font-size:13.5px; font-weight:700; color:var(--ink); }
.variant-row-sku{ font-size:11px; color:var(--ink-faint); font-family:monospace; }
.variant-row-price{ font-size:13.5px; font-weight:800; color:var(--ink); white-space:nowrap; }

.price-row{ display:flex; align-items:baseline; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.price-row .amount{ font-size:34px; font-weight:900; font-family:var(--font-display); letter-spacing:-.01em; color:var(--accent-dark); }
.price-row .sku{ font-size:12px; color:var(--ink-faint); font-family:monospace; }

.buy-box{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:20px 22px; margin-bottom:22px;
}

.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; padding:5px 11px; border-radius:var(--radius-pill); text-transform:uppercase; letter-spacing:.03em; }
.badge-success{ background:var(--success-soft); color:var(--success); }
.badge-warning{ background:var(--warning-soft); color:var(--warning); }
.badge-danger{ background:var(--danger-soft); color:var(--danger); }
.badge-info{ background:var(--info-soft); color:var(--info); }
.badge-neutral{ background:var(--surface-2); color:var(--ink-soft); }

.qty-stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:var(--radius-pill); background:var(--surface); }
.qty-stepper button{ width:34px; height:34px; border:none; background:none; cursor:pointer; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background .15s, color .15s; }
.qty-stepper button:hover:not(:disabled){ color:var(--ink); background:var(--surface-2); }
.qty-stepper button:disabled{ opacity:.3; cursor:not-allowed; }
.qty-stepper .qty-value{ min-width:30px; text-align:center; font-weight:800; font-size:13.5px; }

.detail-actions{ display:flex; align-items:center; gap:14px; margin-top:24px; flex-wrap:wrap; }
.detail-actions .btn{ text-decoration:none; }

.signin-cta{ margin-top:14px; }
.signin-cta p{ font-size:13px; line-height:1.6; color:var(--ink-soft); }
.signin-cta p strong{ color:var(--ink); }

a.top-action{ text-decoration:none; }

.related-section{ margin-top:40px; }
.related-heading{
  display:flex; align-items:center; gap:9px; font-size:16px; text-transform:none;
  letter-spacing:-.005em; margin-bottom:16px; color:var(--ink);
}
.related-heading .icon{ color:var(--accent-dark); }
.related-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; }
.related-card{ cursor:pointer; }

/* -------------------------------- lightbox ---------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center;
  background:rgba(10,10,12,.92);
}
.lightbox.is-open{ display:flex; }
.lightbox-img{ max-width:min(880px,86vw); max-height:78vh; object-fit:contain; border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.lightbox-close{
  position:absolute; top:20px; right:20px; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.1); border:none; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{ background:rgba(255,255,255,.2); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.1); border:none; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-nav:hover{ background:rgba(255,255,255,.2); }
.lightbox-prev{ left:20px; }
.lightbox-next{ right:20px; }
.lightbox-caption{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.75); font-size:13px; font-weight:600; }

/* ------------------------ collection gallery slider ---------------------
   Same slider used by the authenticated admin/customer/rep Shop's own
   collection-detail page (app/admin/admin.css & app/portal/portal.css) --
   ported here so the PUBLIC collection-detail page (paintCatalogPageDetail
   in app.js) shows the identical gallery: the collection's own curated main
   photo first, then every member's own photo. */
.shop-gallery-slider {
  position: relative;
  margin: 16px 0 20px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.shop-gallery-track { display: flex; transition: transform .3s ease; }
.shop-gallery-slide { flex: 0 0 100%; max-width: 100%; }
.shop-gallery-slide img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
  background: var(--surface-2);
  cursor: pointer;
}
.shop-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(20, 16, 10, .18);
}
.shop-gallery-nav:hover { background: #fff; }
.shop-gallery-nav.prev { left: 12px; }
.shop-gallery-nav.next { right: 12px; }

.shop-gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-bottom: 2px;
  overflow-x: auto;
}
.shop-gallery-thumb {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface-2);
  opacity: .65;
  transition: opacity .15s ease, border-color .15s ease;
}
.shop-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-gallery-thumb:hover { opacity: 1; }
.shop-gallery-thumb.is-active { border-color: var(--accent); opacity: 1; }

@media (max-width: 640px) {
  .shop-gallery-slide img { height: 220px; }
  .shop-gallery-thumb { width: 52px; height: 52px; }
}
@media (min-width: 1000px) {
  .shop-gallery-slide img { height: 460px; }
  .shop-gallery-nav { width: 44px; height: 44px; }
  .shop-gallery-thumb { width: 76px; height: 76px; }
}

/* ---------------------------- provider popup ---------------------------- */
.popup-overlay{
  position:fixed; inset:0; z-index:250; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(10,10,12,.6); backdrop-filter:blur(2px);
}
.popup-overlay.is-open{ display:flex; animation:popupFadeIn .2s ease; }
@keyframes popupFadeIn{ from{ opacity:0; } to{ opacity:1; } }
.popup-card{
  position:relative; width:100%; max-width:400px; max-height:92vh; overflow-y:auto;
  background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:32px 28px 26px;
}
.popup-close{
  /* Fixed (not absolute) so it stays put over the backdrop, outside the
     card, rather than scrolling away with the card's own overflow-y:auto
     content -- .popup-overlay's backdrop-filter gives fixed descendants a
     viewport-sized containing block, so this still pins to the screen
     corner even though it's nested inside the overlay. */
  position:fixed; top:18px; right:18px; z-index:2; width:34px; height:34px; border-radius:50%;
  border:none; background:var(--surface-2); color:var(--ink-soft); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s;
  box-shadow:var(--shadow-md);
}
.popup-close:hover{ background:var(--line); color:var(--ink); }
.popup-title{ font-size:21px; text-align:center; text-transform:none; letter-spacing:-.01em; margin-bottom:8px; }
.popup-sub{ font-size:13px; color:var(--ink-soft); text-align:center; line-height:1.55; margin-bottom:22px; }
.popup-consent{
  display:flex; align-items:flex-start; gap:9px; font-size:12px; color:var(--ink-soft);
  line-height:1.5; margin:4px 0 18px; cursor:pointer;
}
.popup-consent input{ margin-top:2px; flex-shrink:0; accent-color:var(--accent); width:15px; height:15px; }

/* ------------------------ associate item quick view ----------------------- */
.qv-media{
  width:100%; aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--surface-2); color:var(--ink-faint);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.qv-media img{ width:100%; height:100%; object-fit:cover; }

/* --------------------------------- cart view -------------------------------- */
.cart-layout{ display:grid; grid-template-columns:1fr 320px; gap:26px; align-items:flex-start; }
.cart-list{ display:flex; flex-direction:column; gap:12px; }
.cart-item{
  display:grid; grid-template-columns:56px 1fr auto auto auto; gap:16px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px;
}
.cart-thumb{ width:56px; height:56px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:#fff; position:relative; overflow:hidden; }
.cart-thumb .icon{ width:22px; height:22px; }
.cart-thumb .thumb-photo{ border-radius:var(--radius-sm); }
.cart-item-name{ font-weight:700; font-size:14px; }
.cart-item-meta{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.cart-item-meta span{ font-family:monospace; }
.cart-item-price{ font-weight:800; font-size:13.5px; text-align:right; min-width:70px; }
.cart-item-remove{ color:var(--ink-faint); background:none; border:none; cursor:pointer; padding:6px; border-radius:50%; }
.cart-item-remove:hover{ color:var(--danger); background:var(--danger-soft); }

.summary-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px; position:sticky; top:88px;
}
.summary-card h3{ font-size:15px; margin-bottom:16px; text-transform:uppercase; letter-spacing:.02em; }
.summary-row{ display:flex; justify-content:space-between; font-size:13px; color:var(--ink-soft); padding:7px 0; }
.summary-row.total{ font-size:16px; font-weight:800; color:var(--ink); border-top:1px solid var(--line); margin-top:8px; padding-top:14px; }
.summary-note{ display:flex; gap:8px; align-items:flex-start; background:var(--info-soft); color:var(--info); padding:11px 13px; border-radius:var(--radius-sm); font-size:12px; margin:16px 0; }
.summary-note .icon{ width:15px; height:15px; margin-top:1px; flex-shrink:0; }

/* --------------------------------- customer view ----------------------------- */
.customer-grid{ display:grid; grid-template-columns:1fr 340px; gap:26px; align-items:flex-start; }
.customer-list{ display:flex; flex-direction:column; gap:10px; }
.customer-card{
  display:flex; align-items:center; gap:14px; background:var(--surface);
  border:1.5px solid var(--line); border-radius:var(--radius); padding:14px 16px; cursor:pointer;
}
.customer-card:hover{ border-color:var(--ink-faint); }
.customer-card.is-selected{ border-color:var(--accent); background:var(--accent-soft); }
.customer-avatar{ width:38px; height:38px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:var(--ink-soft); flex-shrink:0; }
.customer-card.is-selected .customer-avatar{ background:var(--accent); color:var(--accent-ink); }
.customer-name{ font-weight:700; font-size:13.5px; }
.customer-email{ font-size:12px; color:var(--ink-faint); }
.customer-check{ margin-left:auto; color:var(--accent-dark); opacity:0; }
.customer-card.is-selected .customer-check{ opacity:1; }

.new-customer-card{ border:1.5px dashed var(--line); border-radius:var(--radius); padding:16px; background:var(--surface); }
.form-row{ margin-bottom:12px; }
.form-row label{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); display:block; margin-bottom:6px; }
.form-row input{
  width:100%; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px;
  font-size:13.5px; font-family:inherit; outline:none; background:var(--bg);
}
.form-row input:focus{ border-color:var(--accent); background:var(--surface); }

/* ---------------------------------- checkout -------------------------------- */
.review-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; margin-bottom:18px; }
.review-card-head{ display:flex; align-items:center; gap:9px; margin-bottom:16px; }
.review-card-head .icon{ color:var(--accent-dark); }
.review-card h3{ font-size:14px; text-transform:uppercase; letter-spacing:.03em; }
.review-card-count{
  font-size:11px; font-weight:800; color:var(--ink-faint); background:var(--surface-2);
  padding:2px 9px; border-radius:var(--radius-pill); margin-left:auto;
}
.review-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:4px; }
.review-field{ }
.review-field .k{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:800; margin-bottom:4px; }
.review-field .v{ font-size:14px; font-weight:700; }

/* Associate Items table -- a data-grid (SKU/description/dimensions/color/
   material/inventory/photos columns) matching the AmpTab catalogue table
   layout vendors already know from the legacy portal, rather than a card grid. */
.assoc-table-wrap{ overflow-x:auto; }
table.assoc-table{ min-width:740px; }
.assoc-sku-cell{ font-size:11.5px; color:var(--ink-soft); font-family:monospace; white-space:nowrap; }
.assoc-name{
  font-size:13px; font-weight:700; color:var(--ink); background:none; border:none;
  padding:0; text-align:left; cursor:default; max-width:200px;
}
button.assoc-name.is-clickable{ cursor:pointer; }
button.assoc-name.is-clickable:hover{ color:var(--accent-dark); text-decoration:underline; }
.assoc-dim-cell{ font-size:12.5px; color:var(--ink-soft); white-space:nowrap; }
.assoc-thumb{
  width:34px; height:34px; border-radius:8px; overflow:hidden; padding:0; border:none; flex-shrink:0;
  background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
  cursor:pointer; transition:background .15s, color .15s;
}
.assoc-thumb:hover:not(:disabled){ background:var(--accent-soft); color:var(--accent-dark); }
.assoc-thumb:disabled{ cursor:not-allowed; opacity:.4; }
.assoc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

table.order-table{ width:100%; border-collapse:collapse; font-size:13px; }
table.order-table th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); padding:8px 6px; border-bottom:1px solid var(--line); font-weight:800; }
table.order-table td{ padding:12px 6px; border-bottom:1px solid var(--line-soft); }
table.order-table tr:last-child td{ border-bottom:none; }
.order-table .prod-cell{ display:flex; align-items:center; gap:10px; }
.mini-thumb{ width:34px; height:34px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; position:relative; overflow:hidden; }
.mini-thumb .icon{ width:15px; height:15px; }
.mini-thumb .thumb-photo{ border-radius:7px; }

.issue-banner{ display:flex; gap:10px; align-items:flex-start; background:var(--warning-soft); color:var(--warning); padding:13px 15px; border-radius:var(--radius); margin-bottom:18px; font-size:13px; }
.issue-banner ul{ margin-top:6px; padding-left:18px; list-style:disc; }

/* --------------------------------- confirmation ------------------------------ */
.confirm-wrap{ max-width:560px; margin:20px auto 0; text-align:center; }
.confirm-icon{
  width:72px; height:72px; border-radius:50%; background:var(--success-soft); color:var(--success);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
}
.confirm-icon .icon{ width:34px; height:34px; }
.confirm-wrap h2{ font-size:23px; margin-bottom:8px; text-transform:uppercase; letter-spacing:.01em; }
.confirm-wrap > p{ color:var(--ink-soft); font-size:13.5px; margin-bottom:24px; }
.so-number{ font-family:monospace; font-size:15px; font-weight:800; background:var(--surface-2); padding:3px 10px; border-radius:6px; }
.lifecycle{ display:flex; justify-content:center; gap:0; margin:26px 0 30px; }
.confirm-actions{ display:flex; gap:12px; justify-content:center; }

/* ----------------------------------- orders ---------------------------------- */
.order-row{
  display:flex; align-items:center; gap:16px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px; margin-bottom:10px;
}
.order-row .oid{ font-family:monospace; font-weight:800; font-size:13px; }
.order-row .ocust{ font-size:12.5px; color:var(--ink-soft); }
.order-row .ometa{ margin-left:auto; text-align:right; }
.order-row .ototal{ font-weight:800; font-size:14px; }
.order-row .odate{ font-size:11.5px; color:var(--ink-faint); }

/* ------------------------------------ toasts ---------------------------------- */
.toast-stack{ position:fixed; bottom:22px; right:22px; display:flex; flex-direction:column; gap:10px; z-index:100; }
.toast{
  display:flex; align-items:center; gap:10px; background:var(--brand-dark); color:#fff;
  padding:13px 18px; border-radius:var(--radius); box-shadow:var(--shadow-lg);
  font-size:13px; font-weight:600; min-width:260px; max-width:360px;
  animation:toastIn .25s ease;
}
.toast.is-error{ background:var(--danger); }
.toast.is-success{ background:var(--success); }
.toast .icon{ flex-shrink:0; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ------------------------------------- footer ----------------------------------- */
.site-footer{ background:var(--brand-dark); color:rgba(255,255,255,.7); margin-top:40px; }
/* gold hairline + diamond along the footer's top edge */
.site-footer{ position:relative; }
.site-footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
}
.site-footer::after{
  content:""; position:absolute; left:50%; top:0; width:14px; height:14px; border-radius:3px;
  transform:translate(-50%,-50%) rotate(45deg); background:var(--accent);
  box-shadow:0 0 0 5px var(--brand-dark), 0 0 0 6px rgba(211,160,52,.5);
}

.site-footer{
  background:
    radial-gradient(ellipse 50% 70% at 0% 0%, rgba(211,160,52,.10), transparent 70%),
    radial-gradient(ellipse 45% 70% at 100% 100%, rgba(122,22,32,.28), transparent 70%),
    #0f0f13;
}
/* faint dot grid over the footer, fading out downwards */
.footer-glow{
  position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:radial-gradient(circle, #fff 1px, transparent 1px); background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 85%); mask-image:linear-gradient(180deg, #000, transparent 85%);
}
.site-footer > .footer-top, .site-footer > .footer-inner, .site-footer > .footer-bottom{ position:relative; }

.footer-top{
  max-width:var(--page-max); margin:0 auto; padding:46px 28px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-top-brand{ display:flex; align-items:center; gap:16px; }
.footer-top-brand .brand-logo{ height:46px; border-radius:10px; }
.footer-top-brand strong{ display:block; color:#fff; font-family:var(--font-display); font-size:17px; letter-spacing:.02em; }
.footer-top-brand span{ display:block; font-size:12.5px; color:rgba(255,255,255,.5); margin-top:2px; }

.footer-inner{
  max-width:var(--page-max); margin:0 auto; padding:40px 28px 38px;
  display:grid; grid-template-columns:1.35fr 1fr 1fr 1.25fr; gap:44px;
}
.footer-brand{ display:flex; flex-direction:column; align-items:flex-start; }
.footer-blurb{ font-size:13.5px; line-height:1.75; color:rgba(255,255,255,.55); max-width:38ch; }
.footer-heading{
  position:relative; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  color:#fff; margin-bottom:20px; padding-bottom:12px;
}
.footer-heading::after{
  content:""; position:absolute; left:0; bottom:0; width:28px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--accent), transparent);
}
.footer-col{ display:flex; flex-direction:column; align-items:flex-start; }
.footer-link{
  display:flex; align-items:center; gap:8px; background:none; border:none; color:rgba(255,255,255,.6);
  font-size:13.5px; padding:6px 0; cursor:pointer; text-align:left; font-weight:500; text-decoration:none;
  font-family:inherit; transition:color .18s;
}
.footer-link span{ position:relative; transition:transform .2s ease; }
.footer-link:not(.footer-link-more) span::before{
  content:""; position:absolute; left:-14px; top:50%; width:6px; height:6px; border-radius:50%;
  background:var(--accent); transform:translateY(-50%) scale(0); transition:transform .2s ease;
}
.footer-link:hover{ color:#fff; }
.footer-link:not(.footer-link-more):hover span{ transform:translateX(14px); }
.footer-link:not(.footer-link-more):hover span::before{ transform:translateY(-50%) scale(1); }
.footer-link-more{ color:var(--accent); font-weight:700; margin-top:6px; }
.footer-link-more:hover{ color:var(--accent); }
.footer-link-more .icon{ transition:transform .2s; }
.footer-link-more:hover .icon{ transform:translateX(4px); }

.footer-hours{
  margin-top:20px; width:100%; max-width:300px; padding:14px 16px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
}
.footer-hours-title{ display:flex; align-items:center; gap:7px; color:var(--accent); font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; }
.footer-hours-row{ display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:4px 0; color:rgba(255,255,255,.7); }
.footer-hours-row span:last-child{ color:#fff; font-weight:600; }

.footer-contact{
  display:flex; align-items:center; gap:12px; width:100%; padding:9px 0;
  color:#fff; text-decoration:none; font-size:13.5px; font-weight:600;
}
.footer-contact-ic{
  width:38px; height:38px; flex-shrink:0; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(211,160,52,.12); color:var(--accent); border:1px solid rgba(211,160,52,.2);
  transition:background .2s, color .2s, transform .2s;
}
.footer-contact:hover .footer-contact-ic{ background:var(--accent); color:var(--accent-ink); transform:translateY(-2px); }
.footer-contact > span:last-child{ display:flex; flex-direction:column; min-width:0; overflow-wrap:anywhere; }
.footer-contact small{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.footer-whatsapp{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:9px 16px; border-radius:var(--radius-pill);
  background:rgba(37,211,102,.12); color:#4ade80; border:1px solid rgba(37,211,102,.25);
  font-size:13px; font-weight:700; text-decoration:none; transition:background .2s;
}
.footer-whatsapp:hover{ background:rgba(37,211,102,.22); }

.footer-social{ display:flex; flex-wrap:wrap; gap:8px; }
.social-badge{
  width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:rgba(255,255,255,.7);
  text-decoration:none; transition:background .2s, color .2s, transform .2s, border-color .2s;
}
.social-badge:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); transform:translateY(-3px); }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  max-width:var(--page-max); margin:0 auto; padding:18px 28px 22px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:12.5px; color:rgba(255,255,255,.42);
}
.footer-legal{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.footer-legal-link{
  background:none; border:none; cursor:pointer; padding:0; font:inherit;
  font-size:12.5px; color:rgba(255,255,255,.5); text-decoration:none; transition:color .15s;
}
.footer-legal-link:hover{ color:var(--accent); }
.footer-top-btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-family:inherit;
  padding:8px 14px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.75);
  font-size:12.5px; font-weight:600; transition:border-color .2s, color .2s;
}
.footer-top-btn .icon{ transform:rotate(180deg); }
.footer-top-btn:hover{ border-color:var(--accent); color:var(--accent); }

@media (max-width:980px){
  .footer-inner{ grid-template-columns:1fr 1fr; gap:36px 28px; }
}
@media (max-width:560px){
  .footer-inner{ gap:32px 18px; }
  .footer-brand, .footer-inner > .footer-col:last-child{ grid-column:1 / -1; }
  .footer-top{ flex-direction:column; align-items:flex-start; }
  .footer-top-brand .brand-logo{ height:36px; }
  .footer-top-brand strong{ font-size:15.5px; }
}

/* -------------------------------------- misc ----------------------------------- */
.hr{ height:1px; background:var(--line); border:none; margin:22px 0; }
.text-muted{ color:var(--ink-soft); }
.mono{ font-family:monospace; }

/* ----------------------- content pages (About / Contact / Shipping / Wholesale) ----------------------- */
.cp-hero{
  margin:-26px calc(50% - 50vw) 30px; padding:56px 24px;
  background:radial-gradient(1100px 300px at 20% 0%, rgba(211,160,52,.14), transparent 60%), var(--brand-dark);
  color:#fff; text-align:center;
}
.cp-hero-inner{ max-width:760px; margin:0 auto; }
.cp-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); }
.cp-hero h1{ font-size:clamp(26px,4.4vw,40px); color:#fff; margin:12px 0 0; letter-spacing:-.02em; }
.cp-hero p{ color:rgba(255,255,255,.72); font-size:14.5px; line-height:1.65; margin:14px auto 0; max-width:56ch; }

.content-page{ max-width:940px; margin:0 auto; }
.cp-lead{ font-size:16px; line-height:1.7; color:var(--ink-soft); max-width:64ch; margin-bottom:30px; }

/* Plain legal/policy copy (renderPrivacy) -- the base reset zeroes p/ul
   margins and strips list bullets everywhere else, so this page needs its
   own readable paragraph/list rhythm. */
.legal-content{ max-width:74ch; font-size:14.5px; line-height:1.75; color:var(--ink-soft); }
.legal-content .cp-h2{ color:var(--ink); margin-top:34px; }
.legal-content p{ margin:0 0 16px; }
.legal-content ul{ list-style:disc; padding-left:22px; margin:0 0 16px; }
.legal-content li{ margin-bottom:6px; }
.legal-content a{ color:var(--accent-dark); }
.legal-content strong{ color:var(--ink); }
.cp-h2{ font-size:20px; margin:38px 0 16px; }

/* -------------------------------- FAQ accordion --------------------------- */
.faq-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:34px; }
.faq-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:4px 22px; transition:border-color .15s;
}
.faq-item[open]{ border-color:var(--accent); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:18px 0;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-weight:700; font-size:14.5px; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .icon{ color:var(--ink-faint); transition:transform .2s ease; flex-shrink:0; transform:rotate(90deg); }
.faq-item[open] summary .icon{ transform:rotate(-90deg); }
.faq-item p{ margin:0 0 20px; color:var(--ink-soft); font-size:13.5px; line-height:1.65; }

.cp-grid{ display:grid; gap:16px; margin-bottom:8px; }
.cp-grid.cp-2{ grid-template-columns:repeat(2,1fr); }
.cp-grid.cp-3{ grid-template-columns:repeat(3,1fr); }
.cp-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px 20px; box-shadow:var(--shadow-sm);
}
.cp-card .icon{ color:var(--accent); margin-bottom:12px; }
.cp-card h3{ font-size:15px; margin-bottom:7px; }
.cp-card p{ font-size:13px; line-height:1.6; color:var(--ink-soft); }

.cp-chips{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:8px; }
.cp-chip{
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:var(--radius-pill); padding:9px 16px; font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  transition:all .15s;
}
.cp-chip:hover{ border-color:var(--accent); background:var(--accent-soft); }

.cp-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:6px 0 8px; }
.cp-step{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px 18px; }
.cp-step-n{
  display:inline-flex; width:30px; height:30px; border-radius:50%; align-items:center; justify-content:center;
  background:var(--brand-dark); color:#fff; font-weight:800; font-size:13px; margin-bottom:12px;
}
.cp-step h3{ font-size:14px; margin-bottom:6px; }
.cp-step p{ font-size:12.5px; line-height:1.55; color:var(--ink-soft); }

.cp-cta{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--brand-dark); color:#fff; border-radius:var(--radius-lg); padding:26px 28px; margin-top:34px;
}
.cp-cta h2{ font-size:19px; color:#fff; }
.cp-cta p{ font-size:13.5px; color:rgba(255,255,255,.66); margin-top:5px; }
.cp-cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.cp-contact{ display:grid; grid-template-columns:1fr 1.1fr; gap:24px; align-items:start; }
.cp-contact-cards{ display:flex; flex-direction:column; gap:10px; }
.cp-info{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:15px 16px;
  color:var(--ink); transition:border-color .15s, transform .15s;
}
a.cp-info:hover{ border-color:var(--accent); transform:translateX(2px); }
.cp-info .icon{ color:var(--accent); flex-shrink:0; }
.cp-info span{ display:block; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); }
.cp-info strong{ display:block; font-size:13.5px; margin-top:2px; line-height:1.45; }

.cp-contact-form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm); }
.cp-contact-form h2{ font-size:17px; margin-bottom:16px; }
.cp-field{ margin-bottom:12px; }
.cp-field label{ display:block; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:6px; }
.cp-field input, .cp-field textarea{
  width:100%; font:inherit; font-size:13.5px; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); color:var(--ink);
}
.cp-field input:focus, .cp-field textarea:focus{ outline:none; border-color:var(--accent); }
.cp-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cp-form-note{ font-size:11.5px; color:var(--ink-faint); margin-top:10px; text-align:center; }

.cp-map{ margin-top:24px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); }
.cp-map iframe{ display:block; width:100%; height:320px; border:0; }

.cp-field select{
  width:100%; font:inherit; font-size:13.5px; padding:10px 12px; appearance:none;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%237a746a" stroke-width="2.4" stroke-linecap="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 12px center;
  background-size:13px; color:var(--ink); cursor:pointer;
}
.cp-field select:focus{ outline:none; border-color:var(--accent); }

.dealer-apply{ max-width:760px; }
.dealer-apply .review-card{ margin-bottom:20px; }
.dealer-apply > form > .btn-secondary{ display:flex; margin:-6px 0 20px; }
.dealer-subhead{
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-dark);
  margin:18px 0 10px; padding-top:14px; border-top:1px dashed var(--line);
}
.dealer-apply .review-card > .dealer-subhead:first-of-type{ border-top:0; padding-top:0; margin-top:2px; }

.cp-checkbox-group{ display:flex; flex-wrap:wrap; gap:8px 18px; padding:2px 0 4px; }
.cp-checkbox{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink); cursor:pointer; }
.cp-checkbox input{ accent-color:var(--accent); width:15px; height:15px; flex-shrink:0; }

.dealer-decision{
  display:flex; align-items:center; gap:9px; margin:6px 0 14px; padding:12px 14px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); font-size:13.5px; font-weight:600;
}

.dealer-block{ border-color:var(--accent); }

.cp-field input[type="file"]{
  padding:8px 10px; font-size:12.5px; background:var(--bg); cursor:pointer;
}
.cp-field input[type="file"]::file-selector-button{
  font:inherit; font-size:12px; font-weight:700; padding:6px 12px; margin-right:10px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; color:var(--ink); cursor:pointer;
}

@media (max-width: 900px){
  .cp-grid.cp-2, .cp-grid.cp-3{ grid-template-columns:1fr 1fr; }
  .cp-steps{ grid-template-columns:1fr 1fr; }
  .cp-contact{ grid-template-columns:1fr; }
}

@media (max-width: 980px){
  .strip-contact a:nth-child(2){ display:none; }
  .nav-toggle{ display:flex; }
  .topbar{ flex-wrap:wrap; gap:12px; padding:0 16px; }
  .topbar .brand{ padding:11px 0; }
  .nav-tabs{
    order:3; flex-basis:100%; flex-direction:column; align-items:stretch; gap:3px;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
    border-top:1px solid rgba(255,255,255,.08); border-radius:0;
    background:none; border-left:none; border-right:none; border-bottom:none;
    padding:8px 0;
  }
  .topbar.nav-open .nav-tabs{ max-height:420px; }
  .nav-tab{ padding:13px 14px; text-transform:none; letter-spacing:0; font-size:14px; border-radius:12px; justify-content:flex-start; }
  .nav-tab::after{ display:none; }
  .nav-tab.is-active{ color:var(--accent); background:rgba(211,160,52,.12); }
  .nav-tab-cta{ margin:6px 0 0; flex-direction:row; justify-content:center !important; }
  .topbar-actions{ margin-left:auto; }
  .top-action span{ display:none; }
  .top-action{ padding:8px; }
}

@media (max-width: 860px){
  .cart-layout, .customer-grid{ grid-template-columns:1fr; }
  .detail-media{ height:min(50vh,420px); }
  .summary-card{ position:static; }
  .topbar-strip .strip-inner{ padding:6px 16px; }
  .strip-social a:nth-child(n+4){ display:none; }
  .cp-hero{ margin:-18px calc(50% - 50vw) 24px; padding:40px 18px; }
  .cp-grid.cp-2, .cp-grid.cp-3{ grid-template-columns:1fr; }
  .cp-steps{ grid-template-columns:1fr; }
  .cp-row{ grid-template-columns:1fr; }
  .cp-cta{ flex-direction:column; align-items:flex-start; text-align:left; }
  main{ padding:18px 16px 50px; }
  .cart-item{ grid-template-columns:44px 1fr; grid-template-rows:auto auto; row-gap:8px; }
  .cart-item-price{ text-align:left; }
  .hero-slider{ margin:-18px calc(50% - 50vw) 22px; }
  .hero-slide{ padding:40px 18px 32px; min-height:min(56vh, 380px); }
  .hero-stats{ gap:22px; margin-top:24px; }
  .hero-stat .v{ font-size:24px; }
  .hero-nav{ width:36px; height:36px; }
  .hero-nav.prev{ left:10px; }
  .hero-nav.next{ right:10px; }
  .hero-slide-decor .icon{ width:160px; height:160px; }
  .footer-top{ padding:40px 16px 24px; }
  .footer-inner{ padding:32px 16px 28px; }
  .footer-bottom{ padding:16px 16px 22px; }
}

/* Dealer application: dial-code phone fields + address type-ahead */
/* Flag glyphs only (unicode-range) so Windows shows real flags, not letters. */
@font-face{
  font-family:"Twemoji Country Flags";
  unicode-range:U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src:url('https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1.8/dist/TwemojiCountryFlags.woff2') format('woff2');
  font-display:swap;
}
.cp-field select.flag-select{ font-family:"Twemoji Country Flags", var(--font-body); }
.phone-input{ display:flex; gap:8px; }
.phone-input select{ flex:0 0 126px; width:126px; }
.phone-input input{ flex:1; min-width:0; }
.addr-suggest{ position:relative; }
.addr-suggest-list{
  position:absolute; left:0; right:0; top:100%; z-index:30; margin:4px 0 0; padding:4px; list-style:none;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:0 10px 28px rgba(0,0,0,.14); max-height:280px; overflow-y:auto;
}
.addr-suggest-list li{
  display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border-radius:var(--radius-sm);
  cursor:pointer; color:var(--ink); font-size:13.5px;
}
.addr-suggest-list li svg{ flex:0 0 auto; margin-top:2px; color:var(--ink-soft); }
.addr-suggest-list li span{ display:flex; flex-direction:column; min-width:0; }
.addr-suggest-list li strong{ font-weight:600; }
.addr-suggest-list li small{ font-size:12px; color:var(--ink-soft); }
.addr-suggest-list li:hover, .addr-suggest-list li.is-active{ background:var(--line); }
.dealer-apply .dealer-add-contact{ margin-bottom:20px; }
.dealer-remove{
  margin-left:auto; background:none; border:0; padding:4px 6px; cursor:pointer;
  font:inherit; font-size:12px; font-weight:700; color:var(--ink-soft); text-decoration:underline;
}
.dealer-remove:hover{ color:var(--ink); }
.dealer-subhead-row{ display:flex; align-items:center; }
.dealer-ship-block + .dealer-ship-block{ border-top:1px solid var(--line); margin-top:8px; padding-top:4px; }
/* Admin-configured required dealer-form fields: red asterisk + missing highlight */
.cp-field.is-required > label::after{ content:" *"; color:var(--danger); font-weight:800; }
.cp-field.is-invalid input:not([type=checkbox]):not([type=file]), .cp-field.is-invalid select:not([id$="-code"]), .cp-field.is-invalid textarea,
.cp-field.is-invalid input[type=file], .cp-field.is-invalid .cp-checkbox-group{ border-color:var(--danger); }
.cp-field.is-invalid .cp-checkbox-group{ border:1px solid var(--danger); border-radius:var(--radius-sm); padding:6px; }

/* ------------------------ home page: section bands ------------------------
   Every home section is a full-bleed band with the same vertical rhythm and
   its content held to main's --page-max column, so the page reads as one
   system. Colours alternate: hero (dark) -> warm -> plain -> warm -> dark CTA,
   which runs straight into the dark footer. */
.home-band{
  margin:0 calc(50% - 50vw);
  padding:80px max(28px, calc((100vw - var(--page-max)) / 2 + 28px));
  position:relative;
}
.home-band--plain{ background:var(--bg); }
.home-band--warm{
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(211,160,52,.13), transparent 70%),
    linear-gradient(180deg, #FFFDF8 0%, #FBF5EA 100%);
  border-top:1px solid #F0E6D3; border-bottom:1px solid #F0E6D3;
}
.home-band--dark{ color:#fff; }
.home-band > .home-section-head:first-child{ margin-top:0; }
.hero-slider.home-hero{ margin-bottom:0; }
.hero-slider.home-hero + .home-band{ border-top:none; }

/* collections sit straight on their band -- no boxed card around them */
.home-band .home-browse-panel{ background:none; border:none; box-shadow:none; padding:0; }
/* very large screens: keep the collections block from running edge to edge */
@media (min-width:1700px){ .home-band .home-browse-panel{ max-width:1500px; margin-left:auto; margin-right:auto; } }
.home-band .coll-grid{ margin-top:4px; }

/* How It Works cards: white on the warm band */
.home-band .home-steps{ margin-bottom:0; }
.home-band .home-steps .cp-step{ background:var(--surface); border-color:#EFE4D0; }

/* CTA: a floating dark card with breathing room above and below, so it
   reads as its own block instead of running straight into the footer. */
.home-band.home-cta-banner{
  margin:80px 0; border-radius:28px;
  padding:52px 56px;
  border:1px solid rgba(211,160,52,.28);
  box-shadow:0 0 0 8px rgba(211,160,52,.06), 0 40px 70px -34px rgba(58,20,20,.6);
}
body:has(#view-pages.is-active) main,
body:has(#view-pageDetail.is-active .home-band) main{ padding-bottom:0; }
body:has(#view-pages.is-active) .site-footer,
body:has(#view-pageDetail.is-active .home-band) .site-footer{ margin-top:0; }

/* Collection detail page: same bands as the home page, flush under its hero */
.cp-hero + .home-band{ margin-top:-30px; border-top:none; }
.cpd-band--gallery{ padding-top:36px; padding-bottom:56px; }
.cpd-band--gallery .back-link{ margin-bottom:6px; }
.cpd-band--gallery .shop-gallery-slider{ margin:10px 0 14px; border-color:#EFE4D0; box-shadow:var(--shadow-md); }
.cpd-band--gallery .shop-gallery-thumbs{ margin-top:0; }
.cpd-band--gallery .shop-gallery-thumb{ background:#F3EBDD; }
.cpd-band .product-grid{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
@media (min-width:1000px){ .cpd-band--gallery .shop-gallery-slide img{ height:560px; } }

@media (max-width:800px){
  .home-band{ padding:52px 16px; }
  .cp-hero + .home-band{ margin-top:-24px; }
  .cpd-band--gallery{ padding-top:24px; padding-bottom:36px; }
  .home-band.home-cta-banner{ margin:52px 0 56px; padding:36px 22px; border-radius:22px; }
}

/* ==========================================================================
   Hero slider motion: Ken Burns zoom/pan on each slide's video or photo,
   word-by-word title reveal, staggered blur-in for the rest, a pulsing CTA
   and a progress bar on the active dot. Driven by .is-current, which
   app.js's setupHeroSlider re-applies every time a slide comes in.
   ========================================================================== */
.hero-slider{ --hero-slide-ms:7000ms; }
.hero-slide-img{
  position:absolute; inset:0; background-size:cover; background-position:center;
  pointer-events:none;
}
.hero-media{ transform:scale(1.18); transform-origin:center; will-change:transform; }
.hero-slide.is-current .hero-media{ animation:heroKenBurns calc(var(--hero-slide-ms) + 1200ms) cubic-bezier(.25,.1,.25,1) both; }
.hero-slide:nth-child(even).is-current .hero-media{ animation-name:heroKenBurnsAlt; }
@keyframes heroKenBurns{
  0%  { transform:scale(1.32) translate3d(-3%, 2%, 0) rotate(.6deg); filter:brightness(.55) saturate(1.3); }
  18% { filter:brightness(1) saturate(1.1); }
  100%{ transform:scale(1.06) translate3d(2%, -1.5%, 0) rotate(0); filter:brightness(1) saturate(1); }
}
@keyframes heroKenBurnsAlt{
  0%  { transform:scale(1.32) translate3d(3%, -2%, 0) rotate(-.6deg); filter:brightness(.55) saturate(1.3); }
  18% { filter:brightness(1) saturate(1.1); }
  100%{ transform:scale(1.06) translate3d(-2%, 1.5%, 0) rotate(0); filter:brightness(1) saturate(1); }
}

/* sweeping light flash as a slide lands */
.hero-slide.is-current::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform:translateX(-100%);
  animation:heroSweep 1.4s .15s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes heroSweep{ to{ transform:translateX(100%); } }

/* text: hidden until the slide is current, then staggered in */
.hero-inner{ position:relative; z-index:2; }
.hero-word{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; }
.hero-word > span{ display:inline-block; transform:translateY(110%) rotate(6deg); opacity:0; }
.hero-slide.is-current .hero-word > span{
  animation:heroWordUp .9s cubic-bezier(.2,.9,.25,1.15) both;
  animation-delay:calc(.35s + var(--wi) * .09s);
}
@keyframes heroWordUp{
  0%  { transform:translateY(110%) rotate(6deg); opacity:0; }
  100%{ transform:translateY(0) rotate(0); opacity:1; }
}
.hero-anim{ opacity:0; }
.hero-slide.is-current .hero-anim{ animation:heroBlurIn 1s cubic-bezier(.2,.8,.2,1) both; }
.hero-slide.is-current .hero-eyebrow{ animation-name:heroEyebrowIn; animation-delay:.15s; }
.hero-slide.is-current .hero-sub{ animation-delay:.85s; }
.hero-slide.is-current .hero-cta{
  animation:heroBlurIn 1s 1.1s cubic-bezier(.2,.8,.2,1) both, heroCtaPulse 2.4s 2.2s ease-in-out infinite;
}
@keyframes heroBlurIn{
  0%  { opacity:0; transform:translateY(34px) scale(.96); filter:blur(10px); }
  100%{ opacity:1; transform:none; filter:blur(0); }
}
@keyframes heroEyebrowIn{
  0%  { opacity:0; transform:translateX(-40px); letter-spacing:.5em; filter:blur(6px); }
  100%{ opacity:1; transform:none; letter-spacing:inherit; filter:blur(0); }
}
@keyframes heroCtaPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(211,160,52,.55), 0 10px 28px rgba(0,0,0,.25); }
  50%    { box-shadow:0 0 0 14px rgba(211,160,52,0), 0 14px 34px rgba(0,0,0,.35); transform:translateY(-2px); }
}
/* growing accent line after the eyebrow */
.hero-eyebrow{ display:inline-flex; align-items:center; gap:12px; }
.hero-eyebrow::after{
  content:""; display:block; height:2px; width:0; background:var(--accent); border-radius:2px;
}
.hero-slide.is-current .hero-eyebrow::after{ animation:heroLine .9s .6s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes heroLine{ to{ width:56px; } }

/* active dot = progress bar for the slide's time on screen */
.hero-dot{ position:relative; overflow:hidden; }
.hero-dot.is-active{ background:rgba(255,255,255,.3); }
.hero-dot.is-active::after{
  content:""; position:absolute; inset:0; background:var(--accent); transform-origin:left;
  animation:heroDotFill var(--hero-slide-ms) linear forwards;
}
.hero-slider.is-paused .hero-dot.is-active::after,
.hero-slider.is-paused .hero-slide.is-current .hero-media{ animation-play-state:paused; }
@keyframes heroDotFill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

@media (prefers-reduced-motion: reduce){
  .hero-media, .hero-slide.is-current .hero-media{ animation:none; transform:none; }
  .hero-slide.is-current::before{ display:none; }
  .hero-word > span, .hero-anim{ opacity:1; transform:none; }
  .hero-slide.is-current .hero-word > span,
  .hero-slide.is-current .hero-anim,
  .hero-slide.is-current .hero-cta{ animation:none; }
}

/* ==========================================================================
   Inner pages (About / Wholesale / Shipping / FAQ / Contact / Privacy /
   Become a Dealer / collection detail): page banner + content blocks in the
   same gold-on-dark / warm-cream language as the home page and footer.
   ========================================================================== */

/* --- page banner --- */
.cp-hero{
  position:relative; overflow:visible; margin-bottom:56px; padding:64px 24px 78px;
  background:
    radial-gradient(ellipse 50% 90% at 10% 0%, rgba(211,160,52,.20), transparent 65%),
    radial-gradient(ellipse 45% 90% at 95% 100%, rgba(122,22,32,.45), transparent 70%),
    linear-gradient(160deg, #131317 0%, #17121a 55%, #22101a 100%);
}
.cp-hero-dots{
  position:absolute; inset:0; pointer-events:none; opacity:.06;
  background-image:radial-gradient(circle, #fff 1px, transparent 1px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 70% 100% at 50% 50%, #000, transparent 85%);
          mask-image:radial-gradient(ellipse 70% 100% at 50% 50%, #000, transparent 85%);
}
.cp-hero-inner{ position:relative; max-width:780px; }
.cp-crumbs{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
  padding:6px 14px 6px 10px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  font-size:12.5px; color:rgba(255,255,255,.55); max-width:100%;
}
.cp-crumbs button{
  display:inline-flex; align-items:center; gap:6px; border:none; background:none; padding:0; cursor:pointer;
  font:inherit; color:rgba(255,255,255,.75); transition:color .15s;
}
.cp-crumbs button:hover{ color:var(--accent); }
.cp-crumbs > .icon{ opacity:.5; }
.cp-crumbs span{ color:#fff; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-eyebrow{ display:flex; align-items:center; justify-content:center; gap:12px; }
.cp-eyebrow::before, .cp-eyebrow::after{ content:""; width:32px; height:1.5px; background:var(--accent); opacity:.7; }
.cp-hero h1{ font-size:clamp(30px,4.8vw,48px); line-height:1.1; margin:14px 0 0; letter-spacing:-.025em; }
.cp-hero p{ font-size:15.5px; color:rgba(255,255,255,.7); margin-top:16px; }
.cp-hero-divider{ position:absolute; left:0; right:0; bottom:0; height:0; }
.cp-hero-divider::before{
  content:""; position:absolute; left:50%; top:-1px; width:min(620px, 80vw); height:2px; transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, var(--accent) 35%, var(--accent) 65%, transparent);
}
.cp-hero-divider span{
  position:absolute; left:50%; top:0; width:16px; height:16px; border-radius:3px;
  transform:translate(-50%,-50%) rotate(45deg); background:var(--accent);
  box-shadow:0 0 0 5px var(--bg), 0 0 0 6px rgba(211,160,52,.45);
}
.cp-hero + .home-band{ margin-top:-56px; }

/* --- content column --- */
.content-page{ max-width:1080px; padding-bottom:30px; }
.cp-lead{
  position:relative; max-width:none; margin-bottom:36px; padding:24px 28px 24px 32px;
  font-size:16.5px; line-height:1.75; color:var(--ink);
  background:linear-gradient(135deg, #FFFDF8, #FBF4E6); border:1px solid #F0E6D3; border-radius:20px;
}
.cp-lead::before{
  content:""; position:absolute; left:0; top:20px; bottom:20px; width:4px; border-radius:0 4px 4px 0;
  background:linear-gradient(180deg, var(--accent), var(--accent-dark));
}
.cp-h2{
  display:flex; align-items:center; gap:12px;
  font-size:clamp(20px,2.4vw,26px); letter-spacing:-.015em; margin:52px 0 20px;
}
.cp-h2::before{ content:""; width:28px; height:3px; border-radius:3px; background:var(--accent); flex-shrink:0; }
.legal-content .cp-h2{ font-size:19px; margin-top:38px; }

/* --- feature cards --- */
.cp-grid{ gap:20px; }
.cp-card{
  position:relative; overflow:hidden; padding:28px 24px 26px; border-radius:20px; border-color:#EFE4D0;
  box-shadow:0 1px 2px rgba(60,40,10,.04), 0 10px 30px -20px rgba(60,40,10,.25);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.cp-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-dark));
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.cp-card:hover{ transform:translateY(-5px); border-color:rgba(211,160,52,.45); box-shadow:0 22px 44px -24px rgba(120,80,10,.4); }
.cp-card:hover::before{ transform:scaleX(1); }
.cp-card > .icon{
  width:52px; height:52px; padding:14px; box-sizing:border-box; border-radius:16px; margin-bottom:18px;
  background:linear-gradient(135deg, #FCF1DA, #F1DAAA); color:var(--accent-dark);
  transition:background .3s ease, color .3s ease;
}
.cp-card:hover > .icon{ background:linear-gradient(135deg, var(--accent), var(--accent-dark)); color:#fff; }
.cp-card h3{ font-size:16.5px; margin-bottom:8px; }
.cp-card p{ font-size:13.5px; line-height:1.7; }

/* --- category chips --- */
.cp-chips{ gap:10px; }
.cp-chip{ padding:11px 20px; border-color:#EADFCB; box-shadow:0 1px 2px rgba(60,40,10,.04); }
.cp-chip:hover{ border-color:var(--accent); background:var(--accent); color:var(--accent-ink); transform:translateY(-2px); }

/* --- numbered steps --- */
.cp-steps{ grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:20px; counter-reset:none; }
.cp-step{
  position:relative; padding:26px 22px 24px; border-radius:20px; border-color:#EFE4D0;
  box-shadow:0 1px 2px rgba(60,40,10,.04), 0 10px 30px -20px rgba(60,40,10,.25);
  transition:transform .3s ease, box-shadow .3s ease;
}
.cp-step:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(120,80,10,.4); }
.cp-step-n{
  width:42px; height:42px; font-size:15px; margin-bottom:16px;
  background:linear-gradient(135deg, var(--accent), var(--accent-dark)); color:#fff;
  box-shadow:0 0 0 5px #fff, 0 0 0 6px rgba(211,160,52,.3);
}
.cp-step h3{ font-size:16px; margin-bottom:8px; }
.cp-step p{ font-size:13.5px; line-height:1.65; }

/* --- closing call-to-action strip --- */
.cp-cta{
  position:relative; overflow:hidden; margin-top:56px; padding:36px 40px; border-radius:24px;
  background:
    radial-gradient(ellipse 55% 120% at 0% 0%, rgba(211,160,52,.24), transparent 60%),
    linear-gradient(120deg, var(--brand-dark) 0%, #3a1414 100%);
  border:1px solid rgba(211,160,52,.28);
  box-shadow:0 0 0 8px rgba(211,160,52,.06), 0 30px 60px -32px rgba(58,20,20,.6);
}
.cp-cta::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:radial-gradient(circle, #fff 1px, transparent 1px); background-size:20px 20px;
}
.cp-cta > *{ position:relative; }
.cp-cta h2{ font-size:clamp(20px,2.4vw,26px); letter-spacing:-.015em; }
.cp-cta p{ font-size:14.5px; color:rgba(255,255,255,.72); }
.cp-cta .btn{ padding:13px 24px; }

/* --- FAQ --- */
.faq-list{ gap:12px; max-width:860px; margin-left:auto; margin-right:auto; }
.faq-item{ border-radius:18px; padding:2px 24px; border-color:#EFE4D0; box-shadow:0 1px 2px rgba(60,40,10,.04); transition:border-color .2s, background .2s, box-shadow .2s; }
.faq-item:hover{ border-color:rgba(211,160,52,.5); }
.faq-item[open]{ background:linear-gradient(135deg, #FFFDF8, #FBF4E6); box-shadow:0 14px 34px -22px rgba(120,80,10,.4); }
.faq-item summary{ font-size:15.5px; padding:20px 0; }
.faq-item summary .icon{
  width:32px; height:32px; padding:9px; box-sizing:border-box; border-radius:50%;
  background:var(--surface-2); color:var(--ink-soft); transition:transform .25s ease, background .2s, color .2s;
}
.faq-item[open] summary .icon{ background:var(--accent); color:var(--accent-ink); }
.faq-item p{ font-size:14.5px; line-height:1.75; padding-right:40px; }
#view-faq .cp-cta{ max-width:860px; margin-left:auto; margin-right:auto; }

/* --- contact --- */
.cp-contact{ gap:28px; }
.cp-contact-cards{ gap:12px; }
.cp-info{ padding:16px 18px; border-radius:16px; border-color:#EFE4D0; gap:16px; box-shadow:0 1px 2px rgba(60,40,10,.04); }
.cp-info > .icon{
  width:46px; height:46px; padding:12px; box-sizing:border-box; border-radius:14px;
  background:linear-gradient(135deg, #FCF1DA, #F1DAAA); color:var(--accent-dark); transition:background .2s, color .2s;
}
a.cp-info:hover{ transform:translateX(4px); box-shadow:0 14px 30px -20px rgba(120,80,10,.4); }
a.cp-info:hover > .icon{ background:linear-gradient(135deg, var(--accent), var(--accent-dark)); color:#fff; }
.cp-info strong{ font-size:14.5px; }
.cp-contact-form{
  position:relative; overflow:hidden; padding:30px 28px; border-radius:22px; border-color:#EFE4D0;
  box-shadow:0 1px 2px rgba(60,40,10,.04), 0 30px 60px -34px rgba(60,40,10,.35);
}
.cp-contact-form::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--accent), var(--accent-dark));
}
.cp-contact-form h2{ font-size:21px; letter-spacing:-.01em; margin-bottom:20px; }
.cp-field input, .cp-field textarea, .cp-field select{ border-radius:12px; transition:border-color .15s, box-shadow .15s, background .15s; }
.cp-field input:not([type=checkbox]):not([type=file]):not([type=radio]){ min-height:46px; }
.cp-field input:focus, .cp-field textarea:focus, .cp-field select:focus{ background:#fff; box-shadow:0 0 0 4px rgba(211,160,52,.15); }
.cp-contact-form .btn-block{ height:48px; border-radius:12px; font-size:14.5px; }
.cp-map{ margin-top:32px; border-radius:22px; border-color:#EFE4D0; box-shadow:0 20px 44px -30px rgba(60,40,10,.4); }
.cp-map iframe{ height:380px; }

/* --- privacy / legal --- */
.legal-content{
  max-width:860px; margin:0 auto; padding:40px 44px; background:var(--surface);
  border:1px solid #EFE4D0; border-radius:22px; box-shadow:0 20px 44px -34px rgba(60,40,10,.35);
}
.legal-content > :first-child{ margin-top:0; }

@media (max-width:860px){
  .cp-hero{ padding:44px 18px 60px; margin-bottom:44px; }
  .cp-hero + .home-band{ margin-top:-44px; }
  .cp-crumbs{ margin-bottom:16px; }
  .cp-lead{ padding:20px 20px 20px 24px; font-size:15px; }
  .cp-cta{ padding:28px 22px; }
  .legal-content{ padding:26px 20px; }
  .faq-item{ padding:2px 18px; }
  .faq-item p{ padding-right:0; }
  .cp-map iframe{ height:300px; }
}
.cp-cta a.btn{ text-decoration:none; }
.cp-steps + .cp-grid, .cp-grid + .cp-steps{ margin-top:28px; }
@media (max-width:640px){
  .cp-step{ display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:start; padding:20px 18px; }
  .cp-step-n{ grid-row:1 / span 2; margin:2px 0 0; }
  .cp-step h3{ margin-top:2px; }
}
.cp-hero{ z-index:2; }

/* Footer social icons in each network's own brand colour */
.footer-social .social-badge{ color:#fff; border-color:transparent; box-shadow:0 6px 16px -8px rgba(0,0,0,.6); }
.footer-social .social-badge:hover{ color:#fff; border-color:transparent; transform:translateY(-3px) scale(1.06); filter:brightness(1.1); }
.social-badge--instagram{ background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important; }
.social-badge--facebook{ background:#1877F2 !important; }
.social-badge--youtube{ background:#FF0000 !important; }
.social-badge--tiktok{ background:#010101 !important; border-color:rgba(255,255,255,.18) !important; box-shadow:-2px -2px 0 -1px #25F4EE inset, 2px 2px 0 -1px #FE2C55 inset, 0 6px 16px -8px rgba(0,0,0,.6) !important; }
.social-badge--pinterest{ background:#E60023 !important; }
.social-badge--linkedin{ background:#0A66C2 !important; }
.social-badge--x{ background:#000 !important; border-color:rgba(255,255,255,.22) !important; }
.social-badge--whatsapp{ background:#25D366 !important; }
.social-badge--telegram{ background:#229ED9 !important; }

/* ==========================================================================
   Become a Dealer: side panel (steps / perks / help) + numbered form cards
   ========================================================================== */
.dealer-apply{ max-width:1120px; }
.dealer-apply form > .btn-secondary{ display:flex; margin:-6px 0 20px; }
.dealer-layout{ display:grid; grid-template-columns:290px minmax(0,1fr); gap:32px; align-items:start; }

/* --- side panel --- */
.dealer-aside{ position:sticky; top:calc(var(--site-header-h, 124px) - 30px); display:flex; flex-direction:column; gap:16px; }
.dealer-aside-card{
  background:var(--surface); border:1px solid #EFE4D0; border-radius:20px; padding:20px;
  box-shadow:0 1px 2px rgba(60,40,10,.04), 0 14px 34px -26px rgba(60,40,10,.35);
}
.dealer-aside-title{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-dark); margin-bottom:14px; }
.dealer-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; position:relative; }
.dealer-steps::before{ content:""; position:absolute; left:21px; top:22px; bottom:22px; width:2px; background:repeating-linear-gradient(180deg, #EADFCB 0 4px, transparent 4px 8px); }
.dealer-steps a{
  position:relative; display:flex; align-items:center; gap:12px; padding:8px 8px; border-radius:12px;
  text-decoration:none; color:var(--ink); transition:background .2s;
}
.dealer-steps a:hover{ background:#FBF6EC; }
.dealer-steps a > span{
  width:28px; height:28px; flex-shrink:0; border-radius:50%; margin-left:0;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
  background:#fff; color:var(--ink-soft); border:2px solid #EADFCB; transition:all .25s;
}
.dealer-steps strong{ display:block; font-size:13.5px; }
.dealer-steps small{ display:block; font-size:12px; color:var(--ink-faint); margin-top:1px; }
.dealer-steps a.is-active{ background:#FBF6EC; }
.dealer-steps a.is-active > span{ background:linear-gradient(135deg, var(--accent), var(--accent-dark)); color:#fff; border-color:transparent; box-shadow:0 0 0 4px rgba(211,160,52,.18); }

.dealer-aside-perks ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.dealer-aside-perks li{ display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; }
.dealer-aside-perks li .icon{
  width:30px; height:30px; padding:8px; box-sizing:border-box; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg, #FCF1DA, #F1DAAA); color:var(--accent-dark);
}
.dealer-aside-help{
  position:relative; overflow:hidden; display:flex; gap:12px; padding:18px; border-radius:20px; color:#fff;
  background:radial-gradient(ellipse 80% 120% at 0% 0%, rgba(211,160,52,.28), transparent 60%), linear-gradient(135deg, var(--brand-dark), #3a1414);
  border:1px solid rgba(211,160,52,.25);
}
.dealer-aside-help > div{ color:var(--accent); flex-shrink:0; padding-top:2px; }
.dealer-aside-help p{ font-size:13px; line-height:1.6; color:rgba(255,255,255,.72); }
.dealer-aside-help strong{ display:block; color:#fff; font-size:14px; margin-bottom:3px; }
.dealer-aside-help a{ color:var(--accent); font-weight:700; text-decoration:none; }
.dealer-aside-help a:hover{ text-decoration:underline; }

/* --- form cards --- */
.dealer-apply .review-card{
  padding:28px 28px 24px; border-radius:22px; border-color:#EFE4D0; margin-bottom:22px;
  box-shadow:0 1px 2px rgba(60,40,10,.04), 0 18px 40px -30px rgba(60,40,10,.35);
  scroll-margin-top:120px;
}
.dealer-section-head{
  align-items:flex-start !important; gap:14px !important;
  margin:-28px -28px 22px !important; padding:22px 28px 20px;
  background:linear-gradient(135deg, #FFFDF8, #FBF4E6); border-bottom:1px solid #F0E6D3;
  border-radius:22px 22px 0 0;
}
.dealer-section-head h3{ font-size:18px !important; text-transform:none !important; letter-spacing:-.01em !important; }
.dealer-section-head p{ font-size:13px; color:var(--ink-soft); margin-top:3px; line-height:1.5; }
.dealer-section-num{
  flex-shrink:0; width:42px; height:42px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--accent), var(--accent-dark)); color:#fff;
  font-family:var(--font-display); font-weight:900; font-size:15px; letter-spacing:-.02em;
  box-shadow:0 8px 18px -8px rgba(185,139,36,.7);
}
.dealer-section-ic{ margin-left:auto; color:var(--accent-dark); opacity:.55; padding-top:4px; }
.dealer-apply .dealer-block .review-card-head{ padding-bottom:14px; border-bottom:1px solid var(--line-soft); }
.dealer-apply .dealer-block .review-card-head h3{ font-size:15px; text-transform:none; letter-spacing:0; }

.dealer-subhead{
  display:flex; align-items:center; gap:10px; font-size:11.5px; letter-spacing:.12em;
  margin:26px 0 14px; padding-top:0; border-top:0;
}
.dealer-subhead::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, #EADFCB, transparent); }
.dealer-subhead-row .dealer-subhead::after{ display:none; }

.dealer-apply .dealer-add-contact{
  width:100%; justify-content:center; border-style:dashed; border-width:1.5px; border-color:#E2CFA6;
  background:#FFFDF8; color:var(--accent-dark); border-radius:16px; padding:14px; font-weight:700;
}
.dealer-apply .dealer-add-contact:hover:not(:disabled){ background:#FBF4E6; border-color:var(--accent); }
#db-additional-ship-block .dealer-add-contact{ margin-top:8px; }

.cp-checkbox-group{ gap:8px; }
.cp-checkbox-group .cp-checkbox{
  padding:8px 14px; border:1.5px solid var(--line); border-radius:var(--radius-pill); background:#FAFAF8;
  font-weight:600; transition:border-color .15s, background .15s;
}
.cp-checkbox-group .cp-checkbox:hover{ border-color:var(--accent); }
.cp-checkbox-group .cp-checkbox:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); }
.dealer-decision{
  margin:18px 0 4px; padding:14px 16px; border-radius:14px; background:#FBF6EC; border:1px solid #F0E6D3; font-weight:600;
}

.dealer-apply input[type=file]{ border-radius:12px; border-style:dashed !important; background:#FFFDF8 !important; }

/* --- submit card --- */
.dealer-submit-card{
  position:relative; overflow:hidden; padding:28px; border-radius:22px; color:#fff; scroll-margin-top:120px;
  background:
    radial-gradient(ellipse 60% 120% at 0% 0%, rgba(211,160,52,.26), transparent 60%),
    linear-gradient(120deg, var(--brand-dark) 0%, #3a1414 100%);
  border:1px solid rgba(211,160,52,.28);
  box-shadow:0 0 0 8px rgba(211,160,52,.06), 0 30px 60px -32px rgba(58,20,20,.6);
}
.dealer-submit-card::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:radial-gradient(circle, #fff 1px, transparent 1px); background-size:20px 20px;
}
.dealer-submit-card > *{ position:relative; }
.dealer-submit-copy{ display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.dealer-submit-copy h3{ font-size:20px; letter-spacing:-.01em; }
.dealer-submit-copy p{ font-size:13.5px; color:rgba(255,255,255,.7); margin-top:4px; line-height:1.6; }
.dealer-submit-card .btn-primary{ height:52px; border-radius:14px; font-size:15px; font-weight:800; }
.dealer-submit-note{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:12px; font-size:12px; color:rgba(255,255,255,.5); }

@media (max-width:980px){
  .dealer-layout{ grid-template-columns:1fr; gap:20px; }
  .dealer-aside{ position:static; }
  .dealer-aside-perks, .dealer-aside-help{ display:none; }
  .dealer-aside-card{ padding:14px; }
  .dealer-aside-title{ display:none; }
  .dealer-steps{ flex-direction:row; overflow-x:auto; gap:6px; }
  .dealer-steps::before{ display:none; }
  .dealer-steps li{ flex:1 0 auto; }
  .dealer-steps small{ display:none; }
}
@media (max-width:640px){
  .dealer-apply .review-card{ padding:22px 18px 18px; }
  .dealer-section-head{ margin:-22px -18px 18px !important; padding:18px; }
  .dealer-section-ic{ display:none; }
  .dealer-submit-card{ padding:22px 18px; }
}
.cp-field .cp-checkbox-group .cp-checkbox{
  display:inline-flex; align-items:center; margin:0; text-transform:none; letter-spacing:0;
  font-size:13px; font-weight:600; color:var(--ink);
}
.cp-checkbox-group .cp-checkbox input{ margin:0; }
@media (max-width:980px){
  .dealer-layout{ grid-template-columns:minmax(0,1fr); }
  .dealer-aside, .dealer-aside-card{ min-width:0; }
  .dealer-steps{ scrollbar-width:none; }
  .dealer-steps::-webkit-scrollbar{ display:none; }
}
@media (max-width:480px){
  .dealer-steps strong{ font-size:12.5px; }
  .dealer-steps a{ gap:8px; padding:6px; }
}

/* ==========================================================================
   Collections: card refresh, home featured preview, Collections page
   ========================================================================== */
.coll-card{ border-radius:20px; aspect-ratio:4/5; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 16px 34px -24px rgba(20,12,4,.55); }
.coll-card:hover{ transform:translateY(-8px); box-shadow:0 0 0 2px rgba(211,160,52,.55), 0 30px 50px -26px rgba(60,30,6,.6); }
.coll-card:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.coll-card-scrim{ background:linear-gradient(to top, rgba(12,9,8,.92) 0%, rgba(12,9,8,.45) 42%, rgba(12,9,8,0) 70%), linear-gradient(to bottom, rgba(12,9,8,.35), transparent 25%); }
.coll-card-top{ position:absolute; top:14px; left:14px; right:14px; z-index:1; display:flex; justify-content:space-between; gap:8px; }
.coll-card-code{
  font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--accent-ink);
  background:var(--accent); padding:5px 10px; border-radius:8px; box-shadow:0 6px 14px -6px rgba(0,0,0,.5);
}
.coll-card-cat{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff;
  background:rgba(255,255,255,.16); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2); padding:4px 10px; border-radius:var(--radius-pill);
}
.coll-card-overlay{ padding:18px 18px 20px; }
.coll-card-count{ font-size:10px; padding:4px 10px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); }
.coll-card-title{ font-size:19px; line-height:1.2; padding-right:44px; }
.coll-card-cta{ font-size:12px; margin-top:10px; }
.coll-card-go{
  position:absolute; right:16px; bottom:18px; z-index:1; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .25s, color .25s, transform .25s;
}
.coll-card:hover .coll-card-go{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); transform:rotate(-45deg); }

/* home: featured preview */
.home-coll-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.home-coll-head .home-section-head{ margin:0; }
.home-coll-all{ display:inline-flex; align-items:center; gap:8px; border-radius:var(--radius-pill); padding:11px 20px; border-color:#E6D7BC; }
.home-coll-all .icon{ transition:transform .2s; }
.home-coll-all:hover .icon{ transform:translateX(3px); }
.home-coll-more{ display:flex; justify-content:center; margin-top:36px; }
.home-coll-more .btn{ padding:14px 28px; border-radius:var(--radius-pill); font-size:14.5px; }

/* Collections page */
.coll-page{ max-width:var(--page-max); }
.coll-stats{
  display:grid; grid-template-columns:repeat(3,1fr); max-width:620px; margin:-6px auto 34px;
  background:var(--surface); border:1px solid #EFE4D0; border-radius:20px; overflow:hidden;
  box-shadow:0 18px 40px -30px rgba(60,40,10,.4);
}
.coll-stats > div{ padding:18px 12px; text-align:center; }
.coll-stats > div + div{ border-left:1px solid #F0E6D3; }
.coll-stats strong{ display:block; font-family:var(--font-display); font-size:28px; font-weight:900; letter-spacing:-.02em; color:var(--ink); line-height:1; }
.coll-stats span{ display:block; margin-top:6px; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-dark); }

.coll-toolbar{
  position:sticky; top:calc(var(--site-header-h, 124px) - 32px); z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:12px; margin-bottom:16px; border-radius:20px;
  background:rgba(255,255,255,.88); backdrop-filter:blur(12px) saturate(160%); -webkit-backdrop-filter:blur(12px) saturate(160%);
  border:1px solid #EFE4D0; box-shadow:0 14px 34px -26px rgba(60,40,10,.45);
}
.coll-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.coll-tab{
  display:inline-flex; align-items:center; gap:8px; border:1px solid transparent; cursor:pointer;
  padding:9px 16px; border-radius:var(--radius-pill); background:transparent;
  font:inherit; font-size:13.5px; font-weight:700; color:var(--ink-soft); transition:all .2s;
}
.coll-tab span{ font-size:11px; font-weight:800; padding:2px 7px; border-radius:999px; background:var(--surface-2); color:var(--ink-soft); }
.coll-tab:hover{ color:var(--ink); background:#FBF6EC; }
.coll-tab.is-active{ background:var(--brand-dark); color:#fff; }
.coll-tab.is-active span{ background:var(--accent); color:var(--accent-ink); }
.coll-toolbar-right{ display:flex; gap:8px; flex:1; justify-content:flex-end; min-width:260px; }
.coll-search{ flex:1; max-width:340px; border-radius:var(--radius-pill); }
.coll-sort select{ border-radius:var(--radius-pill); }
.coll-sort{ border-radius:var(--radius-pill); }
.coll-result-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 4px 18px; font-size:13.5px; color:var(--ink-soft); }
.coll-result-row strong{ color:var(--ink); }
.coll-clear{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--surface); cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:700; color:var(--ink-soft); padding:6px 12px; border-radius:var(--radius-pill);
}
.coll-clear:hover{ border-color:var(--accent); color:var(--ink); }
.coll-page .pagination{ margin-top:34px; }
.coll-empty{ background:var(--surface); border:1px dashed #E6D7BC; border-radius:20px; }

@media (max-width:860px){
  .coll-toolbar{ position:static; flex-direction:column; align-items:stretch; }
  .coll-tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .coll-tabs::-webkit-scrollbar{ display:none; }
  .coll-tab{ flex-shrink:0; }
  .coll-toolbar-right{ min-width:0; }
  .coll-search{ max-width:none; }
  .coll-stats strong{ font-size:22px; }
  .home-coll-all{ display:none; }
}
@media (max-width:640px){
  .coll-card{ border-radius:16px; }
  .coll-card-top{ top:10px; left:10px; right:10px; }
  .coll-card-cat{ display:none; }
  .coll-card-title{ font-size:15px; padding-right:0; }
  .coll-card-go, .coll-card-cta{ display:none; }
  .coll-card-overlay{ padding:12px; }
}
/* header now has one more tab: tighten it on laptop widths */
@media (min-width:981px) and (max-width:1280px){
  .nav-tab{ padding:10px 10px; }
  .nav-tab::after{ left:10px; right:10px; }
}
@media (min-width:981px) and (max-width:1120px){
  .nav-tab{ padding:10px 7px; font-size:13px; }
  .nav-tab::after{ left:7px; right:7px; }
}
@media (max-width:860px){
  .coll-toolbar-right{ display:grid; grid-template-columns:minmax(0,1fr) auto; }
  .coll-sort{ min-width:0; }
  .coll-sort select{ max-width:140px; }
}
@media (max-width:860px){
  .coll-search{ min-width:0; }
  .coll-search input{ min-width:0; width:100%; }
  .coll-sort select{ min-width:0; }
  .coll-tabs{ min-width:0; }
}
@media (max-width:860px){ .coll-toolbar{ flex-wrap:nowrap; } }