/* ============================================================
   ignavo-child — site-wide visual overrides
   Cache-busted via filemtime version from functions.php.
   ============================================================ */

/*
 * The page head emits a raw <style> block that re-declares
 * --colors-primary-background and --colors-secondary-background with empty
 * values, wiping the theme's tokens (base.css). Every .variant-primary /
 * .variant-secondary element then loses its background (transparent shell with
 * white text) - e.g. WooCommerce buttons on the My Account page, the account
 * dropdown's "Log In" button.
 * "html:root" outranks the plain ":root" in that inline block regardless of
 * load order, so these site brand colors always win. Values are RGB triplets
 * because the theme composes them via rgb(var(--colors-*)).
 */
html:root {
	--colors-primary-background: 0, 191, 166;
	--colors-secondary-background: 255, 122, 89;
	/*
	 * base.css declares --palette-slate-900 as "15 23, 42" (space instead of
	 * comma), so every var() chain ending in it expands to malformed CSS and the
	 * declaration that consumes it is dropped. --colors-gray-900 is the only
	 * consumer, and it powers .site-overlay (background-color:
	 * rgba(var(--overlay-background), var(--overlay-opacity)) expands to the
	 * invalid "rgba(15 23, 42, 0.3)", so the modal dim rendered fully
	 * transparent). Same silent failure hit .footer-copyright, .footer-info,
	 * .footer-widgets, .price, .site-category, .site-module-header and
	 * .woocommerce-notice. Repair the token at its source; this is the only
	 * malformed value in the palette.
	 */
	--palette-slate-900: 15, 23, 42;
}

/*
 * --colors-primary-background is empty on this site, so custom-style-2's dark
 * header background never applies and its hardcoded white action text
 * ("Welcome" + username on the Account icon) is invisible on the light row.
 * Pin the text to the theme's default dark slate.
 */
.site-header.custom-style-2 .header-main .site-action-button {
	--action-detail-color: #314350;
}

.site-header.custom-style-2 .header-main .site-action-detail,
.site-header.custom-style-2 .header-main .site-action-sublabel,
.site-header.custom-style-2 .header-main .site-action-label {
	color: #314350 !important;
}

/*
 * The header markup contains both a "dark" and a "light" logo image, and the
 * theme-wide rule that hides one is absent in the loaded CSS, so both render
 * side by side. Hide the light variant in the header (dark logo stays).
 */
.site-header .site-brand .light-logo {
	display: none !important;
}

/*
 * Inner pages render header-type1, whose cart/wishlist count badge is colored
 * with rgb(var(--colors-secondary-background)) — a variable the page head
 * wipes to an empty value, so the badge background becomes transparent.
 * Pin the badge to the theme's intended red (homepage custom-style-2 keeps
 * its own yellow badge because that rule has higher specificity).
 */
.site-header .site-action-button .site-action-count {
	--action-count-background-color: #ff7a59;
	--action-count-color: #ffffff;
}

/*
 * Account dropdown: the page head wipes --colors-primary-background, so the
 * logged-out "Log In" button (variant-primary -> rgb(var(--colors-primary-background)))
 * renders transparent with white text, i.e. invisible on the white dropdown.
 * Pin it to the site teal.
 */
.site-header .login-dropdown .button.variant-primary {
	background-color: #00bfa6;
	color: #ffffff;
}

.site-header .login-dropdown .button.variant-primary:hover {
	background-color: #0d2b2b;
}

/*
 * The theme ships no rules for the logged-in account nav inside the header
 * dropdown (only .my-account-inner .myaccount-navigation for the account page),
 * so those links fall back to browser defaults and look unstyled.
 */
.site-header .login-dropdown .myaccount-navigation a {
	display: block;
	padding-block: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #314350;
	text-decoration: none;
}

.site-header .login-dropdown .myaccount-navigation a:hover {
	color: #00bfa6;
}

/*
 * WooCommerce 11.1 show/hide password toggle (login + register forms).
 * Woo injects <span class="password-input"><button class="show-password-input"></button></span>
 * via woocommerce.min.js, but its styling lives in woocommerce-layout.css, which this site does
 * not enqueue - so the button rendered as an unstyled empty box after the password field.
 * These scoped rules restore WooCommerce's own styling and its official eye / eye-slash icons,
 * copied verbatim from woocommerce-layout.css (WC 11.1.2). Scoping to .show-password-input
 * keeps this inert everywhere else, unlike enqueuing the whole WooCommerce layout stylesheet.
 */
.woocommerce form .password-input {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.woocommerce form .password-input input[type="password"] {
	padding-right: 2.5rem;
}

.woocommerce form .show-password-input {
	position: absolute;
	right: .7em;
	top: 50%;
	transform: translateY(-50%);
	/*
	 * WC 11.1's own rule omits width/height and relies on shrink-to-fit. Because
	 * .password-input is a flex container, browsers stretch this absolutely
	 * positioned child to the full field width (measured 470x42 here), which
	 * renders the icon at the field's left edge over the text and bleeds outside
	 * the field. Explicit sizing pins it to the 22x22 icon box on every engine.
	 */
	width: 22px;
	height: 22px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--wc-form-color-text, #000);
	cursor: pointer;
	font-size: inherit;
	line-height: inherit;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
}

.woocommerce form .show-password-input::before {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%23111111"/></svg>');
}

.woocommerce form .show-password-input.display-password::before {
	background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%23111111"/></svg>');
}

/*
 * Garage / Select-Vehicle popup (#klb-attribute-filter): Select2 is inited
 * with width:"resolve" (theme bundle.js customSelect()), which measures the
 * <select> once at page load and freezes it as an inline pixel width on the
 * container. Inside .form-group { display:flex } that select is content-sized
 * (~224px), so the 4 dropdowns sat 176px short of the .w-full (100% = 400px)
 * "Add Vehicle" / "My Vehicles" buttons. The container has no CSS width rule
 * (only the inline style), so force it to fill its .form-group. The dropdown
 * is position:relative + width:100% and follows the container.
 */
.garage-popup .form-group > .select2-container {
	width: 100% !important;
}

/*
 * Elementor "Product Search" widgets (#klb-attribute-filter on the home
 * templates): same width:"resolve" inline freeze as the garage popup, but the
 * widgets have no .garage-popup ancestor. The 4 selects sit 55-148px short of
 * their .form-group row / submit button (e.g. 180px container vs 317px button
 * on /home-car/; 194px vs 249px on /home/), and stay frozen on mobile where
 * the row grows to 328-338px. Scoped to both widget classes so nothing else
 * is touched. Verified on /home-car/, /home-part/, /home-3/, /home/, /home-4/.
 */
.elementor-widget-ignavo-product-search .form-group > .select2-container,
.elementor-widget-ignavo-product-search2 .form-group > .select2-container {
	width: 100% !important;
}