/*
Theme Name: GlycoAla Hello Child
Theme URI: https://glycoala.rs
Template: hello-elementor
Author: Asmir
Description: Hello Elementor child tema za GlycoAla — top bar, header, footer i osnovna tipografija/paleta su kodirani ovde; slider i sadržaj stranica se grade preko Elementora (radi i bez Elementor Pro).
Version: 1.32.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: glycoala
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
  --glycoala-parchment: #EDE7D9;
  --glycoala-parchment-card: #F7F3E8;
  --glycoala-moss: #26301F;

  /* Akcent = electric green.
     --glycoala-electric  = puna, "neonska" nijansa — SAMO za dekoraciju (borderi, tačke,
                            pozadine bedževa, glow) i za tamne/ljubičaste pozadine.
     --glycoala-clay      = boja TEKSTA i linkova. Zadaje se zasebno (nije izvedena
                            iz akcenta): potamnjivanje čuva nijansu, pa bi jarka
                            žuto-zelena uvek završila kao maslinasta.
     --glycoala-clay-dark = još tamnija varijanta za cene i hover stanja.
     --glycoala-electric-soft = prozirna podloga, izvedena iz boje TEKSTA a ne iz
                            akcenta — prozirna lime na kremastoj daje kaki ton.
     Sve tri se u runtime-u prepisuju iz Izgled → GlycoAla Postavke → Akcentna boja
     (inc/theme-options.php), pa se boja menja na jednom mestu bez diranja CSS-a. */
  --glycoala-electric: #B2FF33;
  --glycoala-electric-soft: rgba(39, 108, 42, 0.10);
  --glycoala-clay: #276C2A;
  --glycoala-clay-dark: #1E5420;
  --glycoala-sage: #7C8A6C;
  --glycoala-ink: #201C16;
  --glycoala-line: rgba(32, 28, 22, 0.16);

  --glycoala-font-display: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --glycoala-font-body: 'Zilla Slab', Georgia, 'Times New Roman', serif;

  --glycoala-container: 1240px;
  --glycoala-gutter: clamp(20px, 4vw, 64px);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  background: var(--glycoala-parchment);
  color: var(--glycoala-ink);
  font-family: var(--glycoala-font-body);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

img{ max-width: 100%; height: auto; display: block; }

a{ color: inherit; text-decoration: none; }

.glycoala-container{
  max-width: var(--glycoala-container);
  margin: 0 auto;
  padding-left: var(--glycoala-gutter);
  padding-right: var(--glycoala-gutter);
}

h1, h2, h3, h4{
  font-family: var(--glycoala-font-display);
  font-weight: 500;
  line-height: 1.08;
  margin: 0 0 0.4em;
  letter-spacing: -0.01em;
  color: var(--glycoala-moss);
  /* Bodoni Moda nosi optičku osu: na malim veličinama browser sam podebljava
     tanke poteze da ne iščeznu. Podrazumevano je "auto", ali pišemo izričito
     da nam neki reset ili plugin to ne ugasi. */
  font-optical-sizing: auto;
}

h1{ font-size: clamp(2.6rem, 6vw, 5.4rem); font-weight: 460; }
h2{ font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
h3{ font-size: clamp(1.3rem, 2vw, 1.6rem); }

p{ max-width: 62ch; }

/* U Elementoru širinu teksta određuje sama kolona/sekcija, pa gornje globalno
   ograničenje čitljivosti tu ne sme da važi — inače se pasus steže na ~pola
   kontejnera, a centriran tekst deluje pomeren ulevo (kutija je uska i nije
   centrirana, samo je tekst u njoj centriran). */
.elementor-widget-text-editor p,
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol,
.elementor-widget-heading p,
.elementor-widget-icon-list p{
  max-width: none;
}

/* Tekst samo za čitače ekrana — WordPress-ova standardna klasa, koju Hello
   Elementor ne definiše, a tema je koristi za labele formi. */
.screen-reader-text{
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus{
  background-color: var(--glycoala-parchment-card);
  clip-path: none;
  color: var(--glycoala-ink);
  display: block;
  font-size: 14px;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--glycoala-clay);
  outline-offset: 3px;
}

/* ==========================================================================
   Top bar — kontakt info + social. Koristi isti brand gradijent kao header
   (podešava se preko Customizer-a), sa linijom razdvajanja ispod.
   ========================================================================== */
.glycoala-topbar{
  background: var(--glycoala-brand-bg, var(--glycoala-moss));
  color: var(--glycoala-parchment-card);
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.glycoala-topbar__bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  /* Namerno dugi zapis: ovaj element nosi i .glycoala-container, a skraćeni
     "padding: 9px 0" bi mu poništio bočni razmak i zalepio sadržaj uz ivicu */
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 12px;
}

.glycoala-topbar__contact,
.glycoala-topbar__social{
  list-style: none;
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
}

.glycoala-topbar__contact li,
.glycoala-topbar__social li{ display: flex; align-items: center; }

.glycoala-topbar__contact a,
.glycoala-topbar__social a,
.glycoala-topbar__contact li{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--glycoala-parchment-card);
  opacity: 0.85;
}

.glycoala-topbar__contact svg,
.glycoala-topbar__social svg{ flex-shrink: 0; opacity: 0.9; }

.glycoala-topbar__social a{ gap: 0; }

.glycoala-topbar__contact a:hover,
.glycoala-topbar__social a:hover{ opacity: 1; }

.glycoala-topbar__right{
  display: flex;
  align-items: center;
  gap: 20px;
}

/* --- Jezički switcher (Polylang) --- */
.glycoala-lang-switch{
  list-style: none;
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.glycoala-lang-switch a{
  color: var(--glycoala-parchment-card);
  opacity: 0.6;
}

.glycoala-lang-switch a:hover,
.glycoala-lang-switch a.is-active{ opacity: 1; }

.glycoala-lang-switch li:not(:last-child)::after{
  content: "/";
  margin-left: 10px;
  opacity: 0.4;
}

.glycoala-lang-switch li{ display: flex; }

@media (max-width: 700px){
  .glycoala-topbar__contact{ display: none; }
}

/* ==========================================================================
   Site header — logo + main nav. Deli brand gradijent sa top barom
   (boje dolaze iz Customizer-a preko --glycoala-brand-bg), sa suptilnom
   linijom razdvajanja od top bara iznad.
   ========================================================================== */
.glycoala-header{
  background: var(--glycoala-brand-bg, var(--glycoala-moss));
  border-top: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}

.glycoala-header__bar{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.glycoala-logo{
  font-family: var(--glycoala-font-display);
  font-size: 24px;
  letter-spacing: 0.01em;
  color: var(--glycoala-parchment-card);
}

.glycoala-logo__img{ max-height: 42px; width: auto; display: block; }

.glycoala-header__nav ul{
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 34px;
  margin: 0;
  padding: 0;
}

.glycoala-header__nav a{
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, opacity .2s ease;
  color: var(--glycoala-parchment-card);
  opacity: 0.85;
}

.glycoala-header__nav a:hover{ border-color: var(--glycoala-parchment-card); opacity: 1; }

.glycoala-header__actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--glycoala-parchment-card);
}

.glycoala-header__partner-btn{
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border: 1px solid var(--glycoala-parchment-card);
  border-radius: 999px;
  color: var(--glycoala-parchment-card);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}

.glycoala-header__partner-btn:hover{
  background: var(--glycoala-parchment-card);
  color: var(--glycoala-moss);
}

.glycoala-header__cart{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--glycoala-parchment-card);
  white-space: nowrap;
}

.glycoala-header__cart svg{ flex-shrink: 0; }

@media (max-width: 1024px){
  .glycoala-header__partner-btn{ display: none; }
}

.glycoala-cart-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--glycoala-clay);
  color: var(--glycoala-parchment-card);
  font-size: 11px;
  margin-left: 6px;
}

.glycoala-menu-toggle{
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,.35);
  color: var(--glycoala-parchment-card);
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

@media (max-width: 860px){
  .glycoala-header__bar{ grid-template-columns: auto 1fr auto; }
  .glycoala-header__nav{ display: none; }
  .glycoala-menu-toggle{ display: inline-block; }
}

/* ==========================================================================
   Hero — full-bleed image with a stacked word-ladder headline
   ========================================================================== */
.glycoala-hero{
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.glycoala-hero__media{
  position: absolute;
  inset: 0;
}

.glycoala-hero__media img{ width: 100%; height: 100%; object-fit: cover; }

.glycoala-hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(38,48,31,0.15) 0%, rgba(38,48,31,0.55) 85%);
}

.glycoala-hero__inner{
  position: relative;
  z-index: 2;
  padding-bottom: clamp(50px, 7vw, 90px);
  width: 100%;
}

.glycoala-hero__ladder{
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 30px;
  line-height: 0.92;
}

.glycoala-hero__ladder span{
  display: block;
  font-family: var(--glycoala-font-display);
  font-weight: 460;
  font-size: clamp(2.6rem, 8vw, 6.4rem);
  color: var(--glycoala-parchment-card);
}

/* Istaknuta reč u heroju stoji na tamnoj pozadini (video + overlay), pa ide
   jarka akcentna boja: zelena za tekst je tu na 1.78:1 i praktično nečitljiva,
   dok lime ima 9.42:1. */
.glycoala-hero__ladder .is-accent{ font-style: italic; color: var(--glycoala-electric); }

.glycoala-hero__eyebrow{
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--glycoala-sage);
  margin-bottom: 18px;
  text-transform: uppercase;
}

.glycoala-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  background: var(--glycoala-moss);
  color: var(--glycoala-parchment-card);
  font-size: 13px;
  letter-spacing: 0.06em;
  border: 1px solid var(--glycoala-moss);
  transition: background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.glycoala-btn:hover{ background: transparent; color: var(--glycoala-moss); border-color: currentColor; }

.glycoala-hero__cta{
  background: var(--glycoala-parchment-card);
  color: var(--glycoala-moss);
  border-color: var(--glycoala-parchment-card);
}

.glycoala-hero__cta:hover{ background: transparent; color: var(--glycoala-parchment-card); }

.glycoala-btn--outline{
  background: transparent;
  color: var(--glycoala-moss);
}

.glycoala-btn--outline:hover{ background: var(--glycoala-moss); color: var(--glycoala-parchment-card); }

/* ==========================================================================
   Seasonal gallery ("Skincare For Autumn")
   ========================================================================== */
.glycoala-seasonal{
  padding: clamp(60px, 9vw, 120px) 0 clamp(40px, 6vw, 70px);
}

.glycoala-seasonal__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 36px 0 30px;
}

.glycoala-seasonal__img{
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--glycoala-parchment-card);
}

.glycoala-seasonal__img img{ width: 100%; height: 100%; object-fit: cover; }

.glycoala-seasonal__note{
  max-width: 68ch;
  font-family: var(--glycoala-font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--glycoala-moss);
}

.glycoala-seasonal__note em{ color: var(--glycoala-clay); font-style: italic; }

@media (max-width: 760px){
  .glycoala-seasonal__grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Essentials — category strip + product links
   ========================================================================== */
.glycoala-essentials{
  padding: clamp(20px, 4vw, 40px) 0 clamp(60px, 9vw, 110px);
}

.glycoala-essentials__imgs{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 40px;
}

.glycoala-essentials__img{ aspect-ratio: 1/1; overflow: hidden; background: var(--glycoala-parchment-card); }
.glycoala-essentials__img img{ width: 100%; height: 100%; object-fit: cover; }

.glycoala-essentials__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.glycoala-essentials__list a{
  font-family: var(--glycoala-font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--glycoala-moss);
  border-bottom: 1px solid transparent;
}

.glycoala-essentials__list a:hover{ border-color: var(--glycoala-clay); color: var(--glycoala-clay); }

@media (max-width: 760px){
  .glycoala-essentials__imgs{ grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Ingredients — sequential list (category / origin / name), matches source
   ========================================================================== */
.glycoala-ingredients{
  padding: clamp(50px, 8vw, 100px) 0;
  border-top: 1px solid var(--glycoala-line);
}

.glycoala-ingredients__intro{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--glycoala-gutter);
  margin-bottom: 50px;
}

.glycoala-ingredients__list{ border-top: 1px solid var(--glycoala-line); }

.glycoala-ingredients__row{
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1.6fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--glycoala-line);
  font-size: 14px;
}

.glycoala-ingredients__row--head{
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--glycoala-sage);
}

.glycoala-ingredients__row span:first-child{ font-family: var(--glycoala-font-display); color: var(--glycoala-moss); }
.glycoala-ingredients__row span:nth-child(2){ opacity: 0.65; }

@media (max-width: 760px){
  .glycoala-ingredients__intro{ grid-template-columns: 1fr; }
  .glycoala-ingredients__row{ grid-template-columns: 1fr 1fr; font-size: 13px; }
  .glycoala-ingredients__row span:nth-child(3){ grid-column: 1 / -1; opacity: 0.7; }
}

/* ==========================================================================
   Ingredient / specimen grid (kept for other pages/templates that use it)
   ========================================================================== */
.glycoala-specimens{
  padding: clamp(50px, 8vw, 100px) 0;
  border-top: 1px solid var(--glycoala-line);
}

.glycoala-specimens__head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.glycoala-specimens__list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--glycoala-line);
}

.glycoala-specimen{
  padding: 22px 18px;
  border-bottom: 1px solid var(--glycoala-line);
  border-right: 1px solid var(--glycoala-line);
}

.glycoala-specimen:nth-child(3n){ border-right: none; }

.glycoala-specimen__index{
  font-size: 12px;
  color: var(--glycoala-sage);
  margin-bottom: 8px;
}

.glycoala-specimen__name{
  font-family: var(--glycoala-font-display);
  font-size: 17px;
  color: var(--glycoala-moss);
  margin-bottom: 4px;
}

.glycoala-specimen__origin{ font-size: 13px; color: var(--glycoala-ink); opacity: 0.65; }

@media (max-width: 760px){
  .glycoala-specimens__list{ grid-template-columns: repeat(2, 1fr); }
  .glycoala-specimen:nth-child(3n){ border-right: 1px solid var(--glycoala-line); }
  .glycoala-specimen:nth-child(2n){ border-right: none; }
}

/* ==========================================================================
   Product cards (WooCommerce)
   ========================================================================== */
ul.products{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--glycoala-gutter);
  list-style: none;
  padding: 0;
  margin: 0 0 0 !important;
}

ul.products li.product{
  border: 1px solid var(--glycoala-line);
  padding: 0 0 20px;
  background: var(--glycoala-parchment-card);
}

ul.products li.product a img{
  aspect-ratio: 4/5;
  object-fit: cover;
  margin-bottom: 16px;
}

ul.products li.product .woocommerce-loop-product__title{
  font-family: var(--glycoala-font-display);
  font-size: 18px;
  padding: 0 18px;
  color: var(--glycoala-moss);
}

ul.products li.product .price{
  padding: 0 18px;
  color: var(--glycoala-clay-dark);
  font-size: 15px;
}

ul.products li.product .button{
  margin: 14px 18px 0;
  display: inline-block;
  border: 1px solid var(--glycoala-moss);
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: 0.05em;
}

@media (max-width: 900px){
  ul.products{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  ul.products{ grid-template-columns: 1fr; }
}

.single-product .summary .price{ color: var(--glycoala-clay-dark); font-size: 22px; }
.single-product div.product .woocommerce-tabs{ border-top: 1px solid var(--glycoala-line); margin-top: 40px; padding-top: 30px; }

/* ==========================================================================
   Footer — logo, nav, newsletter, social, matching the reference site
   ========================================================================== */
.glycoala-footer{
  background: var(--glycoala-brand-bg, var(--glycoala-moss));
  color: var(--glycoala-parchment-card);
}

/* --- FOOTER TOP --- */
.glycoala-footer-top{
  padding: clamp(60px, 9vw, 100px) 0 50px;
  text-align: center;
}

.glycoala-footer__logo{
  display: inline-block;
  color: var(--glycoala-parchment-card);
  font-size: 26px;
  margin-bottom: 30px;
}

.glycoala-footer__logo-img{ margin-bottom: 30px; }
.glycoala-footer__logo-img img{ max-height: 54px; width: auto; height: auto; }

/* --- NEWSLETTER (footer + popup + inline shortcode) --- */
.glycoala-newsletter{
  max-width: 460px;
  margin: 0 auto;
}

.glycoala-newsletter__title{
  font-family: var(--glycoala-font-body);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.glycoala-newsletter__text{
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: none;
  opacity: 0.8;
}

.glycoala-newsletter__form{
  display: flex;
  gap: 12px;
  align-items: center;
}

.glycoala-newsletter__form input[type="email"]{
  flex: 1;
  min-width: 0;
  font-family: var(--glycoala-font-body);
  font-size: 15px;
}

/* Honeypot: nevidljiv ljudima, dostupan botovima — bez display:none, jer ga
   neki boti prepoznaju i preskaču. */
.glycoala-newsletter__hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.glycoala-newsletter__msg{
  font-size: 14px;
  margin-top: 14px;
  font-weight: 500;
}

.glycoala-newsletter__consent{
  font-size: 11.5px;
  line-height: 1.5;
  margin: 12px 0 0;
  max-width: none;
  opacity: 0.6;
}

/* Footer varijanta — na ljubičastoj pozadini */
.glycoala-newsletter--footer{ position: relative; }
.glycoala-newsletter--footer .glycoala-newsletter__title{ color: var(--glycoala-parchment-card); }
.glycoala-newsletter--footer .glycoala-newsletter__text,
.glycoala-newsletter--footer .glycoala-newsletter__consent{ color: var(--glycoala-parchment-card); }

.glycoala-newsletter--footer .glycoala-newsletter__form{
  border-bottom: 1px solid rgba(247,243,232,0.35);
  padding-bottom: 10px;
  transition: border-color .2s ease;
}

.glycoala-newsletter--footer .glycoala-newsletter__form:focus-within{
  border-bottom-color: var(--glycoala-electric);
}

.glycoala-newsletter--footer input[type="email"]{
  background: transparent;
  border: none;
  color: var(--glycoala-parchment-card);
  padding: 6px 0;
}

.glycoala-newsletter--footer input[type="email"]::placeholder{ color: rgba(247,243,232,0.5); }

.glycoala-newsletter--footer .glycoala-newsletter__btn{
  background: transparent;
  border: none;
  padding: 6px 0;
  color: var(--glycoala-electric);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.glycoala-newsletter--footer .glycoala-newsletter__btn:hover{ text-decoration: underline; }
.glycoala-newsletter--footer .glycoala-newsletter__btn:disabled{ opacity: .5; cursor: default; text-decoration: none; }

/* Na tamnoj pozadini puna electric nijansa ima kontrast 5.7:1 — tu i pripada. */
.glycoala-newsletter--footer .glycoala-newsletter__msg{ color: var(--glycoala-electric); }
.glycoala-newsletter--footer .glycoala-newsletter__msg.is-error{ color: #FFB4A2; }

/* --- FOOTER WIDGETS (3-4 opcione zone, popunjava se preko Izgled → Widgeti) --- */
.glycoala-footer-widgets{
  border-top: 1px solid rgba(247,243,232,0.15);
  padding: 50px 0;
}

.glycoala-footer-widgets__grid{
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  text-align: left;
}

.glycoala-footer-widgets--3 .glycoala-footer-widgets__grid{ grid-template-columns: repeat(3, 1fr); }
.glycoala-footer-widgets--4 .glycoala-footer-widgets__grid{ grid-template-columns: repeat(4, 1fr); }
.glycoala-footer-widgets--2 .glycoala-footer-widgets__grid{ grid-template-columns: repeat(2, 1fr); }
.glycoala-footer-widgets--1 .glycoala-footer-widgets__grid{ grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; text-align: center; }

.glycoala-footer-widget__title{
  font-family: var(--glycoala-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--glycoala-parchment-card);
  margin: 0 0 16px;
}

.glycoala-footer-widget{ font-size: 14px; line-height: 1.7; color: rgba(247,243,232,.85); }
.glycoala-footer-widget a{ color: var(--glycoala-parchment-card); opacity: 0.85; text-decoration: none; }
.glycoala-footer-widget a:hover{ opacity: 1; }
.glycoala-footer-widget ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

@media (max-width: 860px){
  .glycoala-footer-widgets--3 .glycoala-footer-widgets__grid,
  .glycoala-footer-widgets--4 .glycoala-footer-widgets__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .glycoala-footer-widgets__grid{ grid-template-columns: 1fr !important; text-align: center; }
}

/* --- FOOTER BOTTOM: copyright levo, social desno --- */
.glycoala-footer-bottom{
  border-top: 1px solid rgba(247,243,232,0.15);
  padding: 24px 0;
}

.glycoala-footer-bottom__row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.glycoala-footer-bottom__copy{
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.65;
}

.glycoala-footer-bottom__social{
  display: flex;
  align-items: center;
  gap: 16px;
}

.glycoala-footer-bottom__social a{ color: var(--glycoala-parchment-card); opacity: 0.85; }
.glycoala-footer-bottom__social a:hover{ opacity: 1; }

@media (max-width: 560px){
  .glycoala-footer-bottom__row{ flex-direction: column; text-align: center; }
}

/* Elementor edit-mode niceties */
.elementor-editor-active .glycoala-header,
.elementor-editor-active .glycoala-footer{ position: relative; }


/* ==========================================================================
   Hero — jedan samostalan blok (HTML widget u Elementoru sadrži samo markup,
   sav CSS i animacije žive ovde u temi). Reči ulaze zdesna nalevo, redom:
   eyebrow (u jednom redu, reč po reč) → naslov (red po red) → pasus → dugme.
   ========================================================================== */
.glycoala-hero-block{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

@keyframes glycoalaSlideRTL{
  from{ opacity: 0; transform: translateX(70px); }
  to{ opacity: 1; transform: translateX(0); }
}

@keyframes glycoalaFadeUp{
  from{ opacity: 0; transform: translateY(20px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* 1) Eyebrow — jedan red, reč po reč zdesna nalevo */
.glycoala-eyebrow-line{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em;
  margin: 0 0 22px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--glycoala-parchment-card);
}

.glycoala-eyebrow-line span{
  display: inline-block;
  opacity: 0;
  animation: glycoalaSlideRTL 550ms cubic-bezier(.19,1,.22,1) forwards;
}

.glycoala-eyebrow-line span:nth-child(1){ animation-delay: 0ms; }
.glycoala-eyebrow-line span:nth-child(2){ animation-delay: 90ms; }
.glycoala-eyebrow-line span:nth-child(3){ animation-delay: 180ms; }
.glycoala-eyebrow-line span:nth-child(4){ animation-delay: 270ms; }
.glycoala-eyebrow-line span:nth-child(5){ animation-delay: 360ms; }

/* 2) Naslov — red po red, reč zdesna nalevo, veliki i jasan */
.glycoala-ladder{ margin: 0 0 26px; }

.glycoala-ladder__line{
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.glycoala-ladder__line span{
  display: block;
  opacity: 0;
  font-family: var(--glycoala-font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 6.2vw, 4.8rem);
  /* Prored 1.02 je bio pretesan: maska (overflow:hidden na roditelju) secla je
     repove slova j, đ i ž. Prored + donji padding daju im prostor, a bočna
     maska za animaciju i dalje radi jer je kretanje horizontalno. */
  line-height: 1.18;
  padding-bottom: 0.1em;
  letter-spacing: -0.01em;
  color: var(--glycoala-parchment-card);
  text-shadow: 0 2px 24px rgba(0,0,0,.18);
  animation: glycoalaSlideRTL 700ms cubic-bezier(.19,1,.22,1) forwards;
}

.glycoala-ladder__line span.is-accent{ font-style: italic; color: var(--glycoala-electric); }

.glycoala-ladder__line:nth-child(1) span{ animation-delay: 900ms; }
.glycoala-ladder__line:nth-child(2) span{ animation-delay: 1050ms; }
.glycoala-ladder__line:nth-child(3) span{ animation-delay: 1200ms; }

/* 3) Pasus — lepši, italic display font, jasnija slova */
.glycoala-hero__lead{
  opacity: 0;
  max-width: 56ch;
  margin: 0 auto 34px;
  font-family: var(--glycoala-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.6;
  color: var(--glycoala-parchment-card);
  text-shadow: 0 1px 12px rgba(0,0,0,.15);
  animation: glycoalaFadeUp 700ms ease-out forwards;
  animation-delay: 1900ms;
}

/* 4) Dugme — čist <a> tag, uvek centriran, uvek ovalan */
.glycoala-hero__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  padding: 17px 40px;
  background: var(--glycoala-parchment-card);
  color: var(--glycoala-moss);
  border: 1px solid var(--glycoala-parchment-card);
  border-radius: 999px;
  font-family: var(--glycoala-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(38,48,31,.25);
  transition: background .2s ease, color .2s ease, transform .2s ease;
  animation: glycoalaFadeUp 700ms ease-out forwards;
  animation-delay: 2350ms;
}

.glycoala-hero__cta:hover{
  background: var(--glycoala-moss);
  color: var(--glycoala-parchment-card);
  transform: translateY(-2px) scale(1.03);
}

/* ==========================================================================
   Hero — responzivnost
   ========================================================================== */
@media (max-width: 860px){
  .glycoala-eyebrow-line{ font-size: 13px; gap: 0.3em; margin-bottom: 16px; }
  .glycoala-ladder{ margin-bottom: 18px; }
  .glycoala-ladder__line span{ font-size: clamp(2rem, 7.5vw, 3.4rem); }
  .glycoala-hero__lead{ font-size: 1rem; margin-bottom: 26px; }
  .glycoala-hero__cta{ padding: 15px 32px; font-size: 12px; }
}

@media (max-width: 480px){
  .glycoala-hero-block{ padding: 0 18px; }
  .glycoala-eyebrow-line{ font-size: 11px; letter-spacing: 0.12em; }
  .glycoala-ladder__line span{ font-size: clamp(1.7rem, 8.5vw, 2.4rem); }
  .glycoala-hero__lead{ font-size: 0.92rem; line-height: 1.5; }
  .glycoala-hero__cta{ width: 100%; padding: 15px 20px; }
}

@media (prefers-reduced-motion: reduce){
  .glycoala-eyebrow-line span,
  .glycoala-ladder__line span,
  .glycoala-hero__lead,
  .glycoala-hero__cta{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   "O nama" — jedan samostalan blok (HTML widget), slike + tekst kolona.
   Slike koriste CSS scroll-driven parallax gde je podržano (Chrome/Edge) —
   bez JS-a, bez rizika da hosting obriše <script> iz Elementor widgeta.
   ========================================================================== */
.glycoala-about-block{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(60px, 9vw, 110px) 24px;
}

/* --- Eyebrow varijanta za svetlu pozadinu (tamna slova, levo poravnato) --- */
.glycoala-eyebrow-line--dark{
  justify-content: flex-start;
  color: var(--glycoala-sage);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

/* --- Slike: placeholder okviri dok se ne dodaju prave fotografije --- */
.glycoala-about__media{
  position: relative;
  min-height: 420px;
}

.glycoala-about__ph{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--glycoala-line);
  background: linear-gradient(160deg, var(--glycoala-sage) 0%, var(--glycoala-moss) 100%);
  color: rgba(247,243,232,.85);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 20px;
  overflow: hidden;
}

/* Kad se placeholder tekst zameni pravom slikom, slika popuni ceo okvir
   (bez toga bi ostala malena u sredini gradijentne pozadine). !important je
   namerno — teminog reset CSS-a (npr. Hello Elementor-ov img{height:auto})
   ume da pobedi običnu specifičnost. */
.glycoala-about__ph img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* Kad okvir sadrži pravu sliku, ukloni padding i gradijent pozadinu koji su
   bili namenjeni SAMO za placeholder tekst — inače ostaje vidljiv kao
   "debeo okvir" oko slike */
.glycoala-about__ph:has(img){
  padding: 0 !important;
  background: none !important;
}

.glycoala-about__ph::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.14), transparent 45%),
    radial-gradient(circle at 75% 80%, rgba(255,255,255,.10), transparent 50%);
}

.glycoala-about__ph span{ position: relative; z-index: 1; max-width: 20ch; }

/* Ako je slika ubačena UNUTAR tog istog <span> (umesto da ga zameni), span
   ne sme da joj ograničava širinu — max-width:20ch je bio samo za placeholder tekst */
.glycoala-about__ph span:has(img){ max-width: none; width: 100%; height: 100%; }

.glycoala-about__ph--back{
  width: 78%;
  aspect-ratio: 4/5;
  top: 0; left: 0;
  animation-timeline: view();
  animation-name: glycoalaParallaxSlow;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

.glycoala-about__ph--front{
  width: 56%;
  aspect-ratio: 4/5;
  right: 0;
  bottom: -30px;
  border: 8px solid var(--glycoala-parchment);
  box-shadow: 0 24px 48px rgba(38,48,31,.22);
  animation-timeline: view();
  animation-name: glycoalaParallaxFast;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

@keyframes glycoalaParallaxSlow{
  from{ transform: translateY(-18px); }
  to{ transform: translateY(18px); }
}

@keyframes glycoalaParallaxFast{
  from{ transform: translateY(-34px); }
  to{ transform: translateY(34px); }
}

@supports not (animation-timeline: view()){
  .glycoala-about__ph--back, .glycoala-about__ph--front{ animation: none; }
}

/* --- Tekst kolona --- */
.glycoala-about__text{ text-align: left; }

.glycoala-about__text .glycoala-eyebrow-line{ margin-bottom: 16px; }

.glycoala-about__heading,
#glycoala-about__heading{
  opacity: 0;
  margin: 0 0 20px;
  font-family: var(--glycoala-font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.1;
  color: var(--glycoala-moss);
  animation: glycoalaFadeUp 700ms ease-out forwards;
  animation-delay: 300ms;
}

.glycoala-about__heading em{ font-style: italic; color: var(--glycoala-clay); }

.glycoala-about__text p{
  opacity: 0;
  max-width: 52ch;
  margin: 0 0 34px;
  font-family: var(--glycoala-font-display);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--glycoala-ink);
  animation: glycoalaFadeUp 700ms ease-out forwards;
  animation-delay: 500ms;
}

/* --- Dugme, malo savremenija varijanta: outline → fill, sa strelicom --- */
.glycoala-about__cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  padding: 15px 30px;
  background: transparent;
  color: var(--glycoala-moss);
  border: 1.5px solid var(--glycoala-moss);
  border-radius: 999px;
  font-family: var(--glycoala-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
  animation: glycoalaFadeUp 700ms ease-out forwards;
  animation-delay: 700ms;
}

.glycoala-about__cta .arrow{ transition: transform .25s ease; }

.glycoala-about__cta:hover{
  background: var(--glycoala-moss);
  color: var(--glycoala-parchment-card);
  box-shadow: 0 12px 24px rgba(38,48,31,.22);
}

.glycoala-about__cta:hover .arrow{ transform: translateX(4px); }

/* Puna (filled) varijanta — za razbijanje ponavljanja kad ima više dugmadi na strani */
.glycoala-about__cta--filled{
  background: var(--glycoala-moss);
  color: var(--glycoala-parchment-card);
}

.glycoala-about__cta--filled:hover{
  background: transparent;
  color: var(--glycoala-moss);
  box-shadow: none;
}

@media (max-width: 900px){
  .glycoala-about-block{ grid-template-columns: 1fr; }
  .glycoala-about__media{ min-height: 320px; order: -1; }
}

@media (max-width: 480px){
  .glycoala-about__heading, #glycoala-about__heading{ font-size: 1.8rem; }
  .glycoala-about__text p{ font-size: .96rem; }
  .glycoala-about__cta{ width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce){
  .glycoala-about__heading, .glycoala-about__text p, .glycoala-about__cta{
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ==========================================================================
   Hero video stack — video pozadina (kontrolisana iz Theme Options) +
   Elementor sadržaj (naslov/tekst/dugme) sede TAČNO jedno preko drugog,
   bez negative-margin trikova: video je position:absolute unutar stack-a,
   a stack dobija visinu od Elementor sekcije (koja je position:relative,
   flow-element, transparentne pozadine).
   ========================================================================== */
.glycoala-hero-stack{
  position: relative;
  overflow: hidden;
  background: var(--glycoala-moss); /* sigurnosna pozadina — sprečava belinu ako se
                                        visina heroja i videa i ne poklope tačno */
}

.glycoala-hero-stack__content{ position: relative; z-index: 1; }

.glycoala-hero-video-bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(85vh + 120px); /* hero sekcija ima padding (40px+40px) preko min-height:85vh,
                                 pa realna visina ume da preraste 85vh — dodata rezerva od 120px
                                 da video uvek pokrije i taj višak, bez praznine ispod */
  z-index: 0;
  overflow: hidden;
  background: var(--glycoala-moss); /* boja dok se video učitava */
}

.glycoala-hero-video-bg video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.glycoala-hero-video-bg__overlay{
  position: absolute;
  inset: 0;
  background: var(--glycoala-hero-overlay, rgba(0,0,0,.45));
}

/* Na mobilnom (podrazumevano) sakrij video, ostavi samo poster kao pozadinu —
   brže učitavanje, manje potrošenih podataka. Uključivo iz Theme Options. */
@media (max-width: 767px){
  .glycoala-hero-video-bg{ height: calc(70vh + 100px); }
  .glycoala-hero-video-bg--hide-mobile video{ display: none; }
  .glycoala-hero-video-bg--hide-mobile{
    background-size: cover;
    background-position: center;
  }
}

@media (min-width: 768px) and (max-width: 1024px){
  .glycoala-hero-video-bg{ height: calc(75vh + 110px); }
}

/* ==========================================================================
   Dekorativni razdvajač — meki, suptilan prelaz između sekcija
   ========================================================================== */
.glycoala-divider{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 36px 0;
}

.glycoala-divider::before,
.glycoala-divider::after{
  content: "";
  width: 60px;
  height: 1px;
  background: var(--glycoala-clay);
}

.glycoala-divider__dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--glycoala-clay);
}

.glycoala-partner-notice{
  background: var(--glycoala-parchment-card);
  border: 1px solid var(--glycoala-line);
  border-left: 3px solid var(--glycoala-clay);
  padding: 12px 16px;
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--glycoala-ink);
}

/* ==========================================================================
   WooCommerce — "Moj nalog" (My Account): bočni meni + sadržaj, tabele,
   forme, dugmad. Podrazumevani WooCommerce markup nema nikakav stil dok
   ga ovde eksplicitno ne damo.
   ========================================================================== */
.woocommerce-account .woocommerce::after{ content: ""; display: table; clear: both; }

.woocommerce-MyAccount-navigation{
  float: left !important;
  width: 230px !important;
  border: 1px solid var(--glycoala-line);
  background: var(--glycoala-parchment-card);
  margin-bottom: 40px;
}

.woocommerce-MyAccount-navigation ul{ list-style: none; margin: 0; padding: 0; }

.woocommerce-MyAccount-navigation-link a{
  display: block;
  padding: 14px 18px;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--glycoala-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--glycoala-line);
  transition: background .2s ease, color .2s ease;
}

.woocommerce-MyAccount-navigation-link:last-child a{ border-bottom: none; }

.woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-MyAccount-navigation-link a:hover{
  background: var(--glycoala-moss);
  color: var(--glycoala-parchment-card);
}

.woocommerce-MyAccount-content{
  overflow: hidden !important; /* stvara novi block formatting context — sadržaj ide pored float-ovanog menija, ne ispod njega */
  float: none !important;
  width: auto !important;
  margin-left: 60px;
  padding-left: 4px;
  font-family: var(--glycoala-font-body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--glycoala-ink);
}

/* Adrese za naplatu/isporuku — jedna ispod druge (WC podrazumevano stavlja
   jednu pored druge preko .col2-set, ovde to isključujemo) */
.woocommerce-Addresses.col2-set{
  display: block !important;
}

.woocommerce-Addresses.col2-set .u-column1,
.woocommerce-Addresses.col2-set .u-column2{
  float: none !important;
  width: 100% !important;
  margin: 0 0 40px !important;
}

.woocommerce-Address-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--glycoala-line);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.woocommerce-Address-title h2{ margin: 0; font-size: 1.3rem; }

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3{
  font-family: var(--glycoala-font-display);
  color: var(--glycoala-moss);
  margin: 0 0 16px;
}

.woocommerce-MyAccount-content a{ color: var(--glycoala-clay); }
.woocommerce-MyAccount-content mark{ background: none; color: var(--glycoala-clay); font-weight: 600; }

/* Tabele: porudžbine, download-i */
table.shop_table,
.woocommerce-orders-table{
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 30px;
  font-size: 14px;
}

table.shop_table th,
table.shop_table td{
  padding: 13px 14px;
  border-bottom: 1px solid var(--glycoala-line);
  text-align: left;
}

table.shop_table thead th{
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--glycoala-sage);
  font-weight: 600;
}

/* Forme: adrese, detalji naloga */
.woocommerce-MyAccount-content .form-row{ margin-bottom: 18px; }

.woocommerce-MyAccount-content label{
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--glycoala-ink);
  margin-bottom: 6px;
}

.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea{
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--glycoala-line);
  background: var(--glycoala-parchment-card);
  font-family: var(--glycoala-font-body);
  font-size: 14px;
  color: var(--glycoala-ink);
}

.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus{
  outline: none;
  border-color: var(--glycoala-clay);
}

/* Dugmad — usklađena sa ostatkom sajta (ovalna, invert na hover) */
.woocommerce-MyAccount-content .button,
.woocommerce-button,
.woocommerce-account .woocommerce-Button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  background: var(--glycoala-moss);
  color: var(--glycoala-parchment-card) !important;
  border: 1px solid var(--glycoala-moss);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-button:hover{
  background: transparent;
  color: var(--glycoala-moss) !important;
}

/* Statusi porudžbina */
.woocommerce-orders-table__cell-order-status mark.completed,
mark.order-status.status-completed{ color: #3e7a4d; }
mark.order-status.status-processing{ color: var(--glycoala-clay); }
mark.order-status.status-on-hold,
mark.order-status.status-pending{ color: var(--glycoala-sage); }

@media (max-width: 768px){
  .woocommerce-MyAccount-navigation{ float: none !important; width: auto !important; margin-bottom: 24px; }
  .woocommerce-MyAccount-content{ overflow: visible !important; margin-left: 0; }
}

/* ==========================================================================
   Proizvodi — dva velika naizmenična bloka (slika + tekst), scroll-reveal
   animacije preko CSS animation-timeline (bez JS-a, gracefully degrades)
   ========================================================================== */
@keyframes glycoalaRevealUp{
  from{ opacity: 0; transform: translateY(30px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Isti pokret, ali bez diranja providnosti — za tekst, koji nikada ne sme
   da zavisi od pozicije skrola da bi bio čitljiv. */
@keyframes glycoalaRevealUpSolid{
  from{ transform: translateY(30px); }
  to{ transform: translateY(0); }
}

@keyframes glycoalaRevealScale{
  from{ opacity: 0; transform: scale(.94); }
  to{ opacity: 1; transform: scale(1); }
}

.glycoala-products-section{
  padding: clamp(50px, 8vw, 100px) 0;
  background: var(--glycoala-parchment-card);
  border-top: 3px solid var(--glycoala-clay);
}

.glycoala-products-section__head{
  max-width: 1240px;
  margin: 0 auto 20px;
  padding: 0 24px;
}

.glycoala-product-row{
  display: flex;
  align-items: center;
  gap: clamp(30px, 5vw, 64px);
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 24px;
}

.glycoala-product-row--reverse{ flex-direction: row-reverse; }

.glycoala-product-row__media{
  flex: 1;
  min-width: 0;
  opacity: 0;
  animation: glycoalaRevealScale 700ms ease-out forwards;
  animation-timeline: view();
  /* Opseg se završava dok element tek ulazi u ekran. Ranije je stajalo
     "cover 30%", što traži da stranica pređe 30% preko elementa — a to se kod
     poslednjeg bloka na strani nikad ne desi, pa je ostajao poluproziran. */
  animation-range: entry 0% entry 80%;
}

.glycoala-product-row__media .glycoala-about__ph{
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border: 1px solid var(--glycoala-clay);
  box-shadow: 0 30px 60px -12px rgba(38,48,31,.35), 0 8px 20px rgba(38,48,31,.15);
  padding: 0;
}

.glycoala-product-row__text{
  flex: 1;
  min-width: 0;
  text-align: left;
}

/**
 * Tekst se pomera, ali ostaje pun — providnost se NE vezuje za skrol.
 *
 * Ranije je svaki element kretao od opacity:0 i postajao vidljiv tek kad
 * skrol dogura njegov opseg do kraja. Pošto svaki element ima svoju poziciju,
 * niži pasusi su imali manji napredak od viših, pa je tekst izgledao kao da
 * bledi nadole — a oni najniži nisu ni stizali do kraja i ostajali su trajno
 * poluprozirni. Tekst zato animiramo samo pomerajem.
 */
.glycoala-product-row__text > *{
  animation: glycoalaRevealUpSolid 700ms ease-out forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 70%;
}

/* animation-delay se uz scroll timeline ignoriše (kašnjenje se zadaje preko
   animation-range), pa su nekadašnji nth-child delay-evi bili mrtav kod. */

@supports not (animation-timeline: view()){
  .glycoala-product-row__media{ opacity: 1; animation: none; }
  .glycoala-product-row__text > *{ animation: none; }
}

/* Poštuj sistemsko podešavanje za smanjeno kretanje. */
@media (prefers-reduced-motion: reduce){
  .glycoala-product-row__media,
  .glycoala-product-row__text > *{ opacity: 1; animation: none; }
}

.glycoala-price{
  font-family: var(--glycoala-font-display);
  font-size: 1.5rem;
  color: var(--glycoala-clay);
  margin: 0 0 26px;
}

@media (max-width: 860px){
  .glycoala-product-row,
  .glycoala-product-row--reverse{ flex-direction: column; }
}

/* ==========================================================================
   Blog — 3 najnovija članka (WP_Query preko teme, ne preko Elementora
   jer besplatan Elementor nema dinamički "Posts" widget)
   ========================================================================== */
.glycoala-blog-section{
  padding: clamp(50px, 8vw, 100px) 0;
  background: var(--glycoala-parchment-card);
  border-top: 1px solid var(--glycoala-line);
}

.glycoala-blog-section__head{
  max-width: 1240px;
  margin: 0 auto 40px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.glycoala-blog-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.glycoala-blog-card{
  opacity: 0;
  animation: glycoalaRevealUp 700ms ease-out forwards;
  animation-timeline: view();
  /* Završava se dok kartica ulazi u ekran. Sa "cover 25%" je poslednji red
     kartica na strani ostajao poluproziran, jer stranica nema kud dalje. */
  animation-range: entry 0% entry 80%;
  text-decoration: none;
  color: inherit;
  display: block;
  background: var(--glycoala-parchment-card);
  border: 1px solid var(--glycoala-line);
  border-radius: 8px;
  padding: 16px 16px 24px;
  box-shadow: 0 12px 28px rgba(38,48,31,.08);
  transition: box-shadow .25s ease, transform .25s ease;
}

.glycoala-blog-card:hover{
  box-shadow: 0 20px 40px rgba(38,48,31,.16);
  transform: translateY(-4px);
}

.glycoala-blog-grid .glycoala-blog-card:nth-child(2){ animation-delay: 100ms; }
.glycoala-blog-grid .glycoala-blog-card:nth-child(3){ animation-delay: 200ms; }

@supports not (animation-timeline: view()){
  .glycoala-blog-card{ opacity: 1; animation: none; }
}

@media (prefers-reduced-motion: reduce){
  .glycoala-blog-card{ opacity: 1; animation: none; }
}

.glycoala-blog-card__media{
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--glycoala-parchment);
  border-radius: 4px;
}

.glycoala-blog-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.glycoala-blog-card:hover .glycoala-blog-card__media img{ transform: scale(1.05); }

.glycoala-blog-card__date{
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--glycoala-sage);
  margin-bottom: 10px;
}

.glycoala-blog-card__title{
  font-family: var(--glycoala-font-display);
  font-size: 1.25rem;
  color: var(--glycoala-moss);
  margin: 0 0 10px;
  line-height: 1.3;
}

.glycoala-blog-card__excerpt{
  font-size: 14px;
  line-height: 1.6;
  color: var(--glycoala-ink);
  opacity: 0.75;
}

@media (max-width: 860px){
  .glycoala-blog-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Traka sa značkama — puna brend gradijent pozadina, ispod heroja
   ========================================================================== */
.glycoala-badges{
  background: var(--glycoala-brand-bg, var(--glycoala-moss)) !important;
  padding: 22px 0;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.glycoala-badges__row{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  flex-wrap: wrap;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.glycoala-badge{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--glycoala-parchment-card);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.glycoala-badge svg{ flex-shrink: 0; opacity: 0.9; }

/* ==========================================================================
   Gradijent CTA kartica — akcentni blok preko sredine stranice
   ========================================================================== */
.glycoala-gradient-card{
  background: var(--glycoala-brand-bg, var(--glycoala-moss));
  color: var(--glycoala-parchment-card);
  padding: clamp(36px, 5vw, 56px);
  max-width: 380px;
  box-shadow: 0 24px 48px rgba(91,45,143,.25);
}

.glycoala-gradient-card h3{
  color: var(--glycoala-parchment-card);
  font-family: var(--glycoala-font-display);
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0 0 22px;
}

.glycoala-gradient-card .glycoala-about__cta{
  background: var(--glycoala-parchment-card);
  color: var(--glycoala-brand-1, var(--glycoala-moss));
  border-color: var(--glycoala-parchment-card);
}

.glycoala-gradient-card .glycoala-about__cta:hover{
  background: transparent;
  color: var(--glycoala-parchment-card);
}

/* ==========================================================================
   Partneri — tamna sekcija, boja prati --glycoala-moss (koji je sad
   alias za brend boju iz Theme Options, ne fiksna zelena)
   ========================================================================== */
.glycoala-partners-section{
  background: var(--glycoala-dark, var(--glycoala-moss)) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: clamp(50px, 8vw, 80px) 0;
  /* "probija se" iz roditelja bez obzira da li je Elementor sekcija boxed ili full_width —
     tako uvek pokriva punu širinu ekrana, čak i kad se shortcode ubaci u običnu sekciju */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ==========================================================================
   CTA baner — pun brend gradijent, cela širina, sadržaj centriran unutar
   kontejnera. !important je namerno — Hello Elementor učitava svoj theme.css
   POSLE naše teme, pa bez !important preklapa boju/poravnanje teksta.
   ========================================================================== */
.glycoala-cta-banner{
  background: var(--glycoala-brand-bg, var(--glycoala-moss)) !important;
  padding: clamp(60px, 9vw, 100px) 24px;
  text-align: center !important;
}

.glycoala-cta-banner__inner{
  max-width: 720px;
  margin: 0 auto;
}

.glycoala-cta-banner h2{
  color: var(--glycoala-parchment-card) !important;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  text-align: center !important;
  margin: 0 0 18px;
}

.glycoala-cta-banner p{
  color: rgba(247,243,232,.85) !important;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 56ch;
  text-align: center !important;
  margin: 0 auto 34px;
}

.glycoala-cta-banner .glycoala-about__cta{
  display: inline-flex !important;
  background: var(--glycoala-parchment-card) !important;
  color: var(--glycoala-moss) !important;
  border-color: var(--glycoala-parchment-card) !important;
  padding: 17px 40px;
  font-size: 13px;
}

.glycoala-cta-banner .glycoala-about__cta:hover{
  background: transparent !important;
  color: var(--glycoala-parchment-card) !important;
}




/* ==========================================================================
   Partneri — javna lista (grid) i "Postani partner" forma
   ========================================================================== */
.glycoala-partners-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 36px);
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 24px;
}

.glycoala-partner-card{
  border: 1px solid var(--glycoala-line);
  background: var(--glycoala-parchment-card);
  padding: 30px 26px;
  text-align: center;
}

.glycoala-partner-card__logo{
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.glycoala-partner-card__logo img{ max-height: 90px; max-width: 100%; object-fit: contain; }

.glycoala-partner-card__logo span{
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--glycoala-sage);
  border: 1px dashed var(--glycoala-line);
  padding: 30px 20px;
  width: 100%;
}

.glycoala-partner-card__name{
  font-family: var(--glycoala-font-display);
  color: var(--glycoala-moss);
  font-size: 1.1rem;
  margin: 0 0 10px;
}

.glycoala-partner-card__desc{
  font-size: 13px;
  color: var(--glycoala-ink);
  opacity: 0.75;
  line-height: 1.6;
  margin: 0 0 14px;
}

.glycoala-partner-card__link{
  font-size: 13px;
  font-weight: 600;
  color: var(--glycoala-clay);
  text-decoration: none;
}

@media (max-width: 900px){
  .glycoala-partners-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .glycoala-partners-grid{ grid-template-columns: 1fr; }
}

/* --- Forma "Postani partner" --- */
.glycoala-partner-form-wrap{
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 24px;
}

.glycoala-partner-form .glycoala-form-row{ margin-bottom: 20px; }

.glycoala-partner-form .glycoala-form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.glycoala-partner-form label{
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--glycoala-ink);
  margin-bottom: 6px;
}

.glycoala-partner-form input,
.glycoala-partner-form textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--glycoala-line);
  background: var(--glycoala-parchment-card);
  font-family: var(--glycoala-font-body);
  font-size: 14px;
  color: var(--glycoala-ink);
}

.glycoala-partner-form input:focus,
.glycoala-partner-form textarea:focus{
  outline: none;
  border-color: var(--glycoala-clay);
}

.glycoala-partner-form button{ margin-top: 6px; }

.glycoala-form-notice{
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 14px;
  border-left: 3px solid;
}

.glycoala-form-notice--success{
  background: rgba(124,138,108,.15);
  border-color: var(--glycoala-sage);
  color: var(--glycoala-moss);
}

.glycoala-form-notice--error{
  background: rgba(168,86,46,.1);
  border-color: var(--glycoala-clay);
  color: var(--glycoala-clay-dark, var(--glycoala-clay));
}

@media (max-width: 600px){
  .glycoala-partner-form .glycoala-form-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer widget — Kontakt informacije (adresa/telefon/mejl + PIB/MB/šifra)
   ========================================================================== */
.glycoala-contact-widget__list{
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.glycoala-contact-widget__list li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* text-align:center ne pomera flex stavke, pa se centriranje na telefonu
   mora zadati preko justify-content */
@media (max-width: 560px){
  .glycoala-contact-widget__list li{ justify-content: center; }
  .glycoala-contact-widget__list,
  .glycoala-contact-widget__legal{ text-align: center; }
}

.glycoala-contact-widget__list svg{ flex-shrink: 0; margin-top: 3px; opacity: 0.85; }

.glycoala-contact-widget__legal{
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(247,243,232,0.15);
  display: grid;
  gap: 6px;
  font-size: 13px;
  opacity: 0.8;
}

/* ==========================================================================
   Partneri — beskonačan skrolujući red (marquee), povlači stvarne Partner
   objave, hover overlay u brend boji sa imenom partnera na sredini
   ========================================================================== */
.glycoala-partners-marquee{
  overflow: hidden;
  padding: 10px 0 40px;
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}

.glycoala-partners-marquee__track{
  display: flex;
  gap: 24px;
  width: max-content;
  animation: glycoalaMarquee 28s linear infinite;
}

.glycoala-partners-marquee:hover .glycoala-partners-marquee__track{
  animation-play-state: paused;
}

@keyframes glycoalaMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.glycoala-partner-logo{
  position: relative;
  flex-shrink: 0;
  width: 280px;
  height: 200px;
  background: var(--glycoala-parchment-card);
  border: 1px solid var(--glycoala-line);
  overflow: hidden;
  text-decoration: none;
}

.glycoala-partner-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.glycoala-partner-logo__overlay{
  position: absolute;
  inset: 8px; /* uvučeno od ivice slike, ne oko cele kartice */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glycoala-brand-bg, var(--glycoala-moss));
  border: 1px solid rgba(247,243,232,.4);
  opacity: 0;
  transition: opacity .3s ease;
  padding: 12px;
  text-align: center;
}

.glycoala-partner-logo:hover .glycoala-partner-logo__overlay{ opacity: 1; }

.glycoala-partner-logo__overlay span{
  color: #F7F3E8;
  font-family: var(--glycoala-font-display);
  font-size: 0.95rem;
  line-height: 1.3;
}

@media (prefers-reduced-motion: reduce){
  .glycoala-partners-marquee__track{ animation: none; }
}

/* Dashicons u kontakt widgetu — malo manje i poravnate uz tekst */
.glycoala-contact-widget__list .dashicons{
  font-size: 16px;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  opacity: 0.85;
}

/* ==========================================================================
   O nama — mreža vrednosti brenda
   ========================================================================== */
.glycoala-values-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.glycoala-value-card{
  text-align: center;
  padding: 34px 22px;
  background: var(--glycoala-parchment-card);
  border: 1px solid var(--glycoala-line);
}

.glycoala-value-card .dashicons{
  font-size: 30px;
  width: 30px;
  height: 30px;
  color: var(--glycoala-clay);
  margin-bottom: 16px;
}

.glycoala-value-card h3{
  font-family: var(--glycoala-font-display);
  font-size: 1.15rem;
  color: var(--glycoala-moss);
  margin: 0 0 10px;
}

.glycoala-value-card p{
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.75;
  margin: 0;
}

@media (max-width: 900px){
  .glycoala-values-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .glycoala-values-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Contact Form 7 — stilizacija da prati izgled ostatka sajta
   ========================================================================== */
.wpcf7-form p{ margin: 0 0 20px !important; }

.wpcf7-form label{
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--glycoala-ink);
  margin-bottom: 6px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--glycoala-line);
  background: var(--glycoala-parchment-card);
  font-family: var(--glycoala-font-body);
  font-size: 14px;
  color: var(--glycoala-ink);
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus{
  outline: none;
  border-color: var(--glycoala-clay);
}

.wpcf7-form input[type="submit"]{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--glycoala-moss);
  color: var(--glycoala-parchment-card);
  border: 1px solid var(--glycoala-moss);
  border-radius: 999px;
  padding: 15px 34px;
  font-family: var(--glycoala-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.wpcf7-form input[type="submit"]:hover{
  background: transparent;
  color: var(--glycoala-moss);
}

.wpcf7-not-valid-tip{
  color: var(--glycoala-clay);
  font-size: 12px;
  margin-top: 6px;
}

.wpcf7-response-output{
  border: 1px solid var(--glycoala-line) !important;
  padding: 14px 18px !important;
  margin: 20px 0 0 !important;
  font-size: 14px;
  border-radius: 2px;
}

.wpcf7-form.sent .wpcf7-response-output{ border-color: var(--glycoala-sage) !important; }
.wpcf7-form.invalid .wpcf7-response-output{ border-color: var(--glycoala-clay) !important; }

/* Detalji: placeholder boja, spinner, i "obavezno polje" zvezdica */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder{
  color: var(--glycoala-ink);
  opacity: 0.45;
}

.wpcf7-form .wpcf7-spinner{
  margin: 0 0 0 12px;
  vertical-align: middle;
}

.wpcf7-form .wpcf7-form-control-wrap{ display: block; }

/* Zvezdica za obavezna polja (npr. iz [text* your-name]) — CF7 je dodaje
   automatski u placeholder/label, ovde samo osiguravamo boju ako je vidljiva */
.wpcf7-form abbr[title="required"]{
  color: var(--glycoala-clay);
  text-decoration: none;
}

/* Blago zaobljeni uglovi na poljima, u skladu sa dugmadima na sajtu */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea{
  border-radius: 2px;
}

/* ==========================================================================
   Kontakt stranica — info lista i mapa
   ========================================================================== */
.glycoala-contact-page__map{
  width: 100%;
  height: 420px;
  border: 0;
  filter: grayscale(20%) contrast(1.05);
}

.glycoala-contact-page__info li{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
  font-size: 15px;
  line-height: 1.6;
}

.glycoala-contact-page__info .dashicons{
  font-size: 20px;
  width: 20px;
  height: 20px;
  color: var(--glycoala-clay);
  margin-top: 2px;
}

/* ==========================================================================
   Blog arhiva — meta red (datum+autor), "Pročitaj više" link, paginacija
   ========================================================================== */
.glycoala-blog-card__meta{
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--glycoala-sage);
  margin-bottom: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.glycoala-blog-card__more{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--glycoala-clay);
}

.glycoala-blog-card:hover .glycoala-blog-card__more .arrow{ transform: translateX(4px); }

/* WordPress-ova ugrađena paginacija (the_posts_pagination) */
.navigation.pagination{
  display: flex;
  justify-content: center;
  gap: 10px;
}

.navigation.pagination .nav-links{
  display: flex;
  gap: 10px;
  align-items: center;
}

.navigation.pagination a,
.navigation.pagination span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--glycoala-line);
  color: var(--glycoala-ink);
  font-size: 13px;
  text-decoration: none;
}

.navigation.pagination a:hover{
  border-color: var(--glycoala-clay);
  color: var(--glycoala-clay);
}

.navigation.pagination .current{
  background: var(--glycoala-moss);
  border-color: var(--glycoala-moss);
  color: var(--glycoala-parchment-card);
}

/* ==========================================================================
   Prodavnica (WooCommerce Shop) — naizmenični redovi: slika sa jedne,
   naziv + opis + dugme sa druge strane, razdvojeni linijom
   ========================================================================== */
/* Roditeljska tema (Hello Elementor) ume da postavi svetliju pozadinu na
   glavni sadržaj — ovde je poništavamo da se prodavnica sliva sa stranicom */
.glycoala-shop,
.glycoala-shop ul.products,
.glycoala-shop ul.products li.product{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.glycoala-shop ul.products{
  display: block !important;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  clear: both;
}

.glycoala-shop ul.products li.product{
  display: flex !important;
  align-items: center;
  gap: clamp(30px, 5vw, 70px);
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: clamp(34px, 4.5vw, 54px) 0;
  border-bottom: 1px solid var(--glycoala-line);
  text-align: left;
}

.glycoala-shop ul.products li.product:last-child{ border-bottom: none; }

/* Prvi proizvod: tekst levo, slika desno. Svaki sledeći se smenjuje. */
.glycoala-shop ul.products li.product{ flex-direction: row-reverse; }
.glycoala-shop ul.products li.product:nth-child(even){ flex-direction: row; }

/* --- Slika --- */
.glycoala-shop-row__media{
  flex: 0 0 38%;
  max-width: 38%;
}

.glycoala-shop-row__media a{
  display: block;
  border: 1px solid var(--glycoala-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 22px rgba(38,48,31,.06);
  transition: box-shadow .3s ease, transform .3s ease;
}

.glycoala-shop ul.products li.product:hover .glycoala-shop-row__media a{
  box-shadow: 0 16px 34px rgba(38,48,31,.12);
  transform: translateY(-3px);
}

.glycoala-shop-row__media img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  aspect-ratio: 1/1;
  object-fit: cover;
  padding: 0;
  background: #fff;
}

/* --- Tekstualna strana --- */
.glycoala-shop-row__text{ flex: 1; min-width: 0; }

.glycoala-shop-row__badge{
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--glycoala-clay);
  border: 1px solid var(--glycoala-clay);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 16px;
}

.glycoala-shop-row__title{
  font-family: var(--glycoala-font-display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.2;
  margin: 0 0 18px;
}

.glycoala-shop-row__title a{
  color: var(--glycoala-moss);
  text-decoration: none;
}

.glycoala-shop-row__desc{
  font-size: 1rem;
  line-height: 1.75;
  color: var(--glycoala-ink);
  opacity: .85;
  margin-bottom: 22px;
  max-width: 56ch;
}

.glycoala-shop-row__desc p:last-child{ margin-bottom: 0; }

.glycoala-shop-row__price{
  font-family: var(--glycoala-font-display);
  font-size: 1.5rem;
  color: var(--glycoala-clay);
  margin-bottom: 24px;
}

.glycoala-shop-row__price del{ opacity: .5; font-size: 1.1rem; margin-right: 8px; }

/* Dugmad — .woocommerce prefiks i !important su neophodni, jer WooCommerce
   svoj podrazumevani stil (ona svetloljubičasta dugmad) piše selektorom
   veće specifičnosti nego što bi naša klasa sama imala */
.woocommerce .glycoala-shop-row__text a.button,
.woocommerce .glycoala-shop-row__text button.button,
.glycoala-shop-row__text .button,
.glycoala-shop-row__text .glycoala-about__cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--glycoala-moss) !important;
  color: var(--glycoala-parchment-card) !important;
  border: 1px solid var(--glycoala-moss) !important;
  border-radius: 999px !important;
  padding: 15px 34px !important;
  font-family: var(--glycoala-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.woocommerce .glycoala-shop-row__text a.button:hover,
.woocommerce .glycoala-shop-row__text button.button:hover,
.glycoala-shop-row__text .button:hover,
.glycoala-shop-row__text .glycoala-about__cta:hover{
  background: transparent !important;
  color: var(--glycoala-moss) !important;
}

.glycoala-shop-row__text .added_to_cart{
  display: inline-block;
  margin-left: 14px;
  font-size: 13px;
  color: var(--glycoala-clay);
}

/* Napomena za neulogovane */
.glycoala-shop-row__note{
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  opacity: .7;
  max-width: 48ch;
}

@media (max-width: 860px){
  .glycoala-shop ul.products li.product,
  .glycoala-shop ul.products li.product:nth-child(even){
    flex-direction: column;
    gap: 28px;
  }
  .glycoala-shop-row__media{ flex: 1 1 auto; max-width: 100%; width: 100%; }
}

/* ==========================================================================
   Prodavnica — naslov, breadcrumb, broj rezultata, sortiranje (prati brend)
   ========================================================================== */
.glycoala-shop .woocommerce-breadcrumb{
  font-size: 13px;
  color: var(--glycoala-sage);
  margin: 0 0 20px;
}

.glycoala-shop .woocommerce-breadcrumb a{
  color: var(--glycoala-ink);
  opacity: 0.7;
  text-decoration: none;
}

.glycoala-shop .woocommerce-breadcrumb a:hover{ opacity: 1; }

.glycoala-shop .woocommerce-products-header__title,
.glycoala-shop h1.page-title{
  font-family: var(--glycoala-font-display);
  color: var(--glycoala-moss);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin: 0 0 30px;
}

.glycoala-shop .woocommerce-notices-wrapper + p,
.glycoala-shop .woocommerce-result-count{
  font-size: 13px;
  color: var(--glycoala-ink);
  opacity: 0.7;
}

.glycoala-shop form.woocommerce-ordering{ margin: 0 0 30px; }

.glycoala-shop .woocommerce-ordering select.orderby{
  border: 1px solid var(--glycoala-line);
  background: var(--glycoala-parchment-card);
  color: var(--glycoala-ink);
  font-family: var(--glycoala-font-body);
  font-size: 13px;
  padding: 10px 34px 10px 14px;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.glycoala-shop .woocommerce-ordering select.orderby:focus{
  border-color: var(--glycoala-clay);
}

.glycoala-shop .woocommerce-notices-wrapper,
.glycoala-shop > p.woocommerce-result-count,
.glycoala-shop form.woocommerce-ordering{
  display: inline-block;
}

/* Redosled i poravnanje reda "broj rezultata / sortiranje" */
.glycoala-shop .woocommerce-result-count{
  float: left;
  margin-top: 10px;
}

.glycoala-shop form.woocommerce-ordering{
  float: right;
}

/* ==========================================================================
   Framed image — čista, samostalna klasa za Elementorov native Image
   widget (ne oslanja se na .glycoala-about__ph koja ima position:absolute
   nasleđe i pravi probleme kad se koristi van "O nama" konteksta)
   ========================================================================== */
.glycoala-framed-image{
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border: 2px solid var(--glycoala-clay);
  box-shadow: 0 20px 40px rgba(38,48,31,.15);
  background: var(--glycoala-parchment-card);
}

.glycoala-framed-image .elementor-widget-container{
  width: 100%;
  height: 100%;
}

.glycoala-framed-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Razmak između slike i teksta u dvokolonskom redu proizvoda */
.glycoala-product-bundle-row{
  display: flex;
  align-items: center;
  gap: clamp(30px, 5vw, 64px);
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 24px;
}

.glycoala-product-bundle-row > *{ flex: 1; min-width: 0; }

@media (max-width: 860px){
  .glycoala-product-bundle-row{ flex-direction: column; }
}

/* Garantovan razmak između kolona proizvod-bundle reda, bez oslanjanja na
   Elementorovo "gap" podešavanje koje se pokazalo nepouzdano */
.glycoala-bundle-media-col{ padding-right: 32px !important; }
.glycoala-bundle-text-col{ padding-left: 32px !important; }
@media (max-width: 860px){
  .glycoala-bundle-media-col,
  .glycoala-bundle-text-col{ padding-left: 0 !important; padding-right: 0 !important; }
}

/* ==========================================================================
   Zašto GlycoAla BIO — checklist mreža (9 stavki, 3 kolone)
   ========================================================================== */
.glycoala-checklist-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 40px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

.glycoala-checklist-item{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.6;
}

.glycoala-checklist-item .dashicons{
  color: var(--glycoala-clay);
  font-size: 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

@media (max-width: 860px){
  .glycoala-checklist-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .glycoala-checklist-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Kreator tretmana — mali citat/bio blok
   ========================================================================== */
.glycoala-creator-block{
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px;
  text-align: center;
  border-top: 1px solid var(--glycoala-line);
  border-bottom: 1px solid var(--glycoala-line);
}

.glycoala-creator-block__name{
  font-family: var(--glycoala-font-display);
  font-style: italic;
  color: var(--glycoala-clay);
  font-size: 1.3rem;
  margin: 14px 0 4px;
}

.glycoala-creator-block__title{
  font-size: 13px;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

/* ==========================================================================
   Pomoćna klasa — sužava i centrira blok teksta (rešava čest Elementor
   problem gde "text-align: center" ne izgleda centrirano jer je widget
   razvučen na celu širinu kontejnera)
   ========================================================================== */
.glycoala-centered-text,
#glycoala-centered-text{
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

/* ==========================================================================
   Breadcrumb — opšta vizuelna razdvojenost od sadržaja ispod (linija +
   razmak), važi svuda (ne samo na Prodavnici)
   ========================================================================== */
.woocommerce-breadcrumb{
  padding-bottom: 20px !important;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--glycoala-line);
}

/* ==========================================================================
   Press release — razmak i oblik kartica (Elementor kolone sa pozadinom
   se inače dodiruju, jer Elementor "gap" dodaje padding, ne margin)
   ========================================================================== */
.glycoala-press-cards > .elementor-container > .elementor-column > .elementor-element-populated{
  margin: 0 22px;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(38,48,31,.07);
}

.glycoala-press-cards > .elementor-container > .elementor-column:first-child > .elementor-element-populated{
  margin-left: 0;
}

.glycoala-press-cards > .elementor-container > .elementor-column:last-child > .elementor-element-populated{
  margin-right: 0;
}

@media (max-width: 767px){
  .glycoala-press-cards > .elementor-container > .elementor-column > .elementor-element-populated{
    margin: 0 0 18px !important;
  }
}

/* ==========================================================================
   Opis proizvoda (WooCommerce) — tipografija i liste u brend stilu
   ========================================================================== */
.woocommerce-Tabs-panel--description,
.woocommerce-product-details__short-description,
.glycoala-product-desc{
  font-family: var(--glycoala-font-body);
  line-height: 1.75;
  color: var(--glycoala-ink);
}

.woocommerce-Tabs-panel--description h2,
.woocommerce-Tabs-panel--description h3,
.woocommerce-Tabs-panel--description h4{
  font-family: var(--glycoala-font-display);
  color: var(--glycoala-moss);
  margin: 38px 0 16px;
}

.woocommerce-Tabs-panel--description h3{ font-size: 1.35rem; }
.woocommerce-Tabs-panel--description h4{ font-size: 1.1rem; }
.woocommerce-Tabs-panel--description > *:first-child{ margin-top: 0; }

/* Uvodna rečenica — istaknuta */
.glycoala-desc-lead{
  font-family: var(--glycoala-font-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--glycoala-clay);
  margin: 0 0 22px;
}

/* Osnovne liste u opisu — mala crta u boji gline umesto tačke */
.woocommerce-Tabs-panel--description ul{
  list-style: none;
  padding-left: 0;
  margin: 0 0 22px;
}

.woocommerce-Tabs-panel--description ul li{
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
}

.woocommerce-Tabs-panel--description ul li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 10px;
  height: 1.5px;
  background: var(--glycoala-clay);
}

/* Lista sa kvačicama — za benefite */
.glycoala-check-list li::before{
  content: "\2713" !important;
  background: none !important;
  top: 0 !important;
  width: auto !important;
  height: auto !important;
  color: var(--glycoala-clay);
  font-weight: 700;
  font-size: 14px;
}

/* Duga lista u dve kolone */
.glycoala-two-col{
  columns: 2;
  column-gap: 40px;
}

.glycoala-two-col li{ break-inside: avoid; }

@media (max-width: 700px){
  .glycoala-two-col{ columns: 1; }
}

/* Sastojci — naziv u boji gline, opis ispod */
.glycoala-ingredient-list li{
  padding-left: 0 !important;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--glycoala-line);
}

.glycoala-ingredient-list li::before{ display: none !important; }

.glycoala-ingredient-list li strong{
  display: block;
  font-family: var(--glycoala-font-display);
  font-style: italic;
  color: var(--glycoala-clay);
  font-size: 1.05rem;
  margin-bottom: 4px;
}

/* Istaknuti blok za uputstvo o primeni */
.glycoala-desc-note{
  background: var(--glycoala-parchment-card);
  border-left: 3px solid var(--glycoala-clay);
  padding: 20px 24px;
  margin: 26px 0;
  font-size: 15px;
}

/* Sadržaj seta (bundle) — dve kartice sa količinama */
.glycoala-set-contents{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 26px 0 34px;
  list-style: none !important;
  padding: 0 !important;
}

.glycoala-set-contents li{
  background: var(--glycoala-parchment-card);
  border: 1px solid var(--glycoala-line);
  border-radius: 10px;
  padding: 22px 24px !important;
  margin: 0 !important;
}

.glycoala-set-contents li::before{ display: none !important; }

.glycoala-set-contents .qty{
  display: inline-block;
  font-family: var(--glycoala-font-display);
  font-size: 1.6rem;
  color: var(--glycoala-clay);
  line-height: 1;
  margin-bottom: 8px;
}

.glycoala-set-contents strong{
  display: block;
  font-family: var(--glycoala-font-display);
  color: var(--glycoala-moss);
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.glycoala-set-contents span.desc{ font-size: 14px; line-height: 1.6; opacity: .85; }

@media (max-width: 700px){
  .glycoala-set-contents{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Prodavnica — uvodni tekst, traka sa značkama, CTA blok za partnere
   ========================================================================== */
.glycoala-shop-intro{
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--glycoala-ink);
  opacity: .8;
  max-width: 62ch;
  margin: 0 0 30px;
}

.glycoala-shop-badges{ margin: 0 0 10px; }

/* Traka sa značkama se sama "probija" na punu širinu — unutar prodavnice
   je držimo u kontejneru i dajemo joj zaobljene ivice */
.glycoala-shop-badges > div{
  width: auto !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 10px;
}

/* --- CTA blok na dnu --- */
.glycoala-shop-cta{
  background: var(--glycoala-brand-bg, var(--glycoala-moss));
  border-radius: 14px;
  padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px);
  max-width: 1000px;
  margin: 50px auto 20px;
  text-align: center;
}

.glycoala-shop-cta__title{
  font-family: var(--glycoala-font-display);
  color: var(--glycoala-parchment-card);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 0 0 14px;
}

.glycoala-shop-cta__text{
  color: rgba(247,243,232,.88);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 54ch;
  margin: 0 auto 28px;
}

.glycoala-shop-cta__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--glycoala-parchment-card);
  color: var(--glycoala-moss);
  border: 1px solid var(--glycoala-parchment-card);
  border-radius: 999px;
  padding: 16px 38px;
  font-family: var(--glycoala-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.glycoala-shop-cta__btn:hover{
  background: transparent;
  color: var(--glycoala-parchment-card);
}

/* ==========================================================================
   Pojedinačna blog objava — sadržaj u ravni sa logom + bočna kolona desno
   ========================================================================== */
.glycoala-single{ padding-top: 30px; padding-bottom: 90px; }

.glycoala-single__layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(36px, 4.5vw, 68px);
  align-items: start;
}

.glycoala-single__main{ min-width: 0; }

/* Naslovi su namerno manji nego globalni h1/h2 — globalni su podešeni za
   hero sekcije, gde treba da dominiraju, a ne za dugački tekst */
.glycoala-single__title{
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: 1.18;
  color: var(--glycoala-moss);
  margin: 0 0 14px;
}

.glycoala-single__meta{
  display: flex;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--glycoala-sage);
  margin-bottom: 32px;
}

.glycoala-single__media{ margin-bottom: 36px; }

.glycoala-single__media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.glycoala-single__content h2{
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  line-height: 1.3;
  color: var(--glycoala-moss);
  margin: 44px 0 14px;
}

.glycoala-single__content h3{
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  line-height: 1.35;
  color: var(--glycoala-moss);
  margin: 30px 0 10px;
}

.glycoala-single__content > *:first-child{ margin-top: 0; }

.glycoala-single__content p{
  max-width: none;
  line-height: 1.8;
  margin: 0 0 18px;
}

.glycoala-single__content ul,
.glycoala-single__content ol{
  margin: 0 0 24px;
  padding-left: 0;
  list-style: none;
}

.glycoala-single__content li{
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  line-height: 1.75;
}

.glycoala-single__content ul li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 10px;
  height: 1.5px;
  background: var(--glycoala-clay);
}

/* Linkovi u tekstu prate boju naslova */
.glycoala-single__content a{
  color: var(--glycoala-moss);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .2s ease;
}

.glycoala-single__content a:hover{ color: var(--glycoala-clay); }

/* --- Bočna kolona --- */
.glycoala-single__sidebar{
  position: sticky;
  top: 24px;
}

.glycoala-widget{
  background: var(--glycoala-parchment-card);
  border: 1px solid var(--glycoala-line);
  border-radius: 10px;
  padding: 26px 24px;
  margin-bottom: 24px;
}

.glycoala-widget__title{
  font-family: var(--glycoala-font-display);
  font-size: 1.05rem;
  color: var(--glycoala-moss);
  margin: 0 0 16px;
}

.glycoala-widget ul{ list-style: none; margin: 0; padding: 0; }

.glycoala-widget li{
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glycoala-line);
}

.glycoala-widget li:last-child{
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.glycoala-widget a{
  color: var(--glycoala-moss);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
}

.glycoala-widget a:hover{ color: var(--glycoala-clay); }

.glycoala-widget .post-date{
  display: block;
  font-size: 12px;
  color: var(--glycoala-sage);
  margin-top: 5px;
}

.glycoala-widget--cta{
  background: var(--glycoala-brand-bg, var(--glycoala-moss));
  border: none;
}

.glycoala-widget--cta .glycoala-widget__title{ color: var(--glycoala-parchment-card); }

.glycoala-widget--cta p{
  color: rgba(247,243,232,.88);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 20px;
  max-width: none;
}

.glycoala-widget__btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--glycoala-parchment-card);
  color: var(--glycoala-moss) !important;
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity .2s ease;
}

.glycoala-widget__btn:hover{ opacity: .85; }

@media (max-width: 960px){
  .glycoala-single__layout{ grid-template-columns: 1fr; }
  .glycoala-single__sidebar{ position: static; }
}

/* ==========================================================================
   Mobilni meni — panel koji se otvara klikom na dugme "Meni"
   (ponašanje vodi assets/navigation.js preko klase na <body>)
   ========================================================================== */
@media (max-width: 860px){

  .glycoala-header{ position: relative; }

  .glycoala-header__nav{
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--glycoala-brand-bg, var(--glycoala-moss));
    border-top: 1px solid rgba(247,243,232,.18);
    padding: 10px 0 28px;
    z-index: 999;

    /* Zatvoreno stanje: sklonjeno iznad i nevidljivo, ali bez display:none
       da prelaz može da se animira */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }

  .glycoala-nav-open .glycoala-header__nav{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .glycoala-header__nav ul{
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .glycoala-header__nav li{ display: block; }

  .glycoala-header__nav li a{
    display: block;
    padding: 14px 24px;
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--glycoala-parchment-card);
    border-bottom: 1px solid rgba(247,243,232,.12);
  }

  .glycoala-header__nav li:last-child a{ border-bottom: none; }

  .glycoala-header__nav li a:hover,
  .glycoala-header__nav .current-menu-item > a{
    background: rgba(247,243,232,.1);
  }

  /* Vizuelna oznaka otvorenog stanja na samom dugmetu */
  .glycoala-nav-open .glycoala-menu-toggle{
    background: var(--glycoala-parchment-card);
    color: var(--glycoala-moss);
  }
}

/* Dugme "Postani partner" unutar mobilnog menija — stoji ispod poslednje
   stavke (Kontakt), kao deo liste, a ne kao plutajući element */
.glycoala-nav-partner-btn{ display: none; }

@media (max-width: 860px){
  .glycoala-nav-partner-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 24px 0;
    padding: 14px 24px;
    border: 1px solid var(--glycoala-parchment-card);
    border-radius: 999px;
    color: var(--glycoala-parchment-card);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
  }

  .glycoala-nav-partner-btn:hover{
    background: var(--glycoala-parchment-card);
    color: var(--glycoala-moss);
  }
}

/* ==========================================================================
   Kontakt i društvene mreže unutar mobilnog menija
   ========================================================================== */
.glycoala-nav-contact{ display: none; }

@media (max-width: 860px){
  /* Top bar je na telefonu bio traka sa dve ikonice i ničim drugim —
     sadržaj mu je korisniji unutar menija */
  .glycoala-topbar{ display: none; }

  .glycoala-nav-contact{
    display: block;
    margin: 22px 24px 0;
    padding-top: 20px;
    border-top: 1px solid rgba(247,243,232,.18);
  }

  .glycoala-nav-contact > a,
  .glycoala-nav-contact > span{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 13px;
    color: rgba(247,243,232,.88);
    text-decoration: none;
  }

  .glycoala-nav-contact svg{ flex-shrink: 0; opacity: .8; }

  .glycoala-nav-social{
    display: flex;
    gap: 18px;
    margin-top: 16px;
  }

  .glycoala-nav-social a{
    color: var(--glycoala-parchment-card);
    opacity: .85;
  }

  .glycoala-nav-social a:hover{ opacity: 1; }
}

/* ==========================================================================
   POPUP NA POČETNOJ (newsletter)
   ========================================================================== */
body.glycoala-popup-open{ overflow: hidden; }

.glycoala-popup{
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.glycoala-popup[hidden]{ display: none; }

.glycoala-popup__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(32, 28, 22, 0.62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .25s ease;
}

.glycoala-popup.is-open .glycoala-popup__backdrop{ opacity: 1; }

.glycoala-popup__dialog{
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--glycoala-brand-bg, var(--glycoala-moss));
  border-radius: 14px;
  box-shadow: 0 40px 80px rgba(0,0,0,.35);
  border: 1px solid rgba(247,243,232,.14);
  overflow: hidden;
  transform: translateY(16px) scale(.97);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}

.glycoala-popup.is-open .glycoala-popup__dialog{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Tanka electric linija na vrhu — tu neonska nijansa stvarno pokazuje boju. */
.glycoala-popup__dialog::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--glycoala-electric);
}

.glycoala-popup__body{
  padding: clamp(32px, 5vw, 48px) clamp(24px, 4vw, 44px) clamp(28px, 4vw, 40px);
  text-align: center;
}

.glycoala-popup__title{
  font-family: var(--glycoala-font-display);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.25;
  color: var(--glycoala-parchment-card);
  margin: 0 0 14px;
}

.glycoala-popup__text{
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--glycoala-parchment-card);
  opacity: .82;
  margin: 0 auto 26px;
  max-width: 42ch;
}

.glycoala-popup .glycoala-newsletter{ max-width: 100%; }

.glycoala-popup .glycoala-newsletter__form{
  background: rgba(247,243,232,.1);
  border: 1px solid rgba(247,243,232,.22);
  border-radius: 999px;
  padding: 6px 6px 6px 20px;
  gap: 8px;
  transition: border-color .2s ease;
}

.glycoala-popup .glycoala-newsletter__form:focus-within{ border-color: var(--glycoala-electric); }

.glycoala-popup .glycoala-newsletter__form input[type="email"]{
  background: transparent;
  border: none;
  color: var(--glycoala-parchment-card);
  padding: 10px 0;
}

.glycoala-popup .glycoala-newsletter__form input[type="email"]::placeholder{ color: rgba(247,243,232,.55); }
.glycoala-popup .glycoala-newsletter__form input[type="email"]:focus{ outline: none; }

.glycoala-popup .glycoala-newsletter__btn{
  flex: 0 0 auto;
  background: var(--glycoala-electric);
  color: #10231A;
  border: none;
  border-radius: 999px;
  padding: 12px 24px;
  font-family: var(--glycoala-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .2s ease;
}

.glycoala-popup .glycoala-newsletter__btn:hover{ filter: brightness(1.1); }
.glycoala-popup .glycoala-newsletter__btn:disabled{ opacity: .6; cursor: default; }

.glycoala-popup .glycoala-newsletter__msg{ color: var(--glycoala-electric); }
.glycoala-popup .glycoala-newsletter__msg.is-error{ color: #FFB4A2; }

.glycoala-popup .glycoala-newsletter__consent{ color: var(--glycoala-parchment-card); opacity: .55; }

.glycoala-popup__close{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(247,243,232,.2);
  border: none;
  border-radius: 50%;
  color: var(--glycoala-parchment-card);
  cursor: pointer;
  transition: background .2s ease;
}

.glycoala-popup__close:hover{ background: rgba(247,243,232,.24); }
.glycoala-popup__close .dashicons{ font-size: 20px; width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce){
  .glycoala-popup__dialog,
  .glycoala-popup__backdrop{ transition: none; }
}

@media (max-width: 480px){
  .glycoala-popup{ padding: 14px; }
  .glycoala-popup .glycoala-newsletter__form{
    flex-wrap: wrap;
    border-radius: 14px;
    padding: 14px 16px;
  }
  .glycoala-popup .glycoala-newsletter__btn{ width: 100%; }
}

/* ==========================================================================
   KAPIJA PRODAVNICE — prijava + registracija (WooCommerce "Moj račun")
   ========================================================================== */
.glycoala-gate__head{
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(34px, 5vw, 54px);
}

.glycoala-gate__title{
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  margin: 0 0 14px;
  line-height: 1.18;
}

.glycoala-gate__text{
  font-size: 1.02rem;
  line-height: 1.7;
  opacity: .82;
  margin: 0 auto;
  max-width: 56ch;
}

.glycoala-gate{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 3vw, 40px);
  align-items: stretch;
  margin-bottom: clamp(40px, 6vw, 80px);
}

.glycoala-gate__col{
  background: var(--glycoala-parchment-card);
  border: 1px solid var(--glycoala-line);
  border-radius: 12px;
  padding: clamp(26px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
}

/* Registracija je željena akcija za nove posetioce — dobija electric okvir. */
.glycoala-gate__col--register{
  border-color: var(--glycoala-electric);
  box-shadow: 0 0 0 1px var(--glycoala-electric), 0 18px 40px rgba(38,48,31,.1);
  background:
    linear-gradient(var(--glycoala-electric-soft), var(--glycoala-electric-soft)),
    var(--glycoala-parchment-card);
}

.glycoala-gate__col-title{
  font-family: var(--glycoala-font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  color: var(--glycoala-moss);
  margin: 0 0 10px;
}

.glycoala-gate__col-text{
  font-size: 14.5px;
  line-height: 1.7;
  opacity: .82;
  margin: 0 0 24px;
  max-width: none;
}

/* WooCommerce ubacuje svoj <h2>Prijava</h2> — naš naslov je već iznad. */
.glycoala-gate__col--login > h2:not(.glycoala-gate__col-title){ display: none; }

.glycoala-gate__form{ margin: 0; }

.glycoala-gate__form .form-row,
.glycoala-gate__form .woocommerce-form-row{
  display: block;
  margin: 0 0 18px;
  padding: 0;
}

.glycoala-gate__form label{
  display: block;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--glycoala-moss);
  margin-bottom: 8px;
}

.glycoala-gate__form input[type="text"],
.glycoala-gate__form input[type="password"]{
  width: 100%;
  background: #fff;
  border: 1px solid var(--glycoala-line);
  border-radius: 6px;
  padding: 13px 15px;
  font-family: var(--glycoala-font-body);
  font-size: 15px;
  color: var(--glycoala-ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.glycoala-gate__form input[type="text"]:focus,
.glycoala-gate__form input[type="password"]:focus{
  outline: none;
  border-color: var(--glycoala-clay);
  box-shadow: 0 0 0 3px var(--glycoala-electric-soft);
}

.glycoala-gate__form .required{ color: var(--glycoala-clay); }

.glycoala-gate__form-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
}

.glycoala-gate__form .woocommerce-form-login__rememberme{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  opacity: .82;
}

.glycoala-gate__form .woocommerce-form-login__rememberme input{ margin: 0; }

.glycoala-gate__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* Kolona je flex container, pa bi se dugme bez ovoga razvuklo celom širinom. */
  align-self: flex-start;
  background: var(--glycoala-brand-bg, var(--glycoala-moss));
  color: var(--glycoala-parchment-card) !important;
  border: none;
  border-radius: 999px;
  padding: 14px 30px;
  font-family: var(--glycoala-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.glycoala-gate__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(38,48,31,.22);
  color: var(--glycoala-parchment-card) !important;
}

.glycoala-gate__btn--outline{
  background: transparent;
  color: var(--glycoala-clay) !important;
  border: 2px solid var(--glycoala-clay);
}

.glycoala-gate__btn--outline:hover{
  background: var(--glycoala-clay);
  color: var(--glycoala-parchment-card) !important;
}

.glycoala-gate__btn .arrow{ transition: transform .2s ease; }
.glycoala-gate__btn:hover .arrow{ transform: translateX(4px); }

.glycoala-gate__list{
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 11px;
}

.glycoala-gate__list li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
}

.glycoala-gate__list .dashicons{
  flex: 0 0 auto;
  color: var(--glycoala-clay);
  font-size: 19px;
  width: 19px;
  height: 19px;
  margin-top: 1px;
}

.glycoala-gate__note{
  font-size: 12.5px;
  opacity: .62;
  margin: auto 0 0;
  padding-top: 18px;
  max-width: none;
}

.glycoala-gate .lost_password{
  margin: 14px 0 0;
  font-size: 13.5px;
}

.glycoala-gate .lost_password a{ color: var(--glycoala-clay); }

/* Ulogovan korisnik vidi običan "Moj račun" — bez kapija. */
.woocommerce-account.logged-in .glycoala-gate__head{ display: none; }

@media (max-width: 860px){
  .glycoala-gate{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .glycoala-gate__btn{ align-self: stretch; width: 100%; }
}

/* ==========================================================================
   PDF DUGME (Mediji + Trening materijal)
   ========================================================================== */
.glycoala-pdf-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--glycoala-parchment);
  border: 1px solid var(--glycoala-clay);
  border-radius: 8px;
  padding: 11px 16px;
  color: var(--glycoala-clay) !important;
  text-decoration: none;
  font-family: var(--glycoala-font-body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.glycoala-pdf-btn:hover{
  background: var(--glycoala-clay);
  color: var(--glycoala-parchment-card) !important;
  transform: translateY(-2px);
}

.glycoala-pdf-btn .dashicons{
  flex: 0 0 auto;
  font-size: 20px;
  width: 20px;
  height: 20px;
}

.glycoala-pdf-btn__meta{
  font-size: 11.5px;
  font-weight: 400;
  opacity: .7;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* ==========================================================================
   VIDEO (Trening materijal)
   ========================================================================== */
.glycoala-video,
.glycoala-video-embed iframe,
.glycoala-video-embed video{
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  display: block;
  border: 0;
  border-radius: 10px;
  background: #000;
}

.glycoala-video-embed{
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

/* ==========================================================================
   STRANICA TRENING MATERIJAL
   ========================================================================== */
.glycoala-training,
.glycoala-training-single,
.glycoala-press{
  padding-top: clamp(40px, 6vw, 70px);
  padding-bottom: clamp(60px, 8vw, 100px);
}

.glycoala-training__head,
.glycoala-press__head{
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(34px, 5vw, 56px);
}

.glycoala-training__title,
.glycoala-press__title{
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0 0 16px;
  line-height: 1.16;
}

.glycoala-training__intro,
.glycoala-press__intro{
  font-size: 1.02rem;
  line-height: 1.7;
  opacity: .82;
  margin: 0 auto;
  max-width: 58ch;
}

.glycoala-training__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 36px);
}

.glycoala-training-card{
  display: flex;
  flex-direction: column;
  background: var(--glycoala-parchment-card);
  border: 1px solid var(--glycoala-line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(38,48,31,.08);
  transition: box-shadow .25s ease, transform .25s ease;
}

.glycoala-training-card:hover{
  box-shadow: 0 20px 40px rgba(38,48,31,.16);
  transform: translateY(-4px);
}

.glycoala-training-card__video,
.glycoala-training-card__media{
  background: var(--glycoala-parchment);
  border-bottom: 1px solid var(--glycoala-line);
}

.glycoala-training-card__video .glycoala-video,
.glycoala-training-card__video .glycoala-video-embed iframe{ border-radius: 0; }

.glycoala-training-card__media{
  aspect-ratio: 16/9;
  overflow: hidden;
}

.glycoala-training-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.glycoala-training-card__body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px;
}

.glycoala-training-card__title{
  font-family: var(--glycoala-font-display);
  font-size: 1.22rem;
  line-height: 1.3;
  margin: 0 0 10px;
}

.glycoala-training-card__title a{
  color: var(--glycoala-moss);
  text-decoration: none;
}

.glycoala-training-card__title a:hover{ color: var(--glycoala-clay); }

.glycoala-training-card__text{
  font-size: 14.5px;
  line-height: 1.65;
  opacity: .82;
  margin: 0 0 20px;
  max-width: none;
}

.glycoala-training-card__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}

.glycoala-training-card__more{
  color: var(--glycoala-clay);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.glycoala-training-card__more .arrow{ display: inline-block; transition: transform .2s ease; }
.glycoala-training-card__more:hover .arrow{ transform: translateX(4px); }

.glycoala-training__pagination,
.glycoala-press__pagination{ margin-top: clamp(40px, 5vw, 60px); }

.glycoala-training__empty,
.glycoala-press__empty{
  text-align: center;
  padding: 40px 0;
  opacity: .75;
  max-width: 52ch;
  margin: 0 auto;
}

/* --- pojedinačni materijal --- */
.glycoala-training-single__article{ max-width: 860px; margin: 0 auto; }

.glycoala-training-single__head{ text-align: center; margin-bottom: clamp(26px, 4vw, 40px); }

.glycoala-training-single__title{
  font-size: clamp(1.8rem, 4.4vw, 2.6rem);
  line-height: 1.2;
  margin: 0;
}

.glycoala-training-single__video,
.glycoala-training-single__media{ margin-bottom: clamp(28px, 4vw, 42px); }

.glycoala-training-single__media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.glycoala-training-single__download,
.glycoala-press-single__download{
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(24px, 3vw, 32px);
  background: var(--glycoala-parchment-card);
  border: 1px solid var(--glycoala-line);
  border-left: 3px solid var(--glycoala-electric);
  border-radius: 10px;
}

.glycoala-training-single__download-title,
.glycoala-press-single__download-title{
  font-family: var(--glycoala-font-body);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--glycoala-moss);
  margin: 0 0 16px;
}

.glycoala-training-single__back{
  margin-top: clamp(34px, 4vw, 50px);
  padding-top: 24px;
  border-top: 1px solid var(--glycoala-line);
  font-size: 13.5px;
}

.glycoala-training-single__back a{
  color: var(--glycoala-clay);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   STRANICA MEDIJI — tri kolone sa PDF preuzimanjem
   ========================================================================== */
.glycoala-press__grid{ padding: 0; max-width: none; }

.glycoala-press-card{
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.glycoala-press-card__media{
  display: block;
  text-decoration: none;
}

.glycoala-press-card .glycoala-blog-card__media{
  margin-bottom: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--glycoala-line);
}

.glycoala-press-card__placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(var(--glycoala-electric-soft), var(--glycoala-electric-soft)),
    var(--glycoala-parchment);
}

.glycoala-press-card__placeholder .dashicons{
  font-size: 46px;
  width: 46px;
  height: 46px;
  color: var(--glycoala-clay);
  opacity: .5;
}

.glycoala-press-card__body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 24px;
}

.glycoala-press-card__title{ margin-bottom: 10px; }
.glycoala-press-card__title a{ color: var(--glycoala-moss); text-decoration: none; }
.glycoala-press-card__title a:hover{ color: var(--glycoala-clay); }

.glycoala-press-card__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 4px;
}

/* Tri kolone → dve → jedna. Granice su eksplicitne (and min-width) jer bi inače
   ovo pravilo, kao kasnije u fajlu, pobedilo i na telefonu. */
@media (max-width: 980px) and (min-width: 721px){
  .glycoala-training__grid,
  .glycoala-press__grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px){
  .glycoala-training__grid,
  .glycoala-press__grid{ grid-template-columns: 1fr; }
  .glycoala-pdf-btn{ width: 100%; justify-content: center; }
  .glycoala-training-card__actions,
  .glycoala-press-card__actions{ flex-direction: column; align-items: stretch; gap: 12px; }
  .glycoala-training-card__more,
  .glycoala-press-card__actions .glycoala-blog-card__more{ text-align: center; }
}

/* --------------------------------------------------------------------------
   PDF: preuzimanje + otvaranje u novom prozoru
   Isti fajl, dve radnje — dugme snima, link otvara na čitanje.
   -------------------------------------------------------------------------- */
.glycoala-pdf-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}

.glycoala-pdf-open{
  color: var(--glycoala-clay);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.glycoala-pdf-open:hover{ color: var(--glycoala-clay-dark); text-decoration: underline; }
.glycoala-pdf-open .arrow{ display: inline-block; transition: transform .2s ease; }
.glycoala-pdf-open:hover .arrow{ transform: translateX(4px); }

@media (max-width: 720px){
  .glycoala-pdf-actions{ flex-direction: column; align-items: stretch; gap: 12px; }
  .glycoala-pdf-open{ text-align: center; }
}

/* ==========================================================================
   SEKCIJA "PRE I POSLE"
   Slike su kompozitne (levo pre, desno posle), pa tema ne poredi nego
   uokviruje: okvir, linija po sredini i dve oznake koje kažu šta je šta.
   ========================================================================== */
.glycoala-ba{
  padding: clamp(60px, 9vw, 110px) 0;
  background: var(--glycoala-parchment-card);
  border-top: 1px solid var(--glycoala-line);
  border-bottom: 1px solid var(--glycoala-line);
}

.glycoala-ba__head{
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(36px, 5vw, 60px);
}

.glycoala-ba__title{
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  margin: 0 0 14px;
  line-height: 1.18;
}

.glycoala-ba__intro{
  font-size: 1.02rem;
  line-height: 1.7;
  opacity: .82;
  margin: 0 auto;
  max-width: 54ch;
}

.glycoala-ba__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3vw, 38px);
}

/* Sa jednom ili dve slike mreža se sužava da kolone ne ostanu razvučene. */
.glycoala-ba--1 .glycoala-ba__grid{ grid-template-columns: minmax(0, 560px); justify-content: center; }
.glycoala-ba--2 .glycoala-ba__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin: 0 auto; }

.glycoala-ba__item{
  margin: 0;
  background: var(--glycoala-parchment);
  border: 1px solid var(--glycoala-line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(38,48,31,.09);
  transition: box-shadow .25s ease, transform .25s ease;
}

.glycoala-ba__item:hover{
  box-shadow: 0 24px 46px rgba(38,48,31,.16);
  transform: translateY(-4px);
}

.glycoala-ba__media{
  position: relative;
  display: block;
  line-height: 0;
  background: var(--glycoala-parchment);
}

.glycoala-ba__media img{
  width: 100%;
  height: auto;
  display: block;
}

/* Tanka linija tačno po sredini, na spoju dve polovine fotografije. */
.glycoala-ba__split{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--glycoala-electric);
  opacity: .9;
  box-shadow: 0 0 0 1px rgba(32,28,22,.18);
}

/* Oznake su tamne pilule sa svetlim tekstom — čitaju se preko bilo koje
   fotografije, i preko svetle kože i preko tamne pozadine. */
.glycoala-ba__tag{
  position: absolute;
  bottom: 12px;
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(32, 28, 22, 0.76);
  color: var(--glycoala-parchment-card);
  font-family: var(--glycoala-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  backdrop-filter: blur(3px);
}

.glycoala-ba__tag--before{ left: 12px; }

.glycoala-ba__tag--after{
  right: 12px;
  background: var(--glycoala-electric);
  color: #10231A;
}

.glycoala-ba__caption{
  padding: 20px 22px 24px;
  text-align: center;
}

.glycoala-ba__name{
  font-family: var(--glycoala-font-display);
  font-size: 1.16rem;
  line-height: 1.3;
  color: var(--glycoala-moss);
  margin: 0 0 6px;
}

.glycoala-ba__note{
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--glycoala-clay);
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 0;
  max-width: none;
}

.glycoala-ba__disclaimer{
  margin: clamp(28px, 4vw, 44px) auto 0;
  max-width: 68ch;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
  opacity: .62;
}

@media (max-width: 900px){
  .glycoala-ba__grid,
  .glycoala-ba--2 .glycoala-ba__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px){
  .glycoala-ba__grid,
  .glycoala-ba--1 .glycoala-ba__grid,
  .glycoala-ba--2 .glycoala-ba__grid{ grid-template-columns: minmax(0, 1fr); }
  .glycoala-ba__tag{ font-size: 10px; padding: 4px 10px; }
}

@media (prefers-reduced-motion: reduce){
  .glycoala-ba__item{ transition: none; }
  .glycoala-ba__item:hover{ transform: none; }
}

/* ==========================================================================
   FONT UNUTAR ELEMENTORA
   Elementor svoju globalnu tipografiju postavlja na <body> (.elementor-kit-XX),
   pa tekst u njegovim widgetima dolazi NASLEĐIVANJEM. Nasleđena vrednost gubi
   od bilo kog pravila zadatog direktno na elementu — zato ovde ciljamo same
   widgete i time vraćamo fontove teme, bez ijednog !important.
   Posledica: ako na pojedinom widgetu namerno izabereš drugi font u Elementoru,
   taj izbor i dalje pobeđuje, jer Elementor ga ispisuje direktno na tom elementu.
   ========================================================================== */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-text-editor td,
.elementor-widget-icon-list .elementor-icon-list-text,
.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-image-box .elementor-image-box-description,
.elementor-widget-button .elementor-button,
.elementor-widget-accordion .elementor-tab-content,
.elementor-widget-toggle .elementor-tab-content,
.elementor-widget-tabs .elementor-tab-content,
.elementor-widget-shortcode,
.elementor-widget-shortcode p{
  font-family: var(--glycoala-font-body);
}

/* Druga polovina problema: Elementorovo globalno pravilo stoji na samom <body>
   (body.elementor-kit-XX, specifičnost 0-1-1) i pobeđuje teminu `body` deklaraciju
   (0-0-1). Posledica je da i tekst koji ispisuje TEMA — footer, prodavnica,
   kartice, sekcija Pre i posle — dobije Elementorov font, pa sajt izgleda kao da
   ima dva različita fonta. Selektor ispod ima 0-1-2 i vraća kontrolu temi.
   Fontovi se zato menjaju ovde u temi, a ne u Elementor → Site Settings. */
html body[class*="elementor-kit-"]{
  font-family: var(--glycoala-font-body);
}

/* Naslovi u Elementoru prate naslovni font teme. */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-image-box .elementor-image-box-title,
.elementor-widget-accordion .elementor-tab-title,
.elementor-widget-toggle .elementor-tab-title,
.elementor-widget-tabs .elementor-tab-title{
  font-family: var(--glycoala-font-display);
  font-optical-sizing: auto;
}