/**
 * "Nytt"-merket på produktkort.
 *
 * Målene (0.875em, 600, 4px radius, 0.25em/0.75em padding, versaler, 4px fra
 * hjørnet) er tatt rett fra WooCommerce' eget salgsmerke, slik at de to merkene
 * på samme kort ser ut som ett system. Fargen er merkevarens korall.
 *
 * Fargene er pinnet per modus i stedet for å hentes fra light-dark()-tokenene:
 * primary-accent er korall i BEGGE moduser (The Both Modes Rule i DESIGN.md), og
 * de pinnede verdiene er der av samme grunn som i fibel/faq — light-dark()
 * oppfører seg ustabilt på enkelte elementer. Endres temapaletten, endres disse.
 */

.fibel-nytt-badge {
	--fnytt-bg: #ff6347;
	/* Ink, ikke hvit: hvit på korall måler 2,95:1 og faller under AA for 14px
	   halvfet tekst. Ink på samme korall gir 6,06:1. */
	--fnytt-fg: #0f172a;

	background: var( --fnytt-bg );
	border-radius: 4px;
	box-sizing: border-box;
	color: var( --fnytt-fg );
	display: inline-block;
	font-size: 0.875em;
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: 1.4;
	margin: 0;
	padding: 0.25em 0.75em;
	text-align: center;
	text-transform: uppercase;
	width: fit-content;
	z-index: 9;
}

body.is-dark-theme .fibel-nytt-badge {
	--fnytt-bg: #ff6347;
	--fnytt-fg: #0f172a;
}

.fibel-nytt-badge span {
	background-color: inherit;
	color: inherit;
}

/* Inne i woocommerce/product-image. Salgsmerket sitter øverst til høyre
   (--align-right), så "Nytt" tar venstre hjørne. */
.wc-block-components-product-image .fibel-nytt-badge--produktbilde {
	left: 4px;
	position: absolute;
	right: auto;
	top: 4px;
}

/* Klassisk WooCommerce-løkke. li.product har position: relative fra Woo. */
.woocommerce ul.products li.product .fibel-nytt-badge--loop,
ul.products li.product .fibel-nytt-badge--loop {
	left: 4px;
	position: absolute;
	right: auto;
	top: 4px;
}