/* WearSlabs preview: binder page. Builds on product.css (same layout, panel and backdrop as the hoodie page). */

/* ---------- gallery: photo, 3D spin, flat cover ---------- */
.bx-stage { position: relative; margin: 6px auto 0; width: min(100%, 62svh); aspect-ratio: 1223 / 1286; display: grid; place-items: center; }
.bx-view { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }
.bx-view img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; transition: opacity .4s; filter: drop-shadow(0 30px 40px rgba(0,0,0,.7)); }
.bx-view img.in { opacity: 1; }
#viewCover img { max-height: 92%; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
/* until the binder pictures exist: the hoodie art, labelled so nobody mistakes it for the binder */
.bx-view.is-fallback::after { content: 'Binder photo coming soon'; position: absolute; left: 50%; bottom: 4%; translate: -50% 0; font: 500 10px/1 var(--tech); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: rgba(0,0,0,.5); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }

/* the 3D binder: real proportions (277.5 x 354 mm covers, 45 mm spine) */
.bx-3d { perspective: 1400px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.bx-3d.grab { cursor: grabbing; }
.bx { --w: min(54cqw, 300px, 46svh); --h: calc(var(--w) * 354 / 277.5); --d: calc(var(--w) * 45 / 277.5); position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; will-change: transform; }
.bx-stage { container-type: inline-size; }
.bx__f { position: absolute; left: 50%; top: 50%; background-color: var(--dark, #1b1b1f); background-repeat: no-repeat; background-size: cover; background-position: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bx__front, .bx__back { width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); border-radius: 0 12px 12px 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.bx__front { transform: translateZ(calc(var(--d) / 2)); }
.bx__back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); border-radius: 12px 0 0 12px; }
/* stitching just inside the edge, like the printed samples */
.bx__front::after, .bx__back::after { content: ''; position: absolute; inset: 1.6%; border: 1px dashed rgba(255,255,255,.28); border-radius: inherit; pointer-events: none; }
.bx__spine { width: var(--d); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--d) / -2); transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); display: grid; place-items: center; overflow: hidden; }
.bx__spine::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.35), transparent 30%, transparent 70%, rgba(0,0,0,.35)); }
/* spine name in Pokemon Solid, the print font: white with a navy outline like the printed spine, case kept as typed */
.bx__spineText { position: relative; writing-mode: vertical-rl; white-space: nowrap; font-family: 'PokeSolid', var(--display); font-weight: 400; color: #fff; -webkit-text-stroke: calc(var(--d) * .05) #141a33; paint-order: stroke fill; letter-spacing: .02em; line-height: 1; font-size: min(calc(var(--d) * .5), calc(var(--h) * .82 / var(--len, 8))); text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 0 1px #000; }
.bx__spineText.ghost { opacity: .45; }
/* the zipper sides: black gusset with a metal zip line */
.bx__edge { background: #0d0d10; }
.bx__edge::after { content: ''; position: absolute; background: repeating-linear-gradient(0deg, #8a8a92 0 2px, #2a2a30 2px 4px); }
.bx__right { width: var(--d); height: calc(var(--h) - 24px); margin: calc((var(--h) - 24px) / -2) 0 0 calc(var(--d) / -2); transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.bx__right::after { left: 45%; width: 10%; top: 0; bottom: 0; }
.bx__top, .bx__bottom { width: calc(var(--w) - 12px); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc((var(--w) - 12px) / -2 + 6px); }
.bx__top { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.bx__bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }
.bx__top::after, .bx__bottom::after { top: 45%; height: 10%; left: 0; right: 0; background: repeating-linear-gradient(90deg, #8a8a92 0 2px, #2a2a30 2px 4px); }
.bx-3d::after { content: ''; position: absolute; left: 50%; bottom: 6%; width: 60%; height: 7%; translate: -50% 0; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); z-index: -1; }

.views { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }

/* ---------- panel extras ---------- */
.bdp__dealLine { margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.bdp__dealLine b { color: #7dffb3; }
.bdp__count { color: var(--faint); font-size: 10px; text-align: right; margin-top: -4px; }

/* complete the set: the twin hoodie, small and tappable */
.twin { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 12px 10px 10px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.04); transition: border-color .2s, background .2s; }
.twin:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.07); }
.twin__img { width: 76px; aspect-ratio: 1223 / 1286; border-radius: 10px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--dark) 70%, #fff 8%), #0b0b10); display: grid; place-items: center; overflow: hidden; }
.twin__img img { width: 100%; }
.twin__body { display: grid; gap: 2px; min-width: 0; }
.twin__eyebrow { color: var(--muted); font-size: 10px; }
.twin__body b { font-size: 14px; line-height: 1.25; }
.twin__note { font-size: 12px; color: var(--muted); line-height: 1.35; }
.twin__note em { font-style: normal; color: #7dffb3; }
.twin__go { font-size: 11px; padding: 8px 10px; border-radius: 999px; background: var(--bone); color: var(--ink); white-space: nowrap; }
@media (max-width: 380px) { .twin { grid-template-columns: 64px 1fr; } .twin__img { width: 64px; } .twin__go { grid-column: 1 / -1; text-align: center; } }

/* ---------- binder facts ---------- */
.bfacts { padding: 80px 0 30px; }
.bfacts__grid { display: grid; gap: 10px; margin-top: 28px; }
.bfacts__grid div { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--deep) 55%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bfacts__grid dt { color: var(--muted); font-size: 10px; }
.bfacts__grid dd { margin-top: 4px; font-weight: 600; font-size: 15px; line-height: 1.4; }
@media (min-width: 700px) { .bfacts__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- faq ---------- */
.bfaq { padding: 40px 0 20px; }
.bfaq__list { margin-top: 24px; display: grid; gap: 8px; max-width: 760px; }
.bfaq details { border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--deep) 55%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bfaq summary { list-style: none; cursor: pointer; padding: 16px 44px 16px 16px; font-weight: 600; position: relative; }
.bfaq summary::-webkit-details-marker { display: none; }
.bfaq summary::after { content: '+'; position: absolute; right: 16px; top: 50%; translate: 0 -50%; font-size: 22px; color: var(--muted); transition: rotate .25s; }
.bfaq details[open] summary::after { rotate: 45deg; }
.bfaq details p { padding: 0 16px 16px; color: var(--muted); font-size: 15px; }
.bfaq details a { text-decoration: underline; color: var(--bone); }

/* ---------- more binders ---------- */
.mini__cover { display: grid; place-items: center; aspect-ratio: 1223 / 1286; }
.mini--binder .mini__cover img { width: auto; height: 92%; aspect-ratio: auto; border-radius: 4px; box-shadow: 0 10px 20px rgba(0,0,0,.5); }
.mini--binder .mini__cover.is-fallback img { width: 100%; height: auto; border-radius: 0; box-shadow: none; }

/* ---------- make your own (app page /ws/binder/custom: the AI designer inside this frame) ---------- */
.bcp { min-height: 100dvh; background: radial-gradient(120% 60% at 50% 0%, #15151d, var(--ink) 70%); }
.bcp__crumbs { color: var(--muted); font-size: 11px; padding-top: 8px; }
.bcp__crumbs a:hover { color: var(--bone); }
.bcp__tool { min-height: 70vh; }