/*
 * Product grid: one card for every product listing on the site.
 *
 * WooCommerce prints products in three different markups, and the store uses
 * all of them:
 *   - the classic loop, ul.products > li.product: shop, category and search
 *     archives, related products, "Se compran juntos", shortcodes;
 *   - the older product blocks, .wc-block-grid__products > .wc-block-grid__product:
 *     the home sections (handpicked, by category), the /pollo, /cerdo and
 *     novillito pages, and the All Products block of /todos-los-productos;
 *   - the Product Collection block, .wc-block-product-template > .wc-block-product
 *     (grid layouts only; its carousel and list layouts are left alone).
 *
 * The same rules for all three:
 *   - an even grid: 2 columns on a phone, 3 on a tablet, the block's or the
 *     catalogue's own column count on desktop, so a short last row is just
 *     a short row, never stretched cards;
 *   - cards of one row share their height; the price and the button sit at
 *     the bottom of the card, so buttons line up whatever the title length;
 *   - a square image box that fills the card's width (object-fit: contain:
 *     a 5 kg bag and a maple occupy the same box, nothing is cropped), and
 *     the button is exactly as wide as the image;
 *   - titles in ink, clamped to 3 lines (4 on a phone); the full title is
 *     still the link text, so screen readers and the product page have it.
 *
 * The Customizer's "Additional CSS" sets parts of these grids with
 * !important (display, gap, flex widths, price sizes, title font size),
 * WordPress font-size presets on block titles and buttons are !important,
 * and the WhatsApp button carries an inline style. Only those declarations
 * are answered with !important below, each marked; nothing else is.
 */

/* ---------- Grid ---------- */

body.sd-ui ul.products,
body.sd-ui .wc-block-grid .wc-block-grid__products,
body.sd-ui .wc-block-product-template.wc-block-product-template__responsive,
body.sd-ui .wc-block-product-template.is-flex-container {
	--sd-grid-cols: 2;
	display: grid !important; /* Additional CSS: display:flex !important */
	grid-template-columns: repeat(var(--sd-grid-cols), minmax(0, 1fr));
	gap: var(--sd-s3) !important; /* Additional CSS: gap 22-28px !important */
	align-items: stretch;
	margin: 0 0 var(--sd-s8);
	padding: 0;
	list-style: none;
}

/* Storefront's clearfix pseudo-elements would become grid cells. */
body.sd-ui ul.products::before,
body.sd-ui ul.products::after {
	content: none;
	display: none;
}

@media (min-width: 768px) {
	body.sd-ui ul.products,
	body.sd-ui .wc-block-grid .wc-block-grid__products,
	body.sd-ui .wc-block-product-template.wc-block-product-template__responsive,
	body.sd-ui .wc-block-product-template.is-flex-container {
		--sd-grid-cols: 3;
		gap: var(--sd-s5) !important;
	}

	body.sd-ui ul.products.columns-1,
	body.sd-ui .wc-block-grid.has-1-columns .wc-block-grid__products,
	body.sd-ui .wc-block-product-template.columns-1 {
		--sd-grid-cols: 1;
	}

	body.sd-ui ul.products.columns-2,
	body.sd-ui .wc-block-grid.has-2-columns .wc-block-grid__products,
	body.sd-ui .wc-block-product-template.columns-2 {
		--sd-grid-cols: 2;
	}

	/* "Se compran juntos" shows 4 products (SUPERDELI_BT_DISPLAY_COUNT) in a
	   loop marked columns-3: one row of 4, not 3 plus an orphan. */
	body.sd-ui .superdeli-bt ul.products {
		--sd-grid-cols: 4;
	}
}

@media (min-width: 1024px) {
	body.sd-ui ul.products.columns-4,
	body.sd-ui .wc-block-grid.has-4-columns .wc-block-grid__products,
	body.sd-ui .wc-block-product-template.columns-4 {
		--sd-grid-cols: 4;
	}

	body.sd-ui ul.products.columns-5,
	body.sd-ui ul.products.columns-6,
	body.sd-ui .wc-block-grid.has-5-columns .wc-block-grid__products,
	body.sd-ui .wc-block-grid.has-6-columns .wc-block-grid__products,
	body.sd-ui .wc-block-product-template.columns-5,
	body.sd-ui .wc-block-product-template.columns-6 {
		--sd-grid-cols: 5;
	}
}

/* ---------- Card ---------- */

body.sd-ui ul.products li.product,
body.sd-ui .wc-block-grid .wc-block-grid__products > .wc-block-grid__product,
body.sd-ui .wc-block-product-template > .wc-block-product {
	/* Storefront's float columns and Additional CSS's flex columns size the
	   card themselves; in the grid the cell does. */
	float: none !important;
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	position: relative;
	min-width: 0;
	padding: var(--sd-s2);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	background: var(--sd-surface) !important; /* Additional CSS: #fff !important on block cards */
	box-shadow: var(--sd-shadow-1);
	overflow: hidden;
	text-align: center;
	font-size: var(--sd-text-sm);
}

@media (min-width: 768px) {
	body.sd-ui ul.products li.product,
	body.sd-ui .wc-block-grid .wc-block-grid__products > .wc-block-grid__product,
	body.sd-ui .wc-block-product-template > .wc-block-product {
		padding: var(--sd-s3);
		font-size: var(--sd-text-md);
	}
}

/* The link around image + title (+ price in the classic loop) is itself a
   column that takes the free height, so the price can sink to its bottom. */
body.sd-ui ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: inherit;
	text-decoration: none;
}

body.sd-ui .wc-block-grid__product > .wc-block-grid__product-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Block products: no stray margins between the parts of a card. */
body.sd-ui .wc-block-product-template > .wc-block-product > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* ---------- Image ---------- */

/* Additional CSS gives the block image box min-height: 400px, taller than
   the image: that was the empty band between the image and the title. */
body.sd-ui .wc-block-grid__product .wc-block-grid__product-image,
body.sd-ui .wc-block-grid__product .wc-block-components-product-image,
body.sd-ui .wc-block-product .wc-block-components-product-image {
	display: block;
	width: 100%;
	min-height: 0;
	height: auto;
	margin: 0;
}

body.sd-ui ul.products li.product a img,
body.sd-ui .wc-block-grid__product .wc-block-grid__product-image img,
body.sd-ui .wc-block-grid__product .wc-block-components-product-image img,
body.sd-ui .wc-block-product .wc-block-components-product-image img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--sd-surface);
	border-radius: var(--sd-radius-sm);
}

/* ---------- Badge ---------- */

/* Over the image's corner instead of a row of its own between title and
   price, which pushed some cards' price and button down. */
body.sd-ui ul.products li.product .onsale,
body.sd-ui .wc-block-grid__product .wc-block-grid__product-onsale,
body.sd-ui .wc-block-grid__product .wc-block-components-product-sale-badge,
body.sd-ui .wc-block-product .wc-block-components-product-sale-badge {
	position: absolute;
	top: var(--sd-s3);
	left: var(--sd-s3);
	right: auto;
	z-index: 1;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 2px var(--sd-s2);
	border: 0;
	border-radius: var(--sd-radius-pill);
	background: var(--sd-deal) !important; /* Additional CSS: yellow !important on block badges */
	color: #fff !important;
	font-size: var(--sd-text-xs);
	font-weight: 700;
	line-height: 1.5;
	text-transform: none;
	box-shadow: none;
}

/* ---------- Title ---------- */

body.sd-ui ul.products li.product .woocommerce-loop-product__title,
body.sd-ui .wc-block-grid__product .wc-block-grid__product-title,
body.sd-ui .wc-block-product .wp-block-post-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	min-height: 0; /* Additional CSS reserved 9em (2.6em on the classic loop) */
	margin: var(--sd-s2) 0 var(--sd-s1);
	padding: 0;
	color: var(--sd-ink);
	font-family: var(--sd-font);
	font-size: var(--sd-text-sm) !important; /* WordPress font-size presets (has-medium-font-size) are !important */
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

/* All Products / Product Collection: Additional CSS pins the block title's
   margin to 0 with !important, so the gap above it is padding. */
body.sd-ui .wc-block-grid__product > .wc-block-grid__product-title,
body.sd-ui .wc-block-product > .wp-block-post-title {
	padding-top: var(--sd-s2);
}

body.sd-ui .wc-block-grid__product .wc-block-grid__product-title a,
body.sd-ui .wc-block-grid__product .wc-block-components-product-name,
body.sd-ui .wc-block-product .wp-block-post-title a {
	margin: 0;
	color: inherit;
	font-size: inherit !important; /* Additional CSS: 1.5em !important */
	font-weight: inherit;
	text-decoration: none;
}

@media (min-width: 768px) {
	body.sd-ui ul.products li.product .woocommerce-loop-product__title,
	body.sd-ui .wc-block-grid__product .wc-block-grid__product-title,
	body.sd-ui .wc-block-product .wp-block-post-title {
		-webkit-line-clamp: 3;
		line-clamp: 3;
		margin-top: var(--sd-s3);
		font-size: var(--sd-text-md) !important;
	}
}

/* ---------- Price ---------- */

/* margin-top: auto sinks the price, and the button under it, to the bottom
   of the card: every card of a row ends on the same line. */
body.sd-ui ul.products li.product .price,
body.sd-ui .wc-block-grid__product > .wc-block-grid__product-price,
body.sd-ui .wc-block-grid__product > .wp-block-woocommerce-product-price,
body.sd-ui .wc-block-product > .wp-block-woocommerce-product-price {
	display: block;
	min-height: 0; /* Additional CSS reserved 6em */
	margin: auto 0 0;
	padding-top: var(--sd-s1);
	color: var(--sd-ink);
	font-size: var(--sd-text-md);
	font-weight: 700;
	line-height: 1.3;
}

/* All Products / Product Collection: Additional CSS pins this wrapper's
   margin-top with !important, so instead of margin-top: auto it takes the
   free height and sets the price at its bottom. Same result. */
body.sd-ui .wc-block-grid__product > .wp-block-woocommerce-product-price,
body.sd-ui .wc-block-product > .wp-block-woocommerce-product-price {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: flex-end;
}

body.sd-ui .wc-block-grid__product .wp-block-woocommerce-product-price .wc-block-components-product-price,
body.sd-ui .wc-block-product .wp-block-woocommerce-product-price .wc-block-components-product-price {
	margin: 0;
	font-size: inherit;
}

body.sd-ui ul.products li.product .price ins,
body.sd-ui .wc-block-grid__product .price ins,
body.sd-ui .wc-block-product .wp-block-woocommerce-product-price ins,
body.sd-ui .wc-block-grid__product .wc-block-components-product-price__value,
body.sd-ui .wc-block-product .wc-block-components-product-price__value,
body.sd-ui .wc-block-grid__product .wc-block-formatted-money-amount,
body.sd-ui .wc-block-product .wc-block-formatted-money-amount {
	margin: 0;
	color: var(--sd-ink);
	font-size: var(--sd-text-lg) !important; /* Additional CSS: 2.5em !important */
	font-weight: 800;
	line-height: 1.3;
	text-decoration: none;
	background: none;
}

body.sd-ui ul.products li.product .price del,
body.sd-ui .wc-block-grid__product .price del,
body.sd-ui .wc-block-product .wp-block-woocommerce-product-price del,
body.sd-ui .wc-block-grid__product .wc-block-components-product-price__regular,
body.sd-ui .wc-block-product .wc-block-components-product-price__regular {
	display: inline-block;
	margin: 0 var(--sd-s2) 0 0;
	color: var(--sd-muted);
	font-size: var(--sd-text-sm) !important; /* Additional CSS: 0.85em !important */
	font-weight: 400;
	opacity: 1;
}

body.sd-ui ul.products li.product .price del .amount,
body.sd-ui .wc-block-grid__product .wc-block-components-product-price__regular .wc-block-formatted-money-amount,
body.sd-ui .wc-block-product .wc-block-components-product-price__regular .wc-block-formatted-money-amount {
	color: inherit;
	font-size: inherit !important;
	font-weight: inherit;
}

/* ---------- Button ---------- */

/* The add-to-cart button: primary, as wide as the image, one tap target. */
body.sd-ui ul.products li.product .button,
body.sd-ui .wc-block-grid__product .wp-block-button,
body.sd-ui .wc-block-product .wp-block-button {
	width: 100%;
	margin: var(--sd-s2) 0 0;
}

body.sd-ui ul.products li.product .button,
body.sd-ui .wc-block-grid__product .wp-block-button .wp-block-button__link,
body.sd-ui .wc-block-product .wp-block-button .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--sd-tap);
	margin: 0;
	padding: var(--sd-s2) var(--sd-s2);
	border: 1.5px solid var(--sd-primary);
	border-radius: var(--sd-radius);
	background: var(--sd-primary);
	color: #fff;
	font-family: var(--sd-font);
	font-size: var(--sd-text-sm) !important; /* has-small-font-size is !important */
	font-weight: 700;
	line-height: 1.2;
	white-space: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
}

body.sd-ui ul.products li.product .button + .button {
	margin-top: var(--sd-s2);
}

body.sd-ui ul.products li.product .button:hover,
body.sd-ui .wc-block-grid__product .wp-block-button .wp-block-button__link:hover,
body.sd-ui .wc-block-product .wp-block-button .wp-block-button__link:hover {
	border-color: var(--sd-primary-hover);
	background: var(--sd-primary-hover);
	color: #fff;
}

@media (min-width: 768px) {
	body.sd-ui ul.products li.product .button,
	body.sd-ui .wc-block-grid__product .wp-block-button .wp-block-button__link,
	body.sd-ui .wc-block-product .wp-block-button .wp-block-button__link {
		font-size: var(--sd-text-md) !important;
	}
}

/* "Ver pedido" after an AJAX add: a quiet link under the button. */
body.sd-ui ul.products li.product .added_to_cart,
body.sd-ui .wc-block-grid__product .added_to_cart,
body.sd-ui .wc-block-product .wc-block-components-product-button__added-to-cart,
body.sd-ui .wc-block-product .added_to_cart {
	display: block;
	margin-top: var(--sd-s2);
	color: var(--sd-primary);
	font-size: var(--sd-text-sm);
	font-weight: 600;
}

/* "Pedir por WhatsApp" (Click to Chat plugin, style 1) under the button.
   The plugin copies the add-to-cart button's computed style into the
   button's inline style when the page loads, including
   -webkit-text-fill-color: white, so it printed white text on a white or
   grey button: an empty pill on every card. Only !important beats an inline
   style; these rules turn it into a readable, quiet secondary action. */
body.sd-ui ul.products li.product .ctc_woo_place .s1_btn,
body.sd-ui .wc-block-grid__product .ctc_woo_place .s1_btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 100% !important;
	min-height: 40px !important;
	height: auto !important;
	margin: var(--sd-s2) 0 0 !important;
	padding: var(--sd-s1) var(--sd-s2) !important;
	border: 1px solid var(--sd-line) !important;
	border-radius: var(--sd-radius) !important;
	background: var(--sd-surface) !important;
	color: var(--sd-ink-2) !important;
	-webkit-text-fill-color: currentColor !important;
	font-family: var(--sd-font) !important;
	font-size: var(--sd-text-sm) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
}

body.sd-ui ul.products li.product .ctc_woo_place .s1_btn .ctc_cta,
body.sd-ui .wc-block-grid__product .ctc_woo_place .s1_btn .ctc_cta {
	color: inherit;
	-webkit-text-fill-color: currentColor;
}