/* ============================================================
   PokeGens - My Trades page (v1.0.16.0 redesign)
   Mobile-first. Dark theme matches the My Account palette.
   Loaded only on the /my-trades/ shortcode render.
   ============================================================ */

.pgmt-root {
    /* Palette (mirrors .pgma-shell tokens from the theme) */
    --pgmt-bg: #030b17;
    --pgmt-bg-alt: #071325;
    --pgmt-card: rgba(7, 19, 37, 0.92);
    --pgmt-card-strong: rgba(13, 28, 50, 0.96);
    --pgmt-card-hover: rgba(16, 34, 60, 0.96);
    --pgmt-border: rgba(115, 189, 255, 0.16);
    --pgmt-border-strong: rgba(115, 189, 255, 0.30);
    --pgmt-border-success: rgba(120, 200, 120, 0.35);
    --pgmt-border-warn: rgba(245, 158, 11, 0.40);
    --pgmt-border-danger: rgba(220, 90, 90, 0.40);
    --pgmt-text: #f7fbff;
    --pgmt-muted: rgba(220, 234, 255, 0.62);
    --pgmt-muted-strong: rgba(220, 234, 255, 0.82);
    --pgmt-accent: #238cff;
    --pgmt-accent-2: #74d4ff;
    --pgmt-accent-soft: rgba(35, 140, 255, 0.18);
    --pgmt-success: #78c878;
    --pgmt-success-bg: rgba(120, 200, 120, 0.14);
    --pgmt-warn: #f59e0b;
    --pgmt-warn-bg: rgba(245, 158, 11, 0.12);
    --pgmt-danger: #ef6a6a;
    --pgmt-danger-bg: rgba(220, 90, 90, 0.14);
    --pgmt-radius: 18px;
    --pgmt-radius-sm: 12px;
    --pgmt-radius-xs: 8px;
    --pgmt-font: Arial, Helvetica, sans-serif;

    font-family: var(--pgmt-font);
    color: var(--pgmt-text);
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 12px 48px;
    box-sizing: border-box;
}

.pgmt-root *,
.pgmt-root *::before,
.pgmt-root *::after {
    box-sizing: border-box;
}

/* Defeat Flatsome / theme overrides on typography.
   Flatsome applies .button, .entry-content button, h1-h6 and body font rules
   with varying specificity, and also overrides line-height and text-transform
   on buttons. The `html body` prefix raises our specificity above most theme
   rules without needing an ID. */
html body .pgmt-root,
html body .pgmt-root h1,
html body .pgmt-root h2,
html body .pgmt-root h3,
html body .pgmt-root h4,
html body .pgmt-root h5,
html body .pgmt-root h6,
html body .pgmt-root p,
html body .pgmt-root span,
html body .pgmt-root div,
html body .pgmt-root a,
html body .pgmt-root button,
html body .pgmt-root input,
html body .pgmt-root select,
html body .pgmt-root textarea,
html body .pgmt-root label,
html body .pgmt-root summary,
html body .pgmt-root strong,
html body .pgmt-root b,
html body .pgmt-root em,
html body .pgmt-root i,
html body .pgmt-root small {
    font-family: var(--pgmt-font) !important;
    text-transform: none !important;
    letter-spacing: normal;
}

/* Preserve small-caps eyebrow labels that want uppercase. */
html body .pgmt-root .pgmt-hero-eyebrow,
html body .pgmt-root .pgmt-section-title {
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
}

/* The one exception: coupon codes stay monospace for legibility. */
html body .pgmt-root .pgmt-coupon-code {
    font-family: "Courier New", Courier, monospace !important;
}

/* ----- Hero ----- */
.pgmt-hero {
    background:
        radial-gradient(120% 180% at 0% 0%, rgba(35, 140, 255, 0.22), transparent 55%),
        radial-gradient(100% 160% at 100% 100%, rgba(116, 212, 255, 0.14), transparent 60%),
        var(--pgmt-card);
    border: 1px solid var(--pgmt-border-strong);
    border-radius: var(--pgmt-radius);
    padding: 20px 18px;
    margin-bottom: 16px;
    /* PERF(v1.0.16.5): lighter shadow - was 0 18px 40px which caused
       scroll jank on mid-range devices. Hero is a single element so impact
       is lower than cards, but still not free. */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
}

.pgmt-hero-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pgmt-accent-2);
    margin-bottom: 6px;
}

.pgmt-hero-title {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: var(--pgmt-text);
}

.pgmt-hero-title .pgmt-hero-count {
    color: var(--pgmt-accent-2);
}

.pgmt-hero-sub {
    font-size: 13px;
    color: var(--pgmt-muted);
    margin: 0 0 14px 0;
}

.pgmt-hero-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pgmt-hero-progress-bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.pgmt-hero-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--pgmt-accent), var(--pgmt-accent-2));
    border-radius: inherit;
    transition: width 400ms ease;
}

.pgmt-hero-progress-label {
    font-size: 12px;
    color: var(--pgmt-muted-strong);
}

/* ----- Empty state (all caught up, no pending) ----- */
.pgmt-empty {
    text-align: center;
    padding: 28px 18px;
    border: 1px dashed var(--pgmt-border-strong);
    border-radius: var(--pgmt-radius);
    background: var(--pgmt-card);
    margin-bottom: 16px;
}

.pgmt-empty-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px 0;
}

.pgmt-empty-sub {
    font-size: 13px;
    color: var(--pgmt-muted);
    margin: 0 0 14px 0;
}

.pgmt-empty a.button,
.pgmt-empty a.pgmt-btn {
    display: inline-block;
}

/* ----- Section label between the hero and groups of cards ----- */
.pgmt-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 22px 2px 8px 2px;
}

.pgmt-section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pgmt-muted-strong);
}

.pgmt-section-count {
    font-size: 12px;
    color: var(--pgmt-muted);
}

/* ----- Order card ----- */
.pgmt-orders {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pgmt-order {
    background: var(--pgmt-card);
    border: 1px solid var(--pgmt-border);
    border-radius: var(--pgmt-radius);
    padding: 16px 14px;
    /* PERF(v1.0.16.5): removed box-shadow. With 200+ pending orders, each
       card rendering a 28px-blur shadow kills scroll performance on mid-range
       devices (hundreds of per-frame GPU paints). The border + darker card
       background gives cards enough definition without paint cost. */
    /* content-visibility: auto lets the browser skip layout/paint for cards
       that are off-screen. contain-intrinsic-size reserves the rough height
       so scrollbar position stays stable. */
    content-visibility: auto;
    contain-intrinsic-size: auto 180px;
    transition: border-color 160ms ease, background 160ms ease;
}

.pgmt-order:hover {
    border-color: var(--pgmt-border-strong);
}

.pgmt-order[data-expanded="1"] {
    background: var(--pgmt-card-strong);
    border-color: var(--pgmt-border-strong);
}

/* Belt and braces hiding: [hidden] and data-expanded="0" both force display:none.
   Theme rules can override the default user-agent styles for [hidden], so we
   have to re-assert with !important. */
html body .pgmt-root .pgmt-order-body[hidden],
html body .pgmt-root .pgmt-order[data-expanded="0"] > .pgmt-order-body {
    display: none !important;
}

.pgmt-order-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pgmt-order-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.pgmt-order-id {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.pgmt-order-date {
    font-size: 12px;
    color: var(--pgmt-muted);
    white-space: nowrap;
}

/* Game chips */
.pgmt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pgmt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--pgmt-accent-soft);
    color: var(--pgmt-accent-2);
    border: 1px solid var(--pgmt-border);
    white-space: nowrap;
}

.pgmt-chip--invalid {
    background: var(--pgmt-warn-bg);
    color: var(--pgmt-warn);
    border-color: var(--pgmt-border-warn);
}

.pgmt-chip--manual {
    background: rgba(116, 212, 255, 0.10);
    color: var(--pgmt-accent-2);
    border-color: var(--pgmt-border);
}

/* Thumbnails row */
.pgmt-thumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pgmt-thumb {
    width: 36px;
    height: 36px;
    border-radius: var(--pgmt-radius-xs);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--pgmt-border);
    object-fit: contain;
    padding: 3px;
    display: block;
}

.pgmt-thumb-more {
    width: 36px;
    height: 36px;
    border-radius: var(--pgmt-radius-xs);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--pgmt-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--pgmt-muted-strong);
    letter-spacing: 0.02em;
}

/* Progress bar per order */
.pgmt-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pgmt-progress-bar {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.pgmt-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--pgmt-success), #9ae39a);
    border-radius: inherit;
    transition: width 400ms ease;
}

.pgmt-progress-label {
    font-size: 12px;
    color: var(--pgmt-muted-strong);
    font-weight: 600;
}

/* Primary CTA */
.pgmt-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 18px;
    border-radius: var(--pgmt-radius-sm);
    border: 0;
    background: linear-gradient(135deg, var(--pgmt-accent), #1a6fd6);
    color: #fff;
    font-family: var(--pgmt-font);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(35, 140, 255, 0.28);
    transition: transform 120ms ease, box-shadow 160ms ease, filter 160ms ease;
    text-decoration: none;
    line-height: 1.2;
}

.pgmt-cta:hover,
.pgmt-cta:focus-visible {
    filter: brightness(1.08);
    box-shadow: 0 14px 28px rgba(35, 140, 255, 0.36);
    color: #fff;
}

.pgmt-cta:active {
    transform: translateY(1px);
    filter: brightness(0.95);
}

.pgmt-cta:disabled,
.pgmt-cta[aria-disabled="true"] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--pgmt-muted);
    cursor: not-allowed;
    box-shadow: none;
    filter: none;
}

.pgmt-cta-sub {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.9;
}

.pgmt-cta--ghost {
    background: rgba(255, 255, 255, 0.06);
    color: var(--pgmt-text);
    box-shadow: none;
    border: 1px solid var(--pgmt-border-strong);
}

.pgmt-cta--ghost:hover,
.pgmt-cta--ghost:focus-visible {
    background: rgba(255, 255, 255, 0.10);
    color: var(--pgmt-text);
}

/* The expand link under the CTA */
.pgmt-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 8px 10px;
    margin-top: 10px;
    color: var(--pgmt-muted-strong);
    font-family: var(--pgmt-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.pgmt-toggle:hover {
    color: var(--pgmt-text);
}

.pgmt-toggle-caret {
    display: inline-block;
    transition: transform 160ms ease;
    font-size: 10px;
    line-height: 1;
}

.pgmt-order[data-expanded="1"] .pgmt-toggle-caret {
    transform: rotate(180deg);
}

/* Card head cursor: the head itself is not clickable, only the buttons inside it */
.pgmt-order-head {
    cursor: default;
}

.pgmt-toggle:focus-visible,
.pgmt-cta:focus-visible {
    outline: 2px solid var(--pgmt-accent-2);
    outline-offset: 3px;
}

/* Order body (expanded) */
.pgmt-order-body {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pgmt-mode {
    border: 1px solid var(--pgmt-border);
    border-radius: var(--pgmt-radius-sm);
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
}

.pgmt-mode-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.pgmt-mode-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--pgmt-text);
}

.pgmt-mode-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--pgmt-muted-strong);
}

.pgmt-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.pgmt-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--pgmt-border);
    border-radius: var(--pgmt-radius-sm);
}

.pgmt-item-img {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--pgmt-radius-xs);
    background: rgba(255, 255, 255, 0.06);
    object-fit: contain;
    padding: 3px;
}

.pgmt-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.pgmt-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--pgmt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pgmt-item-sub {
    font-size: 11px;
    color: var(--pgmt-muted);
}

.pgmt-status {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
    flex: 0 0 auto;
}

.pgmt-status--pending {
    background: var(--pgmt-accent-soft);
    color: var(--pgmt-accent-2);
    border-color: var(--pgmt-border-strong);
}

.pgmt-status--delivered {
    background: var(--pgmt-success-bg);
    color: var(--pgmt-success);
    border-color: var(--pgmt-border-success);
}

.pgmt-status--invalid {
    background: var(--pgmt-warn-bg);
    color: var(--pgmt-warn);
    border-color: var(--pgmt-border-warn);
}

.pgmt-status--manual {
    background: rgba(116, 212, 255, 0.10);
    color: var(--pgmt-accent-2);
    border-color: var(--pgmt-border);
}

/* Manual delivery notice box */
.pgmt-manual-box {
    padding: 12px;
    background: var(--pgmt-warn-bg);
    border: 1px solid var(--pgmt-border-warn);
    border-radius: var(--pgmt-radius-sm);
    font-size: 13px;
    line-height: 1.45;
    color: var(--pgmt-text);
    margin-bottom: 10px;
}

/* Invalid item coupon sub line */
.pgmt-item-coupon {
    color: var(--pgmt-warn);
    font-weight: 600;
    font-size: 11px;
    margin-top: 2px;
}

/* Ensure the wrapped .getpokemonbtn (rendered by the server) inherits the CTA look */
.pgmt-cta-wrap .getpokemonbtn,
.pgmt-cta-wrap .pgsa-copycoupon,
.pgmt-cta-wrap button.button {
    width: 100%;
    padding: 14px 18px !important;
    border-radius: var(--pgmt-radius-sm) !important;
    border: 0 !important;
    background: linear-gradient(135deg, var(--pgmt-accent), #1a6fd6) !important;
    color: #fff !important;
    font-family: var(--pgmt-font) !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    letter-spacing: 0.01em !important;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(35, 140, 255, 0.28) !important;
    transition: transform 120ms ease, box-shadow 160ms ease, filter 160ms ease;
    line-height: 1.2 !important;
}

.pgmt-cta-wrap .getpokemonbtn:hover,
.pgmt-cta-wrap .pgsa-copycoupon:hover,
.pgmt-cta-wrap button.button:hover {
    filter: brightness(1.08);
    box-shadow: 0 14px 28px rgba(35, 140, 255, 0.36) !important;
    color: #fff !important;
}

.pgmt-cta-wrap .getpokemonbtn:disabled,
.pgmt-cta-wrap button.button[aria-disabled="true"] {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--pgmt-muted) !important;
    cursor: not-allowed;
    box-shadow: none !important;
    filter: none !important;
}

/* "Coupon available" style - use warn accent rather than primary */
.pgmt-cta-wrap .pgsa-copycoupon {
    background: linear-gradient(135deg, var(--pgmt-warn), #d07d05) !important;
    box-shadow: 0 10px 22px rgba(245, 158, 11, 0.28) !important;
}

.pgmt-cta-wrap .pgsa-copycoupon:hover {
    box-shadow: 0 14px 28px rgba(245, 158, 11, 0.36) !important;
}

/* ----- Collapsible panels (coupons, past orders) ----- */
.pgmt-panel {
    background: var(--pgmt-card);
    border: 1px solid var(--pgmt-border);
    border-radius: var(--pgmt-radius);
    margin-top: 14px;
    overflow: hidden;
}

.pgmt-panel > summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
}

.pgmt-panel > summary::-webkit-details-marker {
    display: none;
}

.pgmt-panel > summary:focus-visible {
    outline: 2px solid var(--pgmt-accent-2);
    outline-offset: -2px;
}

.pgmt-panel-caret {
    color: var(--pgmt-muted-strong);
    font-size: 12px;
    transition: transform 160ms ease;
}

.pgmt-panel[open] .pgmt-panel-caret {
    transform: rotate(180deg);
}

.pgmt-panel-body {
    padding: 14px 16px 16px;
    border-top: 1px solid var(--pgmt-border);
}

.pgmt-panel-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--pgmt-accent-soft);
    color: var(--pgmt-accent-2);
    border: 1px solid var(--pgmt-border);
}

/* Coupons grid (kept largely as-is but restyled) */
.pgmt-coupons-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.pgmt-coupon {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--pgmt-border);
    border-radius: var(--pgmt-radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pgmt-coupon-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pgmt-coupon-code {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--pgmt-text);
    word-break: break-all;
    min-width: 0;
}

.pgmt-coupon-amount {
    font-size: 12px;
    color: var(--pgmt-muted-strong);
}

.pgmt-coupon-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.pgmt-coupon-actions button {
    font-family: var(--pgmt-font);
    font-size: 12px;
    padding: 6px 10px;
    border-radius: var(--pgmt-radius-xs);
    border: 1px solid var(--pgmt-border-strong);
    background: rgba(255, 255, 255, 0.04);
    color: var(--pgmt-text);
    cursor: pointer;
    font-weight: 600;
}

.pgmt-coupon-actions button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.pgmt-coupon-actions .pgsa-usecoupon {
    background: var(--pgmt-accent);
    border-color: var(--pgmt-accent);
    color: #fff;
}

.pgmt-coupon-actions .pgsa-usecoupon:hover {
    filter: brightness(1.08);
}

/* Past orders (read-only) */
.pgmt-past-orders {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pgmt-past-order {
    border: 1px solid var(--pgmt-border);
    border-radius: var(--pgmt-radius-sm);
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
}

.pgmt-past-order-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.pgmt-past-order-id {
    font-size: 13px;
    font-weight: 700;
}

.pgmt-past-order-date {
    font-size: 11px;
    color: var(--pgmt-muted);
}

.pgmt-past-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pgmt-past-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.pgmt-past-item-img {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    object-fit: contain;
    padding: 2px;
}

.pgmt-past-item-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--pgmt-muted-strong);
}

/* Notice banner (coupon applied etc.) */
.pgmt-notice {
    padding: 10px 12px;
    border-radius: var(--pgmt-radius-sm);
    background: var(--pgmt-success-bg);
    border: 1px solid var(--pgmt-border-success);
    color: var(--pgmt-success);
    font-size: 13px;
    margin-bottom: 12px;
    display: none;
}

/* ----- Portal mode (guest, single order) ----- */
.pgmt-root--portal .pgmt-hero {
    /* No hero stats in portal - just a focused call to action */
    background:
        radial-gradient(120% 180% at 0% 0%, rgba(35, 140, 255, 0.22), transparent 55%),
        var(--pgmt-card);
}

/* ----- Responsive bumps ----- */
@media (min-width: 640px) {
    .pgmt-root {
        padding: 16px 16px 64px;
    }

    .pgmt-hero {
        padding: 28px 26px;
    }

    .pgmt-hero-title {
        font-size: 28px;
    }

    .pgmt-hero-sub {
        font-size: 14px;
    }

    .pgmt-order {
        padding: 20px 20px;
    }

    .pgmt-order-id {
        font-size: 17px;
    }

    .pgmt-thumb,
    .pgmt-thumb-more {
        width: 40px;
        height: 40px;
    }

    .pgmt-coupons-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pgmt-item-img {
        width: 44px;
        height: 44px;
    }
}

@media (min-width: 960px) {
    .pgmt-coupons-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pgmt-hero-title {
        font-size: 32px;
    }
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
    .pgmt-hero-progress-fill,
    .pgmt-progress-fill,
    .pgmt-toggle-caret,
    .pgmt-panel-caret,
    .pgmt-cta {
        transition: none !important;
    }
}