/* =========================================================
   BLACK FRIDAY — base & palette
   ========================================================= */ :root {
    --bf-teal: #0d7a81;
    --bf-midnight: #0b1a1d;
    --bf-midnight-2: #0f2226;
    --bf-gold-1: #f2c04c;
    --bf-gold-2: #d79a24;
    --bf-text: #e9eef0;
    --bf-muted: #a5b6bb;
    --bf-blue-cta: #3c8df7;
    --bf-shadow: 0 10px 34px rgba(0, 0, 0, .38);
    --bf-r: 18px;
}
.bf {
    color: var(--bf-text);
}
.bf-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}
/* Sezione a tutta-larghezza che “esce” dal contenitore del template */
.bf-fullbleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
/* =========================================================
   HERO
   ========================================================= */
.bf-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 7vw, 110px) 20px 68px;
    background: linear-gradient(180deg, var(--bf-midnight), var(--bf-midnight-2));
}
.bf-hero--water::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/black-friday/img/water-texture.jpg") center/cover no-repeat;
    mix-blend-mode: overlay;
    opacity: .18;
    pointer-events: none;
}
.bf-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.bf-kicker {
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--bf-muted);
    margin: 0 0 8px;
}
.bf-title {
    margin: 0 0 8px;
    line-height: 1.03;
}
.bf-title__gold {
    display: block;
    font-weight: 800;
    font-size: clamp(40px, 7vw, 92px);
    background: linear-gradient(90deg, var(--bf-gold-1), var(--bf-gold-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: bf-shimmer 3s ease-in-out infinite;
    text-shadow: 0 6px 30px rgba(242, 192, 76, .20), 0 2px 8px rgba(242, 192, 76, .15);
}
.bf-title__sub {
    display: block;
    font-size: clamp(20px, 2.6vw, 36px);
    font-weight: 600;
}
.bf-hero__desc {
    max-width: 740px;
    margin: 12px auto 24px;
    color: var(--bf-muted);
}
@keyframes bf-shimmer {
    0%, 100% {
        filter: brightness(1)
    }
    50% {
        filter: brightness(1.12)
    }
}
.bf-cta-group {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.bf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.bf-btn:active {
    transform: translateY(1px);
}
.bf-btn--primary {
    background: var(--bf-blue-cta);
    color: #fff;
    box-shadow: var(--bf-shadow);
}
.bf-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
}
.bf-countdown {
    margin-top: 14px;
    font-weight: 700;
}
.bf-countdown__time {
    padding: .35rem .6rem;
    border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
}
/* =========================================================
   STRIP informativa
   ========================================================= */
.bf-strip {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    /*background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));*/
    background: #252525;
    border-top: 1px solid rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(0, 0, 0, .25);
    color: #d8e3e7;
}
.bf-strip__pill {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    font-size: .85rem;
}
.bf-strip--sticky {
    position: sticky;
    top: 0;
    z-index: 5;
}
/* =========================================================
   Titolo sezione
   ========================================================= */
.bf-section-title {
    max-width: 1200px;
    margin: 0 auto 18px;
    padding: 0 16px;
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 800;
    letter-spacing: .02em;
    color: #e8edf0;
}
/* =========================================================
   VOLANTINO — griglia e card (non tocco markup/link)
   ========================================================= */
.bf--volantino {
    background: linear-gradient(180deg, var(--bf-midnight), var(--bf-midnight-2));
    padding-block: 32px 72px;
}
.bf--volantino #volantino_BF {
    padding: 0 16px;
}
.bf--volantino #volantino_BF_elementi {
    margin-inline: auto;
    max-width: 1280px;
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    align-items: stretch;
}
/* mobile: permetti colonne più strette */
@media (max-width:640px) {
    .bf--volantino #volantino_BF_elementi {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 22px;
    }
}
.bf--volantino .volantino_BF_elemento {
    position: relative;
    margin: 0 !important;
    float: none !important;
    overflow: hidden;
    border-radius: 18px;
    background: radial-gradient(120% 120% at 50% 0%, #0f2327 0%, #0b1a1d 60%);
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .38);
    transform: translateZ(0);
    isolation: isolate;
}
.bf--volantino .volantino_BF_elemento > a {
    display: block;
    height: 100%;
}
/* immagine verticale ampia */
.bf--volantino .volantino_BF_elemento img {
    width: 100% !important;
    height: auto;
    display: block;
    border: 0;
    aspect-ratio: 4 / 4.8;
    object-fit: cover;
    transition: transform .35s ease, filter .35s ease, box-shadow .35s ease;
}
/* hover/focus premium */
/*.bf--volantino .volantino_BF_elemento:hover {
    translate: 0 -4px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .50);
}*/
.bf--volantino .volantino_BF_elemento:hover img {
    transform: scale(1.035);
    filter: saturate(1.06) contrast(1.03);
}
.bf--volantino .volantino_BF_elemento a:focus-visible {
    outline: 2px solid #58a6ff;
    outline-offset: 4px;
    border-radius: 14px;
}
/* entry reveal */
.bf-io {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .45s ease, transform .45s ease;
}
.bf-io.is-in {
    opacity: 1;
    transform: none;
}
/* =========================================================
   Banner legacy orizzontali
   ========================================================= */
.bf .legacy-banner img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: var(--bf-shadow);
}
/* === FIX 1: Strip full-bleed e più scuro === */
.bf-strip {
    /*background: linear-gradient(180deg, rgba(8,16,18,.75), rgba(8,16,18,.55));*/
    background: #252525;
    border-top: 1px solid rgba(255, 255, 255, .05);
    border-bottom: 1px solid rgba(0, 0, 0, .35);
}
.bf-strip.bf-fullbleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
/* === FIX 2: Card del volantino che riempiono le celle grid === */
/* il CSS storico assegna width/float/margini: li annulliamo qui */
.bf--volantino .volantino_BF_elemento {
    width: 100% !important; /* occupa tutta la colonna della grid */
    min-width: 0; /* evita overflow interni */
    height: 100%;
    margin: 0 !important;
    float: none !important;
    display: block; /* assicurati che non resti inline */
}
/* annulla margini legacy sull’immagine */
.bf--volantino .volantino_BF_elemento img {
    margin: 0 !important;
}
/* griglia leggermente più densa su desktop larghi */
@media (min-width: 1280px) {
    .bf--volantino #volantino_BF_elementi {
        max-width: 1320px;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    }
}
/* mobile: consenti 2 colonne comode */
@media (max-width: 640px) {
    .bf--volantino #volantino_BF_elementi {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 22px;
    }
}
/* --- 0) evita scroll orizzontale globale (senza rompere sticky) --- */
html, body {
    overflow-x: clip;
}
/* --- 1) reset del full-bleed su mobile: niente 100vw “truccato” --- */
@media (max-width: 768px) {
    .bf-fullbleed {
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
    }
}
/* --- 2) hero più compatto su telefoni --- */
@media (max-width: 600px) {
    .bf-hero {
        padding: 44px 16px 36px;
    }
    .bf-title__gold {
        font-size: clamp(32px, 11vw, 60px);
    }
    .bf-title__sub {
        font-size: clamp(16px, 4.5vw, 22px);
    }
    .bf-hero__desc {
        margin: 10px auto 18px;
    }
    .bf-cta-group {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .bf-btn {
        width: 100%;
        max-width: 320px;
    }
    .bf-countdown {
        margin-top: 10px;
    }
}
/* --- 3) strip coerente e senza “fessure” sui lati --- */
@media (max-width: 768px) {
    .bf-strip {
        padding: 10px 12px;
        text-align: center;
    }
}
/* --- 4) griglia carte: tablet 2–3 col, mobile 1 col --- */
/* desktop: resta come ora (min 320px) */
/* tablet “portrait” (iPad / 768–1024) */
@media (max-width: 1024px) {
    .bf--volantino #volantino_BF_elementi {
        max-width: 100%;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 24px;
    }
}
/* telefoni larghi (>= 600) – 2 colonne comode */
@media (min-width: 600px) and (max-width: 767px) {
    .bf--volantino #volantino_BF_elementi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }
}
/* telefoni piccoli (< 600) – 1 colonna */
@media (max-width: 599px) {
    .bf--volantino {
        padding-block: 20px 48px;
    }
    .bf--volantino #volantino_BF {
        padding: 0 12px;
    }
    .bf--volantino #volantino_BF_elementi {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    /* immagine meno slanciata per non allungare troppo la card */
    .bf--volantino .volantino_BF_elemento img {
        aspect-ratio: 4 / 4;
    }
}
/* --- 5) annulla qualsiasi margine/width residuo del CSS storico --- */
@media (max-width: 1024px) {
    .bf--volantino .volantino_BF_elemento {
        width: auto !important; /* niente width fisse ereditate */
        margin: 0 !important;
        float: none !important;
    }
    .bf--volantino .volantino_BF_elemento img {
        margin: 0 !important;
    }
}
/* Quick chips sotto il titolo */
.bf-quick {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 12px auto 4px;
}
.bf-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 700;
    background: rgba(255, 255, 255, .10);
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .18);
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.bf-chip:hover {
    filter: brightness(1.06)
}
@media (max-width:600px) {
    .bf-quick {
        padding-inline: 8px
    }
    .bf-chip {
        padding: 10px 12px;
        font-size: .95rem;
    }
}
/* Trust bar */
.bf-usps {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    color: #dbe6ea;
}
.bf-usps li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
}
.bf-usps i {
    opacity: .9;
}
@media (max-width:600px) {
    .bf-usps {
        gap: 10px
    }
    .bf-usps li {
        font-size: .95rem;
    }
}
/* ====== skin per la pagina Dettaglio ====== */
#corpo_centrale_colonna_dx {
    background: linear-gradient(180deg, var(--bf-midnight), var(--bf-midnight-2));
    color: var(--bf-text);
}
#corpo_centrale_colonna_dx h2, #corpo_centrale_colonna_dx h3 {
    color: var(--bf-text);
    letter-spacing: .01em;
}
#corpo_centrale_colonna_dx p {
    color: var(--bf-text);
    opacity: .92;
}
.scheda_prodotto_contenitore {
    background: transparent;
}
@media (max-width: 768px) {
    .bf-fullbleed {
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
    }
}
/* ==== Timer bigger ==== */
.bf-countdown{
  font-weight: 700;                      /* keep bold */
  font-size: clamp(16px, 2.2vw, 22px);   /* ↑ overall size, responsive */
}

.bf-countdown__time{
  font-size: 1.15em;                     /* numbers a bit bigger than label */
  padding: 8px 12px;                     /* bigger pill */
  border-radius: 10px;
  font-variant-numeric: tabular-nums;    /* fixed-width digits = stable */
  letter-spacing: .02em;
}

/* optional tweak on very small screens */
@media (max-width:420px){
  .bf-countdown{ font-size: 18px; }
  .bf-countdown__time{ font-size: 1.05em; padding: 7px 10px; }
}