/**
 * The shared product card (Figma: Norsk batteriimport, node 99:589 / 99:628).
 *
 * The card's blocks live in the theme pattern `maksimer-block/product-card`
 * (and, once seeded, in the synced pattern an editor edits). This file styles
 * them, and is loaded wherever a product collection appears —
 * see ProductCard::enqueue_style().
 *
 * Three values the design uses are not in the theme's palette or type scale:
 * the muted meta grey, the in-stock green and the 14px meta size. They are
 * declared once here rather than scattered as hex literals; lift them into
 * theme.json if they turn out to be site-wide tokens.
 */

:root {
	--bi-card-meta-color: #6a7282;
	--bi-card-instock-color: #16a34a;
	--bi-card-outofstock-color: #d41e2e;
	--bi-card-flag-color: #d41e2e;
	--bi-card-flag-text: #fff;
	--bi-card-meta-size: 0.875rem;
	--bi-card-gap: 0.5rem;
	/* The design puts the photo on white. The theme's `base` colour is the
	 * page's own off-white (#f7f7f7), so white is set explicitly here —
	 * otherwise the media box disappears into the page. */
	--bi-card-media-bg: #fff;
}

/* ── Card ───────────────────────────────────────────────────────────────
 * The grid item is the card. Addressed as a child of the list rather than by
 * its own class, because the two render paths label it differently:
 * WooCommerce's own grid gives it `wc-block-product`, ours gives it
 * `wc-block-product-template__product`. Both sit in `ul.wc-block-product-template`.
 *
 * `position: relative` anchors the campaign flag, which Price Forge
 * positions absolutely.
 */
.wc-block-product-template > li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--bi-card-gap);
}

/* ── Media ──────────────────────────────────────────────────────────────
 * A fixed box so every card in a row is the same height, with the product
 * photo contained inside it rather than cropped — these are product shots
 * on white, and cropping them cuts off terminals and labels.
 */
.bi-product-card__media {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	aspect-ratio: 10 / 11;
	padding: 20px;
	background: var(--bi-card-media-bg);
}

.bi-product-card__media .wc-block-components-product-image,
.bi-product-card__media .wc-block-components-product-image > a {
	display: block;
	height: 100%;
}

/* The product card image slider is a horizontal scroll-snap carousel and the
 * images are its flex items. Only the height is set here — overriding its
 * `display`, `justify-content` or `align-items` turns the slides into a row
 * of shrunken thumbnails instead of one image per swipe. */
.bi-product-card__media .maksimer-product-images-wrapper {
	height: 100%;
}

/* Each image is one full slide. `contain` letterboxes the photo inside that
 * slide and centres it, so the whole product is visible without breaking the
 * carousel. The slider writes `object-fit:cover` inline on every <img>, so
 * only !important reaches it. */
.bi-product-card__media img {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: contain !important;
	object-position: center;
}

/* Campaign flag — Price Forge ships its own white/bordered pill; the design
 * asks for a solid block in the top-left corner. Per-campaign colours, set
 * inline by the plugin's render, still win over this.
 *
 * `position` is repeated here rather than left to the plugin's stylesheet:
 * that sheet is only enqueued when the block actually renders, so the card
 * must place the flag itself. */
.wc-block-product-template > li .wp-block-maksimer-campaign-flag {
	position: absolute;
	z-index: 1;
	top: 12px;
	left: 12px;
	width: auto;
	padding: 4px 10px;
	border: 0;
	border-radius: 0;
	background: var(--bi-card-flag-color);
	color: var(--bi-card-flag-text);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.333;
	text-transform: none;
}

/* ── On a dark ground (mega menu) ───────────────────────────────────────
 * Same card, inverted colours. The `is-inverted` class is set on the
 * collection block in parts/mega-menu.html.
 */
.wp-block-woocommerce-product-collection.is-inverted .wc-block-components-product-name a,
.wp-block-woocommerce-product-collection.is-inverted .wc-block-components-product-price,
.wp-block-woocommerce-product-collection.is-inverted .wc-block-components-product-button .wp-block-button__link {
	color: var(--wp--preset--color--base);
}

.wp-block-woocommerce-product-collection.is-inverted .wc-block-components-product-button .wp-block-button__link {
	background-color: transparent;
}

/* ── Meta row: SKU left, stock status right ────────────────────── */
/* Exactly one line, always. `flex-wrap` and `min-height` are belt and braces:
 * the group block already asks for nowrap, but the card is an editable synced
 * pattern, so a layout change in the editor must not be able to turn this row
 * into two lines — a taller row here shifts the title, price and button of
 * that one card out of line with every other card in the row. */
.bi-product-card__meta {
	container-type: inline-size;
	gap: var(--bi-card-gap);
	flex-wrap: nowrap;
	align-items: center;
	min-height: calc(1.43 * var(--bi-card-meta-size));
	font-size: var(--bi-card-meta-size);
	line-height: 1.43;
}

/* The SKU is the part that gives way. `min-width: 0` lets it shrink below its
 * content width (flex items refuse to by default), and the long SKUs — up to
 * "5STT 80/100 T440 60H" — are then cut with an ellipsis instead of wrapping.
 * "Varenr:" sits at the start, so the label survives the truncation. */
.bi-product-card__sku {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	color: var(--bi-card-meta-color);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* WooCommerce wraps the prefix and the SKU itself in their own spans. */
.bi-product-card__sku .wp-block-post-terms__prefix,
.bi-product-card__sku .sku {
	color: inherit;
}

/* On a narrow card — a phone, or the mega menu's small grid — the stock label
 * takes what it needs and "Varenr:" eats the number it is labelling, leaving
 * "Varenr:…". Below that width the number wins and the label is dropped. The
 * query is on the row's own width, not the viewport's, because the same card
 * appears at several widths on one page. */
@container (max-width: 200px) {
	.bi-product-card__sku .wp-block-post-terms__prefix {
		display: none;
	}
}

/* `margin-left: auto` keeps the status on the right even when the SKU block
 * renders nothing — it returns an empty string for a product without a SKU,
 * and `space-between` alone would then pull the status to the left. */
.bi-product-card__stock {
	display: flex;
	flex-shrink: 0;
	gap: 6px;
	align-items: center;
	margin: 0 0 0 auto;
	color: var(--bi-card-instock-color);
	white-space: nowrap;
}

.bi-product-card__stock::before {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentcolor;
	content: "";
}

/* WooCommerce marks the low/out-of-stock states with its own classes. */
.bi-product-card__stock.wc-block-components-product-stock-indicator--out-of-stock,
.bi-product-card__stock.wc-block-components-product-stock-indicator--available-on-backorder {
	color: var(--bi-card-outofstock-color);
}

/* ── Title ──────────────────────────────────────────────────────────────
 * Exactly two lines, always: clamped so a long product name cannot push the
 * price and button down, and `min-height` so a one-line name still reserves
 * the second line. Everything below the title then lines up across a row.
 */
.bi-product-card__title {
	min-height: calc(2 * 1.375em);
	margin: 0;
	line-height: 1.375;
}

/* The clamp sits on the link, not the heading: the heading is a flex item of
 * the card, and a flex item's `display` is blockified — `-webkit-box` never
 * survives, so the clamp silently does nothing. The link is an ordinary child
 * and keeps it. */
.bi-product-card__title a {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	/* Take the colour picked for the title in the pattern. Its link colour
	 * setting is lost when the card is rendered through the block, which
	 * left the site's red link colour showing. */
	color: inherit;
	text-decoration: none;
}

.bi-product-card__title a:hover,
.bi-product-card__title a:focus-visible {
	text-decoration: underline;
}

/* ── Price ──────────────────────────────────────────────────────────────
 * On sale WooCommerce renders <del> (was) followed by <ins> (now). The
 * design puts the current price first, so the order is reversed here.
 */
.bi-product-card__price .wc-block-components-product-price {
	display: flex;
	gap: 8px;
	align-items: baseline;
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast, #141414);
}

.bi-product-card__price del {
	order: 2;
	font-size: 0.75rem;
	color: var(--bi-card-outofstock-color);
	opacity: 1;
	text-decoration: line-through;
}

.bi-product-card__price ins {
	order: 1;
	background: none;
	text-decoration: none;
}

/* ── Add to cart ────────────────────────────────────────────────────────
 * `margin-top: auto` pushes the button to the bottom of the card, so the
 * buttons line up across a row whatever the title and meta do above them.
 */
.bi-product-card__button {
	display: flex;
	flex-direction: column;
	margin-top: auto;
	width: 100%;
}

/* WooCommerce reveals a "Vis handlekurv" link under the button once an item
 * is added, which grows the card and shifts every card in the row. The header
 * already has a mini cart, and the design has no such link, so it is dropped.
 * The wrapper's only direct span is that link's. */
.bi-product-card__button > span {
	display: none;
}

/* The block's `align-center` class makes the wrapper a centred column, which
 * sizes the button to its label and outranks a plain `width: 100%`.
 * `align-self` is set on the button itself, so it wins whatever the
 * container asks for. */
.bi-product-card__button .wp-block-button__link {
	display: flex;
	align-self: stretch;
	width: 100%;
	min-height: 44px;
	padding: 0 1rem;
	border: 0;
	border-radius: 4px;
	align-items: center;
	justify-content: center;
	font-size: var(--bi-card-meta-size);
	font-weight: 400;
	line-height: 1.43;
	text-align: center;
	text-decoration: none;
	text-transform: none;
}