/* Loaded with woocommerce/product-collection (functions.php): the shop and category listing
   (patterns/product-listing.php) and the product card (patterns/product-card.php, class ub-card). */

/* ---- Listing head -------------------------------------------------------------------------- */
.ub-shop .wc-block-breadcrumbs { margin-block: 0; }
.ub-shop__head { margin-block-start: 0.75rem !important; }
.ub-shop__head > * { margin-block: 0; }
.ub-shop__head h1 { font-size: clamp(2rem, 1.55rem + 2vw, 3rem); }
.ub-shop__intro { max-inline-size: 46rem; margin-block-start: 0.625rem !important; color: var(--wp--preset--color--muted); font-size: 1.0625rem; }
.ub-shop__intro p { margin: 0; }

/* ---- Two columns: filters | products -------------------------------------------------------------
   The count and sorting row sits inside the product collection (so filtering without a page reload
   updates it too). Below 1024 px the collection and that row step aside (display: contents) so the
   "Filtre" button and the sorting share one row, the count under them. */
.ub-shop__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas: "filters sort" "count count" "results results";
	gap: 0.75rem;
	align-items: center;
	margin-block-start: var(--wp--preset--spacing--40) !important;
}
.ub-shop__layout > * { margin: 0 !important; min-inline-size: 0; }
.ub-shop__filters { grid-area: filters; }
.ub-shop .ub-shop__results,
.ub-shop .ub-shop__toolbar { display: contents; }
.ub-shop__results > *,
.ub-shop__toolbar > * { margin: 0 !important; min-inline-size: 0; }
.ub-shop__results > * { grid-column: 1 / -1; }
.ub-shop__results > .ub-shop__toolbar > * { grid-column: auto; }
.ub-shop__toolbar .wp-block-woocommerce-product-results-count { grid-area: count; }
.ub-shop__toolbar .wp-block-woocommerce-catalog-sorting { grid-area: sort; }
.ub-shop__results > .wc-block-product-template { grid-area: results; }
.ub-shop__results > .wc-block-components-notices:not(:has(*)) { display: none; } /* WooCommerce's empty notices box */

@media (min-width: 1024px) {
	.ub-shop__layout {
		grid-template-columns: 16.5rem minmax(0, 1fr);
		grid-template-areas: "filters results";
		column-gap: clamp(1.5rem, 2.5vw, 2.5rem);
		align-items: start;
	}
	.ub-shop .ub-shop__results { display: block; grid-area: results; }
	.ub-shop__results > :is(.wc-block-product-template, .wp-block-query-pagination, .wp-block-woocommerce-product-collection-no-results) { margin-block-start: 1.25rem !important; }
	.ub-shop .ub-shop__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: 2.75rem; }
}

/* Count and sorting */
.ub-shop .ub-shop__toolbar .woocommerce-result-count { margin: 0; color: var(--wp--preset--color--muted); font-size: 0.9375rem; }
.ub-shop .woocommerce-ordering { margin: 0; }
.ub-shop .woocommerce-ordering select {
	inline-size: 100%;
	min-block-size: 2.75rem;
	padding: 0.5rem 2.5rem 0.5rem 0.875rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C2D33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 1.125rem;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	appearance: none;
}
.ub-shop .woocommerce-ordering select:hover { border-color: var(--wp--preset--color--ink); }

/* ---- Product grid: 3 columns from 1100 px, 2 below (phones too) -------------------------------- */
.ub-products .wc-block-product-template.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}
@media (min-width: 1100px) { .ub-products .wc-block-product-template.wc-block-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
@media (max-width: 599px) { .ub-products .wc-block-product-template.wc-block-product-template { gap: 0.625rem; } }
.ub-products .wc-block-product { display: flex; margin: 0; }
.ub-products .wc-block-product > * { margin: 0 !important; }

/* ---- The card ------------------------------------------------------------------------------ */
.ub-card {
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	overflow: hidden;
}
.ub-card > *,
.ub-card__media > *,
.ub-card__body > * { margin: 0 !important; }

/* Image on the surface colour; white photo backgrounds melt into it */
.ub-card__media { position: relative; background: var(--wp--preset--color--surface); }
.ub-card__media .wc-block-components-product-image { background: var(--wp--preset--color--surface); }
.ub-card__media .wc-block-components-product-image img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	padding: 0.5rem;
	mix-blend-mode: multiply;
}
.ub-card__media .wc-block-components-product-image__inner-container { padding: 0.75rem; gap: 0.375rem; align-items: flex-start; pointer-events: none; }
.ub-card__media .wc-block-components-product-sale-badge {
	position: static;
	padding: 0.25rem 0.5rem;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}
/* The colour dots come after the title in the page order (screen readers, keyboard) and sit on the
   image's bottom right: the image is 4:3 of the card's width (container units). */
.ub-card { position: relative; container-type: inline-size; }
.ub-card .ub-card__colors { position: absolute; inset-inline-end: 0.5rem; inset-block-start: calc(75cqi - 1.5rem - 0.375rem); z-index: 2; }

/* Body: tags, title, specs; price and button at the bottom */
.ub-card__body { display: flex; flex: 1; flex-direction: column; gap: 0.625rem; padding: 1rem 1.125rem 1.125rem; }
.ub-card__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.ub-card__title a {
	display: -webkit-box;
	overflow: hidden;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}
.ub-card__title a:hover { color: var(--wp--preset--color--primary); }
.ub-card__price { margin-block-start: auto !important; padding-block-start: 0.25rem; }
.ub-card__price .wc-block-components-product-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.125rem 0.375rem;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}
.ub-card__price del { color: var(--wp--preset--color--muted); font-size: 0.875rem; font-weight: 500; }
.ub-card__price ins { text-decoration: none; }
.ub-card__price .woocommerce-price-suffix,
.ub-card__price .ub-price-from { letter-spacing: 0; }
.ub-card__button { inline-size: 100%; }
.ub-card__button .wp-block-button__link {
	inline-size: 100%;
	min-block-size: 2.75rem;
	padding: 0.625rem 1rem;
	border-radius: 10px;
	font-size: 0.9375rem;
	text-align: center;
}
.ub-card__button .added_to_cart { display: block; margin-block-start: 0.5rem; font-size: 0.875rem; text-align: center; }

.ub-products .wc-block-product:hover .ub-card { border-color: #CDD1D6; }
/* Hover: the card lifts and its photo zooms a little (only with motion allowed: reduced motion and
   UB Kit's "Oprește animațiile" keep it still) */
.ub-card__media .wc-block-components-product-image { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
	html:not([data-ub-motion="off"]) .ub-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
	html:not([data-ub-motion="off"]) .ub-card__media .wc-block-components-product-image img { transition: transform 0.4s ease; }
	html:not([data-ub-motion="off"]) .ub-products .wc-block-product:hover .ub-card { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--soft); }
	html:not([data-ub-motion="off"]) .ub-products .wc-block-product:hover .ub-card__media .wc-block-components-product-image img { transform: scale(1.05); }
}

@media (max-width: 599px) {
	.ub-card { border-radius: 12px; }
	.ub-card__body { gap: 0.5rem; padding: 0.75rem 0.75rem 0.875rem; }
	.ub-card__title { font-size: 0.875rem; line-height: 1.25; }
	.ub-card__title a { -webkit-line-clamp: 3; line-clamp: 3; } /* model and colour stay readable */
	.ub-card__price .wc-block-components-product-price { font-size: 1.125rem; }
	.ub-card__price .woocommerce-price-suffix { flex-basis: 100%; } /* "TVA inclus" on its own line: prices of a row line up */
	.ub-card__button .wp-block-button__link { padding-inline: 0.375rem; font-size: 0.8125rem; }
	.ub-card .wp-block-ub-product-specs { gap: 0.125rem 0.625rem; font-size: 0.8125rem; }
	.ub-card .ub-specs__value { white-space: normal; }
}

/* ---- Pagination and the empty list ------------------------------------------------------------- */
.ub-shop .wp-block-query-pagination { gap: 0.375rem; margin-block-start: var(--wp--preset--spacing--50) !important; font-weight: 600; }
.ub-shop .wp-block-query-pagination a,
.ub-shop .wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	padding-inline: 0.75rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.ub-shop .wp-block-query-pagination .page-numbers.current { border-color: var(--wp--preset--color--deep); background: var(--wp--preset--color--deep); color: var(--wp--preset--color--on-deep); }
.ub-shop .wp-block-query-pagination a:hover { border-color: var(--wp--preset--color--ink); }
.ub-shop__empty {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
	font-size: 1.0625rem;
}
.ub-shop__empty p { margin: 0; }

/* No filter can narrow this list (ub-site's inc/woocommerce/filters.php marks the block "ub-filters--empty",
   e.g. a category with one product): no panel and no "Filtre" button. The products take the full width;
   below 1024 px the count moves up beside the sorting. */
.ub-shop .ub-shop__filters.ub-filters--empty { display: none !important; }
.ub-shop__layout:has(> .ub-filters--empty) { grid-template-areas: "count sort" "results results"; }
@media (min-width: 1024px) {
	.ub-shop__layout:has(> .ub-filters--empty) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "results"; }
}

/* An empty category (ATV, Piese): no filters and no count row to offer, unless filters made the list
   empty; the message spans the full content width */
.ub-shop__layout:has(.ub-shop__empty):not(:has(.wc-block-product-filter-removable-chips__item)) { display: block; }
.ub-shop__layout:has(.ub-shop__empty):not(:has(.wc-block-product-filter-removable-chips__item)) .ub-shop__filters,
.ub-shop__layout:has(.ub-shop__empty) .ub-shop__toolbar { display: none !important; }
.ub-shop__layout:has(.ub-shop__empty) .ub-shop__results { display: block; inline-size: 100%; }