/* Vicente Kids — faixa de ofertas da home e painel de categorias */

/* ---------- Faixa de ofertas ---------- */
.op-ofertas {
    background: linear-gradient(135deg, #fdf0f4, #fff6f9);
    border: 1px solid #f6cdd9; border-radius: 22px;
    padding: 26px 28px 30px; margin: 10px 0;
}
.op-ofertas__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.op-ofertas__selo {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #e0245e, #b3123f); color: #fff;
    border-radius: 99px; padding: 6px 15px; margin-bottom: 10px;
    font: 600 .74rem 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase;
}
.op-ofertas__selo .op-mi { width: 16px; height: 16px; color: #fff; margin: 0; }
.op-ofertas__head h2 {
    font-family: 'Fredoka', serif; font-size: 2rem; color: #2b2140;
    margin: 0 0 4px; line-height: 1.15;
}
.op-ofertas__head p { margin: 0; color: #6f6182; font-size: .95rem; }
.op-ofertas__head p b { color: #b3123f; }
.op-ofertas__todas { font: 600 .88rem 'Montserrat', sans-serif; color: #b3123f; white-space: nowrap; }
.op-ofertas__todas:hover { color: #8c1638; }

/* ---------- Carrossel ---------- */
.op-ofertas__carrossel { position: relative; }
.op-ofertas__trilho {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; padding: 4px 2px 6px; margin: 0 -2px;
    scrollbar-width: none; -ms-overflow-style: none;
}
.op-ofertas__trilho::-webkit-scrollbar { display: none; }
.op-ofertas__trilho > .op-oferta-card {
    flex: 0 0 calc((100% - 48px) / 4);   /* 4 por vez no desktop */
    scroll-snap-align: start;
}
.op-ofertas__seta {
    position: absolute; top: 38%; z-index: 4;
    width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    background: #fff; color: #b3123f; font-size: 1.15rem; line-height: 1;
    box-shadow: 0 6px 20px rgba(31,10,54,.2);
    display: none; place-items: center; transition: background .18s, color .18s, opacity .18s;
}
.op-ofertas.tem-rolagem .op-ofertas__seta { display: grid; }
.op-ofertas__seta:hover:not(:disabled) { background: #b3123f; color: #fff; }
.op-ofertas__seta:disabled { opacity: .35; cursor: default; }
.op-ofertas__seta--ant { left: -18px; }
.op-ofertas__seta--prox { right: -18px; }

/* botão abaixo da faixa */
.op-ofertas__rodape { text-align: center; margin: 22px 0 0; }
.op-ofertas__cta {
    display: inline-flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, #e0245e, #b3123f); color: #fff !important;
    border-radius: 99px; padding: 14px 34px;
    font: 600 .95rem 'Montserrat', sans-serif; text-decoration: none !important;
    box-shadow: 0 10px 24px rgba(179,18,63,.3); transition: transform .18s, box-shadow .18s, filter .18s;
}
.op-ofertas__cta:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(179,18,63,.4); }
.op-ofertas__cta .op-mi { width: 19px; height: 19px; color: #fff; margin: 0; }

.op-oferta-card {
    background: #fff; border: 1px solid #f4dde5; border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column; min-width: 0;
    transition: transform .2s, box-shadow .2s;
}
.op-oferta-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(179,18,63,.16); }
.op-oferta-card__foto { position: relative; display: block; line-height: 0; }
.op-oferta-card__foto img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; display: block; }
.op-oferta-card__txt { padding: 13px 15px 16px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.op-oferta-card__nome {
    font: 600 .9rem/1.35 'Montserrat', sans-serif; color: #2b2140 !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.7em;
}
.op-oferta-card__preco { margin: 4px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.op-oferta-card__preco del { color: #9a8fae; font-size: .84rem; }
.op-oferta-card__preco ins { text-decoration: none; color: #b3123f; font: 700 1.15rem 'Montserrat', sans-serif; }
.op-oferta-card__btn {
    margin-top: 12px; text-align: center; border-radius: 99px; padding: 10px 14px;
    background: linear-gradient(135deg, #e0245e, #b3123f); color: #fff !important;
    font: 600 .82rem 'Montserrat', sans-serif; text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(179,18,63,.26); transition: filter .18s, transform .18s;
}
.op-oferta-card__btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

@media (max-width: 1200px) {
    .op-ofertas__seta--ant { left: 4px; }
    .op-ofertas__seta--prox { right: 4px; }
}
@media (max-width: 1024px) {
    .op-ofertas__trilho > .op-oferta-card { flex-basis: calc((100% - 32px) / 3); }
}
@media (max-width: 760px) {
    .op-ofertas__trilho > .op-oferta-card { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 849px) {
    /* faixa de ponta a ponta: o container do tema deixava sobra dos dois
       lados e a seção parecia encolhida */
    .op-ofertas {
        border-radius: 0; border-left: 0; border-right: 0;
        margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
        width: 100vw; max-width: 100vw; padding-left: 16px; padding-right: 16px;
    }
    .op-ofertas__trilho { padding-right: 16px; }
}
@media (max-width: 560px) {
    .op-ofertas { padding: 22px 14px 24px; }
    .op-ofertas__head h2 { font-size: 1.6rem; }
    .op-ofertas__trilho { gap: 12px; }
    .op-ofertas__trilho > .op-oferta-card { flex-basis: calc((100% - 12px) / 2); }
    .op-oferta-card__nome { font-size: .84rem; }
    .op-oferta-card__preco ins { font-size: 1rem; }
    /* no celular a rolagem com o dedo basta */
    .op-ofertas__seta { display: none !important; }
    .op-ofertas__cta { width: 100%; justify-content: center; }
}

/* ---------- Carrossel das vitrines (assets/js/carrossel.js) ---------- */
.op-cr { position: relative; }
.op-cr__trilho {
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    gap: 16px; padding: 0 0 6px;
    /* o .row do Flatsome tem margem negativa nas laterais e o primeiro
       card ficava para fora do trilho */
    margin-left: 0 !important; margin-right: 0 !important;
    scrollbar-width: none; -ms-overflow-style: none;
}
.op-cr__trilho::-webkit-scrollbar { display: none; }
.op-cr__trilho > .product-small,
.op-cr__trilho > .col {
    flex: 0 0 calc((100% - 48px) / 4) !important;
    max-width: none !important; width: auto !important;
    padding-left: 0 !important; padding-right: 0 !important;
    scroll-snap-align: start;
}
.op-cr-seta {
    position: absolute; top: 34%; z-index: 4;
    width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    background: #fff; color: var(--vk-primaria-escura); font-size: 1.15rem; line-height: 1;
    box-shadow: 0 6px 20px rgba(31,10,54,.2);
    display: grid; place-items: center; transition: background .18s, color .18s;
}
.op-cr-seta:hover { background: var(--vk-primaria); color: #fff; }
.op-cr-seta--ant { left: -16px; }
.op-cr-seta--prox { right: -16px; }
@media (max-width: 1200px) { .op-cr-seta--ant { left: 4px; } .op-cr-seta--prox { right: 4px; } }
@media (max-width: 1024px) { .op-cr__trilho > .product-small, .op-cr__trilho > .col { flex-basis: calc((100% - 32px) / 3) !important; } }
@media (max-width: 760px)  { .op-cr__trilho > .product-small, .op-cr__trilho > .col { flex-basis: calc((100% - 16px) / 2) !important; } }
@media (max-width: 560px)  { .op-cr-seta { display: none; } .op-cr__trilho { gap: 12px; } }

/* ---------- Botão "ver todos" das vitrines da home ---------- */
.op-ver-todos { text-align: center; margin: 18px 0 0; }
.op-ver-todos__btn,
.home .entry-content .button.is-outline {
    display: inline-flex; align-items: center; gap: 8px;
    border: 2px solid var(--vk-primaria); border-radius: 99px;
    padding: 12px 30px; background: #fff;
    font: 600 .92rem 'Montserrat', sans-serif; color: var(--vk-primaria-escura) !important;
    text-decoration: none !important; transition: background .18s, color .18s, box-shadow .18s;
}
.op-ver-todos__btn:hover {
    background: var(--vk-primaria); color: #fff !important;
    box-shadow: 0 8px 20px rgba(230,46,115,.3);
}

/* setas dos carrosséis de produto do tema, na cor da marca */
.products .flickity-prev-next-button { background: #fff !important; box-shadow: 0 6px 18px rgba(31,10,54,.18); }
.products .flickity-prev-next-button svg, .products .flickity-prev-next-button .arrow { fill: var(--vk-primaria-escura); }
.products .flickity-prev-next-button:hover { background: var(--vk-primaria) !important; }
.products .flickity-prev-next-button:hover svg { fill: #fff; }

/* ---------- Botão e painel de categorias ---------- */
.op-cats-btn > a { display: flex !important; align-items: center; gap: 7px; }
.op-cats-btn .op-mi { width: 20px; height: 20px; margin: 0; }
.op-cats-btn__t { font-size: .78rem; letter-spacing: .04em; }
@media (max-width: 849px) { .op-cats-btn__t { display: none; } }

.op-cats-painel { position: fixed; inset: 0; z-index: 10001; }
.op-cats-painel[hidden] { display: none; }
.op-cats-painel__fundo { position: absolute; inset: 0; background: rgba(20,8,34,.55); backdrop-filter: blur(2px); }
.op-cats-painel__caixa {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw);
    background: #fff; box-shadow: -14px 0 44px rgba(31,10,54,.3);
    display: flex; flex-direction: column; animation: op-cats-in .25s ease-out both;
}
@keyframes op-cats-in { from { transform: translateX(100%) } to { transform: none } }
.op-cats-painel__topo {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; background: #5b2a86; color: #fff;
}
.op-cats-painel__topo strong { font: 600 1rem 'Montserrat', sans-serif; }
.op-cats-painel__x { background: none; border: 0; color: #eadcf4; font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.op-cats-painel__x:hover { color: #fff; }
.op-cats-painel ul { list-style: none; margin: 0; padding: 8px 0; overflow-y: auto; flex: 1; }
.op-cats-painel li { border-bottom: 1px solid #fff6f1; }
.op-cats-painel li a {
    display: flex; align-items: center; gap: 12px; padding: 13px 18px;
    color: #2b2140 !important; font: 500 .95rem 'Montserrat', sans-serif; min-height: 50px;
}
.op-cats-painel li a:hover { background: #fffaf7; }
.op-cats-painel li .op-mi { width: 21px; height: 21px; color: var(--vk-primaria); flex: none; margin: 0; }
.op-cats-painel li span { flex: 1; min-width: 0; }
.op-cats-painel li small { background: #fde9f0; color: #c21e5e; border-radius: 99px; padding: 2px 9px; font-size: .72rem; font-weight: 600; }
.op-cats-painel__todas {
    display: block; text-align: center; padding: 15px; border-top: 1px solid #f7e9e2;
    font: 600 .88rem 'Montserrat', sans-serif; color: var(--vk-primaria-escura) !important;
}
.op-cats-painel__todas:hover { background: #fffaf7; }