/* ------------------------------------------------------------------
   naturapiamo.it — fascia newsletter sopra il footer.
   Tavolozza del sito: verde #169179, verde scuro #0f6b58, crema #fbf8f2.
   Sta in un file a parte del tema: si toglie rimuovendo il <css src>
   da default_head_blocks.xml.
   ------------------------------------------------------------------ */

:root {
    --npf-verde: #169179;
    --npf-verde-scuro: #0f6b58;
    --npf-testo: #2f3a36;
    --npf-crema: #fbf8f2;
}

/* La newsletter viene spostata dal layout in "page.bottom": dentro il footer
   schiacciava l'impaginazione. page-wrapper e' un flex in colonna, quindi
   senza queste righe il contenitore si restringerebbe al contenuto. */
.page-bottom:has(.block.newsletter) {
    width: 100%;
    max-width: none;
    margin: 48px 0 0;
    padding: 34px 20px;
    background: var(--npf-verde);
    border-top: 1px solid var(--npf-verde-scuro);
    box-sizing: border-box;
}
.page-bottom:has(.block.newsletter) > .content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
}
.page-bottom .block.newsletter {
    width: auto;
    max-width: none;
    float: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.page-bottom .block.newsletter .title {
    display: block;
    flex: 1 1 auto;
    text-align: left;
    margin: 0;
}
.page-bottom .block.newsletter .title strong {
    display: block;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.page-bottom .block.newsletter .title:after {
    content: "Ricette, stagionalita' e offerte dai nostri produttori. Niente spam, disiscrizione con un clic.";
    display: block;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, .88);
    line-height: 1.5;
}
.page-bottom .block.newsletter .content {
    flex: 0 0 auto;
    width: 480px;
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.page-bottom .block.newsletter .form.subscribe {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 10px;
}
.page-bottom .block.newsletter .field.newsletter {
    flex: 1 1 220px;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
}
/* Il contenitore di reCAPTCHA e' invisibile ma resta un elemento flex: senza
   questo si prende oltre 250px e schiaccia il campo dell'email.
   Niente display:none, cosi' lo script lo trova ancora. */
.page-bottom .block.newsletter .field-recaptcha {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
}
.page-bottom .block.newsletter .field.newsletter .control { width: 100%; }
.page-bottom .block.newsletter .field.newsletter .control:before { display: none; }
.page-bottom .block.newsletter .field.newsletter label { margin: 0; display: block; }
.page-bottom .block.newsletter .field.newsletter .label { display: none; }
.page-bottom .block.newsletter input[type="email"] {
    width: 100%;
    height: 50px;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 999px;
    padding: 0 20px;
    font-size: 14px;
    color: var(--npf-testo);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.page-bottom .block.newsletter input[type="email"]:focus {
    border-color: var(--npf-testo);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}
.page-bottom .block.newsletter input[type="email"]::placeholder { color: #9a9a9a; }
.page-bottom .block.newsletter .actions {
    flex: 0 0 auto;
    width: auto;
    display: flex;
}
.page-bottom .block.newsletter .action.subscribe {
    height: 50px;
    padding: 0 30px;
    border-radius: 999px;
    background: var(--npf-testo);
    border: 1px solid var(--npf-testo);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
.page-bottom .block.newsletter .action.subscribe:hover,
.page-bottom .block.newsletter .action.subscribe:focus {
    background: #1d2521;
    border-color: #1d2521;
    color: #fff;
}
.page-bottom .block.newsletter .mage-error {
    color: #5a1d1d;
    background: rgba(255, 255, 255, .9);
    border-radius: 6px;
    padding: 3px 8px;
    margin-top: 6px;
    font-size: 12px;
}
/* la copia rimasta nel footer non serve piu' */
.page-footer .block.newsletter { display: none; }

@media (max-width: 1023px) {
    .page-bottom .block.newsletter { flex-direction: column; align-items: stretch; gap: 18px; text-align: center; }
    .page-bottom .block.newsletter .title { text-align: center; }
    .page-bottom .block.newsletter .content { width: 100%; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 640px) {
    .page-bottom:has(.block.newsletter) { padding: 26px 16px; margin-top: 30px; }
    .page-bottom .block.newsletter .title strong { font-size: 18px; }
    .page-bottom .block.newsletter .title:after { font-size: 13px; }
    .page-bottom .block.newsletter .form.subscribe { flex-direction: column; }
    /* in colonna la base flessibile diventa un'altezza: il campo si allungava a 220px */
    .page-bottom .block.newsletter .field.newsletter { flex: 0 0 auto; }
    .page-bottom .block.newsletter .field-recaptcha { flex: 0 0 0; height: 0; min-height: 0; }
    .page-bottom .block.newsletter .action.subscribe { width: 100%; justify-content: center; }
}

/* ---------- riga di servizio nella barra superiore ----------
   Su telefono i link account sono nascosti e la striscia resta vuota; su schermo
   largo restano quasi mille pixel liberi a sinistra dei link. In tutti e due i casi
   la usiamo per le rassicurazioni, aggiungendone una per volta man mano che c'e'
   spazio. Sempre una riga sola: mai a capo, mai il pannello che cresce in altezza. */
.page-header .panel.wrapper .panel.header:before {
    content: "Miele biologico italiano \0000b7\0000a0Spedizione in tutta Italia";
    display: block;
    color: var(--npf-verde-scuro);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 767px) {
    .page-header .panel.wrapper .panel.header { padding: 6px 10px; }
}
@media (max-width: 359px) {
    .page-header .panel.wrapper .panel.header:before { font-size: 10.5px; }
}
@media (min-width: 768px) {
    .page-header .panel.wrapper .panel.header:before {
        float: left;
        font-size: 12px;
        line-height: 20px;
        text-align: left;
    }
}
@media (min-width: 1024px) {
    .page-header .panel.wrapper .panel.header:before { content: "Miele biologico italiano \0000b7\0000a0Spedizione in tutta Italia \0000b7\0000a0Dal nostro apiario nel Parco di Veio"; }
}
@media (min-width: 1280px) {
    .page-header .panel.wrapper .panel.header:before { content: "Miele biologico italiano \0000b7\0000a0Spedizione in tutta Italia \0000b7\0000a0Dal nostro apiario nel Parco di Veio \0000b7\0000a0Propoli, cosmetica naturale e sciami d'api"; }
}

/* Il menu non resta piu' appiccicato da solo: da quando e' accesa la barra di
   Live Search (logo + ricerca + carrello + pulsante del menu) quella si fissa in
   alto con uno z-index enorme e coprirebbe comunque il menu. Due barre
   sovrapposte, una invisibile, non servono a niente. */
@media (min-width: 768px) {
    .page-wrapper .nav-sections,
    .nav-sections {
        position: static;
    }
}

/* Il marchio di naturapiamo e' quasi quadrato (300x271): nella barra appiccicata,
   alto come un logo orizzontale, veniva fuori 35x32 px e non si leggeva.
   Qui lo alziamo, restando dentro i 57px della barra. */
.crls-sticky .crls-sb-logo img,
.crls-sticky-inner .crls-sb-logo img {
    max-height: 48px;
    height: 48px;
    width: auto;
}
.crls-sticky .crls-sb-logo { display: flex; align-items: center; }

/* ---------- la scheda prodotto deve contenere le proprie colonne ----------
   In Luma `.column.main` non contiene i float dei figli: qui finiva a 300px
   mentre `.product.media` e `.product-info-main` arrivavano a 1099. Oggi la
   fascia della newsletter sta molto piu' in basso e non si nota, ma appena la
   colonna di destra si allunga il contenuto le finirebbe sopra, perche' la
   fascia non dipende da quei float. `flow-root` crea il contesto di
   formattazione: la colonna cresce coi float e il resto scende. */
.catalog-product-view .column.main {
    display: flow-root;
}

/* Le categorie con Display Mode "Static block only" rendono il contenuto in .category-view,
   che sta FUORI da .column.main. La colonna resta vuota, ma Luma le impone comunque
   min-height:300px: sotto ai prodotti restava una fascia bianca di circa 340px prima del
   footer. Si azzera solo quando la colonna non contiene davvero una lista prodotti, cosi le
   categorie normali non vengono toccate. */
.catalog-category-view .column.main:not(:has(.products)):not(:has(.product-items)) {
    min-height: 0;
    padding-bottom: 0;
}