.quantity-control { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 8px 0; color: var(--ink); border: 0; font: 13px "DM Mono", monospace; }
.quantity-control > span { margin-right: 8px; font-weight: 700; letter-spacing: .08em; }
.quantity-control button { width: 38px; height: 38px; display: grid; place-items: center; margin: 0; padding: 0; color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; background: transparent; font: 20px/1 "DM Mono", monospace; cursor: pointer; transition: background .16s ease, color .16s ease, transform .16s ease; }
.quantity-control output { min-width: 25px; display: grid; place-items: center; color: var(--ink); background: transparent; font: 700 20px/1 "DM Mono", monospace; }
.quantity-control button:hover { color: var(--ink); background: var(--acid); transform: translateY(-2px); }
.sizes button.is-selected { color: var(--paper); background: var(--ink); }
.sizes button.is-sold-out { position: relative; color: #666; border-color: #777; text-decoration: line-through; cursor: help; opacity: .72; }
.sizes button.is-sold-out:hover { color: #666; background: transparent; }
.sizes button.is-sold-out::after { content: attr(data-stock-note); position: absolute; z-index: 9; bottom: calc(100% + 9px); left: 50%; padding: 8px 10px; color: var(--ink); background: var(--acid); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font: 700 10px/1 "DM Mono", monospace; letter-spacing: .04em; text-decoration: none; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .15s ease, transform .15s ease; }
.sizes button.is-sold-out:hover::after, .sizes button.is-sold-out:focus-visible::after, .sizes button.is-sold-out.is-stock-note-open::after { opacity: 1; transform: translate(-50%, 0); }
.sizes button:hover { color: var(--paper); background: var(--ink); }
.product-price { margin: 0; color: var(--ink); font: 700 clamp(18px, 1.6vw, 26px)/1 "DM Mono", monospace; letter-spacing: -.04em; }
.product-price > .shipping-info { position: relative; display: inline-block; margin-left: 8px; font-size: .55em; letter-spacing: .05em; }
.product-price > .shipping-included { display: inline-block; margin-left: 8px; font-size: .55em; letter-spacing: .05em; }
.shipping-info-trigger { position: relative; z-index: 1; padding: 0; color: inherit; border: 0; background: transparent; font: inherit; letter-spacing: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.shipping-tooltip { position: absolute; z-index: 8; bottom: 100%; left: 0; width: max-content; max-width: min(260px, 78vw); padding: 12px 14px; color: var(--ink); background: var(--acid); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font: 700 12px/1.45 "DM Mono", monospace; letter-spacing: 0; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease; }
.shipping-tooltip a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.shipping-info:hover .shipping-tooltip,
.shipping-info:focus-within .shipping-tooltip { opacity: 1; pointer-events: auto; transform: translateY(0); }
.shipping-info-trigger:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (min-width: 721px) {
  .shipping-info { padding-right: 48px; margin-right: -48px; }
  .shipping-info::before { content: ""; position: absolute; z-index: 0; top: -38px; right: 0; bottom: -38px; left: -8px; }
  .shipping-tooltip { top: 50%; right: auto; bottom: auto; left: 100%; transform: translate(-4px, -50%); }
  .shipping-info:hover .shipping-tooltip,
  .shipping-info:focus-within .shipping-tooltip { transform: translate(0, -50%); }
}
.cart.is-added { color: var(--ink); background: var(--acid); outline: 2px solid var(--ink); }
.cart { align-self: flex-start; width: min(100%, 348px); }
.size-guide-type { display: none; }
@media (max-width: 720px) {
  .cart { width: min(220px, 65vw); padding: 15px 12px; font-size: 12px; }
}

.product-divider { min-height: clamp(42px, 4vw, 64px); display: grid; place-items: center; color: var(--acid); background: var(--ink); font: 700 clamp(10px, 1vw, 14px)/1 "DM Mono", monospace; letter-spacing: .12em; }
/* Every product uses the same section and information-card layout. */
.drop > .product-info { min-width: 0; }
.product-info > h2 { white-space: nowrap; }
.bundle-product-panel {
  position: relative;
  overflow: visible;
}
.bundle-product-panel > img.bundle-composite {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100%, 1000px);
  max-height: none;
  height: auto;
  filter: none;
  mix-blend-mode: normal;
  object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.kaxba-slogan { display: inline-block; white-space: nowrap; font-size: clamp(12px, 1.35vw, 19px); }
@media (min-width: 721px) {
  .drop { min-height: clamp(760px, 78svh, 860px); }
}
.nav .wordmark,
.nav .header-title,
.nav .header-cart { color: inherit; font: 500 1em/1 "DM Mono", monospace; letter-spacing: .04em; text-decoration: none; }
.header-cart b { position: static; display: inline; margin-left: 7px; color: var(--ink); background: transparent; font: 700 1em/1 "DM Mono", monospace; vertical-align: baseline; }
.header-cart b[hidden] { display: none !important; }
.cart-drawer { position: fixed; z-index: 50; top: 76px; right: 22px; width: min(420px, calc(100vw - 44px)); }
.cart-drawer[hidden] { display: none; }
.cart-drawer-panel { width: 100%; display: flex; flex-direction: column; max-height: min(600px, calc(100vh - 100px)); padding: 22px; overflow: auto; color: var(--paper); background: var(--ink); box-sizing: border-box; box-shadow: 5px 5px 0 var(--acid); }
.cart-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid currentColor; }
.cart-drawer-header h2 { margin: 0; font: 500 28px/1 "DM Mono", monospace; letter-spacing: -.06em; }
.cart-drawer-close { width: 38px; height: 38px; color: var(--ink); border: 0; background: var(--acid); font-size: 28px; line-height: 1; cursor: pointer; }
.cart-drawer-items { display: grid; gap: 14px; padding: 16px 0; }
.cart-line { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.38); font-family: "DM Mono", monospace; }
.cart-line-name { font-size: 14px; letter-spacing: .04em; }.cart-line-meta { margin-top: 6px; color: var(--acid); font-size: 11px; }.cart-line-price { align-self: start; font-size: 14px; }
.cart-line-actions { display: flex; align-items: center; gap: 10px; }.cart-line-actions button { width: 28px; height: 28px; color: var(--paper); border: 1px solid currentColor; background: transparent; font: 18px/1 "DM Mono", monospace; cursor: pointer; }.cart-line-actions .cart-line-remove { width: auto; padding: 0 8px; color: var(--ink); border-color: var(--acid); background: var(--acid); font-size: 10px; }
.cart-drawer-empty { margin: 18px 0; color: var(--acid); font: 13px/1.4 "DM Mono", monospace; }.cart-drawer-empty[hidden] { display: none; }
.cart-drawer-checkout { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 4px; padding: 16px; color: var(--ink); border: 0; background: var(--acid); font: 700 13px/1 "DM Mono", monospace; letter-spacing: .07em; }.cart-drawer-checkout:disabled { cursor: not-allowed; opacity: .65; }.cart-drawer-checkout span { font-size: 22px; line-height: .5; }.cart-drawer-note { margin: 12px 0 0; color: rgba(255,255,255,.7); font: 10px/1.4 "DM Mono", monospace; }
@media (max-width: 720px) { .cart-drawer { top: 66px; right: 12px; width: min(320px, calc(100vw - 28px)); } .cart-drawer-panel { max-height: min(500px, calc(100vh - 82px)); padding: 16px; } }

/* Hero product: a tactile product insert between the title and campaign films. */
.hero-copy { z-index: 3; }
.hero-product-wrap {
  position: absolute;
  z-index: 2;
  top: clamp(118px, 10vh, 174px);
  left: clamp(20%, 24.5vw, 27%);
  width: clamp(260px, 18vw, 380px);
  display: grid;
  justify-items: center;
  transform-origin: center;
  will-change: transform;
}
.hero-product-card {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  perspective: 1500px;
  transform-style: preserve-3d;
}
.hero-product-shot {
  width: 100%;
  max-height: min(55vh, 520px);
  display: block;
  object-fit: contain;
  pointer-events: none;
  backface-visibility: hidden;
  filter: drop-shadow(0 16px 12px rgba(0, 0, 0, .16));
  transform: perspective(1500px) rotateZ(24deg) rotate3d(1, .1, 0, 0deg);
  transform-origin: center;
  transform-style: preserve-3d;
  will-change: transform;
}
.hero-product-card.is-flipping .hero-product-shot {
  animation: hero-shirt-coin-flip 1.82s cubic-bezier(.22, .61, .36, 1) both;
}
.hero-product-shot--back {
  position: absolute;
  inset: 0;
  transform: perspective(1500px) rotateZ(24deg) rotate3d(1, .1, 0, 180deg);
}
.hero-product-card.is-flipping .hero-product-shot--back { animation-name: hero-shirt-coin-flip-back; }
.hero-product-buy {
  position: absolute;
  top: 6%;
  left: 78%;
  z-index: 3;
  width: 210px;
  height: 157px;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transform: rotate(-3deg);
  transform-origin: center;
  transition: transform .18s ease, opacity .14s ease;
}
.hero-product-buy svg { width: 100%; height: 100%; overflow: visible; }
.hero-product-buy path { fill: var(--paper); stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; }
.hero-product-buy text { fill: var(--ink); font: 500 30px "DM Mono", monospace; letter-spacing: 2px; }
.hero-product-buy:hover { transform: rotate(-3deg) scale(1.04); }
.hero-product-wrap.is-flipping .hero-product-buy {
  opacity: 0;
  pointer-events: none;
  transform: rotate(-3deg) scale(.9);
}

@keyframes hero-shirt-coin-flip {
  0% { transform: perspective(1500px) rotateZ(24deg) rotate3d(1, .1, 0, 0deg) translate3d(0, 0, 0) scale(1); }
  12% { transform: perspective(1500px) rotateZ(29deg) rotate3d(1, .1, 0, -140deg) translate3d(-8px, -30px, 120px) scale(1.08); }
  30% { transform: perspective(1500px) rotateZ(17deg) rotate3d(1, .1, 0, -650deg) translate3d(-22px, -105px, 310px) scale(1.3); }
  47% { transform: perspective(1500px) rotateZ(32deg) rotate3d(1, .1, 0, -1170deg) translate3d(8px, -125px, 375px) scale(1.42); }
  64% { transform: perspective(1500px) rotateZ(19deg) rotate3d(1, .1, 0, -1650deg) translate3d(17px, -76px, 225px) scale(1.18); }
  82% { transform: perspective(1500px) rotateZ(27deg) rotate3d(1, .1, 0, -2050deg) translate3d(5px, -18px, 55px) scale(1.035); }
  93% { transform: perspective(1500px) rotateZ(23deg) rotate3d(1, .1, 0, -2150deg) translate3d(0, 2px, 0) scale(.995); }
  100% { transform: perspective(1500px) rotateZ(24deg) rotate3d(1, .1, 0, -2160deg) translate3d(0, 0, 0) scale(1); }
}
@keyframes hero-shirt-coin-flip-back {
  0% { transform: perspective(1500px) rotateZ(24deg) rotate3d(1, .1, 0, 180deg) translate3d(0, 0, 0) scale(1); }
  12% { transform: perspective(1500px) rotateZ(29deg) rotate3d(1, .1, 0, 40deg) translate3d(-8px, -30px, 120px) scale(1.08); }
  30% { transform: perspective(1500px) rotateZ(17deg) rotate3d(1, .1, 0, -470deg) translate3d(-22px, -105px, 310px) scale(1.3); }
  47% { transform: perspective(1500px) rotateZ(32deg) rotate3d(1, .1, 0, -990deg) translate3d(8px, -125px, 375px) scale(1.42); }
  64% { transform: perspective(1500px) rotateZ(19deg) rotate3d(1, .1, 0, -1470deg) translate3d(17px, -76px, 225px) scale(1.18); }
  82% { transform: perspective(1500px) rotateZ(27deg) rotate3d(1, .1, 0, -1870deg) translate3d(5px, -18px, 55px) scale(1.035); }
  93% { transform: perspective(1500px) rotateZ(23deg) rotate3d(1, .1, 0, -1970deg) translate3d(0, 2px, 0) scale(.995); }
  100% { transform: perspective(1500px) rotateZ(24deg) rotate3d(1, .1, 0, -1980deg) translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 1450px) {
  .hero-product-wrap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-product-card.is-flipping .hero-product-shot { animation: none; }
}

/* The front/back control belongs to its own grid row, never over the garment. */
.product-image {
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 16px;
  padding: 24px 24px 28px;
}
.product-view-panel { grid-row: 1; min-height: 0; }
/* Normalize the near-white photo canvases before they blend into the shared
   gray product field; every front/back view then uses one background tone. */
.product-view-panel > img { max-height: 100%; filter: brightness(1.01); }
/* The former back-view placeholder was black; real back-view photography uses
   the same neutral product canvas as the front. */
.product-view-back { color: var(--ink); background: #e7e4df; }
/* The common rear photo is slightly taller than the individual front photos.
   Scale it proportionally per product so no shirt is stretched or distorted. */
.product-view-switch {
  /* Fixed grid row: remains just below the shirt on shorter product blocks. */
  grid-row: 2;
  position: static;
  top: auto;
  bottom: auto;
  left: auto;
  justify-self: center;
  align-self: start;
  margin: 0;
  transform: none;
}
@media (min-width: 721px) {
  /* Both products share the same visual lift without changing image sizing. */
  .product-view-switch { transform: translateY(-76px); }
}

@media (max-width: 720px) {
  .hero-product-shot { display: none; }
  .product-image {
    min-height: 490px;
    gap: 12px;
    padding: 30px 16px 20px;
  }
  .product-image img { max-height: 340px; }
  .product-view-switch { top: auto; bottom: auto; }
}

/* Mobile gets a compact product insert in the open right-hand area of the film collage. */
@media (max-width: 720px) {
  .hero-film--one { top: 721px; }
  .hero-film--two { top: 506px; }
  .hero-film--three { top: 366px; }
  .hero-product-wrap {
    display: grid;
    top: -242px;
    right: clamp(12px, 6vw, 24px);
    left: auto;
    width: min(35vw, 154px);
    z-index: 4;
  }
  .hero-product-wrap::before {
    display: none;
  }
  .hero-product-shot {
    display: block;
    width: 100%;
    max-height: none;
    filter: none;
    opacity: 1;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-transform-style: preserve-3d;
    transform: perspective(1500px) rotateZ(24deg) rotate3d(1, .1, 0, 0deg);
  }
  .hero-product-shot--back,
  .hero-product-card.is-flipping .hero-product-shot--back { display: none !important; }
  .hero-product-card { background: transparent; -webkit-tap-highlight-color: transparent; }
  .hero-product-card.is-flipping .hero-product-shot {
    animation: hero-shirt-coin-flip 2.05s cubic-bezier(.22, .61, .36, 1) both;
  }
  .hero-product-card.is-flipping .hero-product-shot--back { display: block; }
  .hero-product-card.is-flipping { animation: mobile-card-center 2.05s cubic-bezier(.22, .61, .36, 1) both; }
  .hero-product-buy {
    top: 50%;
    left: 22%;
    z-index: 6;
    width: clamp(62px, 18vw, 72px);
    height: auto;
    aspect-ratio: 4 / 3;
    display: block;
    transform: translateX(-50%) rotate(-3deg);
  }
  .hero-product-buy svg { display: block; }
  .hero-product-buy text { font-size: clamp(42px, 12vw, 48px); letter-spacing: -1px; }
  .hero-product-buy { transition: transform .18s ease, opacity .14s ease; }
  .hero-product-buy:hover { transform: translateX(-50%) rotate(-3deg) scale(1.04); }
  .hero-product-wrap.is-flipping .hero-product-buy {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) rotate(-3deg) scale(.9);
  }

}

@keyframes mobile-card-center {
  0% { transform: translateX(0) scale(1); }
  28% { transform: translateX(-64px) scale(1.2); }
  48% { transform: translateX(-96px) scale(1.42); }
  68% { transform: translateX(-72px) scale(1.22); }
  100% { transform: translateX(0) scale(1); }
}

@media (min-width: 721px) {
  .header-title { color: inherit; text-decoration: none; }
  .manifesto { align-items: center; text-align: center; }
  .manifesto p + p { margin-left: 0; }
  .manifesto .manifesto-tagline { max-width: 1120px; margin-top: 24px; font-family: "Space Grotesk", Arial, sans-serif; font-size: clamp(30px, 4vw, 62px); font-style: normal; line-height: .98; letter-spacing: -.065em; }
}

@media (min-width: 1101px) and (max-width: 1450px) {
  .hero { min-height: calc(108svh + 130px); }
  .hero-copy { width: 46%; }
  .hero h1 { font-size: clamp(82px, 9.2vw, 128px); }
  .hero-film { width: clamp(250px, 24vw, 340px); }
  .hero-film--one { right: calc(14vw + 40px); }
  .hero-film--two { right: calc(7vw + 82px); }
  .hero-film--three { right: 3vw; }
  .drop { grid-template-columns: minmax(0, 1.05fr) minmax(370px, .95fr); }
  .product-info { padding: 70px 46px; }
  .product-info h2 { font-size: clamp(68px, 7.2vw, 104px); }
}

/* Desktop size guide: compact proportions without affecting the mobile dialog. */
@media (min-width: 721px) {
  .size-guide-dialog { width: min(1180px, calc(100vw - 80px)); }
  .size-guide-panel { padding: 32px 36px 34px; }
  .size-guide-panel h2 { margin-bottom: 20px; font-size: clamp(24px, 2.25vw, 34px); }
  .size-guide-content { grid-template-columns: minmax(300px, .9fr) minmax(500px, 1.1fr); gap: 42px; }
  .size-guide-content img { width: min(100%, 390px); }
  .size-guide-table { max-width: 640px; margin-left: auto; font-size: 14px; }
  .size-guide-table th,
  .size-guide-table td { padding: 12px 6px; }
  .size-guide-key { max-width: 640px; margin-left: auto; gap: 8px 14px; }
  .size-guide-table-wrap > p { max-width: 640px; margin-left: auto; }
}