/* ═══ EVENT INFO PAGE, SECTION 7: PRODUCTS ON SALE (window 14) ═════════════════
   The rows' base rules (.evp-tier-list, -row, -head, -name, -tag, -desc,
   -price, -caret, -panel, -incl) are already in event-page.css, which is the
   design's own event-page.css. This file adds what the prototype's oep.css
   layers on top for this section (oep.css 53, 112), scoped to #prices.

   Changes, and only these:
     - logical properties: the head's text-align and the price's "/ ticket" gap
       mirror in Arabic without a second rule;
     - the site's 28px body line-height restated as the design's (window 3's
       measurement: pills grew 10px without it);
     - a sold-out row greyed (Bible 9: "Sold out rows greyed"), the way the
       Dates table greys its sold-out row: name and price in the third ink;
     - a focus ring on the row's button, which the prototype does not draw.
   ═══════════════════════════════════════════════════════════════════════════ */

#prices .evp-tier-list { margin-top: 0; }
#prices .evp-tier-head { text-align: start; line-height: normal; }
#prices .evp-tier-head:focus { outline: none; }
#prices .evp-tier-head:focus-visible { outline: 2px solid var(--eip-ink); outline-offset: -2px; }
#prices .evp-tier-price .per { margin: 0; margin-inline-start: 2px; }
/* The description is organiser HTML: its own paragraphs lose their margins,
   and the row keeps the design's 2px above it (a first version zeroed that
   too, and every row came out 2px short -- measured, not seen). */
#prices .evp-tier-desc { line-height: 1.4; margin: 2px 0 0; }
#prices .evp-tier-desc * { line-height: inherit; margin: 0; }
#prices .evp-tier-incl li { line-height: 1.4; }
#prices .evp-tier-panel-label { line-height: normal; }

/* oep.css 53 */
#prices .evp-tier-tag.is-sold { background: var(--eip-red-soft); color: var(--eip-red-hover); }
#prices .oep-noincl { color: var(--eip-ink2); font-style: italic; }

#prices .evp-tier-row.is-sold .evp-tier-name,
#prices .evp-tier-row.is-sold .evp-tier-price,
#prices .evp-tier-row.is-sold .evp-tier-price .num { color: var(--eip-ink3); }

[dir="rtl"] #prices .evp-tier-name, [dir="rtl"] #prices .evp-tier-tag { letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  #prices .evp-tier-caret, #prices .evp-tier-row { transition: none; }
}