/* ---------------------------------------------------------------
   Product catalog — listing header, filter chips, product grid.
   Cards are white on the page's warm mesh backdrop; the image panel
   is the only cool-grey surface, which is what makes a cutout
   product photo read as a photo rather than as part of the card.
   --------------------------------------------------------------- */

.jb-catalog { padding-block: var(--jb-s6) var(--jb-s8); }

/* ---------- Header ---------- */

.jb-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jb-s2);
  margin-bottom: var(--jb-s3);
  font-size: var(--jb-fs-sm);
  color: var(--jb-500);
}
.jb-crumbs a { transition: color .15s ease; }
.jb-crumbs a:hover { color: var(--jb-ink); }

.jb-catalog__title {
  margin: 0;
  font-family: var(--jb-font-display);
  font-size: clamp(2.1rem, 5.4vw, 3.1rem);
  font-weight: var(--jb-display-weight);
  line-height: 1.08;
  letter-spacing: var(--jb-display-tracking);
  text-transform: uppercase;
  color: var(--jb-ink);
}
/* Same hazard-stripe underscore as the wordmark — it ties the catalog
   heading back to the brand mark without repeating the logo. */
.jb-catalog__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: var(--jb-s3);
  background: var(--jb-amber);
}

.jb-catalog__intro {
  max-width: 62ch;
  margin: var(--jb-s4) 0 0;
  color: var(--jb-700);
}
.jb-catalog__intro p:last-child { margin-bottom: 0; }

/* ---------- Category chips ---------- */

.jb-chips {
  display: flex;
  gap: var(--jb-s2);
  margin-block: var(--jb-s6) var(--jb-s5);
  /* Bleeds to the screen edge on phones so the row reads as scrollable,
     matching the category cards on the home page. */
  margin-inline: calc(-1 * var(--jb-s4));
  padding-inline: var(--jb-s4);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.jb-chips::-webkit-scrollbar { display: none; }

@media (min-width: 900px) {
  .jb-chips {
    flex-wrap: wrap;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

/* Frosted rather than solid white: the page sits on a warm mesh gradient, and
   letting it through the chips ties the filter row to the backdrop instead of
   stamping a row of flat cards onto it. */
.jb-chip {
  flex: none;
  padding: 8px var(--jb-s4);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .45);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 1px 2px rgba(16, 21, 27, .05);
  font-size: var(--jb-fs-sm);
  font-weight: 600;
  color: var(--jb-700);
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.jb-chip:hover {
  border-color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .72);
  color: var(--jb-ink);
}
/* The selected chip keeps the ink weight it had — dark glass rather than a
   flat block, so it belongs to the same set as the others. */
.jb-chip.is-active {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(16, 21, 27, .82);
  color: var(--jb-white);
}

/* ---------- Count + ordering bar ---------- */

.jb-catalog__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--jb-s3);
  padding-bottom: var(--jb-s4);
  border-bottom: 1px solid var(--jb-200);
}

.jb-catalog__count {
  margin: 0;
  font-size: var(--jb-fs-sm);
  color: var(--jb-500);
}
.jb-catalog__count strong { color: var(--jb-ink); }

/* margin auto rather than relying on the bar's space-between: once the bar
   wraps, the tools are the only item on their line and space-between drops
   them at the start. */
.jb-catalog__tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--jb-s2);
  margin-inline-start: auto;
}

/* Woo ships `.woocommerce .woocommerce-ordering { margin: 0 0 1em }` at
   (0,2,0), which outranks a bare `.woocommerce-ordering` reset. Left in, the
   form measured 44px of control plus 16px of margin, so centring the row
   pushed the Filter button 8px below the select it sits beside. */
.jb-catalog__bar .jb-catalog__tools .woocommerce-ordering { margin: 0; }

/* One height for both controls, set rather than inferred: a button and a
   select derive their box differently, and the row should not depend on the
   two happening to agree. */
.jb-filter-btn,
.jb-catalog__tools .woocommerce-ordering select {
  height: 42px;
  padding-block: 0;
}

/* ---------- Filter trigger ---------- */

.jb-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--jb-s2);
  padding: 9px var(--jb-s4);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--jb-radius);
  background: rgba(255, 255, 255, .45);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 1px 2px rgba(16, 21, 27, .05);
  font-size: var(--jb-fs-sm);
  font-weight: 600;
  color: var(--jb-700);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.jb-filter-btn:hover {
  border-color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .72);
  color: var(--jb-ink);
}
.jb-filter-btn .jb-icon { width: 18px; height: 18px; }

/* A filter that is on should look on from across the room. */
.jb-filter-btn.is-on {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(16, 21, 27, .82);
  color: var(--jb-white);
}

.jb-filter-btn__count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border-radius: 999px;
  background: var(--jb-amber);
  color: var(--jb-ink);
  font-size: var(--jb-fs-xs);
  font-weight: 700;
}

/* ---------- Filter dialog ---------- */

.jb-filter {
  width: min(420px, calc(100vw - 32px));
  max-height: min(80vh, 640px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--jb-white);
  box-shadow: 0 24px 60px rgba(16, 21, 27, .28);
  color: var(--jb-ink);
  overflow: hidden;
}
.jb-filter::backdrop {
  background: rgba(16, 21, 27, .5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Bottom sheet on phones — a centred box with a keyboard open is worse than
   a sheet the thumb can reach. */
@media (max-width: 560px) {
  .jb-filter {
    width: 100%;
    max-width: none;
    max-height: 82vh;
    margin: auto auto 0;
    border-radius: 18px 18px 0 0;
  }
}

.jb-filter__form {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

.jb-filter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jb-s3);
  padding: var(--jb-s4) var(--jb-s5);
  border-bottom: 1px solid var(--jb-100);
}

.jb-filter__title {
  margin: 0;
  font-family: var(--jb-font-display);
  font-size: 1.35rem;
  font-weight: var(--jb-display-weight);
  letter-spacing: var(--jb-display-tracking);
  text-transform: uppercase;
}

.jb-filter__close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--jb-200);
  border-radius: var(--jb-radius);
  background: var(--jb-white);
  color: var(--jb-ink);
  transition: background .15s ease, border-color .15s ease;
}
.jb-filter__close:hover {
  background: var(--jb-50);
  border-color: var(--jb-300);
}

.jb-filter__body {
  flex: 1 1 auto;
  padding: var(--jb-s4) var(--jb-s5);
  overflow-y: auto;
}

.jb-filter__group {
  margin: 0;
  padding: 0;
  border: 0;
}

.jb-filter__legend {
  padding: 0 0 var(--jb-s2);
  font-size: var(--jb-fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--jb-500);
}

/* ---------- Checkbox row ---------- */

.jb-check {
  display: flex;
  align-items: center;
  gap: var(--jb-s3);
  padding: 10px 0;
  cursor: pointer;
}
.jb-check + .jb-check { border-top: 1px solid var(--jb-100); }

/* The native input stays in the accessibility tree and keeps the keyboard
   behaviour; only its painting is replaced. */
.jb-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.jb-check__box {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid var(--jb-300);
  border-radius: 6px;
  background: var(--jb-white);
  transition: background .15s ease, border-color .15s ease;
}
.jb-check__box::after {
  content: "";
  width: 11px;
  height: 6px;
  border-inline-start: 2px solid var(--jb-ink);
  border-block-end: 2px solid var(--jb-ink);
  transform: rotate(-45deg) translate(1px, -1px) scale(.6);
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
}
.jb-check:hover .jb-check__box { border-color: var(--jb-500); }
.jb-check input:checked + .jb-check__box {
  border-color: var(--jb-amber);
  background: var(--jb-amber);
}
.jb-check input:checked + .jb-check__box::after {
  opacity: 1;
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}
.jb-check input:focus-visible + .jb-check__box {
  outline: 3px solid var(--jb-amber);
  outline-offset: 2px;
}

.jb-check__label {
  flex: 1 1 auto;
  font-weight: 600;
}

.jb-check__count {
  flex: none;
  font-size: var(--jb-fs-xs);
  font-weight: 700;
  color: var(--jb-500);
}

.jb-filter__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jb-s3);
  padding: var(--jb-s4) var(--jb-s5);
  border-top: 1px solid var(--jb-100);
  background: var(--jb-50);
}

.jb-filter__clear {
  font-size: var(--jb-fs-sm);
  font-weight: 700;
  color: var(--jb-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
.jb-filter__clear:hover { color: var(--jb-ink); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .jb-filter-btn { border-color: var(--jb-200); background: var(--jb-white); }
  .jb-filter-btn.is-on { border-color: var(--jb-ink); background: var(--jb-ink); }
}

/* WooCommerce renders the ordering form; only its skin is ours. Amber glass:
   the row is otherwise all neutrals, and the one control that changes what the
   grid shows is worth the brand colour. Square corners keep it reading as a
   control rather than as another filter. */
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select {
  padding: 9px var(--jb-s4);
  padding-inline-end: var(--jb-s6);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--jb-radius);
  background-color: rgba(255, 177, 0, .88);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 2px 10px rgba(255, 177, 0, .28);
  /* Chevron drawn inline so the control needs no image request and recolours
     with the palette. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310151b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--jb-s3) center;
  background-size: 16px;
  font: inherit;
  font-size: var(--jb-fs-sm);
  font-weight: 700;
  color: var(--jb-ink);
  cursor: pointer;
  appearance: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.woocommerce-ordering select:hover {
  border-color: rgba(255, 255, 255, .75);
  background-color: var(--jb-amber);
}
/* Ink, not the usual amber ring — amber on amber would be invisible. */
.woocommerce-ordering select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--jb-ink);
}
/* The dropdown list itself is drawn by the OS, which does not inherit the
   control's colours — set them so the open menu is not white-on-white. */
.woocommerce-ordering select option {
  background-color: var(--jb-white);
  color: var(--jb-ink);
}

/* Without the blur the 45% white barely separates either control from the
   backdrop — fall back to the solid surfaces they had before. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .jb-chip {
    border-color: var(--jb-200);
    background-color: var(--jb-white);
  }
  .jb-chip.is-active {
    border-color: var(--jb-ink);
    background-color: var(--jb-ink);
  }
  .woocommerce-ordering select { background-color: var(--jb-amber); }
}

/* ---------- Grid ---------- */

/* minmax(0, 1fr), not 1fr: a bare 1fr track will not shrink below its
   content's min-content width, and the nowrap category line inside a card
   makes that min-content as wide as the longest category name. With plain
   1fr the second column is pushed off the screen. The min-width: 0 chain
   below carries the same permission down to the text itself. */
.jb-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jb-s4);
  margin: var(--jb-s5) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) {
  .jb-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jb-s5); }
}
@media (min-width: 1100px) {
  .jb-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.jb-products__item,
.jb-pcard,
.jb-pcard__body,
.jb-pcard__cat,
.jb-pcard__name { min-width: 0; }

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

.jb-pcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 14px;
  background: var(--jb-white);
  box-shadow: 0 1px 2px rgba(16, 21, 27, .06), 0 8px 20px rgba(16, 21, 27, .05);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.jb-pcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(16, 21, 27, .14);
}
/* The card holds two links; the ring goes on whichever one has focus rather
   than on the card, so it always points at what Enter will activate. */
.jb-pcard a:focus-visible {
  outline: 3px solid var(--jb-amber);
  outline-offset: 2px;
}

.jb-pcard__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--jb-100);
  overflow: hidden;
}

/* contain, not cover: supplier photography is cutouts on a white ground, and
   cropping one to fill the box lops the toe off a boot. The image runs to the
   panel edges — a square shot fills it exactly, and anything off-square
   letterboxes against the panel rather than sitting in a border of it. */
.jb-pcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .4s cubic-bezier(.2, .6, .3, 1);
}
.jb-pcard:hover .jb-pcard__img { transform: scale(1.04); }

/* The placeholder is artwork in its own right — it fills the panel. */
.jb-pcard__img--placeholder { object-fit: cover; }

/* Frosted chip rather than a solid amber tab: it sits directly on the product
   photo, which can be anything from a white cutout to a dark site shot. Dark
   glass keeps the label legible over both, and the amber dot carries the brand
   colour that the fill gave up. */
.jb-pcard__flag {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
  /* .6, not less: over a white product cutout — the most common case in the
     real catalog — a thinner tint drops the white label below 4.5:1. */
  background: rgba(16, 21, 27, .6);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 2px 10px rgba(16, 21, 27, .18);
  color: #fff;
  font-size: var(--jb-fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.jb-pcard__flag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jb-amber);
}

/* Without the blur the tint alone is too thin to separate the chip from a
   busy photo — deepen it so the label stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .jb-pcard__flag { background: rgba(16, 21, 27, .78); }
}

.jb-pcard__body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 2px;
  padding: var(--jb-s4);
}

/* One line, always. "Body Protection & Workwear" wrapping to two lines pushes
   the name down and makes neighbouring cards in a row disagree about where
   their titles start. */
.jb-pcard__cat {
  overflow: hidden;
  font-size: var(--jb-fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--jb-500);
}

.jb-pcard__name {
  margin: 2px 0 0;
  font-family: var(--jb-font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  font-weight: var(--jb-display-weight);
  line-height: 1.2;
  letter-spacing: var(--jb-display-tracking);
  text-wrap: balance;
}
.jb-pcard__name a { transition: color .15s ease; }
.jb-pcard__name a:hover { color: var(--jb-amber-dark); }


/* Pushed to the bottom so prices and buttons line up across a row of cards
   whose names run to different lengths. */
.jb-pcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--jb-s2);
  margin-top: auto;
  padding-top: var(--jb-s4);
}

/* A product with no price has no price line at all, so the button is the only
   thing in the row — keep it on the right rather than letting it fall back to
   the start and break the grid's rhythm against its priced neighbours. */
.jb-pcard__cta { margin-inline-start: auto; }

/* Amber, but as a field rather than as lettering: #ffb100 sits near 1.9:1 on
   white and --jb-amber-dark near 2.4:1, so amber text would fail at any size.
   Ink on --jb-amber-soft clears 15:1 and still reads as the brand colour,
   which is what separates the price from the name above it. Same treatment as
   the product page, so a price looks like a price everywhere. */
.jb-price {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--jb-radius);
  background: var(--jb-amber-soft);
  font-family: var(--jb-font-display);
  /* Scales down on a narrow card so a sale price — was and now, side by side
     — stays on one line instead of stacking into a two-row block. */
  font-size: clamp(.85rem, 3.4vw, 1.2rem);
  font-weight: var(--jb-display-weight);
  line-height: 1.25;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  color: var(--jb-ink);
}
.jb-price .woocommerce-Price-amount { white-space: nowrap; }
/* Relative to the price, so the pair shrinks together. */
.jb-price del { margin-inline-end: 5px; opacity: .5; font-size: .72em; }
.jb-price ins { text-decoration: none; }


/* Compact variant of the shared amber button. */
.jb-btn--sm {
  padding: 8px var(--jb-s3);
  font-size: var(--jb-fs-xs);
  border-radius: 999px;
}
.jb-btn--sm .jb-icon { width: 16px; height: 16px; }

/* While the grid is two columns there is not room for a price and a button on
   one line, so the price keeps its own row and the button takes the next one
   in full. Only the price itself — the was and the now — shares a line. */
@media (max-width: 719px) {
  .jb-pcard__foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--jb-s3);
  }
  .jb-price { align-self: flex-start; }
  .jb-pcard__cta {
    width: 100%;
    justify-content: center;
    margin-inline-start: 0;
  }
}

/* At two columns on a 320px screen a sale pair still lands within a few
   pixels of the card's inner edge, so the chip gives up some of both. */
@media (max-width: 380px) {
  .jb-price { padding-inline: 7px; font-size: .8rem; }
}

/* ---------- Empty state ---------- */

.jb-catalog__empty {
  margin-top: var(--jb-s6);
  padding: var(--jb-s8) var(--jb-s5);
  border: 1px dashed var(--jb-300);
  border-radius: 14px;
  background: rgba(255, 255, 255, .6);
  text-align: center;
}
.jb-catalog__empty-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--jb-s3);
  color: var(--jb-300);
}
.jb-catalog__empty h2 {
  margin: 0 0 var(--jb-s2);
  font-family: var(--jb-font-display);
  font-size: 1.5rem;
  font-weight: var(--jb-display-weight);
}
.jb-catalog__empty p {
  max-width: 44ch;
  margin: 0 auto var(--jb-s5);
  color: var(--jb-700);
}
.jb-catalog__empty-clear a {
  font-weight: 700;
  color: var(--jb-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.jb-catalog__empty-clear a:hover { color: var(--jb-amber-dark); }

/* ---------- Pagination ---------- */

.jb-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--jb-s2);
  margin-top: var(--jb-s7);
}
.jb-pager .page-numbers {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding-inline: var(--jb-s3);
  border-radius: var(--jb-radius);
  border: 1px solid var(--jb-200);
  background: var(--jb-white);
  font-size: var(--jb-fs-sm);
  font-weight: 600;
  color: var(--jb-700);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.jb-pager a.page-numbers:hover {
  border-color: var(--jb-ink);
  color: var(--jb-ink);
}
.jb-pager .page-numbers.current {
  border-color: var(--jb-ink);
  background: var(--jb-ink);
  color: var(--jb-white);
}
.jb-pager .page-numbers.dots {
  border-color: transparent;
  background: none;
}

@media (prefers-reduced-motion: reduce) {
  .jb-pcard,
  .jb-pcard__img { transition: none; }
  .jb-pcard:hover { transform: none; }
  .jb-pcard:hover .jb-pcard__img { transform: none; }
}

/* ---------------------------------------------------------------
   Featured band — home page, under the categories.
   Reuses .jb-products and the listing card; only the heading row
   belongs to this section.
   --------------------------------------------------------------- */

.jb-featured { padding-block: 0 var(--jb-s7); }

.jb-featured__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--jb-s3);
  margin-bottom: var(--jb-s5);
}

/* Same voice as the category section's heading above it. */
.jb-featured__title {
  margin: 0;
  font-family: var(--jb-font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: var(--jb-display-weight);
  line-height: 1.15;
  letter-spacing: var(--jb-display-tracking);
  color: var(--jb-ink);
}
.jb-featured__title em { font-style: italic; }
.jb-featured__mark {
  display: inline-block;
  margin-inline: 4px;
  color: var(--jb-amber);
}

.jb-featured__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--jb-fs-sm);
  font-weight: 700;
  color: var(--jb-700);
  white-space: nowrap;
  transition: color .15s ease, gap .15s ease;
}
.jb-featured__all:hover {
  gap: 10px;
  color: var(--jb-ink);
}

/* ---------- Bento grid ----------
   Row height is fixed and the tiles claim spans, rather than each tile
   carrying an aspect-ratio — a 2x1 tile and a 1x1 tile would need different
   ratios, and that falls apart as the featured count changes.

   Every count from 1 to 5 is laid out explicitly so the grid always fills
   its rows exactly. Six would start a ragged third row, which is why the
   template asks for five at most. */

.jb-bento-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: clamp(165px, 43vw, 215px);
  gap: var(--jb-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The two layouts are in exclusive media queries rather than one overriding
   the other. Sharing them meant a small-screen rule like
   [data-count="4"] > li:nth-child(4) outranked the desktop reset that was
   meant to clear it, and the last tile stayed double-width on desktop. */

/* Phone and tablet: the lead tile takes a full-width square, the rest pair up.
   Counts that would leave one tile alone on the last row widen it instead. */
@media (max-width: 899px) {
  .jb-bento-grid > li:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
  .jb-bento-grid[data-count="2"] > li:nth-child(2),
  .jb-bento-grid[data-count="4"] > li:nth-child(4) {
    grid-column: span 2;
  }
  .jb-bento-grid[data-count="1"] > li:first-child { grid-row: span 1; }
}

@media (min-width: 900px) {
  .jb-bento-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(170px, 17vw, 240px);
    gap: var(--jb-s2);
  }

  /* Every tile stays square or taller. A tile two columns wide and one row
     tall leaves a contained product stranded in the middle of a lot of empty
     panel, which is the one shape this content cannot carry. */

  .jb-bento-grid[data-count="1"] {
    grid-template-columns: repeat(2, minmax(0, 320px));
    justify-content: center;
  }
  .jb-bento-grid[data-count="1"] > li:first-child { grid-column: span 2; grid-row: span 2; }

  .jb-bento-grid[data-count="2"] > li { grid-column: span 2; grid-row: span 2; }

  /* 2x2 lead, then two full-height portraits. */
  .jb-bento-grid[data-count="3"] > li:first-child { grid-column: span 2; grid-row: span 2; }
  .jb-bento-grid[data-count="3"] > li:nth-child(n+2) { grid-row: span 2; }

  /* 2x2 lead, one portrait, two squares stacked. */
  .jb-bento-grid[data-count="4"] > li:first-child { grid-column: span 2; grid-row: span 2; }
  .jb-bento-grid[data-count="4"] > li:nth-child(2) { grid-row: span 2; }

  /* 2x2 lead and a 2x2 block of squares — the grid fills exactly. */
  .jb-bento-grid[data-count="5"] > li:first-child { grid-column: span 2; grid-row: span 2; }
}

/* ---------- Bento tile ----------
   Same construction as the home page's category tiles: the photograph is the
   tile, and the text sits on a scrim over it rather than on a panel below. */

.jb-bento {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 14px;
  background: var(--jb-ink-2);
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow .2s ease, transform .2s ease;
}
.jb-bento:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(16, 21, 27, .16);
}
.jb-bento:focus-visible {
  outline: 3px solid var(--jb-amber);
  outline-offset: 3px;
}

/* cover, not contain: these tiles are a display surface, and the full product
   shot is one tap away. Worth knowing for the real catalog — a cutout on a
   white ground will be cropped to fill, so tiles suit the photographed shots
   better than the packshots. */
.jb-bento .jb-pcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2, .6, .3, 1);
}
.jb-bento:hover .jb-pcard__img { transform: scale(1.06); }

/* Keeps the type readable over whatever the client uploads. */
.jb-bento::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(16, 21, 27, .88) 0%,
    rgba(16, 21, 27, .55) 32%,
    rgba(16, 21, 27, .08) 62%,
    rgba(16, 21, 27, .3) 100%
  );
}

.jb-bento__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--jb-s3);
  color: #fff;
}
@media (min-width: 900px) {
  .jb-bento__body { padding: var(--jb-s4); }
}

/* One line, always. "Body Protection & Workwear" wrapping to two lines on a
   small tile pushes the name up into the corner arrow. */
.jb-bento__cat {
  overflow: hidden;
  font-size: var(--jb-fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, .82);
}

/* Two lines at most, for the same reason. */
.jb-bento__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-family: var(--jb-font-display);
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: var(--jb-display-weight);
  line-height: 1.2;
  letter-spacing: var(--jb-display-tracking);
}

/* The category tiles' frosted arrow, unchanged, so the two bands read as a set. */
.jb-bento__go {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.jb-bento:hover .jb-bento__go {
  background: var(--jb-amber);
  border-color: var(--jb-amber);
  color: var(--jb-ink);
  transform: translateX(2px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .jb-bento__go { background: rgba(16, 21, 27, .55); }
}

@media (prefers-reduced-motion: reduce) {
  .jb-bento,
  .jb-bento .jb-pcard__img,
  .jb-bento__go { transition: none; }
  .jb-bento:hover { transform: none; }
  .jb-bento:hover .jb-pcard__img { transform: none; }
}

/* ---------------------------------------------------------------
   Brand strip — home page, under the featured bento.
   --------------------------------------------------------------- */

.jb-brands { padding-block: 0 var(--jb-s8); }

.jb-brands__head { margin-bottom: var(--jb-s5); }

.jb-brands__title {
  margin: 0;
  font-family: var(--jb-font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: var(--jb-display-weight);
  line-height: 1.15;
  letter-spacing: var(--jb-display-tracking);
  color: var(--jb-ink);
}
.jb-brands__title em { font-style: italic; }
.jb-brands__mark {
  display: inline-block;
  margin-inline: 4px;
  color: var(--jb-amber);
}

.jb-brands__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jb-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) { .jb-brands__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .jb-brands__row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Sized for a logo but legible without one: a brand with no artwork yet shows
   its name in the display cut rather than an empty box. */
.jb-brand-tile {
  display: grid;
  place-items: center;
  min-height: 88px;
  padding: var(--jb-s3);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  text-align: center;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.jb-brand-tile:hover {
  background: rgba(255, 255, 255, .8);
  border-color: rgba(255, 255, 255, .9);
  transform: translateY(-2px);
}

.jb-brand-tile__logo {
  max-width: 100%;
  max-height: 52px;
  width: auto;
  object-fit: contain;
  /* Client logos arrive in every colour; muting them keeps the row a row
     rather than a scatter, and hover returns the real thing. */
  filter: grayscale(1);
  opacity: .72;
  transition: filter .2s ease, opacity .2s ease;
}
.jb-brand-tile:hover .jb-brand-tile__logo {
  filter: none;
  opacity: 1;
}

.jb-brand-tile__name {
  font-family: var(--jb-font-display);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-weight: var(--jb-display-weight);
  letter-spacing: var(--jb-display-tracking);
  text-transform: uppercase;
  color: var(--jb-700);
  transition: color .15s ease;
}
.jb-brand-tile:hover .jb-brand-tile__name { color: var(--jb-ink); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .jb-brand-tile { background: var(--jb-white); border-color: var(--jb-200); }
}

@media (prefers-reduced-motion: reduce) {
  .jb-brand-tile { transition: none; }
  .jb-brand-tile:hover { transform: none; }
}