/* ============================================================
 * Layout 4 — «Adesso» (K71, direzione B dei mockup K70).
 * NON è autonomo: le pagine caricano PRIMA layout-2.css (la base dei
 * partial condivisi: offerta, «I miei ordini», recensione, «Aggiungi a
 * Home», contenuti delle sezioni, carte del ristorante) e POI questo file.
 * Body class "lt2 lt4". Le classi nuove hanno il prefisso .l4-.
 *
 * I colori sono quelli del logo del Kraft (blu-petrolio e oro) e della
 * Terrazza Rossini (verde): qui in cima, e valgono anche per i partial
 * perché ridefiniscono le variabili --lt2-*. Il tema del pannello
 * «Aspetto» non li cambia: il layout-4 è la veste del Kraft.
 * ============================================================ */

:root {
    --l4-crema:   #F6F2EA;
    --l4-carta:   #FFFDF8;
    --l4-kraft:   #305058;   /* blu-petrolio del logo */
    --l4-kraft-2: #22404A;
    --l4-ink:     #1F2D33;
    --l4-soft:    #5F6B73;   /* grigio per i testi secondari (≥4.5:1 sul crema) */
    --l4-oro:     #A08848;   /* oro delle stelle: icone e segni, non testo */
    --l4-oro-ink: #765E22;   /* oro scuro per il TESTO */
    --l4-oro-bg:  #F3EBD8;
    --l4-oro-chiaro: #E2CF9C;
    --l4-rossini: #00573F;   /* verde della Terrazza Rossini */
    --l4-line:    rgba(31, 45, 51, .10);
    --l4-serif:   'Cormorant Garamond', Georgia, serif;
    --l4-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --l4-ombra:   0 10px 30px -8px rgba(20, 40, 46, .55);

    /* I partial condivisi (vestiti in layout-2.css) prendono i colori del Kraft */
    --lt2-bg:         var(--l4-crema);
    --lt2-surface:    var(--l4-carta);
    --lt2-ink:        var(--l4-kraft-2);
    --lt2-ink-soft:   var(--l4-soft);
    --lt2-accent:     var(--l4-oro);
    --lt2-accent-ink: var(--l4-oro-ink);
    --lt2-border:     var(--l4-line);
    --lt2-font-serif: var(--l4-serif);
    --lt2-font-sans:  var(--l4-sans);
}

/* I numeri della Cormorant di serie sono «vecchio stile» («11:00» sembra «II:00»): allineati */
.lt4 h1, .lt4 h2, .lt4 h3, .lt4 .l4-mini b, .lt4 .l4-fact b, .lt4 .l4-price, .lt4 .l4-num {
    font-variant-numeric: lining-nums;
    font-feature-settings: 'lnum' 1;
}

html, body.lt4 { background: var(--l4-crema); color: var(--l4-ink); font-family: var(--l4-sans); }
body.lt4 { display: block; min-height: 100vh; }
:where(.lt4) a { color: inherit; text-decoration: none; }   /* :where = nessuna specificità: i tasti .l4-btn vincono */
.lt4 .icon { display: inline-flex; flex: none; }
.lt4 .icon svg { width: 20px; height: 20px; }

/* Colonna centrale: sul telefono è tutta la larghezza, sul computer resta da telefono */
.l4-page { max-width: 560px; margin: 0 auto; background: var(--l4-crema); min-height: 100vh; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); position: relative; }

.l4-prova { position: sticky; top: 0; z-index: 60; background: #8A2E2E; color: #fff; text-align: center; font-size: 12.5px; font-weight: 600; padding: 6px 10px; }

/* ===== Tasti ===== */
.l4-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border-radius: 999px; padding: 11px 16px; border: none; cursor: pointer;
    font: 600 14px/1.2 var(--l4-sans); white-space: nowrap; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.l4-btn .icon svg { width: 17px; height: 17px; }
.l4-btn--light { background: #fff; color: var(--l4-kraft-2); }
.l4-btn--light-rossini { color: var(--l4-rossini); }
.l4-btn--ghost-light { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
.l4-btn--kraft { background: var(--l4-kraft); color: #fff; }
.l4-btn--rossini { background: var(--l4-rossini); color: #fff; }
.l4-btn--ghost { background: transparent; color: var(--l4-kraft); box-shadow: inset 0 0 0 1.5px rgba(48,80,88,.35); }
.l4-btn--oro { background: var(--l4-oro); color: #fff; }
.l4-btn--small { padding: 8px 13px; font-size: 13px; }
.l4-btn--wide { width: 100%; padding: 14px; font-size: 15px; white-space: normal; }
.l4-btn:disabled { opacity: .5; cursor: default; }
.l4-link { background: none; border: none; padding: 4px 2px; font: 600 13.5px var(--l4-sans); color: var(--l4-kraft); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.l4-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== Lingua ===== */
.l4-lang { position: relative; }
.l4-lang summary { list-style: none; }
.l4-lang summary::-webkit-details-marker { display: none; }
.l4-lang-btn {
    display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px; border-radius: 999px;
    background: var(--l4-carta); border: 1px solid var(--l4-line); color: var(--l4-kraft-2);
    font: 600 12.5px var(--l4-sans); cursor: pointer;
}
.l4-lang-btn .icon svg { width: 16px; height: 16px; }
.l4-lang--chiaro .l4-lang-btn { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.l4-lang-menu {
    position: absolute; right: 0; top: 42px; z-index: 50; min-width: 170px; max-height: 60vh; overflow-y: auto;
    background: #fff; border-radius: 14px; box-shadow: 0 14px 34px -10px rgba(20,40,46,.4); padding: 6px;
}
.l4-lang-opt { display: block; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; color: var(--l4-ink); }
.l4-lang-opt.is-active { background: var(--l4-oro-bg); font-weight: 600; }

/* ===== Home: la foto del momento ===== */
.l4-hero {
    position: relative; min-height: 470px; height: 58vh; max-height: 560px;
    background-color: var(--l4-kraft-2); background-size: cover; background-position: center; color: #fff;
}
.l4-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(10,20,25,.55) 0%, rgba(10,20,25,0) 24%, rgba(10,20,25,0) 36%, rgba(8,18,22,.5) 56%, rgba(8,18,22,.9) 100%);
}
.l4-hero > * { position: relative; z-index: 2; }
.l4-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: calc(18px + env(safe-area-inset-top, 0px)) 16px 0 18px; }
.l4-brand { display: block; color: #fff; }
.l4-brand-name { display: block; font-family: var(--l4-serif); font-size: 23px; font-weight: 600; letter-spacing: .02em; line-height: 1.1; text-shadow: 0 1px 10px rgba(0,0,0,.3); }
.l4-brand small { display: block; margin-top: 3px; font: 600 10px var(--l4-sans); letter-spacing: .28em; color: var(--l4-oro-chiaro); }
.l4-hero-chips { display: flex; align-items: center; gap: 8px; flex: none; }
.l4-chip-photo {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 999px;
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); color: #fff;
    font: 600 12.5px var(--l4-sans); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap;
}
.l4-chip-photo .icon svg { width: 15px; height: 15px; }
.l4-hero-bottom { position: absolute; left: 0; right: 0; bottom: 44px; padding: 0 20px; }
.l4-eyebrow { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.l4-eyebrow .icon svg { width: 16px; height: 16px; }
.l4-hero .l4-eyebrow { color: var(--l4-oro-chiaro); text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 1px 12px rgba(0,0,0,.4); }
.l4-hero h1 { font-family: var(--l4-serif); font-weight: 500; font-size: 38px; line-height: 1.04; margin: 8px 0 15px; text-shadow: 0 1px 12px rgba(0,0,0,.35); }

/* ===== Il foglio sotto la foto ===== */
.l4-sheet { position: relative; z-index: 3; margin-top: -24px; background: var(--l4-crema); border-radius: 24px 24px 0 0; padding-top: 18px; }
.l4-sec-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 20px; margin: 24px 0 10px; }
.l4-sec-title h3 { margin: 0; font-family: var(--l4-serif); font-weight: 600; font-size: 23px; line-height: 1.15; color: var(--l4-kraft-2); }
.l4-sec-title span { font-size: 12.5px; color: var(--l4-soft); }
.l4-sheet > .l4-sec-title:first-child { margin-top: 4px; }

/* «A colpo d'occhio» */
.l4-glance { display: flex; gap: 8px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.l4-glance::-webkit-scrollbar { display: none; }
.l4-mini { flex: none; display: flex; align-items: flex-end; gap: 8px; background: var(--l4-carta); border: 1px solid var(--l4-line); border-radius: 14px; padding: 9px 12px; max-width: 250px; }
.l4-mini > a, a.l4-mini { display: block; }
.l4-mini small { display: block; font-size: 11px; font-weight: 600; color: var(--l4-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.l4-mini b { display: block; font-family: var(--l4-serif); font-size: 19px; font-weight: 600; line-height: 1.2; color: var(--l4-kraft-2); white-space: nowrap; }
.l4-mini b.l4-mini-code { font-family: var(--l4-sans); font-size: 14px; font-weight: 600; letter-spacing: .02em; padding-top: 3px; }
.l4-copy {
    display: inline-flex; align-items: center; gap: 4px; border: none; cursor: pointer; margin-bottom: 1px;
    padding: 5px 9px; border-radius: 999px; background: var(--l4-crema); color: var(--l4-kraft);
    font: 600 11.5px var(--l4-sans);
}
.l4-copy .icon svg { width: 13px; height: 13px; }
.l4-copy.is-done { background: #E7F1EA; color: #2C6B45; }

/* Il giorno della partenza */
.l4-depart { margin: 0 16px 14px; background: var(--l4-kraft); color: #fff; border-radius: 22px; padding: 16px 18px 17px; }
.l4-depart .l4-eyebrow { opacity: .85; }
.l4-depart h2 { font-family: var(--l4-serif); font-weight: 500; font-size: 28px; line-height: 1.1; margin: 6px 0 12px; }
.l4-depart .l4-btn--light { color: var(--l4-kraft); }

/* «Ordina di nuovo» */
.l4-again { margin: 14px 16px 0; background: var(--l4-carta); border: 1px solid var(--l4-line); border-radius: 20px; padding: 14px 16px; display: grid; grid-template-columns: 40px 1fr; gap: 6px 12px; align-items: center; }
.l4-again-dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #E7F1EA; color: #2C6B45; }
.l4-again-t b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.l4-again-t small { font-size: 12.5px; color: var(--l4-soft); }
.l4-again .l4-btn { grid-column: 2; justify-self: start; }

/* «Stasera, da ordinare» */
.l4-carousel { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 0 16px 4px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.l4-carousel::-webkit-scrollbar { display: none; }
.l4-mcard { flex: none; width: 214px; scroll-snap-align: start; border-radius: 20px; overflow: hidden; background: var(--l4-carta); border: 1px solid var(--l4-line); display: flex; flex-direction: column; }
.l4-mcard-ph { display: block; height: 150px; background-size: cover; background-position: center; background-color: var(--l4-oro-bg); }
.l4-mcard-ph--icon { display: grid; place-items: center; color: var(--l4-oro); }
.l4-mcard-ph--icon .icon svg { width: 40px; height: 40px; }
.l4-mcard-t { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 13px 13px; flex: 1; }
.l4-mcard-t b { font-size: 15px; font-weight: 600; color: var(--l4-ink); }
.l4-mcard-t small { font-size: 12px; color: var(--l4-soft); line-height: 1.35; margin-bottom: 7px; }
.l4-mcard-t .l4-btn { margin-top: auto; }

/* «Domattina» */
.l4-pcard { margin: 0 16px; display: flex; background: var(--l4-carta); border-radius: 20px; overflow: hidden; border: 1px solid var(--l4-line); }
.l4-pcard-ph { width: 118px; flex: none; background-size: cover; background-position: center; background-color: var(--l4-oro-bg); }
.l4-pcard-t { display: flex; flex-direction: column; align-items: flex-start; padding: 14px 14px 13px; flex: 1; }
.l4-k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--l4-oro-ink); }
.l4-pcard-t b { display: block; font-family: var(--l4-serif); font-size: 21px; font-weight: 600; color: var(--l4-kraft-2); line-height: 1.1; margin: 4px 0; }
.l4-pcard-t small { display: block; font-size: 12.5px; color: var(--l4-soft); line-height: 1.4; margin-bottom: 10px; }

/* «Tutto il Kraft» */
.l4-grid-all { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px; }
.l4-grid-all a {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 16px;
    background: var(--l4-carta); border: 1px solid var(--l4-line); font-size: 11.5px; font-weight: 600; text-align: center;
    color: var(--l4-kraft-2); line-height: 1.2; min-width: 0; word-break: break-word; hyphens: auto;
}
.l4-grid-all a .icon svg { width: 22px; height: 22px; color: var(--l4-oro); }
.l4-empty { margin: 20px; color: var(--l4-soft); }
.l4-footer { text-align: center; padding: 26px 16px 8px; font-size: 13px; }
.l4-footer a { color: var(--l4-soft); text-decoration: underline; text-underline-offset: 3px; }

/* I partial condivisi, nella veste del layout-4 */
.lt4 .ann-box, .lt4 .guest-activity-link, .lt4 .review-invite { margin-left: 16px; margin-right: 16px; border-radius: 20px; }
.lt4 .l4-sheet > .ann-box:first-child, .lt4 .l4-sheet > .guest-activity-link:first-child { margin-top: 0; }
.lt4 .guest-activity-link { margin-top: 14px; }
.lt4 .review-invite { margin-top: 14px; }
.lt4 .ann-box-btn, .lt4 .review-invite-btn { border-radius: 999px; }
.lt4 .a2hs-toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* ===== La barra della chat ===== */
.l4-chatbar-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 0 12px calc(14px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.l4-chatbar {
    pointer-events: auto; width: 100%; max-width: 536px; margin: 0 auto; display: flex; align-items: center; gap: 10px;
    background: var(--l4-kraft-2); color: #fff; border: none; border-radius: 18px; padding: 15px 16px; cursor: pointer;
    box-shadow: var(--l4-ombra); font: 500 15px var(--l4-sans); text-align: left;
}
.l4-chatbar .icon svg { color: var(--l4-oro-chiaro); width: 21px; height: 21px; }
.l4-chatbar span { flex: 1; opacity: .94; }
.l4-chatbar small { font-size: 11px; font-weight: 600; letter-spacing: .06em; opacity: .65; }
.l4-pulse { animation: l4pulse 1.5s ease-in-out 3; }
@keyframes l4pulse { 0%, 100% { box-shadow: var(--l4-ombra); } 50% { box-shadow: var(--l4-ombra), 0 0 0 6px rgba(160,136,72,.45); } }

/* ===== La chat ===== */
.l4-chat { position: fixed; inset: 0; z-index: 250; display: none; flex-direction: column; background: #F3EFE7; }
.l4-chat.is-open { display: flex; }
.l4-chat-head { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 10px; background: var(--l4-carta); border-bottom: 1px solid var(--l4-line); }
.l4-chat-back { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; border: none; background: transparent; color: var(--l4-kraft); cursor: pointer; }
.l4-chat-back .icon svg { width: 22px; height: 22px; }
.l4-chat-tt { flex: 1; min-width: 0; }
.l4-chat-tt b { display: block; font-family: var(--l4-serif); font-size: 23px; font-weight: 600; color: var(--l4-kraft-2); line-height: 1.1; }
.l4-chat-tt small { font-size: 11.5px; color: var(--l4-soft); }
.l4-chat-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 14px; }
.l4-chat-msgs { max-width: 560px; margin-left: auto; margin-right: auto; }
.l4-chat-ai { flex: none; align-self: center; margin: 8px 16px 0; font-size: 11.5px; color: var(--l4-soft); background: rgba(48,80,88,.07); padding: 5px 11px; border-radius: 999px; text-align: center; }
.l4-chat-msgs { padding: 8px 14px 0; display: flex; flex-direction: column; gap: 10px; }
.l4-msg { max-width: 84%; padding: 11px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.l4-msg--bot { background: #fff; border: 1px solid var(--l4-line); border-bottom-left-radius: 6px; align-self: flex-start; box-shadow: 0 1px 2px rgba(0,0,0,.03); color: var(--l4-ink); }
.l4-msg--me { background: var(--l4-kraft); color: #fff; border-bottom-right-radius: 6px; align-self: flex-end; }
.l4-msg--ok { background: #E7F1EA; border-color: #CFE3D6; color: #1F4D33; }
.l4-msg.is-error { background: #FBECEC; border-color: #F0CFCF; color: #7A2121; }
.l4-typing { display: flex; gap: 5px; padding: 15px 16px; }
.l4-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--l4-soft); opacity: .4; animation: l4dot 1.2s infinite; }
.l4-typing span:nth-child(2) { animation-delay: .2s; }
.l4-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes l4dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: .9; transform: translateY(-3px); } }
.l4-chat-foot { background: linear-gradient(180deg, rgba(243,239,231,0), #F3EFE7 30%); padding: 6px 0 calc(12px + env(safe-area-inset-bottom, 0px)); }
.l4-chat-sugg { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 14px 10px; max-width: 560px; margin: 0 auto; }
.l4-chat-sugg::-webkit-scrollbar { display: none; }
.l4-chip { flex: none; font: 600 13px var(--l4-sans); padding: 9px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--l4-line); color: var(--l4-kraft); cursor: pointer; }
.l4-chat-form { display: flex; gap: 8px; align-items: center; padding: 0 12px; max-width: 560px; margin: 0 auto; }
.l4-chat-form input { flex: 1; min-width: 0; background: #fff; border: 1px solid rgba(31,45,51,.16); border-radius: 999px; padding: 13px 17px; font: 16px var(--l4-sans); color: var(--l4-ink); outline: none; }
.l4-chat-form input:focus { border-color: var(--l4-kraft); }
.l4-chat-send { width: 48px; height: 48px; flex: none; border-radius: 50%; border: none; background: var(--l4-kraft); color: #fff; display: grid; place-items: center; cursor: pointer; }

/* Riquadri proposti dall'assistente */
.l4-reqbox, .l4-bookcard { align-self: stretch; background: #fff; border-radius: 20px; border: 1px solid var(--l4-line); overflow: hidden; box-shadow: 0 6px 18px -10px rgba(20,40,46,.35); }
.l4-reqbox { padding: 14px 14px 12px; }
.l4-reqbox-k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--l4-oro-ink); }
.l4-reqbox-text { font-size: 15px; line-height: 1.45; margin: 6px 0 12px; color: var(--l4-ink); }
.l4-reqbox-go { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.l4-bookcard-band { background: var(--l4-rossini); color: #fff; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; min-height: 52px; }
.l4-bookcard-band img { height: 46px; width: auto; }
.l4-bookcard-band span { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .92; margin-left: auto; }
.l4-facts { display: grid; grid-template-columns: 1.4fr 1fr .9fr; padding: 14px 8px 6px; }
.l4-fact { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 0 4px; min-width: 0; }
.l4-fact + .l4-fact { border-left: 1px solid var(--l4-line); }
.l4-svg { width: 20px; height: 20px; color: var(--l4-rossini); }
.l4-fact b { font-size: 16px; font-weight: 600; color: var(--l4-ink); }
.l4-fact small { font-size: 11.5px; color: var(--l4-soft); }
.l4-bookcard-note { margin: 4px 16px 0; font-size: 13px; color: var(--l4-soft); font-style: italic; text-align: center; }
.l4-bookcard-go { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.l4-bookcard-alt { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--l4-soft); padding: 0 4px; }
.l4-actionbox { align-self: flex-start; }

/* ===== Pagine sezione ===== */
.l4-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; background: rgba(246,242,234,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--l4-line); }
.l4-topbar-back { display: inline-flex; align-items: center; gap: 2px; font-size: 14.5px; font-weight: 600; color: var(--l4-kraft); padding: 6px 4px; }
.l4-topbar-back .icon svg { width: 19px; height: 19px; }
.l4-topbar-name { flex: 1; text-align: center; font-family: var(--l4-serif); font-size: 19px; font-weight: 600; color: var(--l4-kraft-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l4-photo-head { position: relative; height: 300px; background-size: cover; background-position: center; background-color: var(--l4-kraft-2); color: #fff; }
.l4-photo-head::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,0) 34%, rgba(5,20,25,.8)); }
.l4-photo-head > * { position: relative; z-index: 2; }
.l4-round-back { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--l4-kraft-2); display: grid; place-items: center; }
.l4-round-back .icon svg { width: 21px; height: 21px; }
.l4-photo-head .l4-lang { position: absolute; top: calc(17px + env(safe-area-inset-top, 0px)); right: 14px; }
.l4-photo-head-t { position: absolute; left: 20px; right: 20px; bottom: 34px; }
.l4-photo-head h1 { font-family: var(--l4-serif); font-weight: 500; font-size: 34px; line-height: 1.05; margin: 0; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.l4-photo-head p { margin: 6px 0 0; font-size: 13.5px; opacity: .92; }
.l4-sec-body { position: relative; z-index: 3; background: var(--l4-crema); }
.l4-photo-head + .l4-sec-body { margin-top: -22px; border-radius: 24px 24px 0 0; padding-top: 6px; }
.l4-sec-headline { padding: 22px 20px 0; display: flex; gap: 14px; align-items: center; }
.l4-sec-icon { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--l4-oro-bg); color: var(--l4-oro-ink); }
.l4-sec-icon .icon svg { width: 24px; height: 24px; }
.l4-sec-headline h1 { margin: 0; font-family: var(--l4-serif); font-size: 32px; font-weight: 600; line-height: 1.05; color: var(--l4-kraft-2); }
.l4-sec-headline p { margin: 3px 0 0; font-size: 13.5px; color: var(--l4-soft); }
.lt4 .lt2-sec-content { padding: 18px 20px 4px; font-size: 15.5px; line-height: 1.6; color: var(--l4-ink); }
.lt4 .lt2-sec-content h1, .lt4 .lt2-sec-content h2, .lt4 .lt2-sec-content h3 { font-family: var(--l4-serif); color: var(--l4-kraft-2); }
.lt4 .lt2-sec-content > h1:first-child { display: none; }   /* il titolo è già in testa alla pagina */
.lt4 .lt2-sec-content a { color: var(--l4-kraft); }
.lt4 .lt2-sec-content a.ann-box-btn, .lt4 .lt2-sec-content a.section-maps-btn { color: #fff; }   /* tasti dentro i contenuti */
.lt4 .lt2-sec-content table { width: 100%; border-collapse: collapse; background: var(--l4-carta); border-radius: 14px; overflow: hidden; border: 1px solid var(--l4-line); }
.lt4 .lt2-sec-content th, .lt4 .lt2-sec-content td { border-color: var(--l4-line); }
.l4-sec-extra { padding: 0 16px; }
.lt4 .lt2-cta-card { margin: 18px 0 0; border-radius: 20px; background: var(--l4-kraft); color: #fff; border: none; }
.lt4 .lt2-cta-card .lt2-cta-card-icon { background: rgba(255,255,255,.14); color: var(--l4-oro-chiaro); }
.lt4 .lt2-cta-card-text strong { color: #fff; }
.lt4 .lt2-cta-card-text small { color: rgba(255,255,255,.8); }
.lt4 .lt2-cta-card-arrow { color: #fff; }
.lt4 .section-call { border-radius: 999px; }
.lt4 .section-maps-btn { border-radius: 999px; background: var(--l4-kraft); }

/* Pagina della Terrazza Rossini (dal mockup C) */
.l4-r-hero { position: relative; height: 330px; background-size: cover; background-position: center; background-color: var(--l4-rossini); }
.l4-r-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,0) 26%, rgba(0,0,0,0) 50%, rgba(0,0,0,.5)); }   /* 20/10: niente velo verde (Leonardo: «è terribile»), solo un'ombra neutra in fondo per il logo */
.l4-r-hero > * { position: relative; z-index: 2; }
.l4-r-hero .l4-round-back { position: absolute; color: var(--l4-rossini); }
.l4-r-hero .l4-lang { position: absolute; top: calc(17px + env(safe-area-inset-top, 0px)); right: 14px; }
.l4-r-logo { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 250px; max-width: 72%; height: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(0,0,0,.3)); }
.l4-r-titolo { position: absolute; left: 20px; right: 20px; bottom: 30px; text-align: center; color: #fff; font-family: var(--l4-serif); font-size: 36px; font-weight: 500; margin: 0; }
.l4-r-body { padding: 20px 20px 0; }
.l4-r-body .lt2-sec-content { padding: 0; }
.l4-r-body .lt2-sec-content p { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: #3D484E; }
.l4-r-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; margin-top: 10px; }
.l4-r-tabs a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 6px; border-radius: 14px; background: #fff; border: 1px solid var(--l4-line); font-size: 13px; font-weight: 600; color: var(--l4-rossini); text-align: center; line-height: 1.2; }
.l4-r-tabs a .icon svg { width: 20px; height: 20px; }
.l4-r-tabs small { font-size: 11px; font-weight: 500; color: var(--l4-soft); }
.l4-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px; }
.l4-gallery span { height: 150px; border-radius: 16px; background-size: cover; background-position: center; background-color: var(--l4-oro-bg); }
.l4-gallery span.wide { grid-column: span 2; height: 130px; }
.l4-inroom { margin: 16px 16px 0; padding: 14px 16px; border-radius: 18px; background: #E8F0EC; color: #154534; display: flex; gap: 12px; align-items: center; }
.l4-inroom .icon svg { width: 26px; height: 26px; }
.l4-inroom-t { flex: 1; font-size: 13.5px; line-height: 1.4; }
.l4-inroom-t b { display: block; font-size: 15px; }

/* ===== Menu dei punti d'ordine (ordina.php col layout-4) ===== */
.l4-mhero { position: relative; height: 230px; background-size: cover; background-position: center 62%; background-color: var(--l4-kraft-2); color: #fff; }
.l4-mhero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,0) 35%, rgba(5,20,25,.8)); }
.l4-mhero > * { position: relative; z-index: 2; }
.l4-mhero .l4-lang { position: absolute; top: calc(17px + env(safe-area-inset-top, 0px)); right: 14px; }
.l4-mhero-t { position: absolute; bottom: 16px; left: 18px; right: 18px; }
.l4-mhero h1 { font-family: var(--l4-serif); font-weight: 500; font-size: 32px; margin: 0; line-height: 1.05; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.l4-mhero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 12.5px; opacity: .95; }
.l4-mhero-sub { margin: 5px 0 0; font-size: 12.5px; opacity: .9; }
.l4-open { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #E7F1EA; color: #1F5A37; }
.l4-open.is-closed { background: #FBECEC; color: #8A2E2E; }
.l4-note { margin: 12px 16px 0; padding: 11px 14px; border-radius: 16px; display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; background: var(--l4-oro-bg); color: #4A3A10; }
.l4-note .icon svg { width: 18px; height: 18px; margin-top: 1px; }
.l4-note--closed { background: #FBECEC; color: #7A2121; }
.l4-note button { margin-left: auto; flex: none; }
.l4-cats { position: sticky; top: 0; z-index: 15; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 12px 14px; background: rgba(246,242,234,.97); border-bottom: 1px solid var(--l4-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.l4-cats::-webkit-scrollbar { display: none; }
.l4-cats a { flex: none; font-size: 13px; font-weight: 600; padding: 8px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--l4-line); color: var(--l4-kraft-2); white-space: nowrap; }
.l4-cats a.on { background: var(--l4-kraft); color: #fff; border-color: var(--l4-kraft); }
.l4-cats a .l4-cat-n { display: none; margin-left: 6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--l4-oro); color: #fff; font-size: 11px; line-height: 18px; text-align: center; padding: 0 5px; }
.l4-cats a .l4-cat-n.visible { display: inline-block; }
.l4-cat { scroll-margin-top: 66px; }
.l4-cat .l4-sec-title { margin-top: 22px; }
.l4-cat-hours { font-size: 12px; color: var(--l4-soft); }
.l4-cat-hours.is-closed { color: #8A2E2E; font-weight: 600; }
.l4-pop { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; }
.l4-pop .l4-item { background: var(--l4-carta); border: 1px solid var(--l4-line); border-radius: 18px; padding: 13px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 108px; }
.l4-pop .l4-item-name { font-size: 14.5px; line-height: 1.25; }
.l4-pop .l4-item-desc { display: none; }
.l4-list { margin: 0 16px; background: var(--l4-carta); border: 1px solid var(--l4-line); border-radius: 20px; overflow: hidden; }
.l4-list .l4-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--l4-line); }
.l4-list .l4-item:first-child { border-top: none; }
.l4-item-info { flex: 1; min-width: 0; }
.l4-item-name { font-size: 15px; font-weight: 600; color: var(--l4-ink); }
.l4-item-desc { font-size: 12.5px; color: var(--l4-soft); margin-top: 2px; line-height: 1.4; }
.l4-pop .l4-item-foot, .l4-list .l4-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.l4-list .l4-item-foot { flex: none; }
.l4-price { font-size: 14px; font-weight: 600; color: var(--l4-kraft-2); white-space: nowrap; }
.l4-item.is-off .l4-item-name { color: var(--l4-soft); }
.l4-badge { flex: none; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: #EFEAE0; color: var(--l4-soft); white-space: nowrap; }
.l4-plus { width: 34px; height: 34px; border-radius: 50%; border: none; display: grid; place-items: center; background: var(--l4-kraft); color: #fff; flex: none; cursor: pointer; padding: 0; }
.l4-plus .icon svg { width: 18px; height: 18px; stroke-width: 2.2; }
.l4-stepper { display: none; align-items: center; gap: 2px; background: var(--l4-kraft); color: #fff; border-radius: 999px; padding: 3px; flex: none; }
.l4-stepper button { width: 30px; height: 30px; border: none; background: transparent; color: #fff; font: 700 18px/1 var(--l4-sans); cursor: pointer; border-radius: 50%; padding: 0; }
.l4-stepper b { min-width: 18px; text-align: center; font-size: 14px; }
.l4-item.has-qty .l4-stepper { display: inline-flex; }
.l4-item.has-qty .l4-plus { display: none; }
.l4-menu-note { margin: 22px 16px 0; }
.l4-menu-note label { display: block; font-size: 13px; font-weight: 600; color: var(--l4-kraft-2); margin-bottom: 6px; }
.l4-menu-note textarea, .l4-sheet-note textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(31,45,51,.16); border-radius: 14px; padding: 11px 13px; font: 16px var(--l4-sans); background: #fff; color: var(--l4-ink); resize: vertical; }

/* Il carrello: sempre in basso col totale, e il riepilogo che sale */
.l4-cart-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0 12px calc(14px + env(safe-area-inset-bottom, 0px)); pointer-events: none; transform: translateY(140%); transition: transform .25s ease; }
.l4-cart-wrap.visible { transform: none; }
.l4-cart { pointer-events: auto; width: 100%; max-width: 536px; margin: 0 auto; display: flex; align-items: center; gap: 12px; background: var(--l4-kraft-2); color: #fff; border: none; border-radius: 18px; padding: 12px 16px; box-shadow: var(--l4-ombra); cursor: pointer; text-align: left; font-family: var(--l4-sans); }
.l4-cart-n { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--l4-oro); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.l4-cart-t { flex: 1; min-width: 0; font-size: 14px; }
.l4-cart-t span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l4-cart-t small { display: block; font-size: 11.5px; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l4-cart b { font-size: 15px; white-space: nowrap; }
.l4-cart .icon svg { width: 20px; height: 20px; }
.l4-drawer { position: fixed; inset: 0; z-index: 90; display: none; }
.l4-drawer.visible { display: block; }
.l4-drawer-bg { position: absolute; inset: 0; background: rgba(15,25,30,.45); }
.l4-drawer-box { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; max-height: 88vh; overflow-y: auto; background: var(--l4-crema); border-radius: 24px 24px 0 0; padding: 8px 18px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 40px -12px rgba(0,0,0,.4); }
.l4-drawer-grip { width: 42px; height: 5px; border-radius: 3px; background: rgba(31,45,51,.18); margin: 4px auto 10px; }
.l4-drawer-head { display: flex; align-items: center; justify-content: space-between; }
.l4-drawer-head h2 { margin: 0; font-family: var(--l4-serif); font-size: 26px; font-weight: 600; color: var(--l4-kraft-2); }
.l4-drawer-x { width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(31,45,51,.07); color: var(--l4-kraft-2); font-size: 22px; line-height: 1; cursor: pointer; }
.l4-drawer-where { font-size: 13px; color: var(--l4-soft); margin: 2px 0 12px; }
.l4-lines { background: var(--l4-carta); border: 1px solid var(--l4-line); border-radius: 18px; overflow: hidden; }
.l4-line { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-top: 1px solid var(--l4-line); }
.l4-line:first-child { border-top: none; }
.l4-line-t { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; }
.l4-line-t small { display: block; font-size: 12px; font-weight: 500; color: var(--l4-soft); }
.l4-line .l4-stepper { display: inline-flex; }
.l4-line--fissa .l4-line-t { font-weight: 500; color: var(--l4-soft); }
.l4-total { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 4px 0; font-size: 15px; font-weight: 600; color: var(--l4-kraft-2); }
.l4-total b { font-family: var(--l4-serif); font-size: 26px; }
.l4-sheet-note { margin-top: 14px; }
.l4-sheet-note label { display: block; font-size: 13px; font-weight: 600; color: var(--l4-kraft-2); margin-bottom: 6px; }
.l4-consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 2px; font-size: 12.5px; line-height: 1.45; color: #3D484E; cursor: pointer; }
.l4-consent input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--l4-kraft); }
.l4-send { width: 100%; padding: 15px; font-size: 15.5px; }

/* Finestre del menu: come funziona, scelta (cottura), orario colazione, zona, conferma */
.l4-modal { position: fixed; inset: 0; z-index: 120; display: none; align-items: flex-end; justify-content: center; background: rgba(15,25,30,.5); padding: 0; }
.l4-modal.visible { display: flex; }
.l4-modal-box { width: 100%; max-width: 560px; background: var(--l4-crema); border-radius: 24px 24px 0 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px)); max-height: 90vh; overflow-y: auto; text-align: center; }
.l4-modal-box h2 { margin: 6px 0 6px; font-family: var(--l4-serif); font-size: 27px; font-weight: 600; color: var(--l4-kraft-2); }
.l4-modal-box p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: #3D484E; }
.l4-modal-ic { width: 54px; height: 54px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; background: var(--l4-oro-bg); color: var(--l4-oro-ink); }
.l4-modal-ic .icon svg { width: 26px; height: 26px; }
.l4-modal-ic--ok { background: #E7F1EA; color: #2C6B45; }
.l4-choices { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.l4-choice { width: 100%; padding: 14px; border-radius: 14px; border: 1px solid var(--l4-line); background: #fff; font: 600 15px var(--l4-sans); color: var(--l4-kraft-2); cursor: pointer; }
.l4-modal select { width: 100%; padding: 13px 14px; border-radius: 14px; border: 1px solid rgba(31,45,51,.18); background: #fff; font: 16px var(--l4-sans); color: var(--l4-ink); margin: 4px 0 12px; }
.l4-modal-label { display: block; text-align: left; font-size: 13px; font-weight: 600; color: var(--l4-kraft-2); }
.l4-modal-avviso { background: var(--l4-oro-bg); border-radius: 12px; padding: 10px 12px; font-size: 13px !important; color: #4A3A10 !important; text-align: left; }
.l4-gate { min-height: 70vh; display: grid; place-items: center; padding: 30px 20px; text-align: center; }
.l4-gate h1 { font-family: var(--l4-serif); font-size: 30px; font-weight: 600; color: var(--l4-kraft-2); margin: 12px 0 8px; }
.l4-gate p { color: var(--l4-soft); line-height: 1.5; margin: 0 0 18px; }

/* ===== Accesso (login) ===== */
.lt4-login { min-height: 100vh; background: var(--l4-kraft-2); }
.l4-login-hero { position: relative; height: 42vh; min-height: 260px; max-height: 380px; background-size: cover; background-position: center; color: #fff; }
.l4-login-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,25,.45), rgba(10,20,25,.05) 40%, rgba(34,64,74,1)); }
.l4-login-hero > * { position: relative; z-index: 2; }
.l4-login-hero .l4-lang { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: 14px; }
.l4-login-brand { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; }
.l4-login-brand .l4-brand-name { font-size: 34px; }
.l4-login-card { position: relative; z-index: 3; max-width: 480px; margin: -6px auto 0; background: var(--l4-crema); border-radius: 26px 26px 0 0; padding: 26px 22px calc(30px + env(safe-area-inset-bottom, 0px)); min-height: 58vh; }
.l4-login-card h1 { font-family: var(--l4-serif); font-weight: 500; font-size: 36px; margin: 0 0 8px; color: var(--l4-kraft-2); }
.l4-login-card p { color: #3D484E; font-size: 14.5px; line-height: 1.55; margin: 0 0 16px; }
.l4-login-error { background: #FBECEC; color: #7A2121; border-radius: 12px; padding: 10px 12px; font-size: 14px; margin-bottom: 14px; }
.l4-login-fields { display: flex; gap: 10px; }
.l4-login-fields label { flex: 1 1 50%; min-width: 0; }
.l4-login-fields span { display: block; font-size: 12.5px; font-weight: 600; color: var(--l4-kraft-2); margin-bottom: 6px; }
.l4-login-fields input { width: 100%; box-sizing: border-box; padding: 14px; border-radius: 14px; border: 1px solid rgba(31,45,51,.18); background: #fff; font: 600 18px var(--l4-sans); letter-spacing: .06em; color: var(--l4-ink); }
.l4-login-fields input:focus { outline: none; border-color: var(--l4-kraft); }
.l4-login-card .l4-btn--kraft { width: 100%; margin-top: 16px; padding: 15px; font-size: 15.5px; }
.l4-login-note { font-size: 13px !important; color: var(--l4-soft) !important; margin: 14px 0 0 !important; }
.l4-login-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .l4-pulse, .l4-typing span { animation: none; }
    .l4-cart-wrap { transition: none; }
}

/* =====================================================================
   K74 — Il tocco su iPhone (20/10/2026): i punti «prima di accenderla»
   della verifica con le skill mobile-native, apple-design e
   ios-design-guidelines (_materiali/verifica-skill-iphone-2026-10-20.md).
   Solo il layout-4: questo file lo caricano solo i suoi template.
   ===================================================================== */

/* 1. Le lingue: la testata col menu sta sopra il titolo della foto e sopra il foglio crema,
      altrimenti le voci in basso del menu si vedono ma non si toccano. */
.l4-hero > .l4-hero-top,
.l4-photo-head > .l4-lang,
.l4-r-hero > .l4-lang,
.l4-mhero > .l4-lang,
.l4-login-hero > .l4-lang { z-index: 20; }   /* sopra il foglio (3) e la barra delle categorie del menu (15) */

/* 2. «+» e «− n +»: più facili da prendere col pollice (44 punti, ios-design-guidelines 1.1). */
.l4-plus { width: 38px; height: 38px; position: relative; }
.l4-plus::after { content: ''; position: absolute; inset: -4px; }
.l4-stepper button { width: 38px; height: 38px; }
.l4-stepper b { min-width: 22px; }

/* 3. Il segno al tocco: niente riquadro grigio di Safari, ogni tasto risponde appena lo si
      tocca (mobile-native §2 e §5, apple-design §1). Su iOS :active parte grazie a
      ontouchstart sul body dei template del layout-4. */
body.lt4 { -webkit-tap-highlight-color: transparent; }
.l4-btn, .l4-plus, .l4-stepper button, .l4-cart, .l4-chatbar, .l4-chip, .l4-cats a, .l4-mcard,
.l4-grid-all a, .l4-copy, .l4-lang-btn, .l4-round-back, .l4-drawer-x, .l4-chat-send, .l4-chat-back,
.l4-r-tabs a, .l4-topbar-back, a.l4-mini, .l4-mini > a {
    transition: transform 120ms ease-out, filter 120ms ease-out;
}
.l4-btn:active, .l4-plus:active, .l4-stepper button:active, .l4-cart:active, .l4-chatbar:active,
.l4-chip:active, .l4-cats a:active, .l4-mcard:active, .l4-grid-all a:active, .l4-copy:active,
.l4-lang-btn:active, .l4-round-back:active, .l4-drawer-x:active, .l4-chat-send:active,
.l4-chat-back:active, .l4-r-tabs a:active, .l4-topbar-back:active, a.l4-mini:active, .l4-mini > a:active {
    transform: scale(.97); filter: brightness(.9);
}
.l4-btn:disabled:active { transform: none; filter: none; }
.l4-link { transition: opacity 120ms ease-out; }
.l4-link:active { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
    .l4-btn:active, .l4-plus:active, .l4-stepper button:active, .l4-cart:active, .l4-chatbar:active,
    .l4-chip:active, .l4-cats a:active, .l4-mcard:active, .l4-grid-all a:active, .l4-copy:active,
    .l4-lang-btn:active, .l4-round-back:active, .l4-drawer-x:active, .l4-chat-send:active,
    .l4-chat-back:active, .l4-r-tabs a:active, .l4-topbar-back:active, a.l4-mini:active, .l4-mini > a:active { transform: none; }
}

/* 7. Gli altri tasti piccoli: l'area di tocco arriva a 44 punti, il disegno resta com'è. */
.l4-btn { position: relative; }
.l4-btn::after { content: ''; position: absolute; inset: -3px 0; }
.l4-btn--small::after { inset: -7px 0; }
.l4-copy, .l4-link, .l4-cats a, .l4-lang-btn, .l4-round-back, .l4-drawer-x { position: relative; }
.l4-copy::after { content: ''; position: absolute; inset: -10px -4px; }
.l4-link::after { content: ''; position: absolute; inset: -10px -6px; }
.l4-cats a::after { content: ''; position: absolute; inset: -4px 0; }
/* il globo della lingua: il tasto è alto 44, la pillola disegnata resta di 34 (::before) e il margine
   negativo lascia l'ingombro di prima, quindi niente si sposta */
.l4-lang .l4-lang-btn { height: 44px; margin: -5px 0; background: transparent; border-color: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 0; }
.l4-lang-btn::before { content: ''; position: absolute; left: 0; right: 0; top: 5px; bottom: 5px; z-index: -1;
    border-radius: 999px; background: var(--l4-carta); border: 1px solid var(--l4-line); }
.l4-lang--chiaro .l4-lang-btn::before { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.l4-round-back::after { content: ''; position: absolute; inset: -2px; }
.l4-drawer-x::after { content: ''; position: absolute; inset: -3px; }
.l4-chip { min-height: 44px; display: inline-flex; align-items: center; }
.lt4 .ann-box-close::after { content: ''; position: absolute; inset: -8px; }

/* 8. La riga dell'AI Act nella chat: più scura e un filo più grande (contrasto sopra 4,5:1). */
.l4-chat-ai { font-size: 12.5px; color: #3D484E; }

/* =====================================================================
   K75 — Gli altri punti della verifica con le skill (21/10/2026)
   ===================================================================== */

/* 5. La chat e il riepilogo non si portano dietro la pagina: tirando giù in cima non si ricarica. */
.l4-chat-scroll, .l4-drawer-box { overscroll-behavior: contain; }

/* 6. Il riepilogo si trascina giù dalla maniglia o dalla testata, come un foglio di iOS. */
.l4-drawer-grip { position: relative; touch-action: none; }
.l4-drawer-grip::after { content: ''; position: absolute; inset: -14px -70px; }
.l4-drawer-head { touch-action: none; }
.l4-drawer-box { will-change: transform; }

/* 9. I numeri sull'oro si leggono (contrasto sopra 4,5:1). */
.l4-cart-n { background: var(--l4-oro-chiaro); color: var(--l4-kraft-2); }
.l4-cats a .l4-cat-n { background: var(--l4-oro-ink); }

/* 10. Con la finestra dell'offerta aperta, la barra della chat non resta accesa sopra il velo. */
body.ann-modal-open .l4-chatbar-wrap { visibility: hidden; }

/* 11. «★★★★ FIRENZE» al minimo leggibile. */
.l4-brand small { font-size: 11px; }

/* 12. In orizzontale niente sotto la tacca. */
.l4-chat-head { padding-left: calc(12px + env(safe-area-inset-left, 0px)); padding-right: calc(12px + env(safe-area-inset-right, 0px)); }
.l4-chat-form { padding-left: calc(12px + env(safe-area-inset-left, 0px)); padding-right: calc(12px + env(safe-area-inset-right, 0px)); }
.l4-chatbar-wrap, .l4-cart-wrap { padding-left: calc(12px + env(safe-area-inset-left, 0px)); padding-right: calc(12px + env(safe-area-inset-right, 0px)); }

/* 13. Fogli e finestre alti quanto lo schermo che si vede davvero, con le barre di Safari. */
.l4-drawer-box { max-height: 88dvh; }
.l4-modal-box { max-height: 90dvh; }

/* =====================================================================
   K76 — La foto fino in cima su iPhone (23/10/2026). Aperta dall'icona
   sulla Home, la directory aveva sopra una fascia crema opaca con l'ora,
   e la foto partiva sotto. Ora i template del layout-4 hanno
   apple-mobile-web-app-status-bar-style «black-translucent»: la barra
   dell'ora è trasparente, l'ora è bianca e la pagina le passa sotto.
   iPhone legge l'impostazione quando si aggiunge l'icona alla Home: chi
   l'aveva già aggiunta la vede cambiare solo riaggiungendola.
   In Safari env(safe-area-inset-top) resta 0 e qui non cambia niente.
   ===================================================================== */

/* La fascia sotto l'ora (.l4-sb, la crea layout-4-barra.js): blu-petrolio, così l'ora bianca si legge;
   trasparente finché sotto l'ora c'è la foto (classe is-foto). Dal K80 la pagina non va più sotto l'ora:
   env(safe-area-inset-top) è 0 e la fascia non si vede.
   K77 — iOS 27, appena la pagina scorre, sfoca quello che passa sotto l'ora, e lo toglie solo se in cima
   c'è un elemento fisso, largo quanto lo schermo, con un colore pieno: prende quel colore e la barra resta
   netta. Per questo è un elemento vero (la prima versione era un ::before e sull'iPhone di Leonardo la
   sfocatura restava), senza dissolvenza (a metà il colore non è pieno) e torna blu appena si scorre,
   anche sopra la foto. */
.l4-sb {
    position: fixed; top: 0; left: 0; right: 0; z-index: 400; pointer-events: none;
    height: env(safe-area-inset-top, 0px); background-color: var(--l4-kraft-2);
}
.l4-sb.is-foto { background-color: transparent; }
body:has(.l4-chat.is-open) .l4-sb { background-color: var(--l4-kraft-2); }

/* Le foto in testa alle pagine restano alte come prima sotto l'ora. */
.l4-photo-head { height: calc(300px + env(safe-area-inset-top, 0px)); }
.l4-r-hero { height: calc(330px + env(safe-area-inset-top, 0px)); }
.l4-mhero { height: calc(230px + env(safe-area-inset-top, 0px)); }

/* Le categorie del menu si fermano sotto l'ora, non dietro. */
.l4-cats { top: env(safe-area-inset-top, 0px); }
.l4-cat { scroll-margin-top: calc(66px + env(safe-area-inset-top, 0px)); }

/* =====================================================================
   K80 — La barra dell'ora piena, come il Libretto (23/10/2026).
   K76–K79 mettevano la foto sotto l'ora (black-translucent) e cercavano di
   togliere la velatura che iOS 27 ci disegna sopra: non si toglie. Un
   ingegnere di Apple, su WebKit (bug 317153, iOS 27): black-translucent «has
   been deprecated for multiple releases. Please remove this key, and the
   status bar should automatically appear in the same color as the webpage.
   Home Screen web apps does not support drawing arbitrary content below the
   status bar». È quello che fa il Libretto. Quindi i template non hanno più
   quella riga, la pagina parte sotto l'ora e la barra prende il colore della
   pagina. Nell'app sulla Home, sulle pagine che si aprono con una foto, quel
   colore è il blu-petrolio, che si lega al bordo scuro in cima alla foto; è
   lo stesso colore che si vede tirando giù, al posto del crema. Sulle pagine
   con la testata crema la barra resta crema. In Safari non cambia niente.
   Il resto della ricetta del Libretto: nell'app sulla Home la pagina resta
   ferma e scorre il body (come K78), così il contenuto si ferma sotto la barra
   e non le passa mai dietro: è quando passa dietro che iOS mette la velatura.
   Provato sul simulatore: con la barra piena e la pagina che scorre, la
   velatura c'era anche lì; col body che scorre, no. L'elastico resta (quello
   del body); layout-4-barra.js rimette la pagina al punto di prima tornando
   indietro, layout-4-ordina.js segue le categorie del menu.
   ===================================================================== */
@media (display-mode: standalone) {
    html { height: 100%; overflow: hidden; }
    body.lt4 { height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; }
    html:has(.l4-hero, .l4-photo-head, .l4-r-hero, .l4-mhero, .l4-login-hero),
    html:has(.l4-hero, .l4-photo-head, .l4-r-hero, .l4-mhero, .l4-login-hero) body.lt4 { background-color: var(--l4-kraft-2); }
}