/* Tucson Appliance fridge finder. Phone first: owner bar on top, the store's finder full screen, big kinetic words laid over it.
   From 900px: a quiet owner note on the left, the finder inside a phone on the right. Look taken from TAC's presentation page. */
:root{
  color-scheme:only light;
  --paper:#F4F0E8; --paper2:#EDE7DC; --stone:#DBD4C9; --ink:#262725; --muted:#65665F; --copper:#8A4E32;
  --plum:#6F2F8D; --plum-tint:#F3ECF6; --gold:#FBB040; --white:#FFFFFF; --bad:#8A2B1E;
  --display:'Cormorant Garamond',Georgia,serif; --text:'Geist',Arial,sans-serif;
  --bar:52px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.45 var(--text)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--plum);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* owner layer, phone */
.ownerbar{position:sticky;top:0;z-index:30;min-height:var(--bar);padding-block:10px;background:var(--ink);color:var(--paper);display:flex;align-items:center;gap:8px;padding:0 12px}
.ownerbar .who{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.8;flex:1;white-space:nowrap}
.ownerbar::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--gold);transform:scaleX(var(--p,0));transform-origin:left;transition:transform var(--pd,.4s) linear}
.obtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:999px;border:1px solid rgba(244,240,232,.35);background:transparent;color:var(--paper);font-size:13px;white-space:nowrap}
.obtn svg,.dbtn svg{width:15px;height:15px;flex:none}
.obtn[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.sent{position:fixed;left:14px;right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:41;background:var(--ink);color:var(--paper);border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.35;border:1px solid rgba(251,176,64,.6)}
.sent b{display:flex;align-items:center;gap:8px;color:var(--white);font-weight:600;margin-bottom:2px}
.sent b::before,.dsent b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}
.sent.fail{border-color:#e98b7c}
.sent.fail b::before,.dsent.fail b::before{background:#e98b7c}
.sent .x{float:right;border:0;background:transparent;color:var(--paper);font-size:18px;line-height:1;padding:0 0 4px 8px}

/* desktop owner notes */
.notes{display:none}

/* the store's finder */
.shop{background:var(--white);position:relative;min-height:calc(100dvh - var(--bar));transition:transform .7s cubic-bezier(.22,.8,.3,1),opacity .55s ease-out}
.shop.away{transform:translateX(-108%);opacity:0;transition:transform .7s cubic-bezier(.55,0,.8,.4),opacity .6s ease-in}
.shoptop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--stone);background:var(--white)}
.shoptop img{height:30px;width:auto;display:block}
.pill{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--white);border:0;font-size:14px;font-weight:500}
.ask{padding:18px 16px 14px;display:flex;flex-direction:column;gap:12px;background:var(--paper)}
.q{font-family:var(--display);font-weight:500;font-size:36px;line-height:1.02;letter-spacing:-.01em;margin:0}
.q em{color:var(--plum);font-style:italic}
.sub{color:var(--muted);font-size:15px;margin:-4px 0 0}
.box{display:block;width:100%;border:1.5px solid var(--stone);border-radius:14px;background:var(--white);padding:12px 14px;font-size:16px;line-height:1.45;min-height:80px;resize:none}
.box:focus{outline:0;border-color:var(--plum);box-shadow:0 0 0 4px var(--plum-tint)}
.box.typing{border-color:var(--plum);box-shadow:0 0 0 4px var(--plum-tint)}
.box::placeholder{color:#8d8e87}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 11px;border-radius:999px;background:var(--white);border:1px solid var(--plum);color:var(--plum);font-size:13px;font-weight:500}
.chip .rm{font-size:15px;line-height:1;opacity:.7}
.chip.try{border-color:var(--stone);color:var(--ink);font-weight:400}
.count{font-size:13px;color:var(--muted)}
.count b{color:var(--ink);font-weight:600}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--stone)}
.taps{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tap{min-height:52px;border-radius:12px;border:1px solid var(--stone);background:var(--white);font-size:15px;font-weight:500;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.tap svg{width:34px;height:44px}
.tap.w{grid-column:1/-1}
.tq{font-weight:600;font-size:15px;margin:2px 0 -4px}
.res{padding:14px 16px 140px;display:flex;flex-direction:column;gap:12px;background:var(--white)}
.ready{padding:14px 16px 140px;background:var(--white);display:flex;flex-direction:column;gap:10px}
.hd{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;font-weight:600}
.hd span{font-weight:400;color:var(--muted);font-size:13px}
.strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mini{border:1px solid var(--stone);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:4px;background:var(--white);text-align:left}
.mini .th{height:92px;display:flex;align-items:center;justify-content:center}
.mini img,.row img,.ph-img img{max-height:100%;max-width:100%;object-fit:contain}
.mini .t{font-size:12px;color:var(--muted);line-height:1.25}
.mini .p{font-weight:600;font-size:15px}
.card{border:1px solid var(--stone);border-radius:16px;overflow:hidden;background:var(--white)}
.card.best{border:1.5px solid var(--ink)}
.ph-img{height:190px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--paper2);background:var(--white);position:relative;padding:8px;border-left:0;border-right:0;border-top:0;width:100%}
.dots{position:absolute;bottom:8px;display:flex;gap:6px}
.dots i{width:7px;height:7px;border-radius:50%;background:#c9c5bc}
.dots i.on{background:var(--ink)}
.cb{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.b-ready{background:var(--ink);color:var(--white)}
.b-best{background:var(--plum);color:var(--white)}
.b-floor{border:1px solid var(--ink)}
.nm{font-size:17px;font-weight:600;line-height:1.25}
.price{font-family:var(--display);font-size:32px;font-weight:600;line-height:1}
.price small{font-family:var(--text);font-size:13px;color:var(--muted);font-weight:400;margin-left:4px}
.ln{font-size:14px;color:var(--muted)}
.ln b{color:var(--ink);font-weight:500}
.cta{position:relative;min-height:52px;border-radius:999px;background:var(--plum);color:var(--white);border:0;font-size:16px;font-weight:600;width:100%;margin-top:6px;transition:transform .12s ease,background-color .12s ease,box-shadow .12s ease}
.cta.pressed{transform:scale(.965);background:#55236e;box-shadow:0 0 0 7px rgba(111,47,141,.22)}
.cta.pressed::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.55);animation:tap .35s ease-out both}
@keyframes tap{from{transform:scale(1.7);opacity:.95}to{transform:scale(.8);opacity:0}}
.cta[disabled]{opacity:.6}
.ghost{min-height:44px;border-radius:999px;background:var(--white);border:1px solid var(--stone);font-size:15px;width:100%;color:var(--ink);text-decoration:none;display:flex;align-items:center;justify-content:center}
.also{font-weight:600;font-size:14px;margin-top:4px}
.row{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--stone);border-radius:12px;padding:8px 12px 8px 8px}
.row .th{height:62px;display:flex;align-items:center;justify-content:center}
.row .ln{display:block}
.row .p{font-weight:600}
button.row{width:100%;text-align:left;font:inherit;color:inherit;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
button.row .ln{display:block}
button.row:hover{border-color:var(--ink)}
.honest{display:flex;flex-direction:column;gap:10px}
.honest h3{font-family:var(--display);font-weight:600;font-size:27px;line-height:1.08;margin:0}
.grp{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
.ask.compact{padding:12px 16px}
.ask.compact .q,.ask.compact .sub,.ask.compact .or,.ask.compact .taps,.ask.compact .tq{display:none}
.ask.compact .box{min-height:0}

/* forms */
.sheet{padding:18px 16px 140px;display:flex;flex-direction:column;gap:12px;background:var(--paper)}
.fh3{font-family:var(--display);font-weight:600;font-size:28px;line-height:1.05;margin:0}
.fl{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);font-weight:500}
.fi{display:block;width:100%;min-height:46px;border:1.5px solid var(--stone);border-radius:12px;background:var(--white);padding:11px 12px;font-size:16px;color:var(--ink);font-weight:400}
.fi:focus{outline:0;border-color:var(--plum);box-shadow:0 0 0 4px var(--plum-tint)}
textarea.fi{min-height:84px;resize:vertical;line-height:1.4}
.consent{font-size:11.5px;line-height:1.4;color:var(--muted);margin:0}
.err{color:var(--bad);font-size:13px;margin:0}
.back{align-self:flex-start;border:0;background:transparent;color:var(--plum);font-weight:500;padding:4px 0}
.done{padding:28px 18px 140px;background:var(--paper);display:flex;flex-direction:column;gap:12px}
.done h3{font-family:var(--display);font-weight:600;font-size:30px;line-height:1.05;margin:0}

/* intro-only staff phone */
.lock{position:absolute;inset:0;z-index:5;background:linear-gradient(160deg,#3a2a4a,#1f2227 60%);color:#fff;display:flex;flex-direction:column;align-items:center;padding:104px 14px 0}
.lt{font-size:78px;font-weight:300;line-height:1;letter-spacing:-.02em}
.ld{font-size:17px;opacity:.85;margin:6px 0 40px}
.notif{width:100%;background:rgba(245,245,245,.94);color:#111;border-radius:18px;padding:12px 14px;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);animation:drop .5s cubic-bezier(.2,.8,.2,1)}
.nh{display:flex;justify-content:space-between;font-size:12px;color:#555;margin-bottom:4px}
.na{font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.nb{font-size:14.5px;line-height:1.38}
@keyframes drop{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}

/* end card */
.end{position:absolute;inset:0;z-index:6;padding:36px 22px;display:flex;flex-direction:column;gap:14px;background:var(--paper)}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);font-weight:500}
.end h1{font-family:var(--display);font-weight:500;font-size:44px;line-height:1;margin:0}
.end h1 em{color:var(--plum);font-style:italic}
.end p{margin:0;font-size:16px;max-width:34ch}
.end .reply{border-top:1px solid var(--stone);padding-top:14px;font-size:15px}
.end .row2{display:flex;gap:10px;flex-wrap:wrap}
.end button{min-height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--ink);background:transparent;font-size:14px}

.fade{animation:fade .35s ease}
.settle{animation:settle .24s ease-out both}
@keyframes settle{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* intro-only weekly report, styled like the finder */
.rep{position:absolute;inset:0;z-index:6;background:var(--paper);padding:56px 20px 96px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.rep-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rep h2{font-family:var(--display);font-weight:500;font-size:46px;line-height:.98;letter-spacing:-.01em;margin:0;text-wrap:balance}
.rep-tag{flex:none;margin-top:5px;background:var(--gold);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.rep-n{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rep-s{background:var(--white);border:1px solid var(--stone);border-radius:16px;padding:14px 14px 16px}
.rep-s.hi{background:var(--plum-tint);border-color:rgba(111,47,141,.3)}
.rep-s b{display:block;font-family:var(--display);font-weight:600;font-size:92px;line-height:.9;font-variant-numeric:lining-nums tabular-nums}
.rep-s.hi b{color:var(--plum)}
.rep-s span{display:block;margin-top:8px;font-size:14px;line-height:1.3;color:var(--muted)}
.rep-top{background:var(--white);border:1px solid var(--stone);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.rep-top p{margin:0;font-size:17px;line-height:1.35;font-weight:600}
.rep-foot{font-size:12.5px;color:var(--muted);margin:0}
@keyframes fade{from{opacity:.001;transform:translateY(4px)}to{opacity:1;transform:none}}

/* desktop */
@media (min-width:900px){
  body{min-height:100vh}
  .ownerbar,.sent{display:none!important}
  .stage{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:center;padding:40px 96px;max-width:1440px;margin:0 auto}
  .notes{display:flex;flex-direction:column;gap:22px;max-width:560px}
  .notes .eyebrow{font-size:12px}
  .notes h1{font-family:var(--display);font-weight:500;font-size:clamp(44px,4.4vw,62px);line-height:.98;letter-spacing:-.01em;margin:0}
  .notes h1 em{color:var(--plum);font-style:italic}
  .notes .now{font-size:21px;line-height:1.35;max-width:28ch;margin:0}
  .nbody{display:contents}
  .notes.quiet{gap:10px}
  .notes.quiet .now{font-size:18px;color:var(--muted);min-height:0}
  .dctl{display:flex;gap:10px;flex-wrap:wrap}
  .dbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--ink);background:transparent;font-size:15px}
  .dbtn.dark{background:var(--ink);color:var(--white)}
  .dbtn[aria-pressed="true"]{background:var(--plum);border-color:var(--plum);color:var(--white)}
  .dsent{background:var(--ink);color:var(--paper);border-radius:14px;padding:14px 16px;font-size:15px;line-height:1.4;border:1px solid rgba(251,176,64,.6);max-width:44ch}
  .dsent b{display:flex;align-items:center;gap:8px;color:var(--white);margin-bottom:4px}
  .dsent.fail{border-color:#e98b7c}
  .device{width:min(430px,calc((100vh - 80px) * .5375));height:min(800px,calc((100vh - 80px)));border-radius:52px;background:var(--ink);padding:14px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(38,39,37,.55),0 0 0 1px #c9a15d inset}
  .device .shop{height:100%;min-height:0;border-radius:40px;overflow-y:auto;overscroll-behavior:contain}
  .res,.ready,.sheet,.done{padding-bottom:28px}
  .rep{padding:40px 20px 80px}
  /* during the intro the owner controls become a small dock, above the words layer */
  body[data-mode="intro"] .dctl{position:fixed;top:18px;left:calc(max(0px,(100vw - 1440px)/2) + 96px);z-index:30;padding:6px;border-radius:999px;background:rgba(38,39,37,.94);box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}
  body[data-mode="intro"] .dctl::after{content:"";position:absolute;left:14px;right:14px;bottom:-7px;height:3px;border-radius:2px;background:var(--gold);transform:scaleX(var(--p,0));transform-origin:left;transition:transform var(--pd,.4s) linear}
  body[data-mode="intro"] .dctl .dbtn{border-color:rgba(244,240,232,.35);color:var(--paper);min-height:40px}
  body[data-mode="intro"] .dctl .dbtn.dark{background:var(--paper);color:var(--ink);border-color:var(--paper)}
  body[data-mode="intro"] .dctl .dbtn[aria-pressed="true"]{background:var(--plum);border-color:var(--plum);color:var(--white)}
}
@media (max-width:899px){.stage{display:block}.device{display:contents}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* Kinetic words laid over the finder: full beats (big, blurred scrim) and a small pinned version. Only transform, opacity and blur move. */
.kin{position:fixed;inset:0;z-index:25;pointer-events:none;overflow:hidden}
.kin-scrim{position:absolute;inset:0;background:rgba(18,14,24,var(--dim,.64));-webkit-backdrop-filter:blur(10px) saturate(.9);backdrop-filter:blur(10px) saturate(.9);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
.kin.full .kin-scrim{opacity:1;visibility:visible;transition:opacity .22s ease,visibility 0s}
.kin-words{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--bar) + 8px) 20px 6vh;text-align:center}
.kin-words.out{animation:kin-out .3s cubic-bezier(.4,0,.9,.6) both}
.kl{display:block;width:max-content;max-width:100%;font-family:var(--text);font-weight:800;font-size:var(--fit,clamp(44px,14.6vw,58px));line-height:.92;letter-spacing:-.025em;text-transform:uppercase;text-wrap:balance;color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.3),0 14px 34px rgba(0,0,0,.5),3px 4px 0 rgba(255,255,255,.1);
  transform-origin:50% 60%;will-change:transform,opacity,filter;
  animation:kin-in .48s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 90ms)}
.kl.gold{color:var(--gold);text-shadow:0 2px 0 rgba(84,46,0,.5),0 14px 34px rgba(0,0,0,.5),3px 4px 0 rgba(251,176,64,.24)}
.kin-words.measure .kl{white-space:nowrap;max-width:none}
@keyframes kin-in{from{opacity:0;transform:perspective(900px) translateY(16px) rotateX(-18deg) scale(1.08);filter:blur(10px)}to{opacity:1;transform:perspective(900px) translateY(0) rotateX(0) scale(1);filter:none}}
@keyframes kin-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.96)}}
@keyframes kin-fade{from{opacity:0}to{opacity:1}}
@keyframes kin-fade-out{from{opacity:1}to{opacity:0}}
.kin-pin{position:absolute;left:0;right:0;top:var(--bar);padding:12px 18px 36px;text-align:center;
  background:rgba(18,14,24,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 68%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 68%,transparent 100%);
  opacity:0;transform:translateY(-12px);transition:opacity .28s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.kin-pin.on{opacity:1;transform:none}
.kin-pin .kl{font-size:clamp(22px,6.6vw,27px);line-height:.98;margin-inline:auto;animation:none;will-change:auto;text-shadow:0 1px 0 rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.5)}
.kin-pin .kl.gold{text-shadow:0 1px 0 rgba(84,46,0,.5),0 4px 14px rgba(0,0,0,.5)}
@media (min-width:900px){
  .kin-words{padding:0 clamp(40px,6vw,96px)}
  .kl{font-size:var(--fit,clamp(88px,8.3vw,120px))}
  .kin-pin{left:calc(max(0px,(100vw - 1440px)/2) + 96px);right:auto;top:92px;width:max-content;max-width:var(--pinw,560px);padding:20px 30px 22px;text-align:left;border-radius:22px;background:rgba(24,20,30,.95);-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none;box-shadow:0 24px 50px -24px rgba(0,0,0,.6),0 0 0 1px rgba(251,176,64,.35) inset}
  .kin-pin .kl{font-size:clamp(34px,3.3vw,50px);margin-inline:0}
}
@media (prefers-reduced-motion: reduce){
  .kl{animation:kin-fade .3s ease both!important;animation-delay:calc(var(--i,0) * 90ms)!important;filter:none!important;will-change:auto}
  .kin-pin .kl{animation:none!important}
  .kin-words.out{animation:kin-fade-out .3s ease both!important}
  .kin-scrim{transition:opacity .3s ease!important}
  .kin-pin{transition:opacity .3s ease!important;transform:none}
  .shop{transition:opacity .4s ease!important}
  .shop.away{transform:none;opacity:0}
}

.finding{margin:0;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px}
.finding::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--plum)}
/* Special order and the matched column set */
.b-order{background:var(--plum-tint);color:var(--plum)}
.card.set .setrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 14px}
.setu{display:flex;flex-direction:column;gap:4px;border:1px solid var(--stone);border-radius:12px;padding:8px;background:var(--white)}
.setu .th{height:120px;display:flex;align-items:center;justify-content:center}
.setu img{max-height:100%;max-width:100%;object-fit:contain}
.setu .ln{font-size:12px;line-height:1.3}
.setu .p{font-weight:600;font-size:14px}
.cc{margin-top:6px}
.cc ol{margin:6px 0 4px;padding-left:20px;display:flex;flex-direction:column;gap:3px;font-size:14px;line-height:1.35}
.now.scope{font-size:13px;color:var(--muted)}

/* The intro video: plays over the finder, muted until Sound on, then hands over to the live finder. No music continues after it. */
.vid{position:fixed;inset:0;z-index:50;background:var(--paper);display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}
.vid.out{opacity:0;pointer-events:none}
.vid video{width:100%;height:100%;object-fit:contain;display:block;background:var(--paper)}
.vctl{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;gap:8px}
.vbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font-size:15px}
.vbtn svg{width:16px;height:16px;flex:none}
.vbtn.dark{background:var(--ink);color:var(--white)}
.vbtn[aria-pressed="true"]{background:var(--plum);border-color:var(--plum);color:var(--white)}
.vplay{position:absolute;width:88px;height:88px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center}
.vplay svg{width:34px;height:34px}
@media (min-width:900px){.vctl{justify-content:flex-start;left:calc(max(0px,(100vw - 1440px)/2) + 24px);right:auto;top:18px;bottom:auto}}
/* Set options: brand chips over the set, then per part chip rows (width, finish, hinge, edition, accent). The chosen one is filled.
   With chips each part takes its own row, photo on the left, so the chips wrap inside it at phone width. */
.card.set .setrow.opts{grid-template-columns:minmax(0,1fr)}
.setrow.opts .setu{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:12px;row-gap:4px;align-content:start}
.setrow.opts .setu>.th{grid-column:1;grid-row:1 / span 8;height:150px;align-items:flex-start}
.setrow.opts .setu>:not(.th){grid-column:2;min-width:0}
.setc{margin-top:4px;gap:5px}
.setb{margin-top:10px}
.chip.pick{border-radius:16px;padding:4px 10px;font-size:12px;line-height:1.25;flex-wrap:wrap;column-gap:5px;row-gap:0;text-align:left;max-width:100%}
.chip.pick span{color:var(--muted);font-weight:400}
.chip.pick[aria-pressed="true"]{background:var(--plum);color:var(--white)}
.chip.pick[aria-pressed="true"] span{color:var(--white)}