/*
 * Tema Black Friday — Maxxi Econômica
 * Carregado por frontend/layouts/head.blade.php só quando o tema está ativo
 * (Admin > Configurações > Tema Black Friday) e na página /black-friday.
 *
 * reset.css/style.css usam var(--brand-bg) e var(--brand-text) no lugar do verde da marca
 * (ver resources/tools/brand-color-vars.php). Aqui o tema só redefine essas variáveis e faz
 * ajustes pontuais, sempre sob body.theme-bf.
 *
 * Paleta: preto como base, amarelo como destaque, vermelho só para preço/desconto/favoritos.
 */
body.theme-bf {
    --brand-bg: #111111;
    --brand-text: #111111;
    --bf-black: #0b0b0b;
    --bf-yellow: #ffd200;
    --bf-red: #e4002b;
}

/* Cabeçalho (desktop) */
body.theme-bf .header.shop .middle-inner,
body.theme-bf .header.sticky .middle-inner {
    background: var(--bf-black);
}
body.theme-bf .header.shop .header-inner {
    background: var(--bf-black);
    border-top: 1px solid #262626;
    border-bottom: 3px solid var(--bf-yellow);
}
body.theme-bf .header.shop .search-bar .btnn {
    background: var(--bf-yellow);
    color: var(--bf-black);
}
body.theme-bf .header.shop .search-bar .btnn:hover {
    background: #ffe24d;
}
/* Com o item "Black Friday" o menu não cabia numa linha */
@media (min-width: 992px) {
    body.theme-bf .header.shop .nav li a {
        padding-left: 20px;
        padding-right: 20px;
    }
}
body.theme-bf .header.shop .nav li.bf-menu-item > a {
    color: var(--bf-yellow);
    font-weight: 700;
}
body.theme-bf .header.shop .nav li .new {
    background: var(--bf-red);
    color: #fff;
}
body.theme-bf .header.shop .nav li .new::before {
    border-top-color: var(--bf-red);
}

/* Cabeçalho (mobile) */
body.theme-bf .header-mobile-search {
    background-color: var(--bf-black);
    border-bottom: 3px solid var(--bf-yellow);
}
body.theme-bf .header-mobile-search .search-bar .btnn {
    background: var(--bf-yellow);
    color: var(--bf-black);
}
body.theme-bf .header-mobile .total-count {
    background-color: var(--bf-red);
}
body.theme-bf .header-mobile-menu .nav li.bf-menu-item > a {
    color: var(--bf-red);
    font-weight: 700;
}

/* Títulos de seção */
body.theme-bf .section-title h2::before {
    background: var(--bf-red);
    height: 3px;
}

/* Cards de produto */
body.theme-bf .stampPromoMaxxi {
    background-color: var(--bf-yellow);
    color: var(--bf-black);
    font-weight: 800;
}
body.theme-bf .buttonBuyMaxxi .btnAddMaxxi:hover {
    background-color: var(--bf-black) !important;
    border-color: var(--bf-black);
    color: var(--bf-yellow) !important;
}
body.theme-bf .buttonWishMaxxi .btnAddMaxxi {
    color: var(--bf-red) !important;
}
body.theme-bf .buttonWishMaxxi .btnAddMaxxi:hover {
    background-color: var(--bf-red) !important;
    border-color: var(--bf-red);
    color: #fff !important;
}

/* Faixa do topo */
.bf-ribbon {
    background: var(--bf-yellow, #ffd200);
    color: #0b0b0b;
    font-size: 14px;
    line-height: 1.3;
    position: relative;
    z-index: 999;
}
.bf-ribbon a {
    color: #0b0b0b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 8px 16px;
    text-decoration: none;
}
.bf-ribbon a:hover {
    color: #0b0b0b;
}
.bf-ribbon__tag {
    background: #0b0b0b;
    color: var(--bf-yellow, #ffd200);
    font-weight: 800;
    letter-spacing: .08em;
    padding: 2px 8px;
    text-transform: uppercase;
}
.bf-ribbon__text {
    font-weight: 600;
}
.bf-ribbon__countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}
.bf-ribbon__cta {
    border-bottom: 2px solid #0b0b0b;
    font-weight: 700;
}
.bf-ribbon__preview {
    background: var(--bf-red, #e4002b);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    text-transform: uppercase;
}
@media (max-width: 767px) {
    .bf-ribbon {
        font-size: 12px;
    }
    .bf-ribbon a {
        gap: 4px 10px;
        padding: 6px 12px;
    }
    .bf-ribbon__cta {
        display: none;
    }
}

/* Página /black-friday */
.bf-hero {
    background: #0b0b0b;
    border-bottom: 3px solid var(--bf-yellow, #ffd200);
    color: #fff;
    padding: 40px 0 32px;
    text-align: center;
}
.bf-hero__title {
    color: #fff;
    font-size: 44px;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1.05;
    margin: 0 0 8px;
    text-transform: uppercase;
}
.bf-hero__title span {
    color: var(--bf-yellow, #ffd200);
}
.bf-hero__subtitle {
    color: #ddd;
    font-size: 16px;
    margin: 0 0 20px;
}
.bf-countdown {
    display: inline-flex;
    gap: 10px;
}
.bf-countdown__unit {
    background: #1d1d1d;
    border: 1px solid #333;
    border-radius: 6px;
    min-width: 64px;
    padding: 8px 6px;
}
.bf-countdown__value {
    color: var(--bf-yellow, #ffd200);
    display: block;
    font-size: 28px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: 1.1;
}
.bf-countdown__label {
    color: #bbb;
    display: block;
    font-size: 11px;
    text-transform: uppercase;
}
.bf-empty {
    padding: 48px 16px;
    text-align: center;
}
@media (max-width: 767px) {
    .bf-hero {
        padding: 28px 0 24px;
    }
    .bf-hero__title {
        font-size: 30px;
    }
    .bf-countdown__unit {
        min-width: 54px;
    }
    .bf-countdown__value {
        font-size: 22px;
    }
}