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

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

/* ---- 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 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 shop: la classe Amerce tf-col-3 è fissa a 3 colonne a ogni larghezza.
   Per le nostre card (nomi lunghi + prezzo) 3 colonne su telefono si accavallano
   → forziamo 2 colonne su mobile (1 sui più piccoli). */
@media (max-width: 767.98px) {
  #shopGrid.tf-grid-layout { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 379.98px) {
  #shopGrid.tf-grid-layout { grid-template-columns: 1fr !important; }
}

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

/* 1 — Topbar messaggi scorrevoli */
.mfp-topbar { background: var(--brand-olive); color: #fff; overflow: hidden; }
.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%; }
.mfp-marquee-item { padding: 10px 46px; font-size: 14.5px; font-weight: 500; letter-spacing: .02em; }
.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); }
.mfp-mainbar-inner { display: grid; grid-template-columns: 1fr minmax(320px, 620px) 1fr; align-items: center; gap: 24px; padding: 16px 0; }
.mfp-mainbar-left { display: flex; align-items: center; gap: 12px; }
.mfp-logo { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.mfp-logo img { height: 44px; width: auto; display: block; }
.mfp-payoff { font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-2); }
.mfp-searchbar.d-md-flex { 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 */
.mfp-nav { border-bottom: 1px solid var(--line, #ece3d5); position: relative; }
.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; }
.mfp-macro-link { display: block; padding: 12px 8px; font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none; border-bottom: 3px solid transparent; transition: .15s; }
.mfp-macro:hover .mfp-macro-link { color: var(--brand-olive-dark); background: var(--brand-cream-soft); border-bottom-color: var(--brand-olive); }
.mfp-subpanel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line, #ece3d5); box-shadow: 0 24px 40px -24px rgba(28,17,10,.35); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .16s ease; z-index: 60; }
.mfp-macro:hover .mfp-subpanel, .mfp-macro:focus-within .mfp-subpanel { opacity: 1; visibility: visible; transform: none; }
.mfp-subpanel-inner { display: flex; align-items: center; gap: 34px; padding: 22px 0 26px; text-align: left; }
.mfp-subpanel-img { flex: none; width: 220px; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line, #ece3d5); }
.mfp-subpanel-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mfp-subpanel-lead { min-width: 180px; }
.mfp-subpanel-lead b { font-family: "Playfair Display", Georgia, serif; font-size: 19px; display: block; margin-bottom: 8px; }
.mfp-subpanel-all { font-size: 13px; color: var(--brand-olive-dark); font-weight: 600; text-decoration: none; }
.mfp-subpanel-subs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 30px; flex: 1; }
.mfp-subpanel-subs a { font-size: 13.5px; color: var(--text-2); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.mfp-subpanel-subs a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-sage); flex: none; }
.mfp-subpanel-subs a:hover { color: var(--brand-olive); }

/* Mainbar responsive: sotto xl il logo e le icone si compattano */
@media (max-width: 1199.98px) {
  .mfp-mainbar-inner { grid-template-columns: auto 1fr auto; }
}
@media (max-width: 767.98px) {
  .mfp-mainbar-inner { grid-template-columns: auto auto; justify-content: space-between; gap: 14px; }
  .mfp-logo img { height: 38px; }
}