/* --------------------------------------------------------------------------
   OZZY panel korpe. Sve boje, razmaci i radijusi su Elementor globalne
   promenljive, iste kao na ostatku sajta.
   -------------------------------------------------------------------------- */

.ozzy-panel-zastor {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: var(--boja-zastor);
}

.ozzy-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw);
  background: var(--boja-bela);
  box-shadow: var(--senka-2);
  color: var(--boja-plum-900);
  font-family: var(--font-telo);
  transform: translateX(100%);
  transition: transform var(--trajanje) var(--krivulja);
}

.ozzy-panel--vidljiv {
  transform: translateX(0);
}

.ozzy-panel--radi {
  opacity: 0.6;
  pointer-events: none;
}

.ozzy-panel__zaglavlje {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r-3);
  padding: var(--r-4) var(--r-5);
  border-bottom: var(--ivica-tanka) solid var(--boja-ivica);
}

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

.ozzy-panel__zatvori {
  padding: 0;
  background: none;
  border: none;
  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;
  cursor: pointer;
}

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

.ozzy-panel__sadrzaj {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--r-4) var(--r-5) var(--r-6);
  display: flex;
  flex-direction: column;
  gap: var(--r-4);
}

.ozzy-panel__stavke {
  display: flex;
  flex-direction: column;
  gap: var(--r-3);
}

.ozzy-panel__stavka,
.ozzy-panel__preporuka {
  display: flex;
  gap: var(--r-3);
  padding: var(--r-3);
  background: var(--boja-bela);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-l);
}

.ozzy-panel__preporuka {
  background: var(--boja-krem-050);
  border: var(--ivica-debela) dashed var(--boja-narandzasta-cta);
}

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

.ozzy-panel__telo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--r-2);
  min-width: 0;
  align-items: flex-start;
}

.ozzy-panel__red {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r-2);
  width: 100%;
}

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

.ozzy-panel__iznos,
.ozzy-panel__broj {
  font-family: var(--font-naslov);
  font-weight: var(--tezina-crna);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

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

.ozzy-panel__opis--jako {
  color: var(--boja-plum-900);
  font-weight: var(--tezina-debela);
}

.ozzy-panel__oznaka {
  margin: 0;
  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;
}

.ozzy-panel__oznaka-pola {
  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-brojac {
  display: flex;
  align-items: center;
  gap: var(--r-2);
}

.ozzy-brojac__dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--boja-bela);
  border: var(--ivica-tanka) solid var(--boja-ivica);
  border-radius: var(--radijus-pilula);
  color: var(--boja-plum-900);
  font-size: var(--slova-m);
  line-height: 1;
  cursor: pointer;
}

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

.ozzy-brojac__broj {
  min-width: 20px;
  font-family: var(--font-naslov);
  font-weight: var(--tezina-crna);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.ozzy-brojac__jedinica {
  color: var(--boja-plum-500);
  font-size: var(--slova-xs);
}

.ozzy-panel__ukloni {
  padding: var(--r-1);
  background: none;
  border: none;
  color: var(--boja-plum-500);
  cursor: pointer;
}

.ozzy-panel__ukloni:hover,
.ozzy-panel__ukloni:focus {
  background: none;
  color: var(--boja-narandzasta-cta);
}

.ozzy-panel__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);
}

.ozzy-panel__usteda {
  color: var(--boja-narandzasta-cta);
  font-size: var(--slova-xs);
  font-weight: var(--tezina-debela);
  white-space: nowrap;
}

.ozzy-oluk {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--visina-trake-popusta);
  background: var(--boja-plum-100);
  border-radius: var(--radijus-pilula);
}

.ozzy-oluk__punjenje {
  height: 100%;
  background: var(--boja-narandzasta-cta);
  border-radius: var(--radijus-pilula);
  transition: width 0.45s var(--krivulja);
}

.ozzy-oluk__badz {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--r-1) var(--r-3);
  background: var(--boja-narandzasta-cta);
  border-radius: var(--radijus-pilula);
  box-shadow: var(--senka-2);
  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;
  white-space: nowrap;
}

.ozzy-panel__kupon {
  display: flex;
  flex-direction: column;
  gap: var(--r-2);
  padding-top: var(--r-4);
  border-top: var(--ivica-tanka) solid var(--boja-ivica);
}

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

.ozzy-panel__kuponi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: var(--tezina-debela);
}

.ozzy-panel__kuponi li {
  display: inline-flex;
  align-items: center;
  gap: var(--r-2);
  padding: var(--r-1) var(--r-3);
  background: var(--boja-krem-050);
  border-radius: var(--radijus-pilula);
  font-size: var(--slova-xs);
}

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

.ozzy-panel__greska {
  margin: 0;
  color: var(--boja-narandzasta-cta);
  font-size: var(--slova-xs);
  font-weight: var(--tezina-debela);
}

.ozzy-panel__zbir {
  display: flex;
  flex-direction: column;
  gap: var(--r-2);
  padding: var(--r-4);
  background: var(--boja-krem-050);
  border-radius: var(--radijus-l);
  font-size: var(--slova-m);
  font-weight: var(--tezina-srednja);
}

.ozzy-panel__red--popust {
  color: var(--boja-narandzasta-cta);
  font-weight: var(--tezina-debela);
}

.ozzy-panel__red--ukupno {
  padding-top: var(--r-2);
  border-top: var(--ivica-tanka) solid var(--boja-ivica);
  font-family: var(--font-naslov);
  font-size: var(--slova-xl);
  font-weight: var(--tezina-crna);
  text-transform: uppercase;
}

.ozzy-panel__tvrdnje {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--r-3);
  margin: var(--r-1) 0 0;
  padding: 0;
  list-style: none;
  color: var(--boja-plum-700);
  font-size: var(--slova-nano);
  font-weight: var(--tezina-poludebela);
  text-align: center;
}

.ozzy-panel__tvrdnje li {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--r-1);
  white-space: nowrap;
}

.ozzy-tvrdnja__ikona {
  flex: none;
  width: var(--r-3);
  height: var(--r-3);
  color: var(--boja-narandzasta-cta);
}

/* SVG zvezdica nema sopstvenu sirinu, pa se odnos strana zadaje ovde
   (viewBox 90x18). Bez toga stavka u redu ostane uska i tekst izadje iz nje. */
.ozzy-tvrdnja__zvezde {
  flex: none;
  width: calc(var(--r-3) * 5);
  height: var(--r-3);
  aspect-ratio: 5 / 1;
}

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

.ozzy-panel .ozzy-dugme,
.ozzy-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--dodir-min);
  padding: var(--r-3) var(--r-5);
  background: var(--boja-narandzasta-cta);
  border: var(--ivica-debela) solid var(--boja-narandzasta-cta);
  border-radius: var(--radijus-pilula);
  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;
}

.ozzy-panel .ozzy-dugme:hover,
.ozzy-dugme:hover {
  background: var(--boja-narandzasta-cta-hover);
  border-color: var(--boja-narandzasta-cta-hover);
  color: var(--boja-bela);
}

.ozzy-panel__dugmad,
.ozzy-preporuka__dugmad {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--r-2);
  width: 100%;
}

/* Dugmad za izbor pakovanja dele red, pa su sitnija i ne prelamaju tekst.
   Na 11 px se natpis jedva video, pa je podignut na 12 px — i dalje staju dva
   dugmeta u red, i u panelu i u preporuci na naplati. */
.ozzy-panel__dugmad .ozzy-dugme--malo,
.ozzy-preporuka__dugmad .ozzy-dugme--malo {
  flex: 1 1 0;
  min-width: 0;
  min-height: 34px;
  padding: var(--r-1) var(--r-2);
  font-size: var(--slova-xs);
  letter-spacing: 0;
  white-space: nowrap;
}

.ozzy-dugme--malo {
  min-height: 38px;
  padding: var(--r-2) var(--r-4);
  font-size: var(--slova-xs);
}

.ozzy-dugme--tamno {
  flex: none;
  background: var(--boja-plum-900);
  border-color: var(--boja-plum-900);
}

.ozzy-dugme--tamno:hover {
  background: var(--boja-plum-700);
  border-color: var(--boja-plum-700);
}

.ozzy-dugme--siroko {
  width: 100%;
}

.ozzy-badz-korpa {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 18px;
  padding: 0 4px;
  background: var(--boja-narandzasta-cta);
  border-radius: var(--radijus-pilula);
  color: var(--boja-bela);
  font-family: var(--font-naslov);
  font-size: 10px;
  font-weight: var(--tezina-crna);
  line-height: 18px;
  text-align: center;
}

.ast-site-header-cart .cart-container {
  position: relative;
}

body.ozzy-panel-otvoren {
  overflow: hidden;
}

@media (max-width: 599px) {
  .ozzy-panel {
    width: 100vw;
  }

  /* Tvrdnje na uskom ekranu ne staju u jedan red, pa se prelamaju. */
  .ozzy-panel__tvrdnje {
    flex-wrap: wrap;
    gap: var(--r-1) var(--r-2);
  }

  /* Na uskom ekranu natpis paketa mora da se prelomi da ne izadje iz dugmeta. */
  .ozzy-panel__dugmad .ozzy-dugme--malo,
  .ozzy-preporuka__dugmad .ozzy-dugme--malo {
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }

  .ozzy-panel__sadrzaj {
    padding: var(--r-3) var(--r-4) var(--r-5);
  }
}

/* --------------------------------------------------------------------------
   Stranica /korpa/ prikazuje isti sadrzaj kao klizni panel, samo u kartici
   usred stranice. Zato preuzima iste klase i menja samo raspored.
   -------------------------------------------------------------------------- */

.ozzy-korpa-stranica {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  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);
  font-family: var(--font-telo);
}

/* Astra ogranicava sirinu svakog deteta sadrzaja, pa kartica mora istom snagom. */
.entry-content[data-ast-blocks-layout] > .ozzy-korpa-stranica {
  max-width: 560px;
}

/* Naslov stranice bi se duplirao sa naslovom u kartici. */
.page-id-8 .entry-header {
  display: none;
}

.ozzy-korpa-stranica .ozzy-panel__sadrzaj {
  flex: 0 1 auto;
  overflow: visible;
}

@media (max-width: 599px) {
  .ozzy-korpa-stranica {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Natpisi na dugmadima (20. 9. 2026). Bili su 13 px i jedva su se videli, na
   telefonu i na desktopu. Pravila stoje ovde, a ne u style.css, jer se ova
   datoteka ucitava posle nje i osnovno .ozzy-panel .ozzy-dugme pravilo je
   odavde, pa bi iz style.css bilo nadjacano. */
.ozzy-panel .ozzy-dugme,
.ozzy-dugme,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-size: 0.875rem;
}

/* Poslednje dugme u toku kupovine nosi najvise tezine. */
.woocommerce #place_order {
  font-size: 1rem;
}

/* Glavni CTA korpe stoji u uzoj koloni zbira, pa uz veca slova ide i uzi
   razmak sa strane da natpis ostane u jednom redu. Dugme je ionako preko
   cele sirine, pa se razmak i ne vidi. */
.ozzy-panel .ozzy-dugme--siroko,
.ozzy-dugme--siroko {
  padding-inline-start: var(--r-2);
  padding-inline-end: var(--r-2);
  font-size: clamp(0.8125rem, 4vw, 1rem);
  letter-spacing: 0.02em;
}

@media (max-width: 599px) {
  /* Zbir je uza kolona od ostatka panela; na telefonu mu je razmak sa strane
     smanjen da bi natpis glavnog dugmeta stao u jedan red. */
  .ozzy-panel__zbir {
    padding: var(--r-3);
  }

  /* U preporuci panela slika stoji pored teksta, pa za dva dugmeta u redu
     ostane manje od 80 px i natpis se lomi na tri reda. Na telefonu zato idu
     jedno ispod drugog, preko cele sirine kartice. */
  .ozzy-panel__dugmad {
    flex-wrap: wrap;
  }

  .ozzy-panel__dugmad .ozzy-dugme--malo {
    flex: 1 1 100%;
  }
}

/* Telo stavke mora da moze da se skupi: flex stavke imaju min-width: auto,
   pa je iznos na uskim ekranima izlazio iz reda. Naziv se NE lomi usred reci
   (overflow-wrap: anywhere je pravio ENERGE/TSKI); umesto toga na vrlo uskim
   ekranima iznos prelazi u svoj red. */
.ozzy-panel__telo {
  min-width: 0;
}

/* Na telefonu naziv proizvoda i iznos ne staju u isti red (posle slike od
   64 px ostane oko 160 px), pa je iznos ranije bio odsecen. Sada prelazi u
   svoj red, i dalje poravnat desno. */
@media (max-width: 599px) {
  .ozzy-panel__stavka .ozzy-panel__telo > .ozzy-panel__red:first-child {
    flex-wrap: wrap;
  }

  .ozzy-panel__stavka .ozzy-panel__iznos {
    margin-inline-start: auto;
  }

  /* Brojac paketa i kanta dele isti uzak red, pa im je razmak sabijen da kanta
     ne bi bila odsecena uz ivicu kartice. */
  .ozzy-panel__stavka .ozzy-brojac {
    gap: var(--r-1);
  }
}

/* Vrlo uski telefoni: u redu stavke ostane manje od 130 px za brojac i kantu,
   pa se rec paket/paketa izostavlja (broj paketa je i dalje vidljiv), a slika
   i dugmici brojaca se smanjuju. */
@media (max-width: 374px) {
  .ozzy-panel__stavka .ozzy-brojac__jedinica {
    display: none;
  }

  .ozzy-panel__stavka .ozzy-brojac__dugme {
    min-width: 26px;
    width: 26px;
    height: 26px;
  }

  .ozzy-panel__stavka > .ozzy-panel__slika {
    width: 56px;
    height: 56px;
  }

  /* Red UKUPNO je verzalom na 20 px, pa iznos izlazi iz kartice. */
  .ozzy-panel__red--ukupno {
    font-size: var(--slova-l);
  }
}


/* Astrina fioka korpe i padajuca mini-korpa u zaglavlju se nikad ne prikazuju:
   jedini prikaz korpe je OZZY panel (i ista stvar na /korpa/ preko [ozzy_korpa]). */
.astra-cart-drawer,
.astra-mobile-cart-overlay,
.ast-site-header-cart .ast-site-header-cart-data,
.ast-site-header-cart .widget_shopping_cart {
  display: none !important;
}

/* Pretplata jos nije pokrenuta: dugme u preporuci korpe i naplate izgleda kao
   dugme-uskoro na stranici proizvoda (krem, bez hover efekta), da se ne cita
   kao kupovina. Klik i dalje samo otkriva poruku. Brise se kad pretplata krene. */
.ozzy-dugme.ozzy-dugme--malo[data-ozzy-preporuka="pretplata"],
.ozzy-dugme.ozzy-dugme--malo[data-ozzy-preporuka="pretplata"]:hover,
.ozzy-dugme.ozzy-dugme--malo[data-ozzy-preporuka="pretplata"]:focus-visible {
  background: var(--boja-krem-300);
  border-color: var(--boja-krem-300);
  color: var(--boja-plum-900);
  transform: none;
  cursor: default;
}