/* ── Sample Showroom — public site ─────────────────────── */
:root{
  --porcelain:#F5F2ED;
  --mist:#FBFAF8;
  --linen:#E4DED4;
  --ash:#8C8478;
  --walnut:#5C4A3A;
  --ink:#1C1A17;
  --brass:#B4925A;
  --brass-soft:#E8DCC5;

  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --wrap:1280px;
  --gutter:clamp(18px,4vw,56px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--porcelain);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.05}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--ash)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ── Header ─────────────────────────────── */
.top{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gutter);border-bottom:1px solid var(--linen);
  max-width:var(--wrap);margin:0 auto;
}
.brand{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-family:var(--serif);font-size:26px;letter-spacing:.01em}
.brand-tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);margin-top:4px}
.nav{display:flex;gap:28px;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.nav a{padding:6px 0;border-bottom:1px solid transparent;transition:border-color .2s}
.nav a:hover{border-color:var(--brass)}

main{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
section{padding:clamp(40px,7vw,96px) 0}
section + section{border-top:1px solid var(--linen)}

/* ── Hero ───────────────────────────────── */
.hero{padding-top:clamp(56px,10vw,140px);padding-bottom:clamp(48px,8vw,110px);max-width:860px}
.hero-compact{padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(28px,4vw,56px)}
.eyebrow{margin:0 0 18px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.hero-title{font-size:clamp(40px,7vw,86px);font-weight:300;letter-spacing:-.01em}
.hero-title em{font-style:italic;font-weight:300;color:var(--walnut)}
.hero-lede{margin:22px 0 34px;max-width:520px;color:var(--walnut);font-size:17px}

/* the path bar — signature element */
.pathbar{
  position:relative;display:flex;align-items:center;
  background:var(--mist);border:1px solid var(--linen);
  padding:6px 6px 6px 18px;max-width:640px;
  transition:border-color .25s,box-shadow .25s;
}
.pathbar:focus-within{border-color:var(--brass);box-shadow:0 12px 40px -18px rgba(28,26,23,.25)}
.pathbar-prefix{white-space:nowrap;color:var(--ash);font-size:13px;user-select:none}
.pathbar-input{
  flex:1;min-width:0;border:0;background:transparent;font:500 15px/1 var(--mono);
  color:var(--ink);padding:14px 10px;outline:none;letter-spacing:.01em;
}
.pathbar-input::placeholder{color:#b5ada1;font-weight:400}
.pathbar-go{
  border:0;background:var(--ink);color:var(--porcelain);width:46px;height:46px;
  font-size:20px;cursor:pointer;transition:background .2s;flex:none;
}
.pathbar-go:hover{background:var(--walnut)}
.pathbar-suggest{
  position:absolute;left:-1px;right:-1px;top:calc(100% + 6px);z-index:30;
  background:var(--mist);border:1px solid var(--linen);box-shadow:0 20px 50px -20px rgba(28,26,23,.3);
  padding:6px 0;
}
.pathbar-suggest[hidden]{display:none}
.sg-head{padding:8px 18px 4px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.sg-item{display:flex;align-items:center;gap:12px;padding:9px 18px;font-size:14px;transition:background .15s}
.sg-item:hover,.sg-item.is-hi{background:var(--porcelain)}
.sg-item img{width:36px;height:36px;object-fit:cover;flex:none;background:var(--linen)}
.sg-item .sg-sub{color:var(--ash);font-size:12px;margin-left:auto}
.sg-item .mono{color:var(--brass)}
@media (max-width:520px){.pathbar-prefix{display:none}.pathbar{padding-left:8px}}

/* ── Section heads ─────────────────────── */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:clamp(22px,3vw,40px);flex-wrap:wrap}
.section-head h2{font-size:clamp(26px,3.4vw,40px);font-weight:300}
.link{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--walnut)}
.link:hover{color:var(--brass)}
.empty{color:var(--ash);font-style:italic;font-family:var(--serif);font-size:20px}

/* ── Collections ───────────────────────── */
.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(14px,2vw,28px)}
.collection-grid.small{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.collection{display:block;background:var(--mist);border:1px solid var(--linen);transition:border-color .25s,transform .35s var(--ease)}
.collection:hover{border-color:var(--brass);transform:translateY(-3px)}
.collection-media{aspect-ratio:5/4;overflow:hidden;background:var(--linen)}
.collection-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.collection:hover .collection-media img{transform:scale(1.04)}
.collection-body{display:flex;flex-direction:column;gap:4px;padding:16px 18px 18px}
.collection-name{font-family:var(--serif);font-size:24px;line-height:1.1}
.collection-path{color:var(--ash)}

/* ── Product cards ─────────────────────── */
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,2vw,28px) clamp(12px,1.6vw,22px)}
@media (min-width:720px){.product-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1080px){.product-grid{grid-template-columns:repeat(4,1fr)}}
.card{display:block}
.card-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--mist);border:1px solid var(--linen)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease),transform 1.2s var(--ease)}
.card-alt{position:absolute;inset:0;opacity:0}
.card:hover .card-alt{opacity:1}
.card:hover .card-media img:first-child{transform:scale(1.03)}
.card-badge{
  position:absolute;top:12px;left:12px;background:var(--ink);color:var(--porcelain);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:6px 10px;
}
.card-count{
  position:absolute;bottom:12px;right:12px;background:rgba(251,250,248,.9);color:var(--walnut);
  font-family:var(--mono);font-size:11px;padding:5px 9px;backdrop-filter:blur(4px);
}
.card-body{padding:12px 2px 0}
.card-name{font-family:var(--serif);font-size:20px;line-height:1.15;font-weight:400}
.card-meta{display:flex;justify-content:space-between;gap:10px;margin-top:5px;font-size:12.5px;color:var(--ash);letter-spacing:.02em}
.card-price{color:var(--walnut);font-weight:400;white-space:nowrap}
.card-body-min{padding-top:8px}
.card-body-min .mono{color:#b5ada1;font-size:11px}
.prod-ref{margin:4px 0 14px;font-size:12.5px}

/* ── Category page ─────────────────────── */
.crumb{margin-bottom:22px}
.crumb a:hover{color:var(--brass)}
.crumb span{color:var(--ink)}
.cat-head{padding-bottom:clamp(20px,3vw,36px)}
.cat-head h1{font-size:clamp(40px,6vw,72px);font-weight:300}
.cat-desc{max-width:600px;color:var(--walnut);margin:18px 0 0;font-size:16.5px}
.cat-tools{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:34px;flex-wrap:wrap}
.cat-switch{display:flex;gap:6px;flex-wrap:wrap}
.cat-switch a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--linen);background:var(--mist);transition:all .2s}
.cat-switch a:hover{border-color:var(--brass)}
.cat-switch a.is-active{background:var(--ink);color:var(--porcelain);border-color:var(--ink)}
.cat-body{padding-top:clamp(28px,4vw,48px)}
.section + .cat-body{border-top:0}

/* ── Product page ──────────────────────── */
.prod-layout{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,64px)}
@media (min-width:900px){.prod-layout{grid-template-columns:minmax(0,7fr) minmax(300px,4fr);align-items:start}}
.gallery{position:sticky;top:20px}
.gallery-main{position:relative;background:var(--mist);border:1px solid var(--linen);aspect-ratio:4/5;overflow:hidden}
@media (min-width:900px){.gallery-main{aspect-ratio:1/1}}
.gallery-main img{width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.gallery-main img.is-fading{opacity:0}
.gallery-label{
  position:absolute;left:14px;bottom:14px;background:rgba(28,26,23,.82);color:var(--porcelain);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:7px 11px;
}
.gallery-zoom{position:absolute;right:12px;top:12px;width:40px;height:40px;border:1px solid var(--linen);background:rgba(251,250,248,.9);cursor:pointer;font-size:17px;color:var(--walnut)}
.gallery-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px}
@media (max-width:520px){.gallery-thumbs{grid-template-columns:repeat(5,1fr)}}
.thumb{
  padding:0;border:1px solid var(--linen);background:var(--mist);cursor:pointer;text-align:left;
  transition:border-color .2s;overflow:hidden;
}
.thumb img{aspect-ratio:1/1;width:100%;object-fit:cover}
.thumb.is-active{border-color:var(--ink)}
.thumb:hover{border-color:var(--brass)}

.prod-info{padding-top:6px}
.prod-cat{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.prod-info h1{font-size:clamp(34px,4.5vw,56px);font-weight:300;margin:12px 0 10px}
.badge{display:inline-block;background:var(--brass-soft);color:var(--walnut);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:5px 9px}
.prod-price{font-family:var(--serif);font-size:30px;color:var(--walnut);margin:16px 0 6px}
.specs{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:26px 0;padding:20px 0;border-top:1px solid var(--linen);border-bottom:1px solid var(--linen)}
.specs dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);padding-top:3px}
.specs dd{margin:0;color:var(--ink)}
.prod-desc{color:var(--walnut);font-size:16.5px;max-width:52ch}
.btn-wa{
  display:inline-block;margin-top:30px;background:var(--ink);color:var(--porcelain);
  padding:15px 26px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;transition:background .2s;
}
.btn-wa:hover{background:var(--walnut)}
.prod-path{margin-top:26px;word-break:break-all}

.related .section-head h2{font-size:clamp(22px,2.6vw,30px)}

/* ── Lightbox ──────────────────────────── */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(28,26,23,.94);display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:92vw;max-height:92vh;text-align:center}
.lightbox img{max-width:92vw;max-height:84vh;object-fit:contain;margin:0 auto}
.lightbox figcaption{color:var(--brass-soft);font-family:var(--mono);font-size:12px;margin-top:14px;letter-spacing:.06em}
.lb-close,.lb-nav{position:absolute;border:0;background:transparent;color:var(--porcelain);font-size:40px;cursor:pointer;opacity:.7;padding:10px 18px;line-height:1}
.lb-close:hover,.lb-nav:hover{opacity:1}
.lb-close{top:14px;right:18px}
.lb-prev{left:8px;top:50%;transform:translateY(-50%)}
.lb-next{right:8px;top:50%;transform:translateY(-50%)}
@media (max-width:600px){.lb-nav{font-size:30px;padding:8px}}

/* ── Footer ────────────────────────────── */
.foot{background:var(--ink);color:var(--porcelain);margin-top:clamp(40px,6vw,80px)}
.foot-inner{max-width:var(--wrap);margin:0 auto;padding:44px var(--gutter);display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot-brand{font-family:var(--serif);font-size:24px}
.foot-note{font-size:13px;color:#a39b8f;margin-top:6px;max-width:420px}
.foot-path{text-align:right;max-width:360px}
.foot-path .mono{color:var(--brass);font-size:13px}
.foot-hint{display:block;font-size:12px;color:#a39b8f;margin-top:6px}
@media (max-width:680px){.foot-path{text-align:left}}

/* ── Motion ────────────────────────────── */
.hero-title,.hero-lede,.pathbar,.eyebrow{animation:rise .9s var(--ease) both}
.hero-lede{animation-delay:.08s}.pathbar{animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}