/**
 * HBeds 2026 — categoriepagina-chrome (breadcrumb + categorie-header)
 * Naar het design in _designs/HBeds Matrassen.html. Geladen vanuit page.php.
 * De banden breken uit de main.wrap-container (100vw-truc); de inhoud blijft
 * op 1200px uitgelijnd, gelijk aan de header/footer.
 */

.hb-crumbs-band,
.hb-cat-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

/* De inner-containers dragen de .wrap-class en volgen dus automatisch de
   binnenbreedte van de header/topbar (--w, momenteel 1320px). */

/* Kruimelpad */
.hb-crumbs-band { background: #fff; }
.hb-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .8rem;
  color: #8E8E93;
  padding: 18px 0;
  font-family: var(--sans);
}
.hb-crumbs a { color: #48484A; text-decoration: none; transition: color .15s; }
.hb-crumbs a:hover { color: #FF0042; }
.hb-crumbs-sep { color: #E5E0D8; }
.hb-crumbs-last { color: #1C1C1E; font-weight: 600; }

/* Categorie-header */
.hb-cat-hero {
  background: #F7F4EF;
  border-top: 1px solid #EFEAE1;
  border-bottom: 1px solid #EFEAE1;
  overflow: hidden;
  /* main.css geeft section-elementen generiek 72px verticale padding
     (homepage-secties); deze band regelt zijn ruimte via -inner. */
  padding: 0;
}
.hb-cat-hero-inner { padding-top: 12px; padding-bottom: 12px; position: relative; z-index: 1; }
.hb-cat-hero-grid {
  display: flex;
  gap: 44px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
}
.hb-cat-copy { flex: 1; min-width: min(380px, 100%); max-width: 620px; }
.hb-cat-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #1C1C1E;
  margin: 0 0 6px;
  text-transform: none;
}
.hb-cat-intro,
.hb-cat-intro p {
  margin: 0 0 8px;
  font-size: .92rem;
  line-height: 1.5;
  color: #48484A;
  max-width: 540px;
  font-family: var(--sans);
}
.hb-cat-intro p + p { margin-top: 6px; }
.hb-cat-leesmeer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: #FF0042;
  cursor: pointer;
  margin: 0 0 10px;
}
.hb-cat-trust {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .85rem;
  color: #48484A;
  font-family: var(--sans);
}
.hb-cat-stars { display: inline-flex; gap: 1px; }
.hb-cat-stars svg { width: 15px; height: 15px; fill: #00B67A; }
.hb-cat-trust b { color: #1C1C1E; font-weight: 700 !important; }
/* Trustindex-widget in de header: op één regel met de tagline erachter */
.hb-cat-trust-widget { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; max-width: 540px; margin-top: 16px; }
.hb-cat-trust-widget .ti-widget { margin: 0 !important; width: auto !important; }
/* Het widgetblok (inline-block met overflow:hidden) heeft onderin iets meer
   interne ruimte dan boven; de tagline daarom een fractie omhoog. */
.hb-cat-trust-tagline { font-size: .85rem; font-weight: 300; color: #48484A; white-space: nowrap; line-height: 1; position: relative; top: -2px; }
/* De regel "66 recensies" licht (Trustindex zet zelf gewichten met
   !important, vandaar ook hier) */
.hb-cat-trust-widget .ti-widget .ti-rating-text,
.hb-cat-trust-widget .ti-widget .ti-rating-text * {
  font-weight: 300 !important;
}

/* Slaapadvies-kaart */
.hb-advies-kaart {
  width: 400px;
  flex-shrink: 0;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 200px;
  /* Volle hoogte van de hero-rij (de grid staat op align-items:flex-start) */
  align-self: stretch;
  background: radial-gradient(130% 120% at 78% 8%, #2B2F3B 0%, #191A1F 62%);
  box-shadow: 0 8px 20px rgba(28,48,74,.08), 0 22px 48px rgba(28,48,74,.13);
}
.hb-ak-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.hb-ak-glow-a {
  top: -50px; right: -30px; width: 230px; height: 230px;
  background: radial-gradient(circle, rgba(255,0,66,.5) 0%, rgba(255,0,66,0) 70%);
  filter: blur(26px);
  animation: hbFloatA 9s ease-in-out infinite;
}
.hb-ak-glow-b {
  bottom: -64px; left: -44px; width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(120,96,210,.42) 0%, rgba(120,96,210,0) 70%);
  filter: blur(30px);
  animation: hbFloatB 12s ease-in-out infinite;
}
.hb-ak-ster { position: absolute; border-radius: 50%; background: #fff; pointer-events: none; }
.hb-ak-ster1 { top: 26px; left: 34px; width: 4px; height: 4px; animation: hbTwinkle 3.2s ease-in-out infinite; }
.hb-ak-ster2 { top: 54px; left: 92px; width: 3px; height: 3px; animation: hbTwinkle 2.4s ease-in-out .6s infinite; }
.hb-ak-ster3 { top: 40px; right: 128px; width: 2.5px; height: 2.5px; animation: hbTwinkle 3.6s ease-in-out 1.1s infinite; }
.hb-ak-maan {
  position: absolute; top: 20px; right: 26px; width: 34px; height: 34px;
  fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.hb-ak-bed {
  position: absolute; top: 28px; left: 50%;
  transform: translateX(-50%);
  animation: hbBob 4.6s ease-in-out infinite;
  pointer-events: none;
}
.hb-ak-bed svg {
  /* Iets kleiner dan voorheen (was 170x75): het label "Ontvang gratis
     slaapadvies" liep over de slapende figuur heen (feedback #40). */
  width: 148px; height: 64px;
  fill: none; stroke: rgba(255,255,255,.82); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.hb-ak-z { position: absolute; color: rgba(255,255,255,.9); font-family: var(--serif); font-weight: 600; opacity: 0; }
.hb-ak-z1 { top: -4px; left: 70px; font-size: 13px; animation: hbZzz 3s ease-in-out infinite; }
.hb-ak-z2 { top: -6px; left: 82px; font-size: 16px; animation: hbZzz 3s ease-in-out 1s infinite; }
.hb-ak-z3 { top: -8px; left: 96px; font-size: 19px; animation: hbZzz 3s ease-in-out 2s infinite; }
/* Meer lucht tussen illustratie en tekst, plus een zachte verloopband achter
   de tekst zodat die ook bij een lage kaart leesbaar blijft (feedback #40). */
.hb-ak-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 20px 16px;
  background: linear-gradient(to bottom, rgba(25,26,31,0) 0%, rgba(25,26,31,.82) 42%, rgba(25,26,31,.94) 100%);
}
.hb-ak-kicker {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; margin-bottom: 8px;
}
.hb-ak-titel {
  font-family: var(--serif); font-weight: 600; font-size: 1.2rem;
  line-height: 1.1; letter-spacing: -.02em; color: #fff; margin-bottom: 10px;
}
.hb-ak-knoppen { display: flex; gap: 10px; }
/* De keuzeknoppen zijn buttons geworden: ze openen de Slaapwijzer op deze
   pagina in plaats van door te linken (feedback #13). De <a>-variant blijft
   voor categorieën zonder eigen wizard (#44). */
.hb-ak-knoppen a,
.hb-ak-knoppen button {
  flex: 1; text-align: center; background: #fff; color: #1C1C1E;
  text-decoration: none; font-weight: 700; font-size: .92rem;
  font-family: var(--sans); border: 0; cursor: pointer;
  padding: .78rem .5rem; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  transition: background .18s, color .18s;
}
.hb-ak-knoppen a:hover,
.hb-ak-knoppen button:hover { background: #FF0042; color: #fff; }
/* Lange knopteksten ("Dekbedovertrekken" op /vandyck/) staken buiten de
   kaart: knoppen krimpen tot hun tekst en gaan zo nodig naar een tweede regel
   (28-9-2026). */
.hb-ak-knoppen { flex-wrap: wrap; }
body.hb2026 .hb-advies-kaart.hb-ak-lang { min-height: 300px !important; }
/* Precies vier antwoorden (slaaphouding, warm of koud): twee rijen van twee
   in plaats van drie ongelijke rijen (28-9-2026). */
.hb-advies-kaart:not(.hb-ak-veel) .hb-ak-knoppen > :first-child:nth-last-child(4),
.hb-advies-kaart:not(.hb-ak-veel) .hb-ak-knoppen > :first-child:nth-last-child(4) ~ * { flex: 1 1 calc(50% - 5px); }
/* Veel knoppen (alle productgroepen op een merkpagina, 28-9-2026): kleine
   pillen die doorlopen, en de kaart groeit mee in plaats van dat de tekst
   over de illustratie schuift. */
.hb-advies-kaart.hb-ak-veel { display: flex; flex-direction: column; justify-content: flex-end; padding-top: 104px; box-sizing: border-box; }
.hb-advies-kaart.hb-ak-veel .hb-ak-body { position: relative; }
.hb-advies-kaart.hb-ak-veel .hb-ak-knoppen { gap: 7px; }
body.hb2026 .hb-advies-kaart.hb-ak-veel .hb-ak-knoppen a { flex: 0 1 auto; font-size: .8rem !important; padding: .5rem .85rem !important; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.hb-ak-knoppen a,
.hb-ak-knoppen button { flex: 1 1 auto; min-width: 0; }

/* Oude intro-afbeelding (half-circle contact) als rechterkolom */
.hb-cat-media { width: 400px; flex-shrink: 0; }
.hb-cat-media .intro_image { width: 100%; }

/* Populaire maten */
.hb-cat-maten {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #EFEAE1;
  font-family: var(--sans);
}
.hb-cat-maten-label { font-size: .78rem; font-weight: 700; color: #8E8E93; margin-right: 2px; }
.hb-maat-pil {
  padding: .5rem 1rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #E5E0D8;
  color: #1C1C1E;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s;
}
.hb-maat-pil:hover { border-color: #1C1C1E; }
.hb-cat-maten-sep { width: 1px; height: 22px; background: #E5E0D8; margin: 0 4px; }
.hb-cat-merklink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 700;
  color: #FF0042;
  text-decoration: none;
}
.hb-cat-merklink svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* USP-balk (design tpl 95) */
.hb-usp-band {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: #fff;
  border-bottom: 1px solid #EFEAE1;
}
.hb-usp-inner {
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 26px;
}
.hb-usp-item { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 210px; }
.hb-usp-item > svg {
  width: 22px; height: 22px; flex-shrink: 0;
  fill: none; stroke: #FF0042; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.hb-usp-titel { font-family: var(--sans); font-weight: 700; font-size: .86rem; color: #1C1C1E; line-height: 1.15; }
.hb-usp-sub { font-size: .76rem; color: #8E8E93; }
.hb-usp-sep { width: 1px; height: 34px; background: #EFEAE1; }
@media (max-width: 900px) { .hb-usp-sep { display: none; } }

/* Snelfilters (design tpl 128) — sticky; breakout via marge omdat
   position:sticky niet samengaat met de left/margin-truc */
.hb-filters-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #fff;
  border-bottom: 1px solid #EFEAE1;
}
.hb-filters-inner {
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.hb-filters-label { font-family: var(--sans); font-size: .8rem; font-weight: 700; color: #8E8E93; margin-right: 4px; }
.hb-soort-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .6rem 1rem;
  border-radius: 14px 5px 14px 5px;
  font-family: var(--sans);
  font-size: .83rem;
  font-weight: 600;
  background: #fff;
  border: 1px solid #E5E0D8;
  color: #1C1C1E;
  text-decoration: none;
  transition: all .22s cubic-bezier(.22,.61,.36,1);
}
.hb-soort-chip:hover { border-color: #1C1C1E; }
/* Aantal producten achter het label, zoals in het ontwerp: zelfde tekst, lichter. */
.hb-soort-chip-aantal { opacity: .55; }
/* Chip van de pagina waar je nu bent. */
.hb-soort-chip.is-actief {
  background: #17191D;
  border-color: #17191D;
  color: #fff;
  font-weight: 700;
}
.hb-soort-chip.is-actief:hover { border-color: #17191D; }

/* ============================================================
   Alleen ruimte boven de filterkolom en het productoverzicht,
   zoals in het ontwerp (28px). Kolombreedtes, het zweven en het
   grijze vlak om de filters blijven zoals het thema ze heeft.
   ============================================================ */
.hb-main { padding-top: 28px; }

/* De filterkolom staat in het ontwerp gewoon op wit, zonder grijs vlak en
   zonder eigen padding. Het thema geeft ".content .page-section-filter" een
   grijze achtergrond (#f6f5f8), afgeronde hoeken en padding; die halen we hier
   weg. Breedte, marges en het zweven blijven staan zoals het thema ze heeft. */
.hb-main > .page-section-filter {
  background: #fff !important;
  background-color: #fff !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

@media (max-width: 900px) {
  .hb-main { padding-top: 20px; }
}

/* ============================================================
   Eigen productfilters (ontwerp tpl 135)
   ============================================================ */
/* ============================================================
   Lettertype van formulierelementen terugpakken.
   Het thema zet in style.css:
     body, input, select, button, textarea { font-family:'Poppins' !important }
   Dat !important staat rechtstreeks op button/input/select, dus een gewone
   declaratie van ons verliest het - ook met hogere specificiteit. Alleen
   daarom staat hier !important: anders zijn alle knoppen en velden Poppins
   terwijl de rest van de kolom Manrope is.
   ============================================================ */
.hb-fil button,
.hb-fil input,
.hb-fil select,
.hb-resbalk button,
.hb-resbalk select,
.hb-verbalk button,
.hb-verpop button,
li.hb-kaart button,
.hb-filters-band button {
  font-family: var(--sans) !important;
}

/* Witte kaart met rand en schaduw, zoals in het ontwerp. */
.hb-fil {
  font-family: var(--sans); color: #1C1C1E;
  background: #fff; border: 1px solid #E5E0D8; border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(28,48,74,.05), 0 12px 30px rgba(28,48,74,.09);
}
.hb-fil-kop {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid #EFEAE1;
}
.hb-fil-titel {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 800; font-size: .95rem; color: #1C1C1E;
}
.hb-fil-titel svg {
  width: 18px; height: 18px; fill: none; stroke: #FF0042;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.hb-fil-wis {
  border: 0; background: transparent; color: #FF0042; cursor: pointer;
  font-family: var(--sans); font-size: .8rem; font-weight: 700; padding: 0;
}
.hb-fil-wis:hover { text-decoration: underline; }

.hb-fil-groep { padding: 18px; border-bottom: 1px solid #EFEAE1; }
.hb-fil-groep:last-child { border-bottom: 0; }
.hb-fil-groepkop {
  font-size: .86rem; font-weight: 700; color: #1C1C1E; margin-bottom: 12px;
  letter-spacing: 0; text-transform: none;
}

/* Eigen vinkvakje van 19px, zoals het ontwerp; het echte veld blijft
   bedienbaar maar onzichtbaar, zodat toetsenbord en schermlezer blijven werken. */
.hb-fil .hb-fil-optie input[type="checkbox"] {
  position: absolute; opacity: 0; width: 19px !important; height: 19px !important;
  margin: 0 !important; cursor: pointer;
}
.hb-fil-vink {
  width: 19px; height: 19px; border-radius: 5px; flex-shrink: 0;
  border: 1px solid #D9D3C9; background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.hb-fil-vink svg {
  width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3.2;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0;
}
.hb-fil-optie input[type="checkbox"]:checked ~ .hb-fil-vink { background: #FF0042; border-color: #FF0042; }
.hb-fil-optie input[type="checkbox"]:checked ~ .hb-fil-vink svg { opacity: 1; }
.hb-fil-optie input[type="checkbox"]:focus-visible ~ .hb-fil-vink { outline: 2px solid #FF0042; outline-offset: 2px; }

/* Twee kolommen bij Maat en Hardheid. */
.hb-fil-lijst.is-raster { grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.hb-fil-segment.is-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hb-fil-lijst li[hidden] { display: none; }

.hb-fil-meer {
  margin-top: 10px; border: 0; background: transparent; padding: 0;
  color: #FF0042; font-family: var(--sans); font-size: .82rem; font-weight: 700;
  cursor: pointer;
}
.hb-fil-meer:hover { text-decoration: underline; }

/* Hulpblok onder de filterkaart (ontwerp tpl 120) */
.hb-fil-hulp {
  background: #F7F4EF; border: 1px solid #E5E0D8; border-radius: 20px;
  padding: 18px; margin-top: 16px; font-family: var(--sans);
}
.hb-fil-hulp-titel {
  font-family: var(--serif); font-weight: 600; font-size: 1.08rem;
  color: #1C1C1E; margin-bottom: 4px;
}
.hb-fil-hulp-tekst { margin: 0 0 14px; font-size: .82rem; line-height: 1.5; color: #6B6255; }
.hb-fil-hulp-knoppen { display: flex; flex-direction: column; gap: 8px; }
.hb-fil-hulp-knop {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; color: #1C1C1E; border: 1px solid #E5E0D8;
  text-decoration: none; font-family: var(--sans); font-weight: 700;
  font-size: .84rem; padding: 11px; border-radius: 999px;
  transition: border-color .2s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.hb-fil-hulp-knop:hover { border-color: #1C1C1E; color: #1C1C1E; }
.hb-fil-hulp-knop svg {
  width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: #FF0042;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.hb-fil-hulp-knop.is-hoofd {
  background: #FF0042; color: #fff; border-color: #FF0042;
}
.hb-fil-hulp-knop.is-hoofd:hover { background: #D4002F; border-color: #D4002F; color: #fff; }
.hb-fil-hulp-knop.is-hoofd svg { stroke: currentColor; }

/* Het oude thema zet in ".content-area ul" bolletjes met inspringing, geeft elke
   li 20px ondermarge, en blaast via ".content input" elk invoerveld op tot 45px
   hoog en 100% breed - met !important. Daarom hier ook !important, anders staat
   de filterkolom vol met bolletjes en reuzevinkjes. */
.hb-fil ul.hb-fil-lijst {
  list-style: none !important;
  padding-inline-start: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
  display: grid;
  gap: 2px;
}
.hb-fil ul.hb-fil-lijst > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.hb-fil ul.hb-fil-lijst > li::marker { content: ""; }

/* Wordt een lijst langer dan dit, dan scrollt hij binnen de groep - zoals in het
   ontwerp bij Merk en Model. Het maatraster valt erbuiten: dat werkt met de
   knop "Alle maten tonen". */
.hb-fil ul.hb-fil-lijst:not(.is-raster) {
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.hb-fil input[type="checkbox"] {
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
  width: 16px !important;
  height: 16px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  flex: 0 0 auto;
  accent-color: #FF0042;
  cursor: pointer;
}

.hb-fil input[type="range"] {
  -webkit-appearance: auto;
  appearance: auto;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  accent-color: #FF0042;
  cursor: pointer;
}
.hb-fil-optie {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 5px 0; font-size: .86rem; color: #48484A;
}
.hb-fil-optie input { accent-color: #FF0042; width: 16px; height: 16px; cursor: pointer; }
.hb-fil-optielabel { flex: 1; }
.hb-fil-aantal { color: #A9A093; font-size: .78rem; }
.hb-fil-lijst li.is-leeg { opacity: .4; }
.hb-fil-lijst li.is-leeg .hb-fil-optie { cursor: not-allowed; }

.hb-fil-segment { display: flex; gap: 6px; flex-wrap: wrap; }
.hb-fil-seg {
  flex: 1 1 auto; min-width: 78px;
  border: 1px solid #E5E0D8; background: #fff; color: #1C1C1E;
  border-radius: 12px 5px 12px 5px; padding: 9px 6px; cursor: pointer;
  /* Niet vet: in het ontwerp staat deze tekst in het gewone gewicht.
     Alleen de aangeklikte knop wordt zwaarder. */
  font-family: var(--sans); font-size: .8rem; font-weight: 500;
  transition: all .22s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.hb-fil-seg:hover { border-color: #1C1C1E; }
.hb-fil-seg .hb-fil-aantal { margin-left: 4px; }
.hb-fil-seg.is-aan { background: #17191D; border-color: #17191D; color: #fff; font-weight: 700; }
.hb-fil-seg.is-aan .hb-fil-aantal { color: rgba(255,255,255,.6); }
.hb-fil-seg.is-leeg { opacity: .4; }

.hb-fil-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.hb-fil-chip {
  border: 1px solid #E5E0D8; background: #fff; color: #1C1C1E;
  border-radius: 999px; padding: 7px 13px; cursor: pointer;
  font-family: var(--sans); font-size: .8rem; font-weight: 600;
  transition: all .22s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.hb-fil-chip:hover { border-color: #1C1C1E; }
.hb-fil-chip.is-aan { background: #17191D; border-color: #17191D; color: #fff; font-weight: 700; }
.hb-fil-chip.is-leeg { opacity: .4; }

.hb-fil-prijs { width: 100%; accent-color: #FF0042; cursor: pointer; }
.hb-fil-prijslabel {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-size: .8rem; color: #8E8E93;
}
.hb-fil-prijslabel strong { color: #1C1C1E; font-weight: 700; }

/* Schuifknop, zoals in het ontwerp: baan van 40x23 met een witte knop van 18. */
.hb-fil-schakel {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: .86rem; color: #48484A;
}
.hb-fil-schakel input[type="checkbox"] {
  position: absolute; opacity: 0; width: 40px !important; height: 23px !important;
  margin: 0 !important; cursor: pointer;
}
.hb-fil-schuif {
  width: 40px; height: 23px; border-radius: 999px; flex-shrink: 0;
  position: relative; background: #DCD6CB; transition: background .15s;
}
.hb-fil-knop {
  position: absolute; top: 2.5px; left: 2.5px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s;
}
.hb-fil-schakel input[type="checkbox"]:checked ~ .hb-fil-schuif { background: #FF0042; }
.hb-fil-schakel input[type="checkbox"]:checked ~ .hb-fil-schuif .hb-fil-knop { left: 19.5px; }
.hb-fil-schakel input[type="checkbox"]:focus-visible ~ .hb-fil-schuif { outline: 2px solid #FF0042; outline-offset: 2px; }

/* Resultatenbalk boven het overzicht */
.hb-resbalk {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
  font-family: var(--sans);
}
.hb-resbalk-tekst { font-size: .9rem; color: #48484A; }
.hb-resbalk-tekst strong { color: #1C1C1E; font-weight: 700; }
/*
 * Tot ongeveer 800 px past de regel "Resultaat 1-12 van 106" naast de
 * sorteerkeuze. Daaronder breekt hij af en duwt hij de sorteerkeuze een
 * regel omlaag, op een telefoon zelfs over drie regels. Op telefoon en
 * tablet-portret valt de regel daarom weg; het aantal staat ook al in de
 * filterkop en bij "laad meer" (21-9-2026).
 */
@media (max-width: 800px) {
  .hb-resbalk-tekst { display: none; }
}
.hb-resbalk-sorteer {
  display: flex; align-items: center; gap: 10px;
  font-size: .9rem; color: #48484A;
}
/* Let op: het oude thema forceert via ".content select" met !important een
   grijze box van 45px hoog, 8px radius en 100% breed. Daarom hier ook
   !important, anders wint die regel en ziet de keuzelijst er heel anders uit
   dan in het ontwerp. */
.hb-resbalk-sorteer select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 1px solid #E5E0D8 !important;
  border-radius: 999px !important;
  padding: 9px 38px 9px 16px !important;
  font-family: var(--sans) !important;
  font-size: .86rem !important;
  font-weight: 600;
  line-height: 1.2;
  color: #1C1C1E !important;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 12px;
  cursor: pointer;
  box-shadow: none;
}
.hb-resbalk-sorteer select:focus-visible { outline: 2px solid #FF0042; outline-offset: 2px; }
.hb-resbalk-sorteer select:hover { border-color: #1C1C1E !important; }

/* ============================================================
   Productkaart en raster (ontwerp tpl 137)
   ============================================================ */
#hb-resultaat ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 16px;
  margin: 0; padding: 0; list-style: none;
}
#hb-resultaat ul.products::before,
#hb-resultaat ul.products::after { content: none !important; display: none !important; }

/* Het thema zet met
     ul.products .product { border:1px solid #efefef !important; border-radius:8px !important;
                            margin:8px 1% .5% 0 !important; padding:0 !important }
   een eigen rand, radius en marge op elke productkaart. Die selector weegt
   (0,2,1); daarom staat onze eigen kaart hieronder op ul.products li.product.hb-kaart
   (0,3,2), zodat we bij gelijke !important zwaarder wegen. */
ul.products li.product.hb-kaart {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: flex; flex-direction: column;
  font-family: var(--sans);
  background: #fff;
  border: 1px solid #E5E0D8 !important;
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(28,48,74,.05), 0 12px 30px rgba(28,48,74,.09);
  transition: transform .28s var(--ease, cubic-bezier(.22,.61,.36,1)), box-shadow .28s;
}
ul.products li.product.hb-kaart:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(28,48,74,.12), 0 48px 96px rgba(28,48,74,.18);
}

/* Vierkant vak met een vullende foto. De productfoto's zijn 1:1, dus in een
   vak van 4:3 met "contain" bleef links en rechts de beige achtergrond staan. */
.hb-kaart-beeld {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: #fff;
}
.hb-kaart-beeld img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
/* Het thema rondt binnen een productkaart de link af op 2px en de afbeelding
   op 8px aan de bovenzijde. Die selectors zijn zwaarder dan de onze, dus dat
   gaf witte hoekjes binnen onze kaart van 20px. Hier weer vlak maken; de kaart
   zelf klipt al op de juiste radius. */
li.hb-kaart .hb-kaart-beeld,
li.hb-kaart .hb-kaart-beeld img,
li.hb-kaart .hb-kaart-naam a {
  border-radius: 0 !important;
}
.hb-kaart-conditie, .hb-kaart-voordeel {
  position: absolute; top: 11px; z-index: 2;
  font-size: .68rem; font-weight: 800; letter-spacing: .01em; padding: .3rem .6rem;
}
/* Showmodel-label (16-09-2026). Antraciet in plaats van rood/oranje, zodat het
   naast het rode kortingslabel rechtsboven niet met twee kleuren vecht. Vorm,
   kleur en icoon zijn gelijk aan de pil op de productpagina
   (single-product-2026.php), zodat de bezoeker hetzelfde label herkent. */
.hb-kaart-conditie {
  left: 11px; background: #1C1C1E; color: #fff; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
.hb-kaart-conditie svg { width: 11px; height: 11px; fill: currentColor; flex: none; }
.hb-kaart-voordeel {
  right: 11px; background: #FF0042; color: #fff; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(255,0,66,.28);
}

.hb-kaart-body { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hb-kaart-merk { font-family: var(--serif); font-weight: 700; font-size: .95rem; color: #1C1C1E; }
/* Merklogo in plaats van de naam. Vaste hoogte zodat alle kaarten even hoog
   beginnen, ongeacht de verhoudingen van het logo. */
.hb-kaart-merk.has-logo { display: flex; align-items: center; min-height: 30px; }
.hb-kaart-merk.has-logo img {
  width: auto !important;
  max-width: 70px;
  height: 30px;
  object-fit: contain;
  object-position: left center;
  margin: 0 !important;
  border-radius: 0 !important;
}
.hb-kaart-naam { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; line-height: 1.2; margin: 0 !important; } /* !important nodig: het oude thema zet h1-h6 margins met !important */
.hb-kaart-naam a { color: #1C1C1E; text-decoration: none; }
/* De kaartinhoud staat op gap:8px; direct onder het logo hoort maar 2px te
   zitten, dus die tussenruimte halen we er hier weer af. */
.hb-kaart-merk + .hb-kaart-naam { margin-top: 0 !important; }

.hb-kaart-hardheid-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.hb-kaart-hardheid-kop span {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #A29A8D;
}
.hb-kaart-hardheid-kop strong { font-size: .76rem; font-weight: 700; color: #1C1C1E; }
.hb-kaart-balk { display: flex; gap: 3px; }
.hb-kaart-balk span { flex: 1; height: 5px; border-radius: 3px; background: #EFEAE1; }
.hb-kaart-balk span.is-aan { background: #1C1C1E; }

/* Eigenschapsbalkjes op een schaal van 5 (feedback #24, #28). Vervangt het
   hardheidsbalkje: naam links, balkje rechts, zodat meerdere eigenschappen
   onder elkaar netjes uitlijnen. */
.hb-kaart-eigenschappen { display: flex; flex-direction: column; gap: 5px; }
.hb-kaart-eig { display: grid; grid-template-columns: minmax(0, 1fr) 84px; align-items: center; gap: 10px; }
.hb-kaart-eig-naam {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #A29A8D;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hb-kaart-eig .hb-kaart-balk { width: 84px; }
/* Schaal met heel kleine uiteinden eronder: wat links en rechts betekent
   (28-9-2026). De rij krijgt daarnaast een tooltip met uitleg. */
.hb-kaart-eig { cursor: help; }
.hb-kaart-schaal { display: flex; flex-direction: column; gap: 2px; width: 84px; }
.hb-kaart-schaal .hb-kaart-balk { width: 100%; }
.hb-kaart-uiteinden { display: flex; justify-content: space-between; font-size: .54rem; line-height: 1; color: #B3AB9F; letter-spacing: .01em; }
/* Type slaper onder de eigenschappen (feedback #24). */
.hb-kaart-slaper { font-size: .73rem; color: #5A5348; font-weight: 600; }

.hb-kaart-labels { display: flex; gap: 6px; flex-wrap: wrap; }
.hb-kaart-label {
  font-size: .72rem; font-weight: 600; color: #5A5348;
  background: #F4F1EB; border: 1px solid #EAE4D9; padding: 3px 9px; border-radius: 8px;
}

.hb-kaart-regels { display: flex; flex-direction: column; gap: 4px; }
.hb-kaart-regel { display: flex; align-items: center; gap: 6px; font-size: .73rem; color: #48484A; font-weight: 500; }
.hb-kaart-regel svg {
  width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: #1A7A40;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.hb-kaart-regel.is-let-op { color: #C81E1E; font-weight: 700; }
.hb-kaart-regel.is-let-op svg { stroke: currentColor; }

.hb-kaart-prijs { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 10px; font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: #1C1C1E; line-height: 1; }
.hb-kaart-prijs .requestprefix { font-family: var(--sans); font-size: .72rem !important; font-weight: 400; color: #8E8E93 !important; }
.hb-kaart-prijs del { order: 3; font-family: var(--sans); font-size: .8rem; font-weight: 400; color: #8E8E93; text-decoration: line-through; }
.hb-kaart-prijs ins { text-decoration: none; color: #FF0042; }
.hb-kaart-prijs .parts_price, .hb-kaart-prijs .saving_price { display: none; }

/* Groen met winkelwagen-icoon, conform de ProductCard uit het ontwerp. */
.hb-kaart-knop {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 10px; padding: .7rem 1rem; border-radius: 12px;
  background: #16B765; color: #fff; text-decoration: none;
  box-shadow: 0 8px 22px rgba(22,183,101,.26);
  font-family: var(--sans); font-size: .82rem; font-weight: 800;
  transition: background .22s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.hb-kaart-knop:hover { background: #129E56; color: #fff; }
.hb-kaart-knop svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Zwevende vergelijkbalk, zoals op de Auping One-pagina (tpl 644) */
.hb-verbalk {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 120; display: flex; align-items: center; gap: 14px;
  background: #1C1C1E; color: #fff; border-radius: 16px;
  padding: 12px 12px 12px 18px; box-shadow: 0 16px 46px rgba(0,0,0,.30);
  font-family: var(--sans); max-width: calc(100vw - 32px);
}
.hb-verbalk[hidden] { display: none; }
.hb-verbalk-tekst { font-size: .85rem; font-weight: 600; }
.hb-verbalk-tekst strong { font-weight: 800; }
.hb-verbalk-wis {
  border: 0; background: transparent; color: #A9A6A2; cursor: pointer;
  font-family: var(--sans); font-size: .82rem; font-weight: 600;
}
.hb-verbalk-wis:hover { color: #fff; }
.hb-verbalk-knop {
  border: none; background: #FF0042; color: #fff; cursor: pointer;
  font-family: var(--sans); font-weight: 800; font-size: .82rem;
  padding: .62rem 1.2rem; border-radius: 999px; white-space: nowrap;
  transition: background .2s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.hb-verbalk-knop:hover { background: #D4002F; }

/* Popup met de vergelijktabel */
.hb-verpop {
  position: fixed; inset: 0; z-index: 200; background: rgba(20,18,16,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; font-family: var(--sans);
}
.hb-verpop[hidden] { display: none; }
.hb-verpop-paneel {
  background: #fff; border-radius: 22px; max-width: 920px; width: 100%;
  max-height: 86vh; overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.32);
}
.hb-verpop-kop {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 26px; border-bottom: 1px solid #EEE7DB;
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.hb-verpop-kop h3 {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600;
  color: #1C1C1E; margin: 0;
}
.hb-verpop-sluit {
  width: 36px; height: 36px; border: none; background: #F1ECE4;
  border-radius: 10px; font-size: 1.3rem; line-height: 1; color: #1C1C1E; cursor: pointer;
}
.hb-verpop-sluit:hover { background: #E7E0D4; }
.hb-verpop-body { padding: 8px 26px 26px; overflow-x: auto; }
.hb-verpop-laden { padding: 30px 0; color: #8E8E93; font-size: .9rem; }

.hb-vertabel { width: 100%; border-collapse: collapse; min-width: 520px; }
.hb-vertabel th, .hb-vertabel td { text-align: left; padding: 12px 14px; }
.hb-vertabel thead th { border-bottom: 2px solid #E5E0D8; vertical-align: bottom; }
.hb-vertabel .hb-vertabel-kenmerk {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #9A8C7B;
}
.hb-vertabel thead a { text-decoration: none; display: block; }
.hb-vertabel thead img {
  width: 72px; height: 72px; object-fit: contain; border-radius: 10px;
  background: #F7F4EF; margin-bottom: 6px; display: block;
}
.hb-vertabel thead span { display: block; font-size: .86rem; font-weight: 800; color: #1C1C1E; }
.hb-vertabel tbody td { border-bottom: 1px solid #EFE9DF; font-size: .86rem; color: #2C2C2E; }
.hb-vertabel .hb-vertabel-label { font-size: .82rem; font-weight: 700; color: #1C1C1E; white-space: nowrap; }
.hb-vertabel .parts_price, .hb-vertabel .tooltip { display: none; }

/* Vinkje Vergelijken op de kaart */
.hb-kaart-vergelijk {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 4px; margin-top: 2px; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: .78rem; font-weight: 600; color: #8E8E93;
}
.hb-kaart-vergelijk:hover { color: #1C1C1E; }
.hb-kaart-vinkje {
  width: 16px; height: 16px; border-radius: 5px; border: 1px solid #D9D3C9;
  display: flex; align-items: center; justify-content: center; background: #fff;
  transition: all .18s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.hb-kaart-vinkje svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.hb-kaart-vergelijk.is-aan { color: #1C1C1E; }
.hb-kaart-vergelijk.is-aan .hb-kaart-vinkje { background: #FF0042; border-color: #FF0042; }
.hb-kaart-vergelijk.is-aan .hb-kaart-vinkje svg { opacity: 1; }

#hb-resultaat { transition: opacity .18s ease; }
#hb-resultaat.is-laden { opacity: .45; pointer-events: none; }

@keyframes hbFloatA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(22px,-16px) scale(1.16); } }
@keyframes hbFloatB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-26px,14px) scale(1.22); } }
@keyframes hbTwinkle { 0%,100% { opacity: .2; } 50% { opacity: .9; } }
@keyframes hbBob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }
@keyframes hbZzz { 0% { opacity: 0; transform: translate(0,6px) scale(.7); } 28% { opacity: .95; } 100% { opacity: 0; transform: translate(7px,-18px) scale(1.15); } }

@media (max-width: 900px) {
  .hb-advies-kaart, .hb-cat-media { width: 100%; }
  .hb-cat-hero-grid { gap: 24px; }
}

/* ------------------------------------------------------------------
 * Laad-meer blok onder het productoverzicht (ontwerp tpl 167).
 * Vervangt de paginanummers op pagina's met de eigen filterkolom.
 * ------------------------------------------------------------------ */
.hb-laadmeer{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:36px;width:100%;font-family:var(--sans,'Manrope',system-ui,sans-serif);letter-spacing:normal}
.hb-laadmeer-tekst{font-size:.85rem;color:#8E8E93;font-weight:600;line-height:1.4}
.hb-laadmeer-tekst b{color:#1C1C1E}
.hb-laadmeer-balk{width:220px;height:5px;border-radius:999px;background:#EAE4DA;overflow:hidden}
.hb-laadmeer-vulling{height:100%;background:#FF0042;border-radius:999px}
.hb-laadmeer-knop{display:inline-flex;align-items:center;gap:9px;background:#1C1C1E;color:#fff;font-family:inherit;font-weight:700;font-size:.92rem;line-height:1.2;text-decoration:none;border:0;padding:.85rem 1.9rem;border-radius:999px;transition:background .15s ease,opacity .15s ease}
.hb-laadmeer-knop:hover{background:#000;color:#fff}
.hb-laadmeer-knop.is-laden{opacity:.6;pointer-events:none}
.hb-laadmeer-knop svg{width:15px;height:15px;fill:none;stroke:#FF0042;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hb-kaart-prijs del span, .hb-kaart-prijs del bdi { text-decoration: line-through !important; }
.hb-kaart-prijs .woocommerce-Price-currencySymbol { display: inline !important; font-size: .68em; }
.hb-kaart-prijs del .woocommerce-Price-currencySymbol { font-size: 1em; }

/* ------------------------------------------------------------------
 * Secties onder het productoverzicht (ontwerp tpl 175/186/216/268).
 * De banden (USP, blog) lopen full-bleed omdat het blok binnen de
 * begrensde contentkolom van het thema staat. Hover-regels hebben
 * !important nodig: de knopkleuren staan inline (1:1 uit het ontwerp).
 * ------------------------------------------------------------------ */
.hb-cat-onder{font-family:var(--sans,'Manrope',system-ui,sans-serif);letter-spacing:normal}

.hb-cat-onder summary{list-style:none}
.hb-cat-onder summary::-webkit-details-marker{display:none}
.hb-cat-onder ul{list-style:disc}
.hb-cob-wijzer:hover{background:#D4002F !important}
/* Bel-knop hover (feedback #21): de knop bestaat in twee varianten. Zonder
   onderscheid kreeg de rode variant een lichte hover-achtergrond terwijl de
   tekst wit bleef, en dus onleesbaar werd. */
.hb-cob-bel.is-wit:hover { background: #FBF9F5 !important; color: #1C1C1E !important; border-color: #D8D2C8 !important; }
.hb-cob-bel.is-rood:hover { background: #D4002F !important; color: #fff !important; border-color: #D4002F !important; }
/* Vangnet voor een gecachte pagina zonder variantklasse. */
.hb-cob-bel:not(.is-wit):not(.is-rood):hover { background: #FBF9F5 !important; color: #1C1C1E !important; }
@media (max-width: 820px){
  .hb-cat-onder .hb-cob-tekstgrid{grid-template-columns:1fr !important}
}
.hb-cob-bestaand h2,.hb-cob-bestaand h3,.hb-cob-bestaand h4{font-family:var(--serif,'Fraunces',Georgia,serif);color:#1C1C1E}
.content .contentrow{margin-bottom:0}

.hb-cat-onder > div, .hb-cat-onder .hb-cob-band > div { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
.hb-cat-onder .hb-cob-band { box-shadow: 0 0 0 100vmax #F7F4EF; clip-path: inset(0 -100vmax); }

/* 3D-configuratorknop (ontwerp BoxspringCard tpl 52): zelfde groen, kubus-icoon 15px. */
.hb-kaart-knop.is-3d svg { width: 15px; height: 15px; }

/* Toplabel linksboven op de kaartfoto (ontwerp tpl 13, donkere pil). */
.hb-kaart-toplabel {
  position: absolute; top: 11px; left: 11px; z-index: 2;
  font-size: .65rem; font-weight: 800; letter-spacing: .02em;
  padding: .3rem .58rem; border-radius: 8px;
  background: #1C1C1E; color: #fff; pointer-events: none;
  font-family: var(--sans);
}

/* 3D-configuratorlabel linksonder op de kaartfoto (ontwerp tpl 17-20). */
.hb-kaart-3dlabel {
  position: absolute; bottom: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .66rem; font-weight: 800; letter-spacing: .02em;
  padding: .32rem .6rem; border-radius: 999px;
  background: rgba(28,28,30,.92); color: #fff;
  pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.2);
  font-family: var(--sans);
}
.hb-kaart-3dlabel svg {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: #FF3D6E; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Kleurenbolletjes op de kaart (ontwerp BoxspringCard tpl 26-30). */
.hb-kaart-kleuren { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.hb-kaart-bollen { display: flex; gap: 5px; }
.hb-kaart-bol {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 1px rgba(0,0,0,.14);
}
.hb-kaart-kleuren-aantal { font-size: .72rem; color: #8E8E93; font-weight: 600; font-family: var(--sans); }
.hb-kaart-label svg { vertical-align: -1px; margin-right: 5px; }

/* 3D-configuratorbanner (ontwerp tpl 154) op bedden- en boxsprings-pagina's. */
@keyframes hbCobFloatA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(22px,-16px) scale(1.16); } }
@keyframes hbCobFloatB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-26px,14px) scale(1.22); } }
@keyframes hbCobTwinkle { 0%,100% { opacity: .2; } 50% { opacity: .9; } }
.hb-cob-3d-cta:hover { background: #D4002F !important; }
@media (max-width: 760px) {
  .hb-cob-3d { padding: 26px 24px !important; }
  .hb-cob-3d-beeld { width: 100% !important; height: 220px !important; }
  .hb-cob-3d-tekst { min-width: 0 !important; }
  .hb-cob-3d-stappen { grid-template-columns: 1fr !important; }
}

/* De slaapadvies-kaart zakt tussen 641 en 900 px terug naar zijn min-height
   van 200px. Illustratie en kicker raken elkaar dan net (feedback #40, 641
   tot 900 px). Onder 640 px is dit al opgelost in responsive.css. */
@media (min-width: 641px) and (max-width: 900px) {
  .hb-advies-kaart { min-height: 244px; }
}

/* Vergelijktabel: gelijke rijen onderaan, lichter (28-9-2026). */
.hb-vertabel tr.hb-vertabel-kop-gelijk td { padding-top: 18px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #A29A8D; background: transparent; border-bottom: 1px solid #EFEAE1; }
.hb-vertabel tr.hb-vertabel-gelijk td { color: #8E8E93; }
.hb-vertabel tr.hb-vertabel-gelijk td.hb-vertabel-label { color: #A29A8D; }

/* Conditie-chips op merk-outletpagina's (hb-outlet-mix.php, 29-9-2026) */
.hb-om-band { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.hb-om-band .hb-soort-chip { min-height: 44px; }
.hb-om-band .hb-soort-chip.is-leeg { opacity: .45; }
@media (max-width: 640px) { .hb-om-band .hb-filters-label { display: none; } .hb-om-band { gap: 6px; } .hb-om-band .hb-soort-chip { padding: .6rem .8rem; } }