/* ============================================================
   POCKETMAGS DESIGN SYSTEM
   ------------------------------------------------------------
   Tokens, base styles, utilities, and component library.
   Structure mirrors the Pocketmags style-guide format so this
   file is a direct, portable handover. Values reflect the
   refreshed concept palette (orange / purple / cream).
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
    /* ---- Brand: orange (primary) ---- */
    --brand-50: #FEF4F1;
    --brand-100: #FDE5DF;
    --brand-200: #F6B6A5;
    --brand-300: #F19380;
    --brand-400: #EE6A4A;
    --brand-500: #E83A1E; /* primary brand */
    --brand-600: #D03217;
    --brand-700: #C52E14;
    --brand-800: #A22410;
    --brand-900: #6E180A;
    /* ---- Pocketmags Plus+: true brand colours
     Plus+ uses a navy-slate dark (not pure black) paired with a
     warm off-white for text. The warm/cool mix softens contrast
     vs. pure #000/#FFF. Orange accent stays unchanged.

     --plus-ink    : background on dark Plus+ surfaces
     --plus-paper  : body text / warm off-white on --plus-ink
     --plus-accent : orange highlight (buttons, active link, badge) */
    --plus-ink: #0F1425;
    --plus-paper: #F2EEE2;
    --plus-accent: #FC5C17;
    /* ---- Plus: purple (secondary accent, used by Puzzles) ---- */
    --plus-50: #F3EEFE;
    --plus-100: #EAE3FB;
    --plus-200: #CDBDF3;
    --plus-300: #A586E0;
    --plus-400: #6B50B9;
    --plus-500: #3D2A78; /* Plus+ brand */
    --plus-600: #352469;
    --plus-700: #2C1F5A;
    --plus-800: #1F1640;
    --plus-900: #100B22;
    /* ---- Teal: secondary accent ---- */
    --teal-50: #E8F5F3;
    --teal-100: #C4E6DF;
    --teal-200: #94D0C4;
    --teal-300: #5CB5A4;
    --teal-400: #349982;
    --teal-500: #1A7D66;
    --teal-600: #136554;
    --teal-700: #0D4E41;
    --teal-800: #07362D;
    --teal-900: #03221C;
    /* ---- Slate: neutrals / text / light-mode surfaces ---- */
    --slate-50: #FAF6EC; /* cream */
    --slate-100: #F4F3EF; /* tint */
    --slate-200: #E8E4DA; /* rule */
    --slate-300: #D6D1C5;
    --slate-400: #B4AEA5;
    --slate-500: #86807A;
    --slate-600: #6B655F;
    --slate-700: #4A4640;
    --slate-800: #2E2B27;
    --slate-900: #1F1D1A; /* ink */
    /* ---- Zinc: dark-mode surfaces ---- */
    --zinc-50: #F4F4F5;
    --zinc-100: #E4E4E7;
    --zinc-200: #D4D4D8;
    --zinc-300: #A1A1AA;
    --zinc-400: #71717A;
    --zinc-500: #52525B;
    --zinc-600: #3F3F46;
    --zinc-700: #27272A;
    --zinc-800: #18181B;
    --zinc-900: #0B0B0D;
    /* ---- Status ---- */
    --color-success: #2E8B57;
    --color-warning: #E8A53D;
    --color-error: #C43A2B;
    --color-info: #2E6DB4;
    /* ---- Semantic ---- */
    --color-bg: #FFFFFF;
    --color-bg-cream: var(--slate-50);
    --color-bg-muted: var(--slate-100);
    --color-surface: #FFFFFF;
    --color-border: var(--slate-200);
    --color-border-soft: #F0ECE2;
    --color-text: var(--slate-900);
    --color-text-soft: var(--slate-700);
    --color-text-muted: var(--slate-500);
    --color-text-faint: var(--slate-400);
    /* ---- Spacing scale ---- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;
    --sp-9: 56px;
    --sp-10: 72px;
    /* ---- Font sizes ---- */
    --fs-xs: 13px;
    --fs-sm: 14px;
    --fs-body: 16px;
    --fs-lg: 17px;
    --fs-xl: 20px;
    --fs-xxl: 28px;
    --fs-xxxl: 40px;
    /* ---- Font weights ---- */
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;
    --fw-900: 900;
    /* ---- Radius ---- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 22px;
    --radius-full: 999px;
    /* ---- Shadows ---- */
    --shadow-sm: 0 1px 2px rgba(31,29,26,.04);
    --shadow-md: 0 2px 4px rgba(31,29,26,.04), 0 6px 18px rgba(31,29,26,.05);
    --shadow-lg: 0 2px 6px rgba(31,29,26,.05), 0 12px 28px rgba(31,29,26,.08);
    --shadow-2xl: 0 6px 14px rgba(40,15,18,.10), 0 24px 48px rgba(40,15,18,.12);
    /* ---- Cover lift - multi-layer stack inspired by Apple Books /
     News+ covers. Three shadows at graduated offsets/blurs so the
     cover reads as a physical object floating above the surface.
     Cool navy tint (not pure black) so it harmonises with dark
     Plus+ surfaces and still works on light. */
    --cover-shadow-sm: 0 1px 2px rgba(15,20,37,.08), 0 4px 10px rgba(15,20,37,.10), 0 12px 24px rgba(15,20,37,.10);
    --cover-shadow: 0 2px 4px rgba(15,20,37,.10), 0 10px 20px rgba(15,20,37,.14), 0 28px 56px rgba(15,20,37,.16);
    --cover-shadow-lg: 0 4px 8px rgba(15,20,37,.12), 0 16px 32px rgba(15,20,37,.16), 0 40px 72px rgba(15,20,37,.20);
    --cover-shadow-hover: 0 4px 8px rgba(15,20,37,.14), 0 18px 36px rgba(15,20,37,.18), 0 48px 84px rgba(15,20,37,.22);
    /* ---- Typography ---- */
    --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
    --font-display: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
    --font-serif: "Fraunces", Georgia, serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    /* ---- Layout ---- */
    --page-max: 1280px;
    --page-pad: 32px;
    /* ---- Motion ---- */
    --ease-out: cubic-bezier(.2,.7,.2,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
    /* ============================================================
     LEGACY ALIASES - keep existing pages rendering during the
     migration. Removed once every page consumes the scale tokens.
     ============================================================ */
    --brand: var(--brand-500);
    --brand-deep: var(--brand-700);
    --brand-soft: var(--brand-100);
    --brand-tint: var(--brand-50);
    --brand-line: var(--brand-200);
    --plus: var(--plus-500);
    --plus-deep: var(--plus-700);
    --plus-soft: var(--plus-100);
    --cta: var(--brand-500);
    --cta-deep: var(--brand-700);
    --ink: var(--slate-900);
    --ink-soft: var(--slate-700);
    --ink-mute: var(--slate-500);
    --ink-faint: var(--slate-400);
    --rule: var(--slate-200);
    --rule-soft: var(--color-border-soft);
    --cream: var(--slate-50);
    --bg: var(--color-bg);
    --bg-card: var(--color-surface);
    --bg-tint: var(--slate-100);
    --shadow: var(--shadow-md);
    --shadow-cover: var(--shadow-2xl);
    --radius: var(--radius-lg);
    --radius-xs: var(--radius-sm);
    --font: var(--font-body);
    --max: var(--page-max);
    --pad: var(--page-pad);
}


/* ============================================================
   2. BASE / RESET
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

/* ── Custom scrollbars ─────────────────────────────────────────
   Slim, brand-consistent scrollbars on all browsers.
   Webkit (Chrome, Edge, Safari): ::-webkit-scrollbar pseudo-elements.
   Firefox: scrollbar-width / scrollbar-color properties.
   The dark-surface override covers Plus+ and selling pages. */
:root {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong, #b0b8c4) transparent;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-strong, #b0b8c4);
    border-radius: 99px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--color-text-muted, #888);
    }

/* Dark surfaces (Plus+, selling pages) */
.selling-body ::-webkit-scrollbar-thumb,
.plus-app ::-webkit-scrollbar-thumb,
.nav--on-dark ::-webkit-scrollbar-thumb,
.sell-cats-panel ::-webkit-scrollbar-thumb {
    background: rgba(242, 238, 226, 0.22);
}

    .selling-body ::-webkit-scrollbar-thumb:hover,
    .plus-app ::-webkit-scrollbar-thumb:hover,
    .nav--on-dark ::-webkit-scrollbar-thumb:hover,
    .sell-cats-panel ::-webkit-scrollbar-thumb:hover {
        background: rgba(242, 238, 226, 0.45);
    }

/* ── Consistent native select base ────────────────────────────
   Remove OS chrome from all <select> elements; individual
   components (sort-select, field__select etc.) layer on top. */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.55;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    display: block;
    /* Anchor cropped images to the top - magazine covers put the
     masthead up there, so when object-fit: cover has to trim, we
     keep the top and lose the bottom. */
    object-position: top center;
    /* Subtle 10% white inset stroke to lift every cover away from
     whatever surface sits behind it. Inherits the container's
     border-radius via the overflow: hidden clip, so it reads as
     a rounded hairline on the visible edge. */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: none;
    border: 0;
}

input {
    font: inherit;
    color: inherit;
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1 {
    font-family: var(--font-display);
    font-size: var(--fs-xxxl);
    font-weight: var(--fw-800);
    letter-spacing: -0.03em;
    line-height: 1.05;
}

h2 {
    font-family: var(--font-display);
    font-size: var(--fs-xxl);
    font-weight: var(--fw-700);
    letter-spacing: -0.025em;
    line-height: 1.1;
}

h3 {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-700);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

h4 {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-700);
    letter-spacing: -0.015em;
    line-height: 1.2;
}

h5 {
    font-size: var(--fs-body);
    font-weight: var(--fw-700);
    letter-spacing: -0.005em;
    line-height: 1.3;
}

h6 {
    font-size: var(--fs-sm);
    font-weight: var(--fw-700);
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 19px;
    }

    h4 {
        font-size: var(--fs-lg);
    }
}

.body-lg {
    font-size: var(--fs-lg);
    line-height: 1.55;
}

.body-st {
    font-size: var(--fs-body);
    line-height: 1.55;
}

.body-sm {
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.text-secondary-st,
.text-secondary-sm {
    font-family: var(--font-mono);
    color: var(--color-text-muted);
}

.text-secondary-st {
    font-size: var(--fs-sm);
}

.text-secondary-sm {
    font-size: var(--fs-xs);
}

.label-upper {
    font-size: var(--fs-xs);
    font-weight: var(--fw-700);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

code {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    background: var(--slate-100);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}


/* ============================================================
   4. UTILITIES (minimal - matches style-guide shorthand)
   ============================================================ */
.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.grid {
    display: grid;
}

.text-center {
    text-align: center;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.hidden {
    display: none;
}

[hidden] {
    display: none !important;
}

.min-h-screen {
    min-height: 100vh;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 640px) {
    .sm\:block {
        display: block;
    }

    .sm\:flex {
        display: flex;
    }
}

@media (min-width: 768px) {
    .md\:block {
        display: block;
    }

    .md\:flex {
        display: flex;
    }
}

@media (min-width: 1024px) {
    .lg\:block {
        display: block;
    }

    .lg\:flex {
        display: flex;
    }
}

@media (min-width: 1280px) {
    .xl\:block {
        display: block;
    }

    .xl\:flex {
        display: flex;
    }
}

.page-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-holder {
    flex: 1;
}

.page-main {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--sp-8) var(--page-pad);
}

.page-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
}


/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    font-family: var(--font-body);
    font-weight: var(--fw-600);
    letter-spacing: -0.005em;
    border-radius: var(--radius-full);
    border: 1.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, color .2s, border-color .2s, transform .1s;
    text-decoration: none;
    /* Smooth pill edges on Windows / lower-DPR screens */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

    .btn:active {
        transform: scale(.99);
    }

.btn-sm {
    padding: 7px 14px;
    font-size: var(--fs-sm);
}

.btn-md {
    padding: 11px 20px;
    font-size: var(--fs-body);
}

.btn-lg {
    padding: 14px 26px;
    font-size: var(--fs-lg);
}

.btn-full {
    width: 100%;
}

.btn-primary {
    background: var(--brand-500);
    color: #fff;
    border-color: var(--brand-500);
}

    .btn-primary:hover {
        background: var(--brand-700);
        border-color: var(--brand-700);
    }

.btn-plus {
    background: var(--plus-500);
    color: #fff;
    border-color: var(--plus-500);
}

    .btn-plus:hover {
        background: var(--plus-700);
        border-color: var(--plus-700);
    }

.btn-teal {
    background: var(--teal-500);
    color: #fff;
    border-color: var(--teal-500);
}

    .btn-teal:hover {
        background: var(--teal-700);
        border-color: var(--teal-700);
    }

.btn-outline {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-text);
}

    .btn-outline:hover {
        background: var(--color-text);
        color: #fff;
    }

.btn-ghost {
    background: transparent;
    color: var(--color-text);
    border-color: transparent;
}

    .btn-ghost:hover {
        background: var(--slate-100);
    }

/* Danger modifier - layer on top of .btn-outline (or .btn-ghost) to
   re-tint as a destructive action. Outline variant lands first; use
   --danger when a solid red primary is needed. */
.btn-outline.btn--danger {
    color: var(--color-error);
    border-color: var(--color-error);
}

    .btn-outline.btn--danger:hover {
        background: var(--color-error);
        color: #fff;
        border-color: var(--color-error);
    }

.btn-ghost.btn--danger {
    color: var(--color-error);
}

    .btn-ghost.btn--danger:hover {
        background: rgba(196,58,43,.08);
    }

/* On-dark modifier - use on .btn-outline / .btn-ghost when the
   button sits on a dark surface (Plus+ app, dark heroes). */
.btn-outline.btn--on-dark {
    color: #fff;
    border-color: rgba(255,255,255,.3);
    background: transparent;
}

    .btn-outline.btn--on-dark:hover {
        background: rgba(255,255,255,.1);
        border-color: rgba(255,255,255,.5);
        color: #fff;
    }

.btn-ghost.btn--on-dark {
    color: #fff;
}

    .btn-ghost.btn--on-dark:hover {
        background: rgba(255,255,255,.08);
    }


/* ============================================================
   6. CARDS
   ============================================================ */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    box-shadow: var(--shadow-sm);
}

.card-solid {
    background: var(--color-bg-cream);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
}

.card-xl {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
}

.card-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-700);
    letter-spacing: -0.015em;
    color: var(--color-text);
    margin-bottom: var(--sp-2);
}

.section-title {
    font-size: var(--fs-body);
    font-weight: var(--fw-700);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text);
}


/* ============================================================
   7. LINKS
   ============================================================ */
.text-link {
    color: var(--slate-700);
    border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
}

    .text-link:hover {
        color: var(--brand-600);
        border-bottom-color: currentColor;
    }

.brand-link {
    color: var(--brand-600);
    font-weight: var(--fw-600);
    transition: color .15s;
}

    .brand-link:hover {
        color: var(--brand-700);
    }

.footer-link {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    transition: color .15s;
}

    .footer-link:hover {
        color: var(--color-text);
    }


/* ============================================================
   8. NOTIFICATION BANNERS
   ============================================================ */
.notification-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.notification-banner__icon {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    flex-shrink: 0;
    margin-top: 2px;
}

.notification-banner__content {
    flex: 1;
    min-width: 0;
}

.notification-banner__title {
    font-size: var(--fs-body);
    font-weight: var(--fw-700);
    letter-spacing: -0.005em;
    color: inherit;
    margin-bottom: 2px;
}

.notification-banner__message {
    font-size: var(--fs-sm);
    color: inherit;
    opacity: 0.85;
}

.notification-banner__link {
    color: inherit;
    text-decoration: underline;
    font-weight: var(--fw-600);
}

.notification-banner__close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    opacity: 0.7;
    transition: background .15s, opacity .15s;
}

    .notification-banner__close:hover {
        background: rgba(0,0,0,.06);
        opacity: 1;
    }

    .notification-banner__close svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        stroke-width: 2.2;
        fill: none;
    }

.notification-banner--info {
    background: #EEF4FC;
    border-color: #C9DBF0;
    color: var(--color-info);
}

.notification-banner--success {
    background: #E8F3EC;
    border-color: #B8D9C2;
    color: var(--color-success);
}

.notification-banner--warning {
    background: #FEF6E7;
    border-color: #F2D79A;
    color: #946418;
}

.notification-banner--error {
    background: #FBEAE7;
    border-color: #EBB8B0;
    color: var(--color-error);
}

.notification-banner--compact {
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
}

    .notification-banner--compact .notification-banner__title {
        display: none;
    }


/* ============================================================
   9. NAV PRIMITIVES
   ============================================================ */
.nav-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--color-text);
    background: transparent;
    transition: background .2s, color .2s;
}

    .nav-icon-btn:hover {
        background: var(--slate-100);
        color: var(--brand-500);
    }

    .nav-icon-btn svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        stroke-width: 1.8;
        fill: none;
    }

.nav-cat-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-500);
    color: var(--color-text);
    transition: background .15s, color .15s;
}

    .nav-cat-link:hover {
        background: var(--slate-100);
        color: var(--brand-600);
    }

.sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
    font-weight: var(--fw-500);
    color: var(--color-text-soft);
    transition: background .15s, color .15s;
}

    .sidebar-nav-link:hover {
        background: var(--slate-100);
        color: var(--color-text);
    }


/* ============================================================
   10. FORM ELEMENTS
   ============================================================ */
.search-input {
    width: 100%;
    padding: 11px var(--sp-4);
    padding-right: var(--sp-8);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-full);
    font-size: var(--fs-body);
    color: var(--color-text);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

    .search-input::placeholder {
        color: var(--color-text-muted);
    }

    .search-input:focus {
        border-color: var(--brand-500);
        box-shadow: 0 0 0 3px var(--brand-100);
    }


/* ============================================================
   11. UTILITY COMPONENTS
   ============================================================ */
.focus-ring:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.skeleton {
    background: linear-gradient(90deg, var(--slate-100) 0%, var(--slate-200) 50%, var(--slate-100) 100%);
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.divider {
    height: 1px;
    background: var(--color-border);
    border: 0;
    width: 100%;
}

.breadcrumb-wrap {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 18px var(--page-pad) 0;
}

.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;
}

    .breadcrumb li + li::before {
        content: '/';
        margin: 0 var(--sp-2);
        color: var(--color-text-faint);
    }

.breadcrumb a {
    color: var(--color-text-muted);
    transition: color .15s;
}

    .breadcrumb a:hover {
        color: var(--brand-600);
    }

.breadcrumb [aria-current="page"] {
    color: var(--color-text);
    font-weight: var(--fw-600);
}

.payment-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-2);
    background: var(--slate-100);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-700);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-soft);
}


/* ============================================================
   12. DIALOG / MODAL
   ============================================================ */
.dialog-surface {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--color-border);
}


/* ============================================================
   13. ACCESSIBILITY BASELINE
   ------------------------------------------------------------
   Skip link, keyboard focus indicator, hit-area extension for
   icon-only controls, reduced-motion opt-out. These apply
   globally across every page that loads this sheet.
   ============================================================ */

/* Skip link - visible only on keyboard focus (WCAG 2.4.1). */
.skip-link {
    position: absolute;
    top: -48px;
    left: var(--sp-4);
    z-index: 1000;
    padding: var(--sp-3) var(--sp-5);
    background: var(--color-text);
    color: #fff;
    font-weight: var(--fw-600);
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: top .15s;
}

    .skip-link:focus {
        top: var(--sp-3);
    }

/* Global keyboard-focus indicator. `:focus-visible` keeps mouse
   clicks from triggering the ring while ensuring every tabbable
   element shows it under keyboard navigation. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Extend hit area of 36px icon buttons to 44×44 (WCAG 2.5.5 AAA)
   without changing their visual size. Relies on the button being
   position: relative (already the case for .nav-icon-btn and .nav-icon). */
.nav-icon-btn::after,
.nav-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
}

/* Respect OS preference: disable non-essential motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Main content target for the skip link. Applied by the page;
   tabindex="-1" lets the anchor focus land without adding to
   the tab order. */
[id="main"]:focus {
    outline: none;
}




/* ============================================================
   31. FOCUS NAV
   ------------------------------------------------------------
   Minimal nav for task-focused pages (activation, checkout,
   password reset). Drops search / categories / basket / account
   to remove distractions. Just the brand and a quiet "Help" link.
   ============================================================ */
.nav-focus {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.nav-focus__inner {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 18px var(--page-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
}

.nav-focus__help {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-500);
    color: var(--color-text-soft);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    transition: color .15s, background .15s;
}

    .nav-focus__help:hover {
        color: var(--color-text);
        background: var(--slate-100);
    }

    .nav-focus__help svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        stroke-width: 1.8;
        fill: none;
    }


/* ============================================================
   32. STEPPER
   ------------------------------------------------------------
   Progress indicator for multi-step flows. Ordered list where
   each step has a circle (number or check) + label, joined by
   a connecting rule. Modifiers: --done, --current.
   ============================================================ */
.stepper {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0;
    margin: 0;
    font-size: var(--fs-sm);
}

.stepper__step {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--color-text-muted);
    font-weight: var(--fw-500);
}

    .stepper__step + .stepper__step::before {
        content: '';
        display: block;
        width: 36px;
        height: 1.5px;
        background: var(--color-border);
        margin-right: var(--sp-3);
    }

.stepper__circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-800);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

    .stepper__circle svg {
        width: 12px;
        height: 12px;
        stroke: currentColor;
        stroke-width: 2.5;
        fill: none;
    }

.stepper__label {
    line-height: 1;
}

.stepper__step--done .stepper__circle {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

.stepper__step--done .stepper__label {
    color: var(--color-text-soft);
}

.stepper__step--done + .stepper__step::before {
    background: var(--color-success);
}

.stepper__step--current .stepper__circle {
    background: var(--color-text);
    border-color: var(--color-text);
    color: #fff;
}

.stepper__step--current .stepper__label {
    color: var(--color-text);
    font-weight: var(--fw-700);
}


/* ============================================================
   33. FIELD (form primitive)
   ------------------------------------------------------------
   Label + hint + input + error, stacked. Pair with <input>,
   <textarea> or <select>. Add aria-invalid="true" on the input
   to surface the --error styling.
   ============================================================ */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-700);
    letter-spacing: -0.005em;
    color: var(--color-text);
}

.field__hint {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin-top: -2px;
}

.field__input,
.field__select,
.field__textarea {
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--fs-body);
    color: var(--color-text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}

    .field__input::placeholder {
        color: var(--color-text-muted);
    }

    .field__input:focus,
    .field__select:focus,
    .field__textarea:focus {
        border-color: var(--brand-500);
        box-shadow: 0 0 0 3px var(--brand-100);
    }

    .field__input[aria-invalid="true"],
    .field__select[aria-invalid="true"],
    .field__textarea[aria-invalid="true"] {
        border-color: var(--color-error);
        box-shadow: 0 0 0 3px rgba(196,58,43,.18);
    }

.field__error {
    font-size: var(--fs-xs);
    font-weight: var(--fw-600);
    color: var(--color-error);
    margin-top: 2px;
}

.field--full {
    grid-column: 1 / -1;
}


/* ============================================================
   34. FOOTER
   ------------------------------------------------------------
   Site-wide page footer. Centred within the page max-width,
   simple top rule, muted text. Works on any page.
   ============================================================ */
.footer {
    max-width: var(--page-max);
    margin: 48px auto 0;
    padding: 28px var(--page-pad) 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.footer-brand {
    font-weight: var(--fw-700);
    color: var(--color-text-soft);
    font-size: var(--fs-body);
}

    .footer-brand span {
        color: var(--brand-500);
    }


/* ============================================================
   35. TOGGLE SWITCH
   ------------------------------------------------------------
   Accessible switch built on a real <input type="checkbox">.
   The native input is visually hidden but keeps full keyboard
   and screen-reader support. Track + thumb are pure CSS.

     <label class="toggle">
       <input class="toggle__input" type="checkbox" checked>
       <span class="toggle__track" aria-hidden="true">
         <span class="toggle__thumb"></span>
       </span>
       <span class="toggle__label">Label</span>
     </label>
   ============================================================ */
.toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    cursor: pointer;
    user-select: none;
}

.toggle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.toggle__track {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--slate-300);
    transition: background .2s;
    flex-shrink: 0;
}

.toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s var(--ease-out);
}

.toggle__input:checked + .toggle__track {
    background: var(--plus-500);
}

    .toggle__input:checked + .toggle__track .toggle__thumb {
        transform: translateX(18px);
    }

.toggle__input:focus-visible + .toggle__track {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
}

.toggle__input:disabled + .toggle__track {
    opacity: .5;
    cursor: not-allowed;
}

.toggle__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-600);
    color: var(--color-text);
}


/* ============================================================
   36. SETTING ROW
   ------------------------------------------------------------
   Row inside a settings card: label + optional hint on the
   left, value + action on the right. Rows are expected to be
   separated by hairline dividers (use <hr class="divider">).
   ============================================================ */
.setting-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-5);
    padding: var(--sp-4) 0;
}

    .setting-row:first-child {
        padding-top: 0;
    }

    .setting-row:last-child {
        padding-bottom: 0;
    }

.setting-row__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.setting-row__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-700);
    letter-spacing: -0.005em;
    color: var(--color-text);
}

.setting-row__value {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
    word-break: break-all;
}

.setting-row__hint {
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
    line-height: 1.5;
    max-width: 52ch;
}

.setting-row__action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

@media (max-width: 560px) {
    .setting-row {
        flex-direction: column;
        gap: var(--sp-3);
    }

    .setting-row__action {
        width: 100%;
    }

        .setting-row__action .btn {
            width: 100%;
        }
}

/* Inline variant — keeps the action pinned to the right on all screen
   sizes. Use on rows where the control is a toggle (not a button that
   needs full-width on mobile). */
.setting-row--inline {
    align-items: center;
}

@media (max-width: 560px) {
    .setting-row--inline {
        flex-direction: row;
        gap: var(--sp-5);
    }

        .setting-row--inline .setting-row__action {
            width: auto;
        }
}


/* ============================================================
   37. DRAWER
   ------------------------------------------------------------
   Right-side slide-in panel. Used for the basket and any other
   on-demand overlay that needs more vertical room than a kebab
   menu. Carries role="dialog" aria-modal="true"; wire to the
   a11y.js focus-trap helpers.
   ============================================================ */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(16,14,12,.45);
    display: none;
    justify-content: flex-end;
}

    .drawer.is-open {
        display: flex;
        animation: drawer-fade-in .2s ease-out;
    }

@keyframes drawer-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.drawer__panel {
    width: min(420px, 100vw);
    max-width: 100%;
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    box-shadow: -12px 0 40px rgba(20,15,10,.2);
    animation: drawer-slide-in .28s var(--ease-out);
}

@keyframes drawer-slide-in {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.drawer__title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-800);
    letter-spacing: -0.02em;
    color: var(--color-text);
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
}

.drawer__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--color-text);
    color: #fff;
    font-size: 11px;
    font-weight: var(--fw-800);
    line-height: 1;
}

.drawer__close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background .15s, color .15s;
}

    .drawer__close:hover {
        background: var(--slate-100);
        color: var(--color-text);
    }

    .drawer__close svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        stroke-width: 2.2;
        fill: none;
    }

.drawer__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.drawer__footer {
    flex-shrink: 0;
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}


/* ============================================================
   38. BASKET ITEM
   ------------------------------------------------------------
   Row used in the basket drawer: cover + title/issue + price
   + secondary actions. Stacks cleanly on narrow screens.
   ============================================================ */
.basket-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.basket-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: var(--sp-4);
    align-items: flex-start;
}

.basket-item__cover {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--slate-200);
    box-shadow: var(--cover-shadow-sm);
}

    .basket-item__cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.basket-item__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.basket-item__name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-700);
    color: var(--color-text);
    line-height: 1.25;
}

.basket-item__issue {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.basket-item__actions {
    display: flex;
    gap: var(--sp-3);
    margin-top: 4px;
    font-size: var(--fs-xs);
}

    .basket-item__actions button,
    .basket-item__actions a {
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        color: var(--color-text-muted);
        font-weight: var(--fw-500);
        border-bottom: 1px solid transparent;
        transition: color .15s, border-color .15s;
    }

        .basket-item__actions button:hover,
        .basket-item__actions a:hover {
            color: var(--color-text);
            border-bottom-color: currentColor;
        }

.basket-item__price {
    font-size: var(--fs-sm);
    font-weight: var(--fw-800);
    color: var(--color-text);
    text-align: right;
    white-space: nowrap;
}


/* ============================================================
   39. UPSELL CARD
   ------------------------------------------------------------
   Small promotional card - cover thumbnail + copy + CTA.
   --plus variant for Pocketmags Plus+ upsells (purple accent).
   ============================================================ */
.upsell-card {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.upsell-card--plus {
    background: var(--plus-50);
    border-color: var(--plus-200);
}

.upsell-card__cover {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--slate-200);
}

    .upsell-card__cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.upsell-card__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.upsell-card__title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-800);
    color: var(--color-text);
    line-height: 1.2;
}

    .upsell-card__title b,
    .upsell-card__title strong {
        font-weight: var(--fw-800);
    }

.upsell-card--plus .upsell-card__title em {
    font-style: normal;
    color: var(--plus-700);
}

.upsell-card__body p {
    font-size: var(--fs-xs);
    color: var(--color-text-soft);
    line-height: 1.35;
}

.upsell-card__body a {
    color: var(--plus-700);
    font-weight: var(--fw-600);
}

    .upsell-card__body a:hover {
        color: var(--plus-800);
    }


/* ============================================================
   40. PAYMENT ICONS
   ------------------------------------------------------------
   Small horizontal row of payment-method chips. Reads as a row
   of quiet logos. Each chip is just a styled span - easy to
   swap for real brand SVGs when licensing is cleared.
   ============================================================ */
.payment-icons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.payment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: var(--fw-800);
    letter-spacing: 0.04em;
    color: var(--color-text-soft);
    min-height: 22px;
}


/* ============================================================
   41. LOYALTY LINE
   ------------------------------------------------------------
   Small pill-dot callout used in the basket / order summary to
   highlight loyalty-points earned on the purchase.
   ============================================================ */
.loyalty-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

    .loyalty-line::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #E8A53D;
        box-shadow: 0 0 0 3px rgba(232,165,61,.18);
        flex-shrink: 0;
    }

    .loyalty-line strong {
        color: var(--color-text);
        font-weight: var(--fw-700);
    }

    .loyalty-line a {
        color: var(--color-text-soft);
        text-decoration: underline;
    }

/* Basket total line used inside the drawer footer and on the
   order-summary panel. Label left, price right, big bold type. */
.basket-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-body);
    color: var(--color-text-soft);
}

    .basket-total strong {
        font-size: var(--fs-xl);
        font-weight: var(--fw-800);
        color: var(--color-text);
        letter-spacing: -0.015em;
    }


/* ============================================================
   42. TRUST SIGNALS
   ------------------------------------------------------------
   Horizontal row of small reassurance items ("3m readers",
   "Instant Access", "Secure Checkout"). Usually sat in a focus
   nav on a conversion-critical page.
   ============================================================ */
.trust-signals {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

    .trust-signals li {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }

    .trust-signals svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        stroke-width: 1.8;
        fill: none;
    }

.trust-signals--centered {
    justify-content: center;
    margin-top: var(--sp-3);
}
/* Narrow viewports: keep the trust row single-line. At common phone
   widths (~375-414px) Cancel + 3m+ + Secure still fit with a
   smaller font/gap. Below ~400px drop "3m+ readers" so the two most
   trust-critical signals (Cancel + Secure) stay visible. */
@media (max-width: 560px) {
    .trust-signals {
        gap: var(--sp-3);
        flex-wrap: nowrap;
        font-size: 11.5px;
    }

        .trust-signals li {
            gap: 4px;
        }

        .trust-signals svg {
            width: 12px;
            height: 12px;
        }
}

@media (max-width: 400px) {
    .trust-signals {
        gap: 10px;
        font-size: 11px;
    }

        .trust-signals li:nth-child(2) {
            display: none;
        }
}


/* ============================================================
   43. PAYMENT OPTION
   ------------------------------------------------------------
   Radio-card selector for a payment method. Wraps a real radio
   input; the visual is the whole card. Add .is-selected or
   :checked+label CSS hooks for active state.
   ============================================================ */
.payment-option {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

    .payment-option:hover {
        border-color: var(--color-text);
    }

.payment-option__radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-surface);
    transition: border-color .15s;
}

    .payment-option__radio::after {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--brand-500);
        transform: scale(0);
        transition: transform .15s;
    }

.payment-option__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

    .payment-option__input:checked ~ .payment-option__radio {
        border-color: var(--brand-500);
    }

        .payment-option__input:checked ~ .payment-option__radio::after {
            transform: scale(1);
        }

    .payment-option__input:checked ~ .payment-option__label {
        color: var(--color-text);
        font-weight: var(--fw-700);
    }

.payment-option:has(.payment-option__input:checked) {
    border-color: var(--brand-500);
    background: var(--brand-50);
    box-shadow: 0 0 0 1px var(--brand-500);
}

.payment-option__label {
    flex: 1;
    font-size: var(--fs-body);
    font-weight: var(--fw-600);
    color: var(--color-text-soft);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.payment-option__icons {
    display: flex;
    gap: 4px;
    align-items: center;
}


/* ============================================================
   44. BENEFIT LIST
   ------------------------------------------------------------
   Stacked list with a soft-filled icon circle per item. Used in
   Plus+ value panels, paywalls, onboarding moments.
   ============================================================ */
.benefit-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
}

.benefit-item__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--plus-100);
    color: var(--plus-700);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .benefit-item__icon svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        stroke-width: 2.4;
        fill: none;
    }

.benefit-item__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 3px;
}

    .benefit-item__body strong {
        font-size: var(--fs-sm);
        font-weight: var(--fw-700);
        color: var(--color-text);
        letter-spacing: -0.005em;
    }

    .benefit-item__body span {
        font-size: var(--fs-xs);
        color: var(--color-text-soft);
        line-height: 1.4;
    }


/* ============================================================
   45. PLUS SUMMARY (value panel)
   ------------------------------------------------------------
   Marketing aside for the Plus+ funnel - sits in the checkout
   right rail in place of .order-summary. Cream-plum gradient,
   cover stack, benefit list, trial pricing, rating.
   ============================================================ */
.plus-summary {
    color: var(--plus-paper, #F2EEE2);
    background-color: var(--plus-ink, #0F1425);
    background-image: radial-gradient(circle at 92% 6%, rgba(252,92,23,.12), transparent 55%), linear-gradient(160deg, var(--plus-ink, #0F1425) 0%, #181F36 100%);
    border: 1px solid rgba(242,238,226,.06);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.plus-summary__kicker {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-800);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--plus-accent);
    margin-bottom: var(--sp-2);
}

.plus-summary__title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-800);
    letter-spacing: -0.02em;
    color: var(--plus-paper, #F2EEE2);
    line-height: 1.15;
}

    .plus-summary__title em {
        font-style: normal;
        color: var(--plus-accent);
    }

.plus-summary__pricing {
    padding: var(--sp-4);
    background: rgba(242,238,226,.06);
    border: 1px solid rgba(242,238,226,.12);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plus-summary__price-now {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
}

    .plus-summary__price-now strong {
        font-size: 42px;
        font-weight: var(--fw-800);
        color: var(--plus-paper, #F2EEE2);
        letter-spacing: -0.025em;
        line-height: 1;
    }

    .plus-summary__price-now span {
        font-size: var(--fs-body);
        color: rgba(242,238,226,.72);
        font-weight: var(--fw-500);
    }

.plus-summary__price-after {
    font-size: var(--fs-sm);
    color: rgba(242,238,226,.8);
}

    .plus-summary__price-after strong {
        color: var(--plus-accent);
        font-weight: var(--fw-700);
    }

.plus-summary__cancel {
    font-size: var(--fs-xs);
    color: rgba(242,238,226,.72);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

    .plus-summary__cancel svg {
        width: 20px;
        height: 20px;
        stroke: var(--plus-accent);
        stroke-width: 30;
        fill: none;
    }

.plus-summary__rating {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(242,238,226,.1);
    font-size: var(--fs-sm);
    color: rgba(242,238,226,.85);
}

.plus-summary__rating-stars {
    color: #E8A53D;
    font-size: var(--fs-lg);
    letter-spacing: 1px;
    line-height: 1;
}

.plus-summary__rating strong {
    color: var(--plus-paper, #F2EEE2);
    font-weight: var(--fw-700);
}

/* Benefit list inside a dark plus-summary: re-tint icons + text
   so they read cleanly against the navy background. */
.plus-summary .benefit-item__icon {
    background: rgba(252, 92, 23, 0.15);
    color: var(--plus-accent);
}

.plus-summary .benefit-item__body strong {
    color: var(--plus-paper, #F2EEE2);
}

.plus-summary .benefit-item__body span {
    color: rgba(242, 238, 226, 0.68);
}


/* ============================================================
   46. FAQ LIST
   ------------------------------------------------------------
   Accordion built on native <details>/<summary>. No JS needed -
   browsers handle expand/collapse. Custom chevron indicator.
   ============================================================ */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0;
    transition: border-color .15s;
}

    .faq-item[open] {
        border-color: var(--slate-400);
    }

    .faq-item summary {
        list-style: none;
        padding: var(--sp-4) var(--sp-4);
        font-size: var(--fs-sm);
        font-weight: var(--fw-700);
        color: var(--color-text);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
    }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-item summary::after {
            content: '';
            width: 9px;
            height: 9px;
            border-right: 2px solid var(--color-text-muted);
            border-bottom: 2px solid var(--color-text-muted);
            transform: rotate(45deg);
            transition: transform .2s;
            flex-shrink: 0;
            margin-top: -3px;
        }

    .faq-item[open] summary::after {
        transform: rotate(-135deg);
        margin-top: 3px;
    }

.faq-item__body {
    padding: 0 var(--sp-4) var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
    line-height: 1.55;
}

    .faq-item__body p + p {
        margin-top: var(--sp-3);
    }


/* ============================================================
   48. COVER CASCADE
   ------------------------------------------------------------
   Full-width brick-offset band that sits between main content
   and the footer, like a cascade of covers falling into the
   footer. Wider + shorter than .cover-reel, with a fade top
   and bottom so it dissolves into whatever's above/below.
   ============================================================ */
.cover-cascade {
    width: 100%;
    height: 280px;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 10px;
    padding: 0 var(--page-pad);
    margin-top: var(--sp-8);
    /* Top edge is hard - offset columns already give a naturally uneven
     top line. Only the bottom fades so the cascade falls into the footer. */
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.cover-cascade__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
    /* Static offsets - no animation, so tops stay visible. Three steps
   (0 / 24px / 48px) rotated across columns give a richer, less
   metronomic staggered top line than a simple alternate. */
    .cover-cascade__col:nth-child(3n+2) {
        margin-top: 24px;
    }

    .cover-cascade__col:nth-child(3n+3) {
        margin-top: 48px;
    }

.cover-cascade__col--offset {
    margin-top: 36px;
}

.cover-cascade__col img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    border-radius: 4px;
    box-shadow: var(--cover-shadow-sm);
    background: var(--slate-200);
}

@media (max-width: 900px) {
    .cover-cascade {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        height: 240px;
    }
}

@media (max-width: 560px) {
    .cover-cascade {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        height: 200px;
    }
}


/* ============================================================
   POCKETMAGS · CHECKOUT
   ------------------------------------------------------------
   Task-focused two-column checkout. Form on the left, sticky
   order summary on the right. Minimal focus-nav with trust
   signals on top.

   Load order: pocketmags.css, checkout.css.
   ============================================================ */

body {
    background: var(--color-bg-cream);
}

/* Extend the focus nav with centered trust signals. */
.checkout-nav .nav-focus__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--sp-4);
}

.checkout-nav .brand {
    grid-column: 1;
    justify-self: start;
}

.checkout-nav .trust-signals {
    grid-column: 2;
    justify-self: center;
}

.checkout-nav .nav-focus__help {
    grid-column: 3;
    justify-self: end;
}

/* ------------------------------- LAYOUT */
.checkout-layout {
    max-width: 980px;
    margin: 0 auto;
    padding: var(--sp-8) var(--page-pad) var(--sp-9);
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--sp-6);
    align-items: flex-start;
}
/* Tablet portrait (~768px) gets a tighter two-column layout so the
   aside stays beside the form rather than stacking above it. */
@media (max-width: 960px) and (min-width: 641px) {
    .checkout-layout {
        grid-template-columns: 1fr 280px;
        gap: var(--sp-5);
    }
}

.checkout-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

.checkout-aside {
    position: sticky;
    top: var(--sp-5);
}

/* ------------------------------- CHECKOUT CRUMB */
.checkout-crumb {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

    .checkout-crumb a {
        color: var(--color-text-soft);
    }

        .checkout-crumb a:hover {
            color: var(--brand-600);
        }

    .checkout-crumb::after {
        content: ' >';
        margin-left: 4px;
        color: var(--color-text-faint);
    }

/* ------------------------------- SECTION BLOCK */
.checkout-block {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
}

.checkout-block__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.checkout-block h2 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-800);
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.checkout-block__note {
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
    line-height: 1.55;
    margin-bottom: var(--sp-4);
    max-width: 60ch;
}

.checkout-block .field + .field {
    margin-top: var(--sp-4);
}

/* ------------------------------- ACCOUNT STEP */
.checkout-account__field {
    max-width: 440px;
    margin-bottom: var(--sp-4);
}

.checkout-account__field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
}

.checkout-account__why {
    font-size: var(--fs-xs);
    color: var(--brand-600);
    font-weight: var(--fw-600);
}

    .checkout-account__why:hover {
        color: var(--brand-700);
    }

/* ------------------------------- PAYMENT OPTIONS */
.checkout-payment__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.checkout-payment__submit {
    margin-top: var(--sp-5);
}

/* ------------------------------- ORDER SUMMARY */
.order-summary {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.order-summary__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
}

    .order-summary__head h2 {
        font-size: var(--fs-lg);
        font-weight: var(--fw-800);
        letter-spacing: -0.015em;
        color: var(--color-text);
    }

.order-summary__edit {
    font-size: var(--fs-sm);
    font-weight: var(--fw-600);
    color: var(--color-text-soft);
    text-decoration: underline;
}

    .order-summary__edit:hover {
        color: var(--color-text);
    }

.order-summary__promo {
    padding: var(--sp-3);
    background: var(--slate-50);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
}

    .order-summary__promo strong {
        color: var(--color-text);
        font-weight: var(--fw-700);
    }

.order-summary__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.order-summary .basket-item__price {
    font-size: var(--fs-sm);
}

.order-summary__divider {
    height: 1px;
    background: var(--color-border-soft);
    border: 0;
    margin: 0;
}

/* ------------------------------- RESPONSIVE
   Stack at 640px (below tablet portrait). On phones the sell aside
   collapses to a compact ticks-and-price panel at the top so it
   doesn't eat a full screen before the form. */
@media (max-width: 640px) {
    .checkout-layout {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
        padding: var(--sp-5) var(--sp-5) var(--sp-7);
    }

    .checkout-aside {
        position: static;
        order: -1;
    }

    .checkout-nav .nav-focus__inner {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }

    .checkout-nav .brand {
        grid-row: 1;
    }

    .checkout-nav .nav-focus__help {
        grid-row: 1;
    }
    /* Drop the trust signals entirely on phone — they cost a whole row
     of vertical space and couldn't be made to read well at this
     width. Cancel/Secure/readers are all restated inside the sell
     panel and payment note, so nothing's lost. */
    .checkout-nav .trust-signals {
        display: none;
    }

    .checkout-nav .nav-focus__inner {
        grid-template-rows: auto;
    }
}

@media (max-width: 480px) {
    .checkout-block {
        padding: var(--sp-4);
    }
}

/* ------------------------------- PLUS+ FUNNEL (always light, branded header)
   Applied via class="plus-funnel" on <html> in checkout-plus.html and
   checkout-plus-gift.html. Keeps the cream/white checkout but threads the
   Plus+ brand through the header with the plus+ wordmark and an orange
   accent rule. The body and form blocks stay light — trust signal for payment. */
.plus-funnel .nav-focus {
    background: #fff;
    border-bottom: 2px solid var(--plus-accent, #FC5C17);
    box-shadow: none;
}

.plus-funnel .brand-plus-mark {
    display: inline;
    color: var(--plus-accent, #FC5C17);
    font-weight: var(--fw-800);
    margin-left: 1px;
    background: none;
}

.plus-funnel .plus-summary__title em {
    color: var(--plus-accent, #FC5C17);
    font-style: normal;
}

.plus-funnel .benefit-item__icon {
    background: rgba(252, 92, 23, 0.1);
}

    .plus-funnel .benefit-item__icon svg {
        stroke: var(--plus-accent, #FC5C17);
        fill: none;
    }

.plus-funnel .plus-summary__cancel svg {
    stroke: var(--plus-accent, #FC5C17);
    fill: none;
    stroke-width: 30;
}

.plus-funnel .plus-summary__rating-stars {
    color: #FFD66B;
}

.checkout-block {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
}
    .checkout-block.is-locked .checkout-block__head h2 {
        opacity: 0.5;
    }

    .checkout-block.is-locked > *:not(.checkout-block__head) {
        opacity: 0.45;
        pointer-events: none;
        user-select: none;
    }

.checkout-block__lock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: var(--fw-500);
    color: rgba(242, 238, 226, 0.6);
}

    .checkout-block__lock svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        stroke-width: 1.8;
        fill: none;
    }

.checkout-block:not(.is-locked) .checkout-block__lock {
    display: none;
}

.checkout-block__lock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: var(--fw-500);
    color: var(--color-text-soft);
}
    .checkout-block__lock svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        stroke-width: 1.8;
        fill: none;
    }

.checkout-block__note{display:none;}
.sumtooltip, .pointtooltip {
    color: #fff;
    background-color: #000;
    font-size: 11px;
    display: none;
    padding: 10px;
    position: absolute;
    text-decoration: none;
    z-index: 99999;
    width: 230px;
    bottom: -45px;
    left: 35px;
    line-height: 14px;
}
span.sumwrap:hover .sumtooltip {
    display: block;
}
.sumwrap {
    position: relative;
    font-size: var(--fs-xs);
    color: var(--brand-600);
    font-weight: var(--fw-600);
}
.loginemailtxt {
    font-size: var(--fs-sm);
    font-weight: var(--fw-700);
    letter-spacing: -0.005em;
    color: var(--color-text);
}
.lcpminstruct {
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
    line-height: 1.55;
    margin-bottom: var(--sp-4);
    max-width: 60ch;
}
.fr {
    float: right;
}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}

.mt20{margin-top:20px;}
.headerbarcontent{margin-bottom:20px;}
.plusfunnelp2 {    margin-bottom: 5px;}
.plusfunnelp3{margin-top:16px;}
.plusfunnelp4{width:auto !important; text-transform:capitalize;}
.plusfunnelp5{height:48px; margin-bottom:16px;}
.plusfunnelp6{width:100% !important;}
.express-pay {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.textboxinner{border:none;}
.termstxt{font-size:var(--fs-sm);}
.express-pay__btn {
    height: 48px;
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    font-weight: 600;
    font-size: 15px;
    transition: transform .1s, filter .15s, box-shadow .15s;
}
.express-pay__btn--apple {
    background: #000;
    color: #fff;
}
.express-pay__btn--google {
    background: #fff;
    color: #202124;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.express-pay__btn--paypal {
    background: #FFC439;
    color: #003087;
}
.express-pay__logo {
    width: 16px;
    height: 16px;
}

.pmimg, .fab {
    background-image: url(https://pocketmags.imgix.net/pocketmags-spritesv5.png?auto=format&q=50);
    image-rendering: optimizequality;
}
.tickico25 {
    width: 25px;
    height: 25px;
    display: inline-block;
}
.eyeico {
    background-size: 400%;
    background-position: -75px -123px;
    cursor: pointer;
}


.fa-eye-slash::before {
    content: none !important;
}

.paypalbtn {
    height: 40px;
    line-height: 40px;
    display: inline-block;
    width: 100%;
    text-align: center;
    border-radius:4px;
    cursor:pointer;
    margin-top:10px;
}
.ortxt {
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
    text-align: center;
}

.fv2emailbox {    border: 1px #dbdbdb solid;    margin-bottom: 8px;    box-shadow: 0px 1px 1px #e0e0e0;    border-radius: 4px;    padding: 15px;    margin-bottom: 25px;    pointer-events: none;    opacity: 0.4;}
.fv2payhead {    cursor: pointer;    background-color: white;    display: block; width:fit-content; width:100%;}
.fv2payheadlast{border-bottom: 0px #dbdbdb solid !important;}
.fv2actionbutton {    border-radius: 5px 5px 5px 5px !important;    -moz-border-radius: 5px 5px 5px 5px !important;    -webkit-border-radius: 5px 5px 5px 5px !important; height:40px !important; line-height:40px !important;}

.fv2carddechead {    font-weight: 400;    font-size: 11px;}
.paymenterror{color:red; font-size:13px; font-weight:700; margin-top:10px;}
.fv2paymenttype{font-size:15px; font-weight:700; color:#303030;}
.textboxlarge {    border-radius: 5px 5px 5px 5px !important;    -moz-border-radius: 5px 5px 5px 5px !important;    -webkit-border-radius: 5px 5px 5px 5px !important;}
.fv2sep {    border-bottom: 1px #dbdbdb solid;    height:10px;    margin-bottom:10px;}
.fv2disccode{width:calc(100% - 125px)}
.fv2discbtn{height:40px !important; line-height:40px !important; font-size:12px !important; }
.fv2paymenttypepp{position:absolute; padding-top:2px;}
.fv2radiobtn {    cursor: pointer; margin-right:5px;}
.fv2orderedit{text-align:right;cursor:pointer; font-size:12px;}
.fv2paypallogo{margin-left:3px; height:19px;}

.confirmlibrary{width:350px; float:left; margin-right:30px;}
.confirmgift{width:350px; float:left;}

label.error {    color: red;    font-size: 13px;    font-weight: 700;    margin-top: 10px;}

.cardseperator {    margin-bottom: 20px; border-bottom: 1px #dbdbdb solid; padding-top:20px;}

/* ── Plan picker ─────────────────────────────────── */
.plan-picker {
    display: flex;
    background: rgba(0,0,0,.2);
    border-radius: 8px;
    padding: 3px;
    gap: 3px;
    margin-bottom: 14px;
}

.plan-picker__option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: rgba(242,238,226,.4);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background .15s, color .15s;
    line-height: 1.3;
    white-space: nowrap;
}

    .plan-picker__option:hover {
        color: rgba(242,238,226,.75);
    }

    .plan-picker__option.is-selected {
        background: rgba(242,238,226,.14);
        color: rgba(242,238,226,1);
        font-weight: 600;
    }

.plan-picker__save-pill {
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 1px 6px;
    border-radius: 20px;
    background: rgba(255,255,255,.15);
    color: rgba(255,255,255,.6);
    white-space: nowrap;
    pointer-events: none;
}

/* ── Pricing summary (updates with plan) ─────────── */
.plus-summary__pricing {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.plus-summary__price-block {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

    .plus-summary__price-block strong {
        font-size: 2rem;
        font-weight: 800;
        line-height: 1;
    }

    .plus-summary__price-block span {
        font-size: .9rem;
        color: var(--muted, #6b7280);
    }

.plus-summary__price-detail {
    font-size: .85rem;
    color: var(--muted, #6b7280);
}

.plus-summary__save-badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    margin-top: 2px;
    align-self: flex-start;
}

/* dark-mode aside overrides */
.checkout-aside .plus-summary__price-block strong {
    color: #fff;
}

.checkout-aside .plus-summary__price-block span {
    color: rgba(255,255,255,.6);
}

.checkout-aside .plus-summary__price-detail {
    color: rgba(255,255,255,.6);
}

.checkout-aside .plus-summary__save-badge {
    background: rgba(52,211,153,.12);
    color: #6ee7b7;
    border-color: rgba(52,211,153,.3);
}

.plus-summary__cancel svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 30;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* ── Panel gradient — richer than the base 12% orange ── */
.checkout-aside .plus-summary {
    background-color: var(--plus-ink, #0F1425);
    background-image: radial-gradient(ellipse at 92% 4%, rgba(252, 92, 23, .22), transparent 52%), radial-gradient(ellipse at 8% 88%, rgba(130, 60, 200, .14), transparent 52%), linear-gradient(160deg, #0F1425 0%, #181F36 100%);
}

/* ── Mobile order summary accordion ─────────────── */
.order-summary-toggle {
    display: none;
}

/* Expandable wrapper — inherits plus-summary's column gap on desktop */
.plus-summary__expandable {
    display: contents; /* transparent on desktop — children behave as direct flex children */
}

@media (max-width: 640px) {
    /* Toggle bar */
    /* Flush panel bottom to the separator line when collapsed */
    .checkout-aside .plus-summary {
        padding-bottom: 0;
    }

    .order-summary-toggle {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        background: none;
        border: none;
        border-bottom: 1px solid rgba(242,238,226,.1);
        padding-bottom: 16px;
        cursor: pointer;
        text-align: left;
        color: inherit;
        font-family: inherit;
    }

    .order-summary-toggle__main {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
    }

    .order-summary-toggle__left {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .order-summary-toggle__name {
        font-size: .92rem;
        font-weight: 700;
        color: rgba(242,238,226,1);
        line-height: 1.2;
    }

    .order-summary-toggle__sub {
        font-size: .8rem;
        color: rgba(242,238,226,.72);
        line-height: 1.3;
    }

    .order-summary-toggle__right {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .order-summary-toggle__price {
        font-size: .92rem;
        font-weight: 700;
        color: rgba(242,238,226,1);
        text-align: right;
        line-height: 1.3;
    }

    .order-summary-toggle__chevron {
        width: 12px;
        height: 8px;
        stroke: rgba(242,238,226,.5);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .2s;
        flex-shrink: 0;
    }

    .order-summary-toggle[aria-expanded="true"] .order-summary-toggle__chevron {
        transform: rotate(180deg);
    }

    .order-summary-toggle__facts {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        font-size: .78rem;
        color: rgba(242,238,226,.68);
    }

    /* Hide tick row when expanded — benefits repeat it below */
    .order-summary-toggle[aria-expanded="true"] .order-summary-toggle__facts {
        display: none;
    }

    .order-summary-toggle__fact {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    .order-summary-toggle__tick {
        color: #FC5C17;
        font-size: .76rem;
        line-height: 1;
        flex-shrink: 0;
    }

    /* Expandable: hidden by default, restores bottom padding when open */
    .plus-summary__expandable {
        display: none;
        flex-direction: column;
        gap: var(--sp-4);
        padding-top: 4px;
        padding-bottom: var(--sp-5);
    }

        .plus-summary__expandable.is-open {
            display: flex;
        }
}

.checkbox label {    display: inline-block;    padding: 0;    margin-right: 0;    height: 25px;    cursor:pointer; top: 5px; position: relative;}
.checkbox label:before, .bigCheck label:before, .smallCheck label {    content: none;}
.checkbox input[type="checkbox"]{    display: none;}
.checkbox input[type="checkbox"] + label::before {   background-color:transparent; content: "";  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: inline-block; border: 2px solid #d0d0d0; height: 20px; width: 20px; padding: 0; margin: 0; position: static;  transition: background-color 250ms; }
.checkbox input[type="checkbox"] + label:hover::before { border:2px solid #079f9f; content: ""; }
.checkbox input[type="checkbox"]:checked + label::before { background-color:#079f9f; content: ""; background-image: url(https://pocketmags.imgix.net/pocketmags-spritesv5.png?auto=format&q=50); image-rendering: optimizequality; background-size:320%; background-position:-24px -255px; border:2px solid #079f9f;}
.checkbox input[type="checkbox"]:disabled + label::before {    background-color: #e1e1e1;    content: "";    border: 2px solid #d0d0d0;}
.checkbox-disabled input[type="checkbox"]:checked + label::before {    background-color: #757272;    background-image:none;    color:#fff;    font-weight: 700;    content: "!";    border: 2px solid #757272;    line-height: 20px;}
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; }
.smallCheck input[type="checkbox"] + label:before { background-color:white; border:1px #dddddd solid;  height: 15px; width: 15px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.smallCheck input[type="checkbox"]:checked + label::before {  background-size:350%; background-position:-24px -255px; border:1px #079f9f solid;}

.radiobtn {display: block; position: relative; padding-left: 30px; margin-bottom: 12px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.radiobtn input {    position: absolute;    opacity: 0;    cursor: pointer;}
.checkmark {    position: absolute;    top: 0;    left: 0;    height: 18px;    width: 18px;    background-color: #eee;    border-radius: 50%;}
.radiobtn:hover input ~ .checkmark {    background-color: #ccc;}
.radiobtn input:checked ~ .checkmark {    background-color: #079F9F;}
.checkmark:after {    content: "";    position: absolute;    display: none;}
.radiobtn input:checked ~ .checkmark:after {    display: block;}
.radiobtn .checkmark:after {    top: 5px;    left: 5px;    width: 8px;    height: 8px;    border-radius: 50%;    background: white;}