/*!
 * Preco Quote Engine — Preco Products grid
 * ===========================================================================
 * Depends on preco-tokens.css, preco-base.css and preco-widgets.css, and
 * follows their conventions: every selector starts at a `.preco` element the
 * plugin printed, component rules read `.preco.preco .preco-thing` (0,3,0),
 * there is no `!important`, and colour, size and space are tokens.
 *
 * HOW ELEMENTOR'S CONTROLS WIN. A control writes
 * `.elementor-{post} .elementor-element.elementor-element-{id} .preco-thing`,
 * which is (0,4,0) — one class above every rule here — so anything set in the
 * widget's Style tab beats these defaults without a fight, at every
 * breakpoint, and nothing here needs `!important` to hold its own.
 *
 * LAYOUT IS CUSTOM PROPERTIES. Columns, gaps, card orientation, image ratio,
 * fit and alignment are read from variables the widget's controls set on the
 * grid. Elementor writes a control's value per breakpoint, so a responsive
 * control here needs no media query of its own. The queries below only give
 * the variables sensible values when no Elementor CSS has been generated yet,
 * mirroring Elementor's breakpoints: mobile below 768, tablet to 1024.
 *
 * @package Preco\QuoteEngine
 */

/* =========================================================================
 * 1. Root and grid
 * ========================================================================= */

.preco.preco-products {
	--preco-pgrid-columns: 1;
}

@media (min-width: 768px) {
	.preco.preco-products {
		--preco-pgrid-columns: 2;
	}
}

@media (min-width: 1025px) {
	.preco.preco-products {
		--preco-pgrid-columns: 4;
	}
}

.preco.preco .preco-products__heading {
	margin-bottom: var(--preco-space-8);
}

.preco.preco .preco-products__grid {
	display: grid;
	grid-template-columns: repeat(var(--preco-pgrid-columns), minmax(0, 1fr));
	column-gap: var(--preco-pgrid-col-gap, var(--preco-space-9));
	row-gap: var(--preco-pgrid-row-gap, var(--preco-space-10));
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.preco.preco-products--equal .preco-products__grid {
	align-items: stretch;
}

/* =========================================================================
 * 2. Card
 * ========================================================================= */

.preco.preco .preco-pcard {
	position: relative;
	display: flex;
	flex-direction: var(--preco-pcard-direction, column);
	min-width: 0;
	margin: 0;
	overflow: hidden;
	background-color: var(--preco-surface);
	border: var(--preco-control-border) solid var(--preco-border);
	border-radius: var(--preco-radius-md);
	box-shadow: var(--preco-shadow-xs);
	transition:
		transform var(--preco-duration-base) var(--preco-ease),
		box-shadow var(--preco-duration-base) var(--preco-ease),
		border-color var(--preco-duration-base) var(--preco-ease);
}

.preco.preco .preco-pcard:hover {
	border-color: var(--preco-border-strong);
	box-shadow: var(--preco-shadow-md);
	transform: translateY(var(--preco-pcard-lift, 0));
}

/* The Cabro Catalogue Filter hides cards with the hidden attribute. */
.preco.preco .preco-pcard[hidden] {
	display: none;
}

.preco.preco-products--equal .preco-pcard {
	height: 100%;
}

/* =========================================================================
 * 3. Image
 * ========================================================================= */

/*
 * Above the text the image is the card's full width. Beside it, the Card
 * layout control sets --preco-pcard-media-size to the image's share of the
 * row, and the image keeps its ratio from that share. Width, not flex-basis:
 * in a column the main axis is the height, and a basis would size that.
 */
.preco.preco .preco-pcard__media {
	position: relative;
	flex: 0 0 auto;
	align-self: flex-start;
	width: var(--preco-pcard-media-size, 100%);
	max-width: 100%;
	aspect-ratio: var(--preco-pcard-ratio, 4 / 3);
	overflow: hidden;
	background-color: var(--preco-surface-sunken);
}

.preco.preco .preco-pcard__media-link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
}

.preco.preco .preco-pcard__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: var(--preco-pcard-fit, cover);
	transition:
		transform var(--preco-duration-slow) var(--preco-ease),
		opacity var(--preco-duration-slow) var(--preco-ease);
}

.preco.preco .preco-pcard__img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.preco.preco-products--hover-zoom .preco-pcard:hover .preco-pcard__img {
	transform: scale(1.04);
}

.preco.preco-products--hover-swap .preco-pcard:hover .preco-pcard__img--hover,
.preco.preco-products--hover-swap .preco-pcard:focus-within .preco-pcard__img--hover {
	opacity: 1;
}

/* =========================================================================
 * 4. Badges
 * ========================================================================= */

.preco.preco .preco-pcard__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--preco-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.preco.preco .preco-pcard__badges--overlay {
	position: absolute;
	top: var(--preco-space-6);
	left: var(--preco-space-6);
	right: var(--preco-space-6);
	z-index: var(--preco-z-raised);
	pointer-events: none;
}

.preco.preco-products--badge-top-right .preco-pcard__badges--overlay {
	justify-content: flex-end;
}

.preco.preco .preco-pcard__badges--inline {
	order: 1;
	margin-bottom: var(--preco-space-5);
	justify-content: var(--preco-pcard-justify, flex-start);
}

.preco.preco .preco-pcard__badge {
	display: inline-block;
	padding: var(--preco-space-2) var(--preco-space-5);
	border: var(--preco-control-border) solid transparent;
	border-radius: var(--preco-radius-pill);
	background-color: var(--preco-brand-primary);
	color: var(--preco-ink-inverse);
	font-size: var(--preco-fs-caption);
	font-weight: var(--preco-fw-bold);
	letter-spacing: var(--preco-ls-label);
	line-height: var(--preco-lh-snug);
	text-transform: uppercase;
}

/* =========================================================================
 * 5. Body and its elements
 * ========================================================================= */

.preco.preco .preco-pcard__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--preco-space-8);
	text-align: var(--preco-pcard-text-align, left);
}

.preco.preco .preco-pcard__category {
	order: 2;
	margin: 0 0 var(--preco-space-3);
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-label);
	font-weight: var(--preco-fw-semibold);
	letter-spacing: var(--preco-ls-label);
	line-height: var(--preco-lh-snug);
	text-transform: uppercase;
}

/*
 * THE LINKS INHERIT CASE AND DECORATION FROM THEIR ELEMENT. The base reset sets
 * `text-transform: none` and `text-decoration: none` on every element, which
 * hits a link directly and so beats anything it would inherit. Without this,
 * an Elementor typography control set to uppercase on the title or category
 * would style the heading and leave the words inside it untouched.
 */
.preco.preco .preco-pcard__category a,
.preco.preco .preco-pcard__whatsapp span {
	color: inherit;
	text-decoration: inherit;
	text-transform: inherit;
}

.preco.preco .preco-pcard__category a:hover {
	color: var(--preco-ink-link-hover);
}

.preco.preco .preco-pcard__title {
	order: 3;
	display: -webkit-box;
	margin: 0 0 var(--preco-space-4);
	overflow: hidden;
	color: var(--preco-ink);
	font-size: var(--preco-fs-h4);
	font-weight: var(--preco-fw-bold);
	line-height: var(--preco-lh-snug);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--preco-pcard-lines, none);
}

.preco.preco .preco-pcard__link {
	color: inherit;
	text-decoration: inherit;
	text-transform: inherit;
}

.preco.preco .preco-pcard__link:hover {
	color: var(--preco-ink-link-hover);
}

.preco.preco .preco-pcard__price {
	position: relative;
	order: 4;
	margin: 0 0 var(--preco-space-6);
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-small);
	line-height: var(--preco-lh-snug);
}

.preco.preco .preco-pcard__amount {
	color: var(--preco-ink);
	font-size: var(--preco-fs-h3);
	font-weight: var(--preco-fw-bold);
	letter-spacing: var(--preco-ls-tight);
}

.preco.preco .preco-pcard__amount--missing {
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-body);
	font-weight: var(--preco-fw-semibold);
	letter-spacing: var(--preco-ls-normal);
}

.preco.preco .preco-pcard__caption {
	display: block;
	margin-top: var(--preco-space-2);
	color: var(--preco-ink-subtle);
	font-size: var(--preco-fs-caption);
	line-height: var(--preco-lh-normal);
}

.preco.preco .preco-pcard__excerpt {
	order: 5;
	display: -webkit-box;
	margin: 0 0 var(--preco-space-6);
	overflow: hidden;
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-small);
	line-height: var(--preco-lh-normal);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--preco-pcard-lines, 3);
}

.preco.preco .preco-pcard__chips {
	order: 6;
	display: flex;
	flex-wrap: wrap;
	gap: var(--preco-space-3);
	margin: 0 0 var(--preco-space-6);
	padding: 0;
	list-style: none;
	justify-content: var(--preco-pcard-justify, flex-start);
}

.preco.preco .preco-pcard__chip {
	max-width: 100%;
	padding: var(--preco-space-2) var(--preco-space-4);
	overflow: hidden;
	border: var(--preco-control-border) solid var(--preco-border);
	border-radius: var(--preco-radius-pill);
	background-color: var(--preco-surface-sunken);
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-caption);
	font-weight: var(--preco-fw-medium);
	line-height: var(--preco-lh-snug);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* =========================================================================
 * 6. Small print behind an info mark
 * ========================================================================= */

/*
 * THE TOOLTIP HANGS FROM THE PRICE LINE, NOT THE MARK. The card clips its
 * contents to keep the image's corners inside its radius, so a tooltip
 * centred on a 20px mark and opening upwards was cut off by the card, and at
 * 320px ran past the screen. Anchored to the price paragraph instead, it is
 * the price's full width and opens below it, inside the card, whatever the
 * card's width.
 */
.preco.preco .preco-pcard__tip {
	position: static;
	display: inline-block;
	margin-left: var(--preco-space-3);
	vertical-align: middle;
}

.preco.preco .preco-pcard__tip-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--preco-space-8);
	height: var(--preco-space-8);
	border: var(--preco-control-border) solid var(--preco-border-strong);
	border-radius: var(--preco-radius-circle);
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-caption);
	font-style: italic;
	font-weight: var(--preco-fw-bold);
	cursor: help;
}

.preco.preco .preco-pcard__tip-mark:focus-visible {
	outline: var(--preco-focus-width) solid var(--preco-focus-color);
	outline-offset: var(--preco-focus-offset);
}

.preco.preco .preco-pcard__tip-text {
	position: absolute;
	top: calc(100% + var(--preco-space-2));
	right: 0;
	left: 0;
	z-index: var(--preco-z-raised);
	margin: 0;
	padding: var(--preco-space-4) var(--preco-space-5);
	border-radius: var(--preco-radius-md);
	background-color: var(--preco-surface-inverse);
	color: var(--preco-ink-inverse);
	text-align: left;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--preco-duration-fast) var(--preco-ease);
}

.preco.preco .preco-pcard__tip:hover .preco-pcard__tip-text,
.preco.preco .preco-pcard__tip:focus-within .preco-pcard__tip-text {
	opacity: 1;
	visibility: visible;
}

/* =========================================================================
 * 7. Buttons
 * ========================================================================= */

.preco.preco .preco-pcard__actions {
	order: 99;
	display: flex;
	flex-wrap: wrap;
	gap: var(--preco-space-4);
	justify-content: var(--preco-pcard-justify, flex-start);
	margin-top: var(--preco-space-2);
}

/* Equal heights: the buttons take whatever space is left, so they line up. */
.preco.preco-products--equal .preco-pcard__actions {
	margin-top: auto;
	padding-top: var(--preco-space-4);
}

.preco.preco .preco-pcard__button,
.preco.preco .preco-pcard__whatsapp {
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
}

.preco.preco .preco-pcard__whatsapp-mark {
	flex: none;
	width: var(--preco-space-8);
	height: var(--preco-space-8);
	fill: currentColor;
}

/* WooCommerce's own states while it adds a product to the quote. */
.preco.preco .preco-pcard__button.loading {
	opacity: 0.6;
	pointer-events: none;
	cursor: progress;
}

.preco.preco .preco-pcard__actions .added_to_cart {
	flex-basis: 100%;
	color: var(--preco-ink-link);
	font-size: var(--preco-fs-small);
	font-weight: var(--preco-fw-semibold);
	text-align: inherit;
}

/* =========================================================================
 * 8. Whole card as a link
 * ========================================================================= */

.preco.preco-products--card-link .preco-pcard {
	cursor: pointer;
}

.preco.preco-products--card-link .preco-pcard__link::after {
	position: absolute;
	inset: 0;
	z-index: var(--preco-z-base);
	content: "";
}

/* Anything else that can be clicked sits above the stretched link. */
.preco.preco-products--card-link .preco-pcard__actions,
.preco.preco-products--card-link .preco-pcard__category a,
.preco.preco-products--card-link .preco-pcard__tip {
	position: relative;
	z-index: var(--preco-z-raised);
}

.preco.preco-products--card-link .preco-pcard:focus-within {
	outline: var(--preco-focus-width) solid var(--preco-focus-color);
	outline-offset: var(--preco-focus-offset);
}

/* =========================================================================
 * 9. Toolbar, messages and pages
 * ========================================================================= */

.preco.preco .preco-products__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--preco-space-6);
	margin-bottom: var(--preco-space-8);
}

.preco.preco .preco-products__sort {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--preco-space-4);
	margin: 0;
}

/*
 * The base form layer makes every label a block and every select full width,
 * which is right for a form and wrong for a one-line toolbar control.
 */
.preco.preco .preco-products__sort-label {
	display: inline;
	margin: 0;
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-small);
	font-weight: var(--preco-fw-semibold);
}

.preco.preco .preco-products__sort-select {
	width: auto;
	max-width: 100%;
	min-height: var(--preco-control-h);
	padding: 0 var(--preco-control-px);
	border: var(--preco-control-border) solid var(--preco-border-input);
	border-radius: var(--preco-control-radius);
	background-color: var(--preco-surface);
	color: var(--preco-ink);
	font-size: var(--preco-fs-small);
}

.preco.preco .preco-products__message {
	margin: 0;
	color: var(--preco-ink-muted);
	font-size: var(--preco-fs-small);
}

.preco.preco .preco-products__empty {
	padding: var(--preco-space-10) var(--preco-space-8);
	border: var(--preco-control-border) dashed var(--preco-border);
	border-radius: var(--preco-radius-md);
	background-color: var(--preco-surface-sunken);
	text-align: center;
}

.preco.preco .preco-products__nav {
	margin-top: var(--preco-space-10);
}

.preco.preco .preco-products__pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--preco-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.preco.preco .preco-products__page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--preco-control-h);
	min-height: var(--preco-control-h);
	padding: 0 var(--preco-space-5);
	border: var(--preco-control-border) solid var(--preco-border);
	border-radius: var(--preco-control-radius);
	background-color: var(--preco-surface);
	color: var(--preco-ink);
	font-weight: var(--preco-fw-semibold);
	text-decoration: none;
}

.preco.preco a.preco-products__page-link:hover {
	border-color: var(--preco-brand-primary);
	color: var(--preco-brand-primary);
}

.preco.preco .preco-products__page-link[aria-current="page"] {
	border-color: var(--preco-brand-primary);
	background-color: var(--preco-brand-primary);
	color: var(--preco-ink-inverse);
}

.preco.preco .preco-products__page-gap,
.preco.preco .preco-products__page-status {
	padding: 0 var(--preco-space-3);
	color: var(--preco-ink-muted);
}

/* =========================================================================
 * 10. Reduced motion
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.preco.preco .preco-pcard,
	.preco.preco .preco-pcard__img,
	.preco.preco .preco-pcard__tip-text {
		transition: none;
	}

	.preco.preco .preco-pcard:hover,
	.preco.preco-products--hover-zoom .preco-pcard:hover .preco-pcard__img {
		transform: none;
	}
}