/* Shop columns: one column per design. Columns trade width through flex-grow; the image and
   the options panel inside are sized from the row width (container units), so widening only
   reveals more of content that never reflows. The row is layout-contained so the rest of the
   page isn't touched. */

/* Fill the screen under the sticky header and shop heading, leaving room for the View all row
   (and the scrub bar on phones). The wrapper reserves the space before JS draws the columns. */
.cols-wrap {
  --panel-h: max(460px, calc(100svh - var(--header-h) - 12px - var(--shop-head-h, 120px) - 12px - 52px - 12px));
  position: relative; min-height: var(--panel-h);
}
@media (max-width: 759px) {
  .cols-wrap { --panel-h: max(440px, calc(100svh - var(--header-h) - 12px - var(--shop-head-h, 96px) - 12px - 52px - 92px)); }
}
.cols { --ease: cubic-bezier(.16, 1, .3, 1); display: grid; gap: 6px; height: var(--panel-h); }
.cols[data-mode="desktop"] { --min-w: 64px; }
.cols[data-mode="mobile"] { --min-w: 3px; }

.cols__row { display: flex; gap: 4px; min-height: 0; contain: layout paint; container-type: inline-size; }
.cols[data-mode="mobile"] .cols__row { gap: 2px; }

.col {
  position: relative; overflow: clip; border-radius: 6px; background: #120d1a;
  flex: var(--grow, 1) 1 0; min-width: var(--min-w, 48px);
  transition: flex-grow .5s var(--ease);
}
.cols.is-scrubbing .col { transition: none; }
.col.is-pinned::after { content: ""; position: absolute; inset: 0; z-index: 3; box-shadow: inset 0 0 0 2px var(--accent); pointer-events: none; }

/* Face: the shirt image (and, on closed columns, a vertical name). */
.col__face {
  position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0;
  background: #120d1a; color: inherit; cursor: pointer; overflow: hidden; text-align: left;
}
.col.is-open .col__face { cursor: default; }
.col__face:focus-visible { outline: 3px solid var(--warn); outline-offset: -3px; }
.col__face picture, .col__face img {
  position: absolute; top: 0; left: 50%; height: 100%;
  width: calc(var(--share, .4) * 100cqw); max-width: none; transform: translateX(-50%);
  object-fit: cover; object-position: center 20%;
}
.col__face img { transition: filter .4s var(--ease); filter: brightness(.55) saturate(.7); }
.col.is-open .col__face img { filter: none; }

/* The closed-column name sits on the column itself (not the counter-skewed image), so in the
   diagonal style it follows the slant and stays inside even very narrow columns. */
.col__label {
  position: absolute; z-index: 1; inset: 0; padding: 14px 0; pointer-events: none;
  display: grid; place-content: end center; gap: 2px;
  background: linear-gradient(transparent 40%, rgba(8, 5, 12, .85));
}
.col__name { font-family: var(--display); font-size: clamp(18px, 1.6vw, 24px); letter-spacing: .04em; line-height: 1; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.col__price { display: none; }
.col.is-open .col__label { display: none; }
.cols[data-mode="mobile"] .col__name { font-size: 15px; }
.cols__row.is-dense .col:not(.is-open) .col__label { display: none; }

/* Panel: colour, size, quantity, Add to cart, built into the open column's slot. */
.col__panel {
  position: absolute; z-index: 2; left: 0; bottom: 0;
  width: calc(var(--share, .4) * 100cqw); max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(rgba(10, 7, 15, 0), rgba(10, 7, 15, .9) 36px, rgba(10, 7, 15, .98) 45%);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .2s, transform .3s var(--ease), visibility 0s .2s;
}
.col.is-open .col__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .25s .15s, transform .35s .15s var(--ease), visibility 0s; }
.cols.is-scrubbing .col__panel { opacity: 0; visibility: hidden; transition: none; }

.pp__info--compact { padding: 36px 16px 16px; gap: 10px; }
.pp__info--compact .pp__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pp__info--compact .pp__name { font-size: clamp(24px, 2.2vw, 32px); padding: 0; }
.pp__info--compact .pp__price { font-size: 15px; white-space: nowrap; color: var(--text-2); }
.pp__info--compact .pp__label { font-size: 11px; margin-bottom: 6px; }
.pp__info--compact .option-row { gap: 6px; }
.pp__info--compact .opt span { min-width: 42px; min-height: 36px; padding: 0 8px; font-size: 13px; }
.pp__info--compact .opt--color span { min-width: 36px; }
.pp__info--compact .opt--color span i { width: 24px; height: 24px; }
.pp__info--compact .pp__error { min-height: 0; font-size: 13px; }
.pp__info--compact .pp__error:empty { display: none; }
.pp__info--compact .pp__add-row { gap: 8px; }
.pp__info--compact .pp__add-row .btn { flex: 1; min-height: 42px; padding: 8px 10px; font-size: 18px; white-space: nowrap; }
.pp__info--compact .qty button { width: 36px; height: 40px; }
.pp__info--compact .qty output { min-width: 22px; }

/* "Keep looking" is a desktop thing: on phones the scrub bar does that job. */
.cols[data-mode="mobile"] .col__keep { display: none; }
@media (hover: none) { .col__keep { display: none; } }

/* Under the panel: play-again link left, small "View all" right. */
.cols-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding-top: 8px; }
.cols-all {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--text-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px;
}
.cols-all:hover { color: var(--text); border-color: var(--text-2); }

/* ── Phone scrub bar ────────────────────────────────────── */
.scrub {
  position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
  padding: 10px 48px calc(12px + env(safe-area-inset-bottom)); /* room for the handle at either end */
  background: linear-gradient(transparent, rgba(8, 5, 12, .92) 35%);
  transform: translateY(110%); transition: transform .3s var(--ease, ease-out);
}
.scrub.is-visible { transform: none; }
.scrub__inner { max-width: 520px; margin: 0 auto; }
.scrub__hint { display: block; text-align: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.scrub__track { position: relative; height: 44px; }
.scrub__track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: #2c2440; }
.scrub__ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.scrub__ticks i { width: 2px; height: 10px; background: #4a3f63; border-radius: 1px; }
.scrub__rail { position: absolute; inset: 0; pointer-events: none; transform: translateX(calc(var(--v, .5) * 100%)); }
.scrub__rail.is-snapping { transition: transform .25s var(--ease, ease-out); }
.scrub__handle {
  position: absolute; top: 50%; left: 0; width: 64px; height: 40px; margin: -20px 0 0 -32px; pointer-events: auto;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--accent); color: #000; font: 700 18px/1 var(--body); letter-spacing: .3em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5); cursor: grab; touch-action: none;
}
.scrub__handle.is-dragging { cursor: grabbing; box-shadow: 0 0 0 6px rgba(255, 122, 26, .25), 0 6px 18px rgba(0, 0, 0, .5); }
.scrub__handle:focus-visible { outline: 3px solid var(--warn); outline-offset: 3px; }
body.has-scrub .toast-region { bottom: calc(100px + env(safe-area-inset-bottom)); }

@media (prefers-reduced-motion: reduce) {
  .col, .col__face img, .col__panel, .col.is-open .col__panel, .scrub, .scrub__rail.is-snapping { transition: none; }
}

/* Phones: keep the options panel short so the shirt stays visible above it. */
.cols[data-mode="mobile"] .pp__info--compact { padding: 22px 12px 12px; gap: 8px; }
.cols[data-mode="mobile"] .pp__info--compact .pp__head { display: grid; gap: 2px; }
.cols[data-mode="mobile"] .pp__info--compact .pp__name { font-size: 24px; }
.cols[data-mode="mobile"] .pp__info--compact .pp__price { font-size: 13px; }
.cols[data-mode="mobile"] .pp__info--compact .pp__label { margin-bottom: 4px; }
.cols[data-mode="mobile"] .pp__info--compact .option-row { gap: 4px; }
.cols[data-mode="mobile"] .pp__info--compact .opt span { min-width: 32px; min-height: 34px; padding: 0 4px; font-size: 12px; }
.cols[data-mode="mobile"] .pp__info--compact .opt--color span { min-width: 32px; }
.cols[data-mode="mobile"] .pp__info--compact .opt--color span i { width: 22px; height: 22px; }
.cols[data-mode="mobile"] .pp__info--compact .pp__add-row .btn { font-size: 17px; }

/* ── Edge to edge ───────────────────────────────────────── */
/* The panel breaks out of the page container to span the full screen width. */
.cols-wrap { width: 100vw; margin-inline: calc(50% - 50vw); overflow: clip; }
.cols .col { border-radius: 0; }

/* ── Diagonal style (data-style="diagonal" on .cols-wrap) ── */
/* Columns are skewed parallelograms: top and bottom edges stay horizontal, the sides slant.
   Content inside is counter-skewed so it stays upright, and widened so the slanted corners
   are filled. The row overhangs both screen edges so the outer slants are cropped there. */
.cols-wrap[data-style="diagonal"] { --skew: -11deg; --tan: .1944; --lean: calc(var(--panel-h) * var(--tan) / 2); --box-lean: 36px; }
@media (max-width: 759px) {
  .cols-wrap[data-style="diagonal"] { --skew: -4deg; --tan: .07; --box-lean: 10px; }
}
[data-style="diagonal"] .cols__row { margin-inline: calc(-1 * var(--lean) - 2px); gap: 6px; }
[data-style="diagonal"] .cols[data-mode="mobile"] .cols__row { gap: 3px; }
[data-style="diagonal"] .col { transform: skewX(var(--skew)); overflow: visible; }
[data-style="diagonal"] .col.is-open { z-index: 2; } /* its info box may overlap the neighbours' slanted edges */
[data-style="diagonal"] .col__face { inset: 0 calc(-1 * var(--lean)); width: auto; transform: skewX(calc(-1 * var(--skew)));
  clip-path: polygon(calc(2 * var(--lean)) 0, 100% 0, calc(100% - 2 * var(--lean)) 100%, 0 100%); }
[data-style="diagonal"] .col__face picture,
[data-style="diagonal"] .col__face img { width: calc(var(--share, .4) * 100cqw + 2 * var(--lean)); }
/* The options box: content stays upright, while its background (and fade) is re-skewed so it
   lines up exactly with the column's slanted edges. --box-lean (≈ box height × tan / 2) keeps
   the upright content inside the slant. */
[data-style="diagonal"] .col__panel {
  left: 0; width: calc(var(--share, .4) * 100cqw); padding-inline: var(--box-lean);
  background: none; overflow: visible;
  transform: translateY(12px) skewX(calc(-1 * var(--skew)));
}
[data-style="diagonal"] .col__panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  transform: skewX(var(--skew));
  background: linear-gradient(rgba(10, 7, 15, 0), rgba(10, 7, 15, .9) 36px, rgba(10, 7, 15, .98) 45%);
}
[data-style="diagonal"] .col.is-open .col__panel { transform: skewX(calc(-1 * var(--skew))); }

/* ── Photo dots and flip edges ──────────────────────────── */
.col__dots { position: absolute; z-index: 2; top: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; pointer-events: none; }
.col__dots i { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: .4; box-shadow: 0 0 4px rgba(0, 0, 0, .6); transition: opacity .2s; }
.col__dots i.is-on { opacity: 1; }
.col:not(.is-open) .col__dots { display: none; }

/* Left/right edges of a pinned (desktop) or open (phone) column flip through its photos.
   They sit above the image and under the options panel. */
.col__side {
  position: absolute; z-index: 1; top: 0; bottom: 0; width: 18%;
  display: none; padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.col.sides-on .col__side { display: block; }
.col__side--prev { left: 0; }
.col__side--next { right: 0; }
.col__side:focus-visible { outline: 3px solid var(--warn); outline-offset: -3px; }
.col__arrow {
  position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%);
  font: 400 56px/1 var(--body); color: rgba(255, 255, 255, .5); text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
  transition: color .15s;
}
[data-style="diagonal"] .col__arrow { transform: translate(-50%, -50%) skewX(calc(-1 * var(--skew))); }
@media (hover: hover) and (pointer: fine) {
  .col__side { transition: background .2s; }
  .col__side--prev:hover { background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22)); }
  .col__side--next:hover { background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22)); }
  .col__side:hover .col__arrow { color: rgba(255, 255, 255, .85); }
}
/* Phones: tap zones only, no gradient or arrows. */
.cols[data-mode="mobile"] .col__arrow { display: none; }
@media (hover: none) { .col__arrow { display: none; } }
.cols.is-scrubbing .col__side { display: none; }
/* The row hangs past both screen edges (to crop the outer slants), so the end columns'
   info boxes pad their outer side to keep the options on screen. */
[data-style="diagonal"] .col:first-child .col__panel { padding-left: calc(var(--lean) * 2 + var(--box-lean)); }
[data-style="diagonal"] .col:last-child .col__panel { padding-right: calc(var(--lean) * 2 + var(--box-lean)); }
/* The phone product popup gives its button row a sticky grey bar; inside a column the
   whole options box is already pinned in place, so drop it (it would poke past the slant). */
.pp__info--compact .pp__add-row { position: static; background: none; border-top: 0; margin: 0; padding: 0; }

/* Corner shading: the slant exposes the top-right and bottom-left corners of each image
   (outside whatever framing the art has), so darken them from the corner toward the middle.
   Sits above the image, below the labels, dots and options. */
[data-style="diagonal"] .col__face::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to bottom left, rgba(8, 5, 12, .95), rgba(8, 5, 12, .6) 10%, rgba(8, 5, 12, 0) 26%),
    linear-gradient(to top right, rgba(8, 5, 12, .95), rgba(8, 5, 12, .6) 10%, rgba(8, 5, 12, 0) 26%);
}

/* Tighter vertical rhythm in the options box: sizes sit close to the buttons. */
.pp__info--compact { gap: 8px; }
.pp__info--compact [data-added]:empty { display: none; }
.pp__info--compact .pp__label { margin-bottom: 4px; }
.pp__info--compact .pp__add-row { margin-top: -2px; }
.cols[data-mode="mobile"] .pp__info--compact { gap: 6px; }