/* MAD Recovery store pages (Explore, item, Plus, orders, screening,
 * sign-up). Loaded after rehab_app_v4.css and built only on its tokens,
 * so all three themes (blue, light, classic) work with no color written
 * here. Logical properties throughout for right-to-left pages.
 * Versioned filename: module static files are cached for 7 days.
 * v2 (R4 review): question cards keep their padding and hold their legend,
 * the save button shows an outline heart until saved. */

/* ---------- search ---------- */
.st-search { display: flex; gap: 8px; align-items: center; margin-block: 6px 4px; }
.st-search input { flex: 1; min-width: 0; }
.st-search .icon-btn { width: 48px; height: 48px; }

/* ---------- form fields ---------- */
.field, .st-search input, .st-form input[type="text"], .st-form input[type="email"],
.st-form input[type="tel"], .st-form input[type="date"], .st-form select {
    width: 100%; min-height: 48px; border-radius: 14px; border: 1px solid var(--line-2);
    background: var(--card); color: var(--ink); padding-block: 10px; padding-inline: 14px;
    font: inherit; font-size: 16px; appearance: none; -webkit-appearance: none;
}
.st-form select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 36px; }
[dir="rtl"] .st-form select { background-position: 20px 50%, 15px 50%; }
.st-form input:focus, .st-form select:focus, .st-search input:focus { outline: 2px solid var(--gold-2); outline-offset: 1px; }
.st-form .lbl { display: block; font-weight: 700; font-size: 14px; margin-block: 16px 6px; }
.st-form .hint { color: var(--ink-3); font-size: 12px; margin-block-start: 4px; }
.st-form .err { color: var(--red); font-size: 13px; margin-block-start: 6px; }
.st-form .bad input, .st-form .bad select { border-color: var(--red); }
.st-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.st-form legend { padding: 0; }
/* A fieldset that is also a card (the safety questions) keeps the card's
 * padding and gap - ".st-form fieldset" above would zero them. */
.st-form fieldset.card { padding: 16px; margin-block: 0 12px; }
/* A legend sits on the fieldset's top edge by default, half outside the
 * card. Floated full width it flows inside like any first line. */
.st-form fieldset > legend { float: left; width: 100%; }
.st-form fieldset > legend + * { clear: both; }
.yn-q > legend { margin-block-end: 2px; }
.st-form fieldset > legend.lbl { margin-block: 16px 6px; }
.st-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 359px) { .st-two { grid-template-columns: minmax(0, 1fr); } }

/* Two-choice pills (sex, yes/no). The radio stays in the page for
 * keyboards and screen readers; the label is the 44px target. */
.yn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block-start: 10px; }
.yn input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.yn label { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--pill); border: 1.5px solid var(--line-2); background: var(--card-2); color: var(--ink-2); font-weight: 700; cursor: pointer; text-align: center; padding-inline: 10px; }
.yn input:checked + label { border-color: var(--gold); background: var(--gold-wash); color: var(--ink); }
.yn input:focus-visible + label { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.yn-q legend { font-weight: 700; font-size: 15px; line-height: 1.35; }
.yn-q .muted { margin-block-start: 4px; }

.st-check { display: flex; gap: 12px; align-items: flex-start; padding-block: 8px; min-height: 44px; cursor: pointer; }
.st-check input { width: 24px; height: 24px; margin: 0; accent-color: var(--gold); flex: none; }
.st-terms { margin-block-start: 10px; color: var(--ink-3); font-size: 13px; }
.st-terms summary { cursor: pointer; color: var(--gold-2); min-height: 44px; display: flex; align-items: center; }
.st-terms p { margin-block: 0 10px; }

/* ---------- item cards ---------- */
.st-card { width: 72%; max-width: 300px; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--line-2); color: var(--ink); display: flex; flex-direction: column; }
.st-card .media { aspect-ratio: 16 / 10; position: relative; }
.st-card .ph .soon { display: none; }
.st-card .st-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.st-card h3 { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.st-card .muted { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-kind { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.st-meta { display: flex; gap: 10px; color: var(--ink-3); font-size: 12px; margin-block-start: 2px; }
.st-foot { margin-block-start: auto; padding-block-start: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-flag { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 2; padding: 3px 10px; border-radius: var(--pill); background: var(--gold); color: var(--on-gold); font-size: 11px; font-weight: 800; letter-spacing: 0.4px; }
.st-price { font-weight: 800; font-size: 15px; color: var(--ink); }
.st-was { color: var(--ink-3); font-size: 12px; }
@media (min-width: 560px) { .st-card { width: 46%; } }

/* A row in a list (search results, saved, bundle contents). */
.st-row-item .txt .st-foot { padding-block-start: 6px; }

/* ---------- browse by area ---------- */
a.region { color: inherit; display: block; }
a.region .circ { transition: border-color 0.15s ease; }
a.region:hover .circ, a.region:focus-visible .circ { border-color: var(--gold); }
.st-areas .region { width: 104px; }
.st-areas .region .circ { width: 104px; height: 104px; }
.st-areas .region .circ span { width: 78px; height: 78px; }
.st-areas .region .circ svg { width: 48px; height: 48px; }

/* ---------- item detail ---------- */
.st-title-row { display: flex; align-items: flex-start; gap: 12px; }
.st-title-row .ex-title { flex: 1; min-width: 0; }
.icon-btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-2); background: var(--gold-wash); }
.st-bm svg { width: 22px; height: 22px; color: var(--gold-2); }
/* Not saved yet: an outline heart; saved: filled. */
.st-bm[aria-pressed="false"] svg path { fill: none; stroke: currentColor; stroke-width: 1.8; }
.st-bm[disabled] { opacity: 0.6; }
.st-phase { display: flex; justify-content: space-between; gap: 10px; padding-block: 10px; border-block-start: 1px solid var(--line-2); font-size: 14px; }
.st-phase:first-child { border-block-start: 0; }
.st-phase b { font-weight: 700; }
.st-phase span { color: var(--ink-3); white-space: nowrap; }
.st-price-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.st-price-card .st-price { font-size: 22px; }
.sticky-cta .btn-row { max-width: 608px; margin: 0 auto; }
.sticky-cta .btn-row .btn { margin: 0; }
.st-cta-note { text-align: center; color: var(--ink-3); font-size: 13px; padding-block: 6px; }

/* ---------- Plus ---------- */
.st-plus-hero { background: linear-gradient(160deg, var(--gold-wash), var(--card) 70%); border-color: var(--line); }
.st-plus-hero h2 { margin: 6px 0 8px; font-size: 22px; line-height: 1.2; }
.st-list { margin: 0; padding: 0; list-style: none; }
.st-list li { display: flex; gap: 10px; align-items: flex-start; padding-block: 6px; color: var(--ink-2); font-size: 14px; }
.st-list li svg { width: 18px; height: 18px; color: var(--ok); flex: none; margin-block-start: 2px; }
.st-plan { display: flex; flex-direction: column; gap: 10px; }
.st-plan-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.st-plan-top h3 { margin: 0; font-size: 17px; }
.st-plan .st-price { font-size: 20px; }

/* ---------- buy sheet ---------- */
.st-lines { margin-block: 12px 6px; }
.st-line { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; border-block-start: 1px solid var(--line-2); font-size: 14px; color: var(--ink-2); }
.st-line:first-child { border-block-start: 0; }
.st-total { display: flex; justify-content: space-between; align-items: baseline; padding-block: 10px; border-block-start: 1px solid var(--line); font-size: 15px; }
.st-total b { font-size: 20px; }
.st-qty { display: flex; align-items: center; justify-content: center; gap: 16px; margin-block-start: 12px; }
.st-qty button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink); font-size: 22px; font-weight: 700; cursor: pointer; }
.st-qty output { min-width: 32px; text-align: center; font-size: 20px; font-weight: 800; }
.sheet .opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sheet .opt:focus-within { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.sheet fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.sheet .btn + .btn { margin-block-start: 10px; }
.st-sheet-actions { margin-block-start: 16px; }

/* ---------- orders / subscription ---------- */
.st-order-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.st-order-head b { font-size: 16px; }
.st-kv { display: flex; justify-content: space-between; gap: 10px; padding-block: 7px; border-block-start: 1px solid var(--line-2); font-size: 14px; }
.st-kv span:first-child { color: var(--ink-3); }
.st-small-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 18px; border-radius: var(--pill); border: 1.5px solid var(--gold); color: var(--gold-2); font-weight: 700; font-size: 14px; margin-block-start: 10px; }
.pill.amber { background: var(--amber-wash-3); color: var(--amber); }

/* ---------- empty states ---------- */
.st-empty { text-align: center; padding: 26px 16px; }
.st-empty .ic { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; border: 2px solid var(--gold-ring); display: flex; align-items: center; justify-content: center; color: var(--gold-2); }
.st-empty .ic svg { width: 26px; height: 26px; }
.st-empty h3 { margin: 0 0 6px; font-size: 17px; }

/* ---------- sign-up ---------- */
.st-join .top { position: static; }
.st-join h1 { font-size: 26px; }
.st-join .lead { color: var(--ink-2); font-size: 15px; margin-block: 4px 12px; }
.st-done { text-align: center; padding-block: 28px 8px; }
.st-done .big-check { margin-block-end: 16px; }
.st-done h1 { font-size: 24px; margin: 0 0 8px; }
.st-done p { color: var(--ink-2); margin-block: 0 12px; }