/* ==========================================================================
   WarehouseHawk — a utility for tracking warehouse-club shelf prices & stock.
   Design priorities: function and trust first. Clean neutral surfaces, clear
   hierarchy, real data made scannable. Restrained brand colour from the hawk.
   - Headings : Archivo
   - Body/UI  : IBM Plex Sans
   - Data     : IBM Plex Mono (SKUs, prices-as-data, timestamps, distances)
   ========================================================================== */

:root {
  --ink: #1c1b18;          /* header / footer / strongest text */
  --surface: #ffffff;      /* cards & panels */
  --surface-2: #fafaf8;    /* inputs / subtle fills */
  --bg: #f4f4f1;           /* page background */
  --line: #e5e4df;         /* hairline borders */
  --line-strong: #d3d2cb;
  --text: #1f1e1b;
  --muted: #6b6f74;

  --brand: #b53a1f;        /* red-tailed hawk: links + primary action */
  --brand-dark: #8c2a13;
  --brand-tint: #f7eae5;
  --accent: #b9760a;       /* amber: deal highlight, used sparingly */

  --in-stock: #1f7a46;
  --low-stock: #a96b0a;
  --out-stock: #b42318;
  --unknown: #6b6f74;

  --clearance: #6a3f8a;
  --clearance-tint: #f5f0f8;
  --clearance-line: #dfd0e8;
  --sale: #1d6fb8;
  --sale-tint: #eaf3fb;
  --sale-line: #cfe3f5;
  --price-drop: var(--in-stock);
  --price-drop-tint: #eef6f0;
  --price-drop-line: #cde2d3;

  /* Costco.com online offer: a cool blue keeps "buy online" visually distinct
     from the warehouse's red in-club identity. */
  --online: #0a5aa2;
  --online-dark: #073f74;
  --online-tint: #eef4fb;
  --online-line: #cbdff2;

  --shadow: 0 1px 2px rgba(28,27,24,.06);
  --shadow-lg: 0 10px 26px -14px rgba(28,27,24,.32);
  --radius: 6px;
  --radius-sm: 4px;
  --radius-pill: 999px;

  /* Spacing scale. Card and panel rhythm is expressed in these steps so
     density can be retuned in one place instead of ~100 literals. */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Type scale. */
  --text-2xs: .72rem;
  --text-xs: .8rem;
  --text-sm: .9rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;

  /* Semantic surface tints, shared by flash messages, verdicts and cards so
     the same "this is good / caution / bad" colour is never respelled. */
  --ok-tint: #eef6f0;
  --ok-line: #bfe0cb;
  --ok-ink: #14532b;
  --warn-tint: #fbf2e3;
  --warn-line: #efddc0;
  --warn-ink: #6b4a05;
  --danger-tint: #fbeae8;
  --danger-line: #f1cdc8;
  --danger-ink: #7a1d0d;

  /* Shared height for search-row controls (input, warehouse chip, buttons) so
     the row reads as one aligned strip instead of a ragged staircase. */
  --control-h: 3rem;

  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-underline-offset: 2px; }
a:hover { color: var(--brand-dark); }

.container { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 1.1rem; }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.01em; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.95rem); font-weight: 700; line-height: 1.12; margin: 0 0 .9rem; }
h2 { font-size: 1.25rem; font-weight: 600; margin: 2rem 0 1rem; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: .5rem; z-index: 100; transform: translateY(-160%); padding: .6rem .85rem; border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 600; text-decoration: none; box-shadow: var(--shadow-lg); }
.skip-link:focus { transform: translateY(0); }

/* mono inventory data */
.distance, .ptable,
.pager-status, .change-link { font-family: var(--font-mono); }

/* inline icons */
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; flex: none; }

/* ==========================================================================
   Header / footer
   ========================================================================== */
.site-header {
  background: var(--ink); color: #f3f1ec;
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid rgba(0,0,0,.25); box-shadow: 0 1px 0 rgba(255,255,255,.04);
}
/* Local/dev environment: distinct header colour so it's never confused with prod. */
.site-header--dev {
  background: #3b2f75;
  border-bottom-color: rgba(0,0,0,.35);
}
.header-inner { position: relative; display: flex; align-items: center; gap: 1rem; padding: .7rem 1.1rem; }
.brand { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; letter-spacing: -.02em; }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }

.nav { display: flex; align-items: center; gap: .35rem 1rem; flex-wrap: wrap; margin-left: auto; }
.nav a { min-height: 36px; display: inline-flex; align-items: center; color: #cdc9c0; text-decoration: none; font-size: .94rem; }
.nav a:hover { color: #fff; }

.btn-outline { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: .5rem .85rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn-outline:hover { border-color: var(--brand); color: var(--brand-dark); }
.site-header .btn-outline { border-color: rgba(243,241,236,.38); background: transparent; color: #f3f1ec; }
.site-header .btn-outline:hover { background: rgba(243,241,236,.1); color: #fff; }

.nav .nav-warehouse {
  display: inline-flex; align-items: center; gap: .35rem; background: rgba(243,241,236,.08);
  border: 1px solid rgba(243,241,236,.2); padding: .38rem .72rem; border-radius: var(--radius-sm);
  color: #f3f1ec; font-weight: 500; font-size: .9rem; max-width: 240px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.nav .nav-warehouse:hover { background: rgba(243,241,236,.16); }
.nav-warehouse .ico { color: var(--brand); }
.nav-warehouse .ico, .btn-locate .ico { opacity: .95; }

.linklike { background: none; border: none; color: #cdc9c0; cursor: pointer; font: inherit; font-size: .94rem; padding: 0; }
.linklike:hover { color: #fff; text-decoration: underline; }
.linklike.danger { color: var(--out-stock); }
.linklike.danger:hover { color: #7a1d0d; }
.linklike.edit-link { color: var(--brand); text-decoration: none; }
.linklike.edit-link:hover { color: var(--brand-dark); text-decoration: underline; }

main.container { flex: 1 0 auto; padding-top: 1.5rem; padding-bottom: 3rem; }

.site-footer { border-top: 1px solid rgba(0,0,0,.25); background: var(--ink); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6) 0; text-align: center; }
.site-footer p { order: 2; color: #9f9a91; font-size: var(--text-xs); margin: 0; line-height: 1.5; }
.footer-links { order: 1; display: flex; align-items: center; justify-content: center; gap: .25rem var(--space-5); flex-wrap: wrap; }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; color: #d7d3ca; font-size: var(--text-xs); font-weight: 600; text-decoration: none; white-space: nowrap; }
.footer-links a:hover { color: #fff; text-decoration: underline; }

/* ==========================================================================
   Flash messages
   ========================================================================== */
.flash { margin: 1rem 0 0; padding: .7rem .9rem; border-radius: var(--radius-sm); border: 1px solid var(--line); border-left: 3px solid var(--muted); background: var(--surface); font-size: .95rem; }
.flash-success { border-left-color: var(--in-stock); background: var(--ok-tint); color: var(--ok-ink); }
.flash-error { border-left-color: var(--out-stock); background: var(--brand-tint); color: var(--danger-ink); }
.flash-info { border-left-color: var(--accent); background: var(--warn-tint); color: var(--warn-ink); }

/* ==========================================================================
   Hero — concise onboarding
   ========================================================================== */
.landing { margin-bottom: var(--space-4); }
.landing .hero { padding-bottom: .2rem; }
.landing .search-panel { margin-top: 1.15rem; }
.hero { max-width: 760px; padding: 1.4rem 0 .4rem; }
.hero h1 { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.2rem); }
.hero-sub { color: var(--muted); font-size: 1.05rem; margin: 0; max-width: 58ch; }

/* ==========================================================================
   Static support pages
   ========================================================================== */
.page-hero { max-width: 760px; padding: 1.4rem 0 .6rem; }
.page-sub { color: var(--muted); font-size: 1.02rem; margin: 0; max-width: 68ch; }

.policy-panel, .contact-panel { min-width: 0; }
.policy-panel { padding: 1.35rem 1.5rem; }
.policy-simple { max-width: 760px; margin-top: 1rem; }
.policy-panel section + section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.policy-panel h2 { margin: 0 0 .55rem; font-size: 1.12rem; }
.policy-panel p { margin: .55rem 0 0; }
.policy-panel ul, .policy-panel ol { margin: .65rem 0 0; padding-left: 1.15rem; }
.policy-panel li { margin: .28rem 0; }
.policy-updated { color: var(--muted); font-family: var(--font-mono); font-size: .82rem; }

.contact-page { max-width: 760px; padding-top: 1.1rem; }
.contact-head { max-width: 680px; margin-bottom: 1rem; }
.contact-panel { padding: 1.35rem 1.5rem; }
.contact-panel-head { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.contact-panel h2 { margin: 0 0 .25rem; }
.contact-panel .muted { margin: 0; font-size: .9rem; }
.contact-form { margin-top: 1rem; }
.contact-form .btn { align-self: flex-start; min-width: 12rem; }
.form-field { display: flex; flex-direction: column; gap: .35rem; }
.errorlist { list-style: none; margin: 0; padding: 0; }
.contact-success { max-width: 620px; margin: 1rem auto; }

/* ==========================================================================
   Panels & forms
   ========================================================================== */
.search-panel, .compare-panel, .chart-panel, .desc-panel, .availability-panel, .empty-state, .story, .lookup-panel, .policy-panel, .contact-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.search-panel { --panel-pad: 1.25rem; padding: var(--panel-pad); margin-top: 1rem; }
.warehouse-search-panel { margin: .8rem 0 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.warehouse-search-form { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .7rem; }
.warehouse-search-query { flex: 1 1 auto; min-width: 0; }
.warehouse-search-query input { width: 100%; min-height: var(--control-h); padding-top: .6rem; padding-bottom: .6rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; }
.warehouse-search-query input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.warehouse-search-form .btn { flex: 0 0 auto; min-height: var(--control-h); }
.warehouse-search-context { min-height: 42px; display: flex; align-items: center; gap: .4rem .65rem; padding: .5rem .75rem; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: .85rem; }
.warehouse-search-context .ico { color: var(--brand); }
.warehouse-search-context strong { color: var(--text); }
.warehouse-search-context .change-link { margin-left: auto; min-height: 36px; display: inline-flex; align-items: center; }
.warehouse-search-panel > .geo-banner { display: flex; padding: .55rem .75rem; border-top: 1px solid var(--line); background: var(--surface-2); }
.warehouse-search-panel > .geo-banner .geo-banner-actions { margin-left: auto; }
.search-form { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.search-scope { width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
.search-scope legend {
  margin: 0 0 .35rem; color: var(--muted); font-family: var(--font-mono);
  font-size: .72rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
}
.search-scope-options {
  display: inline-flex; max-width: 100%; padding: 3px; gap: 3px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
}
.search-scope-option { position: relative; min-width: 0; cursor: pointer; }
.search-scope-option input {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.search-scope-label {
  min-height: 40px; display: flex; flex-direction: column; justify-content: center;
  padding: .35rem .7rem; border: 1px solid transparent; border-radius: calc(var(--radius-sm) - 2px);
  color: var(--muted); line-height: 1.15; transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.search-scope-label strong { color: var(--text); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.search-scope-label small { margin-top: .16rem; font-size: .68rem; white-space: nowrap; }
.search-scope-option:hover .search-scope-label { color: var(--text); }
.search-scope-option input:checked + .search-scope-label {
  border-color: var(--line-strong); background: var(--surface); color: var(--brand-dark); box-shadow: var(--shadow);
}
.search-scope-option input:focus-visible + .search-scope-label {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
.search-form:has(.scope-national-input:checked) .scope-warehouse-only,
.search-panel:has(.scope-national-input:checked) .panel-store,
.search-panel:has(.scope-national-input:checked) .panel-hint { display: none; }
.field { display: flex; flex-direction: column; flex: 1 1 200px; }
.field-grow { flex: 2 1 320px; }
.field label, .field-label, .stack-form label {
  display: block;
  font-size: .72rem; color: var(--muted); margin-bottom: .35rem;
  font-family: var(--font-mono); font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
}
.field input, .stack-form input[type=email], .stack-form input[type=text], .stack-form textarea {
  padding: .68rem .78rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 1rem; font-family: var(--font-body); background: var(--surface); color: var(--text);
}
.field input::placeholder, .stack-form textarea::placeholder { color: #a6a39a; }
.field input:focus, .stack-form input:focus, .stack-form textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.stack-form textarea { min-height: 11rem; resize: vertical; line-height: 1.5; }
input[type=checkbox] { accent-color: var(--brand); width: 1.05em; height: 1.05em; }

/* Every control on a search row shares one height, so labels line up across the
   row and the strip reads as a single search bar. */
.search-form .field input,
.search-form .btn,
.search-form .btn-locate { min-height: var(--control-h); }

/* Leading icon inside the main query input. */
.input-affix { position: relative; display: flex; }
.input-affix input { width: 100%; padding-left: 2.5rem; }
.input-affix-ico {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  width: 1.05rem; height: 1.05rem; color: var(--muted); pointer-events: none;
}
.input-affix input:focus ~ .input-affix-ico,
.input-affix:focus-within .input-affix-ico { color: var(--brand); }

/* The search panel states its warehouse once, as a header strip above the query
   row, so the store is never repeated in a field that looks disabled. */
.panel-store {
  display: flex; align-items: center; gap: .55rem;
  width: calc(100% + var(--panel-pad) * 2);
  margin: calc(var(--panel-pad) * -1) calc(var(--panel-pad) * -1) 1rem;
  padding: .6rem var(--panel-pad);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0;
}
.panel-store > .ico { flex: 0 0 auto; color: var(--brand); }
.panel-store-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.panel-store-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-store-link { color: var(--text); text-decoration: none; }
.panel-store-link:hover { color: var(--brand-dark); text-decoration: underline; }
.panel-store-sub { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-store-sub:empty { display: none; }
.panel-store-actions { display: inline-flex; align-items: center; gap: .7rem; margin-left: auto; }
.panel-store-save, .deals-save-form { display: inline-flex; margin: 0; }
.panel-store-save .change-link, .deals-save-form .change-link { border: 0; padding: 0; background: none; cursor: pointer; font: inherit; }
.change-link { flex: 0 0 auto; font-size: .76rem; color: var(--muted); }
.change-link:hover { color: var(--brand-dark); }
.btn {
  padding: .68rem 1.4rem; background: var(--brand); color: #fff; border: none; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: .45rem; justify-content: center;
}
.btn:hover { background: var(--brand-dark); color: #fff; }
.btn:active { transform: translateY(1px); }
/* Secondary action: same shape and tap target as .btn, without competing for the
   eye against the one primary button on a surface. */
.btn-ghost {
  background: var(--surface); color: var(--brand-dark);
  border: 1px solid var(--line-strong); font-weight: 600;
}
.btn-ghost:hover { background: var(--brand-tint); color: var(--brand-dark); border-color: var(--brand); }
button[data-loading]:disabled { opacity: .9; cursor: progress; }
.spinner { display: inline-block; width: .85em; height: .85em; margin-right: .15em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.1em; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.alert { margin: 1rem 0 0; padding: .7rem .9rem; background: var(--brand-tint); border: 1px solid #eab9ac; border-left: 3px solid var(--out-stock); color: #7a1d0d; border-radius: var(--radius-sm); }
.alert p { margin: 0 0 .65rem; }
.alert p:last-child { margin-bottom: 0; }
.panel-hint { margin: .8rem 0 0; font-size: .9rem; }

/* ==========================================================================
   How it works — plain numbered steps
   ========================================================================== */
.story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 1rem; }
.story { padding: 1.15rem 1.2rem 1.2rem; }
.story-step {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark);
  font-family: var(--font-mono); font-weight: 600; font-size: .85rem;
}
.story h3 { margin: .6rem 0 .35rem; font-size: 1.05rem; font-weight: 600; }
.story p { margin: 0; color: var(--muted); font-size: .94rem; }

.warehouse-directory { margin-top: 2.2rem; }

/* ==========================================================================
   Warehouse cards
   ========================================================================== */
.warehouse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: .8rem; }
.warehouse-card {
  display: flex; flex-direction: column; gap: .12rem; padding: .9rem 1rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: var(--text);
  box-shadow: var(--shadow); transition: border-color .12s ease, box-shadow .12s ease;
}
.warehouse-card strong { font-weight: 600; }
.warehouse-card:hover, .warehouse-card:focus-within { border-color: var(--brand); box-shadow: var(--shadow-lg); }
.warehouse-card span { color: var(--muted); font-size: .85rem; }
.warehouse-card .distance { color: var(--brand); font-weight: 600; font-size: .8rem; margin-top: .25rem; }

.stores-panel {
  padding: 1.45rem 1.55rem;
}
.stores-intro h1 { margin: 0 0 .45rem; }
.stores-intro > p { margin: 0; color: var(--muted); max-width: 48ch; }
.stores-form {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end; gap: .75rem; margin-top: 1rem;
}
.stores-form .field { min-width: 0; }
.stores-form .btn, .stores-form .btn-locate { white-space: nowrap; }
.btn-locate { align-self: flex-end; padding: .68rem 1rem; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-weight: 500; font-family: var(--font-body); cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.btn-locate:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-locate:disabled { opacity: .6; cursor: progress; }
.locate-status { margin: .6rem 0 0; font-size: .9rem; }

.store-card { gap: .15rem; }
.store-card.is-current { border-color: var(--in-stock); background: #eef6f0; }
.current-badge { margin-top: .55rem; color: var(--in-stock); font-weight: 600; font-size: .85rem; font-family: var(--font-mono); }
.store-actions { display: flex; align-items: center; gap: .6rem; margin-top: .65rem; flex-wrap: wrap; }
.store-actions .store-select { margin: 0; flex: 1 1 auto; }
.store-actions .store-remove { margin: 0; }
.store-remove .linklike { min-height: 44px; display: inline-flex; align-items: center; }
.store-select { margin: .6rem 0 0; }
.store-card .btn-outline { display: block; width: 100%; text-align: center; color: var(--text); border: 1px solid var(--line-strong); padding: .5rem .7rem; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; background: var(--surface); }
.store-card .btn-outline:hover { border-color: var(--brand); color: var(--brand-dark); }
.saved-tag { font-family: var(--font-mono); font-size: .76rem; margin-top: .3rem; color: var(--accent); }
.store-page-link { min-height: 44px; display: inline-flex; align-items: center; font-size: .82rem; font-weight: 600; margin-top: .15rem; text-decoration: none; }
.store-page-link:hover { text-decoration: underline; }
.warehouse-picker { margin-top: 1.5rem; }
.saved-section { margin-top: 1.5rem; }
.nearby-guess-head { display: flex; align-items: end; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; }
.nearby-guess-head h2 { margin: 0 0 .2rem; }
.nearby-guess-head p { margin: 0; color: var(--muted); font-size: .9rem; }
.warehouse-directory-head {
  display: flex; align-items: end; justify-content: space-between; gap: 1rem 2rem;
}
.warehouse-directory-head h2 { margin: 0 0 .35rem; }
.warehouse-directory-head p { margin: 0; color: var(--muted); max-width: 68ch; }
.warehouse-directory-count {
  flex: none; padding: .35rem .55rem; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); color: var(--muted);
  font-family: var(--font-mono); font-size: .76rem; white-space: nowrap;
}
.warehouse-region-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start; gap: .75rem; margin-top: 1rem;
}
.warehouse-region {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.warehouse-region[open] { grid-column: 1 / -1; border-color: var(--line-strong); }
.warehouse-region > summary {
  min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: .65rem; padding: .8rem 1rem; cursor: pointer; list-style: none;
}
.warehouse-region > summary::-webkit-details-marker { display: none; }
.warehouse-region > summary::after {
  content: "＋"; flex: none; color: var(--muted); font-size: 1.05rem; line-height: 1;
}
.warehouse-region[open] > summary { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.warehouse-region[open] > summary::after { content: "−"; }
.warehouse-region > summary:hover strong { color: var(--brand-dark); }
.warehouse-region-name { min-width: 0; }
.warehouse-region-name strong {
  font-family: var(--font-body); font-size: .98rem; font-weight: 600; letter-spacing: 0;
}
.warehouse-region-count { color: var(--muted); font-size: .76rem; white-space: nowrap; }
.warehouse-region-body { padding: .4rem 1rem .8rem; }
.warehouse-region ul {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 0 1.25rem; list-style: none; margin: 0; padding: 0;
}
.warehouse-region li { border-bottom: 1px solid var(--line); }
.warehouse-region a {
  min-height: 52px; display: flex; align-items: center;
  padding: .55rem .25rem; color: var(--text); text-decoration: none;
}
.warehouse-region a:hover strong { color: var(--brand-dark); text-decoration: underline; }
.warehouse-region a > span:first-child { min-width: 0; display: flex; flex-direction: column; gap: .08rem; }
.warehouse-region a strong {
  font-family: var(--font-body); font-size: .9rem; font-weight: 500; letter-spacing: 0;
}
.warehouse-region a small { color: var(--muted); font-size: .74rem; }

/* Header warehouse switcher (dropdown) */
.warehouse-menu { position: relative; }
.warehouse-menu > summary { list-style: none; cursor: pointer; }
.warehouse-menu > summary::-webkit-details-marker { display: none; }
.warehouse-menu-panel { position: absolute; right: 0; top: calc(100% + .5rem); min-width: min(240px, calc(100vw - 1.5rem)); max-width: calc(100vw - 1.5rem); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .45rem; z-index: 40; }
.menu-label { color: var(--muted); font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; margin: .3rem .55rem .4rem; }
.menu-item-form { margin: 0; }
.menu-item { display: block; width: 100%; min-height: 44px; text-align: left; background: none; border: none; padding: .5rem .6rem; border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: .92rem; cursor: pointer; }
.menu-item:hover { background: var(--brand-tint); }
.menu-item.is-active { color: var(--brand); font-weight: 600; }
.warehouse-menu-panel .menu-warehouse-page { display: flex; align-items: center; min-height: 44px; padding: .55rem .6rem; margin-top: .35rem; border-top: 1px solid var(--line); color: var(--text); font-weight: 600; font-size: .9rem; text-decoration: none; }
.warehouse-menu-panel .menu-warehouse-page:hover { color: var(--brand-dark); background: var(--brand-tint); }
.warehouse-menu-panel .menu-add { display: flex; align-items: center; min-height: 44px; padding: .55rem .6rem; margin-top: .35rem; border-top: 1px solid var(--line); color: var(--brand); font-weight: 600; font-size: .9rem; text-decoration: none; }
.warehouse-menu-panel .menu-warehouse-page + .menu-add { margin-top: 0; border-top: 0; }
.warehouse-menu-panel .menu-add:hover { color: var(--brand-dark); background: var(--brand-tint); }

/* ==========================================================================
   Product cards

   One component, rendered by templates/tracker/_browse_card.html everywhere.
   Rules the layout depends on:
     - the photo is a fixed aspect box, so every card in a row is the same
       height and small product shots letterbox instead of shrinking the card;
     - the photo carries at most two chips, pinned to opposite corners, so a
       label can never stack over another label or blanket the product;
     - every comparison number lives in the body, not over the photo.
   ========================================================================== */
.results-meta { color: var(--muted); font-size: var(--text-sm); }
.results-meta strong { color: var(--text); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr)); gap: var(--space-4) var(--space-3); margin-top: var(--space-2); }
.card { position: relative; background: var(--surface); border: 1px solid transparent; border-radius: calc(var(--radius) + 2px); padding: var(--space-3); box-shadow: 0 1px 3px rgba(28,27,24,.1); display: flex; flex-direction: column; gap: var(--space-2); transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease; }
.card:hover, .card:focus-within { box-shadow: var(--shadow-lg); border-color: var(--line); transform: translateY(-1px); }
/* Whole-card click target for browse cards (search, deals, featured): each such
   card carries a single item link on its title, so stretch that link across the
   whole card. A click anywhere opens the item, while screen readers and crawlers
   still see one clean link. Hovering anywhere lifts the card and tints the title
   because the stretched pseudo-element counts as hovering the title link. */
.card-linked { cursor: pointer; }
.card-linked .card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Two clamped lines, always reserved: prices then line up across a row instead
   of stepping down wherever a title happens to wrap. */
.card-title { font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); margin: 0; line-height: 1.35; overflow-wrap: anywhere; }
.card-title a { color: var(--text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.35em); }
.card-title a:hover { color: var(--brand); }
.catalog-card .card-title a { min-height: 0; }
.catalog-card-meta {
  display: flex; justify-content: space-between; gap: var(--space-2);
  margin-top: auto; color: var(--muted); font-family: var(--font-mono);
  font-size: var(--text-2xs);
}
/* Absorb the slack here, not above: the price then sits directly under the
   title on every card, so a row of prices reads as one line even when only some
   cards carry a location. */
.card-value { margin-bottom: auto; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.card-meta.is-countdown-only { justify-content: flex-end; }
.card-prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.price { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; line-height: 1.1; color: var(--text); }
.price-unavailable { color: var(--muted); font-family: var(--font-mono); font-size: .86rem; }
.price-was { color: var(--muted); text-decoration: line-through; font-size: var(--text-xs); }
.price-cut { color: var(--ok-ink); font-size: var(--text-2xs); font-weight: 600; }
.price-context { color: var(--muted); font-size: .82rem; }
.card-notes { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.card-note { color: var(--muted); font-family: var(--font-mono); font-size: var(--text-2xs); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .1rem .35rem; }
.search-refresh-update { border: 0; padding: 0; background: none; color: var(--brand); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.target { color: var(--muted); font-family: var(--font-mono); font-size: .82rem; }
.field-error { color: var(--out-stock); font-size: .82rem; margin: -.25rem 0 .25rem; }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-1); gap: var(--space-2); }
.card-location { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: var(--text-2xs); min-width: 0; }
.card-location .ico { width: .9em; height: .9em; flex: none; }
.featured-foot { margin: var(--space-4) 0 0; font-size: var(--text-sm); font-weight: 600; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .5rem; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.avail-in_stock { background: var(--in-stock); }
.avail-low_stock { background: var(--low-stock); }
.avail-out_of_stock { background: var(--out-stock); }
.avail-unknown { background: var(--unknown); }
.badge-clearance { background: var(--clearance); }
.badge-sale { background: var(--sale); }
.badge-eligibility { background: var(--ink); }
.badge-drop { background: var(--price-drop); }
.badge-drop .ico { width: .82em; height: .82em; margin-right: -.05em; }
.card-tag { font-family: var(--font-body); letter-spacing: 0; text-transform: none; }

.empty-state p { color: var(--muted); font-size: .9rem; margin-top: 1rem; }
.empty-state { padding: 2rem 1.5rem; text-align: center; }
.empty-state h2 { margin-top: 0; }
.empty-state .btn { margin-top: .9rem; }

/* ==========================================================================
   Item detail + price history
   ========================================================================== */
.back-link { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .6rem; font-size: .85rem; text-decoration: none; color: var(--muted); }
.back-link:hover { color: var(--text); }
.detail { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); margin-top: .5rem; }
.detail-media img, .detail-noimg { width: 100%; height: 260px; object-fit: contain; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.detail-noimg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  color: var(--muted); font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  border-style: dashed;
  background-color: hsl(var(--tile-h, 12deg) 38% 95%);
  background-image:
    radial-gradient(hsl(var(--tile-h, 12deg) 32% 78% / .55) 1px, transparent 1.4px),
    linear-gradient(145deg, hsl(var(--tile-h, 12deg) 42% 97%), hsl(var(--tile-h, 12deg) 36% 92%));
  background-size: 14px 14px, 100% 100%; }
.detail-noimg[hidden] { display: none; }
.detail-noimg .dept-icon { width: 56px; height: 56px; }
.detail-title { font-size: 1.5rem; margin: 0 0 .4rem; overflow-wrap: anywhere; }
.detail-meta { color: var(--muted); font-size: .85rem; margin: 0 0 .3rem; line-height: 1.6; }
.detail-local { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.detail-local-head { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: .55rem 1rem; color: var(--text); text-decoration: none; }
.detail-local-store { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.detail-local-store .ico { width: 1rem; height: 1rem; flex: none; color: var(--brand); }
.detail-local-store strong { font-size: .95rem; overflow-wrap: anywhere; }
.detail-store-change { min-height: 44px; display: inline-flex; align-items: center; flex: none; color: var(--brand-dark); font-size: .8rem; font-weight: 600; text-decoration: none; }
.detail-store-change:hover { text-decoration: underline; }
.detail-where { display: flex; align-items: center; flex-wrap: wrap; gap: .15rem .5rem; margin: 0 0 .45rem; font-size: .95rem; }
.detail-where .ico { color: var(--brand); }
.detail-where strong { font-weight: 600; }
.detail-where-guess { color: var(--muted); font-size: .82rem; }
.detail-where-empty { color: var(--muted); }
.detail-fresh { margin: .45rem 0 0; color: var(--muted); font-size: .78rem; }
.recheck-form { display: inline-flex; margin: 0; }
.detail-unchecked { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin-bottom: 1.1rem; }
.detail-unchecked p { margin: 0; }
.detail-prices { display: flex; align-items: center; gap: .55rem .7rem; flex-wrap: wrap; margin: .65rem 0 .35rem; }
.price-xl { font-size: 2.1rem; }
.detail-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.detail-shop-actions { display: flex; align-items: center; gap: .35rem .6rem; flex-wrap: wrap; margin-top: .45rem; }
.detail-shop-action { min-height: 40px; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .6rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: .82rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.detail-shop-action:hover { border-color: var(--brand); color: var(--brand-dark); }
.share-status { font-size: .78rem; }
.price-was-lg { font-size: 1.05rem; }
.deal-verdict { display: flex; align-items: baseline; gap: .2rem .4rem; flex-wrap: wrap; margin: .3rem 0 .55rem; padding: .5rem .65rem; border-left: 3px solid var(--brand); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .92rem; }
.deal-verdict-label { font-weight: 700; color: var(--text); }
.deal-verdict-separator { color: var(--muted); }
.deal-verdict.verdict-sale, .deal-verdict.verdict-markdown { border-left-color: var(--sale); background: var(--sale-tint); }
.deal-verdict.verdict-clearance, .deal-verdict.verdict-local_markdown { border-left-color: var(--clearance); background: var(--clearance-tint); }
.deal-verdict.verdict-drop, .deal-verdict.verdict-low { border-left-color: var(--price-drop); background: var(--price-drop-tint); }
.deal-verdict.verdict-increase { border-left-color: var(--low-stock); background: #fbf2e3; }

.chart-panel { padding: 1.25rem; margin-top: 1.1rem; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.chart-head h2 { margin: 0; }
.chart-head .muted { font-family: var(--font-mono); font-size: .85rem; }
.price-chart-takeaway { margin: .7rem 0 0; padding: .55rem .7rem; color: var(--muted); font-size: .9rem; background: var(--price-drop-tint); border-left: 3px solid var(--price-drop); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.price-chart-takeaway strong { color: var(--in-stock); }
.chart-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-top: .8rem; }
.chart-legend > span { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; padding: .6rem .7rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.chart-legend strong { font-family: var(--font-display); font-size: 1.05rem; }
.chart-legend .muted { font-family: var(--font-mono); font-size: .76rem; }
.history-label { flex-basis: 100%; color: var(--muted); font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.flat-history { margin: .75rem 0 0; padding: .65rem .75rem; background: var(--surface-2); border-left: 3px solid var(--line-strong); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.changes-more { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.changes-more > summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; color: var(--brand-dark); font-weight: 500; font-family: var(--font-mono); font-size: .85rem; width: fit-content; list-style: none; }
.changes-more > summary::-webkit-details-marker { display: none; }
.changes-more > summary::before { content: "▸ "; }
.changes-more[open] > summary::before { content: "▾ "; }
.changes-more .table-scroll { margin-top: .7rem; }

.desc-panel { padding: 1.25rem; margin-top: 1.1rem; }
.desc-panel h2 { margin: 0 0 .7rem; }
.desc-text { margin: 0; line-height: 1.6; }
.desc-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.desc-list li { line-height: 1.5; }
.desc-more { margin-top: .5rem; }
.desc-more summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; color: var(--brand-dark); font-weight: 500; width: fit-content; }
.desc-more summary:hover { text-decoration: underline; }
.desc-more-hide { display: none; }
.desc-more[open] .desc-more-show { display: none; }
.desc-more[open] .desc-more-hide { display: inline; }
.desc-more .desc-list { margin-top: .5rem; }
.desc-disclaimer { margin: .9rem 0 0; font-size: .82rem; }

.availability-panel { padding: 1.25rem; margin-top: 1.1rem; }
.availability-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.availability-head > a { min-height: 40px; display: inline-flex; align-items: center; font-size: .84rem; font-weight: 600; white-space: nowrap; }
.availability-title { display: flex; align-items: center; gap: .55rem; }
.availability-title .ico { width: 1.15rem; height: 1.15rem; color: var(--brand); }
.availability-title h2 { margin: 0; }
.availability-summary { display: flex; align-items: baseline; gap: .4rem; margin: .7rem 0 .55rem; color: var(--muted); }
.availability-summary strong { color: var(--text); font-family: var(--font-display); font-size: 1.35rem; line-height: 1; }
.availability-bar { display: flex; width: 100%; height: 12px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.availability-segment { flex: var(--availability-count) 1 0; min-width: 2px; }
.availability-segment-in-stock, .availability-dot-in-stock { background: var(--in-stock); }
.availability-segment-low-stock, .availability-dot-low-stock { background: var(--low-stock); }
.availability-segment-out-of-stock, .availability-dot-out-of-stock { background: var(--out-stock); }
.availability-segment-unknown, .availability-dot-unknown { background: var(--unknown); }
.availability-legend { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .65rem; color: var(--muted); font-family: var(--font-mono); font-size: .74rem; }
.availability-legend > span { display: inline-flex; align-items: center; gap: .3rem; }
.availability-dot { width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
.availability-price-context { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }

.compare-panel { padding: 1.25rem; margin-top: 1.1rem; }
.compare-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.compare-head h2 { margin: 0; }
.compare-head p { margin: .2rem 0 0; color: var(--muted); font-size: .84rem; }
.compare-head form { margin: 0; }
.nearby-radius-form { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.nearby-radius-form label { color: var(--muted); font-size: .82rem; }
.nearby-radius-form select, .nearby-radius-form button { min-height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: .84rem; }
.nearby-radius-form select { padding: .35rem 1.7rem .35rem .55rem; }
.nearby-radius-form button { padding: .35rem .65rem; font-weight: 600; cursor: pointer; }
.nearest-availability { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .55rem 1rem; margin: 0 0 1rem; padding: .8rem .9rem; background: #eef6f0; border: 1px solid #bfe0cb; border-left: 4px solid var(--in-stock); border-radius: var(--radius-sm); }
.nearest-availability.is-stale { background: var(--surface-2); border-color: var(--line); border-left-color: var(--unknown); }
.nearest-availability-main { display: flex; flex-direction: column; gap: .08rem; min-width: 0; }
.nearest-availability-main strong .muted { font-weight: 400; }
.nearest-availability-label { color: var(--in-stock); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.nearest-availability.is-stale .nearest-availability-label { color: var(--muted); }
.nearest-availability-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .3rem .6rem; font-family: var(--font-mono); font-size: .78rem; }
.nearest-availability-actions { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; white-space: nowrap; font-size: .84rem; font-weight: 600; }
.nearest-availability-actions a { min-height: 40px; display: inline-flex; align-items: center; }
.nearest-availability > p { grid-column: 1 / -1; margin: 0; padding-top: .5rem; border-top: 1px solid rgba(20, 83, 43, .18); color: var(--muted); font-size: .82rem; }
.no-nearby-availability { margin: 0 0 .85rem; padding: .65rem .75rem; background: var(--surface-2); border-left: 3px solid var(--line-strong); color: var(--muted); font-size: .88rem; }
.compare-distance { display: block; color: var(--muted); font-family: var(--font-mono); font-size: .72rem; margin-top: .1rem; }
.nearby-empty { display: flex; align-items: center; justify-content: space-between; gap: .7rem 1rem; flex-wrap: wrap; padding: .7rem .8rem; background: var(--surface-2); border-left: 3px solid var(--line-strong); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.nearby-empty p { margin: 0; color: var(--muted); }
.nearby-table-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: .7rem; color: var(--muted); font-size: .82rem; }
.nearby-table-foot a { font-weight: 600; white-space: nowrap; }
.btn-compare { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong); padding: .45rem .8rem; border-radius: var(--radius-sm); font-weight: 500; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-body); }
.btn-compare:hover { border-color: var(--brand); color: var(--brand-dark); }
.compare-table { width: 100%; }
.compare-table tr.is-cheapest td { background: #eef6f0; }
.compare-table tr.is-priciest td { background: #fbf1ef; }
.compare-table tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.price-tag { font-family: var(--font-mono); font-weight: 600; font-size: .72rem; text-transform: uppercase; white-space: nowrap; }
.price-tag-low { color: var(--in-stock); }
.price-tag-high { color: var(--brand-dark); }
.price-delta { font-family: var(--font-mono); font-size: .74rem; white-space: nowrap; }
.compare-verdict { margin: 0 0 .85rem; padding: .6rem .75rem; border-radius: var(--radius-sm); font-size: .92rem; font-weight: 500; background: var(--surface-2); border: 1px solid var(--line); }
.compare-verdict.verdict-cheapest, .compare-verdict.verdict-same { background: #eef6f0; border-color: #bfe0cb; color: #14532b; }
.compare-verdict.verdict-elsewhere { background: var(--brand-tint); border-color: #e6c9bf; color: var(--brand-dark); }

.item-lookup-panel { padding: 1.25rem; margin-top: 1.1rem; }
.item-lookup-panel h2 { margin: 0 0 .35rem; }
.item-lookup-panel .lookup { margin-top: 0; }

/* Costco.com online offer (item detail): a blue "buy online" module beside the
   in-warehouse price, plus its row in the comparison table and a card tag. */
/* When an item isn't sold online there's nothing to act on, so it collapses to a
   quiet one-liner instead of taking a full prime-position card. */
.online-note { display: flex; align-items: center; gap: .45rem; margin-top: 1.1rem; padding: .5rem .8rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .88rem; color: var(--muted); }
.online-note-ico { width: 1rem; height: 1rem; color: var(--online); flex: none; }
.online-note a { color: var(--online-dark); font-weight: 600; text-decoration: none; }
.online-note a:hover { text-decoration: underline; }
.online-panel {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.25rem; flex-wrap: wrap;
  margin-top: 1.1rem; padding: 1rem 1.15rem;
  background: var(--online-tint); border: 1px solid var(--online-line);
  border-left: 3px solid var(--online); border-radius: var(--radius);
}
.online-panel-head { display: flex; align-items: center; gap: .5rem; flex: none; }
.online-panel-ico { width: 1.35rem; height: 1.35rem; color: var(--online); flex: none; }
.online-panel-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--online-dark); }
.online-panel-body { flex: 1 1 11rem; }
.online-panel-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.online-panel-price .price-lg { font-size: 1.5rem; }
.online-panel-diff { margin: .35rem 0 0; font-size: .9rem; color: var(--online-dark); font-weight: 500; }
.online-panel-stamp { margin: .35rem 0 0; font-size: .78rem; }
.online-panel-ref { display: inline-flex; align-items: baseline; gap: .35rem; font-weight: 600; }
.online-panel-ref .muted { font-weight: 400; font-size: .82rem; }
.online-panel-cta { display: flex; align-items: center; gap: .55rem; flex: none; flex-wrap: wrap; }
.btn-costco { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.15rem; background: var(--online); color: #fff; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn-costco:hover { background: var(--online-dark); color: #fff; }
.compare-table tr.online-row td { background: var(--online-tint); }
/* Compact Costco.com price tag on browse cards. z-index lifts it above the
   card-linked stretched overlay so it stays independently clickable. */
.card-online { position: relative; z-index: 2; align-self: flex-start; display: inline-flex; align-items: center; flex-wrap: wrap; max-width: 100%; gap: .25rem .4rem; margin-top: .1rem; padding: .3rem .5rem; background: var(--online-tint); border: 1px solid var(--online-line); border-radius: var(--radius-sm); text-decoration: none; font-family: var(--font-mono); font-size: .78rem; line-height: 1.2; overflow-wrap: anywhere; }
.card-online:hover { border-color: var(--online); }
.card-online-store { color: var(--online-dark); font-weight: 600; }
.card-online-price { color: var(--text); font-weight: 700; }
.card-online-tail { white-space: nowrap; }
.card-online-ext { color: var(--online); }
/* In-club win: warehouse price beats a buyable online price by a real margin. */
.card-online-win { background: #eef6f0; border-color: #bfe0cb; }
.card-online-win:hover { border-color: var(--in-stock); }
.card-online-save { color: var(--in-stock); font-weight: 700; }
.card-online-win .card-online-vs { color: var(--muted); }
.card-online-win .card-online-ext { color: var(--in-stock); }
/* Anchored jumps (finder / search results) should clear the sticky header. */
.lookup-outcome, :target { scroll-margin-top: 5rem; }

/* Alternate-warehouse finder */
.lookup-panel { padding: 1.25rem; margin-top: 1.1rem; }
.lookup-body { margin-top: .75rem; }
.lookup-form { margin-bottom: .2rem; }
.lookup-grid { margin-top: 1rem; }
.lookup-card .lookup-known { color: var(--muted); font-family: var(--font-mono); font-size: .78rem; margin-top: .35rem; }
.lookup-current-tag { margin-top: .35rem; color: var(--in-stock); font-weight: 600; font-size: .8rem; font-family: var(--font-mono); }

/* Comparison-table row actions: Show (switch, GET) / Check (untracked, POST) */
.compare-action { white-space: nowrap; }
.compare-show { min-height: 44px; display: inline-flex; align-items: center; padding: 0 .35rem; font-family: var(--font-mono); font-size: .82rem; font-weight: 600; color: var(--brand-dark); }
.compare-show:hover { text-decoration: underline; }
.compare-check { margin: 0; display: inline-flex; }
.compare-check-btn { min-height: 44px; background: var(--surface); border: 1px solid var(--line-strong); padding: .4rem .7rem; border-radius: var(--radius-sm); font: inherit; font-size: .82rem; font-weight: 600; color: var(--text); cursor: pointer; }
.compare-check-btn:hover { border-color: var(--brand); color: var(--brand-dark); }

.ptable { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ptable th { text-align: left; color: var(--muted); font-weight: 600; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; padding: .5rem .55rem; border-bottom: 2px solid var(--line-strong); }
.ptable td { padding: .5rem .55rem; border-bottom: 1px solid var(--line); }
.ptable tr:last-child td { border-bottom: none; }
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .ptable { min-width: 560px; }
.table-scroll .compare-table { min-width: 620px; }

/* Forms */
.stack-form { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; }
.stack-form .btn { margin-top: .6rem; }
/* Card media — a quiet inset stage keeps inconsistent catalog photography from
   dividing the card into a hard image half and content half. */
.card-media { position: relative; margin: 0 0 var(--space-1); aspect-ratio: 3 / 2; background: var(--surface-2); border-radius: var(--radius); overflow: hidden; }
.card-media.is-placeholder { display: flex; align-items: center; justify-content: center; padding: var(--space-4);
  background-color: hsl(var(--tile-h, 12deg) 8% 95%);
  background-image:
    radial-gradient(hsl(var(--tile-h, 12deg) 8% 78% / .5) 1px, transparent 1.4px),
    linear-gradient(145deg, hsl(var(--tile-h, 12deg) 10% 97%), hsl(var(--tile-h, 12deg) 8% 92%));
  background-size: 14px 14px, 100% 100%; }
.card-img { width: 100%; height: 100%; object-fit: contain; display: block; padding: .55rem; }
.card-noimg { display: none; }
.card-media.is-placeholder .card-noimg {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  color: var(--muted); font-family: var(--font-mono); font-size: .74rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em; text-align: center; line-height: 1.35;
}
/* Department glyph so a missing photo reads as an intentional placeholder. */
.dept-icon { box-sizing: border-box; width: 44px; height: 44px; padding: 6px;
  color: hsl(var(--tile-h, 12deg) 14% 42%); background: hsl(var(--tile-h, 12deg) 12% 98% / .8);
  border: 1px solid hsl(var(--tile-h, 12deg) 10% 78% / .8); border-radius: 50%; }
.is-placeholder .dept-label { color: hsl(var(--tile-h, 12deg) 10% 38%); }
/* One row, two ends: laying the chips out in flow rather than pinning them to
   opposite corners is what actually guarantees they never overlap. On a narrow
   card the deal tag gives up width first, because a truncated tag still reads
   while a stock warning painted over another label does not. */
.card-badges { position: absolute; top: var(--space-2); left: var(--space-2); right: var(--space-2); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-1); }
.card-tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; box-shadow: 0 1px 2px rgba(28,27,24,.08); }
.card-tag.badge-clearance { color: var(--clearance); background: rgba(245,240,248,.94); border: 1px solid var(--clearance-line); }
.card-tag.badge-sale { color: var(--sale); background: rgba(234,243,251,.94); border: 1px solid var(--sale-line); }
.card-tag.badge-drop { color: var(--in-stock); background: rgba(238,246,240,.94); border: 1px solid var(--price-drop-line); }
.card-stock { flex: none; }

/* Pagination */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.pager-btn { padding: .55rem 1.05rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; justify-content: center; min-height: 44px; }
.pager-btn:hover { border-color: var(--brand); color: var(--brand-dark); }
.pager-btn.is-disabled { color: var(--muted); opacity: .5; pointer-events: none; }
/* Wraps rather than overflowing: the widest window (first, last and five around
   the current page) is wider than a phone, and a page that scrolls sideways is
   worse than a pager on two lines. */
.pager-pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.pager-page { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .5rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; }
.pager-page:hover { background: var(--brand-tint); color: var(--brand-dark); }
.pager-page.is-current { background: var(--brand); color: #fff; }
.pager-gap { min-width: 1.25rem; display: inline-flex; justify-content: center; color: var(--muted); }
.pager-status { color: var(--muted); font-size: var(--text-xs); }
.pager-mobile-status { display: none; font-family: var(--font-mono); white-space: nowrap; }
.loading-region.is-loading, .results.is-loading { opacity: .55; pointer-events: none; }

/* Focus visibility */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
.site-header :focus-visible { outline-color: #f3f1ec; }
.site-header .warehouse-menu-panel :focus-visible { outline-color: var(--brand); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .detail { grid-template-columns: 1fr; }
  .landing .hero { padding-top: var(--space-2); }
  .stores-form { grid-template-columns: minmax(0, 1fr) auto; }
  .stores-form .btn-locate { grid-column: 1 / -1; justify-self: start; }
  .warehouse-region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  main.container { padding-top: 1rem; }
  .header-inner { flex-wrap: nowrap; gap: .45rem; padding: .45rem .7rem; }
  .brand { flex: 0 0 auto; min-width: 0; min-height: 44px; white-space: nowrap; font-size: .9rem; gap: .35rem; }
  .brand-mark { width: 24px; height: 24px; border-radius: 6px; }
  .nav { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; justify-content: flex-end; margin-left: auto; gap: .35rem; }
  .nav a { flex: 0 0 auto; font-size: .82rem; }
  .nav > a, .nav > details > summary { min-height: 44px; }
  .nav .nav-warehouse { flex: 0 1 auto; min-width: 0; max-width: 7.5rem; font-size: .76rem; padding: .24rem .4rem; }
  .nav-warehouse-noun { display: none; }
  .warehouse-menu { min-width: 0; position: static; }
  .warehouse-menu-panel { left: .7rem; right: .7rem; top: calc(100% + .35rem); min-width: 0; max-width: none; }
  .hero { padding: .7rem 0 .2rem; }
  .hero h1 { margin-bottom: .65rem; }
  .search-form { flex-direction: column; align-items: stretch; }
  /* in a column layout flex-basis becomes height — pin so inputs don't balloon */
  .field, .field-grow { flex: 0 0 auto; }
  .search-panel { --panel-pad: 1.1rem; }
  .warehouse-search-form { padding: .6rem; }
  .warehouse-search-form .btn { width: auto; padding-left: .9rem; padding-right: .9rem; }
  .warehouse-search-context { flex-wrap: wrap; }
  .warehouse-search-context .change-link { min-height: 44px; }
  .warehouse-search-panel > .geo-banner { width: 100%; }
  /* the change link takes a 44px tap target here, so let the strip size to it */
  .panel-store { padding-top: .35rem; padding-bottom: .35rem; }
  .panel-store .change-link { padding: 0 .3rem; }
  .btn, .btn-locate { width: 100%; }
  .deals-head { flex-direction: column; align-items: flex-start; }
  .compare-head { flex-direction: column; align-items: flex-start; }
  .nearby-radius-form { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  .nearest-availability { grid-template-columns: 1fr; align-items: flex-start; }
  .nearest-availability-meta, .nearest-availability-actions { justify-content: flex-start; }
  .nearby-table-foot { align-items: flex-start; flex-direction: column; }
  .footer-links { gap: .15rem var(--space-4); }
  .footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .pager { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .pager > .pager-btn:first-child { grid-column: 1; grid-row: 1; }
  .pager > .pager-btn:last-child { grid-column: 3; grid-row: 1; }
  .pager > .pager-btn { width: 100%; }
  .pager-pages { grid-column: 2; grid-row: 1; flex-wrap: nowrap; }
  .pager-numbered .pager-pages { display: none; }
  .pager-mobile-status { display: block; grid-column: 2; grid-row: 1; }
  .policy-panel, .contact-panel { padding: 1.1rem; }
  .contact-form .btn { width: 100%; }
  .back-link, .change-link { min-height: 44px; display: inline-flex; align-items: center; }
  .featured-foot a { min-height: 44px; display: inline-flex; align-items: center; }
  /* Keep the product image prominent without wrapping the whole mobile hero in
     multiple nested cards. */
  .detail { gap: 1rem; padding: 0; border: 0; box-shadow: none; background: transparent; }
  .detail-media img, .detail-noimg { height: 210px; border: 0; border-radius: var(--radius); }
  .detail-main { padding: 0 .1rem; }
  .detail-title { font-size: 1.28rem; }
  .detail-shop-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-shop-actions-no-recheck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-shop-action { min-height: 44px; justify-content: center; }
  .recheck-form .detail-shop-action { width: 100%; }
  .share-status { grid-column: 1 / -1; }
  .deal-verdict { align-items: center; }
  .compare-panel, .chart-panel, .desc-panel, .availability-panel, .item-lookup-panel { padding: 1rem; }
  .availability-head { align-items: flex-start; }
  .availability-legend { align-items: flex-start; flex-direction: column; gap: .3rem; }
  .card-online { min-height: 44px; }
}

@media (max-width: 480px) {
  /* Keep the three history stats side by side; stacking them turned three
     numbers into a screen-and-a-half of scrolling on a phone. */
  .chart-legend { gap: .4rem; }
  .chart-legend > span { flex-direction: column; align-items: flex-start; gap: .05rem; padding: .5rem .55rem; min-width: 0; flex-wrap: nowrap; }
  /* The label's full-basis row rule is for the wide layout; in this stacked one
     it made the cell wrap into a second column and pushed the price outside the
     panel, so the numbers were clipped. Let each stat size to its own column. */
  .chart-legend .history-label { flex-basis: auto; }
  .chart-legend strong, .chart-legend > span .muted { max-width: 100%; overflow-wrap: anywhere; }
  .chart-legend strong { font-size: .98rem; }
}

/* Data tables -> stacked cards. The 560px min-width forces an inner horizontal
   scrollbar until the viewport is wide enough to hold it (~660px once panel and
   page padding are counted), so below that we drop the columns and label each
   cell instead, letting warehouse prices read top-to-bottom with no side-scroll. */
@media (max-width: 680px) {
  .table-scroll { overflow-x: visible; }
  .table-scroll .ptable { min-width: 0; }
  .ptable thead {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0;
  }
  .ptable, .ptable tbody { display: block; width: 100%; }
  .ptable tr {
    display: block; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: .65rem .8rem; margin-bottom: .55rem;
  }
  .ptable tr:last-child { margin-bottom: 0; }
  .ptable td {
    display: block; padding: .3rem 0; border: none;
    text-align: right; overflow-wrap: anywhere;
  }
  .ptable td::before {
    content: attr(data-label); float: left; margin-right: 1rem;
    font-family: var(--font-body); font-weight: 600; font-size: .72rem;
    letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  }
  .ptable td:first-child {
    text-align: left; padding: 0 0 .5rem; margin-bottom: .45rem;
    border-bottom: 1px solid var(--line); font-size: .95rem; line-height: 1.45;
  }
  .ptable td:first-child::before { content: none; }
  .compare-table tr.is-cheapest { background: #eef6f0; border-color: #bfe0cb; }
  .compare-table tr.is-cheapest td { background: transparent; }
  .compare-table tr.is-priciest { background: #fbf1ef; border-color: #e6c9bf; }
  .compare-table tr.is-priciest td { background: transparent; }
  .compare-table tr.is-current { border-left: 3px solid var(--brand); }
  .compare-table tr.is-current td:first-child { box-shadow: none; }
  /* Shade the whole online-offer card, not just its cells (the per-td shading
     used on desktop leaves the card's padding unshaded once rows stack). */
  .compare-table tr.online-row { background: var(--online-tint); border-color: var(--online-line); }
  .compare-table tr.online-row td { background: transparent; }
  /* Pack each warehouse's price, stock and freshness into one tight wrapping row
     under the name so the comparison scans fast on a phone. */
  .compare-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .8rem; }
  .compare-table td { display: inline-flex; align-items: baseline; gap: .3rem; width: auto; padding: .15rem 0; text-align: left; }
  .compare-table td::before { content: none; }
  .compare-table td:first-child { display: block; flex: 1 1 100%; }
  /* Meta line: price (+delta) on the left, stock badge pushed to the right.
     These always fit, so the badges line up on the right without wrapping. */
  .compare-table td[data-label="Stock"] { margin-left: auto; }
  /* Freshness is least important and, with wide gap-to-cheapest amounts, won't
     fit beside the badge on a phone. Give it its own small, muted, right-aligned
     line so every card reads the same instead of orphaning the time at random. */
  .compare-table td[data-label="Updated"] {
    flex-basis: 100%; justify-content: flex-end; white-space: nowrap;
    color: var(--muted); font-family: var(--font-mono); font-size: .72rem;
  }
  /* Row action (Show / Check) gets its own right-aligned line so it's an easy tap;
     empty action cells (the shown row, the online row) collapse away. */
  .compare-table td.compare-action { flex-basis: 100%; justify-content: flex-end; padding-top: .35rem; }
  .compare-table td.compare-action:empty { display: none; }
  /* The cheapest/most-expensive word tags make the price cell wide enough to
     wrap the row on a phone; the green/pink card tint signals them visually, so
     hide the words *visually* here (still read by screen readers) rather than
     display:none, and keep the +$ gap-to-cheapest. */
  .compare-table .price-tag {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0;
  }
}

/* ==========================================================================
   Deals (clearance + temporary sales)
   ========================================================================== */

/* Compact controls for an auto-detected warehouse. */
.geo-banner { display: inline-flex; align-items: center; gap: .4rem .75rem; flex-wrap: wrap; }
.geo-banner-main { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .82rem; }
.geo-banner-main .ico { flex: 0 0 auto; color: var(--brand); }
.geo-banner-actions { display: inline-flex; align-items: center; gap: .5rem; }
.geo-banner-actions form { margin: 0; }
.geo-confirm { background: none; color: var(--brand-dark); border: 0; padding: .34rem 0; font-weight: 600; font-family: var(--font-body); font-size: .82rem; cursor: pointer; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.geo-confirm:hover { color: var(--brand); }
.geo-change { padding: .34rem .55rem; border-radius: var(--radius-sm); color: var(--muted); font-size: .82rem; white-space: nowrap; text-decoration: none; }
.geo-change:hover { background: var(--brand-tint); color: var(--brand-dark); }
/* Choose-a-warehouse state */
.deals-empty { max-width: 680px; margin: 1rem 0; }
.deals-empty .btn { margin-top: .4rem; }
.deals-landing { padding: 1.3rem 0 .4rem; }
/* Inside the search panel the banner becomes a quiet footer strip under the row,
   with the actions pushed to the trailing edge. */
.search-panel > .geo-banner {
  display: flex;
  width: calc(100% + var(--panel-pad) * 2);
  margin: .9rem calc(var(--panel-pad) * -1) calc(var(--panel-pad) * -1);
  padding: .6rem var(--panel-pad);
  border-top: 1px solid var(--line);
  background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius);
}
.search-panel > .geo-banner .geo-banner-actions { margin-left: auto; }

/* Page header */
.deals-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .9rem 1.4rem; flex-wrap: wrap; margin-top: .4rem; }
.deals-head-main { flex: 1 1 32rem; min-width: 0; }
.deals-head h1 { margin: 0; }
.deals-intro { margin: .45rem 0 0; color: var(--muted); max-width: 78ch; }
.deals-head-location { color: var(--muted); font-size: .6em; font-weight: 500; white-space: nowrap; }
.deals-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .9rem; min-height: 2rem; margin-top: .35rem; }
.deals-meta .change-link { font-family: var(--font-body); font-size: .82rem; }
.deals-stale { color: var(--low-stock); font-size: .82rem; }
.deals-local-link { min-height: 40px; display: inline-flex; align-items: center; gap: .35rem; color: var(--brand-dark); font-size: .85rem; font-weight: 600; text-decoration: none; }
.deals-local-link:hover { text-decoration: underline; }
.deals-local-link .ico { width: 1rem; height: 1rem; }

/* Deal-type tabs (segmented filter): the primary way to switch between the
   clearance (.97) and temporary-sale views, with live counts on each. */
.deal-tabs { display: inline-flex; flex-wrap: wrap; gap: .45rem; }
.deal-tab { min-height: 44px; display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .72rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 600; font-size: .9rem; text-decoration: none; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.deal-tab[data-deal-type="all"] { --deal-tab-accent: var(--brand); --deal-tab-tint: var(--brand-tint); }
.deal-tab[data-deal-type="markdown"] { --deal-tab-accent: var(--clearance); --deal-tab-tint: var(--clearance-tint); }
.deal-tab[data-deal-type="sale"] { --deal-tab-accent: var(--sale); --deal-tab-tint: var(--sale-tint); }
.deal-tab:hover { border-color: var(--deal-tab-accent); background: var(--deal-tab-tint); color: var(--text); box-shadow: inset 0 3px 0 var(--deal-tab-accent); }
.deal-tab.is-active { border-color: var(--deal-tab-accent); background: var(--deal-tab-tint); box-shadow: inset 0 3px 0 var(--deal-tab-accent), 0 0 0 1px var(--deal-tab-accent); }
.deal-tab.is-active:hover { color: var(--text); border-color: var(--deal-tab-accent); }
.deal-tab-label { color: var(--text); white-space: nowrap; }
.deal-tab-label-short { display: none; }
.deal-tab-count { font-size: .76rem; font-weight: 600; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: .05rem .4rem; min-width: 1.5rem; text-align: center; }
.deal-tab.is-active .deal-tab-count { color: var(--text); background: var(--surface); border-color: var(--deal-tab-accent); }

/* One shared filter + sort toolbar for the deals and search result pages. On a
   wide screen the context (deal tabs or the result count) and the refinements
   share a single row, so the grid starts higher up the page. */
.filter-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); flex-wrap: wrap; margin: var(--space-4) 0 var(--space-1); }
.filter-toolbar-main { display: flex; align-items: center; gap: .8rem 1rem; flex-wrap: wrap; }
.filter-form { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.filter-field { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 500; color: var(--text); }
.filter-field select { min-height: 44px; font: inherit; font-size: .88rem; font-weight: 400; color: var(--text); padding: .4rem 2rem .4rem .6rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.filter-field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.filter-clear { font-size: .82rem; }
.filter-toolbar .results-meta { margin: 0; }
.results-page-count { margin: 0; color: var(--muted); font-size: .8rem; }

/* Refinement bar: the filter/sort controls sit in one full-width surface. */
.filter-controls { display: flex; align-items: center; gap: .6rem .8rem; flex-wrap: wrap; }
.mobile-filter-panel > summary { display: none; }
.filter-panel { padding: 0; border: 0; background: none; box-shadow: none; }
/* Low-stock visibility toggle, styled as a labeled checkbox. */
.deals-lowstock-form { display: inline-flex; margin: 0 0 0 .1rem; padding-left: .8rem; border-left: 1px solid var(--line); }
.deals-lowstock { min-height: 44px; display: inline-flex; align-items: center; gap: .45rem; font-family: inherit; font-size: .82rem; font-weight: 500; color: var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; background: none; border: 0; padding: 0; }
.deals-lowstock:hover { color: var(--brand-dark); }
.deals-lowstock-box { width: 1.05rem; height: 1.05rem; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); flex: 0 0 auto; position: relative; }
.deals-lowstock:hover .deals-lowstock-box { border-color: var(--brand); }
.deals-lowstock.is-on .deals-lowstock-box { background: var(--brand); border-color: var(--brand); }
.deals-lowstock.is-on .deals-lowstock-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.deals-lowstock:focus-visible { outline: none; }
.deals-lowstock:focus-visible .deals-lowstock-box { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }

/* Sections */
.deal-section { margin-top: 1.6rem; }
.deals-results { margin-top: .85rem; }
.deal-results-note { color: var(--muted); font-size: .85rem; margin: 0 0 .55rem; }
.deal-results-meta { display: flex; align-items: baseline; justify-content: space-between; gap: .35rem 1rem; flex-wrap: wrap; margin-bottom: .55rem; }
.deal-results-meta.is-count-only { justify-content: flex-end; }
.deal-results-meta .deal-results-note { margin: 0; }
.deal-results-count { margin: 0; color: var(--muted); font-size: .8rem; }
.deal-section-head { margin-bottom: .2rem; }
.deal-section-head h2 { display: flex; align-items: center; gap: .55rem; margin: 1.4rem 0 .25rem; }
.deal-section-note { color: var(--muted); font-size: .9rem; margin: 0 0 .4rem; max-width: 80ch; }

/* In-card sale countdown */
.deal-countdown { display: inline-flex; align-items: center; gap: .3rem; flex: none; font-size: var(--text-2xs); font-weight: 600; color: var(--sale); background: var(--sale-tint); border: 1px solid var(--sale-line); padding: .05rem .35rem; border-radius: var(--radius-sm); white-space: nowrap; }
.deal-countdown .ico { width: 1em; height: 1em; }
.deal-countdown.is-soon { color: var(--warn-ink); background: var(--warn-tint); border-color: var(--warn-line); }
.deal-countdown.is-urgent { color: var(--out-stock); background: var(--danger-tint); border-color: var(--danger-line); }

/* Stack the deals toolbar and show the type tabs as a 2-up segmented control on
   narrow screens. Placed after the base .deal-tabs rule so it wins the cascade. */
@media (max-width: 600px) {
  .deals-head { align-items: stretch; }
  .warehouse-directory-head { align-items: flex-start; flex-direction: column; gap: .65rem; }
  .stores-form { display: flex; }
  .stores-form .btn-locate { width: 100%; justify-content: center; }
  .warehouse-region-grid { grid-template-columns: 1fr; }
  .warehouse-region[open] { grid-column: auto; }
  .search-scope-options { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-scope-label { height: 100%; padding: .35rem .5rem; }
  .search-scope-label strong, .search-scope-label small { white-space: normal; }
  /* Two up on a phone. One full-width card per row made each deal about a
     screen tall, which is the wrong shape for scanning hundreds of them. */
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-2); }
  .card { padding: var(--space-2); gap: var(--space-1); }
  .card-media { margin: 0 0 var(--space-1); aspect-ratio: 4 / 3; }
  .card-img { padding: .4rem; }
  .deals-results .browse-card .card-title a { -webkit-line-clamp: 3; min-height: calc(3 * 1.35em); }
  .price { font-size: 1.15rem; }
  /* Too narrow to keep the comparison and the countdown on one line. */
  .card-meta { flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; }
  .card-meta.is-countdown-only { justify-content: flex-end; }
  /* Safari zooms the page when a control's text is under 16px, which leaves the
     page scrolled sideways after picking a filter. */
  .filter-field select { font-size: 1rem; }
  .filter-toolbar { flex-direction: column; align-items: stretch; }
  .filter-toolbar-main { display: block; }
  .mobile-filter-panel { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
  .mobile-filter-panel > summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .7rem; cursor: pointer; list-style: none; font-weight: 600; }
  .mobile-filter-panel > summary::-webkit-details-marker { display: none; }
  .mobile-filter-panel > summary::after { content: "▾"; color: var(--muted); }
  .mobile-filter-panel[open] > summary::after { content: "▴"; }
  .mobile-filter-panel > summary span { color: var(--muted); font-size: .72rem; font-weight: 500; }
  .mobile-filter-body { padding: .65rem .7rem .75rem; border-top: 1px solid var(--line); }
  .mobile-filter-panel:not([open]) > .mobile-filter-body { display: none; }
  .filter-panel { padding: 0; }
  .filter-controls { align-items: stretch; }
  .deals-lowstock-form { width: 100%; margin: 0; padding: 0; border-left: 0; }
  .deals-lowstock { width: 100%; min-height: 44px; }
  .filter-form { display: grid; grid-template-columns: 1fr; width: 100%; gap: .55rem; }
  .filter-form .filter-field { display: grid; grid-template-columns: 6rem minmax(0, 1fr); width: 100%; }
  .filter-form .filter-field select { width: 100%; min-width: 0; }
  .filter-clear { display: block; padding: .3rem; text-align: center; }
  .deal-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Three equal thirds are too narrow to hold "Markdowns" and its count side by
     side, so stack the count under the label instead of letting the pill get
     squeezed until the number spills out of it. */
  .deal-tab { flex-direction: column; justify-content: center; min-width: 0; padding: .4rem .3rem; gap: .1rem; }
  .deal-tab-count { flex: none; }
  .deal-tab-label-full { display: none; }
  .deal-tab-label-short { display: inline; }
  .deals-head-main { flex: 0 0 auto; width: 100%; max-width: none; }
  .geo-banner { width: 100%; }
  .geo-banner-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: .45rem; }
  .geo-banner-actions form, .geo-confirm { width: 100%; }
  .geo-confirm, .geo-change { min-height: 44px; }
  .geo-change { display: flex; align-items: center; justify-content: center; padding: .3rem; text-align: center; border: 1px solid var(--line-strong); font-weight: 600; }
}

@media (max-width: 360px) {
  .deal-tab-label { white-space: normal; line-height: 1.2; text-align: center; }
}