/*
 * MyItalian.Recipes — mobile.css
 *
 * Mobile-first DEFINITIVO, Fase 3.1.c.
 * Caricato solo per viewport <768px via media attribute sul <link>.
 * Nessuna @media query interna: il file gira gia' solo su mobile.
 *
 * Coabitazione: il desktop legacy (bootstrap.min.css + main.css) gira
 * solo >=768px (sempre via media attribute). Markup unico, due CSS
 * isolati, zero specificity conflicts.
 */

/* ===== Box model + overflow guard cross-page ===== */
*, *::before, *::after {
    box-sizing: border-box;
}
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* Reset body + tipografia base */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--brand-text);
    background: var(--brand-bg);
    margin: 0;
    padding: 0;
    padding-top: 56px; /* compensa la mobile-topbar fixed (h=56) */
}

/* Bootstrap grid stack su mobile — neutralizza float + introduce
   gutter 16px coerente. Sostituisce il reset Fase 3.1.c. */
.container,
.container-fluid {
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
}
.row {
    margin-left: -16px;
    margin-right: -16px;
}
[class*="col-"] {
    padding-left: 16px;
    padding-right: 16px;
}

/* Niente doppio padding quando .container e' annidato dentro .container/.row/[class*="col-"] */
.container .container,
.row > .container,
.row > [class*="col-"] > .container {
    padding-left: 0;
    padding-right: 0;
}

/* Nascondi desktop legacy header su mobile */
.desktop-header { display: none !important; }

/* Mostra mobile-header (ridichiarato per chiarezza) */
.mobile-header { display: block; }

/* TOP BAR sticky */
.mobile-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: var(--brand-bg);
    border-bottom: 1px solid var(--brand-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 100;
}
.mobile-brand {
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--brand-text);
    text-decoration: none;
    letter-spacing: 0.2px;
}
.mobile-actions { display: flex; gap: 4px; }
.mobile-action {
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mobile-action:active { background: var(--brand-bg-soft); }

/* DRAWER comune */
.mobile-drawer {
    position: fixed;
    left: 0; right: 0;
    background: var(--brand-bg);
    z-index: 200;
    transition: transform 0.25s ease-out;
    display: flex;
    flex-direction: column;
}
.mobile-drawer-search {
    top: 0;
    transform: translateY(-100%);
    padding: 12px 16px;
    border-bottom: 1px solid var(--brand-border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.mobile-drawer-menu {
    top: 0; bottom: 0;
    width: 86%;
    max-width: 360px;
    transform: translateX(-100%);
    overflow-y: auto;
}

.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--brand-border);
}
.mobile-drawer-title {
    font-family: 'Lora', Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--brand-text);
}
.mobile-drawer-close {
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--brand-muted);
    cursor: pointer;
    line-height: 1;
}

/* BACKDROP */
.mobile-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-out;
    z-index: 150;
}

/* Stati :checked (apertura drawer + backdrop) */
#mobile-search-toggle:checked ~ .mobile-drawer-search { transform: translateY(0); }
#mobile-search-toggle:checked ~ .mobile-backdrop-search { opacity: 1; pointer-events: auto; }
#mobile-menu-toggle:checked ~ .mobile-drawer-menu { transform: translateX(0); }
#mobile-menu-toggle:checked ~ .mobile-backdrop-menu { opacity: 1; pointer-events: auto; }

/* FORM RICERCA (drawer) */
.mobile-search-form {
    display: flex;
    gap: 8px;
    padding: 12px 0;
}
.mobile-search-input {
    flex: 1;
    height: 48px;
    padding: 0 14px;
    font-size: 16px; /* >=16 evita zoom iOS */
    border: 1px solid var(--brand-border);
    border-radius: 6px;
    background: var(--brand-bg-soft);
    -webkit-appearance: none;
    appearance: none;
}
.mobile-search-input:focus {
    outline: none;
    border-color: var(--brand-red);
    background: var(--brand-bg);
}
.mobile-search-submit {
    width: 48px; height: 48px;
    border: 0;
    border-radius: 6px;
    background: var(--brand-red);
    color: var(--brand-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* MENU LIST (drawer) */
.mobile-menu-list {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    flex: 1;
}

/* Regole globali del menu (.menu-item, .menu-item-season, .menu-item-special,
   emoji stagione, rinforzo #mainNavigation) sono in components.css: valgono
   su drawer mobile + nav desktop. Qui sotto solo override drawer-only. */

/* === DRAWER-ONLY: scope via parent .mobile-drawer-menu ===
   Padding/border/font-size/color override BS3 NON devono toccare il nav
   desktop (#mainNavigation .navbar-nav), che ha typography e layout suoi. */
.mobile-drawer-menu .menu-item a {
    display: block;
    padding: 16px 20px;
    font-size: 19px;
    font-weight: 500;
    color: var(--brand-text);
    text-decoration: none;
    border-bottom: 1px solid var(--brand-border);
}
.mobile-drawer-menu .menu-item a:active { background: var(--brand-bg-soft); }

/* Alternanza rosso/nero sulle voci STATICHE del drawer (5 voci: Portate, Regioni,
   Speciali, Dolci, Ingredienti, Top ricette). Le 2 voci dinamiche
   (.menu-item-season e .menu-item-special) restano coral via le 2 regole
   globali sopra. Scope drawer-only: sul desktop nav orizzontale l'alternanza
   stonerebbe. */
.mobile-drawer-menu .menu-item:not(.menu-item-season):not(.menu-item-special):nth-child(odd) a {
    color: var(--brand-red);
}
.mobile-drawer-menu .menu-item:not(.menu-item-season):not(.menu-item-special):nth-child(even) a {
    color: var(--brand-text);
}

/* LOCALE SWITCHER */
.mobile-locale-switcher {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px 32px;
    border-top: 1px solid var(--brand-border);
}
.locale-flag {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--brand-bg-soft);
    border: 1px solid var(--brand-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-muted);
    text-decoration: none;
    letter-spacing: 0.5px;
}
.locale-flag.is-active {
    background: var(--brand-red);
    color: var(--brand-bg);
    border-color: var(--brand-red);
}


/* ==============================================================
   LAYOUT BASE — body, container, row, col, section
   Fase 3.2.a — fondamenta cross-template (ricetta, hub, homepage)
   ============================================================== */

/* SECTION-BOX wrapper standard (ingredienti, info, condividi, ecc.) */
.section-box {
    background: var(--brand-bg);
    margin-bottom: 24px;
}
.section-header {
    padding: 0 0 12px 0;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--brand-red);
}
.section-body {
    padding: 0;
}

/* TITOLI SEZIONE — uniformazione classi semantiche legacy */
.l-section-title,
.l-mod-titlesection,
.l-mod-titlesectionlong,
.l-mod-titlesectionfull {
    font-family: 'Lora', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--brand-text);
    margin: 0;
    padding: 0;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
}

/* PARAGRAFI */
p {
    margin: 0 0 14px 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--brand-text);
}
p:last-child {
    margin-bottom: 0;
}

/* LINK INLINE — colore brand. Le regole .mobile-* / .locale-flag /
   .menu-item a sopra hanno specificity superiore, quindi
   non vengono toccate. */
a {
    color: var(--brand-red);
    text-decoration: none;
}
a:hover,
a:active {
    color: var(--brand-coral);
}

/* IMG RESPONSIVE */
img {
    max-width: 100%;
    height: auto;
}
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

/* UTILITIES */
.text-center { text-align: center; }
.text-muted { color: var(--brand-muted); }
.clearboth, .clearfix { clear: both; }
.hidden-xs { display: none !important; }
.visible-xs { display: block; }


/* ==============================================================
   GUTTER FIX — compensazione negative margin .row in casistiche
   senza figli .col-* (3.2.c bugfix)
   ============================================================== */

/* `.row.section-body > content_diretto` (p, l-mod-content, ecc.):
   aggiungi padding 16px. Il negative margin del .row sforerebbe
   altrimenti senza un .col-* compensativo. */
.row.section-body > *:not([class*="col-"]):not(.row) {
    padding-left: 16px;
    padding-right: 16px;
}

/* Doppio nesting `.row > .row` dentro `.section-header`: il
   secondo row erediterebbe altri -16/+16, raddoppiando lo shift
   e tagliando i titoli (es. "Ingredienti" → "ngredienti"). */
.section-header > .row {
    margin-left: 0;
    margin-right: 0;
}


/* ==============================================================
   HERO RICETTA — top-header + recipe-title
   Fase 3.2.b — sostituisce layout legacy desktop di
   <section id="top-header" class="full-width-content recipe-hero">
   La classe `recipe-hero` (sul template recipe.html.j2) discrimina
   da event/ingredient che usano lo stesso #top-header con titolo
   dentro .container — non vanno trattati uguali.
   ============================================================== */

#top-header.full-width-content {
    /* Annulla container Bootstrap legacy: full-bleed orizzontale */
    margin-left: -16px;
    margin-right: -16px;
    padding: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
#top-header.recipe-hero {
    aspect-ratio: 16 / 10;
}
#top-header.recipe-hero > .container {
    /* Solo per ricetta: container interno legacy vuoto, nascondiamo */
    display: none;
}

/* Titolo ricetta — serif Lora, sentence case, sotto la foto */
.recipe-title {
    font-family: 'Lora', Georgia, serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--brand-text);
    text-align: left;
    margin: 20px 16px 16px;
    padding: 0;
    text-transform: none;
    text-shadow: none;
    line-height: 1.2;
    letter-spacing: 0;
}


/* ==============================================================
   BREADCRUMB MOBILE — compatto, niente numeri, niente glyphicon
   ============================================================== */
.breadcrumb {
    list-style: none;
    padding: 12px 16px;
    margin: 0 -16px 16px;
    background: var(--brand-bg-soft);
    font-size: 13px;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.breadcrumb li {
    display: inline;
    color: var(--brand-muted);
}
.breadcrumb li::before {
    content: " › ";
    color: var(--brand-muted);
    margin: 0 4px;
}
.breadcrumb li:first-child::before {
    content: none;
}
.breadcrumb li a {
    color: var(--brand-red);
    text-decoration: none;
}
.breadcrumb li:last-child {
    color: var(--brand-text);
    font-weight: 500;
}

/* Glyphicon-home: il <div>Home</div> nascosto inline diventa visibile */
.breadcrumb .glyphicon-home {
    font-family: inherit;
}
.breadcrumb .glyphicon-home > div {
    display: inline !important;
}


/* ==============================================================
   LISTA INGREDIENTI — colonna singola, compatta
   Fase 3.2.c — sostituisce grid Bootstrap col-md-6 col-xs-6
   ============================================================== */

/* Sezione ingredienti — header titolo */
#list-of-ingredients .section-header h2,
#list-of-ingredients .l-section-title {
    text-align: left;
    width: 100%;
    float: none;
}

/* Container <ul class="row" id="ingredient-list"> */
#ingredient-list {
    list-style: none;
    padding: 0;
    /* niente più negative margin: contenuto rientrato dal padding 16px del container */
    margin: 0;
}

/* Ogni <li>: una riga full-width, NIENTE 2 colonne legacy */
#ingredient-list > li {
    width: 100%;
    padding: 0;
    margin: 0;
    float: none;
    list-style: none;
    border-bottom: 1px solid var(--brand-border);
}
#ingredient-list > li:last-child {
    border-bottom: 0;
}

/* Riga ingrediente (.ingredient) — flex 3 colonne: thumb | nome | quantità */
#ingredient-list > li > .ingredient {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    min-height: 56px;
}

/* L'<a> wrappa solo thumb o solo nome — display: contents lo
   rende trasparente al flex layout del parent. */
#ingredient-list > li > .ingredient > a {
    display: contents;
}

/* Thumbnail circolare 36px — override hidden-xs Bootstrap */
#ingredient-list .photo,
#ingredient-list .img-circle {
    display: block !important;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--brand-bg-soft);
}

/* Nome ingrediente — colonna centrale flex: 1, line-clamp 2 righe */
#ingredient-list .name {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--brand-text);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
#ingredient-list .name a {
    color: var(--brand-text);
    text-decoration: none;
    /* Override regola generica `a { color: brand-red }` di 3.2.a */
}

/* Quantità + metadata — colonna destra */
#ingredient-list .quantity,
#ingredient-list .handling,
#ingredient-list .note {
    font-size: 13px;
    color: var(--brand-muted);
    text-align: right;
    flex-shrink: 0;
    line-height: 1.3;
    max-width: 40%;
}

/* Handling/note: corsivo, sotto la quantity */
#ingredient-list .handling,
#ingredient-list .note {
    display: block;
    font-style: italic;
    font-size: 12px;
    margin-top: 2px;
}

/* Feedback touch */
#ingredient-list > li:active {
    background: var(--brand-bg-soft);
}


/* ==============================================================
   STEP PASSO-PASSO — foto full-width + badge numero overlay
   Fase 3.2.d-bis — ridisegno verticale uniforme
   ============================================================== */

/* Container generale */
#showcase-recipe {
    margin: 0;
    padding: 0;
}
#showcase-recipe > .container {
    padding: 0 16px;
}
#showcase-grid {
    background: var(--brand-bg);
    margin: 24px 0;
    padding: 0;
}

/* Counter CSS: numerazione automatica step */
#showcase-grid .section-body {
    counter-reset: step-counter;
    padding: 0;
}

/* Ogni step uniforme (.first o .next) — vertical stack: foto > testo */
#showcase-grid .section-body > div[class*="col-sm-12"] {
    width: 100%;
    padding: 16px 0;
    margin: 0;
    border-bottom: 1px solid var(--brand-border);
    counter-increment: step-counter;
    position: relative;
    float: none;
}
#showcase-grid .section-body > div[class*="col-sm-12"]:last-child {
    border-bottom: 0;
}

/* Link step — niente più flex orizzontale, layout naturale */
#showcase-grid .showcase-grid-step {
    display: block;
    position: relative;
    text-decoration: none;
    color: var(--brand-text);
    padding: 0;
}

/* Foto step — full-width dentro padding container */
#showcase-grid .showcase-grid-step img,
#showcase-grid .showcase-grid-step .img-responsive,
#showcase-grid .showcase-grid-step .img-circle,
#showcase-grid .col-sm-12.next .table img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: 280px;
    object-fit: cover;
    border-radius: 8px;
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--brand-bg-soft);
}

/* BADGE NUMERO STEP — cerchio bianco overlay top-left foto */
#showcase-grid .section-body > div[class*="col-sm-12"]::before {
    content: counter(step-counter);
    position: absolute;
    top: 28px;
    left: 12px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid var(--brand-coral);
    border-radius: 50%;
    font-family: 'Lora', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--brand-coral);
    line-height: 1;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Caption testo step — sotto la foto, override color: white inline */
#showcase-grid .col-sm-12.first .l-mod-recipetextg,
#showcase-grid .table.table-responsive td:last-child div,
#showcase-grid .col-sm-12.next .table td:last-child div {
    color: var(--brand-text) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    margin: 12px 0 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

/* Tabella legacy → stack verticale (foto sopra, testo sotto) */
#showcase-grid .table.table-responsive,
#showcase-grid .table.table-responsive tbody,
#showcase-grid .table.table-responsive tr,
#showcase-grid .table.table-responsive td {
    display: block;
    width: 100% !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    text-align: left !important;
    vertical-align: top !important;
}
#showcase-grid .col-sm-12.next .table td:first-child {
    margin-bottom: 12px !important;
}

/* Nascondi badge "step by step" overlay nero rotondo legacy */
#showcase-grid .showcase-grid-step > div[style*="position: absolute"],
#showcase-grid .table td a > div[style*="position: absolute"],
#showcase-grid .table td > a > div[style*="position: absolute"] {
    display: none !important;
}

/* Caption "**Foto passo-passo della ricetta" — pillola coral editoriale */
#showcase-recipe .row > .col-sm-12[style*="margin-left"] {
    font-size: 13px;
    color: var(--brand-coral);
    font-style: italic;
    text-align: center;
    padding: 12px 16px;
    background: var(--brand-bg-soft);
    border-left: 3px solid var(--brand-coral);
    border-radius: 0 8px 8px 0;
    margin: 16px 0 !important;
}


/* ==============================================================
   BOX INFORMATIVI — tempi, condividi, preparazione, consigli,
   curiosità, info aggiuntive
   Fase 3.2.e — uniformazione visiva sezioni testuali
   ============================================================== */

/* Sezione INFORMAZIONI — tempi/dosi (id="recipe-detail2", markup
   div-based con .l-mod-sinformation, NON è una table) */
#recipe-detail2 {
    margin: 24px 0;
}
#recipe-detail2 .l-mod-sinformation {
    background: var(--brand-bg-soft);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0;
    font-size: 14px;
    color: var(--brand-text);
}
#recipe-detail2 .l-mod-sinformation .ico-36 {
    display: none;
    /* font icon Bootstrap legacy non disponibile su mobile */
}
#recipe-detail2 .l-mod-sinformation strong {
    display: inline-block;
    font-weight: 600;
    color: var(--brand-text);
    margin-right: 8px;
    font-size: 14px;
}
#recipe-detail2 .l-mod-sinformation small {
    display: inline-block;
    color: var(--brand-muted);
    font-size: 13px;
    font-weight: 400;
}
#recipe-detail2 .l-mod-sinformation .clearboth {
    height: 8px;
    clear: both;
}

/* Sezione CONDIVIDI — bottone primario + fallback social */
#social-share {
    margin: 24px 0;
}
#social-share .share-recipe-btn {
    width: 100%;
    padding: 14px;
    background: var(--brand-red);
    color: var(--brand-bg);
    border: 0;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
#social-share .share-net {
    flex: 1 1 calc(50% - 4px);
    text-align: center;
    padding: 10px 12px;
    background: var(--brand-bg-soft);
    border-radius: 8px;
    color: var(--brand-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--brand-border);
}
#social-share .share-net:active {
    background: var(--brand-border);
}

/* Sezione PREPARAZIONE + INFORMAZIONI AGGIUNTIVE
   (id="directions" è duplicato nel template legacy: matcha entrambe) */
#directions {
    margin: 24px 0;
}
#directions .section-body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--brand-text);
}
#directions p {
    margin: 0 0 16px 0;
}

/* Sezioni CONSIGLI + CURIOSITÀ — box editoriale con accent coral */
#suggestions,
#curiosities {
    margin: 24px 0;
    padding: 16px;
    background: var(--brand-bg-soft);
    border-left: 4px solid var(--brand-coral);
    border-radius: 0 8px 8px 0;
}
#suggestions .section-header,
#curiosities .section-header {
    border-bottom: 0;
    padding: 0;
    margin: 0 0 8px 0;
}
#suggestions .l-section-title,
#curiosities .l-section-title {
    font-size: 18px;
    color: var(--brand-coral);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}
#suggestions p,
#curiosities p,
#suggestions .l-mod-cc,
#curiosities .l-mod-cc {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--brand-text);
}


/* ==============================================================
   SIDEBAR — widget mobile
   Fase 3.2.f — stylizzazione widget aside.l-mod-aside
   ============================================================== */

/* Wrapper sidebar: stacca dal content principale, padding interno */
aside.l-mod-aside {
    margin: 32px 0 0 0;
    padding: 0 16px;
    background: var(--brand-bg);
}

/* Pattern comune titoli h2 widget — Lora 18px sentence case,
   underline 1px coral. Override `.l-section-title` di 3.2.a per
   sidebar: qui il border-bottom è 1px coral (non 2px brand-red). */
aside.l-mod-aside h2 {
    font-family: 'Lora', Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--brand-text);
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
    margin: 24px 0 12px 0;
    padding: 0 0 8px 0;
    border-bottom: 1px solid var(--brand-coral);
}
/* La section-header del Ricette correlate non deve avere il border
   rosso 2px globale; lo elimino qui */
aside.l-mod-aside .section-header {
    border-bottom: 0;
    padding: 0;
    margin: 0;
}

/* Widget non desiderati su mobile: HIDDEN */
aside.l-mod-aside section.section-box:not(.standard) {
    /* "Ricetta alternativa" — unico section-box senza .standard */
    display: none !important;
}
aside.l-mod-aside img.img-responsive[src*="magazine"],
aside.l-mod-aside ul.customlistrss {
    /* RSS magazine: logo + lista titoli */
    display: none !important;
}

/* WIDGET 1 — Stagioni e speciali (tag bandierine) */
aside.l-mod-aside .l-mod-listtags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px 0;
    padding: 0;
}
aside.l-mod-aside .l-mod-listtagsnametag {
    padding: 4px;
    margin: 0;
    width: auto;
    display: inline-block;
}
aside.l-mod-aside .l-mod-listtagsnametag img {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    object-fit: contain;
    display: block;
}

/* WIDGET 3 — Top ricette (popolato JS, override grid 2x2 → lista 1 col) */
aside.l-mod-aside #widget-top-recipes {
    background: var(--brand-bg);
    margin: 0 0 24px 0;
    padding: 0;
}
aside.l-mod-aside #widget-top-recipes .row.section-body,
aside.l-mod-aside #widget-top-recipes .row.section-body > .row {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 !important;
    padding: 0 !important;
}
aside.l-mod-aside #widget-top-recipes [class*="col-"] {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto;
}
aside.l-mod-aside #widget-top-recipes a {
    display: block;
    text-decoration: none;
    color: var(--brand-text);
    border-bottom: 1px solid var(--brand-border);
    padding: 8px 0;
}
aside.l-mod-aside #widget-top-recipes [class*="col-"]:last-child a {
    border-bottom: 0;
}
/* Trasforma .l-mod-ratio.photo in "thumb sx + titolo dx" via
   background-image left + padding-left per ospitare il testo */
aside.l-mod-aside #widget-top-recipes .l-mod-ratio.photo {
    display: flex;
    align-items: center;
    width: 100% !important;
    height: 60px !important;
    padding: 0 0 0 72px !important;
    background-size: 60px 60px !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    border-radius: 0;
    margin: 0 !important;
}
aside.l-mod-aside #widget-top-recipes .l-mod-ratio.photo span {
    display: block !important;
    flex: 1;
    color: var(--brand-text) !important;
    font-family: 'Lora', Georgia, serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.3;
    /* Annulla overlay desktop legacy */
    background: transparent !important;
    text-shadow: none !important;
    position: static !important;
    padding: 0 !important;
}

/* WIDGET 5 — Ingredienti stagione (popolato JS, grid 3 colonne
   thumb cerchio sopra + nome sotto). Fase 3.2.f-bis. */
aside.l-mod-aside #widget-sidebar-ingredients {
    list-style: none;
    margin: 0 -8px 24px -8px;
    /* margin negative -8px per compensare padding 8px del col-xs-4 */
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
aside.l-mod-aside #widget-sidebar-ingredients > li.col-xs-4 {
    /* Override regola 3.2.a [class*="col-"] { width: 100% } —
       ripristina 33.33% nativo Bootstrap per grid 3 colonne */
    width: 33.33% !important;
    padding: 8px !important;
    margin: 0 !important;
    text-align: center;
    float: none;
}
aside.l-mod-aside #widget-sidebar-ingredients > li > .row {
    margin: 0 !important;
}
aside.l-mod-aside #widget-sidebar-ingredients a {
    display: block;
    text-decoration: none;
    color: var(--brand-text);
    padding: 0;
    background: none;
}
aside.l-mod-aside #widget-sidebar-ingredients .col-md-12 {
    /* Wrapper della foto: forza block + 100% per centraggio */
    display: block !important;
    width: 100% !important;
    margin: 0 auto 8px auto !important;
    padding: 0 !important;
    text-align: center;
}
aside.l-mod-aside #widget-sidebar-ingredients .photo {
    /* Foto cerchio 60px sopra il nome */
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--brand-bg-soft);
    /* fallback colore se background-image non carica */
    margin: 0;
}
aside.l-mod-aside #widget-sidebar-ingredients .text {
    /* Nome ingrediente sotto la foto, line-clamp 2 righe */
    font-size: 12px;
    font-weight: 500;
    color: var(--brand-text);
    line-height: 1.3;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* WIDGET 5b — Speciale stagione CTA (pillola coral) */
aside.l-mod-aside #widget-current-special {
    text-align: center;
    margin: 16px 0 24px 0;
    padding: 0;
}
aside.l-mod-aside #widget-current-special:empty {
    display: none;
    /* Nascondi se JS non ha popolato (no doppio padding) */
}
aside.l-mod-aside #widget-current-special a {
    display: inline-block;
    padding: 12px 24px;
    background: var(--brand-coral);
    color: var(--brand-bg);
    border-radius: 24px;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
}
aside.l-mod-aside #widget-current-special a:active {
    background: var(--brand-red);
}

/* WIDGET 6 — Ricette correlate (grid 2x2 mantenuta) */
aside.l-mod-aside #related-recipes {
    margin: 0 0 24px 0;
}
aside.l-mod-aside #related-recipes .row.section-body > .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 !important;
}
aside.l-mod-aside #related-recipes [class*="col-"] {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
aside.l-mod-aside #related-recipes a {
    position: relative;
    display: block;
    text-decoration: none;
    overflow: hidden;
    border-radius: 8px;
    margin: 0;
}
aside.l-mod-aside #related-recipes .l-mod-ratio.photo {
    aspect-ratio: 1 / 1;
    width: 100% !important;
    padding: 0 !important;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin: 0;
}
aside.l-mod-aside #related-recipes .l-mod-ratio.photo span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #ffffff !important;
    font-family: 'Lora', Georgia, serif;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2;
    text-align: left;
}


/* ==============================================================
   FOOTER MOBILE DARK — Fase 3.2.g
   Override dello <style> inline desktop nel partial inc/footer.html.j2
   (specificity 1,1,0 → uso `body #footer-container` + !important
   per essere robusto cross-browser) #}
   ============================================================== */

body #footer-container {
    background: #1a1a1a !important;
    border-top: 0 !important;
    color: #ffffff;
    padding: 32px 16px !important;
    margin-top: 48px !important;
}

/* Footer links (Privacy, Chi siamo, Cookie) — sopra le bandiere */
body #footer-container .footer-links {
    margin-bottom: 24px;
}
body #footer-container .footer-link {
    display: inline-block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    text-decoration: none;
    margin: 0 8px;
    padding: 4px 0;
}
body #footer-container .footer-link:active {
    color: #ffffff;
}

/* Bandiere PNG (Opzione A: tenute così come sono nel template) */
body #footer-container .footer-langs {
    margin-bottom: 20px;
}
body #footer-container .footer-lang {
    display: inline-block;
    margin: 0 8px;
    opacity: 0.85;
}
body #footer-container .footer-lang:active {
    opacity: 1;
}
body #footer-container .footer-lang img {
    height: 24px;
    width: auto;
    vertical-align: middle;
}

/* Copyright + diritti riservati */
body #footer-container .footer-legal {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7) !important;
}
body #footer-container .footer-legal > div:first-child {
    margin-bottom: 4px;
}

/* Powered by Makezone */
body #footer-container .footer-powered {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5) !important;
}
body #footer-container .footer-powered a {
    color: var(--brand-coral) !important;
    text-decoration: none;
}
body #footer-container .footer-powered a:active {
    color: #ffffff !important;
}


/* ==============================================================
   STATIC PAGE LAYOUT — Fase 3.2.g (chi-siamo, privacy, cookie)
   ============================================================== */

article.static-page {
    padding: 24px 0 32px 0;
}
article.static-page h1 {
    font-family: 'Lora', Georgia, serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--brand-text);
    margin: 0 0 24px 0;
    line-height: 1.2;
    text-transform: none;
    text-shadow: none;
}
article.static-page h2 {
    font-family: 'Lora', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--brand-text);
    margin: 32px 0 12px 0;
    line-height: 1.3;
    border-bottom: 1px solid var(--brand-coral);
    padding-bottom: 6px;
}
article.static-page h3 {
    font-family: 'Lora', Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--brand-text);
    margin: 24px 0 8px 0;
}
article.static-page p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--brand-text);
    margin: 0 0 16px 0;
}
article.static-page ul,
article.static-page ol {
    padding-left: 24px;
    margin: 0 0 16px 0;
}
article.static-page li {
    font-size: 16px;
    line-height: 1.7;
    color: var(--brand-text);
    margin-bottom: 4px;
}
article.static-page a {
    color: var(--brand-red);
    text-decoration: underline;
}
article.static-page a:active {
    color: var(--brand-coral);
}

/* === Hub hero mobile (3.3.b2) — category/region/event/ingredient === */
@media (max-width: 768px) {
    #top-header.full-width-content {
        min-height: 200px;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: flex-end;
        padding: 16px 12px 18px;
    }
    #top-header.full-width-content > .container {
        width: 100%;
        padding: 0;
    }
    #top-header .hero-content {
        background: rgba(0, 0, 0, .55);
        color: #fff;
        padding: 12px 14px;
        border-radius: 6px;
        width: 100%;
        box-sizing: border-box;
    }
    #top-header .hero-content h1 {
        margin: 0 0 4px;
        font-size: 22px;
        line-height: 1.2;
        color: #fff;
    }
    #top-header .hero-content .prefix-speciale {
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .04em;
        opacity: .85;
        margin-bottom: 2px;
    }
    #top-header .hero-content .hero-count {
        display: inline-block;
        font-size: 12px;
        opacity: .85;
        margin-bottom: 4px;
    }
    #top-header .hero-content .hero-desc {
        margin: 6px 0 0;
        font-size: 13px;
        line-height: 1.35;
    }
    .l-mod-titlesection.cap,
    h2.l-mod-titlesection.cap {
        text-transform: capitalize;
    }

    /* === Hub tag pills mobile (3.3.c) — scroll-snap orizzontale === */
    .hub-pills {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding: 0 12px 4px;
        margin: 0;
        list-style: none;
        scrollbar-width: none;
    }
    .hub-pills::-webkit-scrollbar { display: none; }
    .hub-pills > li {
        flex: 0 0 auto;
        scroll-snap-align: start;
        margin: 0;
    }
    .hub-pills > li > a {
        display: inline-flex;
        align-items: center;
        padding: 8px 14px;
        border-radius: 18px;
        background: #f0f0f0;
        color: #333;
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none;
        transition: background-color .15s ease, color .15s ease;
    }
    .hub-pills > li > a:active,
    .hub-pills > li.pill--active > a {
        background: var(--brand-coral);
        color: #fff;
    }
    .hub-pills > li > a > .glyphicon {
        margin-right: 5px;
        font-size: 12px;
    }

    /* === Hub recipe card grid mobile (3.3.d) ===
       2 colonne (già da BS3 col-xs-6), aspect-ratio 1:1 photo,
       whole-card-clickable via ::after overlay sul link titolo. */
    .recipe-card,
    .l-mod-reclistcontainer {
        position: relative;
        padding-left: 6px;
        padding-right: 6px;
        margin-bottom: 12px;
    }
    .recipe-card .l-mod-ratio.photo,
    .l-mod-reclistcontainer .l-mod-ratio.photo {
        position: relative;
        aspect-ratio: 1 / 1;
        height: auto;
        background-size: cover;
        background-position: center;
        border-radius: 4px;
        overflow: hidden;
    }
    .recipe-card .l-mod-titlerecipelist,
    .l-mod-reclistcontainer .l-mod-titlerecipelist {
        position: absolute;
        left: 6px;
        right: 6px;
        bottom: 22px;
        padding: 8px 8px 6px;
        background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, 0) 100%);
        border-radius: 0 0 4px 4px;
    }
    .recipe-card .l-mod-titlerecipelist a,
    .l-mod-reclistcontainer .l-mod-titlerecipelist a {
        color: #fff;
        font-family: 'Lora', Georgia, serif;
        font-size: 11px;
        line-height: 1.2;
        text-decoration: none;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    }
    /* Whole-card-clickable: overlay invisibile sul link titolo */
    .recipe-card .l-mod-titlerecipelist a::after,
    .l-mod-reclistcontainer .l-mod-titlerecipelist a::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
    }
    /* Reposition: il photo deve avere il link coperto solo sotto il titolo,
       il pallino difficolta sopra a destra deve restare visibile. */
    .recipe-card .l-mod-diffrecipelist,
    .l-mod-reclistcontainer .l-mod-diffrecipelist {
        position: absolute;
        top: 6px;
        right: 6px;
        z-index: 2;
        pointer-events: none;
    }
    .recipe-card .l-mod-diffrecipelist .fa-circle,
    .l-mod-reclistcontainer .l-mod-diffrecipelist .fa-circle {
        font-size: 12px !important;
        text-shadow: 0 0 3px rgba(0, 0, 0, .5);
    }
    /* Info box (tempo, cottura, dose) overlay bottom 0, sfondo scuro,
       testo bianco — pattern desktop main.css adattato a mobile. */
    .recipe-card .l-mod-inforecipelist,
    .l-mod-reclistcontainer .l-mod-inforecipelist {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        padding: 4px 6px;
        background: rgba(0, 0, 0, .55);
        color: #fff;
        font-size: 10px;
        text-align: center;
        line-height: 1.3;
        pointer-events: none;
    }
    .recipe-card .l-mod-inforecipelist .fa,
    .l-mod-reclistcontainer .l-mod-inforecipelist .fa {
        margin-right: 2px;
        color: #fff;
    }
    /* 2.1 — Glifi meta card su mobile.
       Font Awesome è inline in main.css con media="(min-width:768px)" → su
       mobile gli <i class="fa"> sono vuoti. Sostituiamo i 4 glifi effettivamente
       usati (clock-o, tachometer, male, circle) con caratteri Unicode/emoji
       di sistema. Zero @font-face, zero file font, zero modifica markup. */
    .l-mod-inforecipelist .fa-clock-o::before,
    .l-mod-inforecipelist .fa-tachometer::before,
    .l-mod-inforecipelist .fa-male::before,
    .l-mod-diffrecipelist .fa-circle::before {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol",
                     "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
        font-weight: normal;
    }
    .l-mod-inforecipelist .fa-clock-o::before    { content: "⏱"; }
    .l-mod-inforecipelist .fa-tachometer::before { content: "⚡"; }
    .l-mod-inforecipelist .fa-male::before       { content: "👤"; }
    .l-mod-diffrecipelist .fa-circle::before     { content: "●"; }

    /* === Hub pagination compact mobile (3.3.e) ===
       5 elementi visibili max: first, prev (via :has), current, next, last */
    .pagination > li {
        display: none;
        min-width: 44px;
    }
    .pagination > li:first-child,
    .pagination > li:last-child,
    .pagination > li.active,
    .pagination > li.active + li,
    .pagination > li:has(+ .active) {
        display: inline-block;
    }
    .pagination > li > a,
    .pagination > li > span {
        padding: 10px 12px;
        min-width: 44px;
        min-height: 44px;
        text-align: center;
        font-size: 14px;
        line-height: 1.5;
        box-sizing: border-box;
    }
    .pagination > li.active > a,
    .pagination > li.active > a:hover,
    .pagination > li.active > a:focus,
    .pagination > li.active > span,
    .pagination > li.active > span:hover {
        background-color: var(--brand-coral, #ea1e1f);
        border-color: var(--brand-coral, #ea1e1f);
        color: #fff;
    }

    /* === Hub SEO copy box mobile (3.3.f rework) ===
       Box styling mantenuto, posizione DOM originale.
       NIENTE flex su .col-md-8: rompeva il float Bootstrap dei col-xs-6 nipoti
       (causa "listone infinito di card a colonna singola" su region/event/etc). */
    .seo-copy,
    .seo-copy * {
        background: var(--brand-text) !important;
        color: #fff !important;
    }
    .seo-copy {
        border: 1px solid var(--brand-text) !important;
        border-radius: 6px;
        padding: 16px !important;
        margin: 16px 0 !important;
    }
    .seo-copy h2,
    .seo-copy h3,
    .seo-copy strong {
        color: #fff !important;
    }
    .seo-copy a {
        color: var(--brand-coral) !important;
    }
    .seo-copy .l-mod-content {
        font-size: 14px;
        line-height: 1.6;
    }
    .seo-copy .section-header { display: none; }

    /* Blocco "Hub recipe card mobile rework (3.3.f)" rimosso in 3.4.h:
       l'override !important tornava il layout a static sotto la foto
       (titolo nero color #333, info color #888). Ora ripristinato
       pattern overlay desktop adattato a mobile nel blocco 3.3.d sopra. */

    /* === Top recipes sidebar hub mobile (3.4.h) ===
       Ricette popolari nella sidebar (sidebar_list.html.j2 #top-recipes).
       Markup: col-xs-6 wrapper + .l-mod-ratio.photo container + <span>
       titolo dentro. Replica pattern card hub (foto quadrata 1:1 + titolo
       overlay bottom con gradient). Selettore mirato a #top-recipes per
       non impattare altri .l-mod-ratio.photo del sito.

       NB: il template ha un <style> inline con
         .customclass span { font-size: 16px !important; }
       per batterlo serve !important sul font-size del titolo. */
    #top-recipes .l-mod-setpadd {
        padding: 4px;
        margin-bottom: 8px;
    }
    #top-recipes .l-mod-ratio.photo {
        position: relative;
        aspect-ratio: 1 / 1;
        height: auto;
        background-size: cover;
        background-position: center;
        border-radius: 4px;
        overflow: hidden;
        margin: 0;
    }
    #top-recipes .l-mod-ratio.photo span {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 6px 6px 4px;
        background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, 0) 100%);
        color: #fff !important;
        font-family: 'Lora', Georgia, serif;
        font-size: 11px !important;
        line-height: 1.2;
        text-align: center;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    }

    /* === Sidebar ingredients grid mobile (3.4.h) ===
       Partial seasonal_ingredients.html.j2 layout='grid' nella sidebar:
       3 colonne col-xs-4 con foto quadrata 1:1 + label sotto.
       Selettore mirato a .l-mod-recipes-set (usato solo dal partial grid).
       Markup: <li.col-xs-4> > .row > <a> > <span.col-md-12> > <span.photo>
                                            + <span.text>{nome}</span>. */
    .l-mod-recipes-set ul.row > li {
        padding: 4px;
    }
    .l-mod-recipes-set ul.row > li a {
        display: block;
        text-decoration: none;
    }
    .l-mod-recipes-set .photo {
        display: block;
        width: 100%;
        padding-bottom: 100%;
        background-size: cover;
        background-position: center;
        background-color: var(--brand-bg-soft, #f0f0f0);
        border-radius: 4px;
    }
    .l-mod-recipes-set .text {
        display: block;
        margin-top: 4px;
        font-size: 10px;
        text-align: center;
        color: #333;
        line-height: 1.2;
    }

    /* === Home mobile (3.4) ===
       Fresh markup BEM accanto alle classi legacy.
       Pattern pilota: classi .home-* targetizzate, specificity 0,1,0 base.
       Override main.css legacy (.l-mod-ratio) via selettore composto 0,2,0. */

    /* --- Hero ricetta del giorno (3.4.c) --- */
    .home-hero {
        min-height: 240px;
        background-size: cover !important;
        background-position: center !important;
        position: relative;
        margin: 0 -15px 16px;
    }
    .home-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .55) 100%);
        pointer-events: none;
    }
    .home-hero > .container {
        position: relative;
        z-index: 1;
        padding: 0;
    }
    .home-hero .header-title {
        margin: 0;
        padding-top: 140px;
    }
    .home-hero .header-title h1 {
        margin: 0;
        padding: 0 16px;
        font-size: 22px;
        line-height: 1.2;
        font-family: 'Lora', Georgia, serif;
    }
    .home-hero .header-title h1 a {
        color: #fff;
        text-decoration: none;
        text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    }
    .home-hero .header-abstract {
        margin: 8px 0 0;
        padding: 0 16px 14px;
    }
    .home-hero .header-abstract .header-text { display: none; }
    .home-hero .title-red-label {
        display: inline-block;
    }
    .home-hero .title-red-label a {
        display: inline-block;
        padding: 4px 10px;
        background: var(--brand-coral, #ea1e1f);
        color: #fff;
        border-radius: 12px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .04em;
        text-decoration: none;
    }

    /* --- Grid Ricette popolari (3.4.d PILOTA fresh markup) --- */
    .home-popular {
        padding: 0 6px;
    }
    .home-popular .section-header h2 {
        font-family: 'Lora', Georgia, serif;
        font-size: 18px;
        margin: 8px 0 12px;
    }
    .home-grid__item {
        padding: 0 6px 12px !important;
    }
    /* override l-mod-ratio padding-bottom 100% trick di main.css */
    .l-mod-ratio.home-card {
        padding-bottom: 0;
        height: auto;
        aspect-ratio: 1 / 1;
        position: relative;
        background-size: cover;
        background-position: center;
        border-radius: 6px;
        overflow: hidden;
        margin: 0;
    }
    /* title overlay sulla card */
    .l-mod-ratio.home-card > span {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 18px 10px 8px;
        background: linear-gradient(transparent, rgba(0, 0, 0, .75));
        color: #fff;
        font-family: 'Lora', Georgia, serif;
        font-size: 13px !important;
        line-height: 1.2;
        text-align: left;
        display: block;
    }
    .home-grid__item > a {
        display: block;
        text-decoration: none;
    }

    /* --- Last recipe / FEATURED highlight (3.4.g) --- */
    .home-featured {
        margin: 16px 12px;
        padding: 0;
        border-radius: 8px;
        overflow: hidden;
    }
    .home-featured .section-body { margin: 0; padding: 0; }
    .home-featured .section-body > .row { margin: 0; }
    .home-featured ul { margin: 0; padding: 0; list-style: none; }
    .home-featured li.col-xs-12 { padding: 0; }
    .home-featured .photo.l-mod-photoback {
        display: block;
        position: relative;
        aspect-ratio: 16 / 9;
        background-size: cover;
        background-position: center;
        border-radius: 8px;
        overflow: hidden;
    }
    .home-featured .photo.l-mod-photoback .title {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 28px 14px 14px;
        background: linear-gradient(transparent, rgba(0, 0, 0, .8));
        color: #fff;
        font-family: 'Lora', Georgia, serif;
        font-size: 16px;
        line-height: 1.25;
    }
    .home-featured .photo.l-mod-photoback .title small {
        display: block;
        font-size: 10px;
        opacity: .85;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: 4px;
    }

    /* --- Carosello eventi placeholder (3.4.e) ---
       Quando vuoto, hide. Da 3.4.e in poi popolato lato Python. */
    #carousel-events:empty,
    #carousel-events .carousel-inner:empty {
        display: none;
    }
    /* Se Python lo popola con .home-events horizontal scroll */
    .home-events {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        padding: 4px 12px 8px;
        margin: 0 -15px;
        scrollbar-width: none;
    }
    .home-events::-webkit-scrollbar { display: none; }
    .home-events__item {
        flex: 0 0 70%;
        scroll-snap-align: start;
        position: relative;
        aspect-ratio: 16 / 9;
        background-size: cover;
        background-position: center;
        border-radius: 6px;
        overflow: hidden;
        text-decoration: none;
    }
    .home-events__item > span {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 16px 10px 8px;
        background: linear-gradient(transparent, rgba(0, 0, 0, .75));
        color: #fff;
        font-family: 'Lora', Georgia, serif;
        font-size: 13px;
        line-height: 1.25;
    }

    /* --- Ingredienti di stagione (3.4.f) ---
       <ul class="list-inline l-mod-ingredient"> popolata Python: scroll snap. */
    .l-mod-ingredient:not(:empty) {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        padding: 4px 12px 8px;
        margin: 0;
        list-style: none;
        scrollbar-width: none;
    }
    .l-mod-ingredient:not(:empty)::-webkit-scrollbar { display: none; }
    .l-mod-ingredient > li {
        flex: 0 0 auto;
        scroll-snap-align: start;
        margin: 0;
    }
    /* 3.4.f-fix3 — Pattern recipe-ingredients (mobile.css:489+) adattato
       a layout column home (carosello). Riusa classi .ingredient/.img-circle
       /.name del recipe pattern. Specificity 0,2,0, no !important nuovi
       (display: block !important e' copiato identico dal pattern recipe). */
    /* Mobile override: dimensioni cerchio + label più piccole.
       Le regole base .l-mod-ingredient sono FUORI da @media (sotto). */
    .l-mod-ingredient .img-circle {
        width: 60px;
        height: 60px;
    }
    .l-mod-ingredient .name {
        font-size: 11px;
        max-width: 80px;
    }

    /* --- Cleanup intro paragrafo lungo IT (mobile-only) --- */
    .l-mod-content.custom_content p {
        font-size: 13px;
        line-height: 1.5;
        color: #555;
    }

    /* --- Hide Facebook Like widget mobile (root IT solo) --- */
    .home-hero .header-actions { display: none !important; }
}

/* === Hub ingredienti home — regole base (desktop+mobile) ===
   3.4.f-fix5: regole base FUORI da @media. Mobile @media sopra
   override solo dimensioni (cerchio 60×60 invece di 80×80,
   label 11px invece di 13px). Pattern recipe.html.j2:154
   adattato a layout column home (carosello). */
.l-mod-ingredient .ingredient {
    display: block;
    text-align: center;
}
.l-mod-ingredient .img-circle {
    display: block !important;
    width: 80px;
    height: 80px;
    margin: 0 auto 4px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--brand-bg-soft, #f0f0f0);
}
.l-mod-ingredient .name {
    display: block;
    font-size: 13px;
    text-align: center;
    max-width: 100px;
    line-height: 1.2;
    margin: 0 auto;
}
.l-mod-ingredient .name a {
    color: var(--brand-text, #333);
    text-decoration: none;
}