/*
 * Shop / category page: head, subcategory nav, toolbar.
 *
 * Loaded after bp-shop.css so these win the source-order ties against the
 * inherited shop styling they replace. Named nesa-* like nesa-card.css and
 * nesa-rail.css — the bp-* files are the previous build being migrated out.
 */

/* ── Head ──────────────────────────────────────────────────────────────── */

.nesa-shophead {
  /* 16–24px above the eyebrow, down from 32–56px. The header's own bottom
   * hairline already separates it from the page, so the title does not need to
   * be pushed far down to read as a new section. The bottom padding stays
   * larger than the top, so the title groups with its subcategory row rather
   * than floating between the header and the grid. */
  padding-block: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 2rem);
  text-align: center;
}

.nesa-shophead__eyebrow {
  margin: 0 0 var(--oxa-space-2);
  font-family: var(--nesa-font-sans);
  font-size: var(--oxa-fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--nesa-track-wide);
  color: var(--nesa-ink-soft);
}

.nesa-shophead__title {
  margin: 0;
  font-family: var(--nesa-font-serif);
  /* 40px, per the client — "Kategoritë" on the shop root and the category
   * names render at the same size and colour. */
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--nesa-ink);
}

/* ── Subcategory nav ───────────────────────────────────────────────────── */

/*
 * Plain text links, centred, wrapping freely — the Lindex treatment.
 *
 * Not boxed pills: Brusa has nine children and Fantazi thirteen, and at that
 * count a row of outlined pills wraps into a dense block that competes with the
 * product grid for attention.
 */
.nesa-shopnav {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.nesa-shopnav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  /* Row gap smaller than column gap: wrapped lines should read as one block,
   * not as separate rows of links. */
  /* Boxes need less air between them than bare text did — the borders already
   * separate them. */
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Bordered buttons, not text links.
 *
 * An earlier pass had these as plain wrapping text (the Lindex treatment); the
 * reference for this build boxes them, with the active one filled in cream. The
 * box also gives the row a much larger hit target than an 18px-tall text link.
 */
.nesa-shopnav__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: 1.125rem;
  /* Soft light fill instead of a bordered white box, and 15px instead of the
   * 13px that read as fine print (client ask). */
  border: 1px solid transparent;
  border-radius: var(--nesa-radius-btn, 6px);
  background: #f6f5f3;
  font-family: var(--nesa-font-sans);
  font-size: 0.9375rem;
  color: var(--nesa-ink);
  white-space: nowrap;
  transition: border-color var(--oxa-dur) var(--oxa-ease),
              background var(--oxa-dur) var(--oxa-ease);
}
.nesa-shopnav__link:hover {
  /* A soft hairline, not the harsh ink edge — hover should whisper. */
  border-color: #d9d5d0;
  background: var(--nesa-cream);
}

/* Current: cream fill with an ink edge, so it reads as pressed rather than
 * merely hovered. */
.nesa-shopnav__link.is-current {
  background: var(--nesa-cream);
  border-color: var(--nesa-ink);
}

/* ── Toolbar ───────────────────────────────────────────────────────────── */

/*
 * Count on the left, controls on the right, hairline underneath.
 *
 * The inherited toolbar labelled each control ("Filtro:", "Rendit sipas:") and
 * left-aligned both groups. The reference puts the count opposite the controls
 * with the labels inside them.
 */
.bp-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oxa-space-4);
  flex-wrap: wrap;
  margin: 0;
  /* Horizontal padding so the first control and the sort select are not flush
   * against the page edge — the toolbar reported `padding: 16px 0` and its
   * controls sat on the same line as the card edges. */
  padding: var(--oxa-space-3) var(--nesa-gutter);
}

/* The "Filtro:" / "Rendit sipas:" prefixes are inside the controls now. */
.bp-shop-toolbar__label { display: none; }

/* The left column holds the count and the filter buttons on one line. */
.bp-shop-toolbar__col {
  display: flex;
  align-items: center;
  gap: var(--oxa-space-3);
  margin: 0;
  min-width: 0;
}
.bp-shop-toolbar__col--right { margin-left: auto; }

.bp-shop-toolbar__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--oxa-space-2);
}

/* Result count: "41 PRODUKTE", number in ink, word in grey. */
.woocommerce-result-count,
.bp-shop-count {
  margin: 0;
  font-family: var(--nesa-font-sans);
  font-size: var(--oxa-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--nesa-track-ui);
  color: var(--nesa-ink-soft);
}
.woocommerce-result-count strong,
.bp-shop-count strong { color: var(--nesa-ink); font-weight: 600; }

/* Square bordered controls, uppercase and tracked — matching the buttons the
 * rest of the site uses rather than the inherited pills. */
.bp-filter__toggle,
.bp-filter-apply,
.bp-mfilter__open,
.woocommerce-ordering select.orderby {
  /* inline-flex, or the label and the chevron stack: the button is a <button>
   * wrapping a span, an optional badge and an svg, and its display came from
   * the inline <style> block that has since been deleted. */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* 38px, down from 44. These are secondary controls sitting above the grid;
   * at 44px with uppercase tracking they carried more weight than the product
   * cards they filter. */
  height: 38px;
  padding-inline: 0.875rem;
  border: 1px solid var(--nesa-line);
  border-radius: var(--nesa-radius-btn, 6px);
  background: var(--nesa-bg);
  color: var(--nesa-ink);
  font-family: var(--nesa-font-sans);
  font-size: var(--oxa-fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--nesa-track-ui);
  cursor: pointer;
  transition: border-color var(--oxa-dur) var(--oxa-ease);
}
.bp-filter__toggle:hover,
.bp-filter-apply:hover,
.bp-mfilter__open:hover,
.woocommerce-ordering select.orderby:hover { border-color: var(--nesa-ink); }

/* The apply button is the one solid control in the row. */
.bp-filter-apply {
  background: var(--nesa-ink);
  border-color: var(--nesa-ink);
  color: #fff;
}
.bp-filter-apply:hover { background: #000; border-color: #000; }

/* Count badge on the filter trigger. */
/*
 * The tally reads as plain "(2)", not a filled chip.
 *
 * `color: inherit` is what makes one rule work on both button styles: ink on
 * the white filter buttons, white on the ink-filled Filtro button — so no
 * white background is needed to sit on the dark one.
 *
 * The brackets are ::before/::after rather than part of the text, so the live
 * counter in inc/b2b-shop.php can keep writing a bare number.
 */
.bp-filter__badge,
.bp-mfilter__badge,
.bp-filter-apply__count {
  /* No margin: the toggle is a flex row with gap 0.5rem, so spacing is already
   * handled — and it stays equal to the gap before the chevron.
   * letter-spacing: normal keeps "(2)" tight; the button's UI tracking would
   * otherwise prise the brackets off the digit. */
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: normal;
}
.bp-filter__badge::before,
.bp-mfilter__badge::before,
.bp-filter-apply__count::before { content: "("; }
.bp-filter__badge::after,
.bp-mfilter__badge::after,
.bp-filter-apply__count::after { content: ")"; }

/*
 * Empty means gone, brackets included: without this an emptied counter would
 * render a bare "()" from the pseudo-elements alone.
 */
.bp-filter__badge:empty,
.bp-mfilter__badge:empty,
.bp-filter-apply__count:empty,
.bp-filter-apply__count[hidden] { display: none; }

/* The panel's own "N të zgjedhura" line: a quiet label, not a badge. */
.bp-filter__count {
  font-family: var(--nesa-font-sans);
  font-size: var(--oxa-fs-xs);
  color: var(--nesa-ink-soft);
  letter-spacing: 0;
  text-transform: none;
}

/* ── Active filter chips ───────────────────────────────────────────────── */

/*
 * Chips sit left-aligned under the toolbar's hairline, as in the reference —
 * not centred. They read as a continuation of the controls above them.
 */
.bp-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oxa-space-2);
  /* Same inset as .bp-shop-toolbar above, so the first chip starts on the
   * same vertical line as the toolbar's first control. */
  padding: var(--oxa-space-3) var(--nesa-gutter);
}

/*
 * Active filters read as quiet TEXT, not buttons (client ask) — the small ×
 * after the label is the only hint each one is removable.
 */
.bp-chip {
  display: inline-flex;
  align-items: center;
  /* The × sits after the label. */
  flex-direction: row-reverse;
  gap: 0.375rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--nesa-ink);
  font-family: var(--nesa-font-sans);
  font-size: var(--oxa-fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--nesa-track-ui);
  white-space: nowrap;
  text-decoration: none;
}
.bp-chip:hover { text-decoration: line-through; }
.bp-chip svg { width: 10px; height: 10px; color: inherit; }

/* "Pastro të gjitha" is a link, not a filled pill. */
/* "Pastro të gjitha" is a link at the end of the row, with no box and no ×. */
.bp-chip--clear {
  flex-direction: row;
  height: auto;
  padding-inline: 0.25rem;
  background: none;
  border: 0;
  color: var(--nesa-ink-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.bp-chip--clear:hover { color: var(--nesa-ink); background: none; border: 0; }
.bp-chip--clear svg { display: none; }

/* ── Grid spacing ──────────────────────────────────────────────────────── */

/* No extra top padding on the grid — the toolbar/chips row above already
 * carries the spacing, and on mobile the 24px read as a bare gap. */
.woocommerce ul.products,
ul.products { padding-top: 0 !important; }

@media (max-width: 600px) {
  .nesa-shopnav__list { gap: 0.625rem 1.25rem; }
  .bp-shop-toolbar { padding-block: var(--oxa-space-2); }
}

/* ── Sort select: its own chevron ───────────────────────────────────────── */

/*
 * `appearance: none` strips the native arrow along with the OS styling, so the
 * select was a bordered box with no affordance that it opened anything. This
 * draws one back as a background SVG — inline, so it needs no extra request and
 * cannot 404. `%23` is the encoded `#` of the stroke colour.
 */
.woocommerce-ordering select.orderby {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23111111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1.75 6 6.25 11 1.75'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
}

/* The form wrapper must not clip the chevron or add its own spacing. */
.woocommerce-ordering { margin: 0; }

/* ── Filter dropdown panels ────────────────────────────────────────────── */

/*
 * All of this was in an inline <style> block printed by inc/b2b-shop.php, which
 * had to go because it forced `border-radius: 9999px` on every control from
 * inside the body, beating this stylesheet on source order. Deleting it took the
 * panel's layout with it, and the options fell back to a bulleted list that
 * pushed the grid down the page. Rewritten here, square, as the rest of the
 * shop chrome is.
 */

.bp-filter {
  position: relative;
  display: inline-block;
}

.bp-filter__chev {
  flex-shrink: 0;
  transition: transform var(--oxa-dur) var(--oxa-ease);
}
.bp-filter__toggle[aria-expanded="true"] .bp-filter__chev { transform: rotate(180deg); }

.bp-filter__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: 300px;
  max-width: min(300px, calc(100vw - 2 * var(--nesa-gutter)));
  padding: 1rem 1.125rem;
  background: var(--nesa-bg);
  border: 1px solid var(--nesa-line);
  box-shadow: 0 12px 30px rgb(0 0 0 / .10);
  text-align: left;
}
/* The attribute alone does not hide it once `position: absolute` is set. */
.bp-filter__panel[hidden] { display: none; }

/* A panel near the right edge opens leftwards instead of off-screen. */
.bp-shop-toolbar__controls > .bp-filter:nth-last-child(2) .bp-filter__panel,
.bp-shop-toolbar__controls > .bp-filter:last-child .bp-filter__panel {
  left: auto;
  right: 0;
}

.bp-filter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--nesa-line);
}

.bp-filter__reset {
  padding: 0;
  border: 0;
  background: none;
  color: var(--nesa-ink-soft);
  font-family: var(--nesa-font-sans);
  font-size: var(--oxa-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--nesa-track-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.bp-filter__reset:hover { color: var(--nesa-ink); }

.bp-filter__list {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Masa carries 43 terms on the shop root; without a cap the panel runs off
   * the bottom of the viewport. */
  max-height: 300px;
  overflow-y: auto;
}
.bp-filter__item { margin: 0; }

.bp-filter__option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0;
  cursor: pointer;
}

/* The native box is hidden but still focusable, so keyboard users keep it. */
.bp-filter__cb {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.bp-filter__box {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--nesa-line);
  background: var(--nesa-bg);
  transition: background var(--oxa-dur) var(--oxa-ease),
              border-color var(--oxa-dur) var(--oxa-ease);
}
.bp-filter__option:hover .bp-filter__box { border-color: var(--nesa-ink); }

.bp-filter__cb:checked + .bp-filter__box {
  background: var(--nesa-ink);
  border-color: var(--nesa-ink);
}
/* The tick: a rotated corner, so it needs no icon font or SVG. */
.bp-filter__cb:checked + .bp-filter__box::after {
  content: "";
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.bp-filter__cb:focus-visible + .bp-filter__box {
  outline: 1px solid var(--nesa-ink);
  outline-offset: 2px;
}

.bp-filter__name {
  font-family: var(--nesa-font-sans);
  font-size: var(--oxa-fs-sm);
  line-height: 1.3;
  color: var(--nesa-ink);
}

/* ── No products found ─────────────────────────────────────────────────── */

/* Also orphaned by the inline-style removal. */
.bp-no-products {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
  text-align: center;
  font-family: var(--nesa-font-sans);
  color: var(--nesa-ink-soft);
}
.bp-no-products__icon { color: var(--nesa-line); }
.bp-no-products__msg { margin: 0; font-size: var(--oxa-fs-lg); color: var(--nesa-ink); }
.bp-no-products__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 1.75rem;
  border: 1px solid var(--nesa-ink);
  background: var(--nesa-ink);
  color: #fff;
  font-size: var(--oxa-fs-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--nesa-track-ui);
}
.bp-no-products__btn:hover { background: #000; color: #fff; }

/* ── Price range slider ────────────────────────────────────────────────── */

/*
 * Two native range inputs stacked on one drawn track.
 *
 * The inputs themselves are transparent and `pointer-events: none`; only their
 * thumbs take pointer events, which is what lets both handles be grabbed even
 * though the second input covers the first. The visible line and the filled
 * segment are separate elements underneath, so no browser's track styling has
 * to be fought.
 */
.bp-range {
  position: relative;
  height: 22px;
  margin-block: 0.5rem 0.25rem;
}

.bp-range__track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background: var(--nesa-line);
}

.bp-range__fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--nesa-ink);
}

.bp-range__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 22px;
  margin: 0;
  padding: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  /* The stacked inputs must not block each other; the thumbs opt back in. */
  pointer-events: none;
}
.bp-range__input:focus { outline: none; }

/* Thumb: the two vendor pseudo-elements cannot be combined in one rule — a
 * selector list containing an unknown pseudo drops the whole rule. */
.bp-range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  background: var(--nesa-ink);
  cursor: grab;
  pointer-events: auto;
}
.bp-range__input::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  background: var(--nesa-ink);
  cursor: grab;
  pointer-events: auto;
}
.bp-range__input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgb(17 17 17 / .18);
}
.bp-range__input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgb(17 17 17 / .18);
}

.bp-range__readout {
  margin: 0;
  font-family: var(--nesa-font-sans);
  font-size: var(--oxa-fs-sm);
  color: var(--nesa-ink-soft);
}
.bp-range__readout span { color: var(--nesa-ink); font-weight: 600; }

/* ── Category links inside a filter panel ──────────────────────────────── */

.bp-filter__link {
  display: block;
  padding: 0.375rem 0;
  font-family: var(--nesa-font-sans);
  font-size: var(--oxa-fs-sm);
  color: var(--nesa-ink);
}
.bp-filter__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bp-filter__link.is-current { font-weight: 600; }

/* ── The inert "all filters" trigger ───────────────────────────────────── */

/*
 * Disabled, not hidden: the reference has this control, so it holds its place
 * in the row while the drawer behind it is still mobile-only. Muted enough that
 * it does not read as an available action.
 */
.bp-filter__toggle--all[disabled] {
  color: var(--nesa-ink-soft);
  border-color: var(--nesa-line);
  cursor: default;
}
.bp-filter__toggle--all[disabled]:hover { border-color: var(--nesa-line); }

/* The Apply-button tally is covered by the shared rule above. */

/* ── Grouped subnav (menu-driven, per category) ────────────────────────── */

.nesa-shopnav--grouped {
  display: grid;
  gap: 1.125rem;
}

.nesa-shopnav__group-label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--nesa-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--nesa-track-ui);
  text-transform: uppercase;
  color: var(--nesa-ink-soft);
  text-align: center;
}