/* Stoke Tiles redesign: category pages (T4).
   Built from design/category.html and design/category-mobile.html. */

.st-archive { display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- Banner */

.st-cat-banner {
  position: relative;
  /* min-height, not height: Porcelanosa Tiles has thirteen subcategories and
     a long title, and a fixed band clipped them upward behind the header.
     The band grows; the image still covers because of the rule below. */
  min-height: 560px;
  /* The header is drawn over this band - 184px of top bar, logo row and nav -
     so the content has to start below it. Without this the band grew to
     exactly fit its content and the title ended up behind the logo. */
  padding: 200px 0 60px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--st-espresso);
}
/* Two classes deep on purpose. WooCommerce ships
   `.woocommerce img { height: auto }`, which is one step more specific than a
   single class and loads after this file, so at `.st-cat-banner__media` the
   image ignored its own height and rendered at its intrinsic 1200px inside a
   560px band - object-fit and object-position then did nothing at all. */
.st-cat-banner .st-cat-banner__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}
/* Three gradients: the header scrim, the reading gradient from the left, and
   a lift from the bottom so the subcategory pills stay legible. */
.st-cat-banner__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(24, 21, 18, 0.78) 0%, rgba(24, 21, 18, 0.55) 42%, rgba(24, 21, 18, 0) 78%),
    linear-gradient(180deg, rgba(24, 21, 18, 0.55) 0px, rgba(24, 21, 18, 0) 220px),
    linear-gradient(0deg, rgba(24, 21, 18, 0.45) 0px, rgba(24, 21, 18, 0) 200px);
}
/* A short gold rule under the title. Mobile only - the desktop design closes
   the title with the intro paragraph instead. */
.st-cat-banner__rule { display: none; width: 56px; height: 1px; background: var(--st-gold-light); }

/* The intro and the subcategory links. Over the photograph here, so they
   inherit the banner's white; a cream band of their own on a phone. */
.st-cat-intro {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--st-gutter-desktop);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Over the photograph, so ivory - it inherited the page's espresso and was
   dark text on a dark picture. Overridden back to espresso on the phone
   layout below, where this band is cream. */
.st-cat-intro { color: var(--st-ivory); }
.st-cat-intro__text { margin: 0; max-width: 620px; font-size: var(--st-body-l); line-height: 1.6; font-weight: 300; }

/* Without a photograph the banner is simply the dark panel. */
.st-cat-banner--plain { min-height: 420px; background: var(--st-espresso); }

.st-cat-banner__body {
  position: relative;
  width: 880px;
  max-width: 100%;
  margin: 0 0 60px var(--st-gutter-desktop);
  color: var(--st-white);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.st-cat-banner__title {
  margin: 0;
  font-family: var(--st-serif);
  font-weight: 500;
  font-size: 96px;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--st-white);
}
.st-cat-banner__intro {
  margin: 0;
  max-width: 560px;
  font-size: var(--st-body-l);
  line-height: 1.6;
  font-weight: 300;
  color: var(--st-ivory);
}

.st-subpills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.st-subpill {
  min-height: var(--st-tap-min);
  padding: 0 22px;
  border: 1px solid color-mix(in srgb, var(--st-white) 65%, transparent);
  border-radius: var(--st-radius);
  color: var(--st-white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-size: var(--st-label);
  letter-spacing: var(--st-track-nav);
  text-transform: uppercase;
  white-space: nowrap;
}
.st-subpill:hover { background: var(--st-white); color: var(--st-espresso); }

/* --------------------------------------------------------------- Toolbar */

.st-toolbar {
  position: sticky;
  top: 0;
  z-index: 800;
  min-height: 72px;
  background: var(--st-white);
  border-bottom: 1px solid var(--st-linen);
  box-shadow: 0 6px 16px rgba(31, 28, 25, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 10px var(--st-gutter-desktop);
}
.st-toolbar__left { display: flex; align-items: center; gap: 20px; min-width: 0; flex-grow: 1; }
/* A fixed width, so the divider and the filter chips land in the same place
   whatever the count says. Sized to content they shifted about 175px between
   "502 tiles" and "8 tiles". */
.st-toolbar__count { width: 232px; font-size: 15px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.st-toolbar__divider { width: 1px; height: 28px; background: var(--st-linen); flex-shrink: 0; }
.st-toolbar__right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.st-toolbar__sort { display: flex; align-items: center; gap: 14px; margin: 0; }
.st-toolbar__sort label { font-size: var(--st-small); font-weight: 500; white-space: nowrap; }
.st-toolbar__sort select { width: 270px; }
.st-toolbar__filter-btn { display: none; gap: 10px; }

.st-chips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  min-width: 0;
}
.st-chip {
  min-height: var(--st-tap-min);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background: var(--st-ivory);
  border: 1px solid var(--st-linen);
  border-radius: var(--st-radius);
  padding-left: 14px;
  font-size: var(--st-small);
  white-space: nowrap;
}
.st-chip__remove {
  width: 40px;
  min-height: var(--st-tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--st-espresso);
  text-decoration: none;
}
.st-chip__remove:hover { color: var(--st-alert); }

.st-toolbar__clear {
  min-height: var(--st-tap-min);
  display: inline-flex;
  align-items: center;
  color: var(--st-bronze);
  font-size: var(--st-label);
  letter-spacing: var(--st-track-nav);
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--st-gold);
  white-space: nowrap;
}
.st-toolbar__clear:hover { color: var(--st-espresso); }

/* -------------------------------------------------------- Layout: sidebar */

.st-archive__body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  column-gap: 56px;
  padding-top: 48px;
  padding-bottom: 64px;
  align-items: start;
}

.st-filters { display: flex; flex-direction: column; position: sticky; top: 96px; }
.st-filters__head { display: flex; align-items: center; justify-content: space-between; }
.st-filters__title {
  margin: 0;
  height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--st-espresso);
  flex-grow: 1;
  font-family: var(--st-sans);
  font-size: var(--st-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
}
.st-filters__close { display: none; }
.st-filters__foot { display: none; }
.st-filters__scrim { display: none; }

.st-fgroup { border-bottom: 1px solid var(--st-linen); }
.st-fgroup h3 { margin: 0; font-size: inherit; font-family: inherit; }
.st-fgroup__toggle {
  width: 100%;
  min-height: 56px;
  border: 0;
  background: transparent;
  color: var(--st-espresso);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  font-family: var(--st-sans);
  font-size: var(--st-label);
  letter-spacing: var(--st-track-label);
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.st-fgroup__toggle svg { transition: transform 180ms ease; flex-shrink: 0; }
.st-fgroup__toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.st-fgroup__body { padding: 4px 0 20px; }
.st-fgroup__body[hidden] { display: none; }

.st-fopts { display: flex; flex-direction: column; }
.st-fopts--swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 4px; }

.st-fopt {
  position: relative;
  min-height: var(--st-tap-min);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--st-espresso);
  text-decoration: none;
  cursor: pointer;
}
.st-fopt:hover { color: var(--st-bronze); }
.st-fopt__box {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  box-sizing: border-box;
  background: var(--st-white);
  border: 1.5px solid var(--st-taupe);
  border-radius: var(--st-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--st-white);
}
.st-fopt__box svg { opacity: 0; }
.st-fopt.is-on .st-fopt__box { background: var(--st-sage); border-color: var(--st-sage); }
.st-fopt.is-on .st-fopt__box svg { opacity: 1; }
.st-fopt__label { flex-grow: 1; }
.st-fopt.is-on .st-fopt__label { font-weight: 500; }
.st-fopt__count { font-size: 13px; color: var(--st-taupe); }

.st-swatch {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--st-linen);
  box-sizing: border-box;
}
.st-fopt.is-on .st-swatch { box-shadow: 0 0 0 2px var(--st-espresso); }
.st-fopts--swatches .st-fopt__label { font-size: var(--st-small); }
.st-fopts--swatches .st-fopt__count { display: none; }

/* ------------------------------------------------------------- Load more */

.st-loadmore {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.st-loadmore__status { font-size: var(--st-small); color: var(--st-taupe); }
.st-loadmore__bar { width: 240px; height: 2px; background: var(--st-linen); }
.st-loadmore__fill { height: 2px; background: var(--st-espresso); transition: width 300ms ease; }
.st-loadmore__btn { margin-top: 10px; padding: 0 40px; }
.st-loadmore.is-done .st-loadmore__btn { display: none; }

/* Real pagination stays for crawlers; the script hides it once it takes over. */
.st-pagination { margin-top: 32px; }
.st-pagination.is-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.st-empty { max-width: 560px; }

/* ------------------------------------------------------- About and FAQs */

.st-cat-about {
  background: var(--st-white);
  border-top: 1px solid var(--st-divider);
  padding: 104px 0;
}
.st-cat-about__inner,
.st-cat-faqs__inner {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  column-gap: 96px;
  align-items: start;
}
/* The copy starts level with the heading, not with the eyebrow above it. */
.st-cat-about__body { padding-top: 30px; font-size: var(--st-body-l); line-height: 1.65; font-weight: 300; }
.st-cat-about__body p { margin: 0 0 1em; }
.st-cat-about__body p:last-child { margin-bottom: 0; }
/* The imported copy is centred inline; the design sets it left. */
.st-cat-about__body [style*="text-align"] { text-align: left !important; }

.st-cat-faqs { padding: 104px 0; }
/* ------------------------------------------------------------ Help strip */

/* A fixed band in the design rather than padding round its contents. */
.st-help { background: var(--st-stone); height: 200px; display: flex; align-items: center; }
.st-help__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.st-help__lead { display: flex; align-items: center; gap: 28px; }
/* Bronze: it is the only colour in this band, and the design uses it to
   carry the eye to the email address. */
.st-help__lead svg { flex-shrink: 0; color: var(--st-bronze); stroke-width: 1.3; }
.st-help__text { display: flex; flex-direction: column; gap: 8px; }
.st-help__title { margin: 0; font-family: var(--st-serif); font-weight: 500; font-size: 40px; line-height: 1.1; }
.st-help__line { margin: 0; font-size: 17px; line-height: 1.5; }
/* Underlined, because st-base turns underlines off globally and inside a
   sentence there is nothing else marking this as a link. */
.st-help__line a { color: var(--st-espresso); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
/* Slightly wider than the standard button, as the design draws it. */
.st-help .st-btn { padding: 0 36px; }

/* ---------------------------------------------------------------- Tablet */

@media (max-width: 1200px) {
  .st-archive__body { grid-template-columns: 240px minmax(0, 1fr); column-gap: 32px; }
  .st-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-cat-about__inner, .st-cat-faqs__inner { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .st-toolbar__sort select { width: 220px; }
}

/* ---------------------------------------------------------------- Mobile */

@media (max-width: 1024px) {
  /* A 420px photograph holding breadcrumb, title and rule, and nothing else.
     The intro and the links move out from over the picture and on to cream,
     where they read. */
  /* The photograph is reserved as padding so the intro band can flow after
     it in the normal way - positioned absolutely it would have sat on top of
     the toolbar below. */
  .st-cat-banner {
    min-height: 0;
    height: auto;
    padding: 420px 0 0;
    gap: 0;
    display: block;
    overflow: hidden;
  }
  .st-cat-banner .st-cat-banner__media { height: 420px; }
  .st-cat-banner__scrim { height: 420px; }
  .st-cat-banner__body {
    /* left/right decide the width here, so the desktop rule's 880px and its
       80px left margin both have to stand down - left, right and a definite
       width together are over-constrained, and the margin simply adds to
       left. Together they were putting the crumb at x=100 and hanging the
       title 100px off the right edge. */
    position: absolute;
    width: auto;
    margin: 0;
    top: 0;
    left: var(--st-gutter-mobile);
    right: var(--st-gutter-mobile);
    height: 420px;
    justify-content: flex-end;
    padding-bottom: 32px;
    box-sizing: border-box;
    gap: 16px;
  }
  .st-cat-banner__rule { display: block; }

  .st-cat-intro {
    padding: 28px var(--st-gutter-mobile);
    gap: 16px;
    max-width: none;
    background: var(--st-ivory);
    color: var(--st-espresso);
  }
  .st-cat-intro__text { font-size: 16px; }

  /* Two equal halves of one 56px bar, ruled top and bottom, divided by a
     single line - not an outlined button beside a boxed select. */
  .st-toolbar {
    height: 56px;
    box-sizing: border-box;
    background: var(--st-white);
    border-top: 1px solid var(--st-linen);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0;
  }
  .st-toolbar__left,
  .st-toolbar__right { display: contents; }
  .st-toolbar__note,
  .st-toolbar__divider,
  .st-toolbar__chips,
  .st-toolbar__clear { display: none; }

  .st-toolbar__filter-btn {
    height: 54px;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--st-espresso);
    justify-content: center;
    gap: 10px;
    padding: 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
  }
  .st-toolbar__sort {
    height: 54px;
    border-left: 1px solid var(--st-linen);
    justify-content: center;
    gap: 8px;
    padding: 0 8px;
    margin: 0;
  }
  /* The label carries the word "Sort:" so the control reads as one phrase. */
  .st-toolbar__sort label { font-size: 15px; font-weight: 500; letter-spacing: normal; text-transform: none; }
  .st-toolbar__sort select {
    width: auto;
    max-width: 190px;
    height: 54px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 22px 0 0;
    font-size: 15px;
    font-weight: 500;
  }
  /* White cards on cream, not translucent pills on a photograph. */
  .st-subpills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .st-subpill {
    height: 56px;
    box-sizing: border-box;
    border: 1px solid var(--st-linen);
    border-radius: var(--st-radius);
    background: var(--st-white);
    color: var(--st-espresso);
    justify-content: center;
    text-align: center;
    padding: 0 8px;
    font-size: var(--st-label);
    letter-spacing: 0.12em;
  }
  .st-cat-banner__title { font-size: 48px; }
  .st-cat-banner__intro { font-size: var(--st-body); }

  /* The design shows the subcategories as a 2x2 grid of tabs on mobile. */
  .st-subpills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .st-subpill { padding: 0 12px; justify-content: center; text-align: center; font-size: var(--st-eyebrow); letter-spacing: 0.1em; white-space: normal; }

  /* The toolbar is rebuilt as a two-half bar above; it takes no padding or
     gap of its own. Leaving these here re-inflated it to 72px. */
  .st-toolbar__left { gap: 12px; }
  /* No count up here on a phone: the design puts it under the grid, which the
     build already does, and at this width the two overlapped the Filter
     button by 16px. */
  .st-toolbar__count { display: none; }
  .st-toolbar__divider,
  .st-chips,
  .st-toolbar__clear { display: none; }
  .st-toolbar__filter-btn { display: inline-flex; }
  .st-toolbar__filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--st-sage);
    color: var(--st-white);
    font-size: 11px;
  }
  .st-toolbar__sort label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .st-toolbar__sort select { width: 150px; height: var(--st-tap-min); font-size: var(--st-small); }

  .st-archive__body { grid-template-columns: minmax(0, 1fr); padding-top: 24px; }

  /* Filters become a panel that slides up from the bottom. */
  .st-filters {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 10vh;
    z-index: 1000;
    background: var(--st-ivory);
    padding: 0 var(--st-gutter-mobile);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(100%);
    transition: transform 240ms ease;
    display: flex;
  }
  .st-filters.is-open { transform: translateY(0); }
  .st-filters__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(24, 21, 18, 0.5);
    opacity: 0;
    transition: opacity 200ms ease;
  }
  .st-filters__scrim.is-open { opacity: 1; }
  .st-filters__scrim[hidden] { display: none; }
  .st-filters__head {
    position: sticky;
    top: 0;
    background: var(--st-ivory);
    padding-top: 12px;
    z-index: 1;
  }
  .st-filters__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--st-tap-min);
    height: var(--st-tap-min);
    border: 0;
    background: transparent;
    color: var(--st-espresso);
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
  }
  .st-filters__foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    bottom: 0;
    background: var(--st-ivory);
    padding: 16px 0;
    margin-top: auto;
    border-top: 1px solid var(--st-linen);
  }
  body.st-filters-open { overflow: hidden; }


  .st-cat-about { padding: 56px 0; }
  .st-cat-faqs { padding: 56px 0; }
  .st-accordion__body { padding: 0 0 24px; }

  .st-help { padding: 40px 0; }
  .st-help__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .st-help__lead { gap: 16px; align-items: flex-start; }
  .st-help__lead svg { width: 32px; height: 32px; }
  .st-help__title { font-size: 30px; }
  .st-help .st-btn { width: 100%; }
}

/* Said out loud when a price per m² sort narrows the range. */
.st-toolbar__note { font-size: var(--st-small); color: var(--st-taupe); white-space: nowrap; }
@media (max-width: 1024px) { .st-toolbar__note { display: none; } }

/* Touch targets.

   Breadcrumb links and the email in the help strip are inline text, drawn at
   the design's size; they get the transparent 44px hit area on coarse
   pointers rather than being redrawn, the same as T1's sample button.

   The pagination is different: it is the real navigation when JavaScript is
   off, so it is given genuine 44px controls rather than a hit area. */
@media (pointer: coarse) {
  .st-crumbs a,
  .st-help__line a { position: relative; }
  .st-crumbs a::after,
  .st-help__line a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--st-tap-min);
  }
}

.st-pagination ul.page-numbers,
.st-pagination .woocommerce-pagination ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.st-pagination li { list-style: none; margin: 0; }
.st-pagination a.page-numbers,
.st-pagination span.page-numbers {
  min-width: var(--st-tap-min);
  min-height: var(--st-tap-min);
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  box-sizing: border-box;
}

/* Breadcrumb links keep the design's inline size horizontally: widening them
   to 44px would make neighbouring crumbs overlap, which is worse than a
   narrow target. They get the full 44px of height. */

/* The theme pins pagination links to a fixed size through
   `html body .woocommerce .woocommerce-pagination .page-numbers li a`, at
   (0,4,2). Matching that weight is the only way to give them a real 44px
   target for the no-JavaScript case, where this is the only navigation. */
html body .st-pagination .woocommerce-pagination .page-numbers li a,
html body .st-pagination .woocommerce-pagination .page-numbers li span,
html body .st-pagination .page-numbers li a,
html body .st-pagination .page-numbers li span {
  min-width: var(--st-tap-min);
  min-height: var(--st-tap-min);
  width: auto;
  height: auto;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  box-sizing: border-box;
}


/* ============================================================ Design pass */

/* A filter's name is 14px, a step down from the body around it - except in
   the price group, which the design keeps at 15px. */
.st-fopt__label { font-size: 14px; }
.st-fopts--price .st-fopt__label { font-size: 15px; }

@media (max-width: 1024px) {
  .st-subpill { font-size: 13px; letter-spacing: 0.12em; }

  /* "Clear all" beside the applied filters: 12px bronze at 0.14em, not a
     13px espresso button. The secondary one only - unqualified this also
     painted "Show results" bronze on its sage green, at 1.2:1. */
  .st-filters__foot .st-btn--secondary {
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--st-bronze);
  }

  /* The help strip is left aligned on a phone, not centred. */
  .st-help__text { text-align: left; align-items: flex-start; }
  .st-help__title { font-size: 32px; }

  /* Load more runs the full width of the page. */
  .st-loadmore .st-btn { width: 100%; box-sizing: border-box; min-height: 52px; }
}

@media (max-width: 1024px) {
  /* The help strip is heading, line and button stacked at the gutter. The
     icon belongs to the desktop layout, where the text sits beside it. */
  .st-help__lead svg { display: none; }
  .st-help__lead { gap: 0; }
}

/* ============================================================ WP1 */

/* ------------------------------------------- Filter Everything widget */

/* The plugin's widget is rendered through the theme's templates in
   filters/, so its groups are ordinary .st-fgroup blocks. What is left of
   the plugin's own chrome - the sidebar's widget wrapper and title, the
   mobile close bar, the spinner, the admin "edit set" link - has no place in
   the design and is removed here. The plugin's stylesheet and script are not
   loaded on these pages (functions/st-catalog.php). */
.st-filters .widget { margin: 0; padding: 0; border: 0; background: transparent; }
.st-filters .widget > .widget-title,
.st-filters .wpc-filter-set-widget-title,
.st-filters .wpc-widget-close-container,
.st-filters .wpc-filters-widget-top-container,
.st-filters .wpc-spinner,
.st-filters .wpc-filters-widget-controls-container,
.st-filters .wpc-edit-filter-set,
.st-filters .wpc-filters-open-button-container,
.st-filters .wpc-posts-found,
.wpc-filters-overlay { display: none !important; }
.st-filters .wpc-filters-widget-content,
.st-filters .wpc-filters-scroll-container,
.st-filters .wpc-filters-widget-wrapper { display: block; position: static; height: auto; max-height: none; overflow: visible; padding: 0; margin: 0; background: transparent; }
.st-filters__groups { display: flex; flex-direction: column; }
.st-fgroup.is-active .st-fgroup__toggle span:first-child::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 10px;
  border-radius: 50%;
  background: var(--st-sage);
  vertical-align: middle;
}
/* Long lists keep the sidebar usable: the colour grid shows everything, the
   others scroll after about ten rows. */
.st-fopts:not(.st-fopts--swatches) { max-height: 440px; overflow-y: auto; }
.st-fsearch { padding: 4px 0 12px; }
.st-fsearch .st-field { height: 44px; font-size: var(--st-small); }
.st-fopts__empty { margin: 0; padding: 8px 0; font-size: var(--st-small); color: var(--st-taupe); }
.st-fopt[hidden] { display: none; }

/* ------------------------------------------------------------ Notices */

.st-notices { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.st-notices .st-message { gap: 10px; }
.st-notices .st-message a:not(.st-btn) {
  color: var(--st-bronze);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.st-notices .st-message__actions .st-btn--sm { min-height: 40px; }

/* ------------------------------------------------------- Page x of N */

.st-loadmore__page { font-size: var(--st-small); color: var(--st-taupe); }

/* ----------------------------------------------------- Search results */

/* No photograph for a search; the title sits on the page itself, under the
   solid header. */
.st-search-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 56px;
  padding-bottom: 40px;
}
.st-search-head__title {
  margin: 0;
  font-family: var(--st-serif);
  font-weight: 500;
  font-size: var(--st-h1);
  line-height: 1;
  overflow-wrap: anywhere;
}
.st-archive--no-filters .st-archive__body { grid-template-columns: minmax(0, 1fr); }

/* --------------------------------------------------------- Sale badge */

/* The same small sage badge as the home page's "Offers". */
.st-badge--sale { background: var(--st-sage); color: var(--st-white); }

@media (max-width: 1024px) {
  .st-search-head { padding-top: 32px; padding-bottom: 24px; }
  .st-search-head__title { font-size: 40px; }

  /* Applied filters as a scrolling row under the Filter / Sort bar, with
     Clear all at its end, as the mobile design draws them. */
  .st-toolbar { height: auto; grid-template-rows: 54px auto; }
  .st-toolbar__left { display: contents; }
  .st-toolbar__filter-btn { grid-row: 1; grid-column: 1; }
  .st-toolbar__sort { grid-row: 1; grid-column: 2; }
  .st-chips {
    display: flex;
    grid-row: 2;
    grid-column: 1 / -1;
    gap: 8px;
    padding: 10px var(--st-gutter-mobile) 12px;
    border-top: 1px solid var(--st-linen);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .st-chips::-webkit-scrollbar { display: none; }
  .st-chip { background: var(--st-white); }
  .st-toolbar__clear {
    display: inline-flex;
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: end;
    align-self: center;
    margin-right: var(--st-gutter-mobile);
    position: relative;
    z-index: 1;
    background: var(--st-white);
    padding-left: 12px;
    font-size: var(--st-eyebrow);
    letter-spacing: 0.14em;
  }
  .st-chips:not(:empty) { padding-right: 110px; }
  .st-filters__groups { flex-grow: 1; }
  .st-fopts:not(.st-fopts--swatches) { max-height: none; }
}

/* A view with nothing to filter by (a product search) has no Filter button:
   the sort takes the whole bar rather than sitting beside an empty cell. */
@media (max-width: 1024px) {
  .st-archive--no-filters .st-toolbar { grid-template-columns: minmax(0, 1fr); }
  .st-archive--no-filters .st-toolbar__sort { grid-column: 1 / -1; border-left: 0; }
}

/* Desktop filter sidebar scrolls on its own (client request, Oct 2026).
   It is sticky at top: 96px; with eight groups it is taller than the screen,
   so its lower half sat below the fold until the end of the grid. Capping it
   at the viewport lets it scroll independently while it stays pinned. */
@media (min-width: 1025px) {
  .st-filters {
    max-height: calc(100vh - 96px - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--st-linen) transparent;
    padding-right: 8px;
    margin-right: -8px;
  }
  .st-filters::-webkit-scrollbar { width: 6px; }
  .st-filters::-webkit-scrollbar-thumb { background: var(--st-linen); border-radius: 3px; }
}

/* Subcategory buttons on tablets and phones (client feedback, Oct 2026):
   the fixed 56px height left two and three line names touching the border.
   They now grow with the text; 56px stays the minimum. */
@media (max-width: 1024px) {
  .st-subpill {
    height: auto;
    min-height: 56px;
    padding: 10px 12px;
    line-height: 1.35;
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
  }
}