/* ------------------------------------------------------------------
   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 (solo telefono) ----------
   Su mobile i link account sono nascosti e la striscia resta vuota: la usiamo
   per dire subito cosa vendiamo. Una riga sola, mai a capo. */
@media (max-width: 767px) {
    .page-header .panel.wrapper .panel.header {
        padding: 6px 10px;
        text-align: center;
    }
    .page-header .panel.wrapper .panel.header:after {
        content: "Miele biologico italiano \00b7\00a0Spedizione in tutta Italia";
        display: block;
        color: var(--npf-verde-scuro);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .01em;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
@media (max-width: 359px) {
    .page-header .panel.wrapper .panel.header:after { font-size: 10.5px; }
}