/**
 * SITO.CSS — Design System Sito Pubblico Benza Water Storage
 * Direzione estetica: "Liquid Precision"
 * Azzurro acqua su fondi chiari, tipografia elegante, onde geometriche
 */

/* =========================================================================
   CARATTERI
   Display: Sora (geometrico, moderno, distintivo)
   Body: Source Sans 3 (professionale, leggibile)
   Stanno in assets/css/font.css, caricato dall'header prima di questo foglio.
   Erano un @import verso Google: il browser doveva scaricare e leggere questo
   file prima di scoprire che gliene serviva un altro, e solo dopo i caratteri.
   ========================================================================= */

/* =========================================================================
   CSS CUSTOM PROPERTIES — DESIGN TOKENS
   ========================================================================= */
:root {
    /* Palette principale: il verde di Benza srl (dal logo), lo stesso della landing del gruppo.
       Stesso impianto di benza.it (Water Storage), dove al posto del verde c'e' l'azzurro. */
    --bz-primary: #006000;
    --bz-primary-hover: #004f00;
    --bz-primary-active: #003f00;
    --bz-primary-rgb: 0, 96, 0;
    --bz-primary-light: #e8f3e8;
    --bz-primary-50: rgba(0, 96, 0, 0.05);
    --bz-primary-10: rgba(0, 96, 0, 0.10);

    /* Verde profondo (titoli, hero, footer): il ruolo che su benza.it ha il navy */
    --bz-navy: #0f2e17;
    --bz-navy-light: #1c4526;

    /* Accento (CTA, successo): il verde schiarito che regge sui fondi scuri */
    --bz-accent: #35b869;
    --bz-accent-hover: #2ea55d;

    /* Neutri */
    --bz-white: #ffffff;
    --bz-off-white: #f7fafb;
    --bz-gray-50: #f0f4f8;
    --bz-gray-100: #e2e8f0;
    --bz-gray-200: #cbd5e1;
    --bz-gray-400: #94a3b8;
    --bz-gray-600: #475569;
    --bz-gray-800: #1e293b;

    /* Tipografia */
    --bz-font-display: 'Sora', sans-serif;
    --bz-font-body: 'Source Sans 3', sans-serif;

    /* Dimensioni */
    --bz-radius-sm: 8px;
    --bz-radius-md: 12px;
    --bz-radius-lg: 20px;
    --bz-radius-xl: 32px;

    /* Ombre */
    --bz-shadow-sm: 0 1px 3px rgba(15, 46, 23, 0.06);
    --bz-shadow-md: 0 4px 16px rgba(15, 46, 23, 0.08);
    --bz-shadow-lg: 0 8px 32px rgba(15, 46, 23, 0.10);
    --bz-shadow-xl: 0 16px 48px rgba(15, 46, 23, 0.12);
    --bz-shadow-primary: 0 8px 24px rgba(0, 96, 0, 0.25);

    /* Transizioni */
    --bz-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --bz-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Navbar */
    --bz-navbar-height: 80px;
}

/* =========================================================================
   RESET E BASE
   ========================================================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--bz-font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--bz-gray-800);
    background-color: var(--bz-white);
    overflow-x: hidden;
    /* Footer sempre in fondo anche con poco contenuto */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Il contenuto principale spinge il footer in basso */
.bz-footer {
    margin-top: auto;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--bz-font-display);
    font-weight: 700;
    color: var(--bz-navy);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }

p { margin-bottom: 1rem; }

a {
    color: var(--bz-primary);
    text-decoration: none;
    transition: color 0.3s var(--bz-ease);
}
a:hover {
    color: var(--bz-primary-hover);
}

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

/* =========================================================================
   NAVBAR PUBBLICA
   ========================================================================= */
.bz-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    height: var(--bz-navbar-height);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0, 161, 230, 0.08);
    transition: all 0.4s var(--bz-ease);
}

.bz-navbar.scrolled {
    height: 64px;
    box-shadow: var(--bz-shadow-md);
}

.bz-navbar .navbar-brand img {
    height: 48px;
    transition: height 0.4s var(--bz-ease);
}

.bz-navbar.scrolled .navbar-brand img {
    height: 36px;
}

.bz-navbar .nav-link {
    font-family: var(--bz-font-display);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--bz-navy) !important;
    padding: 0.5rem 1rem !important;
    letter-spacing: 0.01em;
    position: relative;
    transition: color 0.3s var(--bz-ease);
}

.bz-navbar .nav-link:not(.dropdown-toggle):not(.bz-nav-separator):not(.bz-cart-badge)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--bz-primary);
    transform: translateX(-50%);
    transition: width 0.3s var(--bz-ease);
    border-radius: 1px;
}

.bz-navbar .nav-link:hover,
.bz-navbar .nav-link.active {
    color: var(--bz-primary) !important;
}

.bz-navbar .nav-link:not(.dropdown-toggle):not(.bz-nav-separator):not(.bz-cart-badge):hover::after,
.bz-navbar .nav-link:not(.dropdown-toggle):not(.bz-nav-separator):not(.bz-cart-badge).active::after {
    width: 24px;
}

/* Separatore pipe — inerte */
.bz-nav-separator {
    cursor: default !important;
    pointer-events: none;
}
.bz-nav-separator:hover {
    color: var(--bz-gray-200) !important;
}

/* Dropdown toggle — rimuovi caretino default Bootstrap e bordo attivo */
.bz-navbar .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.3em;
    vertical-align: 0.15em;
    border-top: 0.25em solid;
    border-right: 0.25em solid transparent;
    border-left: 0.25em solid transparent;
    opacity: 0.5;
    transition: opacity 0.2s var(--bz-ease);
}

.bz-navbar .dropdown-toggle:hover::after {
    opacity: 1;
}

.bz-navbar .dropdown-toggle.show {
    color: var(--bz-primary) !important;
}

.bz-navbar .dropdown-menu {
    border: none;
    border-radius: var(--bz-radius-md);
    box-shadow: var(--bz-shadow-lg);
    padding: 0.5rem;
    margin-top: 0.5rem;
    background: var(--bz-white);
    animation: bz-dropdown-in 0.25s var(--bz-ease);
}

@keyframes bz-dropdown-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.bz-navbar .dropdown-item {
    border-radius: var(--bz-radius-sm);
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    color: var(--bz-gray-800);
    transition: all 0.2s var(--bz-ease);
}

.bz-navbar .dropdown-item:hover {
    background: var(--bz-primary-light);
    color: var(--bz-primary);
}

/* Shop Online + Carrello + Utente sulla stessa riga (flex) */
.bz-navbar .bz-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Icona carrello navbar */
.bz-cart-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.bz-cart-badge .badge {
    position: absolute;
    top: -7px;
    right: 1px;
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 20px;
    background: var(--bz-primary);
    color: white;
    font-family: var(--bz-font-display);
    font-weight: 700;
}

/* =========================================================================
   HERO SECTION
   ========================================================================= */
.bz-hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(165deg, var(--bz-navy) 0%, #0d3557 40%, #0e4a73 70%, var(--bz-primary-active) 100%);
    /* Spazio verticale proprio, oltre a quello che compensa la navbar fissa: su
       finestre basse il contenuto arrivava a filo e il pulsante finiva tagliato
       fuori dalla foto. Con il padding l'area cresce invece di tagliare. */
    padding-top: calc(var(--bz-navbar-height) + 3.5rem);
    /* sotto c'è l'onda decorativa alta 120px: il contenuto deve restarne fuori */
    padding-bottom: calc(120px + 1.5rem);
}

.bz-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 60% at 70% 40%, rgba(0, 161, 230, 0.3) 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 20% 80%, rgba(0, 201, 167, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

/* Hero homepage con foto reale Benza: biopiscina infinity sul mare (Ospedaletti) */
/* Overlay navy a sinistra per leggibilita' del testo, foto svelata a destra */
.bz-hero-home {
    background:
        linear-gradient(100deg, rgba(15, 46, 23, 0.94) 0%, rgba(13, 53, 87, 0.82) 38%, rgba(14, 74, 115, 0.55) 66%, rgba(0, 127, 181, 0.28) 100%),
        url('../../files/immagine-7-hq.jpeg');
    background-size: cover, cover;
    background-position: center, center right;
    background-repeat: no-repeat, no-repeat;
}

/* Onde animate SVG nel hero */
.bz-hero-waves {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    z-index: 2;
}

.bz-hero-waves svg {
    width: 100%;
    height: 100%;
}

.bz-hero-content {
    position: relative;
    z-index: 3;
    color: var(--bz-white);
}

.bz-hero-content h1 {
    color: var(--bz-white);
    font-weight: 800;
    margin-bottom: 1.25rem;
}

.bz-hero-content h1 .bz-text-accent {
    background: linear-gradient(135deg, var(--bz-accent) 0%, #4dd9c0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bz-hero-content p.lead {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 540px;
    line-height: 1.8;
}

.bz-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    font-family: var(--bz-font-display);
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    backdrop-filter: blur(8px);
}

/* =========================================================================
   PULSANTI
   ========================================================================= */
.bz-btn {
    font-family: var(--bz-font-display);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.75rem;
    border-radius: var(--bz-radius-md);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s var(--bz-ease);
    letter-spacing: 0.01em;
}

.bz-btn-primary {
    background: var(--bz-primary);
    color: var(--bz-white);
    box-shadow: var(--bz-shadow-primary);
}

.bz-btn-primary:hover {
    background: var(--bz-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 161, 230, 0.35);
    color: var(--bz-white);
}

.bz-btn-white {
    background: var(--bz-white);
    color: var(--bz-navy);
}

.bz-btn-white:hover {
    background: var(--bz-gray-50);
    transform: translateY(-2px);
    box-shadow: var(--bz-shadow-lg);
    color: var(--bz-navy);
}

.bz-btn-outline {
    background: transparent;
    color: var(--bz-primary);
    border: 2px solid var(--bz-primary);
}

.bz-btn-outline:hover {
    background: var(--bz-primary);
    color: var(--bz-white);
    transform: translateY(-2px);
}

.bz-btn-lg {
    padding: 0.9rem 2.25rem;
    font-size: 1.05rem;
}

.bz-btn-sm {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
}

/* =========================================================================
   SEZIONI
   ========================================================================= */
.bz-section {
    padding: 5rem 0;
}

.bz-section-light {
    background: var(--bz-off-white);
}

.bz-section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.bz-section-header h2 {
    margin-bottom: 1rem;
}

.bz-section-header p {
    font-size: 1.1rem;
    color: var(--bz-gray-600);
    max-width: 600px;
    margin: 0 auto;
}

.bz-section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--bz-font-display);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bz-primary);
    margin-bottom: 0.75rem;
}

.bz-section-label::before {
    content: '';
    width: 24px;
    height: 2px;
    background: var(--bz-primary);
    border-radius: 1px;
}

/* =========================================================================
   CARD CATEGORIE HOMEPAGE (5 aree principali)
   ========================================================================= */
.bz-category-card {
    position: relative;
    border-radius: var(--bz-radius-lg);
    overflow: hidden;
    background: var(--bz-white);
    border: 1px solid var(--bz-gray-100);
    transition: all 0.4s var(--bz-ease);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.bz-category-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--bz-shadow-xl);
    border-color: transparent;
}

.bz-category-card .card-img-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3; /* categorie caricate 800x600: mostrate per intero */
    background: var(--bz-gray-100);
}

.bz-category-card .card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* immagine categoria visibile per intero, non ritagliata */
    transition: transform 0.6s var(--bz-ease);
}

.bz-category-card:hover .card-img-wrapper img {
    transform: scale(1.06);
}

.bz-category-card .card-img-overlay-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(15, 46, 23, 0.6) 0%, transparent 100%);
    pointer-events: none;
}

.bz-category-card .card-body {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.bz-category-card .card-body h3 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

.bz-category-card .card-body p {
    font-size: 0.9rem;
    color: var(--bz-gray-600);
    flex-grow: 1;
}

.bz-category-card .card-link {
    font-family: var(--bz-font-display);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--bz-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: gap 0.3s var(--bz-ease);
}

.bz-category-card:hover .card-link {
    gap: 0.7rem;
}

/* Card grande (prime 2 nella griglia 2+3) */
.bz-category-card-lg .card-img-wrapper {
    aspect-ratio: 16 / 9;
}

/* =========================================================================
   CARD PRODOTTO E-COMMERCE
   ========================================================================= */
.bz-product-card {
    border-radius: var(--bz-radius-md);
    overflow: hidden;
    background: var(--bz-white);
    border: 1px solid var(--bz-gray-100);
    transition: all 0.3s var(--bz-ease);
    height: 100%;
}

.bz-product-card:hover {
    box-shadow: var(--bz-shadow-lg);
    border-color: var(--bz-primary-10);
}

.bz-product-card .product-img {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bz-gray-50);
}

.bz-product-card .product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--bz-ease);
}

.bz-product-card:hover .product-img img {
    transform: scale(1.04);
}

.bz-product-card .product-body {
    padding: 1.25rem;
}

.bz-product-card .product-category {
    font-family: var(--bz-font-display);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bz-primary);
    margin-bottom: 0.25rem;
}

.bz-product-card .product-name {
    font-family: var(--bz-font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--bz-navy);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.bz-product-card .product-price {
    font-family: var(--bz-font-display);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--bz-navy);
}

.bz-product-card .product-price .price-unit {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--bz-gray-400);
}

/* Prezzo di listino barrato (catalogo, come nel vecchio sito) */
.price-old {
    text-decoration: line-through;
    color: var(--bz-gray-400);
    font-size: 0.85em;
    font-weight: 400;
    margin-right: 0.35rem;
}

/* Catalogo responsive: sotto -md (<768px) la tabella dei modelli diventa card
   (anche -sm e' troppo stretto per la tabella; da -md in su resta tabella) */
.bz-models-cards-view { display: none; }
@media (max-width: 767.98px) {
    .bz-models-table-view { display: none; }
    .bz-models-cards-view { display: flex; flex-direction: column; gap: 0.6rem; }
}
.bz-model-card {
    display: block;
    background: var(--bz-white);
    border: 1px solid var(--bz-gray-100);
    border-radius: var(--bz-radius-sm);
    padding: 0.8rem 0.9rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s var(--bz-ease), border-color 0.15s var(--bz-ease);
}
.bz-model-card:hover,
.bz-model-card:active {
    border-color: var(--bz-primary);
    box-shadow: var(--bz-shadow-sm);
    color: inherit;
    text-decoration: none;
}
.bz-model-card-name { font-weight: 600; color: var(--bz-navy); display: block; margin-top: 0.1rem; }
.bz-model-card-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.55rem;
    flex-wrap: wrap;
}
.bz-model-card-meta { font-size: 0.85rem; color: var(--bz-gray-400); white-space: nowrap; }
.bz-model-card-price { text-align: right; }

/* Ordini area utente: bottoni azione affiancati (no wrap) + card su mobile */
.bz-ordine-azioni {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    flex-wrap: nowrap;
}
.bz-ordine-azioni .bz-btn-sm {
    padding: 0.25rem 0.65rem;
    font-size: 0.8rem;
    white-space: nowrap;
}
.bz-ordine-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.bz-ordine-card-num { font-weight: 600; color: var(--bz-navy); }
.bz-ordine-card-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--bz-gray-800);
    margin-bottom: 0.65rem;
}
.bz-ordine-card .bz-ordine-azioni { justify-content: flex-start; }

/* Loghi marchi nelle pagine vetrina (Arredamenti, Gazebi, ecc.) */
.bz-marchio-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    padding: 0.5rem;
    background: var(--bz-white);
    border: 1px solid var(--bz-gray-100);
    border-radius: var(--bz-radius-sm);
    transition: box-shadow 0.2s var(--bz-ease);
}
.bz-marchio-logo:hover { box-shadow: var(--bz-shadow-sm); }
.bz-marchio-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.75;
    transition: filter 0.2s var(--bz-ease), opacity 0.2s var(--bz-ease);
}
.bz-marchio-logo:hover img { filter: grayscale(0); opacity: 1; }

/* Thumbnail galleria foto nelle pagine vetrina */
.bz-gallery-thumb {
    position: relative;
    overflow: hidden;
    border-radius: var(--bz-radius-sm);
    aspect-ratio: 4 / 3;
    background: var(--bz-gray-100);
    cursor: pointer;
    box-shadow: var(--bz-shadow-sm);
}
.bz-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s var(--bz-ease);
}
.bz-gallery-thumb:hover img { transform: scale(1.06); }

/* Card mobile della tabella "Scegli la dimensione" (scheda telo) */
.bz-dim-card {
    background: var(--bz-white);
    border: 1px solid var(--bz-gray-100);
    border-radius: var(--bz-radius-sm);
    padding: 0.8rem 0.9rem;
}
.bz-dim-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.bz-dim-card-name { font-family: var(--bz-font-display); font-weight: 700; color: var(--bz-navy); font-size: 1.05rem; }
.bz-dim-card-price { margin: 0.45rem 0 0.7rem; }
.bz-dim-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.bz-dim-card-actions .bz-btn { flex: 1; justify-content: center; }

/* Descrizione prodotto (HTML da TinyMCE): righe/elenchi leggibili */
.bz-desc-prodotto { line-height: 1.7; }
.bz-desc-prodotto ul { padding-left: 1.4rem; margin-bottom: 1rem; }
.bz-desc-prodotto li { margin-bottom: 0.3rem; }
.bz-desc-prodotto p { margin-bottom: 0.8rem; }

/* Badge disponibilita' */
.bz-badge-disp {
    font-family: var(--bz-font-display);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
}

.bz-badge-disp-ok {
    background: #dcfce7;
    color: #166534;
}

.bz-badge-disp-no {
    background: #fef2f2;
    color: #991b1b;
}

.bz-badge-disp-limited {
    background: #fef9c3;
    color: #854d0e;
}

/* =========================================================================
   TABELLA MODELLI (per pagine categoria con teli/varianti)
   ========================================================================= */
/* Card raggruppante: foto+nome prodotto e tabella modelli come UN unico blocco,
   così l'header azzurro non sembra separare due prodotti diversi (feedback Benza). */
.bz-cat-group {
    background: var(--bz-white);
    border: 1px solid var(--bz-gray-100);
    border-radius: var(--bz-radius-lg);
    padding: 1rem 1.25rem 0;
    box-shadow: 0 4px 12px rgba(15, 46, 23, 0.10);
    overflow: hidden;
}
/* Dentro la card l'header della tabella resta squadrato in alto (niente angoli round). */
.bz-cat-group .bz-models-table thead th:first-child,
.bz-cat-group .bz-models-table thead th:last-child {
    border-radius: 0;
}
/* L'ultima riga finisce a filo del fondo card: niente bordo inferiore ridondante. */
.bz-cat-group .bz-models-table tbody tr:last-child td {
    border-bottom: none;
}
/* Su mobile la vista diventa card-modello (con bordo proprio): serve respiro sotto. */
@media (max-width: 767.98px) {
    .bz-cat-group { padding-bottom: 0.85rem; }
}

.bz-models-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
}

.bz-models-table thead th {
    font-family: var(--bz-font-display);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bz-white);
    background: var(--bz-primary);
    padding: 0.75rem 1rem;
    border: none;
}

.bz-models-table thead th:first-child {
    border-radius: var(--bz-radius-sm) 0 0 0;
}

.bz-models-table thead th:last-child {
    border-radius: 0 var(--bz-radius-sm) 0 0;
}

.bz-models-table tbody tr {
    transition: background 0.2s var(--bz-ease);
}

.bz-models-table tbody tr:hover {
    background: var(--bz-primary-50);
}

.bz-models-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bz-gray-100);
    vertical-align: middle;
}

/* Riga telo con dimensioni evidenziate */
.bz-models-table .model-dimensions {
    font-family: var(--bz-font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--bz-navy);
    white-space: nowrap;
}

/* =========================================================================
   PREVENTIVATORE
   ========================================================================= */
.bz-preventivo-wizard {
    background: var(--bz-white);
    border-radius: var(--bz-radius-lg);
    box-shadow: var(--bz-shadow-lg);
    overflow: hidden;
}

.bz-preventivo-steps {
    display: flex;
    background: var(--bz-gray-50);
    padding: 0;
    margin: 0;
    list-style: none;
}

.bz-preventivo-steps li {
    flex: 1;
    padding: 1rem;
    text-align: center;
    font-family: var(--bz-font-display);
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--bz-gray-400);
    position: relative;
    transition: all 0.3s var(--bz-ease);
}

.bz-preventivo-steps li.active {
    color: var(--bz-primary);
    background: var(--bz-white);
}

.bz-preventivo-steps li.completed {
    color: var(--bz-accent);
}

.bz-preventivo-steps li .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bz-gray-200);
    color: var(--bz-white);
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    transition: all 0.3s var(--bz-ease);
}

.bz-preventivo-steps li.active .step-number {
    background: var(--bz-primary);
}

.bz-preventivo-steps li.completed .step-number {
    background: var(--bz-accent);
}

.bz-preventivo-body {
    padding: 2.5rem;
}

/* Input misure preventivatore */
.bz-input-measure {
    position: relative;
}

.bz-input-measure input {
    font-family: var(--bz-font-display);
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    color: var(--bz-navy);
    border: 2px solid var(--bz-gray-200);
    border-radius: var(--bz-radius-md);
    padding: 1rem;
    width: 100%;
    transition: border-color 0.3s var(--bz-ease);
}

.bz-input-measure input:focus {
    border-color: var(--bz-primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 161, 230, 0.1);
}

.bz-input-measure .unit {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--bz-font-display);
    font-size: 1rem;
    color: var(--bz-gray-400);
    font-weight: 500;
}

/* Card risultato preventivatore */
.bz-result-card {
    border: 2px solid var(--bz-gray-100);
    border-radius: var(--bz-radius-md);
    padding: 1.5rem;
    transition: all 0.3s var(--bz-ease);
    background: var(--bz-white);
}

.bz-result-card:hover {
    border-color: var(--bz-primary);
    box-shadow: var(--bz-shadow-md);
}

.bz-result-card.recommended {
    border-color: var(--bz-primary);
    background: var(--bz-primary-50);
}

/* Stato di selezione (checkbox attiva) nel preventivatore: bordo accento verde */
.bz-result-card.selezionato {
    border-color: var(--bz-accent);
    box-shadow: 0 0 0 3px rgba(0, 201, 167, 0.18);
}

/* Preventivatore scavo: diagramma CAD del lago con quote in sovraimpressione (dal vecchio sito) */
.bz-scavo-cad {
    position: relative;
    width: 320px;
    max-width: 100%;
    margin: 1rem auto;
    color: #e03131;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.bz-scavo-cad img { display: block; width: 100%; height: auto; }
.bz-scavo-cad span { position: absolute; white-space: nowrap; transform: translateY(4px); }
.bz-scavo-cad #txtLarg1  { top: 16px;  left: 141px; }
.bz-scavo-cad #txtLung1  { top: 100px; left: 277px; }
.bz-scavo-cad #txtLarg2  { top: 190px; left: 142px; }
.bz-scavo-cad #txtLung2  { top: 100px; left: 5px;   }
.bz-scavo-cad #txtAngolo { top: 264px; left: 235px; }
.bz-scavo-cad #txtLato   { top: 243px; left: 200px; }
.bz-scavo-cad #txtProf   { top: 263px; left: 282px; }
.bz-scavo-cad #txtLarg2b { top: 299px; left: 141px; }
.bz-scavo-cad #txtDiff1  { top: 292px; left: 63px;  }
.bz-scavo-cad #txtDiff2  { top: 292px; left: 224px; }
.bz-scavo-cad #txtLarg1b { top: 313px; left: 141px; }
.bz-scavo-cad #txtAcqua  { top: 233px; left: 115px; color: #1c7ed6; }

.bz-result-card .result-badge {
    font-family: var(--bz-font-display);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bz-white);
    background: var(--bz-primary);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 0.75rem;
}

/* =========================================================================
   CARRELLO
   ========================================================================= */
.bz-cart-item {
    display: grid;
    grid-template-columns: 1fr auto 96px 28px; /* info | quantità | prezzo | elimina — colonne allineate */
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--bz-gray-100);
}
.bz-cart-item .cart-item-price {
    text-align: right;
    white-space: nowrap;
}

.bz-cart-item:last-child {
    border-bottom: none;
}

.bz-cart-item .cart-item-img {
    width: 80px;
    height: 80px;
    border-radius: var(--bz-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bz-gray-50);
}

.bz-cart-item .cart-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bz-cart-item .cart-item-info {
    flex-grow: 1;
}

.bz-cart-item .cart-item-name {
    font-family: var(--bz-font-display);
    font-weight: 600;
    color: var(--bz-navy);
    margin-bottom: 0.15rem;
}

.bz-cart-item .cart-item-code {
    font-size: 0.8rem;
    color: var(--bz-gray-400);
}

.bz-cart-item .cart-item-price {
    font-family: var(--bz-font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--bz-navy);
    white-space: nowrap;
}

/* Riepilogo carrello */
.bz-cart-summary {
    background: var(--bz-gray-50);
    border-radius: var(--bz-radius-lg);
    padding: 2rem;
    position: sticky;
    top: calc(var(--bz-navbar-height) + 1.5rem);
}

.bz-cart-summary .summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.95rem;
}

.bz-cart-summary .summary-total {
    border-top: 2px solid var(--bz-navy);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    font-family: var(--bz-font-display);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--bz-navy);
}

/* =========================================================================
   INPUT QUANTITA'
   ========================================================================= */
.bz-qty-input {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--bz-gray-200);
    border-radius: var(--bz-radius-sm);
    overflow: hidden;
}

.bz-qty-input button {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bz-gray-50);
    color: var(--bz-navy);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s var(--bz-ease);
}

.bz-qty-input button:hover {
    background: var(--bz-gray-100);
}

.bz-qty-input input {
    width: 48px;
    height: 36px;
    border: none;
    text-align: center;
    font-family: var(--bz-font-display);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--bz-navy);
    /* Nasconde lo spinner nativo del type=number (ridondante con i bottoni − / +) */
    -moz-appearance: textfield;
    appearance: textfield;
}

.bz-qty-input input::-webkit-outer-spin-button,
.bz-qty-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bz-qty-input input:focus {
    outline: none;
}

/* Variante compatta del selettore quantità (nella tabella misure dei teli) */
.bz-qty-input.bz-qty-sm button { width: 28px; height: 28px; font-size: 0.85rem; }
.bz-qty-input.bz-qty-sm input { width: 38px; height: 28px; font-size: 0.8rem; }

/* =========================================================================
   FOOTER PUBBLICO
   ========================================================================= */
.bz-footer {
    background: var(--bz-navy);
    color: rgba(255, 255, 255, 0.7);
    padding: 4rem 0 0;
}

.bz-footer h5 {
    color: var(--bz-white);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    letter-spacing: 0.02em;
}

.bz-footer a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    transition: color 0.2s var(--bz-ease);
}

.bz-footer a:hover {
    color: var(--bz-primary);
}

.bz-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bz-footer-links li {
    margin-bottom: 0.5rem;
}

/* Contatti: icona a sinistra + testo allineato (il testo a capo resta indentato, non sotto l'icona) */
.bz-footer-contatti li,
.bz-footer-contatti li > a {
    display: flex;
    align-items: flex-start;
}
.bz-footer-contatti li i {
    flex-shrink: 0;
    margin-right: 0.55rem;
    margin-top: 0.2em;
}

/* Separatore dati societari */
.bz-footer-legal-sep {
    opacity: 0.4;
    margin: 0 0.15rem;
}

.bz-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.5rem 0;
    margin-top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
}

.bz-footer .bz-footer-logo img {
    height: 40px;
    opacity: 0.9;
    margin-bottom: 1rem;
}

.bz-footer .bz-footer-description {
    font-size: 0.9rem;
    line-height: 1.7;
    max-width: 320px;
}

.bz-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    transition: all 0.3s var(--bz-ease);
    margin-right: 0.5rem;
}

.bz-footer-social a:hover {
    background: var(--bz-primary);
    color: var(--bz-white);
    transform: translateY(-2px);
}

/* =========================================================================
   BREADCRUMB
   ========================================================================= */
.bz-breadcrumb {
    padding: 1rem 0;
    margin-top: var(--bz-navbar-height);
    background: var(--bz-off-white);
}

.bz-breadcrumb .breadcrumb {
    margin-bottom: 0;
    font-size: 0.85rem;
    font-family: var(--bz-font-display);
}

.bz-breadcrumb .breadcrumb-item a {
    color: var(--bz-gray-600);
}

.bz-breadcrumb .breadcrumb-item.active {
    color: var(--bz-primary);
    font-weight: 500;
}

/* =========================================================================
   FORM STYLING
   ========================================================================= */
.bz-form-control {
    border: 1.5px solid var(--bz-gray-200);
    border-radius: var(--bz-radius-sm);
    padding: 0.65rem 1rem;
    font-family: var(--bz-font-body);
    font-size: 0.95rem;
    color: var(--bz-navy);
    transition: all 0.3s var(--bz-ease);
    background: var(--bz-white);
}

.bz-form-control:focus {
    border-color: var(--bz-primary);
    box-shadow: 0 0 0 4px rgba(0, 161, 230, 0.1);
    outline: none;
}

.bz-form-control::placeholder {
    color: var(--bz-gray-400);
}

/* Tom Select (provincia filtrabile): uniforma l'aspetto ai .bz-form-control.
   Il WRAPPER fa da box (bordo/sfondo/raggio come un input); il .ts-control interno
   resta trasparente col padding. !important perché il tema CDN è caricato dopo sito.css. */
.ts-wrapper.bz-form-control {
    border: 1.5px solid var(--bz-gray-200) !important;
    border-radius: var(--bz-radius-sm) !important;
    background: var(--bz-white) !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.ts-wrapper.bz-form-control.focus {
    border-color: var(--bz-primary) !important;
    box-shadow: 0 0 0 4px rgba(0, 161, 230, 0.1) !important;
}
.ts-wrapper.bz-form-control .ts-control {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0.65rem 1rem !important;
    min-height: calc(1.5em + 1.3rem) !important;
    font-family: var(--bz-font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--bz-navy);
}
.ts-wrapper.bz-form-control .ts-control .item { color: var(--bz-navy); }
/* Single-select (provincia): l'input di ricerca non deve avere un min-width fisso che,
   sommato all'item selezionato, superi la larghezza del box e mandi il cursore a capo.
   Con min-width:0 + flex l'input riempie lo spazio residuo e resta sulla stessa riga
   anche in contenitori stretti (es. il checkout dentro col-lg-7). */
.ts-wrapper.single.bz-form-control .ts-control { flex-wrap: nowrap; }
.ts-wrapper.single.bz-form-control .ts-control > input {
    min-width: 0 !important;
    flex: 1 1 0 !important;
}

.bz-form-label {
    font-family: var(--bz-font-display);
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--bz-gray-800);
    margin-bottom: 0.35rem;
}

/* =========================================================================
   PAGINA GALLERIA — Lightbox e griglia
   ========================================================================= */
.bz-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.bz-gallery-item {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--bz-radius-md);
    overflow: hidden;
    cursor: pointer;
}

.bz-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--bz-ease);
}

.bz-gallery-item:hover img {
    transform: scale(1.06);
}

.bz-gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 46, 23, 0.4) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s var(--bz-ease);
}

.bz-gallery-item:hover::after {
    opacity: 1;
}

/* =========================================================================
   GALLERY INFORMATIVA (gallery_view) — righe alternate foto + titolo + descrizione.
   Benza vuole INFORMARE: ogni foto mostra titolo e descrizione, non solo l'immagine.
   ========================================================================= */
.bz-gallery-entries {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem 1.75rem;
    max-width: 1080px;
    margin: 0 auto;
}

/* Card verticale: immagine sopra, numero+testo sotto (2 per riga) */
.bz-gallery-entry {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bz-gallery-entry-media {
    position: relative;
    border-radius: var(--bz-radius-lg);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--bz-shadow-lg);
    aspect-ratio: 4 / 3;
    background: var(--bz-gray-50);
}
.bz-gallery-entry-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--bz-ease);
}
.bz-gallery-entry-media:hover img {
    transform: scale(1.05);
}
/* Overlay + icona zoom al hover (indica che si apre in HD) */
.bz-gallery-entry-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 46, 23, 0.35), transparent 55%);
    opacity: 0;
    transition: opacity 0.3s var(--bz-ease);
    z-index: 1;
}
.bz-gallery-entry-media::after {
    content: '\f00e'; /* fa-search-plus */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    color: #fff;
    font-size: 1.4rem;
    background: rgba(var(--bz-primary-rgb), 0.9);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s var(--bz-ease-spring);
    z-index: 2;
}
.bz-gallery-entry-media:hover::before { opacity: 1; }
.bz-gallery-entry-media:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.bz-gallery-entry-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 0.6rem;
    border-radius: 999px;
    background: var(--bz-primary-light);
    color: var(--bz-primary-active);
    font-family: var(--bz-font-display);
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.9rem;
}
.bz-gallery-entry-title {
    font-family: var(--bz-font-display);
    color: var(--bz-navy);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.35rem;
}
.bz-gallery-entry-desc {
    color: var(--bz-gray-600);
    font-size: 0.85rem;
    line-height: 1.55;
}
.bz-gallery-entry-desc strong { color: var(--bz-navy); font-weight: 600; }
.bz-gallery-entry-hd {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1.1rem;
    color: var(--bz-primary);
    font-weight: 600;
    font-size: 0.92rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s var(--bz-ease);
}
.bz-gallery-entry-hd:hover { color: var(--bz-primary-hover); }

/* Telefoni piccoli: 1 card per riga */
@media (max-width: 575.98px) {
    .bz-gallery-entries { grid-template-columns: 1fr; gap: 1.6rem; }
    .bz-gallery-entry-title { font-size: 1.1rem; }
}

/* =========================================================================
   CONTATTI / INFO
   ========================================================================= */
/* Pagina Documenti — contenuto editabile (lista numerata schematica) */
.bz-doc-contenuto h2 {
    font-size: 1.15rem;
    color: var(--bz-navy);
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--bz-primary);
}
.bz-doc-contenuto h2:first-child { margin-top: 0; }
.bz-doc-contenuto ol { padding-left: 2.6rem; margin-bottom: 0.5rem; }
.bz-doc-contenuto li { margin: 0.3rem 0; line-height: 1.5; }
.bz-doc-contenuto li::marker { color: var(--bz-primary); font-weight: 700; }
.bz-doc-contenuto a { color: var(--bz-primary); text-decoration: none; }
.bz-doc-contenuto a:hover { text-decoration: underline; }

.bz-info-card {
    background: var(--bz-white);
    border-radius: var(--bz-radius-lg);
    padding: 2rem;
    border: 1px solid var(--bz-gray-100);
    /* height:100% RIMOSSO: causava lo stiramento ad altezze enormi dei box informativi
       in righe flex (align-items:stretch). Le griglie a card uguali usano la classe
       Bootstrap `h-100` che continua a funzionare. */
    transition: box-shadow 0.3s var(--bz-ease);
}

.bz-info-card:hover {
    box-shadow: var(--bz-shadow-md);
}

.bz-info-card .info-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--bz-radius-sm);
    background: var(--bz-primary-light);
    color: var(--bz-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

/* =========================================================================
   ANIMAZIONI DI ENTRATA (Intersection Observer)
   ========================================================================= */
.bz-fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--bz-ease), transform 0.6s var(--bz-ease);
}

.bz-fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays per gruppi di card */
.bz-stagger-1 { transition-delay: 0.05s; }
.bz-stagger-2 { transition-delay: 0.1s; }
.bz-stagger-3 { transition-delay: 0.15s; }
.bz-stagger-4 { transition-delay: 0.2s; }
.bz-stagger-5 { transition-delay: 0.25s; }

/* =========================================================================
   PAGINA INTERNA — Banner header
   ========================================================================= */
.bz-page-header {
    background: linear-gradient(135deg, var(--bz-navy) 0%, var(--bz-navy-light) 100%);
    padding: 3rem 0 2.5rem;
    margin-top: var(--bz-navbar-height);
    position: relative;
    overflow: hidden;
}

.bz-page-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(0, 161, 230, 0.08);
    pointer-events: none;
}

.bz-page-header h1 {
    color: var(--bz-white);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: 0;
}

.bz-page-header .bz-breadcrumb {
    margin-top: 0;
    padding: 0.5rem 0 0;
    background: transparent;
}

.bz-page-header .breadcrumb-item,
.bz-page-header .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

.bz-page-header .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.9);
}

.bz-page-header .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.3);
}

/* =========================================================================
   TIMELINE (La Nostra Storia)
   ========================================================================= */
.bz-timeline {
    position: relative;
    padding: 2rem 0;
}

.bz-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bz-gray-200);
    transform: translateX(-50%);
}

.bz-timeline-item {
    position: relative;
    margin-bottom: 3rem;
    display: flex;
    align-items: flex-start;
}

.bz-timeline-item:nth-child(odd) {
    flex-direction: row-reverse;
}

.bz-timeline-dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bz-primary);
    border: 3px solid var(--bz-white);
    box-shadow: 0 0 0 2px var(--bz-primary);
    z-index: 2;
}

.bz-timeline-content {
    width: 42%;
    background: var(--bz-white);
    border-radius: var(--bz-radius-lg);
    padding: 1.75rem;
    box-shadow: var(--bz-shadow-md);
    transition: transform 0.3s var(--bz-ease), box-shadow 0.3s var(--bz-ease);
}

.bz-timeline-content:hover {
    transform: translateY(-3px);
    box-shadow: var(--bz-shadow-lg);
}

.bz-timeline-item:nth-child(odd) .bz-timeline-content {
    margin-right: auto;
    margin-left: 6%;
}

.bz-timeline-item:nth-child(even) .bz-timeline-content {
    margin-left: auto;
    margin-right: 6%;
}

.bz-timeline-year {
    font-family: var(--bz-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--bz-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.bz-timeline-content h4 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
    color: var(--bz-navy);
}

.bz-timeline-content p {
    font-size: 0.9rem;
    color: var(--bz-gray-600);
    margin-bottom: 0;
    line-height: 1.7;
}

.bz-timeline-content img {
    width: 100%;
    border-radius: var(--bz-radius-sm);
    margin-top: 1rem;
}

/* Timeline responsive: linea a sinistra su mobile */
@media (max-width: 767.98px) {
    .bz-timeline::before { left: 20px; }
    .bz-timeline-dot { left: 20px; }
    .bz-timeline-content { width: calc(100% - 50px); margin-left: 50px !important; margin-right: 0 !important; }
    .bz-timeline-item,
    .bz-timeline-item:nth-child(odd) { flex-direction: row; }
    .bz-timeline-item:nth-child(odd) .bz-timeline-content { margin-left: 50px !important; margin-right: 0 !important; }
}

/* =========================================================================
   UTILITY
   ========================================================================= */
.bz-text-primary { color: var(--bz-primary) !important; }
.bz-text-navy { color: var(--bz-navy) !important; }
.bz-text-accent { color: var(--bz-accent) !important; }
.bz-bg-light { background: var(--bz-off-white) !important; }

/* Separatore ondulato */
.bz-wave-divider {
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.bz-wave-divider svg {
    width: 100%;
    height: 60px;
    display: block;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 991.98px) {
    .bz-hero {
        min-height: 70vh;
    }

    .bz-section {
        padding: 3.5rem 0;
    }

    .bz-preventivo-steps {
        flex-wrap: wrap;
    }

    .bz-preventivo-steps li {
        flex: 1 1 50%;
    }

    /* Menu mobile espanso: pannello con sfondo pieno.
       La .bz-navbar ha height fisso e sfondo glass solo su quell'altezza →
       il .navbar-collapse espanso restava trasparente e si vedeva l'hero dietro. */
    .bz-navbar .navbar-collapse {
        background: var(--bz-white);
        margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -0.5);
        padding: 0.5rem 1.5rem 1rem;
        border-radius: 0 0 var(--bz-radius-md) var(--bz-radius-md);
        border-top: 1px solid rgba(0, 161, 230, 0.08);
        box-shadow: var(--bz-shadow-lg);
    }

    /* Ultima riga del menu mobile: Shop Online a sinistra, carrello + utente a destra */
    .bz-navbar .bz-nav-actions {
        width: 100%;
    }
    .bz-navbar .bz-nav-actions .bz-nav-actions-cart {
        margin-left: auto;
    }

    /* Sottolineatura voce attiva: allineata a sinistra sotto il testo (su mobile le voci
       sono allineate a sinistra, non centrate come nel menu desktop) */
    .bz-navbar .nav-link:not(.dropdown-toggle):not(.bz-nav-separator):not(.bz-cart-badge)::after {
        left: 1rem;
        transform: none;
    }
}

@media (max-width: 767.98px) {
    :root {
        --bz-navbar-height: 64px;
    }

    .bz-hero {
        min-height: 60vh;
    }

    .bz-hero-content h1 {
        font-size: 1.75rem;
    }

    .bz-hero-content {
        padding-bottom: 120px;
    }

    .bz-hero-waves {
        height: 80px;
    }

    .bz-hero { padding-bottom: calc(80px + 1.5rem); }

    .bz-section {
        padding: 2.5rem 0;
    }

    .bz-section-header {
        margin-bottom: 2rem;
    }

    /* Tabelle modelli compatte su mobile */
    .bz-models-table {
        font-size: 0.8rem;
    }

    .bz-models-table td,
    .bz-models-table thead th {
        padding: 0.5rem 0.5rem;
    }

    .bz-models-table .model-dimensions {
        font-size: 0.85rem;
    }

    .bz-models-table .product-price {
        font-size: 0.85rem;
    }

    /* Carrello: layout verticale su mobile */
    .bz-cart-item {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .bz-cart-item .cart-item-info {
        flex-basis: 100%;
    }

    .bz-cart-item .cart-item-price {
        font-size: 1rem;
    }

    /* Riepilogo ordine sticky disattivato su mobile */
    .bz-cart-summary {
        position: static !important;
    }

    .bz-footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .bz-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .bz-preventivo-body {
        padding: 1.5rem;
    }

    .bz-page-header {
        padding: 2rem 0 1.5rem;
    }

    /* Tabella sotto-teli: altezza limitata con scroll su mobile */
    .bz-sottoteli-scroll {
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid var(--bz-gray-100);
        border-radius: var(--bz-radius-sm);
    }

    /* Box acquisto compatto su mobile */
    .bz-cart-summary {
        padding: 1rem;
    }
}

@media (max-width: 575.98px) {
    .bz-gallery-grid {
        grid-template-columns: 1fr;
    }

    /* Tabelle ancora piu' compatte su xs */
    .bz-models-table {
        font-size: 0.75rem;
    }

    .bz-models-table td,
    .bz-models-table thead th {
        padding: 0.4rem 0.35rem;
    }

    .bz-models-table .model-dimensions {
        font-size: 0.8rem;
    }

    /* Pulsanti compatti nella tabella sotto-teli */
    .bz-models-table .bz-btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }

    /* Quantita' piu' compatto */
    .bz-qty-input input {
        width: 36px;
        font-size: 0.85rem;
    }

    .bz-qty-input button {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
}

/* ============ RECENSIONI HOMEPAGE (carosello Google + eBay) ============ */
.bz-review-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bz-white);
    border: 1px solid var(--bz-gray-100);
    border-radius: 50px;
    padding: 0.3rem 0.9rem;
    margin: 0 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bz-navy);
}
.bz-review-badge i { color: var(--bz-primary); }

.bz-reviews-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.bz-reviews-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0.5rem 0.25rem 1rem;
    flex: 1;
}
.bz-reviews-track::-webkit-scrollbar { display: none; }
.bz-review-card {
    flex: 0 0 calc(33.333% - 16px);
    min-width: 280px;
    scroll-snap-align: start;
    background: var(--bz-white);
    border: 1px solid var(--bz-gray-100);
    border-radius: var(--bz-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s var(--bz-ease), transform 0.3s var(--bz-ease);
}
.bz-review-card:hover {
    box-shadow: 0 0.75rem 1.5rem rgba(15, 46, 23, 0.08);
    transform: translateY(-3px);
}
.bz-review-stars { color: #f5b301; font-size: 0.85rem; margin-bottom: 0.75rem; letter-spacing: 2px; }
.bz-review-testo { font-size: 0.95rem; line-height: 1.65; color: var(--bz-navy); flex: 1; }
.bz-review-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-top: 1px solid var(--bz-gray-100);
    padding-top: 0.85rem;
    margin-top: 0.85rem;
}
.bz-review-autore { font-weight: 700; font-size: 0.9rem; color: var(--bz-navy); }
.bz-review-dettaglio { font-size: 0.78rem; color: var(--bz-gray-500, #6c757d); }
.bz-review-fonte {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bz-gray-50, #f8f9fa);
    border: 1px solid var(--bz-gray-100);
    color: var(--bz-primary);
    font-size: 1.05rem;
    flex-shrink: 0;
    transition: background 0.2s var(--bz-ease), color 0.2s var(--bz-ease);
}
.bz-review-fonte:hover { background: var(--bz-primary); color: #fff; }
.bz-reviews-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--bz-gray-100);
    background: var(--bz-white);
    color: var(--bz-navy);
    flex-shrink: 0;
    transition: background 0.2s var(--bz-ease), color 0.2s var(--bz-ease);
}
.bz-reviews-arrow:hover { background: var(--bz-primary); border-color: var(--bz-primary); color: #fff; }
@media (max-width: 991.98px) {
    .bz-review-card { flex-basis: calc(50% - 12px); }
}
@media (max-width: 575.98px) {
    .bz-review-card { flex-basis: 88%; }
    .bz-reviews-arrow { display: none; } /* su mobile si scorre col dito */
}

/* =========================================================================
   RICERCA NEL SITO — lente in navbar, pannello che si apre da destra
   ========================================================================= */

/* il pannello si posiziona sul container della navbar */
.bz-navbar .container { position: relative; }

/* --- la lente, in linea con carrello e utente --- */
.bz-ricerca-apri {
    background: none;
    border: 0;
    cursor: pointer;
    line-height: 1;
}
.bz-ricerca-apri:hover { color: var(--bz-primary); }

/* su mobile sta nell'intestazione, a sinistra dell'hamburger */
.bz-ricerca-apri-mobile {
    margin-left: auto;
    margin-right: .35rem;
    padding: .35rem .6rem;
    font-size: 1.05rem;
    color: var(--bz-navy);
}

/* --- pannello --- */
.bz-ricerca-pannello {
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--bs-gutter-x, .75rem);
    left: 115px;                 /* valore di partenza: poi lo calcola il JS sul logo vero */
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .5rem;
    /* nessuno sfondo proprio: si vede quello della navbar, così il colore
       non può essere diverso da quello dell'intestazione. Il menu sotto viene
       fatto sparire da .bz-navbar.ricerca-aperta, qui sotto. */
    background: none;
    opacity: 0;
    transition: opacity .2s var(--bz-ease);
}
.bz-ricerca-pannello.aperto { opacity: 1; }

/* il campo si apre da destra verso sinistra, come una tendina che scorre.
   Il ritaglio sta qui e non sul pannello, altrimenti taglierebbe via anche
   l'elenco dei suggerimenti che scende sotto la navbar. */
.bz-ricerca-pannello .bz-ricerca {
    clip-path: inset(0 0 0 100%);
    transition: clip-path .4s var(--bz-ease);
}
.bz-ricerca-pannello.aperto .bz-ricerca { clip-path: inset(0 0 0 0); }

/* con la ricerca aperta il menu si dissolve: resta l'intestazione con il suo sfondo.
   Su mobile spariscono anche hamburger e lente, che il pannello copre. */
.bz-navbar.ricerca-aperta .navbar-collapse,
.bz-navbar.ricerca-aperta .navbar-toggler,
.bz-navbar.ricerca-aperta .bz-ricerca-apri-mobile {
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s var(--bz-ease);
}

.bz-ricerca-chiudi {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    font-size: .95rem;
    color: var(--bz-gray-600);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.bz-ricerca-chiudi:hover { background: var(--bz-gray-50); color: var(--bz-navy); }

.bz-ricerca {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}

.bz-ricerca-input {
    width: 100%;
    padding: .55rem .9rem .55rem 2.4rem;
    font-size: .95rem;
    color: var(--bz-navy);
    background: #fff;
    border: 1px solid var(--bz-gray-100);
    border-radius: 999px;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;   /* via la lentina di Safari: l'icona la mettiamo noi */
}
.bz-ricerca-input::-webkit-search-decoration,
.bz-ricerca-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.bz-ricerca-input:focus {
    outline: none;
    border-color: var(--bz-primary);
    box-shadow: 0 0 0 3px rgba(0, 161, 230, .15);
}

.bz-ricerca-icona {
    position: absolute;
    left: .95rem;
    font-size: .85rem;
    color: var(--bz-gray-400);
    pointer-events: none;
}

.bz-ricerca-pulisci {
    position: absolute;
    right: .6rem;
    padding: .15rem .35rem;
    font-size: .78rem;
    line-height: 1;
    color: var(--bz-gray-400);
    background: none;
    border: 0;
    cursor: pointer;
}
.bz-ricerca-pulisci:hover { color: var(--bz-navy); }

/* chi preferisce meno movimento: niente scorrimento, solo comparsa */
@media (prefers-reduced-motion: reduce) {
    .bz-ricerca-pannello .bz-ricerca { transition: none; clip-path: none; }
}

.bz-ricerca-tendina {
    position: absolute;
    top: calc(100% - .35rem);
    left: 0;
    right: 44px;              /* si ferma prima della X di chiusura */
    z-index: 1080;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--bz-gray-100);
    border-radius: var(--bz-radius-md);
    box-shadow: 0 12px 32px rgba(15, 46, 23, .16);
    min-width: 340px;
}

.bz-ricerca-voce {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .6rem .85rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--bz-gray-50);
}
.bz-ricerca-voce:last-of-type { border-bottom: 0; }
.bz-ricerca-voce:hover,
.bz-ricerca-voce.attiva { background: var(--bz-gray-50); text-decoration: none; }

.bz-ricerca-voce-icona {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    font-size: .72rem;
    color: var(--bz-primary);
    background: rgba(0, 161, 230, .1);
    border-radius: 7px;
}

.bz-ricerca-voce-tit {
    display: block;
    font-size: .87rem;
    font-weight: 600;
    color: var(--bz-navy);
    line-height: 1.3;
}
.bz-ricerca-voce-txt {
    display: block;
    font-size: .78rem;
    color: var(--bz-gray-600);
    line-height: 1.35;
    /* due righe al massimo, il resto si taglia */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.bz-ricerca-tutti {
    display: block;
    padding: .55rem .85rem;
    font-size: .82rem;
    font-weight: 600;
    text-align: center;
    color: var(--bz-primary);
    background: var(--bz-gray-50);
    text-decoration: none;
}
.bz-ricerca-tutti:hover { background: var(--bz-gray-100); color: var(--bz-primary-hover); }

.bz-ricerca-vuoto {
    padding: .9rem .85rem;
    font-size: .84rem;
    color: var(--bz-gray-600);
    text-align: center;
}

/* --- pagina dei risultati --- */
.bz-risultato {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--bz-gray-100);
}
.bz-risultato:last-child { border-bottom: 0; }

.bz-risultato-url {
    display: block;
    font-size: .78rem;
    color: var(--bz-gray-400);
    margin-bottom: .15rem;
    word-break: break-all;
}
.bz-risultato-tit {
    display: inline-block;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--bz-primary);
    text-decoration: none;
    line-height: 1.35;
}
.bz-risultato-tit:hover { text-decoration: underline; }
.bz-risultato-txt {
    margin: .25rem 0 0;
    font-size: .92rem;
    color: var(--bz-gray-600);
    line-height: 1.55;
}
.bz-risultato mark {
    padding: 0;
    color: inherit;
    background: rgba(0, 201, 167, .22);   /* verde acqua del brand, leggibile anche in stampa */
}

.bz-risultato-tipo {
    display: inline-block;
    margin-left: .4rem;
    padding: .08rem .45rem;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bz-gray-600);
    background: var(--bz-gray-50);
    border: 1px solid var(--bz-gray-100);
    border-radius: 999px;
    vertical-align: middle;
}

@media (max-width: 991.98px) {
    /* su schermi stretti la misura la mette il JS: qui solo un valore di scorta */
    .bz-ricerca-pannello { left: 105px; }
    .bz-ricerca-tendina { min-width: 0; }
}

/* Descrizione del prodotto sotto il nome, nella pagina categoria */
.bz-cat-desc {
    margin-top: .3rem;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--bz-gray-600);
    /* alcune descrizioni sono elenchi scritti con a capo e pallini: vanno rispettati */
    white-space: pre-line;
}
.bz-cat-desc p:last-child { margin-bottom: 0; }
.bz-cat-desc a { color: var(--bz-primary); }

@media (max-width: 575.98px) {
    .bz-cat-desc { font-size: .82rem; }
}

/* Prodotto raggiunto dalla ricerca: si evidenzia per un attimo */
.bz-cat-group { scroll-margin-top: calc(var(--bz-navbar-height) + 1rem); }

.bz-cat-group-evidenziato {
    box-shadow: 0 0 0 3px var(--bz-primary), 0 8px 24px rgba(15, 46, 23, .14);
    transition: box-shadow .4s var(--bz-ease);
}

/* Card modello su telefono, quando c'è la miniatura: foto a sinistra su tutta
   l'altezza, testo e prezzo nella colonna accanto. */
.bz-model-card--foto {
    display: grid;
    grid-template-columns: 72px 1fr;
    column-gap: 0.75rem;
    align-items: start;
}
.bz-model-card--foto > :not(.bz-model-card-img) { grid-column: 2; }
.bz-model-card-img {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 72px;
    height: 54px;            /* 4:3, come la foto del prodotto in cima */
    max-width: none;         /* la regola generale img{max-width:100%} la stringerebbe */
    object-fit: cover;
    border-radius: var(--bz-radius-sm);
    align-self: start;       /* in alto, non centrata sull'altezza della card */
}

/* Intestazione del prodotto nella pagina categoria: foto a sinistra e testo accanto.
   Sostituisce le utility d-flex, che con !important non si potrebbero scavalcare
   nella media query qui sotto. */
.bz-cat-head {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.bz-cat-head--alto { align-items: flex-start; }

@media (max-width: 767.98px) {
    /* Su telefono la descrizione va a tutta larghezza sotto la foto, invece di
       restare strizzata nella colonna accanto. Il contenitore del testo sparisce
       come scatola (display: contents) e i suoi figli entrano nella griglia. */
    .bz-cat-head,
    .bz-cat-head--alto {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 0.75rem;
        align-items: start;
    }
    .bz-cat-head-testo { display: contents; }
    .bz-cat-head-testo > h3 { grid-column: 2; }
    .bz-cat-head .bz-cat-desc {
        grid-column: 1 / -1;
        margin-top: 0.6rem;
    }
}

/* Cella della miniatura nella tabella dei modelli: niente spazio a sinistra, così
   la foto si allinea con quella del prodotto sopra invece di rientrare, e poco
   spazio a destra per tenere il nome vicino. */
.bz-models-table th:first-child,
.bz-models-table td:first-child {
    padding-left: 0;
    padding-right: 0.6rem;
}

/* Peso totale accanto alla voce Spedizione del carrello. Nel vecchio sito era in
   rosso e in grassetto: serve che si noti, perché a volte sono quintali. */
.bz-carrello-peso {
    font-weight: 600;
    color: var(--bz-primary);
    white-space: nowrap;
}


/* =========================================================================
   BANNER CONSENSO COOKIE
   ========================================================================= */
.bz-cookie-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 2000;
    max-width: 640px;
    margin: 0 auto;
    background: var(--bz-white);
    border-radius: var(--bz-radius-lg);
    box-shadow: 0 12px 40px rgba(15, 46, 23, 0.25);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.bz-cookie-banner-testo {
    flex: 1 1 320px;
    font-size: 0.9rem;
    color: var(--bz-navy);
    line-height: 1.5;
}

.bz-cookie-banner-testo a {
    color: var(--bz-primary);
    text-decoration: underline;
}

.bz-cookie-banner-azioni {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .bz-cookie-banner {
        flex-direction: column;
        align-items: stretch;
    }
    .bz-cookie-banner-azioni {
        justify-content: flex-end;
    }
}