/**
 * Babynest Feeds: frontend-komponenter.
 * Mobile-first, lille, uden JS. Bruger CSS-variabler så temaet kan overstyre.
 */

.bn-product,
.bn-compare,
.bn-disclosure,
.bn-cta {
	--bn-radius: 14px;
	--bn-accent: var(--wp--preset--color--accent, #2e8b6b);
	--bn-accent-ink: #fff;
	--bn-border: color-mix(in srgb, currentColor 12%, transparent);
	--bn-muted: color-mix(in srgb, currentColor 60%, transparent);
	font-family: inherit;
}

/* --- Disclosure (compliance, forrest) --- */
.bn-disclosure {
	display: flex;
	gap: .6em;
	align-items: baseline;
	flex-wrap: wrap;
	margin: 0 0 1.5em;
	padding: .7em 1em;
	border: 1.5px solid var(--wp--preset--color--contrast, #2b2a26);
	border-radius: 8px;
	font-size: .82rem;
	line-height: 1.45;
}
/* Annonce-chip: lille, afrundet, ærlig, ikke skrigende (style-guide §4.8). */
.bn-disclosure__tag {
	font-weight: 700;
	font-size: .72rem;
	color: var(--wp--preset--color--contrast, #2b2a26);
	border: 1px solid var(--wp--preset--color--contrast, #2b2a26);
	border-radius: 100px;
	padding: .05em .6em;
	line-height: 1.4;
}

/* --- Produktkort --- */
.bn-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 1.5rem 0;
}
@media (min-width: 480px) { .bn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .bn-grid { grid-template-columns: repeat(3, 1fr); } }

.bn-product {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius);
	overflow: hidden;
	background: var(--wp--preset--color--base, #fff);
	transition: transform .15s ease, box-shadow .15s ease;
}
.bn-product:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }

.bn-product__media {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, currentColor 4%, transparent);
	padding: .75rem;
}
.bn-product__img { max-width: 100%; max-height: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.bn-product__noimg { width: 100%; height: 100%; background: repeating-linear-gradient(45deg, transparent, transparent 8px, color-mix(in srgb, currentColor 5%, transparent) 8px, color-mix(in srgb, currentColor 5%, transparent) 16px); }

/* Nat-tema: produktbilleder bruger mix-blend-mode:multiply for at skjule hvide
   produkt-baggrunde. Mod en moerk flade ganger multiply billedet naesten sort.
   Fix: hold en LYS flise bag billedet (backdrop for multiply), saa fotos er
   synlige. Compare-thumbnails har ingen flise-wrapper -> normal blend + lys flise. */
:root[data-theme="night"] .bn-product__media { background: #f2efe7; }
:root[data-theme="night"] .bn-compare__product .bn-product__img {
	mix-blend-mode: normal; background: #f2efe7; border-radius: 6px;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="day"]) .bn-product__media { background: #f2efe7; }
	:root:not([data-theme="day"]) .bn-compare__product .bn-product__img {
		mix-blend-mode: normal; background: #f2efe7; border-radius: 6px;
	}
}

.bn-product__body { display: flex; flex-direction: column; gap: .55rem; padding: .9rem 1rem 1.1rem; flex: 1; }
.bn-product__title { font-size: 1rem; line-height: 1.3; margin: 0; font-weight: 600; }
.bn-product__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: auto; }
.bn-product__seller { font-size: .78rem; color: var(--bn-muted); }
.bn-product__updated { font-size: .7rem; color: var(--bn-muted); margin: .2rem 0 0; }
.bn-product--empty { padding: 1rem; text-align: center; color: var(--bn-muted); border-style: dashed; }

/* Kompakt-variant (til inline i brødtekst) */
.bn-product--compact { flex-direction: row; align-items: center; }
.bn-product--compact .bn-product__media { width: 96px; aspect-ratio: 1/1; flex: 0 0 auto; }

/* --- Spotlight: skarpt enkelt-produkt-kort (ÉT produkt, fx under fordele/ulemper) ---
   Blæk-kant + tryk-skygge, så det stopper scrollet uden at råbe. Billede til
   venstre fra 560px, stakket på mobil. Ingen layout-shift: faste billedmål.
   (style-guide §4.1/§4.5/§9.4 · mobile-ux.md §5). */
.bn-product--spotlight {
	display: grid;
	grid-template-columns: 1fr;
	border: 1.5px solid var(--wp--preset--color--contrast, #2b2a26);
	border-radius: 18px 6px 18px 6px;
	box-shadow: 3px 3px 0 color-mix(in srgb, var(--wp--preset--color--contrast, #2b2a26) 16%, transparent);
	background: var(--wp--preset--color--base, #fbf7ef);
	overflow: hidden;
	margin: 1.1rem 0 1.7rem;
}
/* Rolig hover: skyggen skubbes lidt, intet spring der forstyrrer læsning. */
.bn-product--spotlight:hover {
	transform: none;
	box-shadow: 5px 5px 0 color-mix(in srgb, var(--wp--preset--color--contrast, #2b2a26) 20%, transparent);
}
.bn-product--spotlight .bn-product__media {
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--soft, #eaf4ef);
	border-bottom: 1.5px solid var(--bn-border);
}
.bn-product--spotlight .bn-product__body { gap: .5rem; padding: 1rem 1.1rem 1.15rem; }
.bn-product--spotlight .bn-product__title { font-size: 1.12rem; font-weight: 700; margin: 0; }
/* Øverste linje: mærke (venstre) + lagerstatus (højre). */
.bn-product__topline { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.bn-product__brand {
	font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--wp--preset--color--accent-deep, #256f55);
}
.bn-product--spotlight .bn-product__meta { margin-top: .15rem; align-items: baseline; }
.bn-product--spotlight .bn-price { font-size: 1.35rem; }
.bn-product--spotlight .bn-product__seller { font-size: .82rem; }
.bn-product--spotlight .bn-product__cta { margin-top: .35rem; }
.bn-product--spotlight .bn-cta { width: 100%; min-height: 48px; }
.bn-product--spotlight .bn-product__updated { margin-top: .1rem; }

/* --- Award-badge ("Vores favorit" / "Bedste budget" / "Bedste til X") --- */
.bn-award {
	display: inline-flex; align-items: center; gap: .38em;
	font-size: .72rem; font-weight: 700; line-height: 1;
	letter-spacing: .01em; text-transform: uppercase;
	padding: .34em .62em; border-radius: 100px;
	border: 1.5px solid currentColor;
	color: var(--wp--preset--color--accent-deep, #256f55);
	background: color-mix(in srgb, var(--wp--preset--color--accent, #2e8b6b) 12%, var(--wp--preset--color--base, #fff));
	white-space: nowrap; vertical-align: middle;
}
.bn-award__ic { width: .72em; height: .72em; flex: 0 0 auto; background: currentColor;
	-webkit-mask: no-repeat center/contain; mask: no-repeat center/contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.1 6.6.9-4.8 4.6 1.2 6.5L12 17.8 6.1 20.7l1.2-6.5L2.5 9l6.6-.9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.1 6.6.9-4.8 4.6 1.2 6.5L12 17.8 6.1 20.7l1.2-6.5L2.5 9l6.6-.9z'/%3E%3C/svg%3E");
}
.bn-award--favorit { color: #b5651d; background: color-mix(in srgb, #e8a33d 20%, var(--wp--preset--color--base, #fff)); }
.bn-award--budget  { color: var(--wp--preset--color--accent-deep, #256f55); background: color-mix(in srgb, var(--wp--preset--color--accent, #2e8b6b) 14%, var(--wp--preset--color--base, #fff)); }
.bn-award--premium { color: #6a4c93; background: color-mix(in srgb, #7d5ba6 16%, var(--wp--preset--color--base, #fff)); }
/* Nat: favorit/premium har lyse tekstfarver saa de er laesbare paa moerk badge-flade */
:root[data-theme="night"] .bn-award--favorit { color: #f0c069; }
:root[data-theme="night"] .bn-award--premium { color: #c9ade8; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="day"]) .bn-award--favorit { color: #f0c069; }
	:root:not([data-theme="day"]) .bn-award--premium { color: #c9ade8; }
}
.bn-award--pick,
.bn-award--favorit,
.bn-award--budget,
.bn-award--premium { border-color: color-mix(in srgb, currentColor 55%, transparent); }

/* Spotlight: badge staar oeverst; præmieret kort faar kraftigere ramme */
.bn-product--spotlight .bn-award { align-self: flex-start; margin-bottom: .1rem; }
.bn-product--awarded { border-width: 2px; }
.bn-product--awarded.bn-product--spotlight { box-shadow: 4px 4px 0 color-mix(in srgb, var(--wp--preset--color--accent, #2e8b6b) 22%, transparent); }

/* Compare: badge over produktnavnet; præmieret raekke faar svag toning */
.bn-compare__name .bn-award { display: inline-flex; margin: 0 0 .3em; font-size: .66rem; }
.bn-compare__row--awarded { background: color-mix(in srgb, var(--wp--preset--color--accent, #2e8b6b) 6%, transparent); }

@media (min-width: 560px) {
	.bn-product--spotlight { grid-template-columns: 190px 1fr; align-items: stretch; }
	.bn-product--spotlight .bn-product__media {
		aspect-ratio: auto; height: 100%; min-height: 190px;
		border-bottom: 0; border-right: 1.5px solid var(--bn-border);
	}
	.bn-product--spotlight .bn-cta { width: auto; align-self: flex-start; }
}

/* --- Lagerstatus-badge --- */
.bn-stock {
	display: inline-flex; align-items: center; gap: .4em;
	font-size: .74rem; font-weight: 700; line-height: 1.3;
	padding: .18em .7em; border-radius: 100px;
	border: 1px solid currentColor;
}
.bn-stock__dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.bn-stock--in { color: var(--wp--preset--color--accent-deep, #256f55); background: color-mix(in srgb, var(--wp--preset--color--accent, #2e8b6b) 10%, transparent); }
.bn-stock--out { color: #a23b23; background: color-mix(in srgb, var(--wp--preset--color--coral, #ee6c4d) 14%, transparent); }

/* --- Pris --- */
.bn-price { font-weight: 700; font-size: 1.1rem; }
.bn-price__old { text-decoration: line-through; font-weight: 400; font-size: .85em; color: var(--bn-muted); }
.bn-price--na { font-weight: 500; font-size: .9rem; color: var(--bn-muted); }

.bn-badge { display: inline-block; font-size: .68rem; font-weight: 700; padding: .12em .5em; border-radius: 100px; }
.bn-badge--drop { background: #1f9d5533; color: #157a41; }

/* --- CTA-knap --- */
.bn-cta {
	box-sizing: border-box; /* saa width:100% i kort ikke overloeber kantens border */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	min-height: 44px; /* touch-target */
	max-width: 100%;
	padding: .55em 1.1em;
	border-radius: 12px 4px 12px 4px; /* notesbog-hjørne, ikke pill (style-guide §4.1/§9.4) */
	background: var(--bn-accent);
	color: var(--bn-accent-ink) !important;
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
	text-align: center;
	line-height: 1.1;
	transition: filter .15s ease;
}
.bn-cta:hover { filter: brightness(1.07); }
.bn-cta:focus-visible { outline: 3px solid var(--bn-accent); outline-offset: 2px; }
.bn-cta--disabled { opacity: .55; pointer-events: none; }
.bn-cta__note { font-weight: 400; font-size: .8em; }

/* --- Sammenligningstabel --- */
.bn-compare-wrap { overflow-x: auto; margin: 1.5rem 0; -webkit-overflow-scrolling: touch; }
.bn-compare {
	width: 100%;
	border-collapse: collapse;
	min-width: 520px;
	font-size: .92rem;
}
.bn-compare th, .bn-compare td { padding: .7rem .8rem; text-align: left; border-bottom: 1px solid var(--bn-border); vertical-align: middle; }
.bn-compare thead th { font-size: .78rem; font-weight: 700; color: var(--bn-muted); }
.bn-compare__product { display: flex; align-items: center; gap: .6rem; min-width: 200px; }
.bn-compare__product .bn-product__img,
.bn-compare__product .bn-product__noimg { width: 48px; height: 48px; }
.bn-compare__name { font-weight: 600; }
.bn-compare tbody tr:hover { background: color-mix(in srgb, var(--bn-accent) 4%, transparent); }
.bn-compare__updated { font-size: .72rem; color: var(--bn-muted); margin: .5rem 0 0; }

/* --- Sammenligningstabel → kort-stak på mobil (< 620px) ---
   Vandret scroll skjulte "Se pris"-CTA'en ~100px ude til højre. Under 620px
   bliver hver række et selvstændigt kort med label/værdi og fuldbredde-CTA,
   så den primære konvertering ALTID er synlig uden vandret scroll.
   (mobile-ux.md §5 · style-guide §4.5). Desktop-tabellen er uændret. */
@media (max-width: 620px) {
	.bn-compare-wrap { overflow-x: visible; -webkit-overflow-scrolling: auto; }
	.bn-compare { min-width: 0; border-collapse: separate; border-spacing: 0; font-size: 1rem; }
	/* Skjul tabelhoved visuelt (bevar for skærmlæsere). */
	.bn-compare thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
	.bn-compare tbody { display: grid; gap: 1rem; }
	.bn-compare tr {
		display: grid; grid-template-columns: 1fr; gap: .55rem;
		border: 1.5px solid var(--wp--preset--color--contrast, #2b2a26);
		border-radius: 14px 6px 14px 6px;
		background: var(--wp--preset--color--base, #fff);
		padding: .95rem 1rem 1.05rem;
	}
	.bn-compare tbody tr:hover { background: var(--wp--preset--color--base, #fff); }
	.bn-compare td { border: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; }
	/* Produkt = kortets hoved (billede + navn), venstrestillet. */
	.bn-compare td.bn-compare__product { justify-content: flex-start; min-width: 0; padding-bottom: .35rem; border-bottom: 1px solid var(--bn-border); margin-bottom: .1rem; }
	.bn-compare__name { font-size: 1.02rem; overflow-wrap: anywhere; }
	/* Label/værdi-rækker for Forhandler + Pris. */
	.bn-compare td:nth-child(2)::before { content: "Forhandler"; }
	.bn-compare td:nth-child(3)::before { content: "Pris"; }
	.bn-compare td:nth-child(2)::before,
	.bn-compare td:nth-child(3)::before {
		font-size: .74rem; font-weight: 700; letter-spacing: 0;
		color: var(--bn-muted); flex: 0 0 auto;
	}
	/* "Se pris"-CTA: fuld bredde, altid synlig. */
	.bn-compare td:nth-child(4) { margin-top: .3rem; display: block; }
	.bn-compare td:nth-child(4) .bn-cta { display: flex; width: 100%; min-height: 48px; }
}

/* --- "Vores favorit"-redemærke (style-guide §4.6) --- */
.bn-fave {
	display: inline-flex; align-items: center; gap: .4em;
	font-size: .78rem; font-weight: 700;
	color: var(--wp--preset--color--contrast, #2b2a26);
	background: color-mix(in srgb, var(--wp--preset--color--sun, #f4ce5e) 55%, transparent);
	border: 1.5px solid var(--wp--preset--color--contrast, #2b2a26);
	border-radius: 100px; padding: .2em .7em; line-height: 1.3;
}
.bn-fave__mark { width: 18px; height: 18px; flex: 0 0 auto; }

/* Respektér reduceret bevægelse */
@media (prefers-reduced-motion: reduce) {
	.bn-product, .bn-cta { transition: none; }
}