/*
 * product.css — laddas bara på enskild produktsida.
 *
 * Woo:s tre stilmallar är avstängda här (se inc/woocommerce.php), så den
 * här filen äger allt: galleri, köpspalt, variantväljare, produkttext,
 * omdömen och korsförsäljning. Det är också hela poängen — Woo:s CSS är
 * olagerad och hade annars vunnit över allt vi skriver i @layer components.
 *
 * Om de två klassuppsättningarna i produkttexten
 * ---------------------------------------------
 * Texterna är importerade från longevitylabs.se, där de skrivits i två
 * omgångar med varsin uppsättning klassnamn: `ll-*` på 85 produkter och
 * `bp2-*` på 27. De beskriver samma saker — hero, nyckeltal, sektion,
 * tabell, läs mer, frågor och svar — så varje regel nedan listar båda
 * namnen och ger dem samma utseende. Vi skriver alltså inte om markupen
 * i PHP: en textmassa på 112 produkter som redan ligger i databasen ska
 * inte gå genom ett reguljärt uttryck vid varje sidvisning.
 */

@layer tokens {
	.single-product {
		/*
		 * Kort och plattor i produkttexten är VITA med hårstreck, inte
		 * gräddvita som på .se. Beslutat av Linus: den varma plattan drog
		 * åt gult mot vår petrol, och en vit yta med kant håller ihop
		 * bättre med kriteriekorten på Om oss.
		 */
		--product-card-bg: var(--color-paper);
		--product-card-border: 1px solid var(--color-line);

		/*
		 * Avdelaren mellan sektionerna. Hade en petrolfärgad ände i ett
		 * försök — Linus tog bort den: åtta blå streck nedför sidan blev
		 * ett mönster i stället för en avdelare. Färgen sitter i stället
		 * på det som betyder något (pris, etiketter, valda lägen).
		 *
		 * Kvar som variabel för att alla fem sektionstyper ska hämta
		 * linjen från samma ställe.
		 */
		--product-rule: var(--color-line);

		/* Köpspalten fastnar under sidhuvudet, inte i överkant. */
		--product-sticky-top: 84px;

		/*
		 * Smakfärgerna.
		 *
		 * De hör inte till paletten och ska inte till base.css: de är
		 * ARMRA:s etikettfärger, inte våra. Rollen är att göra fem
		 * likadana ingrediensrubriker sökbara med ögat.
		 *
		 * Alla ligger mellan 4,7:1 och 5,2:1 mot vitt. Rubrikerna går i
		 * 13 px fet, alltså gäller WCAG:s vanliga krav på 4,5:1 — inte
		 * undantaget för stor text, som börjar först vid 18,5 px fet.
		 */
		--flavour-blood-orange: #b4531f;
		--flavour-peach-persimmon: #b0574f;
		--flavour-vine-watermelon: #b34a5e;
		--flavour-sungold-apricot: #9a6a1e;
	}
}

@layer components {

	/* ================================================================ */
	/* Sidans skelett                                                    */
	/* ================================================================ */

	.single-product div.product {
		display: flow-root;
	}

	.product-hero {
		display: grid;
		/*
		 * `minmax(0, 1fr)` och inte bara en implicit spalt.
		 *
		 * En gridcell mäts som standard på innehållets minsta bredd, och
		 * galleriets miniatyrrad är tjugo rutor lång. Att den skrollar i
		 * sig själv hjälper inte: cellen räknar ändå med hela raden och
		 * blev 1 592 px bred i en telefon på 375. Hela sidan gick att dra
		 * i sidled. Med en uttalad nolla som golv kan cellen krympa, och
		 * raden skrollar som det var tänkt.
		 *
		 * Desktopregeln längre ned har alltid haft nollan — det var därför
		 * felet bara syntes på mobil.
		 */
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-l);
		position: relative;
	}

	@media (min-width: 1024px) {
		.product-hero {
			grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
			column-gap: var(--space-2xl);
			align-items: start;
		}

		/*
		 * Köpspalten följer med i scrollen. Bilderna är många och texten
		 * är lång — utan den här raden skulle priset och knappen lämna
		 * skärmen redan innan besökaren sett andra bilden.
		 */
		.single-product .summary {
			position: sticky;
			inset-block-start: var(--product-sticky-top);
		}
	}

	/* ---------------------------------------------------------------- */
	/* Woo:s aviseringar                                                 */
	/* ---------------------------------------------------------------- */

	/*
	 * Woo skriver notisen som en `div.woocommerce-message` (eller -error,
	 * -info) med role="alert" — inte som en lista, vilket den här regeln
	 * en gång trodde. Den ostylade rutan var det som stack ut i svart ram
	 * över köpspalten. Med JS läggs varan i utan omladdning och kvittensen
	 * är en egen ruta (cart.css); det här är för utan JS och för felen.
	 */
	.single-product .woocommerce-notices-wrapper:empty {
		display: none;
	}

	.single-product .woocommerce-message,
	.single-product .woocommerce-info,
	.single-product .woocommerce-error {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2xs) var(--space-s);
		padding: var(--space-s) var(--space-m);
		margin: 0 0 var(--space-m);
		border: var(--product-card-border);
		border-inline-start: 3px solid var(--color-accent);
		border-radius: var(--radius-card);
		background: var(--color-surface-cream);
		list-style: none;
		font-size: var(--step--1);
		line-height: 1.4;
		color: var(--color-ink);
		outline: none;
	}

	.single-product .woocommerce-message .button,
	.single-product .woocommerce-info .button,
	.single-product .woocommerce-error .button {
		margin-inline-start: auto;
		font-weight: 600;
		color: var(--color-accent-ink);
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}

	.single-product .woocommerce-error {
		border-inline-start-color: var(--color-accent-warm);
	}

	.single-product .woocommerce-error ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* ================================================================ */
	/* Galleri                                                           */
	/* ================================================================ */

	.product-gallery__stage {
		position: relative;
		border-radius: var(--radius-panel);
		background: var(--color-surface);
		overflow: hidden;
	}

	/*
	 * Utan JS ligger alla bilder kvar under varandra — sidan fungerar,
	 * den blir bara längre. data-enhanced sätts av en inline-rad direkt
	 * i galleriets markup (inc/product.php) så att en bild i taget gäller
	 * från första bildrutan, och product.js sköter sedan bytet. Ordningen
	 * spelar roll: aldrig dölj något som bara JS kan visa igen.
	 */
	.product-gallery[data-enhanced] .product-gallery__slide {
		display: none;
	}

	.product-gallery[data-enhanced] .product-gallery__slide.is-current {
		display: block;
	}

	.product-gallery__slide {
		margin: 0;
	}

	.product-gallery__img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: contain;
		/* Burken ska inte gå kant i kant med plattan. */
		padding: clamp(var(--space-s), 4%, var(--space-xl));
	}

	.product-gallery__thumbs {
		display: flex;
		gap: var(--space-2xs);
		padding: 0;
		margin: var(--space-2xs) 0 0;
		list-style: none;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.product-gallery__thumbs::-webkit-scrollbar {
		display: none;
	}

	.product-gallery__thumb {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	/*
	 * Bilder som hör till en annan smak. De göms, de tas inte ur DOM:en:
	 * alt-texterna ska finnas kvar för sökmotorn oavsett vilken smak som
	 * råkar vara vald, och en kund som byter smak ska inte vänta på att
	 * bilderna hämtas igen.
	 */
	.product-gallery__slide[data-filtered],
	.product-gallery__thumb[data-filtered] {
		display: none;
	}

	/*
	 * `position: relative` är inte kosmetik här. Miniatyrens dolda
	 * etikett ("Show image 4") är absolut positionerad, och en absolut
	 * positionerad ruta klipps inte av en skrollande förälder som saknar
	 * position — den räknas i stället in i sidans bredd. Tjugo sådana
	 * gav 224 px vågrät skroll på hela dokumentet.
	 */
	.product-gallery__thumb a {
		position: relative;
		display: block;
		width: 72px;
		border: 1px solid transparent;
		border-radius: var(--radius-card);
		background: var(--color-surface);
		overflow: hidden;
		transition: border-color 0.15s;
	}

	.product-gallery__thumb a:hover,
	.product-gallery__thumb a:focus-visible {
		border-color: var(--color-ink-muted);
	}

	.product-gallery__thumb.is-current a {
		border-color: var(--color-accent);
	}

	.product-gallery__thumb-img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: contain;
		padding: 6px;
	}

	/*
	 * Rea-etiketten ligger över bildplattan, inte i flödet.
	 *
	 * Den går i den dammiga rosan och inte i petrolen: petrolen är
	 * varumärkets färg och sitter på pris, val och länkar. Rea är ett
	 * undantagstillstånd och ska läsas som ett — samma roll som den
	 * slutsålda texten längre ned, alltså samma färg.
	 */
	.single-product .product-hero > .onsale {
		position: absolute;
		inset-block-start: var(--space-s);
		inset-inline-start: var(--space-s);
		z-index: 1;
		padding: 0.2em 0.7em;
		border-radius: var(--radius-pill);
		background: var(--color-accent-warm);
		color: #fff;
		font-size: var(--step--1);
		font-weight: 500;
		line-height: 1.6;
	}

	/* ================================================================ */
	/* Köpspalten                                                        */
	/* ================================================================ */

	.single-product .summary {
		display: flex;
		flex-direction: column;
		gap: var(--space-s);
	}

	/*
	 * Överraden får luft åt två håll: `letter-spacing` så att versalerna
	 * andas — ett långt varumärke som QUICKSILVER SCIENTIFIC blir annars
	 * en kompakt klump — och padding så att den inte klistrar sig mot
	 * bildplattans överkant och mot rubriken under.
	 *
	 * Regeln gäller alla varumärken, inte bara de långa: en överrad som
	 * sitter olika tätt beroende på hur produkten heter är ingen överrad,
	 * det är en slump.
	 */
	.product-brand {
		margin: 0;
		padding-block: var(--space-2xs) var(--space-3xs);
		font-size: var(--step--1);
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--color-ink-muted);
	}

	.product-brand a {
		color: var(--color-accent-ink);
		text-decoration: none;
	}

	.product-brand a:hover,
	.product-brand a:focus-visible {
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.single-product .product_title {
		margin: 0;
		font-family: var(--font-display);
		font-size: var(--step-4);
		font-weight: 600;
		letter-spacing: -0.025em;
		line-height: 1.12;
		color: var(--color-ink);
		text-wrap: balance;
	}

	/* ---------------------------------------------------------------- */
	/* Betyg                                                             */
	/* ---------------------------------------------------------------- */

	/*
	 * Woo ritar stjärnorna med sitt eget ikontypsnitt, som följer med
	 * woocommerce.css — den vi just stängt av. Stjärnorna ritas därför om
	 * med ett vanligt tecken: två lager text, det undre grått och det
	 * övre beskuret till betygets bredd.
	 */
	.woocommerce-product-rating {
		display: flex;
		align-items: center;
		gap: var(--space-2xs);
		margin: 0;
		font-size: var(--step--1);
		color: var(--color-ink-muted);
	}

	.star-rating {
		--star-size: 1rem;
		position: relative;
		flex: none;
		width: 5.7em;
		height: 1em;
		overflow: hidden;
		font-size: var(--star-size);
		line-height: 1;
		color: var(--color-line);
	}

	.star-rating::before,
	.star-rating > span::before {
		content: "\2605\2605\2605\2605\2605";
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		letter-spacing: 0.12em;
	}

	.star-rating > span {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		height: 100%;
		overflow: hidden;
		/* Döljer texten "Rated 5.00 out of 5" utan att dölja ::before. */
		font-size: 0;
		color: var(--color-accent);
	}

	.star-rating > span::before {
		font-size: var(--star-size);
	}

	.woocommerce-review-link {
		color: inherit;
		text-decoration-color: var(--color-line);
		text-underline-offset: 3px;
	}

	.woocommerce-review-link:hover {
		color: var(--color-accent-ink);
	}

	/* ---------------------------------------------------------------- */
	/* Pris och ingress                                                  */
	/* ---------------------------------------------------------------- */

	/*
	 * Priset i petrol, som på produktkorten i arkivet. Samma siffra ska
	 * inte byta färg för att kunden klickat sig in på produkten.
	 */
	.single-product .summary .price {
		margin: 0;
		font-size: var(--step-2);
		font-weight: 600;
		letter-spacing: -0.01em;
		color: var(--color-accent-ink);
	}

	.single-product .summary .price del {
		margin-inline-end: var(--space-2xs);
		font-weight: 400;
		color: var(--color-ink-muted);
	}

	.single-product .summary .price ins {
		text-decoration: none;
		color: var(--color-accent-ink);
	}

	.single-product .summary .price .woocommerce-Price-currencySymbol {
		font-size: 0.7em;
		vertical-align: 0.28em;
		margin-inline-start: 0.1em;
	}

	/* ---------------------------------------------------------------- */
	/* Paketets rabattnot                                                */
	/* ---------------------------------------------------------------- */

	/*
	 * Ligger direkt under priset och förklarar den överstrukna siffran
	 * ovanför. Ingen ram och ingen färgplatta: raden ska läsas som en
	 * fortsättning på priset, inte som en pålagd rabattbricka.
	 */
	.bundle-saving {
		display: flex;
		flex-direction: column;
		gap: var(--space-3xs);
		margin-block-start: var(--space-2xs);
		font-size: var(--step--1);
	}

	.bundle-saving__headline {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--space-2xs);
		margin: 0;
		color: var(--color-body);
	}

	.bundle-saving__amount {
		font-weight: 600;
		color: var(--color-sale);
	}

	/* Beloppet i noten ärver textens storlek — inte prisradens. */
	.bundle-saving .woocommerce-Price-amount {
		font-size: inherit;
	}

	.bundle-saving__breakdown summary {
		display: inline-block;
		cursor: pointer;
		color: var(--color-accent-ink);
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.bundle-saving__breakdown summary::marker,
	.bundle-saving__breakdown summary::-webkit-details-marker {
		content: "";
		display: none;
	}

	.bundle-saving__list {
		margin: var(--space-2xs) 0 0;
		padding: 0;
		list-style: none;
		border-block-start: 1px solid var(--color-line);
	}

	.bundle-saving__item {
		display: flex;
		justify-content: space-between;
		gap: var(--space-s);
		padding-block: var(--space-3xs);
		border-block-end: 1px solid var(--color-line);
	}

	.bundle-saving__link {
		color: var(--color-body);
		text-decoration: none;
	}

	.bundle-saving__link:hover,
	.bundle-saving__link:focus-visible {
		color: var(--color-ink);
		text-decoration: underline;
	}

	.bundle-saving__item-price {
		flex: 0 0 auto;
		color: var(--color-ink);
		font-variant-numeric: tabular-nums;
	}

	.woocommerce-product-details__short-description {
		font-size: var(--step-0);
		line-height: 1.65;
		color: var(--color-body);
	}

	.woocommerce-product-details__short-description p {
		margin: 0;
	}

	/* ---------------------------------------------------------------- */
	/* Prenumeration: engångsköp eller Subscribe & save                  */
	/* ---------------------------------------------------------------- */

	/*
	 * Två radioknappar som ser ut som kort, inne i köpformuläret. Valet
	 * är den ena av de två stora frågorna på sidan (den andra är smaken),
	 * så det får samma tyngd som variantväljaren och står strax ovanför
	 * knappen. Intervallet ligger inuti prenumerationskortet och visas
	 * bara när det kortet är valt — ingen JS, bara :has().
	 */
	.product-sub {
		display: grid;
		gap: var(--space-2xs);
		margin: 0;
		padding: 0;
		border: 0;
		min-width: 0;
		flex-basis: 100%;
	}

	.product-sub__option {
		display: grid;
		grid-template-columns: auto 1fr auto;
		column-gap: var(--space-xs);
		align-items: center;
		padding: var(--space-xs) var(--space-s);
		border: var(--product-card-border);
		border-radius: var(--radius-card);
		background: var(--color-paper);
		cursor: pointer;
		transition: border-color 0.15s, background-color 0.15s;
	}

	.product-sub__option:hover {
		border-color: var(--color-ink-muted);
	}

	.product-sub__option:has(input:checked) {
		border-color: var(--color-accent);
		background: var(--color-surface-cream);
	}

	.product-sub__option:has(input:focus-visible) {
		outline: 2px solid var(--color-accent);
		outline-offset: 2px;
	}

	.product-sub__option input {
		margin: 0;
		accent-color: var(--color-accent);
	}

	.product-sub__name {
		color: var(--color-ink);
		font-weight: 500;
	}

	.product-sub__price {
		color: var(--color-accent-ink);
		font-weight: 600;
		white-space: nowrap;
	}

	.product-sub__detail {
		display: none;
		grid-column: 2 / -1;
		margin-block-start: var(--space-2xs);
		color: var(--color-body);
		font-size: var(--step--1);
		line-height: 1.5;
	}

	.product-sub__option:has(input:checked) .product-sub__detail {
		display: block;
	}

	.product-sub__interval {
		display: flex;
		align-items: center;
		gap: var(--space-2xs);
		margin-block-end: var(--space-3xs);
		color: var(--color-ink);
	}

	.product-sub__interval select {
		padding: 0.3em 2em 0.3em 0.75em;
		border: var(--product-card-border);
		border-radius: var(--radius-pill);
		background: var(--color-paper);
		font: inherit;
		color: var(--color-ink);
	}

	/* ---------------------------------------------------------------- */
	/* Variantväljare                                                    */
	/* ---------------------------------------------------------------- */

	.single-product form.cart {
		display: flex;
		flex-direction: column;
		gap: var(--space-s);
		margin: var(--space-2xs) 0 0;
	}

	.single-product table.variations {
		width: 100%;
		border-collapse: collapse;
	}

	.single-product table.variations th,
	.single-product table.variations td {
		display: block;
		padding: 0;
		text-align: start;
	}

	.single-product table.variations .label label {
		display: block;
		margin-block-end: var(--space-2xs);
		font-size: var(--step--1);
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-ink-muted);
	}

	.single-product .variations select {
		width: 100%;
		padding: 0.7em 0.9em;
		border: var(--product-card-border);
		border-radius: var(--radius-card);
		background: var(--color-paper);
		font-family: inherit;
		font-size: var(--step-0);
		color: var(--color-ink);
	}

	/*
	 * Skriptet byter ut listan mot brickor. Går det inte att köra står
	 * `select` kvar och fungerar precis som Woo tänkt sig.
	 */
	.variations_form[data-swatches] .variations select {
		display: none;
	}

	/*
	 * Storlek och smak ritas som samma sorts kort, som på
	 * longevitylabs.se: namnet i fet stil och antalet portioner som
	 * underrad. Det är den enda uppställningen som svarar på båda
	 * frågorna kunden faktiskt ställer — "vilken variant?" och "hur
	 * mycket får jag?" — utan att man måste öppna en rullgardin för att
	 * jämföra.
	 *
	 * Skillnaden mellan de två raderna är bara tekniken: storlekarna är
	 * separata produkter och alltså länkar, smakerna är varianter av den
	 * här produkten och alltså radioknappar.
	 */
	.product-sizes__list,
	.product-swatches {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
		gap: var(--space-2xs);
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.product-sizes {
		display: flex;
		flex-direction: column;
		gap: var(--space-2xs);
	}

	.product-sizes__label {
		margin: 0;
		font-size: var(--step--1);
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-ink-muted);
	}

	.product-size,
	.product-swatch {
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr;
		align-content: start;
		gap: 0 var(--space-3xs);
		padding: 0.7em 0.9em;
		border: var(--product-card-border);
		border-radius: var(--radius-card);
		background: var(--product-card-bg);
		text-decoration: none;
		cursor: pointer;
		transition: border-color 0.15s, box-shadow 0.15s;
	}

	.product-size:hover,
	.product-swatch:hover {
		border-color: var(--color-ink-muted);
	}

	.product-size__name,
	.product-swatch__name {
		grid-column: 2;
		font-size: var(--step--1);
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-ink);
	}

	.product-size__sub,
	.product-swatch__sub {
		grid-column: 2;
		font-size: var(--step--1);
		line-height: 1.4;
		color: var(--color-ink-muted);
	}

	/* Storlekskorten har ingen prick — spalten ska ändå inte finnas. */
	.product-size {
		grid-template-columns: 1fr;
	}

	.product-size__name,
	.product-size__sub {
		grid-column: 1;
	}

	/*
	 * Smakpricken. Färgen kommer från etiketten på burken, satt per smak
	 * i @layer tokens ovanför. Känner vi inte igen smaken blir pricken
	 * en tom ring — vilket också är rätt svar för "Unflavored".
	 */
	.product-swatch__dot {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
		width: 0.7rem;
		height: 0.7rem;
		margin-inline-end: var(--space-3xs);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-pill);
		background: var(--color-paper);
	}

	.product-swatch[data-flavour="blood-orange"] .product-swatch__dot {
		border-color: transparent;
		background: var(--flavour-blood-orange);
	}

	.product-swatch[data-flavour="peach-persimmon"] .product-swatch__dot {
		border-color: transparent;
		background: var(--flavour-peach-persimmon);
	}

	.product-swatch[data-flavour="vine-watermelon"] .product-swatch__dot {
		border-color: transparent;
		background: var(--flavour-vine-watermelon);
	}

	.product-swatch[data-flavour="sungold-apricot"] .product-swatch__dot {
		border-color: transparent;
		background: var(--flavour-sungold-apricot);
	}

	.product-swatch input {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
	}

	/*
	 * Valt läge: petrolkant plus en inre linje, alltså två pixlar utan
	 * att kortet ändrar storlek. En kant som växer från 1 till 2 px
	 * flyttar allt inuti kortet en halv pixel — det syns som ett hopp.
	 */
	.product-size.is-current,
	.product-swatch:has(input:checked) {
		border-color: var(--color-accent);
		box-shadow: inset 0 0 0 1px var(--color-accent);
	}

	.product-size.is-current .product-size__name,
	.product-swatch:has(input:checked) .product-swatch__name {
		color: var(--color-accent-ink);
	}

	.product-swatch:has(input:focus-visible),
	.product-size:focus-visible {
		outline: 2px solid var(--color-accent);
		outline-offset: 2px;
	}

	.product-swatch:has(input:disabled) {
		cursor: not-allowed;
	}

	.product-swatch:has(input:disabled) .product-swatch__name {
		color: var(--color-ink-muted);
		text-decoration: line-through;
	}

	.single-product .reset_variations {
		display: inline-block;
		margin-block-start: var(--space-2xs);
		font-size: var(--step--1);
		color: var(--color-ink-muted);
	}

	/*
	 * Woo skriver variantens pris en gång till strax ovanför knappen. Vårt
	 * skript flyttar in samma siffra i priset högst upp, och då är den här
	 * en dubblett — men bara då. Attributet sätts av product.js, så uteblir
	 * skriptet står Woo:s pris kvar och kunden ser fortfarande vad varan
	 * kostar.
	 */
	.variations_form[data-single-price] .woocommerce-variation-price {
		display: none;
	}

	.single-product .woocommerce-variation-price .price {
		font-size: var(--step-1);
	}

	.single-product .woocommerce-variation-availability p {
		margin: var(--space-3xs) 0 0;
		font-size: var(--step--1);
		color: var(--color-body);
	}

	/* ---------------------------------------------------------------- */
	/* Antal och köpknapp                                                */
	/* ---------------------------------------------------------------- */

	/*
	 * `flex-direction: row` måste stå här: formuläret självt är en
	 * kolumn (rubrik, väljare, knappar), och på en enkel produkt ÄR
	 * knappraden formuläret. Utan raden ärvdes kolumnriktningen och
	 * knappen växte till en kvarterslång platta.
	 */
	.single-product .woocommerce-variation-add-to-cart,
	.single-product form.cart:not(.variations_form) {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: stretch;
		gap: var(--space-2xs);
	}

	.single-product .quantity {
		flex: 0 0 auto;
	}

	.single-product .quantity .qty {
		width: 4.5rem;
		height: 100%;
		min-height: 3.25rem;
		padding: 0 0.5em;
		border: var(--product-card-border);
		border-radius: var(--radius-pill);
		background: var(--color-paper);
		font-family: inherit;
		font-size: var(--step-0);
		text-align: center;
		color: var(--color-ink);
	}

	.single-product .single_add_to_cart_button {
		flex: 1 1 12rem;
		min-height: 3.25rem;
		padding: 0.85em 1.6em;
		border: 0;
		border-radius: var(--radius-pill);
		background: var(--color-button);
		color: var(--color-button-text);
		font-family: inherit;
		font-size: var(--step-0);
		font-weight: 500;
		line-height: 1.4;
		cursor: pointer;
		transition: background-color 0.15s;
	}

	.single-product .single_add_to_cart_button:hover:not(.disabled) {
		background: var(--color-accent);
	}

	.single-product .single_add_to_cart_button.disabled {
		background: var(--color-ink-muted);
		cursor: not-allowed;
	}

	/* Medan servern svarar: knappen tonas och tar inte ett andra klick. */
	.single-product .single_add_to_cart_button.is-loading {
		opacity: 0.6;
		pointer-events: none;
	}

	.single-product .stock.out-of-stock {
		margin: 0;
		font-size: var(--step--1);
		color: var(--color-accent-warm);
	}

	/* ---------------------------------------------------------------- */
	/* Trygghetsraden och metadata                                       */
	/* ---------------------------------------------------------------- */

	.product-assurances {
		display: flex;
		flex-direction: column;
		gap: var(--space-3xs);
		padding: var(--space-s) 0 0;
		margin: 0;
		border-block-start: var(--product-card-border);
		list-style: none;
		font-size: var(--step--1);
		color: var(--color-body);
	}

	.product-assurances li {
		display: flex;
		align-items: baseline;
		gap: var(--space-2xs);
	}

	.product-assurances li::before {
		content: "\2713";
		color: var(--color-accent);
		font-size: 0.9em;
	}

	/* ---------------------------------------------------------------- */
	/* Trygghetskorten: Klarna och frakt                                 */
	/* ---------------------------------------------------------------- */

	/*
	 * Uppställningen är longevitylabs.se:s — ikonruta, överrad i versaler,
	 * fet titel. Två kort bredvid varandra så länge de får plats, annars
	 * under varandra. `min()` i golvet i stället för ett fast minimum:
	 * ett kort som vägrar bli smalare än 220 px spränger köpspalten på en
	 * telefon.
	 */
	.product-trust {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
		gap: var(--space-2xs);
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.product-trust__card {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		padding: var(--space-xs) var(--space-s);
		border: var(--product-card-border);
		border-radius: var(--radius-card);
		background: var(--product-card-bg);
	}

	.product-trust__icon {
		flex: none;
		display: grid;
		place-items: center;
		width: 3rem;
		height: 3rem;
		padding: 0.6rem;
		border-radius: 12px;
		background: var(--color-surface);
		color: var(--color-accent);
	}

	/*
	 * Klarnas rosa, samma värde som .se använder. Ordmärket sätts i
	 * systemfonten och inte i Klarnas logotypfil — se motiveringen i
	 * lg_product_trust() i inc/product.php.
	 *
	 * Brickan är bred, inte kvadratisk. Ordet "Klarna" är 45 px vid den
	 * storlek som ser ut som ett märke, och i en 48-pixelsruta med padding
	 * fanns 29 px att stå på — bokstäverna gick ut i kanterna och det såg
	 * ut som ett fel. Klarnas egen badge är dessutom liggande. Höjden
	 * följer fraktikonens ruta så att korten står i linje.
	 */
	.product-trust__icon--klarna {
		width: auto;
		padding-inline: 0.7rem;
		background: #ffa8cd;
	}

	.product-trust__klarna {
		font-size: 0.95rem;
		font-weight: 800;
		letter-spacing: -0.03em;
		line-height: 1;
		color: #17120f;
	}

	.product-trust__glyph {
		width: 100%;
		height: auto;
	}

	.product-trust__text {
		min-width: 0;
	}

	.product-trust__label {
		display: block;
		margin-block-end: 2px;
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-accent-ink);
	}

	.product-trust__title {
		display: block;
		font-size: var(--step--1);
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-ink);
	}

	/* ---------------------------------------------------------------- */
	/* Innehåll och frakt, hopfällbart                                   */
	/* ---------------------------------------------------------------- */

	.product-panels {
		display: flex;
		flex-direction: column;
	}

	.product-panel {
		border-block-start: var(--product-card-border);
	}

	.product-panel:last-child {
		border-block-end: var(--product-card-border);
	}

	.product-panel > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
		padding: var(--space-xs) 0;
		font-size: var(--step--1);
		font-weight: 600;
		color: var(--color-ink);
		cursor: pointer;
		list-style: none;
	}

	.product-panel > summary::-webkit-details-marker {
		display: none;
	}

	.product-panel > summary::after {
		content: "";
		flex: none;
		width: 0.55rem;
		height: 0.55rem;
		border-inline-end: 1.5px solid var(--color-ink-muted);
		border-block-end: 1.5px solid var(--color-ink-muted);
		transform: translateY(-0.15rem) rotate(45deg);
		transition: transform 0.2s;
	}

	.product-panel[open] > summary::after {
		border-color: var(--color-accent);
		transform: translateY(0.1rem) rotate(-135deg);
	}

	.product-panel__body {
		padding-block-end: var(--space-s);
		font-size: var(--step--1);
		line-height: 1.65;
		color: var(--color-body);
	}

	.product-panel__body p {
		margin: 0;
	}

	.product-panel__link {
		display: inline-block;
		margin-block-start: var(--space-2xs);
		font-weight: 600;
		color: var(--color-accent-ink);
		text-underline-offset: 3px;
	}

	/*
	 * Rapporterna i testpanelen. Samma märke och samma ordning som i
	 * testsektionen på ingredienssidan — det är samma dokument, och då ska
	 * det se likadant ut var man än möter det.
	 */
	.product-panel__files {
		display: flex;
		flex-direction: column;
		gap: var(--space-2xs);
		margin-block: var(--space-xs) 0;
		padding: 0;
		list-style: none;
	}

	.product-panel__file {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3xs) var(--space-2xs);
		align-items: baseline;
		padding: var(--space-2xs) var(--space-xs);
		text-decoration: none;
		border: var(--product-card-border);
		border-radius: var(--radius-card);
	}

	.product-panel__file:hover {
		border-color: var(--color-ink-muted);
	}

	.product-panel__file:hover .product-panel__file-name {
		text-decoration: underline;
	}

	/* Etikett och inte ikon: man ska veta om det blir en fil eller en flik. */
	.product-panel__file-type {
		padding: 0.1rem 0.4rem;
		font-size: 0.62rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		color: var(--color-paper);
		background: var(--color-accent-ink);
		border-radius: var(--radius-pill);
	}

	.product-panel__file-name {
		flex: 1;
		font-weight: 600;
		color: var(--color-ink);
	}

	.product-panel__file-meta {
		font-size: 0.72rem;
		color: var(--color-ink-muted);
	}

	.single-product .product_meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs) var(--space-s);
		font-size: var(--step--1);
		color: var(--color-ink-muted);
	}

	.single-product .product_meta a {
		color: inherit;
	}

	/* ================================================================ */
	/* Produkttexten                                                     */
	/* ================================================================ */

	.product-story {
		margin-block-start: var(--space-2xl);
	}

	/*
	 * Texten står i en egen, smalare spalt än köpdelen ovanför. Två skäl:
	 * en rad brödtext ska inte bli 1 200 px lång, och den indragna
	 * spalten markerar att sidan gått från att sälja till att beskriva.
	 *
	 * Allt ligger i samma spalt, också nyckeltalen och klippen. Att låta
	 * enstaka block bryta ut till full bredd testades — skillnaden mot
	 * wrappen är bara ett par centimeter, och då läses utbrytningen som
	 * ett feljusterat block snarare än som ett grepp.
	 */
	.ll-product,
	.bp2 {
		max-width: 62rem;
		margin-inline: auto;
	}

	/* ---------------------------------------------------------------- */
	/* Ingress                                                           */
	/* ---------------------------------------------------------------- */

	.ll-hero,
	.bp2-hero {
		padding: clamp(var(--space-m), 4vw, var(--space-xl));
		border: var(--product-card-border);
		border-radius: var(--radius-panel);
		background: var(--product-card-bg);
	}

	/*
	 * Ingressens rubrik är produktnamnet en gång till — det står redan i
	 * h1:an högre upp. Den får därför rollen som överrad i stället för
	 * rubrik, så att sidan har en enda huvudrubrik.
	 */
	.ll-hero-title,
	.bp2-hero-title {
		margin: 0 0 var(--space-2xs);
		font-size: var(--step--1);
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		/*
		 * Mörka petrolen och inte den ljusa: överraden går i ~13 px, och
		 * under ungefär 14 px räcker inte accentfärgens 4,7:1.
		 */
		color: var(--color-accent-ink);
	}

	.ll-hero-text,
	.bp2-hero-text {
		margin: 0;
		font-size: var(--step-1);
		line-height: 1.6;
		color: var(--color-ink);
	}

	/* ---------------------------------------------------------------- */
	/* Nyckeltal                                                         */
	/* ---------------------------------------------------------------- */

	.ll-stats,
	.bp2-stats {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
		gap: var(--space-s);
		margin-block-start: var(--space-l);
	}

	.ll-stat,
	.bp2-stat {
		display: flex;
		flex-direction: column;
		gap: var(--space-3xs);
		padding: var(--space-m);
		border: var(--product-card-border);
		border-radius: var(--radius-card);
		background: var(--product-card-bg);
	}

	.ll-stat-label,
	.bp2-stat .k {
		order: -1;
		font-size: var(--step--1);
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--color-accent-ink);
	}

	.ll-stat-num,
	.bp2-stat .v {
		font-family: var(--font-display);
		font-size: var(--step-3);
		font-weight: 600;
		letter-spacing: -0.03em;
		line-height: 1.05;
		color: var(--color-ink);
	}

	/* Enheten hänger på siffran och ska inte konkurrera med den. */
	.ll-stat-unit,
	.bp2-stat .v span {
		margin-inline-start: 0.15em;
		font-size: 0.5em;
		font-weight: 500;
		letter-spacing: 0;
		color: var(--color-ink-muted);
	}

	.ll-stat-desc,
	.bp2-stat .d {
		font-size: var(--step--1);
		line-height: 1.45;
		color: var(--color-body);
	}

	/* ---------------------------------------------------------------- */
	/* Sektioner                                                         */
	/* ---------------------------------------------------------------- */

	.ll-section,
	.ll-readmore-section,
	.ll-video-section,
	.bp2-section {
		padding-block-start: var(--space-xl);
		margin-block-start: var(--space-xl);
		border-block-start: 1px solid var(--product-rule);
	}

	/* Första sektionen efter nyckeltalen behöver ingen linje till. */
	.ll-stats + .ll-section,
	.ll-stats + .ll-readmore-section,
	.ll-stats + .ll-video-section,
	.bp2-stats + .bp2-section {
		border-block-start: 0;
	}

	.ll-h2,
	.bp2-section > h2 {
		margin: 0 0 var(--space-s);
		font-family: var(--font-display);
		font-size: var(--step-2);
		font-weight: 600;
		letter-spacing: -0.02em;
		line-height: 1.25;
		color: var(--color-ink);
		text-wrap: balance;
	}

	.ll-p,
	.bp2-section > p,
	.bp2-col > p,
	.ll-readmore-body p,
	.bp2-rmb p {
		margin: 0 0 var(--space-s);
		font-size: var(--step-0);
		line-height: 1.75;
		color: var(--color-body);
	}

	.ll-p:last-child,
	.bp2-section > p:last-child {
		margin-block-end: 0;
	}

	.ll-small,
	.bp2-note {
		margin: 0 0 var(--space-2xs);
		font-size: var(--step--1);
		line-height: 1.6;
		color: var(--color-ink-muted);
	}

	.ll-small strong,
	.bp2-note strong {
		font-weight: 600;
		color: var(--color-body);
	}

	/*
	 * Ingrediensrubrikerna, en per smak. Klassen sätts av PHP
	 * (lg_flavour_slug i inc/product.php); en smak utan färg här faller
	 * tillbaka på den vanliga rubrikfärgen ovanför, vilket är rätt
	 * beteende för "Unflavored" och för allt vi inte känner igen.
	 */
	.ll-flavour[data-flavour="blood-orange"] {
		color: var(--flavour-blood-orange);
	}

	.ll-flavour[data-flavour="peach-persimmon"] {
		color: var(--flavour-peach-persimmon);
	}

	.ll-flavour[data-flavour="vine-watermelon"] {
		color: var(--flavour-vine-watermelon);
	}

	.ll-flavour[data-flavour="sungold-apricot"] {
		color: var(--flavour-sungold-apricot);
	}

	.product-story a {
		color: var(--color-accent-ink);
		text-underline-offset: 3px;
		text-decoration-thickness: 1px;
	}

	/* ---------------------------------------------------------------- */
	/* Tabeller                                                          */
	/* ---------------------------------------------------------------- */

	/*
	 * Tabellerna är innehållsdeklarationer: två eller tre spalter,
	 * aldrig fler i hela sortimentet. De får därför ligga kvar som
	 * riktiga tabeller på full bredd och radbryta på mobil, i stället
	 * för att skrolla i sidled — en näringstabell man måste dra i är
	 * en näringstabell ingen läser.
	 */
	.ll-table,
	.bp2-tbl {
		width: 100%;
		max-width: 100%;
		margin: var(--space-s) 0;
		border-collapse: collapse;
		font-size: var(--step--1);
	}

	.ll-table thead,
	.bp2-tbl thead {
		border-block-end: 1px solid var(--color-accent);
	}

	.ll-table th,
	.bp2-tbl th {
		padding: var(--space-2xs) var(--space-s) var(--space-2xs) 0;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		text-align: start;
		color: var(--color-ink-muted);
		white-space: nowrap;
	}

	.ll-table td,
	.bp2-tbl td {
		padding: var(--space-2xs) var(--space-s) var(--space-2xs) 0;
		border-block-start: 1px solid var(--color-line);
		line-height: 1.5;
		color: var(--color-body);
	}

	.ll-table td:first-child,
	.bp2-tbl td:first-child {
		color: var(--color-ink);
	}

	.ll-table td:last-child,
	.bp2-tbl td:last-child {
		padding-inline-end: 0;
		text-align: end;
		white-space: nowrap;
	}

	/*
	 * Läs mer på långa innehållsförteckningar.
	 *
	 * Knappen byggs av JS (initIngredientTables i product.js) och står
	 * direkt efter tabellen. Utan skript syns hela tabellen — en
	 * innehållsförteckning ska aldrig kunna hamna bakom en knapp som inte
	 * går att trycka på.
	 */
	.ll-table__more {
		display: inline-flex;
		align-items: center;
		gap: var(--space-3xs);
		padding: 0;
		margin-block-start: calc(var(--space-s) * -0.5);
		border: 0;
		background: none;
		font-size: var(--step--1);
		font-weight: 600;
		color: var(--color-accent-ink);
	}

	.ll-table__more::after {
		content: "";
		width: 0.42em;
		height: 0.42em;
		margin-inline-start: 0.3em;
		border-inline-end: 1.5px solid currentcolor;
		border-block-end: 1.5px solid currentcolor;
		transform: translateY(-0.15em) rotate(45deg);
		transition: transform 0.2s;
	}

	.ll-table__more[aria-expanded="true"]::after {
		transform: translateY(0.1em) rotate(-135deg);
	}

	/* Fortsättningstabellen sitter ihop med den ovanför. */
	.ll-table-more,
	.ll-ingredients-more .ll-table,
	.bp2-tblmore .bp2-tbl {
		margin-block-start: 0;
	}

	/* ---------------------------------------------------------------- */
	/* Läs mer, ingredienslistor och tabellfortsättningar                */
	/* ---------------------------------------------------------------- */

	.ll-readmore,
	.ll-ingredients-more,
	.bp2-rm,
	.bp2-tblmore {
		margin-block-start: var(--space-2xs);
	}

	.ll-readmore-summary,
	.ll-ingredients-summary,
	.bp2-rm > summary,
	.bp2-tblmore > summary {
		display: inline-flex;
		align-items: center;
		gap: var(--space-3xs);
		padding: 0;
		font-size: var(--step--1);
		font-weight: 600;
		color: var(--color-accent-ink);
		cursor: pointer;
		list-style: none;
	}

	.ll-readmore-summary::-webkit-details-marker,
	.ll-ingredients-summary::-webkit-details-marker,
	.bp2-rm > summary::-webkit-details-marker,
	.bp2-tblmore > summary::-webkit-details-marker,
	.ll-faq > summary::-webkit-details-marker,
	.bp2-faq > summary::-webkit-details-marker,
	.ll-disclaimer-toggle > summary::-webkit-details-marker,
	.bp2-acc summary::-webkit-details-marker {
		display: none;
	}

	/* Pilen är ritad med kant, inte med ett tecken — den ska peka exakt. */
	.ll-readmore-summary::after,
	.ll-ingredients-summary::after,
	.bp2-rm > summary::after,
	.bp2-tblmore > summary::after {
		content: "";
		width: 0.42em;
		height: 0.42em;
		margin-inline-start: 0.3em;
		border-inline-end: 1.5px solid currentcolor;
		border-block-end: 1.5px solid currentcolor;
		transform: translateY(-0.15em) rotate(45deg);
		transition: transform 0.2s;
	}

	.ll-readmore[open] > .ll-readmore-summary::after,
	.ll-ingredients-more[open] > .ll-ingredients-summary::after,
	.bp2-rm[open] > summary::after,
	.bp2-tblmore[open] > summary::after {
		transform: translateY(0.1em) rotate(-135deg);
	}

	/* Två etiketter i markupen, en synlig i taget. */
	.ll-readmore-label-open,
	.ll-ingredients-label-open,
	.bp2-rm > summary .o {
		display: none;
	}

	.ll-readmore[open] .ll-readmore-label-default,
	.ll-ingredients-more[open] .ll-ingredients-label-default,
	.bp2-rm[open] > summary .d {
		display: none;
	}

	.ll-readmore[open] .ll-readmore-label-open,
	.ll-ingredients-more[open] .ll-ingredients-label-open,
	.bp2-rm[open] > summary .o {
		display: inline;
	}

	.ll-readmore-body,
	.bp2-rmb {
		padding-block-start: var(--space-s);
	}

	/* ---------------------------------------------------------------- */
	/* Doseringsrutan                                                    */
	/* ---------------------------------------------------------------- */

	.ll-dose-box {
		padding: clamp(var(--space-m), 3vw, var(--space-l));
		border: var(--product-card-border);
		border-radius: var(--radius-panel);
		background: var(--product-card-bg);
	}

	.ll-dose-main {
		margin: 0;
		font-size: var(--step-1);
		font-weight: 500;
		line-height: 1.5;
		color: var(--color-ink);
	}

	.ll-dose-sub {
		margin: var(--space-s) 0 0;
		font-size: var(--step--1);
		line-height: 1.7;
		color: var(--color-body);
	}

	/* ---------------------------------------------------------------- */
	/* Märkningar                                                        */
	/* ---------------------------------------------------------------- */

	.ll-badges,
	.bp2-marks {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs);
		padding: 0;
		margin: 0;
		list-style: none;
	}

	/* Källan skiljer brickorna åt med <br> — den raden ska inte bryta. */
	.ll-badges br {
		display: none;
	}

	/*
	 * Märkningarna är den enda tonade ytan i texten. Vald av Linus:
	 * samma rosaskimrande platta som mätvärdeskorten på Om oss. Utan
	 * kant — den vita kanten mot en tonad platta hade bara gjort brickan
	 * suddig i konturen.
	 */
	.ll-badge,
	.bp2-marks li {
		display: inline-flex;
		align-items: baseline;
		gap: var(--space-3xs);
		padding: 0.5em 1.05em;
		border: 0;
		border-radius: var(--radius-pill);
		background: var(--color-surface-blush);
		font-size: var(--step--1);
		line-height: 1.5;
		color: var(--color-ink);
	}

	.ll-check {
		color: var(--color-accent);
		font-size: 0.9em;
	}

	.bp2-marks li::before {
		content: "\2713";
		color: var(--color-accent);
		font-size: 0.9em;
	}

	/* ---------------------------------------------------------------- */
	/* Frågor och svar                                                   */
	/* ---------------------------------------------------------------- */

	.ll-faq,
	.bp2-faq {
		border-block-end: 1px solid var(--color-line);
	}

	.ll-faq > summary,
	.bp2-faq > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
		padding: var(--space-s) 0;
		cursor: pointer;
		list-style: none;
	}

	.ll-faq > summary h3,
	.bp2-faq > summary h3 {
		margin: 0;
		font-size: var(--step-0);
		font-weight: 600;
		line-height: 1.4;
		color: var(--color-ink);
	}

	.ll-faq > summary::after,
	.bp2-faq > summary::after {
		content: "";
		flex: none;
		width: 0.7rem;
		height: 0.7rem;
		border-inline-end: 1.5px solid var(--color-ink-muted);
		border-block-end: 1.5px solid var(--color-ink-muted);
		transform: translateY(-0.2rem) rotate(45deg);
		transition: transform 0.2s;
	}

	/* Öppen fråga: pilen byter färg, så raden syns i ögonvrån. */
	.ll-faq[open] > summary::after,
	.bp2-faq[open] > summary::after {
		border-color: var(--color-accent);
		transform: translateY(0.15rem) rotate(-135deg);
	}

	.ll-faq[open] > summary h3,
	.bp2-faq[open] > summary h3 {
		color: var(--color-accent-ink);
	}

	/* Sista frågans linje krockar med sektionslinjen under. */
	.ll-faq:last-child,
	.bp2-faq:last-child {
		border-block-end: 0;
	}

	.ll-faq-body,
	.bp2-faq-body {
		margin: 0;
		padding-block-end: var(--space-m);
		font-size: var(--step-0);
		line-height: 1.7;
		color: var(--color-body);
	}

	/* ---------------------------------------------------------------- */
	/* Blueprint-texternas trespalt och dragspel                         */
	/* ---------------------------------------------------------------- */

	.bp2-cols {
		display: grid;
		gap: var(--space-l);
		margin-block-start: var(--space-l);
	}

	@media (min-width: 768px) {
		.bp2-cols {
			grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
		}
	}

	.bp2-col > h3 {
		margin: 0 0 var(--space-2xs);
		font-size: var(--step-1);
		font-weight: 600;
		letter-spacing: -0.01em;
		color: var(--color-ink);
	}

	.bp2-label {
		margin-block: var(--space-s) var(--space-2xs);
		font-size: var(--step--1);
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--color-ink-muted);
	}

	.bp2-list {
		display: flex;
		flex-direction: column;
		gap: var(--space-3xs);
		padding: 0;
		margin: 0;
		list-style: none;
		font-size: var(--step--1);
		line-height: 1.6;
		color: var(--color-body);
	}

	.bp2-list li {
		padding-inline-start: 1.1em;
		text-indent: -1.1em;
	}

	.bp2-list li::before {
		content: "\2013";
		margin-inline-end: 0.5em;
		color: var(--color-ink-muted);
	}

	.bp2-acc {
		margin-block-start: var(--space-s);
	}

	.bp2-acc details {
		border-block-start: 1px solid var(--color-line);
	}

	.bp2-acc details:last-child {
		border-block-end: 1px solid var(--color-line);
	}

	.bp2-acc summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
		padding: var(--space-2xs) 0;
		font-size: var(--step--1);
		font-weight: 600;
		color: var(--color-ink);
		cursor: pointer;
		list-style: none;
	}

	.bp2-acc summary::after {
		content: "";
		flex: none;
		width: 0.55rem;
		height: 0.55rem;
		border-inline-end: 1.5px solid var(--color-ink-muted);
		border-block-end: 1.5px solid var(--color-ink-muted);
		transform: translateY(-0.15rem) rotate(45deg);
		transition: transform 0.2s;
	}

	.bp2-acc details[open] summary::after {
		transform: translateY(0.1rem) rotate(-135deg);
	}

	.bp2-accb {
		padding-block-end: var(--space-s);
	}

	/* ---------------------------------------------------------------- */
	/* Klippen                                                           */
	/* ---------------------------------------------------------------- */

	.ll-video-grid {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(200px, 240px);
		gap: var(--space-s);
		margin-block-start: var(--space-m);
		padding-block-end: var(--space-2xs);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.ll-video-grid::-webkit-scrollbar {
		display: none;
	}

	.ll-video-card {
		scroll-snap-align: start;
		border-radius: var(--radius-card);
		background: var(--color-ink);
		overflow: hidden;
	}

	.ll-video-card video {
		display: block;
		width: 100%;
		aspect-ratio: 9 / 16;
		object-fit: cover;
	}

	.ll-swipe-hint {
		margin: var(--space-2xs) 0 0;
		font-size: var(--step--1);
		color: var(--color-ink-muted);
	}

	@media (hover: hover) and (pointer: fine) {
		/* En mus sveper inte. */
		.ll-swipe-hint {
			display: none;
		}
	}

	/* ---------------------------------------------------------------- */
	/* Korsförsäljning i texten                                          */
	/* ---------------------------------------------------------------- */

	.ll-relgrid,
	.bp2-relgrid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
		gap: var(--space-s);
		margin-block-start: var(--space-s);
	}

	.ll-relcard,
	.bp2-relcard {
		display: flex;
		flex-direction: column;
		gap: var(--space-3xs);
		padding: var(--space-2xs);
		border: var(--product-card-border);
		border-radius: var(--radius-card);
		background: var(--product-card-bg);
		text-decoration: none;
		transition: border-color 0.15s;
	}

	.ll-relcard:hover,
	.bp2-relcard:hover {
		border-color: var(--color-ink-muted);
	}

	.ll-relimg,
	.bp2-relimg {
		display: block;
		margin-block-end: var(--space-2xs);
		border-radius: calc(var(--radius-card) - 4px);
		background: var(--color-surface);
		overflow: hidden;
	}

	.ll-relimg img,
	.bp2-relimg img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: contain;
		padding: var(--space-2xs);
	}

	.ll-reltitle,
	.bp2-reltitle {
		font-size: var(--step--1);
		font-weight: 600;
		line-height: 1.35;
		color: var(--color-ink);
	}

	.ll-reldesc,
	.bp2-reldesc {
		font-size: var(--step--1);
		line-height: 1.4;
		color: var(--color-ink-muted);
	}

	/* Den äldsta varianten är bara länkar efter varandra. */
	.ll-related {
		display: flex;
		flex-direction: column;
		gap: var(--space-2xs);
		font-size: var(--step-0);
	}

	.ll-related br {
		display: none;
	}

	/* ---------------------------------------------------------------- */
	/* Friskrivningen                                                    */
	/* ---------------------------------------------------------------- */

	.ll-disclaimer-toggle,
	.bp2-disc {
		padding-block-start: var(--space-l);
		margin-block-start: var(--space-xl);
		border-block-start: var(--product-card-border);
		font-size: var(--step--1);
		line-height: 1.65;
		color: var(--color-ink-muted);
	}

	.ll-disclaimer-toggle > summary {
		font-size: var(--step--1);
		color: var(--color-ink-muted);
		cursor: pointer;
		list-style: none;
	}

	.ll-disclaimer-toggle > summary:hover {
		color: var(--color-body);
	}

	.ll-disclaimer-body {
		padding-block-start: var(--space-2xs);
	}

	.ll-disclaimer-body p,
	.bp2-disc p {
		margin: 0;
	}

	/* ================================================================ */
	/* Omdömen                                                           */
	/* ================================================================ */

	/* Samma spalt som produkttexten — omdömen är också läsning. */
	.product-reviews {
		max-width: 62rem;
		padding-block-start: var(--space-xl);
		margin: var(--space-2xl) auto 0;
		border-block-start: 1px solid var(--product-rule);
	}

	.product-reviews .woocommerce-Reviews-title,
	.single-product .related > h2,
	.single-product .up-sells > h2 {
		margin: 0 0 var(--space-l);
		font-family: var(--font-display);
		font-size: var(--step-2);
		font-weight: 600;
		letter-spacing: -0.02em;
		color: var(--color-ink);
	}

	.product-reviews .commentlist {
		display: flex;
		flex-direction: column;
		gap: var(--space-m);
		padding: 0;
		margin: 0 0 var(--space-l);
		list-style: none;
	}

	.product-reviews .comment_container {
		display: flex;
		gap: var(--space-s);
		padding: var(--space-m);
		border: var(--product-card-border);
		border-radius: var(--radius-card);
		background: var(--product-card-bg);
	}

	.product-reviews .avatar {
		flex: none;
		width: 44px;
		height: 44px;
		border-radius: var(--radius-pill);
	}

	.product-reviews .meta {
		margin: 0 0 var(--space-2xs);
		font-size: var(--step--1);
		color: var(--color-ink-muted);
	}

	.product-reviews .description p {
		margin: 0 0 var(--space-2xs);
		line-height: 1.7;
		color: var(--color-body);
	}

	.product-reviews .comment-form {
		display: flex;
		flex-direction: column;
		gap: var(--space-s);
		max-width: 44rem;
	}

	.product-reviews .comment-form label {
		display: block;
		margin-block-end: var(--space-3xs);
		font-size: var(--step--1);
		font-weight: 600;
		color: var(--color-ink);
	}

	.product-reviews .comment-form input[type="text"],
	.product-reviews .comment-form input[type="email"],
	.product-reviews .comment-form textarea {
		width: 100%;
		padding: 0.7em 0.9em;
		border: var(--product-card-border);
		border-radius: var(--radius-card);
		background: var(--color-paper);
		font-family: inherit;
		font-size: var(--step-0);
		color: var(--color-ink);
	}

	.product-reviews .comment-form .submit {
		align-self: start;
		padding: 0.8em 1.8em;
		border: 0;
		border-radius: var(--radius-pill);
		background: var(--color-button);
		color: var(--color-button-text);
		font-family: inherit;
		font-size: var(--step-0);
		font-weight: 500;
		cursor: pointer;
	}

	.product-reviews .comment-form .submit:hover {
		background: var(--color-accent);
	}

	/*
	 * Betygsväljaren.
	 *
	 * Woo bygger den med JS som fem länkar vars text är "1 of 5 stars"
	 * och så vidare, och räknar med att woocommerce.css drar undan
	 * texten och ritar stjärnan med sitt ikontypsnitt. Vi gör samma sak
	 * med ett vanligt tecken: texten krymps till noll — den finns kvar
	 * för skärmläsare — och stjärnan ritas i ::before.
	 */
	.product-reviews .comment-form-rating .stars {
		margin: 0;
	}

	.product-reviews .comment-form-rating .stars a {
		position: relative;
		display: inline-block;
		width: 1.4rem;
		height: 1.4rem;
		font-size: 0;
		text-decoration: none;
	}

	.product-reviews .comment-form-rating .stars a::before {
		content: "\2605";
		position: absolute;
		inset: 0;
		font-size: 1.3rem;
		line-height: 1;
		color: var(--color-line);
		transition: color 0.1s;
	}

	/*
	 * Hela raden tänds vid hover och släcks från den stjärna markören
	 * passerat — det är så en betygsväljare läses. Samma logik för det
	 * valda betyget, fast med .selected/.active som Woo sätter.
	 */
	.product-reviews .comment-form-rating .stars:hover a::before,
	.product-reviews .comment-form-rating .stars.selected a:not(.active)::before {
		color: var(--color-accent);
	}

	.product-reviews .comment-form-rating .stars a:hover ~ a::before,
	.product-reviews .comment-form-rating .stars.selected a.active ~ a::before {
		color: var(--color-line);
	}

	.product-reviews .comment-form-rating .stars.selected a.active::before {
		color: var(--color-accent);
	}

	/* Woo:s reserv-rullgardin visas bara när JS uteblir. */
	.product-reviews .comment-form-rating select {
		padding: 0.5em 0.7em;
		border: var(--product-card-border);
		border-radius: var(--radius-card);
		font-family: inherit;
	}

	.product-reviews .woocommerce-noreviews,
	.product-reviews .comment-notes,
	.product-reviews .comment-reply-title {
		display: block;
		margin: 0;
		font-size: var(--step-0);
		font-weight: 400;
		color: var(--color-body);
	}

	.product-reviews .comment-reply-title {
		font-size: var(--step-1);
		font-weight: 600;
		color: var(--color-ink);
	}

	.product-reviews #review_form_wrapper {
		margin-block-start: var(--space-l);
	}

	.product-reviews .comment-form-cookies-consent {
		display: flex;
		align-items: center;
		gap: var(--space-2xs);
	}

	.product-reviews .comment-form-cookies-consent label {
		margin: 0;
		font-weight: 400;
		color: var(--color-body);
	}

	/* ================================================================ */
	/* Relaterat och merförsäljning                                      */
	/* ================================================================ */

	.single-product .related,
	.single-product .up-sells {
		padding-block-start: var(--space-xl);
		margin-block-start: var(--space-2xl);
		border-block-start: 1px solid var(--product-rule);
	}

	/*
	 * Griden och korten är samma som i butiksarkivet — de kommer från
	 * shop.css, som laddas på alla Woo-sidor. Här behövs bara att
	 * kolumnerna blir fyra också i den smalare spalten.
	 */
	.single-product .related .product-grid,
	.single-product .up-sells .product-grid {
		margin: 0;
	}
}