/* ===========================================================================
   showroom-product.css — the product page's own rules.

   ⭐ ADD TO REQUEST (2026-09-10). The rooms used to carry a + Hold on every
   lot, which filed a WHOLE MATERIAL onto a request. A client does not ask for
   a material: they ask for this block, this bundle, this slab — or, where the
   material is sold in bulk, for a quantity of it. The ask moved here, beside
   the price, and this file dresses it.

   Only the new card lives here. The page's older helpers are still in its own
   <style> block; they were not mine to move.
   ========================================================================= */

/* The numbers are the gallery's numbers — same lot, same pieces — so the card
   can be read against the photos without a second naming scheme to learn. */
.ask-pieces { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-num {
  min-width: 38px; padding: 5px 9px;
  font: inherit; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  border-radius: 5px; cursor: pointer;
  border: 1px solid var(--color-control-border);
  background: var(--color-control); color: var(--color-text);
}
.ask-num:hover { border-color: var(--color-border-strong); }
/* Picked is a filled state, not a tinted border: at 38px wide a border change
   alone is a difference you have to hunt for across six of them. */
.ask-num.is-on {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}

/* How Many — the bulk half. The field is sized to four digits plus room for a
   thousands separator, never to the rail: a quantity box as wide as the card
   says nothing about what belongs in it (memory.md §9). */
.ask-qty__row { display: flex; align-items: center; gap: 8px; }
.ask-qty__in { width: 92px; flex: none; text-align: end; font-variant-numeric: tabular-nums; }
.ask-qty__unit { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }

/* What the client has said so far, in their own terms: the count first and
   tight against its word (memory.md §6), the pieces named on the line under
   it rather than crowded in beside it. */
.ask-said { margin: 12px 0 10px; font-size: 12px; color: var(--color-text-muted); }
.ask-said b { color: var(--color-text); font-weight: 600; }
.ask-said__which { display: block; margin-top: 2px; font-size: 11px; color: var(--color-text-subtle); }

/* A request is not a booking (D2), and the line that says so is the last thing
   read before the button is pressed — not a legal note hidden under it. */
.ask-note { margin: 10px 0 0; font-size: 11px; color: var(--color-text-subtle); }

/* Already asked for. The card keeps standing — a client may raise a quantity
   or pick another piece — so this is a statement, not a disabled state. It
   wears app.css's own .alert chassis; only the success colours are set here,
   because that sheet ships warn, info and danger variants and no success one. */
.ask-has {
  margin: 0 0 12px;
  font-size: 12px;
  background: var(--color-success-50);
  border-color: var(--color-success);
  color: var(--color-text);
}
.ask-has svg { color: var(--color-success); }
.ask-has a { font-weight: 600; }

/* ===========================================================================
   2026-09-14 — THE PIECE PAGE JOINS THE FAMILY'S DRESS (changes/0303)
   The body ran on app.css's cool cobalt console tokens under the family's
   warm navy-and-gold mast — two design systems on one page, and the seam
   showed. Every card, badge, button, field, table and modal below the
   header derives from the --color-* tokens, so ONE scoped remap re-dresses
   all of it in the room's own palette (the values are showroom.css's vip/
   luxe family: ivory page, warm-white card, sand hairlines, navy ink and
   action, gold for what is precious) without touching any behaviour.
   Scoped to this page's own body hook, so no console page changes.
   ========================================================================= */
body[data-client-surface] {
  /* Action + accents: the family's navy, not the console's cobalt. */
  --color-primary:      #16233F;
  --color-primary-600:  #1B2A4A;
  --color-primary-700:  #3A4A73;
  --color-primary-50:   #EDE8DC;
  --color-cta:          #16233F;
  --color-cta-600:      #1B2A4A;
  --color-cta-50:       #EDE8DC;
  /* Ground: the room's ivory paper and warm-white card. */
  --color-bg:           #F0EDE6;
  --color-body:         #F0EDE6;
  --bg-page-2:          #F0EDE6;
  --color-surface:      #FDFCF9;
  --color-surface-alt:  #F7F4ED;
  --color-border:       #E2DDD5;
  --color-border-strong:#CFC7B9;
  --color-table-head:   #F0EDE6;
  /* Controls sit on the page's own beige, never on the card's white
     (memory.md rule 13 — the same inversion the family's drawer fields use). */
  --color-control:        #F0EDE6;
  --color-control-border: #E2DDD5;
  --bg-input-1:           #F0EDE6;
  --border-input-1:       #E2DDD5;
  /* Ink: Navy Luxe's, softened the way the room softens it. */
  --color-text:        #16233F;
  --color-text-muted:  #6E7480;
  --color-text-subtle: #8A8F9B;
  --color-value-tnum:  #16233F;
  /* The room's reserved pairs; danger softened off alarm red (D14). */
  --color-success:    #2F6146;
  --color-success-50: #EDF4EF;
  --color-warn:       #8A5A1F;
  --color-warn-50:    #FBF3E8;
  --color-info:       #16233F;
  --color-info-50:    #EDE8DC;
  --color-danger:     #A85C4A;
  --color-danger-50:  #F6EAE5;
  --color-neutral:    #6E7480;
  --color-neutral-50: #EDE8DC;
  /* Warm shadows — the console's slate cast reads cold on ivory. */
  --shadow-sm: 0 1px 2px 0 rgb(28 26 23 / 0.05);
  --shadow:    0 1px 3px 0 rgb(28 26 23 / 0.06), 0 1px 2px -1px rgb(28 26 23 / 0.04);
  --shadow-md: 0 4px 6px -1px rgb(28 26 23 / 0.07), 0 2px 4px -2px rgb(28 26 23 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(28 26 23 / 0.08), 0 4px 6px -4px rgb(28 26 23 / 0.04);
}

/* The display voice: the family greets in Cormorant Garamond (already loaded
   by showroom.css), and the page's title line and card heads speak it too —
   the body stays in the console's workable sans. */
body[data-client-surface] .page-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0;
}
body[data-client-surface] .card-header h2,
body[data-client-surface] .card-header h3,
body[data-client-surface] .modal-header h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
}

/* Cards: the family's quiet hairline card — the room lifts a card with its
   ground and a hairline, not with a drop shadow. */
body[data-client-surface] .card {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: none;
}

/* The price is what is precious, so it wears the room's gold. */
body[data-client-surface] .sp-price { color: #B8862B; }

/* Picked and hovered states take the family's "yours" gold. */
body[data-client-surface] .pg-thumb.active {
  border-color: #C2A05A;
  box-shadow: 0 0 0 2px #F6E7BF;
}
body[data-client-surface] .btn-outline:hover { border-color: #C2A05A; }

/* ---- The family's measure -------------------------------------------------
   The mast's three bands run a centred 1180px column (--ps-measure, defined
   by showroom.css, which this page loads); the console's .page runs full
   bleed with a HARDCODED #f7f7f7 ground the token remap cannot reach. The
   body below the header keeps the bands' own edges and ground now, so the
   page reads as one column from mast to footer — the same geometry every
   other family page (.ps-room / .ps-wrap) holds. */
body[data-client-surface] { background: var(--color-bg); }
body[data-client-surface] .page {
  background: transparent;
  max-width: var(--ps-measure, 1180px);
  margin: 0 auto;
  padding: 22px var(--ps-space-4, 24px) 40px;
}
/* The family's foot is a centred line, not the console's right-parked one. */
body[data-client-surface] .page-footer { justify-content: center; }