/* S&D live configurator (stands/builder_live.php, 2026-10-29). Uses the sd.css tokens. */
.sdc-page [hidden] { display: none !important; }
.sdc-wrap { max-width: 1320px; }
.sdc-head { padding: 1.2rem 0 1.4rem; }
.sdc-head h1 { font-family: var(--font-serif, Georgia, serif); font-weight: 600; font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin: 0 0 .5rem; line-height: 1.12; }
.sdc-head p { color: var(--sd-mute); max-width: 72ch; line-height: 1.6; margin: 0; }
.sdc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); gap: 1.6rem; align-items: start; }
.sdc-view { grid-column: 1; grid-row: 1; position: sticky; top: 82px; display: grid; gap: .9rem; }
.sdc-controls { grid-column: 2; grid-row: 1; min-width: 0; }

/* stage */
.sdc-stage { position: relative; height: min(68vh, 640px); min-height: 360px; border-radius: 18px; overflow: hidden; border: 1px solid var(--sd-line);
  background: radial-gradient(ellipse at 50% 30%, #ffffff 0%, #f1efe9 62%, #e4e0d6 100%); }
.sdc-canvas { position: absolute; inset: 0; cursor: grab; } .sdc-canvas:active { cursor: grabbing; }
.sdc-stage.is-invalid .sdc-canvas { opacity: .45; filter: grayscale(.6); transition: opacity .2s; }
.sdc-fallback { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 2rem; color: var(--sd-mute); }
.sdc-fallback p { margin: .2rem 0; max-width: 42ch; line-height: 1.5; }
.sdc-stage.is-fallback { background: repeating-linear-gradient(135deg, #f6f5f1 0 14px, #efede7 14px 28px); }
.sdc-busy { position: absolute; top: .8rem; right: .8rem; display: inline-flex; gap: .45rem; align-items: center; font-size: .78rem; font-weight: 700; color: var(--sd-mute);
  background: rgba(255,255,255,.85); padding: .3rem .65rem; border-radius: 999px; }
.sdc-busy span { width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid var(--sd-accent); border-right-color: transparent; animation: sdcspin .7s linear infinite; }
@keyframes sdcspin { to { transform: rotate(360deg); } }
.sdc-toolbar { position: absolute; left: .7rem; top: .7rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; max-width: calc(100% - 7.5rem); }
.sdc-tool { min-height: 38px; padding: .35rem .8rem; border-radius: 999px; border: 1px solid #d2d0c8; background: rgba(255,255,255,.92); color: var(--sd-ink); font-weight: 700; font-size: .8rem; cursor: pointer; }
.sdc-tool[aria-pressed="true"] { background: var(--sd-ink); color: #fff; border-color: var(--sd-ink); }
.sdc-tool:focus-visible, .sdc-glow__c:focus-visible { outline: 3px solid var(--sd-accent); outline-offset: 2px; }
.sdc-glow { display: inline-flex; gap: .3rem; padding: .25rem .4rem; background: rgba(255,255,255,.92); border-radius: 999px; border: 1px solid #d2d0c8; }
.sdc-glow__c { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #c9c7bf; background: var(--sw); cursor: pointer; padding: 0; }
.sdc-glow__c[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--sd-ink); }
.sdc-dims { position: absolute; left: .9rem; bottom: .8rem; font-weight: 800; font-size: .95rem; color: var(--sd-ink); background: rgba(255,255,255,.88); padding: .4rem .75rem; border-radius: 10px; }
.sdc-dims span { display: block; font-weight: 600; font-size: .78rem; color: var(--sd-mute); }
.sdc-dims:empty { display: none; }

/* notices */
.sdc-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.sdc-note { font-size: .86rem; line-height: 1.45; padding: .5rem .75rem .5rem 2rem; border-radius: 10px; position: relative; }
.sdc-note::before { position: absolute; left: .7rem; top: .5rem; font-weight: 900; }
.sdc-note--adj { background: #eef2ff; color: #3730a3; } .sdc-note--adj::before { content: "i"; }
.sdc-note--warn { background: #f3f3ef; color: #3e3e39; } .sdc-note--warn::before { content: "!"; }
.sdc-note--err { background: #fdeceb; color: #8a1f17; } .sdc-note--err::before { content: "x"; }

/* quote */
.sdc-quote { background: var(--sd-ink); color: #fff; border-radius: 18px; padding: 1.1rem 1.3rem 1.2rem; transition: opacity .2s; }
.sdc-quote.is-stale { opacity: .78; }
.sdc-quote__h { margin: 0 0 .2rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sd-accent-text); font-weight: 800; }
.sdc-price { display: flex; align-items: baseline; gap: .5rem; }
.sdc-price__unit { font-size: clamp(2rem, 4.5vw, 2.6rem); font-weight: 800; letter-spacing: -.01em; }
.sdc-price__each { color: #fff; font-weight: 600; }
.sdc-price__total { margin: .1rem 0 .3rem; color: #fff; } .sdc-price__meta { margin: 0 0 .6rem; color: #fff; font-size: .86rem; line-height: 1.5; }
.sdc-breaks { width: 100%; border-collapse: collapse; font-size: .84rem; margin: .2rem 0 .6rem; }
.sdc-breaks caption { text-align: left; color: #fff; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding-bottom: .25rem; }
.sdc-quote .sdc-breaks tr, .sdc-quote .sdc-breaks tbody { background: transparent !important; }
.sdc-quote .sdc-breaks th, .sdc-quote .sdc-breaks td { padding: .25rem .4rem; border: 0; border-top: 1px solid #2a2a27; text-align: left; font-weight: 600; background: transparent !important; color: #fff; text-transform: none; letter-spacing: 0; font-size: .84rem; }
.sdc-quote .sdc-breaks td { text-align: right; }
.sdc-quote .sdc-breaks tr.is-current th, .sdc-quote .sdc-breaks tr.is-current td { color: var(--sd-accent-text); }
.sdc-quote__fine { font-size: .8rem; color: #fff; line-height: 1.5; margin: .3rem 0 .8rem; }
.sdc-quote__na { color: #fff; margin: .3rem 0 .6rem; }
.sdc-quote__go { width: 100%; box-sizing: border-box; }

/* controls */
.sdc-group { border: 1px solid var(--sd-line); border-radius: 16px; padding: 1rem 1.1rem .3rem; margin: 0 0 1rem; background: #fff; }
.sdc-group legend { font-weight: 800; padding: 0 .4rem; font-size: 1rem; }
.sdc-field { margin-bottom: 1rem; } .sdc-field[hidden] { display: none; }
.sdc-field label, .sdc-lbl { font-weight: 700; font-size: .88rem; }
.sdc-field > label:not(.sdc-toggle) { display: block; margin-bottom: .3rem; }
.sdc-field__top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .2rem; }
.sdc-num { display: inline-flex; align-items: center; gap: .3rem; }
.sdc-num input { width: 5.4rem; min-height: 40px; padding: .35rem .5rem; border: 1px solid #cfcfc8; border-radius: 9px; font-size: 1rem; text-align: right; font-variant-numeric: tabular-nums; }
.sdc-unit { color: var(--sd-mute); font-size: .82rem; min-width: 1.6rem; }
.sdc-range { width: 100%; accent-color: var(--sd-ink); height: 32px; margin: 0; }
.sdc-field select, .sdc-text { width: 100%; box-sizing: border-box; min-height: 44px; padding: .55rem .7rem; border: 1px solid #cfcfc8; border-radius: 10px; font-size: 1rem; background: #fff; color: var(--sd-ink); }
.sdc-text { min-height: 66px; resize: vertical; font-weight: 700; letter-spacing: .02em; }
.sdc-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.sdc-chip { position: relative; } .sdc-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.sdc-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .8rem; border: 1.5px solid #cfcfc8; border-radius: 999px; font-weight: 600; font-size: .84rem; cursor: pointer; }
.sdc-chip input:checked + span { background: var(--sd-ink); border-color: var(--sd-ink); color: #fff; }
.sdc-chip input:focus-visible + span, .sdc-swatch input:focus-visible + span { outline: 3px solid var(--sd-accent); outline-offset: 2px; }
.sdc-swatches { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .3rem; }
.sdc-swatch { position: relative; } .sdc-swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.sdc-swatch span { display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--sw); border: 3px solid #fff; box-shadow: 0 0 0 1px #c9c7bf; cursor: pointer; }
.sdc-swatch input:checked + span { box-shadow: 0 0 0 2px var(--sd-ink); }
.sdc-swatch em { position: absolute; left: -9999px; }
.sdc-swatch.is-off span { opacity: .22; cursor: not-allowed; background-image: linear-gradient(135deg, transparent 46%, #8a1f17 46% 54%, transparent 54%); }
.sdc-picked { font-size: .82rem; color: var(--sd-mute); font-weight: 600; }
.sdc-toggle { display: flex; align-items: center; gap: .65rem; min-height: 44px; cursor: pointer; }
.sdc-toggle input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sdc-toggle__ui { width: 44px; height: 26px; border-radius: 999px; background: #cfcfc8; position: relative; flex: none; transition: background .15s; }
.sdc-toggle__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.sdc-toggle input:checked + .sdc-toggle__ui { background: var(--sd-ink); } .sdc-toggle input:checked + .sdc-toggle__ui::after { transform: translateX(18px); }
.sdc-toggle input:focus-visible + .sdc-toggle__ui { outline: 3px solid var(--sd-accent); outline-offset: 2px; }
.sdc-json { width: 100%; box-sizing: border-box; min-height: 40px; font-family: monospace; }
.sdc-pegs { display: grid; gap: .5rem; }
.sdc-peg { display: grid; grid-template-columns: 3.4rem repeat(3, minmax(0, 1fr)) auto; gap: .4rem; align-items: end; font-size: .8rem; }
.sdc-peg span { font-weight: 700; padding-bottom: .6rem; }
.sdc-peg label { display: grid; gap: .15rem; font-weight: 600; font-size: .74rem; color: var(--sd-mute); }
.sdc-peg input { min-height: 38px; padding: .3rem .4rem; border: 1px solid #cfcfc8; border-radius: 8px; font-size: .95rem; width: 100%; box-sizing: border-box; }
.sdc-peg__rm { min-height: 38px; border: 0; background: none; color: #8a1f17; font-weight: 700; cursor: pointer; }
.sdc-request { border-top: 1px solid var(--sd-line); padding-top: 1.2rem; margin-top: .4rem; }
.sdc-request h2 { font-family: var(--font-serif, Georgia, serif); font-weight: 600; font-size: 1.5rem; margin: 0 0 .3rem; }
.sdc-request fieldset { border: 1px solid var(--sd-line); border-radius: 16px; padding: 1rem 1.1rem .3rem; margin: 0 0 1rem; }
.sdc-request legend { font-weight: 800; padding: 0 .4rem; }
.sdc-submit { width: 100%; }

@media (max-width: 960px) {
  .sdc-layout { grid-template-columns: 1fr; gap: 1rem; }
  .sdc-view { grid-column: 1; grid-row: 1; position: static; }
  .sdc-controls { grid-column: 1; grid-row: 2; }
  .sdc-stage { height: 62vw; min-height: 300px; max-height: 520px; }
  .sdc-quote__go { display: none; }
}
@media (max-width: 480px) {
  .sdc-stage { height: 78vw; border-radius: 14px; }
  .sdc-toolbar { max-width: calc(100% - 1.2rem); top: .6rem; left: .6rem; gap: .3rem; }
  .sdc-tool { min-height: 36px; padding: .3rem .6rem; font-size: .74rem; }
  .sdc-glow__c { width: 26px; height: 26px; }
  .sdc-busy { top: auto; bottom: .7rem; right: .7rem; }
  .sdc-dims { left: .6rem; bottom: .6rem; font-size: .85rem; padding: .3rem .6rem; }
  .sdc-peg { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sdc-peg span { grid-column: 1 / -1; padding: 0; } .sdc-peg__rm { grid-column: 1 / -1; justify-self: start; }
}

/* Design links (2026-10-30, assets/js/gg-share.js), inside the dark price box: text stays white. */
.gg-share { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-top: .8rem; }
.gg-share__btn { background: #fff; color: #111; border: 1.5px solid #fff; border-radius: 10px; padding: .6rem 1.1rem; font: inherit; font-weight: 700; cursor: pointer; min-height: 44px; }
.gg-share__btn:hover { background: #e5e7eb; }
.gg-share__btn:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
.gg-share__msg { font-size: .88rem; color: #fff; font-weight: 600; }
.gg-share__url { flex: 1 1 100%; font: inherit; font-size: .82rem; padding: .5rem; border: 1px solid #fff; border-radius: 8px; color: #111; background: #fff; min-width: 0; }
.gg-share__help { flex: 1 1 100%; margin: 0; font-size: .8rem; color: #fff; }
.gg-share__opened { border-left: 4px solid #60a5fa; background: #eef3fd; color: #1e3a8a; padding: .6rem .8rem; border-radius: 8px; margin: .8rem 0 0; font-size: .9rem; }