/*
 * Product Finder — Component & Layout Styles
 * v0.9.17 structural release
 *
 * Consumes design tokens from tokens.css.
 * Does NOT contain any hardcoded palette or theme hex values —
 * every color reference resolves through a CSS custom property.
 *
 * Product-line colors (Vitablast C, PowerGlow, etc.) are applied
 * inline by JS from DATA.palette and are intentionally not here.
 */

/* ─── Reset & Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { background: var(--color-background) !important; }
body {
  margin: 0;
  font: var(--font-size-base) / var(--line-height-base) var(--font-body);
  color: var(--color-ink);
}
main { background: var(--color-background); }

/* ─── Header ─────────────────────────────────────────────────────────────── */
header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 16px;
  /* safe-area: notch/status bar on iOS */
  padding-top: max(12px, env(safe-area-inset-top, 12px));
  padding-left: max(16px, env(safe-area-inset-left, 16px));
  padding-right: max(16px, env(safe-area-inset-right, 16px));
}
header h1 { margin: 0; font-size: 18px; font-weight: 700; }
header .sub { font-size: 12.5px; color: var(--color-muted); margin-top: 2px; }

/* ── Blue (Bluemercury) theme accents ───────────────────────────────────────
   Two-step blue hierarchy: bright brand blue (#0b51c1) for interactive bits,
   title, outlines; deeper navy (#0a47a8) for section headers so they sit one
   step back. Semantic green ("you are here") is left intact on purpose. */
[data-theme="blue"] header h1 { color: var(--color-heading); }
/* Panel headers: lighter serif in small-caps — the leading cap of each word
   stays full-size while the rest drop to small caps (Filters, Product Detail). */
[data-theme="blue"] .sf-panel-title {
  color: var(--color-heading);
  font-size: 21px;
  font-weight: 620;
  text-transform: none;
  font-variant: small-caps;
  font-feature-settings: "smcp";
  letter-spacing: .02em;
}
/* Bold content text: navy instead of harsh near-black, keeps it on-family */
[data-theme="blue"] .nm,
[data-theme="blue"] .dp-name,
[data-theme="blue"] .fhdr,
[data-theme="blue"] .ptile .pn { color: var(--color-heading); }
/* Detail-panel title: the editorial serif reads too wide at this size, so use
   the clean sans here (product-list titles keep the serif). */
[data-theme="blue"] .dp-name { font-family: var(--font-ui); }
/* Detail section headings (Details, Key Benefits, …): title blue + the lighter
   serif weight of the product titles, which reads more elegant than heavy 800. */
[data-theme="blue"] .dp-section summary { color: var(--color-heading); font-weight: 650; }
/* Tighten the serif uppercase tracking — caps in serif read loose by default */
[data-theme="blue"] .sf-panel-title,
[data-theme="blue"] .fhdr { letter-spacing: .015em; }
/* Drop the multicolor product-line swatches in the filter panel */
[data-theme="blue"] .swatch { display: none; }
/* "Product information" label matches the filter-panel group headers (Product Line) */
[data-theme="blue"] .dp-section-toolbar-label { letter-spacing: .015em; }
/* Product-line tags: light-blue fill + the same blue that outlines the cards */
[data-theme="blue"] .tag.line {
  background: var(--color-accent-bg) !important;
  border-color: var(--color-border) !important;
  color: var(--color-accent) !important;
}
/* By-shelf tiles: drop the multicolor palette, use on-theme white + blue outline */
[data-theme="blue"] .ptile {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-ink) !important;
}
[data-theme="blue"] .ptile .pl { color: var(--color-muted); opacity: 1; }
/* Detail sub-headings join the title blue */
[data-theme="blue"] .dp-matchwhy-title,
[data-theme="blue"] .dp-matchwhy .matchlabel,
[data-theme="blue"] .dp-locmain { color: var(--color-heading); }
/* Brand link-out reads like the modal/detail title (serif, title size + weight) */
[data-theme="blue"] .dp-product-page { font-size: 17px; font-weight: 700; }
/* ── Selection markers ("current/viewing") ──────────────────────────────
   Blue's distinct STRUCTURE (gradient fill, thick frame, halo). Colour comes
   entirely from --sel-* tokens; opacity via color-mix(). The base .spot/.tapzone
   rules below serve the other themes from the same tokens. */

/* Shelf photo — the spotlight: blue frame, yellow halo, lit centre-clearing fill */
[data-theme="blue"] .spot.current,
[data-theme="blue"] .photo-frame.reveal .tapzone.current {
  border-width: 4px;
  outline: 4px solid color-mix(in srgb, var(--sel-glow) 85%, transparent);
  background: radial-gradient(ellipse at center, transparent 60%, color-mix(in srgb, var(--sel-fill) 50%, transparent) 96%);
  box-shadow: 0 0 26px 8px color-mix(in srgb, var(--sel-glow) 50%, transparent), 0 0 0 2px var(--sel-ring);
  z-index: 6;
}
[data-theme="blue"] .spot.here,
[data-theme="blue"] .photo-frame.reveal .tapzone.here {
  border-width: 3px;
  outline: 3px solid color-mix(in srgb, var(--sel-glow) 50%, transparent);
  background: radial-gradient(ellipse at center, transparent 64%, color-mix(in srgb, var(--sel-fill) 50%, transparent) 96%);
  box-shadow: 0 0 14px 4px color-mix(in srgb, var(--sel-glow) 50%, transparent);
}
[data-theme="blue"] .spot.also,
[data-theme="blue"] .photo-frame.reveal .tapzone.also {
  border-width: 2px;                            /* thin outline only — no fill */
  background: transparent;
  box-shadow: none;
}
/* Anything that reads "· current" — location pills + placement buttons — gets
   the same thin yellow halo around the blue, from the same tokens. */
[data-theme="blue"] .location-pill.current,
[data-theme="blue"] .dp-place.current {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sel-glow) 85%, transparent), 0 0 7px 1px color-mix(in srgb, var(--sel-glow) 50%, transparent);
}
/* Schematic "also matches" cells: soft grey + medium weight — readable and a
   step above the non-matches, without competing with the blue viewing cell. */
[data-theme="blue"] .mm-cell.also { color: var(--color-muted); font-weight: 600; }

/* Tiny version stamp at the very bottom of the page */
.app-version { text-align: center; font-size: 10.5px; color: var(--color-muted); padding: 14px 16px 18px; letter-spacing: .04em; }
/* Active view-mode tab reads blue, not just bordered */
[data-theme="blue"] .modeswitch .mode.on { color: var(--color-accent); background: var(--color-accent-bg); }
/* "Where it is" location info on cards picks up the brand blue */
[data-theme="blue"] .loc { color: var(--color-accent); }
/* Placement chips: blue-tinted resting state so they read as actionable */
[data-theme="blue"] .dp-place { background: var(--color-accent-bg); color: var(--color-accent-deep); }
[data-theme="blue"] .location-pill { color: var(--color-accent-deep); }

/* ─── Mode switch ────────────────────────────────────────────────────────── */
.modeswitch {
  display: inline-flex;
  background: var(--color-surface-inset);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.modeswitch .mode {
  border: none;
  background: transparent;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 13px;
  border-radius: 8px;
  cursor: pointer;
  min-height: 40px;
}
.modeswitch .mode.on {
  background: var(--color-surface);
  color: var(--color-ink);
  border: 2px solid var(--color-accent);
  box-shadow: none;
}

/* Sub-toggle (shelf view) */
.subtoggle {
  display: inline-flex;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
.subtoggle .sub2 {
  border: none;
  background: transparent;
  color: var(--color-muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 7px;
  cursor: pointer;
  min-height: 40px;
}
.subtoggle .sub2.on { background: var(--color-accent); color: #fff; }

/* ─── Layout ─────────────────────────────────────────────────────────────── */
.wrap { display: flex; gap: 12px; padding: 16px; align-items: flex-start; }

#facets {
  width: 288px; flex: 0 0 288px; padding: 0;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  position: sticky; top: 75px;
  max-height: calc(100vh - 91px);
  overflow: auto;
}
#product_list {
  flex: 1; padding: 0; min-width: 0;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  height: calc(100vh - 91px);
  max-height: calc(100vh - 91px);
  overflow: auto;
  align-self: flex-start;
}
#product_list .sf-panel-body { padding: 16px 18px 18px 16px; }

/* ─── Detail panel (desktop side-by-side) ───────────────────────────────── */
#detailPanel {
  display: none;
  width: 430px; flex: 0 0 430px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  position: sticky; top: 75px;
  height: calc(100vh - 91px);
  overflow: auto;
  padding: 0;
  align-self: flex-start;
}
.dp-empty {
  min-height: 260px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: var(--color-muted);
  font-size: 14px; line-height: 1.45;
  padding: 28px;
}

/* ─── Panel titles ───────────────────────────────────────────────────────── */
.sf-panel-title {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .055em;
  color: var(--color-muted);
  margin: 0; padding: 13px 16px;
  border-bottom: 1.5px solid var(--color-border-strong);
  background: var(--color-surface-alt);
  font-weight: 850;
  position: sticky; top: 0; z-index: 8;
  box-shadow: 0 1px 0 var(--color-border-strong);
}
.sf-panel-title.filters-title,
.sf-panel-title.products-title,
#detailPanel > .sf-panel-title {
  display: flex; align-items: center; min-height: 60px;
}
/* Mobile/desktop icon swap for filter toggle buttons */
.mi { display: none; }
.sf-panel-title.filters-title { justify-content: space-between; gap: 10px; }
/* Drawer header additions — hidden on desktop, shown on mobile */
.drawer-active-count { display: none; font-size: 12.5px; color: var(--color-muted); margin-left: 4px; }
.drawer-clearall { display: none; background: none; border: none; color: var(--color-accent); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; margin-left: auto; white-space: nowrap; }
.drawer-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 12px; border-bottom: 1px solid var(--color-border); min-height: 44px; align-items: center; }
.drawer-pills-empty { font-size: 13px; color: var(--color-muted); font-style: italic; }
/* Sticky show-results footer — hidden on desktop */
.drawer-footer { display: none; }
.sf-panel-title.products-title { gap: 10px; }
#facets .sf-panel-title, #detailPanel .sf-panel-title, #product_list .sf-panel-title { top: 0; }
.sf-panel-body { padding: 16px; }
#facetBody { padding: 14px 16px 16px; }
#detailPanel .sf-panel-title { position: sticky; top: 0; z-index: 2; }

/* Panel collapse toggle */
.panel-toggle {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer; padding: 0;
}
.panel-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-bg); }
.panel-toggle:focus-visible { outline: 3px solid var(--color-accent-ring); outline-offset: 2px; }
.panel-toggle svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.filters-reopen { display: none; }
body.filters-collapsed #facets { display: none !important; }
body.filters-collapsed #product_list { max-width: none; }
body.filters-collapsed .filters-reopen { display: inline-flex; }

/* ─── Search bar ─────────────────────────────────────────────────────────── */
.searchrow { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.searchbox { flex: 1; max-width: 760px; }
.sb-input-row { position: relative; }
.searchbox input {
  width: 100%; height: 46px; min-height: 46px;
  border: 2px solid var(--color-search-border);
  border-radius: var(--radius-input);
  background: var(--color-search-bg);
  color: var(--color-ink);
  font-size: 17px; line-height: 46px;
  padding: 0 42px 0 50px;
  box-shadow: none;
  appearance: textfield; -webkit-appearance: textfield;
}
.searchbox input:focus {
  outline: none;
  border-color: var(--color-search-border);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}
.searchbox input::placeholder { color: var(--color-search-placeholder); }
.searchbox input::-webkit-search-cancel-button,
.searchbox input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* Search icon */
.searchbox .mag {
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  pointer-events: none;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 0; color: transparent;
}
.searchbox .mag svg { display: block; width: 22px; height: 22px; stroke: var(--color-search-border); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.searchbox .mag svg circle, .searchbox .mag svg path { vector-effect: non-scaling-stroke; }

/* Clear button */
#clearSearch {
  display: none; position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  border: none; background: var(--color-search-bg);
  color: var(--color-muted);
  border-radius: var(--radius-chip);
  width: 24px; height: 24px;
  align-items: center; justify-content: center;
  font-size: 18px; line-height: 24px;
  cursor: pointer; z-index: 2;
}
#clearSearch.show { display: flex; }
#clearSearch:hover { background: var(--color-surface-inset); color: var(--color-ink); }

.searchhint { font-size: 12.5px; color: var(--color-muted); margin-top: 5px; }

/* ─── Active filter row ──────────────────────────────────────────────────── */
.bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.active-filter-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 8px; min-height: 0; }
.active-filter-row:empty { display: none; }

/* ─── Pills ──────────────────────────────────────────────────────────────── */
.pills { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; flex: 1; }
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--color-accent-bg);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  border-radius: var(--radius-chip);
  padding: 4px 9px; font-size: 12px; min-height: 28px;
  white-space: nowrap;
}
.pill .x { cursor: pointer; font-weight: 700; }
.clearall { font-size: 12px; color: var(--color-accent); cursor: pointer; text-decoration: underline; background: none; border: none; white-space: nowrap; }
.count { font-size: 13.5px; color: var(--color-muted); margin-bottom: 12px; font-weight: 600; }

/* Location pills in modal */
.location-pills { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; }
.location-pill {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface-inset);
  color: var(--color-muted);
  border-radius: var(--radius-chip);
  padding: 4px 10px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer; white-space: nowrap;
}
.location-pill.current {
  border-color: var(--color-green);
  background: var(--color-green-bg);
  color: var(--color-green);
}
.location-pill:focus-visible { outline: 3px solid var(--color-accent-ring); outline-offset: 2px; }

/* ─── Facets ─────────────────────────────────────────────────────────────── */
.fgroup { margin-bottom: 16px; }
.fhdr {
  display: flex; align-items: center; gap: 7px;
  cursor: pointer; user-select: none;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 8px;
  font-size: 12.5px; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700;
}
.fhdr .tri { margin-left: auto; font-size: 17px; color: var(--color-muted); font-weight: 700; }

.opt {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-surface);
  margin-bottom: 6px; cursor: pointer;
  font-size: 14px; user-select: none; min-height: 44px;
}
.opt .cnt { margin-left: auto; font-size: 12.5px; color: var(--color-muted); }
.opt .ck {
  width: 18px; height: 18px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff; flex: 0 0 18px;
}
.opt.on { border-color: var(--color-accent); background: var(--color-accent-bg); box-shadow: 0 0 0 2px var(--color-accent-ring); }
.opt.on .ck { background: var(--color-accent); border-color: var(--color-accent); }
.opt.on .cnt { color: var(--color-accent); }

.swatch { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--color-border-strong); flex: 0 0 12px; }

/* Match-all toggle */
.matchall { display: none; margin: 2px 0 8px; font-size: 12.5px; color: var(--color-muted); align-items: center; gap: 7px; cursor: pointer; }
.matchall.show { display: flex; }
.matchall .tog { width: 34px; height: 20px; border-radius: 11px; background: var(--color-border); position: relative; transition: .15s; flex: 0 0 34px; }
.matchall .tog::after { content: ""; position: absolute; top: 50%; left: 2px; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.matchall.active .tog { background: var(--color-accent); }
.matchall.active .tog::after { left: 16px; }

/* ─── Product grid ───────────────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 14px; }
.empty { padding: 48px; text-align: center; color: var(--color-muted); }

.pcard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  display: flex; flex-direction: column;
  position: relative; cursor: pointer;
}
body.panel-active .pcard.selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-ring);
}
.pcard .ph {
  height: 160px; background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.pcard .ph::after {
  content: ""; position: absolute; bottom: 0; left: 5%; right: 5%;
  height: 1px; background: var(--color-border);
}
.pcard .ph img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.pcard .bd { padding: 8px 13px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }

/* Badges */
.rev { position: absolute; top: 8px; left: 8px; background: var(--color-review-bg); border: 1px solid var(--color-review-border); color: var(--color-review-text); font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 2px 7px; z-index: 2; }
.disc { position: absolute; top: 8px; right: 8px; background: var(--color-disc-bg); border: 1px solid var(--color-disc-border); color: var(--color-disc-text); font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 2px 7px; z-index: 2; }
.discbig { display: inline-block; background: var(--color-disc-bg); border: 1px solid var(--color-disc-border); color: var(--color-disc-text); font-size: 12px; font-weight: 700; border-radius: 7px; padding: 4px 10px; margin: 0 0 10px 6px; }
.revbig { display: inline-block; background: var(--color-review-bg); border: 1px solid var(--color-review-border); color: var(--color-review-text); font-size: 12px; font-weight: 700; border-radius: 7px; padding: 4px 10px; margin-bottom: 10px; }

/* ─── Product card typography & chips ───────────────────────────────────── */
.brand { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.nm { font-size: 16px; font-weight: 650; line-height: 1.25; margin-top: -3px; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { font-size: 11px; padding: 3px 9px; border-radius: var(--radius-chip); border: 1px solid; min-height: 24px; display: inline-flex; align-items: center; }
.tag.line { font-weight: 700; }
.tag.neutral { background: var(--color-surface-inset); border-color: var(--color-border); color: var(--color-muted); }

/* Location button on card — tinted footer that bleeds to the card edges,
   visually separating "where it is" from the brand/name/tags above. */
.loc {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--color-ink);
  margin: auto 0 0; padding: 6px 0 0;
  flex-wrap: wrap; font-weight: 600;
  border: 0; background: none;
  cursor: pointer; text-align: left; font-family: inherit;
}
.loc .where { color: var(--color-muted); font-weight: 500; display: inline-flex; align-items: center; }
.loc:focus-visible { outline: 3px solid var(--color-accent-ring); outline-offset: 3px; border-radius: 4px; }

/* Search highlight */
mark.searchmark { background: #fff3a3; color: inherit; padding: 0; border-radius: 3px; }

/* Match reason (card) */
.matchwhy { border-top: 1px solid var(--color-border); margin-top: 1px; padding-top: 8px; font-size: 12px; line-height: 1.35; color: var(--color-muted); }
.matchwhy b { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-matchwhy-title); }
.matchline { margin-top: 4px; }
.matchlabel { font-weight: 800; color: var(--color-match-problem); }
.related-benefits { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--color-border); }
.related-benefit-line { margin-top: 3px; }
.related-problem-value { font-weight: 650; color: var(--color-match-problem); }
.related-benefit-value { font-weight: 750; color: var(--color-match-benefit); }
.search-note { display: none; }

/* ─── Modal ──────────────────────────────────────────────────────────────── */
.modal { display: none; position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.45); }
.modal.show { display: block; }
.sheet {
  background: var(--color-surface);
  border-radius: var(--radius-modal);
  width: 560px; max-width: calc(100vw - 24px);
  max-height: 92vh; overflow: auto;
  position: absolute; top: 5vh; left: 50%; transform: translateX(-50%);
  box-shadow: var(--shadow-modal);
  /* safe-area: home indicator on iPhone */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sheet.big { width: 96vw !important; max-width: 96vw !important; height: 94vh; max-height: 94vh; top: 3vh !important; left: 50% !important; transform: translateX(-50%) !important; }
.sheet.big .bayphoto { max-width: 680px; margin: 0 auto; }
.sheet .top {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: flex-start; gap: 10px;
  position: sticky; top: 0; background: var(--color-surface); z-index: 1000;
  border-radius: var(--radius-modal) var(--radius-modal) 0 0;
  isolation: isolate;
  cursor: move; touch-action: none;
}
.sheet .top button { cursor: pointer; }
.sheet.dragging { user-select: none; }
.modal-title-stack { flex: 1; min-width: 0; }
.sheet .top .nm { font-size: 17px; font-weight: 700; }
.sheet .top .crumb { margin: 4px 0 0; font-size: 12px; line-height: 1.35; }
.sheet .top .cl { border: none; background: var(--color-surface-inset); border-radius: 8px; width: 34px; height: 34px; font-size: 18px; cursor: pointer; flex: 0 0 34px; }
.sheet .top .popout { border: none; background: var(--color-accent-bg); color: var(--color-accent); border-radius: 8px; width: 34px; height: 34px; font-size: 16px; cursor: pointer; flex: 0 0 34px; }
.sheet .bdy { padding: 16px; }

/* Crumb + nav */
.crumb { font-size: 13px; color: var(--color-muted); margin-bottom: 10px; line-height: 1.5; }
.crumb .lnk { color: var(--color-accent); text-decoration: underline; cursor: pointer; }
.crumb b { color: var(--color-ink); }
.baytag { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--color-accent); background: var(--color-accent-bg); border: 1px solid var(--color-note-border); border-radius: 6px; padding: 2px 8px; margin-bottom: 10px; }

/* Modal filter pills row */
.modal-filter-row { margin: 8px 0 12px; flex: none; width: 100%; }
.modal-filter-row:empty { display: none !important; }
.modal-filter-row .pill { background: var(--color-accent-bg); }

/* ─── Minimap / Schematic ────────────────────────────────────────────────── */
.schematic-wrap { margin: 6px 0 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-alt); line-height: 1.35; max-width: 100%; margin-left: auto !important; margin-right: auto !important; }
.schematic-wrap summary { cursor: pointer; list-style: none; padding: 9px 12px; font-size: 12.5px; font-weight: 800; color: var(--color-accent); user-select: none; }
.schematic-wrap summary::-webkit-details-marker { display: none; }
.schematic-wrap summary::after { content: " +"; font-weight: 900; color: var(--color-accent); }
.schematic-wrap[open] summary { border-bottom: 1px solid var(--color-border); }
.schematic-wrap[open] summary::after { content: " –"; }
.schematic-wrap .minimap { margin: 10px 12px 12px; width: auto; }
.minimap { display: grid; gap: 4px; margin-bottom: 14px; width: 100%; min-width: 0; overflow: hidden; }
.mm-row { display: grid !important; grid-template-columns: 56px repeat(var(--cells, 1), minmax(0, 1fr)); gap: 4px; align-items: stretch; }
.mm-lbl { font-size: 10.5px; color: var(--color-muted); width: 56px; flex: 0 0 56px; display: flex; align-items: center; font-weight: 600; }
.mm-cell {
  flex: 1 1 0; min-width: 0; height: auto; min-height: 34px;
  border-radius: 4px; border: 1px solid var(--color-border);
  background: var(--color-surface-inset);
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; color: var(--color-muted);
  overflow: hidden; padding: 4px 3px; line-height: 1.08; cursor: pointer;
}
.mm-cell span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; text-overflow: clip; max-width: 100%; }
.mm-cell.force-wrap span { white-space: normal; }
.mm-cell.also { border-color: var(--color-amber); background: var(--color-amber-bg); color: var(--color-amber); font-weight: 700; }
.mm-cell.here, .mm-cell.current { box-shadow: inset 0 0 0 2px var(--color-green); background: var(--color-green-bg); color: var(--color-green); font-weight: 800; }

/* ─── Bay photo / spotlight ──────────────────────────────────────────────── */
.bayphoto { position: relative; width: 100%; border-radius: 10px; overflow: hidden; line-height: 0; z-index: 0; contain: paint; max-width: min(760px, 100%); margin: 0 auto; background: var(--color-surface-alt); border: 1px solid var(--color-border); }
.bayphoto img { width: 100%; display: block; height: auto; max-height: none; object-fit: contain; }
.bayphoto.dim::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.25); z-index: 1; pointer-events: none; }

.spot { position: absolute; border-radius: 6px; cursor: pointer; }
.spot.current { border: 3px solid var(--sel-ring); outline: 4px solid var(--sel-glow); background: color-mix(in srgb, var(--sel-fill) 22%, transparent); box-shadow: 0 0 14px 3px color-mix(in srgb, var(--sel-glow) 55%, transparent); z-index: 5; }
.spot.here { border: 2px solid var(--sel-ring); outline: 2px solid var(--sel-glow-soft); background: color-mix(in srgb, var(--sel-fill) 14%, transparent); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--sel-glow) 35%, transparent); z-index: 4; }
.spot.also { border: 2px solid var(--color-amber); background: color-mix(in srgb, var(--color-amber) 28%, transparent); z-index: 3; }
.spot.off { border: 1px solid color-mix(in srgb, var(--sel-off) 50%, transparent); background: color-mix(in srgb, var(--sel-off) 5%, transparent); z-index: 2; }

.legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 11.5px; color: var(--color-muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }

/* Photo scroll area */
.bayphoto-scroll { max-height: 52vh; overflow: auto; overscroll-behavior: auto !important; scrollbar-gutter: stable; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-alt); line-height: 0; }
.bayphoto-scroll .bayphoto { border: none !important; border-radius: 0 !important; max-width: none !important; margin: 0 !important; }
.bayphoto-scroll .bayphoto img { width: 100%; height: auto; display: block; }
.sheet.big .bayphoto-scroll { max-height: 72vh; }
.popup-page .bayphoto-scroll { max-height: 68vh; overflow: auto; }

/* ─── Data section (modal/detail) ────────────────────────────────────────── */
.datasec { margin-top: 16px; border-top: 1px solid var(--color-border); padding: 14px 8px 0 0; max-height: 42vh; overflow: auto; overscroll-behavior: auto !important; scrollbar-gutter: stable; }
.sheet.big .datasec { max-height: calc(94vh - 190px); }
.popup-page .datasec { max-height: none; overflow: visible; max-height: 60vh; overflow: auto; }
.drow { display: flex; gap: 10px; padding: 6px 0; font-size: 14px; }
.dk { flex: 0 0 104px; color: var(--color-muted); }
.dv { flex: 1; font-weight: 500; }
.desc { font-size: 13.5px; color: var(--color-ink); line-height: 1.5; margin-top: 6px; }
.flagbox { background: var(--color-flag-bg); border: 1px solid var(--color-flag-border); border-radius: 9px; padding: 10px 12px; font-size: 12.5px; color: var(--color-flag-text); margin-top: 12px; }
.flagbox b { display: block; margin-bottom: 4px; }
.notesbox { background: var(--color-note-bg); border: 1px solid var(--color-note-border); border-radius: 9px; padding: 10px 12px; font-size: 13px; color: var(--color-note-text); margin-top: 12px; }
.notesbox b { display: block; margin-bottom: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-accent); }

/* ─── Detail panel card ──────────────────────────────────────────────────── */
.dp-card { max-width: 410px; margin: 0 auto; padding: 18px 18px 24px; }
.dp-hero { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.dp-img { width: 168px; height: 196px; flex-basis: 168px; border-radius: var(--radius-card); background: var(--color-surface-alt); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 168px; }
.dp-img img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 6px; }
.dp-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); margin-top: 4px; }
.dp-name { font-size: 22px; line-height: 1.12; font-weight: 760; margin: 6px 0 10px; }
.dp-badges { display: flex; gap: 7px; flex-wrap: wrap; }
.dp-badge { font-size: 11px; font-weight: 800; border-radius: var(--radius-chip); padding: 4px 9px; border: 1px solid var(--color-border); background: var(--color-surface-inset); }
.dp-badge.review { background: var(--color-review-bg); border-color: var(--color-review-border); color: var(--color-review-text); }
.dp-badge.disc { background: var(--color-disc-bg); border-color: var(--color-disc-border); color: var(--color-disc-text); }

/* Detail match reason */
.dp-matchwhy { border: 1px solid var(--color-matchwhy-border); border-radius: 14px; background: var(--color-matchwhy-bg); padding: 12px 13px; margin: 0 0 16px; color: var(--color-matchwhy-text); font-size: 13px; line-height: 1.42; }
.dp-matchwhy-title { font-size: 11px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; color: var(--color-matchwhy-title); }
.dp-matchwhy-query { margin-top: 3px; color: var(--color-muted); }
.dp-matchwhy .matchline { margin-top: 8px; }
.dp-matchwhy .matchlabel { display: block; font-size: 11.5px; margin-bottom: 1px; }
.dp-matchwhy .matchphrase-list { margin: 3px 0 0; padding-left: 18px; }
.dp-matchwhy .matchphrase-list li { margin: 2px 0; }

/* Location box */
.dp-locbox { border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface-alt); padding: 14px 15px; margin: 4px 0 18px; }
.dp-loclabel { display: none; }
.dp-locmain { font-size: 17px; font-weight: 760; line-height: 1.25; }
.dp-locsub { font-size: 12.5px; color: var(--color-muted); margin-top: 5px; }
.dp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.dp-button { border: 1px solid var(--color-accent); background: var(--color-accent); color: #fff; border-radius: var(--radius-chip); padding: 9px 13px; font-size: 13px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.dp-button-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; transform: rotate(18deg); transform-origin: center; }
.dp-button.secondary { background: var(--color-surface); color: var(--color-accent); }
.dp-places { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.dp-place { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-chip); padding: 7px 10px; font-size: 12.5px; font-weight: 750; color: var(--color-muted); cursor: pointer; }
.dp-place.current { border-color: var(--color-green); background: var(--color-green-bg); color: var(--color-green); }
.dp-current { font-size: 12.5px; color: var(--color-green); font-weight: 800; margin-top: 8px; }

/* Detail sections */
.dp-section-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 1px 0 10px; }
.dp-section-toolbar-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.dp-section-toggle { border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-accent); border-radius: var(--radius-chip); padding: 7px 11px; min-height: 36px; font-size: 12.5px; font-weight: 750; cursor: pointer; white-space: nowrap; }
.dp-section-toggle:hover { border-color: var(--color-accent); background: var(--color-accent-bg); }
.dp-section-toggle:focus-visible { outline: 3px solid var(--color-accent-ring); outline-offset: 2px; }
.dp-section-actions { display: inline-flex; gap: 6px; }
.dp-section-actions .dp-section-toggle { width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 8px; font-size: 22px; font-weight: 500; line-height: 1; }
.dp-section { border-top: 1px solid var(--color-border); }
.dp-section summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 0; font-weight: 800; font-size: 17px; }
.dp-section summary::-webkit-details-marker { display: none; }
.dp-section summary::after { content: '+'; font-size: 26px; line-height: 1; color: var(--color-muted); font-weight: 300; }
.dp-section[open] summary::after { content: '–'; font-size: 28px; }
.dp-section-body { padding: 0 0 18px; color: var(--color-ink); font-size: 14.5px; line-height: 1.55; }
.dp-section-body p { margin: 0 0 12px; }
.dp-list { margin: 0; padding-left: 19px; }
.dp-list li { margin: 6px 0; }
.dp-kv { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 5px 0; }
.dp-k { color: var(--color-muted); }
.dp-v { font-weight: 600; }
.dp-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.dp-tag { border: 1px solid var(--color-border); background: var(--color-surface-inset); border-radius: var(--radius-chip); padding: 5px 9px; font-size: 12.5px; font-weight: 650; }
.dp-note { border: 1px solid var(--color-note-border); background: var(--color-note-bg); border-radius: 12px; padding: 11px 12px; margin-top: 10px; color: var(--color-note-text); }

/* Active filter hit highlighting */
.dp-tag.active-filter-hit { border-color: var(--color-accent) !important; background: var(--color-accent-bg) !important; color: var(--color-accent) !important; box-shadow: 0 0 0 2px var(--color-accent-ring); }
.dp-list li.active-filter-hit { border: 1px solid var(--color-accent); background: var(--color-accent-bg); color: var(--color-accent); border-radius: var(--radius-chip); padding: 3px 9px; display: inline-block; margin: 4px 4px 4px 0; font-weight: 750; box-shadow: 0 0 0 2px var(--color-accent-ring); }
.dp-list:has(li.active-filter-hit) { padding-left: 0; list-style: none; }
.dp-kv .active-filter-hit { background: var(--color-accent-bg); color: var(--color-accent); border-radius: 3px; padding: 1px 3px; box-shadow: 0 0 0 1px var(--color-accent-ring); font-weight: 800; }

/* Product page link */
.dp-product-page { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--color-note-border); border-radius: 12px; background: var(--color-note-bg); color: var(--color-accent); font-size: 14px; font-weight: 750; line-height: 1.35; text-decoration: none; }
.dp-product-page:hover { border-color: var(--color-accent); background: var(--color-accent-bg); text-decoration: underline; }
.dp-product-page:focus-visible { outline: 3px solid var(--color-accent-ring); outline-offset: 2px; }
.dp-product-page-icon { flex: 0 0 auto; font-size: 21px; font-weight: 500; line-height: 1; }

/* ─── Shelf / planogram views ────────────────────────────────────────────── */
.plano { display: flex; flex-direction: column; gap: 22px; align-items: center; }
.plano-bay { width: min(100%, 720px); margin: 0 auto; }
.plano-bay h2 { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.shelf-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: stretch; }
.shelf-lab { flex: 0 0 66px; display: flex; align-items: center; justify-content: flex-end; font-size: 11px; color: var(--color-muted); padding-right: 6px; text-align: right; font-weight: 600; }
.shelf-cells { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; background: var(--color-surface-inset); border-radius: 10px; padding: 8px; }
.ptile { min-width: 0; border: 1.5px solid; border-radius: 10px; padding: 8px 9px; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-start; gap: 3px; overflow: hidden; height: 104px; min-height: 104px; }
.ptile .pl { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; min-height: 14px; }
.ptile .pn { font-size: 12.5px; font-weight: 650; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 45px; }
.ptile .pa { font-size: 11px; opacity: .72; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; margin-top: auto; }

/* Photo planogram */
.photo-frame { position: relative; max-width: 600px; margin: 0 auto; line-height: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--color-border); }
.photo-frame img { width: 100%; display: block; }
.shelf-photo-under { width: min(100%, 600px); margin: 18px auto 0; text-align: center; }
.shelf-photo-under .photo-frame { max-width: 600px; }
.shelf-photo-under .caption { font-size: 11px; color: var(--color-muted); margin-top: 6px; text-align: left; line-height: 1.35; }
.shelf-note { font-size: 11.5px; color: var(--color-muted); margin: 6px 0 12px; text-align: center; }
.reveal-toggle { font-size: 12.5px; color: var(--color-accent); cursor: pointer; background: none; border: 1px solid var(--color-accent); border-radius: var(--radius-chip); padding: 7px 13px; margin-bottom: 10px; font-weight: 700; min-height: 40px; }

/* Tap zones */
.tapzone { position: absolute; border: 2px solid transparent; border-radius: 6px; cursor: pointer; }
.photo-frame .tapzone { border-color: transparent; background: transparent; z-index: 2; }
.photo-frame.reveal .tapzone.off { border: 1px solid color-mix(in srgb, var(--sel-off) 72%, transparent); background: color-mix(in srgb, var(--sel-off) 6%, transparent); }
.photo-frame.reveal .tapzone.also { border: 2px solid var(--color-amber); background: color-mix(in srgb, var(--color-amber) 28%, transparent); }
.photo-frame.reveal .tapzone.here { border: 2px solid var(--sel-ring); outline: 2px solid var(--sel-glow-soft); background: color-mix(in srgb, var(--sel-fill) 14%, transparent); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--sel-glow) 35%, transparent); z-index: 4; }
.photo-frame.reveal .tapzone.current { border: 3px solid var(--sel-ring); outline: 4px solid var(--sel-glow); background: color-mix(in srgb, var(--sel-fill) 22%, transparent); box-shadow: 0 0 14px 3px color-mix(in srgb, var(--sel-glow) 55%, transparent); z-index: 5; }

/* ─── Popout / standalone window ─────────────────────────────────────────── */
body.popup-mode { padding: 18px; background: var(--color-background); }
body.popup-mode header, body.popup-mode .wrap, body.popup-mode #shelfWrap, body.popup-mode #modal { display: none !important; }
.popup-page { max-width: min(1600px, calc(100vw - 36px)); margin: 0 auto; }
.popup-head { display: block !important; position: static; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-panel); background: var(--color-surface); margin-bottom: 14px; padding: 16px; }
.popup-head h1 { font-size: 20px; margin: 0; }
.popup-sub { font-size: 12px; color: var(--color-muted); margin-top: 3px; }
.popup-page section { background: var(--color-surface); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-panel); padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow-panel); }
.popup-page .popup-context { position: sticky; top: 0; z-index: 50; }
.popup-page .bayphoto { max-width: min(980px, 100%); margin: 0 auto; }
.popup-page .minimap { max-width: none; }
.popup-page .bayphoto img { width: 100%; height: auto; display: block; }
.resize-hint { display: none; font-size: 11.5px; color: var(--color-muted); margin: 4px auto 7px; max-width: min(980px, 100%); }
.popup-page .resize-hint { display: block; }
.popup-page .bayphoto-scroll.popout-resizable { resize: both; width: min(980px, 100%); height: 58vh; min-width: 360px; min-height: 220px; max-width: 100%; max-height: calc(100vh - 170px); margin-left: auto; margin-right: auto; overflow: auto !important; }
.popup-page .bayphoto-scroll.popout-resizable .bayphoto { width: 100%; }

/* ─── Project menu (hamburger, desktop only) ─────────────────────────────── */
.project-menu { position: relative; display: inline-flex; align-items: center; margin-left: 10px; z-index: 2000; }
.project-menu button { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 10px; padding: 8px 10px; font-weight: 800; min-height: 36px; cursor: pointer; }
.project-menu .menu-panel { display: none; position: absolute; right: 0; top: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-modal); min-width: 230px; padding: 8px; }
.project-menu:hover .menu-panel, .project-menu:focus-within .menu-panel { display: block; }
.project-menu a { display: block; color: var(--color-ink); text-decoration: none; padding: 10px 12px; border-radius: 9px; font-weight: 700; }
.project-menu a:hover, .project-menu a.active { background: var(--color-accent-bg); color: var(--color-accent); }
.project-menu .disabled { display: block; padding: 10px 12px; color: var(--color-muted); font-size: 12px; border-top: 1px solid var(--color-border); margin-top: 4px; }

/* ─── Theme picker ───────────────────────────────────────────────────────── */
.theme-picker { display: inline-flex; align-items: center; gap: 6px; }
.theme-btn {
  width: 28px; height: 28px;
  border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0;
  transition: border-color .15s;
}
.theme-btn:hover, .theme-btn:focus-visible { border-color: var(--color-accent); outline: none; }
.theme-btn.active { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-ring); }
.theme-btn[data-theme-val="clinical"]      { background: #f7f6f3; box-shadow: inset 0 0 0 1px #aaa397; }
.theme-btn[data-theme-val="boutique"]      { background: linear-gradient(135deg, #e7d3c1 50%, #9a5638 50%); }
.theme-btn[data-theme-val="blue"]          { background: #0b51c1; box-shadow: inset 0 0 0 1px #0a47a8; }
.theme-btn[data-theme-val="high-contrast"] { background: #000; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
.fbtn { display: none; }
.closeF { display: none; }

@media (max-width: 760px) {
  .wrap { flex-direction: column; padding: 12px; }

  /* ── Bottom-sheet modal on touch ───────────────────────────────────────────
   * Override the centered-dialog positioning. Sheet anchors to the bottom,
   * slides up via transform, and respects the home-indicator safe area.
   * The .sheet.big expansion (popout fallback) is also re-anchored.
   * Drag/move cursor is suppressed — swipe-down is the dismiss gesture.
   */
  .sheet {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(100%) !important;
    transition: transform .30s cubic-bezier(.32,1,.32,1);
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px) !important;
  }
  .modal.show .sheet {
    transform: translateY(0) !important;
  }
  /* @starting-style tells the browser where to begin the sheet's entry
   * transition even when the parent .modal goes display:none → block.
   * Supported: Chrome 117+, Safari 17.5+, Firefox 129+.
   * Fallback (older browsers): sheet pops in with no animation. */
  @starting-style {
    .modal.show .sheet {
      transform: translateY(100%) !important;
    }
  }
  /* Handle bar — matches filter drawer */
  .sheet::before {
    content: "";
    display: block;
    width: 40px; height: 4px;
    background: var(--color-border-strong);
    border-radius: 2px;
    margin: 12px auto 0;
    flex-shrink: 0;
  }
  /* Disable move cursor on touch — dragging is a desktop-only affordance */
  .sheet .top { cursor: default !important; touch-action: auto !important; }
  /* Big-sheet fallback (popout on touch) also stays bottom-anchored */
  .sheet.big {
    height: 94vh !important;
    max-height: 94vh !important;
    top: auto !important;
  }

  /* Keep #facets in the DOM on mobile so CSS transitions work.
   * display:none→block kills transform transitions, so we use
   * visibility + pointer-events for the hidden state instead. */
  body.filters-collapsed #facets { display: block !important; }

  /* Filter drawer: slides up from bottom */
  #facets {
    display: block;
    width: 100%; flex: none;
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    min-height: 40vh; max-height: 85vh;
    z-index: 40;
    border-radius: 20px 20px 0 0;
    border: none;
    border-top: 1.5px solid var(--color-border-strong);
    box-shadow: 0 -4px 24px rgba(0,0,0,.18);
    overflow-y: auto;
    transform: translateY(100%);
    /* visibility hidden delayed so element disappears AFTER slide-down */
    transition: transform .28s cubic-bezier(.32,1,.32,1), visibility 0s .28s;
    visibility: hidden;
    pointer-events: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #facets.open {
    transform: translateY(0);
    /* visibility visible immediately so element appears WITH slide-up */
    transition: transform .28s cubic-bezier(.32,1,.32,1), visibility 0s 0s;
    visibility: visible;
    pointer-events: auto;
  }
  /* Drawer handle bar */
  #facets::before {
    content: "";
    display: block;
    width: 40px; height: 4px;
    background: var(--color-border-strong);
    border-radius: 2px;
    margin: 12px auto 4px;
    flex-shrink: 0;
  }
  /* Backdrop when drawer is open */
  body.filters-open::after {
    content: "";
    position: fixed; inset: 0;
    background: rgba(0,0,0,.40);
    z-index: 39;
  }
  html, body { overflow-x: hidden; }
  /* Drawer header active count + clear all */
  .drawer-active-count { display: inline; }
  .drawer-clearall { display: inline; }
  /* Drawer active pills strip — always visible, wraps in place */
  /* Sticky show-results footer */
  .drawer-footer {
    display: block;
    position: sticky; bottom: 0;
    background: var(--color-surface);
    padding: 12px 16px;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px);
    border-top: 1px solid var(--color-border);
    z-index: 1;
  }
  .drawer-show-btn {
    display: block; width: 100%;
    background: var(--color-accent); color: #fff;
    border: none; border-radius: 12px;
    padding: 14px; font-size: 16px; font-weight: 700;
    cursor: pointer; text-align: center;
  }
  #product_list { width: 100%; height: auto; max-height: none; overflow: clip; }
  #product_list .sf-panel-body { padding-bottom: max(env(safe-area-inset-bottom, 0px), 24px); }
  .sf-panel-title { position: sticky; top: 0; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px; row-gap: 32px; }
  /* Full-width divider between product rows. Cards in a row stretch to equal
     height, so each card's bottom line aligns; left/right bleed (half the 18px
     column gap) bridges the columns into one continuous line. The divider sits
     halfway down the row-gap so it is equidistant between the two rows. */
  .pcard::after {
    content: ""; position: absolute; bottom: -16px; left: -9px; right: -9px;
    height: 1px; background: var(--color-border);
  }
  .pcard.last-row::after { display: none; }
  .pcard .ph { height: 128px; }
  .nm { font-size: 15px; }
  .searchrow { margin-top: 9px; }
  .searchbox { max-width: none; min-width: 0; overflow-x: clip; }
  .searchbox input { height: 44px !important; min-height: 44px !important; font-size: 16px !important; padding-left: 48px !important; }
  .searchbox .mag { left: 16px; top: 50%; width: 22px; height: 22px; }
  .searchbox .mag svg { width: 22px; height: 22px; }
  #clearSearch { top: 50%; }
  .searchhint { display: none; }
  .filters-reopen { display: inline-flex; }
  .closeF { display: none; }
  /* Swap to chevron icons on mobile */
  .di { display: none; }
  .mi { display: block; }
  /* Step 3: hide popout button and disable image resize on touch */
  .sheet .top .popout { display: none !important; }
  .popup-page .bayphoto-scroll.popout-resizable { resize: none !important; min-width: 240px; width: 100%; height: 52vh; }
  #detailPanel { display: none !important; }
  /* Step 5: touch target and layout fixes */
  .opt { min-height: 48px; }
  .mode { min-height: 44px; padding: 10px 11px; font-size: 12px; }
  .sub2 { min-height: 44px; padding: 10px 11px; font-size: 12px; }
  .modeswitch { flex-wrap: nowrap; }
  header h1 { font-size: 15px; }
  .version-badge { display: none; }
  .theme-btn { width: 32px; height: 32px; }
  /* Horizontal scroll pill rows on mobile — width:100% gives overflow-x:auto a concrete boundary */
  .active-filter-row { width: 100%; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .active-filter-row::-webkit-scrollbar { display: none; }
  .pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pills::-webkit-scrollbar { display: none; }
  .modal-filter-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .modal-filter-row::-webkit-scrollbar { display: none; }
  .location-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .location-pills::-webkit-scrollbar { display: none; }
}

/* Step 5: 320px — tightest supported width */
@media (max-width: 320px) {
  .wrap { padding: 8px; }
  .grid { grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: 32px; }
  .pcard .ph { height: 108px; }
  .searchbox input { font-size: 15px !important; }
  header h1 { font-size: 14px; }
  .modeswitch .mode { padding: 9px 8px; font-size: 11px; }
}

@media (min-width: 761px) {
  .drawer-pills { display: none; }
}

@media (min-width: 761px) and (max-width: 1199px) {
  #attrWrap { overflow-x: auto; align-items: flex-start; scrollbar-gutter: stable; }
  #attrWrap #facets { flex: 0 0 288px; }
  #attrWrap #product_list { flex: 0 0 560px; }
  body:not(.shelf-mode) #attrWrap #detailPanel { display: block !important; flex: 0 0 430px; }
}

@media (min-width: 1200px) {
  #attrWrap { align-items: flex-start; }
  #product_list { padding-right: 0; }
  body:not(.shelf-mode) #attrWrap #detailPanel { display: block !important; }
}

@media (max-width: 1199px) {
  .project-menu { display: none !important; }
}