/* ---------------------------------------------------------------
   WooCommerce: shop, archives, single product.

   The governing rule for this catalogue: supplier photography is cut out
   on white, so the card AND the photo area are both pure white, and the
   card is defined against the pale blue-grey page ground plus a hover
   state. Never draw a tinted panel behind a white-background photo, and
   never put this product grid on a dark ground: white cut-outs float as
   bright rectangles and it reads as cheap.
   --------------------------------------------------------------- */

.woocommerce-products-header,
.woocommerce .page-description { max-width: var(--ss-max); margin-inline: auto; }

.woocommerce-result-count { color: var(--ss-muted); font-size: 14px; }
.woocommerce .woocommerce-ordering select {
  font-family: var(--ss-font-body);
  border: 1px solid var(--ss-hair);
  border-radius: var(--ss-radius);
  background: var(--ss-surface);
  padding: 9px 12px;
}

/* ---------- product grid ---------- */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  background: var(--ss-surface);
  border: 1px solid transparent;
  border-radius: var(--ss-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--ss-hair);
  box-shadow: var(--ss-shadow-hover);
  transform: translateY(-2px);
}

/* Photo area: pure white, product contained not cropped, so the mixed
   supplier aspect ratios all sit in an identical box. */
.woocommerce ul.products li.product a img {
  background: #fff;
  width: 100%;
  height: 200px;
  object-fit: contain;
  padding: 16px;
  margin: 0;
  border-bottom: 1px solid #EFF3F6;
  border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ss-font-body) !important;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.42;
  color: var(--ss-ink);
  padding: 14px 16px 0;
  margin: 0;
}
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .ss-card__cat {
  font-family: var(--ss-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ss-muted);
  padding: 14px 16px 0;
}
.woocommerce ul.products li.product .ss-card__foot {
  margin-top: auto;
  padding: 14px 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ss-card__price { font-size: 13.5px; color: var(--ss-muted); font-weight: 500; }

/* No prices yet, so the theme hides Woo's price slot entirely rather than
   letting it render an empty element that collapses the card layout. */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price { display: none; }

/* Enquire replaces add-to-cart while the catalogue is price-less. */
.woocommerce a.button.ss-enquire,
.woocommerce ul.products li.product a.ss-enquire {
  background: var(--ss-yellow);
  color: var(--ss-yellow-ink);
  font-family: var(--ss-font-body);
  font-weight: 700;
  font-size: 12.5px;
  padding: 9px 15px;
  border-radius: var(--ss-radius);
  margin: 0;
  white-space: nowrap;
}
.woocommerce a.button.ss-enquire:hover { background: var(--ss-yellow-dk); color: var(--ss-yellow-ink); }

/* ---------- single product ---------- */
.woocommerce div.product { max-width: var(--ss-max); margin-inline: auto; }
.woocommerce div.product div.images img {
  background: #fff;
  border-radius: var(--ss-radius);
  padding: 24px;
}
.woocommerce div.product .product_title {
  font-family: var(--ss-font-display);
  font-weight: 700;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 17px;
  color: var(--ss-ink);
  max-width: 58ch;
}
.woocommerce div.product .ss-enquire-panel {
  background: var(--ss-surface);
  border: 1px solid var(--ss-hair);
  border-radius: var(--ss-radius);
  padding: 22px 24px;
  margin: 26px 0;
  max-width: 58ch;
}
.woocommerce div.product .ss-enquire-panel p { margin: 0 0 14px; color: var(--ss-muted); }
.woocommerce .product_meta { font-size: 13.5px; color: var(--ss-muted); }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--ss-yellow);
  background: transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--ss-hair); }

/* ---------- category tiles ---------- */
.ss-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.ss-cat {
  background: var(--ss-surface);
  border-radius: var(--ss-radius);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease;
}
.ss-cat:hover { box-shadow: var(--ss-shadow-hover); transform: translateY(-2px); }
.ss-cat__img { aspect-ratio: 2 / 1; overflow: hidden; background: #fff; }
.ss-cat__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A hairline, not a 4px accent stripe. The bar was doing a separating job
   that a rule does just as well, in a shape that reads as stock. */
.ss-cat__rule { height: 1px; background: var(--ss-hair); }
.ss-cat__text {
  padding: 15px 18px 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.ss-cat__text b { font-family: var(--ss-font-display); font-size: 16.5px; font-weight: 700; color: var(--ss-ink); }
.ss-cat__text span { font-size: 13.5px; color: var(--ss-muted); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Woo's own category loop, when used */
.woocommerce ul.products li.product-category a img { height: auto; padding: 0; object-fit: cover; }

/* Cart and checkout are unreachable while there are no prices, but style
   them anyway so nothing looks broken if a link is followed. */
.woocommerce-cart .cart-empty,
.woocommerce-checkout .woocommerce-info { border-top-color: var(--ss-yellow); }

/* ---------- Astra card wrappers ---------- */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap { margin: 0; }
.woocommerce ul.products li.product .astra-shop-summary-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0;
}
.woocommerce ul.products li.product .ast-woo-product-category {
  display: block;
  padding: 14px 16px 0;
}
.woocommerce ul.products li.product .ast-loop-product__link { padding: 0; }
.woocommerce ul.products li.product .astra-shop-summary-wrap .ss-card__foot { margin-top: auto; }

/* Astra's dynamic CSS sets entry-title sizes inline, which outranks an
   external sheet, so the single-product H1 needs matching specificity. */
.woocommerce div.product .product_title.entry-title,
.woocommerce div.product h1.product_title {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.06;
  margin: 6px 0 14px;
}
.woocommerce div.product .ss-single-cat {
  font-family: var(--ss-font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ss-muted);
}
.woocommerce div.product .woocommerce-breadcrumb { font-size: 13.5px; color: var(--ss-muted); margin-bottom: 14px; }
.woocommerce div.product .woocommerce-breadcrumb a { color: var(--ss-muted); }
.woocommerce div.product .woocommerce-breadcrumb a:hover { color: var(--ss-ink); }

/* Reviews are disabled; hide any markup that still renders (Astra prints a
   rating placeholder in some contexts). */
.woocommerce .star-rating,
.woocommerce .woocommerce-product-rating,
.woocommerce #reviews,
.woocommerce #review_form_wrapper,
.woocommerce ul.products li.product .star-rating,
.woocommerce div.product .woocommerce-tabs li.reviews_tab { display: none !important; }

/* ---------------------------------------------------------------
   Catalogue filters
   ---------------------------------------------------------------
   Compact by default: one button, and chips for whatever is already
   chosen. The option panel is a dropdown, so opening it never pushes
   the product grid down the page.
   --------------------------------------------------------------- */
.ss-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 20px;
}

.ss-filters { position: relative; }
.ss-filters__btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--ss-font-body); font-weight: 600; font-size: 14.5px;
  background: var(--ss-surface); color: var(--ss-ink);
  border: 1px solid var(--ss-hair); border-radius: 100px;
  padding: 10px 18px; cursor: pointer; list-style: none;
  white-space: nowrap; transition: border-color .15s ease, box-shadow .15s ease;
}
.ss-filters__btn::-webkit-details-marker { display: none; }
.ss-filters__btn:hover { border-color: var(--ss-ink); }
.ss-filters[open] .ss-filters__btn {
  border-color: var(--ss-ink);
  box-shadow: 0 0 0 3px rgba(240,194,46,.35);
}
.ss-filters__n {
  background: var(--ss-yellow); color: var(--ss-yellow-ink);
  border-radius: 100px; min-width: 20px; text-align: center;
  padding: 1px 7px; font-size: 12.5px; font-weight: 700;
}

/* Dropdown, so opening filters never shoves the grid down. */
.ss-filters__panel {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
  min-width: min(660px, calc(100vw - 2 * var(--ss-gutter)));
  display: grid; gap: 22px 30px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--ss-surface); border: 1px solid var(--ss-hair);
  border-radius: 10px; box-shadow: var(--ss-shadow-hover);
  padding: 22px 24px;
}
.ss-filters__group h3 {
  font-family: var(--ss-font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ss-muted);
  margin: 0 0 8px;
}
.ss-filters__opts { list-style: none; margin: 0; padding: 0; }
.ss-filters__opts a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 9px; border-radius: var(--ss-radius);
  text-decoration: none; font-size: 14.5px; color: var(--ss-ink);
}
.ss-filters__opts a:hover { background: var(--ss-paper); }
.ss-filters__opts a .ss-num { color: var(--ss-muted); font-size: 12.5px; }
.ss-filters__opts a.is-on { background: var(--ss-yellow); font-weight: 600; }
.ss-filters__opts a.is-on .ss-num { color: var(--ss-yellow-ink); }

/* Chips: what is on, removable, always visible with the panel shut. */
.ss-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.ss-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ss-yellow); color: var(--ss-yellow-ink);
  border-radius: 100px; padding: 8px 12px 8px 15px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.ss-chip:hover { background: var(--ss-yellow-dk); color: var(--ss-yellow-ink); }
.ss-chip__x { font-size: 15px; line-height: 1; opacity: .65; }
.ss-chip:hover .ss-chip__x { opacity: 1; }
.ss-chips__clear { font-size: 13.5px; font-weight: 600; color: var(--ss-muted); text-decoration: underline; }
.ss-chips__clear:hover { color: var(--ss-ink); }

.ss-result { color: var(--ss-muted); font-size: 14.5px; }
.ss-result strong { color: var(--ss-ink); }
.ss-result__clear { margin-left: 10px; font-weight: 600; font-size: 13.5px; }

@media (max-width: 600px) {
  .ss-filters { position: static; }
  .ss-filters__panel { left: 0; right: 0; min-width: 0; }
}

/* ---------------------------------------------------------------
   Pagination
   ---------------------------------------------------------------
   Astra rendered the current page as black text on a near-black
   fill, so the number you are on was the one you could not read.
   The active page now uses the same yellow as the filter chips, so
   "selected" means one thing across the catalogue.
   --------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination {
  margin: clamp(36px, 5vw, 56px) 0 0;
  padding-top: clamp(28px, 3vw, 36px);
  border-top: 1px solid var(--ss-hair);
  text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  border: 0;
  margin: 0;
  padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
  margin: 0;
  overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--ss-hair);
  border-radius: var(--ss-radius);
  background: var(--ss-surface);
  color: var(--ss-ink);
  font-family: var(--ss-font-body);
  font-weight: 600;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover {
  border-color: var(--ss-ink);
  background: var(--ss-paper);
  color: var(--ss-ink);
}
/* The page you are on, in the brand's selected colour. */
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers.current {
  background: var(--ss-yellow);
  border-color: var(--ss-yellow);
  color: var(--ss-yellow-ink);
}
/* The ellipsis is not a control, so it should not look like one. */
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--ss-muted);
  min-width: 26px;
  padding: 0 4px;
}
.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev {
  background: var(--ss-ink);
  border-color: var(--ss-ink);
  color: #fff;
}
.woocommerce nav.woocommerce-pagination ul li a.next:hover,
.woocommerce nav.woocommerce-pagination ul li a.prev:hover {
  background: var(--ss-yellow);
  border-color: var(--ss-yellow);
  color: var(--ss-yellow-ink);
}

/* ---------------------------------------------------------------
   Product cards on a phone
   ---------------------------------------------------------------
   Two cards across leaves 166px per card. "Price on request" was being
   squeezed into 48px of that - three wrapped lines, 65px tall - to sit
   beside a 76px button, and the card foot cost 95px to say nothing.

   The words carry no information while the catalogue is price-less, so
   below the breakpoint they go and the button takes the whole width.
   That is also the larger tap target, which is the right trade on the
   device where the button is tapped with a thumb.
   --------------------------------------------------------------- */
@media (max-width: 780px) {
  .woocommerce ul.products li.product .ss-card__price { display: none; }

  .woocommerce ul.products li.product .ss-card__foot {
    display: block;
    padding: 12px 14px 14px;
  }
  .woocommerce ul.products li.product a.ss-enquire {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    padding: 12px 14px;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 12px 14px 0;
  }
  .woocommerce ul.products li.product .ast-woo-product-category,
  .woocommerce ul.products li.product .ss-card__cat {
    font-size: 11.5px;
    padding: 14px 14px 0;
  }
}

/* ---------------------------------------------------------------
   The enquiry list
   ---------------------------------------------------------------
   A parent shopping a Grade 1 list needs twenty-odd items, so the
   catalogue builds one list and sends one enquiry. These are the
   two surfaces that makes visible: the running tally that follows
   you around the shop, and the editable list on the enquiry page.
   --------------------------------------------------------------- */

/* Added-state on the card and product-page buttons. */
.woocommerce a.button.ss-enquire.is-added,
.ss-btn.ss-enquire.is-added {
  background: var(--ss-ink);
  color: #fff;
}

.ss-panel__review {
  display: inline-block;
  margin-left: 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ss-muted);
}
.ss-panel__review:hover { color: var(--ss-yellow-dk); }

/* ---------- the running tally ----------
   Bottom left, because Astra's scroll-to-top owns the bottom right.
   Hidden entirely while the list is empty: an empty basket is not
   something a parent should have to look at or dismiss. */
.ss-listpill {
  position: fixed;
  left: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ss-yellow);
  color: var(--ss-yellow-ink);
  font-family: var(--ss-font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 20px 12px 14px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(18,23,28,.16), 0 14px 30px -12px rgba(18,23,28,.5);
}
.ss-listpill:hover { background: var(--ss-yellow-dk); color: var(--ss-yellow-ink); }
.ss-listpill[hidden] { display: none; }
.ss-listpill__n {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--ss-ink);
  color: #fff;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* ---------- the list on the enquiry page ---------- */
.ss-form__list { margin-bottom: 26px; }
.ss-form__item-label {
  display: block;
  font-family: var(--ss-font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ss-muted);
  margin-bottom: 10px;
}

.ss-items__empty {
  margin: 0;
  padding: 16px 18px;
  background: var(--ss-paper);
  border-radius: var(--ss-radius);
  color: var(--ss-muted);
  font-size: 15.5px;
}

.ss-items__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--ss-ink);
  font-family: var(--ss-font-display);
  font-weight: 600;
  font-size: 14px;
}
.ss-items__clear {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--ss-font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ss-muted);
  text-decoration: underline;
  cursor: pointer;
}
.ss-items__clear:hover { color: var(--ss-ink); }

.ss-items { list-style: none; margin: 0; padding: 0; }
.ss-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--ss-hair);
}
.ss-item__name { font-size: 15.5px; line-height: 1.35; }
.ss-item__sku {
  display: block;
  font-size: 12px;
  color: var(--ss-muted);
  letter-spacing: .04em;
}
.ss-item__qty input {
  width: 100%;
  padding: 8px 6px 8px 10px;
  border: 1px solid var(--ss-hair);
  border-radius: var(--ss-radius);
  font-family: var(--ss-font-body);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  background: #fff;
  color: var(--ss-ink);
}
.ss-item__x {
  background: none;
  border: 0;
  padding: 6px 2px;
  font-family: var(--ss-font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ss-muted);
  text-decoration: underline;
  cursor: pointer;
}
.ss-item__x:hover { color: var(--ss-cut, #B3261E); }

@media (max-width: 560px) {
  /* The remove control moves under the name so the quantity box keeps a
     usable width rather than being squeezed to three columns on a phone. */
  .ss-item { grid-template-columns: minmax(0, 1fr) 82px; row-gap: 4px; }
  .ss-item__x { grid-column: 1 / -1; justify-self: start; padding-top: 0; }
  .ss-listpill { font-size: 14.5px; padding: 11px 18px 11px 12px; }
}