/* ============================================================
   catalog.css — the catalogue view: /catalog and every /<category>
   ============================================================
   Loaded only by the Worker-rendered catalogue view (worker/ssr-catalog.js
   passes it to headBoilerplate), after style.css.

   VIEW FURNITURE ONLY: the heading row, the place of the category chips, the
   toolbar, how many columns the grid has HERE, the empty state's buttons and
   the two copy blocks. The parts the view is built from — .product-card and
   .card-*, .catalog-grid, .catalog-empty, the badges, the skeleton and the
   .chip-row — stay in style.css: the homepage shelf, the product page's
   «Схожі товари» and the blog render them too, and they load style.css alone.

   Mobile first. Budget at 320×568: the first product row of /catalog starts
   at ≈ 320px from the top of the document, header included — measured 293px
   on a touch screen (44px chips and controls). Every margin above the grid is
   spent against that number — measure again after changing one. The toolbar is not sticky on purpose: a pinned toolbar under a pinned
   header leaves a phone half a screen for products.
   Breakpoints 600 / 768 / 1024, all at the bottom of the file.
*/

/* ── Page frame ──────────────────────────────────────────── */
.catalog-view > .container:first-child { padding-bottom: var(--sp-12); }

/* Tighter than the site default: on a phone the trail is one line that should
   cost as little height as it can. */
.catalog-view .breadcrumb {
  padding: var(--sp-2) 0 var(--sp-1);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* ── Heading + count ─────────────────────────────────────── */
/* The count sits on the heading's baseline, not on a line of its own. */
.catalog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--sp-3);
  row-gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}
.catalog-title {
  font-family: var(--ff-head);
  font-size: clamp(1.375rem, 1.05rem + 1.7vw, 2.375rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--c-text);
  text-wrap: balance;
}
.catalog-count {
  font-family: var(--ff-num);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-muted);
  white-space: nowrap;
}

/* ── Category lead ───────────────────────────────────────── */
/* The first paragraph of the category description; the rest is .category-body
   below the grid. */
.catalog-lead {
  max-width: var(--content-w);
  margin-bottom: var(--sp-3);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--c-text-soft);
}
.catalog-lead p + p,
.catalog-lead ul { margin-top: var(--sp-2); }
.catalog-lead li { position: relative; padding-left: var(--sp-5); }
.catalog-lead li::before { content: '—'; position: absolute; left: 0; color: var(--c-accent-ink); }

/* ── Category chips ──────────────────────────────────────── */
/* The row itself is the shared .chip-row (style.css), which also bleeds to the
   screen edges on a phone by the container's own --gutter. */
.catalog-cats { margin-bottom: var(--sp-1); }

/* ── Toolbar ─────────────────────────────────────────────── */
/* Two forms in one row-wrapping flex: search, then «в наявності» + sort.
   Below 600 the search has the whole width and the other two share a row. */
.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.catalog-search {
  position: relative;
  flex: 1 1 100%;
  min-width: 0;
}
.catalog-search-icon {
  position: absolute;
  left: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-muted);
  pointer-events: none;
}
.catalog-search-input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--sp-3) 0 var(--sp-10);
  background: var(--c-card);
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r);
  color: var(--c-text);
  font-size: 1rem; /* 16px: iOS Safari zooms the page into any smaller field */
}
.catalog-search-input:focus { border-color: var(--c-primary); }
.catalog-search-input::placeholder { color: var(--c-placeholder); }

.catalog-filters {
  display: flex;
  flex: 1 1 100%;
  gap: var(--sp-2);
  min-width: 0;
}

/* «В наявності»: a real checkbox, so the form submits it with no script, drawn
   as a toggle chip. The input covers the whole chip — the tap target is the
   chip — and stays focusable; its ring is drawn on the chip. */
.catalog-stock {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
}
.catalog-stock input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.catalog-stock-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-3);
  background: var(--c-card);
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  color: var(--c-text-soft);
  font-family: var(--ff-ui);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform var(--t);
}
/* The box is always there, empty or ticked, so the chip never changes width
   and the sort beside it never jumps. */
.catalog-stock-check {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r);
  color: transparent;
}
.catalog-stock:hover .catalog-stock-chip { color: var(--c-text); border-color: var(--c-primary); }
/* --c-primary-wash alone is 1.10:1 against --c-card: the border, the text and
   the ticked box carry the state, as on .chip-link[aria-current]. */
.catalog-stock input:checked + .catalog-stock-chip {
  color: var(--c-primary);
  background: var(--c-primary-wash);
  border-color: var(--c-primary);
}
.catalog-stock input:checked + .catalog-stock-chip .catalog-stock-check {
  background: var(--c-cta);
  border-color: var(--c-cta);
  color: var(--c-on-cta);
}
.catalog-stock input:focus-visible + .catalog-stock-chip {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  box-shadow: var(--ring-focus);
}
.catalog-stock:active .catalog-stock-chip { transform: translateY(1px) scale(.985); }

.catalog-sort {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--sp-6) 0 var(--sp-3);
  background-color: var(--c-card);
  background-image: var(--img-select-arrow);
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r);
  color: var(--c-text);
  font-family: var(--ff-ui);
  font-size: 0.875rem;
  font-weight: 600;
  text-overflow: ellipsis;
  appearance: none;
  cursor: pointer;
}
.catalog-sort:focus { border-color: var(--c-primary); }

/* Only rendered with scripting off (it sits in <noscript>). */
.catalog-apply { flex-shrink: 0; min-height: 44px; }

/* ── Grid in this view ───────────────────────────────────── */
/* A modifier, not a change to .catalog-grid: the homepage shelf and the
   product page's related grid keep their own layout. Two columns from 320 —
   one card per screen made fifteen products a 7,000px scroll. */
.catalog-view .catalog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

/* ── Empty state ─────────────────────────────────────────── */
/* The block itself is .catalog-empty in style.css; this view titles it with an
   h2 (the page's h1 is the heading above) and gives it two ways out. */
.catalog-empty h2 {
  margin: 0;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  color: var(--c-text);
}
.catalog-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.catalog-empty .catalog-empty-actions .btn { margin-top: 0; }

/* ── Copy below the grid ─────────────────────────────────── */
/* The category description after its first paragraph … */
.category-body {
  max-width: var(--content-w);
  padding-bottom: var(--sp-section);
}
.category-body p,
.category-body li {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--c-text-soft);
}
.category-body p { margin-bottom: var(--sp-3); }
.category-body ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.category-body li { position: relative; padding-left: var(--sp-6); }
.category-body li::before { content: '—'; position: absolute; left: 0; color: var(--c-accent-ink); }

/* … and the catalogue's own SEO block. Body copy the shopper came from search
   to read, so --c-text-soft and a measure, not caption styling. */
.catalog-seo {
  padding: var(--sp-section) 0;
  background: var(--c-bg);
  border-top: 1px solid var(--c-border-light);
}
.catalog-seo-block h2 {
  margin-bottom: var(--sp-3);
  color: var(--c-text);
}
.catalog-seo-block p {
  max-width: var(--content-w);
  margin-bottom: var(--sp-3);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--c-text-soft);
}
.catalog-seo-block p:last-child { margin-bottom: 0; }

/* ── Breakpoints ─────────────────────────────────────────── */
@media (min-width: 600px) {
  .catalog-search  { flex: 1 1 16rem; }
  .catalog-filters { flex: 0 1 auto; }
  .catalog-sort    { flex: 0 1 auto; }
}

@media (min-width: 768px) {
  .catalog-view .breadcrumb { padding: var(--sp-4) 0 var(--sp-3); font-size: 0.875rem; }
  .catalog-head { margin-bottom: var(--sp-4); }
  .catalog-lead { font-size: 1rem; margin-bottom: var(--sp-4); }
  /* The chip row wraps from here (style.css), so nothing scrolls and nothing
     needs to bleed. */
  .catalog-cats { margin: 0 0 var(--sp-3); }
  .catalog-toolbar { margin-bottom: var(--sp-5); }
  .catalog-view .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}

@media (min-width: 1024px) {
  .catalog-view .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}