/* ============================================================================
   D1 FŐOLDAL  ·  a `docs/mockupok/fooldal-D1-2026-09-12.html` megvalósítása
   ============================================================================

   ⛔ EZ A LAP SAJÁT STÍLUSLAPJA, ÉS CSAK A D1 FŐOLDALON TÖLTŐDIK BE.
   Ezért egyetlen `body` szabályt tartalmaz (a lap alapszíne), minden mást a
   `.byb-d1` névtér alá tesz. A bolt többi lapja NEM változik tőle.

   ⛔ MIÉRT VAN ITT SAJÁT SZÍNKÉSZLET. 2026-09-12-én a „halkabb" nappali
   tokeneket a KÖZÖS byb.css-ben próbáltuk ki, és Dénes elutasította: „staging
   szörnyű, az eredeti tehát az élő jobb". A mérés utólag megmagyarázta, miért:
   a régi elrendezésen a legnagyobb felület a LEGVILÁGOSABB (lap #F8FDFB, L* 98,9;
   kártya #F2F7F5, L* 96,8 — fordított lépcső), és ha a lapot lehalkítjuk, a
   kártyák szürkének látszanak. A D1-en fordított a felállás: a felső harmadot
   egy SÖTÉT csempefal tartja, tehát a halkabb lap ott nem szürke, hanem keret.
   Egy lap, egy döntés: a halk tokenek ezzel az elrendezéssel jönnek, nem előtte.

   ⛔ ÁTMENET CSAK EGY VAN, ÉS AZ NEM DÍSZ (Dénes, 2026-09-09: „a gradient amink
   van az vagy fullon egy oldalról a másikba vagy sehogy, ez a glow effekt nem
   valami megnyerő"). A `.byb-d1__scrim` széltől szélig, egy irányban megy, és a
   dolga az, hogy a médián ülő fehér szöveg olvasható legyen. Radiális folt,
   „glow", sarok-derengés ezen a lapon nincs.
   ========================================================================== */

.byb-d1 {
  /* Nappali „Halk” — a mai bolt és a design system belső háza között. */
  --d1-page: #eef4f1;
  --d1-card: #f8fdfb;
  --d1-line: #dce7e2;
  --d1-line2: #cddcd5;
  --d1-ink: #0d2b2b;
  --d1-ink2: #3f534c;
  --d1-ink3: #5c716a;
  --d1-mint: #5ce8a0;
  --d1-mint-bg: #e9f7f0;
  /* ⛔ A LINK-ZÖLD NEM A MENTA. A menta (#5CE8A0) sötéten olvasható, világos
     lapon 1,6:1 — nem szöveg-szín. A `--d1-sig` a sötét párja, fehéren 6,3:1. */
  --d1-sig: #0c6b4e;
  --d1-stage: #0b2927;
  --d1-on-d: #f8fdfb;
  --d1-on-d2: #c4d1cb;

  color: var(--d1-ink);
}

/* A lap alapszíne. Csak itt: ez a fájl máshol nincs behúzva.
   ⛔ Az érték szó szerint áll, nem `var(--d1-page)`: a tokenek a `.byb-d1`-en
   élnek, ami a `body` LESZÁRMAZOTTJA, tehát onnan nem öröklődik felfelé. */
body {
  background: #eef4f1;
}

.byb-d1__wrap {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding-top: 20px;
  padding-bottom: 44px;
}

/* ---------------------------------------------------------------- bal sáv */

.byb-d1__rail {
  position: sticky;
  /* Csak a fejléc FŐSORA marad a lap fölött (a kategória-nav lentebb el van
     rejtve), tehát 80px + levegő. */
  top: 92px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.byb-d1__railbox {
  border: 1px solid var(--d1-line2);
  border-radius: 14px;
  overflow: hidden;
  background: var(--d1-card);
}
.byb-d1__railcim,
.byb-d1__railfncim {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--d1-ink3);
}
.byb-d1__railcim {
  padding: 9px 13px 8px;
  border-bottom: 1px solid var(--d1-line);
}
.byb-d1__railbox a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--d1-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--d1-line);
}
.byb-d1__railbox a:last-child {
  border-bottom: 0;
}
.byb-d1__railbox a:hover,
.byb-d1__railbox a:focus-visible {
  background: var(--d1-mint-bg);
}
.byb-d1__db {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--d1-ink3);
  font-variant-numeric: tabular-nums;
}
.byb-d1__tobb {
  color: var(--d1-sig);
  font-weight: 700;
}
.byb-d1__railfn {
  border: 1px dashed var(--d1-line2);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.byb-d1__railfn a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--d1-ink);
  text-decoration: none;
}
.byb-d1__railfn a:hover,
.byb-d1__railfn a:focus-visible {
  color: var(--d1-sig);
}

/* ------------------------------------------------------------ csempe-fal */

.byb-d1__fal {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  /* ⛔ R269: a sor NŐHET, ha a szöveg nem fér (mérve élesben: 901–1200 px
     között a keskeny csempék 20–129 px-et vágtak le, a „Megnézem" linkkel
     együtt, mert a csempe `overflow: hidden`). */
  grid-auto-rows: minmax(150px, auto);
  gap: 12px;
}
.byb-d1__cs {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  text-decoration: none;
  transition: transform 0.2s;
}
.byb-d1__cs:hover {
  transform: translateY(-2px);
}
.byb-d1__cs b {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.byb-d1__cs p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  opacity: 0.85;
}
.byb-d1__foot {
  margin-top: auto;
  font-size: 12px;
  font-weight: 700;
}
.byb-d1__eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--d1-mint);
  margin-bottom: auto;
}

/* a slotok. A MÉRET fix, a TARTALOM cserélhető. */
.byb-d1__cs--nagy {
  grid-column: span 4;
  grid-row: span 2;
}
.byb-d1__cs--magas {
  grid-column: span 2;
  grid-row: span 2;
}
.byb-d1__cs--eszkoz {
  grid-column: span 2;
}
.byb-d1__cs--cta {
  grid-column: span 2;
}

/* sötét (média-tartó) csempék */
.byb-d1__cs--nagy,
.byb-d1__cs--magas {
  background: var(--d1-stage);
  color: var(--d1-on-d);
  border: 1px solid rgba(92, 232, 160, 0.2);
  justify-content: flex-end;
}
.byb-d1__cs--nagy b {
  font-size: 30px;
  line-height: 1.08;
  max-width: 15ch;
}
.byb-d1__cs--magas b {
  font-size: 22px;
  line-height: 1.1;
}
.byb-d1__cs--nagy .byb-d1__foot,
.byb-d1__cs--magas .byb-d1__foot {
  margin-top: 8px;
  color: var(--d1-mint);
}

/* világos (munkakártya) csempék */
.byb-d1__cs--eszkoz {
  background: var(--d1-card);
  border: 1px solid var(--d1-line2);
  color: var(--d1-ink);
}
.byb-d1__cs--eszkoz p {
  color: var(--d1-ink2);
  opacity: 1;
}
.byb-d1__cs--eszkoz .byb-d1__foot {
  color: var(--d1-sig);
}
/* ⛔ AZ IKON A CÍM SORÁBAN, DOBOZ NÉLKÜL (mockup B, 2026-09-23). A doboz a
   150 px-es cellából 32 px-et vitt el, és a cím fölött árván állt; a leírás
   és a láb a cím alá igazodik, a vonalikon szélességével behúzva. */
.byb-d1__cim {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.byb-d1__cim b {
  font-size: 16.5px;
  text-wrap: balance;
}
.byb-d1__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: -1px;
}
.byb-d1__ic svg {
  width: 22px;
  height: 22px;
  stroke: var(--d1-sig);
  fill: none;
  stroke-width: 2;
}
.byb-d1__cs--eszkoz {
  gap: 5px;
}
.byb-d1__cs--eszkoz p {
  line-height: 1.4;
}
.byb-d1__cim ~ p,
.byb-d1__cim ~ .byb-d1__foot {
  padding-left: 31px;
}

/* állandó CTA */
.byb-d1__cs--cta {
  background: var(--d1-mint);
  border: 1px solid var(--d1-mint);
  color: #0d2b2b;
}
.byb-d1__cs--cta .byb-d1__foot {
  color: #0d2b2b;
}

/* ⛔ MÉDIATARTÓ, NEM SZÍNES CSEMPE (Dénes, 2026-09-09: „fotók, meg nem színes
   csempék lesznek márkáknak, néhányban videó… tehát nem színek lesznek
   többnyire"). A tartalmat a `fooldal_csempe` tábla (0065) adja; ami nincs
   benne, azt a lap alapértelmezése rajzolja, média nélkül.

   ⛔ A MÉDIA ÁTVISZI A CSEMPÉT SÖTÉTBE, bármelyik slotban áll. A világos
   slotokon (eszköz, CTA) a szöveg sötét; ha rájuk kép kerül, olvashatatlan
   lenne. Ez nem a slot döntése, hanem a médiáé. */
.byb-d1__cs--media {
  background: var(--d1-stage);
  color: var(--d1-on-d);
  border: 1px solid rgba(92, 232, 160, 0.2);
  justify-content: flex-end;
}
.byb-d1__cs--media p {
  color: var(--d1-on-d2);
  opacity: 0.92;
}
.byb-d1__cs--media .byb-d1__foot {
  color: var(--d1-mint);
  margin-top: 8px;
}
.byb-d1__cs--media .byb-d1__eyebrow {
  color: var(--d1-mint);
}
/* ⛔ VILÁGOS CSEMPÉN A SZEMÖLDÖK-SOR NEM LEHET MENTA: a menta (#5CE8A0)
   fehéren 1,6:1, mentán meg önmaga. Mindkét világos slot a saját szövegszínét
   halkítja, nem másik színt vesz fel. */
.byb-d1__cs--eszkoz .byb-d1__eyebrow {
  color: var(--d1-ink3);
}
.byb-d1__cs--cta .byb-d1__eyebrow {
  color: rgba(13, 43, 43, 0.72);
}
/* ⛔ A CTA CÍME EGY VONALBAN A SZOMSZÉD CSEMPÉK CÍMÉVEL (Dénes, 2026-09-23:
   „az árlistánkos el van csúszva"). Mérve: a szemöldök-sor a címet 39 px-re
   tolta (a szomszédoké 17), és a csempe 9 px-szel túl is csordult. Desktopon
   a szemöldök a jobb alsó sarokba megy, a láb sorába; a keskeny mobil-cellán
   nem férne el a láb mellett, ott marad felül, a cella úgyis nő a szöveggel. */
/* R269: a szemöldök a láb SORÁBAN van (DOM), jobbra; ha nem fér mellé, alá
   törik. Az abszolút jobb alsó sarok minden szélességen rácsúszott a linkre. */
.byb-d1__foot--sor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}
.byb-d1__foot--sor .byb-d1__eyebrow {
  margin: 0;
  font-size: 10px;
  line-height: 1.2;
}

.byb-d1__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--d1-stage);
}
.byb-d1__media img,
.byb-d1__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* egyenletes tinta: a fehér hátterű termékkép ne világítson ki a falból */
.byb-d1__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(6, 29, 27, 0.22);
}
.byb-d1__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(6, 29, 27, 0) 26%,
    rgba(6, 29, 27, 0.62) 62%,
    rgba(6, 29, 27, 0.92) 100%
  );
}
.byb-d1__cs > .byb-d1__eyebrow,
.byb-d1__cs > b,
.byb-d1__cs > p,
.byb-d1__cs > .byb-d1__foot,
.byb-d1__cs > .byb-d1__cim {
  position: relative;
  z-index: 2;
}

/* -------------------------------------------------------------- gyorscsípek */

.byb-d1__csipek {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.byb-d1__csipek a {
  border: 1px solid var(--d1-line2);
  background: var(--d1-card);
  border-radius: 100px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--d1-ink);
  text-decoration: none;
}
.byb-d1__csipek a:hover,
.byb-d1__csipek a:focus-visible {
  border-color: var(--d1-mint);
  background: var(--d1-mint-bg);
}

/* ------------------------------------------------------- termék-fülek (byot)

   A szekció a mai főoldalról jön változatlanul (`TermekTabok`), csak a saját
   lap-keretét veszi le: itt már egy rácsoszlopban ül, tehát nem kell neki sem
   1280-as korlát, sem 32 px oldalpadding, sem saját háttér. */
.byb-d1 .byot {
  background: none;
}
.byb-d1 .byot-wrap {
  max-width: none;
  padding: 0;
}
.byb-d1 .byot-sec {
  padding: 26px 0 0;
}

/* ---------------------------------------------------------------- márkák */

.byb-d1__panel {
  background: var(--d1-card);
  border: 1px solid var(--d1-line2);
  border-radius: 16px;
  padding: 16px 18px;
  margin-top: 16px;
}
.byb-d1__panelfej {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.byb-d1__panelfej h2 {
  margin: 0;
  font: 800 17px/1.2 var(--byb-font);
  letter-spacing: -0.02em;
}
.byb-d1__panelfej p {
  margin: 0;
  font-size: 12.5px;
  color: var(--d1-ink3);
}
.byb-d1__panelfej a {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--d1-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--d1-mint);
  padding-bottom: 1px;
}
.byb-d1__mini {
  display: grid;
  /* R347: két forgalmazott márka (a ColorWay és a goobay kikerült), két oszlop */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.byb-d1__mc {
  border: 1px solid var(--d1-line);
  border-radius: 12px;
  padding: 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--d1-card);
  color: var(--d1-ink);
  text-decoration: none;
}
/* R346: az üres, színes helyőrző slot (Dénes: „egyelőre legyen üres színes
   placeholder"). Egyszínű, a BYB mély tealje; nincs link, nincs szöveg, nincs
   hover. A gradiens-szabály (vault SZ-gradiens): vagy széltől szélig, vagy
   sehogy; itt sehogy. */
.byb-d1__cs--ures,
.byb-d1__cs--ures:hover {
  background: var(--d1-stage);
  border-color: var(--d1-stage);
  cursor: default;
  pointer-events: none;
}
.byb-d1__mc:hover,
.byb-d1__mc:focus-visible {
  border-color: var(--d1-mint);
}
.byb-d1__mc b {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}
.byb-d1__mc span {
  font-size: 11.5px;
  color: var(--d1-ink3);
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}

/* ⛔ A FEJLÉC KATEGÓRIA-SORA ITT FÖLÖSLEG (Dénes, 2026-09-12: „a felső lécet
   módosítani kell, hiszen a kategóriák balra lesznek").

   A katalógus ezen a lapon a BAL SÁVBAN áll, teljes listával és
   darabszámokkal. A fejléc második sora ugyanazt a hat kategóriát ismételné
   meg, rövidítve — két navigáció ugyanarra, egymás alatt. Ez a lap tehát
   80 px-es fejléccel indul, nem 132-vel.

   ⛔ 900 PX ALATT VISSZAJÖN. Ott a bal sáv a csempefal ALÁ csúszik, tehát a
   katalógus a hajtás alatt van; a fejléc-sor ilyenkor az EGYETLEN közeli
   belépő a kategóriákhoz. Ez a fájl csak a D1 főoldalon töltődik be, tehát a
   bolt többi lapja változatlan.
   ⛔ `display: none`, nem törlés: a `byb-katnav.js` és a mega-menü a lap
   minden MÁS útján dolgozik tovább. */
@media (min-width: 901px) {
  .byb-catnav {
    display: none;
  }
}

/* ------------------------------------------------------------------ mobil */

/* ⛔ R269: 901–1200 px között a bal sáv mellett a hat oszlop túl keskeny (a kis
   csempék 178–271 px-esek voltak). Itt a fal négy oszlopra vált, ahogy 900 px
   alatt is, és a CTA teljes sort kap, hogy ne maradjon üres cella. */
@media (max-width: 1200px) and (min-width: 901px) {
  .byb-d1__fal {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .byb-d1__cs--nagy,
  .byb-d1__cs--cta {
    grid-column: span 4;
  }
}

@media (max-width: 1040px) {
  .byb-d1__mini {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ⛔ A KATALÓGUS NEM TŰNHET EL KIS KÉPERNYŐN. A mockup itt egyszerűen elrejti a
   bal sávot (`.rail{display:none}`), mert ott egy mobil kategória-sor vette át
   a szerepét. A boltban ilyen sor NINCS a fejlécben, tehát a rejtés a
   katalógust venné el a telefonos látogatótól. Helyette a sáv a fal ALÁ kerül,
   teljes szélességben, kéthasábos listaként. */
@media (max-width: 900px) {
  .byb-d1__wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  .byb-d1__rail {
    position: static;
    order: 2;
  }
  .byb-d1__railbox {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .byb-d1__railcim {
    grid-column: 1 / -1;
  }
  .byb-d1__railbox a:nth-last-child(2) {
    border-bottom: 1px solid var(--d1-line);
  }
  .byb-d1__tobb {
    grid-column: 1 / -1;
  }
  .byb-d1__fal {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .byb-d1__cs--nagy {
    grid-column: span 4;
  }
}

@media (max-width: 620px) {
  .byb-d1__wrap {
    padding-top: 14px;
    padding-bottom: 28px;
    gap: 16px;
  }
  /* ⛔ A SOR NŐHET, HA A SZÖVEG NEM FÉR (mérve 390 px-en: a „Hikvision- és
     Dahua-megfeleltetés" leírása levágódott a 128 px-es cellában, mert a
     csempe `overflow: hidden`). A `minmax(128px, auto)` megtartja a fal
     ritmusát, de nem vág el szöveget. */
  .byb-d1__fal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(128px, auto);
  }
  .byb-d1__cs {
    padding: 14px 15px;
  }
  .byb-d1__cs b {
    font-size: 15px;
  }
  /* a szűk cellán a behúzás elfogy: a leírás a bal élre áll, az ikon 20 px */
  .byb-d1__cim b {
    font-size: 15px;
  }
  .byb-d1__ic,
  .byb-d1__ic svg {
    width: 20px;
    height: 20px;
  }
  .byb-d1__cim ~ p,
  .byb-d1__cim ~ .byb-d1__foot {
    padding-left: 0;
  }
  .byb-d1__cs--nagy {
    grid-column: span 2;
    grid-row: span 2;
  }
  .byb-d1__cs--nagy b {
    font-size: 21px;
  }
  .byb-d1__cs--magas,
  .byb-d1__cs--eszkoz,
  .byb-d1__cs--cta {
    grid-column: span 1;
  }
  .byb-d1__cs--magas {
    grid-row: span 2;
  }
  .byb-d1__mini {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================ hirdetmény
   A NAGY, MÉDIÁS CSEMPE HIRDETMÉNY: szöveg balra, a termékkép jobbra.
   Csak a `nagy` sloton és csak akkor, ha van rajta kép; a kisebb médiás
   csempék maradnak a lentről felúszó szöveges kezelésnél.

   ⛔ A KÉP NEM VÁGHATÓ. A nagy csempe oldalaránya töréspontonként más
   (mérve 2026-09-19: 2.00 · 1.72 · 1.41 · 2.68 · 2.23), ezért `cover`
   mellett hol a bal üres sáv fogy el a szöveg alól, hol a szélső termék
   esik ki a képből. `contain` + a kép szélével azonos LAPOS háttér:
   a letterbox-sáv láthatatlan, a termék sosem sérül.
   ⛔ A KÉP MAGA IS ERRE KÉSZÜL: 2.10:1, balra 45% üres, a termékcsoport a
   jobb 51,5%-on (recept: scripts/kepek/csempe-szett-komponal.py). Más
   arányú képpel ez az elrendezés nem áll össze. */
.byb-d1__cs--nagy.byb-d1__cs--media {
  justify-content: center;
  padding: 20px 24px;
}
.byb-d1__cs--nagy.byb-d1__cs--media .byb-d1__media {
  background: #011012;
}
.byb-d1__cs--nagy.byb-d1__cs--media .byb-d1__media img {
  object-fit: contain;
  object-position: right center;
}
.byb-d1__cs--nagy.byb-d1__cs--media .byb-d1__scrim {
  background: linear-gradient(
    90deg,
    rgba(1, 16, 18, 0.92) 0%,
    rgba(1, 16, 18, 0.72) 28%,
    rgba(1, 16, 18, 0) 48%
  );
}
.byb-d1__cs--nagy.byb-d1__cs--media b {
  font-size: 29px;
  line-height: 1.1;
  max-width: 43%;
}
.byb-d1__cs--nagy.byb-d1__cs--media p {
  max-width: 43%;
  margin-top: 6px;
}
/* a CTA itt gomb, nem aláhúzás nélküli link: ez a fal egyetlen elsődleges
   cselekvése, a többi csempe lábsora marad menta szöveg */
.byb-d1__cs--nagy.byb-d1__cs--media .byb-d1__foot {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  margin-top: 14px;
  border-radius: 100px;
  background: var(--d1-mint);
  color: var(--d1-stage);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.byb-d1__cs--nagy.byb-d1__cs--media:hover .byb-d1__foot {
  background: #7eecb5;
}

@media (max-width: 1200px) and (min-width: 1041px) {
  .byb-d1__cs--nagy.byb-d1__cs--media b {
    font-size: 25px;
    max-width: 44%;
  }
  .byb-d1__cs--nagy.byb-d1__cs--media p {
    max-width: 44%;
    font-size: 13.5px;
  }
}
/* 901–1040: itt a legkeskenyebb a csempe (mérve 439 px / 1.41) */
@media (max-width: 1040px) and (min-width: 901px) {
  .byb-d1__cs--nagy.byb-d1__cs--media {
    padding: 16px 18px;
  }
  .byb-d1__cs--nagy.byb-d1__cs--media b {
    font-size: 20px;
    max-width: 47%;
  }
  .byb-d1__cs--nagy.byb-d1__cs--media p {
    max-width: 47%;
    font-size: 12.5px;
  }
}
/* 621–900: a nagy csempe teljes szélességet kap, van hely */
@media (max-width: 900px) and (min-width: 621px) {
  .byb-d1__cs--nagy.byb-d1__cs--media b {
    font-size: 28px;
    max-width: 40%;
  }
  .byb-d1__cs--nagy.byb-d1__cs--media p {
    max-width: 40%;
  }
}
/* ⛔ TELEFONON A SZETT NEM LÓGHAT KI. Álló csempén a szöveg fent, a kép egy
   alsó sávban. A sáv aránya 354/291 = 1.22, a kép 2.10, tehát `cover` + jobb
   szél mellett a látszó ablak a kép 42–100%-a; a termékcsoport 45–96,5%-on
   van, vagyis mindkét oldalt ~12 px levegővel pont belefér. A sávmagasság és
   a képarány EGYÜTT áll be: ha bármelyik változik, újra kell mérni. */
@media (max-width: 620px) {
  .byb-d1__cs--nagy.byb-d1__cs--media {
    min-height: 470px;
    padding: 16px;
    justify-content: flex-start;
  }
  .byb-d1__cs--nagy.byb-d1__cs--media b {
    font-size: 22px;
    max-width: none;
  }
  .byb-d1__cs--nagy.byb-d1__cs--media p {
    max-width: none;
  }
  .byb-d1__cs--nagy.byb-d1__cs--media .byb-d1__media {
    inset: auto 0 0 0;
    height: 62%;
    background: transparent;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
  }
  .byb-d1__cs--nagy.byb-d1__cs--media .byb-d1__media img {
    object-fit: cover;
  }
  .byb-d1__cs--nagy.byb-d1__cs--media .byb-d1__scrim {
    background: linear-gradient(
      180deg,
      rgba(1, 16, 18, 0.92) 0%,
      rgba(1, 16, 18, 0.6) 38%,
      rgba(1, 16, 18, 0) 58%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .byb-d1__cs {
    transition: none;
  }
}