/* Varekortet i WooCommerces Product Collection: kataloget (tre led), søgningen og forsidens produktrække (fire led). Indlæses kun, hvor blokken bruges. */
/* Tre eller fire led i vælgeren: WooCommerce' egen kolonneregel har to klasser og vinder ellers over brudpunkterne. */
.pto-collection :is(.prod-grid-3, .prod-grid-4).prod-grid {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-16);
}
@media (min-width: 640px) {
	.pto-collection :is(.prod-grid-3, .prod-grid-4).prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.pto-collection .prod-grid.prod-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pto-collection .prod-grid.prod-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Kanten står i app.css, fordi kortene også findes uden for arkivet. Her er polstringen fra theme.json 1px mindre, så kortknappens højde er uændret. */
.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button.wp-element-button { padding: var(--space-10) var(--space-22); }
.pto-collection .prod-grid > li { display: flex; }
.pto-collection .pto-produkt-kort {
	flex: 1;
	min-width: 0;
	background: var(--color-surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	padding: var(--space-16);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-12);
	position: relative;
	overflow: hidden;
	color: var(--color-foreground);
	transition: box-shadow .2s, border-color .2s;
}
.pto-collection .pto-produkt-kort:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-float-soft); text-decoration: none; }
/* Under 640 px står billedet til venstre for teksten, og pris og knapper fylder kortets bredde under dem. */
@media (max-width: 639px) {
	.pto-collection .pto-produkt-kort {
		display: grid;
		grid-template-columns: clamp(var(--space-80), 30vw, 7rem) minmax(0, 1fr);
		align-content: start;
		gap: var(--space-4) var(--space-12);
	}
	.pto-collection .pto-produkt-kort > * { grid-column: 2; }
	.pto-collection .pto-produkt-kort > .prod-thumb { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
	.pto-collection .pto-produkt-kort > .prod-buy { grid-column: 1 / -1; margin-top: var(--space-8); }
	.pto-collection .pto-produkt-kort .prod-foot { margin-top: var(--space-4); }
}
/* Under 1024 px er mærket og titlen klikmål på 44 px. Titlens to linjer fylder præcis de 44 px, så der ikke ses en strimmel af en tredje linje. */
@media (max-width: 1023px) {
	.pto-produkt-kort .prod-brand a { display: inline-flex; align-items: center; min-height: var(--space-44); }
	.pto-produkt-kort .prod-title a { min-height: var(--space-44); line-height: calc(var(--space-44) / 2); }
}
.pto-produkt-kort .prod-brand {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-11); font-weight: 500;
	color: var(--color-foreground);
	letter-spacing: 0.06em; text-transform: uppercase;
}
.pto-produkt-kort .prod-thumb {
	margin: 0;
	background: var(--color-surface);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.pto-produkt-kort .prod-thumb img {
	box-sizing: border-box;
	padding: 8%;
}
.pto-produkt-kort .prod-title {
	font-size: var(--text-15);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	min-height: 39px;
	margin: 0;
	overflow-wrap: anywhere;
}
/* Kernen gør titlens link til inline-block, som en linjeklipning på titlen ikke kan skære i. Derfor klipper linket selv sine linjer; det fulde navn står stadig i linkteksten. */
.pto-produkt-kort .prod-title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--color-foreground);
}
.pto-produkt-kort .prod-codes {
	display: flex; flex-direction: column; gap: var(--space-2);
	margin: 0;
	overflow-wrap: anywhere;
	font-family: var(--font-mono);
	font-size: var(--text-11); color: var(--color-text-muted); line-height: 1.4;
}
.pto-produkt-kort .prod-codes > * { margin: 0; }
.pto-produkt-kort .prod-codes:not(:has(> :not(:empty))) { display: none; }
.pto-produkt-kort .prod-oe::before { content: "OE: "; }
.pto-produkt-kort .prod-oe:empty { display: none; }
.pto-collection .pto-produkt-kort .prod-stock {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	margin: 0;
	text-align: left;
	font-size: var(--text-12);
	font-weight: 500;
	color: var(--color-success);
}
.pto-produkt-kort .prod-stock::before {
	content: "";
	flex-shrink: 0;
	width: var(--space-8);
	height: var(--space-8);
	border-radius: var(--radius-circle);
	background: currentColor;
}
.pto-collection .pto-produkt-kort .prod-stock.wc-block-components-product-stock-indicator--available-on-backorder { color: var(--color-warning); }
.pto-collection .pto-produkt-kort .prod-stock.wc-block-components-product-stock-indicator--out-of-stock { color: var(--color-danger); }

/* Prisen og linket «Log ind for din pris» deler linje, når der er plads; foden med afkrydsning og knap har en række for sig. */
.pto-produkt-kort .prod-buy {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-12);
	margin-top: auto;
	padding-top: var(--space-10);
	border-top: 1px solid var(--rule);
}
.pto-produkt-kort .prod-buy > * { margin: 0; }
.pto-produkt-kort .prod-price :is(.wts-vat-text, .pto-pris-enhed) { white-space: nowrap; }
/* Hvor kortene står side om side, har momsteksten sin egen linje, så alle kort har samme prishøjde, og knapperne står på linje. Under 640 px står kortene under hinanden, og teksten følger beløbet. */
.pto-produkt-kort .prod-price .wts-price-container > .wts-price-wrapper:last-child { font-family: var(--font-sans); font-size: var(--text-12); font-weight: 400; letter-spacing: normal; color: var(--color-text-muted); }
.pto-produkt-kort .prod-price .wts-price-container > .wts-price-wrapper:last-child .wts-vat-text { font-size: inherit; }
@media (min-width: 640px) {
	.pto-produkt-kort .prod-price .wts-price-container > .wts-price-wrapper:last-child { display: block; }
}
.pto-produkt-kort .prod-price {
	font-family: var(--font-mono);
	font-size: var(--text-18);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-align: left;
}
/* Understregningen står under teksten, også når linket under 1024 px er et klikmål på 44 px. En vare uden pris har ingen kundepris at logge ind til. */
.pto-produkt-kort .login-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--space-44);
	font-size: var(--text-12);
	font-weight: 400;
	color: var(--color-primary);
	text-decoration: underline 1px var(--rule-strong);
	text-underline-offset: 3px;
}
.pto-produkt-kort .login-link:hover { text-decoration-color: var(--color-primary); }
.pto-produkt-kort .prod-buy:has(.pto-forespoerg) .login-link-slot { display: none; }
@media (min-width: 1024px) {
	.pto-produkt-kort .login-link { min-height: auto; }
}
/* Afkrydsningen og knappen deler rækken, når der er plads, og står under hinanden i et smalt kort. */
.pto-produkt-kort .prod-foot { display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); margin: var(--space-8) 0 0; }
.pto-produkt-kort .prod-foot > * { margin: 0; }
.pto-produkt-kort .prod-foot .add-btn { flex: 1 1 9rem; }
.pto-produkt-kort {
	--pto-ikon-kurv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
}
.pto-produkt-kort .add-btn.is-style-outline .wc-block-components-product-button__button.wp-element-button { border-color: currentColor; }
.pto-produkt-kort .add-btn.is-style-outline .wc-block-components-product-button__button.wp-element-button:is(:hover, :focus-visible) { background: var(--color-primary); color: var(--color-surface); }
.pto-produkt-kort .add-btn .wp-element-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); }
.pto-produkt-kort .add-btn .wp-element-button::before {
	content: "";
	flex-shrink: 0;
	width: var(--space-14);
	height: var(--space-14);
	background: currentColor;
	-webkit-mask: var(--pto-ikon-kurv) center / contain no-repeat;
	mask: var(--pto-ikon-kurv) center / contain no-repeat;
}
@media (min-width: 1024px) {
	.pto-produkt-kort .add-btn .wp-element-button { min-height: var(--space-40); font-size: var(--text-13); }
	.pto-produkt-kort .add-btn .wc-block-components-product-button__button.wp-element-button { padding-block: var(--space-8); }
}

/* Forsidens produktrække (parts/produktraekke.html): produktsamlingen selv er sektionen, med overskrift og link indeni. Uden varer udskriver WooCommerce intet, så hele rækken udebliver. */
.pto-produktraekke {
	margin-block: 0; /* WooCommerce lægger 30px under en produktsamling; rækken er en fuldbredde-sektion */
	padding: var(--space-40) 0;
	background: var(--color-surface);
	border-block: 1px solid var(--rule);
}
.pto-produktraekke__hoved {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	margin-bottom: var(--space-24);
}
.pto-produktraekke__hoved h2 {
	margin: var(--space-4) 0 0;
	font-size: var(--text-title);
	font-weight: 600;
}
@media (min-width: 640px) {
	.pto-produktraekke { padding-block: var(--space-64); }
}
@media (min-width: 1024px) {
	.pto-produktraekke { padding-block: var(--space-80); }
	.pto-produktraekke__hoved {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--space-24);
		margin-bottom: var(--space-32);
	}
}