/* Tria Studio (b46). Loads after tokens.css. Every rule is scoped to main.sp so the shared header,
   footer, ticker, newsletter and chat launcher keep the sitewide styles. Type follows the locked scale:
   13 labels / 15 UI / 16 buttons / 17 body / 19 lead / 20 small heads / h2 30 / h1 46. */
.sp{
  --ink:#0f1a2f;--ink-2:#1b2a48;--ink-3:#0b1426;--panel:#132039;
  --gold-line:#8a7139;--gold-text:#d6b25a;
  --paper:#e8e1d1;--paper-2:#d6d0c2;
  --field:#6b7896; /* V-78: form control borders, 3:1 or better against the navy panels */
  --warn:#e0a33c;--bad:#f2a58e;--ok:#5fae8c;
  display:block;max-width:1280px;margin:0 auto;padding:0 var(--gutter) 0;min-width:0
}
.sp *,.sp *::before,.sp *::after{box-sizing:border-box}
.sp p{max-width:66ch}
.sp .mono{font-variant-numeric:tabular-nums}
.sp .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;left:auto}

/* hero */
.sp .sHero{padding:40px 0 24px;display:grid;gap:14px}
.sp .sHero .eyebrow{font-size:13px;color:var(--gold-text)}
.sp .sHero h1{font-size:clamp(32px,4vw,46px);line-height:1.1;letter-spacing:-.02em;font-weight:650;max-width:24ch}
.sp .sHero h1 i{font-style:normal;color:var(--gold)}
.sp .sHero p{font-size:19px;line-height:1.55;max-width:60ch}

/* no JavaScript */
.sp .nojs{border:1px solid var(--gold-line);padding:22px 24px;margin:8px 0 24px;display:flex;flex-direction:column;gap:12px;background:#ffffff06}
.sp .nojs h2{font-size:20px}
.sp .nojs .btn{margin-right:20px}

/* the configurator */
.sp .studio{display:grid;grid-template-columns:228px minmax(0,1fr) 320px;border:1px solid var(--rule);background:linear-gradient(180deg,var(--panel),var(--ink));margin-top:12px;min-width:0}
.sp .studio>*{min-width:0}
@media (max-width:1140px){.sp .studio{grid-template-columns:215px minmax(0,1fr)}.sp .right{grid-column:1 / -1;border-left:0;border-top:1px solid var(--rule)}}
.sp .left{border-right:1px solid var(--rule);padding:16px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.sp .grp{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text);margin:14px 0 5px}
.sp .grp:first-child,.sp .grp0{margin-top:0}
.sp .styleBtn{display:flex;align-items:center;gap:10px;width:100%;background:none;border:1px solid transparent;color:var(--paper-2);font:inherit;font-size:15px;line-height:1.3;text-align:left;padding:7px 8px;cursor:pointer;min-height:40px}
.sp .styleBtn svg{flex:none;opacity:.75}
.sp .styleBtn:hover{color:var(--paper);background:rgba(214,178,90,.05)}
.sp .styleBtn[aria-pressed=true]{border-color:var(--gold-line);color:var(--paper);background:rgba(214,178,90,.09)}
.sp .styleBtn[aria-pressed=true] svg{opacity:1}
.sp .structLbl{display:block;margin:14px 0 6px}
.sp .styleRow{display:flex;flex-direction:column;gap:4px;min-width:0}
.sp .styleRow .grp:first-child{margin-top:0}
.sp #productPickerWrap{margin:0 0 12px}
.sp #pickerNote{margin-top:6px}
.sp #pickerNote a{color:var(--gold-2)}

.sp .center{display:flex;flex-direction:column;min-width:0;position:sticky;top:0;align-self:start}
.sp .tabs{display:flex;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.sp .tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--gold-text);font:inherit;font-size:15px;font-weight:600;padding:12px 18px;cursor:pointer;min-height:44px}
.sp .tab[aria-selected=true]{color:var(--gold-2);border-bottom-color:var(--gold)}
.sp .stage{position:relative;height:clamp(300px,calc(100vh - 480px),560px);display:flex;min-width:0;max-width:100%;overflow:hidden}
.sp #cv{width:100%;max-width:100%;flex:1;display:block;touch-action:none;cursor:grab;min-width:0}
.sp #cv:active{cursor:grabbing}
.sp #flat{position:absolute;inset:0;width:100%;height:100%;display:none;padding:16px;overflow:auto}
.sp .hud{position:absolute;inset:0;pointer-events:none;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--gold-text);text-transform:uppercase}
.sp .hud .a{position:absolute;top:12px;left:14px;max-width:calc(50% - 20px)}
.sp .hud .b{position:absolute;top:12px;right:14px;color:var(--gold);text-align:right;max-width:calc(50% - 20px)}
.sp .hud .c{position:absolute;bottom:12px;left:14px}
.sp .ctrls{border-top:1px solid var(--rule);padding:14px 16px;display:flex;flex-direction:column;gap:11px;background:rgba(11,20,38,.55)}
.sp .noGl{display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font-size:17px;color:var(--paper-2);line-height:1.6}
.sp .slide{display:flex;align-items:center;gap:12px;min-width:0}
.sp .slideWrap{gap:10px;flex-wrap:wrap}
.sp .slideArt{margin-bottom:10px}.sp .slideArt2{margin-bottom:14px}
.sp .slide label{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-text);width:78px;flex:none}
.sp input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:32px;margin:0;background:linear-gradient(var(--gold-line),var(--gold-line)) center/100% 2px no-repeat;outline:none;min-width:0;cursor:pointer}
.sp input[type=range]::-moz-range-track{background:transparent}
.sp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--gold);cursor:pointer;border:2px solid var(--ink)}
.sp input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--gold);cursor:pointer;border:2px solid var(--ink)}
.sp input[type=range]:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.sp input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(214,178,90,.45)}
.sp input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px rgba(214,178,90,.45)}
.sp input[type=range]:disabled{opacity:.3}
.sp .slide output{font-size:15px;color:var(--paper);width:78px;text-align:right;flex:none;font-variant-numeric:tabular-nums}
.sp .lbl{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-text)}
.sp .unitTog{display:flex;gap:0;margin-left:auto;flex-wrap:wrap}
.sp .unitTog+.unitTog{margin-left:8px}
.sp .unitTog button{background:none;border:1px solid var(--field);color:var(--gold-text);font:inherit;font-size:15px;padding:5px 12px;min-height:40px;cursor:pointer}
.sp .unitTog button[aria-pressed=true]{border-color:var(--gold);color:var(--gold-2);background:rgba(214,178,90,.08)}
.sp #linkNote{margin:0;font-size:15px}
.sp #linkNote b{color:var(--warn)}

.sp .right{border-left:1px solid var(--rule);padding:16px 16px 24px;display:flex;flex-direction:column;gap:2px;min-width:0}
.sp #noDesignBox{border:1px solid var(--gold-line);padding:12px;margin:0 0 12px;background:rgba(214,178,90,.05)}
.sp .ndP{font-size:17px;margin-top:6px;max-width:none}
.sp .fld{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;min-width:0}
.sp .fld0{margin:0}
.sp .fldGap{margin-top:12px}
.sp .fld label{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-text)}
.sp .fld input,.sp .fld select,.sp .fld textarea{background:rgba(255,255,255,.04);border:1px solid var(--field);color:var(--paper);font:inherit;font-size:17px;padding:9px 10px;outline:none;width:100%;min-width:0;max-width:100%;border-radius:0}
.sp .fld select option{background:var(--ink-2);color:var(--paper)}
.sp .fld textarea{min-height:64px;resize:vertical}
.sp .fld input:focus,.sp .fld select:focus,.sp .fld textarea:focus{border-color:var(--gold-2)}
.sp .fld input[aria-invalid=true]{border-color:var(--bad)}
.sp .fld input::placeholder,.sp .fld textarea::placeholder{color:#a8a294;opacity:1}
.sp .err{color:var(--bad);font-size:15px;margin:6px 0 0}
.sp .trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:7px}
.sp .swatches{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.sp .sw{width:40px;height:40px;border:1px solid var(--field);cursor:pointer;padding:0}
.sp .sw[aria-pressed=true]{border-color:var(--gold-2);box-shadow:0 0 0 2px var(--gold-2)}
.sp input[type=color]{width:40px;height:40px;padding:0;border:1px solid var(--field);background:none;cursor:pointer}
.sp .drop{border:1px dashed var(--gold);padding:14px;text-align:center;cursor:pointer;font-size:15px;font-weight:600;color:var(--gold-text);overflow-wrap:anywhere}
.sp .drop:hover,.sp .drop.over{border-color:var(--gold-2);color:var(--gold-2);background:rgba(214,178,90,.05)}
.sp .drop img{max-height:56px;margin:0 auto 8px;display:block}
.sp .dropHint{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--paper-2)}
.sp .chips{display:flex;gap:6px;flex-wrap:wrap}
.sp .chip2{background:none;border:1px solid var(--field);color:var(--paper-2);font:inherit;font-size:15px;padding:7px 12px;min-height:40px;cursor:pointer}
.sp .chip2[aria-pressed=true]{border-color:var(--gold-2);color:var(--gold-2);background:rgba(214,178,90,.08)}
.sp .spec{display:flex;flex-direction:column;border-top:1px solid var(--rule);margin-top:6px}
.sp .spec>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:15px;min-width:0}
.sp .spec .k{color:var(--gold-text);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding-top:2px;flex:none}
.sp .spec .v{color:var(--paper);text-align:right;min-width:0;overflow-wrap:anywhere}
.sp .btn{display:block;width:100%;background:var(--gold-grad);color:#0a1220;font:inherit;font-size:16px;font-weight:600;letter-spacing:.01em;text-transform:none;padding:14px 16px;text-align:center;border:0;cursor:pointer;margin-top:14px;min-height:48px}
.sp .ghost{display:block;width:100%;background:none;border:1px solid var(--field);color:var(--gold-2);font:inherit;font-size:16px;font-weight:600;padding:11px 14px;cursor:pointer;margin-top:8px;text-align:center;text-decoration:none;min-height:44px}
.sp .ghost:hover{border-color:var(--gold);color:var(--paper)}
.sp .note{font-size:15px;color:var(--paper-2);line-height:1.55;margin-top:9px}
.sp .fit{border:1px solid var(--rule);padding:12px;margin-bottom:12px}
.sp .verdict{font-size:15px;line-height:1.5;margin-top:9px}
.sp .verdict b{font-weight:600;color:var(--paper)}
.sp .verdict a{color:var(--gold-2)}
.sp .verdict.ok{color:var(--ok)}.sp .verdict.warn{color:var(--warn)}.sp .verdict.bad{color:var(--bad)}
.sp .styleBtn:focus-visible,.sp .tab:focus-visible,.sp .chip2:focus-visible,.sp .sw:focus-visible,.sp .drop:focus-visible,.sp .btn:focus-visible,.sp .ghost:focus-visible,.sp input[type=color]:focus-visible,.sp .unitTog button:focus-visible,.sp .plist a:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}

/* send dialog */
.sp dialog{border:1px solid var(--gold-line);background:var(--ink-2);color:var(--paper-2);padding:0;max-width:560px;width:calc(100% - 32px)}
.sp dialog::backdrop{background:rgba(4,8,14,.82)}
.sp .dlg{padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px}
.sp .dlg h2{font-size:20px}
.sp .dlg p{font-size:17px}
.sp .dlg p.note{font-size:15px}
.sp .dlg textarea#specOut{background:rgba(255,255,255,.04);border:1px solid var(--field);color:var(--paper);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.6;padding:12px;width:100%;min-height:210px;resize:vertical}
.sp .dlg .btn{margin-top:4px}
.sp .dlgRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
@media (max-width:520px){.sp .dlgRow{grid-template-columns:minmax(0,1fr)}}
.sp #dlgMsg .ghost{margin-top:10px}

/* the three notes under the configurator */
.sp section.why{padding:64px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:820px){.sp section.why{grid-template-columns:minmax(0,1fr);gap:24px}}
.sp .why h2{font-size:20px;line-height:1.3;margin-bottom:7px}
.sp .why .n{font-size:13px;font-weight:600;color:var(--gold-text);letter-spacing:.14em;display:block;margin-bottom:10px}
.sp .why p{font-size:17px}

/* product list */
.sp .plist details{border-top:1px solid var(--rule)}
.sp .plist summary{padding:12px 0;min-height:44px}
.sp .plist a{color:var(--gold-2);text-decoration:underline;text-decoration-color:rgba(214,178,90,.4);text-underline-offset:3px;padding:8px 0}
.sp .plist a:hover{color:var(--paper)}

/* phone send bar (hidden on wide screens where the send button is always in view) */
.sp .sendBar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--rule);background:rgba(11,20,38,.85);min-width:0}
.sp .sendBar .qbSum{flex:1;min-width:0;font-size:15px;color:var(--paper);line-height:1.4}
.sp .sendBar .btn{width:auto;margin-top:0;flex:none;padding:12px 18px;min-height:44px}
/* the floating chat button steps above the pinned send bar */
body.sendbar-on .chat-launch{bottom:calc(var(--sendbar-h,0px) + 12px)}

@media (max-width:1140px){.sp .center{position:static}}
@media (max-width:780px){
  .sp .sHero{padding:24px 0 8px;gap:10px}
  .sp .sHero p{font-size:17px}
  .sp .studio{display:flex;flex-direction:column;margin-top:10px}
  .sp .left{border-right:0;border-bottom:1px solid var(--rule);padding:12px 12px 10px}
  .sp .structLbl{margin:10px 0 6px}
  /* the 16 structures become one swipeable row so the preview sits right under them */
  .sp .styleRow{flex-direction:row;overflow-x:auto;gap:8px;padding:2px 2px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;max-width:100%}
  .sp .styleRow .grp{display:none}
  .sp .styleBtn{flex:0 0 auto;width:auto;border:1px solid var(--field);padding:6px 12px 6px 8px;min-height:44px;scroll-snap-align:start;white-space:nowrap}
  .sp .stage{height:340px}
  .sp #cv{touch-action:pan-y}
  .sp #flat svg{min-width:640px;height:auto!important}
  .sp .hud .a,.sp .hud .b{max-width:calc(100% - 28px)}
  .sp .hud .b{top:34px;left:14px;right:auto;text-align:left}
  .sp .slide label{width:72px}
  .sp .slide output{width:70px}
  .sp input[type=range]{height:40px}
  .sp input[type=range]::-webkit-slider-thumb{width:28px;height:28px}
  .sp input[type=range]::-moz-range-thumb{width:28px;height:28px}
  .sp .unitTog{margin-left:0}
  .sp .unitTog button,.sp .chip2{min-height:44px}
  .sp .ctrls{padding:12px}
  .sp .right{padding:14px 12px 20px}
  /* on phone the quick send bar is pinned to the bottom while the studio is on screen */
  .sp .sendBar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--ink-3);border-top:1px solid var(--gold-line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .2s ease;visibility:hidden}
  .sp .sendBar.show{transform:none;visibility:visible}
  .sp .sendBar .qbSum{font-size:13px}
  .sp #pickerNote.dflt{display:none}
}
@media (max-width:360px){
  .sp .slide{gap:8px}
  .sp .slide label{width:64px;letter-spacing:.02em}
  .sp .slide output{width:62px;font-size:13px}
  .sp .sendBar{gap:10px;padding-left:12px;padding-right:12px}
  .sp .sendBar .btn{padding:10px 12px}
  .sp .dlg{padding:18px 16px 20px}
}

/* embedded in a product page: the configurator only */
body.embed .sp{padding:0;max-width:none}
body.embed .sp .sHero,body.embed .sp section.why,body.embed .sp .plist{display:none}
body.embed .sp .studio{margin-top:0;border-left:0;border-right:0}
body.embed .sp .center{position:static}
@media (prefers-reduced-motion:reduce){.sp *{animation:none!important;transition:none!important}}