/* SKIMASK MILANO — sito SOLO verticale (colonna da telefono anche su PC), ambientato a Milano.
   4 temi (data-theme su <html>): arcade · mutant · neo · gotico.
   Ogni tema ridefinisce palette, font e sfondo col Duomo; il layout è lo stesso. */

:root {
  --col: 480px;
  --gut: 16px;
  --top-h: 58px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --line: rgb(var(--ink) / .16);
  --radius: 0px;
  --floor-h: 5%;
  --b-size: 16px;
  --m-size: 11px;
  --d-tt: uppercase;
  --d-lh: .95;
  --d-ls: 0;
  --d-w: 400;
  --logo-glow: rgb(var(--acc) / .45);
  color-scheme: dark;
}

/* ---------- TEMI ---------- */
:root, [data-theme="neo"] {
  --bg: 9 3 26; --bg2: 22 10 52; --ink: 232 250 255; --mute: 150 150 210;
  --acc: 54 240 255; --acc-ink: 6 4 20; --acc2: 255 79 216;
  --outer: #030010;
  --sky: linear-gradient(#04010e 0%, #12052e 45%, #3a0a5a 78%, #5b0f63 100%);
  --f-d: "Orbitron", system-ui, sans-serif; --f-b: "Rajdhani", system-ui, sans-serif; --f-m: "Share Tech Mono", ui-monospace, monospace;
  --d-w: 900; --d-ls: .02em; --d-lh: .98; --b-size: 18px; --m-size: 12px;
  --floor-h: 19%;
}
[data-theme="mutant"] {
  --bg: 5 12 6; --bg2: 13 28 15; --ink: 230 255 205; --mute: 130 175 118;
  --acc: 182 255 0; --acc-ink: 5 12 6; --acc2: 58 255 107;
  --outer: #010401;
  --sky: radial-gradient(120% 70% at 50% 100%, #1d4a10 0%, #0a1f0b 45%, #030803 100%);
  --f-d: "Rubik Wet Paint", system-ui, sans-serif; --f-b: "Space Grotesk", system-ui, sans-serif; --f-m: "JetBrains Mono", ui-monospace, monospace;
  --d-lh: 1; --radius: 24px; --floor-h: 7%;
}
[data-theme="gotico"] {
  --bg: 9 9 11; --bg2: 20 20 24; --ink: 241 236 226; --mute: 152 146 134;
  --acc: 240 190 60; --acc-ink: 12 10 8; --acc2: 255 182 72;
  --outer: #040405;
  --sky: linear-gradient(#020204 0%, #0b0b12 50%, #1b1a24 85%, #23212c 100%);
  --f-d: "Pirata One", Georgia, serif; --f-b: "EB Garamond", Georgia, serif; --f-m: "JetBrains Mono", ui-monospace, monospace;
  --d-tt: none; --d-lh: .92; --b-size: 18px; --m-size: 10px; --floor-h: 6%;
}
[data-theme="arcade"] {
  --bg: 10 6 32; --bg2: 24 14 62; --ink: 246 240 255; --mute: 160 148 222;
  --acc: 255 204 51; --acc-ink: 22 8 44; --acc2: 255 92 214;
  --outer: #04020f;
  --sky: linear-gradient(#04021a 0%, #120840 50%, #2e1270 85%, #47188a 100%);
  --f-d: "Press Start 2P", ui-monospace, monospace; --f-b: "VT323", ui-monospace, monospace; --f-m: "Silkscreen", ui-monospace, monospace;
  --d-lh: 1.25; --b-size: 21px; --m-size: 10px; --floor-h: 8%;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  background: var(--outer);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  position: relative;
  max-width: var(--col);
  min-height: 100svh;
  margin: 0 auto;
  color: rgb(var(--ink));
  font-family: var(--f-b);
  font-size: var(--b-size);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
@media (min-width: 520px) {
  html { background: radial-gradient(70% 90% at 50% 50%, rgb(var(--bg2) / .6), var(--outer)) fixed; }
  body { box-shadow: 0 0 0 1px rgb(var(--ink) / .08), 0 0 140px rgb(0 0 0 / .7); }
}
a { color: inherit; text-decoration: none; }
img, video, canvas { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: rgb(var(--acc)); color: rgb(var(--acc-ink)); }

.display {
  font-family: var(--f-d);
  font-weight: var(--d-w);
  text-transform: var(--d-tt);
  line-height: var(--d-lh);
  letter-spacing: var(--d-ls);
  overflow-wrap: normal;
}
.mono {
  font-family: var(--f-m);
  font-size: var(--m-size);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.35;
}

/* ---------- SFONDO MILANO (Duomo) ---------- */
.scene {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: min(100%, var(--col));
  transform: translateX(-50%);
  overflow: hidden;
  background: var(--sky);
  pointer-events: none;
}
.scene .sky { position: absolute; left: 0; right: 0; top: 0; height: 78%; transition: opacity .8s; }
.sky-svg, .sky-px { width: 100%; height: 100%; }
.sky-px { object-fit: cover; image-rendering: pixelated; }
.scene .duomo {
  position: absolute;
  left: 50%;
  bottom: var(--floor-h);
  width: min(150%, 70svh);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  transition: opacity .8s ease, transform 1.1s var(--ease);
  animation: duomo-in 1.6s var(--ease) both;
}
@keyframes duomo-in { from { opacity: 0; transform: translateX(-50%) translateY(8%) scale(.96); } }
.duomo-svg { width: 100%; height: auto; }
.duomo-px { width: 100%; height: auto; image-rendering: pixelated; }
.scene .floor { position: absolute; left: 0; right: 0; bottom: 0; height: var(--floor-h); overflow: hidden; }
/* il Duomo si fa da parte quando si scorre o si entra nelle pagine */
body.scene-dim .scene .duomo,
body:not([data-route="home"]) .scene .duomo { opacity: .2; transform: translateX(-50%) translateY(3%); }
body.scene-dim .scene .sky,
body:not([data-route="home"]) .scene .sky { opacity: .55; }

/* strato effetti sopra tutto (scanline, grana) */
.fx { position: fixed; inset: 0; z-index: 70; pointer-events: none; }

/* ---------- BARRA IN ALTO ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  height: calc(var(--top-h) + var(--safe-t));
  padding: var(--safe-t) 4px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s;
}
body.is-scrolled .top, body:not([data-route="home"]) .top { background: rgb(var(--bg) / .9); border-bottom-color: var(--line); }
.top-back { grid-column: 1; display: grid; place-items: center; width: 44px; height: 44px; color: rgb(var(--acc)); }
.top-brand { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 8px; min-width: 0; }
.top-logo { height: 38px; width: 38px; object-fit: contain; flex-shrink: 0; }
.top-name { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
[data-theme="arcade"] .top-name { font-size: 10px; }
[data-theme="neo"] .top-name { font-size: 14px; letter-spacing: .1em; }
/* sulla home in alto il logo grande c'è già: la barra resta vuota finché non si scorre */
body[data-route="home"]:not(.is-scrolled) .top-brand { opacity: 0; pointer-events: none; }
.top-brand { transition: opacity .35s; }
.top-meta { grid-column: 3; justify-self: end; padding-right: 10px; color: rgb(var(--mute)); white-space: nowrap; }

#view, .foot { position: relative; z-index: 1; }

/* comparsa a cascata a ogni cambio pagina */
.rv { animation: rv .85s var(--ease) both; animation-delay: calc(var(--i, 1) * 70ms); }
@keyframes rv { from { opacity: 0; transform: translateY(22px); } }

/* ---------- FOTO / SEGNAPOSTO ---------- */
.pic { position: absolute; inset: 0; overflow: hidden; background: rgb(var(--bg2)); }
.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .6s ease, transform 1.1s var(--ease);
}
.img.is-loaded { opacity: 1; transform: scale(1); }
.knit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-color: rgb(var(--bg2));
  background-image:
    linear-gradient(135deg, rgb(var(--ink) / .06) 25%, transparent 25%),
    linear-gradient(225deg, rgb(var(--ink) / .06) 25%, transparent 25%);
  background-size: 14px 18px;
}
.knit-label { color: rgb(var(--mute)); }

/* ---------- HOME ---------- */
.hero {
  position: relative;
  padding: 10px var(--gut) 18px;
}
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(to top, rgb(var(--bg)) 0%, rgb(var(--bg) / .2) 50%, rgb(var(--bg) / .5) 100%); }
.hero.has-media .hero-shade { opacity: 1; }
.hero-inner { position: relative; }
.hero-title { font-size: 26vw; --i: 1; text-align: center; }
@media (min-width: 480px) { .hero-title { font-size: 124px; } }

/* logo grande: il protagonista della home, davanti al Duomo */
.hero-logo {
  position: relative;
  width: min(44vw, 190px);
  aspect-ratio: 1;
  margin: 0 auto;
  --i: 1;
}
.hero-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgb(0 0 0 / .6));
  animation: logo-float 6s ease-in-out infinite;
}
@keyframes logo-float { 50% { transform: translateY(-8px) rotate(-.6deg); } }

.label-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--gut) 14px;
  color: rgb(var(--ink) / .85);
}
.rule { flex: 1; height: 1px; background: rgb(var(--ink) / .3); }

.sec-grid, .sub-grid { display: grid; gap: 14px; padding: 0 12px; }
.card {
  position: relative;
  display: block;
  overflow: hidden;
  background: rgb(var(--bg2));
  border-radius: var(--radius);
  isolation: isolate;
}
.sec-card { aspect-ratio: 4 / 5; }
.sub-card { aspect-ratio: 5 / 4; }
.sec-card-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgb(var(--bg) / .94) 0%, rgb(var(--bg) / .35) 45%, transparent 72%);
}
.sec-card-num, .sec-card-count {
  position: absolute;
  top: 14px;
  padding: 5px 8px;
  background: rgb(var(--bg) / .75);
  pointer-events: none;
  z-index: 2;
}
.sec-card-num { left: 14px; color: rgb(var(--acc)); }
.sec-card-count { right: 14px; color: rgb(var(--ink) / .85); }
.sec-card-body {
  position: absolute;
  left: 16px;
  right: 82px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sec-card-title { font-size: 64px; }
.sub-card-title { font-size: 52px; }
.sec-card-sub { color: rgb(var(--ink) / .78); }
.go {
  position: absolute;
  right: 16px;
  bottom: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgb(var(--acc));
  color: rgb(var(--acc-ink));
  transition: transform .5s var(--ease-back);
}
.arr { width: 24px; height: 24px; flex-shrink: 0; }
@media (hover: hover) {
  .card:hover .img.is-loaded, .prod:hover .img.is-loaded { transform: scale(1.04); }
  .card:hover .go { transform: rotate(-45deg) scale(1.06); }
}
.card:active, .prod:active { transform: scale(.985); transition: transform .15s; }

/* ---------- TESTATA PAGINE ---------- */
.page-head { padding: 26px var(--gut) 22px; }
.crumb { display: block; color: rgb(var(--mute)); margin-bottom: 14px; }
.page-title { font-size: 76px; --i: 1; }
.page-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.page-sub { color: rgb(var(--ink) / .8); }
.page-count { color: rgb(var(--acc)); white-space: nowrap; }

/* ---------- GRIGLIA PRODOTTI ---------- */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 12px;
  padding: 0 12px;
}
.prod { display: block; min-width: 0; }
.prod-pic { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: rgb(var(--bg2)); border-radius: var(--radius); isolation: isolate; }
.prod-num {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  color: rgb(var(--ink) / .75);
  background: rgb(var(--bg) / .72);
  padding: 3px 6px;
  font-size: 9px;
}
.tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  padding: 5px 8px;
  font-size: 10px;
  background: rgb(var(--acc));
  color: rgb(var(--acc-ink));
}
.tag.is-sold { background: rgb(var(--ink)); color: rgb(var(--bg)); }
.prod.is-sold .img { filter: grayscale(1) brightness(.6); }
.prod-info { display: flex; flex-direction: column; gap: 6px; padding: 10px 2px 0; }
.prod-name { font-size: 24px; }
.prod-price { color: rgb(var(--acc)); font-size: 13px; }
.empty {
  grid-column: 1 / -1;
  padding: 64px 0;
  text-align: center;
  color: rgb(var(--mute));
  border: 1px dashed var(--line);
  background: rgb(var(--bg) / .6);
}

/* ---------- PRODOTTO ---------- */
.item { padding: 12px 12px 0; }
.gallery { position: relative; border-radius: var(--radius); overflow: hidden; isolation: isolate; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
.gallery .tag { top: 14px; left: 14px; font-size: 11px; }
.counter { position: absolute; top: 14px; right: 14px; z-index: 3; padding: 5px 8px; background: rgb(var(--bg) / .75); pointer-events: none; }
.dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 6px; }
.dot { width: 8px; height: 8px; background: rgb(var(--ink) / .45); box-shadow: 0 0 0 1px rgb(var(--bg) / .55); transition: width .4s var(--ease), background .3s; }
.dot.is-on { width: 24px; background: rgb(var(--ink)); }
.item-info { padding: 20px 4px 10px; }
.item-name { font-size: 70px; --i: 2; }
.item-price { margin-top: 12px; font-size: 22px; color: rgb(var(--acc)); --i: 3; }
.item-desc {
  white-space: pre-line;
  margin: 20px 0 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  line-height: 1.5;
  color: rgb(var(--ink) / .88);
  --i: 4;
}
.order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 66px;
  padding: 8px 20px;
  background: rgb(var(--acc));
  color: rgb(var(--acc-ink));
  font-size: 28px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .2s var(--ease);
}
.order .arr { width: 28px; height: 28px; transition: transform .4s var(--ease-back); }
@media (hover: hover) { .order:hover .arr { transform: translateX(5px); } }
.order:active { transform: scale(.98); }
.order.is-off { background: rgb(var(--bg) / .6); color: rgb(var(--mute)); border: 1px solid var(--line); cursor: default; }
.order-note { margin-top: 12px; color: rgb(var(--mute)); font-weight: 400; text-transform: none; letter-spacing: .02em; line-height: 1.5; }

/* ---------- FOOTER ---------- */
.foot {
  margin-top: 72px;
  padding: 0 var(--gut) calc(26px + var(--safe-b));
  background: rgb(var(--bg) / .92);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.foot-links { display: flex; flex-direction: column; }
.foot-link {
  display: grid;
  grid-template-columns: 96px 1fr 24px;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.foot-link .mono { color: rgb(var(--mute)); }
.foot-link .arr { width: 18px; height: 18px; color: rgb(var(--acc)); transform: rotate(-45deg); }
.foot-big {
  margin: 34px 0 12px;
  font-size: 30vw;
  line-height: .9;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgb(var(--ink) / .28);
}
@media (min-width: 480px) { .foot-big { font-size: 140px; } }
[data-theme="arcade"] .foot-big { font-size: 15vw; }
.foot-row { display: flex; justify-content: space-between; gap: 12px; color: rgb(var(--mute)); }

/* ---------- TOAST ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + var(--safe-b));
  z-index: 90;
  max-width: min(calc(100vw - 32px), 440px);
  padding: 12px 16px;
  background: rgb(var(--ink));
  color: rgb(var(--bg));
  font-family: var(--f-m);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity .3s, transform .45s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

body:not(.editing) .ed:empty { display: none; }

/* ============================================================
   NEO MILANO 2077 — synthwave: wireframe neon, sole a righe, griglia che corre
   ============================================================ */
[data-theme="neo"] { --logo-glow: rgb(54 240 255 / .55); }
[data-theme="neo"] .fx {
  background:
    repeating-linear-gradient(0deg, rgb(0 0 0 / .18) 0 1px, transparent 1px 3px),
    radial-gradient(120% 80% at 50% 40%, transparent 60%, rgb(0 0 0 / .55) 100%);
}
[data-theme="neo"] .floor {
  background: linear-gradient(#2a0640, #0a0220);
  border-top: 2px solid rgb(255 79 216);
  box-shadow: 0 -6px 30px rgb(255 79 216 / .7);
}
}
[data-theme="neo"] .hero-title,
[data-theme="neo"] .page-title,
[data-theme="neo"] .item-name {
  background: linear-gradient(180deg, #ffffff 0%, #b4fbff 42%, #36f0ff 55%, #ff4fd8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  caret-color: #fff;
  filter: drop-shadow(0 0 14px rgb(54 240 255 / .45));
}
[data-theme="neo"] .hero-title { font-size: 19vw; margin-top: 2svh; }
@media (min-width: 480px) { [data-theme="neo"] .hero-title { font-size: 92px; } }
[data-theme="neo"] .page-title { font-size: 54px; }
[data-theme="neo"] .item-name { font-size: 46px; }
[data-theme="neo"] .sec-card-title { font-size: 46px; text-shadow: 0 0 18px rgb(54 240 255 / .6); }
[data-theme="neo"] .sub-card-title { font-size: 38px; text-shadow: 0 0 18px rgb(54 240 255 / .6); }
[data-theme="neo"] .prod-name { font-size: 15px; letter-spacing: .06em; }
[data-theme="neo"] .card,
[data-theme="neo"] .prod-pic,
[data-theme="neo"] .gallery,
[data-theme="neo"] .order {
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
[data-theme="neo"] .card::after,
[data-theme="neo"] .prod-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgb(54 240 255) 0 13px, transparent 13px) top left / 26px 26px no-repeat,
    linear-gradient(315deg, rgb(255 79 216) 0 13px, transparent 13px) bottom right / 26px 26px no-repeat;
  box-shadow: inset 0 0 0 1px rgb(54 240 255 / .55), inset 0 0 30px rgb(54 240 255 / .12);
}
[data-theme="neo"] .go { border-radius: 0; clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%); box-shadow: 0 0 20px rgb(54 240 255 / .8); }
[data-theme="neo"] .order { background: linear-gradient(90deg, rgb(54 240 255), rgb(255 79 216)); font-size: 22px; letter-spacing: .06em; }
[data-theme="neo"] .tag { background: rgb(255 79 216); color: #fff; }
[data-theme="neo"] .prod-price, [data-theme="neo"] .item-price { text-shadow: 0 0 10px rgb(54 240 255 / .7); }
[data-theme="neo"] .label-row .mono:first-child::before { content: "// "; color: rgb(255 79 216); }

/* ============================================================
   MUTANTI — melma tossica, font che cola, card slime
   ============================================================ */
[data-theme="mutant"] { --logo-glow: rgb(182 255 0 / .5); }
[data-theme="mutant"] .fx {
  opacity: .1;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .7 0 0 0 0 .3 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="mutant"] .floor { background: linear-gradient(#2c6b10, #0b2408); box-shadow: 0 -10px 40px rgb(182 255 0 / .35); }
[data-theme="mutant"] .bubbles { position: absolute; inset: 0; }
[data-theme="mutant"] .bubbles i {
  position: absolute;
  bottom: -20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgb(182 255 0 / .7);
  box-shadow: 0 0 10px rgb(182 255 0 / .6);
  animation: bubble 7s linear infinite;
}
[data-theme="mutant"] .bubbles i:nth-child(1) { left: 8%; animation-delay: 0s; }
[data-theme="mutant"] .bubbles i:nth-child(2) { left: 22%; width: 6px; height: 6px; animation-delay: 1.8s; animation-duration: 9s; }
[data-theme="mutant"] .bubbles i:nth-child(3) { left: 35%; width: 14px; height: 14px; animation-delay: 3.4s; }
[data-theme="mutant"] .bubbles i:nth-child(4) { left: 51%; animation-delay: 5s; animation-duration: 8s; }
[data-theme="mutant"] .bubbles i:nth-child(5) { left: 64%; width: 7px; height: 7px; animation-delay: .9s; }
[data-theme="mutant"] .bubbles i:nth-child(6) { left: 77%; width: 12px; height: 12px; animation-delay: 2.6s; animation-duration: 10s; }
[data-theme="mutant"] .bubbles i:nth-child(7) { left: 90%; animation-delay: 4.2s; }
[data-theme="mutant"] .bubbles i:nth-child(8) { left: 15%; width: 5px; height: 5px; animation-delay: 6s; }
[data-theme="mutant"] .bubbles i:nth-child(9) { left: 44%; width: 8px; height: 8px; animation-delay: 7.2s; animation-duration: 11s; }
[data-theme="mutant"] .bubbles i:nth-child(10) { left: 84%; width: 6px; height: 6px; animation-delay: 8s; }
@keyframes bubble {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(10px, -45vh); }
  100% { transform: translate(-6px, -90vh); opacity: 0; }
}
[data-theme="mutant"] .hero-title,
[data-theme="mutant"] .page-title,
[data-theme="mutant"] .item-name,
[data-theme="mutant"] .sec-card-title,
[data-theme="mutant"] .sub-card-title {
  color: rgb(var(--acc));
  text-shadow: 0 0 22px rgb(182 255 0 / .55), 0 4px 0 rgb(20 60 0);
}
[data-theme="mutant"] .hero-title { font-size: 24vw; }
@media (min-width: 480px) { [data-theme="mutant"] .hero-title { font-size: 116px; } }
[data-theme="mutant"] .card,
[data-theme="mutant"] .prod-pic,
[data-theme="mutant"] .gallery {
  border: 2px solid rgb(182 255 0 / .85);
  box-shadow: 0 0 26px rgb(182 255 0 / .28), inset 0 0 30px rgb(182 255 0 / .1);
}
/* melma che cola dal bordo alto delle card */
[data-theme="mutant"] .card::before,
[data-theme="mutant"] .prod-pic::before,
[data-theme="mutant"] .gallery::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 46px;
  z-index: 3;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 46' preserveAspectRatio='none'%3E%3Cpath fill='%23b6ff00' d='M0 0h200v8c-6 0-7 4-8 12s-2 14-5 14-4-6-4-12-1-12-6-12-6 6-7 10-1 8-4 8-3-5-3-10-2-8-8-8-8 3-9 7-1 22-5 22-4-14-4-22-3-7-9-7-8 5-9 12-2 9-5 9-3-6-3-12-4-9-10-9-7 4-8 10-1 6-4 6-4-4-5-9-4-7-10-7-7 4-8 9-2 17-6 17-4-10-4-17-3-9-8-9z'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
  filter: drop-shadow(0 0 6px rgb(182 255 0 / .7));
}
[data-theme="mutant"] .prod-pic::before { height: 26px; }
[data-theme="mutant"] .go, [data-theme="mutant"] .order { box-shadow: 0 0 24px rgb(182 255 0 / .55); }
[data-theme="mutant"] .order { border-radius: 999px; font-family: var(--f-d); font-size: 30px; padding: 8px 24px; }
[data-theme="mutant"] .tag { border-radius: 999px; }
[data-theme="mutant"] .sec-card-num, [data-theme="mutant"] .sec-card-count, [data-theme="mutant"] .counter { border-radius: 999px; top: 30px; }
[data-theme="mutant"] .prod-pic .tag { top: 22px; }
[data-theme="mutant"] .label-row .mono:first-child::before { content: "☣ "; color: rgb(var(--acc)); }

/* ============================================================
   GOTICO — acquaforte sotto la luna, gotico, card ad arco, oro del logo
   ============================================================ */
[data-theme="gotico"] { --logo-glow: rgb(240 190 60 / .4); }
[data-theme="gotico"] .fx {
  opacity: .13;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="gotico"] .floor { background: linear-gradient(#1c1b22, #08080a); }
[data-theme="gotico"] .scene::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 30%;
  background: linear-gradient(transparent, rgb(30 29 38 / .85) 60%, rgb(9 9 11 / .9));
  animation: fog 9s ease-in-out infinite alternate;
}
@keyframes fog { to { transform: translateX(-4%); opacity: .75; } }
[data-theme="gotico"] .hero-title,
[data-theme="gotico"] .page-title,
[data-theme="gotico"] .item-name {
  background: linear-gradient(180deg, #ffffff 0%, #e8e2d4 38%, #8d8676 52%, #f6f1e7 66%, #b3ab99 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  caret-color: #fff;
  filter: drop-shadow(0 4px 18px rgb(0 0 0 / .8));
}
[data-theme="gotico"] .hero-title { font-size: 34vw; }
@media (min-width: 480px) { [data-theme="gotico"] .hero-title { font-size: 160px; } }
[data-theme="gotico"] .page-title { font-size: 92px; }
[data-theme="gotico"] .item-name { font-size: 76px; }
[data-theme="gotico"] .sec-card-title { font-size: 76px; }
[data-theme="gotico"] .sub-card-title { font-size: 62px; }
[data-theme="gotico"] .prod-name { font-size: 30px; }
[data-theme="gotico"] .sec-card { border-radius: 50% 50% 0 0 / 26% 26% 0 0; }
[data-theme="gotico"] .sub-card { border-radius: 50% 50% 0 0 / 34% 34% 0 0; }
[data-theme="gotico"] .prod-pic { border-radius: 50% 50% 0 0 / 22% 22% 0 0; }
[data-theme="gotico"] .card::after,
[data-theme="gotico"] .prod-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(var(--acc) / .8), inset 0 0 0 6px rgb(var(--bg) / .55), inset 0 0 0 7px rgb(var(--ink) / .35);
}
[data-theme="gotico"] .sec-card-num { display: none; }
[data-theme="gotico"] .sec-card-count { top: 24%; right: 50%; transform: translateX(50%); }
[data-theme="gotico"] .go { background: transparent; color: rgb(var(--acc)); border: 1px solid rgb(var(--acc)); }
[data-theme="gotico"] .order { background: transparent; color: rgb(var(--ink)); border: 1px solid rgb(var(--acc)); box-shadow: inset 0 0 0 4px rgb(var(--bg)), inset 0 0 0 5px rgb(var(--acc) / .5); font-size: 34px; }
[data-theme="gotico"] .order .arr { color: rgb(var(--acc)); }
[data-theme="gotico"] .prod-pic .tag { top: auto; bottom: 8px; }
[data-theme="gotico"] .label-row .mono:first-child::before { content: "✠ "; color: rgb(var(--acc)); }

/* ============================================================
   ARCADE — pixel art, scanline CRT, font 8-bit
   ============================================================ */
[data-theme="arcade"] { --logo-glow: rgb(255 92 214 / .45); }
[data-theme="arcade"] .fx {
  background:
    repeating-linear-gradient(0deg, rgb(0 0 0 / .28) 0 1px, transparent 1px 3px),
    radial-gradient(110% 80% at 50% 45%, transparent 55%, rgb(0 0 0 / .6) 100%);
}
[data-theme="arcade"] .floor {
  background:
    repeating-linear-gradient(90deg, #2d8b3a 0 8px, #24702f 8px 16px) top / 100% 8px no-repeat,
    repeating-linear-gradient(90deg, #6b3a1f 0 12px, #5a2f18 12px 24px);
}
[data-theme="arcade"] .hero-title,
[data-theme="arcade"] .page-title,
[data-theme="arcade"] .item-name,
[data-theme="arcade"] .sec-card-title,
[data-theme="arcade"] .sub-card-title {
  color: rgb(var(--ink));
  text-shadow: 3px 3px 0 rgb(var(--acc2)), 6px 6px 0 rgb(54 240 255 / .7);
}
[data-theme="arcade"] .hero-title { font-size: 12vw; margin-top: 3svh; }
@media (min-width: 480px) { [data-theme="arcade"] .hero-title { font-size: 56px; } }
[data-theme="arcade"] .page-title { font-size: 34px; }
[data-theme="arcade"] .item-name { font-size: 28px; }
[data-theme="arcade"] .sec-card-title { font-size: 30px; }
[data-theme="arcade"] .sub-card-title { font-size: 24px; }
[data-theme="arcade"] .prod-name { font-size: 11px; line-height: 1.5; }
[data-theme="arcade"] .prod-price, [data-theme="arcade"] .item-price { font-family: var(--f-d); font-size: 12px; }
[data-theme="arcade"] .item-price { font-size: 16px; }
[data-theme="arcade"] .card,
[data-theme="arcade"] .prod-pic,
[data-theme="arcade"] .gallery,
[data-theme="arcade"] .order {
  clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
}
[data-theme="arcade"] .card::after,
[data-theme="arcade"] .prod-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  box-shadow: inset 0 0 0 4px rgb(var(--ink)), inset 0 0 0 8px rgb(var(--acc2));
}
[data-theme="arcade"] .go { border-radius: 0; animation: blink 1s steps(1) infinite; }
[data-theme="arcade"] .go .arr { display: none; }
[data-theme="arcade"] .go::before { content: "▶"; font-family: var(--f-d); font-size: 16px; }
@keyframes blink { 50% { opacity: .35; } }
[data-theme="arcade"] .order { font-size: 16px; min-height: 70px; box-shadow: inset -6px -6px 0 rgb(0 0 0 / .25); }
[data-theme="arcade"] .sec-card-num, [data-theme="arcade"] .sec-card-count { top: 16px; }
[data-theme="arcade"] .sec-card-num { left: 16px; }
[data-theme="arcade"] .sec-card-count { right: 16px; }
[data-theme="arcade"] .prod-pic .tag { top: 12px; left: 12px; }
[data-theme="arcade"] .label-row .mono:first-child::before { content: "▶ "; color: rgb(var(--acc)); animation: blink 1s steps(1) infinite; }
[data-theme="arcade"] .crumb, [data-theme="arcade"] .mono { line-height: 1.6; }
[data-theme="arcade"] .foot-big { -webkit-text-stroke: 0; color: rgb(var(--ink) / .12); }

@media (prefers-reduced-motion: reduce) {
  .rv, .scene .duomo, .hero-logo-img { animation: none; }
  [data-theme="neo"] .floor::before, [data-theme="mutant"] .bubbles i, [data-theme="gotico"] .scene::after,
  [data-theme="arcade"] .go, [data-theme="arcade"] .label-row .mono:first-child::before { animation: none; }
  .img { transition: opacity .3s; transform: none; }
}

/* ---------- HOME COMPATTA: logo e subito sotto le 2 sezioni affiancate ---------- */
.sec-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.sec-card { aspect-ratio: 3 / 4; }
.sec-card-num, .sec-card-count { top: 10px; padding: 4px 6px; font-size: 9px; }
.sec-card-num { left: 10px; }
.sec-card-count { right: 10px; }
.sec-card-body { left: 12px; right: 12px; bottom: 54px; gap: 6px; }
.sec-card-title { font-size: 34px; }
.sec-card .go { right: 10px; bottom: 10px; width: 36px; height: 36px; }
.sec-card .go .arr { width: 18px; height: 18px; }
.sec-card .sec-card-sub { font-size: 9px; }

/* ============================================================
   FUMETTO — scelto da Alberto. Notte da fumetto coerente con le sue grafiche
   GREENMASK / BLUMASK: retino, raggi, nuvolette di fumo con la china, stelline;
   dentro le sezioni il cielo diventa verde o blu come la grafica della sezione.
   Card "lucide" come le grafiche: bordo nero, gradiente, riflesso, stelline.
   ============================================================ */
[data-theme="fumetto"] {
  --bg: 22 14 54; --bg2: 34 24 78; --ink: 255 255 255; --mute: 205 196 240;
  --acc: 255 210 63; --acc-ink: 17 17 17; --acc2: 232 38 43;
  --c1: 255 226 120; --c2: 255 190 40; --c3: 190 120 0;
  --outer: #07051a;
  --sky: radial-gradient(circle, rgb(255 255 255 / .06) 1.3px, transparent 1.5px) 0 0 / 9px 9px,
         radial-gradient(70% 34% at 50% 86%, rgb(255 176 214 / .6), transparent 72%),
         radial-gradient(90% 50% at 15% 10%, rgb(120 90 255 / .35), transparent 70%),
         linear-gradient(180deg, #0e0a33 0%, #241866 26%, #5a2c96 52%, #b04c9f 76%, #ff9a86 100%);
  --f-d: "Bangers", Impact, sans-serif; --f-b: "Comic Neue", "Comic Sans MS", sans-serif; --f-m: "Bangers", Impact, sans-serif;
  --d-lh: .95; --d-ls: .03em; --b-size: 17px; --m-size: 13px; --floor-h: 0%;
  --line: rgb(17 17 17);
  --stroke: #111;
}
/* cielo e card del colore della sezione */
[data-theme="fumetto"] body[data-sec="0"] {
  --c1: 150 255 110; --c2: 40 190 60; --c3: 6 84 24;
  --sky: radial-gradient(circle, rgb(255 255 255 / .06) 1.3px, transparent 1.5px) 0 0 / 9px 9px,
         radial-gradient(70% 34% at 50% 86%, rgb(190 255 170 / .45), transparent 72%),
         linear-gradient(180deg, #04170b 0%, #0b3a1c 30%, #1c7a3a 62%, #5fcf72 88%, #c8ffb0 100%);
}
[data-theme="fumetto"] body[data-sec="1"] {
  --c1: 130 210 255; --c2: 30 115 230; --c3: 8 40 120;
  --sky: radial-gradient(circle, rgb(255 255 255 / .06) 1.3px, transparent 1.5px) 0 0 / 9px 9px,
         radial-gradient(70% 34% at 50% 86%, rgb(170 225 255 / .5), transparent 72%),
         linear-gradient(180deg, #040c26 0%, #0c2466 30%, #1f5fc4 62%, #5fb4ff 88%, #c9ecff 100%);
}
[data-theme="fumetto"] body { font-weight: 700; }
[data-theme="fumetto"] .mono { font-weight: 400; letter-spacing: .08em; }

/* ---- scritte a fumetto: riempimento a gradiente + china + estrusione, come GREENMASK ---- */
[data-theme="fumetto"] .page-title,
[data-theme="fumetto"] .item-name,
[data-theme="fumetto"] .sub-card-title {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 30%, rgb(var(--c1)) 55%, rgb(var(--c2)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2.5px #111;
  caret-color: #fff;
  filter: drop-shadow(0 4px 0 #111) drop-shadow(3px 0 0 #111);
}

/* ---- sfondo: Duomo di Alberto + nuvolette + stelline ---- */
[data-theme="fumetto"] .scene .duomo.duomo-img {
  width: min(100%, calc(94svh * .5287));
  bottom: 0;
}
[data-theme="fumetto"] .duomo-img img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 30px rgb(0 0 0 / .45)); }
/* Duomo a china disegnato in codice: piccolo, poggiato in basso, con un alone rosa */
[data-theme="fumetto"] .scene .duomo.duomo-comic { width: min(86%, 44svh); bottom: 2.5svh; }
[data-theme="fumetto"] .duomo-comic .duomo-svg { display: block; filter: drop-shadow(0 0 28px rgb(255 170 210 / .45)); }
[data-theme="fumetto"] .clouds { position: absolute; left: -4%; width: 108%; height: auto; pointer-events: none; }
[data-theme="fumetto"] .clouds-near { height: 15svh; }
[data-theme="fumetto"] .clouds-far { height: 18svh; }
[data-theme="fumetto"] .clouds-near { bottom: -4px; z-index: 2; animation: drift 14s ease-in-out infinite alternate; }
[data-theme="fumetto"] .clouds-far { top: 6%; opacity: .55; animation: drift 18s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translateX(-3%); } }
[data-theme="fumetto"] .spk {
  position: absolute;
  font-style: normal;
  font-size: 13px;
  text-shadow: 0 0 8px currentColor;
  animation: twinkle 3s ease-in-out infinite;
}
[data-theme="fumetto"] .spk-big { font-size: 22px; }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(25deg); } }
[data-theme="fumetto"] body:not([data-route="home"]) .scene .duomo,
[data-theme="fumetto"] body.scene-dim .scene .duomo { opacity: .18; }

/* ---- barra in alto ---- */
[data-theme="fumetto"] .top-name {
  font-size: 24px;
  letter-spacing: .05em;
  color: #ffd23f;
  -webkit-text-stroke: 1.5px #111;
  paint-order: stroke fill;
  text-shadow: 2px 2px 0 #111;
}
[data-theme="fumetto"] .top-back, [data-theme="fumetto"] .top-meta { color: #ffd23f; }
[data-theme="fumetto"] body.is-scrolled .top,
[data-theme="fumetto"] body:not([data-route="home"]) .top { background: rgb(13 9 38 / .94); border-bottom: 3px solid #111; box-shadow: 0 3px 0 rgb(255 210 63 / .9); }
[data-theme="fumetto"] .hero-logo-img { filter: drop-shadow(4px 5px 0 #111) drop-shadow(0 0 22px rgb(255 210 63 / .25)); }

/* ---- HOME: logo in alto, le 2 grafiche più in basso al centro, sopra il Duomo ---- */
[data-theme="fumetto"] body[data-route="home"] #view { display: flex; flex-direction: column; }
[data-theme="fumetto"] .hero { padding-top: 4px; }

/* card-grafica (copertina scontornata): la card è l'immagine stessa — vale per tutti i temi */
.sec-card.is-art { display: block; position: relative; aspect-ratio: 989 / 1333; }
.sec-card.is-art .art-pic { position: absolute; inset: 0; overflow: visible; background: none; }
/* sempre la stessa misura, qualunque risoluzione abbia la grafica caricata */
.sec-card.is-art .art {
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: drop-shadow(0 12px 14px rgb(0 0 0 / .5));
  animation: art-float 4.6s ease-in-out infinite;
  transition: transform .35s var(--ease-back);
}
.sec-card.is-art:nth-child(2) .art { animation-delay: -2.3s; }
@keyframes art-float { 50% { translate: 0 -7px; rotate: -1.2deg; } }
@media (hover: hover) { .sec-card.is-art:hover .art { transform: scale(1.05) rotate(-2deg); } }
.sec-card.is-art:active .art { transform: scale(.95); }

/* ---- card lucide (sotto-sezioni, prodotti, galleria) come le grafiche ---- */
.gloss, .spark { display: none; }
[data-theme="fumetto"] .sub-card,
[data-theme="fumetto"] .prod-pic,
[data-theme="fumetto"] .gallery {
  border: 4px solid #111;
  border-radius: 18px;
  background:
    radial-gradient(circle, rgb(0 0 0 / .16) 1.3px, transparent 1.5px) 0 0 / 7px 7px,
    linear-gradient(160deg, rgb(var(--c1)) 0%, rgb(var(--c2)) 52%, rgb(var(--c3)) 100%);
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / .35), 5px 6px 0 #111;
}
[data-theme="fumetto"] .gloss {
  display: block;
  position: absolute;
  z-index: 4;
  left: 7%;
  top: 4%;
  width: 52%;
  height: 24%;
  border-radius: 12px 60px 12px 12px;
  background: linear-gradient(135deg, rgb(255 255 255 / .8), rgb(255 255 255 / 0) 72%);
  pointer-events: none;
}
[data-theme="fumetto"] .spark { display: block; position: absolute; z-index: 4; color: #fff; text-shadow: 0 0 8px #fff; pointer-events: none; animation: twinkle 2.6s ease-in-out infinite; }
[data-theme="fumetto"] .spark-1 { right: 10%; top: 8%; font-size: 15px; }
[data-theme="fumetto"] .spark-2 { left: 12%; bottom: 34%; font-size: 10px; animation-delay: -1.3s; }
/* foto dentro la card, con la sua cornice nera */
[data-theme="fumetto"] .sub-card .pic,
[data-theme="fumetto"] .prod-pic .pic {
  inset: 9px;
  border: 3px solid #111;
  border-radius: 11px;
  background: rgb(0 0 0 / .18);
}
[data-theme="fumetto"] .sub-card .pic { bottom: 30%; }
/* senza foto: passamontagna a fumetto al posto del segnaposto */
[data-theme="fumetto"] .knit {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath d='M50 6C26 6 14 26 14 52v34c0 16 12 28 28 28h16c16 0 28-12 28-28V52C86 26 74 6 50 6z' fill='%23111'/%3E%3Cpath d='M50 12C30 12 20 30 20 52v34c0 13 9 22 22 22h16c13 0 22-9 22-22V52C80 30 70 12 50 12z' fill='%23262626'/%3E%3Cpath d='M30 20l2 80M42 14l1 92M58 14l-1 92M70 20l-2 80' stroke='%23333' stroke-width='3'/%3E%3Crect x='22' y='46' width='56' height='22' rx='11' fill='%23111'/%3E%3Cpath d='M30 52q8-5 16 2q-8 8-16-2zM70 52q-8-5-16 2q8 8 16-2z' fill='%23fff'/%3E%3C/svg%3E") center 42% / 46% auto no-repeat;
}
[data-theme="fumetto"] .knit-label { display: none; }

/* ---- PAGINE INTERNE: sotto-sezioni piccole al centro ---- */
[data-theme="fumetto"] .sub-grid {
  grid-template-columns: repeat(2, minmax(0, 138px));
  justify-content: center;
  gap: 18px;
  padding: 6px 12px 0;
}
[data-theme="fumetto"] .sub-card { aspect-ratio: 3 / 4; }
[data-theme="fumetto"] .sub-card .sec-card-shade,
[data-theme="fumetto"] .sub-card .sec-card-num,
[data-theme="fumetto"] .sub-card .sec-card-sub { display: none; }
[data-theme="fumetto"] .sub-card .sec-card-body { left: 6px; right: 6px; bottom: 10%; align-items: center; text-align: center; gap: 0; }
[data-theme="fumetto"] .sub-card-title { font-size: 30px; transform: rotate(-4deg); }
[data-theme="fumetto"] .sub-card .sec-card-count {
  top: auto;
  bottom: -2px;
  left: 50%;
  right: auto;
  transform: translate(-50%, 50%);
  background: #ffd23f;
  color: #111;
  border: 2px solid #111;
  border-radius: 99px;
  padding: 3px 10px 1px;
  white-space: nowrap;
  z-index: 5;
}
[data-theme="fumetto"] .sub-card .go { display: none; }
[data-theme="fumetto"] .sub-card { overflow: visible; }
[data-theme="fumetto"] .sub-card > .pic { overflow: hidden; }

[data-theme="fumetto"] .page-head { text-align: center; padding-bottom: 18px; }
[data-theme="fumetto"] .crumb { display: inline-block; background: #111; color: #ffd23f; padding: 4px 10px 2px; border-radius: 99px; }
[data-theme="fumetto"] .page-title { font-size: 76px; }
[data-theme="fumetto"] .page-meta { border-top: 0; justify-content: center; gap: 10px; flex-wrap: wrap; }
[data-theme="fumetto"] .page-sub { color: #fff; text-shadow: 0 2px 0 #111; }
[data-theme="fumetto"] .page-count { background: #ffd23f; color: #111; border: 2px solid #111; border-radius: 99px; padding: 2px 10px 0; }

/* ---- prodotti ---- */
[data-theme="fumetto"] .prod-grid { grid-template-columns: repeat(2, minmax(0, 160px)); justify-content: center; gap: 30px 18px; }
[data-theme="fumetto"] .prod-num { display: none; }
[data-theme="fumetto"] .prod-info { align-items: center; text-align: center; padding-top: 12px; }
[data-theme="fumetto"] .prod-name { font-size: 24px; color: #fff; -webkit-text-stroke: 1.6px #111; paint-order: stroke fill; text-shadow: 0 3px 0 #111; }
[data-theme="fumetto"] .prod-price { font-family: var(--f-d); font-size: 18px; letter-spacing: .04em; background: #e8262b; color: #fff; border: 2px solid #111; border-radius: 99px; padding: 2px 12px 0; box-shadow: 2px 2px 0 #111; }
[data-theme="fumetto"] .tag { background: #ffd23f; color: #111; border: 2px solid #111; transform: rotate(-6deg); font-size: 13px; z-index: 5; }
[data-theme="fumetto"] .tag.is-sold { background: #111; color: #ffd23f; }
[data-theme="fumetto"] .empty { background: #fff; border: 3px dashed #111; color: #111; border-radius: 16px; }

/* ---- pagina prodotto ---- */
[data-theme="fumetto"] .item { padding-top: 16px; }
[data-theme="fumetto"] .gallery { padding: 10px; }
[data-theme="fumetto"] .slides { border: 3px solid #111; border-radius: 11px; }
[data-theme="fumetto"] .item-info { text-align: center; }
[data-theme="fumetto"] .item-name { font-size: 60px; }
[data-theme="fumetto"] .item-price {
  display: inline-block;
  margin-top: 14px;
  padding: 18px 22px 12px;
  font-family: var(--f-d);
  font-size: 30px;
  color: #fff;
  background: #e8262b;
  -webkit-text-stroke: 1.5px #111;
  paint-order: stroke fill;
  clip-path: polygon(50% 0, 61% 18%, 82% 8%, 80% 30%, 100% 36%, 84% 52%, 98% 70%, 76% 72%, 78% 96%, 58% 82%, 44% 100%, 36% 80%, 14% 92%, 18% 68%, 0 60%, 16% 44%, 4% 24%, 26% 24%, 26% 2%, 42% 16%);
}
[data-theme="fumetto"] .item-desc {
  position: relative;
  text-align: left;
  background: #fff;
  border: 3px solid #111;
  border-radius: 18px;
  box-shadow: 5px 5px 0 #111;
  padding: 14px 16px;
  color: #111;
}
[data-theme="fumetto"] .item-desc::after {
  content: "";
  position: absolute;
  left: 34px;
  top: -16px;
  width: 22px;
  height: 16px;
  background: #fff;
  border-left: 3px solid #111;
  border-top: 3px solid #111;
  transform: skewX(30deg);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
[data-theme="fumetto"] .counter { background: #ffd23f; color: #111; border: 2px solid #111; border-radius: 99px; }
[data-theme="fumetto"] .dot { background: #fff; box-shadow: 0 0 0 2px #111; }
[data-theme="fumetto"] .dot.is-on { background: #ffd23f; }
[data-theme="fumetto"] .order {
  background: #e8262b;
  color: #fff;
  border: 4px solid #111;
  border-radius: 16px;
  box-shadow: 6px 6px 0 #111;
  font-size: 34px;
  letter-spacing: .05em;
  -webkit-text-stroke: 1px #111;
  paint-order: stroke fill;
}
[data-theme="fumetto"] .order:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 #111; }
[data-theme="fumetto"] .order.is-off { background: #fff; color: #111; }
[data-theme="fumetto"] .order-note { color: #fff; opacity: .8; }

/* ---- footer e toast ---- */
[data-theme="fumetto"] .foot { background: rgb(13 9 38 / .96); border-top: 3px solid #111; box-shadow: 0 -3px 0 rgb(255 210 63 / .9); }
[data-theme="fumetto"] .foot-link { border-bottom: 2px solid rgb(255 255 255 / .15); }
[data-theme="fumetto"] .foot-link .mono { color: #ffd23f; }
[data-theme="fumetto"] .foot-big { color: transparent; -webkit-text-stroke: 2px rgb(255 210 63 / .35); }
[data-theme="fumetto"] .toast { background: #ffd23f; color: #111; border: 3px solid #111; box-shadow: 4px 4px 0 #111; font-family: var(--f-d); font-size: 16px; letter-spacing: .05em; }

/* comparsa "pop" da fumetto */
[data-theme="fumetto"] .rv { animation-name: pop; animation-duration: .7s; animation-timing-function: var(--ease-back); }
@keyframes pop { from { opacity: 0; transform: scale(.82) rotate(-3deg); } }

@media (prefers-reduced-motion: reduce) {
  .sec-card.is-art .art, [data-theme="fumetto"] .spk, [data-theme="fumetto"] .spark, [data-theme="fumetto"] .clouds { animation: none; }
}

/* home: logo + sezioni + Duomo riempiono il primo schermo, il footer arriva solo scorrendo */
body[data-route="home"] #view { min-height: calc(100svh - var(--top-h) - var(--safe-t)); }
/* nel fumetto lo sfondo si vede sempre tutto: il footer parte sotto la piega anche nelle pagine corte */
[data-theme="fumetto"] #view { min-height: calc(100svh - var(--top-h) - var(--safe-t)); }

/* ============================================================
   v3 (26/10 notte) — home con banner INFO + WhatsApp, sezioni a voci con menu prezzi
   ============================================================ */

/* ---- base per tutti i temi ---- */
.home-menu { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 12px; }
.home-menu .sec-grid { width: 100%; }
.info-banner {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 340px;
  height: 68px;
  overflow: hidden;
  isolation: isolate;
  background: rgb(var(--bg2));
  border: 1px solid var(--line);
}
.info-half { position: absolute; top: 0; bottom: 0; z-index: -1; }
.info-green { left: 0; right: 50%; background: var(--info-l, #28be3c); }
.info-blu { left: 50%; right: 0; background: var(--info-r, #8b5a2b); }
.info-label { position: relative; z-index: 5; font-size: 34px; color: #fff; }
.wa-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wa-icon { width: 58px; height: 58px; display: block; transition: transform .35s var(--ease-back); }
.wa-btn:active .wa-icon { transform: scale(.9); }
@media (hover: hover) { .wa-btn:hover .wa-icon { transform: scale(1.08) rotate(-6deg); } }
.wa-label { font-size: 15px; letter-spacing: .06em; }

.entries { display: flex; flex-direction: column; gap: 30px; padding: 0 16px; }
.entry { display: flex; flex-direction: column; gap: 14px; }
.entry-pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: rgb(var(--bg2)); isolation: isolate; }
.entry-title { font-size: 40px; }
.entry-desc { white-space: pre-line; line-height: 1.5; }
.prices { border: 1px solid var(--line); }
.prices-sum { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; font-size: 22px; }
.prices-sum::-webkit-details-marker { display: none; }
.chev { width: 24px; height: 24px; transition: transform .35s var(--ease-back); }
.prices[open] .chev { transform: rotate(180deg); }
.prices-box { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.price-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.price-row b { white-space: nowrap; }
.prices-ed { white-space: pre-line; }
body:not(.editing) .prices-ed { display: none; }
body.editing .price-rows { display: none; }
.prices .order { margin-top: 10px; min-height: 54px; font-size: 22px; }
.info-body { padding: 0 16px; }
.info-text { white-space: pre-line; line-height: 1.6; }
/* sfondo alto quanto lo schermo "grande": quando la barra del browser si nasconde non salta */
.scene { bottom: auto; height: 100vh; height: 100lvh; }

/* ---- FUMETTO ---- */
[data-theme="fumetto"] { --f-t: "Luckiest Guy", "Bangers", Impact, sans-serif; }
/* niente barra con logo/nome e niente footer: resta solo la freccia indietro */
[data-theme="fumetto"] .top-brand,
[data-theme="fumetto"] .top-meta,
[data-theme="fumetto"] .foot { display: none !important; }
[data-theme="fumetto"] .top,
[data-theme="fumetto"] body.is-scrolled .top,
[data-theme="fumetto"] body:not([data-route="home"]) .top { background: transparent; border-bottom: 0; box-shadow: none; pointer-events: none; }
[data-theme="fumetto"] .top-back {
  pointer-events: auto;
  width: 42px;
  height: 42px;
  margin: 8px 0 0 8px;
  border-radius: 50%;
  background: #ffd23f;
  color: #111;
  border: 3px solid #111;
  box-shadow: 3px 3px 0 #111;
}
/* lo sfondo non cambia mai scorrendo (niente scurimenti né spostamenti) */
[data-theme="fumetto"] .scene .duomo, [data-theme="fumetto"] .scene .sky { transition: none; }
[data-theme="fumetto"] body:not([data-route="home"]) .scene .duomo { opacity: .22; transform: translateX(-50%); }
[data-theme="fumetto"] body:not([data-route="home"]) .scene .sky { opacity: 1; }

/* ---- home: logo, 2 grafiche un po' più grandi e più su, INFO, WhatsApp ---- */
[data-theme="fumetto"] .home-menu { margin: auto 0 5svh; gap: 18px; }
[data-theme="fumetto"] .home-menu .sec-grid { padding: 0; grid-template-columns: repeat(2, minmax(0, 158px)); justify-content: center; gap: 18px; }
[data-theme="fumetto"] .info-banner {
  max-width: 334px;
  height: 66px;
  border: 4px solid #111;
  border-radius: 18px;
  background: none;
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / .35), 5px 6px 0 #111;
  animation: art-float 4.6s ease-in-out infinite -1.1s;
}
[data-theme="fumetto"] .info-half::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgb(0 0 0 / .18) 1.3px, transparent 1.5px) 0 0 / 7px 7px;
}
/* i due colori dello studio (--info-l / --info-r) sfumano uno nell'altro, con luce dall'alto */
[data-theme="fumetto"] .info-green {
  right: 0;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .38) 0%, rgb(255 255 255 / 0) 48%, rgb(0 0 0 / .28) 100%),
    linear-gradient(100deg, color-mix(in srgb, var(--info-l, #28be3c), #fff 22%) 0%, var(--info-l, #28be3c) 30%, color-mix(in srgb, var(--info-l, #28be3c), var(--info-r, #3b6fe0)) 50%, var(--info-r, #3b6fe0) 70%, color-mix(in srgb, var(--info-r, #3b6fe0), #fff 22%) 100%);
  background-size: 100% 100%, 160% 100%;
  animation: info-flow 7s ease-in-out infinite alternate;
}
[data-theme="fumetto"] .info-blu { display: none; }
@keyframes info-flow { to { background-position: 0 0, 100% 0; } }
[data-theme="fumetto"] .info-banner .gloss { height: 40%; width: 70%; left: 4%; top: 6%; border-radius: 12px 60px 12px 12px; }
[data-theme="fumetto"] .info-label {
  font-family: var(--f-t);
  font-size: 38px;
  letter-spacing: .06em;
  color: #fff;
  -webkit-text-stroke: 2.5px #111;
  paint-order: stroke fill;
  text-shadow: 0 4px 0 #111;
  transform: rotate(-3deg);
}
[data-theme="fumetto"] .wa-icon { width: 60px; height: 60px; filter: drop-shadow(3px 4px 0 #111); }
[data-theme="fumetto"] .wa-label { font-family: var(--f-t); font-size: 16px; color: #fff; -webkit-text-stroke: 1.2px #111; paint-order: stroke fill; text-shadow: 0 2px 0 #111; }

/* ---- dentro la sezione: titolo estetico, voci con foto + titolo + descrizione + prezzi ---- */
[data-theme="fumetto"] .page-head { padding-top: 54px; }
[data-theme="fumetto"] .page-title,
[data-theme="fumetto"] .entry-title {
  font-family: var(--f-t);
  letter-spacing: .03em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 34%, rgb(var(--c1)) 60%, rgb(var(--c2)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2.5px #111;
  caret-color: #fff;
  filter: drop-shadow(0 5px 0 #111) drop-shadow(3px 0 0 #111);
  line-height: 1.05;
}
[data-theme="fumetto"] .page-title { font-size: 64px; transform: rotate(-3deg); }
[data-theme="fumetto"] .entries { padding: 4px 22px 0; gap: 34px; }
[data-theme="fumetto"] .entry-pic {
  border: 4px solid #111;
  border-radius: 18px;
  padding: 9px;
  background:
    radial-gradient(circle, rgb(0 0 0 / .16) 1.3px, transparent 1.5px) 0 0 / 7px 7px,
    linear-gradient(160deg, rgb(var(--c1)) 0%, rgb(var(--c2)) 52%, rgb(var(--c3)) 100%);
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / .35), 5px 6px 0 #111;
}
[data-theme="fumetto"] .entry-pic .pic { inset: 9px; border: 3px solid #111; border-radius: 11px; background: rgb(0 0 0 / .2); }
[data-theme="fumetto"] .entry-body { display: flex; flex-direction: column; gap: 10px; text-align: center; }
[data-theme="fumetto"] .entry-title { font-size: 36px; }
[data-theme="fumetto"] .entry-desc { color: #fff; font-size: 17px; text-shadow: 0 2px 0 #111; }
[data-theme="fumetto"] .prices {
  text-align: left;
  border: 3px solid #111;
  border-radius: 16px;
  background: #fff;
  color: #111;
  box-shadow: 4px 5px 0 #111;
  overflow: hidden;
}
[data-theme="fumetto"] .prices-sum {
  font-family: var(--f-t);
  font-size: 22px;
  letter-spacing: .05em;
  background: rgb(var(--c2));
  color: #fff;
  -webkit-text-stroke: 1.2px #111;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #111;
}
[data-theme="fumetto"] .prices[open] .prices-sum { border-bottom: 3px solid #111; }
[data-theme="fumetto"] .chev { color: #fff; filter: drop-shadow(0 2px 0 #111); }
[data-theme="fumetto"] .prices-box { padding: 6px 16px 16px; }
[data-theme="fumetto"] .price-row { border-bottom: 2px dashed rgb(17 17 17 / .2); font-size: 17px; }
[data-theme="fumetto"] .price-row b { font-family: var(--f-d); font-size: 21px; letter-spacing: .04em; color: #e8262b; }
[data-theme="fumetto"] .prices .order { min-height: 54px; font-size: 24px; border-radius: 14px; box-shadow: 4px 4px 0 #111; }
[data-theme="fumetto"] .entries .empty { color: #111; }

/* ---- info ---- */
[data-theme="fumetto"] .info-body { padding: 6px 22px 0; }
/* scheda info: vetro sfumato coi colori del banner, bordo a china */
[data-theme="fumetto"] .info-text {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle, rgb(255 255 255 / .1) 1.2px, transparent 1.4px) 0 0 / 8px 8px,
    linear-gradient(180deg, rgb(255 255 255 / .22), rgb(255 255 255 / .04) 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--info-l, #28be3c), transparent 35%), color-mix(in srgb, var(--info-r, #3b6fe0), transparent 35%));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 3px solid #111;
  border-radius: 22px;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .3), 5px 6px 0 #111, 0 0 40px color-mix(in srgb, var(--info-r, #3b6fe0), transparent 55%);
  padding: 20px 20px;
  font-size: 18px;
  line-height: 1.65;
  text-shadow: 0 2px 0 rgb(0 0 0 / .55);
}
body:not(.editing) .info-text:empty { display: none; }

/* logo assistenza caricato dallo studio al posto di quello WhatsApp */
.wa-img { object-fit: contain; }
[data-theme="fumetto"] .wa-img { filter: drop-shadow(3px 4px 0 #111); }

/* fumetto, home: il Duomo a china riempie lo spazio tra il logo e le card, sempre intero e visibile */
[data-theme="fumetto"] .home-duomo { position: relative; flex: 1 1 auto; min-height: 110px; margin: 6px 22px -18px; z-index: 0; }
[data-theme="fumetto"] .home-duomo .duomo-svg { position: absolute; inset: 0; width: 100%; height: 100%; max-height: 230px; top: auto; filter: drop-shadow(0 0 30px rgb(255 170 210 / .45)); }
[data-theme="fumetto"] .home-duomo ~ .home-menu { position: relative; z-index: 1; margin-top: 0; }
[data-theme="fumetto"] body[data-route="home"] .scene .duomo-comic { display: none; }