/* =============================================================================
   showroom-product-pieces.css — the piece page's photo card and its two-faced
   ask (owner, 2026-10-05, changes/0339).

   Linked AFTER the page's own <style>, so where a rule here restates one there
   (.pg-hero, .pg-thumbs) this one wins. It is a page sheet of its own rather
   than more lines in that <style> because src/client's product fidelity spec
   sweeps a fixed LINE WINDOW of showroom-product.html, and lines added above the
   page body move the window onto the mast.
   ============================================================================= */

/* ---- the photo card: the product, then its pieces ----
   ONE card replaces the standalone material photo and the "Available Slabs"
   gallery. The strip under the picture is a list of ITEMS — the product first,
   then every piece on show — and the picture steps through the PHOTOS of
   whichever item is picked, with the arrows and dots. */
.pg { position: relative; }
.pg-hero { background-position: center; }
.pg-hero-num[hidden] { display: none; }
.pg-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 0; background: rgba(15,23,42,0.55); color: #fff; cursor: pointer; }
.pg-nav:hover { background: rgba(15,23,42,0.78); }
.pg-nav svg { width: 18px; height: 18px; }
.pg-nav--prev { inset-inline-start: 10px; }
.pg-nav--next { inset-inline-end: 10px; }
.pg-nav[hidden], .pg-dots[hidden], .pg-scroll[hidden], .pg-price[hidden] { display: none; }
.pg-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; padding: 4px 7px; border-radius: 7px; background: rgba(15,23,42,0.45); }
.pg-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.55); cursor: pointer; }
.pg-dot.is-on { background: #fff; }

/* The strip is ONE row that scrolls sideways — a bundle of forty slabs is a
   carousel, not a wall of thumbnails. The arrows sit over its two ends and only
   appear when there is more strip than card. */
.pg-thumbs { flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 2px; }
.pg-thumbs::-webkit-scrollbar { display: none; }
.pg-thumbs[hidden] { display: none; }
.pg-scroll { position: absolute; bottom: 21px; width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--color-control-border); background: var(--color-control); color: var(--color-text); cursor: pointer; box-shadow: 0 1px 3px rgba(15,23,42,0.18); }
.pg-scroll svg { width: 15px; height: 15px; }
.pg-scroll--prev { inset-inline-start: -6px; }
.pg-scroll--next { inset-inline-end: -6px; }

/* The product's own thumb says so — it is the one tile in the strip that is
   not a piece. */
.pg-thumb--product .pg-tag { background: var(--color-primary); }

/* Under the heading: the picked piece's facts, then — where the showroom
   publishes prices — what it comes to. Second lines step down a point. */
.pg-price { margin-top: 2px; font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.pg-price b { color: var(--color-text); font-weight: 600; }
[data-pdt-gnote] { font-size: 12px; margin: 10px 0 0; }

/* ---- both faces of the ask ----
   A quantity OR named pieces — never both on one press. Whichever the buyer
   starts on, the other face greys out until it is emptied again. */
.ask-or { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; font-size: 11px; color: var(--color-text-subtle); }
.ask-or::before, .ask-or::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.ask-or[hidden], .ask-bdl[hidden] { display: none; }
.ask-qty__in:disabled, .ask-num:disabled { opacity: .45; cursor: not-allowed; }
.ask-num { min-width: 40px; }

/* A bundle picked by name: all of it, or some of its slabs off an end. */
.ask-bdl { display: grid; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 5px; border: 1px solid var(--color-control-border); background: var(--color-control); }
.ask-bdl__opt { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ask-bdl__opt input[type="radio"] { margin: 0; }
.ask-bdl__opt.is-off { color: var(--color-text-subtle); cursor: not-allowed; }
.ask-bdl__n { width: 64px; text-align: end; font-variant-numeric: tabular-nums; }
.ask-bdl__note { font-size: 11px; color: var(--color-text-subtle); }
/* memory.md rule 13: a field on a tinted box inverts back to white. */
.ask-bdl .input { background: var(--color-surface); }