/*
Theme Name: Gården
Template: realm
Author: Yeti Web
Author URI: https://yetiweb.se
Description: Child theme for Gården — din grönsakshandlare. Byggt på Realm.
Version: 1.9.1
Update URI: https://github.com/joakim-tldr/garden
Text Domain: garden
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.1
WC requires at least: 8.9
WC tested up to: 10.4
*/

/* =============================================================================
 * GÅRDEN — child theme
 *
 * Varm & organisk grönsakshandlare byggd på Realm. Palett injiceras temascopat
 * via functions.php (build_palette_properties). Denna fil hanterar typografi,
 * form (pill/mjuka hörn), varma neutraler, splash-startsida och webshop-finslip.
 *
 * Allt bygger på Realms tokens (var(--realm-*)). Child-CSS är oskiktad och
 * vinner därför över parentens @layer-regler utan !important i de flesta fall.
 *
 * Innehåll:
 *    1. Designtokens        radier (pill), varma skuggor
 *    2. Bastypografi        rubrik- och brödtextroller ur typografipresetet
 *    3. Form & knappar      pill, mjuka lyft
 *    4. Webshop             produktkort, priser, loop
 *    5. Splash              startsidan (body.garden-splash)
 *    7. Produktsida         single-product
 *    8. Kassa
 *    9. Varukorg
 *   10. Mini-varukorg
 *   11. Mina sidor
 *   12. Profil-panel
 *   13. Editoriellt layoutsystem  .garden-hero / --page / --image, .garden-band
 *  13b. Not: banden ersatta av Realms sektionsstilar
 *   14. Shop-/arkivsidan
 *   15. Interaktiva shop-mönster
 *   16. Ewermans designspråk      behandlingen av Realms sektionsstilar (16.1–16.13)
 *
 * Avsnitt 6 finns inte — numreringen har luckor av historiska skäl, och att
 * numrera om allt hade gjort varje framtida diff oläsbar mot en äldre version.
 * Avsnitt 16 hette tidigare 9, alltså samma nummer som varukorgen; det var den
 * enda dubbletten och den är borta.
 * ========================================================================== */

/* =============================================================================
 * 1. DESIGNTOKENS
 * -----------------------------------------------------------------------------
 * Typsnitt, radier och skuggor sattes tidigare som tokens har. De styrs numera
 * fran temainstallningarna i foraldern:
 *
 *   Typsnitt   Realm -> Styling -> Typografi -> uppsattningen "Garden"
 *              (presets/typography/garden.json i det har temat)
 *   Radier     Realm -> Styling -> Element -> Hornradie
 *   Skuggor    Realm -> Styling -> Element -> Skuggstyrka
 *
 * Lagg inte tillbaka dem har. En token som sitter i bade CSS och installning
 * gor installningen verkningslos, och nasta person ser inte varfor.
 *
 * Undantag: skuggans TON. Installningen "Varumarkestonad" anvander
 * --realm-tertiary, som hos Garden ar lila. Hela skuggskalan bygger numera pa
 * --realm-shadow-color, sa en varm brun ton racker med en rad har. Detta
 * fungerar bara sa lange skuggtonen star pa "Neutral" i installningarna --
 * annars skriver forlderns inline-tokens over den (de kommer efter denna fil
 * i head och har hogre specificitet).
 * ========================================================================== */

:root {
	/* Varm brun skuggton i stallet for neutral svart -- matchar cremeytan. */
	--realm-shadow-color: #2c1f14;
}

/* =============================================================================
 * 2. BASTYPOGRAFI
 * ========================================================================== */
body {
	/* font-family kommer fran --realm-font-primary som typsnittsuppsattningen satter. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--realm-font-heading);
	font-weight: var(--realm-heading-weight);
	letter-spacing: -0.01em;
}

/* Stora rubriker tål — och behöver — lite lägre vikt och tightare tracking än
   små. Gäller formen, inte ett visst typsnitt: familjen kommer från presetet. */
h1, .realm-hero__title, .realm-slider__title {
	font-weight: 500;
	letter-spacing: -0.02em;
}

/* =============================================================================
 * 3. FORM & KNAPPAR
 * ========================================================================== */

/* Mjukt lyft på primära knappar (organiskt, inte hårt).
 *
 * Lyftet ligger på `translate`, inte på `transform`. Karusellens pilar
 * centreras med transform: translateY(-50%), och ett transform i hover-läget
 * ERSÄTTER den — pilen tappade sin centrering och föll ett halvt pilhuvud vid
 * varje hovring. `translate` är en egen egenskap som komponeras med transform,
 * så positioneringen överlever lyftet. Samma sak gäller varje knapp som råkar
 * använda transform för sin placering. */
.realm-button,
a.button,
button.button {
	transition: translate 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.realm-button:hover,
a.button:hover,
button.button:hover {
	translate: 0 -1px;
	box-shadow: var(--realm-shadow-sm);
}

/* =============================================================================
 * 4. WEBSHOP — visuell finslip (funktioner orörda)
 *
 * Referens: bakemydayorder.se — varma, rundade produktkort, lugn header, pill-
 * chips. Realms exakta klasser: .cell.product (kort), .woocommerce-loop-product__
 * title, .realm-product__price, .realm-loop-add-to-cart, .realm-secondary-nav.
 * ========================================================================== */

/* --- Produktkort: platt → varmt, rundat "riktigt" kort --- */
/* Gäller grid-loopar OCH horisontella produktkaruseller (rekommendationer/
   "Alternativa Produkter", upsells, nyligen visade) så finishen är identisk
   var korten än dyker upp. */
.shop-products--grid .cell.product,
.products.fixed-grid .cell.product,
.products.product-carousel .cell.product {
	background: var(--realm-bg-surface, #fff);
	border: 1px solid var(--realm-border-light);
	border-radius: var(--realm-radius-card);
	box-shadow: var(--realm-shadow-xs);
	padding: var(--realm-space-3);
	transition: translate 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.shop-products--grid .cell.product:hover,
.products.fixed-grid .cell.product:hover,
.products.product-carousel .cell.product:hover {
	translate: 0 -3px;
	box-shadow: var(--realm-shadow-md);
	border-color: color-mix(in srgb, var(--realm-primary) 25%, var(--realm-border-light));
}

/* Bild flush och rundad i kortets ovankant-känsla */
.shop-products--grid .cell.product img,
.products.fixed-grid .cell.product img,
.products.product-carousel .cell.product img {
	border-radius: var(--realm-radius-image);
}

/* --- Produktkarusell ("Alternativa Produkter" m.fl.): luft + andrum --- */
/* Realms default-gap är 4px — för trångt när korten fått skugga.
   Sätt TOKEN, inte gap: Realm räknar kortbredden ur mellanrummet, så ett gap
   satt vid sidan av beräkningen får korten att spilla över kanten igen.

   Fadet som låg här är borta — det var en fast mask i högerkanten som låg kvar
   även när man scrollat hela vägen ut. Realm ritar det nu i båda kanterna och
   bara när det finns mer åt det hållet. */
.products.product-carousel {
	--realm-carousel-gap: var(--realm-space-4);
	padding-block: var(--realm-space-2);
	scroll-padding-inline: var(--realm-space-1);
}

/* Produkttitel: rubriktypsnittet men lättare vikt (800 blir för tungt i titelgrad) */
.woocommerce-loop-product__title {
	font-family: var(--realm-font-heading);
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Titel-länken ärver annars grön länkfärg → läser som mörk-oliv i småformat.
   Tvinga varm nästan-svart för en lugn editoriell hierarki (svart titel,
   orange varumärke, grönt pris). Grön först vid hover. */
.woocommerce-loop-product__title a {
	color: var(--realm-heading);
	transition: color 0.15s ease;
}

.woocommerce-loop-product__title a:hover {
	color: var(--realm-primary);
}

/* Varumärkes-eyebrow i loop-korten: mindre och lugnare (13px kändes stort). */
.cell.product .realm-product__brand .brand a {
	font-size: 0.7rem;
	letter-spacing: 0.06em;
}

/* Pris: tydligt men lugnt */
.realm-product__price {
	font-weight: 600;
}

/* Favorit-hjärtat som overlay får en mjuk cirkel så det syns mot bilden */
.cell.product > a > button[aria-label*="favorit" i],
.cell.product button[aria-label*="favorit" i] {
	background: color-mix(in srgb, var(--realm-bg-surface, #fff) 82%, transparent);
	border-radius: var(--realm-radius-full);
	backdrop-filter: blur(4px);
}

/* --- Header: lugnare och luftigare (behåller alla ikoner) --- */
#navbar-wrapper {
	border-bottom: 1px solid color-mix(in srgb, var(--realm-text) 8%, transparent);
}

/* Hårstrecket ritar en linje tvärs över heron när headern är transparent.
 * Realm släcker sina egna kanter där, men når inte hit: realms CSS ligger i
 * @layer realm, och olagrad CSS vinner över lagrad oavsett specificitet. Den
 * som lade till kanten får därför själv stå tillbaka. */
.realm-header--transparent:not(.is-scrolled) #navbar-wrapper {
	border-color: transparent;
}

.realm-navbar__icon:hover {
	color: var(--realm-primary);
}

/* --- Sekundär kategori-nav som mjuka pill-chips (bakemyday-känsla) --- */

/* Sidopaddingen sätts som TOKEN, inte som padding på länken.
 *
 * Realm läser --realm-nav-item-inset både här och i brödsmulan, så etiketterna
 * och smulraden står i lod. Skrevs paddingen direkt på länken flyttades bara
 * menyn, och brödsmulan blev kvar 16px till vänster. */
:root {
	--realm-nav-item-inset: var(--realm-space-4);
}

.realm-secondary-nav__menu .realm-hmm__link {
	border-radius: var(--realm-radius-full);
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* Hovern låg här med en egen ton. Realm ger numera samma markering via
 * --realm-menu-surface-hover / --realm-menu-text-hover, och de tokens pekas om
 * av den transparenta headern. En egen regel här är oskiktad och vann därför
 * över omplaceringen — menyn blev osynlig mot heron. Bort med den. */

/* =============================================================================
 * 5. SPLASH — startsida (body.garden-splash)
 *
 * "Hero + sektioner": transparent header (sidinställningen Header =
 * Transparent), stor hero, sedan kategori- + produktsektioner. Innehållet
 * byggs med native block (.garden-hero group + .garden-section) + WC-shortcodes.
 *
 * Dölj INTE sekundärnavet här. Det doldes en gång, med motiveringen att
 * kategorierna visas som brickor längre ned. Följden blev att startsidan var
 * enda sidan utan navigering — besökaren såg logga, sök och kundvagn men ingen
 * väg vidare utan att först scrolla. Brickorna ersätter inte en meny; de är
 * innehåll, inte navigation.
 * ========================================================================== */

/* Mainens toppluft nollas numera av Realm, via .realm-has-transparent-header
 * som sidinställningen Header = Transparent sätter. Regeln låg här också och
 * gjorde samma sak — men bara på startsidan, och bara för att body-klassen
 * råkade finnas. Nu följer den valet i stället för sidans identitet. */

/* --- HERO --- */
.garden-hero {
	min-height: 78vh;
	min-height: 78svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--realm-space-4);
	padding: var(--realm-space-8) var(--realm-space-5);
	text-align: center;
	color: #faf7f0;
	background:
		radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--realm-primary) 70%, #f4efe4) 0%, transparent 60%),
		linear-gradient(165deg, color-mix(in srgb, var(--realm-primary) 74%, #1c260f) 0%, var(--realm-primary) 58%, color-mix(in srgb, var(--realm-primary) 88%, #12180a) 100%);
}

.garden-hero > * {
	max-width: 46rem;
	margin-inline: auto;
}

/* --- Realm hero-block (realm/hero) UTAN bild → Gårdens brand-färger ---
   En bildlös slide har vit text (u-text-white) på transparent cell → osynlig.
   Bildspelet får Gårdens tre brand-färger i tur och ordning (grön/orange/lila)
   så det blir färgstarkt on-brand utan foton. Gradient mot mörkt → vit text
   läsbar. Så snart en bild läggs till sätter render.php --bg-desktop → då gäller
   inte denna regel och bilden tar över. */
.realm-slider-wrapper .hero.carousel-cell:not([style*="--bg-desktop"]) {
	background:
		radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--realm-primary) 70%, #f4efe4) 0%, transparent 60%),
		linear-gradient(165deg, color-mix(in srgb, var(--realm-primary) 74%, #1c260f) 0%, var(--realm-primary) 58%, color-mix(in srgb, var(--realm-primary) 88%, #12180a) 100%);
}

.realm-slider-wrapper .hero.carousel-cell:nth-child(2):not([style*="--bg-desktop"]) {
	background:
		radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--realm-secondary) 68%, #f4efe4) 0%, transparent 60%),
		linear-gradient(165deg, color-mix(in srgb, var(--realm-secondary) 66%, #2a1607) 0%, color-mix(in srgb, var(--realm-secondary) 90%, #2a1607) 58%, color-mix(in srgb, var(--realm-secondary) 78%, #1a0d03) 100%);
}

.realm-slider-wrapper .hero.carousel-cell:nth-child(3):not([style*="--bg-desktop"]) {
	background:
		radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--realm-tertiary) 70%, #f4efe4) 0%, transparent 60%),
		linear-gradient(165deg, color-mix(in srgb, var(--realm-tertiary) 74%, #180b1e) 0%, var(--realm-tertiary) 58%, color-mix(in srgb, var(--realm-tertiary) 88%, #100713) 100%);
}

.garden-hero h1 {
	color: #fff;
	font-size: clamp(2.6rem, 6vw, 5rem);
	line-height: 1.02;
	font-weight: 500;
	letter-spacing: -0.025em;
	margin: 0;
	text-shadow: 0 2px 18px color-mix(in srgb, #12180a 35%, transparent);
}

.garden-hero p {
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	line-height: 1.5;
	color: color-mix(in srgb, #ffffff 88%, var(--realm-primary));
	margin: 0;
}

/* Dominant CTA: creme pill med grön text — blickfånget */
.garden-hero__cta .wp-block-button__link,
.garden-hero .wp-block-button__link {
	display: inline-block;
	background: #faf7f0;
	color: var(--realm-primary-dark);
	font-family: var(--realm-font-primary);
	font-weight: 700;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	padding: 1.05rem 2.6rem;
	border-radius: var(--realm-radius-full);
	box-shadow: 0 12px 30px color-mix(in srgb, #12180a 30%, transparent);
	transition: translate 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.garden-hero .wp-block-button__link:hover {
	translate: 0 -2px;
	background: #ffffff;
	box-shadow: 0 16px 38px color-mix(in srgb, #12180a 38%, transparent);
}

/* Liten sekundärlänk under CTA */
.garden-hero__secondary {
	margin-top: var(--realm-space-1);
}

.garden-hero__secondary a {
	color: color-mix(in srgb, #ffffff 82%, var(--realm-primary));
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: var(--realm-text-sm);
}

/* Mobil */
@media screen and (max-width: 768px) {
	.garden-hero {
		min-height: 70svh;
		padding: var(--realm-space-7) var(--realm-space-4);
	}
	/* Kategori-chip-raden scrollar horisontellt istället för att radbryta */
	.realm-secondary-nav__menu {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.realm-secondary-nav__menu::-webkit-scrollbar {
		display: none;
	}
}

/* Responsivt rutnät */
@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 600px) {
}

/* =============================================================================
 * 7. PRODUKTSIDA (single-product) — varm finish
 *
 * Ärver redan rubriktypsnittet + grön pill-köpknapp. Här: prominent pris, mjukt
 * galleri, grön pill-tillgänglighet, rundad kvantitet/variationer, större CTA.
 * Selektorer: h1.title, .realm-product__price, .realm-product__availability,
 * .realm-product__quantity, .variations select, .single_add_to_cart_button.
 * ========================================================================== */

/* Galleri som mjukt kort */
.single-product .woocommerce-product-gallery img {
	border-radius: var(--realm-radius-card);
	box-shadow: var(--realm-shadow-sm);
}

/* Titel mer närvaro */
.single-product h1.title,
.single-product .realm-product__title h1 {
	font-size: clamp(2rem, 3.4vw, 2.6rem);
	line-height: 1.1;
}

/* Pris prominent i summeringen (loop-kort i related förblir normalt) */
.single-product .realm-product__price {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 700;
	color: var(--realm-primary-dark);
}

.single-product .cell.product .realm-product__price {
	font-size: var(--realm-text-base);
	font-weight: 600;
	color: var(--realm-text);
}

/* Tillgänglighet som mjuk grön pill-badge */
.single-product .realm-product__availability.in-stock {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: color-mix(in srgb, var(--realm-primary) 12%, transparent);
	color: var(--realm-primary-dark);
	padding: 0.35em 0.9em;
	border-radius: var(--realm-radius-full);
	font-size: var(--realm-text-sm);
	font-weight: 600;
}

/* Kvantitetsväljarens radie + ihop/avstånd hanteras nu av parent-temat
   (Branding → Element → "Kvantitetsväljare" + "Kvantitet + köpknapp"). Garden
   sätter Skarp + Ihop i inställningarna — ingen egen quantity-CSS behövs. */

/* Variationsval: varm yta.
 *
 * Radien var hårdkodad till 12px och följde därmed inte Element-inställningen —
 * variantväljaren stod med egen form bredvid kassans och produktsidans övriga
 * fält. Den är ett formulärfält och ska följa samma token som dem. */
.single-product .variations select,
.single-product .variations_form select {
	border-radius: var(--realm-radius-input);
	background-color: var(--realm-bg-surface, #fff);
	color: var(--realm-text);
	border: 1px solid var(--realm-border);
	padding: 0.6em 2.2em 0.6em 0.9em;
}

/* Köpknapp: mjuk skugga.
 *
 * Textstorleken sattes tidigare till --realm-text-md här. Knappens padding är
 * em-baserad, så den större texten skalade upp hela knappen — köpknappen blev
 * märkbart högre än sajtens övriga knappar. Storleken styrs nu av Realm →
 * Styling → Element (Knappstorlek), som alla andra knappar. */
.single-product form.cart .single_add_to_cart_button {
	box-shadow: var(--realm-shadow-sm);
}

.single-product .single_add_to_cart_button:hover {
	translate: 0 -1px;
	box-shadow: var(--realm-shadow-md);
}

/* Produktinfo-flikar/accordion: varm, lugn avgränsning */
.single-product .realm-profile-accordion__header {
	font-family: var(--realm-font-heading);
	font-weight: 500;
}

.single-product .realm-profile-accordion {
	border-bottom: 1px solid var(--realm-border-light);
}

/* Ingen marginal här.
 *
 * Sammanfattningskolumnen är en flex-kolumn där Realms gap är ENDA källan till
 * lodrätt avstånd — just för att avstånden ska förbli jämna när villkorade
 * element (varumärke, artikelnummer, lagerstatus, varianter) tillkommer eller
 * uteblir. En marginal här lägger sig ovanpå gapet: titeln fick 36px under sig
 * medan alla andra syskon fick 24.
 *
 * Vill Gården ha mer luft i kolumnen ska gapet ändras, inte ett enskilt barn. */

/* Mobil: köpknapp full bredd */
@media screen and (max-width: 768px) {
	.single-product .single_add_to_cart_button {
		width: 100%;
	}
}

/* =============================================================================
 * 8. KASSA (checkout) — varm finish
 *
 * Ärver redan creme .box (20px), pill-fält, rubriktypsnittet och grön pill-
 * "Lägg beställning". Här: runda de gröna aktiva frakt-/betalraderna, grön
 * fokus-ring på fält, luft mellan boxar. Text-kontrast på aktiv rad ärvs från
 * Realm 11.71.0.
 * ========================================================================== */

/* Aktiv frakt-/betalmetod: runda de gröna raderna (var kantiga radie 0) */
.woocommerce-checkout ul#shipping_method li,
.woocommerce-checkout .woocommerce-shipping-methods li,
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
	border-radius: var(--realm-radius-card);
	overflow: hidden;
}

/* Ljus text på den gröna aktiva raden.
 *
 * Regeln gällde tidigare :has(input:checked) — alltså den valda raden oavsett
 * om den faktiskt blivit grön. Realms gröna bakgrund nådde inte fram (en
 * hoisting-bugg i föräldern), så resultatet blev vit text på beige: en
 * betalningsmetod man inte kunde läsa.
 *
 * Villkoret är nu .is-active, samma klass som styr bakgrunden. Färg och botten
 * kan därmed inte glida isär: blir raden inte grön blir texten inte ljus. */
.woocommerce-checkout ul#shipping_method li.is-active,
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method.is-active {
	color: var(--realm-primary-contrast);
}

/* En enda betalmetod är inget val. Dölj hela avsnittet — rubriken "Välj
 * betalningsmetod" och listan med den enda raden.
 *
 * Villkorsrutan och "Lägg beställning" ligger i samma #payment, i
 * .place-order. Därför får behållaren inte döljas, bara de två syskon som
 * utgör själva valet.
 *
 * :has() behövs eftersom antalet finns på <li> medan det som ska döljas ligger
 * en nivå upp, och CSS inte kan välja uppåt. Kombinationen gör regeln
 * självbegränsande: kommer en andra gateway till faller :only-child, då faller
 * :has(), och valet dyker upp igen av sig självt.
 *
 * Radioknappen ligger kvar i DOM:en och förblir ikryssad, så payment_method
 * skickas med i posten precis som förut.
 *
 * Varningen "inga betalsätt tillgängliga" har inte klassen wc_payment_method
 * och överlever därför regeln — den ska synas. */
#payment:has( > ul.wc_payment_methods > li.wc_payment_method:only-child ) > .woocommerce-checkout-payment-heading,
#payment:has( > ul.wc_payment_methods > li.wc_payment_method:only-child ) > ul.wc_payment_methods {
	display: none;
}

/* Leveransfönster — varor som inte hinner till vald dag.
 *
 * Utgråning ska läsas som "inte nu", inte som "trasig". Raden tonas men
 * behåller sin form, och datumet skrivs ut under namnet så kunden ser VARFÖR
 * den är grå utan att behöva leta.
 *
 * Ingen display:none någonstans: varan ligger kvar i beställningen tills
 * kunden själv väljer att lägga undan den. */
.woocommerce-checkout tr.garden-forsenad {
	opacity: 0.55;
}

.woocommerce-checkout tr.garden-forsenad .product-name {
	text-decoration: line-through;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.garden-forsenad__datum {
	display: block;
	margin-top: var(--realm-space-1);
	color: var(--realm-text);
	font-size: var(--realm-text-sm);
	text-decoration: none;
	opacity: 0.85;
}

/* Notisen under kalendern. Tom behållare tar ingen plats — den renderas alltid
 * så att omritningen har något att ersätta, men syns bara med innehåll. */
.garden-forsenade:empty {
	display: none;
}

.garden-forsenade {
	margin-top: var(--realm-space-4);
	padding: var(--realm-space-4);
	border-radius: var(--realm-radius-card);
	background: color-mix(in srgb, var(--realm-secondary) 12%, var(--realm-bg-card));
}

.garden-forsenade__text {
	margin: 0 0 var(--realm-space-3);
	font-weight: var(--realm-weight-medium);
}

/* Kvitto på det som lagts undan.
 *
 * Lugnare än varningen ovanför — det här är ett läge, inte ett problem. Egen
 * ram i stället för fylld yta, så de två rutorna inte konkurrerar när båda
 * syns samtidigt (kunden kan byta till en tidigare dag efter att ha lagt undan
 * något, och då gäller båda). */
.garden-undanlagt {
	margin-bottom: var(--realm-space-3);
	padding: var(--realm-space-3) var(--realm-space-4);
	border: 1px solid var(--realm-border);
	border-radius: var(--realm-radius-card);
}

.garden-undanlagt__rubrik {
	margin: 0;
	font-weight: var(--realm-weight-medium);
}

.garden-undanlagt__varor {
	margin: var(--realm-space-1) 0 0;
	font-size: var(--realm-text-sm);
}

.garden-undanlagt__nasta {
	margin: var(--realm-space-2) 0 0;
	font-size: var(--realm-text-sm);
	opacity: 0.85;
}

/* Ångra är en utväg, inte ett erbjudande. Länkform, inte knappform. */
.garden-undanlagt__angra {
	padding: 0;
	border: 0;
	background: none;
	color: var(--realm-primary);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.garden-undanlagt__angra.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Två vägar framåt, sida vid sida. Primärknappen först: att flytta hela
 * beställningen är det vanligaste valet, och det som inte kostar extra frakt. */
.garden-forsenade__val {
	display: flex;
	flex-wrap: wrap;
	gap: var(--realm-space-2);
}

.garden-forsenade__knapp.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.garden-forsenade__hjalp {
	margin: var(--realm-space-3) 0 0;
	font-size: var(--realm-text-sm);
	opacity: 0.8;
}

/* Panelen på tacksidan. Får inte konkurrera med kvittot — den ligger under,
 * i lugnare färg, och är ett erbjudande snarare än ett krav. */
.garden-fortsatt {
	margin-bottom: var(--realm-space-6);
	padding: var(--realm-space-5);
	border-radius: var(--realm-radius-card);
	background: var(--realm-bg-card);
	border: 1px solid var(--realm-border);
}

.garden-fortsatt__rubrik {
	margin: 0 0 var(--realm-space-2);
	font-size: var(--realm-text-lg);
}

.garden-fortsatt__text {
	margin: 0 0 var(--realm-space-4);
}

/* Grön fokus-ring på kassans fält */
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
	border-color: var(--realm-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--realm-primary) 18%, transparent);
	outline: none;
}

/* Luft mellan orderöversiktens boxar */
.woocommerce-checkout .box {
	margin-bottom: var(--realm-space-4);
}

/* Kupong-toggle.
 *
 * Regeln satte grön text, skriven för en "lugn länk". Men Realm renderar
 * .showcoupon som en sekundärknapp med orange botten — grön text på orange
 * knapp, vilket varken var läsbart eller snyggt.
 *
 * Knappen bär nu sin egen kontrastfärg, som följer paletten oavsett hur mörk
 * sekundärfärgen är. Bara toggle-länken utanför knappen får varumärkesfärgen. */
.woocommerce-checkout .woocommerce-form-coupon-toggle a:not(.showcoupon) {
	color: var(--realm-primary);
}

.woocommerce-checkout .showcoupon {
	color: var(--realm-secondary-contrast);
}

.woocommerce-checkout .showcoupon:hover,
.woocommerce-checkout .showcoupon:focus-visible {
	background-color: var(--realm-secondary-hover);
	color: var(--realm-secondary-contrast);
}

/* Leveranskalender — Gårdens runda finish.
 *
 * Realm äger mekaniken (schema, valbara dagar, validering) och ger kalendern
 * kortets radie ur Element-inställningen. Här ligger bara varumärkets form:
 * dagarna blir cirklar i stället för rutor, i samma pill-språk som resten av
 * sajten. Inga färger sätts — de kommer ur paletten via Realms tokens. */
.realm-delivery__day,
.realm-delivery__nav {
	border-radius: 999px;
}

/* Sammanfattningsraden bär rubriktypsnittet, som övriga nyckeltal i kassan. */
.realm-delivery__summary {
	font-family: var(--realm-font-heading);
	font-size: var(--realm-text-lg);
}

/* =============================================================================
 * 9. VARUKORG (cart) — varm finish
 *
 * Layout: form.woocommerce-cart-form med .cart-item.realm-grid-rader (vänster) +
 * sticky .box-totals (höger, ärver redan creme 20px). Här: gör raderna till
 * varma kort, rundad bild + kvantitet, produktnamn i rubriktypsnittet.
 * ========================================================================== */

/* Cart-rader som varma kort (var platta/transparenta) */
.woocommerce-cart-form .cart-item.product {
	background: var(--realm-bg-surface, #fff);
	border: 1px solid var(--realm-border-light);
	border-radius: var(--realm-radius-card);
	box-shadow: var(--realm-shadow-xs);
	padding: var(--realm-space-4);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.woocommerce-cart-form .cart-item.product:hover {
	box-shadow: var(--realm-shadow-sm);
	border-color: color-mix(in srgb, var(--realm-primary) 20%, var(--realm-border-light));
}

/* Produktbild rundad (var fyrkantig) */
.woocommerce-cart-form .cart-item.product img {
	border-radius: var(--realm-radius-image);
}

/* Produktnamn i rubriktypsnittet (matchar produktkort/produktsida) */
.cart-item__name,
.cart-item__name a {
	font-family: var(--realm-font-heading);
	font-weight: 500;
}

/* Kvantitetsstegrare rundad (var kantig radie 0) */
.cart-item__qty .realm-product__quantity,
.cart-item__qty .quantity {
	border-radius: var(--realm-radius-full);
	overflow: hidden;
	border: 1px solid var(--realm-border-light);
}

/* Ta bort-knappen: mjuk grön hover */
.cart-item .remove:hover {
	background: color-mix(in srgb, var(--realm-primary) 18%, var(--realm-border-light));
	color: var(--realm-primary-dark);
}

/* =============================================================================
 * 10. MINI-VARUKORG (.realm-minicart-panel) — varm finish
 *
 * Utfällbar panel (glider in från höger). Ärver redan creme panel,
 * titel, grön pill-checkout, pill-stäng. Här: varm panel-skugga, rundade
 * rubriktypsnitt och pill-stäng. Här: varubilder, mjuk radavgränsning.
 * ========================================================================== */

/* Varm, mjuk skugga på panelens vänsterkant */
.realm-minicart-panel {
	box-shadow: -14px 0 44px color-mix(in srgb, #2c1f14 16%, transparent);
}

/* Varubilder rundade (var fyrkantiga) */
.realm-minicart-panel .woocommerce-mini-cart-item img,
.realm-nav__mini-cart__row img {
	border-radius: var(--realm-radius-image);
}

/* Produktnamn i rubriktypsnittet (matchar övriga sidor) */
.realm-nav__mini-cart__name,
.realm-nav__mini-cart__name a {
	font-family: var(--realm-font-heading);
	font-weight: 500;
}

/* Mjuk radavgränsning mellan varor */
.realm-minicart-panel .woocommerce-mini-cart-item,
.realm-nav__mini-cart__row {
	border-bottom: 1px solid var(--realm-border-light);
	padding-block: var(--realm-space-3);
}

.realm-minicart-panel .woocommerce-mini-cart-item:last-child,
.realm-nav__mini-cart__row:last-child {
	border-bottom: 0;
}

/* =============================================================================
 * 11. MINA SIDOR (My Account) — varm finish
 *
 * Layout: .realm-myaccount__wrapper (grid: nav | content). Båda är platta →
 * gör dem till creme-kort; nav-länkar som rader med grön aktiv-pill; content i
 * box med rubriktypsnittet.
 * ========================================================================== */

.realm-myaccount__wrapper {
	gap: var(--realm-space-5);
	align-items: start;
}

/* Navigation som mjukt creme-kort */
.woocommerce-MyAccount-navigation {
	background: var(--realm-bg-surface, #fff);
	border: 1px solid var(--realm-border-light);
	border-radius: var(--realm-radius-card);
	box-shadow: var(--realm-shadow-xs);
	padding: var(--realm-space-3);
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Länken är flex, inte block.
 *
 * Ikonen är ett ::before. Med display: block blir den ett inline-element på
 * textens baslinje och sitter optiskt för högt. Realm sätter flex +
 * align-items: center av just det skälet; block här slog ut det. */
.woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	padding: var(--realm-space-2) var(--realm-space-3);
	border-radius: var(--realm-radius-full);
	color: var(--realm-text);
	font-weight: 500;
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* Vänsterkanten är Realms aktivmarkering. Gården använder en pill i stället,
 * och nollställdes kanten bara på aktiv rad blev de ÖVRIGA raderna 4px
 * smalare — ikonerna hoppade i sidled mellan rader. Bort med den överallt. */
.woocommerce-MyAccount-navigation li {
	border-left: 0;
}

/* Första och sista linjen dubblerar kortets egen kant. */
.woocommerce-MyAccount-navigation ul {
	border-top: 0;
}

.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

/* Aktiv post: grön pill med läsbar text.
 *
 * Realm markerar aktiv post på LI:et — dämpat band plus 4px vänsterkant.
 * Gården använder i stället en pill på länken. Utan nollställningen nedan
 * ritas båda: pillen inuti ett ljusare grönt fält med mörk kantlist. Det är
 * inte två varianter av samma markering, det är två markeringar.
 *
 * Samma sak gäller hover, som Realm markerar på LI:et med identisk stil. */
.woocommerce-MyAccount-navigation li.is-active,
.woocommerce-MyAccount-navigation li[class*="--active"],
.woocommerce-MyAccount-navigation li:hover {
	background: none;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li[class*="--active"] a {
	background: var(--realm-primary);
	color: var(--realm-primary-contrast);
}

/* Innehåll som creme-kort */
.woocommerce-MyAccount-content {
	background: var(--realm-bg-surface, #fff);
	border: 1px solid var(--realm-border-light);
	border-radius: var(--realm-radius-card);
	box-shadow: var(--realm-shadow-xs);
	padding: var(--realm-space-6);
}

.woocommerce-MyAccount-content h1,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-family: var(--realm-font-heading);
}

/* Orderhistorik-tabell: varm, luftig */
.woocommerce-MyAccount-content .woocommerce-orders-table th,
.woocommerce-MyAccount-content table.shop_table th {
	font-family: var(--realm-font-heading);
	font-weight: 500;
}

/* Mobil: nav ovanför innehåll (en kolumn) */
@media screen and (max-width: 768px) {
	.woocommerce-MyAccount-content {
		padding: var(--realm-space-4);
	}
}

/* =============================================================================
 * 12. PROFIL-PANEL (.realm-profile-panel) — varm finish
 *
 * Kontots slide-out (motsvarar mini-varukorgen). Ärver rubriktypsnittet + pill-
 * stäng. Här: creme yta + varm skugga (konsekvent med mini-cart),
 * accordion-rubriker (gäller även produktsidans flikar).
 * ========================================================================== */

.realm-profile-panel {
	background: var(--realm-bg-page);
	box-shadow: -14px 0 44px color-mix(in srgb, #2c1f14 16%, transparent);
}

/* Accordion-rubriker i rubriktypsnittet (profil-panel + produktsidans flikar) */
.realm-profile-accordion__header {
	font-family: var(--realm-font-heading);
	font-weight: 500;
}

/* Mjukt rundade accordion-rubriker i panelen */
.realm-profile-panel .realm-profile-accordion__header {
	border-radius: var(--realm-radius);
}

/* =============================================================================
 * 13. EDITORIELLT LAYOUTSYSTEM (Gårdens egna designspråk)
 *
 * Inspiration: ewerman.se — immersiva heroes, växlande fullbredds-färgband,
 * 2-panel bild|text, stor typografi, mycket luft. Personlighet: varm/organisk
 * (varm palett + presetets rubriktypsnitt), INTE hård versal geometrisk sans.
 *
 * Byggblock (native block med className):
 *   .garden-hero / .garden-hero--page / --image  — immersiv hero, sidhuvud, foto
 *   .garden-band --creme                          — fullbredds-band
 *   .garden-eyebrow / .garden-lead                — etikett / ingress
 *
 * Listan räknade tidigare upp .garden-split, .garden-media, .garden-cards,
 * .garden-card och banden --section/--green/--dark. Ingen av dem fanns kvar i
 * CSS:en eller i någon mall — färgbanden ersattes av Realms sektionsstilar (se
 * 13b), tvåpanelen av patterns/sektion-tvapanel.php. Kommentaren beskrev ett
 * system som inte längre existerade.
 * ========================================================================== */

/* --- Fullbredds-band med färgscheman --- */
.garden-band {
	padding: clamp(3.5rem, 7vw, 6.5rem) var(--realm-space-5);
}

.garden-band > .wp-block-group__inner-container,
.garden-band > :not(.wp-block-columns) {
	max-width: 74rem;
	margin-inline: auto;
}

.garden-band--creme { background: var(--realm-bg-page); }
/* --- Typografi: etikett, stor rubrik, ingress --- */
.garden-eyebrow {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-family: var(--realm-font-primary);
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--realm-secondary);
	margin-bottom: 0.9rem;
}

.garden-band h2 {
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	line-height: 1.04;
	letter-spacing: -0.02em;
	font-weight: 500;
	margin: 0 0 1.1rem;
}

.garden-lead {
	font-size: clamp(1.12rem, 1.9vw, 1.45rem);
	line-height: 1.55;
	max-width: 46rem;
}

/* --- Hero-variant för undersidor (kortare) --- */
.garden-hero--page {
	min-height: 52vh;
	min-height: 52svh;
}

/* Eyebrow i heron: liten kicker (annars ärver den hero-paragrafens storlek) */
.garden-hero .garden-eyebrow {
	font-size: 0.85rem;
	letter-spacing: 0.16em;
	font-weight: 700;
	color: color-mix(in srgb, #ffffff 68%, var(--realm-secondary));
	margin-bottom: 1rem;
}

/* Foto-hero (t.ex. bloggens featured image): bild + mörk scrim för läsbar text */
.garden-hero--image {
	position: relative;
	background-size: cover;
	background-position: center;
}

.garden-hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, color-mix(in srgb, #12180a 40%, transparent), color-mix(in srgb, #12180a 62%, transparent));
	z-index: 0;
}

.garden-hero--image > * {
	position: relative;
	z-index: 1;
}

/* FAQ (realm/faq) i editoriella band: titlar i rubriktypsnittet, centrerad bredd */
.garden-band .realm-faq-list {
	max-width: 52rem;
	margin-inline: auto;
}

.garden-band .realm-faq-list .accordion__title,
.garden-band .realm-faq-list h6 {
	font-family: var(--realm-font-heading);
	font-weight: 500;
}

/* =============================================================================
 * 13b. EDITORIELLA BAND — ERSATT AV REALMS SEKTIONSSTILAR
 * -----------------------------------------------------------------------------
 * Här låg ett eget bandsystem (.garden-rband / .garden-rpanel) som gjorde exakt
 * det Realms sektionsstilar redan gör: fullbreddsband med bakgrund, kontrasttext
 * och färgpaneler. Två system för samma sak betyder att den ena alltid glider
 * ifrån den andra — och Gårdens variant hårdkodade dessutom sex hex-färger, så
 * den följde inte Branding-paletten.
 *
 * Banden byggs numera med Realms sektionsstilar, valbara i editorns Stilar-panel:
 *
 *   is-style-section-brand     grön   (--realm-primary)
 *   is-style-section-ink       lila   (--realm-tertiary)
 *   is-style-section-soft      mjuk ton av primärfärgen
 *   is-style-section-surface   ljus yta
 *
 * Behandlingen (luft, versal statement-skala, invers CTA) ligger i avsnitt 16.
 * ========================================================================== */

/* =============================================================================
 * 14. SHOP-/ARKIV-SIDAN (kategori, receptarkiv, filter, sök)
 *
 * Kategori- och receptarkiv har redan titel-headers → styla dem editoriellt
 * (stor rubrikgrad, luft, dämpad underrubrik). Filter/sök får rubriktypsnittet
 * och grön accent (inhemsk brandning gör resten).
 * ========================================================================== */

/* --- Receptarkiv-hero: centrerad editoriell header --- */
.realm-recipe__archive-hero {
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
	text-align: center;
}

.realm-recipe__archive-hero .title,
.realm-recipe__archive-hero h1 {
	font-family: var(--realm-font-heading);
	font-size: clamp(2.2rem, 4.6vw, 3.4rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0 0 var(--realm-space-3);
}

.realm-recipe__archive-hero .subtitle {
	font-size: clamp(1.05rem, 1.8vw, 1.3rem);
	line-height: 1.5;
	color: var(--realm-text-muted);
	max-width: 42rem;
	margin-inline: auto;
}

/* --- Kategori-arkiv-banner ---
 *
 * Här låg en egen 50/50-layout OCH en workaround som dolde bildkolumnen när
 * den innehöll Realms hårdkodade demobild — därav den centrerade, bildlösa
 * bannern på Gården.
 *
 * Realm gör numera hela jobbet: kategorins EGEN bild (WooCommerce-tumnageln,
 * som aldrig lästes förut), 50/50 när bilden finns, full bredd när den saknas,
 * och bilden först i mobilen. Ingen demobild att gömma undan längre.
 *
 * Gardens ordning var dessutom motsatt: bild till vänster, titel till höger.
 * Realm lägger texten till vänster, vilket är det som efterfrågades. */

.realm-category__banner .title {
	font-family: var(--realm-font-heading);
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.realm-category__banner-desc {
	color: var(--realm-text-muted);
	line-height: 1.6;
}

@media screen and (max-width: 768px) {
	/* flex-direction: column-reverse låg här och satte bilden först — Gårdens
	 * lösning från tiden innan Realm hade en ordning för bandet.
	 *
	 * Realm styr numera ordningen med `order`, och vänder den vid samma
	 * brytpunkt som kolumnerna delar sig. Reverse OCH order tar ut varandra:
	 * i en omvänd kolumn hamnar order: 1 SIST, så bilden gick tillbaka under
	 * texten på mobil — precis det den här regeln en gång skrevs för att lösa. */
	.realm-category__banner-row {
		align-items: stretch;
	}
	.realm-category__banner-image {
		flex-basis: auto;
		width: 100%;
		max-width: 100%;
	}
	.realm-category__banner-content {
		text-align: center;
	}
}

/* --- Produktfilter + fullscreen-sök: rubriktypsnittet + grön accent --- */
.realm-fullscreen-search__filters .filter-group h3,
.realm-fullscreen-search__filters .filter-group__title,
.realm-fullscreen-search__filter-groups h3,
.realm-fullscreen-search__title,
.realm-fullscreen-search h2,
.realm-fullscreen-search h3 {
	font-family: var(--realm-font-heading);
	font-weight: 500;
}

.realm-fullscreen-search__filters input[type="checkbox"],
.realm-fullscreen-search__filters input[type="radio"],
.realm-fullscreen-search input[type="checkbox"] {
	accent-color: var(--realm-primary);
}

/* Fullscreen-sökfältet: rundat och luftigt (pill-känsla) */
.realm-fullscreen-search__input,
.realm-fullscreen-search input[type="search"],
.realm-fullscreen-search input[type="text"] {
	border-radius: var(--realm-radius-full);
}

/* Aktiva filter-taggar som pills */
.realm-active-filters__tag,
.realm-fullscreen-search__active-filter {
	border-radius: var(--realm-radius-full);
}

/* =============================================================================
 * 15. INTERAKTIVA SHOP-MÖNSTER (filter-pills, sticky köp)
 * ========================================================================== */

/* Här låg en pill-chip-stil på .filter-checkbox-container, skriven som om
 * klassen satt på VARJE kryssruta. Den sitter på hela gruppens behållare — så
 * pill-radien (--realm-radius-full) applicerades på en hög, smal låda och
 * gjorde kategorilistan till en ellips, med en rundad kant tvärs igenom
 * etiketterna. Raderna är .realm-checkbox inuti behållaren, och deras
 * hovermarkering äger Realm numera (samma som kontomenyns rader). */

/* --- Sticky köp: produktbild följer med på desktop, köpknapp i mobil --- */
@media screen and (min-width: 1024px) {
	.single-product .grid:has(.woocommerce-product-gallery) {
		align-items: flex-start;
	}
	.single-product .grid:has(.woocommerce-product-gallery) > .cell:has(.woocommerce-product-gallery) {
		position: sticky;
		top: var(--realm-space-6);
		align-self: flex-start;
	}
}

/* Produktsida: varumärket i meta-raden som klickbar eyebrow (title.php gör länken) */
.single-product .realm-product__brand .brand,
.single-product .realm-product__brand .brand a {
	letter-spacing: 0.12em;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--realm-secondary);
	text-decoration: none;
	transition: color 0.18s ease;
}

.single-product .realm-product__brand .brand a:hover {
	color: var(--realm-primary);
}

/* =============================================================================
 * 16. EWERMANS DESIGNSPRÅK (sektionsstilarnas behandling)
 * -----------------------------------------------------------------------------
 * Uppmätt på ewerman.se (11 sidor). Hela sajten byggs av tre primitiver som
 * återanvänds: ett fullbredds färgband, en tvåpanel bild|text, och ett
 * innehållsbälte. Varje instans bär ett färgschema.
 *
 * Realm har redan motsvarigheterna — sektionsstilarna i styles/blocks/ mappar
 * ett-till-ett mot ewermans color-scheme-1/2/4/5. Det som saknas är
 * BEHANDLINGEN: statement-skalan, luften och knappgeometrin.
 *
 * Uppmätta värden som styr det nedan:
 *   Rubriker  geometrisk sans 700, VERSAL, 120/70/46/36/28px, leading ~1.08
 *   Brödtext  serif 400, 22px/26px
 *   Knapp     radie 20px, padding 21/32, versal 16px 700, 1px kant i egen färg
 *   Schema 1  grön botten, vit text, VIT knapp med färgad text
 *   Schema 5  vit botten, mörk text, FÄRGAD knapp med vit text
 *
 * Gårdens palett (grön/orange/lila) kommer från Branding — ewermans magenta
 * kopieras inte. Det är strukturen och typografin vi tar, inte färgerna.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 16.1 Statement-rubriker
 *
 * Versalt sätts numera av typsnittsuppsättningen (heading-transform), så
 * kaskaden är redan på plats. Kvar: skalan och spärren.
 *
 * Realms is-style-display sätter letter-spacing -0.03em, vilket är rätt för
 * gemena display-rubriker men klämmer ihop versaler. Versalt behöver positiv
 * spärr för att andas.
 * -------------------------------------------------------------------------- */

.is-style-display,
.realm-hero__title,
.realm-slider__title {
	font-size: clamp(2.5rem, 6vw + 0.5rem, 7.5rem);
	line-height: 1.02;
	letter-spacing: 0.005em;
	text-wrap: balance;
}

/* Ewermans hierarki under statement-nivån: 46 / 36 / 28px.
 *
 * Gäller SEKTIONENS egna rubriker, inte komponenternas. Produktkort,
 * kategoribrickor och liknande har egna storlekstokens i Realm
 * (--realm-product-title-size m.fl.), och en bred elementselektor här slår dem:
 * child-CSS är olagrad och vinner över @layer realm oavsett specificitet.
 * Utan undantaget blev produkttitlarna i Gutenberg-blocken 36px.
 *
 * Undantaget är [class*="__"] — en BEM-elementklass betyder att rubriken
 * tillhör en komponent som äger sin egen typografi. Sektionsrubrikerna heter
 * .wp-block-heading eller bär bara utility-klasser och påverkas inte. */
.realm-section h2:not([class*="__"]):not(.product *),
.wp-block-realm-layout h2:not([class*="__"]):not(.product *) {
	font-size: clamp(1.75rem, 2.2vw + 1rem, 2.875rem);
}

.realm-section h3:not([class*="__"]):not(.product *),
.wp-block-realm-layout h3:not([class*="__"]):not(.product *) {
	font-size: clamp(1.375rem, 1.4vw + 0.9rem, 2.25rem);
}

/* Ögonbrynet fanns redan i Realm och behöver bara skiljas från rubriken nu när
 * ÄVEN rubriken är versal — annars läses de som samma nivå. */
.is-style-eyebrow {
	font-family: var(--realm-font-primary);
	font-weight: 600;
	opacity: 0.72;
}

/* -----------------------------------------------------------------------------
 * 16.2 Brödtext
 *
 * Serif i löptext är hela poängen med ewermans modell: sans skriker rubriken,
 * serifen talar. Lora har större x-höjd än freight-display, så 22px blir för
 * mycket — 1.175rem ger samma optiska storlek.
 * -------------------------------------------------------------------------- */

/* Samma undantag som för rubrikerna: stycken som bär en blockstil
 * (.is-style-eyebrow) eller en komponentklass äger sin egen typografi. Utan
 * undantaget blåstes ögonbrynet upp från xs till 18.8px — det ska vara en
 * liten versal etikett OVANFÖR rubriken, inte lika stor som brödtexten. */
.realm-section p:not([class*="is-style-"]):not([class*="__"]):not(.product *),
.wp-block-realm-layout p:not([class*="is-style-"]):not([class*="__"]):not(.product *),
.entry-content p:not([class*="is-style-"]):not([class*="__"]) {
	font-size: clamp(1rem, 0.35vw + 0.95rem, 1.175rem);
	max-width: 62ch;
}

/* Centrerad sektion → centrera även textblockets egen maxbredd. */
.has-text-align-center p,
.realm-section--centered p {
	margin-inline: auto;
}

/* -----------------------------------------------------------------------------
 * 16.3 Sektionsband
 *
 * Ewerman ger varje band 1080px (hero) respektive 408–728px höjd och låter
 * färgen gå kant i kant. Realms sektionsstilar sätter redan space-11; det som
 * fattas är att banden ska ANDAS mot varandra och aldrig få sidmarginal.
 * -------------------------------------------------------------------------- */

.realm-section[class*="is-style-section-"],
.wp-block-realm-layout[class*="is-style-section-"] {
	/* Layout-blocket sätter .container (max-width). Bandets FÄRG ska nå kanten,
	 * men innehållet ska fortsätta vara centrerat — därav max-width: none här
	 * och en egen maxbredd på rutnätet längst ned. */
	max-width: none;
	padding-block: clamp(var(--realm-space-8), 7vw, var(--realm-space-12));
	/* Färgen ska nå kanten även när sektionen ligger i en container. */
	margin-inline: 0;
}

/* Två färgband efter varandra ska inte dubbla luften — de läses som ett block
 * när färgen är densamma, och som ett byte när den skiftar. */
:is(.realm-section, .wp-block-realm-layout)[class*="is-style-section-"]
+ :is(.realm-section, .wp-block-realm-layout)[class*="is-style-section-"] {
	margin-block-start: 0;
}

/* Rubriken i ett färgat band ärver bandets textfärg. Kontrasttokenen i Realm
 * ger läsbar text automatiskt oavsett hur mörk varumärkesfärgen är. */
:is(.realm-section, .wp-block-realm-layout)[class*="is-style-section-"] :is(h1, h2, h3, h4) {
	color: currentColor;
}

/* -----------------------------------------------------------------------------
 * 16.4 Knappar
 *
 * Knappformen ligger INTE här längre. Den var en egen CTA-behandling scopad
 * till sektioner, layout, hero och slider — vilket gav Gården två olika
 * knappar: ewermans geometri i banden, och Realms basknapp på produktsidan, i
 * varukorgen och i kassan. Radien hårdkodades dessutom till 20px och gick
 * därmed förbi Element-inställningen, som stod på helrund.
 *
 * Formen styrs nu av Realm → Styling → Element (Knappar): typsnitt, vikt,
 * versaler, teckenavstånd, storlek och hörnradie. Realms alla knapp-selektorer
 * konsumerar samma tokens, så en ändring gäller hela sajten på en gång.
 *
 * Kvar för Gården: bara det Realm inte har åsikter om — hovertillståndet.
 * -------------------------------------------------------------------------- */

/* FÄRGEN på knappen i ett färgat band sätts redan av Realms sektionsstil, med
 * kontrast-tokens (--realm-primary-contrast) som anpassar sig efter hur mörk
 * varumärkesfärgen är. Den logiken dupliceras INTE här — en hårdkodad vit
 * knapp hade sett rätt ut på grönt och fel ut på en ljus palett.
 *
 * Kvar för Gården: bara det Realm inte har åsikter om — hovertillståndet och
 * det mjuka lyftet.
 */

:is(.realm-section, .wp-block-realm-layout)[class*="is-style-section-"] :is(.wp-block-button__link, .realm-button):hover {
	translate: 0 -2px;
}

/* -----------------------------------------------------------------------------
 * 16.5 Tvåpanel bild | text
 *
 * Ewermans dmc-panes: två lika halvor kant i kant, ingen glugg emellan, och
 * textpanelen bär färgschemat. Bilden får aldrig egen marginal — det är
 * mötet mellan bild och färgfält som gör layouten.
 * -------------------------------------------------------------------------- */


/* Realms tvåpanel heter realm-side-by-side. Ewermans variant har INGEN glugg
 * och låter bilden möta färgfältet direkt — det mötet ÄR layouten. Realms
 * default har gap och rundade bilder, vilket ger en helt annan, luftigare
 * känsla. Här tas gluggen bort och panelerna sträcks till samma höjd. */

.realm-side-by-side__grid {
	gap: 0;
	align-items: stretch;
}

.realm-side-by-side__item {
	display: grid;
	gap: 0;
	align-items: stretch;
	overflow: hidden;
	border-radius: var(--realm-radius-card, 0);
}

@media screen and (min-width: 769px) {
	.realm-side-by-side__item {
		grid-template-columns: 1fr 1fr;
	}

	/* Varannan panel speglas, som ewermans växlande band. */
	.realm-side-by-side__item:nth-child(even) .realm-side-by-side__figure {
		order: 2;
	}
}

.realm-side-by-side__figure {
	margin: 0;
	height: 100%;
}

.realm-side-by-side__figure img {
	width: 100%;
	height: 100%;
	min-height: 20rem;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.realm-side-by-side__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--realm-space-4);
	padding: clamp(var(--realm-space-5), 4vw, var(--realm-space-9));
	background-color: var(--realm-primary);
	color: var(--realm-primary-contrast);
}

/* Växlande färgband: grön → orange → lila, som ewermans color-scheme-rotation.
 * Kontrasttokenen ger läsbar text automatiskt oavsett hur mörk färgen är. */
.realm-side-by-side__item:nth-child(3n + 2) .realm-side-by-side__content {
	background-color: var(--realm-secondary);
	color: var(--realm-secondary-contrast);
}

.realm-side-by-side__item:nth-child(3n) .realm-side-by-side__content {
	background-color: var(--realm-tertiary);
	color: var(--realm-tertiary-contrast);
}

.realm-side-by-side__title {
	color: currentColor;
	margin: 0;
}

.realm-side-by-side__desc {
	color: currentColor;
	opacity: 0.92;
	max-width: 48ch;
}

/* CTA:n i panelen blir vit — samma blickfångslogik som i färgbanden ovan. */
/* Invers CTA i panelen. Färgerna följer panelens egen ton via kontrast-tokens,
 * inte en fast vit — byter kunden palett följer knappen med, och texten
 * förblir läsbar även på en ljus varumärkesfärg. */

.realm-side-by-side__content .realm-button {
	align-self: flex-start;
	background-color: var(--realm-primary-contrast);
	border-color: var(--realm-primary-contrast);
	color: var(--realm-primary);
}

.realm-side-by-side__item:nth-child(3n + 2) .realm-side-by-side__content .realm-button {
	background-color: var(--realm-secondary-contrast);
	border-color: var(--realm-secondary-contrast);
	color: var(--realm-secondary);
}

.realm-side-by-side__item:nth-child(3n) .realm-side-by-side__content .realm-button {
	background-color: var(--realm-tertiary-contrast);
	border-color: var(--realm-tertiary-contrast);
	color: var(--realm-tertiary);
}

.realm-side-by-side__content .realm-button:hover {
	background-color: transparent;
	color: currentColor;
}

/* -----------------------------------------------------------------------------
 * 16.6 Kategoribrickor och produktrutnät
 *
 * Ewerman har inga produkter, men samma logik gäller: brickan är en yta med
 * ett versalt statement på, inte ett kort med en etikett under.
 * -------------------------------------------------------------------------- */

.realm-popular-categories_grid-item {
	position: relative;
	overflow: hidden;
}

.realm-popular-categories_grid-item :is(h2, h3, h4, .title) {
	font-family: var(--realm-font-heading);
	letter-spacing: 0.02em;
}

/* -----------------------------------------------------------------------------
 * 16.7 Sektionsrubrikernas rytm
 *
 * Alla Realm-block öppnar med en rubrik i .realm-section. Ewerman ger den
 * rejält med luft nedåt och ingen uppåt — bandet äger luften, inte rubriken.
 * -------------------------------------------------------------------------- */

.realm-section > .container > :is(h2, h3):first-child,
.realm-section > :is(h2, h3):first-child {
	margin-block-start: 0;
	margin-block-end: var(--realm-space-5);
}

/* -----------------------------------------------------------------------------
 * 16.8 Tvåpanel
 *
 * Ewermans dmc-panes: två halvor kant i kant där mötet mellan färgfält och text
 * ÄR layouten. Bandets sektionsstil ger färgen, så panelen följer
 * Branding-paletten utan en enda hex här.
 *
 * Sätts in via mönstret "Sektion: Tvåpanel" — redaktören skriver inga klasser.
 * Halvorna stilsätts på POSITION (första kolumnen är färgfältet, andra texten),
 * så mönstret behöver bara EN klass på föräldern i stället för fyra spridda i
 * markupen.
 *
 * Varför inte en blockstil? Blocket använder redan sin stil-plats för
 * sektionsfärgen (is-style-section-*), och editorns stilväljare är enkelval.
 * En layoutform och en bandfärg får alltså inte plats som två blockstilar på
 * samma block.
 *
 * Färgfältet står tomt tills redaktionell fotografi finns; lägger man en bild
 * där lägger den sig ovanpå fältet.
 * -------------------------------------------------------------------------- */

.garden-panes > .fixed-grid > .grid {
	gap: 0;
	align-items: stretch;
}

/* Andra halvan: texten. */
.garden-panes
	> .fixed-grid > .grid > *:last-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--realm-space-4);
	padding: clamp(var(--realm-space-5), 4vw, var(--realm-space-9));
}

.garden-panes
	> .fixed-grid > .grid > *:last-child .wp-block-buttons {
	margin-block-start: var(--realm-space-2);
}

/* Första halvan: färgfältet, i en djupare ton av bandets egen färg — aldrig en
 * fast hex, så panelen följer med när kunden byter palett. */
.garden-panes
	> .fixed-grid > .grid > *:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(16rem, 34vw, 26rem);
	background-color: color-mix(in srgb, currentColor 14%, transparent);
}

/* Texten i färgfältet läses som en bildtext, inte som brödtext. */
.garden-panes
	> .fixed-grid > .grid > *:first-child p {
	margin: 0;
	font-family: var(--realm-font-heading);
	font-size: var(--realm-text-sm);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.55;
}

/* Speglad panel: färgfältet till höger. Grindad från dator (1024 px), där
 * halvorna står sida vid sida — mönstret har en kolumn på surfplatta. Grindad
 * från 769 px hamnade bilden under texten på staplad surfplatta. Staplad ska
 * färgfältet ligga först oavsett. */
@media screen and (min-width: 1024px) {
	.garden-panes--reverse > .fixed-grid > .grid > *:first-child {
		order: 2;
	}
}

/* Ett tvåpanelsband ska inte ha den vanliga bandluften — panelen bär sin egen. */
.garden-panes[class*="is-style-section-"] {
	padding-block: 0;
}

/* Realms section-ink sätter en accentfärgad knapp på det mörka bandet — ett
 * giltigt val, men ewerman kör invers hela vägen: knappen är alltid ljus mot
 * ett färgat band. Kontrast-tokenet ger rätt ljushet oavsett palett. */

.wp-block-realm-layout.is-style-section-ink :is(.wp-block-button__link, .realm-button),
.realm-section.is-style-section-ink :is(.wp-block-button__link, .realm-button) {
	background-color: var(--realm-tertiary-contrast);
	border-color: var(--realm-tertiary-contrast);
	color: var(--realm-tertiary);
}

.wp-block-realm-layout.is-style-section-ink :is(.wp-block-button__link, .realm-button):hover,
.realm-section.is-style-section-ink :is(.wp-block-button__link, .realm-button):hover {
	background-color: transparent;
	color: var(--realm-tertiary-contrast);
}

/* -----------------------------------------------------------------------------
 * 16.10 Kontaktrutnät
 *
 * Luften mellan korten sätts med kolumnblockets eget blockGap-attribut, satt av
 * mönstret "Kontaktrutnät", så redaktören kan ändra avståndet i editorn.
 *
 * Fyra kort i rad får plats först från 1280 px. Smalare blev de 170–230 px
 * breda, och öppettiderna bröts på varje ord. Där läggs de två och två.
 * Mobilen staplar dem redan (Realm).
 * -------------------------------------------------------------------------- */

@media screen and (min-width: 769px) and (max-width: 1279px) {
	.wp-block-columns.garden-contact-grid {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.garden-contact-grid > .wp-block-column {
		flex: 1 1 40% !important;
	}
}

/* I kundservicens innehållskolumn är rutnätet en tredjedel smalare än sidan,
 * så där står korten två och två på alla bredder från surfplatta. */
@media screen and (min-width: 769px) {
	.realm-customer-service .wp-block-columns.garden-contact-grid {
		flex-wrap: wrap !important;
	}

	.realm-customer-service .wp-block-columns.garden-contact-grid > .wp-block-column {
		flex: 1 1 40% !important;
	}
}


/* -----------------------------------------------------------------------------
 * 16.11 Produkttitlar
 *
 * Titeln är en länk överallt utom på produktsidan — i butiksloopen, varukorgen,
 * minivarukorgen och kassan. Den ärvde därför temats länkfärg och blev grön där
 * ögat väntar sig svart brödtext.
 *
 * Titeln ska läsas som en rubrik, inte som en länk. Vid hover får den
 * varumärkesfärgen, så det fortfarande syns att den går att klicka på.
 * -------------------------------------------------------------------------- */

.product-name a,
.realm-nav__mini-cart__name a,
.woocommerce-loop-product__title a,
.product-list-item__title a {
	color: var(--realm-text);
}

.product-name a:hover,
.product-name a:focus-visible,
.realm-nav__mini-cart__name a:hover,
.realm-nav__mini-cart__name a:focus-visible,
.woocommerce-loop-product__title a:hover,
.woocommerce-loop-product__title a:focus-visible,
.product-list-item__title a:hover,
.product-list-item__title a:focus-visible {
	color: var(--realm-primary);
}

/* -----------------------------------------------------------------------------
 * 16.12 Principer
 *
 * Sätts in via mönstret "Sektion: Principer". Vänsterkolumnen är en vanlig
 * rubrik med ingress; högerkolumnen staplar ikonkort med Realms stil
 * "Framhävd rubrik". Här vänds korten till rader: ikonen till vänster, rubrik
 * och text till höger, vänsterställt — en lista läses uppifrån och ned, inte
 * som tre centrerade rutor.
 * -------------------------------------------------------------------------- */

.garden-principles > .fixed-grid > .grid {
	align-items: center;
}

.garden-principles > .fixed-grid > .grid > *:first-child {
	display: flex;
	flex-direction: column;
	gap: var(--realm-space-4);
}

.garden-principles > .fixed-grid > .grid > *:first-child :is(p, h2) {
	margin: 0;
}

.garden-principles > .fixed-grid > .grid > *:last-child {
	display: flex;
	flex-direction: column;
	gap: var(--realm-space-4);
}

.garden-principles .realm-contact-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--realm-space-5);
	row-gap: var(--realm-space-1);
	align-items: start;
	justify-items: start;
	text-align: start;
	box-shadow: var(--realm-shadow-sm);
}

.garden-principles .realm-contact-card__icon {
	grid-row: span 2;
}

.garden-principles .realm-contact-card.is-style-card-feature .realm-contact-card__heading {
	font-size: var(--realm-text-lg);
}

/* -----------------------------------------------------------------------------
 * 16.13 Sidfot
 *
 * Sidfoten har fyra kolumner: beskrivning, två menyer och öppettider. Realms
 * rutnät lägger dem i rad från 1024 px, men upp till 1200 px blev menyn
 * 115 px bred och öppettiderna bröts mitt i "Måndag–fredag". Där läggs de två
 * och två, som på surfplatta.
 * -------------------------------------------------------------------------- */

@media screen and (min-width: 1024px) and (max-width: 1199px) {
	.realm-footer__row.realm-grid > .realm-footer__section {
		grid-column: span 6;
	}
}