/* =====================================================================
   Palette — taken from the Foothills Bargains logo
   ---------------------------------------------------------------------
     forest green  #2D5A34   the wordmark and the near hill
     hill green    #4F7A42   the far hill
     mountain blue #4A7BA7   the peaks
     tag orange    #E8742B   the price tag
     brown         #8B5A2B   "BARGAINS"

   ⚠ THE LOGO ORANGE IS NOT USABLE AS A BUTTON COLOUR. White text on
   #E8742B measures 3.02:1, well under the 4.5:1 WCAG minimum — it looks
   fine to most people and is genuinely hard to read for some. So the
   interactive orange is darkened to #B24E10 (5.26:1) and the bright
   original is kept for badges and accents where nothing sits on top.

   Every value below was checked with a contrast calculator, not chosen
   by eye. Dark-mode variants are lightened for the same reason —
   forest green on a dark background is only 2.26:1.
   ===================================================================== */
:root {
  /* brand */
  --brand-green:  #2D5A34;
  --brand-hill:   #4F7A42;
  --brand-blue:   #4A7BA7;
  --brand-orange: #E8742B;
  --brand-brown:  #8B5A2B;

  /* surfaces */
  --bg:        #fbfaf7;
  --panel:     #ffffff;
  --panel-2:   #f4f2ec;
  --ink:       #1b2018;
  --muted:     #5a6154;
  --line:      #ddd9cf;

  /* primary — forest green, 7.67:1 on the page background */
  --accent:      #2D5A34;
  --accent-ink:  #ffffff;
  --accent-soft: #e4ede2;

  /* call to action — the price-tag orange, darkened so white text passes */
  --cta:      #B24E10;
  --cta-ink:  #ffffff;
  --cta-soft: #fbeadd;

  /* informational — mountain blue */
  --info:     #2F6591;
  --info-soft:#e3edf6;

  --good:      #1f6b3f;
  --good-bg:   #e4f1e8;
  --warn:      #8a5300;
  --warn-bg:   #fbf0dc;
  --bad:       #a32020;
  --bad-bg:    #fbe9e9;
  --radius:    10px;
  --shadow:    0 1px 2px rgba(27,32,24,.05), 0 6px 18px rgba(27,32,24,.05);
}

/* Dark mode: the same hues, lightened until they clear 4.5:1 on the dark
   surface. Reusing the light values here would leave the brand green at
   2.26:1 — technically "on brand" and effectively unreadable. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#14170f; --panel:#1d2117; --panel-2:#242a1d; --ink:#eef1e6; --muted:#a3ab99;
    --line:#333a29;
    --accent:#7FB86A; --accent-ink:#12160e; --accent-soft:#22301c;
    --cta:#F0913F;    --cta-ink:#1a1206;    --cta-soft:#2e2114;
    --info:#7FB0D6;   --info-soft:#1b2733;
    --good:#6cc48c; --good-bg:#17281d; --warn:#e0b055; --warn-bg:#2a2113;
    --bad:#f08a8a;  --bad-bg:#2b1616;
    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --bg:#14170f; --panel:#1d2117; --panel-2:#242a1d; --ink:#eef1e6; --muted:#a3ab99;
  --line:#333a29;
  --accent:#7FB86A; --accent-ink:#12160e; --accent-soft:#22301c;
  --cta:#F0913F;    --cta-ink:#1a1206;    --cta-soft:#2e2114;
  --info:#7FB0D6;   --info-soft:#1b2733;
  --good:#6cc48c; --good-bg:#17281d; --warn:#e0b055; --warn-bg:#2a2113;
  --bad:#f08a8a;  --bad-bg:#2b1616;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
h1,h2,h3 { line-height: 1.25; letter-spacing: -.01em; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 1rem; }
.muted { color: var(--muted); }
.sr, .skip:not(:focus) {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip:focus { position:static; display:inline-block; padding:.6rem 1rem; background:var(--accent); color:var(--accent-ink); }

/* ---------- header ---------- */
.site-head { background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.head-row { display:flex; align-items:center; gap:1rem; padding:.75rem 1rem; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:.55rem; font-weight:700; text-decoration:none; color:var(--ink); white-space:nowrap; }
.brand img { height:38px; width:auto; display:block; }
/* Fallback mark, used only when no logo file is present on the server. */
.brand-mark { display:grid; place-items:center; width:2rem; height:2rem; border-radius:8px;
  background:var(--accent); color:var(--accent-ink); font-size:.85rem; }
.brand-name { font-size:1.05rem; letter-spacing:-.01em; }
@media (max-width:520px) { .brand-name { display:none; } .brand img { height:34px; } }
.search { display:flex; flex:1 1 16rem; min-width:12rem; }
.search input { flex:1; min-width:0; padding:.55rem .75rem; border:1px solid var(--line); border-right:0;
  border-radius:8px 0 0 8px; background:var(--panel-2); color:var(--ink); font:inherit; }
.search button { padding:.55rem 1rem; border:1px solid var(--accent); border-radius:0 8px 8px 0;
  background:var(--accent); color:var(--accent-ink); font:inherit; cursor:pointer; }
.head-nav { display:flex; align-items:center; gap:1rem; white-space:nowrap; }
.head-nav a { text-decoration:none; color:var(--ink); }
.head-nav a:hover { color:var(--accent); }
.admin-link { color:var(--accent) !important; font-weight:600; }
/* A submit button that reads as a nav link — used for Sign out, which must be
   a POST but should not look like a form control in the header. */
.linkbtn { background:none; border:0; padding:0; margin:0; font:inherit; color:var(--ink);
  cursor:pointer; text-decoration:none; }
.linkbtn:hover { color:var(--accent); text-decoration:underline; }

.pill { display:inline-block; min-width:1.4rem; padding:0 .35rem; border-radius:999px;
  background:var(--accent); color:var(--accent-ink); font-size:.78rem; text-align:center; }

/* ---------- flashes ---------- */
.flash { margin:1rem 0; padding:.75rem 1rem; border-radius:8px; border:1px solid var(--line); background:var(--panel); }
.flash.ok   { background:var(--good-bg); border-color:var(--good); color:var(--ink); }
.flash.warn { background:var(--warn-bg); border-color:var(--warn); }
.flash.err  { background:var(--bad-bg);  border-color:var(--bad); }

/* ---------- layout blocks ---------- */
main { padding: 1.5rem 1rem 3rem; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow); }
.stack > * + * { margin-top:1rem; }
.row { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
/* ⚠ VARIANTS ARE CLASSES, NOT INLINE STYLES. An inline
   style="grid-template-columns:…" beats the media query below, so a page that
   set its own columns inline stayed two-column on a phone — browse.php had a
   fixed 16rem filter rail crushing the product grid on every mobile visit. */
.split { display:grid; grid-template-columns: 1fr 20rem; gap:1.5rem; align-items:start; }
.split-filters { grid-template-columns: 16rem 1fr; }
.split-even    { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) {
  .split, .split-filters, .split-even { grid-template-columns: 1fr; }
}

/* ---------- product grid ---------- */
.grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.card-img { display:block; position:relative; aspect-ratio:1/1; background:var(--panel-2); }
.card-img img { width:100%; height:100%; object-fit:cover; }
.noimg { display:grid; place-items:center; height:100%; color:var(--muted); font-size:.85rem; }
.card-body { padding:.75rem; }
.card-body h3 { margin:0 0 .35rem; font-size:.95rem; font-weight:600; }
.card-body h3 a { color:var(--ink); text-decoration:none; }
.card-body h3 a:hover { color:var(--accent); }
.price { margin:0; font-size:1.15rem; font-weight:700; color:var(--accent); }
.cond { margin:.15rem 0 0; font-size:.82rem; }
/* Countdown / stock badge. The bright logo orange is fine HERE because the
   text on it is dark, not white — the 4.5:1 problem only applies the other way. */
.badge { position:absolute; top:.5rem; left:.5rem; padding:.2rem .5rem; border-radius:6px;
  font-size:.72rem; font-weight:700; background:var(--brand-orange); color:#241203; border:1px solid rgba(0,0,0,.15); }
.badge.sold { background:var(--bad-bg); color:var(--bad); border-color:var(--bad); }

/* ---------- forms ---------- */
label { display:block; font-weight:600; font-size:.9rem; margin-bottom:.25rem; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=tel], select, textarea {
  width:100%; padding:.55rem .7rem; border:1px solid var(--line); border-radius:8px;
  background:var(--panel-2); color:var(--ink); font:inherit;
}
textarea { min-height:6rem; resize:vertical; }
.field + .field { margin-top:.9rem; }
.hint { font-size:.82rem; color:var(--muted); margin:.25rem 0 0; font-weight:400; }
.btn { display:inline-block; padding:.6rem 1.1rem; border-radius:8px; border:1px solid var(--accent);
  background:var(--accent); color:var(--accent-ink); font:inherit; font-weight:600; cursor:pointer; text-decoration:none; }
.btn:hover { filter:brightness(1.08); }
.btn:focus-visible { outline:3px solid var(--info); outline-offset:2px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.btn.ghost { background:transparent; color:var(--accent); }
.btn.danger { background:var(--bad); border-color:var(--bad); color:#fff; }
.btn.sm { padding:.35rem .7rem; font-size:.85rem; }
/* The price-tag orange, reserved for the actions that spend money — add to
   cart, place bid, pay. Using it everywhere would make none of them stand out. */
.btn.cta { background:var(--cta); border-color:var(--cta); color:var(--cta-ink); }

/* Search button sits in the header; orange makes it compete with Add to cart. */
.search button { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.search input:focus { outline:2px solid var(--accent); outline-offset:-1px; }

/* ---------- tables ---------- */
.tablewrap { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; font-size:.92rem; }
table.data th, table.data td { padding:.6rem .5rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
table.data th { font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
table.data td.num, table.data th.num { text-align:right; white-space:nowrap; }

/* ---------- status chips ---------- */
.chip { display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.78rem; font-weight:600;
  background:var(--panel-2); border:1px solid var(--line); }
.chip.paid, .chip.completed, .chip.refunded-ok { background:var(--good-bg); color:var(--good); border-color:var(--good); }
.chip.pending, .chip.requested, .chip.packing { background:var(--warn-bg); color:var(--warn); border-color:var(--warn); }
.chip.cancelled, .chip.declined { background:var(--bad-bg); color:var(--bad); border-color:var(--bad); }

/* ---------- item page ---------- */
.item-grid { display:grid; grid-template-columns: 1.1fr 1fr; gap:2rem; align-items:start; }
@media (max-width:860px) { .item-grid { grid-template-columns:1fr; } }
.gallery-main { aspect-ratio:1/1; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.gallery-main img { width:100%; height:100%; object-fit:contain; }
.thumbs { display:flex; gap:.5rem; margin-top:.5rem; flex-wrap:wrap; }
.thumbs button { width:64px; height:64px; padding:0; border:1px solid var(--line); border-radius:8px;
  background:var(--panel-2); cursor:pointer; overflow:hidden; }
.thumbs button[aria-current="true"] { border-color:var(--accent); outline:2px solid var(--accent); }
.thumbs img { width:100%; height:100%; object-fit:cover; }
.buybox { position:sticky; top:5rem; }

/* ---------- filters ---------- */
.filters { position:sticky; top:5rem; }
.filters fieldset { border:0; padding:0; margin:0 0 1.1rem; }
.filters legend { font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:.4rem; }
.filters label { font-weight:400; font-size:.92rem; display:flex; gap:.5rem; align-items:center; margin-bottom:.2rem; }
.filters input[type=checkbox], .filters input[type=radio] { width:auto; }

/* ---------- cart / totals ---------- */
.totals { list-style:none; margin:0; padding:0; }
.totals li { display:flex; justify-content:space-between; gap:1rem; padding:.35rem 0; }
.totals li.grand { border-top:1px solid var(--line); margin-top:.4rem; padding-top:.7rem; font-size:1.15rem; font-weight:700; }
.qty-input { width:5rem; }

/* ---------- footer ---------- */
.site-foot { border-top:1px solid var(--line); background:var(--panel); margin-top:3rem; padding:2rem 0 1rem; }
.foot-cols { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.foot-cols a { display:block; text-decoration:none; font-size:.92rem; margin-top:.3rem; }
.foot-cols strong { display:block; margin-bottom:.3rem; }
.foot-legal { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid var(--line); margin-top:1.5rem; padding-top:1rem; font-size:.82rem; }

/* ---------- misc ---------- */
.empty { text-align:center; padding:3rem 1rem; color:var(--muted); }
.callout { border:1px solid var(--warn); background:var(--warn-bg); border-radius:8px; padding:.8rem 1rem; }
.code-box { font:700 1.8rem/1.2 ui-monospace, Consolas, Menlo, monospace; letter-spacing:.35em;
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:.8rem; text-align:center; }
altcha-widget { display:block; margin:.9rem 0; max-width:22rem; }

/* =====================================================================
   Display preferences — theme toggle and accessibility panel
   ===================================================================== */

/* ---- theme toggle (header, right) ---- */
.theme-form { display:inline; margin:0; }
.iconbtn { display:grid; place-items:center; width:2.1rem; height:2.1rem; padding:0;
  border:1px solid var(--line); border-radius:8px; background:var(--panel-2);
  color:var(--ink); font-size:1rem; line-height:1; cursor:pointer; }
.iconbtn:hover { border-color:var(--accent); color:var(--accent); }
.iconbtn:focus-visible { outline:3px solid var(--info); outline-offset:2px; }
/* Show the sun in dark mode (what you'd switch TO) and the moon in light.
   Labelling the destination rather than the current state is what stops the
   "which one am I in?" confusion these toggles usually cause. */
.theme-sun  { display:none; }
.theme-moon { display:inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-sun  { display:inline; }
  :root:not([data-theme="light"]) .theme-moon { display:none; }
}
:root[data-theme="dark"]  .theme-sun  { display:inline; }
:root[data-theme="dark"]  .theme-moon { display:none; }
:root[data-theme="light"] .theme-sun  { display:none; }
:root[data-theme="light"] .theme-moon { display:inline; }

/* ---- accessibility panel (floating, bottom left) ---- */
.a11y { position:fixed; left:1rem; bottom:1rem; z-index:60; }
.a11y-btn { display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%;
  background:var(--accent); color:var(--accent-ink); font-size:1.4rem; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.18);
  list-style:none; position:relative; }
.a11y-btn::-webkit-details-marker { display:none; }
.a11y-btn:hover { filter:brightness(1.1); }
.a11y-btn:focus-visible { outline:3px solid var(--info); outline-offset:3px; }
/* A dot when anything is set, so the panel does not silently hold settings
   somebody has forgotten about. */
.a11y-dot { position:absolute; top:2px; right:2px; width:.7rem; height:.7rem; border-radius:50%;
  background:var(--brand-orange); border:2px solid var(--accent); }

.a11y-panel { position:absolute; left:0; bottom:3.6rem; width:19rem; max-width:calc(100vw - 2rem);
  max-height:min(70vh, 34rem); overflow-y:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:1rem; box-shadow:var(--shadow); }
.a11y-panel h2 { margin:0 0 .6rem; font-size:1rem; }
.a11y-panel fieldset { border:0; padding:0; margin:0 0 .9rem; }
.a11y-panel legend { font-size:.78rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); margin-bottom:.35rem; padding:0; }

.seg { display:flex; gap:.25rem; }
.seg button { flex:1; padding:.4rem .3rem; font:inherit; font-size:.85rem; cursor:pointer;
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink); border-radius:7px; }
.seg button.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; }
.seg button:focus-visible { outline:3px solid var(--info); outline-offset:1px; }

.a11y-row { display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  font-weight:400; font-size:.9rem; margin-bottom:.6rem; }
.a11y-row .hint { font-size:.76rem; }
.switch { flex:0 0 2.6rem; height:1.5rem; border-radius:999px; border:1px solid var(--line);
  background:var(--panel-2); position:relative; cursor:pointer; padding:0; }
.switch span { position:absolute; top:2px; left:2px; width:1.1rem; height:1.1rem; border-radius:50%;
  background:var(--muted); transition:left .15s ease, background .15s ease; }
.switch.on { background:var(--accent); border-color:var(--accent); }
.switch.on span { left:calc(100% - 1.3rem); background:#fff; }
.switch:focus-visible { outline:3px solid var(--info); outline-offset:2px; }

@media (max-width:520px) { .a11y-panel { width:calc(100vw - 2rem); } }
@media print { .a11y, .theme-form { display:none; } }

/* =====================================================================
   Accessibility modes — driven by attributes PHP prints on <html>, so
   they are already applied on first paint with no flash.
   ===================================================================== */

/* Text size scales the root, so every rem-based size follows it. */
:root[data-text="lg"] { font-size:112.5%; }
:root[data-text="xl"] { font-size:131.25%; }

:root[data-underline="1"] a { text-decoration:underline; }
:root[data-underline="1"] .btn,
:root[data-underline="1"] .brand { text-decoration:none; }

:root[data-spacing="1"] body { line-height:1.85; letter-spacing:.02em; word-spacing:.06em; }
:root[data-spacing="1"] p, :root[data-spacing="1"] li { margin-bottom:.9em; }

/* Reduce motion, either because the visitor asked here or because their
   operating system already says so. Both are honoured. */
:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after {
  animation-duration:.001ms !important; animation-iteration-count:1 !important;
  transition-duration:.001ms !important; scroll-behavior:auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* Higher contrast: darker ink, stronger borders, no faint greys. */
:root[data-contrast="1"] {
  --ink:#000000; --muted:#333333; --line:#767676;
  --panel:#ffffff; --panel-2:#f2f2f2; --bg:#ffffff;
  --accent:#1d3f22; --cta:#8f3d08; --info:#1d4c73;
  --shadow:none;
}
:root[data-contrast="1"][data-theme="dark"],
:root[data-contrast="1"]:not([data-theme="light"]) {
  --ink:#ffffff; --muted:#dddddd; --line:#9a9a9a;
  --panel:#000000; --panel-2:#111111; --bg:#000000;
  --accent:#9fe08a; --accent-ink:#000000; --cta:#ffab5e; --cta-ink:#000000; --info:#9fcdf0;
}
:root[data-contrast="1"] .panel,
:root[data-contrast="1"] .card,
:root[data-contrast="1"] input,
:root[data-contrast="1"] select,
:root[data-contrast="1"] textarea { border-width:2px; }
:root[data-contrast="1"] .muted { color:var(--muted); }


/* =====================================================================
   Mobile
   ---------------------------------------------------------------------
   The header carries a brand, a search box, four or five nav items, a
   theme toggle and a cart — far too much for one row on a phone. Below
   700px the search drops to its own full-width row and the nav becomes a
   compact strip, which keeps everything reachable with one thumb.
   ===================================================================== */
@media (max-width: 700px) {
  .head-row { gap:.5rem .75rem; padding:.6rem .75rem; }
  .brand { order:1; flex:0 0 auto; }
  .head-nav { order:2; margin-left:auto; gap:.85rem; font-size:.92rem; }
  /* Full width on its own line, so the box is actually usable rather than a
     3cm slot between the logo and the cart. */
  .search { order:3; flex:1 0 100%; }
  .search input { font-size:16px; }   /* under 16px iOS zooms the page on focus */
}

@media (max-width: 480px) {
  .wrap { padding:0 .75rem; }
  main { padding:1rem .75rem 2.5rem; }
  h1 { font-size:1.45rem; }
  h2 { font-size:1.15rem; }

  /* Two columns of cards still beats one — a single column means endless
     scrolling past items the shopper has already rejected. */
  .grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem; }
  .card-body { padding:.6rem; }
  .card-body h3 { font-size:.88rem; }
  .price { font-size:1.05rem; }

  .panel { padding:1rem .85rem; }
  .foot-cols { gap:1.1rem; }

  /* Buying actions go full width — a 44px-tall target you cannot miss. */
  .btn { padding:.7rem 1.1rem; }
  .btn.cta, .buybox .btn { display:block; width:100%; text-align:center; }
  .item-grid { gap:1.25rem; }
  .buybox { position:static; }        /* sticky in a short viewport traps content */
  .filters, .item-grid .buybox { position:static; }
}

/* Anything that can overflow gets its own scroller, so the PAGE never
   scrolls sideways — a horizontally shifting page is the single most
   noticeable "this site is broken on mobile" symptom. */
html, body { overflow-x:hidden; }
.tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.data { min-width:32rem; }
@media (max-width:480px) { table.data { font-size:.85rem; } }

/* Inputs and buttons need a real touch target. 44px is the accepted minimum;
   below that people miss and blame the site. */
@media (pointer: coarse) {
  .btn, .iconbtn, .seg button, .switch, .search button,
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=search], input[type=tel], select { min-height:44px; }
  .btn.sm { min-height:38px; }
  .head-nav a, .linkbtn { padding:.35rem 0; display:inline-block; }
}

/* The accessibility button must not sit on top of what you are reading. */
@media (max-width: 480px) {
  .a11y { left:.6rem; bottom:.6rem; }
  .a11y-btn { width:2.75rem; height:2.75rem; font-size:1.25rem; }
  .a11y-panel { bottom:3.25rem; }
}

/* iOS zooms the whole page when a focused input is under 16px. Everything
   stays 16px on touch devices for that reason alone. */
@media (max-width: 700px) {
  input, select, textarea { font-size:16px; }
}


/* ---- Collapsible filter panel ----
   A checkbox, not <details>: a closed <details> hides its contents through the
   internal slot, which neither display nor content-visibility on the child can
   override, so forcing it open on desktop left an empty panel.

   DEFAULTS ARE THE DESKTOP STATE — toggle hidden, filters shown — and the
   mobile block below turns the toggle on. Written this way round deliberately:
   every other breakpoint in this file is max-width, so keeping one direction
   means there is no chance of two queries disagreeing about the middle. */
/* On desktop this reads as a plain section heading above the always-visible
   filters; on mobile the block below turns it into the accordion control.
   Presenting it as a heading rather than hiding it is deliberate — the rail
   otherwise starts with an unlabelled list of radio buttons. */
.filterbox-summary {
  display:block; font-weight:700; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); margin:0 0 .5rem; padding:0; cursor:default;
}
.filterbox-body { display:block; }

@media (max-width: 860px) {
  .filters { position:static; }

  .filterbox-summary {
    display:flex; align-items:center; gap:.5rem; cursor:pointer;
    font-weight:700; font-size:1.02rem; letter-spacing:0; text-transform:none;
    color:var(--ink); padding:.6rem 0; margin:0; user-select:none;
  }
  .filterbox-summary::after { content:'▾'; margin-left:auto; transition:transform .15s ease; }
  .filtertoggle:checked ~ .filterbox-summary::after { transform:rotate(180deg); }
  /* The checkbox is visually hidden, so the focus ring is drawn on the label. */
  .filtertoggle:focus-visible ~ .filterbox-summary { outline:3px solid var(--info); outline-offset:2px; }

  .filterbox-body { display:none; }
  .filtertoggle:checked ~ .filterbox-body { display:block; }
}