/*
 * Marra – WooCommerce stilovi.
 * Mreža se mijenja samo unutar stranica trgovine (.marra-shop), da se ne sudara
 * s Elementor widgetom Products; kartica proizvoda vrijedi svugdje.
 */

/* ------------------------------------------------------------------ */
/* Omotač stranica trgovine                                           */
/* ------------------------------------------------------------------ */

.marra-shop {
	padding-block: var(--marra-space-lg) var(--marra-space-xl);
}

/* Hello Elementor ograničava .site-main na 500–1140 px; širinu određuje .marra-container */
body:not(.marra-x) main.marra-shop.site-main {
	margin-inline: 0;
	max-width: none;
	padding-inline: 0;
	width: 100%;
}

/* ------------------------------------------------------------------ */
/* Gumbi – nadjačavanje zadanih WooCommerce stilova                   */
/* ------------------------------------------------------------------ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce button.button.alt.disabled,
.woocommerce-page a.button,
.woocommerce-page button.button {
	background-color: var(--marra-black);
	border: 1px solid var(--marra-black);
	border-radius: var(--marra-radius);
	color: var(--marra-cream);
	font-family: var(--marra-font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: var(--marra-tracking-button);
	line-height: 1.2;
	padding: 16px 32px;
	text-transform: uppercase;
	transition: background-color var(--marra-transition), border-color var(--marra-transition), color var(--marra-transition);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover {
	background-color: var(--marra-caramel);
	border-color: var(--marra-caramel);
	color: var(--marra-cream);
}

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button.alt.disabled {
	opacity: 0.45;
	padding: 16px 32px;
}

.marra-shop .woocommerce-products-header__title,
.marra-shop .product_title {
	text-transform: uppercase;
}

.marra-shop .woocommerce-products-header {
	margin-bottom: var(--marra-space-md);
	text-align: center;
}

.marra-shop .term-description {
	color: var(--marra-muted);
	margin-inline: auto;
	max-width: 680px;
}

/* Breadcrumbs */
.marra-breadcrumb {
	color: var(--marra-muted);
	font-size: 11px;
	letter-spacing: 0.16em;
	line-height: 1.6;
	margin-bottom: 28px;
	text-transform: uppercase;
}

.marra-breadcrumb a {
	color: var(--marra-muted);
	text-decoration: none;
}

.marra-breadcrumb a:hover {
	color: var(--marra-black);
}

.marra-breadcrumb__sep {
	color: var(--marra-caramel);
	margin-inline: 0.6em;
}

/* Broj rezultata i sortiranje */
.marra-shop .woocommerce-result-count {
	color: var(--marra-muted);
	font-size: 13px;
	margin: 0;
}

.marra-shop .woocommerce-ordering select {
	min-width: 220px;
	width: auto;
}

/* ------------------------------------------------------------------ */
/* Mreža proizvoda                                                    */
/* ------------------------------------------------------------------ */

.marra-shop ul.products {
	display: grid;
	gap: 40px 24px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: var(--marra-space-md) 0 0;
	padding: 0;
}

.marra-shop ul.products::before,
.marra-shop ul.products::after {
	display: none;
}

/* WooCommerce (layout + smallscreen) postavlja float i širinu 22–48 % sa
   selektorima [class*=columns-]; u CSS mreži to mora nestati. */
.marra-shop ul.products li.product {
	clear: none !important;
	float: none !important;
	margin: 0 !important;
	width: auto !important;
}

@media (max-width: 767px) {
	.marra-shop ul.products {
		gap: 28px 12px;
	}
}

@media (min-width: 1024px) {
	.marra-shop ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------ */
/* Kartica proizvoda                                                  */
/* ------------------------------------------------------------------ */

.woocommerce ul.products li.product,
.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product {
	display: flex;
	flex-direction: column;
	text-align: start;
}

/* Gumbi u istoj liniji i kad naslov ide u dva reda */
.woocommerce ul.products li.product > .button,
.woocommerce ul.products li.product > .added_to_cart {
	margin-top: auto;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	margin-bottom: 12px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	color: inherit;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	text-decoration: none;
}

.woocommerce ul.products li.product .marra-card__media {
	aspect-ratio: 4 / 5;
	background-color: var(--marra-cream);
	margin-bottom: 14px;
	overflow: hidden;
	position: relative;
}

.woocommerce ul.products li.product .marra-card__media img {
	height: 100% !important;
	inset: 0;
	margin: 0 !important;
	object-fit: cover;
	position: absolute;
	transition: opacity 0.5s ease, transform 0.8s ease;
	width: 100%;
}

.woocommerce ul.products li.product .marra-card__img-hover {
	opacity: 0;
}

@media (hover: hover) {
	.woocommerce ul.products li.product:hover .marra-card__media img {
		transform: scale(1.03);
	}

	.woocommerce ul.products li.product:hover .marra-card__img-hover {
		opacity: 1;
	}
}

.woocommerce ul.products li.product .marra-card__collection {
	color: var(--marra-caramel);
	display: block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--marra-tracking-label);
	margin-bottom: 4px;
	text-transform: uppercase;
}

.woocommerce ul.products li.product .marra-card__title {
	color: var(--marra-black);
	font-family: var(--marra-font-display);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.2;
	margin: 0 0 6px;
	padding: 0;
}

.woocommerce ul.products li.product .price {
	color: var(--marra-black);
	display: block;
	padding: 0;
	font-family: var(--marra-font-body);
	font-size: 15px;
	font-weight: 400;
	margin-bottom: 4px;
}

.woocommerce ul.products li.product .price del {
	color: var(--marra-muted);
	font-weight: 300;
	margin-inline-end: 6px;
	opacity: 1;
}

.woocommerce ul.products li.product .price ins {
	color: var(--marra-sale);
	text-decoration: none;
}

/* Sidrena cijena (MJDD dodatak) – manje i diskretnije; tooltip ostaje dostupan */
/* Sidrena cijena: tekst bez precrtavanja/podcrtavanja (svugdje) */
.sidrena-cijena__text {
	text-decoration: none !important;
}

.woocommerce ul.products li.product .sidrena-cijena {
	color: var(--marra-muted);
	display: block;
	padding: 0;
	font-size: 12px;
	line-height: 1.5;
}

/* Skriveni tooltip (280 px) širi je od kartice i stvara vodoravno pomicanje */
.woocommerce ul.products li.product .sidrena-cijena__tooltip {
	box-sizing: border-box;
	max-width: 100%;
	right: 0;
	width: auto;
}

.woocommerce ul.products li.product .button {
	background-color: transparent;
	border: 1px solid var(--marra-black);
	color: var(--marra-black);
	font-size: 11px;
	margin-top: auto;
	padding: 12px 16px;
	width: 100%;
}

.woocommerce ul.products li.product .button:hover {
	background-color: var(--marra-black);
	color: var(--marra-cream);
}

.woocommerce ul.products li.product .added_to_cart {
	display: block;
	font-size: 12px;
	letter-spacing: 0.1em;
	margin-top: 8px;
	text-align: center;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.woocommerce ul.products li.product .marra-card__title {
		font-size: 17px;
	}

	.woocommerce ul.products li.product .button {
		font-size: 10px;
		letter-spacing: 0.14em;
		padding: 11px 8px;
	}
}

/* ------------------------------------------------------------------ */
/* Oznake                                                             */
/* ------------------------------------------------------------------ */

.marra-badges {
	display: flex;
	flex-direction: column;
	gap: 6px;
	left: 12px;
	pointer-events: none;
	position: absolute;
	top: 12px;
	z-index: 2;
}

.marra-badges--single {
	left: 16px;
	top: 16px;
}

.marra-badge {
	background-color: var(--marra-ivory);
	color: var(--marra-black);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.22em;
	line-height: 1;
	padding: 7px 10px;
	text-transform: uppercase;
}

.marra-badge--sale {
	background-color: var(--marra-black);
	color: var(--marra-cream);
}

.marra-badge--soldout {
	background-color: var(--marra-muted);
	color: var(--marra-white);
}

/* ------------------------------------------------------------------ */
/* Stranica proizvoda                                                 */
/* ------------------------------------------------------------------ */

.single-product .marra-shop div.product {
	position: relative;
}

@media (min-width: 900px) {
	.single-product .marra-shop div.product {
		column-gap: 64px;
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}

	/* WooCommerce koristi #content selektore (float + 48 %), zato !important */
	.single-product .marra-shop div.product div.images,
	.single-product .marra-shop div.product div.summary {
		float: none !important;
		margin: 0 !important;
		width: auto !important;
	}

	.single-product .marra-shop div.product > *:not(.woocommerce-product-gallery):not(.summary):not(.marra-badges) {
		grid-column: 1 / -1;
	}

	.single-product .marra-shop div.product .summary {
		align-self: start;
	}
}

@media (max-width: 899px) {
	.single-product .marra-shop div.product div.images,
	.single-product .marra-shop div.product div.summary {
		float: none !important;
		margin: 0 0 var(--marra-space-md) !important;
		width: 100% !important;
	}
}

/* Galerija (izgled u product.css) */
.single-product div.product .woocommerce-product-gallery {
	min-width: 0;
}

.single-product .product_title {
	font-size: clamp(2rem, 3.4vw, 2.8rem);
	margin-bottom: 12px;
}

.single-product div.product p.price,
.single-product div.product span.price {
	color: var(--marra-black);
	font-size: 22px;
	font-weight: 400;
}

.single-product div.product p.price ins {
	color: var(--marra-sale);
	text-decoration: none;
}

.single-product .woocommerce-product-details__short-description {
	color: var(--marra-ink);
	margin-block: 16px 24px;
}

/* Tekst zalijepljen iz drugih izvora često nosi blockquote i inline uvlake */
.woocommerce-product-details__short-description blockquote,
.woocommerce-Tabs-panel--description blockquote {
	border: 0;
	font-style: normal;
	margin: 0;
	padding: 0;
}

.woocommerce-product-details__short-description [style*="padding-left"],
.woocommerce-Tabs-panel--description [style*="padding-left"] {
	padding-left: 0 !important;
}

.single-product div.product form.cart {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}

.single-product div.product form.cart .quantity .qty {
	height: 100%;
	min-height: 50px;
	text-align: center;
	width: 72px;
}

.single-product div.product form.cart .single_add_to_cart_button {
	flex: 1 1 200px;
}

.single-product div.product form.variations_form {
	display: block;
}

.single-product table.variations th,
.single-product table.variations td {
	border: 0;
	padding: 6px 0;
}

.single-product .product_meta {
	border-top: 1px solid var(--marra-line);
	color: var(--marra-muted);
	font-size: 13px;
	padding-top: 16px;
}

.single-product .product_meta > span {
	display: block;
	margin-bottom: 4px;
}

/* Kartice (opis, recenzije) */
.woocommerce-tabs {
	margin-top: var(--marra-space-xl);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--marra-line);
	display: flex;
	gap: 32px;
	margin: 0 0 24px;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--marra-muted);
	display: block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--marra-tracking-label);
	padding: 14px 0;
	text-transform: uppercase;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	box-shadow: inset 0 -1px 0 var(--marra-black);
	color: var(--marra-black);
}

.related.products > h2,
.upsells.products > h2 {
	margin-block: var(--marra-space-xl) var(--marra-space-md);
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* Obavijesti, paginacija                                             */
/* ------------------------------------------------------------------ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background-color: var(--marra-white);
	border: 1px solid var(--marra-line);
	border-inline-start: 3px solid var(--marra-champagne);
	color: var(--marra-ink);
	font-size: 14px;
}

.woocommerce-error {
	border-inline-start-color: var(--marra-sale);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--marra-caramel);
}

.woocommerce nav.woocommerce-pagination {
	margin-top: var(--marra-space-lg);
}

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	gap: 6px;
	justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 1px solid var(--marra-line);
	color: var(--marra-black);
	min-width: 42px;
	padding: 10px;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background-color: var(--marra-black);
	border-color: var(--marra-black);
	color: var(--marra-cream);
}

/* ------------------------------------------------------------------ */
/* Košarica, blagajna, račun (osnovno – detaljni dizajn u sljedećoj fazi) */
/* ------------------------------------------------------------------ */

.woocommerce-cart table.cart img {
	width: 72px;
}

.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-checkout h3 {
	font-size: 1.6rem;
}

.woocommerce-checkout #order_review,
.woocommerce .cart-collaterals .cart_totals {
	background-color: var(--marra-white);
	border: 1px solid var(--marra-line);
	padding: 24px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	border-bottom: 1px solid var(--marra-line);
	color: var(--marra-black);
	display: block;
	font-size: 13px;
	letter-spacing: 0.12em;
	padding: 12px 0;
	text-decoration: none;
	text-transform: uppercase;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--marra-caramel);
}

/* Obrubljeni gumb i na WooCommerce stranicama (body.woocommerce-page boji sve a.button) */
.woocommerce a.button.marra-button--outline,
.woocommerce-page a.button.marra-button--outline {
	background-color: transparent;
	border-color: var(--marra-black);
	color: var(--marra-black);
}

.woocommerce a.button.marra-button--outline:hover,
.woocommerce-page a.button.marra-button--outline:hover {
	background-color: var(--marra-black);
	color: var(--marra-cream);
}

/* ------------------------------------------------------------------ */
/* Količina −/+ (košarica i stranica proizvoda)                       */
/* ------------------------------------------------------------------ */

.woocommerce .quantity.marra-stepper {
	align-items: stretch;
	border: 1px solid var(--marra-line);
	display: inline-flex;
	height: 48px;
	transition: border-color var(--marra-transition);
}

/* Polje bez vlastitog obruba: fokus se vidi na okviru stepera */
.woocommerce .quantity.marra-stepper:focus-within {
	border-color: var(--marra-caramel);
}

.woocommerce .quantity.marra-stepper .marra-stepper__btn:focus-visible {
	outline-offset: -1px;
}

.woocommerce .quantity.marra-stepper .qty {
	-moz-appearance: textfield;
	background: transparent;
	border: 0;
	font-size: 15px;
	height: 100%;
	min-height: 0;
	padding: 0;
	text-align: center;
	width: 44px;
}

.woocommerce .quantity.marra-stepper .qty::-webkit-outer-spin-button,
.woocommerce .quantity.marra-stepper .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce .quantity.marra-stepper .marra-stepper__btn {
	background: transparent;
	border: 0;
	color: var(--marra-black);
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 1;
	padding: 0;
	width: 40px;
}

.woocommerce .quantity.marra-stepper .marra-stepper__btn:hover {
	background-color: var(--marra-cream);
	color: var(--marra-black);
}

.single-product div.product form.cart .quantity.marra-stepper .qty {
	min-height: 0;
	width: 44px;
}

.single-product div.product form.cart .quantity.marra-stepper {
	height: auto;
	min-height: 50px;
}

/* Obavijesti s gumbom: tekst i gumb u retku, bez preklapanja */
.woocommerce .woocommerce-message:has(.button),
.woocommerce .woocommerce-info:has(.button),
.woocommerce .woocommerce-error:has(.button) {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
}

.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button {
	float: none;
	margin-inline-start: auto;
	order: 2;
	padding: 12px 20px;
}

/* ------------------------------------------------------------------ */
/* Kartica proizvoda kao kartica: pozadina, unutarnji razmak, hover    */
/* ------------------------------------------------------------------ */

.woocommerce ul.products li.product {
	background-color: var(--marra-white);
	box-shadow: none !important;
	padding: 0 !important;
	transition: box-shadow 0.35s ease, transform 0.35s ease;
}

@media (hover: hover) {
	.woocommerce ul.products li.product:hover {
		box-shadow: 0 18px 40px rgba(17, 17, 17, 0.08) !important;
		transform: translateY(-3px);
	}
}

.woocommerce ul.products li.product .marra-card__media {
	margin-bottom: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	margin-bottom: 0;
	padding: 16px 16px 4px;
}

/* Slika ide do rubova kartice, tekst ostaje s razmakom */
.woocommerce ul.products li.product .woocommerce-loop-product__link > .marra-card__media {
	margin: -16px -16px 16px;
}

.woocommerce ul.products li.product > .button {
	display: block;
	margin: 12px 16px 16px !important;
	width: auto !important;
}

.woocommerce ul.products li.product > .added_to_cart {
	margin: -6px 16px 14px;
}

@media (max-width: 767px) {
	.woocommerce ul.products li.product .woocommerce-loop-product__link {
		padding: 12px 12px 2px;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__link > .marra-card__media {
		margin: -12px -12px 12px;
	}

	.woocommerce ul.products li.product > .button {
		margin: 10px 12px 12px !important;
	}

	.woocommerce ul.products li.product > .added_to_cart {
		margin: -4px 12px 12px;
	}
}

/* Mobitel: gumb u jednom redu i u uskim karticama */
@media (max-width: 767px) {
	.woocommerce ul.products li.product > .button {
		font-size: 10px;
		letter-spacing: 0.06em;
		overflow: hidden;
		padding: 11px 4px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* Vodič za poklone ([marra_gift_guide]) */
.marra-gift-guide__band {
	margin: 0 0 var(--marra-space-xl);
}

.marra-gift-guide__title {
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	margin: 0 0 6px;
	text-align: center;
}

.marra-gift-guide__text {
	color: var(--marra-muted);
	margin: 0 auto var(--marra-space-md);
	max-width: 520px;
	text-align: center;
}

.marra-gift-guide ul.products {
	margin-top: 0;
}

/* Sezonska napomena (rok za Božić) */
.marra-season-note {
	background-color: var(--marra-blush);
	color: var(--marra-black);
	font-size: 13px;
	margin: 0 28px 4px;
	padding: 10px 14px;
}

.woocommerce-checkout .marra-season-note {
	margin: 0 0 16px;
}