/* Kollekció-oldal + szűrő-sziget (S4b). A téma byb-szuro.liquid szekció
   stílusainak portja, a nyilvános részek (rács/lista nézet); a B2B
   táblázatnézet és a kijelölő-sáv NEM került át. Az osztálynevek a témával
   azonosak a screenshot-diff kedvéért. */

.byb-szuro * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.byb-szuro {
  font-family: 'Poppins', sans-serif;
  background: #f8fdfb;
  color: #0d2b2b;
  padding: 56px 0;
}
.byb-szuro__wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 560px) {
  .byb-szuro__wrap {
    padding: 0 18px;
  }
}
.byb-szuro__eyebrow {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #0c6b4e;
  margin-bottom: 8px;
}
.byb-szuro__cim {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.byb-szuro__alcim {
  font-size: 14px;
  color: #6b8078;
  margin-top: 6px;
}
.byb-szuro__fej {
  margin-bottom: 20px;
}
.byb-szuro__katvalto {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.byb-szuro__katgomb {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #4a5e56;
  background: #fff;
  border: 1px solid #e8efec;
  border-radius: 100px;
  padding: 8px 16px;
  cursor: pointer;
  transition:
    border-color 0.2s,
    color 0.2s;
}
.byb-szuro__katgomb:hover {
  border-color: #5ce8a0;
  color: #0d2b2b;
}
.byb-szuro__katgomb[aria-current='true'] {
  background: #0d2b2b;
  color: #5ce8a0;
  border-color: #0d2b2b;
}

.byb-szuro__racs {
  display: grid;
  grid-template-columns: 252px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1040px) {
  .byb-szuro__racs {
    grid-template-columns: 1fr;
  }
}

.byb-szuro__sav {
  background: #fff;
  border: 1px solid #e8efec;
  border-radius: 16px;
  padding: 16px 16px 8px;
}
@media (max-width: 1040px) {
  .byb-szuro__sav {
    position: fixed;
    inset: 0;
    z-index: 60;
    border-radius: 0;
    overflow-y: auto;
    display: none;
    padding: 20px 18px 96px;
  }
  .byb-szuro--nyitva .byb-szuro__sav {
    display: block;
  }
}
.byb-szuro__savfej {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8efec;
}
.byb-szuro__savfej h3 {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.byb-szuro__torol {
  font-size: 12px;
  font-weight: 700;
  color: #6b8078;
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  padding-bottom: 1px;
}
.byb-szuro__torol:hover {
  color: #0d2b2b;
  border-bottom-color: #5ce8a0;
}

.byb-szuro__csop {
  border-bottom: 1px solid #f2f7f5;
}
.byb-szuro__csop:last-child {
  border-bottom: none;
}
.byb-szuro__csopfej {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #0d2b2b;
  padding: 12px 2px;
  cursor: pointer;
  text-align: left;
}
.byb-szuro__csopfej svg {
  width: 15px;
  height: 15px;
  stroke: #8a9e96;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  margin-left: auto;
  flex: none;
  transition: transform 0.25s;
}
/* gyerek-kombinator: a "További szűrők" blokkban csoport van a csoportban,
   a nyitott külső különben minden belső nyilat elforgatna */
.byb-szuro__csop--nyitva > .byb-szuro__csopfej svg {
  transform: rotate(180deg);
}
.byb-szuro__csop--tovabbi > .byb-szuro__csopfej {
  color: #0c6b4e;
}
.byb-szuro__kivdb {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 800;
  color: #0c6b4e;
  background: #eef9f3;
  border: 1px solid #bfe9d8;
  border-radius: 100px;
  padding: 1px 8px;
}
.byb-szuro__kivdb + svg {
  margin-left: 6px;
}
.byb-szuro__csoptest {
  padding: 0 2px 13px;
}
.byb-szuro__opcio {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  padding: 4px 0;
  cursor: pointer;
  color: #4a5e56;
}
.byb-szuro__opcio:hover {
  color: #0d2b2b;
}
.byb-szuro__opcio input {
  width: 15px;
  height: 15px;
  accent-color: #0d2b2b;
  cursor: pointer;
  flex: none;
}
.byb-szuro__opcio span {
  flex: 1;
}
.byb-szuro__db {
  font-size: 11.5px;
  color: #8a9e96;
  font-variant-numeric: tabular-nums;
  flex: none !important;
}
.byb-szuro__opcio--ures {
  opacity: 0.42;
}
.byb-szuro__tobb {
  font-size: 12px;
  font-weight: 700;
  color: #0c6b4e;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0 0;
}
.byb-szuro__tobb:hover {
  text-decoration: underline;
}
.byb-szuro__tart {
  display: flex;
  align-items: center;
  gap: 8px;
}
.byb-szuro__tart input {
  width: 100%;
  min-width: 0;
  font-family: inherit;
  font-size: 13px;
  color: #0d2b2b;
  padding: 7px 9px;
  border: 1px solid #e8efec;
  border-radius: 10px;
  background: #f8fdfb;
}
.byb-szuro__tart input:focus {
  outline: 2px solid #5ce8a0;
  outline-offset: -1px;
}
.byb-szuro__tart span {
  color: #6b8078;
  font-size: 13px;
}
.byb-szuro__hatar {
  font-size: 12px;
  color: #6b8078;
  margin-top: 6px;
}

.byb-szuro__eszkoz {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.byb-szuro__talalat {
  font-size: 14px;
  color: #4a5e56;
}
.byb-szuro__talalat b {
  color: #0d2b2b;
  font-weight: 700;
}
.byb-szuro__eszkozjobb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.byb-szuro__rend,
.byb-szuro__meret {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #0d2b2b;
  padding: 8px 13px;
  border: 1px solid #e8efec;
  border-radius: 100px;
  background: #fff;
  cursor: pointer;
}
.byb-szuro__nezet {
  display: flex;
  gap: 4px;
  background: #f2f7f5;
  border: 1px solid #e8efec;
  border-radius: 100px;
  padding: 3px;
}
.byb-szuro__nezetgomb {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: 100px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #6b8078;
  transition:
    background 0.2s,
    color 0.2s;
}
.byb-szuro__nezetgomb svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.byb-szuro__nezetgomb[aria-current='true'] {
  background: #0d2b2b;
  color: #5ce8a0;
}
.byb-szuro__nezetgomb[hidden] {
  display: none;
}

.byb-szuro__chipek {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.byb-szuro__chipek:empty {
  display: none;
}
.byb-szuro__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 100px;
  background: #eef9f3;
  border: 1px solid #bfe9d8;
  color: #0c6b4e;
  cursor: pointer;
}
.byb-szuro__chip:hover {
  background: #dff3e9;
}

.byb-szuro__lista--racs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1180px) {
  .byb-szuro__lista--racs {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .byb-szuro__lista--racs {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 430px) {
  .byb-szuro__lista--racs {
    grid-template-columns: 1fr;
  }
}
.byb-szuro__lista--sor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ⛔ A BETÖLTÉS LÁTHATÓ ÁLLAPOTA (H-94, Dénes 2026-08-28: „a szűrő még mindig
   fosul tölt be … így beugrik beráng mikor rányomsz egy kategóriára").
   A kattintás pillanatában a lista halványodik, tehát a kattintásnak azonnal
   van válasza; a magasságot a sziget fogja le a csere idejére.
   ⛔ SPINNER NINCS: egy pörgő ikon mozgást tenne oda, ahol épp a mozgás a baj.
   A kurzor `progress`, hogy a szándék egyértelmű legyen. */
.byb-szuro__lista {
  transition: opacity 0.14s ease-out;
}
.byb-szuro__lista--tolt {
  opacity: 0.45;
  cursor: progress;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .byb-szuro__lista {
    transition: none;
  }
}
.byb-szuro__kartya {
  background: #fff;
  border: 1px solid #e8efec;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition:
    transform 0.22s,
    border-color 0.22s,
    box-shadow 0.22s;
}
.byb-szuro__kartya:hover {
  transform: translateY(-2px);
  border-color: #5ce8a0;
  box-shadow: 0 10px 30px rgba(13, 43, 43, 0.06);
}
.byb-szuro__kep {
  aspect-ratio: 4/3;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c4d1cb;
  overflow: hidden;
}
.byb-szuro__kep img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.byb-szuro__kep svg {
  width: 36px;
  height: 36px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.byb-szuro__kep--kicsi {
  aspect-ratio: auto;
  width: 64px;
  height: 56px;
  border-radius: 10px;
  flex: none;
}
.byb-szuro__kep--kicsi svg {
  width: 24px;
  height: 24px;
}

/* ⛔ A sziget saját 3-állapotú badge-e TÖRÖLVE (H-25, 2026-08-26). Két baja
   volt: a `.byb-szuro__badge--na` PIROSA (#E05B5B) ellentmondott Dénes
   2026-08-25-i döntésének („az elfogyott elutasító, ne legyen piros"), és a
   három állapot mást mondott ugyanarról a termékről, mint az SSR-rács hat
   állapota. A sziget innentől UGYANAZT a `.byb-stockbadge` + `.byb-sb--*`
   családot használja, ami alább áll. */

/* Az SSR-rács 5-állapotú készlet-jelvénye (a téma byb-stock-badge snippetje
   és a byb-global site-wide stílusa nyomán, KeszletJelveny szerint) */
.byb-stockbadge {
  font-size: 12px;
  font-weight: 600;
  color: #4a5e56;
  display: flex;
  align-items: center;
  gap: 6px;
}
.byb-sb__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: #8a9e96;
  box-shadow: 0 0 0 3px rgba(138, 158, 150, 0.15);
}
.byb-sb--in .byb-sb__dot {
  background: #5ce8a0;
  box-shadow: 0 0 0 3px rgba(92, 232, 160, 0.18);
}
.byb-sb--ext .byb-sb__dot {
  background: #f0b429;
  box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.18);
}
.byb-sb--eta .byb-sb__dot {
  background: transparent;
  border: 2px solid #5ce8a0;
  box-sizing: border-box;
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 3px rgba(92, 232, 160, 0.12);
}
.byb-sb--lead .byb-sb__dot {
  background: #ffc861;
  box-shadow: 0 0 0 3px rgba(255, 200, 97, 0.18);
}
.byb-sb--na .byb-sb__dot {
  background: #8a9e96;
  box-shadow: 0 0 0 3px rgba(138, 158, 150, 0.15);
}

.byb-szuro__link {
  color: inherit;
  text-decoration: none;
}
.byb-szuro__nev .byb-szuro__link:hover {
  color: #0c6b4e;
  text-decoration: underline;
}
.byb-szuro__kep .byb-szuro__link {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
/* Az EGÉSZ kártya és lista-sor kattintható: a név-link ::after-e szétfeszül
   a pozicionált soron; a gombok és vezérlők z-indexszel fölötte maradnak */
.byb-szuro__kartya {
  position: relative;
}
.byb-szuro__sor {
  position: relative;
}
.byb-szuro__kartya .byb-szuro__nev--kartya .byb-szuro__link::after,
.byb-szuro__sor .byb-szuro__nev .byb-szuro__link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.byb-szuro__lab,
.byb-szuro__sorveg {
  position: relative;
  z-index: 2;
}
.byb-szuro__nev {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.byb-szuro__nev--kartya {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
  font-size: 12.5px;
}
.byb-szuro__kod {
  font-size: 11px;
  font-weight: 600;
  color: #8a9e96;
  font-variant-numeric: tabular-nums;
}
.byb-szuro__ar {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
/* 0033/R9: partner-árszinten a bruttó alatt a nettó is ott áll (kereső-lap,
   kollekció-kártya). A szám a mag árazásából jön, a lap nem számol. */
.byb-szuro__arnetto {
  font-size: 12px;
  font-weight: 600;
  color: #0c6b4e;
  font-variant-numeric: tabular-nums;
}
/* A kártya lába: ÁR FÖLÜL, rendelés-sor ALATTA — pontosan úgy, ahogy a régi
   bolt kártyáján (sections/byb-offers-tabs.liquid `.byot-card__foot`) és a
   főoldali kártyán ma is. Amíg egy sorban álltak, a Kosárba nem fért el a
   léptető mellett, ezért lett néma ikon-gomb — ez volt a „furcsa" (Dénes,
   2026-08-28). Így a gomb visszakapta a szövegét. */
.byb-szuro__lab {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

/* az SSR-kártya Kosárba-formja: maga a `byot-addrow` sor (léptető + gomb),
   a gomb a régi téma `.byot-card__btn`-je (byb.css) */
.byb-szuro__gombform {
  flex: 1;
  min-width: 0;
}

.byb-szuro__sor {
  background: #fff;
  border: 1px solid #e8efec;
  border-radius: 14px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  transition: border-color 0.2s;
}
.byb-szuro__sor:hover {
  border-color: #5ce8a0;
}
.byb-szuro__sorkozep {
  min-width: 0;
}
.byb-szuro__sorkozep .byb-szuro__kod {
  margin: 2px 0 4px;
}
.byb-szuro__sorveg {
  display: flex;
  align-items: center;
  gap: 14px;
}
.byb-szuro__sorveg .byb-szuro__ar {
  text-align: right;
}
@media (max-width: 700px) {
  .byb-szuro__sor {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .byb-szuro__sorveg {
    grid-column: 1/-1;
    justify-content: space-between;
  }
}

.byb-szuro__gomb {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #f8fdfb;
  background: #0d2b2b;
  border: 1.5px solid #0d2b2b;
  border-radius: 100px;
  padding: 9px 18px;
  cursor: pointer;
  text-align: center;
  transition:
    background 0.2s,
    transform 0.2s;
}
.byb-szuro__gomb:hover {
  background: #123030;
  transform: translateY(-1px);
}
.byb-szuro__gomb--erd {
  background: transparent;
  color: #0d2b2b;
  text-decoration: none;
  display: inline-block;
}
.byb-szuro__gomb--erd:hover {
  background: #0d2b2b;
  color: #5ce8a0;
}
.byb-szuro__gomb--kicsi {
  font-size: 11.5px;
  padding: 7px 12px;
}
.byb-szuro__gomb[disabled] {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.byb-szuro__vaz {
  background: #f2f7f5;
  border-radius: 10px;
  height: 13px;
  margin-bottom: 9px;
}
/* A szűrősáv betöltés előtti vázlata (kollekcio.tsx). A változó szélességek
   zárt készlet, ezért osztályban vannak és nem inline `style=`-ban. */
.byb-szuro__csop--vaz {
  padding: 13px 2px;
}
.byb-szuro__vaz--60 {
  width: 60%;
}
.byb-szuro__vaz--80 {
  width: 80%;
}
.byb-szuro__uzenet {
  background: #eef9f3;
  border: 1px solid #bfe9d8;
  border-radius: 14px;
  padding: 18px 20px;
  font-size: 14px;
  color: #0c6b4e;
  line-height: 1.55;
  margin-bottom: 16px;
}
.byb-szuro__ures {
  grid-column: 1/-1;
  text-align: center;
  padding: 56px 20px;
  color: #4a5e56;
  font-size: 14px;
  background: #fff;
  border: 1px solid #e8efec;
  border-radius: 16px;
}

.byb-szuro__lapoz {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.byb-szuro__lap {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #0d2b2b;
  background: #fff;
  border: 1px solid #e8efec;
  border-radius: 100px;
  min-width: 40px;
  padding: 9px 14px;
  cursor: pointer;
}
.byb-szuro__lap[aria-current='true'] {
  background: #0d2b2b;
  color: #f8fdfb;
  border-color: #0d2b2b;
}
.byb-szuro__lap[disabled] {
  opacity: 0.4;
  cursor: default;
}

.byb-szuro__mob {
  display: none;
}
@media (max-width: 1040px) {
  .byb-szuro__mob {
    display: block;
    position: fixed;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 61;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: #0d2b2b;
    background: #5ce8a0;
    border: 1.5px solid #5ce8a0;
    border-radius: 100px;
    padding: 13px 26px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(13, 43, 43, 0.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .byb-szuro * {
    animation: none !important;
    transition: none !important;
  }
}

/* ══ /collections — a kollekció-lista (Teljes kínálat) oldal (Kör 19) ═══
   Az élő téma sections/byb-collections.liquid <style> blokkja változatlanul;
   egyedül a gyökér-szelektor lett .byb-cat helyett .byb-katalogus (lásd
   src/oldalak/kollekcio-lista.tsx fejlécét). A CSP unsafe-inline
   kivezetéséhez került ide; a lap a <style> helyén ezt a fájlt linkeli, tehát
   a kaszkád sorrendje (byb.css után, a törzsben) nem változott. A fájl többi
   szabálya .byb-szuro/.byb-sb névtérben van, ezen a lapon nincs mire
   illeszkednie. ═══════════════════════════════════════════════════════════ */

.byb-katalogus {
  background: #f8fdfb;
  font-family: Poppins, sans-serif;
  color: #0d2b2b;
  padding: 0 0 72px;
}
.byb-cat__wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.byb-cat__head {
  padding: 56px 0 34px;
}
.byb-cat__kicker {
  display: block;
  font:
    700 11px/1 Poppins,
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #128a63;
  margin-bottom: 12px;
}
.byb-katalogus h1 {
  font:
    800 clamp(30px, 4vw, 44px)/1.1 Poppins,
    sans-serif;
  letter-spacing: -0.02em;
  color: #0d2b2b;
  margin: 0;
}
.byb-cat__sub {
  font:
    400 15px/1.6 Poppins,
    sans-serif;
  color: #5c7a70;
  margin: 10px 0 0;
  max-width: 640px;
}

.byb-cat__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.byb-cat__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #dceae3;
  border-radius: 100px;
  padding: 8px 8px 8px 16px;
  font:
    600 13.5px Poppins,
    sans-serif;
  color: #0d2b2b;
  text-decoration: none;
  transition: 0.18s;
}
.byb-cat__pill span {
  background: #eef9f3;
  color: #0c6b4e;
  border-radius: 100px;
  padding: 3px 9px;
  font:
    700 11.5px Poppins,
    sans-serif;
}
.byb-cat__pill:hover {
  border-color: #5ce8a0;
  box-shadow: 0 6px 18px rgba(13, 43, 43, 0.06);
  transform: translateY(-1px);
}

.byb-cat__secbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
}
.byb-cat__secbar h2 {
  font:
    700 20px Poppins,
    sans-serif;
  letter-spacing: -0.01em;
  color: #0d2b2b;
  margin: 0;
}
.byb-cat__more {
  font:
    600 13.5px Poppins,
    sans-serif;
  color: #0c6b4e;
  text-decoration: none;
  border-bottom: 1px solid #5ce8a0;
  padding-bottom: 2px;
}
.byb-cat__more:hover {
  color: #0d2b2b;
}

.byb-cat__brands {
  margin-bottom: 46px;
}
.byb-cat__brandrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.byb-cat__brand {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #0d2b2b;
  border-radius: 14px;
  padding: 16px 18px;
  text-decoration: none;
  transition: 0.2s;
  border: 1px solid #0d2b2b;
}
.byb-cat__brand .n {
  font:
    700 15.5px Poppins,
    sans-serif;
  color: #f8fdfb;
}
.byb-cat__brand .q {
  font:
    500 12px Poppins,
    sans-serif;
  color: #7fb9a3;
}
.byb-cat__brand:hover {
  background: #123a37;
  border-color: #5ce8a0;
  transform: translateY(-2px);
}

.byb-cat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}
.byb-cat__card {
  background: #fff;
  border: 1px solid #e3efe9;
  border-radius: 18px;
  padding: 6px;
  transition: 0.2s;
}
.byb-cat__card:hover {
  border-color: #bfe9d8;
  box-shadow: 0 10px 30px rgba(13, 43, 43, 0.07);
}

.byb-cat__cardhead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  text-decoration: none;
  border-radius: 14px;
}
.byb-cat__cardhead:hover {
  background: #f4fbf8;
}
.byb-cat__ico {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eef9f3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0c6b4e;
}
.byb-cat__ico svg {
  width: 23px;
  height: 23px;
}
.byb-cat__ct {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.byb-cat__ct .t {
  font:
    700 16px Poppins,
    sans-serif;
  color: #0d2b2b;
  letter-spacing: -0.01em;
}
.byb-cat__ct .q {
  font:
    500 12.5px Poppins,
    sans-serif;
  color: #7d968d;
}
.byb-cat__arrow {
  flex: 0 0 auto;
  color: #bcd4cb;
  display: flex;
  transition: 0.2s;
}
.byb-cat__arrow svg {
  width: 18px;
  height: 18px;
}
.byb-cat__cardhead:hover .byb-cat__arrow {
  color: #0c6b4e;
  transform: translateX(2px);
}

.byb-cat__subs {
  list-style: none;
  margin: 2px 0 8px;
  padding: 0 12px;
}
.byb-cat__subs li {
  border-top: 1px solid #f0f6f3;
}
.byb-cat__subs a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 4px;
  font:
    500 13.5px Poppins,
    sans-serif;
  color: #4a6a5f;
  text-decoration: none;
  transition: 0.15s;
}
.byb-cat__subs a span {
  font:
    600 11.5px Poppins,
    sans-serif;
  color: #a8bdb4;
}
.byb-cat__subs a:hover {
  color: #0d2b2b;
  padding-left: 8px;
}
.byb-cat__subs a:hover span {
  color: #0c6b4e;
}

@media (max-width: 640px) {
  .byb-cat__wrap {
    padding: 0 16px;
  }
  .byb-cat__head {
    padding: 36px 0 26px;
  }
  .byb-cat__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Sziget nélküli (sima) kollekció: nincs szűrő-kulcs a kategoria_szabalyban,
   a lap a szerver-oldali listát mutatja. A JS-vezérelt elemek (oldalsáv,
   rendezés/nézet, mobil Szűrés gomb) itt nem élnek, ezért nem is látszanak. */
.byb-szuro--sima .byb-szuro__sav,
.byb-szuro--sima .byb-szuro__eszkozjobb,
.byb-szuro--sima .byb-szuro__mob,
.byb-szuro--sima .byb-szuro__katvalto {
  display: none;
}
.byb-szuro--sima .byb-szuro__racs {
  grid-template-columns: 1fr;
}
.byb-szuro__lapoz--ssr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}
.byb-szuro__lapgomb {
  display: inline-block;
  padding: 9px 18px;
  border: 1.5px solid var(--byb-200);
  border-radius: 100px;
  font: 700 13.5px var(--byb-font);
  color: var(--byb-dark);
  text-decoration: none;
}
.byb-szuro__lapgomb:hover {
  border-color: var(--byb-mint);
}
.byb-szuro__lapszam {
  font: 600 13.5px var(--byb-font);
  color: var(--byb-500);
}

/* ─────────────────────────────────────────────────────────────────────────
   H-33: B2B TÁBLÁZAT-NÉZET (Dénes, 2026-08-26: „szeretném ha vissza lenne
   töltve a speciális b2b nézet a partnereknek, amit megcsináltunk már
   Shopify-on"). A stílusok a régi téma `sections/byb-szuro.liquid`-jéből
   jönnek MÁSOLVA, nem újratervezve — az oszlop-rács, a mobil sorrend és a
   ragadós kijelölés-sáv is ugyanaz. Csak a nettó ár forrása változott: ma a
   saját magunk árazása adja, nem a Shopify App Proxy.
   ⛔ A nézetet csak partner látja; a gomb rejtve indul, a sziget mutatja meg.
   ───────────────────────────────────────────────────────────────────────── */
.byb-szuro__lista--tabla {
  display: block;
  background: #fff;
  border: 1px solid #e8efec;
  border-radius: 16px;
  overflow: hidden;
}
.byb-szuro__tsor {
  display: grid;
  grid-template-columns:
    30px 44px minmax(86px, 118px) minmax(120px, 1fr) minmax(88px, 150px)
    minmax(122px, 124px) minmax(136px, 152px);
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #f2f7f5;
}
.byb-szuro__tsor > div:empty {
  display: block;
}
.byb-szuro__tsor:last-child {
  border-bottom: none;
}
.byb-szuro__tsor:not(.byb-szuro__tfej):hover {
  background: #f8fdfb;
}
.byb-szuro__tfej {
  background: #f2f7f5;
  border-bottom: 1px solid #e8efec;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b8078;
  padding: 11px 14px;
}
.byb-szuro__tfej small {
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.byb-szuro__tfej .byb-szuro__tnetto {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.byb-szuro__tfej > div {
  white-space: normal;
  line-height: 1.25;
}
.byb-szuro__tfej .byb-szuro__tnetto small {
  display: block;
}
.byb-szuro__tjel input {
  width: 15px;
  height: 15px;
  accent-color: #0d2b2b;
  cursor: pointer;
}
.byb-szuro__kep--tabla {
  aspect-ratio: auto;
  width: 44px;
  height: 40px;
  border-radius: 8px;
  flex: none;
}
.byb-szuro__tkod {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.byb-szuro__tean {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: #8a9e96;
  margin-top: 2px;
}
.byb-szuro__tnev {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.byb-szuro__tnetto {
  font-size: 14px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.byb-szuro__tkesz {
  font-size: 11.5px;
  color: #8a9e96;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.byb-szuro__tkesz--van {
  color: #0c6b4e;
  font-weight: 700;
}
.byb-szuro__tkesz--kulso {
  color: #a07208;
  font-weight: 700;
}
.byb-szuro__tdb {
  width: 52px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #0d2b2b;
  text-align: center;
  padding: 7px 4px;
  border: 1px solid #d8e2dd;
  border-radius: 10px;
  background: #fff;
}
.byb-szuro__tdb:focus {
  outline: 2px solid #5ce8a0;
  outline-offset: -1px;
}
.byb-szuro__tgomb {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

/* Telefonon a rács széthullana: sorrend szerinti flex, fejléc nélkül. */
@media (max-width: 749px) {
  .byb-szuro__tfej {
    display: none;
  }
  .byb-szuro__tsor {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    padding: 12px 14px;
  }
  .byb-szuro__tnev {
    flex: 1 1 100%;
    order: 1;
  }
  .byb-szuro__tjel {
    order: 2;
  }
  .byb-szuro__kep--tabla {
    order: 3;
  }
  .byb-szuro__tkod {
    order: 4;
    flex: 1;
  }
  .byb-szuro__tnetto {
    order: 5;
  }
  .byb-szuro__tkeszcella {
    order: 6;
    flex: 1 1 55%;
  }
  .byb-szuro__tgomb {
    order: 7;
    flex: 1;
    justify-content: flex-end;
  }
}

/* A kijelölés-sáv ragad az aljra, hogy hosszú listán is elérhető maradjon. */
.byb-szuro__kijelsav {
  position: sticky;
  bottom: 14px;
  z-index: 5;
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: #0d2b2b;
  color: #f8fdfb;
  border-radius: 16px;
  padding: 12px 18px;
  box-shadow: 0 12px 34px rgba(13, 43, 43, 0.28);
}
.byb-szuro__kijelsav[hidden] {
  display: none;
}
.byb-szuro__kijelsav b {
  color: #5ce8a0;
}
.byb-szuro__kijelinfo {
  font-size: 13px;
  flex: 1;
  min-width: 220px;
}
.byb-szuro__gomb--mint {
  background: #5ce8a0;
  border-color: #5ce8a0;
  color: #0d2b2b;
}
.byb-szuro__gomb--mint:hover {
  background: #7eecb5;
}
.byb-szuro__gomb--kortvonal {
  background: transparent;
  color: #f8fdfb;
  border-color: #4a5e56;
}
.byb-szuro__gomb--kortvonal:hover {
  background: #123030;
  color: #5ce8a0;
}

/* H-40: készlet-darabszám a kártyán és a soron, CSAK belépett partnernek.
   „Saját 5 db · Beszállítói 100+ db" — a jelvény alatt, halkabban, mert az
   állapot a fő üzenet, a szám a döntés finomítása. */
.byb-szuro__kdb {
  font-size: 11px;
  font-weight: 600;
  color: #6b8078;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}