/* Studio Quote Builder — front end
   Colours arrive as inline CSS variables from the admin colour pickers. */

.s15qb{
  --s15qb-ink:#111111;
  --s15qb-dark:#1D3939;
  --s15qb-accent:#D8AC97;
  --s15qb-accent-dk:#FEEBE3;
  --s15qb-surface:#F8F8F7;
  --s15qb-line:#E4E4E2;
  --s15qb-steel:#5E6260;

  display:grid;
  grid-template-columns:1fr 320px;
  gap:24px;
  align-items:start;
  color:var(--s15qb-ink);
  line-height:1.65;
}
@media(max-width:900px){ .s15qb{ grid-template-columns:1fr; } }
.s15qb *{ box-sizing:border-box; }
.s15qb-form{ min-width:0; }

/* Belt-and-braces: some themes apply their own display rules to generic
   elements (form, aside, div) that can outrank the browser's default
   [hidden]{display:none} rule. Force it here so the JS toggle always wins,
   regardless of what the active theme does elsewhere on the page. */
.s15qb-form[hidden],
.s15qb-rail[hidden],
.s15qb-done[hidden]{ display:none !important; }

.s15qb-h{ font-size:clamp(22px,3vw,30px); line-height:1.14; font-weight:700;
  letter-spacing:-.02em; margin:0 0 12px; color:var(--s15qb-ink); }
.s15qb-intro{ font-size:16px; line-height:1.7; color:var(--s15qb-steel);
  margin:0 0 28px; max-width:56ch; }

.s15qb-block{ background:var(--s15qb-surface); border:1px solid var(--s15qb-line);
  padding:24px 22px 26px; margin:0 0 16px; }

.s15qb-slabel{ display:flex; justify-content:space-between; align-items:baseline;
  gap:14px; font-size:15px; font-weight:600; margin:0 0 12px; }
.s15qb-val{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px;
  font-weight:700; background:#fff; border:1px solid var(--s15qb-line); padding:4px 11px; }
.s15qb input[type=range]{ width:100%; height:26px; margin:0; display:block;
  accent-color:var(--s15qb-dark); }
.s15qb-hint{ font-size:13px; line-height:1.6; color:var(--s15qb-steel); margin:8px 0 0; }

.s15qb-lab{ font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:var(--s15qb-steel); margin:0 0 14px; }

.s15qb-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.s15qb-chip{ background:#fff; border:1px solid var(--s15qb-line); color:var(--s15qb-ink);
  font-family:inherit; font-size:13.5px; font-weight:500; line-height:1.3;
  padding:10px 14px; cursor:pointer; border-radius:0; -webkit-appearance:none;
  appearance:none; transition:border-color .16s, background .16s, color .16s; text-align:left; }
.s15qb-chip:hover{ border-color:var(--s15qb-steel); }
.s15qb-chip:focus-visible{ outline:2px solid var(--s15qb-dark); outline-offset:2px; }
.s15qb-chip.is-on{ background:var(--s15qb-dark); border-color:var(--s15qb-dark);
  color:#fff; font-weight:600; }
.s15qb-chipamt{ display:block; font-size:11.5px; font-weight:400; opacity:.7; margin-top:3px; }

.s15qb-fields{ display:grid; grid-template-columns:1fr 1fr; gap:16px; position:relative; }
@media(max-width:620px){ .s15qb-fields{ grid-template-columns:1fr; } }
.s15qb-f{ display:flex; flex-direction:column; }
.s15qb-full{ grid-column:1/-1; }
.s15qb-f label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--s15qb-steel); margin:0 0 7px; }
.s15qb-f input, .s15qb-f textarea{ font-family:inherit; font-size:15px; padding:12px 13px;
  border:1px solid var(--s15qb-line); background:#fff; color:var(--s15qb-ink);
  border-radius:0; -webkit-appearance:none; appearance:none; width:100%; }
.s15qb-f textarea{ resize:vertical; line-height:1.6; }
.s15qb-f input:focus, .s15qb-f textarea:focus{ outline:none; border-color:var(--s15qb-dark);
  box-shadow:inset 0 0 0 1px var(--s15qb-dark); }
.s15qb-err{ font-size:12.5px; color:#A83A28; margin:6px 0 0; display:none; font-weight:500; }
.s15qb-f.is-bad input, .s15qb-f.is-bad textarea{ border-color:#A83A28; }
.s15qb-f.is-bad .s15qb-err{ display:block; }
.s15qb-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.s15qb-rail{ min-width:0; }
.s15qb-sum{ background:var(--s15qb-dark); color:#fff; padding:26px 24px 28px;
  position:sticky; top:20px; }
@media(max-width:900px){ .s15qb-sum{ position:static; } }
.s15qb-sumlab{ font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; color:var(--s15qb-accent-dk); margin:0 0 10px; }
.s15qb-total{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:40px;
  font-weight:700; line-height:1; letter-spacing:-.025em; margin:0 0 6px; color:#fff; }
.s15qb-sub{ font-size:12.5px; color:rgba(255,255,255,.62); margin:0 0 18px; min-height:1em; }

.s15qb-lines{ border-top:1px solid rgba(255,255,255,.18); padding:14px 0 0; margin:0 0 4px; }
.s15qb-line{ display:flex; justify-content:space-between; gap:14px; padding:8px 0;
  font-size:13.5px; border-bottom:1px solid rgba(255,255,255,.1); }
.s15qb-line:last-child{ border-bottom:0; }
.s15qb-line span:first-child{ color:rgba(255,255,255,.75); }
.s15qb-line span:last-child{ font-family:ui-monospace,Menlo,Consolas,monospace;
  font-weight:700; white-space:nowrap; }
.s15qb-empty{ font-size:13.5px; color:rgba(255,255,255,.6); margin:0; line-height:1.6; }

.s15qb-mowrap{ display:flex; justify-content:space-between; gap:14px;
  border-top:1px solid rgba(255,255,255,.18); padding:14px 0 0; margin:12px 0 0; font-size:13.5px; }
.s15qb-mowrap span:last-child{ font-family:ui-monospace,Menlo,Consolas,monospace;
  font-weight:700; color:var(--s15qb-accent-dk); white-space:nowrap; }

.s15qb-btn{ display:block; width:100%; background:var(--s15qb-accent); color:var(--s15qb-ink);
  border:0; font-family:inherit; padding:16px 22px; margin:22px 0 0; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; font-weight:700; cursor:pointer;
  border-radius:0; -webkit-appearance:none; appearance:none; transition:opacity .18s; }
.s15qb-btn:hover:not(:disabled){ opacity:.86; }
.s15qb-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.s15qb-btn:disabled{ background:rgba(255,255,255,.12); color:rgba(255,255,255,.45); cursor:not-allowed; }

.s15qb-status{ font-size:13px; line-height:1.6; margin:12px 0 0; min-height:1em; }
.s15qb-status.is-err{ color:#F0B0A2; }
.s15qb-note{ font-size:12px; line-height:1.6; color:rgba(255,255,255,.55); margin:16px 0 0; }

.s15qb-done{ grid-column:1/-1; background:var(--s15qb-dark); color:#fff;
  padding:48px 34px; text-align:center; }
.s15qb-done h2{ font-size:27px; font-weight:700; margin:0 0 14px;
  letter-spacing:-.02em; color:#fff; }
.s15qb-done p{ font-size:16px; line-height:1.7; color:rgba(255,255,255,.78);
  max-width:46ch; margin:0 auto 12px; }
.s15qb-recap{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px;
  color:var(--s15qb-accent-dk) !important; margin-top:22px !important; }

@media(prefers-reduced-motion:reduce){ .s15qb *{ transition:none !important; } }

/* number input */
.s15qb-numwrap{
  display:flex;
  align-items:center;
  gap:10px;
  margin:16px 0 0;
  padding:14px 0 0;
  border-top:1px solid var(--s15qb-line);
}
.s15qb-numlab{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--s15qb-steel);
  white-space:nowrap;
}
.s15qb-numwrap input[type=number]{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:15px;
  font-weight:700;
  width:88px;
  padding:9px 10px;
  border:1px solid var(--s15qb-line);
  background:#fff;
  color:var(--s15qb-ink);
  border-radius:0;
  text-align:center;
}
.s15qb-numwrap input[type=number]:focus{
  outline:none;
  border-color:var(--s15qb-dark);
  box-shadow:inset 0 0 0 1px var(--s15qb-dark);
}
.s15qb-numcap{
  font-size:12px;
  color:var(--s15qb-steel);
  font-family:ui-monospace,Menlo,Consolas,monospace;
}

/* website toggle */
.s15qb-toggle{
  background:var(--s15qb-surface);
  border:1px solid var(--s15qb-line);
  border-left:4px solid var(--s15qb-accent);
  padding:16px 20px;
  margin:0 0 16px;
}
.s15qb-tog{
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  margin:0;
}
.s15qb-tog input[type=checkbox]{
  width:18px;
  height:18px;
  margin:2px 0 0;
  flex:0 0 auto;
  accent-color:var(--s15qb-dark);
  cursor:pointer;
}
.s15qb-togtxt strong{
  display:block;
  font-size:15px;
  font-weight:700;
  line-height:1.4;
}
.s15qb-togtxt em{
  display:block;
  font-style:normal;
  font-size:13px;
  line-height:1.55;
  color:var(--s15qb-steel);
  margin-top:3px;
}

/* base fee explainer */
.s15qb-explain{
  margin:16px 0 0;
  padding:14px 0 0;
  border-top:1px solid var(--s15qb-line);
}
.s15qb-explain summary{
  font-size:13px;
  font-weight:600;
  color:var(--s15qb-ink);
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
}
.s15qb-explain summary::-webkit-details-marker{ display:none; }
.s15qb-explain summary::after{
  content:"+";
  font-weight:400;
  font-size:17px;
  line-height:1;
  color:var(--s15qb-steel);
}
.s15qb-explain[open] summary::after{ content:"–"; }
.s15qb-explain summary:focus-visible{
  outline:2px solid var(--s15qb-dark);
  outline-offset:3px;
}
.s15qb-explain p{
  font-size:13.5px;
  line-height:1.7;
  color:var(--s15qb-steel);
  margin:10px 0 0;
  max-width:60ch;
}

.s15qb-hint-top{ margin:0 0 14px !important; }

/* grouped standalone services */
.s15qb-group{ margin:0 0 20px; }
.s15qb-group:last-child{ margin-bottom:0; }
.s15qb-gname{
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--s15qb-ink);
  margin:0 0 10px;
  padding:0 0 8px;
  border-bottom:1px solid var(--s15qb-line);
}

/* package cards */
.s15qb-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px;
}
.s15qb-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  text-align:left;
  background:#fff;
  border:1.5px solid var(--s15qb-line);
  padding:18px 18px 20px;
  cursor:pointer;
  font-family:inherit;
  border-radius:0;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .16s, box-shadow .16s;
  position:relative;
}
.s15qb-card:hover{ border-color:var(--s15qb-steel); }
.s15qb-card:focus-visible{ outline:2px solid var(--s15qb-dark); outline-offset:2px; }
.s15qb-card.is-on{
  border-color:var(--s15qb-dark);
  box-shadow:inset 0 0 0 1px var(--s15qb-dark);
}
.s15qb-card.is-on::after{
  content:"";
  position:absolute;
  top:0; right:0;
  width:28px; height:4px;
  background:var(--s15qb-accent);
}
.s15qb-cardhead{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
}
.s15qb-cardname{
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--s15qb-ink);
}
.s15qb-cardprice{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:15px;
  font-weight:700;
  white-space:nowrap;
  color:var(--s15qb-ink);
}
.s15qb-cardlist{ display:flex; flex-direction:column; gap:6px; }
.s15qb-cardlist span{
  font-size:12.5px;
  line-height:1.5;
  color:var(--s15qb-steel);
  padding-left:14px;
  position:relative;
}
.s15qb-cardlist span::before{
  content:"";
  position:absolute;
  left:0; top:8px;
  width:7px; height:1.5px;
  background:var(--s15qb-accent);
}
.s15qb-cardnote{
  font-size:11px;
  letter-spacing:.06em;
  font-weight:700;
  color:var(--s15qb-ink);
  background:var(--s15qb-accent);
  padding:4px 8px;
  align-self:flex-start;
}
.s15qb-pkblock{ background:#fff; }

/* quantity items */
.s15qb-qtyitem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  background:#fff;
  border:1px solid var(--s15qb-line);
  padding:12px 14px;
  transition:border-color .16s, box-shadow .16s;
}
.s15qb-qtyitem.is-on{
  border-color:var(--s15qb-dark);
  box-shadow:inset 0 0 0 1px var(--s15qb-dark);
}
.s15qb-qtylabel{
  font-size:13.5px;
  font-weight:500;
  line-height:1.35;
  color:var(--s15qb-ink);
}
.s15qb-qtylabel .s15qb-chipamt{ margin-top:2px; }
.s15qb-stepper{
  display:flex;
  align-items:center;
  gap:0;
  flex:0 0 auto;
  border:1px solid var(--s15qb-line);
}
.s15qb-step{
  background:#fff;
  border:0;
  color:var(--s15qb-ink);
  font-family:inherit;
  font-size:16px;
  line-height:1;
  width:32px;
  height:32px;
  cursor:pointer;
  border-radius:0;
  -webkit-appearance:none;
  appearance:none;
  transition:background .14s;
}
.s15qb-step:hover{ background:var(--s15qb-surface); }
.s15qb-step:focus-visible{ outline:2px solid var(--s15qb-dark); outline-offset:-2px; }
.s15qb-qtyval{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:14px;
  font-weight:700;
  min-width:30px;
  text-align:center;
  border-left:1px solid var(--s15qb-line);
  border-right:1px solid var(--s15qb-line);
  padding:7px 0;
}