/* VARIANTE Salvia / crema / terracotta 



:root {

    --bg: #f7f3ea;

    --surface: #ffffff;

    --surface-soft: #fbf8f1;

    --text: #2d2a22;

    --muted: #746f63;



    --brand: #7f9f72;

    --brand-dark: #4f6f48;

    --brand-light: #e6eddc;



    --line: #e4dbc8;

    --soft: #f1eadb;

    --soft-2: #fffaf1;



    --shadow: 0 12px 28px rgba(70, 58, 38, .12);

}



*/



/* VARIANTE Verde oliva / panna / miele  */



:root {

    --bg: #f6f4ea;

    --surface: #ffffff;

    --surface-soft: #fbfaf4;

    --text: #263125;

    --muted: #687062;



    --brand: #6f8f42;

    --brand-dark: #3f5f2c;

    --brand-light: #e7efd7;



    --line: #dfe6cf;

    --soft: #f0f4e3;

    --soft-2: #fbfcf4;



    --shadow: 0 12px 28px rgba(50, 70, 36, .13);

}









* {

    box-sizing: border-box;

}



body {

    margin: 0;

    font-family: 'Trebuchet MS', Verdana, Geneva, sans-serif;

    background: var(--bg);

    color: var(--text);

    line-height: 1.55;

}



a {

    color: inherit;

    text-decoration: none;

}



img {

    max-width: 100%;

    display: block;

}



.container {

    width: min(1120px, calc(100% - 32px));

    margin: 0 auto;

}



.site-header {

    background: var(--surface);

    border-bottom: 1px solid var(--line);

}



.header-inner {

    padding: 22px 0;

}



.brand {

    display: inline-flex;

    align-items: center;

    gap: 14px;

}



.brand-mark {

    width: 54px;

    height: 54px;

    border-radius: 18px;

    background: var(--brand);

    color: #fff;

    display: grid;

    place-items: center;

    font-weight: 700;

    letter-spacing: .5px;

}



.brand strong {

    display: block;

    font-size: 28px;

    line-height: 1.1;

}



.brand em {

    display: block;

    color: var(--muted);

    font-style: normal;

    margin-top: 3px;

}



.main-nav {

    background: #244a2c;

    color: #fff;

    position: sticky;

    top: 0;

    z-index: 10;

}



.nav-inner {

    display: flex;

    align-items: center;

    gap: 6px;

    overflow-x: auto;

}



.nav-inner a {

    padding: 14px 16px;

    display: inline-block;

    white-space: nowrap;

    border-radius: 999px;

    margin: 6px 0;

    color: #fff;

}



.nav-inner a:hover {

    background: rgba(255,255,255,.12);

}



.main-site-link {

    margin-left: auto !important;

    background: var(--brand);

}



.page {

    padding: 32px 0 56px;

}



.hero {

    min-height: 340px;

    border-radius: 34px;

    background:

        linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,.70)),

        url("../img/hero-cucina.jpg");

    background-size: cover;

    background-position: right;

    color: var(--text);

    padding: 48px;

    display: flex;

    align-items: center;

    box-shadow: var(--shadow);

}



.hero h1 {

    max-width: 680px;

    font-size: clamp(36px, 6vw, 66px);

    line-height: .98;

    margin: 8px 0 16px;

}



.hero p {

    max-width: 620px;

    color: #425545;

    font-size: 18px;

}



.eyebrow {

    text-transform: uppercase;

    letter-spacing: .14em;

    color: var(--brand);

    font-weight: 700;

    font-size: 13px;

    margin: 0 0 8px;

}



.hero .eyebrow {

    color: var(--brand-dark);

}



.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 24px;

}



.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 18px;

    background: var(--brand);

    color: #fff;

    border-radius: 999px;

    font-weight: 700;

}



.btn-soft {

    background: #fff;

    color: var(--brand-dark);

}



.section {

    margin-top: 42px;

}



.section-title {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;

}



.section-title h2,

.page-title h1 {

    margin: 0;

}



.section-title a,

.read-more {

    color: var(--brand-dark);

    font-weight: 700;

}



.grid {

    display: grid;

    gap: 20px;

}



.grid-categories {

    grid-template-columns: repeat(6, 1fr);

}



.category-card {

    background: var(--surface);

    border-radius: 24px;

    overflow: hidden;

    box-shadow: var(--shadow);

    border: 1px solid var(--line);

}



.category-card img {

    width: 100%;

    height: 130px;

    object-fit: cover;

    background: var(--soft);

}



.category-card span {

    display: block;

    padding: 14px;

    font-weight: 700;

    text-align: center;

}



.cards {

    grid-template-columns: repeat(3, 1fr);

}



.card {

    background: var(--surface);

    border: 1px solid var(--line);

    border-radius: 28px;

    overflow: hidden;

    box-shadow: var(--shadow);

}



.card img {

    width: 100%;

    height: 210px;

    object-fit: cover;

    background: var(--soft);

}



.card-body {

    padding: 18px;

}



.card h3 {

    margin: 8px 0 8px;

    font-size: 21px;

    line-height: 1.2;

}



.card p {

    color: var(--muted);

    margin: 0;

}



.pill {

    display: inline-flex;

    padding: 5px 10px;

    border-radius: 999px;

    background: var(--soft);

    color: var(--brand-dark);

    font-size: 12px;

    font-weight: 700;

}



.ad-box {

    margin: 28px 0;

    border: 1px dashed #b8d7ad;

    background: #f8fcf5;

    color: #4f7f56;

    min-height: 86px;

    border-radius: 22px;

    display: grid;

    place-items: center;

    text-align: center;

}



.ad-box-light {

    background: #ffffff;

}



.layout {

    display: grid;

    grid-template-columns: 260px 1fr;

    gap: 28px;

    align-items: start;

}



.sidebar {

    background: var(--surface);

    border: 1px solid var(--line);

    border-radius: 26px;

    padding: 18px;

    box-shadow: var(--shadow);

    position: sticky;

    top: 80px;

}



.sidebar h3 {

    margin: 8px 0 10px;

}



.side-link {

    display: block;

    padding: 10px 12px;

    border-radius: 14px;

    color: var(--muted);

}



.side-link:hover {

    background: var(--soft);

    color: var(--brand-dark);

}



.page-title {

    margin-bottom: 26px;

}



.page-title h1,

.recipe-detail h1,

.article-detail h1 {

    font-size: clamp(34px, 5vw, 54px);

    line-height: 1.04;

}



.recipe-hero {

    display: grid;

    grid-template-columns: 48% 1fr;

    gap: 32px;

    align-items: center;

    background: var(--surface);

    border: 1px solid var(--line);

    border-radius: 34px;

    padding: 24px;

    box-shadow: var(--shadow);

}



.recipe-hero img,

.article-cover {

    border-radius: 26px;

    width: 100%;

    height: 420px;

    object-fit: cover;

    background: var(--soft);

}



.lead {

    font-size: 19px;

    color: var(--muted);

}



.recipe-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 22px;

}



.recipe-meta span {

    background: var(--soft);

    border-radius: 999px;

    padding: 8px 12px;

}



.recipe-columns {

    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 24px;

    margin-top: 28px;

}



.panel {

    background: var(--surface);

    border: 1px solid var(--line);

    border-radius: 26px;

    padding: 24px;

    box-shadow: var(--shadow);

    margin-top: 24px;

}



.panel h2 {

    margin-top: 0;

}



.preline {

    white-space: pre-line;

}



.nutrition-grid {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 10px;

}



.nutrition-grid span {

    padding: 14px;

    background: var(--soft);

    border-radius: 18px;

    text-align: center;

}



.nutrition-grid strong {

    display: block;

    font-size: 18px;

}



.article-list {

    display: grid;

    gap: 18px;

}



.article-row {

    background: var(--surface);

    border: 1px solid var(--line);

    border-radius: 26px;

    padding: 16px;

    display: grid;

    grid-template-columns: 360px 1fr;

    gap: 20px;

    box-shadow: var(--shadow);

}



.article-row img {

    height: 260px;

    width: 100%;

    object-fit: contain;

    border-radius: 18px;

    background: var(--soft);

}



.article-row h2,

.article-row h3 {

    margin: 0 0 8px;

}



.article-row p {

    color: var(--muted);

    margin: 0 0 10px;

}



.article-detail {

    max-width: 900px;

    margin: 0 auto;

}



.article-cover {

    margin-bottom: 24px;

}



.empty {

    padding: 24px;

    background: var(--surface);

    border: 1px solid var(--line);

    border-radius: 22px;

}



.site-footer {

    border-top: 1px solid var(--line);

    background: #244a2c;

    color: #fff;

    padding: 28px 0;

    text-align: center;

}



@media (max-width: 900px) {

    .grid-categories,

    .cards,

    .nutrition-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .layout,

    .recipe-hero,

    .recipe-columns {

        grid-template-columns: 1fr;

    }



    .sidebar {

        position: static;

    }



    .main-site-link {

        margin-left: 0 !important;

    }

}



@media (max-width: 620px) {

    .hero {

        padding: 28px;

        border-radius: 24px;

    }



    .grid-categories,

    .cards,

    .nutrition-grid {

        grid-template-columns: 1fr;

    }



    .article-row {

        grid-template-columns: 1fr;

    }



    .recipe-hero img,

    .article-cover {

        height: 260px;

    }



    .brand strong {

        font-size: 22px;

    }

}



body {

    background:

        radial-gradient(circle at top left, rgba(143, 198, 117, .20), transparent 34%),

        linear-gradient(180deg, #f1f8ee 0%, #eaf5e5 100%);

}



.site-header {

    background: rgba(255,255,255,.92);

    backdrop-filter: blur(8px);

}



.brand-mark {

    background: linear-gradient(135deg, var(--brand), #86b96f);

    box-shadow: 0 10px 24px rgba(47, 111, 61, .22);

}



.hero {

    background:

        linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.72)),

        url("../img/hero-cucina.jpg");

    color: var(--text);

}



.hero .eyebrow {

    color: var(--brand-dark);

}



.card,

.category-card,

.panel,

.sidebar,

.article-row,

.recipe-hero {

    border-color: var(--line);

}



.card:hover,

.category-card:hover,

.article-row:hover,

.quick-boxes a:hover {

    background: var(--soft-2);

    transform: none;

    transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;

    border-color: #b9d9ae;

   /* box-shadow: 0 22px 55px rgba(31, 74, 42, .14); */

 	box-shadow: 0 5px 14px rgba(31, 74, 42, .34);

}



.btn {

    background: linear-gradient(135deg, var(--brand), var(--brand-dark));

}



.btn-soft {

    background: #ffffff;

    color: var(--brand-dark);

}



.pill,

.recipe-meta span,

.nutrition-grid span {

    background: var(--brand-light);

    color: var(--brand-dark);

}



.side-link:hover {

    background: var(--brand-light);

}



.ingredienti-html ul {

    margin: 0;

    padding: 0;

    list-style: none;

}



.ingredienti-html li {

    margin: 0;

    padding: 10px 14px;

    border-radius: 12px;

}



.ingredienti-html li:nth-child(odd) {

    background: #edf7e8;

}



.ingredienti-html li:nth-child(even) {

    background: #f8fcf5;

}



.breadcrumb {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    margin: 0 0 22px;

    color: var(--muted);

    font-size: 15px;

}



.breadcrumb a {

    color: var(--brand-dark);

    font-weight: 700;

}



.breadcrumb span {

    color: #94a694;

}



.recipe-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 22px;

}



.testo-preparazione {

    font-size: 19px;

    line-height: 1.75;

    color: #35483a;

}



.related-section {

    margin-top: 34px;

}



.related-cards .card img {

    height: 170px;

}



.pagination {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    justify-content: center;

    margin: 34px 0 0;

}



.pagination a,

.pagination strong {

    min-width: 42px;

    height: 42px;

    padding: 0 14px;

    border-radius: 999px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    border: 1px solid var(--line);

    color: var(--brand-dark);

    font-weight: 700;

    box-shadow: 0 8px 20px rgba(31, 74, 42, .08);

}



.pagination strong {

    background: var(--brand);

    color: #ffffff;

    border-color: var(--brand);

}



.nav-ico,

.ui-ico {

    display: inline-block;

    margin-right: 5px;

    color: var(--brand-dark);

    font-weight: 700;

}



.main-nav .nav-ico {

    color: #dff7d2;

}



.chef-icon {

    font-size: 28px;

    line-height: 1;

}



.nav-search {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-left: auto;

}



.nav-search input {

    width: 170px;

    border: 0;

    border-radius: 999px;

    padding: 10px 13px;

    outline: none;

    font-family: inherit;

}



.nav-search button {

    border: 0;

    border-radius: 999px;

    padding: 10px 13px;

    background: var(--brand);

    color: #fff;

    font-weight: 700;

    cursor: pointer;

    font-family: inherit;

}



.quick-boxes {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 16px;

    margin: 22px 0 8px;

}



.quick-boxes a {

    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 22px;

    padding: 18px;

    box-shadow: var(--shadow);

    display: grid;

    grid-template-columns: 46px 1fr;

    column-gap: 12px;

    align-items: center;

}



.quick-boxes span {

    grid-row: span 2;

    width: 46px;

    height: 46px;

    border-radius: 16px;

    display: grid;

    place-items: center;

    background: var(--brand-light);

    color: var(--brand-dark);

    font-size: 22px;

    font-weight: 700;

}



.quick-boxes strong {

    display: block;

    color: var(--text);

}



.quick-boxes em {

    display: block;

    color: var(--muted);

    font-style: normal;

    font-size: 13px;

}



.filters-box {

    display: grid;

    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr auto;

    gap: 12px;

    align-items: end;

    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 26px;

    padding: 18px;

    box-shadow: var(--shadow);

    margin-bottom: 28px;

}



.filters-box label {

    display: block;

    font-weight: 700;

    font-size: 13px;

    color: var(--brand-dark);

    margin-bottom: 6px;

}



.filters-box input,

.filters-box select {

    width: 100%;

    border: 1px solid var(--line);

    border-radius: 14px;

    padding: 11px 12px;

    font-family: inherit;

    outline: none;

    background: #f8fcf5;

}



.filters-actions {

    display: flex;

    gap: 8px;

    align-items: center;

}



.card-mini-meta {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    margin-top: 14px;

}



.card-mini-meta span {

    display: inline-flex;

    align-items: center;

    background: var(--soft);

    color: var(--brand-dark);

    border-radius: 999px;

    padding: 6px 10px;

    font-size: 13px;

    font-weight: 700;

}



@media (max-width: 1000px) {

    .filters-box,

    .quick-boxes {

        grid-template-columns: repeat(2, 1fr);

    }



    .nav-search {

        order: 10;

        width: 100%;

        margin: 0 0 8px;

    }



    .nav-search input {

        width: 100%;

    }

}



@media (max-width: 620px) {

    .filters-box,

    .quick-boxes {

        grid-template-columns: 1fr;

    }



    .filters-actions {

        flex-direction: column;

        align-items: stretch;

    }

}



.article-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin: 18px 0 6px;

}



.article-html {

    font-size: 18px;

    line-height: 1.75;

}



.article-html h2 {

    margin: 0 0 12px;

    font-size: 30px;

    line-height: 1.18;

    color: var(--brand-dark);

}



.article-html h2:not(:first-child) {

    margin-top: 32px;

}



.article-html p {

    color: #35483a;

    margin: 0 0 18px;

}



.article-html ul {

    list-style: none;

    margin: 18px 0;

    padding: 0;

}



.article-html li {

    margin: 0;

    padding: 10px 14px;

    border-radius: 12px;

}



.article-html li:nth-child(odd) {

    background: #edf7e8;

}



.article-html li:nth-child(even) {

    background: #f8fcf5;

}



.article-row.compact {

    grid-template-columns: 140px 1fr;

}



.article-row.compact img {

    height: 110px;

}



@media (max-width: 620px) {

    .article-row.compact {

        grid-template-columns: 1fr;

    }



    .article-html h2 {

        font-size: 24px;

    }

}



.article-bottom-title {

    align-items: center;

}



.article-bottom-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    justify-content: flex-end;

}



@media (max-width: 620px) {

    .article-bottom-title {

        align-items: flex-start;

    }



    .article-bottom-actions {

        width: 100%;

        justify-content: flex-start;

    }

}



/* CUCINA_ARUBA_REVIEW2_2026_05_22 */

.archive-desc {

    max-height: 4.8em;

    overflow: hidden;

}



.card-body .archive-desc,

.article-row .archive-desc {

    display: block;

}





/* CUCINA_ARUBA_REVIEW3_2026_05_25 */

.hero {

    background:

        linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.74)),

        url("../img/hero-cucina.jpg");

    color: var(--text);

}



.hero p {

    color: #425545;

}



.hero .eyebrow {

    color: var(--brand-dark);

}



.card,

.category-card,

.article-row,

.quick-boxes a {

    transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;

}



.card:hover,

.category-card:hover,

.article-row:hover,

.quick-boxes a:hover {

    background: #f8fcf5;

    border-color: #b9d9ae;

    box-shadow: 0 22px 55px rgba(31, 74, 42, .14);

    transform: none;

}



.card-link,

.article-row-link,

.related-card-link {

    display: block;

    color: inherit;

    height: 100%;

}



.card-link:focus-visible,

.article-row-link:focus-visible,

.related-card-link:focus-visible,

.quick-boxes a:focus-visible,

.category-card:focus-visible,

.btn:focus-visible {

    outline: 3px solid rgba(79,143,91,.35);

    outline-offset: 4px;

}



.article-list.large,

.home-articles {

    gap: 22px;

}



.article-row {

    grid-template-columns: 430px 1fr;

}



.article-row img {

    height: 280px;

    object-fit: contain;

}



.article-row .archive-desc,

.card-body .archive-desc.article-desc-full {

    max-height: none;

    overflow: visible;

}



.article-cover {

    height: auto;

    max-height: 560px;

    object-fit: contain;

}



.related-section .article-list,

.related-cards-two {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

}



.article-related-layout {

    display: grid;

    grid-template-columns: 1fr 270px;

    gap: 18px;

    align-items: stretch;

}



.article-bottom-actions-panel {

    background: var(--surface);

    border: 1px solid var(--line);

    border-radius: 26px;

    box-shadow: var(--shadow);

    padding: 18px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 12px;

}



.article-bottom-actions-panel .btn,

.article-bottom-actions-panel .btn-soft {

    width: 100%;

    color: #fff;

    text-align: center;

}



.article-bottom-actions-panel .btn-soft {

    background: #ffffff;

    color: var(--brand-dark);

    border: 1px solid var(--brand-dark);

}



.article-row.compact {

    grid-template-columns: 1fr;

    padding: 14px;

}



.article-row.compact img {

    height: 170px;

    object-fit: contain;

}



.article-row.compact .read-more {

    display: none;

}



.article-row-link h2,

.article-row-link h3,

.card-link h3 {

    color: var(--text);

}



@media (max-width: 900px) {

    .article-row,

    .article-related-layout,

    .related-section .article-list,

    .related-cards-two {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 620px) {

    .article-row img,

    .article-row.compact img {

        height: 230px;

    }



    .article-cover {

        max-height: none;

    }

}





/* Link interni alle card articolo: occupano tutta la card */

.article-row-link {

    grid-column: 1 / -1;

    display: grid;

    grid-template-columns: inherit;

    gap: inherit;

    align-items: start;

}



.article-row.compact .article-row-link {

    grid-template-columns: 1fr;

}



@media (max-width: 900px) {

    .article-row-link {

        grid-template-columns: 1fr;

    }

}



/* CUCINA_ARUBA_REVIEW4_2026_05_25 */

/* HERO home: rimuove qualsiasi overlay/scurimento sopra l'immagine */

.hero {

    background-image: url("../img/hero-cucina.jpg");

    background-color: #f8fcf5;

    background-size: cover;

    background-position: right center;

    color: var(--text);

}



.hero p {

    color: #425545;

}



.hero .eyebrow {

    color: var(--brand-dark);

}



/* Hover card: solo ombra esterna, senza zoom/taglio immagini e senza movimento */

.card,

.category-card,

.article-row,

.quick-boxes a {

    transition: box-shadow .22s ease;

}



.card img,

.category-card img,

.article-row img {

    transform: none;

}



.card:hover,

.category-card:hover,

.article-row:hover,

.quick-boxes a:hover {

    background: var(--surface);

    border-color: var(--line);

    box-shadow: 0 30px 75px rgba(31, 74, 42, .26), 0 0 0 4px rgba(79, 143, 91, .08);

    transform: none;

}



.card:hover img,

.category-card:hover img,

.article-row:hover img,

.article-row.compact:hover img {

    transform: none;

}





/* CUCINA_ARUBA_REVIEW5_2026_05_25 */

/* Uniforma le immagini delle card: sempre intere, mai tagliate */

.card img,

.category-card img,

.article-row img,

.article-row.compact img,

.related-cards .card img {

    object-fit: contain !important;

    object-position: center center !important;

    background: var(--soft);

}



/* Mantiene l'hover solo come ombra esterna, senza zoom e senza spostamenti */

.card,

.category-card,

.article-row,

.quick-boxes a {

    transition: box-shadow .22s ease, border-color .22s ease !important;

}



.card:hover,

.category-card:hover,

.article-row:hover,

.quick-boxes a:hover {

    background: var(--surface) !important;

    border-color: var(--line) !important;

    box-shadow: 0 30px 75px rgba(31, 74, 42, .26), 0 0 0 4px rgba(79, 143, 91, .08) !important;

    transform: none !important;

}



.card:hover img,

.category-card:hover img,

.article-row:hover img,

.article-row.compact:hover img,

.related-cards .card:hover img {

    transform: none !important;

}



/* Dettaglio articolo: immagine introduttiva intera e a tutta larghezza, senza bordo laterale */

.article-detail {

    max-width: 900px;

}



.article-cover {

    display: block !important;

    width: 100% !important;

    height: auto !important;

    max-height: none !important;

    object-fit: initial !important;

    object-position: center center !important;

    margin: 0 0 24px 0 !important;

    background: transparent !important;

}



/* CUCINA_ARUBA_REVIEW6_2026_05_25 */

/* Immagini card: larghezza piena, altezza naturale. Nessun taglio e nessun bordo laterale. */

.card img,

.category-card img,

.article-row img,

.article-row.compact img,

.related-cards .card img,

.related-cards-two .article-row img,

.home-articles .article-row img {

    width: 100% !important;

    height: auto !important;

    max-height: none !important;

    object-fit: initial !important;

    object-position: center center !important;

    background: transparent !important;

}



/* Mantiene lo spazio immagine senza forzare altezze uguali: le card possono avere altezze diverse. */

.card,

.category-card,

.article-row {

    align-self: start;

}



/* Card articolo: l'immagine resta piena nella colonna assegnata e il testo segue l'altezza reale. */

.article-row,

.article-row-link {

    align-items: start !important;

}



/* Hover: solo ombra esterna, nessuno zoom/ritaglio/spostamento. */

.card,

.category-card,

.article-row,

.quick-boxes a {

    transition: box-shadow .22s ease, border-color .22s ease !important;

}



.card:hover,

.category-card:hover,

.article-row:hover,

.quick-boxes a:hover {

    box-shadow: 0 30px 75px rgba(31, 74, 42, .26), 0 0 0 4px rgba(79, 143, 91, .08) !important;

    transform: none !important;

}



.card:hover img,

.category-card:hover img,

.article-row:hover img,

.article-row.compact:hover img,

.related-cards .card:hover img {

    transform: none !important;

}



/* CUCINA_ARUBA_REVIEW7_2026_05_25 */

/* Dettaglio ricetta: immagine iniziale non tagliata, larghezza piena e allineata in alto. */

.recipe-hero {

    align-items: start !important;

}



.recipe-hero > img,

.recipe-detail .recipe-hero > img {

    display: block !important;

    width: 100% !important;

    height: auto !important;

    max-height: none !important;

    object-fit: initial !important;

    object-position: top center !important;

    align-self: start !important;

    margin: 0 !important;

    background: transparent !important;

}





/* Font moderno sito */

body {

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    font-size: 16px;

    letter-spacing: -0.01em;

}



h1, h2, h3,

.brand strong {

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    letter-spacing: -0.035em;

}





/* FIX RESPONSIVE / OVERFLOW MOBILE */

html,

body {

    width: 100%;

    max-width: 100%;

    overflow-x: hidden;

}



*,

*::before,

*::after {

    box-sizing: border-box;

}



img,

video,

iframe,

svg {

    max-width: 100%;

    height: auto;

}



/* Permette a grid/flex item di restringersi davvero */

.container,

.grid,

.cards,

.grid-categories,

.layout,

.recipe-hero,

.recipe-columns,

.article-row,

.article-row-link,

.article-related-layout,

.related-section .article-list,

.related-cards-two,

.quick-boxes,

.filters-box,

.panel,

.card,

.category-card,

.card-body,

.sidebar,

.article-detail,

.article-html,

.recipe-detail {

    min-width: 0;

}



/* Evita che testi lunghi allarghino la pagina */

h1,

h2,

h3,

p,

a,

span,

strong,

em,

li,

.article-html,

.testo-preparazione,

.archive-desc {

    overflow-wrap: anywhere;

    word-break: normal;

}



/* Header / brand più sicuro su mobile */

.brand {

    max-width: 100%;

    min-width: 0;

}



.brand strong,

.brand em {

    overflow-wrap: anywhere;

}



/* Menu: su mobile deve poter andare a capo */

.nav-inner {

    flex-wrap: wrap;

    max-width: 100%;

}



.nav-inner a {

    max-width: 100%;

}



.nav-search {

    min-width: 0;

}



.nav-search input {

    min-width: 0;

}



/* Titoli sezione: evita spinta laterale */

.section-title {

    flex-wrap: wrap;

    min-width: 0;

}



/* Bottoni e azioni */

.hero-actions,

.recipe-actions,

.article-actions,

.article-bottom-actions,

.filters-actions,

.pagination,

.recipe-meta,

.card-mini-meta {

    max-width: 100%;

    min-width: 0;

}



.btn,

.pagination a,

.pagination strong {

    max-width: 100%;

    white-space: normal;

    text-align: center;

}



/* Fix specifico mobile */

@media (max-width: 620px) {

    .container {

        width: min(100% - 24px, 1120px);

    }



    .page {

        padding-top: 24px;

    }



    .hero {

        padding: 22px;

        min-height: auto;

    }



    .hero h1,

    .page-title h1,

    .recipe-detail h1,

    .article-detail h1 {

        font-size: clamp(30px, 10vw, 42px);

    }



    .section-title {

        align-items: flex-start;

    }



    .article-row,

    .article-row-link,

    .recipe-hero,

    .recipe-columns,

    .layout,

    .filters-box,

    .quick-boxes,

    .related-section .article-list,

    .related-cards-two,

    .article-related-layout {

        grid-template-columns: minmax(0, 1fr) !important;

    }



    .quick-boxes a {

        grid-template-columns: 46px minmax(0, 1fr);

    }



    .filters-actions .btn,

    .article-bottom-actions-panel .btn,

    .article-bottom-actions-panel .btn-soft {

        width: 100%;

    }

}





@media (max-width: 620px) {

    .recipe-hero {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        border: 0 !important;

        border-radius: 0 !important;

        box-shadow: none !important;

        background: transparent !important;

        overflow: hidden !important;

    }



    .recipe-main-img {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        border: 0 !important;

        border-radius: 0 !important;

        box-shadow: none !important;

    }

}