/* Cascina Bonfiglio — base variabili e reset minimo */

@font-face {
    font-family: "Authority";
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url("../fonts/Authority.ttf") format("truetype");
}

:root {
    --cb-green:        #A8C780;
    --cb-green-dark:   #7fa056;
    --cb-brown:        #2C1A0E;
    --cb-cream:        #FFF5E6;  /* Vector 2 fill esatto dal Figma */
    --cb-white:        #FFFFFF;
    --cb-text:         #2C1A0E;
    --cb-gold:         #F5A623;

    --cb-font-body:    "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --cb-font-display: "DM Sans", "Nunito Sans", system-ui, sans-serif;
    --cb-font-accent:  "Authority", "Caveat", "Yellowtail", "Nunito Sans", cursive; /* script accent — Authority self-hosted se disponibile, fallback Caveat (Google Fonts) */

    --cb-maxw:         1438px;
    --cb-nav-height:   96px;
    --cb-topbar-h:     45px;

    /* Breakpoints (per JS / consultazione) */
    --cb-bp-tablet:    1024px;
    --cb-bp-mobile:     640px;
    --cb-bp-small:      380px;

    /* Padding orizzontale globale 30px per lato (richiesta cliente). */
    --cb-gutter:         30px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--cb-font-body);
    color: var(--cb-text);
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
}

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

.woocommerce img, .woocommerce-page img {
    height: auto;
    max-width: 100%;
}

a { color: inherit; text-decoration: none; }

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

.cb-container {
    max-width: var(--cb-maxw);
    margin: 0 auto;
    padding: 0 var(--cb-gutter);
}

.cb-main { min-height: 40vh; }

/* Accessibility helper */
.cb-sr-only {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Gutter globale: 20px laterale a tutti i viewport (default sopra in :root). */

/* Tipografia globale fluida */
@media (max-width: 1024px) {
    html { font-size: 15.5px; }
}
@media (max-width: 640px) {
    html { font-size: 15px; }
    img, video { max-width: 100%; }

    /* Titoli sezione mobile: scaling più contenuto rispetto al desktop, evita righe lunghissime su 360-414px.
       Applica a tutti i pattern .cb-*__title comuni (eccetto hero/scheda che hanno scaling proprio).
       NB: i prefissi corti (cb-diff, cb-rev, cb-chi) corrispondono alle classi reali — i nomi lunghi
       in versione precedente (cb-differenza, cb-recensioni, cb-chisiamo) NON matchavano nulla. */
    .cb-categories__title,
    .cb-bestsellers__title,
    .cb-diff__title,
    .cb-rev__title,
    .cb-ctabox__title,
    .cb-combo__title,
    .cb-chi__title,
    .cb-scheda-related__title,
    .cb-scheda-reviews__title {
        font-size: clamp(26px, 7vw, 34px) !important;
        line-height: 1.18 !important;
    }
    /* Accent inline (script): mantiene proporzione visiva ~1.35x sul titolo. */
    .cb-categories__title-accent,
    .cb-bestsellers__title-accent,
    .cb-diff__title-accent,
    .cb-rev__title-accent,
    .cb-combo__title-accent,
    .cb-chi__title-accent {
        font-size: clamp(34px, 9.2vw, 44px) !important;
        line-height: 1 !important;
    }
    .cb-categories__kicker,
    .cb-bestsellers__kicker,
    .cb-diff__kicker,
    .cb-rev__kicker,
    .cb-combo__kicker,
    .cb-chi__kicker,
    .cb-scheda-related__kicker {
        font-size: 13px !important;
        letter-spacing: 0.6px;
    }
}

/* Mobile-only line break: <br class="cb-mobile-br"> va a capo solo su mobile. */
.cb-mobile-br { display: none; }
@media (max-width: 640px) {
    .cb-mobile-br { display: inline; }
}

/* Padding laterale uniforme: 30px (var(--cb-gutter)) su tutti gli __inner di sezione.
   Richiesta cliente: il gutter dell'header va replicato su tutto il sito sul mobile. */
@media (max-width: 760px) {
    [class$="__inner"],
    .cb-rev__head {
        padding-left: var(--cb-gutter) !important;
        padding-right: var(--cb-gutter) !important;
    }
}

/* Evita overflow orizzontale su qualunque viewport per elementi spuri */
html, body { overflow-x: clip; }
@media (max-width: 1024px) {
    body { overflow-x: hidden; }
}