/*
  Category pages, the category index and the search results page.

  The product grid and the card itself are in storefront.css, shared with the home page. What is
  here is the furniture around them: the heading, the filter panel, the pager and the wording a
  page shows when a filter combination matches nothing.
*/

.catalogue-page{ padding:40px 0 80px; }

/* ============ Breadcrumb ============ */
.breadcrumb{ margin:0 0 22px; }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; list-style:none; padding:0; margin:0; }
.breadcrumb li{ display:flex; align-items:center; gap:8px; font-size:var(--type-sm); color:var(--text-muted); }
.breadcrumb li + li::before{ content:"/"; color:var(--border-accent); }
.breadcrumb a{ color:var(--text-muted); }
.breadcrumb a:hover{ color:var(--text-accent); }
.breadcrumb [aria-current="page"]{ color:var(--text-heading); font-weight:600; }

/* ============ Page heading ============ */
.catalogue-head{ margin:0 0 26px; }
.catalogue-head h1{
  font-family:var(--serif); font-size:var(--type-2xl); line-height:1.15; color:var(--text-heading); margin:8px 0 0;
}
@media(max-width:640px){ .catalogue-head h1{ font-size:var(--type-xl); } }
.catalogue-head > p{ margin:10px 0 0; color:var(--text-subtle); font-size:var(--type-md); max-width:62ch; }
.catalogue-count{ margin-top:12px !important; font-size:var(--type-sm); color:var(--text-muted); font-weight:600; }
.catalogue-head q{ font-style:normal; color:var(--text-accent); }

/* ============ The offers page ============
   The codes running today, one card each. A grid rather than a table: the code is the thing being
   read and it has to be big enough to retype from memory across a room, which a table row is not.
   The dashed edge says "cut this out" without a single decorative image. */
.offers-page{ padding:40px 0 80px; }
.offer-list{ list-style:none; padding:0; margin:0; display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.offer-card{
  background:var(--surface-sunken); border:1px dashed var(--border-accent);
  border-radius:var(--radius-lg); padding:22px;
}
.offer-card-code{
  margin:0; font-size:var(--type-lg); font-weight:700; letter-spacing:0.14em;
  color:var(--text-accent); word-break:break-all;
}
.offer-card-offer{ margin:6px 0 0; font-size:var(--type-md); color:var(--text-heading); font-weight:600; }
.offer-card-label{ margin:8px 0 0; font-size:var(--type-sm); color:var(--text-subtle); }
.offer-card-conditions{ margin:10px 0 0; font-size:var(--type-xs); color:var(--text-muted); }
.offer-list-note{ margin:24px 0 0; font-size:var(--type-sm); color:var(--text-muted); max-width:62ch; }

.search-note{ font-size:var(--type-sm); }
.search-note a{ color:var(--text-accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ============ Sub-categories ============ */
.child-categories{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px; }

/*
  The filter panel used to be here. It is in storefront.css now: the home page renders the same
  fragment and does not load this file, so the panel arrived there as raw browser controls. Same
  reason the product grid and the filter pills moved out of home.css.
*/

/* ============ What is currently narrowed down ============ */
.active-filters{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0 0 22px; }
.active-filters li{
  font-size:var(--type-sm); color:var(--text-heading); background:var(--surface-sunken);
  border:1px solid var(--border); border-radius:999px; padding:6px 14px;
}

/* ============ Pager ============ */
.pager{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin:40px 0 0; }
.pager-numbers{ display:flex; align-items:center; gap:6px; list-style:none; padding:0; margin:0; }
.pager-numbers a{
  display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px;
  border:1.5px solid var(--border); border-radius:10px; font-size:var(--type-sm); font-weight:600; color:var(--text-heading);
  transition:all .2s ease;
}
.pager-numbers a:hover{ border-color:var(--border-accent); }
.pager-numbers a.is-current{ background:var(--surface-selected); color:var(--text-on-selected); border-color:var(--surface-selected); }
.pager-gap{ padding:0 4px; color:var(--text-muted); }
.pager-step{
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px;
  font-size:var(--type-sm); font-weight:600; color:var(--text-heading);
}
/* Underlined rather than recoloured: the resting colour is already the heading colour, so a
   swap to the accent role would now be a hover state that changes nothing. */
.pager-step:hover{ text-decoration:underline; text-underline-offset:4px; }
/*
   Was #c2c2ba, which measures 1.70:1 against the page — the least readable text in the shop, on
   the control that tells a shopper they have reached the last page. Disabled text is exempt from
   the contrast rules; being exempt is not the same as being legible.
*/
.pager-step.is-disabled{ color:var(--text-disabled); }

/* ============ Search: nothing found ============ */
.search-empty{ padding:30px 0 10px; }
.search-empty p{ font-size:var(--type-md); color:var(--text-subtle); margin:0 0 20px; max-width:62ch; }
.search-empty q{ font-style:normal; color:var(--text-heading); font-weight:600; }
.search-empty a{ color:var(--text-accent); font-weight:600; }
.search-suggestions{ display:flex; flex-wrap:wrap; gap:10px; }
.search-suggestions a{ color:var(--text-heading); }

/* ============ Category index ============ */
.category-index{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
@media(max-width:760px){ .category-index{ grid-template-columns:1fr; } }
.category-index section{
  background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px;
}
.category-index h2{ font-family:var(--serif); font-size:var(--type-lg); color:var(--text-heading); margin:0; }
.category-index h2 a:hover{ text-decoration:underline; text-underline-offset:4px; }
.category-index p{ margin:8px 0 0; color:var(--text-muted); font-size:var(--type-sm); }
.category-index .child-categories{ margin:16px 0 0; }