/* =========================================================================
 * Storefront base — structure-only skeleton shared by EVERY tenant.
 *
 * The brand-neutral storefront layer: tile layout tokens plus the category /
 * product grid, card, image and title STRUCTURE, and the single-product price
 * sizing. It reads var(--dp-*) tokens only and carries NO brand hex and NO
 * tenant-specific colour — those live in each tenant's own override sheet
 * (EasyAuto123: ea-storefront.css, printed after this one so it wins).
 *
 * ENQUEUED FOR ALL TENANTS (functions.php dealer_portal_enqueue_storefront_base,
 * ungated), after dealer-portal-style + dealer-portal-woocommerce and before any
 * tenant override. BYD and EasyAuto123 share this one structure layer.
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * 0. Shared tile tokens — the STRUCTURAL, non-brand tile defaults shared by BOTH
 *    the campaign tiles (home grid) and the product tiles (category archive). The
 *    two tile types have different markup (category loop vs Product Collection
 *    block) but read these same tokens, so a change propagates to both at once.
 *
 *    The BRAND-DIFFERENTIATED tile tokens (--dp-tile-pad / -radius / -shadow /
 *    -display / -img-radius / -title-size / -title-weight / -title-margin) are
 *    NOT defined here — their per-tenant DEFAULTS (BYD's golden-master values,
 *    the baseline tenant) are emitted from functions.php
 *    dealer_portal_brand_inline_vars, and EasyAuto123 re-points them in
 *    ea-storefront.css (loaded last). Keeping EA123's literals out of this shared
 *    sheet is what stops BYD tiles rendering EA123's look.
 * ---------------------------------------------------------------------- */
:root {
	--dp-tile-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.1);
	--dp-tile-title-line-height: 1.5;
	--dp-tile-title-align: center;
}

/* -------------------------------------------------------------------------
 * 1. Category / product grid + tile skeleton. Covers BOTH tile contexts: the
 *    home campaign tiles (classic WooCommerce category loop,
 *    li.product-category) and the category-archive product tiles (Product
 *    Collection block, li.wc-block-product). Different markup, identical
 *    structure — every shared value is grouped onto both selectors or read from
 *    a --dp-tile-* token, so the two can never drift. Brand skin (card fill /
 *    border colour, title colour, image mat colour) lives in the tenant override.
 * ---------------------------------------------------------------------- */

/* Grid: comfortable card width, even gap, reflow to fewer columns down the
 * breakpoints with no media queries. auto-fill + minmax lets the cards breathe
 * and collapse responsively. This is a LOW-SPECIFICITY default (0,1,1): a tenant's
 * own higher-specificity grid rule (e.g. style.css `.home .woocommerce ul.products`,
 * which fixes the home grid to 6 columns) wins on normal cascade, no !important. */
.woocommerce ul.products {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 24px;
}

/* CARD BOX — ONE rule shared by BOTH tile types. The layout mode is a token
 * (--dp-tile-display): BYD renders the plain block grid-item it always did, EA123
 * re-points it to a flex column (where flex-direction + gap:0 then apply, so the
 * ONLY space above the title is its margin token). The border is token-driven
 * (var --dp-tile-border, default none) so a tenant adds its own; radius/shadow beat
 * WooCommerce's own tile rules on specificity (the campaign-tile selector is
 * weighted above style.css `.home .woocommerce ul.products > li.product`, and the
 * Product Collection selector above `.wp-block-woocommerce-product-collection
 * .wc-block-product`), so no !important is needed. Every brand value is a token;
 * the per-tenant defaults live in functions.php (BYD) + ea-storefront.css (EA123). */
.woocommerce.woocommerce.woocommerce ul.products li.product-category,
.wc-block-product-template li.product.wc-block-product {
	display: var(--dp-tile-display);
	flex-direction: column;
	gap: 0;
	margin: 0;
	border: var(--dp-tile-border);
	border-radius: var(--dp-tile-radius);
	box-shadow: var(--dp-tile-shadow);
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Card inset is CAMPAIGN-TILE ONLY (--dp-tile-pad; BYD default 0). The base must
 * NOT set the product card's padding: BYD's own woocommerce/style rule gives the
 * product card a 1rem bottom inset below its title, and a shared padding here (at
 * higher specificity) would zero it. A tenant that wants a product-card inset sets
 * it in its own sheet. */
.woocommerce.woocommerce.woocommerce ul.products li.product-category {
	padding: var(--dp-tile-pad);
}

/* Hover: subtle lift + slightly stronger shadow (shared). */
.woocommerce.woocommerce.woocommerce ul.products li.product-category:hover,
.wc-block-product-template li.product.wc-block-product:hover {
	transform: translateY(-2px);
	box-shadow: var(--dp-tile-shadow-hover);
}

/* Campaign tile only: the single <a> is the whole clickable card body, a flex
 * column so the image sits at the top and the title under it. */
.woocommerce ul.products li.product-category > a {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
	text-decoration: none;
}

/* IMAGE WRAPPER (shared): a block box with zeroed inline metrics, so the only gap
 * below the image is the title's margin token, not an inline-baseline strip. */
.woocommerce ul.products li.product-category .dth-cat-thumb,
.wc-block-product-template li.product.wc-block-product .wc-block-components-product-image {
	display: block;
	position: relative;
	margin: 0;
	font-size: 0;
	line-height: 0;
}

/* The block tile wraps its image in an <a>; make it block + full width so the
 * image fills the frame exactly like the campaign thumb. */
.wc-block-product-template li.product.wc-block-product .wc-block-components-product-image a {
	display: block;
	width: 100%;
}

/* IMAGE FRAME (shared): neutral image structure ONLY — block, full tile width,
 * the inset radius token. The base deliberately does NOT set how the image is
 * fitted (no aspect-ratio / object-fit / object-position): that is a brand decision
 * each tenant owns in its own sheet. BYD's woocommerce.css letterboxes the product
 * image inside a 300/420 white box (object-fit: contain) and leaves campaign art at
 * its natural ratio; EA123 re-imposes its 3:4 top-cover in ea-storefront.css. */
.woocommerce ul.products li.product-category .dth-cat-thumb img,
.wc-block-product-template li.product.wc-block-product .wc-block-components-product-image img {
	display: block;
	width: 100%;
	border-radius: var(--dp-tile-img-radius);
}

/* TILE NAME (shared): centered, same size/weight/line-height from the tokens. The
 * gap above = the --dp-tile-title-margin token (BYD default 0, EA123 16px), nothing
 * else. Weight beats WooCommerce's own loop-title weight on specificity (the
 * campaign-title selector is weighted above style.css `.home .woocommerce
 * ul.products > li.product .woocommerce-loop-category__title`), so no !important is
 * needed. Colour comes from the tenant override. */
.woocommerce.woocommerce.woocommerce ul.products li.product-category .woocommerce-loop-category__title,
.wc-block-product-template li.product.wc-block-product .wp-block-post-title {
	display: block;
	padding: 0;
	background: none;
	font-size: var(--dp-tile-title-size);
	font-weight: var(--dp-tile-title-weight);
	line-height: var(--dp-tile-title-line-height);
	letter-spacing: normal;
	text-transform: none;
	text-align: var(--dp-tile-title-align);
}

/* Campaign tile only: the classic loop has no WP block-gap, so the title's top
 * offset is the --dp-tile-title-margin token (BYD 0). The PRODUCT tile deliberately
 * keeps NO base margin, so WordPress's natural block-gap (17px) sets the image-to-
 * title spacing exactly as live does; a tenant that wants a different product-title
 * offset sets it on its own override sheet. */
.woocommerce.woocommerce.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
	margin: var(--dp-tile-title-margin) 0 0;
}

/* WooCommerce can append a product count <mark> to the campaign title; hide it. */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count {
	display: none;
}

/* -------------------------------------------------------------------------
 * 2. Single product — big bold price sizing per the vehicle-card price
 *    treatment. Colour is the token (var --dp-body) so each tenant keeps its own.
 * ---------------------------------------------------------------------- */
.single-product .dth-single-product .wp-block-woocommerce-product-price,
.single-product .dth-single-product .wp-block-woocommerce-product-price .woocommerce-Price-amount {
	font-size: 30px;
	font-weight: 800;
	color: var(--dp-body);
}