/* ============================================================
   components.css - buttons, cards, forms, tables, badges, etc.
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
    --btn-bg: var(--surface);
    --btn-fg: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    padding: 12px 24px;
    font: inherit;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    text-align: center;
    background: var(--btn-bg);
    color: var(--btn-fg);
    transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(0.2); }

.btn-primary { --btn-fg: #fff; background: var(--grad-blue); box-shadow: var(--btn-shadow); }
.btn-primary:hover { color: #fff; filter: brightness(1.05); box-shadow: var(--btn-shadow-hover); }
.btn-accent { --btn-fg: #fff; background: var(--grad-red); box-shadow: var(--btn-shadow); }
.btn-accent:hover { color: #fff; filter: brightness(1.05); box-shadow: var(--btn-shadow-hover); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { background: var(--surface-2); color: var(--black); border-color: var(--ink-faint); box-shadow: var(--btn-shadow); }
.btn-danger { --btn-fg: #fff; background: var(--danger); }
.btn-danger:hover { color: #fff; background: #8f1620; }
.btn-sm { padding: 8px 15px; font-size: var(--step--1); border-radius: var(--r-sm); }
.btn-block { display: flex; width: 100%; }

/* Consistent action-button group (wraps instead of overflowing). */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* Multi-column form: a predictable two-column grid that TOP-ALIGNS the panels in
   each row (unlike CSS multi-column, which balances heights and leaves the second
   column's first panel sitting lower). Collapses to one column on tablet/phone.
   Grid gap owns the spacing, so no per-panel margin can leak between columns. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); align-items: start; }
.form-grid > .panel { margin: 0; }
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } }

/* Layout caps so single inputs / prose don't stretch across a wide admin pane. */
.form-narrow { max-width: 840px; }
.panel .field > input:not([type=checkbox]):not([type=radio]),
.panel .field > select { max-width: 560px; }
.panel .field > textarea { max-width: 100%; }
.panel p.muted, .panel p.help, .prize-desc { max-width: 70ch; }

/* ---------- Cards / grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-6); }
.grid-lg { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-6); }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-soft); }
.card-media { aspect-ratio: 4 / 3; background: radial-gradient(circle at 50% 40%, var(--paper) 0%, var(--paper-deep) 100%); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform var(--dur-3) var(--ease-out); }
.card:hover .card-media img { transform: scale(1.05); }
.card-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.card-body h3 { margin: 0; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); }
.price { font-family: var(--font-display); font-size: 1.5rem; color: var(--blue); font-weight: 700; }
.price--lg { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
.price small { font-size: 0.78rem; color: var(--ink-soft); font-family: var(--font-body); font-weight: 500; }

/* Featured single sweepstakes */
.featured {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.featured-media { background: radial-gradient(circle at 50% 40%, var(--paper) 0%, var(--paper-deep) 100%); aspect-ratio: 4 / 3; min-height: clamp(300px, 28vw, 460px); display: flex; align-items: center; justify-content: center; }
.featured-media img { width: 100%; height: 100%; object-fit: contain; padding: clamp(16px, 3vw, 40px); }
.featured-body { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); display: flex; flex-direction: column; gap: var(--sp-3); }
.featured-title { font-size: var(--step-3); margin: 0; }
.featured-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-top: auto; padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.featured-foot .btn { padding: 14px 32px; font-size: 1.05rem; }

/* ---------- Badges ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: var(--r-full);
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    line-height: 1;
}
.badge-active, .badge-paid { background: var(--ok-bg); color: var(--ok); }
.badge-ended, .badge-refunded, .badge-voided { background: var(--paper-deep); color: var(--ink-soft); }
.badge-drawn { background: var(--danger-bg); color: var(--red-dark); }
.badge-draft { background: #e6ebfa; color: #3c4f86; }
.badge-pending, .badge-held { background: var(--amber-bg); color: var(--amber); }
.badge-failed { background: var(--danger-bg); color: var(--red-dark); }

/* ---------- Progress ---------- */
.progress { height: 10px; background: var(--paper-deep); border-radius: var(--r-full); overflow: hidden; }
.progress > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--red), var(--red-light));
    border-radius: var(--r-full);
    transition: width var(--dur-4) var(--ease-out);
    background-size: 200% 100%;
    animation: pv-shimmer 2.4s linear infinite;
}

/* ---------- Panels / forms ---------- */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
}
.panel + .panel { margin-top: var(--sp-5); }
/* ...but a grid-based panel layout owns its spacing via the grid gap. The
   stacked-panel top margin must never leak onto the 2nd+ panel of a column, or
   it pushes that column down out of alignment with the first. This is scoped
   higher than the rule above so CSS source order can't decide the outcome. */
.form-grid > .panel + .panel,
.chart-cols > .panel + .panel { margin-top: 0; }

label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--black); font-size: 0.92rem; }
.field { margin-bottom: var(--sp-5); }

input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], input[type=date], input[type=datetime-local], input[type=search], input[type=url],
select, textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font: inherit;
    color: var(--ink);
    background: #fff;
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
input[type=search] { -webkit-appearance: none; appearance: none; }
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-faint); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--blue-light);
    box-shadow: 0 0 0 3px rgba(36, 86, 230, 0.16);
}
textarea { resize: vertical; min-height: 120px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-5); }
.check { display: flex; gap: 12px; align-items: flex-start; }
.check input { width: auto; margin-top: 4px; accent-color: var(--red); }
.check label { font-weight: 500; margin: 0; }

/* ---------- Alerts ---------- */
.alert { padding: 14px 16px; border-radius: var(--r-sm); margin-bottom: var(--sp-5); font-size: var(--step-0); border: 1px solid transparent; }
.alert-error { background: var(--danger-bg); color: var(--danger); border-color: #f1c4c8; }
.alert-ok { background: var(--ok-bg); color: var(--ok); border-color: #c3d4fb; }
.alert-info { background: #eef1f8; color: var(--blue-dark); border-color: var(--line); }
.alert-warn { background: var(--amber-bg); color: var(--amber); border-color: #ecd9a3; }

/* ---------- Stat cards ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-5); }
/* Fixed 4 columns on wider screens so 8-KPI grids form clean rows (no orphan). */
@media (min-width: 1000px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat .n { font-family: var(--font-display); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.2rem); color: var(--blue); font-weight: 700; line-height: 1.1; }
.stat .l { color: var(--ink-soft); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
.table th, .table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.table th { color: var(--ink-soft); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.table tbody tr { transition: background var(--dur-1) var(--ease-out); }
.table tbody tr:hover { background: var(--paper); }
.table-wrap { overflow-x: auto; border-radius: var(--r-md); }
/* Let wide tables scroll rather than crush their columns on narrow screens. */
.table-wrap .table { min-width: 560px; }
/* Right-aligned tabular numerics for money columns. */
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Clickable sort headers. */
.table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.table th.sortable:hover { color: var(--blue); }

/* ---------- File dropzone ---------- */
.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
    border: 2px dashed var(--line);
    border-radius: var(--r-lg);
    background: var(--surface-2);
    padding: clamp(22px, 4vw, 34px) 20px;
    cursor: pointer;
    transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.dropzone:hover, .dropzone.dragging { border-color: var(--blue-light); background: #f4f7ff; }
.dropzone.dragging { border-style: solid; }
.dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone-ico { width: 42px; height: 42px; color: var(--ink-faint); transition: color var(--dur-2) var(--ease-out); }
.dropzone-ico svg { width: 100%; height: 100%; }
.dropzone:hover .dropzone-ico, .dropzone.dragging .dropzone-ico { color: var(--blue); }
.dropzone-title { font-weight: 700; color: var(--ink); }
.dropzone-hint { font-size: 0.82rem; color: var(--ink-soft); }
.dropzone.busy { opacity: 0.65; pointer-events: none; }

/* ---------- Bundle tiers (entry page) ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); margin-top: 6px; }
.tier {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 18px 12px 14px;
    border: 2px solid var(--line);
    border-radius: var(--r-md);
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.tier:hover { border-color: var(--blue-light); }
.tier-selected { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36, 86, 230, 0.15); }
.tier-qty { font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.tier-price { font-family: var(--font-display); font-size: 1.4rem; color: var(--blue); font-weight: 700; }
.tier-per { font-size: 0.76rem; color: var(--ink-soft); }
.tier-badge {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--red); color: #fff; font-size: 0.66rem; font-weight: 700;
    padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
}

/* ---------- Notify-me signup band ---------- */
.notify-band {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm); padding: var(--sp-5) var(--sp-6);
}
.notify-copy h2 { font-size: 1.3rem; }
.notify-form { display: flex; gap: var(--sp-2); flex: 1 1 320px; max-width: 460px; }
.notify-form input { flex: 1; }
.notify-done { margin: 0; font-weight: 700; color: var(--blue); }

/* Inline filter/search controls (e.g. the transactions toolbar). */
.filter-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.filter-row input, .filter-row select { width: auto; }
.filter-search { min-width: 220px; flex: 1 1 220px; }
@media (max-width: 620px) { .filter-row { width: 100%; } .filter-row input, .filter-row select { width: 100%; } }

/* Stacked-card table mode: on phones, opt-in tables become one card per row
   (label + value) instead of a tiny horizontal-scroll grid. Add .table-cards to
   the <table> and data-label="…" to each <td>. */
@media (max-width: 620px) {
    .table-wrap .table.table-cards { min-width: 0; }
    table.table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    table.table-cards, table.table-cards tbody { display: block; }
    table.table-cards tr {
        display: block;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        background: var(--surface);
        box-shadow: var(--shadow-sm);
        margin-bottom: var(--sp-3);
        overflow: hidden;
    }
    table.table-cards tr:hover { background: var(--surface); }
    table.table-cards td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 10px 14px;
        border: none;
        border-bottom: 1px solid var(--line-soft);
        text-align: right;
    }
    table.table-cards td:last-child { border-bottom: none; }
    table.table-cards td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--ink-soft);
        text-align: left;
        flex: 0 0 auto;
    }
    table.table-cards td[data-label=""] { justify-content: stretch; }
    table.table-cards td[data-label=""]::before { content: none; }
    /* action cells become a full-width wrapping button row */
    table.table-cards td[data-label=""] .btn-row,
    table.table-cards td[data-label=""] > div { width: 100%; }
    table.table-cards td .btn-sm { padding: 9px 14px; }
}

/* ---------- Charts ---------- */
.chart-box { position: relative; height: 300px; }
.chart-box.sm { height: 220px; }
.chart-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-5); align-items: stretch; }
/* Reset ALL panel margins here - .panel + .panel's top margin would otherwise
   push the second column's panel 24px lower than the first. */
.chart-cols .panel { margin: 0; }
/* Let a short panel (e.g. an empty "By status") center its content in the
   stretched height instead of hugging the top. */
.chart-cols .panel { display: flex; flex-direction: column; }
.chart-cols .panel > .chart-box { flex: 1 1 auto; }
@media (max-width: 900px) { .chart-cols { grid-template-columns: 1fr; } }

/* ---------- Toasts ---------- */
.toast-stack { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 10px; z-index: var(--z-toast); }
.toast {
    padding: 13px 18px; border-radius: var(--r-md); color: #fff; box-shadow: var(--shadow-lg);
    font-weight: 600; max-width: min(92vw, 380px);
    animation: pv-toast-in var(--dur-3) var(--ease-spring);
}
.toast.Success { background: linear-gradient(135deg, #2472e6, var(--blue-dark)); }
.toast.Error { background: var(--grad-red); }
.toast.Info { background: linear-gradient(135deg, var(--blue-light), var(--blue)); }

/* Confirm/cancel dialog sits narrower than the (large) crop modal. */
.confirm-card { max-width: 460px; width: 100%; }

/* ---------- "More" bottom sheet + scrim (mobile tab bar) ---------- */
.tab-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-sheet) - 1);
    background: rgba(6, 8, 12, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: pv-fade-in var(--dur-2) var(--ease-out);
}
.more-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sheet);
    background: var(--black-soft);
    color: #e6e8ee;
    border-top: 1px solid var(--chrome-line);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 12px 14px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.5);
    animation: pv-sheet-up var(--dur-2) var(--ease-out);
}
.more-sheet .grip {
    width: 40px;
    height: 4px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.22);
    margin: 2px auto 12px;
    cursor: pointer;
}
.more-sheet a,
.more-sheet button {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    color: #c3c7d2;
    font: inherit;
    font-weight: 600;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
}
.more-sheet a:hover,
.more-sheet button:hover { background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; }
.more-sheet a .nav-svg,
.more-sheet button .nav-svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--tab-idle); }
.more-sheet .sheet-head { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tab-idle); padding: 8px 14px 4px; }
.more-sheet .sheet-group + .sheet-group { margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 6px; }
.more-sheet form { margin: 0; }

/* The sheet + scrim live in the DOM always; JS toggles .sheet-open to reveal
   them (no circuit needed). */
.appnav .tab-scrim, .appnav .more-sheet { display: none; }
.appnav.sheet-open .tab-scrim { display: block; }
.appnav.sheet-open .more-sheet { display: block; }

/* Toast clears the fixed tab bar on mobile. */
@media (max-width: 768px) {
    .toast-stack { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); left: 12px; right: 12px; }
}

/* ---------- Circuit reconnect overlay ---------- */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-overlay) + 90);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.reconnect-overlay { position: fixed; inset: 0; background: rgba(6, 8, 12, 0.74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.reconnect-card {
    position: relative;
    width: 100%;
    max-width: 360px;
    text-align: center;
    background: var(--black-soft);
    color: #e6e8ee;
    border-top: 3px solid var(--blue);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 30px 26px max(28px, calc(24px + env(safe-area-inset-bottom)));
    animation: pv-rise var(--dur-3) var(--ease-out);
}
.reconnect-spinner {
    width: 44px; height: 44px; margin: 0 auto 16px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--blue);
    animation: reconnect-spin 0.8s linear infinite;
}
.reconnect-title { color: #fff; font-size: 1.3rem; margin: 0 0 6px; }
.reconnect-message { color: #b9bdc9; font-size: 0.95rem; margin: 0; }
.reconnect-rejected-msg { display: none; color: var(--red-light); font-size: 0.95rem; margin: 0; font-weight: 600; }
.reconnect-sub { color: #9aa0b2; font-size: 0.85rem; margin: 16px 0 0; }
.reconnect-sub a { color: var(--blue-light); font-weight: 600; }
.components-reconnect-failed .reconnect-spinner { border-top-color: var(--red); animation-play-state: paused; }
.components-reconnect-rejected .reconnect-spinner,
.components-reconnect-rejected .reconnect-message { display: none; }
.components-reconnect-rejected .reconnect-rejected-msg { display: block; }
@keyframes reconnect-spin { to { transform: rotate(360deg); } }

/* ---------- Gallery / thumbs (admin) ---------- */
.gallery { display: flex; gap: 12px; flex-wrap: wrap; }
.gallery .thumb { width: 120px; height: 90px; object-fit: cover; border-radius: var(--r-sm); border: 2px solid var(--line); cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.gallery .thumb:hover { border-color: var(--blue-light); transform: translateY(-2px); }
.gallery .thumb.selected { border-color: var(--red); box-shadow: 0 0 0 3px rgba(224, 35, 47, 0.28); }
.thumb-wrap { position: relative; }
.thumb-wrap .star { position: absolute; top: 4px; left: 4px; background: var(--red); color: #fff; font-size: 0.66rem; font-weight: 700; padding: 2px 6px; border-radius: 5px; }

/* Collapse two-up rows and the featured split on tablets/large phones so they
   never sit cramped in the 620-900 range. .row-3 stays compact (card exp /
   city-state-zip read fine three-up). */
@media (max-width: 768px) {
    .row { grid-template-columns: 1fr; }
    .featured { grid-template-columns: 1fr; }
    .featured-media { aspect-ratio: auto; min-height: clamp(240px, 45vw, 320px); }
}

@media (max-width: 620px) {
    .grid, .grid-lg { grid-template-columns: 1fr; }
    .check input { width: 26px; height: 26px; margin-top: 0; }
    .check { align-items: center; }
    .toast-stack { left: 12px; right: 12px; bottom: 12px; }
    .toast { max-width: none; }
    /* Tighter tables so more fits before horizontal scroll kicks in. */
    .table { font-size: var(--step--1); }
    .table th, .table td { padding: 9px 10px; }
    .btn-block { padding-block: 14px; }
    /* Card foot can wrap so the price + CTA never collide. */
    .card-foot { flex-wrap: wrap; }
    .card-foot .btn { flex: 1 1 auto; }
}

/* Full-width primary actions on phones (easy thumb target). */
@media (max-width: 520px) {
    form .btn:not(.btn-sm),
    .modal-actions .btn,
    .btn-row > .btn:not(.btn-sm) { width: 100%; }
    .btn-sm { padding: 10px 16px; }
}