/*
Theme Name: DFI2026 Child
Theme URI: https://dfiproductions.com
Template: dfi2026
Author: DFI Productions
Author URI: https://dfiproductions.com
Description: Child theme of DFI2026. Put site-specific customizations here so the parent theme stays clean and updatable.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dfi2026-child
*/

/* ---------------------------------------------------------------------------
 * Site-specific CSS goes below.
 *
 * This file loads AFTER the parent's style.css and after the parent's
 * generated inline CSS (the :root variable blocks from Typography, Top Bar,
 * Header Nav, Mobile Menu, Footer and Blog options), so a plain rule here
 * beats the parent at equal specificity -- no !important needed.
 *
 * To retune the theme's design tokens rather than override rules, redeclare
 * the variables:
 *
 *   :root {
 *       --dfi-footer-bg: #202a4d;
 *       --dfi-nav-hover-color: #cb2c31;
 *   }
 *
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * WooCommerce accent color.
 *
 * WooCommerce's own stylesheet (assets/css/woocommerce.css) hard-codes its
 * purple brand color (#7f54b3 / #7249a4 hover) directly on the "alt" button
 * style -- the Add to Cart / Place Order / Proceed to Checkout buttons -- and
 * on the price-filter widget's slider handle. It's not driven by the
 * --wc-primary custom property those hex values shadow, so redeclaring the
 * variable alone wouldn't touch the buttons; both need setting. Selectors
 * mirror WooCommerce's own (same specificity), and this file loads after
 * woocommerce-general-css, so no !important is needed.
 * ------------------------------------------------------------------------ */

:root {
	--woocommerce: #086bbc;
	--wc-primary: #086bbc;
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: #086bbc;
	color: #fff;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: #06579a;
	color: #fff;
}

.woocommerce #respond input#submit.alt.disabled,
.woocommerce #respond input#submit.alt.disabled:hover,
.woocommerce #respond input#submit.alt:disabled,
.woocommerce #respond input#submit.alt:disabled:hover,
.woocommerce a.button.alt.disabled,
.woocommerce a.button.alt.disabled:hover,
.woocommerce a.button.alt:disabled,
.woocommerce a.button.alt:disabled:hover,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled:hover,
.woocommerce input.button.alt.disabled,
.woocommerce input.button.alt.disabled:hover,
.woocommerce input.button.alt:disabled,
.woocommerce input.button.alt:disabled:hover {
	background-color: #086bbc;
	color: #fff;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle,
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
	background-color: #086bbc;
}

/* ---------------------------------------------------------------------------
 * Product loop cards (shop grid, category archives, related/upsell grids --
 * anywhere WooCommerce renders content-product.php's <ul class="products">).
 *
 * WooCommerce's default here is a bare float grid (li.product floated at a
 * percentage width per .columns-N) with no card treatment at all. Swapping
 * to CSS Grid replaces that whole float/percentage/nth-child system with one
 * rule that also reflows responsively on its own, so the columns-N smallscreen
 * overrides in woocommerce-smallscreen.css no longer need fighting.
 *
 * li.product keeps WooCommerce's own position:relative (untouched here, so
 * the .onsale badge's position:absolute still resolves against the card),
 * and becomes a flex column so a short title doesn't leave the price/button
 * floating mid-card -- .price's margin-top:auto pins it to the bottom of the
 * product link, and Grid's default row-stretch keeps every card in a row the
 * same height regardless of title length.
 * ------------------------------------------------------------------------ */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1.75rem;
	margin: 0 0 2.5rem;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e6e8eb;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(20, 30, 40, 0.05);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	transform: translateY(-6px);
	border-color: #086bbc;
	box-shadow: 0 18px 32px rgba(8, 107, 188, 0.18);
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: inherit;
	text-decoration: none;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	display: block;
	margin: 0;
	padding: 1.75rem;
	box-sizing: border-box;
	background: #f4f6f8;
	box-shadow: none;
	transition: transform 0.35s ease;
}

.woocommerce ul.products li.product:hover a.woocommerce-loop-product__link img {
	transform: scale(1.06);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 1.1rem 1.1rem 0.35rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: #1a1a1a;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s ease;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	color: #086bbc;
}

.woocommerce ul.products li.product .star-rating {
	margin: 0 1.1rem 0.5rem;
}

.woocommerce ul.products li.product .price {
	margin: 0;
	padding: 0 1.1rem 1.1rem;
	margin-top: auto;
	font-size: 1.2rem;
	font-weight: 700;
	color: #086bbc;
}

.woocommerce ul.products li.product .price del {
	margin-right: 0.4em;
	font-size: 0.85em;
	font-weight: 400;
	color: #9a9a9a;
	opacity: 1;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	right: auto;
	z-index: 2;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0.3em 0.8em;
	border-radius: 999px;
	background-color: #d64545;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.woocommerce ul.products li.product a.button {
	display: block;
	margin: 0 1.1rem 1.1rem;
	padding: 0.6em 1em;
	border: 1.5px solid #086bbc;
	border-radius: 999px;
	background-color: transparent;
	color: #086bbc;
	font-weight: 600;
	text-align: center;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce ul.products li.product a.button:hover {
	background-color: #086bbc;
	color: #fff;
}

.woocommerce ul.products li.product a.added_to_cart.wc-forward {
	display: block;
	margin: 0 1.1rem 1.1rem;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: center;
	color: #086bbc;
}

/* ---------------------------------------------------------------------------
 * Vehicle-finder results grid (.apf-results / .apf-card), from the
 * ymm-fitment-foundation plugin's [auto_parts_results] shortcode -- e.g.
 * /find-parts/?fy=2022&fmk=Ford. This is a separate, custom-built product
 * grid (its own markup, not WooCommerce's ul.products li.product), used
 * whenever a shopper searches by Year/Make/Model instead of browsing the
 * shop, so the card styling above never reached it -- it needs its own
 * matching rules here.
 *
 * The shortcode itself prints a small inline <style> block right after
 * .apf-results in the page (see ymm_results_shortcode() in the plugin), as
 * a "safe to override" placeholder. Inline <style> in the body still beats
 * an external stylesheet in <head> at equal selector specificity, since it
 * comes later in the document -- so selectors below add an extra type
 * selector (div.apf-results, div.apf-card, a.apf-card-img img) purely to
 * outrank it; no !important needed.
 * ------------------------------------------------------------------------ */

div.apf-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1.75rem;
	margin: 1.5rem 0 2.5rem;
}

div.apf-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: #fff;
	border: 1px solid #e6e8eb;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(20, 30, 40, 0.05);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

div.apf-card:hover {
	transform: translateY(-6px);
	border-color: #086bbc;
	box-shadow: 0 18px 32px rgba(8, 107, 188, 0.18);
}

a.apf-card-img {
	display: block;
}

a.apf-card-img img {
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0;
	padding: 1.75rem;
	box-sizing: border-box;
	background: #f4f6f8;
	transition: transform 0.35s ease;
}

div.apf-card:hover a.apf-card-img img {
	transform: scale(1.06);
}

a.apf-card-title {
	padding: 1.1rem 1.1rem 0.35rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: #1a1a1a;
	text-decoration: none;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s ease;
}

div.apf-card:hover a.apf-card-title {
	color: #086bbc;
}

div.apf-card-price {
	padding: 0 1.1rem 1.1rem;
	margin-top: auto;
	font-size: 1.2rem;
	font-weight: 700;
	color: #086bbc;
}

a.apf-card-btn {
	display: block;
	margin: 0 1.1rem 1.1rem;
	padding: 0.6em 1em;
	border: 1.5px solid #086bbc;
	border-radius: 999px;
	background-color: transparent;
	color: #086bbc;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

a.apf-card-btn:hover {
	background-color: #086bbc;
	color: #fff;
}

p.apf-results-summary {
	font-size: 1.05rem;
	color: #444;
}

p.apf-results-summary strong {
	color: #086bbc;
}