/* ================================================================
   Steel and Stud v3 layer - DIY kits, state picker, designer hub,
   advanced filters, PDP upgrades, floating cart, sticky bar v3
   Loads after theme.css / theme-pro.css / configurator.css
   ================================================================ */

/* ---------- 1. promo bar (no sale) ---------- */
.promo .promo-diy{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.promo .promo-diy b{background:#FFB066;color:#3A2200;font-size:.62rem;font-weight:900;letter-spacing:.08em;padding:2px 7px;border-radius:99px}

/* ---------- 2. header state picker ---------- */
.h7-act.state-pick{cursor:pointer;background:none;border:0;font:inherit;color:inherit}
.h7-act.state-pick .tx b{color:var(--accent,#F97316)}
.state-modal{position:fixed;inset:0;z-index:1200;display:none;align-items:flex-start;justify-content:center;padding:9vh 16px 16px;background:rgba(2,20,43,.62);backdrop-filter:blur(4px)}
.state-modal.open{display:flex}
.state-panel{background:#fff;border-radius:18px;max-width:760px;width:100%;max-height:80vh;overflow:auto;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.4);animation:sp-in .22s ease}
@keyframes sp-in{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.state-panel h3{margin:0 0 4px;font-size:1.25rem}
.state-panel .sp-sub{font-size:.82rem;color:var(--muted,#64748b);margin:0 0 16px}
.state-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.state-grid button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 12px;border:1.5px solid #e5e0d6;border-radius:11px;background:#fff;cursor:pointer;font:inherit;text-align:left;transition:.15s}
.state-grid button:hover{border-color:var(--accent,#F97316);transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.state-grid button.on{border-color:var(--accent,#F97316);background:#FFF4EA;box-shadow:inset 0 0 0 1px var(--accent,#F97316)}
.state-grid button b{font-size:.83rem}
.state-grid button small{font-size:.66rem;color:var(--muted,#64748b)}
.state-close{position:sticky;top:0;float:right;border:0;background:#f1eee7;border-radius:99px;width:34px;height:34px;cursor:pointer;font-size:1rem;font-weight:800}

/* ---------- 3. hero designer hub ---------- */
.designer-band{padding:8px 0 34px}
.designer-band .db-head{display:flex;align-items:end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.designer-band h2{margin:0;font-size:clamp(1.35rem,2.6vw,1.9rem);color:#fff}
.designer-band .db-sub{color:#B9CBE2;font-size:.9rem;max-width:52ch}
.designer-hub{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1080px){.designer-hub{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.designer-hub{grid-template-columns:1fr}}
.designer-hub a{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 20px 18px;border-radius:16px;text-decoration:none;color:#fff;background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.16);overflow:hidden;transition:.22s;min-height:168px}
.designer-hub a::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 180px at 20% -20%,rgba(249,115,22,.28),transparent 60%);opacity:0;transition:.3s}
.designer-hub a:hover{transform:translateY(-4px);border-color:rgba(255,176,102,.65);box-shadow:0 18px 44px rgba(0,0,0,.35)}
.designer-hub a:hover::before{opacity:1}
.designer-hub .dh-k{font-size:.62rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#FFB066}
.designer-hub b{font-size:1.02rem;font-weight:800}
.designer-hub small{font-size:.76rem;color:#C7D6E8;line-height:1.45}
.designer-hub .go{margin-top:auto;font-size:.8rem;font-weight:800;color:#FFB066}
.designer-hub .dh-em{font-size:1.5rem;line-height:1}
.designer-hub a.featured{background:linear-gradient(150deg,#F97316,#c2410c);border-color:#fdba74}
.designer-hub a.featured .dh-k{color:#FFE9D6}
.designer-hub a.featured small{color:#FFE0C4}
.designer-hub a.featured .go{color:#fff}
/* configurator trio (product/cart) gets the 3-wide treatment too */
.cfg-designers{gap:10px}
.cfg-designers a{border-radius:13px}

/* ---------- 4. category card ratio + View product ---------- */
.pcard .media{aspect-ratio:4/3;overflow:hidden}
.pcard .media a{display:block;width:100%;height:100%}
.pcard .media img{width:100%;height:100%;object-fit:cover;object-position:center}
.pcard{display:flex;flex-direction:column}
.pcard .body{display:flex;flex-direction:column;flex:1;gap:6px}
.pcard .body .acts{margin-top:auto}
.pcard .acts .btn-view{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px}

/* ---------- 5. advanced PLP filters ---------- */
[data-v3hide]{display:none!important}
.side-f .fg-v3 span.flab{display:block;font-size:.68rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#64748b);margin:14px 0 8px}
.side-f .fsearch{position:relative;margin:4px 0 10px}
.side-f .fsearch input{width:100%;padding:9px 12px 9px 34px;border:1.5px solid #e5e0d6;border-radius:10px;font:inherit;font-size:.82rem}
.side-f .fsearch svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted,#94a3b8)}
.factive{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
.factive .fpill{display:inline-flex;align-items:center;gap:6px;background:#0B2A4A;color:#fff;font-size:.68rem;font-weight:700;border-radius:99px;padding:4px 8px 4px 10px}
.factive .fpill button{border:0;background:rgba(255,255,255,.22);color:#fff;width:15px;height:15px;border-radius:99px;font-size:.6rem;line-height:1;cursor:pointer;padding:0}
.factive .fclear{border:0;background:none;color:var(--accent,#F97316);font-size:.7rem;font-weight:800;cursor:pointer;text-decoration:underline}
.fnores{padding:34px 22px;border:1.5px dashed #e0d9cc;border-radius:14px;text-align:center;color:var(--muted,#64748b);font-size:.9rem}
.fnores b{display:block;font-size:1.05rem;color:var(--ink,#0f172a);margin-bottom:5px}

/* ---------- 6. PDP swatch redesign ---------- */
.cfg-swatches{display:flex!important;flex-wrap:wrap;gap:7px;padding:14px;background:#FAF7F1;border:1px solid #ECE6DA;border-radius:14px}
.cfg-swatches button,.swatches button{width:30px!important;height:30px!important;border-radius:50%!important;border:2px solid rgba(0,0,0,.12)!important;cursor:pointer;position:relative;transition:.15s;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.cfg-swatches button:hover,.swatches button:hover{transform:scale(1.18);z-index:2;box-shadow:0 4px 10px rgba(0,0,0,.22)}
.cfg-swatches button[aria-pressed=true],.swatches button[aria-pressed=true]{transform:scale(1.16);border-color:var(--ink,#0f172a)!important;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--accent,#F97316)}
.cfg-swatches button[aria-pressed=true]::after,.swatches button[aria-pressed=true]::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem;font-weight:900;text-shadow:0 1px 3px rgba(0,0,0,.75)}
.swatches{display:flex;flex-wrap:wrap;gap:7px}

/* ---------- 7. install choice (DIY kit) ---------- */
.install-choice{margin:14px 0 4px}
.install-choice .ic-lab{display:block;font-size:.68rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#64748b);margin-bottom:8px}
.install-choice .ic-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.install-choice .ic-opts{grid-template-columns:1fr}}
.install-choice label{cursor:pointer}
.install-choice input{position:absolute;opacity:0}
.install-choice span.card{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1.5px solid #e5e0d6;border-radius:13px;background:#fff;transition:.15s;height:100%}
.install-choice input:checked+span.card{border-color:var(--accent,#F97316);background:#FFF6EE;box-shadow:0 0 0 1px var(--accent,#F97316),0 8px 18px rgba(249,115,22,.12)}
.install-choice span.card b{font-size:.84rem}
.install-choice span.card small{font-size:.7rem;color:var(--muted,#64748b);line-height:1.4}
.install-choice .diy-tag{align-self:flex-start;background:#065F46;color:#D1FAE5;font-size:.58rem;font-weight:900;letter-spacing:.06em;padding:2px 7px;border-radius:99px;margin-bottom:2px}

/* ---------- 8. Buy Now ---------- */
.btn-buynow{background:linear-gradient(135deg,#0E9F6E,#057A55);color:#fff;border:0;font-weight:800;position:relative;overflow:hidden}
.btn-buynow:hover{background:linear-gradient(135deg,#057A55,#046C4E);transform:translateY(-1px);box-shadow:0 10px 22px rgba(5,122,85,.35)}
.btn-buynow::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);animation:bn-sheen 3.2s infinite}
@keyframes bn-sheen{0%{left:-80%}55%{left:130%}100%{left:130%}}

/* ---------- 9. floating add-to-cart FAB ---------- */
.fab-cart{position:fixed;right:18px;bottom:86px;z-index:920;display:flex;align-items:center;gap:0;background:linear-gradient(135deg,#F97316,#EA580C);color:#fff;border:0;border-radius:99px;padding:0;box-shadow:0 14px 34px rgba(234,88,12,.45);cursor:pointer;transform:translateY(140px);opacity:0;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .3s;font:inherit;overflow:hidden}
.fab-cart.show{transform:none;opacity:1}
.fab-cart .fc-ic{display:flex;align-items:center;justify-content:center;width:56px;height:56px;flex:none;position:relative}
.fab-cart .fc-ic .fc-n{position:absolute;top:8px;right:7px;background:#fff;color:#EA580C;font-size:.6rem;font-weight:900;min-width:17px;height:17px;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.fab-cart .fc-x{max-width:0;opacity:0;white-space:nowrap;transition:max-width .35s ease,opacity .25s,padding .35s;display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;padding:0}
.fab-cart:hover .fc-x,.fab-cart.wide .fc-x{max-width:220px;opacity:1;padding-right:20px}
.fab-cart .fc-x b{font-size:.82rem}.fab-cart .fc-x small{font-size:.64rem;opacity:.9}
.fab-cart:active{transform:scale(.96)}
@media(max-width:720px){.fab-cart{bottom:118px;right:12px}}

/* ---------- 10. sticky buy bar v3 ---------- */
.sticky-buy{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
.sticky-buy .sb-in{display:flex;align-items:center;gap:14px;max-width:1120px;margin:0 auto;background:rgba(6,25,48,.92);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);border-radius:18px 18px 0 0;padding:10px 16px;box-shadow:0 -14px 44px rgba(0,0,0,.35)}
.sticky-buy .sb-in::before{content:"";position:absolute;top:0;left:24px;right:24px;height:2px;background:linear-gradient(90deg,transparent,#F97316,transparent)}
.sticky-buy img{width:52px;height:40px;object-fit:cover;border-radius:9px;border:1px solid rgba(255,255,255,.2)}
.sticky-buy .n{color:#fff!important;font-size:.8rem;line-height:1.3;min-width:0;flex:1}
.sticky-buy .n .sb-sub{color:#8FE3B4;font-size:.68rem;font-weight:700}
.sticky-buy .sb-price{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;margin-left:auto}
.sticky-buy .sb-price small{color:#9FB4CC;font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.sticky-buy .sb-price b{color:#fff;font-size:1.18rem}
.sticky-buy .sb-price .sb-dep{color:#FFB066;font-size:.64rem;font-weight:700}
.sticky-buy .sb-quote{color:#C7D6E8;border:1px solid rgba(255,255,255,.25);border-radius:11px;padding:9px 13px;font-size:.74rem;font-weight:800;text-decoration:none;white-space:nowrap}
.sticky-buy .sb-quote:hover{border-color:#FFB066;color:#FFB066}
.sticky-buy .btn{white-space:nowrap}
@media(max-width:860px){.sticky-buy img,.sticky-buy .sb-quote{display:none}.sticky-buy .n{font-size:.7rem}}
@media(max-width:560px){.sticky-buy .sb-price small{display:none}}

/* ---------- 11. PDP 3D live panel ---------- */




@keyframes p3pulse{50%{opacity:.35}}









/* ---------- 12. PDP stat band + floor plan ---------- */
.pdp-statband{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:26px 0 0}
.pdp-statband>div{background:#fff;border:1px solid #ECE6DA;border-radius:14px;padding:14px 12px;text-align:center;transition:.18s}
.pdp-statband>div:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.08);border-color:#F9AE77}
.pdp-statband b{display:block;font-size:1.3rem;color:var(--accent-dark,#C2410C)}
.pdp-statband small{font-size:.66rem;color:var(--muted,#64748b);font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.pdp-plan{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;margin-top:26px}
@media(max-width:860px){.pdp-plan{grid-template-columns:1fr}}
.pdp-plan .plan-svg{background:#fff;border:1px solid #ECE6DA;border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.pdp-plan .plan-svg svg{width:100%;height:auto;display:block}
.pdp-plan .plan-tip{background:#FFF3E8;border-left:4px solid var(--accent,#F97316);border-radius:0 12px 12px 0;padding:13px 16px;font-size:.82rem;margin-top:14px}
.pdp-plan .plan-tip b{display:block;margin-bottom:2px}
.plan-zone-lab{font:800 11px/1 'Plus Jakarta Sans',sans-serif}

/* ---------- 13. financing mini calculator ---------- */
.fin-calc{margin-top:16px;background:#fff;border:1px solid #ECE6DA;border-radius:16px;padding:16px 18px}
.fin-calc .fcal-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.fin-calc .fcal-h b{font-size:.9rem}
.fin-calc .fcal-h span{font-size:.68rem;color:var(--muted,#64748b)}
.fin-calc input[type=range]{width:100%;margin:12px 0 4px;accent-color:var(--accent,#F97316)}
.fin-calc .fcal-out{display:flex;justify-content:space-between;align-items:end}
.fin-calc .fcal-out small{font-size:.68rem;color:var(--muted,#64748b)}
.fin-calc .fcal-out b{font-size:1.35rem;color:#057A55}
.fin-calc .fcal-out b i{font-style:normal;font-size:.7rem;color:var(--muted,#64748b);font-weight:700}

/* ---------- 14. checkout v3 ---------- */
.co-sec{margin-top:28px;background:#fff;border:1px solid #ECE6DA;border-radius:16px;padding:20px 22px}
.co-sec>h2{font-size:1.05rem;margin:0 0 4px;display:flex;align-items:center;gap:9px}
.co-sec>h2 .co-num{width:24px;height:24px;flex:none;border-radius:99px;background:var(--navy,#0B2A4A);color:#fff;font-size:.72rem;font-weight:900;display:inline-flex;align-items:center;justify-content:center}
.co-sec .co-sub{font-size:.76rem;color:var(--muted,#64748b);margin:0 0 14px}
.pay-intent{display:grid;gap:10px;margin-top:8px}
.pay-intent label{cursor:pointer;position:relative}
.pay-intent input{position:absolute;opacity:0}
.pay-intent .pi-card{display:flex;gap:12px;align-items:flex-start;border:1.5px solid #e5e0d6;border-radius:13px;padding:13px 15px;transition:.15s}
.pay-intent input:checked+.pi-card{border-color:#057A55;background:#F0FDF6;box-shadow:0 0 0 1px #057A55}
.pay-intent .pi-card .pi-dot{width:17px;height:17px;flex:none;margin-top:2px;border-radius:99px;border:2px solid #cbd5e1;transition:.15s}
.pay-intent input:checked+.pi-card .pi-dot{border-color:#057A55;box-shadow:inset 0 0 0 4px #057A55}
.pay-intent b{font-size:.86rem}
.pay-intent small{display:block;font-size:.72rem;color:var(--muted,#64748b);line-height:1.45;margin-top:2px}
.pay-intent .pi-badge{margin-left:auto;background:#065F46;color:#D1FAE5;font-size:.56rem;font-weight:900;letter-spacing:.06em;padding:3px 8px;border-radius:99px;white-space:nowrap}
.co-hp{position:absolute!important;left:-9999px!important;height:0;overflow:hidden}

/* ---------- 15. state chip near PDP price ---------- */
.state-chip{display:inline-flex;align-items:center;gap:6px;background:#EFF6FF;border:1px solid #BFDBFE;color:#1D4ED8;font-size:.68rem;font-weight:800;border-radius:99px;padding:4px 11px;cursor:pointer}
.state-chip:hover{background:#DBEAFE}

/* ---------- 16. DIY band (home) ---------- */
.diy-band{background:linear-gradient(150deg,#062B1E,#0A3D2B);border-radius:22px;padding:clamp(24px,4vw,44px);color:#fff;display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
@media(max-width:860px){.diy-band{grid-template-columns:1fr}}
.diy-band .k{color:#6EE7B7;font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.diy-band h2{color:#fff;margin:8px 0 10px;font-size:clamp(1.3rem,2.6vw,1.8rem)}
.diy-band p{color:#C6F6E3;font-size:.9rem;line-height:1.6}
.diy-band ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.diy-band li{display:flex;gap:10px;font-size:.84rem;color:#E7FFF4}
.diy-band li .tick{color:#34D399;font-weight:900}
.diy-steps{display:grid;gap:10px}
.diy-steps>div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:13px;padding:13px 15px;display:flex;gap:12px;align-items:flex-start}
.diy-steps .n{width:26px;height:26px;flex:none;border-radius:99px;background:#34D399;color:#052E20;font-weight:900;font-size:.78rem;display:flex;align-items:center;justify-content:center}
.diy-steps b{display:block;font-size:.84rem}
.diy-steps small{font-size:.72rem;color:#A7E8CD;line-height:1.4}

/* ================================================================
   v4 additions
   ================================================================ */

/* ---------- sticky buy bar: was display:none on desktop ---------- */
@media screen{
.sticky-buy{display:flex!important;z-index:940}
}
.sticky-buy .sb-was{color:#93A8BF;font-size:.72rem;text-decoration:line-through}
.sticky-buy .sb-save{background:#065F46;color:#D1FAE5;font-size:.58rem;font-weight:900;letter-spacing:.05em;padding:2px 8px;border-radius:99px;margin-top:2px}
.sticky-buy .sb-ship{display:block;color:#8FE3B4;font-size:.64rem;font-weight:700;margin-top:2px}
.sticky-buy .sb-cust{cursor:pointer;background:none;font:inherit;font-size:.74rem;font-weight:800}
@media print{.sticky-buy{display:none!important}}

/* ---------- swatches: final compact override ---------- */
html body .cfg-swatches{display:flex;gap:6px;flex-wrap:wrap;padding:12px;background:#FAF7F1;border:1px solid #ECE6DA;border-radius:12px}
html body .cfg-swatches button,html body .swatches button{width:24px!important;height:24px!important;min-width:24px!important;border-radius:50%!important;border:1.5px solid rgba(0,0,0,.14)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);padding:0!important}
html body .cfg-swatches button:hover,html body .swatches button:hover{transform:scale(1.25);z-index:2;box-shadow:0 3px 8px rgba(0,0,0,.25)}
html body .cfg-swatches button[aria-pressed=true],html body .swatches button[aria-pressed=true]{transform:scale(1.2);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent,#F97316)!important;border-color:transparent!important}
html body .cfg-swatches button[aria-pressed=true]::after,html body .swatches button[aria-pressed=true]::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.6rem;font-weight:900;text-shadow:0 1px 2px rgba(0,0,0,.8);border-radius:50%;box-shadow:none}

/* ---------- product cards: tighter, uniform ratio, no dead space ---------- */
.pcard .media{aspect-ratio:4/3!important;position:relative}
.grid.g4 .pcard .media{aspect-ratio:1/1!important}
.pcard .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcard .body{padding:12px 14px 14px!important;gap:5px!important}
.pcard .body h3{font-size:.92rem;line-height:1.3;margin:0}
.pcard .meta{font-size:.66rem}
.pcard .sw-strip{margin:2px 0}
.pcard .sw-strip i{width:11px;height:11px}
.pcard .price{margin:2px 0 0}
.pcard .price b{font-size:1.12rem}
.pcard .sub-price{font-size:.7rem;margin:0}
.pcard .acts{margin-top:8px!important;display:flex;gap:8px}
.pcard .acts .btn{padding-block:9px}

/* ---------- category sidebar: fits one screen ---------- */
.side-f.side-f-v3{max-height:calc(100vh - 118px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:16px 16px 12px}
.side-f.side-f-v3::-webkit-scrollbar{width:5px}
.side-f.side-f-v3::-webkit-scrollbar-thumb{background:#D8D0C2;border-radius:99px}
.side-f.side-f-v3 .fg{border-top:1px solid var(--rule,#e8e2d8);padding-top:10px;margin-top:10px}
.side-f.side-f-v3 .fg>span{display:flex;align-items:center;justify-content:space-between;cursor:pointer;margin-bottom:8px;user-select:none}
.side-f.side-f-v3 .fg>span .car{font-style:normal;font-size:.7rem;color:var(--muted,#94a3b8);transition:transform .18s}
.side-f.side-f-v3 .fg.closed>span .car{transform:rotate(-90deg)}
.side-f.side-f-v3 .fg.closed .fchips,.side-f.side-f-v3 .fg.closed .range-wrap{display:none}
.side-f.side-f-v3 .fchips{gap:3px}
.side-f.side-f-v3 .fchips button{padding:5px 7px;font-size:.78rem;border-radius:7px}
.side-f.side-f-v3 .fchips button::before{width:14px;height:14px;border-radius:4px}
.side-f.side-f-v3 .fchips-v3{display:grid;grid-template-columns:1fr 1fr}
.side-f.side-f-v3 .flab{font-size:.66rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#64748b)}
.side-f.side-f-v3 .fsearch{margin:2px 0 4px}

/* ---------- floating FAB: always on, above sticky bar ---------- */
.fab-cart{bottom:88px}
.fab-cart.on-pdp{bottom:96px}
@media(max-width:720px){.fab-cart,.fab-cart.on-pdp{bottom:128px;right:12px}}

/* ---------- x3d engine ---------- */
.x3d{background:linear-gradient(180deg,#EAF2FB 0%,#F6FAFF 46%,#E9EFE6 46.5%,#F4F7F1 100%);border-radius:16px}
















/* ---------- order-terms card: fix policy line layout ---------- */
.ot-card .pol{display:block!important;line-height:1.7}
.ot-card .pol a{display:inline!important;margin:0 2px}

/* ---------- price trend + savings meter ---------- */
.price-trend{margin-top:14px;background:#fff;border:1px solid #ECE6DA;border-radius:16px;padding:14px 16px 10px}
.price-trend .pt-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.price-trend .pt-h b{font-size:.85rem}
.price-trend .pt-h span{font-size:.64rem;color:var(--muted,#64748b);font-weight:700}
.price-trend svg{width:100%;height:auto;display:block;margin-top:6px}
.price-trend .pt-l{display:flex;justify-content:space-between;font-size:.6rem;color:var(--muted,#94a3b8);padding:0 6px}
.price-trend .pt-note{font-size:.68rem;color:var(--muted,#64748b);margin:8px 0 2px}
.save-meter{margin-top:14px;background:#fff;border:1px solid #ECE6DA;border-radius:16px;padding:14px 16px}
.save-meter .sm-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.save-meter .sm-h b{font-size:.85rem}
.save-meter .sm-h span{font-size:.64rem;color:var(--muted,#64748b);font-weight:700}
.save-meter .sm-row{display:grid;grid-template-columns:96px 1fr auto;gap:9px;align-items:center;font-size:.68rem;color:var(--muted,#64748b);margin-top:6px}
.save-meter .sm-row em{font-style:normal;font-weight:800;color:var(--ink,#0f172a)}
.save-meter .sm-bar{display:block;height:12px;background:#F1EDE4;border-radius:99px;overflow:hidden}
.save-meter .sm-bar b{display:block;height:100%;background:#CBD5E1;border-radius:99px}
.save-meter .sm-row.steel .sm-bar b{background:linear-gradient(90deg,#10B981,#059669)}
.save-meter .sm-note{font-size:.7rem;color:var(--muted,#64748b);margin:10px 0 0}

/* ================================================================
   v5 additions, desktop round-3 + full mobile layer
   ================================================================ */

/* ---------- D1. custom-size band (category pages) redesign ---------- */
section.sec-navy.grid-tex{background:linear-gradient(160deg,#0B2A4A 0%,#0A3057 55%,#06192E 100%)!important;color:#fff;position:relative;overflow:hidden}
section.sec-navy.grid-tex::before{content:"";position:absolute;inset:0;background:radial-gradient(640px 300px at 82% -10%,rgba(249,115,22,.22),transparent 60%);pointer-events:none}
section.sec-navy.grid-tex .wrap{position:relative}
section.sec-navy.grid-tex h2{color:#fff}
section.sec-navy.grid-tex .eyebrow{color:#FFB066}
section.sec-navy.grid-tex .lede{color:#B9CBE2}
section.sec-navy.grid-tex .split{grid-template-columns:.9fr 1.25fr;align-items:center}
@media(max-width:1000px){section.sec-navy.grid-tex .split{grid-template-columns:1fr}}
section.sec-navy.grid-tex .grid.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
@media(max-width:680px){section.sec-navy.grid-tex .grid.g2{grid-template-columns:1fr}}
section.sec-navy.grid-tex .widget{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);border-radius:18px;color:#fff;box-shadow:none;display:flex;flex-direction:column;padding:20px;min-width:0}
section.sec-navy.grid-tex .widget h3{color:#fff;font-size:.92rem;margin:0 0 10px}
section.sec-navy.grid-tex .widget h3 svg{color:#34D399;flex:none}
section.sec-navy.grid-tex .widget .opt{margin-top:12px}
section.sec-navy.grid-tex .widget .opt span{display:flex;justify-content:space-between;align-items:baseline;gap:10px;color:#C7D6E8;font-size:.76rem;font-weight:700}
section.sec-navy.grid-tex .widget .opt output{color:#FFB066;font-weight:900;white-space:nowrap}
section.sec-navy.grid-tex .widget input[type=range]{width:100%;accent-color:#F97316;margin-top:6px}
section.sec-navy.grid-tex .fin-out{display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap;text-align:left;background:rgba(249,115,22,.15);border:1px solid rgba(249,115,22,.45);border-radius:14px;padding:14px 16px;margin-top:16px}
section.sec-navy.grid-tex .fin-out b{font-size:1.75rem;color:#FFB066;order:-1}
section.sec-navy.grid-tex .fin-out small{display:block;color:#C7D6E8;font-size:.66rem;flex:1 1 140px;line-height:1.45}
section.sec-navy.grid-tex .widget p{color:#8FA6C0!important}
section.sec-navy.grid-tex .widget .dl-row{display:flex;gap:10px;margin-top:12px}
section.sec-navy.grid-tex .widget .dl-row input{flex:1;min-width:0;background:rgba(255,255,255,.94);border:0;border-radius:11px;padding:11px 13px;font:inherit}
section.sec-navy.grid-tex .widget .dl-msg{color:#8FE3B4!important;font-size:.74rem;margin-top:10px}

/* ---------- D2. swatches: final 18px + name strip ---------- */
html body .cfg-swatches{gap:5px;padding:10px 12px;border-radius:11px}
html body .cfg-swatches button,html body .swatches button{width:18px!important;height:18px!important;min-width:18px!important;border-width:1px!important}
html body .cfg-swatches button[aria-pressed=true]::after,html body .swatches button[aria-pressed=true]::after{font-size:.5rem}

/* ---------- D3. cost + maintenance cards: 3 per line ---------- */
@media(min-width:861px){
.pc-cost{grid-template-columns:repeat(3,1fr)!important}
.pc-steps{grid-template-columns:repeat(3,1fr)!important}
}

/* ---------- D4. recently viewed: fixed 4-slot grid ---------- */
.recent-strip,[data-recent]{display:grid!important;grid-auto-flow:row!important;grid-template-columns:repeat(4,1fr)!important;gap:14px!important;overflow:visible!important;scroll-snap-type:none!important}
.recent-strip .pcard{max-width:none}
@media(max-width:900px){.recent-strip,[data-recent]{grid-template-columns:repeat(2,1fr)!important}}

/* ================================================================
   MOBILE LAYER
   ================================================================ */
@media(max-width:760px){

/* ---------- M1. header ---------- */
.h7-main{flex-wrap:wrap;gap:6px 8px;padding-block:8px}
.h7-main .logo img{width:118px;height:auto}
.h7-search{order:9;flex:1 1 100%;margin:0;min-height:40px}
.h7-acts{margin-left:auto;gap:0}
.h7-acts .h7-act{padding:6px 5px}
.h7-acts .state-pick .tx{display:flex!important;flex-direction:column;align-items:flex-start}
.h7-acts .state-pick .tx small{display:none}
.h7-acts .state-pick .tx b{font-size:.62rem;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.1}

/* ---------- M2. kill social-proof popups on mobile ---------- */
.sprf,.proof{display:none!important}

/* ---------- M3. hero spacing ---------- */
.hero7 .h7grid{gap:20px;padding-block:16px 8px}
.hero7 .h7tx{display:flex;flex-direction:column;gap:12px}
.hero7 .h7stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:4px 0 0}
.hero7 .h7stats dt{font-size:.95rem}
.hero7 .h7stats dd{font-size:.56rem;line-height:1.25}
.designer-band{padding:2px 0 18px}
.designer-band .db-head{margin-bottom:12px}

/* ---------- M4+M6. horizontal snap sliders cut the scroll length ---------- */
.v3-slider{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:74%;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:12px;scrollbar-width:thin}
.v3-slider>*{scroll-snap-align:start;min-width:0}
.v3-slider::-webkit-scrollbar{height:4px}
.v3-slider::-webkit-scrollbar-thumb{background:#F0A46B;border-radius:99px}
.designer-hub{display:grid;grid-auto-flow:column;grid-auto-columns:76%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:10px}
.designer-hub a{scroll-snap-align:start;min-height:142px;padding:16px 15px 13px}
.is-home section{padding-block:30px}
.is-home .h7cards{display:grid;grid-auto-flow:column;grid-auto-columns:74%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
.is-home .h7cards>*{scroll-snap-align:start}
.is-home .dept-row{display:grid;grid-auto-flow:column;grid-auto-columns:36%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.is-home .dept-row>*{scroll-snap-align:start}
.is-home .diy-band{grid-template-columns:1fr;gap:18px;padding:22px 18px}
.is-home .diy-steps{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.is-home .diy-steps>div{scroll-snap-align:start}
.is-home .marq{display:none}

/* ---------- M5. tabs → pill slider ---------- */
.tabs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:8px;scroll-snap-type:x proximity;padding:6px;background:#EDF2F8;border-radius:99px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs [role=tab]{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;border:0;border-radius:99px;padding:9px 18px;font-weight:800;font-size:.8rem;background:transparent;color:#3A4A5E}
.tabs [role=tab][aria-selected=true]{background:linear-gradient(135deg,#F97316,#EA580C);color:#fff;box-shadow:0 6px 14px rgba(234,88,12,.35)}

/* ---------- M8. configurator compaction ---------- */
.cfg .cfg-grid.uc,.cfg .cfg-grid.sz,.cfg .cfg-grid.op{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:46%;gap:8px!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.cfg .cfg-grid.uc>*,.cfg .cfg-grid.sz>*,.cfg .cfg-grid.op>*{scroll-snap-align:start}
.cfg .cfg-block.has-sw header{cursor:pointer;position:relative}
.cfg .cfg-block.has-sw header::after{content:"tap to change ▾";font-size:.6rem;font-weight:800;color:var(--accent,#F97316);margin-left:auto;white-space:nowrap}
.cfg .cfg-block.has-sw.sw-open header::after{content:"close ▴"}
.cfg .cfg-block.has-sw .cfg-swatches{max-height:0!important;overflow:hidden!important;opacity:0;padding-top:0!important;padding-bottom:0!important;transition:max-height .25s ease,opacity .2s,padding .25s}
.cfg .cfg-block.has-sw.sw-open .cfg-swatches{max-height:240px!important;opacity:1;padding-top:10px!important;padding-bottom:10px!important}

/* ---------- M9. sticky buy bar mobile ---------- */
.sticky-buy{bottom:64px}
.sticky-buy .sb-in{flex-wrap:wrap;gap:4px 10px;padding:9px 12px;border-radius:16px 16px 0 0}
.sticky-buy img{display:none}
.sticky-buy .sb-quote,.sticky-buy .sb-cust{display:none!important}
.sticky-buy .n{flex:1 1 52%;font-size:.66rem;line-height:1.25}
.sticky-buy .n .sb-ship{display:none}
.sticky-buy .sb-price{margin-left:auto;flex-direction:row;align-items:baseline;gap:7px}
.sticky-buy .sb-price small,.sticky-buy .sb-was{display:none}
.sticky-buy .sb-price b{font-size:1.02rem}
.sticky-buy .sb-price .sb-dep{font-size:.56rem}
.sticky-buy .sb-price .sb-save{font-size:.5rem;padding:1px 6px;margin:0}
.sticky-buy .btn{flex:1 1 44%;padding:11px 6px;font-size:.76rem;white-space:nowrap}

/* misc mobile polish */
.pdp-statband{grid-template-columns:repeat(3,1fr)}
.pc-cost,.pc-steps{grid-template-columns:1fr!important}
.state-panel{padding:18px}
.state-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- M7. category filter bottom sheet (≤920px) ---------- */
@media(max-width:920px){
[data-plp] .side-f.side-f-v3{position:fixed!important;left:0;right:0;bottom:0;top:auto!important;z-index:1150;max-height:78vh!important;border-radius:22px 22px 0 0;transform:translateY(106%);transition:transform .34s cubic-bezier(.22,1,.36,1);margin:0;box-shadow:0 -24px 70px rgba(0,0,0,.4);padding-bottom:86px}
[data-plp] .side-f.side-f-v3.open{transform:none}
[data-plp] .side-f.side-f-v3::before{content:"";display:block;width:44px;height:4.5px;border-radius:99px;background:#D8D0C2;margin:0 auto 12px}
.fsheet-scrim{position:fixed;inset:0;z-index:1140;background:rgba(2,20,43,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .28s}
.fsheet-scrim.show{opacity:1;pointer-events:auto}
.fsheet-btn{position:fixed;left:50%;transform:translateX(-50%);bottom:74px;z-index:1050;display:inline-flex;align-items:center;gap:9px;background:linear-gradient(140deg,#0E3358,#0B2A4A);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:12px 22px;font:inherit;font-size:.84rem;font-weight:800;box-shadow:0 14px 34px rgba(0,0,0,.38);cursor:pointer}
.fsheet-btn .fb-n{background:#F97316;min-width:20px;height:20px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;font-size:.66rem;padding:0 5px}
.fsheet-apply{position:absolute;left:14px;right:14px;bottom:14px;z-index:2}
.fsheet-apply .btn{width:100%;padding:13px;font-size:.9rem}
}
@media(min-width:921px){.fsheet-btn,.fsheet-scrim{display:none!important}}

/* ================================================================
   v6 additions, color picker redesign + mobile slider repair
   ================================================================ */

/* ---------- compact color picker replaces the swatch box (ALL viewports) ---------- */
html body .cfg-swatches{display:none!important}
.cfg .cfg-block.has-sw header::after{content:none!important}
.sw-mini{margin-top:4px}
.sw-mini .sw-cur{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border:1.5px solid #E5E0D6;border-radius:99px;background:#fff;font:inherit;font-size:.8rem;font-weight:800;cursor:pointer;transition:.15s}
.sw-mini .sw-cur:hover{border-color:var(--accent,#F97316)}
.sw-mini .sw-cur i{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.sw-mini .sw-cur em{font-style:normal}
.sw-mini .sw-cur span{color:var(--accent,#F97316);font-size:.66rem;font-weight:900;letter-spacing:.04em}
.sw-mini .sw-pop{display:none;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:5px;margin-top:9px;padding:9px;background:#FAF7F1;border:1px solid #ECE6DA;border-radius:12px}
.sw-mini.open .sw-pop{display:grid}
.sw-mini .sw-pop button{display:flex;align-items:center;gap:7px;padding:6px 8px;border:1px solid transparent;border-radius:8px;background:#fff;font:inherit;font-size:.66rem;font-weight:700;cursor:pointer;text-align:left;color:var(--ink,#0f172a)}
.sw-mini .sw-pop button:hover{border-color:#F0CFA6}
.sw-mini .sw-pop button.on{border-color:var(--accent,#F97316);background:#FFF6EE;box-shadow:0 0 0 1px var(--accent,#F97316)}
.sw-mini .sw-pop button i{width:14px;height:14px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.14)}
@media(max-width:760px){.sw-mini .sw-pop{grid-template-columns:repeat(2,1fr)}}

/* ---------- MOBILE SLIDER REPAIR: clear inherited explicit columns ---------- */
@media(max-width:760px){
.v3-slider{grid-template-columns:none!important;grid-template-rows:none!important;align-items:stretch;-webkit-mask-image:linear-gradient(90deg,#000 91%,transparent);mask-image:linear-gradient(90deg,#000 91%,transparent);padding-right:26px}
.v3-slider>*{transform:none!important;max-width:none!important;width:auto!important;margin:0!important;height:auto}
.designer-hub{grid-template-columns:none!important}
.is-home .h7cards,.is-home .dept-row,.is-home .diy-steps{grid-template-columns:none!important}
.cfg .cfg-grid.uc,.cfg .cfg-grid.sz,.cfg .cfg-grid.op{grid-template-columns:none!important;grid-auto-columns:minmax(148px,58%)!important}
.cfg .cfg-card{min-height:74px}
/* cart/product state bar stacks cleanly */
.cfg-state{display:flex!important;flex-wrap:wrap;gap:8px;align-items:center}
.cfg-state>div{flex:1 1 100%}
.cfg-state select{width:100%;max-width:none}
.cfg-state .note{flex:1 1 100%;margin:0}
.cfg-state .s3d{flex:1 1 100%;text-align:center}
/* general mobile rhythm */
main section{padding-block:30px}
.wrap{padding-inline:14px}
.backtop{display:none!important}
h2{font-size:clamp(1.12rem,5.2vw,1.45rem)}
.lede{font-size:.86rem}
}

/* ---------- compare bar: never behind the sticky buy bar ---------- */
.cmpbar{bottom:92px!important;z-index:1080!important}
@media(max-width:760px){.cmpbar{bottom:178px!important;left:10px!important;right:10px!important;flex-wrap:wrap}}

/* ---------- filter sheet: apply button rides the sheet bottom ---------- */
@media(max-width:920px){
[data-plp] .side-f.side-f-v3{padding-bottom:12px!important}
.fsheet-apply{position:sticky!important;bottom:-12px;left:auto;right:auto;margin:16px -16px -12px;padding:12px 14px 14px;background:linear-gradient(180deg,rgba(255,255,255,0),var(--surface,#fff) 34%);z-index:3}
}

/* ================================================================
   v6.1 FINAL FIXES, compare bar, order-process redesign,
   mobile scrollbar hiding + dot nav, white USP headings,
   section spacing, full PDP mobile responsiveness
   Loads last, authoritative overrides.
   ================================================================ */

/* ---------- FIX 1. COMPARE BAR: fully hidden until a product is selected ---------- */
.cmpbar{
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  transform:translate(-50%,200%)!important;
  transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .3s ease,visibility .3s ease!important;
  background:linear-gradient(135deg,#06192E,#0B2A4A)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:16px!important;
  padding:11px 12px 11px 20px!important;gap:14px!important;
  box-shadow:0 20px 54px rgba(0,0,0,.42)!important;
}
.cmpbar.show{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translate(-50%,0)!important}
.cmpbar .n{font-family:var(--display);font-weight:800;letter-spacing:.01em;white-space:nowrap}
.cmpbar .imgs img{border:2px solid #0B2A4A}
@media(max-width:760px){
  .cmpbar{left:12px!important;right:12px!important;transform:translateY(200%)!important;justify-content:center}
  .cmpbar.show{transform:translateY(0)!important}
}

/* ---------- FIX 2. USP BAND: headings + subtext readable on dark navy ---------- */
.usp-band b{color:#fff!important}
.usp-band small{color:rgba(233,240,250,.78)!important}
.usp-band .u{border-right-color:rgba(255,255,255,.12)!important}
.usp-band .u:nth-child(-n+2){border-bottom-color:rgba(255,255,255,.12)!important}

/* ---------- FIX 3. SPACING after "Talk to a building specialist" duo-ban ---------- */
.duo-ban{margin-block:clamp(30px,5vw,58px) clamp(38px,6vw,66px)!important}
@media(max-width:760px){.duo-ban{margin-block:26px 34px!important;gap:16px}}

/* ---------- FIX 4. ORDER PROCESS: "How to order in 4 steps" full redesign ---------- */
section[aria-labelledby="how-h"]{background:linear-gradient(180deg,#F5F8FC 0%,#E9F1FA 100%);position:relative;overflow:hidden}
section[aria-labelledby="how-h"]::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(720px 340px at 86% -12%,rgba(240,115,0,.10),transparent 60%),radial-gradient(640px 320px at 8% 120%,rgba(0,66,128,.08),transparent 60%)}
section[aria-labelledby="how-h"] .wrap{position:relative;z-index:1}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:st;margin-top:46px!important}
.steps::before{content:"";position:absolute;top:52px;left:12.5%;right:12.5%;height:3px;z-index:0;
  background:repeating-linear-gradient(90deg,#F5B27E 0 11px,transparent 11px 22px);opacity:.6}
.step{position:relative;z-index:1;background:#fff;border:1px solid #E4ECF6;border-radius:22px;
  padding:46px 22px 26px;text-align:center;box-shadow:0 12px 32px rgba(0,66,128,.07);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s;overflow:visible}
.step:hover{transform:translateY(-9px);box-shadow:0 26px 56px rgba(0,66,128,.16);border-color:#F9C89A}
.step::before{content:"0" counter(st);position:absolute;top:-23px;left:50%;transform:translateX(-50%);
  min-width:48px;height:48px;padding:0 10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#F07300,#FF9A3D);color:#fff;font-family:var(--display);font-weight:800;
  font-size:1.08rem;border-radius:999px;border:4px solid #fff;box-shadow:0 12px 24px rgba(240,115,0,.42)}
.step img{width:66px;height:66px;object-fit:contain;margin:10px auto 16px;padding:15px;
  background:linear-gradient(160deg,#FFF3E8,#FFE6CF);border-radius:18px;box-shadow:inset 0 0 0 1px rgba(240,115,0,.14)}
.step h3{font-size:1.09rem;margin:0 0 8px;color:var(--ink);font-family:var(--display)}
.step p{color:var(--muted);margin:0 0 18px;font-size:.9rem;line-height:1.6}
.step .chip{display:inline-flex;align-items:center;gap:6px;background:#EAF1FA;color:var(--primary);
  border:1px solid #D3E1F2;border-radius:999px;font-size:.72rem;font-weight:800;padding:7px 15px}
@media(max-width:920px){.steps{grid-template-columns:repeat(2,1fr);gap:40px 18px;margin-top:40px!important}.steps::before{display:none}}
@media(max-width:560px){.steps{grid-template-columns:1fr;gap:38px}}

/* ---------- FIX 5. GLOBAL horizontal-overflow guard ---------- */
html,body{overflow-x:clip}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
.step img,.feat4 img,.cmpbar .imgs img,.pdp-thumbs img,.sticky-buy img{height:auto}

/* ---------- FIX 6. MOBILE: hide scrollbars on every horizontal slider ---------- */
@media(max-width:760px){
  .v3-slider,.designer-hub,.feat4,.steps,.cfg-designers,
  .is-home .h7cards,.is-home .dept-row,.is-home .diy-steps,
  .cfg .cfg-grid.uc,.cfg .cfg-grid.sz,.cfg .cfg-grid.op,
  .tcar .ttrack,.pc-nav .wrap,.tabs,.crumbs ol,
  [data-slider],[class*="slider"]{
    scrollbar-width:none!important;-ms-overflow-style:none!important;
  }
  .v3-slider::-webkit-scrollbar,.designer-hub::-webkit-scrollbar,.feat4::-webkit-scrollbar,
  .steps::-webkit-scrollbar,.cfg-designers::-webkit-scrollbar,
  .is-home .h7cards::-webkit-scrollbar,.is-home .dept-row::-webkit-scrollbar,.is-home .diy-steps::-webkit-scrollbar,
  .cfg .cfg-grid.uc::-webkit-scrollbar,.cfg .cfg-grid.sz::-webkit-scrollbar,.cfg .cfg-grid.op::-webkit-scrollbar,
  .tcar .ttrack::-webkit-scrollbar,.pc-nav .wrap::-webkit-scrollbar,.tabs::-webkit-scrollbar,
  [data-slider]::-webkit-scrollbar,[class*="slider"]::-webkit-scrollbar{
    display:none!important;height:0!important;width:0!important;background:transparent!important;
  }
}

/* ---------- FIX 6b. DOT NAVIGATION (injected by app-v3.js) ---------- */
.ss-dots{display:none}
@media(max-width:760px){
  /* v288: ul.ss-dots so a section's own list style (e.g. .diy-band ul = grid) can
     never stack the dots in a column; they are always one row. */
  ul.ss-dots{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;gap:7px;margin:12px 0 2px;padding:0;list-style:none}
  ul.ss-dots li{display:block;margin:0;padding:0;line-height:0}
  .ss-dots button{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:#C4D2E4;cursor:pointer;
    transition:width .25s ease,background .25s ease;-webkit-appearance:none;appearance:none}
  .ss-dots button.on{width:22px;background:linear-gradient(90deg,#F07300,#FF9A3D)}
  .ss-hint{display:block;text-align:center;font-size:.68rem;font-weight:700;color:var(--muted);margin-top:8px;letter-spacing:.02em}
}

/* ---------- FIX 7. PDP mobile responsiveness, fit everything to screen ---------- */
@media(max-width:760px){
  .wrap.pdp,.pdp{grid-template-columns:1fr!important;max-width:100%;overflow:visible}
  .buy{padding:20px 16px!important;max-width:100%}
  .buy h1{font-size:1.32rem!important;line-height:1.25;word-break:break-word}
  .buy .pr-row b{font-size:1.7rem!important}
  .buy .opt{max-width:100%}
  .buy .pills{display:flex;flex-wrap:wrap;gap:8px}
  .buy .pills label{flex:1 1 auto;min-width:0}
  .buy .swatches{flex-wrap:wrap;gap:7px}
  .buy .ctas{margin-top:20px;gap:10px}
  .buy .ctas>.btn,.buy .btn-block{width:100%!important;min-width:0;white-space:normal;line-height:1.25;padding:13px 12px}
  .buy .ctas>div{grid-template-columns:1fr 1fr!important;gap:10px;width:100%}
  .buy .ctas>div .btn{width:100%;min-width:0;padding:12px 8px;font-size:.82rem;white-space:nowrap}
  .pdp-thumbs{flex-wrap:wrap;gap:8px}
  .pdp-thumbs button{width:56px;height:44px;flex:0 0 auto}

  /* configurator panel: strictly inside the viewport */
  .cfg,.cfg *{max-width:100%;min-width:0!important;box-sizing:border-box}
  .cfg-block{padding:14px!important}
  .cfg-row{grid-template-columns:1fr!important}
  .cfg-row .cfg-grid.op{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))!important}
  .cfg-designers{grid-template-columns:1fr!important}
  .cfg-state{flex-direction:column;align-items:stretch!important}
  .cfg-state select,.cfg-state .note,.cfg-state .s3d{width:100%!important;min-width:0!important;max-width:100%;white-space:normal}
  .cfg-summary .grand b{font-size:1.25rem}
  .cfg-custom>button.hd{font-size:.88rem}

  /* spec / data tables never widen the page */
  main table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  main table::-webkit-scrollbar{display:none}

  /* order-terms + included panels stack */
  .pc-incl,.pc-fin,.ot-card ul{grid-template-columns:1fr!important}
}