/* ==========================================================================
   KBA Servicebutik — styles.css

   Filen är byggd i lager, ett per arbetspass, och kommentarerna förklarar
   VARFÖR ett värde ser ut som det gör. De är inte utfyllnad: flera av dem
   dokumenterar buggar som annars återuppfinns.

   ORDNING I FILEN
     1.  Typsnitt (självhostade, se DESIGN.md §4)
     2.  Tokens — ytor, text, avdelningsaccenter, on-dark, typografi, rytm
     3.  Avdelningsteman [data-dept]
     4.  Reset och typografi
     5.  Layout: wrap, section, stack
     6.  Sköld, knappar, fokus
     7.  Sidhuvud och navigation
     8.  Sidfot
     9.  Rörelse och skip-länk
     10. Hero
     11. Dörrkort
     12. Öppettider, karta, notiser
     13. Avdelningssidor, menykort, ledarprickar
     14. Foton, galleri, filmband
     15. Recensioner
     16. Tjänstekort
     17. Premiumlager: grain, sköldlinje, belysta knappar, mörk hero
     18. Mobiltypografi
     19. Hovertillstånd och ordanslag
     20. Hjälpklasser (ersätter inline style — se CLAUDE.md om säkerhet)

   EN VARNING FÖR FRAMTIDA STÄDNING
   Samma selektor förekommer med flit på flera ställen. Ett försök att slå
   ihop dubbletter till en definition per selektor gjordes 2026-08-20 och
   BRÖT sajten: .nav__link och .nav__link--mat har samma specificitet, så när
   den sammanslagna basregeln hamnade sist överskuggade den modifieraren och
   navigationens avdelningsfärger försvann. 189 skillnader fångades av en
   före/efter-jämförelse av 86 870 beräknade värden. Slå inte ihop dem.
   ========================================================================== */

/* =========================================================================
   KBA Servicebutik — grundsystem
   Varje värde här kommer ur DESIGN.md. Ändra DESIGN.md först, koden sedan.
   ========================================================================= */

/* ---- Typsnitt: självhostade, inget externt CDN (se DESIGN.md) ---- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/public/fonts/cormorant400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/public/fonts/cormorant300i.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}
/* DM Sans som VARIABEL font, vikt 100-1000, en enda fil.
   Bakgrund: projektet ärvde två felaktiga filer från Sweet Center-bygget.
   "dmsans500.woff2" var i själva verket Google Fonts *latin-ext*-delmängd —
   149 glyfer, bara accenttecken, INGA gemener a-z. "dmsans600.woff2" var
   *latin*-delmängden. Någon hade laddat ner en av varje teckenomfång och
   namngett dem efter vikt.
   Följden: all brödtext (vikt 500) föll tillbaka på besökarens systemfont
   medan etiketter (vikt 600) renderade i riktig DM Sans — två olika
   sans-serifer på samma sida, och olika utseende på Mac, Windows och Android.
   Uppmätt och bekräftat 2026-08-20: gemener i vikt 500 gav exakt samma
   textbredd som system-ui.
   Systersajterna hade samma fel, men David tar bort dem (2026-08-20) —
   ingen åtgärd behövs där. */
@font-face {
  font-family: "DM Sans";
  src: url("/public/fonts/dmsans.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/public/fonts/dmsans-ext.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Tokens ---- */
:root {
  /* Ytor och text */
  --bg: #F7F1E4;
  --bg-alt: #EFE6D4;
  --shield: #241610;
  --ink: #241610;
  --ink-muted: #6A5646;
  --gold: #C9A15A;          /* ALDRIG text — 2,14:1 mot creme */
  --hairline: #DDD0BC;
  /* Guld som TEXT — kronguldet ligger på 2,14:1 mot creme och är förbjudet
     som text (se §7). Recensionsstjärnorna bröt mot den regeln. Samma kulör
     (38°) och mättnad, nedmörkad tills den klarar AA på båda ytorna. */
  --gold-text: #7F602A;
  --on-shield: #F7F1E4;

  /* Avdelningsaccenter — text / fyllning / text ovanpå fyllning */
  --mat-text: #93381F;
  --mat-fill: #A8442B;
  --mat-on-fill: #F7F1E4;

  --sweet-text: #7A4E22;
  --sweet-fill: #C9A15A;
  --sweet-on-fill: #241610;

  /* Oliv, inte turkos. Turkosen låg på kulörvinkel 172° medan allt annat på
     sajten ligger 13-38° — den var matematiskt den enda kalla färgen och drog
     isär paletten. Oliv på 78° håller ihop med terrakotta och guld; det är
     dessutom den klassiska italienska trion, vilket klär Mat Corner. */
  --service-text: #4F5B32;
  --service-fill: #4F5B32;
  --service-on-fill: #F7F1E4;

  /* Accent på mörk sköld — de mättade värdena ovan är för mörka mot espresso.
     Alla tre klarar AA mot skölden: 6,70 / 7,29 / 7,86. */
  --mat-on-dark: #E08A6B;
  --sweet-on-dark: #C9A15A;
  --service-on-dark: #A8B37E;

  /* Aktiv avdelning — sätts om av [data-dept] */
  --accent: var(--ink);
  --accent-fill: var(--gold);
  --on-accent-fill: var(--ink);
  --accent-on-dark: var(--gold);

  /* Typografi */
  --font-display: "Cormorant Garamond", ui-serif, Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: 0.833rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.35rem, 1.1rem + 1vw, 1.563rem);
  --step-3: clamp(1.6rem, 1.25rem + 1.6vw, 1.953rem);
  --step-4: clamp(1.95rem, 1.4rem + 2.4vw, 2.441rem);
  --step-5: clamp(2.3rem, 1.5rem + 3.6vw, 3.052rem);

  /* Rytm */
  --radius: 16px;
  --radius-sm: 8px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --measure: 65ch;
  --shadow: 0 1px 2px rgba(36, 22, 16, .05), 0 10px 30px rgba(36, 22, 16, .07);
  --shadow-lift: 0 2px 4px rgba(36, 22, 16, .07), 0 18px 40px rgba(36, 22, 16, .12);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Avdelningsteman. Sätts på <body data-dept="mat"> etc. */
[data-dept="mat"] {
  --accent: var(--mat-text);
  --accent-fill: var(--mat-fill);
  --on-accent-fill: var(--mat-on-fill);
  --accent-on-dark: var(--mat-on-dark);
}
[data-dept="sweet"] {
  --accent: var(--sweet-text);
  --accent-fill: var(--sweet-fill);
  --on-accent-fill: var(--sweet-on-fill);
  --accent-on-dark: var(--sweet-on-dark);
}
[data-dept="service"] {
  --accent: var(--service-text);
  --accent-fill: var(--service-fill);
  --on-accent-fill: var(--service-on-fill);
  --accent-on-dark: var(--service-on-dark);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* ---- Typografi ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }

/* Kursiv Cormorant är reserverad för startsidans hero. Se DESIGN.md. */
.hero-script {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
}

.label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
}
.muted { color: var(--ink-muted); }
.prose { max-width: var(--measure); }

/* ---- Layout ---- */
.wrap {
  width: min(72rem, 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.section { padding-block: clamp(3rem, 8vw, 5.5rem); }
.section--alt { background: var(--bg-alt); }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack-lg { display: flex; flex-direction: column; gap: 2rem; }


/* ---- Skölden: svart platta med guldram. Butikens tryckta signatur. ---- */
.shield {
  /* align-self: annars sträcker .stack (flex column) ut skölden till full bredd */
  align-self: flex-start;
  background: var(--shield);
  color: var(--on-shield);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: .55rem 1.35rem;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}
.shield .crown { width: 1.75rem; height: 1.75rem; border-radius: 50%; }

/* ---- Knappar ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .7rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn--solid { background: var(--accent-fill); color: var(--on-accent-fill); }
.btn--ghost { border-color: var(--hairline); color: var(--ink); background: transparent; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* ---- Fokus: syns överallt, ingen preflight som tar bort den ---- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- Sidhuvud ---- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  transition: opacity .2s var(--ease);
}
.brand:hover { opacity: .78; }
.brand img { width: 38px; height: 38px; border-radius: 50%; }
.brand__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1;
}

.nav__list { display: flex; align-items: center; gap: .35rem; }
.nav__link {
  display: inline-block;
  padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-muted);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav__link:hover { color: var(--ink); background: var(--bg-alt); }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 3px;
  border-radius: 2px;
  background: var(--accent);
}
/* Avdelningslänkar bär sin egen färg redan i navigationen */
.nav__link--mat { color: var(--mat-text); }
.nav__link--sweet { color: var(--sweet-text); }
.nav__link--service { color: var(--service-text); }

/* Mobilmeny.
   Navigationen ligger ALLTID i DOM som syskon till knappen — aldrig inuti ett
   element som göms på desktop. Ett tidigare försök la <nav> inuti <details>,
   vilket tog bort hela menyn på desktop. */
.nav-burger { display: none; }
.nav-burger {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}
.nav-burger .bars, .nav-burger .bars::before, .nav-burger .bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.nav-burger .bars::before, .nav-burger .bars::after { content: ""; position: relative; }
.nav-burger .bars::before { top: -6px; }
.nav-burger .bars::after { top: 4px; }
.nav-burger[aria-expanded="true"] .bars { background: transparent; }
.nav-burger[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 52rem) {
  .site-head__inner { position: relative; }
  .nav-burger { display: inline-flex; }

  .nav {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% - .4rem);
    min-width: 14rem;
    background: var(--bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    padding: .5rem;
  }
  .nav[data-open] { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav__link { padding: .7rem .8rem; }

  /* Utan JavaScript öppnas aldrig dropdownen — visa menyn staplad istället,
     så att länkarna alltid går att nå. */
  .no-js .nav {
    display: block;
    position: static;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
  }
  .no-js .nav__list { flex-direction: row; flex-wrap: wrap; gap: .2rem; }
  .no-js .nav-burger { display: none; }
  .no-js .site-head__inner { flex-wrap: wrap; padding-bottom: .5rem; }
}

/* ---- Sidfot ---- */
.site-foot {
  background: var(--shield);
  color: var(--on-shield);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.site-foot a { color: var(--on-shield); }
.site-foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 2rem;
}
.site-foot h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .75rem;
}
.site-foot__links { display: flex; flex-direction: column; gap: .45rem; }
.site-foot__links a {
  text-decoration: none;
  opacity: .85;
  transition: opacity .2s var(--ease);
}
.site-foot__links a:hover { opacity: 1; text-decoration: underline; }
.site-foot :focus-visible { outline-color: var(--gold); }
.site-foot__legal {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(247, 241, 228, .16);
  font-size: var(--step--1);
  opacity: .7;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
}

/* Touchytor minst 44px även för små ikonlänkar */
.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* ---- Rörelse: krydda, aldrig struktur ---- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* Skip-länk */
.skip {
  position: absolute;
  left: -9999px;
  top: .5rem;
}
.skip:focus {
  left: .5rem;
  z-index: 100;
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: .6rem 1rem;
}

/* =========================================================================
   STEG 2 — Hero (startsidan)
   Typografisk, inte fotografisk. Skälet är innehållsmässigt, inte estetiskt:
   de enda riktiga foton som finns är av sweets. Ett crêpe-foto som hela
   butikens hero hade framställt en tredjedel av verksamheten som helheten.
   Heron speglar istället menytavlan — creme botten, sköld, guldornament.
   Byts när David skickar en riktig bild på butiken utifrån.
   ========================================================================= */
.hero {
  position: relative;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
}

/* Guldram, indragen — menytavlornas faktiska ornament runt hela cremesidan.
   Ett första försök använde en fritt ritad hörnkrumelur; den läste som brus
   snarare än som avsikt och byttes ut mot det här. */
.hero__frame {
  position: absolute;
  inset: clamp(.75rem, 2vw, 1.5rem) clamp(.75rem, 2.5vw, 2rem);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  opacity: .38;
  pointer-events: none;
}
.hero__frame::before, .hero__frame::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
}
.hero__frame::before { top: -4px; left: 50%; margin-left: -3.5px; }
.hero__frame::after { bottom: -4px; left: 50%; margin-left: -3.5px; }

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 46rem;
}

.hero h1 { font-size: var(--step-5); }
/* Kursiv Cormorant 300 — enligt DESIGN.md endast tillåten här */
.hero h1 .hero-script { display: block; }

.hero__lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 36rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Tunn guldlinje med romb i mitten — samma avdelarmotiv som på menytavlan */
.rule-gold {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  max-width: 22rem;
  color: var(--gold);
}
.rule-gold::before, .rule-gold::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .65;
}
.rule-gold i {
  width: 6px;
  height: 6px;
  background: currentColor;
  transform: rotate(45deg);
}

/* Adressrad under heron */
.hero__where {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
}
.hero__where a { text-decoration: none; border-bottom: 1px solid var(--hairline); }
.hero__where a:hover { border-bottom-color: var(--ink-muted); }

/* =========================================================================
   STEG 3 — De tre dörrarna
   Riktning A:s kärna. Korten ska vara VISUELLT JÄMNSTARKA — samma bredd,
   samma höjd, samma vikt. Ingen avdelning får se viktigare ut än de andra.
   Inga foton: bara sweets har riktig fotografering, och en bild på ett av
   tre kort hade omedelbart brutit jämvikten.
   ========================================================================= */
.doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}
@media (max-width: 62rem) { .doors { grid-template-columns: 1fr; } }

.door {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.door:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.door:focus-visible { outline-offset: 4px; }

/* Färgat huvud — avdelningens fyllning, kontrastkontrollerad i DESIGN.md */
.door__head {
  background: var(--accent-fill);
  color: var(--on-accent-fill);
  padding: 1.4rem 1.5rem 1.25rem;
}
.door__kind {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}
.door__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1.05;
  margin-top: .3rem;
}

.door__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.4rem 1.5rem 1.5rem;
  flex: 1;                    /* håller korten lika höga oavsett textmängd */
}
/* :not(.door__go) — annars vinner den här regeln över .door__go i kaskaden
   och pilen tappar sin avdelningsfärg. */
.door__body > p:not(.door__go) { color: var(--ink-muted); }

.door__facts { display: flex; flex-wrap: wrap; gap: .4rem; }
.door__facts li {
  font-size: var(--step--1);
  font-weight: 600;
  padding: .3rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--bg-alt);
  color: var(--accent);
}

.door__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  color: var(--accent);
}
.door__go span {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .28s var(--ease);
  padding-bottom: 2px;
}
.door:hover .door__go span { background-size: 100% 1px; }
.door__go svg { transition: transform .28s var(--ease); }
.door:hover .door__go svg { transform: translateX(4px); }

/* =========================================================================
   STEG 4 — Öppettider och hitta hit
   INGET live "öppet nu"-märke. Tiderna är delvis testdata; ett självsäkert
   "ÖPPET NU" byggt på gissade tider är värre än ingen uppgift alls. Regeln
   står redan i den här projektfamiljens egen FACTS.md sedan tidigare.
   ========================================================================= */
.visit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 56rem) { .visit { grid-template-columns: 1fr; } }

.hours { display: flex; flex-direction: column; gap: .75rem; }

.hours__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem 1rem;
  align-items: baseline;
  padding: .85rem 0;
  border-bottom: 1px solid var(--hairline);
}
.hours__row:last-of-type { border-bottom: 0; }
.hours__dept { font-weight: 600; color: var(--accent); }
.hours__when { font-variant-numeric: tabular-nums; text-align: right; }
.hours__sub {
  grid-column: 1 / -1;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* Ärlig markering av att tiderna inte är bekräftade */
.notice {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .9rem 1.1rem;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: var(--step--1);
  color: var(--ink-muted);
}
.notice strong { color: var(--ink); }

.map {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
  aspect-ratio: 4 / 3;
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 56rem) { .map { aspect-ratio: 3 / 2; } }

.visit__facts { display: flex; flex-direction: column; gap: .35rem; }
.visit__facts a { text-decoration: none; border-bottom: 1px solid var(--hairline); }
.visit__facts a:hover { border-bottom-color: var(--ink); }

/* =========================================================================
   Avdelningssidor — delad layout, endast accentfärgen skiljer (DESIGN.md §5)
   ========================================================================= */
.page-head {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--hairline);
}
.page-head__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  max-width: 44rem;
}
.page-head h1 { font-size: var(--step-4); }
.page-head__lede { font-size: var(--step-1); color: var(--ink-muted); max-width: 34rem; }

/* Menykategorier som kort — samma kortspråk som dörrarna, inte ett tredje */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 1.25rem;
  align-items: start;
}
.menu-cat {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem 1.5rem;
  box-shadow: var(--shadow);
}
.menu-cat__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .8rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--hairline);
}
.menu-cat h3,
.menu-cat h4 { font-size: var(--step-2); color: var(--accent); }
.menu-cat__all {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.menu-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .2rem .9rem;
  padding: .6rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 55%, transparent);
}
.menu-row:last-child { border-bottom: 0; }
.menu-row__name { font-weight: 600; }
.menu-row__price {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.menu-row__desc {
  grid-column: 1 / -1;
  font-size: var(--step--1);
  color: var(--ink-muted);
  line-height: 1.5;
}
/* Rader utan pris (Mat Corner) ska inte lämna en tom kolumn efter sig */
.menu-row--nopris { grid-template-columns: 1fr; }

/* Tjänstekort — servicebutiken. Samma kortspråk som dörrar och menykategorier. */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1.25rem;
}
.svc {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem 1.5rem;
  box-shadow: var(--shadow);
}
.svc__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--on-accent-fill);
  margin-bottom: .2rem;
}
/* Rubriken var ljus Cormorant i accentfärg och vägde mindre än sin egen
   brödtext — omvänd hierarki. Accenten bärs redan av ikoncirkeln, så
   rubriken får bläckfärg och ett steg större grad istället. */
.svc h3 { font-size: var(--step-2); color: var(--ink); }
.svc p { color: var(--ink-muted); font-size: var(--step-0); }

/* =========================================================================
   Exempelinnehåll — Mat Corners priser är påhittade platshållare.
   David bad uttryckligen om rimliga exempelpriser 2026-08-17 för att kunna
   se sidan färdig. Regimen: bygg på riktigt, märk omöjligt att missa,
   noindex:a. Aldrig påhittade siffror utan synlig märkning.
   ========================================================================= */
.demo-banner {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  border: 2px solid var(--mat-fill);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--mat-fill) 8%, var(--bg));
  color: var(--ink);
}
.demo-banner strong { color: var(--mat-text); }
.demo-banner__mark {
  flex: none;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mat-on-fill);
  background: var(--mat-fill);
  border-radius: 4px;
  padding: .2rem .5rem;
}

/* Varje kategorikort bär sin egen märkning — så att även en skärmdump av ett
   enskilt kort visar att priserna inte är riktiga. */
.menu-cat__demo {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mat-text);
  background: color-mix(in srgb, var(--mat-fill) 12%, transparent);
  border: 1px dashed var(--mat-fill);
  border-radius: 4px;
  padding: .15rem .45rem;
  white-space: nowrap;
}
.menu-row--demo .menu-row__price { border-bottom: 1px dashed currentColor; }

/* =========================================================================
   MOBILGENOMGÅNG — tryckytor (WCAG 2.5.5, 44px)
   Gäller FRISTÅENDE länkar. Länkar mitt i en mening är undantagna och rörs
   inte — att ge dem 44px höjd spräcker radavståndet i stycket.

   Understrykningen flyttades från border-bottom till text-decoration just för
   det här: en border sitter på elementets kant och glider ifrån texten så fort
   man lägger på vertikal padding, medan text-decoration följer texten.
   ========================================================================= */
.hero__where a,
.visit__facts a {
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.hero__where a:hover,
.visit__facts a:hover { text-decoration-color: currentColor; }

@media (hover: none), (max-width: 52rem) {
  .hero__where a,
  .visit__facts a {
    display: inline-block;
    padding-block: 11px;
  }
  /* Gapet nollas — den nya paddingen ger redan luften, och dubbelt upp
     hade separerat raderna orimligt mycket. */
  .visit__facts { gap: 0; }
  .hero__where { gap: 0 1.5rem; }

  .site-foot__links { gap: 0; }
  .site-foot__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .brand { min-height: 44px; }
}

/* Skip-länken syns bara vid fokus, men ska ha samma yta när den gör det */
.skip:focus {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Mobil: telefonknapp och vägbeskrivning i olika bredd såg oavsiktligt ut.
   Full bredd, staplade — ett medvetet val istället för en ojämn rad. */
@media (max-width: 34rem) {
  /* align-self: föräldern är align-items:flex-start, så knappraden krympte
     till innehållet och knapparna slutade mitt på sidan. */
  .hero__actions { flex-direction: column; align-items: stretch; align-self: stretch; width: 100%; }
  .hero__actions .btn { width: 100%; }

  /* Adressen och handtaget hamnade på samma rad med olika höjd efter att
     träffytan utökades — baslinjerna gled isär. Staplas istället. */
  .hero__where { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* Mobil: exempelbannerns tagg och text låg sida vid sida, vilket klämde
   texten till en smal spalt. Staplas — taggen förlorar ingen tyngd av det. */
@media (max-width: 34rem) {
  .demo-banner { flex-direction: column; gap: .7rem; }
  .demo-banner__mark { align-self: flex-start; }
  .notice { gap: .6rem; }
}

/* =========================================================================
   PREMIUMPASS — hantverksdetaljer, inga nya sektioner
   Tesen i everyday-brand-design: färg, papper och återhållsamhet bär
   premiumkänslan bättre än tillagt innehåll eller större rörelse.
   Allt nedan är statiskt eller ren CSS. Editorial-taket står kvar.
   ========================================================================= */

/* --- 1. Pappersgrain ---------------------------------------------------
   Håller den platta cremeytan från att läsa som plast. multiply istället för
   overlay, och låg opacitet: grain syns starkare på en ljus yta än på en mörk. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 2. Markering i guld ----------------------------------------------- */
::selection { background: var(--gold); color: var(--shield); }

/* --- 3. Typografisk finjustering ---------------------------------------
   Cormorant sätter för luftigt i stora grader; en aning negativ spärr gör
   rubriken samlad istället för utspädd. */
h1, h2 { letter-spacing: -0.012em; }
.hero h1 { letter-spacing: -0.015em; }

/* --- 4. Skölden får dubbel guldlinje -----------------------------------
   Menytavlorna har en yttre ram och en tunn inre linje. Det var förenklat
   till en enda ram; nu återges båda. */
.shield {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent),
    inset 0 0 0 4px var(--shield),
    0 1px 2px rgba(36, 22, 16, .18);
  padding: .6rem 1.4rem;
}

/* --- 5. Knappar: ovanifrån belysta istället för platta ------------------ */
.btn--solid {
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, #fff 16%, transparent),
    transparent 62%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent),
    0 1px 2px rgba(36, 22, 16, .14),
    0 6px 16px -6px color-mix(in srgb, var(--accent-fill) 55%, transparent);
}
.btn--ghost { background: color-mix(in srgb, var(--bg) 70%, transparent); }
.btn:active { transform: translateY(0); }

/* --- 6. Kort: tunn ljuskant upptill ------------------------------------
   Ger korten en tryckt, lyft kant mot cremen istället för en platt ruta. */
.door, .menu-cat, .svc, .map {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 65%, transparent),
    var(--shadow);
}
.door:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 65%, transparent), var(--shadow-lift); }

/* --- 7. Menyrader svarar på pekaren ------------------------------------ */
.menu-row {
  border-radius: 6px;
  padding-inline: .5rem;
  margin-inline: -.5rem;
  transition: background .18s var(--ease);
}
.menu-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* --- 8. Sidhuvudet fäster vid scroll ----------------------------------- */
.site-head {
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
.site-head.is-scrolled {
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  box-shadow: 0 1px 0 var(--hairline), 0 10px 24px -18px rgba(36, 22, 16, .55);
}

/* --- 9. Guldlinjen tonar ut i ändarna istället för att kapas tvärt ----- */
.rule-gold::before {
  background: linear-gradient(to right, transparent, currentColor);
}
.rule-gold::after {
  background: linear-gradient(to left, transparent, currentColor);
}

@media (prefers-reduced-motion: reduce) {
  .menu-row, .site-head { transition: none; }
}

/* =========================================================================
   PREMIUMPASS 2
   ========================================================================= */

/* --- Fotografi ---------------------------------------------------------
   Bara de två ÄKTA kandidbilderna används (kitchen-plating, crepe-batter).
   De AI-genererade och de menygrafiker som har inbränd text används inte
   som dekor — se research/FACTS.md.
   Båda är porträtt och små (450×800, 337×600), så de sätts som inramade
   inslag i modest storlek istället för att skalas upp till helbredd. */
/* Delad komposition: bilderna till vänster, sektionsrubriken bredvid.
   Bilderna hålls avsiktligt SMÅ — källfilerna är 450 och 337px breda, så
   allt över ~230px visad bredd blir mjukt på en retinaskärm. Storleken är
   satt av vad materialet tål, inte av hur mycket plats som finns. */
.intro-split {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 52rem) {
  .intro-split { grid-template-columns: 1fr; }
}

.photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  align-items: start;
}
.photo {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-alt);
  aspect-ratio: 4 / 5;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
/* Inramning: hårlinje plus mörk vinjett nedtill — bilden får en kant att
   vila mot istället för att flyta ut i cremen. Vinjetten hålls MÖRK även på
   ljus botten; en ljus vinjett bleker bilden istället för att grunda den. */
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--shield) 20%, transparent),
    inset 0 -50px 70px -45px color-mix(in srgb, var(--shield) 55%, transparent);
}
.photo-caption {
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin-top: .6rem;
}

/* --- Ledarprickar mellan rätt och pris ---------------------------------
   Klassisk tryckt menytypografi. Gäller bara rader som FAKTISKT har ett
   pris — namnlistorna (Milkshake, Smoothie, Frappe) har inget att leda
   ögat till och lämnas rena. */
.menu-row:not(.menu-row--nopris) .menu-row__name {
  display: flex;
  align-items: baseline;
}
.menu-row:not(.menu-row--nopris) .menu-row__name::after {
  content: "";
  flex: 1 1 auto;
  min-width: 1.25rem;
  margin: 0 .5rem;
  border-bottom: 1px dotted color-mix(in srgb, var(--ink-muted) 42%, transparent);
  transform: translateY(-0.25em);
}

/* --- Sidfoten får sköldens guldlinje ----------------------------------- */
.site-foot {
  border-top: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold) 14%, transparent);
}
.site-foot__legal { justify-content: space-between; }

/* --- Heron: en aning mer närvaro --------------------------------------- */
.hero h1 { font-size: clamp(2.5rem, 1.4rem + 4.4vw, 3.6rem); }
.hero__inner { gap: 1.35rem; }

/* =========================================================================
   PREMIUMPASS 3 — bildmaterial
   ALLT under public/stock/ är tillfälliga platshållare, se stock/KALLOR.md.
   Materialet är scopat till atmosfär och råvara — aldrig en bild som utger
   sig för att vara en specifik namngiven rätt ur menyn.
   ========================================================================= */

/* --- Dörrkort med bild ------------------------------------------------- */
.door__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-alt);
}
.door__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.door:hover .door__media img { transform: scale(1.045); }
/* Toning i avdelningens färg — binder bilden till kortet istället för att
   låta den se inklistrad ut, och ger huvudet nedanför något att växa ur. */
.door__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Tonen ska BINDA bilden till kortet, inte färga över den. Första
     försöket låg på 12->55 % multiply och åt upp motivet helt: en ljus
     pizzabild blev en platt rosa yta. Endast en antydan kvar, tyngd nedåt
     där kortets färgade huvud tar vid. */
  background: linear-gradient(
    to bottom,
    transparent 40%,
    color-mix(in srgb, var(--accent-fill) 26%, transparent));
  mix-blend-mode: multiply;
}

/* --- Sidhuvud med film eller bild -------------------------------------- */
.page-head--media { background: var(--shield); border-bottom: 0; }
.page-head__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.page-head__bg video,
.page-head__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Scrim: texten måste klara AA mot filmen oavsett vilken bildruta som visas.
   Tre stopp, tyngst till vänster där rubriken sitter. */
.page-head__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--shield) 92%, transparent) 0%,
      color-mix(in srgb, var(--shield) 78%, transparent) 45%,
      color-mix(in srgb, var(--shield) 58%, transparent) 100%),
    linear-gradient(to top,
      color-mix(in srgb, var(--shield) 55%, transparent),
      transparent 55%);
}
.page-head--media .page-head__inner { position: relative; z-index: 1; }
.page-head--media h1 { color: var(--on-shield); }
.page-head--media .page-head__lede { color: color-mix(in srgb, var(--on-shield) 82%, transparent); }
.page-head--media .hero__frame { border-color: color-mix(in srgb, var(--gold) 70%, transparent); opacity: .55; }

/* Utan rörelse: filmen döljs, affischbilden står kvar */
@media (prefers-reduced-motion: reduce) {
  .page-head__bg video { display: none; }
}

/* --- Bildband på avdelningssidor --------------------------------------- */
.media-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1.25rem;
}
.media-band .photo { aspect-ratio: 3 / 2; }

/* --- Platshållarmärkning ----------------------------------------------- */
.placeholder-note {
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--on-shield) 62%, transparent);
  border-top: 1px solid rgba(247, 241, 228, .12);
  margin-top: 1.1rem;
  padding-top: 1.1rem;
}

/* =========================================================================
   PREMIUMPASS 4 — social proof
   Tre RIKTIGA Google-recensioner. Den tredje recensenten (Ahmad Asuma) har
   satt betyg men aldrig skrivit text, så det tredje kortet är en ärlig
   betygssammanfattning — inte ett påhittat citat för att fylla platsen.
   ========================================================================= */
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
.review {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 0;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 65%, transparent), var(--shadow);
}
.review__stars {
  color: var(--gold-text);
  letter-spacing: .22em;
  font-size: var(--step--1);
  margin-bottom: 1rem;
}
.review__quote {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.42;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.review__who {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.review__avatar {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--shield);
  color: var(--gold);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: .04em;
}
.review__name { font-weight: 600; line-height: 1.3; }
.review__src { display: block; font-size: var(--step--1); color: var(--ink-muted); font-weight: 500; }

/* Betygskortet — samma kortspråk, men siffran bär det */
.review--score { align-items: flex-start; justify-content: center; text-align: left; }
.review__score {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 4vw, 4.2rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* "Se alla recensioner" är en fristående länk i betygskortet och behöver
   full tryckyta — .door__go är annars bara en rad inuti ett klickbart kort. */
@media (hover: none), (max-width: 52rem) {
  a.door__go { min-height: 44px; align-items: center; }
}

/* =========================================================================
   PREMIUMPASS 5 — sammanhållen färg och mobiltypografi

   Färgproblemet var inte vilka färger, utan hur MYCKET färg. Tre stora
   mättade block sida vid sida läser som färgglatt, inte som påkostat.
   Dörrhuvudena blir därför svarta sköldar — precis som butikens tryckta
   menytavlor — med avdelningens färg som signatur i linje och etikett.
   Mindre färgyta, mer disciplin.
   ========================================================================= */
.door__head {
  background: var(--shield);
  color: var(--on-shield);
  border-top: 3px solid var(--accent-on-dark);
  position: relative;
}
.door__kind { color: var(--accent-on-dark); opacity: 1; }
.door__name { color: var(--on-shield); }
/* Guldhårlinje inuti skölden, samma dubbla linje som .shield */
.door__head::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 16%, transparent);
}

/* Bildtonen följer med till espresso istället för accentfärgen — annars
   ligger en färgad bild direkt ovanför ett svart huvud och skär sig. */
.door__media::after {
  background: linear-gradient(
    to bottom,
    transparent 45%,
    color-mix(in srgb, var(--shield) 45%, transparent));
}

/* =========================================================================
   Mobiltypografi — grader satta för handen, inte nedskalade från desktop
   ========================================================================= */
@media (max-width: 34rem) {
  body { line-height: 1.7; }

  /* Ingressen låg på 20px och konkurrerade med rubriken. */
  .hero__lede, .page-head__lede { font-size: 1.0625rem; line-height: 1.6; }

  /* Etiketter tål mer spärr när de är små — det läser som gravyr. */
  .label { letter-spacing: .16em; font-size: .75rem; }

  /* Luftigare sektionsrytm, stramare kortmarginaler: mer plats åt texten. */
  .section { padding-block: 3.5rem; }
  .door__body, .menu-cat, .svc, .review { padding: 1.25rem 1.15rem 1.35rem; }
  .page-head__inner { gap: 1.15rem; }

  /* Rubriker samlas ytterligare i små grader. */
  h1 { letter-spacing: -0.02em; }
  h2 { letter-spacing: -0.015em; }
  .door__name { font-size: 1.45rem; }

  /* Prisraden ska vara det öga hittar först i en meny. */
  .menu-row__price { font-size: 1.0625rem; }
  .menu-row__desc { line-height: 1.55; }

  /* Citaten är sajtens enda riktigt stora serif på mobil — låt dem andas. */
  .review__quote { font-size: 1.125rem; line-height: 1.5; }
}

/* =========================================================================
   PREMIUMPASS 6 — mörk hero

   Startsidan var sajtens svagaste yta: alla tre avdelningssidor fick mörka
   bildhuvuden i pass 3, medan heron stod kvar som bar creme. Nu bär den
   samma mörka register — vilket också är exakt vad Ganache gör, referensen
   varumärket kalibrerades mot: mörk hero över ljus kropp.

   Ljus creme är fortfarande sajtens grund (§2). Det mörka är hero och
   sidhuvuden, inte hela sidan.
   ========================================================================= */
.hero {
  background: var(--shield);
  color: var(--on-shield);
}
.hero h1 { color: var(--on-shield); }
.hero__lede { color: #D8CDBB; }          /* 11,17:1 mot espresso */
/* Ljusnad från #A99C88 när det varma ljuset lades in i pass 12: gradienten
   ljusnar bakgrunden lokalt till rgb(97,60,37), och där föll den gamla
   färgen till 3,58:1 — under kravet 4,5 för liten text. */
.hero__where { color: #BEB5A6; }         /* 8,64 mot ren sköld, 4,74 i ljusaste punkten */
.hero__where a { color: #D8CDBB; text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.hero__where a:hover { text-decoration-color: var(--gold); }
.hero__frame { border-color: color-mix(in srgb, var(--gold) 75%, transparent); opacity: .6; }
.hero__frame::before, .hero__frame::after { background: var(--gold); }

/* Skölden skulle försvinna mot sin egen färg (1,0:1). Blir guldkontur i
   stället för fylld platta — samma märke, öppen i stället för sluten. */
.hero .shield {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent);
  border-color: color-mix(in srgb, var(--gold) 80%, transparent);
}
.hero .shield .label { color: var(--gold); }

/* Spökknappen behöver cremekant på mörk botten */
.hero .btn--ghost {
  background: transparent;
  border-color: color-mix(in srgb, var(--on-shield) 34%, transparent);
  color: var(--on-shield);
}
.hero .btn--ghost:hover { border-color: color-mix(in srgb, var(--gold) 80%, transparent); }
.hero :focus-visible { outline-color: var(--gold); }

/* Grainet är multiply och syns inte mot espresso — heron får sitt eget
   i overlay, samma trick som den mörka systersajten använde. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Övergången hero -> creme får en guldhårlinje i stället för en hård kant */
.hero { border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }

/* =========================================================================
   PREMIUMPASS 7 — filmband och bildgalleri

   Videobandet spelar när det kommer in i vyn och PAUSAR när det lämnar —
   inte scroll-scrubbing. Scrubbing kräver att hela klippet är buffrat och
   hackar på mobil; det bryter dessutom mot Editorial-nivåns "ingen pinning".
   Att spela på plats läser lika filmiskt och kostar ingenting i batteri när
   bandet är utanför skärmen.
   ========================================================================= */
.filmband {
  position: relative;
  overflow: hidden;
  background: var(--shield);
  min-height: clamp(19rem, 42vw, 30rem);
  display: grid;
  align-items: center;
  border-block: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}
.filmband__media { position: absolute; inset: 0; }
.filmband__media video,
.filmband__media img { width: 100%; height: 100%; object-fit: cover; }
.filmband__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--shield) 88%, transparent) 0%,
      color-mix(in srgb, var(--shield) 68%, transparent) 52%,
      color-mix(in srgb, var(--shield) 42%, transparent) 100%),
    linear-gradient(to top,
      color-mix(in srgb, var(--shield) 50%, transparent), transparent 60%);
}
.filmband__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: 34rem;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.filmband h2 { color: var(--on-shield); }
.filmband p { color: #D8CDBB; }
.filmband .label { color: var(--gold); }

/* Utan rörelse visas affischbilden i stället för filmen */
@media (prefers-reduced-motion: reduce) {
  .filmband__media video { display: none; }
}

/* --- Bildgalleri: mosaik där första bilden bär ------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: .85rem;
}
.gallery .photo { aspect-ratio: 1; }
.gallery .photo:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 46rem) {
  .gallery { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .gallery .photo:first-child { grid-column: span 2; grid-row: span 1; aspect-ratio: 3/2; }
}

/* =========================================================================
   PREMIUMPASS 8 — anslag vid inladdning

   REN CSS, inget JavaScript. §6:s hårdregel säger att inget ovanför vecket
   får bero på ett skript för att bli synligt. Den håller här, i båda
   riktningarna:
     - laddar stilmallen inte alls, gäller inga stilar och innehållet står
       synligt som vanlig HTML;
     - laddar den, kör animationen alltid till slut och slutar på opacity 1.
   `both` gör att from-läget gäller under fördröjningen, som mest 0,44 s.
   Det finns alltså inget läge där innehållet kan fastna osynligt — till
   skillnad från den GSAP-bugg som drabbade Sweet Center-bygget.
   ========================================================================= */
@keyframes anslag {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.hero .hero__welcome,
.hero .shield,
.hero h1,
.hero .rule-gold,
.hero .hero__lede,
.hero .hero__actions,
.hero .hero__where {
  animation: anslag .7s cubic-bezier(.22,.61,.36,1) both;
}
.hero .hero__welcome { animation-delay: .02s; }
.hero .shield    { animation-delay: .10s; }
.hero h1         { animation-delay: .12s; }
.hero .rule-gold { animation-delay: .22s; }
.hero .hero__lede    { animation-delay: .28s; }
.hero .hero__actions { animation-delay: .36s; }
.hero .hero__where   { animation-delay: .44s; }

@media (prefers-reduced-motion: reduce) {
  .hero .shield, .hero h1, .hero .rule-gold,
  .hero .hero__lede, .hero .hero__actions, .hero .hero__where { animation: none; }
}

/* --- Telefonnummer i sidhuvudet, desktop -------------------------------
   Butikens viktigaste handling ska inte kräva att man scrollar. */
.head-call {
  display: none;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: .4rem .9rem;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.head-call:hover {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border-color: var(--gold);
}
@media (min-width: 62rem) { .head-call { display: inline-flex; } }

/* =========================================================================
   PREMIUMPASS 9 — hovertillstånd och textanslag

   Textanimationen delar rubriker i ORD, inte rader. Radindelning kräver
   mätning och måste göras om vid varje omflöde; ord flödar om av sig själva
   och överlever både resize och zoom.

   Allt nedan LÄGGS TILL av JavaScript. Kör inte skriptet får man vanlig
   synlig text — aldrig tom yta.
   ========================================================================= */
.word-reveal { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word-reveal > span {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform .62s cubic-bezier(.22,.61,.36,1), opacity .5s ease;
}
.is-in .word-reveal > span,
.word-reveal.is-in > span { transform: none; opacity: 1; }

/* --- Hover: dörrkorten -------------------------------------------------- */
.door__head { transition: border-top-width .3s var(--ease); }
.door:hover .door__head { border-top-width: 5px; }
.door__name { transition: transform .35s var(--ease); }
.door:hover .door__name { transform: translateX(3px); }

/* --- Hover: knappar får en ljusstrimma ---------------------------------- */
.btn--solid { position: relative; overflow: hidden; }
.btn--solid::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent,
              color-mix(in srgb, #fff 34%, transparent), transparent);
  transition: transform .7s var(--ease);
}
.btn--solid:hover::before { transform: translateX(120%) skewX(-18deg); }
.btn--solid > * { position: relative; }

/* --- Hover: navigationen får en linje som viks in ----------------------- */
.nav__link { position: relative; }
.nav__link::before {
  content: "";
  position: absolute;
  left: .75rem; right: .75rem; bottom: .3rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__link:hover::before { transform: scaleX(1); }
.nav__link[aria-current="page"]::before { display: none; }

/* --- Hover: menyrader, priset kliver fram ------------------------------- */
.menu-row__price { transition: transform .22s var(--ease); }
.menu-row:hover .menu-row__price { transform: translateX(-3px); }

/* --- Hover: bilder andas ------------------------------------------------ */
.photo img, .gallery .photo img { transition: transform .8s var(--ease); }
.photo:hover img { transform: scale(1.04); }

/* --- Hover: recensions- och tjänstekort lyfts --------------------------- */
.review, .svc {
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.review:hover, .svc:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 65%, transparent), var(--shadow-lift);
}
.svc__mark { transition: transform .45s var(--ease); }
.svc:hover .svc__mark { transform: scale(1.08) rotate(-4deg); }

/* --- Hover: sidfotens länkar -------------------------------------------- */
.site-foot__links a { position: relative; }
.site-foot__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: .35rem;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s var(--ease);
}
.site-foot__links a:hover { text-decoration: none; }
.site-foot__links a:hover::after { transform: scaleX(1); }

/* --- Hover: märket i sidhuvudet ----------------------------------------- */
.brand img { transition: transform .5s var(--ease); }
.brand:hover img { transform: rotate(-6deg) scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .word-reveal > span { transform: none !important; opacity: 1 !important; transition: none; }
  .door:hover .door__head { border-top-width: 3px; }
  .door:hover .door__name,
  .photo:hover img,
  .review:hover, .svc:hover,
  .svc:hover .svc__mark,
  .brand:hover img { transform: none; }
  .btn--solid::before { display: none; }
}

/* Sidhuvudets rubrik får samma anslag som heron — REN CSS.
   Den ligger ovanför vecket och fick först ordvis JS-animation, vilket hade
   lämnat sidtiteln permanent osynlig om observern aldrig triggade. */
.page-head .shield,
.page-head h1,
.page-head__lede {
  animation: anslag .7s cubic-bezier(.22,.61,.36,1) both;
}
.page-head .shield  { animation-delay: .04s; }
.page-head h1       { animation-delay: .12s; }
.page-head__lede    { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .page-head .shield, .page-head h1, .page-head__lede { animation: none; }
}

/* =========================================================================
   Hjälpklasser som ersätter inline style=""
   Skälet är säkerhet, inte städning: med noll inline-stilar och noll
   inline-skript kan CSP sättas utan 'unsafe-inline', vilket är skillnaden
   mellan en policy som stoppar XSS och en som inte gör det.
   ========================================================================= */
.label--wide { letter-spacing: .18em; }
.plain-link { text-decoration: none; color: inherit; }
.bare-foot { border: 0; padding-top: 1.1rem; }
.icon-link--start { justify-content: flex-start; }
.m0 { margin: 0; }
.mt-sm { margin-top: .5rem; }
.mb-sm { margin-bottom: .9rem; }
.mb-md { margin-bottom: 1rem; }
.dim { opacity: .85; }
.on-shield-dim { color: color-mix(in srgb, var(--on-shield) 75%, transparent); }
.foot-brand-name { font-family: var(--font-display); font-size: var(--step-1); }
.hero--tall { min-height: 60vh; display: grid; align-items: center; }

/* =========================================================================
   PREMIUMPASS 11 — Kontakt: sidhuvud och spaltbalans
   ========================================================================= */

/* Kontakt var enda sidan med ljust sidhuvud — de tre avdelningssidorna fick
   mörka bildhuvuden i pass 3. Den här varianten är mörk utan bild, så sajten
   hänger ihop utan att låtsas ha ett foto på butiken som inte finns. */
.page-head--dark {
  background: var(--shield);
  color: var(--on-shield);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}
.page-head--dark h1 { color: var(--on-shield); }
.page-head--dark .page-head__lede { color: #D8CDBB; }
.page-head--dark .shield {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent);
  border-color: color-mix(in srgb, var(--gold) 80%, transparent);
}
.page-head--dark .shield .label { color: var(--gold); }
.page-head--dark .hero__frame {
  border-color: color-mix(in srgb, var(--gold) 75%, transparent);
  opacity: .6;
}
.page-head--dark .hero__frame::before,
.page-head--dark .hero__frame::after { background: var(--gold); }

/* Kartan slutade på 4:3 medan textspalten fortsatte, vilket lämnade ett
   tomrum på halva sidan. Nu sträcker den sig till radens höjd. */
@media (min-width: 56rem) {
  .visit { align-items: stretch; }
  .visit > * { min-width: 0; }
  .map { aspect-ratio: auto; height: 100%; min-height: 24rem; }
}

/* Sociala länkar med märke framför */
.social-link { display: inline-flex; align-items: center; gap: .55rem; }
.social-link svg { flex: none; color: var(--accent, var(--ink-muted)); }

/* =========================================================================
   PREMIUMPASS 12 — heron blir inbjudande

   Den var elegant men sträng: platt espresso, ren typografi, ingen värme.
   Tre grepp, alla i befintliga tokens:
     1. Varmt ljus, som från en skyltfönsterlampa snett uppifrån.
     2. En hälsning — "Välkommen" är genrekonventionen på svenska cafésajter
        (Café Husaren, Bruket, Kaffestugan öppnar alla så) och läser som värme,
        inte som kliché.
     3. Mjukare kant mot cremen nedanför.
   ========================================================================= */

/* Två förskjutna ljuskällor. Radiella gradienter i guld och terrakotta på
   låg opacitet gör espresson varm i stället för platt svart. Ligger under
   grainet och över bakgrunden. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 68% at 22% 8%,
      color-mix(in srgb, var(--gold) 26%, transparent) 0%,
      transparent 62%),
    radial-gradient(46% 60% at 88% 96%,
      color-mix(in srgb, var(--mat-fill) 20%, transparent) 0%,
      transparent 58%);
}
/* INTE .hero > * — den regeln slog ut .hero__frame:s position: absolute, och
   ramen ritades då som ett vanligt block rakt genom innehållet. Stapla med
   z-index i stället, så behåller ramen sin positionering. */
.hero::before { z-index: 0; }
.hero__frame  { z-index: 1; }
.hero__inner  { z-index: 2; }

/* Hälsningen sitter över kronskölden och sätter tonen innan rubriken. */
.hero__welcome {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--step-2);
  color: var(--gold);
  line-height: 1;
}

/* Övergången till cremen mjukas upp — hård kant läste som avklippt. */
.hero {
  box-shadow: inset 0 -70px 60px -60px color-mix(in srgb, var(--bg) 26%, transparent);
}

@media (max-width: 34rem) {
  .hero__welcome { font-size: var(--step-1); }
}

/* =========================================================================
   PREMIUMPASS 13 — menyn får hierarki

   Elva identiska kort i ett platt rutnät gav ingen ingång: Crêpes vägde
   exakt lika mycket som Frappe. Menyn delas i två register — att äta och
   att dricka — vilket är hur någon faktiskt bestämmer sig. Ingen ny
   information, bara gruppering av den som redan fanns.
   ========================================================================= */
.menu-tier {
  font-size: var(--step-3);
  color: var(--ink);
  line-height: 1.1;
}
.menu-tier-gap { margin-top: clamp(2.5rem, 5vw, 3.75rem); }

/* Registerrubriken får en guldlinje som löper ut i marginalen — samma
   avdelarmotiv som heron och menytavlorna. */
.menu-tier {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.menu-tier::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--gold) 70%, transparent), transparent);
}