/* AYF membership app, shared styles for /app and /admin.
   Tokens copied from astangastudio.dk/css/astanga-v2.css (not linked
   directly) so this app stays fully decoupled from the main site's
   stylesheet -- deliberate per the "separate everything" architecture. */
:root {
  --ink: #251f1d;
  --ink-soft: #5f5752;
  --paper: #fbf8f3;
  --warm: #f1ebe2;
  --soft: #f7f2eb;
  --wine: #5f1205;
  --wine-dark: #451008;
  --gold: #b18b4c;
  --line: rgba(37, 31, 29, 0.18);
  --white: #fff;
  --display: "Playfair Display", Georgia, serif;
  --sans: "Poppins", "DM Sans", Inter, system-ui, sans-serif;
  --radius: 0.25rem;
  --good: #2f6b3a;
  --bad: #8a2a1a;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.5; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; margin: 0 0 .5rem; }
a { color: var(--wine); }
.container { max-width: 720px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.container--wide { max-width: 1080px; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--white); }
.topbar__brand { font-family: var(--display); font-size: 1.15rem; }
.topbar__actions { display: flex; gap: .75rem; align-items: center; }
.topbar__greeting { font-size: .85rem; color: var(--ink-soft); }

.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; }
.card h2 { font-size: 1.2rem; margin-bottom: 1rem; }
.card--flush { padding: 0; overflow: hidden; }

/* One consistent product-row presentation for every "buy this" list (Subscription, Prepaid, Class pass,
   Events & workshops) -- name + detail line on the left, the action on the right. Decided 2026-09-24 so
   scrolling through the whole product overview reads as one interface, not a layout change partway down. */
.shop-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid var(--line); padding: .6rem 0; }
.shop-row__detail { color: var(--ink-soft); font-size: .82rem; }
.shop-row__actions { display: flex; align-items: center; gap: .5rem; flex: none; }

.button { display: inline-flex; align-items: center; justify-content: center; padding: .7rem 1.3rem; font: inherit; font-size: .85rem; font-weight: 600; border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.button--primary { background: var(--wine); color: var(--white); }
.button--primary:hover { background: var(--wine-dark); }
.button--outline { background: transparent; color: var(--wine); border-color: var(--wine); }
.button--outline:hover { background: var(--soft); }
.button--danger { background: transparent; color: var(--bad); border-color: var(--bad); }
.button--danger:hover { background: #fbeceb; }
.button:disabled { opacity: .5; cursor: not-allowed; }
.button--small { padding: .45rem .9rem; font-size: .78rem; }

form label { display: grid; gap: .35rem; font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 1rem; }
input, select, textarea { padding: .7rem .85rem; font: inherit; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); width: 100%; }
.field-hint { font-size: .75rem; font-weight: 400; color: var(--ink-soft); }
.form-error { color: var(--bad); font-size: .85rem; min-height: 1.2em; margin: 0 0 1rem; }
.form-success { color: var(--good); font-size: .85rem; min-height: 1.2em; margin: 0 0 1rem; }

.badge { display: inline-block; padding: .15rem .6rem; font-size: .72rem; font-weight: 700; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.badge--active { background: #e3f1e5; color: var(--good); }
.badge--paused { background: #fdf1de; color: #9a6a10; }
.badge--cancelled, .badge--expired { background: #f3e2da; color: var(--bad); }
.badge--pending { background: var(--soft); color: var(--ink-soft); }

table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .65rem .5rem; border-bottom: 1px solid var(--line); }
th { color: var(--ink-soft); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; }

.sched-row { cursor: pointer; }
.sched-row:hover { background: var(--soft); }
.sched-row.is-expanded { background: var(--soft); }
tr.roster-row td { background: var(--paper); padding: 1rem; border-bottom: 2px solid var(--line); }
table.roster-inline { font-size: .85rem; }
table.roster-inline th, table.roster-inline td { padding: .45rem .5rem; }

.notice { padding: .9rem 1.1rem; border-radius: var(--radius); font-size: .88rem; margin-bottom: 1.25rem; }
.notice--info { background: var(--soft); color: var(--ink); }
.notice--warn { background: #fdf1de; color: #6b4a09; }

.plan-photo { width: 88px; height: 88px; border-radius: 999px; object-fit: cover; background: var(--soft); border: 1px solid var(--line); }
.profile-photo-row { display: flex; gap: 1.5rem; align-items: center; margin-bottom: 1.5rem; }
.profile-photo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.profile-photo-actions .field-hint { flex-basis: 100%; margin: 0; }
@media (max-width: 760px) {
  /* Narrow phones: the photo stays full size, but "Change photo"/"Remove" drop from full outline buttons to the
     same small bold-underlined text-link treatment as .link-action (admin roster Check-in/Undo), so they read as
     secondary controls that don't compete with the photo for space. */
  .profile-photo-actions .button--outline {
    background: none; border: none; padding: .5rem .25rem; margin: 0 -.25rem; font-weight: 700;
    font-size: .82rem; color: var(--wine); text-decoration: underline; min-height: 2rem; width: auto;
  }
}
.hint-list { font-size: .82rem; color: var(--ink-soft); margin: .5rem 0 0; padding-left: 1.1rem; }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.5rem; font-size: .9rem; }
.summary-grid dt { color: var(--ink-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; }
.summary-grid dd { margin: .15rem 0 0; }

/* Same plain-text, underline-on-hover/active treatment as the member
   app's nav (.member-nav below), so the admin area's own top nav (used on
   every admin page, plus login.html's Sign in/Create account toggle)
   matches it instead of the old wide pill buttons, which wrapped across
   two lines once "Archived" was added to an already-long tab list. */
.tabs { display: flex; align-items: baseline; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.5rem; font-size: .85rem; }
.tabs a { color: var(--ink-soft); text-decoration: none; padding-bottom: .2rem; border-bottom: 1px solid transparent; }
.tabs a:hover, .tabs a:focus-visible { color: var(--ink); border-bottom-color: var(--line); }
.tabs a.is-active { color: var(--wine); font-weight: 600; border-bottom-color: var(--wine); }

/* Top nav shared by every member-app page (see AYF.renderTopbar in
   js/ays-app.js). Plain text, not pill buttons, so all 5 items stay on one
   line even on a narrower desktop window. */
.member-nav { display: flex; align-items: baseline; gap: 1.25rem; flex-wrap: wrap; padding: .6rem 0 .9rem; font-size: .82rem; white-space: nowrap; }
.member-nav a { color: var(--ink-soft); text-decoration: none; padding-bottom: .2rem; border-bottom: 1px solid transparent; }
.member-nav a:hover, .member-nav a:focus-visible { color: var(--ink); border-bottom-color: var(--line); }
.member-nav a.is-active { color: var(--wine); font-weight: 600; border-bottom-color: var(--wine); }
.member-nav__soon { color: var(--ink-soft); opacity: .6; padding-bottom: .2rem; }
.member-nav__soon small { font-size: .78em; }

/* ------------------------------------------------------------------------------------------------------------
   Mobile member navigation (hamburger + dropdown panel), shared by every page via AYF.renderTopbar. Same 760px
   breakpoint already used for the admin hamburger (2026-10-01) -- one number, not a second arbitrary one. Closed
   state adds no visible height beyond the ordinary header; open state is a simple panel anchored to it, not a
   separate app-style overlay.
------------------------------------------------------------------------------------------------------------- */
.topbar { position: relative; }
.member-nav-toggle-btn {
  display: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--line); border-radius: 6px;
  background: var(--white); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
}
.member-nav-toggle-btn span { display: block; width: 1.1rem; height: 2px; background: var(--ink); border-radius: 1px; }
.member-nav-panel { display: none; }
@media (max-width: 760px) {
  .member-nav, #ayf-signout-btn, .topbar__greeting { display: none; }
  .member-nav-toggle-btn { display: inline-flex; }
  .member-nav-panel {
    display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 12px 30px rgba(37, 31, 29, .12);
    padding: .5rem 1.25rem 1rem;
  }
  .member-nav-panel[hidden] { display: none; }
  .member-nav-panel nav { display: flex; flex-direction: column; }
  .member-nav-panel nav a, .member-nav-panel nav .member-nav__soon {
    padding: .85rem .25rem; font-size: .92rem; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line);
  }
  .member-nav-panel nav a.is-active { color: var(--wine); font-weight: 600; }
  .member-nav-panel nav > :last-child { border-bottom: none; }
  .member-nav-panel hr { border: none; border-top: 1px solid var(--line); margin: .4rem 0; }
  .member-nav-panel__signout {
    display: block; width: 100%; text-align: left; padding: .85rem .25rem; margin: 0; border: none; background: none;
    font: inherit; font-size: .92rem; font-weight: 600; color: var(--wine); cursor: pointer;
  }
}

/* Shared admin design-system additions (pre-Phase-3 refinement): a modal for
   consequential confirmations, a stat tile for the Overview page, a
   calendar/week view sharing the public schedule widget's visual language,
   a view-toggle control, progressive-disclosure sections, and photo
   thumbnails for Class Type/Teacher images. Reused across every admin page
   rather than redefined per page. */
.modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(37,31,29,.45); }
.modal-overlay[hidden] { display: none !important; }
.modal { position: relative; width: 100%; max-width: 30rem; max-height: 85vh; overflow-y: auto; padding: 1.75rem; border-radius: .75rem; background: var(--white); box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.modal h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.modal__close { position: absolute; top: .9rem; right: .9rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; background: var(--white); cursor: pointer; font-size: 1rem; line-height: 1; color: inherit; }
.modal__changes { margin: 1rem 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.modal__changes li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.modal__changes li span:first-child { color: var(--ink-soft); }
.modal__actions { display: flex; gap: .6rem; margin-top: 1.25rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.5rem; }
.stat-tile { padding: 1.1rem 1.25rem; background: var(--white); }
.stat-tile__value { display: block; font-family: var(--display); font-size: 1.9rem; font-weight: 500; line-height: 1; }
.stat-tile__label { display: block; margin-top: .35rem; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }

.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: .2rem; gap: .2rem; margin-bottom: 1rem; }
.view-toggle button { border: none; background: none; padding: .4rem 1rem; border-radius: 999px; font: inherit; font-size: .82rem; cursor: pointer; color: var(--ink-soft); }
.view-toggle button.is-active { background: var(--wine); color: var(--white); }
.view-toggle button:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
/* Schedule | Bookings | Open Space (app/schedule.html). Open Space is an ACTION that shares the pill with the two views, so it is set apart by a thin divider and its
   own colour and is never the filled "selected view". The three segments are sized by their text and share the spare width, so the row stays ONE row at 320px
   (the widest case, "✓ Open Space" in Danish, needs about 266px of the 280px available). Members without Open Space see the ordinary two-option pill. */
.view-toggle--with-action { display: flex; width: 100%; max-width: 26rem; gap: .1rem; }
.view-toggle--with-action button { flex: 1 1 auto; min-width: 0; padding: .45rem .5rem; text-align: center; white-space: nowrap; }
.view-toggle button.view-toggle__action { position: relative; margin-left: .3rem; color: var(--wine); font-weight: 600; }
.view-toggle button.view-toggle__action::before { content: ""; position: absolute; left: -.2rem; top: 24%; bottom: 24%; width: 1px; background: var(--line); }
.view-toggle button.view-toggle__action.is-done { background: rgba(47, 107, 58, .10); color: var(--good, #2f6b3a); }
@media (max-width: 480px) {
  .view-toggle--with-action button { padding: .45rem .3rem; font-size: .8rem; }
}

.cal-panel { position: relative; padding: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--white); box-shadow: 0 12px 40px rgba(62,42,33,.06); }
.cal-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.25rem; }
.cal-nav button { width: 2.1rem; height: 2.1rem; border: 1px solid var(--line); border-radius: 999px; background: none; cursor: pointer; font-size: 1rem; }
.cal-nav__label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .75; min-width: 11em; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-day { padding: 0 .55rem; border-left: 1px solid var(--line); min-height: 2rem; }
.cal-day:first-child { border-left: none; padding-left: 0; }
.cal-day:last-child { padding-right: 0; }
.cal-day__head { margin-bottom: .65rem; padding: .3rem .4rem; border-radius: .4rem; text-align: center; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; opacity: .7; }
.cal-day.is-today .cal-day__head { background: var(--wine-dark); color: var(--white); opacity: 1; }
.cal-day__dow { display: block; }
.cal-day__date { display: block; margin-top: .15rem; font-size: .88rem; letter-spacing: 0; text-transform: none; }
/* A moon day: the reason a day has no classes. Not a class, so it carries no booking or check-in count. */
.cal-moon { margin: 0 0 .5rem; padding: .55rem .5rem; border-radius: .5rem; background: rgba(138, 107, 31, .1); color: #8a6b1f; font-size: .78rem; font-weight: 600; text-align: center; }
/* A class that observes moon days but is scheduled on one: surfaced for Admin, never removed automatically. */
.cal-item--moon-conflict { padding: .6rem .45rem; border-radius: .5rem; background: rgba(161, 58, 46, .06); box-shadow: inset 0 0 0 1px rgba(161, 58, 46, .3); }
.cal-item__warn { display: block; margin-top: .3rem; font-size: .68rem; font-weight: 600; line-height: 1.35; color: #a13a2e; }
.cal-item { display: flex; align-items: flex-start; gap: .5rem; width: 100%; padding: .6rem 0; border: none; border-top: 1px solid var(--line); background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.cal-day .cal-item:first-of-type { border-top: none; }
.cal-item:hover .cal-item__name { color: var(--wine); }
.cal-dot { flex: none; width: 7px; height: 7px; margin-top: .4rem; border-radius: 50%; }
.cal-item__time { display: block; font-size: .68rem; opacity: .6; font-variant-numeric: tabular-nums; }
.cal-item__name { display: block; margin-top: .1rem; font-size: .82rem; font-weight: 600; transition: color .15s ease; }
.cal-item__meta { display: block; margin-top: .15rem; font-size: .68rem; opacity: .6; line-height: 1.4; }
@media (max-width: 860px) {
  .cal-grid { display: block; }
  .cal-day { border-left: none; padding: 0; margin-bottom: .9rem; }
  .cal-day__head { display: flex; align-items: baseline; gap: .5rem; text-align: left; }
  .cal-day__date { margin-top: 0; }
}

details.disclosure { border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .75rem; }
details.disclosure summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--wine); list-style: none; }
details.disclosure summary::-webkit-details-marker { display: none; }
details.disclosure summary::before { content: "+ "; }
details.disclosure[open] summary::before { content: "\2212 "; }
details.disclosure > div { margin-top: .75rem; }

.type-photo { width: 100%; max-width: 220px; aspect-ratio: 16/9; object-fit: cover; border-radius: .5rem; background: var(--soft); border: 1px solid var(--line); display: block; }
.photo-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }

[hidden] { display: none !important; }

/* ------------------------------------------------------------------------------------------------------------
   Mobile nav (hamburger). Scoped with :has() to topbars that actually carry the toggle checkbox, so pages not
   yet updated with the checkbox/label markup are completely unaffected -- their .tabs keeps behaving exactly as
   before at any width. Desktop is untouched either way; only <=760px changes.
------------------------------------------------------------------------------------------------------------- */
.nav-toggle { display: none; }
.nav-toggle-btn { display: none; }
@media (max-width: 760px) {
  .nav-toggle-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; font-size: 1.3rem; line-height: 1; cursor: pointer;
    border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink);
  }
  .topbar:has(.nav-toggle) { flex-wrap: wrap; row-gap: .6rem; }
  .topbar:has(.nav-toggle) .topbar__brand { margin-right: auto; }
  .topbar:has(.nav-toggle) .topbar__actions { order: 2; }
  .topbar:has(.nav-toggle) .nav-toggle-btn { order: 3; margin-left: .5rem; }
  .topbar:has(.nav-toggle) .tabs { order: 4; }
  .topbar:has(.nav-toggle) .tabs {
    display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: .1rem; margin: .25rem 0 0;
  }
  .topbar:has(.nav-toggle) .tabs a { display: block; width: 100%; padding: .55rem .25rem; }
  .nav-toggle:checked ~ .tabs { display: flex; }
}

/* ------------------------------------------------------------------------------------------------------------
   Roster desktop/mobile split (schedule.js class roster, member.js, event-roster.js). Desktop keeps the full
   table; mobile gets compact cards prioritising name / booked-with / check-in, secondary details tucked behind
   "More". Both are built from the same already-fetched data -- toggled purely by CSS, never a second query.
------------------------------------------------------------------------------------------------------------- */
.roster-mobile, .sched-cards, .people-cards { display: none; }
.link-action {
  background: none; border: none; padding: .5rem .25rem; margin: -.5rem -.25rem; font: inherit; font-weight: 700;
  font-size: .82rem; color: var(--wine); cursor: pointer; text-decoration: underline; min-height: 2rem;
}
@media (max-width: 760px) {
  .roster-desktop, #sched-table, .people-table { display: none; }
  .roster-mobile, .sched-cards, .people-cards { display: block; }

  .sched-card, .roster-card, .people-card {
    border: 1px solid var(--line); border-radius: 8px; padding: .75rem .9rem; margin-bottom: .6rem; background: var(--white);
  }
  .sched-card { cursor: pointer; }
  .sched-card.is-expanded { border-color: var(--wine); }
  .sched-card__top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .8rem; }
  .sched-card__name { font-weight: 600; margin-top: .2rem; }
  .sched-card__meta { font-size: .8rem; color: var(--ink-soft); margin-top: .15rem; }
  .roster-detail-mobile { margin: -.4rem 0 .6rem; padding: 0 .2rem; }

  .roster-card__row { margin-bottom: .3rem; }
  .roster-card__sub { font-size: .85rem; color: var(--ink-soft); }
  .roster-card__action { margin-top: .4rem; }
  .roster-card__more summary { font-size: .78rem; color: var(--ink-soft); cursor: pointer; }
  .roster-card__more div { font-size: .85rem; padding: .15rem 0; }

  .people-card__row { margin-bottom: .3rem; }
  .people-card__name { font-weight: 600; }
  .people-card__sub { font-size: .85rem; color: var(--ink-soft); }
  .people-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }

  /* Admin data tables marked class="stack-mobile" (labels filled in by js/admin-table-stack.js): each row becomes a
     card, first cell as its heading, other cells as "LABEL value" lines, the unlabelled action cell last. */
  table.stack-mobile, table.stack-mobile tbody, table.stack-mobile tr, table.stack-mobile td { display: block; width: 100%; }
  table.stack-mobile thead { display: none; }
  table.stack-mobile tr { padding: .75rem .9rem; border-bottom: 1px solid var(--line); }
  table.stack-mobile tr:last-child { border-bottom: none; }
  table.stack-mobile td { border: none; padding: .15rem 0 .15rem 6.5rem; text-indent: -6.5rem; overflow-wrap: anywhere; text-align: left; }
  table.stack-mobile td > * { text-indent: 0; }
  table.stack-mobile td { white-space: normal !important; }
  table.stack-mobile td::before {
    content: attr(data-label); display: inline-block; width: 6.5rem; text-indent: 0; padding-right: .5rem; vertical-align: top;
    color: var(--ink-soft); font-size: .7rem; text-transform: uppercase; letter-spacing: .02em;
  }
  table.stack-mobile td:first-child { padding-left: 0; text-indent: 0; font-weight: 600; font-size: .95rem; }
  table.stack-mobile td:first-child::before, table.stack-mobile td[data-label=""]::before, table.stack-mobile td:not([data-label])::before { content: none; }
  table.stack-mobile td[data-label=""], table.stack-mobile td:not([data-label]) { padding-left: 0; text-indent: 0; padding-top: .4rem; }
  table.stack-mobile td[data-label=""] .button, table.stack-mobile td:not([data-label]) .button {
    background: none; border: none; padding: .5rem .25rem; margin: -.25rem .75rem -.25rem -.25rem; min-height: 2rem;
    font-size: .82rem; font-weight: 700; color: var(--wine); text-decoration: underline; width: auto;
  }
  table.stack-mobile td[colspan] { padding-left: 0; text-indent: 0; font-weight: 400; }
}

/* ------------------------------------------------------------------------------------------------------------
   Buy & sign up (app/shop.html): section jump links, and an event as one card with its purchase options below.
   Mobile first: on a phone each option shows its name and what it covers, then price + (quantity) + button on one
   line underneath; from 761px up the same option sits on a single row.
------------------------------------------------------------------------------------------------------------- */
.shop-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1rem; }
.shop-jump a { padding: .4rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--wine); font-size: .82rem; font-weight: 600; text-decoration: none; }
.shop-section-heading { font-size: 1.4rem; margin: 2rem 0 .75rem; scroll-margin-top: 1rem; }
.shop-section-heading.is-targeted, .is-targeted { box-shadow: 0 0 0 3px var(--gold); border-radius: var(--radius); }
.event-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1.25rem; overflow: hidden; scroll-margin-top: 1rem; }
.event-card__head { padding: 1rem 1.1rem; background: var(--soft); }
.event-card__head h3 { margin: 0; font-size: 1.15rem; }
.event-card__meta { margin: .25rem 0 0; color: var(--ink-soft); font-size: .85rem; }
.event-card__options { padding: 0 1.1rem; }
.event-option { display: flex; flex-direction: column; gap: .55rem; padding: .85rem 0; border-top: 1px solid var(--line); }
.event-option:first-child { border-top: none; }
.event-option__text { display: flex; flex-direction: column; gap: .1rem; }
.event-option__buy { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.event-option__price { margin-right: auto; }
.event-option__buy select { width: auto; padding: .3rem .5rem; }
@media (min-width: 761px) {
  .event-option { flex-direction: row; justify-content: space-between; align-items: center; gap: 1rem; }
  .event-option__price { margin-right: .5rem; }
}