/* Integrazione nel template Piscineitalia, dopo corpo.css e il CSS della campagna.
   Tutte le regole sono limitate alla pagina Black Friday o al suo contenitore. */
.bf26-page { --bf26-inset-sito: 30px; }
.bf26-page #corpo_centrale_colonna_dx { min-width: 0; padding-bottom: 0; }
.bf26-page .bf26-site-home { font-size: 18px; }
.bf26-page .bf26-site-breadcrumb-arrow { margin-inline: 5px; }
.bf26-page #corpo_centrale_colonna_dx > #volantino.bf26-host {
  width: calc(100% + var(--bf26-inset-sito) * 2);
  max-width: none; min-width: 0;
  margin: 0 calc(-1 * var(--bf26-inset-sito)); padding: 0;
  box-sizing: border-box;
  container-type: inline-size; container-name: bf26layout;
}
.bf26-host #categoria_titolo.bf26-legacy-anchor {
  display: block; height: 0; min-height: 0; margin: 0; padding: 0; border: 0;
}
.bf26-host .bf26 { min-width: 0; }

/* corpo.css passa da 30px a 5px per lato fino a 1200px.
   Recuperare sempre 30px taglierebbe il contenuto sui tablet e sui telefoni. */
@media (max-width: 1200px) {
  .bf26-page { --bf26-inset-sito: 5px; }
}

/* L'impaginazione segue la colonna che ospita la campagna.
   Il fallback a griglia automatica funziona anche senza container query. */
.bf26-host .bf-tavole { grid-template-columns: repeat(auto-fit, minmax(min(245px, 100%), 1fr)); }
.bf26-host .bf-prodotti { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.bf26-host .bf-sezione-testa { flex-wrap: wrap; }
.bf26-host .bf-sezione-testa > h2 { min-width: 0; }
.bf26-host .bf-prodotto-piede { flex-wrap: wrap; }

@supports (container-type: inline-size) {
  .bf26-host .bf26 { --pad: clamp(20px, 5cqw, 78px); }
  .bf26-host .bf-hero-interno { min-height: clamp(560px, 43cqw, 670px); }
  .bf26-host .bf-hero-corpo { column-gap: clamp(22px, 4cqw, 66px); }
  .bf26-host .bf-hero h1 { font-size: clamp(88px, 8.3cqw, 145px); }
  .bf26-host .bf-lead { font-size: clamp(15px, 1.32cqw, 20px); }
  .bf26-host .bf-sezione { padding-block: clamp(44px, 5.6cqw, 88px); }
  .bf26-host .bf-sezione h2 { font-size: clamp(40px, 4.7cqw, 76px); }
  .bf26-host .bf-tavola-disegno { height: clamp(104px, 10cqw, 153px); }
  .bf26-host .bf-tavola-fondo { font-size: clamp(18px, 1.65cqw, 26px); }
  .bf26-host .bf-prodotto h3 { font-size: clamp(18px, 1.55cqw, 24px); }
  .bf26-host .bf-prevendite h2 { font-size: clamp(30px, 3cqw, 49px); }
  .bf26-host .bf-faq h2 { font-size: clamp(40px, 4.3cqw, 68px); }
}

@container bf26layout (min-width: 840px) {
  .bf26-host .bf-tavole, .bf26-host .bf-prodotti { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container bf26layout (min-width: 701px) and (max-width: 960px) {
  .bf26-host .bf-hero-corpo { column-gap: 18px; }
  .bf26-host .bf-hero h1 { font-size: clamp(82px, 10cqw, 103px); }
}
@container bf26layout (max-width: 839px) {
  .bf26-host .bf-tavole { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf26-host .bf-sezione-testa { align-items: flex-start; flex-direction: column; gap: 12px; }
  .bf26-host .bf-sezione-testa > p { max-width: 60ch; }
  .bf26-host .bf-etichetta-indice { display: none; }
  .bf26-host .bf-indice-riga { justify-content: space-between; gap: 12px; }
}
@container bf26layout (max-width: 700px) {
  .bf26-host .bf26 { --pad: 20px; }
  .bf26-host .bf-hero-interno { min-height: 545px; }
  .bf26-host .bf-hero h1 { font-size: clamp(79px, 16cqw, 108px); }
  .bf26-host .bf-testatina { min-height: 55px; }
  .bf26-host .bf-marca { font-size: 17px; }
  .bf26-host .bf-folio { font-size: 8px; gap: 6px; letter-spacing: .08em; }
  .bf26-host .bf-hero-corpo { gap: 0; }
  .bf26-host .bf-apertura { padding: 100px 0 22px; }
  .bf26-host .bf-hero-foto { height: 75%; }
  .bf26-host .bf-hero::after {
    background: linear-gradient(0deg, #0f1916 15%, #0f1916 26%, rgba(9,21,18,.77) 49%, rgba(8,18,16,.04) 82%, rgba(8,16,14,.45));
  }
  .bf26-host .bf-evento { width: 100%; margin: 0 0 22px; padding: 18px; }
  .bf26-host .bf-faq-interno { gap: 21px; }
  .bf26-host .bf-faq h2 em { display: inline; }
}
@container bf26layout (max-width: 540px) {
  .bf26-host .bf-prodotti { grid-template-columns: minmax(0, 1fr); }
  .bf26-host .bf-tavole { gap: 8px; }
  .bf26-host a.bf-tavola { padding: 11px; }
  .bf26-host .bf-tavola-disegno { height: clamp(65px, 20cqw, 100px); }
  .bf26-host .bf-tavola-fondo { min-height: 35px; font-size: 15px; }
  .bf26-host .bf-tavola-indice { font-size: 8px; }
  .bf26-host .bf-tavola-indice > span + span { display: none; }
  .bf26-host .bf-cerchio { width: 21px; height: 21px; }
  .bf26-host .bf-cerchio .bf-icon { width: 12px; height: 12px; }
  .bf26-host .bf-indice a { font-size: 12px; gap: 5px; }
  .bf26-host .bf-indice small { font-size: 8px; }
  .bf26-host .bf-pagine-nav { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 8px 4px; width: 100%; }
  .bf26-host .bf-numeri { grid-column: 1 / -1; grid-row: 1; }
  .bf26-host .bf-pagine-passi { grid-row: 2; }
  .bf26-host .bf-pag-link { min-width: 32px; min-height: 42px; padding-inline: 8px; font-size: 12px; }
}
@container bf26layout (max-width: 360px) {
  .bf26-host .bf26 { --pad: 14px; }
  .bf26-host .bf-folio { font-size: 7px; }
  .bf26-host .bf-indice a { font-size: 11px; }
  .bf26-host .bf-tavola-fondo { font-size: 14px; }
}


/* ==========================================================
   BLACK FRIDAY 2026 — CARD HERO / TESTO / COUNTDOWN
   Aggiunto in fondo al CSS di integrazione (caricato per ultimo).
   Non modifica i testi o la logica del calendario.
   ========================================================== */

.bf26-host .bf-evento {
  display: flex;
  flex-direction: column;
  flex: 0 1 430px;
  width: 430px;
  max-width: 100%;
  min-height: 450px;
  align-self: center;
  margin: 20px 0 38px;
  padding: 28px 30px 26px;
  border-color: rgba(224, 195, 149, .42);
  background: linear-gradient(145deg, rgba(13, 32, 27, .98), rgba(12, 27, 23, .96));
  box-shadow: 0 20px 55px rgba(0, 0, 0, .22);
}

.bf26-host .bf-evento-occhiello {
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .14em;
}

.bf26-host .bf-evento h2 {
  margin: 10px 0 16px;
  font-size: clamp(31px, 2.25vw, 40px);
  line-height: 1.08;
}

.bf26-host .bf-evento-testo {
  max-width: none;
  font-size: 15px;
  line-height: 1.67;
}

.bf26-host .bf-evento-scadenza {
  margin-top: auto;
  padding-top: 18px;
}

.bf26-host .bf-cifre {
  margin-top: 12px;
}

/* Tablet / hero più stretta */
@container bf26layout (min-width: 701px) and (max-width: 960px) {
  .bf26-host .bf-evento {
    flex-basis: 39%;
    width: 100%;
    max-width: 355px;
    min-height: 405px;
    margin: 18px 0 28px;
    padding: 22px;
  }

  .bf26-host .bf-evento h2 {
    margin-bottom: 12px;
    font-size: clamp(29px, 3.4cqw, 35px);
  }

  .bf26-host .bf-evento-testo {
    font-size: 14px;
    line-height: 1.6;
  }
}

/* Smartphone: l'altezza segue il contenuto, senza tagli o sovrapposizioni */
@media (max-width: 700px) {
  .bf26-host .bf-evento {
    flex: auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    align-self: stretch;
    margin: 0 0 22px;
    padding: 21px 20px 22px;
  }

  .bf26-host .bf-evento h2 {
    margin: 8px 0 13px;
    font-size: 32px;
  }

  .bf26-host .bf-evento-testo {
    font-size: 14px;
    line-height: 1.65;
  }

  .bf26-host .bf-evento-scadenza {
    margin-top: 20px;
    padding-top: 16px;
  }
}

/* Vale anche quando il viewport è largo ma il contenitore della pagina è stretto. */
@container bf26layout (max-width: 700px) {
  .bf26-host .bf-evento {
    flex: auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    align-self: stretch;
    margin: 0 0 22px;
    padding: 21px 20px 22px;
  }

  .bf26-host .bf-evento h2 {
    margin: 8px 0 13px;
    font-size: 32px;
  }

  .bf26-host .bf-evento-testo {
    font-size: 14px;
    line-height: 1.65;
  }

  .bf26-host .bf-evento-scadenza {
    margin-top: 20px;
    padding-top: 16px;
  }
}