/* Kartica proizvoda (Figma 42:40) */

/* Liste sa OceanWP float kolonama (početna, /shop): flex red da kartice u istom redu budu iste visine.
   Širine kolona ostaju OceanWP-ove; clearfix pseudo-elementi bi u flexu bili prazne stavke. */
.gsm-block--products .woocommerce ul.products,
.gsm-block--products ul.products {
	display: flex;
	flex-wrap: wrap;
}

.gsm-block--products ul.products::before,
.gsm-block--products ul.products::after {
	display: none;
}

/* OceanWP daje li-ju overflow: hidden, što odsiječe vrh kartice kad se podigne na hover */
.woocommerce ul.products li.product.gsm-product-item {
	margin-bottom: 12px;
	padding: 0 6px;
	overflow: visible;
	text-align: left;
}

.gsm-product {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 340px;
	padding: 29px 14px 12px;
	border: 1px solid #e9ebef;
	border-radius: 12px;
	background: var(--gsm-white);
	box-sizing: border-box;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}

.gsm-product:hover {
	border-color: var(--gsm-orange);
	box-shadow: 0 10px 28px rgba(255, 105, 0, .14);
	transform: translateY(-2px);
}

/* Slika: bez zamjene na hover, samo blagi zoom */
.gsm-product__image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 172px;
	margin-bottom: 12px;
	overflow: hidden;
}

.woocommerce ul.products li.product .gsm-product__image img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
	transition: transform .3s;
}

.gsm-product:hover .gsm-product__image img {
	transform: scale(1.04);
}

/* Bedž akcije */
.gsm-product__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--gsm-orange);
	color: var(--gsm-white);
	font-size: 11px;
	font-weight: 700;
	line-height: 14px;
}

/* Lista želja (TI Wishlist): samo srce u gornjem desnom uglu */
.gsm-product__wishlist {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
}

/* OceanWP (wishlist.css) krije srce do hovera i sam ga pozicionira; mi ga uvijek prikazujemo */
.products .product .gsm-product__wishlist .tinv-wraper.tinv-wishlist {
	position: static;
	margin: 0;
	padding: 0;
	visibility: visible;
	opacity: 1;
}

/* Brzi pregled (OceanWP Quick View): okrugla ikonica oka ispod srca, uvijek vidljiva.
   Poništava OceanWP .owp-quick-view (crna traka preko slike, skrivena do hovera). */
.woocommerce ul.products li.product .gsm-product .gsm-product__quickview {
	position: absolute;
	top: 40px;
	right: 6px;
	bottom: auto;
	left: auto;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	color: #17191d;
	font-size: 0;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	visibility: visible;
	opacity: 1;
	transition: color .2s, background-color .2s;
}

.gsm-product__quickview::before {
	content: '';
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce ul.products li.product .gsm-product .gsm-product__quickview:hover,
.woocommerce ul.products li.product .gsm-product .gsm-product__quickview:focus-visible {
	background: #fff1e6;
	color: var(--gsm-orange);
}

.gsm-product__wishlist .tinv-wishlist a.tinvwl_add_to_wishlist_button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	border-radius: 50%;
	color: #17191d;
	font-size: 0;
	transition: color .2s, background-color .2s;
}

/* TI ikonicu (web font) mijenjamo SVG srcem koje prati boju teksta */
.gsm-product__wishlist .tinv-wishlist a.tinvwl_add_to_wishlist_button::before {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	margin: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.3-9.2C1.4 8 3.4 4.5 6.9 4.5c2.1 0 3.9 1.2 5.1 3 1.2-1.8 3-3 5.1-3 3.5 0 5.5 3.5 4.2 6.8-1.8 4.6-9.3 9.2-9.3 9.2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.3-9.2C1.4 8 3.4 4.5 6.9 4.5c2.1 0 3.9 1.2 5.1 3 1.2-1.8 3-3 5.1-3 3.5 0 5.5 3.5 4.2 6.8-1.8 4.6-9.3 9.2-9.3 9.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* U listi želja: puno srce */
.gsm-product__wishlist .tinv-wishlist a.tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.3-9.2C1.4 8 3.4 4.5 6.9 4.5c2.1 0 3.9 1.2 5.1 3 1.2-1.8 3-3 5.1-3 3.5 0 5.5 3.5 4.2 6.8-1.8 4.6-9.3 9.2-9.3 9.2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.3-9.2C1.4 8 3.4 4.5 6.9 4.5c2.1 0 3.9 1.2 5.1 3 1.2-1.8 3-3 5.1-3 3.5 0 5.5 3.5 4.2 6.8-1.8 4.6-9.3 9.2-9.3 9.2z'/%3E%3C/svg%3E");
}

.gsm-product__wishlist .tinvwl_add_to_wishlist-text,
.gsm-product__wishlist .tinvwl_remove_from_wishlist-text,
.gsm-product__wishlist .tinvwl_already_on_wishlist-text,
.gsm-product__wishlist .tinvwl-tooltip {
	display: none !important;
}

.gsm-product__wishlist .tinv-wishlist a.tinvwl_add_to_wishlist_button:hover,
.gsm-product__wishlist .tinv-wishlist a.tinvwl_add_to_wishlist_button.tinvwl-product-in-list {
	background: #fff1e6;
	color: var(--gsm-orange);
}

/* Tekst: cijena ide na dno, pa je u susjednim karticama u istoj liniji i kad je naslov u 1, a drugi u 2 reda */
.gsm-product__body {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.gsm-product__body .gsm-product__price {
	margin-top: auto;
}

.woocommerce ul.products li.product .gsm-product__title {
	margin: 0 0 4px;
	padding: 0;
	font-family: var(--gsm-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 17px;
	letter-spacing: 0;
	text-transform: none;
}

/* OceanWP na običnim stranicama (npr. početna) podvlači sve linkove u .entry
   (selektor od 6 klasa). :not(#gsm) dodaje težinu ID-a da bez !important pobijedimo.
   Kod naslova u jednom redu podvlaku krije overflow, pa se vidi tek u dva reda. */
.gsm-product__title a:not(#gsm) {
	display: -webkit-box;
	overflow: hidden;
	color: var(--gsm-text);
	text-decoration: none;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: color .2s;
}

.gsm-product:hover .gsm-product__title a {
	color: var(--gsm-orange);
}

.woocommerce ul.products li.product .gsm-product__subtitle {
	margin: 0 0 10px;
	color: #7a808a;
	font-size: 12px;
	line-height: 15px;
}

.gsm-product__price {
	color: var(--gsm-orange);
	font-size: 18px;
	font-weight: 700;
	line-height: 22px;
}

.gsm-product__price .amount,
.gsm-product__price ins {
	color: var(--gsm-orange);
	text-decoration: none;
}

.gsm-product__price del,
.gsm-product__price del .amount {
	margin-right: 6px;
	color: #9aa0a8;
	font-size: 13px;
	font-weight: 500;
}

/* Dno: stanje + korpa */
.gsm-product__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
}

.gsm-product__stock {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #1f9d55;
	font-size: 10px;
	font-weight: 500;
	line-height: 12px;
}

.gsm-product__stock::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.gsm-product__stock.is-onbackorder {
	color: #d98200;
}

.gsm-product__stock.is-outofstock {
	color: #9aa0a8;
}

.woocommerce ul.products li.product .gsm-product .gsm-product__cart {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var(--gsm-orange);
	transition: background-color .2s, transform .2s;
}

.woocommerce ul.products li.product .gsm-product .gsm-product__cart:hover {
	background: var(--gsm-orange-dark);
	transform: scale(1.06);
}

.gsm-product__cart img {
	width: 20px;
	height: 20px;
}

.gsm-product__cart.is-link img {
	width: 14px;
	height: 14px;
}

/* AJAX dodavanje u korpu: spinner pa kvačica */
.woocommerce ul.products li.product .gsm-product .gsm-product__cart.loading {
	opacity: 1;
}

.woocommerce ul.products li.product .gsm-product .gsm-product__cart.loading img {
	opacity: 0;
}

.woocommerce ul.products li.product .gsm-product .gsm-product__cart.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: var(--gsm-white);
	border-radius: 50%;
	animation: gsm-spin .7s linear infinite;
}

.woocommerce ul.products li.product .gsm-product .gsm-product__cart.added {
	background: #1f9d55;
}

.woocommerce ul.products li.product .gsm-product .gsm-product__cart.added::after {
	display: none;
}

/* WooCommerce posle dodavanja ubaci link "Pogledaj korpu"; korpa u headeru je dovoljna */
.gsm-product .added_to_cart {
	display: none !important;
}

@keyframes gsm-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 767px) {
	.woocommerce ul.products li.product.gsm-product-item {
		padding: 0 4px;
	}

	.gsm-product {
		min-height: 0;
		padding: 26px 10px 10px;
	}

	.gsm-product__image {
		height: 130px;
	}

	.gsm-product__price {
		font-size: 16px;
	}
}

.gsm-product__title a:hover,
.gsm-product__title a:focus {
	text-decoration: none;
}

/* Cijene svuda (stranica proizvoda, Quick View, widgeti): narandžasto umjesto OceanWP zelene */
.woocommerce .price,
.woocommerce .price .amount,
.woocommerce .price ins .amount,
#owp-qv-wrap .price,
#owp-qv-wrap .price .amount {
	color: var(--gsm-orange);
}

.woocommerce .price del,
.woocommerce .price del .amount,
#owp-qv-wrap .price del .amount {
	color: #9aa0a8;
}

.woocommerce ul.products li.product .gsm-product .gsm-product__quickview,
.woocommerce ul.products li.product .gsm-product .gsm-product__quickview:hover {
	text-decoration: none;
}

/* "Cijena na upit" (proizvodi bez cijene) */
.gsm-price-request,
.gsm-product__price .gsm-price-request {
	color: #7a808a;
	font-size: 14px;
	font-weight: 600;
}

/* Brzi pregled: količina + „Dodaj u korpu“ kao na stranici proizvoda (flex sa razmakom).
   OceanWP količinu stavlja float: left, pa dugme na uskom ekranu padne ispod i zalijepi se za nju. */
#owp-qv-wrap form.cart {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

#owp-qv-wrap form.cart::before,
#owp-qv-wrap form.cart::after {
	display: none;
}

/* min-width: OceanWP daje 110px, a sadržaj je uži – desno od „+“ ostajao je prazan prostor */
#owp-qv-wrap form.cart .quantity {
	display: flex;
	align-items: stretch;
	float: none;
	min-width: 0;
	height: 46px;
	margin: 0;
	border: 1px solid #dfe2e7;
	border-radius: 8px;
	overflow: hidden;
}

#owp-qv-wrap form.cart .quantity .minus,
#owp-qv-wrap form.cart .quantity .plus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 100%;
	border: 0;
	background: #f5f6f8;
	color: var(--gsm-text);
	font-size: 16px;
}

#owp-qv-wrap form.cart .quantity .minus:hover,
#owp-qv-wrap form.cart .quantity .plus:hover {
	background: #fff1e6;
	color: var(--gsm-orange);
}

#owp-qv-wrap form.cart .quantity input.qty {
	width: 38px;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	font-weight: 600;
	text-align: center;
}

/* Dugme popuni ostatak reda; ako ne stane (uzak ekran), ide u svoj red cijelom širinom */
#owp-qv-wrap form.cart .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 130px;
	height: 46px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: var(--gsm-orange);
	color: var(--gsm-white);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

#owp-qv-wrap form.cart .single_add_to_cart_button:hover {
	background: var(--gsm-orange-dark);
}

#owp-qv-wrap form.cart .tinv-wraper {
	flex-basis: 100%;
	margin: 0;
}

/* Brzi pregled na telefonu: preko cijelog ekrana umjesto kutije sa 30px okvira.
   Skroluje se #owp-qv-wrap, pa je X fiksiran da ostane vidljiv i kad se spusti do dugmeta. */
@media (max-width: 767px) {
	#owp-qv-wrap .owp-qv-container {
		padding: 0;
	}

	#owp-qv-wrap .owp-qv-container::before {
		display: none;
	}

	/* transform: none – OceanWP ga koristi za animaciju ulaska, a uz transform bi fiksirani X
	   bio vezan za omotač i odskrolovao bi se sa sadržajem. Ostaje samo fade. */
	#owp-qv-wrap .owp-qv-content-wrap,
	#owp-qv-wrap.is-visible .owp-qv-content-wrap {
		display: block;
		width: 100%;
		min-height: 100%;
		background: var(--gsm-white);
		transform: none;
	}

	#owp-qv-wrap .owp-qv-content-inner {
		max-width: none;
		box-shadow: none;
	}

	#owp-qv-wrap .owp-qv-image,
	#owp-qv-wrap .summary {
		width: 100%;
	}

	/* .owp-qv-content-inner zbog jačine – OceanWP-ov #owp-qv-wrap .summary se učitava kasnije */
	#owp-qv-wrap .owp-qv-content-inner .summary {
		padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
	}

	#owp-qv-wrap .owp-qv-content-inner .owp-qv-close {
		position: fixed;
		top: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--gsm-white);
		box-shadow: 0 2px 10px rgba(9, 16, 23, .15);
		font-size: 28px;
		line-height: 40px;
		opacity: 1;
	}
}