.products, .product-view {
  color: #fff;
  background: #000;
  text-transform: uppercase;
  letter-spacing: .035em;
  font-size: .875rem;
  line-height: 1.5;
}
.products {
  position: relative;
  z-index: 2;
  /* Cover the extra viewport in the hero; all products keep their normal flow. */
  margin-top: -100vh;
  margin-top: -100lvh;
  min-height: 100svh;
  padding: calc(var(--announcement-offset, var(--announcement-height)) + var(--header-height) + 24px) var(--edge) 72px;
}
.products__toolbar {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: start;
  column-gap: 24px;
  margin-bottom: 18px;
}
.catalog-filters { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.filter-row { display: flex; align-items: center; gap: clamp(16px,2vw,32px); }
.filter-link, .filter-choice, .grid-choice, .image-switch__button, .text-control {
  color: #fff;
  padding: 5px 0;
  min-height: 30px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  cursor: pointer;
}
.filter-link { white-space: nowrap; transition: color 180ms ease; }
.filter-all, .filter-heading { color: #fff; }
.filter-row .filter-link:not(.filter-heading) { color: #929292; }
.filter-row .filter-link:not(.filter-heading):hover,
.filter-row .filter-link:not(.filter-heading):focus-visible { color: #fff; }
.filter-link:hover, .filter-choice:hover, .grid-choice:hover, .image-switch__button:hover, .text-control:hover,
.is-active { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.filter-options { padding: 6px 0 8px; }
.filter-caption { margin: 0 0 8px; color: rgba(255,255,255,.6); }
.filter-choices { display: flex; gap: 14px; flex-wrap: wrap; }
.filter-choice--color { display: inline-flex; align-items: center; gap: 8px; }
.color-swatch { display: block; flex: 0 0 1em; width: 1em; height: 1em; border: 1px solid #b8b8b8; background: var(--swatch-color); }
.filter-options--vertical { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.grid-controls { display: flex; align-items: center; gap: 12px; margin-top: 38px; }
.grid-choice { display: flex; align-items: center; justify-content: center; min-width: 32px; min-height: 30px; padding: 5px 6px; color: #929292; transition: color 180ms ease; }
.grid-choice, .grid-choice:hover, .grid-choice.is-active { text-decoration: none; }
.grid-choice:hover, .grid-choice.is-active { color: #fff; }
.grid-choice__icon { display: flex; gap: 3px; }
.grid-choice__square { display: block; width: 8px; height: 8px; background: currentColor; }
.grid-choice[data-columns="2"] .grid-choice__square:nth-child(3) { display: none; }
.products__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px 8px; }
.products__grid[data-columns="1"] { grid-template-columns: minmax(0,1fr); }
.products__grid[data-columns="2"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
.products__grid[data-columns="4"] { grid-template-columns: repeat(4,minmax(0,1fr)); }
.product-card { min-width: 0; }
.product-card__visual {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1206 / 1500;
  overflow: hidden;
  background: #575757;
  container-type: inline-size;
}
.product-card__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-card__caption { padding: 14px 4px 0; text-align: center; }
.product-card__name, .product-card__price { margin: 0; font-size: .875rem; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }
.product-card__price { margin-top: 2px; }
.product-card__pending { opacity: .58; }
.quick-sizes {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 8px;
  padding: 16px;
  color: #fff;
  background: rgba(18,18,18,.55);
  font-size: 1.0625rem;
  line-height: 1;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.quick-size { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 52px; border: 1px solid rgba(255,255,255,.65); background: rgba(0,0,0,.32); }
@container (max-width: 280px) {
  .quick-sizes { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; padding: 10px; font-size: .9375rem; }
  .quick-size { min-height: 40px; }
}
@container (max-width: 140px) {
  .quick-sizes { gap: 2px; padding: 4px; font-size: .8125rem; letter-spacing: 0; }
  .quick-size { min-height: 30px; }
}
@container (max-width: 90px) {
  .quick-sizes { font-size: .75rem; }
  .quick-size { min-height: 28px; }
}
.product-card__visual:hover .quick-sizes, .product-card__visual:focus-visible .quick-sizes { opacity: 1; transform: translateY(0); }
.is-sold-out { text-decoration: line-through; }
.catalog-empty { margin: 36px 0 64px; color: rgba(255,255,255,.7); }
.nav-link[data-destination="shop"], .nav-link[data-destination="cart"],
.mobile-menu__link[data-destination="shop"], .mobile-menu__link[data-destination="cart"],
.mobile-cart[data-destination="cart"], .hero__shop { cursor: pointer; }

.product-view { min-height: 100svh; padding: calc(var(--announcement-offset, var(--announcement-height)) + var(--header-height) + 36px) var(--edge) 64px; }
.product-view__layout { display: grid; grid-template-columns: minmax(190px,1fr) minmax(320px,2fr) minmax(290px,1fr); gap: clamp(24px,3vw,56px); align-items: start; }
.product-details { padding-top: 88px; }
.product-details h2, .product-details > p { color: rgba(255,255,255,.66); }
.product-details h2, .product-purchase h1 { margin: 0 0 20px; font-size: .875rem; font-weight: 400; }
.product-details > p { margin: 0; line-height: 1.7; }
.sizing-recommendation { margin-top: 48px; }
.sizing-recommendation p { margin: 0; color: #fff; line-height: 1.7; }
.sizing-link { padding: 0; color: #fff; font: inherit; letter-spacing: inherit; text-transform: uppercase; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; cursor: pointer; }
.product-media { margin: 0; min-width: 0; }
.product-media__frame { aspect-ratio: 1206 / 1500; background: #575757; }
.product-media__frame img { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.image-switch { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 40px; }
.image-switch__button { min-height: 32px; }
.product-purchase h1 { margin-bottom: 4px; }
.product-price { margin: 0 0 38px; }
.commerce-button, .size-button, .quantity-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  letter-spacing: .035em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 250ms ease, background-color 250ms ease;
}
.commerce-button { min-height: 47px; width: max-content; max-width: 100%; padding: 12px 2cm; text-align: center; }
.commerce-button__label { display: block; text-box: trim-both cap alphabetic; margin-right: -.035em; }
.size-options { display: grid; grid-template-columns: repeat(3,max-content); gap: 8px; margin-top: 16px; }
.size-button { justify-self: start; width: calc(2ch + .07em + 1cm + 2px); min-height: 47px; padding: 12px .5cm; }
.size-button[aria-pressed="true"] { color: #000; background: #fff; }
.size-button:disabled { cursor: not-allowed; opacity: .42; text-decoration: line-through; }
.quantity-control { display: flex; align-items: center; gap: 18px; margin-top: 28px; }
.quantity-control output { min-width: 20px; text-align: center; }
.quantity-button { width: 44px; height: 44px; padding: 0; }
.quantity-button:disabled { opacity: .4; cursor: not-allowed; }
.product-feedback { min-height: 42px; margin: 24px 0 0; color: rgba(255,255,255,.75); }
.commerce-button:disabled { opacity: .6; cursor: wait; }
@media (hover: hover) {
  .commerce-button:not(:disabled):hover, .size-button:not(:disabled):hover, .quantity-button:not(:disabled):hover { background: #fff; color: #000; }
}

.cart-drawer, .sizing-dialog {
  position: fixed;
  color: #fff;
  background: #000;
  font: inherit;
  font-size: .875rem;
  line-height: 1.5;
  letter-spacing: .035em;
  text-transform: uppercase;
  border: 1px solid #fff;
  border-radius: 0;
  padding: 28px;
}
.cart-drawer { inset: var(--menu-top,144px) 0 0 auto; margin: 0; width: min(480px,100%); max-width: 100%; height: calc(100dvh - var(--menu-top,144px)); max-height: none; border-right: 0; border-bottom: 0; overflow-y: auto; }
.cart-drawer::backdrop, .sizing-dialog::backdrop { background: transparent; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.dialog-heading h2 { margin: 0; font-size: .875rem; font-weight: 400; }
.text-control { text-decoration: underline; text-underline-offset: .25em; }
.cart-line { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 20px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.24); }
.cart-line img { display: block; width: 70px; aspect-ratio: 1206/1500; object-fit: cover; }
.cart-line__name, .cart-line__meta, .cart-line__price { margin: 0 0 4px; }
.cart-line__meta { opacity: .65; }
.cart-line__controls { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.cart-line__controls .quantity-button { width: 32px; height: 32px; }
.cart-line__controls .text-control { margin-left: auto; font-size: .75rem; }
.cart-summary { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; }
.cart-feedback { margin: 24px 0; color: rgba(255,255,255,.7); }
.commerce-status { margin: 18px 0; color: rgba(255,255,255,.7); font: inherit; font-size: .75rem; line-height: 1.5; }
.cart-checkout { width: 100%; margin-top: 24px; padding: 12px 24px; }
.cart-checkout:disabled { cursor: not-allowed; }
.sizing-dialog { width: min(480px,calc(100% - 32px)); max-height: calc(100dvh - 48px); }
.sizing-table { width: 100%; border-collapse: collapse; text-align: left; }
.sizing-table th, .sizing-table td { border-bottom: 1px solid rgba(255,255,255,.25); padding: 12px 0; font-weight: 400; }
.sizing-note { margin: 24px 0 0; opacity: .7; }
body.dialog-open { overflow: hidden; }

@media (max-width: 1100px) {
  .product-view__layout { grid-template-columns: minmax(0,1.2fr) minmax(290px,1fr); gap: 36px; }
  .product-media { grid-column: 1; grid-row: 1; }
  .product-purchase { grid-column: 2; grid-row: 1; }
  .product-details { grid-column: 1 / -1; grid-row: 2; padding: 0; max-width: 680px; }
}
@media (max-width: 760px) {
  .products { padding-bottom: 48px; }
  .catalog-filters { grid-column: 1 / -1; grid-row: 1; }
  .filter-row { gap: clamp(10px,2.8vw,20px); font-size: .75rem; }
  .filter-link, .filter-choice { min-height: 36px; }
  .filter-choices { gap: 4px 12px; }
  .grid-controls { grid-column: 2; grid-row: 1; justify-self: end; gap: 4px; margin-top: 0; }
  .grid-choice { min-width: 32px; min-height: 44px; }
  .products__grid { gap: 28px 6px; }
  .products__grid[data-columns="3"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid-choice[data-columns="3"] .grid-choice__square:nth-child(3) { display: none; }
  .product-card__caption { padding: 10px 0 0; }
  .product-card__name, .product-card__price { font-size: .75rem; letter-spacing: 0; }
  .product-view { padding-top: calc(var(--announcement-offset,var(--announcement-height)) + var(--header-height) + 24px); }
  .product-view__layout { display: flex; flex-direction: column; gap: 36px; }
  .product-media, .product-purchase, .product-details { width: 100%; }
  .product-media { order: 1; }
  .product-purchase { order: 2; }
  .product-details { order: 3; }
  .image-switch { margin-bottom: 24px; }
  .cart-drawer { padding: 20px; }
  .sizing-dialog { padding: 24px; }
}