/* ===== INIZIO SEZIONE: brand-kit ===== */
/*
 * BRAND KIT — Carne e Spirito, v1
 * Valori ricavati dal markup dell'export di Claude Design (Brand Kit + Homepage).
 *
 * Cosa NON sta qui, perche' e' governato dai parametri del template (fieldset Tema e
 * Tipografia dello stile "kwtemplate - Predefinito"): font principale, dimensione base del
 * testo, peso e interlinea del testo, colore testi/titoli/link e relativo hover, vestizione
 * completa dei bottoni nei due stati, dimensione, famiglia e interlinea di h1-h6. Il plugin
 * "csscompile" li compila in css/style.min.css al salvataggio dello stile del template.
 * Qui non si riscrivono: si eredita.
 *
 * Cosa sta qui: i token di brand del sito, e i componenti che il template non conosce.
 *
 * PER SOVRASCRIVERE IL TEMPLATE: non serve alzare la specificita'. Il template dichiara i
 * propri valori come custom property --kwtemplate-* in un blocco :root in testa a
 * css/style.min.css. L'elenco completo, con i valori correnti, si legge la' o in DevTools
 * ispezionando :root. Per cambiarli in un contesto basta ridefinirli su un contenitore:
 *
 *   .sezione-chiara { --kwtemplate-btn-bg: var(--cs-bordeaux); --kwtemplate-btn-fg: var(--cs-sabbia); }
 *
 * e l'ereditarieta' li porta a tutti i bottoni dentro quella sezione, hover compreso.
 *
 * I token si risolvono al calcolo del valore, quindi valgono anche nei CSS dei moduli,
 * caricati dopo questo foglio.
 */
:root {
    /* --- Palette. I ruoli sono quelli dichiarati nel brand kit --- */
    --cs-espresso: #32211B; /* titoli e testo su fondo chiaro */
    --cs-bordeaux: #53130D; /* primario: superfici scure, CTA */
    --cs-terracotta: #A2624B; /* accento, link, filetti */
    --cs-rame: #BD8470; /* testo secondario, occhielli, h1 su fondo scuro */
    --cs-rosa: #D4AEA0; /* hover, bordi, stati secondari */
    --cs-sabbia: #EDDDD2; /* sfondo del sito, testo su Bordeaux */

    /* --- Scala dei testi piccoli ---
     * In em relativi alla base impostata da backend su body#art-main (oggi 17px).
     * Attenzione: em e' relativo al font-size del genitore, non alla base. Questi token si
     * applicano su elementi il cui genitore e' alla dimensione base; dentro un contenitore
     * gia' rimpicciolito si annidano e sbagliano. Per questo sono token di CONTENUTO: nei
     * componenti riutilizzabili la dimensione va in px, che rende uguale in ogni contesto. */
    --cs-fs-small: 0.882em; /* 15px — didascalie, note, testo secondario, label form */
    --cs-fs-label: 0.765em; /* 13px — occhielli, bottoni, voci di menu */
    --cs-fs-mini: 0.706em; /* 12px — micro etichette */

    /* --- Decisioni di brand su superfici e spaziature (sezione "Spazi & superfici") --- */
    --cs-ls: 0.14em; /* spaziatura lettere di occhielli e bottoni */
    --cs-raggio-bottone: 3px; /* bottoni, campi form */
    --cs-raggio-media: 8px; /* immagini e video */
    --cs-raggio-card: 14px; /* card e riquadri */
    --cs-bordo: 1px solid var(--cs-rosa); /* filetto standard, su Sabbia e su Bordeaux */
    --cs-filetto: 2px; /* spessore dei filetti delle liste */
    --cs-gocce: url(../../../images/homepage/pattern-gocce.svg); /* piastrella del pattern */
    --cs-max-contenuto: 1180px; /* larghezza massima della griglia a 12 colonne */
    /* La gutter del brand kit e' 24px, cioe' il valore di serie di Bootstrap: non serve un token.
     * Ombre: nessuna. La gerarchia si costruisce con contrasto e spazio. */
}

/* ===== FINE SEZIONE: brand-kit ===== */

/* ===== INIZIO SEZIONE: azioni ===== */
/* Secondo e terzo livello di azione, piu' la freccia. Il primo livello e' .art-button, vestito
 * dai parametri del Tema: qui non si tocca. */
.cs-freccia {
    --cs-freccia-spazio: 36px;
    display: inline-flex;
    align-items: center;
}

.cs-freccia::after {
    content: "\2192";
    margin-left: var(--cs-freccia-spazio);
    line-height: 1;
}

.cs-azione {
    --cs-freccia-spazio: 40px;
    color: var(--cs-azione-fg, var(--cs-espresso));
    /* In rem e non col token --cs-fs-label, che e' in em: un componente puo' finire dentro un
     * paragrafo di qualunque dimensione. */
    font-size: var(--cs-azione-fs, 0.8125rem); /* 13px */
    letter-spacing: var(--cs-ls);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.cs-azione--filetto {
    --cs-freccia-spazio: 44px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--cs-azione-filetto, var(--cs-terracotta));
}

.cs-azione:hover,
.cs-azione:focus-visible {
    color: var(--cs-azione-fg-hover, var(--cs-azione-fg, var(--cs-espresso)));
    font-weight: 600;
}

/* Variante bordata del bottone: usata sulle sezioni scure. Non e' una classe che rifa' il
 * bottone, ridefinisce le variabili del template, hover compreso. */
.art-button--filetto {
    --kwtemplate-btn-bg: transparent;
    --kwtemplate-btn-fg: var(--cs-rosa);
    --kwtemplate-btn-border-color: var(--cs-rosa);
    --kwtemplate-btn-bg-hover: var(--cs-rosa);
    --kwtemplate-btn-fg-hover: var(--cs-bordeaux);
    --kwtemplate-btn-border-color-hover: var(--cs-rosa);
}

/* Link nel contenuto: colore e hover dai parametri, qui solo il peso. Il :not() salva i bottoni
 * e le azioni, che hanno un peso proprio. */
.art-postcontent a:not(.art-button):not(.cs-azione) {
    font-weight: 600;
}

/* ===== FINE SEZIONE: azioni ===== */

/* ===== INIZIO SEZIONE: occhiello ===== */
/* Il colore non e' dichiarato: nel design l'occhiello segue sempre il testo intorno. */
.cs-occhiello {
    margin: 0;
    font-size: 0.8125rem; /* 13px */
    letter-spacing: var(--cs-occhiello-ls, var(--cs-ls));
    text-transform: uppercase;
}

/* ===== FINE SEZIONE: occhiello ===== */

/* ===== INIZIO SEZIONE: intro ===== */
/* Paragrafo di apertura in serif. Non riscrive font ne' dimensione: prende la famiglia dei titoli
 * e la scala dell'h6, che nel brand kit e' proprio 21px. */
.cs-intro, .cs-riquadro p.cs-intro {
    margin: 0;
    font-family: var(--kwtemplate-heading-font-family);
    font-size: var(--kwtemplate-h6-size);
    line-height: 1.333; /* 21/28 */
}

.cs-riquadro p.cs-intro {
    margin-top: 18px;
}

/* ===== FINE SEZIONE: intro ===== */

/* ===== INIZIO SEZIONE: card ===== */
/* L'azione in fondo e' spinta giu' da margin-top:auto, cosi' due card affiancate hanno i link
 * allineati. Richiede h-100 sulla card, per farla alta come la colonna. */
.cs-card {
    display: flex;
    flex-direction: column;
    background: var(--cs-sabbia);
    color: var(--cs-espresso);
    min-height: 550px;
}

/* Le immagini degli articoli arrivano con formati qualunque e a parita' di larghezza darebbero
 * altezze diverse, sfalsando i titoli delle card affiancate. */
.cs-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.cs-card-corpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 24px 26px 26px;
}

.cs-card-corpo h3 {
    margin: 12px 0 0;
}

.cs-card-corpo p {
    margin: 12px 0 0;
    font-size: var(--cs-fs-small); /* 15px */
    line-height: 1.333; /* 15/20 */
}

/* L'azione o il bottone vanno in fondo a destra, qualunque sia la lunghezza del testo. */
.cs-card-corpo .cs-azione,
.cs-card-corpo .art-button {
    margin-top: auto;
    align-self: flex-end;
}

/* Solo sull'azione: su un bottone pieno il padding deformerebbe la superficie. */
.cs-card-corpo .cs-azione {
    padding-top: 20px;
}

/* ===== FINE SEZIONE: card ===== */

/* ===== INIZIO SEZIONE: gocce ===== */
/* Fascia col pattern a gocce. L'altezza e' una variabile perche' cambia per sezione. */
.cs-gocce {
    height: var(--cs-gocce-altezza, 113px);
    background: var(--cs-gocce) repeat;
    background-size: 56px 56px;
}

@media (max-width: 767.98px) {
    .cs-gocce {
        height: 72px;
    }
}

/* ===== FINE SEZIONE: gocce ===== */

/* ===== INIZIO SEZIONE: filo ===== */
/*
 * Filo verticale Terracotta fra due sezioni. Le classi vanno nel campo Classe del modulo:
 * cs-filo-prima lo attacca in cima alla sezione, cs-filo-dopo in fondo. Dove il filo scavalca il
 * confine fra due fondi si mettono entrambe, una per sezione.
 */
.cs-filo-prima::before,
.cs-filo-dopo::after {
    content: "";
    display: block;
    width: var(--cs-filo-spessore, 2px);
    height: var(--cs-filo-altezza, 50px);
    background: var(--cs-terracotta);
}

/* Lo stacco sta fra il filo e il contenuto, quindi cade da lati opposti nei due casi. */
.cs-filo-prima::before {
    margin: 0 auto var(--cs-filo-stacco, 0);
}

.cs-filo-dopo::after {
    margin: var(--cs-filo-stacco, 0) auto 0;
}

/* ===== FINE SEZIONE: filo ===== */

/* ===== INIZIO SEZIONE: riquadro ===== */
/*
 * Riquadro col filetto, per i box informativi. Padding e colore del bordo sono variabili.
 * I riquadri piu' vecchi — .cs-newsletter, .cs-hotel-noce — hanno regole proprie: da qui in poi
 * si usa questo.
 */
.cs-riquadro {
    padding: var(--cs-riquadro-padding, 26px 30px 30px);
    border: 1px solid var(--cs-riquadro-bordo, var(--cs-terracotta));
}

/* Lo stacco fra le righe del riquadro. I due selettori hanno la stessa specificita' e conta
 * l'ordine: prima si azzerano i margini, poi si da' il distacco dal secondo figlio in poi. */
.cs-riquadro > * {
    margin: 0;
}

.cs-riquadro > * + * {
    margin-top: 18px;
}

.cs-riquadro p {
    font-size: var(--cs-fs-small); /* 15px */
}

/* ===== FINE SEZIONE: riquadro ===== */

/* ===== INIZIO SEZIONE: metodo ===== */
/*
 * Voce di elenco col filetto sopra il titolo. Funziona sia impilata sia affiancata in colonne,
 * perche' lo stacco fra le voci e' il padding e non un margine fra fratelli.
 */
.cs-metodo {
    position: relative;
}

/* Il filetto non e' un border-top: quello include la gutter, e due voci affiancate darebbero una
 * linea continua. In absolute, rientrato di mezza gutter, resta larga quanto il contenuto. */
.cs-metodo::before {
    content: "";
    position: absolute;
    top: 0;
    right: calc(var(--bs-gutter-x) * .5);
    left: calc(var(--bs-gutter-x) * .5);
    height: 1px;
    background: var(--cs-metodo-filetto, var(--cs-terracotta));
}

.cs-metodo h4 {
    margin: 25px 0 12px 0;
    color: inherit;
}

.cs-metodo p {
    margin: 0;
    font-size: var(--cs-fs-small); /* 15px */
    line-height: 1.333;
}

.cs-metodo p + p {
    margin-top: 12px;
}

/* ===== FINE SEZIONE: metodo ===== */

/* ===== INIZIO SEZIONE: campi ===== */
/*
 * Agganciato alle classi di Bootstrap e non ai tag: i campi arrivano dal modulo contatti, che
 * stampa la classe scelta nel campo, e i tag colpirebbero anche ricerca, cookie e form di terzi.
 * Da impostare nel form: "form-control" su testo, email, telefono, data e area di testo,
 * "form-select" sulle tendine.
 *
 * Fondo, testo, filetto e spunta sono variabili: su fondo chiaro i campi sono bianchi senza
 * filetto, su fondo scuro trasparenti col filetto Rosa.
 */
.form-control,
.form-select {
    padding: 13px 14px;
    border: 1px solid var(--cs-campo-bordo, transparent);
    border-radius: var(--cs-raggio-bottone);
    background-color: var(--cs-campo-bg, #fff);
    color: var(--cs-campo-fg, var(--cs-espresso));
    font-size: 0.875rem; /* 14px */
}

.form-control::placeholder,
.form-select::placeholder {
    color: var(--cs-campo-fg, var(--cs-espresso));
    opacity: 1; /* Firefox li schiarisce, il design li vuole pieni */
    text-transform: uppercase;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cs-campo-bordo, transparent);
    background-color: var(--cs-campo-bg, #fff);
    color: var(--cs-campo-fg, var(--cs-espresso));
    box-shadow: 0 0 0 2px var(--cs-rosa);
}

/* Freccia delle tendine disegnata, come nel brand kit. */
.form-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--cs-campo-fg, var(--cs-espresso)) 50%),
    linear-gradient(135deg, var(--cs-campo-fg, var(--cs-espresso)) 50%, transparent 50%);
    background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}

.form-check-input {
    width: 15px;
    height: 15px;
    margin-top: 2px;
    border: none;
    border-radius: 0;
    background-color: var(--cs-campo-bg, #fff);
    accent-color: var(--cs-campo-accento, var(--cs-bordeaux));
}

.form-check-input:checked {
    background-color: var(--cs-campo-accento, var(--cs-bordeaux));
    border-color: var(--cs-campo-accento, var(--cs-bordeaux));
}

.form-check-label {
    padding-left: 6px;
    font-size: var(--cs-fs-mini); /* 12px */
    line-height: 1.417; /* 12/17 */
    cursor: pointer;
}

/* ===== FINE SEZIONE: campi ===== */

/* ===== INIZIO SEZIONE: hero ===== */
/* La .row va con g-0: le due meta' sono adiacenti, e fuori da un contenitore con padding la
 * gutter di serie la farebbe sbordare di 12px per lato. */
.cs-hero {
    /* Override locali: solo colori. Le DIMENSIONI dei testi non si sovrascrivono per sezione, si
     * usa la scala del brand kit anche dove la pagina se ne discosta — qui l'h1 dell'export e'
     * 50/55 e resta il 60/65 dei parametri. */
    --kwtemplate-h1-fg: var(--cs-rosa);
    --kwtemplate-text-fg: var(--cs-rosa);
    /* Il bottone qui e' trasparente col solo bordo, come nel brand kit: lo sfondo lo da' la
     * sezione. Dichiararlo esplicitamente invece di contare sul fatto che il colore del bottone
     * coincida con quello della hero. */
    --kwtemplate-btn-bg: transparent;
    --cs-occhiello-ls: 0.22em;

    position: relative;
    overflow: hidden;
}

.cs-hero__griglia {
    min-height: 100vh;
}

.cs-hero__media {
    width: 100%;
    height: 100%;
    background: #2B1512; /* colore di attesa dietro al video, dall'export */
}

.cs-hero__video {
    display: block;
}

/* Velo Bordeaux sul video: nell'export e' un div dedicato, qui basta uno pseudo-elemento. */
.cs-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cs-bordeaux);
    opacity: 0.42;
}

.cs-hero__contenuto {
    padding: 50px 100px;
    color: var(--cs-rosa);
    height: 100%;
}

.cs-hero__logo {
    display: block;
    max-width: 370px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.cs-hero__occhiello {
    margin-top: 14px;
}

.cs-hero__titolo {
    margin: 50px 0 0;
}

.cs-hero__testo {
    margin: 20px 0 0;
    font-size: var(--cs-fs-small);
    line-height: 1.467;
    text-wrap: pretty;
    color: var(--cs-rosa);
}

.cs-hero__cta {
    margin-top: 36px;
}

/* Fascia di gocce sul bordo inferiore, sopra entrambe le colonne. Il padding inferiore del
 * contenuto e' piu' alto della fascia, cosi' il testo non ci finisce sopra. */
.cs-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 113px;
    background: var(--cs-gocce) repeat;
    background-size: 56px 56px;
    pointer-events: none;
}

/* Chi ha chiesto al sistema operativo di ridurre le animazioni non vede il video: al suo posto
 * resta il poster. L'immagine e' dichiarata solo qui dentro, quindi il browser la scarica solo
 * se la preferenza e' attiva. */
@media (prefers-reduced-motion: reduce) {
    .cs-hero__media {
        background-image: url(../../../images/homepage/hero-poster.jpg);
        background-position: center;
        background-size: cover;
    }

    .cs-hero__video {
        display: none;
    }
}

/* Impilate, l'altezza della riga va azzerata e la colonna del video, che non ha contenuto,
 * ne ha bisogno di una propria. L'export non ha un layout mobile: misure nostre. */
@media (max-width: 991.98px) {
    .cs-hero__griglia {
        min-height: 0;
    }

    .cs-hero__media {
        min-height: 320px;
    }

    .cs-hero__contenuto {
        padding: 72px 32px 110px;
    }

    .cs-hero__logo {
        width: 280px;
    }

    .cs-hero__titolo {
        margin-top: 36px;
    }
}

@media (max-width: 767.98px) {
    .cs-hero__media {
        min-height: 260px;
    }

    .cs-hero__contenuto {
        padding: 56px 20px 96px;
    }

    .cs-hero__logo {
        width: 220px;
    }

    .cs-hero__titolo {
        margin-top: 28px;
    }

    .cs-hero::after {
        height: 72px;
    }
}

/* ===== FINE SEZIONE: hero ===== */

/* ===== INIZIO SEZIONE: ristorante ===== */
/* Ogni punto e' un .row con col-auto per il numero e col per il testo: numero e testo si stilano
 * per struttura, cosi' l'HTML non porta classi. */
.cs-ristorante {
    /* La CTA di questa sezione e' piena, senza filetto, e in hover va su Espresso invece che su
     * Rosa: il brand kit governa il bottone globale, questa e' la variante locale. */
    --kwtemplate-btn-border-color: transparent;
    --kwtemplate-btn-bg-hover: var(--cs-espresso);
    --kwtemplate-btn-fg-hover: var(--cs-sabbia);

    /* Colore di sfondo e contenitore arrivano dai parametri del modulo. Qui solo le spaziature
     * verticali, per cui non esiste un parametro. */
    padding: 96px 0 112px;
}

/* Posizionato per poter appendere il filo verticale. */
.cs-ristorante .container {
    position: relative;
}

/* Filo verticale Terracotta sopra il titolo. E' decorativo, quindi sta nel CSS e non nell'HTML.
 * L'ascissa e' la gutter del contenitore: 12px del contenitore piu' 12px della colonna, cosi'
 * il filo cade esattamente sul bordo sinistro del testo. */
.cs-ristorante .container::before {
    content: "";
    position: absolute;
    top: -96px;
    width: 1px;
    height: 48px;
    background: var(--cs-terracotta);
}

.cs-ristorante h2 {
    margin: 14px 0 26px;
}

/* --- I quattro punti --- */

/* Il filetto separa i punti fra loro: nasce dal secondo in poi, quindi non serve markup. */
.cs-punti .row {
    padding-bottom: 25px;
}

/* Il colore del filetto e' una variabile: su fondo scuro e' Rosa, su fondo chiaro Espresso.
 * Cosi' una sezione lo cambia senza duplicare il componente. */
.cs-punti .row + .row {
    padding-top: 28px;
    border-top: 1px solid var(--cs-punti-filetto, var(--cs-rosa));
}

/* Variante con icona al posto del numero: si riconosce dal contenuto della colonna, cosi' l'HTML
 * non porta classi e la regola vale in ogni sezione. */
.cs-punti .row > .col-auto:has(img) {
    width: 92px;
    padding-left: 0;
    margin-top: 0;
}

.cs-punti .row > .col-auto img {
    width: 60px;
    height: 46px;
    object-fit: contain;
}

/* Larghezza fissa per tenere i titoli incolonnati. Il corpo e' la scala dell'h1, non i 74px
 * dell'export: cosi' il numero e' fluido come i titoli. */
.cs-punti .row > .col-auto {
    width: 88px;
    padding-left: 20px;
    font-size: var(--kwtemplate-h1-size);
    font-weight: 100;
    line-height: 0.68;
    color: var(--cs-espresso);
    margin-top: 10px;
}

.cs-punti .row h3 {
    margin: 0 0 8px;
}

.cs-punti .row p {
    margin: 0;
    font-size: var(--cs-fs-small); /* 15px */
    line-height: 1.333; /* 15/20 */
}

.cs-punti .art-button {
    margin-top: 52px;
}

@media (max-width: 991.98px) {
    .cs-ristorante {
        padding: 72px 0 80px;
    }

    .cs-ristorante h2 {
        margin-bottom: 20px;
    }

    /* Le due colonne principali sono gia' impilate da col-lg-*: qui serve solo lo stacco. */
    .cs-punti {
        margin-top: 56px;
    }
}

@media (max-width: 767.98px) {
    /* Il corpo lo scala gia' il clamp dell'h1: qui basta ridurre la colonna. */
    .cs-punti .row > .col-auto {
        width: 64px;
        padding-left: 0;
    }

    .cs-punti .row {
        padding-bottom: 32px;
    }

    .cs-punti .row + .row {
        padding-top: 24px;
    }
}

/* ===== FINE SEZIONE: ristorante ===== */

/* ===== INIZIO SEZIONE: paride ===== */
.cs-paride {
    --kwtemplate-h2-fg: var(--cs-rosa);
    --kwtemplate-text-fg: var(--cs-rosa);

    padding: 96px 0 112px;
}

.cs-paride .cs-occhiello {
    color: var(--cs-rosa);
}

.cs-paride h2 {
    margin: 24px 0 38px;
}

.cs-paride p {
    color: var(--cs-rosa);
}

/* La prima immagine sta a cavallo del confine con la sezione sopra. La percentuale si calcola
 * sulla larghezza della colonna: l'accavallamento resta proporzionato, un valore in px no. */
.cs-paride .row > div:first-child img.img-fluid:first-child {
    margin-top: -105%;
}

.cs-paride .row > div:first-child img + img {
    margin-top: 24px;
}

/* Riquadro della citazione. Filetto e colore del testo sono variabili, perche' il riquadro
 * ricorre su fondo scuro (Terracotta e Sabbia) e su fondo chiaro (Espresso su entrambi). */
.cs-citazione {
    margin-top: 48px;
    padding: 20px 24px;
    border: 1px solid var(--cs-citazione-bordo, var(--cs-terracotta));
    color: var(--cs-citazione-fg, var(--cs-sabbia));
}

.cs-citazione .cs-citazione-testo {
    display: flex;
}

.cs-citazione .cs-citazione-testo p {
    margin: 0;
    font-size: var(--kwtemplate-h6-size);
    line-height: 1.333;
}

.cs-citazione img {
    margin: 0;
    max-width: 100px;
}

img.g-reviews {
    max-width: 100px;
    width: 100% !important;
}

/* Spazio fra le virgolette e il testo. I selettori in .cs-paride e .cs-vini fanno lo stesso e
 * vincono per specificita': si possono togliere. */
.cs-citazione .cs-citazione-testo img {
    margin: 0 var(--cs-citazione-spazio, 30px) 0 0;
    align-self: baseline;
}

@media (max-width: 575.98px) {
    /* A questa larghezza il logo accanto al testo lo riduce a una parola per riga: deve andare
     * sotto. La min-width sulla colonna del testo manda a capo la row, che e' gia' flex-wrap. */
    .cs-citazione .cs-citazione-testo {
        min-width: 100%;
    }

    .cs-citazione .col-auto {
        margin-top: 14px;
    }
}


@media (max-width: 991.98px) {
    .cs-paride {
        padding: 72px 0 80px;
    }

    .cs-paride h2 {
        margin-top: 40px;
    }

    /* Impilate, le due immagini non hanno piu' una sezione sopra su cui accavallarsi. */
    .cs-paride .row > div:first-child img:first-child {
        margin-top: 0;
    }
}

/* ===== FINE SEZIONE: paride ===== */

/* ===== INIZIO SEZIONE: guide ===== */
/* Il pannello Sabbia e' un riquadro interno, per cui un parametro non c'e'. */
.cs-guide {
    --kwtemplate-btn-border-color: transparent;
    --kwtemplate-btn-bg-hover: var(--cs-espresso);
    --kwtemplate-btn-fg-hover: var(--cs-sabbia);

    position: relative;
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Filo verticale Terracotta che scende sul pannello. */
.cs-guide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 80px;
    background: var(--cs-terracotta);
}

.cs-guide-pannello {
    padding: 52px 70px 46px;
    background: var(--cs-sabbia);
}

.cs-guide-pannello h2 {
    margin: 0;
}

.cs-guide-pannello .cs-intro {
    margin: 40px auto 0;
    max-width: 600px;
}

.cs-guide-loghi {
    max-width: 1000px;
    margin: 50px auto;
}

/* Altezza ottica costante per tutti i loghi, come chiede il brand kit: le immagini hanno
 * proporzioni molto diverse, quindi si vincola l'altezza e la larghezza segue. */
.cs-guide-loghi img {
    max-height: 40px;
    width: auto;
}

.cs-guide-pannello .art-button {
    margin-top: 44px;
}

@media (max-width: 767.98px) {
    .cs-guide-pannello {
        padding: 36px 24px 32px;
    }

    .cs-guide-loghi img {
        max-height: 32px;
    }
}

/* ===== FINE SEZIONE: guide ===== */

/* ===== INIZIO SEZIONE: carni ===== */
/* Carosello col layout "carni", override in templates/kwtemplate/html/mod_kw_owl_carousel/.
 * La vestizione sta qui e non in media/, che gli aggiornamenti del modulo sovrascrivono.
 * I fogli di owl sono caricati DOPO questo e stilano le frecce a (0,3,0): per questo i selettori
 * delle frecce qui arrivano a (0,4,1). */
.cs-carni {
    position: relative;
    padding: 78px 0 0;
}

.cs-carni .cs-occhiello {
    color: var(--cs-rosa);
}

.cs-carni h2 {
    margin: 12px 0 0;
    color: var(--cs-rosa);
}

.cs-carni .cs-intro {
    margin: 16px 0 0;
    max-width: 840px;
    color: var(--cs-rosa);
}

.cs-carni-carosello {
    margin-top: 60px;
}

.cs-carni .art-button {
    margin-top: 50px;
}

/* Filo verticale Terracotta che chiude la sezione. */
.cs-carni::after {
    content: "";
    display: block;
    width: 2px;
    height: 50px;
    margin: 60px auto 0;
    background: var(--cs-terracotta);
}

/* --- Struttura delle slide --- */

.cs-carni .kw-owl-carni .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cs-carni .kw-owl-carni .kw-carni-media {
    display: block;
    width: 100%;
}

.cs-carni .kw-owl-carni .kw-carni-media img {
    display: block;
    width: 100%;
}

.cs-carni .kw-owl-carni .kw-carni-origine {
    padding: 4px 9px;
    font-size: 0.6875rem; /* 11px */
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cs-carni .kw-owl-carni .kw-carni-titolo {
    margin: 14px 0 0;
}

.cs-carni .kw-owl-carni .kw-carni-titolo a {
    text-decoration: none;
    color: inherit;
}

.cs-carni .kw-owl-carni .kw-carni-testo {
    margin: 12px 0 0;
}

/* Frecce fuori dalla cornice delle slide, all'altezza dell'immagine. */
.cs-carni .kw-owl-carni .owl-nav {
    margin: 0;
}

.cs-carni .kw-owl-carni .owl-nav button.owl-prev,
.cs-carni .kw-owl-carni .owl-nav button.owl-next {
    position: absolute;
    top: 30%;
    margin: 0;
    padding: 0;
    background: none;
    line-height: 1;
}

.cs-carni .kw-owl-carni .owl-nav button.owl-prev {
    left: -56px;
}

.cs-carni .kw-owl-carni .owl-nav button.owl-next {
    right: -40px;
}

/* --- Colori del design --- */


.cs-carni .kw-owl-carni .kw-carni-origine {
    background: var(--cs-rame);
    color: #fff;
}

.cs-carni .kw-owl-carni .kw-carni-titolo {
    color: var(--cs-rosa);
}

.cs-carni .kw-owl-carni .kw-carni-testo {
    color: var(--cs-rosa);
    font-size: var(--cs-fs-small); /* 15px */
    line-height: 1.333; /* 15/20 */
}

/* Frecce: nell'export sono al 70% di opacita' e piene al passaggio del mouse. */
.cs-carni .kw-owl-carni .owl-nav button.owl-prev,
.cs-carni .kw-owl-carni .owl-nav button.owl-next {
    opacity: 0.7;
    transition: opacity 0.2s;
    cursor: pointer;
}

.cs-carni .kw-owl-carni .owl-nav button.owl-prev:hover,
.cs-carni .kw-owl-carni .owl-nav button.owl-next:hover {
    opacity: 1;
}

@media (max-width: 991.98px) {
    .cs-carni {
        padding-top: 56px;
    }

    .cs-carni-carosello {
        margin-top: 40px;
    }

    /* Con meno spazio le frecce non stanno fuori dalla cornice: rientrano sopra le slide. */
    .cs-carni .kw-owl-carni .owl-nav button.owl-prev {
        left: 0;
    }

    .cs-carni .kw-owl-carni .owl-nav button.owl-next {
        right: 0;
    }
}

/* ===== FINE SEZIONE: carni ===== */

/* ===== INIZIO SEZIONE: esperienza ===== */
/* La foto e' l'"Immagine di background" del modulo, quindi nell'HTML non c'e' nessun <img>.
 * Il chrome scrive solo background-image: inquadratura e altezza restano qui. */
.cs-esperienza {
    min-height: 520px;
    padding: 0 0 150px;
    background-color: #2B1512;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cs-esperienza::before {
    content: "";
    display: block;
    width: 2px;
    height: 50px;
    margin: 0 auto;
    background: var(--cs-terracotta);
    position: relative;
    z-index: 1;
}

.cs-esperienza-pannello {
    padding: 64px 74px 50px;
    margin: -50px;
    background: var(--cs-sabbia);
}

.cs-esperienza-pannello h2 {
    margin: 0;
}

.cs-esperienza-voci {
    margin-top: 34px;
}

.cs-esperienza-voci img {
    height: 42px;
    width: auto;
}

/* Le etichette riusano il paragrafo serif del brand kit: cambia solo lo stacco dall'icona. */
.cs-esperienza-voci .cs-intro {
    margin-top: 12px;
}

@media (max-width: 767.98px) {
    .cs-esperienza-pannello {
        padding: 32px 24px 36px;
    }

    .cs-esperienza-voci img {
        height: 34px;
    }
}

/* ===== FINE SEZIONE: esperienza ===== */

/* ===== INIZIO SEZIONE: vini ===== */
/* Struttura identica alla sezione Ristorante: riusa .cs-punti e .cs-citazione ridefinendone le
 * variabili, perche' qui il fondo e' chiaro. Al posto del numerone c'e' un'icona. */
.cs-vini {
    --cs-punti-filetto: var(--cs-espresso);
    --cs-citazione-bordo: var(--cs-espresso);
    --cs-citazione-fg: var(--cs-espresso);

    padding: 70px 0;
}

.cs-vini h2 {
    margin: 12px 0 22px;
}

.cs-vini .cs-intro {
    margin-bottom: 36px;
}

.cs-vini .cs-citazione-firma {
    margin: 18px 0 0;
    font-size: 0.8125rem; /* 13px */
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

@media (max-width: 991.98px) {
    .cs-vini {
        padding: 56px 0;
    }

    .cs-vini .cs-punti {
        margin-top: 40px;
    }
}

/* ===== FINE SEZIONE: vini ===== */

/* ===== INIZIO SEZIONE: hotel ===== */
/* Card e fascia di gocce sono componenti condivisi: qui solo colori e spaziature. */
.cs-hotel {
    /* Dentro le card il fondo torna chiaro, quindi il filetto dell'azione va in Espresso. */
    --cs-azione-filetto: var(--cs-espresso);

    padding: 200px 0 0;
}

.cs-hotel .cs-occhiello {
    color: var(--cs-rosa);
}

.cs-hotel h2 {
    margin: 12px 0 24px;
    color: var(--cs-rosa);
}

.cs-hotel .cs-intro {
    color: var(--cs-rosa);
}

.cs-hotel-testata {

}

.cs-hotel .cs-gocce {
    margin-top: 70px;
}

@media (max-width: 991.98px) {
    .cs-hotel {
        padding-top: 56px;
    }

    .cs-hotel-testata {
        padding-top: 0;
        margin-bottom: 40px;
    }

    .cs-hotel .cs-gocce {
        margin-top: 48px;
    }
}

/* ===== FINE SEZIONE: hotel ===== */

/* ===== INIZIO SEZIONE: faq ===== */
/* La form della newsletter e' una maschera in attesa di Mailchimp: usa le classi del componente
 * "campi", quindi al codice vero bastera' conservarle. */
.cs-faq {
    padding-top: 76px;
}

.cs-faq .cs-occhiello,
.cs-faq h2,
.cs-faq h3,
.cs-faq .cs-intro,
.cs-faq p {
    color: var(--cs-rosa);
}

.cs-faq h3 {
    margin: 12px 0 18px;
}

.cs-faq .art-button {
    margin-top: 14px;
}

.cs-faq .row-faq-newsletter {
    margin-bottom: 150px;
}

.cs-faq input::placeholder {
    color: var(--kwtemplate-text-fg, inherit)
}

.cs-faq input {
    background-color: #fff;
    color: var(--kwtemplate-text-fg, inherit)
}

.cs-faq input.form-control:focus, .cs-faq input.form-select:focus {
    background-color: #fff;
    color: var(--kwtemplate-text-fg, inherit)
}

.cs-faq label.form-check-label {
    color: var(--cs-rosa);
}

.cs-faq label.form-check-label a, .cs-faq label.form-check-label a:link, .cs-faq label.form-check-label a:hover {
    color: var(--cs-rosa);
}

/* --- Il riquadro della newsletter --- */
.cs-newsletter {
    /* Su fondo scuro i campi sono trasparenti col filetto Rosa, non bianchi: la variante si
     * ottiene ridefinendo le variabili del componente "campi". */
    --cs-campo-bg: transparent;
    --cs-campo-fg: var(--cs-rosa);
    --cs-campo-bordo: var(--cs-rosa);
    --cs-campo-accento: var(--cs-rosa);

    padding: 32px 36px 36px;
    border: 1px solid var(--cs-terracotta);
}

.cs-newsletter h3 {
    margin: 12px 0 16px;
}

.cs-newsletter-form {
    margin-top: 14px;
}

.cs-newsletter-form .row {
    --bs-gutter-x: 12px;
}

.cs-newsletter-azioni {
    margin-top: 8px;
}

.cs-newsletter-nota {
    margin: 0;
    font-size: var(--cs-fs-mini); /* 12px */
}

@media (max-width: 991.98px) {
    .cs-faq {
        padding-top: 56px;
    }

    .cs-newsletter {
        margin-top: 40px;
    }
}

@media (max-width: 767.98px) {
    .cs-newsletter {
        padding: 24px 22px 26px;
    }
}

/* ===== FINE SEZIONE: faq ===== */

/* ===== INIZIO SEZIONE: prenota ===== */
/* La form e' mod_kw_contact; i campi li veste il componente "campi", qui il pannello e il
 * bottone. L'ancora #prenota va nel campo "ID del modulo": e' la destinazione delle CTA. */
.cs-prenota {
    /* Il bottone di invio e' pieno, senza filetto, e in hover va su Espresso. */
    --kwtemplate-btn-border-color: transparent;
    --kwtemplate-btn-bg-hover: var(--cs-espresso);
    --kwtemplate-btn-fg-hover: var(--cs-sabbia);
    /* La fascia di gocce qui e' piu' bassa che nel Wine Hotel. */
    --cs-gocce-altezza: 113px;

    padding-bottom: 76px;
}

.cs-prenota-pannello {
    background: var(--cs-sabbia);
}

.cs-prenota-contenuto {
    padding: 40px 96px 60px;
}

.cs-prenota h2 {
    margin: 0;
}

.cs-prenota .cs-intro {
    margin: 14px auto 0;
}

/* --- La form --- */

.cs-prenota-form {
    margin: 36px auto 0;
    max-width: 580px;
}

/* Il modulo avvolge i campi in .row: la gutter di 12px e' quella del design. */
.cs-prenota-form .row {
    --bs-gutter-x: 12px;
}

/* Il modulo mette mb-3 su ogni campo, cioe' 16px: il design ne vuole 12. */
.cs-prenota-form .mb-3 {
    margin-bottom: 12px !important;
}

.cs-prenota-form .text-center {
    margin-top: 24px;
}

.cs-prenota-form .art-button {
    justify-content: center;
}

.cs-prenota-nota {
    margin: 12px 0 0;
    font-size: var(--cs-fs-mini); /* 12px */
    text-align: center;
}

.cs-prenota-form .art-modulo-form-contatti {
    text-align: left;
}

@media (max-width: 767.98px) {
    .cs-prenota {
        padding-bottom: 48px;
    }

    .cs-prenota-contenuto {
        padding: 28px 24px 40px;
    }
}

/* ===== FINE SEZIONE: prenota ===== */

/* ===== INIZIO SEZIONE: recensioni ===== */
/* Carosello col layout "testimonianze", override in templates/kwtemplate/html/mod_kw_owl_carousel/.
 * I fogli di owl sono caricati dopo questo e stilano i punti a (0,3,0): i selettori dei punti
 * qui arrivano a (0,4,0). */
.cs-recensioni {
    padding: 100px 0 100px 0;
}

.cs-recensioni h2 {
    margin: 0;
}

/* --- La singola testimonianza --- */

.cs-recensioni .kw-testimonianza {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
}

/* Le stelle: il colore e' il Bordeaux del brand, la spaziatura le stacca fra loro. */
.cs-recensioni .kw-testimonianza-voto {
    margin: 0;
    color: var(--cs-bordeaux);
    font-size: var(--cs-fs-small); /* 15px */
    letter-spacing: 0.2em;
    line-height: 1;
}

.cs-recensioni .kw-testimonianza-testo {
    margin: 0;
    font-size: var(--cs-fs-small); /* 15px */
    line-height: 1.333; /* 15/20 */
}

.cs-recensioni .kw-testimonianza-testo p:last-child {
    margin-bottom: 0;
}

.cs-recensioni .kw-testimonianza-firma {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* La foto dell'autore non c'e' nel design attuale: se un giorno viene compilata, questa e' la
 * misura prevista. */
.cs-recensioni .kw-testimonianza-foto {
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
    border-radius: 50%;
    object-fit: cover;
}

.cs-recensioni .kw-testimonianza-autore {
    font-size: 0.8125rem; /* 13px */
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cs-espresso);
}

.cs-recensioni .kw-testimonianza-ruolo {
    font-size: var(--cs-fs-mini); /* 12px */
    color: var(--cs-terracotta);
}

/* --- I punti di navigazione --- */

.cs-recensioni .owl-dots {
    margin-top: 46px;
}

.cs-recensioni .owl-theme .owl-dots .owl-dot span,
.cs-recensioni .owl-dots .owl-dot span {
    width: 7px;
    height: 7px;
    margin: 0 4px;
    background: var(--cs-rosa);
}

.cs-recensioni .owl-theme .owl-dots .owl-dot.active span,
.cs-recensioni .owl-dots .owl-dot.active span {
    background: var(--cs-terracotta);
}

@media (max-width: 991.98px) {
    .cs-recensioni {
        padding: 56px 0;
    }

    .cs-recensioni .owl-dots {
        margin-top: 32px;
    }
}

/* ===== FINE SEZIONE: recensioni ===== */

/* ===== INIZIO SEZIONE: news ===== */
/* Carosello col layout "kwtemplate:news", caricato con {loadmoduleid NN}. Il design della card
 * sta in .cs-card: qui i colori della testata e gli adattamenti al carosello.
 * owl.carousel.min.css e' caricato dopo questo foglio, da cui la specificita' in piu'. */
.cs-news {
    padding: 76px 0;
}

.cs-news .cs-occhiello {
    color: var(--cs-rosa);
}

.cs-news h2 {
    margin: 12px 0 0;
    color: var(--cs-sabbia);
}

.cs-news .cs-intro {
    margin: 16px auto 0;
    max-width: 600px;
    color: var(--cs-rosa);
}

.cs-news-carosello {
    margin-top: 52px;
}

/* --- La card dentro il carosello ---
 * Owl da' a ogni slide l'altezza propria, quindi il "margin-top: auto" dell'azione non ha nulla
 * su cui spingere. Con flex su pista e slide le card si stirano e i link si allineano. */
.cs-news .owl-stage {
    display: flex;
}

.cs-news .owl-item {
    display: flex;
}

.cs-news .owl-item .item {
    display: flex;
    width: 100%;
}

/* Frecce fuori dalla cornice, come nella sezione Le carni. Nell'export le News sono una griglia
 * statica senza frecce, quindi questo trattamento e' una scelta nostra. */
.cs-news .owl-nav button.owl-prev,
.cs-news .owl-nav button.owl-next {
    position: absolute;
    top: 40%;
    margin: 0;
    padding: 0;
    background: none;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.cs-news .owl-nav button.owl-prev {
    left: -48px;
}

.cs-news .owl-nav button.owl-next {
    right: -48px;
}

.cs-news .owl-nav button.owl-prev:hover,
.cs-news .owl-nav button.owl-next:hover {
    background: none;
    opacity: 1;
}

@media (max-width: 991.98px) {
    .cs-news {
        padding: 56px 0;
    }

    .cs-news-carosello {
        margin-top: 40px;
    }

    .cs-news .owl-nav button.owl-prev {
        left: 0;
    }

    .cs-news .owl-nav button.owl-next {
        right: 0;
    }
}

/* Le SVG delle frecce non portano dimensioni proprie utilizzabili e renderizzerebbero a 0x0:
 * l'altezza va data qui, la larghezza segue. */
.cs-news .owl-nav img,
.cs-carni .owl-nav img {
    height: 20px;
    width: auto;
}

/* ===== FINE SEZIONE: news ===== */

.container-header {
    position: absolute;
    z-index: 10;
    width: 100%;
}

/* ===== INIZIO SEZIONE: footer ===== */
/* Fondo e contenitore dai parametri del modulo. Il filetto Rame e' un bordo del modulo, quindi
 * va a tutta larghezza. */
.cs-footer {
    --cs-azione-fg: var(--cs-rosa);
    --cs-azione-fg-hover: var(--cs-sabbia);
    padding: 56px 0 60px;
    border-top: 8px solid var(--cs-rame);
    color: var(--cs-rosa);
}

/* .art-footer a:link/:visited/:hover del compilato impone la dimensione del testo base su tutti
 * i link del footer, a specificita' (0,2,1): qui si annulla con la stessa forma. */
.cs-footer a:link,
.cs-footer a:visited,
.cs-footer a:hover {
    font-size: inherit;
}

/* Il :not() lascia fuori il paragrafo di apertura, che ha la dimensione dalla scala dei titoli. */
.cs-footer p:not(.cs-intro) {
    font-size: var(--cs-fs-small); /* 15px */
    line-height: 1.333;
}

.cs-footer .cs-intro {
    margin-top: 16px;
}

.cs-footer .cs-intro + p {
    margin-top: 16px;
}

/* .art-footer h5 sostituisce la famiglia dei titoli con quella del testo: qui si rimette. */
.cs-footer h5 {
    margin: 0 0 14px;
    font-family: var(--kwtemplate-heading-font-family);
    color: inherit;
}

.cs-footer p + h5 {
    margin-top: 34px;
}

.cs-footer-logo {
    width: 230px;
}

/* --- Contatti e social --- */
.cs-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cs-contatti {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 18px;
    font-size: var(--cs-fs-small); /* 15px */
}

.cs-contatti li {
    display: flex;
    align-items: center;
    gap: 13px;
}

.cs-contatti .fa-fw {
    font-size: 1rem; /* 16px */
}

.cs-social {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.cs-social a:link,
.cs-social a:visited,
.cs-social a:hover {
    display: flex;
    align-items: center;
    font-size: var(--cs-social-dim, 22px);
}

/* Tripadvisor non c'e' in Font Awesome, nemmeno nella Pro: e' un SVG usato come maschera, cosi'
 * si colora con currentColor come le altre. L'altezza segue la sua proporzione, 24 x 14.21. */
.cs-social-tripadvisor::before {
    content: "";
    width: var(--cs-social-dim, 22px);
    height: calc(var(--cs-social-dim, 22px) / 1.689);
    background-color: currentColor;
    mask: url(../../../images/icone/tripadvisor.svg) no-repeat center / contain;
}

.cs-footer-menu {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: var(--cs-fs-small); /* 15px */
}

/* --- Riquadro Wine Hotel Noce --- */
.cs-hotel-noce {
    margin-top: 32px;
    padding: 24px 26px 22px;
    border: 1px solid var(--cs-terracotta);
}

.cs-hotel-noce img {
    width: 180px;
}

.cs-hotel-noce p {
    margin-top: 14px;
    font-size: var(--cs-fs-label); /* 13px */
    line-height: 1.462;
}

/* Gli stati sono elencati per battere .art-footer a:link, che imporrebbe il corpo del testo. */
.cs-hotel-noce .cs-azione:link,
.cs-hotel-noce .cs-azione:visited,
.cs-hotel-noce .cs-azione:hover {
    --cs-freccia-spazio: 26px;
    margin-top: 20px;
    font-size: var(--cs-azione-fs, 0.8125rem);
}

.cs-footer-bitcoin {
    height: 46px;
    width: auto;
    margin-top: 26px;
}

.cs-footer a:link,
.cs-footer a:visited {
    color: var(--cs-rosa);
    text-decoration: none;
}

.cs-footer p {
    color: var(--cs-rosa);
}

.cs-footer a:not(.cs-azione):hover,
.cs-footer a:not(.cs-azione):focus-visible {
    color: var(--cs-sabbia);
}

.cs-footer ul.art-hmenu > li > a {
    line-height: 1.333;
    text-transform: none;
    padding: 0;
    margin-bottom: 5px;
}

@media (max-width: 991.98px) {
    .cs-footer {
        padding: 44px 0 48px;
    }

    .cs-footer .row > div:last-child {
        margin-top: 40px;
    }
}

@media (max-width: 767.98px) {
    .cs-footer .row > div + div {
        margin-top: 40px;
    }
}

/* ===== FINE SEZIONE: footer ===== */

/* ===== INIZIO SEZIONE: footer-legale ===== */
/* Modulo a se': il fondo cambia e va da bordo a bordo. */
.cs-footer-legale {
    padding: 20px 0;
    color: #fff;
    font-size: var(--cs-fs-mini); /* 12px */
    line-height: 1.667;
}

.cs-footer-legale p {
    margin: 0;
}

/* Bianchi in ogni stato, hover compreso. Gli stati sono elencati tutti perche' il compilato
 * colora e ridimensiona a:link e a:visited a specificita' (0,2,1). */
.cs-footer-legale a:link,
.cs-footer-legale a:visited,
.cs-footer-legale a:hover,
.cs-footer-legale a:focus-visible {
    font-size: inherit;
    color: #fff;
    text-decoration: none;
}

/* Il colore non da' nessun segnale: il contorno di tastiera e' l'unico, non si toglie. */
.cs-footer-legale a:focus-visible {
    outline: 1px solid #fff;
    outline-offset: 2px;
}

/* ===== FINE SEZIONE: footer-legale ===== */

.nav-sticky-wrapper .art-nav {
    opacity: 1;
}

.nav-sticky > nav {
    background-color: var(--cs-bordeaux, #53130D);
}

.wine-etichette img {
    position: absolute;
}

.header-title-bg {
    background-color: var(--cs-bordeaux);
    color: #fff;
    width: fit-content;
}

.header-title-bg h1 {
    color: #fff;
}

.header-title-bg p, .header-title-bg .h2 {
    color: var(--cs-rosa);
}

body#art-main {
    background-color: var(--cs-sabbia);
}

body#art-main.menu-bordeaux nav.art-nav {
    background-color: var(--cs-bordeaux, #53130D);
}

body#art-main.menu-bordeaux .container-header {
    position: relative;
}

.art-article .category-desc {
    margin-bottom: 50px;
}

.art-article .category-desc p {
    color: #fff;
}

.art-article_1 .cs-card {
    margin-bottom: 50px;
}

/* ===== INIZIO SEZIONE: ristorante-hero ===== */
/* Due moduli: il secondo porta l'immagine della tagliata e la fa salire sopra il primo. Tenerla
 * nel primo con un margine inferiore negativo non funziona — vedi la nota sul margin collapsing
 * in CLAUDE.md. La fascia di gocce e' uno pseudo-elemento in absolute sull'article, che il chrome
 * genera a tutta larghezza: cosi' esce dal .container. */
.cs-ristorante-hero, .cs-carni-hero {
    position: relative;
    /* In fondo ci stanno lo stacco dai testi e la fascia di gocce: 150 + 86. */
    /*  padding: 112px 0 236px; */
    color: var(--cs-rosa);
}

.cs-ristorante-hero .row, .cs-carni-hero .row {
    min-height: 100vh;
}

.cs-ristorante-hero::after, .cs-carni-hero::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 86px;
    background: var(--cs-gocce) repeat;
    background-size: 56px 56px;
}

.cs-ristorante-hero h1, .cs-carni-hero h1 {
    margin: 0;
    color: inherit;
}

.cs-ristorante-hero .cs-intro, .cs-carni-hero .cs-intro {
    margin-top: 34px;
}

.cs-ristorante-hero p:not(.cs-intro), .cs-carni-hero p:not(.cs-intro) {
    margin: 0;
    font-size: var(--cs-fs-small); /* 15px */
    line-height: 1.333;
}

.cs-ristorante-hero p + p:not(.cs-intro), .cs-carni-hero p + p:not(.cs-intro) {
    margin-top: 22px;
}

/* Senza flow-root il margine negativo dell'immagine si fonde con quelli dei contenitori del
 * chrome e sposta il modulo intero. */
.cs-ristorante-hero-media .kw-module-content,
.cs-carni-hero-media .kw-module-content,
.cs-ristorante-vini .kw-module-content {
    display: flow-root;
}

/* La classe sta sull'immagine perche' nel modulo c'e' anche la foto di Paride.
 * position:relative non la sposta: la porta davanti alla fascia di gocce, che e' posizionata. */
.cs-ristorante-hero-steak, .cs-carni-hero-steak {
    position: relative;
    display: block;
    margin-top: -138px;
}

@media (max-width: 991.98px) {
    .cs-ristorante-hero, .cs-carni-hero {
        padding: 72px 0 150px;
    }

    .cs-ristorante-hero .row > div + div, .cs-carni-hero .row > div + div {
        margin-top: 34px;
    }

    .cs-ristorante-hero-steak, .cs-carni-hero-steak {
        margin-top: -90px;
    }
}

@media (max-width: 767.98px) {
    .cs-ristorante-hero, .cs-carni-hero {
        padding-bottom: 110px;
    }

    .cs-ristorante-hero::after, .cs-carni-hero::after {
        height: 60px;
    }

    .cs-ristorante-hero-steak, .cs-carni-hero-steak {
        margin-top: -60px;
    }
}

/* ===== FINE SEZIONE: ristorante-hero ===== */

/* ===== INIZIO SEZIONE: ristorante-paride ===== */
/* Sta nel modulo dell'immagine della tagliata: stesso fondo, nessun bisogno di un modulo in piu'.
 * Per questo la classe e' sulla .row. */
.cs-ristorante-paride, .cs-carni-paride {
    padding: 76px 0 44px;
}

.cs-ristorante-paride h2, .cs-carni-paride h2 {
    margin: 14px 0 38px 0;
}

.cs-ristorante-paride p {
    margin: 38px 0 0;
    font-size: var(--cs-fs-small); /* 15px */
    line-height: 1.333;
}

.cs-ristorante-paride .art-button {
    --cs-freccia-spazio: 52px;
    margin-top: 42px;
}

/* Fuori dal flusso: sborda sulla sezione successiva. Richiede position-relative sulla colonna. */
.cs-ristorante-paride-foto {
    position: absolute;
    top: 0;
    right: 0;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}

@media (max-width: 991.98px) {
    .cs-ristorante-paride {
        padding-top: 56px;
    }

    .cs-ristorante-paride > div + div {
        margin-top: 40px;
    }

    /* A una colonna la foto in absolute copriva il testo della sezione successiva. */
    .cs-ristorante-paride-foto {
        position: static;
    }
}

/* ===== FINE SEZIONE: ristorante-paride ===== */

/* ===== INIZIO SEZIONE: ristorante-atmosfera ===== */
/* In cima nessun padding: sopra sborda la foto di Paride, e lo stacco lo danno le due colonne,
 * ciascuna col suo, perche' l'immagine parte piu' in alto del testo. */
.cs-ristorante-atmosfera {
    --cs-citazione-fg: var(--cs-rosa);
    padding-bottom: 96px;
    color: var(--cs-rosa);
}

.cs-ristorante-atmosfera .cs-testo {
    padding-top: 78px;
}

.cs-ristorante-atmosfera .cs-foto img {
    margin-top: 55px;
}

.cs-ristorante-atmosfera h2 {
    margin: 16px 0 0;
    color: inherit;
}

.cs-ristorante-atmosfera p {
    margin: 34px 0 0;
    font-size: var(--cs-fs-small); /* 15px */
    line-height: 1.333;
}

/* Il bordato e' .art-button--filetto, nel blocco azioni. */
.cs-ristorante-atmosfera .art-button {
    --cs-freccia-spazio: 44px;
    margin-top: 26px;
}

.cs-ristorante-atmosfera .cs-foto {
    margin-top: 40px;
}

@media (max-width: 991.98px) {
    .cs-ristorante-atmosfera {
        padding-bottom: 72px;
    }

    .cs-ristorante-atmosfera .cs-foto {
        margin-top: 32px;
    }
}

/* ===== FINE SEZIONE: ristorante-atmosfera ===== */

/* ===== INIZIO SEZIONE: ristorante-tagli ===== */
.cs-ristorante-tagli {
    padding-top: 50px;
    color: var(--cs-rosa);
}

.cs-carni-pascolo {
    color: var(--cs-rosa);
    padding-bottom: 200px;
    position: relative;
}

.cs-carni-pascolo .row:first-child {
    padding-top: 50px;
}

.cs-ristorante-tagli h2, .cs-carni-pascolo h2 {
    margin: 14px 0 0;
    color: inherit;
}

.cs-ristorante-tagli h3, .cs-carni-pascolo h3 {
    margin: 0;
    color: inherit;
}

.cs-ristorante-tagli p, .cs-carni-pascolo p {
    margin: 38px 0 0;
    font-size: var(--cs-fs-small); /* 15px */
    line-height: 1.333;
}

.cs-ristorante-tagli p + p, .cs-carni-pascolo p + p {
    margin-top: 20px;
}

/* L'immagine puo' arrivare con proporzioni qualunque: la proporzione del design va imposta. */
.cs-ristorante-tagli .cs-foto, .cs-carni-pascolo .cs-foto {
    display: block;
    width: 100%;
    margin-top: 40px;
    aspect-ratio: 423 / 374;
    object-fit: cover;
}

/* --- Elenco delle specialita'. Il trattino e' uno pseudo-elemento: niente div vuoti, e le voci
 * nel contenuto restano senza classi. --- */
.cs-specialita {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.cs-specialita li {
    display: flex;
    gap: 20px;
}

.cs-specialita li + li {
    margin-top: 20px;
}

.cs-specialita li::before {
    content: "";
    flex: none;
    width: 38px;
    height: 1px;
    margin-top: 10px;
    background: var(--cs-terracotta);
}

.cs-specialita strong {
    font-size: var(--cs-fs-small); /* 15px */
    font-weight: 600;
}

.cs-specialita p {
    margin: 3px 0 0;
}

.cs-ristorante-tagli .art-button, .cs-carni-pascolo .art-button {
    --cs-freccia-spazio: 44px;
    margin-top: 44px;
}

/* Filo Terracotta che scende verso la sezione seguente, dove continua. */
.cs-ristorante-tagli .kw-module-content .container:last-child::after {
    content: "";
    display: block;
    width: 2px;
    height: 50px;
    margin-top: 64px;
    background: var(--cs-terracotta);
}

@media (max-width: 991.98px) {
    .cs-ristorante-tagli {
        padding-top: 72px;
    }

    .cs-ristorante-tagli .row > div + div {
        margin-top: 40px;
    }
}

/* ===== FINE SEZIONE: ristorante-tagli ===== */

/* ===== INIZIO SEZIONE: ristorante-sei-punti ===== */
/* L'elenco e' il componente .cs-punti nella variante con icona, la citazione e' .cs-citazione:
 * qui restano solo i colori del fondo chiaro e le spaziature. */
.cs-ristorante-sei-punti {
    --cs-punti-filetto: var(--cs-espresso);
    --cs-citazione-bordo: var(--cs-espresso);
    --cs-citazione-fg: var(--cs-espresso);
    padding-bottom: 70px;
}

/* Prosecuzione del filo che parte dalla sezione sopra, su fondo Bordeaux. */
.cs-ristorante-sei-punti .kw-module-content > .container:first-child::before {
    content: "";
    display: block;
    width: 2px;
    height: 50px;
    background: var(--cs-terracotta);
}

.cs-ristorante-sei-punti h2 {
    margin: 44px 0 26px;
}

.cs-ristorante-sei-punti .cs-punti {
    margin-top: 56px;
}

.cs-ristorante-sei-punti .cs-citazione {
    margin-top: 44px;
}

@media (max-width: 991.98px) {
    .cs-ristorante-sei-punti {
        padding-bottom: 56px;
    }

    .cs-ristorante-sei-punti .cs-punti {
        margin-top: 40px;
    }
}

/* ===== FINE SEZIONE: ristorante-sei-punti ===== */

/* ===== INIZIO SEZIONE: ristorante-galleria ===== */
/* I file hanno gia' le proporzioni del design, quindi le immagini non hanno altezze ne' ritagli:
 * basta img-fluid. La gutter di 8px e' quella del design, piu' stretta della scala di Bootstrap. */
.cs-ristorante-galleria, .cs-galleria {
    --bs-gutter-x: 8px;
    padding-top: 70px;
    padding-bottom: 70px;
}

.cs-ristorante-galleria img + img, .cs-galleria img + img {
    margin-top: 12px;
}

.cs-galleria-carni {
    margin-top: -150px;
}

.cs-galleria-carni .cs-galleria {
    position: relative;
}

/* ===== FINE SEZIONE: ristorante-galleria ===== */

/* ===== INIZIO SEZIONE: ristorante-vini ===== */
/* L'elenco e' .cs-punti nella variante con icona: qui solo il colore del filetto e le spaziature. */
.cs-ristorante-vini {
    --cs-punti-filetto: var(--cs-espresso);
    padding: 76px 0 44px;
}

.cs-ristorante-vini .cs-occhiello {
    margin-bottom: 12px;
}

.cs-ristorante-vini .cs-intro {
    margin-top: 22px;
}

.cs-ristorante-vini .art-button {
    margin-top: 44px;
}

/* Sborda sul Bordeaux della sezione seguente: serve il flow-root sul contenitore, dichiarato
 * insieme a quello della tagliata, e position:relative per stare davanti al fondo che segue. */
.cs-ristorante-vini .cs-foto {
    position: relative;
    margin: 14px 0 -130px;
}

@media (max-width: 991.98px) {
    .cs-ristorante-vini {
        padding-top: 56px;
    }

    .cs-ristorante-vini .cs-punti {
        margin-top: 40px;
    }

    .cs-ristorante-vini .cs-foto {
        margin-bottom: -80px;
    }
}

/* ===== FINE SEZIONE: ristorante-vini ===== */

/* ===== INIZIO SEZIONE: ristorante-fascia ===== */
.cs-ristorante-fascia {
    --cs-punti-filetto: var(--cs-espresso);
    --cs-citazione-bordo: var(--cs-espresso);
    --cs-citazione-fg: var(--cs-espresso);
}

.cs-ristorante-fascia .cs-citazione {
    margin-top: 0;
    margin-bottom: 100px;
}

/* ===== FINE SEZIONE: ristorante-fascia ===== */

/* ===== INIZIO SEZIONE: ristorante-faq ===== */
/*
 * mod_kw_layout con dentro mod_kw_faqs, che stampa un accordion di Bootstrap in un .faq-style.
 * Due livelli: la struttura su .faq-style, valida in ogni pagina; i colori sotto
 * .cs-faq-ristorante, perche' dipendono dal fondo della sezione.
 */
.cs-faq-ristorante {
    padding: 100px 0;
}

.cs-faq-ristorante .cs-occhiello,
.cs-faq-ristorante h2,
.cs-faq-ristorante h3,
.cs-faq-ristorante .cs-intro,
.cs-faq-ristorante p {
    color: var(--cs-rosa);
}

/* --- Struttura. Bootstrap 5.3 espone tutto come variabili: ridefinirle evita gli !important
 * che servirebbero per battere le sue regole. --- */
.faq-style .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-body-padding-y: 0.75rem;
    --bs-accordion-btn-focus-box-shadow: none;
}

/* Solo il filetto in basso, niente cornice. */
.faq-style .accordion-item {
    border: none;
    border-bottom: 1px solid var(--cs-terracotta);
}

/* La domanda usa il font dei titoli e la scala del brand kit, non una dimensione fissa. */
.faq-style .accordion-button {
    font-family: var(--kwtemplate-heading-font-family);
    font-size: var(--kwtemplate-h6-size);
    font-weight: 600;
    box-shadow: none;
}

/* Il piu' e il meno al posto della freccia di Bootstrap. */
.faq-style .accordion-button::after {
    background-image: none;
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-weight: 700;
}

.faq-style .accordion-button:not(.collapsed)::after {
    content: "\2013";
    transform: none;
}

/* Aperta, Bootstrap aggiunge un filetto interno come box-shadow: qui non serve. */
.faq-style .accordion-button:not(.collapsed) {
    box-shadow: none;
}

/* --- Colori --- */
.cs-faq-ristorante .faq-style .accordion {
    --bs-accordion-color: var(--cs-rosa);
    --bs-accordion-btn-color: var(--cs-rosa);
    --bs-accordion-active-color: var(--cs-rosa);
}

.cs-faq-ristorante .faq-style {
    padding-left: 60px;
}

.cs-carni-pascolo .kw-module-content > .container:first-child::before {
    content: "";
    display: block;
    width: 2px;
    height: 50px;
    background: var(--cs-terracotta);
}

@media (max-width: 991.98px) {
    .cs-faq-ristorante {
        padding: 72px 0;
    }

    /* A una colonna il rientro non ha piu' senso. */
    .cs-faq-ristorante .faq-style {
        padding-left: 0;
    }
}

/* ===== FINE SEZIONE: ristorante-faq ===== */

/* ===== INIZIO SEZIONE: ristorante-prenota ===== */
/* Riusa il pannello e la form della sezione Prenota della homepage: qui cambiano l'altezza delle
 * gocce e i due riquadri informativi. */
.cs-ristorante-prenota, .cs-carne-prenota {
    --cs-gocce-altezza: 113px;
}

.cs-prenota.cs-carne-prenota {
    padding-bottom: 0;
}

.cs-ristorante-prenota .cs-prenota-contenuto, .cs-carne-prenota .cs-prenota-contenuto {
    padding: 44px 60px 60px;
}

.cs-ristorante-prenota .cs-riquadri, .cs-carne-prenota .cs-riquadri {
    --bs-gutter-x: 34px;
    margin: 40px 0;
}

.cs-ristorante-prenota .cs-riquadro, .cs-carne-prenota .cs-riquadro {
    height: 100%;
}

.cs-carne-prenota .kw-module-content > div:last-child .cs-gocce {
    margin-top: 100px;
}

.cs-carni-hero-media .container:last-child::after {
    content: "";
    display: block;
    width: 2px;
    height: 50px;
    margin-top: 64px;
    background: var(--cs-terracotta);
}

.cs-ristorante-sei-punti .kw-module-content > .container:first-child::before {
    content: "";
    display: block;
    width: 2px;
    height: 50px;
    background: var(--cs-terracotta);
}

.cs-razze-carni {
    padding: 50px 0 0 0;
}

.cs-razze-carni .faq-style .accordion-button:not(.collapsed) {
    --bs-accordion-color: #32211b;
    --bs-accordion-active-color: #32211b;
}

.cs-razze-carni .cs-citazione {
    --cs-citazione-fg: #32211B;
}

.cs-razze-carni .container:last-child::after {
    content: "";
    display: block;
    width: 2px;
    height: 50px;
    margin-top: 64px;
    background: var(--cs-terracotta);
}


@media (max-width: 767.98px) {
    .cs-ristorante-prenota .cs-prenota-contenuto {
        padding: 28px 24px 40px;
    }

    .cs-ristorante-prenota .cs-riquadri > div + div {
        margin-top: 24px;
    }
}

/* ===== FINE SEZIONE: ristorante-prenota ===== */

/* ===== INIZIO SEZIONE: frollatura ===== */
/* Il filo in cima e' il componente cs-filo-prima, il bottone bordato art-button--filetto.
 * La fascia di gocce e' uno pseudo-elemento in absolute sull'article, che il chrome genera a
 * tutta larghezza: l'immagine ci passa sopra grazie a position:relative. */
.cs-frollatura {
    position: relative;
    color: var(--cs-rosa);
}

.cs-frollatura .kw-module-content > div:last-child {
    position: relative;
    z-index: 2;
}

.cs-frollatura .kw-module-content:last-child::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100px;
    left: 0;
    height: 193px;
    background: var(--cs-gocce) repeat;
    background-size: 56px 56px;
    z-index: 1;
}

.cs-frollatura .kw-module-content > .container:first-child::before {
    content: "";
    display: block;
    width: 2px;
    height: 50px;
    background: var(--cs-terracotta);
}

.cs-frollatura h2 {
    margin: 0 0 26px;
    color: inherit;
}

.cs-frollatura h3 {
    color: inherit;
}

.cs-frollatura p {
    margin: 0;
    font-size: var(--cs-fs-small); /* 15px */
    line-height: 1.333;
}

.cs-frollatura p + p {
    margin-top: 20px;
}

.cs-frollatura .art-button {
    margin-top: 44px;
}

/* Sta sopra la fascia di gocce: senza position:relative le gocce, che sono posizionate, la
 * coprirebbero. */
.cs-frollatura .cs-foto {
    position: relative;
    margin-top: 100px;
}

@media (max-width: 991.98px) {
    .cs-frollatura .kw-module-content > div:last-child::after {
        height: 120px;
    }
}

/* ===== FINE SEZIONE: frollatura ===== */

/* ===== INIZIO SEZIONE: carni-josper ===== */
/* Elenco di .cs-metodo impilati, bottone bordato art-button--filetto. */
.cs-carni-josper {
    padding: 100px 0;
    color: var(--cs-rosa);
}

.cs-carni-josper h2 {
    margin: 0 0 28px;
    color: inherit;
}

.cs-carni-josper .cs-elenco {
    margin-top: 50px;
}

.cs-carni-josper .art-button {
    margin-top: 40px;
}

.cs-carni-josper .cs-metodo:before {
    right: 0;
    left: 0;
}

.cs-carni-josper .cs-metodo {
    padding: 20px 0 26px;
}

.cs-carni-josper .cs-metodo h4 {
    margin-top: 0;
}

@media (max-width: 991.98px) {
    .cs-carni-josper {
        padding-bottom: 72px;
    }

    .cs-carni-josper .cs-elenco {
        margin-top: 32px;
    }
}

/* ===== FINE SEZIONE: carni-josper ===== */

.section-bordeaux h1, .section-bordeaux h2, .section-bordeaux h3 {
    color: var(--cs-rosa);
}


/* ===== INIZIO SEZIONE: carni-correlate ===== */
/* Le card sono il componente .cs-card, lo stesso delle news: qui cambia solo il bottone, pieno
 * invece dell'azione col filetto. La vestizione sta qui e non in media/ del modulo, cosi' un
 * aggiornamento di mod_kw_service non la porta via. */
.cs-carni-correlate {
    padding: 100px 0;
    color: var(--cs-rosa);
}

.cs-carni-correlate h2 {
    margin: 0;
    color: inherit;
}

/* Il modulo avvolge le card in .art-kwmod4-container: la gutter e' quella del design. */
.cs-carni-correlate .art-kwmod4-container {
    --bs-gutter-x: 34px;
}

.cs-carni-correlate .art-kwmod4-item {
    height: 100%;
}

@media (max-width: 991.98px) {
    .cs-carni-correlate {
        padding: 72px 0;
    }

    .cs-carni-correlate h2 {
        margin-bottom: 32px;
    }
}

/* ===== FINE SEZIONE: carni-correlate ===== */

/* Extra extra large devices (<1400px) (1200 – 1399px) - xl - Desktop */
@media (max-width: 1399.98px) {

}

/* Extra large devices (max-width 1199.98px): (992 – 1199px) - lg - Tablet orizzontale / laptop piccolo */
@media (max-width: 1199.98px) {

}


/* Large devices (max-width 991.98px): (768 – 991px) - md - Tablet verticale */
@media (max-width: 991.98px) {
    .cs-paride .cs-occhiello {
        margin: 10px 0;
    }

    .wine-etichette img {
        position: relative;
    }
}

/* Medium devices (max-width 767.98px): (576 – 767px) - sm - Mobile grande / piccoli tablet */
@media (max-width: 767.98px) {

}


/* Small devices (max-width 575.98px): (0 – 575px) - xs - Mobile */
@media (max-width: 575.98px) {


}