/*
 * Baza — tipografija, kontrole, hairline mreža, utilities.
 *
 * Sve što se ponavlja na više od jednog predloška živi ovdje.
 * Ništa specifično za pojedinu stranicu.
 */

/* — Osnove ————————————————————————————————————— */

body {
	background: var(--ep-paper);
	color: var(--ep-ink-70);
	font-family: var(--ep-font-body);
	font-size: 15.5px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--ep-selection);
	color: var(--ep-ink);
}

a {
	color: var(--ep-brand);
	text-decoration: none;
	transition: color var(--ep-ease);
}

a:hover {
	color: var(--ep-brand-hover);
}

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

/* — Tipografija ———————————————————————————————— */

h1,
h2,
h3,
.ep-display {
	font-family: var(--ep-font-display);
	font-weight: 700;
	text-transform: uppercase;
	line-height: var(--ep-display-lh);
	letter-spacing: var(--ep-display-ls);
	color: var(--ep-ink);
	margin: 0;
}

h1 {
	font-size: var(--ep-h1-page);
}

h2 {
	font-size: var(--ep-h2-section);
}

h3 {
	font-size: var(--ep-h2-panel);
}

/* Brojevi (cijene, statistike, telefon) idu u display fontu — to ih odvaja
   od body copyja bez ijedne dodatne linije ili boje. */
.ep-num {
	font-family: var(--ep-font-display);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
}

/* Eyebrow / meta label. Uvijek uppercase, uvijek razmaknut. */
.ep-micro {
	font-size: var(--ep-micro-size);
	font-weight: 600;
	letter-spacing: var(--ep-micro-ls);
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--ep-muted-purple);
}

.ep-micro--ink {
	color: var(--ep-ink);
}

.ep-micro--brand {
	color: var(--ep-brand);
}

.ep-micro--on-dark {
	color: var(--ep-brand-line);
}

/* Eyebrow na tamnoj ploči — jače od --on-dark, nosi akcent sekcije. */
.ep-micro--accent {
	color: var(--ep-on-dark-accent);
}

/* Eyebrow s vodećom linijom (hero, naslovi sekcija). */
.ep-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ep-eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: var(--ep-brand);
	flex: none;
}

/* — Layout ————————————————————————————————————— */

.ep-container {
	max-width: var(--ep-container);
	margin: 0 auto;
	padding-inline: var(--ep-gutter);
}

.ep-section {
	padding-block: var(--ep-section-y);
}

/*
 * Hairline mreža — potpis dizajna.
 *
 * Linije su PROCIJEPI pozadine, ne borderi ćelija: roditelj ima gap 1px i
 * boju linije kao background, djeca imaju bijeli background. Time nema
 * dvostrukih linija na spojevima ni visećih rubova na kraju reda —
 * problem koji border-collapse pristup uvijek ima kad se broj stupaca
 * mijenja po breakpointu.
 *
 * Roditelju treba i 1px outline ako se traži linija po vanjskom rubu.
 */
.ep-grid {
	display: grid;
	gap: 1px;
	background: var(--ep-hair);
}

.ep-grid > * {
	background: var(--ep-surface);
}

.ep-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ep-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ep-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ep-grid--5 { grid-template-columns: repeat(5, 1fr); }

.ep-grid--bordered {
	outline: 1px solid var(--ep-hair);
	outline-offset: 0;
}

@media (max-width: 1199px) {
	.ep-grid--5 { grid-template-columns: repeat(3, 1fr); }
	.ep-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.ep-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.ep-grid--5,
	.ep-grid--4,
	.ep-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.ep-grid--2 { grid-template-columns: 1fr; }
}

/* Tamna ploča — drugi način građenja dubine, uz hairline. */
.ep-panel-dark {
	background: var(--ep-brand-dark);
	color: var(--ep-on-dark);
}

.ep-panel-dark h1,
.ep-panel-dark h2,
.ep-panel-dark h3 {
	color: #fff;
}

.ep-panel-dark a {
	color: var(--ep-on-dark-strong);
}

.ep-panel-dark a:hover {
	color: #fff;
}

/* — Gumbi —————————————————————————————————————— */

.ep-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--ep-tap);
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: var(--ep-radius-control);
	background: var(--ep-brand);
	color: #fff;
	font-family: var(--ep-font-body);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--ep-ease), color var(--ep-ease), border-color var(--ep-ease);
}

.ep-btn:hover {
	background: var(--ep-brand-dark);
	color: #fff;
}

.ep-btn--outline {
	background: transparent;
	color: var(--ep-ink);
	border-color: var(--ep-ink);
}

.ep-btn--outline:hover {
	background: var(--ep-ink);
	color: #fff;
}

/* CTA na tamnoj ploči — #3A1076 na #1E0842 nema kontrast, zato --brand-alt. */
.ep-btn--on-dark {
	background: var(--ep-brand-alt);
	color: #fff;
}

.ep-btn--on-dark:hover {
	background: var(--ep-brand-alt-hover);
}

.ep-btn--block {
	width: 100%;
}

.ep-btn--lg {
	min-height: 56px;
	font-size: 11.5px;
}

/*
 * Spojeni par gumba (hero): lijevi gubi desni radius, desni lijevi.
 * `white-space: nowrap` na .ep-btn je ovdje presudan — prelomljena
 * druga linija razbila bi zajedničku visinu para.
 */
.ep-btn-pair {
	display: inline-flex;
}

.ep-btn-pair > .ep-btn:first-child {
	border-radius: var(--ep-radius-control) 0 0 var(--ep-radius-control);
}

.ep-btn-pair > .ep-btn:last-child {
	border-radius: 0 var(--ep-radius-control) var(--ep-radius-control) 0;
	margin-left: -1px;
}

/* — Forme —————————————————————————————————————— */

.ep-field label,
.ep-label {
	display: block;
	margin-bottom: 7px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ep-muted);
}

.ep-input,
.ep-field input[type="text"],
.ep-field input[type="email"],
.ep-field input[type="tel"],
.ep-field input[type="number"],
.ep-field select,
.ep-field textarea {
	width: 100%;
	padding: 14px;
	border: 1px solid var(--ep-hair);
	border-radius: var(--ep-radius-control);
	background: var(--ep-field-bg);
	color: var(--ep-ink);
	font-family: var(--ep-font-body);
	font-size: 14.5px;
	line-height: 1.4;
	transition: border-color var(--ep-ease), background var(--ep-ease);
}

.ep-input:focus,
.ep-field input:focus,
.ep-field select:focus,
.ep-field textarea:focus {
	border-color: var(--ep-brand);
	background: #fff;
	outline: none;
}

/*
 * Vidljiv fokus za tipkovnicu.
 *
 * Prototip ga nema — u produkciji je obavezan, i to na SVEMU što prima
 * fokus, ne samo na inputima. Blagajna se mora dati proći tabom.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--ep-brand);
	outline-offset: 2px;
	border-radius: 1px;
}

.ep-panel-dark :where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline-color: var(--ep-on-dark-accent);
}

/* — Stepper količine ——————————————————————————— */

/*
 * Dijele ga stranica proizvoda (48×56) i košarica (38×42) — razlika je samo
 * u dimenzijama, koje postavlja odgovarajući modul. Ovdje je zajednički oblik.
 */
.ep-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ep-brand-line);
	border-radius: var(--ep-radius-control);
	width: fit-content;
}

.ep-qty__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: var(--ep-tap);
	padding: 0;
	border: none;
	background: none;
	color: var(--ep-brand);
	font-family: var(--ep-font-body);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--ep-ease);
}

.ep-qty__btn:hover {
	background: var(--ep-brand-tint-2);
}

/*
 * Bez JS-a stepper ne bi radio ništa, pa se tipke ne prikazuju i ostaje čist
 * brojčani input. Klasu `ep-js` na <html> postavlja assets/js/site.js.
 */
html:not(.ep-js) .ep-qty__btn {
	display: none;
}

.ep-qty__input,
.ep-qty__value {
	width: 46px;
	min-width: 0;
	padding: 0;
	border: none;
	background: none;
	text-align: center;
	font-family: var(--ep-font-display);
	font-weight: 700;
	font-size: 21px;
	color: var(--ep-ink);
	appearance: textfield;
	-moz-appearance: textfield;
}

.ep-qty__input::-webkit-outer-spin-button,
.ep-qty__input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.ep-qty__input:focus {
	outline: none;
	background: var(--ep-brand-tint-2);
}

.ep-qty--readonly {
	border-color: var(--ep-hair);
	padding: 0 6px;
}

/* — „✓" retci ——————————————————————————————————— */

.ep-tick {
	color: var(--ep-brand);
	flex: none;
}

/* — Naslov sekcije s linkom desno —————————————— */

.ep-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--ep-brand-dark);
}

.ep-link-arrow {
	padding-bottom: 4px;
	border-bottom: 2px solid var(--ep-brand);
	color: var(--ep-brand-dark);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* — Akordeon ———————————————————————————————————— */

/* Isti markup i ista skripta kao FAQ; razlikuje se samo veličina naslova. */
.ep-accordion {
	border-top: 1px solid var(--ep-hair);
}

.ep-accordion__item {
	border-bottom: 1px solid var(--ep-hair);
}

.ep-accordion__heading {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	text-transform: none;
	line-height: inherit;
}

.ep-accordion__trigger {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 17px 0;
	border: none;
	background: none;
	text-align: left;
	cursor: pointer;
	color: var(--ep-ink);
}

.ep-accordion__title {
	flex: 1;
	font-family: var(--ep-font-body);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/*
 * Ikona +/− je CSS, ne znak u markupu — inače bi je čitač ekrana pročitao
 * kao dio naslova. Stanje nosi aria-expanded.
 */
.ep-accordion__icon {
	position: relative;
	width: 15px;
	height: 15px;
	flex: none;
}

.ep-accordion__icon::before,
.ep-accordion__icon::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1.5px;
	background: var(--ep-brand);
	transform: translateY(-50%);
	transition: opacity var(--ep-ease), transform var(--ep-ease);
}

.ep-accordion__icon::after {
	transform: translateY(-50%) rotate(90deg);
}

.ep-accordion__trigger[aria-expanded="true"] .ep-accordion__icon::after {
	opacity: 0;
	transform: translateY(-50%) rotate(0deg);
}

.ep-accordion__body {
	padding: 0 0 20px;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--ep-ink-70);
}

.ep-accordion__body > :first-child {
	margin-top: 0;
}

.ep-accordion__body > :last-child {
	margin-bottom: 0;
}

/* — Placeholder slike —————————————————————————— */

/*
 * Šrafirani blok s labelom — stoji dok ne stignu prave fotografije.
 * Zadržan namjerno kao komponenta: uploads je 23,75 MB na 157 fajlova
 * (~150 KB po slici), pa dio proizvoda ionako neće imati sliku dovoljne
 * rezolucije za velike grid blokove.
 */
.ep-ph {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(135deg, var(--ep-ph-a) 0 6px, var(--ep-ph-b) 6px 12px);
}

.ep-ph__label {
	padding: 7px 12px;
	background: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ep-muted-purple);
}

/* — Tipografski simboli ————————————————————————— */

/*
 * Dizajn koristi znakove umjesto ikon-fonta: → ↵ ✓ ✕ ★ ☆ ✦
 *
 * ⚠ Nijedan od njih nije u `latin` ni `latin-ext` subsetu Antonija ni Space
 * Groteska (provjereno nad samim woff2 fajlovima). Browser ih uzima iz
 * sistemskog fonta — što je prihvatljivo, ali dio Androida i Windowsa ih bez
 * ove deklaracije prikaže kao EMOJI U BOJI, a to razbija monokromatski izgled.
 *
 * `font-variant-emoji: text` traži tekstualnu prezentaciju. Preglednici koji ga
 * ne podržavaju ionako već crtaju tekstualnu varijantu, pa je pravilo čista
 * dobit. Vidi assets/fonts/README.md za popis znakova i alternative.
 */
.ep-stars,
.ep-tick,
.ep-link-arrow,
.ep-btn,
.ep-contact__arrow {
	font-variant-emoji: text;
}

/* — Zvjezdice —————————————————————————————————— */

.ep-stars {
	display: inline-flex;
	align-items: center;
	gap: 1.5px;
	color: var(--ep-brand);
	font-size: 12.5px;
	line-height: 1;
}

.ep-rating {
	display: flex;
	align-items: center;
	gap: 7px;
}

.ep-rating__value {
	font-size: 12px;
	font-weight: 600;
	color: var(--ep-ink);
}

.ep-rating__count {
	font-size: 11.5px;
	color: var(--ep-muted-purple);
}

/*
 * Stanje "još nema recenzija".
 *
 * Dio proizvoda ima average_rating 0 uz postojeće recenzije drugdje na sajtu.
 * Nikad ne prikazujemo 0 zvjezdica ni "0,0" — to čita kao loša ocjena,
 * ne kao odsutnost ocjene.
 */
.ep-rating--empty {
	font-size: 11.5px;
	color: var(--ep-muted-purple);
}

/* — Blocksyjev hero ———————————————————————————— */

/*
 * ⚠ Blocksy iznad sadržaja crta `.hero-section` — veliku fotografiju s
 * naslovom stranice. Dizajn ga ne predviđa: naši predlošci naslov crtaju sami.
 *
 * Gasi se SAMO ondje gdje postoji zamjena. Prvo je bilo napisano šire
 * (`.page .hero-section`), pa su Uvjeti poslovanja, Politika privatnosti i
 * Moj račun ostali bez ijednog vidljivog naslova — ondje je Blocksyjev hero
 * jedini naslov koji stranica ima. Zato ciljani popis, ne `.page`.
 *
 * Woo stranice (košarica, blagajna) imaju vlastito zaglavlje u predlošku.
 *
 * „Moj račun" NIJE na popisu: dizajn tu stranicu ne pokriva, pa je Blocksyjev
 * hero ondje jedini naslov.
 */
.page-template-page-home .hero-section,
.page-template-page-about .hero-section,
.page-template-page-faq .hero-section,
.page-template-page-contact .hero-section,
.woocommerce-cart .hero-section,
.woocommerce-checkout .hero-section,
.post-type-archive-product .hero-section,
.tax-product_cat .hero-section,
.tax-product_tag .hero-section,
.single-product .hero-section,
.search-results .hero-section {
	display: none;
}

/* — Utilities —————————————————————————————————— */

.ep-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ep-success {
	color: var(--ep-success);
}

.ep-panel-dark .ep-success {
	color: var(--ep-success-on-dark);
}

.ep-hair-t { border-top: 1px solid var(--ep-hair); }
.ep-hair-b { border-bottom: 1px solid var(--ep-hair); }

/* Preskoči na sadržaj — prvi tabbable element na stranici. */
.ep-skip {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--ep-brand);
	color: #fff;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ep-skip:focus {
	left: 12px;
	top: 12px;
	color: #fff;
}