/* of-galerije */
/* Galerije (sajt i admin) */
.ofg { --ofg-k: 4; --ofg-r: 10px; --ofg-u: 10px; --ofg-o: 1/1; }
.ofg .ofg-k { margin: 0; min-width: 0; }
.ofg .ofg-st { display: block; overflow: hidden; border-radius: var(--ofg-u); background: #efe6d8; }
.ofg .ofg-st img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ofg a.ofg-st:hover img { transform: scale(1.05); }
.ofg a.ofg-st:focus-visible { outline: 3px solid #c8963e; outline-offset: 2px; }
.ofg .ofg-opis { font-size: 14px; line-height: 1.4; padding: 6px 2px 0; color: inherit; opacity: .85; }

/* Mreža (nadjačava staru .of-galerija) */
.of-galerija.ofg--mreza { display: grid; grid-template-columns: repeat(var(--ofg-k), minmax(0, 1fr)); gap: var(--ofg-r); }
.ofg--mreza .ofg-st, .ofg--traka .ofg-st, .ofg--velika .ofg-st { aspect-ratio: var(--ofg-o); }
.of-galerija.ofg a { aspect-ratio: auto; border-radius: var(--ofg-u); }
.ofg--mreza a.ofg-st, .ofg--traka a.ofg-st, .ofg--velika a.ofg-st { aspect-ratio: var(--ofg-o); }

/* Zid */
.of-galerija.ofg--zid { display: block; columns: var(--ofg-k); column-gap: var(--ofg-r); }
.ofg--zid .ofg-k { break-inside: avoid; margin-bottom: var(--ofg-r); }
.ofg--zid .ofg-st img { height: auto; }

/* Traka */
.ofg-traka-okvir { position: relative; }
.of-galerija.ofg--traka { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--ofg-k) - 1) * var(--ofg-r)) / var(--ofg-k)); gap: var(--ofg-r); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ofg--traka::-webkit-scrollbar { display: none; }
.ofg--traka .ofg-k { scroll-snap-align: start; }
.ofg-str { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: #3b2418; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.ofg-str--l { left: 8px; } .ofg-str--d { right: 8px; }

/* Velika + male */
.of-galerija.ofg--velika { display: grid; grid-template-columns: repeat(var(--ofg-k), minmax(0, 1fr)); gap: var(--ofg-r); }
.ofg--velika .ofg-k:first-child { grid-column: span 2; grid-row: span 2; }
.ofg--velika .ofg-k:first-child .ofg-st { aspect-ratio: auto; height: 100%; }

@media (max-width: 980px) {
	.of-galerija.ofg--mreza, .of-galerija.ofg--velika { grid-template-columns: repeat(min(var(--ofg-k), 3), minmax(0, 1fr)); }
	.of-galerija.ofg--zid { columns: min(var(--ofg-k), 3); }
}
@media (max-width: 600px) {
	.of-galerija.ofg--mreza, .of-galerija.ofg--velika { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.of-galerija.ofg--zid { columns: 2; }
	.of-galerija.ofg--traka { grid-auto-columns: 78%; }
	.ofg-str { display: none; }
}

/* ---------- Admin ---------- */
.ofg-skica { flex-direction: row !important; flex-wrap: wrap; gap: 2px !important; padding: 0 !important; background: #e9dfcf !important; }
.ofg-skica img { flex: 1 1 calc(50% - 2px); width: auto !important; height: calc(50% - 1px) !important; margin: 0 !important; min-width: 0; }
.ofg-skica img:only-child { height: 100% !important; }
.ofg-skica > span { flex: 1; color: #8a7a68 !important; }
.of-sl-vise summary { cursor: pointer; color: #6b5a4a; font-size: 13px; }
.of-sl-vise[open] { flex-basis: 100%; }
.of-sl-vise form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.of-sl-vise label { display: flex; gap: 6px; align-items: center; flex-basis: 100%; }
.of-sl-vise input[type=text] { flex: 1; min-width: 0; width: 100%; box-sizing: border-box; }
.of-link-crveni { color: #b32d2e !important; }
.of-st-dno { flex-wrap: wrap; gap: 8px; }

.of-gal-ime { margin: 0; padding: 0 !important; }
.of-gal-ime input { font: 600 26px/1.2 Georgia, serif; border: 1px solid transparent; background: transparent; padding: 4px 8px; margin-left: -8px; border-radius: 8px; width: min(520px, 100%); }
.of-gal-ime input:hover, .of-gal-ime input:focus { border-color: #d3c2a5; background: #fff; }
.of-gal-ured h2 { font-size: 17px; margin: 22px 0 10px; }
.of-gal-ured h2 small { font-weight: 400; color: #7a6a5a; font-size: 13px; }
.of-gal-kolone { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 28px; }
@media (max-width: 1100px) { .of-gal-kolone { grid-template-columns: minmax(0, 1fr); } }
.of-gal-ured .of-galerija-admin li { height: auto; width: 140px; background: #fff; border: 1px solid #e6dccb; }
.of-gal-ured .of-galerija-admin img { height: 120px; }
.of-gal-opis { width: 100%; border: 0 !important; border-top: 1px solid #eee5d6 !important; border-radius: 0 !important; font-size: 12px; padding: 4px 6px !important; }
.of-gal-izbor { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.of-gal-opcija { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 2px solid #e6dccb; border-radius: 12px; background: #fff; cursor: pointer; }
.of-gal-opcija input { position: absolute; opacity: 0; }
.of-gal-opcija:has(input:checked) { border-color: #3b2418; box-shadow: 0 0 0 3px rgba(200, 150, 62, .3); }
.of-gal-opcija:has(input:focus-visible) { outline: 2px solid #c8963e; outline-offset: 2px; }
.of-gal-opcija small { color: #7a6a5a; line-height: 1.35; }
.of-gal-ikona { display: grid; gap: 3px; height: 48px; margin-bottom: 6px; grid-template-columns: repeat(3, 1fr); }
.of-gal-ikona i { background: #c9b48f; border-radius: 3px; }
.of-gal-ikona--zid { display: block; columns: 3; column-gap: 3px; }
.of-gal-ikona--zid i { display: block; height: 15px; margin-bottom: 3px; break-inside: avoid; }
.of-gal-ikona--zid i:nth-child(3n+1) { height: 27px; }
.of-gal-ikona--traka { grid-template-columns: repeat(3, 1fr) .4fr; }
.of-gal-ikona--traka i:nth-child(n+5) { display: none; }
.of-gal-ikona--velika { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.of-gal-ikona--velika i:first-child { grid-row: span 2; }
.of-gal-ikona--velika i:nth-child(6) { display: none; }
.of-gal-polja { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 14px; }
.of-gal-polja label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }
.of-gal-polja label.of-gal-check { flex-direction: row; align-items: center; font-weight: 400; grid-column: 1 / -1; }
.of-gal-polja input[type=number] { width: 70px; }
.of-gal-pregled { background: #fff; border: 1px solid #e6dccb; border-radius: 14px; padding: 18px; }

/* of-program */
/* Sekcije koraci, cinjenice i savjet */

/* ---------- Liste u tekst_slika ---------- */
.of-ts-sadrzaj ul { list-style: none; margin: 0 0 1em; padding: 0; }
.of-ts-sadrzaj ul li { position: relative; padding: 0 0 .65em 1.6em; line-height: 1.6; }
.of-ts-sadrzaj ul li::before {
	content: ""; position: absolute; left: .15em; top: .55em; width: .55em; height: .55em;
	border-radius: 50%; background: var(--of-zelena, #a31d1d); box-shadow: 0 0 0 3px color-mix(in srgb, var(--of-zelena, #a31d1d) 18%, transparent);
}
.of-ts-sadrzaj ul li strong { color: var(--b-naslov); }

/* ---------- Proces korak po korak ---------- */
.of-kr-uvod { max-width: 680px; margin: -6px auto 34px; text-align: center; font-size: 17px; line-height: 1.6; font-style: italic; color: var(--b-pod); }
.of-kr { list-style: none; margin: 0 auto; padding: 0; counter-reset: none; }
.of-kr-broj {
	position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
	background: var(--of-zelena, #a31d1d); color: #fff; box-shadow: 0 0 0 6px var(--of-krem, #f4eadb), 0 6px 18px rgba(43, 27, 19, .18); flex: none;
}
.of-kr-broj .of-ikona-svg { width: 26px; height: 26px; }
.of-kr-broj b {
	position: absolute; right: -6px; top: -6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; display: grid; place-items: center;
	background: var(--of-tamna, #24170f); color: #f4eadb; font: 700 12px/1 var(--of-font-tekst); border: 2px solid var(--of-krem, #f4eadb);
}
.of-kr-broj b:only-child { position: static; min-width: 0; height: auto; padding: 0; background: none; border: 0; font: 700 24px/1 var(--of-font-naslov); color: #fff; }
.of-kr-traj {
	display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px;
	font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--b-pod); background: color-mix(in srgb, var(--b-pod) 12%, transparent);
}
.of-kr-naslov { margin: 0 0 8px; padding: 0; font-family: var(--of-font-naslov); font-size: 20px; line-height: 1.3; color: var(--b-naslov); }
.of-kr-tekst { margin: 0; padding: 0; font-size: 16px; line-height: 1.65; }

/* Vremenska linija: desktop naizmjenično, mobitel jedna kolona */
.of-kr--linija { position: relative; max-width: 1000px; }
.of-kr--linija .of-kr-k:not(:last-child)::before {
	content: ""; position: absolute; top: 70px; bottom: 6px; left: 31px; width: 2px;
	background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--b-pod) 55%, transparent) 0 8px, transparent 8px 14px);
}
.of-kr--linija .of-kr-k { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: start; padding: 0 0 30px; }
.of-kr--linija .of-kr-k:last-child { padding-bottom: 0; }
.of-kr--linija .of-kr-tijelo {
	background: #fff; border-radius: var(--of-radius, 6px); padding: 18px 22px; box-shadow: 0 4px 18px rgba(43, 27, 19, .08);
	border: 1px solid rgba(140, 90, 30, .14); position: relative;
}
.of-blok--papir .of-kr--linija .of-kr-tijelo { background: #fffdf8; }
.of-kr--linija .of-kr-tijelo::before {
	content: ""; position: absolute; top: 24px; left: -8px; width: 14px; height: 14px; background: inherit;
	border-left: inherit; border-bottom: inherit; transform: rotate(45deg);
}
@media (min-width: 900px) {
	.of-kr--linija .of-kr-k:not(:last-child)::before { left: 50%; margin-left: -1px; bottom: -12px; }
	.of-kr--linija .of-kr-k { grid-template-columns: 1fr 64px 1fr; gap: 34px; }
	.of-kr--linija .of-kr-broj { grid-column: 2; grid-row: 1; }
	.of-kr--linija .of-kr-k:nth-child(odd) .of-kr-tijelo { grid-column: 1; grid-row: 1; text-align: right; }
	.of-kr--linija .of-kr-k:nth-child(even) .of-kr-tijelo { grid-column: 3; grid-row: 1; }
	.of-kr--linija .of-kr-k:nth-child(odd) .of-kr-tijelo::before { left: auto; right: -8px; border-left: 0; border-bottom: 0; border-right: inherit; border-top: inherit; }
	.of-kr--linija .of-kr-k { margin-top: -18px; }
	.of-kr--linija .of-kr-k:first-child { margin-top: 0; }
}

/* Kartice u redu */
.of-kr--kartice { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; max-width: 1200px; }
.of-kr--kartice .of-kr-k {
	position: relative; background: #fff; border-radius: var(--of-radius, 6px); padding: 46px 20px 22px; margin-top: 32px;
	text-align: center; box-shadow: 0 4px 18px rgba(43, 27, 19, .08); border: 1px solid rgba(140, 90, 30, .14);
}
.of-blok--papir .of-kr--kartice .of-kr-k { background: #fffdf8; }
.of-kr--kartice .of-kr-broj { position: absolute; top: -32px; left: 50%; transform: translateX(-50%); }
.of-kr--kartice .of-kr-k:not(:last-child)::after {
	content: ""; position: absolute; top: 0; right: -22px; width: 22px; height: 2px;
	background: repeating-linear-gradient(to right, color-mix(in srgb, var(--b-pod) 60%, transparent) 0 5px, transparent 5px 9px);
}
.of-kr--kartice .of-kr-naslov { font-size: 18px; }
.of-kr--kartice .of-kr-tekst { font-size: 15px; }

.of-blok--svijetli .of-kr--linija .of-kr-tijelo,
.of-blok--svijetli .of-kr--kartice .of-kr-k { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
.of-blok--svijetli .of-kr-broj { box-shadow: 0 0 0 6px rgba(0, 0, 0, .25); }

/* ---------- Brojke i činjenice ---------- */
.of-cj { display: grid; grid-template-columns: repeat(var(--k, 4), minmax(0, 1fr)); gap: 0; text-align: center; }
.of-cj-k { padding: 10px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.of-cj-k + .of-cj-k { border-left: 1px solid color-mix(in srgb, var(--b-pod) 35%, transparent); }
.of-cj-broj { font-family: var(--of-font-naslov); font-size: clamp(34px, 4.2vw, 54px); line-height: 1; font-weight: 700; color: var(--b-pod); white-space: nowrap; }
.of-cj-broj small { font-size: .42em; margin-left: .25em; font-weight: 700; letter-spacing: .02em; }
.of-cj-tekst { font-size: 15px; line-height: 1.45; max-width: 220px; opacity: .92; }
@media (max-width: 767px) {
	.of-cj { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
	.of-cj-k + .of-cj-k { border-left: 0; }
	.of-cj-k:nth-child(even) { border-left: 1px solid color-mix(in srgb, var(--b-pod) 35%, transparent); }
}

/* ---------- Savjet / citat ---------- */
.of-sv {
	position: relative; max-width: 880px; margin: 0 auto; padding: 38px clamp(22px, 5vw, 56px) 30px;
	background: #fffdf8; border-radius: var(--of-radius, 6px); border: 1px solid rgba(140, 90, 30, .18);
	box-shadow: 0 10px 30px rgba(43, 27, 19, .1);
}
.of-sv::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; border-radius: 0 4px 4px 0; background: var(--of-zelena, #a31d1d); }
.of-sv-navodnik { position: absolute; right: 26px; top: -6px; font: 700 120px/1 var(--of-font-naslov); color: color-mix(in srgb, var(--of-zelena, #a31d1d) 16%, transparent); pointer-events: none; }
.of-sv-nad { margin: 0 0 10px; padding: 0; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--b-pod); }
.of-sv-tekst { margin: 0; padding: 0; border: 0; font-family: var(--of-font-naslov); font-size: clamp(18px, 1.9vw, 21px); line-height: 1.6; font-style: italic; color: var(--b-naslov); quotes: none; }
.of-sv-lista { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px dashed rgba(140, 90, 30, .3); display: grid; gap: 10px; }
.of-sv-lista li { display: flex; gap: 10px; align-items: flex-start; padding: 0; font-size: 16px; line-height: 1.5; }
.of-sv-lista .of-ikona-svg { flex: none; margin-top: 3px; color: var(--of-zelena, #a31d1d); }
.of-sv-dno { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.of-sv-slika { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(140, 90, 30, .3); }
.of-sv-potpis { font-weight: 700; font-size: 15px; color: var(--b-pod); }
.of-sv-potpis::before { content: "— "; }
.of-blok--svijetli .of-sv { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); box-shadow: none; }

/* of-hero */
/* Hero / slajder */
.of-hero {
	position: relative;
	height: var(--of-hero-h, 85vh);
	min-height: 440px;
	overflow: hidden;
	background: #2b3a1e;
	color: #fff;
	isolation: isolate;
}
.of-hero--siroko { width: 100vw; margin-left: calc(50% - 50vw); }
body:has(.of-hero--siroko) { overflow-x: clip; }

.of-hero-track { position: absolute; inset: 0; }

/* Slajd */
.of-slajd {
	position: absolute;
	inset: 0;
	display: flex;
	padding: 64px clamp(24px, 6vw, 96px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .9s ease, visibility 0s linear .9s;
}
.of-slajd.is-active { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; z-index: 1; }

.of-slajd-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; max-width: none; }
.of-slajd-bg--prazno { background: radial-gradient(circle at 75% 30%, #c9a46a 0, #6d8b3a 38%, #2f4a22 100%); }
.of-slajd-overlay { position: absolute; inset: 0; z-index: -1; background: var(--of-ov); }

.of-ov-gradijent.of-h-lijevo .of-slajd-overlay { background: linear-gradient(90deg, var(--of-ov) 0%, var(--of-ov) 30%, transparent 85%); }
.of-ov-gradijent.of-h-desno .of-slajd-overlay { background: linear-gradient(270deg, var(--of-ov) 0%, var(--of-ov) 30%, transparent 85%); }
.of-ov-gradijent.of-h-sredina .of-slajd-overlay { background: radial-gradient(ellipse 70% 80% at 50% 50%, var(--of-ov) 0%, var(--of-ov) 35%, transparent 100%); }
.of-ov-gradijent.of-v-dolje.of-h-sredina .of-slajd-overlay { background: linear-gradient(0deg, var(--of-ov) 0%, var(--of-ov) 25%, transparent 80%); }
.of-ov-gradijent.of-v-gore.of-h-sredina .of-slajd-overlay { background: linear-gradient(180deg, var(--of-ov) 0%, var(--of-ov) 25%, transparent 80%); }

/* Pozicija teksta (9 mogućnosti) */
.of-v-gore { align-items: flex-start; }
.of-v-sredina { align-items: center; }
.of-v-dolje { align-items: flex-end; padding-bottom: 88px; }
.of-h-lijevo { justify-content: flex-start; text-align: left; }
.of-h-sredina { justify-content: center; text-align: center; }
.of-h-desno { justify-content: flex-end; text-align: right; }

.of-slajd-sadrzaj { max-width: var(--of-sirina, 640px); color: var(--of-boja, #fff); }
.of-panel-tamni, .of-panel-svijetli { padding: 32px 36px; border-radius: var(--of-radius, 14px); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.of-panel-tamni { background: rgba(20, 22, 15, .55); }
.of-panel-svijetli { background: rgba(255, 252, 245, .82); }

.of-nadnaslov {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 14px;
	opacity: .9;
}
.of-hero .of-naslov {
	font-family: var(--of-hfont, inherit);
	font-size: var(--of-hvel, 56px);
	line-height: 1.08;
	font-weight: 700;
	color: inherit;
	margin: 0 0 18px;
	padding: 0;
	text-wrap: balance;
}
.of-hero .of-podnaslov {
	font-size: var(--of-pvel, 19px);
	line-height: 1.55;
	color: inherit;
	opacity: .92;
	margin: 0 0 28px;
	padding: 0;
}
.of-dugmad { display: flex; flex-wrap: wrap; gap: 12px; }
.of-h-sredina .of-dugmad { justify-content: center; }
.of-h-desno .of-dugmad { justify-content: flex-end; }

/* Dugmad (koriste boje iz „Izgled“) */
.of-dugme {
	display: inline-block;
	padding: 14px 28px;
	border-radius: var(--of-dugme-radius, 999px);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none !important;
	border: 2px solid transparent;
	transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.of-dugme:hover { transform: translateY(-2px); }
.of-dugme--puno { background: var(--of-zelena, #3f6b35); color: #fff !important; }
.of-dugme--puno:hover { filter: brightness(1.08); }
.of-dugme--obrub { border-color: currentColor; color: var(--of-boja, #fff) !important; background: transparent; }
.of-dugme--obrub:hover { background: rgba(255, 255, 255, .12); }
.of-dugme--svijetlo { background: #fff; color: var(--of-zelena, #3f6b35) !important; }

/* Animacija teksta */
@keyframes ofGore { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ofFade { from { opacity: 0; } to { opacity: 1; } }
.of-anim-gore.is-active .of-slajd-sadrzaj > * { animation: ofGore .8s cubic-bezier(.2, .7, .2, 1) both; }
.of-anim-fade.is-active .of-slajd-sadrzaj > * { animation: ofFade 1s ease both; }
.of-slajd.is-active .of-slajd-sadrzaj > :nth-child(2) { animation-delay: .12s; }
.of-slajd.is-active .of-slajd-sadrzaj > :nth-child(3) { animation-delay: .24s; }
.of-slajd.is-active .of-slajd-sadrzaj > :nth-child(4) { animation-delay: .36s; }

/* Prijelaz: klizanje */
.of-hero--klizanje .of-hero-track { display: flex; transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.of-hero--klizanje .of-slajd { position: relative; flex: 0 0 100%; opacity: 1; visibility: visible; transition: none; }

/* Prijelaz: lagani zum */
.of-hero--kenburns .of-slajd-bg { transform: scale(1); transition: transform 0s linear 1s; }
.of-hero--kenburns .of-slajd.is-active .of-slajd-bg { transform: scale(1.1); transition: transform 9s ease-out; }

/* Strelice i tačkice */
.of-hero-str {
	position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
	width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(0, 0, 0, .28); color: #fff; font-size: 30px; line-height: 44px;
	backdrop-filter: blur(4px); transition: background .2s;
}
.of-hero-str:hover { background: rgba(0, 0, 0, .5); }
.of-hero-prev { left: 18px; }
.of-hero-next { right: 18px; }
.of-hero-tacke { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 3; display: flex; justify-content: center; gap: 10px; }
.of-hero-tacke button { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 0; cursor: pointer; background: rgba(255, 255, 255, .5); transition: width .3s, background .3s; }
.of-hero-tacke button.is-active { width: 28px; background: #fff; }

/* Tablet i mobitel (.of-hero--mob koristi admin preview) */
@media (max-width: 980px) {
	.of-hero .of-naslov { font-size: calc(var(--of-hvel, 56px) * .8); }
}
@media (max-width: 767px) {
	.of-hero { height: var(--of-hero-hm, 75vh); min-height: 420px; }
	.of-slajd { padding: 32px 22px 64px; }
	.of-hero .of-naslov { font-size: calc(var(--of-hvel, 56px) * .6); }
	.of-hero .of-podnaslov { font-size: calc(var(--of-pvel, 19px) * .9); }
	.of-panel-tamni, .of-panel-svijetli { padding: 22px; }
	.of-hero-str { display: none; }
}
.of-hero--mob .of-slajd { padding: 32px 22px 64px; }
.of-hero--mob .of-naslov { font-size: calc(var(--of-hvel, 56px) * .6); }
.of-hero--mob .of-podnaslov { font-size: calc(var(--of-pvel, 19px) * .9); }
.of-hero--mob .of-panel-tamni, .of-hero--mob .of-panel-svijetli { padding: 22px; }
.of-hero--mob .of-hero-str { display: none; }

@media (prefers-reduced-motion: reduce) {
	.of-slajd, .of-hero-track, .of-slajd-bg { transition: none !important; }
	.of-slajd-sadrzaj > * { animation: none !important; }
}

/* divi-style-child */
/*
Theme Name:   Organska Farma
Theme URI:    https://example.com/
Description:  Divi 5 child tema za organsku porodičnu proizvodnju. Header, footer, hero slajder, proizvodi, cjenovnik, radno vrijeme, galerija, kontakt, boje i fontovi – sve se uređuje iz WordPress dashboarda.
Author:       Minima Creative Lab
Template:     Divi
Version:      1.18.1
License:      GPL-2.0-or-later
Text Domain:  organska-farma
*/

/* Vlastiti CSS dodajte ispod ove linije. Stilovi komponenti su u assets/css/frontend.css */

/* of-frontend */
/* Komponente teme. Boje i fontovi: CSS varijable iz Izgled → Boje i fontovi */
:root {
	--of-zelena: #3f6b35;
	--of-zelena-svijetla: #e8f0e1;
	--of-zemlja: #7a5230;
	--of-krem: #faf6ee;
	--of-tekst: #2b2a26;
	--of-siva: #6f6a60;
	--of-crvena: #a33a2b;
	--of-narandz: #b26a00;
	--of-radius: 14px;
	--of-dugme-radius: 999px;
	--of-font-naslov: 'Fraunces', Georgia, serif;
	--of-font-tekst: inherit;
}

.of-proizvodi, .of-cjenovnik, .of-radno-vrijeme, .of-kontakt, .of-proizvod-info { font-family: var(--of-font-tekst); }
.of-kartica-tijelo h3, .of-cjenovnik-naslov, .of-proizvod-info .of-cijena { font-family: var(--of-font-naslov); }

/* Kartice proizvoda */
.of-proizvodi {
	display: grid;
	grid-template-columns: repeat(var(--of-kolone, 3), minmax(0, 1fr));
	gap: 24px;
}
@media (max-width: 980px) { .of-proizvodi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .of-proizvodi { grid-template-columns: 1fr; } }

.of-kartica {
	background: #fff;
	border-radius: var(--of-radius);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(60,50,30,.08);
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
}
.of-kartica:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 14px 32px rgba(60,50,30,.12); }
.of-kartica-slika { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--of-zelena-svijetla); }
.of-kartica-slika img { width: 100%; height: 100%; object-fit: cover; display: block; }
.of-bez-slike { display: grid; place-items: center; height: 100%; font-size: 48px; }
.of-kartica-tijelo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.of-kartica-tijelo h3 { margin: 0; padding: 0; font-size: 1.15em; line-height: 1.3; }
.of-kartica-tijelo h3 a { color: var(--of-tekst); }
.of-kartica-tijelo p { margin: 0; padding: 0; color: var(--of-siva); font-size: .95em; }
.of-kartica .of-cijena { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 1.15em; color: var(--of-zelena); }
.of-kartica.of-nema { opacity: .65; }

/* Značka dostupnosti */
.of-znacka {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	background: var(--of-zelena);
	color: #fff;
}
.of-kartica-slika .of-znacka { position: absolute; top: 12px; left: 12px; }
.of-sezonski .of-znacka { background: var(--of-narandz); }
.of-nema .of-znacka { background: var(--of-crvena); }

/* Cjenovnik */
.of-cjenovnik { background: var(--of-krem); border-radius: var(--of-radius); padding: 28px 32px; }
.of-cjenovnik-naslov { color: var(--of-zemlja); margin: 18px 0 8px; padding: 0; border-bottom: 2px solid rgba(122,82,48,.15); padding-bottom: 6px; }
.of-cjenovnik-naslov:first-child { margin-top: 0; }
.of-cjenovnik table { width: 100%; border: 0; border-collapse: collapse; margin: 0 0 8px; }
.of-cjenovnik td { border: 0; padding: 8px 0; vertical-align: bottom; }
.of-c-naziv { white-space: nowrap; color: var(--of-tekst); }
.of-c-naziv small { color: var(--of-siva); }
.of-c-tacke { width: 100%; border-bottom: 2px dotted rgba(0,0,0,.18) !important; position: relative; top: -6px; }
.of-c-cijena { white-space: nowrap; font-weight: 700; color: var(--of-zelena); padding-left: 10px !important; }
.of-cjenovnik tr.of-nema td { opacity: .5; }
@media (max-width: 560px) {
	.of-cjenovnik { padding: 20px 16px; }
	.of-c-naziv { white-space: normal; }
}

/* Radno vrijeme */
.of-radno-vrijeme { background: #fff; border-radius: var(--of-radius); padding: 24px 28px; box-shadow: 0 8px 24px rgba(60,50,30,.08); }
.of-radno-vrijeme ul { list-style: none; margin: 0; padding: 0; }
.of-radno-vrijeme li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; }
.of-radno-vrijeme li.danas { background: var(--of-zelena-svijetla); font-weight: 600; }
.of-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 14px; }
.of-status span { width: 10px; height: 10px; border-radius: 50%; background: var(--of-crvena); }
.of-status.otvoreno span { background: #3fa34d; box-shadow: 0 0 0 4px rgba(63,163,77,.2); }
.of-status.otvoreno { color: var(--of-zelena); }
.of-status.zatvoreno { color: var(--of-crvena); }
.of-napomena { margin: 14px 0 0; padding: 0; font-size: .92em; color: var(--of-siva); }

/* Galerija */
.of-galerija { display: grid; grid-template-columns: repeat(var(--of-kolone, 4), minmax(0, 1fr)); gap: 10px; }
@media (max-width: 780px) { .of-galerija { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.of-galerija a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; }
.of-galerija img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.of-galerija a:hover img { transform: scale(1.05); }

.of-lb { position: fixed; inset: 0; z-index: 999999; background: rgba(15,15,10,.92); display: flex; align-items: center; justify-content: center; padding: 24px; }
.of-lb img { max-width: 100%; max-height: 90vh; border-radius: 8px; }
.of-lb button { position: absolute; background: none; border: 0; color: #fff; font-size: 40px; cursor: pointer; padding: 8px 16px; line-height: 1; }
.of-lb .z { top: 10px; right: 10px; }
.of-lb .p { left: 6px; top: 50%; transform: translateY(-50%); }
.of-lb .n { right: 6px; top: 50%; transform: translateY(-50%); }

/* Kontakt */
.of-kontakt { list-style: none; margin: 0; padding: 0; }
.of-kontakt li { display: flex; gap: 10px; padding: 6px 0; }
.of-kontakt a { color: inherit; }

/* Pojedinačni proizvod */
.of-proizvod-info { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.of-proizvod-info .of-cijena { font-size: 1.5em; font-weight: 700; color: var(--of-zelena); }
.of-prazno { color: var(--of-siva); font-style: italic; }

.of-izuzetno { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #f7e1dc; color: #6e2318; font-weight: 600; }

/* Sekcije i kartice */
.of-sekcija { font-family: var(--of-font-tekst); }
.of-sekcija-naslov { font-family: var(--of-font-naslov); color: var(--of-tekst); margin: 0 0 8px; padding: 0; }
.of-sekcija-uvod { color: var(--of-siva); max-width: 60ch; margin: 0 0 24px; padding: 0; }
.of-sekcija--sredina { text-align: center; }
.of-sekcija--sredina .of-sekcija-uvod { margin-left: auto; margin-right: auto; }
.of-sekcija-mreza { display: grid; grid-template-columns: repeat(var(--of-kolone, 3), minmax(0, 1fr)); gap: 24px; }
@media (max-width: 980px) { .of-sekcija-mreza { grid-template-columns: repeat(min(2, var(--of-kolone, 3)), minmax(0, 1fr)); } }
@media (max-width: 600px) { .of-sekcija-mreza { grid-template-columns: 1fr; } }
.of-sk { display: flex; flex-direction: column; min-width: 0; }
.of-sk-slika { aspect-ratio: var(--of-omjer, 4/3); overflow: hidden; }
.of-sk-slika img { width: 100%; height: 100%; object-fit: cover; display: block; }
.of-sk-tijelo { display: flex; flex-direction: column; gap: 8px; }
.of-sk-naslov { font-family: var(--of-font-naslov); font-size: 1.2em; margin: 0; padding: 0; color: var(--of-tekst); }
.of-sk-tekst { margin: 0; padding: 0; color: var(--of-siva); }
.of-sk-link { font-weight: 700; color: var(--of-zelena); text-decoration: none; margin-top: auto; }
.of-sk-link:hover { text-decoration: underline; }
.of-sekcija--kartice .of-sk { background: #fff; border-radius: var(--of-radius); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(60,50,30,.08); }
.of-sekcija--kartice .of-sk-tijelo { padding: 18px 20px 20px; flex: 1; }
.of-sekcija--jednostavno .of-sk-slika { border-radius: var(--of-radius); margin-bottom: 14px; }
.of-sekcija--preko .of-sk { position: relative; border-radius: var(--of-radius); overflow: hidden; background: var(--of-zelena); min-height: 260px; }
.of-sekcija--preko .of-sk-slika { position: absolute; inset: 0; aspect-ratio: auto; }
.of-sekcija--preko .of-sk-slika::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,20,10,.8), rgba(15,20,10,.1) 70%); }
.of-sekcija--preko .of-sk-tijelo { position: relative; margin-top: auto; padding: 20px; }
.of-sekcija--preko .of-sk-naslov, .of-sekcija--preko .of-sk-tekst, .of-sekcija--preko .of-sk-link { color: #fff; }
.of-sekcija--preko .of-sk { display: flex; flex-direction: column; justify-content: flex-end; }

:root{--of-zelena:#a31d1d;--of-zelena-svijetla:#ead3a6;--of-zemlja:#8c5a1e;--of-krem:#f4eadb;--of-tekst:#2b1b13;--of-tamna:#24170f;--of-radius:6px;--of-dugme-radius:8px;--of-font-naslov:'Merriweather', Georgia, serif;--of-font-tekst:'Source Sans 3', Arial, sans-serif}body.of-fontovi,body.of-fontovi p,body.of-fontovi li,body.of-fontovi input,body.of-fontovi textarea{font-family:var(--of-font-tekst)}body.of-fontovi h1,body.of-fontovi h2,body.of-fontovi h3,body.of-fontovi h4,body.of-fontovi h5,body.of-fontovi h6{font-family:var(--of-font-naslov)}:root{--of-v-mali:clamp(0.8125rem, 0.7851rem + 0.1124vw, 0.875rem);--of-v-tekst:clamp(0.9375rem, 0.8827rem + 0.2247vw, 1.0625rem);--of-v-uvod:clamp(1.0625rem, 0.9803rem + 0.3371vw, 1.25rem);--of-v-h6:clamp(0.9375rem, 0.8827rem + 0.2247vw, 1.0625rem);--of-v-h5:clamp(1rem, 0.9178rem + 0.3371vw, 1.1875rem);--of-v-h4:clamp(1.125rem, 1.0154rem + 0.4494vw, 1.375rem);--of-v-h3:clamp(1.3125rem, 1.1208rem + 0.7865vw, 1.75rem);--of-v-h2:clamp(1.625rem, 1.2963rem + 1.3483vw, 2.375rem);--of-v-h1:clamp(2rem, 1.4522rem + 2.2472vw, 3.25rem);--of-v-hero:clamp(2.375rem, 1.3343rem + 4.2697vw, 4.75rem);--of-v-razmak-xs:clamp(0.375rem, 0.3202rem + 0.2247vw, 0.5rem);--of-v-razmak-s:clamp(0.625rem, 0.5154rem + 0.4494vw, 0.875rem);--of-v-razmak-m:clamp(1rem, 0.7809rem + 0.8989vw, 1.5rem);--of-v-razmak-l:clamp(1.75rem, 1.3118rem + 1.7978vw, 2.75rem);--of-v-razmak-xl:clamp(2.75rem, 1.9831rem + 3.1461vw, 4.5rem);--of-v-razmak-2xl:clamp(4rem, 2.4663rem + 6.2921vw, 7.5rem);}
/* of-blokovi */
/* Sekcije, baneri, recepti blok. Boje iz CSS varijabli teme. */
.of-naslovna { background: var(--of-krem); }
body.of-naslovna-blokovi #main-content { padding-top: 0 !important; }
body.of-tekstura .of-naslovna,
.of-blok--papir > .of-blok-bg {
	background-image:
		radial-gradient(rgba(120, 90, 50, .06) 1px, transparent 1.2px),
		radial-gradient(rgba(120, 90, 50, .04) 1px, transparent 1.2px);
	background-size: 7px 7px, 11px 11px;
	background-position: 0 0, 3px 5px;
}

/* ---------- Sekcija ---------- */
.of-blok {
	--b-tekst: var(--of-tekst, #2b2a26);
	--b-naslov: var(--b-akcent, var(--of-tekst, #2b2a26));
	--b-ukras: var(--of-zemlja, #8c5a1e);
	--b-pod: var(--of-zemlja, #8c5a1e);
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--b-mv, 0);
	padding: var(--b-pg, 80px) 0 var(--b-pd, 80px);
	color: var(--b-tekst);
	font-family: var(--of-font-tekst);
	overflow: hidden;
}
.of-blok--v-gore { justify-content: flex-start; }
.of-blok--v-dolje { justify-content: flex-end; }
.of-blok--svijetli {
	--b-tekst: #f4eadb;
	--b-naslov: var(--b-akcent, #fff);
	--b-ukras: #d9a852;
	--b-pod: #d9a852;
	--of-boja: #fff;
}
@media (max-width: 767px) {
	.of-blok { padding: calc(var(--b-pg, 80px) * .6) 0 calc(var(--b-pd, 80px) * .6); }
	.of-sakrij-m { display: none !important; }
}
@media (min-width: 768px) { .of-sakrij-d { display: none !important; } }

.of-blok-bg, .of-blok-ov { position: absolute; inset: 0; pointer-events: none; }
.of-blok-bg { z-index: -2; }
.of-blok-ov { z-index: -1; }
.of-blok-bg--slika { background-image: var(--b-slika); background-position: var(--b-poz, center); background-size: var(--b-vel, cover); background-repeat: var(--b-pon, no-repeat); }
@media (max-width: 767px) { .of-blok-bg--slika { background-image: var(--b-slika-m, var(--b-slika)); } }
.of-blok-bg--blur { filter: blur(var(--b-blur)); inset: calc(var(--b-blur) * -2); }
.of-blok-bg--fiksna { background-attachment: fixed; }
@media (hover: none), (max-width: 980px) { .of-blok-bg--fiksna { background-attachment: scroll; } }
.of-blok-bg--zoom { animation: ofBlokZoom 24s ease-in-out infinite alternate; }
@keyframes ofBlokZoom { from { transform: scale(1); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .of-blok-bg--zoom { animation: none; } }

.of-blok-unutra { position: relative; width: 100%; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.of-sirina--uska { max-width: 908px; }
.of-sirina--normalna { max-width: 1248px; }
.of-sirina--siroka { max-width: 1488px; }
.of-sirina--puna { max-width: none; padding: 0; }
.of-sirina--puna > .of-nsl { padding: 0 24px; }

.of-sidro { position: absolute; top: -90px; }

/* Ivice */
.of-razd { position: absolute; left: 0; right: 0; height: var(--r-vis, 60px); z-index: 0; pointer-events: none; line-height: 0; }
.of-razd svg { width: 100%; height: 100%; display: block; fill: var(--r-boja); }
.of-razd--gore { top: -1px; transform: rotate(180deg); }
.of-razd--dolje { bottom: -1px; }
.of-blok:has(.of-razd--gore) { padding-top: calc(var(--b-pg, 80px) + var(--r-vis, 0px) * .5); }

/* Animacija pojavljivanja */
.of-anim { transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.of-anim:not(.is-vidljiv).of-anim--fade { opacity: 0; }
.of-anim:not(.is-vidljiv).of-anim--gore { opacity: 0; transform: translateY(40px); }
.of-anim:not(.is-vidljiv).of-anim--zoom { opacity: 0; transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .of-anim { transition: none; opacity: 1 !important; transform: none !important; } }

/* ---------- Naslovi sekcija ---------- */
.of-nsl { margin: 0 0 40px; text-align: center; }
.of-nsl-por--lijevo .of-nsl { text-align: left; }
.of-nsl-naslov {
	margin: 0; padding: 0;
	font-family: var(--of-font-naslov);
	font-size: clamp(24px, 4vw, var(--b-nsl, 34px));
	font-weight: 700;
	line-height: 1.2;
	color: var(--b-naslov, inherit);
	text-transform: none;
}
.of-nsl-pod { margin: 10px 0 0; padding: 0; font-family: var(--of-font-naslov); font-style: italic; font-size: 17px; color: var(--b-pod); }
.of-nsl--ukras .of-nsl-naslov { display: flex; align-items: center; justify-content: center; gap: 18px; }
.of-nsl--ukras .of-nsl-naslov::before,
.of-nsl--ukras .of-nsl-naslov::after {
	content: ""; flex: 1 1 60px; max-width: 160px; height: 9px;
	background:
		linear-gradient(var(--b-ukras), var(--b-ukras)) center / 100% 1px no-repeat;
	-webkit-mask: linear-gradient(90deg, transparent, #000 30%);
	mask: linear-gradient(90deg, transparent, #000 30%);
}
.of-nsl--ukras .of-nsl-naslov::after { -webkit-mask: linear-gradient(270deg, transparent, #000 30%); mask: linear-gradient(270deg, transparent, #000 30%); }
.of-nsl--ukras .of-nsl-naslov span { position: relative; padding: 0 22px; }
.of-nsl--ukras .of-nsl-naslov span::before,
.of-nsl--ukras .of-nsl-naslov span::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--b-ukras); transform: rotate(45deg); }
.of-nsl--ukras .of-nsl-naslov span::before { left: 0; }
.of-nsl--ukras .of-nsl-naslov span::after { right: 0; }
.of-nsl-por--lijevo .of-nsl--ukras .of-nsl-naslov { justify-content: flex-start; }
.of-nsl-por--lijevo .of-nsl--ukras .of-nsl-naslov::before { display: none; }
.of-nsl-por--lijevo .of-nsl--ukras .of-nsl-naslov span { padding-left: 0; }
.of-nsl-por--lijevo .of-nsl--ukras .of-nsl-naslov span::before { display: none; }
.of-nsl--linija .of-nsl-naslov::after { content: ""; display: block; width: 56px; height: 3px; margin: 14px auto 0; background: var(--of-zelena); border-radius: 2px; }
.of-nsl-por--lijevo .of-nsl--linija .of-nsl-naslov::after { margin-left: 0; }

/* Dvije linije: assets/css/razdjelnici.css */
.of-nadnaslov { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--b-pod); }

.of-blok-dno { margin-top: 36px; text-align: center; }
.of-nsl-por--lijevo .of-blok-dno { text-align: left; }
.of-blok-prazno { padding: 30px; text-align: center; border: 2px dashed rgba(127, 127, 127, .4); border-radius: 10px; opacity: .7; margin: 0; }

/* ---------- Ikone s tekstom ---------- */
.of-vr { display: grid; grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); gap: 28px; }
.of-vr-stavka { display: flex; gap: 14px; align-items: flex-start; }
.of-vr-ikona { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--of-zelena); background: color-mix(in srgb, var(--of-zelena) 10%, transparent); border: 1px solid color-mix(in srgb, var(--of-zelena) 30%, transparent); }
.of-blok--svijetli .of-vr-ikona { color: #d9a852; background: rgba(217, 168, 82, .1); border-color: rgba(217, 168, 82, .4); }
.of-vr-slika { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.of-vr-naslov { margin: 4px 0 4px; padding: 0; font-family: var(--of-font-naslov); font-size: 17px; font-weight: 700; color: var(--b-naslov); line-height: 1.3; }
.of-vr-stavka p { margin: 0; padding: 0; font-size: 15px; line-height: 1.55; opacity: .85; }
.of-vr--traka .of-vr-stavka + .of-vr-stavka { border-left: 1px solid color-mix(in srgb, var(--b-ukras) 40%, transparent); padding-left: 28px; }
.of-vr--kartice .of-vr-stavka, .of-vr--jednostavno .of-vr-stavka { flex-direction: column; align-items: center; text-align: center; }
.of-vr--kartice .of-vr-stavka { background: #fbf5ea; border-radius: var(--of-radius); padding: 28px 22px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 24px rgba(60, 40, 20, .08); }
.of-blok--svijetli .of-vr--kartice .of-vr-stavka { background: rgba(255, 255, 255, .06); box-shadow: none; border: 1px solid rgba(255, 255, 255, .1); }
@media (max-width: 860px) {
	.of-vr { grid-template-columns: 1fr; gap: 18px; }
	.of-vr--traka .of-vr-stavka + .of-vr-stavka { border-left: 0; padding-left: 0; border-top: 1px solid color-mix(in srgb, var(--b-ukras) 30%, transparent); padding-top: 18px; }
}

/* ---------- Kartice ---------- */
.of-kt { display: grid; grid-template-columns: repeat(var(--k, 4), minmax(0, 1fr)); gap: 24px; }
@media (max-width: 980px) { .of-kt { grid-template-columns: repeat(min(var(--k, 4), 2), minmax(0, 1fr)); } }
@media (max-width: 560px) { .of-kt { grid-template-columns: 1fr; } }
.of-kt-k { display: flex; flex-direction: column; text-decoration: none !important; color: inherit !important; background: #fbf5ea; border-radius: var(--of-radius); overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 26px rgba(60, 40, 20, .1); transition: transform .2s ease, box-shadow .2s ease; }
a.of-kt-k:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 16px 34px rgba(60, 40, 20, .16); }
.of-kt-slika { position: relative; display: block; aspect-ratio: var(--omjer, 4/3); background: #e7d7bd; overflow: hidden; }
.of-kt-slika img, .of-nv-slika img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
a.of-kt-k:hover .of-kt-slika img { transform: scale(1.05); }
.of-kt-bez { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #d9c3a0, #b8946a); }
.of-kt-oznaka { position: absolute; top: 12px; left: 12px; background: var(--of-zelena); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 4px; letter-spacing: .04em; }
.of-kt-tijelo { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; flex: 1; color: var(--of-tekst); }
.of-kt-naslov { font-family: var(--of-font-naslov); font-size: 18px; line-height: 1.3; color: var(--of-tekst); }
.of-kt-tekst { font-size: 15px; line-height: 1.5; opacity: .8; }
.of-kt-link { margin-top: auto; padding-top: 6px; align-self: flex-start; font-weight: 700; font-size: 14px; color: var(--of-zelena); }
.of-kt-link::after { content: " →"; }
.of-kt--okvir .of-kt-k { padding: 10px; background: #fbf5ea; border: 1px solid #e3d2b5; }
.of-kt--okvir .of-kt-slika { border-radius: calc(var(--of-radius) - 4px); }
.of-kt--okvir .of-kt-tijelo { align-items: center; text-align: center; padding: 14px 6px 6px; }
.of-kt--okvir .of-kt-link { align-self: center; background: var(--of-zelena); color: #fff; padding: 8px 18px; border-radius: var(--of-dugme-radius); }
.of-kt--okvir .of-kt-link::after { content: ""; }
.of-kt--preko .of-kt-k { position: relative; background: #000; }
.of-kt--preko .of-kt-slika { aspect-ratio: var(--omjer, 3/4); }
.of-kt--preko .of-kt-slika::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0, 0, 0, .75)); }
.of-kt--preko .of-kt-tijelo { position: absolute; left: 0; right: 0; bottom: 0; color: #fff; }
.of-kt--preko .of-kt-naslov { color: #fff; font-size: 21px; }

/* ---------- Tekst i slika ---------- */
.of-ts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.of-ts--lijevo .of-ts-slika { order: -1; }
.of-ts--bez-slike { grid-template-columns: 1fr; }
.of-ts .of-nsl { margin-bottom: 18px; }
.of-ts-sadrzaj { font-size: 17px; line-height: 1.7; }
.of-ts-sadrzaj p { padding: 0 0 1em; margin: 0; }
.of-ts .of-dugmad { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.of-ts-slika { margin: 0; }
.of-ts-slika img { width: 100%; height: auto; display: block; }
.of-ts-slika--zaobljeno img { border-radius: var(--of-radius); }
.of-ts-slika--okvir { background: #fbf5ea; padding: 12px 12px 34px; box-shadow: 0 14px 30px rgba(40, 25, 10, .22); transform: rotate(-1.5deg); }
.of-ts--lijevo .of-ts-slika--okvir { transform: rotate(1.5deg); }
@media (max-width: 860px) { .of-ts { grid-template-columns: 1fr; } .of-ts--lijevo .of-ts-slika { order: 0; } }

/* ---------- Recepti blok ---------- */
.of-rb--slika { display: grid; grid-template-columns: minmax(220px, 1fr) 2.4fr; gap: 40px; align-items: center; }
.of-rb-lijevo { margin: 0; align-self: stretch; }
.of-rb-lijevo img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: var(--of-radius); display: block; }
@media (max-width: 980px) { .of-rb--slika { grid-template-columns: 1fr; } .of-rb-lijevo img { min-height: 0; aspect-ratio: 16/9; } }

/* ---------- Novosti ---------- */
.of-nv { display: grid; grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); gap: 24px; }
@media (max-width: 980px) { .of-nv { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .of-nv { grid-template-columns: 1fr; } }
.of-nv-k { display: flex; flex-direction: column; background: #fbf5ea; border-radius: var(--of-radius); overflow: hidden; text-decoration: none !important; color: var(--of-tekst) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 24px rgba(60, 40, 20, .08); transition: transform .2s ease; }
.of-nv-k:hover { transform: translateY(-3px); }
.of-nv-slika { position: relative; display: block; aspect-ratio: 16/10; background: #e7d7bd; overflow: hidden; }
.of-datum { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; align-items: center; min-width: 52px; padding: 6px 4px; background: var(--of-zelena); color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; line-height: 1.1; border-radius: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.of-datum b { font-family: var(--of-font-naslov); font-size: 22px; letter-spacing: 0; }
.of-nv-tijelo { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; flex: 1; }
.of-nv-tijelo strong { font-family: var(--of-font-naslov); font-size: 18px; line-height: 1.35; }
.of-nv-tijelo span { font-size: 15px; line-height: 1.55; opacity: .8; }
.of-nv-tijelo em { margin-top: auto; font-style: normal; font-weight: 700; font-size: 14px; color: var(--of-zelena); }

/* ---------- Traka s pozivom ---------- */
.of-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.of-cta--sredina { flex-direction: column; text-align: center; }
.of-cta-naslov { margin: 0 0 6px; padding: 0; font-family: var(--of-font-naslov); font-size: clamp(24px, 3vw, 32px); color: var(--b-naslov); }
.of-cta-tekst p { margin: 0; padding: 0; font-size: 17px; opacity: .9; }
.of-cta-akcije { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; }
.of-cta--sredina .of-cta-akcije { justify-content: center; }
.of-cta-tel { display: inline-flex; align-items: center; gap: 10px; font-family: var(--of-font-naslov); font-size: 22px; font-weight: 700; color: inherit !important; text-decoration: none !important; }
.of-blok--cta .of-dugme--svijetlo { color: var(--of-zelena) !important; }

/* Divi sadržaj i slobodno */
.of-divi-sadrzaj { width: 100%; }
.of-slobodno > :last-child { margin-bottom: 0; }

/* ---------- Pregled u adminu ---------- */
.of-pregled-blokova [data-of-blok] { cursor: pointer; }
.of-pregled-blokova [data-of-blok]:hover { outline: 2px dashed rgba(34, 113, 177, .7); outline-offset: -2px; }
.of-pregled-blokova [data-of-blok].is-of-izabran { outline: 3px solid #2271b1; outline-offset: -3px; }
.of-pregled-blokova [data-of-blok]::before {
	content: attr(data-of-naziv); position: absolute; z-index: 50; top: 0; left: 0;
	background: #2271b1; color: #fff; font: 600 12px/1 -apple-system, sans-serif; padding: 6px 10px; border-radius: 0 0 6px 0;
	opacity: 0; transition: opacity .15s;
}
.of-pregled-blokova .of-blok-omot[data-of-blok] { position: relative; }
.of-pregled-blokova [data-of-blok]:hover::before, .of-pregled-blokova [data-of-blok].is-of-izabran::before { opacity: 1; }

/* ---------- Baner podstranica ---------- */
.of-baner .of-blok--baner { min-height: var(--bn-h, 300px); text-align: center; }
.of-baner .of-nsl-por--lijevo { text-align: left; }
@media (max-width: 767px) { .of-baner .of-blok--baner { min-height: var(--bn-hm, 200px); } }
.of-baner-naslov {
	margin: 0; padding: 0;
	font-family: var(--of-font-naslov);
	font-size: clamp(28px, 6vw, var(--bn-vel, 46px));
	line-height: 1.1;
	font-weight: 700;
	color: var(--b-naslov) !important;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.of-blok--tamni .of-baner-naslov { text-shadow: none; }
.of-baner--velika .of-baner-naslov { text-transform: uppercase; letter-spacing: .06em; }
.of-baner--ukras .of-baner-naslov::after { content: ""; display: block; width: 90px; height: 9px; margin: 16px auto 0; background: linear-gradient(var(--b-ukras), var(--b-ukras)) center / 100% 1px no-repeat, linear-gradient(var(--b-ukras), var(--b-ukras)) center / 9px 9px no-repeat; -webkit-mask: linear-gradient(90deg, transparent, #000 30% 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30% 70%, transparent); }
.of-baner .of-nsl-por--lijevo .of-baner-naslov::after { margin-left: 0; }
.of-baner-pod { margin: 14px auto 0; padding: 0; max-width: 680px; font-family: var(--of-font-naslov); font-style: italic; font-size: 18px; color: var(--b-pod); }
.of-baner .of-nsl-por--lijevo .of-baner-pod { margin-left: 0; }
.of-mrvice { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.of-baner .of-nsl-por--lijevo .of-mrvice { justify-content: flex-start; }
.of-mrvice a { color: inherit !important; text-decoration: none !important; }
.of-mrvice a:hover { color: var(--b-ukras) !important; }
body.of-baner-sakrij-naslov .main_title,
body.of-baner-sakrij-naslov .et_post_meta_wrapper > h1.entry-title,
body.of-baner-sakrij-naslov .page .entry-title:first-child { display: none !important; }
body.of-ima-baner #main-content > .container:first-child { padding-top: 40px; }

/* ---------- Mapa ---------- */
.of-mapa { display: grid; grid-template-columns: 1fr; gap: 0; border-radius: var(--of-radius); overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 16px 36px rgba(50, 30, 15, .14); background: #fbf5ea; }
.of-mapa--lista { grid-template-columns: 2fr 1fr; }
@media (max-width: 860px) { .of-mapa--lista { grid-template-columns: 1fr; } .of-mapa-lista { max-height: none !important; } }
.of-mapa-karta { width: 100%; z-index: 0; background: #e7d7bd; }
.of-mapa-lista { list-style: none; margin: 0; padding: 8px; overflow-y: auto; color: var(--of-tekst); }
.of-mapa-lista li { margin: 0; padding: 0; list-style: none; }
.of-mapa-lista button { width: 100%; display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px; border: 0; border-radius: 8px; background: none; cursor: pointer; font: inherit; color: inherit; }
.of-mapa-lista button:hover, .of-mapa-lista button.is-active { background: #f1e3c9; }
.of-mapa-lista strong { display: block; font-family: var(--of-font-naslov); font-size: 16px; }
.of-mapa-lista small { display: flex; gap: 4px; align-items: center; font-size: 13px; opacity: .8; margin-top: 2px; }
.of-mapa-pin { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #a31d1d; color: #fff; }
.of-mapa-pin--farma { background: #3f6b35; } .of-mapa-pin--pijaca { background: #c8963e; } .of-mapa-pin--partner { background: #3b2418; }
.of-pin { background: none; border: 0; }
.of-mapa .leaflet-popup-content { font-family: var(--of-font-tekst); font-size: 14px; line-height: 1.5; }
.of-mapa .leaflet-popup-content a { color: var(--of-zelena); font-weight: 600; }

/* ---------- Akcija / događaj (odbrojavanje) ---------- */
.of-ak { max-width: 760px; display: flex; flex-direction: column; gap: 14px; }
.of-ak--sredina { margin: 0 auto; text-align: center; align-items: center; }
.of-ak-naslov { margin: 0; padding: 0; font-family: var(--of-font-naslov); font-size: clamp(34px, 5.5vw, 64px); line-height: 1.08; color: var(--b-naslov); }
.of-ak-tekst { margin: 0; font-size: 18px; line-height: 1.6; color: var(--b-tekst); opacity: .92; }
.of-odbr { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 4px; }
.of-ak--sredina .of-odbr { justify-content: center; }
.of-odbr-dio { display: flex; flex-direction: column; align-items: center; min-width: 78px; padding: 12px 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(4px); }
.of-odbr-dio b { font-family: var(--of-font-naslov); font-size: 34px; line-height: 1; color: var(--b-naslov); font-variant-numeric: tabular-nums; }
.of-odbr-dio small { margin-top: 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--b-tekst); opacity: .85; }
.of-odbr.is-kraj { font-family: var(--of-font-naslov); font-size: 20px; color: var(--b-naslov); }
.of-ak .of-dugmad { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.of-ak--sredina .of-dugmad { justify-content: center; }
@media (max-width: 560px) { .of-odbr { flex-wrap: nowrap; gap: 6px; width: 100%; max-width: 360px; } .of-odbr-dio { min-width: 0; flex: 1 1 0; padding: 10px 2px 8px; } .of-odbr-dio b { font-size: 26px; } .of-odbr-dio small { font-size: 10px; letter-spacing: .06em; } }

/* ---------- Kontakt: forma i podaci ---------- */
.of-kf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.of-kf--jedno { grid-template-columns: minmax(0, 760px); justify-content: center; }
@media (max-width: 860px) { .of-kf { grid-template-columns: 1fr; } }
.of-kf-lijevo { display: flex; flex-direction: column; gap: 22px; }
.of-kf-podaci { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.of-kf-podaci li { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 0; }
.of-kf-ikona { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; background: var(--of-zelena); }
.of-kf-podaci small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--b-pod); margin-bottom: 2px; }
.of-kf-podaci a, .of-kf-podaci span > span { font-size: 17px; font-weight: 600; color: var(--b-tekst); text-decoration: none; line-height: 1.45; }
.of-kf-podaci a:hover { text-decoration: underline; }
.of-kf-radno h3 { margin: 0 0 10px; padding: 0; font-family: var(--of-font-naslov); font-size: 19px; color: var(--b-naslov); }
.of-kf-forma { display: flex; flex-direction: column; gap: 14px; background: #fff; border-radius: var(--of-radius); padding: clamp(20px, 3vw, 32px); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 14px 34px rgba(60, 40, 20, .1); color: var(--of-tekst); }
.of-kf-uvod { margin: 0; color: var(--of-siva); line-height: 1.55; }
.of-kf-red { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .of-kf-red { grid-template-columns: 1fr; } }
.of-kf-forma label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14.5px; }
.of-kf-forma input, .of-kf-forma textarea { width: 100%; box-sizing: border-box; border: 1px solid #d6c8b2; border-radius: 10px; padding: 12px 14px; font: inherit; font-weight: 400; font-size: 16px; color: var(--of-tekst); background: #fffdf9; }
.of-kf-forma input:focus, .of-kf-forma textarea:focus { outline: 3px solid color-mix(in srgb, var(--of-zelena) 30%, transparent); border-color: var(--of-zelena); }
.of-kf-forma button { align-self: flex-start; border: 0; cursor: pointer; font: inherit; }
.of-kf-zamka { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.of-kf-poruka { margin: 0; padding: 12px 14px; border-radius: 10px; font-weight: 600; }
.of-kf-poruka--ok { background: #e3efdd; color: #2f5a22; }
.of-kf-poruka--greska { background: #f8e1dc; color: #8a2414; }

/* CTA na svijetloj pozadini: dugme u glavnoj boji */
.of-blok--tamni .of-cta .of-dugme--svijetlo { background: var(--of-zelena); color: #fff !important; border-color: var(--of-zelena); }
.of-blok--tamni .of-cta .of-dugme--svijetlo:hover { filter: brightness(1.08); }
.of-blok--tamni .of-cta-tekst p { color: color-mix(in srgb, var(--of-tekst) 80%, transparent); }

/* of-zaglavlje */
/* Zaglavlje podstranica „Kao početna“: slika preko cijele širine, providan header, naslov lijevo;
   ispod naslov između dvije linije */

.of-pz {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: var(--pz-h, 440px);
	overflow: hidden;
	background: var(--pz-bg, #2b1b13);
	color: #fff;
}
.of-pz-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100% !important;
	height: 100% !important; /* WooCommerce stranice inače daju slikama height:auto */
	max-width: none !important;
	object-fit: cover;
}
.of-pz-ov {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, var(--pz-ov) 0%, var(--pz-ov) 25%, transparent 78%),
		linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, transparent 32%);
}
.of-pz-unutra {
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 24px;
}
body.of-hdr-providan .of-pz-unutra { padding-top: 140px; }

.of-pz-naslov {
	margin: 0 0 14px;
	padding: 0;
	max-width: 760px;
	font-family: var(--pz-font, var(--of-font-naslov));
	font-size: var(--pz-vel, 62px);
	font-weight: 700;
	line-height: 1.05;
	color: #fff;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
	text-wrap: balance;
}
.of-pz--velika .of-pz-naslov { text-transform: uppercase; letter-spacing: .02em; }
.of-pz-opis {
	margin: 0 0 26px;
	padding: 0;
	max-width: 460px;
	font-size: 18px;
	line-height: 1.5;
	color: #fff;
	opacity: .95;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
.of-pz-mrvice { justify-content: flex-start; color: #fff; }
.of-pz-dugmad { display: flex; flex-wrap: wrap; gap: 14px; }
.of-pz .of-rc-trazi { margin: 0 0 22px; max-width: 560px; }

/* Naslov sa linijama ispod banera */
.of-pz-linije {
	--b-naslov: var(--of-tekst, #2b1b13);
	--b-pod: color-mix(in srgb, var(--of-tekst, #2b1b13) 70%, transparent);
	padding: 56px 24px 8px;
	background: var(--of-krem, #f4eadb);
}
.of-pz-linije .of-nsl { margin: 0 auto; max-width: 820px; }
.of-pz-linije .of-nsl-naslov { font-size: clamp(30px, 4vw, 44px); }
.of-pz-linije .of-nsl-pod { font-size: 19px; }

@media (max-width: 980px) {
	.of-pz-naslov { font-size: calc(var(--pz-vel, 62px) * .78); }
	body.of-hdr-providan .of-pz-unutra { padding-top: 110px; }
}
@media (max-width: 767px) {
	.of-pz { min-height: var(--pz-hm, 320px); }
	.of-pz-unutra { padding: 32px 16px; }
	body.of-hdr-providan .of-pz-unutra { padding-top: 96px; }
	.of-pz-naslov { font-size: calc(var(--pz-vel, 62px) * .6); }
	.of-pz-opis { font-size: 15px; margin-bottom: 20px; }
	.of-pz-ov { background: linear-gradient(90deg, var(--pz-ov) 0%, var(--pz-ov) 45%, transparent 100%), linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, transparent 35%); }
	.of-pz-linije { padding: 40px 16px 4px; }
}

/* of-moduli */
/* Redovi, kolone i moduli. CSS pojedinačnih modula se generiše u <head>. */

/* ---------- red i kolone ---------- */
.ofr { display: grid; grid-template-columns: var(--ofr-k, minmax(0, 1fr)); gap: var(--ofr-g, 28px); }
.ofr + .ofr { margin-top: var(--ofr-g, 28px); }
.ofk { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ofk > .ofm { margin: 0; }
@media (max-width: 980px) {
	.ofr--3, .ofr--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.ofr { grid-template-columns: minmax(0, 1fr); }
	.ofr--obrni { display: flex; flex-direction: column-reverse; }
}
.ofm { min-width: 0; position: relative; }
.ofm--puna { margin-left: calc(-1 * var(--of-pad-x, 0px)); margin-right: calc(-1 * var(--of-pad-x, 0px)); }
.ofm-prazan, .ofk-prazno { margin: 0; padding: 18px; border: 2px dashed rgba(140, 90, 30, .35); border-radius: 10px; text-align: center; font-size: 14px; opacity: .75; }
@media (min-width: 981px) { .ofm-sakrij-d { display: none !important; } }
@media (min-width: 601px) and (max-width: 980px) { .ofm-sakrij-t { display: none !important; } }
@media (max-width: 600px) { .ofm-sakrij-m { display: none !important; } }

/* ---------- Tekst ---------- */
.ofm-tekst { color: var(--b-tekst); line-height: 1.7; }
.ofm-tekst > :first-child { margin-top: 0; }
.ofm-tekst > :last-child { margin-bottom: 0; padding-bottom: 0; }
.ofm-tekst h2, .ofm-tekst h3, .ofm-tekst h4 { color: var(--b-naslov); font-family: var(--of-font-naslov); }

/* ---------- Naslov ---------- */
.ofm-nsl { color: var(--b-naslov); }
.ofm-nad { margin: 0 0 8px; padding: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--b-pod); }
.ofm-naslov { margin: 0; padding: 0; font-family: var(--of-font-naslov); font-size: var(--b-nsl, 34px); line-height: 1.2; color: var(--b-naslov); }
.ofm-pod { margin: 10px 0 0; padding: 0; font-family: var(--of-font-naslov); font-style: italic; font-size: 17px; color: var(--b-pod); }
.ofm-nsl--linija .ofm-naslov::after { content: ""; display: block; width: 56px; height: 3px; margin: 14px auto 0; background: var(--b-ukras); border-radius: 2px; }
.ofm-nsl--linija[style*="left"] .ofm-naslov::after { margin-left: 0; }
.ofm-nsl--ukras .ofm-naslov { display: inline-flex; align-items: center; gap: 16px; }
.ofm-nsl--ukras .ofm-naslov::before, .ofm-nsl--ukras .ofm-naslov::after { content: ""; width: 48px; height: 1px; background: var(--b-ukras); box-shadow: 0 0 0 0 transparent; }

/* ---------- Blurb ---------- */
.ofm-br { display: flex; flex-direction: column; gap: 12px; color: var(--b-tekst); text-decoration: none !important; }
.ofm-br--gore[style*="center"] { align-items: center; }
.ofm-br--lijevo { flex-direction: row; align-items: flex-start; gap: 16px; }
.ofm-br-ikona { flex: none; display: inline-grid; place-items: center; width: 1em; height: 1em; font-size: 56px; color: var(--of-zelena); }
.ofm-br-ikona svg { width: .5em; height: .5em; }
.ofm-br-ikona:not([style]) { border-radius: 50%; background: color-mix(in srgb, currentColor 10%, transparent); border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.ofm-br-slika { display: block; max-width: 100%; }
.ofm-br-slika img { display: block; max-width: 100%; height: auto; border-radius: var(--of-radius); }
.ofm-br-tijelo { display: flex; flex-direction: column; gap: 6px; }
.ofm-br-naslov { font-family: var(--of-font-naslov); font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--b-naslov); }
.ofm-br-tekst { font-size: 15.5px; line-height: 1.6; opacity: .92; }

/* ---------- Dugme ---------- */
.ofm-dugme-red { line-height: 1; }
.ofm-dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s, color .2s; }
.ofm-dugme--puna { display: flex; width: 100%; }

/* ---------- Slika ---------- */
.ofm-sl { margin: 0; }
.ofm-sl-okvir { display: block; overflow: hidden; border-radius: var(--of-radius); }
.ofm-sl-okvir img { display: block; width: 100%; height: auto; aspect-ratio: var(--ofm-omjer, auto); object-fit: cover; }
.ofm-sl--foto .ofm-sl-okvir { background: #fff; padding: 10px 10px 34px; border-radius: 2px; box-shadow: 0 10px 30px rgba(40, 25, 10, .25); transform: rotate(-1.2deg); }
.ofm-sl-opis { margin-top: 10px; font-size: 14px; font-style: italic; text-align: center; color: var(--b-pod); }

/* ---------- Blog ---------- */
.ofm-bp { display: grid; grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); gap: 24px; }
.ofm-bp--lista, .ofm-bp--tekst { grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (max-width: 980px) { .ofm-bp--mreza { grid-template-columns: repeat(min(2, var(--k, 3)), minmax(0, 1fr)); } }
@media (max-width: 600px) { .ofm-bp--mreza { grid-template-columns: minmax(0, 1fr); } }
.ofm-bp-k { display: flex; flex-direction: column; background: #fbf5ea; border-radius: var(--of-radius); overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 24px rgba(60, 40, 20, .08); transition: transform .2s ease, box-shadow .2s ease; color: var(--of-tekst); }
.ofm-bp-k:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 16px 34px rgba(60, 40, 20, .14); }
.ofm-bp--lista .ofm-bp-k { flex-direction: row; }
.ofm-bp--lista .ofm-bp-slika { flex: 0 0 min(34%, 280px); }
@media (max-width: 600px) { .ofm-bp--lista .ofm-bp-k { flex-direction: column; } }
.ofm-bp--tekst .ofm-bp-k { background: transparent; box-shadow: none; border-bottom: 1px solid rgba(140, 90, 30, .2); border-radius: 0; }
.ofm-bp--tekst .ofm-bp-k:hover { transform: none; box-shadow: none; }
.ofm-bp-slika { display: block; overflow: hidden; }
.ofm-bp-slika img, .ofm-bp-bez { display: block; width: 100%; height: 100%; aspect-ratio: var(--ofm-omjer, 4/3); object-fit: cover; }
.ofm-bp-bez { background: linear-gradient(135deg, #e4d2b2, #c9b597); }
.ofm-bp-tijelo { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 20px; flex: 1; }
.ofm-bp--tekst .ofm-bp-tijelo { padding: 0 0 18px; }
.ofm-bp-meta { margin: 0; padding: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--of-zemlja, #8c5a1e); }
.ofm-bp-naslov { margin: 0; padding: 0; font-family: var(--of-font-naslov); font-size: 19px; line-height: 1.3; }
.ofm-bp-naslov a { color: inherit; text-decoration: none; }
.ofm-bp-naslov a:hover { text-decoration: underline; }
.ofm-bp-odl { margin: 0; padding: 0; font-size: 15px; line-height: 1.6; opacity: .9; }
.ofm-bp-vise { margin-top: auto; padding-top: 4px; align-self: flex-start; font-weight: 700; font-size: 14.5px; color: var(--of-zelena); text-decoration: none; }
.ofm-bp-vise:hover { text-decoration: underline; }
.ofm-bp-pag { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
.ofm-bp-pag .page-numbers { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 8px; background: #fff; color: var(--of-tekst); font-weight: 700; text-decoration: none; box-sizing: border-box; }
.ofm-bp-pag .page-numbers.current { background: var(--of-zelena); color: #fff; }
.ofm-bp-prazno { margin: 0; text-align: center; opacity: .8; }

/* ---------- Pregled u uredniku ---------- */
.of-pregled-blokova [data-of-m] { cursor: pointer; }
.of-pregled-blokova [data-of-m]:hover { outline: 2px dashed rgba(163, 29, 29, .55); outline-offset: 3px; }
.of-pregled-blokova [data-of-m].is-of-izabran { outline: 3px solid #a31d1d; outline-offset: 3px; }
.of-pregled-blokova [data-of-s].is-of-izabran { outline: 3px solid #2271b1; outline-offset: -3px; }

/* of-recepti */
/* Recepti: kartice, arhiva, single */

/* Kartica recepta */
.of-rk-mreza { display: grid; grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); gap: 26px; }
@media (max-width: 980px) { .of-rk-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .of-rk-mreza { grid-template-columns: 1fr; } }
.of-rk { display: flex; flex-direction: column; background: #fbf5ea; color: var(--of-tekst); border-radius: var(--of-radius); overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 28px rgba(50, 30, 15, .12); transition: transform .2s ease, box-shadow .2s ease; }
.of-rk[hidden] { display: none; }
.of-rk:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 18px 36px rgba(50, 30, 15, .18); }
.of-rk-slika { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: #e7d7bd; }
.of-rk-slika img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.of-rk:hover .of-rk-slika img { transform: scale(1.05); }
.of-rk-tijelo { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 20px; flex: 1; }
.of-rk-cipovi { display: flex; flex-wrap: wrap; gap: 6px; }
.of-cip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: #ead3a6; color: #4e3208; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.of-cip svg { flex: none; }
.of-tezina { display: inline-block; width: 14px; height: 10px; vertical-align: -1px; background:
	linear-gradient(currentColor, currentColor) 0 100% / 3px 40% no-repeat,
	linear-gradient(currentColor, currentColor) 5px 100% / 3px 70% no-repeat,
	linear-gradient(currentColor, currentColor) 10px 100% / 3px 100% no-repeat; opacity: .9; }
.of-cip--lako .of-tezina, .of-tezina--lako { background:
	linear-gradient(currentColor, currentColor) 0 100% / 3px 40% no-repeat,
	linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)) 5px 100% / 3px 70% no-repeat,
	linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)) 10px 100% / 3px 100% no-repeat; }
.of-cip--srednje .of-tezina, .of-tezina--srednje { background:
	linear-gradient(currentColor, currentColor) 0 100% / 3px 40% no-repeat,
	linear-gradient(currentColor, currentColor) 5px 100% / 3px 70% no-repeat,
	linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)) 10px 100% / 3px 100% no-repeat; }
.of-rk-naslov { margin: 0; padding: 0; font-family: var(--of-font-naslov); font-size: 19px; line-height: 1.3; }
.of-rk-naslov a { color: var(--of-tekst) !important; text-decoration: none !important; }
.of-rk-naslov a::after { content: ""; position: absolute; inset: 0; }
.of-rk { position: relative; }
.of-rk-tijelo p { margin: 0; padding: 0; font-size: 15px; line-height: 1.5; opacity: .8; }
.of-rk-dugme { position: relative; z-index: 1; margin-top: auto; align-self: flex-start; padding: 9px 18px; border-radius: var(--of-dugme-radius); background: var(--of-zelena); color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none !important; }
.of-rk-dugme:hover { filter: brightness(1.1); }

/* ---------- Arhiva ---------- */
.of-rc-trazi { position: relative; max-width: 560px; margin: 26px auto 0; }
.of-baner .of-nsl-por--lijevo .of-rc-trazi { margin-left: 0; }
.of-rc-trazi input { width: 100%; box-sizing: border-box; padding: 16px 52px 16px 22px !important; border: 0 !important; border-radius: 999px !important; background: #fbf5ea !important; color: #2b1b13 !important; font-size: 16px !important; box-shadow: 0 8px 26px rgba(0, 0, 0, .3); }
.of-rc-trazi input:focus { outline: 3px solid #d9a852; }
.of-rc-trazi-ikona { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: #8c5a1e; pointer-events: none; }

.of-rc-filteri { position: sticky; top: 0; z-index: 20; background: #2b1b13; color: #f4eadb; padding: 12px 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
body.of-ima-header .of-rc-filteri { position: relative; }
.of-rc-filteri .of-blok-unutra { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.of-rc-cipovi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.of-rc-oznaka { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; opacity: .8; margin-right: 4px; }
.of-rc-cip { border: 1px solid rgba(234, 211, 166, .35); background: transparent; color: #f4eadb; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none !important; line-height: 1.2; font-family: inherit; }
.of-rc-cip small { opacity: .6; font-weight: 400; margin-left: 2px; }
.of-rc-cip:hover { border-color: #d9a852; color: #d9a852; }
.of-rc-cip.is-active { background: #d9a852; border-color: #d9a852; color: #2b1b13; }

.of-rc-sedmica-omot[hidden] { display: none; }
.of-rc-sedmica { display: grid; grid-template-columns: 1.2fr 1fr; background: #fbf5ea; border-radius: calc(var(--of-radius) + 4px); overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 20px 44px rgba(50, 30, 15, .16); border: 1px solid #e3d2b5; }
.of-rc-sedmica-slika { position: relative; display: block; min-height: 360px; background: #e7d7bd; overflow: hidden; }
.of-rc-sedmica-slika img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.of-rc-sedmica-tekst { padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: 14px; justify-content: center; align-items: flex-start; }
.of-rc-sedmica-tekst .of-nadnaslov { display: inline-flex; gap: 6px; align-items: center; color: var(--of-zelena); margin: 0; }
.of-rc-sedmica-tekst h2 { margin: 0; padding: 0; font-family: var(--of-font-naslov); font-size: clamp(24px, 3vw, 34px); line-height: 1.2; }
.of-rc-sedmica-tekst h2 a { color: var(--of-tekst) !important; text-decoration: none !important; }
.of-rc-sedmica-tekst p { margin: 0; padding: 0; font-size: 16px; line-height: 1.6; }
.of-rc-sedmica-sast { font-size: 14px !important; opacity: .8; }
@media (max-width: 860px) { .of-rc-sedmica { grid-template-columns: 1fr; } .of-rc-sedmica-slika { min-height: 0; aspect-ratio: 16/10; } }

.of-rc-mali-naslov { margin: 0 0 14px; padding: 0; font-family: var(--of-font-naslov); font-size: 20px; }
.of-rc-mali-naslov span { font-style: italic; font-weight: 400; font-size: 15px; color: var(--of-zemlja); }
.of-rc-proizvodi-red { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.of-rc-pr { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border: 1px solid #e3d2b5; background: #fbf5ea; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; color: var(--of-tekst); cursor: pointer; }
.of-rc-pr:hover { border-color: var(--of-zelena); }
.of-rc-pr[aria-pressed="true"] { background: var(--of-zelena); border-color: var(--of-zelena); color: #fff; }
.of-rc-pr-slika { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #e7d7bd; flex: none; }
.of-rc-pr-slika img { width: 100%; height: 100%; object-fit: cover; display: block; }
.of-rc-info { margin: -20px 0 16px; text-align: center; font-weight: 600; color: var(--of-zemlja); min-height: 1px; }
.of-rc-nema { text-align: center; padding: 40px 0; }

/* ---------- Jedan recept ---------- */
.of-rcp-baner .of-blok-unutra { text-align: left; }
.of-rcp-baner .of-mrvice { justify-content: flex-start; }
.of-rcp-naslov { margin: 0 0 12px; padding: 0; font-family: var(--of-font-naslov); font-size: clamp(30px, 5vw, 52px); line-height: 1.1; color: #fff !important; max-width: 820px; }
.of-rcp-uvod { margin: 0 0 24px; padding: 0; max-width: 680px; font-size: 18px; line-height: 1.6; opacity: .9; }
.of-rcp-meta { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid rgba(217, 168, 82, .35); border-radius: var(--of-radius); background: rgba(26, 17, 11, .45); width: max-content; max-width: 100%; }
.of-rcp-meta > div { padding: 12px 22px; display: flex; flex-direction: column; gap: 2px; }
.of-rcp-meta > div + div { border-left: 1px solid rgba(217, 168, 82, .25); }
.of-rcp-meta small { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #d9a852; }
.of-rcp-meta strong { font-family: var(--of-font-naslov); font-size: 17px; color: #fff; white-space: nowrap; }
@media (max-width: 600px) { .of-rcp-meta > div { padding: 10px 14px; flex: 1 1 40%; } .of-rcp-meta > div + div { border-left: 0; } }

.of-rcp-grid { display: grid; grid-template-columns: 360px 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .of-rcp-grid { grid-template-columns: 1fr; } }
.of-rcp-sastojci { position: sticky; top: 110px; background: #fbf5ea; border: 1px solid #e3d2b5; border-radius: var(--of-radius); padding: 22px; box-shadow: 0 12px 30px rgba(50, 30, 15, .1); }
@media (max-width: 900px) { .of-rcp-sastojci { position: static; } }
.of-rcp-sast-glava { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--of-zelena); }
.of-rcp-sast-glava h2, .of-rcp-h2 { margin: 0; padding: 0; font-family: var(--of-font-naslov); font-size: 24px; color: var(--of-tekst); }
.of-porcije { display: inline-flex; align-items: center; border: 1px solid #d6bf98; border-radius: 999px; background: #fff; }
.of-porcije button { width: 34px; height: 34px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--of-zelena); cursor: pointer; border-radius: 50%; }
.of-porcije button:hover { background: #f4eadb; }
.of-porcije output { min-width: 70px; text-align: center; font-size: 14px; }
.of-porcije output b { font-size: 16px; }
.of-rcp-lista { list-style: none; margin: 0; padding: 0; }
.of-rcp-lista li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px dashed #e0cba8; list-style: none; }
.of-rcp-lista label { display: flex; align-items: baseline; gap: 10px; cursor: pointer; flex: 1; font-size: 15.5px; }
.of-rcp-lista input { accent-color: var(--of-zelena); transform: translateY(2px); }
.of-rcp-lista input:checked ~ span { text-decoration: line-through; opacity: .5; }
.of-rcp-kol { font-weight: 700; color: var(--of-zelena); white-space: nowrap; min-width: 64px; }
.of-rcp-grupa { font-family: var(--of-font-naslov); font-weight: 700; color: var(--of-zemlja); padding-top: 16px !important; border-bottom: 0 !important; }
.of-nas-proizvod { flex: none; display: inline-flex; gap: 4px; align-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 4px; background: var(--of-zelena); color: #fff !important; text-decoration: none !important; }
.of-rcp-stampaj { margin-top: 16px; background: none; border: 0; padding: 0; color: var(--of-zemlja); font-weight: 600; text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; }

.of-rcp-sadrzaj { font-size: 17px; line-height: 1.75; margin-bottom: 36px; }
.of-rcp-h2 { margin-bottom: 20px; }
.of-rcp-koraci { list-style: none; counter-reset: korak; margin: 0; padding: 0; display: grid; gap: 22px; }
.of-rcp-koraci > li { counter-increment: korak; position: relative; padding: 0 0 22px 66px; border-bottom: 1px solid #e3d2b5; list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 16px; }
.of-rcp-koraci > li::before { content: counter(korak); position: absolute; left: 0; top: -2px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--of-zelena); color: #fff; font-family: var(--of-font-naslov); font-size: 20px; font-weight: 700; box-shadow: 0 4px 0 color-mix(in srgb, var(--of-zelena) 70%, #000); }
.of-rcp-korak p { margin: 0 0 10px; padding: 0; font-size: 17px; line-height: 1.7; }
.of-rcp-koraci figure { margin: 0; width: 180px; }
.of-rcp-koraci figure img { width: 100%; border-radius: 8px; display: block; }
@media (max-width: 600px) { .of-rcp-koraci > li { grid-template-columns: 1fr; padding-left: 58px; } .of-rcp-koraci figure { width: 100%; } }
.of-tajmer { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #d6bf98; border-radius: 999px; background: #ead3a6; color: #4e3208; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.of-tajmer em { font-style: normal; font-weight: 400; font-size: 12px; opacity: .75; }
.of-tajmer.is-radi { background: var(--of-zelena); border-color: var(--of-zelena); color: #fff; }
.of-tajmer.is-gotovo { background: #2b1b13; color: #d9a852; animation: ofTajmer 1s ease infinite; }
@keyframes ofTajmer { 50% { transform: scale(1.06); } }
.of-rcp-savjet { display: flex; gap: 16px; margin-top: 32px; padding: 20px 22px; border-radius: var(--of-radius); background: #2b1b13; color: #f4eadb; border-left: 5px solid #d9a852; }
.of-rcp-savjet-ikona { color: #d9a852; flex: none; }
.of-rcp-savjet strong { font-family: var(--of-font-naslov); color: #d9a852; font-size: 17px; }
.of-rcp-savjet p { margin: 6px 0 0; padding: 0; line-height: 1.6; }

.of-proizvod-recepti { margin-top: 48px; }

@media print {
	#main-header, .of-hdr-omot, .of-ftr, footer, .of-porcije, .of-rcp-stampaj, .of-tajmer em, .of-blok--rk, .of-rcp ~ *, .of-rcp > .of-blok + .of-blok { display: none !important; }
	.of-rcp-baner .of-blok-bg, .of-rcp-baner .of-blok-ov { display: none; }
	.of-rcp-baner, .of-rcp-naslov, .of-rcp-meta strong { color: #000 !important; }
	.of-rcp-grid { grid-template-columns: 1fr 1.6fr; }
	.of-rcp-sastojci { position: static; box-shadow: none; }
}

/* of-stranice-dizajn */
/* Sekcije: tekst u kolonama, katalog, mapa i forma, kontakt podaci, novosti kao lista.
   Boje: --of-zelena (glavna), --of-krem, --of-tekst, --of-tamna, --of-zemlja */

/* ---------- Tekst u kolonama sa slikom ---------- */
.of-tk { color: var(--b-tekst, var(--of-tekst)); font-size: 16.5px; line-height: 1.75; }
.of-tk--2 { column-count: 2; column-gap: 48px; }
.of-tk p { margin: 0 0 1em; padding: 0; break-inside: avoid-column; }
.of-tk p:last-child { margin-bottom: 0; }
.of-tk--1 { max-width: 860px; margin: 0 auto; }
.of-tk-slika { margin: 40px 0 0; }
.of-tk-slika img {
	display: block; width: 100%; height: auto;
	border: 6px solid #fff; box-shadow: 0 6px 22px rgba(43, 27, 19, .22);
	border-radius: 2px;
}
.of-tk-slika--omjer img { aspect-ratio: var(--omjer); object-fit: cover; }
.of-tk-slika figcaption,
.of-ts-slika figcaption {
	margin-top: 12px; font-family: var(--of-font-naslov); font-style: italic;
	font-size: 14px; color: var(--b-pod, #6b5646); text-align: left;
}
@media (max-width: 767px) {
	.of-tk--2 { column-count: 1; }
	.of-tk-slika { margin-top: 28px; }
}

/* ---------- Katalog proizvoda ---------- */
.of-kat-filter {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px;
	margin: -8px auto 34px; padding: 0 0 14px;
	border-bottom: 1px solid color-mix(in srgb, var(--of-tekst) 18%, transparent);
	max-width: 900px;
}
.of-kat-filter button {
	appearance: none; border: 0; background: none; cursor: pointer;
	padding: 6px 14px; border-radius: 3px;
	font-family: var(--of-font-naslov); font-size: 15px; color: var(--of-tekst);
	transition: background .2s, color .2s;
}
.of-kat-filter button:hover { color: var(--of-zelena); }
.of-kat-filter button.is-active { background: var(--of-zelena); color: #fff; }
.of-kat-grupa { margin: 0 0 44px; }
.of-kat-grupa:last-child { margin-bottom: 0; }
.of-kat-grupa[hidden] { display: none; }
.of-kat-glava .of-nsl { margin-bottom: 20px; }
.of-kat-glava .of-nsl-naslov { font-size: clamp(22px, 2.6vw, 28px); }
.of-kat-mreza { display: grid; grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); gap: 24px; }
.of-kp {
	display: flex; flex-direction: column; background: #fff; border-radius: 6px; overflow: hidden;
	box-shadow: 0 2px 4px rgba(43, 27, 19, .06), 0 8px 22px rgba(43, 27, 19, .1);
	transition: transform .25s, box-shadow .25s;
}
.of-kp:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(43, 27, 19, .08), 0 14px 30px rgba(43, 27, 19, .16); }
.of-kp-slika { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #e9dcc8; }
.of-kp-slika img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.of-kp:hover .of-kp-slika img { transform: scale(1.04); }
.of-kp-akcija {
	position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 3px;
	background: var(--of-zelena); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.of-kp-tijelo { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 16px 18px 20px; text-align: center; }
.of-kp-naslov { margin: 0 0 6px; padding: 0; font-family: var(--of-font-naslov); font-size: 18px; line-height: 1.3; }
.of-kp-naslov a { color: var(--of-tekst) !important; text-decoration: none; }
.of-kp-naslov a:hover { color: var(--of-zelena) !important; }
.of-kp-tekst { margin: 0 0 8px; padding: 0; font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--of-tekst) 72%, transparent); }
.of-kp-cijena { margin: 0 0 12px; font-weight: 700; color: var(--of-zelena); }
.of-kp-cijena del { color: color-mix(in srgb, var(--of-tekst) 50%, transparent); font-weight: 400; margin-right: 6px; }
.of-kp-cijena ins { text-decoration: none; }
.of-kp-dugme { margin-top: auto; padding: 9px 22px !important; font-size: 14px !important; }
.of-kp-dugme.added { opacity: .8; }
.of-kp .added_to_cart { display: block; margin-top: 8px; font-size: 13px; }
.of-kat-vise { margin: 16px 0 0; text-align: right; }
.of-kat-vise a { font-family: var(--of-font-naslov); font-style: italic; color: var(--of-zelena); }
@media (max-width: 980px) { .of-kat-mreza { --k: 2 !important; } }
@media (max-width: 560px) {
	.of-kat-mreza { --k: 2 !important; gap: 12px; }
	.of-kp-tijelo { padding: 12px 10px 14px; }
	.of-kp-naslov { font-size: 15px; }
	.of-kp-tekst { display: none; }
	.of-kp-dugme { padding: 8px 12px !important; font-size: 13px !important; }
	.of-kat-filter { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px 12px; }
	.of-kat-filter button { flex: 0 0 auto; }
}

/* ---------- Mapa i forma ---------- */
.of-km { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.of-km-mapa {
	border: 6px solid #fff; border-radius: 3px; overflow: hidden;
	box-shadow: 0 6px 22px rgba(43, 27, 19, .18); background: #efe6d6;
}
.of-km-mapa .of-mapa { margin: 0; }
.of-km-bez-mape {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center;
	color: var(--of-tekst); background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .025) 0 10px, transparent 10px 20px);
}
.of-km-bez-mape svg { color: var(--of-zelena); }
.of-km-bez-mape small { opacity: .6; max-width: 280px; }
.of-km-kartica {
	padding: 26px 24px; background: #fff; border-radius: 6px;
	box-shadow: 0 2px 4px rgba(43, 27, 19, .06), 0 10px 26px rgba(43, 27, 19, .12);
}
.of-km-kartica .of-kf-forma { margin: 0; padding: 0; background: none; box-shadow: none; border: 0; }
.of-km-kartica .of-kf-red { display: block; }
.of-km-kartica label { display: block; margin: 0 0 12px; font-size: 14px; color: var(--of-tekst); }
.of-km-kartica input[type=text], .of-km-kartica textarea {
	display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 10px 12px;
	border: 1px solid #d9cbb4; border-radius: 4px; background: #fffdf9; font: inherit; color: var(--of-tekst);
}
.of-km-kartica input:focus, .of-km-kartica textarea:focus { outline: 2px solid color-mix(in srgb, var(--of-zelena) 45%, transparent); border-color: var(--of-zelena); }
.of-km-kartica button[type=submit] { width: 100%; margin-top: 4px; }
.of-km-chat {
	display: flex; align-items: center; gap: 0; width: max-content; max-width: 100%; margin: 22px 0 0 auto;
	text-decoration: none !important; filter: drop-shadow(0 4px 10px rgba(43, 27, 19, .25)); transition: transform .2s;
}
.of-km-chat:hover { transform: translateY(-2px); }
.of-km-chat-ikona {
	position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; margin-right: -14px;
	border-radius: 50%; background: #4f7a2b; color: #fff; border: 3px solid #fff;
}
.of-km-chat-tekst {
	padding: 12px 28px 12px 30px; border-radius: 6px; background: linear-gradient(#7aa83c, #5d8a2c);
	color: #fff; font-family: var(--of-font-naslov); font-size: 21px; font-weight: 700;
}
@media (max-width: 860px) {
	.of-km { grid-template-columns: 1fr; }
	.of-km-chat { margin: 18px auto 0; }
}

/* ---------- Kontakt podaci sa slikom ---------- */
.of-ki { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: end; }
.of-ki--slika { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.of-ki-mreza { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 36px; margin: 0; padding: 0 0 24px; list-style: none; align-self: center; }
.of-ki-stavka { display: flex; gap: 16px; align-items: flex-start; margin: 0; padding: 0; }
.of-ki-ikona { flex: 0 0 auto; color: var(--of-zelena); padding-top: 2px; }
.of-ki-tekst { font-size: 16px; line-height: 1.55; color: var(--of-tekst); }
.of-ki-tekst strong { display: block; font-family: var(--of-font-naslov); font-size: 15px; margin-bottom: 2px; }
.of-ki-tekst a { color: inherit !important; text-decoration: none; }
.of-ki-tekst a:hover { color: var(--of-zelena) !important; }
.of-ki-slika { margin: 0 0 -1px; }
.of-ki-slika img { display: block; width: 100%; max-width: 380px; height: auto; margin-left: auto; }
.ofs:has(.of-ki-slika), .of-blok--kontakt_info:has(.of-ki-slika) { padding-bottom: 0 !important; }
@media (max-width: 860px) {
	.of-ki--slika { grid-template-columns: 1fr; }
	.of-ki-slika img { margin: 0 auto; max-width: 300px; }
}
@media (max-width: 560px) { .of-ki-mreza { grid-template-columns: 1fr; gap: 22px; } }

/* ---------- Novosti kao lista ---------- */
.of-nvl { display: grid; gap: 26px; max-width: 980px; margin: 0 auto; }
.of-nvl-k { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; align-items: center; }
.of-nvl-slika { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; border: 4px solid #fff; box-shadow: 0 4px 16px rgba(43, 27, 19, .18); background: #e9dcc8; }
.of-nvl-slika img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.of-nvl-k:hover .of-nvl-slika img { transform: scale(1.04); }
.of-nvl-naslov { margin: 0 0 4px; padding: 0; font-family: var(--of-font-naslov); font-size: 22px; line-height: 1.3; }
.of-nvl-naslov a { color: var(--of-tekst) !important; text-decoration: none; }
.of-nvl-naslov a:hover { color: var(--of-zelena) !important; }
.of-nvl-meta { margin: 0 0 8px; padding: 0; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--of-tekst) 55%, transparent); }
.of-nvl-tekst { margin: 0 0 12px; padding: 0; font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--of-tekst) 80%, transparent); }
.of-nvl-vise {
	display: inline-block; padding: 5px 14px; border-radius: 3px; font-size: 13px; font-weight: 600;
	background: var(--of-zelena-svijetla, #ead3a6); color: var(--of-tekst) !important; text-decoration: none !important;
}
.of-nvl-vise:hover { background: var(--of-zelena); color: #fff !important; }
.of-strane { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 34px 0 0; }
.of-strane .page-numbers {
	display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 4px;
	background: #fff; color: var(--of-tekst) !important; text-decoration: none !important; box-shadow: 0 1px 4px rgba(43, 27, 19, .12);
}
.of-strane .page-numbers.current, .of-strane a.page-numbers:hover { background: var(--of-zelena); color: #fff !important; }
@media (max-width: 600px) {
	.of-nvl-k { grid-template-columns: 1fr; gap: 12px; }
	.of-nvl-naslov { font-size: 20px; }
}
.of-ki:not(.of-ki--slika) .of-ki-mreza { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 1000px; margin: 0 auto; width: 100%; }

/* of-razdjelnici */
/* Razdjelnici. Boja: --rz-c ili currentColor.
   Varijable po .of-rz-ID (iz PHP-a): --rz-deb, --rz-duz, --rz-uk, --rz-ukr, --rz-raz, --rz-op, --rz-img, --rz-l, --rz-d */

.of-nsl--rz .of-nsl-naslov,
.ofm-nsl--rz .ofm-naslov {
	display: flex; align-items: center; justify-content: center; gap: var(--rz-raz, 20px);
}
.of-nsl--rz .of-nsl-naslov span { min-width: 0; }
.of-nsl--rz .of-nsl-naslov::before, .of-nsl--rz .of-nsl-naslov::after,
.ofm-nsl--rz .ofm-naslov::before, .ofm-nsl--rz .ofm-naslov::after,
.of-rz::before, .of-rz::after {
	content: ""; flex: 1 1 0; min-width: 28px; max-width: var(--rz-duz, 240px);
	height: max(var(--rz-uk, 7px), var(--rz-deb, 1px));
	background: var(--rz-c, currentColor); opacity: var(--rz-op, .85);
}
/* lijeva linija: ukras desno (kod naslova), linija blijedi ulijevo */
.of-nsl--rz .of-nsl-naslov::before, .ofm-nsl--rz .ofm-naslov::before {
	-webkit-mask: var(--rz-img) right center / var(--rz-uk) var(--rz-uk) no-repeat, var(--rz-l) left center / calc(100% - var(--rz-uk) - var(--rz-ukr)) var(--rz-deb) no-repeat;
	mask: var(--rz-img) right center / var(--rz-uk) var(--rz-uk) no-repeat, var(--rz-l) left center / calc(100% - var(--rz-uk) - var(--rz-ukr)) var(--rz-deb) no-repeat;
}
/* desna linija: ukras lijevo (kod naslova), linija blijedi udesno */
.of-nsl--rz .of-nsl-naslov::after, .ofm-nsl--rz .ofm-naslov::after {
	-webkit-mask: var(--rz-img) left center / var(--rz-uk) var(--rz-uk) no-repeat, var(--rz-d) right center / calc(100% - var(--rz-uk) - var(--rz-ukr)) var(--rz-deb) no-repeat;
	mask: var(--rz-img) left center / var(--rz-uk) var(--rz-uk) no-repeat, var(--rz-d) right center / calc(100% - var(--rz-uk) - var(--rz-ukr)) var(--rz-deb) no-repeat;
}
/* podnaslov u kurzivu sa crticama */
.of-nsl--rz .of-nsl-pod::before, .ofm-nsl--rz .ofm-pod::before { content: "- "; }
.of-nsl--rz .of-nsl-pod::after, .ofm-nsl--rz .ofm-pod::after { content: " -"; }

/* naslov poravnat lijevo: linija samo desno */
.of-nsl-por--lijevo .of-nsl--rz .of-nsl-naslov,
.ofm-nsl--rz[style*="left"] .ofm-naslov { justify-content: flex-start; }
.of-nsl-por--lijevo .of-nsl--rz .of-nsl-naslov::before,
.ofm-nsl--rz[style*="left"] .ofm-naslov::before { display: none; }
.ofm-nsl--rz[style*="right"] .ofm-naslov { justify-content: flex-end; }
.ofm-nsl--rz[style*="right"] .ofm-naslov::after { display: none; }

/* ---------- Samostalni razdjelnik:  ————— • ————— ---------- */
.of-rz { display: flex; align-items: center; justify-content: center; gap: var(--rz-ukr, 5px); width: 100%; margin: 0 auto; color: var(--b-naslov, var(--of-tekst, #2b1b13)); }
.of-rz::before { -webkit-mask: var(--rz-l) left center / 100% var(--rz-deb) no-repeat; mask: var(--rz-l) left center / 100% var(--rz-deb) no-repeat; }
.of-rz::after { -webkit-mask: var(--rz-d) right center / 100% var(--rz-deb) no-repeat; mask: var(--rz-d) right center / 100% var(--rz-deb) no-repeat; }
.of-rz-uk {
	flex: 0 0 auto; width: calc(var(--rz-uk) * 1.3); height: calc(var(--rz-uk) * 1.3);
	background: var(--rz-c, currentColor); opacity: var(--rz-op, .85);
	-webkit-mask: var(--rz-img) center / contain no-repeat; mask: var(--rz-img) center / contain no-repeat;
}
.of-rz--left { justify-content: flex-start; }
.of-rz--left::before { display: none; }
.of-blok--svijetli .of-rz, .of-rz-tamno .of-rz { color: var(--b-naslov, #f4eadb); }

@media (max-width: 600px) {
	.of-nsl--rz .of-nsl-naslov, .ofm-nsl--rz .ofm-naslov { gap: calc(var(--rz-raz, 20px) * .6); }
}

.of-rz-osnovni{--rz-deb:1px;--rz-duz:240px;--rz-uk:7px;--rz-ukr:5px;--rz-raz:20px;--rz-op:0.85;--rz-img:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%2210%22%2F%3E%3C%2Fsvg%3E");--rz-l:linear-gradient(to left,rgba(0,0,0,1),rgba(0,0,0,0));--rz-d:linear-gradient(to right,rgba(0,0,0,1),rgba(0,0,0,0));}
/* of-sabloni */
/* Moduli šablona (artikal, proizvod, objava, recept) */

/* artikal u šablonu: WooCommerce stilovi rade, ali raspored je iz sekcija */
.of-sab-woo div.product { display: block !important; }
.of-sab-woo div.product > * { grid-column: auto; }
.of-sab-woo .woocommerce-notices-wrapper:not(:empty) { max-width: 1200px; margin: 20px auto 0; padding: 0 24px; box-sizing: border-box; }
.of-sab-woo div.product div.images { width: auto !important; float: none !important; margin: 0 !important; }
.of-sab-woo div.product form.cart { margin-bottom: 18px !important; }

.ofp-naslov { margin: 0 0 12px; padding: 0; font-family: var(--of-font-naslov); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; color: var(--b-naslov, var(--of-tekst)); }
h2.ofp-naslov { font-size: clamp(26px, 3vw, 36px); }
h3.ofp-naslov { font-size: 24px; }

.ofp-slika { margin: 0 0 22px; }
.ofp-slika img { display: block; width: 100%; height: auto; border-radius: 3px; }
.ofp-slika--omjer img { aspect-ratio: var(--omjer); object-fit: cover; }
.ofp-slika--okvir img { border: 6px solid #fff; box-shadow: 0 6px 22px rgba(43, 27, 19, .18); box-sizing: border-box; }
.ofp-slika figcaption { margin-top: 10px; font-family: var(--of-font-naslov); font-style: italic; font-size: 14px; color: var(--b-pod, #6b5646); }

.ofp-nsl { margin: 0 0 14px; font-family: var(--of-font-naslov); font-size: 26px; color: var(--b-naslov, var(--of-tekst)); }
.ofp-sadrzaj { font-size: 17px; line-height: 1.75; color: var(--b-tekst, var(--of-tekst)); }
.ofp-sadrzaj > :first-child { margin-top: 0; }
.ofp-sadrzaj h2, .ofp-sadrzaj h3 { font-family: var(--of-font-naslov); color: var(--b-naslov, var(--of-tekst)); margin: 1.4em 0 .5em; }
.ofp-sadrzaj img { max-width: 100%; height: auto; border-radius: 3px; }
.ofp-sadrzaj blockquote { margin: 1.5em 0; padding: 14px 22px; border-left: 3px solid var(--of-zelena); background: rgba(255, 255, 255, .55); font-family: var(--of-font-naslov); font-style: italic; }
.ofp-odlomak { margin: 0 0 18px; font-size: 16.5px; line-height: 1.7; color: color-mix(in srgb, var(--of-tekst) 85%, transparent); }
.ofp-odlomak p { margin: 0 0 .7em; }

.ofp-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 20px; padding: 10px 0; border-top: 1px dashed #dccbb0; border-bottom: 1px dashed #dccbb0; font-size: 14px; color: color-mix(in srgb, var(--of-tekst) 70%, transparent); }
.ofp-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ofp-meta svg { color: var(--of-zelena); flex: 0 0 auto; }
.ofp-meta a { color: inherit !important; text-decoration: none; }
.ofp-meta a:hover { color: var(--of-zelena) !important; }

.ofp-oznake { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0; }
.ofp-oznake strong { font-family: var(--of-font-naslov); margin-right: 4px; }
.ofp-oznake a { padding: 5px 12px; border-radius: 3px; background: #fff; border: 1px solid #e3d2b5; font-size: 13px; color: var(--of-tekst) !important; text-decoration: none !important; transition: background .2s, color .2s; }
.ofp-oznake a:hover { background: var(--of-zelena); border-color: var(--of-zelena); color: #fff !important; }

.ofp-dijeli { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0; }
.ofp-dijeli strong { font-family: var(--of-font-naslov); margin-right: 4px; }
.ofp-dijeli a { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--of-zelena-svijetla, #ead3a6); color: var(--of-tekst) !important; transition: background .2s, color .2s, transform .2s; }
.ofp-dijeli a:hover, .ofp-dijeli a.is-kopirano { background: var(--of-zelena); color: #fff !important; transform: translateY(-2px); }

.ofp-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0; }
.ofp-nav a { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border-radius: 6px; text-decoration: none !important; box-shadow: 0 2px 10px rgba(43, 27, 19, .08); transition: box-shadow .2s; }
.ofp-nav a:hover { box-shadow: 0 6px 18px rgba(43, 27, 19, .16); }
.ofp-nav-sl { flex-direction: row-reverse; text-align: right; }
.ofp-nav img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.ofp-nav small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--of-zelena); }
.ofp-nav strong { font-family: var(--of-font-naslov); font-size: 15px; color: var(--of-tekst); line-height: 1.3; }
@media (max-width: 600px) { .ofp-nav { grid-template-columns: 1fr; } }

.ofp-komentari { margin-top: 32px; }
.ofp-komentari .comment-respond { padding: 22px; background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(43, 27, 19, .08); }
.ofp-komentari h2, .ofp-komentari h3 { font-family: var(--of-font-naslov); }

.ofp-mrvice { margin: 0 0 14px; font-size: 13px; letter-spacing: .04em; color: color-mix(in srgb, var(--of-tekst) 65%, transparent); }
.ofp-mrvice a { color: inherit !important; text-decoration: none; }
.ofp-mrvice a:hover { color: var(--of-zelena) !important; }
.ofp-mrvice > span[aria-hidden] { margin: 0 8px; }

/* bočna kolona (objava) */
.ofp-bocna { display: grid; gap: 22px; position: sticky; top: 110px; }
.ofp-kutija { padding: 20px; background: #fff; border-radius: 6px; box-shadow: 0 2px 4px rgba(43, 27, 19, .06), 0 8px 22px rgba(43, 27, 19, .1); }
.ofp-kutija h3 { margin: 0 0 14px; padding: 0 0 10px; border-bottom: 2px solid var(--of-zelena-svijetla, #ead3a6); font-family: var(--of-font-naslov); font-size: 19px; color: var(--of-tekst); }
.ofp-kutija .of-shop-kategorije { margin: 0 !important; }
.ofp-kutija .ofp-oznake { margin: 0; }
.ofp-trazi { display: flex; border: 1px solid #d9cbb4; border-radius: 4px; overflow: hidden; background: #fffdf9; }
.ofp-trazi input { flex: 1; min-width: 0; padding: 10px 12px; border: 0; background: none; font: inherit; }
.ofp-trazi button { padding: 0 14px; border: 0; background: var(--of-zelena); color: #fff; cursor: pointer; }
.ofp-najnovije { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ofp-najnovije li { margin: 0; padding: 0; }
.ofp-najnovije a { display: flex; gap: 12px; align-items: center; text-decoration: none !important; }
.ofp-najnovije img, .ofp-najnovije .of-kt-bez { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.ofp-najnovije strong { display: block; font-family: var(--of-font-naslov); font-size: 14.5px; line-height: 1.35; color: var(--of-tekst); }
.ofp-najnovije a:hover strong { color: var(--of-zelena); }
.ofp-najnovije small { font-size: 12px; color: color-mix(in srgb, var(--of-tekst) 55%, transparent); }
@media (max-width: 980px) { .ofp-bocna { position: static; } }

/* artikal: cijena, dostava */
.ofp-cijena { margin: 0 0 16px; }
.ofp-cijena .price { margin: 0 !important; font-size: 28px !important; font-weight: 700; color: var(--of-zelena) !important; }
.ofp-cijena del { opacity: .55; font-size: .7em; margin-right: 8px; }
.ofp-cijena ins { text-decoration: none; }
.ofp-cijena .woocommerce-product-rating { margin-bottom: 6px; }
.ofp-cijena > strong { display: inline-block; margin-right: 14px; font-size: 28px; color: var(--of-zelena); }
.ofp-cijena .of-dugme { margin-top: 14px; display: table; }
.ofp-dost { display: inline-block; padding: 3px 10px; border-radius: 3px; font-size: 13px; font-weight: 600; background: #e3f2dc; color: #2f6b20; vertical-align: middle; }
.ofp-dost--nema, .ofp-dost--rasprodano { background: #f6dede; color: #a31d1d; }
.ofp-dostava { margin: 4px 0 18px; padding: 16px 18px; background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(43, 27, 19, .08); }
.ofp-dostava .of-dostava-traka { margin: 0 0 12px; }
.ofp-dostava ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ofp-dostava li { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14.5px; color: var(--of-tekst); }
.ofp-dostava li > span { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--of-zelena) 10%, transparent); color: var(--of-zelena); flex: 0 0 auto; }
.of-sab-woo .product_meta { font-size: 13px; color: color-mix(in srgb, var(--of-tekst) 65%, transparent); }
.of-sab-woo .product_meta > span { display: block; margin-bottom: 4px; }
.of-sab-woo .product_meta a { color: var(--of-zelena); }

/* recept u šablonu: sastojci ne trebaju lijepljivi okvir tabele recepta */
.of-sablon .of-rcp--info .of-rcp-meta { color: var(--of-tekst); }
.of-sablon .of-rcp-sastojci { position: sticky; top: 110px; }
@media (max-width: 980px) { .of-sablon .of-rcp-sastojci { position: static; } }

/* forma za komentar */
.ofp-komentari .comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.ofp-komentari .comment-form > p { margin: 0; grid-column: 1 / -1; }
.ofp-komentari .comment-form-author, .ofp-komentari .comment-form-email { grid-column: auto !important; }
.ofp-komentari .comment-form label { display: block; margin-bottom: 4px; font-size: 14px; color: var(--of-tekst); }
.ofp-komentari .comment-form input[type=text], .ofp-komentari .comment-form input[type=email], .ofp-komentari .comment-form input[type=url], .ofp-komentari .comment-form textarea {
	width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #d9cbb4; border-radius: 4px; background: #fffdf9; font: inherit;
}
.ofp-komentari .comment-form textarea { min-height: 130px; }
.ofp-komentari .comment-form-cookies-consent { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.ofp-komentari .comment-form-cookies-consent label { margin: 0; }
.ofp-komentari .form-submit input[type=submit] { padding: 12px 26px; border: 0; border-radius: var(--of-dugme-radius, 4px); background: var(--of-zelena); color: #fff; font-weight: 700; cursor: pointer; }
.ofp-komentari .comment-list { margin: 0 0 24px; padding: 0; list-style: none; }
.ofp-komentari .comment-body { margin-bottom: 14px; padding: 16px; background: #fff; border-radius: 6px; }
@media (max-width: 600px) { .ofp-komentari .comment-form { grid-template-columns: 1fr; } }

/* of-hf */
/* Header i footer (vrijednosti dolaze kao CSS varijable) */

/* ===================== HEADER ===================== */
.of-preskoci { position: absolute; left: -9999px; top: 8px; z-index: 2000; background: #fff; color: #000; padding: 10px 16px; border-radius: 6px; }
.of-preskoci:focus { left: 16px; }

.of-hdr-omot {
	--hd-meni-sad: var(--hd-meni);
	--of-boja: var(--hd-meni-sad);
	position: relative;
	z-index: 100;
	width: 100%;
}
.of-hdr-sirina { max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.of-hdr-sirina--puna { max-width: none; padding: 0 clamp(20px, 3vw, 48px); }

.of-hdr { background: var(--hd-bg); transition: background-color .3s ease, box-shadow .3s ease; }
.of-hdr--sjena .of-hdr { box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 6px 20px rgba(0, 0, 0, .04); }
.of-hdr--staklo .of-hdr { -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }

/* Raspored: logo lijevo / desno / sredina */
.of-hdr-unutra {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "logo nav akcije";
	align-items: center;
	column-gap: 32px;
	height: var(--hd-h);
	transition: height .25s ease;
}
.of-hdr--logo-desno .of-hdr-unutra { grid-template-columns: 1fr auto auto; grid-template-areas: "nav akcije logo"; }
.of-hdr--logo-sredina .of-hdr-unutra {
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: ". logo akcije" "nav nav nav";
	height: auto;
	padding-top: 14px;
	padding-bottom: 6px;
	row-gap: 6px;
}
.of-logo { grid-area: logo; display: flex; align-items: center; text-decoration: none !important; line-height: 1; }
.of-nav { grid-area: nav; display: flex; min-width: 0; }
.of-hdr-akcije { grid-area: akcije; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.of-hdr--logo-desno .of-hdr-akcije { justify-content: flex-start; }

.of-hdr--meni-lijevo .of-nav { justify-content: flex-start; }
.of-hdr--meni-sredina .of-nav { justify-content: center; }
.of-hdr--meni-desno .of-nav { justify-content: flex-end; }

/* Logo */
.of-logo-img { height: var(--hd-logo); width: auto; max-width: none; display: block; transition: height .25s ease; }
.of-logo-img--svijetli { display: none; }
.of-logo-tekst { font-family: var(--hd-naziv-font); font-size: var(--hd-naziv-vel); font-weight: 700; color: var(--hd-naziv-boja); white-space: nowrap; letter-spacing: -.01em; }

/* Meni */
.of-meni { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--hd-razmak); }
.of-meni li { position: relative; margin: 0; padding: 0; list-style: none; }
.of-meni > li > a {
	display: block;
	padding: 8px 0;
	font-family: var(--hd-font);
	font-size: var(--hd-vel);
	font-weight: var(--hd-tez);
	color: var(--hd-meni-sad);
	text-decoration: none !important;
	line-height: 1.3;
	position: relative;
	transition: color .2s ease, background-color .2s ease;
}
.of-hdr--velika .of-meni > li > a { text-transform: uppercase; letter-spacing: .06em; font-size: calc(var(--hd-vel) * .9); }
.of-meni > li > a:hover,
.of-meni > li > a:focus-visible { color: var(--hd-hover); }

/* Oznaka aktivne stranice */
.of-hdr--akt-podvuceno .of-meni > li > a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
	background: var(--hd-hover); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.of-hdr--akt-podvuceno .of-meni > li > a:hover::after,
.of-hdr--akt-podvuceno .of-meni > .current-menu-item > a::after,
.of-hdr--akt-podvuceno .of-meni > .current-menu-ancestor > a::after { transform: scaleX(1); }
.of-hdr--akt-boja .of-meni > .current-menu-item > a,
.of-hdr--akt-boja .of-meni > .current-menu-ancestor > a { color: var(--hd-hover); }
.of-hdr--akt-pilula .of-meni > li > a { padding: 8px 16px; border-radius: 999px; }
.of-hdr--akt-pilula .of-meni { column-gap: calc(var(--hd-razmak) / 3); }
.of-hdr--akt-pilula .of-meni > .current-menu-item > a,
.of-hdr--akt-pilula .of-meni > .current-menu-ancestor > a { background: var(--hd-hover); color: #fff; }

/* Podmeniji */
.of-meni > .menu-item-has-children > a { padding-right: 16px; }
.of-meni > .menu-item-has-children > a::before {
	content: ""; position: absolute; right: 2px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.of-hdr--akt-pilula .of-meni > .menu-item-has-children > a { padding-right: 28px; }
.of-hdr--akt-pilula .of-meni > .menu-item-has-children > a::before { right: 12px; }
.of-meni .sub-menu {
	position: absolute; top: 100%; left: -14px; min-width: 220px; z-index: 20;
	list-style: none; margin: 0; padding: 8px; background: #fff; border-radius: 12px;
	box-shadow: 0 12px 32px rgba(30, 30, 20, .14), 0 0 0 1px rgba(0, 0, 0, .04);
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.of-meni li:hover > .sub-menu,
.of-meni li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease, visibility 0s; }
.of-meni .sub-menu a { display: block; padding: 9px 12px; border-radius: 8px; color: #2b2a26; font-family: var(--hd-font); font-size: 14px; font-weight: 500; text-decoration: none !important; text-transform: none; letter-spacing: 0; }
.of-meni .sub-menu a:hover, .of-meni .sub-menu .current-menu-item > a { background: var(--of-zelena-svijetla, #e8f0e1); color: var(--of-zelena, #3f6b35); }
.of-meni .sub-menu .sub-menu { top: -8px; left: 100%; }

.of-hdr-dugme { padding: 10px 22px; font-size: 14px; white-space: nowrap; }

/* Ljepljiv header i smanjivanje */
.of-hdr--ljepljiv { position: sticky; top: 0; }
body.admin-bar .of-hdr--ljepljiv { top: 32px; }
@media (max-width: 782px) { body.admin-bar .of-hdr--ljepljiv { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .of-hdr--ljepljiv { top: 0; } }
.of-hdr--smanji.is-skrolano .of-hdr-unutra { height: calc(var(--hd-h) * .78); }
.of-hdr--smanji.is-skrolano.of-hdr--logo-sredina .of-hdr-unutra { height: auto; padding-top: 8px; }
.of-hdr--smanji.is-skrolano .of-logo-img { height: calc(var(--hd-logo) * .82); }
.of-hdr--ljepljiv.is-skrolano .of-hdr { box-shadow: 0 6px 24px rgba(0, 0, 0, .08); }

/* Providan header preko hero slike */
.of-hdr--transparentna { position: absolute; top: 0; left: 0; right: 0; }
.of-hdr--transparentna:not(.is-skrolano) { --hd-meni-sad: var(--hd-tr); }
.of-hdr--transparentna:not(.is-skrolano) .of-hdr { background: transparent; box-shadow: none; }
.of-hdr--transparentna:not(.is-skrolano) .of-logo-tekst { color: var(--hd-tr); }
.of-hdr--transparentna:not(.is-skrolano) .of-logo:has(.of-logo-img--svijetli) .of-logo-img--obicni { display: none; }
.of-hdr--transparentna:not(.is-skrolano) .of-logo-img--svijetli { display: block; }
.of-hdr--transparentna:not(.is-skrolano) .of-meni > li > a:hover { color: var(--hd-tr); opacity: .8; }
.of-hdr--transparentna.of-hdr--ljepljiv.is-skrolano { position: fixed; animation: ofSpusti .35s ease; }
body.admin-bar .of-hdr--transparentna.is-skrolano { top: 32px; }
.of-hdr--transparentna .of-hdr { background: var(--hd-bg-puna); }
@keyframes ofSpusti { from { transform: translateY(-100%); } to { transform: none; } }
body.of-hdr-providan .of-hero .of-slajd { padding-top: 140px; }

/* Gornja traka */
.of-traka { background: var(--hd-traka-bg); color: var(--hd-traka-boja); font-size: 13px; }
.of-traka .of-hdr-sirina { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; flex-wrap: wrap; }
.of-traka-desno { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.of-traka a { color: inherit !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 6px; }
.of-traka a:hover { opacity: .8; }
.of-traka-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.of-traka-status i, .of-ftr-status i { width: 8px; height: 8px; border-radius: 50%; background: #e57368; display: inline-block; }
.of-traka-status.otvoreno i, .of-ftr-status.otvoreno i { background: #7ed38b; box-shadow: 0 0 0 3px rgba(126, 211, 139, .3); }

/* Hamburger */
.of-burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px; border-radius: 8px; flex-direction: column; justify-content: center; gap: 5px; color: var(--hd-meni-sad); }
.of-burger span { display: block; height: 2px; width: 24px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.mob-otvoren .of-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mob-otvoren .of-burger span:nth-child(2) { opacity: 0; }
.mob-otvoren .of-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobilni režim (klasu .is-mob postavlja tema prema podešenoj širini) */
.of-hdr-omot.is-mob .of-nav,
.of-hdr-omot.is-mob .of-traka,
.of-hdr-omot.is-mob .of-hdr-akcije .of-hdr-dugme { display: none; }
.of-hdr-omot.is-mob .of-burger { display: flex; }
.of-hdr-omot.is-mob .of-hdr-unutra { grid-template-columns: 1fr auto; grid-template-areas: "logo akcije"; height: calc(var(--hd-h) * .85); padding: 0 4px; }
.of-hdr-omot.is-mob.of-hdr--logo-desno .of-hdr-unutra { grid-template-columns: auto 1fr; grid-template-areas: "akcije logo"; }
.of-hdr-omot.is-mob.of-hdr--logo-desno .of-logo { justify-content: flex-end; }
.of-hdr-omot.is-mob.of-hdr--logo-sredina .of-hdr-unutra { grid-template-columns: 44px 1fr 44px; grid-template-areas: ". logo akcije"; padding-top: 0; padding-bottom: 0; }
.of-hdr-omot.is-mob.of-hdr--logo-sredina .of-logo { justify-content: center; }
.of-hdr-omot.is-mob .of-logo-img { height: var(--hd-logo-m); }
.of-hdr-omot.is-mob .of-logo-tekst { font-size: calc(var(--hd-naziv-vel) * .85); }

/* Mobilni meni – panel sa strane */
.of-mob { position: fixed; inset: 0; z-index: 1000; visibility: hidden; pointer-events: none; transition: visibility 0s linear .3s; }
.of-mob-pozadina { position: absolute; inset: 0; background: rgba(15, 18, 10, .5); opacity: 0; transition: opacity .3s ease; }
.of-mob-panel {
	position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: min(86vw, 360px); box-sizing: border-box;
	background: #fff; color: #2b2a26; padding: 72px 28px 32px; overflow-y: auto;
	display: flex; flex-direction: column; gap: 22px;
	transform: translateX(100%); transition: transform .3s cubic-bezier(.3, .7, .2, 1);
	box-shadow: -12px 0 40px rgba(0, 0, 0, .15);
}
.of-hdr--logo-desno .of-mob-panel { right: auto; left: 0; transform: translateX(-100%); }
.mob-otvoren .of-mob { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.mob-otvoren .of-mob-panel { transform: none; }
.mob-otvoren .of-mob-pozadina { opacity: 1; }
.of-mob-zatvori { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; border: 0; background: #f2f1ec; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; color: #2b2a26; }

/* Mobilni meni – padajući */
.of-mob--padajuci .of-mob { position: absolute; top: 100%; bottom: auto; height: auto; }
.of-mob--padajuci .of-mob-pozadina { display: none; }
.of-mob--padajuci .of-mob-panel { position: relative; width: 100%; padding: 12px 24px 24px; transform: translateY(-10px); opacity: 0; transition: transform .25s ease, opacity .25s ease; box-shadow: 0 16px 32px rgba(0, 0, 0, .12); max-height: 75vh; }
.of-mob--padajuci.mob-otvoren .of-mob-panel { transform: none; opacity: 1; }
.of-mob--padajuci .of-mob-zatvori { display: none; }

.of-mob-meni, .of-mob-meni .sub-menu { list-style: none; margin: 0; padding: 0; }
.of-mob-meni li { margin: 0; list-style: none; }
.of-mob-meni a { display: block; padding: 13px 2px; font-family: var(--hd-font); font-size: 18px; font-weight: 600; color: #2b2a26 !important; text-decoration: none !important; border-bottom: 1px solid #eeece6; }
.of-mob-meni .sub-menu { padding-left: 16px; }
.of-mob-meni .sub-menu a { font-size: 15px; font-weight: 500; padding: 10px 2px; }
.of-mob-meni .current-menu-item > a { color: var(--of-zelena, #3f6b35) !important; }
.of-mob-dugme .of-dugme { display: block; text-align: center; --of-boja: #2b2a26; }
.of-mob-tel { display: inline-flex; align-items: center; gap: 8px; color: var(--of-zelena, #3f6b35) !important; font-weight: 700; text-decoration: none !important; }
body.of-mob-zakljucano { overflow: hidden; }

/* ===================== FOOTER ===================== */
.of-ftr { --of-boja: var(--ft-tekst); background: var(--ft-bg); color: var(--ft-tekst); font-size: var(--ft-vel); line-height: 1.65; }
.of-ftr-gornji { padding: 72px 0 56px; }
.of-ftr--mali .of-ftr-gornji { padding: 40px 0 32px; }
.of-ftr--veliki .of-ftr-gornji { padding: 104px 0 80px; }
.of-ftr-kolone { display: grid; grid-template-columns: var(--ft-kolone); gap: 40px 48px; }
.of-ftr-kol { min-width: 0; }
.of-ftr-kol > * { margin-top: 0; margin-bottom: 0; }
.of-ftr-kol > * + * { margin-top: 16px; }
.of-ftr-kol > .of-ftr-naslov + * { margin-top: 0; }
.of-ftr a { color: var(--ft-link); text-decoration: none; transition: color .2s ease; }
.of-ftr a:hover { color: var(--ft-hover); }
.of-ftr-naslov { font-family: var(--ft-font); font-size: var(--ft-vel-n) !important; line-height: 1.3; font-weight: 700; color: var(--ft-naslovi) !important; margin: 0 0 14px !important; padding: 0 !important; }
.of-ftr-tekst { margin: 0; padding: 0; opacity: .92; max-width: 42ch; }
.of-ftr-logo { display: inline-block; }
.of-ftr-logo img { display: block; }
.of-ftr-logo-tekst { font-family: var(--ft-font); font-size: 26px; font-weight: 700; color: var(--ft-naslovi); }
.of-ftr-slika img { display: block; width: 100%; height: auto; border-radius: 10px; }

.of-ftr-lista { list-style: none !important; margin: 0; padding: 0 !important; display: grid; gap: 8px; }
.of-ftr-lista li { list-style: none; margin: 0; padding: 0; }
.of-ftr-meni--horizontalno .of-ftr-lista { display: flex; flex-wrap: wrap; gap: 8px 22px; }

.of-ftr-kontakt { list-style: none !important; margin: 0; padding: 0 !important; display: grid; gap: 10px; }
.of-ftr-kontakt li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 0; }
.of-ftr-kontakt svg { flex: none; margin-top: 4px; opacity: .75; }

.of-ftr-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ft-naslovi); margin-bottom: 10px !important; }
.of-ftr-rv { list-style: none !important; margin: 0; padding: 0 !important; display: grid; gap: 6px; max-width: 280px; }
.of-ftr-rv li { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 0; }
.of-ftr-rv li.danas { color: var(--ft-naslovi); font-weight: 600; }

.of-mreze { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.of-mreze a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: inherit; }
.of-mreze--ikone a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 30%, transparent); }
.of-mreze--ikone a:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.of-mreze--nazivi a { padding: 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); font-size: 14px; }
.of-mreze--samo-ikone { gap: 14px; }

.of-ftr--sredina { text-align: center; }
.of-ftr--sredina .of-ftr-tekst, .of-ftr--sredina .of-ftr-rv { margin-left: auto; margin-right: auto; }
.of-ftr--sredina .of-ftr-lista, .of-ftr--sredina .of-ftr-kontakt { justify-items: center; }
.of-ftr--sredina .of-ftr-meni--horizontalno .of-ftr-lista, .of-ftr--sredina .of-mreze { justify-content: center; }
.of-ftr--sredina .of-ftr-slika img { margin: 0 auto; }

.of-ftr-dno { background: var(--ft-dno-bg); color: var(--ft-dno-boja); font-size: 13px; }
.of-ftr-dno .of-hdr-sirina { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; }
.of-ftr-dno a { color: var(--ft-dno-boja); }
.of-ftr--sredina .of-ftr-dno .of-hdr-sirina { justify-content: center; flex-direction: column; }

.of-gore {
	position: fixed; right: 20px; bottom: 20px; z-index: 900; width: 46px; height: 46px; border: 0; border-radius: 50%;
	background: var(--of-zelena, #3f6b35); color: #fff; cursor: pointer; display: grid; place-items: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18); opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.of-gore.is-vidljiv { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s; }

@media (max-width: 980px) {
	.of-ftr-kolone { grid-template-columns: 1fr 1fr; }
	.of-ftr-kolone--1 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.of-ftr-kolone { grid-template-columns: 1fr; gap: 32px; }
	.of-ftr-gornji { padding: 48px 0 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.of-hdr, .of-hdr-unutra, .of-mob-panel, .of-mob, .of-gore { transition: none !important; animation: none !important; }
}

/* Ikone „Moj račun“ i korpa */
.of-hdr-ikona { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--hd-meni-sad) !important; text-decoration: none !important; transition: background-color .2s ease, color .2s ease; }
.of-hdr-ikona:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: var(--hd-hover) !important; }
.of-hdr--transparentna:not(.is-skrolano) .of-hdr-ikona:hover { color: var(--hd-tr) !important; }
.of-korpa-broj { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: var(--of-zemlja, #7a5230); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.of-korpa-broj[hidden] { display: none; }
.of-hdr-omot.is-mob .of-hdr-akcije { gap: 2px; }
.of-mob-nalog { display: inline-flex; align-items: center; gap: 8px; color: #2b2a26 !important; font-weight: 700; text-decoration: none !important; }

/* ---------- Logo okviri: traka, pečat, potpis ---------- */
.of-logo--pod { flex-direction: column; align-items: center; gap: 6px; }
.of-hdr--logo-lijevo .of-logo--pod, .of-hdr--logo-desno .of-logo--pod { align-items: center; }
.of-logo-pod { font-family: var(--of-font-naslov, Georgia, serif); font-style: italic; font-size: 13px; color: var(--hd-pod); white-space: nowrap; letter-spacing: .02em; line-height: 1.2; }
.of-logo-okvir { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.of-hdr--okvir-traka .of-logo-okvir {
	background: var(--hd-okvir); padding: 7px 26px 8px; margin: 0 10px;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 0 0 4px var(--hd-okvir), inset 0 0 0 5px rgba(255, 220, 160, .45);
}
.of-hdr--okvir-traka .of-logo-okvir::before,
.of-hdr--okvir-traka .of-logo-okvir::after {
	content: ""; position: absolute; top: 9px; bottom: -7px; width: 18px; z-index: -1;
	background: color-mix(in srgb, var(--hd-okvir) 72%, #000);
}
.of-hdr--okvir-traka .of-logo-okvir::before { left: -12px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.of-hdr--okvir-traka .of-logo-okvir::after { right: -12px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.of-hdr--okvir-traka .of-logo-tekst { color: #fff !important; text-transform: uppercase; letter-spacing: .08em; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.of-hdr--okvir-pecat .of-logo-okvir { border: 2px solid var(--hd-okvir); border-radius: 999px; padding: 8px 22px; box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px var(--hd-okvir); }
.of-hdr--drvo .of-meni .sub-menu, .of-hdr--slika .of-meni .sub-menu { background: #2b1b13; box-shadow: 0 12px 32px rgba(0, 0, 0, .4); }
.of-hdr--drvo .of-meni .sub-menu a, .of-hdr--slika .of-meni .sub-menu a { color: #f4eadb; }
.of-hdr--drvo .of-meni .sub-menu a:hover, .of-hdr--slika .of-meni .sub-menu a:hover { background: rgba(255, 255, 255, .08); color: var(--hd-hover); }
.of-hdr--drvo .of-hdr { border-bottom: 3px solid color-mix(in srgb, var(--hd-okvir) 80%, #000); }
.of-hdr-omot.is-mob .of-logo-pod { font-size: 11px; }
.of-hdr-omot.is-mob.of-hdr--okvir-traka .of-logo-okvir { padding: 5px 16px 6px; }
.of-hdr--okvir-traka .of-logo { position: relative; z-index: 0; }

/* ---------- Traka „Kontaktirajte nas“ iznad footera ---------- */
.of-ftr-poziv {
	position: relative; isolation: isolate; display: flex; align-items: center;
	min-height: var(--fp-h, 240px); padding: 34px 0; box-sizing: border-box;
	background: var(--ft-bg) center bottom / cover no-repeat; text-align: center; color: #fff;
}
.of-ftr-poziv--slika { background-size: cover; background-position: center 60%; }
.of-ftr-poziv::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, var(--fp-ov) 0%, var(--fp-ov) 55%, color-mix(in srgb, var(--fp-ov) 100%, #000 25%) 100%);
}
.of-ftr-poziv::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, .12); }
.of-ftr-poziv-unutra { width: 100%; }
.of-ftr-poziv-naslov {
	margin: 0 0 6px; padding: 0; font-family: var(--ft-font); font-size: clamp(26px, 3.4vw, 38px); font-weight: 700;
	color: #fff !important; text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.of-ftr-poziv-tekst { margin: 0 0 18px; padding: 0; font-style: italic; opacity: .92; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.of-ftr-poziv-podaci { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; margin: 0; padding: 0; list-style: none; }
.of-ftr-poziv-podaci li { margin: 0; padding: 0; }
.of-ftr-poziv-podaci li, .of-ftr-poziv-podaci a { display: inline-flex; align-items: center; gap: 8px; color: #fff !important; text-decoration: none; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); font-size: 15px; }
.of-ftr-poziv-podaci svg { flex: 0 0 auto; color: var(--ft-hover); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
.of-ftr-poziv-podaci a:hover { color: var(--ft-hover) !important; }
@media (max-width: 600px) {
	.of-ftr-poziv { padding: 28px 0; }
	.of-ftr-poziv-podaci { flex-direction: column; align-items: center; gap: 10px; }
}

#top-header,#main-header,.et-l--header,#et-top-navigation{display:none!important}#page-container{padding-top:0!important;margin-top:0!important}#main-footer,.et-l--footer,#footer-bottom{display:none!important}
/* of-woo */
/* WooCommerce: račun, korpa, blagajna */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 800px) { .woocommerce-account .woocommerce { grid-template-columns: 1fr; } }
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; }
.woocommerce-MyAccount-navigation ul { list-style: none !important; margin: 0 !important; padding: 8px !important; background: var(--of-krem); border-radius: var(--of-radius); display: flex; flex-direction: column; gap: 2px; }
.woocommerce-MyAccount-navigation li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.woocommerce-MyAccount-navigation a { display: block; padding: 11px 14px; border-radius: 10px; color: var(--of-tekst) !important; font-weight: 600; text-decoration: none; }
.woocommerce-MyAccount-navigation a:hover { background: var(--of-zelena-svijetla); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--of-zelena); color: #fff !important; }
@media (max-width: 800px) {
	.woocommerce-MyAccount-navigation ul { flex-direction: row; overflow-x: auto; }
	.woocommerce-MyAccount-navigation a { white-space: nowrap; }
}
.woocommerce-MyAccount-content { font-family: var(--of-font-tekst); }
.woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { font-family: var(--of-font-naslov); }

.woocommerce table.shop_table { border-radius: var(--of-radius); overflow: hidden; border-color: #e7e2d6 !important; }
.woocommerce table.shop_table th { background: var(--of-krem); }
.woocommerce-orders-table__cell-order-status { font-weight: 700; }

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt {
	background: var(--of-zelena) !important;
	color: #fff !important;
	border-radius: var(--of-dugme-radius, 999px) !important;
	padding: 12px 22px !important;
	font-weight: 700 !important;
	border: 0 !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover { filter: brightness(1.08); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
	border: 1px solid #d8d2c2; border-radius: 10px; padding: 12px 14px; background: #fff;
}
.woocommerce-message, .woocommerce-info { border-top-color: var(--of-zelena) !important; background: var(--of-krem) !important; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--of-zelena) !important; }
.woocommerce span.onsale { background: var(--of-zemlja) !important; }
.woocommerce .price, .woocommerce div.product p.price { color: var(--of-zelena) !important; font-weight: 700; }

/* of-prodavnica */
/* Prodavnica (WooCommerce) */

.of-woo { background: var(--of-krem); padding: 28px 0 72px; }
.of-woo-sirina { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.of-woo--artikal { padding-top: 32px; }

/* ---------- Raspored: artikli + bočna kolona ---------- */
.of-shop--bocna { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 32px; align-items: start; }
.of-shop-glavno { min-width: 0; }
.of-shop-kat { margin-top: 0; }
.of-shop-kat a {
	display: inline-block; padding: 6px 14px; border-radius: 3px; text-decoration: none !important;
	font-family: var(--of-font-naslov); font-size: 15px; color: var(--of-tekst) !important; transition: background .2s, color .2s;
}
.of-shop-kat a:hover { color: var(--of-zelena) !important; }
.of-shop-kat a.is-active { background: var(--of-zelena); color: #fff !important; }

.of-shop-traka { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin: 0 0 20px; }
.of-shop-traka-naslov { flex: 1 1 320px; }
.of-shop-traka-naslov .of-nsl { margin: 0; }
.of-shop-traka-naslov .of-nsl-naslov { font-size: clamp(22px, 2.6vw, 28px); }
.of-shop-traka-desno { display: flex; align-items: center; gap: 14px; }
.of-shop-traka .woocommerce-result-count { margin: 0 !important; float: none !important; font-size: 13px; color: color-mix(in srgb, var(--of-tekst) 60%, transparent); }
.of-shop-traka .woocommerce-ordering { margin: 0 !important; float: none !important; }
.of-shop-traka .woocommerce-ordering select { padding: 7px 30px 7px 10px; border: 1px solid #d9cbb4; border-radius: 4px; background-color: #fffdf9; font: inherit; font-size: 14px; color: var(--of-tekst); }

/* ---------- Kartice artikala ---------- */
.woocommerce ul.products, .woocommerce-page ul.products {
	display: grid !important; grid-template-columns: repeat(var(--of-shop-k, 3), minmax(0, 1fr)); gap: 24px; margin: 0 0 32px !important; padding: 0 !important;
}
.woocommerce ul.products.columns-2 { --of-shop-k: 2; }
.woocommerce ul.products.columns-4 { --of-shop-k: 4; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product {
	display: flex; flex-direction: column; float: none !important; width: auto !important; margin: 0 !important; padding: 0 0 20px !important;
	background: #fff; border-radius: 6px; overflow: hidden; text-align: center;
	box-shadow: 0 2px 4px rgba(43, 27, 19, .06), 0 8px 22px rgba(43, 27, 19, .1); transition: transform .25s, box-shadow .25s;
}
.woocommerce ul.products li.product:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(43, 27, 19, .08), 0 14px 30px rgba(43, 27, 19, .16); }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.woocommerce ul.products li.product a img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 0 14px !important; transition: transform .5s; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0 16px 6px !important; padding: 0 !important; font-family: var(--of-font-naslov); font-size: 17px !important; line-height: 1.3; color: var(--of-tekst);
}
.of-shop-opis { margin: 0 16px 8px; padding: 0; font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--of-tekst) 70%, transparent); }
.woocommerce ul.products li.product .price { display: block; margin: auto 16px 12px !important; font-size: 16px !important; }
.woocommerce ul.products li.product .button {
	align-self: center; margin: 0 16px !important; padding: 9px 22px !important; font-size: 14px !important; border-radius: var(--of-dugme-radius, 4px) !important;
}
.woocommerce ul.products li.product .added_to_cart { display: block; margin-top: 8px; font-size: 13px; color: var(--of-zelena); }
.woocommerce ul.products li.product .onsale { top: 10px !important; left: 10px !important; right: auto !important; margin: 0 !important; min-height: 0; min-width: 0; padding: 3px 10px; line-height: 1.6; border-radius: 3px; font-size: 12px; background: var(--of-zelena) !important; }
.woocommerce nav.woocommerce-pagination ul { border: 0 !important; display: inline-flex; gap: 6px; }
.woocommerce nav.woocommerce-pagination ul li { border: 0 !important; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
	min-width: 38px; padding: 9px 10px !important; border-radius: 4px; background: #fff; color: var(--of-tekst); box-shadow: 0 1px 4px rgba(43, 27, 19, .12);
}
.woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--of-zelena) !important; color: #fff !important; }

/* ---------- Bočna kolona ---------- */
.of-shop-bocna { position: sticky; top: 110px; display: grid; gap: 18px; }
.of-shop-kutija { background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 4px rgba(43, 27, 19, .06), 0 8px 22px rgba(43, 27, 19, .1); }
.of-shop-kutija h3 {
	margin: 0; padding: 12px 18px; font-family: var(--of-font-naslov); font-size: 17px; color: var(--of-tekst);
	background: var(--of-zelena-svijetla, #ead3a6); text-align: center;
}
.of-shop-kutija > *:not(h3) { margin-left: 18px; margin-right: 18px; }
.of-shop-kutija > :last-child { margin-bottom: 16px; }
.of-shop-kutija .widget_shopping_cart_content { padding-top: 12px; }
.of-shop-dostava-tekst { margin-top: 10px; margin-bottom: 16px; font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--of-tekst) 80%, transparent); }
.of-shop-kategorije { margin: 8px 18px 14px !important; padding: 0 !important; list-style: none !important; }
.of-shop-kategorije li { margin: 0; padding: 0; list-style: none; border-bottom: 1px dashed #e4d7c2; }
.of-shop-kategorije li:last-child { border: 0; }
.of-shop-kategorije a { display: flex; justify-content: space-between; padding: 9px 0; color: var(--of-tekst) !important; text-decoration: none !important; font-size: 15px; }
.of-shop-kategorije a:hover { color: var(--of-zelena) !important; }
.of-shop-kategorije span { color: color-mix(in srgb, var(--of-tekst) 50%, transparent); font-size: 13px; }

/* mini korpa (bočna kolona i ladica) */
.widget_shopping_cart_content .woocommerce-mini-cart { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.widget_shopping_cart_content .woocommerce-mini-cart-item {
	position: relative; display: block; min-height: 52px; margin: 0 0 10px !important; padding: 0 22px 10px 62px !important; border-bottom: 1px solid #efe5d5; font-size: 14px; line-height: 1.4;
}
.widget_shopping_cart_content .woocommerce-mini-cart-item img { position: absolute; left: 0; top: 0; width: 50px !important; height: 50px !important; object-fit: cover; border-radius: 4px; margin: 0 !important; float: none !important; }
.widget_shopping_cart_content .woocommerce-mini-cart-item > a:not(.remove) { color: var(--of-tekst) !important; font-weight: 600; text-decoration: none; }
.widget_shopping_cart_content .woocommerce-mini-cart-item .quantity { display: block; color: color-mix(in srgb, var(--of-tekst) 65%, transparent); font-size: 13px; }
.widget_shopping_cart_content a.remove { position: absolute !important; right: 0; top: 0; left: auto !important; color: #a8957c !important; font-size: 18px; text-decoration: none; }
.widget_shopping_cart_content a.remove:hover { background: none !important; color: var(--of-zelena) !important; }
.widget_shopping_cart_content .woocommerce-mini-cart__total { display: flex; justify-content: space-between; margin: 4px 0 12px !important; padding: 10px 0 0 !important; border-top: 2px solid var(--of-tekst); font-size: 16px; }
.widget_shopping_cart_content .woocommerce-mini-cart__total .amount { color: var(--of-zelena); font-weight: 700; }
.widget_shopping_cart_content .woocommerce-mini-cart__buttons { display: grid !important; gap: 8px; margin: 0 !important; }
.widget_shopping_cart_content .woocommerce-mini-cart__buttons .button { display: block; margin: 0 !important; text-align: center; }
.widget_shopping_cart_content .woocommerce-mini-cart__buttons .button:not(.checkout) { background: var(--of-zelena-svijetla, #ead3a6) !important; color: var(--of-tekst) !important; }
.widget_shopping_cart_content .woocommerce-mini-cart__empty-message { margin: 4px 0 4px; font-size: 14px; color: color-mix(in srgb, var(--of-tekst) 75%, transparent); }

/* traka do besplatne dostave */
.of-dostava-traka { margin-top: 14px; }
.of-dostava-traka p { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 0; font-size: 13.5px; color: var(--of-tekst); }
.of-dostava-traka svg { color: var(--of-zelena); flex: 0 0 auto; }
.of-dostava-mjerac { display: block; height: 7px; border-radius: 4px; background: #efe5d5; overflow: hidden; }
.of-dostava-mjerac i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--of-zelena), color-mix(in srgb, var(--of-zelena) 70%, #e8b04a)); transition: width .4s; }
.of-dostava-traka.is-besplatno .of-dostava-mjerac i { background: #5d8a2c; }

@media (max-width: 1000px) {
	.of-shop--bocna { grid-template-columns: 1fr; }
	.of-shop-bocna { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
	.woocommerce ul.products { --of-shop-k: 2 !important; }
}
@media (max-width: 560px) {
	.of-woo-sirina { padding: 0 16px; }
	.woocommerce ul.products { --of-shop-k: 1 !important; gap: 18px; }
	.of-shop-kat { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px 12px; }
	.of-shop-kat a { flex: 0 0 auto; }
	.of-shop-traka-desno .woocommerce-result-count { display: none; }
}

/* ---------- Korpa sa strane (ladica) ---------- */
.of-ladica { position: fixed; inset: 0; z-index: 100000; visibility: hidden; pointer-events: none; }
.of-ladica.is-otvoreno { visibility: visible; pointer-events: auto; }
.of-ladica-pozadina { position: absolute; inset: 0; background: rgba(26, 17, 11, .5); opacity: 0; transition: opacity .3s; }
.of-ladica.is-otvoreno .of-ladica-pozadina { opacity: 1; }
.of-ladica-panel {
	position: absolute; top: 0; right: 0; bottom: 0; box-sizing: border-box; width: min(400px, 92vw); padding: 0 22px 22px; overflow-y: auto;
	background: #fffdf9; box-shadow: -10px 0 40px rgba(0, 0, 0, .25); transform: translateX(100%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); outline: none;
}
.of-ladica.is-otvoreno .of-ladica-panel { transform: none; }
.of-ladica-glava { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin: 0 -22px 6px; padding: 18px 22px; background: #fffdf9; border-bottom: 1px solid #efe5d5; }
.of-ladica-glava strong { font-family: var(--of-font-naslov); font-size: 20px; color: var(--of-tekst); }
.of-ladica-zatvori { appearance: none; border: 0; background: none; font-size: 30px; line-height: 1; color: var(--of-tekst); cursor: pointer; padding: 0 4px; }
.of-ladica .of-dostava-traka { margin: 12px 0 18px; }
body.of-ladica-otvorena { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .of-ladica-panel, .of-ladica-pozadina { transition: none; } }

/* ---------- Stranica artikla ---------- */
.of-woo--artikal .woocommerce-breadcrumb { margin: 0 0 22px !important; font-size: 13px; color: color-mix(in srgb, var(--of-tekst) 60%, transparent) !important; }
.of-woo--artikal .woocommerce-breadcrumb a { color: inherit !important; }
.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.woocommerce div.product > * { grid-column: 1 / -1; }
.woocommerce div.product div.images, .woocommerce div.product div.summary { float: none !important; width: auto !important; margin: 0 !important; grid-column: auto; }
.woocommerce div.product div.images { padding: 6px; background: #fff; border-radius: 4px; box-shadow: 0 6px 22px rgba(43, 27, 19, .16); }
.woocommerce div.product div.images img { border-radius: 2px; }
.woocommerce div.product div.summary { padding: 6px 0 0; }
.woocommerce div.product .product_title { margin: 0 0 10px; padding: 0; font-family: var(--of-font-naslov); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; color: var(--of-tekst); }
.woocommerce div.product p.price { margin: 0 0 18px; font-size: 26px !important; }
.woocommerce div.product .woocommerce-product-details__short-description { margin: 0 0 22px; font-size: 16.5px; line-height: 1.7; color: color-mix(in srgb, var(--of-tekst) 85%, transparent); }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 0 0 22px !important; padding: 18px; background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(43, 27, 19, .08); }
.woocommerce div.product form.cart::before, .woocommerce div.product form.cart::after { display: none; }
.woocommerce div.product form.cart .quantity { float: none !important; margin: 0 !important; }
.woocommerce div.product form.cart .quantity .qty { width: 76px; height: 100%; min-height: 46px; border: 1px solid #d9cbb4; border-radius: 4px; font-size: 16px; text-align: center; }
.woocommerce div.product form.cart .button { float: none !important; flex: 1; min-height: 46px; font-size: 16px !important; }
.woocommerce div.product .product_meta { font-size: 13px; color: color-mix(in srgb, var(--of-tekst) 65%, transparent); }
.woocommerce div.product .product_meta a { color: var(--of-zelena); }
.woocommerce div.product .woocommerce-tabs { margin-top: 18px; }
.woocommerce div.product .woocommerce-tabs ul.tabs { margin: 0 0 -1px !important; padding: 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: #e4d7c2 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent !important; border-color: transparent !important; border-radius: 4px 4px 0 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: #fff !important; border-color: #e4d7c2 !important; border-bottom-color: #fff !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--of-font-naslov); color: var(--of-tekst) !important; }
.woocommerce div.product .woocommerce-tabs .panel { margin: 0 0 30px !important; padding: 24px; background: #fff; border: 1px solid #e4d7c2; border-radius: 0 6px 6px 6px; }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-family: var(--of-font-naslov); font-size: 22px; }
.woocommerce div.product .related.products > h2, .woocommerce div.product .upsells.products > h2 {
	display: flex; align-items: center; gap: 18px; margin: 10px 0 20px; font-family: var(--of-font-naslov); font-size: 26px; color: var(--of-tekst);
}
.woocommerce div.product .related.products > h2::after, .woocommerce div.product .upsells.products > h2::after {
	content: ""; flex: 0 1 220px; height: 7px; opacity: .75;
	background: radial-gradient(circle, currentColor 2.6px, transparent 3.2px) left center / 7px 7px no-repeat, linear-gradient(currentColor, currentColor) right center / calc(100% - 14px) 1px no-repeat;
}
@media (max-width: 860px) { .woocommerce div.product { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Korpa i plaćanje (WooCommerce blokovi i klasični obrasci) ---------- */
.woocommerce-cart .entry-content, .woocommerce-checkout .entry-content { max-width: 1200px; margin: 0 auto; }
.wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button {
	background: var(--of-zelena) !important; color: #fff !important; border-radius: var(--of-dugme-radius, 4px) !important; font-weight: 700 !important;
}
.wc-block-components-button:not(.is-link):hover { filter: brightness(1.08); }
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { padding: 26px; background: #fff; border-radius: 6px; box-shadow: 0 2px 4px rgba(43, 27, 19, .06), 0 8px 22px rgba(43, 27, 19, .1); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value, .wc-block-components-product-price { color: var(--of-zelena); }
.wc-block-components-text-input input:focus, .wc-block-components-select select:focus { box-shadow: 0 0 0 1px var(--of-zelena) !important; border-color: var(--of-zelena) !important; }

/* mobitel: dvije kartice u redu, bez opisa */
@media (max-width: 560px) {
	.woocommerce ul.products { --of-shop-k: 2 !important; gap: 12px; }
	.woocommerce ul.products li.product { padding-bottom: 14px !important; }
	.woocommerce ul.products li.product a img { margin-bottom: 10px !important; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { margin: 0 10px 4px !important; font-size: 15px !important; }
	.of-shop-opis { display: none; }
	.woocommerce ul.products li.product .price { margin: auto 10px 10px !important; font-size: 15px !important; }
	.woocommerce ul.products li.product .button { margin: 0 10px !important; padding: 8px 12px !important; font-size: 13px !important; }
}

/* korpa, plaćanje i moj račun: papirna pozadina oko obrasca */
body.woocommerce-cart #main-content, body.woocommerce-checkout #main-content, body.woocommerce-account #main-content { background: var(--of-krem); padding-bottom: 64px; }
body.woocommerce-cart #main-content .container, body.woocommerce-checkout #main-content .container, body.woocommerce-account #main-content .container { padding-top: 24px; }

/* ---------- Podešavanja izgleda (varijable --sk-*, --s-*, --k-*, --n-*, --c-*, --o-*) ---------- */
body ul.products {
	grid-template-columns: repeat(var(--sk-d, 3), minmax(0, 1fr)) !important;
	column-gap: var(--s-gap, 24px) !important; row-gap: var(--s-rgap, 24px) !important;
}
@media (max-width: 1000px) { body ul.products { grid-template-columns: repeat(var(--sk-t, 2), minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { body ul.products { grid-template-columns: repeat(var(--sk-m, 2), minmax(0, 1fr)) !important; column-gap: min(var(--s-gap, 24px), 14px) !important; } }

/* bočna kolona lijevo */
.of-shop-b--lijevo .of-shop--bocna { grid-template-columns: 290px minmax(0, 1fr); }
.of-shop-b--lijevo .of-shop-bocna { order: -1; }
@media (max-width: 1000px) { .of-shop-b--lijevo .of-shop--bocna { grid-template-columns: 1fr; } .of-shop-b--lijevo .of-shop-bocna { order: 2; } }

/* kartica */
body ul.products li.product { background: var(--k-bg, #fff); border-radius: var(--k-rad, 6px); }
body ul.products li.product a img { aspect-ratio: var(--k-omj, 4/3); }
.of-shop-k--okvir ul.products li.product { box-shadow: none; border: 1px solid #e3d2b5; }
.of-shop-k--cisto ul.products li.product { background: transparent; box-shadow: none; overflow: visible; }
.of-shop-k--cisto ul.products li.product a img { border-radius: var(--k-rad, 6px); }
body:not(.of-shop-podigni) ul.products li.product:hover { transform: none; }
.of-shop-k--cisto ul.products li.product:hover, .of-shop-k--okvir ul.products li.product:hover { box-shadow: 0 10px 26px rgba(43, 27, 19, .14); }
.of-shop-k--cisto ul.products li.product:hover { box-shadow: none; }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { position: relative; overflow: hidden; }
.of-shop-h--zoom ul.products li.product:hover a img:not(.of-shop-druga) { transform: scale(1.05); }
.of-shop-druga { position: absolute; top: 0; left: 0; width: 100%; height: auto; opacity: 0; transition: opacity .4s; pointer-events: none; }
.woocommerce ul.products li.product:hover .of-shop-druga { opacity: 1; }

/* slova */
body ul.products li.product .woocommerce-loop-product__title { font-family: var(--n-font, var(--of-font-naslov)); font-size: var(--n-vel, 17px) !important; color: var(--n-boja, var(--of-tekst)); }
body ul.products li.product .price { font-size: var(--c-vel, 16px) !important; color: var(--c-boja, var(--of-zelena)) !important; }
.of-shop-opis { font-size: var(--o-vel, 14px) !important; }
.of-shop-kat-naziv { display: block; margin: 0 16px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--of-zelena); }
.of-shop-lijevo ul.products li.product { text-align: left; }
.of-shop-lijevo ul.products li.product .button { align-self: flex-start; }

/* dugme */
.woocommerce ul.products li.product .button svg { vertical-align: -3px; margin-right: 2px; }
.of-shop-d--obrub ul.products li.product .button { background: transparent !important; color: var(--of-zelena) !important; box-shadow: inset 0 0 0 2px var(--of-zelena); }
.of-shop-d--obrub ul.products li.product .button:hover { background: var(--of-zelena) !important; color: #fff !important; }
.of-shop-d--link ul.products li.product .button { background: none !important; color: var(--of-zelena) !important; padding: 4px 0 !important; text-decoration: underline; text-underline-offset: 3px; }
.of-shop-d-puna ul.products li.product .button { align-self: stretch; text-align: center; }
@media (hover: hover) and (min-width: 1001px) {
	.of-shop-d-hover ul.products li.product .button { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
	.of-shop-d-hover ul.products li.product:hover .button, .of-shop-d-hover ul.products li.product .button:focus { opacity: 1; transform: none; }
}

/* učitaj još / beskonačno */
.of-shop-u--dugme .woocommerce-pagination, .of-shop-u--beskonacno .woocommerce-pagination { display: none; }
.of-shop-vise { display: flex; justify-content: center; margin: 8px 0 24px; }
.of-shop-vise .of-dugme { min-width: 220px; text-align: center; }
.of-shop-vise.is-ucitava .of-dugme { opacity: .6; pointer-events: none; }
.of-shop-kraj { margin: 8px 0 24px; text-align: center; font-style: italic; color: color-mix(in srgb, var(--of-tekst) 60%, transparent); }

body{--sk-d:3;--sk-t:2;--sk-m:2;--s-gap:24px;--s-rgap:24px;--k-rad:6px;--k-omj:4/3;--k-bg:#ffffff;--n-font:var(--of-font-naslov);--n-vel:17px;--n-boja:#2b1b13;--c-vel:16px;--c-boja:#a31d1d;--o-vel:14px;}