/*
=====================================================================
DemoShop V120.15.0 — STILOVI NOVIH ELEMENATA (kalendari, korpa, pravno)

  Zaseban fajl: style.css se NE menja, pa izgled postojećih elemenata
  ostaje bajt-isti. Ovde su isključivo NOVE klase:
    • opcija uštampavanja na stranici proizvoda
    • izbor preuzimanja i plaćanja, red dostave i dinarski iznos u korpi
    • pravne veze u podnožju
    • pravne stranice
  Jedino pravilo nad postojećom klasom: .customer-type sme da se prelomi
  u drugi red (dodat je treći tip kupca „Preduzetnik”).
=====================================================================
*/

/* ---------- stranica proizvoda: uštampavanje (samo naš katalog) ---------- */
.imprint-option{margin:16px 0 0}
.imprint-choice{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm,10px);background:#fff;cursor:pointer}
.imprint-choice input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--brand-teal-dark,#168fa4)}
.imprint-choice strong{display:block;font-size:13px;line-height:1.35}
.imprint-choice small{display:block;margin-top:3px;color:var(--muted);font-size:12px;line-height:1.5}
.imprint-choice:focus-within{border-color:var(--brand-teal,#21b5c9);box-shadow:0 0 0 3px rgba(33,181,201,.13)}

/* ---------- korpa: tip kupca, preuzimanje, plaćanje ---------- */
.customer-type{flex-wrap:wrap;row-gap:2px}
.order-choice{flex-direction:column;align-items:flex-start;gap:0;margin:14px 0 0}
.cart-summary .order-choice label{margin-top:0;min-height:30px}
.order-choice label.is-unavailable{color:var(--muted);cursor:not-allowed}
.order-choice label.is-unavailable input{cursor:not-allowed}

/* ---------- korpa: dostava, napomene, dinari ---------- */
.cart-totals .cart-delivery-row{padding-top:10px;border-top:1px solid var(--line)}
.cart-totals .cart-delivery-row strong{color:var(--ink);text-align:right}
.cart-delivery-note{margin:-10px 0 12px}
.cart-rsd{margin:0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm,10px);background:var(--brand-soft,#f3faf7)}
.cart-rsd strong,.cart-rsd span,.cart-rsd small{display:block}
.cart-rsd strong{color:var(--ink);font-size:13px}
.cart-rsd small{margin-top:4px}
.cart-legal-note{margin-top:10px}
.cart-legal-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cart-legal-note a:hover,.cart-legal-note a:focus-visible{color:var(--brand-teal-dark,#168fa4)}
.drawer-total-note{margin:6px 0 0;color:var(--muted);font-size:11px;line-height:1.4}
.quote-success-panel>p.quote-success-reference{margin:0 auto 10px;font-weight:800;color:#174d33}
.quote-success-panel>p.quote-success-next{margin-top:0}

/* ---------- podnožje: pravne veze ---------- */
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 20px;padding-top:18px;padding-bottom:18px;border-top:1px solid rgba(255,255,255,.1)}
.footer-legal a{color:#aebdb9;font-size:12px;line-height:1.6;text-decoration:none;transition:color .18s ease}
.footer-legal a:hover,.footer-legal a:focus-visible{color:#7ce0d1;text-decoration:underline;text-underline-offset:3px}
.footer-legal a[aria-current="page"]{color:#f8fbfa}

/* ---------- pravne stranice ---------- */
.legal-page{padding:34px 0 64px}
.legal-hero{max-width:860px;margin:0 auto 26px}
.legal-hero .eyebrow{margin:0 0 10px}
.legal-hero h1{margin:0 0 12px;font-size:clamp(28px,4.2vw,44px);line-height:1.08;letter-spacing:-.03em}
.legal-hero p{margin:0;color:var(--muted);font-size:15px;line-height:1.7}
.legal-meta{margin-top:10px!important;font-size:12px!important}
.legal-nav{display:flex;flex-wrap:wrap;gap:8px;max-width:860px;margin:0 auto 26px;padding:0;list-style:none}
.legal-nav a{display:inline-block;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:12px;font-weight:600;text-decoration:none}
.legal-nav a:hover,.legal-nav a:focus-visible{border-color:var(--brand-teal,#21b5c9);color:var(--brand-teal-dark,#168fa4)}
.legal-nav a[aria-current="page"]{border-color:var(--ink);background:var(--ink);color:#fff}
.legal-body{max-width:860px;margin:0 auto;color:var(--ink);font-size:15px;line-height:1.75}
.legal-body h2{margin:34px 0 10px;font-size:20px;line-height:1.25;letter-spacing:-.01em}
.legal-body h3{margin:22px 0 8px;font-size:16px;line-height:1.3}
.legal-body p{margin:0 0 12px}
.legal-body ul,.legal-body ol{margin:0 0 14px;padding-left:22px}
.legal-body li{margin:0 0 6px}
.legal-body a{color:var(--brand-teal-dark,#168fa4);text-decoration:underline;text-underline-offset:2px}
.legal-body address{font-style:normal}
.legal-body .legal-note{padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--brand-teal,#21b5c9);border-radius:var(--r-sm,10px);background:var(--brand-soft,#f3faf7)}
.legal-body .legal-note p:last-child{margin-bottom:0}
.legal-table-wrap{overflow-x:auto;margin:0 0 16px}
.legal-body table{width:100%;min-width:520px;border-collapse:collapse;font-size:14px;line-height:1.55}
.legal-body th,.legal-body td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top}
.legal-body th{background:var(--soft);font-weight:700}
.legal-body dl.legal-facts{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:0;margin:0 0 16px;border:1px solid var(--line);border-radius:var(--r-sm,10px);overflow:hidden}
.legal-body dl.legal-facts dt,.legal-body dl.legal-facts dd{margin:0;padding:10px 14px;border-bottom:1px solid var(--line)}
.legal-body dl.legal-facts dt{background:var(--soft);font-weight:700;font-size:13px}
.legal-body dl.legal-facts dt:last-of-type,.legal-body dl.legal-facts dd:last-of-type{border-bottom:0}
.withdrawal-form{margin:0 0 16px;padding:18px 20px;border:1px solid var(--ink);border-radius:var(--r-sm,10px);background:#fff}
.withdrawal-form h3{margin-top:0}
.withdrawal-form .form-line{display:block;margin:0 0 10px;padding-bottom:4px;border-bottom:1px dotted #9a9aa2;min-height:26px}
.legal-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.legal-actions button{padding:10px 16px;border:1px solid var(--ink);border-radius:var(--r-sm,10px);background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.legal-actions button:hover,.legal-actions button:focus-visible{background:var(--ink);color:#fff}
@media(max-width:700px){
  .legal-page{padding:22px 0 46px}
  .legal-body{font-size:14.5px}
  .legal-body dl.legal-facts{grid-template-columns:1fr}
  .legal-body dl.legal-facts dt{border-bottom:0;padding-bottom:2px}
  .footer-legal{gap:6px 16px}
}
@media print{
  .site-header,.site-footer,.legal-nav,.legal-actions,.cart-drawer,.cart-drawer-backdrop{display:none!important}
  .legal-page{padding:0}
  .legal-body{max-width:none;font-size:12pt}
}

/* =====================================================================
   V120.15 — ISTICANJE KALENDARA (navigacija + uvodni deo početne)
   Samo NOVE klase; home.css i style.css se ne menjaju.
   ===================================================================== */

/* ---------- navigacija: „Kalendari” odmah posle „Kategorije” ----------
   Diskretan naglasak postojećom tirkiznom (bez nove boje). Bez box-shadow,
   da postojeća oznaka aktivne stranice (.quick-category.active — linija
   ispod) i postojeći fokus ostanu vidljivi i nepromenjeni. */
.home-nav a.nav-calendars,
.nav-commercial .quick-category.nav-calendars{color:var(--brand-strong,#168fa4);background:var(--brand-tint,#e9f8f3)}
.home-nav a.nav-calendars:hover,
.nav-commercial .quick-category.nav-calendars:hover{color:#0f7686;background:#d8f1ea!important}

/* ---------- početna: celina „Kalendari za 2027.” (zamena desne slike) ---------- */
.home-calendars-card{overflow:hidden;border:1px solid var(--border,#e2eae8);border-radius:var(--r-lg,20px);background:#fff;box-shadow:var(--elev-2,0 4px 12px rgba(24,58,51,.07))}
/* dimenzije su rezervisane (width/height + aspect-ratio): nema skakanja rasporeda */
.home-calendars-image{display:block;width:100%;height:auto;aspect-ratio:1300/1060}
.home-calendars-copy{padding:6px 26px 26px}
.home-calendars-copy h2{margin:0;color:var(--text,#18181b);font-size:clamp(22px,2.1vw,28px);line-height:1.15;letter-spacing:-.02em}
.home-calendars-copy p{margin:9px 0 0;color:var(--text-muted,#66716f);font-size:14.5px;line-height:1.55}
.home-calendars-cta{display:inline-flex;align-items:center;gap:8px;min-height:46px;margin-top:16px;padding:0 20px;border-radius:var(--r-sm,10px);background:#0f7686;color:#fff;font-size:14px;font-weight:700;white-space:nowrap;transition:background .15s ease,transform .15s ease}
.home-calendars-cta:hover{background:#0c6573}
.home-calendars-cta:active{transform:translateY(1px)}
.home-calendars-cta:focus-visible{outline:3px solid rgba(33,181,201,.45);outline-offset:2px}
@media(max-width:430px){
  .home-calendars-copy{padding:4px 18px 20px}
  .home-calendars-cta{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.home-calendars-cta{transition:none}.home-calendars-cta:active{transform:none}}

/* =====================================================================
   V120.15.1 — POČETNA NA TELEFONU: REDOSLED I KOMPAKTNA NAVIGACIJA
   Desktop (≥ 901 px) se ovim pravilima ne menja.
   ===================================================================== */

/* dugme „Još” postoji samo na telefonu */
.home-nav-toggle{display:none}

/* ---------- redosled (jedna kolona, ≤ 900 px): naslov i opis → kalendari → kategorije ----------
   Elementi se ne dupliraju: omotač leve kolone se „rastvara” (display:contents),
   pa se isti elementi samo ređaju drugim redom. */
@media(max-width:900px){
  .home-opening-inner{gap:0}
  .home-opening-copy{display:contents}
  .home-opening-copy>.eyebrow{order:1}
  .home-opening-copy>h1{order:2}
  .home-opening-copy>.home-opening-lead{order:3}
  .home-opening-inner>.home-opening-visual{order:4;margin-top:18px}
  .home-opening-copy>.home-trust-line{order:5;margin-top:18px}
  .home-opening-copy>.home-launcher{order:6;margin-top:18px}
}

/* ---------- navigacija početne na telefonu (≤ 700 px): jedan red + „Još” ---------- */
@media(max-width:700px){
  .home-nav.is-collapsible .home-nav-inner{justify-content:flex-start;gap:4px}
  .home-nav.is-collapsible .home-nav-toggle{display:inline-flex;align-items:center;gap:4px;min-height:40px;margin-left:auto;padding:9px 12px;border:1px solid #c7e4de;border-radius:var(--r-sm,10px);background:#f7fbfa;color:var(--brand-strong,#168fa4);font:inherit;font-size:11px;font-weight:700;white-space:nowrap;cursor:pointer}
  .home-nav.is-collapsible .home-nav-toggle .nav-chevron{display:inline-block;font-size:11px;transition:transform .15s ease}
  .home-nav.is-collapsible .home-nav-toggle[aria-expanded="true"] .nav-chevron{transform:rotate(180deg)}
  .home-nav.is-collapsible .home-nav-toggle:focus-visible{outline:3px solid rgba(33,181,201,.45);outline-offset:2px}
  /* sklopljeno: veze posle dugmeta se ne prikazuju (i nisu u redosledu tastature) */
  .home-nav.is-collapsible:not(.is-open) .home-nav-toggle~a{display:none}
  /* rasklopljeno: iste veze u nastavku iste trake */
  .home-nav.is-collapsible.is-open .home-nav-toggle~a{flex:1 1 calc(50% - 4px);justify-content:center}
}
@media(max-width:360px){
  .home-nav.is-collapsible .home-nav-inner{gap:2px}
  .home-nav.is-collapsible .home-nav-inner>a{padding:9px 8px}
  .home-nav.is-collapsible .home-nav-toggle{padding:9px 8px}
}
@media(prefers-reduced-motion:reduce){.home-nav-toggle .nav-chevron{transition:none!important}}

/* =====================================================================
   V120.15.2 — POČETNA: ČITLJIVOST (izmereno u pregledaču pri 100 %)
   Samo kartice kategorija i kartica „Kalendari za 2027.”; naslovi i ostali
   tekst se ne menjaju.
     naziv kartice kategorije   14 px   → 15 px
     kratak opis kartice        11 px   → 12,5 px
     opis u kartici kalendara   14,5 px → 15,5 px
     tekst dugmeta              14 px   → 15 px
   ===================================================================== */
.home-launcher-tile strong{font-size:15px;line-height:1.25}
.home-launcher-tile small{font-size:12.5px;line-height:1.4}
.home-calendars-copy p{font-size:15.5px;line-height:1.55}
.home-calendars-cta{font-size:15px}
/* telefon sa dve uske kolone (361–430 px): naziv ostaje 14 px — već 14,5 px prelama „USB memorije” u 2, a
   „Slobodno vreme i lepota” u 3 reda (izmereno); kratki opisi se na toj širini i inače ne prikazuju */
@media(max-width:430px){.home-launcher-tile strong{font-size:14px}}
@media(max-width:360px){.home-launcher-tile strong{font-size:15px}}

/* =====================================================================
   V120.15.3 — CELA SLIKA KALENDARA U OKVIRU (popravka odsecanja)

   UZROK: okvir slike je mreža (display:grid) fiksne veličine sa overflow:
   hidden, a slika je stavka mreže širine 100 % i visine „auto”. Red mreže je
   „auto”, pa se širi na prirodnu visinu slike. Kvadratne slike proizvoda
   dobavljača daju visinu = širini i staju tačno u okvir; uspravne slike
   kalendara (2:3, 3:4) daju red viši od okvira (npr. 268 × 385 u okviru
   268 × 268) i donji deo se odseca. object-fit: contain tu ne pomaže, jer
   okvir same slike već ima njen prirodni odnos stranica.

   POPRAVKA: jedina ćelija mreže se ograničava na veličinu okvira
   (minmax(0,1fr)), a slika na veličinu ćelije; object-fit: contain tada
   smešta CELU sliku u nepromenjeni okvir, sa očuvanim proporcijama. Okviri,
   razmaci i overflow se ne menjaju — ništa ne prelazi preko naziva, cene ni
   kontrola. Za kvadratne slike rezultat je isti kao do sada.

   OBIM: kartice i stranica korpe — samo naši kalendari (postoji oznaka u
   HTML-u). Glavna slika, sličice galerije i fioka korpe nemaju oznaku izvora,
   pa pravilo važi za sve proizvode (kvadratne slike: bez promene).
   ===================================================================== */
.product-card[data-model^="DG-"] .card-media,
#thumbs .thumb,
.cart-item[data-own="true"] .cart-item-image,
.cart-drawer-image{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.product-card[data-model^="DG-"] .card-media>.card-image,
#thumbs .thumb>img,
.cart-item[data-own="true"] .cart-item-image>img,
.cart-drawer-image>img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
/* glavna slika: okvir je na desktopu kvadrat određene visine — slika se vezuje za visinu ćelije;
   na telefonu okvir nema zadatu visinu, pa 100 % znači „auto” i slika ostaje cela kao do sada.
   Postojeća ograničenja max-height se ne diraju. */
#openLightbox.main-image-wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
#openLightbox.main-image-wrap>#mainImage{height:100%;min-height:0;object-fit:contain}

/* =====================================================================
   V120.15.4 — KARTICE NAŠIH KALENDARA U KATALOGU

   UZROK PRAZNINE: style.css rezerviše 57 px iznad dostupnosti na svakoj
   kartici koja NEMA traku varijanti (boje), da bi dostupnost bila u liniji
   sa susednim karticama koje traku imaju. Naši kalendari traku nemaju
   nikada, pa je u prikazu sa samo našim karticama to čist prazan prostor.

   Pravila važe SAMO kada su u mreži isključivo naše kartice (kategorija
   Kalendari i njene potkategorije). U mešovitom prikazu (ceo katalog,
   pretraga) naše kartice zadržavaju rezervisani prostor, da ostanu u liniji
   sa karticama dobavljača u istom redu. Kartice dobavljača se ne menjaju.
   ===================================================================== */
/* dostupnost se vezuje za dno (kao i cena): razmak posle šifre je samo njena donja margina,
   a ako je neka kartica u redu viša (duži naziv/opis), višak ide ovde — dostupnost i cena ostaju u liniji */
.product-grid:not(:has(.product-card:not([data-model^="DG-"]))) .product-card[data-model^="DG-"] .card-content .card-stock{margin-top:auto}
.product-grid:not(:has(.product-card:not([data-model^="DG-"]))) .product-card[data-model^="DG-"] .card-content .card-meta{margin-top:0}
/* kalendar sa jednom varijantom nema oznaku ispod cene: u prikazu sa samo našim karticama prazan element se uklanja,
   u mešovitom prikazu zadržava visinu oznake da cena ostane u liniji sa susedima */
.variant-summary.variant-summary-empty{min-height:25px}
.product-grid:not(:has(.product-card:not([data-model^="DG-"]))) .variant-summary.variant-summary-empty{display:none}

/* =====================================================================
   V120.15.5 — KORPA: poruka kada upit ima više stavki od dozvoljenog
   ===================================================================== */
.cart-limit-note{margin:0 0 12px;padding:11px 13px;border:1px solid #f1c7c7;border-left:4px solid #c62828;border-radius:var(--r-sm,10px);background:#fff5f5;color:#8e1b1b;font-size:13.5px;line-height:1.5}
.cart-limit-note:focus-visible{outline:3px solid rgba(198,40,40,.35);outline-offset:2px}

/* =====================================================================
   V120.15.7 — PRAVNE STRANICE NA TELEFONU: tekst ne sme biti širi od ekrana
   Stranice sa tabelom (privatnost, kolačići, odustanak) su širile ceo članak
   na širinu tabele (520 px), pa je tekst bio odsečen. Članak ostaje u širini
   stranice, a tabela se pomera unutar svog okvira (.legal-table-wrap).
   ===================================================================== */
.legal-page>*{min-width:0}
.legal-body{min-width:0;max-width:min(860px,100%);overflow-wrap:break-word}
.legal-table-wrap{max-width:100%}
.cart-form-note{margin:-2px 0 12px}

/* =====================================================================
   V120.15.10 — IZBOR POTKATEGORIJE KALENDARA (red veza ispod naslova)
   „Svi kalendari” + četiri grupe; isti čvorovi i brojači kao bočno stablo.
   Desktop: jedan red, poravnat sa naslovom (ista leva margina kao
   .catalog-page-heading u style.css); telefon: „Svi” preko cele širine,
   grupe u dve kolone.
   ===================================================================== */
.group-chooser{display:flex;flex-wrap:wrap;gap:10px;margin:-4px 0 20px 280px}
@media(max-width:1100px) and (min-width:901px){.group-chooser{margin-left:274px}}
@media(max-width:900px){.group-chooser{margin-left:0}}
.group-chooser[hidden]{display:none}
.group-choice{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:9px 16px;border:1px solid #cdded9;border-radius:999px;background:#fff;color:var(--ink,#1c1c1f);font-size:14px;font-weight:700;line-height:1.2;text-decoration:none;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.group-choice small{flex:none;min-width:26px;padding:3px 8px;border-radius:999px;background:var(--brand-mint,#e6f6f1);color:#0f6f80;font-size:12px;font-weight:800;text-align:center}
.group-choice:hover{border-color:var(--brand-teal,#21b5c9);color:#0f6f80}
.group-choice:focus-visible{outline:3px solid rgba(33,181,201,.4);outline-offset:2px}
.group-choice.active{border-color:#0f7f91;background:#0f7f91;color:#fff}
.group-choice.active small{background:rgba(255,255,255,.22);color:#fff}
@media(max-width:700px){
  .group-chooser{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:2px 0 14px}
  .group-choice{padding:9px 12px;border-radius:14px;font-size:13.5px}
  .group-choice:first-child{grid-column:1 / -1}
}