/* Klassisk handlekurv (Jørgen 28.10, bryter rh_klassisk_kurv i Kasse og betaling): server-tegnet kurv uten blokk-JavaScript.
   Lastes BARE på kurvsiden i klassisk modus (enqueue i kasse-og-betaling/inc/klassisk_kurv.php). Alle farger, avstander og hjørner kommer fra tokens.css.
   Mobil først: en linje er bilde + info, så antall og sum på egen rad. Fra 900 px: linjer til venstre, sammendraget i en klebrig kolonne til høyre. */

.rh-kk { color: var(--ink); max-width: var(--max); margin: 0 auto; }
.rh-kk__varsler:empty { display: none; }
.rh-kk__varsler { margin: 0 0 var(--s4); }
.rh-kk__varsler .woocommerce-message, .rh-kk__varsler .woocommerce-info, .rh-kk__varsler .woocommerce-error {
	margin: 0 0 var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--navy-tint); color: var(--navy); list-style: none; font-weight: 600;
}
.rh-kk__varsler .woocommerce-error { background: var(--feil-tint); color: var(--feil); }
.rh-kk__varsler .woocommerce-message .button, .rh-kk__varsler .restore-item { margin-left: var(--s2); font-weight: 700; text-decoration: underline; }

.rh-kk__rutenett { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.rh-kk__varer { container: rh-kk-varer / inline-size; min-width: 0; }
.rh-kk__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }

/* En varelinje: smal kolonne = bilde + navn/pris øverst, så antall, linjesum og Fjern på én midtlinje; bred kolonne (fra 680 px, container-spørring, ikke vindusbredde) = alt på én rad.
   Linjesummen står i fast kolonne, høyrejustert og tabellformet. Alt i rutenettet midtstilles vertikalt, så bilde, tekst, antall, sum og Fjern deler midtlinje. */
.rh-kk .rh-kk__linje {
	display: grid; gap: var(--s3) var(--s3); margin: 0; padding: var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-kort);
	grid-template-columns: 72px minmax(0, 1fr) auto auto; grid-template-areas: "bilde info info info" "antall antall total fjern"; align-items: center;
}
.rh-kk__bilde { grid-area: bilde; display: block; width: 72px; height: 72px; border-radius: var(--r-md); background: var(--surface-grey); overflow: hidden; }
.rh-kk__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rh-kk .rh-kk__info { grid-area: info; min-width: 0; align-self: center; }
.rh-kk .rh-kk__navn { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--ink); text-decoration: none; }
.rh-kk a.rh-kk__navn:hover { color: var(--navy); text-decoration: underline; }
.rh-kk .rh-kk__varianter { margin: 2px 0 0; color: var(--ink-muted); font-size: 13px; line-height: 1.4; }
.rh-kk .rh-kk__enhet { margin: var(--s1) 0 0; color: var(--ink-muted); font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.rh-kk .rh-kk__pris { color: var(--ink); font-weight: 700; font-size: 14px; }
.rh-kk__for { color: var(--ink-subtle); }
.rh-kk .rh-kk__melding { margin: var(--s1) 0 0; color: var(--varsel); font-size: 13px; font-weight: 600; }
.rh-kk .rh-kk__tips { margin: var(--s1) 0 0; color: var(--suksess); font-size: 13px; font-weight: 600; }
.rh-kk .rh-kk__antallboks { grid-area: antall; display: flex; align-items: center; min-width: 0; margin: 0; }
.rh-kk__antall-ledd, .rh-kk__total-ledd { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rh-kk .rh-kk__total { grid-area: total; justify-self: end; margin: 0; padding: 0; text-align: right; font-weight: 800; font-size: 16px; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rh-kk .rh-kk__fjern { grid-area: fjern; justify-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; height: 40px; min-width: 72px; margin: 0; padding: 0 var(--s2); color: var(--ink-muted); font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; border-radius: var(--r-md); }
.rh-kk .rh-kk__fjern svg { flex: none; width: 16px; height: 16px; }
@media (pointer: coarse) { .rh-kk .rh-kk__fjern { height: 44px; } }
.rh-kk .rh-kk__fjern:focus-visible { outline: var(--bar) solid var(--focus); outline-offset: 0; }
.rh-kk__fjern:hover { color: var(--feil); background: var(--feil-tint); }

/* antall: se «Antallsvelger» i grunn.css (én komponent for klassisk kurv, kurv-blokk og minikurv). Uten JavaScript er bare tallfeltet synlig og «Oppdater kurven» vises. */
.rh-kk--js .rh-kk__oppdater, html.rh-kk-js .rh-kk__oppdater { display: none; }
.rh-kk__oppdater { margin-top: var(--s3); }
.rh-kk--opptatt { opacity: .6; pointer-events: none; transition: opacity .15s; }

/* sammendraget */
.rh-kk .rh-kk__sum { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow-kort); }
.rh-kk .rh-kk__sum .rh-kk__sum-tittel { margin: 0 0 var(--s3); padding: 0; font-size: 18px; line-height: 1.3; }
.rh-kk .rh-kk__teller { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-md); background: var(--navy-tint); color: var(--navy); font-size: 14px; font-weight: 700; line-height: 1.4; }
.rh-kk .rh-kk__teller--oppnadd { background: var(--suksess-tint); color: var(--suksess); }
/* linjene i sammendraget: ingen mellomrom mellom kolonnene (skillelinjen over Totalt går hele bredden), lik avstand, én skriftstørrelse (15 px) og to tykkelser */
.rh-kk .rh-kk__rader { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0; row-gap: 0; margin: 0 0 var(--s5); padding: 0; font-size: 15px; line-height: 1.4; }
.rh-kk .rh-kk__rader dt, .rh-kk .rh-kk__rader dd { margin: 0; padding: 6px 0; border: 0; font-size: 15px; font-weight: 500; }
.rh-kk .rh-kk__rader dt { padding-right: var(--s3); color: var(--ink-muted); }
.rh-kk .rh-kk__rader dd { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rh-kk .rh-kk__rader dd.rh-kk__frakt { color: var(--ink-muted); }
.rh-kk .rh-kk__antall-tekst, .rh-kk .rh-kk__sub { color: var(--ink-subtle); font-size: 13px; font-weight: 500; }
.rh-kk .rh-kk__sub { display: block; }
.rh-kk .rh-kk__rader dt.rh-kk__tot-t, .rh-kk .rh-kk__rader dd.rh-kk__tot-v { margin-top: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--border); color: var(--ink); font-size: 18px; font-weight: 800; line-height: 1.3; }
.rh-kk .rh-kk__rader dt.rh-kk__tot-t { padding-right: var(--s3); }
.rh-kk .rh-kk__rader dt.rh-kk__mva-t, .rh-kk .rh-kk__rader dd.rh-kk__mva-v { padding-top: 0; color: var(--ink-subtle); font-size: 13px; font-weight: 500; }
.rh-kk__fjern-kupong { margin-left: var(--s1); color: var(--ink-muted); font-size: 12px; text-decoration: underline; }
.rh-kk .rh-kk__kupong { margin: 0 0 var(--s4); }
.rh-kk .rh-kk__kupong-ledd { display: block; margin: 0 0 var(--s1); font-size: 13px; font-weight: 700; color: var(--ink-muted); }
.rh-kk .rh-kk__kupong-rad { display: flex; gap: var(--s2); align-items: stretch; }
.rh-kk .rh-kk__kupong-feil { margin: var(--s1) 0 0; font-size: 14px; font-weight: 700; color: var(--feil); }   /* feil kode står ved feltet (28.10) */
/* kupongfelt, Bruk og «Gå til kassen»: samme høyde (48 px) og samme hjørner */
.rh-kk .rh-kk__kupong-rad .rh-felt, .rh-kk .rh-kk__kupong-rad .rh-knapp, .rh-kk .rh-kk__kasse { box-sizing: border-box; height: 48px; min-height: 48px; margin: 0; border-radius: var(--r-md); font-size: 16px; line-height: 1.2; }
.rh-kk .rh-kk__kupong-rad .rh-felt { flex: 1; min-width: 0; padding: 0 var(--s3); }
.rh-kk .rh-kk__kupong-rad .rh-knapp { flex: none; padding: 0 var(--s5); font-weight: 800; }
.rh-kk .rh-kk__kasse { display: flex; width: 100%; font-weight: 800; }
.rh-kk__ekspress { margin-top: var(--s2); }
.rh-kk__ekspress > * { max-width: 100%; }
.rh-kk__trygg { margin: var(--s3) 0 0; color: var(--ink-muted); font-size: 13px; text-align: center; }

/* krysssalg */
.rh-kk__krysssalg { margin-top: var(--s8); }
.rh-kk__krysssalg-tittel { margin: 0 0 var(--s3); font-size: 18px; }

/* tom kurv */
.rh-kk__tom { padding: var(--s10) var(--s4); text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.rh-kk__tom-tittel { margin: 0 0 var(--s1); font-size: 20px; font-weight: 800; }
.rh-kk__tom-tekst { margin: 0 0 var(--s4); color: var(--ink-muted); }
.rh-kk__tom-knapper { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin: 0; }

@container rh-kk-varer (min-width: 680px) {
	.rh-kk .rh-kk__linje { grid-template-columns: 88px minmax(0, 1fr) 124px 112px 72px; grid-template-areas: "bilde info antall total fjern"; padding: var(--s4) var(--s5); gap: var(--s4); }
	.rh-kk__bilde { width: 88px; height: 88px; }
	.rh-kk .rh-kk__total { justify-self: stretch; }
}
@media (min-width: 900px) {
	.rh-kk__rutenett { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s8); }
	.rh-kk__sum { position: sticky; top: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
	.rh-kk--opptatt { transition: none; }
}