/* ============================================================
   Hug Bug — glavni stil
   Redosled odeljaka: tokeni → osnova → Elementor bridž → raspored
   → tipografija → dugmad/animacije → zaglavlje/futer → sekcije
   → WooCommerce → responzivno
   ============================================================ */

/* ── 1. Tokeni ───────────────────────────────────────────── */
:root{
	--milk:#FBF8F3;      --milk-rgb:251 248 243;
	--linen:#EFE6D9;     --linen-rgb:239 230 217;
	--fawn:#AF9784;      --fawn-rgb:175 151 132;
	--sage:#9CA88F;      --sage-rgb:156 168 143;
	--sagedark:#7C8870;  --sagedark-rgb:124 136 112;
	--terracotta:#C97B5A;--terracotta-rgb:201 123 90;
	--terradark:#B3654A;
	--cocoa:#4A3B33;     --cocoa-rgb:74 59 51;
	--blush:#E7CFC7;     --blush-rgb:231 207 199;

	--boja-bez:#D6BB9B;
	--boja-siva:#C6C6C2;
	--boja-tamnosiva:#6B6963;

	--sirina:80rem;              /* max-w-7xl */
	--pad:1.5rem;                /* px-6 */
	--radijus:1.75rem;           /* rounded-xl2 */
	--radijus-mali:.5rem;

	--font-naslov:'Corben',Georgia,serif;
	--font-telo:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

	--lako:cubic-bezier(.22,.61,.36,1);
	--odskok:cubic-bezier(.34,1.56,.64,1);
}
@media (min-width:768px){ :root{ --pad:2.5rem; } }   /* md:px-10 */

/* ── 2. Osnova ───────────────────────────────────────────── */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
	font-family:var(--font-telo);
	color:var(--cocoa);
	background:var(--milk);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	margin:0;
}
h1,h2,h3,h4,.hb-display{ font-family:var(--font-naslov); font-weight:400; margin:0; }
p{ margin:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
::selection{ background:var(--blush); color:var(--cocoa); }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
	outline:2px solid var(--sagedark); outline-offset:3px; border-radius:4px;
}

/* ── 3. Elementor bridž ──────────────────────────────────── */
/* Elementor za svaki kontejner piše pravilo specifičnosti 0,3,0 preko custom
   propertija. Gasi se na izvoru — bez `!important` (playbooks/08 §1). */
.elementor .elementor-element.e-con{
	--display:block;
	--width:auto;
	--content-width:100%;
	--min-height:auto;
	--padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px;
	--margin-top:0px; --margin-right:0px; --margin-bottom:0px; --margin-left:0px;
	--gap:0px; --row-gap:0px; --column-gap:0px;
	--flex-direction:row; --flex-wrap:initial;
	--justify-content:initial; --align-items:initial; --align-content:initial;
}

/* `max-width:100%` na widgetu je 0,4,0 i bije klasu — meru dajemo promenljivom (§23). */
.elementor.elementor .e-con > .elementor-widget,
.elementor.elementor .e-con > .e-con > .elementor-widget{ max-width:var(--hb-max,100%); }

/* Kit dodaje 20px svakom widgetu koji nije poslednji — gasi se na izvoru (§17). */
.elementor .elementor-element.elementor-widget{ --kit-widget-spacing:0px; }

/* Overlay je ukras — nikad ne sme da hvata klikove u uređivaču (§15). */
.elementor-background-overlay{ pointer-events:none; }

/* Tipografija se postavlja na OMOTAČ widgeta, da iste klase rade i u
   ručnom markupu (zaglavlje/futer) i u Elementoru (§7). */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor .elementor-widget-container > *,
.elementor-widget-text-editor > *{
	font:inherit; color:inherit; letter-spacing:inherit; line-height:inherit; margin:0;
}
.elementor-widget-text-editor p + p{ margin-top:1em; }

/* Doslovan `display` na svakom omotaču — bez ovoga se UREĐIVAČ raspada (§9). */
.hb-sekcija,.hb-wrap,.hb-hero,.hb-hero__sadrzaj,.hb-hero__dugmad,
.hb-poverenje,.hb-poverenje__mreza,.hb-poverenje__st,
.hb-proizvodi,.hb-proizvodi__uvod,.hb-zasto,.hb-zasto__uvod,.hb-zasto__mreza,
.hb-kartica-info,
.hb-vodic,.hb-vodic__levo,.hb-vodic__mreza,.hb-vodic__koraci,.hb-korak,
.hb-vodic__video,
.hb-utisci,.hb-utisci__uvod,.hb-utisci__mreza,.hb-utisak,
.hb-zaglavlje,.hb-futer,.hb-zaglavlje__traka{ display:block; }

.hb-hero__dugmad,.hb-korak,.hb-zaglavlje__traka{ display:flex; }
.hb-poverenje__mreza,.hb-zasto__mreza,.hb-utisci__mreza,.hb-vodic__mreza{ display:grid; }

/* ── 4. Raspored ─────────────────────────────────────────── */
.hb-wrap{ max-width:var(--sirina); margin-inline:auto; padding-inline:var(--pad); }
.hb-sekcija{ padding-block:5rem; }
@media (min-width:768px){ .hb-sekcija{ padding-block:7rem; } }

.hb-bg-milk{ background:var(--milk); }
.hb-bg-linen{ background:rgb(var(--linen-rgb)/.6); }
.hb-bg-cocoa{ background:var(--cocoa); color:var(--milk); }

/* ── 5. Tipografija ─────────────────────────────────────── */
.hb-eyebrow{
	font-size:.75rem; line-height:1rem; letter-spacing:.2em;
	text-transform:uppercase; color:var(--sagedark); font-weight:400;
}
.hb-h1{ font-family:var(--font-naslov); font-size:2.25rem; line-height:1.08; }
.hb-h2{ font-family:var(--font-naslov); font-size:1.875rem; line-height:1.2; }
.hb-h3{ font-family:var(--font-naslov); font-size:1.25rem; line-height:1.4; }
.hb-lead{ font-size:1.125rem; line-height:1.625; color:rgb(var(--cocoa-rgb)/.75); }
.hb-telo{ font-size:1rem; line-height:1.625; color:rgb(var(--cocoa-rgb)/.7); }
.hb-sitno{ font-size:.875rem; line-height:1.625; color:rgb(var(--cocoa-rgb)/.7); }

@media (min-width:768px){
	.hb-h1{ font-size:3.75rem; }
	.hb-h2{ font-size:2.25rem; }
	.hb-lead{ font-size:1.25rem; }
}

/* Zvezdice — CSS crta, markup ostaje čist */
.hb-zvezde{ color:var(--terracotta); font-size:.75rem; letter-spacing:.05em; }
.hb-zvezde--sm{ font-size:.875rem; }

/* ── 6. Dugmad + animacije ───────────────────────────────── */
/* Zajednička osnova; Elementorov `button` widget dobija istu klasu na OMOTAČU. */
.hb-btn,
.hb-btn .elementor-button,
.hb-kartica__cta,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .button.alt{
	--sjaj:rgb(255 255 255/.28);
	position:relative; overflow:hidden;
	display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
	font-family:var(--font-telo); font-size:.875rem; font-weight:500; line-height:1;
	padding:.875rem 1.75rem; border-radius:9999px; border:0; cursor:pointer;
	text-decoration:none; white-space:nowrap;
	background:var(--terracotta); color:#fff;
	transition:background-color .28s var(--lako), transform .28s var(--odskok),
	           box-shadow .28s var(--lako), color .28s var(--lako);
	box-shadow:0 8px 20px -8px rgb(var(--terracotta-rgb)/.55);
	will-change:transform;
}
.hb-btn:hover, .hb-btn .elementor-button:hover,
.hb-kartica__cta:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover{
	background:var(--terradark); color:#fff;
	transform:translateY(-2px);
	box-shadow:0 14px 28px -10px rgb(var(--terracotta-rgb)/.6);
}
.hb-btn:active, .hb-btn .elementor-button:active,
.woocommerce a.button:active, .woocommerce button.button:active{
	transform:translateY(0) scale(.985);
	transition-duration:.09s;
}

/* Sjaj koji prelazi preko dugmeta na hover — nosi ga ::after
   (::before na .e-con je zauzet Background Overlay-em, §25). */
.hb-btn .elementor-button::after,
.hb-btn-sjaj::after,
.hb-kartica__cta::after,
.woocommerce a.button::after, .woocommerce button.button::after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(105deg,transparent 35%,var(--sjaj) 50%,transparent 65%);
	transform:translateX(-120%);
	transition:transform .7s var(--lako);
	pointer-events:none;
}
.hb-btn:hover .elementor-button::after,
.hb-btn-sjaj:hover::after,
.hb-kartica__cta:hover::after,
.woocommerce a.button:hover::after, .woocommerce button.button:hover::after{
	transform:translateX(120%);
}

/* Varijante */
.hb-btn--cocoa .elementor-button, .hb-btn--cocoa{
	background:var(--cocoa); color:var(--milk);
	box-shadow:0 8px 20px -10px rgb(var(--cocoa-rgb)/.5);
}
.hb-btn--cocoa:hover .elementor-button, .hb-btn--cocoa:hover{ background:var(--terradark); color:#fff; }

.hb-btn--belo .elementor-button, .hb-btn--belo{
	background:rgb(255 255 255/.95); color:var(--cocoa); box-shadow:none;
}
.hb-btn--belo:hover .elementor-button, .hb-btn--belo:hover{ background:#fff; color:var(--cocoa); }

.hb-btn--obris .elementor-button, .hb-btn--obris{
	background:transparent; color:var(--cocoa);
	border:1px solid rgb(var(--cocoa-rgb)/.2); box-shadow:none;
}
.hb-btn--obris:hover .elementor-button, .hb-btn--obris:hover{
	background:var(--cocoa); color:var(--milk); border-color:var(--cocoa);
}

/* Tekstualni link sa podvlakom koja se izvlači */
.hb-btn--link .elementor-button, .hb-btn--link{
	background:none; box-shadow:none; padding:0; color:rgb(255 255 255/.9);
	font-weight:400; border-radius:0;
}
.hb-btn--link .elementor-button:hover, .hb-btn--link:hover{
	background:none; transform:none; box-shadow:none; color:#fff;
}
.hb-veza-podvlaka{ position:relative; text-decoration:none; }
.hb-veza-podvlaka::after{
	content:""; position:absolute; left:0; right:0; bottom:-.35em; height:1px;
	background:currentColor; opacity:.4;
	transform:scaleX(1); transform-origin:right;
	transition:transform .35s var(--lako), opacity .35s var(--lako);
}
.hb-veza-podvlaka:hover::after{ opacity:1; transform-origin:left; }

/* Meni: podvlaka izlazi iz sredine */
.hb-nav a{
	position:relative; text-decoration:none;
	transition:color .25s var(--lako);
}
.hb-nav a::after{
	content:""; position:absolute; left:0; bottom:-.4em; height:1px; width:100%;
	background:currentColor; transform:scaleX(0); transform-origin:center;
	transition:transform .3s var(--lako);
}
.hb-nav a:hover::after, .hb-nav .current-menu-item > a::after{ transform:scaleX(1); }

/* ── 7. Otkrivanje na skrol ──────────────────────────────── */
.hb-otkrij{ opacity:0; transform:translateY(18px); }
body.hb-js .hb-otkrij{
	transition:opacity .8s var(--lako), transform .8s var(--lako);
}
body.hb-js .hb-otkrij.je-vidljiv, body:not(.hb-js) .hb-otkrij{
	opacity:1; transform:none;
}
@media (prefers-reduced-motion:reduce){
	.hb-otkrij, body.hb-js .hb-otkrij{ opacity:1 !important; transform:none !important; }
}

/* ── 8. Zaglavlje ───────────────────────────────────────── */
.hb-zaglavlje{
	position:sticky; top:0; z-index:30;
	background:rgb(var(--milk-rgb)/.95);
	backdrop-filter:blur(8px);
	border-bottom:1px solid rgb(var(--cocoa-rgb)/.1);
}
.hb-zaglavlje--preko{           /* naslovna: prozirno preko heroja */
	position:absolute; left:0; right:0; top:0;
	background:transparent; border-bottom:0; backdrop-filter:none;
	color:#fff;
}
.hb-zaglavlje__traka{
	max-width:var(--sirina); margin-inline:auto; padding:1rem var(--pad);
	align-items:center; justify-content:space-between; gap:1rem;
}
.hb-zaglavlje--preko .hb-zaglavlje__traka{ padding-block:1.5rem; }
.hb-logo img{ height:2.75rem; width:auto; transition:transform .35s var(--odskok); }
.hb-logo:hover img{ transform:scale(1.05) rotate(-2deg); }
.hb-zaglavlje--preko .hb-logo img{ height:3.5rem; filter:drop-shadow(0 1px 2px rgb(0 0 0/.15)); }

.hb-nav{ display:none; align-items:center; gap:2rem; font-size:.875rem; }
.hb-nav ul{ display:flex; align-items:center; gap:2rem; list-style:none; margin:0; padding:0; }
.hb-nav a{ color:rgb(var(--cocoa-rgb)/.8); }
.hb-nav a:hover{ color:var(--cocoa); }
.hb-zaglavlje--preko .hb-nav a{ color:rgb(255 255 255/.9); }
.hb-zaglavlje--preko .hb-nav a:hover{ color:#fff; }

.hb-zaglavlje__desno{ display:flex; align-items:center; gap:1rem; }

/* Korpa u zaglavlju */
.hb-korpa{ position:relative; display:inline-flex; align-items:center; padding:.4rem; color:inherit; }
.hb-korpa__ikona{
	width:1.35rem; height:1.35rem; display:block; background:currentColor;
	-webkit-mask:var(--ik-korpa) center/contain no-repeat; mask:var(--ik-korpa) center/contain no-repeat;
	transition:transform .3s var(--odskok);
}
.hb-korpa:hover .hb-korpa__ikona{ transform:translateY(-2px) scale(1.08); }
.hb-korpa__broj{
	position:absolute; top:-.15rem; right:-.3rem; min-width:1.05rem; height:1.05rem;
	display:grid; place-items:center; padding:0 .25rem;
	background:var(--terracotta); color:#fff; font-size:.625rem; font-weight:600;
	border-radius:9999px; line-height:1;
	animation:hb-pop .35s var(--odskok);
}
.hb-korpa__broj.je-prazna{ display:none; }
@keyframes hb-pop{ from{ transform:scale(0); } to{ transform:scale(1); } }

/* Hamburger (mobilni) */
.hb-hamburger{
	display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
	width:2.5rem; height:2.5rem; padding:.6rem; background:none; border:0; cursor:pointer;
}
.hb-hamburger span{
	display:block; height:2px; background:currentColor; border-radius:2px;
	transition:transform .3s var(--lako), opacity .2s var(--lako);
}
.hb-hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hb-hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hb-hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.hb-meni-mob{
	display:none; background:var(--milk); border-top:1px solid rgb(var(--cocoa-rgb)/.1);
	padding:1rem var(--pad) 1.5rem;
}
.hb-meni-mob.je-otvoren{ display:block; }
.hb-meni-mob ul{ list-style:none; margin:0; padding:0; display:grid; gap:.25rem; }
.hb-meni-mob a{
	display:block; padding:.75rem .25rem; color:var(--cocoa); text-decoration:none;
	border-bottom:1px solid rgb(var(--cocoa-rgb)/.07);
}

@media (min-width:768px){
	.hb-nav{ display:flex; }
	.hb-hamburger{ display:none; }
	.hb-meni-mob{ display:none !important; }
	.hb-logo img{ height:3rem; }
	.hb-zaglavlje--preko .hb-logo img{ height:4rem; }
}

/* ── 9. Hero ────────────────────────────────────────────── */
.hb-hero{ position:relative; overflow:hidden; }
.hb-hero .hb-wrap{ position:relative; padding-block:10rem; }
@media (min-width:768px){ .hb-hero .hb-wrap{ padding-block:13rem 14rem; } }

.hb-hero__sadrzaj{ max-width:36rem; color:#fff; }
.hb-hero__pill{
	display:inline-block; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
	color:rgb(255 255 255/.9); border:1px solid rgb(255 255 255/.4);
	border-radius:9999px; padding:.375rem 1rem;
}
.hb-hero__naslov{ color:#fff; font-weight:500; }
.hb-hero__tekst{ color:rgb(255 255 255/.9); max-width:28rem; }
.hb-hero__dugmad{ flex-wrap:wrap; align-items:center; gap:1rem; }

/* Talasasti prelaz u sledeću sekciju — ::after je slobodan na kontejneru (§25) */
.hb-hero::after{
	content:""; position:absolute; left:0; right:0; bottom:-1px; height:60px;
	background:var(--milk);
	-webkit-mask:var(--tr-dole) bottom/100% 100% no-repeat;
	mask:var(--tr-dole) bottom/100% 100% no-repeat;
	pointer-events:none;
}

/* ── 10. Traka poverenja ────────────────────────────────── */
.hb-poverenje{ padding-block:3.5rem; }
@media (min-width:768px){ .hb-poverenje{ padding-block:4rem; } }
.hb-poverenje__mreza{ grid-template-columns:repeat(2,1fr); gap:2rem; text-align:center; }
@media (min-width:768px){ .hb-poverenje__mreza{ grid-template-columns:repeat(4,1fr); gap:1.5rem; } }

.hb-poverenje__st{ display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.hb-poverenje__st .hb-ikona{
	transition:transform .4s var(--odskok), background-color .4s var(--lako);
}
.hb-poverenje__st:hover .hb-ikona{ transform:translateY(-3px) scale(1.06); background:rgb(var(--sage-rgb)/.28); }

/* Ikonica se crta maskom preko pseudo-elementa omotača */
.hb-ikona{
	width:3rem; height:3rem; border-radius:9999px; display:grid; place-items:center;
	background:rgb(var(--sage-rgb)/.15); flex:0 0 auto;
}
.hb-ikona::before{
	content:""; width:1.375rem; height:1.375rem; background:var(--sagedark);
	-webkit-mask:var(--ik) center/contain no-repeat; mask:var(--ik) center/contain no-repeat;
	/* .e-con::before je Elementorov Background Overlay (position:absolute) —
	   bez ovoga ikonica ispadne iz toka i sedne u ugao (playbooks/08 §25). */
	position:relative; inset:auto;
}

/* ── 11. Proizvodi (sekcija na naslovnoj) ───────────────── */
.hb-proizvodi__uvod{ max-width:36rem; margin-bottom:3rem; }

/* ── 12. Zašto Hug Bug ──────────────────────────────────── */
.hb-zasto__uvod{ text-align:center; max-width:42rem; margin-inline:auto; margin-bottom:3.5rem; }
.hb-zasto__mreza{ grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:768px){ .hb-zasto__mreza{ grid-template-columns:repeat(3,1fr); } }

.hb-kartica-info{
	border-radius:var(--radijus); padding:2rem;
	transition:transform .45s var(--lako), box-shadow .45s var(--lako);
}
.hb-kartica-info:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -22px rgb(var(--cocoa-rgb)/.35); }
.hb-kartica-info--blush{ background:rgb(var(--blush-rgb)/.4); }
.hb-kartica-info--sage{ background:rgb(var(--sage-rgb)/.15); }
.hb-kartica-info--linen{ background:var(--linen); }

/* ── 13. Vodič ──────────────────────────────────────────── */
.hb-vodic{
	position:relative; overflow:hidden;
	background:rgb(var(--sagedark-rgb)/.95); color:var(--milk);
	padding-block:6rem 5rem;
}
@media (min-width:768px){ .hb-vodic{ padding-block:7rem 6rem; } }
.hb-vodic::before{
	content:""; position:absolute; left:0; right:0; top:0; height:60px;
	background:var(--milk);
	-webkit-mask:var(--tr-gore) top/100% 100% no-repeat;
	mask:var(--tr-gore) top/100% 100% no-repeat;
	pointer-events:none; z-index:1;
}
.hb-vodic__mreza{ grid-template-columns:1fr; gap:3.5rem; align-items:center; position:relative; z-index:2; }
@media (min-width:768px){ .hb-vodic__mreza{ grid-template-columns:repeat(2,1fr); } }

.hb-vodic__koraci{ display:grid; gap:1.5rem; }
.hb-korak{ gap:1rem; align-items:flex-start; }
.hb-korak__broj{
	font-family:var(--font-naslov); font-size:1.5rem; line-height:1.2;
	color:rgb(var(--milk-rgb)/.5); width:2rem; flex:0 0 auto;
	transition:color .35s var(--lako), transform .35s var(--odskok);
}
.hb-korak:hover .hb-korak__broj{ color:var(--milk); transform:scale(1.12); }
.hb-korak__tekst{ color:rgb(var(--milk-rgb)/.9); font-size:.875rem; line-height:1.625; padding-top:.25rem; }
@media (min-width:768px){ .hb-korak__tekst{ font-size:1rem; } }

/* ── 14. Utisci ─────────────────────────────────────────── */
.hb-utisci__uvod{ text-align:center; max-width:36rem; margin-inline:auto; margin-bottom:3.5rem; }
.hb-utisci__mreza{ grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:768px){ .hb-utisci__mreza{ grid-template-columns:repeat(3,1fr); } }
.hb-utisak{
	border-radius:var(--radijus); padding:2rem;
	transition:transform .45s var(--lako), box-shadow .45s var(--lako);
}
.hb-utisak:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -22px rgb(var(--cocoa-rgb)/.3); }
.hb-utisak--linen{ background:rgb(var(--linen-rgb)/.6); }
.hb-utisak--blush{ background:rgb(var(--blush-rgb)/.4); }
.hb-utisak--sage{ background:rgb(var(--sage-rgb)/.15); }
.hb-utisak__ime{ font-size:.875rem; font-weight:500; margin-top:1.25rem; }

/* ── 15. Futer ──────────────────────────────────────────── */
.hb-futer{ background:var(--cocoa); color:var(--milk); }
.hb-futer .hb-wrap{ padding-block:4rem 2.5rem; }
.hb-futer__gore{
	display:grid; grid-template-columns:1fr; gap:3rem;
	padding-bottom:3.5rem; border-bottom:1px solid rgb(var(--milk-rgb)/.15);
}
@media (min-width:768px){ .hb-futer__gore{ grid-template-columns:1fr 2fr; gap:2rem; } }
.hb-futer__kolone{ display:grid; grid-template-columns:1fr; gap:2.5rem; }
@media (min-width:640px){ .hb-futer__kolone{ grid-template-columns:repeat(2,1fr); } }

.hb-futer__brend{ font-family:var(--font-naslov); font-size:1.5rem; margin-bottom:.75rem; }
.hb-futer__opis{ font-size:.875rem; line-height:1.625; color:rgb(var(--milk-rgb)/.7); max-width:20rem; }
.hb-futer__naslov{
	font-family:var(--font-telo); font-size:.75rem; letter-spacing:.15em; text-transform:uppercase;
	color:rgb(var(--milk-rgb)/.5); margin-bottom:1rem; font-weight:400;
}
.hb-futer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.625rem; font-size:.875rem; }
.hb-futer ul a{ color:rgb(var(--milk-rgb)/.85); text-decoration:none; transition:color .25s var(--lako), padding-left .25s var(--lako); }
.hb-futer ul a:hover{ color:#fff; padding-left:.25rem; }

.hb-newsletter{ display:flex; gap:.5rem; margin-top:1rem; }
.hb-newsletter input[type=email]{
	flex:1 1 auto; min-width:0; font-family:inherit; font-size:.875rem;
	background:rgb(var(--milk-rgb)/.1); color:var(--milk);
	border:1px solid rgb(var(--milk-rgb)/.2); border-radius:9999px; padding:.625rem 1rem;
	transition:border-color .25s var(--lako), background-color .25s var(--lako);
}
.hb-newsletter input[type=email]::placeholder{ color:rgb(var(--milk-rgb)/.5); }
.hb-newsletter input[type=email]:focus{ outline:none; border-color:rgb(var(--milk-rgb)/.6); background:rgb(var(--milk-rgb)/.15); }
.hb-newsletter button{ flex:0 0 auto; padding:.625rem 1.25rem; font-size:.875rem; }

.hb-futer__dole{
	padding-top:2rem; display:flex; flex-direction:column; align-items:center;
	justify-content:space-between; gap:.75rem; font-size:.75rem; color:rgb(var(--milk-rgb)/.5);
}
@media (min-width:640px){ .hb-futer__dole{ flex-direction:row; } }

/* ── 16. WooCommerce — kartica proizvoda ────────────────── */
.woocommerce ul.products,
.hb-woo ul.products{
	display:grid; grid-template-columns:1fr; gap:1.5rem;
	list-style:none; margin:0; padding:0;
}
@media (min-width:640px){ .woocommerce ul.products{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .woocommerce ul.products{ grid-template-columns:repeat(4,1fr); } }
.woocommerce ul.products::before,.woocommerce ul.products::after{ content:none; }

.woocommerce ul.products li.product{
	width:auto !important; margin:0 !important; float:none !important;
	background:var(--milk); border-radius:var(--radijus); overflow:hidden;
	box-shadow:0 1px 2px rgb(var(--cocoa-rgb)/.06);
	transition:box-shadow .4s var(--lako), transform .4s var(--lako);
	display:flex; flex-direction:column;
}
.woocommerce ul.products li.product:hover{
	box-shadow:0 16px 34px -20px rgb(var(--cocoa-rgb)/.4);
	transform:translateY(-3px);
}
.woocommerce ul.products li.product > a{ display:block; text-decoration:none; color:inherit; }
.woocommerce ul.products li.product a img{
	aspect-ratio:4/5; object-fit:cover; object-position:top;
	width:100%; margin:0; border-radius:0;
	transition:transform .5s var(--lako);
}
.woocommerce ul.products li.product:hover a img{ transform:scale(1.05); }

/* Napomena o boji — klijent: „negde ispod svih slika" (prodavnica, naslovna, proizvod) */
.hb-napomena-boja,
.hb-napomena-boja p{ font-size:.75rem; line-height:1rem; color:rgb(var(--cocoa-rgb)/.55); margin:0; }
.woocommerce ul.products + .hb-napomena-boja,
.elementor-widget.hb-napomena-boja{ margin-top:1.5rem; text-align:center; }
.single-product .hb-galerija .hb-napomena-boja{ margin-top:.75rem; }

/* Telo kartice */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .hb-kartica__podnaslov,
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .hb-kartica__cta{ margin-inline:1.25rem; }

.woocommerce ul.products li.product .star-rating{ margin-top:1.25rem; margin-bottom:.5rem; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
	font-family:var(--font-naslov); font-size:1.125rem; line-height:1.4;
	padding:0; margin-bottom:.125rem; color:var(--cocoa);
}
.hb-kartica__podnaslov{ font-size:.75rem; color:rgb(var(--cocoa-rgb)/.6); margin-bottom:1rem; }
.woocommerce ul.products li.product .price{
	display:inline-block; font-family:var(--font-telo); font-size:1rem; font-weight:500;
	color:var(--cocoa); margin:0 0 1.25rem;
}
.woocommerce ul.products li.product .hb-kartica__cta{
	position:absolute; right:1.25rem; bottom:1.25rem;
	font-size:.75rem; padding:.5rem 1rem;
	background:var(--cocoa); color:var(--milk);
	box-shadow:none;
}
.woocommerce ul.products li.product{ position:relative; }
.woocommerce ul.products li.product:hover .hb-kartica__cta{ background:var(--terradark); color:#fff; }

/* Zvezdice u WooCommerce gridu — tekstualne, kao u dizajnu */
.woocommerce .star-rating{
	font-size:.75rem; height:1em; width:5.4em; letter-spacing:.05em;
	color:var(--terracotta); font-family:inherit; overflow:hidden; position:relative;
}
.woocommerce .star-rating::before{ content:"★★★★★"; color:rgb(var(--cocoa-rgb)/.18); position:absolute; left:0; top:0; }
.woocommerce .star-rating span{ position:absolute; left:0; top:0; overflow:hidden; padding-top:1.5em; }
.woocommerce .star-rating span::before{ content:"★★★★★"; position:absolute; left:0; top:0; color:var(--terracotta); }

/* Bedž "Bestseler" / "Akcija" */
.woocommerce ul.products li.product .onsale,
.hb-bedz{
	position:absolute; top:.75rem; left:.75rem; z-index:2; margin:0;
	background:rgb(var(--milk-rgb)/.92); color:rgb(var(--cocoa-rgb)/.7);
	font-size:.625rem; letter-spacing:.06em; text-transform:uppercase;
	padding:.25rem .625rem; border-radius:9999px; min-height:0; min-width:0; line-height:1.4;
}

/* ── 17. WooCommerce — arhiva / prodavnica ──────────────── */
.hb-woo{ max-width:var(--sirina); margin-inline:auto; padding:0 var(--pad) 5rem; }
.hb-prodavnica-uvod{ background:rgb(var(--linen-rgb)/.5); }
.hb-prodavnica-uvod .hb-wrap{ padding-block:3.5rem 3rem; }
@media (min-width:768px){ .hb-prodavnica-uvod .hb-wrap{ padding-block:5rem 4rem; } }

.hb-mrvice{ font-size:.75rem; color:rgb(var(--cocoa-rgb)/.5); margin-bottom:1.25rem; }
.hb-mrvice a{ text-decoration:none; transition:color .25s var(--lako); }
.hb-mrvice a:hover{ color:var(--cocoa); }
.hb-mrvice__sep{ margin-inline:.375rem; }

/* Filter po boji */
.hb-filter{
	background:var(--milk); border-bottom:1px solid rgb(var(--cocoa-rgb)/.1);
	position:sticky; top:65px; z-index:20;
}
.hb-filter__traka{
	max-width:var(--sirina); margin-inline:auto; padding:1rem var(--pad);
	display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
}
.hb-filter__nazev{ font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:rgb(var(--cocoa-rgb)/.5); }
.hb-filter__dugme{
	display:inline-flex; align-items:center; gap:.5rem;
	font-size:.75rem; font-weight:500; padding:.5rem 1rem; border-radius:9999px;
	background:var(--milk); border:1px solid rgb(var(--cocoa-rgb)/.15);
	color:var(--cocoa); text-decoration:none; cursor:pointer;
	transition:border-color .25s var(--lako), background-color .25s var(--lako), transform .25s var(--odskok);
}
.hb-filter__dugme:hover{ border-color:rgb(var(--cocoa-rgb)/.4); transform:translateY(-1px); }
.hb-filter__dugme.je-aktivan{ background:var(--cocoa); color:var(--milk); border-color:var(--cocoa); }
.hb-filter__tacka{ width:.75rem; height:.75rem; border-radius:9999px; display:inline-block; }
.hb-filter__broj{ margin-left:auto; font-size:.75rem; color:rgb(var(--cocoa-rgb)/.5); }

/* ── 18. WooCommerce — strana proizvoda ─────────────────── */
.single-product div.product{
	display:grid; grid-template-columns:1fr; gap:2.5rem;
	padding-top:1.5rem;
}
@media (min-width:768px){
	.single-product div.product{ grid-template-columns:repeat(2,1fr); gap:2.5rem; }
}
@media (min-width:1024px){ .single-product div.product{ gap:4rem; } }

/* Omotač galerije + napomene o boji (inc/proizvod.php). `min-width:0` je obavezan:
   flexslider daje omotaču slika širinu N×100%, a grid stavka bez njega raste sa njim. */
.single-product .hb-galerija{ display:block; min-width:0; }
.single-product div.product .woocommerce-product-gallery{ width:100% !important; float:none !important; margin:0 !important; }
.single-product .woocommerce-product-gallery__wrapper{ border-radius:var(--radijus); overflow:hidden; background:var(--linen); }
.single-product .woocommerce-product-gallery__image img{ aspect-ratio:4/5; object-fit:cover; object-position:top; width:100%; }
.single-product .flex-control-thumbs{
	display:grid; grid-template-columns:repeat(5,1fr); gap:.75rem; margin:.75rem 0 0; padding:0; list-style:none;
}
.single-product .flex-control-thumbs li{ width:auto; margin:0; float:none; }
.single-product .flex-control-thumbs img{
	aspect-ratio:1; object-fit:cover; object-position:top; border-radius:var(--radijus-mali);
	opacity:.75; transition:opacity .25s var(--lako), outline-color .25s var(--lako);
	outline:2px solid transparent; outline-offset:2px; cursor:pointer;
}
.single-product .flex-control-thumbs img:hover{ opacity:1; }
.single-product .flex-control-thumbs img.flex-active{ opacity:1; outline-color:var(--cocoa); }

.single-product div.product .summary{ width:100% !important; float:none !important; margin:0 !important; }
.single-product .product_title{ font-family:var(--font-naslov); font-size:2.25rem; line-height:1.15; margin:.5rem 0 0; }
@media (min-width:768px){ .single-product .product_title{ font-size:3rem; } }
.single-product .hb-eyebrow{ display:inline-block; }

.single-product .woocommerce-product-rating{ display:flex; align-items:center; gap:.5rem; margin:.75rem 0 0; }
.single-product .woocommerce-product-rating .star-rating{ font-size:.875rem; width:6.3em; }
.single-product .woocommerce-review-link{ font-size:.875rem; color:var(--sagedark); text-underline-offset:4px; }

.single-product div.product p.price{
	font-family:var(--font-telo); font-size:1.5rem; font-weight:500; color:var(--cocoa); margin:1.25rem 0 0;
}
.single-product .woocommerce-product-details__short-description{
	margin-top:1.25rem; color:rgb(var(--cocoa-rgb)/.75); line-height:1.625;
}

/* Izbor boje */
.hb-boje{ margin-top:1.75rem; }
.hb-boje__naslov{ font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:rgb(var(--cocoa-rgb)/.5); margin-bottom:.75rem; }
.hb-boje__naslov strong{ color:rgb(var(--cocoa-rgb)/.8); font-weight:500; }
/* wrap: 8 boja × 40 px + razmaci = 404 px — bez prelamanja razvuku kolonu na 390 */
.hb-boje__lista{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
.single-product div.product .summary{ min-width:0; }
.hb-boje__st{
	width:2.5rem; height:2.5rem; border-radius:9999px; display:block;
	outline:2px solid transparent; outline-offset:2px;
	transition:outline-color .25s var(--lako), transform .3s var(--odskok);
}
.hb-boje__st:hover{ outline-color:rgb(var(--cocoa-rgb)/.4); transform:scale(1.08); }
.hb-boje__st.je-aktivna{ outline-color:var(--cocoa); }

/* Količina + dodaj u korpu */
.single-product form.cart{ display:flex; align-items:center; gap:1rem; margin:2rem 0 0 !important; flex-wrap:wrap; }
.single-product form.cart .quantity{
	display:flex; align-items:center; border:1px solid rgb(var(--cocoa-rgb)/.2);
	border-radius:9999px; padding:.125rem .5rem; float:none; margin:0;
}
.single-product form.cart .quantity input.qty{
	width:2.5rem; text-align:center; border:0; background:none; font-family:inherit;
	font-size:.875rem; color:var(--cocoa); padding:0; -moz-appearance:textfield;
}
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.hb-kol{
	width:2.25rem; height:2.25rem; display:grid; place-items:center;
	background:none; border:0; cursor:pointer; font-size:1.125rem; line-height:1;
	color:rgb(var(--cocoa-rgb)/.6); border-radius:9999px;
	transition:color .2s var(--lako), background-color .2s var(--lako), transform .2s var(--odskok);
}
.hb-kol:hover{ color:var(--cocoa); background:rgb(var(--cocoa-rgb)/.06); transform:scale(1.1); }
.single-product form.cart button.single_add_to_cart_button{ flex:1 1 12rem; padding:.875rem 1.5rem; }

/* Poverenje ispod dugmeta */
.hb-poverenje-red{
	display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:1.75rem;
	font-size:.75rem; color:rgb(var(--cocoa-rgb)/.6);
}
.hb-poverenje-red span{ display:inline-flex; align-items:center; gap:.375rem; }
.hb-poverenje-red span::before{
	content:""; width:.875rem; height:.875rem; background:currentColor; flex:0 0 auto;
	-webkit-mask:var(--ik) center/contain no-repeat; mask:var(--ik) center/contain no-repeat;
}

/* Blokovi opisa ispod */
.hb-detalji{ margin-top:2.5rem; padding-top:2rem; border-top:1px solid rgb(var(--cocoa-rgb)/.1); display:grid; gap:1.5rem; }
.hb-detalji h3{ font-family:var(--font-naslov); font-size:1.125rem; margin-bottom:.5rem; }
.hb-detalji p{ font-size:.875rem; line-height:1.625; color:rgb(var(--cocoa-rgb)/.7); }

/* Komentari / recenzije */
.single-product #reviews, .single-product .woocommerce-tabs{ grid-column:1/-1; }
.single-product .woocommerce-tabs ul.tabs{ display:none; }
.single-product #reviews{
	background:rgb(var(--linen-rgb)/.5); border-radius:var(--radijus);
	padding:2.5rem var(--pad); margin-top:3rem;
}
.single-product #reviews .commentlist{ list-style:none; margin:0; padding:0; display:grid; gap:1.25rem; }
.single-product #reviews .commentlist li{
	background:var(--milk); border-radius:var(--radijus); padding:1.5rem; margin:0;
}
.single-product #reviews .comment_container{ display:block; }
.single-product #reviews .avatar{ display:none; }
.single-product #reviews .comment-text{ margin:0; border:0; padding:0; }
.single-product #reviews .meta{ font-size:.875rem; font-weight:500; margin-bottom:.5rem; }
.single-product #reviews .meta time{ display:block; font-size:.75rem; font-weight:400; color:rgb(var(--cocoa-rgb)/.4); margin-top:.25rem; }
.single-product #reviews .description p{ font-size:.875rem; line-height:1.625; color:rgb(var(--cocoa-rgb)/.75); }

/* ── 19. Korpa i plaćanje ───────────────────────────────── */
.woocommerce table.shop_table{
	border:0; border-radius:var(--radijus); overflow:hidden; background:var(--milk);
	border-collapse:separate;
}
.woocommerce table.shop_table th{
	font-family:var(--font-telo); font-weight:500; font-size:.75rem;
	letter-spacing:.06em; text-transform:uppercase; color:rgb(var(--cocoa-rgb)/.5);
	border-bottom:1px solid rgb(var(--cocoa-rgb)/.1);
}
.woocommerce table.shop_table td{ border-top:1px solid rgb(var(--cocoa-rgb)/.08); }
.woocommerce table.cart img{ width:64px; border-radius:var(--radijus-mali); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container .select2-selection--single{
	font-family:inherit; font-size:.875rem; color:var(--cocoa);
	background:var(--milk); border:1px solid rgb(var(--cocoa-rgb)/.18);
	border-radius:.875rem; padding:.75rem 1rem; height:auto; line-height:1.4;
	transition:border-color .25s var(--lako), box-shadow .25s var(--lako);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus{
	outline:none; border-color:var(--sagedark); box-shadow:0 0 0 3px rgb(var(--sage-rgb)/.25);
}
.woocommerce form .form-row label{ font-size:.8125rem; color:rgb(var(--cocoa-rgb)/.7); margin-bottom:.35rem; }

.woocommerce-checkout #payment{ background:rgb(var(--linen-rgb)/.5); border-radius:var(--radijus); }
.woocommerce-checkout #payment ul.payment_methods{ border-bottom:1px solid rgb(var(--cocoa-rgb)/.1); }
.woocommerce-checkout #payment div.payment_box{
	background:var(--milk); border-radius:var(--radijus-mali); font-size:.8125rem;
}
.woocommerce-checkout #payment div.payment_box::before{ display:none; }

.hb-kartica-test{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:.75rem; }
.hb-kartica-test .hb-polje{ margin:0; }
.hb-kartica-test .hb-polje--puno{ grid-column:1/-1; }
.hb-kartica-test label{ display:block; font-size:.75rem; color:rgb(var(--cocoa-rgb)/.7); margin-bottom:.3rem; }
.hb-kartica-test input{
	width:100%; box-sizing:border-box; font-family:inherit; font-size:.875rem;
	padding:.6rem .8rem; border:1px solid rgb(var(--cocoa-rgb)/.2); border-radius:.75rem;
	background:var(--milk); color:var(--cocoa);
}
.hb-kartica-test__nota{ font-size:.75rem; color:rgb(var(--cocoa-rgb)/.6); }

.woocommerce-message,.woocommerce-info,.woocommerce-error{
	border-top:0; border-left:3px solid var(--sagedark); border-radius:var(--radijus-mali);
	background:rgb(var(--sage-rgb)/.12); color:var(--cocoa); font-size:.875rem;
}
.woocommerce-error{ border-left-color:var(--terradark); background:rgb(var(--terracotta-rgb)/.12); }
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{ display:none; }

/* ── 20. Responzivno — sitne popravke ───────────────────── */
@media (max-width:640px){
	.hb-hero .hb-wrap{ padding-block:8rem 7rem; }
	.hb-h1{ font-size:2rem; }
	.single-product form.cart button.single_add_to_cart_button{ flex:1 1 100%; }
}

/* ── 21. Ikonice (CSS maske — markup ostaje čist) ───────── */
:root{
	--tr-dole:url('../ikone/talas-dole.svg');
	--tr-gore:url('../ikone/talas-gore.svg');
	--ik-korpa:url('../ikone/korpa.svg');
}
.hb-ik--srce{        --ik:url('../ikone/srce.svg'); }
.hb-ik--roditelj{    --ik:url('../ikone/roditelj.svg'); }
.hb-ik--kap{         --ik:url('../ikone/kap.svg'); }
.hb-ik--zvezda{      --ik:url('../ikone/zvezda.svg'); }
.hb-ik--srce-puno{   --ik:url('../ikone/srce-puno.svg'); }
.hb-ik--plus{        --ik:url('../ikone/plus-krug.svg'); }
.hb-ik--kicma{       --ik:url('../ikone/kicma.svg'); }
.hb-ik--kamion{      --ik:url('../ikone/kamion.svg'); }
.hb-ik--stiklirano{  --ik:url('../ikone/stiklirano.svg'); }
.hb-ik--igla{        --ik:url('../ikone/igla.svg'); }
.hb-ik--telefon{     --ik:url('../ikone/telefon.svg'); }
.hb-ik--koverta{     --ik:url('../ikone/koverta.svg'); }

/* Ikonica unutar kartice "Zašto Hug Bug" — svoja pozadina po varijanti */
.hb-kartica-info .hb-ikona{ width:2.75rem; height:2.75rem; margin-bottom:1.5rem; }
.hb-kartica-info .hb-ikona::before{ width:1.25rem; height:1.25rem; }
.hb-kartica-info--blush .hb-ikona{ background:rgb(var(--terracotta-rgb)/.15); }
.hb-kartica-info--blush .hb-ikona::before{ background:var(--terradark); }
.hb-kartica-info--sage  .hb-ikona{ background:rgb(var(--sage-rgb)/.25); }
.hb-kartica-info--linen .hb-ikona{ background:rgb(var(--fawn-rgb)/.2); }
.hb-kartica-info--linen .hb-ikona::before{ background:var(--fawn); }

.hb-poverenje__st .hb-ikona::before{ background:var(--sagedark); }

/* ── 22. Vodič — poster sa play dugmetom ────────────────── */
/* Kad klijent pošalje YouTube link, ovaj kontejner se u Elementoru zameni
   „Video" widgetom (image_overlay + lightbox) — CSS ispod tada nije potreban. */
.hb-vodic__video{
	position:relative; display:block; border-radius:var(--radijus); overflow:hidden;
	box-shadow:0 24px 50px -24px rgb(0 0 0/.45);
	aspect-ratio:16/9; background:var(--linen);
}
.hb-vodic__video .hb-vodic__poster,
.hb-vodic__video .elementor-widget-container,
.hb-vodic__video figure,
.hb-vodic__video img{ height:100%; width:100%; }
.hb-vodic__video img{ object-fit:cover; object-position:center 20%; }

.hb-vodic__video::after{
	content:""; position:absolute; left:50%; top:50%; width:4rem; height:4rem;
	transform:translate(-50%,-50%); border-radius:9999px;
	background:rgb(var(--milk-rgb)/.9);
	box-shadow:0 0 0 0 rgb(var(--milk-rgb)/.45);
	transition:background-color .3s var(--lako), transform .35s var(--odskok), box-shadow .6s var(--lako);
	pointer-events:none;
}
.hb-vodic__video::before{
	content:""; position:absolute; left:calc(50% + 3px); top:50%; z-index:2;
	transform:translate(-50%,-50%); width:0; height:0;
	border-left:14px solid var(--cocoa);
	border-top:9px solid transparent; border-bottom:9px solid transparent;
	pointer-events:none; inset:auto;
}
.hb-vodic__video:hover::after{
	background:var(--milk); transform:translate(-50%,-50%) scale(1.08);
	box-shadow:0 0 0 14px rgb(var(--milk-rgb)/.14);
}
/* Elementor „Video" widget: posle klika skine poster i ubaci iframe — tada naše
   dugme za pokretanje ne sme da ostane preko YouTube kontrola. */
.hb-vodic__video:not(:has(.elementor-custom-embed-image-overlay))::before,
.hb-vodic__video:not(:has(.elementor-custom-embed-image-overlay))::after{ display:none; }
.hb-vodic__video .elementor-custom-embed-image-overlay{ cursor:pointer; }
/* Trougao je stajao u gornjem levom uglu (skriven zaobljenjem): `inset:auto` iz
   pravila iznad poništi left/top, a Elementorov `.e-con::before` ga vrati na 0.
   Isti oblik selektora + jedna klasa više (0,2,1) — bez !important. */
.e-con.hb-vodic__video::before{ inset:auto; left:calc(50% + 3px); top:50%; }

/* Razmaci koji u dizajnu dolaze iz Tailwind klasa (mt-3, mt-4, mb-2, mb-4, mt-8) */
.hb-mt-3{ margin-top:.75rem; }
.hb-mt-4{ margin-top:1rem; }
.hb-mt-8{ margin-top:2rem; }
.hb-mb-2{ margin-bottom:.5rem; }
.hb-mb-4{ margin-bottom:1rem; }
.hb-mb-8{ margin-bottom:2rem; }
.hb-hero__pill + *{ margin-top:1.25rem; }
.hb-hero__naslov + *{ margin-top:1.5rem; }
.hb-hero__tekst + *{ margin-top:2.25rem; }
.hb-poverenje__tekst{ font-size:.875rem; line-height:1.375; color:rgb(var(--cocoa-rgb)/.8); }
.hb-poverenje__tekst strong{ color:var(--cocoa); font-weight:600; }
.hb-eyebrow--svetlo{ color:rgb(var(--milk-rgb)/.7); }
.hb-vodic .hb-h2{ color:var(--milk); }

/* ── 23. Popravke posle poređenja sa originalom ─────────── */
/* Elementor drži `.e-con-full.e-flex{flex-direction:var(--flex-direction)}` na
   specifičnosti 0,2,0 — jače od naše klase. Smer se zato menja PROMENLJIVOM,
   i to pravilom iste specifičnosti kao bridž (0,3,0). playbooks/08 §6. */
.elementor .elementor-element.hb-poverenje__st,
.elementor .elementor-element.hb-kartica-info,
.elementor .elementor-element.hb-utisak,
.elementor .elementor-element.hb-hero__sadrzaj,
.elementor .elementor-element.hb-vodic__levo,
.elementor .elementor-element.hb-proizvodi__uvod,
.elementor .elementor-element.hb-zasto__uvod,
.elementor .elementor-element.hb-utisci__uvod,
.elementor .elementor-element.hb-vodic__koraci{ --flex-direction:column; }

.elementor .elementor-element.hb-poverenje__mreza,
.elementor .elementor-element.hb-zasto__mreza,
.elementor .elementor-element.hb-utisci__mreza,
.elementor .elementor-element.hb-vodic__mreza{ --display:grid; }

.elementor .elementor-element.hb-hero__dugmad,
.elementor .elementor-element.hb-korak{ --display:flex; --flex-direction:row; }

/* `max-width` na widgetu je Elementorovih 0,4,0 — meru dajemo promenljivom (§23). */
.hb-hero__tekst{ --hb-max:28rem; }
.hb-futer__opis{ --hb-max:20rem; }

/* Traka poverenja: ikonica IZNAD teksta, sve centrirano (kao original) */
.hb-poverenje__st{ text-align:center; }
.hb-poverenje__mreza{ gap:2rem; }
@media (min-width:768px){ .hb-poverenje__mreza{ gap:1.5rem; } }

/* Kartice: original ima p-8 (2rem) i tekst se ne lepi za ivicu */
.hb-kartica-info,.hb-utisak{ padding:2rem; }

/* Broj ocena pored zvezdica u kartici */
.hb-kartica__ocene{ display:flex; align-items:center; gap:.35rem; margin:1.25rem 1.25rem .5rem; }
.hb-kartica__ocene .star-rating{ margin:0 !important; float:none; }
.hb-kartica__broj{ font-size:.75rem; color:rgb(var(--cocoa-rgb)/.5); }
.woocommerce ul.products li.product .hb-kartica__ocene + .woocommerce-loop-product__title{ margin-top:0; }

/* Cena i dugme u istom redu, sa dnom kartice (original) */
.woocommerce ul.products li.product .hb-kartica__dno{
	display:flex; align-items:center; justify-content:space-between; gap:.75rem;
	margin:auto 1.25rem 1.25rem; padding-top:1rem;
}
.woocommerce ul.products li.product .hb-kartica__dno .price{ margin:0; }
.woocommerce ul.products li.product .hb-kartica__dno .hb-kartica__cta{ position:static; margin:0; }

/* Koraci u vodiču: original ima space-y-6 (1.5rem) i veći broj */
.hb-korak__broj{ font-size:1.5rem; }
.hb-vodic__koraci{ gap:1.5rem; }

/* AJAX „Brza kupovina": stanje dodavanja i potvrda */
.hb-kartica__cta.loading{ opacity:.75; pointer-events:none; }
.hb-kartica__cta.added{ background:var(--sagedark); }
.woocommerce ul.products li.product .added_to_cart{
	position:absolute; right:1.25rem; bottom:-1.5rem;
	font-size:.6875rem; color:var(--sagedark); text-decoration:underline;
	text-underline-offset:3px;
}

/* Prodavnica: naslov je text-4xl / md:text-5xl (ne 6xl kao hero) */
.hb-prodavnica-uvod__naslov{ font-size:2.25rem; line-height:1.15; }
@media (min-width:768px){ .hb-prodavnica-uvod__naslov{ font-size:3rem; } }
.hb-prodavnica-uvod__tekst{ max-width:36rem; }
.hb-prodavnica-uvod .hb-eyebrow{ display:inline-block; margin-bottom:.75rem; }
.hb-mrvice-omotac{ padding-top:1.5rem; }
.hb-woo{ padding-top:3.5rem; }
@media (min-width:768px){ .hb-woo{ padding-top:5rem; } }
.single-product .hb-woo{ padding-top:0; }

/* ── 24. Strana proizvoda — detalji ─────────────────────── */
.hb-proizvod__ocene{ display:flex; align-items:center; gap:.5rem; margin-top:.75rem; flex-wrap:wrap; }
.hb-proizvod__ocene .star-rating{ font-size:.875rem; width:6.3em; margin:0; float:none; }
.hb-proizvod__ocena-broj{ font-size:.875rem; color:rgb(var(--cocoa-rgb)/.6); }
.hb-proizvod__vidi{
	font-size:.875rem; color:var(--sagedark); text-decoration:underline;
	text-underline-offset:4px; margin-left:.25rem;
	transition:color .25s var(--lako);
}
.hb-proizvod__vidi:hover{ color:var(--cocoa); }

/* „Dodaj u korpu" — WooCommerce blokovi imaju svoje dugme sa jakom
   specifičnošću; ciljamo tačno naš element umesto da gomilamo !important. */
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button.single_add_to_cart_button{
	background:var(--terracotta); color:#fff; border-radius:9999px;
	font-family:var(--font-telo); font-size:.9375rem; font-weight:500;
	padding:.9375rem 1.75rem; border:0;
	box-shadow:0 8px 20px -8px rgb(var(--terracotta-rgb)/.55);
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover{
	background:var(--terradark); transform:translateY(-2px);
	box-shadow:0 14px 28px -10px rgb(var(--terracotta-rgb)/.6);
}

/* Galerija: glavna slika 4/5, sličice u redu od 5 */
.single-product .woocommerce-product-gallery{ margin-bottom:0 !important; }
.single-product .woocommerce-product-gallery__trigger{
	top:1rem; right:1rem; z-index:3; background:rgb(var(--milk-rgb)/.9);
	width:2.25rem; height:2.25rem; border-radius:9999px; display:grid; place-items:center;
	text-indent:0; font-size:1rem; line-height:1; color:var(--cocoa); text-decoration:none;
}
.single-product .flex-viewport{ border-radius:var(--radijus); overflow:hidden; }
.single-product ol.flex-control-thumbs{
	display:grid !important; grid-template-columns:repeat(5,1fr); gap:.75rem;
	margin:.75rem 0 0 !important; padding:0; list-style:none;
}
.single-product ol.flex-control-thumbs li{ width:auto !important; margin:0 !important; float:none !important; }

/* Uvodni pasus */
.single-product .woocommerce-product-details__short-description p{ margin:0; }

/* Recenzije */
.hb-recenzije{
	grid-column:1/-1; background:rgb(var(--linen-rgb)/.5);
	border-radius:var(--radijus); padding:2.5rem 2rem; margin-top:3rem;
}
@media (min-width:768px){ .hb-recenzije{ padding:3rem 2.5rem; } }
.hb-recenzije__glava{
	display:flex; flex-direction:column; gap:1rem; margin-bottom:2.5rem;
}
@media (min-width:768px){
	.hb-recenzije__glava{ flex-direction:row; align-items:flex-end; justify-content:space-between; }
}
.hb-recenzije__prosek{ display:flex; align-items:center; gap:.75rem; }
.hb-recenzije__ocena{ font-family:var(--font-naslov); font-size:2.25rem; line-height:1; }
.hb-recenzije__prosek .star-rating{ font-size:.875rem; width:6.3em; margin:0; float:none; }
.hb-recenzije__osnov{ font-size:.75rem; color:rgb(var(--cocoa-rgb)/.6); margin-top:.25rem; }
.hb-mt-2{ margin-top:.5rem; }

.hb-recenzije #reviews{ background:none; padding:0; margin:0; border-radius:0; }
.hb-recenzije .commentlist{ list-style:none; margin:0; padding:0; display:grid; gap:1.25rem; }
.hb-recenzije .commentlist li{ background:var(--milk); border-radius:var(--radijus); padding:1.5rem; margin:0; }
.hb-recenzije .comment_container{ display:block; }
.hb-recenzije .avatar{ display:none !important; }
.hb-recenzije .comment-text{ margin:0 !important; border:0 !important; padding:0 !important; }
.hb-recenzije .meta{ font-size:.875rem; font-weight:500; margin:0 0 .5rem; }
.hb-recenzije .meta .woocommerce-review__published-date{
	display:block; font-size:.75rem; font-weight:400; color:rgb(var(--cocoa-rgb)/.4); margin-top:.25rem;
}
.hb-recenzije .meta .woocommerce-review__verified{ color:var(--sagedark); }
.hb-recenzije .description p{ font-size:.875rem; line-height:1.625; color:rgb(var(--cocoa-rgb)/.75); }
.hb-recenzije .comment-form{ margin-top:2rem; background:var(--milk); padding:1.5rem; border-radius:var(--radijus); }
.hb-recenzije #reply-title{ font-family:var(--font-naslov); font-size:1.125rem; }

/* Povezani proizvodi */
.related.products{ grid-column:1/-1; margin-top:4rem; }
.related.products > h2{ font-family:var(--font-naslov); font-size:1.875rem; margin-bottom:1.5rem; }

/* Ikonice u redu poverenja koriste isti mehanizam maske */
.hb-poverenje-red .hb-ik--srce,
.hb-poverenje-red .hb-ik--kamion,
.hb-poverenje-red .hb-ik--stiklirano{ display:inline-flex; align-items:center; gap:.375rem; }

/* ── 25. Popravke strane proizvoda ──────────────────────── */
/* Glavna slika: odnos 4/5 kao u dizajnu.
   PAŽNJA: odnos ide na SAMU SLIKU, nikako na `__wrapper` ni `.flex-viewport` —
   flexslider im postavlja širinu od N×100%, pa `aspect-ratio` tamo napravi
   element od 36000×45000 px i razvuče celu stranu (izmereno). */
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image a{ display:block; }
.single-product .woocommerce-product-gallery__image img{
	width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:top;
}

/* Blokovi opisa: h3 + pasus tesno, razmak između blokova 1.5rem */
.hb-detalji > *{ margin:0; }
.hb-detalji h3{ font-family:var(--font-naslov); font-size:1.125rem; margin-bottom:.5rem; }
.hb-detalji h3 + p{ margin-bottom:1.5rem; }
.hb-detalji > p:last-child{ margin-bottom:0; }

/* WooCommerce ispisuje „3 recenzije za Siva" — dizajn ima svoj naslov iznad */
.hb-recenzije #reviews > h2:first-child,
.hb-recenzije #comments > h2:first-child{ display:none; }

/* Forma za recenziju: sklopljena dok se ne klikne (dizajn ima samo dugme) */
.hb-recenzije #review_form_wrapper{ margin-top:1.5rem; }
.hb-recenzije .comment-form input[type=text],
.hb-recenzije .comment-form input[type=email],
.hb-recenzije .comment-form textarea{
	width:100%; box-sizing:border-box; font-family:inherit; font-size:.875rem;
	border:1px solid rgb(var(--cocoa-rgb)/.18); border-radius:.875rem; padding:.7rem .9rem;
	background:var(--milk); color:var(--cocoa);
}
.hb-recenzije .comment-form label{ font-size:.8125rem; color:rgb(var(--cocoa-rgb)/.7); }

/* ── 26. Pitanja i odgovori ─────────────────────────────── */
.hb-pitanja{ grid-column:1/-1; margin-top:4rem; }
.hb-pitanja__glava{ margin-bottom:2.5rem; }
.hb-pitanja__lista{ display:grid; gap:1.5rem; max-width:56rem; }
.hb-pitanje{ padding-bottom:1.5rem; border-bottom:1px solid rgb(var(--cocoa-rgb)/.1); }
.hb-pitanje:last-child{ border-bottom:0; padding-bottom:0; }
.hb-pitanje__p, .hb-pitanje__o{ font-size:.9375rem; line-height:1.625; }
.hb-pitanje__p{ font-weight:500; margin-bottom:.5rem; }
.hb-pitanje__o{ color:rgb(var(--cocoa-rgb)/.75); }
.hb-pitanje__p span{ color:var(--terracotta); font-weight:600; margin-right:.15rem; }
.hb-pitanje__o span{ color:var(--sagedark); font-weight:600; margin-right:.15rem; }
.hb-pitanje__autor{ font-size:.75rem; color:rgb(var(--cocoa-rgb)/.4); margin-top:.5rem; }

/* ── 27. Korpa i naplata — raspored ─────────────────────── */
.woocommerce-cart .hb-woo,
.woocommerce-checkout .hb-woo,
.woocommerce-account .hb-woo,
.woocommerce-order-received .hb-woo{ padding-top:3rem; padding-bottom:5rem; }

.hb-woo > .woocommerce-notices-wrapper{ margin-bottom:1.5rem; }

/* Naplata: podaci levo, pregled porudžbine desno */
.woocommerce-checkout form.checkout{
	display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:start;
}
@media (min-width:900px){
	.woocommerce-checkout form.checkout{ grid-template-columns:1.1fr .9fr; column-gap:3rem; }
	.woocommerce-checkout #customer_details{ grid-column:1; grid-row:1 / span 2; }
	.woocommerce-checkout #order_review_heading{ grid-column:2; grid-row:1; margin:0 0 1rem; }
	.woocommerce-checkout #order_review{ grid-column:2; grid-row:2; position:sticky; top:6rem; }
}
.woocommerce-checkout .col2-set{ display:grid; gap:2rem; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{ width:auto; float:none; }

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading{
	font-family:var(--font-naslov); font-size:1.5rem; margin:0 0 1rem;
}
.woocommerce-checkout .form-row{ padding:0; margin-bottom:1rem; }
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last{ width:calc(50% - .5rem); }
.woocommerce-checkout .form-row-first{ float:left; }
.woocommerce-checkout .form-row-last{ float:right; }
.woocommerce-checkout .form-row-wide{ clear:both; }

#order_review{
	background:rgb(var(--linen-rgb)/.5); border-radius:var(--radijus); padding:1.5rem;
}
#order_review table.shop_table{ background:transparent; }
#order_review table.shop_table th,
#order_review table.shop_table td{ padding:.75rem .5rem; }
#order_review .order-total .amount{ font-size:1.125rem; }

/* „Naručite" — WooCommerce blokovi imaju svoje ljubičasto dugme */
.woocommerce-checkout #place_order,
.woocommerce #payment #place_order{
	width:100%; margin-top:1rem;
	background:var(--terracotta); color:#fff; border:0; border-radius:9999px;
	font-family:var(--font-telo); font-size:.9375rem; font-weight:500; padding:.9375rem 1.75rem;
	box-shadow:0 8px 20px -8px rgb(var(--terracotta-rgb)/.55);
}
.woocommerce-checkout #place_order:hover{ background:var(--terradark); transform:translateY(-2px); }

/* Načini plaćanja */
.woocommerce-checkout #payment{ background:transparent; padding:0; }
.woocommerce-checkout #payment ul.payment_methods{
	border:0; padding:0; margin:0 0 1rem; list-style:none;
}
.woocommerce-checkout #payment ul.payment_methods li{
	background:var(--milk); border:1px solid rgb(var(--cocoa-rgb)/.12);
	border-radius:var(--radijus-mali); padding:.875rem 1rem; margin-bottom:.625rem;
	transition:border-color .25s var(--lako), box-shadow .25s var(--lako);
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked){
	border-color:var(--sagedark); box-shadow:0 0 0 3px rgb(var(--sage-rgb)/.2);
}
.woocommerce-checkout #payment ul.payment_methods label{
	font-weight:500; font-size:.9375rem; cursor:pointer;
}
.woocommerce-checkout #payment div.payment_box{
	background:transparent; margin:.75rem 0 0; padding:0; font-size:.8125rem;
	color:rgb(var(--cocoa-rgb)/.7);
}
.woocommerce-checkout .woocommerce-privacy-policy-text p{ font-size:.75rem; color:rgb(var(--cocoa-rgb)/.6); }

/* Korpa */
.woocommerce-cart table.cart td.product-name a{ text-decoration:none; font-weight:500; }
.woocommerce-cart .cart_totals{ max-width:26rem; margin-left:auto; }
.woocommerce-cart .cart_totals h2{ font-family:var(--font-naslov); font-size:1.5rem; margin-bottom:1rem; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
	display:block; text-align:center; background:var(--terracotta); color:#fff;
	border-radius:9999px; padding:.9375rem 1.75rem; font-weight:500; text-decoration:none;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{ background:var(--terradark); }
.woocommerce-cart td.product-remove a.remove{
	color:var(--terradark) !important; font-size:1.25rem;
}
.woocommerce-cart td.product-remove a.remove:hover{ background:var(--terradark) !important; color:#fff !important; }

/* Strana „hvala" */
.woocommerce-order .woocommerce-order-overview{
	list-style:none; margin:2rem 0; padding:1.5rem; display:grid; gap:1rem;
	background:rgb(var(--linen-rgb)/.5); border-radius:var(--radijus);
}
@media (min-width:768px){
	.woocommerce-order .woocommerce-order-overview{ grid-template-columns:repeat(4,1fr); }
}
.woocommerce-order .woocommerce-order-overview li{
	border:0; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
	color:rgb(var(--cocoa-rgb)/.5);
}
.woocommerce-order .woocommerce-order-overview li strong{
	display:block; font-size:1rem; text-transform:none; letter-spacing:0;
	color:var(--cocoa); margin-top:.35rem;
}
.woocommerce-order h2{ font-family:var(--font-naslov); font-size:1.5rem; margin:2rem 0 1rem; }

/* „Dostava na drugu adresu?" je h3 sa čekboksom — ne treba veličina naslova sekcije */
.woocommerce-checkout #ship-to-different-address{
	font-family:var(--font-telo); font-size:.9375rem; font-weight:500;
	display:flex; align-items:center; gap:.5rem; margin:1.5rem 0 1rem;
}
.woocommerce-checkout #ship-to-different-address input{ margin:0; }

/* ── 28. Prozirno zaglavlje preko heroja (naslovna) ─────── */
/* HFE šablon nosi jednu klasu za sve strane, pa se varijanta bira po telu
   dokumenta umesto po klasi elementa. Isti efekat kao `.hb-zaglavlje--preko`. */
.home .hb-zaglavlje,
.hb-zaglavlje--preko{
	position:absolute; left:0; right:0; top:0;
	background:transparent; border-bottom:0; backdrop-filter:none; color:#fff;
}
.home .hb-zaglavlje .hb-zaglavlje__traka,
.hb-zaglavlje--preko .hb-zaglavlje__traka{ padding-block:1.5rem; }
.home .hb-zaglavlje .hb-nav a,
.hb-zaglavlje--preko .hb-nav a{ color:rgb(255 255 255/.9); }
.home .hb-zaglavlje .hb-nav a:hover,
.hb-zaglavlje--preko .hb-nav a:hover{ color:#fff; }
.home .hb-zaglavlje .hb-logo img,
.hb-zaglavlje--preko .hb-logo img{ height:3.5rem; filter:drop-shadow(0 1px 2px rgb(0 0 0/.15)); }
@media (min-width:768px){
	.home .hb-zaglavlje .hb-logo img,
	.hb-zaglavlje--preko .hb-logo img{ height:4rem; }
}
/* CTA na prozirnom zaglavlju je beo (dizajn) */
.home .hb-zaglavlje__cta .elementor-button,
.home .hb-zaglavlje__cta{ background:rgb(255 255 255/.95); color:var(--cocoa); box-shadow:none; }
.home .hb-zaglavlje__cta .elementor-button:hover,
.home .hb-zaglavlje__cta:hover{ background:#fff; color:var(--cocoa); }

/* HFE omotač ne sme da uvodi svoj razmak */
.ehf-header, .ehf-footer{ display:block; }
.ehf-header .elementor-widget, .ehf-footer .elementor-widget{ --kit-widget-spacing:0px; }

/* Meni iz `wp-widget-nav_menu` widgeta — isti izgled kao PHP fallback */
.hb-nav .menu, .hb-nav ul{ display:flex; align-items:center; gap:2rem; list-style:none; margin:0; padding:0; }
.hb-nav .widget-title, .hb-nav .elementor-widget-container > h5{ display:none; }
.hb-futer__meni ul{ display:grid; gap:.625rem; list-style:none; margin:0; padding:0; font-size:.875rem; }
.hb-futer__meni a{ color:rgb(var(--milk-rgb)/.85); text-decoration:none; transition:color .25s var(--lako), padding-left .25s var(--lako); }
.hb-futer__meni a:hover{ color:#fff; padding-left:.25rem; }
.hb-futer__kolona{ display:block; }

/* Mobilni meni iz šablona: dugme u traci, panel ispod cele trake */
.hb-meni-mob-widget{ display:block; }
.hb-meni-mob-widget .hb-meni-mob{
	position:fixed; left:0; right:0; top:var(--hb-zag-h,4.5rem); z-index:40;
	box-shadow:0 12px 30px -18px rgb(var(--cocoa-rgb)/.5);
}
.hb-zaglavlje{ position:sticky; }
/* Lepljivo zaglavlje mora na SPOLJNI <header> (HFE): `.hb-zaglavlje` je sticky, ali mu je
   Elementor omotač visok tačno koliko i ono, pa nema kuda da putuje — zato je odskrolovalo,
   a traka filtera je ostajala da „visi" 105 px od vrha, sa proizvodima iznad sebe.
   Na naslovnoj zaglavlje ostaje prozirno preko heroja i odlazi sa skrolom, kao u dizajnu. */
body.ehf-header:not(.home) #masthead{ position:sticky; top:0; z-index:40; }   /* HFE drži `.ehf-header #masthead{position:relative}` (ID) — zato ista forma + klasa više */
/* Hello Elementor reset ima `body{overflow-x:clip}` — to gasi `position:sticky` SVEMU unutra
   (i zaglavlju i traci filtera). Gasi se ovde; prelivanja nema (provera.js na 390/768/1440). */
body{ overflow-x:visible; }
.home .hb-zaglavlje .hb-meni-mob{ background:var(--milk); }
@media (min-width:768px){ .hb-meni-mob-widget{ display:none; } }

/* Hamburger: eksplicitna boja — `currentColor` inače nasledi Elementorovu
   podrazumevanu boju teksta (#CC3366) i crte postanu roze. */
.hb-hamburger{ color:var(--cocoa); }
.home .hb-hamburger{ color:#fff; }
.hb-hamburger span{ background:currentColor; }
.hb-meni-mob a{ color:var(--cocoa); }

/* ══════════════════════════════════════════════════════════
   29. Popravke po pregledu (korpa, naplata, prazna korpa, logo)
   ══════════════════════════════════════════════════════════ */

/* ── Futer uvek na dnu ekrana ────────────────────────────
   Prazna korpa je kratka strana: `.hfeed.site` je bio visok 565px na
   viewportu od 1000px, pa je ispod futera ostajala prazna traka. */
.hfeed.site{ display:flex; flex-direction:column; min-height:100vh; }
.hfeed.site > main{ flex:1 0 auto; }
.hfeed.site > footer{ flex:0 0 auto; }

/* Korpa/naplata su OBIČNE strane sa kratkim kodom → sadržaj je u
   `.site-main`, ne u `.hb-woo`. Bez ovoga nemaju ni širinu ni razmake. */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main,
.woocommerce-order-received .site-main{
	max-width:var(--sirina); margin-inline:auto; padding:3rem var(--pad) 5rem;
}

/* ── Tabele: jedna linija, bez dvostrukih ivica ─────────── */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table{
	border-collapse:collapse; border:1px solid rgb(var(--cocoa-rgb)/.1);
	border-radius:var(--radijus); overflow:hidden; background:var(--milk); width:100%;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
	border:0; border-bottom:1px solid rgb(var(--cocoa-rgb)/.08);
	padding:1rem; vertical-align:middle; text-align:left;
}
.woocommerce table.shop_table thead th{
	background:rgb(var(--linen-rgb)/.45);
	font-family:var(--font-telo); font-weight:500; font-size:.75rem;
	letter-spacing:.06em; text-transform:uppercase; color:rgb(var(--cocoa-rgb)/.55);
}
.woocommerce table.shop_table tbody tr:last-child td,
.woocommerce table.shop_table tfoot tr:last-child th,
.woocommerce table.shop_table tfoot tr:last-child td{ border-bottom:0; }
.woocommerce table.shop_table td.product-name{ font-weight:500; }
.woocommerce table.shop_table .product-thumbnail{ width:88px; }
.woocommerce table.cart img{ width:72px; border-radius:var(--radijus-mali); }
.woocommerce table.shop_table td.product-remove{ width:48px; text-align:center; }

/* ── Količina u korpi: u JEDAN red ───────────────────────
   `.quantity` je `display:block`, pa su naša dugmad −/+ padala jedno
   ispod drugog i ćelija je bila visoka 114px (izmereno). */
.woocommerce .quantity,
.woocommerce-cart td.product-quantity .quantity{
	display:inline-flex; align-items:center; gap:.125rem;
	border:1px solid rgb(var(--cocoa-rgb)/.2); border-radius:9999px;
	padding:.125rem .35rem; width:auto; float:none; margin:0;
}
.woocommerce .quantity input.qty{
	width:2.75rem; text-align:center; border:0; background:none; padding:0;
	font-family:inherit; font-size:.875rem; color:var(--cocoa); -moz-appearance:textfield;
	box-shadow:none; height:auto;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ── Red sa kuponom i dugmetom „Ažuriraj" ────────────────── */
.woocommerce table.cart td.actions{ padding:1rem; }
.woocommerce table.cart td.actions .coupon{
	display:flex; align-items:center; gap:.5rem; float:none; width:auto; padding:0;
}
.woocommerce table.cart td.actions .coupon label{ display:none; }
.woocommerce table.cart td.actions .coupon .input-text{
	flex:0 1 16rem; min-width:0; width:auto; margin:0;
	font-family:inherit; font-size:.875rem; color:var(--cocoa);
	background:var(--milk); border:1px solid rgb(var(--cocoa-rgb)/.18);
	border-radius:9999px; padding:.7rem 1.1rem;
}
.woocommerce table.cart td.actions{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
}
.woocommerce table.cart td.actions button[name="update_cart"]{
	background:transparent; color:var(--cocoa); border:1px solid rgb(var(--cocoa-rgb)/.25);
	box-shadow:none; padding:.7rem 1.4rem;
}
.woocommerce table.cart td.actions button[name="update_cart"]:hover:not(:disabled){
	background:var(--cocoa); color:var(--milk); border-color:var(--cocoa);
}
.woocommerce table.cart td.actions button[name="update_cart"]:disabled{
	opacity:.45; cursor:default; transform:none; box-shadow:none;
}

/* ── Pregled porudžbine na naplati ───────────────────────── */
#order_review table.shop_table{ border:0; border-radius:0; background:transparent; }
#order_review table.shop_table th,
#order_review table.shop_table td{
	padding:.85rem 0; border-bottom:1px solid rgb(var(--cocoa-rgb)/.1);
}
#order_review table.shop_table thead th{ background:transparent; }
#order_review table.shop_table td:last-child,
#order_review table.shop_table th:last-child{ text-align:right; }
#order_review .order-total th,
#order_review .order-total td{ border-bottom:0; padding-top:1.1rem; }
#order_review .order-total .amount{ font-size:1.25rem; font-weight:600; }
#order_review .cart_item td.product-name{ font-weight:400; }
#order_review .cart_item .product-quantity{ color:rgb(var(--cocoa-rgb)/.55); }

/* ── Prazna korpa ────────────────────────────────────────── */
.cart-empty.woocommerce-info{ margin-bottom:1.5rem; }
.woocommerce .return-to-shop{ margin-top:1.5rem; }
.woocommerce .return-to-shop .button{ display:inline-flex; }

/* ── Logo veći ───────────────────────────────────────────── */
.hb-logo img{ height:3.75rem; }
@media (min-width:768px){ .hb-logo img{ height:4.5rem; } }
.home .hb-zaglavlje .hb-logo img,
.hb-zaglavlje--preko .hb-logo img{ height:4.5rem; }
@media (min-width:768px){
	.home .hb-zaglavlje .hb-logo img,
	.hb-zaglavlje--preko .hb-logo img{ height:5.5rem; }
}

/* ── 30. Korpa: raspored u dve kolone i red sa akcijama ─── */
/* `td.actions` ima colspan=6; ako mu se da `display:flex`, colspan se
   ignoriše i ćelija se skupi (dugme „Iskoristite kupon" se seče). Ostaje
   ćelija, a raspoređuju se elementi UNUTAR nje. */
.woocommerce table.cart td.actions{
	display:table-cell; text-align:left; overflow:hidden;
}
.woocommerce table.cart td.actions .coupon{ display:inline-flex; float:left; }
.woocommerce table.cart td.actions button[name="update_cart"]{ float:right; }

/* Tabela levo, ukupno desno */
@media (min-width:1024px){
	/* Dve kolone SAMO kad korpa ima sadržaj — na praznoj korpi bi poruka i
	   dugme „Nazad u prodavnicu" završili jedno pored drugog. */
	.woocommerce-cart .woocommerce:has(form.woocommerce-cart-form){
		display:grid; grid-template-columns:1.35fr .65fr; gap:2.5rem; align-items:start;
	}
	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper{ grid-column:1/-1; }
	.woocommerce-cart form.woocommerce-cart-form{ grid-column:1; margin:0; }
	.woocommerce-cart .cart-collaterals{ grid-column:2; width:auto; margin:0; }
}
.woocommerce-cart .cart-collaterals{ max-width:none; }
.woocommerce-cart .cart-collaterals .cart_totals{ width:auto; float:none; max-width:none; }
.woocommerce-cart .cart_totals table.shop_table{ background:rgb(var(--linen-rgb)/.4); }
.woocommerce-cart .cart_totals th{ background:transparent; width:40%; }

/* Poravnanje (15.09.2026): tabela korpe je počinjala u visini NASLOVA „Ukupna vrednost
   korpe", a okvir ukupno 45 px niže (naslov 28,8 + razmak 16). Visina naslova je sada
   zadata tačno i ista vrednost spušta tabelu korpe → gornje ivice okvira su u liniji. */
.woocommerce-cart .cart_totals h2{ line-height:1.8rem; margin:0 0 1rem; }
@media (min-width:1024px){
	.woocommerce-cart form.woocommerce-cart-form{ margin-top:calc(1.8rem + 1rem); }
}

/* Hello Elementor boji svaki NEPARNI red tabele (`table tbody>tr:nth-child(odd)>td`).
   U korpi to zavisi od broja stavki: sa 1 stavkom red sa kuponom ostane bez pozadine i
   okvir se „ne zatvori", sa 2 je obrnuto; u tabeli ukupno pravi šahovnicu (th/td).
   Pozadinu nosi cela tabela, redove dele samo linije. */
.woocommerce table.shop_table tbody > tr:nth-child(odd) > td,
.woocommerce table.shop_table tbody > tr:nth-child(odd) > th,
.woocommerce table.shop_table tfoot > tr:nth-child(odd) > td,
.woocommerce table.shop_table tfoot > tr:nth-child(odd) > th{ background-color:transparent; }
.woocommerce-cart table.cart{ background:rgb(var(--linen-rgb)/.4); }

/* Isto na malim ekranima: woocommerce-smallscreen.css boji PARNE redove responzivne tabele. */
.woocommerce table.shop_table.shop_table_responsive tr:nth-child(2n) td,
.woocommerce-page table.shop_table.shop_table_responsive tr:nth-child(2n) td{ background-color:transparent; }
@media (max-width:768px){
	/* × je na mobilnom sam u redu — sa širinom od 48 px linija ispod njega bila je kratka crtica */
	.woocommerce table.shop_table_responsive td.product-remove{ width:auto; }
}

/* Naplata — isti problem kao korpa (15.09.2026, izmereno):
   1) WooCommerce clearfix `.col2-set::before` je u gridu PRAZNA stavka + razmak 2rem →
      „Detalji za naplatu" 32 px niže od „Vaša narudžbina";
   2) `#customer_details` se prostire kroz 2 reda, pa grid prvi red naduva na 79 px i doda
      row-gap 40 px → okvir narudžbine 90 px ispod svog naslova.
   Posle: naslovi u istoj liniji, okvir narudžbine u liniji sa prvim poljem. */
.woocommerce-checkout .col2-set::before,
.woocommerce-checkout .col2-set::after{ content:none; display:none; }
@media (min-width:900px){
	.woocommerce-checkout form.checkout{ grid-template-rows:auto 1fr; row-gap:0; }
}

/* Isporuka je uvek besplatna (jedna zona) — kalkulator i njegova napomena
   samo prave buku na naplati. */
.woocommerce-cart .shipping-calculator-button,
.woocommerce-cart .woocommerce-shipping-destination,
.woocommerce-cart .shipping-calculator-form{ display:none; }

/* Uže prve dve kolone tabele */
.woocommerce table.cart td.product-remove,
.woocommerce table.cart th.product-remove{ width:56px; }
.woocommerce table.cart td.product-thumbnail,
.woocommerce table.cart th.product-thumbnail{ width:96px; padding-left:0; padding-right:0; }

/* Kupon: dugme ne sme da se skuplja (tekst se inače seče na „skoristite kupon") */
.woocommerce table.cart td.actions .coupon .input-text{ flex:1 1 8rem; min-width:0; }
.woocommerce table.cart td.actions .coupon button{ flex:0 0 auto; }

/* Kalkulator isporuke — isporuka je uvek besplatna, nema šta da se računa */
.woocommerce-shipping-calculator,
.woocommerce-cart .woocommerce-shipping-calculator{ display:none; }

/* Kupon: kutija dobija svoju širinu, inače se `flex-basis` skupi na minimum
   i polje ostane široko ~4rem („Kod ku…"). */
.woocommerce table.cart td.actions .coupon{ width:min(26rem,100%); }
.woocommerce table.cart td.actions .coupon .input-text{ flex:1 1 auto; }

/* ══════════════════════════════════════════════════════════
   31. Slike proizvoda, ikonice, traka filtera, futer
   ══════════════════════════════════════════════════════════ */

/* ── Slike proizvoda ──────────────────────────────────────
   Prototip je imao fotke 2:3, pa je ovde bio `contain` na beloj podlozi. Klijentove
   fotografije (15.09.2026) su tačno 4:5 kao kartica, a deo je snimljen napolju —
   `contain` bi na njima pravio bele trake. Zato `cover`; sličice su neisečene
   (`woocommerce_thumbnail_cropping = uncropped`, _build/proizvodi.php). */
.woocommerce ul.products li.product a img{
	object-fit:cover; object-position:center top; aspect-ratio:4/5;
}
.single-product .woocommerce-product-gallery__image img{ object-fit:cover; object-position:center top; }
.single-product .flex-control-thumbs img{ object-fit:cover; object-position:center 20%; }
.woocommerce table.cart img{ object-fit:cover; object-position:center 20%; }

/* ── Ikonice u traci poverenja i karticama — veće ───────── */
.hb-ikona{ width:4.25rem; height:4.25rem; }
.hb-ikona::before{ width:2rem; height:2rem; }
.hb-poverenje__st{ gap:1rem; }
.hb-kartica-info .hb-ikona{ width:3.5rem; height:3.5rem; }
.hb-kartica-info .hb-ikona::before{ width:1.625rem; height:1.625rem; }
.hb-poverenje-red span::before{ width:1.05rem; height:1.05rem; }

/* ── Traka filtera stoji ispod zaglavlja, ne preko sadržaja ──
   `top:65px` je bio pogođen; zaglavlje je sad više (veći logo). Vrednost
   dolazi iz JS-a (`--hb-zag-h`), pa prati stvarnu visinu. */
.hb-filter{ top:var(--hb-zag-h,4.5rem); }
/* i na mobilnom lepljiva (dizajn: sticky top-[65px]) — zaglavlje je od 16.09.2026 lepljivo */
@media (max-width:640px){ .hb-filter{ position:sticky; } }

/* ── Futer: potpis izrade ───────────────────────────────── */
.hb-futer__izrada{ color:rgb(var(--milk-rgb)/.5); }
.hb-futer__izrada a{
	color:rgb(var(--milk-rgb)/.75); text-decoration:none;
	border-bottom:1px solid rgb(var(--milk-rgb)/.25);
	transition:color .25s var(--lako), border-color .25s var(--lako);
}
.hb-futer__izrada a:hover{ color:#fff; border-color:rgb(var(--milk-rgb)/.7); }
.hb-futer__dole{ flex-wrap:wrap; gap:.5rem 1.5rem; }

/* ══════════════════════════════════════════════════════════
   32. Visine reda — izjednačene sa originalom
   Original je Tailwind i koristi FIKSNE visine reda uz svaku veličinu
   (text-xs 12/16, text-lg 18/28, text-4xl 36/40, text-5xl 48/48, text-6xl 60/60).
   Naše su bile odnosi (1.5 / 1.2 / 1.15), pa je svaki blok teksta bio
   1–7 px viši — izmereno poređenjem sa `/dizajn/`.
   ══════════════════════════════════════════════════════════ */
.hb-eyebrow{ line-height:1rem; }                       /* text-xs */
.hb-hero__pill{ line-height:1rem; }
.hb-h1{ font-size:2.25rem; line-height:2.5rem; }       /* text-4xl */
.hb-h2{ font-size:1.875rem; line-height:2.25rem; }     /* text-3xl */
.hb-h3{ font-size:1.25rem; line-height:1.75rem; }      /* text-xl */
.hb-telo{ line-height:1.5rem; }                        /* text-base */
.hb-korak__broj{ line-height:2rem; }                   /* text-2xl */
.hb-futer__brend{ line-height:2rem; }                  /* text-2xl */
.hb-utisak__ime{ line-height:1.25rem; }                /* text-sm */
.hb-poverenje__tekst{ line-height:1.25rem; }           /* leading-snug na text-sm */

@media (min-width:768px){
	.hb-h1{ font-size:3.75rem; line-height:1; }           /* text-6xl */
	.hb-h2{ font-size:2.25rem; line-height:2.5rem; }      /* text-4xl */
}

/* Kartica proizvoda */
.woocommerce ul.products li.product .woocommerce-loop-product__title{ line-height:1.75rem; }
.hb-kartica__podnaslov{ line-height:1rem; }

/* Prodavnica i strana proizvoda */
.hb-prodavnica-uvod__naslov{ font-size:2.25rem; line-height:2.5rem; }
@media (min-width:768px){ .hb-prodavnica-uvod__naslov{ font-size:3rem; line-height:1; } }
.single-product .product_title{ font-size:2.25rem; line-height:2.5rem; }
@media (min-width:768px){ .single-product .product_title{ font-size:3rem; line-height:1; } }
.hb-detalji h3{ line-height:1.75rem; }
.hb-recenzije__ocena{ line-height:1; }

/* Meni na prozirnom zaglavlju je bele/90, ne pune bele (kao original) */
.home .hb-zaglavlje .hb-nav a,
.home .hb-zaglavlje .hb-nav .menu a{ color:rgb(255 255 255/.9); }
.home .hb-zaglavlje .hb-nav a:hover{ color:#fff; }

/* ══════════════════════════════════════════════════════════
   33. Izjednačavanje sa originalom — drugi krug merenja
   ══════════════════════════════════════════════════════════ */

/* Eyebrow je u originalu `<span>` (širina po tekstu); kod nas je heading
   widget, dakle blok preko cele širine. Vizuelno isto, ali merenje se
   razilazi — i svako buduće poravnanje po njemu bi bilo pogrešno. */
.hb-eyebrow{ display:inline-block; }

/* Dugmad filtera: text-xs ima fiksnu visinu reda 16px */
.hb-filter__dugme{ line-height:1rem; }
.hb-filter__nazev{ line-height:1rem; }

/* Filter sa 8 boja (15.09.2026): prototip je imao 3 i stao u red; 8 traži 1335 px, a
   ima 1200 → dva reda na desktopu i pet na 390. Sad je UVEK jedan red: zbijeniji
   dugmići staju na ≥1280, a uže se red pomera prstom/trackpadom. */
.hb-filter__traka{ flex-wrap:nowrap; gap:.5rem; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; }
.hb-filter__traka::-webkit-scrollbar{ display:none; }
.hb-filter__dugme{ flex:0 0 auto; padding:.5rem .75rem; gap:.375rem; white-space:nowrap; }
.hb-filter__dugme:hover{ transform:none; }   /* translateY u redu sa overflow-om seče gornju ivicu */
.hb-filter__tacka{ width:.625rem; height:.625rem; }
.hb-filter__nazev,.hb-filter__broj{ flex:0 0 auto; white-space:nowrap; }
.hb-filter__broj{ padding-left:.5rem; }

/* Recenzije i pitanja su u originalu u UŽEM kontejneru (max-w-5xl = 64rem),
   ne u punih 80rem kao ostatak strane. */
.hb-recenzije,
.hb-pitanja{ max-width:64rem; margin-inline:auto; }
.hb-recenzije{ padding-inline:2.5rem; }

/* „Šta kažu roditelji" i „Pitali ste, odgovaramo" su text-3xl BEZ md skoka
   na text-4xl (za razliku od naslova sekcija na naslovnoj). */
.hb-recenzije .hb-h2,
.hb-pitanja .hb-h2{ font-size:1.875rem; line-height:2.25rem; }
@media (min-width:768px){
	.hb-recenzije .hb-h2,
	.hb-pitanja .hb-h2{ font-size:1.875rem; line-height:2.25rem; }
}

/* ── Treći krug merenja ─────────────────────────────────── */

/* Hero dugme je u originalu text-base (16/24), a ne text-sm kao ostala dugmad */
.hb-hero__dugmad .hb-btn .elementor-button,
.hb-hero__dugmad .hb-btn{ font-size:1rem; line-height:1.5rem; }

/* Meni na prozirnom zaglavlju: bela/90 i text-sm (14/20) */
.home .hb-zaglavlje .hb-nav a,
.home .hb-zaglavlje .hb-nav ul li a,
.home .hb-zaglavlje .hb-nav .menu li a{
	color:rgb(255 255 255/.9); font-size:.875rem; line-height:1.25rem;
}
.home .hb-zaglavlje .hb-nav a:hover,
.home .hb-zaglavlje .hb-nav .menu li a:hover{ color:#fff; }
.hb-nav a{ font-size:.875rem; line-height:1.25rem; }

/* Cena na strani proizvoda: text-2xl = 24/32 */
.single-product div.product p.price{ line-height:2rem; }

/* ── Četvrti krug ────────────────────────────────────────
   1) Klasa `hb-btn` na Elementor dugmetu pada na OMOTAČ widgeta, pa su i
      omotač i unutrašnji <a> dobijali padding pilule → dugme široko 281px
      umesto 225px (izmereno). Omotač se neutralizuje. */
.elementor-widget-button.hb-btn,
.elementor-widget-button.hb-kartica__cta{
	background:none; box-shadow:none; padding:0; border-radius:0;
	display:inline-block; overflow:visible; transform:none;
}
.elementor-widget-button.hb-btn:hover{ background:none; box-shadow:none; transform:none; }
.elementor-widget-button.hb-btn::after{ content:none; }

/* 2) Meni: visina reda i boja moraju i na <li>, ne samo na <a> —
      stavka lista inače nosi nasleđenih 1.5 (21px umesto 20px). */
.hb-nav ul li, .hb-nav .menu li{ line-height:1.25rem; }
.home .hb-zaglavlje .hb-nav ul li,
.home .hb-zaglavlje .hb-nav .menu li{ color:rgb(255 255 255/.9); }

/* 3) Recenzije i pitanja: isti kontejner kao original
      (max-w-5xl = 64rem, px-10 = 2.5rem). */
.hb-recenzije, .hb-pitanja{
	max-width:64rem; margin-inline:auto; padding-inline:2.5rem; box-sizing:border-box;
}
.hb-pitanja__lista{ max-width:none; }

/* ══════════════════════════════════════════════════════════
   34. Futer — izjednačen sa originalom (izmereno)
   ══════════════════════════════════════════════════════════ */

/* Original je grid od TRI jednake kolone, a desni blok zauzima dve
   (`md:col-span-2`). Naših `1fr 2fr` je davalo 389/369 umesto 379/375. */
.hb-futer__gore{ grid-template-columns:1fr; gap:3rem; }
@media (min-width:768px){
	.hb-futer__gore{ grid-template-columns:repeat(3,1fr); gap:2rem; }
	.hb-futer__kolone{ grid-column:span 2; grid-template-columns:repeat(2,1fr); gap:2.5rem; }
}

/* Visine reda: naslovi kolona su text-xs (12/16), linkovi text-sm (14/20) */
.hb-futer__naslov{ line-height:1rem; }
.hb-futer ul, .hb-futer ul li, .hb-futer__meni ul, .hb-futer__meni li,
.hb-futer__meni a{ line-height:1.25rem; }

/* Razmak ispod widgeta se ne može postaviti (Elementorovo `margin-block-end:0`
   je 0,3,0) — razmak zato ide kao `margin-top` na SLEDEĆEM elementu.
   Original: brend → opis 12px, naslov kolone → sadržaj 16px. */
.hb-futer__brend + *,
.elementor-widget.hb-futer__brend + .elementor-widget{ margin-top:.75rem; }
.hb-futer__naslov + *,
.elementor-widget.hb-futer__naslov + .elementor-widget{ margin-top:1rem; }
.hb-futer__opis + .hb-newsletter,
.elementor-widget.hb-futer__opis + .elementor-widget{ margin-top:1rem; }

/* `max-w-xs` u originalu ima SAMO opis brenda; opis iznad newsletter forme
   je pune širine kolone. Kod nas obe koriste istu klasu, pa se ograničenje
   skida u desnom bloku — inače se tekst lomi u dva reda i forma padne 26px niže. */
.hb-futer__kolone .hb-futer__opis{ --hb-max:none; max-width:none; }

/* Recenzije i pitanja su u originalu u boksu `min(64rem, 100vw)` centriranom u
   VIEWPORT-u, sa sopstvenim paddingom. Kod nas sede unutar `.hb-woo` koji već
   ima svoj padding, pa bi se margina duplirala (sadržaj na 80px umesto 40px na
   768). Do 1280 sekcija zato izlazi iz roditeljskog paddinga negativnom
   marginom, a iznad toga je centriranje na 64rem tačno samo po sebi. */
.hb-recenzije, .hb-pitanja{
	margin-inline:calc(-1 * var(--pad)); max-width:none;
	padding-inline:var(--pad); box-sizing:border-box;
}
@media (min-width:1280px){
	.hb-recenzije, .hb-pitanja{
		max-width:64rem; margin-inline:auto; padding-inline:2.5rem;
	}
}
.hb-recenzije{ padding-block:2.5rem; }
@media (min-width:768px){ .hb-recenzije{ padding-block:3rem; } }

/* Stavke menija se ne prelamaju (na 768 je „Zašto Hug Bug" išao u dva reda) */
/* Hero naslov u originalu: `text-4xl md:text-6xl leading-[1.08]`. Ispod md
   `leading-[1.08]` pobeđuje fiksnih 40 px iz text-4xl → 38,9 px; od md text-6xl vraća 1. */
@media (max-width:767px){
	.hb-hero__naslov.hb-h1,
	.hb-hero__naslov.hb-h1 .elementor-heading-title{ line-height:1.08; }
}
.hb-nav a, .hb-nav .menu li a{ white-space:nowrap; }
/* 768–899: ikonica korpe (koje u prototipu nema) i meni se preklapaju do 31 px.
   Manji razmak samo u tom opsegu — od 900 px dizajn ostaje netaknut. */
@media (min-width:768px) and (max-width:899px){
	.hb-nav .menu, .hb-nav ul{ gap:.75rem; }
	.hb-zaglavlje__desno{ gap:.625rem; }
}

/* ══════════════════════════════════════════════════════════
   35. Strana Kontakt + kontakt forma (Contact Form 7) — 15.09.2026
   Uvod = blok prodavnice · forma na kartici + fotografija · kartice kao „Zašto Hug Bug".
   Polja nose isti izgled kao polja na naplati.
   ══════════════════════════════════════════════════════════ */
/* Doslovan display na svakom omotaču (§9) */
.hb-kontakt-uvod,.hb-kontakt,.hb-kontakt__kartica,.hb-kontakt__foto,.hb-kontakt__forma,
.hb-kontakt__info,.hb-prodavnica-uvod__tekst{ display:block; }
.hb-kontakt__mreza,.hb-kontakt__info-mreza{ display:grid; }
.elementor .elementor-element.hb-kontakt__mreza,
.elementor .elementor-element.hb-kontakt__info-mreza{ --display:grid; }
.elementor .elementor-element.hb-kontakt__kartica,
.elementor .elementor-element.hb-kontakt__info,
.elementor .elementor-element.hb-prodavnica-uvod__tekst{ --flex-direction:column; }

.hb-kontakt-uvod .hb-mrvice p{ margin:0; }
/* Razmaci uvoda izjednačeni sa prodavnicom (izmereno: mrvice→eyebrow 25, eyebrow→h1 12).
   U Elementoru razmak ide kao margin-top na SLEDEĆEM elementu (playbooks/08 §3). */
.hb-kontakt-uvod .elementor-widget.hb-mrvice{ line-height:1.125rem; }
.hb-kontakt-uvod .elementor-widget.hb-eyebrow{ display:block; }
.elementor .elementor-element.hb-kontakt-uvod .elementor-element.hb-prodavnica-uvod__tekst{ margin-top:1.5625rem; }
.hb-kontakt-uvod .elementor-widget.hb-eyebrow + .elementor-widget{ margin-top:.75rem; }
.hb-kontakt.hb-sekcija{ padding-block:3.5rem 5rem; }
@media (min-width:768px){ .hb-kontakt.hb-sekcija{ padding-block:4.5rem 7rem; } }

.hb-kontakt__mreza{ grid-template-columns:1fr; gap:1.5rem; align-items:stretch; }
@media (min-width:1024px){ .hb-kontakt__mreza{ grid-template-columns:7fr 5fr; gap:2rem; } }

.hb-kontakt__kartica{
	background:var(--milk); border-radius:var(--radijus); padding:2rem 1.5rem;
	border:1px solid rgb(var(--cocoa-rgb)/.08);
	box-shadow:0 24px 50px -30px rgb(var(--cocoa-rgb)/.35);
}
@media (min-width:768px){ .hb-kontakt__kartica{ padding:2.75rem 3rem; } }
.hb-kontakt__forma{ margin-top:2rem; }

/* Fotografija visine kartice sa formom (desktop), 4:3 na užim ekranima */
.hb-kontakt__foto{ position:relative; border-radius:var(--radijus); overflow:hidden; min-height:0; }
.hb-kontakt__foto .hb-kontakt__slika,
.hb-kontakt__foto .elementor-widget-container{ height:100%; }
.hb-kontakt__foto img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 30%; }
@media (min-width:1024px){
	.hb-kontakt__foto img{ aspect-ratio:auto; position:absolute; inset:0; }
}

.hb-kontakt__info-mreza{ grid-template-columns:1fr; gap:1.5rem; margin-top:1.5rem; }
@media (min-width:768px){ .hb-kontakt__info-mreza{ grid-template-columns:repeat(2,1fr); margin-top:2rem; } }
.hb-kontakt__info .hb-kontakt__veza{ margin-top:1.25rem; }
.hb-kontakt .hb-btn--link .elementor-button,
.hb-kontakt .hb-btn--link{ color:var(--sagedark); font-weight:500; }
.hb-kontakt .hb-btn--link .elementor-button:hover,
.hb-kontakt .hb-btn--link:hover{ color:var(--cocoa); }

.hb-forma{ display:grid; gap:1.25rem; }
.hb-forma__red{ display:grid; gap:1.25rem; }
@media (min-width:640px){ .hb-forma__red{ grid-template-columns:repeat(2,1fr); } }
.hb-forma__polje{ display:block; }
.hb-forma__polje > span:first-child{
	display:block; font-size:.8125rem; color:rgb(var(--cocoa-rgb)/.7); margin-bottom:.35rem;
}
.hb-forma .wpcf7-form-control-wrap{ display:block; }
.hb-forma input.wpcf7-text,
.hb-forma input.wpcf7-email,
.hb-forma input.wpcf7-tel,
.hb-forma textarea.wpcf7-textarea{
	display:block; width:100%; box-sizing:border-box;
	font-family:inherit; font-size:.875rem; color:var(--cocoa);
	background:var(--milk); border:1px solid rgb(var(--cocoa-rgb)/.18);
	border-radius:.875rem; padding:.75rem 1rem; line-height:1.4;
	transition:border-color .25s var(--lako), box-shadow .25s var(--lako);
}
.hb-forma textarea.wpcf7-textarea{ min-height:9rem; resize:vertical; }
.hb-forma input.wpcf7-form-control:focus,
.hb-forma textarea.wpcf7-textarea:focus{
	outline:none; border-color:var(--sagedark); box-shadow:0 0 0 3px rgb(var(--sage-rgb)/.25);
}
/* Omotač dugmeta je inline-block: sa inline-flex CF7 spinner postane flex stavka i razvuče ga (DO-DONT) */
.hb-forma__dugme{ display:inline-block; }
.hb-forma input.wpcf7-submit.hb-btn{ font-size:.875rem; }
.hb-forma .wpcf7-spinner{ vertical-align:middle; margin-left:.75rem; }

.hb-forma .wpcf7-not-valid{ border-color:var(--terracotta); }
.hb-forma .wpcf7-not-valid-tip{ font-size:.75rem; color:var(--terradark); margin-top:.35rem; }
.hb-kontakt .wpcf7 form .wpcf7-response-output{
	margin:1.5rem 0 0; padding:.875rem 1rem; border-radius:.875rem; font-size:.875rem;
	border:1px solid rgb(var(--cocoa-rgb)/.18); background:rgb(var(--linen-rgb)/.5);
}
.hb-kontakt .wpcf7 form.invalid .wpcf7-response-output,
.hb-kontakt .wpcf7 form.failed .wpcf7-response-output,
.hb-kontakt .wpcf7 form.aborted .wpcf7-response-output{ border-color:rgb(var(--terracotta-rgb)/.6); }
.hb-kontakt .wpcf7 form.sent .wpcf7-response-output{ border-color:var(--sagedark); }