/* --- 00-base.css --- */
/* Font giapponesi ospitati in locale (SIL OFL 1.1), ridotti ai soli caratteri usati nel
   sito da scripts/fonts.mjs: Yuji Syuku (pennello) e Shippori Mincho (verticale, timbri).
   unicode-range: il browser li scarica solo se nella pagina c'e' davvero del giapponese. */
@font-face { font-family: 'MB Brush'; src: url('/assets/fonts/mb-brush.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+FF00-FFEF; }
@font-face { font-family: 'MB Mincho'; src: url('/assets/fonts/mb-mincho-500.woff2') format('woff2'); font-weight: 400 600; font-display: swap; unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+FF00-FFEF; }
@font-face { font-family: 'MB Mincho'; src: url('/assets/fonts/mb-mincho-700.woff2') format('woff2'); font-weight: 700 900; font-display: swap; unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+FF00-FFEF; }

/* ==========================================================================
   Matcha Bunny, versione "kawaii boutique da sala da te'" (24.09.2026)
   PALETTE: solo colori misurati con sharp sui pixel del logo ufficiale
   (photo_2026-03-28_10-13-06-photoaidcom-cropped-1.png, 672 px) e dei post Instagram
   della cliente (_source/client-2026-09-24). Nessun nero, nessun grigio neutro scuro.
   Script: scripts/palette.mjs. Contrasti misurati su --cream.
   ========================================================================== */
:root {
  /* fondi */
  --cream: #fff3f8;       /* 25.09 "use more bubble gum": fondo pagina = bubble gum #fb54a3 al 7% (testi 4,5-8:1) */
  --paper: #fdfcfd;       /* bianco interno del logo, zona (300,470) */
  --blush: #ffe8f2;       /* bubble gum al 13%: sezioni rosa con testo (verde scuro 7,4:1) */
  --blush-2: #ffc4e1;     /* bubble gum al 33%: solo superfici senza testo */
  --matcha-tint: #eff2df; /* verde arco del logo #98b527 al 14% su --paper: senza testo */
  /* rosa */
  /* 25.09.2026 la cliente: "more like bubble gum pink", "green in the circle", font come l'adesivo
     Pretty Boys. Colori misurati sui pixel degli adesivi (sticker-pretty-boys/girls.jpg). */
  --pink: #fb54a3;        /* rosa bubble gum dell'adesivo (mediana pixel) - decorativo, riempimenti */
  --pink-soft: #fb63b0;   /* rosa chiaro dell'adesivo - decorativo, onda, cuori */
  --pink-ink: #d31c76;    /* bubble gum scurito quanto basta: 4,5:1 su crema, 4,85:1 col bianco - bottoni e testi rosa */
  --bubble: #fb54a3;      /* bubble gum pieno: noren, cornici, fasce (niente testo piccolo sopra) */
  --pink-title: #f24593;  /* bubble gum per i titoli grandi (3,2:1, soglia 3:1 del testo grande) */
  /* verde */
  --green: #15b203;       /* verde del cerchio dell'adesivo - decorativo */
  --green-mid: #1ca30d;   /* verde dell'adesivo girls - stelline, linee, titoli grandi (3,1:1) */
  --green-leaf: #5fb352;  /* verde dell'adesivo schiarito: telai shoji, byobu, fascia in fondo */
  --green-ink: #0b7a02;   /* verde dell'adesivo scurito a 5,2:1 - testi verdi piccoli */
  --green-deep: #305429;  /* testo del corpo nel post IG gut (8,1:1) - testo principale */

  --shadow: 0 22px 44px -26px rgba(203, 17, 94, .38);   /* ombra tinta di rosa, mai scura */
  --shadow-sm: 0 10px 22px -14px rgba(203, 17, 94, .34);
  --r: 28px;
  --display: 'Fredoka', 'Nunito', system-ui, sans-serif;  /* lettere tonde e piene come l'adesivo; font del sito attuale */
  --brush: 'MB Brush', 'MB Mincho', serif;
  --mincho: 'MB Mincho', serif;
  --body: 'Nunito', system-ui, sans-serif;
  --wrap: 1080px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.23, 1, .32, 1);
  /* motivi tradizionali nei colori del logo, usati come texture tenui */
  --asanoha: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2740%27%20height%3D%2769.3%27%20viewBox%3D%270%200%2040%2069.3%27%3E%3Cpath%20d%3D%27M0%200L40%200M0%200L20%2011.5M40%200L20%2034.6M40%200L20%2011.5M20%2034.6L0%200M20%2034.6L20%2011.5M0%200L20%2034.6M0%200L0%2023.1M20%2034.6L-20%2034.6M20%2034.6L0%2023.1M-20%2034.6L0%200M-20%2034.6L0%2023.1M40%200L60%2034.6M40%200L40%2023.1M60%2034.6L20%2034.6M60%2034.6L40%2023.1M20%2034.6L40%200M20%2034.6L40%2023.1M20%2034.6L0%2069.3M20%2034.6L20%2057.7M0%2069.3L40%2069.3M0%2069.3L20%2057.7M40%2069.3L20%2034.6M40%2069.3L20%2057.7M-20%2034.6L0%2069.3M-20%2034.6L0%2046.2M0%2069.3L20%2034.6M0%2069.3L0%2046.2M20%2034.6L-20%2034.6M20%2034.6L0%2046.2M20%2034.6L60%2034.6M20%2034.6L40%2046.2M60%2034.6L40%2069.3M60%2034.6L40%2046.2M40%2069.3L20%2034.6M40%2069.3L40%2046.2%27%20fill%3D%27none%27%20stroke%3D%27%237e9a5a%27%20stroke-width%3D%27.8%27%2F%3E%3C%2Fsvg%3E");
  --sakura: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Cg%20fill%3D%27%23fc8ab3%27%3E%3Cellipse%20cx%3D%2735.6%27%20cy%3D%2731.3%27%20rx%3D%275.9%27%20ry%3D%274.2%27%20transform%3D%27rotate(10%2035.6%2031.3)%27%2F%3E%3Cellipse%20cx%3D%2729.1%27%20cy%3D%2737.6%27%20rx%3D%275.9%27%20ry%3D%274.2%27%20transform%3D%27rotate(82%2029.1%2037.6)%27%2F%3E%3Cellipse%20cx%3D%2721.1%27%20cy%3D%2733.4%27%20rx%3D%275.9%27%20ry%3D%274.2%27%20transform%3D%27rotate(154%2021.1%2033.4)%27%2F%3E%3Cellipse%20cx%3D%2722.7%27%20cy%3D%2724.5%27%20rx%3D%275.9%27%20ry%3D%274.2%27%20transform%3D%27rotate(226%2022.7%2024.5)%27%2F%3E%3Cellipse%20cx%3D%2731.6%27%20cy%3D%2723.2%27%20rx%3D%275.9%27%20ry%3D%274.2%27%20transform%3D%27rotate(298%2031.6%2023.2)%27%2F%3E%3Cellipse%20cx%3D%2792.2%27%20cy%3D%2787.5%27%20rx%3D%274.2%27%20ry%3D%273%27%20transform%3D%27rotate(40%2092.2%2087.5)%27%2F%3E%3Cellipse%20cx%3D%2785.9%27%20cy%3D%2789.1%27%20rx%3D%274.2%27%20ry%3D%273%27%20transform%3D%27rotate(112%2085.9%2089.1)%27%2F%3E%3Cellipse%20cx%3D%2782.5%27%20cy%3D%2783.6%27%20rx%3D%274.2%27%20ry%3D%273%27%20transform%3D%27rotate(184%2082.5%2083.6)%27%2F%3E%3Cellipse%20cx%3D%2786.7%27%20cy%3D%2778.7%27%20rx%3D%274.2%27%20ry%3D%273%27%20transform%3D%27rotate(256%2086.7%2078.7)%27%2F%3E%3Cellipse%20cx%3D%2792.7%27%20cy%3D%2781.1%27%20rx%3D%274.2%27%20ry%3D%273%27%20transform%3D%27rotate(328%2092.7%2081.1)%27%2F%3E%3Cellipse%20cx%3D%2799.3%27%20cy%3D%2720%27%20rx%3D%272.5%27%20ry%3D%271.8%27%20transform%3D%27rotate(0%2099.3%2020)%27%2F%3E%3Cellipse%20cx%3D%2797%27%20cy%3D%2723.1%27%20rx%3D%272.5%27%20ry%3D%271.8%27%20transform%3D%27rotate(72%2097%2023.1)%27%2F%3E%3Cellipse%20cx%3D%2793.3%27%20cy%3D%2721.9%27%20rx%3D%272.5%27%20ry%3D%271.8%27%20transform%3D%27rotate(144%2093.3%2021.9)%27%2F%3E%3Cellipse%20cx%3D%2793.3%27%20cy%3D%2718.1%27%20rx%3D%272.5%27%20ry%3D%271.8%27%20transform%3D%27rotate(216%2093.3%2018.1)%27%2F%3E%3Cellipse%20cx%3D%2797%27%20cy%3D%2716.9%27%20rx%3D%272.5%27%20ry%3D%271.8%27%20transform%3D%27rotate(288%2097%2016.9)%27%2F%3E%3Cellipse%20cx%3D%2733.6%27%20cy%3D%2799.3%27%20rx%3D%272.9%27%20ry%3D%272.1%27%20transform%3D%27rotate(20%2033.6%2099.3)%27%2F%3E%3Cellipse%20cx%3D%2729.9%27%20cy%3D%27101.8%27%20rx%3D%272.9%27%20ry%3D%272.1%27%20transform%3D%27rotate(92%2029.9%20101.8)%27%2F%3E%3Cellipse%20cx%3D%2726.3%27%20cy%3D%2799.1%27%20rx%3D%272.9%27%20ry%3D%272.1%27%20transform%3D%27rotate(164%2026.3%2099.1)%27%2F%3E%3Cellipse%20cx%3D%2727.8%27%20cy%3D%2794.8%27%20rx%3D%272.9%27%20ry%3D%272.1%27%20transform%3D%27rotate(236%2027.8%2094.8)%27%2F%3E%3Cellipse%20cx%3D%2732.4%27%20cy%3D%2795%27%20rx%3D%272.9%27%20ry%3D%272.1%27%20transform%3D%27rotate(308%2032.4%2095)%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cg fill='none' stroke='%23fc8ab3' stroke-opacity='.42' stroke-width='1.3'%3E%3Cpath d='M0 28a28 28 0 0 1 56 0M9 28a19 19 0 0 1 38 0M18 28a10 10 0 0 1 20 0'/%3E%3Cpath d='M-28 14a28 28 0 0 1 56 0M-19 14a19 19 0 0 1 38 0M-10 14a10 10 0 0 1 20 0M28 14a28 28 0 0 1 56 0M37 14a19 19 0 0 1 38 0M46 14a10 10 0 0 1 20 0'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--green-deep);
  font: 500 17px/1.65 var(--body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--blush-2); color: var(--green-deep); }
:focus-visible { outline: 3px solid var(--pink-ink); outline-offset: 3px; border-radius: 12px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--pink-ink); color: var(--paper); padding: 10px 18px; border-radius: 999px; font-weight: 800; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--mid { max-width: calc(820px + var(--gutter) * 2); }
.wrap--wide { max-width: calc(1240px + var(--gutter) * 2); }
/* ogni parola giapponese usa i font giapponesi locali (mai quelli latini) */
:lang(ja) { font-family: var(--mincho); }
.art { width: 100%; height: auto; }

/* Sezioni: fondi chiari soltanto (crema, carta, rosa pallido) */
.sec { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.sec--paper { background: var(--paper); }
.sec--blush { background: var(--blush); }
.sec--wave { background-color: var(--blush); background-image: var(--seigaiha); background-size: 56px 28px; }
.sec-head { max-width: 640px; margin-bottom: clamp(32px, 4vw, 52px); }
.sec-head .lede { margin-top: 18px; }

.lede { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; max-width: 58ch; }
.note { font-size: 14.5px; color: var(--green-ink); font-weight: 700; }
.ph { display: block; border-radius: var(--r); overflow: hidden; background: var(--blush); }
.ph img { width: 100%; height: 100%; object-fit: cover; }

/* --- 10-ui.css --- */
/* Sistema grafico dei post: titoli maiuscoli molto bold e arrotondati, righe verde/rosa,
   divisorio con cuore, stelline a 4 punte, pillole e cerchi a contorno rosa. */
.t2 { font: 800 clamp(34px, 4.4vw, 58px)/1 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.t2-l { display: block; }
.t2-g { color: var(--green-ink); }
.t2-p { color: var(--pink-ink); }
.t2--xl { font-size: clamp(44px, 6.4vw, 84px); }
.t2--md { font-size: clamp(30px, 3.6vw, 46px); }
.jp { display: inline-block; font: 500 13px/1 var(--display); letter-spacing: .12em; color: var(--pink-ink); background: var(--paper); border: 1.5px solid var(--pink-soft); border-radius: 999px; padding: 7px 12px 6px; vertical-align: middle; text-transform: none; margin-top: 14px; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 800 14px/1 var(--body); text-transform: uppercase; letter-spacing: .14em; color: var(--green-ink); }
.eyebrow .ico { width: 18px; height: 18px; color: var(--pink-ink); }
.eyebrow .jp { margin: 0 0 0 6px; letter-spacing: .08em; }

.hrule { display: flex; align-items: center; gap: 12px; width: min(280px, 70%); margin: 22px 0; }
.hrule i { flex: 1; height: 2px; border-radius: 2px; }
.hrule .art { width: 22px; flex: none; }
.hrule--sm { width: 100%; margin: 18px 0; }

.spk { position: absolute; display: block; pointer-events: none; }
.spk .art { width: 100%; }

/* Pulsanti: un solo sistema (pillola piena, pillola a contorno, cerchio con freccia) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px 0 26px; border-radius: 999px;
  font: 800 15px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  text-decoration: none; border: 2px solid var(--pink-ink); color: var(--pink-ink); background: transparent;
  transition: transform .35s var(--ease), background-color .25s, color .25s, box-shadow .35s var(--ease);
}
.btn-ico { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
.btn--fill { background: var(--pink-ink); color: var(--paper); box-shadow: var(--shadow-sm); }
.btn--line { background: var(--paper); }
.btn--sm { min-height: 44px; padding: 0 18px 0 20px; font-size: 13.5px; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .btn--line:hover { background: var(--blush); }
  .btn:hover .btn-ico { transform: translateX(3px); }
}
.btn:active { transform: translateY(0) scale(.97); }

.cbtn {
  display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid var(--pink-ink); color: var(--pink-ink); background: var(--paper); text-decoration: none;
  transition: transform .35s var(--ease), background-color .25s, color .25s;
}
.cbtn .ico { width: 24px; height: 24px; }
@media (hover: hover) { .cbtn:hover { background: var(--pink-ink); color: var(--paper); transform: rotate(-8deg) scale(1.05); } }
.cbtn:active { transform: scale(.94); }
.cbtn[disabled] { opacity: .45; cursor: default; transform: none; background: var(--paper); color: var(--pink-ink); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font: 800 13.5px/1 var(--body); color: var(--green-deep); background: var(--paper); border: 1.5px solid var(--pink-soft); border-radius: 999px; padding: 9px 14px; }
.chips .chip-d { font-weight: 700; color: var(--pink-ink); margin-left: 4px; } /* date del pop-up dal portale */

/* Timbro hanko rosa con 抹茶 */
.hanko {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 58px; height: 74px; border-radius: 14px; background: var(--pink-ink); color: var(--paper);
  font: 700 23px/1.05 var(--mincho); transform: rotate(-8deg); box-shadow: var(--shadow-sm);
}
.hanko span { display: block; }

/* Adesivi ufficiali */
.stk-img img { width: 100%; filter: drop-shadow(0 12px 16px rgba(203, 17, 94, .22)); }

.pay { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-weight: 800; font-size: 15px; color: var(--green-ink); }
.pay .ico { width: 22px; height: 22px; color: var(--pink-ink); }
.addr { display: flex; gap: 12px; margin-top: 22px; font-weight: 700; }
.addr .ico { width: 24px; height: 24px; flex: none; color: var(--pink-ink); margin-top: 2px; }

/* --- 20-chrome.css --- */
/* Header, menu mobile, footer con l'onda rosa sopra la fascia verde. */
.top {
  position: sticky; top: 0; z-index: 40; background: var(--cream);
  border-bottom: 1.5px solid transparent; transition: border-color .3s;
}
.top.is-scrolled { border-bottom-color: var(--blush-2); }
.top-in { display: flex; align-items: center; gap: 18px; height: 76px; max-width: calc(1240px + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand img { width: 54px; height: 54px; }
.brand-word { font: 800 19px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.bw-p { color: var(--pink-ink); }
.bw-g { color: var(--green-ink); }
.nav { margin: 0 auto; }
.nav ul { display: flex; gap: 4px; }
.nav-link { display: block; padding: 10px 14px; border-radius: 999px; font: 800 15px/1 var(--body); color: var(--green-deep); text-decoration: none; transition: background-color .25s, color .25s; }
.nav-link:hover { background: var(--blush); color: #c81a70; } /* pink-ink su blush fa 4,3:1: un filo piu' scuro = 4,7:1 */
.nav-link[aria-current="page"] { color: #c81a70; background: var(--blush); }
.top-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.lang { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font: 800 13px/1 var(--display); color: var(--green-ink); text-decoration: none; border: 1.5px solid var(--matcha-tint); background: var(--paper); }
.lang:hover { border-color: var(--green); }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--pink-ink); background: var(--paper); position: relative; }
.burger i { position: absolute; left: 12px; right: 12px; height: 2.5px; border-radius: 2px; background: var(--pink-ink); transition: transform .3s var(--ease); }
.burger i:first-child { top: 17px; }
.burger i:last-child { top: 25px; }
.burger[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg); }

.menu { position: fixed; inset: 76px 0 0; z-index: 39; background: var(--cream); padding: 28px var(--gutter) 40px; overflow-y: auto; display: flex; flex-direction: column; }
.menu[hidden] { display: none; }
.menu-list { display: grid; gap: 4px; }
.menu-link { display: block; padding: 10px 0; font: 800 clamp(34px, 9vw, 46px)/1.05 var(--display); text-transform: uppercase; text-decoration: none; }
.menu-link--g { color: var(--green-ink); }
.menu-link--p { color: var(--pink-ink); }
.menu-link[aria-current="page"]::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 12px; border-radius: 50%; background: var(--pink); vertical-align: middle; }
.menu-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.menu-bunnies { width: min(260px, 64%); margin: auto auto 0; padding-top: 24px; }
body.menu-open { overflow: hidden; }

@media (max-width: 1199px) {
  .nav, .top-shop, .top .lang { display: none; }
  .burger { display: block; }
  .top-actions { margin-left: auto; }
}
@media (max-width: 600px) {
  .top-in { height: 66px; gap: 10px; }
  .menu { inset: 66px 0 0; }
  .brand img { width: 46px; height: 46px; }
  .brand-word { font-size: 16px; }
}
@media (max-width: 439px) { .brand-word { display: none; } }

/* Footer */
.foot { background: var(--cream); padding-top: clamp(56px, 7vw, 88px); position: relative; }
.foot-in { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.3fr .8fr 1.1fr 1fr; gap: 36px; align-items: start; }
.foot-logo { width: 104px; }
.foot-tag { margin-top: 16px; max-width: 30ch; font-size: 15.5px; }
.foot-h { font: 800 14px/1 var(--display); text-transform: uppercase; letter-spacing: .12em; color: var(--pink-ink); margin-bottom: 16px; }
.foot-list { display: grid; gap: 10px; }
.foot-list a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 15.5px; }
.foot-list a:hover { color: var(--pink-ink); }
.foot-list .ico { width: 18px; height: 18px; color: var(--pink-ink); flex: none; }
.foot-duo { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.foot-b { width: 86px; }
.foot-heart { width: 22px; margin-bottom: 18px; }
.hanko--foot { position: absolute; right: 0; top: -18px; width: 44px; height: 56px; font-size: 17px; border-radius: 11px; }
.foot-legal { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 40px auto 0; padding: 20px var(--gutter) 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 14px; font-weight: 700; color: var(--green-ink); border-top: 1.5px solid var(--blush-2); }
.credit { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.credit:hover span { text-decoration: underline; text-underline-offset: 3px; }
.credit img { height: 22px; width: auto; }
.wave-band { height: clamp(46px, 5vw, 72px); }
/* spazio per il cuore fluttuante (sotto i 1400 px): a fine pagina l'ultima riga del footer
   resta sopra il cuore, che si appoggia sull'onda decorativa */
@media (max-width: 1399px) { .foot-legal { padding-bottom: calc(34px + env(safe-area-inset-bottom)); } }
.wave-band svg { width: 100%; height: 100%; }

@media (max-width: 900px) {
  .foot-in { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-duo { grid-column: 1 / -1; justify-content: flex-start; }
  .hanko--foot { right: auto; left: 210px; }
}
@media (max-width: 480px) {
  .foot-in { grid-template-columns: 1fr; }
  .foot-legal { flex-direction: column; }
}
/* link legali nel piede (Impressum, Datenschutz, AGB) */
.foot-law { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-law a { display: inline-block; padding: 12px 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.foot-law a:hover { color: var(--pink-ink); }

/* --- 30-player.css --- */
/* Player a cuore ("Press ♥ to play", come il sito attuale). NON sta nell'header: e' un cuore
   fluttuante in basso a destra a TUTTE le larghezze, con margine dal bordo e safe-area.
   - mentre si scorre si ritira quasi tutto oltre il bordo destro (resta una linguetta dentro
     il margine della pagina) e torna fuori solo dove sotto non ci sono testo, link o pulsanti
     (js/10-player.js); in fondo alla pagina il footer ha lo spazio per lui;
   - sotto i 1400 px etichetta a sinistra del cuore (una riga bassa); da 1400 px cuore piu'
     grande con l'etichetta sopra, di solito nel margine laterale libero.
   L'etichetta compare in cima alla pagina (sotto i 1400 px poi resta il cuore da solo). */
.player {
  --pb: 52px; --pr: max(14px, env(safe-area-inset-right));
  /* spostamento della linguetta: il bordo sinistro del cuore finisce a (margine pagina - 2 px)
     dal bordo destro dello schermo, quindi la parte visibile non tocca mai il contenuto */
  --tuck: calc(var(--pr) + var(--pb) - var(--gutter) + 2px);
  position: fixed; z-index: 45;
  right: var(--pr);
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  pointer-events: none;
}
.player > * { pointer-events: auto; }
.player-label {
  order: -1; width: auto; min-width: 104px; max-width: 150px; text-align: center;
  font: 800 12px/1.25 var(--body); color: var(--green-ink);
  background: var(--paper); border: 2px solid var(--pink-soft); border-radius: 16px; padding: 6px 6px 5px;
  box-shadow: var(--shadow-sm);
  transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.player-label .pl-mini { display: inline-block; width: 12px; vertical-align: -1px; }
.player-label b { display: block; font-size: 12.5px; color: var(--pink-ink); }
.player-label small { display: block; font: 700 11px/1.25 var(--body); color: var(--green-deep); margin-top: 1px; }
.pl-song { display: none; }
.player.is-played .pl-idle { display: none; }
.player.is-played .pl-song { display: block; }
.player-btn { position: relative; width: var(--pb); height: calc(var(--pb) * .92); flex: none; display: grid; place-items: center; transition: transform .45s var(--ease); }
.player-heart { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--pink-ink); filter: drop-shadow(0 6px 8px rgba(203, 17, 94, .32)); transition: fill .25s; }
.player-btn .ico { position: relative; width: 20px; height: 20px; color: var(--paper); margin-top: -3px; }
.player-btn .ico-pause { display: none; }
.player.is-playing .ico-play { display: none; }
.player.is-playing .ico-pause { display: block; }
.player-btn:hover .player-heart { fill: var(--pink); }
.player-btn:active { transform: scale(.94); }
.player.is-playing .player-heart { animation: beat 1.05s var(--ease) infinite; transform-origin: 50% 55%; }
@keyframes beat { 0%, 100% { transform: scale(1); } 18% { transform: scale(1.13); } 36% { transform: scale(.98); } 52% { transform: scale(1.07); } }
.player-vol { display: none; }
.player-vol input { width: 100%; accent-color: var(--pink-ink); }
.menu-open .player { display: none; }
/* senza JavaScript la canzone non puo' partire: niente cuore (e niente sovrapposizioni) */
html:not(.js) .player { display: none; }

/* in cima alla pagina: cuore + etichetta; appena si scorre resta solo il cuore */
.pg-scrolled .player-label, .player.is-tucked .player-label { opacity: 0; transform: translateX(10px); pointer-events: none; }

/* linguetta: il cuore scivola oltre il bordo, ne resta visibile solo la punta sinistra
   (larga quanto il margine della pagina meno 2 px), che resta cliccabile */
.player.is-tucked .player-btn { transform: translateX(var(--tuck)); }
/* da tastiera il cuore torna fuori (solo focus-visible: col clic/tap non si sposta sotto il dito) */
.player.is-tucked .player-btn:focus-visible { transform: none; }

@media (min-width: 1400px) {
  .player {
    --pr: 12px; --pb: 70px; --bw: 104px; --tuck: calc(var(--pr) + var(--bw) / 2 + var(--pb) / 2 - var(--gutter) + 2px);
    width: var(--bw); flex-direction: column; bottom: calc(22px + env(safe-area-inset-bottom)); gap: 10px;
  }
  .player-label { width: 100%; font-size: 13px; padding: 8px 8px 7px; border-radius: 18px; }
  .pg-scrolled .player-label { opacity: 1; transform: none; pointer-events: auto; }
  .player.is-tucked .player-label { opacity: 0; transform: translateY(8px); }
  .player-btn .ico { width: 26px; height: 26px; }
  .player.is-playing .player-vol { display: block; width: 100%; }
}




/* Cuori che salgono dal player mentre suona (js/10-player.js) */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.fx-heart { position: absolute; width: 20px; will-change: transform, opacity; }
.fx-heart .art { width: 100%; }

/* Telefono (27.09.2026): la cliente non vedeva il cuore, che su schermi stretti restava quasi sempre
   ritirato (14 px su 52) perche' il testo occupa tutta la larghezza. Sotto i 900 px la canzone si
   comanda da un cuore fisso nella testata, accanto al carrello: sempre visibile, non copre nulla. */
.music-btn { display: none; }
@media (max-width: 899px) {
  .js .music-btn {
    display: inline-grid; place-items: center; position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%;
    border: 2px solid var(--pink-ink); background: var(--paper); color: var(--paper);
    transition: transform .16s var(--ease), background-color .2s;
  }
  .music-btn > * { grid-area: 1 / 1; }
  .music-heart { width: 26px; height: 24px; fill: var(--pink); }
  .music-btn .ico { width: 11px; height: 11px; margin-top: -1px; }
  .music-btn .ico-pause { display: none; }
  .music-btn[aria-pressed="true"] .ico-pause { display: block; }
  .music-btn[aria-pressed="true"] .ico-play { display: none; }
  .music-btn[aria-pressed="true"] { background: var(--pink-ink); }
  .music-btn[aria-pressed="true"] .music-heart { fill: var(--paper); }
  .music-btn[aria-pressed="true"] .ico { color: var(--pink-ink); }
  .music-btn:active { transform: scale(.94); }
  .js .player { display: none; }
  /* scelta della canzone sotto il cuore: la nostra suona qui, l'altra si apre su Spotify */
  .music-wrap { position: relative; flex: none; display: flex; }
  .music-pop {
    position: absolute; z-index: 60; top: calc(100% + 10px); right: -54px; width: 212px;
    display: flex; flex-direction: column; gap: 5px; padding: 8px;
    background: var(--paper); border: 2px solid var(--pink-soft); border-radius: 18px; box-shadow: var(--shadow-sm);
  }
  .music-pop[hidden] { display: none; }
  .music-pop .pl-track { padding: 10px 10px; font-size: 13px; min-height: 44px; }
}
@media (max-width: 380px) { .top-actions { gap: 6px; } }

/* --- 40-home.css --- */
/* Home: menu del bar, il bar di Basilea, FAQ, Follow the bunny (hero e sezioni giapponesi
   in 47-sections.css). */
/* Menu del bar */
.menu-split { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.menu-photo { position: relative; }
.menu-photo .ph { aspect-ratio: 4 / 5; box-shadow: var(--shadow); }
.menu-stk { position: absolute; width: clamp(96px, 10vw, 128px); right: -18px; bottom: -24px; transform: rotate(10deg); }
.menu-copy .lede { margin-top: 16px; }
.menu-card { margin-top: 26px; background: var(--paper); border-radius: var(--r); padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow); }
.mc-h { font: 800 14px/1.2 var(--display); text-transform: uppercase; letter-spacing: .14em; color: var(--pink-ink); margin-bottom: 12px; }
.mc-classes { display: grid; gap: 14px; }
.mc-classes li { display: grid; grid-template-columns: 20px auto 1fr auto; gap: 2px 10px; align-items: baseline; }
.mc-ico { width: 18px; align-self: center; }
.mc-name { font: 800 17px/1.2 var(--body); }
.mc-dots { border-bottom: 2px dotted var(--pink-soft); transform: translateY(-4px); min-width: 16px; }
.mc-price { font: 800 16px/1 var(--display); color: var(--pink-ink); white-space: nowrap; }
.mc-desc { grid-column: 2 / -1; font-size: 14.5px; line-height: 1.45; color: var(--green-ink); font-weight: 700; }
.mc-cols { columns: 2; column-gap: 28px; }
.mc-cols li, .mc-list li { font-weight: 700; font-size: 15.5px; line-height: 1.35; padding: 4px 0; break-inside: avoid; }
.mc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 22px; }
.mc-note { margin-top: 20px; font-size: 14px; font-weight: 700; color: var(--green-ink); }

/* Il bar di Basilea */
.bar-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.bar-photo { position: relative; }
.bar-photo .ph { aspect-ratio: 4 / 5; box-shadow: var(--shadow); }
.bar-stk { position: absolute; width: clamp(96px, 10vw, 128px); left: -24px; top: -26px; transform: rotate(-10deg); }
.bar-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.popups { margin-top: 32px; }
.popups-l { font: 800 14px/1 var(--display); text-transform: uppercase; letter-spacing: .14em; color: var(--pink-ink); margin-bottom: 12px; }
.popups .note { margin-top: 12px; }

/* FAQ */
.faq-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq-art { position: relative; width: min(320px, 80%); margin-top: 32px; }
.spk--f { width: 28px; top: 0; right: -6%; }
.faq-item { background: var(--paper); border: 2px solid var(--blush-2); border-radius: 22px; padding: 0 22px; margin-bottom: 12px; transition: border-color .3s; }
.faq-item[open] { border-color: var(--pink-soft); }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { font: 800 17px/1.35 var(--body); }
.faq-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 2px solid var(--pink-ink); color: var(--pink-ink); transition: transform .4s var(--ease), background-color .25s; }
.faq-ico .ico { width: 16px; height: 16px; }
.faq-item[open] .faq-ico { transform: rotate(45deg); background: var(--blush); }
.faq-a { padding: 0 0 22px; font-size: 16.5px; max-width: 60ch; }

/* Follow the bunny */
.follow { padding: clamp(56px, 7vw, 96px) 0 8px; }
.follow-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.follow-stk { width: clamp(110px, 12vw, 164px); justify-self: center; }
.follow-stk--l { transform: rotate(-10deg); }
.follow-stk--r { transform: rotate(9deg); }
.follow-mid { text-align: center; }
.follow-bunnies { width: min(300px, 72vw); margin: 0 auto 20px; }
.follow-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.follow-t { font: 800 clamp(28px, 3vw, 38px)/1 var(--display); text-transform: uppercase; text-align: left; }
.follow-t span { display: block; }
.follow-sep { width: 2px; height: 50px; background: var(--pink-soft); border-radius: 2px; }
.follow-ig { text-transform: none; letter-spacing: .01em; font-size: 16px; }
.follow-text { margin-top: 16px; font-weight: 700; color: var(--green-ink); }

/* --- 45-wa.css --- */
/* Sala da te' giapponese in chiave chiara (24.09.2026, SPEC §17-§18): carta washi, noren,
   scrittura verticale, numeri di sezione in kanji, ensō, tatami, shōji. Solo colori del logo,
   nessuna sezione scura. Pennello (--brush) = scritte grandi; mincho (--mincho) = verticali. */
/* grana della carta washi: fibre stirate, tinte col rosa del logo, su uno strato fisso */
:root { --washi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .32' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .99 0 0 0 0 .54 0 0 0 0 .70 0 0 0 1.4 -.78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"); }
body::after { content: ''; position: fixed; inset: 0; z-index: 70; pointer-events: none; background-image: var(--washi); opacity: .5; }

/* Numero di sezione: kanji a pennello in un cerchio sottile + filetto */
.sec-top { max-width: 680px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-top .lede { margin-top: 16px; }
.sec-top--c { margin-left: auto; margin-right: auto; text-align: center; }
.sec-top--c .lede { margin-left: auto; margin-right: auto; }
.secnum { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.secnum::after { content: ''; width: 72px; height: 1.5px; background: var(--pink-soft); border-radius: 2px; }
.sec-top--c .secnum, .why-head .secnum { justify-content: center; }
.sec-top--c .secnum::before, .why-head .secnum::before { content: ''; width: 72px; height: 1.5px; background: var(--pink-soft); border-radius: 2px; }
.secnum-k { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--pink-soft); background: var(--paper); font: 400 27px/1 var(--brush); color: var(--green-ink); padding-bottom: 2px; }

/* Noren: un carattere per pannello; le fessure passano solo TRA i pannelli */
.noren { --n: 4; --nh: 150px; position: relative; width: min(100%, calc(var(--n) * var(--nh) * .92)); margin: 0 auto; padding-top: 12px; }
.noren-rod { position: absolute; top: 0; left: -22px; right: -22px; height: 14px; border-radius: 7px; background: var(--green-leaf); z-index: 0; }
.noren-rod::before, .noren-rod::after { content: ''; position: absolute; top: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--green-ink); }
.noren-rod::before { left: -6px; }
.noren-rod::after { right: -6px; }
.noren-panels { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 8px; }
.noren-p {
  position: relative; height: var(--nh); display: grid; place-items: center;
  background: var(--bubble) var(--noren-wave) repeat-x left bottom / 44px 22px; border-radius: 0 0 12px 12px;
  transform-origin: 50% -12px; box-shadow: var(--shadow-sm);
}
.noren-p::before { content: ''; position: absolute; top: -12px; left: 22%; right: 22%; height: 14px; background: var(--bubble); border-radius: 7px 7px 0 0; }
.noren-ch { font: 400 calc(var(--nh) * .5)/1 var(--brush); color: var(--paper); margin-top: -12%; }
.noren-mon { display: grid; place-items: center; width: min(74%, 96px); aspect-ratio: 1; border-radius: 50%; background: var(--paper); padding: 5%; margin-top: -12%; }
.noren-mon img { width: 100%; height: auto; }
:root { --noren-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Cg fill='none' stroke='%23fc8ab3' stroke-width='1.6'%3E%3Cpath d='M0 22a22 22 0 0 1 44 0M7 22a15 15 0 0 1 30 0M14 22a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E"); }
.noren--hero { --nh: clamp(84px, 10vw, 140px); }
.noren--page { --nh: clamp(70px, 7vw, 96px); margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .noren-p { animation: sway 5.5s ease-in-out infinite alternate; animation-delay: calc(var(--d, 0) * -1.3s); }
  .noren-p:nth-child(2) { --d: 1; } .noren-p:nth-child(3) { --d: 2; } .noren-p:nth-child(4) { --d: 3; } .noren-p:nth-child(5) { --d: 4; }
  .noren-p:hover { animation-play-state: paused; transform: rotate(4deg) translateY(-4px); transition: transform .5s var(--ease); }
}
@keyframes sway { from { transform: rotate(-1.1deg); } to { transform: rotate(1.1deg); } }

/* Tategaki: colonna verticale in mincho + glossa orizzontale leggibile (EN/DE) */
.tate { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; flex: none; }
.tate-jp { writing-mode: vertical-rl; text-orientation: upright; font: 500 clamp(24px, 2.3vw, 32px)/1 var(--mincho); letter-spacing: .2em; color: var(--green-ink); }
.tate-gloss { font: 800 11.5px/1.3 var(--body); color: var(--pink-ink); text-align: center; max-width: 9em; }
.tate--long .tate-jp { font-size: clamp(22px, 2.1vw, 28px); }
.head-tate { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.head-tate > .sec-top, .head-tate > .t2 { flex: 1; min-width: 0; }
.eyebrow--jp { color: var(--pink-ink); text-transform: none; letter-spacing: .02em; font-size: 14px; }

/* Grande scrittura verticale a pennello (抹茶 nella hero, 宇治): glossa verticale accanto */
.bigtate { display: flex; align-items: flex-start; gap: 10px; }
.bigtate-jp { writing-mode: vertical-rl; text-orientation: upright; font: 400 clamp(88px, 9.4vw, 146px)/1 var(--brush); letter-spacing: .02em; color: var(--green-ink); }
.bigtate-gloss { writing-mode: vertical-rl; font: 800 12.5px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--pink-ink); padding-top: 10px; }
.hanko--seal { width: 50px; height: 50px; border-radius: 10px; font: 700 29px/1 var(--mincho); margin: 14px 0 0 8px; transform: rotate(-6deg); }

/* Scena: ensō dipinto dietro, tatami sotto, coniglietti seduti con la loro ombra */
.scene { position: relative; width: 100%; max-width: 540px; aspect-ratio: 520 / 470; justify-self: center; }
.scene-enso { position: absolute; width: 76%; left: 12%; top: 0; }
.scene-floor { position: absolute; left: 0; right: 0; bottom: 0; }
.scene-floor .tatami { width: 100%; height: auto; }
.scene--hero .hb { position: absolute; width: 35%; bottom: 8.4%; transform-origin: 50% 100%; }
.scene--hero .hb img { width: 100%; }
.hb--pink { left: 13%; }
.hb--blue { left: 47%; }
.hero-burst { position: absolute; left: 38%; top: 30%; width: 19%; }
.petals i { position: absolute; width: 18px; left: calc(12% + var(--i) * 17%); top: calc(var(--i) * 8%); opacity: .85; }
.petals i:nth-child(2n) { width: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .petals i { animation: petal 9s linear infinite; animation-delay: calc(var(--i) * 1.8s); }
}
@keyframes petal {
  0% { transform: translate(0, -10px) rotate(0); opacity: 0; }
  10% { opacity: .9; }
  60% { transform: translate(-40px, 250px) rotate(200deg); opacity: .8; }
  100% { transform: translate(10px, 380px) rotate(340deg); opacity: 0; }
}
.phead-art.scene { aspect-ratio: 1 / .92; max-width: 400px; }
.phead-art .phead-bunnies { position: absolute; width: 72%; left: 14%; bottom: 7%; }
.phead .phead-in { margin-top: 26px; }

/* Sala da te' con shōji e rotolo appeso (一期一会) */
.tea-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.tea-copy .lede { margin: 0 0 24px; }
.room { position: relative; aspect-ratio: 16 / 11; border-radius: var(--r); overflow: hidden; background: var(--paper); border: 8px solid var(--bubble); box-shadow: var(--shadow); container-type: inline-size; }
.room-wall { position: absolute; inset: 0 0 30%; background: var(--cream); }
.room-rail { position: absolute; left: 0; right: 0; top: 14%; height: 9px; background: var(--green-leaf); }
.kakejiku { position: absolute; left: 12%; top: 8%; width: 21%; display: flex; flex-direction: column; align-items: center; }
.kj-rod { display: block; width: 116%; height: 8px; border-radius: 4px; background: var(--green-ink); }
.kj-paper { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1.6; background: var(--paper); border: 6px solid var(--blush-2); border-top-width: 14px; border-bottom-width: 18px; }
.kj-text { writing-mode: vertical-rl; text-orientation: upright; font: 400 4.1cqi/1 var(--brush); color: var(--green-ink); margin-top: -18%; }
.hanko--kj { position: absolute; right: 6%; bottom: 4%; width: 3.4cqi; height: 4.4cqi; font-size: 1.4cqi; border-radius: 4px; box-shadow: none; }
.room-floor { position: absolute; left: -3%; right: -3%; bottom: -4%; }
.room-floor .tatami { width: 100%; height: auto; }
.room-duo { position: absolute; width: 44%; left: 40%; bottom: 7%; }
.room-duo img { width: 100%; }
.shoji {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; border: 5px solid var(--bubble);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 3px), rgba(126, 154, 90, .85) calc(25% - 3px) 25%),
    repeating-linear-gradient(0deg, transparent 0 58px, rgba(126, 154, 90, .85) 58px 61px),
    var(--paper);
  transition: transform 1.5s cubic-bezier(.65, 0, .35, 1);
}
.shoji i { position: absolute; top: 50%; width: 12px; height: 30px; margin-top: -15px; border-radius: 6px; border: 2px solid var(--green-ink); background: var(--cream); }
.shoji--l { left: 0; transform: translateX(-80%); }
.shoji--l i { right: 8px; }
.shoji--r { right: 0; transform: translateX(80%); }
.shoji--r i { left: 8px; }
.tea-cap { margin-top: 16px; text-align: center; font: 800 13.5px/1.4 var(--body); color: var(--pink-ink); }
.tea-cap span { font: 400 20px/1 var(--brush); color: var(--green-ink); margin-right: 6px; vertical-align: -2px; }

/* Cornice shōji per le foto */
.shoji-frame .ph { border: 8px solid var(--paper); box-shadow: 0 0 0 3px var(--bubble), var(--shadow); }

/* Barra di avanzamento della lettura (sottile, rosa-verde), guidata da ScrollTrigger */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 41; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--pink-soft) 55%, var(--green)); transform: scaleX(0); transform-origin: 0 50%; }
.rm .progress { display: none; }

@media (max-width: 860px) {
  .tea-in { grid-template-columns: 1fr; }
  .room { aspect-ratio: 4 / 3.3; }
}
@media (max-width: 600px) {
  .noren-panels { gap: 6px; }
  .noren-rod { left: -10px; right: -10px; }
  .noren-rod::before, .noren-rod::after { display: none; }
  .tate-jp { font-size: 24px; }
  .tate-gloss { font-size: 10.5px; max-width: 7.5em; }
  .secnum-k { width: 44px; height: 44px; font-size: 23px; }
  .secnum::after, .sec-top--c .secnum::before, .why-head .secnum::before { width: 44px; }
  .shoji { background-size: auto, auto 44px, auto; }
  .kakejiku { left: 8%; width: 24%; }
  .room-duo { width: 52%; left: 38%; }
}

/* --- 47-sections.css --- */
/* Sezioni giapponesi della home: hero con 抹茶 verticale, tanzaku, 宇治, byōbu, parete
   shōji dei benefici, insegna いらっしゃいませ con chōchin. Collasso mobile esplicito in fondo. */

/* Hero: [抹茶 verticale] [testo] [coniglietti sul tatami] */
.hero { padding: clamp(20px, 3.6vw, 48px) 0 clamp(36px, 4vw, 56px); }
.hero-noren { margin-bottom: clamp(30px, 4vw, 48px); }
.hero-in {
  display: grid; column-gap: clamp(24px, 3.4vw, 56px);
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-rows: 1fr auto auto auto auto auto auto 1fr;
  grid-template-areas: "tate . scene" "tate eb scene" "tate title scene" "tate tag scene" "tate text scene" "tate ctas scene" "tate from scene" "tate . scene";
}
.hero-tate { grid-area: tate; align-self: center; display: flex; flex-direction: column; align-items: flex-start; }
.hero-eyebrow { grid-area: eb; }
.hero-title { grid-area: title; margin-top: 16px; font-family: var(--display); font-weight: 800; text-transform: uppercase; }
.ht-1 { display: block; font-size: clamp(28px, 3.1vw, 46px); line-height: 1; color: var(--green-ink); }
.ht-2 { display: block; font-size: clamp(58px, 7.2vw, 104px); line-height: .92; letter-spacing: -.02em; color: var(--pink-ink); margin: 4px 0 0 -3px; }
.hero-text { grid-area: text; margin-top: 14px; max-width: 38ch; font-size: clamp(17px, 1.4vw, 19px); }
.hero-ctas { grid-area: ctas; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.scene--hero { grid-area: scene; align-self: center; }
.slogan { margin: clamp(28px, 4vw, 48px) auto 0; max-width: min(760px, 100%); text-align: center; font: 800 clamp(13px, 1.2vw, 16px)/1.6 var(--display); letter-spacing: .3em; text-transform: uppercase; padding: 0 var(--gutter); }

/* 一 Tanzaku: cartellini di carta appesi a una canna di bambù */
.tz-stage { position: relative; padding-top: 12px; max-width: 940px; margin: 0 auto; }
.tz-pole {
  position: absolute; top: 0; left: 0; right: 0; height: 16px; border-radius: 8px; z-index: 1;
  background:
    repeating-linear-gradient(90deg, transparent 0 146px, rgba(75, 115, 38, .55) 146px 149px),
    linear-gradient(180deg, #c6d98a, var(--green-leaf) 62%, var(--green-mid));
  box-shadow: var(--shadow-sm);
}
.tz-row { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); justify-content: center; gap: clamp(18px, 5vw, 72px); }
.tz { position: relative; padding-top: 40px; transform-origin: 50% -24px; }
.tz-string { position: absolute; top: 2px; left: 50%; width: 2px; height: 58px; margin-left: -1px; background: var(--pink-soft); z-index: 0; }
.tz-string::before { content: ''; position: absolute; top: -3px; left: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--pink); }
.tz-paper {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 560px;
  padding: 36px 18px 26px; border-radius: 3px 3px 10px 10px; box-shadow: var(--shadow-sm);
  background-color: var(--paper); background-size: 120px 120px;
}
.tz-paper::before { content: ''; position: absolute; top: 12px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--cream); border: 2px solid var(--pink-soft); }
.tz--first .tz-paper { background-color: var(--blush); background-image: linear-gradient(rgba(253, 231, 240, .78), rgba(253, 231, 240, .78)), var(--sakura); }
.tz--business .tz-paper { background-color: var(--matcha-tint); background-image: linear-gradient(rgba(239, 242, 223, .84), rgba(239, 242, 223, .84)), var(--asanoha); background-size: auto, 40px 69.3px; }
.tz--premium .tz-paper { background-color: var(--paper); background-image: linear-gradient(rgba(253, 252, 253, .7), rgba(253, 252, 253, .7)), var(--seigaiha); background-size: auto, 56px 28px; }
.tz-badge { width: 116px; transition: transform .6s var(--ease); }
.tz:hover .tz-badge { transform: rotate(-10deg) scale(1.05); }
.tz-kata { writing-mode: vertical-rl; text-orientation: upright; margin: 18px 0 16px; font: 600 20px/1 var(--mincho); letter-spacing: .16em; color: var(--pink-ink); }
.tz--business .tz-kata { color: var(--green-ink); }
.tz-name { font: 800 20px/1.05 var(--display); text-transform: uppercase; color: var(--green-ink); }
.tz-motto { margin-top: 10px; font-size: 14.5px; line-height: 1.5; font-weight: 700; }
.tz-price { margin-top: 14px; font: 700 14px/1 var(--body); }
.tz-price b { font: 800 26px/1 var(--display); color: var(--pink-ink); }
.tz-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 14px 4px 4px; font: 800 14px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--pink-ink); text-decoration: none; background: linear-gradient(var(--pink-soft), var(--pink-soft)) no-repeat 0 100% / 100% 2px; transition: background-size .4s var(--ease); }
.tz-link .ico { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.tz-link:hover .ico { transform: translateX(3px); }
.tz-link::after { content: ''; position: absolute; inset: 0; } /* tutto il cartellino e' cliccabile */
@media (prefers-reduced-motion: no-preference) {
  .tz { animation: sway 4.8s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.6s); }
}

/* 二 宇治: grande kanji, rotolo con la foto vera di Uji, il viaggio a tappe */
.uji-grid { display: grid; grid-template-columns: auto minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.uji-kanji, .uji-scroll { position: sticky; top: 104px; }
.bigtate--uji .bigtate-jp { font-size: clamp(104px, 12.4vw, 192px); }
.uji-scroll { display: flex; flex-direction: column; align-items: center; }
.uji-scroll .kj-rod { width: 108%; height: 12px; border-radius: 6px; }
.uji-silk { display: block; width: 100%; padding: 16px 14px 26px; background: var(--blush-2); box-shadow: var(--shadow); }
.uji-silk .ph { border-radius: 2px; aspect-ratio: 590 / 944; }
.uji-silk .ph img { transform: scale(1.12); }
.route { position: relative; display: grid; gap: 30px; margin: 8px 0 34px; padding-left: 44px; }
.route::before { content: ''; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: linear-gradient(var(--pink-soft), var(--green-leaf)); transform-origin: 50% 0; transform: scaleY(var(--thread, 1)); }
.route-st { position: relative; }
.route-dot { position: absolute; left: -44px; top: 0; width: 24px; background: var(--cream); padding: 2px 0; }
.route-place { font: 800 13px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--pink-ink); }
.route-jp { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 8px; letter-spacing: 0; text-transform: none; }
.route-jp [lang="ja"] { font: 500 17px/1 var(--mincho); color: var(--green-ink); letter-spacing: .08em; }
.route-gloss { font: 700 12.5px/1.2 var(--body); color: var(--green-ink); }
.route-t { margin-top: 8px; font: 800 clamp(19px, 1.6vw, 22px)/1.25 var(--body); color: var(--green-deep); }
.route-x { margin-top: 6px; max-width: 54ch; font-size: 16.5px; }

/* 三 Byōbu: paravento pieghevole, cornice verde laccata, pannelli a zig-zag */
.byobu { position: relative; margin-top: 8px; padding: 12px; background: var(--bubble); border-radius: 6px; box-shadow: var(--shadow); perspective: 1800px; }
.byobu-track { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); transform-style: preserve-3d; }
/* in 3D i pannelli inclinati (±10°) finiscono in parte dietro il piano del binario: senza questo il clic
   sui pulsanti di un pannello si e' su due arriva al binario invece che al pulsante (Chrome, 26.09) */
.byobu-track { pointer-events: none; }
.byobu-track > .bp { pointer-events: auto; }
.bp { position: relative; background: var(--paper); transform: rotateY(10deg); }
.bp:nth-child(2n) { transform: rotateY(-10deg); }
.bp + .bp { border-left: 3px solid var(--green-ink); }
.bp + .bp::before, .bp + .bp::after { content: ''; position: absolute; left: -6px; width: 9px; height: 26px; border-radius: 3px; background: var(--pink-soft); z-index: 2; }
.bp + .bp::before { top: 14%; }
.bp + .bp::after { bottom: 14%; }
.bp-in { position: relative; display: flex; flex-direction: column; height: 100%; padding: 34px 14px 38px; background-image: linear-gradient(90deg, rgba(252, 138, 179, 0) 30%, rgba(252, 138, 179, .2)); }
.bp:nth-child(2n) .bp-in { background-image: linear-gradient(270deg, rgba(252, 138, 179, 0) 30%, rgba(252, 138, 179, .2)); }
.bp-in::before, .bp-in::after { content: ''; position: absolute; left: 0; right: 0; height: 18px; background: var(--blush-2) var(--seigaiha) 0 0 / 28px 14px; }
.bp-in::before { top: 0; }
.bp-in::after { bottom: 0; }
.bp:nth-child(2n) .bp-in::before, .bp:nth-child(2n) .bp-in::after { background-color: #e3ebbd; }
.bp-ph { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--blush); box-shadow: 0 0 0 1px var(--blush-2); }
.bp-ph picture, .bp-ph img { width: 100%; height: 100%; object-fit: cover; }
.bp-ph img { transition: transform .8s var(--ease); }
.bp:hover .bp-ph img { transform: scale(1.05); }
.bp-badge { position: absolute; top: 8px; left: 8px; width: 46px; }
.bp-body { display: flex; flex-direction: column; flex: 1; padding-top: 14px; }
.bp-name { font: 800 15.5px/1.15 var(--display); text-transform: uppercase; color: var(--green-ink); }
.bp-w { color: var(--pink-ink); }
.bp-motto { margin-top: 6px; font-size: 13.5px; line-height: 1.45; }
.bp-buy { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bp-price { font: 800 14px/1 var(--display); }
.bp-price b { font-size: 21px; color: var(--pink-ink); }
.bp .cbtn { width: 44px; height: 44px; }
.bp .cbtn .ico { width: 20px; height: 20px; }
.bp .btn--sm { font-size: 12.5px; padding: 0 14px 0 16px; letter-spacing: .03em; gap: 8px; }
.byobu-foot { margin-top: clamp(28px, 4vw, 44px); display: flex; justify-content: center; }
.byobu--shop .bp-name { font-size: 17px; }
.byobu--shop + .byobu--shop { margin-top: 32px; }

/* 七 Benefici: testata (il mazzo dei post IG e la lista sono in 48-home-extra.css) */
.why-head { text-align: center; }
.why-title { font-family: var(--display); font-weight: 800; text-transform: uppercase; }
.why-title .t2-g { display: block; font-size: clamp(24px, 3vw, 40px); line-height: 1.05; }
.why-big { display: block; font-size: clamp(66px, 10vw, 132px); line-height: .92; letter-spacing: -.02em; color: var(--pink-ink); margin: 4px 0; }
.why-src { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; font-weight: 800; font-size: 14.5px; color: var(--green-ink); }
.why-src .ico { width: 18px; height: 18px; color: var(--pink-ink); }

/* 七 Insegna いらっしゃいませ tra due lanterne chōchin, carta illuminata dolcemente */
.welcome { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: clamp(14px, 3vw, 44px); margin-bottom: clamp(40px, 5vw, 64px); }
.welcome-lt { width: clamp(96px, 11.5vw, 164px); transform-origin: 50% 0; }
.welcome-lt--l { justify-self: end; filter: drop-shadow(0 16px 26px rgba(241, 92, 153, .38)); }
.welcome-lt--r { justify-self: start; filter: drop-shadow(0 16px 26px rgba(152, 181, 39, .34)); }
.lt-ch { font: 400 62px/1 var(--brush); }
.lt-ch--2 { font-size: 46px; }
.lt-halo { opacity: .55; }
.kanban { position: relative; margin-top: 44px; text-align: center; }
.kanban::before, .kanban::after { content: ''; position: absolute; top: -44px; width: 2px; height: 44px; background: var(--green-leaf); }
.kanban::before { left: 22%; }
.kanban::after { right: 22%; }
.kanban-jp { display: inline-block; padding: 14px 30px 16px; background: var(--paper); border: 3px solid var(--bubble); border-radius: 8px; box-shadow: var(--shadow-sm); font: 400 clamp(30px, 3.8vw, 54px)/1.1 var(--brush); letter-spacing: .06em; color: var(--pink-ink); white-space: nowrap; }
.kanban-gloss { margin-top: 12px; font: 800 13.5px/1.3 var(--body); color: var(--green-ink); }
@media (prefers-reduced-motion: no-preference) {
  .welcome-lt { animation: sway 4.2s ease-in-out infinite alternate; }
  .welcome-lt--r { animation-delay: -2.1s; }
  .lt-halo { animation: glow 3.6s ease-in-out infinite alternate; }
}
@keyframes glow { from { opacity: .35; } to { opacity: .8; } }

/* ------------------------------ collasso ------------------------------ */
@media (max-width: 1100px) {
  .uji-grid { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "k p" "c c"; }
  .uji-kanji { grid-area: k; } .uji-scroll { grid-area: p; max-width: 380px; } .uji-copy { grid-area: c; }
  .uji-kanji, .uji-scroll { position: relative; top: 0; }
}
@media (max-width: 999px) {
  .byobu--compact .byobu-track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(230px, 40%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--pink-soft) var(--green-ink); overscroll-behavior-x: contain; }
  .byobu--compact .bp { scroll-snap-align: start; }
  .byobu--shop .byobu-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; background: var(--green-ink); }
  .byobu--shop .bp, .byobu--shop .bp:nth-child(2n) { transform: none; border-left: 0; }
  .byobu--shop .bp::before, .byobu--shop .bp::after { display: none; }
  .byobu--shop .bp:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .byobu--shop .bp:last-child:nth-child(odd) .bp-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 899px) {
  .hero-in {
    grid-template-columns: auto minmax(0, 1fr); column-gap: 14px;
    grid-template-rows: none;
    grid-template-areas: "tate eb" "tate title" "tag tag" "text text" "ctas ctas" "from from" "scene scene";
  }
  .hero-tate { align-self: start; }
  .bigtate-jp { font-size: clamp(60px, 13vw, 96px); }
  .bigtate-gloss { font-size: 10.5px; letter-spacing: .1em; padding-top: 6px; }
  .hanko--seal { width: 38px; height: 38px; font-size: 22px; margin-top: 10px; }
  .hero-eyebrow { align-self: end; }
  .scene--hero { max-width: 460px; margin-top: 28px; }
  .tea-cap span { display: block; margin: 0 0 4px; }
}
@media (max-width: 760px) {
  .welcome { grid-template-columns: auto auto auto; justify-content: center; }
  .kanban { margin-top: 36px; }
  .kanban::before, .kanban::after { top: -36px; height: 36px; left: 50%; right: auto; }
  .kanban::after { display: none; }
  .kanban-jp { writing-mode: vertical-rl; text-orientation: upright; padding: 18px 12px; font-size: 30px; letter-spacing: .1em; }
  .kanban-gloss { max-width: 9em; margin-left: auto; margin-right: auto; }
}
@media (max-width: 600px) {
  .hero-noren { margin-bottom: 52px; }
  .ht-1 { font-size: 26px; }
  .ht-2 { font-size: clamp(50px, 15vw, 60px); }
  .hero-title { margin-top: 12px; }
  .tz-stage { padding-top: 10px; }
  .tz-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tz { padding-top: 34px; }
  .tz-string { height: 50px; }
  .tz-paper { min-height: 0; padding: 28px 6px 16px; }
  .tz-badge { width: 64px; }
  .tz-kata { font-size: 15px; margin: 12px 0; letter-spacing: .1em; }
  .tz-name { font-size: 13.5px; }
  .tz-motto { font-size: 12.5px; line-height: 1.4; margin-top: 8px; }
  .tz-price { font-size: 12px; margin-top: 10px; }
  .tz-price span { display: block; margin-bottom: 4px; }
  .tz-price b { font-size: 20px; }
  .tz-link { font-size: 12px; letter-spacing: .06em; gap: 4px; padding-top: 12px; }
  .tz-link .ico { width: 13px; height: 13px; }
  .bigtate--uji .bigtate-jp { font-size: 84px; }
  .uji-silk { padding: 10px 9px 16px; }
  .route { padding-left: 38px; gap: 26px; }
  .route-dot { left: -38px; width: 22px; }
  .route-jp { display: flex; margin: 6px 0 0; }
  .byobu { padding: 8px; }
  .byobu--compact .byobu-track { grid-auto-columns: 66%; }
  .byobu--shop .byobu-track { grid-template-columns: 1fr; }
  .byobu--shop .bp-in, .byobu--shop .bp:last-child:nth-child(odd) .bp-in { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; padding: 28px 10px; }
  .byobu--shop .bp-in::before, .byobu--shop .bp-in::after { height: 14px; }
  .byobu--shop .bp-ph { aspect-ratio: auto; height: 100%; min-height: 160px; }
  .byobu--shop .bp-body { padding-top: 2px; }
  .byobu--shop .bp-badge { width: 40px; }
  .welcome-lt { width: 72px; }
  .lt-ch { font-size: 58px; }
  .lt-ch--2 { font-size: 46px; }
}

/* Rifiniture di composizione (titoli accanto a una colonna verticale) */
.head-tate .t2 { font-size: clamp(30px, 3.5vw, 48px); }
#faq .t2 { font-size: clamp(28px, 3vw, 42px); }
@media (min-width: 861px) { .tea-in { grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); } }

/* Compattazione (24.09): titolo dei benefici piu' piccolo. */
.why-big { font-size: clamp(48px, 6.4vw, 88px); }
/* Home piu' compatta: meno aria tra le sezioni (prima 64-120px sopra e sotto). */
.is-home .sec { padding-block: clamp(44px, 6vw, 84px); }

/* Titoli grandi "come l'adesivo" (25.09): rosa bubble gum e verde del cerchio, con l'ombra
   azzurra sfalsata delle lettere dell'adesivo Pretty Boys (#89bff6 misurato). */
.t2-p, .ht-2, .why-big, .founder-name { color: var(--pink-title); }
.t2-g, .ht-1, .group-t { color: var(--green-mid); }
.t2, .ht-1, .ht-2, .why-title, .follow-t, .group-t, .founder-name { text-shadow: .035em .06em 0 #9cc9f7; }
.bar-photo .ph img { object-position: 50% 12%; }
/* Spotify come seconda canzone (25.09): bottone chiaro accanto a Instagram, icona verde Spotify */
.follow-sp .btn-ico { color: #1db954; }

/* ===== Concept della cliente (25.09): slogan, cuori con frasi, carte d'imbarco, lettere
   "candy" come i suoi poster, piu' scintille. Solo parole e stile suoi, nessuna sua immagine. */

/* Lettere dei titoli come i poster: contorno bianco pieno + ombra azzurra sfalsata */
.t2, .ht-1, .ht-2, .why-title, .follow-t, .group-t, .founder-name {
  text-shadow: .03em 0 0 #fff, -.03em 0 0 #fff, 0 .03em 0 #fff, 0 -.03em 0 #fff,
    .022em .022em 0 #fff, -.022em -.022em 0 #fff, .022em -.022em 0 #fff, -.022em .022em 0 #fff,
    .05em .085em 0 #9cc9f7;
}

/* Whisk · Sip · Glow */
.hero-tag { grid-area: tag; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px;
  font: 700 clamp(22px, 2.2vw, 30px)/1 var(--display); letter-spacing: .02em; }
.hero-tag span:nth-of-type(1) { color: var(--pink-title); }
.hero-tag span:nth-of-type(2) { color: var(--green-mid); }
.hero-tag span:nth-of-type(3) { color: #2563c9; }
.hero-tag span { text-shadow: .04em .07em 0 #9cc9f7; }
.hero-tag i { font-style: normal; color: var(--pink-soft); }

/* Cuori con le frasi dei suoi poster intorno alla scena della hero */
.scene--hero { position: relative; }
.hero-badges { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hbadge { position: absolute; width: clamp(96px, 9.5vw, 132px); aspect-ratio: 100 / 92; display: grid; place-items: center; }
.hbadge-heart { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 8px 12px rgba(211, 28, 118, .28)); }
.hbadge span { position: relative; width: 70%; margin-top: -8%; text-align: center; color: #fff;
  font: 800 clamp(11.5px, 1.05vw, 14px)/1.12 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.hbadge--1 { left: -2%; top: 4%; transform: rotate(-9deg); }
.hbadge--2 { right: -1%; top: 0; transform: rotate(8deg); }
@media (prefers-reduced-motion: no-preference) {
  .hbadge { animation: hb-float 5s ease-in-out infinite alternate; }
  .hbadge--2 { animation-delay: -1.6s; }
}
@keyframes hb-float { from { translate: 0 0; } to { translate: 0 -8px; } }

/* Le tre classi: cartellini appesi che sono anche carte d'imbarco Matcha Bunny Airlines */
.tz-band { align-self: stretch; margin: -14px -8px 14px; padding: 8px 6px 7px; border-radius: 8px; color: #fff; line-height: 1.1; }
.tz-band b { display: block; font: 700 14px/1.1 var(--display); letter-spacing: .02em; }
.tz-band span { display: block; font: 800 10.5px/1.2 var(--body); letter-spacing: .2em; text-transform: uppercase; margin-top: 2px; }
.tz--first .tz-band { background: #d31c76; }
.tz--business .tz-band { background: #2563c9; }
.tz--premium .tz-band { background: #0b7a02; }
.tz-route { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 14px;
  padding-top: 12px; border-top: 2px dashed var(--pink-soft); font: 700 20px/1 var(--display); color: var(--green-deep); }
.tz-route span { color: var(--pink-ink); font-size: 16px; }
.tz-route em { flex-basis: 100%; font: 800 11px/1 var(--body); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--green-ink); }
@media (max-width: 760px) {
  .tz-band { margin: -10px -2px 10px; padding: 6px 3px; }
  .tz-band b { font-size: 10.5px; }
  .tz-band span { font-size: 8.5px; letter-spacing: .12em; }
  .tz-route { font-size: 14px; gap: 3px; }
  .tz-route span { font-size: 12px; }
  .tz-route em { font-size: 9px; letter-spacing: .1em; }
}

/* "Come for the matcha, stay for the magic." sopra il titolo del bar */
.magic { display: inline-block; margin-bottom: 14px; padding: 8px 16px; border-radius: 999px; background: var(--bubble);
  color: #fff; font: 700 17px/1.2 var(--display); letter-spacing: .01em; box-shadow: var(--shadow-sm); }
.magic { background: #d31c76; }

/* Piu' scintille: stellina verde e cuore rosa accanto ai titoli di sezione */
.sec-top { position: relative; }
.sec-top::after { content: ''; position: absolute; top: -6px; right: 4%; width: 64px; height: 44px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpath d='M18 2C19.5 13 23 16.5 34 18C23 19.5 19.5 23 18 34C16.5 23 13 19.5 2 18C13 16.5 16.5 13 18 2Z' fill='%231ca30d'/%3E%3Cpath d='M50 42C41 35 36 31 36 25C36 21.7 38.7 19 42 19C45 19 47 21 50 24C53 21 55 19 58 19C61.3 19 64 21.7 64 25C64 31 59 35 50 42Z' fill='%23fb54a3'/%3E%3C/svg%3E") no-repeat center / contain; }
.sec-top--c::after { right: 18%; }

/* Player: scelta della canzone (la prima suona qui, la seconda su Spotify) */
.player-label { display: flex; flex-direction: column; gap: 4px; padding: 7px 8px; min-width: 150px; max-width: 190px; text-align: left; }
.pl-head { font: 800 12px/1.2 var(--body); color: var(--pink-ink); letter-spacing: .02em; padding: 0 2px; }
.pl-head .pl-song { display: none; }
.player.is-played .pl-head .pl-idle { display: none; }
.player.is-played .pl-head .pl-song { display: inline; }
.pl-track { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; border-radius: 12px;
  font: 800 12px/1.2 var(--body); color: var(--green-deep); background: var(--blush); text-align: left; }
.pl-track:hover { background: var(--blush-2); }
.pl-track .pl-mini { width: 13px; flex: none; }
.pl-track .pl-sp { width: 15px; height: 15px; flex: none; color: #1db954; }
.player.is-playing .pl-track[data-track] { background: var(--blush-2); color: var(--pink-ink); }
.pl-track { text-decoration: none; }
@media (min-width: 1400px) {
  /* il riquadro canzoni e' piu' largo del cuore: allineato a destra, sporge verso sinistra */
  .player-label { align-self: flex-end; width: 170px; max-width: none; }
}

/* Telefono: la scelta delle canzoni si apre col primo tocco sul cuore, come un piccolo pannello */
@media (max-width: 899px) {
  .player-label { display: none; position: absolute; right: 0; bottom: calc(100% + 10px); width: 200px; max-width: none; }
  .player.is-open .player-label { display: flex; opacity: 1; transform: none; pointer-events: auto; }
  .player.is-open .player-btn { transform: none; }
}

/* --- 48-home-extra.css --- */
/* Aggiunte del 26.09.2026 (titolare): film "Now boarding" + prossima tappa, carte d'imbarco che si
   strappano e timbrano, bicchiere del menu da comporre, mazzo dei post IG, foto vera del bar, due
   paraventi, testate di sezione meno ripetitive, volo del prodotto verso la borsa, ballo a tempo. */

/* Testate: la stellina col cuore resta solo sulla testata centrata (一), non su tutte e otto */
.sec-top::after { content: none; }
.sec-top--c::after { content: ''; }
@media (min-width: 900px) {
  .sec-top--split { display: grid; grid-template-columns: auto minmax(0, 38ch); justify-content: space-between; align-items: end; column-gap: clamp(32px, 6vw, 96px); }
  .sec-top--split .secnum { grid-column: 1 / -1; }
  .sec-top--split .lede { margin: 0 0 .5em; }
}

/* ---------- 二 Now boarding: oblò col film + prossima tappa ---------- */
.sec--film { background: linear-gradient(var(--blush), var(--cream)); overflow: hidden; }
.film-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 104px); align-items: center; }
.film-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.film-head .secnum { margin-bottom: 0; }
.film-gate { padding: 8px 14px 7px; border: 2px dashed var(--pink-soft); border-radius: 8px; background: var(--paper);
  font: 800 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--pink-ink); }
.film-title { font-size: clamp(46px, 6.4vw, 92px); line-height: .95; }
.film-title .t2-l { display: block; }
.film-copy .lede { max-width: 40ch; margin-top: 16px; }
.film-ctrl { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.film-ctrl[hidden] { display: none; }
.film-play .ico-play, .film-play.is-playing .ico-pause { display: block; }
.film-play .ico-pause, .film-play.is-playing .ico-play { display: none; }
.film-sound .ico-off, .film-sound.is-on .ico-on { display: none; }
.film-sound .ico-on, .film-sound.is-on .ico-off { display: block; }

.next-card { position: relative; max-width: 440px; margin-top: 30px; padding: 16px 22px 20px; background: var(--paper);
  border: 3px solid var(--bubble); border-radius: 18px; box-shadow: var(--shadow-sm); }
.next-top { display: flex; align-items: center; justify-content: space-between; font: 800 12.5px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--green-ink); }
.next-new { width: 22px; }
.next-map { margin-top: 10px; }
.next-svg { display: block; width: 100%; height: auto; overflow: visible; }
.next-codes { position: relative; height: 22px; font: 700 18px/1 var(--display); color: var(--green-deep); }
.next-codes b { position: absolute; top: 4px; transform: translateX(-50%); }
.next-codes b:first-child { left: 6.67%; }
.next-codes b:last-child { left: 93.33%; color: var(--pink-ink); }
.next-city { margin-top: 14px; font: 800 clamp(34px, 3.4vw, 46px)/1 var(--display); text-transform: uppercase; color: var(--pink-title);
  text-shadow: .03em 0 0 #fff, -.03em 0 0 #fff, 0 .03em 0 #fff, 0 -.03em 0 #fff, .05em .085em 0 #9cc9f7; }
.next-date { display: inline-block; margin-top: 10px; padding: 7px 14px 8px; border-radius: 999px; background: var(--pink-ink); color: #fff; font: 700 15px/1.1 var(--display); }

/* Oblò: cornice chiara arrotondata come un finestrino, tendina rosa che si alza la prima volta */
.film-window { position: relative; justify-self: center; width: clamp(272px, 25vw, 330px); }
.fw-frame { position: relative; padding: 14px; border-radius: 46% / 27%; background: linear-gradient(150deg, var(--paper), var(--blush) 70%);
  box-shadow: var(--shadow), inset 0 0 0 3px var(--blush-2); }
.fw-video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 42% / 24%; background: var(--blush-2); }
.fw-shade { display: none; }
.anim .fw-shade { position: absolute; inset: 14px; display: grid; place-items: end center; padding-bottom: 22%; overflow: hidden; border-radius: 42% / 24%;
  background: repeating-linear-gradient(180deg, var(--blush) 0 26px, var(--blush-2) 26px 28px);
  clip-path: inset(0 0 0 0); transition: clip-path 1.2s cubic-bezier(.77, 0, .175, 1) .2s; }
.fw-shade img { width: 42%; transition: transform 1.2s cubic-bezier(.77, 0, .175, 1) .2s; }
.fw-shade::after { content: ''; position: absolute; bottom: 12%; left: 50%; width: 44px; height: 8px; margin-left: -22px; border-radius: 4px; background: var(--pink-ink); }
.anim [data-film].is-open .fw-shade { clip-path: inset(0 0 100% 0); }
.anim [data-film].is-open .fw-shade img { transform: translateY(-160%); }

/* ---------- 一 Carte d'imbarco: tagliando che si stacca, timbro 搭乗 al clic ---------- */
.tz-link::after { content: none; } /* tutto il cartellino resta cliccabile via js/54-board.js */
.tz.is-js .tz-paper { cursor: pointer; }
.tz-stub { position: relative; align-self: stretch; margin-top: auto; display: flex; flex-direction: column; align-items: center;
  transform-origin: 94% 0; transition: transform .45s cubic-bezier(.23, 1, .32, 1); }
.tz-stub::before, .tz-stub::after { content: ''; position: absolute; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--cream); }
.tz-stub::before { left: -27px; }
.tz-stub::after { right: -27px; }
.tz-link { margin-top: 0; }
@media (hover: hover) and (pointer: fine) {
  .tz:hover .tz-stub { transform: rotate(2.6deg) translateY(4px); }
}
.tz-stamp { position: absolute; left: 50%; top: 44%; z-index: 3; display: grid; place-items: center; align-content: center; gap: 4px;
  width: 112px; height: 112px; margin: -56px 0 0 -56px; border: 4px double var(--pink-ink); border-radius: 50%;
  background: rgba(255, 255, 255, .6); color: var(--pink-ink); pointer-events: none;
  visibility: hidden; opacity: 0; transform: scale(1.5) rotate(-20deg); }
/* testo nel CSS: il timbro e' decorativo e resta nascosto finche' non si clicca (nessun testo nascosto nel DOM) */
.tz-stamp::before { content: '搭乗'; font: 400 34px/1 var(--brush); letter-spacing: .04em; }
.tz-stamp::after { content: attr(data-t); font: 800 11px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.tz.is-stamped .tz-stamp { visibility: visible; opacity: .94; transform: scale(1) rotate(-12deg); transition: transform .24s cubic-bezier(.3, 1.5, .5, 1), opacity .1s; }

/* ---------- 四 Due paraventi sfalsati, pannelli piu' larghi ---------- */
/* colonna a larghezza fissa: con una colonna "auto" le colonne in % del paravento che scorre (telefono)
   diventano un calcolo circolare e WebKit allungava le foto a 15 milioni di px (26.09) */
.byobu-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3.4vw, 44px); }
@media (min-width: 1000px) {
  .byobu-pair { max-width: 1120px; }
  .byobu-pair > .byobu { width: 84%; }
  .byobu-pair > .byobu:nth-child(2) { justify-self: end; }
  .byobu-pair .bp-in { padding: 36px 20px 40px; }
  .byobu-pair .bp-name { font-size: 18px; }
  .byobu-pair .bp-motto { font-size: 14.5px; }
  .byobu-pair .bp-price b { font-size: 24px; }
}

/* Telefono e tablet (27.09, iPhone vero del titolare): i paraventi che scorrevano di lato non scorrevano
   (pannelli inclinati in 3D dentro un contenitore che scorre: Safari blocca il gesto) ed erano enormi.
   Ora i due paraventi diventano uno solo, a griglia di 2 colonne, piatto, niente da far scorrere.
   I separatori sono ombre dei pannelli (non lo sfondo): con un numero dispari di prodotti la cella vuota resta chiara. */
@media (max-width: 999px) {
  /* la cornice sta sull elemento .wrap: i margini laterali diventano margin, il bordo rosa resta dentro lo schermo */
  .byobu-pair { width: calc(100% - var(--gutter) * 2); margin-inline: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; background: var(--paper);
    border: 10px solid var(--bubble); border-radius: 8px; box-shadow: var(--shadow); }
  .byobu-pair > .byobu, .byobu-pair .byobu-track { display: contents; }
  .byobu-pair .bp, .byobu-pair .bp:nth-child(2n) { transform: none; border-left: 0; box-shadow: 0 0 0 1.5px var(--green-ink); }
  .byobu-pair .bp::before, .byobu-pair .bp::after { display: none; }
  .byobu-pair .bp-in { padding: 22px 10px 24px; }
  .byobu-pair .bp-in::before, .byobu-pair .bp-in::after { height: 12px; }
  .byobu-pair .bp-ph { aspect-ratio: 1 / 1; }
  .byobu-pair .bp-badge { top: 6px; left: 6px; width: 34px; }
  .byobu-pair .bp-name { font-size: 14px; }
  .byobu-pair .bp-motto { font-size: 12.5px; line-height: 1.4; }
  .byobu-pair .bp-buy { padding-top: 10px; gap: 6px; }
  .byobu-pair .bp-price b { font-size: 18px; }
  .byobu-pair .bp .cbtn { width: 40px; height: 40px; }
}
@media (min-width: 600px) and (max-width: 999px) {
  .byobu-pair { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 五 Menu: aromi e latti da scegliere, bicchiere che si colora ---------- */
.mc-mix.is-live { display: grid; grid-template-columns: minmax(0, 1fr) clamp(118px, 11vw, 150px); column-gap: clamp(14px, 2vw, 24px); align-items: start; }
.mc-hint { margin: -2px 0 10px; font-size: 14px; font-weight: 700; color: var(--green-ink); }
.mc-hint[hidden], .mc-cup[hidden] { display: none; }
.mc-h--milk, .mc-h--boost { margin-top: 22px; }
.mc-pick { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.is-live .mc-pick { margin-left: -10px; padding: 4px 10px; border-radius: 14px; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .16s ease-out; }
@media (hover: hover) and (pointer: fine) { .is-live .mc-pick:hover { background: var(--blush); } }
.is-live .mc-pick:active { transform: scale(.97); }
.is-live .mc-pick[aria-pressed="true"] { background: var(--pink-ink); color: #fff; }
.mc-cup { position: sticky; top: 104px; margin-top: 30px; text-align: center; }
.cup-svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 96%; }
.cup-l { transition: fill .5s ease; }
.cup-foam { opacity: 0; transform: translateY(-10px); transition: opacity .35s ease, transform .45s cubic-bezier(.23, 1, .32, 1); }
.mc-cup.has-foam .cup-foam { opacity: 1; transform: none; }
.mc-cup figcaption b { display: block; margin-top: 10px; font: 800 14px/1.3 var(--body); color: var(--pink-ink); }
.mc-cup figcaption small { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; font-weight: 700; color: var(--green-ink); }

/* la foto del menu resta in vista mentre si legge la scheda (piu' alta da quando c'e' il bicchiere) */
@media (min-width: 861px) { .menu-photo { position: sticky; top: 104px; } }

/* ---------- 六 Bar: foto vera di Selin nel bar rosa ---------- */
.bar-photo--home { justify-self: center; width: min(100%, 460px); isolation: isolate; }
/* 27.09 (titolare: "prima era piu' rosa"): cornice bianca, filo e blocco rosa pieno sfalsato dietro la foto */
.bar-photo--home .ph { border: 8px solid var(--paper); box-shadow: 0 0 0 4px var(--bubble), var(--shadow); }
.bar-photo--home::before { content: ''; position: absolute; inset: 26px -26px -26px 26px; z-index: -1; border-radius: var(--r); background: var(--bubble); }
.bar-photo--home .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.bar-photo--home .bar-stk { left: auto; right: -26px; top: -30px; transform: rotate(10deg); }

/* ---------- 七 Benefici: mazzo dei post IG + lista leggibile ---------- */
/* 27.09: il mazzo e la lista stanno in un telaio rosa pieno, come la parete shōji di prima */
.why-deck { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 10px; align-items: stretch; margin-top: clamp(28px, 4vw, 52px);
  padding: 10px; background: var(--bubble); border: 6px solid var(--pink-ink); border-radius: 8px; box-shadow: var(--shadow); }
.why-deck > .deck { align-self: center; width: min(100% - 120px, 360px); margin: clamp(34px, 4vw, 52px) clamp(56px, 6vw, 80px) clamp(44px, 5vw, 62px) clamp(28px, 3vw, 44px); }
.why-deck > .deck-list { align-content: center; padding: clamp(14px, 2.4vw, 30px); background: var(--paper); border-radius: 4px; }
.deck { position: relative; justify-self: center; width: min(100%, 380px); aspect-ratio: 640 / 906; margin: 0 44px 34px 0; }
.deck-cards { position: absolute; inset: 0; }
.deck-card { position: absolute; inset: 0; z-index: calc(10 - var(--o)); overflow: hidden; border: 6px solid var(--paper); border-radius: 16px;
  background: var(--paper); box-shadow: var(--shadow);
  transform: translate(calc(var(--o) * 14px), calc(var(--o) * 9px)) rotate(calc(var(--o) * 3.4deg));
  transition: transform .55s cubic-bezier(.23, 1, .32, 1); }
.deck-card .ph { height: 100%; border-radius: 10px; }
.deck-card img { width: 100%; height: 100%; object-fit: cover; }
.deck-card.is-out { z-index: 20; transform: translate(-70%, -3%) rotate(-12deg); transition-duration: .3s; }
.js .deck-card { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .deck:hover .deck-card.is-top:not(.is-out) { transform: translate(-4px, -8px) rotate(-1.5deg); } }
.deck-ig { position: absolute; top: -16px; right: -16px; z-index: 12; display: grid; place-items: center; width: 46px; height: 46px;
  border: 3px solid var(--paper); border-radius: 50%; background: var(--pink-ink); color: #fff; box-shadow: var(--shadow-sm); }
.deck-ig .ico { width: 24px; height: 24px; }
.deck-list { display: grid; gap: 6px; }
.deck-item { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 16px; padding: 16px 18px; border-radius: 20px; transition: background-color .3s ease; }
.js .deck-item { cursor: pointer; }
.deck-item.is-on { background: var(--blush); }
.deck-n { position: relative; grid-row: span 2; width: 36px; align-self: start; }
.deck-n b { position: absolute; inset: 0 0 4px; display: grid; place-items: center; color: #fff; font: 700 15px/1 var(--display); }
.deck-t button { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--green-mid);
  font: 800 clamp(19px, 1.7vw, 23px)/1.15 var(--display); text-transform: uppercase; transition: color .25s ease; }
.deck-item.is-on .deck-t button { color: var(--pink-ink); } /* 4,5:1 sul rosa chiaro (pink-title era 2,99:1) */
.deck-x { margin-top: 6px; max-width: 56ch; font-size: 15.5px; line-height: 1.55; }

/* ---------- 八 FAQ: la sala da te' coi coniglietti sotto il titolo ---------- */
.faq-room { width: min(100%, 440px); margin-top: 30px; }

/* ---------- Volo del prodotto verso la borsa ---------- */
/* "Add to cart": piccola noren rosa sulla foto del prodotto (js/40-cart.js norenOver), stesso disegno della
   tenda tra le pagine (css/85-preloader.css): bastone verde, pannelli con l'onda, 抹茶 a pennello.
   Scende in 0,24 s, resta un attimo, risale in 0,26 s mentre si apre il cassetto. */
.cn { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.cn-rod { position: absolute; top: 0; left: 0; right: 0; height: 10px; z-index: 2; background: var(--green-leaf); box-shadow: 0 2px 0 var(--green-ink); transform-origin: 50% 50%; animation: cn-rod .9s linear forwards; }
.cn-panels { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.cn-p {
  display: grid; place-items: center; background: var(--bubble) var(--noren-wave) repeat-x left bottom / 30px 15px;
  border-radius: 0 0 12px 12px; transform: translateY(-102%);
  animation: cn-down .24s cubic-bezier(.3, .7, .25, 1) forwards, cn-up .26s cubic-bezier(.55, 0, .25, 1) forwards;
  animation-delay: calc(.06s + var(--i) * 40ms), calc(.5s + var(--i) * 40ms);
}
.cn-p span { font: 400 var(--cn-fs, 48px)/1 var(--brush); color: var(--paper); margin-top: -12%; }
@keyframes cn-down { to { transform: none; } }
@keyframes cn-up { from { transform: none; } to { transform: translateY(-102%); } }
@keyframes cn-rod { 0% { transform: scaleX(0); } 12%, 80% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* ---------- Ballo a tempo: si piegano dai piedi ---------- */
.foot-b, .follow-bunnies, .room-duo, .phead-bunnies { transform-origin: 50% 96%; }

/* ---------- collasso ---------- */
@media (max-width: 899px) {
  .film-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .film-copy { display: contents; }
  .film-head { order: 1; } .film-title { order: 2; } .film-copy .lede { order: 3; }
  .film-window { order: 4; width: min(74vw, 300px); margin-top: 32px; }
  .film-ctrl { order: 5; justify-content: center; }
  .next-card { order: 6; justify-self: center; width: 100%; }
  .why-deck { grid-template-columns: minmax(0, 1fr); }
  .why-deck > .deck { justify-self: center; width: min(66vw, 300px); margin: 34px 44px 40px 20px; }
}
@media (max-width: 860px) {
  .faq-room { margin: 26px auto 8px; width: min(100%, 360px); }
}
@media (max-width: 600px) {
  .tz-stub::before { left: -15px; width: 14px; height: 14px; }
  .tz-stub::after { right: -15px; width: 14px; height: 14px; }
  .tz-stamp { width: 78px; height: 78px; margin: -39px 0 0 -39px; border-width: 3px; }
  .tz-stamp::before { font-size: 24px; }
  .tz-stamp::after { font-size: 8.5px; letter-spacing: .1em; }
  /* telefono: liste in una colonna, il bicchiere accanto resta in vista (sticky) mentre si sceglie */
  .mc-mix.is-live { grid-template-columns: minmax(0, 1fr) 96px; column-gap: 12px; }
  .mc-mix.is-live .mc-cols { columns: 1; }
  .mc-cup { top: 84px; margin-top: 34px; }
  .mc-cup figcaption b { font-size: 12.5px; }
  .mc-cup figcaption small { display: none; }
  .deck-item { padding: 14px 12px; column-gap: 12px; grid-template-columns: 32px minmax(0, 1fr); }
  .deck-n { width: 30px; }
  .bar-photo--home .bar-stk { right: 4px; top: -24px; }
  .bar-photo--home { width: calc(100% - 18px); justify-self: start; }
  .bar-photo--home::before { inset: 18px -16px -16px 18px; }
}

/* --- 50-pages.css --- */
/* Pagine interne: testata, Shop, Our Story, Find Us, Contact, 404. */
.phead { padding: clamp(28px, 5vw, 64px) 0 clamp(40px, 5vw, 72px); }
.phead-in { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.phead .lede { max-width: 46ch; }
.phead-art { position: relative; justify-self: center; width: min(380px, 100%); }
.phead-bunnies img { width: 100%; }
.spk--a { width: 30px; top: 4%; left: -4%; }
.spk--b { width: 32px; top: -2%; right: 2%; }

/* Shop */
.group-head { margin-bottom: 28px; }
.group-t { font: 800 clamp(26px, 2.8vw, 36px)/1.05 var(--display); text-transform: uppercase; color: var(--green-ink); }
.group-x { margin-top: 8px; }
.ask { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; max-width: 860px; }
.ask-bunnies { width: clamp(180px, 22vw, 260px); }
.ask-copy .lede { margin: 14px 0 22px; }

/* Our Story */
.founder { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.founder-photo { position: sticky; top: 104px; }
.founder-photo .ph { aspect-ratio: 4 / 5; box-shadow: var(--shadow); }
.hanko--photo { position: absolute; top: -18px; right: -12px; }
.founder-name { font: 800 clamp(30px, 3.4vw, 44px)/1 var(--display); text-transform: uppercase; color: var(--pink-ink); }
.founder-name small { display: block; margin-top: 12px; font: 800 14px/1 var(--body); letter-spacing: .14em; color: var(--green-ink); }
.quote { margin-top: 26px; display: grid; gap: 16px; font-size: clamp(16.5px, 1.3vw, 18px); }
.quote-last { font: 800 clamp(20px, 2vw, 26px)/1.2 var(--display); color: var(--pink-ink); }
.sign { display: flex; align-items: center; gap: 8px; margin-top: 22px; font: 800 26px/1 var(--display); color: var(--green-ink); }
.sign .art { width: 24px; }
.uji { display: grid; grid-template-columns: 1fr 1.1fr 1.1fr 1fr; grid-template-areas: "a f f b"; gap: 20px; align-items: start; }
.uji-ph .ph { aspect-ratio: 3 / 4; }
.uji-ph--a { grid-area: a; }
.uji-ph--b { grid-area: b; margin-top: 72px; }
.facts { grid-area: f; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fact { background: var(--paper); border-radius: 22px; padding: 20px; box-shadow: var(--shadow-sm); }
.fact-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--blush); color: var(--pink-ink); margin-bottom: 12px; }
.fact-ico .ico { width: 22px; height: 22px; }
.fact-t { font: 800 16px/1.15 var(--display); text-transform: uppercase; color: var(--green-ink); margin-bottom: 8px; }
.fact p { font-size: 14.5px; line-height: 1.5; }
.exp { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.exp-photo .ph { aspect-ratio: 4 / 5; box-shadow: var(--shadow); }
.perks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 24px; }
.perks li { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.perks .art { width: 18px; flex: none; }
.exp-buy { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.price-tag { font: 800 17px/1 var(--display); color: var(--pink-ink); background: var(--paper); border: 2px dashed var(--pink-soft); border-radius: 999px; padding: 15px 22px; }
.exp .note { margin-top: 16px; }

/* Find Us: timbri del passaporto */
.stamps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.stamp { aspect-ratio: 1; border-radius: 50%; border: 2.5px dashed var(--pink-ink); background: var(--paper); color: var(--pink-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 10px; transform: rotate(-6deg); transition: transform .5s var(--ease); }
.stamp:nth-child(2n) { transform: rotate(5deg); }
.stamp:nth-child(3n) { transform: rotate(-2deg); }
.stamp:hover { transform: rotate(0) scale(1.05); }
.stamp--g { border-color: var(--green-ink); color: var(--green-ink); }
.stamp--o { background: var(--blush); }
.stamp-ico .ico { width: 24px; height: 24px; }
.stamp-jp { font: 400 26px/1 var(--brush); }
.stamp-name { font: 800 16px/1.1 var(--display); text-transform: uppercase; }
.stamp-kind { font: 800 11.5px/1 var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--green-deep); }
.stamps-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 36px; }

/* Contact */
.crows { display: grid; gap: 14px; }
.crow { display: grid; grid-template-columns: 56px 1fr auto 56px; align-items: center; gap: 18px; padding: 14px; background: var(--cream); border: 2px solid var(--blush-2); border-radius: 999px; text-decoration: none; transition: border-color .3s, transform .45s var(--ease); }
.crow:hover { border-color: var(--pink-ink); transform: translateY(-3px); }
.crow-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--blush); color: var(--pink-ink); }
.crow-ico .ico { width: 26px; height: 26px; }
.crow-l { display: block; font: 800 12.5px/1 var(--body); text-transform: uppercase; letter-spacing: .14em; color: var(--pink-ink); margin-bottom: 6px; }
.crow-v { display: block; font: 800 clamp(18px, 2vw, 24px)/1.15 var(--display); overflow-wrap: anywhere; }
.crow-cta { font: 800 14.5px/1 var(--body); color: var(--green-ink); }
.cbtn--fake { width: 56px; height: 56px; }
.contact-shop { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-top: 40px; padding: 26px 30px; background: var(--blush); border-radius: var(--r); }
.contact-shop .lede { max-width: 40ch; }
.contact-stk { display: flex; justify-content: center; gap: 28px; margin-top: 44px; }
.contact-stk .stk-img { width: clamp(110px, 14vw, 150px); }
.contact-stk .stk-img:first-child { transform: rotate(-8deg); }
.contact-stk .stk-img:last-child { transform: rotate(7deg); }

/* 404 */
.nf { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nf-bunnies { width: min(300px, 72vw); margin-bottom: 20px; }
.nf .hrule { margin-left: auto; margin-right: auto; }
.nf .lede { margin-bottom: 26px; }

/* Orari del bar (portale -> settings.hours), sotto l'indirizzo in Find Us */
.hours { margin-top: 18px; padding: 16px 18px; background: var(--paper); border: 1.5px solid var(--pink-soft); border-radius: 16px; max-width: 420px; }
.hours-h { display: flex; align-items: center; gap: 8px; font: 700 17px/1.2 var(--display); color: var(--pink-ink); margin: 0 0 8px; }
.hours-h .ico { width: 18px; height: 18px; }
.hours-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hours-l li { display: flex; justify-content: space-between; gap: 12px; font: 700 15px/1.4 var(--body); color: var(--green-deep); }
.hours-t { font-variant-numeric: tabular-nums; text-align: right; }
.hours-n { margin: 10px 0 0; font: 600 14px/1.45 var(--body); color: var(--green-ink); }

/* Pagine legali (Impressum, Datenschutz, AGB): testo lungo, leggibile, niente decorazioni in mezzo */
.legal { max-width: 760px; }
.legal-toc { background: var(--paper); border: 1.5px solid var(--pink-soft); border-radius: 18px; padding: 16px 20px; margin-bottom: 36px; }
.legal-toc ol { margin: 0; padding-left: 1.3em; columns: 2 240px; column-gap: 28px; }
.legal-toc li { padding: 5px 0; font-weight: 700; break-inside: avoid; }
.legal-toc a { color: var(--pink-ink); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal-s { scroll-margin-top: 110px; padding: 4px 0 18px; }
.legal-s + .legal-s { border-top: 1.5px dashed var(--blush-2); padding-top: 22px; }
.legal-h { font: 700 clamp(20px, 2vw, 24px)/1.25 var(--display); color: var(--pink-ink); margin: 0 0 10px; }
.legal-s p { font-size: 17px; line-height: 1.65; margin: 0 0 10px; max-width: 64ch; overflow-wrap: anywhere; }
.legal-date { margin-top: 20px; font-size: 14px; font-weight: 700; color: var(--green-ink); }
.legal-more { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.legal-more a { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--pink-ink); border-radius: 999px; color: var(--pink-ink); font-weight: 800; text-decoration: none; }
.legal-more a:hover { background: var(--blush); }

/* --- 55-cart.css --- */
/* Carrello (fase 4): pulsante nella testata, schede "sold out", cassetto laterale.
   Stesso linguaggio del sito: pillole rosa a contorno, puntini del menu del bar, coniglietti veri,
   righe tratteggiate come le cuciture dei post. Entrata 420 ms con la curva da cassetto, uscita piu'
   rapida (240 ms); con reduced-motion solo dissolvenza. Nessun nero: velo e ombre tinti di rosa. */

/* ---------- testata ---------- */
.bag-btn {
  display: none; position: relative; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--pink-ink); color: var(--pink-ink); background: var(--paper);
  transition: transform .16s var(--ease), background-color .2s, color .2s;
}
.js .bag-btn { display: inline-grid; }
.bag-btn .ico { width: 21px; height: 21px; }
@media (hover: hover) { .bag-btn:hover { background: var(--pink-ink); color: var(--paper); } }
.bag-btn:active { transform: scale(.94); }
.bag-n {
  position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--green-ink); color: var(--paper); font: 800 12px/22px var(--body); text-align: center;
  box-shadow: 0 0 0 2.5px var(--cream);
}
.bag-n[hidden] { display: none; }
.bag-n.bump { animation: bag-bump .38s var(--ease); }
@keyframes bag-bump { 40% { transform: scale(1.3); } }

/* ---------- schede prodotto ---------- */
[data-add][hidden] { display: none !important; }
.bp-sold {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--blush); color: var(--pink-ink); font: 800 13px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
}
.bp-sold[hidden] { display: none; }
.bp.is-sold .bp-ph img { opacity: .72; }

/* ---------- cassetto ---------- */
.bag {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--green-deep); overflow: hidden;
}
.bag::backdrop { background: rgba(203, 17, 94, .2); }
html.bag-lock, html.bag-lock body { overflow: hidden; }
.bag-in {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  display: flex; flex-direction: column; background: var(--cream);
  border-left: 1.5px solid var(--blush-2); box-shadow: -26px 0 60px -34px rgba(203, 17, 94, .5);
  transform: translateX(100%); transition: transform .24s cubic-bezier(.32, .72, 0, 1);
}
.bag.is-open .bag-in { transform: none; transition-duration: .42s; }

.bag-head { position: relative; display: flex; align-items: flex-end; gap: 10px; padding: 22px 22px 0; border-bottom: 1.5px dashed var(--pink-soft); }
.bag-t { font: 800 28px/1 var(--display); text-transform: uppercase; letter-spacing: -.01em; padding-bottom: 16px; }
.bag-bunnies { width: 92px; margin-left: auto; margin-bottom: -1px; }
.bag-x {
  align-self: flex-start; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--pink-ink); color: var(--pink-ink); background: var(--paper);
  transition: transform .16s var(--ease), background-color .2s, color .2s;
}
.bag-x .ico { width: 20px; height: 20px; }
@media (hover: hover) { .bag-x:hover { background: var(--pink-ink); color: var(--paper); } }
.bag-x:active { transform: scale(.94); }

.bag-body { flex: 1; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 4px 22px 18px; }
.bag-msg { margin: 14px 0 2px; font-weight: 800; font-size: 14.5px; color: var(--green-ink); }
.bag-msg:empty { display: none; }
.bag-msg[data-tone="warn"], .bag-msg[data-tone="err"] { padding: 10px 14px; border-radius: 16px; background: var(--paper); color: var(--pink-ink); border: 1.5px solid var(--pink-soft); }

/* riga dritta tratteggiata; l'evidenziazione di un prodotto appena aggiunto sta su uno strato a parte, arrotondato */
.bag-row { position: relative; isolation: isolate; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1.5px dashed var(--blush-2); }
.bag-row::before { content: ''; position: absolute; inset: 6px -10px; z-index: -1; border-radius: 18px; background: var(--blush); opacity: 0; }
.bag-row.is-new::before { animation: bag-new 1.1s var(--ease); }
@keyframes bag-new { 0%, 25% { opacity: 1; } 100% { opacity: 0; } }
.bag-ph { width: 72px; height: 72px; border-radius: 18px; overflow: hidden; background: var(--matcha-tint); }
.bag-ph img { width: 100%; height: 100%; object-fit: cover; }
.bag-row.is-bad .bag-ph img { opacity: .45; }
.bag-name { font: 800 15.5px/1.25 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.bag-w { display: inline-block; font: 800 12px/1 var(--body); color: var(--pink-ink); background: var(--paper); border: 1.5px solid var(--pink-soft); border-radius: 999px; padding: 3px 8px; vertical-align: 2px; text-transform: none; }
.bag-w:empty { display: none; }
.bag-state { margin-top: 4px; font-size: 13.5px; font-weight: 800; color: var(--pink-ink); }
.bag-state:empty { display: none; }
.bag-ctl { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.bag-qty { display: inline-flex; align-items: center; height: 42px; border: 2px solid var(--pink-ink); border-radius: 999px; background: var(--paper); }
.bag-qty button { display: grid; place-items: center; width: 42px; height: 100%; border-radius: 999px; color: var(--pink-ink); transition: transform .12s var(--ease); }
.bag-qty button:active { transform: scale(.88); }
.bag-qty button[disabled] { opacity: .32; cursor: default; transform: none; }
.bag-qty .ico { width: 16px; height: 16px; }
.bag-qty output { display: inline-block; min-width: 22px; text-align: center; font: 800 16px/1 var(--display); font-variant-numeric: tabular-nums; }
.bag-qty output.roll-up { animation: bag-roll-up .22s var(--ease); }
.bag-qty output.roll-down { animation: bag-roll-down .22s var(--ease); }
@keyframes bag-roll-up { from { transform: translateY(60%); opacity: 0; } }
@keyframes bag-roll-down { from { transform: translateY(-60%); opacity: 0; } }
.bag-rm { padding: 10px 2px; font: 800 13.5px/1 var(--body); color: var(--green-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@media (hover: hover) { .bag-rm:hover { color: var(--pink-ink); } }
.bag-price { font: 800 16px/1.25 var(--display); white-space: nowrap; }

.bag-empty { display: none; }
.bag.is-empty .bag-empty { display: grid; justify-items: center; gap: 16px; padding: 36px 8px; text-align: center; }
.bag.is-empty .bag-foot { display: none; }
.bag-empty-art { width: min(210px, 60%); }
.bag-empty p { font: 800 21px/1.2 var(--display); text-transform: uppercase; color: var(--pink-ink); }

.bag-foot { padding: 16px 22px calc(18px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1.5px solid var(--blush-2); box-shadow: 0 -18px 30px -26px rgba(203, 17, 94, .32); }
.bag-ship { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.bag-ship legend { padding: 0; margin-bottom: 8px; font: 800 12.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--green-ink); }
.bag-regions { display: flex; gap: 8px; }
.bag-region { position: relative; flex: 1; }
.bag-region input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bag-region span {
  display: block; padding: 11px 12px; border-radius: 999px; border: 2px solid var(--pink-soft); background: var(--cream);
  font: 800 14px/1 var(--body); text-align: center; transition: background-color .2s, color .2s, border-color .2s;
}
.bag-region input:checked + span { background: var(--pink-ink); border-color: var(--pink-ink); color: var(--paper); }
.bag-region input:focus-visible + span { outline: 3px solid var(--pink-ink); outline-offset: 2px; }
.bag-note { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; font-size: 14.5px; font-weight: 700; color: var(--green-ink); }
.bag-note .ico { width: 20px; height: 20px; flex: none; color: var(--pink-ink); margin-top: 1px; }
.bag-sum { display: grid; gap: 8px; margin: 0 0 14px; }
.bag-line { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: 15px; }
.bag-line dt { flex: none; }
.bag-line dd { flex: 1; display: flex; align-items: baseline; gap: 8px; margin: 0; }
.bag-line .mc-dots { flex: 1; }
.bag-line b { font: 800 15px/1 var(--display); }
.bag-line--total { font-size: 17px; }
.bag-line--total b { font-size: 21px; color: var(--pink-ink); }
.bag-test { margin: -4px 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pink-ink); }
.bag-go { width: 100%; }
.bag-go[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.bag-go.is-busy { cursor: progress; }
.bag-go.is-busy .btn-ico { animation: bag-wait .9s ease-in-out infinite alternate; }
@keyframes bag-wait { to { transform: translateY(-3px); } }
.bag-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--green-ink); }
.bag-secure .ico { width: 16px; height: 16px; flex: none; color: var(--pink-ink); }

@media (max-width: 480px) {
  .bag-head { padding: 16px 16px 0; }
  .bag-t { font-size: 24px; }
  .bag-bunnies { width: 74px; }
  .bag-body { padding: 4px 16px 16px; }
  .bag-foot { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .bag-row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; }
  .bag-ph { width: 64px; height: 64px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .bag-in { transform: none; opacity: 0; transition: opacity .2s ease; }
  .bag.is-open .bag-in { opacity: 1; transition-duration: .2s; }
}
.bag-mail { color: var(--pink-ink); text-decoration: underline; text-underline-offset: 3px; } /* senza spedizione: email gia' compilata col carrello */
/* prezzi con IVA + rimando alle AGB, sotto il pulsante di pagamento */
.bag-terms { margin: 10px 0 0; font-size: 13px; line-height: 1.45; text-align: center; color: var(--green-ink); }
.bag-terms a { color: var(--pink-ink); font-weight: 800; text-underline-offset: 2px; }
/* spedizione: quanto manca al gratis + tempi e "dall'estero" (revisione 27.09) */
.bag-free { margin: 0 0 8px; padding: 6px 14px; border-radius: 999px; background: var(--blush); color: var(--pink-ink); font-weight: 800; font-size: 14px; text-align: center; }
.bag-free.is-free { background: var(--matcha-tint); color: var(--green-ink); }
.bag-shipnote { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: var(--green-ink); }
.bag-shipnote .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.bag-shipnote a { color: var(--pink-ink); font-weight: 800; }
.bag-terms .ico { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; color: var(--green-ink); }

/* --- 60-responsive.css --- */
/* Collasso esplicito per tablet e telefono: una colonna, niente scroll orizzontale. */
@media (max-width: 980px) {
  .uji { grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "f f"; }
  .uji-ph--b { margin-top: 40px; }
  .stamps { grid-template-columns: repeat(3, 1fr); max-width: 560px; }
}

@media (max-width: 860px) {
  .phead-in, .menu-split, .bar-split, .faq-split, .founder, .exp { grid-template-columns: 1fr; }
  .phead-art { width: min(300px, 76%); }
  .menu-photo, .bar-photo, .exp-photo { max-width: 460px; }
  .bar-photo { order: -1; margin-left: 18px; }
  .menu-photo .ph, .bar-photo .ph { aspect-ratio: 5 / 4; }
  .founder-photo { position: relative; top: 0; max-width: 460px; }
  .faq-art { width: min(240px, 60%); margin-top: 20px; }
  .follow-in { grid-template-columns: 1fr 1fr; }
  .follow-mid { grid-column: 1 / -1; order: -1; }
  .ask { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  body { font-size: 16.5px; }
  .eyebrow .jp { display: none; }
  .hero-ctas .btn, .bar-ctas .btn, .exp-buy .btn { width: 100%; }
  .mc-cols, .mc-pair { columns: 1; grid-template-columns: 1fr; }
  .mc-cols { columns: 2; column-gap: 16px; }
  .mc-cols li, .mc-list li { font-size: 14.5px; }
  .perks { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .uji { gap: 14px; }
  .stamp-name { font-size: 13px; }
  .stamp-kind { font-size: 10px; letter-spacing: .06em; }
  .stamp-ico .ico { width: 18px; height: 18px; }
  .stamps { gap: 10px; }
  .crow { grid-template-columns: 48px 1fr 44px; gap: 12px; padding: 10px; border-radius: 26px; }
  .crow-ico { width: 48px; height: 48px; }
  .crow-cta { display: none; }
  .crow-v { font-size: 15.5px; overflow-wrap: normal; }
  .cbtn--fake { width: 44px; height: 44px; }
  .contact-shop { padding: 22px; }
  .contact-shop .btn { width: 100%; }
  .follow-sep { display: none; }
  .menu-stk, .bar-stk { width: 92px; }
  .menu-stk { right: -6px; }
  .bar-stk { left: -14px; }
}

/* Revisione 27.09: contrasto e zone da toccare (>= 44 px, Apple) senza cambiare i colori di marca */
.slogan .t2-p { color: var(--pink-ink); }
.slogan .t2-g { color: var(--green-ink); }
.is-live .mc-pick { min-height: 44px; display: inline-flex; align-items: center; }
.bag-qty { height: 44px; }
.bag-qty button { width: 44px; }
.bag-rm { min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; margin-left: -8px; }
.foot-list a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-list { gap: 0; }

/* Revisione 27.09 (scelte del titolare): prezzo d'ingresso nel primo schermo, "Shop" sempre in testata,
   noren della hero piu' bassa sul telefono cosi' il pulsante Shop entra nel primo schermo */
.hero-from { grid-area: from; display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14.5px; font-weight: 800; color: var(--green-ink); }
.hero-from .ico { flex: none; width: 18px; height: 18px; color: var(--pink-ink); }
@media (max-width: 1199px) {
  .top .top-shop { display: inline-flex; }
}
@media (max-width: 600px) {
  .top .top-shop { padding: 0 14px; font-size: 14px; }
  .noren--hero { --nh: 64px; }
  .hero-noren { margin-bottom: 26px; }
  .hero { padding-top: 12px; }
  .hero-from { margin-top: 12px; font-size: 13.5px; }
}
@media (max-width: 359px) { .top .top-shop .btn-ico { display: none; } }
/* Shop sul telefono: i prodotti subito, i coniglietti dell'intestazione restano solo da tablet in su */
@media (max-width: 899px) {
  .is-shop .phead-art { display: none; }
  .is-shop .phead { padding-bottom: 20px; }
}
@media (max-width: 600px) {
  .is-shop .phead { padding-top: 14px; }
  .is-shop .noren--page { --nh: 46px; }
  .is-shop .phead .phead-in { margin-top: 10px; }
  .is-shop .phead + .shop-group { padding-top: 20px; }
  /* prezzo d'ingresso sopra i pulsanti: entra nel primo schermo insieme a "Shop the matcha" */
  .hero-in { grid-template-areas: "tate eb" "tate title" "tag tag" "text text" "from from" "ctas ctas" "scene scene"; }
  .hero-from { margin: 10px 0 0; }
  .hero-from .hf-2 { display: none; }
  .hero-ctas { margin-top: 16px; }
  .noren--hero { --nh: 56px; }
  .hero-noren { margin-bottom: 18px; }
}

/* --- 85-preloader.css --- */
/* Precaricamento, come la versione A ma nei colori del logo: carta washi, sole rosa, ensō
   verde disegnato a pennello, timbro hanko rosa che stampa 抹茶, due pannelli shōji che si
   aprono. Solo alla prima pagina della visita (sessionStorage), mai con reduced-motion,
   mai senza JS. Totale 1,15 s (27.09: il titolo non deve aspettare, Google misura il primo schermo). */
.pl { display: none; }
.pl-on .pl { display: block; position: fixed; inset: 0; z-index: 100; animation: pl-gone 0s linear 1.15s forwards; }
@keyframes pl-gone { to { visibility: hidden; } }
.pl-panel {
  position: absolute; top: 0; bottom: 0; width: 50.4%;
  background-color: var(--cream);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(33.33% - 2px), rgba(126, 154, 90, .5) calc(33.33% - 2px) 33.33%),
    repeating-linear-gradient(0deg, transparent 0 88px, rgba(126, 154, 90, .5) 88px 90px),
    var(--washi);
}
.pl-l { left: 0; border-right: 7px solid var(--bubble); animation: pl-open-l .45s cubic-bezier(.65, 0, .35, 1) .7s forwards; }
.pl-r { right: 0; border-left: 7px solid var(--bubble); animation: pl-open-r .45s cubic-bezier(.65, 0, .35, 1) .7s forwards; }
@keyframes pl-open-l { to { transform: translateX(-102%); } }
@keyframes pl-open-r { to { transform: translateX(102%); } }
.pl-center { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; animation: pl-fade .2s ease .6s forwards; }
@keyframes pl-fade { to { opacity: 0; transform: scale(.97); } }
.pl-mark { display: grid; place-items: center; }
.pl-mark > * { grid-area: 1 / 1; }
.pl-mark::before { content: ''; grid-area: 1 / 1; width: min(230px, 46vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fff4f8, var(--blush-2) 48%, var(--pink-soft)); opacity: 0; transform: scale(.6); animation: pl-sun .4s var(--ease) .02s forwards; }
@keyframes pl-sun { to { opacity: 1; transform: none; } }
.pl-enso { width: min(320px, 64vw); height: auto; }
.pl-enso .ink-mask { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ink-draw .42s cubic-bezier(.55, .1, .3, 1) .05s forwards; }
@keyframes ink-draw { to { stroke-dashoffset: 0; } }
.pl-hanko { width: 78px; height: 98px; border-radius: 16px; font-size: 32px; animation: hanko-stamp .28s cubic-bezier(.2, 1.3, .4, 1) .34s both; }
@keyframes hanko-stamp { 0% { opacity: 0; transform: scale(2.2) rotate(-8deg); } 60% { opacity: 1; transform: scale(.94) rotate(-8deg); } 100% { opacity: 1; transform: scale(1) rotate(-8deg); } }
.pl-name { font: 800 clamp(18px, 2.2vw, 24px)/1 var(--display); letter-spacing: .3em; text-transform: uppercase; opacity: 0; animation: pl-in .25s ease .4s forwards; }
@keyframes pl-in { to { opacity: 1; } }
.pl-g { color: var(--green-ink); }
.pl-p { color: var(--pink-ink); }

/* Tenda di transizione tra le pagine (js/20-curtain.js + script in testa): noren rosa a tutta
   altezza, un carattere a pennello per pannello, fessure solo tra i pannelli. Chiusura 0,3 s
   (scende), apertura 0,34 s (sale): totale sotto 0,7 s. Mai senza JS, mai con reduced-motion. */
.nt { display: none; position: fixed; inset: 0; z-index: 96; pointer-events: none; overflow: hidden; }
.nt-in .nt, .nt-go .nt { display: block; }
.nt-go .nt { pointer-events: auto; }
.nt-rod { position: absolute; top: 0; left: 0; right: 0; height: 14px; z-index: 2; background: var(--green-leaf); box-shadow: 0 2px 0 var(--green-ink); }
.nt-panels { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 7px; }
.nt-p {
  position: relative; display: grid; place-items: center; height: 100%;
  background: var(--bubble) var(--noren-wave) repeat-x left bottom / 44px 22px;
  border-radius: 0 0 16px 16px; transform: translateY(-102%);
}
.nt-p span { font: 400 min(calc(80vw / var(--n, 4)), 34vh)/1 var(--brush); color: var(--paper); margin-top: -6vh; }
.nt-go .nt-p { animation: nt-down .22s cubic-bezier(.3, .7, .25, 1) forwards; animation-delay: calc(var(--i) * 25ms); }
.nt-in .nt-p { transform: none; animation: nt-up .26s cubic-bezier(.55, 0, .25, 1) forwards; animation-delay: calc(40ms + var(--i) * 25ms); }
@keyframes nt-down { from { transform: translateY(-102%); } to { transform: none; } }
@keyframes nt-up { from { transform: none; } to { transform: translateY(-102%); } }
.nt-go .nt-rod, .nt-in .nt-rod { animation: nt-rod .7s linear forwards; }
@keyframes nt-rod { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.nt-go .nt-rod { animation: none; }
@media (prefers-reduced-motion: reduce) { .nt { display: none !important; } }

/* --- 90-motion.css --- */
/* Stati di ingresso: esistono SOLO sotto html.anim (aggiunta dallo script in testa quando il
   JS gira e non c'e' reduced-motion; tolta dopo 3,5 s se app.js non parte). L'HTML statico
   e' sempre visibile. */
.anim [data-rv] { opacity: 0; transform: translateY(22px); }
.anim [data-rv="pop"] { transform: scale(.86) rotate(-4deg); }
.anim [data-rv].is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .9s var(--ease); }
.anim .follow-stk--l.is-in { transform: rotate(-10deg); }
.anim .follow-stk--r.is-in { transform: rotate(9deg); }
.anim .menu-stk.is-in { transform: rotate(10deg); }
.anim .bar-stk.is-in { transform: rotate(-10deg); }
.anim .stamp.is-in { transform: rotate(-6deg); }
.anim .stamp:nth-child(2n).is-in { transform: rotate(5deg); }
.anim .stamp:nth-child(3n).is-in { transform: rotate(-2deg); }

/* Testi della hero e delle intestazioni: entrano con un'animazione solo CSS dal primo disegno,
   senza aspettare app.js (sul telefono lento aspettavano ~4 s: LCP di Lighthouse). Stesso
   movimento e stessa cadenza (0,12 s dopo il precaricamento, poi 90 ms l'uno). */
@keyframes rv-up { from { opacity: .01; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.pl-on { --pl: .7s; }
.anim :is(.hero, .phead) [data-rv]:not([data-rv="scene"], [data-rv="brush"]) {
  animation: rv-up .8s var(--ease) both;
  animation-delay: calc(var(--pl, 0s) + .12s + var(--i, 0) * 90ms);
}
/* la scritta verticale 抹茶 della hero: stesso tratto di pennello, anche lui solo CSS */
@keyframes rv-brush { from { clip-path: inset(0 0 99% 0); } to { clip-path: inset(0 0 -2% 0); } }
.anim .hero [data-rv="brush"] { animation: rv-brush 1.5s cubic-bezier(.55, .1, .3, 1) both; animation-delay: calc(var(--pl, 0s) + .12s); }
.hero-title .ht-1, .phead-copy h1 { --i: 1; }
.hero-title .ht-2 { --i: 2; }
.hero-tag, .phead-copy .lede { --i: 3; }
.hero-text { --i: 4; }
.hero-ctas, .phead-copy .lede ~ * { --i: 5; }

.anim [data-rv="scene"] { transform: translateY(18px) scale(.97); }
/* tanzaku: cadono dalla canna di bambù */
.anim [data-rv="drop"] { transform: translateY(-48px) rotate(-3deg); }
/* scritte a pennello: si rivelano dall'alto verso il basso, come il tratto del pennello */
.anim [data-rv="brush"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
.anim [data-rv="brush"].is-in { clip-path: inset(0 0 -2% 0); transition: clip-path 1.5s cubic-bezier(.55, .1, .3, 1); }
/* ensō: il tratto si disegna quando la scena entra */
.anim .ink-draw .ink-mask { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anim .is-in .ink-draw .ink-mask { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.55, .1, .3, 1) .2s; }
/* Sala da te': le porte shōji partono chiuse SOLO con le animazioni attive */
.anim .room:not(.is-open) .shoji--l, .anim .room:not(.is-open) .shoji--r { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* hero: i coniglietti frullano (dondolio alternato come il chasen) e il cuore batte. Prima
   erano tre tween GSAP infiniti; in CSS girano sulla scheda grafica. .is-whisk da 30-scenes.js */
@keyframes hb-sway { from { transform: rotate(0); } to { transform: rotate(var(--sway)); } }
@keyframes burst-beat { from { transform: scale(1); } to { transform: scale(1.08); } }
.is-whisk .hb--pink { --sway: 2.5deg; animation: hb-sway .9s ease-in-out infinite alternate; }
.is-whisk .hb--blue { --sway: -2.5deg; animation: hb-sway .9s ease-in-out .45s infinite alternate; }
.is-whisk .hero-burst { transform-origin: 50% 80%; animation: burst-beat .55s ease-in-out infinite alternate; }