/* KG Grid/List Toggle */

/* ---- Gumb traka ---- */
.kg-view-toggle {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	align-items: center;
	margin: 0 0 16px;
	clear: both;
}

.kg-view-toggle button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	border: 1px solid #ccc;
	background: #fff;
	color: #222;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.2;
}

.kg-view-toggle button:hover {
	border-color: #999;
}

.kg-view-toggle button.is-active {
	background: #111;
	color: #fff;
	border-color: #111;
}

.kg-view-toggle .kg-ico {
	font-size: 16px;
}

/* ============================================================
   LIST PRIKAZ — klasični WooCommerce markup (ul.products > li.product)
   ============================================================ */
ul.products.kg-shop-list {
	display: block !important;
	grid-template-columns: none !important;
	margin: 0 !important;
}

ul.products.kg-shop-list::before,
ul.products.kg-shop-list::after {
	content: none !important;
}

ul.products.kg-shop-list li.product {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	clear: both !important;
	display: flex !important;
	align-items: center;
	gap: 16px;
	margin: 0 0 8px !important;
	padding: 12px;
	border-bottom: 1px solid #eee;
	box-sizing: border-box;
}

/* Slika + naziv + cijena su unutar product linka */
ul.products.kg-shop-list li.product > a.woocommerce-LoopProduct-link,
ul.products.kg-shop-list li.product > a.woocommerce-loop-product__link {
	display: flex !important;
	align-items: center;
	gap: 16px;
	flex: 1 1 auto;
	min-width: 0;
}

ul.products.kg-shop-list li.product img {
	width: 80px !important;
	height: 80px !important;
	object-fit: cover !important; /* sve slike iste veličine */
	flex: 0 0 80px;
	margin: 0 !important;
}

ul.products.kg-shop-list li.product .woocommerce-loop-product__title {
	flex: 1 1 auto;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1rem;
	text-align: left !important;
}

ul.products.kg-shop-list li.product .price {
	margin: 0 !important;
	white-space: nowrap;
	text-align: right;
}

/* Gumb "Dodaj u košaricu": manji, skroz desno, vidljiv samo na hover reda */
ul.products.kg-shop-list li.product .button,
ul.products.kg-shop-list li.product .add_to_cart_button {
	flex: 0 0 auto;
	width: auto !important;
	margin: 0 0 0 auto !important; /* margin-left:auto gura gumb do desnog ruba */
	padding: 6px 14px !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
	white-space: nowrap;
}

@media ( hover: hover ) {
	ul.products.kg-shop-list li.product .button,
	ul.products.kg-shop-list li.product .add_to_cart_button {
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.15s ease;
	}
	ul.products.kg-shop-list li.product:hover .button,
	ul.products.kg-shop-list li.product:hover .add_to_cart_button {
		opacity: 1;
		visibility: visible;
	}
}

/* Sakrij placeholder sliku u listi da prazni proizvodi izgledaju urednije */
ul.products.kg-shop-list li.product img[src*="woocommerce-placeholder"] {
	opacity: 0.35;
}

/* ============================================================
   LIST PRIKAZ — blokovski markup (Product Collection / Products block)
   ============================================================ */

/* Generički safety-net: kontejner u jedan stupac, stavke pune širine */
.kg-shop-list {
	display: block !important;
	grid-template-columns: none !important;
}
.kg-shop-list > li {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}
.kg-shop-list.wc-block-product-template,
.kg-shop-list.wp-block-woocommerce-product-template,
.kg-shop-list.wc-block-grid__products {
	display: block !important;
	grid-template-columns: none !important;
}

/* Red proizvoda */
.kg-shop-list.wc-block-product-template > li,
.kg-shop-list.wp-block-woocommerce-product-template > li,
.kg-shop-list.wc-block-grid__products > li {
	width: 100% !important;
	max-width: 100% !important;
	display: flex !important;
	align-items: center;
	gap: 16px;
	margin: 0 0 8px !important;
	padding: 12px;
	border-bottom: 1px solid #eee;
	box-sizing: border-box;
}

/* Slika — sve iste veličine (kvadrat, cover) */
.kg-shop-list > li .wp-block-woocommerce-product-image,
.kg-shop-list > li .wc-block-components-product-image {
	flex: 0 0 80px;
	width: 80px !important;
	margin: 0 !important;
}

.kg-shop-list > li .wp-block-woocommerce-product-image img,
.kg-shop-list > li .wc-block-components-product-image img {
	width: 80px !important;
	height: 80px !important;
	object-fit: cover !important;
	margin: 0 !important;
}

/* Naziv proizvoda — uvijek lijevo, zauzima sredinu reda */
.kg-shop-list > li .wp-block-post-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	text-align: left !important;
}

.kg-shop-list > li .wp-block-post-title :where( a ),
.kg-shop-list > li .wp-block-post-title a {
	text-align: left !important;
	justify-content: flex-start !important;
}

/* Cijena */
.kg-shop-list > li .wp-block-woocommerce-product-price,
.kg-shop-list > li .wc-block-components-product-price {
	flex: 0 0 auto;
	margin: 0 !important;
	white-space: nowrap;
}

/* Gumb — na desnom kraju srednjeg dijela (margin-left:auto), manji */
.kg-shop-list > li .wp-block-woocommerce-product-button,
.kg-shop-list > li .wc-block-components-product-button {
	flex: 0 0 auto;
	margin: 0 0 0 auto !important;
}

.kg-shop-list > li .wp-block-woocommerce-product-button .wp-block-button__link,
.kg-shop-list > li .wc-block-components-product-button .wc-block-components-button,
.kg-shop-list > li .add_to_cart_button {
	width: auto !important;
	padding: 6px 14px !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
	white-space: nowrap;
}

/* Gumb vidljiv samo dok je kursor na tom redu (samo na uređajima s pravim hoverom).
   Bez :focus-within da fokus na prvom proizvodu ne "zalijepi" gumb. */
@media ( hover: hover ) {
	.kg-shop-list > li .wp-block-woocommerce-product-button,
	.kg-shop-list > li .wc-block-components-product-button {
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.15s ease;
	}
	.kg-shop-list > li:hover .wp-block-woocommerce-product-button,
	.kg-shop-list > li:hover .wc-block-components-product-button {
		opacity: 1;
		visibility: visible;
	}
}

/* Na uskim ekranima zadrži sliku lijevo, ostalo se prelama ispod */
@media ( max-width: 480px ) {
	ul.products.kg-shop-list li.product,
	.kg-shop-list > li {
		flex-wrap: wrap;
	}
}