@charset "UTF-8";

/* ============================================================================
   L'ANFORA — Design System
   Menu digitale, mobile first. Nessuna dipendenza esterna.

   Indice
   1.  Token
   2.  Reset e base
   3.  Tipografia
   4.  Utility
   5.  Barra superiore
   6.  Hero
   7.  Sezioni di categoria
   8.  Righe prodotto
   9.  Note di sezione
   10. Barra categorie (inferiore)
   11. Bottom sheet
   12. Ricerca
   13. Allergeni
   14. Footer
   15. Bottoni e controlli
   16. Micro-interazioni
   17. Breakpoint
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Token */

:root {
    /* Superfici: nero caldo, non nero puro, per non spegnere le fotografie */
    --ink-900: #0a0a0b;
    --ink-850: #0f0f11;
    --ink-800: #141417;
    --ink-750: #1a1a1e;
    --ink-700: #212128;

    --line: rgba(244, 241, 234, .10);
    --line-strong: rgba(244, 241, 234, .20);

    /* Testo: avorio caldo, tre livelli di gerarchia */
    --cream: #f4f1ea;
    --cream-2: #c6c1b7;
    --cream-3: #94908a;

    /* Accento: ottone. Deriva dall'insegna monocroma, scalda il nero senza urlare */
    --brass: #d3a93f;
    --brass-2: #e8c97a;
    --brass-wash: rgba(211, 169, 63, .12);
    --brass-line: rgba(211, 169, 63, .38);

    /* Tipografia: due sole famiglie. Serif solo alle misure display,
       sans a tutte le misure di lettura: e' li' che conta la leggibilita'. */
    --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Spazio: scala a passo 4 */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 20px;
    --s6: 24px;
    --s7: 32px;
    --s8: 40px;
    --s9: 56px;
    --s10: 72px;

    /* Raggi */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 26px;
    --r-pill: 999px;

    /* Ombre: appena percettibili, mai grigie su nero */
    --sh-2: 0 10px 30px -14px rgba(0, 0, 0, .85);
    --sh-3: 0 -14px 44px -10px rgba(0, 0, 0, .9);

    /* Movimento */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur-1: 140ms;
    --dur-2: 220ms;
    --dur-3: 340ms;

    /* Layout */
    --bar-h: 54px;
    --rail-h: 56px;
    --page: 660px;
    --gut: clamp(18px, 5.2vw, 28px);
    --safe-b: env(safe-area-inset-bottom, 0px);
}

/* --------------------------------------------------------- 2. Reset e base */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--ink-900);
    /* La lastra di ardesia dell'insegna, resa con due gradienti invece che
       con un PNG da 768 KB: stessa atmosfera, zero byte scaricati. */
    background-image:
        radial-gradient(120% 70% at 50% -10%, rgba(211, 169, 63, .07) 0%, rgba(211, 169, 63, 0) 60%),
        radial-gradient(90% 55% at 50% 100%, rgba(244, 241, 234, .035) 0%, rgba(244, 241, 234, 0) 70%);
    background-attachment: fixed;
    color: var(--cream);
    font-family: var(--font-text);
    font-size: 16px;
    line-height: 1.5;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Spazio per la barra categorie flottante */
    padding-bottom: calc(var(--rail-h) + var(--s8) + var(--safe-b));
    overflow-x: hidden;
}

/* Con un pannello aperto la pagina sotto non deve scorrere.
   position:fixed e non solo overflow:hidden, altrimenti iOS scorre comunque. */
body.is-locked {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

img {
    max-width: 100%;
    display: block;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

a {
    color: var(--brass-2);
    text-decoration: none;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--brass-2);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

::selection {
    background: var(--brass);
    color: var(--ink-900);
}

.skip-link {
    position: absolute;
    left: var(--s4);
    top: -100px;
    z-index: 200;
    padding: var(--s3) var(--s5);
    border-radius: var(--r-pill);
    background: var(--brass);
    color: var(--ink-900);
    font-weight: 600;
    transition: top var(--dur-2) var(--ease);
}

.skip-link:focus {
    top: var(--s3);
}

/* ------------------------------------------------------------ 3. Tipografia */

h1, h2, h3, h4, p {
    margin: 0;
}

.display {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: .005em;
}

.eyebrow {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--cream-3);
}

/* -------------------------------------------------------------- 4. Utility */

.shell {
    width: 100%;
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: var(--gut);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------ 5. Barra superiore */

.topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    height: var(--bar-h);
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding-inline: var(--gut);
    background: transparent;
    transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
    border-bottom: 1px solid transparent;
}

.topbar.is-stuck {
    background: rgba(10, 10, 11, .82);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    border-bottom-color: var(--line);
}

.topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-right: auto;
    min-width: 0;
    padding: var(--s2) var(--s2) var(--s2) 0;
    border-radius: var(--r-sm);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}

.topbar.is-stuck .topbar__brand {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.topbar__mark {
    width: 26px;
    height: 26px;
    flex: none;
    opacity: .92;
}

.topbar__name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--cream);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--s1);
    flex: none;
}

/* ---------------------------------------------------------------- 6. Hero */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Meno di 100vh: si deve capire subito che sotto continua */
    min-height: calc(78vh - var(--bar-h));
    min-height: calc(78svh - var(--bar-h));
    padding: var(--s7) var(--gut) var(--s9);
}

.hero__logo {
    width: clamp(116px, 34vw, 156px);
    height: auto;
    opacity: .96;
}

.hero__eyebrow {
    margin-top: var(--s5);
}

.hero__name {
    margin-top: var(--s2);
    font-size: clamp(3rem, 15vw, 4.5rem);
    color: var(--cream);
}

.hero__slogan {
    max-width: 30ch;
    margin: var(--s5) auto 0;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 5vw, 1.4rem);
    font-style: italic;
    line-height: 1.4;
    color: var(--cream-2);
}

.hero__flourish {
    width: 132px;
    height: 9px;
    margin: var(--s6) auto 0;
    opacity: .75;
}

.hero__cta {
    margin-top: var(--s7);
}

/* --------------------------------------------- 7. Sezioni di categoria */

.section {
    /* Compensa barra superiore quando si salta all'ancora */
    scroll-margin-top: calc(var(--bar-h) + var(--s3));
    padding-bottom: var(--s8);
}

.section__banner {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 88 / 33;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--ink-800);
}

.section__banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Le foto sono generiche di stock: restano sfondo, non protagoniste */
    filter: saturate(.72) brightness(.52);
    transform: scale(1.02);
}

.section__banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 11, .96) 2%, rgba(10, 10, 11, .3) 55%, rgba(10, 10, 11, .5) 100%);
}

.section__head {
    position: relative;
    z-index: 1;
    margin-top: -46px;
    padding-inline: var(--s1);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s4);
}

.section__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 7.5vw, 2.35rem);
    line-height: 1.05;
    letter-spacing: .01em;
    color: var(--cream);
    text-wrap: balance;
}

.section__list {
    margin-top: var(--s5);
}

.section__group {
    margin: var(--s7) 0 var(--s3);
    display: flex;
    align-items: center;
    gap: var(--s3);
}

.section__group span {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--brass);
    white-space: nowrap;
}

.section__group::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--brass-line);
    opacity: .5;
}

/* --------------------------------------------------- 8. Righe prodotto */

.dish {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--s4) var(--s2);
    border-radius: var(--r-md);
    border-bottom: 1px solid var(--line);
    transition: background var(--dur-1) var(--ease);
    -webkit-tap-highlight-color: transparent;
}

.dish:last-child {
    border-bottom: 0;
}

.dish:hover {
    background: rgba(244, 241, 234, .035);
}

.dish:active {
    background: rgba(244, 241, 234, .06);
    transform: scale(.995);
}

.dish__top {
    display: flex;
    align-items: baseline;
    gap: var(--s3);
}

.dish__name {
    flex: 1;
    min-width: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.005em;
    color: var(--cream);
    text-wrap: pretty;
}

/* Filetto punteggiato: linguaggio del menu cartaceo, lega nome e prezzo */
.dish__leader {
    flex: 1;
    min-width: var(--s5);
    height: 1px;
    align-self: center;
    margin-top: 2px;
    background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1px);
    background-size: 5px 1px;
    background-repeat: repeat-x;
    background-position: 0 center;
}

.dish__price {
    flex: none;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    color: var(--brass);
    white-space: nowrap;
}

.dish__price small {
    font-size: .78em;
    font-weight: 500;
    margin-right: 1px;
    opacity: .8;
}

.dish__desc {
    display: block;
    margin-top: var(--s2);
    padding-right: var(--s8);
    font-size: .875rem;
    line-height: 1.5;
    color: var(--cream-3);
    text-wrap: pretty;
}

/* ------------------------------------------------ 9. Note di sezione */

.notes {
    margin-top: var(--s5);
    padding: var(--s4) var(--s5);
    border: 1px solid var(--brass-line);
    border-radius: var(--r-md);
    background: var(--brass-wash);
}

.notes__label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--brass);
}

.notes p {
    margin-top: var(--s2);
    font-size: .875rem;
    line-height: 1.5;
    color: var(--cream-2);
}

/* ------------------------------------- 10. Barra categorie (inferiore) */

/* Sta in basso perche' e' il comando piu' usato del menu e deve stare
   nella zona del pollice: raggiungerlo non deve costare un cambio di presa. */
.rail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: var(--s2);
    height: calc(var(--rail-h) + var(--safe-b));
    padding: 0 var(--s3) var(--safe-b);
    background: rgba(12, 12, 14, .9);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    border-top: 1px solid var(--line);
    box-shadow: var(--sh-3);
    transform: translateY(0);
    transition: transform var(--dur-3) var(--ease);
}

.rail.is-away {
    transform: translateY(110%);
}

.rail__search {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--ink-700);
    color: var(--cream);
    border: 1px solid var(--line);
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.rail__search:hover {
    background: var(--brass);
    color: var(--ink-900);
    border-color: transparent;
}

.rail__scroller {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: var(--s2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    padding-inline: 10px;
}

.rail__scroller::-webkit-scrollbar {
    display: none;
}

.chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    /* Riempie quasi tutta l'altezza della barra: il bersaglio del pollice
       e' la pillola intera, non solo il testo. */
    height: 40px;
    padding: 0 var(--s4);
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: transparent;
    color: var(--cream-2);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.chip:hover {
    color: var(--cream);
    border-color: var(--line-strong);
}

.chip[aria-current="true"] {
    background: var(--brass);
    border-color: var(--brass);
    color: #17130a;
}

/* --------------------------------------------------- 11. Bottom sheet */

.sheet {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    visibility: hidden;
    pointer-events: none;
}

.sheet.is-open {
    visibility: visible;
    pointer-events: auto;
}

.sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 4, 5, .68);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--dur-3) var(--ease);
}

.sheet.is-open .sheet__backdrop {
    opacity: 1;
}

.sheet__panel {
    position: relative;
    width: 100%;
    max-width: var(--page);
    max-height: min(86vh, 760px);
    max-height: min(86svh, 760px);
    display: flex;
    flex-direction: column;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: var(--ink-850);
    border: 1px solid var(--line);
    border-bottom: 0;
    box-shadow: var(--sh-3);
    transform: translateY(100%);
    transition: transform var(--dur-3) var(--ease-out);
    will-change: transform;
}

.sheet.is-open .sheet__panel {
    transform: translateY(0);
}

.sheet.is-dragging .sheet__panel {
    transition: none;
}

.sheet__grip {
    flex: none;
    padding: var(--s3) 0 var(--s2);
    display: grid;
    place-items: center;
    cursor: grab;
    touch-action: none;
}

.sheet__grip::before {
    content: "";
    width: 42px;
    height: 4px;
    border-radius: var(--r-pill);
    background: var(--line-strong);
}

.sheet__close {
    position: absolute;
    top: var(--s3);
    right: var(--s3);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--ink-700);
    color: var(--cream-2);
    transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

.sheet__close:hover {
    background: var(--ink-800);
    color: var(--cream);
}

.sheet__body {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--s2) var(--s6) calc(var(--s8) + var(--safe-b));
}

/* Scheda piatto */
.dsheet__eyebrow {
    color: var(--brass);
}

.dsheet__name {
    margin-top: var(--s3);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.85rem, 8vw, 2.4rem);
    line-height: 1.08;
    color: var(--cream);
    text-wrap: balance;
}

.dsheet__price {
    margin-top: var(--s4);
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: var(--s2) var(--s4);
    border-radius: var(--r-pill);
    background: var(--brass-wash);
    border: 1px solid var(--brass-line);
    color: var(--brass-2);
    font-size: 1.1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dsheet__block {
    margin-top: var(--s6);
    padding-top: var(--s5);
    border-top: 1px solid var(--line);
}

.dsheet__label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--cream-3);
}

.dsheet__text {
    margin-top: var(--s3);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--cream-2);
}

.dsheet__note {
    margin-top: var(--s2);
    font-size: .875rem;
    line-height: 1.5;
    color: var(--cream-2);
}

/* -------------------------------------------------------- 12. Ricerca */

.search {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    flex-direction: column;
    background: var(--ink-900);
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2);
}

.search.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
}

.search__bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s3) var(--gut);
    border-bottom: 1px solid var(--line);
    background: var(--ink-850);
}

.search__field {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    height: 44px;
    padding-inline: var(--s3);
    border-radius: var(--r-pill);
    background: var(--ink-750);
    border: 1px solid var(--line);
}

.search__field:focus-within {
    border-color: var(--brass-line);
}

.search__field svg {
    flex: none;
    color: var(--cream-3);
}

.search__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding-inline: var(--s2);
    border: 0;
    background: none;
    color: var(--cream);
    /* 16px: sotto questa misura iOS zooma sul focus */
    font-size: 16px;
    font-family: inherit;
}

.search__input::placeholder {
    color: var(--cream-3);
}

.search__input::-webkit-search-cancel-button {
    display: none;
}

.search__clear {
    flex: none;
    width: 28px;
    height: 28px;
    display: none;
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--ink-700);
    color: var(--cream-2);
}

.search.has-query .search__clear {
    display: grid;
}

.search__cancel {
    flex: none;
    padding: var(--s2) var(--s1);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--brass-2);
}

.search__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--s5) var(--gut) calc(var(--s10) + var(--safe-b));
}

.search__meta {
    font-size: .8125rem;
    color: var(--cream-3);
    font-variant-numeric: tabular-nums;
}

.search__group {
    margin-top: var(--s6);
}

.search__group:first-child {
    margin-top: var(--s2);
}

.search__group-title {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--brass);
    padding-bottom: var(--s2);
    border-bottom: 1px solid var(--line);
}

.state {
    padding: var(--s10) var(--s4);
    text-align: center;
}

.state__icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--r-pill);
    background: var(--ink-800);
    border: 1px solid var(--line);
    color: var(--cream-3);
}

.state__title {
    margin-top: var(--s4);
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--cream);
}

.state__text {
    max-width: 34ch;
    margin: var(--s2) auto 0;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--cream-3);
}

mark {
    background: var(--brass-wash);
    color: var(--brass-2);
    border-radius: 3px;
    padding: 0 2px;
}

/* ----------------------------------------------------- 13. Allergeni */

.allergens__intro {
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--cream-2);
}

.allergens__list {
    margin-top: var(--s5);
    counter-reset: allergen;
}

.allergens__list li {
    position: relative;
    display: flex;
    gap: var(--s4);
    padding: var(--s4) 0;
    border-top: 1px solid var(--line);
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--cream-2);
}

.allergens__list li::before {
    counter-increment: allergen;
    content: counter(allergen);
    flex: none;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--brass-wash);
    border: 1px solid var(--brass-line);
    color: var(--brass-2);
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.allergens__staff {
    margin-top: var(--s5);
    padding: var(--s4) var(--s5);
    border-radius: var(--r-md);
    background: var(--ink-800);
    border: 1px solid var(--line);
    font-size: .875rem;
    line-height: 1.55;
    color: var(--cream-2);
}

/* ---------------------------------------------------------- 14. Footer */

.footer {
    margin-top: var(--s7);
    padding: var(--s8) 0 var(--s9);
    border-top: 1px solid var(--line);
    text-align: center;
}

.footer__mark {
    width: 54px;
    margin-inline: auto;
    opacity: .55;
}

.footer__allergen-cta {
    margin-top: var(--s6);
}

.footer__legal {
    margin-top: var(--s7);
    font-size: .8125rem;
    line-height: 1.7;
    color: var(--cream-3);
}

/* Il credito sta piu' in basso nella gerarchia del copyright del locale:
   e' una firma, non l'intestazione dell'attivita'. */
.footer__credit {
    margin-top: var(--s3);
    font-size: .75rem;
    line-height: 1.6;
    color: var(--cream-3);
}

.footer__legal a,
.footer__credit a {
    color: var(--cream-2);
    border-bottom: 1px solid var(--line-strong);
    transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.footer__legal a:hover,
.footer__credit a:hover {
    color: var(--brass-2);
    border-bottom-color: var(--brass-line);
}

/* --------------------------------------------- 15. Bottoni e controlli */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: 44px;
    padding: 0 var(--s6);
    border-radius: var(--r-pill);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .02em;
    border: 1px solid transparent;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
                border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

.btn:active {
    transform: scale(.97);
}

.btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

.btn--primary {
    background: var(--brass);
    color: #17130a;
}

.btn--primary:hover:not(:disabled) {
    background: var(--brass-2);
}

.btn--ghost {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--cream);
}

.btn--ghost:hover:not(:disabled) {
    border-color: var(--brass-line);
    color: var(--brass-2);
}

.icon-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    color: var(--cream-2);
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.icon-btn:hover {
    background: rgba(244, 241, 234, .07);
    color: var(--cream);
}

.icon-btn:active {
    transform: scale(.94);
}

/* Selettore lingua: <select> nativo, mascherato.
   Il picker di sistema resta il modo piu' rapido e accessibile di scegliere. */
.lang {
    position: relative;
    display: flex;
    align-items: center;
    height: 34px;
    padding-left: var(--s3);
    padding-right: var(--s5);
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    color: var(--cream-2);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.lang:hover {
    border-color: var(--line-strong);
    color: var(--cream);
}

.lang:focus-within {
    border-color: var(--brass-line);
    color: var(--cream);
}

.lang::after {
    content: "";
    position: absolute;
    right: 12px;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .7;
    pointer-events: none;
}

.lang select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 16px;
}

/* ------------------------------------------------ 16. Micro-interazioni */

/* Lo stato di partenza esiste solo se il JS e' vivo: senza script
   il contenuto e' comunque visibile, mai una pagina bianca. */
.js .reveal {
    opacity: 0;
    transform: translateY(14px);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
    }
}

/* ----------------------------------------------------- 17. Breakpoint */

/* 320-359px: telefoni piccoli. Si comprime il respiro, non la leggibilita'. */
@media (max-width: 359px) {
    :root {
        --gut: 16px;
    }

    .dish__desc {
        padding-right: var(--s4);
    }

    .chip {
        padding-inline: var(--s3);
    }
}

/* Da 600px: la colonna di lettura smette di crescere, l'aria aumenta. */
@media (min-width: 600px) {
    :root {
        --bar-h: 60px;
    }

    .section__head {
        margin-top: -56px;
    }

    .dish {
        padding-inline: var(--s3);
    }
}

/* Tablet e desktop: due colonne per le sezioni lunghe, barra categorie
   come pillola flottante centrata. Il layout resta una carta, non una dashboard. */
@media (min-width: 900px) {
    :root {
        --page: 900px;
        --rail-h: 60px;
    }

    body {
        padding-bottom: calc(var(--rail-h) + var(--s10));
    }

    .hero {
        min-height: calc(84vh - var(--bar-h));
        min-height: calc(84svh - var(--bar-h));
    }

    .section__list--split {
        column-count: 2;
        column-gap: var(--s9);
    }

    .section__list--split .dish {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }

    .rail {
        left: 50%;
        right: auto;
        bottom: var(--s6);
        transform: translateX(-50%);
        width: min(880px, calc(100vw - var(--s10)));
        border-radius: var(--r-pill);
        border: 1px solid var(--line);
        box-shadow: var(--sh-2);
        padding-inline: var(--s2);
    }

    .rail.is-away {
        transform: translateX(-50%) translateY(calc(100% + var(--s8)));
    }

    .sheet {
        align-items: center;
    }

    .sheet__panel {
        max-width: 620px;
        border-radius: var(--r-xl);
        border-bottom: 1px solid var(--line);
        transform: translateY(24px) scale(.98);
        opacity: 0;
        transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease);
    }

    .sheet.is-open .sheet__panel {
        transform: none;
        opacity: 1;
    }

    .sheet__grip {
        display: none;
    }

    .sheet__body {
        padding-top: var(--s7);
        padding-bottom: var(--s7);
    }

    .search__body {
        padding-top: var(--s7);
    }
}

@media (min-width: 1200px) {
    :root {
        --page: 1000px;
    }
}

/* Stampa: la carta dei vini che il locale puo' stampare davvero. */
@media print {
    :root {
        --cream: #000;
        --cream-2: #333;
        --cream-3: #555;
        --brass: #000;
    }

    body {
        background: #fff;
        color: #000;
        padding: 0;
    }

    .topbar,
    .rail,
    .sheet,
    .search,
    .section__banner,
    .hero__cta,
    .skip-link {
        display: none !important;
    }

    .section {
        break-inside: avoid;
    }

    .section__head {
        margin-top: 0;
    }
}