/* ============================================================
   Chewtoy's Dugout — shop · "Night Pitch" (2026-09)

   woocommerce/archive-product.php (landing + category + product search),
   woocommerce/content-product-team-set.php, woocommerce/content-product.php
   and the AJAX quick-view body (inc/quick-view.php). components.css does the
   generic work; this file is the shop's own layout plus the v3 skin for the
   legacy class names the shop scripts query and must keep
   (.products-grid, .team-set-card, .product-card, .size-toggle, .qty-control,
   .btn-add-to-cart, .shop-toolbar, .filters-panel, .quick-view-modal, .qv-*).

   Breakpoints: 1000px (2-up) and 640px (phone). The team grid is sized so
   eight cards read at once on a 1366x768 screen.
   ============================================================ */

/* ---------- page head ---------- */
.ctd-shop__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-8); }
.ctd-shop__title { font-size: var(--fs-32); }
.ctd-shop__desc { font-size: var(--fs-14); color: var(--text-2); max-width: 62ch; text-wrap: pretty; }
.ctd-shop__desc p { margin: 0; }
.ctd-shop__desc p + p { margin-top: var(--s-2); }
.ctd-shop__total { white-space: nowrap; font-size: var(--fs-14); }
/* On an archive the title, its supporting line and the count share one row, so
   the first two rows of cards land above the fold on a 1366x768 screen. */
/* The archive head is a sheet head since 2026-10-09 (the .ctd-sheethead rules
   at the foot of this file): the title and its line, the count in the aside. */
.ctd-shop__head--archive .ctd-shop__desc { font-size: var(--fs-16); max-width: 62ch; }

/* ---------- search form ---------- */
.shop-search-form { display: flex; align-items: center; gap: var(--s-2); }
/* min-width: 0 is what stops the PAGE scrolling sideways. A flex item's
   automatic minimum is its content, and a 300px field with an <input> in it
   would not shrink below that — so below ~370px the shop landing, the team
   sets, product search and spares all pushed the document 50px wider than the
   screen. The width is still the target, it is simply allowed to give. */
.shop-search-form__field { width: 300px; min-width: 0; }
/* align-self, not height: 100%. The wrapper is `align-items: center` with a
   44px min-height, and a percentage height against an auto-height parent
   resolves to auto — so the input sat 21px tall in the middle of a field that
   LOOKED 44px, and the 11px above and below it did nothing when tapped. */
.shop-search-form__field input {
  flex: 1; min-width: 0; align-self: stretch;
  background: none; border: 0; outline: none; color: var(--text); font: inherit;
}
.shop-search-form__field input::placeholder { color: var(--text-3); opacity: 1; }
/* shop-filters.js adds --live when it takes the form over as a client-side
   filter: Enter is already prevented, so the submit button would be a dead
   control. Without JS the button stays and the form submits as normal. */
.shop-search-form--live .shop-search-form__submit { display: none; }

/* ============================================================
   LANDING
   ============================================================ */
.ctd-shop__landing { padding-block: var(--s-12); }

.ctd-shop__spare { text-decoration: none; color: inherit; align-items: flex-start; gap: var(--s-6); }
.ctd-shop__spare { position: relative; transition: background var(--t-fast) var(--ease), padding-left var(--t-base) var(--ease); }
.ctd-shop__spare::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); transform: scaleY(0); transform-origin: center;
  transition: transform var(--t-base) var(--ease);
}
.ctd-shop__spare:hover { background: var(--surface-2); }
.ctd-shop__spare:hover::before, .ctd-shop__spare:focus-visible::before { transform: scaleY(1); }
.ctd-shop__spare-text { display: flex; flex-direction: column; gap: 2px; }
.ctd-shop__spare:hover .ctd-h4 { color: var(--gold-300); }
.ctd-shop__spare-meta { white-space: nowrap; }
.ctd-shop__trust { padding-block: var(--s-8); } /* the cross members reach 20px into each edge; see .ctd-home__trust */

/* ============================================================
   ARCHIVE — category, product tag, product search
   ============================================================ */
.ctd-shop__archive { padding-block: var(--s-4) var(--s-12); }
.ctd-shop__archive-inner { gap: var(--s-3); }

/* ---------- toolbar ---------- */
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.shop-toolbar__controls { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.shop-toolbar__pills { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-gold); font-size: var(--fs-12); font-weight: 700;
}

/* Woo's own sort control. No appearance:none — the flat system has no arrow
   asset and url() is banned here, so the native arrow is kept and told to
   paint light with color-scheme. */
/* base.css makes every svg display:block, so the label's sort icon has to be
   told to sit inline or it pushes "Sort" onto its own line. */
.woocommerce-ordering { margin: 0; display: flex; align-items: center; gap: var(--s-2); }
.woocommerce-ordering label {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: var(--fs-13); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}
.woocommerce-ordering label .ctd-i { color: var(--text-3); }
.woocommerce-ordering select,
.woocommerce-ordering .orderby {
  color-scheme: dark;
  min-height: var(--control-h-sm); padding: 0 var(--s-2);
  background: var(--ink-900); color: var(--text-2);
  border: var(--bw) solid var(--line-2); border-radius: var(--r-1);
  font-family: var(--font-body); font-size: var(--fs-14); font-weight: 600;
}
/* An iPad zooms on a 14px control too, and the phone rule below only starts
   at 640px: any touch screen gets the 16px (2026-10-09). */
@media (pointer: coarse) { .woocommerce-ordering select, .woocommerce-ordering .orderby { font-size: var(--fs-16); } }
.woocommerce-ordering select:hover { color: var(--text); border-color: var(--bone-500); }

/* ---------- filter panel ---------- */
.filters-panel {
  padding: var(--s-4); background: var(--bg-alt);
  border: var(--bw) solid var(--line-1); border-radius: var(--r-2);
}
.filters-panel[hidden] { display: none; }
.filters-form { display: flex; gap: var(--s-8); flex-wrap: wrap; align-items: flex-start; }
.filter-group { display: flex; flex-direction: column; gap: var(--s-2); }
.filter-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.filter-chip { position: relative; }
.filter-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.filter-chip:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
/* shop-filters.js toggles --active for the 150ms before it auto-submits, so
   the selected look hangs off that class rather than .ctd-pill--on. */
.filter-chip--active { background: var(--bone-100); border-color: var(--bone-100); color: var(--ink-950); }

/* ---------- status row ---------- */
.shop-status-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; min-height: 20px; }
.results-count { font-size: var(--fs-13); color: var(--text-3); }
.results-count p, .woocommerce-result-count { margin: 0; }
.active-filters { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.active-filter { text-decoration: none; height: 28px; }
.active-filter:hover { color: var(--text); border-color: var(--bone-500); border-style: solid; }
.clear-filters { color: var(--text-3); text-decoration: underline; text-underline-offset: 0.15em; }
.clear-filters:hover { color: var(--text); }

/* WooCommerce's own notices (woocommerce_output_all_notices) are styled in
   components.css — they fire on the archive, the product page and the cart. */

/* ---------- pagination arrows ---------- */
.shop-pagination .page-numbers .ctd-i { width: 16px; height: 16px; }

/* ---------- the grid ---------- */
.products-grid ul.products {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-6); grid-template-columns: repeat(3, minmax(0, 1fr));
}
.products-grid ul.products::after, .products-grid ul.products::before { content: none; display: none; } /* Woo clearfix */

.shop-pagination { display: flex; justify-content: center; }
.shop-pagination ul.page-numbers { list-style: none; display: flex; gap: var(--s-2); margin: 0; padding: 0; }
.shop-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--control-h-sm); min-height: var(--control-h-sm); padding: 0 var(--s-3);
  border: var(--bw) solid var(--line-2); border-radius: var(--r-1);
  background: var(--surface); color: var(--text-2); text-decoration: none;
  font-family: var(--font-display); font-weight: 500; font-variant-numeric: tabular-nums;
}
.shop-pagination .page-numbers:hover { color: var(--text); border-color: var(--bone-500); }
.shop-pagination .page-numbers.current { background: var(--bone-100); border-color: var(--bone-100); color: var(--ink-950); }
.shop-pagination li { display: flex; }

/* ---------- empty state ---------- */
.ctd-shop__empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  padding: var(--s-16) var(--s-6); text-align: center;
  border: var(--bw) dashed var(--line-2); border-radius: var(--r-2); background: var(--fx-turf), var(--bg-alt);
}
.ctd-shop__empty .ctd-i { color: var(--text-3); }

/* ============================================================
   TEAM-SET CARD (the picker) — compact, initials tile for a crest
   ============================================================ */
.team-set-card { list-style: none; display: flex; }
.team-set-card.is-filtered-out { display: none; }
.team-set-card__link {
  display: flex; flex-direction: column; gap: var(--s-2); width: 100%;
  padding: var(--s-2) var(--s-4);
  background: var(--surface); border: var(--bw) solid var(--line-1); border-radius: var(--r-2);
  color: var(--text); text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.team-set-card__link { box-shadow: var(--fx-rim); position: relative; overflow: hidden; isolation: isolate; }
/* The same gold wipe along the top edge every other clickable card has
   (.ctd-card--interactive, .product-card) — the team picker was the one grid
   on the site whose cards did not answer the pointer with it. (2026-09-23) */
.team-set-card__link::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.team-set-card__link:hover::before, .team-set-card__link:focus-visible::before { transform: scaleX(1); }
.team-set-card__link:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--fx-rim-strong), var(--fx-lift); }
.team-set-card__crest { transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease); }
.team-set-card__link:hover .team-set-card__crest { border-color: var(--accent); box-shadow: var(--fx-glow-gold); }
.team-set-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.team-set-card__crest {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  background: var(--ink-900); border: var(--bw) solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
}
.team-set-card__initials { font-size: var(--fs-14); font-weight: 700; letter-spacing: 0.04em; color: var(--text-2); }
.team-grid-empty {
  grid-column: 1 / -1; list-style: none; padding: var(--s-10) var(--s-6); text-align: center;
  color: var(--text-3); border: var(--bw) dashed var(--line-2); border-radius: var(--r-2);
}

/* ============================================================
   PRODUCT CARD (every other category) — DOM is shop-cards.js's
   ============================================================ */
.product-card {
  position: relative; list-style: none; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--line-1); border-radius: var(--r-2);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.product-card { box-shadow: var(--fx-rim); }
.product-card:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--fx-rim-strong), var(--fx-lift); }
.product-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.product-card:hover::before, .product-card:focus-within::before { transform: scaleX(1); }
/* No claw rake over the product photo (removed 2026-09-23 — see the note on
   .ctd-card--interactive in components.css). The pointer light is the hover. */
.product-card__image { position: relative; }
.product-card__image img { transition: transform var(--t-base) var(--ease); }
.product-card:hover .product-card__image img { transform: scale(1.03); }
.product-card__badge { position: absolute; top: var(--s-3); left: var(--s-3); z-index: 1; }
/* It clips, like every other photo frame (.ctd-card__media, .ctd-photo): the
   scroll drift in motion.css §10 scales the photo 1.1 and moves it, the hover
   scales it too, and a transformed image paints ABOVE the card's un-positioned
   text — so an unclipped button let the picture slide over the title. */
.product-card__image {
  display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden;
  background: var(--ink-900); border-bottom: var(--bw) solid var(--line-1); cursor: pointer;
}
.product-card__image img { width: 100%; height: 100%; object-fit: cover; }
.product-card__image-hover { display: none; }
.product-card__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.product-card__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.product-card__meta:empty { display: none; }
.product-card__title { margin: 0; }
.product-card__title-button { text-align: left; color: var(--text); font: inherit; }
.product-card__title-button:hover { color: var(--gold-300); }
.product-card__excerpt { margin: 0; }
.product-card__footer {
  padding: var(--s-3) var(--s-4); border-top: var(--bw) solid var(--line-1);
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
}
.product-card__price {
  margin-right: auto;
  font-family: var(--font-display); font-size: var(--fs-20); font-weight: 700;
  color: var(--gold-300); font-variant-numeric: tabular-nums; text-shadow: var(--fx-glow-price);
}
.product-card__price del { color: var(--text-3); font-size: var(--fs-14); font-weight: 500; }
.product-card__price ins { text-decoration: none; }
.product-card__price .woocommerce-Price-currencySymbol { font-size: 0.8em; }
.product-card__stock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); }
.product-card__stock--out { color: var(--text-3); }
.product-card__stock--paused { color: var(--warn); }
.product-card--size-changed .product-card__price { color: var(--bone-100); }

/* 32/40mm toggle */
.size-toggle {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border: var(--bw) solid var(--line-2); border-radius: var(--r-1); overflow: hidden;
}
.size-toggle__option {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: var(--control-h-sm); border-left: var(--bw) solid var(--line-2);
  color: var(--text-2); font-size: var(--fs-14); font-weight: 600; cursor: pointer;
}
.size-toggle__option:first-child { border-left: 0; }
.size-toggle__option input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.size-toggle__option:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }
.size-toggle__option:hover { background: var(--surface-2); color: var(--text); }
.size-toggle__option--active { background: var(--bone-100); color: var(--ink-950); }
.size-toggle__option--active:hover { background: var(--bone-100); color: var(--ink-950); }
.size-toggle__option--active .ctd-chip__dot { background: var(--ink-950); }
.size-toggle__option--big .ctd-chip__dot { width: 11px; height: 11px; }
.size-toggle__label { display: inline-flex; align-items: center; gap: 6px; }

/* quantity stepper */
.qty-control {
  display: inline-grid; grid-template-columns: 36px 44px 36px;
  border: var(--bw) solid var(--line-2); border-radius: var(--r-1); overflow: hidden;
}
.qty-btn { display: flex; align-items: center; justify-content: center; min-height: var(--control-h-sm); color: var(--text-2); }
.qty-btn:hover { background: var(--surface-2); color: var(--text); }
.qty-input {
  min-width: 0; text-align: center; background: var(--ink-900); color: var(--text);
  border: 0; border-inline: var(--bw) solid var(--line-2);
  font-weight: 700; font-variant-numeric: tabular-nums; appearance: textfield;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* add to basket / details — the site's casting at --sm, without the class.
   Woo renders these buttons (woocommerce/content-product.php) and
   js/shop-cards.js keys off .btn-add-to-cart and its three state spans, so
   the classes stay and the casting is applied to them here. components.css
   is the source of the recipe. */
.btn-add-to-cart, .btn-view-options {
  --btn-c: var(--btn-cut-sm); --btn-b: var(--btn-bevel-sm);
  --btn-ci: calc(var(--btn-c) - var(--btn-b) * 0.41);
  --btn-clip: var(--fx-ticket-rip-sm);
  --btn-clip-in: var(--btn-clip);
  --btn-rim: var(--fx-btn-rim-gun); --btn-rim-press: var(--fx-btn-rim-gun-press);
  --btn-face: var(--fx-btn-face-gun);
  position: relative; isolation: isolate;
  border: 0; border-radius: 0; background: none;
  color: var(--gold-300); text-shadow: var(--fx-btn-engrave-light);
  filter: var(--fx-btn-cast);
  transition: filter var(--t-base) var(--ease), transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn-add-to-cart::before, .btn-view-options::before, .btn-add-to-cart::after, .btn-view-options::after { content: ""; position: absolute; pointer-events: none; }
.btn-add-to-cart::before, .btn-view-options::before { inset: 0; z-index: -2; clip-path: var(--btn-clip); background: var(--btn-rim); }
.btn-add-to-cart::after, .btn-view-options::after {
  inset: var(--btn-b); z-index: -1; clip-path: var(--btn-clip-in);
  /* The face as components.css draws it since the 2026-09-28 badge buttons:
     the sheen as its first layer (raked across on hover) and the enamel edge.
     This copy had neither until 2026-10-09, so these buttons read flatter
     than every .ctd-btn beside them. */
  background-image: var(--fx-sheen), var(--btn-face); background-repeat: no-repeat;
  background-size: 60% 100%, 100% 100%; background-position: -120% 0, 0 0;
  box-shadow: var(--fx-btn-enamel-edge);
  transition: filter var(--t-fast) var(--ease), background-position 520ms var(--ease);
}
.btn-add-to-cart, .btn-view-options {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--btn-h-sm); padding: 0 calc(32px + 10px) 0 var(--s-4);   /* the right side clears the rip line's stub (THE RIP LINE, tokens.css) */
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--fs-13); line-height: 1; white-space: nowrap; cursor: pointer;
}
.btn-add-to-cart {
  --btn-rim: var(--fx-btn-rim-gold); --btn-rim-press: var(--fx-btn-rim-gold-press);
  --btn-face: var(--fx-btn-face-gold);
  color: var(--on-gold); text-shadow: var(--fx-btn-engrave-dark);
}
.btn-view-options:hover { background: none; border-color: transparent; color: var(--btn-hot-ink); }
.btn-view-options:hover::before { background: var(--fx-btn-rim-gold); }
.btn-view-options:hover::after { filter: var(--fx-btn-lift); }
.btn-add-to-cart:hover { background: none; border-color: transparent; color: var(--on-gold); filter: var(--fx-btn-cast-hot); }
.btn-add-to-cart:hover::after { filter: brightness(1.08); }
.btn-view-options:active, .btn-add-to-cart:active { transform: translateY(2px); filter: var(--fx-btn-cast-press); }
.btn-view-options:active::before, .btn-add-to-cart:active::before { background: var(--btn-rim-press); }
.btn-view-options:active::after, .btn-add-to-cart:active::after { filter: brightness(0.9); }
.btn-view-options:hover::after, .btn-add-to-cart:hover::after { background-position: 220% 0, 0 0; }
.btn-view-options:focus-visible, .btn-add-to-cart:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .btn-view-options::after, .btn-add-to-cart::after,
  .btn-view-options:hover::after, .btn-add-to-cart:hover::after { transition: filter var(--t-fast) var(--ease); background-position: -120% 0, 0 0; }
}
.btn-add-to-cart[disabled] { opacity: 0.42; cursor: default; filter: var(--fx-btn-cast-off); }
/* the three states are spans with [hidden] — restore that over display:inline-flex */
.btn-add-to-cart__text, .btn-add-to-cart__loading, .btn-add-to-cart__success { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; }
.btn-add-to-cart__text[hidden], .btn-add-to-cart__loading[hidden], .btn-add-to-cart__success[hidden] { display: none; }
/* added: the casting goes gunmetal and says so in the room's green */
.product-card--added .btn-add-to-cart {
  --btn-rim: var(--fx-btn-rim-gun); --btn-rim-press: var(--fx-btn-rim-gun-press); --btn-face: var(--fx-btn-face-gun);
  color: var(--ok); text-shadow: var(--fx-btn-engrave-plain);
}

/* ============================================================
   QUICK VIEW — shell in archive-product.php, body from inc/quick-view.php
   ============================================================ */
.quick-view-modal__backdrop { position: absolute; inset: 0; }
.quick-view-modal__content {
  position: relative; width: min(920px, 100%);
  max-height: calc(100vh - 2 * var(--s-4)); overflow-y: auto; /* lint-allow: vh — dialog cap, not a page lock */
}
.quick-view-modal__close { position: absolute; top: var(--s-2); right: var(--s-2); z-index: 1; }
.quick-view-modal__body { padding: var(--s-6); }
.quick-view-modal__loading { margin: 0; }

.qv-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.qv-gallery { display: flex; flex-direction: column; gap: var(--s-3); }
.qv-gallery__main {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  background: var(--ink-900); border: var(--bw) solid var(--line-1); border-radius: var(--r-2);
}
.qv-gallery__thumbs { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.qv-gallery__thumb {
  width: 56px; height: 56px; padding: 0; overflow: hidden;
  background: var(--ink-900); border: var(--bw) solid var(--line-1); border-radius: var(--r-1);
}
.qv-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.qv-gallery__thumb--active { border-color: var(--accent); }

.qv-info { display: flex; flex-direction: column; gap: var(--s-3); }
.qv-info__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.qv-info__meta:empty { display: none; }
.qv-info__chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px;
  background: var(--ink-900); border: var(--bw) solid var(--line-2); border-radius: var(--r-1);
  font-family: var(--font-display); font-size: var(--fs-13); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text);
}
.qv-info__chip--muted { color: var(--text-3); border-style: dashed; background: transparent; }
.qv-info__title {
  margin: 0; font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--fs-24); font-weight: 500; letter-spacing: 0.02em; line-height: var(--lh-snug);
}
.qv-info__cats { font-size: var(--fs-13); color: var(--text-3); }
.qv-info__price {
  font-family: var(--font-display); font-size: var(--fs-28); font-weight: 700;
  color: var(--gold-300); font-variant-numeric: tabular-nums; line-height: 1;
}
.qv-info__price del { color: var(--text-3); font-size: var(--fs-16); font-weight: 500; }
.qv-info__price ins { text-decoration: none; }
.qv-info__desc { font-size: var(--fs-14); color: var(--text-2); }
.qv-info__desc p { margin: 0 0 var(--s-2); }
.qv-info__skills, .qv-info__variations { display: flex; flex-direction: column; gap: var(--s-2); }
.qv-info__label {
  font-size: var(--fs-12); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}
.qv-skills-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.qv-skills-list .skill-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px;
  background: var(--ink-900); border: var(--bw) solid var(--line-2); border-radius: var(--r-1);
  font-family: var(--font-display); font-size: var(--fs-13); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text);
}
.qv-skills-list .skill-chip__qty { color: var(--text-3); font-style: normal; }

.qv-size-toggle {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border: var(--bw) solid var(--line-2); border-radius: var(--r-1); overflow: hidden;
}
.qv-size-option {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: var(--control-h); border-left: var(--bw) solid var(--line-2);
  color: var(--text-2); font-size: var(--fs-14); font-weight: 600; cursor: pointer;
}
.qv-size-option:first-child { border-left: 0; }
.qv-size-option input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.qv-size-option:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }
.qv-size-option:has(input:checked) { background: var(--bone-100); color: var(--ink-950); }
/* The same without :has() (Firefox 115 ESR): js/quick-view.js marks the label. */
.qv-size-option.is-checked { background: var(--bone-100); color: var(--ink-950); }
.qv-size-option--out { color: var(--text-3); text-decoration: line-through; }

.qv-info__actions { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
.qv-info__purchase { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.qv-info__stock { font-size: var(--fs-13); color: var(--ok); }
.qv-info__stock--out { color: var(--text-3); }
.qv-error { color: var(--err); }
.qv-add-to-cart .btn-add-to-cart__text,
.qv-add-to-cart .btn-add-to-cart__loading,
.qv-add-to-cart .btn-add-to-cart__success { display: inline-flex; align-items: center; gap: 6px; }
.qv-add-to-cart .btn-add-to-cart__text[hidden],
.qv-add-to-cart .btn-add-to-cart__loading[hidden],
.qv-add-to-cart .btn-add-to-cart__success[hidden] { display: none; }

/* ============================================================
   2-up
   ============================================================ */
@media (max-width: 1000px) {
  .ctd-shop__head { flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .ctd-shop__head--archive .ctd-shop__total { justify-self: start; }
  .shop-search-form__field { width: 100%; }
  .ctd-shop__landing { padding-block: var(--s-10); }
  .products-grid ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctd-shop__trust .ctd-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
  .qv-layout { grid-template-columns: 1fr; }
  .qv-gallery__main { aspect-ratio: 16 / 9; }
}

/* ============================================================
   PHONE
   ============================================================ */
@media (max-width: 640px) {
  .ctd-shop__landing { padding-block: var(--s-8); }
  .ctd-shop__archive { padding-block: var(--s-4) var(--s-10); }
  .ctd-shop__title { font-size: var(--fs-24); }
  .ctd-shop__spare { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .ctd-shop__trust .ctd-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .shop-toolbar { align-items: stretch; }
  .shop-search-form { width: 100%; }
  /* min-width: 0 here as well as on the strip below. The strip can only scroll
     its own overflow once the row holding it is allowed to be narrower than
     its content — otherwise the row stays 334px inside a 272px toolbar and the
     page scrolls instead. */
  .shop-toolbar__controls { justify-content: space-between; min-width: 0; }
  /* the pills scroll sideways rather than stacking four rows deep */
  /* min-width: 0 is what keeps that scroll INSIDE the strip. `overflow-x: auto`
     gives the strip its own scrollbar, but as a flex item its automatic minimum
     is still its content — so the strip stayed as wide as all four pills and
     the PAGE scrolled sideways instead of the pills. */
  .shop-toolbar__pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; margin-inline: calc(-1 * var(--s-1)); padding-inline: var(--s-1); }
  .shop-toolbar__pills::-webkit-scrollbar { display: none; }
  .shop-toolbar__controls .ctd-pill, .filter-toggle, .woocommerce-ordering select { min-height: var(--control-h); }
  /* 16px OR IOS ZOOMS THE PAGE. Safari magnifies the whole document when a
     control under 16px takes focus and does not zoom back out, so the sort
     dropdown would leave the shop at 1.2x with the toolbar off-screen. */
  .woocommerce-ordering select, .woocommerce-ordering .orderby { font-size: var(--fs-16); }

  .products-grid ul.products { grid-template-columns: 1fr; gap: var(--s-3); }

  .product-card__footer { gap: var(--s-3); }
  .btn-add-to-cart, .btn-view-options { min-height: var(--control-h); flex: 1; }
  .qty-btn, .qv-size-option, .size-toggle__option { min-height: var(--control-h); }
  .quick-view-modal__body { padding: var(--s-4); }
}

@media (prefers-reduced-motion: reduce) {
  .product-card:hover, .team-set-card__link:hover { transform: none; }
  .product-card:hover .product-card__image img { transform: none; }
}

/* ============================================================
   THE EVENT LOOK · the shop (2026-09-28)
   The landing's head and the four ways (components.css); the team
   picker's head is the Team Catalogue's (the price rule and "In every
   Full Squad"), and its cards are the catalogue's: the crest portrait,
   the name and the price on one line, one summary line, then the kit
   render with each base count on its piece. Demoed first as
   local-dev/overhaul/d-teams.html.
   ============================================================ */
.ctd-shop__head.ctd-sheethead { display: grid; align-items: end; }
@media (min-width: 900px) { .ctd-shop__head.ctd-sheethead--aside { grid-template-columns: minmax(0, 1fr) auto; } }
.ctd-shop__title.ctd-title--page { font-size: clamp(2.4rem, 5.6vw, 3.9rem); }
.ctd-shop__head-search { min-width: min(100%, 360px); }
.ctd-shop__every { margin: var(--s-2) 0 var(--s-4); }
.ctd-shop__custom { margin-top: var(--s-10); }

/* ---------- the catalogue card ---------- */
.products-grid--teams ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 1040px) { .products-grid--teams ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .products-grid--teams ul.products { grid-template-columns: 1fr; gap: var(--s-3); } }
.team-set-card__link {
  gap: 6px; padding: 10px 12px 14px; border-radius: 12px;
  background: var(--fx-team-card); box-shadow: var(--fx-rim-strong);
}
.team-set-card__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none;
  background: var(--fx-gold-underline);
}
.team-set-card__head { justify-content: flex-start; gap: 10px; min-width: 0; padding: 0 2px; }
.team-set-card__crest {
  width: 56px; height: 46px; border-radius: 0; background: none; border: 0;
  align-items: center; justify-content: center;
}
.team-set-card__crest .team-set-card__initials { font-size: var(--fs-24); line-height: 1; color: var(--gold-300); }
.team-set-card__link:hover .team-set-card__crest { box-shadow: none; }
.team-set-card__name {
  flex: 1; min-width: 0;
  font: 700 var(--fs-24)/1 var(--font-varsity); text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--text); text-wrap: balance; overflow-wrap: anywhere;
}
.team-set-card__price { margin-left: auto; flex: none; }
.team-set-card__sum {
  display: block; padding: 0 2px;
  font: 600 var(--fs-13)/1.35 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2);
}
.team-set-card__sum b { color: var(--violet-400); font-weight: 700; }
.team-set-card__kit { margin-top: 4px; }
.team-set-card__kit .ctd-kit__img { display: block; }
.team-set-card__kit img { display: block; }

/* The badge buttons' hover glow (2026-09-28), as on .ctd-btn. */
.btn-view-options:hover { filter: var(--fx-btn-cast-hot); }