/**
 * =====================================================
 * Vetrineshop — Trust Layer
 * Badge verificato, trust prodotto, CTA WhatsApp
 * Creato: 2026-04-14
 * =====================================================
 */


/* =====================================================
   🔖 BADGE TRUST (BASE)
===================================================== */

.vs-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 5px 10px;

  border-radius: 999px;
  border: 1px solid #e7e1d8;

  background: #ffffff;
  color: #111;

  font-size: 12px;
  font-weight: 600;
  line-height: 1;

  white-space: nowrap;
}

.vs-trust-badge__icon {
  font-size: 12px;
  line-height: 1;
}


/* =====================================================
   🔖 BADGE TRUST — PLUS
===================================================== */

.vs-trust-badge--plus {
  background: #111;
  color: #fff;
  border-color: #111;
}


/* =====================================================
   🔖 BADGE WRAPPER
===================================================== */

.vs-trust-badge-wrap {
  margin-top: 8px;
}

.vs-trust-badge-wrap--single-shop {
  margin-top: 10px;
}

.vs-trust-badge-wrap--fascione {
  margin-top: 6px;
}


/* =====================================================
   🔖 BADGE COMPACT (liste / fascioni)
===================================================== */

.vs-trust-badge--compact {
  padding: 4px 8px;
  font-size: 11px;
}


/* =====================================================
   🛍️ TRUST PRODOTTO (derivato dal negozio)
===================================================== */

.vs-product-trust {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  margin-top: 6px;

  font-size: 12px;
  font-weight: 500;
  color: #555;
}

.vs-product-trust__icon {
  font-size: 12px;
}

.vs-product-trust--compact {
  font-size: 11px;
}


/* =====================================================
   📱 CTA WHATSAPP
===================================================== */

.vs-btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 8px 14px;

  border-radius: 8px;

  background: #25D366;
  color: #fff;

  text-decoration: none;
  font-weight: 600;
  font-size: 13px;

  transition: all 0.2s ease;
}

.vs-btn-whatsapp:hover {
  background: #1ebe5d;
  color: #fff;
}

.vs-btn-whatsapp:active {
  transform: translateY(1px);
}


/* =====================================================
   📱 CTA WHATSAPP — versione light (inline)
===================================================== */

.vs-btn-whatsapp--inline {
  padding: 0;
  background: transparent;
  color: #25D366;
  font-weight: 500;
}

.vs-btn-whatsapp--inline:hover {
  text-decoration: underline;
}


/* =====================================================
   📱 MOBILE TWEAKS
===================================================== */

@media (max-width: 768px) {

  .vs-trust-badge {
    font-size: 11px;
    padding: 4px 8px;
  }

  .vs-product-trust {
    font-size: 11px;
  }

  .vs-btn-whatsapp {
    font-size: 12px;
    padding: 7px 12px;
  }

}
.btn-azione.btn-whatsapp,
.btn-azione.btn-whatsapp:hover {
  color: #fff;
  text-decoration: none;
}

.btn-azione.btn-whatsapp i,
.btn-azione.btn-whatsapp svg,
.btn-azione.btn-whatsapp .lucide {
  color: #fff;
  stroke: currentColor;
}
.btn-azione.btn-whatsapp span {
  color: #fff;
}
.btn-azione.btn-whatsapp,
.btn-azione.btn-whatsapp:hover,
.btn-azione.btn-whatsapp:focus,
.btn-azione.btn-whatsapp:visited {
  color: #fff !important;
  text-decoration: none !important;
}

.btn-azione.btn-whatsapp svg,
.btn-azione.btn-whatsapp svg *,
.btn-azione.btn-whatsapp .lucide,
.btn-azione.btn-whatsapp .lucide *,
.btn-azione.btn-whatsapp i {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  opacity: 1 !important;
}

/**
 * =====================================================
 * 🏷️ Vetrineshop — Trust Badge (Single Negozio)
 * =====================================================
 *
 * Scopo:
 * Badge "Verificato da Vetrineshop" e "Verificato Plus"
 * posizionato accanto al titolo negozio.
 *
 * Note:
 * - Il badge BASE usa tonalità calda editoriale (avorio)
 * - Il badge PLUS usa tono premium (nero pieno)
 * - Separato visivamente dalle pill categorie
 *
 * Data: 2026-04-14
 * =====================================================
 */


/* =====================================================
   Layout titolo + badge (inline)
===================================================== */

.vs-shop-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.vs-trust-badge-wrap--title-inline {
  margin-top: 0;
}

.vs-trust-badge-wrap--title-inline .vs-trust-badge {
  padding: 7px 12px;
  font-size: 13px;
}


/* =====================================================
   Badge — BASE (Verificato)
   Tonalità calda, editoriale, distinta dalle categorie
===================================================== */

.vs-trust-badge--base {
  background: #f6f1e7;
  color: #3b2f1f;
  border-color: #d8c7a6;
}


/* =====================================================
   Badge — PLUS (Verificato Plus)
   Tonalità premium, alta autorità
===================================================== */

.vs-trust-badge--plus {
  background: #111;
  color: #fff;
  border-color: #111;
}
/* =========================================
   Single negozio — titolo + badge inline
   Badge dentro l'h1, non come fratello
========================================= */

.vs-shop-title-inline {
  margin: 0;
}

.vs-shop-title-inline .vs-shop-title-text {
  display: inline;
}

.vs-shop-title-inline .vs-trust-badge-wrap--title-inline {
  display: inline-block;
  margin-left: 8px;
  vertical-align: baseline;
}

.vs-shop-title-inline .vs-trust-badge-wrap--title-inline .vs-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  position: relative;
  top: -8px;
}
@media (max-width: 768px) {
  .vs-shop-title-inline .vs-trust-badge-wrap--title-inline .vs-trust-badge {
    top: -8px;
  }
}

/**
 * =====================================================
 * 🛍️ Product card — seller trust
 * =====================================================
 */

.vs-product-seller {
  margin-top: 6px;
  font-size: 13px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.vs-product-seller-label {
  opacity: 0.7;
}

.vs-product-seller-name {
  font-weight: 500;
  color: #111;
  text-decoration: none;
}

.vs-product-trust-inline .vs-trust-badge {
  padding: 4px 8px;
  font-size: 11px;
}
.vs-trust-badge__text {
  letter-spacing: 0.025em !important;
}