/* =========================================================
   Builder's Workshop
   Same vocabulary as the rest of the site: timber frame, kraft
   order-form panels, brass detail, Bevan / Oswald / Lora.
   ========================================================= */

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

/* Plain price list stays visible only if the workshop failed to load */
.has-workshop [data-workshop-fallback]{ display:none; }
.workshop__loading{ text-align:center; color:var(--ink-soft); font-style:italic; padding:2rem 0; }
.workshop{ margin:3.4rem 0 2.6rem; scroll-margin-top:96px; }
.has-workshop .tags{ margin-bottom:0; }

.ws{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  grid-template-areas:"stage panel" "stage sum";
  gap:1.6rem 2.4rem; align-items:start;
  padding:2.2rem;
  background:var(--linen);
  border:3px solid var(--walnut);
  outline:1px solid var(--brass); outline-offset:-9px;
  box-shadow:0 22px 50px -22px rgba(38,24,13,.55);
}

/* ── Stage (preview) ───────────────────────────────── */
.ws__stage{ grid-area:stage; position:sticky; top:104px; align-self:start; }
.ws__view{ margin:0; }
.ws__canvas{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:var(--parchment);
  border:6px solid var(--walnut-2);
  box-shadow:inset 0 0 0 1px var(--brass), 0 12px 28px -14px rgba(0,0,0,.5);
}
.ws__sketch, .ws__photo{ position:absolute; inset:0; width:100%; height:100%; }
.ws__sketch svg{ display:block; width:100%; height:100%; }
.ws__photo{ object-fit:cover; opacity:0; transition:opacity .35s var(--ease); }
.ws__photo.is-on{ opacity:1; }
.ws__badge{
  margin-top:.55rem; font-size:.8rem; line-height:1.4; color:var(--ink-soft); font-style:italic;
}
.ws__name{
  margin:.9rem 0 .2rem; font-family:"Bevan",serif; font-size:1.45rem; line-height:1.15; color:var(--walnut);
}
.ws__also{ list-style:none; margin:.35rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.ws__also:empty{ display:none; }
.ws__also li{
  font-family:"Oswald",sans-serif; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase;
  padding:.28rem .6rem; background:var(--walnut); color:var(--brass-lt); border-radius:var(--r-sm);
}

/* Magnified close-ups for hardware/finish details the main photo can't show
   at full-well scale (crank style, bucket, grade, water pump…). */
.ws__detail{ list-style:none; margin:.7rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.ws__detail:empty{ display:none; }
.ws__detail li{ width:76px; }
.ws__detail figure{ margin:0; }
.ws__detail img{
  display:block; width:76px; height:76px; object-fit:cover;
  border:3px solid var(--walnut-2); box-shadow:inset 0 0 0 1px var(--brass), 0 4px 10px -6px rgba(0,0,0,.6);
}
.ws__detail figcaption{
  margin-top:.3rem; font-size:.66rem; line-height:1.25; color:var(--ink-soft); text-align:center;
}

/* Total + CTA under the picture (desktop); pinned bar on phones */
.ws__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:1rem; padding:.85rem 1rem;
  background:var(--walnut); color:var(--on-dark); border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.5);
}
.ws__bar span{ display:block; font-family:"Oswald",sans-serif; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-2); }
.ws__bar strong{ font-family:"Bevan",serif; font-size:1.7rem; line-height:1.1; color:var(--brass-lt); }
.ws__bar .btn{ white-space:nowrap; }

/* ── Steps ─────────────────────────────────────────── */
.ws__panel{ grid-area:panel; min-width:0; }
.ws__intro{ margin:0 0 1.4rem; color:var(--ink-soft); }
.wsg{ border:0; margin:0 0 1.7rem; padding:0; min-width:0; }
.wsg[hidden]{ display:none; }
.wsg legend{
  display:flex; align-items:center; gap:.65rem; padding:0; margin-bottom:.3rem;
  font-family:"Oswald",sans-serif; font-weight:500; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; color:var(--walnut);
}
.wsg__num{
  display:inline-grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%;
  background:var(--walnut); color:var(--brass-lt); font-size:.85rem; letter-spacing:0;
  box-shadow:0 0 0 2px var(--linen), 0 0 0 3px var(--brass);
}
.wsg__hint{ margin:0 0 .75rem; font-size:.9rem; color:var(--ink-soft); }
.wsg__opts{ display:grid; gap:.6rem; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); }
.wsg__opts--cards{ grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); }

.opt{ position:relative; display:block; cursor:pointer; }
.opt[hidden]{ display:none; }
.opt input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.opt__face{
  position:relative; display:flex; flex-direction:column; gap:.2rem; height:100%;
  padding:.7rem .75rem .65rem;
  background:var(--bone); border:2px solid var(--kraft); border-radius:var(--r-md);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease), background .18s var(--ease);
}
.opt:hover .opt__face{ border-color:var(--cedar); transform:translateY(-1px); }
.opt input:focus-visible + .opt__face{ outline:3px solid var(--brass); outline-offset:2px; }
.opt input:checked + .opt__face{
  border-color:var(--walnut); background:#fff8e8;
  box-shadow:inset 0 0 0 1px var(--brass), 0 6px 14px -8px rgba(38,24,13,.6);
}
.opt input:checked + .opt__face::after{
  content:""; position:absolute; top:.45rem; right:.5rem; width:1.15rem; height:1.15rem; border-radius:50%;
  background:var(--walnut) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.4' fill='none' stroke='%23e8cd7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;
}
.opt__art{ display:block; aspect-ratio:1/1; margin-bottom:.35rem; border-radius:2px; overflow:hidden; background:var(--parchment); }
.opt__art:empty{ display:none; }
.opt__art svg, .opt__art img{ display:block; width:100%; height:100%; object-fit:cover; }
.wsg__opts--cards .opt__art{ aspect-ratio:16/9; }
.wsg__opts--cards .opt__art svg{ object-fit:contain; }

.opt__name{ font-family:"Oswald",sans-serif; font-weight:500; font-size:1rem; letter-spacing:.03em; color:var(--walnut); padding-right:1.3rem; }
.opt__desc{ font-size:.82rem; line-height:1.35; color:var(--ink-soft); }
.opt__price{ margin-top:auto; padding-top:.3rem; font-family:"Oswald",sans-serif; font-size:.9rem; letter-spacing:.04em; color:var(--redwood); }
.opt__badge{
  position:absolute; top:-.55rem; left:.55rem; z-index:1;
  font-family:"Oswald",sans-serif; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.16rem .5rem; background:var(--brass); color:var(--iron); border-radius:var(--r-sm);
}
.opt__badge--demo{ background:var(--kraft); color:var(--ink-soft); border:1px dashed var(--ink-soft); left:auto; right:.55rem; }

/* ── Itemized summary ──────────────────────────────── */
.ws__sum{
  grid-area:sum; padding:1.3rem 1.4rem;
  background:var(--kraft) var(--tex-paper, none); border:1px solid rgba(38,24,13,.35); border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.ws__sumtitle{ margin:0 0 .6rem; font-family:"Bevan",serif; font-size:1.25rem; color:var(--walnut); }
.ws__lines{ list-style:none; margin:0; padding:0; }
.ws__lines li{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.42rem 0; border-bottom:1px dashed rgba(38,24,13,.35);
}
.ws__lines small{ display:block; font-family:"Oswald",sans-serif; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.ws__lines b{ font-family:"Oswald",sans-serif; font-weight:500; white-space:nowrap; }
.ws__lines .is-pending b, .ws__lines .is-quote b{ color:var(--redwood); font-style:italic; }
.ws__lines .is-included b{ color:var(--forest-2); }
.ws__total{ display:flex; justify-content:space-between; align-items:baseline; margin:.9rem 0 .4rem; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.1em; }
.ws__total strong{ font-family:"Bevan",serif; font-size:2.1rem; letter-spacing:0; color:var(--walnut); }
.ws__total strong.is-bump{ animation:wsBump .38s var(--ease); }
@keyframes wsBump{ 40%{ transform:scale(1.06); } }
.ws__pending{ margin:0 0 .8rem; font-size:.86rem; color:var(--redwood); font-style:italic; }
.ws__tools{ display:flex; justify-content:space-between; gap:1rem; margin-top:.7rem; }
.ws__link{ background:none; border:0; padding:.2rem 0; cursor:pointer; font:inherit; font-size:.86rem; color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.ws__link:hover{ color:var(--redwood); }
.ws__fine{ margin:.9rem 0 0; font-size:.78rem; color:var(--ink-soft); }

.ws__toast{
  position:absolute; left:50%; bottom:1rem; transform:translate(-50%,10px); opacity:0; pointer-events:none;
  padding:.5rem 1rem; background:var(--walnut); color:var(--brass-lt); border-radius:var(--r-sm);
  font-family:"Oswald",sans-serif; letter-spacing:.06em; transition:.25s var(--ease);
}
.ws__toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ── Tablet / phone ────────────────────────────────── */
@media (max-width:980px){
  .ws{ grid-template-columns:1fr; grid-template-areas:"stage" "panel" "sum"; padding:1.1rem; gap:1.2rem; outline-offset:-6px; }
  /* Picture stays pinned under the nav while you scroll the options */
  .ws__stage{ position:sticky; top:72px; z-index:5; margin:-1.1rem -1.1rem 0; padding:.6rem 1.1rem .5rem; background:var(--linen); box-shadow:0 10px 16px -12px rgba(38,24,13,.6); }
  .ws__canvas{ aspect-ratio:auto; height:min(34vh,300px); border-width:4px; }
  .ws__photo{ object-fit:contain; background:var(--parchment); }
  .ws__sketch svg{ object-fit:contain; }
  .ws__name{ font-size:1.15rem; margin-top:.5rem; }
  .ws__badge{ font-size:.7rem; margin-top:.3rem; }
  .ws__also{ display:none; }
  /* Total + button pin to the bottom of the screen while the workshop is in view */
  .ws__bar{
    position:fixed; left:0; right:0; bottom:0; z-index:90; margin:0; border-radius:0;
    padding:.7rem 1.1rem calc(.7rem + env(safe-area-inset-bottom));
    transform:translateY(110%); transition:transform .25s var(--ease);
  }
  .ws__bar.is-live{ transform:none; }
  .ws{ padding-bottom:5.5rem; }
}
@media (max-width:520px){
  .wsg__opts, .wsg__opts--cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (prefers-reduced-motion:reduce){
  .ws__photo, .opt__face, .ws__bar, .ws__toast{ transition:none; }
  .ws__total strong.is-bump{ animation:none; }
}