/* Organska Farma – komponente. Boje i fontove korisnik mijenja u dashboardu (Organska farma → Izgled) */
: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; }