/*
Theme Name: Lotto Checker
Theme URI: https://lottochecker.co.za
Description: South African lottery results and ticket checker. Frosted-glass design system forked from the ID Checker theme, same palette and type.
Author: Cora
Author URI: https://simplyecommerce.co.za
Version: 1.0.0
Text Domain: lottochecker
*/

/* ============================================================
   TOKENS
   ============================================================ */
:root {
    /* Base canvas */
    --bg: #fafbff;
    --bg-deep: #f3f1ff;

    /* Ambient pastels (used by the background blobs) */
    --ambient-lavender: #d9d3ff;
    --ambient-mint: #c9efe1;
    --ambient-peach: #ffd9c7;
    --ambient-sky: #cfe5ff;

    /* Glass surfaces */
    --glass-bg: rgba(255, 255, 255, 0.62);
    --glass-bg-strong: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(255, 255, 255, 0.85);
    --glass-border-soft: rgba(255, 255, 255, 0.55);
    --glass-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.9) inset,
        0 12px 40px -8px rgba(80, 76, 180, 0.10),
        0 4px 12px -4px rgba(80, 76, 180, 0.06);
    --glass-shadow-lg:
        0 1px 0 0 rgba(255, 255, 255, 0.95) inset,
        0 24px 64px -12px rgba(80, 76, 180, 0.16),
        0 8px 24px -8px rgba(80, 76, 180, 0.08);

    /* Text */
    --text-strong: #14163a;
    --text: #2a2d56;
    --text-muted: #6e7299;
    /* 5.14:1 on white, 4.97:1 on the page background. Was #9a9eba at 2.63:1, and it was
       used for "NEXT JACKPOT (ESTIMATED)", payout ranges and the footer disclaimer - the
       qualifying text a reader most needs to be able to read. */
    --text-subtle: #666b93;

    /* Primary action */
    /* 5.50:1 on white, up from #6366f1's 4.47:1. That failed AA by 0.03 for every body
       link AND for white text on the indigo buttons and active tabs. One shade darker,
       sitting between the old primary and primary-hover. */
    --primary: #5457e0;
    --primary-hover: #4f46e5;
    --primary-pressed: #4338ca;
    --primary-soft: #eef2ff;
    --primary-glow: 0 0 0 4px rgba(99, 102, 241, 0.18), 0 8px 24px -4px rgba(99, 102, 241, 0.35);

    /* Status */
    --success: #10b981;
    --success-soft: #d1fae5;
    --error: #ef4444;
    --error-soft: #fee2e2;

    /* Borders */
    --border-hairline: rgba(20, 22, 58, 0.06);
    --border-soft: rgba(20, 22, 58, 0.10);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* Type */
    --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace;

    /* Motion */
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

    /* Container */
    --max-width: 1080px;
    /* Prose measure matches the shell — text runs the full content width. */
    --measure: 1080px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}
/* The pastel ambient blobs that the glass refracts. Fixed, behind everything. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 18% 12%, var(--ambient-lavender) 0%, transparent 38%),
        radial-gradient(circle at 88% 18%, var(--ambient-peach) 0%, transparent 32%),
        radial-gradient(circle at 76% 78%, var(--ambient-mint) 0%, transparent 36%),
        radial-gradient(circle at 12% 88%, var(--ambient-sky) 0%, transparent 34%),
        var(--bg);
    filter: saturate(110%);
    pointer-events: none;
}
img { max-width: 100%; height: auto; }
a {
    color: var(--primary);
    text-decoration: none;
    transition: color 150ms var(--ease-out);
}
a:hover { color: var(--primary-hover); }
::selection { background: var(--primary); color: #fff; }
/* ============================================================
   HEADER (sticky frosted-glass nav)
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 251, 255, 0.55);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-bottom: 1px solid var(--border-hairline);
}
.site-header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0.95rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.site-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    /* Drives the wordmark colour (fill="currentColor" inside the SVG). */
    color: var(--text-strong);
    transition: color 150ms var(--ease-out);
}
.site-logo:hover,
.site-logo:focus-visible {
    color: var(--primary-hover);
}
.site-logo__svg {
    display: block;
    width: auto;
    height: 35px;
}
/* Belt-and-braces: the fingerprint icon must never inherit the hover colour;
   it uses the gradient defined in <defs>. */
.site-logo__wordmark { fill: currentColor; }
.site-nav { display: flex; align-items: center; }
.site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.site-nav__list li { list-style: none; }
.site-nav a {
    /* inline-flex + an explicit line-height so the pill is a predictable height and
       matches the dropdown toggle sitting next to it. See NAV DROPDOWNS below. */
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-pill);
    transition: color 150ms var(--ease-out), background 150ms var(--ease-out);
}
.site-nav a:hover {
    color: var(--text-strong);
    background: rgba(255, 255, 255, 0.55);
}
/* ============================================================
   MAIN
   ============================================================ */
.site-main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4.5rem;
}
/* ============================================================
   GLASS SURFACES — shared by tool / content / archive cards
   ============================================================ */
.tool-section,
.content-section {
    background: var(--glass-bg);
    backdrop-filter: saturate(150%) blur(22px);
    -webkit-backdrop-filter: saturate(150%) blur(22px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--glass-shadow);
    padding: 2.5rem 2.25rem;
    margin-bottom: 1.75rem;
    position: relative;
    overflow: hidden;
}
/* Subtle highlight along the top edge — gives the glass a refraction line */
.tool-section::before,
.content-section::before {
    content: "";
    position: absolute;
    top: 0; left: 15%; right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    pointer-events: none;
}
/* Hero gets the extra-deep shadow */
.tool-section {
    background: var(--glass-bg-strong);
    box-shadow: var(--glass-shadow-lg);
    padding: 3rem 2.25rem;
}
/* ============================================================
   HERO TOOL
   ============================================================ */
.tool-title {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 1.45rem + 1.5vw, 2.5rem);
    font-weight: 700;
    text-align: center;
    color: var(--text-strong);
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin-bottom: 0.625rem;
}
.tool-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 2rem;
}
.id-input-wrap {
    position: relative;
    margin-bottom: 1.25rem;
}
#id-input {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 1.625rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-align: center;
    color: var(--text-strong);
    padding: 1.1rem 1rem;
    background: rgba(255, 255, 255, 0.65);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background 200ms var(--ease-out);
}
#id-input::placeholder {
    color: var(--text-subtle);
    letter-spacing: 0.12em;
}
#id-input:focus {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--primary-glow);
}
#id-input.valid {
    border-color: var(--success);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16);
}
#id-input.invalid {
    border-color: var(--error);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14);
}
.id-digit-count {
    position: absolute;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    background: rgba(255, 255, 255, 0.8);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-pill);
    letter-spacing: 0;
}
/* Validation status bar */
.validation-bar {
    text-align: center;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    margin-top: 0.75rem;
    display: none;
    border: 1px solid transparent;
}
.validation-bar.show { display: block; animation: fadeUp 320ms var(--ease-out); }
.validation-bar.valid {
    background: var(--success-soft);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.3);
}
.validation-bar.invalid {
    background: var(--error-soft);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.3);
}
.checker-verify-inline { margin-top: 0.75rem; animation: fadeUp 320ms var(--ease-out); }
.checker-verify-lead {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted, #4b4a6b);
    margin: 0 0 0.55rem;
}
.checker-verify-inline .checker-verify-btn,
.checker-verify-inline a.btn-primary {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.95rem 1.25rem;
    font-size: 1rem;
    box-sizing: border-box;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* ============================================================
   RESULTS GRID — nested glass tiles
   ============================================================ */
.results-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.result-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(20, 22, 58, 0.12);
    border-radius: var(--radius-md);
    padding: 0.95rem 1.1rem;
    transition: transform 200ms var(--ease-out), background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.result-card:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(20, 22, 58, 0.18);
    transform: translateY(-1px);
}
.result-card.full-width { grid-column: auto; }
.result-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.result-value {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-strong);
    letter-spacing: -0.005em;
}
.result-value.valid { color: var(--success); }
.result-value.error { color: var(--error); }
/* ============================================================
   CONTENT TYPOGRAPHY
   ============================================================ */
/* At 1080px the shell is wide, but long-form prose reads best around a
   760px measure — cap the block text while leaving grids, tables and cards
   free to use the full width. */
.content-section > h1,
.content-section > h2,
.content-section > h3,
.content-section > h4,
.content-section > p,
.content-section > ul,
.content-section > ol,
.content-section > blockquote,
.entry-content { max-width: var(--measure); }
.content-section h1,
.content-section h2,
.content-section h3,
.content-section h4 {
    font-family: var(--font-display);
    color: var(--text-strong);
    letter-spacing: -0.02em;
}
.content-section h1 {
    font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.25rem;
}
.content-section h2 {
    font-size: 1.4375rem;
    font-weight: 700;
    margin: 2.25rem 0 0.85rem;
    line-height: 1.25;
}
.content-section h2:first-child { margin-top: 0; }
.content-section h3 {
    font-size: 1.1875rem;
    font-weight: 600;
    margin: 1.75rem 0 0.65rem;
}
.content-section p {
    margin-bottom: 1rem;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.7;
}
.content-section ul,
.content-section ol {
    margin: 0;
    /* Bullet indent moves to padding so prose lists still render their markers
       (margin is 0 per request; components with their own list rules win). */
    padding-left: 1.5rem;
    color: var(--text);
}
.content-section li { margin-bottom: 0.5rem; line-height: 1.7; }
.content-section blockquote {
    border-left: 3px solid var(--primary);
    padding: 0.85rem 1.25rem;
    margin: 1.75rem 0;
    background: rgba(99, 102, 241, 0.06);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--text-strong);
    font-style: italic;
}
.content-section strong { color: var(--text-strong); }
.content-section a {
    text-decoration: underline;
    text-decoration-color: rgba(99, 102, 241, 0.35);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: text-decoration-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.content-section a:hover {
    text-decoration-color: var(--primary);
    color: var(--primary-hover);
}
/* Tables in articles */
.entry-content table,
article table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.75rem 0;
    font-size: 0.9375rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.entry-content table thead th,
article table thead th {
    background: rgba(99, 102, 241, 0.08);
    color: var(--text-strong);
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-soft);
}
.entry-content table tbody td,
article table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-hairline);
    vertical-align: top;
}
.entry-content table tbody tr:last-child td,
article table tbody tr:last-child td { border-bottom: none; }
.entry-content table tbody tr:hover,
article table tbody tr:hover { background: rgba(99, 102, 241, 0.04); }
/* Horizontal scroll on narrow viewports so wide tables (fee schedules,
   comparison tables) don't get clipped or push the page off screen. */
@media (max-width: 720px) {
    .entry-content table,
    article table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* ============================================================
   POST META + BREADCRUMBS
   ============================================================ */
.rank-math-breadcrumb {
    margin: 0 0 1.5rem 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-pill);
    display: inline-block;
    max-width: 100%;
}
.rank-math-breadcrumb p { margin: 0; }
.rank-math-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}
.rank-math-breadcrumb a:hover {
    color: var(--primary);
}
.rank-math-breadcrumb .separator {
    margin: 0 0.5rem;
    color: var(--text-subtle);
}
.rank-math-breadcrumb .last { color: var(--text-strong); font-weight: 500; }
.entry-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-hairline);
}
.entry-header h1 { margin-bottom: 0.5rem; }
.post-meta {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 500;
}
.post-meta time { color: var(--text); }
.updated-date { color: var(--text-subtle); }
/* ============================================================
   ARCHIVE + POST LIST
   ============================================================ */
.archive-header {
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-hairline);
}
.archive-title {
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2rem);
    font-weight: 700;
    color: var(--text-strong);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}
.archive-description {
    color: var(--text-muted);
    font-size: 0.9375rem;
}
.archive-description p:last-child { margin-bottom: 0; }
.post-list { list-style: none; padding: 0; margin: 0; }
.post-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-hairline);
    transition: padding 200ms var(--ease-out);
}
.post-item:last-child { border-bottom: none; }
.post-item h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin: 0 0 0.4rem;
}
.post-item h2 a {
    color: var(--text-strong);
    text-decoration: none;
}
.post-item h2 a:hover { color: var(--primary); }
.post-excerpt {
    color: var(--text-muted);
    font-size: 0.9375rem;
    margin-top: 0.4rem;
    line-height: 1.6;
}
/* ============================================================
   POSTS GRID (homepage Latest / single Related)
   ============================================================ */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
    margin: 0.5rem 0 0.25rem;
}
.post-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(20, 22, 58, 0.10);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.15rem;
    transition: transform 200ms var(--ease-out),
                background 200ms var(--ease-out),
                border-color 200ms var(--ease-out),
                box-shadow 200ms var(--ease-out);
}
.post-card:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(99, 102, 241, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(99, 102, 241, 0.18);
}
.post-card h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
    margin: 0 0 0.35rem;
}
.post-card h3 a {
    color: var(--text-strong);
    text-decoration: none;
}
.post-card h3 a:hover {
    color: var(--primary);
}
.post-card time {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}
.post-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.55;
}
.see-all {
    margin: 1.25rem 0 0;
    text-align: right;
    font-size: 0.9rem;
}
.see-all a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}
.see-all a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.related-articles {
    margin-top: 1.75rem;
}
@media (max-width: 720px) {
    .posts-grid {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }
}
/* ============================================================
   PAGINATION
   ============================================================ */
.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 2rem 0 0.5rem;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--border-hairline);
}
.nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.85rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(8px);
    transition: all 180ms var(--ease-out);
}
.nav-links .page-numbers:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--primary);
    color: var(--primary);
}
.nav-links .page-numbers.current {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 16px -4px rgba(99, 102, 241, 0.35);
}
.nav-links .prev, .nav-links .next { padding: 0 1rem; font-weight: 500; }
.nav-links .dots {
    border: none; background: none; min-width: auto;
    padding: 0 0.25rem; color: var(--text-subtle);
}
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}
/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: rgba(250, 251, 255, 0.6);
    backdrop-filter: saturate(140%) blur(18px);
    -webkit-backdrop-filter: saturate(140%) blur(18px);
    border-top: 1px solid var(--border-hairline);
    padding: 3rem 1.5rem 1.75rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
}
/* Brand on its own row, then the three menu columns beneath it. Deliberately NOT a
   four-column row with the logo as column one: at 860px that squeezes the longest list
   ("Check tickets") to about 9ch and the game names wrap mid-word. */
.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    gap: 2.25rem;
    padding-bottom: 2.25rem;
}
/* ---- three columns of menus: Results / Check tickets / UK49s ---- */
.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 2.5rem;
}
/* Aidan's caveat: "the longer lists of items may need to be broken into two columns under
   the heading". minmax(0, ...) above is what stops a long game name forcing the track wider
   than its share and overflowing the row. */
.footer-list--split { columns: 2; column-gap: 1.5rem; }
.footer-list--split li { break-inside: avoid; }
/* ---- brand column ---- */
.footer-logo {
    display: inline-flex;
    align-items: center;
    color: var(--text-strong);
    text-decoration: none;
    transition: color 150ms var(--ease-out);
}
.footer-logo:hover { color: var(--primary-hover); }
.footer-logo .site-logo__svg { display: block; width: auto; height: 26px; }
.footer-tagline {
    margin: 1rem 0 1.1rem;
    max-width: 30ch;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
}
.footer-email {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.55);
    transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}
.footer-email:hover { color: var(--primary); border-color: var(--primary); background: rgba(255, 255, 255, 0.85); }
.footer-email svg { color: var(--primary); }
/* ---- link columns ---- */
.footer-heading {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-subtle);
    margin: 0 0 0.9rem;
}
.footer-heading--spaced { margin-top: 1.6rem; }
.footer-reports-list,
.footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-reports-list { columns: 2; column-gap: 1.5rem; }
.footer-reports-list li { break-inside: avoid; margin-bottom: 0.55rem; }
.footer-list li { margin-bottom: 0.55rem; }
.site-footer .footer-col a,
.footer-reports-list a,
.footer-list a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    line-height: 1.4;
    transition: color 150ms var(--ease-out);
}
.site-footer .footer-col a:hover,
.footer-reports-list a:hover,
.footer-list a:hover { color: var(--primary); }
.footer-reports-all {
    display: inline-block;
    margin-top: 0.9rem;
    color: var(--primary) !important;
    font-weight: 600;
    font-size: 0.82rem;
}
.footer-reports-all:hover { color: var(--primary-hover) !important; }
/* ---- bottom bar ---- */
.footer-bottom {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-top: 1.6rem;
    border-top: 1px solid var(--border-hairline);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.footer-copy { margin: 0; font-size: 0.78rem; color: var(--text-subtle); }
.site-footer .powered-by {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-subtle);
    opacity: 0.85;
    transition: opacity 150ms var(--ease-out);
}
.site-footer .powered-by:hover { opacity: 1; }
.site-footer .powered-by a { display: inline-flex; align-items: center; line-height: 0; }
.site-footer .powered-by img { height: 24px; width: auto; display: block; opacity: 0.85; }
@media (max-width: 860px) {
    .footer-inner { gap: 2rem 1.5rem; }
    /* UK49s drops under the two long lists rather than being crushed beside them. */
    .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; }
}
@media (max-width: 560px) {
    .footer-nav { grid-template-columns: 1fr; }
    /* One column per heading on a phone: two sub-columns of link text at this width gives a
       ~14ch measure and the longer game names wrap onto three lines each. */
    .footer-list--split { columns: 1; }
    .footer-reports-list { columns: 1; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
    .site-header-inner { padding: 0.85rem 1.1rem; }
    /* Desktop nav is hidden below 720px; the hamburger + off-canvas panel
       (see MOBILE HAMBURGER section) take over. */
    .site-nav { display: none; }
    .site-main { padding: 1.75rem 1.1rem 3rem; }
    .tool-section, .content-section {
        padding: 1.85rem 1.4rem;
        border-radius: var(--radius-lg);
    }
    #id-input { font-size: 1.25rem; letter-spacing: 0.14em; padding: 1rem 0.85rem; }
    .id-digit-count { right: 0.65rem; font-size: 0.7rem; }
    .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
    .result-card.full-width { grid-column: 1 / -1; }
    .content-section h1 { font-size: 1.5rem; }
    .content-section h2 { font-size: 1.25rem; }
    .content-section h3 { font-size: 1.0625rem; }
    .nav-links .page-numbers { min-width: 2.25rem; height: 2.25rem; font-size: 0.8125rem; padding: 0 0.55rem; }
    .nav-links .prev, .nav-links .next { padding: 0 0.7rem; }
}
@media (max-width: 420px) {
    /* Steps down with the logo's own size so the mark still reads on a narrow phone
       without pushing the hamburger off the row. */
    .site-logo__svg { height: 28px; }
    .tool-title { font-size: 1.5rem; }
}
@media (max-width: 399.98px) {
    .results-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   MOBILE HAMBURGER + OFF-CANVAS PANEL
   Hidden by default (desktop). Below 720px the toggle button
   shows, the desktop .site-nav hides, and the panel slides in
   from the right on toggle click. JS in js/mobile-nav.js.
   ============================================================ */
.mobile-nav-toggle { display: none; }
.mobile-nav-panel { display: none; }
@media (max-width: 720px) {
    .mobile-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 8px;
        color: var(--text-strong);
        cursor: pointer;
        transition: background 150ms var(--ease-out);
    }
    .mobile-nav-toggle:hover,
    .mobile-nav-toggle:focus-visible {
        background: rgba(255, 255, 255, 0.55);
        outline: none;
    }
    .mobile-nav-toggle:focus-visible {
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
    }
    .mobile-nav-panel {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(20, 22, 58, 0.5);
        /* visibility, not just opacity: an opacity-0 panel is still focusable, so the closed
           menu put 8 invisible tab stops ahead of the page content. */
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms var(--ease-out);
    }
    body.mobile-nav-open { overflow: hidden; }
    body.mobile-nav-open .mobile-nav-panel {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
    .mobile-nav-panel__inner {
        position: absolute;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(420px, 80vw);
        background: #fff;
        padding: 4rem 1.5rem 2rem;
        box-shadow: -10px 0 40px -10px rgba(20, 22, 58, 0.25);
        transform: translateX(100%);
        transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
    /* The panel is a fixed 100vh box. Without this the drilled game list -- 837px on the
       Check Ticket level -- is simply clipped on any phone shorter than that and cannot be
       reached at all. It happens to fit a 390x844 iPhone 14, which is why testing only on a
       tall viewport missed it; it is cut off on a 667 or 640 tall screen.
       overscroll-behavior stops the scroll chaining to the body, which is locked while open. */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
    body.mobile-nav-open .mobile-nav-panel__inner {
        transform: translateX(0);
    }
    .mobile-nav-close {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        width: 38px;
        height: 38px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 8px;
        color: var(--text-muted);
        cursor: pointer;
        transition: background 150ms var(--ease-out), color 150ms var(--ease-out);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-nav-close:hover,
    .mobile-nav-close:focus-visible {
        background: rgba(20, 22, 58, 0.05);
        color: var(--text-strong);
        outline: none;
    }
    .mobile-nav-panel__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }
    .mobile-nav-panel__list li { list-style: none; }
    .mobile-nav-panel__list a {
        display: block;
        padding: 0.85rem 0.75rem;
        color: var(--text-strong);
        text-decoration: none;
        font-weight: 500;
        font-size: 1rem;
        border-radius: 8px;
        transition: background 150ms var(--ease-out), color 150ms var(--ease-out);
    }
    .mobile-nav-panel__list a:hover,
    .mobile-nav-panel__list a:focus-visible {
        background: rgba(99, 102, 241, 0.08);
        color: var(--primary);
        outline: none;
    }
    .mobile-nav-panel__list .current-menu-item > a {
        color: var(--primary);
        background: rgba(99, 102, 241, 0.06);
    }
}
/* ============================================================
   BUTTONS (shared: theme CTAs + WooCommerce)
   ============================================================ */
/* WooCommerce ships high-specificity defaults (e.g. button.button.alt at
   0,3,1, plus block/wc-forward variants and a payment-plugin sheet that loads
   after this one), so !important on the visual props is the reliable way to
   keep every store button on the theme's indigo pill. */
.btn-primary,
/* WooCommerce's global/form-login.php — the "Returning customer?" panel on checkout — prints a bare
   .woocommerce-button with no theme class, and the checkout shell carries no .woocommerce-surface
   wrapper, so it was landing with no brand styling at all. Folded into this group rather than given
   its own rule, so it tracks the brand button automatically.                                      */
.woocommerce-form-login__submit,
.woocommerce-surface .button,
.woocommerce-surface button.button,
.woocommerce-surface .button.alt,
.woocommerce-surface .single_add_to_cart_button,
.woocommerce-surface .checkout-button,
.woocommerce-surface #place_order,
.woocommerce-surface .wp-element-button,
.woocommerce-surface .wc-block-components-button,
.iccr-card-cta,
.iccr-download-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--primary) !important;
    background-color: var(--primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    padding: 0.7rem 1.4rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none !important;
    text-transform: none !important;
    box-shadow: 0 6px 16px -4px rgba(99, 102, 241, 0.35);
    transition: background 150ms var(--ease-out), transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.btn-primary:hover,
.woocommerce-form-login__submit:hover,
.woocommerce-surface .button:hover,
.woocommerce-surface .button.alt:hover,
.woocommerce-surface .single_add_to_cart_button:hover,
.woocommerce-surface .checkout-button:hover,
.woocommerce-surface #place_order:hover,
.woocommerce-surface .wp-element-button:hover,
.woocommerce-surface .wc-block-components-button:hover,
.iccr-card-cta:hover,
.iccr-download-link:hover {
    background: var(--primary-hover) !important;
    background-color: var(--primary-hover) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -6px rgba(99, 102, 241, 0.45);
}
.btn-primary:focus-visible,
.woocommerce-surface .button:focus-visible,
.iccr-card-cta:focus-visible {
    outline: 2px solid var(--primary-pressed);
    outline-offset: 2px;
}
.btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.3rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.6);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out), background 150ms var(--ease-out);
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); background: rgba(255, 255, 255, 0.85); }
/* ============================================================
   REPORTS LANDING — hero with the sample-report visual
   ============================================================ */
.reports-hero {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 2rem;
    align-items: center;
}
.reports-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary);
    margin-bottom: 0.6rem;
}
.reports-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
    font-weight: 700;
    color: var(--text-strong);
    letter-spacing: -0.025em;
    line-height: 1.18;
    margin-bottom: 0.85rem;
}
.reports-subtitle {
    color: var(--text-muted);
    font-size: 0.98rem;
    line-height: 1.65;
    margin-bottom: 1.1rem;
}
.reports-trust { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.4rem; }
.trust-chip {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill);
    padding: 0.32rem 0.7rem;
}
.reports-hero-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0; }
/* The signature: a miniature of the deliverable — a frosted PDF report
   with a verification seal, built purely from CSS. */
.reports-hero-visual { display: flex; justify-content: center; }
.mini-report {
    position: relative;
    width: 200px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    box-shadow: var(--glass-shadow-lg);
    padding: 0.9rem 0.95rem 1.2rem;
    transform: rotate(3deg);
    animation: reportFloat 7s ease-in-out infinite;
}
@keyframes reportFloat {
    0%, 100% { transform: rotate(3deg) translateY(0); }
    50%      { transform: rotate(2.2deg) translateY(-7px); }
}
.mini-report-head {
    background: var(--text-strong);
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.7rem;
}
.mini-report-brand { display: block; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.68rem; }
.mini-report-brand b { color: #a5b4fc; }
.mini-report-type { display: block; color: #c7d2fe; font-size: 0.55rem; margin-top: 2px; }
.mini-report-row {
    height: 7px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(20, 22, 58, 0.14), rgba(20, 22, 58, 0.07));
    margin-bottom: 7px;
}
.mini-report-row.w90 { width: 90%; } .mini-report-row.w80 { width: 80%; }
.mini-report-row.w70 { width: 70%; } .mini-report-row.w60 { width: 60%; }
.mini-report-row.w50 { width: 50%; }
.mini-report-photo {
    width: 44px;
    height: 54px;
    border-radius: 5px;
    margin: 4px 0 9px;
    background:
        radial-gradient(circle at 50% 32%, var(--primary) 0 9px, transparent 10px),
        radial-gradient(ellipse at 50% 92%, var(--primary) 0 16px, transparent 17px),
        #e3e5f5;
    border: 1px solid var(--border-soft);
}
.mini-report-seal {
    position: absolute;
    right: -14px;
    bottom: 16px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--success-soft);
    border: 2px solid var(--success);
    color: #047857;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.25;
    transform: rotate(-12deg);
    box-shadow: 0 8px 20px -6px rgba(16, 185, 129, 0.45);
}
/* ---- report card grid (markup from the plugin) ---- */
.iccr-group { margin-bottom: 2rem; }
.iccr-group:last-child { margin-bottom: 0; }
.iccr-group-title {
    font-family: var(--font-display);
    font-size: 0.8rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--text-muted);
    margin: 0 0 0.85rem !important;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-hairline);
}
.iccr-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}
.iccr-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(20, 22, 58, 0.10);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.2rem 1.05rem;
    transition: transform 200ms var(--ease-out), background 200ms var(--ease-out),
                border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.iccr-card:hover {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(99, 102, 241, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(99, 102, 241, 0.2);
}
.iccr-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.iccr-card-title {
    font-family: var(--font-display);
    font-size: 1.02rem !important;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--text-strong);
    margin: 0 0 0.3rem !important;
}
.iccr-chip {
    flex-shrink: 0;
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
}
.iccr-card-tagline { color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; margin: 0 0 0.6rem !important; }
.iccr-card-includes {
    list-style: none;
    margin: 0 0 0.9rem 0 !important;
    padding: 0 !important;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.iccr-card-includes li { padding-left: 1.1rem; position: relative; margin-bottom: 0.28rem !important; line-height: 1.45; }
.iccr-card-includes li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.iccr-card-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border-hairline);
}
.iccr-card-price { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text-strong); }
.iccr-card-price .woocommerce-Price-amount { font-size: inherit; }
.iccr-card-cta { padding: 0.5rem 1rem; font-size: 0.8rem; }
/* ---- how it works ---- */
.hiw-steps { list-style: none; margin: 0 !important; padding: 0 !important; counter-reset: hiw; }
.hiw-steps li {
    counter-increment: hiw;
    position: relative;
    padding: 0 0 1.4rem 3.2rem;
    margin: 0 !important;
}
.hiw-steps li::before {
    content: counter(hiw);
    position: absolute;
    left: 0; top: 0;
    width: 2.2rem; height: 2.2rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-soft);
    color: var(--primary-pressed);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
}
.hiw-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 1.1rem; top: 2.4rem; bottom: 0.2rem;
    width: 1px;
    background: var(--border-soft);
}
.hiw-steps h3 { margin: 0.15rem 0 0.3rem !important; font-size: 1.05rem !important; }
.hiw-steps p { margin: 0 !important; font-size: 0.92rem; color: var(--text-muted); }
.hiw-guarantee {
    margin: 0.5rem 0 0 !important;
    padding: 0.85rem 1.1rem;
    background: var(--success-soft);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: #065f46;
}
/* ---- FAQ ---- */
.reports-faq details {
    border-bottom: 1px solid var(--border-hairline);
    padding: 0.9rem 0.25rem;
}
.reports-faq details:last-of-type { border-bottom: none; }
.reports-faq summary {
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--text-strong);
    list-style: none;
    position: relative;
    padding-right: 1.8rem;
}
.reports-faq summary::-webkit-details-marker { display: none; }
.reports-faq summary::after {
    content: "+";
    position: absolute; right: 0.25rem; top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: 500;
    transition: transform 200ms var(--ease-out);
}
.reports-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.reports-faq details p { margin: 0.7rem 0 0 !important; font-size: 0.92rem; color: var(--text-muted); }
/* ============================================================
   WOOCOMMERCE — glassified storefront
   ============================================================ */
.woocommerce-surface .woocommerce-breadcrumb,
.woocommerce-surface .onsale,
.woocommerce-surface .woocommerce-products-header { display: none; }
.woocommerce-surface h1.product_title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-strong);
    margin-bottom: 0.4rem;
}
.woocommerce-surface div.product { display: block; }
.woocommerce-surface div.product .summary { width: 100%; float: none; }
.woocommerce-surface div.product p.price {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 0.9rem;
}
.woocommerce-surface div.product p.price .woocommerce-Price-amount { color: var(--text-strong); }
.woocommerce-surface .woocommerce-product-details__short-description {
    color: var(--text-muted);
    font-size: 0.98rem;
    margin-bottom: 1.1rem;
}
/* report input fields (plugin markup) */
.iccr-fields {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.3rem 0.9rem;
    margin: 0 0 1.1rem;
}
.iccr-fields-title {
    font-family: var(--font-display);
    font-size: 0.95rem !important;
    font-weight: 600;
    color: var(--text-strong);
    margin: 0 0 0.8rem !important;
}
.iccr-fields-hint { font-size: 0.8rem; color: var(--text-muted); margin: -0.4rem 0 0.8rem !important; }
.iccr-field { margin: 0 0 0.9rem !important; }
.iccr-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 0.3rem;
}
.iccr-field input,
.woocommerce-surface .form-row input.input-text,
.woocommerce-surface .form-row textarea,
.woocommerce-surface .form-row select,
.woocommerce-surface select#iccr_purpose {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-strong);
    padding: 0.7rem 0.85rem;
    background: rgba(255, 255, 255, 0.75);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.iccr-field input:focus,
.woocommerce-surface .form-row input.input-text:focus,
.woocommerce-surface .form-row textarea:focus,
.woocommerce-surface .form-row select:focus,
.woocommerce-surface select#iccr_purpose:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.iccr-field input[data-iccr-said] {
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
}
.iccr-field-help { display: block; font-size: 0.72rem; color: var(--text-subtle); margin-top: 0.3rem; }
.iccr-field-feedback { display: block; font-size: 0.78rem; font-weight: 600; margin-top: 0.3rem; min-height: 1em; color: var(--text-muted); }
.iccr-field-feedback.is-valid { color: var(--success); }
.iccr-field-feedback.is-invalid { color: var(--error); }
.iccr-review-note {
    font-size: 0.78rem;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.75rem;
    margin: 0 0 0.4rem !important;
}
.woocommerce-surface form.cart { margin-bottom: 1.25rem; }
.woocommerce-surface form.cart div.quantity { display: none; }
.woocommerce-surface .single_add_to_cart_button { font-size: 1rem; padding: 0.85rem 1.8rem; }
/* product long description panel */
.woocommerce-surface .woocommerce-tabs ul.tabs { display: none; }
.woocommerce-surface .woocommerce-tabs .panel {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-hairline);
}
.woocommerce-surface .woocommerce-tabs .panel > h2 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.iccr-includes { list-style: none; margin-left: 0 !important; }
.iccr-includes li { padding-left: 1.4rem; position: relative; }
.iccr-includes li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.iccr-disclaimer-note { font-size: 0.85rem; color: var(--text-subtle); }
/* related products + shop archive grid */
.woocommerce-surface ul.products {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
    margin: 0.75rem 0 0 !important;
    padding: 0;
}
.woocommerce-surface ul.products li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(20, 22, 58, 0.10);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.15rem !important;
    transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.woocommerce-surface ul.products li.product:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 10px 24px -8px rgba(99, 102, 241, 0.2);
}
.woocommerce-surface ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-strong);
    padding: 0;
}
.woocommerce-surface ul.products li.product .price { color: var(--text-strong); font-weight: 700; margin: 0.4rem 0; }
.woocommerce-surface .related.products > h2,
.woocommerce-surface section.related > h2 {
    font-size: 1.15rem;
    margin: 2rem 0 0.5rem;
    font-family: var(--font-display);
    color: var(--text-strong);
}
/* notices */
.woocommerce-surface .woocommerce-message,
.woocommerce-surface .woocommerce-info,
.woocommerce-surface .woocommerce-error {
    list-style: none;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 0.9rem 1.1rem 0.9rem 1.1rem;
    margin-bottom: 1.25rem;
    background: rgba(255, 255, 255, 0.7);
    color: var(--text);
    font-size: 0.92rem;
}
.woocommerce-surface .woocommerce-message { border-color: rgba(16, 185, 129, 0.4); background: var(--success-soft); color: #065f46; }
.woocommerce-surface .woocommerce-error { border-color: rgba(239, 68, 68, 0.4); background: var(--error-soft); color: #b91c1c; }
.woocommerce-surface .woocommerce-info { border-color: rgba(99, 102, 241, 0.35); background: var(--primary-soft); color: var(--primary-pressed); }
.woocommerce-surface .woocommerce-error li { margin: 0.2rem 0; }
/* WooCommerce injects a default Star-icon glyph via ::before on notices and
   on the empty-cart paragraph — at the theme's 1.1rem padding it overlaps
   the first character of the text. Coloured background + border already
   communicate state, so kill the icon everywhere it appears. */
.woocommerce-surface .woocommerce-message::before,
.woocommerce-surface .woocommerce-info::before,
.woocommerce-surface .woocommerce-error::before,
.woocommerce-surface .cart-empty::before,
.woocommerce-surface .wc-block-components-notice-banner__content::before,
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce .cart-empty::before,
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    display: none;
    content: none;
}
.woocommerce-surface .woocommerce-message .button,
.woocommerce-surface .woocommerce-info .button,
.woocommerce-surface .woocommerce-error .button {
    float: right;
    padding: 0.35rem 0.85rem;
    font-size: 0.78rem;
    margin-left: 0.75rem;
}
/* tables: cart + order review + orders */
.woocommerce-surface table.shop_table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.55);
    font-size: 0.92rem;
    margin-bottom: 1.5rem;
}
.woocommerce-surface table.shop_table th {
    background: rgba(99, 102, 241, 0.08);
    color: var(--text-strong);
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-soft);
}
.woocommerce-surface table.shop_table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-hairline);
    vertical-align: middle;
}
.woocommerce-surface table.shop_table tr:last-child td { border-bottom: none; }
.woocommerce-surface table.shop_table dl.variation,
.woocommerce-surface table.shop_table .wc-item-meta { font-size: 0.78rem; color: var(--text-muted); margin: 0.3rem 0 0; list-style: none; }
.woocommerce-surface table.shop_table dl.variation dt,
.woocommerce-surface table.shop_table .wc-item-meta strong { font-weight: 600; color: var(--text); }
.woocommerce-surface a.remove {
    color: var(--error) !important;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
}
.woocommerce-surface .cart_totals h2 { font-size: 1.15rem; margin: 0 0 0.6rem; }
.woocommerce-surface .wc-proceed-to-checkout { text-align: right; }
.woocommerce-surface .checkout-button { font-size: 1rem !important; padding: 0.85rem 1.8rem !important; }
.woocommerce-surface .coupon { display: flex; gap: 0.5rem; align-items: center; }
.woocommerce-surface .coupon input.input-text {
    width: 160px;
    padding: 0.55rem 0.75rem;
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.75);
}
/* checkout */
.woocommerce-surface .col2-set { display: block; }
.woocommerce-surface .col2-set .col-1,
.woocommerce-surface .col2-set .col-2 { width: 100%; float: none; }
.woocommerce-surface form.checkout h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--text-strong);
    margin: 1.5rem 0 0.75rem;
}
.woocommerce-surface .form-row { margin-bottom: 0.85rem; }
.woocommerce-surface .form-row label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 0.3rem;
}
.woocommerce-surface .form-row .required { color: var(--error); text-decoration: none; }
.woocommerce-surface #order_review_heading { margin-top: 1.75rem; }
/* consent block (plugin markup) — the CPA s49 conspicuous notice */
.iccr-consent {
    margin: 1.25rem 0;
    padding: 1.2rem 1.25rem;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
}
.iccr-consent-important {
    background: #fef3c7;
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}
.iccr-consent-important strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #92400e;
    margin-bottom: 0.35rem;
}
.iccr-consent-important p { margin: 0 !important; font-size: 0.82rem; color: #78350f; line-height: 1.55; }
.iccr-consent-purpose { margin-bottom: 1rem !important; }
/* The purpose options are long sentences; without a hard clamp the select
   sizes to its widest option and bursts out of the consent panel.
   min-width:0 matters: a competing min-width beats width even with
   !important, and it's what lets the control actually shrink. */
.iccr-consent select,
.woocommerce-surface select#iccr_purpose {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    text-overflow: ellipsis;
}
.iccr-consent-check { margin-bottom: 0.85rem !important; }
.iccr-consent-check label {
    display: flex !important;
    gap: 0.6rem;
    align-items: flex-start;
    font-weight: 400 !important;
    cursor: pointer;
}
.iccr-consent-check input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.2rem;
    accent-color: var(--primary);
}
.iccr-consent-check span { font-size: 0.8rem; color: var(--text-muted); line-height: 1.55; }
.woocommerce-surface .woocommerce-terms-and-conditions-wrapper { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1rem; }
.woocommerce-surface #place_order { width: 100%; font-size: 1.05rem; padding: 1rem 1.5rem; }
/* ---- payment methods: title left, logo card(s) right ---- */
.woocommerce-checkout #payment ul.payment_methods li {margin-bottom:15px}
.woocommerce-surface .wc_payment_methods { list-style: none; margin: 0 0 1.25rem !important; padding: 0; }
.woocommerce-surface .wc_payment_method {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 0 0.95rem;
    margin-bottom: 0.6rem;
    transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}
.woocommerce-surface .wc_payment_method:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-soft);
}
.woocommerce-surface .wc_payment_method > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0.7rem 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-strong);
    cursor: pointer;
}
/* one or several logo cards, always sitting at the right edge of the row */
.woocommerce-surface .wc_payment_method > label img,
.woocommerce-surface .wc_payment_method > label .pay-logos { margin-left: auto; }
.woocommerce-surface .pay-logos { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; }
/* Several logos on a narrow screen: drop the logo row below the title and
   tighten the cards so they all fit on a single line. */
@media (max-width: 560px) {
    .woocommerce-surface .wc_payment_method > label { flex-wrap: wrap; }
    .woocommerce-surface .wc_payment_method > label .pay-logos {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
        margin-top: 0.25rem;
        gap: 0.3rem;
    }
    .woocommerce-surface .wc_payment_method > label img { padding: 3px 5px !important; }
}
/* !important: WooCommerce's #payment ... img rule (ID-level specificity) zeroes
   the padding/shadow otherwise, so the logos sit flush instead of in cards. */
.woocommerce-surface .wc_payment_method > label img {
    height: 15px !important;
    width: auto !important;
    max-width: 120px;
    padding: 4px 6px !important;
    background: #fff !important;
    border: 1px solid var(--border-hairline) !important;
    border-radius: 5px !important;
    box-shadow: 0 1px 2px rgba(20, 22, 58, 0.06) !important;
    box-sizing: content-box !important;
    vertical-align: middle;
    margin: 0;
}
/* Description sits tight under the label, no WC grey box or arrow. */
.woocommerce-surface .wc_payment_method .payment_box {
    padding: 0 0 0.7rem !important;
    margin: -0.35rem 0 0 !important;
    background: transparent !important;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-muted);
}
.woocommerce-surface .wc_payment_method .payment_box::before { display: none !important; }
.woocommerce-surface .wc_payment_method .payment_box p { margin: 0; }
/* Payfast / Stitch / WooCommerce redirect overlay. BlockUI writes inline dimensions,
   so the centering and width need !important to stay usable on mobile. */
.blockUI.blockOverlay,
.woocommerce .blockUI.blockOverlay,
.woocommerce-page .blockUI.blockOverlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(250, 251, 255, 0.72) !important;
    opacity: 1 !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.blockUI.blockMsg.blockElement,
.woocommerce .blockUI.blockMsg.blockElement,
.woocommerce-page .blockUI.blockMsg.blockElement,
.woocommerce-surface #payfast_payment_form,
.woocommerce-surface #payfast-form,
.woocommerce-surface .payfast-payment-form,
.woocommerce-surface .payfast-redirect,
.woocommerce-surface .payfast_redirect,
.woocommerce-surface #stitch_payment_form,
.woocommerce-surface #stitch-form,
.woocommerce-surface .stitch-payment-form,
.woocommerce-surface .stitch-redirect,
.woocommerce-surface .stitch_redirect {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(380px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 1.35rem 1.25rem !important;
    background: rgba(252, 252, 255, 0.98) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--glass-shadow-lg) !important;
    color: var(--text) !important;
    font-family: var(--font-body) !important;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    text-align: center !important;
    z-index: 100000 !important;
}
.blockUI.blockMsg.blockElement::before,
.woocommerce .blockUI.blockMsg.blockElement::before,
.woocommerce-page .blockUI.blockMsg.blockElement::before {
    content: "";
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto 0.85rem;
    border: 3px solid rgba(99, 102, 241, 0.18);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: paymentRedirectSpin 800ms linear infinite;
}
@keyframes paymentRedirectSpin {
    to { transform: rotate(360deg); }
}
.woocommerce-surface #payfast_payment_form input[type="submit"],
.woocommerce-surface #payfast-form input[type="submit"],
.woocommerce-surface .payfast-payment-form input[type="submit"],
.woocommerce-surface .payfast-redirect input[type="submit"],
.woocommerce-surface .payfast_redirect input[type="submit"],
.woocommerce-surface #stitch_payment_form input[type="submit"],
.woocommerce-surface #stitch-form input[type="submit"],
.woocommerce-surface .stitch-payment-form input[type="submit"],
.woocommerce-surface .stitch-redirect input[type="submit"],
.woocommerce-surface .stitch_redirect input[type="submit"] {
    width: 100% !important;
    margin-top: 0.85rem !important;
}
/* ---- thank-you / order-received page ---- */
/* The hero replaces the page's "Checkout" title and the default success notice. */
body.woocommerce-order-received .site-main .content-section > h1 { display: none; }
.woocommerce-surface .woocommerce-thankyou-order-received:empty,
.ty-hero ~ .woocommerce-thankyou-order-received { display: none; }
.ty-hero {
    text-align: center;
    padding: 0.5rem 0 1.75rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-hairline);
}
.ty-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--success-soft);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.4);
    margin-bottom: 1rem;
    animation: tyPop 360ms var(--ease-out) both;
}
@keyframes tyPop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ty-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem) !important;
    font-weight: 700;
    color: var(--text-strong);
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem !important;
}
.ty-sub {
    max-width: 34rem;
    margin: 0 auto !important;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}
.ty-sub strong { color: var(--text); }
/* upsell */
.ty-upsell {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border-hairline);
}
.ty-upsell-title {
    font-family: var(--font-display);
    font-size: 1.25rem !important;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0 0 0.25rem !important;
}
.ty-upsell-sub { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 1.1rem !important; }
.ty-upsell-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
.ty-upsell-name { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--text-strong); line-height: 1.3; }
.ty-upsell-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; }
.ty-upsell-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.55rem; }
.ty-upsell-price { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); }
.ty-upsell-cta { font-size: 0.78rem; font-weight: 600; color: var(--primary); }
.ty-upsell-all { margin: 1.1rem 0 0 !important; }
.ty-upsell-all a { color: var(--primary); font-weight: 600; font-size: 0.85rem; }
@media (max-width: 640px) {
    .ty-upsell-grid { grid-template-columns: 1fr; }
}
/* thank-you / account order view: report downloads (plugin markup) */
.iccr-downloads {
    margin: 1.75rem 0;
    padding: 1.4rem 1.5rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(99, 102, 241, 0.06));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-lg);
}
.iccr-downloads h2 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--text-strong);
    margin: 0 0 0.75rem;
}
.iccr-download-list { list-style: none; margin: 0; padding: 0; }
.iccr-download-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border-hairline);
    font-size: 0.92rem;
}
.iccr-download-list li:last-child { border-bottom: none; }
.iccr-download-name { font-weight: 600; color: var(--text-strong); }
.iccr-download-link { padding: 0.45rem 1rem; font-size: 0.8rem; }
.iccr-retention-note { margin: 0.85rem 0 0 !important; font-size: 0.75rem; color: var(--text-subtle); }
/* order confirmation details */
.woocommerce-surface .woocommerce-order-overview {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1.5rem !important;
    padding: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.woocommerce-surface .woocommerce-order-overview li {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 0.6rem 1rem 0.7rem !important;
    margin: 0 !important;
    line-height: 1.35;
    min-width: 7rem;
}
.woocommerce-surface .woocommerce-order-overview strong { display: block; color: var(--text-strong); font-size: 0.9rem; }
/* structure formerly provided by woocommerce-layout.css (now dequeued):
   paired checkout fields side by side, cart totals as a right column.
   Mirrors Woo's own breakpoint (768px) for the stacked mobile layout. */
.woocommerce-surface form .form-row-first { float: left; width: 47%; }
.woocommerce-surface form .form-row-last { float: right; width: 47%; }
.woocommerce-surface form .form-row-wide { clear: both; }
.woocommerce-surface form::after { content: ""; display: table; clear: both; }
.woocommerce-surface .cart-collaterals .cart_totals { float: right; width: 48%; }
.woocommerce-surface .cart-collaterals::after { content: ""; display: table; clear: both; }
@media (max-width: 768px) {
    .woocommerce-surface form .form-row-first,
    .woocommerce-surface form .form-row-last { float: none; width: 100%; }
    .woocommerce-surface .cart-collaterals .cart_totals { float: none; width: 100%; }
}
/* my account */
.woocommerce-surface .woocommerce-MyAccount-navigation {
    /* Woo core floats this at 30%, squeezing the pills into a ragged column
       and letting the content wrap around the float (first row indented,
       the rest full-width). The design is a full-width pill bar on top. */
    float: none;
    width: 100%;
}
.woocommerce-surface .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-left: auto;
}
.woocommerce-surface .woocommerce-MyAccount-navigation ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.5rem;
    padding: 0;
}
.woocommerce-surface .woocommerce-MyAccount-navigation li a {
    display: inline-block;
    padding: 0.45rem 0.95rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.6);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}
.woocommerce-surface .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-surface .woocommerce-MyAccount-navigation li a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.woocommerce-surface .woocommerce-MyAccount-content { float: none; width: 100%; }
/* pricing page table (plugin shortcode) */
.iccr-price-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.92rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.iccr-price-table th {
    background: rgba(99, 102, 241, 0.08);
    color: var(--text-strong);
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-soft);
}
.iccr-price-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-hairline); vertical-align: top; }
.iccr-price-table tr:last-child td { border-bottom: none; }
.iccr-price-cell { white-space: nowrap; font-weight: 700; color: var(--text-strong); }
.iccr-price-note { font-size: 0.82rem; color: var(--text-subtle); }
/* qty placeholder in cart for report items */
.iccr-qty { font-weight: 600; color: var(--text-muted); }
/* ---- responsive ---- */
@media (max-width: 720px) {
    .reports-hero { grid-template-columns: 1fr; }
    .reports-hero-visual { order: -1; }
    .mini-report { width: 170px; }
    .iccr-grid { grid-template-columns: 1fr; }
    .woocommerce-surface ul.products { grid-template-columns: 1fr; }
    .woocommerce-surface .coupon { flex-wrap: wrap; }
    .woocommerce-surface .coupon input.input-text { width: 100%; }
}
/* ============================================================
   HEADER ACTIONS — cart + account cluster
   ============================================================ */
/* Sticky header sits below the WP admin bar when logged in as staff. */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
    body.admin-bar .site-header { top: 46px; }
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.cart-menu { position: relative; }
.cart-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border-soft);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    color: var(--text-muted);
    transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}
.cart-toggle:hover,
.cart-menu:focus-within .cart-toggle {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.9);
}
.cart-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    border: 2px solid #fff;
    line-height: 1;
}
.cart-count.is-empty { display: none; }
/* mini-cart dropdown (hover/focus on desktop; tap goes straight to basket).
   Near-opaque on purpose: backdrop-filter is inert on descendants of the
   header (its own backdrop-filter forms an isolating backdrop root), so a
   translucent panel here would show sharp page content through it. */
.cart-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: -52px;
    width: 320px;
    background: rgba(252, 252, 255, 0.98);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow-lg);
    padding: 1rem 1.1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 180ms;
    z-index: 110;
}
@media (hover: hover) {
    .cart-menu:hover .cart-dropdown,
    .cart-menu:focus-within .cart-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}
.cart-dropdown .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.cart-dropdown .woocommerce-mini-cart-item {
    position: relative;
    /* !important: WC's own mini-cart item padding wins on shop pages,
       collapsing the left gap the absolute remove × needs — that's why the ×
       overlapped the title on product pages but nowhere else. */
    padding: 0.6rem 0 0.6rem 1.6rem !important;
    border-bottom: 1px solid var(--border-hairline);
    font-size: 0.85rem;
    line-height: 1.45;
}
.cart-dropdown .woocommerce-mini-cart-item:last-child { border-bottom: none; }
/* Reports have no imagery — Woo would show a giant placeholder here.
   Belt-and-braces: template override at woocommerce/cart/mini-cart.php
   strips $thumbnail output; these !important rules cover any WC fragment
   re-render that ships the img markup back through AJAX. */
.cart-dropdown .woocommerce-mini-cart-item img,
.cart-dropdown .woocommerce-mini-cart img,
.widget_shopping_cart_content img,
li.woocommerce-mini-cart-item img { display: none !important; }
.cart-dropdown .woocommerce-mini-cart-item a { color: var(--text-strong); font-weight: 600; }
.cart-dropdown .woocommerce-mini-cart-item a.remove {
    position: absolute;
    left: 0;
    top: 0.55rem;
    color: var(--error) !important;
    font-weight: 600;
    font-size: 1.05rem;
}
.cart-dropdown .woocommerce-mini-cart-item .quantity { display: block; color: var(--text-muted); font-size: 0.78rem; }
.cart-dropdown .woocommerce-mini-cart-item dl.variation {
    margin: 0.2rem 0 0;
    font-size: 0.72rem;
    color: var(--text-subtle);
}
.cart-dropdown .woocommerce-mini-cart-item dl.variation dt,
.cart-dropdown .woocommerce-mini-cart-item dl.variation dd { display: inline; margin: 0; }
.cart-dropdown .woocommerce-mini-cart-item dl.variation dd p { display: inline; margin: 0; }
.cart-dropdown .woocommerce-mini-cart__total {
    display: flex;
    justify-content: space-between;
    padding: 0.7rem 0 0.2rem;
    color: var(--text-strong);
    font-size: 0.9rem;
}
.cart-dropdown .woocommerce-mini-cart__buttons {
    display: flex;
    gap: 0.5rem;
    margin: 0.6rem 0 0;
}
/* WooCommerce styles these buttons too (grey default + 3px radius) on shop
   pages, so all visual props carry !important. Checkout = primary indigo (the
   main action); View basket = clean secondary. */
.cart-dropdown .woocommerce-mini-cart__buttons .button {
    flex: 1;
    text-align: center;
    padding: 0.6rem 0.7rem !important;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius-pill) !important;
    box-shadow: none !important;
    text-transform: none !important;
}
.cart-dropdown .woocommerce-mini-cart__buttons .button.checkout {
    background: var(--primary) !important;
    background-color: var(--primary) !important;
    color: #fff !important;
    border: none !important;
}
.cart-dropdown .woocommerce-mini-cart__buttons .button.checkout:hover {
    background: var(--primary-hover) !important;
    background-color: var(--primary-hover) !important;
}
.cart-dropdown .woocommerce-mini-cart__buttons .button:not(.checkout) {
    background: rgba(255, 255, 255, 0.85) !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-soft) !important;
}
.cart-dropdown .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
.cart-dropdown .woocommerce-mini-cart__empty-message {
    margin: 0.4rem 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}
/* ============================================================
   HEADER ACCOUNT MENU
   ============================================================ */
.account-menu { position: relative; flex-shrink: 0; }
.account-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border-soft);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}
.account-toggle:hover,
.account-menu.open .account-toggle {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.9);
}
.account-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.account-dot {
    position: absolute;
    top: 2px; right: 2px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--success);
    border: 2px solid #fff;
}
.account-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 230px;
    /* Near-opaque: see .cart-dropdown — backdrop-filter can't work in here. */
    background: rgba(252, 252, 255, 0.98);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow-lg);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 180ms;
    z-index: 110;
}
.account-menu.open .account-dropdown,
.account-menu:focus-within .account-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.account-greeting {
    display: block;
    padding: 0.5rem 0.8rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-subtle);
    border-bottom: 1px solid var(--border-hairline);
    margin-bottom: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.account-dropdown a {
    display: block;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
}
.account-dropdown a:hover { background: var(--primary-soft); color: var(--primary-pressed); }
.account-dropdown a.account-register {
    background: var(--primary);
    color: #fff;
    text-align: center;
    margin-top: 0.3rem;
    font-weight: 600;
}
.account-dropdown a.account-register:hover { background: var(--primary-hover); color: #fff; }
.account-dropdown a.account-logout { color: var(--text-muted); border-top: 1px solid var(--border-hairline); border-radius: 0; margin-top: 0.35rem; padding-top: 0.65rem; }
.account-dropdown a.account-logout:hover { color: var(--error); background: transparent; }
/* ============================================================
   AUTH — login / registration panels
   ============================================================ */
.auth-intro { text-align: center; margin-bottom: 1.75rem; }
.auth-intro h1 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
    color: var(--text-strong);
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}
.auth-intro p { color: var(--text-muted); font-size: 0.95rem; max-width: 34rem; margin: 0 auto; }
.auth-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}
.auth-panel {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(20, 22, 58, 0.10);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.6rem 1.4rem;
    transition: border-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
    scroll-margin-top: 90px;
}
.auth-panel:target {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12), var(--glass-shadow);
}
.auth-panel h2 {
    font-family: var(--font-display);
    font-size: 1.2rem !important;
    color: var(--text-strong);
    margin: 0 0 1rem !important;
}
.auth-panel--register { background: linear-gradient(160deg, rgba(99, 102, 241, 0.07), rgba(255, 255, 255, 0.65) 45%); }
.auth-benefits { list-style: none; margin: 0 0 1.1rem !important; padding: 0; }
.auth-benefits li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem !important;
}
.auth-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.auth-panel .form-row label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-strong); margin-bottom: 0.3rem; }
.auth-panel input.input-text {
    width: 100%;
    font-size: 0.95rem;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.auth-panel input.input-text:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
.auth-panel .form-row { margin-bottom: 0.9rem; }
.auth-row-inline { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.auth-row-inline label { display: flex !important; align-items: center; gap: 0.45rem; font-weight: 400 !important; font-size: 0.83rem !important; color: var(--text-muted) !important; cursor: pointer; margin: 0 !important; }
.auth-row-inline input[type="checkbox"] { accent-color: var(--primary); width: 1rem; height: 1rem; }
.auth-lost { font-size: 0.83rem; }
.auth-submit { width: 100%; font-size: 0.95rem; padding: 0.8rem 1.4rem; }
.auth-password-note {
    font-size: 0.82rem;
    color: var(--primary-pressed);
    background: var(--primary-soft);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.9rem !important;
}
/* Wordfence Login Security 2FA, injected into the Woo login flow. */
.woocommerce #wfls-prompt-overlay {
    padding: 20px;
}
.woocommerce-surface :where(.wfls-login-wrapper, .wfls-login-form, .wordfence-ls-login, #wfls-login-form) {
    margin: 1rem 0 0 !important;
    padding: 1rem !important;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
}
.woocommerce-surface :where(.wfls-login-wrapper, .wfls-login-form, .wordfence-ls-login, #wfls-login-form) p {
    margin: 0 0 0.85rem !important;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}
.woocommerce-surface :where(.wfls-login-wrapper, .wfls-login-form, .wordfence-ls-login, #wfls-login-form) label,
.woocommerce-surface label[for*="wfls"] {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-strong);
    font-size: 0.78rem;
    font-weight: 700;
}
.woocommerce-surface input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"])[id*="wfls"],
.woocommerce-surface input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"])[name*="wfls"],
.woocommerce-surface input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"])[id*="wordfence"],
.woocommerce-surface input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"])[name*="wordfence"] {
    width: 100%;
    min-width: 0;
    padding: 0.78rem 0.85rem;
    background: rgba(255, 255, 255, 0.86);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-sm);
    color: var(--text-strong);
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-align: center;
    outline: none;
    transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background 200ms var(--ease-out);
}
.woocommerce-surface input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"])[id*="wfls"]:focus,
.woocommerce-surface input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"])[name*="wfls"]:focus,
.woocommerce-surface input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"])[id*="wordfence"]:focus,
.woocommerce-surface input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"])[name*="wordfence"]:focus {
    background: rgba(255, 255, 255, 0.96);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.woocommerce-surface :where(button, input[type="submit"], input[type="button"])[id*="wfls"],
.woocommerce-surface :where(button, input[type="submit"], input[type="button"])[name*="wfls"],
.woocommerce-surface :where(button, input[type="submit"], input[type="button"])[id*="wordfence"],
.woocommerce-surface :where(button, input[type="submit"], input[type="button"])[name*="wordfence"],
.woocommerce-surface :where(.wfls-login-submit, .wfls-submit, .wordfence-ls-submit) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    margin-top: 0.65rem !important;
    padding: 0.78rem 1.2rem !important;
    background: var(--primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    font-family: var(--font-body);
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: 0 6px 16px -4px rgba(99, 102, 241, 0.35);
}
.woocommerce-surface :where(button, input[type="submit"], input[type="button"])[id*="wfls"]:hover,
.woocommerce-surface :where(button, input[type="submit"], input[type="button"])[name*="wfls"]:hover,
.woocommerce-surface :where(button, input[type="submit"], input[type="button"])[id*="wordfence"]:hover,
.woocommerce-surface :where(button, input[type="submit"], input[type="button"])[name*="wordfence"]:hover,
.woocommerce-surface :where(.wfls-login-submit, .wfls-submit, .wordfence-ls-submit):hover {
    background: var(--primary-hover) !important;
    color: #fff !important;
}
.woocommerce-surface :where(.wfls-remember-device, .wfls-remember-device-wrapper, .wordfence-ls-remember-device) {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.75rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}
.woocommerce-surface :where(.wfls-remember-device, .wfls-remember-device-wrapper, .wordfence-ls-remember-device) input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin-top: 0.15rem;
    accent-color: var(--primary);
}
/* ============================================================
   ACCOUNT AREA — dashboard + endpoints
   ============================================================ */
.dash-head { margin-bottom: 1.5rem; }
.dash-head h2 { font-family: var(--font-display); font-size: 1.4rem; color: var(--text-strong); margin-bottom: 0.35rem; }
.dash-head p { color: var(--text-muted); font-size: 0.9rem; margin: 0; }
.dash-reports h3, .dash-empty h3 {
    font-family: var(--font-display);
    font-size: 1.05rem !important;
    color: var(--text-strong);
    margin: 0 0 0.6rem !important;
}
.dash-report-list { list-style: none; margin: 0 0 1.5rem !important; padding: 0; }
.dash-report-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.9rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem !important;
}
.dash-report-meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.dash-report-name { font-weight: 600; font-size: 0.9rem; color: var(--text-strong); }
.dash-report-sub { font-size: 0.75rem; color: var(--text-subtle); }
.dash-chip {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primary-pressed);
    background: var(--primary-soft);
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.7rem;
    white-space: nowrap;
}
.dash-chip--warn { color: #92400e; background: #fef3c7; }
.dash-view { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.dash-empty {
    text-align: center;
    padding: 2rem 1rem;
    background: rgba(255, 255, 255, 0.5);
    border: 1px dashed var(--border-soft);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}
.dash-empty p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem; }
.dash-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.dash-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(20, 22, 58, 0.10);
    border-radius: var(--radius-md);
    transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.dash-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 8px 20px -8px rgba(99, 102, 241, 0.18);
}
.dash-card-title { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--text-strong); }
.dash-card-sub { font-size: 0.78rem; color: var(--text-muted); }
/* account navigation pills already themed; orders table inherits shop_table */
.woocommerce-surface .woocommerce-orders-table__cell-order-actions .button { padding: 0.4rem 0.9rem; font-size: 0.78rem; }
.woocommerce-surface .woocommerce-EditAccountForm fieldset {
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    padding: 1rem 1.2rem;
    margin: 1.25rem 0;
}
.woocommerce-surface .woocommerce-EditAccountForm legend { font-weight: 600; color: var(--text-strong); padding: 0 0.4rem; }
.woocommerce-surface .woocommerce-Button { margin-top: 0.5rem; }
/* cart/order tables never need product thumbnails — reports have none */
.woocommerce-surface table.shop_table td.product-thumbnail,
.woocommerce-surface table.shop_table th.product-thumbnail { display: none !important; }
/* basket page polish */
.woocommerce-surface table.shop_table td.product-name { font-weight: 600; }
.woocommerce-surface table.shop_table td.product-name a { color: var(--text-strong); }
.woocommerce-surface table.shop_table td.product-name a:hover { color: var(--primary); }
.woocommerce-surface table.shop_table td.product-price,
.woocommerce-surface table.shop_table td.product-subtotal { white-space: nowrap; font-weight: 600; color: var(--text-strong); }
/* "Update basket" stays a muted utility button — !important to override the
   indigo primary-button rule above (which also matches its .button class). */
.woocommerce-surface button[name="update_cart"] {
    background: rgba(255, 255, 255, 0.7) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: none;
}
.woocommerce-surface button[name="update_cart"]:disabled { opacity: 0.4; cursor: default; transform: none; }
.woocommerce-surface .cart_totals {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.58));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.4rem 1.4rem;
    box-shadow: var(--glass-shadow);
}
.woocommerce-surface .cart_totals h2 {
    font-family: var(--font-display);
    font-size: 1.1rem !important;
    color: var(--text-strong);
    margin: 0 0 0.85rem !important;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-hairline);
}
.woocommerce-surface .cart_totals table.shop_table {
    border: none;
    background: transparent;
    margin-bottom: 1rem;
    font-size: 0.92rem;
}
.woocommerce-surface .cart_totals table.shop_table td,
.woocommerce-surface .cart_totals table.shop_table th {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border-hairline);
    background: transparent;
    text-align: left;
    vertical-align: middle;
}
.woocommerce-surface .cart_totals table.shop_table th {
    color: var(--text-muted);
    font-weight: 600;
}
.woocommerce-surface .cart_totals table.shop_table td {
    color: var(--text-strong);
    text-align: right;
    font-weight: 700;
}
.woocommerce-surface .cart_totals tr:last-child td,
.woocommerce-surface .cart_totals tr:last-child th { border-bottom: none; }
.woocommerce-surface .cart_totals table.shop_table tr.order-total th,
.woocommerce-surface .cart_totals table.shop_table tr.order-total td {
    padding-top: 0.9rem;
    color: var(--text-strong);
    font-size: 1.05rem;
}
.woocommerce-surface .cart_totals table.shop_table tr.order-total td {
    font-family: var(--font-display);
}
.woocommerce-surface .wc-proceed-to-checkout { text-align: center; }
.woocommerce-surface .wc-proceed-to-checkout .checkout-button {
    width: 100%;
    justify-content: center;
    margin-top: 0.15rem;
}
@media (max-width: 640px) {
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart {
        display: block;
        border: 0;
        border-radius: 0;
        background: transparent;
        overflow: visible;
        margin-bottom: 1rem;
    }
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart thead { display: none; }
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart tbody,
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart tr,
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart td { display: block; width: 100%; }
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart th.product-thumbnail,
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart td.product-thumbnail { display: none !important; }
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart tr.cart_item {
        position: relative;
        margin-bottom: 0.8rem;
        padding: 1rem 1rem 0.9rem;
        background: rgba(255, 255, 255, 0.68);
        border: 1px solid var(--border-hairline);
        border-radius: var(--radius-md);
    }
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart td {
        padding: 0.45rem 0;
        border: 0;
        text-align: left !important;
    }
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart td:not(.product-remove):not(.product-name):not(.actions)::before {
        content: attr(data-title);
        display: block;
        margin-bottom: 0.12rem;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--text-subtle);
    }
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart td.product-remove {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        width: auto;
        padding: 0;
    }
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart td.product-remove a.remove {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--error-soft);
        color: #b91c1c !important;
        font-size: 1rem;
        line-height: 1;
    }
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart td.product-name {
        padding-right: 2.5rem;
        font-size: 0.95rem;
        line-height: 1.45;
    }
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart td.product-price,
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart td.product-quantity,
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart td.product-subtotal {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border-top: 1px solid var(--border-hairline);
    }
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart td.product-price::before,
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart td.product-quantity::before,
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart td.product-subtotal::before { margin-bottom: 0; }
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart td.actions {
        margin-top: 0.75rem;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.62);
        border: 1px solid var(--border-hairline);
        border-radius: var(--radius-md);
    }
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart td.actions .coupon {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.55rem;
        margin-bottom: 0.65rem;
    }
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart td.actions .coupon input.input-text,
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart td.actions .coupon .button,
    .woocommerce-surface .woocommerce-cart-form table.shop_table.cart td.actions > .button {
        width: 100% !important;
        justify-content: center;
    }
    .woocommerce-surface .cart_totals {
        padding: 1rem;
        border-radius: var(--radius-md);
    }
    .woocommerce-surface .cart_totals h2 {
        font-size: 1rem !important;
        margin-bottom: 0.65rem !important;
        padding-bottom: 0.65rem;
    }
    .woocommerce-surface .cart_totals table.shop_table tr {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }
    .woocommerce-surface .cart_totals table.shop_table th,
    .woocommerce-surface .cart_totals table.shop_table td {
        display: block;
        width: auto;
        padding: 0.65rem 0;
    }
    .woocommerce-surface .cart_totals table.shop_table td {
        text-align: right;
        font-weight: 700;
    }
}
/* checkout auth prompts */
.woocommerce-surface .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-surface .woocommerce-form-coupon-toggle .woocommerce-info {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 0.8rem 1.1rem;
}
.woocommerce-surface .woocommerce-form-login-toggle .woocommerce-info::before,
.woocommerce-surface .woocommerce-form-coupon-toggle .woocommerce-info::before { color: var(--primary); }
.woocommerce-surface .woocommerce-form-login-toggle a,
.woocommerce-surface .woocommerce-form-coupon-toggle a { font-weight: 600; }
.woocommerce-surface .woocommerce-form-login,
.woocommerce-surface .woocommerce-form-coupon {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.2rem;
    margin-bottom: 1.25rem;
}
/* With forced registration + auto-generated passwords, Woo renders this
   container with only hidden inputs — styling it paints an empty pill.
   The account-creation explanation lives in the privacy text instead. */
.woocommerce-surface .create-account,
.woocommerce-surface .woocommerce-account-fields {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
/* ============================================================
   PRODUCT LANDING PAGE
   ============================================================ */
.iccr-back { margin: 0 0 1rem !important; font-size: 0.85rem; }
.iccr-back a { color: var(--text-muted); }
.iccr-back a:hover { color: var(--primary); }
.iccr-product-hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.75rem;
    align-items: start;
    margin-bottom: 0.5rem;
}
.iccr-product-intro .product_title {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-strong);
    margin-bottom: 0.5rem;
}
.iccr-product-tagline { color: var(--text-muted); font-size: 0.98rem; line-height: 1.6; margin-bottom: 0.9rem !important; }
.iccr-hero-includes { margin-top: 0.9rem !important; }
.iccr-order-card {
    position: sticky;
    top: 84px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow-lg);
    padding: 1.4rem 1.4rem 1.2rem;
}
.iccr-order-price { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.9rem; }
.iccr-order-price p.price { margin: 0 !important; font-size: 1.75rem !important; }
.iccr-order-price-sub { font-size: 0.75rem; color: var(--text-subtle); }
@media (max-width: 600px) {
    /* Stack "once-off, per report" under the price on mobile. */
    .iccr-order-price { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
}
.iccr-order-card .iccr-fields { background: transparent; border: none; padding: 0; margin-bottom: 0.9rem; }
.iccr-order-card .single_add_to_cart_button { width: 100%; }
ul.iccr-order-notes { list-style: none; margin: 1rem 0 0 !important; padding: 0.85rem 0 0; border-top: 1px solid var(--border-hairline); }
.iccr-order-notes li {
    position: relative;
    padding-left: 1.3rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem !important;
}
.iccr-order-notes li::before { content: "•"; position: absolute; left: 0.3rem; color: var(--primary); }
.iccr-section { margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--border-hairline); }
.iccr-section > h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-strong);
    margin-bottom: 0.9rem;
}
.iccr-includes-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1.25rem;
    margin: 0 !important;
    padding: 0 !important;
}
.iccr-includes-grid li {
    position: relative;
    padding: 0.6rem 0.75rem 0.6rem 2.1rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    color: var(--text);
}
.iccr-includes-grid li::before {
    content: "✓";
    position: absolute;
    left: 0.75rem;
    color: var(--success);
    font-weight: 700;
}
/* sample section */
.iccr-sample { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.75rem; align-items: center; }
.iccr-sample-copy p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1rem; }
.iccr-sample-visual { display: flex; justify-content: center; margin: 40px 0; }
.mini-report--sample { width: 230px; transform: rotate(-2.5deg); animation: none; }
.mini-report-line { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 8px; }
.mini-report-label {
    flex-shrink: 0;
    max-width: 55%;
    font-size: 0.56rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mini-report-fill {
    flex: 1;
    height: 7px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.25), rgba(99, 102, 241, 0.08));
}
.iccr-about .entry-content p { color: var(--text); font-size: 0.95rem; }
.iccr-fine-print {
    margin-top: 1.1rem !important;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    font-size: 0.78rem !important;
    color: var(--text-subtle) !important;
    line-height: 1.6;
}
@media (max-width: 720px) {
    .auth-columns { grid-template-columns: 1fr; }
    .dash-cards { grid-template-columns: 1fr; }
    .iccr-product-hero { grid-template-columns: 1fr; }
    .iccr-order-card { position: static; }
    .iccr-includes-grid { grid-template-columns: 1fr; }
    .iccr-sample { grid-template-columns: 1fr; }
    .iccr-sample-visual { order: -1; margin: 30px 0; }
    .account-dropdown { right: -8px; }
    .site-header-inner { gap: 0.6rem; }
    .header-actions { gap: 0.4rem; }
    .cart-toggle, .account-toggle { width: 34px; height: 34px; }
    /* On touch, the cart icon goes straight to the basket page. */
    .cart-dropdown { display: none; }
}
/* ------------------------------------------------------------------
   Checkout "Returning customer?" login button
   WooCommerce core ships: .woocommerce-form-login__submit{float:left;margin-right:1em}
   That float pulls the button out of normal flow, so the Remember-me checkbox and the
   Lost-your-password link wrap awkwardly around it. Brand appearance comes from the
   .btn-primary group above; this block only undoes core's layout.
   ------------------------------------------------------------------ */
.woocommerce-form-login__submit {
    float: none !important;
    margin-right: 0 !important;
}
.woocommerce-form-login .form-row:has(> .woocommerce-form-login__submit) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
/* Minimal footer: logo, copyright, credit. The multi-column grid above was built for
   link columns this site does not have, and would leave the logo stranded in a 1-of-3
   cell with two empty tracks beside it. */
.site-footer--minimal .footer-inner {
    display: flex;
    justify-content: center;
    padding-block: var(--space-lg, 1.5rem);
}
.site-footer--minimal .footer-logo {
    display: inline-flex;
    color: var(--text-strong);
}
/* ============================================================
   NAV DROPDOWNS
   The games sit under a single "Results" parent. Eight full-length top-level
   items ("Lotto Results", "PowerBall Results" ...) overflowed the bar and wrapped
   onto a second line; one parent plus short child labels keeps it to one row.

   Opens on hover and on focus-within with no JavaScript at all. js/nav-dropdown.js
   only ADDS the explicit toggle button, which is what makes it work on touch.
   ============================================================ */
/* Every top-level item is a flex row, not just the ones with a dropdown. Otherwise the
   anchor stays inline in plain items and is a flex item in dropdown parents, and the two
   pills come out different heights (33px vs 38px) — obvious the moment you hover across
   the bar. Normalising the container is what keeps them identical. */
.site-nav__list > li {
    display: flex;
    align-items: center;
}
.site-nav__list .menu-item-has-children { position: relative; }
.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: -0.5rem;
    padding: 0.35rem;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-pill);
    transition: color 150ms var(--ease-out), background 150ms var(--ease-out);
}
.nav-dropdown-toggle svg { transition: transform 180ms var(--ease-out); }
.nav-dropdown-toggle:hover { color: var(--text-strong); }
.nav-dropdown-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.menu-item-has-children:hover > .nav-dropdown-toggle svg,
.menu-item-has-children.is-open > .nav-dropdown-toggle svg { transform: rotate(180deg); }
.site-nav__list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 120;
    min-width: 13rem;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: var(--glass-bg-strong);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 160ms;
}
/* A transparent bridge across the gap between the trigger and the panel, so moving
   the pointer down to the menu does not close it mid-travel. */
.site-nav__list .menu-item-has-children::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0.6rem;
}
.site-nav__list .menu-item-has-children:hover > .sub-menu,
.site-nav__list .menu-item-has-children:focus-within > .sub-menu,
.site-nav__list .menu-item-has-children.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.site-nav__list .sub-menu li { list-style: none; }
.site-nav__list .sub-menu a {
    display: block;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--text);
    white-space: nowrap;
}
.site-nav__list .sub-menu a:hover,
.site-nav__list .sub-menu a:focus-visible {
    background: var(--primary-soft);
    color: var(--primary-hover);
}
.site-nav__list .sub-menu .current-menu-item > a {
    color: var(--primary-hover);
    font-weight: 600;
}
/* Current section stays marked while a child page is open. */
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a,
.site-nav .current-menu-parent > a {
    color: var(--text-strong);
    background: rgba(255, 255, 255, 0.6);
}
/* ---- Mobile panel: the same menu as a simple accordion ---- */
@media (max-width: 720px) {
    .mobile-nav-panel__list .menu-item-has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .mobile-nav-panel__list .menu-item-has-children > a { flex: 1 1 auto; }
    .mobile-nav-panel__list .sub-menu {
        display: none;
        flex-basis: 100%;
        margin: 0.2rem 0 0.4rem;
        padding: 0 0 0 0.9rem;
        list-style: none;
        border-left: 2px solid var(--border-soft);
    }
    .mobile-nav-panel__list .menu-item-has-children.is-open > .sub-menu { display: block; }
    .mobile-nav-panel__list .sub-menu li { list-style: none; }
    .mobile-nav-panel__list .sub-menu a {
        display: block;
        padding: 0.5rem 0.2rem;
        font-size: 0.9rem;
        color: var(--text);
    }
}
/* ============================================================
   GAME RESULTS PANEL
   Shared by the per-game pages and every tab on the homepage
   (template-parts/game-panel.php). Section order is fixed:
   results -> checker -> prize breakdown -> next draw -> recent draws.
   ============================================================ */

.game-page__header { margin-bottom: 1.75rem; }
.game-page__header h1 { margin-bottom: 0.35rem; }
.game-page__updated {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-subtle);
}
.game-section { margin-top: 2.5rem; }
.game-section:first-child { margin-top: 0; }
/* Prose-list defaults have to be beaten at the right specificity, not by source order.
   .content-section ul sets padding-left: 1.5rem and .content-section li sets a
   margin-bottom and line-height 1.7 — both at 0,1,1, which outranks a bare .ball-row
   (0,1,0) wherever it sits in the file. The 24px of inherited list indent is what pushed
   Lotto's seventh ball onto a second row on a 390px phone. Written at 0,2,0 and 0,2,1 so
   they actually apply. */
.content-section .ball-row,
.content-section .other-games__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.content-section .ball-row > li,
.content-section .other-games__list > li {
    margin: 0;
    line-height: 1.2;
}
/* Scoped with .content-section for the same specificity reason as the list resets:
   .content-section h2/h3/p carry prose margins at 0,1,1 and would otherwise dictate the
   spacing inside the panel. */
.content-section .game-section__title {
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-strong);
}
.content-section h2.game-section__title { font-size: 1.35rem; }
.content-section h3.game-section__title { font-size: 1.15rem; }
.content-section h4.game-section__title { font-size: 1.05rem; }
.content-section .game-section__intro {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}
/* ---- 1. The draw itself ---- */
.game-latest {
    padding: 1.5rem 1.5rem 1.65rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    text-align: center;
}
.game-latest__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 1.1rem;
}
.game-latest__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-subtle);
}
.game-latest__date {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-strong);
}
.ball-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.85rem 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ball {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Roughly doubled on Aidan's call. Wrapping is now EXPECTED rather than avoided: the
       row centres each line and row-gap spaces them, so Lotto's seven balls breaking 4+3
       reads as a deliberate two-row layout instead of an accident. My earlier sizing was
       driven by keeping seven on one line, which cost legibility for no real benefit. */
    width: 4.5rem;
    height: 4.5rem;
    flex: 0 0 auto;
    list-style: none;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border-soft);
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.9) inset,
        0 6px 14px -6px rgba(80, 76, 180, 0.28);
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--text-strong);
}
/* The bonus ball wears the brand gradient — the same purple-to-pink as the logo mark,
   so the one ball that differs is obvious at a glance rather than needing a legend. */
.ball--bonus {
    background: linear-gradient(160deg, #a93aff, #ff81ff);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px -6px rgba(169, 58, 255, 0.55);
}
.game-jackpot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    margin: 1.25rem 0 0;
}
.game-jackpot__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-subtle);
}
.game-jackpot__value {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}
.game-empty {
    margin: 0;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.6);
    border: 1px dashed var(--border-soft);
    font-size: 0.9rem;
    color: var(--text-muted);
}
.game-empty--pending { text-align: left; }

/* ---- 1b. The rest of the same draw ----
   .family-draw__title is scoped .content-section .family-draw__title (0,2,0) for the same
   reason as .draw-status below and .game-section__title above: this theme's prose selectors
   (.content-section h3, .content-section p) are 0,1,1 and beat a bare component class no
   matter where it sits in the file. The ball-row reset for these mini rows is already
   handled by .content-section .ball-row further up — do not add a second one. */
.family-draws {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.85rem;
}
.family-draw {
    padding: 0.9rem 1rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.55);
}
.content-section .family-draw__title {
    margin: 0 0 0.6rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-strong);
}
.content-section .family-draw__title a { color: var(--text-strong); text-decoration: none; }
.content-section .family-draw__title a:hover { color: var(--primary-hover); text-decoration: underline; }
.content-section .family-draw .game-empty { margin: 0; padding: 0.6rem 0.75rem; font-size: 0.85rem; }

/* Today / yesterday / next-draw line, directly under the winning numbers.
   Scoped .content-section .draw-status (0,2,0) on purpose: this theme's prose selectors
   (.content-section p) are 0,1,1 and beat a bare component class regardless of source
   order. A bare .draw-status would silently inherit paragraph margins. */
.content-section .draw-status {
    margin: 1rem 0 0;
    padding: 0.75rem 0.95rem;
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: rgba(255, 255, 255, 0.55);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text);
}
/* ---- 2. Ticket checker ---- */
.ticket-checker {
    padding: 1.4rem 1.5rem 1.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border-soft);
    border-radius: var(--radius-lg);
}
.checker-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.checker-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}
.checker-input {
    width: 4.5rem;
    height: 4.5rem;
    padding: 0;
    text-align: center;
    border: 1px solid var(--border-soft);
    border-radius: 50%;
    background: #fff;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
    transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.checker-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--primary-glow);
}
.checker-input--bonus {
    border-color: rgba(169, 58, 255, 0.5);
    background: linear-gradient(180deg, #fff, #fdf4ff);
}
.checker-result {
    display: block;
    margin-top: 1rem;
    font-size: 0.95rem;
    color: var(--text-muted);
}
.checker-result:empty { display: none; }
.checker-result.is-hit,
.checker-result.is-miss,
.checker-result.is-error,
.checker-result.is-empty {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 500;
}
.checker-result.is-hit {
    background: var(--success-soft);
    color: #065f46;
}
.checker-result.is-miss {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--border-soft);
    color: var(--text);
}
.checker-result.is-error {
    background: var(--error-soft);
    color: #991b1b;
}
.checker-result.is-empty {
    background: rgba(255, 255, 255, 0.6);
    border: 1px dashed var(--border-soft);
}
/* ---- Tables: prize breakdown + recent draws ---- */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.data-table th,
.data-table td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--border-hairline);
}
.data-table thead th {
    background: rgba(99, 102, 241, 0.07);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.45); }
/* Money and counts line up column-wise only if the digits are the same width. */
.data-table .is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.divisions-table td:first-child { font-weight: 600; color: var(--text-strong); }
.recent-table__date { white-space: nowrap; color: var(--text-muted); }
.ball-row--mini { justify-content: flex-start; gap: 0.3rem; }
/* Scoped to the row so these beat the .ball breakpoint rules on specificity instead of on
   source order. Without that, the enlarged hero-ball sizing applied to every draw in a
   history list too, which made /results-history/ 22,560px tall on a phone. */
.ball-row--mini .ball--mini,
.ball--mini {
    width: 2rem;
    height: 2rem;
    font-size: 0.8rem;
    box-shadow: none;
}
.ball-row--mini .ball--mini.ball--bonus,
.ball--mini.ball--bonus { box-shadow: none; }
/* ---- 4. Next draw ---- */
.next-draw-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.4rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(169, 58, 255, 0.10));
    border: 1px solid rgba(99, 102, 241, 0.18);
}
.next-draw-card__when {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-strong);
}
.next-draw-card__time {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.next-draw-card__jackpot {
    margin: 0;
    text-align: right;
}
.next-draw-card__jackpot-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-subtle);
}
.next-draw-card__jackpot-value {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--primary-hover);
    font-variant-numeric: tabular-nums;
}
/* ---- Editorial + cross-links ---- */
.game-editorial { margin-top: 2.5rem; }
.other-games {
    margin-top: 2.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-hairline);
}
.other-games__title {
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-strong);
}
.other-games__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.other-games__list li { list-style: none; margin: 0; }
.other-games__list a {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    color: var(--text);
    text-decoration: none;
}
.other-games__list a:hover {
    border-color: var(--primary);
    color: var(--primary-hover);
    background: #fff;
}
/* ============================================================
   HOMEPAGE — game tabs
   The panels render visible and the JS hides the inactive ones once it has
   initialised (it sets data-tabs-ready). Everything that only makes sense once
   tabbing is live is therefore scoped to [data-tabs-ready]: with no JS the page
   is an ordinary stack of all six games, which still reads and still indexes.
   ============================================================ */

.home-hero { margin-bottom: 2rem; }
.home-hero__intro {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: var(--text-muted);
}
.game-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.75rem;
}
/* Without JS the buttons do nothing, so they are not shown as controls. */
.game-tabs:not([data-tabs-ready]) .game-tabs__nav { display: none; }
.game-tab {
    padding: 0.55rem 1.05rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.6);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color 150ms var(--ease-out), background 150ms var(--ease-out),
                border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.game-tab:hover {
    color: var(--text-strong);
    border-color: var(--primary);
    background: #fff;
}
.game-tab:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.game-tab.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 16px -4px rgba(99, 102, 241, 0.35);
}
.game-tabs__panel:focus-visible { outline: none; }
/* Stacked (no-JS) fallback needs the games visually separated. Once tabbing is live
   only one panel shows at a time, so the divider would be a stray line at the top. */
.game-tabs:not([data-tabs-ready]) .game-tabs__panel + .game-tabs__panel {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border-hairline);
}
.game-tabs__panel-title {
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.game-tabs__panel-title a {
    color: var(--text-strong);
    text-decoration: none;
}
.game-tabs__panel-title a:hover { color: var(--primary-hover); }
.game-tabs__more { margin-top: 2rem; }
/* ---- Results panel: small screens ---- */
@media (max-width: 720px) {
    .game-latest { padding: 1.2rem 1rem 1.35rem; }
    .ticket-checker { padding: 1.15rem 1rem 1.25rem; }
    .ball-row--mini .ball--mini { width: 1.95rem; height: 1.95rem; font-size: 0.8rem; }
    .game-jackpot__value { font-size: 1.45rem; }
    .game-tabs__panel-title { font-size: 1.25rem; }
    .next-draw-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
    .next-draw-card__jackpot { text-align: left; }
    .data-table { font-size: 0.85rem; }
    .data-table th, .data-table td { padding: 0.6rem 0.7rem; }
}

/* Sizing down the steps keeps the balls LARGE on a phone and lets them wrap. Previously
   these breakpoints existed to squeeze seven balls onto one line, which made them small
   enough to be hard to read on the device most people check results on. */
@media (max-width: 560px) {
    .ball { width: 3.6rem; height: 3.6rem; font-size: 1.35rem; }
    .checker-input { width: 3.6rem; height: 3.6rem; font-size: 1.3rem; }
    .ball-row { gap: 0.7rem 0.55rem; }
    .checker-inputs { gap: 0.55rem; }
    .game-jackpot__value { font-size: 1.45rem; }
    .game-latest { padding-inline: 0.9rem; }
    .ticket-checker { padding-inline: 0.9rem; }
}

@media (max-width: 380px) {
    .ball { width: 3.15rem; height: 3.15rem; font-size: 1.2rem; }
    .checker-input { width: 3.15rem; height: 3.15rem; font-size: 1.15rem; }
    .ball-row { gap: 0.6rem 0.45rem; }
}
/* ---- Tables become stacked cards on a phone ----
   A four-column prize breakdown and a numbers column wide enough for seven balls do not
   both fit in 390px. Horizontal scroll would hide the winning numbers, which are the whole
   point of the page, so each row becomes a labelled block instead. The data-label
   attributes in template-parts/game-panel.php exist for this. */
@media (max-width: 560px) {
    .data-table thead { display: none; }
    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table td {
        display: block;
        width: 100%;
    }
    .data-table tr {
        padding: 0.7rem 0.85rem;
        border-bottom: 1px solid var(--border-hairline);
    }
    .data-table tr:last-child { border-bottom: 0; }
    .data-table td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.18rem 0;
        border: 0;
    }
    .data-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-subtle);
    }
    .data-table .is-num { text-align: right; }
    /* Recent draws: the label goes ABOVE its ball row so the balls get the full width. */
    .recent-table td {
        display: block;
        padding: 0;
    }
    .recent-table td::before { display: block; margin-bottom: 0.3rem; }
    .recent-table__date {
        margin-bottom: 0.45rem;
        font-weight: 600;
        color: var(--text-strong);
    }
    .recent-table td.recent-table__date::before { display: none; }
}
/* ---- Jackpots table ---- */
.jackpots-table td strong {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text-strong);
}
.jackpots-table__tbc { color: var(--text-subtle); font-size: 0.85rem; }
.content-section .jackpots-page__note {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ---- Lucky number picker ---- */
.picker {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.6);
}
/* ---- game pills ---- */
.picker__group { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.picker__legend,
.picker__field label {
    padding: 0;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}
.picker__legend { margin-bottom: 0.55rem; }
.picker-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Visually hidden, NOT display:none — a hidden radio is unfocusable and drops out of the
   tab order, which would take the keyboard support the radio group exists to provide. */
.picker-pill__input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; white-space: nowrap;
    clip: rect(0 0 0 0); clip-path: inset(50%);
}
.picker-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem 0.45rem 0.55rem;
    border-radius: 999px;
    background: var(--glass-bg, rgba(255, 255, 255, 0.7));
    border: 1px solid var(--border-soft);
    color: var(--text-strong);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    min-height: 44px; /* thumb target */
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.picker-pill:hover { border-color: rgba(99, 102, 241, 0.35); }
.picker-pill__logo { display: inline-flex; flex: 0 0 auto; }
.picker-pill__logo .game-logo { display: block; }
.picker-pill__input:checked + .picker-pill {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 1px var(--primary) inset, 0 6px 16px -8px rgba(80, 76, 180, 0.45);
}
/* Focus must be visible on the LABEL, since the input it belongs to is off-screen. */
.picker-pill__input:focus-visible + .picker-pill {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---- controls row ---- */
.picker__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin: 0;
}
.content-section .picker__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    min-width: 0;
}
.picker__field--go { align-self: flex-end; }

/* ---- quantity stepper ---- */
.qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.qty__btn {
    appearance: none;
    border: 0;
    background: transparent;
    width: 44px;              /* thumb target */
    min-height: 44px;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 700;
    color: var(--text-strong);
    cursor: pointer;
}
.qty__btn:hover:not(:disabled) { background: rgba(99, 102, 241, 0.08); color: var(--primary); }
.qty__btn:disabled { opacity: 0.35; cursor: default; }
.qty__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.qty__input {
    width: 3.25rem;
    border: 0;
    border-left: 1px solid var(--border-soft);
    border-right: 1px solid var(--border-soft);
    text-align: center;
    font: inherit;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--text-strong);
    background: transparent;
}
.qty__input:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.content-section .picker__hint {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.picker__out:empty { display: none; }
.picker__out { margin-top: 1.25rem; display: grid; gap: 0.6rem; }
.picker-line {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--border-soft);
}
.picker-line__n {
    flex: 0 0 auto;
    width: 1.6rem;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}
.picker-line__balls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}
/* .ball is 4.5rem on the results pages, which is right for one hero row and far too big for
   ten stacked lines — ten PowerBall lines would run several screens. Scaled down here only. */
.picker__out .ball {
    width: 2.7rem;
    height: 2.7rem;
    font-size: 1.05rem;
}
.picker-line__plus {
    color: var(--text-subtle);
    font-weight: 700;
    padding: 0 0.1rem;
}
/* The bonus already inherits the brand gradient from .ball--bonus. Lift it further here:
   at picker size the balls sit in a tight row, so a ring and a small step up in size make
   it read as "this one is different" at a glance rather than on inspection. The ring is
   drawn with box-shadow so it costs no layout and cannot nudge the row. */
.picker__out .ball--bonus {
    width: 3rem;
    height: 3rem;
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 4px rgba(169, 58, 255, 0.45),
        0 6px 18px -6px rgba(169, 58, 255, 0.55);
}
/* Key under the lines, so the highlight is explained rather than inferred. */
.content-section .picker__key {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.picker__out .picker__key-swatch {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(169, 58, 255, 0.45);
}
.picker__noscript, .content-section .picker__noscript {
    margin: 1rem 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.picker__disclaimer {
    margin-top: 1.75rem;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--primary);
    border-radius: 0 12px 12px 0;
    background: rgba(255, 255, 255, 0.55);
}
.content-section .picker__disclaimer h2 {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
}
.content-section .picker__disclaimer p {
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-muted);
}
.content-section .picker__disclaimer p:last-child { margin-bottom: 0; }
/* Single-game pages have no pill row, so the controls are the first thing in the box. */
.picker--single .picker__controls { margin-top: 0; }
.content-section .picker__more { margin-top: 1.25rem; font-size: 0.9rem; }
/* Tiles, stacked. Side by side did not work here for the same reason as the game pills:
   the logos are WORDMARKS and render 66-124px wide, so in a 234px card the label was left
   with about 75px and wrapped to three or four lines. Logo over label gives the text the
   full card width and makes every tile the same shape. */
.picker-links {
    display: grid;
    /* 132px, not 148: at 360px the wider minimum fell to a single column and stacked all ten
       tiles. 132 keeps two columns from 360 up. */
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 0.6rem;
    margin-top: 1rem;
}
/* Scoped to .content-section on purpose. `.content-section a` declares underline at 0,1,1 and
   beats a bare .picker-links__item at 0,1,0, so the tiles rendered underlined despite the
   declaration below. Same trap the game sub-nav hit; scope, do not reorder. */
.content-section .picker-links__item,
.content-section .picker-links__item:hover {
    text-decoration: none;
}
.picker-links__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    padding: 0.85rem 0.6rem;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    color: var(--text-strong);
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.picker-links__item:hover {
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 6px 16px -10px rgba(80, 76, 180, 0.5);
}
.picker-links__item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Fixed-height logo box so the labels sit on a common baseline across the row regardless
   of each wordmark's own aspect ratio. */
.picker-links__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}
.picker-links__logo .game-logo { max-width: 100%; height: auto; max-height: 24px; }
.picker-links__name {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: break-word;
    min-width: 0;
}
.picker-links__suffix {
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-muted);
}

@media (max-width: 560px) {
    .picker { padding: 1.1rem; }
    /* Stepper and button take a full row each rather than two cramped columns. */
    .content-section .picker__field { flex: 1 1 100%; }
    .picker__field--go .btn-primary { width: 100%; justify-content: center; }
    .qty { align-self: flex-start; }
    /* Two even columns rather than flex-wrap. Wrapping gave one pill per row here, because
       the widest labels exceed half the viewport, so ten games became ten rows of scrolling
       before the button came into view. A grid forces the pair regardless of label width. */
    .picker-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
    .picker-pill {
        /* flex, NOT inline-flex: an inline-level box shrink-wraps to its content inside a
           grid cell, so "PowerBall Xtra" spilled straight out past the pill's own border.
           Block-level stretches to the column and the label can then wrap inside it.

           Stacked rather than side by side, because the logos are WORDMARKS and measure
           47-59px wide at this size. In a 117px column that leaves under 40px for the
           label, so "PowerBall" was being crushed to a zero-width box with its text
           spilling out. Logo over label gives the text the full column. */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-size: 0.78rem;
        padding: 0.5rem 0.4rem;
        gap: 0.3rem;
        border-radius: 14px; /* a pill radius on a two-line box reads as a lozenge */
    }
    .picker-pill__name {
        min-width: 0;
        overflow-wrap: break-word;
        text-align: center;
        line-height: 1.25;
    }
    .picker__out .ball { width: 2.4rem; height: 2.4rem; font-size: 0.95rem; }
    .picker__out .ball--bonus { width: 2.6rem; height: 2.6rem; }
    .picker-line { gap: 0.5rem; padding: 0.5rem 0.55rem; }
}

/* ---- Lotto schedule ---- */
.schedule-table__tbc { color: var(--text-subtle); font-size: 0.85rem; }
/* The jackpot rides under the next-draw date rather than taking its own column: it is
   secondary here (the jackpots page owns that job) and a fifth column pushes the table
   into horizontal scroll on a phone, which is where most of this traffic reads. */
.schedule-table__jackpot {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.content-section .schedule-page__note {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
}
.content-section .schedule-page__note + .schedule-page__note { margin-top: 0.6rem; }
/* ---- Hot and cold numbers ---- */
.hotcold-page__lead { font-size: 1rem; color: var(--text-muted); line-height: 1.7; }
.hotcold-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}
.hotcold-col {
    margin-top: 0;
    padding: 1.25rem 1.35rem 1.4rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border-soft);
    border-radius: var(--radius-lg);
}
.content-section .hotcold-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.content-section .hotcold-list > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    line-height: 1.2;
}
.hotcold-list__count { font-size: 0.7rem; color: var(--text-subtle); white-space: nowrap; }
/* Warm for hot, cool for cold. Distinct from the brand-gradient bonus ball so the three
   never read as the same thing. */
.ball--hot {
    background: linear-gradient(160deg, #fb7185, #f97316);
    border-color: transparent;
    color: #fff;
}
.ball--cold {
    background: linear-gradient(160deg, #38bdf8, #6366f1);
    border-color: transparent;
    color: #fff;
}
.freq-delta { font-variant-numeric: tabular-nums; }
.freq-delta.is-over  { color: #b45309; }
.freq-delta.is-under { color: #0369a1; }
/* ---- Odds table ---- */
.odds-table__note {
    display: block;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-subtle);
    white-space: nowrap;
}
/* ---- "How much does each match pay?" Q&A ----
   Scoped to .content-section (0,2,0) on purpose: .content-section h3/p are descendant
   selectors at 0,1,1 and beat a bare component class regardless of source order. Hit that
   three times already on this theme. See the note above .content-section .game-section__title. */
.content-section .odds-payouts__q {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.5rem 0 0.35rem;
    line-height: 1.35;
}
.content-section .odds-payouts__a {
    margin-bottom: 0;
    max-width: var(--measure);
}
/* ---- Draw permalinks: crumbs, prev/next, year nav ---- */
.draw-page__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
    font-size: 0.8rem;
    color: var(--text-subtle);
}
.draw-page__crumbs a { color: var(--text-muted); text-decoration: none; }
.draw-page__crumbs a:hover { color: var(--primary-hover); }
.draw-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2.25rem;
}
.draw-nav__link {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.65);
    text-decoration: none;
}
.draw-nav__link:hover { border-color: var(--primary); background: #fff; }
.draw-nav__link--next { text-align: right; }
.draw-nav__dir {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle);
}
.draw-nav__date {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-strong);
}
.draw-page__back { margin-top: 2rem; }
.year-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1.5rem 0 0.5rem;
}
.year-nav__item {
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    text-decoration: none;
}
.year-nav__item:hover { border-color: var(--primary); color: var(--primary-hover); }
.year-nav__item.is-current {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
}
.history-year { scroll-margin-top: 5rem; }
.content-section .history-year .game-section__title a { color: var(--text-strong); text-decoration: none; }
.content-section .history-year .game-section__title a:hover { color: var(--primary-hover); }
.content-section .hotcold-notice {
    margin: 1.25rem 0 0;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--border-soft);
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.65;
}
.content-section .hotcold-notice--warn {
    background: #fffbeb;
    border-color: rgba(180, 83, 9, 0.25);
    color: #92400e;
}
/* ---- Footer independence notice ---- */
.footer-disclaimer {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem 1.25rem;
    border-top: 1px solid var(--border-hairline);
    padding-top: 1.25rem;
}
.footer-disclaimer p {
    margin: 0 0 0.6rem;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--text-subtle);
}
.footer-disclaimer p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
    .footer-disclaimer { padding-inline: 1.1rem; }
}
/* The results-accuracy notice carries more weight than the affiliation line: it is the one
   a visitor acts on before claiming a prize. */
.footer-disclaimer__notice { color: var(--text-muted) !important; font-weight: 500; }

/* Two legal links only. The multi-column link grid this footer used to have was stripped
   deliberately; this stays a single row so it cannot grow back into that. */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.4rem;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem 1rem;
}
.footer-links a {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
}
.footer-links a:hover { color: var(--primary-hover); text-decoration: underline; }

@media (max-width: 720px) {
    .footer-links { padding-inline: 1.1rem; }
}

/* A hairline before the bonus ball, so the odd one out reads as separate at a glance
   rather than relying on colour alone. Hidden when the row wraps right before it, since a
   divider at the end of a line is just a floating mark. */
.ball-row__divider {
    width: 1px;
    align-self: stretch;
    min-height: 2.5rem;
    margin-inline: 0.25rem;
    background: var(--border-soft);
    list-style: none;
}

/* Draw figures: sales, prize fund, winners, paid out. */
.draw-figures {
    display: grid;
    /* 7rem keeps this two-up on a 390px phone instead of a four-row stack. */
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 1px;
    margin: 1.5rem 0 0;
    background: var(--border-hairline);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-align: left;
}
.draw-figures__item {
    padding: 0.8rem 0.95rem;
    background: rgba(255, 255, 255, 0.75);
}
.draw-figures dt {
    margin: 0 0 0.15rem;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle);
}
.draw-figures dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
}

.game-jackpot__note {
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ---- FAQs ----
   Native <details>, so it works with JS off and the answers stay in the HTML when collapsed. */
.faq-list {
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.6);
}
.faq-item + .faq-item { border-top: 1px solid var(--border-hairline); }
.content-section .faq-item__q {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.9rem 1.05rem;
    margin: 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-strong);
    transition: background 150ms var(--ease-out);
}
.faq-item__q::-webkit-details-marker { display: none; }
/* Own marker, so it can rotate and so the default triangle does not sit oddly against
   a multi-line question. */
.faq-item__q::before {
    content: '';
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    margin-top: 0.4rem;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
    transition: transform 180ms var(--ease-out);
}
.faq-item[open] > .faq-item__q::before { transform: rotate(45deg); }
.faq-item__q:hover { background: rgba(255, 255, 255, 0.9); }
.faq-item__q:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.content-section .faq-item__a { padding: 0 1.05rem 1rem 2.2rem; }
.content-section .faq-item__a p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-muted);
}

@media (max-width: 560px) {
    .content-section .faq-item__q { padding: 0.85rem 0.9rem; font-size: 0.93rem; }
    .content-section .faq-item__a { padding: 0 0.9rem 0.9rem 1.9rem; }
}

/* ---- Game logo + draw meta header ----
   All six logos are 160px-tall originals of differing widths, so a fixed height keeps them
   optically consistent and the flex row absorbs the width difference. */
.game-latest__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.35rem;
    text-align: left;
}
.game-logo {
    display: block;
    height: 34px;
    width: auto;
    max-width: min(60%, 220px);
    object-fit: contain;
}
.game-latest__head .game-latest__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    margin: 0;
    text-align: right;
}
.game-latest__draw {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-strong);
}
.game-latest__date {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-subtle);
}

@media (max-width: 420px) {
    .game-logo { height: 28px; max-width: 52%; }
    .game-latest__draw { font-size: 0.85rem; }
    .game-latest__date { font-size: 0.74rem; }
}

/* ============================================================
   ACCESSIBILITY + MOBILE FIXES FROM THE UX AUDIT
   ============================================================ */

/* Odds payout ranges were unreachable on a phone. .data-table carries overflow:hidden for
   its rounded corners, and .odds-table__note is nowrap, so at 390px roughly 100px of the
   range was clipped with no way to scroll to it. Below 560px the table is a stack of cards,
   not a table, so neither rule is needed there. */
@media (max-width: 560px) {
    .data-table { overflow: visible; }
    .odds-table__note { white-space: normal; }
    .data-table .is-num { white-space: normal; }
}

/* The submenu opened rightwards and ran off a 768px viewport, and horizontal scroll is
   suppressed so the clipped strip was unreachable. Anchored to the parent's right edge
   instead: the nav sits on the right of the header, so opening leftwards cannot overflow. */
.site-nav__list .sub-menu {
    left: auto;
    right: 0;
}

/* The dropdown toggle is the ONLY way to open a submenu, and between 721px and 768px the
   hamburger is hidden, so a touch tablet had to hit 23px. Padded out to a 44px hit area
   without changing how it looks. */
.nav-dropdown-toggle {
    position: relative;
    min-width: 24px;
    min-height: 24px;
}
.nav-dropdown-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* A tabpanel keeps tabindex=0 so keyboard users can reach the panel content, but it had
   outline:none, making it a focus stop that showed nothing. Give it a real ring. */
.game-tabs__panel:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
    border-radius: var(--radius-md);
}

/* Verify-before-claiming, next to the checker result. */
.content-section .checker-verify {
    margin: 0.85rem 0 0;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-subtle);
}

/* ---- Month browser: the pagination control for results history ----
   Chips rather than a numbered pager, because the meaningful unit here is a real month, not
   an arbitrary page number, and the counts tell you what is in each before you click. */
.month-browser { display: flex; flex-direction: column; gap: 1rem; }
.month-browser__year {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
}
.month-browser__year-label {
    flex: 0 0 3.2rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-strong);
    text-decoration: none;
}
.month-browser__year-label:hover { color: var(--primary-hover); }
.content-section .month-browser__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.content-section .month-browser__list > li { margin: 0; line-height: 1.2; }
.month-browser__item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    /* 44px tall including the border, so it is a real touch target. */
    min-height: 40px;
    box-sizing: border-box;
}
a.month-browser__item:hover { border-color: var(--primary); background: #fff; }
.month-browser__item.is-current {
    background: var(--primary);
    border-color: var(--primary);
}
.month-browser__month {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-strong);
}
.month-browser__count {
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-subtle);
}
.month-browser__item.is-current .month-browser__month,
.month-browser__item.is-current .month-browser__count { color: #fff; }

@media (max-width: 560px) {
    .month-browser__year { gap: 0.4rem 0.5rem; }
    .month-browser__year-label { flex-basis: 100%; }
}

/* ---- Checker result: headline, then detail ----
   A win is the one outcome worth shouting about, so it gets the strongest treatment and the
   amount goes first. Everything else stays calm. */
.checker-result.is-win,
.checker-result.is-hit,
.checker-result.is-miss,
.checker-result.is-error,
.checker-result.is-empty {
    display: block;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-md);
}
.checker-result__headline {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.checker-result__detail {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.9rem;
    line-height: 1.6;
}
.checker-result.is-win {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(84, 87, 224, 0.14));
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #065f46;
}
.checker-result.is-win .checker-result__headline { font-size: 1.4rem; }
.checker-result.is-hit {
    background: var(--success-soft);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #065f46;
}
.checker-result.is-miss {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border-soft);
    color: var(--text);
}

/* ---- Confetti ----
   Pure CSS animation on plain elements, no canvas and no library. Skipped entirely for
   prefers-reduced-motion in the JS, which is why there is no media query here: the elements
   are never created in that case. */
.confetti {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    overflow: hidden;
}
.confetti i {
    position: absolute;
    top: -5vh;
    width: 9px;
    height: 14px;
    border-radius: 2px;
    opacity: 0.9;
    animation-name: confetti-fall;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes confetti-fall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(108vh) rotate(720deg); opacity: 0.85; }
}

/* ---- Game sub-navigation ----
   A visible row in the page header. These three pages were previously reachable only from
   inside a collapsed FAQ answer, which is not navigation. */
.game-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.9rem;
}
.game-subnav__item {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.7);
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    box-sizing: border-box;
}
a.game-subnav__item:hover {
    border-color: var(--primary);
    color: var(--primary-hover);
    background: #fff;
}
/* .content-section a sets text-decoration: underline at 0,1,1, which beats the 0,1,0 rule on
   .game-subnav__item — so the pills rendered underlined despite already declaring none. Fourth
   time this stylesheet's prose defaults have won on specificity; scope, do not reorder. */
.content-section .game-subnav__item,
.content-section .game-subnav__item:hover {
    text-decoration: none;
}
.content-section .game-subnav { margin-bottom: 1.75rem; }
.game-subnav__item.is-current {
    background: var(--primary-soft);
    border-color: rgba(84, 87, 224, 0.35);
    color: var(--primary-hover);
    font-weight: 600;
}

/* ---- Checker hub: one card per game ---- */
.checker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.9rem;
    margin-top: 1.5rem;
}
.content-section a.checker-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.content-section a.checker-card:hover {
    border-color: var(--primary);
    background: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}
.checker-card .game-logo { height: 30px; max-width: 70%; }
.checker-card__label {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-strong);
}
.checker-card__meta { font-size: 0.78rem; color: var(--text-subtle); }

/* ===== Header mega menu =====================================================
   Results and Check Ticket open a panel instead of a plain sub-menu. Built from
   lottochecker_games() by Lottochecker_Mega_Walker; see template-parts/mega-panel.php.

   Everything here uses the existing tokens. The Claude Design handoff happened to
   quote the same hex values (#5457e0, #14163a, #fafbff, the glass and ambient
   values) because it was working from this stylesheet, so there is nothing new to
   introduce -- if a token changes, the mega menu should follow it.
   ========================================================================== */

/* MUST be static, not relative. .site-nav__list .menu-item-has-children is already
   position:relative for the ordinary dropdowns, and .has-mega items still carry that class.
   Leaving the <li> positioned makes it the containing block, so the panel below -- which is
   absolute with left:0;right:0 -- collapses to the width of the nav item (~80px) and the
   three-column grid inside it is crushed. Static hands the containing block up to
   .site-header, which is position:sticky, giving the intended full-bleed panel.
   Specificity: this is 0,2,1 and beats the 0,2,0 rule above it. */
.site-nav__list > li.has-mega { position: static; }

/* `.site-nav a` styles the nav bar's pill links: inline-flex, 0.875rem, and padding 8px 14px.
   Every anchor inside the panel inherits that. The components that set their own padding
   (item / chip / cta) were fine; .mega__more was not, and its 8px of vertical padding made the
   first column head 29.8px tall against the second's 18px -- which is what threw the
   "National Lottery" and "UK 49s" eyebrows out of line. Reset here, let components opt back in.
   0,1,1 ties with `.site-nav a` and wins on source order; component rules are 0,2,0 and win. */
.mega a { padding: 0; font-size: inherit; font-weight: inherit; }

.mega-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; margin-left: 1px; padding: 0;
    background: none; border: 0; border-radius: 999px;
    color: var(--text-muted); cursor: pointer; opacity: 0.75;
    transition: transform 150ms ease, color 150ms ease, opacity 150ms ease;
}
.mega-toggle:hover { color: var(--text-strong); opacity: 1; }
.mega-toggle[aria-expanded="true"] { transform: rotate(180deg); color: var(--text-strong); opacity: 1; }
.mega-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* The panel is full-bleed under the header bar, not anchored to the item. */
.mega {
    /* Positioned against .site-header (sticky), not the <li> -- see the static rule above.
       left/right 0 therefore spans the full header width; .mega__inner re-centres the
       content to the same max-width the header itself uses. */
    position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
    /* Opaque, per Aidan 2026-08-07. --bg rather than #fff on purpose: the logo thumbs are
       solid white and the row hover is rgba(255,255,255,0.9), so on pure white both would
       disappear. backdrop-filter is gone with it -- it does nothing behind an opaque surface
       and only costs a compositing layer. */
    background: var(--bg);
    border-bottom: 1px solid rgba(20, 22, 58, 0.06);
    box-shadow: 0 26px 50px -26px rgba(20, 22, 58, 0.35);
}
.mega[hidden] { display: none; }

.mega__inner {
    max-width: 1080px; margin: 0 auto;
    padding: 26px 1.5rem 28px;
    display: grid; grid-template-columns: 1fr 1fr 232px; gap: 22px;
}
@media (prefers-reduced-motion: no-preference) {
    .mega:not([hidden]) { animation: megaIn 180ms cubic-bezier(0, 0, 0.2, 1); }
    @keyframes megaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}

.mega__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* min-height pins the two heads to the same box even if one column's trailing link wraps
   or is absent, so the eyebrows always line up across the panel. */
.mega__colhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 18px; }
.mega__eyebrow {
    font-family: var(--font-display); font-size: 11px; font-weight: 600;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted);
}
.mega__eyebrow--invert { color: rgba(255, 255, 255, 0.62); }
.mega .mega__more { font-size: 11.5px; font-weight: 500; color: var(--primary); }
.mega__note { font-size: 11px; color: var(--text-muted); }

.mega__list { display: flex; flex-direction: column; gap: 2px; }
.mega .mega__item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 14px; min-height: 60px;
    color: inherit; transition: background 150ms ease, box-shadow 150ms ease;
}
.mega__item:hover, .mega__item:focus-visible {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 14px -6px rgba(20, 22, 58, 0.25);
}
.mega__item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.mega__thumb {
    flex: 0 0 auto; width: 72px; height: 42px; padding: 5px 7px;
    border-radius: 11px; background: #fff; border: 1px solid rgba(20, 22, 58, 0.06);
    display: flex; align-items: center; justify-content: center;
}
/* The logo helper emits its own width/height; inside the thumb it must fit the box. */
.mega__thumb .game-logo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.mega__text { min-width: 0; }
.mega__name { display: block; font-size: 14px; font-weight: 600; color: var(--text-strong); line-height: 1.3; }
.mega__sub  { display: block; font-size: 12px; color: var(--text-muted); line-height: 1.4; }

.mega__chips {
    margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(20, 22, 58, 0.06);
    display: flex; flex-wrap: wrap; gap: 6px;
}
.mega .mega__chip {
    font-size: 12px; font-weight: 500; color: var(--text);
    padding: 5px 11px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(20, 22, 58, 0.06);
    transition: color 150ms ease, border-color 150ms ease;
}
.mega .mega__chip:hover { color: var(--primary); border-color: rgba(84, 87, 224, 0.35); }
.mega__disclaimer {
    margin: 6px 0 0; padding-top: 12px; border-top: 1px solid rgba(20, 22, 58, 0.06);
    font-size: 12px; color: var(--text-muted); line-height: 1.55; text-wrap: pretty;
}

.mega__aside { border-radius: 20px; padding: 20px; display: flex; flex-direction: column; }
.mega__aside--jackpot { background: linear-gradient(165deg, var(--text-strong), #312e81); color: #fff; }
.mega__aside--how {
    background: rgba(255, 255, 255, 0.72); border: 1px solid var(--glass-border);
    box-shadow: 0 8px 26px -12px rgba(20, 22, 58, 0.2);
}
.mega__spacer { flex: 1 1 auto; min-height: 16px; }
.mega__jackpot-logo {
    display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
    background: #fff; border-radius: 11px; padding: 9px 13px; margin-top: 14px;
}
/* Must be constrained like the row thumbs are. Unconstrained, the logo takes its intrinsic
   width and starves the amount beside it. */
.mega__jackpot-logo .game-logo { max-width: 120px; max-height: 26px; width: auto; height: auto; object-fit: contain; }
.mega__jackpot-amount {
    display: block; font-family: var(--font-display); font-size: 30px; font-weight: 700;
    letter-spacing: -0.03em; line-height: 1; margin-top: 12px;
}
.mega__jackpot-when { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.7); margin-top: 7px; line-height: 1.5; }
/* All four need the .mega prefix: `.site-nav a` is 0,1,1 and beats a bare 0,1,0 class,
   which rendered "How to claim winnings" in --text-muted on --primary -- text the same
   colour as its own button. The prefix makes these 0,2,0 and they win. */
.mega .mega__cta {
    display: block; text-align: center; font-size: 13px; font-weight: 600;
    color: var(--text-strong); background: #fff; padding: 10px 14px; border-radius: 999px; margin-top: 16px;
}
/* Hover shifts the SURFACE, never the text colour or opacity -- a washed-out label reads
   as a disabled control. */
.mega .mega__cta:hover { background: var(--primary-soft); color: var(--text-strong); }
.mega .mega__cta--primary { color: #fff; background: var(--primary); }
.mega .mega__cta--primary:hover { color: #fff; background: var(--primary-hover); }

.mega__steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.mega__steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--text); line-height: 1.5; }
.mega__step-n {
    flex: 0 0 auto; width: 21px; height: 21px; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary);
    font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* 720px is where .site-nav itself hides and the flyout takes over. This MUST track that
   same breakpoint: at 900px the toggle would disappear while the desktop bar was still on
   screen, leaving Results and Check Ticket with no way to open. */
@media (max-width: 720px) {
    .mega, .mega-toggle { display: none !important; }
}

/* ===== Mobile flyout drill-down ============================================
   Root level = the WordPress menu's top-level items. Results and Check Ticket
   slide a level deeper to the game list. Markup: template-parts/mobile-nav.php,
   behaviour: js/mega-mobile.js. Open/close of the panel itself stays with
   mobile-nav.js. Touch targets are 56px, comfortably over the 44px minimum.
   ========================================================================== */

.mnav { display: flex; flex-direction: column; gap: 4px; }
.mnav__level { display: flex; flex-direction: column; gap: 4px; }
.mnav__level[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
    .mnav__level:not([hidden]) { animation: mnavIn 180ms cubic-bezier(0, 0, 0.2, 1); }
    @keyframes mnavIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
    .mnav:not(.is-drilled) .mnav__level--root { animation-name: mnavBack; }
    @keyframes mnavBack { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
}

.mnav__row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 56px; padding: 15px 16px;
    border-radius: 16px; border: 1px solid transparent;
    background: none; color: var(--text-strong);
    font-family: inherit; font-size: 15.5px; font-weight: 600; text-align: left;
    cursor: pointer;
}
.mnav__row--drill { background: rgba(255, 255, 255, 0.72); border-color: var(--glass-border); }
.mnav__row--drill:hover, .mnav__row--drill:focus-visible { border-color: rgba(84, 87, 224, 0.3); }
.mnav__row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mnav__row-title { display: block; font-size: 15.5px; font-weight: 600; color: var(--text-strong); }
.mnav__row-sub { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--text-muted); }

.mnav__subhead { display: flex; align-items: center; gap: 10px; padding: 2px 2px 8px; }
.mnav__back {
    flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(20, 22, 58, 0.06); color: var(--text-strong); cursor: pointer;
}
.mnav__back:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mnav__subtitle { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text-strong); }

.mnav__games { display: flex; flex-direction: column; gap: 3px; }
.mnav__group {
    padding: 10px 6px 4px; font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted);
}
.mnav__game {
    display: flex; align-items: center; gap: 11px;
    min-height: 56px; padding: 8px 10px; border-radius: 14px; color: inherit;
}
.mnav__game:hover, .mnav__game:focus-visible { background: rgba(255, 255, 255, 0.9); }
.mnav__game:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.mnav__thumb {
    flex: 0 0 auto; width: 60px; height: 36px; padding: 4px 6px;
    border-radius: 10px; background: #fff; border: 1px solid rgba(20, 22, 58, 0.06);
    display: flex; align-items: center; justify-content: center;
}
.mnav__thumb .game-logo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.mnav__game-name { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.mnav__disclaimer { margin: 12px 6px 0; font-size: 12px; color: var(--text-muted); line-height: 1.55; text-wrap: pretty; }

.mnav__jackpot {
    margin-top: 12px; padding: 16px; border-radius: 18px;
    background: linear-gradient(165deg, var(--text-strong), #312e81); color: #fff; display: block;
}
/* Hover brightens the surface. It must not touch colour or opacity: a faded card reads as
   disabled, which is the opposite of what a call to action should do. */
.mnav__jackpot { transition: filter 150ms ease; }
.mnav__jackpot:hover, .mnav__jackpot:focus-visible { color: #fff; opacity: 1; filter: brightness(1.12); }
.mnav__jackpot-eyebrow {
    display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.09em;
    text-transform: uppercase; color: rgba(255, 255, 255, 0.6);
}
.mnav__jackpot-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 8px; }
.mnav__jackpot-amount {
    display: block; font-family: var(--font-display); font-size: 23px; font-weight: 700;
    letter-spacing: -0.03em; line-height: 1.05;
    /* "R67 000 000" is a single value and must never wrap; it was breaking onto three lines. */
    white-space: nowrap;
}
.mnav__jackpot-when { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.mnav__jackpot-logo {
    /* 0 0 auto let this grow to 130px of a 232px card. Allow it to SHRINK instead, and cap
       the image, so the amount keeps its space. */
    flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border-radius: 9px; padding: 7px 9px;
}
.mnav__jackpot-logo .game-logo { max-width: 84px; max-height: 20px; width: auto; height: auto; object-fit: contain; }

/* ---------------------------------------------------------------------------
   Announcement bar
   Uses the theme's own tokens rather than its own palette, so it follows the
   design system if those tokens ever change. Rendered with [hidden] and revealed
   by its own inline script, so a cached page never flashes a bar the visitor has
   already dismissed.
--------------------------------------------------------------------------- */
.lc-announce {
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: #fff;
    position: relative;
    z-index: 60;
    font-family: var(--font-body);
}
.lc-announce[hidden] { display: none; }
.lc-announce__inner {
    max-width: var(--max-width); margin: 0 auto;
    /* Even on all four sides. It was 9px 44px 9px 20px — the extra 44px was clearance
       for the close button, which pushed the centred text visibly off-centre. */
    padding: 14px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
}
/* When the close button is present it needs room, so widen BOTH sides rather than
   one — the content stays centred and the padding stays even. */
.lc-announce--dismissible .lc-announce__inner { padding-left: 44px; padding-right: 44px; }
.lc-announce__msg {
    margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
}
/* White pill on indigo: the inverse of the site's primary button, so it reads as
   the action without competing with the real buttons further down the page. */
.lc-announce__cta {
    display: inline-block; background: #fff; color: var(--primary);
    padding: 4px 14px; border-radius: var(--radius-pill);
    font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap;
    transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out);
}
.lc-announce__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -6px rgba(20, 22, 58, 0.45);
}
/* The 18+ line is a legal requirement, not decoration. Kept at 0.88 rather than
   faded out — it has to stay readable. */
.lc-announce__small { margin: 0; font-size: 11.5px; line-height: 1.3; color: rgba(255, 255, 255, 0.88); }
.lc-announce__close {
    position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
    background: none; border: 0; color: rgba(255, 255, 255, 0.7);
    font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px;
    border-radius: var(--radius-sm);
}
.lc-announce__close:hover { color: #fff; background: rgba(255, 255, 255, 0.16); }
@media (max-width: 640px) {
    .lc-announce__inner { padding: 12px 14px; }
    .lc-announce--dismissible .lc-announce__inner { padding-left: 40px; padding-right: 40px; }
    .lc-announce__msg { font-size: 13px; gap: 8px; }
    .lc-announce__small { font-size: 11px; }
}

/* ============================================================
   Subscribe bar
   Fixed to the bottom, slides up, stays until dismissed. Rendered with [hidden]
   and revealed by its own script so the markup is identical for every visitor
   and the page cache is untouched.
   ============================================================ */
.lc-sub {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--glass-border);
    box-shadow: 0 -12px 40px -12px rgba(80, 76, 180, 0.22);
    transform: translateY(100%);
    transition: transform .34s var(--ease-out);
    font-family: var(--font-body);
}
.lc-sub[hidden] { display: none; }
.lc-sub.is-up { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .lc-sub { transition: none; }
}
.lc-sub__inner {
    max-width: var(--max-width); margin: 0 auto;
    padding: 14px 52px 14px 20px;
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 24px;
}
.lc-sub__title {
    margin: 0; font-family: var(--font-display); font-weight: 700;
    font-size: 16px; line-height: 1.25; color: var(--text-strong);
}
.lc-sub__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }
.lc-sub__form { display: flex; gap: 8px; align-items: center; }
.lc-sub__label {
    /* Present for screen readers; the placeholder carries the visual cue. */
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.lc-sub__input {
    width: 232px; max-width: 46vw;
    padding: 9px 13px; font-size: 14px; font-family: inherit;
    color: var(--text-strong); background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
}
.lc-sub__input:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}
.lc-sub__btn {
    padding: 9px 18px; font-size: 14px; font-weight: 600; font-family: inherit;
    color: #fff; background: var(--primary); border: 0;
    border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
    transition: background .12s var(--ease-out), transform .12s var(--ease-out);
}
.lc-sub__btn:hover:not(:disabled) { background: var(--primary-hover); transform: translateY(-1px); }
.lc-sub__btn:disabled { opacity: .6; cursor: default; }
/* Off-screen rather than display:none — bots that skip hidden inputs still fill it. */
.lc-sub__trap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.lc-sub__msg { grid-column: 1 / -1; margin: 0; font-size: 13px; min-height: 0; }
.lc-sub__msg:empty { display: none; }
.lc-sub__msg.is-good { color: var(--success); font-weight: 600; }
.lc-sub__msg.is-bad { color: var(--error); font-weight: 600; }
.lc-sub__fine { grid-column: 1 / -1; margin: 0; font-size: 11.5px; color: var(--text-subtle); }
.lc-sub__close {
    position: absolute; top: 10px; right: 12px;
    background: none; border: 0; color: var(--text-muted);
    font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 8px;
    border-radius: var(--radius-sm);
}
.lc-sub__close:hover { color: var(--text-strong); background: rgba(20, 22, 58, 0.06); }

@media (max-width: 720px) {
    .lc-sub__inner { grid-template-columns: 1fr; padding: 13px 46px 13px 16px; gap: 9px; }
    .lc-sub__title { font-size: 14.5px; }
    .lc-sub__sub { display: none; }
    .lc-sub__form { width: 100%; }
    .lc-sub__input { flex: 1 1 auto; width: auto; max-width: none; }
}


/* ---- Tools: Hot & Cold index + Free Email Alerts ------------------------- */
/* Card balls reuse .ball/.ball--mini/.ball--hot/.ball--cold from the per-game
   pages, so the hub cannot drift from the pages it links to. */

.hotcold-index__intro { margin-bottom: 0.5rem; }

.hotcold-index__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 1.75rem;
}

.hcx-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.1rem 1.15rem;
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hcx-card:hover,
.hcx-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--glass-shadow-lg);
}

.hcx-card__head { display: flex; align-items: center; gap: 0.6rem; }
.hcx-card__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.hcx-card__name { font-weight: 700; color: var(--text-strong); line-height: 1.2; }

.hcx-card__rows { display: flex; flex-direction: column; gap: 0.5rem; }
.hcx-row { display: flex; align-items: center; gap: 0.6rem; }
.hcx-row__label {
    flex: 0 0 5.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hcx-card__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.15rem;
}
.hcx-card__meta { font-size: 0.78rem; color: var(--text-muted); }
.hcx-card__cta { font-size: 0.82rem; font-weight: 700; color: var(--text-strong); white-space: nowrap; }

.hotcold-index__note {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 60ch;
}

/* ---- Free Email Alerts --------------------------------------------------- */

.alerts-card {
    padding: 1.35rem 1.4rem;
    margin: 1.4rem 0 2rem;
    border-radius: var(--radius-lg);
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.alerts-form__label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}
.alerts-form__row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.alerts-form__input {
    flex: 1 1 15rem;
    min-width: 0;
    padding: 0.7rem 0.85rem;
    font-size: 1rem;
    border-radius: var(--radius-md, 12px);
    border: 1px solid rgba(80, 76, 180, 0.22);
    background: #fff;
    color: var(--text);
}
.alerts-form__input:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }
.alerts-form__btn {
    flex: 0 0 auto;
    padding: 0.7rem 1.3rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    border: 0;
    cursor: pointer;
    border-radius: var(--radius-md, 12px);
    background: linear-gradient(135deg, #6366f1, #a93aff);
}
.alerts-form__btn:disabled { opacity: 0.6; cursor: default; }

/* Off-screen rather than display:none, so bots that skip hidden inputs still fill it. */
.alerts-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.alerts-form__msg { margin: 0.75rem 0 0; font-size: 0.92rem; }
.alerts-form__msg.is-good { color: #047857; }
.alerts-form__msg.is-bad { color: #b91c1c; }
.alerts-form__fine { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--text-muted); }

.alerts-what h2 { font-size: 1.1rem; margin: 1.5rem 0 0.6rem; }
.alerts-what__list { margin: 0 0 0.5rem; padding-left: 1.1rem; line-height: 1.7; }

.alerts-games { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }
.alerts-game {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem 0.5rem 0.55rem;
    border-radius: 999px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border-soft);
    text-decoration: none;
    color: var(--text-strong);
    font-size: 0.88rem;
    font-weight: 600;
}
.alerts-game:hover, .alerts-game:focus-visible { border-color: rgba(99, 102, 241, 0.35); }

@media (max-width: 480px) {
    .hcx-row__label { flex-basis: 4.9rem; font-size: 0.68rem; }
    .alerts-form__btn { flex: 1 1 100%; }
}