/* Typsnitten ligger på sajten själv (2026-10-06). Förut hämtades de från
   fonts.googleapis.com, vilket skickar varje besökares IP-adress till Google
   utan samtycke — det enda på sajten som hade krävt en cookie-/samtyckesruta. */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/vh/fonter/opensans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/vh/fonter/opensans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/vh/fonter/prata-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* =====================================================================
   Vackrare Hudhälsa av Linnea — gemensam stil för alla sidor.
   Palett och typsnitt är hämtade rakt ur hennes egen sajt:
   #A5B09F (primär), #DBD3CD (sekundär), #F6F2EF (ljus), #444 (text),
   #737373 (dämpad) — Prata för rubriker, Open Sans för brödtext.
   ===================================================================== */

:root{
  --sage:#A5B09F;
  --sage-d:#62705B;   /* mörk nog för vit text (5,3:1) och som textfärg på cream (4,7:1) */
  --sage-l:#C4CCBE;
  --olive:#2F352C;
  --olive-2:#232821;
  --sand:#DBD3CD;
  --cream:#F6F2EF;
  --ink:#3A3A38;
  --text:#444444;
  --muted:#737373;
  --line:rgba(58,58,56,.14);
  --r:14px;
  --shadow:0 26px 60px -30px rgba(47,53,44,.38);
  --shadow-s:0 14px 34px -22px rgba(47,53,44,.4);
  --max:1200px;
  --pad:104px;
  --disp:'Prata',Georgia,'Times New Roman',serif;
  --sans:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.6,.2,1);
}
@media(max-width:920px){:root{--pad:64px}}
@media(max-width:640px){:root{--pad:52px}}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text);font-family:var(--sans);
  font-size:clamp(15.5px,1.02vw,17px);line-height:1.72;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;margin:0;color:var(--ink);letter-spacing:0}
h1{font-size:clamp(31px,4.4vw,60px);line-height:1.14}
h2{font-size:clamp(25px,3.1vw,40px);line-height:1.2}
h3{font-size:clamp(18px,1.6vw,22px);line-height:1.32}
p{margin:0 0 16px}
section{position:relative;padding:var(--pad) 0}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
.eyebrow{font-family:var(--sans);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sage-d);font-weight:600;display:block;margin-bottom:14px}
.lead{font-size:clamp(16.5px,1.15vw,18.5px);color:var(--muted);line-height:1.75}
.cream{background:var(--cream)}
.sandbg{background:var(--sand)}
.dark{background:var(--olive);color:rgba(246,242,239,.82)}
.dark h1,.dark h2,.dark h3,.dark h4{color:#FBF9F7}
.dark .eyebrow{color:var(--sage-l)}
.dark .lead{color:rgba(246,242,239,.76)}
.center{text-align:center}
.center .eyebrow{margin-left:auto;margin-right:auto}

/* ---------- knappar ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
  font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:.02em;
  padding:0 26px;min-height:48px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s,color .3s,border-color .3s}
.btn-solid{background:var(--sage-d);color:#fff}
.btn-solid:hover{background:var(--olive,#2F352C);transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(119,133,111,.9)}
.btn-line{border-color:var(--line);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--sage);color:var(--sage-d);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
a[href^="tel:"],a[href^="mailto:"]{min-height:44px;display:inline-flex;align-items:center}
.krband a,.fbot a{min-height:0;display:inline}
.arw{display:inline-block;transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- KR-band ---------- */
.krband{position:relative;z-index:120;background:var(--olive-2);color:rgba(246,242,239,.7);
  font-size:12px;line-height:1.5;padding:9px 0;text-align:center}
.krband a{color:var(--sage-l);text-decoration:none;border-bottom:1px solid rgba(196,204,190,.4)}
@media(max-width:820px){.krband i{display:none}.krband{font-size:11.5px;padding:7px 0}}

/* ---------- nav ---------- */
/* @meny-start — allt härifrån till @meny-slut bäddas ÄVEN in direkt i
   varje sidas <head> av verktyg/skript/vh-bygg.mjs. En webbläsare som
   satt kvar på en gammal kit.css visade menyns underrubriker som tomma
   rader (2026-09-18). Reglerna följer nu med sidan, som alltid är
   färsk, så en cachad stilfil kan aldrig mer göra menyn oläsbar.
   Kopian ligger EFTER länken till kit.css och vinner därför vid lika
   specificitet. Ändra bara här — bygget slickar ut blocket självt. */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px 0;
  transition:background .4s ease,box-shadow .4s ease,padding .4s ease}
.nav .wrap{display:flex;align-items:center;gap:20px}
.nav.solid{background:rgba(255,255,255,.95);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);padding:9px 0}
.brand{margin-right:auto;display:flex;align-items:center;text-decoration:none;min-height:44px}
.brand img{height:38px;width:auto;transition:filter .4s ease}
.nav:not(.solid) .brand img{filter:brightness(0) invert(1)}
/* En bild hon laddat upp själv får ALDRIG färgas om — då blir ett foto en
   vit kvadrat.

   Väljaren måste matcha regeln ovan led för led. Ett kortare
   `.brand img[data-egen]` väger (0,2,1) mot dess (0,3,1) och förlorar —
   loggan blev vit ändå tills man scrollat och .solid slog till. Mät
   specificiteten, höj inte siffran på måfå. */
.nav .brand img[data-egen],
.nav:not(.solid) .brand img[data-egen],
.nav.pljus:not(.solid) .brand img[data-egen]{filter:none}
.nav.pljus:not(.solid) .brand img{filter:none}
.nav.pljus:not(.solid){background:rgba(255,255,255,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.navlinks{display:flex;gap:26px}
.navlinks a{position:relative;text-decoration:none;font-size:14.5px;color:#fff;padding:6px 0;
  transition:color .3s}
.nav.solid .navlinks a,.nav.pljus:not(.solid) .navlinks a{color:var(--text)}
.navlinks a::after{content:"";position:absolute;left:0;bottom:1px;height:1px;width:100%;
  background:var(--sage);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.navlinks a:hover::after,.navlinks a[aria-current]::after{transform:scaleX(1)}
.navcta{min-height:44px;padding:0 22px;font-size:14px;white-space:nowrap;flex:none}
/* Bokningsknappen i mobilmenyn. Finns i markupen på alla bredder men syns
   bara när mobilmenyn används — datorn har sin egen knapp i navraden. */
.navctam{display:none}

/* ---------- undermenyer (2026-09-18) ----------
   Dator: panelen fälls ut under menyposten vid hovring OCH vid tangentbords-
   fokus (:focus-within), så den går att nå utan mus. Panelen är BREDARE än
   posten men aldrig bredare än sidan: left/right-låsning i stället för en
   fast bredd, annars skapar den vågrät scroll på en smal laptop.
   Mobil: samma markup blir ett dragspel i menypanelen (kit.js sätter .oppen). */
.navpost{position:relative;display:flex;align-items:center}
.navpost > a{display:inline-flex;align-items:center;gap:5px}
.navpil{opacity:.75;transition:transform .3s var(--ease)}
.navunder{position:absolute;top:100%;left:-18px;z-index:120;margin-top:10px;padding:20px 22px 14px;
  background:#fff;border-radius:16px;box-shadow:0 26px 60px -26px rgba(35,40,33,.45),0 0 0 1px var(--line);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .22s ease,transform .22s var(--ease),visibility .22s}
/* Mega-menyn CENTRERAS under navraden (som hennes WooCommerce-meny i
   containerbredd), inte från menypostens vänsterkant. Fast placering med
   --navbotten, måttet kit.js redan räknar fram, så den följer banden
   ovanför navet och kan aldrig hamna utanför skärmen. */
.navunder.bred{position:fixed;top:var(--navbotten,120px);left:50%;right:auto;margin-top:0;
  width:min(980px,calc(100vw - 48px));transform:translate(-50%,-6px)}
/* Hovringen som fäller ut mega-menyn gäller BARA datorbredd. Reglerna låg
   tidigare utan mediefråga, och `.navpost:hover > .navunder.bred` (0,3,0)
   slog då ut mobilens `.navunder,.navunder.bred{transform:none}` (0,2,0)
   på specificitet. På telefonen förskjöts undermenyn därför halva sin egen
   bredd åt vänster så fort något var hovrat — rubrikerna hamnade utanför
   panelen och raderna såg tomma ut. På dator syntes det när musen låg över
   sidan och försvann när musen lämnade den; på telefon fastnar :hover på
   det man senast rörde, så där var menyn trasig hela tiden.
   Mediefrågan speglar mobilmenyns gräns på 940px — ändras den ena måste
   den andra ändras med. */
@media(min-width:941px){
  .navpost:hover > .navunder,.navpost:focus-within > .navunder,.navpost.hall > .navunder{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .navpost:hover > .navunder.bred,.navpost:focus-within > .navunder.bred,.navpost.hall > .navunder.bred{transform:translate(-50%,0)}
  .navpost:hover > a .navpil,.navpost:focus-within > a .navpil,.navpost.hall > a .navpil{transform:rotate(180deg)}
}
/* Bryggan över mega-menyn är hög: panelen ligger fast under HELA navraden,
   och från menyposten ned dit är det mer än 14 px. Musen som drogs snett
   nedåt tappade då hovringen och menyn stängdes (Olle 16/10). kit.js
   håller dessutom menyn öppen en kort stund (.hall) när musen lämnar. */
.navunder.bred::before{top:-40px;height:40px}
/* Osynlig brygga: musen får korsa gapet mellan posten och panelen. */
.navpost > .navunder::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.navkol{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 24px}
.navunder:not(.bred) .navkol{grid-template-columns:1fr;min-width:230px}
.navgrupp{min-width:0;display:flex;flex-direction:column}
/* Rubriken är en KNAPP (dragspel på mobil) men ser ut som en etikett på dator. */
.navrubrik{display:block;width:100%;text-align:left;background:none;border:0;padding:0;font:inherit;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage-d);margin:0 0 6px;cursor:default}
.navrubrik .navpil{display:none}
.navlista{display:flex;flex-direction:column}
.navunder a{color:var(--text) !important;font-size:14px;padding:7px 0;line-height:1.3;text-decoration:none}
.navunder a::after{display:none}
.navunder a:hover{color:var(--sage-d) !important}
.navalla{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line);font-weight:600;font-size:13.5px}
.hamb{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;align-items:center}
.hamb span{display:block;width:22px;height:1.5px;background:#fff;transition:transform .4s var(--ease),opacity .3s}
.nav.solid .hamb span,.nav.pljus:not(.solid) .hamb span{background:var(--ink)}
.hamb.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamb.on span:nth-child(2){opacity:0}
.hamb.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:940px){
  /* Panelen låg tidigare på z-index:-1 och fångade ändå klick — hamburgaren
     gick inte att träffa och menyn kunde aldrig öppnas. Den ska ligga under
     navraden men över sidan, och vara helt passiv när den är stängd. */
  /* Toppavstandet var en fast 96px — satt for ett nav som borjade vid 0.
     Med forhandsbandet och fortroendebandet ovanfor slutar navraden
     forst vid 201px, sa den forsta lanken hamnade BAKOM banden och
     "Behandlingar" kapades pa mitten. Nu foljer panelen navets verkliga
     underkant, som kit.js mater i --navbotten. Reservvardet galler bara
     de millisekunder innan skriptet hunnit rakna. */
  /* Panelen BÖRJAR under navraden i stället för att börja högst upp och
     skjutas ned med en inre marginal. Med marginalen räknades de 215 px
     in i höjden, så den sista länken hamnade precis under skärmkanten och
     gick knappt att nå med ett dragspel utfällt (uppmätt 390 × 844:
     innehåll 1 267 px mot 844 px yta). Nu är panelen en egen rullbar yta
     med verklig höjd, och den fångar sin egen skrollning. */
  .navlinks{position:fixed;left:0;right:0;top:var(--navbotten,201px);
    height:calc(100svh - var(--navbotten,201px));
    /* Ingen toppmarginal: ett klistrat element med top:0 fastnar vid
       PADDINGKANTEN, så 12 px innehåll fortsatte synas ovanför "Webbshop"
       när man rullade — en halv rad text som såg ut som ett fel. */
    padding:0 26px calc(40px + env(safe-area-inset-bottom,0px));background:var(--cream);
    flex-direction:column;gap:2px;transform:translateY(-102%);
    transition:transform .5s var(--ease),visibility .5s;
    box-shadow:0 20px 50px -30px rgba(47,53,44,.5);z-index:90;
    visibility:hidden;pointer-events:none;
    max-height:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .navlinks.open{transform:translateY(0);visibility:visible;pointer-events:auto}
  /* Att det finns mer nedanför ska SYNAS. Toningen ligger i panelens
     nederkant medan den går att rulla; den försvinner när man är i botten
     (kit.js sätter .ibotten). Utan den ser en avhuggen lista ut som att
     menyn är trasig — och det var precis vad den gjorde. */
  .navlinks::after{content:"";position:fixed;left:0;right:0;
    bottom:env(safe-area-inset-bottom,0px);height:56px;pointer-events:none;z-index:1;
    background:linear-gradient(180deg,rgba(246,242,239,0) 0%,var(--cream) 78%);
    opacity:0;transition:opacity .25s ease}
  .navlinks.open.rullbar:not(.ibotten)::after{opacity:1}
  /* Navraden ligger over panelen (z-index 100 mot 90). Dess logga och
     ikoner ar vita mot heron — mot den ljusa panelen blir de osynliga.
     menyoppen ger navet samma morka lage som .solid. */
  .nav.menyoppen{background:var(--cream);box-shadow:0 1px 0 var(--line)}
  .nav.menyoppen .brand img{filter:none}
  .nav.menyoppen .hamb span{background:var(--ink)}
  .nav.menyoppen .vagnkn{color:var(--ink)}
  /* Sidan bakom far inte skrolla medan menyn ar oppen. */
  html.menylast,html.menylast body{overflow:hidden}
  /* Banden ligger på z-index 120 och 119 för att stå över heron. När menyn
     tar hela skärmen hamnar de annars ÖVER navraden (100) och panelen (90)
     — loggan och stängkrysset försvann bakom förhandsbandet och menyns
     översta rader låg dolda bakom förtroendebandet. Medan menyn är öppen
     ska de under; utanför det läget rörs de inte. */
  html.menylast .krband,html.menylast .fband{z-index:0}
  /* Panelen ar ett BARN till <nav>. Inuti navets stapelkontext malas den
     (z-index 90) over sina syskon sa fort de ligger pa z-index:auto — det
     var darfor bara hamburgaren syntes nar menyn var oppen: den hade
     redan 101. Loggan och kundvagnen behover samma lyft. */
  .hamb,.brand,.vagnkn{position:relative;z-index:101}
  /* Undermenyerna som dragspel i mobilmenyn. */
  .navpost{display:block}
  .navpost > a{justify-content:space-between;width:100%}
  .navunder,.navunder.bred{position:static;width:auto;opacity:1;visibility:visible;transform:none;
    pointer-events:auto;box-shadow:none;background:transparent;border-radius:0;margin:0;padding:0 0 6px 14px;
    display:none;transition:none}
  .navpost.oppen > .navunder{display:block}
  .navpost.oppen > a .navpil{transform:rotate(180deg)}
  /* Den utfällda avdelningen och den utfällda rubriken stannar kvar i
     panelens överkant medan man rullar. Med Hudvård utfälld är innehållet
     1 070 px i en 772 px yta (mätt 390 × 844) — utan det här rullar både
     "Webbshop" och "HUDVÅRD" bort, och då syns varken var man är eller
     hur man fäller ihop igen. Rubrikens toppavstånd är topspostens
     uppmätta höjd, satt av kit.js som --navposth. */
  .navpost.oppen > a{position:sticky;top:0;z-index:3;background:var(--cream)}
  .navgrupp.oppen > .navrubrik{position:sticky;top:var(--navposth,61px);z-index:2;background:var(--cream)}
  /* Alla tre varianterna måste räknas upp. Datorregeln
     `.navunder:not(.bred) .navkol` är (0,3,0) och skulle annars behålla
     sin `min-width:230px` på telefonen — samma sorts specificitetsläcka
     som hovringen ovan, och den ger vågrät skrollning i Behandlingar. */
  .navkol,.navunder.bred .navkol,.navunder:not(.bred) .navkol{grid-template-columns:1fr;gap:0;min-width:0}
  /* Två steg, som på hennes WooCommerce-meny: Webbshop fäller ut
     rubrikerna (Hudvård, Makeup, Passar din hud, Märken), och varje
     rubrik fäller ut sina kategorier. */
  .navgrupp{margin:0}
  .navlinks .navrubrik{display:flex;align-items:center;justify-content:space-between;
    min-height:46px;margin:0;padding:10px 0;font-family:var(--sans);font-size:13px;
    letter-spacing:.12em;color:var(--ink);border-bottom:1px solid var(--line);cursor:pointer}
  .navlinks .navrubrik .navpil{display:block;opacity:.6}
  .navgrupp .navlista{display:none;padding-left:14px}
  .navgrupp.oppen > .navlista{display:flex}
  .navgrupp.oppen > .navrubrik .navpil{transform:rotate(180deg)}
  /* Underlänkarna är kategorier, inte rubriker: samma brödtextstil som
     resten av sajten, inte menyns display-typsnitt. */
  .navlinks .navunder a{font-family:var(--sans);font-size:15.5px;padding:10px 0;min-height:46px;
    display:flex;align-items:center;border-bottom:1px solid var(--line);color:var(--text)}
  .navlinks .navunder .navalla{font-family:var(--sans);font-size:14px;font-weight:600;border-bottom:0;
    color:var(--sage-d);margin-top:2px}
  .navrubrik{margin:10px 0 2px}
  /* Bokningsknappen sist i listan. Regeln måste ligga EFTER .navlinks a
     och ha högre specificitet, annars får knappen menyns serif, svart text
     och en understrykning i stället för att se ut som en knapp. */
  .navlinks .navctam{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    width:100%;flex:none;margin:20px 0 8px;min-height:54px;padding:0 22px;
    font-family:var(--sans);font-size:15.5px;font-weight:600;color:#fff;
    background:var(--sage-d);border-bottom:0}
  .navlinks a{color:var(--ink);font-family:var(--disp);font-size:21px;padding:12px 0;
    border-bottom:1px solid var(--line);min-height:48px;display:flex;align-items:center}
  .navlinks a::after{display:none}
  .hamb{display:flex}
}
@media(max-width:520px){.navcta{padding:0 14px;font-size:13.5px}.brand img{height:30px}
  .nav .wrap{gap:10px}.vagnkn{width:40px}}
/* @meny-slut */

/* ---------- hero ---------- */
.hero{position:relative;min-height:calc(100svh - var(--band,0px));display:flex;align-items:flex-end;
  overflow:hidden;background:var(--olive)}
.hero.kort{min-height:auto}
.hero.kort .heroin{padding:172px 24px 98px}
.heromedia{position:absolute;inset:0;overflow:hidden;clip-path:inset(12% 0);
  animation:letterbox 1.6s var(--ease) .1s forwards}
@keyframes letterbox{to{clip-path:inset(0)}}
.heromedia video,.heromedia .poster{position:absolute;top:-20px;left:-20px;
  width:calc(100% + 40px);height:calc(100% + 40px);object-fit:cover}
/* Postern måste zooma EXAKT som filmen. Utan det satt stillbilden på skala 1
   medan filmen startade på 1.1 — och då hoppade bilden till i samma ögonblick
   som filmen tog över, även när motivet var identiskt. */
.heromedia video,.heromedia .poster{transform:scale(1.1);animation:herozoom 3s var(--ease) .1s forwards}
/* Filmen tonas in ovanpå postern. Skulle en bildruta ändå skilja sig blir
   övergången mjuk i stället för ett hårt klipp. */
.heromedia video{opacity:0;transition:opacity .45s ease}
.heromedia video.spelar{opacity:1}
@keyframes herozoom{to{transform:scale(1)}}
/* Ljusare film (Olle 2026-09-17): filmen lyfts 15 % och slöjan släpper
   tidigare till höger om texten. Textzonen (0–54 %) har samma täckning som
   förut. Uppmätt på 19 bildrutor ur vh-hand-1600 vid 1440×900: heron är i
   snitt 57 % ljusare, och vit text har som sämst 5,5:1 (förut 7,0:1).
   Postern får samma filter, annars hoppar bilden när filmen tar över. */
.heromedia video,.heromedia .poster{filter:brightness(1.15)}
.grade{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(35,40,33,.88) 0%,rgba(35,40,33,.8) 34%,rgba(35,40,33,.6) 54%,
    rgba(35,40,33,.14) 66%,rgba(35,40,33,0) 78%),
    linear-gradient(180deg,rgba(35,40,33,.66) 0,rgba(35,40,33,0) 180px)}
.grain{position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.6'/></svg>")}
.heroin{position:relative;z-index:3;width:100%;max-width:var(--max);margin:0 auto;
  padding:150px 24px 92px;color:#fff}
.heroin>*{max-width:640px}
.hero .eyebrow{color:var(--sage-l);text-shadow:0 2px 20px rgba(20,24,19,.6)}
.hero h1{color:#fff;margin:0 0 20px;text-shadow:0 2px 26px rgba(20,24,19,.5)}
.hero h1 em{font-style:italic;color:var(--sage-l)}
.mask{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.mask>span{display:block;transform:translateY(115%);filter:blur(9px);opacity:0}
.go .mask>span{animation:maskup 1.1s var(--ease) forwards}
.go .mask:nth-of-type(2)>span{animation-delay:.14s}
.go .mask:nth-of-type(3)>span{animation-delay:.28s}
@keyframes maskup{to{transform:translateY(0);filter:blur(0);opacity:1}}
.hero .lead{color:rgba(255,255,255,.94);margin:0 0 26px;text-shadow:0 2px 20px rgba(20,24,19,.55)}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.status{margin-top:20px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.94);display:flex;align-items:center;gap:9px;
  text-shadow:0 2px 18px rgba(20,24,19,.7)}
.dot{width:7px;height:7px;border-radius:50%;background:#9FD3A6;flex:none;animation:puls 2.6s ease-in-out infinite}
.dot.stangt{background:var(--sand);animation:none}
@keyframes puls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.78)}}
.trust{margin:34px 0 0;display:grid;grid-template-columns:repeat(4,1fr);max-width:700px;
  border-top:1px solid rgba(255,255,255,.24);padding-top:18px}
.trust div{padding:0 14px;border-left:1px solid rgba(255,255,255,.16)}
.trust div:first-child{border-left:0;padding-left:0}
.trust b{display:block;font-family:var(--disp);font-size:clamp(18px,1.9vw,23px);font-weight:400;
  color:#fff;line-height:1.2}
.trust span{font-size:11.5px;letter-spacing:.04em;color:rgba(255,255,255,.76);line-height:1.32;display:block;margin-top:3px;text-wrap:balance}
@media(max-width:820px){
  .heroin{padding:calc(var(--fonster) - 48px) 22px 40px}
  .heroin>*{max-width:none}
  /* En 16:9-film i cover på en smal skärm beskärs till ~28 % av bildens
     mitt — allt utanför mittremsan försvinner och motivet blir obegripligt.
     På mobil får filmen därför ett eget fönster i överkant, i sitt riktiga
     bildformat, och texten står under på fast botten. */
  /* Fönstret slutar där textblocket börjar — annars hamnar rubriken på
     hudtoner och kontrasten faller till under 2:1 (uppmätt). */
  /* Ögonbrynet är den översta och minsta raden och ligger kvar i fönstrets
     nederkant. Den — och bara den — får en diskret platta. */
  .hero .eyebrow{background:rgba(20,24,19,.5);backdrop-filter:blur(6px);
    display:inline-block;padding:6px 12px;border-radius:999px;margin-left:-12px}
  /* Fönstret och gradienten mäts i PIXLAR fran heronsoverkant, aldrig i
     procent. Med procent flyttar sig overgangen sa fort heron vaxer — en
     rad till i texten sanker gransen och rubriken hamnar pa filmen. Det
     var precis vad som hande nar signaturen lades till. */
  .hero{--fonster:300px}
  .hero.kort{--fonster:232px}
  .heromedia{height:var(--fonster);clip-path:none;animation:none}
  .heromedia video,.heromedia .poster{top:0;left:0;width:100%;height:100%}
  .grade{background:
    linear-gradient(180deg,rgba(35,40,33,.58) 0,rgba(35,40,33,.18) 62px,rgba(35,40,33,0) 140px),
    linear-gradient(180deg,rgba(35,40,33,0) calc(var(--fonster) - 96px),
      rgba(35,40,33,.2) calc(var(--fonster) - 72px),
      rgba(35,40,33,.78) calc(var(--fonster) - 36px),
      rgba(35,40,33,1) var(--fonster),rgba(35,40,33,1) 100%)}
  .hero.kort .heroin{padding:calc(var(--fonster) - 48px) 22px 62px}
  .trust{grid-template-columns:1fr 1fr;gap:10px 0;margin-top:24px;padding-top:14px}
  .trust div:nth-child(3){border-left:0;padding-left:0}
  /* Knapparna pa EN rad, inte staplade. Staplade kostade 108 px och sköt
     ned "Se behandlingar" under vikningen — pa en telefon ar det enda
     besokaren ser innan hon bestammer sig. Sida vid sida far bada plats
     och bada behaller 48 px tappyta. */
  .ctas{gap:10px;flex-wrap:wrap}
  /* Bredd efter innehåll och radbrytning när de inte ryms. Tidigare delade
     alla knappar i raden lika (flex-bas 0, nowrap) — tre knappar fick
     106 px var och texten och pilen stack ut (/kundvagn, 404, /boka).
     Två knappar som får plats står fortfarande bredvid varandra. */
  .ctas .btn{flex:1 1 auto;min-width:0;max-width:100%;padding:0 16px;white-space:nowrap}
  .ctas .btn.lang{white-space:normal;text-align:center;padding:12px 18px;line-height:1.3}
}

/* ---------- våg (hennes egen signatur) ---------- */
.vag{position:absolute;bottom:-1px;left:0;width:100%;line-height:0;z-index:4;pointer-events:none}
.vag svg{width:100%;height:clamp(38px,5vw,74px);display:block}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* ---------- kort ---------- */
.rutn{display:grid;gap:22px}
.k3{grid-template-columns:repeat(3,1fr)}
.k4{grid-template-columns:repeat(4,1fr)}
.k2{grid-template-columns:repeat(2,1fr)}
@media(max-width:960px){.k3,.k4{grid-template-columns:repeat(2,1fr)}}
/* Innehållskorten (bild + brödtext + prislista) blir en kolumn — en
   löpande text i 165 px bredd går inte att läsa. */
@media(max-width:620px){.k2,.k3{grid-template-columns:1fr}}

/* PRODUKTRUTNÄTET stannar på TVÅ kolumner ända ned. Med en kolumn blev
   varje kort 342x445 px: man såg EN vara i taget och fick skrolla nästan
   femton skärmar genom butiken. Två kolumner är dessutom vad varje
   webbutik gör på telefon — en produktbild behöver inte mer bredd än så
   för att gå att bedöma. */
@media(max-width:620px){
  .k4{grid-template-columns:1fr 1fr;gap:14px 12px}
  .pkort .bild{padding:9px}
  .pkort .txt{padding:0 10px 14px}
  .pkort .mrk{margin-bottom:4px}
  .pkort h4{font-size:13.5px;line-height:1.36;margin-bottom:8px}
  .pkort .pris{font-size:16px}
  /* Ordinariepriset på egen rad. Bredvid nypriset blev raden bredare än
     det smalare kortet, och .pris är nowrap — den hade spillt ut. */
  .pkort .pris s{display:block;margin:2px 0 0;font-size:12.5px}
  /* Halvbreda kort: knappen får hela kortets bredd och kortare text. */
  .pkop{padding:0 10px 12px}
  .pkop .pkopkn{font-size:12.5px;padding:0 8px;letter-spacing:0}
}

.kort{position:relative;background:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-s);display:flex;flex-direction:column;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.kort:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.kort .bild{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.kort .bild img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.kort:hover .bild img{transform:scale(1.05)}
.kort .txt{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.kort h3{margin-bottom:8px}
.kort p{font-size:14.5px;color:var(--muted);margin:0 0 16px;line-height:1.6}
.kort .fot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.pris{font-family:var(--disp);font-size:19px;color:var(--sage-d);white-space:nowrap}
.pris small{font-family:var(--sans);font-size:12px;color:var(--muted);letter-spacing:.04em}
.mer{font-size:13.5px;font-weight:600;color:var(--sage-d);text-decoration:none;white-space:nowrap}
.mer:hover{text-decoration:underline}

/* ---------- produktkort ---------- */
.pkort{text-decoration:none;background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.pkort:hover{transform:translateY(-5px);box-shadow:var(--shadow-s);border-color:var(--sage-l)}
.pkort .bild{aspect-ratio:1;background:#fff;padding:14px;display:grid;place-items:center;overflow:hidden}
.pkort .bild img{width:100%;height:100%;min-width:0;min-height:0;align-self:stretch;justify-self:stretch;object-fit:contain;transition:transform 1s var(--ease)}
.pkort:hover .bild img{transform:scale(1.06)}
.pkort .txt{padding:0 16px 18px;display:flex;flex-direction:column;flex:1;text-align:center}
.pkort .mrk{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-d);margin-bottom:6px}
.pkort h4{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);line-height:1.4;margin:0 0 10px}
/* "3 nyanser" under priset. Låg tidigare i butik.css, som bara
   webbshoppen laddar — startsidans utvalda varor fick då inget märke.
   En regel, alla sidor. */
.nyansmarke{margin-top:4px;font-size:12px;color:var(--sage-d);font-weight:600}
.pkort .pris{margin-top:auto;font-size:17px}
/* Länken (bild + text) och köpknappen under den — Linneas mejl 2026-10-06.
   Priset står mörkt och kraftigare så att det syns direkt på kortet. */
.pklank{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
.pklank:focus-visible{outline:2px solid var(--sage-d);outline-offset:-2px}
.pkort .pris{color:var(--ink);font-weight:600}
.pkop{padding:0 16px 16px;display:flex}
.pkop .pkopkn{flex:1;min-height:44px;padding:0 12px;font-size:13.5px;white-space:nowrap}
.pkop .pkopkn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.chip{font-size:13.5px;min-height:44px;padding:0 18px;display:inline-flex;align-items:center;
  border-radius:999px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--text);
  font-family:var(--sans);transition:background .3s,color .3s,border-color .3s,transform .3s}
.chip:hover{transform:translateY(-2px);border-color:var(--sage)}
.chip.on{background:var(--sage-d);border-color:var(--sage-d);color:#fff;font-weight:600}

/* ---------- videoband ---------- */
.band{position:relative;min-height:58vh;display:grid;place-items:center;overflow:hidden;padding:var(--pad) 0}
.band video,.band .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band .vig{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,rgba(35,40,33,.42),rgba(35,40,33,.88))}
.band .cit{position:relative;z-index:2;max-width:820px;padding:0 26px;text-align:center;color:#fff}
.band q{font-family:var(--disp);font-size:clamp(21px,2.9vw,36px);line-height:1.36;quotes:none;display:block}
.band cite{display:block;margin-top:20px;font-style:normal;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sage-l)}

/* ---------- socialt ---------- */
.soc{display:flex;gap:10px;flex-wrap:wrap}
.soc a{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--ink);text-decoration:none;transition:transform .4s var(--ease),background .3s,color .3s,border-color .3s}
.soc a:hover{transform:translateY(-3px);background:var(--sage-d);border-color:var(--sage-d);color:#fff}
.dark .soc a{border-color:rgba(246,242,239,.3);color:#FBF9F7}
.dark .soc a:hover{background:var(--sage);border-color:var(--sage)}

/* ---------- footer ---------- */
footer{background:var(--olive);color:rgba(246,242,239,.66);padding:66px 0 30px;font-size:14px}
footer .kol{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:34px}
@media(max-width:860px){footer .kol{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){footer .kol{grid-template-columns:1fr}}
/* Sidfotens länkar var 19 px höga utan padding — läsbara med mus, för små
   för en tumme. Listan i sidfoten är dessutom det sista hon och hennes
   kunder når efter att ha skrollat hela vägen ned; missar man där får man
   börja om. 44 px är Apples och Googles minsta rekommenderade tryckyta. */
@media(max-width:820px){
  footer li{margin-bottom:2px}
  footer .kol ul a{display:inline-flex;align-items:center;min-height:44px}
}
footer h4{font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sage-l);margin:0 0 14px;font-weight:600}
footer a{color:rgba(246,242,239,.78);text-decoration:none;transition:color .3s}
footer a:hover{color:#fff}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px}
/* Sociala ikonerna i sidfoten: `.soc a` (0,1,1) gav dem bläckfärg och slog
   `footer a` (0,0,2) — mörkt på mörkbrunt syntes knappt (Olle 16/10). */
footer .soc a{color:#fff;border-color:rgba(255,255,255,.55)}
footer .soc a:hover{background:#fff;border-color:#fff;color:var(--olive)}
footer img.flogo{height:40px;width:auto;filter:brightness(0) invert(1);opacity:.92;margin-bottom:16px}
footer img.flogo[data-egen]{filter:none;opacity:1}

/* ---------- hidden ska betyda dold ----------
   Ett element med hidden får display:none av webbläsaren — men VILKEN
   display-regel som helst i vår egen CSS vinner över den. Reamärket är
   display:grid och syntes därför även när det var dolt. Regeln gäller
   hela sajten så att nästa dolda element inte råkar ut för samma sak. */
[hidden]{display:none!important}
.fbot{margin-top:44px;padding-top:22px;border-top:1px solid rgba(246,242,239,.16);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:12px;
  color:rgba(246,242,239,.5)}
.fbot .kr{letter-spacing:.16em;text-transform:uppercase}

/* ---------- diverse ---------- */
#prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:130;background:var(--sage)}
.mrkband{display:flex;flex-wrap:wrap;gap:10px 34px;align-items:center;justify-content:center}
.mrkband span{font-family:var(--disp);font-size:clamp(15px,1.5vw,20px);color:var(--sage-d);opacity:.85;
  transition:opacity .4s,transform .4s var(--ease)}
.mrkband span:hover{opacity:1;transform:translateY(-2px)}
.merit{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.merit img{height:52px;width:auto;opacity:.85}
.tabell{width:100%;border-collapse:collapse}
.tabell td{padding:13px 0;border-bottom:1px solid var(--line);font-size:15.5px;vertical-align:top}
.tabell tr:last-child td{border-bottom:0}
.tabell td:last-child{text-align:right;font-family:var(--disp);color:var(--sage-d);white-space:nowrap}
.tabell tr.nu td{font-weight:600;color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rv{opacity:1;transform:none}
  .mask>span{transform:none;filter:none;opacity:1}
  .heromedia{clip-path:none}
  html{scroll-behavior:auto}
}


/* ===================== PRODUKTSIDA ===================== */
.smulor{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:30px;
  font-size:13px;color:var(--muted)}
.smulor a{text-decoration:none;color:var(--sage-d)}
.smulor a:hover{text-decoration:underline}
.smulor span{opacity:.5}
.smulor b{font-weight:400;color:var(--ink)}

.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
@media(max-width:900px){.pgrid{grid-template-columns:1fr;gap:34px}}

.pbild{background:var(--cream);border-radius:var(--r);aspect-ratio:1;display:grid;place-items:center;
  padding:38px;overflow:hidden}
/* 38 px luft runt om är lagom på en 550 px bred skrivbordsruta. På telefon är
   rutan 342 px — då äter samma padding 22 % av bredden och burken blir liten. */
@media(max-width:640px){
  .pbild{padding:18px}
  .ptum button{width:58px;height:58px}
}
.pbild img{width:100%;height:100%;min-width:0;min-height:0;align-self:stretch;justify-self:stretch;object-fit:contain;transition:opacity .35s ease}
.ptum{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.ptum button{width:70px;height:70px;padding:6px;border-radius:10px;border:1px solid var(--line);
  background:#fff;cursor:pointer;display:grid;place-items:center;transition:border-color .3s,transform .3s var(--ease)}
.ptum button:hover{transform:translateY(-2px)}
.ptum button.on{border-color:var(--sage)}
.ptum img{width:100%;height:100%;min-width:0;min-height:0;align-self:stretch;justify-self:stretch;object-fit:contain}

.prad{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.pstor{font-family:var(--disp);font-size:clamp(24px,2.6vw,32px);color:var(--ink)}
.pgammal{font-size:17px;color:var(--muted);text-decoration:line-through}
.lager{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#4A7A55;
  background:rgba(159,211,166,.22);border-radius:999px;padding:6px 13px}
.lager.slut{color:#8A6A4A;background:rgba(219,211,205,.55)}

.taggrad{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;font-size:13.5px}
.taggrad span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin-right:4px;min-width:74px}
.taggrad i{font-style:normal;background:var(--cream);border-radius:999px;padding:6px 13px;color:var(--text)}
.sku{font-size:12.5px;color:var(--muted);margin:14px 0 0}

.pnot{margin-top:28px;padding:22px 24px;background:var(--cream);border-radius:var(--r);
  border-left:3px solid var(--sage);font-size:14.5px;line-height:1.65}
.pnot b{display:block;font-family:var(--disp);font-weight:400;font-size:17px;color:var(--ink);margin-bottom:6px}
.pnot a{color:var(--sage-d);font-weight:600;text-decoration:none;white-space:nowrap}
.pnot a:hover{text-decoration:underline}

.ptext p{margin:0 0 18px;color:var(--text)}
.ptext p:first-child{font-size:clamp(16.5px,1.15vw,18.5px);color:var(--muted)}
/* Mellanrubriker ur hennes behandlingstexter ("För bästa resultat",
   "Så här går det till"). Samma typsnitt som sidans rubriker, men små —
   de delar upp texten, de tävlar inte med h1. */
.ptext h3.behrubrik{font-family:var(--disp);font-weight:500;font-size:clamp(19px,1.5vw,22px);
  line-height:1.3;color:var(--ink,var(--text));margin:30px 0 10px}
.ptext h3.behrubrik:first-child{margin-top:0}
.tabell td .prisnot{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--muted);
  font-family:inherit}

/* ===================== KUNDVAGN ===================== */
.vagnkn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;border:1px solid transparent;background:transparent;
  color:#fff;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.nav.solid .vagnkn,.nav.pljus:not(.solid) .vagnkn{color:var(--ink)}
.vagnkn:hover{border-color:var(--sage);color:var(--sage-d)}
.vagnkn b{position:absolute;top:2px;right:0;min-width:19px;height:19px;border-radius:999px;
  background:var(--sage-d);color:#fff;font-family:var(--sans);font-size:11px;font-weight:700;
  display:none;align-items:center;justify-content:center;padding:0 5px;line-height:1}
.vagnkn b.pa{display:flex}

.vskugga{position:fixed;inset:0;background:rgba(35,40,33,.42);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .45s ease;z-index:200}
.vskugga.pa{opacity:1;pointer-events:auto}
.vpanel{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);background:#fff;z-index:201;
  transform:translateX(102%);transition:transform .5s var(--ease);display:flex;flex-direction:column;
  box-shadow:-24px 0 60px -30px rgba(35,40,33,.5)}
.vpanel.pa{transform:none}
.vtopp{display:flex;align-items:center;justify-content:space-between;padding:24px 26px;
  border-bottom:1px solid var(--line)}
.vtopp b{font-family:var(--disp);font-weight:400;font-size:20px;color:var(--ink)}
.vstang{width:44px;height:44px;border:0;background:transparent;font-size:26px;line-height:1;
  color:var(--muted);cursor:pointer;border-radius:50%;transition:background .3s}
.vstang:hover{background:var(--cream)}
.vrader{flex:1;overflow-y:auto;padding:8px 26px}
.vtomt{padding:44px 0;text-align:center;color:var(--muted)}
.vtomt a{color:var(--sage-d);text-decoration:none;font-weight:600}
.vrubrik{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:10px 0 2px}
.vrad{display:grid;grid-template-columns:84px 1fr auto;gap:14px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--line)}
.vrad img{width:84px;height:84px;object-fit:contain;background:var(--cream);border-radius:12px;padding:6px}
.vinfo a{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;line-height:1.35;display:block}
.vinfo a:hover{color:var(--sage-d)}
.vpris{display:block;font-size:13px;color:var(--muted);margin:3px 0 8px}
.vstepp{display:flex;align-items:center;gap:6px}
.vstepp button{width:30px;height:30px;border:1px solid var(--line);background:#fff;border-radius:8px;
  cursor:pointer;font-size:15px;color:var(--ink);transition:border-color .3s,background .3s}
.vstepp button:hover{border-color:var(--sage);background:var(--cream)}
.vstepp b{min-width:24px;text-align:center;font-weight:600;font-size:14px}
.vstepp .vta{width:auto;padding:0 10px;font-size:12px;color:var(--muted);margin-left:6px}
.vsum{font-family:var(--disp);font-size:17px;color:var(--ink);white-space:nowrap}
.vfot{padding:22px 26px 26px;border-top:1px solid var(--line);background:var(--cream)}
.vsumrad{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:14.5px}
.vsumrad.liten{font-size:13.5px;color:var(--muted)}
.vsumrad.total{margin:14px 0 18px;padding-top:14px;border-top:1px solid var(--line);font-size:16px}
.vsumrad.total b{font-family:var(--disp);font-size:22px;color:var(--ink)}
.vmoms{font-size:12px;color:var(--muted);text-align:center;margin:14px 0 0}

[data-lagg].lagd{background:var(--sage-d)}

/* ---- kundvagns- och kassasida ---- */
.ktab{width:100%;border-collapse:collapse}
.ktab th{text-align:left;font-family:var(--sans);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:600;padding-bottom:14px;
  border-bottom:1px solid var(--line)}
.ktab td{padding:20px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.ktab .kv{display:flex;gap:16px;align-items:center}
.ktab .kv img{width:78px;height:78px;object-fit:contain;background:var(--cream);border-radius:10px;padding:8px}
.ktab .kv a{color:var(--ink);text-decoration:none;font-size:15px;line-height:1.4}
.ktab .kv a:hover{color:var(--sage-d)}
.ktab .kv small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}
.ktab td.hoger{text-align:right;font-family:var(--disp);white-space:nowrap}
@media(max-width:700px){
  .ktab th:nth-child(2),.ktab td:nth-child(2){display:none}
  .ktab .kv img{width:60px;height:60px}
}

.kgrid2{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
@media(max-width:900px){.kgrid2{grid-template-columns:1fr;gap:30px}
  /* Sammanfattningen överst på telefon: förut kom "Din beställning" och
     totalen först under betalknappen — kunden betalade utan att ha sett summan. */
  #kform > .ksum{order:-1}}
.ksum{background:var(--cream);border-radius:var(--r);padding:28px 28px 30px;position:sticky;top:104px}
.ksum h3{margin-bottom:18px}
.ksum .rad{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:14.5px}
.ksum .rad b{white-space:nowrap;flex-shrink:0}
.ksum .rad.tot{margin-top:12px;padding-top:16px;border-top:1px solid var(--line);font-size:16px}
.ksum .rad.tot b{font-family:var(--disp);font-size:24px;color:var(--ink)}

.falt{display:grid;gap:16px}
.falt.tva{grid-template-columns:1fr 1fr}
@media(max-width:560px){.falt.tva{grid-template-columns:1fr}}
.falt label{display:block;font-size:12.5px;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.falt input,.falt select,.falt textarea{width:100%;min-height:50px;border:1px solid var(--line);
  border-radius:10px;padding:0 15px;font-family:var(--sans);font-size:15.5px;color:var(--ink);
  background:#fff;outline:none;transition:border-color .3s,box-shadow .3s}
.falt textarea{padding:14px 15px;min-height:96px;resize:vertical}
.falt input:focus,.falt select:focus,.falt textarea:focus{border-color:var(--sage);
  box-shadow:0 0 0 3px rgba(165,176,159,.22)}
.fgrupp{margin-bottom:34px}
.fgrupp h3{margin-bottom:18px;display:flex;align-items:center;gap:12px}
.fgrupp h3 i{width:28px;height:28px;border-radius:50%;background:var(--sage-d);color:#fff;
  font-style:normal;font-size:14px;display:grid;place-items:center;font-family:var(--sans);flex:none}
.fraktval{border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:flex;
  gap:14px;align-items:flex-start;background:#fff}
.fraktval b{display:block;font-weight:600;font-size:15px;color:var(--ink)}
.fraktval span{font-size:13.5px;color:var(--muted)}
.fraktval .pr{margin-left:auto;font-family:var(--disp);color:var(--ink);white-space:nowrap}
.villkor{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--muted);margin:6px 0 20px}
.villkor input{width:20px;height:20px;min-height:0;flex:none;margin-top:2px;accent-color:var(--sage)}
.villkor a{color:var(--sage-d)}

/* ===================== BEVISREMSA ===================== */
.bevis{background:var(--cream);border-bottom:1px solid var(--line)}
.bevisin{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center;justify-content:space-between;
  padding-top:22px;padding-bottom:22px}
.bevis .merit{gap:18px}
.bevis .merit img{height:40px}
.bevis .merit span{font-size:13px;color:var(--muted);line-height:1.5}
.bevis .merit a{color:var(--sage-d);text-decoration:none;font-weight:600}
.bevis .merit a:hover{text-decoration:underline}
.bevishoger{display:flex;align-items:center;gap:22px}
.stjarnor{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.stjarnor b{font-family:var(--disp);font-size:26px;color:var(--ink);line-height:1}
.stjarnor i{color:var(--sage-d);font-style:normal;letter-spacing:1px;font-size:13px}
.stjarnor span{font-size:12.5px;color:var(--muted)}
.stjarnor:hover span{color:var(--sage-d)}
.bevis .soc a{width:42px;height:42px}
@media(max-width:760px){
  .bevisin{flex-direction:column;align-items:flex-start;gap:18px}
  .bevis .merit img{height:34px}
}

/* ===================== PRODUKTKARUSELL ===================== */
.karusell{padding:calc(var(--pad) * .62) 0;overflow:hidden}
.kartopp{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;justify-content:space-between;
  margin-bottom:30px}
.karband{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.karspar{display:flex;width:max-content;animation:kar 62s linear infinite}
.karband:hover .karspar{animation-play-state:paused}
@keyframes kar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.karvara{flex:none;width:186px;margin-right:18px;text-decoration:none;text-align:center;
  transition:transform .45s var(--ease)}
.karvara:hover{transform:translateY(-6px)}
.karbild{display:grid;place-items:center;height:176px;background:var(--cream);border-radius:var(--r);
  padding:18px;overflow:hidden}
.karbild img{width:100%;height:100%;min-width:0;min-height:0;align-self:stretch;justify-self:stretch;object-fit:contain}
.karvara b{display:block;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);
  margin:12px 0 3px;line-height:1.35}
.karvara i{font-style:normal;font-family:var(--disp);font-size:14px;color:var(--sage-d)}
@media(prefers-reduced-motion:reduce){.karspar{animation:none}
  .karband{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}

/* ===================== OMDÖMEN ===================== */
.betygrad{display:flex;align-items:center;justify-content:center;gap:11px;margin-top:14px;flex-wrap:wrap}
.betygrad i{color:var(--sage-d);font-style:normal;letter-spacing:2px}
.betygrad b{font-family:var(--disp);font-size:24px;color:var(--ink)}
.betygrad a{font-size:13.5px;color:var(--sage-d);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.betygrad a:hover{text-decoration:underline}
.omgrid{align-items:start}
.omd{margin:0;background:#fff;border-radius:var(--r);padding:30px 28px;border:1px solid var(--line);
  display:flex;flex-direction:column;height:100%}
.omd i{color:var(--sage-d);font-style:normal;letter-spacing:2px;font-size:13px;margin-bottom:14px}
.omd blockquote{margin:0 0 18px;font-size:15px;line-height:1.68;color:var(--text)}
.omd figcaption{margin-top:auto;font-family:var(--disp);font-size:15px;color:var(--ink);
  display:flex;align-items:baseline;gap:9px}
.omd figcaption span{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}

/* ===================== HUDGUIDEN ===================== */
.gsteg{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.gbar{height:3px;background:var(--sand);border-radius:2px;overflow:hidden;margin-bottom:32px}
.gbar i{display:block;height:100%;background:var(--sage);transition:width .6s var(--ease)}
.gfraga{font-size:clamp(24px,3vw,36px);margin-bottom:26px}
.gval{display:grid;gap:11px}
.gknapp{text-align:left;padding:20px 24px;border:1px solid var(--line);background:#fff;border-radius:12px;
  cursor:pointer;font-family:var(--sans);min-height:60px;
  transition:border-color .3s,background .3s,transform .35s var(--ease)}
.gknapp:hover{border-color:var(--sage);background:var(--cream);transform:translateX(4px)}
.gknapp b{font-weight:500;font-size:16px;color:var(--ink)}
.gtillbaka{margin-top:26px;background:transparent;border:0;color:var(--muted);cursor:pointer;
  font-family:var(--sans);font-size:14px;min-height:44px;padding:0}
.gtillbaka:hover{color:var(--sage-d)}

.gklar{margin-bottom:34px}
.grutin{display:grid;gap:14px;margin-bottom:24px}
.gvara{display:grid;grid-template-columns:96px 1fr auto;gap:20px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 22px}
.gbild{display:grid;place-items:center;height:88px;background:var(--cream);border-radius:10px;padding:8px}
.gbild img{width:100%;height:100%;min-width:0;min-height:0;align-self:stretch;justify-self:stretch;object-fit:contain}
.gnr{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-d);
  margin-bottom:5px}
.ginfo a{text-decoration:none}
.ginfo b{font-family:var(--disp);font-weight:400;font-size:18px;color:var(--ink);line-height:1.3}
.ginfo a:hover b{color:var(--sage-d)}
.gmark{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-left:8px}
.ginfo p{margin:7px 0 0;font-size:14px;color:var(--muted);line-height:1.55}
.gpris{text-align:right;font-family:var(--disp);font-size:17px;color:var(--ink);white-space:nowrap}
.gpris .gl{margin-top:10px;min-height:42px;padding:0 16px;font-size:13px}
@media(max-width:700px){
  .gvara{grid-template-columns:72px 1fr;gap:14px}
  .gbild{height:70px}
  .gpris{grid-column:1/-1;text-align:left;display:flex;align-items:center;gap:14px;
    border-top:1px solid var(--line);padding-top:14px}
  .gpris .gl{margin:0 0 0 auto}
}
.gsum{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  background:var(--cream);border-radius:var(--r);padding:22px 26px;margin-bottom:34px}
.gsum span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.gsum b{font-family:var(--disp);font-size:26px;color:var(--ink)}
.gbeh{background:var(--olive);color:rgba(246,242,239,.82);border-radius:var(--r);padding:32px 30px;
  margin-bottom:26px}
.gbeh .eyebrow{color:var(--sage-l)}
.gbeh h3{color:#FBF9F7;margin-bottom:8px}
.gbeh p{margin-bottom:20px}
.gnot{background:#fff;border-left:3px solid var(--sage);border-radius:var(--r);padding:22px 24px;
  font-size:14.5px;line-height:1.65;color:var(--muted)}
.gnot b{display:block;font-family:var(--disp);font-weight:400;font-size:17px;color:var(--ink);margin-bottom:6px}
.gnot a{color:var(--sage-d);font-weight:600;text-decoration:none}
.gknapp span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}

/* ===================== STARTSIDANS BLOCK (omstrukturerad) ===================== */
.omdlank{font-size:13.5px;color:var(--sage-d);text-decoration:none;font-weight:600;
  min-height:44px;display:inline-flex;align-items:center;gap:7px}
.omdlank:hover{text-decoration:underline}

/* kompakt produktremsa — etikettrad i stället för egen rubrik */
.karusell{padding:34px 0 40px}
.karrad{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}
.etikettrad{font-family:var(--sans);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.karrad a{font-size:13.5px;color:var(--sage-d);text-decoration:none;font-weight:600;
  min-height:44px;display:inline-flex;align-items:center;gap:6px}
.karrad a:hover{text-decoration:underline}
.karvara{width:158px}
.karbild{height:150px;padding:14px}
.karvara b{font-size:12.5px;margin:10px 0 2px}
.karvara i{font-size:13px}

/* gemensam topprad för sektioner med "se alla"-knapp */
.blocktopp{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;
  margin-bottom:38px}
.blocktopp > div{max-width:560px}

/* metoden */
.metodtopp{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:40px}
.metodtopp h2{margin:0}
@media(max-width:880px){.metodtopp{grid-template-columns:1fr;gap:18px}}
.stegrad{margin-bottom:52px}
.stegkort{background:var(--cream);border-radius:var(--r);padding:30px 28px}
.stegnr{display:block;font-family:var(--disp);font-size:15px;color:var(--sage-d);margin-bottom:12px;
  letter-spacing:.08em}
.stegkort h3{margin-bottom:10px}
.stegkort p{margin:0;font-size:14.5px;color:var(--muted)}
.resorrad{border-top:1px solid var(--line);padding-top:38px}
.resorrad h3{margin-bottom:6px}
.resorrad > .lead{margin-bottom:26px}
.resa{border-left:2px solid var(--sage);padding-left:18px;display:block;text-decoration:none;color:inherit;transition:border-color .2s}
a.resa:hover{border-left-color:var(--sage-d)}
a.resa:focus-visible{outline:2px solid var(--sage-d);outline-offset:4px}
.resa .resalas{display:block;margin-top:10px;font-style:normal;font-size:13.5px;font-weight:600;color:var(--sage-d)}
a.resa:hover .resalas{text-decoration:underline}
.resa b{display:block;font-family:var(--disp);font-weight:400;font-size:17px;color:var(--ink);
  margin-bottom:8px;line-height:1.3}
.resa p{margin:0 0 10px;font-size:14px;color:var(--muted);line-height:1.6}
.resa span{font-family:var(--disp);font-size:15px;color:var(--sage-d)}

/* hudguiden-blocket */
.guidgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
@media(max-width:880px){.guidgrid{grid-template-columns:1fr;gap:34px}}
.markrad{margin:26px 0 0;font-size:13px;color:var(--muted);line-height:1.7}
.guidbild{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.guidbild a{display:grid;place-items:center;aspect-ratio:1;background:#fff;border-radius:var(--r);
  padding:18px;transition:transform .45s var(--ease)}
.guidbild a:hover{transform:translateY(-5px)}
.guidbild img{width:100%;height:100%;min-width:0;min-height:0;align-self:stretch;justify-self:stretch;object-fit:contain}

/* ---- enskild behandlingssida ---- */
.behgrid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:880px){.behgrid{grid-template-columns:1fr;gap:30px}}
/* height:auto MÅSTE stå kvar. Utan den vinner HTML-attributet
   height="525" över aspect-ratio, bilden blev 552 × 525 (1,05) i stället
   för 4:3 — och samma bild såg alltså annorlunda beskuren ut på
   behandlingens sida än på kortet och i panelens förhandsvisning. Det var
   det Linnea beskrev: "nu är det olika beroende på vart jag står". */
/* Punktlistan i behandlingstexten. Linnea (20/9): fördelarna låg i ett
   enda stycke med punkter emellan och var svårlästa. Egen bock i stället
   för webbläsarens prick, och luft mellan raderna. */
.behlista{list-style:none;margin:6px 0 18px;padding:0;display:grid;gap:9px}
.behlista li{position:relative;padding-left:26px;line-height:1.55}
.behlista li::before{content:"";position:absolute;left:2px;top:.55em;width:11px;height:6px;
  border-left:2px solid var(--sage-d);border-bottom:2px solid var(--sage-d);
  transform:rotate(-45deg);border-radius:1px}
.behbild{width:100%;height:auto;border-radius:var(--r);aspect-ratio:4/3;object-fit:cover;box-shadow:var(--shadow-s)}
/* Zoomen (transform:scale) får inte spilla ut över texten bredvid. */
[data-b-galleri]:not(.galleri):has(> .behbild){overflow:hidden;border-radius:var(--r);box-shadow:var(--shadow-s)}

/* ===================== FÖRE / EFTER ===================== */
.fe{max-width:440px;margin:0 auto}
.febild{position:relative;border-radius:var(--r);overflow:hidden;background:var(--sand);
  box-shadow:var(--shadow);aspect-ratio:4/5}
.febild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 32%;transition:opacity .55s var(--ease)}
.febild .fe-b{opacity:0}
.fe.efter .febild .fe-a{opacity:0}
.fe.efter .febild .fe-b{opacity:1}
.feknappar{display:flex;gap:8px;justify-content:center;margin-top:18px}
.feknappar button{min-height:46px;padding:0 26px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--text);font-family:var(--sans);
  font-size:14.5px;font-weight:600;transition:background .3s,color .3s,border-color .3s,transform .3s}
.feknappar button:hover{transform:translateY(-2px);border-color:var(--sage)}
.feknappar button.on{background:var(--sage-d);border-color:var(--sage-d);color:#fff}
.fenot{margin:16px 0 0;text-align:center;font-size:13.5px;color:var(--muted);line-height:1.6}

/* Fri höjd: rutan tar formen av FÖRE-bilden i stället för en fast 4:5.
   Behövs för att före/efter-par kan vara liggande (release peeling är ett
   collage på 568x284 per halva) och för par hon laddar upp själv, där
   formatet inte är känt när sidan byggs. En fast ruta hade beskurit bort
   halva bilden — det var just det hon klagade på. height:auto måste stå
   kvar: annars blir height-attributet på taggen en riktig höjd. */
.febild.fri{aspect-ratio:auto}
.febild.fri .fe-a{position:relative;width:100%;height:auto;max-width:100%;
  object-fit:contain;object-position:50% 50%}
.febild.fri .fe-b{object-position:50% 50%}
/* Ett liggande par blir smalt och lågt i en 330px-spalt. Då ligger det i
   stället centrerat under texten, i läsbredd. */
.fe.under{max-width:620px;margin:44px auto 0}

/* före/efter bredvid brödtexten — bilden följer med i läsningen */
/* Bildkolumnen är smalare än texten så spalterna slutar ungefär samtidigt.
   Ingen sticky här: bilden är lika hög som spalten, så den har ingen sträcka
   att glida längs — regeln hade varit verkningslös. */
.omgrid2{display:grid;grid-template-columns:1fr 330px;gap:52px;align-items:start}
.omgrid2 .fe{max-width:none;margin:0}
.omgrid2 .fe > .eyebrow{margin-bottom:12px}
@media(max-width:980px){
  .omgrid2{grid-template-columns:1fr;gap:36px}
  .omgrid2 .fe{position:static;max-width:440px;margin:0 auto}
}

/* ===================== REA ===================== */
.pkort{position:relative}
.reamarke{position:absolute;top:12px;left:12px;z-index:2;
  background:var(--rost,#8C3B2E);color:#fff;font-family:var(--sans);font-size:11.5px;
  font-weight:700;letter-spacing:.04em;padding:5px 10px;border-radius:999px;line-height:1}
.karbild{position:relative}
.reamarke.liten{top:8px;left:8px;font-size:10.5px;padding:4px 8px}
.pris s{margin-left:8px;font-family:var(--sans);font-size:13px;color:var(--muted);
  text-decoration:line-through}
.karvara i s{font-size:11.5px}
:root{--rost:#8C3B2E}

/* ===================== POPULÄRA PRODUKTER ===================== */
.popgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pop{position:relative;background:#fff;border-radius:var(--r);padding:16px 16px 18px;
  display:flex;flex-direction:column;text-align:center;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.pop:hover{transform:translateY(-5px);box-shadow:var(--shadow-s)}
.popbild{display:grid;place-items:center;aspect-ratio:1;overflow:hidden;margin-bottom:12px}
.popbild img{width:100%;height:100%;min-width:0;min-height:0;align-self:stretch;justify-self:stretch;object-fit:contain;transition:transform .9s var(--ease)}
.pop:hover .popbild img{transform:scale(1.05)}
.popkat{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin-bottom:5px}
.popnamn{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink);
  line-height:1.4;margin-bottom:6px;text-decoration:none}
.popnamn:hover{color:var(--sage-d)}
.pop i{font-style:normal;font-family:var(--disp);font-size:15px;color:var(--ink);
  margin-bottom:12px}
.pop i s{font-family:var(--sans);font-size:12px;color:var(--muted);margin-right:5px;
  text-decoration:line-through}
.poplagg{width:100%;min-height:42px;font-size:13px;margin-top:auto}
.reamarke.liten{left:auto;right:8px}
@media(max-width:420px){.popgrid{grid-template-columns:1fr}}

/* En ljus kantknapp ärvde mörk text och blev osynlig på mörk botten.
   Gäller överallt där knappen hamnar i en mörk kontext. */
.dark .btn-line,.gbeh .btn-line,.visionband .btn-line{
  border-color:rgba(255,255,255,.5);color:#fff}
.dark .btn-line:hover,.gbeh .btn-line:hover,.visionband .btn-line:hover{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.7);color:#fff}

/* Visionsbandet: tidigare ett halvskärmshögt tomrum ovanför bokabandet.
   Två mörka sektioner efter varandra lade dessutom sin padding mot varandra —
   skarven dras ihop så de läser som ett block i två delar. */
.visionband{padding:calc(var(--pad) * .72) 0 calc(var(--pad) * .42)}
.visionband + .dark{padding-top:calc(var(--pad) * .42)}
.visionband + .dark::before{content:"";position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:min(560px,72%);height:1px;
  background:rgba(246,242,239,.14)}
.visionband q{display:block;quotes:none;font-family:var(--disp);
  font-size:clamp(21px,2.8vw,34px);line-height:1.34;color:#FBF9F7;margin:14px 0 18px}
.visionband cite{display:block;font-style:normal;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sage-l)}

/* ===================== MOBIL: KLICKYTOR OCH TEXTSTORLEK ===================== */
/* Textlänkar som fungerar med mus blir för små för en tumme. Gäller bara
   under 820px — på dator är 20px hög länk helt i sin ordning. */
@media(max-width:820px){
  .mer,.merit a,.popnamn,.pnot a,.karrad a,.omdlank,.betygrad a,.gnot a,.fenot a{
    min-height:44px;display:inline-flex;align-items:center}
  .kort .fot{min-height:44px}

  /* Versala etiketter under 11,5px är svårlästa på telefon. */
  .mrk,.popkat,.reamarke,.reamarke.liten,.trust span,.pkort .mrk,
  .omd figcaption span,.taggrad span{font-size:11.5px}
  .vmoms,.sku,.fenot{font-size:12.5px}

  /* Innehållskorten kan inte bli tvåspaltiga — brödtext och prislista
     behöver bredden. Men de kan bli tätare. Bildens höjd rörs INTE:
     bara fyra av femton kortbilder har en egen fokuspunkt, resten
     beskärs från mitten, och en lägre bildruta hade kapat huvuden. */
  .kort .txt{padding:16px 18px 18px}
  .kort p{margin-bottom:12px}
  .kort .tabell td{padding:9px 0;font-size:15px}
}

/* ===================== KAMPANJBAND OCH NYHETER ===================== */
.kampanjband{position:relative;z-index:115;text-align:center;padding:11px 0;font-size:14px;
  font-weight:600;color:#fff}
.kampanjband a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}
.kampanjband.sage{background:var(--sage-d)}
.kampanjband.mork{background:var(--olive)}
.kampanjband.rea{background:#8C3B2E}
.nyhkort{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 28px;
  display:flex;flex-direction:column}
.nyhdatum{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-d);
  margin-bottom:10px}
/* Bildfönstret i nyhetskortet. Liggande 3:2 och samma rundade hörn som
   kortet. object-position styrs av bildfokus i panelen; standard är
   "50% 38%" — inte 50% 50% — eftersom ett stående mobilfoto nästan alltid
   har motivet i övre delen, och mittbeskärning då kapar huvudet. */
.nyhkort.harbild{padding-top:0;overflow:hidden}
.nyhbild{margin:0 -26px 20px;aspect-ratio:3/2;overflow:hidden;background:var(--cream)}
.nyhbild img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;display:block}
.nyhkort h3{margin-bottom:10px}
.nyhkort p{font-size:14.5px;color:var(--muted);margin:0 0 16px;white-space:pre-line}
.nyhkort .mer{margin-top:auto}
.avvikelse{background:var(--cream);border-left:3px solid var(--sage);border-radius:8px;
  padding:14px 16px;margin:0 0 22px;font-size:14.5px;color:var(--text)}
.avvikelse b{font-weight:600;color:var(--ink)}

/* ---------- reamärket i heron ----------
   Ligger i hörnet av heron och lutar lite, som en påklistrad etikett.
   Storleken följer skärmen: på mobil hamnar den under trustraden i
   stället för över den, annars täcker den texten. */
.reasticker{position:absolute;z-index:4;right:clamp(16px,4vw,56px);top:clamp(88px,12vh,150px);
  display:grid;place-items:center;width:clamp(112px,13vw,164px);aspect-ratio:1;border-radius:50%;
  background:var(--sage-d);color:#fff;text-decoration:none;text-align:center;
  transform:rotate(-8deg);box-shadow:0 12px 30px rgba(35,40,33,.28);
  transition:transform .3s var(--ease)}
.reasticker span{font-family:var(--sans);font-weight:700;line-height:1.22;
  font-size:clamp(12.5px,1.15vw,15.5px);padding:0 14px;letter-spacing:.01em}
.reasticker:hover{transform:rotate(-8deg) scale(1.05)}
/* Pa telefon foljer market filmfonstret, inte skarmens underkant. Med
   bottom:16vh hamnade det ovanpa "Se behandlingar" — ett tryck i knappens
   nedre hogra horn ledde till butiken i stallet. Nu ligger det i fonstret,
   mellan navet och ogonbrynet, och foljer --fonster pa bade start- och
   undersidor. Brytpunkten ar 820 px, samma som heron. */
@media(max-width:820px){
  .reasticker{right:14px;bottom:auto;top:calc(var(--fonster) - 162px);
    width:104px;font-size:12px}
}
@media (prefers-reduced-motion: reduce){ .reasticker{transition:none} }

/* ---------- telefon: kvantitetsknapparna ----------
   30×30 px är för litet för en tumme, och plus och minus sitter så tätt
   att man ändrar fel antal. I en kassa är det en riktig kostnad: kunden
   köper två av något hon ville ha ett av. 44 px är den minsta yta som
   går att träffa säkert. */
@media(max-width:760px){
  .vstepp{gap:10px}
  .vstepp button{width:44px;height:44px;font-size:19px}
  .vstepp b{min-width:30px;font-size:15.5px}
  .vstepp .vta{min-height:44px;display:inline-flex;align-items:center}
}
/* "Ta bort" finns i TVÅ skepnader: en knapp i kundvagnslådan och en länk
   på varukorgs-sidan. Regeln ovan träffade bara knappen, så länken låg
   kvar på 21 px — en raderingsknapp som är lätt att träffa av misstag och
   svår att träffa med flit. Väljaren utgår därför från HANDLINGEN, inte
   från klassnamnet, och gäller båda. */
@media(max-width:820px){
  [data-vagn="ta"]{min-height:44px;display:inline-flex;align-items:center}
}

/* =====================================================================
   FÖRTROENDEBANDET
   Ligger överst, före navet. Ljust och lågmält — det ska läsas, inte
   ropa. På telefon ryms två poster på en rad och den tredje under.
   ===================================================================== */
.fband{position:relative;z-index:119;background:var(--cream);
  border-bottom:1px solid var(--line);padding:9px 0}
.fband .wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:8px 26px;font-size:12.5px;color:var(--muted)}
.fband span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.fband svg{color:var(--sage-d);flex:none}
@media(max-width:820px){
  .fband{padding:8px 0}
  .fband .wrap{gap:6px 18px;font-size:11.5px}
  .fband svg{width:13px;height:13px}
}

/* =====================================================================
   SIGNATUREN I HERON
   Ett ansikte och ett namn. I ett enmansföretag är det personen man
   bokar, inte lokalen — och på telefon hinner besökaren inte längre än
   heron innan hon bestämt sig.
   ===================================================================== */
/* Syns nu även på skrivbordet. I ett enmansföretag är personen hela
   erbjudandet, och det gäller inte bara på telefon — men här finns plats
   att låta porträttet och namnet ta lite mer yta. */
.signatur{display:flex;align-items:center;gap:15px;margin:2px 0 26px}
.signatur img{width:58px;height:58px;border-radius:50%;object-fit:cover;
  object-position:50% 18%;border:1.5px solid rgba(255,255,255,.5);flex:none;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.6)}
/* .82 gav uppmätt 4,39:1 mot filmens ljusaste parti bakom signaturen —
   strax under AA. .92 klarar det med marginal. */
.signatur span{display:flex;flex-direction:column;line-height:1.36;
  font-size:13.5px;color:rgba(255,255,255,.92);text-shadow:0 2px 18px rgba(0,0,0,.55)}
.signatur b{font-family:var(--disp);font-size:19px;font-weight:400;color:#fff;letter-spacing:.01em}
@media(max-width:820px){
  .signatur{display:flex;align-items:center;gap:12px;margin:0 0 18px}
  .signatur img{width:46px;height:46px;border-radius:50%;object-fit:cover;
    object-position:50% 18%;border:1.5px solid rgba(255,255,255,.55);flex:none}
  .signatur span{display:flex;flex-direction:column;line-height:1.32;
    font-size:12.5px;color:rgba(255,255,255,.78);text-shadow:0 2px 18px rgba(0,0,0,.5)}
  .signatur b{font-family:var(--disp);font-size:16px;font-weight:400;color:#fff;letter-spacing:.01em}
}

/* =====================================================================
   NAVET PÅ TELEFON
   Hamburgare vänster, logotyp stor i mitten, kundvagn höger. Ordningen
   sätts med `order` — markeringen är oförändrad, så skrivbordet berörs
   inte. "Boka tid" tas bort ur raden: den står som första knapp i heron
   direkt under, och utan den får logotypen plats att vara läsbar.
   ===================================================================== */
@media(max-width:820px){
  .nav .wrap{gap:8px}
  .hamb{order:1;margin-left:-10px}
  .brand{order:2;margin:0;flex:1;justify-content:center}
  .brand img{height:34px}
  .vagnkn{order:3;margin-right:-6px}
  .navcta{display:none}
}

/* =====================================================================
   MERFÖRSÄLJNING I KUNDVAGNEN
   Ett förslag, inte en andra butik: låg visuell tyngd, tydligt avskilt
   från summan, och alltid billiga varor så det läses som ett tillägg.
   ===================================================================== */
/* Merförsäljningen: liten och sist i lådan. Två rader, små bilder, en
   rad text — ett tips, inte ett andra sortiment. */
.mfs{border-top:1px solid var(--line);margin:14px 0 8px;padding-top:10px;opacity:.92}
.mfsrub{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-bottom:4px}
.mfsrad{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px;align-items:center;
  padding:3px 0}
.mfsrad img,.mfstom{width:30px;height:30px;border-radius:6px;background:var(--cream);
  object-fit:contain;padding:2px}
.mfsinfo{min-width:0;display:flex;flex-direction:row;gap:6px;align-items:baseline;line-height:1.3}
.mfsinfo span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mfsinfo b{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.mfskn{border:1px solid var(--line);background:#fff;color:var(--sage-d);border-radius:999px;
  font-family:var(--sans);font-size:12px;font-weight:600;padding:0 11px;min-height:30px;
  cursor:pointer;white-space:nowrap;transition:border-color .3s,background .3s}
.mfskn:hover{border-color:var(--sage);background:var(--cream)}
.mfskn.lagd{background:var(--sage-d);border-color:var(--sage-d);color:#fff}
@media(max-width:820px){ .mfskn{min-height:40px} }

/* ---------- rabattkod i kassan ---------- */
.kodruta{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.kodruta label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px}
.kodrad{display:flex;gap:8px}
.kodrad input{flex:1;min-width:0;min-height:46px;padding:0 13px;border:1px solid var(--line);
  border-radius:10px;font-family:var(--sans);font-size:15px;letter-spacing:.06em;
  background:#fff;color:var(--ink)}
.kodrad input:focus{outline:2px solid var(--sage);outline-offset:1px;border-color:transparent}
.kodrad .btn{min-height:46px;padding:0 18px;flex:none}
.kodbesked{margin-top:8px;font-size:13.5px;line-height:1.5}
.kodbesked.ok{color:#3F7A4F}
.kodbesked.fel{color:#8C3B2E}
#radrabatt b{color:#8C3B2E}

/* =====================================================================
   "TILLAGD I KUNDVAGNEN"
   Bekräftar en handling kunden själv gjort, och passar på att föreslå
   något litet. Aldrig oombedd, aldrig i kassan.

   Rutan glider upp underifrån på telefon (där tummen är) och landar
   mitt på skärmen på dator. Bakgrunden mörknar men bara lätt — det ska
   inte kännas som en spärr.
   ===================================================================== */
.tillbak{position:fixed;inset:0;z-index:400;background:rgba(35,40,33,.42);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:tillin .22s var(--ease)}
@keyframes tillin{from{opacity:0}to{opacity:1}}
.tillruta{position:relative;background:#fff;border-radius:var(--r);width:100%;max-width:420px;
  padding:24px 22px 20px;box-shadow:0 40px 90px -30px rgba(35,40,33,.55);
  max-height:90vh;overflow-y:auto;animation:tillupp .3s var(--ease)}
@keyframes tillupp{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.tillstang{position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;background:none;
  font-size:26px;line-height:1;color:var(--muted);cursor:pointer;border-radius:10px}
.tillstang:hover{background:var(--cream);color:var(--ink)}
.tillrub{display:flex;align-items:center;gap:13px;margin-bottom:18px;padding-right:34px}
.tillbock{width:34px;height:34px;border-radius:50%;background:var(--sage-d);color:#fff;flex:none;
  display:grid;place-items:center;font-size:17px}
.tillrub b{display:block;font-family:var(--disp);font-size:18px;color:var(--ink);font-weight:400}
.tillrub .tillnamn{display:block;font-size:13.5px;color:var(--muted);line-height:1.4}
.tillmer{border-top:1px solid var(--line);padding-top:14px}
.tillmerrub{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin-bottom:8px}
.tillsum{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--line);margin-top:14px;padding-top:13px;font-size:13.5px;
  color:var(--muted)}
.tillsum b{font-family:var(--disp);font-size:18px;color:var(--ink)}
.tillknappar{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.tillknappar .btn{width:100%}
@media(max-width:560px){
  .tillbak{align-items:flex-end;padding:0}
  .tillruta{max-width:none;border-radius:var(--r) var(--r) 0 0;padding:22px 18px 26px;
    max-height:86vh;animation:tillsvep .3s var(--ease)}
  @keyframes tillsvep{from{transform:translateY(100%)}to{transform:none}}
}
@media (prefers-reduced-motion: reduce){
  .tillbak,.tillruta{animation:none}
}

/* ---- märkeskorten (behandlingar#marken och om-vackrare) ---- */
.markkort{border-radius:var(--r);padding:30px 28px;display:flex;flex-direction:column;gap:12px}
.markkort.vit{background:#fff;border:1px solid var(--line)}
.markkort.cream{background:var(--cream)}
.markkort h3{margin:0}
.markkort p{margin:0;font-size:14.5px;color:var(--muted)}
.markkort .marklank{margin-top:auto;padding-top:6px;font-family:var(--sans);font-size:13px;letter-spacing:.04em;
  color:var(--olive);text-decoration:none;font-weight:600}
.markkort .marklank:hover .arw{transform:translateX(3px)}
.markkort .marklank .arw{display:inline-block;transition:transform .25s var(--ease)}
.markkort .marklank.tyst{color:var(--muted);font-weight:400}
.markmer summary{cursor:pointer;font-family:var(--sans);font-size:12.5px;letter-spacing:.06em;color:var(--sage-d);
  list-style:none;display:inline-flex;align-items:center;gap:6px}
.markmer summary::-webkit-details-marker{display:none}
.markmer summary::after{content:'+';font-size:15px;line-height:1}
.markmer[open] summary::after{content:'−'}
.markmer p{margin-top:10px}
.pkort .bild .tombild{display:block;width:100%;aspect-ratio:1;background:var(--cream)}
.vnotis{margin:10px 0 4px;padding:10px 12px;border-radius:10px;background:#F6E7E3;color:#8E3A28;font-size:13px;line-height:1.4}
/* Ingredienslistan (INCI) på produktsidan: en tydlig rad med linje ovanför,
   som ett dragspel. Listan är lång, så den är stängd tills man vill läsa. */
.inci{margin-top:34px;border-top:1px solid rgba(58,58,56,.14);border-bottom:1px solid rgba(58,58,56,.14)}
.inci summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:52px;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink)}
.inci summary::-webkit-details-marker{display:none}
.inci summary::after{content:'+';font-size:22px;font-weight:400;line-height:1;color:var(--sage-d)}
.inci[open] summary::after{content:'\2212'}
.inci summary:focus-visible{outline:2px solid var(--sage-d);outline-offset:3px;border-radius:4px}
.incilista{font-size:13.5px;line-height:1.75;color:var(--ink);margin:0 0 18px;overflow-wrap:anywhere}
/* Sökrutan i butiken. */
.butiksok{margin:0 0 18px}
.butiksok input{width:100%;max-width:520px;padding:13px 16px;border:1px solid var(--linje,#e6e0da);border-radius:12px;font:inherit;font-size:15px;background:#fff;color:var(--ink)}
.butiksok input:focus{outline:2px solid var(--sage-d);outline-offset:1px}
.tomsok{grid-column:1/-1;padding:32px 0;color:var(--muted)}
.tomsok a{color:var(--sage-d)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Leverantörsbilder med vit bakgrund (UKLASH) låg som en vit ruta på den
   krämfärgade plattan. multiply låter plattan synas genom det vita; på
   urklippta bilder med genomskinlighet ändras ingenting märkbart. */
.pbild img,.ptum img{mix-blend-mode:multiply}
/* ---------- bildgalleri: produkter och behandlingar ---------- */
.galleri{position:relative;overflow:hidden;display:block}
.pbild.galleri{padding:0}
.galleri .gspar{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border-radius:inherit}
.galleri .gspar::-webkit-scrollbar{display:none}
.galleri .gspar:focus-visible{outline:2px solid var(--sage-d);outline-offset:-4px}
.galleri .gbild{flex:0 0 100%;height:100%;scroll-snap-align:center;display:grid;place-items:center;padding:clamp(14px,5%,40px)}
.galleri .gbild img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;user-select:none;-webkit-user-drag:none}
.galleri.bred{aspect-ratio:4/3;border-radius:var(--r);box-shadow:var(--shadow-s);background:var(--cream)}
.galleri.bred .gbild{padding:0}
.galleri.bred .gbild img{object-fit:cover;mix-blend-mode:normal}
.gpil{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;
  background:rgba(255,255,255,.94);box-shadow:0 6px 18px rgba(35,40,33,.16);color:var(--ink);font-size:30px;
  line-height:1;display:grid;place-items:center;cursor:pointer;padding:0 0 4px;transition:opacity .2s,transform .2s}
.gpil:hover{transform:translateY(-50%) scale(1.06)}
.gpil.fore{left:12px}.gpil.nasta{right:12px}
.gpil:disabled{opacity:0;pointer-events:none}
.gpil:focus-visible{outline:2px solid var(--sage-d);outline-offset:2px}
.gprickar{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:2px}
.gprickar button{width:26px;height:26px;border:0;background:none;padding:0;display:grid;place-items:center;cursor:pointer}
.gprickar button::before{content:'';display:block;width:8px;height:8px;border-radius:99px;background:rgba(58,58,56,.3);transition:width .25s,background .25s}
.gprickar button.on::before{width:22px;background:var(--sage-d)}
@media (hover:none){.gpil{display:none}}
.ptum button{cursor:pointer}

/* ---------- nyansval på produktsidan (2026-09-18) ---------- */
.nyansval{margin:6px 0 2px;max-width:340px}
.nyansval[hidden]{display:none}
.nyansval label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage-d);margin-bottom:6px}
.nyansval select{width:100%;min-height:52px;padding:0 44px 0 16px;border:1px solid var(--line);
  border-radius:12px;background:#fff;font:inherit;font-size:16px;color:var(--ink);cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233a3a38' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center}
.nyansval select:focus-visible{outline:2px solid var(--sage-d);outline-offset:2px}
.nyansval.kravs select{border-color:#B4462F}
.nyansval .nyansfel{display:none;margin:6px 0 0;font-size:13.5px;color:#B4462F}
.nyansval.kravs .nyansfel{display:block}


/* ---- Produktinformation (2026-09-26) ----
   Linnea: produkttexten var "ett enda stycke … tungt att läsa", INCI och
   aktiva ingredienser saknades. Hudoteket som förebild: utfällbara
   avsnitt under köpknappen, Beskrivning öppen från början. */
.lasmer{display:inline-flex;align-items:center;gap:6px;margin:-4px 0 4px;font-size:14.5px;font-weight:600;
  color:var(--sage-d);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.lasmer:hover{color:var(--ink)}
.pinfo{margin:26px 0 8px;border-top:1px solid var(--line)}
.pdel{border-bottom:1px solid var(--line)}
.pdel > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:17px 2px;font-family:var(--disp);font-size:19px;color:var(--ink)}
.pdel > summary::-webkit-details-marker{display:none}
.pdel > summary::after{content:'';width:10px;height:10px;border-right:1.6px solid var(--sage-d);border-bottom:1.6px solid var(--sage-d);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease;flex:none}
.pdel[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.pdel > summary:focus-visible{outline:2px solid var(--sage-d);outline-offset:3px;border-radius:4px}
.pdelin{padding:0 2px 22px}
.pdelin .ptext p{margin:0 0 14px;color:var(--text);font-size:15.5px;line-height:1.75}
.pdelin .ptext p:first-child{font-size:15.5px;color:var(--text)}
.pdelin .ptext p.etikett b{color:var(--ink);font-weight:600}
.pdelin .ptext h3.behrubrik{font-size:17px;margin:22px 0 8px}
.pdelin .ptext h3.behrubrik:first-child{margin-top:4px}
/* Aktiva ingredienser: namnen står i versaler i hennes texter — som små
   etiketter blir de en lättläst lista i stället för skrikiga rubriker. */
.pdelin .aktiva h3.behrubrik{font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sage-d);margin:20px 0 6px}
.pdelin .aktiva h3.behrubrik:first-child{margin-top:2px}
.pdelin .incilista{margin:0 0 12px}
.incinot{font-size:13px;color:var(--muted);margin:0;line-height:1.6}
.pfakta{width:100%;border-collapse:collapse;font-size:14.5px}
.pfakta th,.pfakta td{text-align:left;padding:10px 12px;vertical-align:top;border-bottom:1px solid var(--line)}
.pfakta tr:nth-child(odd){background:var(--cream)}
.pfakta th{width:34%;font-weight:600;color:var(--ink)}
.pfakta td{color:var(--text)}
@media(max-width:560px){ .pdel > summary{font-size:18px;padding:16px 2px} .pfakta th{width:40%} }
.pdel{scroll-margin-top:110px}
/* Bilden följer med medan man läser beskrivningen på dator — annars blir
   det en stor tom yta under den när avsnitten fälls ut. */
@media(min-width:901px){ .pgrid > div:first-child{position:sticky;top:104px} }

/* Säljaruppgifterna i köpvillkoren: rubrikkolumnen är 230 px — på en
   telefon trycktes värdet utanför skärmen och klipptes (2026-10-02). */
@media (max-width:560px){
  .tab.saljare th, .tab.saljare td{display:block;width:auto!important;padding-left:0;padding-right:0}
  .tab.saljare th{padding-bottom:0;border-bottom:0}
  .tab.saljare td{padding-top:2px;overflow-wrap:anywhere}
}

/* Kartan på kontaktsidan laddas först vid klick (ingen Google-kaka innan). */
.kartruta{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff;
  min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:24px;text-align:center}
.kartruta p{margin:0;max-width:34ch;font-size:14px;color:var(--muted);line-height:1.55}
.kartruta.laddad{padding:0;display:block}
.kartruta iframe{width:100%;height:280px;border:0;display:block}

/* ---------- kampanjen i heron (2026-10-12) ----------
   Raden ovanför rubriken: en ljus "glas"-etikett som syns mot filmen.
   Märket i hörnet återanvänder .reasticker men med procenten stort. */
.kampanjrad{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 18px;
  padding:9px 16px 9px 12px;border-radius:999px;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:var(--sans);font-size:14px;line-height:1.3;letter-spacing:.01em;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.45);transition:background .25s,border-color .25s}
.kampanjrad[hidden]{display:none}
.kampanjrad i{width:9px;height:9px;border-radius:50%;background:#fff;flex:none;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:kampanjpuls 2.4s ease-out infinite}
.kampanjrad b{font-weight:700}
.kampanjrad .kr-del{opacity:.6}
.kampanjrad .arw{transition:transform .25s var(--ease)}
.kampanjrad:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6)}
.kampanjrad:hover .arw{transform:translateX(3px)}
.kampanjrad:focus-visible{outline:2px solid #fff;outline-offset:3px}
@keyframes kampanjpuls{0%{box-shadow:0 0 0 0 rgba(255,255,255,.65)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.reasticker .ks{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 10px}
.reasticker .ks b{font-family:var(--disp);font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.01em}
.reasticker .ks small{font-family:var(--sans);font-weight:700;font-size:clamp(10.5px,.95vw,12.5px);line-height:1.25;max-width:11ch}
@media(max-width:820px){
  .kampanjrad{font-size:13px;padding:8px 14px 8px 11px;margin-bottom:14px}
  .kampanjrad .kr-del{display:none}
  .reasticker .ks b{font-size:28px}
  .reasticker .ks small{font-size:10.5px}
}
@media (prefers-reduced-motion: reduce){ .kampanjrad i{animation:none} }