/* El Rey De Las Botas — Product cards (shop, categories, related, upsells).
   Overrides Woohoo "product_style_pure": price no longer hides on hover, CTA always visible (touch-friendly),
   no clipping of outline/shadow. Brand §7 Soft Brutalism. */

html .woocommerce ul.products {
	--er-card-pad: 18px;
	row-gap: 36px;
}

/* ---------- Card shell ---------- */
html .woocommerce ul.products li.product .post_item.post_layout_thumbs,
html .woocommerce ul.products .product_style_pure.product .post_item.post_layout_thumbs {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0 6px 6px 0; /* room for the hard shadow */
	padding: 0;
	overflow: visible;
	background-color: var(--er-blanco);
	border: var(--er-bw) solid var(--er-negro);
	border-radius: var(--er-r);
	box-shadow: var(--er-sh);
	transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s cubic-bezier(.2,.8,.2,1);
}
html .woocommerce ul.products li.product .post_item.post_layout_thumbs:hover,
html .woocommerce ul.products li.product .post_item.post_layout_thumbs:focus-within {
	transform: translate(-3px, -3px);
	box-shadow: var(--er-sh-lg);
}
html .woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
}

/* ---------- Image well ---------- */
html .woocommerce ul.products li.product .post_featured,
html .woocommerce ul.products .product_style_pure.product .post_featured {
	position: relative;
	margin: 0;
	aspect-ratio: 1 / 1; /* reserve space, no layout shift */
	overflow: hidden;
	background-color: #F0F0F0; /* matches the studio background of the product photos */
	border-bottom: var(--er-bw) solid var(--er-negro);
	border-radius: calc(var(--er-r) - var(--er-bw)) calc(var(--er-r) - var(--er-bw)) 0 0;
}
html .woocommerce ul.products li.product .post_featured > a {
	display: block;
	height: 100%;
}
html .woocommerce ul.products li.product .post_featured img,
html .woocommerce ul.products .product_style_pure.product .post_featured img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transform: scale(1);
	transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
html .woocommerce ul.products li.product .post_item:hover .post_featured img,
html .woocommerce ul.products .product_style_pure.product .post_item:hover .post_featured img {
	transform: scale(1.045);
}
/* No grey wash over the photo on hover. */
html .woocommerce ul.products li.product .post_featured.hover_shop .mask,
html .woocommerce ul.products .product_style_pure.product .post_item:hover .post_featured.hover_shop .mask {
	display: none;
}

/* Discount badge: Rojo Tarjeta pill, top-left. */
html .woocommerce ul.products li.product .onsale,
html .woocommerce ul.products .product_style_pure.product .onsale {
	position: absolute;
	top: 14px !important;
	left: 14px !important;
	right: auto !important;
	z-index: 3;
	font-size: 15px !important;
	padding: 7px 12px 6px !important;
	letter-spacing: 0.04em;
}
html .woocommerce ul.products li.product .outofstock_label {
	top: 14px !important;
	left: 14px !important;
	font-family: var(--er-fu);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--er-negro);
	background: var(--er-linea);
	border: var(--er-bw) solid var(--er-negro);
	border-radius: var(--er-r-pill);
}

/* ---------- Body ---------- */
html .woocommerce ul.products li.product .post_data,
html .woocommerce ul.products .product_style_pure.product .post_data {
	display: flex;
	flex: 1 1 auto;
	padding: var(--er-card-pad);
	overflow: visible;
}
html .woocommerce ul.products li.product .post_data_inner,
html .woocommerce ul.products .product_style_pure.product .post_data_inner,
html .woocommerce ul.products li.product .post_data,
html .woocommerce ul.products li.product .post_header {
	position: static; /* let the card-wide link cover the whole card */
}
html .woocommerce ul.products li.product .post_data_inner {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}
html .woocommerce ul.products li.product .post_header {
	margin: 0;
}
html .woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 0;
	font-family: var(--er-fu);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	/* Two lines max, equal height across the row. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.3em;
}
html .woocommerce ul.products li.product .woocommerce-loop-product__title a {
	color: var(--er-negro);
}
html .woocommerce ul.products li.product .woocommerce-loop-product__title a::after {
	/* Whole card clickable via the title link (keeps one tab stop per product). */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--er-r);
}
html .woocommerce ul.products li.product .woocommerce-loop-product__title a:focus-visible {
	outline: none;
}
html .woocommerce ul.products li.product .post_item:has(.woocommerce-loop-product__title a:focus-visible) {
	outline: 3px solid var(--er-oro);
	outline-offset: 4px;
}

/* ---------- Price block (always visible) ---------- */
html .woocommerce ul.products li.product .price_wrap {
	margin-top: auto;
}
html .woocommerce ul.products li.product .price,
html .woocommerce ul.products .product_style_pure.product .price,
html .woocommerce ul.products .product_style_pure.product .post_item:hover .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 10px;
	row-gap: 2px;
	margin: 0;
	opacity: 1 !important;
	top: 0 !important;
	font-family: var(--er-fu);
	line-height: 1;
}
html .woocommerce ul.products li.product .price ins {
	order: 1;
	font-size: 26px;
	font-weight: 700;
	color: var(--er-rojo-t);
}
html .woocommerce ul.products li.product .price del {
	order: 2;
	font-size: 16px;
	font-weight: 600;
	color: var(--er-grada);
	text-decoration-thickness: 1.5px;
}
html .woocommerce ul.products li.product .price > .woocommerce-Price-amount {
	font-size: 26px;
	font-weight: 700;
	color: var(--er-negro);
}
html .woocommerce ul.products li.product .price .er-from {
	order: 0;
	flex-basis: 100%;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--er-grada);
}
/* "Te ahorras X €" — brand pillar: saving in € always visible. */
html .woocommerce ul.products li.product .er-save {
	display: inline-flex;
	align-items: center;
	align-self: center;
	margin-top: 8px;
	padding: 4px 10px;
	font-family: var(--er-fu);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--er-negro);
	background-color: var(--er-mantequilla);
	border: 2px solid var(--er-negro);
	border-radius: var(--er-r-pill);
}


/* ---------- Centered card body ---------- */
html .woocommerce ul.products li.product .post_data_inner {
	align-items: center;
	text-align: center;
}
html .woocommerce ul.products li.product .post_header,
html .woocommerce ul.products li.product .woocommerce-loop-product__title {
	width: 100%;
	text-align: center;
}
html .woocommerce ul.products li.product .price_wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	text-align: center;
}
html .woocommerce ul.products li.product .price_wrap .price {
	order: 1;
	justify-content: center;
}
html .woocommerce ul.products li.product .price_wrap .er-save {
	order: 2;
	align-self: center;
}
html .woocommerce ul.products li.product .price .er-from {
	text-align: center;
}
/* ---------- CTA (always visible, full width, 44px+) ---------- */
html .woocommerce ul.products li.product .wrap-data-hover,
html .woocommerce ul.products .product_style_pure.product .wrap-data-hover,
html .woocommerce ul.products .product_style_pure.product .post_header + .wrap-data-hover,
html .woocommerce ul.products .product_style_pure.product .post_item:hover .wrap-data-hover {
	position: relative;
	bottom: auto;
	z-index: 2; /* above the card-wide link */
	width: 100%;
	margin: 4px 0 0;
	opacity: 1;
}
html .woocommerce ul.products li.product .wrap-data-hover .add_to_cart_wrap {
	display: block;
	margin: 0;
	line-height: 1;
}
html .woocommerce ul.products li.product .wrap-data-hover .add_to_cart_wrap [class*=cart],
html .woocommerce ul.products .product_style_pure.product .wrap-data-hover .add_to_cart_wrap [class*=cart] {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 10px 16px;
	font-family: var(--er-fu) !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--er-cal) !important;
	background: var(--er-verde) !important;
	border: var(--er-bw) solid var(--er-negro) !important;
	border-radius: var(--er-r-sm) !important;
	box-shadow: var(--er-sh-sm) !important;
}
html .woocommerce ul.products li.product .wrap-data-hover .add_to_cart_wrap [class*=cart]:hover {
	color: var(--er-cal) !important;
	background: var(--er-noche) !important;
}
html .woocommerce ul.products li.product .wrap-data-hover .add_to_cart_wrap [class*=cart]:active {
	transform: translate(3px, 3px);
	box-shadow: none !important;
}
html .woocommerce ul.products li.product .wrap-data-hover .add_to_cart_wrap [class*=cart]::before {
	margin: 0;
	font-size: 16px;
	min-width: 0;
}
html .woocommerce ul.products li.product .wrap-data-hover .add_to_cart_wrap .added_to_cart {
	margin-top: 8px;
	background: var(--er-oro) !important;
	color: var(--er-negro) !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	html .woocommerce ul.products {
		--er-card-pad: 12px;
		row-gap: 22px;
	}
	html .woocommerce ul.products li.product .post_item.post_layout_thumbs {
		box-shadow: var(--er-sh-sm);
		margin: 0 3px 3px 0;
	}
	html .woocommerce ul.products li.product .post_item.post_layout_thumbs:hover {
		transform: none;
		box-shadow: var(--er-sh-sm);
	}
	html .woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 16px;
	}
	html .woocommerce ul.products li.product .price ins,
	html .woocommerce ul.products li.product .price > .woocommerce-Price-amount {
		font-size: 21px;
	}
	html .woocommerce ul.products li.product .price del {
		font-size: 14px;
	}
	html .woocommerce ul.products li.product .onsale {
		top: 8px !important;
		left: 8px !important;
		font-size: 13px !important;
		padding: 5px 9px 4px !important;
	}
	html .woocommerce ul.products li.product .wrap-data-hover .add_to_cart_wrap [class*=cart] {
		min-height: 44px;
		font-size: 14px;
		padding: 8px 10px;
		letter-spacing: 0.04em;
	}
	html .woocommerce ul.products li.product .er-save {
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html .woocommerce ul.products li.product .post_item,
	html .woocommerce ul.products li.product .post_featured img {
		transition: none !important;
	}
	html .woocommerce ul.products li.product .post_item:hover {
		transform: none !important;
	}
	html .woocommerce ul.products li.product .post_item:hover .post_featured img {
		transform: none !important;
	}
}

/* ---------- Fixes v1.1: badge centering + savings chip under the price ---------- */
/* Theme forces height:25px / line-height:24px on the badge; center with flex instead. */
html .woocommerce ul.products li.product .onsale,
html .woocommerce-page ul.products li.product .onsale,
html .woocommerce ul.products .product_style_pure.product .onsale {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	height: 32px !important;
	min-height: 32px !important;
	width: auto !important;
	min-width: 58px !important;
	max-width: none !important;
	padding: 0 12px !important;
	line-height: 1 !important;
	font-size: 16px !important;
	letter-spacing: 0.02em !important;
	text-align: center !important;
	white-space: nowrap !important;
	font-variant-numeric: tabular-nums;
}

/* Price block: price first, savings chip centered below it. */
html .woocommerce ul.products li.product .price_wrap {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	width: 100% !important;
	margin-top: auto !important;
	text-align: center !important;
}
html .woocommerce ul.products li.product .price_wrap > .price {
	order: 1 !important;
	justify-content: center !important;
	width: 100%;
}
html .woocommerce ul.products li.product .price_wrap > .er-save {
	order: 2 !important;
	align-self: center !important;
	margin: 0 auto !important;
}

@media (max-width: 767px) {
	html .woocommerce ul.products li.product .onsale,
	html .woocommerce-page ul.products li.product .onsale {
		height: 26px !important;
		min-height: 26px !important;
		min-width: 48px !important;
		padding: 0 9px !important;
		font-size: 13px !important;
	}
}

/* CTA must always be visible (theme "pure" style hides it until hover). */
html .woocommerce ul.products li.product .post_data .wrap-data-hover,
html .woocommerce ul.products li.product.product_style_pure .post_item .wrap-data-hover,
html .woocommerce ul.products li.product.product_style_pure .post_item:hover .wrap-data-hover {
	display: block !important;
	position: relative !important;
	bottom: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: 100% !important;
	margin-top: 4px !important;
	z-index: 2;
}
html .woocommerce ul.products li.product .post_data .add_to_cart_wrap {
	margin-top: 0 !important;
}
html .woocommerce ul.products li.product .post_data .post_data_inner .button.add_to_cart_button {
	padding: 10px 16px !important;
}

/* ---------- All card styles (pure = shop, centered = home widgets) ---------- */
/* Body is a centered column: title → price → savings chip → CTA. */
html .woocommerce ul.products li.product .post_data_inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
}
html .woocommerce ul.products li.product .post_data_inner > .post_header { order: 1; width: 100%; }
html .woocommerce ul.products li.product .post_data_inner > .price {
	order: 2;
	margin-top: auto !important;
	justify-content: center !important;
	width: 100%;
}
html .woocommerce ul.products li.product .post_data_inner > .price_wrap { order: 2; }
html .woocommerce ul.products li.product .er-save {
	order: 3 !important;
	align-self: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
html .woocommerce ul.products li.product .post_data_inner > .wrap-data-hover,
html .woocommerce ul.products li.product .post_data_inner > .add_to_cart_button,
html .woocommerce ul.products li.product .post_data_inner > .button { order: 4; }

/* Theme hides the loop add-to-cart button when the image has a hover effect; show it as the brand CTA. */
html .woocommerce ul.products li.product .post_featured + .post_data .post_data_inner > .add_to_cart_button,
html .woocommerce ul.products li.product .post_featured + .post_data .post_data_inner > .button.product_type_variable,
html .woocommerce ul.products li.product .post_featured + .post_data .post_data_inner > .button.product_type_simple,
html .woocommerce ul.products li.product .post_featured + .post_data .add_to_cart_wrap .add_to_cart_button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	margin: 4px 0 0 !important;
	padding: 10px 16px !important;
	font-family: var(--er-fu) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--er-cal) !important;
	background: var(--er-verde) !important;
	border: var(--er-bw) solid var(--er-negro) !important;
	border-radius: var(--er-r-sm) !important;
	box-shadow: var(--er-sh-sm) !important;
	position: relative;
	z-index: 2;
	opacity: 1 !important;
	visibility: visible !important;
}
html .woocommerce ul.products li.product .post_featured + .post_data .add_to_cart_button:hover {
	background: var(--er-noche) !important;
	color: var(--er-cal) !important;
}
html .woocommerce ul.products li.product .post_featured + .post_data .add_to_cart_button:active {
	transform: translate(3px, 3px);
	box-shadow: none !important;
}
html .woocommerce ul.products li.product .post_featured + .post_data .add_to_cart_button.added {
	display: none !important;
}
/* Centered style reserves 55px under each li for the old hover button; no longer needed. */
html .woocommerce ul.products.products_style_centered li.product {
	padding-bottom: 0 !important;
}

@media (max-width: 767px) {
	html .woocommerce ul.products li.product .post_featured + .post_data .add_to_cart_button {
		min-height: 44px;
		font-size: 14px !important;
		padding: 8px 10px !important;
		letter-spacing: 0.04em;
	}
}

/* ---------- Mobile: always 2 product columns, every grid on the site ---------- */
@media (max-width: 767px) {
	html body .woocommerce ul.products,
	html body .woocommerce-page ul.products,
	html body ul.products[class*=columns-] {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 14px 12px !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	html body .woocommerce ul.products::before,
	html body .woocommerce ul.products::after,
	html body ul.products[class*=columns-]::before,
	html body ul.products[class*=columns-]::after {
		display: none !important;
		content: none !important;
	}
	html body .woocommerce ul.products li.product,
	html body .woocommerce-page ul.products li.product,
	html body .woocommerce ul.products[class*=columns-] li.product,
	html body .woocommerce-page ul.products[class*=columns-] li.product,
	html body .sc_extended_products ul.products li.product {
		float: none !important;
		clear: none !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	html .woocommerce ul.products li.product .post_item.post_layout_thumbs {
		margin: 0 3px 3px 0 !important;
	}
	/* Compact card content for ~170px wide cards. */
	html .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15px !important; }
	html .woocommerce ul.products li.product .price ins,
	html .woocommerce ul.products li.product .price > .woocommerce-Price-amount { font-size: 19px !important; }
	html .woocommerce ul.products li.product .price del { font-size: 13px !important; }
	html .woocommerce ul.products li.product .er-save { font-size: 11px !important; padding: 3px 8px !important; }
	html .woocommerce ul.products li.product .post_featured + .post_data .add_to_cart_button,
	html .woocommerce ul.products li.product .wrap-data-hover .add_to_cart_wrap [class*=cart] {
		font-size: 13px !important;
		letter-spacing: 0.02em !important;
		padding: 8px 6px !important;
	}
}