/* ═══════════════════════════════════════════════
   ACHUTA HANDMADE — builder page
   ═══════════════════════════════════════════════ */

.builder-body{ overflow-x:hidden; }
.builder-body .site-head{
  background:linear-gradient(rgba(6,5,4,.9), rgba(6,5,4,0));
}

.builder{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(360px, 520px);
  min-height:100vh; min-height:100svh;
}

/* ── stage ── */
.stage{
  position:sticky; top:0; height:100vh; height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.6rem; overflow:hidden;
}
.stage-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46% 40% at 50% 46%, rgba(199,154,110,.10), transparent 70%);
}
#watch{
  width:min(72vh, 88%); max-width:560px; height:auto; display:block;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.65));
}
.stage-caption{
  font-size:.58rem; letter-spacing:.42em; text-indent:.42em;
  text-transform:uppercase; color:var(--bone-4);
}

/* ── panel ── */
.panel{
  padding:clamp(6rem,12vh,8rem) clamp(1.8rem,4vw,4rem) 3rem;
  border-left:1px solid rgba(234,227,214,.07);
  background:var(--ink);
}
.panel-title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.6rem,4.5vw,3.6rem); line-height:1;
  margin:1.4rem 0 .9rem;
}
.panel-sub{
  font-family:var(--serif); font-style:italic; color:var(--bone-4);
  font-size:1.05rem; margin-bottom:3rem;
}

/* categories */
.cat{ margin-bottom:2.2rem; }
.cat-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:.9rem;
}
.cat-name{
  font-size:.6rem; letter-spacing:.4em; text-transform:uppercase; color:var(--gold);
}
.cat-current{
  font-family:var(--serif); font-style:italic; font-size:.95rem; color:var(--bone-6);
}
.opts{ display:flex; flex-wrap:wrap; gap:.7rem; }
.opt{
  appearance:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  background:transparent; padding:.35rem .3rem; min-width:64px;
  color:var(--bone-4);
  transition:color .35s ease;
}
.opt .sw{
  width:34px; height:34px; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(234,227,214,.18), inset -6px -8px 12px rgba(0,0,0,.35), inset 5px 6px 10px rgba(255,255,255,.14);
  position:relative;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.opt .sw::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid transparent;
  transition:border-color .35s ease;
}
.opt span{ font-size:.6rem; letter-spacing:.14em; text-align:center; line-height:1.3; }
.opt:hover{ color:var(--bone-6); }
.opt:hover .sw{ transform:translateY(-2px); }
.opt[aria-pressed="true"]{ color:var(--bone); }
.opt[aria-pressed="true"] .sw::after{ border-color:var(--gold); }
.opt:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }

/* fixed movement spec */
.fixed-spec{
  display:flex; flex-direction:column; gap:.45rem;
  padding:1.1rem 0 1.4rem; margin:2.6rem 0;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.fixed-spec .spec-k{ font-size:.58rem; letter-spacing:.4em; text-transform:uppercase; color:var(--gold); }
.fixed-spec .spec-v{ font-family:var(--serif); font-style:italic; color:var(--bone-6); font-size:1rem; }

/* code box */
.code-box{ margin-top:3rem; }
.code{
  font-family:var(--sans); font-weight:400;
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  letter-spacing:.24em; color:var(--bone);
  margin:1.1rem 0 .8rem;
  font-variant-numeric:tabular-nums;
}
.code-hint{
  font-size:.78rem; line-height:1.8; color:var(--bone-4);
  max-width:42ch; letter-spacing:.02em; margin-bottom:1.4rem;
}
.code-actions{ display:flex; gap:.9rem; flex-wrap:wrap; }
.btn{
  appearance:none; cursor:pointer; display:inline-block;
  font-family:var(--sans); font-weight:400;
  font-size:.62rem; letter-spacing:.38em; text-indent:.38em; text-transform:uppercase;
  padding:1.05rem 1.9rem 1rem; border:none;
  transition:background .4s ease, color .4s ease, border-color .4s ease;
}
.btn--gold{ background:var(--gold); color:var(--void); }
.btn--gold:hover{ background:var(--bone); }
.btn--ghost{
  background:transparent; color:var(--bone-6);
  border:1px solid rgba(234,227,214,.22);
}
.btn--ghost:hover{ border-color:var(--gold); color:var(--bone); }
.btn:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }
.copied{
  margin-top:.9rem; font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); min-height:1em;
}

/* load box */
.load-box{ margin-top:3.2rem; padding-top:2.4rem; border-top:1px solid rgba(234,227,214,.08); }
.load-row{ display:flex; gap:.8rem; margin-top:1.1rem; }
#code-input{
  flex:1; min-width:0;
  background:transparent; border:none; border-bottom:1px solid rgba(234,227,214,.25);
  color:var(--bone); font-family:var(--sans); font-weight:300;
  font-size:.95rem; letter-spacing:.18em; padding:.6rem .1rem;
  text-transform:uppercase;
}
#code-input::placeholder{ color:rgba(234,227,214,.25); letter-spacing:.18em; }
#code-input:focus{ outline:none; border-bottom-color:var(--gold); }
.load-msg{
  margin-top:.9rem; font-size:.72rem; letter-spacing:.06em; line-height:1.7;
  color:var(--bone-4); min-height:1.2em;
}
.load-msg.ok{ color:var(--gold); }
.load-msg.err{ color:#c96a5a; }

.builder-foot{
  margin-top:4.5rem; padding-top:1.8rem;
  border-top:1px solid rgba(234,227,214,.08);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; color:var(--bone-4);
}
.builder-foot a{ color:var(--bone-6); transition:color .35s ease; }
.builder-foot a:hover{ color:var(--gold); }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px;
  clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap;
}

/* ── responsive ── */
@media (max-width:980px){
  .builder{ grid-template-columns:1fr; }
  .stage{
    position:relative; height:auto; min-height:0;
    padding:6.5rem 1rem 1.6rem;
  }
  #watch{ width:min(74vw, 340px); }
  .panel{ border-left:none; padding-top:2.6rem; }
}

/* ═══ layered part-image preview ═══ */
.stack{
  position:relative;
  width:min(60vh, 82%); max-width:480px;
  aspect-ratio:3 / 4;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.65));
}
.layer{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:block; pointer-events:none;
}
.sec-rot{
  transform-origin:50% 50%;
  /* mechanical sweep: 21,600 vph = 6 beats/sec = 360 micro-steps per minute */
  animation:sweep 60s steps(360) infinite;
}
@keyframes sweep{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}
@media (prefers-reduced-motion:reduce){
  .sec-rot{ animation:none; transform:rotate(204deg); }
}

/* ═══ filter chips ═══ */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.chip{
  appearance:none; cursor:pointer; background:transparent;
  border:1px solid rgba(234,227,214,.16);
  color:var(--bone-4);
  font-family:var(--sans); font-weight:300;
  font-size:.58rem; letter-spacing:.22em; text-transform:uppercase;
  padding:.45rem .85rem .4rem;
  transition:color .3s ease, border-color .3s ease;
}
.chip:hover{ color:var(--bone-6); border-color:rgba(234,227,214,.35); }
.chip[aria-pressed="true"]{ color:var(--gold); border-color:var(--gold); }
.chip:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }

/* ═══ part cards ═══ */
.cat{ margin-bottom:3rem; }
.cat-count{
  font-size:.55rem; color:var(--bone-4); letter-spacing:.2em; margin-left:.4rem;
}
.grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(128px, 1fr));
  gap:.8rem;
}
.card{
  appearance:none; cursor:pointer; text-align:left;
  background:rgba(234,227,214,.03);
  border:1px solid rgba(234,227,214,.09);
  padding:.7rem .7rem .8rem;
  display:flex; flex-direction:column; gap:.55rem;
  color:var(--bone-6);
  transition:border-color .35s ease, background .35s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.card:hover{ border-color:rgba(234,227,214,.28); transform:translateY(-2px); }
.card[aria-pressed="true"]{
  border-color:var(--gold);
  background:rgba(199,154,110,.07);
  color:var(--bone);
}
.card:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }
.card-thumb{
  display:block; width:100%; aspect-ratio:1;
  background-color:#0b0a09;
  background-repeat:no-repeat; background-position:50% 50%;
  border:1px solid rgba(234,227,214,.06);
}
.t-case { background-size:contain; }
.t-dial { background-size:240%; }
.t-hands{ background-size:340%; background-position:50% 48.5%; }
.t-sec  { background-size:340%; background-position:50% 46.5%; }
.t-mov  { background-size:215%; }
.card-name{
  font-family:var(--serif); font-size:.98rem; line-height:1.25; color:inherit;
}
.card-vendor{
  font-size:.56rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-4); line-height:1.5;
}
.card[aria-pressed="true"] .card-vendor{ color:var(--gold); }

@media (max-width:980px){
  .stack{ width:min(72vw, 330px); }
  .grid{ grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); }
}

/* ═══ incompatible (greyed) parts ═══ */
.card.is-off{
  opacity:.34;
  filter:grayscale(.75);
  cursor:not-allowed;
}
.card.is-off:hover{ transform:none; border-color:rgba(234,227,214,.09); }
.card-why{
  font-size:.56rem; letter-spacing:.06em; line-height:1.5;
  color:#c96a5a; min-height:0;
}
.card-why:empty{ display:none; }

/* date-wheel thumbnails zoom onto the 3 o'clock window */
.t-dw{ background-size:620%; background-position:63.5% 50%; }

/* band thumbnails show the whole strap */
.t-band{ background-size:contain; }

/* ═══ collapsible categories ═══ */
.cat-toggle{
  appearance:none; background:transparent; border:none; cursor:pointer;
  display:flex; align-items:center; gap:.6rem; padding:.2rem .2rem .2rem 0;
  color:inherit; font:inherit;
}
.cat-toggle:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }
.caret{
  width:0; height:0; flex:none;
  border-left:5px solid var(--gold);
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transform:rotate(90deg);                    /* pointing down = open */
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.cat.is-collapsed .caret{ transform:rotate(0deg); }   /* pointing right = closed */
.cat-body{
  display:grid; grid-template-rows:1fr;
  transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1);
}
.cat.is-collapsed .cat-body{ grid-template-rows:0fr; }
.cat-body-inner{
  overflow:hidden; min-height:0;
  visibility:visible; transition:visibility 0s linear 0s;
}
.cat.is-collapsed .cat-body-inner{
  visibility:hidden; transition:visibility 0s linear .45s;
}
.cat.is-collapsed{ margin-bottom:1.6rem; }
@media (prefers-reduced-motion:reduce){
  .cat-body, .caret{ transition-duration:.01s; }
  .cat.is-collapsed .cat-body-inner{ transition-delay:0s; }
}

/* ═══ colour-variant dots ═══ */
.card--group{ cursor:pointer; }
.dots{ display:flex; gap:.45rem; padding-top:.1rem; }
.dot{
  appearance:none; border:1px solid rgba(234,227,214,.3); padding:0;
  width:15px; height:15px; border-radius:50%; cursor:pointer; flex:none;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
.dot:hover{ transform:scale(1.15); }
.dot[aria-pressed="true"]{
  box-shadow:0 0 0 2px var(--ink), 0 0 0 3px var(--gold);
}
.dot.is-off{ opacity:.22; cursor:not-allowed; }
.dot.is-off:hover{ transform:none; }
.dot:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }

/* ═══ pricing ═══ */
.card{ position:relative; }
.card-price{
  position:absolute; top:.95rem; right:.95rem; z-index:2;
  background:rgba(6,5,4,.78); color:var(--gold);
  font-size:.55rem; letter-spacing:.12em;
  padding:.28rem .45rem .22rem;
  border:1px solid rgba(199,154,110,.25);
  pointer-events:none;
}
.card-price:empty{ display:none; }
.total-box{
  margin-top:3rem; padding:1.4rem 0 1.5rem;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.total{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,3.4vw,2.6rem); line-height:1;
  margin:.9rem 0 .6rem; color:var(--bone);
}
.total-fine{ font-size:.68rem; letter-spacing:.08em; color:var(--bone-4); }

/* ═══ mobile mini summary bar ═══ */
.mini-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:none; align-items:center; gap:1rem;
  padding:.65rem 1rem calc(.65rem + env(safe-area-inset-bottom, 0px));
  background:rgba(12,10,8,.94);
  border-top:1px solid rgba(199,154,110,.25);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transform:translateY(110%);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.mini-bar.on{ transform:none; }
@media (max-width:980px){ .mini-bar{ display:flex; } }
.mini-stack{ position:relative; width:42px; height:56px; flex:none; }
.mini-layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.mini-sec{ transform:rotate(204deg); transform-origin:50% 50%; }
.mini-info{ display:flex; flex-direction:column; gap:.15rem; flex:1; min-width:0; }
.mini-label{ font-size:.52rem; letter-spacing:.32em; text-transform:uppercase; color:var(--bone-4); }
.mini-total{ font-family:var(--serif); font-size:1.25rem; line-height:1; color:var(--bone); }
.mini-view{
  appearance:none; background:transparent; cursor:pointer;
  border:1px solid rgba(234,227,214,.25); color:var(--bone-6);
  font-family:var(--sans); font-size:.56rem; letter-spacing:.3em; text-transform:uppercase;
  padding:.75rem 1rem .7rem; flex:none;
}
.mini-view:active{ border-color:var(--gold); color:var(--bone); }
@media (prefers-reduced-motion:reduce){ .mini-bar{ transition:none; } }

/* ═══ my builds ═══ */
.saved-box{ margin-top:3.2rem; padding-top:2.4rem; border-top:1px solid rgba(234,227,214,.08); }
.saved-empty{ margin-top:1rem; font-size:.72rem; letter-spacing:.06em; line-height:1.7; color:var(--bone-4); }
.saved-list{ margin-top:.4rem; }
.saved-row{
  display:grid; grid-template-columns:1fr auto; grid-template-areas:"name actions" "meta actions";
  gap:.15rem 1rem; align-items:center;
  padding:1rem .1rem; border-bottom:1px solid rgba(234,227,214,.08);
}
.saved-name{ grid-area:name; font-family:var(--serif); font-size:1.02rem; color:var(--bone); }
.saved-meta{ grid-area:meta; font-size:.62rem; letter-spacing:.14em; color:var(--gold); font-variant-numeric:tabular-nums; }
.saved-actions{ grid-area:actions; display:flex; align-items:center; gap:.7rem; }
.saved-actions .btn{ padding:.7rem 1.1rem .65rem; font-size:.55rem; }
.saved-del{
  appearance:none; background:transparent; border:none; cursor:pointer;
  color:var(--bone-4); font-size:.85rem; padding:.4rem;
  transition:color .3s ease;
}
.saved-del:hover{ color:#c96a5a; }