/* cdp-bottega.css — layer finale (bottega-f1, 10/11/2026).
   Un solo gutter, bersagli >= 44 pt, bottone della campagna protagonista.
   Caricato per ultimo da BaseLayout: vince sugli strati precedenti senza toccarli.
   Animazioni: solo transform/opacity; con reduced-motion niente movimento. */
:root { --cdp-g: 20px; --cdp-gap: 12px; --cdp-spring: cubic-bezier(.34, 1.36, .64, 1); --cdp-ease: cubic-bezier(.2, .8, .2, 1); }
@media (min-width: 410px) { :root { --cdp-g: 24px; } }

/* ── Header: stesso gutter della pagina, 3 icone 44×44 a passo 44 ── */
@media (max-width: 899.98px) {
  html body.cinema .hdr .hdr__in { width: auto !important; max-width: none !important; margin-inline: var(--cdp-g) !important; padding-inline: 0 !important; }
  html body.cinema .hdr .hdr__tools { gap: 0 !important; margin: 0 !important; }
  html body.cinema .hdr .hdr__search,
  html body.cinema .hdr .tool-btn,
  html body.cinema .hdr .hdr__burger { width: 44px !important; height: 44px !important; min-width: 44px !important; flex: 0 0 44px !important; margin: 0 !important; box-sizing: border-box !important; align-self: center !important; }
  html body.cinema .hdr .hdr__search { box-shadow: none !important; background: transparent !important; border-color: transparent !important; }
  html body.cinema .hdr .hdr__brand { min-height: 44px; margin-left: 0 !important; }
}
html body.cinema .hdr .hdr__search { min-width: 44px; min-height: 44px; }

/* ── Home: hero ── */
@media (max-width: 599.98px) {
  html body.cinema[data-page=home] .alba .alba__in { padding-inline: var(--cdp-g) !important; align-items: stretch !important; }
  html body.cinema[data-page=home] .alba .alba__title { margin-inline: 0 !important; }
  /* D1 · tile: due colonne uguali, gap uguale nei due sensi, contenuto centrato */
  html body.cinema[data-page=home] .alba .alba__tiles { width: auto !important; max-width: none !important; margin-inline: 0 !important; align-self: stretch !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: var(--cdp-gap) !important; margin-bottom: 20px !important; }
  html body.cinema[data-page=home] .alba .alba__tile { padding: 12px 8px !important; justify-content: center !important; align-items: center !important; text-align: center !important; margin: 0 !important; }
  html body.cinema[data-page=home] .alba .alba__tile > * { margin-block: 0 !important; }
  /* D4/D8 · pila: bottone della campagna per primo, a larghezza piena, 56 pt */
  html body.cinema[data-page=home] .alba .alba__badge { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: var(--cdp-gap) !important;
    box-sizing: border-box !important; width: calc(100% + 2 * var(--cdp-g)) !important; margin-inline: calc(-1 * var(--cdp-g)) !important; padding: 16px var(--cdp-g) 16px !important; }
  html body.cinema[data-page=home] .alba .alba__in > .alba__badge:is(:has(.xmas-cta), :has(.camp-cta)) { width: calc(100% + 2 * var(--cdp-g)) !important; margin: 0 calc(-1 * var(--cdp-g)) !important; padding: 16px var(--cdp-g) 16px !important; align-self: center !important; }
  html body.cinema[data-page=home] .alba .alba__badge > .xmas-cta,
  html body.cinema[data-page=home] .alba .alba__badge > .camp-cta { order: -1; position: relative !important; inset: auto !important; margin: 0 !important; width: 100% !important; max-width: none !important;
    min-height: 56px !important; height: 56px !important; box-sizing: border-box !important; padding: 0 20px !important; justify-content: center !important; align-items: center !important; font-size: 1.06rem !important; transform: none; }
  html body.cinema[data-page=home] .alba .alba__badge > .openbadge { width: 100% !important; margin: 0 !important; padding: 0 !important; align-items: stretch !important; }
  html body.cinema[data-page=home] .alba .openbadge__label { width: 100% !important; align-items: center !important; gap: 2px !important; }
  html body.cinema[data-page=home] .alba .openbadge__sub { margin: 0 0 var(--cdp-gap) !important; }
  /* D5 · «Come arrivare»: secondario, 44 pt, larghezza piena, padding simmetrico */
  html body.cinema[data-page=home] .alba .alba__badge:is(:has(.xmas-cta), :has(.camp-cta)) .openbadge__hint,
  html body.cinema[data-page=home] .alba .openbadge__hint { align-self: stretch !important; width: 100% !important; box-sizing: border-box !important; height: 44px !important; min-height: 44px !important;
    margin: 0 !important; padding: 0 16px !important; justify-content: center !important; align-items: center !important; gap: 8px !important;
    background: transparent !important; color: var(--accent-deep, #8a3a12) !important; border: 1.5px solid color-mix(in srgb, var(--accent, #c4501c) 45%, transparent) !important; border-radius: 999px !important; box-shadow: none !important; font-size: .98rem !important; animation: none !important; }
  /* D6 · Recensisci: impilati, larghezza piena, stessa altezza */
  html body.cinema[data-page=home] .revband .revband__in { padding-inline: var(--cdp-g) !important; }
  html body.cinema[data-page=home] .revband .alba__rev { width: 100% !important; max-width: none !important; margin-inline: 0 !important; flex-direction: column !important; gap: var(--cdp-gap) !important; }
  html body.cinema[data-page=home] .revband .alba__rev-b { width: 100% !important; height: 48px !important; min-height: 48px !important; padding-block: 0 !important; box-sizing: border-box !important; white-space: nowrap;
    flex-direction: row !important; justify-content: center !important; align-items: center !important; gap: 10px !important; padding-inline: 16px !important; font-size: 1rem !important; }
  html body.cinema[data-page=home] .revband .alba__rev-lbl { font-size: 1rem !important; line-height: 1.2 !important; }
  html body.cinema[data-page=home] .revband .alba__rev-stars { align-items: center; }
}

/* ── Bersagli >= 44 pt (footer, social, link-bottone) ── */
html body.cinema .ftr__links a, html body.cinema .ftr__links button { min-height: 44px !important; padding-block: 0 !important; display: flex; align-items: center; box-sizing: border-box; }
html body.cinema .ftr__social a { width: 44px !important; height: 44px !important; }
html body.cinema .ftr__social { gap: 4px; }
html body.cinema .ftr__panel--visit a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
html body.cinema .cv__sub, html body.cinema .cv__allyt { display: inline-flex !important; align-items: center; min-height: 44px; box-sizing: border-box; }
html body.cinema .stay__consent { min-height: 44px; }
html body.cinema .hdr__brand { min-height: 44px; }
@media (min-width: 900px) { html body.cinema .hdr .hdr__search { width: 44px !important; height: 44px !important; } }

@media (prefers-reduced-motion: reduce) {
  html body.cinema .alba__tile .ic, html body.cinema .xmas-cta, html body.cinema .xmas-cta * , html body.cinema .camp-cta * { animation: none !important; }
}

/* ── Shop (dialog #nat-ordine e pagina /bottega): niente troncamenti, bersagli 44, chip simmetrici ── */
#nat-ordine .nr__d, #nat-ordine .nr__n, #nat-ordine .nr__ft, #nat-ordine .nr__al, #nat-ordine .nr__gt,
#nat-ordine .no__list > li.nr .nr__n, #nat-ordine .no__list > li.nr .nr__d, #nat-ordine .no__list > li.nr .nr__gt, #nat-ordine .no__list > li.nr .nr__al,
html body #nat-ordine [data-sec] .no__list > li.nr[data-grp] .nr__d, html body #nat-ordine [data-sec] .no__list > li.nr[data-grp] .nr__n, html body #nat-ordine [data-sec] .no__list > li.nr[data-grp] .nr__al:not([hidden]),
html body #nat-ordine .no__list > li.nr:not([data-grp="pan"]):not(.is-gt) .nr__n, html body #nat-ordine .no__list > li.nr:not([data-grp="pan"]) .nr__gt,
#nat-ordine .no__side .ct__r.ct__rx .ct__n, #nat-ordine .no__msg {
  display: block !important; -webkit-line-clamp: unset !important; line-clamp: none !important; overflow: visible !important; text-overflow: clip !important; height: auto !important; max-height: none !important; }
#nat-ordine .nr__fi--t, #nat-ordine .no__gmsg, #nat-ordine .no__cpln b, #nat-ordine .no__tot small, #nat-ordine .no__totl {
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
/* avviso «Aggiunto»: il nome va a capo, mai «…» */
#nat-ordine .no__addt .no__addtt { white-space: normal !important; }
#nat-ordine .no__addt .no__addtt > span { overflow: visible !important; text-overflow: clip !important; white-space: normal !important; overflow-wrap: anywhere; }
/* chip dei gusti: una riga ciascuno, stessa altezza (44), simmetrici */
#nat-ordine .ngs__b { min-height: 44px !important; white-space: nowrap !important; box-sizing: border-box !important; padding-block: 0 !important; line-height: 1.2 !important; }
/* mobile: due colonne uguali; con tre gusti quello in evidenza prende la riga intera (simmetria sull'asse centrale) */
@media (max-width: 599.98px) {
  html body #nat-ordine li.nr[data-grp="pan"] .ngs__o { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  html body #nat-ordine li.nr[data-grp="pan"] .ngs__o > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  html body #nat-ordine .no__hgc { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  html body #nat-ordine .no__hgc > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 600px) { html body #nat-ordine .no__hgc { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } }
html body #nat-ordine .no__hg { min-height: 48px !important; height: 48px !important; white-space: nowrap !important; box-sizing: border-box !important; margin: 0 !important; width: 100% !important; justify-content: center !important; padding-block: 0 !important; }
html body #nat-ordine [data-bxsadd], html body #nat-ordine [data-bxsno] { min-height: 44px !important; box-sizing: border-box !important; }
/* QC 10/11: a 1440 la colonna della scheda è stretta e il numerino «1» usciva dal chip. Tre colonne solo se c'è posto
   per etichetta + numerino (container query sulla scheda dei gusti), altrimenti 2+1 come su mobile. */
html body #nat-ordine li.nr[data-grp="pan"] .ngs { container-type: inline-size; container-name: ngs; }
html body #nat-ordine .ngs__b { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding-inline: 10px !important; }
html body #nat-ordine .ngs__q { flex: none; }
@media (min-width: 600px) {
  html body #nat-ordine li.nr[data-grp="pan"] .ngs__o { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  html body #nat-ordine li.nr[data-grp="pan"] .ngs__o > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}
@container ngs (min-width: 500px) {
  html body #nat-ordine li.nr[data-grp="pan"] .ngs__o { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html body #nat-ordine li.nr[data-grp="pan"] .ngs__o > :first-child:nth-last-child(odd) { grid-column: auto; }
}
/* bersagli >= 44 anche sul desktop: percorso, categorie, confezioni, allergeni */
#nat-ordine .no__path button, #nat-ordine .no__chips a, #nat-ordine .no__giftsw, #nat-ordine details > summary { min-height: 44px !important; box-sizing: border-box !important; }
#nat-ordine .no__chips a, #nat-ordine .no__giftsw, #nat-ordine details > summary { display: inline-flex !important; align-items: center !important; }
#nat-ordine details > summary { display: flex !important; }
#nat-ordine .ngs__b { height: 48px !important; min-height: 48px !important; }
html body #nat-ordine .nr__st .nr__b { min-width: 44px !important; width: 44px !important; height: 44px !important; min-height: 44px !important; box-sizing: border-box !important; }
/* QC 10/11: la regola sopra stringeva a 44px anche il bottone «Aggiungi» (pillola, testo tagliato «ggiung»): torna largo quanto il testo, 100% sul telefono */
html body #nat-ordine .no__list > li.nr .nr__st.is-z .nr__b--p { width: auto !important; min-width: 92px !important; }
@media (max-width: 767px) { html body #nat-ordine .no__list > li.nr .nr__st.is-z .nr__b--p { width: 100% !important; } }
html body #nat-ordine .ct__rm, html body #nat-ordine .ct__alk, html body #nat-ordine .no__cpla, html body #nat-ordine .no__addt .no__addg { min-height: 44px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; }
html body #nat-ordine .no__addt .no__addx { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; }

/* ── F2 motion: solo transform/opacity, poche animazioni in corso, le decorative girano solo quando si vedono ── */
/* riflesso del bottone della campagna: transform invece di left */
/* (il riflesso usa ora xmSheen di cdp-ui.css, convertito a translate) */
/* tile e dock: icone ferme (8 animazioni infinite in meno) */
html body.cinema[data-page=home] .alba__tile .ic, html body.cinema[data-page=home] .glass-dock__btn .ic { animation: none !important; }
/* stelle di «Recensisci»: animavano fill (non composto) → ferme, nel colore pieno */
html body.cinema[data-page=home] .revband .alba__rev-st { animation: none !important; fill: #d99a1e !important; }
/* decorative infinite: in pausa finché non entrano nello schermo (cdp-bottega.js mette data-cdp-vis) */
html body.cinema .door__visual img, html body.cinema img.cv__poster, html body.cinema .pdf-layer__svg circle { animation-play-state: paused !important; }
html body.cinema [data-cdp-vis] .door__visual img, html body.cinema .door__visual[data-cdp-vis] img, html body.cinema img.cv__poster[data-cdp-vis], html body.cinema .pdf-layer__svg[data-cdp-vis] circle { animation-play-state: running !important; }
@media (prefers-reduced-motion: reduce) {
  html body.cinema[data-page=home] .alba .alba__badge .xmas-cta::before { animation: none !important; display: none; }
}
/* mobile: le macchie di sfondo restano ferme (4 animazioni infinite in meno, batteria) */
@media (max-width: 599.98px) { html body.cinema .pdf-layer__svg[data-cdp-vis] circle { animation-play-state: paused !important; } }

/* ── F5: passaggio morbido tra le pagine (View Transitions tra documenti; Safari 18.2+, Chrome 126+). Con reduced-motion niente. ── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: cdpVtOut .18s var(--cdp-ease) both; }
  ::view-transition-new(root) { animation: cdpVtIn .26s var(--cdp-ease) both; }
}
@keyframes cdpVtOut { to { opacity: 0; } }
@keyframes cdpVtIn { from { opacity: 0; transform: translate3d(0, 8px, 0); } }

/* ── F5 LCP: il titolo (elemento LCP) e il bottone della campagna si vedono subito, senza aspettare il JS (.is-loaded)
   né una tendina su clip-path. Eyebrow, testo e bottoni secondari: entrata breve solo transform/opacity. ── */
html.js body.cinema .alba .alba__title, html.js body.cinema .alba .alba__badge,
html.js body.cinema .alba.is-loaded .alba__title, html.js body.cinema .alba.is-loaded .alba__badge { opacity: 1 !important; animation: none !important; clip-path: none !important; filter: none !important; }
html.js body.cinema .alba .alba__eyebrow, html.js body.cinema .alba .alba__lead, html.js body.cinema .alba .alba__cta,
html.js body.cinema .alba.is-loaded .alba__eyebrow, html.js body.cinema .alba.is-loaded .alba__lead, html.js body.cinema .alba.is-loaded .alba__cta { opacity: 1 !important; filter: none !important; animation: cdpRise .42s var(--cdp-spring) .06s both !important; }
@keyframes cdpRise { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.js body.cinema .alba :is(.alba__eyebrow, .alba__lead, .alba__cta) { animation: none !important; } }

/* bottega-f1 · bottoni delle schede-proposta nel carrello (confezione, pacco per fascia): bersaglio HIG 44 pt */
#nat-ordine .no__bxsb { min-height: 44px !important; padding-block: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; }

/* QC 10/11 · desktop (carrello laterale visibile): l'avviso «Aggiunto/Rimosso» non copre più il carrello. Sta in basso a sinistra,
   allineato alla colonna dei prodotti; il carrello a destra mostra già il risultato. «Avanti» su una riga sola.
   QC r2: a 1440 l'avviso copriva l'«Aggiungi» dei barattoli perché la colonna prodotti (grid-row 2 / 4)
   arrivava sotto l'avviso. Con .is-side la griglia si ferma alla riga del carrello; l'avviso resta in basso
   a sinistra, nella fascia già occupata da «Avanti». Sotto i 1024 px questa regola non gira (test a 390 invariati). */
@media (min-width: 1024px) {
  html body #nat-ordine.is-side .no__box > .no__step { grid-row: 2 / 3 !important; min-height: 0 !important; padding-bottom: 20px !important; }
  html body #nat-ordine .no__addt { position: fixed !important; top: auto !important; right: auto !important; bottom: 24px !important;
    left: max(24px, calc((100vw - 1272px) / 2)) !important; width: min(460px, calc(100vw - 48px - 400px)) !important; }
  /* barra del carrello laterale (316px): «Carrello» non va a capo (lo dice già il titolo del riquadro), «Avanti…» su una riga */
  html body #nat-ordine .no__ftr .no__tot { flex: 0 0 auto; white-space: nowrap; }
  html body #nat-ordine .no__ftr .no__totl { display: none !important; }
  html body #nat-ordine .no__ftr .no__cta { white-space: nowrap !important; min-width: 0 !important; max-width: none !important; flex: 1 1 auto !important; padding-inline: 14px !important; font-size: .95rem !important; }
}