/**
 * KAUFLOND — Product card
 *
 * Scope: WoodMart's `standard` product loop item (`.wd-product.wd-hover-standard`).
 * Structure and behaviour are WoodMart's; this file restyles proportion,
 * density and hierarchy and reorders the info column with flex `order` so no
 * template is overridden.
 *
 * Target order (top → bottom):
 *   image (+ native sale/new label, wishlist)
 *   editorial badge · brand · title · rating · shipping · price · add-to-cart
 *
 * All values from tokens.css. No raw colours, spacing or radii.
 *
 * @package Kauflond
 */

/* =========================================================================
 * 1. CARD SHELL
 *
 * WoodMart's bordered-grid (inside) draws the cell border; we tune colour,
 * radius and padding here so the card reads as a clean white tile with a
 * subtle edge — no drop shadow at rest.
 * ====================================================================== */

.wd-products.products-bordered-grid-ins .wd-product {
	--wd-bordered-brd: var(--kfl-color-border);
	background: var(--kfl-color-surface);
	border-radius: var(--kfl-radius-md);
}

.wd-product.wd-hover-standard .product-wrapper {
	padding: var(--kfl-space-3);
	text-align: start;
}

/* Restrained hover: edge deepens, nothing lifts or hides. */
.wd-product.wd-hover-standard:hover {
	--wd-bordered-brd: var(--kfl-color-border-strong);
}

.wd-product.wd-hover-standard:hover .product-wrapper {
	box-shadow: none;
}

/* =========================================================================
 * 2. IMAGE AREA
 *
 * A stable square box with `object-fit: contain`: bicycles, lifts, phones and
 * cat trees all fit without cropping and without layout shift.
 * ====================================================================== */

.wd-product .product-element-top {
	margin-bottom: var(--kfl-space-3);
}

.wd-product .product-image-link {
	display: block;
	aspect-ratio: 1 / 1;
	padding: var(--kfl-space-2);
	background: var(--kfl-color-surface);
	border-radius: var(--kfl-radius-sm);
	overflow: hidden;
}

.wd-product .product-image-link img,
.wd-product .hover-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* WoodMart's hover image is absolutely positioned over the link; keep the same box. */
.wd-product .hover-img {
	inset: 0;
	padding: var(--kfl-space-2);
}

/* =========================================================================
 * 3. IMAGE OVERLAYS — native WoodMart labels, wishlist
 * ====================================================================== */

.wd-product .product-labels {
	inset-inline-start: var(--kfl-space-2);
	top: var(--kfl-space-2);
	gap: var(--kfl-space-1);
}

.wd-product .product-label {
	min-height: 0;
	padding: 3px var(--kfl-space-2);
	border-radius: var(--kfl-radius-sm);
	font-size: var(--kfl-font-size-xs);
	font-weight: var(--kfl-font-weight-bold);
	line-height: var(--kfl-line-height-tight);
	letter-spacing: .02em;
	text-transform: uppercase;
}

.wd-product .product-label.onsale {
	background: var(--kfl-color-sale);
	color: var(--kfl-color-sale-on);
}

.wd-product .product-label.new {
	background: var(--kfl-color-brand-secondary);
	color: var(--kfl-color-brand-on-secondary);
}

/* Wishlist: compact, top-right, ALWAYS visible.
 *
 * WoodMart reveals `.wd-buttons` on hover only (opacity 0 / hidden / slide-in,
 * one rule with !important). Hover-reveal hides the wishlist control from
 * every touch user, and the brief requires it to remain accessible — so this
 * is one of the documented, deliberate !important overrides. */
.wd-product.wd-hover-standard .wd-buttons[class*="wd-pos-r"] {
	inset-inline-end: var(--kfl-space-2);
	top: var(--kfl-space-2);
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

.wd-product .wd-buttons .wd-action-btn > a {
	width: 36px;
	height: 36px;
	border-radius: var(--kfl-radius-md);
	background: var(--kfl-color-surface);
	border: var(--kfl-border-width) solid var(--kfl-color-border);
	color: var(--kfl-color-text-primary);
}

.wd-product .wd-buttons .wd-action-btn > a:hover,
.wd-product .wd-buttons .wd-wishlist-btn.added > a {
	color: var(--kfl-color-brand-primary);
	border-color: var(--kfl-color-brand-primary);
}

/* =========================================================================
 * 4. INFO COLUMN — order and density
 * ====================================================================== */

.wd-product.wd-hover-standard .product-element-bottom {
	display: flex;
	flex-direction: column;
	gap: var(--kfl-space-1);
	text-align: start;
}

.wd-product .kfl-card-badge         { order: 1; }
.wd-product .wd-product-brands-links { order: 2; }
.wd-product .wd-entities-title      { order: 3; }
.wd-product .wd-product-rating,
.wd-product .star-rating            { order: 4; }
.wd-product .wd-product-stock       { order: 5; }
.wd-product .kfl-card-meta          { order: 6; }
.wd-product .price                  { order: 7; }
.wd-product .wd-add-btn             { order: 8; margin-top: auto; }

/* Editorial badge: inline text label in the info area, never over the image. */
.wd-product .kfl-card-badge {
	align-self: flex-start;
}

.wd-product .kfl-badge--top-angebot,
.wd-product .kfl-badge--preis-tipp  { background: var(--kfl-color-accent); color: var(--kfl-color-accent-contrast); }
.wd-product .kfl-badge--bestseller  { background: var(--kfl-color-brand-secondary); color: var(--kfl-color-brand-on-secondary); }
.wd-product .kfl-badge--neu         { background: var(--kfl-color-info-bg); color: var(--kfl-color-brand-secondary); }

/* Brand */
.wd-product .wd-product-brands-links {
	margin: 0;
	font-size: var(--kfl-font-size-sm);
	line-height: var(--kfl-line-height-snug);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.wd-product .wd-product-brands-links a {
	color: var(--kfl-color-text-muted);
}

.wd-product .wd-product-brands-links a:hover {
	color: var(--kfl-color-brand-primary);
}

/* Title: two-line clamp is WoodMart's (`title-line-two`); we set the type. */
.wd-product .wd-entities-title {
	margin: 0;
	font-size: var(--kfl-font-size-base);
	font-weight: var(--kfl-font-weight-medium);
	line-height: var(--kfl-line-height-snug);
	text-transform: none;
	letter-spacing: 0;
	min-height: calc(2 * var(--kfl-font-size-base) * var(--kfl-line-height-snug));
}

.wd-product .wd-entities-title a {
	color: var(--kfl-color-text-primary);
}

.wd-product .wd-entities-title a:hover {
	color: var(--kfl-color-brand-primary);
}

/* Rating: only rendered when reviews exist. Keep it small and left-aligned. */
.wd-product .wd-product-rating,
.wd-product .star-rating {
	margin: 0;
	font-size: var(--kfl-font-size-sm);
}

.wd-product .wd-product-rating .star-rating {
	--wd-star-color: var(--kfl-color-accent-hover);
}

/* Stock line (native, only when enabled/relevant) */
.wd-product .wd-product-stock {
	font-size: var(--kfl-font-size-sm);
	margin: 0;
}

/* Shipping line */
.wd-product .kfl-card-meta {
	margin: 0;
}

/* =========================================================================
 * 5. PRICE HIERARCHY
 *
 * WooCommerce markup: <del> former price, <ins> current price. Current price
 * is the loudest element on the card; the former price is quiet and struck.
 * German formatting comes from WooCommerce's currency settings, untouched.
 * ====================================================================== */

.wd-product .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--kfl-space-2);
	margin: var(--kfl-space-1) 0 0;
	font-size: var(--kfl-font-size-lg);
	font-weight: var(--kfl-font-weight-bold);
	line-height: var(--kfl-line-height-tight);
	color: var(--kfl-color-price);
}

.wd-product .price del {
	order: 2;
	font-size: var(--kfl-font-size-sm);
	font-weight: var(--kfl-font-weight-normal);
	color: var(--kfl-color-price-old);
	text-decoration: line-through;
}

.wd-product .price ins {
	order: 1;
	text-decoration: none;
	color: var(--kfl-color-price-sale);
}

/* Variable products: "1.299,00 € – 1.499,00 €" — keep it on one visual weight. */
.wd-product .price .amount + .amount::before {
	content: none;
}

/* =========================================================================
 * 6. ADD-TO-CART — native button, compact styling only
 *
 * Only presentation. The element, its classes, data attributes, href and the
 * AJAX behaviour are WooCommerce/WoodMart's own.
 * ====================================================================== */

.wd-product.wd-hover-standard .wd-add-btn {
	margin-top: var(--kfl-space-2);
}

.wd-product.wd-hover-standard .wd-add-btn > .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--kfl-btn-height-sm);
	padding-inline: var(--kfl-space-3);
	border-radius: var(--kfl-radius-md);
	font-size: var(--kfl-font-size-sm);
	font-weight: var(--kfl-font-weight-bold);
	text-transform: none;
	letter-spacing: 0;
	background: var(--kfl-color-brand-primary);
	color: var(--kfl-color-brand-on-primary);
	box-shadow: none;
}

.wd-product.wd-hover-standard .wd-add-btn > .button:hover {
	background: var(--kfl-color-brand-primary-hover);
	color: var(--kfl-color-brand-on-primary);
}

/* Variable / not-purchasable: secondary treatment so the primary CTA stays
 * reserved for a real one-click add. */
.wd-product.wd-hover-standard .wd-add-btn > .button.product_type_variable,
.wd-product.wd-hover-standard .wd-add-btn > .button:not(.ajax_add_to_cart) {
	background: var(--kfl-color-surface);
	color: var(--kfl-color-text-primary);
	border: var(--kfl-border-width) solid var(--kfl-color-border-strong);
}

.wd-product.wd-hover-standard .wd-add-btn > .button.product_type_variable:hover,
.wd-product.wd-hover-standard .wd-add-btn > .button:not(.ajax_add_to_cart):hover {
	border-color: var(--kfl-color-brand-primary);
	color: var(--kfl-color-brand-primary);
}

/* WoodMart's "added / loading" states keep working; keep them legible. */
.wd-product .wd-add-btn > .button.loading,
.wd-product .wd-add-btn > .button.added {
	opacity: .85;
}

/* =========================================================================
 * 7. FOCUS
 * ====================================================================== */

.wd-product .product-image-link:focus-visible,
.wd-product .wd-entities-title a:focus-visible,
.wd-product .wd-buttons a:focus-visible,
.wd-product .wd-add-btn > .button:focus-visible {
	outline: none;
	box-shadow: var(--kfl-focus-ring);
}