/* ==========================================================================
   SHOP
   Catalog and product pages follow the Fourthwall shop layout (Mike, 30-sep-2026):
   dark background, big photos, light sentence-case product titles.
   1. Heroes (catalog split hero; centered hero for cart / thank-you) + shop bar
   2. Product grid and cards
   3. "How the shop works" band
   4. Product page (gallery, options, quantity, accordions)
   5. Cart, checkout form and order summary
   6. Thank-you page
   Content: generated by _source/build/shop_page.py from shop.json
   ========================================================================== */

.shop {
  --shop-bg: var(--ink);
  --shop-line: var(--on-dark-line);
  --shop-muted: var(--gray-300);
}

/* --------------------------------------------------------------------------
   1. HEROES + SHOP BAR
   -------------------------------------------------------------------------- */

/* Catalog hero: half black with the headline, half photo to the right edge */
.shop-split {
  display: grid;
  background: var(--shop-bg);
  color: var(--white);
}

.shop-split__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--header-offset) var(--grid-margin) var(--space-xl);
  text-align: center;
}

.shop-split__title {
  font-size: var(--text-6xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
}

.shop-split__lead {
  max-width: 560px;
  margin-top: 24px;
  font-size: var(--text-20);
  line-height: var(--leading-relaxed);
}

/* The frame clips the photo, so its entrance never spills over the text */
.shop-split__media {
  overflow: hidden;
}

.shop-split__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 62% 40%;
}

/* Entrance (Mike, 7-oct-2026): same as the photo heroes of About, Who We Help
   and the industries (components.css › PHOTO HERO): the photo starts enlarged
   and out of focus, sharpens in 0.7 s and settles to its size in 1.5 s. Here
   it happens inside its half of the screen; the text does not move. */
@media (prefers-reduced-motion: no-preference) {
  .shop-split__media img {
    animation:
      photo-hero-zoom 1500ms cubic-bezier(0.5, 1, 0.89, 1),
      photo-hero-focus 700ms cubic-bezier(0.5, 1, 0.89, 1);
  }
}

@media (min-width: 992px) {
  .shop-split {
    grid-template-columns: 1fr 1fr;
    min-height: min(100vh, 52vw);
  }

  .shop-split__text {
    padding-bottom: var(--header-offset);
  }

  .shop-split__media img {
    aspect-ratio: auto;
  }
}

/* Cart / thank-you hero: centered, navy with purple wash */
.shop-hero {
  position: relative;
  padding: var(--header-offset) 0 var(--space-xl);
  background: var(--blue-900);
  color: var(--white);
  text-align: center;
  isolation: isolate;
}

.shop-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--purple-900);
  opacity: 0.7;
}

.shop-hero--short { padding-bottom: var(--space-l); }

.shop-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shop-hero__title {
  font-size: var(--text-5xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
}

.shop-hero__text {
  max-width: 610px;
  margin-top: 20px;
  font-size: var(--text-20);
  line-height: var(--leading-relaxed);
}

/* Shop bar: All Tees · Shipping & Returns · Cart */
.shop-bar {
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--shop-line);
  background: var(--shop-bg);
  color: var(--white);
}

.shop-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}

.shop-bar__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-bar__link,
.shop-bar__cart {
  font-size: var(--text-14);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
}

.shop-bar__link[aria-current="page"],
.shop-bar__cart[aria-current="page"] {
  color: var(--gold-500);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.shop-bar__link:hover,
.shop-bar__cart:hover { color: var(--gold-500); }

.shop-bar__cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.shop-bar__count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-size: var(--text-12);
  letter-spacing: 0;
}

.shop-bar__count.has-items {
  background: var(--gold-500);
  color: var(--black);
}

/* --------------------------------------------------------------------------
   2. PRODUCT GRID AND CARDS (dark, 3 columns, centered name + price)
   Phones: 1 column (Mike, 7-oct-2026). Tablets: 2. From 900 px: 3.
   -------------------------------------------------------------------------- */
.shop-grid {
  padding: 0 0 var(--space-section);
  background: var(--shop-bg);
  color: var(--white);
}

.shop-grid > .container { padding-top: var(--space-l); }

.shop-grid--more { padding: var(--space-xl) 0 var(--space-section); }
.shop-grid--more > .container { padding-top: 0; }

.shop-section-title {
  margin-bottom: var(--space-m);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-compact);
}

.product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l) var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-m);
  }
}

/* Staggered columns, like Fourthwall: each column sits a little lower than
   the one on its left. Fixed offset, no movement. */
.product-grid--stagger {
  --stagger: 32px;
}

@media (min-width: 600px) {
  .product-grid--stagger { padding-bottom: var(--stagger); }
  .product-grid--stagger > :nth-child(even) { transform: translateY(var(--stagger)); }
}

@media (min-width: 992px) {
  .product-grid--stagger { padding-bottom: calc(var(--stagger) * 2); }
  .product-grid--stagger > :nth-child(even) { transform: none; }
  .product-grid--stagger > :nth-child(3n + 2) { transform: translateY(var(--stagger)); }
  .product-grid--stagger > :nth-child(3n) { transform: translateY(calc(var(--stagger) * 2)); }
}

.product-card__link {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--white);
  text-align: center;
  text-decoration: none;
}

.product-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 4;
  margin-bottom: var(--space-2xs);
  border-radius: var(--radius-media);
  background: var(--ink);
}

.product-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Back photo: fades in over the front one on hover, 0.4 s (Mike, 7-oct-2026;
   devices with a mouse only; instant with "reduce motion") */
.product-card__alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

@media (hover: hover) {
  .product-card__link:hover .product-card__alt { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .product-card__alt { transition: none; }
}

/* Title: Clash Grotesk, caps, semibold. Turns green on hover (Mike, 6-oct-2026). */
.product-card__name {
  font-family: var(--font-display);
  font-size: var(--text-l);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-transform: uppercase;
}

.product-card__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
}

/* Price: Inter Display, caps */
.product-card__price {
  font-family: var(--font-body);
  font-size: var(--text-14);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.product-card__link:hover .product-card__name,
.product-card__link:focus-visible .product-card__name {
  color: var(--green-500);
}

.product-card__link:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   3. "HOW THE SHOP WORKS" BAND
   -------------------------------------------------------------------------- */
.shop-promise {
  padding: var(--space-xl) 0;
  background: var(--gray-100);
}

.shop-promise__grid {
  display: grid;
  gap: var(--space-m) var(--grid-gap);
}

@media (min-width: 820px) {
  .shop-promise__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.shop-promise__title {
  margin-bottom: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-compact);
}

.shop-promise__text {
  max-width: 34ch;
  font-size: var(--text-16);
  line-height: var(--leading-normal);
}

.shop-promise__text a { color: var(--color-primary); }

/* --------------------------------------------------------------------------
   4. PRODUCT PAGE (Fourthwall layout)
   Gallery: thumbnails in a column on the left, big photo next to it.
   Info: light title, price, description, size chips, quantity + Add to Cart,
   accordions with a "+".
   -------------------------------------------------------------------------- */
.product {
  padding: var(--header-offset) 0 var(--space-xl);
  background: var(--shop-bg);
  color: var(--white);
}

.crumbs {
  padding: var(--space-s) 0 var(--space-m);
  font-size: var(--text-14);
  color: var(--shop-muted);
}

.crumbs a { color: var(--white); }

.product__grid {
  display: grid;
  gap: var(--space-l) var(--grid-gap);
  align-items: start;
}

@media (min-width: 992px) {
  .product__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .gallery { grid-column: 1 / 8; }
  .product__info { grid-column: 8 / -1; padding-left: var(--space-s); }
}

.gallery {
  display: grid;
  gap: var(--space-xs);
}

.gallery__stage {
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--ink);
}

.gallery__main {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* Zoom on hover (approved by Mike, 30-sep-2026): the photo doubles in size and
   follows the cursor. Set by shop.js; never on touch or with "reduce motion". */
.gallery__stage.is-zoomable { cursor: zoom-in; }
.gallery__stage.is-zooming .gallery__main { transform: scale(2); }

.gallery__thumbs {
  display: flex;
  gap: var(--space-2xs);
  overflow-x: auto;
  margin: 0;
  padding: 2px;
  list-style: none;
  scrollbar-width: thin;
}

.gallery__thumbs li { flex: 0 0 76px; }

.gallery__thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 2px solid transparent;
  border-radius: var(--radius-media);
  background: var(--ink);
  opacity: 0.7;
}

.gallery__thumb:hover { opacity: 1; }

.gallery__thumb[aria-current="true"] {
  border-color: var(--white);
  opacity: 1;
}

.gallery__thumb:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

.gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Desktop: thumbnails become a column to the left of the big photo */
@media (min-width: 720px) {
  .gallery {
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: start;
  }

  .gallery__thumbs {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    /* Same height as the big photo: the row is sized by the photo, the list fills it */
    height: 0;
    min-height: 100%;
  }

  .gallery__thumbs li { flex: 0 0 auto; }

  .gallery__stage {
    grid-column: 2;
    grid-row: 1;
  }
}

.product__info {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
}

@media (min-width: 992px) {
  .product__info {
    position: sticky;
    top: calc(var(--header-offset) - 40px);
  }
}

.product__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-compact);
}

.product__price {
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
}

.product__desc {
  max-width: 52ch;
  font-size: var(--text-16);
  line-height: var(--leading-relaxed);
}

.product-form {
  display: grid;
  gap: var(--space-s);
  margin-top: var(--space-xs);
}

.opt {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.opt__legend {
  margin-bottom: var(--space-2xs);
  padding: 0;
  font-size: var(--text-14);
  font-weight: var(--weight-medium);
}

.opt__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.opt__note {
  margin-top: var(--space-2xs);
  font-size: var(--text-14);
  color: var(--shop-muted);
}

/* Size / color chips: a real radio input under a styled label */
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 40px;
  padding: 6px 16px;
  border: 1px solid var(--shop-line);
  border-radius: var(--radius-s);
  font-size: var(--text-14);
  font-weight: var(--weight-medium);
  line-height: var(--leading-compact);
  cursor: pointer;
}

.chip input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip:hover { border-color: var(--gray-500); }

.chip:has(input:checked) {
  border: 2px solid var(--white);
  padding: 5px 15px;
}

.chip:has(input:focus-visible) {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

.product-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-xs);
}

/* Quantity: native dropdown with our chevron */
.qty-select {
  position: relative;
  flex: 0 0 120px;
}

.qty-select__control {
  width: 100%;
  height: 100%;
  min-height: 56px;
  padding: 0 40px 0 18px;
  border: 1px solid var(--shop-line);
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--white);
  font-size: var(--text-16);
  appearance: none;
  cursor: pointer;
}

.qty-select__control option { color: var(--ink); }

.qty-select__chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  pointer-events: none;
}

.product-form__add {
  flex: 1 1 200px;
  min-height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--gray-300);
  color: var(--ink);
  font-size: var(--text-16);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.product-form__add:hover { background: var(--white); }

.product-form__status {
  min-height: 1.4em;
  font-size: var(--text-14);
  font-weight: var(--weight-medium);
}

.product-form__status[data-state="error"] { color: var(--gold-300); }
.product-form__status a { color: var(--gold-500); font-weight: var(--weight-bold); }

/* Quantity stepper (cart) */
.qty {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--white);
}

.qty__btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: var(--text-20);
  line-height: var(--leading-none);
  cursor: pointer;
}

.qty__btn:hover { color: var(--color-primary); }
.qty__btn:disabled { color: var(--gray-500); cursor: not-allowed; }

.qty__value {
  min-width: 32px;
  text-align: center;
  font-weight: var(--weight-bold);
}

/* Accordions: "More details", "Quality Guarantee & Returns" */
.accordion {
  border-top: 1px solid var(--shop-line);
}

.accordion:last-child { border-bottom: 1px solid var(--shop-line); }

.accordion__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: 18px 0;
  font-size: var(--text-16);
  font-weight: var(--weight-medium);
  list-style: none;
  cursor: pointer;
}

.accordion__title::-webkit-details-marker { display: none; }

.accordion__title::after {
  content: "+";
  font-size: var(--text-18);
  line-height: var(--leading-none);
}

.accordion[open] .accordion__title::after { content: "\2212"; }

.accordion__list,
.accordion__text {
  padding-bottom: 18px;
  font-size: var(--text-16);
  line-height: var(--leading-relaxed);
  color: var(--shop-muted);
}

.accordion__list { margin: 0; padding-left: 1.2em; }
.accordion__text a { color: var(--white); }

/* --------------------------------------------------------------------------
   5. CART, CHECKOUT AND ORDER SUMMARY
   -------------------------------------------------------------------------- */
.cart {
  padding: 0 0 var(--space-section);
  background: var(--gray-100);
}

.cart .shop-bar { margin-bottom: var(--space-l); }

.cart__grid {
  display: grid;
  gap: var(--space-l) var(--grid-gap);
  align-items: start;
}

.cart__grid[hidden],
.cart-empty[hidden] { display: none; }

@media (min-width: 992px) {
  .cart__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cart__main { grid-column: 1 / 8; }
  .summary { grid-column: 9 / -1; position: sticky; top: var(--space-l); }
}

.cart-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-xs);
  padding: var(--space-xl) 0;
  text-align: center;
}

.cart-empty__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
}

.cart-lines {
  display: grid;
  gap: var(--space-xs);
  margin: 0 0 var(--space-l);
  padding: 0;
  list-style: none;
}

.cart-line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: var(--space-xs);
  align-items: start;
  padding: var(--space-xs);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-s);
}

.cart-line__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-media);
  background: var(--gray-100);
}

.cart-line__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-line__info {
  display: grid;
  gap: var(--space-3xs);
  justify-items: start;
}

.cart-line__name {
  font-family: var(--font-display);
  font-size: var(--text-m);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
  text-decoration: none;
}

.cart-line__name:hover { color: var(--color-primary); }

.cart-line__variant {
  font-size: var(--text-14);
  color: var(--color-label);
}

.cart-line__remove {
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--text-14);
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cart-line__price {
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.cart-line .qty__btn { width: 38px; height: 38px; }

.checkout {
  display: grid;
  gap: var(--space-s);
  padding: clamp(24px, 3.2vw, 40px);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-s);
}

.checkout__title,
.summary__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.checkout__note { margin-top: calc(var(--space-2xs) * -1); font-size: var(--text-14); }

.checkout__row {
  display: grid;
  gap: var(--space-s) var(--grid-gap);
}

@media (min-width: 640px) {
  .checkout__row { grid-template-columns: 1fr 1fr; }
}

.checkout__fine,
.summary__fine,
.summary__off {
  font-size: var(--text-14);
  line-height: var(--leading-normal);
  color: var(--color-label);
}

.checkout__fine a,
.summary__fine a { color: var(--color-primary); }

/* Fields: same look as the contact form */
.field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.field__label {
  font-size: var(--text-16);
  font-weight: var(--weight-medium);
  line-height: var(--leading-cozy);
}

.field__req { color: var(--color-primary); }

.field__control {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 2px solid var(--color-primary);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  background: var(--gray-100);
  font-size: var(--text-16);
  line-height: var(--leading-normal);
  appearance: none;
}

.field__control:focus-visible { outline-offset: 0; }

.field__control[aria-invalid="true"] {
  border-bottom-color: var(--gold-700);
  background: var(--gold-100);
}

.field__select { position: relative; }
.field__select .field__control { padding-right: 48px; cursor: pointer; }

.field__chevron {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  color: var(--color-primary);
  pointer-events: none;
}

.summary {
  display: grid;
  gap: var(--space-s);
  padding: clamp(24px, 3.2vw, 40px);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-s);
}

.summary__rows { display: grid; gap: var(--space-2xs); margin: 0; }

.summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  font-size: var(--text-16);
}

.summary__row[hidden] { display: none; }
.summary__row dd { margin: 0; font-weight: var(--weight-bold); }

.summary__row--total {
  padding-top: var(--space-xs);
  border-top: 2px solid var(--color-text);
  font-size: var(--text-l);
}

.summary__error {
  padding: var(--space-xs);
  border-radius: var(--radius-m);
  background: var(--gold-100);
  font-size: var(--text-14);
  font-weight: var(--weight-medium);
}

.summary__error[hidden],
.summary__off[hidden] { display: none; }

.summary__pay { min-height: 48px; }

/* --------------------------------------------------------------------------
   6. THANK-YOU PAGE
   -------------------------------------------------------------------------- */
.shop-thanks {
  padding: var(--space-xl) 0 var(--space-section);
  background: var(--gray-100);
}

.shop-thanks__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-s);
  text-align: center;
}

.shop-thanks__order { font-size: var(--text-m); }
.shop-thanks__order[hidden] { display: none; }

.shop-thanks__text {
  max-width: 52ch;
  font-size: var(--text-m);
  line-height: var(--leading-normal);
}

.shop-thanks__text a { color: var(--color-primary); }

@media (max-width: 520px) {
  .shop-bar__link,
  .shop-bar__cart { font-size: var(--text-12); }
  .shop-bar__links { gap: var(--space-2xs) var(--space-s); }
  .cart-line { grid-template-columns: 72px minmax(0, 1fr); }
  .cart-line__price { grid-column: 2; }
}