:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #f3f3f0;
  --color-border: rgba(0, 0, 0, 0.16);
  --color-border-strong: rgba(0, 0, 0, 0.28);
  --color-text: #1a1a1a;
  --color-text-muted: #5f5e5a;
  --color-text-tertiary: #888780;
  --color-accent: #185fa5;
  --color-accent-bg: #e6f1fb;
  --color-accent-border: rgba(24, 95, 165, 0.4);
  --color-sil2-bg: #fff2a8;
  --color-sil2-text: #5c4500;
  --color-sil3-bg: #fde2b3;
  --color-sil3-text: #7a4a00;
  --color-hart-bg: #faeeda;
  --color-hart-text: #854f0b;
  --color-split-bg: #f1efe8;
  --color-split-text: #5f5e5a;
  --radius-md: 8px;
  --radius-lg: 12px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  padding: 2rem 1rem;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1040px;
  margin: 0 auto;
}

.counter {
  font-size: 13px;
  color: var(--color-text-muted);
}

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.5rem;
}

.filter-toggle {
  display: none;
}

@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }
  body { padding: 1rem; }

  .filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    font-size: 14px;
    font-family: inherit;
    padding: 4px 0;
    background: transparent;
    color: var(--color-text);
    border: none;
    border-radius: 0;
    cursor: pointer;
  }

  .filter-toggle:hover {
    background: transparent;
  }

  .filter-toggle-label {
    font-weight: 500;
  }

  .filter-toggle-count[hidden] {
    display: none;
  }

  .filter-toggle-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 500;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    border-radius: 10px;
  }

  .filter-toggle-chevron {
    margin-left: auto;
    /* Hide the original "▾" text glyph; we draw a bigger, two-line
       chevron with borders instead. */
    font-size: 0;
    width: 14px;
    height: 14px;
    display: inline-block;
    position: relative;
    color: var(--color-text-muted);
    transition: transform 0.2s ease;
    /* Nudge up so the V looks vertically centered with the label. */
    transform: translateY(-2px);
  }

  .filter-toggle-chevron::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    border-radius: 1px;
    transform: translate(-50%, -65%) rotate(45deg);
  }

  .layout.filters-open .filter-toggle-chevron {
    transform: translateY(-2px) rotate(180deg);
  }
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 1rem;
  align-self: start;
}

.filter-group {
  display: flex;
  flex-direction: column;
}

.filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-tertiary);
  margin: 0 0 8px;
}

.filter-hint {
  font-size: 12px;
  color: var(--color-text-tertiary);
  font-style: italic;
  margin: 0;
  padding: 8px 12px;
  border: 0.5px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.pill-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pill {
  text-align: left;
  font-size: 13px;
  padding: 8px 12px;
  background: transparent;
  border: 0.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}

.pill:hover {
  background: var(--color-surface-muted);
}

.pill:active {
  transform: scale(0.98);
}

.pill.active {
  background: var(--color-accent-bg);
  color: var(--color-accent);
  border-color: var(--color-accent-border);
}

.pill.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.pill.disabled:hover {
  background: transparent;
}

.reset {
  margin-top: 4px;
  text-align: center;
  font-size: 13px;
  padding: 8px 12px;
  background: transparent;
  border: 0.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: inherit;
}

.reset:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.stock-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 8px 4px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
}

.stock-check[hidden] {
  display: none;
}

.stock-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.stock-check__box {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 4px;
  background: var(--color-surface);
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s;
}

.stock-check__box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.12s;
}

.stock-check input:checked ~ .stock-check__box {
  background: #2e9b4a;
  border-color: #2e9b4a;
}

.stock-check input:checked ~ .stock-check__box::after {
  transform: rotate(45deg) scale(1);
}

.stock-check input:focus-visible ~ .stock-check__box {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 155, 74, 0.18);
}

.stock-check__label {
  flex: 1;
}

.select {
  width: 100%;
  font-size: 13px;
  font-family: inherit;
  padding: 8px 32px 8px 12px;
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 0.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.select:hover {
  background-color: var(--color-surface-muted);
}

.select:focus {
  outline: none;
  border-color: var(--color-accent-border);
  box-shadow: 0 0 0 3px var(--color-accent-bg);
}

.select option:disabled {
  color: var(--color-text-tertiary);
}

/* Results */
.results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card {
  position: relative;
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) fit-content(160px);
  gap: 8px 14px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, opacity 0.08s;
  z-index: 1;
}

.card:hover {
  border-color: var(--color-accent-border);
  box-shadow: 0 2px 8px rgba(24, 95, 165, 0.08);
  /* Lift the hovered card (and therefore its hover preview) above
     sibling cards that come later in the DOM. Without this, those
     later cards paint over the preview because they share the same
     stacking context but appear later in source order. */
  z-index: 50;
}

.card:active {
  /* Don't use `transform` here — any transform on .card creates a new
     containing block for position:fixed descendants, which yanks the
     hover preview (.card-thumb-preview) from the viewport center onto
     the card itself when the user mouses down. A subtle opacity shift
     gives press feedback without breaking the preview. */
  opacity: 0.92;
}

.card:focus-visible {
  outline: none;
  border-color: var(--color-accent-border);
  box-shadow: 0 0 0 3px var(--color-accent-bg);
}

.card-thumb {
  position: relative;
  grid-row: 1 / span 2;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  overflow: visible;
  background: var(--color-surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-md);
}

.card-thumb-preview {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(560px, 80vw);
  height: min(560px, 80vh);
  background: var(--color-surface);
  border: 0.5px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  padding: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s 0s, transform 0.15s 0s, visibility 0.15s 0s;
  z-index: 500;
}

.card-thumb-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-lg);
}

.card-thumb:hover .card-thumb-preview {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.15s 0.3s, transform 0.15s 0.3s, visibility 0.15s 0.3s;
}

.card-head {
  min-width: 0;
}

.card-title {
  font-weight: 500;
  font-size: 14px;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-sku {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
}

.card-stock {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.card-stock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.card-stock--in::before {
  background: #2e9b4a;
}

.card-stock--order::before {
  background: #e89c2a;
}

.card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

.card-meta {
  grid-column: 2 / -1;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 4px 0 0;
}

.card-meta b {
  font-weight: 500;
  color: var(--color-text);
}

.badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.badge-sil2 { background: var(--color-sil2-bg); color: var(--color-sil2-text); }
.badge-sil3 { background: var(--color-sil3-bg); color: var(--color-sil3-text); }
.badge-hart { background: var(--color-hart-bg); color: var(--color-hart-text); }
.badge-split { background: var(--color-split-bg); color: var(--color-split-text); }

.empty {
  padding: 2rem 1rem;
  text-align: center;
  border: 0.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  font-size: 13px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.pagination:empty {
  display: none;
}

.results-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  min-height: 36px;
}

.results-header::before {
  content: "";
}

.results-header .counter {
  justify-self: end;
  align-self: center;
}

.pagination-top {
  margin: 0;
  /* Reserve the same height the populated pagination has (page-btn is 36px),
     so the header row doesn't collapse when there's only one page and the
     pagination is hidden — otherwise content above the results jumps up. */
  height: 36px;
  align-self: center;
  display: flex;
}

/* Override the generic `.pagination:empty { display: none }` for the top
   slot specifically — we want it to keep its reserved row. */
.pagination-top:empty {
  display: flex;
}

.page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0;
  font-size: 13px;
  font-family: inherit;
  background: var(--color-surface);
  /* Muted color so the arrows don't feel as heavy as body text. */
  color: var(--color-text-muted);
  border: 0.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  /* Inline-flex so the chevron ::before centers cleanly. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

/* Chevron drawn via two rotated borders — pixel-perfect centering,
   no glyph-metric weirdness like ‹ and › have. */
.page-btn--prev::before,
.page-btn--next::before {
  content: "";
  display: block;
  width: 6.5px;
  height: 6.5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  border-radius: 1px;
}

.page-btn--prev::before {
  /* Rotate so the V points left, then nudge right to compensate for
     the rotation offset. */
  transform: rotate(135deg);
  margin-left: 1.5px;
}

.page-btn--next::before {
  /* Rotate so the V points right, then nudge left to balance. */
  transform: rotate(-45deg);
  margin-right: 1.5px;
}

.page-btn:hover:not(:disabled) {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.page-btn.active {
  background: var(--color-accent-bg);
  color: var(--color-accent);
  border-color: var(--color-accent-border);
  font-weight: 500;
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.page-indicator {
  /* Stable width so 1-digit and 3-digit counts (e.g. "1 / 9" vs
     "12 / 345") occupy the same horizontal space and the arrows
     don't shift between pages. */
  min-width: 72px;
  height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.error {
  padding: 1rem;
  background: #fcebeb;
  color: #791f1f;
  border-radius: var(--radius-md);
  font-size: 13px;
}

@media (max-width: 720px) {
  .sidebar {
    position: static;
    display: none;
  }

  .layout.filters-open .sidebar {
    display: flex;
  }

  .results-header {
    grid-template-columns: 1fr;
    gap: 6px;
    min-height: 0;
  }

  .results-header::before {
    display: none;
  }

  .pagination-top {
    justify-content: center;
  }

  .results-header .counter {
    justify-self: start;
    text-align: left;
    font-size: 10px;
    white-space: nowrap;
  }

  .card {
    grid-template-columns: 56px minmax(0, 1fr) fit-content(110px);
  }

  .card-thumb {
    width: 56px;
    height: 56px;
  }

  .card-thumb-preview {
    display: none;
  }
}

/* ─── Touch-device thumb zoom ────────────────────────────── */
/*
 * On coarse-pointer (touch) devices the hover-preview is useless,
 * so we replace it with a tap-to-zoom lightbox handled in JS.
 * Add a small magnifier hint in the corner of the thumb so users
 * know it's interactive.
 */
@media (hover: none), (pointer: coarse) {
  /* Suppress the hover popup on any touch device, even wider than 720px
     (e.g. touch laptops). Otherwise it can get stuck open on tap. */
  .card-thumb-preview {
    display: none !important;
  }

  .card-thumb::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='6'/><path d='m20 20-3.5-3.5'/></svg>") center / 9px 9px no-repeat;
    pointer-events: none;
  }

  /* Make the thumb feel tappable */
  .card-thumb {
    cursor: zoom-in;
  }
}

/* Lightbox overlay */
.lightbox {
  position: fixed;
  inset: 0;
  /* Use small-viewport units so the lightbox sits inside the visible area
     even when iOS Safari's URL bar / bottom toolbar are shown. Falls back
     to inset:0 above for browsers without svh support. */
  height: 100svh;
  width: 100svw;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  opacity: 0;
  /* When closed, the element stays in the DOM (so it can transition
     back in cheaply), but it must NOT intercept taps — otherwise it
     covers the whole viewport invisibly and eats every subsequent
     thumb tap. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.15s ease, visibility 0s linear 0s;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  object-fit: contain;
  /* Let users pinch-zoom the image itself */
  touch-action: pinch-zoom;
}

.lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a1a;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: #fff;
  outline: none;
}

/* Prevent body scroll while lightbox is open.
   `position: fixed` + inline `top: -<scrollY>px` (set in JS) keeps the
   visible scroll position intact on iOS, where `overflow: hidden` alone
   doesn't lock the page. */
body.lightbox-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* While the lightbox is open, suppress the hover preview entirely.
   Otherwise it lingers underneath because the cursor is still over
   the thumb that opened it. */
body.lightbox-open .card-thumb-preview {
  opacity: 0 !important;
  visibility: hidden !important;
}