/* =========================================================
   THE CART AND THE CHECKOUT
   =========================================================
   Same tokens as the price tiles, so buying looks like the
   rest of the site and not like a plugin bolted on.

   [hidden] IS REPEATED FOR EVERY COMPONENT. A class that sets
   display wins over the hidden attribute, and the cart button
   would then show on an empty cart.
   ========================================================= */

.ca-korgknapp[hidden],
.ca-korgtoast[hidden],
.ca-korgpanel[hidden],
.ca-kassa [hidden] { display: none !important; }

html.ca-korg-oppen { overflow: hidden; }

/* The theme gives every button a shadow. The plain text buttons here are
   links in look, so they get none. */
.ca-korgpanel .ca-korgpanel__stang,
.ca-korgpanel .ca-korgpanel__fortsatt,
.ca-korgrad__kontroll .ca-korgrad__bort,
.ca-korgrad__antal button { box-shadow: none; }

/* ---- The tile's add line ---- */

.ca-paket__lagg {
	margin-block-start: var(--ca-rum-2);
	font-size: var(--ca-text-xs);
	font-weight: 600;
	color: var(--ca-brand-stark);
}

.ca-paket__ruta.ca-i-korgen {
	border-color: var(--ca-brand);
	background: var(--ca-surface-2);
}

.ca-paket__ruta.ca-i-korgen .ca-paket__lagg { color: var(--ca-ok); }

/* ---- The package card's add button ---- */

.ca-byggen .ca-bygge__lagg { justify-self: start; margin-block-start: var(--ca-rum-2); }

.ca-bygge__lagg.ca-i-korgen { background: var(--ca-ok); }

/* ---- The floating cart button ----
   Only drawn when the cart holds something.

   UPPE TILL HOGER, INTE NERE. Nere delade den horn med fragaknappen, och
   tva flytande knappar ovanpa varandra at for mycket av en telefonskarm.
   Uppe ar dessutom dar en kundvagn brukar sitta.

   --ca-korg-topp sätts av korg.js och foljer sidhuvudet: sa lange huvudet
   syns ligger knappen under det, sedan lagger den sig i overkanten. Utan
   det hade den legat ovanpa hamburgermenyn hogst upp pa sidan. */

.ca-korgknapp {
	position: fixed;
	z-index: 9990;
	inset-inline-end: max(1rem, env(safe-area-inset-right));
	inset-block-start: var(--ca-korg-topp, max(1rem, env(safe-area-inset-top)));
	display: inline-flex;
	align-items: center;
	gap: var(--ca-rum-2);
	min-height: var(--ca-traffyta);
	padding: 0 var(--ca-rum-5);
	border: 0;
	border-radius: 999px;
	background: var(--ca-brand-deep);
	color: var(--ca-ink-invers);
	font: 600 var(--ca-text-sm)/1 var(--ca-font);
	box-shadow: 0 10px 30px -12px rgba(31, 20, 26, .55);
	cursor: pointer;
}

.ca-korgknapp:hover,
.ca-korgknapp:focus-visible { background: var(--ca-brand-stark); }

.ca-korgknapp:focus-visible { outline: 3px solid var(--ca-brand); outline-offset: 3px; }

/* Ikonen fanns aldrig. Spannet var tomt, sa pa en telefon utan ordet
   blev knappen en morkt cirkel med en siffra i, vilket inte sager
   kundvagn for nagon. Nu ar det en ritad kassepase. */
.ca-korgknapp__ikon { flex: none; }

/* PA TELEFON FLYTER INGEN KORGKNAPP. Den bor i mobilmenyn i stallet, med
   en prick pa hamburgaren som visar att det finns nagot dar. Tva flytande
   knappar i samma horn at for mycket av en telefonskarm, och uppe till
   hoger lade sig korgen over sidans rubrik. */
@media (max-width: 47.9375em) {
	.ca-korgknapp { display: none !important; }
}

/* Pricken pa hamburgaren. Sitter i knappens hogra overkant. */
.menu-toggle { position: relative; }

.ca-korgprick {
	position: absolute;
	inset-block-start: -.35rem;
	inset-inline-end: -.35rem;
	display: grid;
	place-items: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 .3rem;
	border-radius: 999px;
	background: var(--ca-brand-deep);
	color: var(--ca-white);
	font: 700 .7rem/1 var(--ca-font);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

/* Bekraftelsen. INTE konfetti: den som koper nagot hen inte vill skylta
   med vill inte att skarmen firar. En kort puls sager "jag tog emot det"
   utan att gora en sak av det. Toasten bar sjalva meddelandet. */
@keyframes ca-korgprick-puls {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.45); }
	100% { transform: scale(1); }
}

.ca-korgprick--puls { animation: ca-korgprick-puls .45s ease-out; }

@media (prefers-reduced-motion: reduce) {
	.ca-korgprick--puls { animation: none; }
}

.ca-korgknapp__antal {
	display: inline-grid;
	place-items: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 .35rem;
	border-radius: 999px;
	background: var(--ca-white);
	color: var(--ca-brand-deep);
	font-size: var(--ca-text-xs);
	font-variant-numeric: tabular-nums;
}

.ca-korgknapp__summa {
	padding-inline-start: var(--ca-rum-2);
	border-inline-start: 1px solid rgba(255, 255, 255, .35);
	font-variant-numeric: tabular-nums;
}

/* ---- The toast ---- */

.ca-korgtoast {
	position: fixed;
	z-index: 9991;
	inset-inline-end: max(1rem, env(safe-area-inset-right));
	inset-block-end: calc(var(--ca-samtycke-hojd, 0px) + var(--ca-fraga-hojd, 0px) + 5rem);
	display: grid;
	gap: var(--ca-rum-3);
	width: min(22rem, calc(100vw - 2rem));
	padding: var(--ca-rum-5);
	background: var(--ca-white);
	border: 1px solid var(--ca-line);
	border-inline-start: 4px solid var(--ca-ok);
	border-radius: var(--ca-radie-stor);
	box-shadow: var(--ca-skugga);
}

.ca-korgtoast__text { margin: 0; font-size: var(--ca-text-sm); color: var(--ca-ink); }

.ca-korgtoast .ca-knapp { justify-self: start; }

/* ---- The panel ---- */

.ca-korgpanel { position: fixed; inset: 0; z-index: 9995; }

.ca-korgpanel__skugga { position: absolute; inset: 0; background: rgba(31, 20, 26, .45); }

.ca-korgpanel__ruta {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	width: min(26rem, 100%);
	background: var(--ca-ground);
	box-shadow: -12px 0 40px -20px rgba(31, 20, 26, .5);
	overflow-y: auto;
	padding-block-end: env(safe-area-inset-bottom);
}

.ca-korgpanel__ruta:focus { outline: none; }

.ca-korgpanel__huvud {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ca-rum-5) var(--ca-rum-6);
	border-block-end: 1px solid var(--ca-line);
	background: var(--ca-white);
}

.ca-korgpanel__huvud h2 { margin: 0; font-size: var(--ca-text-xl); }

.ca-korgpanel__stang {
	width: var(--ca-traffyta);
	height: var(--ca-traffyta);
	border: 0;
	background: transparent;
	color: var(--ca-ink);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.ca-korgpanel__innehall { display: grid; gap: var(--ca-rum-4); padding: var(--ca-rum-6); }

.ca-korgpanel__tom { margin: 0; color: var(--ca-ink-dampad); }

.ca-korgpanel__total,
.ca-kassa__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0;
	padding-block-start: var(--ca-rum-4);
	border-block-start: 1px solid var(--ca-line);
	font-size: var(--ca-text-lg);
}

.ca-korgpanel__total strong,
.ca-kassa__total strong { font-size: var(--ca-text-xl); font-variant-numeric: tabular-nums; }

.ca-korgpanel__kassa { text-align: center; }

.ca-korgpanel__fortsatt {
	min-height: var(--ca-traffyta);
	border: 0;
	background: transparent;
	color: var(--ca-brand-stark);
	font: 600 var(--ca-text-sm) var(--ca-font);
	cursor: pointer;
}

/* ---- One cart line, in the panel and at checkout ---- */

.ca-korgrader,
.ca-kassa .ca-kassa__rader {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
}

.ca-korgrad {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--ca-rum-2) var(--ca-rum-4);
	padding-block: var(--ca-rum-4);
	border-block-end: 1px solid var(--ca-line);
}

.ca-korgrad__titel,
.ca-kassa__radtitel { color: var(--ca-ink); font-size: var(--ca-text-sm); line-height: 1.4; }

.ca-korgrad__pris,
.ca-kassa__radpris { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

.ca-korgrad__kontroll {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ca-rum-3);
}

.ca-korgrad__antal {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ca-line);
	border-radius: var(--ca-radie);
	background: var(--ca-white);
}

.ca-korgrad__antal button {
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	background: transparent;
	color: var(--ca-ink);
	font-size: 1.25rem;
	cursor: pointer;
}

.ca-korgrad__antal span { min-width: 2rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

.ca-korgrad__bort {
	min-height: 2.75rem;
	border: 0;
	background: transparent;
	color: var(--ca-ink-dampad);
	font: var(--ca-text-xs) var(--ca-font);
	text-decoration: underline;
	cursor: pointer;
}

/* ---- The checkout ---- */

.ca-kassa {
	display: grid;
	gap: var(--ca-rum-8);
	max-width: 44rem;
	margin-inline: auto;
	text-align: start;
}

.ca-kassa__form,
.ca-kassa__betala,
.ca-kassa__sammanfattning {
	display: grid;
	gap: var(--ca-rum-3);
	padding: var(--ca-rum-7) var(--ca-rum-6);
	background: var(--ca-white);
	border: 1px solid var(--ca-line);
	border-radius: var(--ca-radie-stor);
	box-shadow: var(--ca-skugga);
}

.ca-kassa .ca-kassa__rubrik { margin: 0 0 var(--ca-rum-2); font-size: var(--ca-text-2xl); }

.ca-kassa .ca-kassa__rubrik--liten { font-size: var(--ca-text-lg); }

.ca-kassa .ca-kassa__rad {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ca-rum-2);
	padding-block: var(--ca-rum-5);
	border-block-end: 1px solid var(--ca-line);
}

.ca-kassa__radhuvud { display: flex; justify-content: space-between; gap: var(--ca-rum-4); }

.ca-kassa__etikett { margin-block-start: var(--ca-rum-2); font-size: var(--ca-text-sm); font-weight: 600; color: var(--ca-ink); }

/* The border is #735E6A, not the old #A8969F: a field's edge is what tells
   you a field is there, and the old one measured 2.4:1 against white, under
   the 3:1 that WCAG 2.2 asks of a control's boundary. This one is 5.9:1. */
.ca-kassa .ca-kassa__falt,
.ca-kassa input.ca-kassa__falt,
.ca-kassa textarea.ca-kassa__falt {
	width: 100%;
	min-height: var(--ca-traffyta);
	padding: 0 var(--ca-rum-4);
	border: 1px solid #735E6A;
	border-radius: var(--ca-radie);
	background: var(--ca-white);
	color: var(--ca-ink);
	font: var(--ca-text-bas) var(--ca-font);
}

/* A comment text is several lines, so it gets height and no fixed line. */
.ca-kassa textarea.ca-kassa__falt--text { min-height: 6rem; padding-block: var(--ca-rum-2); line-height: 1.5; resize: vertical; }

.ca-kassa .ca-kassa__falt:focus-visible { outline: 3px solid var(--ca-brand); outline-offset: 1px; border-color: var(--ca-brand); }

/* Red last, so a field that is empty stays visibly wrong when we move
   focus to it instead of turning brand coloured under the focus ring. */
.ca-kassa .ca-kassa__falt[aria-invalid="true"] { border: 2px solid var(--ca-fel); }
.ca-kassa .ca-kassa__falt[aria-invalid="true"]:focus-visible { outline-color: var(--ca-fel); border-color: var(--ca-fel); }

/* The message for one field, right under it and tied to it with
   aria-describedby. The summary by the pay button stays as well. */
.ca-kassa__faltfel {
	display: block;
	margin-block-start: var(--ca-rum-1);
	color: var(--ca-fel);
	font-size: var(--ca-text-sm);
	font-weight: 600;
}

.ca-kassa__faltfel[hidden] { display: none; }

/* Vad raden faktiskt galler: "2,000 viewers, for 1 hour". Utan den betyder
   ett tal i kassan tva olika saker och kunden kan inte se vilket. */
.ca-kassa__radvillkor {
	display: block;
	margin-block-start: var(--ca-rum-1);
	font-size: var(--ca-text-sm);
	color: var(--ca-ink-dampad);
}

.ca-kassa select.ca-kassa__falt { padding-inline-end: var(--ca-rum-8); }

/* The receipt is the page. The theme's own title said "Checkout" and its
   breadcrumb repeated it, and together with the page heading they used 386
   of a phone's 844 pixels, which pushed the QR code out of the first
   screen. The order number takes over as the h1, inside the box. */
.ca-orderkvitto .entry-header,
.ca-orderkvitto .ca-brodsmulor,
.ca-orderkvitto .ca-brodsmulor-rad,
.ca-orderkvitto .ca-kontaktrad { display: none; }

/* The page is one box. Everything above it is distance between the buyer
   and the code their phone has to read, so it is cut to a minimum. */
.ca-orderkvitto .site-content > .ast-container,
.ca-orderkvitto .entry-content > .ca-sektion,
.ca-orderkvitto .ca-sektion { padding-block: var(--ca-rum-4); }

.ca-orderkvitto .ast-container { padding-block-start: 0; }

.ca-kassa--order .ca-kassa__nummer {
	margin: 0 0 var(--ca-rum-2);
	font-size: var(--ca-text-sm);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ca-ink-dampad);
}

/* Both sit above the QR code on purpose, see the shortcode. They are the
   two sentences a buyer needs before looking at the code, not after. */
.ca-kassa__ore { margin-block: var(--ca-rum-2); font-size: var(--ca-text-sm); color: var(--ca-ink-dampad); }

.ca-kassa__betalt {
	margin-block: var(--ca-rum-2);
	padding: var(--ca-rum-2) var(--ca-rum-3);
	border-inline-start: 4px solid var(--ca-ok, #2E6B4F);
	background: #EEF6F1;
	font-size: var(--ca-text-sm);
	color: var(--ca-ink);
}

.ca-kassa__hjalp { margin: 0; font-size: var(--ca-text-xs); color: var(--ca-ink-dampad); }

/* The help above a link field, 2026-09-18. It says what to copy and shows
   an example, and the buyer has to read it before the field, so it is one
   step larger than other help lines. A long example link breaks anywhere
   instead of pushing the page wider than a phone. */
.ca-kassa__lankhjalp { margin-block-end: var(--ca-rum-1); font-size: var(--ca-text-sm); overflow-wrap: anywhere; }

.ca-kassa__falla { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ca-kassa__fel,
.ca-kassa__notis {
	margin: 0;
	padding: var(--ca-rum-3) var(--ca-rum-4);
	border-inline-start: 4px solid var(--ca-fel);
	background: #FBEDEC;
	color: var(--ca-fel);
	font-size: var(--ca-text-sm);
}

/* The pay button. Its own class: it was called ca-kassa__betala, the same
   as the pay box on the order page, and got that box's white background
   under white text. The button looked empty (browser test 2026-09-15). */
.ca-kassa__form .ca-kassa__knapp { width: 100%; min-height: 3.25rem; font-size: var(--ca-text-lg); }

.ca-kassa__form .ca-kassa__knapp:disabled { opacity: .7; cursor: progress; }

.ca-kassa__laddar,
.ca-kassa__tom,
.ca-kassa__not { margin: 0; color: var(--ca-ink-dampad); text-align: center; }

.ca-kassa__klar { margin: 0; color: var(--ca-ok); font-weight: 600; }

/* ---- The order page ---- */

.ca-kassa--order { max-width: 60rem; }

@media (min-width: 52rem) {
	.ca-kassa--order { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
}

.ca-kassa__nummer {
	margin: 0;
	font-size: var(--ca-text-xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ca-ink-dampad);
}

.ca-kassa__qr {
	width: min(18rem, 100%);
	margin-inline: auto;
	padding: var(--ca-rum-3);
	background: #fff;
	border: 1px solid var(--ca-line);
	border-radius: var(--ca-radie);
}

.ca-kassa__qr svg { display: block; width: 100%; height: auto; }

.ca-kassa__mottagare { margin: 0; text-align: center; font-size: var(--ca-text-sm); color: var(--ca-ink-dampad); }

.ca-kassa__spara { justify-self: center; }

.ca-kassa .ca-kassa__steg { margin: var(--ca-rum-3) 0 0; padding-inline-start: 1.25rem; font-size: var(--ca-text-sm); }

.ca-kassa__steg li { margin-block: var(--ca-rum-2); }

.ca-kassa__line { font-weight: 600; color: var(--ca-brand-stark); }

/* Order page only. Without the scope this also split the checkout lines
   into two columns, with the link field squeezed next to its label. */
.ca-kassa--order .ca-kassa__rader li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--ca-rum-1) var(--ca-rum-4);
	padding-block: var(--ca-rum-3);
	border-block-end: 1px solid var(--ca-line);
}

.ca-kassa__radlank {
	grid-column: 1 / -1;
	font-size: var(--ca-text-xs);
	color: var(--ca-ink-dampad);
	overflow-wrap: anywhere;
}

@media (max-width: 34rem) {
	.ca-kassa__form,
	.ca-kassa__betala,
	.ca-kassa__sammanfattning { padding: var(--ca-rum-6) var(--ca-rum-4); }

	.ca-korgknapp__summa { display: none; }
}

/* Innehallet i en paketrad, multiplicerat med antalet. Se innehall() i korg.js. */
.ca-korgrad__innehall { margin-block-start: 4px; font-size: .8125rem; color: var(--ca-ink-dampad); }
.ca-korgrad__innehall > summary { cursor: pointer; color: var(--ca-ink-dampad); font-weight: 500; }
.ca-korgrad__innehall > summary:hover { color: var(--ca-ink); }
.ca-korgrad__innehall ul { margin: 4px 0 0; padding: 0; list-style: none; }
.ca-korgrad__innehall li { margin: 0; padding: 2px 0; color: var(--ca-ink); font-variant-numeric: tabular-nums; }
.ca-kassa__raddel { display: block; font-size: .8125rem; color: var(--ca-ink); }

/* Anvandarnamnsfaltet: adressen framfor, namnet i faltet, en yta. */
.ca-kassa__handtag {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--ca-ink-dampad);
	border-radius: var(--ca-radie);
	background: var(--ca-white);
	overflow: hidden;
}

.ca-kassa__handtag:focus-within { border-color: var(--ca-brand); box-shadow: 0 0 0 2px var(--ca-brand); }

.ca-kassa__handtag-prefix {
	display: flex;
	align-items: center;
	padding-inline: 12px 2px;
	color: var(--ca-ink-dampad);
	white-space: nowrap;
	font-size: var(--ca-text-sm);
}

.ca-kassa .ca-kassa__handtag .ca-kassa__falt--handtag,
.ca-kassa .ca-kassa__handtag .ca-kassa__falt--handtag:focus {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	padding-inline-start: 0;
}

.ca-kassa__handtag:has([aria-invalid="true"]) { border-color: var(--ca-fel); }

/* Kontokontrollens rad under faltet. Se kontoRad() i korg.js. */
.ca-kassa__konto { margin: 6px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--ca-ink-dampad); }
.ca-kassa__konto[data-status="ok"] { color: var(--ca-ok); font-weight: 600; }
.ca-kassa__konto[data-status="ok"]::before { content: "\2713\00a0"; }
.ca-kassa__konto[data-status="privat"],
.ca-kassa__konto[data-status="saknas"],
.ca-kassa__konto[data-status="format"] { color: var(--ca-fel); font-weight: 600; }
.ca-kassa__konto[data-status="annan"] { color: var(--ca-brass); font-weight: 600; }

/* ---- Pay with crypto, se inc/krypto.php ---- */

.ca-krypto { display: grid; gap: var(--ca-rum-3); margin-top: var(--ca-rum-5); padding-top: var(--ca-rum-4); border-top: 1px solid var(--ca-line); }
.ca-krypto__lead { margin: 0; font-size: var(--ca-text-sm); color: var(--ca-ink-dampad); }
.ca-krypto__val { display: flex; flex-wrap: wrap; gap: var(--ca-rum-2); }
.ca-krypto__val .ca-knapp { min-height: var(--ca-traffyta); min-width: 5.5rem; }
.ca-krypto__val .ca-knapp[aria-pressed="true"] { background: var(--ca-brand); border-color: var(--ca-brand); color: var(--ca-white); }
.ca-krypto__betala { display: grid; gap: var(--ca-rum-3); }
.ca-krypto__fakta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ca-rum-1) var(--ca-rum-3); margin: 0; font-size: var(--ca-text-sm); align-items: center; }
.ca-krypto__fakta dt { color: var(--ca-ink-dampad); }
.ca-krypto__fakta dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ca-rum-2); min-width: 0; }
.ca-krypto__fakta code { overflow-wrap: anywhere; font-size: var(--ca-text-xs); }
.ca-krypto__kopiera { min-height: 2.25rem; padding: 0 var(--ca-rum-2); border: 1px solid var(--ca-line); border-radius: var(--ca-radie); background: var(--ca-white); color: var(--ca-ink); font: inherit; font-size: var(--ca-text-xs); cursor: pointer; }
.ca-krypto__status { margin: 0; font-weight: 600; }
.ca-krypto__status--betald { color: var(--ca-ok); }
.ca-krypto__status--delvis, .ca-krypto__status--utgangen { color: var(--ca-fel); }
.ca-krypto__kvar { margin: 0; font-size: var(--ca-text-xs); color: var(--ca-ink-dampad); }
@media (max-width: 30rem) {
	.ca-krypto__fakta { grid-template-columns: minmax(0, 1fr); }
	.ca-krypto__fakta dd { margin-bottom: var(--ca-rum-2); }
}