/* =========================================================================
   My flower — Brand Skin (palette + tipografia)
   Palette ufficiale: oliva #84954B · salvia #B3C186 · crema #F3E1CE
   bruno scuro #1C110A · terracotta #BC6C25
   Caricato DOPO styles.css per sovrascrivere il tema amerce.
   ========================================================================= */

:root {
  --primary: #84954B;        /* oliva — accento principale (bottoni, link, prezzi) */
  --secondary: #BC6C25;      /* terracotta — accento secondario */
  --text: #1C110A;           /* bruno quasi nero — testo */
  --text-2: #6F685C;         /* bruno-grigio attenuato */
  --bg-5: #F3E1CE;           /* crema brand */
  --bg-7: #F3E1CE;           /* crema brand */
  --bg-6: #3A4A1F;           /* oliva profondo (sezioni scure) */

  /* token brand per i nostri componenti */
  --brand-olive: #84954B;
  --brand-olive-dark: #647039;
  --brand-sage: #B3C186;
  --brand-cream: #F3E1CE;
  --brand-cream-soft: #F7EEE2;
  --brand-dark: #1C110A;
  --brand-terracotta: #BC6C25;
}

/* ---- Guard anti-overflow orizzontale (mobile) ----
   Sintomo: un elemento piu' largo del viewport allargava il layout viewport,
   facendo "scappare" fuori schermo tutta la pagina — inclusa la toolbar in
   basso (position:fixed, ancorata al layout viewport). Uso `clip` e NON
   `hidden`: hidden creerebbe uno scroll-container e romperebbe la
   .mfp-sticky-top (position:sticky); clip no. Fallback a `visible` sui
   browser vecchissimi = comportamento attuale, nessuna regressione. */
html { overflow-x: clip; }

/* ---- Tipografia: serif editoriale per i display + script per il payoff ---- */
h1, h2, h3,
.s-title, .heading, .title_sld, .text-display,
.tf-page-title .heading,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
  letter-spacing: -0.01em;
}

/* payoff a mano: "dai vita ai tuoi spazi !" */
.brand-script,
.payoff {
  font-family: "Caveat", "Segoe Script", cursive !important;
  font-weight: 600;
}

/* Rete di sicurezza: le classi font residue del tema Amerce (Urbanist, Outfit,
   Kumbh Sans, Red Hat Display, Plus Jakarta) NON sono piu' caricate. Le
   rimappo su DM Sans, cosi' eventuale markup che le usa resta coerente col
   corpo del brand invece di ricadere su un font non disponibile. */
.font-main, .font-2, .font-outfit, .font-kumbh, .font-red_hat, .font-plus_jakarta {
  font-family: "DM Sans", sans-serif !important;
}

/* ---- Helper brand (per le nostre sezioni custom) ---- */
.bg-cream       { background-color: var(--brand-cream) !important; }
.bg-cream-soft  { background-color: var(--brand-cream-soft) !important; }
.bg-olive       { background-color: var(--brand-olive) !important; }
.bg-sage        { background-color: var(--brand-sage) !important; }
.text-olive     { color: var(--brand-olive) !important; }
.text-olive-dark{ color: var(--brand-olive-dark) !important; }
.text-terracotta{ color: var(--brand-terracotta) !important; }
.text-cream     { color: var(--brand-cream) !important; }

.badge-brand {
  background: #efe1cf;
  color: var(--brand-terracotta);
}

/* link hover coerente col brand */
a:hover { color: var(--brand-olive); }

/* bottone secondario "outline" brand riutilizzabile */
.tf-btn.btn-brand-outline {
  background: #fff;
  color: var(--brand-olive-dark);
  border: 1px solid var(--brand-olive-dark);
}
.tf-btn.btn-brand-outline:hover {
  background: var(--brand-olive-dark);
  color: #fff;
}

/* =========================================================================
   Fix mobile: le azioni "al passaggio del mouse" della card sono desktop-only.
   Su touch/mobile l'overlay "Aggiungi al carrello" copriva l'immagine.
   Nascondilo sia in assenza di hover sia sotto i 992px (deterministico:
   molti device/emulatori dichiarano comunque hover:hover). Card = tap → scheda.
   ========================================================================= */
@media (hover: none), (max-width: 991.98px) {
  /* azioni hover (aggiungi al carrello + occhio/quick-view) = solo desktop */
  .card-product .product-action_bot,
  .card-product .product-action_list { display: none !important; }
}
/* Badge (NEW/Esaurito/sconto) più piccoli su telefono, così non coprono la foto. */
@media (max-width: 575.98px) {
  .card-product .product-badge_item { font-size: 9px; padding: 2px 6px; }
}
/* /shop macro-categorie: immagini ad aspetto fisso → tile allineate in colonna. */
.mfp-cat-grid .collection-image { aspect-ratio: 4 / 3; }

/* =========================================================================
   Nuova home + header fisso
   ========================================================================= */
/* Messaggio + logo + menu restano in alto allo scroll */
.mfp-sticky-top { position: sticky; top: 0; z-index: 1000; background: #fff; }

/* Barra di ricerca (hero) */
.mfp-searchbar { border: 1px solid #e5e5e5; box-shadow: 0 2px 14px rgba(0,0,0,.05); }
.mfp-searchbar input::placeholder { color: #9a9a90; }

/* Cerchietti categorie: cursore drag */
.mfp-macro-swiper .swiper-slide { cursor: pointer; }
.mfp-macro-swiper { cursor: grab; }

/* Fascia banner */
.mfp-banner picture { display: block; }
.mfp-banner img { width: 100%; height: 440px; object-fit: cover; display: block; }
.mfp-banner-content { max-width: 540px; background: linear-gradient(90deg, rgba(20,17,10,.55), transparent); }
@media (max-width: 575.98px) {
  .mfp-banner img { height: 380px; }
  .mfp-banner-content { max-width: 100%; background: linear-gradient(180deg, rgba(20,17,10,.15), rgba(20,17,10,.6)); }
}

/* Griglia card: le classi Amerce tf-col-3/4/5 sono FISSE a N colonne a ogni
   larghezza (grid-template-columns: repeat(N, 1fr)). Le tracce 1fr hanno minimo
   min-content: con le nostre card (nomi lunghi + prezzo + bottone) su telefono
   il contenuto non si comprime → la griglia diventa piu' larga dello schermo e
   TUTTA la pagina va in overflow orizzontale (bug home "Una selezione per te",
   che usa tf-col-4). Forziamo 2 colonne su mobile (1 sui piu' piccoli). Vale sia
   per #shopGrid sia per le griglie statiche della home. */
@media (max-width: 767.98px) {
  #shopGrid.tf-grid-layout,
  .tf-grid-layout.tf-col-3,
  .tf-grid-layout.tf-col-4,
  .tf-grid-layout.tf-col-5 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 379.98px) {
  #shopGrid.tf-grid-layout,
  .tf-grid-layout.tf-col-3,
  .tf-grid-layout.tf-col-4,
  .tf-grid-layout.tf-col-5 { grid-template-columns: 1fr !important; }
}

/* =========================================================================
   Header My flower — fasce: topbar · barra principale · nav · macrobar
   ========================================================================= */

/* 1 — Topbar messaggi scorrevoli */
/* Override del .tf-topbar Amerce (styles.css: padding 12px 0): la barra scorrevole
   deve restare bassa. Unico padding verticale = 1px, qui. */
.mfp-topbar { background: var(--brand-olive); color: #fff; overflow: hidden; padding-top: 1px; padding-bottom: 1px; }
.mfp-marquee { display: inline-flex; white-space: nowrap; will-change: transform; animation: mfp-slide 32s linear infinite; }
.mfp-marquee[data-static] { animation: none; display: flex; justify-content: center; width: 100%; }
/* altezza dimezzata rispetto alla versione iniziale */
.mfp-marquee-item { padding: 0 46px; font-size: 13px; font-weight: 500; letter-spacing: .02em; line-height: 1.15; }
.mfp-marquee-item::before { content: "✦"; margin-right: 46px; opacity: .55; }
.mfp-marquee[data-static] .mfp-marquee-item::before { display: none; }
@keyframes mfp-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mfp-topbar:hover .mfp-marquee { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mfp-marquee { animation: none; } }

/* 2 — Barra principale */
.mfp-header { background: #fff; }
.mfp-mainbar { border-bottom: 1px solid var(--line, #ece3d5); }
/* Mobile-first: burger | logo (centrato) | carrello. Desktop override sotto. */
.mfp-mainbar-inner { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 12px 0; }
.mfp-burger { display: grid; place-items: center; width: 44px; height: 44px; color: var(--text); }
.mfp-burger .icon { font-size: 25px; }
.mfp-logo { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; justify-self: center; align-items: center; text-align: center; }
.mfp-logo img { height: 40px; width: auto; display: block; }
.mfp-payoff { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #000; }
.mfp-searchbar { width: 100%; }
.mfp-tools { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: 0; }
.mfp-tools .nav-icon-item { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px; }
.mfp-tools .nav-icon-item:hover { background: var(--brand-cream-soft); }
.mfp-tool-lbl { font-size: 13px; font-weight: 500; }

/* 3 — Nav desktop */
/* z-index 70 > macrobar (60): il mega-menu "Prodotti" deve coprire la barra macro */
.mfp-nav { border-bottom: 1px solid var(--line, #ece3d5); position: relative; z-index: 70; }
.mfp-nav-inner { display: flex; justify-content: space-between; align-items: stretch; }
.mfp-nav .box-nav-menu { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mfp-nav .menu-item > .item-link { padding: 14px 18px; font-size: 14.5px; font-weight: 500; }
.mfp-nav-accent > .item-link .cus-text { color: var(--brand-terracotta); font-weight: 600; }

/* 4 — Barra macrocategorie con pannelli hover */
.mfp-macrobar { background: var(--brand-cream); position: relative; z-index: 60; }
.mfp-macrobar-inner { display: flex; gap: 2px; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.mfp-macro { flex: 1 1 auto; text-align: center; position: relative; }
.mfp-macro-link { display: block; padding: 9px 8px; font-size: 16px; font-weight: 400; color: var(--text); text-decoration: none; border-bottom: 3px solid transparent; transition: .15s; line-height: 1.25; }
/* etichetta macro su due righe: la riga scelta in admin va in grassetto
   e di 1px più grande di quella normale (16 → 17). */
.mfp-macro-l1, .mfp-macro-l2 { display: block; font-size: 16px; }
/* Riga in grassetto: stessa dimensione delle altre (16px), distinta solo dal
   peso. Prima era 17px e faceva sembrare le etichette macro disallineate. */
.mfp-macro-link .is-bold { font-weight: 700; }
.mfp-macro:hover .mfp-macro-link { color: var(--brand-olive-dark); background: var(--brand-cream-soft); border-bottom-color: var(--brand-olive); }
/* Dropdown sottocategorie della macrobar = modulo Amerce (.sub-menu.mega-menu-item)
   con griglia di thumbnail (foto sottocategoria + nome). Reveal e stile base
   ereditati da styles.css (.menu-item:hover .sub-menu). */
.mfp-macro-sub { text-align: left; z-index: 65; }
.mfp-subgrid { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 14px 18px; padding: 18px 20px; }
.mfp-subcard { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.mfp-subcard-img { flex: 0 0 auto; display: block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--brand-cream-soft); box-shadow: 0 4px 12px -8px rgba(28,17,10,.5); }
.mfp-subcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.mfp-subcard:hover .mfp-subcard-img img { transform: scale(1.07); }
.mfp-subcard-lbl { font-size: 14px; line-height: 1.2; color: #000; }
.mfp-subcard:hover .mfp-subcard-lbl { color: var(--brand-olive-dark); }
/* I macro verso destra: il pannello (largo) si apre a destra per non uscire dallo schermo. */
.mfp-macro:nth-last-child(-n+3) .mfp-macro-sub { left: auto; right: -32px; }

/* Barra principale — DESKTOP: logo (sx) | ricerca (centro) | tools (dx) */
@media (min-width: 1200px) {
  .mfp-mainbar-inner { grid-template-columns: 1fr minmax(320px, 620px) 1fr; gap: 24px; padding: 16px 0; }
  .mfp-logo { justify-self: start; align-items: flex-start; text-align: left; }
  .mfp-logo img { height: 44px; }
}

/* 2b — Ricerca full-width (mobile/tablet) */
.mfp-msearch { border-bottom: 1px solid var(--line, #ece3d5); }
.mfp-msearch .container-full { padding-top: 2px; padding-bottom: 12px; }
.mfp-msearch .mfp-searchbar { border: 1.5px solid var(--brand-sage); box-shadow: none; }
.mfp-msearch .mfp-searchbar button { min-width: 48px; }

/* 2c — Cerchietti macrocategorie scorrevoli (mobile/tablet) */
.mfp-mmacros { background: var(--brand-cream); padding: 12px 16px 8px; }
/* Swiper Amerce (init automatico da carousel.js): slide parziale + linea di paginazione
   = affordance nativa dello scroll orizzontale. */
.mfp-mmacros-sw { overflow: hidden; }
.mfp-mmacros-sw .swiper-slide { height: auto; }
.mfp-mmacros-sw .tf-sw-pagination { margin-top: 10px; }
/* Fallback se lo swiper non si inizializza: resta una strip scrollabile. */
.mfp-mmacros-sw:not(.swiper-initialized) .swiper-wrapper { overflow-x: auto; gap: 14px; scrollbar-width: none; }
.mfp-mmacros-sw:not(.swiper-initialized) .swiper-slide { flex: 0 0 auto; width: 72px; }
.mfp-mcat { display: block; width: 100%; text-align: center; text-decoration: none; color: var(--text); }
.mfp-mcat-circ { display: block; width: 62px; height: 62px; border-radius: 50%; overflow: hidden; margin: 0 auto 6px; box-shadow: 0 4px 10px -6px rgba(28,17,10,.5); background: var(--brand-cream-soft); }
.mfp-mcat-circ img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mfp-mcat-lbl { font-size: 11.5px; font-weight: 500; line-height: 1.15; display: block; }

/* Auto-hide MOBILE (<1200px): scroll giù ritrae topbar + ricerca + cerchietti;
   resta la barra col logo. La classe .mfp-collapsed la aggiunge il JS in _header. */
@media (max-width: 1199.98px) {
  .mfp-topbar, .mfp-msearch, .mfp-mmacros {
    overflow: hidden; max-height: 240px;
    transition: max-height .3s ease, opacity .2s ease;
  }
  .mfp-sticky-top.mfp-collapsed .mfp-topbar,
  .mfp-sticky-top.mfp-collapsed .mfp-msearch,
  .mfp-sticky-top.mfp-collapsed .mfp-mmacros {
    max-height: 0; opacity: 0; pointer-events: none;
  }
}

/* =========================================================================
   Prezzi più grandi (tutte le viste) · categoria scheda · dropdown pagina
   ========================================================================= */

/* Prezzo nelle card (liste, home, correlati, ricerca) */
.price-wrap .price-new { font-size: 18px; line-height: 1.2; }
.price-wrap .price-old { font-size: 14px; }

/* Prezzo nella scheda prodotto */
.product-infor-price .price-on-sale { font-size: 32px; line-height: 1.1; }
.product-infor-price .text-decoration-line-through { font-size: 16px; }

/* Categoria sopra al nome (scheda prodotto) */
.product-infor-cate { font-size: 15px; letter-spacing: .02em; }
.product-infor-cate .link { font-size: inherit; font-weight: 500; }

/* Dropdown "vai alla pagina" (in fondo alle liste) */
.wg-page-select {
  border: 1px solid #e0d6c6; border-radius: 8px; padding: 6px 10px;
  font-size: 14px; color: var(--text); background: #fff; cursor: pointer;
  font-family: inherit; line-height: 1.2;
}
.wg-page-select:focus-visible { outline: 2px solid var(--brand-sage); outline-offset: 1px; }

/* =========================================================================
   Header "smart": scroll giù → resta solo la RIGA LOGO (barra principale);
   topbar + nav + barra macro si ritraggono con transizione fluida.
   Scroll su (o vicino al top) → tornano. Solo desktop (≥1200px).
   NB: overflow:hidden SOLO da collassato, così normalmente i dropdown
   (mega-menu / pannelli macro) non vengono clippati.
   ========================================================================= */
@media (min-width: 1200px) {
  .mfp-topbar, .mfp-nav, .mfp-macrobar {
    max-height: 80px;
    transition: max-height .32s ease, opacity .22s ease;
  }
  .mfp-sticky-top.mfp-collapsed .mfp-topbar,
  .mfp-sticky-top.mfp-collapsed .mfp-nav,
  .mfp-sticky-top.mfp-collapsed .mfp-macrobar {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .mfp-sticky-top.mfp-collapsed .mfp-mainbar {
    box-shadow: 0 8px 20px -14px rgba(28,17,10,.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mfp-topbar, .mfp-nav, .mfp-macrobar { transition: none; }
}

/* =========================================================================
   Cookie banner (#mfCookie).
   Stava a bottom:16px e finiva SOTTO la toolbar mobile di Amerce
   (.tf-toolbar-bottom, fixed bottom:0, ~70px, visibile fino a 1199px),
   coprendo prezzo e "aggiungi al carrello" sulla scheda prodotto.
   Qui viene alzato dell'altezza della toolbar dove la toolbar esiste.
   ========================================================================= */
:root { --mfp-toolbar-h: 70px; }

.mfp-cookie {
  display: none;
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1080;
  max-width: 560px;
  margin: 0 auto;
  background: #1C110A;
  color: #f3e1ce;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.mfp-cookie-text { font-size: .92rem; line-height: 1.5; }
.mfp-cookie-text a { color: #B3C186; text-decoration: underline; }
.mfp-cookie-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.mfp-cookie-actions .tf-btn { padding: 8px 18px; }
.mfp-cookie-reject {
  background: transparent; border: 1px solid #B3C186; color: #f3e1ce;
  border-radius: 8px; padding: 8px 18px; cursor: pointer;
  font-family: inherit; line-height: 1.2;
}

/* Sopra la toolbar mobile + versione compatta (occupa meno schermo) */
@media (max-width: 1199.98px) {
  .mfp-cookie {
    left: 10px; right: 10px;
    bottom: calc(var(--mfp-toolbar-h) + 10px + env(safe-area-inset-bottom, 0px));
    padding: 14px 16px;
    border-radius: 12px;
  }
  .mfp-cookie-text { font-size: .85rem; line-height: 1.45; }
  .mfp-cookie-actions { margin-top: 10px; gap: 8px; }
  .mfp-cookie-actions .tf-btn,
  .mfp-cookie-reject { flex: 1 1 0; padding: 9px 12px; text-align: center; }
}

/* =========================================================================
   Ricerca istantanea — dropdown predittivo agganciato alle searchbar
   (desktop .mfp-searchbar, mobile .mfp-msearch, modale #search).
   Il pannello e' appeso al <body> e posizionato fixed sotto l'input attivo,
   cosi' funziona identico nei tre contesti senza problemi di overflow/grid.
   ========================================================================= */
.mfp-suggest {
  position: fixed; z-index: 1090; max-width: 640px;
  background: #fff; border: 1px solid var(--line, #ece3d5); border-radius: 14px;
  box-shadow: 0 24px 48px -20px rgba(28,17,10,.4); overflow: hidden;
}
.mfp-suggest-cats {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid var(--line, #ece3d5); background: var(--brand-cream-soft, #f7eee2);
}
.mfp-suggest-cat {
  font-size: 13px; color: var(--brand-olive-dark, #647039); background: #fff;
  border: 1px solid var(--line, #ece3d5); border-radius: 999px; padding: 4px 12px;
  text-decoration: none; white-space: nowrap;
}
.mfp-suggest-cat:hover { background: var(--brand-sage, #b3c186); color: #1c110a; }
.mfp-suggest-list { max-height: 52vh; overflow-y: auto; }
.mfp-suggest-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  text-decoration: none; color: var(--text, #1c110a);
}
.mfp-suggest-item:hover, .mfp-suggest-item.is-active { background: var(--brand-cream-soft, #f7eee2); }
.mfp-suggest-thumb {
  flex: none; width: 46px; height: 46px; border-radius: 8px; overflow: hidden;
  background: var(--brand-cream, #f3e1ce);
}
.mfp-suggest-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mfp-suggest-info { flex: 1 1 auto; min-width: 0; }
.mfp-suggest-name {
  display: block; font-size: 14px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mfp-suggest-cat-lbl { display: block; font-size: 11.5px; color: var(--text-2, #6f685c); }
.mfp-suggest-price { flex: none; font-size: 14px; font-weight: 600; color: var(--brand-olive-dark, #647039); }
.mfp-suggest-price.is-sale { color: var(--brand-terracotta, #bc6c25); }
.mfp-suggest-all {
  display: block; text-align: center; padding: 11px 14px; background: #fff;
  border-top: 1px solid var(--line, #ece3d5); font-size: 13px; font-weight: 600;
  color: var(--brand-olive-dark, #647039); text-decoration: none;
}
.mfp-suggest-all:hover { background: var(--brand-cream-soft, #f7eee2); }
.mfp-suggest-empty { padding: 18px 16px; text-align: center; color: var(--text-2, #6f685c); font-size: 14px; }
.mfp-suggest-loading { padding: 16px; text-align: center; color: var(--text-2, #6f685c); font-size: 13px; }

/* =========================================================================
   Vista ELENCO (list) nel listing prodotti
   La nostra card ha le info centrate (text-center + mx-auto); nella vista
   elenco Amerce (.tf-list-layout) vanno allineate a sinistra accanto all'immagine.
   ========================================================================= */
.tf-list-layout .card-product_info { text-align: left; align-items: flex-start; }
.tf-list-layout .card-product_info .name-product,
.tf-list-layout .card-product_info .price-wrap,
.tf-list-layout .card-product_info .product-color_list { margin-left: 0 !important; margin-right: 0 !important; }

/* =========================================================================
   Footer — sezione loghi pagamenti + corrieri (sostituisce il marquee di testo)
   Ogni logo in una pastiglia bianca UNIFORME (stessa altezza), così la fila
   appare ordinata sul fondo scuro del footer. Layout Amerce (payment-list).
   ========================================================================= */
.footer-trust { padding: 6px 0 10px; }
.mfp-trust-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 22px 48px; }
.mfp-trust-group { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mfp-trust-lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.72); }
.mfp-pay-badges { flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; }
.mfp-pay-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; min-width: 46px; padding: 0 9px;
  background: #fff; border-radius: 6px; box-shadow: 0 2px 8px -4px rgba(0,0,0,.45);
}
.mfp-pay-badge img { height: 20px; width: auto; display: block; }
/* Desktop: badge al doppio (più leggibili). */
@media (min-width: 992px) {
  .mfp-trust-inner { gap: 26px 64px; }
  .mfp-trust-lbl { font-size: 13px; }
  .mfp-pay-badges { gap: 12px; }
  .mfp-pay-badge { height: 62px; min-width: 92px; padding: 0 18px; border-radius: 9px; }
  .mfp-pay-badge img { height: 40px; }
}

/* =========================================================================
   Tag "Fragile" sull'immagine scheda prodotto (attributo prodotto, incide
   sul costo trasporto). Rosso, in alto a sinistra sopra la galleria.
   ========================================================================= */
.mfp-fragile-tag {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  background: #d63838; color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 6px; box-shadow: 0 4px 12px -4px rgba(214,56,56,.6);
}
.mfp-fragile-tag .icon { font-size: 13px; }

/* =========================================================================
   Scheda prodotto — elementi dal mockup cliente (punto 1.4)
   ========================================================================= */
/* Eyebrow categoria sopra il nome: ingrandito e in evidenza */
.product-infor-cate { font-size: 19px !important; letter-spacing: .02em; }
.product-infor-cate .link { font-weight: 600; }

/* Testo "(minimo N, a multipli di N)" accanto a "Quantità": più leggibile */
.tf-product-info-quantity .title span { font-size: 14px !important; }
/* Riepilogo "N confezioni × unità · X pz · totale € Y": più leggibile */
.mfp-qty-summary { font-size: 14px !important; }

/* Disponibilità: pallino di stato */
.mfp-stock-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #2e9e4f; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(46,158,79,.18); }
.mfp-stock-dot.is-out { background: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.18); }

/* Prezzo: rata Klarna/Scalapay */
.mfp-installment { color: var(--brand-terracotta); }
.mfp-installment strong { color: var(--brand-terracotta); }

/* Box specifiche tecniche (grigio, 2 colonne label→valore) */
.mfp-spec-box { background: #f5f2ec; border: 1px solid #e7ddcd; border-radius: 10px; padding: 14px 16px; }
.mfp-spec-box .tf-grid-layout { gap: 8px 28px; }
.mfp-spec-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 3px 0; border-bottom: 1px dashed #e0d6c4; }
.mfp-spec-k { text-transform: uppercase; letter-spacing: .03em; }
.mfp-spec-v { color: var(--text); white-space: nowrap; }

/* Riepilogo quantità (confezioni × unità = pezzi + totale) */
.mfp-qty-summary { color: var(--text-2); }
.mfp-qty-summary strong { color: var(--text); }