/* ==================================================================
   PIZZERIATEMAT (theme.mode = "pizzeria"): "Från deg till pizza". Laddas efter styles.css och skriver bara över.
   Mörk kol-yta med mjuk glöd. Två stilar: data-style="modern" (Anton-rubriker i tomatrött med vit kontur, klistermärken i
   Titan One, såsdroppar) och data-style="klassisk" (Young Serif, kräm, inga droppar/klistermärken). Scenerna byggs av pizzeria.js.
   Rörelse: bara transform/opacity/clip-path; allt som inte syns pausas (.is-live, body.seq-cover).
================================================================== */
:root[data-theme="pizzeria"] {
  --bg: #0C0B0A; --bg2: #171412; --text: #F4E9D8; --text-soft: #BBAC98;
  --accent: #D7301F; --brass: #E8A04A; --glow1: #4A1C0E; --glow2: #26130A;
  --stroke: #FFF6EA; --word: #C4261B; --font-sticker: "Titan One", "Arial Rounded MT Bold", sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --t-hero: clamp(3.6rem, 2rem + 13vw, 17rem);
}
/* Enfärgad kol-yta med mjuk glöd (ingen bildtextur) */
:root[data-theme="pizzeria"] .pz-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--bg);
}
:root[data-theme="pizzeria"] .glows i:nth-child(1) { background: var(--glow1); opacity: .85; }
:root[data-theme="pizzeria"] .glows i:nth-child(2) { background: var(--glow2); }
:root[data-theme="pizzeria"] .glows i:nth-child(3) { background: color-mix(in srgb, var(--accent) 35%, var(--bg)); opacity: .4; }
:root[data-theme="pizzeria"] .site-footer, :root[data-theme="pizzeria"] .room { background: color-mix(in srgb, var(--bg2) 55%, transparent); }

/* Typografi */
:root[data-theme="pizzeria"] .display, :root[data-theme="pizzeria"] .hero__title, :root[data-theme="pizzeria"] .about__statement,
:root[data-theme="pizzeria"] .quote__text, :root[data-theme="pizzeria"] .lede, :root[data-theme="pizzeria"] .plates__caption h3,
:root[data-theme="pizzeria"] .menu-cat h3, :root[data-theme="pizzeria"] .evening__time, :root[data-theme="pizzeria"] .book__title,
:root[data-theme="pizzeria"] .site-footer__word, :root[data-theme="pizzeria"] .loader__word, :root[data-theme="pizzeria"] .nav-overlay__links a,
:root[data-theme="pizzeria"] .wow__cap, :root[data-theme="pizzeria"] .hours-sec__statement, :root[data-theme="pizzeria"] .pz-h,
:root[data-theme="pizzeria"] .bookmodal__title, :root[data-theme="pizzeria"] .wordmark, :root[data-theme="pizzeria"] .hero__welcome,
:root[data-theme="pizzeria"] .dish__price, :root[data-theme="pizzeria"] .plates__hint, :root[data-theme="pizzeria"] .ribbon__track span, :root[data-theme="pizzeria"] .pz-dish b {
  font-family: var(--font-display); font-variation-settings: normal; font-style: normal; font-weight: 400;
}
:root[data-style="modern"] .hero__title, :root[data-style="modern"] .about__statement, :root[data-style="modern"] .menu-cat h3,
:root[data-style="modern"] .site-footer__word, :root[data-style="modern"] .loader__word, :root[data-style="modern"] .nav-overlay__links a,
:root[data-style="modern"] .book__title, :root[data-style="modern"] .hours-sec__statement, :root[data-style="modern"] .pz-h,
:root[data-style="modern"] .wow__cap, :root[data-style="modern"] .wordmark, :root[data-style="modern"] .plates__caption h3, :root[data-style="modern"] .bookmodal__title, :root[data-style="modern"] .pz-dish b {
  text-transform: uppercase; letter-spacing: .01em;
}
:root[data-style="modern"] .pz-h, :root[data-style="modern"] .hero__title, :root[data-style="modern"] .site-footer__word {
  color: var(--accent);
  -webkit-text-stroke: .04em var(--stroke); paint-order: stroke fill;
  text-shadow: 0 .05em .35em rgba(0, 0, 0, .55);
}
:root[data-style="modern"] .hero__title { -webkit-text-stroke-width: .035em; }
:root[data-style="klassisk"] .pz-h, :root[data-style="klassisk"] .hero__title { color: var(--text); text-shadow: 0 2px 30px rgba(0, 0, 0, .6); }
:root[data-theme="pizzeria"] .hero__title { line-height: .88; letter-spacing: 0; margin: 14px 0 30px; }
:root[data-theme="pizzeria"] .hero__title em, :root[data-theme="pizzeria"] .about__statement em { font-style: normal; font-weight: 400; color: inherit; }
:root[data-theme="pizzeria"] .hero__sub { font-family: var(--font-body); font-weight: 300; font-size: clamp(1.15rem, 1rem + 1.2vw, 1.8rem); color: var(--text); margin: -8px 0 30px; max-width: 34ch; }
:root[data-theme="pizzeria"] .lede { font-family: var(--font-body); font-weight: 300; line-height: 1.22; letter-spacing: 0; }
:root[data-theme="pizzeria"] .wordmark { font-size: 1.4rem; letter-spacing: .02em; }
:root[data-theme="pizzeria"] .menu-cat h3 { font-size: clamp(2.2rem, 1.5rem + 3.6vw, 4.6rem); line-height: .95; letter-spacing: .01em; color: var(--text); }
:root[data-theme="pizzeria"] .plates__caption h3 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem); }
:root[data-theme="pizzeria"] .dish__price { font-size: 1.05em; letter-spacing: .02em; }
:root[data-theme="pizzeria"] .site-footer__word { font-size: clamp(5rem, 24vw, 22rem); line-height: .86; letter-spacing: 0; margin-left: -.02em; }
:root[data-theme="pizzeria"] .loader__word { font-style: normal; font-weight: 400; letter-spacing: .01em; color: var(--text); }
:root[data-style="modern"] .loader__word { color: var(--accent); -webkit-text-stroke: .03em var(--stroke); paint-order: stroke fill; }
:root[data-theme="pizzeria"] .loader__theme {
  position: absolute; left: 0; right: 0; top: 34%; margin: 0; text-align: center;
  font-family: var(--font-sticker); font-size: clamp(1.1rem, 1rem + 1.2vw, 1.7rem); color: var(--brass); letter-spacing: .03em;
  display: flex; justify-content: center; align-items: center; gap: .55em;
  opacity: 0; animation: fadeup .9s var(--ease-out) .15s forwards;
}
:root[data-theme="pizzeria"] .loader__theme i { width: .55em; height: .55em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px 4px color-mix(in srgb, var(--brass) 70%, transparent); animation: ember 1.3s ease-in-out infinite alternate; }
@keyframes ember { from { transform: scale(.7); opacity: .6; } to { transform: scale(1.15); opacity: 1; } }
:root[data-theme="pizzeria"] .eyebrow { font-family: var(--font-body); font-weight: 400; letter-spacing: .14em; }
:root[data-theme="pizzeria"] .hero .eyebrow { background: none; border: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--brass); font-size: .9rem; }
:root[data-theme="pizzeria"] body { font-weight: 300; }
:root[data-theme="pizzeria"] .about__body p, :root[data-theme="pizzeria"] .dish__text, :root[data-theme="pizzeria"] .book__note { font-weight: 300; }
:root[data-theme="pizzeria"] .dish__name, :root[data-theme="pizzeria"] .btn, :root[data-theme="pizzeria"] .nav-toggle, :root[data-theme="pizzeria"] .menu__tabs a, :root[data-theme="pizzeria"] .site-nav a { font-weight: 400; }
:root[data-theme="pizzeria"] .btn { letter-spacing: .06em; text-transform: uppercase; font-size: .9rem; }
:root[data-theme="pizzeria"] .btn--accent { color: #fff; }
:root[data-theme="pizzeria"] .btn--accent:hover { color: var(--accent); }
:root[data-theme="pizzeria"] .btn--accent .glass__liquid { fill: #fff; }
:root[data-theme="pizzeria"] .glass { display: none; }   /* vinglaset hör till restaurangen */
/* Versala Å/Ä/Ö: ordmasken (.wd, overflow hidden) får inte klippa ringen/prickarna */
:root[data-theme="pizzeria"] .wd { padding-top: .34em; margin-top: -.34em; }

/* Sektionsetiketter som klistermärken (modern), ingen numrering i pizzeriatemat */
:root[data-theme="pizzeria"] .section__num { display: none; }
:root[data-theme="pizzeria"] .section__head { gap: 0; padding-bottom: 18px; }
:root[data-style="modern"] .section__label, :root[data-style="modern"] .plates__head .section__label, :root[data-style="modern"] .evening__label {
  display: inline-block; font-family: var(--font-sticker); text-transform: none; letter-spacing: .02em; font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem);
  color: var(--bg); background: var(--brass); padding: .28em .7em .22em; border-radius: .45em; border: 2px solid var(--stroke);
  transform: rotate(var(--r, -2deg)); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
:root[data-style="klassisk"] .section__label { font-family: var(--font-display); text-transform: none; letter-spacing: 0; font-size: 1.3rem; color: var(--brass); }
:root[data-theme="pizzeria"] .section__head::after { background: color-mix(in srgb, var(--brass) 30%, transparent); }

/* Sidhuvud: Meny direkt + Beställ alltid synlig (dator i sidhuvudet, mobil flytande knapp) */
:root[data-theme="pizzeria"] .header-menu { font-size: var(--t-sm); letter-spacing: .08em; text-transform: uppercase; padding: .6em .2em; }
@media (min-width: 900px) { :root[data-theme="pizzeria"] .header-menu { display: none; } }
:root[data-theme="pizzeria"] .nav-toggle { padding: .6em .8em; }
.order-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 55;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .95em 1.5em; border-radius: 999px; background: var(--accent); color: #fff; border: 2px solid var(--stroke);
  font-weight: 500; font-size: .92rem; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .7);
  transition: transform .16s var(--ease-out), box-shadow .3s var(--ease), opacity .3s;
}
.order-fab:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .order-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(0, 0, 0, .75); } }
@media (min-width: 900px) { .order-fab { display: none; } }
body.nav-open .order-fab { opacity: 0; pointer-events: none; }

/* Hero inifrån vedugnen: namnet tonar fram när loadern lyfts */
:root[data-theme="pizzeria"] .hero--oven .hero__title .wd > span { animation: none; transform: none; }
:root[data-theme="pizzeria"] .hero--oven .hero__title { opacity: .01; transform: translate3d(0, 18px, 0) scale(.985); transition: opacity 1.3s var(--ease), transform 1.6s var(--ease-out); }
:root[data-theme="pizzeria"].is-loaded .hero--oven .hero__title { opacity: 1; transform: none; }
:root[data-theme="pizzeria"] .hero .eyebrow, :root[data-theme="pizzeria"] .hero__actions, :root[data-theme="pizzeria"] .hero__today, :root[data-theme="pizzeria"] .hero__sub { opacity: 0; animation: none; transition: opacity 1s var(--ease) .5s, transform 1.2s var(--ease-out) .5s; transform: translate3d(0, 14px, 0); }
:root[data-theme="pizzeria"] .hero__sub { transition-delay: .35s; }
:root[data-theme="pizzeria"] .hero__actions { transition-delay: .7s; }
:root[data-theme="pizzeria"].is-loaded .hero .eyebrow, :root[data-theme="pizzeria"].is-loaded .hero__actions, :root[data-theme="pizzeria"].is-loaded .hero__today, :root[data-theme="pizzeria"].is-loaded .hero__sub { opacity: 1; transform: none; }
:root[data-theme="pizzeria"] .hero__media::after { background: linear-gradient(180deg, rgba(12, 11, 10, .5) 0%, rgba(12, 11, 10, .08) 30%, rgba(12, 11, 10, .35) 62%, rgba(12, 11, 10, .97) 100%); }
:root[data-theme="pizzeria"] .hero__media img { animation-duration: 18s; }
.hero__heat { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background: radial-gradient(60% 45% at 50% 62%, rgba(255, 140, 40, .35), transparent 70%); animation: heat 2.4s ease-in-out infinite alternate; }
@keyframes heat { from { opacity: .35; transform: scale(1); } to { opacity: .6; transform: scale(1.04); } }
body.seq-cover .hero__heat { animation-play-state: paused; }
@media (min-width: 900px) { :root[data-theme="pizzeria"] .hero__content { padding-bottom: clamp(44px, 10vh, 110px); } }

/* Reveal från olika håll */
[data-reveal][data-from="left"] { transform: translate3d(-44px, 0, 0); }
[data-reveal][data-from="right"] { transform: translate3d(44px, 0, 0); }
[data-reveal].is-in { transform: none; }

/* Klistermärken */
.sticker {
  position: absolute; z-index: 6; display: inline-block;
  font-family: var(--font-sticker); font-size: clamp(.95rem, .8rem + 1.1vw, 1.55rem); letter-spacing: .03em; text-transform: uppercase; line-height: 1;
  color: var(--bg); background: var(--brass); padding: .42em .75em .36em; border-radius: .5em; border: 3px solid var(--stroke);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45); transform: rotate(var(--r, -6deg)); transform-origin: 50% 50%;
  opacity: 0; pointer-events: none; white-space: nowrap;
}
.sticker--cream { background: var(--stroke); color: var(--accent); }

/* Såsdroppar (modern): SVG ovanpå rubriken, klippt vid överkanten; varje droppe glider ned från ovansidan när rubriken får .is-in */
.drip { position: relative; }
.drips { position: absolute; left: 0; top: .07em; width: 100%; height: 1.05em; overflow: hidden; pointer-events: none; z-index: 2; }
/* Varje droppe är ett eget <svg> (HTML-element: transform-övergången komposit-animeras; som <g> i en svg gick den via layout + paint varje bildruta, 2026-10-29) */
.drips__m { position: absolute; inset: 0; transform: translateY(var(--l, -60px)); transition: transform 1.6s cubic-bezier(.3, .6, .2, 1); }   /* två grupper per rubrik, se pizzeria.js */
.drips__d { position: absolute; top: 0; overflow: visible; fill: #E8392A; }
.is-in > .drips .drips__m { transform: translateY(0); }
.drips__hi { fill: rgba(255, 255, 255, .45); }
:root[data-style="klassisk"] .drips { display: none; }
@media (prefers-reduced-motion: reduce) { .drips__m { transition: none; transform: translateY(0); } }
/* Oändliga animationer bara när de syns: heron (bildzoom, värmedis, scrollpil) och laddskärmens glödpunkt */
.hero:not(.is-live) .hero__media img, .hero:not(.is-live) .hero__heat, .hero:not(.is-live) .hero__scroll span { animation-play-state: paused; }
.loader.is-done .loader__theme i, .loader.is-done .loader__word span { animation: none; }

/* ------------------------------------------------------------------
   Byggscenen (#scene-bygg): fäst helskärmsscen. Ordet bakom, pizzan framför (djup), bitar bakom/framför, infoblock åt sidorna.
------------------------------------------------------------------- */
.pz-build { position: relative; height: 560vh; }
.pz-build__stage, .pz-oven__stage, .pz-serve__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--bg); isolation: isolate; }
.pz-build__glow { position: absolute; inset: -20%; pointer-events: none; z-index: 0;
  background: radial-gradient(50% 42% at 50% 56%, rgba(214, 92, 30, .34), rgba(120, 40, 12, .12) 45%, transparent 70%); }
.pz-word { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; }
/* Kapitelordet (Lokes punkt 3, 2026-10-28): fullt synligt – ordet ligger i övre delen av scenen och pizzan under, så pizzan bara
   täcker en liten del av ordets nederkant (dator: ord högst 26 % av skärmhöjden, pizza med mitten på 62 %; mobil: ord ovanför, pizza på 55 %).
   Full opacitet, tomatrött med kräm-kontur och mörk skugga mot kolytan. Klassisk stil: krämvitt med skugga (inte längre genomskinligt). */
.pz-word__w {
  grid-area: 1 / 1; line-height: .82; white-space: nowrap; opacity: 0; will-change: transform, opacity;
  color: var(--word); -webkit-text-stroke: .035em var(--stroke); paint-order: stroke fill; text-shadow: 0 .04em .12em rgba(0, 0, 0, .7), 0 .1em .5em rgba(0, 0, 0, .55);
}
:root[data-theme="pizzeria"] .pz-word__w { color: var(--word); }
:root[data-style="klassisk"] .pz-word__w { color: var(--text); -webkit-text-stroke: 0; text-shadow: 0 .04em .12em rgba(0, 0, 0, .7), 0 .1em .5em rgba(0, 0, 0, .55); }
.pz-build .pz-word { align-items: start; padding-top: calc(var(--header-h) + 4svh); }
.pz-build .pz-swirl { align-self: center; }
.pz-fly-layer { position: absolute; inset: 0; pointer-events: none; }
.pz-fly-layer--back { z-index: 2; }
.pz-fly-layer--front { z-index: 5; }
.pz-fly { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
/* inga drop-shadow-filter på bitar som flyttas per bildruta: varje filtrerat lager blir en egen renderyta varje bildruta (2026-10-29) */
.pz-pizza {
  position: absolute; left: 50%; top: 50%; z-index: 3; width: min(92vw, 56svh); aspect-ratio: 1;
  transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity;
}
/* Skuggan under pizzan är ett gradientelement (inget drop-shadow-filter: filtret rastrerades om varje bildruta när pizzan roterade och lagren tonade, 2026-10-29) */
.pz-pizza__shadow { position: absolute; left: 4%; right: 4%; bottom: -6%; height: 26%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 70%); }
/* Såsen sprids som en cirkel: en rund klippram som skalas (transform) med bilden i motsatt skala – ingen clip-path per bildruta (repaint) */
.pz-clip { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; transform: scale(0); visibility: hidden; will-change: transform; }
.pz-clip .pz-state { will-change: transform; }
@media (min-width: 900px) { .pz-pizza { top: 62%; width: min(60svh, 38vw); } }
@media (max-width: 899px) {
  .pz-pizza { top: 55%; width: min(72vw, 42svh); }   /* mobil: något mindre (Lokes punkt 4, 2026-10-29: 84 → 72 vw) */
  .pz-build .pz-word { align-items: start; padding-top: calc(var(--header-h) + 9svh); }
}
.pz-pizza__spin { position: absolute; inset: 0; animation: pzspin 16s ease-in-out infinite alternate; animation-play-state: paused; will-change: transform; }
.is-live .pz-pizza__spin { animation-play-state: running; }
@keyframes pzspin { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.pz-state { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; will-change: opacity; }
.pz-land { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }

.pz-info {
  position: absolute; z-index: 4; opacity: 0; will-change: transform, opacity;
  color: #241610; font-family: var(--font-body); font-weight: 400; font-size: clamp(.92rem, .88rem + .3vw, 1.05rem); line-height: 1.45;
}
.pz-info--about { background: var(--stroke); padding: clamp(16px, 2.4vw, 28px); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); rotate: -1.5deg; }
.pz-info__ex { display: inline-block; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.pz-info h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .01em; }
:root[data-style="klassisk"] .pz-info h3, :root[data-style="klassisk"] .pz-dish b { text-transform: none; }
.pz-info p { margin: 0; max-width: 30ch; color: #3A2A20; }
.pz-info--dishes { display: grid; gap: 12px; }
.pz-info--dishes .pz-info__ex { color: var(--brass); }
.pz-dish { opacity: 0; will-change: transform, opacity; padding: 12px 16px 11px; background: var(--stroke); color: #241610; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8); rotate: 1.2deg; }
.pz-dish:nth-child(odd) { rotate: -1.4deg; }
.pz-dish b { display: block; font-weight: 400; font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem); line-height: 1; color: var(--accent); }
.pz-dish span { display: block; margin-top: 4px; color: #3A2A20; font-size: .9em; }
.pz-stick { z-index: 6; }
.pz-build .ex-badge, .pz-oven .ex-badge, .pz-serve .ex-badge { left: var(--gutter); bottom: 14px; transform: none; z-index: 7; }
.pz-build__hint { bottom: clamp(18px, 3.5vh, 34px); z-index: 7; }
.pz-build__progress { z-index: 7; }
@media (max-width: 899px) {
  .pz-info--about { left: var(--gutter); right: 22vw; bottom: 7svh; padding: 14px 16px; font-size: .86rem; line-height: 1.4; }
  .pz-info--about h3 { font-size: 1.25rem; margin-bottom: 6px; }
  .pz-info--about p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .pz-info--dishes { left: var(--gutter); right: var(--gutter); bottom: 7svh; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pz-info--dishes .pz-info__ex { grid-column: 1 / -1; margin-bottom: 0; }
  .pz-dish { padding: 7px 10px 6px; }
  .pz-dish:nth-child(4) { grid-column: 1 / -1; width: 60%; justify-self: center; }
  .pz-dish b { font-size: 1rem; }
  .pz-dish span { font-size: .72rem; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .pz-stick--a { left: var(--gutter); top: calc(var(--header-h) + 2svh); }
  .pz-stick--b { right: var(--gutter); top: calc(var(--header-h) + 2.5svh); }
  .pz-build__hint { display: none; }
}
@media (min-width: 900px) {
  .pz-info--about { left: var(--gutter); top: 50%; transform: translateY(-50%); width: 24vw; }
  .pz-info--dishes { right: var(--gutter); top: 50%; transform: translateY(-50%); width: 22vw; }
  .pz-stick--a { left: 26vw; top: 38vh; }
  .pz-stick--b { right: 25vw; top: 36vh; }
}
.pz-build.is-still { height: auto; }
.pz-build.is-still .pz-build__stage { position: relative; }
.pz-build.is-still .pz-pizza, .pz-build.is-still .pz-info, .pz-build.is-still .pz-dish, .pz-build.is-still .pz-stick { opacity: 1; transform: translate(-50%, -50%); }
.pz-build.is-still .pz-info, .pz-build.is-still .pz-dish, .pz-build.is-still .pz-stick { transform: none; }
.pz-build.is-still .pz-fly-layer { display: none; }

/* ------------------------------------------------------------------
   GRÄDDA (#oven): bildsekvens kant till kant (stående set på mobil, liggande 16:9-set på dator). Ordet GRÄDDA ligger ovanpå
   rutan i övre delen, med en mörk toning uppifrån så det syns; pizzan i nedre delen av rutan förblir fri.
------------------------------------------------------------------- */
.pz-oven { position: relative; height: 380vh; }
.pz-oven__poster, .pz-oven__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.pz-oven__poster { object-fit: cover; }
/* Lätt läge (LoonaMode): tre stillbilder ur ugnssekvensen som tonar över varandra med scrollen (pizzeria.js) */
.pz-oven__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; opacity: 0; will-change: opacity; }
.pz-oven__canvas { opacity: 0; transition: opacity .3s var(--ease); }
.pz-oven__canvas.is-on { opacity: 1; }
.pz-oven__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 11, 10, .78) 0%, rgba(12, 11, 10, .45) 34%, rgba(12, 11, 10, 0) 58%, rgba(12, 11, 10, 0) 80%, rgba(12, 11, 10, .55) 100%); }
.pz-oven .pz-word { z-index: 3; align-items: start; padding-top: calc(var(--header-h) + 6svh); }
.pz-oven .pz-word__w { color: var(--accent); -webkit-text-stroke: .035em var(--stroke); text-shadow: 0 .05em .35em rgba(0, 0, 0, .7); }
:root[data-style="klassisk"] .pz-oven .pz-word__w { color: var(--text); -webkit-text-stroke: 0; }
.pz-oven__line {
  position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: clamp(60px, 11svh, 110px); margin: 0; opacity: 0; will-change: transform, opacity;
  font-family: var(--font-body); font-weight: 300; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); color: var(--text); text-shadow: 0 2px 18px rgba(0, 0, 0, .8);
}
@media (min-width: 900px) {
  .pz-oven .pz-word { padding-top: calc(var(--header-h) + 9svh); }
  .pz-oven__line { left: auto; right: 7vw; bottom: 9svh; width: 22vw; text-align: right; }
}
.pz-oven.is-still { height: auto; }
.pz-oven.is-still .pz-oven__stage { position: relative; }

/* ------------------------------------------------------------------
   SERVERA (#scene-servera): färdig pizza stor i mitten, ånga, Beställ/Ring. Kommer in med CSS-övergångar (.is-in).
------------------------------------------------------------------- */
.pz-serve { position: relative; }
.pz-serve__stage { position: relative; }
.pz-serve .pz-word__w { opacity: 0; transition: opacity 1.2s var(--ease), transform 1.4s var(--ease-out); transform: scale(.94); }
.pz-serve.is-in .pz-word__w { opacity: 1; transform: none; }
.pz-serve__pizza {
  position: absolute; left: 50%; top: 46%; z-index: 3; width: min(88vw, 52svh); aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.8); opacity: 0; transition: opacity 1s var(--ease) .15s, transform 1.6s var(--ease-out) .15s;
}
.pz-serve.is-in .pz-serve__pizza { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pz-serve__pizza img { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (min-width: 900px) { .pz-serve__pizza { width: min(62svh, 38vw); top: 50%; } }
@media (max-width: 899px) { .pz-serve .pz-word { align-items: start; padding-top: calc(var(--header-h) + 10svh); } .pz-serve__pizza { top: 48%; width: min(72vw, 44svh); } }
.pz-steam { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; }
.pz-steam i {
  position: absolute; left: var(--x, 0); top: -40px; width: 140px; height: 140px; margin-left: -70px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 234, .4) 0%, rgba(255, 246, 234, .12) 40%, transparent 68%);
  opacity: 0; transform: translate3d(0, 0, 0) scale(var(--s, 1));
}
.is-live .pz-steam i { animation: steam 6.5s ease-out var(--d, 0s) infinite; }   /* ingen animation (= inget lager) förrän SERVERA syns */
@keyframes steam {
  0% { opacity: 0; transform: translate3d(0, 40px, 0) scale(calc(var(--s, 1) * .6)); }
  20% { opacity: .5; }
  100% { opacity: 0; transform: translate3d(calc(var(--x, 0) * -.4), -300px, 0) scale(calc(var(--s, 1) * 1.8)); }
}
.pz-serve__text { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: clamp(60px, 10svh, 100px); text-align: center; opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .9s var(--ease) .5s, transform 1.1s var(--ease-out) .5s; }
.pz-serve.is-in .pz-serve__text { opacity: 1; transform: none; }
.pz-serve__line { margin: 0 0 18px; font-family: var(--font-body); font-weight: 300; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); color: var(--text); text-shadow: 0 2px 18px rgba(0, 0, 0, .8); }
.pz-serve__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 22px; align-items: center; }
@media (min-width: 900px) {
  .pz-serve__text { left: auto; right: 6vw; bottom: auto; top: 50%; width: 24vw; text-align: left; transform: translate3d(0, calc(-50% + 20px), 0) rotate(1.5deg);
    background: var(--stroke); color: #241610; padding: clamp(18px, 2.4vw, 30px); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); }
  .pz-serve.is-in .pz-serve__text { transform: translateY(-50%) rotate(1.5deg); }
  .pz-serve__text .pz-serve__line { color: #241610; text-shadow: none; font-size: clamp(1.3rem, 1rem + 1.1vw, 2rem); }
  .pz-serve__text .btn--ghost { color: #241610; border-color: rgba(36, 22, 16, .4); }
  .pz-serve__text .btn--ghost:hover { background: #241610; color: var(--stroke); }
  .pz-serve__actions { justify-content: flex-start; }
}

/* ------------------------------------------------------------------
   Om oss: statement i rött med kontur, texten på en krämfärgad lapp, bilden som snedställt fotokort med vit ram.
------------------------------------------------------------------- */
:root[data-style="modern"] .about__statement { color: var(--accent); -webkit-text-stroke: .035em var(--stroke); paint-order: stroke fill; text-shadow: 0 .05em .35em rgba(0, 0, 0, .55); }
:root[data-theme="pizzeria"] .about__statement { font-size: clamp(2.8rem, 1.4rem + 7vw, 8.4rem); line-height: .9; max-width: 12ch; }
:root[data-theme="pizzeria"] .about__body { position: relative; }
:root[data-theme="pizzeria"] .about__body > div:first-of-type {
  background: var(--stroke); color: #241610; padding: clamp(22px, 3vw, 36px); transform: rotate(-1.2deg);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); font-weight: 400;
}
:root[data-theme="pizzeria"] .about__body p { color: #3A2A20; font-size: calc(var(--t-md) * 1.04); }
:root[data-theme="pizzeria"] .about__body .ex-note { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); margin: 0 0 16px; }
:root[data-theme="pizzeria"] .about__figure { aspect-ratio: 4 / 5; padding: 10px 10px 48px; background: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85); overflow: hidden; }
:root[data-theme="pizzeria"] .about__figure img { width: 100%; height: 100%; object-fit: cover; }
:root[data-theme="pizzeria"] .about__figure::after { display: none; }
:root[data-theme="pizzeria"] .about__figure img { transform: none; }
:root[data-theme="pizzeria"] .about__figure { opacity: 0; transform: translate3d(50px, 0, 0) rotate(6deg); transition: opacity .9s var(--ease), transform 1.2s var(--ease-out); }
:root[data-theme="pizzeria"] .about__figure.is-in { opacity: 1; transform: rotate(3deg); }
:root[data-theme="pizzeria"] .about__figure .ex-badge { left: 18px; bottom: 60px; }
@media (min-width: 900px) {
  :root[data-theme="pizzeria"] .about__grid { grid-template-columns: 1.4fr 1fr; grid-template-areas: "s f" "b f"; column-gap: 72px; row-gap: 44px; align-items: center; }
  :root[data-theme="pizzeria"] .about__figure { margin-top: 0; max-width: 420px; justify-self: center; }
}

/* ------------------------------------------------------------------
   Öppet: stora tider, dagarna små, i dag markerad i rött med kontur.
------------------------------------------------------------------- */
.hours-sec__statement { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); line-height: 1.2; max-width: 26ch; font-family: var(--font-body) !important; font-weight: 300; text-transform: none !important; color: var(--text-soft); margin-bottom: clamp(28px, 5vh, 56px); }
.hours-big { display: grid; }
.hours-big__row { display: grid; gap: 4px; padding: clamp(18px, 3vh, 32px) 0; border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.hours-big__row:last-child { border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.hours-big__days { font-family: var(--font-body); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; color: var(--text-soft); display: flex; align-items: center; gap: 12px; }
.hours-big__days em { font-style: normal; font-family: var(--font-sticker); letter-spacing: .03em; text-transform: uppercase; font-size: .75rem; color: var(--bg); background: var(--brass); padding: .25em .6em .2em; border-radius: .4em; border: 2px solid var(--stroke); transform: rotate(-3deg); }
:root[data-theme="pizzeria"] .hours-big__time { font-size: clamp(3rem, 1.6rem + 10vw, 8.5rem); line-height: .9; letter-spacing: 0; color: var(--text); -webkit-text-stroke: 0; text-shadow: none; font-variant-numeric: tabular-nums; }
:root[data-style="modern"] .hours-big__row.is-today .hours-big__time { color: var(--accent); -webkit-text-stroke: .035em var(--stroke); paint-order: stroke fill; text-shadow: 0 .05em .35em rgba(0, 0, 0, .55); }
:root[data-style="klassisk"] .hours-big__row.is-today .hours-big__time { color: var(--brass); }
@media (min-width: 900px) {
  .hours-big__row { grid-template-columns: 1fr auto; align-items: center; }
  .hours-big__time { text-align: right; }
}

/* Matbitar som följer pekaren / sprakar ut vid tryck */
.bits { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.bits__b { position: absolute; left: 0; top: 0; opacity: 0; }   /* will-change sätts av skriptet bara på datorns pekarspår */   /* inget filter: drop-shadow + animation var dyrt på mobil */

/* Scener som fyller skärmen: pausa glöd/grain/gnistor (samma som sekvenserna i app.js) */
body.seq-cover .pz-bg { visibility: hidden; }
:root[data-theme="pizzeria"] .hero__grain { opacity: .07; }
:root[data-theme="pizzeria"] ::selection { background: var(--accent); color: #fff; }
:root[data-theme="pizzeria"] :focus-visible { outline-color: var(--brass); }
:root[data-theme="pizzeria"] .practical__grid--pz { grid-template-columns: 1fr; }
@media (min-width: 900px) { :root[data-theme="pizzeria"] .practical__grid--pz { grid-template-columns: 1fr 1.2fr; gap: 72px; } }
:root[data-theme="pizzeria"] .book { border-color: color-mix(in srgb, var(--brass) 55%, transparent); }
:root[data-theme="pizzeria"] .book__kicker, :root[data-theme="pizzeria"] .hero__today b { color: var(--brass); }
:root[data-theme="pizzeria"] .plate__img, :root[data-theme="pizzeria"] .dish__plate, :root[data-theme="pizzeria"] .dish-peek, :root[data-theme="pizzeria"] .dish__thumb { box-shadow: 0 0 0 3px var(--stroke), 0 24px 50px -18px rgba(0, 0, 0, .9); }
:root[data-theme="pizzeria"] .plate.is-focus .plate__img { box-shadow: 0 0 0 3px var(--stroke), 0 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent), 0 30px 80px -20px rgba(0, 0, 0, .8); }
:root[data-theme="pizzeria"] .menu__tabs a.is-active, :root[data-theme="pizzeria"] .menu__tabs a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="pizzeria"] .menu__tabs a:hover:not(.is-active) { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); border-color: var(--accent); }
:root[data-theme="pizzeria"] .ex-note { color: var(--brass); border-color: color-mix(in srgb, var(--brass) 55%, transparent); }
:root[data-theme="pizzeria"] .seq-progress span { background: var(--brass); box-shadow: 0 0 10px color-mix(in srgb, var(--brass) 60%, transparent); }
:root[data-theme="pizzeria"] .site-footer__word { color: var(--accent); }
:root[data-style="klassisk"] .site-footer__word { color: var(--text); }

/* ------------------------------------------------------------------
   Samma värld efter SERVERA (Om oss, Meny, Öppet, Hitta hit): jätteord bakom, matbitar som svävar i lager, kort som glider in.
------------------------------------------------------------------- */
.pz-sec { position: relative; isolation: isolate; overflow: clip; }
.pz-sec > *:not(.pz-deco):not(.menu__tabs):not(.dish-peek) { position: relative; z-index: 1; }
.pz-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
:root[data-theme="pizzeria"] .pz-deco__word { position: absolute; left: 50%; top: clamp(70px, 9vh, 120px); transform: translateX(-50%); white-space: nowrap; line-height: .82;
  color: #5A150E; -webkit-text-stroke: .03em rgba(255, 246, 234, .42); paint-order: stroke fill; text-shadow: none; opacity: .95; }
:root[data-style="klassisk"] .pz-deco__word { color: color-mix(in srgb, var(--text) 14%, transparent); -webkit-text-stroke: 0; }
.pz-deco__layer { position: absolute; inset: 0; }   /* animationen sätts först när sektionen syns (en pausad animation ger ändå ett kompositlager) */
.pz-sec.is-live .pz-deco__layer { animation: pzfloat 14s ease-in-out infinite alternate; }
.pz-sec.is-live .pz-deco__layer--front { animation-duration: 19s; animation-direction: alternate-reverse; animation-delay: -6s; }
.pz-deco__bit { position: absolute; opacity: 0; transition: opacity 1.2s var(--ease); }

.pz-sec.is-live .pz-deco__bit { opacity: 1; }
.pz-sec.is-live .pz-deco__bit--front { opacity: .85; }
@keyframes pzfloat { from { transform: translate3d(0, 0, 0) rotate(-6deg); } to { transform: translate3d(14px, -26px, 0) rotate(8deg); } }
/* Framför-bitarna (stora, suddiga) ligger över innehållet */
.pz-sec > .pz-deco { z-index: 0; }
.pz-sec > .pz-deco .pz-deco__layer--front { z-index: 3; }
.pz-sec > .pz-deco { contain: none; }

/* z-index 3 inom .pz-deco (z 0) hamnar ändå under innehållet (z 1); lägg därför framför-bitarna i ett eget lager via :has */
.pz-sec--front > .pz-deco { z-index: auto; }   /* klassen sätts av pizzeria.js (ingen :has(): dyr stilomräkning vid varje klassbyte i menyn) */
/* Meny: varje kategori som ett krämfärgat menykort som glider in från sidan, vartannat håll */
:root[data-theme="pizzeria"] .menu-cat { background: var(--stroke); color: #241610; padding: clamp(18px, 3vw, 36px); box-shadow: 0 22px 50px -20px rgba(0, 0, 0, .85);
  transform: translate(-48px, 0) rotate(-1deg); opacity: 0; transition: transform 1.1s var(--ease-out), opacity .8s var(--ease); }
:root[data-theme="pizzeria"] .menu-cat:nth-child(even) { transform: translate(48px, 0) rotate(1deg); }
:root[data-theme="pizzeria"] .menu-cat.is-in { opacity: 1; transform: rotate(-.8deg); }
:root[data-theme="pizzeria"] .menu-cat:nth-child(even).is-in { transform: rotate(.8deg); }
:root[data-theme="pizzeria"] .menu-cat h3 { color: var(--accent); }
:root[data-theme="pizzeria"] .menu-cat .dish { opacity: 1; transform: none; transition: padding-left .4s var(--ease); }   /* raderna följer kortets glidning – inga egna staggrade övergångar (8 element per kort med pågående övergång, 2026-10-29) */
:root[data-theme="pizzeria"] .menu-cat .dish { border-color: rgba(36, 22, 16, .14); }
:root[data-theme="pizzeria"] .menu-cat .dish:last-child { border-bottom-color: rgba(36, 22, 16, .14); }
:root[data-theme="pizzeria"] .menu-cat .dish__name { color: #241610; }
:root[data-theme="pizzeria"] .menu-cat .dish__text { color: #4A382C; }
:root[data-theme="pizzeria"] .menu-cat .dish__price { color: var(--accent); }
:root[data-theme="pizzeria"] .menu-cat .badge { color: var(--accent); }
:root[data-theme="pizzeria"] .menu-cat .dish.is-near .dish__name, :root[data-theme="pizzeria"] .menu-cat .dish.is-near .dish__text { text-shadow: 0 1px 10px var(--stroke), 0 0 2px var(--stroke); }
:root[data-theme="pizzeria"] .menu-cat .dish.is-near .dish__price { background: color-mix(in srgb, var(--stroke) 80%, transparent); }
:root[data-theme="pizzeria"] .menu-cat .dish__plate::after {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--stroke) 92%, transparent) 0%, transparent 30%, transparent 70%, color-mix(in srgb, var(--stroke) 92%, transparent) 100%),
    linear-gradient(to right, var(--stroke) 0%, color-mix(in srgb, var(--stroke) 72%, transparent) 32%, transparent 62%); }
@media (hover: hover) and (min-width: 900px) { :root[data-theme="pizzeria"] .menu-cat .dish:hover .dish__name { color: var(--accent); } :root[data-theme="pizzeria"] .menu-cat .dish::before { background: var(--accent); } }
:root[data-theme="pizzeria"] .menu__lists { gap: clamp(28px, 5vh, 56px); }
@media (prefers-reduced-motion: reduce) { :root[data-theme="pizzeria"] .menu-cat, :root[data-theme="pizzeria"] .about__figure { opacity: 1 !important; transform: none !important; transition: none !important; } }
/* Öppet: raderna som krämkort som glider in från olika håll */
.hours-big { gap: 14px; }
.hours-big__row, .hours-big__row:last-child { border: 0; background: var(--stroke); color: #241610; padding: clamp(16px, 2.6vh, 28px) clamp(18px, 3vw, 36px); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); rotate: -.8deg; }
.hours-big__row:nth-child(even) { rotate: .8deg; }
.hours-big__days { color: #4A382C; }
:root[data-theme="pizzeria"] .hours-big__time { color: #241610; }
:root[data-theme="pizzeria"] .hours-sec__statement { color: var(--text); }
/* Om oss / Hitta hit: korten glider in från sidorna */
:root[data-theme="pizzeria"] .about__body > div:first-of-type { opacity: 0; transform: translate3d(-50px, 0, 0) rotate(-3deg); transition: opacity .9s var(--ease), transform 1.2s var(--ease-out); }
:root[data-theme="pizzeria"] .about__body.is-in > div:first-of-type, :root[data-theme="pizzeria"] .about__body > div.is-in:first-of-type { opacity: 1; transform: rotate(-1.2deg); }
:root[data-theme="pizzeria"] .book { background: var(--stroke); color: #241610; border: 0; rotate: 1deg; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); }
:root[data-theme="pizzeria"] .book::before { display: none; }
:root[data-theme="pizzeria"] .book__note { color: #4A382C; }
:root[data-theme="pizzeria"] .book__kicker { color: var(--accent); }
:root[data-theme="pizzeria"] .book__title { color: #241610; }

/* ------------------------------------------------------------------
   Runda prickar över Ä/Ö (modern stil): bokstaven ritas som A/O, prickarna som två cirklar i samma färg med samma kontur
   (box-shadow-ring motsvarar text-stroke som ritas under fyllningen). Läggs av umlaut() i pizzeria.js.
------------------------------------------------------------------- */
.um { position: relative; display: inline-block; }
.um::before, .um::after {
  content: ""; position: absolute; top: -.1em; width: .14em; height: .14em; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 .018em var(--um-stroke, var(--stroke)), 0 .05em .3em rgba(0, 0, 0, .5);
}
.um::before { left: calc(50% - .19em); }
.um::after { left: calc(50% + .05em); }
.pz-deco__word .um::before, .pz-deco__word .um::after { --um-stroke: rgba(255, 246, 234, .42); box-shadow: 0 0 0 .015em var(--um-stroke); }
.about__statement .um::before, .about__statement .um::after, .hours-sec__statement .um::before, .hours-sec__statement .um::after { top: -.08em; }
.menu-cat h3 .um::before, .menu-cat h3 .um::after, .pz-info h3 .um::before, .pz-info h3 .um::after, .pz-dish b .um::before, .pz-dish b .um::after, .book__title .um::before, .book__title .um::after, .plates__caption h3 .um::before, .plates__caption h3 .um::after { box-shadow: none; top: -.09em; }
:root[data-style="klassisk"] .um::before, :root[data-style="klassisk"] .um::after { display: none; }



/* Inga backdrop-blur (skakade på iPhone/Safari ovanpå fästa scener): halvgenomskinliga färger i stället */
.site-header.is-solid, .nav-overlay, .hero .eyebrow, .menu__tabs, .dish.is-near .dish__price, .ex-badge, .bookmodal, .site-header::before {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.site-header.is-solid { background: color-mix(in srgb, var(--bg) 92%, transparent) !important; }
.menu__tabs { background: color-mix(in srgb, var(--bg) 94%, transparent) !important; }
.nav-overlay { background: color-mix(in srgb, var(--bg) 97%, transparent) !important; }

/* Såsdroppar även på de stora rubrikerna (kapitelorden, statement, menyrubriker, öppettider) */
.pz-word__w.drip { overflow: visible; }

/* Felsökningsflaggor (URL): ?ingapartiklar döljer himmel/glöd/partiklar/ånga/grain; ?ingafasta hanteras i skripten */
html[data-ingapartiklar] .sky, html[data-ingapartiklar] .glows, html[data-ingapartiklar] .rv-canvas, html[data-ingapartiklar] .rv-smoke,
html[data-ingapartiklar] .cuphero__steam, html[data-ingapartiklar] .hero__grain, html[data-ingapartiklar] .pz-steam, html[data-ingapartiklar] .bits,
html[data-ingapartiklar] .pz-deco__bit, html[data-ingapartiklar] .pz-build__glow, html[data-ingapartiklar] .rv-cone { display: none !important; }

/* Tomatsåsvirveln: en enda stor bild bakom TOPPA (under ordet i .pz-word) */
.pz-swirl { grid-area: 1 / 1; z-index: 0; width: min(70vw, 80svh); height: auto; opacity: 0; visibility: hidden; pointer-events: none; }
.pz-word__w { z-index: 1; position: relative; }
@media (max-width: 899px) { .pz-swirl { width: 92vw; } }