/* Ridderstierna Gård — delad stil, hämtad från design-prototypen (Design-artefakten). */

:root {
  --ink: #2B2620;
  --ink-soft: #6B6255;
  --cream: #FAF6EE;
  --card: #FFFFFF;
  --line: #E4DDD0;
  --forest: #34432B;
  --forest-dark: #263420;
  --forest-light: #C9D6BA;
  --terracotta: #B85C38;
  --terracotta-dark: #96492C;
  --sand: #EFE7D6;
  --gold: #C79A45;

  /* Sidans innehåll blir aldrig bredare än detta, oavsett hur bred
     skärmen är — annars sträcker hero/rutnät/kort ut sig obalanserat på
     breda skärmar. --edge-pad räknar ut sidomarginalen dynamiskt: minst
     64px (samma som förut på normalbreda skärmar), men växer på breda
     skärmar så att innehållet centreras inom --content-max istället för
     att fortsätta växa mot kanterna. Mobilvyns egen padding (768px-brytpunkten
     längre ner) tar över på telefonskärmar precis som förut. */
  --content-max: 1400px;
  --edge-pad: max(64px, calc((100% - var(--content-max)) / 2 + 64px));
}

* { box-sizing: border-box; }

/* Sidfoten ska ligga i nederkanten av fönstret även när sidans innehåll
   är kort (t.ex. en tom kundvagn) — annars syns en tom ruta med sidans
   bakgrundsfärg under sidfoten. body blir en kolumn där <main> (allt
   sidinnehåll mellan menyn och sidfoten, se partials/header.php resp.
   footer.php) alltid fyller ut det som blir över, så sidfoten skjuts ner
   till botten på korta sidor men beter sig precis som förut på långa. */
html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: 'Public Sans', sans-serif;
  color: var(--ink);
  background: var(--cream);
}
.page-main { flex: 1 0 auto; }
.nav, .footer { flex-shrink: 0; }

h1, h2, h3, h4 { font-family: 'Fraunces', serif; margin: 0; }
a { text-decoration: none; color: inherit; }

/* Webbläsare ritar sin egen triangel/pil framför <summary>-text (utseendet
   skiljer sig mellan Chrome/Firefox och Safari), vilket kolliderar med
   radernas egen flex-layout och gör att texten hamnar fel/ojämnt indragen
   istället för att ligga jäms med kanten — särskilt tydligt i Safari.
   Vi stänger av webbläsarens egen pil överallt och litar istället på
   radernas egen layout (och :hover/bakgrundsfärg) för att visa att raden
   går att fälla ut. */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::marker { display: none; }

.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--terracotta);
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--edge-pad); height: 88px; background: var(--cream);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
  transition: height .25s ease, box-shadow .25s ease;
}
.nav--scrolled { height: 64px; box-shadow: 0 6px 24px rgba(43, 38, 32, .10); }

/* Håller ihop menylänkarna (som kollapsar till en utfällbar lista på mobil)
   och nav-actions (språkväljare + hamburgarknapp, alltid synliga) som EN
   flex-yta till höger om loggan. */
/* Gapet mellan länklistan (vars sista länk är logga in-ikonen när
   utloggad) och nav-actions (språkväljaren) var 10px — samma som
   avståndet till övriga menylänkar. Dragit ner till 6px (samma gap som
   inuti språkväljarens egen ikon+kod-grupp) så ikonparet känns som en
   egen enhet istället för att login-ikonen bara råkar hamna sist i
   länklistan (Johans återkoppling, Finding C). */
.nav-right { display: flex; align-items: center; gap: 6px; }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap;
  padding: 9px 12px; border-radius: 8px;
  transition: background-color .15s ease, color .15s ease;
}
.nav-link:hover { color: var(--terracotta-dark); background: var(--sand); }
.nav-link--active { background: var(--forest); color: #fff; }
.nav-link--active:hover { background: var(--forest-dark); color: #fff; }

/* Logga in-länken är en ikon-only cirkelknapp i den vanliga (icke-utfällda)
   navigeringen, som språkväljaren bredvid den — texten finns kvar i DOM:en
   för skärmläsare/mobil men göms visuellt på desktop. Se mobilöverskriften
   nedan för hur den ser ut i den utfällda mobilmenyn istället. */
.nav-link--icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border-radius: 999px; flex-shrink: 0;
  /* Ring runt ikonen, samma behandling som språkväljarens
     .lang-switch-toggle bredvid den (Johans återkoppling, Uppdatering
     2026-10-14: "samköra"-uppföljningen, Finding C) — annars är det bara
     språkväljaren av de två som ser ut som en knapp. */
  border: 1px solid var(--line); transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.nav-link--icon:hover { color: var(--forest); border-color: var(--forest); background: var(--sand); }
.nav-link--icon .nav-link-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Inloggad kund: ikonen ersätter INTE längre namnet (Johans återkoppling,
   Uppdatering 2026-10-15, inloggningsmodal-specen) — en permanent,
   sakta pulserande ikon (.account-menu-trigger) som öppnar en liten meny
   vid klick ("Mina sidor"/"Logga ut"), istället för att själv vara en
   textlänk till /konto/. Återanvänder .nav-link--icon rakt av, så
   mobilöverskriften ovan (ikon+namn sida vid sida i den utfällda menyn,
   @media (max-width:900px)) gäller automatiskt här också — ingen egen
   mobil-regel behövs för SJÄLVA ikonen/namnet, bara för dropdownen (se
   nedan i mobilöverskriften). */
.account-menu { position: relative; }

/* Pulsringen sitter på en liten, EGEN cirkel runt själva ikon-glyfen
   (.account-icon-ring), inte på hela .account-menu-trigger-länken —
   annars syns den knappt när länken är bred (mobilmenyns fulla rad
   istället för desktopens 38px-cirkel, se kommentaren i header.php).
   ::after-ringen är absolutpositionerad med en fast storlek oberoende av
   föräldraelementets form/bredd, så samma markup/CSS ger samma synliga
   puls i både desktop- och mobilläget. */
.account-icon-ring { position: relative; display: inline-flex; flex-shrink: 0; }
.account-menu-trigger .account-icon-ring::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--forest); animation: account-icon-pulse 2.6s ease-out infinite;
}
@keyframes account-icon-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

.account-menu-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 180px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 28px rgba(43, 38, 32, .14);
  padding: 6px; flex-direction: column; gap: 2px;
}
.account-menu-dropdown--open { display: flex; }
.account-menu-dropdown-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.account-menu-dropdown-item svg { flex-shrink: 0; }
.account-menu-dropdown-item:hover { background: var(--sand); }
/* "Logga ut" i terrakotta (skiss-inloggningsmodal.html — Johans
   återkoppling: samma röda ton som övriga destruktiva/avslutande
   handlingar i appen, t.ex. .btn-toggle--active). */
.account-menu-dropdown-item--logout { color: var(--terracotta-dark); }
.account-menu-dropdown-item--logout:hover { background: var(--sand); }
.account-menu-dropdown-divider { height: 1px; background: var(--line); margin: 4px 2px; }

/* Kampanjsignalen i huvudnavigeringen (Uppdatering 2026-10-16, se
   skiss-kampanjnav-puls.html och Johans godkända "alternativ 2") —
   ersätter HELT den tidigare separata "⚡ Kampanj"-badgelänken
   (.nav-link--campaign/.campaign-badge-ring, Uppdatering 2026-10-15 (11)).
   "Gårdsbutik"-länken bär signalen själv istället för en egen länk/badge,
   se header.php för de tre lägena. */
@keyframes nav-gold-pulse {
  0%, 100% { background-color: transparent; }
  50%      { background-color: var(--gold); }
}
/* Kampanj aktiv, man är INTE i butiken ännu — locka blicken dit. */
.nav-link--campaign-pulse { animation: nav-gold-pulse 3.8s ease-in-out infinite; }
/* Kampanj aktiv OCH man är i butiken (gardsbutik/kategori/produkt/kampanj)
   — stilla guld ERSÄTTER det vanliga mörkgröna aktiva läget, pulsen
   slutar. Samma mörka textfärg som REA-taggen (.corner-tag--sale) på
   guld, för kontrastens skull. */
.nav-link--campaign-active { background: var(--gold) !important; color: #5C4520 !important; }

/* Blixtikonen — bara synlig i den utfällda MOBILMENYN (se
   @media (max-width:900px) nedan), framför texten, exakt som
   inloggningsikonen redan visas där ("ikon + text sida vid sida"). */
.nav-campaign-icon { display: none; width: 15px; height: 15px; flex-shrink: 0; position: relative; z-index: 1; }
/* Pulsring runt blixten, bara i läget "kampanj aktiv, inte i butiken" —
   samma teknik som .account-icon-ring::after ovan, en egen liten
   ::after-ring oberoende av radens bredd.
   BUGFIX 2026-10-16 (Johans återkoppling från driftsättningen): wrappern
   måste döljas HÄR också, inte bara ikonen inuti den — annars blir den
   kvar som ett osynligt 0×0-element på desktop (ikonen i den är
   display:none, men ::after-ringen sitter på WRAPPERN och brydde sig
   inte om det), och en liten fristående guld-ring stod och pulserade i
   tomma intet bredvid "Gårdsbutik" på desktop. */
.nav-campaign-icon-wrap { display: none; position: relative; flex-shrink: 0; }
.nav-campaign-icon-wrap::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid var(--gold); animation: nav-gold-pulse-ring 2.2s ease-out infinite;
}
@keyframes nav-gold-pulse-ring {
  0%   { transform: scale(1);    opacity: .65; }
  70%  { transform: scale(1.08); opacity: 0; }
  100% { transform: scale(1.08); opacity: 0; }
}

/* "Inloggad som NAMN" — visas en gång, precis efter inloggning (se
   CustomerAuth::takeJustLoggedIn()/partials/header.php), och tonar bort
   av sig själv rent i CSS (animation-fill-mode:forwards, se nedan) —
   ingen JS-timer behövs, så den fungerar även utan JS (stannar bara kvar
   hela sidladdningen istället för att tona bort till slut). */
.account-toast {
  position: fixed; top: 84px; right: 24px; z-index: 150;
  background: var(--forest); color: #fff; font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
  opacity: 0; pointer-events: none;
}
.account-toast--show { animation: account-toast-fade 4.5s ease forwards; }
@keyframes account-toast-fade {
  0% { opacity: 0; transform: translateY(-6px); }
  10% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* Språkväljare: ikon + språkkod, alltid synlig utanför hamburgarmenyn. */
.nav-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.lang-switch { position: relative; }
.lang-switch-toggle {
  display: flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 12px; border-radius: 999px;
  background: none; border: 1px solid var(--line); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.lang-switch-toggle:hover,
.lang-switch-toggle[aria-expanded="true"] { color: var(--forest); border-color: var(--forest); background: var(--sand); }
.lang-switch-icon { flex-shrink: 0; }
.lang-switch-code { letter-spacing: .04em; }

.lang-switch-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 150px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 28px rgba(43, 38, 32, .14);
  padding: 6px; flex-direction: column; gap: 2px;
}
.lang-switch-menu--open { display: flex; }
.lang-switch-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border-radius: 8px; font-size: 14px; color: var(--ink);
}
.lang-switch-option:hover { background: var(--sand); }
.lang-switch-option--active { color: var(--forest); font-weight: 600; }
.lang-switch-option svg { color: var(--forest); flex-shrink: 0; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: none; cursor: pointer;
  padding: 0; flex-shrink: 0;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--ink); margin: 0 auto;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.logo-word { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600; color: var(--forest); }
.logo-sub {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 4px;
}

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px; background: var(--forest);
  color: #fff; font-weight: 600; font-size: 15px; padding: 14px 28px;
  border-radius: 999px; border: none; cursor: pointer; font-family: 'Public Sans', sans-serif;
}
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px; background: transparent;
  color: var(--forest); font-weight: 600; font-size: 15px; padding: 12.5px 26px;
  border-radius: 999px; border: 1.5px solid var(--forest); cursor: pointer;
  font-family: 'Public Sans', sans-serif;
}
.btn-outline:hover { background: var(--sand); }

/* Namngivna, återanvändbara storlekar för .btn-outline i radtäta/kompakta
   sammanhang i admin (bildrutor, "flytta upp/ner", spara-knappar inuti
   kort osv.) — tidigare samma .btn-outline-knapp med sin EGEN inline
   style="font-size:...px; padding:...px" på varje enskild sida (12px/13px,
   6px 10px/6px 12px/6px 14px i olika kombinationer utan anledning), vilket
   var precis den typ av "olika knappstorlekar" Johan noterade. Samma
   princip som .btn-toggle--sm nedan, bara för .btn-outline. Bredd/
   justify-content/färg (t.ex. den röda radera-varianten) är läges-specifikt
   och ligger kvar som inline style där det behövs — bara storleken (font-
   size/padding) är flyttad hit.
*/
.btn-outline--sm { font-size: 12px; padding: 6px 12px; }
.btn-outline--xs { font-size: 11px; padding: 4px 6px; }

/* TILLÄGG 2026-10-19 (Johans återkoppling: "Antal"/"Lägg i kundvagn" på
   samma rad i det tighta produktkortet, se showDescriptionInCategory i
   gardsbutik-kategori.php). Standardmönstret för att dölja text visuellt
   men behålla den för skärmläsare — klickytan/etiketten för "Antal" tas
   bort rent visuellt här, inte bara med display:none (som skulle ta bort
   den helt ur tillgänglighetsträdet också). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.card-pad { padding: 32px; }
.card--loading { opacity: .5; pointer-events: none; transition: opacity .15s ease; }

/* TILLÄGG 2026-10-16 (Johans återkoppling från driftsättningen, skiss
   "Visningsläge"-korten) — ersätter de råa radioknapplistorna i
   kampanjkonfiguratorn (admin/kampanj.php) med ikonförhandsvisnings-kort,
   ett per läge, i en rad. Klickbar hela ytan via <label>, markerad
   bakgrund/kant på det valda kortet, egna små SVG/CSS-ikoner i varje
   förhandsvisningsruta som antyder layouten (rutnät/lista/dubbelrad). */
.mode-card-group { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.mode-card {
  position: relative; flex: 1 1 200px; min-width: 180px;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--card); cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.mode-card:hover { border-color: #CBBE9F; }
.mode-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.mode-card--selected,
.mode-card:has(input:checked) { background: var(--forest-light); border-color: var(--forest); }
.mode-card-preview {
  height: 56px; border-radius: 10px; background: var(--card);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 6px;
}
.mode-card-preview-grid span { width: 16px; height: 16px; border-radius: 4px; background: var(--sand); }
.mode-card-preview-list span { width: 72px; height: 10px; border-radius: 999px; background: var(--sand); }
.mode-card-preview-both span { width: 22px; height: 22px; border-radius: 50%; background: var(--sand); }
.mode-card-row { display: flex; align-items: flex-start; gap: 8px; }
.mode-card-dot {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  border: 1.5px solid #B9AF9A; background: var(--card); position: relative;
}
.mode-card--selected .mode-card-dot,
.mode-card:has(input:checked) .mode-card-dot { border-color: var(--forest); }
.mode-card--selected .mode-card-dot::after,
.mode-card:has(input:checked) .mode-card-dot::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--forest);
}
.mode-card-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mode-card-desc { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

/* TILLÄGG 2026-10-16 (Johans återkoppling, prisslider på kampanj.php) —
   mönster hämtat från skiss-kampanjsida-v2-konfigurationsscenarion.html:s
   .price-slider-block, oförändrat förutom att --forest/--line redan är
   sajtens egna variabler (skissen hade egna provisoriska namn på samma
   färger). Två överlappande <input type="range"> med genomskinligt eget
   spår — bara handtagen (::-webkit-slider-thumb/::-moz-range-thumb) är
   klickbara (pointer-events), det färgade "range"-facket emellan är en
   ren visuell div som JS:en i kampanj.php positionerar om.
*/
.price-slider-label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }
.price-slider-label b { color: var(--ink); font-weight: 700; }
.price-slider { position: relative; height: 28px; }
.price-slider .track { position: absolute; top: 12px; left: 0; right: 0; height: 4px; border-radius: 999px; background: var(--line); }
.price-slider .range { position: absolute; top: 12px; height: 4px; border-radius: 999px; background: var(--forest); }
.price-slider input[type="range"] {
  position: absolute; top: 0; left: 0; width: 100%; height: 28px; margin: 0;
  background: none; -webkit-appearance: none; appearance: none; pointer-events: none;
}
.price-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; border: 2.5px solid var(--forest); cursor: pointer;
}
.price-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--forest); cursor: pointer;
}
.price-slider input[type="range"]::-webkit-slider-runnable-track { -webkit-appearance: none; background: transparent; }
.price-slider input[type="range"]::-moz-range-track { background: transparent; }
.placeholder {
  background: var(--sand); border: 1.5px dashed #CBBE9F; display: flex;
  align-items: center; justify-content: center; color: var(--ink-soft);
  font-size: 14px; text-align: center; padding: 16px; overflow: hidden;
  position: relative;
}
/* När en riktig bild finns: ingen streckad kant/padding, bilden fyller ytan. */
.placeholder--photo { border-style: solid; border-color: var(--line); padding: 0; }
.placeholder-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; background: var(--sand);
  color: var(--forest); font-size: 13px; font-weight: 600; padding: 6px 14px;
  border-radius: 999px;
}
.label { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; display: block; }
.input {
  font-family: 'Public Sans', sans-serif; font-size: 15px; padding: 12px 14px;
  border-radius: 10px; border: 1.5px solid var(--line); background: #fff;
  color: var(--ink); width: 100%;
}
/* Ett <input type="date"> har sitt eget interna kalender-widget vars
   naturliga bredd webbläsaren (särskilt mobila) kan hävda mot, så att den
   ignorerar width:100% och sticker ut ur sin behållare. min-width:0 tar
   bort den falska "innehållet kräver den här bredden"-spärren. */
input[type="date"] { min-width: 0; max-width: 100%; }

/* Från/till-fälten i bokningsmodalen (hus-detalj.php).

   RUNDA 17 — sexton rundor gick åt till att försöka tvinga fram en viss
   bredd på <input type="date"> i Safari (tabell, grid, flexbox, olika
   paddingar/mellanceller) — aldrig pålitligt, för fältet bestämmer
   alltid sin egen bredd utifrån sin inbyggda, lokalt formaterade text,
   oavsett vad vi säger åt dess container. Din idé: sluta lita på
   fältets EGEN synliga rendering helt. Det riktiga <input type="date">
   finns kvar (för datumväljar-funktionen och formulärvärdet) men är
   osynligt (opacity:0) och ligger absolutpositionerat ovanpå en vanlig
   <div> (.date-display) som vi äger helt — vår egen bredd, padding,
   radie, textfärg. JavaScript skriver ut datumtexten själv (samma
   format som tidigare, "30 sep. 2026"), så webbläsaren har inget eget
   innehåll kvar att vilja ha en egen bredd för. Ett tryck träffar det
   osynliga fältet och öppnar telefonens vanliga datumväljare precis som
   vanligt.

   Eftersom .date-display bara är en vanlig div med text VI kontrollerar
   (ingen inbyggd minimibredd, inget överraskande) fungerar vanlig
   flexbox+gap (som vi provade allra först, och som fungerar utmärkt så
   fort inga native-formulärkontroller är inblandade). */
.date-btn-wrap { position: relative; }
.date-display {
  font-family: 'Public Sans', sans-serif; font-size: 15px; padding: 12px 14px;
  border-radius: 10px; border: 1.5px solid var(--line); background: #fff;
  line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center; font-weight: 600;
}
/* Ljust grön/röd bakgrund (inte bara text) för tydlig visuell struktur —
   start/stopp som ett trafikljus. Samma tonalitet som sajtens befintliga
   success-box/error-box, så det känns som samma färgpalett. */
.date-display--from { color: #2F7D4F; background: #E9F3EC; border-color: #BFDCC9; }
.date-display--to { color: #C1503F; background: #FBEAE7; border-color: #E9C2BA; }
.date-display--warning { border-color: #E3C57A; background: #FFFBF2; color: #8A6D1D; }
.date-real-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; padding: 0; border: 0; cursor: pointer;
}
@media (max-width: 480px) {
  .date-display { font-size: 14px; padding: 10px 10px; }
}

.error-box {
  background: #FBE9E1; border: 1px solid #E4A98B; color: #8A3B1D;
  font-size: 13px; padding: 12px 14px; border-radius: 10px; margin-bottom: 16px;
}
.success-box {
  background: #E7EFDE; border: 1px solid #A9C48D; color: var(--forest-dark);
  font-size: 13px; padding: 12px 14px; border-radius: 10px; margin-bottom: 16px;
}
.warning-box {
  display: none;
  background: #FBF3DE; border: 1px solid #E3C57A; color: #7A5B12;
  font-size: 13px; padding: 12px 14px; border-radius: 10px; margin-bottom: 16px;
}
.warning-box--visible { display: block; }
.input--warning { border-color: #E3C57A; background: #FFFBF2; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.footer { background: var(--forest); color: #EDE7D9; padding: 56px var(--edge-pad); }
.footer a { color: #EDE7D9; }
/* footer-inner/footer-links saknade tidigare display:flex helt på desktop
   (bara flex-direction/gap var satt i mobilbrytpunkten, vilket inte gör
   något utan display:flex som grund) — det gjorde att "Utforska"-listan
   och "Kontakt" bara block-staplades utan mellanrum emellan. */
.footer-inner { display: flex; justify-content: space-between; gap: 56px; margin-top: 40px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 64px; }

.calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.calendar-cell {
  width: 100%; aspect-ratio: 1; border-radius: 7px; display: flex;
  align-items: center; justify-content: center; font-size: 11px;
}
.calendar-cell--blocked { background: #F0E3D3; color: var(--terracotta-dark); font-weight: 600; }
.calendar-cell--free { background: transparent; color: var(--ink); }
.calendar-cell--today { box-shadow: inset 0 0 0 1.5px var(--forest); font-weight: 700; }
.calendar-cell--past { color: var(--line); }
.calendar-cell--pick {
  cursor: pointer; border: none; font-family: 'Public Sans', sans-serif;
  transition: background .15s ease, color .15s ease;
}
.calendar-cell--pick:hover, .calendar-cell--pick:focus-visible {
  background: var(--sand); color: var(--forest-dark); outline: none;
}

/* Bildgalleri på husdetaljsidan — knapparna ärver .placeholders flex-
   centrering, vi lägger bara till storlek/interaktion. */
.gallery-main {
  height: 420px; border-radius: 18px; cursor: zoom-in;
  width: 100%; font-family: inherit; color: inherit; font-size: 14px;
}
.gallery-thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.gallery-thumb {
  width: 84px; height: 64px; border-radius: 10px; font-size: 10px; padding: 4px;
  cursor: pointer; flex-shrink: 0; font-family: inherit; color: inherit;
}
.gallery-thumb--active { box-shadow: 0 0 0 2px var(--forest); }

/* produkt-detalj.php: ingen lightbox i något av de två bildlägena längre
   (Johans återkoppling, se den filens egen kommentar vid
   $showClassicGallery) — .gallery-main används ändå där, bara utan
   zoom-in-pekaren som antydde ett klick som inte längre gör något. */
.gallery-main--static { cursor: default; }

/* Karusellläget (gallery_mode = carousel) — pilar ovanpå huvudbilden +
   punkter under, ingen miniatyrrad. Mörk halvgenomskinlig cirkel med vit
   pil, samma känsla som lightboxens .lightbox-btn men tillräckligt
   kontrastrik för att fungera ovanpå VILKEN bild som helst (ljus eller
   mörk), inte bara lightboxens egen mörkbruna bakgrund. */
.gallery-carousel { position: relative; }
.gallery-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 999px; border: none;
  background: rgba(30,26,20,.55); color: #fff; font-size: 20px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-family: 'Public Sans', sans-serif;
}
.gallery-carousel-arrow:hover { background: rgba(30,26,20,.75); }
.gallery-carousel-arrow--prev { left: 12px; }
.gallery-carousel-arrow--next { right: 12px; }
.gallery-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.gallery-dot {
  width: 8px; height: 8px; border-radius: 999px; border: none; padding: 0;
  background: var(--line); cursor: pointer;
}
.gallery-dot--active { width: 20px; background: var(--forest); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(30,26,20,.88);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.lightbox--open { display: flex; }
.lightbox-inner { max-width: 720px; width: 100%; }
.lightbox-image { height: 420px; border-radius: 14px; background: #3B362C; border-color: rgba(255,255,255,.3); color: #EDE7D9; }
.lightbox-image-img { width: 100%; height: 100%; object-fit: contain; }
.lightbox-caption { color: #EDE7D9; text-align: center; margin-top: 14px; font-size: 14px; }
.lightbox-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.lightbox-btn {
  background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 999px;
  width: 40px; height: 40px; font-size: 18px; cursor: pointer; font-family: 'Public Sans', sans-serif;
}
.lightbox-btn:hover { background: rgba(255,255,255,.22); }
.lightbox-close {
  position: absolute; top: 20px; right: 24px; background: none; border: none;
  color: #fff; font-size: 28px; cursor: pointer; line-height: 1;
}

/* Kalendernavigering */
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-nav-title { font-size: 15px; font-weight: 600; }
.cal-nav-btn {
  background: var(--sand); border: none; border-radius: 8px; width: 32px; height: 32px;
  font-size: 15px; cursor: pointer; color: var(--ink); display: inline-flex;
  align-items: center; justify-content: center;
}
.cal-nav-btn:hover { background: var(--line); }
.cal-nav-btn[aria-disabled="true"] { visibility: hidden; }

/* Bokningsmodal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200; background: rgba(30,26,20,.55);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop--open { display: flex; }
.modal {
  background: var(--card); border-radius: 18px; padding: 32px; max-width: 440px;
  width: 100%; max-height: 90vh; overflow-y: auto; position: relative;
}
.modal-close {
  position: absolute; top: 18px; right: 18px; background: none; border: none;
  font-size: 22px; cursor: pointer; color: var(--ink-soft); line-height: 1;
}

/* Adminpanelens modaler (t.ex. variant-wizard.js) återanvänder samma
   .modal-backdrop/.modal som bokningsmodalen ovan, men .modal-backdrop
   centrerar mot HELA fönstret (inset:0) — på en admin-sida med den 252px
   breda sidopanelen (.admin-sidebar, se längre ner) gör det att modalen
   hamnar synligt vänsterförskjuten mot innehållsytan (Johans återkoppling:
   "hänger lite snett i förhållande till underliggande information"). Flyttar
   bara vänsterkanten in med sidopanelens bredd på desktop så centreringen
   sker mot .admin-main istället. Under 900px ligger sidopanelen off-canvas
   (translateX, se @media (max-width: 900px) nedan) så där ska ingen
   kompensation göras — det var också därför Johan tyckte det såg bra ut på
   mobil. */
@media (min-width: 901px) {
  .admin-body .modal-backdrop { left: 252px; }
}

/* Minikundvagn: en panel som glider in från höger när en produkt läggs i
   kundvagnen (AJAX, se cart.js), istället för hela sidans gamla
   "tillagd"-meddelande. Egen backdrop/panel (inte .modal-backdrop/.modal
   ovan) eftersom den ska sitta mot höger kant och glida in horisontellt,
   inte vara centrerad — men samma mörka halvtransparenta bakgrund. */
.cart-drawer-backdrop {
  position: fixed; inset: 0; z-index: 220; background: rgba(30,26,20,.45);
  display: none; opacity: 0; transition: opacity .25s ease;
}
.cart-drawer-backdrop--open { display: block; opacity: 1; }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 221;
  width: 100%; max-width: 380px; background: var(--card);
  box-shadow: -10px 0 28px rgba(30,26,20,.2);
  transform: translateX(100%); transition: transform .3s ease;
  display: flex; flex-direction: column;
}
.cart-drawer-backdrop--open .cart-drawer { transform: translateX(0); }
.cart-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.cart-drawer-title { font-size: 17px; font-weight: 600; margin: 0; }
.cart-drawer-close {
  background: none; border: none; font-size: 22px; cursor: pointer;
  color: var(--ink-soft); line-height: 1;
}
.cart-drawer-body { padding: 24px; overflow-y: auto; flex: 1 1 auto; }
/* Lista över samtliga varor som just nu ligger i kundvagnen, visad under
   tillägg-meddelandet i minikundvagnen (se cart.js) — inte bara den vara
   som precis lades till. */
.cart-drawer-items {
  display: flex; flex-direction: column; gap: 10px; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
/* Varje rad i minikundvagnen: en produktbild + namn/pris/"hämtas på
   gården" i mitten + ett eget, SMALT stående +/- stegverktyg längst till
   höger (plus-knapp överst, antal i mitten, minus-knapp underst) — samma
   upplägg som kjell.com, valt istället för vårt liggande
   kundvagnssides-stegverktyg eftersom det gav bättre balans mellan bild
   och kontroller i den smala panelen (Johans återkoppling). Knapparna och
   fältet återanvänder .cart-qty-btn/.cart-qty-input men med egna
   mått/kantlinjer via .cart-qty-stepper--vertical nedan. */
.cart-drawer-item {
  display: grid; grid-template-columns: 64px 1fr 34px; gap: 12px;
  align-items: start; font-size: 13px; color: var(--ink);
}
.cart-drawer-item-thumb {
  width: 64px; height: 64px; border-radius: 10px; object-fit: cover;
  display: block;
}
.cart-drawer-item-thumb-placeholder {
  width: 64px; height: 64px; border-radius: 10px;
}
/* Bilden och namnet länkar till produktsidan igen (Johans återkoppling,
   samma som på kundvagnssidan) — egna länkklasser istället för upprepad
   inline-style, ärver textfärgen och understryker bara namnet vid hover
   som enda ledtråd att raden går att klicka. */
.cart-drawer-item-thumb-link { display: block; }
.cart-drawer-item-name-link { color: inherit; text-decoration: none; }
.cart-drawer-item-name-link:hover { text-decoration: underline; }
.cart-drawer-item-body { min-width: 0; }
.cart-drawer-item-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.cart-drawer-item-name { font-weight: 600; }
.cart-drawer-item-total { font-weight: 600; white-space: nowrap; }
/* Variantens etikett (t.ex. "M / Röd") — samma plats/stil som
   .cart-row-variant på kundvagnssidan. */
.cart-drawer-item-variant { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.cart-drawer-item-unit-price { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
/* Samma plats som kjell.com använder för sin lagerstatus-rad — hos oss
   "Hämtas på gården" istället, bara för varor som inte skickas (Johans
   förslag: "där kjell.com skriver ut lager skulle vi kunna visa hämtas på
   gården"). Finns bara i DOM:en när den gäller, se cart.js. */
.cart-drawer-item-pickup { font-size: 12px; color: var(--terracotta-dark); margin-top: 3px; }
/* Ersätter den tidigare ta bort-knappen i panelen (Johans förslag): att
   minska antalet till 0 i stegverktyget tar nu bort raden istället, så den
   här platsen visar produktens artikelnummer, likt kjell.com:s egen panel. */
.cart-drawer-item-artnr { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.cart-drawer-item--removing { opacity: .4; pointer-events: none; transition: opacity .15s ease; }
.cart-drawer-empty { font-size: 14px; color: var(--ink-soft); margin-top: 18px; }
.cart-qty-stepper--vertical {
  display: flex; flex-direction: column; align-items: stretch; width: 34px;
  border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden;
  justify-self: end;
}
.cart-qty-stepper--vertical .cart-qty-btn { width: 34px; height: 26px; }
.cart-qty-stepper--vertical .cart-qty-input {
  width: 34px; height: 26px; border-left: none; border-right: none;
  border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line);
  font-size: 13px;
}
.cart-drawer-footer {
  padding: 20px 24px; border-top: 1px solid var(--line); flex-shrink: 0;
  display: flex; flex-direction: column; gap: 10px;
}

/* Strukturella layoutklasser — ersätter tidigare inline-styles på sidorna så
   att media queries faktiskt kan påverka dem. */

.hero { position: relative; min-height: 560px; display: flex; align-items: flex-end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; border-radius: 0; }
/* align-items/padding-top hör bara till platshållarens egen bildtext (som
   ska sitta nära toppen, inte centrerad) — låg de ligga på .hero-media
   självt tidigare, vilket också krympte en riktig <img> 28px från toppen
   och lämnade en omålad rand där bakgrunden lyste igenom. Nu träffar de
   bara fallback-läget (ingen bild uppladdad än). */
.placeholder.hero-media { align-items: flex-start; padding-top: 28px; }
.hero-scrim { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(38,52,32,.12), rgba(30,40,25,.72)); }
/* hero-inner har sin egen max-width för radbrytningen i rubrik/text (inte
   för sidans övergripande breddtak) — den ska inte ändras, annars
   klämmer sig texten ihop. Istället skjuts panelen in från vänster med
   margin-left, så att texten hamnar i linje med resten av sidans
   innehåll på breda skärmar, precis som allt annat på sidan. */
.hero-inner {
  position: relative; z-index: 1; padding: 64px; max-width: 720px;
  margin-left: calc(var(--edge-pad) - 64px);
}
.hero-title { color: #fff; font-size: clamp(32px, 6vw, 56px); font-weight: 600; margin: 14px 0 18px; line-height: 1.1; }
.hero-lead { color: #F1ECDF; font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6; margin: 0 0 28px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.split { padding: 96px var(--edge-pad); display: flex; gap: 64px; align-items: center; }
.split-text { flex: 1; min-width: 0; }
.split-media { flex: 1; height: 360px; border-radius: 18px; }
.split-title { font-size: clamp(26px, 4vw, 36px); font-weight: 600; margin: 14px 0 18px; line-height: 1.2; }

.page-head { padding: 64px var(--edge-pad) 32px; }
.page-head-title { font-size: clamp(28px, 5vw, 40px); font-weight: 600; margin: 14px 0 10px; }
.page-head-lead { font-size: 16px; color: var(--ink-soft); max-width: 680px; line-height: 1.65; }

.grid-2 { padding: 0 var(--edge-pad) 96px; display: flex; gap: 32px; }
.grid-2 > * { flex: 1; }

/* Rubrik för en grupp boenden (t.ex. "Boende hos våra vänner") ovanför ett
   .grid-2-block på boende.php — EN egen klass med samma --edge-pad-
   sidmarginal som .page-head/.grid-2, istället för en bar <h2> med bara
   inline font-stil (som renderade ända ut till skärmkanten, utan
   sidmarginal, eftersom body är en flex-kolumn utan egen innehållsbredd —
   varje sektion ansvarar själv för sin --edge-pad-padding). Ingen egen
   top-marginal här: föregående .grid-2 bidrar redan med 96px
   bottenpadding (48px på mobilen), så det räcker som luft ovanför. */
.boende-group-heading { padding: 0 var(--edge-pad); font-size: 22px; font-weight: 600; margin: 0 0 18px; }

/* Delad beskrivningstext för en grupp boenden (admin/boende.php ->
   "Hantera grupper"), direkt under .boende-group-heading — samma
   --edge-pad-sidmarginal, egen liten bottenmarginal istället för
   rubrikens 18px eftersom den sitter direkt ovanför .grid-2. */
.boende-group-description { padding: 0 var(--edge-pad); font-size: 15px; color: var(--ink-soft); margin: -8px 0 18px; }

/* Om gårdens tre textavsnitt (public/om-garden.php) — egen klass istället
   för en ad hoc inline-padding, annars missar den mobilbrytpunktens
   sidmarginal-override nedan (samma klass-lista som .page-head m.fl.) och
   avsnitten hamnar indragna längre än resten av sidan på smala skärmar. */
.om-garden-sections { padding: 0 var(--edge-pad) 64px; }

/* Tjänster m.fl. med varierande antal kort — grid som radbryter av sig
   själv istället för att klämma ihop allt på en rad som .grid-2 skulle.
   Korten har en maxbredd (--grid3-max, standard 340px) istället för att
   sträcka ut sig och fylla hela raden — annars blir t.ex. en ensam
   produkt under en kategori orimligt stor. Rutnätet fyller på från
   vänster som standard, så en ensam produkt hamnar till vänster med
   tomt utrymme till höger, inte centrerad.
   Sidor med få kort (se t.ex. tjanster.php) sätter --grid3-max högre
   inline så korten breddas och fyller ytan bättre istället för att lämna
   dött utrymme till höger — påverkar bara den sidans rutnät, inte
   rutnät med många kort där radbrytning ändå sker.
   --grid3-min tillkom 2026-10-15 (Johans återkoppling: produkt- och
   kategorikort har idag samma storlek, otydligt vilket som är vilket) —
   gardsbutik-kategori.php sätter ett lägre --grid3-min/--grid3-max på
   PRODUKT-rutnätet än på underkategori-rutnätet, så produktkort blir
   tydligt mindre än kategorikort i samma lista (samma princip som
   startsidans redan mindre .shop-block-card-kort). */
.grid-3 {
  padding: 0 var(--edge-pad) 96px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid3-min, 260px), var(--grid3-max, 340px))); gap: 28px;
  justify-content: start;
}

/* Gårdsbutikens fria startsideblock (produkt-/kategorikaruseller, se
   GardsbutikBlock/gardsbutik.php) — en horisontellt skrollbar rad av
   fastbredds-kort, istället för .grid-3:s rutnät som radbryter. Samma
   .card/.card-pad-utseende som korten återanvänder redan på hela sajten,
   bara en egen bredd/flex-shrink ovanpå.

   Den inbyggda scrollbaren döljs (Johans återkoppling — den ser olika ut,
   och ofta lite udda, beroende på webbläsare/OS) till förmån för två
   runda pil-knappar som flyter ovanpå radens kanter (se
   .shop-carousel-arrow nedan) — raden går fortfarande att scrolla direkt
   med touch/trackpad precis som innan, scrollbaren är bara osynlig.
   gardsbutik-nav.js sköter klicken och döljer en pil helt i den ände man
   redan scrollat fram till, så det aldrig går att klicka "vidare" in i
   tomma intet.

   --edge-pad-marginalen ligger på .shop-carousel-wrap (den fasta "ramen"
   man faktiskt ser), INTE på själva den skrollande .shop-block-carousel.
   Annars skrollar marginalen bort som en del av innehållet, så ett kort
   klipps rakt av mot webbläsarfönstrets kant istället för mot samma
   linje som bannerbilden/rubriken ovanför — exakt det Johan påpekade
   ("karusellen flödar ut på kanterna"). Med marginalen på den fasta ramen
   i stället hålls korten alltid innanför samma linje som allt annat
   innehåll, oavsett var i raden man scrollat. */
.shop-carousel-wrap { position: relative; padding: 0 var(--edge-pad); }
.shop-block-carousel {
  display: flex; gap: 20px; overflow-x: auto; padding: 20px 0 4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.shop-block-carousel::-webkit-scrollbar { display: none; }
.shop-block-card { flex-shrink: 0; width: 240px; }

.shop-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; cursor: pointer; z-index: 2; padding: 0;
  box-shadow: 0 6px 16px rgba(43, 38, 32, .16);
  transition: opacity .15s ease;
}
/* Ankras mot INNEHÅLLETS kant (--edge-pad), inte skärmens — annars hamnar
   pilarna långt ut från kortraden på breda skärmar, där --edge-pad kan
   bli flera hundra pixlar (se --content-max ovan). Med calc(--edge-pad -
   20px) sitter pilen alltid halvvägs över kortradens kant, oavsett hur
   bred skärmen är (Johans återkoppling). */
.shop-carousel-arrow--prev { left: calc(var(--edge-pad) - 20px); }
.shop-carousel-arrow--next { right: calc(var(--edge-pad) - 20px); }
/* Sätts av gardsbutik-nav.js när det inte finns mer att scrolla åt det
   hållet (inklusive vid sidladdning, om hela raden redan får plats —
   då döljs båda pilarna direkt). */
.shop-carousel-arrow--hidden { opacity: 0; pointer-events: none; }

.detail-back { padding: 32px var(--edge-pad) 0; }
.detail-head { padding: 20px var(--edge-pad) 0; }
.detail-title { font-size: clamp(28px, 5vw, 40px); font-weight: 600; margin: 12px 0 12px; }
.detail-image-wrap { padding: 32px var(--edge-pad) 0; }
.detail-layout { padding: 56px var(--edge-pad); display: flex; gap: 56px; }
/* Används när .detail-layout kommer direkt efter en .page-head utan någon
   bildgalleri emellan (stallplatser.php, uppstallning.php, kundvagn.php) —
   .page-head har redan 32px marginal nedåt, så detail-layouts egna
   56px/32px (mobil) överst ska inte läggas till ovanpå den. Annars blir
   mellanrummet nästan tre gånger så stort som på sajtens övriga sidor
   (Boende/Gårdsbutik/Tjänster, som parar .page-head med .grid-2/.grid-3 —
   de har 0 i egen toppmarginal av samma anledning). */
.detail-layout--snug { padding-top: 0; }
.detail-main { flex: 1.4; min-width: 0; }
.detail-side { flex: 1; align-self: flex-start; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
/* Karusell-läget (produkt-detalj.php, $showCarouselGallery) — Johans
   Jula.se-exempel: bilden ska ligga BREDVID köp-rutan, inte ovanför den.
   .detail-main återanvänds som bildens plats (.gallery-carousel läggs där
   istället för "Om produkten"-texten, se den filens kommentar), så ingen
   egen bredd/flex behövs här — .detail-main/.detail-side:s befintliga
   1.4/1-fördelning räcker. "Om produkten" skrivs ut i ett eget
   .detail-layout--snug-block under hela raden i det läget. */
.detail-layout--carousel .detail-main { display: flex; flex-direction: column; }
.detail-layout--carousel .gallery-carousel { width: 100%; }
.detail-calendars { display: flex; gap: 20px; }

/* Faciliets-ikonrad under boendets beskrivning (hus-detalj.php) — en
   enkel visuell översikt (Wifi/TV/Diskmaskin osv.), samma för alla
   boenden i nuläget. */
.amenities-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 20px 12px; margin: 4px 0 8px;
}
.amenity-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.amenity-icon-circle {
  width: 52px; height: 52px; border-radius: 50%; background: var(--sand);
  color: var(--forest); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.amenity-label { font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; }
.amenity-value { display: block; font-weight: 600; color: var(--ink); }

/* Segmenterad "pill"-väljare för antal gäster i bokningsformuläret,
   ersätter det gamla number-inputen. Radioknapparna finns kvar (screen
   readers/tangentbordsnavigering), bara visuellt dolda — :has() styr
   vilken pill som ser vald ut. */
.guest-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.guest-pick {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--sand); color: var(--forest); font-weight: 600; font-size: 14px;
  cursor: pointer; border: 1.5px solid transparent; user-select: none;
}
.guest-pick input { position: absolute; opacity: 0; pointer-events: none; }
.guest-pick:has(input:checked) { background: var(--forest); color: #fff; }
.guest-pick:has(input:focus-visible) { border-color: var(--forest-dark); }

/* Innehållsbredd bannerbild på gårdsbutikens startsida (gardsbutik.php) —
   ersätter den gamla fullbredds-heron (.hero). Samma --edge-pad-marginal
   som resten av sidans sektioner, så bilden aldrig blir bredare än
   innehållet (till skillnad från .hero som gick ut i båda kanterna).
   Två format (image_style på GardsbutikBlock, se admin.shop_blocks_image_style_*):
   --banner är det ursprungliga, bredare/kortare formatet (och standard,
   så befintliga block inte byter utseende av sig själva) — --large är
   högre, mer "hero"-aktigt. Båda kapas till ett fast bildförhållande
   (object-fit: cover) så olika uppladdade bilder ändå ger ett enhetligt
   resultat, se Johans återkoppling. */
.shop-banner { padding: 32px var(--edge-pad) 0; }
.shop-banner img, .shop-banner .placeholder { width: 100%; object-fit: cover; border-radius: 16px; display: block; margin: 0; }
.shop-banner--banner img, .shop-banner--banner .placeholder { aspect-ratio: 16 / 5; }
.shop-banner--large img, .shop-banner--large .placeholder { aspect-ratio: 16 / 9; }

/* Bildgalleriblocket (image_gallery, se GardsbutikBlock/gardsbutik.php) —
   ett rutnät med 1–6 egna uppladdade bilder. Litet mellanrum mellan
   bilderna (några pixlar, samma känsla som Kjells egna bildgallerier på
   kjell.com, se Johans återkoppling) — inte .shop-block-carousel:s större
   20px (den är gjord för skrollbara kort, inte ett tätt bildrutnät).
   Antal kolumner trappas efter hur många bilder blocket faktiskt har
   (--N-klassen sätts i gardsbutik.php) så en enda bild blir stor och full
   bredd, medan fem/sex bilder bildar ett tätare rutnät — i alla lägen
   radbryter auto-fill ändå ner till 2 kolumner på smala skärmar (se
   mobilanpassningen nedan). */
.shop-block-gallery { display: grid; gap: 8px; padding: 20px var(--edge-pad) 4px; grid-template-columns: repeat(3, 1fr); }
.shop-block-gallery--1 { grid-template-columns: 1fr; }
.shop-block-gallery--2, .shop-block-gallery--4 { grid-template-columns: repeat(2, 1fr); }
.shop-block-gallery-item { display: block; border-radius: 12px; overflow: hidden; }
.shop-block-gallery-item img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* Gårdsbutikens enade toppnav (se partials/gardsbutik-nav.php) — en
   "Kategorier"-knapp som fäller ut hela det publicerade kategoriträdet som
   en panel (ihopfälld förutom den aktiva kategorins förfäder), en
   sökruta med direktsök som tar resten av raden, och en ikonrad under
   (toppnivåkategorier på gardsbutik.php, eller "Tillbaka" + den aktuella
   kategorins egna underkategorier på en kategori-/produktsida — se
   gardsbutik-nav.php för logiken). Ersätter den gamla, alltid synliga
   sidopanelen (.shop-sidebar/.shop-layout) som klämde ihop innehållet
   permanent; samma på alla tre sidorna som inkluderar partialen. */
.shop-top-row { position: relative; display: flex; gap: 10px; flex-wrap: wrap; padding: 28px var(--edge-pad) 0; }

.cat-toggle-btn {
  position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 46px;
  padding: 0 18px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--line);
  cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ink);
}
.cat-toggle-btn:hover, .cat-toggle-btn[aria-expanded="true"] { border-color: var(--forest); color: var(--forest); background: var(--sand); }
.cat-toggle-btn svg { transition: transform .18s ease; }
.cat-toggle-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Pulsring runt "Kategorier"-knappen — ENDAST på kampanj.php
   ($navCampaignPulseButton, se gardsbutik-nav.php), en inbjudan att
   öppna panelen. Samma ::after-ringteknik som .account-icon-ring/
   .nav-campaign-icon-wrap ovan. Stängs av/sätts tillbaka av JS när
   panelen öppnas/stängs (gardsbutik-nav.js), rörs inte av K-badgens
   egen, separata ring nedan. */
.cat-toggle-btn--pulse::after {
  content: ''; position: absolute; inset: -5px; border-radius: 999px;
  border: 2px solid var(--gold); animation: nav-gold-pulse-ring 2.2s ease-out infinite; pointer-events: none;
}

.cat-panel {
  display: none; position: absolute; top: calc(100% + 8px); left: var(--edge-pad); z-index: 60;
  width: 320px; max-width: calc(100vw - 2 * var(--edge-pad)); background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 36px rgba(43,38,32,.14); padding: 10px;
}
.cat-panel--open { display: block; }
.cat-panel-label { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); padding: 6px 10px 8px; }
.cat-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; border-radius: 10px; }
.cat-row-link { flex: 1; display: block; padding: 10px 11px; font-size: 14px; font-weight: 600; color: var(--ink); border-radius: 10px; text-decoration: none; }
.cat-row-link:hover { background: var(--sand); }
.cat-row-link--active { background: var(--forest); color: #fff; }
/* Utan denna skulle :hover ovan (lägre specificitet men senare i källan
   här räddar den oss inte om muspekaren redan vilar på den aktiva raden)
   kunna vinna över --active-färgen och ge vitt på ljus sand-bakgrund —
   lågkontrast. Håll den aktiva radens mörkgröna bakgrund även vid hover. */
.cat-row-link--active:hover { background: var(--forest); color: #fff; }
.cat-row-expand { position: relative; width: 32px; height: 32px; flex-shrink: 0; border: none; background: none; cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); }
.cat-row-expand:hover { background: var(--sand); color: var(--ink); }
.cat-row-expand svg { transition: transform .18s ease; }
.cat-row-expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.cat-children { display: none; padding-left: 14px; border-left: 1.5px solid var(--line); margin: 2px 0 6px 20px; }
.cat-children--open { display: block; }
.cat-divider { height: 1px; background: var(--line); margin: 6px 4px; }

/* ===== Kampanjmärkningen i kategoripanelen (Uppdatering 2026-10-16, se
   README och skiss-kampanjnav-puls.html, Johans godkända "alternativ 2"
   efter flera skissrundor). K-badgen ligger FAST och guld (ingen egen
   fejd) med en liten fejdande RING runt sig (samma ::after-teknik som
   .account-icon-ring/.nav-campaign-icon-wrap ovan, bara opacitet istället
   för scale) — "inget arv": bara kategorier med en kampanjprodukt DIREKT
   i sig får badgen (se Campaign::categoryIdsWithDirectProducts() och
   gardsbutik-nav.php). ===== */
.cat-k-badge {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 6px; background: var(--gold); color: #fff;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
  /* BUGFIX 2026-10-16 (Johans återkoppling från driftsättningen): badgen
     och kategorinamnet låg ihop utan mellanrum ("KFoder") — skissens
     .cat-row-link hade flex+gap:7px, men riktiga sajtens .cat-row-link är
     display:block (ingen gap att luta sig mot), och PHP-koden sätter
     ingen bokstavlig mellanslagstext mellan badgen och namnet. Löst med
     en egen margin istället för att ändra .cat-row-link:s display, som
     skulle riskera annan layout i den delade komponenten. */
  margin-right: 7px;
}
.cat-k-badge::after {
  content: ''; position: absolute; inset: -3px; border-radius: 8px; border: 1.5px solid var(--gold);
  animation: cat-k-badge-ring-fade 3.4s ease-in-out infinite; pointer-events: none;
}
@keyframes cat-k-badge-ring-fade {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
/* Statisk variant — K-badgen inuti "Visa Kampanjkategorier"-knappen
   nedan är bara en förklarande etikett, inte en uppmaning i sig. */
.cat-k-badge--static::after { content: none; }

/* "alternativ 2" (Johans val, mest framtidssäkert): fäll-ut-pilen byter
   ALDRIG form — bara dess FÄRG (och streckets tjocklek, "fet stil", som
   ett extra tecken) fejdar till kampanjguld, när grenen är ihopfälld OCH
   har en K-märkt kategori gömd någonstans under sig (has-k-descendant,
   se gardsbutik-nav.php — "inget arv", bara DERIVERAT från K-märket,
   inte samma flagga). Inget nytt element, ingen ring runt knappen,
   samma kontroll som redan finns och redan är klickbar. */
@keyframes cat-expand-campaign-fade {
  0%, 100% { color: var(--ink-soft); }
  50%      { color: var(--gold); }
}
@keyframes cat-expand-stroke-bold {
  0%, 100% { stroke-width: 2.3; }
  50%      { stroke-width: 4.2; }
}
.cat-row-expand.has-k-descendant[aria-expanded="false"] {
  animation: cat-expand-campaign-fade 3.4s ease-in-out infinite;
  /* En gren som fälls ihop på nytt (eller blir synlig för första gången
     när sin förälder fälls ut) ska INTE starta om sin puls från 0% —
     den ska hamna i FAS med resten av panelens redan pågående pulser.
     gardsbutik-nav.js (syncPulseStart) sätter --anim-delay till en
     negativ fördröjning som motsvarar hur långt in i den delade 3,4s-
     cykeln panelen redan är. Orörda grenar får 0s (standardvärdet). */
  animation-delay: var(--anim-delay, 0s);
}
.cat-row-expand.has-k-descendant[aria-expanded="false"] svg {
  animation: cat-expand-stroke-bold 3.4s ease-in-out infinite;
  animation-delay: var(--anim-delay, 0s); /* samma synk-mekanism som fejden ovan */
}

/* "Visa Kampanjkategorier" / "Visa Grundmeny" — samma bakgrund i båda
   lägena (ska kännas som ETT jämbördigt val, inte en handling+ångra),
   ett speglat pilpar och en FAST K-badge bara i Kampanjkategorier-läget
   som förklarar vad knappen gör. Klick fäller ut (gardsbutik-nav.js)
   varje gren som har has-k-descendant i ett enda klick. */
.cat-list-toggle-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 2px 2px 8px; padding: 9px 10px;
  border: none; border-radius: 9px; background: var(--sand); cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--forest);
}
.cat-list-toggle-btn:hover { background: #e4decb; }
.cat-list-toggle-btn svg { flex-shrink: 0; }
.cat-list-toggle-btn .cat-k-badge--static { margin-left: auto; }

.shop-search-wrap { position: relative; flex: 1 1 260px; min-width: 0; }
.shop-search { display: flex; align-items: center; gap: 4px; width: 100%; height: 46px; padding: 0 8px 0 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); }
.shop-search input { border: none; outline: none; flex: 1; min-width: 0; font-family: 'Public Sans', sans-serif; font-size: 14px; background: transparent; color: var(--ink); }
.shop-search input::placeholder { color: var(--ink-soft); }
.search-icon-btn { all: unset; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: var(--ink-soft); cursor: pointer; flex-shrink: 0; }
.search-icon-btn:hover { background: var(--sand); color: var(--ink); }

.search-panel {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 65;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 36px rgba(43,38,32,.14); padding: 8px; max-height: 320px; overflow-y: auto;
}
.search-panel--open { display: block; }
.search-result-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; }
.search-result-row:hover { background: var(--sand); }
.search-result-row strong { font-weight: 700; color: var(--terracotta-dark); white-space: nowrap; }
.search-empty { padding: 10px 12px; font-size: 13px; color: var(--ink-soft); }
/* Kampanjmärkning på sökträffar (bara på kampanj.php, se gardsbutik-nav.js:
   data-mark-campaign) — samma guldton som kampanjbadgen i huvudnavet
   (.campaign-badge-ring) istället för rea-korttaggens gula (--gold är
   samma variabel, bara en annan form: liten pill framför produktnamnet
   istället för en hörntagg på ett kort). */
.search-result-campaign-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; margin-right: 8px;
  border-radius: 5px; background: var(--gold); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1; vertical-align: middle;
}

/* Ikonraden under toppraden — toppnivåkategorier (gardsbutik.php) eller
   "Tillbaka" + aktuell kategoris underkategorier (gardsbutik-kategori.php/
   produkt-detalj.php). Varje ikon är en vanlig länk, ingen JS behövs för
   att avgöra vad som visas — gardsbutik-nav.php bygger rätt markup
   server-sidan utifrån $activeCategoryId. */
.cat-icon-row { display: flex; gap: 22px; overflow-x: auto; padding: 18px var(--edge-pad) 6px; min-height: 98px; }
.cat-icon { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: inherit; flex-shrink: 0; width: 72px; text-align: center; }
.cat-icon-circle { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--card); display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); color: var(--forest); transition: background .15s ease, border-color .15s ease, color .15s ease; }
.cat-icon span { font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.cat-icon:hover .cat-icon-circle { border-color: var(--forest); }
/* Ikonradens lägen (se gardsbutik-nav.php och skiss-kategori-stegning-v2.html,
   Johans godkända riktning 2026-10-18) — INTE längre tre färgnyanser och en
   separat "Tillbaka"-ikon (det gamla upplägget, borttaget): --current (tänd
   mörkgrön, inte klickbar — renderas som <span> inte <a>, se $navHasProduct)
   har ingen badge alls — frånvaron av badge ÄR signalen "du är redan här".
   --passed (redan besökt i vägen, klickbar för att hoppa dit igen) och den
   odekorerade --available (nästa möjliga steg) ser annars likadana ut (vit/
   outline cirkel) och skiljs bara åt av en liten badge i hörnet, se
   .cat-icon-badge nedan — ingen "Tillbaka"-ikon behövs längre eftersom en
   "−"-badgad ikon redan ger exakt samma destination. */
.cat-icon--current { cursor: default; }
.cat-icon--current .cat-icon-circle { background: var(--forest); border-color: var(--forest); color: #fff; }
.cat-icon--current span:not(.cat-icon-circle) { font-weight: 700; }
/* Liten rund badge i hörnet av ikoncirkeln — SAMMA mönster som
   .cart-count-badge på Kundvagn-länken i menyn (se ovan), bara med ett
   −/+-tecken istället för ett antal. En kulör (terracotta) för båda — inte
   rött/grönt: dels betyder rött/grönt redan "dåligt/bra" på resten av
   sajten och en passerad kategori är inget fel, dels är rött/grönt det
   färgpar som är svårast att skilja åt vid röd-grön färgblindhet (den
   vanligaste typen). "−" (redan passerad) är en tunn outline-variant av
   samma terracotta, "+" (inte öppnad än) är fylld — riktningen läses alltså
   på tecknet, inte på kulören. */
.cat-icon-badge {
  position: absolute; top: -5px; right: -3px; min-width: 19px; height: 19px; padding: 0 2px;
  border-radius: 999px; background: var(--terracotta); color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid #fff;
}
.cat-icon--passed .cat-icon-badge { background: #fff; color: var(--terracotta); border-color: var(--terracotta); }

@media (max-width: 900px) {
  .cat-panel { left: 20px; width: calc(100vw - 40px); max-width: calc(100vw - 40px); }
}

@media (max-width: 900px) {
  .nav { padding: 0 20px; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 49;
    background: var(--cream); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  /* BUGFIX 2026-10-16 (Johans återkoppling från driftsättningen): 480px
     räckte inte längre när alla menyval är på, kampanjpulsen är aktiv
     OCH den inloggade kundens egen dropdown (Mina sidor/Logga ut) är
     utfälld i samma meny — då klipptes "Logga ut" bort av overflow:hidden
     eftersom innehållet (uppmätt till ~500px i det läget) var högre än
     taket. Höjt med god marginal, och overflow-y:auto som ett sista skydd
     ifall en ännu fullare meny (fler sektioner påslagna) skulle dyka upp
     i framtiden — klipper då aldrig längre, skrollar istället. */
  .nav-links--open { max-height: min(640px, calc(100vh - 70px)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .nav-link { width: 100%; padding: 14px 20px; border-radius: 0; border-bottom: 1px solid var(--line); }

  /* I den utfällda mobilmenyn är raden redan full bredd, så en ensam liten
     ikon-cirkel skulle se malplacerad ut — visa ikon + text sida vid sida
     istället, som alla andra menyrader. */
  .nav-link--icon {
    display: flex; justify-content: flex-start; align-items: center; gap: 10px;
    width: 100%; height: auto;
  }
  .nav-link--icon .nav-link-text {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap;
  }

  /* "Gårdsbutik"-länkens blixtikon (kampanj aktiv, inte i butiken än) —
     bara synlig här i den utfällda mobilmenyn, framför texten, samma
     "ikon + text sida vid sida"-mönster som .nav-link--icon ovan. På
     desktop räcker bakgrundspulsen ensam, ingen ikon eller ring behövs
     (se bugfixen vid .nav-campaign-icon-wrap ovan — båda döljs som
     standard och visas bara här). */
  .nav-link--campaign-pulse .nav-campaign-icon { display: flex; }
  .nav-link--campaign-pulse .nav-campaign-icon-wrap { display: inline-flex; }
  .nav-link--campaign-pulse { display: flex; align-items: center; gap: 8px; }

  /* Inloggad kund i den utfällda mobilmenyn: ikonen pulserar fortfarande
     (.account-icon-ring::after ovan sitter på en fast storlek oberoende av
     radens bredd, se kommentaren vid den), men menyn ("Mina sidor"/"Logga
     ut") faller ut INUTI raden istället för att flyta ovanpå som på
     desktop (Johans återkoppling: "klick på raden fäller ut ... under,
     istället för en flytande dropdown") — samma DOM/JS-växling
     (.account-menu-dropdown--open), bara annan positionering. */
  .account-menu-dropdown {
    position: static; width: 100%; box-shadow: none; border: none; border-radius: 0;
    background: var(--sand); padding: 0;
  }
  .account-menu-dropdown-item { padding: 12px 20px 12px 44px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .account-menu-dropdown-item:last-child { border-bottom: none; }
  /* Radernas egen border-bottom skiljer redan raderna åt här — den extra
     avdelaren (desktopdropdownens .account-menu-dropdown-divider) skulle
     bara bli en andra, överflödig linje ovanpå den. */
  .account-menu-dropdown-divider { display: none; }

  /* Notisen centrerad nedtill på mobil istället för uppe i högra hörnet
     (för smalt för en fast bredd där på små skärmar). */
  .account-toast { top: auto; bottom: 20px; left: 20px; right: 20px; text-align: center; }
}

@media (max-width: 768px) {
  .hero-inner, .split, .page-head, .grid-2, .grid-3, .detail-back, .detail-head, .detail-image-wrap, .detail-layout, .boende-group-heading, .boende-group-description, .om-garden-sections, .shop-top-row, .cat-icon-row, .shop-banner, .shop-carousel-wrap, .shop-block-gallery {
    padding-left: 20px; padding-right: 20px;
  }
  /* Max två kolumner i bildgalleriet på smala skärmar, oavsett antal
     bilder — tre eller fler kolumner blir för smalt på mobil. */
  .shop-block-gallery, .shop-block-gallery--3, .shop-block-gallery--5, .shop-block-gallery--6 { grid-template-columns: repeat(2, 1fr); }
  /* Mindre pil-knappar i karusellerna på mobil — .shop-carousel-wrap:s
     egen marginal krymper till 20px ovan, så en 40px-pil skulle annars
     sticka in för långt över första/sista kortet. */
  .shop-carousel-arrow { width: 32px; height: 32px; font-size: 16px; }
  .shop-carousel-arrow--prev { left: 2px; }
  .shop-carousel-arrow--next { right: 2px; }
  .cat-panel { left: 20px; width: calc(100vw - 40px); max-width: calc(100vw - 40px); }
  .hero { min-height: 440px; }
  .hero-inner { padding-top: 40px; padding-bottom: 40px; max-width: none; }

  .split { flex-direction: column; padding-top: 48px; padding-bottom: 48px; gap: 28px; }
  .split-media { width: 100%; height: 220px; }

  .page-head { padding-top: 40px; }

  .grid-2 { flex-direction: column; padding-top: 0; padding-bottom: 48px; }

  /* På smala skärmar radbryter tjänste-/produktkorten ändå till en enda
     kolumn — då ska de fylla hela bredden precis som boendekorten
     (.grid-2) gör, istället för att stanna vid sin desktop-maxbredd och
     lämna tomt utrymme till höger. */
  .grid-3 { grid-template-columns: 1fr; padding-bottom: 48px; }

  .detail-layout { flex-direction: column; padding-top: 32px; padding-bottom: 48px; gap: 32px; }
  .detail-layout--snug { padding-top: 0; }
  /* .detail-side har align-self:flex-start på desktop (se raden ovan i
     filen) för att HÖJDEN inte ska sträckas upp till den högre
     beskrivnings-/bildkolumnens höjd — rutan ska bara vara så hög som sitt
     eget innehåll, fäst mot toppen. Men i .detail-layouts kolumnläge här
     på mobil blir korsaxeln vågrät istället för lodrät, så samma
     align-self:flex-start krymper av misstag köp-rutans BREDD till bara
     sitt innehålls egen bredd (”Lägg i kundvagn”-knappens textbredd)
     istället för att fylla hela raden som bilden ovanför gör — exakt det
     Johan påpekade i sin skärmdump. align-self:stretch här återställer
     full bredd på mobil utan att påverka desktop-beteendet ovan alls. */
  .detail-side { align-self: stretch; }
  .detail-calendars { flex-direction: column; gap: 16px; }
  .gallery-main { height: 240px; }
  .gallery-thumb { width: 72px; height: 56px; }
  .lightbox-image { height: 260px; }
  .lightbox-controls { gap: 12px; }

  .footer { padding: 40px 20px; }
  .footer-inner { flex-direction: column; gap: 32px; margin-top: 40px; }
  .footer-links { flex-direction: column; gap: 32px; }

  .card-pad { padding: 22px; }
  .modal { padding: 24px; }

  /* Extra luft åt kalender-widgeten i från/till-fälten (bokningsmodalen,
     tjänsteförfrågan, adminbokning) så den aldrig behöver sticka ut. */
  input[type="date"] { padding-left: 10px; padding-right: 10px; font-size: 14px; }
}

/* ---------------------------------------------------------------------- */
/* Adminpanel                                                              */
/* ---------------------------------------------------------------------- */

/* Administrationen ska kännas som ett eget administrationsverktyg, inte en
   förlängning av den publika sajten — Johan ville därför byta ut sajtens
   varumärkestypsnitt (Fraunces/Public Sans, inlästa som webbfonter) mot
   samma systemtypsnitt som den godkända HTML-skissen använde, innan
   driftsättning. .admin-body sätts på <body> av både
   partials/admin-layout-start.php (alla inloggade adminsidor) och
   login.php. Formulärelement (input/textarea/select/button) ärver inte
   font-family från sina förfäder som standard i webbläsare, så de — och de
   övriga delade komponentklasser som annars hårdkodar Fraunces/Public
   Sans (delade med den publika sajten: rubriker, loggan, knappar, fält,
   datumväljaren, kalenderns klickbara dagar, lightboxens knappar) —
   tvingas explicit till font-family:inherit här så att de också byter till
   systemtypsnittet inom adminpanelen, utan att röra den publika sajtens
   egna typsnitt. */
.admin-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.admin-body h1, .admin-body h2, .admin-body h3, .admin-body h4,
.admin-body input, .admin-body textarea, .admin-body select, .admin-body button,
.admin-body .logo-word, .admin-body .btn-primary, .admin-body .btn-outline,
.admin-body .input, .admin-body .date-display, .admin-body .calendar-cell--pick,
.admin-body .lightbox-btn {
  font-family: inherit;
}

.admin-login-shell {
  max-width: 380px; margin: 0 auto; padding: 96px 24px;
}

/* Panelen hålls numera ihop av en vänstermeny (sidebar) som spänner över
   HELA fönsterhöjden (från y=0) precis som i den godkända skissen — ingen
   ljus topplist ovanför den längre. .admin-main är kolumnen till höger om
   menyn: en egen topbar (hamburgare/titel till vänster, admin-namn/utloggning
   till höger) följt av .admin-shell, innehållsytan — varje sida sätter sin
   egen max-width via $shellMaxWidth (se partials/admin-layout-start.php)
   istället för att centrera sig själv.

   Alla mått/färger nedan är avlästa direkt ur den godkända HTML-skissen
   (admin-redesign-skiss.html) — inte uppskattade — efter att Johan visade
   att det fortfarande skilde sig åt (bredare panel, flata menyrader utan
   rundade hörn, en seriftypsnitt-logga, ljusare "Administration"-undertext,
   vit topbar i stället för samma krämfärg som sidan, och på mobil: panelen
   ska täcka ÄVEN topbaren helt när den är öppen, inte ligga under den). */
.admin-layout { display: flex; align-items: stretch; min-height: 100vh; }
.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Mörk sidopanel (var(--forest-dark)) i stället för samma ljusa yta som
   innehållet — det var det som gjorde att admin kändes som "ett till
   formulär" snarare än ett administrationsverktyg i den godkända skissen.
   Ljus text/ikoner på den mörka ytan, guldkantad aktiv rad. Panelen är
   sticky (inte scroll-with-page) så den syns oavsett hur långt man skrollat
   i innehållet. Bredd/padding/radsavstånd matchar nu skissens .sidebar/
   .nav-item exakt (252px, flata rader utan border-radius, 22px sidopadding
   på varje rad istället för en padding på hela panelen). */
.admin-sidebar {
  width: 252px; flex-shrink: 0; box-sizing: border-box;
  padding: 20px 0 30px; display: flex; flex-direction: column;
  min-height: 100vh;
  position: sticky; top: 0; align-self: flex-start;
  background: var(--forest-dark); color: #EFE9DA;
}
.admin-sidebar-brand {
  display: block; font-family: Georgia, 'Times New Roman', serif; font-size: 19px; font-weight: 600;
  color: #fff; text-decoration: none; padding: 4px 22px 20px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.admin-sidebar-brand span {
  display: block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 11px; font-weight: 400; letter-spacing: .04em; color: var(--forest-light); margin-top: 2px;
}
.admin-sidebar-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(239, 233, 218, .45); padding: 16px 22px 6px;
}
.admin-sidebar-group-label:first-of-type { padding-top: 4px; }
.admin-sidebar-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 22px;
  font-size: 14px; font-weight: 500; color: #EFE9DA; text-decoration: none; position: relative;
  border-left: 3px solid transparent;
}
.admin-sidebar-link svg { width: 17px; height: 17px; flex-shrink: 0; color: inherit; opacity: .85; }
.admin-sidebar-link:hover { background: rgba(255, 255, 255, .06); }
.admin-sidebar-link--active {
  background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; border-left-color: var(--gold);
}
.admin-sidebar-link--active:hover { background: rgba(255, 255, 255, .1); }
.admin-sidebar-link--active svg { opacity: 1; }
.admin-sidebar-badge {
  margin-left: auto; background: var(--terracotta); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
}
.admin-sidebar-link--active .admin-sidebar-badge { background: #fff; color: var(--forest-dark); }

/* Adminmenyns kampanj-notis (Johans återkoppling 2026-10-16, "notifiering i
   navigeringen som berättar att kampanjmotorn är igång") — en liten
   pulserande blixt vid "Kampanj"-menyvalet, synlig bara så länge
   Campaign::isActive() är sant (se admin-layout-start.php). Samma
   ::after-ringteknik och nav-gold-pulse-ring-animation som redan används på
   kampanjsidans "Kategorier"-knapp/gårdsbutikens nav — ett redan etablerat,
   Johan-godkänt mönster för "kampanjen är aktiv just nu". */
.admin-sidebar-pulse {
  margin-left: auto; position: relative; display: flex; align-items: center;
  justify-content: center; width: 16px; height: 16px; flex-shrink: 0; color: var(--gold);
}
.admin-sidebar-pulse svg { width: 14px; height: 14px; opacity: 1; }
.admin-sidebar-pulse::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid var(--gold); animation: nav-gold-pulse-ring 2.2s ease-out infinite;
}
.admin-sidebar-link--active .admin-sidebar-pulse { color: #fff; }
.admin-sidebar-link--active .admin-sidebar-pulse::after { border-color: #fff; }

/* Topbaren ligger inne i .admin-main, bredvid panelen — inte som en egen
   full bredd-rad ovanför allt. Vit (var(--card)), inte samma krämfärg som
   sidans bakgrund, annars syns den knappt mot innehållet — exakt som
   skissens .topbar. */
.admin-topbar {
  padding: 16px 36px; display: flex; align-items: center;
  justify-content: space-between; border-bottom: 1px solid var(--line);
  background: var(--card); position: sticky; top: 0; z-index: 40; flex-shrink: 0;
}
.admin-topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.admin-topbar-title {
  font-size: 20px; font-weight: 400; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-topbar-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.admin-topbar-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.admin-shell { flex: 1; min-width: 0; margin: 0 auto; padding: 40px 24px 96px; width: 100%; box-sizing: border-box; }

/* Hamburgermeny på mobil — samma ikon/mekanik (span x3 som morfar till ett
   kryss) som webbens .nav-toggle, här styrd av admin-nav.js istället för
   nav.js eftersom adminmenyn är en fast sidopanel snarare än en vågrät rad. */
.admin-nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0;
}
.admin-nav-toggle span {
  display: block; width: 20px; height: 2px; background: var(--ink); margin: 0 auto;
  transition: transform .2s ease, opacity .2s ease;
}
.admin-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.admin-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.admin-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.admin-sidebar-overlay { display: none; }

@media (max-width: 900px) {
  .admin-topbar { padding: 14px 18px; }
  .admin-topbar-admin-name { display: none; }
  .admin-nav-toggle { display: flex; }
  .admin-shell { padding: 24px 18px 70px; }

  /* Sidopanelen ligger off-canvas och glider in över HELA skärmen
     (transform), från y:0 — precis som skissens .sidebar på mobil. Den
     täcker alltså även topbaren helt medan den är öppen (Johan påpekade att
     en tidigare version lät topbaren ligga kvar synlig ovanför panelen,
     vilket inte stämde med skissen) — det går att stänga menyn genom att
     klicka på overlayen eller välja ett menyval, precis som i skissen. */
  .admin-sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; z-index: 90;
    width: 268px; min-height: 0;
    box-shadow: none;
    transform: translateX(-100%); transition: transform .22s ease;
    overflow-y: auto;
  }
  .admin-sidebar--open { transform: translateX(0); box-shadow: 0 0 46px rgba(0,0,0,.35); }
  .admin-sidebar-link { white-space: nowrap; }

  /* Overlayen ligger direkt i <body> (se admin-layout-start.php) och täcker
     hela viewporten så den alltid går att klicka oavsett sidans
     skrollposition. */
  .admin-sidebar-overlay {
    display: block; position: fixed; inset: 0; z-index: 85; background: rgba(38,32,24,.45);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  .admin-sidebar-overlay--open { opacity: 1; pointer-events: auto; }
}

.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px; margin-bottom: 36px;
}
.stat-tile { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.stat-tile-value { font-size: 30px; font-weight: 600; color: var(--forest-dark); }
.stat-tile-label { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

/* Startdashboardens övriga byggstenar (Uppdatering 2026-10-12 (9)). */
.dash-two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; margin-top: 20px; }
@media (max-width: 980px) { .dash-two-col { grid-template-columns: 1fr; } }

.dash-timeline-row { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.dash-timeline-row:last-child { border-bottom: none; }
.dash-timeline-icon {
  width: 30px; height: 30px; border-radius: 999px; background: var(--forest-light); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.dash-timeline-icon svg { width: 15px; height: 15px; color: var(--forest-dark); }
.dash-timeline-icon--order { background: var(--sand); }
.dash-timeline-date { font-size: 11.5px; color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.dash-timeline-what { font-size: 13.5px; margin-top: 1px; }

.dash-mini-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-mini-stat { background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.dash-mini-stat-value { font-size: 22px; font-weight: 700; color: var(--forest-dark); }
.dash-mini-stat-label { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

.dash-shortcut-btn {
  display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink);
  text-decoration: none;
}
.dash-shortcut-btn:hover { border-color: var(--forest); }
.dash-shortcut-btn svg { width: 15px; height: 15px; }

.dash-bar-row { display: grid; grid-template-columns: 160px 1fr 44px; align-items: center; gap: 12px; margin-bottom: 13px; font-size: 13px; }
.dash-bar-row:last-child { margin-bottom: 0; }
.dash-bar-label { font-weight: 600; }
.dash-bar-track { background: var(--cream); border-radius: 999px; height: 14px; overflow: hidden; }
.dash-bar-fill { background: var(--forest-dark); height: 100%; border-radius: 999px; }
.dash-bar-value { color: var(--ink-soft); font-weight: 700; text-align: right; }

/* Besöksstatistik (Paket E) — enkelt stapeldiagram för sidvisningar per
   dag. Ett enda mått (antal sidvisningar), alltid en och samma kulör
   (--forest) — ingen legend behövs för en enda serie, se dataviz-regeln
   "färg bär bara betydelse när den skiljer kategorier åt". Tunna,
   rundade stapeltoppar + ett litet mellanrum mellan dem (samma princip
   som --forest-ytorna i övrigt), axeln är medvetet tonad ner
   (ink-soft, litet typsnitt) så siffrorna/staplarna själva syns bäst. */
.pageview-chart {
  display: flex; align-items: flex-end; gap: 3px; height: 180px; margin-top: 18px;
  border-bottom: 1px solid var(--line); padding-bottom: 2px; position: relative;
}
.pageview-bar-col { flex: 1 1 auto; min-width: 2px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; cursor: default; }
.pageview-bar {
  width: 100%; max-width: 22px; background: var(--forest); border-radius: 4px 4px 0 0;
  min-height: 3px; transition: background-color .12s ease;
}
.pageview-bar-col:hover .pageview-bar { background: var(--forest-dark); }
.pageview-bar-axis-label { font-size: 10.5px; color: var(--ink-soft); margin-top: 6px; white-space: nowrap; }
.pageview-tooltip {
  position: absolute; z-index: 5; background: var(--ink); color: var(--cream); font-size: 12px;
  font-weight: 600; padding: 6px 10px; border-radius: 8px; pointer-events: none;
  transform: translate(-50%, -100%); white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.pageview-tooltip[hidden] { display: none; }

.section-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 22px; border-bottom: 1px solid var(--line);
}
.section-row:last-child { border-bottom: none; }
.section-row-name { font-size: 15px; font-weight: 600; }
.section-pill {
  font-size: 12px; font-weight: 700; padding: 5px 13px; border-radius: 999px;
  letter-spacing: .02em;
}
.section-pill--on { background: #E7EFDE; color: var(--forest-dark); }
.section-pill--off { background: #F0E3D3; color: var(--terracotta-dark); }
/* Tredje/fjärde läge för Lagernivåer (admin/lagerniva.php): "slut i lager"
   behöver synas tydligare än "lågt lager" (--off ovan, samma ljusa
   terrakotta som redan användes där) — fylld, stark terrakotta + vit text,
   samma färg som adminmenyns röda badge för "nya"-antal
   (.admin-sidebar-badge). "untracked" (ingen beställningspunkt satt) är
   medvetet INGEN pill alls, bara ljus text i tabellen — en produkt som
   inte bevakas ska inte se ut som ett statusläge. */
.section-pill--danger { background: var(--terracotta); color: #fff; }

/* Liten rund "ring" som visar antal varor i kundvagnen, ovanpå Kundvagn-länken i menyn.
   Tucked in mot pillens eget hörn (inte längre ut i mellanrummet mot
   språkväljaren) — se den justerade mobilversionen nedan för den utfällda
   menyn, där länken är full bredd och badgen istället ska ligga inne i
   raden, inte utanför dess högerkant. */
.cart-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--terracotta); color: #fff; font-size: 11px; font-weight: 700;
  position: absolute; top: -7px; right: -5px; line-height: 1;
}
@media (max-width: 900px) {
  /* I den utfällda mobilmenyn ska badgen ligga i löpande text direkt efter
     "Kundvagn", inte flyta fristående ute vid radens högerkant (såg
     konstigt ut) — position: static gör att den bara flödar med texten. */
  .cart-count-badge { position: static; display: inline-flex; margin-left: 8px; vertical-align: middle; }
}

.btn-toggle {
  font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px;
  border-radius: 999px; border: 1.5px solid var(--line); background: #fff;
  color: var(--ink); cursor: pointer;
}
.btn-toggle:hover { background: var(--sand); }
/* Vald pill i variantgeneratorns flerval (samma pris?/bildhantering?/
   antal dimensioner — se public/assets/js/variant-wizard.js), samma
   mönster som knappen ovan men i terrakotta för att synas som "vald". */
.btn-toggle--active { background: var(--terracotta-dark); border-color: var(--terracotta-dark); color: #fff; }
.btn-toggle--active:hover { background: var(--terracotta-dark); }

/* Primär åtgärd bland .btn-toggle-syskon i en rad (t.ex. "+ Lägg till
   produkt" bredvid Avpublicera/Redigera på kategorisidan) — samma gröna
   fyllning som .btn-primary, men i .btn-toggles 34px-höjd istället för att
   (som tidigare .btn-sm.primary) stå i en egen, mindre storlek. */
.btn-toggle--primary { background: var(--forest); color: #fff; border-color: var(--forest); }
.btn-toggle--primary:hover { background: var(--forest-dark); border-color: var(--forest-dark); }

/* Kompakt .btn-toggle för radtäta sammanhang (publicera/avpublicera-knappen
   inne i varje variantrad i produkt-redigera.php, se renderVariantRow() i
   variant-wizard.js) — tidigare en osynlig inline style="font-size:11px;
   padding:5px 10px" på samma .btn-toggle-klass, vilket gjorde att "samma"
   knapp renderades i två olika storlekar utan att det syntes i koden
   (Johans observation: Avpublicera-knappen fanns i 109×34 på produktnivå
   men bara 87×25 i variantraderna). Nu en egen, namngiven modifier istället
   — storleken är avsiktlig, inte en bieffekt. */
.btn-toggle--sm { font-size: 11px; padding: 5px 10px; }

/* "Logga ut" i konto-nav.php:s flik-rad (Mina sidor) — .btn-toggle är
   annars inline (en <a>), så display:inline-flex krävs för att
   ikonen+texten ska hamna bredvid varandra. margin-left:auto trycker
   knappen hela vägen åt höger i raden, medan flikarna (Mina
   beställningar/bokningar/inställningar) hålls kvar till vänster (Johans
   återkoppling 2026-10-15 (10)). */
.account-logout-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; text-decoration: none; }

/* Dimensionsväljaren i "Bilder för varianter" → "Bilder via dimension"
   (Uppdatering 2026-10-14: "samköra"-uppföljningen, Finding 2) — en klickbar
   chip per dimension (t.ex. "Färg", "Storlek"), bara ett visningsval,
   sparar ingenting. Egen stil istället för .btn-toggle eftersom chippen
   har en andra rad (antal värden) som inte finns i någon annan knapp. */
.dim-chip {
  border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 10px 16px;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink);
  display: flex; flex-direction: column; gap: 2px; text-align: left;
}
.dim-chip small { font-weight: 400; color: var(--ink-soft); font-size: 11px; }
.dim-chip--active { border-color: var(--forest); background: var(--forest-light); }

/* ------------------------------------------------------------------ */
/* Reapris kr/% + kompakt variantradlayout                             */
/* (Johans variantpris/rea-skiss, 2026-10-14 — se money-field.js och   */
/* variant-wizard.js:s renderVariantRow()/renderVariantRow2() för var  */
/* de här klasserna faktiskt används.)                                 */
/* ------------------------------------------------------------------ */

/* Mindre fält för radtäta sammanhang (variantlistan) — samma idé som
   .btn-outline--sm/--xs redan har för knappar, nu för inputs. Johans
   återkoppling: "fälten behöver inte vara så stora heller". */
.input--compact { font-size: 13px; padding: 7px 10px; border-radius: 8px; }
.input.has-error { border-color: var(--terracotta); background: #FDF1EF; }
input[type="date"].input--compact { padding: 6px 8px; line-height: 1; }

/* Sammanhängande kr/%-väljare — en EN visuell enhet, inte en knapprad
   bredvid ett separat fält (Johans återkoppling på första utkastet:
   "fälten går i varandra"). */
.money-field {
  display: inline-flex; align-items: stretch; border: 1.5px solid var(--line);
  border-radius: 10px; overflow: hidden; background: #fff;
}
.money-field.compact { border-radius: 8px; }
.money-field .mode-switch { display: flex; }
.money-field .mode-switch button {
  font-family: inherit; font-size: 12px; font-weight: 700; padding: 0 11px; border: none;
  background: var(--sand); color: var(--ink-soft); cursor: pointer; border-right: 1.5px solid var(--line);
}
.money-field.compact .mode-switch button { font-size: 11px; padding: 0 8px; }
.money-field .mode-switch button.active { background: var(--terracotta-dark); color: #fff; border-color: var(--terracotta-dark); }
.money-field input { border: none; outline: none; padding: 11px 10px; font-size: 14px; width: 84px; font-family: inherit; }
.money-field.compact input { padding: 7px 8px; font-size: 13px; width: 64px; }
.money-field input.has-error { background: #FDF1EF; color: var(--terracotta-dark); }
.money-field:focus-within { border-color: var(--terracotta); }
.money-field-error { font-size: 11px; color: var(--terracotta-dark); margin-top: 4px; display: none; }
.money-field-error.show { display: block; }
.money-field-hint { font-size: 11px; color: var(--ink-soft); margin-top: 5px; }
.money-field-hint strong { color: var(--forest-dark); }

/* Variantblock: identitetsrad (etikett/artikelnr/status/ta bort) + en
   egen rad för handel (bild/pris/rea/lager) — ersätter den tidigare EN
   långa raden med allt (Johans återkoppling: för mycket på en gång). */
.vr-block { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; background: #fff; overflow: hidden; }
.vr-block.has-sale .vr-row2 { background: #FFF9F4; }
.vr-block.needs-price .vr-row2 { background: #FDF1EF; }
.vr-price-warning { color: var(--terracotta-dark); font-size: 13px; font-weight: 600; }
.vr-row1 {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--sand);
  border-bottom: 1px solid var(--line); font-size: 13px; flex-wrap: wrap;
}
.vr-row1 .vr-combo { font-weight: 600; min-width: 110px; }
.vr-row1 .vr-combo .en { font-weight: 400; color: var(--ink-soft); font-size: 11px; }
.vr-row1 .vr-artnr { flex: 1; max-width: 160px; min-width: 110px; }
.vr-row1 .vr-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vr-row2 { display: flex; align-items: center; gap: 18px; padding: 12px 14px; flex-wrap: wrap; }
.vr-thumb { width: 48px; height: 48px; border-radius: 8px; background: var(--sand); flex-shrink: 0; border: 1px solid var(--line); object-fit: cover; }
.vr-price-slot { position: relative; min-width: 120px; }
.vr-price-display { font-size: 15px; font-weight: 600; }
.vr-price-display .muted { font-size: 12px; color: var(--ink-soft); font-weight: 400; font-style: italic; }
.vr-price-display .old { text-decoration: line-through; color: var(--ink-soft); font-size: 13px; font-weight: 400; }
.vr-price-display .new { color: var(--terracotta-dark); }
.vr-edit-icon { position: absolute; top: -8px; right: -8px; }
.vr-field { display: flex; flex-direction: column; }
.vr-field .label { margin-bottom: 3px; }
.vr-price-panel { display: none; background: var(--cream); border-top: 1px dashed var(--line); padding: 14px; gap: 18px; flex-wrap: wrap; }
.vr-price-panel.open { display: flex; }
.vr-price-panel .col { display: flex; flex-direction: column; gap: 6px; min-width: 170px; }
.vr-price-panel .col-title { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--ink-soft); letter-spacing: .03em; }

/* Litet, rundat ikon-knappsystem för radtäta sammanhang (ändra/ta bort
   på variantraden) — samma 36px/18px-mått som .btn-icon-remove
   (kundvagnen) men en generisk klass så den även kan bära andra ikoner
   (pennan för "ändra pris/rea"), inte bara soptunnan. */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--ink-soft);
  cursor: pointer; padding: 0; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-icon svg { width: 15px; height: 15px; }
.btn-icon:hover { background: #F0E3D3; border-color: var(--terracotta-dark); color: var(--terracotta-dark); }

/* Rea-märkning — rundad hörn-tagg på köp-rutan (syns alltid när rean är
   aktiv, oavsett om bilden också har sin egen badge — Johans
   återkoppling, variantpris/rea-skissen) + motsvarande badge i hörnet av
   produkt-/variantbilden. Samma rundade piller-språk som resten av
   sajten (ingen diagonal ribbon — Johans och Claudes gemensamma val). */
/* Förstorad 2026-10-14 (Johans fråga vid köpknappen: "vad tycker du?") —
   från 11px/6px 14px till 13px/8px 18px, dels för att göra rean tydligare
   vid köpknappen, dels för att den nu kan visa en längre text ("REA 30%",
   se product.sale_badge_pct i src/translations.php) istället för bara
   "REA" och behöver lite mer plats. .image-sale-badge (på själva bilden)
   är oförändrad — den satt redan bra och konkurrerar inte med köpknappen
   om uppmärksamhet på samma sätt. */
.corner-tag {
  position: absolute; top: -10px; right: 18px; background: var(--terracotta-dark); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .03em; padding: 8px 18px; border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.18); z-index: 2;
}
/* Gult läge av hörn-taggen (Johans skiss 2026-10-15, godkänd "nu är det
   rätt = så vill jag ha det!"): en variantprodukt med spannpris där minst
   en variant har rea, men exakt vilken/vilken rabatt syns inte förrän
   kunden öppnat produkten och valt variant — därför en annan färg än den
   röda/bestämda rean, inte bara samma tagg med annan text. Samma varma
   gul-brun text (#7A5B12) som redan används för "osäker/kräver
   uppmärksamhet" i .warning-box/.input--warning, för att hålla samma
   färgspråk för "osäkert" genom hela adminpanelen och butiken. */
.corner-tag--variant-sale { background: var(--gold); color: #7A5B12; }
.image-sale-badge {
  position: absolute; top: 14px; left: 14px; background: var(--terracotta-dark); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .03em; padding: 6px 14px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18); z-index: 2;
}

/* Kundvagnens radlayout: en liten produktbild + ett +/- stegverktyg för
   antal, istället för ett sifferfält med en separat "Uppdatera"-knapp som
   måste klickas (risk att kunden missar den och lämnar sidan med fel
   antal). En ändring skickas direkt, se cart.js. Formuläret och dess
   riktiga submit-knapp (.cart-qty-update-btn) finns kvar i HTML:en som
   fallback om JavaScript är avstängt — bara JS döljer den (lägger till
   .cart-qty-form--enhanced), så utan JS fungerar sidan exakt som innan. */
.cart-row-thumb {
  width: 72px; height: 72px; border-radius: 10px; object-fit: cover;
  flex-shrink: 0; display: block;
}
.cart-row-thumb-placeholder {
  width: 72px; height: 72px; border-radius: 10px; flex-shrink: 0;
}
/* Kundvagnsradens kolumner, som ett rutnät istället för inline-styles, så
   att "Hämtas på gården"-märkningen alltid hamnar i samma lodräta kolumn
   oavsett hur långt just den radens produktnamn eller pris råkar vara —
   flera sådana rader radar då upp sig rakt under varandra (Johans
   återkoppling). Bilden spänner över både info- och kontrollraden, som i
   den gamla layouten. Döljs/omarrangeras på smala skärmar nedan, se media
   query. */
/* .section-row är display:flex som standard (bild+jämna-ut-innehåll på en
   rad) — kundvagnens rader behöver istället hela sin bredd åt det egna
   rutnätet nedan, så flex-läget kopplas bort här. */
.cart-row { display: block; }
.cart-row-grid {
  display: grid;
  grid-template-columns: 72px 1fr 150px auto;
  grid-template-areas: "thumb product delivery total" "thumb controls controls controls";
  column-gap: 14px;
  row-gap: 10px;
  align-items: center;
}
.cart-row-thumb-cell { grid-area: thumb; align-self: start; }
.cart-row-product-cell { grid-area: product; min-width: 0; }
/* Bilden och namnet går till produktsidan igen (Johans återkoppling) —
   egen länkklass istället för en massa upprepad inline-style, och en
   diskret hover (understrykning på namnet) som enda ledtråd att det går
   att klicka, utan att det ser ut som en vanlig textlänk mitt i raden. */
.cart-row-link { color: inherit; text-decoration: none; display: block; }
.cart-row-name .cart-row-link:hover { text-decoration: underline; }
.cart-row-name { font-weight: 600; margin-bottom: 4px; }
/* Variantens etikett (t.ex. "M / Röd") under produktnamnet — en egen rad,
   diskret, så den inte konkurrerar med namnet men ändå syns tydligt vilken
   kombination raden gäller. */
.cart-row-variant { font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
.cart-row-unit-price { font-size: 13px; color: var(--ink-soft); }
.cart-row-artnr { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.cart-row-delivery-cell { grid-area: delivery; display: flex; align-items: center; }
.cart-row-total-cell { grid-area: total; text-align: right; white-space: nowrap; }
.cart-row-controls-wrap { grid-area: controls; }
.cart-row-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.btn-icon-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink-soft); cursor: pointer; padding: 0;
  font-family: inherit; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-icon-remove svg { width: 18px; height: 18px; }
.btn-icon-remove:hover {
  background: #F0E3D3; border-color: var(--terracotta-dark); color: var(--terracotta-dark);
}
@media (max-width: 600px) {
  /* På smala skärmar är det inte lika viktigt att en kolumn radar upp sig
     — man ser ändå bara en rad i taget — så "Hämtas på gården" får en egen
     rad under namn/pris istället för att konkurrera om bredden. Lite mer
     luft mellan bild och text än på desktop (Johans återkoppling: för
     tätt ihop på mobil). */
  .cart-row-grid {
    grid-template-columns: 56px 1fr auto;
    grid-template-areas: "thumb product total" "thumb delivery delivery" "thumb controls controls";
    column-gap: 20px;
    row-gap: 12px;
  }
}
.cart-qty-stepper {
  display: inline-flex; align-items: center; border: 1.5px solid var(--line);
  border-radius: 999px; overflow: hidden;
}
.cart-qty-btn {
  width: 32px; height: 32px; border: none; background: #fff; color: var(--ink);
  font-size: 16px; font-weight: 600; cursor: pointer; display: flex;
  align-items: center; justify-content: center; line-height: 1; padding: 0;
  font-family: inherit;
}
.cart-qty-btn:hover { background: var(--sand); }
.cart-qty-btn:disabled { color: var(--line); cursor: default; background: #fff; }
.cart-qty-input {
  width: 42px; height: 32px; border: none; border-left: 1.5px solid var(--line);
  border-right: 1.5px solid var(--line); text-align: center; font-size: 14px;
  color: var(--ink); -moz-appearance: textfield; font-family: inherit;
}
.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-qty-msg {
  font-size: 12px; color: var(--terracotta-dark); display: none; margin-top: 2px;
}
.cart-qty-msg--visible { display: block; }
.cart-qty-form--enhanced .cart-qty-update-btn { display: none; }
.cart-row--removing { opacity: .4; pointer-events: none; transition: opacity .15s ease; }

.admin-link { color: var(--forest); font-weight: 600; font-size: 14px; text-decoration: none; }
.admin-link:hover { text-decoration: underline; }

/* "Lägg till ny/skapa ny"-kontrollen ska se ut som en tydlig knapp, inte
   som ett listobjekt bland de befintliga raderna (boende/tjänster/
   produkter/kategorier) — <summary> stylas som .btn-primary, och
   formuläret fälls ut i ett eget kort under knappen när man klickar.
   ">" (direkt barn) istället för ett vanligt ättlingeval — Lagernivåer...
   nej förlåt, "Hantera grupper" på boende.php (2026-10-13) la en egen
   lista av <details class="card card-pad"> INUTI .admin-add-new-body (för
   att visa/redigera/ta bort varje grupp för sig), och ett vanligt
   ättlingeval hade då stylat DERAS <summary>-rader som samma stora gröna
   knapp också — bara direkta barnets summary ska bli knapp. */
.admin-add-new { border: none; background: none; margin-bottom: 28px; }
.admin-add-new > summary {
  display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
  background: var(--forest); color: #fff; font-weight: 600; font-size: 15px;
  padding: 14px 28px; border-radius: 999px;
}
.admin-add-new > summary::-webkit-details-marker { display: none; }
.admin-add-new > summary::before { content: '+ '; }
.admin-add-new > summary:hover { background: var(--forest-dark); }
.admin-add-new-body {
  margin-top: 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 28px;
}

/* Sök-/filterraden ovanför de fyra förfrågningslistorna (bokningar,
   tjänsteförfrågningar, intresseanmälningar, beställningar) — samma
   uppbyggnad överallt, se partials/admin-filter-bar.php. */
.admin-filter-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 20px;
}
.admin-filter-bar .field { display: flex; flex-direction: column; gap: 4px; }
.admin-filter-bar .field--grow { flex: 1; min-width: 180px; }
.admin-filter-bar label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.admin-filter-bar select, .admin-filter-bar input[type="text"] {
  font-family: inherit; font-size: 14px; padding: 9px 12px; border-radius: 8px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
}
.admin-filter-bar .actions { display: flex; gap: 8px; }

/* Sidnumrering under listorna — samma mönster på alla fyra sidor. */
.admin-pagination {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 18px 0 8px; font-size: 13px; color: var(--ink-soft);
}
.admin-pagination a { color: var(--forest); font-weight: 600; text-decoration: none; }
.admin-pagination a:hover { text-decoration: underline; }
.admin-pagination .disabled { color: var(--line); cursor: default; }

/* Avböjande-formuläret som fälls ut under en rad när man klickar "Avböj"
   — mindre variant av .admin-add-new, inline i själva raden istället för
   en egen sektion. Ingen egen margin-top längre (Johans återkoppling,
   Uppdatering 2026-10-14: "samköra"-uppföljningen) — den extra 4px:en
   gjorde att hela knappraden hamnade på olika höjd i förhållande till
   sina syskon (.btn-toggle-knapparna bredvid). */
.admin-decline {}
.admin-decline summary {
  list-style: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff;
  color: var(--ink); display: inline-block;
}
.admin-decline summary::-webkit-details-marker { display: none; }
.admin-decline summary:hover { background: var(--sand); }
.admin-decline-body {
  margin-top: 10px; padding: 14px; background: var(--sand); border-radius: 10px;
  display: flex; flex-direction: column; gap: 8px; min-width: 260px;
}
.admin-decline-body textarea {
  font-family: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink); resize: vertical;
}

/* Kategorier & produkter i delad vy (Paket B, Uppdatering 2026-10-13 (14)) —
   kategoriträd till vänster, vald kategoris produkter till höger, exakt
   enligt den godkända skissens .view#view-shop. Klassnamnen är kopierade
   rakt av från skissens egen CSS (.tree-item/.tree-add/.product-row m.fl.)
   för pixelexakt resultat — enda avvikelsen är .split, som döps om till
   .admin-cat-split eftersom .split redan användes av en helt orelaterad
   startsides-sektion (hero-bilden med text bredvid, se rad ~467) och att
   återanvända namnet hade stulit den stilen härifrån. */
.admin-cat-split { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .admin-cat-split { grid-template-columns: 1fr; } }

/* produkt-redigera.php — samma tvåkolumns-mekanik som .admin-cat-split
   ovan, men jämnt delad (grunduppgifter/bilder till vänster, varianter/
   bildhantering/passar bra med till höger, se kortordningen i PHP:n) i
   stället för en smal sidopanel + bred huvudyta. Kollapsar till en kolumn
   under 980px, så ordningen i koden (vänster-kortens HTML före höger-
   kortens) blir läsordningen på mobil, precis som önskat. */
.admin-product-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .admin-product-split { grid-template-columns: 1fr; } }

.section-title { font-size: 17px; margin-bottom: 14px; }

.tree-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; border-radius: 8px; cursor: pointer; font-size: 13.5px;
}
.tree-item:hover { background: var(--cream); }
.tree-item.active { background: var(--sand); font-weight: 700; }
.tree-item .count { font-size: 11px; color: var(--ink-soft); }
.tree-item.sub { padding-left: 30px; font-size: 13px; }
/* Liten "R"-ring i kategoriträdet — Johans återkoppling 2026-10-15: en
   snabb visuell markering av vilka kategorier som har en pågående rea
   (bara DIREKT tillhörande produkter, ingen uppåtbubbling från
   underkategorier sedan Johans bugfix samma dag — se $categoryHasOwnSale
   i kategorier.php), så man kan klicka sig dit utan att behöva öppna
   varje kategori för att kolla. */
.cat-sale-ring {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; margin-left: 4px;
  background: var(--terracotta-dark); color: #fff; font-size: 9px; font-weight: 700;
  vertical-align: middle;
}

/* .tree-add/.tree-add-details (det gamla inline-<details>-fältet för
   "+ Ny kategori") borttagna 2026-10-18 — ersatta av en vanlig
   .btn-toggle--primary-knapp bredvid rubriken som öppnar en modal, se
   admin/kategorier.php. */

/* "Överordnad kategori"-väljaren (AdminForms::categoryPickerHtml,
   kategorier-admin.js) — en utfällbar panel med .tree-item-rader istället
   för en platt <select>, samma visuella idé som butikens egen
   kategoripanel (public/partials/gardsbutik-nav.php) men byggd som egen,
   mindre adminkomponent eftersom den SÄTTER ett formulärvärde istället för
   att länka vidare. */
.cat-picker { position: relative; }
.cat-picker-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left; cursor: pointer; color: var(--ink);
}
.cat-picker-trigger svg { flex-shrink: 0; color: var(--ink-soft); }
.cat-picker-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 10px;
  padding: 6px; max-height: 260px; overflow-y: auto;
  box-shadow: 0 10px 30px rgba(30, 26, 20, .14);
}
.cat-picker-option {
  width: 100%; border: none; background: none; font-family: inherit; text-align: left;
}
.cat-picker-option[aria-selected="true"] { background: var(--sand); font-weight: 700; }

/* TILLÄGG 2026-10-18 ("+ Ny kategori"-modalen, admin/kategorier.php) — se
   AdminForms::categoryPickerHtml()s $compact-param för varför: modalen har
   redan egen max-height:90vh/overflow-y:auto, så panelens vanliga 260px
   kunde göra att BÅDA scrollade samtidigt på en kortare skärm
   ("dubbelscroll", Johans återkoppling på skissen). Bara modalens egen
   väljare använder den här klassen. */
.cat-picker-panel--compact { max-height: 168px; }

/* BUGFIX 2026-10-15 (2026-10-18, upptäckt vid verifiering mot riktig sida
   efter ovanstående ändring): en position:absolute-panel bidrar INTE till
   förälderns (.modal) auto-höjd — det gäller bara flödande innehåll. Utan
   det här klipper .modal:s egen overflow:auto panelen mitt i (synligt bara
   någon enstaka rad) så fort modalens övriga, flödande innehåll (namnfält +
   knapp) inte redan råkar vara högt nog, eftersom panelen bara "lägger sig
   ovanpå" utan att knuffa ner något. Den tidigare skissen (skiss-
   quickwins-v1.html) undvek buggen av misstag — dess extra förklarande
   skiss-text under väljaren råkade göra modalen tillräckligt hög ändå.
   :has() reserverar istället flödande utrymme (samma höjd som panelens
   maxhöjd) när panelen faktiskt är öppen, så modalen växer med den istället
   för att klippa — samma :has()-teknik som redan används för
   .mode-card:has(input:checked) ovan i filen. */
.cat-picker:has(.cat-picker-panel--compact:not([hidden])) { margin-bottom: 168px; }

.product-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 20px; border-bottom: 1px solid var(--line); font-size: 13.5px; cursor: pointer;
}
.product-row:hover { background: var(--cream); }
.product-row:last-child { border-bottom: none; }
.product-row-arrow { color: var(--ink-soft); margin-left: 12px; opacity: .6; }
.product-thumb { width: 34px; height: 34px; border-radius: 7px; background: var(--sand); margin-right: 12px; flex-shrink: 0; }
.product-main { display: flex; align-items: center; flex: 1; min-width: 0; margin-right: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-price { color: var(--ink-soft); font-size: 12.5px; margin-left: auto; margin-right: 18px; white-space: nowrap; flex-shrink: 0; }

/* Produktradens publiceringspill i den delade vyn — samma namn/färger som
   skissens egna .pill/.pill-on/.pill-off (nära men inte identiska med
   .section-pill, som används på resten av adminpanelens listrader). */
.pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.pill-on { background: var(--forest-light); color: var(--forest-dark); }
.pill-off { background: #F3E4DD; color: var(--terracotta-dark); }
/* "Rea på variant(er)" i produktlistans rader (Johans återkoppling
   2026-10-15, flyttad hit från produkt-redigera.php:s rubrik) — samma
   terrakotta som butikens REA-badge, inte varningsfärgen (.pill-off): det
   här är ingen varning, bara en upplysning om att något är nedsatt. */
.pill-sale { background: var(--terracotta-dark); color: #fff; margin-right: 6px; }

/* .btn-sm (29px, egen stil) fanns tidigare bara här och användes bara av
   "Redigera"/"+ Lägg till produkt" i kategorisidans header-rad — en tredje
   knappstorlek som inte fanns någon annanstans i admin, bredvid den redan
   etablerade .btn-toggle (34px, används på minst åtta andra adminsidor för
   "Markera som.."/"Återställ lösenord" osv) och radens egen
   publicera/avpublicera-toggle. Johan påpekade att raden hade tre olika
   knapphöjder. Ersatt av .btn-toggle/.btn-toggle--primary nedan istället
   för att uppfinna ännu en storlek — se kategorier.php. */

/* Underhållslägets landningssida (Uppdatering 2026-10-16, Johans
   återkoppling) — fristående sida (inte partials/header.php+footer.php, se
   Maintenance::renderLandingPageAndExit()), centrerad kort-layout i samma
   färgpalett/typsnitt som resten av sajten. */
.maintenance-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 32px var(--edge-pad); background: var(--cream);
}
.maintenance-card {
  max-width: 560px; text-align: center; background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; padding: 48px 40px; box-shadow: 0 16px 40px rgba(43, 38, 32, .08);
}
.maintenance-logo { display: flex; flex-direction: column; line-height: 1; margin-bottom: 28px; }
.maintenance-card h1 { font-size: 26px; margin: 0 0 14px; }
.maintenance-card p { font-size: 15px; color: var(--ink-soft); margin: 0; white-space: pre-line; }

/* Adminmenyns underhållslägesvarning (Uppdatering 2026-10-16, Johans
   återkoppling: "om siten är stängd ska menyvalet blinka i rött") —
   "Menyval"-menyposten blinkar rött i text/ikon så länge
   Maintenance::isActive() är sant (se admin-layout-start.php), en tydligt
   annorlunda, mer alarmerande signal än kampanjpulsens stilla guldring
   ovan — det här betyder "den publika sajten är nere just nu", inte en
   inbjudan. */
@keyframes admin-maintenance-blink {
  0%, 100% { color: #EFE9DA; }
  50%      { color: var(--terracotta); }
}
.admin-sidebar-link--maintenance-alert,
.admin-sidebar-link--maintenance-alert svg {
  animation: admin-maintenance-blink 1.1s ease-in-out infinite;
  font-weight: 700;
}
.admin-sidebar-link--maintenance-alert svg { opacity: 1; }