/**
 * Supra Force — custom styling for WooCommerce product cards on the Home page.
 * Enqueued conditionally (front page only) from functions.php via
 * supra_force_enqueue_home_product_card_styles().
 *
 * This replicates — value for value — the card design already used for the
 * "related products" / "up-sells" section on the single product page. That
 * design lives in WordPress's own Customizer "Additional CSS" (rendered as
 * <style id="wp-custom-css">), scoped there to:
 *   .single-product .related.products ul.products li.product
 *   .single-product .up-sells.upsells.products ul.products li.product
 * Selectors below are adapted to the Home loop's markup
 * (body.home .woocommerce ul.products li.product), but every color, size,
 * font, radius, shadow and hover value is copied as-is from that source.
 *
 * Note: the source CSS does not declare a `transition` on the button itself
 * (only the card has one, for transform/box-shadow/border-color), so the
 * button's hover color swap is intentionally instant here too, matching the
 * product page exactly.
 */

/* Polish pass: full, vibrant opacity everywhere in the card — text, buttons
   and photos — both by default and on hover. Nothing else in this file sets
   opacity below 1 anymore, but this closes the door on it explicitly. */
body.home .woocommerce ul.products li.product,
body.home .woocommerce ul.products li.product:hover,
body.home .woocommerce ul.products li.product a img,
body.home .woocommerce ul.products li.product:hover a img,
body.home .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.home .woocommerce ul.products li.product .price,
body.home .woocommerce ul.products li.product .button {
	opacity: 1 !important;
}

/* 1. Hide WooCommerce's native "Showing X of Y results" text entirely. */
body.home .woocommerce-result-count {
	display: none !important;
}

/* 2. Ordering ("sort by") box: more breathing room before the product grid
   starts. WooCommerce's own default here is margin: 0 0 1em — only the
   bottom value changes (1em -> 2.5em), nothing else (width, alignment,
   typography untouched). Scoped to the Home page only; category archive
   pages use their own separate stylesheet (product-archive.css) and are
   not affected by this file at all. */
body.home .woocommerce-ordering {
	margin: 0 0 2.5em !important;
}

/* 3. Ordering ("sort by") select: rounded, subtle border, breathing padding,
   font matching the site's body identity ('LUXE UNO'). */
body.home .woocommerce-ordering select {
	border: 1px solid #DCE8F8 !important;
	border-radius: 8px !important;
	padding: 10px 16px !important;
	background-color: #ffffff !important;
	color: #0D233A !important;
	font-family: 'LUXE UNO', sans-serif !important;
	font-size: 14px !important;
}

/* 1. Showcase layout, take 3: flexbox with explicit percentage widths
   instead of CSS Grid. Grid kept leaving a hole in the first slot on this
   site even after neutralizing WooCommerce's legacy float/clear rules, so
   this switches to the classic flex + fixed-width + margin technique
   (23% card + 1% margin on each side = 25% per slot × 4 = 100%), which
   doesn't depend on grid track placement at all. */
body.home .woocommerce ul.products {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	margin: 20px 0 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* 4. Responsive breakpoints: 2 columns on tablets, 1 column on phones.
   Same margin (1% each side), width recalculated so cards-per-row + their
   margins always add up to exactly 100%. */
@media (max-width: 1024px) {
	body.home .woocommerce ul.products li.product {
		flex: 0 0 48% !important;
		width: 48% !important;
		max-width: 48% !important;
	}
}

@media (max-width: 768px) {
	body.home .woocommerce ul.products li.product {
		flex: 0 0 98% !important;
		width: 98% !important;
		max-width: 98% !important;
	}
}

/* 3. Card: exact 23% width + 1% margin each side (2% total) so 4 cards
   fill each row precisely, no native WooCommerce float/clear/padding left
   to fight the layout, box-sizing so the 20px internal padding is counted
   inside that 23% instead of adding to it. */
body.home .woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	flex: 0 0 23% !important;
	width: 23% !important;
	max-width: 23% !important;
	min-width: 0;
	float: none !important;
	clear: none !important;
	margin: 0 1% 24px 1% !important;
	padding: 20px !important;
	box-sizing: border-box !important;
	text-align: left !important;
	overflow: hidden !important;
	background: linear-gradient(180deg, #ffffff 0%, #FCFDFF 100%) !important;
	border: 1px solid #425fdb !important;
	border-radius: 28px !important;
	box-shadow: none !important;
	opacity: 1 !important;
	transition: all 0.2s ease-in-out !important;
}

/* Belt-and-suspenders against WooCommerce's own legacy
   ".woocommerce ul.products li.first{clear:both}" rule in
   woocommerce-layout.css — harmless no-op once float/clear stop mattering,
   kept here so nothing can reintroduce an offset on the first/last card. */
body.home .woocommerce ul.products li.product.first,
body.home .woocommerce ul.products li.product.last {
	float: none !important;
	clear: none !important;
}

/* Inverted hover: dark card, isolated white photo frame, light-blue price,
   white title, and the two buttons swap solid ↔ outline. */
body.home .woocommerce ul.products li.product:hover {
	transform: translateY(-6px) !important;
	background: #000b5e !important;
	border-color: #000b5e !important;
	opacity: 1 !important;
}

/* 3. Photo frame stays exactly as in the default state — explicit so
   nothing above it can bleed through. */
body.home .woocommerce ul.products li.product:hover .supra-product-image-frame {
	background-color: #FFFFFF !important;
	border-color: #E8EDFF !important;
}

/* 4. Title turns white, price turns light vibrant blue for contrast against
   the new dark navy card background. #8AB4F8 (not the button's #425fdb) was
   chosen here specifically because it reads far more legibly on #000b5e —
   #425fdb is still fairly saturated/mid-tone and loses contrast on a near-
   black background, while #8AB4F8 is the classic light-blue-on-dark-navy
   pairing built for exactly this contrast requirement. */
body.home .woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	color: #FFFFFF !important;
}

body.home .woocommerce ul.products li.product:hover .price,
body.home .woocommerce ul.products li.product:hover .price .woocommerce-Price-amount {
	color: #8AB4F8 !important;
}

body.home .woocommerce ul.products li.product > a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	margin: 0 !important;
}

/* The frame now lives on its own element (span.supra-product-image-frame,
   wrapped around the <img> in functions.php via the woocommerce_product_get_image
   filter — see supra_force_wrap_home_loop_image()), so the <img> itself can
   be genuinely transparent instead of carrying the frame's background. */
/* 1. Vertical, e-commerce-standard frame ratio instead of a fixed height —
   scales cleanly with the card's width at every breakpoint (4 → 2 → 1
   columns) without ever cropping the top/bottom of the product photo. */
body.home .woocommerce ul.products li.product .supra-product-image-frame {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	aspect-ratio: 4 / 5 !important;
	width: 100% !important;
	margin: 0 0 18px 0 !important;
	padding: 22px !important;
	background-color: #FFFFFF !important;
	border: 1px solid #E8EDFF !important;
	border-radius: 22px !important;
	box-sizing: border-box !important;
	transition: all 0.2s ease-in-out !important;
}

/* 2 & 3. No fixed width/height on the img itself anymore — it sizes to its
   own natural aspect ratio (capped by max-width/max-height) and the flex
   frame centers it, so the product is never stretched or cropped top/bottom. */
body.home .woocommerce ul.products li.product .supra-product-image-frame img {
	height: auto !important;
	max-height: 80% !important;
	max-width: 85% !important;
	width: auto !important;
	object-fit: contain !important;
	object-position: center !important;
	background-position: center !important;
	background: transparent !important;
	display: block !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	opacity: 1 !important;
}

body.home .woocommerce ul.products li.product .woocommerce-loop-product__title {
	min-height: 77px !important;
	margin: 0 0 14px 0 !important;
	padding: 0 !important;
	color: #050A55 !important;
	font-family: 'LOFT', sans-serif !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
	letter-spacing: .05em !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	transition: all 0.2s ease-in-out !important;
}

/* margin-top is "auto" here (source has "0") so the price hugs the bottom
   of the flexible link area, keeping price + buttons together at the card's
   base regardless of title length — same bottom-pinning trick used before. */
/* Weight is 900, not the literal 800 asked for: 'LOFT' only has @font-face
   files for 400/700/900 (confirmed in the header's compiled CSS), so 800
   would fall back to browser font-synthesis and render inconsistently.
   900 is the actual heaviest real face this font ships — true "peso
   máximo" without gambling on synthesis. */
body.home .woocommerce ul.products li.product .price {
	display: block;
	margin: auto 0 20px 0 !important;
	color: #2F65F2 !important;
	font-family: 'LOFT', sans-serif !important;
	font-size: 24px !important;
	line-height: 1 !important;
	font-weight: 900 !important;
	font-style: normal !important;
	transition: all 0.2s ease-in-out !important;
}

/* Belt-and-suspenders: force the same weight/style on the inner amount span
   too, in case anything sets its own font-weight/style independent of the
   inherited value from .price above. */
body.home .woocommerce ul.products li.product .price .woocommerce-Price-amount {
	font-weight: 900 !important;
	font-style: normal !important;
}

/* Shared button layout — color/hierarchy now split per button below. */
body.home .woocommerce ul.products li.product .button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 48px !important;
	margin: 0 !important;
	padding: 12px 16px !important;
	border: none !important;
	border-radius: 999px !important;
	font-family: 'LOFT', sans-serif !important;
	font-size: 11px !important;
	line-height: 1.05 !important;
	font-weight: 900 !important;
	letter-spacing: .07em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	white-space: normal !important;
	transition: all 0.2s ease-in-out !important;
}

/* Primary action: "Adicionar Ao Pedido" — official dark blue, tightened to
   just 4px from the button below it for a compact, integrated block.
   border:1px solid transparent (invisible) reserves the same space the
   hover state's white border will need, so the button doesn't change size
   by 2px when the outline appears. */
body.home .woocommerce ul.products li.product > a.add_to_cart_button {
	background: #425fdb !important;
	color: #ffffff !important;
	border: 1px solid transparent !important;
	margin-bottom: 4px !important;
}

/* Secondary action: "Ver Produto" — light blue tint with dark blue text,
   an elegant lower-priority contrast against the solid primary button. */
body.home .woocommerce ul.products li.product > a.yith-wcqv-button {
	background: #E8EDFF !important;
	color: #425fdb !important;
	border: 1px solid transparent !important;
}

/* 5. Button inversion, triggered by hovering the card (not just the button
   itself) so both buttons flip the instant the whole card lights up. */
body.home .woocommerce ul.products li.product:hover > a.add_to_cart_button {
	background: #FFFFFF !important;
	color: #000b5e !important;
}

body.home .woocommerce ul.products li.product:hover > a.yith-wcqv-button {
	background: transparent !important;
	border-color: #FFFFFF !important;
	color: #FFFFFF !important;
}

/* Click/press microinteractions: once the card is already inverted, hovering
   directly over a button gives it its own extra feedback state. */
body.home .woocommerce ul.products li.product:hover > a.add_to_cart_button:hover {
	background-color: #E8EDFF !important;
	transition: background-color 0.2s ease-in-out !important;
}

body.home .woocommerce ul.products li.product:hover > a.yith-wcqv-button:hover {
	background-color: #0a1b8c !important;
	transition: background-color 0.2s ease-in-out !important;
}

/* "Adicionado ✓" success state — ported from the category-page version
   (supra-force-custom/assets/css/product-archive.css), same reasoning and
   same colors. WooCommerce's own add-to-cart.js inserts
   <a class="added_to_cart wc-forward">Ver pedido</a> as a sibling right
   after the button on AJAX success; hidden purely visually here so it
   can't grow the card or shift "Ver Produto" — never removed via PHP, no
   WooCommerce handler unbound. custom-home-add-to-cart.js (enqueued from
   functions.php, is_front_page() only) swaps the button's own text to
   "ADICIONADO ✓" for ~2.2s using the same .supra-is-added class. */
body.home .woocommerce ul.products li.product a.added_to_cart.wc-forward {
	display: none !important;
	visibility: hidden !important;
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* WooCommerce's own native checkmark on .added (woocommerce.css:
   ".added::after{font-family:WooCommerce;content:'\e017';...}") —
   neutralized here so custom-home-add-to-cart.js's own text swap is the
   only success indicator shown. The .added class itself is left alone. */
body.home .woocommerce ul.products li.product > a.add_to_cart_button.added::after {
	content: none !important;
	display: none !important;
}

body.home .woocommerce ul.products li.product > a.add_to_cart_button.supra-is-added,
body.home .woocommerce ul.products li.product:hover > a.add_to_cart_button.supra-is-added {
	background: #0e0e66 !important;
	color: #ffffff !important;
	/* +70% brightness only while this class is present, for more contrast
	   against a dark (hovered) card and against the white background —
	   reverts to plain #0e0e66 automatically once .supra-is-added is
	   removed, nothing else to undo. */
	filter: brightness(1.7);
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, filter 0.2s ease-in-out !important;
}