/* ═══════════════════════════════════════════════════════════════════════════
   CresvaMent — Super Mario World Overworld Map Theme
   ── SMW overworld palette ──
     --smw-sand        #e8d8a0   overworld map path / beige sand
     --smw-sand-dark   #c8b878   darker sand for borders / shadows
     --smw-sand-light  #f4eccc   lightest sand highlight
     --smw-sky         #87ceeb   overworld sky blue (main bg)
     --smw-sky-light   #d6eeff   pale sky / card surfaces
     --smw-sky-white   #f0f8ff   near-white sky for content areas
     --smw-grass       #3cb83c   overworld grass green
     --smw-grass-dark  #267326   dark grass shadow
     --smw-coin        #e8a800   coin gold
     --smw-coin-bright #ffd84e   bright coin highlight
     --smw-mario-red   #d82800   Mario red
     --smw-brick       #c87840   brick/path border
     --smw-water       #4090d8   overworld water blue
     --smw-white       #fcfcfc
     --smw-grey        #8a9aaa
     --smw-dark-grey   #3c4850
   ── SFC controller buttons (kept for accents) ──
     --sfc-btn-y   #3cb83c   Y — green
     --sfc-btn-x   #4090d8   X — sky blue
     --sfc-btn-a   #d82828   A — red
     --sfc-btn-b   #e8a800   B — gold
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Overworld map — sand / beige */
    --smw-sand:        #e8d8a0;
    --smw-sand-dark:   #111111;
    --smw-sand-light:  #f4eccc;
    /* Overworld sky — blues & white */
    --smw-sky:         #d9f4ff;
    --smw-sky-light:   #d6eeff;
    --smw-sky-white:   #aee7f2;
    /* Greens */
    --smw-grass:       #3cb83c;
    --smw-grass-dark:  #267326;
    /* Golds */
    --smw-coin:        #e8a800;
    --smw-coin-bright: #ffd84e;
    /* Accents */
    --smw-mario-red:   #d82800;
    --smw-brick:       #c87840;
    --smw-water:       #4090d8;
    --smw-purple:      #8b46c8;
    --smw-purple-dark: #5e2a93;
    /* Neutrals */
    --smw-white:       #fcfcfc;
    --smw-grey:        #8a9aaa;
    --smw-dark-grey:   #3c4850;
    /* SFC buttons */
    --sfc-btn-y:       #3cb83c;
    --sfc-btn-x:       #4090d8;
    --sfc-btn-a:       #d82828;
    --sfc-btn-b:       #e8a800;
    /* Legacy aliases — keep components from breaking */
    --smw-bg:          var(--smw-sky-white);
    --sfc-shell:       var(--smw-sand-dark);
    --sfc-shell-mid:   var(--smw-brick);
    --sfc-shell-light: #5a4a28;
    --sfc-purple:      var(--smw-water);
    --sfc-dark-purple: var(--smw-dark-grey);
    --smw-sky-bright:  var(--smw-water);
    --pixel-font:      'Silkscreen', monospace;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html, body {
    font-family: var(--pixel-font);
    font-size: 14px;
    background-color: var(--smw-sky);
    color: var(--smw-dark-grey);
    image-rendering: pixelated;
    cursor: default;
}

/* Override NES.css custom cursor images globally */
*, *::before, *::after {
    cursor: inherit;
}
a, button, [role="button"], .btn, input[type="submit"], input[type="button"], label[for], select {
    cursor: pointer;
}

/* ── CRT Overlay — off by default, enabled by body.crt-on ────────────────── */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.15) 2px,
        rgba(0, 0, 0, 0.15) 4px
    );
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s;
}
body.crt-on::after {
    opacity: 1;
}

/* Typography — no glow by default */
/* ── CRT toggle button in nav ─────────────────────────────────────────────── */
.crt-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 1rem;
    background: transparent;
    border: none;
    border-top: 1px solid var(--smw-sand-dark);
    cursor: pointer;
    font-family: var(--pixel-font);
    font-size: 0.55rem;
    color: var(--sfc-shell-light);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 0.1s, background-color 0.1s;
}
.crt-toggle:hover {
    background-color: rgba(60, 184, 60, 0.12);
    color: var(--smw-grass-dark);
}
.crt-toggle-indicator {
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid currentColor;
    border-radius: 0;
    flex-shrink: 0;
    position: relative;
}
.crt-on .crt-toggle-indicator::after {
    content: "";
    position: absolute;
    inset: 1px;
    background: var(--sfc-btn-y);
}

@media (max-width: 640px) {
    .crt-toggle {
        display: none;
    }
}

/* ── Brand logo: full wordmark on desktop, PVM bars only on mobile ── */
.brand-logo-full {
    display: block;
    width: 100%;
}

.brand-logo-compact {
    display: none;
}

@media (max-width: 640px) {
    .brand-logo-full {
        display: none;
    }

    .brand-logo-compact {
        display: inline-flex;
        align-items: center;
    }
}

/* Glow text-shadows only when CRT is on */
body.crt-on h1,
body.crt-on h2,
body.crt-on h3,
body.crt-on h4,
body.crt-on h5,
body.crt-on h6 {
    text-shadow: 1px 1px 0 rgba(255,255,255,0.4), 0 0 8px rgba(232,168,0,0.3);
}


/* ── Typography ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--pixel-font);
    color: var(--smw-dark-grey);
    text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
    letter-spacing: 0.05em;
    line-height: 1.8;
}

h1 { font-size: 1.4rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.0rem; }

p, label, .form-text, small, td, th, li, span {
    font-family: var(--pixel-font);
    font-size: 0.75rem;
    line-height: 1.9;
}

code {
    font-family: var(--pixel-font);
    font-size: 0.72rem;
    color: var(--smw-mario-red);
    background: transparent;
    padding: 0;
}

/* Silkscreen has no true bold/semibold — suppress Bootstrap weight overrides */
.fw-bold, .fw-semibold { font-weight: 400 !important; }

/* Listing price on dashboard cards */
.listing-price {
    font-family: var(--pixel-font);
    font-size: 1rem;
    color: var(--smw-grass-dark);
    margin-bottom: 0.4rem;
    letter-spacing: 0.03em;
}

/* Clickable listing cards */
.card.position-relative:hover {
    border-color: var(--smw-water);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.2) !important;
    transform: translate(-1px, -1px);
    transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
}
.card.position-relative:hover .stretched-link {
    color: var(--sfc-btn-b);
    text-shadow: none;
}

a, .btn-link {
    color: var(--smw-water);
    text-decoration: none;
}
a:hover {
    color: var(--smw-grass-dark);
    text-shadow: none;
}

/* ── NES.css overrides ────────────────────────────────────────────────────── */
.nes-container {
    background: var(--smw-sky-white) !important;
    color: var(--smw-dark-grey) !important;
    border-image-outset: 2 !important;
}
.nes-container.with-title > .title {
    font-family: var(--pixel-font);
    color: var(--smw-dark-grey);
    background: var(--smw-sky-white);
}

/* ── Bootstrap overrides ──────────────────────────────────────────────────── */

/* Cards */
.card {
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    color: var(--smw-dark-grey);
    border-radius: 0;
}
.card-header {
    background: var(--smw-sand);
    color: var(--smw-dark-grey);
    font-family: var(--pixel-font);
    font-size: 0.75rem;
    border-radius: 0;
}

/* Tables */
.table {
    color: var(--smw-dark-grey);
    border-color: var(--smw-sand-dark);
    font-size: 0.72rem;
}
.table thead th {
    background: var(--smw-sand);
    color: var(--smw-dark-grey);
    border-color: var(--smw-sand-dark);
    font-family: var(--pixel-font);
    font-size: 0.65rem;
    letter-spacing: 0.05em;
}
.table-hover tbody tr:hover {
    background-color: rgba(135, 206, 235, 0.3);
    color: var(--smw-dark-grey);
}
.table > :not(caption) > * > * {
    background-color: var(--smw-white);
    color: inherit;
    border-bottom-color: rgba(200, 184, 120, 0.5);
}
.table-light { --bs-table-bg: var(--smw-sand-light); }

/* Forms */
.form-control, .form-select {
    background-color: var(--smw-white);
    border: 2px solid var(--smw-sand-dark);
    color: var(--smw-dark-grey);
    font-family: var(--pixel-font);
    font-size: 0.72rem;
    border-radius: 0;
}
.form-control:focus, .form-select:focus {
    background-color: var(--smw-white);
    border-color: var(--smw-water);
    color: var(--smw-dark-grey);
    box-shadow: 0 0 0 2px var(--smw-water), 0 0 8px rgba(64,144,216,0.25);
}
.form-control::placeholder { color: var(--smw-grey); }
input[type="password"],
input[type="email"],
input#email {
    font-family: sans-serif;
    font-size: 0.85rem;
}
input[type="password"]:-webkit-autofill,
input[type="email"]:-webkit-autofill,
input#email:-webkit-autofill {
    font-family: sans-serif !important;
    font-size: 0.85rem !important;
}
.form-select option[value=""] { color: var(--smw-grey); }
.form-select:has(option[value=""]:checked) { color: var(--smw-grey); }
.form-label {
    color: var(--smw-dark-grey);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.form-text { color: var(--smw-grey) !important; font-size: 0.6rem; }
.form-check-input {
    background-color: var(--smw-white);
    border-color: var(--smw-sand-dark);
    border-radius: 0;
}
.form-check-input:checked {
    background-color: var(--sfc-btn-y);
    border-color: var(--smw-grass-dark);
}

/* Buttons */
.btn {
    font-family: var(--pixel-font);
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    border-radius: 0;
    border-width: 2px;
    padding: 0.4rem 0.85rem;
    text-transform: uppercase;
    transition: box-shadow 0.1s, color 0.1s, background-color 0.1s;
    /* Pixel drop shadow — classic SMW UI button look */
    box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
}
.btn:active {
    box-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    transform: translate(2px, 2px);
}
/* Primary = SFC X button — blue */
.btn-primary {
    background-color: var(--sfc-btn-x);
    border-color: var(--smw-sky-bright);
    color: var(--smw-white);
}
.btn-primary:hover {
    background-color: var(--smw-sky-bright);
    border-color: var(--smw-white);
    color: var(--smw-bg);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
}
/* Secondary = SFC shell grey */
.btn-secondary {
    background-color: var(--sfc-shell);
    border-color: var(--sfc-shell-mid);
    color: var(--smw-white);
}
.btn-secondary:hover {
    background-color: var(--sfc-shell-mid);
    border-color: var(--sfc-shell-light);
    color: var(--smw-white);
}
/* Free tier accent — black bg with grey border (matches the Free tier pill) */
.btn-free {
    background-color: var(--sfc-shell);
    border-color: var(--smw-grey);
    color: var(--smw-white);
}
.btn-free:hover {
    background-color: var(--smw-dark-grey);
    border-color: var(--smw-grey);
    color: var(--smw-white);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
}
.btn-outline-secondary {
    border-color: var(--smw-grey);
    color: var(--smw-grey);
    background: transparent;
}
.btn-outline-secondary:hover {
    background-color: var(--smw-grey);
    border-color: var(--smw-grey);
    color: var(--smw-white);
}
/* Danger = SFC A button — red */
.btn-outline-danger {
    border-color: var(--sfc-btn-a);
    color: var(--sfc-btn-a);
    background: var(--smw-white);
}
.btn-outline-danger:hover {
    background-color: var(--sfc-btn-a);
    color: var(--smw-white);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
}
.btn-danger {
    background-color: var(--sfc-btn-a);
    border-color: var(--smw-brick);
    color: var(--smw-white);
}
/* Success = SMW grass green */
.btn-success {
    background-color: var(--smw-grass);
    border-color: var(--smw-grass-dark);
    color: var(--smw-white);
}
.btn-success:hover {
    background-color: var(--smw-grass-dark);
    border-color: var(--smw-grass-dark);
    color: var(--smw-white);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
}
/* Ultra tier accent — purple */
.btn-ultra {
    background-color: var(--smw-purple);
    border-color: var(--smw-purple-dark);
    color: var(--smw-white);
}
.btn-ultra:hover {
    background-color: var(--smw-purple-dark);
    border-color: var(--smw-purple-dark);
    color: var(--smw-white);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
}
.btn-outline-primary {
    border-color: var(--sfc-btn-x);
    color: var(--smw-sky-bright);
    background: transparent;
}
.btn-outline-primary:hover {
    background-color: var(--sfc-btn-x);
    color: var(--smw-white);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
}
.btn:focus, .btn:active:focus {
    box-shadow: 0 0 0 2px var(--sfc-btn-b);
}

/* Badges */
.badge {
    font-family: var(--pixel-font);
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    border-radius: 0;
    padding: 0.35em 0.65em;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}
.bg-success {
    background-color: var(--sfc-btn-y) !important;
    color: var(--smw-white) !important;
    border: 1px solid var(--smw-grass-dark) !important;
}
.bg-secondary {
    background-color: var(--smw-dark-grey) !important;
    color: var(--smw-white) !important;
}
.bg-light {
    background-color: var(--smw-sand-light) !important;
    color: var(--smw-dark-grey) !important;
    border-color: var(--smw-sand-dark) !important;
}

/* Modals */
.modal-content {
    background: var(--smw-white);
    border: 4px solid var(--smw-sand-dark);
    border-radius: 0;
    color: var(--smw-dark-grey);
    box-shadow: 6px 6px 0 rgba(0,0,0,0.3);
}
.modal-header {
    background: var(--smw-sand);
    border-bottom: 3px solid var(--smw-sand-dark);
}
.modal-title {
    font-family: var(--pixel-font);
    font-size: 0.8rem;
    color: var(--smw-dark-grey);
    text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}
.btn-close {
    filter: none;
}
.modal-footer {
    border-top: 2px solid var(--smw-sand-dark);
    background: var(--smw-sand-light);
}

/* Alerts */
.alert-danger {
    background: #fff0ee;
    border: 2px solid var(--smw-mario-red);
    color: #8b1a0a;
    font-size: 0.65rem;
    border-radius: 0;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
}

/* optgroup / option */
optgroup { color: var(--smw-dark-grey); background: var(--smw-white); }
option   { color: var(--smw-dark-grey); background: var(--smw-white); }

/* Blazor error UI */
#blazor-error-ui {
    background: #2b0000;
    border-top: 2px solid var(--smw-mario-red);
    color: #ff8060;
    font-family: var(--pixel-font);
    font-size: 0.65rem;
    padding: 0.6rem 1.25rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    display: none;
}
#blazor-error-ui .dismiss { cursor: pointer; color: var(--smw-mario-red); }

/* ── Tag Input ────────────────────────────────────────────────────────────── */
.tag-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.5rem;
    padding: 0.35rem 0.6rem;
    border: 2px solid var(--smw-sand-dark);
    border-radius: 0;
    background: var(--smw-white);
    cursor: text;
    transition: border-color .15s, box-shadow .15s;
}
.tag-input-wrapper.focused {
    border-color: var(--smw-water);
    box-shadow: 0 0 0 2px var(--smw-water), 0 0 8px rgba(64,144,216,0.25);
}
.tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background-color: var(--sfc-btn-y);
    color: var(--smw-bg);
    border: 2px solid #a87c10;
    border-radius: 0;
    font-family: var(--pixel-font);
    font-size: 0.6rem;
    white-space: nowrap;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}
.tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(30, 34, 48, 0.7);
    font-size: 0.9rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: color .1s;
}
.tag-remove:hover { color: var(--sfc-btn-a); }
/* Include keywords — green like btn-success */
.tag-include .tag-badge {
    background-color: var(--smw-grass);
    border-color: var(--smw-grass-dark);
    color: var(--smw-white);
}
.tag-include .tag-remove { color: rgba(255,255,255,0.7); }
.tag-include .tag-remove:hover { color: var(--smw-white); }
/* Exclude keywords — red like cancel */
.tag-exclude .tag-badge {
    background-color: var(--sfc-btn-a);
    border-color: #a80009;
    color: var(--smw-white);
}
.tag-exclude .tag-remove { color: rgba(255,255,255,0.7); }
.tag-exclude .tag-remove:hover { color: var(--smw-white); }
/* Cancel button */
.btn-cancel {
    background-color: var(--sfc-btn-a);
    border-color: #a80009;
    color: var(--smw-white);
}
.btn-cancel:hover {
    background-color: #a80009;
    border-color: #a80009;
    color: var(--smw-white);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
}
.tag-input-field {
    flex: 1;
    min-width: 8rem;
    border: none;
    outline: none;
    padding: 0;
    font-family: var(--pixel-font);
    font-size: 0.65rem;
    background: transparent;
    color: var(--smw-dark-grey);
    caret-color: var(--smw-dark-grey);
}
.tag-input-field::placeholder { color: var(--smw-grey); }

/* ── Retro scrollbar ──────────────────────────────────────────────────────── */
.retro-scroll:focus {
    outline: none;
}
.retro-scroll::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}
.retro-scroll::-webkit-scrollbar-track {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
    image-rendering: pixelated;
    filter: grayscale(100%);
}
.retro-scroll::-webkit-scrollbar-track:active {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
    filter: grayscale(100%);
}
.retro-scroll::-webkit-scrollbar-thumb {
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
    background-color: #cccccc;
}
.retro-scroll::-webkit-scrollbar-corner {
    background-color: #cccccc;
}
.retro-scroll::-webkit-scrollbar-button {
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
    display: block;
    width: 16px;
    height: 16px;
    background-color: #cccccc;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    background-position: center center;
}
.retro-scroll::-webkit-scrollbar-button:active {
    background-position: 2px 2px;
    border-top: 1px solid #868a8e;
    border-left: 1px solid #868a8e;
    border-bottom: 1px solid #868a8e;
    border-right: 1px solid #868a8e;
    box-shadow: none;
}
.retro-scroll::-webkit-scrollbar-button:vertical:decrement {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
}
.retro-scroll::-webkit-scrollbar-button:vertical:increment {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
}
.retro-scroll::-webkit-scrollbar-button:vertical:increment:start,
.retro-scroll::-webkit-scrollbar-button:vertical:decrement:end {
    display: none;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50320;
}

.validation-message {
    color: #e50320;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* -- Cascading dots loading indicator -- */
.loading-dots::after {
    content: '';
    display: inline-block;
    animation: cascading-dots 1.4s steps(4, end) infinite;
}

@keyframes cascading-dots {
    0%   { content: '';   }
    25%  { content: '.';  }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: '';   }
}

/* ── Public top navigation (used on Landing, Privacy, Terms) ──────────────── */
.landing-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0 1.5rem;
    height: 4rem;
    background-color: var(--smw-sand-light);
    border-bottom: 2px solid #111111;
}

.landing-nav-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    width: 320px;
    flex-shrink: 0;
    transition: opacity 0.15s ease, filter 0.15s ease;
}

.landing-nav-brand:hover {
    opacity: 0.85;
    filter: brightness(1.15);
    cursor: pointer;
}

.landing-nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.landing-nav-link {
    font-family: var(--pixel-font);
    font-size: 0.7rem;
    color: var(--smw-dark-grey);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.1s;
}

.landing-nav-link:hover {
    color: var(--smw-coin);
}

.landing-nav-cta {
    margin-left: 0.5rem;
}

@media (max-width: 640px) {
    .landing-nav {
        gap: 0.5rem;
        padding: 0 0.75rem;
    }

    .landing-nav-brand {
        width: auto;
    }

    .landing-nav-links {
        gap: 0.5rem;
    }

    .landing-nav-link {
        font-size: 0.55rem;
        letter-spacing: 0.03em;
    }

    .landing-nav-cta {
        margin-left: 0;
    }
}

/* ── Public footer (used on Landing, Privacy, Terms) ──────────────────────── */
.landing-footer {
    /* `auto` instead of `2rem` so the footer is pushed to the bottom of the
       flex column when the page content is shorter than the viewport (short
       index/hub pages). On long pages there's no free space to absorb, so
       `auto` collapses and the footer sits naturally below the content. */
    margin-top: auto;
    background-color: var(--smw-sand-light);
    border-top: 2px solid #111111;
}

.landing-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.25rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-family: var(--pixel-font);
    font-size: 0.65rem;
    color: var(--smw-dark-grey);
    letter-spacing: 0.05em;
}

.landing-footer-links {
    display: flex;
    gap: 1.5rem;
}

.landing-footer-links a {
    font-family: var(--pixel-font);
    font-size: 0.65rem;
    color: var(--smw-dark-grey);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.1s;
}

.landing-footer-links a:hover {
    color: var(--smw-coin);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Landing page sections — shared across /, /video-game-alerts, /pc-parts-alerts.
   Visuals mirror the Billing plan-card pattern and the MainLayout top-bar
   so the pages drop seamlessly into the SMW pixel theme.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.landing-hero {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem 3rem;
}

@media (max-width: 900px) {
    .landing-hero {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 2.5rem 1.25rem 2rem;
    }
}

.landing-hero-copy {
    min-width: 0;
}

.landing-hero-headline {
    font-family: var(--pixel-font);
    font-size: 2.2rem;
    line-height: 1.5;
    color: var(--smw-dark-grey);
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.7),
                 4px 4px 0 rgba(0, 0, 0, 0.12);
    letter-spacing: 0.04em;
    margin: 0 0 1.4rem;
}

@media (max-width: 600px) {
    .landing-hero-headline {
        font-size: 1.6rem;
    }
}

.landing-hero-sub {
    font-family: var(--pixel-font);
    font-size: 0.85rem;
    line-height: 1.9;
    color: var(--smw-dark-grey);
    margin: 0 0 1.75rem;
    max-width: 36rem;
}

.landing-cta-primary {
    font-size: 0.78rem !important;
    padding: 0.85rem 1.6rem !important;
}

.landing-hero-disclaimer {
    margin-top: 0.85rem;
    font-family: var(--pixel-font);
    font-size: 0.6rem;
    color: var(--smw-grey);
    letter-spacing: 0.04em;
}

/* ── Hero visual placeholder ─────────────────────────────────────────────── */
.landing-hero-visual {
    min-width: 0;
}

.landing-screenshot-frame {
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.3);
    padding: 0.5rem;
    border-radius: 0;
}

.landing-screenshot-image {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
}

.landing-screenshot-placeholder {
    aspect-ratio: 4 / 5;
    width: 100%;
    background:
        repeating-linear-gradient(
            45deg,
            var(--smw-sand-light) 0 12px,
            var(--smw-sand) 12px 24px
        );
    border: 2px dashed var(--smw-sand-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--smw-dark-grey);
    font-family: var(--pixel-font);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
}

/* ── Section frame ───────────────────────────────────────────────────────── */
.landing-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3.5rem 2rem;
}

@media (max-width: 600px) {
    .landing-section {
        padding: 2.5rem 1.25rem;
    }
}

.landing-section-title {
    text-align: center;
    font-family: var(--pixel-font);
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--smw-dark-grey);
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.6);
    letter-spacing: 0.05em;
    margin: 0 0 2.5rem;
}

/* ── Feature cards ───────────────────────────────────────────────────────── */
.landing-feature-card {
    /* Inherits global .card style (3px sand-dark border, square corners). */
    transition: transform 0.12s, box-shadow 0.12s;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.landing-feature-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
}

.landing-feature-badge {
    display: inline-block;
    font-family: var(--pixel-font);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    background: var(--sfc-btn-b);
    color: var(--smw-dark-grey);
    border: 2px solid var(--smw-sand-dark);
    padding: 0.2rem 0.55rem;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
    margin-bottom: 1rem;
}

.landing-feature-title {
    font-family: var(--pixel-font);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--smw-dark-grey);
    margin: 0 0 0.7rem;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.landing-feature-card p {
    font-family: var(--pixel-font);
    font-size: 0.72rem;
    line-height: 1.95;
    color: var(--smw-dark-grey);
    margin: 0;
}

.landing-soon-chip {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.4rem;
    padding: 0.15rem 0.4rem;
    background: var(--sfc-btn-y);
    color: var(--smw-white);
    border: 2px solid var(--smw-grass-dark);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
    font-family: var(--pixel-font);
    font-size: 0.5rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Pricing tiers (mirrors Billing's plan-card pattern) ─────────────────── */
.landing-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

@media (max-width: 768px) {
    .landing-plan-grid {
        grid-template-columns: 1fr;
    }
}

.landing-plan-card {
    display: flex;
    flex-direction: column;
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
    padding: 1.5rem 1.25rem 1.25rem;
    border-radius: 0;
}

.landing-plan-card--featured {
    border-color: var(--smw-grass-dark);
    box-shadow: 4px 4px 0 rgba(38, 115, 38, 0.4);
    position: relative;
    background: linear-gradient(180deg, var(--smw-white) 0%, var(--smw-sky-light) 100%);
}

@media (min-width: 700px) {
    .landing-plan-card--featured {
        transform: scale(1.03);
    }
}

.landing-plan-card--featured::before {
    content: "★ Recommended";
    position: absolute;
    top: -0.7rem;
    left: 0.75rem;
    background: var(--smw-grass);
    color: var(--smw-white);
    border: 2px solid var(--smw-grass-dark);
    padding: 0.15rem 0.55rem;
    font-family: var(--pixel-font);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.landing-plan-name {
    font-family: var(--pixel-font);
    font-size: 1.1rem;
    color: var(--smw-dark-grey);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
    margin-bottom: 0.5rem;
}

.landing-plan-price {
    font-family: var(--pixel-font);
    font-size: 1.6rem;
    line-height: 1.2;
    color: var(--smw-grass-dark);
    margin-bottom: 1.1rem;
    letter-spacing: 0.03em;
}

.landing-plan-per {
    font-size: 0.7rem;
    color: var(--smw-grey);
    margin-left: 0.3rem;
    letter-spacing: 0.05em;
}

.landing-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    flex: 1;
}

.landing-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.3rem 0;
    font-family: var(--pixel-font);
    font-size: 0.72rem;
    line-height: 1.7;
    color: var(--smw-dark-grey);
}

.landing-plan-features li svg {
    flex-shrink: 0;
    margin-top: 0.35rem;
    color: var(--smw-grass-dark);
}

/* ── "Who it's for" niche callouts ───────────────────────────────────────── */
.landing-niche-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .landing-niche-grid {
        grid-template-columns: 1fr;
    }
}

.landing-niche-card {
    display: flex;
    flex-direction: column;
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
    padding: 1.5rem 1.25rem 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.12s, box-shadow 0.12s;
}

.landing-niche-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
    color: inherit;
}

.landing-niche-title {
    font-family: var(--pixel-font);
    font-size: 1rem;
    color: var(--smw-dark-grey);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
    margin: 0 0 0.65rem;
}

.landing-niche-card p {
    font-family: var(--pixel-font);
    font-size: 0.72rem;
    line-height: 1.85;
    color: var(--smw-dark-grey);
    margin: 0 0 0.85rem;
}

.landing-niche-cta {
    font-family: var(--pixel-font);
    font-size: 0.65rem;
    color: var(--smw-grass-dark);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: auto;
}

/* ── Live filter tuner section (full-width product screenshot) ────────────── */
.landing-tuner-lead {
    max-width: 720px;
    margin: -1rem auto 2rem;
    text-align: center;
    font-family: var(--pixel-font);
    font-size: 0.8rem;
    line-height: 1.9;
    color: var(--smw-dark-grey);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
}

@media (max-width: 600px) {
    .landing-tuner-lead {
        font-size: 0.72rem;
        line-height: 1.8;
    }
}

.landing-tuner-frame {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.3);
    padding: 0.5rem;
    border-radius: 0;
}

.landing-tuner-image {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
}

.landing-tuner-cta-wrap {
    text-align: center;
    margin-top: 2.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Blog — shared between /blog (Blog.razor) and /blog/{slug} (BlogPost.razor).
   These styles cannot live in Blog.razor.css because Blazor scoped CSS only
   applies to elements rendered by its companion component — the post detail
   page lives in a different component, so its styles need to be global.
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-header {
    max-width: 820px;
    margin: 2.5rem auto 1.5rem;
    padding: 2.25rem 2rem 1.75rem;
    text-align: center;
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25);
}

.blog-header-title {
    font-family: var(--pixel-font);
    font-size: 1.9rem;
    line-height: 1.5;
    color: var(--smw-dark-grey);
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.7),
                 4px 4px 0 rgba(0, 0, 0, 0.12);
    letter-spacing: 0.04em;
    margin: 0 0 1.1rem;
}

.blog-header-sub {
    font-family: var(--pixel-font);
    font-size: 0.85rem;
    line-height: 1.9;
    color: var(--smw-dark-grey);
    margin: 0 auto;
    max-width: 36rem;
}

@media (max-width: 600px) {
    .blog-header {
        margin: 1.5rem 1rem 1rem;
        padding: 1.75rem 1.25rem 1.25rem;
    }

    .blog-header-title {
        font-size: 1.4rem;
    }
}

.blog-index {
    max-width: 820px;
    margin: 0 auto;
    padding: 1rem 2rem 4rem;
}

.blog-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.blog-card {
    display: block;
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
    padding: 1.4rem 1.5rem 1.3rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.12s, box-shadow 0.12s;
}

.blog-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
    color: inherit;
}

.blog-card-date {
    display: block;
    font-family: var(--pixel-font);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--smw-grey);
    margin-bottom: 0.5rem;
}

.blog-card-title {
    font-family: var(--pixel-font);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--smw-dark-grey);
    margin: 0 0 0.6rem;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.blog-card-desc {
    font-family: var(--pixel-font);
    font-size: 0.7rem;
    line-height: 1.85;
    color: var(--smw-dark-grey);
    margin: 0 0 0.75rem;
}

.blog-card-cta {
    font-family: var(--pixel-font);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--smw-grass-dark);
}

.blog-empty {
    text-align: center;
    font-family: var(--pixel-font);
    font-size: 0.8rem;
    color: var(--smw-grey);
    padding: 3rem 1rem;
}

/* ── Single-post layout ───────────────────────────────────────────────────── */
.blog-post {
    max-width: 820px;
    margin: 2.5rem auto 4rem;
    padding: 2.5rem 2.5rem 2.75rem;
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25);
}

.blog-post-meta {
    font-family: var(--pixel-font);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--smw-grey);
    margin-bottom: 0.75rem;
}

.blog-post-title {
    font-family: var(--pixel-font);
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--smw-dark-grey);
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.7),
                 4px 4px 0 rgba(0, 0, 0, 0.12);
    letter-spacing: 0.04em;
    margin: 0 0 2rem;
}

@media (max-width: 600px) {
    .blog-post {
        margin: 1.5rem 1rem 2.5rem;
        padding: 1.5rem 1.25rem 2rem;
    }

    .blog-post-title {
        font-size: 1.2rem;
    }
}

/* Rendered markdown body — uses a normal proportional font so 1000-word
   articles are actually readable, while keeping the pixel SMW vibe on
   structural elements (h2/h3). */
.blog-post-body {
    font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--smw-dark-grey);
}

.blog-post-body h2 {
    font-family: var(--pixel-font);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--smw-dark-grey);
    letter-spacing: 0.04em;
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--smw-sand-dark);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.blog-post-body h3 {
    font-family: var(--pixel-font);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--smw-dark-grey);
    letter-spacing: 0.03em;
    margin: 1.75rem 0 0.75rem;
}

.blog-post-body p {
    margin: 0 0 1.1rem;
}

.blog-post-body ul,
.blog-post-body ol {
    margin: 0 0 1.2rem 1.4rem;
    padding: 0;
}

.blog-post-body li {
    margin: 0.4rem 0;
}

.blog-post-body strong {
    color: var(--smw-dark-grey);
    font-weight: 700;
}

.blog-post-body a {
    color: var(--smw-grass-dark);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.blog-post-body a:hover {
    color: var(--smw-coin);
}

.blog-post-body blockquote {
    margin: 1.25rem 0;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--smw-grass);
    background: var(--smw-sand-light);
    color: var(--smw-dark-grey);
    font-style: italic;
}

.blog-post-body code {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.9em;
    background: var(--smw-sand-light);
    border: 1px solid var(--smw-sand-dark);
    padding: 0.05em 0.35em;
}

.blog-post-body pre {
    background: var(--smw-sand-light);
    border: 2px solid var(--smw-sand-dark);
    padding: 0.85rem 1rem;
    overflow-x: auto;
    margin: 1.25rem 0;
}

.blog-post-body pre code {
    background: transparent;
    border: 0;
    padding: 0;
}

.blog-post-body hr {
    border: 0;
    border-top: 2px dashed var(--smw-sand-dark);
    margin: 2rem 0;
}

/* CTA box at the end of each post — directs reader to the relevant landing. */
.blog-post-cta {
    margin-top: 3rem;
    padding: 1.5rem 1.5rem 1.4rem;
    background: var(--smw-white);
    border: 3px solid var(--smw-grass-dark);
    box-shadow: 4px 4px 0 rgba(38, 115, 38, 0.4);
}

.blog-post-cta-title {
    font-family: var(--pixel-font);
    font-size: 0.95rem;
    color: var(--smw-dark-grey);
    margin: 0 0 0.6rem;
    letter-spacing: 0.03em;
}

.blog-post-cta-body {
    font-family: var(--pixel-font);
    font-size: 0.7rem;
    line-height: 1.85;
    color: var(--smw-dark-grey);
    margin: 0 0 1rem;
}

.blog-post-back {
    display: inline-block;
    margin-top: 2rem;
    font-family: var(--pixel-font);
    font-size: 0.65rem;
    color: var(--smw-grass-dark);
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blog-post-back:hover {
    color: var(--smw-coin);
}

/* ── Deals index + console hub (mirrors blog card pattern) ────────────────── */
.deals-index,
.deals-console-hub {
    max-width: 820px;
    margin: 2.5rem auto 1rem;
    padding: 0 2rem;
}

.deals-breadcrumb {
    font-family: var(--pixel-font);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--smw-grey);
    margin: 0 0 1.25rem;
}

.deals-breadcrumb a {
    color: var(--smw-grey);
    text-decoration: none;
}

.deals-breadcrumb a:hover {
    color: var(--smw-grass-dark);
}

.deals-header {
    margin: 0 0 1.5rem;
    padding: 2.25rem 2rem 1.75rem;
    text-align: center;
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25);
}

.deals-header-title {
    font-family: var(--pixel-font);
    font-size: 1.9rem;
    line-height: 1.5;
    color: var(--smw-dark-grey);
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.7),
                 4px 4px 0 rgba(0, 0, 0, 0.12);
    letter-spacing: 0.04em;
    margin: 0 0 1.1rem;
}

.deals-header-sub {
    font-family: var(--pixel-font);
    font-size: 0.85rem;
    line-height: 1.9;
    color: var(--smw-dark-grey);
    margin: 0 auto;
    max-width: 36rem;
}

.deals-list {
    list-style: none;
    padding: 0;
    margin: 0 0 4rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.deals-card {
    display: block;
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
    padding: 1.4rem 1.5rem 1.3rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.12s, box-shadow 0.12s;
}

.deals-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
    color: inherit;
}

.deals-card-title {
    display: block;
    font-family: var(--pixel-font);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--smw-dark-grey);
    margin: 0 0 0.5rem;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.deals-card-meta {
    display: block;
    font-family: var(--pixel-font);
    font-size: 0.65rem;
    line-height: 1.85;
    color: var(--smw-grey);
}

.deals-empty {
    font-family: var(--pixel-font);
    font-size: 0.75rem;
    line-height: 1.8;
    color: var(--smw-grey);
    text-align: center;
    padding: 2rem 1rem 4rem;
}

@media (max-width: 768px) {
    .deals-index,
    .deals-console-hub {
        margin: 1.5rem auto 1rem;
        padding: 0 1rem;
    }

    .deals-header {
        padding: 1.75rem 1.25rem 1.25rem;
    }

    .deals-header-title {
        font-size: 1.4rem;
    }
}