/* ---------------------------------------------------------------------------
   Net-new components. Nothing here exists on the source, so there is no capture
   to match — each is designed to the source's own token system instead.

   Everything uses the source tokens (--accent, --border, --radius-sm, --text-muted)
   so it reads as part of the same system rather than a bolted-on widget.
   --------------------------------------------------------------------------- */

/* --- per-item warehouse chooser (PROJECT-BRIEF D3) ----------------------
   The source has no warehouse control at all — it never splits shipping. This
   sits directly above add-to-cart because the choice changes what the customer
   pays for delivery, so burying it below the fold would be a trap. */

.mps-warehouse {
  margin: 0 0 20px;
  padding: 16px 18px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
}

.mps-warehouse__label {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-heading);
}

.mps-warehouse__options { display: flex; gap: 10px; flex-wrap: wrap; }

.mps-warehouse__option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: var(--transition, 250ms ease);
}

.mps-warehouse__option:hover { border-color: var(--border-hover); }

.mps-warehouse__option input { accent-color: var(--accent); margin: 0; }

/* :has() gives the whole pill a selected state without any JS. Browsers without
   it still show the radio itself, so nothing breaks — it just looks plainer. */
.mps-warehouse__option:has(input:checked) {
  border-color: var(--accent);
  background: rgba(15, 15, 15, 0.04);
  color: var(--text-heading);
}

.mps-warehouse__option:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mps-warehouse__note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* --- PDP meta additions -------------------------------------------------
   The source's .product-meta holds only SKU and Category. Ours also carries the
   batch, cap colour and COA link that the source hides on /product-codes/. */

.meta-item--coa a {
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.meta-colour { font-style: normal; color: var(--text-muted); }

.meta-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* --- minimum-order row (STANDARDS rule 9) -------------------------------
   Shown under the cart totals so the shortfall is visible while there is still
   something the customer can do about it, rather than only erroring at payment. */

.mps-minimum-row th,
.mps-minimum-row td {
  color: var(--error, #a83838);
  font-size: 13px;
  font-weight: 500;
}

/* --- shop empty state ---------------------------------------------------- */

.shop-empty { text-align: center; padding: 80px 0; }
.shop-empty h2 { margin: 16px 0 8px; }
.shop-empty p { color: var(--text-muted); margin-bottom: 24px; }
.shop-empty .shop-search { max-width: 420px; margin: 0 auto; }

/* --- shop header --------------------------------------------------------- */

.shop-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.shop-actions .shop-search { margin: 0; }

@media (max-width: 992px) {
  .shop-actions { width: 100%; }
}

/* --- accessibility ------------------------------------------------------- */

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- PDP gallery height -------------------------------------------------
   The source's gallery holds a real square photo, so it needed no height rule.
   Ours holds an SVG placeholder, which has no intrinsic height and leaves a tall
   white gap under the image. Pin it square to match the source's proportions. */

.product-gallery .woocommerce-product-gallery__image,
.product-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* --- product codes table + COA library -----------------------------------
   Net-new. The source's equivalent is a wall of <p> tags behind a login; these
   are generated from the catalogue, so they are tabular and public. */

.mps-codes__intro,
.mps-codes__note { font-size: 14px; color: var(--text-muted); }
.mps-codes__note { margin-top: 16px; }

.mps-codes__table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  font-size: 14px;
}

.mps-codes__table th,
.mps-codes__table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.mps-codes__table thead th {
  background: var(--bg-surface, #e4e4e4);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-heading);
}

.mps-codes__table tbody tr:last-child td { border-bottom: 0; }
.mps-codes__table tbody tr:hover { background: var(--bg-card-hover, #f6f6f6); }

.mps-codes__table code {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
}
.mps-codes__table code.is-alt { font-weight: 400; color: var(--text-muted); }

.mps-codes__colour {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}

/* Tables do not reflow; let narrow screens scroll it rather than crush it. */
@media (max-width: 768px) {
  .mps-codes { overflow-x: auto; }
  .mps-codes__table { min-width: 560px; }
}

.mps-coa__list { list-style: none; padding: 0; margin: 0 0 28px; }

.mps-coa__list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.mps-coa__list li span { color: var(--text-muted); font-size: 13px; }

/* --- payment panel (thank-you + email) ---------------------------------- */

.mps-pay-panel {
  margin: 0 0 32px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
}

.mps-pay-panel h2 { font-size: 22px; margin: 0 0 12px; }
.mps-pay-amount { font-size: 15px; margin: 0 0 16px; }

.mps-pay-network {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 12px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(15, 15, 15, 0.05);
  border: 1px solid rgba(15, 15, 15, 0.1);
  font-size: 13px;
}
.mps-pay-network span { color: var(--text-muted); }

.mps-pay-address {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--bg, #ededed);
  margin-bottom: 14px;
}
.mps-pay-address > span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.mps-pay-address code {
  display: block;
  font-size: 15px;
  font-weight: 600;
  word-break: break-all;
  margin-bottom: 12px;
  color: var(--text-heading);
}

/* Amber, matching the source's own checkout warning box. Wrong network = lost
   funds, so this must not read as body copy. */
.mps-pay-warn,
.mps-crypto-warn {
  padding: 12px 14px;
  border: 1px solid #f59e0b;
  background: #fffbeb;
  color: #92400e;
  border-radius: var(--radius-sm, 8px);
  font-size: 13px;
  line-height: 1.55;
}

.mps-pay-final { margin-top: 20px; }
.mps-pay-final h3 { font-size: 16px; margin: 0 0 8px; }

/* --- checkout network chooser -------------------------------------------- */

.mps-crypto-networks { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }

.mps-crypto-network {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}
.mps-crypto-network:has(input:checked) {
  border-color: var(--accent);
  background: rgba(15, 15, 15, 0.04);
}
.mps-crypto-coin { font-weight: 600; color: var(--text-heading); }
.mps-crypto-net { color: var(--text-muted); font-size: 13px; }

/* --- kill WooCommerce's float grid --------------------------------------
   REQUIRED. WooCommerce ships `.woocommerce ul.products li.product { float:left;
   width:30.75%; margin-right:3.8% }` at specificity (0,3,2). The source's grid rule
   is `.products-grid, .products { display:grid }` at (0,1,0), so Woo wins and the
   cards revert to narrow floats that overflow their buttons.

   The source "solves" this with a long !important block (RECON-DESIGN §9). We match
   the specificity instead, and use !important only on the float properties Woo also
   sets from a stylesheet we do not control.

   The ::before/::after kill in chrome.css is still needed alongside this. */

.woocommerce ul.products,
ul.products.products-grid,
.warehouse-group .products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce ul.products li.product,
ul.products.products-grid li.product,
.warehouse-group .products-grid li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
  display: flex;
  flex-direction: column;
}

/* The card's info block should push the actions to the bottom so buttons line up
   across a row even when names wrap to two lines. */
.product-card__info { display: flex; flex-direction: column; flex: 1; }
.product-card__actions { margin-top: auto; }

/* Woo's own loop markup, if any theme part still emits it. */
.woocommerce ul.products li.product a img { margin: 0; }
.woocommerce ul.products li.product .button { margin-top: 0; }

@media (max-width: 992px) {
  .woocommerce ul.products,
  ul.products.products-grid,
  .warehouse-group .products-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
  .woocommerce ul.products,
  ul.products.products-grid,
  .warehouse-group .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Woo's clearfix pseudo-elements, at a specificity that actually beats Woo's own.
   `.woocommerce ul.products::before` is (0,2,2); the plain `.products-grid::before`
   rule in chrome.css is (0,1,1) and loses. When it loses, ::before becomes a GRID
   ITEM and shunts the whole first row one column to the right — which looks like a
   broken grid template rather than a stray pseudo-element. */

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce .products-grid::before,
.woocommerce .products-grid::after,
ul.products.products-grid::before,
ul.products.products-grid::after {
  content: none !important;
  display: none !important;
}