/*
 * Shop filter column.
 *
 * Two columns: a fixed-width filter rail and the product grid. The rail's width
 * is Appearance → Shop → "Filter column width".
 */

.bp-shoplay {
  --bp-flt-w: 260px;
  --bp-flt-rule: #e5e7eb;
  --bp-flt-fg: #43454b;
  --bp-flt-size: 16px;

  display: grid;
  grid-template-columns: var(--bp-flt-w) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  /* Full-bleed: the rail sits against the viewport edge rather than inside a
     centred container, so the filters start at the very left of the screen. */
  max-width: none;
  margin-inline: 0;
  padding-inline: 0 1.5rem;
  font-family: var(--oxa-font-sans);
}
/* min-width:0 keeps a wide product grid from pushing the rail off-screen. */
.bp-shoplay__main { min-width: 0; }

/* ---------- Price slider ---------- */
/* The slider block is 57.9px tall; 24px beneath it makes the price section 81.9px,
   which with eight 40.8px rows gives the reference rail its 408.3px. */
.bp-filters__price { margin-bottom: 24px; }

.bp-filters__slider {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
}
.bp-filters__track,
.bp-filters__range {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--bp-flt-rule);
  pointer-events: none;
}
/* The selected span, sized by the JS from the two inputs. */
.bp-filters__range { background: #111111; right: auto; }

/* Both inputs sit on top of each other; the track is drawn above, so only the
 * thumbs need to be visible and only they may receive the pointer. */
.bp-filters__thumb {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  height: 18px;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
  z-index: 2;
}
.bp-filters__thumb:focus { outline: none; }
.bp-filters__thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 0;
  background: #111111;
  cursor: pointer;
  pointer-events: auto;
}
.bp-filters__thumb::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 0;
  background: #111111;
  cursor: pointer;
  pointer-events: auto;
}
.bp-filters__thumb:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.25); }
.bp-filters__thumb:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.25); }
.bp-filters__thumb::-moz-range-track { background: none; }

.bp-filters__price-label {
  margin: 0.875rem 0 0;
  font-size: var(--bp-flt-size);
  color: var(--bp-flt-fg);
}
.bp-filters__price-label .amount { color: inherit; }

/* ---------- Scrollbars, everywhere in the rail ----------
 *
 * A 4px black hairline on nothing. Black because it is the rail's only accent
 * colour; thin because the page itself scrolls whenever the pointer is outside
 * the box, so a group's bar says "there is more below" rather than being the
 * primary way to move. A full-weight browser scrollbar inside a 234px rail read
 * as a second scroll region competing with the page.
 *
 * Written once for the rail and everything inside it rather than per element.
 * Two things scroll here today — an open group's list and, on a short window,
 * the sticky rail itself — and a third would otherwise get the native widget and
 * look like a different site.
 *
 * The `-button` rules are the arrows. Styling any WebKit scrollbar part opts the
 * whole widget out of the native one, and the browser then draws stepper arrows
 * at both ends; there is no way to keep a custom bar and native ends. The bare
 * pseudo-element is enough on current Chrome, but the four directional variants
 * are spelled out because some builds match only those, and an unstyled arrow is
 * exactly what this is here to remove.
 *
 * `scrollbar-width` / `scrollbar-color` cover Firefox and current Chrome; the
 * `::-webkit-` rules cover Safari, which still ignores them. */
.bp-filters,
.bp-filters * {
  scrollbar-width: thin;
  scrollbar-color: #111111 transparent;
}
.bp-filters::-webkit-scrollbar,
.bp-filters *::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.bp-filters::-webkit-scrollbar-track,
.bp-filters *::-webkit-scrollbar-track {
  background: transparent;
}
.bp-filters::-webkit-scrollbar-thumb,
.bp-filters *::-webkit-scrollbar-thumb {
  background: #111111;
  border-radius: 2px;
}
.bp-filters::-webkit-scrollbar-corner,
.bp-filters *::-webkit-scrollbar-corner {
  background: transparent;
}
.bp-filters::-webkit-scrollbar-button,
.bp-filters *::-webkit-scrollbar-button,
.bp-filters::-webkit-scrollbar-button:vertical:start:decrement,
.bp-filters *::-webkit-scrollbar-button:vertical:start:decrement,
.bp-filters::-webkit-scrollbar-button:vertical:end:increment,
.bp-filters *::-webkit-scrollbar-button:vertical:end:increment,
.bp-filters::-webkit-scrollbar-button:horizontal:start:decrement,
.bp-filters *::-webkit-scrollbar-button:horizontal:start:decrement,
.bp-filters::-webkit-scrollbar-button:horizontal:end:increment,
.bp-filters *::-webkit-scrollbar-button:horizontal:end:increment {
  display: none;
  width: 0;
  height: 0;
}

/* ---------- Groups ---------- */
.bp-filters__group { border-bottom: 1px solid var(--bp-flt-rule); }

.bp-filters__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Reference rail: each group row measures 40.8px. 8px of padding top and
     bottom against a 16px/1.55 line box (24.8px) lands exactly there, so the
     spacing between two filter labels is the 40.8px pitch and nothing else. */
  padding: 8px 0;
  line-height: 1.55;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--bp-flt-size);
  color: var(--bp-flt-fg);
  text-align: left;
  cursor: pointer;
}
.bp-filters__title { flex: 1; }

/* ---------- The dot ----------
 *
 * Two states, one element: absent, or there and pinging. The ping runs whether
 * the filter is merely picked (.is-pending) or already applied (.is-on) — the
 * distinction is still in the markup, but it no longer changes what you see,
 * because the effect is the point.
 *
 * The ping is the reference's `animate-ping`, written out: the dot comes up
 * grey, hardens to black, then swells and fades away, over and over. */
.bp-filters__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ca3af;
  flex-shrink: 0;
  opacity: 0;
}
.bp-filters__dot.is-on,
.bp-filters__dot.is-pending {
  opacity: 1;
  animation: bp-dot-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes bp-dot-ping {
  0%   { transform: scale(1);    opacity: 1; background: #9ca3af; }
  45%  { transform: scale(1);    opacity: 1; background: #111111; }
  100% { transform: scale(1.35); opacity: 0; background: #111111; }
}
/* Same beat against the black button, in white — a black dot on a black
 * button is a dot nobody sees. */
@keyframes bp-dot-ping-light {
  0%   { transform: scale(1);    opacity: 1; background: #9ca3af; }
  45%  { transform: scale(1);    opacity: 1; background: #ffffff; }
  100% { transform: scale(1.35); opacity: 0; background: #ffffff; }
}

@media (prefers-reduced-motion: reduce) {
  /* Still says "something is here", without the movement. */
  .bp-filters__dot.is-on,
  .bp-filters__dot.is-pending { animation: none; background: #111111; }
  .bp-filters__submit .bp-filters__dot.is-on,
  .bp-filters__submit .bp-filters__dot.is-pending { background: #ffffff; }
}

.bp-filters__arrow {
  display: inline-flex;
  color: #6b7280;
  transition: transform 0.2s ease;
}
/* Closed points right, open points down — the arrow itself is drawn pointing
 * right, so opening is a quarter turn. */
.bp-filters__head[aria-expanded="true"] .bp-filters__arrow { transform: rotate(90deg); }

.bp-filters__body { padding-bottom: 0.75rem; }
.bp-filters__list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* An open group is a 200px box that scrolls inside itself — the reference
   * storefront's facet list measures 234 × 200 and this matches it. Without the
   * cap, opening Brendet pushes every group below it off the screen.
   *
   * The bar is a 4px black hairline on nothing — black because it is the rail's
   * only accent colour, thin because the page itself scrolls whenever the
   * pointer is anywhere outside this box, so the group's bar says "there is more
   * below" rather than being the primary way to move. A full-weight browser
   * scrollbar inside a 234px rail read as a second scroll region competing with
   * the page, which is what it looked like before. Both declarations are needed:
   * `scrollbar-*` covers Firefox and current Chrome, the `::-webkit-` rules
   * cover Safari, which still ignores them. */
  max-height: 200px;
  /* Vertical only. With `overflow-y: auto` alone the x axis computes to `auto`
   * too, so the moment the vertical bar appears it narrows the box, the sizes
   * grid overflows by a hair, and a horizontal bar flashes under the group's
   * button before layout settles. */
  overflow-x: hidden;
  overflow-y: auto;
}

/* The row is what contains its own hidden checkbox.
 *
 * The input below is `position: absolute` with no offsets, so it stays at its
 * static position — but its containing block is the nearest positioned
 * ancestor, and the rail is `position: sticky`, which is positioned. So every
 * checkbox in a scrolled-away part of an open group was being laid out against
 * the rail instead of against its row, inflating the rail's own scrollHeight to
 * roughly twice its content and giving it a long phantom scrollbar next to the
 * group's real one. One `relative` here keeps each input inside its own row. */
.bp-filters__option { position: relative; }

.bp-filters__option label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.45rem 0 0.45rem 0.875rem;
  border-left: 2px solid transparent;
  font-size: 15px;
  color: var(--bp-flt-fg);
  text-transform: uppercase;
  cursor: pointer;
}
.bp-filters__option:hover label { color: #111111; }
/* .is-checked is the server's word for "this is applied". Since a tick now
 * only stages a choice, the marker has to follow the live control as well,
 * otherwise a box can be ticked with nothing to show for it until the page
 * reloads. Both selectors, not one: the class covers the applied state after a
 * reload, :has() covers the pending state before one. */
.bp-filters__option.is-checked label,
.bp-filters__option:has( input:checked ) label { border-left-color: #111111; color: #111111; }

/* No box — the bar down the left and the darker text say which values are on,
 * the way the reference does it. Hidden rather than removed: the input is what
 * carries the value into the query string, what a keyboard toggles with Space,
 * and what a screen reader announces. `position: absolute` also takes it out of
 * the label's flex flow, so no gap is left where it used to sit. */
.bp-filters__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
/* The focus ring has to move to the label, or tabbing through the list lands on
 * something nobody can see. */
.bp-filters__option:has( input:focus-visible ) label {
  outline: 2px solid #111111;
  outline-offset: 2px;
}

/* ---------- Sizes: a grid of numbers, not a stack of rows ----------
 *
 * Every other group holds words, so a row per value reads well. Sizes are one
 * to four characters, which made a 16-row column out of what the reference
 * shows as a small block of tiles. Both spellings of the group are covered:
 * this build's attribute is `pa_size`, production's is `pa_size_instock`, and
 * whichever exists answers to both parameters.
 *
 * auto-fill rather than a fixed five columns: the same list renders in the
 * 234px rail and in the wider off-canvas panel on a phone, and the number of
 * columns should follow the room available.
 *
 * The left bar that marks an applied value elsewhere has nothing to sit against
 * here, so an applied size takes the black tile the product page's size swatch
 * uses when it is chosen — the same signal in the same place in the funnel. */
.bp-filters__group--size .bp-filters__list,
.bp-filters__group--size_instock .bp-filters__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 6px;
  padding: 0.25rem 0 0.5rem;
}
.bp-filters__group--size .bp-filters__option label,
.bp-filters__group--size_instock .bp-filters__option label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.25rem;
  border-left: 0;
  border-radius: 2px;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.bp-filters__group--size .bp-filters__option.is-checked label,
.bp-filters__group--size .bp-filters__option:has( input:checked ) label,
.bp-filters__group--size_instock .bp-filters__option.is-checked label,
.bp-filters__group--size_instock .bp-filters__option:has( input:checked ) label {
  background: #111111;
  color: #ffffff;
  border-left: 0;
}

/* ---------- Apply / clear ---------- */
/* 8px of padding against a 16px/1.6 line gives the reference's 41.6px — it is
 * a shorter, wider button than the one that was here. */
.bp-filters__submit {
  width: 100%;
  margin-top: 1.5rem;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  background: #8a8a8a;
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
/* Black once something is applied, matching the reference's "there is a filter
 * on" state — and equally once something is merely ticked, because the button
 * is the only way to apply it now and a grey button reads as "nothing to do
 * here". */
.bp-filters__submit.is-active,
.bp-filters__form:has( .bp-filters__option input:checked ) .bp-filters__submit { background: #111111; }
.bp-filters__submit:hover { background: #3d3d3d; }
.bp-filters__submit .bp-filters__dot { background: #ffffff; }
.bp-filters__submit .bp-filters__dot.is-pending { animation-name: bp-dot-ping-light; }
/* The button's dot means "there is something to press me for", so it shows
 * only while a change is waiting. Once the grid matches the rail there is
 * nothing to do and the button says so by going quiet — unlike the group dots,
 * which go on marking which groups are contributing to the results. */
.bp-filters__submit .bp-filters__dot.is-on { opacity: 0; animation: none; }
.bp-filters__submit.is-busy { opacity: 0.75; cursor: progress; }

.bp-filters__clear {
  display: block;
  margin-top: 0.75rem;
  font-size: 14px;
  color: #6b7280;
  text-align: center;
}
.bp-filters__clear.is-hidden { display: none; }

/* ---------- Active filter chips ---------- */
.bp-shop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.bp-shop-chips__chip {
  display: inline-flex;
  align-items: baseline;
  /* 8px, the reference's spacing between the group name and its value — stated
   * on the row so the × picks it up too, instead of a margin on one child. */
  gap: 8px;
  font-size: 15px;
  color: #6b7280;
  text-decoration: none;
}
/* The group name carries the chip: 18px semibold black against the value's
 * 14px #43454B, both measured off the reference. */
.bp-shop-chips__group {
  font-size: 18px;
  font-weight: 600;
  color: #000000;
}
.bp-shop-chips__value {
  font-size: 14px;
  color: #43454b;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
}

/* A chip for a choice that is ticked but not yet applied. Same shape as an
 * applied one — it is answering "what did I just pick?" — but it is a button,
 * not a link: there is no URL to go to yet, and pressing its × unticks the box
 * it came from. */
.bp-shop-chips__chip--pending {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.bp-shop-chips__chip--pending .bp-shop-chips__value { border-bottom-style: dashed; }

/* The grid dims while the new one is on its way. */
.bp-shoplay__main.is-loading ul.products,
.bp-shoplay__main.is-loading .bp-no-products {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.bp-shop-chips__chip:hover { color: #111111; }

/* ---------- Product grid ----------
 * bp-shop.css pins the grid to four columns with !important. Honour the
 * "Products per row" setting instead, by matching on the columns-N class
 * WooCommerce puts on the list. */
.bp-shoplay ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.bp-shoplay ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.bp-shoplay ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.bp-shoplay ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.bp-shoplay ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

/* The rail takes 260px out of the row, so the grid steps down earlier than an
 * ordinary full-width one would.
 *
 * The [class*="columns-"] is load-bearing, not decoration: it outweighs the
 * .columns-N rules above, which would otherwise win on specificity at every
 * width and pin the grid to whatever the setting says. */
@media (max-width: 1200px) {
  .bp-shoplay ul.products[class*="columns-"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  .bp-shoplay ul.products[class*="columns-"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* Phones stay at two per row rather than dropping to one.
 *
 * The ≤520px single-column rule that used to be here made the shoe photographs
 * enormous and pushed the grid to roughly one product per screen; the reference
 * keeps two columns all the way down. Card contents already ellipsize, so the
 * narrower cell costs nothing. */

/* ---------- Pagination ----------
 * 1350 products is 57 pages, and the row of numbers is wider than a phone.
 * bp-shop.css sets inline-flex with no wrapping, which pushed the whole
 * document 32px wide at 390px; this lets it wrap instead. */
.bp-shoplay nav.woocommerce-pagination ul {
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

/* ---------- Sort control ----------
 * One control, sitting at the right edge of the product column, level with the
 * top of the grid. bp-shop.css lays the toolbar out as a two-column
 * space-between row with a caption above each control; with the filter pills
 * now living in the sidebar, the sort select is the toolbar's only child, and
 * space-between parks a lone child on the left. margin-left:auto pushes it over.
 *
 * The pill shape belonged to the old filter row. On its own the control reads
 * as a field, so it takes a field's shape: square corners, a hairline border,
 * and text at the size of the rest of the page. */
.bp-shoplay .bp-shop-toolbar {
  justify-content: flex-end;
  margin-bottom: 1.75rem;
}
.bp-shoplay .bp-shop-toolbar__col--right {
  margin-left: auto;
  align-items: flex-end;
}

.bp-shoplay .woocommerce-ordering select.orderby {
  min-width: 310px;
  padding: 0.85rem 3rem 0.85rem 1.15rem;
  border: 1px solid #d5d7dd;
  border-radius: 2px;
  font-size: 17px;
  font-weight: 400;
  color: #43454b;
  /* A 12px chevron looked like a typo against 17px text. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2343454b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right 1rem center;
}
.bp-shoplay .woocommerce-ordering select.orderby:focus {
  border-color: #43454b;
}

/* ---------- Product card ----------
 * The card is the product, not a panel containing it: no border, no radius,
 * no fill. bp-shop.css draws all three and bp-flow-fix.css centres the text,
 * both with !important, so undoing them takes the same weight here. This file
 * is the last stylesheet on an archive, so these win on order. */
.bp-shoplay ul.products li.product,
.woocommerce .bp-shoplay ul.products li.product {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  text-align: left !important;
  align-items: stretch !important;
}

/* The padding existed to keep the shoe off the border. With no border there is
 * nothing to keep it off, and the image can run the full column width. */
.bp-shoplay ul.products li.product a img,
.woocommerce .bp-shoplay ul.products li.product a img {
  padding: 0 !important;
  /* A fixed height plus object-fit:contain letterboxed every shot: the source
     images are square, so a 311x260 box rendered them 260 wide with ~25px of
     dead space each side. A square cell at the column width lets the image run
     edge to edge, and cover keeps a non-square upload from leaving gaps. */
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover !important;
}

/* ---------- Card meta ----------
 * Brand and category in place of the model number, on one line: brand at the
 * body size, category smaller and lighter beside it, price underneath. */
.bp-shoplay .bp-card-meta,
.woocommerce .bp-shoplay ul.products li.product .bp-card-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
  margin: 0.75rem 0 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  text-align: left !important;
  line-height: 1.4 !important;
}
.bp-shoplay .bp-card-meta__brand {
  font-size: 18px;
  font-weight: 400;
  color: #000000;
  text-transform: uppercase;
}
.bp-shoplay .bp-card-meta__cat {
  /* Always on its own line under the brand, whatever the category's length:
   * flex-basis 100% breaks it onto the next row of the wrapping flex line. */
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: #6b7280;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---------- Card price ---------- */
.bp-shoplay ul.products li.product .price,
.woocommerce .bp-shoplay ul.products li.product .price {
  margin: 0.35rem 0 0 !important;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #43454B !important;
  text-align: left !important;
}
.bp-shoplay ul.products li.product .price del {
  font-size: 14px !important;
}

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .bp-shoplay {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding-inline: 1rem;
  }
  /* The rail becomes a block above the grid. The existing mobile filter drawer
   * covers phones, so this only has to be tidy, not clever. */
  .bp-filters { order: -1; }
}

/* ══════════════════════════════════════════════════════
 * Filter rail — 234px and sticky.
 *
 * The rail stays with the shopper while the grid scrolls past it. `top` clears
 * the header when it is pinned; the header hides itself on scroll-down, so the
 * offset only matters on the way back up.
 * ══════════════════════════════════════════════════════ */
.bp-shoplay { --bp-flt-w: 234px; }

@media (min-width: 901px) {
  .bp-shoplay .bp-filters {
    position: sticky;
    /* A small offset, not a header's height: nothing is pinned above it. The
     * headroom script bails immediately because the .bp-header-nav element it
     * looks for does not exist in header.php, so the header simply scrolls
     * away. A 96px gap here was reserving room for a bar that never arrives. */
    top: 1.5rem;
    align-self: start;
    /* Long filter lists must scroll inside the rail rather than run past the
     * bottom of the screen, or the last group becomes unreachable. */
    max-height: calc(100vh - 3rem);
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* ---------- Sort control, to the reference's measurements ----------
 * 250 × 41.6, 16px #43454B on white, padding 8px 40px 8px 12px — the 40px on
 * the right is the room the chevron sits in. Restated here rather than edited
 * into the block above because that one sets a 310px minimum and a larger
 * font, and both have to be overridden, not just widened. */
.bp-shoplay .woocommerce-ordering select.orderby {
  width: 250px;
  min-width: 250px;
  max-width: 100%;
  height: 41.6px;
  padding: 8px 40px 8px 12px;
  font-size: 16px;
  color: #43454b;
  background-color: #ffffff;
  background-position: right 12px center;
}

/* ---------- Infinite scroll ---------- */
.bp-shoplay .bp-infinite-status {
  grid-column: 1 / -1;
  padding: 2.5rem 0 1rem;
  text-align: center;
  font-size: 16px;
  color: #6b7280;
}
.bp-shoplay nav.woocommerce-pagination.is-hidden { display: none !important; }

/* "Shfaq produktet e mëparshme" — above the grid when it starts past page one.
 * The filter button's black, at the sort control's height. */
.bp-shoplay .bp-infinite-prev {
  display: block;
  grid-column: 1 / -1;
  min-height: 41.6px;
  margin: 0 auto 1.5rem;
  padding: 8px 24px;
  border: 0;
  background: #111111;
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 600;
  cursor: pointer;
}
.bp-shoplay .bp-infinite-prev:hover { background: #3d3d3d; }
.bp-shoplay .bp-infinite-prev.is-busy { opacity: 0.75; cursor: progress; }
@media (max-width: 767px) {
  .bp-shoplay .bp-infinite-prev { width: 100%; }
}

/* ══════════════════════════════════════════════════════
 * Phones (≤767px) — the same breakpoint the off-canvas filter
 * panel uses, so the bar and these rules turn on together.
 * ══════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* No chips.
   *
   * On a phone the applied filters were three stacked rows of
   * "Brendi: AMBITIOUS ×" above the grid — a fifth of the screen spent
   * repeating what the bar right below already says as "Filtro (3)", and the
   * products pushed down for it. Removing a single value is still one tap
   * away: the panel opens on that count and every ticked box is in it.
   *
   * Hidden rather than not rendered: the desktop rail has no such counter, so
   * the chips are the only applied-state readout there, and bp-shop-filters.js
   * reconciles the block on every apply. Dropping it server-side would mean
   * teaching both about a viewport they cannot see. */
  .bp-shop-chips { display: none; }

  /* 18px is the desktop card's brand size and it crowds a two-up phone grid,
   * where the cards are barely wider than the word. 16px is the body size the
   * rest of the phone layout is set in. */
  .bp-shoplay .bp-card-meta__brand { font-size: 16px; }
}