/**
 * ControlUnits — product tile (loop) styling.
 *
 * Loaded on shop / category / tag / search pages and wherever the loop
 * override (content-product-fw-button.php) renders — that includes the
 * "Similar products" carousel on our single-product layout, which uses the
 * very same template, so every rule here applies to both places by design.
 *
 * Loop style in Theme Settings: "Full width button" (value: fw-button). On
 * top of it the child theme adds the "CU Custom" variant (const
 * CU_TILE_VARIANT in functions.php, class cu-tile--cu-custom on the wrapper)
 * — every deviation from the stock look is keyed on that class.
 *
 * This file is the ONLY place for tile styling in the child theme.
 *
 *   div.wd-product-wrapper.product-wrapper[.cu-tile--cu-custom] — whole tile (flex column)
 *     div.wd-product-card-bg                        — theme's hover "card" (disabled)
 *     div.wd-product-thumb.product-element-top      — image area
 *       a.wd-product-img-link                       — image link
 *       div.wd-buttons                              — corner icons (wishlist / compare / quick view)
 *     div.product-element-bottom  (flex column)     — text area
 *       div.cu-tile-title > h3.wd-entities-title    — title (wrapper is ours: overlay anchor)
 *       div.vcm-listing-info                        — "All vehicles" / "Years: …"
 *       div.wrap-price > span.price                 — price
 *       div.cu-tile-sku (label + val)               — SKU pill (our markup)
 *       div.wd-add-btn > a.button                   — "Start Your Repair" (pill-styled)
 */

/* ---------------------------------------------------------------------------
 * Design tokens — change colours, radii and spacing here first; the element
 * rules below consume them.
 * ------------------------------------------------------------------------ */
.wd-product-wrapper {
	--cu-tile-bg: #ffffff;
	--cu-tile-radius: var(--wd-brd-radius, 5px);   /* same corner as the category grid draws */
	--cu-tile-pad: 0px;
	--cu-tile-accent: #be1622;      /* ControlUnits red */
	--cu-line: #e7e8ec;             /* product-page hairline */
	--cu-ink: #1c1d20;              /* product-page text */

	/* title — the overlay copies these so the full title looks like the clamped one */
	--cu-title-lines: 2;
	--cu-title-lh: 1.4;
	--cu-title-font: "Inter Tight", Arial, Helvetica, sans-serif;
	--cu-title-size: 15px;
	--cu-title-weight: 400;
	--cu-title-color: #000000;

	/* vehicle listing info ("Years: …") */
	--cu-info-font: 13px;
	--cu-info-bg: #f5f5f5;
	--cu-info-radius: 5px;
	--cu-info-icon: var(--cu-tile-accent);

	/* SKU pill — the product page's amber pill, one size down */
	--cu-sku-font: 10px;
	--cu-sku-radius: 5px;
	--cu-sku-border: #f0c99a;
	--cu-sku-label-bg: #f27d26;
	--cu-sku-label-color: #ffffff;
	--cu-sku-val-bg: #fff7ed;
	--cu-sku-val-color: #9a4a06;

	/* "Start Your Repair" — the product page's "Common faults" pill (.cu-sp-link) */
	--cu-btn-border: 1px solid var(--cu-line);
	--cu-btn-radius: 7px;
	--cu-btn-color: var(--cu-ink);
	--cu-btn-hover: var(--cu-tile-accent);   /* border + text on hover, like the pill */
	--cu-btn-icon: var(--cu-tile-accent);
	--cu-btn-font: 13px;
	--cu-btn-pad: 7px 13px;
	--cu-btn-gap: 8px;
}

/* --- whole tile ----------------------------------------------------------
 * White painted here, not through WoodMart's "products background" option:
 * that option only sets --wd-prod-bg inside the theme's own sections
 * (.related-and-upsells etc.), so tiles in our .cu-sp-related carousel fell
 * back to the theme's grey. Painting the wrapper directly covers both.
 * The radius fixes the related carousel: the theme rounds the wrapper only
 * inside its bordered grids, so the carousel tiles were square.
 * ------------------------------------------------------------------------ */
.wd-product-wrapper {
	background-color: var(--cu-tile-bg);
	border-radius: var(--cu-tile-radius);
	padding: var(--cu-tile-pad);
}

/* --- variant: CU Custom — no tile hover at all --------------------------
 * fw-button gets "hover with fade" from the theme: the tile lifts 5px, a
 * white "card" (.wd-product-card-bg) fades in around it, the corner icons
 * slide in, and the button swaps its text for an icon. All of it off:
 * ------------------------------------------------------------------------ */
.wd-product .wd-product-wrapper.cu-tile--cu-custom,
.wd-product:hover .wd-product-wrapper.cu-tile--cu-custom {
	transform: none !important;
	transition: none !important;
}
.wd-product-wrapper.cu-tile--cu-custom .wd-product-card-bg,
.wd-product-wrapper.cu-tile--cu-custom .wd-product-card-hover {
	display: none !important;
}
/* corner icons (wishlist / compare / quick view): always there, no slide-in, and
   no white card — the bare look the theme gives .wd-buttons in its
   buttons-on-hover style (background:none; box-shadow:none, 60% opacity).
   WoodMart 8.5's generic .wd-buttons rule adds a white card + 1px shadow,
   which the fw-button style inherits. */
.wd-product .wd-product-wrapper.cu-tile--cu-custom .wd-buttons {
	opacity: .6 !important;
	visibility: visible !important;
	transform: none !important;
	transition: none !important;
	background: none !important;
	box-shadow: none !important;
}
.wd-product .wd-product-wrapper.cu-tile--cu-custom .wd-buttons:hover {
	opacity: 1 !important;
}
/* Corner placement as in the theme's buttons-on-hover style, which sets
   --wd-btn-inset:0 (fw-button inherits the 10px default), and a smaller hit box:
   the theme's own compact corner size (35px, its <=1024px value) instead of the
   desktop 50x45; the heart glyph itself stays 20px. */
.wd-product .wd-product-wrapper.cu-tile--cu-custom {
	--wd-btn-inset: 0;
}
.wd-product .wd-product-wrapper.cu-tile--cu-custom .wd-buttons .wd-action-btn {
	--wd-action-w: 35px;
	--wd-action-h: 35px;
}

/* --- "Start Your Repair" — same look as the product page's Common-faults pill
 * Markup is WoodMart's loop button: <a class="button …"><span class="wd-action-icon">…</span>
 * <span class="wd-action-text">Start Your Repair</span></a>. The template drops
 * WoodMart's wd-add-btn-replace class, so no text/icon slide and no spinner
 * pseudo-elements; the theme's own icon span is hidden and the pill's wrench
 * is drawn with Font Awesome (already loaded for the listing-info car icon).
 * Keyed on the wrapper + variant class: (0,5,1) outranks the theme's (0,3,1).
 * ------------------------------------------------------------------------ */
.wd-product.wd-hover-fw-button .wd-product-wrapper.cu-tile--cu-custom .wd-add-btn > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cu-btn-gap);
	width: 100%;
	min-height: 0;
	padding: var(--cu-btn-pad);
	background-color: transparent;
	border: var(--cu-btn-border);
	border-radius: var(--cu-btn-radius) !important;   /* a theme .button rule sets 6px */
	box-shadow: none;
	box-sizing: border-box;
	color: var(--cu-btn-color);
	font-size: var(--cu-btn-font);
	font-weight: 600;
	line-height: 1.6;                                  /* pill on the product page is 37px tall */
	text-transform: uppercase;
	letter-spacing: .04em;
	transition: border-color .15s, color .15s;
}
.wd-product.wd-hover-fw-button .wd-product-wrapper.cu-tile--cu-custom .wd-add-btn > a::before {
	content: "\f7d9";                          /* fa-tools: icon set A, crossed tools = repair */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 15px;
	line-height: 1;
	color: var(--cu-btn-icon);
}
.wd-product.wd-hover-fw-button .wd-product-wrapper.cu-tile--cu-custom .wd-add-btn > a .wd-action-icon {
	display: none !important;
}
.wd-product.wd-hover-fw-button .wd-product-wrapper.cu-tile--cu-custom .wd-add-btn > a .wd-action-text {
	display: inline !important;
	min-height: 0;
	height: auto;
	padding: 0;
	line-height: inherit;
	font-size: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wd-product.wd-hover-fw-button .wd-product-wrapper.cu-tile--cu-custom .wd-add-btn > a:hover,
.wd-product.wd-hover-fw-button .wd-product-wrapper.cu-tile--cu-custom .wd-add-btn > a:focus-visible {
	background-color: transparent !important;
	border-color: var(--cu-btn-hover) !important;
	color: var(--cu-btn-hover) !important;
	box-shadow: none !important;
}

/* --- image area ---------------------------------------------------------- */
.wd-product-wrapper .wd-product-thumb {
}

/* --- title ---------------------------------------------------------------
 * Two lines with an ellipsis, everywhere. WoodMart's own "title lines limit"
 * only reaches grids that carry a .title-line-* class — the category archive
 * grid does not, so titles ran to 3–4 lines there. Specificity is raised
 * above the theme's [class*=title-line-] rule and its max-height neutralised.
 * The full title appears on hover as an overlay (see .cu-title-clamped) —
 * painted over the tile rather than expanding it, so the grid never jumps.
 * ------------------------------------------------------------------------ */
.wd-product .wd-product-wrapper .product-element-bottom .wd-entities-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--cu-title-lines);
	line-clamp: var(--cu-title-lines);
	overflow: hidden;
	max-height: none;
	line-height: var(--cu-title-lh);
}
.wd-product-wrapper .cu-tile-title,
.wd-product-wrapper .wd-product-header {
	position: relative;
}
.wd-product-wrapper .cu-tile-title.cu-title-clamped:hover,
.wd-product-wrapper .wd-product-header.cu-title-clamped:hover {
	z-index: 30;
}
.wd-product-wrapper .cu-tile-title.cu-title-clamped:hover::after,
.wd-product-wrapper .wd-product-header.cu-title-clamped:hover::after {
	content: attr(data-cu-full-title);
	position: absolute;
	left: -8px;
	right: -8px;
	top: -6px;
	z-index: 30;
	padding: 6px 8px;
	background: #ffffff;
	border: 1px solid var(--cu-line);
	border-radius: 6px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
	/* same face as the title itself — not bold */
	font-family: var(--cu-title-font);
	font-size: var(--cu-title-size);
	font-weight: var(--cu-title-weight);
	line-height: var(--cu-title-lh);
	color: var(--cu-title-color);
	white-space: normal;
	text-align: start;
	pointer-events: none;   /* clicks still reach the title link underneath */
}

/* --- vehicle listing info (VCM): "All vehicles" / "Years: 2006-2014" ------
 * VCM ships these rules in frontend-search.css, which only loads on shop /
 * category / tag pages — on the product page the related tiles rendered it
 * bare. Owning the rules here makes both places identical.
 * ------------------------------------------------------------------------ */
.wd-product-wrapper .vcm-listing-info {
	font-size: var(--cu-info-font) !important;
	background-color: var(--cu-info-bg);
	padding: 3px 5px;
	border-radius: var(--cu-info-radius);
}
.wd-product-wrapper .vcm-listing-info span {
	font-weight: 600;
}
.wd-product-wrapper .vcm-listing-info .fas {
	color: var(--cu-info-icon);
}

/* --- price --------------------------------------------------------------- */
.wd-product-wrapper .wrap-price .price {
}

/* --- SKU pill ------------------------------------------------------------
 * Same two-tone pill as the product page (.cu-sp-v2 .cu-sp-sku), scaled to
 * the tile. The text area is a flex COLUMN (theme gap handles spacing), which
 * would stretch an inline-flex pill to full width — align-self + fit-content
 * keep it snug.
 * ------------------------------------------------------------------------ */
.wd-product-wrapper .cu-tile-sku {
	display: inline-flex;
	align-items: stretch;
	align-self: flex-start;
	width: fit-content;
	margin: 0;
	border: 1px solid var(--cu-sku-border);
	border-radius: var(--cu-sku-radius);
	overflow: hidden;
	font-size: var(--cu-sku-font);
	line-height: 1.6;
}
/* SKU pill on the price row (fw-button .wrap-price is a flex row with
   space-between): right-aligned and vertically centred against the price. */
.wd-product-wrapper .wrap-price .cu-tile-sku {
	align-self: center;
	/* 2px 0 -3px mirrors WoodMart's own .price margins in this row, so the pill
	   text and the price text share one optical centre (measured: 2.5px apart
	   without it). margin-left:auto keeps the pill on the right. */
	margin: 2px 0 -3px auto;
}

.wd-product-wrapper .cu-tile-sku-label {
	background: var(--cu-sku-label-bg);
	color: var(--cu-sku-label-color);
	padding: 1px 6px 1px 7px;
	font-weight: 700;
	letter-spacing: .05em;
}
.wd-product-wrapper .cu-tile-sku-val {
	background: var(--cu-sku-val-bg);
	color: var(--cu-sku-val-color);
	padding: 1px 7px 1px 6px;
	font-weight: 600;
}

/* --- narrow screens ------------------------------------------------------ */
@media (max-width: 782px) {
	.wd-product-wrapper {
	}
}