/*
Theme Name: Astra Child (OZZY)
Template: astra
Version: 1.0.0
Description: Child tema za OZZY. Jedini CSS koji ovde stoji su animacije (@keyframes) i prefers-reduced-motion iz wp/ozzy-theme.css, jer Elementor paneli ne mogu da ih izraze. Sve ostalo je u Elementor globalnim klasama i promenljivima.
Text Domain: astra-child
*/

/* OZZY animacije (iz wp/ozzy-theme.css) */
@keyframes ozzy-sjaj {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

@keyframes ozzy-kamion-0 {
  0% { transform: translateX(-14px) scale(0.6); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes ozzy-kamion-1 {
  0% { transform: translateX(-14px) scale(0.6); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes ozzy-badz-0 {
  0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes ozzy-badz-1 {
  0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes ozzy-konfete-0 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

@keyframes ozzy-konfete-1 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   OZZY dopune (2026-09-18) — samo ono sto Astra/Elementor paneli ne mogu:
   1) red headera poravnat sa merom stranice (.mera),
   2) padajuci meni kao kartica desno ispod hamburgera + zatamnjenje strane,
   3) FAQ: otvorena stavka je jedna kartica, ne dve.
   Sve vrednosti su Elementor globalne promenljive.
   -------------------------------------------------------------------------- */

/* 1) header prati meru stranice */
#ast-mobile-header .ast-above-header-bar,
#ast-mobile-header .ast-primary-header-bar,
.ast-header-break-point #masthead .ast-mobile-header-wrap .ast-above-header-bar,
.ast-header-break-point #masthead .ast-mobile-header-wrap .ast-primary-header-bar {
  padding-left: 0;
  padding-right: 0;
}

#ast-mobile-header .ast-builder-grid-row {
  width: 100%;
  max-width: var(--mera-stranica);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--r-gutter);
  padding-right: var(--r-gutter);
}

/* 2) padajuci meni */
#ast-mobile-header {
  position: relative;
  z-index: 4;
}

#ast-mobile-header .ast-mobile-header-content {
  left: 0;
  right: 0;
  width: 100%;
  max-width: var(--mera-stranica);
  margin-left: auto;
  margin-right: auto;
  padding: var(--r-2) var(--r-gutter) 0;
  background: none;
  border: 0;
}

#ast-mobile-header .ast-mobile-header-content .ast-builder-menu-mobile {
  width: min(320px, 100%);
  margin-left: auto;
  padding: var(--r-2) var(--r-4);
  background: var(--boja-bela);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-l);
  box-shadow: var(--senka-2);
  overflow: hidden;
}

#ast-mobile-header .ast-mobile-header-content .menu-link {
  letter-spacing: var(--razmak-slova-dugme);
}

body.ast-main-header-nav-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  background: var(--boja-zastor);
}

/* 3) FAQ — otvorena stavka je jedna kartica */
.e-n-accordion-item[open] > .e-n-accordion-item-title {
  /* !important jer Elementor boju ivice ispisuje selektorom vece specificnosti */
  border-bottom-color: transparent !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.e-n-accordion-item[open] > .e-con {
  --border-radius: 0 0 var(--radijus-m) var(--radijus-m);
  border-top-width: 0;
}
/* 4) Futer: na tabletu kolone idu 2 u redu (original: flex-basis 320 px).
   Astra ovde nema zasebna tablet podesavanja jer prekid za mobilni header ide do 1920 px. */
@media (min-width: 600px) and (max-width: 921px) {
  .site-footer .ast-builder-footer-grid-columns.site-primary-footer-inner-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* 5) Traka sa najavama: Astra HTML element nema kontrole za tezinu, velika slova
   i razmak slova, a original ih ima (.najava-tekst). */
#masthead .najava-tekst {
  margin: 0;
  font-family: var(--font-naslov);
  font-weight: var(--tezina-debela);
  letter-spacing: var(--razmak-slova-oznaka);
  text-transform: uppercase;
  white-space: nowrap;
}
/* 6) Podebljane reci u listi: u originalu <b> nasledjuje 900 (bolder od 700),
   a u Elementoru ostaje 700. */
.lista b,
.lista strong {
  font-weight: var(--tezina-crna);
}
/* 7) Brojevi u karticama i tvrdnjama: original ima klasu .broj (tabularne cifre,
   tezina 900), a u Elementoru su to inline <strong> u tekstu widgeta. */
.elementor .broj,
.elementor .tekst-sitni strong,
.elementor .tvrdnja strong {
  font-variant-numeric: tabular-nums;
  font-weight: var(--tezina-crna);
}
/* --------------------------------------------------------------------------
   8) Stranice proizvoda: galerija, kutija za kupovinu i tabela deklaracije.
   Prepisano iz wp/ozzy-theme.css (redovi 596-999, bez @keyframes koji su vec
   gore). Ovo ne moze da bude Elementor globalna klasa: pravila koriste
   potomke (.opcija-izabrana .opcija-krug), stanja i animacije, a galerija i
   kutija za kupovinu su po dogovoru HTML widget.
   -------------------------------------------------------------------------- */

.galerija {
  display: flex;
  flex: 1 1 var(--osnova-kolone);
  flex-direction: column;
  gap: var(--r-3);
  min-width: min(100%, var(--osnova-kolone));
}

.galerija-glavna {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--boja-krem-050);
  border-radius: var(--radijus-kesica);
  object-fit: contain;
  display: block;
}

.galerija-trake {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-2);
}

.galerija-traka {
  flex: 1 1 var(--osnova-trake);
  min-width: var(--osnova-trake);
  padding: 0;
  background: var(--boja-krem-050);
  border: var(--ivica-debela) solid var(--boja-ivica);
  border-radius: var(--radijus-m);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity var(--trajanje) var(--krivulja), border-color var(--trajanje) var(--krivulja);
}

.galerija-traka:hover {
  opacity: 0.85;
}

.galerija-traka-aktivna {
  border-color: var(--boja-plum-900);
  opacity: 1;
}

.galerija-traka img {
  width: 100%;
  height: var(--visina-trake);
  object-fit: contain;
  display: block;
}

.opcije {
  display: flex;
  flex-direction: column;
  gap: var(--r-2);
}

.sastav {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--r-2);
}

.sastav-opcija {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--dodir-min);
  padding: var(--r-3) var(--r-2);
  background: var(--boja-bela);
  border: var(--ivica-debela) solid var(--boja-ivica);
  border-radius: var(--radijus-pilula);
  color: var(--boja-plum-900);
  font-family: var(--font-naslov);
  font-size: var(--slova-m);
  font-weight: var(--tezina-debela);
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

.sastav-izabrana {
  background: var(--boja-krem-050);
  border-color: var(--boja-narandzasta-cta);
}

.opcija {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 0;
  background: var(--boja-bela);
  border: var(--ivica-debela) solid var(--boja-ivica);
  border-radius: var(--radijus-l);
  color: var(--boja-plum-900);
  font-family: var(--font-telo);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.opcija-zaglavlje {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--r-2) var(--r-4);
  background: var(--boja-narandzasta-cta);
  color: var(--boja-bela);
  font-family: var(--font-naslov);
  font-size: var(--slova-xs);
  font-weight: var(--tezina-debela);
  letter-spacing: var(--razmak-slova-oznaka);
  text-transform: uppercase;
  text-align: center;
}

.opcija-red {
  display: flex;
  align-items: center;
  gap: var(--r-3);
  padding: var(--r-3) var(--r-4) var(--r-2);
}

.opcija-lista {
  display: flex;
  flex-direction: column;
  gap: var(--r-1);
  padding: 0 var(--r-4) var(--r-3) calc(var(--r-4) + var(--r-5) + var(--r-3));
}

.opcija-stavka {
  display: flex;
  align-items: flex-start;
  gap: var(--r-2);
  color: var(--boja-plum-900);
  font-size: var(--slova-m);
  font-weight: var(--tezina-poludebela);
  line-height: 1.35;
  text-align: left;
}

.opcija-kvacica {
  flex: none;
  width: var(--r-4);
  height: var(--r-4);
  margin-top: 0.15em;
  color: var(--boja-narandzasta-cta);
}

.opcija-izabrana {
  background: var(--boja-krem-050);
  border-color: var(--boja-narandzasta-cta);
  box-shadow: var(--senka-1);
}

.opcija-krug {
  flex: none;
  width: var(--r-5);
  height: var(--r-5);
  background: var(--boja-bela);
  border: var(--ivica-debela) solid var(--boja-plum-200);
  border-radius: var(--radijus-pilula);
}

.opcija-izabrana .opcija-krug {
  background: var(--boja-narandzasta-cta);
  border-color: var(--boja-narandzasta-cta);
}

.opcija-telo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.opcija-naziv {
  font-family: var(--font-naslov);
  font-size: var(--slova-xl);
  font-weight: var(--tezina-debela);
  text-transform: uppercase;
}

.opcija-detalj {
  color: var(--boja-plum-700);
  font-size: var(--slova-m);
  font-weight: var(--tezina-srednja);
}

.opcija-cena {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
}

.opcija-po-dozi {
  color: var(--boja-plum-700);
  font-size: var(--slova-xs);
  font-weight: var(--tezina-srednja);
}

.opcija-ukupno {
  font-family: var(--font-naslov);
  font-size: var(--slova-xl);
  font-weight: var(--tezina-crna);
  font-variant-numeric: tabular-nums;
}

.opcija-stara {
  color: var(--boja-plum-500);
  font-size: var(--slova-s);
  text-decoration: line-through;
}

/* Ustede na karticama pakovanja (od 23. 9. 2026 umesto precrtane cene):
   racunaju se prema dva paketa od 14 sa dve postarine, sto objasnjava
   .opcije-osnova ispod kartica. */
.opcija-usteda {
  color: var(--boja-plum-900, #3b1f3a);
  font-size: var(--slova-xs);
  font-weight: var(--tezina-crna);
  white-space: nowrap;
}

.opcije-osnova {
  margin: 8px 0 0;
}

.traka {
  display: flex;
  flex-direction: column;
  gap: var(--r-2);
  padding: var(--r-4);
  background: var(--boja-bela);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-l);
  overflow: hidden;
}

.traka-vrh {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--r-2);
}

.traka-red {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--r-2);
}

.traka-oluk {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--visina-trake-popusta);
  background: var(--boja-plum-100);
  border-radius: var(--radijus-pilula);
  overflow: hidden;
}

.traka-punjenje {
  position: relative;
  height: 100%;
  background: var(--boja-narandzasta-cta);
  border-radius: var(--radijus-pilula);
  overflow: hidden;
  transition: width 0.45s var(--krivulja);
}

.traka-sjaj {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--boja-bela), transparent);
  opacity: 0.75;
  animation: ozzy-sjaj 0.9s var(--krivulja) 1;
}

.traka-kamion {
  display: inline-flex;
  visibility: visible;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--velicina-kamiona);
  height: var(--velicina-kamiona);
  color: var(--boja-narandzasta-cta);
}

.traka-badz {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: var(--r-1);
  padding: var(--r-1) var(--r-3);
  box-shadow: var(--senka-2);
  white-space: nowrap;
  background: var(--boja-narandzasta-cta);
  border-radius: var(--radijus-pilula);
  color: var(--boja-bela);
  font-family: var(--font-naslov);
  font-size: var(--slova-xs);
  font-weight: var(--tezina-debela);
  letter-spacing: var(--razmak-slova-oznaka);
  text-transform: uppercase;
}

.traka-konfete {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

.traka-konfete span {
  position: absolute;
  border-radius: var(--radijus-pilula);
}

.tabela-okvir {
  flex: 1 1 var(--osnova-kolone);
  min-width: 0;
  overflow-x: auto;
  background: var(--boja-bela);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-l);
  box-shadow: var(--senka-1);
}

.tabela {
  width: 100%;
  min-width: var(--sirina-tabele-min);
  border-collapse: collapse;
}

.tabela-zaglavlje {
  padding: var(--r-3) var(--r-4);
  color: var(--boja-plum-500);
  font-family: var(--font-naslov);
  font-size: var(--slova-xs);
  font-weight: var(--tezina-debela);
  letter-spacing: var(--razmak-slova-oznaka);
  text-transform: uppercase;
  text-align: left;
}

.tabela-celija {
  padding: var(--r-2) var(--r-4);
  border-top: var(--ivica-tanka) solid var(--boja-ivica);
  font-size: var(--slova-m);
  font-weight: var(--tezina-srednja);
}

.tabela-broj {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   9) Ispravke za stranice proizvoda. Elementor ispisuje CSS globalne klase
   samo ako je klasa upotrebljena na nativnom elementu te stranice, a dugme
   i galerija zive u HTML widgetu. Zato Astra preuzme izgled dugmadi, pa su
   ovde prepisana pravila iz wp/ozzy-theme.css (.dugme-primarno, .dugme-cta,
   .dugme-siroko) i pravilo .stek > .kartica koje je selektor potomka.
   -------------------------------------------------------------------------- */

.elementor .stek > .kartica,
.elementor .kolona > .kartica {
  flex: 0 0 auto;
}

.elementor .galerija-traka,
.elementor .sastav-opcija,
.elementor .opcija {
  line-height: normal;
  box-shadow: none;
}

.elementor .opcija-izabrana {
  box-shadow: var(--senka-1);
}

.elementor .galerija-traka img {
  height: var(--visina-trake);
}

.elementor .tabela-okvir {
  color: var(--boja-plum-900);
}

.elementor [data-ozzy-kupovina] .dugme-primarno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--r-2);
  min-height: var(--dodir-min);
  padding: var(--r-4) var(--r-8);
  background: var(--boja-narandzasta-cta);
  border: var(--ivica-debela) solid var(--boja-narandzasta-cta);
  border-radius: var(--radijus-pilula);
  box-shadow: none;
  color: var(--boja-bela);
  font-family: var(--font-naslov);
  font-size: var(--slova-m);
  font-weight: var(--tezina-crna);
  letter-spacing: var(--razmak-slova-dugme);
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--trajanje) var(--krivulja), transform var(--trajanje) var(--krivulja-pop);
}

.elementor [data-ozzy-kupovina] .dugme-primarno:hover {
  background: var(--boja-narandzasta-cta-hover);
  border-color: var(--boja-narandzasta-cta-hover);
  color: var(--boja-bela);
  transform: translateY(-2px);
}

.elementor [data-ozzy-kupovina] .dugme-siroko {
  width: 100%;
}

.elementor [data-ozzy-kupovina] .dugme-cta {
  padding-left: var(--r-5);
  padding-right: var(--r-5);
  font-size: var(--slova-cta);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   10) Bez promene boje na hover. Astra svakom <button> na hover i focus daje
   belu boju teksta i plavu pozadinu (--ast-global-color-1), a dizajn to nema.
   Vrednosti su iste kao u mirnom stanju, pa boja ostaje nepromenjena.
   -------------------------------------------------------------------------- */

.elementor .galerija-traka:hover,
.elementor .galerija-traka:focus {
  background: var(--boja-krem-050);
  border-color: var(--boja-ivica);
  color: inherit;
}

.elementor .galerija-traka-aktivna:hover,
.elementor .galerija-traka-aktivna:focus {
  border-color: var(--boja-plum-900);
}

.elementor .sastav-opcija:hover,
.elementor .sastav-opcija:focus {
  background: var(--boja-bela);
  border-color: var(--boja-ivica);
  color: var(--boja-plum-900);
}

.elementor .sastav-izabrana:hover,
.elementor .sastav-izabrana:focus {
  background: var(--boja-krem-050);
  border-color: var(--boja-narandzasta-cta);
  color: var(--boja-plum-900);
}

.elementor .opcija:hover,
.elementor .opcija:focus {
  background: var(--boja-bela);
  border-color: var(--boja-ivica);
  color: var(--boja-plum-900);
}

.elementor .opcija-izabrana:hover,
.elementor .opcija-izabrana:focus {
  background: var(--boja-krem-050);
  border-color: var(--boja-narandzasta-cta);
  color: var(--boja-plum-900);
}

/* 11) Dugme hamburger menija nema pozadinu, pa je ne dobija ni na hover. */
#ast-mobile-header .menu-toggle:hover,
#ast-mobile-header .menu-toggle:focus {
  background: transparent;
  color: var(--boja-plum-900);
}

/* 12) Astra fokus polja iscrtava svojom plavom (#046bd2) koja nije iz palete. */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--boja-narandzasta-cta);
}

/* 13) Ikona korpe: u dizajnu je plum bez promene boje na hover (.navigacija-dugme).
   Astra joj daje boju teme, jer svoje podesavanje za boju korpe koristi samo uz
   stari header. */
.ast-site-header-cart .ast-cart-menu-wrap,
.ast-site-header-cart .ast-addon-cart-wrap,
.ast-site-header-cart .cart-container,
.ast-site-header-cart .cart-container:hover,
.ast-site-header-cart .cart-container:focus {
  color: var(--boja-plum-900);
}

/* 14) Poruka koju dugme za kupovinu prikazuje dok modul za porucivanje nije gotov. */
.ozzy-poruka {
  margin: 0;
  padding: var(--r-3) var(--r-4);
  background: var(--boja-krem-050);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-m);
  color: var(--boja-plum-900);
  font-family: var(--font-telo);
  font-size: var(--slova-m);
  font-weight: var(--tezina-poludebela);
  text-align: center;
}

/* --------------------------------------------------------------------------
   15) Korpa i naplata. U fajlovima dizajna nema tih stranica, pa su slozene od
   istih sastojaka kao ostatak sajta: bele kartice sa ivicom i radijusom, plum
   tekst, narandzasta dugmad u obliku pilule, tabularne cifre za cene.
   -------------------------------------------------------------------------- */

.woocommerce-cart .site-content,
.woocommerce-checkout .site-content,
.woocommerce-account .site-content {
  background: var(--boja-bela);
}

.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content {
  max-width: var(--mera-stranica);
  margin-inline: auto;
  padding-inline: var(--r-gutter);
  color: var(--boja-plum-900);
  font-family: var(--font-telo);
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title {
  font-family: var(--font-naslov);
  font-size: var(--slova-naslov-2);
  font-weight: var(--tezina-crna);
  color: var(--boja-plum-900);
  text-transform: uppercase;
}

/* tabele: kesica umesto mreze */
.woocommerce table.shop_table,
.woocommerce-js table.shop_table,
.woocommerce-page table.shop_table,
.woocommerce-js .woocommerce table.shop_table,
.woocommerce-js .woocommerce-page table.shop_table {
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-l);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--boja-bela);
  box-shadow: var(--senka-1);
  overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce-js table.shop_table th,
.woocommerce-page table.shop_table th {
  padding: var(--r-3) var(--r-4);
  background: var(--boja-krem-050);
  color: var(--boja-plum-500);
  font-family: var(--font-naslov);
  font-size: var(--slova-xs);
  font-weight: var(--tezina-debela);
  letter-spacing: var(--razmak-slova-oznaka);
  text-transform: uppercase;
  border: 0;
}

.woocommerce table.shop_table td,
.woocommerce-js table.shop_table td,
.woocommerce-page table.shop_table td {
  padding: var(--r-4);
  border-top: var(--ivica-tanka) solid var(--boja-ivica);
  font-size: var(--slova-m);
  font-weight: var(--tezina-srednja);
  color: var(--boja-plum-900);
}

.woocommerce table.shop_table .amount,
.woocommerce-checkout-review-order-table .amount {
  font-variant-numeric: tabular-nums;
  font-weight: var(--tezina-crna);
}

.woocommerce table.shop_table .product-thumbnail img {
  width: 64px;
  height: 64px;
  border-radius: var(--radijus-m);
  object-fit: contain;
  background: var(--boja-krem-050);
}

.woocommerce table.shop_table td.product-name a {
  color: var(--boja-plum-900);
  font-family: var(--font-naslov);
  font-weight: var(--tezina-debela);
  text-decoration: none;
}

.woocommerce a.remove {
  color: var(--boja-plum-500) !important;
  font-weight: var(--tezina-poludebela);
}

.woocommerce a.remove:hover {
  background: transparent;
  color: var(--boja-narandzasta-cta) !important;
}

/* polja */
.woocommerce .quantity .qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-cart #coupon_code {
  min-height: var(--dodir-min);
  padding: var(--r-2) var(--r-3);
  background: var(--boja-bela);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-s);
  color: var(--boja-plum-900);
  font-family: var(--font-telo);
  font-size: var(--slova-m);
}

.woocommerce form .form-row label {
  color: var(--boja-plum-700);
  font-family: var(--font-naslov);
  font-size: var(--slova-xs);
  font-weight: var(--tezina-debela);
  letter-spacing: var(--razmak-slova-oznaka);
  text-transform: uppercase;
}

/* dugmad */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order,
.ozzy-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--dodir-min);
  padding: var(--r-3) var(--r-6);
  background: var(--boja-narandzasta-cta);
  border: var(--ivica-debela) solid var(--boja-narandzasta-cta);
  border-radius: var(--radijus-pilula);
  box-shadow: none;
  color: var(--boja-bela);
  font-family: var(--font-naslov);
  font-size: var(--slova-s);
  font-weight: var(--tezina-crna);
  letter-spacing: var(--razmak-slova-dugme);
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover,
.ozzy-dugme:hover {
  background: var(--boja-narandzasta-cta-hover);
  border-color: var(--boja-narandzasta-cta-hover);
  color: var(--boja-bela);
}

.woocommerce .button:disabled,
.woocommerce button.button:disabled[disabled] {
  background: var(--boja-plum-200);
  border-color: var(--boja-plum-200);
  color: var(--boja-bela);
}

.woocommerce .cart .button[name="update_cart"],
.woocommerce .coupon .button {
  background: var(--boja-bela);
  border-color: var(--boja-plum-900);
  color: var(--boja-plum-900);
}

.woocommerce .cart .button[name="update_cart"]:hover,
.woocommerce .coupon .button:hover {
  background: var(--boja-krem-050);
  border-color: var(--boja-plum-900);
  color: var(--boja-plum-900);
}

.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order {
  width: 100%;
  font-size: var(--slova-cta);
}

/* zbir i naplata */
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-naslov);
  font-size: var(--slova-xl);
  font-weight: var(--tezina-crna);
  color: var(--boja-plum-900);
  text-transform: uppercase;
}

.woocommerce-checkout #payment,
.woocommerce-page.woocommerce-checkout #payment,
.woocommerce.woocommerce-checkout #payment {
  background: var(--boja-krem-050);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-l);
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: var(--ivica-tanka) solid var(--boja-ivica);
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--boja-bela);
  border-radius: var(--radijus-m);
  color: var(--boja-plum-700);
  font-size: var(--slova-s);
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--boja-bela);
}

/* poruke */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--boja-krem-050);
  border-top: 0;
  border-left: var(--ivica-debela) solid var(--boja-narandzasta-cta);
  border-radius: var(--radijus-m);
  color: var(--boja-plum-900);
  font-size: var(--slova-m);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  color: var(--boja-narandzasta-cta);
}

/* preporuke u korpi */
.ozzy-preporuke {
  margin-top: var(--r-8);
}

.ozzy-preporuke__naslov {
  margin: 0 0 var(--r-4);
  font-family: var(--font-naslov);
  font-size: var(--slova-xl);
  font-weight: var(--tezina-crna);
  color: var(--boja-plum-900);
  text-transform: uppercase;
}

.ozzy-preporuke__red {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-4);
}

.ozzy-preporuka {
  display: flex;
  flex: 1 1 var(--osnova-kolone);
  min-width: min(100%, var(--osnova-kolone));
  gap: var(--r-4);
  padding: var(--r-5);
  background: var(--boja-bela);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-l);
  box-shadow: var(--senka-1);
}

.ozzy-preporuka__slika {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: var(--radijus-m);
  object-fit: contain;
  background: var(--boja-krem-050);
}

.ozzy-preporuka__telo {
  display: flex;
  flex-direction: column;
  gap: var(--r-2);
  align-items: flex-start;
}

.ozzy-preporuka__oznaka {
  margin: 0;
  color: var(--boja-narandzasta-cta);
  font-family: var(--font-naslov);
  font-size: var(--slova-xs);
  font-weight: var(--tezina-debela);
  letter-spacing: var(--razmak-slova-oznaka);
  text-transform: uppercase;
}

.ozzy-preporuka__naslov {
  margin: 0;
  font-family: var(--font-naslov);
  font-size: var(--slova-l);
  font-weight: var(--tezina-debela);
  color: var(--boja-plum-900);
  text-transform: uppercase;
}

.ozzy-preporuka__tekst {
  margin: 0;
  color: var(--boja-plum-700);
  font-size: var(--slova-s);
  font-weight: var(--tezina-srednja);
}

@media (max-width: 599px) {
  .ozzy-preporuka {
    flex-direction: column;
  }

  .woocommerce .wc-proceed-to-checkout a.checkout-button {
    font-size: var(--slova-s);
  }
}

/* 16) Korpa i naplata na telefonu: polja u jednoj koloni i tabela preko cele sirine. */
@media (max-width: 599px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last,
  .woocommerce-page form .form-row-first,
  .woocommerce-page form .form-row-last,
  .woocommerce-js form .form-row-first,
  .woocommerce-js form .form-row-last {
    width: 100%;
    float: none;
    margin-right: 0;
  }

  .woocommerce table.shop_table,
  .woocommerce-js table.shop_table,
  .woocommerce-js .woocommerce table.shop_table {
    width: 100%;
    margin-right: 0;
  }

  .woocommerce .wc-proceed-to-checkout a.checkout-button,
  .woocommerce #place_order,
  .woocommerce-js #place_order {
    width: 100%;
  }
}

/* 17. Ritam sekcija.
   Sekcija nosi svoj vazduh (padding gore i dole = var(--r-sekcija)), pa je razmak
   izmedju dve sekcije dva koraka. Jedini izuzetak je prva sekcija na stranici:
   header i traka sa najavama vec prave pauzu, pa joj treba pola koraka. */
.elementor > .sekcija:first-child {
  padding-top: var(--r-sekcija-prva);
}

/* 18. Ritam na stranicama koje ne gradimo nasim sekcijama (korpa, placanje, moj
   nalog). Isti princip kao kod sekcija: pola koraka ispod headera, pun korak do
   futera, a blokovi unutar stranice se odvajaju korakom sa skale. Astra ovde daje
   60 px (inline pravilo .ast-plain-container.ast-no-sidebar #primary), sto nije sa
   nase skale, pa se selektor pojacava sa :not(.elementor-page) — Elementor stranice
   nose svoj ritam kroz .sekcija. */
body:not(.elementor-page).ast-plain-container.ast-no-sidebar #primary {
  margin-top: var(--r-sekcija-prva);
  margin-bottom: var(--r-sekcija);
}

/* naslov stranice -> sadrzaj: jedan korak izmedju komponenti */
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header,
.woocommerce-account .entry-header {
  max-width: var(--mera-stranica);
  margin: 0 auto var(--r-6);
  padding-inline: var(--r-gutter);
}

/* veliki blokovi na naplati: traka kupona, forma, pregled porudzbine */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon {
  margin-block: 0 var(--r-8);
}

/* naslov bloka -> polja ispod njega */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading,
.woocommerce .cart_totals h2 {
  margin-block: 0 var(--r-5);
}

/* 19. Glavna slika u galeriji proizvoda ide bez krem podloge (--boja-krem-050).
   Kesice su providne PNG/WebP slike: Relaks je krem pa se na krem podlozi gubila
   i delovala kao bež kvadrat, a na Energetskom je podloga bila skoro nevidljiva.
   Obe galerije sada rade isto, kao slika pakovanja na persona stranicama.
   Ostale slike u galeriji su pune, pa ih ovo ne dira. */
.elementor .galerija-glavna {
  background: transparent;
  /* Elementor ucitava `.elementor img { border-radius: 0 }` (custom-frontend.min.css),
     sto je specificnije od `.galerija-glavna` i gasilo je nas radijus od 32px. Slicice
     su izgledale zaobljeno samo zato sto ih dugme okolo isece (overflow: hidden), pa
     se videlo tek kad je u galeriju usao slajd koji popunjava ceo kvadrat.
     Dvostruka klasa je specificnija (0,2,0) od Elementorovog (0,1,1) i vraca radijus. */
  border-radius: var(--radijus-kesica);
}

/* --------------------------------------------------------------------------
   20) Moj nalog. WooCommerce slaze meni i sadrzaj plutanjem (float 30 % / 68 %),
   sto se na uzim ekranima lomi i ne poznaje nasu skalu razmaka. Isti raspored je
   ovde napravljen flexom: meni je uska kartica levo, sadrzaj siroka kartica
   desno, a ispod 768 px meni prelazi iznad sadrzaja kao red pilula. Sastojci su
   isti kao na korpi i naplati: bela kartica sa ivicom i radijusom, plum tekst,
   narandzasta dugmad.
   -------------------------------------------------------------------------- */

/* prijava i zaboravljena lozinka: jedan zadatak, pa jedan uzak stubac */
.woocommerce-account:not(.logged-in) .woocommerce,
.entry-content[data-ast-blocks-layout] > .woocommerce-account-prijava {
  max-width: 560px;
  margin-inline: auto;
}

/* Woo ove forme cilja preko `form.login` (jaci selektor od klase), pa i nase
   pravilo mora da nosi element. */
.woocommerce-account .woocommerce form.woocommerce-form-login,
.woocommerce-account .woocommerce form.woocommerce-ResetPassword,
.woocommerce-account .woocommerce form.woocommerce-form-register {
  margin: 0;
  padding: var(--r-6);
  background: var(--boja-bela);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-l);
  box-shadow: var(--senka-1);
}

.woocommerce-account .woocommerce > h2,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  margin: 0 0 var(--r-5);
  font-family: var(--font-naslov);
  font-size: var(--slova-xl);
  font-weight: var(--tezina-crna);
  color: var(--boja-plum-900);
  text-transform: uppercase;
}

.woocommerce-account .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: var(--r-2);
  font-family: var(--font-telo);
  font-size: var(--slova-s);
  font-weight: var(--tezina-srednja);
  color: var(--boja-plum-700);
  letter-spacing: normal;
  text-transform: none;
}

.woocommerce-account .woocommerce-LostPassword {
  margin: var(--r-4) 0 0;
  font-size: var(--slova-s);
}

.woocommerce-account .woocommerce-LostPassword a {
  color: var(--boja-narandzasta-cta);
  font-weight: var(--tezina-debela);
  text-decoration: none;
}

/* prijavljen nalog: meni levo, sadrzaj desno */
.woocommerce-account.logged-in .woocommerce {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--r-6);
}

.woocommerce-account.logged-in .woocommerce-notices-wrapper {
  flex: 1 0 100%;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  flex: 0 0 240px;
  float: none;
  width: auto;
  padding: var(--r-3);
  background: var(--boja-bela);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-l);
  box-shadow: var(--senka-1);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  gap: var(--r-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  padding: 0;
  border: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  min-height: var(--dodir-min);
  padding: var(--r-2) var(--r-3);
  border-radius: var(--radijus-pilula);
  color: var(--boja-plum-700);
  font-family: var(--font-naslov);
  font-size: var(--slova-s);
  font-weight: var(--tezina-debela);
  text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
  background: var(--boja-krem-050);
  color: var(--boja-plum-900);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--boja-plum-900);
  color: var(--boja-bela);
}

/* odjava je izlaz, ne stavka menija: odvojena crtom i tisa */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: var(--r-2);
  padding-top: var(--r-2);
  border-top: var(--ivica-tanka) solid var(--boja-ivica);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--boja-plum-500);
  font-weight: var(--tezina-poludebela);
}

.woocommerce-account .woocommerce-MyAccount-content {
  flex: 1 1 var(--osnova-kolone);
  min-width: min(100%, var(--osnova-kolone));
  float: none;
  width: auto;
  padding: var(--r-6);
  background: var(--boja-bela);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-l);
  box-shadow: var(--senka-1);
  color: var(--boja-plum-900);
}

.woocommerce-account .woocommerce-MyAccount-content > :first-child {
  margin-top: 0;
}

.woocommerce-account .woocommerce-MyAccount-content > :last-child {
  margin-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-content p {
  color: var(--boja-plum-700);
  font-size: var(--slova-m);
  font-weight: var(--tezina-srednja);
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.edit) {
  color: var(--boja-plum-900);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.edit):hover {
  color: var(--boja-narandzasta-cta);
}

/* spisak porudzbina: tabela je vec kartica (odeljak 15), ovde samo dugme i status */
.woocommerce-account .woocommerce-orders-table__cell-order-status {
  font-weight: var(--tezina-debela);
}

.woocommerce-account .woocommerce-orders-table .button {
  min-height: 40px;
  padding: var(--r-2) var(--r-4);
  font-size: var(--slova-xs);
}

/* adrese: dve kartice u redu */
.woocommerce-account .woocommerce-Addresses {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-4);
  margin: 0;
}

.woocommerce-account .woocommerce-Address {
  flex: 1 1 var(--osnova-kolone-uska);
  min-width: min(100%, var(--osnova-kolone-uska));
  float: none;
  width: auto;
  padding: var(--r-5);
  background: var(--boja-krem-050);
  border-radius: var(--radijus-l);
}

.woocommerce-account .woocommerce-Address-title {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-2) var(--r-3);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--r-3);
}

.woocommerce-account .woocommerce-Address-title h2 {
  margin: 0;
  font-size: var(--slova-m);
}

.woocommerce-account .woocommerce-Address-title .edit {
  color: var(--boja-narandzasta-cta);
  font-family: var(--font-naslov);
  font-size: var(--slova-xs);
  font-weight: var(--tezina-debela);
  letter-spacing: var(--razmak-slova-oznaka);
  text-transform: uppercase;
  text-decoration: none;
}

.woocommerce-account .woocommerce-Address address {
  color: var(--boja-plum-700);
  font-size: var(--slova-m);
  font-style: normal;
  font-weight: var(--tezina-srednja);
  line-height: 1.5;
}

/* detalji naloga: promena lozinke je svoja celina */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
  margin: var(--r-6) 0 0;
  padding: var(--r-5);
  background: var(--boja-krem-050);
  border: 0;
  border-radius: var(--radijus-l);
}

.woocommerce-account .woocommerce-EditAccountForm legend {
  padding: 0 0 var(--r-3);
  font-family: var(--font-naslov);
  font-size: var(--slova-s);
  font-weight: var(--tezina-crna);
  color: var(--boja-plum-900);
  text-transform: uppercase;
}

.woocommerce-account .woocommerce-EditAccountForm .form-row {
  margin: 0 0 var(--r-4);
}

.woocommerce-account .woocommerce-EditAccountForm span em {
  display: block;
  margin-top: var(--r-1);
  color: var(--boja-plum-500);
  font-size: var(--slova-xs);
  font-style: normal;
}

@media (max-width: 767px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 1 0 100%;
    padding: var(--r-2);
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation a {
    min-height: 40px;
    padding: var(--r-2) var(--r-3);
    font-size: var(--slova-xs);
  }

  .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .woocommerce-account .woocommerce-MyAccount-content {
    padding: var(--r-4);
  }

  .woocommerce-account .woocommerce form.woocommerce-form-login,
  .woocommerce-account .woocommerce form.woocommerce-ResetPassword {
    padding: var(--r-4);
  }
}

/* 21. Pravne stranice (Uslovi, Privatnost, Kolačići, Isporuka, Reklamacije).
   Obične WP stranice bez Elementora — stil koristi iste globalne promenljive
   koje functions.php učitava svuda, pa tipografija i boje prate ostatak sajta. */

.ozzy-pravno {
  max-width: 72ch;
  margin-inline: 0 auto;
  padding-block: var(--r-8) var(--r-16);
  font-family: var(--font-telo);
  font-size: var(--slova-m);
  line-height: var(--prored-telo);
  color: var(--boja-plum-900);
}

.ozzy-pravno > * + * {
  margin-block-start: var(--r-4);
}

.ozzy-pravno h2 {
  font-family: var(--font-naslov);
  font-weight: var(--tezina-debela);
  font-size: var(--slova-naslov-2);
  line-height: var(--prored-naslov);
  letter-spacing: var(--razmak-slova-naslov);
  margin-block: var(--r-12) var(--r-4);
}

.ozzy-pravno h3 {
  font-family: var(--font-naslov);
  font-weight: var(--tezina-poludebela);
  font-size: var(--slova-naslov-3);
  line-height: var(--prored-naslov);
  margin-block: var(--r-8) var(--r-3);
}

.ozzy-pravno ul,
.ozzy-pravno ol {
  padding-inline-start: var(--r-6);
}

.ozzy-pravno li + li {
  margin-block-start: var(--r-2);
}

.ozzy-pravno a {
  color: var(--boja-narandzasta-cta);
  text-underline-offset: 3px;
}

.ozzy-pravno a:hover {
  color: var(--boja-narandzasta-cta-hover);
}

.ozzy-pravno code {
  font-size: var(--slova-s);
  background: var(--boja-krem-100);
  border-radius: var(--radijus-s);
  padding: 2px 6px;
}

.ozzy-pravno .pravno-uvod {
  font-size: var(--slova-l);
  color: var(--boja-plum-700);
}

.ozzy-pravno .pravno-azurirano {
  font-size: var(--slova-xs);
  letter-spacing: var(--razmak-slova-oznaka);
  text-transform: uppercase;
  color: var(--boja-plum-500);
  margin-block-end: var(--r-8);
}

/* Mesta koja tek treba popuniti — namerno upadljiva dok stranica stoji u draftu. */
.ozzy-pravno mark.pravno-dopuna {
  background: #fff3cd;
  color: var(--boja-plum-700);
  border-radius: var(--radijus-s);
  padding: 1px 6px;
  font-size: var(--slova-s);
}

/* Obrazac za odustanak — izdvojen okvir koji kupac može da iskopira. */
.ozzy-pravno .pravno-obrazac {
  background: var(--boja-krem-050);
  border: var(--ivica-debela) dashed var(--boja-ivica);
  border-radius: var(--radijus-m);
  padding: var(--r-6);
  margin-block: var(--r-8);
  font-size: var(--slova-s);
  line-height: 1.8;
}

.ozzy-pravno .pravno-obrazac p + p {
  margin-block-start: var(--r-4);
}

@media (max-width: 600px) {
  .ozzy-pravno {
    padding-block: var(--r-6) var(--r-12);
  }
}

/* Astra pravilo .entry-content[data-ast-blocks-layout] > * nameće punu širinu sadržaja,
   a nasleđena debljina slova je 700, pa se ovde oboje vraća na meru za čitanje. */
.entry-content[data-ast-blocks-layout] > .ozzy-pravno {
  max-width: 72ch;
  margin-inline: 0 auto;
}

.ozzy-pravno,
.ozzy-pravno p,
.ozzy-pravno li {
  font-weight: var(--tezina-obicna);
}

.ozzy-pravno strong {
  font-weight: var(--tezina-poludebela);
}

/* --------------------------------------------------------------------------
   22) Naplata. Zasebna stranica, po ugledu na najbolje prodavnice: gore samo
   logo i tri tvrdnje, ispod dve kolone — levo kontakt, dostava i placanje,
   desno pregled porudzbine na krem traci koja ide do ivice ekrana, dole podaci
   o firmi. Menija, trake sa najavama, korpe i futera sa kolonama ovde nema, jer
   je jedini zadatak stranice da porudzbina ode.
   Sastojci ostaju nasi: plum zaglavlje, krem traka, bele kartice sa ivicom i
   radijusom, narandzasto dugme, oznake polja velikim slovima.
   -------------------------------------------------------------------------- */

/* zaglavlje */
.ozzy-nz {
  padding: var(--r-4) var(--r-gutter);
  background: var(--boja-plum-900);
}

.ozzy-nz__mera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--r-2);
  max-width: 1200px;
  margin-inline: auto;
}

.ozzy-nz__logo {
  display: block;
}

.ozzy-nz__logo img {
  display: block;
  width: auto;
  height: 32px;
}

.ozzy-nz__tvrdnje {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--r-1) var(--r-5);
  margin: 0;
  padding: 0;
  color: var(--boja-krem-300);
  font-family: var(--font-naslov);
  font-size: var(--slova-xs);
  font-weight: var(--tezina-debela);
  letter-spacing: var(--razmak-slova-oznaka);
  list-style: none;
  text-transform: uppercase;
}

.ozzy-nz__tvrdnje li {
  display: inline-flex;
  align-items: center;
  gap: var(--r-1);
}

.ozzy-nz__tvrdnje li::before {
  content: "✓";
  color: var(--boja-narandzasta-cta);
}

/* podnozje */
.ozzy-nf {
  padding: var(--r-8) var(--r-gutter) var(--r-10);
  color: var(--boja-plum-500);
  font-family: var(--font-telo);
  font-size: var(--slova-xs);
  text-align: center;
}

.ozzy-nf p {
  margin: 0;
}

.ozzy-nf__veze {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--r-2) var(--r-4);
  margin-top: var(--r-2);
}

.ozzy-nf__veze a {
  color: var(--boja-plum-700);
  text-decoration: none;
}

/* dve kolone */
.ozzy-naplata {
  background: var(--boja-bela);
}

.ozzy-naplata .woocommerce {
  max-width: 1200px;
  margin-inline: auto;
}

.ozzy-naplata form.checkout {
  display: flex;
  flex-direction: column;
}

.ozzy-naplata .woocommerce-notices-wrapper:not(:empty) {
  padding: var(--r-6) var(--r-gutter) 0;
}

.ozzy-naplata__podaci {
  padding: var(--r-8) var(--r-gutter) var(--r-12);
}

.ozzy-naplata__pregled {
  padding: var(--r-6) var(--r-gutter) var(--r-8);
  background: var(--boja-krem-050);
  border-bottom: var(--ivica-tanka) solid var(--boja-ivica);
}

/* Na telefonu pregled ide iznad forme (sklopljen), da se prvo vidi sta se placa. */
@media (max-width: 991px) {
  .ozzy-naplata__pregled {
    order: -1;
  }
}

@media (min-width: 992px) {
  /* Krem traka ide do desne ivice ekrana, pa je ne nosi kolona nego pozadina
     glavnog bloka, podeljena tacno na pola. */
  .ozzy-naplata {
    background: linear-gradient(
      to right,
      var(--boja-bela) 0 calc(50% - 1px),
      var(--boja-ivica) calc(50% - 1px) 50%,
      var(--boja-krem-050) 50%
    );
  }

  .ozzy-naplata form.checkout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .ozzy-naplata__podaci {
    padding: var(--r-12) var(--r-8) var(--r-16) var(--r-gutter);
  }

  .ozzy-naplata__pregled {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    padding: var(--r-12) var(--r-gutter) var(--r-8) var(--r-8);
    background: transparent;
    border-bottom: 0;
  }
}

/* Astra i Woo daju #order_review, #payment i #customer_details svoje podloge,
   ivice i margine. Pravila ispod ih ponistavaju, i nose istu tezinu selektora
   kao njihova (klasa tela + nasa klasa + id), pa vazduh na naplati drze samo
   .ozzy-naplata__podaci i .ozzy-naplata__pregled. */
/* Astra svoja pravila za naplatu ispisuje u <style> u zaglavlju i cilja ih
   dvostrukim ID-em (`form #order_review:not(.elementor-… #order_review)`), pa se
   obicnim selektorom ne mogu nadjacati. Zato ovih nekoliko svojstava ide sa
   !important — sve su to podloge, ivice i razmaci koje na ovoj stranici nose
   .ozzy-naplata__pregled i .ozzy-naplata__podaci. */
.woocommerce-checkout .ozzy-naplata #order_review,
.woocommerce-checkout .ozzy-naplata #order_review_heading,
.woocommerce-checkout .ozzy-naplata #payment {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.woocommerce-checkout .ozzy-naplata #order_review_heading {
  margin-bottom: var(--r-5) !important;
}

.woocommerce-checkout .ozzy-naplata #payment ul.payment_methods {
  padding: 0 !important;
  border-bottom: 0 !important;
}

.woocommerce-checkout .ozzy-naplata #payment div.form-row {
  padding: 0 !important;
}

.woocommerce-checkout .ozzy-naplata #payment div.payment_box {
  padding: 0 !important;
  background: transparent !important;
}

.woocommerce-checkout .ozzy-naplata .woocommerce-privacy-policy-text p {
  margin-bottom: var(--r-4) !important;
}

.woocommerce-checkout .ozzy-naplata #payment div.form-row.place-order {
  margin-top: var(--r-5) !important;
}

.woocommerce-checkout .ozzy-naplata #payment #place_order {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.woocommerce-checkout .ozzy-naplata #customer_details,
.woocommerce-checkout .ozzy-naplata table.woocommerce-checkout-review-order-table {
  margin: 0 !important;
}

main.ozzy-naplata {
  margin: 0;
}

/* Kad naplata javi da polja nisu popunjena, Woo ubaci poruku kao prvo dete forme
   — a forma je mreza, pa bi ta poruka zauzela prvu celiju i razbacala kolone
   (podaci bi otisli desno, pregled u drugi red). Poruka zato ide preko oba
   stupca i ispred svega ostalog, a raspored ostaje isti. */
.ozzy-naplata form.checkout .woocommerce-NoticeGroup {
  order: -3;
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--r-6) var(--r-gutter) 0;
}

.ozzy-naplata form.checkout .woocommerce-NoticeGroup .woocommerce-error {
  margin: 0;
}

/* Polje koje nedostaje dobija narandzastu ivicu i oznaku — u paleti nema crvene. */
.woocommerce-checkout .ozzy-naplata form.checkout .form-row.woocommerce-invalid .input-text,
.woocommerce-checkout .ozzy-naplata form.checkout .form-row.woocommerce-invalid select {
  border-color: var(--boja-narandzasta-cta);
}

.woocommerce-checkout .ozzy-naplata form.checkout .form-row.woocommerce-invalid label {
  color: var(--boja-narandzasta-cta);
}

/* celine u levoj koloni */
.ozzy-polje-grupa + .ozzy-polje-grupa,
.ozzy-naplata__podaci .ozzy-polje-grupa--placanje {
  margin-top: var(--r-10);
}

.ozzy-polje-grupa__naslov,
.ozzy-naplata #order_review_heading {
  margin: 0 0 var(--r-2);
  color: var(--boja-plum-900);
  font-family: var(--font-naslov);
  font-size: var(--slova-xl);
  font-weight: var(--tezina-crna);
  text-transform: uppercase;
}

.ozzy-naplata #order_review_heading {
  margin-bottom: var(--r-5);
}

.ozzy-polje-grupa__opis {
  margin: 0 0 var(--r-4);
  color: var(--boja-plum-500);
  font-size: var(--slova-s);
}

.ozzy-polje-grupa__naslov + .ozzy-polje-grupa__polja {
  margin-top: var(--r-4);
}

.ozzy-polje-grupa__polja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--r-4);
}

.woocommerce-checkout .ozzy-naplata form .form-row {
  grid-column: 1 / -1;
  float: none;
  width: auto;
  margin: 0 0 var(--r-4);
  padding: 0;
}

.woocommerce-checkout .ozzy-naplata form .form-row-first {
  grid-column: 1;
}

.woocommerce-checkout .ozzy-naplata form .form-row-last {
  grid-column: 2;
}

@media (max-width: 479px) {
  .woocommerce-checkout .ozzy-naplata form .form-row-first,
  .woocommerce-checkout .ozzy-naplata form .form-row-last {
    grid-column: 1 / -1;
  }
}

.woocommerce-checkout .ozzy-naplata form .form-row label {
  display: block;
  margin-bottom: var(--r-1);
}

.woocommerce-checkout .ozzy-naplata form .form-row .input-text,
.woocommerce-checkout .ozzy-naplata form .form-row select,
.woocommerce-checkout .ozzy-naplata form .form-row textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--r-3) var(--r-4);
  border-radius: var(--radijus-m);
  font-size: var(--slova-m);
}

/* Prodajemo samo u Srbiji, pa padajuci spisak sa jednom drzavom nema sta da
   bira: polje ostaje u formi (Woo po njemu racuna dostavu), ali se ne prikazuje.
   Wooova skripta za adrese mu upisuje inline display: block, pa ide !important. */
.ozzy-naplata #billing_country_field {
  display: none !important;
}

/* U levoj koloni nema odvojene adrese za isporuku. */
.ozzy-naplata #customer_details .col-1,
.ozzy-naplata #customer_details .col-2 {
  float: none;
  width: 100%;
}

/* pregled: tabela nije kartica, traka ispod nje je vec krem */
.ozzy-naplata .woocommerce table.woocommerce-checkout-review-order-table,
.ozzy-naplata .woocommerce-js table.woocommerce-checkout-review-order-table {
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ozzy-naplata .woocommerce table.woocommerce-checkout-review-order-table thead {
  display: none;
}

.ozzy-naplata .woocommerce table.woocommerce-checkout-review-order-table td,
.ozzy-naplata .woocommerce table.woocommerce-checkout-review-order-table th {
  padding: var(--r-3) 0;
  background: transparent;
  border-top: 0;
}

.ozzy-naplata .woocommerce table.woocommerce-checkout-review-order-table tbody .cart_item td {
  border-bottom: var(--ivica-tanka) solid var(--boja-ivica);
}

.ozzy-naplata .woocommerce table.woocommerce-checkout-review-order-table td.product-total {
  font-size: var(--slova-s);
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}

/* stavka: slika, bedz sa brojem, ime i pakovanje */
.ozzy-stavka {
  display: flex;
  gap: var(--r-3);
  align-items: flex-start;
}

.ozzy-stavka__okvir {
  position: relative;
  display: block;
  flex: none;
}

.ozzy-stavka__slika {
  display: block;
  width: 64px;
  height: 64px;
  background: var(--boja-bela);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-m);
  object-fit: contain;
}

.ozzy-stavka__broj {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--boja-plum-900);
  border-radius: var(--radijus-pilula);
  color: var(--boja-bela);
  font-family: var(--font-naslov);
  font-size: 12px;
  font-weight: var(--tezina-crna);
  font-variant-numeric: tabular-nums;
}

.ozzy-stavka__telo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ozzy-stavka__ime {
  color: var(--boja-plum-900);
  font-family: var(--font-naslov);
  font-size: var(--slova-s);
  font-weight: var(--tezina-debela);
}

.ozzy-stavka .variation {
  margin: 0;
  color: var(--boja-plum-500);
  font-size: var(--slova-xs);
}

.ozzy-stavka .variation dt,
.ozzy-stavka .variation dd,
.ozzy-stavka .variation dd p {
  display: inline;
  margin: 0;
  font-weight: var(--tezina-srednja);
}

/* Broj komada stoji u bedzu, ali ostaje i u tekstu zbog citaca ekrana. */
.ozzy-stavka .product-quantity {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* kupon */
.ozzy-naplata .woocommerce table.woocommerce-checkout-review-order-table .ozzy-kupon-red td {
  padding: var(--r-4) 0 0;
  border: 0;
}

.ozzy-kupon__spisak {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-2);
  margin: 0 0 var(--r-2);
  padding: 0;
  list-style: none;
}

.ozzy-kupon__stavka {
  display: inline-flex;
  align-items: center;
  gap: var(--r-2);
  padding: 4px 10px;
  background: var(--boja-bela);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-pilula);
}

.ozzy-kupon__kod {
  color: var(--boja-plum-900);
  font-family: var(--font-naslov);
  font-size: var(--slova-xs);
  font-weight: var(--tezina-crna);
  letter-spacing: var(--razmak-slova-oznaka);
  text-transform: uppercase;
}

.ozzy-kupon__ukloni {
  padding: 0;
  background: none;
  border: 0;
  color: var(--boja-plum-500);
  font-family: var(--font-telo);
  font-size: var(--slova-xs);
  text-decoration: underline;
  cursor: pointer;
}

.ozzy-kupon__red {
  display: flex;
  gap: var(--r-2);
}

.ozzy-kupon__polje {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: var(--r-2) var(--r-4);
  background: var(--boja-bela);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-m);
  color: var(--boja-plum-900);
  font-family: var(--font-telo);
  font-size: var(--slova-m);
}

.ozzy-kupon__dugme {
  flex: none;
  min-height: 48px;
  padding: 0 var(--r-5);
  background: var(--boja-bela);
  border: var(--ivica-debela) solid var(--boja-plum-900);
  border-radius: var(--radijus-pilula);
  color: var(--boja-plum-900);
  font-family: var(--font-naslov);
  font-size: var(--slova-xs);
  font-weight: var(--tezina-crna);
  letter-spacing: var(--razmak-slova-dugme);
  text-transform: uppercase;
  cursor: pointer;
}

.ozzy-kupon__dugme:hover {
  background: var(--boja-plum-900);
  color: var(--boja-bela);
}

.ozzy-kupon__poruka {
  margin: var(--r-2) 0 0;
  color: var(--boja-plum-700);
  font-size: var(--slova-xs);
}

/* Kupon se uklanja pilulom iznad zbira, pa Wooova veza "Ukloni" u redu popusta
   samo duplira istu radnju. */
.ozzy-naplata .cart-discount .woocommerce-remove-coupon {
  display: none;
}

/* zbir */

/* Wooov mobilni raspored tabela crta liniju ispod svake celije, pa se u zbiru
   pojavljuju polovicne crtice ispod iznosa. */
.woocommerce-checkout .ozzy-naplata table.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-checkout .ozzy-naplata table.woocommerce-checkout-review-order-table tfoot th {
  border-bottom: 0;
}

.ozzy-naplata .woocommerce table.woocommerce-checkout-review-order-table tfoot th {
  padding: var(--r-2) 0;
  color: var(--boja-plum-700);
  font-family: var(--font-telo);
  font-size: var(--slova-s);
  font-weight: var(--tezina-srednja);
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}

.ozzy-naplata .woocommerce table.woocommerce-checkout-review-order-table tfoot td {
  padding: var(--r-2) 0;
  font-size: var(--slova-s);
  text-align: right;
}

.ozzy-naplata .woocommerce table.woocommerce-checkout-review-order-table tfoot .cart-discount td,
.ozzy-naplata .woocommerce table.woocommerce-checkout-review-order-table tfoot .cart-discount th {
  color: var(--boja-narandzasta-cta);
}

.ozzy-naplata .woocommerce table.woocommerce-checkout-review-order-table tfoot .order-total th,
.ozzy-naplata .woocommerce table.woocommerce-checkout-review-order-table tfoot .order-total td {
  padding-top: var(--r-3);
  border-top: var(--ivica-tanka) solid var(--boja-ivica);
  color: var(--boja-plum-900);
  font-family: var(--font-naslov);
  font-size: var(--slova-l);
  font-weight: var(--tezina-crna);
  text-transform: uppercase;
}

.ozzy-naplata #order_review.ozzy-pregled--radi {
  opacity: 0.6;
  pointer-events: none;
}

/* placanje (leva kolona) */
.ozzy-naplata #payment,
.ozzy-naplata.woocommerce-checkout #payment {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.ozzy-naplata #payment ul.payment_methods {
  margin: 0;
  padding: 0;
  border-bottom: 0;
  list-style: none;
}

.ozzy-naplata #payment li.wc_payment_method {
  margin: 0;
  padding: var(--r-4);
  background: var(--boja-bela);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-m);
  color: var(--boja-plum-900);
  font-size: var(--slova-m);
  font-weight: var(--tezina-debela);
}

.ozzy-naplata #payment div.payment_box {
  margin: var(--r-2) 0 0;
  padding: 0;
  background: transparent;
  color: var(--boja-plum-700);
  font-size: var(--slova-s);
  font-weight: var(--tezina-srednja);
}

.ozzy-naplata #payment div.payment_box::before {
  display: none;
}

.ozzy-naplata .woocommerce-privacy-policy-text p {
  margin: var(--r-4) 0 0;
  color: var(--boja-plum-500);
  font-size: var(--slova-xs);
  font-weight: var(--tezina-srednja);
}

.ozzy-naplata #payment div.form-row.place-order {
  margin: var(--r-5) 0 0;
  padding: 0;
}

.ozzy-naplata #place_order {
  width: 100%;
  min-height: 56px;
  font-size: var(--slova-cta);
}

/* kartice poverenja ispod pregleda */
.ozzy-poverenje {
  display: grid;
  gap: var(--r-3);
  margin: var(--r-6) 0 0;
  padding: 0;
  list-style: none;
}

.ozzy-poverenje__stavka {
  display: flex;
  align-items: flex-start;
  gap: var(--r-3);
  padding: var(--r-4);
  background: var(--boja-bela);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-m);
}

.ozzy-poverenje__ikona {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--boja-narandzasta-cta);
}

.ozzy-poverenje__zvezde {
  flex: none;
  width: calc(var(--r-3) * 5);
  height: var(--r-3);
  margin-top: 4px;
  aspect-ratio: 5 / 1;
}

.ozzy-poverenje__telo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ozzy-poverenje__telo strong {
  color: var(--boja-plum-900);
  font-family: var(--font-naslov);
  font-size: var(--slova-s);
  font-weight: var(--tezina-crna);
  text-transform: uppercase;
}

.ozzy-poverenje__telo span {
  color: var(--boja-plum-700);
  font-size: var(--slova-s);
  font-weight: var(--tezina-srednja);
}

/* Prekidac za pregled porudzbine na telefonu: traka preko cele sirine, odmah
   ispod zaglavlja, koja ostaje na ekranu dok se forma popunjava. Skripta je
   ubacuje kao prvo dete forme (a ne u sam pregled) bas zato da lepljenje ima
   celu visinu forme na raspolaganju. */
.ozzy-pregled-prekidac {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--r-3);
  width: 100%;
  min-height: var(--dodir-min);
  margin: 0;
  padding: var(--r-3) var(--r-gutter);
  background: var(--boja-krem-050);
  border: 0;
  border-bottom: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: 0;
  color: var(--boja-plum-900);
  font-family: var(--font-naslov);
  font-size: var(--slova-s);
  font-weight: var(--tezina-crna);
  text-transform: uppercase;
  cursor: pointer;
}

.ozzy-pregled-prekidac__iznos {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 991px) {
  .ozzy-naplata form.checkout .ozzy-pregled-prekidac {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 5;
    order: -2;
    /* Dok stoji preko forme, traci treba senka da se vidi da lebdi. */
    box-shadow: var(--senka-1);
  }

  .ozzy-naplata__pregled {
    padding-top: var(--r-5);
  }

  /* Naslov "Porudzbina" nosi prekidac, ali samo ako je skripta stigla da ga napravi. */
  .ozzy-naplata--js .ozzy-naplata #order_review_heading {
    display: none;
  }

  .ozzy-naplata__pregled.ozzy-pregled--sklopljeno .woocommerce-checkout-review-order-table tbody,
  .ozzy-naplata__pregled.ozzy-pregled--sklopljeno .ozzy-poverenje {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   23) Stranica posle porudzbine. Woo daje jednu recenicu i vodoravan spisak;
   ovde je to potvrda koja se cita odozgo nadole: ime u naslovu, adresa na koju
   stize potvrda, cetiri kartice sa podacima, pa tabela sa stavkama (nju vec
   oblikuje odeljak 15) i podaci o kupcu. Naslov stranice ("Plaćanje") se sakriva
   — stranica ima svoj naslov.
   -------------------------------------------------------------------------- */

.woocommerce-order-received .entry-header {
  display: none;
}

.ozzy-hvala {
  max-width: 720px;
  margin-inline: auto;
}

.entry-content[data-ast-blocks-layout] > .ozzy-hvala {
  max-width: 720px;
}

.ozzy-hvala__zaglavlje {
  margin: 0 0 var(--r-8);
  text-align: center;
}

.ozzy-hvala__oznaka {
  margin: 0 0 var(--r-2);
  color: var(--boja-narandzasta-cta);
  font-family: var(--font-naslov);
  font-size: var(--slova-xs);
  font-weight: var(--tezina-crna);
  letter-spacing: var(--razmak-slova-oznaka);
  text-transform: uppercase;
}

.ozzy-hvala__naslov {
  margin: 0 0 var(--r-3);
  color: var(--boja-plum-900);
  font-family: var(--font-naslov);
  font-size: var(--slova-naslov-2);
  font-weight: var(--tezina-crna);
  text-transform: uppercase;
}

.ozzy-hvala__uvod {
  margin: 0;
  color: var(--boja-plum-700);
  font-size: var(--slova-m);
  font-weight: var(--tezina-srednja);
}

/* Wooov clearfix (::before i ::after na ul.order_details) u mrezi postaje prazna
   celija i gura prvu karticu u drugu kolonu. */
.woocommerce ul.ozzy-hvala__pregled::before,
.woocommerce ul.ozzy-hvala__pregled::after {
  display: none;
}

/* Woo daje ul.order_details levu uvlaku od 2em, pa nas selektor mora da nosi i element. */
.woocommerce ul.ozzy-hvala__pregled,
.woocommerce-order ul.ozzy-hvala__pregled {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--r-3);
  margin: 0 0 var(--r-8);
  padding: 0;
  border: 0;
  list-style: none;
}

/* Woo stavke ovog spiska pusta da plutaju, sa razmakom i isprekidanom ivicom
   desno; ovde su kartice, pa sve to mora da se ponisti selektorom iste tezine. */
.woocommerce ul.ozzy-hvala__pregled li,
.woocommerce-order ul.ozzy-hvala__pregled li {
  display: flex;
  float: none;
  flex-direction: column;
  gap: var(--r-1);
  margin: 0;
  padding: var(--r-4);
  border-right: 0;
  background: var(--boja-krem-050);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-m);
}

.woocommerce ul.ozzy-hvala__pregled li span,
.woocommerce-order ul.ozzy-hvala__pregled li span {
  color: var(--boja-plum-500);
  font-family: var(--font-naslov);
  font-size: var(--slova-xs);
  font-weight: var(--tezina-debela);
  letter-spacing: var(--razmak-slova-oznaka);
  text-transform: uppercase;
}

.woocommerce ul.ozzy-hvala__pregled li strong,
.woocommerce-order ul.ozzy-hvala__pregled li strong {
  color: var(--boja-plum-900);
  font-family: var(--font-naslov);
  font-size: var(--slova-m);
  font-weight: var(--tezina-crna);
}

.woocommerce ul.ozzy-hvala__pregled li strong .amount,
.woocommerce ul.ozzy-hvala__pregled li strong bdi {
  color: inherit;
  font-weight: inherit;
}

/* Uputstvo platnog kanala ("Plati kuriru pri preuzimanju pošiljke.") Woo ispisuje
   kao go paragraf; ovde je napomena ispod kartica. */
.ozzy-hvala > p {
  margin: 0 0 var(--r-8);
  color: var(--boja-plum-700);
  font-size: var(--slova-m);
  font-weight: var(--tezina-srednja);
  text-align: center;
}

.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title {
  margin: 0 0 var(--r-4);
  color: var(--boja-plum-900);
  font-family: var(--font-naslov);
  font-size: var(--slova-xl);
  font-weight: var(--tezina-crna);
  text-transform: uppercase;
}

.woocommerce-order-received .woocommerce-customer-details {
  margin-top: var(--r-8);
}

.woocommerce-order-received .woocommerce-customer-details address {
  padding: var(--r-5);
  background: var(--boja-krem-050);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-l);
  color: var(--boja-plum-700);
  font-size: var(--slova-m);
  font-style: normal;
  font-weight: var(--tezina-srednja);
  line-height: 1.5;
}

/* Uz jedan nacin dostave, "putem Poštarina" ne govori nista novo. */
.woocommerce-order-received .shipped_via {
  display: none;
}

.ozzy-hvala__dno {
  margin-top: var(--r-8);
  text-align: center;
}

.ozzy-hvala__pomoc {
  margin: var(--r-4) 0 0;
  color: var(--boja-plum-500);
  font-size: var(--slova-s);
}

.ozzy-hvala__pomoc a {
  color: var(--boja-plum-700);
}
/* Potvrda kada kupac iz mejla pristane na seriju saveta. */
.ozzy-pristanak-potvrda {
	margin: 0 auto var(--r-6);
	max-width: 34rem;
	padding: var(--r-4) var(--r-5);
	border-radius: var(--r-radius-m, 1rem);
	background: var(--boja-tirkiz-svetla, #E6FAFD);
	color: var(--boja-ljubicasta, #2B1B33);
	font-weight: 600;
	text-align: center;
}

/* 24. Traka koja potvrdjuje kod donet sa linka (influenser, mejl). */
.ozzy-kod-najava {
	position: fixed;
	inset: auto 1rem 1rem;
	z-index: 9998;
	display: flex;
	align-items: center;
	gap: var(--r-3, 0.75rem);
	margin: 0 auto;
	max-width: 28rem;
	padding: var(--r-3, 0.75rem) var(--r-4, 1rem);
	border-radius: 999px;
	background: var(--boja-ljubicasta, #2B1B33);
	color: #fff;
	font-size: 0.9375rem;
	line-height: 1.4;
	box-shadow: 0 1rem 2rem -0.75rem rgba(43, 27, 51, 0.55);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.ozzy-kod-najava strong {
	color: var(--boja-tirkiz, #00BBCE);
	letter-spacing: 0.04em;
}

.ozzy-kod-najava--sakrivena {
	opacity: 0;
	transform: translateY(0.75rem);
	pointer-events: none;
}

.ozzy-kod-najava__zatvori {
	margin-left: auto;
	padding: 0 0.25rem;
	border: 0;
	background: none;
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.ozzy-kod-najava { transition: none; }
}
/* --------------------------------------------------------------------------
   17) Doterivanja za telefon (20. 9. 2026). Prag je 599 px — isti koji
   Elementor koristi za "mobile", pa desktop i tablet ostaju netaknuti.
   Izuzetak je dugme u zaglavlju (17.1): tamo je greska ista na svim sirinama.

   VAZNO: Elementor svoje globalne klase ispisuje u global-<id>-frontend-*.css,
   koji se ucitava POSLE ove datoteke. Za svako svojstvo koje Elementor vec
   postavlja klasa se navodi dvaput (.tekst.tekst) da bi specificnost bila veca
   od njegove; bez toga pravilo nema efekta.
   -------------------------------------------------------------------------- */

/* 17.1) Dugme "Kupi sada" u zaglavlju. Astra ispisuje natpis levo poravnat i
   pusta ga da se prelomi u dva reda, pa tekst stoji uz levu ivicu pilule. */
.ast-header-button-1[data-section*="section-hb-button-"] .ast-builder-button-wrap .ast-custom-button {
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 599px) {
  /* Na telefonu red zaglavlja (logo + dugme + korpa + hamburger) izlazi iz
     ekrana cim natpis stane u jedan red, pa se razmak u pilili suzava. */
  .ast-header-button-1[data-section*="section-hb-button-"] .ast-builder-button-wrap .ast-custom-button {
    padding-inline-start: 6px;
    padding-inline-end: 6px;
    font-size: 0.75rem;
  }

  /* 17.2) Tvrdnje iznad naslova idu u jedan red. Ikone i razmak se skupljaju,
     a slova prate sirinu ekrana da i na 320 px sve tri stanu. */
  /* Traka .tvrdnje-jedan-red (ocena, Nutri-Score, povracaj) vec ima svoj uzi
     razmak i sitnija slova, pa je iz ovih pravila iskljucena. */
  .elementor .tvrdnje.tvrdnje:not(.tvrdnje-jedan-red) {
    flex-wrap: nowrap;
    column-gap: var(--r-3);
  }

  .elementor .tvrdnje:not(.tvrdnje-jedan-red) > .tvrdnja.tvrdnja {
    font-size: clamp(0.6875rem, 3.3vw, 0.8125rem);
    white-space: nowrap;
  }

  .elementor .tvrdnje:not(.tvrdnje-jedan-red) > .tvrdnja .tvrdnja-ikona {
    width: var(--r-3);
    height: var(--r-3);
  }

  /* 17.3) Copy ispod naslova. Prored 1,5 na slovima od 19 px pravi previse
     vazduha izmedju redova na uskom ekranu. */
  .elementor .tekst.tekst {
    line-height: 1.3;
  }

  /* 17.4) CTA dugmad. Natpis je bio 11 px i jedva se video. Uzi razmak sa
     strane oslobadja mesto da slova porastu, nowrap cuva jedan red. */
  .elementor .dugme-cta.dugme-cta,
  .elementor [data-ozzy-kupovina] .dugme-cta.dugme-cta {
    padding-inline-start: var(--r-3);
    padding-inline-end: var(--r-3);
    font-size: clamp(0.8125rem, 3.85vw, 0.9375rem);
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  /* Ostala dugmad (korpa, naplata, kolacici) su u ozzy-panel.css, koji se
     ucitava posle ove datoteke i tamo nadjacava ovu vrednost. */

  /* Slika pakovanja u kartici sa drugim miksom: sadrzaj kartice je na telefonu
     centriran, pa i slika ide u sredinu. Na desktopu ostaje uz levu ivicu. */
  .elementor .kartica-krem > img.e-image-base {
    align-self: center;
  }

  /* 17.5) Tabele (cela deklaracija i uporedni pregled) staju u jedan prikaz,
     bez horizontalnog skrola: bez donje granice sirine, sitnija slova, uzi
     razmak u celijama i prelom dugackih naziva. */
  .tabela-okvir {
    overflow-x: visible;
  }

  .tabela {
    min-width: 0;
  }

  .tabela-zaglavlje {
    padding: var(--r-2);
    font-size: 0.625rem;
    letter-spacing: 0.02em;
    line-height: 1.2;
  }

  .tabela-celija {
    padding: var(--r-2);
    font-size: 0.75rem;
    line-height: 1.25;
  }

  /* Samo naziv nutrijenta sme da lomi dugacku rec; brojevi ostaju celi. */
  .tabela-celija:first-child,
  .tabela-zaglavlje:first-child {
    overflow-wrap: anywhere;
  }

  /* 17.6) Persona stranice: razmak izmedju odeljka "Kako se koristi" i
     uporednog pregleda bio je 72 px (36 + 36). Id-jevi su ispisani rucno jer
     oba odeljka nose istu globalnu klasu .sekcija kao i svi ostali.
     Redom: posao, vece, staza, oporavak, deklaracija, nezasicene-masti. */
  .elementor .elementor-element-8186303.elementor-element-8186303,
  .elementor .elementor-element-c2aa58b.elementor-element-c2aa58b,
  .elementor .elementor-element-07683f0.elementor-element-07683f0,
  .elementor .elementor-element-b698d4e.elementor-element-b698d4e,
  .elementor .elementor-element-8a56bca.elementor-element-8a56bca,
  .elementor .elementor-element-39c634f.elementor-element-39c634f {
    padding-bottom: var(--r-5);
  }

  .elementor .elementor-element-eb97a99.elementor-element-eb97a99,
  .elementor .elementor-element-a9b33b8.elementor-element-a9b33b8,
  .elementor .elementor-element-29676ee.elementor-element-29676ee,
  .elementor .elementor-element-498e498.elementor-element-498e498,
  .elementor .elementor-element-0600dc8.elementor-element-0600dc8,
  .elementor .elementor-element-f797e6f.elementor-element-f797e6f {
    padding-top: var(--r-2);
  }
}

/* 17.7) Vrlo uski telefoni (do 374 px, npr. iPhone SE prve generacije). Red
   zaglavlja tu ne staje u ekran ni sa jednorednim natpisom na dugmetu, pa se
   razmaci oko logotipa, dugmeta, korpe i hamburgera dodatno suzavaju. */
@media (max-width: 374px) {
  .ast-primary-header-bar .site-header-primary-section-left > .ast-builder-layout-element,
  .ast-primary-header-bar .site-header-primary-section-right > .ast-builder-layout-element {
    padding-inline-start: 2px;
    padding-inline-end: 2px;
  }

  .ast-header-button-1[data-section*="section-hb-button-"] .ast-builder-button-wrap .ast-custom-button {
    padding-inline-start: 4px;
    padding-inline-end: 4px;
    font-size: 0.6875rem;
  }

  #ast-mobile-header .ast-builder-grid-row {
    padding-left: var(--r-3);
    padding-right: var(--r-3);
  }
}


/* --------------------------------------------------------------------------
   24) Strana 404. Astrin fabricki tekst je zamenjen nasim (predlozak 404.php).
   Stil je samostalan: Elementorove globalne klase (.sekcija, .dugme-cta...)
   postoje samo na stranama koje on gradi, a 404 nije jedna od njih.
   Promenljive dolaze iz Elementorovog kita (post-13.css), koji se ucitava i
   ovde, ali svaka ima i zapisanu rezervu za slucaj da kita nema.
   -------------------------------------------------------------------------- */
.ozzy-404 {
  padding: var(--r-sekcija, 48px) var(--r-gutter, 24px) calc(var(--r-sekcija, 48px) * 1.4);
  background: var(--boja-krem-100, #f6efe5);
  text-align: center;
}

.ozzy-404__mera {
  max-width: 640px;
  margin: 0 auto;
}

.ozzy-404__oznaka {
  margin: 0 0 var(--r-3, 12px);
  color: var(--boja-narandzasta-cta, #de7610);
  font-family: var(--font-naslov, "Figtree", sans-serif);
  font-size: var(--slova-xs, 0.75rem);
  font-weight: var(--tezina-debela, 800);
  letter-spacing: var(--razmak-slova-oznaka, 0.12em);
  text-transform: uppercase;
}

.ozzy-404__naslov {
  margin: 0 0 var(--r-4, 16px);
  color: var(--boja-plum-900, #2b1b33);
  font-family: var(--font-naslov, "Figtree", sans-serif);
  font-size: var(--slova-naslov-1, clamp(2.25rem, 6vw, 3.5rem));
  font-weight: var(--tezina-crna, 900);
  letter-spacing: var(--razmak-slova-naslov, -0.02em);
  line-height: 1.02;
  text-transform: uppercase;
}

.ozzy-404__tekst {
  max-width: 34em;
  margin: 0 auto var(--r-8, 32px);
  color: var(--boja-plum-700, #55415f);
  font-size: var(--slova-m, 1rem);
  line-height: 1.5;
}

.ozzy-404__dugmad {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--r-3, 12px);
  margin: 0 0 var(--r-8, 32px);
}

.ozzy-404__cta {
  display: inline-block;
  padding: 14px 26px;
  border-radius: var(--radijus-pilula, 999px);
  background: var(--boja-narandzasta-cta, #de7610);
  color: var(--boja-bela, #ffffff);
  font-family: var(--font-naslov, "Figtree", sans-serif);
  font-size: var(--slova-cta, 0.875rem);
  font-weight: var(--tezina-debela, 800);
  letter-spacing: var(--razmak-slova-dugme, 0.04em);
  text-decoration: none;
  text-transform: uppercase;
}

.ozzy-404__cta:hover,
.ozzy-404__cta:focus {
  background: var(--boja-narandzasta-cta-hover, #b95f08);
  color: var(--boja-bela, #ffffff);
}

.ozzy-404__cta--plum {
  background: var(--boja-plum-900, #2b1b33);
}

.ozzy-404__cta--plum:hover,
.ozzy-404__cta--plum:focus {
  background: var(--boja-plum-700, #55415f);
}

.ozzy-404__pretraga {
  display: flex;
  gap: var(--r-2, 8px);
  max-width: 420px;
  margin: 0 auto var(--r-6, 24px);
}

.ozzy-404__pretraga input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 18px;
  border: 2px solid var(--boja-ivica, #d7cfdb);
  border-radius: var(--radijus-pilula, 999px);
  background: var(--boja-bela, #ffffff);
  color: var(--boja-plum-900, #2b1b33);
  font-family: var(--font-telo, "Figtree", sans-serif);
  font-size: var(--slova-m, 1rem);
}

.ozzy-404__pretraga input[type="search"]:focus {
  border-color: var(--boja-tirkiz, #00bbce);
  outline: none;
}

.ozzy-404__pretraga button {
  flex: 0 0 auto;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--radijus-pilula, 999px);
  background: var(--boja-tirkiz, #00bbce);
  color: var(--boja-bela, #ffffff);
  cursor: pointer;
  font-family: var(--font-naslov, "Figtree", sans-serif);
  font-size: var(--slova-s, 0.8125rem);
  font-weight: var(--tezina-debela, 800);
  letter-spacing: var(--razmak-slova-oznaka, 0.12em);
  text-transform: uppercase;
}

.ozzy-404__pomoc {
  max-width: 38em;
  margin: 0 auto var(--r-5, 20px);
  color: var(--boja-plum-700, #55415f);
  font-size: var(--slova-s, 0.8125rem);
  line-height: 1.5;
}

.ozzy-404__pomoc a {
  color: var(--boja-plum-900, #2b1b33);
}

.ozzy-404__veze {
  color: var(--boja-plum-500, #7b6885);
  font-size: var(--slova-s, 0.8125rem);
  line-height: 1.9;
}

.ozzy-404__veze a {
  color: var(--boja-plum-700, #55415f);
  text-decoration: underline;
}

@media (max-width: 599px) {
  .ozzy-404__dugmad .ozzy-404__cta {
    flex: 1 1 100%;
  }
}

/* --------------------------------------------------------------------------
   25) Stranica kontakta (predlozak ozzy-kontakt-stranica.php). Kao i 404, stil
   je samostalan jer Elementorove globalne klase postoje samo na stranama koje
   on gradi. Promenljive dolaze iz Elementorovog kita, sa zapisanom rezervom.
   -------------------------------------------------------------------------- */
.ozzy-kontakt {
  padding: var(--r-sekcija, 48px) var(--r-gutter, 24px) calc(var(--r-sekcija, 48px) * 1.4);
  background: var(--boja-krem-100, #f6efe5);
}

.ozzy-kontakt__mera {
  max-width: 720px;
  margin: 0 auto;
}

.ozzy-kontakt__oznaka {
  margin: 0 0 var(--r-3, 12px);
  color: var(--boja-narandzasta-cta, #de7610);
  font-family: var(--font-naslov, "Figtree", sans-serif);
  font-size: var(--slova-xs, 0.75rem);
  font-weight: var(--tezina-debela, 800);
  letter-spacing: var(--razmak-slova-oznaka, 0.12em);
  text-transform: uppercase;
}

.ozzy-kontakt__naslov {
  margin: 0 0 var(--r-4, 16px);
  color: var(--boja-plum-900, #2b1b33);
  font-family: var(--font-naslov, "Figtree", sans-serif);
  font-size: var(--slova-naslov-1, clamp(2.25rem, 6vw, 3.5rem));
  font-weight: var(--tezina-crna, 900);
  letter-spacing: var(--razmak-slova-naslov, -0.02em);
  line-height: 1.02;
  text-transform: uppercase;
}

.ozzy-kontakt__uvod {
  max-width: 38em;
  margin: 0 0 var(--r-8, 32px);
  color: var(--boja-plum-700, #55415f);
  font-size: var(--slova-m, 1rem);
  line-height: 1.5;
}

.ozzy-kontakt__vreme {
  display: inline-block;
  margin: 0 0 var(--r-8, 32px);
  padding: var(--r-2, 8px) var(--r-4, 16px);
  border-radius: var(--radijus-pilula, 999px);
  background: #e6fafd;
  color: #0a5a63;
  font-size: var(--slova-s, 0.8125rem);
  line-height: 1.5;
}

.ozzy-kontakt__vreme strong {
  color: #07414a;
}

.ozzy-kontakt__kanali {
  display: grid;
  gap: var(--r-3, 12px);
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 var(--r-8, 32px);
}

.ozzy-kontakt__kanal {
  display: block;
  padding: var(--r-5, 20px);
  border: 2px solid var(--boja-krem-300, #e9dcc9);
  border-radius: var(--radijus-m, 16px);
  background: var(--boja-bela, #ffffff);
  text-decoration: none;
}

.ozzy-kontakt__kanal:hover,
.ozzy-kontakt__kanal:focus {
  border-color: var(--boja-tirkiz, #00bbce);
}

.ozzy-kontakt__kanal-oznaka {
  display: block;
  margin-bottom: var(--r-1, 4px);
  color: var(--boja-plum-500, #7b6885);
  font-family: var(--font-naslov, "Figtree", sans-serif);
  font-size: var(--slova-nano, 0.6875rem);
  font-weight: var(--tezina-debela, 800);
  letter-spacing: var(--razmak-slova-oznaka, 0.12em);
  text-transform: uppercase;
}

.ozzy-kontakt__kanal-vrednost {
  display: block;
  color: var(--boja-plum-900, #2b1b33);
  font-family: var(--font-naslov, "Figtree", sans-serif);
  font-size: var(--slova-m, 1rem);
  font-weight: var(--tezina-debela, 800);
  word-break: break-word;
}

.ozzy-kontakt__prvo {
  margin: 0 0 var(--r-10, 40px);
  padding: var(--r-4, 16px) var(--r-5, 20px);
  border-left: 4px solid var(--boja-narandzasta-cta, #de7610);
  background: var(--boja-krem-050, #faf5ee);
}

.ozzy-kontakt__prvo-naslov {
  margin: 0 0 var(--r-1, 4px);
  color: var(--boja-plum-900, #2b1b33);
  font-family: var(--font-naslov, "Figtree", sans-serif);
  font-size: var(--slova-s, 0.8125rem);
  font-weight: var(--tezina-debela, 800);
  letter-spacing: var(--razmak-slova-oznaka, 0.12em);
  text-transform: uppercase;
}

.ozzy-kontakt__prvo-veze {
  margin: 0;
  color: var(--boja-plum-500, #7b6885);
  font-size: var(--slova-s, 0.8125rem);
  line-height: 1.8;
}

.ozzy-kontakt__prvo-veze a {
  color: var(--boja-plum-700, #55415f);
  text-decoration: underline;
}

.ozzy-kontakt__obrazac {
  padding: var(--r-6, 24px);
  border: 2px solid var(--boja-krem-300, #e9dcc9);
  border-radius: var(--radijus-l, 20px);
  background: var(--boja-bela, #ffffff);
}

.ozzy-kontakt__obrazac-naslov {
  margin: 0 0 var(--r-5, 20px);
  color: var(--boja-plum-900, #2b1b33);
  font-family: var(--font-naslov, "Figtree", sans-serif);
  font-size: var(--slova-naslov-3, 1.25rem);
  font-weight: var(--tezina-crna, 900);
  letter-spacing: var(--razmak-slova-naslov, -0.02em);
  text-transform: uppercase;
}

.ozzy-kontakt__ishod {
  margin: 0 0 var(--r-5, 20px);
  padding: var(--r-3, 12px) var(--r-4, 16px);
  border-radius: var(--radijus-s, 10px);
  font-size: var(--slova-s, 0.8125rem);
  line-height: 1.5;
}

.ozzy-kontakt__ishod--dobro {
  background: #e6fafd;
  color: #0a5a63;
}

.ozzy-kontakt__ishod--lose {
  background: #fdeee0;
  color: #8a3d05;
}

.ozzy-kontakt__ishod a {
  color: inherit;
}

.ozzy-kontakt__mamac {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ozzy-kontakt__red {
  display: grid;
  gap: var(--r-4, 16px);
  grid-template-columns: 1fr 1fr;
}

.ozzy-kontakt__polje {
  margin: 0 0 var(--r-4, 16px);
}

.ozzy-kontakt__polje label {
  display: block;
  margin-bottom: var(--r-1, 4px);
  color: var(--boja-plum-900, #2b1b33);
  font-family: var(--font-naslov, "Figtree", sans-serif);
  font-size: var(--slova-xs, 0.75rem);
  font-weight: var(--tezina-debela, 800);
  letter-spacing: var(--razmak-slova-oznaka, 0.12em);
  text-transform: uppercase;
}

.ozzy-kontakt__opciono {
  color: var(--boja-plum-500, #7b6885);
  font-weight: var(--tezina-srednja, 500);
  letter-spacing: 0;
  text-transform: none;
}

.ozzy-kontakt__polje input,
.ozzy-kontakt__polje textarea {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--boja-ivica, #d7cfdb);
  border-radius: var(--radijus-s, 10px);
  background: var(--boja-bela, #ffffff);
  color: var(--boja-plum-900, #2b1b33);
  font-family: var(--font-telo, "Figtree", sans-serif);
  font-size: var(--slova-m, 1rem);
}

.ozzy-kontakt__polje input:focus,
.ozzy-kontakt__polje textarea:focus {
  border-color: var(--boja-tirkiz, #00bbce);
  outline: none;
}

.ozzy-kontakt__polje textarea {
  resize: vertical;
}

.ozzy-kontakt__dno {
  margin: var(--r-5, 20px) 0 var(--r-3, 12px);
}

.ozzy-kontakt__dugme {
  padding: 15px 30px;
  border: 0;
  border-radius: var(--radijus-pilula, 999px);
  background: var(--boja-narandzasta-cta, #de7610);
  color: var(--boja-bela, #ffffff);
  cursor: pointer;
  font-family: var(--font-naslov, "Figtree", sans-serif);
  font-size: var(--slova-cta, 0.875rem);
  font-weight: var(--tezina-debela, 800);
  letter-spacing: var(--razmak-slova-dugme, 0.04em);
  text-transform: uppercase;
}

.ozzy-kontakt__dugme:hover,
.ozzy-kontakt__dugme:focus {
  background: var(--boja-narandzasta-cta-hover, #b95f08);
}

.ozzy-kontakt__sitno {
  margin: 0;
  color: var(--boja-plum-500, #7b6885);
  font-size: var(--slova-xs, 0.75rem);
  line-height: 1.5;
}

.ozzy-kontakt__sitno a {
  color: var(--boja-plum-700, #55415f);
  text-decoration: underline;
}

.ozzy-kontakt__firma {
  margin: var(--r-8, 32px) 0 0;
  color: var(--boja-plum-500, #7b6885);
  font-size: var(--slova-s, 0.8125rem);
  line-height: 1.6;
}

.ozzy-kontakt__firma strong {
  color: var(--boja-plum-900, #2b1b33);
}

@media (max-width: 599px) {
  .ozzy-kontakt__kanali,
  .ozzy-kontakt__red {
    grid-template-columns: 1fr;
  }

  .ozzy-kontakt__obrazac {
    padding: var(--r-5, 20px);
  }

  .ozzy-kontakt__dugme {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   26) Pristupacnost. Ispravke po nalazu axe/Lighthouse od 22. 9. 2026.
   Elementorove atomske klase se nadjacavaju udvajanjem imena klase, jer se
   njegov generisani CSS ucitava posle ovog fajla.
   -------------------------------------------------------------------------- */

/* Veza u podnozju se raspoznavala samo po boji (narandzasta na krem tekstu,
   odnos 2,06 prema trazenih 3). Podvlacenje resava zahtev bez diranja boje:
   veza se vidi i kad se boje ne razlikuju — npr. u crno-belom stampanju ili
   kod daltonizma. */
.ast-footer-copyright a,
.ast-footer-copyright p a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Sitni tekst fusnote bio je na odnosu 4,42 — za dlaku ispod trazenih 4,5.
   #75627e daje 4,84 na krem pozadini, a razlika se golim okom ne vidi. */
.elementor .tekst-fusnota.tekst-fusnota {
  color: #75627e;
}

/* 26. Pilula -15% na prvu porudzbinu (mu-plugins/ozzy-pill.php): uspravni jezicak
   uz levu ivicu, na sredini visine ekrana. Ispod trake kolacica i panela korpe. */
.ozzy-pill {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 990;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0 16px 16px 0;
  background: var(--boja-narandzasta, #de7610);
  color: #fff;
  box-shadow: 0 8px 24px rgba(40, 20, 40, .28);
  transform: translateY(-50%);
  transition: opacity .3s ease, transform .3s ease;
}
.ozzy-pill[hidden] { display: none; }
.ozzy-pill--odlazi { opacity: 0; transform: translate(-100%, -50%); }
.ozzy-pill__dugme {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 9px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  cursor: pointer;
}
.ozzy-pill__dugme:hover, .ozzy-pill__dugme:focus { background: transparent; color: inherit; }
.ozzy-pill__procenat {
  flex: none;
  padding: 10px 6px;
  border-radius: 999px;
  background: var(--boja-plum-900, #3b1f3a);
  color: #fff;
  font-weight: 800;
}
.ozzy-pill--upisan .ozzy-pill__procenat { background: #2e7d4f; }
@media (max-width: 599px) {
  .ozzy-pill__dugme { font-size: 13px; padding: 12px 7px; }
}


/* ---------------------------------------------------------------
   27. OZZY slajdsou persone (slika + gradijent + tekst levo)
   --------------------------------------------------------------- */
.ozzy-slajdsou{position:relative;width:100%;container-type:inline-size}
.ozzy-slajd{position:relative;width:100%;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:var(--boja-plum-900,#2b1b33)}
.ozzy-slajd>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 50%;display:block}
.ozzy-slajd__zastor{position:absolute;inset:0;background:linear-gradient(95deg,rgba(43,27,51,.94) 0%,rgba(43,27,51,.88) 30%,rgba(43,27,51,.58) 52%,rgba(43,27,51,.22) 76%,rgba(43,27,51,.08) 100%)}
.ozzy-slajd__oznaka{position:absolute;right:16px;top:16px;background:rgba(250,245,238,.92);color:var(--boja-plum-900,#2b1b33);font-size:12px;font-weight:700;letter-spacing:.04em;padding:6px 12px;border-radius:999px;z-index:2}
.ozzy-slajd__sadrzaj{position:absolute;inset:0;padding:clamp(20px,4.6cqw,52px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:58%;z-index:2}
.ozzy-slajd__naslov{font-size:clamp(26px,6.2cqw,54px);line-height:1.02;font-weight:800;color:#fff;letter-spacing:-.03em;margin:0}
.ozzy-slajd__crta{display:block;width:clamp(40px,6cqw,66px);height:4px;background:var(--boja-narandzasta-cta,#de7610);border-radius:2px;margin:clamp(12px,2.4cqw,26px) 0 clamp(10px,2.2cqw,22px)}
.ozzy-slajd__tekst{font-size:clamp(13px,1.9cqw,19px);line-height:1.5;color:#fff;opacity:.92;margin:0;max-width:27ch}
.ozzy-slajd__brojke{list-style:none;margin:clamp(14px,3cqw,32px) 0 0;padding:0;display:flex;flex-direction:column;gap:clamp(6px,1.1cqw,11px);align-items:flex-start}
.ozzy-slajd__brojke li{display:flex;align-items:baseline;gap:12px;background:rgba(250,245,238,.10);border:1px solid rgba(228,210,188,.30);border-radius:12px;padding:clamp(7px,1.3cqw,13px) clamp(11px,1.9cqw,19px)}
.ozzy-slajd__brojke b{font-size:clamp(13px,2.2cqw,22px);font-weight:800;color:#fff;line-height:1;flex:0 0 auto;min-width:clamp(78px,12.6cqw,124px)}
.ozzy-slajd__brojke span{font-size:clamp(10px,1.35cqw,13px);font-weight:500;color:var(--boja-krem,#e4d2bc);line-height:1.35}
@media (max-width:767px){
  .ozzy-slajd{aspect-ratio:4/5}
  .ozzy-slajd__zastor{background:linear-gradient(to bottom,rgba(43,27,51,.30) 0%,rgba(43,27,51,.62) 42%,rgba(43,27,51,.92) 78%,rgba(43,27,51,.96) 100%)}
  .ozzy-slajd__sadrzaj{width:100%;justify-content:flex-end;padding:22px}
  .ozzy-slajd__naslov{font-size:30px}
  .ozzy-slajd__tekst{font-size:15px;max-width:none}
  .ozzy-slajd__brojke b{font-size:15px;min-width:104px}
  .ozzy-slajd__brojke span{font-size:11px}
}

/* --------------------------------------------------------------------------
   28) Uporedna tabela na persona stranama (23. 9. 2026). Tabela "Kako stoji
   prema ostalom" dobija klasu tabela--uporedna: OZZY kolona (druga) je
   narandzasti stub sa zaobljenim vrhom i dnom, ostale dve su prigusene u
   plum tonu. Isti jezik kao tabela "Zasto ne bilo koja grickalica" na
   naslovnoj. Deklaracija na stranicama proizvoda (.tabela bez modifikatora)
   ostaje netaknuta.
   -------------------------------------------------------------------------- */

.tabela--uporedna {
  border-collapse: separate;
  border-spacing: 0;
}

.tabela--uporedna .tabela-zaglavlje,
.tabela--uporedna .tabela-celija {
  text-align: center;
}

.tabela--uporedna .tabela-zaglavlje:first-child,
.tabela--uporedna .tabela-celija:first-child {
  text-align: left;
}

.tabela--uporedna .tabela-zaglavlje {
  padding: var(--r-3) var(--r-2);
  color: var(--boja-plum-700);
  letter-spacing: 0.06em;
  vertical-align: bottom;
}

.tabela--uporedna .tabela-zaglavlje:nth-child(2) {
  padding: var(--r-4) var(--r-2);
  background: var(--boja-narandzasta);
  border-radius: var(--radijus-m) var(--radijus-m) 0 0;
  color: var(--boja-plum-900);
  font-size: var(--slova-s);
  font-weight: var(--tezina-crna);
  letter-spacing: 0.04em;
}

.tabela--uporedna .tabela-celija {
  color: var(--boja-plum-700);
  font-weight: var(--tezina-srednja);
}

.tabela--uporedna .tabela-celija:first-child {
  color: var(--boja-plum-900);
  font-weight: var(--tezina-poludebela);
}

.tabela--uporedna .tabela-celija:nth-child(2) {
  background: #fef3e6;
  border-top-color: rgba(246, 139, 30, 0.28);
  color: var(--boja-plum-900);
  font-weight: var(--tezina-debela);
}

.tabela--uporedna tbody tr:last-child .tabela-celija:nth-child(2) {
  border-radius: 0 0 var(--radijus-m) var(--radijus-m);
}

@media (max-width: 599px) {
  .tabela--uporedna .tabela-zaglavlje {
    padding: var(--r-2) var(--r-1);
    font-size: 0.625rem;
  }

  .tabela--uporedna .tabela-zaglavlje:nth-child(2) {
    padding: var(--r-2) var(--r-1);
    font-size: 0.6875rem;
  }

  .tabela--uporedna .tabela-celija {
    padding: var(--r-2) var(--r-1);
  }
}

/* --------------------------------------------------------------------------
   29) Lepljivo zaglavlje (23. 9. 2026). #masthead (traka sa najavama + red sa
   logotipom, dugmetom, korpom i hamburgerom) ostaje na vrhu ekrana. Skripta
   ozzy-zaglavlje.js dodaje klasu ozzy-zaglavlje--skriveno pri skrolu nadole
   i skida je pri skrolu nagore, pa zaglavlje klizi gore/dole. Bez skripte
   zaglavlje je obicno lepljivo.
   -------------------------------------------------------------------------- */

#masthead.ozzy-zaglavlje {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--boja-bela);
  /* 0.45 s umesto podrazumevanih 0.22 s — vlasnik trazio sporiji prelaz (23. 9. 2026). */
  transition: transform 0.45s var(--krivulja);
  will-change: transform;
}

.admin-bar #masthead.ozzy-zaglavlje {
  top: 32px;
}

#masthead.ozzy-zaglavlje.ozzy-zaglavlje--skriveno {
  transform: translateY(-100%);
}

@media (max-width: 782px) {
  .admin-bar #masthead.ozzy-zaglavlje {
    top: 46px;
  }
}

/* Telefon: najava (34 px) odlazi sa skrolom, lepi se samo red sa logom, dugmetom
   i korpom — negativan top za visinu najave. Vlasnikova odluka 23. 9. 2026. */
@media (max-width: 599px) {
  #masthead.ozzy-zaglavlje {
    top: calc(-1 * var(--visina-najave, 34px));
  }

  .admin-bar #masthead.ozzy-zaglavlje {
    top: calc(46px - var(--visina-najave, 34px));
  }
}

@media (prefers-reduced-motion: reduce) {
  #masthead.ozzy-zaglavlje {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   18) Pretplata jos nije pokrenuta (24. 9. 2026). Kad je izabrana, dugme i
   napomena ispod njega odmah kazu da se ceka — ranije je poruka izlazila
   tek posle klika, na telefonu cesto ispod ivice ekrana. Klase postavlja
   ozzy.js (nacrtaj). Kad pretplata proradi, ovaj odeljak se brise.
   -------------------------------------------------------------------------- */

.elementor [data-ozzy-kupovina] .dugme-cta.dugme-uskoro,
.elementor [data-ozzy-kupovina] .dugme-cta.dugme-uskoro:hover,
.elementor [data-ozzy-kupovina] .dugme-cta.dugme-uskoro:focus-visible {
  background: var(--boja-krem-300);
  border-color: var(--boja-krem-300);
  color: var(--boja-plum-900);
  transform: none;
  cursor: default;
}

.elementor [data-ozzy-kupovina] .napomena-uskoro.napomena-uskoro {
  margin-top: var(--r-3);
  padding: var(--r-3) var(--r-4);
  background: var(--boja-krem-050);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-m);
  color: var(--boja-plum-900);
  font-size: var(--slova-s);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.elementor [data-ozzy-kupovina] .napomena-trepni {
  animation: ozzy-napomena-trepni 0.9s var(--krivulja) 1;
}

@keyframes ozzy-napomena-trepni {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  40% { box-shadow: 0 0 0 4px var(--boja-narandzasta-cta); }
}

@media (prefers-reduced-motion: reduce) {
  .elementor [data-ozzy-kupovina] .napomena-trepni { animation: none; }
}

/* --------------------------------------------------------------------------
   30) Recenzije na stranicama proizvoda (28. 9. 2026). Sekciju crta
   mu-plugins/ozzy-recenzije.php posle FAQ-a (filter the_content), pa nema
   Elementor globalnih klasa — sve je ovde, na nasim promenljivama. Kartice
   bele sa ivicom i radijusom, obrazac na krem kartici, zvezde narandzaste.
   -------------------------------------------------------------------------- */

.ozzy-rec {
  padding: var(--r-sekcija, 48px) var(--r-gutter, 20px);
  background: var(--boja-bela, #fff);
  color: var(--boja-plum-900, #2b1b33);
  font-family: var(--font-telo, sans-serif);
}

.ozzy-rec__mera {
  max-width: var(--mera-stranica, 1120px);
  margin: 0 auto;
}

.ozzy-rec__zaglavlje {
  text-align: center;
  margin-bottom: var(--r-6, 24px);
}

.ozzy-rec__oznaka {
  margin: 0 0 var(--r-3, 12px);
  color: var(--boja-narandzasta-cta, #de7610);
  font-family: var(--font-naslov, sans-serif);
  font-size: var(--slova-nano, 0.6875rem);
  font-weight: var(--tezina-debela, 800);
  letter-spacing: var(--razmak-slova-oznaka, 0.12em);
  text-transform: uppercase;
}

.ozzy-rec__naslov {
  margin: 0;
  font-family: var(--font-naslov, sans-serif);
  font-size: var(--slova-naslov-2, 2rem);
  font-weight: var(--tezina-crna, 900);
  line-height: var(--prored-naslov, 1.1);
  letter-spacing: var(--razmak-slova-naslov, -0.02em);
  text-transform: uppercase;
  text-wrap: balance;
}

.ozzy-rec__prosek {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--r-2, 8px);
  margin: var(--r-3, 12px) 0 0;
  font-size: var(--slova-m, 1rem);
  font-weight: var(--tezina-srednja, 500);
}

.ozzy-rec__prosek--prazno {
  color: var(--boja-plum-700, #55415f);
}

.ozzy-rec__zvezde {
  display: inline-flex;
  gap: 2px;
}

.ozzy-rec__zvezde svg {
  fill: var(--boja-plum-200, #d7cfdb);
  display: block;
}

.ozzy-rec__zvezde svg.je-puna {
  fill: var(--boja-zvezda, #f6a81e);
}

.ozzy-rec__zvezde svg.je-pola {
  fill: url(#ozzy-rec-pola);
  fill: var(--boja-zvezda, #f6a81e);
  opacity: 0.55;
}

.ozzy-rec__poruka {
  max-width: 60ch;
  margin: 0 auto var(--r-6, 24px);
  padding: var(--r-3, 12px) var(--r-4, 16px);
  border-radius: var(--radijus-m, 16px);
  background: var(--boja-krem-050, #faf5ee);
  border: var(--ivica-tanka, 1px) solid var(--boja-ivica, #d7cfdb);
  font-weight: var(--tezina-poludebela, 700);
  text-align: center;
}

.ozzy-rec__poruka--greska {
  border-color: var(--boja-narandzasta-cta, #de7610);
}

.ozzy-rec__lista {
  list-style: none;
  margin: 0 0 var(--r-8, 32px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--r-4, 16px);
}

.ozzy-rec__kartica {
  background: var(--boja-bela, #fff);
  border: var(--ivica-tanka, 1px) solid var(--boja-ivica, #d7cfdb);
  border-radius: var(--radijus-l, 20px);
  box-shadow: var(--senka-1, none);
  padding: var(--r-5, 20px);
  display: flex;
  flex-direction: column;
  gap: var(--r-2, 8px);
}

.ozzy-rec__red {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--r-2, 8px);
}

.ozzy-rec__potvrdjen {
  font-family: var(--font-naslov, sans-serif);
  font-size: var(--slova-nano, 0.6875rem);
  font-weight: var(--tezina-debela, 800);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--boja-plum-900, #2b1b33);
  background: var(--boja-krem-100, #f6efe5);
  border-radius: var(--radijus-pilula, 999px);
  padding: 4px 10px;
}

.ozzy-rec__tekst {
  margin: 0;
  font-size: var(--slova-m, 1rem);
  line-height: var(--prored-telo, 1.5);
}

.ozzy-rec__tekst p {
  margin: 0 0 var(--r-2, 8px);
}

.ozzy-rec__tekst p:last-child {
  margin: 0;
}

.ozzy-rec__autor {
  margin: auto 0 0;
  font-size: var(--slova-s, 0.8125rem);
  font-weight: var(--tezina-poludebela, 700);
  color: var(--boja-plum-700, #55415f);
}

/* obrazac */
.ozzy-rec__obrazac {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--r-6, 24px);
  background: var(--boja-krem-050, #faf5ee);
  border: var(--ivica-tanka, 1px) solid var(--boja-ivica, #d7cfdb);
  border-radius: var(--radijus-kesica, 32px);
  display: grid;
  gap: var(--r-3, 12px);
}

.ozzy-rec__podnaslov {
  margin: 0 0 var(--r-1, 4px);
  font-family: var(--font-naslov, sans-serif);
  font-size: var(--slova-naslov-3, 1.5rem);
  font-weight: var(--tezina-crna, 900);
  text-transform: uppercase;
  line-height: var(--prored-naslov, 1.1);
}

.ozzy-rec__ocena {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.ozzy-rec__labela {
  display: block;
  margin: 0 0 var(--r-1, 4px);
  font-family: var(--font-naslov, sans-serif);
  font-size: var(--slova-xs, 0.75rem);
  font-weight: var(--tezina-debela, 800);
  letter-spacing: var(--razmak-slova-oznaka, 0.12em);
  text-transform: uppercase;
  color: var(--boja-plum-900, #2b1b33);
}

/* zvezde: radio u obrnutom redu, pa "sve levo od izabrane" dobija boju */
.ozzy-rec__radio {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 2px;
}

.ozzy-rec__radio input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ozzy-rec__radio label {
  cursor: pointer;
  padding: 2px;
  border-radius: 8px;
  display: block;
}

.ozzy-rec__radio label svg {
  display: block;
  fill: var(--boja-plum-200, #d7cfdb);
  transition: fill 0.15s ease, transform 0.15s ease;
}

.ozzy-rec__radio input:checked ~ label svg,
.ozzy-rec__radio label:hover svg,
.ozzy-rec__radio label:hover ~ label svg {
  fill: var(--boja-zvezda, #f6a81e);
}

.ozzy-rec__radio label:hover svg {
  transform: scale(1.12);
}

.ozzy-rec__radio input:focus-visible + label {
  outline: 3px solid var(--boja-tirkiz, #00bbce);
  outline-offset: 1px;
}

.ozzy-rec__polje {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border: var(--ivica-debela, 2px) solid var(--boja-plum-200, #d7cfdb);
  border-radius: var(--radijus-m, 16px);
  background: var(--boja-bela, #fff);
  color: var(--boja-plum-900, #2b1b33);
  font-family: var(--font-telo, sans-serif);
  font-size: var(--slova-m, 1rem);
  line-height: 1.4;
}

.ozzy-rec__polje:focus {
  outline: none;
  border-color: var(--boja-plum-900, #2b1b33);
  box-shadow: 0 0 0 3px rgba(0, 187, 206, 0.35);
}

textarea.ozzy-rec__polje {
  resize: vertical;
  min-height: 110px;
}

.ozzy-rec__dva {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--r-3, 12px);
}

.ozzy-rec__kao {
  margin: 0;
  font-size: var(--slova-s, 0.8125rem);
}

.ozzy-rec__mamac {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ozzy-rec__dugme {
  justify-self: start;
  min-height: var(--dodir-min, 48px);
  padding: 14px 26px;
  border: 0;
  border-radius: var(--radijus-pilula, 999px);
  background: var(--boja-narandzasta-cta, #de7610);
  color: #fff;
  font-family: var(--font-naslov, sans-serif);
  font-size: var(--slova-s, 0.8125rem);
  font-weight: var(--tezina-crna, 900);
  letter-spacing: var(--razmak-slova-dugme, 0.04em);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.ozzy-rec__dugme:hover {
  background: var(--boja-narandzasta-cta-hover, #b95f08);
  transform: translateY(-2px);
}

.ozzy-rec__napomena {
  margin: 0;
  font-size: var(--slova-xs, 0.75rem);
  line-height: 1.45;
  color: var(--boja-plum-700, #55415f);
}

/* --------------------------------------------------------------------------
   31) Traka tvrdnji "ocena / Nutri-Score / povracaj" (.tvrdnje-jedan-red) ispod
   dugmeta na persona stranama i ispod galerije na proizvodu (29. 9. 2026).
   Bila je flex-wrap: nowrap sa stavkama koje smeju da se skupe, pa je na uskim
   ekranima (Instagram pregledac, vece slovo u telefonu) tekst unutar stavke
   pucao u dva reda. Sada stavka ostaje cela (nowrap, bez skupljanja), a red se
   po potrebi prelama: treca stavka ide ispod, centrirano. Na 360 px i sire je
   i dalje jedan red. Klasa dva puta zbog Elementorovog global-*.css.
   -------------------------------------------------------------------------- */
.elementor .tvrdnje-jedan-red.tvrdnje-jedan-red {
  /* Bez justify-content: poravnanje ostaje ono koje strana vec ima (naslovna levo,
     persone i proizvod centrirano) — 30. 9. 2026. */
  flex-wrap: wrap;
  row-gap: var(--r-1);
}

.elementor .tvrdnje-jedan-red.tvrdnje-jedan-red > .e-con {
  flex: 0 0 auto;
  min-width: 0;
}

.elementor .tvrdnje-jedan-red.tvrdnje-jedan-red .e-paragraph-base {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   32) Logo u zaglavlju (1. 10. 2026): Astra sirina logotipa podignuta sa 76 na
   99 px (+30%) za sve uredjaje (astra-settings[ast-header-responsive-logo-width]).
   Red zaglavlja (logo + "Kupi sada" + korpa + hamburger) na 352 px ima ~20 px
   rezerve, ali na 320-359 px ne bi stao, pa se tu logo vraca na 84 px.
   Isti selektor kao Astrin inline, a child CSS se ucitava posle njega.
   -------------------------------------------------------------------------- */
@media (max-width: 359px) {
  .ast-header-break-point .site-logo-img .custom-mobile-logo-link img,
  .ast-header-break-point .site-logo-img .custom-logo-link img {
    max-width: 84px;
    width: 84px;
  }
}

/* --------------------------------------------------------------------------
   33) Kartica "Drugi miks" na stranicama proizvoda (1. 10. 2026). Crta je
   mu-plugins/ozzy-drugi-miks.php odmah ispod bloka za kupovinu (posle prve
   sekcije). Bela kartica sa ivicom, slicica kesice levo, tekst desno, cela
   kartica je veza. Recenica je "izbor po danu", ne druga doza istog dana.
   -------------------------------------------------------------------------- */
.ozzy-dm {
  padding: 0 var(--r-gutter, 20px) var(--r-8, 32px);
  background: var(--boja-bela, #fff);
}

.ozzy-dm__mera {
  max-width: var(--mera-stranica, 1120px);
  margin: 0 auto;
}

.ozzy-dm__kartica {
  display: flex;
  align-items: center;
  gap: var(--r-4, 16px);
  /* ista sirina kao desna kolona hero sekcije (dve kolone, razmak 24 px) */
  width: calc(50% - 12px);
  margin-left: auto;
  padding: var(--r-3, 12px) var(--r-4, 16px);
  background: var(--boja-bela, #fff);
  border: var(--ivica-tanka, 1px) solid var(--boja-ivica, #d7cfdb);
  border-radius: var(--radijus-l, 20px);
  box-shadow: var(--senka-1, none);
  color: var(--boja-plum-900, #2b1b33);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.ozzy-dm__kartica:hover {
  border-color: var(--boja-plum-900, #2b1b33);
  transform: translateY(-2px);
  color: var(--boja-plum-900, #2b1b33);
}

.ozzy-dm__slika {
  flex: 0 0 auto;
  width: 64px;
  height: 72px;
  object-fit: contain;
  display: block;
}

.ozzy-dm__telo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ozzy-dm__oznaka {
  font-family: var(--font-naslov, sans-serif);
  font-size: var(--slova-nano, 0.6875rem);
  font-weight: var(--tezina-debela, 800);
  letter-spacing: var(--razmak-slova-oznaka, 0.12em);
  text-transform: uppercase;
  color: var(--boja-plum-500, #7b6885);
}

.ozzy-dm__ime {
  font-family: var(--font-naslov, sans-serif);
  font-size: var(--slova-l, 1.1875rem);
  font-weight: var(--tezina-crna, 900);
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--boja-narandzasta-cta, #de7610);
}

.ozzy-dm__tekst {
  font-size: var(--slova-s, 0.8125rem);
  font-weight: var(--tezina-srednja, 500);
  line-height: 1.45;
  color: var(--boja-plum-800, #3d2a47);
}

.ozzy-dm__veza {
  margin-top: 2px;
  font-family: var(--font-naslov, sans-serif);
  font-size: var(--slova-xs, 0.75rem);
  font-weight: var(--tezina-debela, 800);
  letter-spacing: var(--razmak-slova-dugme, 0.04em);
  text-transform: uppercase;
  color: var(--boja-narandzasta-cta, #de7610);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (max-width: 991px) {
  .ozzy-dm__kartica {
    width: auto;
    margin-left: 0;
  }
}

/* ==========================================================================
   34. Oznake aktivnosti na personi /staza/ (11. 10. 2026.)
   html vidzet ispod uvoda: trcanje, planinarenje, biciklizam
   ========================================================================== */

.ozzy-aktivnosti {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ozzy-aktivnosti li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 7px 12px 7px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(43, 27, 51, 0.12);
  font-size: var(--slova-s, 0.8125rem);
  font-weight: var(--tezina-polu, 600);
  line-height: 1.2;
  color: var(--boja-plum-800, #3d2a47);
  white-space: nowrap;
}

.ozzy-aktivnosti svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--boja-narandzasta-cta, #de7610);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 767px) {
  .ozzy-aktivnosti {
    justify-content: center;
  }
}
/* ==========================================================================
   35. Pokloni 500, dobij 500 (11. 10. 2026.)
   licni kod preporuke na stranici naloga i na "Porudzbina je primljena".
   NE .ozzy-preporuka — to ime vec nosi ponuda u korpi (ozzy-upsell/panel).
   ========================================================================== */

.ozzy-pokloni {
  margin: 28px 0;
  padding: 24px 24px 20px;
  border: 2px dashed #00a3b4;
  border-radius: 18px;
  background: #fff;
  text-align: center;
  color: var(--boja-plum-800, #3d2a47);
}

.ozzy-pokloni__oznaka {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00a3b4;
}

.ozzy-pokloni .ozzy-pokloni__naslov {
  margin: 0 0 8px;
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--boja-plum-900, #2b1b33);
}

.ozzy-pokloni__tekst {
  margin: 0 auto 12px;
  max-width: 34em;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.ozzy-pokloni__kod {
  margin: 0 0 12px;
  font-size: 1.875rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--boja-plum-900, #2b1b33);
}

.ozzy-pokloni__link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
}

.ozzy-pokloni__link input {
  flex: 1 1 220px;
  max-width: 340px;
  padding: 10px 14px;
  border: 1px solid rgba(43, 27, 51, 0.18);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--boja-plum-800, #3d2a47);
  background: #faf5ee;
}

.ozzy-pokloni .ozzy-pokloni__kopiraj {
  padding: 10px 18px;
  border: 2px solid var(--boja-plum-900, #2b1b33);
  border-radius: 999px;
  background: transparent;
  color: var(--boja-plum-900, #2b1b33);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.ozzy-pokloni__broj,
.ozzy-pokloni__sitno {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--boja-plum-500, #7b6885);
}

.ozzy-pokloni__broj {
  margin-bottom: 4px;
  font-weight: 700;
}
/* ==========================================================================
   36. Meni na hamburger (11. 10. 2026.) — mu-plugins/ozzy-meni.php
   Astra ima "mobilno" zaglavlje na svim sirinama, pa ovo vazi i za desktop.
   Astrin spisak ostaje u HTML-u ali je skriven; nas panel je jedino vidljivo.
   ========================================================================== */

.ozzy-novi-meni .ast-mobile-header-content > :not(.ozzy-meni),
.ozzy-novi-meni .ast-desktop-header-content > :not(.ozzy-meni) {
  display: none !important;
}

.ozzy-novi-meni .ast-mobile-header-wrap .ast-mobile-header-content,
.ozzy-novi-meni .ast-desktop-header-content {
  background: var(--boja-krem-100, #f6efe5) !important;
  max-height: calc(100vh - 110px);
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ozzy-meni {
  padding: 12px 12px 16px;
}

.ozzy-meni__karta {
  max-width: 440px;
  margin: 0 auto;
  padding: 20px 18px 16px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(43, 27, 51, 0.1);
  color: var(--boja-plum-900, #2b1b33);
  font-family: var(--font-naslov, "Figtree", sans-serif);
}

/* desktop i tablet: bez krem trake, kartica pluta desno ispod hamburgera */
@media (min-width: 768px) {
  .ozzy-novi-meni .ast-mobile-header-wrap .ast-mobile-header-content,
  .ozzy-novi-meni .ast-desktop-header-content {
    left: auto !important;
    right: 0;
    width: auto !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .ozzy-meni {
    padding: 10px 0 16px;
  }

  .ozzy-meni__karta {
    width: 420px;
    margin-right: 0;
    box-shadow: 0 18px 50px rgba(43, 27, 51, 0.22);
  }
}

.ozzy-meni .ozzy-meni__oznaka {
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--boja-plum-500, #7b6885);
}

.ozzy-meni__miksevi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ozzy-meni a.ozzy-meni__miks {
  display: block;
  overflow: hidden;
  border: 1px solid #e7decf;
  border-radius: 16px;
  color: var(--boja-plum-900, #2b1b33);
  text-decoration: none;
  transition: border-color 0.2s;
}

.ozzy-meni a.ozzy-meni__miks:hover,
.ozzy-meni a.ozzy-meni__miks:focus-visible {
  border-color: var(--boja-plum-900, #2b1b33);
}

.ozzy-meni__slika {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 118px;
}

.ozzy-meni__slika--krem {
  background: #f7efe4;
}

.ozzy-meni__slika--tirkiz {
  background: #d9f3f6;
}

.ozzy-meni .ozzy-meni__slika img {
  width: 91px;
  height: 100px;
  max-width: 90%;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(43, 27, 51, 0.18));
}

.ozzy-meni__ime {
  display: block;
  padding: 9px 4px 2px;
  font-size: 0.875rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.ozzy-meni__sastav {
  display: block;
  padding: 0 4px 9px;
  font-size: 0.75rem;
  text-align: center;
  color: var(--boja-plum-500, #7b6885);
}

.ozzy-meni a.ozzy-meni__baner {
  display: block;
  margin: 14px 0 6px;
  padding: 15px 15px 12px;
  border-radius: 16px;
  background: #00bbce;
  color: var(--boja-plum-900, #2b1b33);
  text-decoration: none;
}

.ozzy-meni__baner-naslov {
  display: block;
  margin-bottom: 9px;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.ozzy-meni__baner-naslov em {
  font-style: normal;
  color: #fff;
}

.ozzy-meni__baner-red {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.ozzy-meni__kvaka {
  flex: 0 0 auto;
}

.ozzy-meni__kvaka circle {
  fill: #f68b1e;
}

.ozzy-meni__kvaka path {
  fill: none;
  stroke: var(--boja-plum-900, #2b1b33);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ozzy-meni__sekcija {
  border-top: 1px solid #e7decf;
}

.ozzy-meni__sekcija:last-of-type {
  border-bottom: 1px solid #e7decf;
}

.ozzy-meni .ozzy-meni__sekcija-naslov {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 2px;
  font-size: 1.125rem;
  font-weight: 900;
  list-style: none;
  cursor: pointer;
}

.ozzy-meni__sekcija-naslov::-webkit-details-marker {
  display: none;
}

.ozzy-meni__sekcija-naslov::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s;
}

.ozzy-meni__sekcija[open] .ozzy-meni__sekcija-naslov::after {
  transform: rotate(-135deg) translateY(-3px);
}

.ozzy-meni__veze {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  padding: 0 2px 14px;
}

.ozzy-meni .ozzy-meni__veze a {
  font-size: 0.9375rem;
  color: var(--boja-plum-700, #55415f);
  text-decoration: none;
}

.ozzy-meni .ozzy-meni__veze a:hover {
  color: var(--boja-plum-900, #2b1b33);
  text-decoration: underline;
}

.ozzy-meni a.ozzy-meni__nalog {
  display: block;
  margin: 16px 0 12px;
  padding: 15px;
  border-radius: 999px;
  background: var(--boja-plum-900, #2b1b33);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.ozzy-meni .ozzy-meni__dno {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0 4px;
}

.ozzy-meni .ozzy-meni__dno a {
  font-size: 0.875rem;
  color: var(--boja-plum-700, #55415f);
  text-decoration: none;
}

/* jezicak -15% ne sme preko otvorenog menija */
body.ozzy-novi-meni.ast-main-header-nav-open .ozzy-pill {
  display: none;
}

/* ==========================================================================
   37. Stranica /preporuke/ (predlozak ozzy-preporuke-stranica.php, 11. 10. 2026.)
   ========================================================================== */

.ozzy-nagrade {
  padding: var(--r-sekcija, 48px) var(--r-gutter, 24px) calc(var(--r-sekcija, 48px) * 1.4);
  background: var(--boja-krem-100, #f6efe5);
}

.ozzy-nagrade__mera {
  max-width: 720px;
  margin: 0 auto;
  color: var(--boja-plum-700, #55415f);
}

.ozzy-nagrade .ozzy-nagrade__oznaka {
  margin: 0 0 12px;
  color: var(--boja-narandzasta-cta, #de7610);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ozzy-nagrade .ozzy-nagrade__naslov {
  margin: 0 0 16px;
  color: var(--boja-plum-900, #2b1b33);
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-transform: uppercase;
}

.ozzy-nagrade__naslov span {
  color: #00a3b4;
}

.ozzy-nagrade__uvod {
  max-width: 38em;
  margin: 0 0 28px;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.ozzy-nagrade__koraci {
  display: grid;
  gap: 12px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.ozzy-nagrade__koraci li {
  margin: 0;
  padding: 18px 20px;
  border-radius: 16px;
  background: #fff;
  line-height: 1.5;
}

.ozzy-nagrade__koraci b {
  color: var(--boja-plum-900, #2b1b33);
}

.ozzy-nagrade__broj {
  display: inline-block;
  min-width: 2.2em;
  font-weight: 900;
  color: #00a3b4;
}

.ozzy-nagrade__kutija,
.ozzy-nagrade__recenzija {
  margin: 0 0 24px;
  padding: 22px 22px 18px;
  border: 2px solid #e9dcc9;
  border-radius: 18px;
  background: #fff;
}

.ozzy-nagrade .ozzy-nagrade__kutija-naslov {
  margin: 0 0 4px;
  font-weight: 900;
  color: var(--boja-plum-900, #2b1b33);
}

.ozzy-nagrade .ozzy-nagrade__podnaslov {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--boja-plum-900, #2b1b33);
}

.ozzy-nagrade__dugmad {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
}

.ozzy-nagrade a.ozzy-nagrade__dugme {
  display: inline-block;
  padding: 13px 22px;
  border: 2px solid var(--boja-narandzasta-cta, #de7610);
  border-radius: 999px;
  background: var(--boja-narandzasta-cta, #de7610);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.ozzy-nagrade a.ozzy-nagrade__dugme--obrisno {
  background: transparent;
  border-color: var(--boja-plum-900, #2b1b33);
  color: var(--boja-plum-900, #2b1b33);
}

.ozzy-nagrade__sitno {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--boja-plum-500, #7b6885);
}

.ozzy-nagrade__sitno a {
  color: inherit;
}
/* 38. Link u traci sa najavama (Pokloni 500 -> /preporuke/), 11. 10. 2026. */
#masthead .najava-tekst a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* 39. /preporuke/ dopuna (11. 10. 2026.): "ne dodajes nigde", primer poruke,
   "Posalji mi moj kod" + dugmad za deljenje u bloku .ozzy-pokloni */
.ozzy-nagrade .ozzy-nagrade__jasno {
  margin: 0 0 28px;
  padding: 14px 18px;
  border-left: 4px solid #00a3b4;
  border-radius: 0 12px 12px 0;
  background: #e6fafd;
  color: #07414a;
  line-height: 1.5;
}

.ozzy-nagrade__poruka {
  margin: 0 0 24px;
  padding: 18px 20px;
  border: 2px dashed #00a3b4;
  border-radius: 16px;
  background: #fff;
}

.ozzy-nagrade .ozzy-nagrade__poruka-tekst {
  margin: 6px 0 8px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--boja-plum-900, #2b1b33);
}

.ozzy-nagrade__obrazac {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 18px;
}

.ozzy-nagrade__obrazac input[type="email"] {
  flex: 1 1 220px;
  padding: 12px 16px;
  border: 1px solid rgba(43, 27, 51, 0.2);
  border-radius: 999px;
  background: #faf5ee;
  font-size: 0.9375rem;
}

.ozzy-nagrade__obrazac button {
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--boja-plum-900, #2b1b33);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.ozzy-nagrade__mamac {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ozzy-nagrade .ozzy-nagrade__ishod {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: #e6fafd;
  color: #07414a;
  font-size: 0.875rem;
}

.ozzy-nagrade .ozzy-nagrade__ishod--lose {
  background: #fdecea;
  color: #8a1c12;
}

.ozzy-pokloni__deli {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
}

.ozzy-pokloni a.ozzy-pokloni__dugme {
  display: inline-block;
  min-width: 220px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--boja-narandzasta-cta, #de7610);
  text-align: center;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}
/* 40. Okvir za deljenje na /preporuke/?podeli=KOD (Viber iz mejla), 11. 10. 2026. */
.ozzy-nagrade__podeli {
  margin: 0 0 28px;
  padding: 20px 22px;
  border: 2px solid var(--boja-narandzasta-cta, #de7610);
  border-radius: 18px;
  background: #fff;
}

.ozzy-nagrade .ozzy-nagrade__kopiraj {
  padding: 11px 20px;
  border: 2px solid var(--boja-plum-900, #2b1b33);
  border-radius: 999px;
  background: transparent;
  color: var(--boja-plum-900, #2b1b33);
  font-size: 0.875rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 599px) {
  .ozzy-nagrade__podeli .ozzy-nagrade__dugmad > * {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* 41. /preporuke/ koraci: cela recenica u istoj boji (13. 10. 2026.) */
.ozzy-nagrade__koraci li {
  color: var(--boja-plum-900, #2b1b33);
}

/* ==========================================================================
   41. Panel "Kupi sada" (14. 10. 2026.) — mu-plugins/ozzy-meni.php
   Dugme u zaglavlju otvara iste kartice miksa kao hamburger meni.
   ========================================================================== */

.ozzy-kupi {
  position: fixed;
  top: var(--ozzy-kupi-vrh, 110px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ozzy-kupi[hidden] {
  display: none;
}

.ozzy-kupi__zastor {
  position: fixed;
  top: var(--ozzy-kupi-vrh, 110px);
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(43, 27, 51, 0.35);
}

.ozzy-kupi__okvir {
  position: relative;
}

.ozzy-kupi .ozzy-meni__karta {
  max-width: 440px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .ozzy-kupi .ozzy-meni__karta {
    width: 420px;
    margin-right: max(16px, calc((100vw - 1200px) / 2));
    box-shadow: 0 18px 50px rgba(43, 27, 51, 0.22);
  }
}

.ozzy-kupi__vrh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ozzy-kupi__vrh .ozzy-meni__oznaka {
  margin: 0;
}

.ozzy-kupi .ozzy-kupi__x {
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--boja-plum-900, #2b1b33);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.ozzy-kupi .ozzy-kupi__napomena {
  margin: 12px 2px 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
  color: var(--boja-plum-700, #55415f);
}

body.ozzy-kupi-otvoren .ozzy-pill {
  display: none;
}

/* --------------------------------------------------------------------------
   42) Naslovna: CTA „Kupi sada“ u hero delu — dugme prati tekst, krupnija slova (20. 10. 2026.)
   -------------------------------------------------------------------------- */
.elementor a.dugme-cta[data-interaction-id="8b7183e"] {
  align-self: flex-start;
  width: auto;
  padding: 18px 44px;
  font-size: 20px;
  letter-spacing: 0.06em;
}

@media (max-width: 599px) {
  .elementor a.dugme-cta[data-interaction-id="8b7183e"] {
    align-self: center;
  }
}