/**
 * Price-zone styles for the [drr_prices] shortcode.
 *
 * Lifted VERBATIM from the approved mockup (drraghda_prices_mockup.html,
 * "PRICE LIST" block + the .container-narrow utility + the price-row responsive
 * rules). The ONLY addition is the design-token block below: the mockup defined
 * these custom properties in :root, but a shortcode cannot rely on that, so they
 * are scoped to .price-zone — they resolve identically and never leak to the
 * rest of the page.
 */

/* Design tokens used by the price zone (mockup :root subset, scoped). */
.price-zone {
  --ink: #1A1814;
  --bronze: #A77B4A;
  --bronze-soft: #D4B895;
  --rule: #D9CFB8;
  --grey: #6B6157;
  --grey-soft: #9A9089;
}

/* Layout utility the markup wraps the zone in (mockup line 47). */
.price-zone .container-narrow { max-width: 920px; margin: 0 auto; padding: 0 32px; }

/* ============ PRICE LIST ============ */
.price-zone { padding: 56px 0 80px; }
.price-cat { padding: 40px 0; border-top: 1px solid var(--rule); }
.price-cat:first-child { border-top: none; }
.price-cat-head { margin-bottom: 26px; }
.price-cat-num {
  font-family: 'Fraunces', serif; font-style: italic; font-size: 18px;
  color: var(--bronze); margin-bottom: 6px; display: block;
}
.price-cat-head h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 400; margin-bottom: 10px; }
.price-cat-desc { font-size: 16px; color: var(--grey); max-width: 680px; line-height: 1.6; }

.price-list { margin-top: 8px; }
.price-row { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; }
.price-row + .price-row { border-top: 1px solid rgba(217, 207, 184, 0.55); }
.price-row-body { flex: 0 1 auto; max-width: 60%; }
.price-name { font-weight: 500; font-size: 16.5px; color: var(--ink); }
.price-desc { font-size: 13.5px; color: var(--grey); line-height: 1.5; margin-top: 2px; }
.price-leader { flex: 1 1 auto; border-bottom: 1px dotted var(--bronze-soft); transform: translateY(-5px); min-width: 24px; }
.price-value {
  flex: 0 0 auto; font-weight: 500; font-size: 16.5px; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.price-value .suffix { font-size: 13px; color: var(--grey); font-weight: 400; }

/* price-less "Enquire in clinic" label — occupies the price slot, no figure */
.price-value.price-enquire {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bronze); font-weight: 500;
}

/* placeholder figure styling — clearly NOT a confirmed price */
.price-demo { color: var(--grey-soft); font-style: italic; font-weight: 400; }
.price-demo::before { content: ''; }

/* ladies/men variant — two figures on one treatment */
.price-variants { flex: 0 0 auto; display: flex; gap: 22px; white-space: nowrap; }
.price-variant { text-align: right; }
.price-variant .vlabel {
  display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bronze); font-weight: 600; margin-bottom: 1px;
}
.price-variant .vval { font-weight: 500; font-size: 16.5px; font-variant-numeric: tabular-nums; }

.price-footnote {
  margin-top: 18px; font-size: 13.5px; color: var(--grey-soft);
  font-style: italic; line-height: 1.55;
}

/* ============ RESPONSIVE (price rows) ============ */
@media (max-width: 600px) {
  .price-row { flex-wrap: wrap; }
  .price-row-body { max-width: 100%; flex: 1 1 100%; }
  .price-leader { display: none; }
  .price-value, .price-variants { margin-left: 0; }
}