/*
 * Stranica proizvoda — galerija, sažetak, jamstva, related.
 * Odgovara design/Proizvod.dc.html.
 */

/* — Okvir —————————————————————————————————————— */

/*
 * ⚠ Blocksy na `woocommerce_before_main_content` otvara <article> s
 * max-width: 1290px. Naš predložak je unutar njega, pa bijela ploča
 * proizvoda i tamne sekcije nisu išle do ruba ekrana nego su stale na
 * 1290px — izgledalo je kao da je novi dizajn zalijepljen u stari okvir.
 *
 * Hook se ne može izbaciti (na njemu su obavijesti i strukturirani podaci),
 * pa se ograničenje poništava ovdje. Unutarnju širinu i dalje drži
 * .ep-container, kako dizajn traži.
 */
.single-product .ep-pdp-wrap,
.single-product article[class*="post-"] {
	max-width: none;
	width: 100%;
}

.ep-pdp__top {
	background: var(--ep-surface);
	border-bottom: 1px solid var(--ep-hair);
	padding-top: 26px;
}

.ep-pdp__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	padding: 26px 0 44px;
	align-items: start;
}

/* — Galerija ——————————————————————————————————— */

.ep-gallery__main {
	position: relative;
	border: 1px solid var(--ep-hair);
	aspect-ratio: 1 / 0.82;
	overflow: hidden;
}

.ep-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* `contain`, ne `cover`: blister i kutija se ne smiju rezati. */
}

/* Woo-ova oznaka „Akcija" — u dizajnu je kvadratni badge gore lijevo. */
.ep-pdp .onsale {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	margin: 0;
	padding: 8px 13px;
	background: var(--ep-brand);
	color: #fff;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-radius: 0;
}

.ep-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.ep-gallery__thumb {
	display: block;
	aspect-ratio: 1;
	border: 1px solid var(--ep-hair);
	background: var(--ep-surface);
	transition: border-color var(--ep-ease);
}

.ep-gallery__thumb.is-active,
.ep-gallery__thumb:hover {
	border-color: var(--ep-brand);
}

.ep-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ep-gallery__single {
	margin: 10px 0 0;
	font-size: 11.5px;
	letter-spacing: 0.06em;
}

/* — Blocksyjevi duplikati u sažetku ————————— */

/*
 * ⚠ Blocksy u sažetak proizvoda ubacuje SVOJE verzije ocjene, kratkog opisa
 * i meta podataka, uz naše. Rezultat su bile dvije ocjene (naranNULLaste i
 * ljubičaste zvjezdice jedna ispod druge), dva ista odlomka opisa i SKU
 * dvaput — jednom u statusnom retku, jednom pri dnu.
 *
 * remove_action ih ne hvata: Blocksy ih kači anonimnim funkcijama i kasnije
 * nego što child tema može doći (isti razlog kao kod galerije). Zato se
 * skrivaju — naši ekvivalenti ostaju.
 */
.ep-pdp__summary .woocommerce-product-rating,
.ep-pdp__summary .woocommerce-product-details__short-description,
.ep-pdp__summary .ct-product-divider,
.ep-pdp__summary .product_meta {
	display: none;
}

/*
 * ⚠ Blocksy/Woo daju `.entry-summary` širinu 50% — nasljedstvo float
 * rasporeda iz Woo-ovih početaka. U našoj grid ćeliji to je značilo da je
 * sažetak stisnut na pola stupca (296px od 593px): opis se slijevao u usku
 * traku, a akordeon s cijelim opisom proizvoda bio je nечitljiv.
 *
 * Grid već određuje širinu, pa se postotak poništava.
 */
.ep-pdp .ep-pdp__summary {
	width: auto;
	max-width: none;
	float: none;
	padding: 0;
}

/*
 * Blocksy oboji gumb svojom paletnom plavom (#2872FA) preko
 * `.ct-product-add-to-cart` omota. Naš selektor je jednake težine i gubi
 * jer se njegov CSS učitava kasnije — zato !important, samo na ove dvije
 * deklaracije.
 */
.ep-pdp .ct-product-add-to-cart {
	width: 100%;
}

.ep-pdp form.cart .single_add_to_cart_button {
	background: var(--ep-brand) !important;
	color: #fff !important;
}

.ep-pdp form.cart .single_add_to_cart_button:hover {
	background: var(--ep-brand-dark) !important;
}

/* — Sažetak ———————————————————————————————————— */

.ep-pdp__status {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.ep-stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ep-success);
}

.ep-stock--out {
	color: var(--ep-muted);
}

.ep-stock__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.ep-pdp__meta {
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ep-muted-purple);
}

.ep-pdp .product_title {
	margin-top: 14px;
	font-size: var(--ep-h1-page);
}

.ep-pdp__rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}

.ep-pdp__rating .ep-stars {
	font-size: 13px;
	letter-spacing: 3px;
}

.ep-pdp__reviews-link {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ep-muted);
}

.ep-pdp__excerpt {
	margin-top: 20px;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ep-ink-70);
}

.ep-pdp__excerpt p:last-child {
	margin-bottom: 0;
}

/* — Cijena —————————————————————————————————————— */

.ep-pdp__price-block {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	margin-top: 28px;
	padding: 22px 0;
	border-top: 1px solid var(--ep-hair);
	border-bottom: 1px solid var(--ep-hair);
}

.ep-pdp__price {
	margin: 6px 0 0;
	font-size: var(--ep-single-price);
	line-height: 0.9;
	color: var(--ep-ink);
}

/* Popust je cart-level — precrtane cijene na proizvodu nema. Ako se ikad
   uvede product-level sale, `del` dobiva vlastiti, manji red. */
.ep-pdp__price del {
	font-size: 0.5em;
	color: var(--ep-muted);
}

.ep-pdp__price ins {
	text-decoration: none;
}

.ep-pdp__price-note {
	margin: 0 0 8px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ep-muted);
	max-width: 18ch;
}

/* — Kupnja ————————————————————————————————————— */

.ep-pdp form.cart {
	display: flex;
	gap: 10px;
	margin-top: 22px;
	flex-wrap: wrap;
}

.ep-pdp form.cart .ep-qty__btn {
	width: 48px;
	height: 56px;
	font-size: 20px;
}

.ep-pdp form.cart .ep-qty__input {
	width: 46px;
	font-size: 24px;
}

/*
 * Gumb ostaje Woo-ov `.single_add_to_cart_button` — na njemu visi GA4
 * `add_to_cart`. Ovdje se samo oblači.
 */
.ep-pdp .single_add_to_cart_button {
	flex: 1;
	min-width: 220px;
	min-height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 0 24px;
	border: none;
	border-radius: var(--ep-radius-control);
	background: var(--ep-brand);
	color: #fff;
	font-family: var(--ep-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--ep-ease);
}

.ep-pdp .single_add_to_cart_button:hover {
	background: var(--ep-brand-dark);
}

.ep-pdp .single_add_to_cart_button:disabled {
	background: var(--ep-muted);
	cursor: not-allowed;
}

/* Chip-selector varijacija — jedini variable proizvod je JoyDivision WARMup. */
.ep-pdp .variations {
	width: 100%;
	margin: 0 0 4px;
	border: none;
}

.ep-pdp .variations th,
.ep-pdp .variations td {
	padding: 0 0 10px;
	text-align: left;
	border: none;
}

.ep-pdp .variations label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ep-muted);
}

.ep-pdp .variations select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ep-brand-line);
	border-radius: var(--ep-radius-control);
	background: var(--ep-surface);
	font-family: var(--ep-font-body);
	font-size: 14px;
}

.ep-pdp .woocommerce-variation-price .price {
	font-family: var(--ep-font-display);
	font-size: 28px;
	color: var(--ep-ink);
}

/*
 * Blocksy omata stepper i gumb u `.ct-cart-actions` i nameće im svoje
 * dimenzije — stepper je ispao 70×40px umjesto 142×56, a gumb se prelomio u
 * novi red. Selektor s omotom je specifičniji od našeg, pa pobjeđuje.
 */
.ep-pdp .ct-cart-actions {
	display: flex;
	align-items: stretch;
	gap: 10px;
	width: 100%;
}

.ep-pdp .ct-cart-actions .ep-qty {
	/* Blocksy postavlja .quantity na display:block i širinu 70px — tipke su
	   zbog toga padale jedna ispod druge. */
	display: flex;
	align-items: center;
	height: 56px;
	width: auto;
	max-width: none;
	flex: none;
}

.ep-pdp .ct-cart-actions .ep-qty__btn {
	width: 48px;
	height: 56px;
	font-size: 20px;
}

.ep-pdp .ct-cart-actions .ep-qty__input {
	width: 46px;
	font-size: 24px;
}

.ep-pdp .ct-cart-actions .single_add_to_cart_button {
	flex: 1;
	margin: 0;
}

/* — Jamstva ———————————————————————————————————— */

.ep-assurances {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.ep-assurances li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ep-ink);
}

/* — Druge doze ————————————————————————————————— */

.ep-doses {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 18px;
}

.ep-doses__list {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ep-doses__list a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 14px;
	border: 1px solid var(--ep-brand-line);
	border-radius: var(--ep-radius-control);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ep-brand-dark);
}

.ep-doses__list a:hover {
	background: var(--ep-brand-tint-2);
	border-color: var(--ep-brand);
}

/* — Akordeon na proizvodu —————————————————————— */

.ep-pdp .ep-accordion {
	margin-top: 24px;
}

.ep-tab-shipping {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.ep-tab-shipping li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid var(--ep-hair-soft);
	font-size: 13.5px;
}

.ep-tab-shipping .ep-num {
	font-size: 18px;
	color: var(--ep-ink);
}

/* — Preporuka doktora ——————————————————————————— */

/*
 * Snippet "Dodaj preporuku doktora" (Code Snippets #5) visi na
 * woocommerce_after_single_product_summary, prioritet 20, i ispisuje:
 *
 *   <div class="entry-content is-layout-constrained" style="margin…">
 *     <p style="color: green;">Preporučeno od strane <a …>Dr. Alex …</a>!</p>
 *   </div>
 *
 * Selektor je provjeren na stagingu (ranije je bio pretpostavka). Boja je u
 * inline stilu, pa je !important jedini način da se zelena zamijeni — sam
 * snippet se ne dira, da ga klijent može mijenjati bez nas.
 */
.ep-pdp > .entry-content {
	max-width: var(--ep-container);
	margin: 0 auto !important;
	padding: 16px var(--ep-gutter);
	background: var(--ep-surface);
	border-left: 3px solid var(--ep-brand);
}

.ep-pdp > .entry-content p {
	margin: 0;
	color: var(--ep-ink-70) !important;
	font-size: 14px;
	line-height: 1.6;
}

.ep-pdp > .entry-content a {
	color: var(--ep-brand);
	font-weight: 600;
}

/* — Related ———————————————————————————————————— */

.ep-related {
	padding: 60px 0 90px;
}

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

.ep-related__grid {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: none;
}

.ep-mini-card {
	display: flex;
	flex-direction: column;
}

.ep-mini-card__media {
	display: block;
	aspect-ratio: 1 / 0.72;
	border-bottom: 1px solid var(--ep-hair);
	overflow: hidden;
}

.ep-mini-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ep-mini-card__body {
	padding: 16px 18px 18px;
}

.ep-mini-card__title {
	display: block;
	margin-top: 8px;
	font-family: var(--ep-font-display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.1; /* kvačice — vidi --ep-display-lh u tokens.css */
	text-transform: uppercase;
	color: var(--ep-ink);
}

.ep-mini-card__title:hover {
	color: var(--ep-brand);
}

.ep-mini-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
}

.ep-mini-card__price {
	font-size: 26px;
	color: var(--ep-ink);
	white-space: nowrap;
}

.ep-mini-card .add_to_cart_button,
.ep-mini-card .button {
	padding: 10px 15px;
	border: none;
	border-radius: var(--ep-radius-control);
	background: var(--ep-brand);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
}

.ep-mini-card .add_to_cart_button:hover,
.ep-mini-card .button:hover {
	background: var(--ep-brand-dark);
}

.ep-mini-card .added_to_cart {
	display: none;
}

/* — Recenzije ——————————————————————————— */

/*
 * Recenzije renderira Woo (uz CusRev), pa je markup njihov: ol.commentlist s
 * avatarima, zvjezdicama kroz ::before i meta retkom. Ovdje se to prevodi u
 * jezik dizajna — hairline kartice, ljubičaste zvjezdice, ime u verzalu.
 */
.ep-pdp-reviews {
	padding: 0 0 60px;
}

.ep-pdp-reviews .woocommerce-Reviews-title {
	font-size: var(--ep-h2-panel);
	color: var(--ep-ink);
}

.ep-pdp-reviews .commentlist {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	background: var(--ep-hair);
	outline: 1px solid var(--ep-hair);
}

.ep-pdp-reviews .commentlist li {
	margin: 0;
	padding: 22px 24px;
	background: var(--ep-surface);
}

/* Avatar dizajn ne predviđa — kupci nemaju profilne slike, pa je to sivi krug. */
.ep-pdp-reviews .commentlist img.avatar {
	display: none;
}

.ep-pdp-reviews .comment_container,
.ep-pdp-reviews .comment-text {
	display: block;
	border: none;
	padding: 0;
	margin: 0;
}

/* Woo crta zvjezdice ::before elementom u vlastitom fontu; boja je naša. */
.ep-pdp-reviews .star-rating {
	color: var(--ep-brand);
	font-size: 12px;
	margin-bottom: 12px;
}

.ep-pdp-reviews .comment-text .description p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ep-ink);
}

.ep-pdp-reviews .comment-text .meta {
	margin: 0 0 10px;
	font-size: 11px;
	color: var(--ep-muted-purple);
}

.ep-pdp-reviews .woocommerce-review__author {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ep-ink);
}

.ep-pdp-reviews .woocommerce-review__dash {
	display: none;
}

.ep-pdp-reviews .woocommerce-review__published-date {
	font-size: 11px;
	color: var(--ep-muted-purple);
}

/* Forma za recenziju */
.ep-pdp-reviews #review_form_wrapper {
	margin-top: 30px;
	background: var(--ep-surface);
	border: 1px solid var(--ep-hair);
	padding: 24px 26px 26px;
}

.ep-pdp-reviews .comment-reply-title {
	display: block;
	font-family: var(--ep-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ep-ink);
}

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

.ep-pdp-reviews .comment-form input[type="text"],
.ep-pdp-reviews .comment-form input[type="email"],
.ep-pdp-reviews .comment-form textarea {
	width: 100%;
	padding: 14px;
	border: 1px solid var(--ep-hair);
	border-radius: var(--ep-radius-control);
	background: #FBFAF8;
	font-family: var(--ep-font-body);
	font-size: 14.5px;
}

.ep-pdp-reviews .comment-form .submit {
	min-height: var(--ep-tap);
	padding: 0 22px;
	border: none;
	border-radius: var(--ep-radius-control);
	background: var(--ep-brand);
	color: #fff;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
}

.ep-pdp-reviews .comment-form .submit:hover {
	background: var(--ep-brand-dark);
}

@media (max-width: 767px) {
	.ep-pdp-reviews .commentlist {
		grid-template-columns: 1fr;
	}
}

/* — Responsive ————————————————————————————————— */

@media (max-width: 1023px) {
	.ep-pdp__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.ep-related {
		padding: 40px 0 60px;
	}
}

@media (max-width: 767px) {
	.ep-pdp__top {
		padding-top: 16px;
	}

	.ep-pdp__grid {
		padding: 16px 0 32px;
	}

	.ep-pdp__price-block {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.ep-pdp form.cart .single_add_to_cart_button {
		flex: 1 1 100%;
	}

	.ep-mini-card__title {
		font-size: 17px;
	}

	.ep-mini-card__price {
		font-size: 20px;
	}
}