/* v17: Top / Bottom views */
.tbf{position:relative;display:block}
.tbf img{width:100%;height:auto;border-radius:10px;display:block}
.tbl{position:absolute;left:8px;top:8px;background:rgba(15,17,20,.86);color:#fff;font:700 .72rem/1 Righteous,system-ui,sans-serif;font-style:normal;letter-spacing:.09em;text-transform:uppercase;padding:6px 10px;border-radius:999px;box-shadow:0 0 0 1px rgba(255,255,255,.35);pointer-events:none;z-index:1}
.tbside .tl2{left:calc(50% + 8px)}
.tbstack .tl2{top:calc(50% + 8px)}
.pair.tbcard{grid-template-columns:1fr 1fr!important;gap:8px}
.pdp-gal .pair.tbcard{grid-template-columns:1fr 1fr!important}
.tbnote{margin:.2em 0 1em;opacity:.9}
.pdp-tb .tbx{margin:0 0 28px}
.pdp-tb .tbx h3{margin:.2em 0 .5em}
.tbx .tbr{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tbtabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.tbtabs label{cursor:pointer;padding:8px 16px;border-radius:999px;border:1px solid #5C6268;background:#16191D;color:#fff;font:600 .85rem/1 system-ui,sans-serif;user-select:none}
.tbtabs label:hover{border-color:#fff}
.tbp{display:none}
.tbp .tbf{max-width:760px;margin:0 auto}
.tbp.p-both .tbside{max-width:1000px}
.tbp.p-both .tbstack{max-width:620px}
.tbr.r-both:checked~.tbpanels .p-both,.tbr.r-top:checked~.tbpanels .p-top,.tbr.r-bot:checked~.tbpanels .p-bot{display:block}
.tbr.r-both:checked~.tbtabs .l-both,.tbr.r-top:checked~.tbtabs .l-top,.tbr.r-bot:checked~.tbtabs .l-bot{background:#fff;color:#0F1114;border-color:#fff}
.tbr:focus-visible~.tbtabs{outline:2px solid #fff;outline-offset:3px;border-radius:12px}
.tbxg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
/* v19: the Top + Bottom view is the separate Top and Bottom images side by side (so the bindings overlay reaches both) */
.tbr.r-both:checked~.tbpanels{display:grid;gap:12px;margin:0 auto}
.tbr.r-both:checked~.tbpanels .p-top,.tbr.r-both:checked~.tbpanels .p-bot{display:block}
.tbr.r-both:checked~.tbpanels.tbs-side{grid-template-columns:1fr 1fr;max-width:1000px}
.tbr.r-both:checked~.tbpanels.tbs-stack{grid-template-columns:1fr;max-width:620px}
.tbr.r-both:checked~.tbpanels .tbf{max-width:none}
.tbextra .tbf{display:inline-block;max-width:100%}.tbextra .tbf img{width:auto;max-width:100%;height:auto}

/* v21: slalom block on snow-design pages (no .pdp-tb there, so the bindings script keeps its snow note) */
.tbwrap .tbx{margin:0 0 8px}
.tbwrap .tbx h3{margin:.2em 0 .5em}