/**
 * MC Store 24 - startsidan.
 *
 * Byggd efter designunderlaget i design_handoff_mcstore24_startsida (2026-09-08).
 * Tokens, matt och beteenden ar hamtade ordagrant ur README:n dar; avvikelser
 * ar kommenterade pa stallet med varfor.
 *
 * Omfattning: allt UNDER menyn. Topbar, header och footer ligger kvar i temat
 * och roras inte harifran.
 */

.mc24-start {
	/* Farger. Regeln i underlaget: hogst tva bakgrundsfarger pa sidan -
	   sand och ink. Rust ar accent, aldrig stor yta. */
	--mc24-ink: #141110;
	--mc24-ink-90: #1e1b19;
	--mc24-ink-80: #22201d;
	--mc24-ink-70: #2a2624;
	--mc24-text-2: #322d29;
	--mc24-muted: #6f6862;
	/* Var #8a827a enligt underlagets tokentabell, men det gav 3,78:1 mot vitt -
	   under WCAG AA:s 4,5:1, och Lighthouse falde det. Underlaget sager sjalvt
	   att all brodtext ska ligga over 4,5:1, sa dess eget varde holl inte.
	   #777069 ger 4,88:1 mot vitt och 4,60:1 mot sand; samma kulorton, bara
	   morkare. Traffar varumarket pa produktkort, metaraden i omdomen och det
	   genomstrukna ordinariepriset. */
	--mc24-muted-2: #777069;
	--mc24-rust: #c14a22;
	--mc24-amber: #e0a33f;
	/* Amber ar avstamd for ink: 8,48:1 dar, men bara 2,09:1 mot sand.
	   Designunderlaget sager sjalvt att amber ska anvandas "endast pa
	   ink-bakgrund", vilket jag brot mot genom att satta stjarnorna i
	   omdomessektionen pa ljus botten. Den har tonen ger 4,74:1 mot sand och
	   5,03:1 mot vitt - markbart mattare guld, men lasbar. */
	--mc24-amber-ljus-botten: #8f6828;
	--mc24-green: #3f7d4e;
	--mc24-sand: #faf8f5;
	--mc24-white: #fff;
	--mc24-line: #e4dfd8;
	--mc24-footer-text: #b8b0a8;
	--mc24-on-dark: #d9d2ca;
	--mc24-cat-sub: #cfc7bd;

	/* Tomtillstand. Egen bottenplatta med MC24-market i stallet for
	   WooCommerce standardplatshallare. */
	--mc24-empty-cat: #ded8d0;
	--mc24-empty-cat-mark: #c6bfb6;
	--mc24-empty-card: #f4f1ec;
	--mc24-empty-card-mark: #ddd7cf;
	--mc24-empty-dark: #24211f;
	--mc24-empty-dark-mark: #35302c;

	--mc24-radius: 3px;
	--mc24-radius-sm: 2px;
	--mc24-gap: 18px;
	--mc24-gap-hero: 20px;
	--mc24-pad-x: clamp(16px, 2.4vw, 32px);
	--mc24-section: clamp(40px, 4.4vw, 64px);
	--mc24-fade: 140ms ease;

	--mc24-font-display: Archivo, "Helvetica Neue", Arial, sans-serif;
	--mc24-font-body: Barlow, "Helvetica Neue", Arial, sans-serif;
	--mc24-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	background: var(--mc24-sand);
	color: var(--mc24-ink);
	font-family: var(--mc24-font-body);
	font-size: 15px;
	line-height: 1.55;
}

/* Inga skuggor nagonstans - djup gors med kantlinjer och gradienter. */
.mc24-start * { box-shadow: none; }

/* Temat satter inte box-sizing pa allt. Utan detta blir en ruta med
   width: 100% OCH padding bredare an sin foralder - vilket lat
   varumarkeslogotyperna spilla ut over kanterna. Sett 2026-09-09. */
.mc24-start *,
.mc24-start *::before,
.mc24-start *::after { box-sizing: border-box; }

.mc24-start__wrap {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 var(--mc24-pad-x);
}

.mc24-start section { padding-top: var(--mc24-section); }

.mc24-start a { color: inherit; text-decoration: none; transition: color var(--mc24-fade); }
.mc24-start a:hover { color: var(--mc24-rust); }

/* Synlig fokusring pa allt som gar att na med tangentbord. */
.mc24-start a:focus-visible,
.mc24-start button:focus-visible {
	outline: 2px solid var(--mc24-rust);
	outline-offset: 2px;
}

/* ---- Gemensamma byggstenar ------------------------------------------- */

.mc24-eyebrow {
	font-family: var(--mc24-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mc24-muted-2);
}
.mc24-eyebrow--amber { color: var(--mc24-amber); }
/* Etiketter inuti en bildyta star mot gradientens ink. --mc24-muted-2 ar
   avstamd mot vitt och gav bara 3,85:1 dar. */
.mc24-media__body .mc24-eyebrow { color: var(--mc24-footer-text); }
.mc24-eyebrow--rust { color: var(--mc24-rust); }

.mc24-h2 {
	font-family: var(--mc24-font-display);
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.1;
	margin: 0;
	color: var(--mc24-ink);
}

.mc24-sechead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 18px;
}
.mc24-sechead__more {
	font-family: var(--mc24-font-mono);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mc24-muted);
	white-space: nowrap;
}
.mc24-sechead__more:hover { color: var(--mc24-rust); }
.mc24-sechead__sub {
	margin: -8px 0 18px;
	color: var(--mc24-muted);
	font-size: 15px;
}

/* Bildyta som morknas for text ovanpa. Bilden ligger pa .7-.72 opacitet
   mot ink sa gradienten haller kontrastkravet aven om bilden byts. */
.mc24-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--mc24-radius);
	background: var(--mc24-ink-80);
}
.mc24-media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .72;
	transition: transform 300ms ease-out;
}
.mc24-media__body { position: relative; z-index: 2; }

/* Tomtillstand: MC24-market centrerat, men i ovre delen sa bottenzonen ar
   fri for rubriken aven nar underraden gar pa tva rader. */
.mc24-empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--mc24-font-display);
	font-weight: 800;
	letter-spacing: .06em;
}
.mc24-empty--cat { background: var(--mc24-empty-cat); color: var(--mc24-empty-cat-mark); font-size: 40px; inset: 0 0 42% 0; }
.mc24-empty--card { background: var(--mc24-empty-card); color: var(--mc24-empty-card-mark); font-size: 34px; }
.mc24-empty--dark { background: var(--mc24-empty-dark); color: var(--mc24-empty-dark-mark); font-size: 28px; }

.mc24-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 24px;
	border-radius: var(--mc24-radius-sm);
	font-family: var(--mc24-font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: background-color var(--mc24-fade), color var(--mc24-fade), border-color var(--mc24-fade);
}
.mc24-btn--rust { background: var(--mc24-rust); color: #fff; }
.mc24-btn--rust:hover { background: #fff; color: var(--mc24-ink); }
.mc24-btn--ghost { border: 1.5px solid rgba(255,255,255,.45); color: #fff; }
.mc24-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

/* Stjarnorna arver amber, som galler pa ink. Pa ljus botten byts tonen -
   se --mc24-amber-ljus-botten. */
.mc24-stars { color: var(--mc24-amber); letter-spacing: .08em; }
.mc24-reviews .mc24-stars,
.mc24-review .mc24-stars { color: var(--mc24-amber-ljus-botten); }

/* ---- 3. Hero --------------------------------------------------------- */

.mc24-hero {
	display: grid;
	grid-template-columns: 1fr 1.42fr;
	gap: var(--mc24-gap-hero);
	padding-top: 32px;
	min-height: 560px;
}

.mc24-hero__seo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
	background: var(--mc24-ink);
	border-radius: var(--mc24-radius);
	padding: clamp(30px, 3.2vw, 50px);
	color: #fff;
}
.mc24-hero__h1 {
	font-family: var(--mc24-font-display);
	font-size: clamp(30px, 3.1vw, 44px);
	font-weight: 800;
	line-height: 1.03;
	letter-spacing: -.02em;
	margin: 0;
	color: #fff;
}
.mc24-hero__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.mc24-hero__list li {
	position: relative;
	padding-left: 26px;
	font-size: 16px;
	line-height: 1.45;
	color: var(--mc24-on-dark);
}
.mc24-hero__list li::before {
	content: "\2014";
	position: absolute;
	left: 0;
	color: var(--mc24-rust);
}
.mc24-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.mc24-hero__rating {
	display: flex;
	align-items: center;
	gap: 10px;
	border-top: 1px solid var(--mc24-ink-70);
	padding-top: 16px;
	font-size: 15px;
	color: var(--mc24-on-dark);
}

/* Forsta raden foljer bannerns hojd i stallet for en fast andel, sa den
   inte tvingas bli hogre an bilden. Smakorten tar resten. */
.mc24-hero__side { display: grid; grid-template-rows: auto 1fr; gap: var(--mc24-gap-hero); }

.mc24-hero__promo { display: flex; }
.mc24-hero__promo .mc24-media {
	flex: 1;
	display: flex;
	align-items: flex-end;
	min-height: 260px;
}
/* 100 grader, sa texten i nedre vanstra hornet alltid ligger pa den morka
   delen av gradienten. */
/* Ingen gradient nar bannern talar sjalv - den ar komponerad med sin egen
   kontrast, och en gradient ovanpa gor bara dess text grumlig.
   Panelen far bannerns egna proportioner (2086x754). Med contain i en hogre
   ruta malades bannern 749x270 i en yta pa 749x378 - 108 px svart tomrum
   over och under, vilket sag ut som ett fel. Nu fyller den sin ruta exakt,
   utan beskarning. */
.mc24-hero__promo--banner .mc24-media {
	background: var(--mc24-ink);
	aspect-ratio: 2086 / 754;
	min-height: 0;
}
.mc24-hero__promo--banner .mc24-media > img {
	opacity: 1;
	object-fit: cover;
	object-position: center;
}
.mc24-hero__promo .mc24-media__body { padding: clamp(24px, 2.4vw, 38px); display: grid; gap: 10px; max-width: 560px; }
.mc24-hero__promo h2 {
	font-family: var(--mc24-font-display);
	font-size: clamp(28px, 2.9vw, 40px);
	font-weight: 800;
	line-height: 1.05;
	margin: 0;
	color: #fff;
}
.mc24-hero__promo p { margin: 0; font-size: 16px; color: var(--mc24-on-dark); }
.mc24-hero__promo-link {
	font-family: var(--mc24-font-display);
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	border-bottom: 1px solid var(--mc24-rust);
	padding-bottom: 2px;
	justify-self: start;
}

.mc24-hero__cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mc24-gap-hero); }
.mc24-hero__card { display: flex; }
.mc24-hero__card .mc24-media { flex: 1; display: flex; align-items: flex-end; min-height: 190px; }
.mc24-hero__card .mc24-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Underlagets .15 vid 20 procent till .88 vid 100 gjorde korten till svarta
	   rutor med produktbilder pa mork botten. Overdelen ar nu nastan fri och
	   morkret koncentrerat till de nedersta 35 procenten, dar texten star. */
	background: linear-gradient(180deg, rgba(15,13,12,.05) 0%, rgba(15,13,12,.12) 45%, rgba(15,13,12,.72) 78%, rgba(15,13,12,.94) 100%);
}
/* Produktbilderna ar ljusa; .72 opacitet mot ink gjorde dem grumliga. */
.mc24-hero__card .mc24-media > img { opacity: .95; }
.mc24-hero__card .mc24-media__body { padding: 0 26px 24px; display: grid; gap: 6px; }
.mc24-hero__card h3 {
	font-family: var(--mc24-font-display);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
	color: #fff;
}

.mc24-start .mc24-media:hover > img { transform: scale(1.03); }

/* ---- 4. USP-rad ------------------------------------------------------ */

.mc24-usp {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	background: var(--mc24-white);
	border: 1px solid var(--mc24-line);
	border-radius: var(--mc24-radius);
}
.mc24-usp__item { padding: 22px 26px; border-right: 1px solid var(--mc24-line); }
.mc24-usp__item:last-child { border-right: 0; }
.mc24-usp__item h3 {
	font-family: var(--mc24-font-display);
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 4px;
}
.mc24-usp__item p { margin: 0; font-size: 14px; color: var(--mc24-muted); }

/* ---- 5. Kategorigrid ------------------------------------------------- */

.mc24-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mc24-gap); }
.mc24-cat { display: flex; }
.mc24-cat .mc24-media {
	flex: 1;
	aspect-ratio: 4 / 3.1;
	display: flex;
	align-items: flex-end;
	transition: border-color var(--mc24-fade);
}
.mc24-cat .mc24-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, transparent 40%, rgba(15,13,12,.85) 100%);
}
.mc24-cat .mc24-media__body { padding: 0 22px 18px; display: grid; gap: 4px; }
.mc24-cat h3 {
	font-family: var(--mc24-font-display);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
	color: #fff;
}
.mc24-cat__sub {
	font-size: 13px;
	color: var(--mc24-cat-sub);
	/* En rad. Tva rader trycker texten upp ur den morka delen av gradienten
	   och blir olasbar mot bilden - sett pa MC-Skydd 2026-09-09. Hela
	   underraden ligger i title-attributet. */
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- 6. Produktkort (aterianvands i bastsaljare och nyheter) --------- */

.mc24-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mc24-gap); }

.mc24-card {
	display: flex;
	flex-direction: column;
	background: var(--mc24-white);
	border: 1px solid var(--mc24-line);
	border-radius: var(--mc24-radius);
	overflow: hidden;
	transition: border-color var(--mc24-fade);
}
.mc24-card:hover { border-color: var(--mc24-ink); color: inherit; }
.mc24-card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--mc24-empty-card); }
.mc24-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms ease-out; }
.mc24-card:hover .mc24-card__media img { transform: scale(1.03); }
.mc24-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 6px 10px;
	border-radius: var(--mc24-radius-sm);
	font-family: var(--mc24-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	background: var(--mc24-rust);
}
.mc24-card__badge--new { background: var(--mc24-ink); }
.mc24-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 20px; flex: 1; }
.mc24-card__brand {
	font-family: var(--mc24-font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mc24-muted-2);
}
.mc24-card__title {
	font-family: var(--mc24-font-display);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
}
.mc24-card__attr { font-size: 13px; color: var(--mc24-muted); }
.mc24-card__pricerow { margin-top: auto; padding-top: 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mc24-card__price { font-family: var(--mc24-font-display); font-size: 20px; font-weight: 700; }
.mc24-card__price--sale { color: var(--mc24-rust); }
.mc24-card__was { font-size: 14px; color: var(--mc24-muted-2); text-decoration: line-through; }
.mc24-card__stock { font-size: 13px; color: var(--mc24-green); }
.mc24-card__stock--low { color: var(--mc24-amber); }
.mc24-card__stock--backorder { color: var(--mc24-muted); }

/* ---- 7. Precis inkommet (morkt block) -------------------------------- */

.mc24-fresh {
	background: var(--mc24-ink);
	border-radius: var(--mc24-radius);
	padding: 44px 48px;
	display: grid;
	grid-template-columns: .9fr 2fr;
	gap: 44px;
	align-items: center;
	color: #fff;
}
.mc24-fresh__intro { display: grid; gap: 12px; }
.mc24-fresh__intro h2 {
	font-family: var(--mc24-font-display);
	font-size: 32px;
	font-weight: 800;
	line-height: 1.05;
	margin: 0;
	color: #fff;
}
.mc24-fresh__intro p { margin: 0; color: var(--mc24-footer-text); }
.mc24-fresh__link {
	justify-self: start;
	color: #fff;
	border-bottom: 1px solid var(--mc24-rust);
	padding-bottom: 2px;
	font-family: var(--mc24-font-display);
	font-size: 14px;
	font-weight: 700;
}
.mc24-fresh__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mc24-fresh__card {
	display: flex;
	flex-direction: column;
	background: var(--mc24-ink-90);
	border-radius: var(--mc24-radius);
	overflow: hidden;
	transition: background-color var(--mc24-fade);
}
.mc24-fresh__card:hover { background: #262220; color: inherit; }
/* Produktbilderna ar fotograferade mot vitt. Pa en ink-botten blev de
   lysande vita fyrkanter som sag ut som ett fel. Ytan ar darfor ljus med
   avsikt, sa kortet last som en designad ram runt en produktbild. */
.mc24-fresh__card-media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f4f1ec;
}
.mc24-fresh__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc24-fresh__card:hover .mc24-fresh__card-media { background: #fff; }
.mc24-fresh__card-body { display: grid; gap: 5px; padding: 14px 16px 18px; }
.mc24-fresh__card-brand {
	font-family: var(--mc24-font-mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	/* INTE --mc24-muted-2. Den morknades for att klara 4,5:1 mot vitt, men
	   samma farg pa den morka kortbotten (#1e1b19) gick da at andra hallet -
	   fran 4,53:1 till 3,51:1. En dampad ton behover olika varde beroende pa
	   vilken botten den star mot. */
	color: var(--mc24-footer-text);
}
.mc24-fresh__card-title {
	font-family: var(--mc24-font-display);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	color: #fff;
}
.mc24-fresh__card-price { font-family: var(--mc24-font-display); font-size: 16px; font-weight: 700; color: #fff; }

/* ---- 8. Varumarkesrad ------------------------------------------------ */

.mc24-brands { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mc24-brand {
	position: relative;
	display: grid;
	place-items: center;
	height: 76px;
	background: var(--mc24-white);
	border: 1px solid var(--mc24-line);
	border-radius: var(--mc24-radius);
	transition: border-color var(--mc24-fade);
}
.mc24-brand:hover { border-color: var(--mc24-ink); }
/* Namnet ligger under logotypen. Saknas logotypfilen syns namnet - med 128
   varumarken saknas alltid nagon, sa detta ar normalfallet, inte ett fel. */
.mc24-brand__name {
	font-family: var(--mc24-font-display);
	font-size: 15px;
	font-weight: 700;
	color: #4a443f;
	text-align: center;
	padding: 0 8px;
}
.mc24-brand__logo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 16px 20px;
}

/* ---- 9. Recensioner -------------------------------------------------- */

.mc24-reviews {
	border-top: 1px solid var(--mc24-line);
	margin-top: var(--mc24-section);
	padding-top: 44px;
	display: grid;
	grid-template-columns: 1fr 2.2fr;
	gap: 44px;
}
.mc24-reviews__intro { display: grid; gap: 14px; align-content: start; }
.mc24-reviews__intro .mc24-stars { font-size: 22px; }
.mc24-reviews__intro h2 {
	font-family: var(--mc24-font-display);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
	margin: 0;
}
.mc24-reviews__intro p { margin: 0; color: var(--mc24-muted); }
.mc24-reviews__link {
	font-family: var(--mc24-font-mono);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mc24-rust);
	justify-self: start;
}
.mc24-reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mc24-gap); }
.mc24-review {
	display: grid;
	gap: 12px;
	/* Innehallet uppat i kortet. Korten ar jamnhoga och citaten olika langa,
	   sa utan detta hamnar kort citat mitt i en hog ruta. */
	align-content: start;
	background: var(--mc24-white);
	border: 1px solid var(--mc24-line);
	border-radius: var(--mc24-radius);
	padding: 26px 24px;
}
.mc24-review blockquote { margin: 0; font-size: 15px; line-height: 1.6; color: var(--mc24-text-2); }
.mc24-review__meta {
	font-family: var(--mc24-font-mono);
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--mc24-muted-2);
}

/* ---- 10. Guider ------------------------------------------------------ */

.mc24-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mc24-gap); }
.mc24-guide {
	display: grid;
	gap: 8px;
	align-content: start;
	background: var(--mc24-white);
	border: 1px solid var(--mc24-line);
	border-radius: var(--mc24-radius);
	padding: 26px 24px;
	transition: border-color var(--mc24-fade);
}
.mc24-guide:hover { border-color: var(--mc24-ink); color: inherit; }
.mc24-guide h3 {
	font-family: var(--mc24-font-display);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}
.mc24-guide p { margin: 0; font-size: 14px; color: var(--mc24-muted); }

/* ---- 11. Vanliga fragor ---------------------------------------------- */
/* Inte med i designunderlaget. Behallen for att dagens dragspel bar
   FAQPage-schemat med tio fragor - tas det bort forsvinner ett rich result. */

.mc24-faq {
	background: var(--mc24-white);
	border: 1px solid var(--mc24-line);
	border-radius: var(--mc24-radius);
	padding: clamp(24px, 3vw, 44px);
	display: grid;
	grid-template-columns: 1fr 2.2fr;
	gap: clamp(20px, 3vw, 44px);
	align-items: start;
}
.mc24-faq .mc24-sechead { grid-column: 1; }
.mc24-faq__list { grid-column: 2; }

/*
 * Sektionsrytmen ska ligga UTANFOR de har tva blocken.
 * .mc24-start section { padding-top } har hogre specificitet (0,1,1) an
 * .mc24-about (0,1,0), sa den vann - och eftersom blocken nu har egen vit
 * botten hamnade de 64 pixlarna INNE i rutan. Resultatet blev en box som
 * klistrade mot guiderna ovanfor och samtidigt gapade tom i overkant.
 * Har satts luften som margin utanfor rutan och paddingen tillbaka till
 * rutans egen, med tillrackligt specifika valjare for att vinna.
 */
.mc24-start .mc24-about,
.mc24-start .mc24-faq {
	padding-top: clamp(24px, 3vw, 44px);
	margin-top: var(--mc24-section);
}
/* Ingen egen linje overst. Nar rubriken lag ovanfor ramade den in listan,
   men med rubriken bredvid blev den en losryckt strecklinje i spaltens
   overkant. Varje post har redan en underkant. */
.mc24-faq__list { border-top: 0; }
.mc24-faq .mc24-sechead { margin-bottom: 4px; }
.mc24-faq__item:last-child { border-bottom: 0; }
.mc24-faq__item:last-child > summary { padding-bottom: 0; }
.mc24-faq__item:last-child[open] > summary { padding-bottom: 18px; }
.mc24-faq__item:last-child .mc24-faq__answer { padding-bottom: 0; }
.mc24-faq__item { border-bottom: 1px solid var(--mc24-line); }
.mc24-faq__item > summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 40px 18px 0;
	position: relative;
	font-family: var(--mc24-font-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	transition: color var(--mc24-fade);
}
.mc24-faq__item > summary::-webkit-details-marker { display: none; }
.mc24-faq__item > summary:hover { color: var(--mc24-rust); }
.mc24-faq__item > summary::after {
	content: "+";
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	font-weight: 500;
	color: var(--mc24-rust);
}
.mc24-faq__item[open] > summary::after { content: "\2013"; }
.mc24-faq__answer {
	padding: 0 0 20px;
	color: var(--mc24-muted);
	font-size: 15px;
	line-height: 1.6;
	max-width: 68ch;
}
.mc24-faq__answer p { margin: 0 0 14px; }
.mc24-faq__answer p:first-child { margin-top: 0; }
.mc24-faq__answer p:last-child { margin-bottom: 0; }
/*
 * Listorna i svaren ar ostilade och arver temats margin: 0 0 21px 20px med
 * padding 0, vilket lagger punkterna utanfor textblocket och klistrar ihop
 * raderna. Har far de egen indragning, luft mellan punkterna och en
 * rustfargad markor - samma sprak som hero-listans streck.
 */
.mc24-faq__answer ul,
.mc24-faq__answer ol {
	margin: 0 0 14px;
	padding-left: 1.3em;
}
.mc24-faq__answer li { margin-bottom: 7px; }
.mc24-faq__answer li:last-child { margin-bottom: 0; }
.mc24-faq__answer li::marker { color: var(--mc24-rust); }
.mc24-faq__answer strong { color: var(--mc24-ink); font-weight: 600; }
.mc24-faq__answer a {
	color: var(--mc24-ink);
	border-bottom: 1px solid var(--mc24-rust);
}
.mc24-faq__answer a:hover { color: var(--mc24-rust); }

/* ---- Brytpunkter ----------------------------------------------------- */

@media (max-width: 1199px) {
	.mc24-cats,
	.mc24-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mc24-fresh__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mc24-fresh { grid-template-columns: 1fr; gap: 28px; padding: 36px 32px; }
	.mc24-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mc24-hero__h1 { font-size: 46px; }
}

@media (max-width: 899px) {
	/* Hero blir en kolumn: SEO-panelen forst, kampanjen under, smakorten sist. */
	.mc24-hero { grid-template-columns: 1fr; min-height: 0; }
	.mc24-hero__side { grid-template-rows: auto auto; }
	.mc24-cats,
	.mc24-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mc24-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mc24-usp__item:nth-child(2n) { border-right: 0; }
	.mc24-usp__item:nth-child(-n+2) { border-bottom: 1px solid var(--mc24-line); }
	.mc24-reviews { grid-template-columns: 1fr; gap: 28px; }
	.mc24-about,
	.mc24-faq { grid-template-columns: 1fr; gap: 18px; }
	.mc24-about .mc24-h2,
	.mc24-about__text,
	.mc24-about__link { grid-column: 1; grid-row: auto; }
	.mc24-faq .mc24-sechead,
	.mc24-faq__list { grid-column: 1; }
	.mc24-reviews__grid { grid-template-columns: 1fr; }
	.mc24-guides { grid-template-columns: 1fr; }
	.mc24-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
	/* Allt en kolumn UTOM produkt- och kategorigrid, som stannar pa tva.
	   En kolumn dar gor sidan oandligt lang. */
	.mc24-cats,
	.mc24-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.mc24-hero__seo { padding: 32px 20px; }
	.mc24-hero__h1 { font-size: 30px; }
	.mc24-hero__cards { grid-template-columns: 1fr; }
	.mc24-fresh { padding: 28px 20px; }
	.mc24-fresh__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mc24-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mc24-sechead { flex-direction: column; gap: 6px; }
	.mc24-card__body { padding: 12px 14px 16px; }
	.mc24-card__title { font-size: 15px; }
	.mc24-card__price { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.mc24-start *,
	.mc24-start .mc24-media > img,
	.mc24-start .mc24-card__media img { transition: none !important; }
	.mc24-start .mc24-media:hover > img,
	.mc24-start .mc24-card:hover .mc24-card__media img { transform: none; }
}

/* Rubriken ligger inne i <summary> for att ge korrekt rubriknivå (h3 under
   sektionens h2) utan att tappa dragspelets inbyggda tangentbordsstod. */
.mc24-faq__q {
	margin: 0;
	font: inherit;
	display: inline;
}

/* Antalet omdomen bakom betyget - dampat, det ar en precisering och inte
   sjalva paastaendet. */
.mc24-hero__rating-count {
	display: block;
	font-size: 13px;
	/* Som .mc24-fresh__card-brand: --mc24-muted-2 ar avstamd mot vit botten
	   och ger bara 3,85:1 mot hero-panelens ink. Dampad text pa mork botten
	   behover ett ljusare varde. */
	color: var(--mc24-footer-text);
	margin-top: 2px;
}


/* ---- Klarna-remsan overst ------------------------------------------- */
/* Lag som forsta sektionen pa den gamla startsidan. Klarnas egen widget
   bestammer sitt utseende sjalv; vi ger den bara plats och centrerar den. */
.mc24-klarna {
	max-width: 1360px;
	margin: 0 auto;
	padding: 10px var(--mc24-pad-x) 0;
	display: flex;
	justify-content: center;
}
.mc24-klarna:empty { display: none; }

/* ---- MC Klader pa natet --------------------------------------------- */
/* Brodtextblock. Maxbredd pa raden for lasbarhet - underlaget saknar
   varde for lopande text, sa 68 tecken enligt vanlig typografisk praxis. */
/* Vit yta med kantlinje, som resten av sidan. Om- och FAQ-blocken var de
   enda tva som lag som naken text direkt pa sandbakgrunden.
   Ytan gar over HELA spalten, inte 900px: en smalare vit ruta i en spalt pa
   1360 hamnade vansterstalld med en stor tom sandyta bredvid och sag ut som
   ett misstag. Innehallet delas i stallet i tva spalter, samma 1fr/2.2fr som
   omdomessektionen, sa raderna anda inte blir olasligt langa. */
.mc24-about {
	background: var(--mc24-white);
	border: 1px solid var(--mc24-line);
	border-radius: var(--mc24-radius);
	padding: clamp(24px, 3vw, 44px);
	display: grid;
	grid-template-columns: 1fr 2.2fr;
	/* Explicita rader. Utan dem far den spannande textspalten sin hojd
	   fordelad over bada raderna, och lanken - som ligger i rad tva - trycks
	   langt ned under rubriken i stallet for att sitta tatt under den. */
	grid-template-rows: auto 1fr;
	gap: clamp(20px, 3vw, 44px);
	align-items: start;
}
.mc24-about .mc24-h2 { grid-column: 1; grid-row: 1; }
.mc24-about__text { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
.mc24-about__link { grid-column: 1; grid-row: 2; align-self: start; margin-top: 4px; }
.mc24-about__text {
	margin-top: 14px;
	color: var(--mc24-muted);
	font-size: 15px;
	line-height: 1.65;
	/* Radlangden var 100 tecken. Lasbar brodtext ligger pa 45-75; over 90
	   tappar ogat radbytet och maste leta sig tillbaka. 66ch landar mitt i
	   intervallet utan att spalten blir smal. */
	max-width: 66ch;
}
.mc24-about__text p { margin: 0 0 15px; }
.mc24-about__text p:last-child { margin-bottom: 0; }
/* Ingressen ger stycket en ingang i stallet for fem likadana block. */
.mc24-about__text > p:first-child {
	font-size: 16px;
	line-height: 1.6;
	color: var(--mc24-text-2);
}
.mc24-about__text a {
	color: var(--mc24-ink);
	border-bottom: 1px solid var(--mc24-rust);
	padding-bottom: 1px;
}
.mc24-about__text a:hover { color: var(--mc24-rust); }
.mc24-about__link {
	display: inline-block;
	margin-top: 18px;
	font-family: var(--mc24-font-display);
	font-size: 14px;
	font-weight: 700;
	border-bottom: 1px solid var(--mc24-rust);
	padding-bottom: 2px;
}


/* Skarmlasartext. Rubriken finns i dokumentstrukturen men ritas inte ut -
   se Knox-panelen i render.php for varfor. */
.mc24-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* Ruta med mork botten for logotyper som ar vita pa genomskinlig botten.
   Utan den blir Cardos ruta helt tom och Kriegas nastan osynlig - de ar
   ritade for mork bakgrund. Ljusheten mats i PHP, se
   mcstore24_start_logo_ar_ljus(). */
.mc24-brand--dark {
	background: var(--mc24-ink);
	border-color: var(--mc24-ink);
}
.mc24-brand--dark:hover { border-color: var(--mc24-rust); }