/* Monsters VS Guards store. Tokens and shared components: brand.css (mvg-agent/docs/design-chart.md). */

main { display: block; outline: none; min-height: 60vh; }
.narrow { max-width: 480px; margin: var(--space-7) auto; }
.empty { color: var(--text-muted); padding: var(--space-5); border: 2px dashed var(--border); border-radius: var(--radius-l); text-align: center; }
.breadcrumbs { font-size: var(--fs-s); color: var(--text-muted); margin: var(--space-5) 0; }
.breadcrumbs a { color: var(--text-muted); }
.lede { font-size: var(--fs-l); color: var(--text-muted); max-width: 62ch; }
.flashes { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
input[type="password"] { width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); font: inherit; color: var(--text); background: var(--surface); border: 2px solid var(--border-strong); border-radius: var(--radius-m); }

/* ---------------------------------------------------------------- the store's own header */
/* Desktop: logo, Cart (left, beside the logo), categories, then currency/theme/account.
   Phones and tablets (< 960px): the ≡ menu, the logo and the account; the categories live in the
   full-screen menu and the cart in the bar fixed at the bottom. */
.store-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: saturate(1.4) blur(10px); }
.store-header__bar { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; }
.store-header__brand { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; text-decoration: none; }
.store-header__label { font-family: var(--font-pixel); font-weight: 700; font-size: var(--fs-l); color: var(--text); padding: 2px var(--space-2); border-radius: var(--radius-s); background: var(--monster-soft); }
.nav-toggle { display: none; flex: none; text-decoration: none; }
.store-nav { flex: 1; min-width: 0; }
.store-nav ul { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.store-nav a { display: block; white-space: nowrap; padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); color: var(--text-muted); font-weight: 600; text-decoration: none; font-size: var(--fs-s); }
.store-nav a:hover, .store-nav a[aria-current] { color: var(--text); background: var(--surface-2); }
.store-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.currency select { min-height: 36px; width: auto; padding: var(--space-1) var(--space-2); font-weight: 600; }
.currency { display: inline-flex; gap: var(--space-1); }
.currency--single { font-weight: 600; font-size: var(--fs-s); color: var(--text-muted); padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-m); }
.cart-link { position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-m); color: var(--text); font-weight: 600; text-decoration: none; border: 2px solid var(--border); background: var(--surface); }
.cart-link:hover, .cart-link[aria-current] { border-color: var(--monster-fill); }
.cart-link svg { width: 20px; height: 20px; }
.cart-link__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--monster-fill); color: var(--on-monster); font-size: var(--fs-xs); font-weight: 700; }
.account-menu { position: relative; }
.account-menu summary { list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-m); border: 2px solid var(--border); cursor: pointer; font-weight: 600; background: var(--surface); }
.account-chip:hover, .account-menu[open] .account-chip { border-color: var(--monster-fill); }
.account-chip .head { background: var(--surface-3); }
.account-chip__name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chip__unit { color: var(--text-muted); font-weight: 400; font-size: var(--fs-s); }
.account-menu__panel { position: absolute; right: 0; top: calc(100% + var(--space-2)); min-width: 220px; padding: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-2); z-index: 60; }
.account-menu__panel ul { list-style: none; margin: 0; padding: 0; }
.account-menu__panel a, .account-menu__logout { display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); color: var(--text); text-decoration: none; font: inherit; background: none; border: 0; cursor: pointer; }
.account-menu__panel a:hover, .account-menu__logout:hover { background: var(--surface-2); }
.account-menu__panel form { border-top: 1px solid var(--border); margin-top: var(--space-2); padding-top: var(--space-2); }
@media (max-width: 1080px) { .store-nav { display: none; } }
@media (max-width: 959px) {
  .nav-toggle { display: inline-grid; }
  .store-header .cart-link { display: none; }
  .store-header__bar { gap: var(--space-2); }
  .store-header .wordmark { height: 30px; }
  .account-chip__name, .account-chip__unit { display: none; }
  .store-header__actions { gap: var(--space-1); }
}
@media (max-width: 480px) { .store-header__label { display: none; } }
@media (max-width: 380px) { .currency, .theme-toggle { display: none; } }

/* ---------------------------------------------------------------- the full-screen store menu (phones) */
.nav-drawer { display: none; }
@media (max-width: 959px) {
  .nav-drawer {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 100;
    background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    transform: translateX(-100%); visibility: hidden;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 220ms;
  }
  .nav-drawer.is-open, .nav-drawer:target {
    transform: none; visibility: visible;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
  }
}
@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-drawer.is-open, .nav-drawer:target { transition: none; }
}
.nav-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 60px; padding: 0 var(--gutter); border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; }
.nav-drawer__title { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-family: var(--font-pixel); font-weight: 700; font-size: var(--fs-l); }
.nav-drawer__close { text-decoration: none; }
.nav-drawer__body { padding: var(--space-4) var(--gutter) var(--space-7); }
.nav-drawer__heading { font-family: var(--font-ui); font-size: var(--fs-s); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin: var(--space-4) 0 var(--space-2); }
.nav-drawer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.nav-drawer__list a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 52px; padding: 0 var(--space-4); border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: var(--font-pixel); font-size: var(--fs-xl); font-weight: 600; text-decoration: none; }
.nav-drawer__list a:hover { border-color: var(--monster-fill); }
.nav-drawer__list--small a { min-height: 44px; font-family: var(--font-ui); font-size: var(--fs-m); }
body.nav-open { overflow: hidden; }

/* ---------------------------------------------------------------- the cart bar (phones) */
.cart-bar { display: none; }
@media (max-width: 959px) {
  .cart-bar {
    display: flex; align-items: center; gap: var(--space-3);
    position: fixed; left: var(--gutter); right: var(--gutter); z-index: 40;
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    min-height: 56px; padding: 0 var(--space-4);
    border-radius: var(--radius-l); background: var(--monster-fill); color: var(--on-monster);
    box-shadow: var(--shadow-2), var(--bevel); font-weight: 700; text-decoration: none;
    transition: transform 200ms ease, opacity 200ms ease;
  }
  .cart-bar:hover { background: var(--monster-fill-hover); }
  .cart-bar:focus-visible { outline-color: var(--text); }
  .cart-bar svg { width: 22px; height: 22px; flex: none; }
  .cart-bar__count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--on-monster); color: var(--monster-fill); font-size: var(--fs-xs); }
  .cart-bar__total { margin-left: auto; font-weight: 600; }
  .cart-bar__go { margin-left: var(--space-1); }
  /* The footer is in view: the bar steps out of its way (store.js), so nothing covers it. */
  .cart-bar.is-away { transform: translateY(calc(100% + var(--space-5) + env(safe-area-inset-bottom))); opacity: 0; pointer-events: none; }
  /* Room below the last products, so the bar never covers a button. */
  body.has-cart-bar main { padding-bottom: calc(56px + var(--space-6) + env(safe-area-inset-bottom)); }
}
@media (max-width: 959px) and (prefers-reduced-motion: reduce) { .cart-bar { transition: none; } }

/* ---------------------------------------------------------------- catalogue */
.store-layout { display: grid; gap: var(--space-5); padding: var(--space-5) 0 var(--space-7); }
@media (min-width: 960px) { .store-layout { grid-template-columns: 220px 1fr; gap: var(--space-6); } }
.store-rail { display: grid; gap: var(--space-4); align-content: start; }
@media (min-width: 960px) { .store-rail { position: sticky; top: 84px; align-self: start; } }
@media (max-width: 959px) { .store-rail { display: none; } }
.store-rail__menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); }
.store-rail__title { padding: var(--space-3) var(--space-4) var(--space-1); margin: 0; font-family: var(--font-pixel); font-size: var(--fs-l); font-weight: 600; }
.store-rail__menu ul { list-style: none; margin: 0; padding: 0 var(--space-2) var(--space-2); }
.store-rail__menu a { display: flex; justify-content: space-between; padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); color: var(--text); text-decoration: none; }
.store-rail__menu a:hover { background: var(--surface-2); }
.store-rail__count { color: var(--text-faint); font-size: var(--fs-s); }
.rail-card { display: grid; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-l); background: linear-gradient(135deg, var(--monster-soft), var(--guard-soft)); border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.rail-card span { color: var(--text-muted); font-size: var(--fs-s); }
.rail-card:hover { border-color: var(--monster-fill); }
.store-intro { margin-bottom: var(--space-5); }
.store-intro h1 { margin-bottom: var(--space-2); }
.booster-live { margin-bottom: var(--space-4); }
.shelf { scroll-margin-top: 84px; margin-bottom: var(--space-7); }
.shelf__head { margin-bottom: var(--space-4); }
.shelf__head h2 { margin-bottom: var(--space-1); }
.shelf__head p { color: var(--text-muted); margin: 0; }
.product-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.product-card { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-1); }
.product-card:hover { border-color: var(--border-strong); }
.product-card__image { display: grid; place-items: center; height: 116px; border-radius: var(--radius-m); background: radial-gradient(closest-side, color-mix(in srgb, var(--mvg-monster) 20%, transparent), transparent) center / 90% 90% no-repeat, var(--surface-2); }
.product-card__image img { width: 96px; height: 96px; }
.product-card__ribbon { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 1; padding: 2px var(--space-2); border-radius: var(--radius-s); background: var(--monster-fill); color: var(--on-monster); font-size: var(--fs-xs); font-weight: 700; box-shadow: var(--bevel); }
.product-card__name { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-l); margin: 0 0 var(--space-1); }
.product-card__name a { color: var(--text); text-decoration: none; }
.product-card__name a:hover { color: var(--monster-ink); }
.product-card__tagline { margin: 0; font-size: var(--fs-s); color: var(--text-muted); }
.product-card__buy { display: grid; gap: var(--space-2); }

.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: 0; font-weight: 700; font-size: var(--fs-l); }
.price--l { font-size: var(--fs-xl); }
.price--none { font-weight: 400; font-size: var(--fs-s); color: var(--text-muted); }
.price__unit { font-weight: 400; font-size: var(--fs-s); color: var(--text-muted); }
.price__was { color: var(--text-faint); font-weight: 400; font-size: 0.85em; }
.stardust--on-fill { color: inherit; }

.stepper { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; border: 2px solid var(--border-strong); border-radius: var(--radius-m); overflow: hidden; background: var(--surface); }
.stepper__btn { height: 40px; border: 0; background: var(--surface-2); color: var(--text); font-size: var(--fs-xl); font-weight: 700; cursor: pointer; }
.stepper__btn:hover:not([disabled]) { background: var(--surface-3); }
.stepper__btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.stepper__value { text-align: center; font-weight: 700; }
.cart-control form { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cart-control .stepper { display: grid; }
.cart-control__in { font-weight: 600; color: var(--success); }
.cart-control[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

.confirm summary { list-style: none; cursor: pointer; }
.confirm summary::-webkit-details-marker { display: none; }
.confirm__panel { margin-top: var(--space-2); padding: var(--space-3); border-radius: var(--radius-m); background: var(--surface-2); border: 1px solid var(--border); }
.confirm__panel p { margin-bottom: var(--space-2); }
.confirm__result { margin: var(--space-2) 0 0; }

/* ---------------------------------------------------------------- product page */
.product-page { display: grid; gap: var(--space-6); padding-bottom: var(--space-7); }
@media (min-width: 900px) { .product-page { grid-template-columns: minmax(260px, 380px) 1fr; } }
.product-page__art { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-l); background: radial-gradient(closest-side, color-mix(in srgb, var(--mvg-monster) 22%, transparent), transparent), var(--surface); border: 1px solid var(--border); }
.product-page__art img { width: 60%; height: auto; }
.product-page__buy { display: grid; gap: var(--space-3); max-width: 420px; margin: var(--space-5) 0; }
.product-page__h { font-size: var(--fs-l); margin-top: var(--space-5); }
.grants { padding-left: 1.2em; }

/* ---------------------------------------------------------------- cart */
.cart-page { padding: var(--space-5) 0 var(--space-7); }
.cart-layout { display: grid; gap: var(--space-5); }
@media (min-width: 960px) { .cart-layout { grid-template-columns: 1fr 360px; align-items: start; } }
.cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cart-line { display: grid; grid-template-columns: 64px 1fr auto auto auto; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); }
.cart-line__image { width: 56px; height: 56px; background: var(--surface-2); border-radius: var(--radius-m); padding: 4px; }
.cart-line__name { font-weight: 700; color: var(--text); text-decoration: none; }
.cart-line__problem { margin: var(--space-1) 0 0; color: var(--danger); font-size: var(--fs-s); }
.cart-line .stepper { width: 140px; }
.cart-line__total { margin: 0; font-weight: 700; text-align: right; min-width: 6ch; }
.cart-line__remove { grid-column: 5; }
@media (max-width: 640px) {
  .cart-line { grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); padding: var(--space-3); }
  .cart-line__image { width: 48px; height: 48px; }
  .cart-line .stepper { grid-column: 2; width: 100%; max-width: 140px; grid-template-columns: 38px minmax(0, 1fr) 38px; }
  .cart-line__total { grid-column: 3; grid-row: 1; }
  .cart-line__remove { grid-column: 3; }
}
.cart-summary h2 { font-size: var(--fs-xl); }
.totals { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); }
.totals div { display: flex; justify-content: space-between; gap: var(--space-4); }
.totals dd { margin: 0; font-weight: 600; }
.totals__discount { color: var(--success); }
.totals__total { border-top: 1px solid var(--border); padding-top: var(--space-2); font-size: var(--fs-l); font-weight: 700; }
.checkout-form { display: grid; gap: var(--space-3); }

/* ---------------------------------------------------------------- orders, sign-in */
.order-page, .login-page { max-width: 720px; padding: var(--space-6) 0 var(--space-7); }
.order-summary { margin: var(--space-5) 0; }
.order-summary__ref { font-size: var(--fs-s); color: var(--text-muted); }
.order-lines { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-1); }
.order-lines li, .order-summary__total { display: flex; justify-content: space-between; gap: var(--space-4); }
.order-summary__total { font-weight: 700; border-top: 1px solid var(--border); padding-top: var(--space-2); }
.order-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.login-steps { list-style: none; counter-reset: step; margin: var(--space-5) 0; padding: 0; display: grid; gap: var(--space-3); }
.login-steps li { counter-increment: step; position: relative; padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 44px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); }
.login-steps li::before { content: counter(step); position: absolute; left: var(--space-4); top: var(--space-4); display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-s); background: var(--monster-fill); color: var(--on-monster); font-weight: 800; box-shadow: var(--bevel); }
.login-steps h2 { font-family: var(--font-ui); font-size: var(--fs-l); margin-bottom: var(--space-1); }
.login-steps p { margin-bottom: var(--space-1); }
.login-code { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.login-code code { font-size: var(--fs-xl); font-weight: 700; padding: var(--space-2) var(--space-3); background: var(--surface-2); border-radius: var(--radius-m); letter-spacing: 0.04em; }
.login-new { margin-top: var(--space-4); }

/* ---------------------------------------------------------------- account */
.account-layout { display: grid; gap: var(--space-5); padding: var(--space-5) 0 var(--space-7); }
@media (min-width: 900px) { .account-layout { grid-template-columns: 230px 1fr; gap: var(--space-6); } }
.account-nav { align-self: start; display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); }
.account-nav__who { display: flex; align-items: center; gap: var(--space-3); }
.account-nav__who div { display: grid; }
.account-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.account-nav a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); color: var(--text-muted); text-decoration: none; font-weight: 600; }
.account-nav a:hover { background: var(--surface-2); color: var(--text); }
.account-nav a[aria-current="page"] { background: var(--monster-soft); color: var(--monster-ink); }
@media (max-width: 899px) { .account-nav ul { display: flex; flex-wrap: wrap; } }
.account-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.account-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: var(--space-4) 0; }
.account-cards h2 { font-size: var(--fs-l); }
.balance-card__amount { font-size: var(--fs-2xl); margin: 0; }
.balance-inline { font-size: var(--fs-l); margin: 0; }
.account-section { margin-top: var(--space-6); }
.account-section h2 { font-size: var(--fs-xl); }
.rank-list { list-style: none; padding: 0; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
thead th { background: var(--surface-2); font-weight: 700; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
th.num, td.num { text-align: right; }
.ledger__change--in { color: var(--success); font-weight: 700; }
.ledger__change--out { color: var(--danger); font-weight: 700; }
.purchase-list { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.purchase-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); }
.order-list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.order-card__head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.order-card__meta { margin: var(--space-1) 0 0; }
.order-card p:last-child { margin-bottom: 0; }
.freebie-card { display: flex; gap: var(--space-5); align-items: center; }
.freebie-card__art { width: 96px; height: 96px; flex: none; }
.freebie-card h2 { font-size: var(--fs-xl); }
@media (max-width: 480px) { .freebie-card { flex-direction: column; align-items: flex-start; } }
.numbered { padding-left: 1.3em; }

/* ---------------------------------------------------------------- legal, errors, admin */
.legal { max-width: 76ch; padding: var(--space-6) 0 var(--space-7); }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--space-6); }
.prose h3 { font-size: var(--fs-l); margin-top: var(--space-5); }
.prose ul, .prose ol { padding-left: 1.4em; }
.error-page { padding: var(--space-8) 0; text-align: center; }
.error-page__code { font-family: var(--font-pixel); font-size: clamp(4rem, 3rem + 6vw, 8rem); line-height: 1; color: var(--monster-ink); margin: 0; }
.error-page .lede { margin-inline: auto; }
.admin-layout { padding: var(--space-5) 0 var(--space-7); }
.admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.admin-nav form { margin-left: auto; }
.admin-stats { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.admin-stats .card { display: grid; gap: var(--space-1); }
.admin-stats strong { font-size: var(--fs-2xl); }
.inline-form { display: flex; gap: var(--space-2); align-items: center; }
.inline-form input { min-height: 36px; }
.link-confirm { display: flex; gap: var(--space-4); align-items: flex-start; }

/* ---------------------------------------------------------------- cart lines, checkout, consent */
.cart-line--problem { border-color: var(--warning); }
.cart-control__problem { margin: 0; font-size: var(--fs-s); color: var(--text-muted); }
.cart-control__error { margin: var(--space-2) 0 0; font-size: var(--fs-s); color: var(--danger); }
.cart-line .cart-control__error { grid-column: 1 / -1; }
.consent { padding: var(--space-3); border-radius: var(--radius-m); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-s); line-height: 1.45; }
.consent input { width: 22px; height: 22px; }
.consent-record { margin: var(--space-4) 0; }
.consent-record h2 { font-size: var(--fs-l); }
.consent-record__text { margin: var(--space-2) 0; padding: var(--space-3) var(--space-4); border-left: 4px solid var(--monster-fill); background: var(--surface-2); border-radius: 0 var(--radius-m) var(--radius-m) 0; }
.consent-details summary { cursor: pointer; color: var(--text-muted); }
.subscribe-summary { display: grid; gap: var(--space-4); margin: var(--space-5) 0; }
.subscribe-summary__item { display: flex; gap: var(--space-4); align-items: center; }
.subscribe-summary__item img { width: 64px; height: 64px; background: var(--surface-2); border-radius: var(--radius-m); padding: 4px; }
.session-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: var(--space-2); }
.session-list li { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); }

/* ---------------------------------------------------------------- sign-in options */
.login-options { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
@media (min-width: 900px) { .login-options { grid-template-columns: 3fr 2fr; align-items: start; } }
.login-option h2 { font-size: var(--fs-xl); }
.login-option .login-steps { margin: var(--space-4) 0; }
.login-option .login-steps h3 { font-family: var(--font-ui); font-size: var(--fs-l); margin-bottom: var(--space-1); }
.btn--discord { --btn-bg: #5865F2; --btn-fg: #FFFFFF; --btn-border: #5865F2; }
.btn--discord:hover { background: #4752C4; border-color: #4752C4; }
.btn--discord svg { width: 20px; height: 20px; }