/* ------------------------------------------------------------------
   medile.it — testata, menu, ricerca, footer e vetrina.
   Sta in un file a parte per non toccare styles.css del tema: si puo'
   togliere semplicemente rimuovendo il <link> dal layout.
   Tavolozza: arancio del marchio, inchiostro quasi nero, fondo chiaro.
   ------------------------------------------------------------------ */

:root {
    --medile-arancio: #eba834;
    --medile-arancio-scuro: #d18f1c;
    --medile-inchiostro: #1c1c1c;
    --medile-grigio: #6b6b6b;
    --medile-bordo: #e4e4e4;
    --medile-fondo: #f7f7f5;
}

/* ---------- barra superiore ---------- */
.page-header .panel.wrapper {
    background: var(--medile-inchiostro);
    border-bottom: 0;
}
.page-header .panel.wrapper .panel.header {
    padding-top: 7px;
    padding-bottom: 7px;
}
.page-header .panel.wrapper a,
.page-header .panel.wrapper .header.links > li > a {
    color: #fff;
    font-size: 12px;
    letter-spacing: .02em;
    text-decoration: none;
}
.page-header .panel.wrapper a:hover {
    color: var(--medile-arancio);
    text-decoration: none;
}

/* ---------- testata compatta ---------- */
.page-header {
    border-bottom: 1px solid var(--medile-bordo);
    background: #fff;
}
.page-header .header.content {
    padding-top: 14px;
    padding-bottom: 14px;
}
.page-header .logo {
    margin: 0 0 0 0;
    max-width: 260px;
}
.page-header .logo img {
    max-height: 56px;
    width: auto;
}

/* ---------- ricerca a pillola ---------- */
/* Luma fissa ".block-search{width:250px}": serve piu' specificita' per allargarla */
.page-header .block-search,
.block-search {
    width: 100%;
    max-width: 620px;
    padding-left: 0;
    float: right;
}

/* La tendina nativa di Magento si sovrappone a quella di Live Search e mostra solo
   termini con i contatori: sembra la cronologia del browser. Resta quella del modulo. */
#search_mini_form #search_autocomplete,
#search_mini_form .search-autocomplete {
    display: none !important;
}
.block-search .control {
    border-top: 0;
    margin: 0;
    padding: 0;
}
.block-search input {
    position: static;
    left: auto;
    margin: 0;
    height: 52px;
    padding: 0 58px 0 22px;
    border: 1px solid var(--medile-bordo);
    border-radius: 999px;
    background: var(--medile-fondo);
    font-size: 16px;
    color: var(--medile-inchiostro);
    box-shadow: none;
    transition: border-color .15s, background .15s;
}
.block-search input:focus {
    border-color: var(--medile-arancio);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(235, 168, 52, .18);
}
.block-search input::placeholder { color: #9a9a9a; }
.block-search .action.search {
    right: 7px;
    top: 5px;
    padding: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--medile-arancio);
    opacity: 1;
}
.block-search .action.search:before {
    color: #fff;
    font-size: 21px;
    line-height: 42px;
}
.block-search .action.search:hover { background: var(--medile-arancio-scuro); }
.block-search .label { display: none; }

/* ---------- menu ---------- */
.nav-sections {
    background: #fff;
    border-top: 1px solid var(--medile-bordo);
    border-bottom: 1px solid var(--medile-bordo);
    margin-bottom: 0;
}
.nav-sections-item-content > .navigation { background: transparent; }
.navigation { background: transparent; }
.navigation .level0 > .level-top {
    color: var(--medile-inchiostro);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 14px 13px;
    line-height: 1.2;
}
.navigation .level0 > .level-top:hover,
.navigation .level0.active > .level-top,
.navigation .level0.has-active > .level-top {
    color: var(--medile-arancio-scuro);
    border-color: var(--medile-arancio);
}
.navigation .level0.active > .level-top,
.navigation .level0.has-active > .level-top {
    border-bottom: 3px solid var(--medile-arancio);
}
.navigation .level0 .submenu {
    border: 1px solid var(--medile-bordo);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .09);
    border-radius: 0 0 6px 6px;
}
.navigation .level0 .submenu a:hover { color: var(--medile-arancio-scuro); }

/* Il menu NON resta appiccicato in alto: ci pensa gia' la barra di Live Search,
   che scorrendo si fissa a quota zero con uno z-index enorme e lo coprirebbe
   comunque. Due barre sovrapposte, una delle quali invisibile, non servono. */
@media (min-width: 768px) {
    .nav-sections {
        box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    }
}

/* ---------- link: nero standard, non il blu di Luma ---------- */
a, .alink, a:visited {
    color: var(--medile-inchiostro);
}
a:hover, .alink:hover { color: var(--medile-arancio-scuro); }
.product-item-name a, .product.name a > a { color: var(--medile-inchiostro); }
.product-item-name a:hover { color: var(--medile-arancio-scuro); }
.breadcrumbs a { color: var(--medile-grigio); }

/* ---------- bottoni ---------- */
.action.primary,
.action-primary,
button.action.primary {
    background: var(--medile-arancio);
    border-color: var(--medile-arancio);
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
}
.action.primary:hover,
.action-primary:hover {
    background: var(--medile-arancio-scuro);
    border-color: var(--medile-arancio-scuro);
    color: #fff;
}
.action.tocart.primary { letter-spacing: .01em; }

/* ---------- prezzi ---------- */
.price-box .price { color: var(--medile-inchiostro); font-weight: 700; }
.product-item .price-box { margin: 8px 0 12px; }

/* ---------- footer ----------
   Luma colora il footer con ".page-wrapper > .page-footer": un semplice
   ".page-footer" perde il confronto e i titoli bianchi finiscono su grigio
   chiaro, illeggibili. Serve la stessa specificita'. */
.page-wrapper > .page-footer,
.page-footer {
    background: var(--medile-inchiostro);
    color: #cfcfcf;
    margin-top: 44px;
    padding-top: 6px;
}
.page-footer .footer.content {
    border-top: 0;
    padding-top: 34px;
    padding-bottom: 10px;
}
.page-footer a, .page-footer .alink, .page-footer a:visited { color: #cfcfcf; }
.page-footer a:hover { color: var(--medile-arancio); }
.page-footer .widget.block.block-static-block {
    width: 100%;
    float: none;
    clear: both;
    margin: 0;
}
.page-footer .block.newsletter { width: 100%; max-width: 380px; float: none; }
.page-footer .block.newsletter .title { display: block; margin-bottom: 8px; }
.page-footer .block.newsletter .title strong { color: #fff; font-weight: 600; font-size: 14px; }
.page-footer .block.newsletter .field .control:before { color: #8f8f8f; }
.page-footer .block.newsletter input {
    background: #2a2a2a;
    border-color: #3a3a3a;
    color: #fff;
    height: 40px;
}
.page-footer .block.newsletter input::placeholder { color: #8f8f8f; }
.page-footer .block.newsletter .action.subscribe {
    background: var(--medile-arancio);
    border-color: var(--medile-arancio);
    height: 40px;
}
.copyright {
    background: #121212;
    color: #8f8f8f;
    font-size: 12px;
    padding: 14px 0;
}

/* footer a colonne, costruito nel blocco CMS */
.medile-footer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 6px 0 26px;
}
.medile-footer h4 {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 14px;
}
.medile-footer ul { list-style: none; margin: 0; padding: 0; }
.medile-footer li { margin-bottom: 9px; font-size: 13.5px; line-height: 1.5; }
.medile-footer p { font-size: 13.5px; line-height: 1.65; margin: 0 0 10px; color: #b4b4b4; }
.medile-footer .medile-marchio { color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.medile-footer .medile-dato { display: block; color: #8f8f8f; font-size: 12.5px; }
.medile-pagamenti {
    border-top: 1px solid #2a2a2a;
    padding: 18px 0 6px;
    text-align: center;
}
.medile-pagamenti span {
    display: block;
    color: #8f8f8f;
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.medile-pagamenti img { max-height: 26px; width: auto; margin: 0 7px; vertical-align: middle; }

@media (max-width: 767px) {
    .medile-footer { grid-template-columns: 1fr 1fr; gap: 22px; }
}
@media (max-width: 480px) {
    .medile-footer { grid-template-columns: 1fr; }
}

/* ---------- vetrina ---------- */
.medile-hero {
    background: linear-gradient(105deg, #fbf6ec 0%, #f7f7f5 60%, #fff 100%);
    border-bottom: 1px solid var(--medile-bordo);
    padding: 46px 0 40px;
    margin-bottom: 34px;
}
.medile-hero h1 {
    font-size: 34px;
    line-height: 1.18;
    font-weight: 700;
    color: var(--medile-inchiostro);
    margin: 0 0 14px;
    max-width: 780px;
}
.medile-hero p {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--medile-grigio);
    max-width: 680px;
    margin: 0 0 22px;
}
.medile-azioni a {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    margin: 0 10px 10px 0;
}
.medile-azioni .medile-cta {
    background: var(--medile-arancio);
    color: #fff;
}
.medile-azioni .medile-cta:hover { background: var(--medile-arancio-scuro); color: #fff; }
.medile-azioni .medile-cta-2 {
    border: 1px solid var(--medile-inchiostro);
    color: var(--medile-inchiostro);
}
.medile-azioni .medile-cta-2:hover { background: var(--medile-inchiostro); color: #fff; }

.medile-garanzie {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 0 0 40px;
}
.medile-garanzia {
    background: #fff;
    border: 1px solid var(--medile-bordo);
    border-radius: 8px;
    padding: 18px 18px 16px;
}
.medile-garanzia strong {
    display: block;
    font-size: 14.5px;
    color: var(--medile-inchiostro);
    margin-bottom: 5px;
}
.medile-garanzia span { font-size: 13px; color: var(--medile-grigio); line-height: 1.5; }

.medile-sezione { margin: 0 0 40px; }
.medile-sezione > h2 {
    font-size: 23px;
    font-weight: 700;
    color: var(--medile-inchiostro);
    margin: 0 0 6px;
    padding: 0;
    border: 0;
}
.medile-sezione > p.medile-occhiello {
    font-size: 14.5px;
    color: var(--medile-grigio);
    margin: 0 0 20px;
    max-width: 780px;
    line-height: 1.6;
}

.medile-reparti {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
.medile-reparti a {
    display: block;
    background: #fff;
    border: 1px solid var(--medile-bordo);
    border-radius: 8px;
    padding: 18px 14px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--medile-inchiostro);
    text-decoration: none;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.medile-reparti a:hover {
    border-color: var(--medile-arancio);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .07);
    color: var(--medile-arancio-scuro);
}

.medile-racconto {
    background: var(--medile-fondo);
    border: 1px solid var(--medile-bordo);
    border-radius: 10px;
    padding: 30px 32px;
    margin: 0 0 40px;
}
.medile-racconto h2 { font-size: 21px; margin: 0 0 12px; }
.medile-racconto p { font-size: 14.5px; line-height: 1.7; color: #4a4a4a; margin: 0 0 12px; max-width: 900px; }

.medile-faq { margin: 0 0 20px; }
.medile-faq details {
    background: #fff;
    border: 1px solid var(--medile-bordo);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 10px;
}
.medile-faq summary {
    font-weight: 600;
    font-size: 14.5px;
    cursor: pointer;
    color: var(--medile-inchiostro);
    list-style: none;
}
.medile-faq summary::-webkit-details-marker { display: none; }
.medile-faq summary:before { content: "+ "; color: var(--medile-arancio); font-weight: 700; }
.medile-faq details[open] summary:before { content: "– "; }
.medile-faq p { font-size: 14px; line-height: 1.65; color: var(--medile-grigio); margin: 10px 0 0; }

@media (max-width: 1024px) {
    .medile-reparti { grid-template-columns: repeat(3, 1fr); }
    .medile-garanzie { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .medile-hero { padding: 30px 0 26px; margin-bottom: 24px; }
    .medile-hero h1 { font-size: 25px; }
    .medile-hero p { font-size: 15px; }
    .medile-reparti { grid-template-columns: repeat(2, 1fr); }
    .medile-racconto { padding: 22px 20px; }
    .page-header .logo img { max-height: 44px; }
    /* Luma mette l'hamburger in alto a sinistra in posizione assoluta: senza questo
       margine il logo gli finisce sotto e non si capisce dove premere */
    .page-header .logo { margin-left: 48px; max-width: calc(100% - 110px); }
    .block-search { max-width: none; float: none; }
    /* Luma tiene il campo fuori schermo finche' non si preme la lente:
       con la barra sempre visibile la tastiera non si aprirebbe */
    .block-search input { position: static !important; left: auto !important; }
    html, body { overflow-x: hidden; }
}

/* ---------- pagine legali ---------- */
.medile-legale { max-width: 900px; font-size: 15px; line-height: 1.7; color: #333; }
.medile-legale p { margin: 0 0 14px; }
.medile-legale h2 {
    font-size: 19px;
    font-weight: 700;
    color: var(--medile-inchiostro);
    margin: 32px 0 12px;
    padding-top: 18px;
    border-top: 1px solid var(--medile-bordo);
}
.medile-legale h3 {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--medile-inchiostro);
    margin: 22px 0 8px;
}
.medile-legale ul, .medile-legale ol { margin: 0 0 14px; padding-left: 22px; }
.medile-legale li { margin-bottom: 7px; }
.medile-aggiornamento {
    display: inline-block;
    background: var(--medile-fondo);
    border: 1px solid var(--medile-bordo);
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 12.5px;
    color: var(--medile-grigio);
    margin-bottom: 18px !important;
}
.medile-indice {
    background: var(--medile-fondo);
    border: 1px solid var(--medile-bordo);
    border-radius: 8px;
    padding: 18px 22px;
    margin: 0 0 28px;
}
.medile-indice strong {
    display: block;
    font-size: 12.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--medile-grigio);
    margin-bottom: 10px;
}
.medile-indice ol { margin: 0; padding-left: 20px; }
.medile-indice li { margin-bottom: 5px; font-size: 14px; }
.medile-tabella {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
    font-size: 14px;
}
.medile-tabella th {
    background: var(--medile-fondo);
    text-align: left;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 12px;
    border: 1px solid var(--medile-bordo);
}
.medile-tabella td {
    padding: 10px 12px;
    border: 1px solid var(--medile-bordo);
    vertical-align: top;
    line-height: 1.55;
}
@media (max-width: 640px) {
    .medile-tabella, .medile-tabella tbody, .medile-tabella tr, .medile-tabella td, .medile-tabella th { display: block; width: 100%; }
    .medile-tabella thead { display: none; }
    .medile-tabella tr { margin-bottom: 12px; border: 1px solid var(--medile-bordo); }
    .medile-tabella td { border: 0; border-bottom: 1px solid var(--medile-bordo); }
    .medile-tabella td:last-child { border-bottom: 0; }
}

/* recapito WhatsApp nel footer: il numero lo compone il JavaScript, qui non c'e' */
.medile-whatsapp { cursor: pointer; }
.medile-whatsapp:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 7px;
    vertical-align: -2px;
    background: #25d366;
    border-radius: 50%;
}
.medile-whatsapp .medile-whatsapp-numero:empty:after { content: "scrivici"; }

/* ---------- reCAPTCHA ----------
   E' la versione v3: non mostra sfide, solo un distintivo fisso in basso a destra.
   Google consente di nasconderlo a patto di riportare l'attribuzione nel flusso
   dell'utente: la mettiamo nel footer, qui sotto. La protezione resta attiva. */
.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.medile-recaptcha-nota {
    border-top: 1px solid #2a2a2a;
    padding: 12px 0 2px;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.5;
    color: #7a7a7a;
}
.medile-recaptcha-nota a { color: #9a9a9a; text-decoration: underline; }
.medile-recaptcha-nota a:hover { color: var(--medile-arancio); }

/* richiamo al modulo di recesso nella fascia garanzie della vetrina:
   bottone pieno, non un link sottolineato che si perde nel testo */
.medile-garanzia a {
    display: inline-block;
    margin-top: 12px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--medile-arancio);
    border: 1px solid var(--medile-arancio);
    border-radius: 999px;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.medile-garanzia a:hover,
.medile-garanzia a:focus {
    background: var(--medile-arancio-scuro);
    border-color: var(--medile-arancio-scuro);
    color: #fff;
    text-decoration: none;
}
/* la scheda del reso porta un'azione, quindi si distingue dalle altre tre */
.medile-garanzia:has(a) {
    background: #fffdf8;
    border-color: #f0dcb4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ---------- fascia newsletter sopra il footer ----------
   Il blocco viene spostato dal layout in "page.bottom". La banda e' il contenitore
   stesso (gia' a tutta larghezza): niente 100vw ne' margini negativi, che sul
   contenitore interno finivano fuori asse. Dentro, una riga a due colonne:
   testo a sinistra, campo e bottone a destra. */
.page-bottom:has(.block.newsletter) {
    /* page-wrapper e' un flex in colonna: con "margin: 0 auto" e max-width il
       contenitore si restringeva al contenuto e la banda non arrivava ai bordi. */
    width: 100%;
    max-width: none;
    margin: 48px 0 0;
    padding: 34px 20px;
    background: var(--medile-arancio);
    border-top: 1px solid #d99d2c;
    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: var(--medile-inchiostro);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.page-bottom .block.newsletter .title:after {
    content: "Offerte, novita' di catalogo e consigli pratici. Niente spam, disiscrizione con un clic.";
    display: block;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 500;
    color: #5a4413;
    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 v3 e' invisibile ma resta un elemento flex: senza
   questo si prendeva 256px e schiacciava il campo dell'email a tre lettere.
   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(--medile-inchiostro);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.page-bottom .block.newsletter input[type="email"]:focus {
    border-color: var(--medile-inchiostro);
    box-shadow: 0 0 0 3px rgba(28, 28, 28, .12);
}
.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(--medile-inchiostro);
    border: 1px solid var(--medile-inchiostro);
    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: #000;
    border-color: #000;
    color: #fff;
}
.page-bottom .block.newsletter .mage-error {
    color: #5a1d1d;
    background: rgba(255, 255, 255, .85);
    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; }
}

/* ---------- richiamo al modulo di recesso in vetrina ----------
   Bottone vero, non un link: il reso e' una rassicurazione prima
   dell'acquisto, quindi deve vedersi. */
.medile-reso-fascia {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin: 0 0 40px;
    padding: 20px 26px;
    background: var(--medile-inchiostro);
    border-radius: 10px;
}
.medile-reso-testo strong {
    display: block;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 4px;
}
.medile-reso-testo span {
    display: block;
    color: #c9c9c9;
    font-size: 13.5px;
    line-height: 1.5;
}
a.medile-reso-bottone,
.medile-reso-fascia a.medile-reso-bottone {
    flex: 0 0 auto;
    display: inline-block;
    padding: 13px 26px;
    border-radius: 999px;
    background: var(--medile-arancio);
    border: 1px solid var(--medile-arancio);
    color: var(--medile-inchiostro);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
a.medile-reso-bottone:hover,
a.medile-reso-bottone:focus {
    background: #fff;
    border-color: #fff;
    color: var(--medile-inchiostro);
    text-decoration: none;
}
@media (max-width: 767px) {
    .medile-reso-fascia { flex-direction: column; align-items: flex-start; padding: 18px 18px 20px; }
    a.medile-reso-bottone { width: 100%; text-align: 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: "Spedizione in tutta Italia \0000b7\0000a0Reso entro 14 giorni";
    display: block;
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    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: "Spedizione in tutta Italia \0000b7\0000a0Reso entro 14 giorni \0000b7\0000a0Nessun ordine minimo"; }
}
@media (min-width: 1280px) {
    .page-header .panel.wrapper .panel.header:before { content: "Spedizione in tutta Italia \0000b7\0000a0Reso entro 14 giorni \0000b7\0000a0Nessun ordine minimo \0000b7\0000a0Sportelli e cassette su misura"; }
}

/* ---------- barra superiore davvero nera ----------
   Il tema dichiara `.page-header .panel.wrapper{background-color:#6e716e}` DOPO
   il mio foglio, a parita' di specificita': vinceva lui e la barra restava grigia.
   Un selettore piu' specifico e la questione e' chiusa. */
body .page-header .panel.wrapper,
.page-wrapper .page-header .panel.wrapper {
    background: var(--medile-inchiostro);
    background-color: var(--medile-inchiostro);
    border-bottom: 0;
}

/* ---------- lente staccata dal campo di ricerca ----------
   Live Search reimpagina #search_mini_form come riga flessibile e fissa misure
   della lente con !important. Il mio vecchio posizionamento a scostamento
   (right) la tirava indietro di 10px e la faceva sovrapporre al bordo del campo:
   qui la rimetto in fila e le lascio un po' d'aria. */
#search_mini_form,
.crls-sb-form {
    gap: 12px !important;
}
.block-search .action.search,
#search_mini_form .action.search,
#search_mini_form button[type="submit"] {
    right: auto !important;
    left: auto !important;
    top: auto !important;
}

/* ---------- la scheda prodotto deve contenere le proprie colonne ----------
   In Luma `.column.main` NON contiene i float dei suoi figli: misurata finiva a
   531px mentre `.product.media`, `.product-info-main` e `.product.info.detailed`
   arrivavano a 1010. Finche' il resto della pagina bastava a coprire la
   differenza non si vedeva; appena la colonna di destra si allunga (opzioni,
   Klarna, testi che arrivano dopo) il contenuto finisce SOPRA la fascia della
   newsletter, che non si sposta perche' non dipende da quei float.
   `flow-root` crea il contesto di formattazione: la colonna cresce coi float e
   tutto quello che viene dopo scende. */
.catalog-product-view .column.main {
    display: flow-root;
}