/**
 * Supra Force — port of the Home page product-card visual system
 * (custom-home-products.css) onto the "related products" / "up-sells"
 * section of the Single Product page. Enqueued conditionally (single
 * product pages only) from functions.php via
 * supra_force_enqueue_related_products_styles().
 *
 * Deliberately KEEPS this section's own existing type sizes from
 * Customizer Additional CSS (title 12.5px, price 17px, button 11px — the
 * button size already matched Home's, so no change needed there) instead
 * of adopting Home's larger title/price sizes (16px/24px) — per request,
 * only the layout/color system moves over, not the type scale.
 *
 * Same specificity-boosting prefix used by custom-single-product.css
 * (3x .woocommerce) to reliably beat Additional CSS's plain .single-product
 * prefix on every shared selector below.
 *
 * 2026-07-10: functions.php's supra_force_start_home_loop_image_frame()
 * was extended from Home-only to also fire on is_product(), so the
 * related/up-sells product photo gets wrapped in the same
 * span.supra-product-image-frame element Home uses. This file styles that
 * frame + its inner <img> with Home's exact parameter values (not an
 * approximation styled on a bare <img> — an earlier version of this file
 * did that and it drifted, keeping this section's OLD gradient/#E6EDF8
 * values instead of Home's actual solid-white/#E8EDFF ones).
 */

/* Card: brand-blue border (was Additional CSS's lighter #DCE8F8) and the
   inverted-navy hover treatment from Home. Radius (28px) and background
   gradient already matched Home's values in Additional CSS, so no change
   needed on those two. */
body.single-product.woocommerce.woocommerce.woocommerce .related.products ul.products li.product,
body.single-product.woocommerce.woocommerce.woocommerce .up-sells.upsells.products ul.products li.product {
	display: flex !important;
	flex-direction: column !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;
}

/* Inverted hover, same treatment as Home: dark navy card instead of the
   previous lift + blue-glow-shadow effect. */
body.single-product.woocommerce.woocommerce.woocommerce .related.products ul.products li.product:hover,
body.single-product.woocommerce.woocommerce.woocommerce .up-sells.upsells.products ul.products li.product:hover {
	transform: translateY(-6px) !important;
	background: #000b5e !important;
	border-color: #000b5e !important;
	box-shadow: none !important;
}

/* Product link fills the card's remaining vertical space, same as Home, so
   price/buttons stay pinned to the bottom regardless of title length. */
body.single-product.woocommerce.woocommerce.woocommerce .related.products ul.products li.product > a.woocommerce-loop-product__link,
body.single-product.woocommerce.woocommerce.woocommerce .up-sells.upsells.products ul.products li.product > a.woocommerce-loop-product__link {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	margin: 0 !important;
}

/* Image frame: 2026-07-10, switched from styling the bare <img> directly
   (an approximation) to the exact same span.supra-product-image-frame
   technique Home uses — functions.php's image-wrapping filter now also
   fires on is_product() (see supra_force_start_home_loop_image_frame),
   so this can copy Home's frame parameters value-for-value instead of
   guessing at an equivalent. Solid white background + #E8EDFF border
   (NOT the gradient/#E6EDF8 this file used before — those were leftover
   from the section's OLD Additional CSS values, not actually Home's). */
body.single-product.woocommerce.woocommerce.woocommerce .related.products ul.products li.product .supra-product-image-frame,
body.single-product.woocommerce.woocommerce.woocommerce .up-sells.upsells.products 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;
}

/* Explicit override so the frame stays white on card hover, matching
   Home — otherwise nothing here contradicts the card's own dark-navy
   hover background bleeding visually adjacent to it. */
body.single-product.woocommerce.woocommerce.woocommerce .related.products ul.products li.product:hover .supra-product-image-frame,
body.single-product.woocommerce.woocommerce.woocommerce .up-sells.upsells.products ul.products li.product:hover .supra-product-image-frame {
	background-color: #FFFFFF !important;
	border-color: #E8EDFF !important;
}

/* Inner <img>: no fixed width/height — sizes to its own natural aspect
   ratio (capped by max-width/max-height) and the flex frame centers it,
   exactly like Home, so the product is never stretched or cropped. */
body.single-product.woocommerce.woocommerce.woocommerce .related.products ul.products li.product .supra-product-image-frame img,
body.single-product.woocommerce.woocommerce.woocommerce .up-sells.upsells.products ul.products li.product .supra-product-image-frame img {
	aspect-ratio: auto !important;
	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;
}

/* Title: font-size kept at this section's existing 12.5px (NOT Home's
   16px), per request. Adds the white hover-state color swap from Home. */
body.single-product.woocommerce.woocommerce.woocommerce .related.products ul.products li.product .woocommerce-loop-product__title,
body.single-product.woocommerce.woocommerce.woocommerce .up-sells.upsells.products ul.products li.product .woocommerce-loop-product__title {
	min-height: 60px !important;
	margin: 0 0 14px 0 !important;
	padding: 0 !important;
	color: #050A55 !important;
	font-family: 'LOFT', sans-serif !important;
	font-size: 12.5px !important;
	line-height: 1.16 !important;
	letter-spacing: .05em !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	transition: all 0.2s ease-in-out !important;
}

body.single-product.woocommerce.woocommerce.woocommerce .related.products ul.products li.product:hover .woocommerce-loop-product__title,
body.single-product.woocommerce.woocommerce.woocommerce .up-sells.upsells.products ul.products li.product:hover .woocommerce-loop-product__title {
	color: #FFFFFF !important;
}

/* Price: font-size kept at this section's existing 17px (NOT Home's
   24px), per request. margin-top:auto hugs it to the bottom of the
   flexible link area, same bottom-pinning trick as Home. Adds the
   light-blue hover-state color swap from Home. */
body.single-product.woocommerce.woocommerce.woocommerce .related.products ul.products li.product .price,
body.single-product.woocommerce.woocommerce.woocommerce .up-sells.upsells.products ul.products li.product .price {
	display: block !important;
	margin: auto 0 20px 0 !important;
	color: #2F65F2 !important;
	font-family: 'LOFT', sans-serif !important;
	font-size: 17px !important;
	line-height: 1 !important;
	font-weight: 900 !important;
	font-style: normal !important;
	transition: all 0.2s ease-in-out !important;
}

body.single-product.woocommerce.woocommerce.woocommerce .related.products ul.products li.product:hover .price,
body.single-product.woocommerce.woocommerce.woocommerce .related.products ul.products li.product:hover .price .woocommerce-Price-amount,
body.single-product.woocommerce.woocommerce.woocommerce .up-sells.upsells.products ul.products li.product:hover .price,
body.single-product.woocommerce.woocommerce.woocommerce .up-sells.upsells.products ul.products li.product:hover .price .woocommerce-Price-amount {
	color: #8AB4F8 !important;
}

/* Shared button layout — font-size 11px kept as-is (already matched
   Home's value, so no change needed here). Color/hierarchy split below. */
body.single-product.woocommerce.woocommerce.woocommerce .related.products ul.products li.product .button,
body.single-product.woocommerce.woocommerce.woocommerce .up-sells.upsells.products 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: "Adicionar ao Pedido" — brand blue solid, matching Home. Before
   this file, both buttons here shared one flat #2F65F2 with no hierarchy
   between them; this is the color adjustment requested. */
body.single-product.woocommerce.woocommerce.woocommerce .related.products ul.products li.product > a.add_to_cart_button,
body.single-product.woocommerce.woocommerce.woocommerce .up-sells.upsells.products 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: "Ver Produto" (YITH Quick View) — light-blue tint with dark
   blue text, lower-priority contrast against the solid primary button.
   margin-top:0 overrides Additional CSS's `.button + .button{margin-top:
   10px}` so the 4px gap above (on the primary button) is the only spacing
   between them, matching Home exactly. */
body.single-product.woocommerce.woocommerce.woocommerce .related.products ul.products li.product > a.yith-wcqv-button,
body.single-product.woocommerce.woocommerce.woocommerce .up-sells.upsells.products ul.products li.product > a.yith-wcqv-button {
	background: #E8EDFF !important;
	color: #425fdb !important;
	border: 1px solid transparent !important;
	margin-top: 0 !important;
}

/* Button inversion on card hover, same as Home: both buttons flip the
   instant the whole card lights up, not just on their own individual
   hover. */
body.single-product.woocommerce.woocommerce.woocommerce .related.products ul.products li.product:hover > a.add_to_cart_button,
body.single-product.woocommerce.woocommerce.woocommerce .up-sells.upsells.products ul.products li.product:hover > a.add_to_cart_button {
	background: #FFFFFF !important;
	color: #000b5e !important;
}

body.single-product.woocommerce.woocommerce.woocommerce .related.products ul.products li.product:hover > a.yith-wcqv-button,
body.single-product.woocommerce.woocommerce.woocommerce .up-sells.upsells.products 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.single-product.woocommerce.woocommerce.woocommerce .related.products ul.products li.product:hover > a.add_to_cart_button:hover,
body.single-product.woocommerce.woocommerce.woocommerce .up-sells.upsells.products ul.products li.product:hover > a.add_to_cart_button:hover {
	background-color: #E8EDFF !important;
}

body.single-product.woocommerce.woocommerce.woocommerce .related.products ul.products li.product:hover > a.yith-wcqv-button:hover,
body.single-product.woocommerce.woocommerce.woocommerce .up-sells.upsells.products ul.products li.product:hover > a.yith-wcqv-button:hover {
	background-color: #0a1b8c !important;
}