/* ==========================================================================
   03 – KOMPONENTER
   --------------------------------------------------------------------------
   Alle gjenbrukbare byggeklosser, definert ÉN gang:
   grunnklasse → variant → (plassering gjøres lokalt i 10–14).

   Regler for denne fila:
   - Bare var(--kc-…). Ingen hex, ingen px utenom 0.
   - WooCommerce-elementer som ikke kan få vår klasse, står i SAMME
     selektorliste som komponenten – ikke i en egen regel.
   - Varianter setter bare det som skiller seg fra grunnklassen.

   Innhold:
     1  Knapper            9  Bilderamme
     2  Ikonknapper       10  Tabell
     3  Skjemafelt        11  Varsel
     4  Avkrysning        12  Hake-sirkel
     5  Kort og infokort  13  Sammenfoldbar
     6  Merker            14  Sumtabell
     7  Lagerstatus       15  Laster-tilstand
     8  Pris og antall    16  Teller
   ========================================================================== */


/* --------------------------------------------------------------------------
   1  KNAPPER
   Grunnklasse .kc-knapp. All knappetekst 16/800, 48 px høy, pilleform.
   Varianter: --primaer (mørkeblå) og --lys (hvit med kant).
   WooCommerce-knapper (.button) er med i lista, så de ser like ut.
   -------------------------------------------------------------------------- */
.kc-knapp,
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-pagination .page-numbers:where(a, span) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--kc-luft-2);
	height: var(--kc-kontroll);
	padding: 0 var(--kc-knapp-luft);
	border: var(--kc-strek) solid transparent;
	border-radius: var(--kc-r-pill);
	font-family: var(--kc-font);
	font-size: var(--kc-tekst-knapp);
	line-height: var(--kc-lh-knapp);
	font-weight: var(--kc-vekt-knapp);
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--kc-overgang), border-color var(--kc-overgang);
}

/* Variant: primær. WooCommerce bruker .alt på hovedknappene. */
.kc-knapp--primaer,
.woocommerce .button.alt,
.woocommerce #place_order,
.woocommerce .checkout-button,
.woocommerce .single_add_to_cart_button,
.woocommerce-pagination span.page-numbers.current {
	background: var(--kc-navy);
	border-color: var(--kc-navy);
	color: var(--kc-white);
}

.kc-knapp--primaer:hover,
.woocommerce .button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover,
.woocommerce .single_add_to_cart_button:hover {
	background: var(--kc-navy-mork);
	border-color: var(--kc-navy-mork);
	color: var(--kc-white);
}

/* Variant: lys (sekundær). Alle WooCommerce-knapper uten .alt. */
.kc-knapp--lys,
.woocommerce .button:where(:not(.alt, #place_order, .checkout-button, .single_add_to_cart_button)),
.woocommerce-pagination .page-numbers:where(a, span):where(:not(.current)) {
	background: var(--kc-white);
	border-color: var(--kc-line-control);
	color: var(--kc-ink);
}

/* Hover på ALLE hvite klikkbare elementer – én regel (designsystemet). */
.kc-knapp--lys:hover,
.woocommerce .button:where(:not(.alt, #place_order, .checkout-button, .single_add_to_cart_button)):hover,
.woocommerce-pagination a.page-numbers:hover,
.kc-hvit-klikkbar:hover {
	background: var(--kc-surface-raised);
	border-color: var(--kc-navy);
	color: var(--kc-ink);
}

/* Full bredde (plassering, men brukes så ofte at den får en hjelpeklasse). */
.kc-knapp--bred {
	width: 100%;
}

/* Deaktivert knapp. */
.kc-knapp:disabled,
.woocommerce .button:disabled,
.woocommerce .button.disabled {
	opacity: var(--kc-deaktivert);
	cursor: default;
}

/* Knapper side om side (f.eks. visningsvalget Rutenett / Liste). */
.kc-knappegruppe {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kc-luft-2);
}

/* Ikon inne i knapp. */
.kc-knapp svg {
	width: var(--kc-ikon-liten);
	height: var(--kc-ikon-liten);
	flex: none;
}


/* --------------------------------------------------------------------------
   2  IKONKNAPPER
   .kc-ikonknapp: rund knapp med bare ikon (konto, handlekurv, fjern vare).
   .kc-pluss: den runde «legg i handlekurv»-plussen på produktkort.
   Begge har trykkflate på minst --kc-trykkflate. Alltid aria-label.
   -------------------------------------------------------------------------- */
.kc-ikonknapp {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--kc-trykkflate);
	height: var(--kc-trykkflate);
	padding: 0;
	border: 0;
	border-radius: var(--kc-r-rund);
	background: transparent;
	color: var(--kc-ink);
	text-decoration: none;
	cursor: pointer;
}

.kc-ikonknapp:hover {
	background: var(--kc-surface-raised);
	color: var(--kc-ink);
}

.kc-ikonknapp svg {
	width: var(--kc-ikon-stor);
	height: var(--kc-ikon-stor);
}

/* Liten variant (fjern-krysset i handlekurven). */
.kc-ikonknapp--liten svg {
	width: var(--kc-ikon);
	height: var(--kc-ikon);
}

/* Den runde plussen. Bevisst unntak i designsystemet: 28 px synlig sirkel,
   usynlig trykkflate rundt via ::after. */
.kc-pluss {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--kc-rundknapp);
	height: var(--kc-rundknapp);
	padding: 0;
	border: 0;
	border-radius: var(--kc-r-rund);
	background: var(--kc-navy);
	color: var(--kc-white);
	cursor: pointer;
}

.kc-pluss::after {
	content: "";
	position: absolute;
	inset: calc((var(--kc-rundknapp) - var(--kc-trykkflate)) / 2);
}

.kc-pluss:hover {
	background: var(--kc-navy-mork);
	color: var(--kc-white);
}

.kc-pluss svg {
	width: var(--kc-ikon-liten);
	height: var(--kc-ikon-liten);
}

/* WooCommerce legger «Vis handlekurv»-lenken etter knappen når varen er lagt til.
   Vi viser «N i handlekurven» i stedet (se 10-katalog), så lenken skjules. */
.kc-pluss + .added_to_cart {
	display: none;
}

/* WooCommerce setter .loading på knappen mens varen legges til. */
.kc-pluss.loading {
	opacity: var(--kc-deaktivert);
}


/* --------------------------------------------------------------------------
   3  SKJEMAFELT
   Alle felt får dette fra felttypen, også i WooCommerce og plugins.
   Pilleform, 48 px, kant i line-control. Tekstområder er varianten med
   radius-lg og luft over og under.
   -------------------------------------------------------------------------- */
.kc-felt,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
select,
textarea {
	width: 100%;
	height: var(--kc-kontroll);
	margin: 0;
	padding: 0 var(--kc-felt-luft);
	border: var(--kc-strek) solid var(--kc-line-control);
	border-radius: var(--kc-r-pill);
	background: var(--kc-white);
	color: var(--kc-ink);
	font-family: var(--kc-font);
	font-size: var(--kc-tekst-body); /* 16 px: ellers zoomer iPhone inn */
	line-height: var(--kc-lh-body);
}

::placeholder {
	color: var(--kc-ink-muted);
	opacity: 1;
}

/* Variant: tekstområde over flere linjer. */
textarea,
.kc-felt--omrade {
	height: auto;
	min-height: calc(var(--kc-kontroll) * 2);
	padding: var(--kc-luft-2) var(--kc-felt-luft);
	border-radius: var(--kc-r-lg);
	resize: vertical;
}

/* Etikett over feltet. WooCommerce sine skjemarader (.form-row) er med. */
.kc-etikett,
.woocommerce form .form-row label {
	display: block;
	margin-bottom: var(--kc-luft-2);
	font-size: var(--kc-tekst-liten);
	line-height: var(--kc-lh-liten);
	font-weight: var(--kc-vekt-fet);
}

/* Felt med luft under (skjemarad). */
.kc-skjemarad,
.woocommerce form .form-row {
	margin: 0 0 var(--kc-luft-4);
	padding: 0;
}

/* «(valgfritt)» og stjerne for påkrevd. */
.woocommerce form .form-row .optional,
.kc-valgfritt {
	font-weight: var(--kc-vekt-normal);
	color: var(--kc-ink-muted);
}

.woocommerce form .form-row .required {
	color: inherit;
	text-decoration: none;
}

/* Søkefeltet i headeren er et bevisst unntak: lys bunn, ingen kant, ikon foran. */
.kc-sokefelt {
	position: relative;
}

.kc-sokefelt svg {
	position: absolute;
	left: var(--kc-luft-4);
	top: 50%;
	width: var(--kc-ikon);
	height: var(--kc-ikon);
	transform: translateY(-50%);
	pointer-events: none;
}

.kc-sokefelt input[type="search"] {
	border-color: transparent;
	background: var(--kc-surface-raised);
	padding-left: var(--kc-ikoninnrykk);
}


/* --------------------------------------------------------------------------
   4  AVKRYSNING OG RADIOKNAPPER
   Nettleserens egne, farget med accent-color. Etiketten ved siden av
   bruker .kc-valg.
   -------------------------------------------------------------------------- */
input[type="checkbox"],
input[type="radio"] {
	flex: none;
	width: var(--kc-avkrysning);
	height: var(--kc-avkrysning);
	margin: 0;
	accent-color: var(--kc-navy);
}

.kc-valg,
.woocommerce form .form-row label.checkbox,
.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--kc-luft-2);
	font-size: var(--kc-tekst-liten);
	line-height: var(--kc-lh-liten);
	font-weight: var(--kc-vekt-normal);
	cursor: pointer;
}


/* --------------------------------------------------------------------------
   5  KORT OG INFOKORT
   .kc-kort: hvitt kort med kant. Varianter --meny (8 px luft) og
   --uten-luft (bilde eller tabell helt ut i kanten).
   .kc-infokort: lyseblå flate uten kant.
   -------------------------------------------------------------------------- */
.kc-kort {
	background: var(--kc-white);
	border: var(--kc-strek) solid var(--kc-line);
	border-radius: var(--kc-r-lg);
	padding: var(--kc-luft-6);
}

.kc-kort--meny {
	padding: var(--kc-luft-2);
}

.kc-kort--uten-luft {
	padding: 0;
	overflow: hidden;
}

.kc-infokort {
	background: var(--kc-surface-raised);
	border-radius: var(--kc-r-lg);
	padding: var(--kc-luft-6);
}

/* Innhold i kort med jevn luft mellom elementene. */
.kc-stabel {
	display: flex;
	flex-direction: column;
	gap: var(--kc-luft-4);
}

@media (max-width: 849px) {
	.kc-kort:where(:not(.kc-kort--meny, .kc-kort--uten-luft)),
	.kc-infokort {
		padding: var(--kc-luft-4);
	}
}


/* --------------------------------------------------------------------------
   6  MERKER
   Grunnklasse .kc-merke: 24 px høy, radius-sm, 12 px fet.
   Produktmerker (store bokstaver): --nyhet, --utsolgt, --bestilling, --salg.
   Statusmerker for ordre (vanlige bokstaver): --behandles, --venter,
   --betaling, --sendt, --kansellert.
   -------------------------------------------------------------------------- */
.kc-merke {
	display: inline-flex;
	align-items: center;
	height: var(--kc-merke-hoyde);
	padding: 0 var(--kc-luft-2);
	border-radius: var(--kc-r-sm);
	font-size: var(--kc-tekst-mini);
	line-height: var(--kc-lh-mini);
	font-weight: var(--kc-vekt-fet);
	white-space: nowrap;
}

.kc-merke--nyhet      { background: var(--kc-green-merke);  color: var(--kc-white); }
.kc-merke--bestilling { background: var(--kc-orange);       color: var(--kc-navy); }
.kc-merke--salg       { background: var(--kc-red-tekst);    color: var(--kc-white); }
.kc-merke--utsolgt,
.kc-merke--kansellert { background: var(--kc-surface-raised); color: var(--kc-ink-muted); }
.kc-merke--utsolgt    { border: var(--kc-strek) solid var(--kc-line); }
.kc-merke--behandles  { background: var(--kc-blue-dempet);   color: var(--kc-blue-tekst); }
.kc-merke--venter     { background: var(--kc-orange-dempet); color: var(--kc-orange-tekst); }
.kc-merke--betaling   { background: var(--kc-red-dempet);    color: var(--kc-red-tekst); }
.kc-merke--sendt      { background: var(--kc-green-dempet);  color: var(--kc-green-tekst); }

/* Produktmerker står i store bokstaver. */
.kc-merke--nyhet,
.kc-merke--bestilling,
.kc-merke--salg,
.kc-merke--utsolgt {
	text-transform: uppercase;
	font-weight: var(--kc-vekt-knapp);
	letter-spacing: var(--kc-sperring);
}


/* --------------------------------------------------------------------------
   7  LAGERSTATUS
   .kc-lager: prikk + tekst («7 på lager»). Teksten sier alltid statusen
   i ord – bare prikken har farge.
   -------------------------------------------------------------------------- */
.kc-lager {
	display: inline-flex;
	align-items: center;
	gap: var(--kc-luft-2);
	font-size: var(--kc-tekst-mini);
	line-height: var(--kc-lh-mini);
	color: var(--kc-ink-muted);
}

.kc-lager--stor {
	font-size: var(--kc-tekst-liten);
	line-height: var(--kc-lh-liten);
	color: var(--kc-ink);
}

.kc-prikk {
	flex: none;
	width: var(--kc-prikk);
	height: var(--kc-prikk);
	border-radius: var(--kc-r-rund);
}

.kc-prikk--pa-lager   { background: var(--kc-green); }
.kc-prikk--bestilling { background: var(--kc-orange); }
.kc-prikk--utsolgt    { background: var(--kc-red); }
.kc-prikk--kommer     { background: var(--kc-blue); }


/* --------------------------------------------------------------------------
   8  PRIS OG ANTALL
   .kc-pris: fet pris. «eks. mva» (WooCommerce sitt prissuffiks) i 12 px.
   .kc-antall: den felles antallvelgeren (− tall +). Bevisst unntak i
   designsystemet: egen stil, men én definisjon.
   -------------------------------------------------------------------------- */
.kc-pris,
.woocommerce .price {
	font-weight: var(--kc-vekt-knapp);
	color: var(--kc-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.woocommerce-price-suffix {
	margin-left: var(--kc-luft-1);
	font-size: var(--kc-tekst-mini);
	line-height: var(--kc-lh-mini);
	font-weight: var(--kc-vekt-normal);
	color: var(--kc-ink-muted);
}

/* WooCommerce sin .quantity får klassen kc-antall i woocommerce/global/quantity-input.php. */
.kc-antall {
	display: inline-flex;
	align-items: center;
	height: var(--kc-kontroll);
	border: var(--kc-strek) solid var(--kc-line-control);
	border-radius: var(--kc-r-pill);
	background: var(--kc-white);
}

.kc-antall__knapp {
	width: var(--kc-trykkflate);
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--kc-r-pill);
	background: transparent;
	color: var(--kc-ink);
	font-family: var(--kc-font);
	font-size: var(--kc-tekst-h3);
	font-weight: var(--kc-vekt-fet);
	cursor: pointer;
}

.kc-antall__knapp:hover {
	background: var(--kc-surface-raised);
}

.kc-antall__knapp:disabled {
	opacity: var(--kc-deaktivert);
	cursor: default;
}

/* Tallfeltet inne i antallvelgeren har ingen egen kant. */
.kc-antall input[type="number"] {
	width: calc(var(--kc-trykkflate) - var(--kc-luft-1));
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font-weight: var(--kc-vekt-fet);
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

.kc-antall input[type="number"]::-webkit-inner-spin-button,
.kc-antall input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}


/* --------------------------------------------------------------------------
   9  BILDERAMME
   Små produktbilder i lister: tabell (48 px) og handlekurv/kasse (56 px).
   -------------------------------------------------------------------------- */
.kc-bilderamme {
	flex: none;
	width: var(--kc-bilderamme);
	height: var(--kc-bilderamme);
	padding: var(--kc-bilderamme-luft);
	background: var(--kc-white);
	border: var(--kc-strek) solid var(--kc-line);
	border-radius: var(--kc-r-md);
	overflow: hidden;
}

.kc-bilderamme--stor {
	width: var(--kc-bilderamme-stor);
	height: var(--kc-bilderamme-stor);
}

.kc-bilderamme img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}


/* --------------------------------------------------------------------------
   10  TABELL
   Ligger i .kc-tabellramme (hvitt kort uten luft som scroller vannrett).
   Kolonnetitler i 12 px fet, store bokstaver. Rader i 14 px.
   Variant --tett: mindre luft over og under (rader med bilde).
   WooCommerce-tabellene (.shop_table) er med i lista.
   -------------------------------------------------------------------------- */
.kc-tabellramme {
	background: var(--kc-white);
	border: var(--kc-strek) solid var(--kc-line);
	border-radius: var(--kc-r-lg);
	overflow-x: auto;
}

.kc-tabell,
.woocommerce table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: var(--kc-tekst-liten);
	line-height: var(--kc-lh-liten);
}

.kc-tabell th,
.woocommerce table.shop_table thead th {
	padding: var(--kc-luft-2) var(--kc-luft-4);
	border-bottom: var(--kc-strek) solid var(--kc-line);
	font-size: var(--kc-tekst-mini);
	line-height: var(--kc-lh-mini);
	font-weight: var(--kc-vekt-fet);
	text-transform: uppercase;
	text-align: left;
	color: var(--kc-ink-muted);
	white-space: nowrap;
}

.kc-tabell td,
.woocommerce table.shop_table td {
	padding: var(--kc-luft-4);
	border-bottom: var(--kc-strek) solid var(--kc-line);
	vertical-align: middle;
}

.kc-tabell tbody tr:last-child td,
.woocommerce table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

.kc-tabell--tett td {
	padding-block: var(--kc-luft-2);
}

/* Beløpskolonne: høyrestilt, 16 px fet, tabulære tall. */
.kc-tabell .kc-belop {
	text-align: right;
	font-size: var(--kc-tekst-body);
	font-weight: var(--kc-vekt-fet);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.kc-tabell .kc-hoyre {
	text-align: right;
	white-space: nowrap;
}

/* Handlinger i en rad (lenke + knapp side om side, f.eks. «Faktura» og «Bestill på nytt»). */
.kc-tabell .kc-handlinger {
	display: inline-flex;
	align-items: center;
	gap: var(--kc-luft-4);
}

/* Vare-celle: bilde + navn. */
.kc-varecelle {
	display: flex;
	align-items: center;
	gap: var(--kc-luft-4);
}

.kc-varecelle a {
	font-weight: var(--kc-vekt-medium);
	text-decoration: none;
}


/* --------------------------------------------------------------------------
   11  VARSEL
   Melding inne i siden. Grunnklasse .kc-varsel; varianter --advarsel,
   --feil og --info. WooCommerce-meldingene er med:
   .woocommerce-error = feil, .woocommerce-message/-info = info.
   Teksten sier alltid hva som skjedde – fargen er aldri alene.
   -------------------------------------------------------------------------- */
.kc-varsel,
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--kc-luft-2);
	margin: 0 0 var(--kc-luft-4);
	padding: var(--kc-luft-4);
	border: 0;
	border-radius: var(--kc-r-lg);
	list-style: none;
	font-size: var(--kc-tekst-liten);
	line-height: var(--kc-lh-liten);
}

.kc-varsel svg {
	flex: none;
	width: var(--kc-ikon);
	height: var(--kc-ikon);
}

.kc-varsel--advarsel {
	background: var(--kc-orange-dempet);
	color: var(--kc-orange-tekst);
}

.kc-varsel--feil,
.woocommerce-error {
	background: var(--kc-red-dempet);
	color: var(--kc-red-tekst);
}

.kc-varsel--info,
.woocommerce-message,
.woocommerce-info {
	background: var(--kc-surface-raised);
	color: var(--kc-ink);
}

/* WooCommerce legger hver feil i en <li>. */
.woocommerce-error li {
	flex-basis: 100%;
}

/* WooCommerce sine ikoner (::before) erstattes ikke – de skjules. */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
	content: none;
}

/* Knapp inne i en melding («Vis handlekurv») står til høyre. */
.woocommerce-message .button,
.woocommerce-info .button {
	order: 2;
	margin-left: auto;
}


/* --------------------------------------------------------------------------
   12  HAKE-SIRKEL
   Grønn sirkel med hake. Liten i lister, stor i bekreftelsen.
   -------------------------------------------------------------------------- */
.kc-hake {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--kc-hake-liten);
	height: var(--kc-hake-liten);
	border-radius: var(--kc-r-rund);
	background: var(--kc-green-dempet);
	color: var(--kc-green-ikon);
}

.kc-hake svg {
	width: var(--kc-ikon-liten);
	height: var(--kc-ikon-liten);
}

.kc-hake--stor {
	width: var(--kc-hake-stor);
	height: var(--kc-hake-stor);
}

.kc-hake--stor svg {
	width: var(--kc-ikon);
	height: var(--kc-ikon);
}

/* Liste med hake foran hvert punkt. */
.kc-hakeliste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(var(--kc-kort-min) * 1.4), 1fr));
	gap: var(--kc-luft-2) var(--kc-luft-6);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--kc-tekst-liten);
	line-height: var(--kc-lh-liten);
}

.kc-hakeliste li {
	display: flex;
	align-items: center;
	gap: var(--kc-luft-2);
}


/* --------------------------------------------------------------------------
   13  SAMMENFOLDBAR
   Nummererte punkter i kassen, som på kanoncon.no: mørkeblå nummersirkel,
   tittel i Peace Sans, «+» til høyre når lukket og «−» når åpen. Lukket
   viser en oppsummering. Punktene skilles med strek over.
   Åpen/lukket styres av aria-expanded (se assets/js/b2b.js).
   -------------------------------------------------------------------------- */
.kc-fold {
	margin-top: var(--kc-luft-2);
	padding: var(--kc-luft-6) 0 var(--kc-luft-4);
	border-top: var(--kc-strek) solid var(--kc-line);
}

/* Første punkt i kortet: ingen strek over (KC_Tema_Kasse::punkt_start setter klassen på punkt 1). */
.kc-fold--forst {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.kc-fold-tittel {
	display: flex;
	align-items: center;
	gap: var(--kc-luft-2);
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--kc-ink);
	text-align: left;
	cursor: pointer;
}

/* Nummersirkelen foran tittelen. */
.kc-fold-nr {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--kc-fold-nr);
	height: var(--kc-fold-nr);
	border-radius: var(--kc-r-rund);
	background: var(--kc-navy);
	color: var(--kc-white);
	font-family: var(--kc-font);
	font-size: var(--kc-tekst-liten);
	font-weight: var(--kc-vekt-knapp);
	line-height: 1;
}

.kc-fold-tegn {
	margin-left: auto;
	font-family: var(--kc-font);
	font-size: var(--kc-tekst-h3);
	line-height: var(--kc-lh-h3);
	font-weight: var(--kc-vekt-normal);
}

.kc-fold-tegn::before {
	content: "+";
}

.kc-fold-tittel[aria-expanded="true"] .kc-fold-tegn::before {
	content: "−";
}

.kc-fold-oppsummering {
	margin-top: var(--kc-luft-2);
	font-size: var(--kc-tekst-liten);
	line-height: var(--kc-lh-liten);
}

.kc-fold-innhold {
	margin-top: var(--kc-luft-4);
}

/* Åpent punkt viser innhold, lukket viser oppsummering. */
.kc-fold-tittel[aria-expanded="true"] ~ .kc-fold-oppsummering,
.kc-fold-tittel[aria-expanded="false"] ~ .kc-fold-innhold {
	display: none;
}


/* --------------------------------------------------------------------------
   14  SUMTABELL
   Handlekurv og kasse. En <table>, fordi WooCommerce skriver frakt- og
   mva-radene som tabellrader. Rader i 14 px, beløp til høyre.
   Totalt (.kc-sum-total) med strek over, Peace Sans på ordet og fet sum.
   Hjelpetekst (.kc-sum-hjelp, «inkl. … mva») i 12 px dempet.
   -------------------------------------------------------------------------- */
.kc-sum {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--kc-tekst-liten);
	line-height: var(--kc-lh-liten);
}

.kc-sum th,
.kc-sum td {
	padding: var(--kc-luft-1) 0;
	border: 0;
	vertical-align: top;
}

.kc-sum th {
	text-align: left;
	font-weight: var(--kc-vekt-normal);
}

.kc-sum td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.kc-sum .kc-sum-total th,
.kc-sum .kc-sum-total td {
	padding-top: var(--kc-luft-4);
	border-top: var(--kc-strek) solid var(--kc-line);
	vertical-align: baseline;
}

.kc-sum .kc-sum-total th {
	font-family: var(--kc-font-display);
	font-size: var(--kc-tekst-h3);
	line-height: var(--kc-lh-h3);
}

.kc-sum .kc-sum-total td {
	font-size: var(--kc-tekst-h3);
	line-height: var(--kc-lh-h3);
	font-weight: var(--kc-vekt-knapp);
	white-space: nowrap;
}

.kc-sum .kc-sum-hjelp td {
	padding-top: 0;
	font-size: var(--kc-tekst-mini);
	line-height: var(--kc-lh-mini);
	color: var(--kc-ink-muted);
}


/* --------------------------------------------------------------------------
   15  LASTER-TILSTAND
   Hvitt lag med 60 % dekning over det som oppdateres. WooCommerce bruker
   blockUI, som setter farge i style-attributtet – derfor !important.
   -------------------------------------------------------------------------- */
.kc-laster,
.blockUI.blockOverlay {
	background: var(--kc-laster-dekning) !important; /* !important: blockUI setter bakgrunn inline */
	opacity: 1 !important;                             /* !important: blockUI setter opacity inline */
	cursor: wait;
}


/* --------------------------------------------------------------------------
   16  TELLER
   Antall varer på handlekurv-ikonet. Rød sirkel med hvit tekst, som på kanoncon.no.
   -------------------------------------------------------------------------- */
.kc-teller {
	position: absolute;
	top: 0;
	right: 0;
	min-width: var(--kc-teller);
	height: var(--kc-teller);
	padding: 0 var(--kc-luft-1);
	border-radius: var(--kc-r-pill);
	background: var(--kc-red);
	color: var(--kc-white);
	font-size: var(--kc-tekst-mini);
	line-height: var(--kc-teller);
	font-weight: var(--kc-vekt-fet);
	text-align: center;
}

.kc-teller:empty {
	display: none;
}