/* =========================================================================
   Tesselo — design system estivo (skin sul tema padre Pricom)
   Token + mapping sui selettori reali: Pricom (.button, .haru-btn-buy-now,
   .haru-header*), Elementor (.elementor-button, .elementor-heading-title),
   WooCommerce (.single_add_to_cart_button, li.product). Mobile-first.
   ========================================================================= */

:root {
  /* Base ecosistema */
  --ts-navy:    #0E1822;  /* testo/titoli scuri */
  --ts-cream:   #ECE9DE;  /* sfondi morbidi */
  /* Accenti estivi */
  --ts-coral:   #E85F24;  /* primario / CTA */
  --ts-teal:    #1D9E75;  /* consegna / positivo */
  --ts-amber:   #F4A300;  /* energia / estate */
  --ts-magenta: #EC4899;  /* esclusività */
  --ts-radius:  14px;
}

/* --- Tipografia ---------------------------------------------------------- */
body,
.haru-body,
.elementor-widget-text-editor,
p { color: var(--ts-navy); font-family: 'Poppins', sans-serif; }

h1, h2, h3, h4,
.elementor-heading-title,
.haru-heading-title,
.site-title,
.wp-block-site-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: 'Fredoka', 'Poppins', sans-serif;
  /* Fredoka ha pesi reali (400-700): per i titoli usiamo 600, che mantiene il
     carattere rotondo/giovane ma resta nitido e leggibile, senza l'effetto
     "gonfio" e poco leggibile del vecchio Lilita One (display molto pesante). */
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--ts-navy);
}

/* Titolo prodotto (scheda prodotto): leggermente meno pesante e ariosità extra
   per massima leggibilità sul nome lungo del prodotto personalizzato. */
.product_title,
.woocommerce-loop-product__title {
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
}

/* --- Bottoni primari (selettori reali Pricom/Elementor/WooCommerce) ------ */
.button,
.btn,
.elementor-button,
.single_add_to_cart_button,
.haru-btn-buy-now,
button.wp-element-button,
.wp-block-button__link,
.added_to_cart {
  background: var(--ts-coral) !important;
  border-color: var(--ts-coral) !important;
  border-radius: var(--ts-radius) !important;
  color: #fff !important;
  transition: transform .12s ease, filter .12s ease;
}
.button:hover,
.btn:hover,
.elementor-button:hover,
.single_add_to_cart_button:hover,
.haru-btn-buy-now:hover,
button.wp-element-button:hover,
.wp-block-button__link:hover,
.added_to_cart:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

/* --- Link / accenti ------------------------------------------------------ */
a { color: var(--ts-coral); }
a:hover { color: var(--ts-amber); }

/* --- Badge / pill -------------------------------------------------------- */
.ts-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.6;
  background: var(--ts-cream); color: var(--ts-coral);
}
.ts-badge--teal    { background: rgba(29,158,117,.12);  color: var(--ts-teal); }
.ts-badge--amber   { background: rgba(244,163,0,.14);   color: #9a6800; }
.ts-badge--magenta { background: rgba(236,72,153,.12);  color: var(--ts-magenta); }

/* --- Card prodotto: colore vivace + micro-interazione hover -------------- */
ul.products li.product,
.haru-product,
.elementor-widget-woocommerce-products li.product {
  border-radius: var(--ts-radius);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
ul.products li.product:hover,
.haru-product:hover,
.elementor-widget-woocommerce-products li.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(14,24,34,.12);
}
ul.products li.product img,
.haru-product img { border-radius: var(--ts-radius) var(--ts-radius) 0 0; }

/* Prezzo prodotto in coral */
.price, .woocommerce-Price-amount { color: var(--ts-coral); font-weight: 600; }

/* --- Sezioni a sfondo morbido (utility opzionale per la home) ------------ */
.ts-section--cream { background: var(--ts-cream); }
.ts-section--coral { background: var(--ts-coral); color: #fff; }
.ts-section--coral h1, .ts-section--coral h2, .ts-section--coral h3 { color: #fff; }

/* --- Header sticky (Pricom) --------------------------------------------- */
.haru-header.haru-header--sticky,
.haru-header--sticky { box-shadow: 0 2px 14px rgba(14,24,34,.08); }

/* --- Mobile-first: target tap >= 44px, hero leggibile su small ----------- */
@media (max-width: 767px) {
  .button, .btn, .elementor-button,
  .single_add_to_cart_button, .haru-btn-buy-now {
    width: 100%; text-align: center; min-height: 44px;
  }
  h1, .elementor-heading-title { font-size: clamp(1.8rem, 7vw, 2.6rem); line-height: 1.1; }
}

/* --- Onboarding / condivisione / consegna (plugin tesselo-pod) ----------- */
.tesselo-shipping-badge { margin: 8px 0; }
.tesselo-share-prompt { margin: 14px 0; padding: 12px 14px; border-radius: var(--ts-radius); background: var(--ts-cream); }
.tesselo-share-prompt p { margin: 0 0 8px; font-weight: 600; }
.tesselo-share-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.ts-share-link { display:inline-flex; align-items:center; padding:8px 14px; border-radius:999px; background:var(--ts-coral); color:#fff !important; font-size:.9rem; border:0; cursor:pointer; text-decoration:none; }
.ts-share-link:hover { filter: brightness(.95); }
.tesselo-reassurance { margin-top:10px; font-size:.9rem; color:#555; }
.tesselo-required { font-weight:500; }

/* Il widget chat Tesselo (#tsl-chat, in basso a destra) copriva il pulsante
   "torna su" del tema (.back-to-top), nello stesso angolo. Spostiamo il
   back-to-top flottante a SINISTRA della chat: cambiando solo `right` restano
   affiancati e cliccabili in tutti gli stati (anche quando il tema alza il
   bottone con .has-bottom-sticky sulle schede prodotto, dove cambia solo il
   `bottom`). Il back-to-top dentro la sticky bar prodotto
   (.single-product-sticky__top .back-to-top) ha specificità maggiore e NON è
   toccato. */
.back-to-top { right: 96px; }
@media screen and (max-width: 480px) { .back-to-top { right: 84px; } }

/* =========================================================================
   Titoli prodotto (shop/archivi/correlati): Lilita One è un display pesante e
   su nomi lunghi diventa poco leggibile -> Poppins 600: bold ma pulito.
   ========================================================================= */
.woocommerce-loop-product__title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.3;
}

/* =========================================================================
   Breadcrumb on-brand su TUTTE le pagine con barra titolo (escluse quelle con
   hero-immagine, dove il tema usa testo bianco). Da "Home — Shop" grigio/basico
   a una pill brand con chevron. Token in :root.
   ========================================================================= */
.haru-page-title:not(.has-bg-image) { background-color: var(--ts-cream); }
.haru-page-title:not(.has-bg-image) .haru-breadcrumb {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px;
  padding: 8px 18px; border-radius: 999px; background: #fff;
  box-shadow: 0 4px 14px rgba(14,24,34,.07);
  font-family: 'Poppins', sans-serif; font-size: .92rem; line-height: 1.2;
}
.haru-page-title:not(.has-bg-image) .haru-breadcrumb a { color: var(--ts-navy); text-decoration: none; font-weight: 500; }
.haru-page-title:not(.has-bg-image) .haru-breadcrumb a:hover { color: var(--ts-coral); }
.haru-page-title:not(.has-bg-image) .haru-breadcrumb span.current:last-child { color: var(--ts-coral); font-weight: 600; }
.haru-page-title:not(.has-bg-image) .haru-breadcrumb .delimiter { margin: 0 3px; }
.haru-page-title:not(.has-bg-image) .haru-breadcrumb .delimiter:before {
  content: '\203A'; width: auto; height: auto; background: none; top: 0; margin: 0;
  color: rgba(14,24,34,.4); font-weight: 600; font-size: 1.05rem;
}

/* =========================================================================
   Pagine guida (personalizzazione 17611, chi-siamo 17610, contatti 17612):
   fondo a rombi on-brand al posto degli spazi bianchi. Riproduce il pattern
   "argyle" gia' usato nel contenuto, con i token brand (teal + corallo) su crema.
   ========================================================================= */
body.page-id-17611, body.page-id-17610, body.page-id-17612 { background-color: var(--ts-cream); }
body.page-id-17611 #haru-main,
body.page-id-17610 #haru-main,
body.page-id-17612 #haru-main {
  background-color: var(--ts-cream);
  background-image: repeating-conic-gradient(from 45deg at 50% 50%, rgba(29,158,117,.10) 0deg 90deg, rgba(232,95,36,.10) 90deg 180deg);
  background-size: 72px 72px;
}

/* =========================================================================
   Pagina prodotto singolo — pulsanti "a pillola" coerenti con la breadcrumb
   (pill bianca, raccordi tondi, ombra morbida) e leggibilita' del contenuto.
   La regola globale `.button{background:coral!important}` (sopra) appiattiva il
   bottone "Confronta" del tema — pensato come testo+icona trasparente — in un
   riquadro corallo con `padding:0`: testo schiacciato e attaccato al margine.
   Qui ridiamo respiro a tutti i CTA e rendiamo "Confronta" una pillola
   secondaria (bianca, bordo corallo) ben distinta dai CTA primari.
   ========================================================================= */

/* --- CTA primari: Personalizza + Aggiungi al carrello -> pillola corallo ---- */
.single-product-top .tesselo-customize,
.single-product-top form.cart .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
  line-height: 1.2 !important;
  box-shadow: 0 6px 18px rgba(232,95,36,.22);
}
.single-product-top .tesselo-customize:hover,
.single-product-top form.cart .single_add_to_cart_button:hover {
  box-shadow: 0 8px 22px rgba(232,95,36,.30);
  transform: translateY(-1px);
}
/* "Personalizza" e' un'azione secondaria-primaria: non a tutta larghezza,
   cosi' resta a fianco del badge consegna come nello screenshot "ok". */
.single-product-top .tesselo-customize { width: auto !important; }

/* --- "Confronta" (yith compare) -> pillola secondaria bianca, leggibile ----- */
.single-product-top .product-button--compare { margin-left: 16px; }
.single-product-top .product-button--compare a.button.compare {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: auto !important;
  min-height: 50px;
  line-height: 1.2 !important;
  padding: 12px 22px !important;
  background: #fff !important;
  border: 2px solid var(--ts-coral) !important;
  color: var(--ts-coral) !important;
  border-radius: 999px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(14,24,34,.07);
  transition: all .2s ease;
}
.single-product-top .product-button--compare a.button.compare:before {
  margin-right: 0; /* il gap gestisce gia' lo spazio icona-testo */
  font-size: 18px;
}
/* La label "Confronta" e' nel tema un tooltip nascosto: la mostriamo inline. */
.single-product-top .product-button--compare a.button.compare .button-tooltip {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  background: none !important;
  box-shadow: none !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  font: inherit !important;
  white-space: nowrap;
}
.single-product-top .product-button--compare a.button.compare .button-tooltip:after { display: none !important; }
.single-product-top .product-button--compare a.button.compare:hover {
  background: var(--ts-coral) !important;
  color: #fff !important;
  border-color: var(--ts-coral) !important;
  transform: translateY(-1px);
}

/* --- Nota prezzo "per singolo prodotto" -> chip morbida e leggibile -------- */
.single-product-top #tesselo-price-note {
  display: inline-block;
  margin: 12px 0 4px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: var(--ts-cream) !important;
  color: var(--ts-navy) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
.single-product-top #tesselo-price-note #tesselo-price-total { color: var(--ts-coral) !important; }

/* =========================================================================
   Condivisione social: l'icona X/Twitter usa il glifo Font Awesome 6 (\e9ca),
   assente nel font "Font Awesome 5 Brands" effettivamente caricato -> rendeva
   un quadratino/nulla (invisibile). La sostituiamo con la lettera 𝕏 (carattere
   Unicode reale, U+1D54F) resa con un font di sistema: sempre visibile.
   ========================================================================= */
.haru-social-share__twitter a:before {
  content: '\01D54F' !important;            /* 𝕏 */
  font-family: 'Poppins', 'Arial', sans-serif !important;
  font-weight: 700 !important;
}

/* =========================================================================
   Shop: barra filtri/conteggio risultati senza sovrapposizioni
   ------------------------------------------------------------------------
   Il tema padre posiziona ".woocommerce-result-count" in absolute
   (right:0; top:8px) dentro ".shop-filter". Su schermi stretti il testo
   "Visualizzazione di 1-12 di N risultati" finiva SOPRA il pulsante
   "Mostra filtri". Lo riportiamo nel normale flusso così va a capo da solo
   e non si sovrappone mai, a qualsiasi larghezza di schermo.
   ========================================================================= */
.shop-filter .woocommerce-result-count,
.shop-filter.hidden-fixed .woocommerce-result-count,
.shop-filter.hidden-toggle .woocommerce-result-count {
  position: static !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin-right: 16px !important;
}

/* Permette al pulsante filtri e al catalogo di andare a capo invece di
   sovrapporsi quando lo spazio orizzontale non basta. */
.shop-filter {
  flex-wrap: wrap !important;
  row-gap: 10px;
}
.shop-filter__sidebar-btn,
.shop-filter__sidebar-btn.hidden-on-desktop {
  max-width: 100%;
}
.shop-filter__catalog {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* Su mobile la barra usa display:block nel tema padre: rendiamola flex in
   colonna così pulsante, conteggio e ordinamento si impilano in modo pulito. */
@media screen and (max-width: 767px) {
  .shop-filter,
  .shop-filter.hidden-fixed {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
  }
  .shop-filter__catalog,
  .shop-filter.hidden-fixed .shop-filter__catalog {
    width: 100%;
    margin-top: 6px !important;
  }
}