/*
 * shop.css — laddas bara på WooCommerce-sidor.
 *
 * Layouten följer longevitylabs.se: fyra kolumner, produktbild på ljus
 * yta, kategori i grått ovanför titeln, pris i accentfärgen, pill-formad
 * knapp. Alla värden går via tokens i base.css.
 *
 * Woo:s egna stilmallar är fortfarande aktiva (LG_DROP_WOO_CSS = false),
 * så reglerna här behöver ibland vara mer specifika än man vill. När
 * filen täcker arkiv, produkt, vagn och kassa slår vi av Woo:s CSS och
 * kan förenkla.
 */

@layer components {

	/*
	 * Raden som står där när en kollektion är tom. Samma dämpade ton som
	 * resultaträknaren — den förklarar vyn, den är inte vyn.
	 *
	 * Ingresserna som stod här förut — kollektionens och termens — ligger
	 * nu sist på sidan i `.archive-note`, se content.css.
	 */
	.shop-empty {
		max-width: var(--content-max);
		margin-block: 0;
		color: var(--color-ink-muted);
	}

	/* ---------------------------------------------------------------- */
	/* Kategorirad — runda kort som scrollar i sidled                    */
	/* ---------------------------------------------------------------- */

	.cat-rail {
		/*
		 * Marginalen kollapsar mot sidtitelns, så raden hänger inte kvar
		 * i rubriken utan läses som ett eget element.
		 */
		margin-block-start: var(--space-l);
		margin-block-end: var(--space-l);
	}

	/*
	 * Scrollbaren är smal men synlig, inte gömd: den är det enda som
	 * berättar att raden fortsätter utanför kanten. Startsidans karusell
	 * har pilar som gör samma jobb, den här har inte det.
	 */
	.cat-rail__track {
		display: flex;
		gap: var(--space-xl);
		padding: 0 0 var(--space-2xs);
		margin: 0;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		overscroll-behavior-x: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--color-line) transparent;
		list-style: none;
	}

	.cat-rail__item {
		flex: 0 0 auto;
		width: clamp(84px, 22vw, 108px);
		scroll-snap-align: start;
	}

	.cat-rail__link {
		display: block;
		color: var(--color-body);
		font-size: var(--step--1);
		line-height: 1.25;
		text-align: center;
		text-decoration: none;
	}

	.cat-rail__circle {
		position: relative;
		display: grid;
		place-items: center;
		overflow: hidden;
		aspect-ratio: 1;
		border-radius: var(--radius-pill);
		background: var(--color-surface-warm);
	}

	/*
	 * Ringen ritas innanför kanten, på ett pseudoelement ovanpå bilden.
	 *
	 * Utanför kanten går inte: spåret är en scrollcontainer, och en
	 * scrollcontainer klipper allt som sticker ut — ringen hade kapats i
	 * överkant och på första kortet. Luft runt spåret löser det, men då
	 * hamnar första cirkeln bredvid sidans vänstermarginal i stället för i
	 * linje med rubriken. En kant hade krympt bilden; en inre skugga
	 * lägger sig ovanpå den, och kortet står kvar exakt där det ska.
	 */
	.cat-rail__circle::after {
		position: absolute;
		border-radius: inherit;
		box-shadow: inset 0 0 0 2px transparent;
		transition: box-shadow 0.15s;
		content: "";
		inset: 0;
	}

	.cat-rail__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.cat-rail__circle--letter {
		color: var(--color-accent-ink);
		font-size: var(--step-2);
		font-weight: 600;
	}

	.cat-rail__name {
		display: block;
		margin-block-start: var(--space-2xs);
	}

	.cat-rail__link:hover .cat-rail__circle::after,
	.cat-rail__link:focus-visible .cat-rail__circle::after {
		box-shadow: inset 0 0 0 2px var(--color-accent);
	}

	.cat-rail__link:hover .cat-rail__name,
	.cat-rail__link:focus-visible .cat-rail__name {
		color: var(--color-ink);
	}

	.cat-rail__link.is-current .cat-rail__circle::after {
		box-shadow: inset 0 0 0 2px var(--color-accent);
	}

	.cat-rail__link.is-current .cat-rail__name {
		color: var(--color-accent-ink);
		font-weight: 600;
	}

	/*
	 * På smal skärm går raden ut i kanterna. Ett kort som slutar tvärt vid
	 * sidmarginalen ser ut som radens slut; ett som skärs av vid glaskanten
	 * säger att det finns mer att svepa fram.
	 */
	@media (max-width: 699px) {
		.cat-rail__track {
			padding-inline: var(--wrap-gutter);
			margin-inline: calc(var(--wrap-gutter) * -1);
			scroll-padding-inline-start: var(--wrap-gutter);
		}
	}

	/* ---------------------------------------------------------------- */
	/* Sidnumreringen                                                    */
	/* ---------------------------------------------------------------- */

	/*
	 * Woo:s egna stilmallar är avstängda, alltså äger vi den här listan
	 * helt. Utan reglerna staplas sidnumren under varandra som en punkt-
	 * lista — det är precis vad som händer i vilken vy som helst där
	 * ingen skrivit CSS för `.page-numbers`.
	 */
	.woocommerce-pagination {
		margin-block-start: var(--space-l);
	}

	.woocommerce-pagination ul.page-numbers {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--space-2xs);
		margin: 0;
		padding: 0;
		border: 0;
		list-style: none;
	}

	.woocommerce-pagination li {
		margin: 0;
	}

	.woocommerce-pagination .page-numbers {
		display: grid;
		place-items: center;
		min-width: 2.5rem;
		height: 2.5rem;
		padding-inline: var(--space-2xs);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-pill);
		color: var(--color-body);
		font-size: var(--step--1);
		font-variant-numeric: tabular-nums;
		text-decoration: none;
		transition: border-color 0.15s, background-color 0.15s, color 0.15s;
	}

	.woocommerce-pagination a.page-numbers:hover,
	.woocommerce-pagination a.page-numbers:focus-visible {
		border-color: var(--color-ink);
		color: var(--color-ink);
	}

	.woocommerce-pagination .page-numbers.current {
		border-color: var(--color-button);
		background: var(--color-button);
		color: var(--color-button-text);
	}

	.woocommerce-pagination .page-numbers.dots {
		border-color: transparent;
	}

	/* ---------------------------------------------------------------- */
	/* Verktygsrad ovanför griden                                        */
	/* ---------------------------------------------------------------- */

	.shop-toolbar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
		margin-block-end: var(--space-m);
	}

	/* ---------------------------------------------------------------- */
	/* Arkivets två spalter                                              */
	/* ---------------------------------------------------------------- */

	/*
	 * Under 1024 px finns ingen spalt: filtren bor i en låda och griden
	 * har hela bredden. Först när det finns plats för både 240 px panel
	 * och tre produkter i bredd blir det två spalter.
	 */
	@media (min-width: 1024px) {
		.shop-body {
			display: grid;
			grid-template-columns: 240px minmax(0, 1fr);
			gap: var(--space-xl);
			align-items: start;
		}
	}

	/* ---------------------------------------------------------------- */
	/* Filterpanelen                                                     */
	/* ---------------------------------------------------------------- */

	/*
	 * Utanför skärmen till vänster, precis som menylådan. Den ligger i
	 * markupen på alla skärmar och flyttas in av `:target` eller av
	 * `data-open` som shop-filters.js sätter — CSS ensam räcker alltså
	 * för att öppna och stänga den.
	 */
	/*
	 * Själva <aside> täcker hela rutan och är skuggan; den vita panelen
	 * är barnet som skjuts in från vänster. Att i stället flytta <aside>
	 * med `translate` hade varit enklare — men ett element med transform
	 * blir containing block för sina fixerade barn, och då hade skuggan
	 * krympt till panelens egen bredd i stället för att täcka sidan.
	 */
	.shop-filters {
		position: fixed;
		inset: 0;
		z-index: 60;
		visibility: hidden;
		transition: visibility 0.25s;
	}

	.shop-filters:target,
	.shop-filters[data-open] {
		visibility: visible;
	}

	.shop-filters::before {
		position: absolute;
		background: rgb(0 0 0 / 35%);
		opacity: 0;
		transition: opacity 0.25s;
		content: "";
		inset: 0;
	}

	.shop-filters:target::before,
	.shop-filters[data-open]::before {
		opacity: 1;
	}

	.shop-filters__inner {
		position: relative;
		display: flex;
		overflow-y: auto;
		flex-direction: column;
		gap: var(--space-s);
		width: min(20rem, 88vw);
		height: 100%;
		padding: var(--space-m) var(--space-s);
		background: var(--color-paper);
		translate: -100% 0;
		transition: translate 0.25s ease;
		overscroll-behavior: contain;
	}

	.shop-filters:target .shop-filters__inner,
	.shop-filters[data-open] .shop-filters__inner {
		translate: none;
	}

	.shop-filters__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shop-filters__title {
		margin: 0;
		font-size: var(--step-1);
		font-weight: 600;
		color: var(--color-ink);
	}

	.shop-filters__close {
		display: grid;
		place-items: center;
		width: 2rem;
		height: 2rem;
		border-radius: var(--radius-pill);
		font-size: var(--step-2);
		line-height: 1;
		color: var(--color-body);
		text-decoration: none;
	}

	.shop-filters__clear {
		align-self: start;
		font-size: var(--step--1);
		color: var(--color-accent-ink);
	}

	/* Knappen som öppnar lådan, ovanför griden. */
	.shop-filters__open {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		padding: var(--space-2xs) var(--space-s);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-pill);
		margin-block-end: var(--space-s);
		font-size: var(--step--1);
		color: var(--color-ink);
		text-decoration: none;
	}

	.shop-filters__glyph {
		width: 1.1em;
		height: 1.1em;
	}

	@media (min-width: 1024px) {
		/*
		 * På desktop är panelen en spalt igen: fast placering och
		 * förskjutning nollas, och den följer med i skrollningen tills
		 * den når toppen.
		 */
		.shop-filters {
			position: sticky;
			z-index: auto;
			inset: var(--space-s) auto auto auto;
			visibility: visible;
		}

		.shop-filters__inner {
			width: auto;
			/*
			 * Panelen är klibbig och kan bli längre än fönstret. Den får
			 * då skrolla i sig själv, med samma tunna scrollbar som
			 * kategoriraden — den säger att listan fortsätter.
			 */
			max-height: calc(100vh - var(--space-xl));
			scrollbar-width: thin;
			scrollbar-color: var(--color-line) transparent;
			translate: none;
		}

		.shop-filters::before,
		.shop-filters__close,
		.shop-filters__open,
		/* Brickorna ovanför griden har redan en rensa-länk i synfältet. */
		.shop-filters__clear {
			display: none;
		}

		.shop-filters__inner {
			padding: 0;
		}

		.shop-filters__head {
			display: none;
		}
	}

	/* ---------------------------------------------------------------- */
	/* Fasetterna                                                        */
	/* ---------------------------------------------------------------- */

	/*
	 * Rytmen är .se:s, avläst på deras sidopanel: rubrik i brödtextens
	 * storlek med medelvikt, 20 px ner till innehållet, 30 px och ett
	 * hårstreck ner till nästa grupp.
	 */
	.filter-group {
		padding-block-end: var(--space-m);
		border-block-end: 1px solid var(--color-line);
	}

	.filter-group__title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-block: var(--space-2xs);
		font-size: var(--step-0);
		font-weight: 500;
		color: var(--color-ink);
		cursor: pointer;
		list-style: none;
	}

	/* Safari ritar en egen triangel utan den här. */
	.filter-group__title::-webkit-details-marker {
		display: none;
	}

	/* Egen pil, så att den pekar åt rätt håll i båda lägena. */
	.filter-group__title::after {
		width: 0.5em;
		height: 0.5em;
		/*
		 * Rutan är vriden 45°, och en vriden ruta tar mer plats i sidled än
		 * sin egen bredd. Utan marginalen sticker spetsen ut ur panelen och
		 * ger den en vågrät scrollbar på två pixlar.
		 */
		margin-inline-end: 0.25em;
		border-inline-end: 1.5px solid currentcolor;
		border-block-end: 1.5px solid currentcolor;
		rotate: 45deg;
		translate: 0 -0.15em;
		transition: rotate 0.15s;
		content: "";
	}

	.filter-group[open] > .filter-group__title::after {
		rotate: -135deg;
		translate: 0 0.15em;
	}

	.filter-list {
		display: flex;
		flex-direction: column;
		gap: var(--space-3xs);
		padding: 0;
		margin: var(--space-s) 0 0;
		list-style: none;
	}

	/*
	 * Ingen kryssruta, som på .se: raden är namnet, antalet och — för
	 * varumärken — logotypen. En ritad kryssruta hade dessutom lovat något
	 * raden inte håller, nämligen att den går att bocka i utan omladdning.
	 */
	.filter-option {
		display: flex;
		align-items: center;
		gap: var(--space-2xs);
		padding-block: var(--space-3xs);
		font-size: var(--step-0);
		color: var(--color-body);
		text-decoration: none;
	}

	.filter-option:hover,
	.filter-option:focus-visible {
		color: var(--color-ink);
	}

	.filter-option__logo {
		display: grid;
		flex: 0 0 auto;
		place-items: center;
		width: 3.25rem;
		height: 1.75rem;
		border-radius: 3px;
		background: var(--color-surface);
	}

	.filter-option__logo img {
		max-width: 82%;
		max-height: 76%;
		object-fit: contain;
	}

	.filter-option__label {
		flex: 1 1 auto;
		line-height: 1.3;
	}

	/* Antalet i en liten rundad bricka till höger, som .se ritar den. */
	.filter-option__count {
		flex: 0 0 auto;
		min-width: 1.75rem;
		padding: 0.1em 0.4em;
		border: 1px solid var(--color-line);
		border-radius: var(--radius-pill);
		font-size: var(--step--1);
		color: var(--color-ink-muted);
		font-variant-numeric: tabular-nums;
		text-align: center;
	}

	.filter-option.is-checked {
		color: var(--color-accent-ink);
		font-weight: 500;
	}

	.filter-option.is-checked .filter-option__count {
		border-color: var(--color-accent);
		background: var(--color-accent);
		color: #fff;
	}

	/* ---------------------------------------------------------------- */
	/* Kategoribilden under filtren                                      */
	/* ---------------------------------------------------------------- */

	/*
	 * `margin-block-start: auto` gör jobbet i båda lägena: i lådan på
	 * mobil, som är fönsterhög, faller kortet ner i botten istället för
	 * att hänga i sista filtret; i spalten på desktop, som är innehålls-
	 * hög, står det direkt under filtren.
	 */
	.filter-cat {
		display: block;
		margin-block-start: auto;
		padding-block-start: var(--space-s);
		border-block-start: 1px solid var(--color-line);
	}

	/*
	 * I andra vyer än kategorins egen är kortet en länk till paketen.
	 * Färgerna sätts på raderna inuti, så länken ska inte lägga sin egen
	 * ovanpå — bara stryka understrykningen och svara på pekaren.
	 */
	.filter-cat--link {
		color: inherit;
		text-decoration: none;
	}

	.filter-cat--link:hover .filter-cat__name,
	.filter-cat--link:focus-visible .filter-cat__name {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	/*
	 * Sista fasetten stänger sig själv med ett hårstreck, och kortet öppnar
	 * med ett eget — det blev två streck med en tom remsa emellan. Strecket
	 * hör till kortet, för i lådan på mobil skjuts kortet ner i botten och
	 * står då inte längre kant i kant med fasetten ovanför.
	 */
	.filter-group:has(+ .filter-cat) {
		border-block-end: 0;
	}

	/*
	 * Bilden ger kortet sin form, inte tvärtom — samma beslut som för
	 * kampanjkortet i menyn. Kategoribilderna är stående, och en påtvingad
	 * liggande ruta med `cover` skar mitt igenom motivet: kvar blev ett
	 * band ur mitten som såg ut som en trasig bild. Höjd- och breddattri-
	 * buten på taggen reserverar ytan innan bilden laddats, så formen
	 * behöver inte låsas i CSS för att hålla layouten still.
	 */
	.filter-cat__img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: var(--radius-card);
		/* Skydd om någon sätter en höjd: hellre luft än beskärning. */
		object-fit: contain;
	}

	.filter-cat__body {
		margin-block-start: var(--space-2xs);
	}

	.filter-cat__name {
		margin: 0;
		font-weight: 600;
		color: var(--color-ink);
	}

	.filter-cat__note {
		margin: 0;
		font-size: var(--step--1);
		font-weight: 600;
		color: var(--color-sale);
	}

	.filter-cat__count {
		margin: 0;
		font-size: var(--step--1);
		color: var(--color-ink-muted);
	}

	/* ---------------------------------------------------------------- */
	/* Prisreglaget                                                      */
	/* ---------------------------------------------------------------- */

	.filter-price {
		margin-block-start: var(--space-s);
	}

	/*
	 * Två reglage ovanpå varandra. Själva inputen är genomskinlig och
	 * släpper igenom klick; bara handtagen tar emot dem, annars hade det
	 * översta reglaget lagt beslag på hela banan och det undre handtaget
	 * aldrig gått att ta tag i.
	 */
	.filter-price__slider {
		position: relative;
		height: 1.75rem;
	}

	.filter-price__track {
		position: absolute;
		inset-block-start: 50%;
		inset-inline: 0.5rem;
		height: 2px;
		border-radius: 2px;
		background: var(--color-line);
		translate: 0 -50%;
	}

	.filter-price__fill {
		position: absolute;
		inset-block: 0;
		background: var(--color-accent);
	}

	.filter-price__range {
		position: absolute;
		inset-block-start: 50%;
		inset-inline: 0;
		width: 100%;
		height: 1.75rem;
		padding: 0;
		margin: 0;
		appearance: none;
		background: none;
		pointer-events: none;
		translate: 0 -50%;
	}

	.filter-price__range::-webkit-slider-thumb {
		width: 1rem;
		height: 1rem;
		border: 1px solid var(--color-accent);
		border-radius: var(--radius-pill);
		appearance: none;
		background: var(--color-paper);
		cursor: pointer;
		pointer-events: auto;
	}

	.filter-price__range::-moz-range-thumb {
		width: 1rem;
		height: 1rem;
		border: 1px solid var(--color-accent);
		border-radius: var(--radius-pill);
		background: var(--color-paper);
		cursor: pointer;
		pointer-events: auto;
	}

	.filter-price__range:focus-visible::-webkit-slider-thumb {
		outline: 2px solid var(--color-accent);
		outline-offset: 2px;
	}

	.filter-price__value {
		margin: var(--space-2xs) 0 var(--space-s);
		font-size: var(--step--1);
		color: var(--color-body);
	}

	.filter-price__value span {
		color: var(--color-ink);
	}

	/* Mörk pillerknapp, samma som .se:s "Filtrera". */
	.filter-price__apply {
		padding: 0.5em 1.1em;
		border: 0;
		border-radius: var(--radius-pill);
		background: var(--color-button);
		font-size: var(--step--1);
		font-weight: 500;
		color: var(--color-button-text);
		cursor: pointer;
	}

	.filter-price__apply:hover {
		background: var(--color-accent);
	}

	/* ---------------------------------------------------------------- */
	/* Aktiva filter som brickor                                         */
	/* ---------------------------------------------------------------- */

	.active-filters {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2xs);
		margin-block-end: var(--space-s);
	}

	.active-filters__chip {
		display: inline-flex;
		align-items: center;
		gap: var(--space-3xs);
		padding: var(--space-3xs) var(--space-xs);
		border: 1px solid var(--color-accent);
		border-radius: var(--radius-pill);
		font-size: var(--step--1);
		color: var(--color-accent-ink);
		text-decoration: none;
	}

	.active-filters__chip span {
		font-size: 1.1em;
		line-height: 1;
	}

	.active-filters__clear {
		font-size: var(--step--1);
		color: var(--color-body);
	}

	/*
	 * Woo sätter float på båda barnen. Vi nollar det — annars faller de
	 * ur flex-flödet och griden hamnar bredvid dem i stället för under.
	 */
	.shop-toolbar .woocommerce-result-count,
	.shop-toolbar .woocommerce-ordering {
		float: none;
		margin: 0;
	}

	.shop-toolbar select {
		padding: 0.4em 0.6em;
		border: 1px solid var(--color-line);
		border-radius: 4px;
		background: var(--color-paper);
		font-size: var(--step--1);
		color: var(--color-body);
	}

	/* ---------------------------------------------------------------- */
	/* Produktgrid                                                       */
	/* ---------------------------------------------------------------- */

	.product-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-m) var(--space-s);
		padding: 0;
		margin: 0;
		list-style: none;
	}

	@media (min-width: 768px) {
		.product-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	@media (min-width: 1024px) {
		.product-grid {
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: var(--space-l) 20px;
		}

		/*
		 * Filterspalten tar 240 px av bredden. Fyra kort i den återstående
		 * ytan hade blivit smalare än produktbilderna tål; tre får plats
		 * tills fönstret är brett nog för det fjärde igen.
		 */
		.shop-main .product-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	@media (min-width: 1400px) {
		.shop-main .product-grid {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}

	/* Sidan bakom filterlådan ska inte skrolla med. */
	html.has-filters-open {
		overflow: hidden;
	}

	/* ---------------------------------------------------------------- */
	/* Produktkort                                                       */
	/* ---------------------------------------------------------------- */

	.product-card {
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.product-card__media {
		position: relative;
		background: var(--color-surface);
		overflow: hidden;
	}

	.product-card__media-link {
		display: block;
	}

	/*
	 * aspect-ratio + object-fit reserverar utrymmet innan bilden laddats.
	 * Det är det som håller CLS nere — utan detta hoppar hela griden när
	 * bilderna trillar in.
	 */
	.product-card__img {
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: contain;
		transition: transform 0.3s ease;
	}

	.product-card:hover .product-card__img {
		transform: scale(1.04);
	}

	.product-card__body {
		display: flex;
		flex-direction: column;
		gap: var(--space-3xs);
		padding-block-start: var(--space-xs);
	}

	.product-card__cat {
		margin: 0;
		font-size: var(--step--1);
		color: var(--color-ink-muted);
		line-height: 1.3;
	}

	.product-card__title {
		margin: 0;
		font-family: var(--font-display);
		font-size: var(--step-0);
		font-weight: 600;
		letter-spacing: -0.01em;
		line-height: 1.35;
		color: var(--color-ink);
	}

	.product-card__title a {
		text-decoration: none;
		color: inherit;
	}

	.product-card__title a:hover {
		color: var(--color-accent);
	}

	.product-card__rating {
		margin: 0;
		font-size: var(--step--1);
		color: var(--color-ink-muted);
	}

	.product-card__rating-value::before {
		content: "★";
		margin-inline-end: 0.2em;
		color: var(--color-accent);
	}

	/* Woo skriver ut priset som .price med egna marginaler — nolla dem. */
	.product-card__price,
	.product-card__price .price {
		margin: 0;
		font-size: var(--step-0);
		font-weight: 600;
		color: var(--color-accent);
	}

	.product-card__price del {
		margin-inline-end: var(--space-3xs);
		font-weight: 400;
		color: var(--color-ink-muted);
	}

	.product-card__price ins {
		text-decoration: none;
	}

	/* ---------------------------------------------------------------- */
	/* Lägg i varukorg                                                   */
	/* ---------------------------------------------------------------- */

	/*
	 * `auto` och inte ett mått: produktnamnen är olika långa, och utan
	 * det här hamnar knapparna på fyra olika höjder i samma rad. Kortet
	 * fyller redan sin gridcell, alltså finns det utrymme att skjuta ned.
	 */
	.product-card__actions {
		margin-block-start: auto;
		padding-block-start: var(--space-2xs);
	}

	.product-card__actions .button,
	.product-card__actions .add_to_cart_button {
		display: inline-block;
		padding: 0.5em 1.15em;
		border: 0;
		border-radius: 999px;
		background: var(--color-button);
		color: var(--color-button-text);
		font-family: var(--font-sans);
		font-size: var(--step--1);
		font-weight: 500;
		line-height: 1.4;
		text-decoration: none;
		transition: background-color 0.15s;
	}

	.product-card__actions .button:hover,
	.product-card__actions .add_to_cart_button:hover {
		background: var(--color-accent);
	}

	/* ---------------------------------------------------------------- */
	/* Arkivets huvud                                                    */
	/* ---------------------------------------------------------------- */

	.woocommerce-products-header__title,
	.shop-layout .page-title {
		font-family: var(--font-display);
		font-size: var(--step-3);
		font-weight: 600;
		letter-spacing: -0.02em;
		color: var(--color-ink);
		margin-block-end: var(--space-s);
	}

	.woocommerce-result-count {
		font-size: var(--step--1);
		color: var(--color-ink-muted);
	}

	/* Rea-etikett */
	.product-card .onsale {
		position: absolute;
		inset-block-start: var(--space-2xs);
		inset-inline-start: var(--space-2xs);
		z-index: 1;
		padding: 0.15em 0.6em;
		border-radius: 999px;
		background: var(--color-accent);
		color: #fff;
		font-size: var(--step--1);
		line-height: 1.5;
	}

	/* ---------------------------------------------------------------- */
	/* Önskelista                                                        */
	/* ---------------------------------------------------------------- */

	/*
	 * Hjärtat i kortets övre högra hörn, mitt emot rea-etiketten. En vit
	 * bricka och inte bara en ikon: produktbilderna är ljusa men inte vita,
	 * och en tunn linje utan platta under försvinner mot en burketikett.
	 */
	.wishlist-toggle--card {
		position: absolute;
		inset-block-start: var(--space-2xs);
		inset-inline-end: var(--space-2xs);
		z-index: 2;
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: color-mix(in srgb, var(--color-paper) 88%, transparent);
		box-shadow: 0 1px 4px rgb(0 0 0 / 0.1);
		color: var(--color-ink);
		transition: color 0.15s, background-color 0.15s, scale 0.15s;
	}

	.wishlist-toggle--card:hover {
		background: var(--color-paper);
		color: var(--color-accent);
	}

	.wishlist-toggle__icon {
		width: 19px;
		height: 19px;
		transition: fill 0.15s;
	}

	/*
	 * Sparat läge: hjärtat fylls i accentfärgen. Fyllningen och inte bara
	 * linjen — skillnaden mellan tomt och fyllt hjärta är den enda signalen
	 * på ett kort som annars ser likadant ut.
	 */
	.wishlist-toggle[aria-pressed="true"] {
		color: var(--color-accent);
	}

	.wishlist-toggle[aria-pressed="true"] .wishlist-toggle__icon {
		fill: currentColor;
	}

	/*
	 * Produktsidan: hjärtat är en textknapp under köpknappen, inte en
	 * ikon i ett hörn. Där finns plats för orden, och "Add to wishlist"
	 * säger vad ikonen bara antyder.
	 */
	.wishlist-toggle--inline {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		margin-block-start: var(--space-xs);
		padding: 0;
		border: 0;
		background: none;
		color: var(--color-body);
		font-size: var(--step--1);
		transition: color 0.15s;
	}

	.wishlist-toggle--inline:hover {
		color: var(--color-accent);
	}

	/* ---------------------------------------------------------------- */
	/* Önskelistesidan                                                   */
	/* ---------------------------------------------------------------- */

	.wishlist-page__title {
		margin-block-end: var(--space-s);
	}

	.wishlist-page__status,
	.wishlist-page__loading,
	.wishlist-page__empty p {
		margin: 0;
		color: var(--color-body);
	}

	.wishlist-page__loading {
		padding-block: var(--space-l);
	}

	/*
	 * Raden om att listan bara ligger på den här enheten står under korten,
	 * som en fotnot — den är ett erbjudande, inte ett hinder att ta sig
	 * förbi innan man får spara något.
	 */
	.wishlist-page__note {
		margin-block-start: var(--space-m);
		color: var(--color-body);
		font-size: var(--step--1);
	}

	.wishlist-page__empty {
		display: grid;
		justify-items: start;
		gap: var(--space-s);
		padding-block: var(--space-l);
	}

	.wishlist-page__cta {
		display: inline-block;
		padding: 0.65em 1.4em;
		border-radius: var(--radius-pill);
		background: var(--color-button);
		color: var(--color-button-text);
		font-size: var(--step--1);
		font-weight: 500;
		text-decoration: none;
		transition: background-color 0.15s;
	}

	.wishlist-page__cta:hover {
		background: var(--color-accent);
	}
}