/**
 * GM PWA — Priser paa webstedets opskriftssider (BETA, kun Jes + Dianna).
 *
 * ALT er praefikset .gmwp saa intet kan lakke ud i temaet, WPRM eller et
 * annonce-slot: der er ingen regler paa element-selektorer alene, og den
 * eneste !important staar paa .gmwp-logo.has-logo (den skal slaa kaedens
 * INLINE baggrundsfarve naar det rigtige logo er loadet). Farverne er appens
 * — var(--gm) findes ikke uden for app-shellen, saa vaerdierne staar direkte.
 */

.gmwp {
	margin: 18px 0 8px;
	font-family: inherit;
}

.gmwp-btn {
	display: block;
	width: 100%;
	padding: 12px 16px;
	border: 1.5px solid #1F4A33;
	border-radius: 12px;
	background: none;
	color: #1F4A33;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s;
}
.gmwp-btn:hover { background: rgba(31, 74, 51, .06); }
.gmwp-btn:focus-visible { outline: 2px solid #1F4A33; outline-offset: 2px; }

.gmwp-body { margin-top: 12px; }

.gmwp-loading,
.gmwp-msg {
	padding: 14px 16px;
	border: 1px solid #E6E1D8;
	border-radius: 12px;
	background: #fff;
	font-size: 14px;
	color: #6f6a62;
	line-height: 1.5;
}
.gmwp-msg a { color: #1F4A33; font-weight: 600; }

.gmwp-card {
	background: #fff;
	border: 1px solid #E6E1D8;
	border-radius: 14px;
	overflow: hidden;
}

.gmwp-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px 12px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
/* Teksten fylder resten, saa totalen staar helt ude til hoejre ved pilen
   (Jes 29/09) — ikke midt imellem de tre elementer. */
.gmwp-top > div:first-child { flex: 1; min-width: 0; }
.gmwp-top:hover { background: #FAF8F5; }
.gmwp-top:focus-visible { outline: 2px solid #1F4A33; outline-offset: -2px; }
/* Fold ud/ind (Jes 28/09): foldet viser kun linjen med totalen. */
.gmwp-fold {
	flex: none;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #8C8578;
	transition: transform .2s;
}
.gmwp-fold svg { width: 16px; height: 16px; }
.gmwp-card.is-folded .gmwp-fold { transform: rotate(-90deg); }
.gmwp-card.is-folded > :not(.gmwp-top) { display: none; }
.gmwp-lbl {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #8C8578;
}
.gmwp-beta {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .06em;
	color: #a8542f;
	background: rgba(168, 84, 47, .12);
	padding: 1px 5px;
	border-radius: 4px;
	margin-left: 5px;
	vertical-align: 1px;
}
.gmwp-per { font-size: 12.5px; color: #8C8578; margin-top: 3px; }
.gmwp-sum {
	font-size: 26px;
	font-weight: 800;
	color: #23201C;
	line-height: 1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.gmwp-sum span { font-size: 14px; font-weight: 600; color: #8C8578; }

.gmwp-best {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-top: 1px solid #F4F1EB;
	font-size: 13px;
	color: #4a463f;
	line-height: 1.35;
}

.gmwp-rows { border-top: 1px solid #E6E1D8; }

.gmwp-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 9px 16px;
	border-top: 1px solid #F4F1EB;
}
.gmwp-row:first-child { border-top: 0; }
.gmwp-left { flex: 1; min-width: 0; }
.gmwp-name { font-size: 13.5px; color: #23201C; line-height: 1.25; overflow-wrap: anywhere; }
.gmwp-match { font-size: 11.5px; color: #6f6a62; margin-top: 1px; overflow-wrap: anywhere; }
.gmwp-meta {
	font-size: 11.5px;
	color: #9a938a;
	margin-top: 2px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.gmwp-chain { display: inline-flex; align-items: center; gap: 5px; }
.gmwp-offer {
	color: #a8542f;
	font-weight: 700;
	font-size: 9.5px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.gmwp-right { text-align: right; flex: none; }
.gmwp-price { font-size: 14px; font-weight: 700; color: #23201C; font-variant-numeric: tabular-nums; }
.gmwp-sub { font-size: 11px; color: #9a938a; margin-top: 1px; font-variant-numeric: tabular-nums; }
.gmwp-none { font-size: 12px; color: #c0b9ae; }
.gmwp-row.is-none .gmwp-name { color: #9a938a; }
/* Basisvarer (Jes 23/09): prissat og vist, men uden for totalen. */
.gmwp-hd {
	display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
	padding: 9px 15px 4px; border-top: 1px solid #E6E1D8;
	font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8C8578;
}
.gmwp-hd span { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 11.5px; color: #9a938a; font-variant-numeric: tabular-nums; text-align: right; }
.gmwp-row.is-staple .gmwp-price { color: #9a938a; font-weight: 600; }
.gmwp-row.is-staple .gmwp-name { color: #6f6a62; }

/* Kaede-maerket: initialer som bund, rigtigt logo ovenpaa naar det loader.
   Uden .has-logo staar initialerne — et manglende logo giver aldrig et hul. */
.gmwp-logo {
	position: relative;
	flex: none;
	width: 17px;
	height: 17px;
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: -.02em;
	overflow: hidden;
}
.gmwp-logo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.gmwp-logo.has-logo { background: #fff !important; }

.gmwp-note {
	padding: 9px 16px;
	font-size: 11.5px;
	color: #9a938a;
	line-height: 1.45;
	border-top: 1px solid #F4F1EB;
}
.gmwp-foot {
	padding: 10px 16px 13px;
	font-size: 12px;
	color: #6f6a62;
	line-height: 1.45;
	border-top: 1px solid #F4F1EB;
	background: #FBFAF7;
}
.gmwp-foot a { color: #1F4A33; font-weight: 600; }

/* ── Prismærker ved ingredienserne (Jes 28/08) ──────────────────────────────
   "utydeligt paa alle ingredienser et lille pris ikon". Derfor: lille, lav
   kontrast og ingen baggrund i hvile — maerket skal kunne ANES, ikke laese
   som en knap. Farve og vaegt loefter sig kun paa hover/fokus, og et
   tilbud faar en diskret varm tone. Alt er inline i navnet, saa
   ingredienslistens egen rytme ikke brydes. */
.gmwp-mark {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: 7px;
	padding: 1px 5px 1px 4px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: #b8b1a6;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	vertical-align: 1px;
	font-variant-numeric: tabular-nums;
	transition: color .14s, background .14s;
	-webkit-tap-highlight-color: transparent;
}
.gmwp-mark svg { width: 10px; height: 10px; flex: none; }
.gmwp-mark:hover { color: #1F4A33; background: rgba(31, 74, 51, .08); }
.gmwp-mark:focus-visible { outline: 2px solid #1F4A33; outline-offset: 1px; color: #1F4A33; }
.gmwp-mark.is-offer { color: #c08a6a; }
.gmwp-mark.is-offer:hover { color: #a8542f; background: rgba(168, 84, 47, .09); }

/* Fra-knappen: en stille tekst-kontakt, ikke en knap der konkurrerer med
   "Vis priser". */
.gmwp-marks-t {
	display: block;
	margin: 8px auto 0;
	padding: 4px 6px;
	border: 0;
	background: none;
	color: #a8a196;
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.gmwp-marks-t:hover { color: #1F4A33; }

/* Kort-fremhaevning naar man trykker paa et maerke. */
.gmwp-row.is-hl {
	background: rgba(31, 74, 51, .07);
	transition: background .5s;
}

/* ── Klikbare varer i priskortet (22/09) → vare-arket som popup ── */
.gmwp-row.is-click { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gmwp-row.is-click:hover { background: #FBFAF7; }
.gmwp-row.is-click:focus-visible { outline: 2px solid #1F4A33; outline-offset: -2px; }
.gmwp-go { flex: none; align-self: center; margin-left: 2px; font-size: 22px; line-height: 1; color: #c9c2b7; }
.gmwp-row.is-click:hover .gmwp-go { color: #1F4A33; }