/* ==========================================================================
   zd-doors-v2.css — katalog SOBNIH i SIGURNOSNIH vrata
   ("sobna vrata.html", "sigurnosna vrata.html")

   Zaključan dizajn (21.10.2026) po referencama
   `referentne slike/referentna-slika-sigurnosna-vrata-strana.png` i
   `referentne slike/referentna-slika-sobna-vrata.png`: topla bela / svetla
   bež podloga, uvod sa tri proverene prednosti (sobna: + fotografija desno),
   traka [broj | filter | sortiranje] i kartice 4 / 3 / 2 / 1 kolona —
   fotografija 4:5 (vrata uvek cela), oznaka „Na stanju", tri karakteristike,
   separator, cena (sigurnosna: dve dimenzije i dve cene) i zlatno dugme.

   Učitava se POSLE zd-doors.css. Scope: body.zd-prod.zd-dv2 — fajl učitavaju
   samo ove dve stranice. Iz zd-doors.css se i dalje koriste: .zd-prod-btn
   (dugmad u dijalogu), .zd-prod-ico (ikonice) i osnovni raspored
   .zd-prod-dialog (ovde samo preoblikovan).

   Sadržaj:
     0. tokeni + podloga stranice
     1. uvod (putanja, prečice, H1, prednosti, fotografija)
     2. traka: broj, filter, sortiranje
     3. mreža i kartica
     4. napomene ispod mreže
     5. dijalog detalja + galerija + uvećanje
     6. responsive
     7. fokus / reduced motion / forced colors
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TOKENI + PODLOGA STRANICE
   -------------------------------------------------------------------------- */
body.zd-prod.zd-dv2{
  --dv-max:      1400px;                 /* sadržaj kataloga (bez gutter-a) */
  --dv-gutter:   clamp(16px, 3.2vw, 40px);
  --dv-gap:      20px;

  /* topla bela i veoma svetla bež — referentne slike 21.10.2026 */
  --dv-page:     #FBF9F5;
  --dv-card:     #FFFFFF;
  --dv-media:    #F1ECE4;                /* podloga fotografije dok se učitava */
  --dv-soft:     #F4EFE7;                /* traka filtera, krugovi ikonica */
  --dv-line:     #ECE5DA;
  --dv-line-2:   #DCD3C4;

  --dv-ink:      #1C1A17;                /* = --zd-ink */
  --dv-ink-2:    #5F5A52;                /* pomoćni tekst, ≈ 6,5:1 na beloj */
  --dv-ink-3:    #756F65;                /* sitne oznake, ≈ 4,9:1 na beloj */
  --dv-ico:      #6B6458;                /* ikonice karakteristika */

  --dv-accent:   var(--zd-accent-dark, #8A6A22);   /* aktivni filter (tekst 5:1) */
  --dv-gold:     var(--zd-accent, #A9832E);        /* kružno dugme, ikonice uvoda */
  --dv-gold-2:   #94722A;                          /* hover dugmeta */

  --dv-stock-bg: #1E5A3A;                /* oznaka „Na stanju" */
  --dv-stock-led:#4ADE80;

  --dv-r-card:   14px;
  --dv-r-sm:     12px;
  --dv-sh:       0 1px 2px rgba(60,45,20,.05), 0 4px 10px -6px rgba(60,45,20,.08), 0 18px 36px -24px rgba(60,45,20,.26);
  --dv-sh-hover: 0 2px 4px rgba(60,45,20,.06), 0 10px 20px -12px rgba(60,45,20,.14), 0 28px 52px -28px rgba(60,45,20,.38);
  --dv-ring:     rgba(169,131,46,.18);   /* tanki zlatni prsten (krugovi ikonica) */
  --dv-t:        .32s cubic-bezier(.22,.61,.36,1);

  color: var(--dv-ink);
  background: var(--dv-page);
}

/* Mobirise theme skripta (assets/theme/js/script.js) dodaje .hidden
   (visibility:hidden) i animate__ klase proizvoljnim <p>, <li>, <img> —
   cena u kartici je tako nestajala. Katalog i dijalog moraju biti odmah
   vidljivi. Specifičnost (0,2,1) je viša od Mobirise `.hidden`. */
.zd-dv2 #zd-prod-main .hidden,
.zd-dv2 .zd-prod-dialog .hidden{ visibility: visible; }
.zd-dv2 #zd-prod-main .animate__animated,
.zd-dv2 .zd-prod-dialog .animate__animated{ animation: none; opacity: 1; }

/* Mobirise boji svaki <section> u belo — sekcije propuštaju podlogu tela. */
body.zd-prod.zd-dv2 .zd-dv3-intro,
body.zd-prod.zd-dv2 .zd-dv2-models,
body.zd-prod.zd-dv2 .zd-prod-catalog{
  background: transparent;
  padding: 0;
}

/* Dekor stranice (referenca): meki svileni potezi uz levu i desnu ivicu,
   iza uvoda i prvog reda kartica. Vidljivi su uglavnom u marginama oko
   kataloga; sloj je ispod sadržaja (z-index −1 u izolovanom kontekstu),
   ne prima klikove i ne utiče na raspored. */
body.zd-prod.zd-dv2 .zd-prod-catalog{ position: relative; isolation: isolate; }
body.zd-prod.zd-dv2 .zd-prod-catalog::before{
  content: "";
  position: absolute; z-index: -1;
  left: 0; right: 0; top: 0;
  height: min(1500px, 100%);
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='960' viewBox='0 0 420 960'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='.6'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='.55' stop-color='%23fff' stop-opacity='.45'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23E6D6BC' stop-opacity='.42'/%3E%3Cstop offset='1' stop-color='%23E6D6BC' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 40C150 150 250 330 236 620 228 760 190 860 150 960H0Z' fill='url(%23b)'/%3E%3Cpath d='M0 0C210 120 330 330 318 600 310 760 262 880 214 960H120C200 800 236 650 226 520 210 300 120 170 0 110Z' fill='url(%23a)'/%3E%3Cpath d='M0 210C190 300 286 460 282 650 279 770 250 870 214 960' fill='none' stroke='%23fff' stroke-opacity='.85' stroke-width='2.5'/%3E%3Cpath d='M0 520C110 580 160 700 150 960' fill='none' stroke='%23fff' stroke-opacity='.8' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat left -150px top 30px / 420px auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='960' viewBox='0 0 420 960'%3E%3Cg transform='translate(420 0) scale(-1 1)'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='.6'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='.55' stop-color='%23fff' stop-opacity='.45'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23E6D6BC' stop-opacity='.42'/%3E%3Cstop offset='1' stop-color='%23E6D6BC' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 40C150 150 250 330 236 620 228 760 190 860 150 960H0Z' fill='url(%23b)'/%3E%3Cpath d='M0 0C210 120 330 330 318 600 310 760 262 880 214 960H120C200 800 236 650 226 520 210 300 120 170 0 110Z' fill='url(%23a)'/%3E%3Cpath d='M0 210C190 300 286 460 282 650 279 770 250 870 214 960' fill='none' stroke='%23fff' stroke-opacity='.85' stroke-width='2.5'/%3E%3Cpath d='M0 520C110 580 160 700 150 960' fill='none' stroke='%23fff' stroke-opacity='.8' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -150px top -40px / 420px auto;
  opacity: .9;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
          mask-image: linear-gradient(180deg, #000 55%, transparent);
}

/* na užim ekranima nema bočnih margina — potezi bi prelazili preko sadržaja */
@media (max-width: 1199.98px){
  body.zd-prod.zd-dv2 .zd-prod-catalog::before{ display: none; }
}

/* Fiksni header ostaje vidljiv pri skrolu — sidra ostavljaju mesta za nav. */
.zd-dv2 .zd-prod-catalog,
.zd-dv2 #modeli,
.zd-dv2 .zd-anchor{ scroll-margin-top: calc(var(--zd-nav-h, 76px) + var(--zd-nav-inset, 12px) + 14px); }

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

/* --------------------------------------------------------------------------
   1. UVOD (hero) — dve varijante iz istog šablona
      --plain (sigurnosna): topla bež podloga sa diskretnim linijama,
                            naslov levo, prednosti desno
      --photo (sobna):      tekst i prednosti levo, fotografija desno
   -------------------------------------------------------------------------- */
.zd-dv2 .zd-dv3-intro{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--zd-header-h) + clamp(.6rem, 1.2vw, 1rem)) !important;
  padding-bottom: clamp(1.1rem, 2.2vw, 1.9rem) !important;
}
/* Topla bež podloga sa svetlosnim prelazima. Poluprovidna je odozdo, pa se
   uvod bez šava pretapa u podlogu stranice i propušta dekor ivica. */
body.zd-prod.zd-dv2 .zd-dv3-intro--plain,
body.zd-prod.zd-dv2 .zd-dv3-intro--photo{
  background:
    radial-gradient(42% 90% at 86% 8%, rgba(255,252,246,.95), rgba(255,252,246,0) 70%),
    radial-gradient(38% 80% at 18% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(239,228,210,.72) 0%, rgba(244,236,224,.5) 55%, rgba(251,249,245,0) 100%) !important;
}
/* veoma suptilna arhitektonska tekstura — fina vertikalna kanelura (kao
   zidna obloga), vidljiva samo u praznom desnom delu uvoda bez fotografije */
.zd-dv2 .zd-dv3-intro--plain::before{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,.5) 0 1px, rgba(150,118,66,.045) 1px 2px, transparent 2px 26px);
  -webkit-mask-image: radial-gradient(46% 85% at 82% 40%, #000 0%, rgba(0,0,0,.35) 55%, transparent 80%);
          mask-image: radial-gradient(46% 85% at 82% 40%, #000 0%, rgba(0,0,0,.35) 55%, transparent 80%);
  pointer-events: none;
}
@media (max-width: 1023.98px){
  .zd-dv2 .zd-dv3-intro--plain::before{ display: none; }
}
/* fotografija sobne varijante — desno, do ivice prozora, meko pretapanje */
.zd-dv2 .zd-dv3-intro__media{
  position: absolute;
  z-index: -1;
  top: var(--zd-header-h);
  right: 0; bottom: 0;
  width: min(40%, 620px);
  margin: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}
.zd-dv2 .zd-dv3-intro__media::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(255,236,206,.30), rgba(214,178,128,.12) 60%, rgba(214,178,128,.06));
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.zd-dv2 .zd-dv3-intro__media img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

.zd-dv2 .zd-dv3-intro__top{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .25rem 1.5rem;
}
.zd-dv2 .zd-dv2-crumb ol{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem;
  font-family: var(--zd-font-body);
  font-size: .8125rem;
  color: var(--dv-ink-3);
}
.zd-dv2 .zd-dv2-crumb li + li::before{ content: "/"; margin-right: .4rem; color: var(--dv-line-2); }
.zd-dv2 .zd-dv2-crumb a{ color: var(--dv-ink-2); text-decoration: none; }
.zd-dv2 .zd-dv2-crumb a:hover{ color: var(--dv-ink); text-decoration: underline; text-underline-offset: 3px; }
.zd-dv2 .zd-dv2-crumb [aria-current]{ color: var(--dv-ink); }

/* prečice između dve stranice vrata — obični linkovi, aktivna je podvučena */
.zd-dv2 .zd-dv3-switch{ display: inline-flex; gap: clamp(1rem, 2vw, 1.5rem); }
.zd-dv2 .zd-dv3-switch__a{
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 40px;                      /* dodirna površina */
  font-family: var(--zd-font-body);
  font-size: .875rem;
  font-weight: 500;
  color: var(--dv-ink-2);
  text-decoration: none;
}
.zd-dv2 .zd-dv3-switch__a:hover{ color: var(--dv-ink); }
.zd-dv2 .zd-dv3-switch__a[aria-current="page"]{ color: var(--dv-ink); font-weight: 600; }
.zd-dv2 .zd-dv3-switch__a[aria-current="page"]::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px;
  height: 2px; border-radius: 2px; background: var(--dv-gold);
}

.zd-dv2 .zd-dv3-intro__grid{
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 1.25rem clamp(1.5rem, 2.4vw, 2.5rem);
  padding-top: clamp(.4rem, 1vw, .9rem);
}
.zd-dv2 .zd-dv3-intro__text{ flex: 0 1 auto; min-width: 0; }
.zd-dv2 .zd-dv3-intro--photo .zd-dv3-intro__grid{ display: block; max-width: min(60%, 820px); }
.zd-dv2 .zd-dv3-intro--photo .zd-dv3-intro__top{ max-width: min(60%, 820px); }
.zd-dv2 .zd-dv3-intro__title{
  margin: 0;
  font-family: var(--zd-font-display);
  font-weight: 700;
  font-size: clamp(2.125rem, 1.1rem + 2.45vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--dv-ink);
  text-wrap: balance;
}
/* od tableta naviše naslov je uvek u jednom redu; kad pored njega nema
   mesta za prednosti, one prelaze u sledeći red (flex-wrap), naslov se ne lomi */
@media (min-width: 768px){
  .zd-dv2 .zd-dv3-intro__title{ white-space: nowrap; }
}
.zd-dv2 .zd-dv3-intro__lead{
  margin: clamp(.45rem, .8vw, .65rem) 0 0;
  font-family: var(--zd-font-body);
  font-size: clamp(1rem, .9rem + .3vw, 1.125rem);
  line-height: 1.5;
  color: var(--dv-ink-2);
}

/* tri prednosti — provereni podaci iz ponude */
.zd-dv2 .zd-dv3-bens{
  list-style: none; margin: 0; padding: 0;
  flex: 0 1 auto;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem 0;
}
.zd-dv2 .zd-dv3-ben{
  display: flex; align-items: center; gap: .75rem;
  min-width: 0;
  padding-inline: clamp(.9rem, 1.25vw, 1.15rem);
}
.zd-dv2 .zd-dv3-ben:first-child{ padding-left: 0; }
.zd-dv2 .zd-dv3-ben:last-child{ padding-right: 0; }
/* diskretan vertikalni separator između prednosti (kao na referenci) */
.zd-dv2 .zd-dv3-ben + .zd-dv3-ben{ border-left: 1px solid var(--dv-line); }
.zd-dv2 .zd-dv3-ben__ico{
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #FFFFFF 0%, #FBF6EE 60%, #F4EBDD 100%);
  color: var(--dv-gold);
  box-shadow:
    inset 0 0 0 1px var(--dv-ring),
    0 1px 2px rgba(60,45,20,.06),
    0 8px 18px -10px rgba(60,45,20,.32);
}
.zd-dv2 .zd-dv3-ben__ico svg{ width: 22px; height: 22px; stroke-width: 1.6; }
.zd-dv2 .zd-dv3-ben__txt{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zd-dv2 .zd-dv3-ben__t{
  font-family: var(--zd-font-display);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--dv-ink);
  white-space: nowrap;
}
.zd-dv2 .zd-dv3-ben__d{
  max-width: 9.75rem;                    /* opis u najviše dva reda, kao na referenci */
  font-family: var(--zd-font-body);
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--dv-ink-2);
}
.zd-dv2 .zd-dv3-intro--photo .zd-dv3-bens{ margin-top: clamp(1.1rem, 1.8vw, 1.5rem); }
.zd-dv2 .zd-dv3-intro--photo .zd-dv3-ben__d{ max-width: 11.5rem; }
/* uvod sa fotografijom do 1399 px: tekstu ostaje ~60 % širine i prednosti
   prelaze u drugi red — tada bez separatora (linija bi stajala na početku reda) */
@media (max-width: 1399.98px){
  .zd-dv2 .zd-dv3-intro--photo .zd-dv3-bens{ gap: 1rem 1.75rem; }
  .zd-dv2 .zd-dv3-intro--photo .zd-dv3-ben{ padding-inline: 0; }
  .zd-dv2 .zd-dv3-intro--photo .zd-dv3-ben + .zd-dv3-ben{ border-left: 0; }
}

/* --------------------------------------------------------------------------
   2. TRAKA: BROJ | FILTER | SORTIRANJE
   -------------------------------------------------------------------------- */
.zd-dv2 .zd-dv2-models{ padding-top: clamp(.75rem, 1.4vw, 1.25rem) !important; }
.zd-dv2 .zd-dv3-bar{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
}
.zd-dv2 .zd-dv3-bar__count{
  margin: 0;
  font-family: var(--zd-font-body);
  font-size: .9375rem;
  color: var(--dv-ink-2);
}
.zd-dv2 .zd-dv3-bar__count b{ color: var(--dv-ink); font-weight: 600; }
.zd-dv2 .zd-dv3-bar__end{
  display: flex; align-items: center; justify-content: flex-end; gap: .75rem;
}

/* segmentirana kontrola (postojeće kategorije) */
.zd-dv2 .zd-dv2-filters{
  list-style: none; margin: 0; padding: 4px;
  display: flex; gap: 2px;
  border-radius: 999px;
  background: #F1ECE4;
  border: 1px solid rgba(220,211,196,.55);
  box-shadow: inset 0 1px 2px rgba(60,45,20,.04);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.zd-dv2 .zd-dv2-filters::-webkit-scrollbar{ display: none; }
.zd-dv2 .zd-dv2-filters li{ flex: 0 0 auto; }
.zd-dv2 .zd-dv2-pill{
  appearance: none;
  height: 38px;
  padding: 0 1.15rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--zd-font-body);
  font-size: .875rem;
  font-weight: 500;
  color: var(--dv-ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dv-t), color var(--dv-t), box-shadow var(--dv-t);
}
.zd-dv2 .zd-dv2-pill:hover{ color: var(--dv-ink); background: rgba(255,255,255,.8); }
/* aktivna kategorija: zlatna (tamnija nijansa zlatne — beli tekst ≥ 4,5:1) */
.zd-dv2 .zd-dv2-pill[aria-pressed="true"]{
  background: linear-gradient(180deg, #957330 0%, var(--dv-accent) 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 14px -7px rgba(138,106,34,.7);
}

/* „Poništi filter" — vidljiv samo dok je neka kategorija izabrana */
.zd-dv2 .zd-dv2-reset{
  appearance: none;
  display: none;
  align-items: center; gap: .35rem;
  height: 40px;
  padding: 0 .9rem;
  border: 1px solid var(--dv-line-2);
  border-radius: 999px;
  background: var(--dv-card);
  font-family: var(--zd-font-body);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--dv-ink);
  cursor: pointer;
  white-space: nowrap;
}
.zd-dv2 .zd-dv2-reset svg{ width: 14px; height: 14px; }
.zd-dv2 .zd-dv3-bar.is-filtered .zd-dv2-reset{ display: inline-flex; }
.zd-dv2 .zd-dv2-reset:hover{ border-color: var(--dv-ink); }

/* sortiranje */
.zd-dv2 .zd-dv3-sort{
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0;
}
.zd-dv2 .zd-dv3-sort__l{
  font-family: var(--zd-font-body);
  font-size: .8125rem;
  color: var(--dv-ink-3);
  white-space: nowrap;
}
.zd-dv2 .zd-dv3-sort select{
  appearance: none;
  height: 40px;
  min-width: 11.5rem;
  padding: 0 2.3rem 0 .9rem;
  border: 1px solid var(--dv-line-2);
  border-radius: var(--dv-r-sm);
  background: var(--dv-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1A17' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .75rem center / 16px 16px;
  font-family: var(--zd-font-body);
  font-size: .875rem;
  font-weight: 500;
  color: var(--dv-ink);
  cursor: pointer;
}
.zd-dv2 .zd-dv3-sort select:hover{ border-color: var(--dv-ink-3); }
/* bez JS-a sortiranje i filter ne rade — kontrole se ne prikazuju */
body.zd-prod.zd-dv2:not(.zd-js) .zd-dv3-bar .zd-dv2-filters,
body.zd-prod.zd-dv2:not(.zd-js) .zd-dv3-bar__end{ visibility: hidden; }

/* --------------------------------------------------------------------------
   3. MREŽA I KARTICA
   -------------------------------------------------------------------------- */
.zd-dv2 .zd-dv2-grid{
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* desktop: 4 u redu */
  gap: var(--dv-gap);
}
.zd-dv2 .zd-dv2-grid > li{ display: flex; min-width: 0; }
.zd-dv2 .zd-dv2-grid > li[hidden]{ display: none; }

.zd-dv2 .zd-dv2-card{
  position: relative;
  display: flex; flex-direction: column;
  width: 100%;
  background: var(--dv-card);
  border: 1px solid #EEE8DE;
  border-radius: var(--dv-r-card);
  overflow: hidden;
  box-shadow: var(--dv-sh);
  transition: box-shadow var(--dv-t), border-color var(--dv-t), transform var(--dv-t);
}

/* Fotografija: kadar 4:5. Generator bira način prikaza po proporciji izvora
   (V2.frame_for): šira ili ista → cover (seku se samo bočni zidovi, vrata
   cela); uža → .is-contain: vrata CELA, preko meke pozadine od iste
   fotografije (.zd-dv2-card__fill, isti fajl iz keša). */
.zd-dv2 .zd-dv2-card__media{
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 5;
  background: var(--media-bg, var(--dv-media));
  overflow: hidden;
}
.zd-dv2 .zd-dv2-card__fill{
  display: none;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.2);
  filter: blur(18px) saturate(.85) brightness(1.03);
  opacity: .9;
  z-index: 0;
}
.zd-dv2 .zd-dv2-card__media.is-contain .zd-dv2-card__fill{ display: block; }
.zd-dv2 .zd-dv2-card__media picture{ position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.zd-dv2 .zd-dv2-card__img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.zd-dv2 .zd-dv2-card__media.is-contain .zd-dv2-card__img{ object-fit: contain; }
/* Fotografije sigurnosnih vrata (scripts/normalize-security-doors-photos.py): izvorni pikseli,
   samo isečeni na isti uspravan odnos 3:5 kao slikovni deo kartice. Fotografija ispunjava ceo
   slikovni deo (od gornje ivice do dna i od leve do desne ivice), bez unutrašnjeg okvira,
   pojasa, zamućene kopije ili zumiranja; zaobljene gornje ivice kartice seku je preko
   overflow:hidden. Isti odnos važi na svim širinama (desktop i telefon). */
.zd-dv2 .zd-dv2-card__media.is-norm{ aspect-ratio: 3 / 5; background: var(--dv-media); }
.zd-dv2 .zd-dv2-card__media.is-norm .zd-dv2-card__img{ object-fit: cover; object-position: 50% 50%; }
/* Sobna vrata: JEDAN odnos kadra (17:25) za sve modele — jednokrilna, klizna i dvokrilna — pa je prostor za
   fotografiju na svim karticama iste širine i visine. Fotografije su isečene sa istim ciljnim okvirom
   (scripts/normalize-interior-doors-photos.py: iste gornje/donje ivice konstrukcije, horizontalni centar). */
.zd-dv2 .zd-dv2-card__media.is-norm.is-norm--interior{ aspect-ratio: 17 / 25; }
/* „Na stanju" na sobnim vratima: bliže gornjem levom uglu fotografije (9 px) — ne menja sigurnosna vrata */
.zd-dv2 .zd-dv2-card__media.is-norm--interior .zd-dv2-stock{ top: 9px; left: 9px; }
.zd-dv2 .zd-dv2-card__hit{ position: absolute; inset: 0; z-index: 3; }

/* Poravnanje teksta unutar reda (sobna vrata): visine naziva, opisa i karakteristika postavlja
   assets/custom/zd-doors-align.js (promenljive na <li>); bez JS-a vrednost je 0 i raspored je prirodan. */
.zd-dv2 .zd-dv2-grid--aligned .zd-dv2-card__name{ min-height: var(--zd-row-name, 0px); }
.zd-dv2 .zd-dv2-grid--aligned .zd-dv2-card__meta{ min-height: var(--zd-row-meta, 0px); }
.zd-dv2 .zd-dv2-grid--aligned .zd-dv2-card__feats{ min-height: var(--zd-row-feats, 0px); }

/* „Na stanju" — samo kada je model potvrđeno dostupan (NA_STANJU u generatoru) */
.zd-dv2 .zd-dv2-stock{
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: var(--dv-stock-bg);
  color: #fff;
  font-family: var(--zd-font-body);
  font-size: .78125rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .005em;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 4px 12px -4px rgba(10,40,25,.45);
  pointer-events: none;
}
.zd-dv2 .zd-dv2-stock__dot{
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #B7F7CF 0%, var(--dv-stock-led) 55%, #22C55E 100%);
  box-shadow: 0 0 0 0 rgba(74,222,128,.55);
  animation: zd-dv2-led 2s ease-out infinite;
}
@keyframes zd-dv2-led{
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.55); }
  70%  { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

.zd-dv2 .zd-dv2-card__body{
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  padding: 17px 19px 18px;
}
.zd-dv2 .zd-dv2-card__name{
  margin: 0;
  font-family: var(--zd-font-display);
  font-weight: 600;
  font-size: clamp(1rem, .7rem + .5vw, 1.125rem);
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--dv-ink);
}
.zd-dv2 .zd-dv2-card__meta{
  margin: .3rem 0 0;
  font-family: var(--zd-font-body);
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--dv-ink-3);
}

/* tri karakteristike — ikonica + kratak tekst (do dva reda) */
.zd-dv2 .zd-dv2-card__feats{
  list-style: none;
  margin: .95rem 0 1rem; padding: 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: .5rem;
}
.zd-dv2 .zd-dv2-card__feats li{
  flex: 0 1 auto;
  display: flex; align-items: center; gap: .4rem;
  min-width: 0;
  font-family: var(--zd-font-body);
  font-size: .75rem;
  line-height: 1.3;
  color: var(--dv-ink-2);
}
.zd-dv2 .zd-dv2-feat__ico{
  flex: 0 0 auto;
  width: 21px; height: 21px;
  color: var(--dv-ico);
  stroke-width: 1.5;
}
/* naziv u prvom, vrednost u drugom redu — prelom je kontrolisan, ne slučajan */
.zd-dv2 .zd-dv2-feat__t{ display: flex; flex-direction: column; min-width: 0; }
.zd-dv2 .zd-dv2-feat__v{ white-space: nowrap; color: var(--dv-ink-3); }
/* Širina kartice zavisi od broja kolona, pa se red karakteristika prilagođava
   SVOJOJ kartici (container query): na užoj kartici sitniji tekst, a nazivi
   ostaju u jednom redu samo dok sva tri staju. Bez podrške za container
   query nazivi se prelamaju po potrebi (ništa ne izlazi iz kartice). */
.zd-dv2 .zd-dv2-card__body{ container-type: inline-size; }
@container (max-width: 279.98px){
  .zd-dv2 .zd-dv2-card__feats{ gap: .4rem; }
  .zd-dv2 .zd-dv2-card__feats li{ gap: .3rem; font-size: .6875rem; }
  .zd-dv2 .zd-dv2-feat__ico{ width: 18px; height: 18px; }
}
@container (min-width: 258px){
  .zd-dv2 .zd-dv2-feat__t > span{ white-space: nowrap; }
}

/* cena(e) | kružno dugme — separator iznad, poravnato u dnu svih kartica */
.zd-dv2 .zd-dv2-card__buy{
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid #EFE9E0;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.zd-dv2 .zd-dv2-card__prices{ display: flex; min-width: 0; }
.zd-dv2 .zd-dv2-card__prices--2{ display: grid; grid-template-columns: repeat(2, minmax(0, auto)); }
.zd-dv2 .zd-dv2-card__pr{
  display: flex; flex-direction: column; gap: 2px;
  margin: 0;
  min-width: 0;
}
.zd-dv2 .zd-dv2-card__prices--2 .zd-dv2-card__pr + .zd-dv2-card__pr{
  margin-left: .85rem; padding-left: .85rem;
  border-left: 1px solid #E8E1D5;
}
.zd-dv2 .zd-dv2-card__dim{
  font-family: var(--zd-font-body);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--dv-ink-3);
  white-space: nowrap;
}
.zd-dv2 .zd-dv2-card__pr b{
  font-family: var(--zd-font-display);
  font-weight: 700;
  font-size: clamp(.875rem, .98vw, 1rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--dv-ink);
  white-space: nowrap;
}
.zd-dv2 .zd-dv2-card__pr b.zd-dv2-card__price{ font-size: clamp(1.125rem, 1.35vw, 1.3125rem); }
.zd-dv2 .zd-dv2-card__cta{
  appearance: none;
  position: relative; z-index: 4;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #B48D3C 0%, var(--dv-gold) 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 8px 16px -8px rgba(138,106,34,.8);
  cursor: pointer;
  transition: background-color var(--dv-t), transform var(--dv-t), box-shadow var(--dv-t);
}
.zd-dv2 .zd-dv2-card__cta svg{ width: 19px; height: 19px; transition: transform var(--dv-t); }

@media (hover: hover) and (pointer: fine){
  .zd-dv2 .zd-dv2-card:hover{ box-shadow: var(--dv-sh-hover); border-color: var(--dv-line-2); transform: translateY(-3px); }
  .zd-dv2 .zd-dv2-card:hover .zd-dv2-card__img{ transform: scale(1.025); }
  .zd-dv2 .zd-dv2-card:hover .zd-dv2-card__media.is-norm .zd-dv2-card__img{ transform: none; }
  .zd-dv2 .zd-dv2-card:hover .zd-dv2-card__cta,
  .zd-dv2 .zd-dv2-card__cta:hover{ background: linear-gradient(180deg, #A9832E 0%, var(--dv-gold-2) 100%); box-shadow: 0 8px 18px -8px rgba(138,106,34,.85); }
  .zd-dv2 .zd-dv2-card:hover .zd-dv2-card__cta svg{ transform: translateX(2px); }
}

/* prazno stanje, „Prikaži sve" (telefon) */
.zd-dv2 .zd-dv2-empty{
  padding: clamp(2rem, 5vw, 3.5rem) 1rem;
  text-align: center;
  border: 1px dashed var(--dv-line-2);
  border-radius: var(--dv-r-card);
  background: var(--dv-card);
}
.zd-dv2 .zd-dv2-empty[hidden]{ display: none; }
.zd-dv2 .zd-dv2-empty p{ margin: 0 0 1rem; font-size: 1rem; color: var(--dv-ink-2); }
.zd-dv2 .zd-dv2-btn{
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px;
  padding: 0 1.4rem;
  border: 1px solid var(--dv-line-2);
  border-radius: 999px;
  background: var(--dv-card);
  font-family: var(--zd-font-body);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--dv-ink);
  cursor: pointer;
  transition: border-color var(--dv-t);
}
.zd-dv2 .zd-dv2-btn:hover{ border-color: var(--dv-ink); }
.zd-dv2 .zd-dv2-moreWrap{ margin-top: 1.25rem; text-align: center; }
.zd-dv2 .zd-dv2-moreWrap[hidden]{ display: none; }
.zd-dv2 .zd-dv2-moreWrap .zd-dv2-btn{ width: 100%; }
.zd-dv2 .zd-dv2-grid.is-limited > li.is-over{ display: none; }

/* --------------------------------------------------------------------------
   4. NAPOMENE ISPOD MREŽE (cene, šta nije u ceni, dimenzije / klizni sistem)
   -------------------------------------------------------------------------- */
.zd-dv2 .zd-dv2-facts{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dv-gap);
  list-style: none;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  padding: 0;
}
.zd-dv2 .zd-dv2-fact{
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-r-card);
  background: var(--dv-card);
}
.zd-dv2 .zd-dv2-fact__icon{
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--dv-soft);
  color: var(--dv-accent);
}
.zd-dv2 .zd-dv2-fact__icon svg{ width: 22px; height: 22px; }
.zd-dv2 .zd-dv2-fact__text{ min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zd-dv2 .zd-dv2-fact__t{
  font-family: var(--zd-font-display);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.3;
  color: var(--dv-ink);
}
.zd-dv2 .zd-dv2-fact__d{
  font-family: var(--zd-font-body);
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--dv-ink-2);
}

/* --------------------------------------------------------------------------
   5. DIJALOG DETALJA + GALERIJA + UVEĆANJE
   -------------------------------------------------------------------------- */
.zd-dv2 .zd-prod-dialog{
  background: var(--dv-card);
  border: 0;
  border-radius: 22px;
  box-shadow: 0 40px 90px -30px rgba(20,20,24,.45);
  color: var(--dv-ink);
}
.zd-dv2 .zd-prod-dialog::backdrop{ background: rgba(20,20,24,.55); }
.zd-dv2 .zd-prod-dialog__grid{ background: transparent; }
/* zd-doors.css drži `.zd-prod-dialog__media img { position:absolute; inset:0 }`
   za jednu sliku; galerija ima više slika pa se to poništava. */
.zd-dv2 .zd-prod-dialog__media{
  position: relative;
  display: flex; flex-direction: column; gap: .5rem;
  padding: .75rem;
  background: var(--dv-page);
  aspect-ratio: auto;
  min-height: 0;
}
.zd-dv2 .zd-prod-dialog__media img{
  position: static; inset: auto;
  width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 50%;
}
.zd-dv2 .zd-dv2-gal{
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  border-radius: var(--dv-r-sm);
  overflow: hidden;
  background: var(--dv-media);
}
.zd-dv2 .zd-prod-dialog__media .zd-dv2-gal__main{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  z-index: 1;
}
.zd-dv2 .zd-dv2-gal__zoomHint{
  position: absolute; right: .6rem; bottom: .6rem; z-index: 2;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: var(--dv-ink);
  box-shadow: 0 1px 3px rgba(20,20,24,.15);
  pointer-events: none;
}
.zd-dv2 .zd-dv2-gal__zoomHint svg{ width: 16px; height: 16px; }
.zd-dv2 .zd-dv2-thumbs{
  position: relative; z-index: 2;
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; gap: .4rem;
  list-style: none; margin: 0; padding: 0;
}
.zd-dv2 .zd-dv2-thumbs[hidden]{ display: none; }
.zd-dv2 .zd-dv2-thumb{
  appearance: none;
  width: 60px; height: 60px;
  padding: 0;
  border: 1px solid var(--dv-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--dv-card);
  cursor: pointer;
}
.zd-dv2 .zd-prod-dialog__media .zd-dv2-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; position: static; }
.zd-dv2 .zd-dv2-thumb[aria-current="true"]{ border-color: var(--dv-accent); box-shadow: 0 0 0 2px rgba(138,106,34,.28); }

.zd-dv2 .zd-prod-dialog__body{ background: var(--dv-card); color: var(--dv-ink); }
.zd-dv2 .zd-prod-dialog__crumb{
  margin: 0 0 .5rem;
  font-family: var(--zd-font-body);
  font-size: .75rem;
  color: var(--dv-ink-3);
}
.zd-dv2 .zd-prod-dialog__crumb a{ color: var(--dv-ink-2); }
.zd-dv2 .zd-prod-dialog__cat{ color: var(--dv-accent); }
.zd-dv2 .zd-prod-dialog__title{
  font-family: var(--zd-font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--dv-ink);
}
.zd-dv2 .zd-prod-dialog__desc,
.zd-dv2 .zd-prod-dialog__fine{ color: var(--dv-ink-2); }
/* „Zatvori" je u traci visine 0 na vrhu dijaloga: na desktopu stoji u
   gornjem desnom uglu, na telefonu (dijalog je skrol-zona) ostaje vidljiv
   i dok se čitaju specifikacije. */
.zd-dv2 .zd-prod-dialog__bar{ position: sticky; top: 0; z-index: 5; height: 0; }
.zd-dv2 .zd-prod-dialog__bar .zd-prod-dialog__close{
  position: absolute; top: .75rem; right: .75rem;
  background: var(--dv-soft);
  border: 0;
  color: var(--dv-ink);
  box-shadow: 0 1px 3px rgba(20,20,24,.12);
}
.zd-dv2 .zd-prod-dialog__bar .zd-prod-dialog__close:hover{ background: var(--dv-ink); color: #fff; }
.zd-dv2 .zd-prod-dialog__price{
  background: var(--dv-page);
  border: 0;
  border-radius: var(--dv-r-sm);
  color: var(--dv-ink);
}
.zd-dv2 .zd-prod-dialog__price small{ color: var(--dv-ink-3); }
.zd-dv2 .zd-prod-dialog__price b{ font-family: var(--zd-font-display); font-weight: 700; }
.zd-dv2 .zd-prod-dialog__keys li{
  background: var(--dv-page);
  border-radius: 10px;
  color: var(--dv-ink-2);
}
.zd-dv2 .zd-prod-dialog__keys b{ color: var(--dv-ink); }
.zd-dv2 .zd-prod-dialog__desc{ margin-bottom: 1rem; }
.zd-dv2 .zd-prod-dialog__keys{ margin-bottom: 1.25rem; }

/* SPECIFIKACIJE — vidljive odmah, parovi naziv — vrednost (<dl>). */
.zd-dv2 .zd-prod-dialog__spec{ margin: 0; border-top: 0; }
.zd-dv2 .zd-prod-dialog__spec[hidden]{ display: none; }
.zd-dv2 .zd-prod-dialog__specT{
  margin: 0 0 .5rem;
  font-family: var(--zd-font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  color: var(--dv-ink);
}
.zd-dv2 .zd-prod-dialog__spec dl{ margin: 0; border-top: 1px solid var(--dv-line); }
.zd-dv2 .zd-prod-dialog__spec dl > div{
  display: grid;
  grid-template-columns: minmax(8rem, 38%) minmax(0, 1fr);
  gap: .25rem 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--dv-line);
}
.zd-dv2 .zd-prod-dialog__spec dt{
  margin: 0;
  font-family: var(--zd-font-body);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--dv-ink-2);
}
.zd-dv2 .zd-prod-dialog__spec dd{
  margin: 0;
  font-family: var(--zd-font-body);
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--dv-ink);
}

/* Desktop: kontakt ostaje dostupan dok se čitaju specifikacije — lepljiva
   traka na dnu jedine skrol-zone (desna kolona dijaloga). */
.zd-dv2 .zd-prod-dialog__body{ padding-bottom: 0; }
.zd-dv2 .zd-prod-dialog__actions{
  position: sticky; bottom: 0; z-index: 3;
  margin: 1.25rem 0 0;
  padding: .9rem 0 clamp(1.1rem, 2vw, 1.6rem);
  border-top: 1px solid var(--dv-line);
  background: var(--dv-card);
}

/* uvećanje fotografije */
.zd-dv2 .zd-dv2-lightbox{
  position: fixed; inset: 0; z-index: 60;
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(20,20,24,.86);
  cursor: zoom-out;
}
.zd-dv2 .zd-dv2-lightbox.is-open{ display: grid; }
/* Mobirise theme (style.css) daje svakom img `width: 100%`, a max-height: 100%
   se u auto redu grida ne razrešava — uspravna fotografija bi na desktopu bila
   razvučena na punu širinu. Zato: prirodna veličina, ograničena prozorom. */
.zd-dv2 .zd-dv2-lightbox img{
  width: auto; height: auto;
  max-width: 100%;
  max-height: calc(100vh - 2 * clamp(1rem, 4vw, 3rem));
  max-height: calc(100dvh - 2 * clamp(1rem, 4vw, 3rem));
  object-fit: contain;
  border-radius: 12px;
}
.zd-dv2 .zd-dv2-lightbox__close{
  position: absolute;
  top: clamp(.6rem, 2vw, 1.4rem); right: clamp(.6rem, 2vw, 1.4rem);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.35);
  color: #fff;
  cursor: pointer;
}
.zd-dv2 .zd-dv2-lightbox__close svg{ width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   6. RESPONSIVE
   Kolone: 4 od 1200 px, 3 od 1024 px, 2 od 600 px, 1 ispod (telefon).
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px){
  .zd-dv2 .zd-dv2-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* traka u dva reda: filter preko cele širine, ispod broj | sortiranje */
  .zd-dv2 .zd-dv3-bar{
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: .85rem;
  }
  .zd-dv2 .zd-dv3-bar .zd-dv2-filters{ grid-column: 1 / -1; grid-row: 1; justify-self: center; }
}

@media (max-width: 1023.98px){
  .zd-dv2 .zd-dv2-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zd-dv2 .zd-dv2-facts{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .zd-dv2 .zd-dv2-fact:nth-child(3){ grid-column: 1 / -1; }
  .zd-dv2 .zd-dv3-intro--photo .zd-dv3-intro__grid,
  .zd-dv2 .zd-dv3-intro--photo .zd-dv3-intro__top{ max-width: 62%; }
}

/* do 991 px zd-doors.css slaže dijalog u jednu kolonu i skroluje CEO dijalog;
   telo tada ne sme da bude zasebna skrol-zona (inače nema lepljive trake
   kontakta i nastaju ugnježdeni skrolovi). */
@media (max-width: 991.98px){
  .zd-dv2 .zd-prod-dialog__body{ overflow: visible; padding-bottom: 1.5rem; }
  /* u jednoj koloni kontakt stoji na kraju, posle specifikacija (bez lepljive
     trake — dva dugmeta preko cele širine bi prekrila trećinu ekrana) */
  .zd-dv2 .zd-prod-dialog__actions{ position: static; padding-bottom: 0; }
}

@media (max-width: 767.98px){
  /* uvod sa fotografijom: tekst, prednosti, pa niska traka fotografije */
  .zd-dv2 .zd-dv3-intro--photo{ display: flex; flex-direction: column; }
  .zd-dv2 .zd-dv3-intro--photo .zd-dv3-intro__grid,
  .zd-dv2 .zd-dv3-intro--photo .zd-dv3-intro__top{ max-width: none; }
  .zd-dv2 .zd-dv3-ben__d{ max-width: none; }
  .zd-dv2 .zd-dv3-intro__media{
    order: 2;
    position: relative; z-index: 0;
    top: auto; right: auto; bottom: auto;
    width: auto; height: 112px;
    margin: 1rem var(--dv-gutter) 0;
    border-radius: 14px;
    overflow: hidden;
    -webkit-mask-image: none; mask-image: none;
  }
  .zd-dv2 .zd-dv3-intro__media img{ object-position: 60% 45%; }
  .zd-dv2 .zd-dv3-bens{ flex-direction: column; align-items: flex-start; gap: .7rem; }
  .zd-dv2 .zd-dv3-ben{ padding-inline: 0; }
  .zd-dv2 .zd-dv3-ben + .zd-dv3-ben{ border-left: 0; }
  .zd-dv2 .zd-dv3-ben__t{ white-space: normal; }
  .zd-dv2 .zd-dv3-intro--photo .zd-dv3-bens{ margin-top: .9rem; }
  .zd-dv2 .zd-dv3-ben__ico{ width: 40px; height: 40px; }
  .zd-dv2 .zd-dv3-ben__ico svg{ width: 19px; height: 19px; }

  .zd-dv2 .zd-dv3-bar .zd-dv2-filters{ justify-self: stretch; }
  .zd-dv2 .zd-dv2-pill{ height: 36px; padding: 0 .95rem; }
  .zd-dv2 .zd-dv3-sort__l{ display: none; }
  .zd-dv2 .zd-dv3-sort select{ min-width: 0; width: 12.5rem; max-width: 100%; }
  .zd-dv2 .zd-dv2-reset{ padding: 0 .75rem; }

  .zd-dv2 .zd-dv2-thumb{ width: 48px; height: 48px; }
  .zd-dv2 .zd-dv2-gal{ min-height: 0; aspect-ratio: 4 / 5; }
}

@media (max-width: 639.98px){
  .zd-dv2 .zd-dv2-facts{ grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .zd-dv2 .zd-dv2-fact{ padding: 14px 16px; }
  .zd-dv2 .zd-dv2-fact__icon{ width: 40px; height: 40px; }
}

/* TELEFON: jedna kartica u redu, kompaktna — cela kartica (fotografija,
   naziv, karakteristike, cena, dugme) staje u vidljivi deo ekrana ispod
   fiksnog headera. Visina fotografije = manja od (a) prirodnog kadra 4:5 i
   (b) prostora koji ostaje: 100svh − header − tekstualni deo (≈210 px).
   Na telefonu se fotografija uvek prikazuje CELA (contain) preko meke
   pozadine od iste fotografije — vrata se nikad ne seku. Donja granica
   260 px čuva čitljivu fotografiju; tada kartica sme da bude viša od ekrana. */
@media (max-width: 599.98px){
  body.zd-prod.zd-dv2{ --dv-gap: 16px; --dv-card-text: 210px; }
  .zd-dv2 .zd-dv2-grid{ grid-template-columns: minmax(0, 1fr); }
  .zd-dv2 .zd-dv2-card__media{
    aspect-ratio: auto;
    height: min(calc((100vw - 2 * var(--dv-gutter) - 2px) * 1.25),
                max(260px, calc(100vh - var(--zd-nav-h, 68px) - var(--zd-nav-inset, 8px) - var(--dv-card-text))));
    height: min(calc((100vw - 2 * var(--dv-gutter) - 2px) * 1.25),
                max(260px, calc(100svh - var(--zd-nav-h, 68px) - var(--zd-nav-inset, 8px) - var(--dv-card-text))));
  }
  .zd-dv2 .zd-dv2-card__fill{ display: block; }
  .zd-dv2 .zd-dv2-card__img{ object-fit: contain; object-position: 50% 50%; }
  /* Sigurnosna vrata: visina iz odnosa 3:5 pune širine kartice (bez ograničenja na visinu ekrana) */
  .zd-dv2 .zd-dv2-card__media.is-norm{ aspect-ratio: 3 / 5; height: auto; }
  .zd-dv2 .zd-dv2-card__media.is-norm.is-norm--interior{ aspect-ratio: 17 / 25; }
  .zd-dv2 .zd-dv2-card__media.is-norm .zd-dv2-card__img{ object-fit: cover; object-position: 50% 50%; }
  .zd-dv2 .zd-dv2-stock{ top: 12px; left: 12px; }
  .zd-dv2 .zd-dv2-card__body{ padding: 12px 14px 14px; }
  .zd-dv2 .zd-dv2-card__name{ font-size: 1.125rem; }
  .zd-dv2 .zd-dv2-card__meta{ margin-top: .15rem; }
  .zd-dv2 .zd-dv2-card__feats{ margin: .6rem 0 .65rem; }
  .zd-dv2 .zd-dv2-card__buy{ padding-top: .6rem; }
  .zd-dv2 .zd-dv2-card__pr b{ font-size: 1rem; }
  .zd-dv2 .zd-dv2-card__pr b.zd-dv2-card__price{ font-size: 1.25rem; }
  .zd-dv2 .zd-dv2-gal{ aspect-ratio: 1 / 1; }
}

@media (max-width: 389.98px){
  /* broj ide u svoj red da sortiranje + „Poništi" ne gura van ekrana */
  .zd-dv2 .zd-dv3-bar{ grid-template-columns: minmax(0, 1fr); }
  .zd-dv2 .zd-dv3-bar__end{ justify-content: space-between; }
  .zd-dv2 .zd-dv3-sort select{ width: 11rem; }
  .zd-dv2 .zd-dv2-pill{ padding: 0 .8rem; font-size: .8125rem; }
  .zd-dv2 .zd-dv2-card__feats{ gap: .35rem; }
  .zd-dv2 .zd-dv2-card__feats li{ font-size: .6875rem; }
}

/* --------------------------------------------------------------------------
   7. FOKUS / REDUCED MOTION / FORCED COLORS
   -------------------------------------------------------------------------- */
.zd-dv2 .zd-dv2-pill:focus-visible,
.zd-dv2 .zd-dv2-card__cta:focus-visible,
.zd-dv2 .zd-dv2-btn:focus-visible,
.zd-dv2 .zd-dv2-reset:focus-visible,
.zd-dv2 .zd-dv2-thumb:focus-visible,
.zd-dv2 .zd-dv3-switch__a:focus-visible,
.zd-dv2 .zd-dv2-crumb a:focus-visible,
.zd-dv2 .zd-dv3-sort select:focus-visible,
.zd-dv2 .zd-dv2-gal__main:focus-visible{
  outline: 2px solid var(--dv-accent);
  outline-offset: 3px;
}
.zd-dv2 .zd-dv2-card:focus-within{ border-color: var(--dv-gold); }

@media (prefers-reduced-motion: reduce){
  .zd-dv2 .zd-dv2-card,
  .zd-dv2 .zd-dv2-card__img,
  .zd-dv2 .zd-dv2-card__cta,
  .zd-dv2 .zd-dv2-card__cta svg,
  .zd-dv2 .zd-dv2-pill,
  .zd-dv2 .zd-dv2-btn{ transition: none !important; }
  .zd-dv2 .zd-dv2-card:hover,
  .zd-dv2 .zd-dv2-card:hover .zd-dv2-card__img,
  .zd-dv2 .zd-dv2-card:hover .zd-dv2-card__cta svg{ transform: none; }
  .zd-dv2 .zd-dv2-grid > li{ animation: none !important; }
  /* LED u oznaci „Na stanju" ostaje statična */
  .zd-dv2 .zd-dv2-stock__dot{ animation: none; box-shadow: 0 0 0 2px rgba(74,222,128,.35); }
}

@media (forced-colors: active){
  .zd-dv2 .zd-dv2-card,
  .zd-dv2 .zd-dv2-fact,
  .zd-dv2 .zd-dv3-sort select{ border: 1px solid CanvasText; }
  .zd-dv2 .zd-dv2-pill[aria-pressed="true"]{ outline: 2px solid Highlight; }
  .zd-dv2 .zd-dv2-stock{ border: 1px solid CanvasText; }
}