/**
 * T&R Glass — Elementor T&R Products widget (handoff #cfg-sec).
 * Tokens (.eyebrow, .btn, .rv, --ink0, --pad, …) stay in styles.css.
 */

.elementor-widget-tr-products{
  width:100%;
}
.elementor-widget-tr-products > .elementor-widget-container{
  width:100%;
  max-width:none;
  padding:0;
}

/* PRODUCTS — live finish configurator */
#cfg-sec{position:relative;height:100svh;min-height:660px;overflow:hidden;background:var(--ink0)}
#cfg-sec #gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:none}
#cfg-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(100deg,rgba(5,7,11,.94) 0%,rgba(5,7,11,.72) 26%,rgba(5,7,11,.18) 48%,rgba(5,7,11,0) 64%),linear-gradient(0deg,rgba(5,7,11,.72) 0%,transparent 30%)}
#cfg-col{position:absolute;z-index:4;left:var(--pad);top:50%;transform:translateY(-50%);max-width:440px}
#cfg-col .eyebrow{color:var(--muted);margin-bottom:22px}
#finishName{font-size:clamp(48px,7.5vw,72px);line-height:.94;color:var(--paper);text-shadow:0 4px 40px rgba(0,0,0,.5)}
@media(max-width:1024px){#finishName{font-size:64px}}
@media(max-width:767px){#cfg-col{max-width:none}#finishName{font-size:48px}}
#finishName .sub{display:block;font-size:.28em;color:var(--muted);font-weight:700;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px;-webkit-text-fill-color:currentColor}
#specline{margin-top:22px;display:flex;gap:26px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
#specline b{color:var(--paper);font-weight:500;letter-spacing:.04em}
#usecase{margin-top:14px;font-size:clamp(15px,1.3vw,18px);line-height:1.5;color:rgba(246,245,242,.82);max-width:44ch}
/* per-finish variant switcher (Dots density · Bronze colour · Laminated interlayer) */
#variants{margin-top:22px;display:none;align-items:center;gap:10px;flex-wrap:wrap}
#variants.on{display:flex}
#variants .vlabel{font-size:11px;color:var(--muted);margin-right:2px}
#variants .vopt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(246,245,242,.66);cursor:pointer;
 background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:8px 14px;
 transition:color .3s,background .3s,border-color .3s}
#variants .vopt:hover{color:var(--paper);background:rgba(255,255,255,.09)}
#variants .vopt.on{color:var(--ink);background:var(--paper);border-color:var(--paper)}
/* The control rows must sit ABOVE the copy above them. `.rv` reveals animate `transform`, which
   makes those paragraphs a stacking context painted after plain in-flow siblings — so a revealing
   #usecase paints over the controls below it and eats their clicks. Measured with elementFromPoint
   at a swatch's own centre: it returned #usecase, not the swatch. */
#variants,#colours,#thickness,#proof{position:relative;z-index:2}
/* AXIS ROWS — colour and thickness. Same slot and rhythm as #variants so the three axes read as
   one control cluster rather than three bolted-on widgets. */
#colours,#thickness{margin-top:12px;display:none;align-items:center;gap:10px;flex-wrap:wrap}
#colours.on,#thickness.on{display:flex}
#colours .swrap{display:flex;gap:7px}
#colours .sw{width:24px;height:24px;padding:0;border-radius:50%;cursor:pointer;background:none;
 border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;transition:border-color .25s,transform .25s}
#colours .sw i{width:16px;height:16px;border-radius:50%;display:block;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.25)}
#colours .sw:hover{border-color:rgba(255,255,255,.5);transform:translateY(-1px)}
#colours .sw.on{border-color:var(--paper);box-shadow:0 0 0 1px var(--paper)}
#colours .cname{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper)}
#th-range{width:clamp(120px,20vw,190px);accent-color:var(--red);cursor:ew-resize}
#thickness .tval{font-size:11px;letter-spacing:.1em;color:var(--paper);min-width:46px}
#colours .sw:focus-visible,#th-range:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
/* visually-hidden label so each swatch has a real accessible name, not just a colour */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* per-finish PROOF controls — the two claims the catalogue can't make in words
   (Low-Iron's absent green cast, Frosted's privacy-with-light). Same slot as #variants. */
#proof{margin-top:14px;display:none;align-items:center;gap:12px;flex-wrap:wrap}
#proof.on{display:flex}
#proof .pf-side{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(246,245,242,.66);font-family:'Geist Mono',monospace}
#proof .pf-note{flex-basis:100%;font-size:12px;color:var(--muted)}
#pf-split{width:clamp(110px,18vw,170px);accent-color:var(--red);cursor:ew-resize}
#pf-split:focus-visible{outline:2px solid var(--red);outline-offset:4px}
/* keyboard focus for the configurator's own controls — the chips are role=radio and tabbable,
   so they need a ring; without one the primary control of this page is invisible to a keyboard user */
#track .chip:focus-visible,#variants .vopt:focus-visible,#proof .vopt:focus-visible{
 outline:2px solid var(--paper);outline-offset:3px;border-radius:4px}
/* the seam itself: a light line, because that is what a real edge between two panes looks like */
#pf-seam{position:absolute;z-index:4;width:1px;pointer-events:none;display:none;
 background:linear-gradient(transparent,rgba(255,255,255,.9) 12%,rgba(255,255,255,.9) 88%,transparent)}
#pf-seam.on{display:block}
/* The CTA label is now variable-length ("Request Dots · Bronze · 15mm"), so leaving the hint to
   wrap on its own put it beside the button at some combinations and under it at others. It gets its
   own row unconditionally — flex-basis:100% forces the wrap at every width and every label. */
#cfg-cta{margin-top:26px;display:flex;column-gap:16px;row-gap:10px;align-items:center;flex-wrap:wrap}
#cfg-cta .hint{flex:0 0 100%;font-size:12px;color:var(--muted)}
#scrub{position:absolute;z-index:5;left:50%;bottom:clamp(22px,4vh,44px);transform:translateX(-50%);width:min(94vw,1000px);display:flex;flex-direction:column;align-items:center;gap:14px}
#track{position:relative;width:100%;height:54px;border-radius:32px;display:flex;align-items:center;justify-content:space-between;padding:6px;
 background:rgba(8,11,17,.5);border:1px solid var(--line);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 20px 50px rgba(0,0,0,.4)}
@media(prefers-reduced-transparency:reduce){
 #track{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}}
#thumb{position:absolute;top:6px;bottom:6px;border-radius:26px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);pointer-events:none}
#track .chip{position:relative;z-index:2;flex:1;text-align:center;font-size:11px;color:rgba(246,245,242,.62);cursor:pointer;padding:0 4px;transition:color .3s;letter-spacing:.08em;font-family:'Geist Mono',monospace;text-transform:uppercase}
#track .chip.on{color:var(--paper)}
#hint{font-size:11px;color:rgba(246,245,242,.5)}
@media(max-width:820px){
 /* stronger bottom scrim so the editorial column stays AA-legible over bright glass */
 #cfg-scrim{background:linear-gradient(0deg,rgba(5,7,11,.96) 0%,rgba(5,7,11,.86) 34%,rgba(5,7,11,.45) 62%,rgba(5,7,11,.12) 86%)}
 #cfg-col{right:var(--pad);top:auto;bottom:clamp(150px,24vh,220px);transform:none}
 /* 8 chips can't fit one row on a phone — scroll them horizontally instead of squeezing */
 #scrub{width:100%;left:0;transform:none;padding:0 12px;gap:10px}
 #track{overflow-x:auto;justify-content:flex-start;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 #track::-webkit-scrollbar{display:none}
 #track .chip{flex:0 0 auto;font-size:10px;letter-spacing:.06em;padding:0 14px}
 #thumb{display:none}
 #hint{padding:0 16px;text-align:center}
 /* THE CONTROL COLUMN GETS A REAL SURFACE ON A PHONE (2026-07-26, from iPhone screenshots).
    The bottom-weighted #cfg-scrim above was tuned when this column was a heading plus one line.
    It has since grown to ~555px of an 844px screen — eyebrow, display name, spec line, body copy,
    colour swatches, thickness slider, compare slider, CTA — so its top half now sits on the
    brightest part of the photograph with almost no scrim under it, and the mono labels there were
    unreadable on a real phone. The design system's own rule applies: glass is a floating-layer
    material, text belongs on a solid or near-solid surface. So the column becomes a panel.
    Near-solid rather than opaque so the pane still reads behind it, and NO backdrop-filter — the
    blur budget is spent (nav pill, track, mobile menu) and a fourth blur layer over a live WebGL
    canvas is what froze the renderer twice before. */
 #cfg-col{left:12px;right:12px;bottom:clamp(128px,19vh,184px);
  background:linear-gradient(180deg,rgba(5,7,11,.88),rgba(5,7,11,.94));
  border:1px solid rgba(255,255,255,.10);border-radius:24px;padding:18px 16px 20px}
 /* Cut to what a phone can actually hold. Every line kept below is either the product's identity
    or a control; everything dropped is repeated elsewhere on the page:
    - the section eyebrow ("01 · The glass we make · live") is chrome, not content;
    - #usecase (the descriptive paragraph) is repeated verbatim on that finish's gallery card
      directly below;
    - the compare caption explains a slider whose two ends are already labelled.
    Without this the panel ran 632px of an 844px screen and left no room for the glass itself. */
 #cfg-col .eyebrow,#cfg-col #usecase,#proof .pf-note{display:none}
 #specline{gap:14px;margin-top:14px}
 #cfg-col .btn{font-size:15px;padding:13px 20px}
 /* the compare row is label + "CLEAR" + range + "LOW-IRON"; at 335px the last word wrapped to a
    line of its own. Tighter gaps and a range that is allowed to shrink keep it on one row. */
 #proof{gap:8px}
 #proof .pf-side,#proof .plabel{font-size:10px;letter-spacing:.06em}
 #proof input[type=range]{flex:1 1 90px;min-width:0}
}
/* The colour NAME beside the swatches is redundant on a narrow screen — the spec line directly
   above already reads "COLOUR CLEAR" — and keeping it forced the row to wrap, which pushed a
   stray word onto its own line under the swatches. */
@media(max-width:480px){#colours .cname{display:none}}
/* SHORT VIEWPORTS — measured on a real phone, not in a desktop browser (2026-07-26).
   390x844 is an iPhone's SCREEN; Safari's actual viewport with its toolbars is nearer
   660-700 CSS px, and the whole reason the control panel still sat on top of the glass on a real
   device is that it is ~372px tall. At 660px high that leaves a 69px strip between the nav pill and
   the panel — no room for a pane at all, so no amount of repositioning could have fixed it. The
   panel has to get shorter, not just move.
   Everything trimmed here is duplicated elsewhere on the page: the standard (ASTM C1048) is on the
   gallery card for this finish, and the drag hint is restated by the chip track it points at. */
@media(max-width:820px) and (max-height:760px){
 #cfg-col{padding:14px 14px 16px;bottom:clamp(104px,16vh,150px)}
 #finishName .sub{font-size:11px;margin-bottom:6px}
 #specline{margin-top:10px;gap:12px;font-size:11px}
 #spec2{display:none}                 /* keeps the spec line to ONE row */
 #colours,#thickness{margin-top:9px}
 #proof{margin-top:9px}
 #cfg-col .btn{font-size:14px;padding:11px 18px}
 #hint{display:none}
}