/* ==========================================================================
   Bearing Planet — catalogue layer: mega menu + collection/product pages.
   Generated pages come from tools/generate_catalog.py. Same tokens as
   style.css throughout.
   ========================================================================== */

/* ------------------------------------------------------------- mega menu */
/* NOT positioned: the full-width .mega must anchor to .nav (the nearest
   positioned ancestor), not to the item. position:relative here was exactly
   the bug that collapsed the panel to link width. */
.nav__item { display: inline-flex; }
.nav__item > a { color: var(--tint-3); }
.nav__item > a:hover { color: #fff; }

/* While the menu is open the header must paint over the page sheet. The
   sheet normally wins (equal z, later in DOM) which is what the sliding
   effect needs, so the bump is hover/focus-scoped, not permanent. */
.header:hover, .header:focus-within { z-index: 30; }

.mega {
  /* Full-width sheet under the header, patterned on the a reference build super menu
     from our 5 Aug screen recording. Positioned against .nav (which is
     position:relative), NOT the item, so it spans the viewport. */
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
  z-index: 40;
}
/* The pointer crosses the nav's own bottom padding between the link and the
   panel; without this invisible bridge the :hover chain breaks in that gap
   and the menu shuts mid-journey. */
.mega::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -18px;
  height: 18px;
}
.nav__item--mega:hover .mega,
.nav__item--mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease;
}
.mega__sheet {
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 32px 64px rgba(6, 20, 44, 0.24);
  max-height: calc(100vh - 130px);
  overflow: auto;
}
.mega__wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 30px 28px 22px;
}

/* Products: four photo cards, staggered in left to right like the reference,
   then the all-ranges strip. */
.mega__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.mega__card {
  display: block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav__item--mega:hover .mega__card,
.nav__item--mega:focus-within .mega__card { opacity: 1; transform: none; }
.nav__item--mega:hover .mega__card:nth-child(1) { transition-delay: 0.03s; }
.nav__item--mega:hover .mega__card:nth-child(2) { transition-delay: 0.09s; }
.nav__item--mega:hover .mega__card:nth-child(3) { transition-delay: 0.15s; }
.nav__item--mega:hover .mega__card:nth-child(4) { transition-delay: 0.21s; }
.mega__cardimg {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--blue-fill);
}
.mega__cardimg img { width: 100%; height: 100%; object-fit: cover; }
.mega__card > b {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}
.mega__card:hover > b { color: var(--blue); }
.mega__cardsub {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.mega__allranges {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
}
.mega__allranges span {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: none;
  color: var(--faint);
  margin-right: 6px;
}
.mega__allranges a { font-size: 13.5px; color: var(--muted); }
.mega__allranges a:hover { color: var(--blue); }

/* Brands: grouped name columns + the featured card, like the reference's
   Solutions panel with its Our work card. */
.mega__wrap--brands {
  display: grid;
  /* Three tile columns + the featured card. The wide first column takes the
     18 bearing makes at three tiles per row. */
  grid-template-columns: 1.5fr 0.95fr 0.95fr 1.1fr;
  gap: 26px;
}
.mega__col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav__item--mega:hover .mega__col,
.nav__item--mega:hover .mega__feature,
.nav__item--mega:focus-within .mega__col,
.nav__item--mega:focus-within .mega__feature { opacity: 1; transform: none; }
.nav__item--mega:hover .mega__col:nth-child(1) { transition-delay: 0.03s; }
.nav__item--mega:hover .mega__col:nth-child(2) { transition-delay: 0.08s; }
.nav__item--mega:hover .mega__col:nth-child(3) { transition-delay: 0.13s; }
.nav__item--mega:hover .mega__feature { transition-delay: 0.18s; }
.mega__colhead {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: none;
  color: var(--faint);
  margin-bottom: 3px;
}
.mega__colhead--gap { margin-top: 14px; }
/* Brand logo tiles inside the panel: the same flush-cell vocabulary as the
   homepage shop-by-brand selector, scaled for a menu. brand_mark() supplies
   the logo, or the typographic mark for the makes without one. */
.mega__btiles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mega__btile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
}
.mega__btile img { max-height: 18px; width: auto; max-width: 74px; object-fit: contain; }
.mega__btile .brandmark { font-size: 12.5px; }
.mega__btile:hover { border-color: var(--blue); background: var(--blue-fill); }
.mega .mega__col > a {
  font-size: 13.5px;
  color: var(--muted);
  padding: 1px 0;
}
.mega .mega__col > a:hover { color: var(--blue); }
.mega__feature {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--near-black);
  min-height: 210px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mega__feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
.mega__featuretext {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px;
  background: linear-gradient(180deg, transparent, rgba(5, 11, 22, 0.85) 55%);
}
.mega__featuretext b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  text-transform: none;
  color: #fff;
}
.mega__featuretext span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tint-2);
}
.mega__featuretext i {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--blue-light);
}
.mega__foot {
  border-top: 1px solid var(--border);
  padding-top: 13px;
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.mega .mega__foot a { font-size: 13px; font-weight: 600; color: var(--blue); }
.mega__foot span {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--faint);
}

@media (prefers-reduced-motion: reduce) {
  .mega__card, .mega__col, .mega__feature {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Phones: the panels disappear; Products and Brands are plain links. */
@media (max-width: 980px) {
  .mega { display: none; }
}

/* ------------------------------------------------------- catalogue pages */
.pd__hero { padding-bottom: 56px; }
.pd__crumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin-bottom: 26px;
  text-transform: none;
}
.pd__crumbs a { color: var(--muted); }
.pd__crumbs a:hover { color: var(--blue); }
.pd__crumbs b { color: var(--ink); font-weight: 600; }
.pd__crumbs span { color: var(--border-strong); }

.pd__intro {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  margin: 18px 0 0;
  max-width: 60ch;
}

.pd__grid {
  display: grid;
  /* auto-fill, not auto-fit: a range or brand with one product kept stretching
     that card to the full width, a 900px-tall photo (29 Sep QC). */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}
/* position:relative anchors the "genuine · ex stock" tag. Without it the tag
   rode the reveal transform: once a card settled (transform none) every tag
   jumped to the page's top-left corner (29 Sep QC, already live before). */
.card__photolink { display: block; position: relative; }
.card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card__title a { color: inherit; }
.card__title a:hover { color: var(--blue); }

/* Product page */
.pd__split {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(320px, 1.1fr);
  gap: 56px;
  align-items: start;
}
.pd__media {
  border-radius: 20px;
  overflow: hidden;
  background: var(--blue-fill);
  position: sticky;
  top: 120px;
}
.pd__media img { width: 100%; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.pd__brands {
  margin-top: 18px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.pd__serieshead {
  margin-top: 26px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--blue);
}
.pd__serieslist {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pd__serieslist .pd__chip { font-size: 12.5px; padding: 8px 15px; color: var(--body-muted); }
.pd__serieslist .pd__chip:hover { color: var(--blue); }
.pd__chip--added {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
}
.pd__pill b { font-weight: 700; }
.pd__note {
  margin-top: 24px;
  font-size: 14px;
  color: var(--muted);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pd__cta { margin-top: 24px; }

/* Imaged sections on a category page: alternating image/body rows, each a
   product type with its own photo + variant chips. */
.pcat .container { max-width: var(--container); }
.pcat__sec {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
  padding: 30px 0;
  scroll-margin-top: 110px;
  border-top: 1px solid var(--border);
}
.pcat__sec:first-child { border-top: 0; padding-top: 8px; }
.pcat__sec:nth-child(even) .pcat__media { order: 2; }
.pcat__media {
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
}
.pcat__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcat__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}
.pcat__blurb {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 12px 0 0;
  max-width: 52ch;
}
.pcat__brands {
  margin-top: 12px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.pcat__seriescap {
  margin-top: 18px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--blue);
}
.pcat__sec .pd__serieslist { margin-top: 10px; }
.pcat__sec:target .pcat__title { color: var(--blue); }

@media (max-width: 800px) {
  .pcat__sec { grid-template-columns: 1fr; gap: 18px; padding: 24px 0; }
  .pcat__sec:nth-child(even) .pcat__media { order: 0; }
  .pcat__media { aspect-ratio: 16 / 9; }
}

/* Grouped variant blocks on a clubbed PDP: a labelled row of chips per
   variant family, so one page reads as "pick your variant" not N duplicates. */
.pd__vgroups { margin-top: 12px; }
.pd__vgroup { margin-top: 16px; scroll-margin-top: 110px; }
.pd__vgroup:first-child { margin-top: 10px; }
.pd__vlabel {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--body-muted);
  margin-bottom: 8px;
}
.pd__vgroup .pd__serieslist { margin: 0; }
.pd__vgroup:target .pd__vlabel { color: var(--blue); }

/* Series chips inside the enquiry form */
.pd__series {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}
.pd__chip {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--blue);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
}
.pd__chip:hover { border-color: var(--blue); background: #F4F8FE; }

/* Related row */
.pd__relhead {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.pd__rel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.pd__rel a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--body-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px;
  background: #fff;
}
.pd__rel a:hover { border-color: var(--blue); color: var(--blue); }

@media (max-width: 860px) {
  .pd__split { grid-template-columns: 1fr; gap: 28px; }
  .pd__media { position: static; }
}

/* ==========================================================================
   B2C shop layer (21 Jul): product cards, product pages, enquiry basket,
   header basket badge, and glass buttons.
   ========================================================================== */

/* -------------------------------------------------- header basket badge */
.nav__enquiry { display: inline-flex; align-items: center; gap: 7px; }
.nav__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
}

/* ------------------------------------------------------- product cards */
.prodcard .card__photo { aspect-ratio: 4 / 3; position: relative; }
.prodcard__tag {
  position: absolute;
  left: 10px;
  top: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--blue-dark);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(15, 88, 214, 0.18);
  border-radius: 999px;
  padding: 5px 10px;
  pointer-events: none;
}

/* --------------------------------------------------------- product page */
.pp__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-top: 4px;
}
.pp__gallery { position: sticky; top: 110px; }
/* Extra images under the main photo, shown whole (posters, second views). */
.pp__gallery:has(.pp__extra) { position: static; }  /* a tall poster must not stick */
.pp__extra { margin: 14px 0 0; }
.pp__extra img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); background: #fff; }
.pp__extra figcaption { margin-top: 6px; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.pp__img {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border-input);
}
.pp__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 14px 0 0;
}
.pp__desc {
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.7;
  margin: 18px 0 0;
  max-width: 54ch;
}
.pp__brands { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 20px; }
.pp__brandlogo { height: 20px; width: auto; display: block; opacity: 0.9; }
.pp__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 22px;
}
.pp__trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--body-muted);
  background: var(--grey);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 13px;
}
.pp__trust span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
}
.pp__vcap {
  margin-top: 26px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--blue);
}
.pp__variants { margin-top: 12px; }
.pp__variants .pd__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  padding: 9px 15px;
}
.pp__variants .pd__chip i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: rgba(15, 88, 214, 0.12);
  color: var(--blue);
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}
.pp__variants .pd__chip--added i { background: rgba(255, 255, 255, 0.28); color: #fff; }
.pp__variants .pd__chip--added i::before { content: "✓"; }
.pp__variants .pd__chip--added i { font-size: 10px; }
.pp__variants .pd__chip--added [aria-hidden] { display: none; }
.pd__chip--pop { transform: scale(1.08); transition: transform 0.12s ease; }
.pp__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.pp__actions .btn-primary b {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin: 0 2px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.25);
  font-weight: 700; font-size: 11px;
}
.pp__note {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--faint);
  line-height: 1.6;
  max-width: 52ch;
}
.pp__relhead {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--muted);
  margin-bottom: 18px;
}

@media (max-width: 860px) {
  .pp__hero { grid-template-columns: 1fr; gap: 26px; }
  .pp__gallery { position: static; }
}

/* ------------------------------------------------------ enquiry basket */
.enq2 {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.9fr);
  gap: 40px;
  align-items: start;
}
.enq2__empty {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 40px 28px;
  text-align: center;
  color: var(--muted);
  font-size: 16px;
}
.enq2__empty a { font-weight: 600; }
.enq2__rows {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}
.enq2__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}
.enq2__row:first-child { border-top: 0; }
.enq2__p { font-family: var(--display); font-weight: 600; font-size: 16px; }
.enq2__v { font-size: 13px; color: var(--muted); margin-top: 2px; }
.enq2__qty { display: inline-flex; align-items: center; gap: 4px; }
.enq2__step {
  width: 30px; height: 30px;
  border: 1px solid var(--border-input);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  color: var(--body-muted);
  font-size: 16px;
  line-height: 1;
}
.enq2__step:hover { border-color: var(--blue); color: var(--blue); }
.enq2__q {
  width: 44px;
  text-align: center;
  border: 1px solid var(--border-input);
  border-radius: 8px;
  padding: 7px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.enq2__rm {
  width: 30px; height: 30px;
  border: 1px solid var(--border-input);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  color: var(--faint);
  font-size: 16px;
  line-height: 1;
}
.enq2__rm:hover { color: var(--red); border-color: var(--red); }
.enq2__form { position: sticky; top: 110px; }

@media (max-width: 820px) {
  .enq2 { grid-template-columns: 1fr; gap: 24px; }
  .enq2__form { position: static; }
}

/* ------------------------------------------------------- glass buttons
   the client asked for "glass buttons, like how Apple is". A liquid-glass sheen:
   a specular top highlight + a soft inner rim, applied to the primary CTAs
   without touching their solid fill (contrast stays AA). True translucent
   glass (.btn-glass) is used on dark/image surfaces where blur has something
   to work against. */
.btn-primary {
  position: relative;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 46%);
  box-shadow: 0 10px 26px rgba(15, 88, 214, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.btn-primary:hover {
  box-shadow: 0 12px 30px rgba(15, 88, 214, 0.36),
              inset 0 1px 0 rgba(255, 255, 255, 0.55),
              inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.btn-glass {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 24px rgba(6, 20, 44, 0.22);
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* ---------------------------------------------------- frosted glass
   the client asked for "glass / frozen glass, like Apple". Frosted panels where
   there is content behind to blur and legibility survives (>=0.7 opaque). The
   sticky header is deliberately left alone: it sits UNDER the opaque page
   sheet for the slide effect, so frosting it would do nothing but risk that. */
.mega__sheet {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
}

/* The floating enquiry pill, as dark frosted glass. */
.pill {
  background: rgba(11, 21, 38, 0.72) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 30px rgba(11, 21, 38, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.pill:hover { background: rgba(15, 88, 214, 0.82) !important; }

/* The header basket badge as a small glass pill on the white CTA. */
.nav__enquiry {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Product-page action row: give the secondary CTA a glass look when it sits
   on the grey section (subtle, still legible). */
.pp__actions .btn-secondary {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (prefers-reduced-motion: reduce) {
  .mega__sheet, .pill, .nav__enquiry, .pp__actions .btn-secondary,
  .btn-glass, .prodcard__tag { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mega__sheet { background: #fff; }
  .pill { background: var(--ink) !important; }
}

/* ---------------------------------------------------- 7 Aug reference pass
   From our emarketplace.in SKF machine-tools reference: (1) product
   photos float on white with real negative space, (2) blue frozen glass.
   ------------------------------------------------------------------------ */

/* White-back photo hygiene. Applies only to the brochure cutout shots (the
   generator stamps img.cut from its CUTOUT registry); scene stock stays
   covered because containing a scene photo just frames a rectangle.
   The inset is in px, not %: percentage padding resolves against the box's
   WIDTH, so on a 700x200 card an 11% inset ate 154px of a 200px height and
   the part rendered as a stamp. The source files are trimmed to their
   content bounds, so a hairline is all the breathing room they need. */
.card__photo img.cut,
.pp__img img.cut {
  object-fit: contain;
  /* The breathing room is baked into the 4:3 source frame now, so a CSS
     inset here would only shrink the part a second time. */
  padding: 0;
  box-sizing: border-box;
  background: #fff;
}

/* Blue frozen glass: the enquiry form card, lifted from the reference's
   hero stats panel. It sits over the blue gradient card and its rings, so
   the blur has something real to grip. Text goes white; contrast measured
   against the blended backdrop (white on the 12% glass over --blue-dark is
   5.7:1, the tint-4 placeholder 5.0:1, AA needs 4.5). */
.enquiry .form {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 30px 60px rgba(6, 20, 44, 0.35);
}
.enquiry .form__title { color: #fff; }
.enquiry .form__sub, .enquiry .form__foot { color: var(--tint-2); }
.enquiry .input {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.enquiry .input::placeholder { color: var(--tint-4); }
.enquiry .input:focus {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}
.enquiry .part-row__remove {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--tint-3);
}
.enquiry .form__add {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.enquiry .form__add:hover { border-color: #fff; background: rgba(255, 255, 255, 0.12); }
/* The submit inverts so the one conversion button pops off the glass. */
.enquiry .form__submit {
  background: #fff;
  color: var(--blue-dark);
  box-shadow: 0 8px 20px rgba(5, 11, 22, 0.3);
}
.enquiry .form__submit:hover { background: var(--tint-4); }
.enquiry .form__err { color: #FFD7D2; }
.enquiry .form__sent { color: #B9F3CE; }

/* The other frosted surfaces pick up the blue cast from the reference. */
.mega__sheet { background: rgba(240, 246, 254, 0.85); }
/* The blue frost is for the LIGHT stats strip; the counter band variant is
   dark glass and styles itself in style.css. :not() keeps the specificity
   tie from silently repainting it light (catalog.css loads last). */
.stats:not(.stats--counters) { background: rgba(237, 243, 253, 0.78); }

@media (prefers-reduced-motion: reduce) {
  /* No blur to read through: solid deep blue keeps the white text legible. */
  .enquiry .form {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--blue-deeper);
  }
}

/* PDP benefit checklist (13 Aug, his annotated reference card): short
   factual lines with a check mark, between the description and the brands. */
.pp__checks {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.pp__checks li {
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--body-muted);
}
.pp__checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1.5px solid var(--blue);
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230F58D6" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4 10-11"/></svg>')
    center / 11px no-repeat;
}

/* Page-top brand banner (13 Aug, his annotated ask: "A Header image like this
   on top of the page for each product page we open if possible"). Only shown
   where we hold a real banner from him. */
/* His banners run from 1.35:1 to 5:1, so a fixed-height crop cut every one
   differently (his 27 Sep "banners are not fitting since the sizes vary").
   Now each shows whole, never cropped: full width, natural height, and only
   a squarer poster is held to 440px and centred on white. */
.pgbanner {
  margin: 18px 0 4px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  justify-content: center;
}
.pgbanner img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 440px;
}
@media (max-width: 900px) { .pgbanner img { max-height: none; width: 100%; } }
.pp .pgbanner { margin-bottom: 22px; }

/* ---------------------------------------------- variant tiles on a PDP
   His 5-6 Sep photos are one per variant (UCP, UCF, LGHP 2R, SNH, HRC...).
   A chip with a photo renders as a tile; chips without one stay as text. */
.pp__vtiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 10px 0 14px;
}
.pp__vtile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border-input);
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.pp__vtile:hover { border-color: var(--blue); transform: translateY(-2px); }
/* Tiles are a catalogue now, not buttons (enquiry basket retired 29 Sep). */
div.pp__vtile { cursor: default; }
div.pp__vtile:hover { border-color: var(--border-input); transform: none; }
.pp__vtiledesc { font-family: var(--sans); font-size: 12.5px; line-height: 1.45; color: var(--muted); }
/* Grouped sections (pullers, heavy duty units, Masta, Hiwin): one block per
   group, photo left, its sizes right. */
.ppgroups { display: grid; gap: 18px; margin: 18px 0 8px; }
.ppg { display: grid; gap: 20px; padding: 20px; background: #fff; border: 1px solid var(--border); border-radius: 16px; }
.ppg--img { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start; }
.ppg__img { display: grid; gap: 10px; }
/* Two photos side by side, or a group with one row of sizes is mostly air. */
@media (min-width: 701px) { .ppg--img:has(.ppg__img img + img) { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); } }
.ppg__img:has(img + img) { grid-template-columns: 1fr 1fr; }
.ppg__img:has(img + img + img) { grid-template-columns: repeat(3, 1fr); }
.ppg__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 10px; }
.ppg__body { min-width: 0; }
.ppg__title { margin: 0 0 10px; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.005em; color: var(--ink); }
@media (max-width: 700px) { .ppg--img { grid-template-columns: minmax(0, 1fr); } .ppg__img { max-width: 320px; } }
/* Brand page ranges (TR, Masta, Shell, Hiwin). */
.brandrange__h { margin: 40px 0 14px; font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2vw, 28px); color: var(--ink); }
.brandrange__tiles { margin-top: 0; }
.brandrange__lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 22px; }
.brandrange__grp { padding: 16px 18px; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.brandrange__grp h3 { margin: 0 0 8px; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--blue); }
.brandrange__grp ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--body-muted); }
.brandrange__wide { margin: 22px 0 8px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #fff; }
.brandrange__wide img { display: block; width: 100%; height: auto; }
.pp__vtile.pd__chip--added { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.pp__vtileimg { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #fff; }
.pp__vtileimg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pp__vtilelabel {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
}
.pp__vtilelabel i { font-style: normal; color: var(--blue); font-weight: 700; }
@media (max-width: 560px) { .pp__vtiles { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* Brand page card with no unbranded photo yet: the maker's logo, centred. */
.brandtile { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #fff; padding: 18%; box-sizing: border-box; }
.brandtile img { width: auto; height: auto; max-width: 100%; max-height: 64px; object-fit: contain; }
.brandtile .brandmark { font-size: 34px; }