/* ===== EP Hobby — brand theme (cyan + rose-gold on slate) ===== */
:root {
    --bg: #1a1f26;             /* dark slate, matches logo background */
    --bg-elev: #232931;
    --bg-card: #2a313a;
    --border: #3a424d;
    --text: #eef1f5;
    --text-muted: #9aa3ad;
    --accent: #5ec4e6;         /* EP HOBBY cyan blue */
    --accent-hover: #7dd3f0;
    --accent-ink: #0a2530;
    --accent-soft: rgba(94, 196, 230, 0.15);
    --secondary: #c9917d;      /* rose-gold / copper from clover */
    --secondary-hover: #d9a591;
    --cream: #e8d5b7;          /* tagline cream */
    --success: #4ac28c;
    --danger: #e87a7a;
    --radius: 10px;
    --radius-lg: 16px;
    --shadow: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/*
  Layout model:
  - A fixed top navigation bar (.topnav) is always visible (brand + shop nav + cart).
  - A slim account sidebar (.sidebar) slides out from the right on all screen
    sizes, opened via the hamburger in the top nav.
  - body is pushed down by the topnav height only; no permanent left gutter.
*/
body {
    --topnav-height: 60px;
    --sidebar-width: 280px;
    padding-top: var(--topnav-height);
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== Top navigation bar ===== */
.topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topnav-height, 60px);
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    z-index: 210;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    padding-top: env(safe-area-inset-top);
    height: calc(var(--topnav-height, 60px) + env(safe-area-inset-top));
}
.topnav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
}
.topnav-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
}
.topnav-hamburger:hover,
.topnav-hamburger:focus-visible { border-color: var(--accent); outline: none; }
.topnav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    flex-shrink: 0;
}
.topnav-logo {
    height: 52px;
    width: auto;
}
.topnav-brand-fallback {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
}
.topnav-brand-fallback .brand-mark { font-size: 14px; padding: 4px 10px; }
.topnav-brand-fallback .brand-name { font-size: 16px; letter-spacing: 1px; }

/* ----- Top nav search ----- */
.topnav-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 320px;
    min-width: 0;
    margin: 0;
}
.topnav-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.55;
    pointer-events: none;
    line-height: 1;
}
.topnav-search-input {
    width: 100%;
    height: 36px;
    padding: 0 14px 0 36px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    line-height: 1;
    transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
    -webkit-appearance: none;
    appearance: none;
}
.topnav-search-input::placeholder {
    color: var(--text-muted);
    opacity: 0.8;
}
.topnav-search-input:hover {
    border-color: var(--accent-soft);
}
.topnav-search-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-elev);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Hide default WebKit "x" clear button — our pill look is cleaner without it */
.topnav-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.topnav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    /* IMPORTANT: do NOT clip overflow on the desktop layout — the Accessories
       dropdown is positioned absolutely below its <details>, and any
       overflow:auto/hidden here would clip it out of view. The narrow-screen
       media query below re-enables horizontal scroll, and on those sizes the
       dropdown is repositioned to position:fixed so it escapes anyway. */
    overflow: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
}
.topnav-links::-webkit-scrollbar { display: none; }
.topnav-links > li {
    list-style: none;
    display: flex;
    align-items: center;
}
.topnav-links a,
.topnav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: all 0.12s;
}
.topnav-links a:hover { background: var(--accent-soft); color: var(--accent); }

/* ----- Top nav dropdown (Accessories) ----- */
.topnav-has-dropdown { position: relative; display: flex; align-items: center; }
/* Do NOT set `display` on <details>. Browsers tie open/close behaviour to
   the element's default display; overriding it (especially to flex /
   inline-flex) can prevent the disclosure from toggling and stop the
   built-in "hide children when not [open]" rule from applying. The
   summary inside is already inline-flex with a fixed height, so vertical
   alignment is handled there. */
.topnav-details {
    line-height: 1;
}
/* Belt-and-braces: explicitly hide the dropdown when the details is closed,
   so a stray `display: flex` from anywhere else can't reveal it. */
.topnav-details:not([open]) > .topnav-dropdown { display: none; }
.topnav-details[open] > .topnav-dropdown { display: block; }
/* .topnav-dropdown-toggle inherits size/padding from the shared rule above */
.topnav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    height: 36px;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    padding: 0 14px;
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    transition: all 0.12s;
}
/* Hide the default disclosure triangle */
.topnav-dropdown-toggle::-webkit-details-marker { display: none; }
.topnav-dropdown-toggle::marker { content: ''; }
.topnav-dropdown-toggle:hover { background: var(--accent-soft); color: var(--accent); }
.dropdown-caret {
    font-size: 10px;
    opacity: 0.7;
    transition: transform 0.18s ease;
}
.topnav-details[open] > .topnav-dropdown-toggle .dropdown-caret { transform: rotate(180deg); }

/* Hover-to-open on desktop is wired in JS at the bottom of fragments/layout.html
   (toggles the <details>[open] attribute on mouseenter / mouseleave with a
   short close delay so the mouse can traverse the 6px gap into the panel).
   CSS-only doesn't work reliably because modern browsers implement <details>
   with shadow DOM and the closed-state content slot isn't fully overridable
   from author CSS — only the [open] attribute properly reveals the content.
   The existing .topnav-details[open] rules above light the panel up once JS
   sets the attribute. Touch devices keep the native tap-to-toggle behaviour. */

.topnav-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    padding: 6px;
    margin: 0;
    list-style: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 250;
}
.topnav-dropdown li { list-style: none; }
.topnav-dropdown a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    white-space: nowrap;
    transition: all 0.12s;
}
.topnav-dropdown a:hover {
    background: var(--accent-soft);
    color: var(--accent);
}
.topnav-dropdown .dropdown-head {
    font-weight: 600;
    color: var(--accent);
    border-bottom: 1px solid var(--border);
    border-radius: 6px 6px 0 0;
    margin-bottom: 4px;
}

.topnav-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 40px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 18px;
    flex-shrink: 0;
}
.topnav-cart:hover { border-color: var(--accent); color: var(--accent); }
.topnav-cart .cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    padding: 1px 6px;
    font-size: 11px;
    border: 2px solid var(--bg-elev);
}

/* ===== Slim account sidebar (off-canvas drawer, slides in from the LEFT) ===== */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width, 280px);
    max-width: 90vw;
    background: var(--bg-elev);
    border-right: 1px solid var(--border);
    z-index: 220;
    overflow-y: auto;
    padding-top: calc(var(--topnav-height, 60px) + env(safe-area-inset-top));
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.4);
}
body.sidebar-open .sidebar { transform: translateX(0); }
body.sidebar-open .sidebar-scrim { display: block; }

.sidebar-inner {
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nav-heading {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin: 4px 4px 6px;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.12s;
    text-decoration: none;
}
.nav-item:hover {
    background: var(--accent-soft);
    color: var(--accent);
}
.nav-icon {
    width: 20px;
    text-align: center;
    font-size: 14px;
    opacity: 0.8;
}
.nav-staff { color: var(--secondary); }
.nav-staff:hover { background: rgba(201,145,125,0.12); color: var(--secondary-hover); }
.nav-admin { color: var(--accent); font-weight: 600; }
.nav-admin:hover { background: var(--accent-soft); }

.cart-badge {
    background: var(--accent);
    color: var(--accent-ink);
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}

.sidebar-auth { display: flex; flex-direction: column; gap: 8px; }
.sidebar-user {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.user-label { color: var(--text-muted); font-size: 11px; }
.sidebar-user b {
    color: var(--accent);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.role-badge {
    background: var(--accent);
    color: var(--accent-ink);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
    display: inline-block;
}
.role-badge-customer { background: var(--secondary); }

/* Logout form inside sidebar: a little breathing room above it */
.sidebar-logout-form { margin-top: 16px; }

/* Scrim shown whenever the off-canvas sidebar is open */
.sidebar-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 215;
}

/* ===== Hero ===== */
.hero {
    background:
        radial-gradient(circle at 20% 30%, rgba(94,196,230,0.18), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(201,145,125,0.12), transparent 45%),
        linear-gradient(180deg, var(--bg-elev), var(--bg));
    padding: 100px 0 80px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.hero-logo {
    /* Scales with viewport so it stays prominent on desktop without
       overwhelming mobile. Falls back nicely at narrow widths via the
       max-width: 100% safeguard. */
    width: clamp(280px, 60vw, 520px);
    max-width: 100%;
    height: auto;
    margin: 0 auto 24px;
    display: block;
}
.hero-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
}
.accent { color: var(--accent); }
.hero-tagline {
    font-size: 20px;
    color: var(--cream);
    font-style: italic;
    margin: 16px 0 8px;
    font-weight: 500;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.5px;
}
.hero-sub {
    color: var(--text-muted);
    font-size: 17px;
    max-width: 640px;
    margin: 16px auto 32px;
}
.hero-ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== Buttons ===== */
.btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.15s;
    font-family: inherit;
}
.btn-primary {
    background: var(--accent);
    color: var(--accent-ink);
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-small { padding: 6px 14px; font-size: 13px; }
.btn-large { padding: 14px 28px; font-size: 16px; }
.btn-block { width: 100%; display: block; margin-top: 10px; }
.btn-link {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    padding: 0;
    font: inherit;
    text-decoration: underline;
}

/* ===== Sections ===== */
.section-title {
    font-family: 'Cinzel', serif;
    font-size: 32px;
    margin: 0 0 24px;
}
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 24px;
}
.see-all {
    color: var(--accent);
    font-weight: 600;
}

/* ===== Categories ===== */
.categories { padding: 80px 0 40px; }
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.category-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    border: 1px solid var(--border);
    transition: all 0.2s;
}
.category-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
}
.cat-pokemon  { background: linear-gradient(135deg, #5ec4e6 0%, #2a5e7a 100%); }
.cat-magic    { background: linear-gradient(135deg, #c9917d 0%, #5a3a30 100%); }
.cat-yugioh   { background: linear-gradient(135deg, #e8d5b7 0%, #7a6a4a 100%); }
.cat-onepiece { background: linear-gradient(135deg, #5ec4e6 0%, #c9917d 100%); }

/* When the admin uploaded a background image (Category.imageUrl), the inline
   `style="background-image: url(...)"` on .category-card takes over from the
   gradient. Cover-size the image and lay a dark gradient scrim across the
   bottom half so the title/subtitle (sitting in .category-inner) stays
   readable on any photograph. */
.category-card.has-bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.category-card.has-bg-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                                rgba(0, 0, 0, 0.05) 0%,
                                rgba(0, 0, 0, 0.15) 45%,
                                rgba(0, 0, 0, 0.70) 100%);
    pointer-events: none;
}
.category-card.has-bg-image .category-inner {
    position: relative; /* above the ::before scrim */
    background: transparent;
    backdrop-filter: none;
    padding: 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

.category-inner {
    background: rgba(0, 0, 0, 0.55);
    padding: 14px 18px;
    border-radius: 10px;
    backdrop-filter: blur(4px);
}
.category-card h3 { margin: 0 0 4px; color: #fff; font-size: 20px; }
.category-card p  { margin: 0; color: rgba(255, 255, 255, 0.85); font-size: 14px; }

/* ===== Product grid ===== */
.featured { padding: 40px 0 80px; }
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow);
}
.product-image-link { display: block; aspect-ratio: 3 / 4; background: var(--bg-elev); }
.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-image.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 14px;
}
.product-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.product-meta {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}
.product-name {
    font-size: 15px;
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
}
.product-name a:hover { color: var(--accent); }
.product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 8px;
}
.price {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
}
.inline-form { display: inline; }

/* ===== Shop page ===== */
.shop-page { padding: 40px 0 80px; }
.shop-head { margin-bottom: 32px; }
.shop-head h1 {
    font-family: 'Cinzel', serif;
    font-size: 40px;
    margin: 0 0 8px;
}
.tagline { color: var(--text-muted); margin: 0; }

/* Shop banner — admin-uploaded game tile image used as a hero header on
   /products?game=X. Same image as the home-page tile so the visitor sees
   a consistent visual handoff from the homepage. Falls back to the plain
   .shop-head when no image is set. */
.shop-banner {
    position: relative;
    margin-bottom: 32px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 220px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    padding: 28px;
    border: 1px solid var(--border);
}
.shop-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                                rgba(0, 0, 0, 0.10) 0%,
                                rgba(0, 0, 0, 0.25) 45%,
                                rgba(0, 0, 0, 0.75) 100%);
    pointer-events: none;
}
.shop-banner-inner {
    position: relative; /* above the scrim */
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}
.shop-banner-inner h1 {
    font-family: 'Cinzel', serif;
    font-size: 40px;
    margin: 0 0 6px;
    color: #fff;
}
.shop-banner-inner .tagline { color: rgba(255, 255, 255, 0.9); }
@media (max-width: 720px) {
    .shop-banner { min-height: 160px; padding: 20px; }
    .shop-banner-inner h1 { font-size: 28px; }
}
.filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--bg-card);
    padding: 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 20px;
}
.filter-input, .filter-select {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    min-width: 140px;
}
.filter-input { flex: 1 1 200px; }
.filter-input:focus, .filter-select:focus {
    outline: none;
    border-color: var(--accent);
}
.result-summary {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 16px;
}
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
}
.page-info { color: var(--text-muted); font-size: 14px; }

/* ===== Detail page ===== */
.detail-page { padding: 32px 0 80px; }
.back-link {
    color: var(--text-muted);
    font-size: 14px;
    display: inline-block;
    margin-bottom: 24px;
}
.back-link:hover { color: var(--accent); }
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}
@media (max-width: 768px) {
    .detail-grid { grid-template-columns: 1fr; gap: 24px; }
}
.detail-image-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 3 / 4;
}
.detail-image { width: 100%; height: 100%; object-fit: cover; }
.detail-image.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.detail-info h1 {
    font-family: 'Cinzel', serif;
    font-size: 36px;
    margin: 8px 0 16px;
}
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.tag {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-muted);
}
.tag-in-stock { color: var(--success); border-color: var(--success); }
.tag-out { color: var(--danger); border-color: var(--danger); }
.detail-price {
    font-family: 'Cinzel', serif;
    font-size: 36px;
    color: var(--accent);
    font-weight: 700;
    margin: 16px 0;
}
.detail-description {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 24px;
}
.detail-form {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.detail-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}
.qty-input {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 8px;
    width: 80px;
    font-size: 15px;
}

/* ===== Cart page ===== */
.cart-page { padding: 40px 0 80px; }
.cart-page h1 {
    font-family: 'Cinzel', serif;
    font-size: 40px;
    margin: 0 0 24px;
}
.cart-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
}
@media (max-width: 768px) {
    .cart-grid { grid-template-columns: 1fr; }
}
.cart-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cart-item {
    display: grid;
    grid-template-columns: 70px 1fr auto auto auto;
    gap: 16px;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 12px;
    border-radius: var(--radius);
}
@media (max-width: 600px) {
    /* Mobile cart-item layout: image left (spans rows), name + remove on
       top, stepper + subtotal on bottom. Uses named grid areas so children
       land in predictable spots regardless of source order. */
    .cart-item {
        grid-template-columns: 64px 1fr auto;
        grid-template-areas:
            "image info   remove"
            "image qty    subtotal";
        column-gap: 12px;
        row-gap: 10px;
        align-items: center;
        padding: 10px;
    }
    .cart-item-image    { grid-area: image; align-self: start; width: 64px; height: 88px; }
    .cart-item-info     { grid-area: info; min-width: 0; }
    .cart-item-info h3  { font-size: 14px; line-height: 1.3; }
    .cart-item-info .price { font-size: 13px; }
    .cart-item-qty      { grid-area: qty; }
    .cart-item-subtotal { grid-area: subtotal; justify-self: end; font-size: 16px; }
    .cart-item > form   { grid-area: remove; justify-self: end; }
    /* Bigger tappable remove button on mobile */
    .cart-item > form .btn-link {
        padding: 6px 8px;
        font-size: 13px;
    }
}
.cart-item-image {
    width: 70px;
    height: 95px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--bg-elev);
}
.cart-item-image.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-muted);
}
.cart-item-info h3 { margin: 0 0 4px; font-size: 16px; }
.cart-item-qty { display: flex; gap: 6px; align-items: center; }
.cart-item-subtotal { font-weight: 700; color: var(--accent); }

/* Typeahead results panel for the "+ Add item" picker on the staff order
   detail page. Sits absolutely under the search input; JS toggles its
   hidden attribute. Each .add-item-result row is a button so the whole
   row is clickable, with a subtle hover highlight. */
.add-item-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius, 8px);
    max-height: 320px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.add-item-result {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
}
.add-item-result + .add-item-result {
    border-top: 1px solid var(--border);
}
.add-item-result:hover,
.add-item-result:focus {
    background: var(--accent-soft);
    color: var(--accent);
    outline: none;
}
.add-item-result-empty {
    padding: 10px 12px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Draft / staged add chips on the staff order Edit mode. Each chip is a row
   showing "Pikachu × 2  ($5.00 each)" with a small × to drop the staged add
   before saving. Renders as a vertical list so long product names don't get
   truncated against horizontal pill packing. */
.staged-adds-list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.staged-add-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius, 8px);
    color: var(--text);
    font-size: 13px;
}
.staged-add-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
}
.staged-add-remove:hover,
.staged-add-remove:focus {
    color: var(--danger);
    outline: none;
}

/* Small "Updated" pill next to a price that has just been refreshed from
   live (the snapshot in the session cart drifted from the catalog). Used on
   both the cart page and the checkout order-summary. Muted-warning palette
   so it reads as a heads-up, not an error. */
.price-updated-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: var(--warning, #f5b14d);
    color: var(--bg, #1b1b1b);
    vertical-align: middle;
}
.cart-summary {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 24px;
    border-radius: var(--radius);
    height: fit-content;
}
.cart-summary h2 { margin: 0 0 16px; font-size: 20px; }
.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    color: var(--text-muted);
}
.summary-row.total {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    border-top: 1px solid var(--border);
    margin-top: 12px;
    padding-top: 16px;
}

/* ===== Empty state ===== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.empty-state p { margin-bottom: 16px; }

/* ===== Trust strip ===== */
.trust-strip {
    background: var(--bg-elev);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 48px 0;
}
.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
}
.trust-grid h4 {
    margin: 0 0 8px;
    color: var(--secondary);
    font-family: 'Cinzel', serif;
    font-size: 18px;
}
.trust-grid p { margin: 0; color: var(--text-muted); }

/* ===== Checkout success ===== */
.checkout-success { padding: 80px 0; text-align: center; }
.success-card {
    max-width: 520px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 48px;
    border-radius: var(--radius-lg);
}
.success-card h1 {
    font-family: 'Cinzel', serif;
    color: var(--accent);
    margin: 0 0 16px;
}
.muted { color: var(--text-muted); font-size: 14px; }
.muted code {
    background: var(--bg-elev);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}

/* ===== Footer ===== */
.site-footer {
    background: var(--bg-elev);
    border-top: 1px solid var(--border);
    padding: 48px 24px 24px;
    margin-top: 80px;
}
.footer-columns {
    max-width: 1200px;
    margin: 0 auto 32px;
    display: grid;
    /* auto-fit so Support / Find us / Shop / (optional) Follow us all
       share the row when there's space. Falls back to fewer columns
       on narrow viewports via the breakpoints further down. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 32px;
}
.footer-col { min-width: 0; }

/* Subtle vertical dividers between footer columns on wide screens.
   Sits at the left edge of every column except the first, so a row with
   N columns shows N-1 lines between them. Mobile (single-column stack)
   skips the divider entirely so it doesn't look like a stray line. */
@media (min-width: 720px) {
    .footer-col + .footer-col {
        border-left: 1px solid var(--border);
        padding-left: 32px;
        margin-left: -16px; /* pull back half the gap so the line sits
                                centred between columns visually */
    }
}
.footer-heading {
    font-family: 'Cinzel', serif;
    color: var(--cream);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.footer-links a {
    color: var(--text-muted);
    font-size: 14px;
    transition: color 0.12s;
}
.footer-links a:hover { color: var(--accent); }

/* "Find us" column — address, phone, and a compact opening-hours table.
   The data is admin-editable in Shop Settings and shared with the
   /store-location page. Tighter type than the body copy so the table
   fits in a footer column without wrapping. */
.footer-col-findus { min-width: 220px; }
.footer-find-address {
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
}
.footer-find-phone {
    margin: 0 0 12px;
    font-size: 14px;
}
.footer-find-phone a {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    transition: color 0.12s;
}
.footer-find-phone a:hover { color: var(--accent); }

.footer-find-hours {
    /* Cap the width so the day label + hours stay visually grouped instead
       of being pushed to opposite edges of the column. Day column is fixed
       so each row's hours align with each other under the column header. */
    width: auto;
    max-width: 260px;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    margin: 0 0 6px;
}
.footer-find-hours td {
    padding: 3px 0;
    border: none;
    vertical-align: top;
    white-space: nowrap;
}
.footer-find-hours td:first-child  {
    font-weight: 600;
    padding-right: 14px;
    width: 40px;
}
.footer-find-hours td:last-child   { text-align: left; }
.footer-find-hours tr.is-today td {
    color: var(--cream);
    font-weight: 600;
}
.footer-find-hours tr.is-today td:last-child {
    color: var(--accent);
}
.footer-find-hours tr.is-closed td {
    font-style: italic;
    opacity: 0.75;
}
.footer-find-hours-md {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 6px;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.copyright { color: var(--text-muted); font-size: 13px; margin: 0; }
.footer-inner .tagline {
    color: var(--cream);
    font-family: 'Cinzel', serif;
    font-style: italic;
    margin: 0;
}

/* ===== Auth pages ===== */
.auth-page { padding: 60px 0 80px; }
.auth-card {
    max-width: 440px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
}
.auth-card h1 {
    font-family: 'Cinzel', serif;
    color: var(--accent);
    margin: 0 0 4px;
    font-size: 28px;
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 24px 0 16px;
}
.auth-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--text-muted);
}
.auth-form input {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
}
.auth-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Inline checkbox + label row. Without this, ".auth-form label" lays the row
   out as a column and ".auth-form input" stretches the checkbox into a padded
   full-width box stacked above its text. Override both so the box sits neatly
   to the left of its label. Used by the admin card / card-set / category /
   accessory-type forms. */
.auth-form label.checkbox-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.auth-form label.checkbox-row input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
}
.hint { color: var(--text-muted); font-size: 12px; }
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}
.alert-error   { background: rgba(232,122,122,0.1); color: var(--danger); border: 1px solid rgba(232,122,122,0.3); }
.alert-success { background: rgba(74,194,140,0.1); color: var(--success); border: 1px solid rgba(74,194,140,0.3); }
.auth-switch {
    text-align: center;
    color: var(--text-muted);
    margin: 16px 0 0;
    font-size: 14px;
}
.auth-switch a { color: var(--accent); font-weight: 500; }

/* ===== Dashboard pages (admin/staff/account) ===== */
.dash-page { padding: 40px 0 80px; }
.dash-header { margin-bottom: 32px; }
.dash-header h1 {
    font-family: 'Cinzel', serif;
    font-size: 36px;
    margin: 0 0 6px;
}
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 20px;
    border-radius: var(--radius);
}
.stat-label {
    color: var(--text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 6px;
}
.stat-value {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    font-family: 'Cinzel', serif;
}
.stat-value.small { font-size: 16px; word-break: break-all; }

/* Admin sales table — separator above each game boundary so the
   alternating Game/Type groupings read cleanly in a long list. */
.sales-table tr.game-boundary td {
    border-top: 2px solid var(--accent, #5ec4e6);
    padding-top: 14px;
}
.sales-table tr.game-boundary:first-child td {
    border-top: none;
    padding-top: 10px;
}

/* Sales table totals row — sits in <tfoot>. Heavier weight + a thick
   accent-coloured border on top so it visually closes off the breakdown
   the way "TOTAL" rows do on a printed invoice. */
.sales-table tfoot tr.sales-totals-row td {
    font-weight: 700;
    font-size: 15px;
    border-top: 2px solid var(--accent, #5ec4e6);
    padding-top: 14px;
    padding-bottom: 14px;
    background: rgba(94, 196, 230, 0.06);
}
.sales-table tfoot tr.sales-totals-row td:first-child {
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

/* ===== Sales filter grid ===== */
.sales-filter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 900px) {
    .sales-filter-grid { grid-template-columns: auto 1fr; }
    .sales-filter-grid .sales-filter-block:nth-child(2),
    .sales-filter-grid .sales-filter-block:nth-child(3) { grid-column: 1 / -1; }
}
.sales-filter-block { display: flex; flex-direction: column; }

/* Checkbox pill row — used for the games + statuses multi-selects.
   Hides the native checkbox, styles the surrounding label as a tappable
   pill, and adds a clear "ticked" state with the accent colour. */
.checkbox-row-multi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.checkbox-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.checkbox-pill input[type="checkbox"] {
    /* visually hidden but still keyboard-focusable */
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.checkbox-pill:has(input[type="checkbox"]:checked) {
    background: rgba(94, 196, 230, 0.18);
    border-color: var(--accent, #5ec4e6);
    color: var(--text);
    font-weight: 600;
}
.checkbox-pill:hover {
    border-color: var(--accent, #5ec4e6);
}
.checkbox-pill:has(input[type="checkbox"]:focus-visible) {
    outline: 2px solid var(--accent, #5ec4e6);
    outline-offset: 2px;
}
.stat-value.accent { color: var(--accent); }
.stat-value.warning { color: var(--danger); }

.dash-actions { margin-top: 32px; }
.dash-actions h2,
.dash-section h2 {
    font-family: 'Cinzel', serif;
    font-size: 24px;
    margin: 0 0 16px;
}
.action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.action-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 20px;
    border-radius: var(--radius);
    transition: all 0.15s;
}
.action-card:hover { border-color: var(--accent); }
.action-card h3 {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 17px;
}
.action-card p { margin: 0 0 8px; }
.tiny { font-size: 12px; }

.dash-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 24px;
    border-radius: var(--radius);
    margin-top: 32px;
}
.dash-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}
.dash-table th,
.dash-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.dash-table th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Focal-point picker used on the admin category form.
   Left column: source image with a draggable marker (and faint crosshair
   guides).
   Right column: two live previews showing the exact home-tile (4:3) and
   shop-banner (16:5) crops the chosen focal point will produce. */
.focal-picker { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.focal-picker-label { font-weight: 600; }
.focal-picker-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
    gap: 16px;
    align-items: start;
}
@media (max-width: 720px) {
    .focal-picker-layout { grid-template-columns: 1fr; }
}
.focal-picker-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    border: 1px dashed var(--border);
    overflow: hidden;
    background: var(--bg-card);
    cursor: crosshair;
    touch-action: none; /* let us own the drag gesture */
    user-select: none;
}
.focal-picker-wrap.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: not-allowed;
    text-align: center;
    padding: 14px;
}
.focal-picker-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none; /* clicks/drags go to the wrapper, not the image */
}
/* Faint crosshair through the marker — just a visual cue, no interaction. */
.focal-picker-crosshair-v,
.focal-picker-crosshair-h {
    position: absolute;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    display: none;
}
.focal-picker-wrap:not(.is-empty) .focal-picker-crosshair-v,
.focal-picker-wrap:not(.is-empty) .focal-picker-crosshair-h { display: block; }
.focal-picker-crosshair-v {
    top: 0; bottom: 0; width: 1px;
    left: 0;            /* updated via marker, see below */
}
.focal-picker-crosshair-h {
    left: 0; right: 0; height: 1px;
    top: 0;
}
/* Anchor the crosshair lines off the marker's current position by reusing
   its left/top via :has() in modern browsers; if the browser is older the
   lines just sit at 0/0, which is harmless. */
.focal-picker-wrap:has(.focal-picker-marker) .focal-picker-crosshair-v {
    left: var(--focal-x, 50%);
}
.focal-picker-wrap:has(.focal-picker-marker) .focal-picker-crosshair-h {
    top: var(--focal-y, 50%);
}
.focal-picker-marker {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: rgba(94, 196, 230, 0.55);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.45);
    transform: translate(-50%, -50%);
    cursor: grab;
    transition: transform 0.08s ease-out, background 0.15s;
    outline: none;
}
.focal-picker-marker:focus-visible {
    background: rgba(94, 196, 230, 0.85);
    box-shadow: 0 0 0 3px var(--accent, #5ec4e6), 0 2px 8px rgba(0, 0, 0, 0.45);
}
.focal-picker-wrap.is-dragging { cursor: grabbing; }
.focal-picker-wrap.is-dragging .focal-picker-marker {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.15);
}
.focal-picker-wrap.is-empty .focal-picker-marker,
.focal-picker-wrap.is-empty .focal-picker-crosshair-v,
.focal-picker-wrap.is-empty .focal-picker-crosshair-h { display: none; }

/* Live preview tiles to the right of the picker. They share the focal
   point with the source so the admin can see exactly what the home page
   tile and shop banner will look like — same `background-position` math
   the real surfaces use. */
.focal-picker-previews {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.focal-preview { display: flex; flex-direction: column; gap: 4px; }
.focal-preview-frame {
    position: relative;
    width: 100%;
    border-radius: 8px;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    overflow: hidden;
}
.focal-preview-tile   { aspect-ratio: 4 / 3;  }  /* matches .category-card */
.focal-preview-banner { aspect-ratio: 16 / 5; }  /* matches .shop-banner */
.focal-preview-label {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.focal-picker-readout {
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.focal-picker-readout span { font-variant-numeric: tabular-nums; }

/* Drag-and-drop reorder support used on /admin/categories. The handle is
   a wide cell with grab cursor; the row picks up a subtle highlight while
   being dragged so the admin sees what they're moving. */
#category-reorder-table .drag-handle {
    cursor: grab;
    color: var(--text-muted);
    user-select: none;
    text-align: center;
    font-weight: 700;
    letter-spacing: -1px;
}
#category-reorder-table tr[draggable="true"] { cursor: grab; }
#category-reorder-table tr.dragging {
    opacity: 0.55;
    background: rgba(94, 196, 230, 0.10);
}

/* Role-specific nav link colors */
.nav-staff  { color: var(--secondary) !important; }
.nav-staff:hover  { color: var(--secondary-hover) !important; }
.nav-admin  { color: var(--accent) !important; font-weight: 600; }
.nav-admin:hover { color: var(--accent-hover) !important; }

/* ===== Responsive ===== */

/* --- Tablet / small desktop: tighten topnav + surrounding padding --- */
@media (max-width: 900px) {
    body { --topnav-height: 56px; }
    .topnav { gap: 10px; padding: 0 12px; }
    .topnav-logo { height: 44px; }
    .topnav-links { font-size: 13px; }
    .topnav-links a,
    .topnav-dropdown-toggle {
        height: 34px;
        padding: 0 12px;
        font-size: 13px;
    }
    .topnav-search { flex-basis: 220px; }
    .topnav-search-input { height: 34px; font-size: 13px; }

    /* Narrow viewport: re-enable horizontal scroll for the nav items. The
       dropdown is broken out via position:fixed below, so it isn't clipped. */
    .topnav-links { overflow-x: auto; }

    /* Dropdown breaks out of the horizontally scrolling nav-links */
    .topnav-details[open] > .topnav-dropdown {
        position: fixed;
        top: calc(var(--topnav-height, 56px) + env(safe-area-inset-top) + 4px);
        left: 12px;
        right: 12px;
        min-width: 0;
        max-width: none;
    }

    .container { padding: 0 20px; }
    .hero { padding: 56px 0 40px; }
    .categories, .featured { padding: 40px 0; }
    .trust-strip { padding: 36px 0; }
    .site-footer { padding: 20px; margin-top: 48px; }
}

/* --- Small tablet / large phone: typography + major grids --- */
@media (max-width: 768px) {
    .hero { padding: 40px 0 32px; }
    .hero-title { font-size: 32px; }
    .hero-tagline { font-size: 17px; }
    .hero-sub { font-size: 15px; }

    .section-title { font-size: 26px; }
    .shop-head h1, .cart-page h1, .dash-header h1 { font-size: 30px; }

    .detail-grid { grid-template-columns: 1fr; gap: 24px; }
    .detail-info h1 { font-size: 28px; }
    .detail-price { font-size: 30px; }

    .cart-grid { grid-template-columns: 1fr; gap: 20px; }
    .cart-summary { padding: 20px; }

    .auth-card { padding: 28px 22px; }
    .auth-page { padding: 32px 0 48px; }

    /* Filter bar: stack full-width on small screens */
    .filter-bar { padding: 12px; gap: 8px; }
    .filter-input,
    .filter-select,
    .filter-bar .btn {
        width: 100%;
        min-width: 0;
        flex: 1 1 100%;
    }

    /* Tighten product grid */
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    .product-body { padding: 12px; gap: 4px; }
    .product-name { font-size: 14px; }
    .price { font-size: 16px; }
    .btn-small { padding: 6px 10px; font-size: 12px; }

    /* Category tiles: bigger touch targets, 2-up */
    .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .category-card { padding: 16px; aspect-ratio: 5 / 4; }
    .category-card h3 { font-size: 17px; }
    .category-card p  { font-size: 12px; }

    /* Dashboard / table responsiveness */
    .stat-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .action-grid  { grid-template-columns: 1fr; }
    .stat-value   { font-size: 26px; }
    .dash-section { padding: 16px; }
    .dash-table-wrap,
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .dash-table   { min-width: 560px; }

    /* Trust strip stacks to one column */
    .trust-grid { grid-template-columns: 1fr; gap: 20px; }

    /* Footer stack */
    .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .footer-inner { flex-direction: column; text-align: center; }
}

/* --- Phone: tighten padding, allow product grid to stay readable --- */
@media (max-width: 640px) {
    .container { padding: 0 16px; }
    .hero-ctas { flex-direction: column; align-items: stretch; }
    .hero-ctas .btn { width: 100%; }

    .section-head { flex-direction: column; align-items: flex-start; gap: 6px; }

    .detail-form { flex-direction: column; align-items: stretch; }
    .detail-form label { width: 100%; }
    .qty-input { width: 100%; }
    .detail-form .btn { width: 100%; }

    .cart-flash { margin: 12px 16px 0; }
    .back-link { margin-bottom: 16px; }

    /* Single-column footer on phones */
    .footer-columns { grid-template-columns: 1fr; gap: 20px; }
    .site-footer { padding: 32px 16px 20px; }
}

/* --- Very narrow phones --- */
@media (max-width: 420px) {
    .hero-title { font-size: 26px; }
    .section-title { font-size: 22px; }
    .shop-head h1, .cart-page h1, .dash-header h1 { font-size: 26px; }

    .auth-card { padding: 22px 16px; }

    .product-grid { gap: 10px; }
    .product-body { padding: 10px; }
    .product-footer { flex-wrap: wrap; gap: 6px; }
    .product-footer .btn-small { width: 100%; }

    .topnav { gap: 8px; padding: 0 10px; }
    .topnav-logo { height: 36px; }
    .topnav-links a { padding: 6px 10px; font-size: 12px; }
    /* Hide search on the narrowest screens — brand + nav + cart take priority */
    .topnav-search { display: none; }
    /* On the narrowest screens, drop the brand word to free space for nav */
    .topnav-brand .topnav-brand-fallback .brand-name { display: none; }
}

/* ===== Cart flash banner ("Added to cart") ===== */
.cart-flash {
    margin: 16px 24px 0;
    padding: 12px 18px;
    background: rgba(94, 196, 230, 0.12);
    border: 1px solid rgba(94, 196, 230, 0.4);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    color: var(--cream);
    font-weight: 500;
    animation: cartFlashFade 4s ease forwards;
}

@keyframes cartFlashFade {
    0%, 70% { opacity: 1; transform: translateY(0); }
    100%    { opacity: 0; transform: translateY(-8px); }
}

/* ===== Cart toast (AJAX add) ===== */
.cart-toast {
    position: fixed;
    left: 50%;
    bottom: calc(32px + env(safe-area-inset-bottom));
    transform: translate(-50%, 20px);
    padding: 12px 20px;
    border-radius: 10px;
    background: var(--bg-elev, #242a33);
    color: var(--cream);
    border: 1px solid rgba(94, 196, 230, 0.4);
    border-left: 4px solid var(--accent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    max-width: min(90vw, 420px);
}
.cart-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}
.cart-toast.cart-toast-error {
    border-color: #c95a5a;
    border-left-color: #c95a5a;
}

.cart-badge.pulse {
    animation: cartBadgePulse 500ms ease;
}
@keyframes cartBadgePulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}


/* =====================================================================
   Checkout / Orders (Milestone 2)
   ===================================================================== */

/* Generic form controls reused on the checkout page */
.form-label {
    display: block;
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}
/* Universal "this field is required" asterisk — red, conventional. */
.required {
    color: var(--danger);
    margin-left: 2px;
    font-weight: 700;
}
/* Per-field validation error message, shown right under the input. */
.field-error {
    display: block;
    margin-top: 4px;
    color: var(--danger);
    font-size: 12px;
    line-height: 1.3;
}
/* Highlight the input itself when it has an error. */
.input-error,
input.input-error,
select.input-error,
textarea.input-error {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(232, 122, 122, 0.18) !important;
}
/* Global hidden-attribute reset. The HTML5 `hidden` attribute is supposed to
   apply display:none, but more-specific class rules elsewhere (notably
   .form-input { display: block }) win the cascade and reveal elements we
   meant to hide via [hidden]. The !important here is the right tool for the
   job — `hidden` is semantic; nothing should outrank it. */
[hidden] { display: none !important; }

/* Markdown editor textareas in Shop Settings — monospace + slightly
   bigger line-height so the admin can see structure clearly. (Used as
   the fallback look if EasyMDE fails to load.) */
.markdown-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre;
    overflow-x: auto;
    tab-size: 2;
}

/* ===== EasyMDE dark theme =====
   The CDN ships a light-theme stylesheet that looks pasted-on against
   the rest of the site. These overrides recolour the toolbar, editor
   area, statusbar, and preview so the Markdown editor blends with the
   admin pages. */
.EasyMDEContainer {
    border-radius: var(--radius, 8px);
    overflow: hidden;
    margin-top: 6px;
}
.EasyMDEContainer .CodeMirror,
.EasyMDEContainer .editor-toolbar,
.EasyMDEContainer .editor-statusbar {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text);
}
.EasyMDEContainer .CodeMirror {
    border: 1px solid var(--border);
    border-top: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
}
.EasyMDEContainer .editor-toolbar {
    border: 1px solid var(--border);
    border-bottom: none;
}
.EasyMDEContainer .editor-toolbar button {
    color: var(--text-muted);
}
.EasyMDEContainer .editor-toolbar button:hover,
.EasyMDEContainer .editor-toolbar button.active {
    background: rgba(94, 196, 230, 0.15);
    border-color: rgba(94, 196, 230, 0.45);
    color: var(--accent, #5ec4e6);
}
.EasyMDEContainer .editor-toolbar i.separator {
    border-color: var(--border);
}
.EasyMDEContainer .editor-statusbar {
    color: var(--text-muted);
    font-size: 12px;
    border: 1px solid var(--border);
    border-top: none;
}
.EasyMDEContainer .CodeMirror-cursor {
    border-color: var(--accent, #5ec4e6) !important;
}
.EasyMDEContainer .CodeMirror-selected {
    background: rgba(94, 196, 230, 0.25) !important;
}
.EasyMDEContainer .CodeMirror-line span.cm-header {
    color: var(--cream, #f5e6d3);
    font-weight: 700;
}
.EasyMDEContainer .CodeMirror-line span.cm-link,
.EasyMDEContainer .CodeMirror-line span.cm-url {
    color: var(--accent, #5ec4e6);
}
.EasyMDEContainer .CodeMirror-line span.cm-quote {
    color: var(--text-muted);
    font-style: italic;
}

/* Side-by-side preview pane uses .prose-style typography so the rendered
   Markdown looks the same it will on the public /refund-policy page. */
.EasyMDEContainer .editor-preview,
.EasyMDEContainer .editor-preview-side {
    background: var(--bg-card);
    color: var(--text);
    padding: 16px;
}
.EasyMDEContainer .editor-preview h1,
.EasyMDEContainer .editor-preview h2,
.EasyMDEContainer .editor-preview h3,
.EasyMDEContainer .editor-preview-side h1,
.EasyMDEContainer .editor-preview-side h2,
.EasyMDEContainer .editor-preview-side h3 {
    color: var(--cream, #f5e6d3);
}
.EasyMDEContainer .editor-preview a,
.EasyMDEContainer .editor-preview-side a {
    color: var(--accent, #5ec4e6);
}
.EasyMDEContainer .editor-preview blockquote,
.EasyMDEContainer .editor-preview-side blockquote {
    color: var(--text-muted);
    border-left: 3px solid var(--border);
    padding-left: 12px;
    margin-left: 0;
}

/* Fullscreen mode keeps the dark background so it doesn't blind the
   admin when they expand to full-screen edit. */
.EasyMDEContainer .CodeMirror-fullscreen,
.EasyMDEContainer .editor-toolbar.fullscreen,
.EasyMDEContainer .editor-preview-side {
    background: var(--bg, var(--bg-card));
}

.form-input {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.form-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Checkout-specific layout */
.checkout-form { display: flex; flex-direction: column; gap: 14px; }
.checkout-form h2 { margin: 16px 0 6px; font-size: 18px; }

.fulfillment-options { display: flex; flex-direction: column; gap: 10px; }
.fulfillment-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.fulfillment-option:hover { border-color: var(--accent); }
.fulfillment-option:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.fulfillment-radio { margin-top: 4px; accent-color: var(--accent); }
.fulfillment-label { display: block; font-weight: 600; }
.fulfillment-desc  { display: block; font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* Order summary line items on the checkout + detail pages */
.summary-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px dashed var(--border);
}
.summary-line:last-of-type { border-bottom: none; margin-bottom: 8px; }
.summary-line-name { color: var(--text-muted); }

/* Status banner on the order detail page */
.status-banner { padding: 14px 18px; }
.status-banner .status-label {
    margin: 0 0 4px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===== Maintenance banner =====
   Sits at the top of every page when an admin-scheduled window is active
   or upcoming. Two visual phases:
     - upcoming (within 24h before start): amber/gold — "heads up, planned later"
     - active   (between start and end):   coral/red  — "happening now"
   Tuned for the dark theme — backgrounds are saturated enough to read
   as a banner band, text is high-contrast cream/white so it pops. */
.maint-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    border-bottom: 1px solid;
    z-index: 100;
    letter-spacing: 0.1px;
}
.maint-banner b { font-weight: 700; }
.maint-banner-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
}
.maint-banner-text {
    max-width: 1000px;
}

/* Upcoming — warm amber/gold. Slow gentle pulse so it draws the eye
   without being alarming. */
.maint-banner-upcoming {
    background: linear-gradient(90deg,
                                rgba(245, 177, 77, 0.22) 0%,
                                rgba(245, 177, 77, 0.30) 50%,
                                rgba(245, 177, 77, 0.22) 100%);
    color: #ffe2a8;
    border-bottom-color: rgba(245, 177, 77, 0.55);
}
.maint-banner-upcoming .maint-banner-icon {
    color: #ffd17a;
    text-shadow: 0 0 8px rgba(255, 209, 122, 0.55);
}

/* Active — saturated coral so customers can't miss that something is
   going on right now. Subtle pulsing border + slightly stronger
   background than the upcoming state. */
.maint-banner-active {
    background: linear-gradient(90deg,
                                rgba(232, 92, 92, 0.30) 0%,
                                rgba(232, 92, 92, 0.42) 50%,
                                rgba(232, 92, 92, 0.30) 100%);
    color: #ffe1d8;
    border-bottom-color: rgba(232, 92, 92, 0.75);
    animation: maint-banner-pulse 3.5s ease-in-out infinite;
}
.maint-banner-active .maint-banner-icon {
    color: #ffd0c0;
    text-shadow: 0 0 8px rgba(255, 208, 192, 0.6);
}

@keyframes maint-banner-pulse {
    0%, 100% { border-bottom-color: rgba(232, 92, 92, 0.65); }
    50%      { border-bottom-color: rgba(232, 92, 92, 0.95); }
}

@media (max-width: 720px) {
    .maint-banner { padding: 10px 12px; font-size: 13px; gap: 8px; }
    .maint-banner-icon { width: 24px; height: 24px; font-size: 16px; }
}

/* Respect users who've opted out of motion via OS settings. */
@media (prefers-reduced-motion: reduce) {
    .maint-banner-active { animation: none; }
}

/* Flash variants */
.flash-error {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 8px;
    margin: 10px 0;
}

/* Warning flash — used on the cart page when quantities were auto-clamped
   to live stock or sold-out items are still in the basket. Warmer than the
   default flash so it reads as "heads-up", not as a hard error. */
.flash-warning {
    background: rgba(245, 177, 77, 0.12);
    border: 1px solid var(--warning, #f5b14d);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 8px;
    margin: 10px 0;
}

/* Per-row stock notes on the cart page — small inline messages under the
   qty stepper. Two flavours: clamped (amber, heads-up) and sold out (red,
   blocks checkout). Both display as block so they sit on their own line
   beneath the "N in stock" line. */
.cart-stock-note {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
}
.cart-stock-note-clamped { color: var(--warning, #f5b14d); }
.cart-stock-note-soldout { color: var(--danger); }


/* =====================================================================
   Phone input split — country code + local number side by side
   ===================================================================== */
.phone-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.phone-row .phone-code {
    flex: 0 0 130px;
    /* Inherit the same look as other auth-form inputs */
    padding: 10px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
}
.phone-row .phone-number {
    flex: 1 1 auto;
    min-width: 0;
}
.phone-row .phone-code:focus,
.phone-row .phone-number:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
@media (max-width: 480px) {
    /* Stack on very narrow phones — country code dropdown above number */
    .phone-row { flex-direction: column; gap: 6px; }
    .phone-row .phone-code { flex-basis: auto; width: 100%; }
}


/* =====================================================================
   Staff product CRUD (Milestone 3)
   ===================================================================== */

/* Filter pills row above the staff product table */
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 16px;
}
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.12s;
}
.filter-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.filter-pill.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* Action card variant that's clickable as a whole tile */
.action-card-link {
    display: block;
    color: var(--text);
    transition: border-color 0.12s, transform 0.12s, background 0.12s;
}
.action-card-link:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-1px);
}


/* Stat card variant that's clickable as a tile (used for "orders awaiting review") */
.stat-card-link {
    display: block;
    color: var(--text);
    transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.stat-card-link:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-1px);
}


/* Inline payment-proof preview (image or PDF embed) */
.proof-preview {
    margin-top: 8px;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.proof-preview img {
    display: block;
    max-width: 100%;
    max-height: 480px;
    margin: 0 auto;
    border-radius: 6px;
}
.proof-preview embed,
.proof-preview iframe {
    display: block;
    width: 100%;
    height: 480px;
    border: none;
    border-radius: 6px;
}


/* =====================================================================
   Info pages — Contact / Order Status / Refund Policy / Store Location
   ===================================================================== */
.info-page { padding: 36px 0 60px; }

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 18px;
}
@media (max-width: 720px) {
    .info-grid { grid-template-columns: 1fr; }
}

.info-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
}
.info-card h2 {
    margin: 0 0 10px;
    font-size: 18px;
    color: var(--accent);
}
.info-card p { margin: 0 0 10px; }
.info-card p:last-child { margin-bottom: 0; }
.info-card a { color: var(--accent); text-decoration: underline; }
.info-card a:hover { color: var(--accent-hover); }

/* Long-form prose layout for refund policy / terms-style content */
.info-card.prose { max-width: 760px; }
.info-card.prose h2 { margin-top: 22px; }
.info-card.prose h2:first-child { margin-top: 0; }
.info-card.prose ul,
.info-card.prose ol { padding-left: 22px; }
.info-card.prose li { margin: 6px 0; }

/* Opening-hours table on the store-location page */
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td {
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
}
.hours-table tr:last-child td { border-bottom: none; }
.hours-table td:last-child { text-align: right; color: var(--text-muted); }

/* ===== Polished opening-hours card =====
   Used on /store-location. Drives:
   - a live "Open now / Closed" badge in the header
   - a table with today's row highlighted + a small "Today" pill
   - automatic muted styling on closed days
   The whole block hides behind a server-side check so a fresh install
   (no opening hours saved) keeps the existing placeholder render. */
.opening-hours-card { display: flex; flex-direction: column; gap: 12px; }
.opening-hours-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.opening-hours-head h2 { margin: 0; }

/* Status badge — green when open, neutral when closed. */
.oh-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
}
.oh-badge small {
    font-weight: 400;
    opacity: 0.85;
}
.oh-badge .oh-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}
.oh-badge-open {
    color: #1b6a1b;
    background: rgba(60, 175, 90, 0.18);
    border-color: rgba(60, 175, 90, 0.40);
}
.oh-badge-open .oh-dot {
    animation: oh-pulse 2s ease-in-out infinite;
}
.oh-badge-closed {
    color: #8a6d00;
    background: rgba(214, 165, 0, 0.18);
    border-color: rgba(214, 165, 0, 0.35);
}
.oh-badge-unknown {
    color: var(--text-muted);
    background: rgba(120, 120, 120, 0.12);
    border-color: var(--border);
}
@keyframes oh-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.85); }
}

/* Day-by-day table */
.opening-hours-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.opening-hours-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.opening-hours-table tr:last-child td { border-bottom: none; }
.opening-hours-table .oh-day    { font-weight: 600; width: 30%; }
.opening-hours-table .oh-hours  { text-align: right; }
.opening-hours-table .oh-marker { width: 60px; text-align: right; }

/* Today highlight */
.opening-hours-table tr.is-today td {
    background: rgba(94, 196, 230, 0.12);
}
.opening-hours-table tr.is-today td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.opening-hours-table tr.is-today td:last-child  { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.opening-hours-table tr.is-today .oh-day   { color: var(--text); }
.opening-hours-table tr.is-today .oh-hours { font-weight: 600; }

/* Closed days are de-emphasised */
.opening-hours-table tr.is-closed .oh-day,
.opening-hours-table tr.is-closed .oh-hours {
    color: var(--text-muted);
    font-style: italic;
}

.oh-today-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--accent, #5ec4e6);
    color: #08323f;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
@media (max-width: 480px) {
    .opening-hours-table .oh-marker { display: none; }
    .opening-hours-table .oh-day    { width: 40%; }
}


/* =====================================================================
   Static content pages (Milestone 6 — Refund Policy, Store Location, etc.)
   ===================================================================== */
.content-prose h2 {
    margin-top: 28px;
    margin-bottom: 8px;
    font-size: 18px;
    color: var(--text);
}
.content-prose h2:first-child { margin-top: 0; }
.content-prose p { margin: 0 0 12px; line-height: 1.6; }
.content-prose ul,
.content-prose ol {
    margin: 0 0 16px;
    padding-left: 22px;
    line-height: 1.7;
}
.content-prose li { margin-bottom: 4px; }
.content-prose a { color: var(--accent); }


/* =====================================================================
   Product stock badges (Milestone 7)
   ===================================================================== */

/* The image-link wrapper needs to be the positioning context so badges
   sit over the image. */
.product-image-link {
    position: relative;
    display: block;
}

/* Common badge style — both Sold out and Low stock use it. */
.stock-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.stock-badge-sold-out {
    background: var(--danger);
    color: white;
}
.stock-badge-low {
    background: var(--secondary);
    color: var(--accent-ink);
}

/* Dim sold-out product images so they read as unavailable at a glance. */
.product-image-link.is-sold-out .product-image {
    filter: grayscale(0.6) brightness(0.7);
}


/* =====================================================================
   Cart quantity stepper (Milestone 7 polish)
   ===================================================================== */
.qty-stepper {
    display: inline-flex;
    align-items: stretch;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    height: 36px;
}
.qty-stepper-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    user-select: none;
}
.qty-stepper-btn:hover:not(:disabled) {
    background: var(--accent-soft);
    color: var(--accent);
}
.qty-stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.qty-stepper-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 0 6px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
}


/* =====================================================================
   Stock-line beneath the price on product cards (Milestone 7 polish)
   ===================================================================== */
.product-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.product-price-block .stock-line {
    line-height: 1.2;
}


/* =====================================================================
   Mobile polish (Milestone 7)
   Tap targets, stack rules, alignment fixes for narrow viewports.
   ===================================================================== */

/* Phones: ensure interactive elements clear the 44 px tap-target line */
@media (max-width: 640px) {
    /* Stepper — bigger touch area on mobile */
    .qty-stepper       { height: 44px; }
    .qty-stepper-btn   { width: 44px; font-size: 20px; }
    .qty-stepper-value { min-width: 44px; font-size: 16px; }

    /* Form inputs — slightly more padding so keyboards don't overlap text
       and tap targets are comfortable */
    .form-input { padding: 12px 12px; font-size: 15px; }
    select.form-input, input.form-input { min-height: 44px; }
    textarea.form-input { min-height: 80px; }

    /* Action-bar rows on staff/admin pages: stack each button full-width */
    .dash-actions-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .dash-actions-bar .btn { width: 100%; text-align: center; }

    /* Filter pills row scrolls horizontally instead of wrapping into ugly
       chunks (especially noticeable with the 7 status pills on staff orders) */
    .filter-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .filter-pills::-webkit-scrollbar { display: none; }
    .filter-pill { flex-shrink: 0; padding: 8px 14px; }

    /* Primary CTA buttons feel more "thumb-friendly" at this size */
    .btn-primary, .btn-large { min-height: 44px; }

    /* Dashboard stat-cards: 2-up on phones (was wrapping to 1 in some cases) */
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat-card { padding: 14px; }
    .stat-value { font-size: 22px; }

    /* Headings less shouty on small screens */
    .dash-header h1 { font-size: 24px; }
    .dash-header p  { font-size: 13px; }
    .dash-section   { padding: 14px; }
    .dash-section h2 { font-size: 16px; }

    /* Order/product action grids on staff detail pages — stack tightly */
    .action-grid { gap: 10px; }
    .action-card { padding: 14px; }
    .action-card h3 { font-size: 16px; margin-bottom: 4px; }
    .action-card p  { font-size: 13px; margin: 0; }
}

/* Very narrow phones (≤ 380px — older iPhones, some Androids) */
@media (max-width: 380px) {
    .container { padding: 0 12px; }
    .stat-grid { grid-template-columns: 1fr; }
}


/* =====================================================================
   View-order page mobile polish (Milestone 7)
   ===================================================================== */

/* Definition-list for "Delivery & payment" — clean label/value pattern
   that reads well at any width. */
.kv-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 16px;
    row-gap: 8px;
    margin: 0;
}
.kv-list dt {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    padding-top: 2px;
}
.kv-list dd {
    margin: 0;
    line-height: 1.4;
    word-break: break-word;
}
.kv-list dd .tiny { display: block; margin-top: 2px; }

@media (max-width: 600px) {
    /* Stack labels above values so long addresses / descriptions get the
       full row width instead of wrapping into a narrow column. */
    .kv-list { grid-template-columns: 1fr; row-gap: 4px; }
    .kv-list dt { padding-top: 8px; }
    .kv-list dt:first-of-type { padding-top: 0; }
}

/* Table → cards on mobile.
   Add the `mobile-cards` class to any .dash-table you want to behave this
   way; each <td> needs a data-label attribute so the field name still
   appears in card mode. The first <td> in each row gets the prominent
   "title" treatment. */
@media (max-width: 600px) {
    .dash-table.mobile-cards { min-width: 0; }
    .dash-table.mobile-cards thead { display: none; }
    .dash-table.mobile-cards,
    .dash-table.mobile-cards tbody,
    .dash-table.mobile-cards tr {
        display: block;
        width: 100%;
    }
    .dash-table.mobile-cards tr {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 12px 14px;
        margin-bottom: 10px;
    }
    .dash-table.mobile-cards td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 4px 0;
        border: 0;
    }
    .dash-table.mobile-cards td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        flex-shrink: 0;
    }
    /* First td (the item / order name) gets a heading look — full width,
       no label. */
    .dash-table.mobile-cards td:first-child {
        flex-direction: column;
        align-items: flex-start;
        font-weight: 600;
        font-size: 15px;
        margin: 0 0 6px;
        padding-top: 0;
    }
    .dash-table.mobile-cards td:first-child::before { display: none; }
    /* Container can stop scrolling — table is full-width as cards now. */
    .table-scroll:has(.mobile-cards) { overflow: visible; }
}