/* ==========================================================================
   zd-kupatilski-namestaj.css — katalog „Kupatilski nameštaj"
   (/kupatilski-namestaj/), Zlatiborski dom

   Učitava se POSLE zd-foundation.css, zd-home.css i zd-keramika.css. Sve klase
   ove stranice nose prefiks .zd-kn-, a sve je skopirano na .zd-kn na <body>.

   Od 08.10.2026 stranica je KATALOG (filteri + mreža proizvoda), ne hub
   kategorija. Filter panel, mobilni drawer, traka rezultata i kartice su
   komponente Keramike (zd-keramika.css, klase zd-k-*) — ovde se NE kopiraju,
   samo se dopunjuje ono što je specifično za kupatilski nameštaj:
     · ambijentalni hero „02 — Ambijent" u širini kataloga
     · kadar fotografije proizvoda (contain na beloj podlozi — nameštaj se ne seče)
     · boje swatch-eva za porodice dekora
     · dijalog sa detaljima proizvoda

   Tipografija dolazi iz globalnog zd-typography.css (Montserrat + Inter).
   ========================================================================== */

.zd-kn{
  --kn-max:     var(--zd-max-content);
  --kn-paper:   #FFFFFF;
  --kn-ph:      #F1EEE8;
  --kn-line:    var(--zd-line);
  --kn-line-2:  var(--zd-line-strong);
  --kn-ink:     var(--zd-ink);
  --kn-ink-2:   var(--zd-ink-soft);
  --kn-gold:    var(--zd-accent);
  --kn-gold-tx: var(--zd-accent-dark);
  /* Rezerva ispod fiksnog headera za „Pogledajte ponudu" (vidi .zd-kn-anchor).
     Izmereno posle skrola: ispod 992 px info traka ostaje vidljiva (header =
     --zd-header-h), 992–1199 px nav kartica ima dva reda (dno ≈ 91 px), od
     1200 px dno je 88 px. Cilj: zaglavlje „Kompletna ponuda" ≥16 px ispod nav-a. */
  --kn-anchor:  calc(var(--zd-header-h) - 12px);
  background: var(--kn-paper);
  color: var(--kn-ink);
}

/* Mobirise theme skripta ume da doda .hidden i animate__ klase — sadržaj mora
   biti odmah vidljiv (ista zaštita kao na keramici, vratima i laminatu). */
.zd-kn #zd-kn-main .hidden{ visibility: visible; }
.zd-kn #zd-kn-main .animate__animated{ animation: none; opacity: 1; }

/* Kontrole koje rade samo uz JS (filteri, sortiranje, „Prikaži još"). Bez JS-a
   ostaje ceo katalog bez neupotrebljivih dugmića. Klasu zd-js postavlja inline
   skripta u <head>, pre prvog crtanja. */
html:not(.zd-js) .zd-kn .zd-kn-needs-js{ display: none !important; }

/* `hidden` mora da pobedi display iz komponenti Keramike (flex/grid). */
.zd-kn .zd-k-card[hidden],
.zd-kn .zd-k-opt[hidden],
.zd-kn .zd-k-sw[hidden],
.zd-kn .zd-k-grid[hidden],
.zd-kn .zd-k-more[hidden],
.zd-kn .zd-k-empty[hidden],
.zd-kn .zd-k-active[hidden]{ display: none !important; }

.zd-kn .zd-kn-shell{
  width: 100%;
  max-width: calc(var(--kn-max) + 2 * var(--zd-gutter));
  margin-inline: auto;
  padding-inline: var(--zd-gutter);
}

/* --------------------------------------------------------------------------
   0. Zajednički elementi
   -------------------------------------------------------------------------- */
.zd-kn .zd-kn-eyebrow{
  margin: 0 0 clamp(.5rem, .8vw, .7rem);
  font-family: var(--zd-font-display);
  font-weight: var(--zd-fw-ui);
  font-size: var(--zd-fs-micro);
  letter-spacing: var(--zd-ls-eyebrow);
  text-transform: uppercase;
  color: var(--kn-gold-tx);
}
.zd-kn .zd-kn-eyebrow::after{
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: .5rem;
  background: var(--kn-gold);
}
.zd-kn .zd-kn-arrow{
  width: 1em; height: 1em;
  margin-left: .45em;
  vertical-align: -.1em;
  transition: transform var(--zd-t-fast) var(--zd-ease);
}

/* --------------------------------------------------------------------------
   1. Hero — „02 — Ambijent"
   Široka ambijentalna fotografija u ISTOM kontejneru kao katalog
   (`.zd-k-shell` + tokeni sa `.zd-keramika` na sekciji), tekst preko leve,
   zatamnjene strane. Nije full-bleed: leva ivica = filteri / „Kompletna
   ponuda", desna ivica = poslednja kartica.

   Izvorna fotografija ima samo 650 × 514 px (veća ne postoji u projektu), pa
   se na desktopu NE razvlači preko cele širine: zauzima desnih ~60 %, gde je
   uvećanje ≈1,2–1,5×, a leva strana je tamna ploča u koju se kadar pretapa.
   -------------------------------------------------------------------------- */
.zd-kn .zd-kn-hero{
  --kn-hero-bg:     var(--zd-surface-deep);          /* #1C1A17 */
  --kn-hero-bg-rgb: 28, 26, 23;
  --kn-hero-radius: 12px;
  --kn-hero-tx:     #FFFFFF;
  --kn-hero-tx-2:   rgba(241, 236, 227, .84);         /* --zd-ink-invert, ublažen */
  /* Na 992–1199 px nav kartica ima dva reda i viša je od --zd-header-h, pa
     razmak mora da ostane ≥10 px i tamo (izmereno: 1024 px). */
  padding-top: calc(var(--zd-header-h) + clamp(1rem, 1.6vw, 1.25rem));
  padding-bottom: clamp(1.25rem, 2.4vw, 2rem);
  background: var(--kn-paper);
}
.zd-kn .zd-kn-crumbs{ margin: 0 0 clamp(.55rem, .9vw, .8rem); }
.zd-kn .zd-kn-crumbs ol{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem;
  font-size: var(--zd-fs-micro);
  color: var(--kn-ink-2);
}
.zd-kn .zd-kn-crumbs li + li::before{ content: "›"; margin-right: .45rem; color: var(--kn-line-2); }
.zd-kn .zd-kn-crumbs a{ color: var(--kn-ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.zd-kn .zd-kn-crumbs a:hover{ color: var(--kn-gold-tx); border-bottom-color: currentColor; }
.zd-kn .zd-kn-crumbs [aria-current]{ color: var(--kn-ink); }

.zd-kn .zd-kn-hero__stage{
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(360px, 27vw, 440px);
  overflow: hidden;
  border-radius: var(--kn-hero-radius);
  background: var(--kn-hero-bg);
  color: var(--kn-hero-tx);
}
.zd-kn .zd-kn-hero__media{
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  margin: 0;
  z-index: -1;
  background: var(--kn-hero-bg);
}
.zd-kn .zd-kn-hero__media picture,
.zd-kn .zd-kn-hero__media img{ display: block; width: 100%; height: 100%; }
.zd-kn .zd-kn-hero__media img{ object-fit: cover; object-position: 50% 44%; }
/* Pretapanje: leva ivica kadra nestaje u ploči, a blagi ton preko cele
   fotografije drži je u istoj temperaturi kao tekst. */
.zd-kn .zd-kn-hero__media::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(var(--kn-hero-bg-rgb), 1) 0%,
      rgba(var(--kn-hero-bg-rgb), .9) 16%,
      rgba(var(--kn-hero-bg-rgb), .5) 34%,
      rgba(var(--kn-hero-bg-rgb), .12) 50%,
      rgba(var(--kn-hero-bg-rgb), 0) 60%),
    linear-gradient(0deg, rgba(var(--kn-hero-bg-rgb), .08), rgba(var(--kn-hero-bg-rgb), .08));
  pointer-events: none;
}
.zd-kn .zd-kn-hero__body{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(100%, 43rem);
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 3.4vw, 3.25rem);
}

.zd-kn .zd-kn-hero .zd-kn-eyebrow{ margin-bottom: .6rem; line-height: 1.45; color: var(--zd-gold-on-dark); }
.zd-kn .zd-kn-hero .zd-kn-eyebrow::after{ display: none; }
.zd-kn .zd-kn-hero__h1{
  margin: 0;
  font-family: var(--zd-font-display);
  font-weight: var(--zd-fw-display-light);
  font-size: clamp(2rem, 3.1vw, 2.875rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--kn-hero-tx);
}
.zd-kn .zd-kn-hero__sub{
  margin: .5rem 0 0;
  font-family: var(--zd-font-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  line-height: 1.35;
  color: var(--kn-hero-tx);
}
.zd-kn .zd-kn-hero__lead{
  margin: .55rem 0 0;
  max-width: 62ch;
  font-size: var(--zd-fs-small);
  line-height: 1.6;
  color: var(--kn-hero-tx-2);
}
/* Broj proizvoda, proizvođača i serija — računa ih generator iz Excela.
   Jedan red, razdvojen tačkama; bez pill elemenata. */
.zd-kn .zd-kn-facts{
  list-style: none; margin: .85rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .2rem 0;
  font-size: var(--zd-fs-small);
  color: var(--kn-hero-tx-2);
}
.zd-kn .zd-kn-facts li:not(:last-child)::after{
  /* tačka ide uz prethodni podatak, pa prelomljen red ne počinje tačkom */
  content: "·";
  margin: 0 .6rem;
  color: var(--zd-gold-on-dark);
}
.zd-kn .zd-kn-facts li{ white-space: nowrap; }
.zd-kn .zd-kn-facts strong{ font-weight: 600; color: var(--kn-hero-tx); }

.zd-kn .zd-kn-hero__cta{
  margin-top: clamp(1rem, 1.5vw, 1.35rem);
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  min-height: 46px;
  padding: .6rem 1.35rem;
  border: 1px solid var(--zd-accent);
  border-radius: 999px;
  background: var(--zd-accent);
  font-family: var(--zd-font-body);
  font-weight: var(--zd-fw-cta);
  font-size: 1rem;
  color: var(--zd-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--zd-t) var(--zd-ease),
              border-color var(--zd-t) var(--zd-ease);
}
.zd-kn .zd-kn-hero__cta .zd-kn-arrow{ width: 18px; height: 18px; margin-left: 0; color: currentColor; }
.zd-kn .zd-kn-hero__cta:focus-visible{
  outline: 2px solid var(--zd-gold-on-dark);
  outline-offset: 3px;
}

@media (min-width: 992px){ .zd-kn{ --kn-anchor: 76px; } }
@media (min-width: 1200px){ .zd-kn{ --kn-anchor: 64px; } }

/* Sidro za „Pogledajte ponudu".
   Mobirise theme skripta presreće klik na link sa hash-om i skroluje tako da
   cilj završi na samom vrhu prozora (bez obzira na scroll-margin) — zato id
   stoji na praznom sidru pomerenom naviše za visinu headera. */
.zd-kn .zd-kn-anchor{
  display: block;
  position: relative;
  top: calc(-1 * var(--kn-anchor));
  height: 0;
  scroll-margin-top: var(--kn-anchor);
}

/* --------------------------------------------------------------------------
   2. Katalog — dopune komponentama Keramike
   -------------------------------------------------------------------------- */
/* Fotografije nameštaja su mešovite (studijski snimci na beloj podlozi i
   ambijenti različitih proporcija). Cover bi sekao ogledala i ormariće, pa se
   kadar drži celim: contain na beloj podlozi, sa malo vazduha. */
.zd-kn .zd-k-card__media{
  aspect-ratio: 4 / 3;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(231,224,210,.7);
}
.zd-kn .zd-k-card__media picture{ display: block; width: 100%; height: 100%; }
.zd-kn .zd-k-card__img{ object-fit: contain; padding: 5%; }
/* Drugi meta red nosi šifru dobavljača — tabularne cifre. */
.zd-kn .zd-k-card__meta--2{ font-variant-numeric: tabular-nums; letter-spacing: .01em; }
/* Stvarna akcija (Stara_cena_RSD > Cena_RSD u Excelu) — trenutno nijedna. */
.zd-kn .zd-kn-old{
  margin-right: .35em;
  font-size: .75em; font-weight: 500;
  color: var(--kn-ink-2);
}

/* Porodice dekora u swatch-evima. */
.zd-kn .zd-kn-sw--bela{ background: #FFFFFF; }
.zd-kn .zd-kn-sw--krem{ background: #EFE3C8; }
.zd-kn .zd-kn-sw--bez{ background: #D8C3A0; }
.zd-kn .zd-kn-sw--siva{ background: #9D9C98; }
.zd-kn .zd-kn-sw--antracit{ background: #3F4145; }
.zd-kn .zd-kn-sw--zelena{ background: #6F8B6C; }
.zd-kn .zd-kn-sw--plava{ background: #5C7B9A; }
.zd-kn .zd-kn-sw--drvo{ background: linear-gradient(135deg, #C79E6F, #A87A4D); }
.zd-kn .zd-kn-sw--bela svg,
.zd-kn .zd-kn-sw--krem svg,
.zd-kn .zd-kn-sw--bez svg{ color: #1C1A17; }
.zd-kn .zd-kn-sw--siva svg,
.zd-kn .zd-kn-sw--antracit svg,
.zd-kn .zd-kn-sw--zelena svg,
.zd-kn .zd-kn-sw--plava svg,
.zd-kn .zd-kn-sw--drvo svg{ color: #FFFFFF; filter: none; }

/* Skriven blok sa detaljima — dijalog ga samo prikazuje. */
.zd-kn .zd-kn-pd{ display: none; }

/* --------------------------------------------------------------------------
   3. Dijalog proizvoda (<dialog>, showModal)
   -------------------------------------------------------------------------- */
.zd-kn .zd-kn-dlg{
  width: min(980px, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 1px solid #E7E0D2;
  border-radius: 16px;
  background: #FFFFFF;
  color: var(--kn-ink);
  box-shadow: 0 30px 80px -30px rgba(28,26,23,.45);
  overflow: hidden;
}
.zd-kn .zd-kn-dlg::backdrop{ background: rgba(28,26,23,.52); }
.zd-kn .zd-kn-dlg__in{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-height: calc(100vh - 2rem);
}
.zd-kn .zd-kn-dlg__x{
  position: absolute; top: .75rem; right: .75rem; z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid #E7E0D2; border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--kn-ink);
  cursor: pointer;
}
.zd-kn .zd-kn-dlg__x svg{ width: 20px; height: 20px; }
.zd-kn .zd-kn-dlg__x:hover{ background: #FFFFFF; border-color: #D9D0BE; }
.zd-kn .zd-kn-dlg__media{
  margin: 0;
  display: grid; place-items: center;
  min-height: 320px;
  padding: clamp(1rem, 2vw, 1.75rem);
  background: #FFFFFF;
  border-right: 1px solid #EFE9DD;
}
.zd-kn .zd-kn-dlg__media picture{ display: contents; }
.zd-kn .zd-kn-dlg__media img{
  display: block; max-width: 100%; max-height: calc(100vh - 6rem);
  width: auto; height: auto; object-fit: contain;
}
.zd-kn .zd-kn-dlg__body{
  overflow-y: auto;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  background: #FCFAF6;
}
.zd-kn .zd-kn-dlg__brand{
  margin: 0 3rem .35rem 0;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--kn-ink-2);
}
.zd-kn .zd-kn-dlg__t{
  margin: 0 2.5rem 0 0;
  font-family: var(--zd-font-display);
  font-weight: var(--zd-fw-display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.2;
}
.zd-kn .zd-kn-dlg__price{ margin-top: .85rem; }
.zd-kn .zd-kn-dlg__price .zd-k-card__price{ font-size: 1.25rem; }
.zd-kn .zd-kn-dlg__specs{ margin: 1.1rem 0 0; border-top: 1px solid #E7E0D2; }
.zd-kn .zd-kn-dlg__specs > div{
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px solid #EFE9DD;
  font-size: var(--zd-fs-small);
}
.zd-kn .zd-kn-dlg__specs dt{ color: var(--kn-ink-2); font-weight: 400; }
.zd-kn .zd-kn-dlg__specs dd{ margin: 0; color: var(--kn-ink); font-weight: 500; overflow-wrap: anywhere; }
.zd-kn .zd-kn-dlg__desc p{
  margin: .9rem 0 0;
  font-size: var(--zd-fs-small);
  line-height: 1.55;
  color: var(--kn-ink-2);
}
.zd-kn .zd-kn-dlg__cta{ display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.zd-kn .zd-kn-dlg__btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px;
  padding: .55rem 1.1rem;
  border: 1px solid var(--zd-ink);
  border-radius: 8px;
  font-weight: 600; font-size: .9375rem;
  color: var(--zd-ink);
  text-decoration: none;
}
.zd-kn .zd-kn-dlg__btn--main{ background: var(--zd-ink); color: var(--zd-ink-invert); }
.zd-kn .zd-kn-dlg__btn:focus-visible,
.zd-kn .zd-kn-dlg__x:focus-visible{ outline: 2px solid var(--zd-accent-dark); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   4. „Upotpunite kupatilo"
   -------------------------------------------------------------------------- */
.zd-kn .zd-kn-more{ padding-block: clamp(2rem, 3.6vw, 3.25rem) clamp(2.75rem, 5vw, 4.5rem); }
.zd-kn .zd-kn-more__t{
  margin: 0 0 clamp(1.25rem, 2.4vw, 2rem);
  font-family: var(--zd-font-display);
  font-weight: var(--zd-fw-display);
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  line-height: 1.2;
  color: var(--kn-ink);
}
.zd-kn .zd-kn-rels{
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3rem);
}
.zd-kn .zd-kn-rel{ border-top: 1px solid var(--kn-line); }
.zd-kn .zd-kn-rel__a{ display: block; padding-block: clamp(1rem, 1.8vw, 1.35rem); text-decoration: none; color: inherit; }
.zd-kn .zd-kn-rel__t{
  display: flex; align-items: center;
  font-family: var(--zd-font-display);
  font-weight: var(--zd-fw-display);
  font-size: var(--zd-fs-body);
  color: var(--kn-ink);
  transition: color var(--zd-t-fast) var(--zd-ease);
}
.zd-kn .zd-kn-rel__d{ display: block; margin-top: .3rem; font-size: var(--zd-fs-small); line-height: 1.55; color: var(--kn-ink-2); }

/* --------------------------------------------------------------------------
   5. FAQ
   Markup je ugovor postojeće skripte assets/custom/zd-faq.js
   (.zd-k-qa / .zd-k-qa__q / .zd-k-qa__a). Ova pravila se učitavaju POSLE
   zd-keramika.css, pa pri istoj specifičnosti važe ona.
   -------------------------------------------------------------------------- */
.zd-kn .zd-kn-faq{ border-top: 1px solid var(--kn-line); padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
.zd-kn .zd-kn-faq__t{
  margin: 0 0 clamp(1.25rem, 2.4vw, 2rem);
  font-family: var(--zd-font-display);
  font-weight: var(--zd-fw-display);
  font-size: var(--zd-fs-h2);
  line-height: 1.16;
  color: var(--kn-ink);
}
.zd-kn .zd-kn-qas{ max-width: 76ch; }
.zd-kn .zd-k-qa{ border-top: 1px solid var(--kn-line); }
.zd-kn .zd-k-qa:last-child{ border-bottom: 1px solid var(--kn-line); }
.zd-kn .zd-k-qa h3{ margin: 0; font-size: inherit; }
.zd-kn .zd-k-qa__q{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1rem, 1.8vw, 1.3rem) 0;
  min-height: 48px;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--zd-font-display);
  font-weight: var(--zd-fw-display);
  font-size: var(--zd-fs-body);
  line-height: 1.35;
  color: var(--kn-ink);
  transition: color var(--zd-t-fast) var(--zd-ease);
}
.zd-kn .zd-k-qa__q svg{
  flex: 0 0 auto; width: 1.15rem; height: 1.15rem;
  color: var(--kn-gold-tx);
  transition: transform var(--zd-t) var(--zd-ease);
}
.zd-kn .zd-k-qa__q[aria-expanded="true"] svg{ transform: rotate(45deg); }
.zd-kn .zd-k-qa__a{ padding: 0 0 clamp(1rem, 1.8vw, 1.3rem); }
.zd-kn .zd-k-qa__a[hidden]{ display: none; }
.zd-kn .zd-k-qa__a p{
  margin: 0; max-width: 68ch;
  font-size: var(--zd-fs-body);
  line-height: var(--zd-lh-body);
  color: var(--kn-ink-2);
}

/* --------------------------------------------------------------------------
   6. Hover — samo tamo gde postoji pravi pokazivač
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine){
  .zd-kn .zd-kn-hero__cta:hover{
    background: var(--zd-gold-on-dark);
    border-color: var(--zd-gold-on-dark);
  }
  .zd-kn .zd-kn-hero__cta:hover .zd-kn-arrow{ transform: translateX(3px); }
  .zd-kn .zd-kn-rel__a:hover .zd-kn-rel__t{ color: var(--kn-gold-tx); }
  .zd-kn .zd-kn-rel__a:hover .zd-kn-arrow{ transform: translateX(4px); }
  .zd-kn .zd-k-qa__q:hover{ color: var(--kn-gold-tx); }
  .zd-kn .zd-kn-dlg__btn:not(.zd-kn-dlg__btn--main):hover{ background: var(--zd-ink); color: var(--zd-ink-invert); }
}

@media (prefers-reduced-motion: reduce){
  .zd-kn .zd-kn-hero__cta:hover .zd-kn-arrow,
  .zd-kn .zd-kn-rel__a:hover .zd-kn-arrow{ transform: none; }
  .zd-kn .zd-kn-arrow{ transition: none; }
}

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px){
  /* Ispod 992 px fotografija ide celom širinom gore (kadar bez sečenja
     nameštaja), a tekst stoji ispod, preko tamnog pretapanja njene donje
     ivice. Visina prati sadržaj — ništa se ne odseca. */
  .zd-kn .zd-kn-hero__stage{ display: block; min-height: 0; }
  .zd-kn .zd-kn-hero__media{
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 2 / 1;
    z-index: 0;
  }
  .zd-kn .zd-kn-hero__media img{ object-position: 50% 46%; }
  .zd-kn .zd-kn-hero__media::after{
    background: linear-gradient(180deg,
      rgba(var(--kn-hero-bg-rgb), 0) 45%,
      rgba(var(--kn-hero-bg-rgb), .72) 80%,
      rgba(var(--kn-hero-bg-rgb), 1) 100%);
  }
  .zd-kn .zd-kn-hero__body{
    width: 100%;
    margin-top: -4.5rem;
    padding: 0 clamp(1.25rem, 4vw, 2.25rem) clamp(1.5rem, 4vw, 2.25rem);
  }
  .zd-kn .zd-kn-rels{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .zd-kn .zd-kn-dlg__in{ grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .zd-kn .zd-kn-dlg__media{ min-height: 0; max-height: 46vh; border-right: 0; border-bottom: 1px solid #EFE9DD; }
  .zd-kn .zd-kn-dlg__media img{ max-height: calc(46vh - 2rem); }
  .zd-kn .zd-kn-dlg__body{ overflow: visible; }
}

@media (max-width: 767.98px){
  .zd-kn .zd-kn-rels{ grid-template-columns: minmax(0, 1fr); gap: 0; }
  .zd-kn .zd-kn-hero{ --kn-hero-radius: 10px; }
  .zd-kn .zd-kn-hero__media{ aspect-ratio: 3 / 2; }
  .zd-kn .zd-kn-hero__media img{ object-position: 50% 50%; }
  .zd-kn .zd-kn-hero__body{ margin-top: -3.25rem; }
  .zd-kn .zd-kn-hero__h1{ font-size: clamp(1.875rem, 8vw, 2.5rem); }
  .zd-kn .zd-kn-dlg{ width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); border-radius: 14px; }
  .zd-kn .zd-kn-dlg__in{ max-height: calc(100vh - 1rem); }
  .zd-kn .zd-kn-dlg__btn{ flex: 1 1 100%; }
}

@media (max-width: 399.98px){
  .zd-kn .zd-kn-facts{ font-size: .8125rem; }
  .zd-kn .zd-kn-facts li:not(:last-child)::after{ margin: 0 .4rem; }
}

@media (max-width: 359.98px){
  .zd-kn .zd-kn-hero__h1{ font-size: 1.75rem; }
  .zd-kn .zd-kn-eyebrow{ font-size: .6875rem; }
  .zd-kn .zd-kn-hero__cta{ width: 100%; justify-content: space-between; }
  .zd-kn .zd-kn-hero__body{ padding-inline: 1rem; }
}