/* The products index (/products/).
   Colours, radii and spacing come from tokens.css, and the shared primitives
   (container, sections, section headings, eyebrow, buttons, breadcrumb, page
   head, media slots) from layout.css. The product grid and its cards come from
   catalog.css, which every page loads.

   The related-link groups (.category-related__*) and the closing band
   (.category-cta__*) are the components category.css already ships for exactly
   those two jobs on the category pages, and that sheet is enqueued on every
   page, so the index reuses them instead of writing a second copy of the same
   blocks. Only the index's own layout lives here. */

.products-page{padding-block:0}

/* ---------- Hero: what the index is for, and how to ask for it ---------- */
.products-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-block:var(--space-lg) var(--space-xl)}
.products-hero__body{min-width:0}
.products-hero__head{margin-bottom:0}
.products-hero__lead{margin-top:20px;max-width:560px;font-family:var(--font-display);font-size:1.06rem;font-weight:600;line-height:1.45;letter-spacing:-.015em}
.products-hero__intro{margin-top:14px;max-width:560px;font-size:.94rem;color:var(--muted)}
.products-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.products-hero__media{min-width:0}
.products-hero__slot{aspect-ratio:4/3;box-shadow:0 22px 44px rgb(76 55 39 / 12%)}

/* ---------- The category tiles ---------- */
.products-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.products-tiles__item{min-width:0}
.products-tile{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-card);transition:transform .25s,box-shadow .25s}
.products-tile:hover,.products-tile:focus-visible{transform:translateY(-5px);box-shadow:0 16px 28px rgb(65 51 39 / 9%)}
.products-tile__photo{height:200px;overflow:hidden;background:var(--cream)}
.products-tile__photo .media-slot{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.products-tile__photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.products-tile:hover .products-tile__photo img{transform:scale(1.05)}
.products-tile__body{display:flex;flex:1;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 20px}
.products-tile__text{min-width:0}
.products-tile__title{font-size:1rem}
.products-tile__note{margin-top:6px;font-size:.78rem;line-height:1.5;color:var(--muted)}
/* The one number on the page: how many products this category holds today. A
   category holding none shows no number rather than a row of zeros. */
.products-tile__count{margin-top:9px;font-family:var(--font-display);font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--clay)}
.products-tile__arrow{display:grid;place-items:center;flex:none;width:31px;height:31px;border-radius:50%;background:var(--cream);font-weight:700;transition:background .22s,transform .22s}
.products-tile:hover .products-tile__arrow{background:var(--apricot);transform:translate(2px,-2px)}
.products-categories__note{margin:var(--space-md) 0 0;max-width:660px;font-size:.92rem;color:var(--muted)}

/* ---------- The catalogue: the toolbar and the grid it narrows ---------- */
/* The grid, the cards and their empty line are catalog.css's; the toolbar is the
   only part this page adds. Without JavaScript the toolbar's selects have no
   script behind them, and the grid below is already the whole catalogue. */
/* The grid, the cards and their empty line are catalog.css's; the toolbar and
   the pager are the only parts this page adds. The toolbar is an ordinary GET
   form, so it works with JavaScript switched off. */
.catalogue-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 22px;margin-bottom:var(--space-md);padding:18px 20px;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-card)}
.catalogue-field{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0}
.catalogue-field__label{font-family:var(--font-display);font-size:.71rem;font-weight:700}
.catalogue-select{min-height:44px;max-width:280px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--white);color:var(--ink);font-size:.85rem}
.catalogue-select:focus{border-color:var(--clay)}
.catalogue-apply{min-height:44px;padding:10px 22px;border:1px solid var(--ink);border-radius:var(--radius-control);background:var(--ink);color:var(--canvas);font-family:var(--font-display);font-size:.78rem;font-weight:700;cursor:pointer;transition:background .22s,border-color .22s}
.catalogue-apply:hover{background:var(--clay);border-color:var(--clay)}
.catalogue-clear{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:var(--radius-control);color:var(--ink);font-size:.78rem;font-weight:700;transition:border-color .22s,background .22s}
.catalogue-clear:hover{border-color:var(--ink);background:var(--canvas)}
.catalogue-count{display:flex;flex-direction:column;gap:3px;margin:0 0 0 auto;text-align:right}
.catalogue-count__label{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.catalogue-count__value{font-family:var(--font-display);font-size:.92rem;font-weight:700}

/* The pager of a paginated grid sits in catalog.css, because the category pages
   page as well and that sheet is the one every page loads. */

/* ---------- Narrow screens ---------- */
@media (max-width:1100px){
  .products-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .products-tile__photo{height:200px}
}
@media (max-width:900px){
  .products-hero{grid-template-columns:1fr;gap:32px;padding-block:var(--space-md) var(--space-lg)}
  .products-hero__slot{aspect-ratio:16/10}
  .products-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .products-tile__photo{height:185px}
  .catalogue-count{margin-left:0;text-align:left}
}
@media (max-width:560px){
  .products-tiles{grid-template-columns:1fr}
  .products-tile__photo{height:175px}
  .products-hero__actions .btn{flex:1 1 auto}
  .catalogue-toolbar{padding:16px}
  .catalogue-field,.catalogue-select,.catalogue-apply,.catalogue-clear{width:100%;max-width:none}
  .catalogue-apply,.catalogue-clear{justify-content:center;text-align:center}
}