/* Pianificio: stile comune alle pagine offerta, grazie, area e privacy.
   Mobile first (375 px). Direzione visiva "Bottega" (docs/branding/01-studio-nome-e-dominio.md):
   carta, inchiostro, un solo accento pomodoro, salvia per le conferme, grano come evidenziatore.
   Font: Fraunces per i titoli, Figtree per i testi.

   Regola dei raggi (unica): controlli 14 px, card 20 px, etichette a pillola.
   Tutti i colori e i tempi passano da questo blocco :root. */

:root {
  /* Colori Pianificio (Bottega) */
  --c-sfondo: #F7F1E6;          /* carta */
  --c-superficie: #FFFCF6;
  --c-superficie-2: #EFE6D6;
  --c-inchiostro: #1E1A16;      /* 15,4:1 su carta */
  --c-testo: #2A241E;
  --c-testo-2: #5E554B;         /* 6,5:1 su carta */
  --c-bordo: #E2D6C3;
  --c-bordo-controllo: #8C8173; /* 3,4:1 su carta */
  --c-accento: #B83A22;         /* pomodoro, 5,1:1 su carta */
  --c-accento-hover: #9C2F1A;
  --c-accento-tenue: #F6E3DC;
  --c-accento-testo: #8E2B17;   /* testo pomodoro su fondo tenue */
  --c-accento-su-scuro: #E8816A;/* icone e link su inchiostro, 6,4:1 */
  --c-su-accento: #FFFFFF;      /* 5,7:1 sul pomodoro */
  --c-salvia: #4E6B55;
  --c-salvia-tenue: #E4EBE3;
  --c-salvia-testo: #3F5946;
  --c-grano: #E8B84A;           /* solo sotto testo inchiostro */
  --c-grano-tenue: #F5DFA5;
  --c-errore: #A3261A;
  --c-errore-tenue: #FBE9E5;
  --c-su-scuro: #F7F1E6;
  --c-su-scuro-2: #C9BFB0;
  --c-placeholder: #6F6559;

  /* Font (oggi da Google Fonts; prima del lancio self-hosted, vedi LEGGIMI.md) */
  --font-titoli: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-testo: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Forme e ombre */
  --r-controllo: 14px;
  --r-card: 20px;
  --r-pill: 999px;
  --ombra-card: 0 1px 2px rgb(30 26 22 / 0.05), 0 12px 32px -14px rgb(30 26 22 / 0.2);
  --ombra-alta: 0 2px 4px rgb(30 26 22 / 0.06), 0 24px 48px -20px rgb(30 26 22 / 0.32);

  /* Impaginazione */
  --gutter: 20px;
  --larghezza: 1120px;

  /* Colori del negozio (li sovrascrive il JavaScript con i dati del negozio) */
  --n-primario: #2F3A4A;
  --n-secondario: #C9CED6;
  --n-sfondo: #FFFFFF;
  --n-testo: #1C1E21;
  --n-su-primario: #FFFFFF;
  --n-primario-testo: #2F3A4A;

  /* Scala del movimento (transitions-dev, _root.css): copiata una volta qui, non importata */
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --ease-linear: linear;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --distance-micro: 4px;
  --distance-small: 6px;
  --distance-base: 8px;
  --distance-medium: 12px;
  --distance-large: 30px;
  --scale-large: 0.96;
  --scale-medium: 0.97;
  --scale-small: 0.98;
  --scale-tiny: 0.99;
  --blur-small: 2px;
  --blur-medium: 3px;
  --blur-large: 8px;
  /* Icon swap */
  --icon-swap-dur: 250ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  /* Texts reveal */
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Success check */
  --check-opacity-dur: 500ms;
  --check-rotate-dur: 500ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 500ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 500ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  /* Skeleton */
  --pulse-dur: 1000ms;
  --pulse-min: 0.5;
  /* Accordion */
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-chevron: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Error state shake */
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-dur: 280ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; scroll-padding-top: 76px; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--c-sfondo);
  color: var(--c-testo);
  font-family: var(--font-testo);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main { flex: 1; }
h1, h2, h3, p, ol, ul, figure, dl, dd, blockquote { margin: 0; }
h1, h2, h3 {
  font-family: var(--font-titoli);
  font-weight: 600;
  color: var(--c-inchiostro);
  letter-spacing: -0.015em;
  line-height: 1.12;
  text-wrap: balance;
}
p { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--c-accento); text-underline-offset: 3px; }
a:hover { color: var(--c-accento-hover); }
:focus-visible { outline: 3px solid var(--c-accento); outline-offset: 3px; }
/* I titoli ricevono il fuoco solo dallo script (tabindex -1), per i lettori di schermo: niente cornice */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salta {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  padding: 12px 16px; border-radius: var(--r-controllo);
  background: var(--c-inchiostro); color: var(--c-su-scuro); font-weight: 600; text-decoration: none;
}
.salta:focus { top: 12px; color: var(--c-su-scuro); }
.contenitore { width: 100%; max-width: var(--larghezza); margin-inline: auto; padding-inline: var(--gutter); }
.stretto { max-width: 760px; }
.icona { width: 22px; height: 22px; flex: none; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Testata e marchio testuale ---------- */
.testata { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.marchio {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-titoli); font-weight: 600; font-size: 1.5rem; line-height: 1;
  letter-spacing: -0.03em; color: var(--c-inchiostro); text-decoration: none;
}
.marchio__i { color: var(--c-accento); }
.testata__nota {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; font-weight: 600; color: var(--c-testo-2);
}
.testata__nota .icona { width: 16px; height: 16px; color: var(--c-salvia); }
.avviso-mock {
  background: var(--c-inchiostro); color: var(--c-su-scuro); font-size: 0.875rem; line-height: 1.4;
  padding: 10px var(--gutter); text-align: center;
}
.avviso-mock strong { color: var(--c-grano); }

/* ---------- Testi ricorrenti ---------- */
.occhiello {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-testo-2);
}
.occhiello::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accento); }
.evidenzia {
  background: linear-gradient(transparent 58%, var(--c-grano-tenue) 58%, var(--c-grano-tenue) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-inline: 2px;
}
.nota { font-size: 0.875rem; line-height: 1.5; color: var(--c-testo-2); }

/* ---------- Pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 12px 22px;
  border: 1.5px solid transparent; border-radius: var(--r-controllo);
  font-family: var(--font-testo); font-weight: 650; font-size: 1.0625rem; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--duration-quick) var(--ease-out),
    border-color var(--duration-quick) var(--ease-out),
    transform var(--duration-quick) var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(var(--scale-tiny)); }
.btn--primario { background: var(--c-accento); color: var(--c-su-accento); }
.btn--primario:hover { background: var(--c-accento-hover); color: var(--c-su-accento); }
.btn--secondario { background: var(--c-superficie); color: var(--c-inchiostro); border-color: var(--c-bordo-controllo); }
.btn--secondario:hover { border-color: var(--c-inchiostro); color: var(--c-inchiostro); }
.btn--grande { width: 100%; min-height: 58px; font-size: 1.125rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.65; cursor: progress; }
.btn .icona { width: 20px; height: 20px; }
.btn .icona--freccia { transition: transform var(--duration-fast) var(--ease-smooth-out); }
.btn:hover .icona--freccia { transform: translateX(3px); }
.link-azione {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px;
  background: none; border: 0; color: var(--c-accento); font-weight: 600; font-size: 0.9375rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.link-azione:hover { color: var(--c-accento-hover); }

/* Rotella di attesa dentro un pulsante */
.rotella {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent;
  animation: gira calc(var(--duration-very-slow) * 2) var(--ease-linear) infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Card ---------- */
.blocco {
  min-width: 0; padding: 22px 20px;
  border: 1px solid var(--c-bordo); border-radius: var(--r-card);
  background: var(--c-superficie);
}
.blocco h2 { font-size: 1.375rem; }
.blocco h3 { font-size: 1.125rem; }
.blocco__intro { margin-top: 6px; font-size: 0.9375rem; line-height: 1.5; color: var(--c-testo-2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-size: 0.8125rem; font-weight: 650; line-height: 1.3;
  background: var(--c-superficie-2); color: var(--c-testo);
}
.chip .icona { width: 16px; height: 16px; }
.chip--salvia { background: var(--c-salvia-tenue); color: var(--c-salvia-testo); }
.chip--accento { background: var(--c-accento-tenue); color: var(--c-accento-testo); }

/* ---------- Negozio (colori del negozio solo per logo e copertine) ---------- */
.negozio-logo {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; overflow: hidden;
  border-radius: var(--r-controllo); background: var(--n-primario); color: var(--n-su-primario);
  font-family: var(--font-titoli); font-weight: 700; font-size: 1.375rem;
}
.negozio-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

/* ---------- Telefono (stesso componente dell'anteprima) ---------- */
.telefono {
  width: 100%; padding: 8px;
  border-radius: 34px; background: var(--c-inchiostro); box-shadow: var(--ombra-alta);
}
.telefono__schermo {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: 27px; background: var(--n-sfondo); color: var(--n-testo);
}

/* ---------- Messaggi di stato (errore, link non valido) ---------- */
.messaggio { padding-block: 40px 72px; }
.messaggio > * { max-width: 620px; }
.messaggio__icona {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--c-superficie-2); color: var(--c-inchiostro);
}
.messaggio.is-errore .messaggio__icona { background: var(--c-errore-tenue); color: var(--c-errore); }
.messaggio h1 { margin-top: 18px; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.375rem); }
.messaggio__testo { margin-top: 12px; font-size: 1.125rem; line-height: 1.5; color: var(--c-testo); }
.messaggio__azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ---------- Scheletro di caricamento (skeleton loader di transitions-dev) ---------- */
.scheletro { display: grid; gap: 14px; padding-block: 24px 48px; }
.osso { border-radius: var(--r-controllo); background: var(--c-superficie-2); }
.osso--chip { width: 180px; height: 28px; border-radius: var(--r-pill); }
.osso--titolo { width: min(92%, 620px); height: 44px; }
.osso--titolo-2 { width: min(70%, 460px); height: 44px; }
.osso--riga { width: min(80%, 520px); height: 18px; }
.osso--blocco { width: 100%; height: 220px; border-radius: var(--r-card); }
.scheletro.is-pulsing > * { animation: t-skel-pulse var(--pulse-dur) ease-in-out infinite; }
.scheletro.is-pulsing > *:nth-child(2n) { animation-delay: calc(var(--pulse-dur) / 6); }
@keyframes t-skel-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: var(--pulse-min); }
}
.appare { animation: appare var(--duration-slow) var(--ease-smooth-out) both; }
@keyframes appare {
  from { opacity: 0; filter: blur(var(--blur-small)); }
  to   { opacity: 1; filter: blur(0); }
}

/* ---------- Texts reveal (transitions-dev) ---------- */
.t-stagger-line {
  display: block; opacity: 0; transform: translateY(var(--stagger-distance)); filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
.t-stagger-line--3 { transition-delay: calc(var(--stagger-stagger) * 2); }
.t-stagger-line--4 { transition-delay: calc(var(--stagger-stagger) * 3); }
.t-stagger.is-shown .t-stagger-line { opacity: 1; transform: translateY(0); filter: blur(0); }
.chip.t-stagger-line { display: flex; width: fit-content; }
.occhiello.t-stagger-line { display: flex; }

/* ---------- Icon swap (transitions-dev) per i pulsanti Copia ---------- */
.t-icon-swap { position: relative; display: inline-grid; }
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  display: grid; place-items: center;
  transition:
    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
    filter    var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1; filter: blur(0); transform: scale(1);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0; filter: blur(var(--icon-swap-blur)); transform: scale(var(--icon-swap-start-scale));
}

/* ---------- Success check (transitions-dev) ---------- */
.t-success-check {
  display: inline-block; transform-origin: center; opacity: 0;
  will-change: transform, opacity, filter;
}
.t-success-check svg { display: block; overflow: visible; }
.t-success-check svg path { stroke-dasharray: 26; stroke-dashoffset: 26; }
.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
}
.t-success-check[data-state="in"] svg path {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
}
@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate { from { transform: rotate(var(--check-rotate-from)); } to { transform: rotate(0deg); } }
@keyframes t-check-blur { from { filter: blur(var(--check-blur-from)); } to { filter: blur(0); } }
@keyframes t-check-bob { from { translate: 0 var(--check-y-amount); } to { translate: 0 0; } }
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

/* ---------- Error state shake (transitions-dev) ---------- */
.t-shake.is-shaking { animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear; }
@keyframes t-input-shake {
  0%      { transform: translateX(0);                                 animation-timing-function: var(--shake-ease); }
  28.57%  { transform: translateX(var(--shake-distance));             animation-timing-function: var(--shake-ease); }
  57.14%  { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57%  { transform: translateX(var(--shake-overshoot));            animation-timing-function: var(--shake-ease); }
  100%    { transform: translateX(0); }
}

/* ---------- Avviso breve ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 40;
  width: min(92vw, 440px); padding: 12px 16px; border-radius: var(--r-controllo);
  background: var(--c-inchiostro); color: var(--c-su-scuro); font-size: 0.9375rem; line-height: 1.4; box-shadow: var(--ombra-card);
  opacity: 0; visibility: hidden; transform: translate(-50%, var(--distance-base));
  transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out), visibility 0s linear var(--duration-fast);
}
.toast.is-visibile {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out), visibility 0s;
}

/* ---------- Piede ---------- */
.piede { border-top: 1px solid var(--c-bordo); font-size: 0.875rem; color: var(--c-testo-2); }
.piede .contenitore {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px;
  padding-block: 16px calc(16px + env(safe-area-inset-bottom));
}
.piede a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-testo-2); }
.piede a:hover { color: var(--c-inchiostro); }

@media (min-width: 960px) {
  :root { --gutter: 32px; }
  .blocco { padding: 28px; }
}

/* ---------- Meno movimento: tutto fermo o quasi istantaneo ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .t-stagger-line { transition: none !important; }
  .t-icon-swap .t-icon { transition: none !important; }
  .t-success-check { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
  .t-shake.is-shaking { animation: none !important; }
  .scheletro.is-pulsing > * { animation: none !important; }
  .rotella { animation: none !important; border-right-color: currentColor; opacity: 0.6; }
  .appare { animation: none !important; }
}