/* ═══════════════════════════════════════════
   A1 WINDOW STUDIO — 3-D configurator styles
   Mounted by src/_includes/studio.njk + src/js/studio/studio.js
   Look (Oct 2026, Rafael): the same dark glass as the home hero / mega menu — navy .88 + blur(24px), white/10 hairlines,
   brand-500 for the active state — with a soft glow behind the model so a white AND a black window read on it.
   Phones (≤900px): the stage is position:sticky under the fixed navbar and the options scroll beneath it, so the visitor
   always sees the window change (studio.js relaxes the hero's overflow:hidden to clip — sticky dies in a scroll container).
   ═══════════════════════════════════════════ */
.studio { --st-navy:#0f172a; --st-brand:#2563eb; --st-brand2:#3b82f6; --st-line:rgba(255,255,255,.1); --st-mute:rgba(255,255,255,.68); --st-ink:#fff; --st-glass:rgba(15,23,42,.6); --st-glow:radial-gradient(62% 52% at 50% 44%, rgba(255,255,255,.32), rgba(255,255,255,.09) 55%, rgba(255,255,255,0) 74%); --a1-nav-h:72px; --a1-bar-h:0px;
  background:rgba(15,23,42,.88); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); border:1px solid rgba(255,255,255,.1); border-radius:1.5rem; box-shadow:0 25px 50px -12px rgba(15,23,42,.5);
  overflow:hidden; overflow:clip; display:grid; grid-template-columns:minmax(0,1fr); width:100%; max-width:100%; color:var(--st-ink); text-align:left; scroll-margin-top:calc(var(--a1-nav-h,72px) + 12px) }   /* clip, not hidden: keeps the corners, no scrollport (sticky stage); scroll-margin: #studio links land under the fixed navbar */
.studio--wide { grid-template-columns:minmax(0,1fr) 360px; box-shadow:0 18px 36px -24px rgba(15,23,42,.5) }   /* lighter shadow: the note under the /design/ card stays readable */
@media (max-width:900px) { .studio--wide { grid-template-columns:minmax(0,1fr) } }
/* minmax(0,1fr) + min-width:0: a plain 1fr track grows to the canvas's intrinsic pixel width on phones (the stage blew up to ~2600 px wide) */
.studio-stage { position:relative; min-width:0; max-width:100%; aspect-ratio:4 / 3; min-height:280px; overflow:hidden; background:var(--st-glow), linear-gradient(180deg, rgba(15,23,42,.45) 0%, rgba(15,23,42,.65) 100%) }   /* the engine's canvas is transparent: the glow is the "light" behind the model */
.studio--wide .studio-stage { aspect-ratio:4 / 5 }
.studio--door .studio-stage { aspect-ratio:1 / 1 }   /* doors are tall: a square stage shows them ~40% bigger than 4:3 */
.studio--wide.studio--door .studio-stage { aspect-ratio:4 / 5 }
.studio-canvas { position:absolute; inset:0 } .studio-canvas canvas { display:block; width:100% !important; height:100% !important; max-width:100%; cursor:grab }   /* touch-action is set by the engine: none on desktop, pan-y on touch screens */
.studio-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6%; pointer-events:none }
.studio-open { position:absolute; left:50%; bottom:14%; transform:translateX(-50%); background:var(--st-brand); color:#fff; border:0; border-radius:999px; padding:12px 20px; font:inherit; font-weight:700; font-size:14px; line-height:1; cursor:pointer; box-shadow:0 10px 24px -8px rgba(37,99,235,.7); display:inline-flex; align-items:center; gap:8px; white-space:nowrap }   /* nowrap: at left:50% an abspos button only gets half the stage to shrink-to-fit */
.studio-open:hover { background:var(--st-brand2) } .studio-open:disabled { opacity:.7; cursor:default }
.studio-open::before { content:""; width:14px; height:14px; border:2px solid #fff; border-radius:50%; border-right-color:transparent; opacity:.9 }
.studio-views { position:absolute; top:12px; left:14px; right:14px; display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; z-index:2 } .studio-views::-webkit-scrollbar { display:none }   /* never wraps onto the model: on a narrow phone the row scrolls sideways */
.studio-views .studio-pill { background:var(--st-glass); border-color:rgba(255,255,255,.2); color:#fff } .studio-views .studio-pill:hover { background:rgba(15,23,42,.8) }
.studio-views .studio-pill[aria-pressed="true"] { background:#fff; color:var(--st-navy); border-color:#fff }
.studio-badge { position:absolute; bottom:12px; right:14px; z-index:2; font:700 11px/1 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--st-glass); border:1px solid rgba(255,255,255,.2); padding:7px 10px; border-radius:8px; max-width:48%; text-align:right }
.studio-hint { position:absolute; left:14px; bottom:12px; z-index:2; max-width:46%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; color:rgba(255,255,255,.85); background:var(--st-glass); border:1px solid rgba(255,255,255,.15); padding:4px 10px; border-radius:999px }
.studio-toast { position:absolute; left:50%; bottom:46px; transform:translateX(-50%); z-index:3; background:#fff; color:var(--st-navy); padding:10px 16px; border-radius:999px; font:inherit; font-weight:600; font-size:13px; line-height:1.2; box-shadow:0 10px 30px -10px rgba(0,0,0,.6); opacity:0; transition:opacity .3s; pointer-events:none; white-space:nowrap; max-width:92%; overflow:hidden; text-overflow:ellipsis } .studio-toast.on { opacity:1 }
.studio-panel { padding:18px 18px 16px; display:flex; flex-direction:column; gap:13px; border-top:1px solid var(--st-line) }
.studio--wide .studio-panel { border-top:0; border-left:1px solid var(--st-line) } @media (max-width:900px) { .studio--wide .studio-panel { border-left:0; border-top:1px solid var(--st-line) } }
.studio-head small { display:block; font:400 11px/1 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--st-mute); margin-bottom:5px }
.studio-head h3 { margin:0; font-size:20px; font-weight:800; line-height:1.15; color:var(--st-ink) }
.studio-note { margin:0; font-size:12px; color:rgba(255,255,255,.7) } .studio-note[hidden] { display:none }
.studio-group label { display:flex; justify-content:space-between; gap:8px; align-items:baseline; font-weight:700; font-size:11px; line-height:1.2; letter-spacing:.06em; text-transform:uppercase; color:var(--st-mute); margin-bottom:8px }
.studio-group label > span:first-child { font-family:ui-monospace,Menlo,Consolas,monospace }
.studio-group label .studio-val { color:#fff; text-transform:none; letter-spacing:0; font-weight:600; font-size:13px; line-height:1.2; text-align:right }   /* the colour name reads as a word, not as code */
.studio-chips { display:flex; flex-wrap:wrap; gap:8px }
/* chips: swatch + 2px gap (transparent border, padding-box clip beats the inline background shorthand) + white/28 ring; selected = brand-300 ring + white inset line */
.studio-chip { width:36px; height:36px; border-radius:50%; border:2px solid transparent; background-clip:padding-box !important; box-shadow:0 0 0 2px rgba(255,255,255,.28); cursor:pointer; position:relative; padding:0; flex:none; scroll-snap-align:center }
.studio-chip[aria-pressed="true"] { box-shadow:0 0 0 2px #93c5fd, inset 0 0 0 2px #fff }
.studio-chip.locked { box-shadow:0 0 0 2px rgba(255,255,255,.18) }   /* the swatch keeps its true colour (a scrim turned every light paint into the same grey) */
.studio-chip.locked::after { content:"🔒"; position:absolute; right:-5px; bottom:-5px; width:17px; height:17px; display:grid; place-items:center; font-size:9px; line-height:1; background:rgba(15,23,42,.94); border:1px solid rgba(255,255,255,.4); border-radius:50% }   /* small lock badge in the corner */
.studio-chip.wood { background-image:repeating-linear-gradient(100deg, rgba(0,0,0,.09) 0 2px, transparent 2px 5px) !important }
.studio-chip:focus-visible, .studio-pill:focus-visible, .studio-cta:focus-visible, .studio-share:focus-visible, .studio-unlock:focus-visible, .studio-open:focus-visible { outline:2px solid #93c5fd; outline-offset:2px }
.studio-pills { display:flex; flex-wrap:wrap; gap:6px } .studio-pills--sub { margin-top:8px } .studio-pills[hidden] { display:none }
.studio-pill { border:1px solid rgba(255,255,255,.15); background:transparent; border-radius:999px; padding:9px 13px; min-height:36px; font:inherit; font-weight:600; font-size:12px; line-height:1; color:rgba(255,255,255,.85); cursor:pointer; scroll-snap-align:start; white-space:nowrap; transition:background .15s, border-color .15s }
.studio-pill:hover { background:rgba(255,255,255,.1) }
.studio-pill.locked, .studio-pill.req { border-style:dashed; border-color:rgba(255,255,255,.25) } .studio-pill.locked { color:rgba(255,255,255,.7) }
.studio-pill[aria-pressed="true"] { background:var(--st-brand); color:#fff; border:1px solid var(--st-brand) }
.studio-unlock { margin-top:8px; font:inherit; font-weight:600; font-size:12px; line-height:1.3; color:#93c5fd; background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px; text-align:left } .studio-unlock[hidden] { display:none }
.studio-range { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--st-mute) } .studio-range input { flex:1; accent-color:var(--st-brand2); min-width:0 }
.studio-summary { background:rgba(255,255,255,.08); border:1px solid var(--st-line); border-radius:12px; padding:10px 12px; font-size:13px; color:rgba(255,255,255,.9); line-height:1.5 } .studio-summary b { color:#fff }
.studio-summary code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; color:#fff; background:rgba(255,255,255,.12); padding:2px 6px; border-radius:6px }
.studio-actions { display:flex; flex-direction:column; gap:8px }
.studio-cta { background:var(--st-brand); color:#fff; border:0; border-radius:12px; padding:14px; font:inherit; font-weight:700; font-size:15px; line-height:1.2; cursor:pointer; width:100%; box-shadow:0 10px 24px -10px rgba(37,99,235,.7); transition:background .15s } .studio-cta:hover { background:#1d4ed8 }   /* darker on hover: white text stays above 4.5:1 */
.studio-share { background:transparent; color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:10px; font:inherit; font-weight:600; font-size:13px; line-height:1.2; cursor:pointer; width:100% } .studio-share:hover { background:rgba(255,255,255,.1) }
.studio-fine { margin:0; font-size:11px; color:rgba(255,255,255,.62); line-height:1.4 }
.studio-stage.is-fallback .studio-poster { opacity:1 }
@media (prefers-reduced-motion: reduce) { .studio-toast, .studio-pill, .studio-cta { transition:none } }

/* the hidden attribute must win over the display rules above */
.studio [hidden], .studio-open[hidden], .studio-poster[hidden], .studio-views[hidden], .studio-hint[hidden], .studio-unlock[hidden], .studio-note[hidden], .studio-pills[hidden] { display:none !important }
.studio-more { border-top:1px solid var(--st-line); padding-top:10px } .studio-more summary { cursor:pointer; font:inherit; font-weight:600; font-size:12px; line-height:1.3; color:rgba(255,255,255,.8); list-style:none } .studio-more summary:hover { color:#fff } .studio-more summary::-webkit-details-marker { display:none } .studio-more summary::before { content:'+ '; } .studio-more[open] summary::before { content:'– '; } .studio-more > *:not(summary) { margin-top:12px }

/* ─── touch & phone layout ─── */
.studio-chip.off { opacity:.4; cursor:not-allowed; background-image:linear-gradient(135deg, transparent 45%, #fff 45% 49%, rgba(15,23,42,.85) 49% 55%, transparent 55%) !important }   /* two-tone slash: reads on light and dark swatches */
.studio-more--grids { border-top:0; padding-top:0; margin-top:8px } .studio-more--grids summary { font-size:12px } .studio-more--grids > *:not(summary) { margin-top:8px }
.studio-more--grids[hidden] { display:none !important }
@media (max-width:640px) {
  .studio-rail { flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; padding:3px 3px 8px; margin:0 -3px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent }
  .studio-rail.is-overflow { -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent) }   /* fade = "this scrolls" (studio.js sets the class) */
  .studio-rail::-webkit-scrollbar { height:4px } .studio-rail::-webkit-scrollbar-thumb { background:rgba(255,255,255,.25); border-radius:4px }
  .studio-panel { padding:14px 14px 14px; gap:11px }   /* shorter panel: tighter rhythm, rails instead of wrapping rows */
  .studio-group label { margin-bottom:6px }
  .studio-views { top:10px; left:10px; right:10px; gap:5px } .studio-views .studio-pill { padding:8px 10px; min-height:36px }
  .studio-badge { display:none }   /* the series line is in the summary; on a phone it wrapped over the hint and the sill */
  .studio-hint { left:10px; bottom:10px; max-width:calc(100% - 20px) }
  .studio-views .studio-pill { padding:7px 9px; min-height:34px; font-size:11.5px }
  .studio-head small { margin-bottom:3px } .studio-head h3 { font-size:17px }
  .studio-summary { padding:9px 11px; font-size:12px } .studio-summary > div { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .studio-summary > div:first-child { white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2 }   /* the design line may take two lines so inside finish, grids and hardware are not clipped */
  .studio-cta { padding:14px; font-size:15px }
}
/* ─── sticky stage (phones & small tablets): pinned under the fixed navbar while the options scroll beneath it, until the card ends.
   --a1-nav-h / --a1-bar-h are set by studio.js from #navbar / #sticky-cta (72 / 73 px on phones). Keep this block LAST so its padding-bottom wins. ─── */
@media (max-width:900px) {
  .studio-stage, .studio--wide .studio-stage, .studio--door .studio-stage, .studio--wide.studio--door .studio-stage { position:sticky; top:var(--a1-nav-h,72px); z-index:5; aspect-ratio:auto; min-height:220px; height:min(40vh,330px); height:min(40svh,330px);
    background:var(--st-glow), linear-gradient(180deg, #141e33, #0f172a); box-shadow:0 14px 24px -18px rgba(0,0,0,.7) }   /* opaque: the panel scrolls under it and must not ghost through */
  .studio-panel { padding-bottom:calc(var(--a1-bar-h,0px) + 12px) }   /* the "Get my free quote" button clears the sticky Call / Free Quote bar */
}
@media (max-width:900px) and (max-height:480px) { .studio-stage, .studio--wide .studio-stage, .studio--door .studio-stage, .studio--wide.studio--door .studio-stage { position:relative; top:auto; height:72vh; min-height:200px; aspect-ratio:auto } }   /* landscape phones: no room to pin, and never taller than the screen */