/* ------------------------------------------------------------------
   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;
}