/* ============================================================
   FABBRUCCIO: THE COLLECTION PAGE (section, /shop/ + product taxonomies)

   The page header and the one grafted toolbar. THE GRID AND THE CARD ARE
   NOT HERE: they live in fab-collection.css, which the section map loads
   on this route too, because design-language/components.md section 6
   specifies the collection page and the home preview as ONE primitive.
   Duplicating them here is how the two surfaces would drift apart.

   Ported from beta2 site.css:341-358 and :397-401.
   Markup: the fabbruccio/collection-grid dynamic block (functions.php).

   beta2 -> here
     .plp-head -> .fab-plp-head
     .toolbar  -> .fab-toolbar
     .filters  -> .fab-filters
     .count    -> .fab-count
   ============================================================ */

/* The route's own overflow guard. Same reasoning as fab-hero.css: the
   parent's body{overflow-x:hidden} makes body a scroll container and
   kills every position:sticky. Nothing on the collection page is sticky
   today, but the nav's solidify and any future sticky toolbar depend on
   the viewport being the scroller, and a route that opts out cannot be
   surprised later. */
body.woocommerce-shop,
body.tax-product_cat,
body.tax-product_tag { overflow-x: clip; }

.fab-shop { padding-bottom: clamp(24px, 4vw, 48px); }

/* THE PAGE HEADER. Quiet: eyebrow, h1, one honest paragraph. No banner,
   no hero image, no colour band. */
.fab-plp-head { padding: 0 0 clamp(28px, 4vw, 44px); }
.fab-plp-head .fab-eyebrow { margin-bottom: 12px; }
.fab-plp-head h1 {
  margin: 0;
  font-size: var(--fab-size-heading-l);
  font-weight: var(--fab-weight-medium);
  line-height: 1.1;
  letter-spacing: var(--fab-track-heading-l);
}
.fab-plp-head p {
  margin: 14px 0 0;
  max-width: var(--fab-measure-wide);
  font-size: var(--fab-size-lede);
  color: var(--fab-ink-secondary);
}

/* ============================================================
   THE TOOLBAR. The single grafted element on this page: a hairline-topped
   and hairline-bottomed row of uppercase micro-labels with a live count
   on the right. It carries NO dropdowns, NO chips and NO drawer, and it
   must not grow any.
   ============================================================ */
.fab-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-block: 14px;
  border-top: 1px solid var(--fab-hairline);
  border-bottom: 1px solid var(--fab-hairline);
  margin-bottom: clamp(26px, 4vw, 46px);
}

.fab-filters { display: flex; gap: 20px; }

/* Borderless buttons with a TRANSPARENT bottom border at rest, so the
   pressed state can add colour without moving anything by a pixel. The
   pressed underline is one of the four sanctioned uses of the accent
   (design-language/rules.md section 2) and it is a 1px rule, never a
   fill. */
.fab-filters button {
  padding: 2px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--fab-ink-secondary);
  font-family: var(--fab-font-sans);
  font-size: var(--fab-size-caption);
  line-height: normal; /* see the note on .fab-cta in fab-base.css */
  letter-spacing: var(--fab-track-upper);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--fab-hover-duration) var(--fab-ease),
              border-color var(--fab-hover-duration) var(--fab-ease);
}
.fab-filters button:hover { color: var(--fab-ink); }
.fab-filters button:focus-visible { color: var(--fab-ink); outline: 1px solid currentColor; outline-offset: 4px; }
.fab-filters button[aria-pressed="true"] {
  color: var(--fab-ink);
  border-bottom-color: var(--fab-accent-oxblood);
}

.fab-count {
  font-size: var(--fab-size-caption);
  letter-spacing: var(--fab-track-upper);
  text-transform: uppercase;
  color: var(--fab-ink-secondary);
}

@media (max-width: 520px) {
  .fab-toolbar { gap: 10px; }
  .fab-filters { gap: 16px; }
}

/* ------------------------------------------------------------
   The editorial interleave sits AFTER the grid, not inside it, so
   filtering can never disturb it and it can never leave a hole in a row.
   It is the full-bleed .fab-editorial band from fab-ugc.css; nothing is
   needed here but the space above it.
   ------------------------------------------------------------ */
.fab-shop + .fab-editorial { margin-top: clamp(24px, 4vw, 56px); }

/* ------------------------------------------------------------
   WOOCOMMERCE FURNITURE THIS PAGE DOES NOT USE

   The archive renders through our own dynamic block, so WooCommerce's
   result count, sorting dropdown, breadcrumb and pagination are not
   emitted at all. These are here for the taxonomy routes, where the
   plugin can still inject them around our block. Hidden rather than
   restyled: a sorting <select> has no place in a toolbar the design
   specifies as micro-labels only.
   ------------------------------------------------------------ */
.fab-shop-main .woocommerce-result-count,
.fab-shop-main .woocommerce-ordering,
.fab-shop-main .woocommerce-breadcrumb,
.fab-shop-main .woocommerce-products-header { display: none; }