/* =========================================================
   JUGIELEWICZ - components
   hero / cards / rails / ticker / compare / drawer
   ========================================================= */

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(620px,93vh,1000px);display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:52% 42%;transform:scale(1.08);filter:saturate(.78) contrast(1.06)}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,12,.72) 0%,rgba(10,10,12,.30) 34%,rgba(10,10,12,.55) 66%,var(--bg) 100%);
}
html[data-theme="light"] .hero-bg::after{
  background:linear-gradient(180deg,rgba(20,18,14,.58) 0%,rgba(20,18,14,.22) 34%,rgba(244,240,232,.55) 78%,var(--bg) 100%);
}

/* caustic light - two slow-drifting refraction blooms */
.caustic{position:absolute;inset:-20%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.5}
.caustic i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.caustic i:nth-child(1){
  width:46vw;height:46vw;left:4%;top:6%;
  background:conic-gradient(from 0deg,var(--prism-c),var(--prism-a),var(--brass-hi),var(--prism-b),var(--prism-c));
  animation:drift1 26s ease-in-out infinite;
}
.caustic i:nth-child(2){
  width:34vw;height:34vw;right:6%;bottom:2%;
  background:conic-gradient(from 140deg,var(--brass-hi),var(--prism-b),var(--prism-a),var(--brass-hi));
  animation:drift2 34s ease-in-out infinite;
}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}50%{transform:translate3d(9vw,5vh,0) rotate(180deg) scale(1.18)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(1.1)}50%{transform:translate3d(-7vw,-6vh,0) rotate(-160deg) scale(.9)}}

.hero-in{position:relative;z-index:2;width:100%;padding-block:clamp(3rem,8vh,7rem) clamp(2.4rem,6vh,4rem)}
.hero-top{display:flex;justify-content:space-between;gap:2rem;align-items:flex-start;margin-bottom:clamp(3rem,22vh,14rem)}
.hero h1{color:#f6f2ea;text-shadow:0 2px 40px rgba(0,0,0,.35)}
html[data-theme="light"] .hero h1{color:#f6f2ea}
.hero-foot{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-top:clamp(1.2rem,3vw,2rem)}
.hero-foot .lede{color:rgba(246,242,234,.74)}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:.6em;padding:.5em .9em;border:1px solid rgba(246,242,234,.28);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,242,234,.8);
  background:rgba(10,10,12,.32);backdrop-filter:blur(8px);
}
.hero-badge .dot{width:5px;height:5px;border-radius:50%;background:var(--prism-a);box-shadow:0 0 10px var(--prism-a)}
.scroll-cue{
  position:absolute;z-index:2;right:var(--gut);bottom:clamp(2.4rem,6vh,4rem);display:flex;flex-direction:column;
  align-items:center;gap:.8rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(246,242,234,.5);writing-mode:vertical-rl;
}
.scroll-cue .bar{width:1px;height:64px;background:linear-gradient(180deg,transparent,rgba(246,242,234,.6));position:relative;overflow:hidden}
.scroll-cue .bar::after{content:"";position:absolute;inset:0;background:var(--brass-hi);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- ticker strip ---------- */
.ticker{
  border-block:1px solid var(--line);background:var(--bg-2);overflow:hidden;
  padding-block:clamp(.9rem,1.7vw,1.35rem);
}
.ticker .track{display:flex;white-space:nowrap;animation:slide 30s linear infinite;will-change:transform}
.ticker.rev .track{animation-direction:reverse}
.ticker b{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,3.1vw,2.5rem);
  padding-inline:1.4rem;display:inline-flex;align-items:center;gap:1.4rem;letter-spacing:-.01em;
}
.ticker b em{font-style:italic;color:var(--brass)}
.ticker .st{width:12px;height:12px;flex:none;color:var(--brass)}

/* ---------- category quad ---------- */
.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.quad a{
  position:relative;background:var(--bg-2);aspect-ratio:3/4;overflow:hidden;display:flex;
  align-items:flex-end;padding:clamp(1rem,2vw,1.8rem);
}
.quad img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(1.02);transition:transform 1.2s var(--ease-out),filter .8s;filter:grayscale(.35) contrast(1.05)}
.quad a::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,10,12,0) 30%,rgba(10,10,12,.82) 100%);transition:opacity .6s}
.quad a:hover img{transform:scale(1.11);filter:grayscale(0) contrast(1.02)}
.quad .qmeta{position:relative;z-index:2;width:100%;display:flex;justify-content:space-between;align-items:flex-end;color:#f4f0e8}
.quad .qname{font-family:var(--serif);font-size:clamp(1.4rem,2.3vw,2.1rem);line-height:1}
.quad .qcount{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:rgba(244,240,232,.6)}
.quad .qarw{
  position:absolute;z-index:2;top:clamp(1rem,2vw,1.8rem);right:clamp(1rem,2vw,1.8rem);width:34px;height:34px;
  border:1px solid rgba(244,240,232,.4);border-radius:50%;display:grid;place-items:center;color:#f4f0e8;
  opacity:0;transform:translate(-8px,8px);transition:.55s var(--ease-out);
}
.quad a:hover .qarw{opacity:1;transform:none}

/* ---------- product card ---------- */
.card{position:relative;display:block}
.card-top{position:relative}
.card-media{
  display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-2);
  border:1px solid var(--line);
}
.card-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.15s var(--ease-out),opacity .55s var(--ease);
}
.card-media .alt{opacity:0}
.card:hover .card-media .pri{opacity:0}
.card:hover .card-media .alt{opacity:1}
.card:hover .card-media img{transform:scale(1.06)}
/* Dispersion, which is the one optical property this shop actually sells on -
   the spec strip claims two and a half times a diamond's. The sweep used to be
   white with a wash of blue; splitting it into a narrow spectrum is the same
   gesture doing the thing the copy talks about. Kept low in opacity so it
   reads as light bending, not as a rainbow. */
.card-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(112deg,
    transparent 36%,
    rgba(255,241,214,.30) 44%,
    rgba(255,255,255,.42) 47%,
    rgba(255,214,168,.26) 50%,
    rgba(196,226,255,.24) 54%,
    rgba(206,188,255,.18) 58%,
    transparent 66%);
  transform:translateX(-62%);transition:opacity .3s;
}
.card:hover .card-media::after{opacity:1;animation:glint 1.25s var(--ease-out)}
@keyframes glint{to{transform:translateX(62%)}}
@media (prefers-reduced-motion:reduce){
  .card:hover .card-media::after{animation:none;opacity:0}
}

.tagline{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap;z-index:2}
.tag{
  font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.35em .6em;background:rgba(10,10,12,.72);color:#f1ece2;backdrop-filter:blur(6px);
  border:1px solid rgba(241,236,226,.16);
}
.tag.brass{background:var(--brass);color:#0a0a0c;border-color:transparent}
.tag.new{background:rgba(142,242,223,.92);color:#0a0a0c;border-color:transparent}

.card-quick{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:2;
  background:rgba(10,10,12,.82);color:#f1ece2;backdrop-filter:blur(10px);
  border:1px solid rgba(241,236,226,.16);
  font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.85em 1em;text-align:center;
  opacity:0;transform:translateY(12px);transition:.45s var(--ease-out);
}
.card:hover .card-quick{opacity:1;transform:none}
.card-quick:hover{background:var(--brass);color:#0a0a0c;border-color:transparent}

.card-body{padding-top:.85rem;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.card-name{font-size:.94rem;font-weight:400;line-height:1.3}
.card-sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);margin-top:.28rem}
.card-price{font-family:var(--mono);font-size:.82rem;white-space:nowrap;text-align:right}
.card-price .was{display:block;font-size:.62rem;color:var(--fg-faint);text-decoration:line-through}
.swatches{display:flex;gap:5px;margin-top:.5rem}
.sw{width:11px;height:11px;border-radius:50%;border:1px solid var(--line-hard)}
.sw.yg{background:linear-gradient(135deg,#e6c477,#b3872f)}
.sw.wg{background:linear-gradient(135deg,#f0f1f3,#b9bcc2)}
.sw.rg{background:linear-gradient(135deg,#f0c3ad,#c6836a)}
.sw.ss{background:linear-gradient(135deg,#e2e4e7,#9aa0a6)}
.sw.bl{background:linear-gradient(135deg,#3a3a40,#121214)}
.sw.pt{background:linear-gradient(135deg,#eef0f4,#c9ced6)}

/* ---------- grids & rails ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,2rem) clamp(.8rem,1.4vw,1.5rem)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,2rem) clamp(.8rem,1.4vw,1.5rem)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,2rem)}

.rail{
  display:flex;gap:clamp(.8rem,1.4vw,1.5rem);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-block:clamp(1.6rem,3vw,2.6rem) 1rem;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
  scroll-padding-inline:var(--gut);scrollbar-width:none;cursor:grab;
}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing;scroll-snap-type:none}
.rail.dragging a{pointer-events:none}
.rail > .card{flex:0 0 clamp(230px,23vw,340px);scroll-snap-align:start}
.rail-nav{display:flex;gap:.5rem}
.rail-nav button{
  width:42px;height:42px;border:1px solid var(--line-hard);display:grid;place-items:center;
  transition:.35s var(--ease);color:var(--fg-dim);
}
.rail-nav button:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.rail-nav svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.4}

/* ---------- compare / the maths ---------- */
.maths{padding-block:clamp(3.5rem,8vw,8rem);border-bottom:1px solid var(--line)}
.maths-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,5.5rem);align-items:center}
.compare{position:relative;aspect-ratio:1/1;overflow:hidden;user-select:none;
  border:1px solid var(--line);touch-action:pan-y;cursor:ew-resize}
/* One photograph, shown once. There used to be two copies of this same file
   graded differently so the right-hand side looked livelier - which is a
   claim about the stone made with a colour filter, and not one we can stand
   behind. What actually differs between the two sides is the price, so that
   is what the divider reveals. */
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.compare .cside{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(1rem,2.4vw,1.6rem);gap:.5rem;
  pointer-events:none;
}
.compare .cside.l{align-items:flex-start;text-align:left}
.compare .cside.r{align-items:flex-end;text-align:right}
/* each half is clipped at the divider, so the labels are cut by it rather
   than sitting on top of both sides at once */
.compare .cside.l{clip-path:inset(0 50% 0 0)}
.compare .cside.r{clip-path:inset(0 0 0 50%)}

.compare .ck{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.45em .75em;background:rgba(10,10,12,.72);color:#f1ece2;backdrop-filter:blur(6px);
}
.compare .cv{
  font-family:var(--serif);font-size:clamp(1.8rem,4.4vw,3.1rem);line-height:1;
  letter-spacing:-.02em;color:#f6f2ea;text-shadow:0 2px 26px rgba(0,0,0,.75);
  transform-origin:inherit;
}
.compare .cside.l .cv{transform-origin:left bottom}
.compare .cside.r .cv{transform-origin:right bottom}
.compare .cv.hit{color:var(--brass)}

.compare .cl{
  position:absolute;top:0;bottom:0;left:50%;width:1px;z-index:4;
  background:linear-gradient(to bottom,
    rgba(246,242,234,.25), rgba(246,242,234,.95) 45%, rgba(246,242,234,.25));
  box-shadow:0 0 22px rgba(246,242,234,.4);
  transition:box-shadow .3s var(--ease);
}
.compare.dragging .cl{box-shadow:0 0 34px 2px rgba(185,151,91,.75);
  background:linear-gradient(to bottom,
    rgba(185,151,91,.35), rgba(232,205,150,1) 45%, rgba(185,151,91,.35))}

.compare .knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;
  border-radius:50%;border:1px solid rgba(246,242,234,.9);background:rgba(10,10,12,.4);
  backdrop-filter:blur(6px);z-index:5;cursor:ew-resize;display:grid;place-items:center;
  color:#f6f2ea;transition:transform .25s var(--ease-out),border-color .25s,background .25s;
}
.compare .knob svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.2}
.compare .knob:hover{border-color:var(--brass);color:var(--brass)}
.compare.dragging .knob{transform:translate(-50%,-50%) scale(1.08);
  border-color:var(--brass);color:var(--brass);background:rgba(10,10,12,.62)}
.compare .knob:focus-visible{outline:2px solid var(--brass);outline-offset:4px}

/* a quiet ring until somebody touches it, so it reads as draggable */
.compare .knob::after{
  content:"";position:absolute;inset:-8px;border-radius:50%;
  border:1px solid rgba(246,242,234,.5);animation:knobPulse 2.6s var(--ease-out) infinite;
}
.compare.touched .knob::after{animation:none;opacity:0}
@keyframes knobPulse{
  0%{transform:scale(.82);opacity:0}
  40%{opacity:.7}
  100%{transform:scale(1.25);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .compare .knob::after{animation:none;opacity:0}
}

.ledger{border-top:1px solid var(--line);margin-top:2rem}
.ledger .row{display:grid;grid-template-columns:1fr auto;gap:1rem;padding-block:1.05rem;border-bottom:1px solid var(--line);align-items:baseline}
.ledger .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim)}
.ledger .v{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1}
.ledger .v.strike{color:var(--fg-faint);position:relative}
.ledger .v.strike::after{content:"";position:absolute;left:-4%;right:-4%;top:52%;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .8s .4s var(--ease-out)}
.ledger.in .v.strike::after{transform:scaleX(1)}
.ledger .v.hit{color:var(--brass)}
.savings{
  margin-top:1.6rem;display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
}
.savings .big{font-family:var(--serif);font-size:clamp(3rem,7vw,5.6rem);line-height:.9;color:var(--brass)}
.savings .note{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);max-width:26ch}

/* ---------- spec strip ---------- */
.specs{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.specs > div{padding:clamp(1.8rem,3.4vw,3.2rem) clamp(1rem,2vw,2rem);border-left:1px solid var(--line)}
.specs > div:first-child{border-left:0}
.specs .n{font-family:var(--serif);font-size:clamp(2.2rem,4.6vw,4rem);line-height:1;letter-spacing:-.03em}
.specs .n small{font-size:.35em;letter-spacing:0;color:var(--brass);vertical-align:super;font-family:var(--mono)}
.specs .t{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);margin-top:.9rem}
.specs .d{font-size:.86rem;color:var(--fg-dim);margin-top:.5rem;font-weight:300;max-width:30ch}

/* ---------- style / edit tiles ---------- */
.edits{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.4vw,1.4rem);padding-block:clamp(1.6rem,3vw,2.6rem)}
.edit{position:relative;aspect-ratio:3/4.4;overflow:hidden;background:var(--bg-2);display:flex;align-items:flex-end;padding:clamp(1rem,1.7vw,1.6rem)}
.edit img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 1.3s var(--ease-out),filter .8s}
.edit::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,12,.1),rgba(10,10,12,.85))}
.edit:hover img{transform:scale(1.08)}
.edit .etxt{position:relative;z-index:2;color:#f4f0e8;display:block;width:100%}
.edit .ename{display:block;font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1;margin-bottom:.5rem}
.edit .edesc{display:block;font-size:.82rem;color:rgba(244,240,232,.66);font-weight:300;max-width:26ch;line-height:1.5}
.edit .enum{position:absolute;z-index:2;top:clamp(1rem,1.7vw,1.6rem);left:clamp(1rem,1.7vw,1.6rem);font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:rgba(244,240,232,.55)}
.edit:nth-child(even){margin-top:clamp(0px,3vw,44px)}

/* ---------- atelier strip ---------- */
.atelier{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:center;padding-block:clamp(3.5rem,8vw,8rem)}
.atelier-media{position:relative}
.atelier-media img{width:100%;aspect-ratio:5/6;object-fit:cover;filter:grayscale(.15) contrast(1.05)}
.atelier-media .stamp{
  position:absolute;right:-22px;bottom:-22px;width:clamp(110px,13vw,168px);height:clamp(110px,13vw,168px);
  border-radius:50%;border:1px solid var(--line-hard);background:var(--bg);
  display:grid;place-items:center;text-align:center;
}
.atelier-media .stamp span{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);line-height:1.7}
.atelier-media .stamp em{display:block;font-family:var(--serif);font-style:italic;font-size:1.7rem;color:var(--brass);letter-spacing:0}
.spin-ring{position:absolute;inset:0;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- reviews ---------- */
.reviews{padding-block:clamp(3rem,6vw,6rem)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.rev{background:var(--bg);padding:clamp(1.6rem,2.6vw,2.6rem);display:flex;flex-direction:column;gap:1rem}
.rev .stars{display:flex;gap:3px;color:var(--brass)}
.rev .stars svg{width:12px;height:12px;fill:currentColor}
.rev p{font-family:var(--serif);font-size:clamp(1.05rem,1.5vw,1.32rem);line-height:1.42;letter-spacing:-.01em}
.rev .who{margin-top:auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.rev .who b{color:var(--fg-dim);font-weight:400}
.rev .item{font-size:.8rem;color:var(--fg-faint);font-weight:300}

/* ---------- newsletter ---------- */
.news{border-top:1px solid var(--line);padding-block:clamp(3.5rem,7vw,7rem);position:relative;overflow:hidden}
.news-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.field{display:flex;border-bottom:1px solid var(--line-hard);align-items:center;gap:1rem;padding-bottom:.7rem;margin-top:1.6rem}
.field input{flex:1;background:none;border:0;font-size:1.02rem;padding:.4rem 0;font-weight:300}
.field input::placeholder{color:var(--fg-faint)}
.field input:focus{outline:none}
.field button{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);white-space:nowrap}
.field.ok{border-color:var(--prism-a)}
.news-note{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--fg-faint);margin-top:.9rem;text-transform:uppercase}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);background:var(--bg-2);padding-block:clamp(2.6rem,5vw,4.5rem) 1.6rem}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(1.6rem,3vw,3rem);padding-bottom:clamp(2.4rem,5vw,4rem)}
.foot-grid h4{font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:1.2rem;font-weight:400}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:.6rem}
.foot-grid li a{font-size:.88rem;color:var(--fg-dim);transition:color .3s}
.foot-grid li a:hover{color:var(--brass)}
.foot-mark{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:.2em;text-transform:uppercase;text-indent:.2em}
.foot-addr{font-size:.85rem;color:var(--fg-dim);font-weight:300;margin-top:1.1rem;line-height:1.75;max-width:34ch}
.foot-bottom{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-top:1.5rem;border-top:1px solid var(--line)}
.foot-bottom p,.foot-bottom a{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.foot-bottom a:hover{color:var(--fg-dim)}
.pay{display:flex;gap:.5rem;align-items:center}
.pay span{font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;border:1px solid var(--line);padding:.28em .5em;color:var(--fg-faint)}

/* ---------- cart drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(6,6,8,.6);backdrop-filter:blur(3px);z-index:940;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
body.drawer-open .scrim,body.modal-open .scrim{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--bg);z-index:950;
  border-left:1px solid var(--line);display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform .6s var(--ease-out);
}
body.drawer-open .drawer{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:1.4rem var(--gut);border-bottom:1px solid var(--line)}
.drawer-head h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400}
.drawer-body{flex:1;overflow-y:auto;padding:0 var(--gut)}
.drawer-empty{padding:4rem 0;text-align:center}
.drawer-empty p{font-family:var(--serif);font-size:1.5rem;margin-bottom:1.4rem;font-style:italic;color:var(--fg-dim)}
.ci{display:grid;grid-template-columns:76px 1fr auto;gap:1rem;padding-block:1.3rem;border-bottom:1px solid var(--line);align-items:start}
.ci img{width:76px;height:95px;object-fit:cover;border:1px solid var(--line)}
.ci .nm{font-size:.9rem;line-height:1.3}
.ci .mt{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);margin-top:.3rem}
.qty{display:inline-flex;border:1px solid var(--line);margin-top:.7rem}
.qty button{width:26px;height:26px;display:grid;place-items:center;color:var(--fg-dim);font-size:.9rem;transition:.25s}
.qty button:hover{background:var(--fg);color:var(--bg)}
.qty span{width:30px;display:grid;place-items:center;font-family:var(--mono);font-size:.72rem}
.ci .pr{font-family:var(--mono);font-size:.78rem;text-align:right}
.ci .rm{font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);margin-top:.7rem;display:block;text-align:right}
.ci .rm:hover{color:var(--brass)}
.drawer-foot{padding:1.4rem var(--gut) 2rem;border-top:1px solid var(--line)}
.drawer-foot .tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.drawer-foot .tot .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim)}
.drawer-foot .tot .v{font-family:var(--serif);font-size:1.8rem}
.ship-bar{height:2px;background:var(--line);margin:1rem 0 .6rem;overflow:hidden}
.ship-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brass-dp),var(--brass-hi));width:0;transition:width .7s var(--ease-out)}
.ship-note{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:1.2rem}

/* ---------- quick view modal ---------- */
.modal{
  position:fixed;z-index:960;top:50%;left:50%;width:min(1020px,calc(100% - 2rem));max-height:88vh;
  transform:translate(-50%,-46%) scale(.97);opacity:0;pointer-events:none;
  background:var(--bg);border:1px solid var(--line);overflow:auto;
  transition:opacity .45s var(--ease),transform .55s var(--ease-out);
}
body.modal-open .modal{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.modal-in{display:grid;grid-template-columns:1fr 1fr}
.modal-media{background:var(--bg-2);aspect-ratio:1/1;position:relative;overflow:hidden}
.modal-media img{width:100%;height:100%;object-fit:cover}
.modal-side{padding:clamp(1.5rem,3vw,2.8rem);display:flex;flex-direction:column;gap:1rem}
.modal-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border:1px solid var(--line);display:grid;place-items:center;z-index:5;background:var(--bg)}
.modal-close:hover{background:var(--fg);color:var(--bg)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:34px;z-index:970;
  background:var(--fg);color:var(--bg);padding:.9rem 1.4rem;display:flex;gap:.8rem;align-items:center;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  /* a percentage offset depends on the toast's own height, and an empty one is
     short enough to peek above the fold - push it by a fixed amount instead */
  transform:translate(-50%,calc(100% + 48px));
  opacity:0;pointer-events:none;
  transition:transform .5s var(--ease-out),opacity .3s var(--ease);
}
.toast.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.toast .tk{color:var(--brass-dp)}


/* ---------------------------------------------------------------
   Previewing a hidden piece from the bench desk. Bottom-left so it
   never sits on top of the toast, which is centred.
   --------------------------------------------------------------- */
.preview-bar{
  position:fixed;left:22px;bottom:22px;z-index:960;max-width:min(88vw,460px);
  padding:.8rem 1rem;border:1px solid #c9a7ff;
  background:color-mix(in srgb,var(--bg) 90%,#c9a7ff);color:var(--fg);
  font-size:.82rem;line-height:1.55;box-shadow:0 14px 40px rgba(0,0,0,.45);
}
.preview-bar b{display:block;color:#c9a7ff;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:.3rem}
#addBtn.is-disabled{opacity:.45;cursor:not-allowed}

/* "from $279" on a piece that costs more in a longer length */
.card-price .from{font-family:var(--mono);font-size:.56em;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-faint);margin-right:.35em;vertical-align:.12em}