/* =====================================================================
   BACCUSARDUS — GLOBAL DESIGN TOKENS
   ---------------------------------------------------------------------
   SOLO variabili globali + font del brand.
   NON ricostruire qui le sezioni: si fanno in Elementor Pro.
   Prefisso classi custom: bs-
   I valori replicano il design system originale (hero-sliders.css).
   ===================================================================== */

/* ---------- Font del brand ---------- */
/* IN PRODUZIONE: caricare Colossalis come Custom Font in Elementor Pro
   (Elementor → Custom Fonts). Questo @font-face e' un fallback tecnico del
   child theme; usa .woff2 (leggero) con fallback .ttf. */
@font-face {
  font-family: "Colossalis";
  src:
    url("../fonts/Colossalis-Medium.woff2") format("woff2"),
    url("../fonts/Colossalis-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Colossalis";
  src:
    url("../fonts/Colossalis-Bold.woff2") format("woff2"),
    url("../fonts/Colossalis-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variabili globali ---------- */
:root {
  /* Colori brand (mappare anche nei Global Colors di Elementor) */
  --bs-wine: #671b30;        /* Primario */
  --bs-wine-deep: #280a14;   /* Testo scuro su bottoni gold */
  --bs-gold: #e2ad46;        /* Accento / CTA */
  --bs-cream: #fff7ea;       /* Testo chiaro su sfondo scuro */
  --bs-paper: #fcf7ef;       /* Sfondo pagina */
  --bs-ink: #21191a;         /* Testo principale */
  --bs-muted: #74696a;       /* Testo secondario */
  --bs-line-light: rgba(255, 247, 234, 0.26);
  --bs-line-dark: rgba(103, 27, 48, 0.16);

  /* Tipografia (mappare anche nei Global Fonts di Elementor) */
  --bs-font-display: "Colossalis", Georgia, serif; /* Titoli / brand */
  --bs-font-body: Arial, Helvetica, sans-serif;    /* Testo */

  /* Spacing — ritmo verticale sezioni (S / M / L) */
  --bs-space-s: 60px;
  --bs-space-m: 92px;
  --bs-space-l: 132px;

  /* Layout */
  --bs-container: 1240px;
  --bs-gutter: 48px;         /* desktop */
  --bs-gutter-mobile: 18px;  /* <= 767px */

  /* Radius */
  --bs-radius: 4px;
  --bs-radius-round: 50%;
}

/* ---------- Gutter responsive (token, non layout) ---------- */
@media (max-width: 767px) {
  :root {
    --bs-gutter: var(--bs-gutter-mobile);
  }
}

/* ---------- Helper minimi (usare solo se Elementor non basta) ---------- */
/* Esempio di classe custom prefissata bs-. Tenere al minimo indispensabile.
   Le vere sezioni NON vanno qui: si costruiscono in Elementor. */
.bs-font-display {
  font-family: var(--bs-font-display);
}

/* ---------- Header: stati di sfondo (vedi 08-header.md) ---------- */
/* Header trasparente di default (impostato in Elementor). Qui solo i due stati
   che Elementor non gestisce nativamente. Nessun JS, nessun layout. */

/* Stato pieno chiaro: pagine senza hero scuro (classe a livello pagina). */
.bs-header-solid .bs-header {
  background: var(--bs-paper);
}
.bs-header-solid .bs-header,
.bs-header-solid .bs-header a,
.bs-header-solid .bs-brand {
  color: var(--bs-ink);
}

/* Stato sticky: dopo lo scroll, su tutte le pagine. */
.bs-header.elementor-sticky--effects {
  background: var(--bs-wine);
  transition: background 0.3s ease;
}

/* ---------- WooCommerce: coerenza brand ----------
   Stili per gli interni Woo (form, tabelle, qty, tab, account) che i widget
   Elementor non coprono. Solo token --bs-*. Bottoni principali gestiti
   dai controlli widget nei template 17-20. */

/* Bottoni Woo generici (qty, coupon, login, ecc.) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--bs-gold);
  color: var(--bs-wine-deep);
  border: 0;
  border-radius: var(--bs-radius);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: #cc9a3f;
  color: var(--bs-wine-deep);
}

/* Titoli interni Woo (Dettagli fatturazione, Riepilogo ordine, ecc.) */
.woocommerce h2,
.woocommerce h3,
.woocommerce-Address-title h3 {
  font-family: var(--bs-font-display);
  color: var(--bs-wine);
  text-transform: uppercase;
}

/* Campi form (checkout, account, coupon) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce .quantity .qty {
  background: var(--bs-cream);
  border: 1px solid var(--bs-line-dark);
  border-radius: 0;
  color: var(--bs-ink);
  min-height: 46px;
  padding: 0 12px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--bs-wine);
  outline: none;
}

/* Tabelle (carrello, totali, ordini account) */
.woocommerce table.shop_table {
  border: 1px solid var(--bs-line-dark);
  border-radius: 0;
}
.woocommerce table.shop_table th {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--bs-wine);
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  border-color: var(--bs-line-dark);
}

/* Prezzi */
.woocommerce .price,
.woocommerce ul.products li.product .price {
  color: var(--bs-wine);
}

/* Tab prodotto (Descrizione / Recensioni) */
.woocommerce-tabs ul.tabs li a {
  font-family: var(--bs-font-display);
  text-transform: uppercase;
  color: var(--bs-wine);
}
.woocommerce-tabs ul.tabs li.active a {
  border-bottom: 2px solid var(--bs-gold);
}

/* Navigazione My Account */
.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 16px;
  border: 1px solid var(--bs-line-dark);
  margin-bottom: 8px;
  color: var(--bs-wine);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--bs-wine);
  color: var(--bs-cream);
}

/* Notice (messaggi, errori, info) */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--bs-gold);
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--bs-gold);
}
.woocommerce-error {
  border-top-color: var(--bs-wine);
}

/* ---------- Slider home: cluster UI come l'originale ----------
   [freccia sx][3 tab numerati][freccia dx] in flusso normale, in basso a
   sinistra dell'hero. Frecce e tab sono elementi Elementor reali collegati
   allo Swiper da assets/js/baccusardus.js (che attiva anche il fade). */

/* Wrapper tab: largo quanto i tab (i container Elementor nascono al 100%
   e il bordo sforerebbe oltre lo schermo) */
.bs-slide-tabs {
  width: fit-content !important;
}

/* Tab: stato attivo (replica .showcase-tab.is-active) e interazione */
.bs-slide-tab {
  cursor: pointer;
  transition: background 0.2s ease;
}
.bs-slide-tab.is-active {
  background: var(--bs-cream);
}
.bs-slide-tab.is-active .elementor-widget-heading:last-child .elementor-heading-title {
  color: var(--bs-wine) !important;
}

/* Pagination nativa: nascosta su desktop (la sostituiscono i tab),
   trattini semplici su mobile (come .slide-dot a 767px) */
@media (min-width: 768px) {
  .bs-hero-slider .swiper-pagination {
    display: none;
  }
}
@media (max-width: 767px) {
  .bs-hero-slider .swiper-pagination-bullet {
    width: 19px;
    height: 3px;
    border-radius: 0;
    background: rgba(255, 247, 234, 0.34);
    opacity: 1;
  }
  .bs-hero-slider .swiper-pagination-bullet-active {
    background: var(--bs-gold);
  }
}