/* Product page styles — OWNED BY WP2 (product page: availability and identity).
   Loaded by src/views/layout.js only on /p/… pages (see pageAssets()); the pre-flight commit created this file
   empty so WP2 never has to touch the shared layout. Storefront tokens from tokens.css/base.css apply here.
   Blocks: the availability ladder, the price-break "on request" tier rows, the "Also sold as" cross-reference
   table and the "you searched X, we list Y" banner. */

/* ── Availability ladder ──────────────────────────────────────────────────────────────────────────────────────
   "12 ready to ship · 28 more within 7 business days · larger quantities on request".
   A list, not a sentence: a screen reader announces the number of rungs, and it wraps cleanly on a phone. */
.ladder { margin: 12px 0 4px; }
.ladder__title {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-2);
}
.ladder__list { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 0; list-style: none; }
.ladder__list > li { position: relative; font-size: var(--fs-sm); color: var(--text); }
/* The separator is decorative and generated, so it is never read out or copied as content. */
.ladder__list > li + li::before { content: "·"; margin-right: 10px; color: var(--text-muted); }
.ladder__rung--unconfirmed { color: var(--text-2); font-style: italic; }
.ladder__rest { color: var(--text-2); }
.ladder__note { margin: 6px 0 0; }

/* ── Quantity tiers we could not price ────────────────────────────────────────────────────────────────────────
   Muted, so a real price never reads as "on request" at a glance, and the link is a normal underlined link: it
   goes to the bulk-quote form with the quantity already filled in, and it works without JavaScript. */
.breaks__ask td { color: var(--text-2); }
.breaks__ask .price a { font-weight: 600; text-decoration: underline; }
.breaks__ask .save { font-weight: 400; color: var(--text-2); white-space: nowrap; }

/* ── Cross-reference ──────────────────────────────────────────────────────────────────────────────────────── */
.via-banner { margin-bottom: 16px; }
.crossref__table { width: 100%; border-collapse: collapse; }
.crossref__table th { text-align: left; font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; }
.crossref__table th,
.crossref__table td { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.crossref__table tr:last-child td { border-bottom: 0; }
.crossref__table .mono { white-space: nowrap; }

@media (max-width: 640px) {
  .ladder__list { flex-direction: column; gap: 2px; }
  .ladder__list > li + li::before { content: ""; margin: 0; }
}

/* ── Markets on the product page (v1.3, design §2.7) ──────────────────────────────────────────────────────────
   "Also in 2 other markets" (state A) and "Not available from EU stock" (state B). Each row: code, name, ready time
   and a quantity BAND, a labelled price and a POST switch button. Rows stack on a phone. */
.market-alt { margin: 12px 0; border-top: 1px solid var(--border); padding-top: 8px; }
.market-alt > summary { cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; min-height: 32px; }
.market-alt__list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.market-alt__row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--divider);
}
.market-alt__row:last-child { border-bottom: 0; }
.market-alt__main { display: flex; flex-direction: column; min-width: 0; }
.market-alt__name { font-size: var(--fs-sm); }
.market-alt__meta { font-size: var(--fs-xs); color: var(--text-2); }
.market-alt__price { font-size: var(--fs-sm); white-space: nowrap; }
.market-alt__row .market-switch-form { grid-column: 2 / -1; justify-self: start; }
.market-alt__lowest { margin-left: 4px; }
.market-elsewhere__title { font-size: var(--fs-lg); margin: 0 0 6px; }
.market-elsewhere .market-source { margin: 12px 0; }
@media (max-width: 640px) {
  .market-alt__row { grid-template-columns: auto 1fr; }
  .market-alt__price { grid-column: 2; white-space: normal; }
}