/*
 * Styling for WooCommerce's own catalogue blocks.
 *
 * WooCommerce ships the markup and the query; it does not ship a card look. A
 * repeated loop item cannot be styled from block attributes — there is no block
 * on the <li> to attach them to — so the frame lives here.
 *
 * Every value is a custom property with a theme token as its default, so
 * changing a colour in Global Styles still changes the catalogue, and a site can
 * override any of these from Appearance -> Editor -> Styles -> Additional CSS
 * without touching this file.
 */

.wc-block-product-template {
  --ffc-card-bg: var(--wp--preset--color--white, #fff);
  --ffc-card-border: var(--wp--preset--color--line, #d9e5ec);
  --ffc-card-radius: 9px;
  --ffc-card-shadow: 0 3px 14px rgba(24, 48, 64, .05);
  --ffc-card-shadow-hover: 0 8px 24px rgba(24, 48, 64, .10);
  --ffc-card-padding: 12px;
  --ffc-media-ratio: 1.18 / 1;
  --ffc-media-bg: var(--wp--preset--color--surface, #f4f7f9);
  --ffc-title-color: var(--wp--preset--color--primary, #173f5c);
  --ffc-title-size: .92rem;
  --ffc-meta-color: var(--wp--preset--color--muted, #6e7e89);
  --ffc-meta-size: .7rem;
}

/* --- Card ---------------------------------------------------------------- */

.wc-block-product-template > li.wc-block-product {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--ffc-card-border);
  border-radius: var(--ffc-card-radius);
  background: var(--ffc-card-bg);
  box-shadow: var(--ffc-card-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}

@media (hover: hover) {
  .wc-block-product-template > li.wc-block-product:hover {
    transform: translateY(-3px);
    box-shadow: var(--ffc-card-shadow-hover);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wc-block-product-template > li.wc-block-product { transition: none; }
  .wc-block-product-template > li.wc-block-product:hover { transform: none; }
}

/* A card is a column: everything stacks, and the action sits at the bottom so
   cards of different text length still line their buttons up. */
.wc-block-product-template > li.wc-block-product > * {
  margin-block: 0;
  padding-inline: var(--ffc-card-padding);
}
.wc-block-product-template > li.wc-block-product > *:last-child {
  margin-top: auto;
  padding-bottom: var(--ffc-card-padding);
}

/* --- Image --------------------------------------------------------------- */

/* The image spans the card edge to edge, so it opts out of the shared padding. */
.wc-block-product-template > li.wc-block-product > .wp-block-woocommerce-product-image {
  padding-inline: 0;
  margin-bottom: 10px;
}

.wc-block-product-template .wc-block-components-product-image {
  display: block;
  margin: 0;
  aspect-ratio: var(--ffc-media-ratio);
  background: var(--ffc-media-bg);
  overflow: hidden;
}

.wc-block-product-template .wc-block-components-product-image a,
.wc-block-product-template .wc-block-components-product-image__inner-container {
  display: block;
  width: 100%;
  height: 100%;
}

/* Different source ratios must not produce different card heights. */
.wc-block-product-template .wc-block-components-product-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Title, meta, price -------------------------------------------------- */

.wc-block-product-template > li.wc-block-product > .wp-block-post-title {
  margin-bottom: 5px;
  font-size: var(--ffc-title-size);
  line-height: 1.25;
}
.wc-block-product-template > li.wc-block-product > .wp-block-post-title a {
  color: var(--ffc-title-color);
  text-decoration: none;
}
.wc-block-product-template > li.wc-block-product > .wp-block-post-title a:hover,
.wc-block-product-template > li.wc-block-product > .wp-block-post-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wc-block-product-template > li.wc-block-product > .wp-block-post-terms {
  margin-bottom: 10px;
  color: var(--ffc-meta-color);
  font-size: var(--ffc-meta-size);
  line-height: 1.45;
}
.wc-block-product-template > li.wc-block-product > .wp-block-post-terms a {
  color: inherit;
  text-decoration: none;
}

/* Quote and catalogue products have no public price; the empty element should
   not leave a gap where a price would have been. */
.wc-block-product-template .wp-block-woocommerce-product-price:empty,
.wc-block-product-template .wc-block-components-product-price:empty { display: none; }

/* --- Action -------------------------------------------------------------- */

.wc-block-product-template > li.wc-block-product > .wp-element-button,
.wc-block-product-template > li.wc-block-product .wc-block-components-product-button {
  width: calc(100% - var(--ffc-card-padding) * 2);
  margin-inline: var(--ffc-card-padding);
  padding-inline: 0;
  text-align: center;
}

/* --- Filters ------------------------------------------------------------- */

.wc-block-product-filters {
  --ffc-filter-border: var(--wp--preset--color--line, #d9e5ec);
  --ffc-filter-radius: 9px;
}

/* Below this width WooCommerce turns the sidebar into its own overlay drawer
   and positions it itself. Giving it a border, padding and a flex direction
   there fights that, so the panel chrome is desktop-only. */
@media (min-width: 768px) {
  /* The rail only. This used to name every product-filters block, which drew
     the panel's border and padding round the chip row as well — a box the
     design does not have. */
  .ff-filter-rail {
    box-sizing: border-box;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--ffc-filter-border);
    border-radius: var(--ffc-filter-radius);
    background: var(--wp--preset--color--white, #fff);
    padding: 4px 14px;
  }

  .wc-block-product-filters .wc-block-product-filter {
    border-bottom: 1px solid var(--ffc-filter-border);
    padding-block: 12px;
  }
  .wc-block-product-filters .wc-block-product-filter:last-child { border-bottom: 0; }
}

.wc-block-product-filters .wc-block-product-filter-checkbox-list {
  font-size: .82rem;
  line-height: 1.4;
}

/* The count belongs beside its label, not pushed to the far edge, or a long
   label wraps around a lot of empty space. */
.wc-block-product-filters .wc-block-product-filter-checkbox-list__label {
  display: flex;
  gap: 5px;
  align-items: baseline;
  justify-content: flex-start;
}
.wc-block-product-filters .wc-block-product-filter-checkbox-list__text-wrapper {
  flex: 0 1 auto;
}
.wc-block-product-filters .wc-block-product-filter-checkbox-list__count {
  flex: 0 0 auto;
  margin-left: 0;
  color: var(--ffc-meta-color, #6e7e89);
}

/* --- Results bar --------------------------------------------------------- */

.wp-block-woocommerce-product-results-count,
.wp-block-woocommerce-catalog-sorting {
  margin: 0;
  color: var(--wp--preset--color--muted, #5c6f7d);
  font-size: .82rem;
}
.wp-block-woocommerce-catalog-sorting select {
  min-height: 38px;
  border: 1px solid var(--wp--preset--color--line, #d5e0e7);
  border-radius: 6px;
  background: var(--wp--preset--color--white, #fff);
  padding: 7px 30px 7px 10px;
  color: inherit;
  font: inherit;
  font-size: .82rem;
}

/* --- Narrower screens ---------------------------------------------------- */

@media (max-width: 767px) {
  .wc-block-product-template {
    --ffc-card-padding: 11px;
    --ffc-media-ratio: 4 / 3;
  }
}

/* The material line under a card title.
   A product made in eight structures lists eight of them, which pushed some
   cards three lines taller than their neighbours and left the row ragged. Two
   lines is enough to say what a product is made of; the full list is on the
   product page. */
.wc-block-product-template > li.wc-block-product > .wp-block-post-terms{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(2 * 1.45 * var(--ffc-meta-size));
}

/* --- The catalogue's two filter surfaces ---------------------------------- */

/* Category chips: one row that scrolls sideways. Wrapped, seven of them ran to
   four lines on a phone and pushed the products below the fold. */
.ff-filter-chips .wc-block-product-filter-chips__items,
.ff-filter-chips .wp-block-woocommerce-product-filter-chips ul{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  gap:.5rem;
  padding-bottom:.35rem;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.ff-filter-chips .wc-block-product-filter-chips__item{flex:0 0 auto;white-space:nowrap}
/* A fieldset carries a 2px browser border of its own, which drew a box round
   the whole row that the design does not have. */
.ff-filter-chips .wc-block-product-filter-chips__fieldset{border:0;margin:0;padding:0}
/* overflow-x only engages against a bounded width, and every wrapper between
   the block and the chips was sizing to its content instead — so the row grew
   to 954px inside a 390px screen and the chips past the edge were simply out
   of reach. */
.ff-filter-chips,
.ff-filter-chips .wc-block-product-filters__content,
.ff-filter-chips .wp-block-woocommerce-product-filter-taxonomy,
.ff-filter-chips .wc-block-product-filter-chips,
.ff-filter-chips .wc-block-product-filter-chips__fieldset,
.ff-filter-chips .wc-block-product-filter-chips__items{min-width:0;max-width:100%}

/* The rail is exactly as tall as the products beside it, and scrolls inside
   that. Taking it out of flow is what makes the column stop growing to fit the
   filters: the row's height then comes from the products alone, and the rail
   fills whatever that is. A viewport-height cap was the wrong measure — it left
   the rail running past the last product on a tall screen. */
@media(min-width:782px){
  .ff-filter-column{position:relative}
  .ff-filter-rail{
    position:absolute;
    inset:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-right:.6rem;
  }
  /* A scrollbar that is always visible, because a rail that scrolls and does
     not look like it does reads as a rail that is cut off. */
  .ff-filter-rail{scrollbar-width:thin;scrollbar-color:var(--wp--preset--color--line,#d9e5ec) transparent}
  .ff-filter-rail::-webkit-scrollbar{width:8px}
  .ff-filter-rail::-webkit-scrollbar-thumb{
    background:var(--wp--preset--color--line,#d9e5ec);
    border-radius:4px;
  }
  .ff-filter-rail::-webkit-scrollbar-track{background:transparent}
}

/* The rail's own header: the name of the thing, and the way to undo it. */
.ff-filter-rail__head{
  align-items:baseline;
  margin:.5rem 0 .7rem;
}
.ff-filter-rail__head h2{margin:0}
/* The clear link is inside an active-filters container so it can hide itself,
   which would otherwise make it a block on its own line. */
/* The clear-button block does not pass a className through to its wrapper, so
   this names what it actually renders. */
.ff-filter-rail__head .wp-block-woocommerce-product-filter-clear-button{margin:0;line-height:1}
.ff-filter-active[hidden]{display:none}

/* What is currently filtered, and the way to undo it. Hidden by the block
   itself until something is actually filtered, so it costs nothing when it has
   nothing to say. */
.ff-filter-active:not([hidden]){
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem;
  margin-bottom:.9rem;
}
.ff-filter-active .wc-block-product-filter-removable-chips__item{
  border-radius:999px;
  font-size:.75rem;
}
.wc-block-product-filter-clear-button__link{
  font-size:.8125rem;
  font-weight:600;
  color:var(--wp--preset--color--primary,#225d83);
  text-decoration:none;
  white-space:nowrap;
}
.wc-block-product-filter-clear-button__link:hover{text-decoration:underline}

/* The way through to a product: a small outlined button, not the full-width
   solid one that a quote deserves and a link does not. */
.ff-view-details .wp-block-read-more{
  display:inline-block;
  padding:.5rem 1.1rem;
  border:1px solid var(--wp--preset--color--line,#d9e5ec);
  border-radius:7px;
  font-size:var(--wp--preset--font-size--xs,.8125rem);
  font-weight:600;
  color:var(--wp--preset--color--primary,#225d83);
  text-decoration:none;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.ff-view-details .wp-block-read-more:hover,
.ff-view-details .wp-block-read-more:focus-visible{
  background:var(--wp--preset--color--primary,#225d83);
  border-color:var(--wp--preset--color--primary,#225d83);
  color:#fff;
}

/* --- The catalogue's furniture -------------------------------------------- */

/* Chips as pills. The block's own rule is a 2px radius and .4em padding, which
   reads as a row of small buttons rather than the category pills the design
   asks for. Their colours come from the block's own settings, so they stay
   editable. */
.ff-filter-chips .wc-block-product-filter-chips__item{
  padding:.6em 1.1em;
  border-radius:8px;
  font-size:.8125rem;
  font-weight:500;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}

/* Each filter group is its own card, and folds. */
.ff-filter-group{
  border:0;
  border-top:1px solid var(--wp--preset--color--line,#d9e5ec);
  border-radius:0;
  padding:.6rem 0 .2rem;
  margin:0;
  background:transparent;
}
.ff-filter-group:first-of-type{border-top:0;padding-top:0}
.ff-filter-group > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  cursor:pointer;
  font-size:.875rem;
  font-weight:700;
  list-style:none;
  color:var(--wp--preset--color--ink,#25394a);
}
.ff-filter-group > summary::-webkit-details-marker{display:none}
.ff-filter-group > summary::after{
  content:"";
  width:.5rem;
  height:.5rem;
  flex:0 0 auto;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-135deg);
  transition:transform .2s ease;
}
.ff-filter-group[open] > summary::after{transform:rotate(45deg)}
.ff-filter-group > :not(summary){margin-top:.4rem}
.ff-filter-group h3{display:none}

/* Search, where the sorting control used to be. */
.ff-catalogue-search input[type=search]{
  padding:.55rem .85rem;
  border:1px solid var(--wp--preset--color--line,#d9e5ec);
  border-radius:7px;
  font-size:.875rem;
  min-width:min(260px,60vw);
}
.ff-catalogue-search input[type=search]:focus-visible{
  outline:2px solid var(--wp--preset--color--primary,#225d83);
  outline-offset:1px;
}
.ff-catalogue-search button{
  background:var(--wp--preset--color--primary,#225d83);
  border:1px solid var(--wp--preset--color--primary,#225d83);
  border-radius:7px;
  color:#fff;
  padding:.55rem .7rem;
  cursor:pointer;
}
.ff-catalogue-search button:hover{background:#1c4c6b;border-color:#1c4c6b}
/* The block prints its own "Search" label above the field, which says the same
   thing as the placeholder inside it. */
.ff-catalogue-search label{
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  height:1px;
  width:1px;
  overflow:hidden;
  position:absolute;
  white-space:nowrap;
}

/* Pagination: numbered squares, the page you are on filled in. */
.wp-block-query-pagination{gap:.4rem;align-items:center}
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-next,
.wp-block-query-pagination .wp-block-query-pagination-previous{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.25rem;
  height:2.25rem;
  padding:0 .6rem;
  border:1px solid var(--wp--preset--color--line,#d9e5ec);
  border-radius:7px;
  font-size:.875rem;
  text-decoration:none;
  color:var(--wp--preset--color--primary,#225d83);
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination .wp-block-query-pagination-next:hover,
.wp-block-query-pagination .wp-block-query-pagination-previous:hover{
  background:var(--wp--preset--color--surface,#f4f8fa);
  border-color:var(--wp--preset--color--primary,#225d83);
}
.wp-block-query-pagination .page-numbers.current{
  background:var(--wp--preset--color--primary,#225d83);
  border-color:var(--wp--preset--color--primary,#225d83);
  color:#fff;
  font-weight:700;
}
.wp-block-query-pagination .page-numbers.dots{border-color:transparent;min-width:1.5rem;padding:0}

/* --- The filter drawer, on narrow screens --------------------------------- */
/* WooCommerce positions and animates this drawer itself, and it worked. I
   overrode its position, its containing block and its animation to make it come
   in from the left, and that broke the panel — it lost the box its own layout
   depended on. The override is gone; the only thing left is the width, so the
   panel is a panel rather than the whole screen, and the footer, whose button
   closed a drawer that had already filtered.

   Opening from the left is still worth having, but not at the cost of a drawer
   that works. It belongs in its own change, built on top of this. */
@media(max-width:781px){
  .ff-filter-rail .wc-block-product-filters__overlay-wrapper{
    width:min(340px,86vw);
    max-width:340px;
  }
  .ff-filter-rail .wc-block-product-filters__overlay-footer{display:none}
}

/* --- The band between the two breakpoints --------------------------------- */
/* Core stacks the catalogue's two columns below 783px, so above 600px — where
   WooCommerce hands its drawer back — the rail had no column to sit in and
   rendered as a long inline list above the products. Keep the drawer for that
   band as well, so the boundary is core's, not WooCommerce's. */
@media(min-width:601px) and (max-width:781px){
  .ff-filter-rail .wc-block-product-filters__open-overlay,
  .ff-filter-rail .wc-block-product-filters__overlay-header{display:flex}
  .ff-filter-rail:not(.is-overlay-opened) .wc-block-product-filters__overlay{display:none}
  .ff-filter-rail:not(.is-overlay-opened) .wc-block-product-filters__content{display:none}
  .ff-filter-rail{display:block}
  .ff-filter-rail .wc-block-product-filters__overlay-footer{display:none}
}

/* --- The count and the search share a line ------------------------------- */
/* One statement about what you are looking at and how to change it, on a phone
   as on a desktop. */
.ff-catalogue-search{flex:0 1 auto}
.ff-catalogue-search form{display:flex;gap:.4rem;align-items:center}
/* No submit button. The search runs as you type, so an arrow beside it is a
   control with nothing left to do. It is hidden only once the script is
   running, so anyone without it keeps a way to search. */
.js-ff-live-search .ff-catalogue-search button{display:none}
/* One row at every width. Below about 380px the field's own minimum was enough
   to push it onto a line of its own, so it shrinks instead. */
.ff-catalogue-toolbar{flex-wrap:nowrap;gap:.6rem;align-items:center}
.ff-catalogue-toolbar > *{min-width:0}
@media(max-width:600px){
  .ff-catalogue-search input[type=search]{min-width:0;width:100%}
}

/* --- The closing call to action ------------------------------------------- */
/* Its two columns stack below 782px, and stacked they kept a left-aligned
   heading over a right-aligned button — two different edges down one narrow
   column. Centred, they read as one thing. */
@media(max-width:781px){
  .ff-catalogue-cta{text-align:center}
  .ff-catalogue-cta .wp-block-buttons{justify-content:center}
}

/* --- A product's name, wherever it is listed ------------------------------ */
/* No underline on hover — the whole card already reacts, and a rule appearing
   under one line inside it reads as a second, competing thing to click. The
   colour is what moves instead. */
.wc-block-product-template .wp-block-post-title a,
.ff-related-products .wp-block-post-title a{
  text-decoration:none!important;
  transition:color .18s ease;
}
/* !important on both: core writes the link's hover underline and its colour
   from :root :where(...) rules, and the browser's own a:-webkit-any-link puts
   the underline back underneath them. Nothing else competes for these two
   properties on a product name. */
.wc-block-product-template .wp-block-post-title a:hover,
.wc-block-product-template .wp-block-post-title a:focus-visible,
.ff-related-products .wp-block-post-title a:hover,
.ff-related-products .wp-block-post-title a:focus-visible{
  text-decoration:none!important;
  color:var(--wp--preset--color--link-hover,#163f5b)!important;
}