/*
 * Campanha Dia das Crianças — Bike Portella B2C
 *
 * Um arquivo por campanha: `inc/campanha-sazonal.php` enfileira o que estiver
 * na chave `css` da campanha ativa, e só enquanto a janela de datas durar.
 * Quando ela fecha, o arquivo deixa de ser enfileirado e a body class some —
 * não sobra resíduo nenhum no site.
 *
 * Os seletores miram a body class (`.bp-campanha-criancas`) e a classe estável
 * da vitrine promovida (`.bp-home-section--campanha`), nunca o id da seção,
 * que varia conforme o que está salvo na option da Home.
 */

:root {
    --bp-campanha: #1b9aaa;
    --bp-campanha-escura: #157a86;
    --bp-campanha-acento: #f2a007;
}

/* ---------------------------------------------------------
   Cabeçalho da vitrine da campanha

   O confete é background-image do próprio cabeçalho: nenhum
   nó extra no HTML e nada a esconder de leitor de tela.
   --------------------------------------------------------- */
.bp-campanha-criancas .bp-home-section--campanha .bp-home-head {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27180%27%20height%3D%2764%27%20viewBox%3D%270%200%20180%2064%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2714%27%20r%3D%273.5%27%20fill%3D%27%231b9aaa%27%2F%3E%3Crect%20x%3D%2734%27%20y%3D%276%27%20width%3D%275%27%20height%3D%279%27%20rx%3D%271.5%27%20fill%3D%27%23f2a007%27%20transform%3D%27rotate%2824%2036%2010%29%27%2F%3E%3Cpath%20d%3D%27M64%208l5%209h-10z%27%20fill%3D%27%23e0447c%27%2F%3E%3Ccircle%20cx%3D%2796%27%20cy%3D%2712%27%20r%3D%272.5%27%20fill%3D%27%237c5cd6%27%2F%3E%3Crect%20x%3D%27120%27%20y%3D%278%27%20width%3D%274.5%27%20height%3D%2710%27%20rx%3D%271.5%27%20fill%3D%27%231b9aaa%27%20transform%3D%27rotate%28-32%20122%2013%29%27%2F%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%2716%27%20r%3D%273%27%20fill%3D%27%23f2a007%27%2F%3E%3Cpath%20d%3D%27M168%206l4.5%208h-9z%27%20fill%3D%27%231b9aaa%27%2F%3E%3Ccircle%20cx%3D%2724%27%20cy%3D%2746%27%20r%3D%272.5%27%20fill%3D%27%23e0447c%27%2F%3E%3Crect%20x%3D%2758%27%20y%3D%2744%27%20width%3D%274%27%20height%3D%279%27%20rx%3D%271.5%27%20fill%3D%27%237c5cd6%27%20transform%3D%27rotate%2840%2060%2048%29%27%2F%3E%3Ccircle%20cx%3D%27110%27%20cy%3D%2750%27%20r%3D%273%27%20fill%3D%27%23f2a007%27%2F%3E%3Cpath%20d%3D%27M136%2044l4%207.5h-8z%27%20fill%3D%27%231b9aaa%27%2F%3E%3Ccircle%20cx%3D%27176%27%20cy%3D%2744%27%20r%3D%272.5%27%20fill%3D%27%23e0447c%27%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 180px auto;
    border-bottom-color: var(--bp-campanha);
}

.bp-campanha-criancas .bp-home-section--campanha .bp-home-head__bar {
    background: var(--bp-campanha);
}

.bp-campanha-criancas .bp-home-section--campanha .bp-home-head__sub {
    color: var(--gray-600, #4d4d4d);
    font-weight: 600;
}

.bp-campanha-criancas .bp-home-section--campanha .bp-home-head__cta {
    color: var(--bp-campanha-escura);
}

/* ---------------------------------------------------------
   Bolha da categoria em destaque
   --------------------------------------------------------- */
.bp-round-cat-bubble--sazonal .bp-round-cat-bubble__img-wrap {
    border-color: var(--bp-campanha);
    box-shadow: 0 4px 14px rgba(27, 154, 170, 0.28);
}

.bp-round-cat-bubble--sazonal .bp-round-cat-bubble__title {
    color: var(--bp-campanha-escura);
    font-weight: 800;
}

/* ---------------------------------------------------------
   Selo "Retire montada" — adesivo no topo direito do card

   O motor de selos posiciona em baixo/direita por padrao. Aqui o selo e um
   adesivo quadrado e vai para o topo direito, que e o canto livre: o coracao
   de favorito fica no topo esquerdo e a etiqueta de desconto, quando existe,
   ocupa o topo direito — por isso a regra com :has() empurra o adesivo para
   baixo dela em vez de sobrepor.
   --------------------------------------------------------- */
.bp-campanha-criancas .bp-custom-badge--image.bp-custom-badge--card {
    top: 10px;
    right: 10px;
    bottom: auto;
    left: auto;
    width: clamp(58px, 34%, 92px);
    height: auto;
    max-width: 92px;
    max-height: 92px;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.22));
}

.bp-campanha-criancas .bp-custom-badge--image.bp-custom-badge--card .bp-custom-badge__img {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    filter: none;
}

/* Card com etiqueta de desconto: o adesivo desce e nao briga com ela. */
.bp-campanha-criancas .bp-card:has(> .bp-card__badge) .bp-custom-badge--image.bp-custom-badge--card {
    top: 46px;
}

/* Na pagina do produto o selo e um bloco no fluxo, nao um adesivo no canto. */
.bp-campanha-criancas .bp-custom-badge--image.bp-custom-badge--single {
    max-width: 104px;
    max-height: 104px;
}

/* ---------------------------------------------------------
   Selo "Retire montada" nos cards

   A cor `green` do motor de selos vira a cor da campanha
   enquanto ela durar — sem tocar em `.bp-custom-badge`, que
   é compartilhado com os selos permanentes.
   --------------------------------------------------------- */
.bp-campanha-criancas .bp-custom-badge--green {
    background: var(--bp-campanha);
}

/* ---------------------------------------------------------
   Mobile — a maior parte do tráfego
   --------------------------------------------------------- */
@media (max-width: 900px) {


    .bp-campanha-criancas .bp-home-section--campanha .bp-home-head {
        background-size: 120px auto;
    }
}

@media (max-width: 600px) {
    /* Sem espaço para o confete: o cabeçalho é todo do texto. */
    .bp-campanha-criancas .bp-home-section--campanha .bp-home-head {
        background-image: none;
    }
}

@media (max-width: 400px) {
    /* Card com ~165px: "RETIRE MONTADA" precisa respirar. */
    .bp-campanha-criancas .bp-custom-badge--green {
        font-size: 9px;
        letter-spacing: 0.3px;
        padding: 3px 6px;
    }
    /* Adesivo menor: em card de ~165px, 92px seriam mais da metade da foto. */
    .bp-campanha-criancas .bp-custom-badge--image.bp-custom-badge--card {
        top: 8px;
        right: 8px;
        max-width: 64px;
        max-height: 64px;
    }
}