/* ==========================================================================
   SPEZIALE — Design system 2026
   Struttura: reset → tokens → base → layout → components → pages → motion
   Regola d'oro per le animazioni: solo transform e opacity.
   ========================================================================== */

@layer reset, tokens, base, layout, components, pages, utilities, motion;

/* ---------------------------------------------------------------- reset -- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, picture, svg, video, iframe { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  h1, h2, h3, h4, p { overflow-wrap: break-word; }
  dialog { padding: 0; border: 0; max-width: none; max-height: none; }
  [hidden] { display: none !important; }
}

/* --------------------------------------------------------------- tokens -- */
@layer tokens {
  :root {
    /* Palette di marca */
    --cacao:      #563636;
    --cacao-deep: #432929;
    --cipria:     #ECE5E3;
    --rosa:       #C9BBBB;
    --rosa-500:   #AD9090;
    --oliva:      #353C2A;
    --oliva-600:  #454C31;
    --ruggine:    #8C331C;
    --bosco:      #0C261A;
    --vinaccia:   #280909;
    --terra:      #454031;
    --oro:        #C9A86A;
    --oro-chiaro: #E6D3A8;
    --bianco:     #FFFFFF;
    --seta:       #F6F0EE;

    /* Superfici chiare (cambiano con il tema scuro) */
    --light-bg:     var(--cipria);
    --light-fg:     var(--cacao);
    --light-soft:   #6E4B4B;
    --light-accent: #7A5530;
    --light-rule:   rgb(86 54 54 / .22);

    /* Tipografia */
    --font-display: "Bodoni Moda", "Didot", "Linotype Didot", "Bodoni 72", Georgia, serif;
    --font-body: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --step--2: clamp(.75rem, .73rem + .1vw, .8rem);
    --step--1: clamp(.85rem, .82rem + .15vw, .94rem);
    --step-0:  clamp(1rem, .96rem + .2vw, 1.125rem);
    --step-1:  clamp(1.2rem, 1.1rem + .45vw, 1.45rem);
    --step-2:  clamp(1.45rem, 1.25rem + .9vw, 2rem);
    --step-3:  clamp(1.8rem, 1.45rem + 1.6vw, 2.85rem);
    --step-4:  clamp(2.2rem, 1.6rem + 2.8vw, 3.9rem);
    --step-5:  clamp(2.35rem, 1.3rem + 4.6vw, 5.4rem);

    /* Spaziature */
    --space-2xs: .25rem;
    --space-xs: .5rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: clamp(2rem, 1.6rem + 1.8vw, 3rem);
    --space-xl: clamp(3rem, 2.2rem + 3.5vw, 5rem);
    --section-pad: clamp(4.5rem, 3rem + 6vw, 8.5rem);
    --gutter: clamp(1rem, .5rem + 3vw, 2.5rem);
    --wrap: 72rem;
    --measure: 62ch;
    --header-h: 4.5rem;

    /* Forme e profondità */
    --radius-s: .375rem;
    --radius-m: .75rem;
    --radius-l: 1.5rem;
    --radius-pill: 999px;
    --shadow-s: 0 1px 2px rgb(20 4 4 / .18), 0 2px 8px rgb(20 4 4 / .12);
    --shadow-m: 0 6px 18px rgb(20 4 4 / .22), 0 2px 6px rgb(20 4 4 / .14);
    --shadow-l: 0 24px 60px rgb(20 4 4 / .38), 0 8px 20px rgb(20 4 4 / .2);

    /* Movimento */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-fast: .2s;
    --dur-med: .45s;
    --dur-slow: .9s;
  }

  /* Tema scuro: le superfici chiare diventano cacao profondo */
  @media (prefers-color-scheme: dark) {
    :root {
      --light-bg:     #2C1D1D;
      --light-fg:     #EDE2DF;
      --light-soft:   #CDBDBA;
      --light-accent: var(--oro);
      --light-rule:   rgb(237 226 223 / .18);
      --cacao:        #4A2F2F;
    }
  }
}

/* ----------------------------------------------------------------- base -- */
@layer base {
  html {
    color-scheme: light dark;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body {
    min-height: 100vh;
    background: var(--cacao);
    color: var(--bianco);
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.01em;
    text-wrap: balance;
    font-optical-sizing: auto;
  }
  p { text-wrap: pretty; }
  strong { font-weight: 700; }

  a { text-underline-offset: .2em; text-decoration-thickness: 1px; }

  ::selection { background: var(--oro); color: var(--vinaccia); }

  /* Focus sempre visibile, adattato alla superficie */
  :focus-visible {
    outline: 2px solid var(--focus, var(--oro-chiaro));
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* Barra di scorrimento coerente con la palette */
  html { scrollbar-color: var(--rosa-500) var(--cacao-deep); }
}

/* --------------------------------------------------------------- layout -- */
@layer layout {
  .wrap {
    width: min(var(--wrap), 100% - 2 * var(--gutter));
    margin-inline: auto;
  }
  .wrap--narrow { --wrap: 46rem; }
  .wrap--text   { --wrap: 40rem; }

  .section { padding-block: var(--section-pad); position: relative; }
  .section--tight { padding-block: var(--space-xl); }
  .center { text-align: center; }
  .center .lead, .center .measure { margin-inline: auto; }

  .stack > * + * { margin-top: var(--stack, var(--space-s)); }

  /* Split: testo + immagine affiancati da 48rem in su */
  .split {
    display: grid;
    grid-template-columns: 1fr;
  }
  .split__text {
    padding: var(--space-xl) var(--gutter);
    align-self: center;
    max-width: 38rem;
  }
  .split__media { min-height: 20rem; }
  @media (min-width: 48rem) {
    .split { grid-template-columns: 1fr 1fr; }
    .split--reverse .split__media { order: -1; }
    .split__text { padding: var(--section-pad) clamp(2rem, 5vw, 5rem); justify-self: center; }
    .split__media { min-height: 30rem; }
  }

  /* Superfici: ogni sezione dichiara il proprio contesto cromatico */
  .s-cacao    { --bg: var(--cacao);    --fg: var(--bianco); --soft: #E5D8D6; --accent: var(--oro);  --rule: rgb(201 187 187 / .2); --focus: var(--oro-chiaro); }
  .s-cipria   { --bg: var(--light-bg); --fg: var(--light-fg); --soft: var(--light-soft); --accent: var(--light-accent); --rule: var(--light-rule); --focus: var(--light-fg); }
  .s-oliva    { --bg: var(--oliva);    --fg: var(--bianco); --soft: #DCD9CF; --accent: var(--oro);  --rule: rgb(230 211 168 / .2); --focus: var(--oro-chiaro); }
  .s-oliva-600{ --bg: var(--oliva-600);--fg: var(--bianco); --soft: #E4E2D8; --accent: var(--oro-chiaro); --rule: rgb(230 211 168 / .2); --focus: var(--oro-chiaro); }
  .s-ruggine  { --bg: var(--ruggine);  --fg: var(--bianco); --soft: #F3E4DF; --accent: var(--oro-chiaro); --rule: rgb(255 255 255 / .2); --focus: var(--bianco); }
  .s-bosco    { --bg: var(--bosco);    --fg: var(--bianco); --soft: #D3DCD5; --accent: var(--oro);  --rule: rgb(230 211 168 / .18); --focus: var(--oro-chiaro); }
  .s-vinaccia { --bg: var(--vinaccia); --fg: var(--bianco); --soft: #D9C9C9; --accent: var(--oro);  --rule: rgb(201 187 187 / .16); --focus: var(--oro-chiaro); }
  .s-terra    { --bg: var(--terra);    --fg: var(--bianco); --soft: #E2DDD0; --accent: var(--oro-chiaro); --rule: rgb(230 211 168 / .2); --focus: var(--oro-chiaro); }
  :is(.s-cacao, .s-cipria, .s-oliva, .s-oliva-600, .s-ruggine, .s-bosco, .s-vinaccia, .s-terra) {
    background-color: var(--bg);
    color: var(--fg);
  }
  .s-cipria { color-scheme: light; }
  @media (prefers-color-scheme: dark) { .s-cipria { color-scheme: dark; } }
}

/* ----------------------------------------------------------- components -- */
@layer components {

  /* Icone SVG dallo sprite inline */
  .icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .icon--fill { fill: currentColor; stroke: none; }

  /* Link "salta al contenuto" */
  .skip-link {
    position: fixed; top: .75rem; left: .75rem; z-index: 200;
    padding: .7rem 1.1rem; border-radius: var(--radius-s);
    background: var(--seta); color: var(--vinaccia); font-weight: 700;
    transform: translateY(-200%);
  }
  .skip-link:focus-visible { transform: none; }

  /* ---------- Tipografia di supporto ---------- */
  .eyebrow {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--step-1);
    color: var(--accent);
    margin-bottom: var(--space-s);
  }
  .title-xl { font-size: var(--step-4); }
  .title-l  { font-size: var(--step-3); }
  .title-m  { font-size: var(--step-2); }
  .title-s  { font-size: var(--step-1); }
  .subtitle {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--step-2);
    color: var(--soft);
    line-height: 1.25;
  }
  .lead { font-size: var(--step-1); line-height: 1.6; color: var(--soft); max-width: var(--measure); font-weight: 300; }
  .body { color: var(--soft); max-width: var(--measure); }
  .quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--step-3);
    line-height: 1.3;
    font-weight: 400;
    max-width: 30ch;
  }
  .quote strong { font-weight: 600; color: var(--accent); }

  /* Filetto oro decorativo */
  .rule {
    display: block;
    width: 3.5rem; height: 1px;
    background: currentColor;
    opacity: .6;
    margin-block: var(--space-l);
  }
  .center .rule { margin-inline: auto; }

  /* ---------- Pulsanti ---------- */
  .btn {
    --btn-bg: var(--rosa);
    --btn-fg: var(--cacao);
    --btn-hover: var(--bianco);
    position: relative;
    isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: .6em;
    min-height: 3rem;
    padding: .8rem 1.8rem;
    border-radius: var(--radius-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: .06em;
    text-decoration: none;
    overflow: hidden;
    box-shadow: var(--shadow-s);
    transition: transform var(--dur-med) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  /* Livello chiaro che compare in hover (anima solo l'opacità) */
  .btn::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--btn-hover);
    opacity: 0;
    transition: opacity var(--dur-med) var(--ease-out);
  }
  /* Riflesso dorato che attraversa il pulsante */
  .btn::after {
    content: ""; position: absolute; inset: -50% auto -50% 0; width: 35%;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / .55), transparent);
    transform: translateX(-180%) skewX(-18deg);
    pointer-events: none;
  }
  @media (hover: hover) {
    .btn:hover { transform: translateY(-2px); }
    .btn:hover::before { opacity: 1; }
    .btn:hover::after { transform: translateX(420%) skewX(-18deg); transition: transform .9s var(--ease-out); }
  }
  .btn:active { transform: translateY(0) scale(.97); transition-duration: var(--dur-fast); }
  .btn .icon { font-size: 1.15em; }
  .btn--sm { min-height: 2.5rem; padding: .55rem 1.3rem; }
  .btn--lg { min-height: 3.5rem; padding: 1rem 2.4rem; }
  .btn--block { width: 100%; }
  .btn--dark { --btn-bg: var(--cacao); --btn-fg: var(--bianco); --btn-hover: var(--vinaccia); }
  .btn--green { --btn-bg: #2F5A3C; --btn-fg: var(--bianco); --btn-hover: #24472F; }
  .s-cipria .btn { --btn-bg: var(--light-fg); --btn-fg: var(--light-bg); --btn-hover: var(--vinaccia); }
  @media (prefers-color-scheme: dark) { .s-cipria .btn { --btn-hover: var(--bianco); } }

  /* Link testuale con freccia che si allunga */
  .link-arrow {
    display: inline-flex; align-items: center; gap: .55em;
    color: var(--accent);
    font-weight: 700;
    font-size: var(--step--1);
    letter-spacing: .05em;
    text-decoration: none;
  }
  .link-arrow .icon { transition: transform var(--dur-med) var(--ease-out); }
  .link-arrow:hover .icon { transform: translateX(.35em); }
  .link-arrow:hover span { text-decoration: underline; }

  .icon-link {
    display: inline-grid; place-items: center;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    color: var(--rosa);
    transition: transform var(--dur-med) var(--ease-out);
  }
  .icon-link .icon { font-size: 1.35rem; }
  .icon-link:hover { transform: scale(1.1) rotate(-4deg); }

  /* ---------- Header ---------- */
  .site-header {
    position: fixed; inset: 0 0 auto; z-index: 50;
    height: var(--header-h);
    color: var(--bianco);
    view-transition-name: site-header;
  }
  /* Fondo vetro: diventa più pieno quando si scorre (solo opacità) */
  .site-header::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgb(86 54 54 / .82);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 1px solid rgb(255 255 255 / .08);
  }
  .site-header::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgb(67 41 41 / .96);
    box-shadow: 0 10px 30px rgb(20 4 4 / .25);
    opacity: 0;
    transition: opacity var(--dur-med) var(--ease-out);
  }
  .site-header.is-scrolled::after { opacity: 1; }
  .site-header__inner {
    height: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-m);
  }
  .brand { display: block; flex: none; }
  .brand img {
    height: 2.6rem; width: auto;
    transition: transform var(--dur-med) var(--ease-out);
    transform-origin: left center;
  }
  .brand:hover img { transform: scale(1.04); }
  @media (min-width: 48rem) { .brand img { height: 3.1rem; } }

  .nav { display: none; align-items: center; gap: var(--space-m); }
  @media (min-width: 64rem) { .nav { display: flex; } }
  .nav__list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); list-style: none; padding: 0; }
  .nav__link {
    position: relative;
    display: inline-flex; align-items: center; gap: .35em;
    padding-block: .5rem;
    font-size: var(--step--1);
    font-weight: 400;
    letter-spacing: .06em;
    text-decoration: none;
    color: var(--bianco);
  }
  .nav__link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 1px;
    background: var(--oro);
    transform: scaleX(0); transform-origin: right;
    transition: transform var(--dur-med) var(--ease-out);
  }
  .nav__link:hover::after, .nav__link[aria-current="page"]::after, .nav__toggle[aria-expanded="true"]::after {
    transform: scaleX(1); transform-origin: left;
  }
  .nav__link[aria-current="page"] { color: var(--oro-chiaro); }
  .nav__toggle .icon { font-size: .8em; transition: transform var(--dur-med) var(--ease-out); }
  .nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

  /* Tendina Prodotti */
  .nav__dropdown { position: relative; }
  .dropdown {
    position: absolute; top: calc(100% + .6rem); left: 50%;
    min-width: 15.5rem;
    padding: .5rem;
    list-style: none;
    border-radius: var(--radius-m);
    background: rgb(40 9 9 / .97);
    border: 1px solid rgb(201 187 187 / .15);
    box-shadow: var(--shadow-l);
    opacity: 0; visibility: hidden;
    transform: translate(-50%, -.5rem);
    transition: opacity var(--dur-fast) ease, transform var(--dur-med) var(--ease-out), visibility 0s var(--dur-med);
  }
  /* Ponte invisibile per non perdere l'hover tra pulsante e tendina */
  .dropdown::before { content: ""; position: absolute; inset: -.8rem 0 auto; height: .8rem; }
  .nav__dropdown.is-open .dropdown,
  .nav__dropdown:focus-within .dropdown {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition: opacity var(--dur-fast) ease, transform var(--dur-med) var(--ease-out), visibility 0s;
  }
  @media (hover: hover) {
    .nav__dropdown:hover .dropdown {
      opacity: 1; visibility: visible; transform: translate(-50%, 0);
      transition: opacity var(--dur-fast) ease, transform var(--dur-med) var(--ease-out), visibility 0s;
    }
  }
  .dropdown a {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem .9rem;
    border-radius: var(--radius-s);
    font-size: var(--step--1);
    text-decoration: none;
    color: var(--rosa);
    position: relative; isolation: isolate;
  }
  .dropdown a::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: rgb(201 187 187 / .1);
    opacity: 0; transition: opacity var(--dur-fast);
  }
  .dropdown a:hover::before, .dropdown a:focus-visible::before { opacity: 1; }
  .dropdown a:hover { color: var(--bianco); }
  .dropdown .icon { color: var(--oro); font-size: 1.05rem; }

  /* Pulsante menu mobile */
  .menu-toggle {
    display: inline-grid; place-items: center;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    color: var(--bianco);
    font-size: 1.5rem;
  }
  @media (min-width: 64rem) { .menu-toggle { display: none; } }

  /* Menu mobile: <dialog> a tutto schermo */
  .drawer {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    height: 100dvh;
    background: var(--cacao);
    color: var(--rosa);
    opacity: 0;
    transform: translateX(6%);
    transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), display var(--dur-med) allow-discrete, overlay var(--dur-med) allow-discrete;
  }
  .drawer[open] { opacity: 1; transform: none; }
  @starting-style { .drawer[open] { opacity: 0; transform: translateX(6%); } }
  .drawer::backdrop { background: rgb(20 4 4 / .5); }
  .drawer__inner {
    min-height: 100%;
    display: grid; grid-template-rows: auto 1fr auto;
    padding: 1rem var(--gutter) 2rem;
  }
  .drawer__top { display: flex; justify-content: space-between; align-items: center; height: calc(var(--header-h) - 1rem); }
  .drawer__top img { height: 2.6rem; width: auto; }
  .drawer__nav { align-self: center; text-align: center; padding-block: 2rem; }
  .drawer__nav ul { list-style: none; padding: 0; display: grid; gap: .35rem; }
  .drawer__nav a:not(.btn) {
    display: inline-block; padding: .35rem 1rem;
    font-family: var(--font-display); font-style: italic;
    font-size: var(--step-3);
    text-decoration: none;
    color: var(--rosa);
  }
  .drawer__nav a[aria-current="page"] { color: var(--bianco); }
  .drawer__nav .drawer__sub a { font-size: var(--step-1); color: var(--soft, #E5D8D6); padding-block: .2rem; }
  .drawer__group { margin-block: .9rem; padding-block: .9rem; border-block: 1px solid rgb(201 187 187 / .15); }
  .drawer__group-title { display: block; font-size: var(--step--1); letter-spacing: .08em; color: var(--rosa-500); margin-bottom: .35rem; }
  .drawer__foot { display: flex; justify-content: center; align-items: center; gap: var(--space-m); }
  /* Le voci entrano in cascata quando il menu si apre */
  .drawer[open] .drawer__nav li { animation: drawer-item var(--dur-slow) var(--ease-out) both; animation-delay: calc(80ms + var(--i, 0) * 45ms); }
  @keyframes drawer-item { from { opacity: 0; transform: translateY(.9rem); } }

  /* ---------- Immagini ---------- */
  .media { position: relative; overflow: hidden; background: var(--vinaccia); }
  /* L'immagine riempie sempre il contenitore, qualunque sia la sua altezza */
  .media picture { position: absolute; inset: 0; }
  .media img { width: 100%; height: 100%; object-fit: cover; }
  .media--band { height: clamp(18rem, 62vh, 44rem); }
  .media--band-s { height: clamp(16rem, 52vh, 36rem); }

  /* Fondo fotografico con velatura */
  .photo-bg { position: relative; isolation: isolate; overflow: hidden; }
  .photo-bg > .media { position: absolute; inset: 0; z-index: -2; }
  .photo-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--veil, rgb(40 9 9 / .82)); }

  /* ---------- Pannelli e card ---------- */
  /* Griglie a quattro elementi: 1 → 2 → 4 colonne, mai 3 + 1 */
  .panel-grid, .pillars, .flavours { display: grid; grid-template-columns: 1fr; }
  @media (min-width: 34rem) { .panel-grid, .pillars, .flavours { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 60rem) { .panel-grid, .pillars, .flavours { grid-template-columns: repeat(4, 1fr); } }
  .panel-grid { gap: var(--space-s); }
  .panel {
    padding: var(--space-l) var(--space-m);
    border-radius: var(--radius-m);
    background: rgb(201 187 187 / .12);
    border: 1px solid rgb(230 211 168 / .18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    text-align: center;
  }
  .panel h3 { font-size: var(--step-2); font-weight: 400; margin-bottom: var(--space-s); }
  .panel h3::after { content: ""; display: block; width: 1.75rem; height: 1px; margin: var(--space-s) auto 0; background: var(--oro); }
  .panel p { font-size: var(--step--1); color: var(--soft); line-height: 1.7; }

  /* Lista di garanzie con filetto superiore */
  .pillars {
    gap: var(--space-l) var(--space-m);
    list-style: none; padding: 0;
    text-align: left;
  }
  .pillars li { border-top: 1px solid var(--accent); padding-top: var(--space-m); }
  .pillars h3 { font-size: var(--step-2); font-weight: 400; margin-bottom: var(--space-xs); }
  .pillars p { color: var(--soft); font-size: var(--step--1); line-height: 1.75; }

  /* ---------- Hero ---------- */
  .hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: min(88svh, 52rem);
    display: grid; place-items: center;
    padding: calc(var(--header-h) + var(--space-xl)) var(--gutter) var(--space-xl);
    text-align: center;
  }
  .hero__glow {
    position: absolute; z-index: -1; inset: -20%;
    background:
      radial-gradient(40% 45% at 30% 35%, rgb(201 168 106 / .28), transparent 70%),
      radial-gradient(35% 40% at 72% 65%, rgb(173 144 144 / .35), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
  }
  .hero__title {
    font-size: var(--step-5);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.015em;
    color: var(--fg);
  }
  .hero__title .line { display: block; overflow: clip; padding-block: .04em .08em; }
  .hero__title .line > span { display: inline-block; }
  .hero .rule { width: 4rem; opacity: .7; margin-inline: auto; }

  .scroll-cue {
    position: absolute; left: 50%; bottom: 1.5rem;
    translate: -50% 0;
    display: grid; justify-items: center; gap: .25rem;
    padding: .5rem 1rem;
    font-size: var(--step--2); letter-spacing: .2em;
    color: var(--soft); text-decoration: none;
  }
  .scroll-cue .icon { font-size: 1rem; }

  /* ---------- Griglia categorie ---------- */
  .tiles { display: grid; grid-template-columns: 1fr 1fr; }
  @media (min-width: 48rem) { .tiles { grid-template-columns: repeat(4, 1fr); } }
  .tile {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; align-content: end;
    min-height: clamp(15rem, 34vw, 26rem);
    padding: var(--space-m);
    color: var(--bianco); text-decoration: none;
    container-type: inline-size;
  }
  .tile .media { position: absolute; inset: 0; z-index: -2; }
  .tile .media img { transition: transform 1.2s var(--ease-out); }
  .tile::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, rgb(40 9 9 / .88) 0%, rgb(40 9 9 / .35) 55%, rgb(40 9 9 / .15) 100%);
  }
  .tile::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgb(40 9 9 / .35);
    opacity: 0; transition: opacity var(--dur-med) var(--ease-out);
  }
  .tile__title { font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 9cqi, 2rem); line-height: 1.1; }
  .tile__cta { display: inline-flex; align-items: center; gap: .5em; margin-top: .6rem; font-size: var(--step--1); letter-spacing: .06em; color: var(--oro-chiaro); }
  .tile__cta .icon { transition: transform var(--dur-med) var(--ease-out); }
  .tile:hover .media img, .tile:focus-visible .media img { transform: scale(1.07); }
  .tile:hover::after, .tile:focus-visible::after { opacity: 1; }
  .tile:hover .tile__cta .icon { transform: translateX(.4em); }
  .tile:focus-visible { outline-offset: -4px; }

  /* ---------- Carosello geografico ---------- */
  .carousel { position: relative; }
  .carousel__track { display: grid; }
  .carousel__slide {
    grid-area: 1 / 1;
    display: grid;
    opacity: 0; visibility: hidden;
    transition: opacity .8s var(--ease-in-out), visibility 0s .8s;
  }
  .carousel__slide.is-active { opacity: 1; visibility: visible; transition: opacity .8s var(--ease-in-out), visibility 0s; z-index: 1; }
  .carousel__slide .media { aspect-ratio: 16 / 10; }
  .carousel__slide .media img { transform: scale(1.08); transition: transform 7s linear; }
  .carousel__slide.is-active .media img { transform: scale(1); }
  .carousel__text { padding: var(--space-xl) var(--gutter); align-self: center; max-width: 36rem; }
  .carousel__count { display: block; font-variant-numeric: tabular-nums; font-size: var(--step--1); letter-spacing: .12em; color: var(--accent); margin-bottom: var(--space-s); }
  @media (min-width: 48rem) {
    .carousel__slide { grid-template-columns: 1fr 1fr; min-height: 32rem; }
    .carousel__slide .media { aspect-ratio: auto; order: 2; }
    .carousel__text { padding: var(--space-xl) clamp(2rem, 5vw, 5rem); justify-self: center; }
  }
  .carousel__controls {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
    padding: .75rem var(--gutter);
    background: var(--vinaccia);
    border-top: 1px solid rgb(201 187 187 / .12);
  }
  .carousel__dots { display: flex; gap: .15rem; }
  .carousel__dot { display: grid; place-items: center; width: 2rem; height: 2.75rem; }
  .carousel__dot::before {
    content: ""; width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--rosa); opacity: .35;
    transition: opacity var(--dur-med), transform var(--dur-med) var(--ease-out);
  }
  .carousel__dot[aria-current="true"]::before { opacity: 1; transform: scale(1.4); background: var(--oro-chiaro); }
  .carousel__btns { display: flex; gap: .5rem; }
  .round-btn {
    display: inline-grid; place-items: center;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    border: 1px solid rgb(201 187 187 / .3);
    color: var(--rosa);
    transition: transform var(--dur-med) var(--ease-out);
  }
  .round-btn:hover { transform: scale(1.08); }
  .round-btn:active { transform: scale(.94); }
  .round-btn .icon { font-size: 1.1rem; }

  /* ---------- Gusti caffè ---------- */
  .flavours { gap: var(--space-s); list-style: none; padding: 0; }
  .flavours li {
    padding: var(--space-m);
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    text-align: center;
  }
  .flavours h3 { font-size: var(--step-1); color: var(--rosa); margin-bottom: .35rem; }
  .flavours p { color: var(--soft); font-size: var(--step--1); }

  /* Etichette 100% della crema */
  .chips { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; list-style: none; padding: 0; }
  .chips li {
    padding: .75rem 1rem; text-align: center;
    border-radius: var(--radius-s);
    border: 1px solid var(--rule);
    font-size: var(--step--1);
  }

  /* ---------- Anteprima catalogo (sfogliabile) ---------- */
  .flipbook {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; place-items: center;
    min-height: clamp(20rem, 50vw, 27rem);
    padding: var(--space-xl) var(--space-l);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-l);
    background: var(--vinaccia);
    border: 1px solid rgb(173 144 144 / .2);
  }
  .flipbook__bg { position: absolute; inset: 0; z-index: -2; }
  .flipbook__bg .media { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity .7s var(--ease-in-out), transform 1.4s var(--ease-out); }
  .flipbook__bg .media.is-active { opacity: 1; transform: none; }
  .flipbook::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 70% at 50% 50%, rgb(40 9 9 / .78), rgb(40 9 9 / .5)); }
  .flipbook__page { transition: opacity .3s ease, transform .3s ease; }
  .flipbook__page.is-turning { opacity: 0; transform: translateY(.5rem); }
  .flipbook__title { font-size: var(--step-4); color: var(--rosa); margin-bottom: var(--space-s); }
  .flipbook__text { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.35; max-width: 28ch; margin-inline: auto; }
  .flipbook__nav { display: flex; justify-content: center; align-items: center; gap: var(--space-l); margin-top: var(--space-l); }
  .flipbook__count { font-size: var(--step--1); letter-spacing: .12em; color: var(--accent); font-variant-numeric: tabular-nums; min-width: 9ch; }

  /* ---------- Mappa ---------- */
  .map { min-height: 24rem; background: var(--vinaccia); }
  .map iframe { width: 100%; height: 100%; min-height: 24rem; border: 0; filter: grayscale(.3) contrast(1.05); }
  .info-list { list-style: none; padding: 0; display: grid; gap: .8rem; color: var(--soft); }
  .info-list li { display: flex; gap: .8rem; align-items: baseline; }
  .info-list .icon { color: var(--accent); translate: 0 .15em; }
  .address { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.3; color: var(--rosa); font-weight: 400; }

  /* ---------- Form ---------- */
  .form { display: grid; gap: var(--space-m); text-align: left; }
  .form__row { display: grid; gap: var(--space-m); }
  @media (min-width: 40rem) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
  .field { display: grid; gap: .45rem; }
  .field__label { font-size: var(--step--1); letter-spacing: .04em; color: var(--soft); font-weight: 700; }
  .field__label .req { color: var(--accent); }
  .input {
    width: 100%;
    min-height: 3.4rem;
    padding: .9rem 1.2rem;
    border-radius: var(--radius-m);
    border: 1px solid rgb(255 255 255 / .22);
    background: var(--vinaccia);
    color: var(--bianco);
    font-size: var(--step-0);
    transition: border-color var(--dur-fast);
  }
  .input::placeholder { color: #B9A7A7; opacity: 1; }
  .input:hover { border-color: rgb(255 255 255 / .4); }
  .input:focus-visible { outline: 2px solid var(--oro-chiaro); outline-offset: 2px; border-color: var(--oro); }
  .input:user-invalid, .was-submitted .input:invalid { border-color: #F2A68F; }
  .field__error { display: none; align-items: center; gap: .4rem; font-size: var(--step--1); color: #F7C1B1; }
  /* L'errore compare solo dopo l'interazione o dopo un tentativo di invio */
  .field:has(:user-invalid) .field__error,
  .was-submitted .field:has(:invalid) .field__error { display: flex; }
  .check {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: .9rem 1rem;
    border-radius: var(--radius-m);
    background: rgb(255 255 255 / .05);
    border: 1px solid rgb(255 255 255 / .08);
    font-size: var(--step--1); color: var(--soft); line-height: 1.55;
  }
  .check input { width: 1.2rem; height: 1.2rem; margin-top: .12rem; flex: none; accent-color: var(--rosa); }
  .check a { color: var(--rosa); }
  .check a:hover { color: var(--bianco); }
  .honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* Messaggio di esito (franchising) */
  .notice {
    display: flex; gap: .9rem; align-items: flex-start;
    padding: 1.1rem 1.25rem; border-radius: var(--radius-m);
    background: rgb(47 90 60 / .35); border: 1px solid rgb(160 210 170 / .35);
    text-align: left; margin-bottom: var(--space-l);
  }
  .notice .icon { font-size: 1.4rem; color: #BFE3C6; flex: none; margin-top: .1rem; }
  .notice--error { background: rgb(140 51 28 / .35); border-color: rgb(247 193 177 / .4); }
  .notice--error .icon { color: #F7C1B1; }

  /* ---------- Toast ---------- */
  .toast {
    position: fixed; left: 50%; bottom: max(1.5rem, env(safe-area-inset-bottom));
    z-index: 120;
    display: flex; align-items: center; gap: .6rem;
    max-width: min(32rem, calc(100% - 2rem));
    padding: .9rem 1.4rem;
    border-radius: var(--radius-pill);
    background: var(--oliva); color: var(--bianco);
    font-size: var(--step--1); font-weight: 700; letter-spacing: .03em;
    box-shadow: var(--shadow-l);
    opacity: 0;
    transform: translate(-50%, 140%);
    transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
    pointer-events: none;
  }
  .toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
  .toast--error { background: var(--ruggine); }
  .toast .icon { font-size: 1.2rem; }

  /* ---------- Torna su ---------- */
  .to-top {
    position: fixed; left: max(1rem, env(safe-area-inset-left)); bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 60;
    display: grid; place-items: center;
    width: 2.9rem; height: 2.9rem; border-radius: 50%;
    background: var(--rosa); color: var(--cacao);
    box-shadow: var(--shadow-m);
    opacity: 0; transform: translateY(1rem) scale(.9);
    pointer-events: none;
    transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  }
  .to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
  .to-top.is-visible:hover { transform: translateY(-3px); }
  .to-top .icon { font-size: 1.1rem; }

  /* ---------- Footer ---------- */
  .site-footer { padding-block: var(--space-xl) var(--space-l); border-top: 1px solid var(--rule); }
  .site-footer__grid { display: grid; gap: var(--space-l); }
  @media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--space-xl); } }
  .site-footer img.footer-logo { height: 2.6rem; width: auto; opacity: .9; margin-bottom: var(--space-m); }
  .site-footer h2 { font-size: var(--step-1); color: var(--rosa); margin-bottom: var(--space-s); font-weight: 400; }
  .site-footer p, .site-footer li { font-size: var(--step--1); color: var(--soft); line-height: 1.8; }
  .site-footer ul { list-style: none; padding: 0; }
  .site-footer .motto { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--fg); line-height: 1.4; margin-bottom: var(--space-s); }
  .site-footer a { text-decoration: none; }
  .site-footer a:hover { color: var(--bianco); text-decoration: underline; }
  .site-footer .closed { color: var(--rosa-500); }
  .site-footer__bottom {
    margin-top: var(--space-xl); padding-top: var(--space-m);
    border-top: 1px solid var(--rule);
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-s);
    font-size: var(--step--2); color: #B9A7A7; letter-spacing: .04em;
  }
}

/* ---------------------------------------------------------------- pages -- */
@layer pages {

  /* Home: watermark SPEZIALE */
  .watermark {
    position: absolute; inset: auto 0 -.12em; z-index: -1;
    display: flex; justify-content: center;
    font-family: var(--font-display); font-style: italic; font-weight: 700;
    font-size: clamp(5.5rem, 19vw, 17rem); line-height: 1;
    color: rgb(255 255 255 / .05);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
  }

  /* Intestazioni delle sezioni prodotto */
  .section-head { max-width: 44rem; margin-inline: auto; text-align: center; }
  .section-head .subtitle { margin-top: .4rem; }
  .section-head .body { margin: var(--space-m) auto 0; }

  /* Franchising */
  .hero-sub {
    position: relative; isolation: isolate; overflow: hidden;
    padding: calc(var(--header-h) + var(--section-pad)) var(--gutter) var(--section-pad);
    text-align: center;
  }
  .advantages { list-style: none; padding: 0; counter-reset: adv; }
  .advantage {
    display: grid; gap: .5rem var(--space-m);
    grid-template-columns: auto 1fr;
    padding-block: var(--space-l);
    border-bottom: 1px solid var(--rule);
  }
  .advantage:last-child { border-bottom: 0; }
  .advantage__num {
    font-family: var(--font-display); font-style: italic;
    font-size: var(--step-3); line-height: 1; color: var(--oro);
    min-width: 2.2ch;
  }
  .advantage :is(h3, h4) { font-size: var(--step-2); color: var(--rosa); font-weight: 400; margin-bottom: .4rem; }
  .advantage p { color: var(--soft); font-size: var(--step-0); }
  .card-xl {
    padding: clamp(1.5rem, 5vw, 4.5rem);
    border-radius: clamp(1.25rem, 3vw, 2.5rem);
    background: var(--vinaccia);
    border: 1px solid rgb(255 255 255 / .06);
    box-shadow: var(--shadow-l);
  }

  /* Privacy */
  .legal { padding-top: calc(var(--header-h) + var(--section-pad)); }
  .legal h1 { font-size: var(--step-4); color: var(--rosa); margin-bottom: var(--space-l); }
  .legal section { padding-block: var(--space-l); border-top: 1px solid var(--rule); }
  .legal h2 { font-size: var(--step-2); color: var(--rosa); margin-bottom: var(--space-s); font-weight: 400; }
  .legal p { color: var(--soft); max-width: var(--measure); }

  /* ==========================================================
     Boutique online — "la dispensa"
     Superficie chiara cipria, prodotti come etichette, carrello
     a pannello. Tutti i colori arrivano dai token di marca.
     ========================================================== */
  .shop {
    --paper: #FBF8F7;
    --paper-2: #F4EEEC;
    --ink: var(--cacao);
    --ink-soft: #6E4B4B;
    --line: rgb(86 54 54 / .14);
    --line-strong: rgb(86 54 54 / .28);
    --bronze: #7A5530;
    --chip-on-bg: var(--cacao);
    --chip-on-fg: var(--seta);
    --focus: var(--cacao);
    background: var(--light-bg);
    color: var(--ink);
  }
  @media (prefers-color-scheme: dark) {
    .shop {
      --paper: #382424;
      --paper-2: #2F1F1F;
      --ink: #F1E7E4;
      --ink-soft: #D3C3C0;
      --line: rgb(241 231 228 / .12);
      --line-strong: rgb(241 231 228 / .26);
      --bronze: var(--oro);
      --chip-on-bg: var(--oro-chiaro);
      --chip-on-fg: var(--vinaccia);
      --focus: var(--oro-chiaro);
    }
  }

  /* ---------- Intestazione editoriale ---------- */
  .shop-hero {
    padding: calc(var(--header-h) + var(--space-xl)) 0 var(--space-xl);
  }
  .shop-hero__grid { display: grid; gap: var(--space-l); align-items: center; }
  @media (min-width: 56rem) { .shop-hero__grid { grid-template-columns: 1.15fr .85fr; gap: var(--space-xl); } }
  .shop-hero .eyebrow { color: var(--bronze); }
  .shop-hero h1 { font-size: var(--step-5); font-weight: 400; line-height: 1.02; letter-spacing: -.02em; }
  .shop-hero__lead { margin-top: var(--space-m); max-width: 46ch; color: var(--ink-soft); font-size: var(--step-1); line-height: 1.55; font-weight: 300; }
  .shop-hero__media {
    position: relative; overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-l) var(--radius-l) var(--radius-l) 6rem;
    box-shadow: var(--shadow-l);
  }
  .shop-hero__media picture { position: absolute; inset: 0; }
  .shop-hero__media img { width: 100%; height: 100%; object-fit: cover; }
  @media (max-width: 55.99rem) { .shop-hero__media { aspect-ratio: 21 / 9; border-radius: var(--radius-l) var(--radius-l) var(--radius-l) 3.5rem; } }

  /* I tre passaggi dell'ordine (una vera sequenza: numerata) */
  .steps {
    list-style: none; padding: 0;
    display: grid; gap: .75rem;
    margin-top: var(--space-l);
    counter-reset: step;
  }
  .steps li {
    counter-increment: step;
    display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; align-items: baseline;
    padding: .9rem 1rem;
    border-radius: var(--radius-m);
    background: var(--paper);
    border: 1px solid var(--line);
    font-size: var(--step--1); line-height: 1.45;
    color: var(--ink-soft);
  }
  .steps li::before {
    content: counter(step);
    grid-row: span 2;
    font-family: var(--font-display); font-style: italic;
    font-size: var(--step-3); line-height: .9; color: var(--bronze);
  }
  .steps strong { color: var(--ink); font-weight: 700; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Su schermi stretti: numero sopra, testo sotto, tre colonne compatte */
  @media (max-width: 39.99rem) {
    .steps { gap: .5rem; }
    .steps li { grid-template-columns: 1fr; padding: .75rem .7rem; font-size: var(--step--2); }
    .steps li::before { grid-row: auto; font-size: var(--step-2); margin-bottom: .15rem; }
    .steps strong { display: block; }
  }

  /* ---------- Barra fissa: ricerca + categorie ---------- */
  .shop-bar {
    position: sticky; top: var(--header-h); z-index: 40;
    padding-block: .8rem .6rem;
    background: color-mix(in srgb, var(--light-bg) 86%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    border-block: 1px solid var(--line);
  }
  .shop-bar__row { display: flex; gap: .75rem; align-items: center; }
  .search { position: relative; flex: 1; }
  .search .icon { position: absolute; left: 1.1rem; top: 50%; translate: 0 -50%; color: var(--ink-soft); font-size: 1.1rem; pointer-events: none; }
  .search input {
    width: 100%; min-height: 3.1rem;
    padding: .7rem 3.2rem .7rem 3rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line-strong);
    background: var(--paper);
    color: var(--ink);
    font-size: var(--step-0);
    transition: border-color var(--dur-fast);
  }
  .search input::placeholder { color: var(--ink-soft); opacity: .85; }
  .search input:hover { border-color: var(--ink-soft); }
  .search input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .search kbd {
    position: absolute; right: .9rem; top: 50%; translate: 0 -50%;
    display: none; place-items: center;
    min-width: 1.6rem; height: 1.6rem; padding-inline: .35rem;
    border-radius: .4rem; border: 1px solid var(--line-strong);
    font: 700 .75rem/1 var(--font-body); color: var(--ink-soft);
  }
  @media (hover: hover) and (min-width: 48rem) { .search kbd { display: grid; } }
  .search input:focus ~ kbd, .search input:not(:placeholder-shown) ~ kbd { opacity: 0; }

  .chips {
    display: flex; gap: .45rem;
    margin-top: .7rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-block: .15rem;
    mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip {
    flex: none; scroll-snap-align: start;
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 2.5rem; padding: .4rem 1rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line-strong);
    background: var(--paper);
    color: var(--ink);
    font-size: var(--step--1);
    white-space: nowrap;
    transition: transform var(--dur-med) var(--ease-out);
  }
  .chip:hover { transform: translateY(-1px); }
  .chip:active { transform: scale(.97); }
  .chip small { font-size: .78em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .chip[aria-pressed="true"] { background: var(--chip-on-bg); color: var(--chip-on-fg); border-color: transparent; }
  .chip[aria-pressed="true"] small { color: inherit; opacity: .8; }
  .chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .swatch {
    width: .7rem; height: .7rem; border-radius: 50%; flex: none;
    background: var(--c, var(--ruggine));
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--line-strong);
  }
  .shop-status { min-height: 1.3em; margin-top: .35rem; font-size: var(--step--1); color: var(--ink-soft); }

  /* ---------- Scaffali (categorie) ---------- */
  .shelves { padding-block: var(--space-l) 10rem; display: grid; gap: var(--space-xl); }
  .shelf {
    scroll-margin-top: calc(var(--header-h) + 9rem);
    content-visibility: auto;
    contain-intrinsic-block-size: auto 900px;
    min-width: 0;
  }
  .shelf__head {
    display: grid; grid-template-columns: auto 1fr auto; gap: .2rem 1rem; align-items: center;
    padding-bottom: var(--space-s);
    margin-bottom: var(--space-m);
    border-bottom: 1px solid var(--line-strong);
  }
  .shelf__head .swatch { width: .9rem; height: .9rem; grid-row: 1; align-self: center; }
  .shelf__head h2 { font-size: var(--step-3); font-weight: 400; color: var(--ink); }
  .shelf__head p { grid-column: 2; font-family: var(--font-display); font-style: italic; color: var(--ink-soft); font-size: var(--step-0); }
  .shelf__count { grid-row: 1 / span 2; grid-column: 3; font-size: var(--step--1); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .shelf__grid { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }

  /* ---------- Etichetta prodotto ---------- */
  .item {
    position: relative; isolation: isolate;
    display: flex; flex-direction: column;
    padding: 1.25rem 1.25rem 1.1rem;
    border-radius: 1.1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    transition: transform var(--dur-med) var(--ease-out);
  }
  /* Ombra che compare in hover (solo opacità) */
  .item::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    box-shadow: 0 18px 40px rgb(40 9 9 / .14), 0 4px 10px rgb(40 9 9 / .06);
    opacity: 0; transition: opacity var(--dur-med) var(--ease-out);
  }
  @media (hover: hover) {
    .item:hover { transform: translateY(-4px); }
    .item:hover::after { opacity: 1; }
  }
  .item__tag {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: var(--step--2); letter-spacing: .04em; color: var(--ink-soft);
    margin-bottom: .55rem;
  }
  .item__tag .swatch { width: .5rem; height: .5rem; box-shadow: none; }
  /* La categoria serve solo quando i risultati di ricerca mescolano gli scaffali */
  .shelves:not(.is-searching) .item__tag { display: none; }
  .item__name { font-size: var(--step-2); font-weight: 400; line-height: 1.1; color: var(--ink); }
  .item__desc { margin-top: .45rem; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6; }
  .item__foot { margin-top: auto; padding-top: var(--space-m); display: grid; gap: .85rem; }
  .item__incart {
    position: absolute; top: .9rem; right: .9rem;
    padding: .2rem .6rem; border-radius: var(--radius-pill);
    background: var(--chip-on-bg); color: var(--chip-on-fg);
    font-size: var(--step--2); font-weight: 700;
    animation: pop .4s var(--ease-out);
  }
  @keyframes pop { from { opacity: 0; transform: scale(.7); } }

  /* Formati: controllo segmentato a un tocco */
  .formats { border: 0; padding: 0; margin: 0; min-width: 0; }
  .formats__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 3px; gap: 3px;
    border-radius: var(--radius-pill);
    background: var(--paper-2);
    border: 1px solid var(--line);
  }
  .formats label { position: relative; }
  .formats input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .formats span {
    display: grid; place-items: center;
    min-height: 2.25rem;
    border-radius: var(--radius-pill);
    font-size: var(--step--1); font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
    pointer-events: none;
  }
  .formats input:checked + span { background: var(--chip-on-bg); color: var(--chip-on-fg); font-weight: 700; box-shadow: var(--shadow-s); }
  .formats input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
  .formats input:not(:checked):hover + span { color: var(--ink); }
  .item__unit {
    display: inline-flex; align-items: center; justify-self: start;
    min-height: 2.25rem; padding-inline: .9rem;
    border-radius: var(--radius-pill); border: 1px dashed var(--line-strong);
    font-size: var(--step--1); color: var(--ink-soft);
  }

  .item__buy { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
  .price { display: block; white-space: nowrap; font-family: var(--font-display); font-size: var(--step-2); line-height: 1; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
  .price-ref { display: block; margin-top: .3rem; font-size: var(--step--2); color: var(--ink-soft); white-space: nowrap; }

  .add {
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 2.75rem; padding: .55rem 1.1rem .55rem .9rem;
    border-radius: var(--radius-pill);
    background: var(--chip-on-bg); color: var(--chip-on-fg);
    font-size: var(--step--1); font-weight: 700; letter-spacing: .02em;
    transition: transform var(--dur-med) var(--ease-out);
  }
  .add::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ruggine); opacity: 0; transition: opacity var(--dur-med) var(--ease-out); }
  @media (hover: hover) { .add:hover { transform: translateY(-2px); } .add:hover::before { opacity: 1; } .add:hover { color: var(--bianco); } }
  .add:active { transform: scale(.95); }
  .add .icon { font-size: 1.1rem; }
  .add__done { display: none; }
  .add.is-added .add__label { display: none; }
  .add.is-added .add__done { display: inline; }
  .add.is-added .icon { animation: spin-in .45s var(--ease-out); }
  @keyframes spin-in { from { transform: rotate(-90deg) scale(.5); opacity: 0; } }

  .empty-state { text-align: center; padding: var(--space-xl) var(--space-m); }
  .empty-state h2 { font-size: var(--step-3); font-weight: 400; }
  .empty-state p { max-width: 38ch; margin: .6rem auto 0; color: var(--ink-soft); }
  .empty-state .btn { margin-top: var(--space-m); }

  /* ---------- Pillola carrello flottante ---------- */
  .cart-pill {
    position: fixed; z-index: 60;
    right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
    display: inline-flex; align-items: center; gap: .7rem;
    min-height: 3.5rem; padding: .5rem .6rem .5rem 1.1rem;
    border-radius: var(--radius-pill);
    background: var(--cacao-deep); color: var(--seta);
    border: 1px solid rgb(230 211 168 / .25);
    box-shadow: var(--shadow-l);
    transition: transform var(--dur-med) var(--ease-out);
  }
  .cart-pill:hover { transform: translateY(-2px); }
  .cart-pill:active { transform: scale(.97); }
  .cart-pill > .icon { font-size: 1.35rem; color: var(--oro-chiaro); }
  .cart-pill__label { font-size: var(--step--1); font-weight: 700; letter-spacing: .02em; }
  .cart-pill__total {
    display: inline-grid; place-items: center;
    min-height: 2.5rem; padding-inline: .95rem;
    border-radius: var(--radius-pill);
    background: var(--oro); color: var(--vinaccia);
    font-family: var(--font-display); font-size: var(--step-0); font-variant-numeric: lining-nums tabular-nums;
  }
  .cart-pill__count {
    position: absolute; top: -.35rem; left: -.35rem;
    min-width: 1.5rem; height: 1.5rem; padding-inline: .3rem;
    display: grid; place-items: center;
    border-radius: var(--radius-pill);
    background: var(--ruggine); color: var(--bianco);
    border: 2px solid var(--light-bg);
    font-size: .72rem; font-weight: 700;
  }
  .cart-pill.is-empty .cart-pill__total { display: none; }
  .cart-pill.is-bumped { animation: bump .5s var(--ease-out); }
  @keyframes bump { 30% { transform: scale(1.06) rotate(-2deg); } 60% { transform: scale(.98); } }
  @media (max-width: 30rem) {
    .cart-pill:not(.is-empty) { left: max(1rem, env(safe-area-inset-left)); justify-content: space-between; }
  }

  /* ---------- Carrello: pannello laterale (dal basso su mobile) ---------- */
  .cart {
    --pad: clamp(1rem, 4vw, 1.5rem);
    position: fixed;
    margin: 0;
    inset: auto 0 0 0;
    width: 100%; max-width: 100%;
    max-height: 90dvh;
    border-radius: 1.5rem 1.5rem 0 0;
    background: var(--paper, #FBF8F7);
    color: var(--ink, var(--cacao));
    box-shadow: var(--shadow-l);
    overflow: hidden;
    transform: translateY(100%);
    transition: transform .5s var(--ease-out), display .5s allow-discrete, overlay .5s allow-discrete;
  }
  @media (min-width: 48rem) {
    .cart {
      inset: 0 0 0 auto;
      width: min(30rem, 100%);
      height: 100dvh; max-height: none;
      border-radius: 1.5rem 0 0 1.5rem;
      transform: translateX(100%);
    }
  }
  .cart[open] { display: flex; flex-direction: column; transform: none; }
  @starting-style { .cart[open] { transform: translateY(100%); } }
  @media (min-width: 48rem) { @starting-style { .cart[open] { transform: translateX(100%); } } }
  .cart::backdrop { background: rgb(40 9 9 / .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

  .cart__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: var(--pad); border-bottom: 1px solid var(--line); }
  .cart__head h2 { font-size: var(--step-3); font-weight: 400; }
  .cart__head p { font-size: var(--step--1); color: var(--ink-soft); }
  .cart__close { color: var(--ink); border-color: var(--line-strong); }
  .cart__items { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .5rem var(--pad); list-style: none; margin: 0; }
  .cart-line {
    display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center;
    padding-block: 1rem;
    border-bottom: 1px solid var(--line);
    animation: line-in-cart .35s var(--ease-out);
  }
  @keyframes line-in-cart { from { opacity: 0; transform: translateX(.75rem); } }
  .cart-line__name { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); line-height: 1.2; }
  .cart-line__meta { font-size: var(--step--1); color: var(--ink-soft); }
  .cart-line__total { grid-column: 2; grid-row: 1; text-align: right; font-family: var(--font-display); font-size: var(--step-1); font-variant-numeric: lining-nums tabular-nums; }
  .stepper {
    grid-column: 1; display: inline-flex; align-items: center; justify-self: start;
    border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  }
  .stepper button { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--ink); }
  .stepper button:hover { background: var(--paper-2); }
  .stepper button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  .stepper output { min-width: 2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
  .cart__empty { display: grid; justify-items: center; gap: .6rem; text-align: center; padding: var(--space-xl) var(--space-m); color: var(--ink-soft); }
  .cart__empty .icon { font-size: 2.5rem; color: var(--bronze); stroke-width: 1.2; }
  .cart__empty strong { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); font-weight: 400; color: var(--ink); }

  .cart__foot { padding: var(--pad); border-top: 1px solid var(--line); background: var(--paper-2); display: grid; gap: .9rem; }
  .switch { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; font-size: var(--step--1); }
  .switch input {
    appearance: none; flex: none; position: relative;
    width: 2.75rem; height: 1.6rem; border-radius: var(--radius-pill);
    background: var(--line-strong); cursor: pointer;
  }
  .switch input::after {
    content: ""; position: absolute; top: .2rem; left: .2rem;
    width: 1.2rem; height: 1.2rem; border-radius: 50%;
    background: var(--bianco); box-shadow: var(--shadow-s);
    transition: transform var(--dur-med) var(--ease-out);
  }
  .switch input:checked { background: var(--cacao); }
  .switch input:checked::after { transform: translateX(1.15rem); }
  .switch input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .pickup { display: flex; gap: .75rem; align-items: center; padding: .75rem .9rem; border-radius: var(--radius-m); background: var(--paper); border: 1px solid var(--line); }
  .pickup .icon { font-size: 1.3rem; color: var(--bronze); }
  .pickup small { display: block; font-size: var(--step--2); color: var(--ink-soft); letter-spacing: .04em; }
  .pickup p { font-weight: 700; font-size: var(--step--1); }
  .cart__sum { display: grid; gap: .25rem; }
  .cart__sum div { display: flex; justify-content: space-between; font-size: var(--step--1); color: var(--ink-soft); }
  .cart__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: .4rem; }
  .cart__total span { font-size: var(--step--1); color: var(--ink-soft); }
  .cart__total output { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
  .cart__note { font-size: var(--step--2); color: var(--ink-soft); text-align: center; }
  .btn--whatsapp { --btn-bg: #1F6B43; --btn-fg: var(--bianco); --btn-hover: #17573A; }
}

/* ------------------------------------------------------------ utilities -- */
@layer utilities {
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .mt-s { margin-top: var(--space-s); }
  .mt-m { margin-top: var(--space-m); }
  .mt-l { margin-top: var(--space-l); }
  .mt-xl { margin-top: var(--space-xl); }
  .mb-l { margin-bottom: var(--space-l); }
  .mb-xl { margin-bottom: var(--space-xl); }
  .accent { color: var(--accent); }
}

/* --------------------------------------------------------------- motion -- */
/* Tutto ciò che si muove da solo vive qui ed è condizionato a
   prefers-reduced-motion: no-preference. */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {

    /* Transizioni tra pagine (View Transitions cross-document) */
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: vt-out .32s var(--ease-in-out) both; }
    ::view-transition-new(root) { animation: vt-in .55s var(--ease-out) .05s both; }
    @keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
    @keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }

    /* Hero: la frase affiora riga per riga, i filetti si disegnano */
    .hero__title .line > span { animation: line-in 1.15s var(--ease-out) both; animation-delay: calc(.12s + var(--i, 0) * .11s); }
    @keyframes line-in { from { transform: translateY(108%) rotate(2deg); } }
    .hero .rule { animation: rule-in 1.1s var(--ease-out) .05s both; }
    .hero .rule:last-of-type { animation-delay: .75s; }
    @keyframes rule-in { from { transform: scaleX(0); opacity: 0; } }
    .hero__glow { animation: glow-drift 22s var(--ease-in-out) infinite alternate; }
    @keyframes glow-drift { to { transform: translate3d(6%, -4%, 0) rotate(8deg) scale(1.08); } }
    .scroll-cue { animation: fade-in 1s ease 1.2s both; }
    .scroll-cue .icon { animation: nudge 2.4s var(--ease-in-out) 2s infinite; }
    @keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateY(5px); } }
    @keyframes fade-in { from { opacity: 0; } }

    /* Foto d'apertura: si assesta dopo il titolo */
    .settle img { animation: settle 2.2s var(--ease-out) .3s both; }
    @keyframes settle { from { transform: scale(1.12); } }

    /* Comparsa allo scroll: scroll-driven animations native */
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      .reveal {
        animation: reveal-up var(--ease-out) both;
        animation-timeline: view();
        animation-range: entry calc(4% + var(--i, 0) * 8%) entry calc(62% + var(--i, 0) * 8%);
      }
      @keyframes reveal-up { from { opacity: 0; transform: translateY(2.25rem); } }

      /* Parallax delicato sulle foto */
      .parallax picture {
        position: absolute; inset: -9% 0;
        animation: parallax linear both;
        animation-timeline: view();
        animation-range: cover;
      }
      @keyframes parallax { from { transform: translateY(-6%); } to { transform: translateY(6%); } }

      /* La scritta SPEZIALE scivola mentre si scorre */
      .watermark {
        animation: drift linear both;
        animation-timeline: view();
        animation-range: cover;
      }
      @keyframes drift { from { transform: translateX(8%); } to { transform: translateX(-8%); } }

      /* Il fondo della hero si dissolve quando esce */
      .hero__title { animation: hero-out linear both; animation-timeline: view(); animation-range: exit 10% exit 90%; }
      @keyframes hero-out { to { opacity: .15; transform: translateY(-3rem) scale(.98); } }
    }

    /* Fallback IntersectionObserver per i browser senza scroll-driven animations */
    @supports not ((animation-timeline: view()) and (animation-range: entry)) {
      .js .reveal {
        opacity: 0; transform: translateY(2rem);
        transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
        transition-delay: calc(var(--i, 0) * 90ms);
      }
      .js .reveal.is-visible { opacity: 1; transform: none; }
    }
  }

  /* Movimento ridotto: niente autoplay visivo, niente zoom continui */
  @media (prefers-reduced-motion: reduce) {
    .carousel__slide, .carousel__slide.is-active { transition: none; }
    .carousel__slide .media img, .carousel__slide.is-active .media img { transform: none; transition: none; }
    .flipbook__bg .media { transform: none; transition: opacity .2s linear; }
    .btn::after { display: none; }
  }
}