/**
 * Product archives (Trgovina, category and tag pages): premium dark product cards, sorting bar and
 * pagination. Presentation only - products, prices, the anchor-price line, badges and buttons are
 * WooCommerce's (and its plugins') own output; columns and image sizes stay Customizer-controlled.
 * Accent colours come from the tokens, so the 3D PrintXpress brand layer (gold) applies on its pages.
 * Loaded only on product archives and product pages (related products use the same cards).
 */

/* ------------------------------------------------------------- Sorting bar */

.woocommerce .woocommerce-result-count {
	color: var(--lpz-text-muted);
	font-size: var(--lpz-text-sm);
}

.woocommerce .woocommerce-ordering select {
	min-height: var(--lpz-touch);
	padding: 0 2.5rem 0 var(--lpz-space-4);
	border: 1px solid var(--lpz-border-strong);
	border-radius: var(--lpz-radius-sm);
	background-color: var(--lpz-surface);
	color: var(--lpz-text);
	font-size: var(--lpz-text-sm);
}

.woocommerce .woocommerce-ordering select:focus-visible {
	border-color: var(--lpz-accent);
	outline: 2px solid var(--lpz-accent-soft);
	outline-offset: 1px;
}

/* ------------------------------------------------------------- Product cards */

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	padding: var(--lpz-space-3) var(--lpz-space-3) var(--lpz-space-4);
	border: 1px solid var(--lpz-border);
	border-radius: var(--lpz-radius-lg);
	background-color: var(--lpz-surface);
	transition: border-color var(--lpz-duration) var(--lpz-ease);
}

.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within {
	border-color: rgb(139 92 246 / 0.45);
}

.lpz-brand-pxp.woocommerce ul.products li.product:hover,
.lpz-brand-pxp.woocommerce ul.products li.product:focus-within {
	border-color: var(--lpz-accent);
}

/* Astra's summary wrapper fills the card, so every button sits on the card's bottom line. */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 0;
}

/* Product photos have light studio backgrounds: a light square tile, uncropped. */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
	position: relative;
	margin-bottom: var(--lpz-space-3);
}

.woocommerce ul.products li.product a img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0;
	object-fit: contain;
	background-color: #f5f5f7;
	border-radius: var(--lpz-radius);
}

/* Astra's modern shop style prints the badge as .ast-onsale-card (in the site's near-black colour). */
.woocommerce ul.products li.product .ast-onsale-card,
.woocommerce ul.products li.product .onsale {
	background-color: var(--lpz-accent);
	box-shadow: none;
	color: var(--lpz-on-accent);
	font-weight: 700;
	top: var(--lpz-space-2);
	left: var(--lpz-space-2);
	right: auto;
	min-height: auto;
	margin: 0;
	padding: 0.2em 0.7em;
	line-height: 1.5;
	font-size: var(--lpz-text-xs);
	letter-spacing: 0.02em;
}

.woocommerce ul.products li.product .ast-woo-product-category {
	margin-bottom: var(--lpz-space-1);
	font-size: var(--lpz-text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 var(--lpz-space-2);
	padding: 0;
	font-size: var(--lpz-text-base);
	font-weight: 600;
	line-height: var(--lpz-leading-snug);
	overflow-wrap: break-word;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title {
	color: var(--lpz-accent-hover);
}

/* Price on its own line; the anchor-price line (required by law) on the next line, never hidden. */
.woocommerce ul.products li.product .price {
	display: block; /* Normal text flow keeps the word space in "od 9,50 €". */
	margin: 0 0 var(--lpz-space-4);
	color: var(--lpz-text);
	font-size: var(--lpz-text-lg);
	font-weight: 700;
	line-height: var(--lpz-leading-snug);
}

.woocommerce ul.products li.product .price del {
	margin-right: var(--lpz-space-2);
	font-size: var(--lpz-text-sm);
	font-weight: 500;
	opacity: 1;
}

/* Full-width button at the bottom of the card; long labels wrap instead of leaving the card. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--lpz-touch);
	margin: auto 0 0;
	padding: var(--lpz-space-2) var(--lpz-space-3);
	box-sizing: border-box;
	border-radius: var(--lpz-radius-sm);
	font-size: var(--lpz-text-sm);
	line-height: 1.25;
	text-align: center;
	white-space: normal;
}

/* The cards of a row share their rows (subgrid): photo, category, title, price with the anchor-price line,
   button, "view cart" link. So every title, price, anchor-price line and button starts on the same line as
   in the neighbouring cards, whatever the title length; titles stay whole. Each part has a fixed row, so a
   missing part leaves its row empty instead of shifting the rest. Browsers without subgrid keep the flex
   layout above. */
@supports (grid-template-rows: subgrid) {
	.woocommerce ul.products li.product {
		display: grid;
		grid-row: span 6;
		grid-template-rows: subgrid;
		min-width: 0;
		row-gap: 0;
	}

	.woocommerce ul.products li.product .astra-shop-summary-wrap {
		display: grid;
		grid-row: 2 / span 5;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.woocommerce ul.products li.product .astra-shop-thumbnail-wrap { grid-row: 1; }
	.woocommerce ul.products li.product .ast-woo-product-category { grid-row: 1; }
	.woocommerce ul.products li.product .ast-loop-product__link { grid-row: 2; }
	.woocommerce ul.products li.product .price { grid-row: 3; }
	/* Buttons of a row get one height, also when one label wraps to two lines. */
	.woocommerce ul.products li.product .button { grid-row: 4; margin-top: 0; }
	.woocommerce ul.products li.product .added_to_cart { grid-row: 5; }
}

.woocommerce ul.products li.product .added_to_cart {
	min-height: auto;
	margin-top: var(--lpz-space-2);
	padding: 0;
	background: none;
	color: var(--lpz-accent-hover);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------- Pagination */

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lpz-space-2);
	border: 0;
}

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

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--lpz-touch);
	min-height: var(--lpz-touch);
	padding: 0 var(--lpz-space-2);
	border: 1px solid var(--lpz-border-strong);
	border-radius: var(--lpz-radius-sm);
	background-color: var(--lpz-surface);
	color: var(--lpz-text);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus-visible {
	border-color: var(--lpz-accent);
	background-color: var(--lpz-surface-raised);
	color: var(--lpz-text);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	border-color: var(--lpz-accent);
	background-color: var(--lpz-accent);
	color: var(--lpz-on-accent);
}

/* ------------------------------------------------------------- Phones */

@media (max-width: 544px) {
	.woocommerce ul.products li.product {
		padding: var(--lpz-space-2) var(--lpz-space-2) var(--lpz-space-3);
		border-radius: var(--lpz-radius);
	}

	.woocommerce ul.products li.product a img {
		border-radius: var(--lpz-radius-sm);
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: var(--lpz-text-sm);
	}

	.woocommerce ul.products li.product .price {
		font-size: var(--lpz-text-base);
	}

	.woocommerce ul.products li.product .button {
		padding-inline: var(--lpz-space-2);
		font-size: var(--lpz-text-xs);
		letter-spacing: 0;
	}

	.woocommerce .woocommerce-ordering,
	.woocommerce .woocommerce-ordering select {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product {
		transition: none;
	}
}

/* ------------------------------------------------------------- Filter sidebar (inc/catalog.php) */

.lpz-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lpz-space-3);
	margin-bottom: var(--lpz-space-4);
}

.lpz-filters__heading {
	margin: 0;
	font-size: var(--lpz-text-lg);
}

.lpz-filters__close,
.lpz-filter-toggle[hidden],
.lpz-filters__backdrop[hidden] {
	display: none;
}

.lpz-filters__block {
	margin: 0 0 var(--lpz-space-5);
	padding: 0 0 var(--lpz-space-5);
	border-bottom: 1px solid var(--lpz-border);
}

.lpz-filters__title {
	margin: 0 0 var(--lpz-space-3);
	color: var(--lpz-text-muted);
	font-size: var(--lpz-text-xs);
	letter-spacing: var(--lpz-tracking-caps);
	text-transform: uppercase;
}

.lpz-filters ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lpz-cat-tree__list .lpz-cat-tree__list {
	margin: 0 0 var(--lpz-space-2) var(--lpz-space-2);
	padding-left: var(--lpz-space-3);
	border-left: 1px solid var(--lpz-border);
}

.lpz-cat-tree__link,
.lpz-filters .woocommerce-widget-layered-nav-list__item a,
.lpz-filters .widget_layered_nav_filters li a {
	display: inline-block;
	padding: var(--lpz-space-2) 0;
	color: var(--lpz-text);
	font-size: var(--lpz-text-sm);
	text-decoration: none;
}

.lpz-cat-tree__link:hover,
.lpz-filters .woocommerce-widget-layered-nav-list__item a:hover,
.lpz-filters .widget_layered_nav_filters li a:hover,
.lpz-filters__clear a:hover,
.lpz-cat-tree__all a:hover {
	color: var(--lpz-accent-hover);
}

.lpz-cat-tree__item.is-ancestor > .lpz-cat-tree__link {
	font-weight: 600;
}

.lpz-cat-tree__item.is-current > .lpz-cat-tree__link,
.lpz-filters .woocommerce-widget-layered-nav-list__item.chosen a {
	color: var(--lpz-accent);
	font-weight: 600;
}

.lpz-filters .count {
	color: var(--lpz-text-muted);
	font-size: var(--lpz-text-xs);
}

.lpz-filters__clear,
.lpz-cat-tree__all {
	margin: 0 0 var(--lpz-space-3);
	font-size: var(--lpz-text-sm);
}

.lpz-filters__clear a,
.lpz-cat-tree__all a {
	color: var(--lpz-accent);
}

.lpz-filters .price_slider_wrapper .ui-slider .ui-slider-range,
.lpz-filters .price_slider_wrapper .ui-slider .ui-slider-handle {
	background-color: var(--lpz-accent);
}

.lpz-filters .price_slider_wrapper .ui-widget-content {
	background-color: var(--lpz-border-strong);
}

.lpz-filters .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--lpz-space-3);
	margin-top: var(--lpz-space-4);
}

.lpz-filters .price_slider_amount .price_label {
	color: var(--lpz-text-muted);
	font-size: var(--lpz-text-sm);
}

/* "body button…" outranks Astra's .woocommerce-js button.button { display: inline-block }. */
.lpz-filter-toggle,
body button.lpz-filter-toggle.button {
	display: inline-flex;
	align-items: center;
	gap: var(--lpz-space-1);
	min-height: var(--lpz-touch);
	margin: 0 var(--lpz-space-3) var(--lpz-space-4) 0;
}

/* Hidden until the script runs, and on desktop, where the sidebar is always visible. The price filter's own
   button is a different element and stays. */
body button.lpz-filter-toggle.button[hidden] {
	display: none;
}

@media (min-width: 922px) {
	.lpz-filter-toggle,
	body button.lpz-filter-toggle.button {
		display: none;
	}
}

/* Attribute sections (Boja, Veličina, …): closed by default, the heading opens them. */
.lpz-filters__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lpz-space-3);
	min-height: var(--lpz-touch);
	cursor: pointer;
	list-style: none;
}

.lpz-filters__summary::-webkit-details-marker {
	display: none;
}

.lpz-filters__summary::after {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.25rem;
	border-right: 2px solid var(--lpz-text-muted);
	border-bottom: 2px solid var(--lpz-text-muted);
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.2s ease;
}

.lpz-filters__details[open] > .lpz-filters__summary::after {
	transform: translateY(25%) rotate(-135deg);
}

.lpz-filters__summary:hover .lpz-filters__title,
.lpz-filters__summary:focus-visible .lpz-filters__title {
	color: var(--lpz-text);
}

.lpz-filters__summary:focus-visible {
	outline: 2px solid var(--lpz-accent);
	outline-offset: 2px;
	border-radius: var(--lpz-radius-sm);
}

.lpz-filters__block--toggle {
	padding-bottom: var(--lpz-space-3);
}

.lpz-filters__block--toggle .lpz-filters__title {
	margin: 0;
}

.lpz-filters__body {
	padding-top: var(--lpz-space-2);
}

.lpz-filter-toggle__icon {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

/* Phones and tablets (Astra's breakpoint): the filters open as a panel from the left. */
@media (max-width: 921px) {
	/* Toolbar in rows: result count, full-width Filtriraj proizvode, sorting. Only with the script (the button
	   stays hidden without it). */
	.lpz-filters-js body.lpz-catalog .woocommerce-result-count,
	.lpz-filters-js body.lpz-catalog .woocommerce-ordering {
		float: none;
		width: 100%;
		margin: 0 0 var(--lpz-space-3);
	}

	.lpz-filters-js body.lpz-catalog .woocommerce-ordering select {
		width: 100%;
	}

	.lpz-filters-js body.lpz-catalog button.lpz-filter-toggle.button {
		display: flex;
		justify-content: center;
		gap: var(--lpz-space-2);
		width: 100%;
		margin: 0 0 var(--lpz-space-3);
	}

	.lpz-filters-js body.lpz-catalog button.lpz-filter-toggle.button[hidden] {
		display: none;
	}

	.lpz-filters-js body.lpz-catalog #secondary {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.lpz-filters-js .lpz-filters {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 100001;
		width: min(88vw, 22rem);
		padding: var(--lpz-space-5);
		overflow-y: auto;
		border-right: 1px solid var(--lpz-border);
		background-color: var(--lpz-bg);
		visibility: hidden;
		transform: translateX(-100%);
	}

	/* Animated only once the page has loaded (catalog.js), so it never slides away visibly on load. */
	.lpz-filters-ready .lpz-filters {
		transition: transform 0.25s ease, visibility 0.25s;
	}

	.lpz-filters-open .lpz-filters {
		visibility: visible;
		transform: none;
	}

	.lpz-filters-js .lpz-filters__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--lpz-touch);
		height: var(--lpz-touch);
		padding: 0;
		border: 1px solid var(--lpz-border-strong);
		border-radius: var(--lpz-radius-sm);
		background: transparent;
		color: var(--lpz-text);
		font-size: 1.5rem;
		line-height: 1;
	}

	.lpz-filters__backdrop {
		position: fixed;
		inset: 0;
		z-index: 100000;
		background-color: var(--lpz-overlay);
	}

	html.lpz-filters-open {
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lpz-filters-ready .lpz-filters,
	.lpz-filters__summary::after {
		transition: none;
	}
}