/* WearSlabs preview: product page. Colors come from each hoodie (set by product.js). */
.pdp { --accent: #8fb4ff; --deep: #0b0b12; --dark: #1a1a24; background: var(--deep); }

/* ---------- backdrop: this hoodie's world ---------- */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--deep); }
.backdrop__plate img { filter: brightness(.62) saturate(1.08); position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1.02); transition: opacity 1.2s; }
.backdrop__ambient { position: absolute; inset: -20%; width: 140%; height: 140%; object-fit: cover; filter: blur(60px) saturate(1.4); opacity: 0; }
.pdp.no-plate .backdrop__ambient { opacity: .85; }
.backdrop__fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.backdrop__shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, color-mix(in srgb, var(--deep) 55%, transparent) 0%, transparent 22%, transparent 45%, color-mix(in srgb, var(--deep) 85%, transparent) 78%, var(--deep) 100%); }
@media (min-width: 900px) {
  .backdrop__shade { background: linear-gradient(90deg, transparent 0%, transparent 40%, color-mix(in srgb, var(--deep) 70%, transparent) 70%, color-mix(in srgb, var(--deep) 85%, transparent) 100%), linear-gradient(180deg, color-mix(in srgb, var(--deep) 45%, transparent), transparent 20%); }
}

/* ---------- layout ---------- */
.pdp__grid { display: grid; gap: 8px; padding-top: 8px; padding-bottom: 40px; }
.pdp__visual { position: relative; }
@media (min-width: 900px) { .pdp__grid { grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: start; padding-top: 24px; } .pdp__visual { position: sticky; top: 76px; } }

.pdp__crumbs { color: var(--muted); font-size: 11px; }
.pdp__crumbs a:hover { color: var(--bone); }
.pdp__visual::before { content: ''; position: absolute; left: 0; right: 0; top: 4%; height: 82%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--deep) 85%, transparent), color-mix(in srgb, var(--deep) 50%, transparent) 60%, transparent); }
.pdp__stage { container-type: inline-size; position: relative; aspect-ratio: 1223 / 1286; margin: 6px auto 0; width: min(100%, 62svh); perspective: 1200px; }
.pdp__float { position: absolute; inset: 0; z-index: 1; transform-style: preserve-3d; animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 50% { translate: 0 -10px; } }
.pdp__hoodie { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 30px 40px rgba(0,0,0,.75)); transition: opacity .3s; }
.pdp__slot { position: absolute; left: 43.1%; top: 29.9%; width: 11.9%; height: 20%; border-radius: 4px; --o: .35; }
.pdp__slot .holo__shine { opacity: calc(var(--o) * .4); }
.pdp__drop { position: absolute; right: 0; top: 4%; writing-mode: vertical-rl; color: var(--muted); letter-spacing: .3em; font-size: 11px; }
.pdp__hint { text-align: center; color: var(--faint); font-size: 11px; margin-top: 4px; }
@media (pointer: coarse) { .pdp__hint { display: none; } }
.pdp__shown { text-align: center; color: var(--muted); font-size: 11px; margin-top: 4px; }
.pdp__title small { display: block; font-size: .36em; letter-spacing: .02em; color: var(--muted); margin-top: 6px; }
.pdp__incl { color: var(--bone); font-size: 14px; margin-top: 8px; opacity: .85; }
.opt input:focus-visible + span { outline: 2px solid var(--bone); outline-offset: 3px; }
.is-soon span { opacity: .5; cursor: not-allowed; }
.tiers-pick u.soon { background: rgba(255,255,255,.18); color: var(--bone); }

/* ---------- panel ---------- */
.pdp__panel { background: color-mix(in srgb, var(--deep) 62%, transparent); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2); border: 1px solid var(--line); border-radius: 24px; padding: 22px 18px 24px; position: relative; overflow: hidden; }
.pdp__panel::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: var(--holo); opacity: .6; }
.panel__label { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.panel__label::before { content: ''; width: 22px; height: 7px; border-radius: 1px; background: var(--label-red); flex: none; }
.pdp__title { font-size: clamp(32px, 9.6vw, 68px); margin-top: 12px; overflow-wrap: break-word; }
@media (min-width: 900px) { .pdp__title { font-size: clamp(36px, 3.7vw, 60px); } }
.pdp__tagline { color: var(--muted); margin-top: 10px; }
.pdp__price { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; }
.pdp__price b { font: 800 34px/1 var(--body); }
.pdp__price span { color: var(--muted); }

/* pop report: a nod to a grading label */
.pop { margin-top: 18px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.pop__head { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--label-red); color: #fff; font-size: 10px; }
.pop__badge { padding: 12px 12px 0; font: 700 16px/1.3 var(--body); }
.pop__badge b { color: var(--accent); filter: brightness(1.5); }
.pop__grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px 12px 12px; }
.pop__grid dt { color: var(--muted); font-size: 10px; }
.pop__grid dd { font: 700 20px/1.2 var(--body); font-variant-numeric: tabular-nums; }

/* options */
.opt { border: 0; margin-top: 22px; }
.opt legend { color: var(--muted); margin-bottom: 10px; display: flex; gap: 10px; align-items: baseline; width: 100%; }
.opt legend small { text-transform: none; letter-spacing: 0; font: 400 12px var(--body); color: var(--faint); }
.size-guide { margin-left: auto; text-transform: none; letter-spacing: 0; font: 500 12px var(--body); text-decoration: underline; color: var(--muted); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }

.tiers-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tiers-pick label span { position: relative; display: grid; gap: 2px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; min-height: 92px; }
.tiers-pick b { font: 700 14px/1.2 var(--body); }
.tiers-pick i { font-style: normal; font-size: 12px; color: var(--muted); line-height: 1.3; }
.tiers-pick em { font-style: normal; font-weight: 700; margin-top: auto; padding-top: 6px; }
.tiers-pick u { position: absolute; top: -8px; right: 8px; text-decoration: none; background: var(--bone); color: var(--ink); font-size: 10px; padding: 3px 6px; border-radius: 999px; }
.tiers-pick input:checked + span { border-color: var(--bone); background: rgba(255,255,255,.09); box-shadow: 0 0 0 1px var(--bone) inset, 0 10px 30px -10px color-mix(in srgb, var(--accent) 60%, transparent); }
.tiers-pick label:active span { transform: scale(.98); }

.swatches { display: flex; gap: 10px; }
.swatches span { display: block; width: 38px; height: 38px; border-radius: 50%; background: var(--c); border: 2px solid rgba(255,255,255,.18); cursor: pointer; transition: transform .2s; }
.sw-matched { background: conic-gradient(var(--accent), var(--dark), var(--accent)) !important; position: relative; }
.sw-matched::after { content: 'Art'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 9px var(--body); color: #fff; text-shadow: 0 1px 2px #000; }
.swatches input:checked + span { outline: 2px solid var(--bone); outline-offset: 3px; transform: scale(1.06); }

.sizes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.sizes span { display: grid; place-items: center; height: 44px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; font-weight: 600; font-size: 14px; transition: all .2s; }
.sizes input:checked + span { background: var(--bone); color: var(--ink); border-color: var(--bone); }

.marks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.marks span { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--line); font-size: 11px; font-weight: 600; text-align: center; cursor: pointer; transition: all .2s; }
.marks img { width: 30px; height: 30px; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.marks input:checked + span { border-color: var(--bone); background: rgba(255,255,255,.09); }
.marks input:checked + span img { transform: scale(1.18) rotate(-8deg); }

.name-toggle span { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.name-toggle span::before { content: ''; width: 40px; height: 24px; border-radius: 12px; background: rgba(255,255,255,.14); transition: background .2s; box-shadow: inset 0 0 0 1px var(--line); }
.name-toggle span::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--bone); margin-left: 3px; transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.name-toggle { position: relative; display: inline-block; }
.name-toggle input:checked + span::before { background: var(--accent); }
.name-toggle input:checked + span::after { transform: translateX(16px); }
.name-box { margin-top: 12px; display: grid; gap: 10px; }
.name-box input[type=text] { position: static; opacity: 1; pointer-events: auto; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.35); color: var(--bone); padding: 0 14px; font: 500 16px var(--body); outline: none; }
.name-box input[type=text]:focus { border-color: var(--bone); }
.name-box.need input[type=text] { border-color: #ff6b6b; }
.name-preview { font-family: 'PokeSolid', var(--display); font-size: clamp(40px, 13vw, 64px); line-height: 1.1; text-align: center; color: #ffcb05; -webkit-text-stroke: 3px #2a75bb; paint-order: stroke fill; letter-spacing: .02em; padding: 14px 8px 8px; border-radius: 12px; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.08), transparent 70%); white-space: nowrap; overflow: hidden; }

.add { margin-top: 24px; height: 58px; font-size: 16px; }
.custom-cta { margin-top: 10px; }
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; color: var(--muted); font-size: 10px; }
.trust li::before { content: '✦ '; color: var(--accent); filter: brightness(1.4); }
.note { color: var(--faint); font-size: 13px; margin-top: 10px; }

/* ---------- the art continues ---------- */
.continue { padding: 80px 0 40px; }
.continue__row { display: grid; grid-template-columns: .55fr auto 1fr; align-items: center; gap: 12px; margin-top: 32px; }
.continue__slab { aspect-ratio: 520 / 880; filter: drop-shadow(0 20px 30px rgba(0,0,0,.6)); }
.continue__arrow { width: 44px; color: var(--muted); }
.continue__hoodie { width: 100%; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
@media (min-width: 900px) { .continue__row { grid-template-columns: 260px 90px 460px; justify-content: center; gap: 32px; } .continue__arrow { width: 80px; } }

/* ---------- binder ---------- */
.binder { padding: 40px 0; }
.binder__card { position: relative; display: block; padding: 28px 84px 28px 22px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); backdrop-filter: blur(16px); overflow: hidden; }
.binder__card h3 { font-size: clamp(34px, 9vw, 64px); margin-top: 10px; }
.binder__card p { color: var(--muted); margin-top: 8px; }
.binder__go { position: absolute; right: 22px; bottom: 22px; width: 48px; height: 48px; border-radius: 50%; background: var(--bone); color: var(--ink); display: grid; place-items: center; font-size: 22px; transition: transform .3s; }
.binder__card:hover .binder__go { transform: translateX(6px) rotate(-12deg); }

/* ---------- more ---------- */
.more { padding: 60px 0 80px; }
.more__rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 26px var(--gutter) 10px; scrollbar-width: none; }
.more__rail::-webkit-scrollbar { display: none; }
.mini { flex: 0 0 46%; max-width: 240px; scroll-snap-align: start; border-radius: 16px; border: 1px solid var(--line); background: rgba(10,10,14,.6); padding: 10px 10px 14px; transition: transform .3s, border-color .3s; }
.mini:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.3); }
.mini img { width: 100%; aspect-ratio: 1223 / 1286; object-fit: contain; }
.mini b { display: block; font-size: 14px; margin-top: 6px; }
.mini span { color: var(--muted); font-size: 13px; }

/* sticky */
.pdp-sticky__row { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.pdp-sticky__name { color: var(--muted); font-size: 10px; max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-sticky b { font: 800 22px/1.1 var(--body); }
.pdp-sticky .btn { flex: none; padding: 0 28px; }

/* pulse when added */
@keyframes added { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); } 100% { box-shadow: 0 0 0 22px transparent; } }
.btn.pulse { animation: added .7s ease-out; }

/* rarity badges printed beside the pocket (hoodie coordinates; pocket window starts at 42.6%) */
.pdp__badges { position: absolute; left: 34.4%; top: 30%; width: 7%; display: flex; flex-direction: column; gap: 6%; pointer-events: none; }
.pdp__badges img { width: 100%; height: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); animation: badgeIn .45s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes badgeIn { from { transform: scale(0) rotate(-25deg); opacity: 0; } }

/* ---------- front / back switch ---------- */
.views { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.views button { height: 34px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font: 600 13px var(--body); background: rgba(7,7,10,.35); backdrop-filter: blur(8px); }
.views button.on { background: var(--bone); color: var(--ink); border-color: var(--bone); }

/* ---------- stamps printed on the hoodie ---------- */
.pdp__badges { position: absolute; right: 58.4%; left: auto; top: 30.2%; width: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1.1cqw; pointer-events: none; }
.pdp__badges .stamp { width: calc(var(--w) * 1.3cqw); height: auto; animation: badgeIn .35s cubic-bezier(.3,1.5,.5,1) both; filter: url(#ink); opacity: .93; }
.pdp__badges .stamp.ink-black { mix-blend-mode: multiply; }
.pdp__badges.on-dark .stamp.ink-black { filter: url(#ink) invert(1); mix-blend-mode: screen; opacity: .9; }
.pdp__badges .stamp.ink-color { mix-blend-mode: normal; }
.pdp__badges .stamp.ghost { opacity: .55; animation: ghost 1.2s ease-in-out infinite alternate; }
@keyframes ghost { to { opacity: .85; } }

/* ---------- stamps dropdown ---------- */
.opt__label { color: var(--muted); margin-bottom: 10px; }
.opt__label small { text-transform: none; letter-spacing: 0; font: 400 12px var(--body); color: var(--faint); }
.stamps { position: relative; }
.stamps__btn { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-weight: 600; text-align: left; }
.stamps__btn svg { width: 18px; height: 18px; flex: none; transition: rotate .25s; }
.stamps__btn[aria-expanded="true"] svg { rotate: 180deg; }
.stamps__chosen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.stamps__chosen img { height: 26px; width: auto; background: #f3f1ea; border-radius: 6px; padding: 3px; }
.stamps__chosen span { color: var(--muted); font-weight: 500; font-size: 14px; margin-left: 4px; }
.stamps__menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: 420px; overflow-y: auto; background: color-mix(in srgb, var(--deep) 88%, #000); border: 1px solid var(--line); border-radius: 16px; padding: 6px; box-shadow: 0 30px 60px rgba(0,0,0,.6); backdrop-filter: blur(20px); }
.stamps__head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 8px; color: var(--faint); font-size: 10px; }
.stamps__done { font: 700 13px var(--body); color: var(--bone); padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.1); text-transform: none; letter-spacing: 0; }
.stamps__group { color: var(--muted); font-size: 10px; padding: 10px 8px 6px; }
.stamps__group small { text-transform: none; letter-spacing: 0; color: var(--faint); font: 400 11px var(--body); }
.stamps__list { display: grid; gap: 2px; }
.st { display: grid; grid-template-columns: 56px 1fr auto 22px; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 10px; text-align: left; }
.st:hover, .st:focus-visible { background: rgba(255,255,255,.07); }
.st__img { width: 56px; height: 42px; border-radius: 8px; background: #f3f1ea; display: grid; place-items: center; }
.st__img img { max-width: 46px; max-height: 32px; }
.st__name { font-weight: 600; font-size: 14px; }
.st em { font-style: normal; color: var(--muted); font-size: 13px; }
.st__check { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line); display: grid; place-items: center; }
.st[aria-selected="true"] .st__check { background: var(--bone); border-color: var(--bone); }
.st[aria-selected="true"] .st__check::after { content: ''; width: 10px; height: 6px; border: 2px solid var(--ink); border-top: 0; border-right: 0; rotate: -45deg; translate: 0 -1px; }
@media (max-width: 899px) {
  .stamps__menu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 52vh; border-radius: 20px 20px 0 0; padding: 6px max(10px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); z-index: 70; }
  .sheet-open .sticky { transform: translateY(110%); }
}

/* ---------- text print on the shirt ---------- */
.pdp__text { position: absolute; left: 50%; translate: -50% -50%; white-space: nowrap; pointer-events: none; font-family: 'PokeSolid', var(--display); color: #ffcb05; -webkit-text-stroke: .5cqw #2a75bb; paint-order: stroke fill; letter-spacing: .02em; line-height: 1; font-size: min(8.5cqw, calc(52cqw / var(--len) * 1.6)); filter: drop-shadow(0 .3cqw .2cqw rgba(0,0,0,.25)); opacity: .96; }
.pdp__text.at-front { top: 57%; font-size: min(6cqw, calc(40cqw / var(--len) * 1.6)); }
.pdp__text.at-back { top: 40%; }
.place { display: flex; gap: 8px; }
.place span { display: grid; place-items: center; height: 40px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; font-weight: 600; font-size: 14px; }
.place input:checked + span { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.place input:focus-visible + span { outline: 2px solid var(--bone); outline-offset: 3px; }

/* desktop: the list opens in place and pushes the page down, so the panel never clips it */
@media (min-width: 900px) {
  .stamps__menu { position: relative; top: auto; margin-top: 6px; max-height: none; overflow: visible; box-shadow: none; }
}

/* squad deal box */
.deal { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: rgba(255,255,255,.03); }
.deal__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); }
.deal__ship { font-size: 12px; color: #7dffb3; }
.deal__tiers { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.deal__tiers li { display: grid; gap: 2px; padding: 8px; border-radius: 10px; border: 1px solid var(--line); font-size: 11px; line-height: 1.3; }
.deal__tiers b { font-size: 13px; }
.deal__tiers span { color: var(--muted); }
.deal__tiers .hot { border-color: transparent; background: linear-gradient(#111118, #111118) padding-box, var(--holo) border-box; border: 1px solid transparent; }
.deal__tiers .hot span { color: #7dffb3; }
.deal__note { color: var(--faint); font-size: 12px; margin-top: 8px; }

/* complete the set: the twin binder under the add button, small and tappable */
.twinb { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; margin-top: 14px; padding: 8px 10px 8px 8px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04); }
.twinb__img { width: 52px; height: 64px; display: grid; place-items: center; border-radius: 8px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--dark) 70%, #fff 8%), #0b0b10); overflow: hidden; }
.twinb__img img { height: 92%; width: auto; border-radius: 3px; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.twinb__img.is-fallback img { width: 100%; height: auto; border-radius: 0; box-shadow: none; }
.twinb__body { display: grid; gap: 1px; min-width: 0; }
.twinb__eyebrow { color: var(--muted); font-size: 10px; }
.twinb__name { font-weight: 700; font-size: 14px; line-height: 1.25; }
.twinb__name:hover { text-decoration: underline; }
.twinb__note { font-size: 12px; color: var(--muted); }
.twinb__note em { font-style: normal; color: #7dffb3; }
.twinb__add { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(243,241,234,.3); font: 700 13px var(--body); white-space: nowrap; transition: background .2s, color .2s; }
.twinb__add:hover { background: var(--bone); color: var(--ink); }

.ws-root.pdp { background: none; }