/* =====================================================
   Vicente Kids — estilos do tema filho (Flatsome)
   ===================================================== */

:root {
    --vk-primaria: #e62e73;
    --vk-primaria-escura: #c21e5e;
    /* botões com texto branco: rosa um pouco mais escuro (contraste 4,9:1, AA) */
    --vk-btn: #d6246a;
    /* WhatsApp com texto: o verde oficial #25D366 dá só 2:1 com branco */
    --vk-wa: #14783a;
    --vk-wa-hover: #0e6a32;
    --vk-texto-aux: #6f6182;
    --vk-destaque: #05bdc9;
    --vk-fundo-claro: #fff6f1;
    --vk-sucesso: #2f8a46;
    --vk-tinta: #2b2140;
    --vk-rodape-escuro: #3a1b59;
    --vk-rodape: #5b2a86;
    --vk-roxo: #9048b6;
    --vk-amarelo: #f5bc24;
}

/* --- Tipografia --- */
h1, h2, h3, .op-hero__title { letter-spacing: .01em; }
/* Rótulo de seção: pílula com traço, para não passar despercebido */
.op-kicker, .op-hero__kicker {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Montserrat', sans-serif; font-weight: 600; text-transform: uppercase;
    letter-spacing: .2em; font-size: .74rem;
    margin-bottom: 1rem; padding: 7px 16px 7px 13px; border-radius: 99px;
    /* Etiqueta branca sólida: legível tanto sobre o roxo das seções quanto
       sobre fundo claro. Variantes por tema de seção davam contraste ruim
       justamente nas seções roxas, que não recebem a classe .dark. */
    color: var(--vk-primaria-escura) !important; background: #fff;
    border: 1px solid rgba(230,46,115,.18); box-shadow: 0 4px 14px rgba(31,10,54,.14);
}
.op-kicker::before, .op-hero__kicker::before {
    content: ""; width: 16px; height: 2px; border-radius: 2px; flex: none;
    background: var(--vk-primaria); opacity: .9;
}
.op-script { font-family: 'Fredoka', sans-serif; font-size: 3rem; line-height: 1.1; color: #fff; text-align: center; font-weight: 400; }
.section-title-center span { text-transform: none; letter-spacing: 0; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 2rem; }
.section-title-center b { background: var(--vk-destaque); opacity: .5; }

/* --- Hero --- */
.op-hero { position: relative; overflow: hidden; }
.op-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
}
.op-hero .text-box { z-index: 2; }
.op-hero__title { color: #fff; font-size: 3.6rem; line-height: 1.05; margin-bottom: 1rem; }
.op-hero__title span { font-family: 'Fredoka', sans-serif; font-weight: 400; color: var(--vk-destaque); font-size: 1.15em; }
.op-hero .lead { color: #fde3ec; max-width: 34rem; }
.op-hero .button { margin-right: .75rem; }

/* --- Correções de contraste --- */
.header-top .nav > li > a, .header-top .nav-top .nav > li > a { color: #fff !important; opacity: .85; }
.header-top .nav > li > a:hover, .header-top .nav > li.current-menu-item > a { opacity: 1; color: #fff !important; }
.header-main .header-button > .button, .header-main .header-button > .button span { color: #2b2140 !important; font-weight: 600; }
.product-small .add-to-cart-button .button, .product-small a.button, .product-small .button.primary,
.products .button.primary, .products .button { color: #fff !important; background: var(--vk-btn) !important; border-color: var(--vk-btn) !important; }
.product-small .button:hover { background: var(--vk-primaria-escura) !important; }
.single_add_to_cart_button, .single_add_to_cart_button.button { color: #fff !important; background: var(--vk-primaria) !important; }
.shop-page-title.category-page-title .page-title-inner h1, .shop-page-title.category-page-title .title-wrapper h1 { color: #fff; }
.page-title-inner h1 { color: #2b2140; } /* páginas de fundo claro (Minha Conta etc.) */

/* --- Minha Conta --- */
.woocommerce-account .page-title { background: #fff6f1; }
.woocommerce-account .page-title .page-title-inner h1 { color: #2b2140; }
#customer_login { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
#customer_login .col-1, #customer_login .col-2 {
    flex: 1 1 380px; max-width: none; float: none; width: auto; margin: 0;
    background: #fff; border: 1px solid #f7e9e2; border-radius: 18px; padding: 30px 32px !important; box-shadow: 0 8px 30px rgba(91,42,134,.07);
}
#customer_login .col-1 form, #customer_login .col-2 form { border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
#customer_login h2 { font-family: 'Fredoka', sans-serif; font-size: 1.6rem; text-transform: none; letter-spacing: 0; margin-bottom: 6px; }
#customer_login .col-2 { background: linear-gradient(180deg, #fff, #faf6ff); }
.woocommerce-account .woocommerce form .form-row input.input-text { border-radius: 10px; padding: 11px 14px; }
.woocommerce-account .woocommerce .button, .woocommerce form .button { border-radius: 99px; font-weight: 600; }
.op-reg-intro { color: #666; font-size: .92rem; margin-bottom: 14px; }
.op-reg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
/* o WooCommerce dá width:47% e float às .form-row-first/last — dentro do
   grid isso deixava Nome e Sobrenome com metade da coluna (v0.8.3) */
.op-reg-row > .form-row,
.op-reg-row > p { width: 100% !important; float: none !important; margin-left: 0; margin-right: 0; }
.op-reg-row input.input-text, .op-reg-row select { width: 100% !important; }
.woocommerce-account form .form-row input.input-text,
.woocommerce-account form .form-row select { min-height: 46px; }
.op-reg-beneficios { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px dashed #f1dcd3; display: grid; gap: 10px; }
.op-reg-beneficios li { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: #4a3a60; }
.op-reg-beneficios .op-mi { width: 19px; height: 19px; color: var(--vk-primaria); margin: 0; flex: none; }
.lost_reset_password { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid #f7e9e2; border-radius: 18px; padding: 30px; }
/* navegação da conta (logado) */
.account-nav .woocommerce-MyAccount-navigation ul, .woocommerce-MyAccount-navigation ul { border: 0; }
.woocommerce-MyAccount-navigation ul li { border: 0 !important; margin-bottom: 6px; }
.woocommerce-MyAccount-navigation ul li a { display: block; padding: 10px 16px; border-radius: 99px; color: #4a3a60; font-weight: 500; transition: .2s; }
.woocommerce-MyAccount-navigation ul li a:hover { background: #fff6f1; color: var(--vk-primaria-escura); padding-left: 20px; }
.woocommerce-MyAccount-navigation ul li.is-active a { background: var(--vk-primaria); color: #fff; }
.op-acc-hello { background: #fff6f1; border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; font-size: .92rem; }
@media (max-width: 640px) { .op-reg-row { grid-template-columns: 1fr; } #customer_login .col-1, #customer_login .col-2 { padding: 22px 18px !important; } }
@media (min-width: 850px) { #wp-bottom-menu, .wp-bottom-menu { display: none !important; } }

/* --- Slider de banners e cabeçalhos de página --- */
.op-slider { margin-bottom: 0; }
.op-slider .op-slide, .op-slider .op-slide img { display: block; width: 100%; height: auto; }
.op-slider .flickity-page-dots { bottom: 10px; }
.op-slider .slider:not(.flickity-enabled) > :not(:first-child) { display: none; } /* evita empilhar antes do JS montar */
.op-page-header img { display: block; width: 100%; height: auto; }
.op-page-header + .section, .op-page-header ~ .section { padding-top: 40px; }
.section.op-page-header { padding: 0 !important; }

/* --- Ícones nos menus --- */
.op-mi { width: 18px; height: 18px; margin-right: 7px; vertical-align: -3px; display: inline-block; transition: transform .2s; }
.header-top .op-mi { width: 16px; height: 16px; opacity: .95; }
.mobile-sidebar .op-mi { width: 20px; height: 20px; margin-right: 10px; vertical-align: -4px; color: var(--vk-primaria); }
.nav-dropdown .op-mi { color: var(--vk-primaria); }
.nav > li > a:hover .op-mi { transform: translateY(-2px) scale(1.12); }
.footer-2 .op-mi { width: 17px; height: 17px; color: var(--vk-destaque); }
/* Menus do rodapé: o link é flex e o SVG era espremido até largura 0.
   flex:none garante o tamanho; o rótulo fica com o texto. */
.footer .menu li > a, #footer .menu li > a { display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; }
.footer .menu .op-mi, #footer .menu .op-mi {
    width: 20px !important; height: 20px !important; flex: none;
    margin: 2px 0 0 !important; vertical-align: 0; color: var(--vk-destaque);
}
.footer .menu .op-mi-label, #footer .menu .op-mi-label { min-width: 0; }

/* --- Hovers revisados --- */
.header-top .nav > li > a { border-radius: 99px; padding: 6px 12px !important; transition: background .2s, opacity .2s; }
.header-top .nav > li > a:hover { background: rgba(255,255,255,.16); }
/* --- Menu desktop: barra branca flutuante com ícones grandes (estilo app) --- */
/* Menu de categorias: barra roxa com ícones grandes e alinhados (ícone sobre o texto) */
@media (min-width: 850px) {
    .header-bottom, .header-bottom .flex-row, .header-bottom .flex-col { height: auto !important; min-height: 0 !important; max-width: 100%; }
    .header-bottom .flex-col { flex: 1 1 auto; }
    .header-bottom { padding: 4px 0 8px; }
    .header-bottom .nav { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; }
    .header-bottom .nav > li { margin: 0 !important; }
    .header-bottom .nav > li > a {
        display: flex; flex-direction: column; align-items: center; gap: 6px; white-space: nowrap;
        padding: 10px 16px !important; border-radius: 14px; line-height: 1.1; height: auto;
        color: #fff !important; font-size: .7rem; letter-spacing: .05em;
        transition: background .2s, transform .2s;
    }
    .header-bottom .nav > li > a .op-mi { width: 26px; height: 26px; margin: 0; color: #fff; }
    .header-bottom .nav > li > a:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
    .header-bottom .nav > li > a:hover .op-mi { transform: scale(1.15); }
    /* Destaque da seção atual — mesmo tratamento em todas as páginas
       (produto, categoria e arquivos também marcam o item pai). */
    .header-bottom .nav > li.current-menu-item > a,
    .header-bottom .nav > li.current-menu-parent > a,
    .header-bottom .nav > li.current-menu-ancestor > a,
    .header-bottom .nav > li.current-product-ancestor > a,
    .header-bottom .nav > li.active > a {
        background: var(--vk-roxo);
        box-shadow: 0 6px 16px rgba(0,0,0,.28);
    }
    /* Fora da loja nenhum item fica "atual" e a barra parecia outra.
       Sem item ativo, "Todos os produtos" assume o destaque — assim a
       barra tem o mesmo visual na home e nas demais páginas. */
    .woocommerce-shop .header-bottom .nav:not(:has(> li.current-menu-item)):not(:has(> li.current-menu-parent)):not(:has(> li.current-menu-ancestor)):not(:has(> li.active)) > li:first-child > a {
        background: var(--vk-roxo);
        box-shadow: 0 6px 16px rgba(0,0,0,.28);
    }
}

/* Dock flutuante fixo (desktop) — estilo referência */
.op-dock {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 9980;
    display: flex; align-items: center; gap: 4px; background: #fff; border-radius: 22px;
    padding: 8px 14px 10px; box-shadow: 0 16px 40px rgba(31,10,54,.22); border: 1px solid #f9ece6;
}
.op-dock__item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 14px; border-radius: 14px; border: 0; background: none; cursor: pointer;
    color: #4a3a60 !important; font: 600 .72rem/1.1 'Montserrat', sans-serif; letter-spacing: .05em; text-transform: uppercase;
    transition: background .2s, color .2s, transform .2s;
}
.op-dock__item .op-mi { width: 24px; height: 24px; margin: 0; color: var(--vk-primaria); }
.op-dock__item:hover { background: #fff6f1; color: var(--vk-primaria-escura) !important; transform: translateY(-3px); }
.op-dock__item:hover .op-mi { transform: scale(1.15); }
.op-dock__item.is-active { background: var(--vk-fundo-claro); color: var(--vk-primaria-escura) !important; }
.op-dock__chat { margin-right: 6px; }
.op-dock__orb {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    background: #25D366; color: #fff; box-shadow: 0 8px 20px rgba(37,211,102,.45); margin-top: -26px;
    border: 3px solid #fff; transition: transform .2s;
}
.op-dock__orb .op-mi { width: 24px; height: 24px; color: #fff; }
.op-dock__chat:hover .op-orb, .op-dock__chat:hover .op-dock__orb { transform: scale(1.1); }
@media (max-width: 849px) { .op-dock { display: none; } }
/* O dock é fixo e cobria o fim do conteúdo. O !important é necessário:
   o plugin da barra inferior escreve padding-bottom no style do body. */
@media (min-width: 850px) {
    /* só o necessário para o dock (82px de altura + 20 do fundo) */
    body { padding-bottom: 96px !important; }
    .footer-wrapper, #footer { padding-bottom: 0 !important; }
    .absolute-footer { padding-top: 10px !important; padding-bottom: 6px !important; }
    .absolute-footer .container { padding-bottom: 0 !important; }
    .footer-2 { padding-bottom: 14px !important; }
    /* Cabeçalho fixo no desktop.
       O Flatsome define a altura da faixa por `height` (não min-height), e
       eu tinha aumentado só a logo — ela passava a vazar por baixo. Aqui a
       faixa e a logo crescem juntas, com overflow travando a sobra. */
    .stuck .header-main,
    .stuck .header-main .flex-row {
        height: auto !important;
        min-height: 88px !important;
        overflow: hidden;
    }
    body .stuck #logo,
    body .stuck .header-main .logo {
        max-height: 78px !important; height: auto !important;
        display: flex !important; align-items: center;
    }
    body .stuck #logo img,
    body .stuck .header-main .logo img {
        max-height: 78px !important; width: auto !important; height: auto !important;
        object-fit: contain;
    }
}
/* No celular a barra inferior tem 73px e a cesta termina ~98px acima do
   fim. 104px cobrem os dois sem deixar faixa vazia sobrando. */
@media (max-width: 849px) {
    body { padding-bottom: 104px !important; }
    .footer-wrapper, #footer { padding-bottom: 0; }
    .absolute-footer { padding-top: 12px; padding-bottom: 12px; }
}
.op-lgpd:not([hidden]) ~ .op-dock { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(20px); }
.op-dock { transition: opacity .3s, transform .3s; }
/* rodapé não fica escondido atrás do dock, com folga sob o "Desenvolvido por" */
@media (min-width: 850px) { .absolute-footer { padding-bottom: 150px !important; } }
.op-dev { margin-top: 10px; margin-bottom: 6px; }
@media (max-width: 849px) {
    .header-bottom .nav > li > a { border-radius: 99px; transition: background .2s, color .2s; }
    .header-bottom .nav > li > a:hover { background: rgba(58,27,89,.25); color: #fff !important; }
}
.header-main .icon.button.circle { transition: transform .2s, background .2s; }
.header-main .icon.button.circle:hover { transform: translateY(-2px) scale(1.08); }
.social-icons a { transition: transform .2s, color .2s, border-color .2s; }
.social-icons a:hover { transform: translateY(-2px); }
.footer-2 a { transition: color .2s, padding-left .2s; }
.footer-2 .menu li a:hover { padding-left: 4px; }
a, .button { transition: all .2s ease; }

/* --- Header --- */
.header-main .nav > li > a { font-weight: 500; letter-spacing: .04em; }
/* a busca própria do celular não aparece no desktop */
@media (min-width: 850px) { .op-busca-mobile { display: none; } }

/* Busca do cabeçalho: mesmo recorte arredondado em todas as páginas
   (na home o campo e a lupa apareciam com cantos retos) */
/* nada de overflow:hidden aqui — cortaria a lista de sugestões */
.header .searchform .search-field,
.header-main .searchform .search-field {
    border-radius: 10px 0 0 10px !important;
    border: 0; box-shadow: none; height: 44px; margin: 0;
}
.header .searchform .ux-search-submit,
.header-main .searchform .ux-search-submit {
    border-radius: 0 10px 10px 0 !important;
    border: 0; height: 44px; width: 52px; margin: 0; padding: 0;
    display: grid; place-items: center;
    background-color: var(--vk-primaria) !important;
    /* A lupa vinha da fonte fl-icons (glifo \e012), que carrega mas não
       desenha nada em alguns dispositivos. SVG não depende de fonte. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 20px;
}
.header .searchform .ux-search-submit i,
.header-main .searchform .ux-search-submit i { display: none !important; }
.header .searchform .live-search-results,
.header-main .searchform .live-search-results { border-radius: 0 0 10px 10px; }

.header-bottom .nav > li > a { font-size: .78rem; letter-spacing: .03em; }
.header-bottom { box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.header-main .logo img { mix-blend-mode: normal; } /* logo colorida sobre o cabeçalho claro */

/* --- Botões --- */
.button.primary:not(.is-outline):not(.is-link), .button.is-outline.primary:hover, input[type=submit].primary { background-color: var(--vk-btn); border-color: var(--vk-btn); }
.button.primary:hover { background-color: var(--vk-primaria-escura); border-color: var(--vk-primaria-escura); }
.button.secondary:not(.is-outline):not(.is-link) { background-color: var(--vk-destaque); border-color: var(--vk-destaque); color: var(--vk-tinta); }
.button.secondary.is-outline { background: transparent; border-color: var(--vk-destaque); color: var(--vk-destaque); }
.button.secondary.is-outline:hover { background: var(--vk-destaque); color: var(--vk-tinta); }

/* --- Featured boxes --- */
.featured-box .icon-box-img svg, .featured-box i { color: var(--vk-primaria); }
.featured-box h3, .featured-box h4 { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1rem; margin-bottom: .25rem; }

/* --- Categorias / produtos --- */
.product-category .box-text h5 { font-family: 'Fredoka', sans-serif; font-size: 1.5rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.product-small .box-image { border-radius: 12px; overflow: hidden; background: var(--vk-fundo-claro); }
/* fotos de celular em proporções variadas → cards uniformes 4:5 */
.product-small .box-image .image-fade_in_back, .product-small .box-image > a, .product-small .box-image > div { display: block; }
.product-small .box-image img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.product-category .box-image img { aspect-ratio: 1 / 1; object-fit: cover; }
.product-small .price, .price .amount { color: var(--vk-primaria-escura); font-weight: 600; }
.badge-inner.on-sale { background: var(--vk-primaria); }
.woocommerce-placeholder { background: linear-gradient(135deg, var(--vk-fundo-claro), #fde3ec); }

/* --- Loja: cards padrão marketplace --- */
.products .product-small.box { background: #fff; border: 1px solid #f7e9e2; border-radius: 14px; padding: 10px 10px 14px; transition: box-shadow .2s, transform .2s; }
.products .product-small.box:hover { box-shadow: 0 12px 30px rgba(91,42,134,.12); transform: translateY(-3px); }
.products .product-small .box-text { padding: 10px 6px 0; }
.product-small .product-title { font-family: 'Montserrat', sans-serif; font-size: .95rem; font-weight: 500; line-height: 1.35; }
.product-small .product-title a { color: #2b2140; }
.product-small .price { display: block; font-size: 1.05rem; }
.op-parcelas { display: block; font-size: .78rem; color: #5b7a3f; font-weight: 400; margin-top: 2px; }
.op-parcelas b { font-weight: 600; }
.product-small .price del { opacity: .5; font-size: .85em; }
.woocommerce-result-count { color: #777; }
.shop-container .woocommerce-ordering select { border-radius: 99px; padding-left: 14px; }

/* Sidebar da loja */
.sidebar .widget { background: #fff; border: 1px solid #f7e9e2; border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; }
.sidebar .widget-title, .sidebar .widget > span.widget-title { font-family: 'Montserrat', sans-serif; font-size: .85rem; letter-spacing: .12em; color: #5b2a86; }
.sidebar .widget .is-divider { background: var(--vk-destaque); }
.widget_product_categories li a { color: #444; padding: 4px 0; display: inline-block; }
.widget_product_categories li a:hover { color: var(--vk-primaria-escura); }

/* --- Página do produto --- */
.product-info .product-title { font-family: 'Fredoka', sans-serif; font-size: 2rem; }
.product-info .price { font-size: 1.6rem; }
.product-info .price .op-parcelas { font-size: .9rem; }
.op-pix, .op-entrega-local { display: flex; gap: 10px; align-items: center; background: #fff6f1; border-radius: 10px; padding: 10px 14px; margin: 10px 0; font-size: .9rem; color: #3d2a55; }
.op-pix .op-mi, .op-entrega-local .op-mi { width: 20px; height: 20px; color: var(--vk-primaria); flex: none; }
.op-entrega-local { background: #eefaf0; color: #23502f; }
.op-entrega-local .op-mi { color: #2f8a46; }
.op-selos { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 18px 0 6px; }
/* o resumo do produto pode encolher no flex — sem isso os selos empurram a coluna para baixo */
.product-info.col-fit, .product-info.summary { min-width: 0; }
.op-selo { display: flex; gap: 12px; align-items: center; border: 1px solid #f7e9e2; border-radius: 12px; padding: 10px 14px; background: #fff; min-width: 0; }
.op-selo > div { min-width: 0; }
.op-selo .op-mi { width: 22px; height: 22px; color: var(--vk-primaria); flex: none; }
/* o texto precisa quebrar: com nowrap o selo ficava mais largo que a
   coluna do resumo e vazava para fora do cartão do checkout */
.op-selo b { display: block; font-size: .84rem; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.op-selo small { color: #777; font-size: .78rem; line-height: 1.3; display: block; overflow-wrap: anywhere; }
.op-selos--checkout { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 14px; }
.product-info .quantity .qty { border-radius: 10px; }
.woocommerce-breadcrumb { font-size: .8rem; text-transform: none; letter-spacing: .02em; }
.product-footer .woocommerce-tabs { border-top: 1px solid #eee; }

/* Galeria do produto: fotos verticais controladas */
.product-gallery .woocommerce-product-gallery__image img { border-radius: 14px; }

/* --- Carrinho / checkout --- */
.op-cart-aviso { display: flex; gap: 10px; align-items: center; background: #eefaf0; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-size: .9rem; color: #23502f; }
.op-cart-aviso .op-mi { width: 20px; height: 20px; color: #2f8a46; flex: none; }
.op-cart-aviso > span { min-width: 0; line-height: 1.5; }

/* ============================================================
   Acessibilidade no toque e legibilidade (auditoria v1.1.1)
   Links de texto com seta tinham 19–23px de altura; o mínimo
   recomendado para o dedo é 44px. Aqui a área cresce sem mudar
   o desenho, usando padding vertical.
   ============================================================ */
@media (max-width: 1024px) {
    .op-ct-card a,
    .op-cta-card a,
    .op-vdhome__link,
    .op-faq-vazio a,
    .op-footer-trust a,
    .footer .menu li > a,
    #footer .menu li > a,
    .op-acc-card,
    .product-small .name a,
    .woocommerce-loop-product__title,
    a[data-op-lgpd] {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    /* rótulos e botões pequenos ganham corpo mínimo legível */
    .product-small .name a,
    .woocommerce-loop-product__title { font-size: .9rem !important; line-height: 1.35; }
    .product-small .button.ajax_add_to_cart,
    .product-small .add_to_cart_button { font-size: .78rem !important; min-height: 40px; }
    .cat-title, .category-name, .box-text .header-title { font-size: .95rem !important; }
    /* remover item do carrinho: alvo maior */
    .woocommerce-cart .product-remove a.remove {
        width: 34px !important; height: 34px !important; line-height: 32px !important; font-size: 20px !important;
    }
}
/* o "pular para o conteúdo" do tema fica com 1px e polui a auditoria */
.skip-link, a[href="#main"].screen-reader-text { height: auto; }

/* ============================================================
   Ofertas (v1.5.0)
   ============================================================ */
.op-oferta {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    background: linear-gradient(135deg, #e0245e, #b3123f); color: #fff;
    border-radius: 99px; padding: 6px 12px;
    font: 700 .82rem 'Montserrat', sans-serif; letter-spacing: .01em;
    box-shadow: 0 6px 16px rgba(224,36,94,.34);
}
.badge-container .badge.on-sale, .callout .badge-inner.on-sale { display: none; }  /* selo padrão do tema */

/* preço antigo discreto, preço novo em destaque */
.price del, .price del .amount {
    color: #9a8fae !important; font-weight: 400 !important; font-size: .88em; margin-right: 7px;
}
.price ins, .price ins .amount { text-decoration: none; color: #b3123f !important; font-weight: 700; }
.product-info .price ins .amount { font-size: 1.5rem; }

/* quanto o cliente economiza (página do produto) */
.op-economia {
    display: flex; align-items: center; gap: 10px;
    background: #fdf0f4; border: 1px solid #f6cdd9; border-radius: 12px;
    padding: 11px 15px; margin: 4px 0 16px; color: #8c1638; font-size: .92rem;
}
.op-economia .op-mi { width: 20px; height: 20px; color: #b3123f; flex: none; margin: 0; }
.op-economia b { color: #b3123f; }

/* cartão de produto em oferta ganha contorno */
.product-small:has(.op-oferta) .box-image { border-radius: 12px; }

/* Produto esgotado: etiqueta no cartão (eles vão para o fim da lista) */
.op-esgotado {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    background: rgba(11,11,11,.82); color: #fff; border-radius: 99px;
    padding: 5px 12px; font: 600 .7rem 'Montserrat', sans-serif;
    letter-spacing: .06em; text-transform: uppercase;
}
.product-small .box-image { position: relative; }
.product-small:has(.op-esgotado) .box-image img { opacity: .68; }

/* Nome das categorias na vitrine: era pequeno demais para o cartão */
.category-title, .box-category .box-text .header-title,
.product-category .box-text .header-title,
.woocommerce-loop-category__title {
    font: 600 1.05rem/1.3 'Montserrat', sans-serif !important;
    letter-spacing: .01em;
}
@media (max-width: 640px) {
    .category-title, .box-category .box-text .header-title,
    .product-category .box-text .header-title,
    .woocommerce-loop-category__title { font-size: .98rem !important; }
}
@media (min-width: 850px) {
    .category-title, .box-category .box-text .header-title,
    .product-category .box-text .header-title,
    .woocommerce-loop-category__title {
        font-size: 1.28rem !important; letter-spacing: .02em;
        text-shadow: 0 2px 10px rgba(0,0,0,.45);
    }
}

/* ============================================================
   Rodapé: crédito e copyright organizados (v1.3.1)
   Vinha tudo empilhado sem hierarquia, com o crédito colado no
   copyright e o link de cookies solto no meio.
   ============================================================ */
.op-footer-trust {
    display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center;
    margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(5,189,201,.16);
}
.op-footer-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: #eadcf4; }
.op-footer-trust .op-mi { width: 17px; height: 17px; color: var(--vk-destaque); flex: none; margin: 0; }
.absolute-footer, .absolute-footer .container { text-align: center; }
.absolute-footer .op-dev {
    display: block; margin-top: 12px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: .78rem; color: #9a8fae;
}
.absolute-footer .op-dev a { color: var(--vk-destaque); font-weight: 500; }
.absolute-footer .op-dev a:hover { color: #fff; }
.absolute-footer a[data-op-lgpd] {
    display: inline-block; margin-top: 6px; color: var(--vk-destaque); font-size: .82rem;
}
.absolute-footer .copyright-footer { line-height: 1.7; font-size: .84rem; }

/* --- Convite para criar conta (carrinho, checkout, rodapé, menus) --- */
.op-conta-cta {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: linear-gradient(135deg, #fff6f1, #fde6ee); border: 1px solid #f1dcd3;
    border-radius: 16px; padding: 16px 20px; margin: 22px 0;
}
.op-conta-cta > div { flex: 1 1 240px; min-width: 0; }
.op-conta-cta .op-mi { width: 26px; height: 26px; color: var(--vk-primaria); flex: none; margin: 0; }
.op-conta-cta b { display: block; font: 600 .96rem 'Montserrat', sans-serif; color: #2b2140; line-height: 1.3; }
.op-conta-cta span { display: block; font-size: .85rem; color: #6f6182; line-height: 1.45; margin-top: 2px; }
.op-conta-cta__btn {
    flex: none; background: var(--vk-primaria); color: #fff !important; border-radius: 99px;
    padding: 11px 22px; font: 600 .86rem 'Montserrat', sans-serif; text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(230,46,115,.26); transition: filter .18s, transform .18s;
}
.op-conta-cta__btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* no rodapé o fundo é escuro */
.op-conta-cta--rodape {
    background: rgba(255,255,255,.06); border-color: rgba(5,189,201,.28); margin: 0 0 18px;
    text-align: left;
}
.op-conta-cta--rodape b { color: #fff; }
.op-conta-cta--rodape span { color: #eadcf4; }
@media (max-width: 560px) {
    .op-conta-cta {
        flex-direction: column; align-items: flex-start; text-align: left;
        gap: 14px; padding: 16px 18px;
    }
    /* sem isto o bloco de texto esticava (flex:1 1 240px) e empurrava o
       botão para o fim do cartão, deixando um vão enorme no meio */
    .op-conta-cta > div { flex: 0 0 auto; width: 100%; }
    .op-conta-cta .op-mi { margin-bottom: -4px; }
    .op-conta-cta__btn { width: 100%; text-align: center; }
}

/* "Criar conta" nos menus: pílula para destacar */
.op-criar-conta > a { color: #fff !important; }
.header-top .op-criar-conta > a {
    background: rgba(255,255,255,.16); border-radius: 99px; padding: 5px 14px !important;
}
.header-top .op-criar-conta > a:hover { background: var(--vk-destaque); color: #2b2140 !important; }
.shop_table.cart { border: 1px solid #f7e9e2; border-radius: 14px; overflow: hidden; }
.cart_totals > h2, .cart-wrapper h3 { font-family: 'Montserrat', sans-serif; font-size: 1rem; letter-spacing: .08em; }
.checkout-page .form-row input, .woocommerce-checkout input.input-text, .woocommerce-cart .input-text { border-radius: 10px; }
.woocommerce-checkout #place_order { border-radius: 99px; font-weight: 600; }

/* --- Blog --- */
.post-item .box-text { padding: 1rem 0; }
.post-item .post-title { font-family: 'Fredoka', sans-serif; font-size: 1.4rem; }
/* lista do blog: miniaturas uniformes (fotos verticais não estouram) */
.blog-archive article.post .article-inner { background: #fff; border: 1px solid #f7e9e2; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(91,42,134,.05); margin-bottom: 26px; }
.blog-archive .entry-image img, .blog-archive .entry-image-float img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; }
.blog-archive .entry-image-float { float: none; width: 100%; max-width: none; margin: 0; }
.blog-archive .entry-content, .blog-archive .entry-summary, .blog-archive article.post .entry-header-text { padding: 6px 26px; }
.blog-archive article.post .entry-header-text { padding-top: 20px; }
.blog-archive .entry-title { font-family: 'Fredoka', sans-serif; }
.blog-archive .entry-meta, .blog-archive .entry-divider { border: 0; }
.blog-archive .badge.post-date { display: none; }
.blog-archive .entry-actions, .blog-archive .entry-meta { padding: 0 26px 18px; }
/* sidebar do blog */
.blog-sidebar .widget, .sidebar-inner .widget { background: #fff; border: 1px solid #f7e9e2; border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; }
.widget_recent_entries li, .widget_categories li { padding: 4px 0; }

/* --- Sobre: missão/visão/valores e vídeos --- */
.op-mvv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.op-mvv > div { background: #fff; border: 1px solid #f7e9e2; border-radius: 16px; padding: 24px 22px; text-align: center; box-shadow: 0 2px 10px rgba(91,42,134,.05); }
.op-mvv .op-ct-chip { margin: 0 auto 10px; }
.op-mvv b { display: block; font-family: 'Montserrat', sans-serif; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: #5b2a86; margin-bottom: 6px; }
.op-mvv p { color: #5a4a74; font-size: .92rem; margin: 0; }
@media (max-width: 767px) { .op-mvv { grid-template-columns: 1fr; } }
.op-videos video { width: 100%; aspect-ratio: 9/16; max-height: 400px; border-radius: 14px; background: #0b0b0b; object-fit: cover; }

/* --- Contato: cartões + mapa --- */
.op-ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.op-ct-grid .op-ct-card:nth-child(n+3) { grid-column: 1 / -1; } /* endereço e horário em linha cheia */
@media (max-width: 640px) { .op-ct-grid { grid-template-columns: 1fr; } }
.op-ct-card { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #f7e9e2; border-radius: 14px; padding: 16px; box-shadow: 0 2px 10px rgba(91,42,134,.05); }
.op-ct-card b { display: block; font-family: 'Montserrat', sans-serif; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #5b2a86; margin-bottom: 3px; }
/* o telefone/e-mail não pode partir no meio nem carregar sublinhado */
.op-ct-card > div { min-width: 0; }
.op-ct-card a { display: inline-flex; align-items: center; color: var(--vk-primaria-escura) !important; border-bottom: 0; text-decoration: underline !important; text-decoration-color: rgba(230,46,115,.35) !important; text-underline-offset: 4px; line-height: 1.45; word-break: keep-all; overflow-wrap: normal; }
.op-ct-card a:hover { text-decoration-color: var(--vk-primaria) !important; color: var(--vk-primaria) !important; }
.op-ct-card .op-mi { flex: none; }
/* ao lado do formulário a coluna é estreita: cartões empilhados, senão
   o telefone parte no meio ("(27) 99873- / 3116") */
.op-ct-lado .op-ct-grid { grid-template-columns: 1fr; }
.op-ct-lado .op-ct-grid .op-ct-card:nth-child(n+3) { grid-column: auto; }
.op-ct-body { font-size: .9rem; color: #4a3a60; line-height: 1.5; margin-top: 2px; }
.op-ct-body a { color: var(--vk-primaria-escura); font-weight: 600; }
.op-ct-chip { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff6f1; flex: none; }
.op-ct-chip .op-mi { width: 20px; height: 20px; color: var(--vk-primaria); margin: 0; }
.op-ct-mapa { border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(91,42,134,.12); border: 1px solid #f7e9e2; }
.op-ct-mapa iframe { display: block; width: 100%; height: 420px; border: 0; }
.op-post-cta { background: linear-gradient(135deg, #fff6f1, #fde6ee); border: 1px solid #f1dcd3; border-radius: 18px; padding: 26px 28px; margin-top: 34px; }
.op-post-cta h3 { font-family: 'Fredoka', sans-serif; margin-bottom: 8px; }
.op-post-cta .button { margin: 4px 8px 0 0; border-radius: 99px; }
.op-post-cta .button.success { background: var(--vk-wa); }
.single-post .entry-header-text .entry-title { font-family: 'Fredoka', sans-serif; }
.single-post .entry-content h2 { font-size: 1.35rem; margin-top: 1.6em; }

/* --- Footer --- */
.footer-2 { background: var(--vk-rodape); color: #eadcf4; padding-top: 44px; }
.footer-2 h3, .footer-2 .widget-title { color: #fff; font-family: 'Fredoka', sans-serif; font-size: 1.35rem; text-transform: none; letter-spacing: 0; }
.footer-2 .widget-title::after, .footer-2 .is-divider { background: var(--vk-primaria); }
.footer-2 a { color: #eadcf4; } .footer-2 a:hover { color: var(--vk-destaque); }
.footer-2 .menu li { border-bottom: 1px solid rgba(5,189,201,.10) !important; }
.absolute-footer { background: var(--vk-rodape-escuro); color: #d6c3e8; padding: 18px 0; }
.absolute-footer .copyright-footer { font-size: .85rem; line-height: 1.7; }
.absolute-footer a { color: #f9c9dc; }
.absolute-footer a:hover { color: #fff; }
/* Ícones de pagamento maiores + selo de segurança (regras de e-commerce) */
.payment-icons { margin-bottom: 8px; }
.payment-icons .payment-icon { margin: 0 5px; }
.payment-icons .payment-icon svg { height: 34px !important; width: auto !important; }
.op-footer-trust { display: flex; gap: 20px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.op-footer-trust span { display: inline-flex; align-items: center; gap: 8px; color: #e2d2ef; font-size: .82rem; }
.op-footer-trust .op-mi { width: 18px; height: 18px; color: var(--vk-amarelo); margin: 0; }
.op-dev { display: block; margin-top: 6px; font-size: .8rem; color: #8d7f9e; }

/* Botões "is-form" do Flatsome (Aplicar cupom, Atualizar carrinho…) herdam cinza — força branco.
   Exceção: +/− de quantidade, que têm fundo claro. */
.button.is-form:not(.minus):not(.plus) { color: #fff !important; }
.button.is-form:not(.minus):not(.plus):hover { background-color: var(--vk-primaria-escura) !important; color: #fff !important; }
.quantity .button.minus, .quantity .button.plus { color: #666 !important; }
/* estado desabilitado (campo de cupom vazio): lilás claro legível, não cinza lavado */
.button.is-form:not(.minus):not(.plus):disabled, .button.is-form:not(.minus):not(.plus)[disabled],
button[name="apply_coupon"]:disabled {
    background: #f4a9c6 !important; color: #fff !important; opacity: 1 !important; cursor: not-allowed;
}

/* --- Aviso pedido WhatsApp --- */
.op-aviso-whatsapp { margin: 1.5rem 0; padding: 1rem 1.25rem; background: #eafaf0; border-left: 5px solid #25D366; border-radius: 6px; }
.op-aviso-whatsapp a { color: #128C4A; font-weight: 600; }

/* --- Mobile --- */
html, body { overflow-x: hidden; }
.row.row-full-width { max-width: 100vw; }
@media (max-width: 849px) {
    .row.row-full-width .col { padding-left: 24px; padding-right: 24px; }
    .op-hero .text-box { width: 90% !important; left: 5% !important; transform: translate(0, -50%) !important; }
    .op-hero__title { font-size: 2.4rem; }
    .op-script { font-size: 2.2rem; }
    .op-hero .button { display: block; margin: 0 0 .6rem 0; }
    .section-title-center span { font-size: 1.6rem; }
}

/* --- Quem somos: colagem de fotos --- */
.op-qs-bullets { margin: 18px 0 22px; display: grid; gap: 12px; }
.op-qs-bullet { display: flex; gap: 12px; align-items: flex-start; color: #eadcf4; font-size: .95rem; }
.op-qs-bullet .op-mi { width: 22px; height: 22px; color: var(--vk-destaque); flex: none; margin-top: 1px; }
.op-qs-bullet b { color: #fff; }
.op-qs-fotos { position: relative; display: flex; gap: 16px; justify-content: center; align-items: flex-start; padding: 10px 0; }
.op-qs-foto { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.op-qs-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.op-qs-foto--a { width: 46%; aspect-ratio: 9 / 14; }
.op-qs-foto--b { width: 40%; aspect-ratio: 9 / 14; margin-top: 46px; }
.op-qs-selo {
    position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
    background: var(--vk-primaria); color: #fff; border-radius: 99px; padding: 12px 22px; text-align: center;
    font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.35; box-shadow: 0 10px 26px rgba(230,46,115,.5);
}
.op-qs-selo b { font-size: .9rem; }
@media (max-width: 849px) { .op-qs-fotos { margin-top: 10px; } .op-qs-selo { bottom: -14px; } }

/* --- CTA final --- */
.op-cta-final {
    background: radial-gradient(circle at 78% 18%, rgba(5,189,201,.35), transparent 46%),
                linear-gradient(150deg, #e62e73 0%, #9048b6 55%, #5b2a86 100%) !important;
}
.op-cta-card {
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.25); border-radius: 18px;
    padding: 26px 24px; text-align: center; height: 100%; backdrop-filter: blur(4px); transition: transform .2s, background .2s;
}
.op-cta-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.11); }
.op-cta-card .op-mi { width: 30px; height: 30px; color: #fff; margin: 0 0 10px; }
.op-cta-card h4 { color: #fff; font-family: 'Montserrat', sans-serif; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.op-cta-card p { color: #fff; font-size: .92rem; margin-bottom: 12px; }
.op-cta-link { color: var(--vk-destaque); font-weight: 600; font-size: .88rem; }
.op-cta-link:hover { color: #fff; }

/* --- Carrinho lateral (Xoo Side Cart) nas cores da marca --- */
.xoo-wsc-modal .xoo-wsc-container { font-family: 'Montserrat', sans-serif; }
.xoo-wsc-header { background: #5b2a86 !important; color: #fff !important; border: 0 !important; }
.xoo-wsc-header .xoo-wsch-text, .xoo-wsc-header span, .xoo-wsc-header .xoo-wsch-basket { color: #fff !important; }
.xoo-wsch-basket .xoo-wsch-count { background: var(--vk-primaria) !important; color: #fff !important; }
.xoo-wsc-body { background: #fff !important; color: #333 !important; }
.xoo-wsc-body .xoo-wsc-bdy-empty, .xoo-wsc-body p { color: #666 !important; }
.xoo-wsc-footer { background: #fff6f1 !important; border-top: 1px solid #fde3ec !important; }
.xoo-wsc-modal .xoo-wsc-btn, .xoo-wsc-footer .xoo-wsc-btn {
    background: var(--vk-primaria) !important; color: #fff !important; border: 0 !important; border-radius: 99px !important; font-weight: 600;
}
.xoo-wsc-modal .xoo-wsc-btn:hover { background: var(--vk-primaria-escura) !important; }
.xoo-wsc-body a, .xoo-wsc-product-name { color: #2b2140 !important; }
.xoo-wsc-basket {
    background: var(--vk-primaria) !important; color: #fff !important; border-radius: 50% !important;
    box-shadow: 0 10px 26px rgba(230,46,115,.45) !important;
    display: grid !important; place-items: center;
    position: fixed; overflow: visible !important;
    /* o plugin fixa a cesta em right:0, colada na borda: o contador ficava
       fora da tela e aparecia cortado, com cara de defeito */
    right: 18px !important;
}
/* O conteúdo do botão é montado por assets/js/cesta.js: o desenho do
   plugin vem de uma fonte que não renderiza em parte dos aparelhos e o
   contador dele cai por cima. Escondemos o original e usamos o nosso. */
.xoo-wsc-basket.op-cesta-pronta > *:not(.op-cesta) { display: none !important; }
.op-cesta {
    position: relative; display: grid; place-items: center;
    width: 28px; height: 28px; color: #fff;
}
.op-cesta svg { width: 27px; height: 27px; display: block; }
/* o contador fica encostado no canto, mas dentro dos limites do botão */
.op-cesta__n {
    position: absolute; top: -6px; right: -6px;
    min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
    display: grid; place-items: center; border-radius: 99px;
    background: #5b2a86; color: #fff; border: 2px solid #fff;
    font: 700 11px/1 'Montserrat', sans-serif; letter-spacing: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.op-cesta__n[hidden] { display: none; }
/* O contador ficava sobre o desenho da cesta. Sai do fluxo, encosta no
   canto e é o único filho posicionado — daí o position:relative acima. */
.xoo-wsc-basket .xoo-wsc-items-count {
    position: absolute !important; top: -2px !important; right: -2px !important;
    left: auto !important; bottom: auto !important;
    min-width: 20px; width: auto; height: 20px; padding: 0 5px;
    border-radius: 99px; border: 2px solid var(--vk-primaria);
    background: #5b2a86 !important; color: #fff !important;
    display: grid; place-items: center; box-sizing: border-box;
    font: 600 11px/1 'Montserrat', sans-serif; z-index: 2;
}
.xoo-wsc-sum-col, .xoo-wsc-ft-totals { color: #2b2140 !important; }

/* --- Barra inferior mobile (WP Bottom Menu) na identidade --- */
.wp-bottom-menu { background: #fff !important; border-top: 1px solid #f7e9e2 !important; box-shadow: 0 -6px 20px rgba(31,10,54,.08) !important; }
.wp-bottom-menu .wp-bottom-menu-item-icons, .wp-bottom-menu i { color: var(--vk-primaria) !important; }
.wp-bottom-menu span, .wp-bottom-menu .wp-bottom-menu-item { color: #4a3a60 !important; font-family: 'Montserrat', sans-serif !important; }
.wp-bottom-menu .wp-bottom-menu-item.active .wp-bottom-menu-item-icons, .wp-bottom-menu .active i { color: var(--vk-primaria-escura) !important; }
.wp-bottom-menu .wp-bottom-menu-cart-count { background: var(--vk-primaria) !important; color: #fff !important; }

/* --- Cesta e painel do carrinho lateral no mobile --- */
@media (max-width: 849px) {
    .xoo-wsc-basket { bottom: 88px !important; right: 14px !important; width: 52px !important; height: 52px !important; }
    .xoo-wsc-modal .xoo-wsc-container { max-width: 92vw !important; }
}

/* Menu mobile (off-canvas) estilo app */
.mobile-sidebar .sidebar-menu { padding-top: 1rem; }
.mobile-sidebar .nav-sidebar > li > a { font-size: 1.05rem; padding: .85rem 1rem; border-radius: 10px; margin: 0 .5rem; }
.mobile-sidebar .nav-sidebar > li > a:hover { background: var(--vk-fundo-claro); color: var(--vk-primaria-escura); }
.off-canvas .mfp-content { border-radius: 0 18px 18px 0; }

/* ============================================================
   Refino de UI — ícones, hovers e mídia (v0.5.4)
   ============================================================ */

/* --- Ícones do rodapé um pouco maiores --- */
.footer-2 .op-mi { width: 20px; height: 20px; margin-right: 9px; vertical-align: -4px; }
.footer-2 .menu li a { display: flex; align-items: center; font-size: .95rem; padding: 9px 0; }
.op-footer-trust .op-mi { width: 21px; height: 21px; }
.op-footer-trust span { font-size: .86rem; }

/* --- Botões: ícone de seta + hover consistente --- */
.button, .wp-element-button, button.button { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; }
.button:hover, .wp-element-button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(194,30,94,.28); }
.button:active { transform: translateY(0); box-shadow: none; }
/* seta nos botões de navegação — no SPAN interno (o ::after no botão sobrepõe o texto) */
.section .button.is-outline:not(.icon):not(.is-form):not(:has(i)) > span::after,
.section .button.is-shade:not(.icon):not(.is-form):not(:has(i)) > span::after,
.op-post-cta .button:not(:has(i)) > span::after {
    content: "→"; display: inline-block; margin-left: .45em; transition: transform .2s; font-weight: 400;
}
.section .button:hover > span::after, .op-post-cta .button:hover > span::after { transform: translateX(4px); }
/* botões com ícone do Flatsome ganham espaçamento correto */
.button i + span, .button svg + span { margin-left: 8px; }
.op-cta-link { display: inline-flex; align-items: center; gap: 4px; transition: gap .2s, color .2s; }
.op-cta-link:hover { gap: 9px; }
/* links de conteúdo */
.entry-content a:not(.button), .op-ct-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s; }
.entry-content a:not(.button):hover { color: var(--vk-primaria); }
/* cards clicáveis */
.product-small.box, .op-vid, .op-vd, .op-ct-card, .op-cta-card, .post-item .box { transition: transform .2s ease, box-shadow .2s ease; }

/* --- Post do blog: imagem destacada sem dominar a tela --- */
.single-post .entry-header .entry-image img,
.single-post .featured-image img,
.single-post .entry-content > p:first-child > img {
    max-height: 460px; width: 100%; object-fit: cover; border-radius: 16px;
}
.single-post .entry-image { margin-bottom: 22px; }
.single-post .entry-content { font-size: 1.02rem; line-height: 1.75; }
.single-post .entry-content img { border-radius: 14px; max-height: 520px; width: auto; max-width: 100%; object-fit: cover; }
.single-post .entry-header-text { padding-bottom: 8px; }
.single-post .entry-content h2 { color: #2b2140; }
.single-post .entry-content h2::before { content: "⭐ "; font-size: .8em; }
@media (max-width: 640px) {
    .single-post .entry-header .entry-image img, .single-post .featured-image img { max-height: 260px; }
    .single-post .entry-content img { max-height: 340px; }
}

/* Compartilhar: os ícones do Flatsome vinham cinza-claro sobre fundo
   claro, quase invisíveis e sem hierarquia (v1.3.9). */
/* Restrito ao rodapé do post: `.single-post .social-icons` pegava também
   as redes do cabeçalho e do rodapé, e o rótulo "Compartilhar:" aparecia
   na barra do topo. */
.single-post .entry-content .social-icons,
.single-post .blog-share .social-icons,
.single-post .entry-actions .social-icons {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 8px 0 0;
}
.single-post .entry-content .social-icons::before,
.single-post .blog-share .social-icons::before,
.single-post .entry-actions .social-icons::before {
    content: "Compartilhar:"; display: block; width: 100%; text-align: center;
    font: 600 .74rem 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase;
    color: #8d7f9e; margin-bottom: 10px;
}
.single-post .entry-content .social-icons a.button.icon,
.single-post .blog-share .social-icons a.button.icon,
.single-post .entry-actions .social-icons a.button.icon,
.single-post .entry-content .social-icons a.icon,
.single-post .blog-share .social-icons a.icon,
.single-post .entry-actions .social-icons a.icon {
    width: 42px !important; height: 42px !important; margin: 0 !important;
    border: 1px solid #f1dcd3 !important; border-radius: 50% !important;
    background: #fff !important; color: var(--vk-primaria-escura) !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(91,42,134,.07);
    transition: transform .18s, background .18s, color .18s, border-color .18s;
}
.single-post .entry-content .social-icons a.button.icon i,
.single-post .blog-share .social-icons a.button.icon i,
.single-post .entry-content .social-icons a.icon i,
.single-post .blog-share .social-icons a.icon i { font-size: 17px !important; opacity: 1 !important; }
.single-post .entry-content .social-icons a:hover,
.single-post .blog-share .social-icons a:hover {
    transform: translateY(-3px);
    background: var(--vk-primaria) !important; color: #fff !important; border-color: var(--vk-primaria) !important;
}
/* cada rede com a própria cor no hover */
.single-post .entry-content .social-icons a.whatsapp:hover { background: #25D366 !important; border-color: #25D366 !important; }
.single-post .entry-content .social-icons a.facebook:hover { background: #1877F2 !important; border-color: #1877F2 !important; }
.single-post .entry-content .social-icons a.twitter:hover  { background: #0f1419 !important; border-color: #0f1419 !important; }
.single-post .entry-content .social-icons a.email:hover    { background: #6f6182 !important; border-color: #6f6182 !important; }
.single-post .entry-content .social-icons a.pinterest:hover{ background: #E60023 !important; border-color: #E60023 !important; }
.single-post .entry-content .social-icons a.linkedin:hover { background: #0A66C2 !important; border-color: #0A66C2 !important; }

/* CTA do post: os dois botões ficam soltos num <p>, com larguras
   diferentes e o do WhatsApp quebrando em duas linhas. */
.single-post .entry-content p:has(> .button) {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch;
    margin-top: 18px;
}
.single-post .entry-content p:has(> .button) > .button {
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0; min-height: 52px; padding: 12px 26px;
    white-space: nowrap; text-align: center; line-height: 1.2;
}
@media (max-width: 640px) {
    /* empilhados e com a mesma largura: lado a lado ficavam desalinhados */
    .single-post .entry-content p:has(> .button) { flex-direction: column; gap: 10px; }
    .single-post .entry-content p:has(> .button) > .button {
        width: 100%; white-space: normal; font-size: .92rem; padding: 12px 18px;
    }
}

/* Navegação entre posts: dois cartões. O padrão do Flatsome cortava o
   título longo na borda da coluna (v0.7.4). */
.single-post .next-prev-nav {
    display: flex; flex-wrap: wrap; gap: 14px;
    border: 0 !important; padding: 0 !important; margin: 30px 0 6px;
}
.single-post .next-prev-nav > .flex-col { flex: 1 1 240px; min-width: 0; padding: 0; text-align: left !important; }
.single-post .next-prev-nav .nav-previous:not(.flex-col),
.single-post .next-prev-nav .nav-next:not(.flex-col) {
    background: #fff; border: 1px solid #f7e9e2; border-radius: 14px; padding: 14px 16px; height: 100%;
    box-shadow: 0 2px 10px rgba(91,42,134,.05); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.single-post .next-prev-nav .nav-previous:not(.flex-col):hover,
.single-post .next-prev-nav .nav-next:not(.flex-col):hover {
    transform: translateY(-2px); border-color: var(--vk-destaque); box-shadow: 0 12px 26px rgba(91,42,134,.14);
}
.single-post .next-prev-nav .nav-previous:not(.flex-col)::before,
.single-post .next-prev-nav .nav-next:not(.flex-col)::before {
    display: block; margin-bottom: 6px; color: var(--vk-primaria);
    font: 600 .68rem 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.single-post .next-prev-nav .nav-previous:not(.flex-col)::before { content: "← Dica anterior"; }
.single-post .next-prev-nav .nav-next:not(.flex-col)::before { content: "Próxima dica →"; }
.single-post .next-prev-nav a {
    display: block; color: #2b2140 !important; font: 500 .95rem/1.4 'Montserrat', sans-serif;
    white-space: normal; overflow-wrap: anywhere;
}
.single-post .next-prev-nav a:hover { color: var(--vk-primaria-escura) !important; }
.single-post .next-prev-nav .hide-for-small { display: none; }   /* as setas já estão no rótulo */

/* ============================================================
   Sidebar do blog — bloco de ajuda (v1.7.2)
   O CTA vinha solto no fim da coluna, com o botão quebrando o
   rótulo em duas linhas.
   ============================================================ */
#secondary .widget_custom_html {
    background: linear-gradient(160deg, #fff6f1, #fde6ee);
    border: 1px solid #f1dcd3; border-radius: 16px;
    padding: 22px 20px 24px !important; text-align: center;
}
#secondary .widget_custom_html p:first-child {
    font: 600 1rem/1.35 'Montserrat', sans-serif !important; color: #2b2140 !important;
    margin: 0 0 14px !important;
}
#secondary .widget_custom_html .button {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 9px;
    width: 100%; margin: 0 0 12px !important; padding: 12px 14px !important;
    background: var(--vk-wa) !important; border-color: var(--vk-wa) !important; color: #fff !important;
    font: 600 .84rem 'Montserrat', sans-serif !important;
    /* a coluna tem ~218px: nowrap estouraria. Quebra equilibrada e centrada. */
    white-space: normal; text-wrap: balance; line-height: 1.25; min-height: 50px;
    box-shadow: 0 8px 20px rgba(37,211,102,.3);
}
#secondary .widget_custom_html .button:hover { background: #1fb85a !important; border-color: #1fb85a !important; }
#secondary .widget_custom_html .button::before {
    content: ""; width: 19px; height: 19px; flex: none;
    background: no-repeat center / contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath d='M16 3C9 3 3.3 8.6 3.3 15.5c0 2.4.7 4.7 2 6.7L3.5 29l7-1.8a12.8 12.8 0 0 0 5.5 1.2c7 0 12.7-5.6 12.7-12.5S23 3 16 3Zm0 22.8c-1.8 0-3.6-.5-5.2-1.4l-.4-.2-4.1 1.1 1.1-4-.2-.4a10.1 10.1 0 0 1-1.6-5.4C5.6 10 10.3 5.5 16 5.5S26.4 10 26.4 15.5 21.7 25.8 16 25.8Z'/%3E%3C/svg%3E");
}
#secondary .widget_custom_html p:last-child { margin: 0 !important; }
#secondary .widget_custom_html a:not(.button) {
    display: inline-block; font: 600 .84rem 'Montserrat', sans-serif;
    color: var(--vk-primaria-escura) !important; padding: 6px 0;
}
#secondary .widget_custom_html a:not(.button):hover { color: var(--vk-primaria) !important; }

/* categoria única não precisa de contorno pesado */
#secondary .wp-block-categories-list li a::before { margin-right: 2px; }

/* Sidebar do blog: títulos com a marca, lista respirando e alvo de toque maior */
.blog-sidebar .widget-title, .sidebar-inner .widget-title, #secondary .wp-block-heading {
    display: block; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid #fde9f0;
    font: 600 .95rem 'Montserrat', sans-serif !important; letter-spacing: .02em; color: #2b2140; text-transform: none;
}
#secondary .widget ul { margin: 0; list-style: none; }
#secondary .widget li { border-bottom: 1px solid #fff6f1; }
#secondary .widget li:last-child { border-bottom: 0; }
#secondary .widget li a {
    display: block; padding: 9px 0; color: #4a3a63 !important;
    font: 400 .9rem/1.4 'Montserrat', sans-serif; transition: color .15s, padding-left .15s;
}
#secondary .widget li a:hover { color: var(--vk-primaria-escura) !important; padding-left: 6px; }
#secondary .wp-block-categories-list li a::before { content: "🌿 "; }

/* ============================================================
   Páginas internas — FAQ, Contato, Conta, Favoritos (v0.5.5)
   ============================================================ */

/* --- FAQ --- */
.op-faq-hero { background: linear-gradient(135deg,#fff6f1,#fde6ee); border-radius: 20px; padding: 34px 30px; text-align: center; margin-bottom: 28px; }
.op-faq-hero .op-mi { width: 34px; height: 34px; color: var(--vk-primaria); }
.op-faq-busca { max-width: 460px; margin: 18px auto 0; position: relative; }
.op-faq-busca input {
    width: 100%; margin: 0; border-radius: 99px; border: 1px solid #f1dcd3;
    padding: 13px 20px 13px 46px; height: 50px; box-shadow: 0 2px 10px rgba(91,42,134,.06);
}
/* a lupa fica presa ao topo do campo: com o aviso visível, centrar pelo
   container jogava o ícone para fora dele */
.op-faq-busca .op-mi {
    position: absolute; left: 17px; top: 15px; margin: 0;
    width: 20px; height: 20px; color: #9a8fae; pointer-events: none;
}
.op-faq-cats { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 18px 0 6px; }
.op-faq-cats button { background: #fff; border: 1px solid #f1dcd3; color: #5a4a74; border-radius: 99px; padding: 7px 16px; font: 500 .82rem 'Montserrat',sans-serif; cursor: pointer; transition: .2s; }
.op-faq-cats button:hover { border-color: var(--vk-primaria); color: var(--vk-primaria-escura); }
.op-faq-cats button.is-on { background: var(--vk-primaria); border-color: var(--vk-primaria); color: #fff; }
.accordion .accordion-item { background: #fff; border: 1px solid #f7e9e2 !important; border-radius: 14px; margin-bottom: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(91,42,134,.05); transition: box-shadow .2s, border-color .2s; }
.accordion .accordion-item:hover { box-shadow: 0 8px 22px rgba(91,42,134,.12); border-color: #f1dcd3 !important; }
.accordion .accordion-title { font-family: 'Montserrat',sans-serif !important; font-weight: 600; font-size: 1rem; color: #2b2140; padding: 16px 20px !important; border: 0 !important; transition: background .2s; }
.accordion .accordion-title:hover { background: #fffaf7; }
.accordion .accordion-title.active { background: #fff6f1; color: var(--vk-primaria-escura); }
.accordion .accordion-title .toggle { color: var(--vk-primaria); }
.accordion .accordion-inner { padding: 4px 20px 20px !important; color: #4a3a60; line-height: 1.7; }
.op-faq-ajuda { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 30px; }
.op-faq-ajuda a { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid #f7e9e2; border-radius: 14px; padding: 16px; color: #2b2140; transition: .2s; }
.op-faq-ajuda a:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(91,42,134,.14); border-color: #f1dcd3; }
.op-faq-ajuda .op-mi { width: 24px; height: 24px; color: var(--vk-primaria); flex: none; }
.op-faq-ajuda b { display: block; font-size: .9rem; } .op-faq-ajuda small { color: #8d7f9e; font-size: .78rem; }
@media (max-width:767px){ .op-faq-ajuda{grid-template-columns:1fr} }

/* --- Lista de favoritos --- */
.tinv-wishlist .tinvwl-table, .tinv-wishlist table.tinvwl-table { border: 1px solid #f7e9e2; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(91,42,134,.06); background: #fff; }
.tinv-wishlist table thead th { background: #fff6f1 !important; color: #5b2a86 !important; font: 600 .72rem 'Montserrat',sans-serif !important; text-transform: uppercase; letter-spacing: .08em; padding: 14px 12px !important; border: 0 !important; }
.tinv-wishlist table td { padding: 14px 12px !important; border-bottom: 1px solid #fff3ee !important; vertical-align: middle; }
.tinv-wishlist table tbody tr:hover { background: #fffaf7; }
.tinv-wishlist .product-thumbnail img { border-radius: 10px; }
.tinv-wishlist .product-name a { font-family: 'Montserrat',sans-serif; font-weight: 600; color: var(--vk-primaria-escura); }
.tinv-wishlist .tinvwl-buttons-group button, .tinv-wishlist .button { border-radius: 99px !important; background: var(--vk-primaria) !important; color: #fff !important; border: 0 !important; }
.tinv-wishlist .tinvwl-buttons-group button:hover { background: var(--vk-primaria-escura) !important; }
.tinv-wishlist .social-buttons { border-top: 1px dashed #f1dcd3; padding-top: 16px; }
.op-fav-vazio { text-align: center; background: linear-gradient(135deg,#fff6f1,#fde6ee); border-radius: 20px; padding: 46px 28px; }
.op-fav-vazio .op-mi { width: 46px; height: 46px; color: var(--vk-primaria); margin-bottom: 10px; }
.op-fav-vazio h3 { font-family: 'Fredoka',sans-serif; font-size: 1.7rem; margin-bottom: 6px; }
.op-fav-vazio p { color: #5a4a74; margin-bottom: 18px; }

/* --- Área do cliente (logada) --- */
.woocommerce-account .woocommerce-MyAccount-content { background: #fff; border: 1px solid #f7e9e2; border-radius: 18px; padding: 26px 28px; box-shadow: 0 2px 12px rgba(91,42,134,.06); }
.op-acc-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 12px; margin: 18px 0 22px; }
.op-acc-card { display: flex; gap: 12px; align-items: center; background: #fffaf7; border: 1px solid #f7e9e2; border-radius: 14px; padding: 16px; color: #2b2140; transition: .2s; }
.op-acc-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(91,42,134,.14); background: #fff; }
.op-acc-card .op-mi { width: 24px; height: 24px; color: var(--vk-primaria); flex: none; }
.op-acc-card b { display: block; font-size: .92rem; } .op-acc-card small { color: #8d7f9e; font-size: .76rem; }
.op-acc-saudacao { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg,#c21e5e,#e62e73); color: #fff; border-radius: 18px; padding: 22px 26px; margin-bottom: 18px; }
.op-acc-saudacao h2 { color: #fff; font-family: 'Fredoka',sans-serif; margin: 0 0 2px; font-size: 1.5rem; }
.op-acc-saudacao p { margin: 0; color: #fde3ec; font-size: .9rem; }
.op-acc-saudacao .op-mi { width: 30px; height: 30px; color: #fff; }
.woocommerce-account .woocommerce-orders-table, .woocommerce-account table.shop_table { border-radius: 14px; overflow: hidden; border: 1px solid #f7e9e2; }
.woocommerce-account table.shop_table th { background: #fff6f1; color: #5b2a86; font: 600 .72rem 'Montserrat',sans-serif; text-transform: uppercase; letter-spacing: .08em; }

/* --- Contato: destaques e lateral --- */
.op-ct-destaque { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: linear-gradient(135deg,#eafaf0,#dcf5e5); border: 1px solid #bfe9cf; border-radius: 16px; padding: 18px 20px; margin-top: 14px; }
.op-ct-destaque .op-mi { width: 26px; height: 26px; color: #1f9d55; flex: none; }
.op-ct-destaque b { display: block; color: #14532d; font-size: .95rem; }
.op-ct-destaque span { color: #2f6b46; font-size: .86rem; }
.op-ct-destaque .button { margin: 0 0 0 auto; }
.op-ct-lado { position: sticky; top: 100px; }
.op-ct-visita { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid #f7e9e2; border-radius: 14px; padding: 14px 16px; margin: 12px 0; }
.op-ct-visita .op-mi { width: 22px; height: 22px; color: var(--vk-primaria); flex: none; }
.op-ct-visita b { display: block; font-size: .9rem; color: #2b2140; }
.op-ct-visita span { font-size: .82rem; color: #6f6182; }
@media (max-width: 849px) { .op-ct-lado { position: static; } .op-ct-destaque .button { margin: 8px 0 0; width: 100%; } }

/* --- Acordeão do FAQ: ícone +/− em vez da seta --- */
/* O toggle do Flatsome é absoluto à esquerda: sem reservar espaço ele
   cobria a primeira palavra da pergunta (v0.8.2). */
.op-faq-lista .accordion-title { position: relative; padding: 17px 22px 17px 60px !important; line-height: 1.4; }
.op-faq-lista .accordion-title .toggle {
    position: absolute; left: 18px; top: 50%; margin: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; background: #fff6f1; color: var(--vk-primaria);
    transform: translateY(-50%);
    transition: transform .25s, background .2s, color .2s;
}
.op-faq-lista .accordion-title:hover .toggle { background: var(--vk-destaque); color: #fff; }
.op-faq-lista .accordion-title.active .toggle { transform: translateY(-50%) rotate(45deg); background: var(--vk-primaria); color: #fff; }
.op-faq-lista .accordion-title .toggle i { font-size: 15px; }
/* item aberto marcado por uma faixa roxa, e resposta alinhada à pergunta */
.op-faq-lista .accordion-item { position: relative; }
.op-faq-lista .accordion-item:has(.accordion-title.active) { border-color: #f1dcd3 !important; box-shadow: 0 10px 26px rgba(91,42,134,.13); }
.op-faq-lista .accordion-item:has(.accordion-title.active)::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--vk-primaria), var(--vk-destaque));
}
.op-faq-lista .accordion-inner { padding: 2px 22px 22px 60px !important; }
@media (max-width: 640px) {
    .op-faq-lista .accordion-title { padding: 15px 16px 15px 52px !important; font-size: .94rem; }
    .op-faq-lista .accordion-title .toggle { left: 13px; width: 26px; height: 26px; }
    .op-faq-lista .accordion-inner { padding: 2px 16px 18px 52px !important; }
}
.op-faq-busca { position: relative; }
.op-faq-vazio { display: block; margin-top: 12px; font-size: .85rem; color: #6f6182; }
/* sem isto o `display:block` anulava o atributo hidden e o aviso de
   "nenhuma pergunta encontrada" ficava visível o tempo todo */
.op-faq-vazio[hidden] { display: none !important; }
.op-faq-vazio a { color: var(--vk-primaria-escura); font-weight: 600; }

/* ============================================================
   Responsivo — correções mobile/tablet (v0.5.9)
   ============================================================ */

/* 1) Carrinho lateral: largura vem da configuração do plugin; aqui só o teto no mobile */
 (max-width: 480px) { .xoo-wsc-container, .xoo-wsc-slider { max-width: 92vw !important; } }
.xoo-wsc-img-col img { max-width: 88px; }
@media (max-width: 849px) {
    .xoo-wsc-container { width: min(92vw, 400px) !important; }
    .xoo-wsc-modal:not(.xoo-wsc-active):not(.xoo-wsc-cart-active) { pointer-events: none; }
    .xoo-wsc-notice-container, .xoo-wsc-notices, .xoo-wsc-header, .xoo-wsch-top { max-width: 100% !important; box-sizing: border-box; }
}
/* trava geral: nada pode ultrapassar a viewport no mobile */
@media (max-width: 849px) {
    html, body { overflow-x: hidden !important; max-width: 100vw; }
    body > *:not(.op-wa):not(.op-lgpd):not(.op-lgpd-modal):not(.xoo-wsc-modal) { max-width: 100vw; }
    img, video, iframe, table { max-width: 100%; }
}

/* 2) Alvos de toque com pelo menos 40px (acessibilidade/UX mobile) */
@media (max-width: 849px) {
    .nav a, .mobile-sidebar a, .woocommerce-MyAccount-navigation a, .op-faq-ajuda a, .op-acc-card { min-height: 44px; display: flex; align-items: center; }
    .button, button, input[type=submit] { min-height: 44px; }
    .quantity .button.minus, .quantity .button.plus { min-height: 38px; min-width: 38px; }
    .wp-bottom-menu-item { min-height: 52px; }
    .header-main .icon.button.circle { width: 42px; height: 42px; }
    .subsubsub a, .tablenav a { min-height: 38px; display: inline-flex; align-items: center; }
}

/* 3) Tipografia e espaçamento no mobile */
@media (max-width: 640px) {
    body { font-size: 16px; }
    h1, .entry-title { font-size: 1.75rem !important; line-height: 1.2; }
    h2 { font-size: 1.4rem !important; }
    .lead { font-size: 1rem; }
    .section-title-center span, .op-vids__titulo { font-size: 1.45rem; }
    .op-kicker, .op-hero__kicker { font-size: .7rem; letter-spacing: .18em; }
    .row .col { padding-bottom: 18px; }
    .op-ct-card, .op-cta-card, .op-acc-card, .op-faq-ajuda a { padding: 14px 16px; }
    .op-ct-mapa iframe { height: 280px; }
    .op-faq-hero { padding: 24px 18px; }
    .op-acc-saudacao { padding: 18px; flex-direction: column; text-align: center; }
    .op-mvv > div { padding: 20px 18px; }
}

/* 4) Tablet: grades que ficavam apertadas em 2 colunas */
@media (min-width: 641px) and (max-width: 1024px) {
    .op-ct-grid { grid-template-columns: 1fr 1fr; }
    .op-faq-ajuda { grid-template-columns: 1fr 1fr; }
    .op-acc-cards { grid-template-columns: repeat(2, 1fr); }
    .op-cta-fotos { grid-template-columns: repeat(4, 1fr); }
    .op-selos { grid-template-columns: 1fr; }
    .header-bottom .nav > li > a { padding: 9px 10px !important; font-size: .72rem; }
    .header-bottom .nav > li > a .op-mi { width: 22px; height: 22px; }
}

/* 5) Rodapé no mobile: colunas empilhadas com respiro */
@media (max-width: 767px) {
    .footer-2 .col { padding-bottom: 8px; }
    .footer-2 .widget-title { margin-bottom: 6px; }
    .payment-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
    .payment-icons .payment-icon svg { height: 26px !important; }
    .op-footer-trust { flex-direction: column; gap: 8px; align-items: flex-start; padding: 0 16px; }
    .absolute-footer .copyright-footer { padding: 0 16px; font-size: .8rem; }
    .absolute-footer { padding-bottom: 88px !important; }
}

/* 6) Tabelas do carrinho/conta viram cartões no celular */
@media (max-width: 640px) {
    .woocommerce-cart table.cart thead, .woocommerce-account .shop_table thead { display: none; }
    .woocommerce-cart table.cart tr, .woocommerce-account .shop_table tbody tr {
        display: block; border: 1px solid #f7e9e2; border-radius: 14px; margin-bottom: 12px; padding: 10px; background: #fff;
    }
    .woocommerce-cart table.cart td, .woocommerce-account .shop_table tbody td {
        display: flex; justify-content: space-between; align-items: center; gap: 12px;
        border: 0; border-bottom: 1px solid #fff3ee; padding: 9px 4px !important; text-align: right;
    }
    .woocommerce-cart table.cart td::before, .woocommerce-account .shop_table tbody td::before {
        content: attr(data-title); font: 600 .74rem 'Montserrat',sans-serif; color: #6f6182; text-transform: uppercase; letter-spacing: .06em; text-align: left;
    }
    .woocommerce-cart table.cart td.product-remove::before, .woocommerce-cart table.cart td.actions::before { content: ""; }
    .woocommerce-cart table.cart td.actions { flex-direction: column; gap: 8px; }
    .woocommerce-cart table.cart td.actions .button, .woocommerce-cart .coupon input { width: 100%; }
}

/* Carrinho lateral — refino visual (desktop e mobile) */
.xoo-wsc-container { box-shadow: -12px 0 40px rgba(31,10,54,.25) !important; }
.xoo-wsc-header { padding: 16px 18px !important; }
.xoo-wsch-text { font: 600 1rem 'Montserrat',sans-serif !important; }
.xoo-wsc-body { padding: 6px 14px !important; }
.xoo-wsc-product { border-bottom: 1px solid #fff3ee !important; padding: 12px 0 !important; }
.xoo-wsc-product-name, .xoo-wsc-pname a { font: 600 .92rem 'Montserrat',sans-serif !important; color: #2b2140 !important; line-height: 1.35; }
.xoo-wsc-price, .xoo-wsc-subtotal { color: var(--vk-primaria-escura) !important; font-weight: 600; }
/* segurança: se o parcelamento escapar para o carrinho lateral, não quebra a linha */
.xoo-wsc-product .op-parcelas, .widget_shopping_cart .op-parcelas { display: none !important; }
.xoo-wsc-qty-price, .xoo-wsc-price { white-space: nowrap; }
.xoo-wsc-img-col img { border-radius: 10px; }
.xoo-wsc-footer { padding: 14px 16px 18px !important; }
.xoo-wsc-ft-amt-value, .xoo-wsc-ft-totals { font-size: 1.05rem !important; }
.xoo-wsc-btn { padding: 12px 16px !important; font: 600 .9rem 'Montserrat',sans-serif !important; margin-bottom: 8px !important; }
.xoo-wsc-btn.xoo-wsc-cart-btn { background: #fff !important; color: var(--vk-primaria-escura) !important; border: 1.5px solid var(--vk-destaque) !important; }
.xoo-wsc-qty-box { border-radius: 8px; }

/* O painel do carrinho fica fora da tela quando fechado e criava scroll horizontal
   (o site "torto"/deslocado). Trava em todas as larguras. */
html { overflow-x: hidden; }
body { overflow-x: clip; }
/* Esconde só o painel deslizante — a cesta flutuante continua visível.
   Ao abrir, o plugin marca .xoo-wsc-cart-active (carrinho) ou .xoo-wsc-active;
   as duas precisam constar, senão o painel abre invisível. */
.xoo-wsc-modal:not(.xoo-wsc-active):not(.xoo-wsc-cart-active) .xoo-wsc-container,
.xoo-wsc-modal:not(.xoo-wsc-active):not(.xoo-wsc-cart-active) .xoo-wsc-slider { visibility: hidden; }
/* Estado aberto: força posição e visibilidade — a folha do plugin usa
   !important em `right`, então sem isto o painel abria fora da tela. */
.xoo-wsc-modal.xoo-wsc-active .xoo-wsc-container,
.xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container {
    visibility: visible !important;
    right: 0 !important;
}
.xoo-wsc-modal.xoo-wsc-slider-active .xoo-wsc-slider {
    visibility: visible !important;
    right: 0 !important;
}
/* A cesta flutuante fica DENTRO do modal. Como visibility e pointer-events
   são herdados, esconder/desativar o modal fechado desativava junto o botão
   — no celular o clique na cesta simplesmente não abria o carrinho. */
.xoo-wsc-basket {
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity .2s, transform .2s;
}
/* Com o painel aberto a cesta ficava por cima dos botões do carrinho.
   Ela some enquanto o painel está aberto — quem fecha usa o X. */
.xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-basket,
.xoo-wsc-modal.xoo-wsc-active .xoo-wsc-basket,
html.xoo-wsc-cart-active .xoo-wsc-basket {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(.85);
}
/* Mesma coisa com o chat de atendimento aberto: a cesta e o dock ficavam
   por cima do popup, tampando o campo de mensagem. */
body:has(.op-wa__popup:not([hidden])) .xoo-wsc-basket,
body.op-wa-aberto .xoo-wsc-basket {
    opacity: 0 !important; pointer-events: none !important; transform: scale(.85);
}
body:has(.op-wa__popup:not([hidden])) .op-dock,
body.op-wa-aberto .op-dock { opacity: 0 !important; pointer-events: none !important; }

/* ============================================================
   Botões do cabeçalho: hover legível (v0.7.2)
   O CSS do Customizer do Flatsome aplica fundo branco E texto branco
   no hover (.header-main .header-button > .button:hover), deixando o
   botão "Área do cliente" invisível. Precisa de seletor mais específico.
   ============================================================ */
body .header-main .header-button > a.button:hover,
body .header-main .header-button > button.button:hover,
body .header .header-button > a.button:hover {
    background-color: var(--vk-primaria) !important;
    border-color: var(--vk-primaria) !important;
    color: #fff !important;
}
body .header-main .header-button > a.button:hover > span,
body .header-main .header-button > a.button:hover i,
body .header-main .header-button > a.button:hover svg { color: #fff !important; fill: currentColor; }

/* mesmo caso no contador do carrinho do cabeçalho */
/* ============================================================
   Carrinho do cabeçalho (v1.7.7) — vale em todas as larguras.
   O tema usa `image-icon`, que espera uma imagem do Customizer; sem ela
   o elemento fica com 0x0 e o ícone simplesmente não aparece. O desenho
   passa a ser um SVG de fundo.
   ============================================================ */
body .header .cart-icon.image-icon,
body .header-main .cart-icon.image-icon,
body .header-top .cart-icon.image-icon {
    display: inline-block !important;
    width: 30px !important; height: 30px !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 26px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") !important;
    border: 0 !important; position: relative !important;
}

/* O contador do carrinho no cabeçalho vinha do tema como um anel vazado
   (fundo transparente + borda circular) desenhado por cima da sacola —
   parecia um defeito. Vira uma bolha sólida no canto. */
body .header .cart-icon strong,
body .header-top .cart-icon strong,
body .header-main .cart-icon strong,
body .header-main .current-dropdown .cart-icon strong {
    position: absolute !important;
    top: -7px !important; right: -9px !important; left: auto !important; bottom: auto !important;
    min-width: 19px !important; width: auto !important; height: 19px !important;
    padding: 0 5px !important; box-sizing: border-box !important;
    display: grid !important; place-items: center;
    background-color: #5b2a86 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    border-radius: 99px !important;
    font: 700 10px/1 'Montserrat', sans-serif !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
body .header .cart-icon strong::after { content: none !important; }   /* o tema desenha um segundo anel */
body .header .cart-icon { overflow: visible !important; }

/* ============================================================
   Mobile: header, logo e ícones (v0.6.3)
   ============================================================ */
@media (max-width: 849px) {
    /* Altura automática em toda a cadeia do cabeçalho: com altura fixa a
       logo crescia por baixo e a barra de busca passava por cima dela. */
    .header, .header-wrapper, .header-inner,
    .header-main, .header-main .flex-row,
    .header-bottom, .header-bottom .flex-row {
        height: auto !important; min-height: 0 !important;
    }
    .header-bottom { position: static !important; }
    /* A barra de categorias tem uma única coluna `hide-for-medium`: no
       celular ela some e a faixa fica vazia, criando um vão entre a logo
       e a busca. Como a busca própria assume esse lugar, a faixa sai. */
    .header-bottom { display: none !important; }
    .header-main .flex-row { min-height: 108px !important; padding: 6px 0 4px; }
    /* respiro nas laterais: o botão do menu ficava colado na borda */
    .header-main .flex-row,
    .header-main .flex-row.container,
    .stuck .header-main .flex-row,
    .header .flex-row.container { padding-left: 12px !important; padding-right: 12px !important; }
    /* Cabeçalho fixo ao rolar: o Flatsome encolhe a faixa mas a logo
       mantinha a altura e transbordava para fora dela. */
    /* Cabeçalho fixo (.stuck).
       Encolher a logo por CSS não era confiável: o Customizer do Flatsome
       usa `.stuck #logo img` (com ID) e havia disputa de especificidade a
       cada ajuste. A solução que não depende disso é dar à faixa altura
       suficiente para a logo caber inteira, e travar a sobra com overflow. */
    .stuck .header-main,
    .stuck .header-main .flex-row {
        min-height: 92px !important;
        height: auto !important;
        padding-top: 4px !important; padding-bottom: 4px !important;
        overflow: hidden;
    }
    .stuck .logo, .stuck #logo, .stuck .logo a, .stuck #logo a {
        display: flex !important; align-items: center; justify-content: center;
        max-height: 84px !important; height: auto !important; line-height: 1 !important;
        overflow: hidden;
    }
    body .stuck .logo img,
    body .stuck #logo img,
    body .stuck .header-main .logo img,
    body .stuck img.header_logo,
    body .stuck img.header-logo {
        width: auto !important; max-width: 190px !important;
        max-height: 84px !important; height: auto !important;
        object-fit: contain; display: block;
    }
    .stuck .op-busca-mobile { padding: 6px 12px 8px; }
    .stuck .op-busca-mobile input[type=search],
    .stuck .op-busca-mobile button { height: 40px; }
    /* logo grande, mas sem estourar a faixa do cabeçalho */
    .header-main .logo { max-height: none !important; margin: 0 auto; }
    .header-main .logo img {
        width: 204px !important; max-width: 60vw;
        height: auto !important; max-height: 108px !important;
        object-fit: contain; display: block;
    }
    .header .searchform .search-field::placeholder { color: #6f6182; opacity: 1; }
    /* ícones do topo: mesmo tamanho e alinhados */
    .header-top .html .social-icons a, .header-top .icon.button.circle {
        width: 34px !important; height: 34px !important; line-height: 34px !important; min-height: 0;
        display: inline-flex !important; align-items: center; justify-content: center;
    }
    .header-top .icon.button.circle i, .header-top .social-icons a i { font-size: 15px !important; line-height: 1 !important; }
    .header-top .nav > li { margin: 0 2px !important; }
    /* botão do menu (hambúrguer): quadrado, sem esticar (v0.7.9)
       sem isto ele herdava o padding dos botões e virava um retângulo alto */
    li.nav-icon a.button {
        width: 42px !important; height: 42px !important; min-height: 0 !important;
        padding: 0 !important; margin: 0 !important; border-radius: 12px !important;
        display: inline-flex !important; align-items: center; justify-content: center;
        line-height: 1 !important;
    }
    li.nav-icon a.button i, li.nav-icon a.button .icon-menu {
        font-size: 22px !important; line-height: 1 !important; margin: 0 !important; top: 0 !important;
    }
    /* contador do carrinho: círculo com o número centralizado */
    .header .cart-icon strong {
        box-sizing: border-box !important;
        width: 22px !important; min-width: 22px !important; height: 22px !important;
        border-radius: 50% !important; line-height: 1 !important; font-size: 11px !important;
        display: grid !important; place-items: center; padding: 0 !important;
    }
    .header .cart-icon { display: inline-flex; align-items: center; }
    .nav-icon-top .icon-menu { font-size: 20px; }
    /* barra inferior: ícones proporcionais */
    .wp-bottom-menu .wp-bottom-menu-item-icons { font-size: 21px !important; line-height: 1 !important; }
    .wp-bottom-menu span { font-size: 11px !important; }
}
@media (min-width: 850px) and (max-width: 1024px) {
    .header-main .logo img { width: 170px !important; }
}

/* ============================================================
   Menu lateral mobile (off-canvas) — proporções corretas (v0.6.4)
   ============================================================ */
@media (max-width: 849px) {
    .mfp-content .mobile-sidebar, .off-canvas-left .mfp-content, .off-canvas-right .mfp-content { width: 300px !important; max-width: 86vw !important; }
    .mobile-sidebar { padding: 0 !important; }
    .mobile-sidebar .sidebar-menu { padding: 10px 0 26px !important; }
    /* itens compactos */
    .mobile-sidebar .nav-sidebar > li > a,
    .mobile-sidebar li.menu-item > a {
        font-size: .92rem !important; padding: 12px 16px !important; min-height: 46px;
        letter-spacing: .01em; text-transform: none !important; font-weight: 500;
    }
    .mobile-sidebar .nav-sidebar > li { border-bottom: 1px solid rgba(5,189,201,.12) !important; }
    .mobile-sidebar .op-mi { width: 19px !important; height: 19px !important; margin-right: 10px; }
    /* cabeçalho do menu: redes + botões */
    .mobile-sidebar .social-icons { display: flex; gap: 8px; padding: 14px 16px 6px; }
    .mobile-sidebar .social-icons a { width: 38px !important; height: 38px !important; display: inline-flex !important; align-items: center; justify-content: center; }
    .mobile-sidebar .header-button, .mobile-sidebar .html_nav_position_text { padding: 6px 16px 10px; }
    .mobile-sidebar .header-button .button { width: 100%; margin: 0 0 8px; border-radius: 99px; min-height: 44px; }
    /* botão sem rótulo (Cadastre-se vazio) não aparece */
    .mobile-sidebar .button:empty, .mobile-sidebar .button > span:empty { display: none !important; }
    .mobile-sidebar li.html.header-button-2:not(:has(span:not(:empty))) { display: none; }
    /* Busca no cabeçalho: a coluna da .header-bottom é hide-for-medium,
       então abaixo de 850px não havia busca nenhuma para o visitante. */
    .op-busca-mobile { background: var(--vk-primaria); padding: 9px 14px 11px; margin-top: 0; }
    .op-busca-mobile form { display: flex; margin: 0; max-width: 640px; margin-inline: auto; }
    .op-busca-mobile input[type=search] {
        flex: 1; min-width: 0; height: 46px; margin: 0; padding: 11px 15px;
        border: 0; border-radius: 10px 0 0 10px; background: #fff;
        font-size: .95rem; box-shadow: none; color: #2b2140;
    }
    .op-busca-mobile input[type=search]::placeholder { color: #8d7f9e; opacity: 1; }
    .op-busca-mobile button {
        width: 54px; height: 46px; flex: none; margin: 0; padding: 0; border: 0;
        border-radius: 0 10px 10px 0; background: #5b2a86 no-repeat center / 21px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
    }
    /* busca no topo do menu lateral */
    .op-menu-busca { padding: 12px 16px 10px !important; border-bottom: 1px solid rgba(5,189,201,.14) !important; }
    .op-menu-busca form { display: flex; gap: 0; margin: 0; }
    .op-menu-busca input[type=search] {
        flex: 1; min-width: 0; height: 44px; margin: 0; padding: 10px 14px;
        border: 0; border-radius: 10px 0 0 10px; background: #fff; font-size: .95rem; box-shadow: none;
    }
    .op-menu-busca button {
        width: 52px; height: 44px; flex: none; margin: 0; padding: 0; border: 0;
        border-radius: 0 10px 10px 0; background: var(--vk-primaria) no-repeat center / 20px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
    }
    /* fecha por cima de tudo */
    .mfp-close, .off-canvas .mfp-close { z-index: 10; width: 44px; height: 44px; }
    /* dock/WhatsApp não competem com o menu aberto */
    body.off-canvas-active .op-dock, body.mfp-active .op-dock, body.op-menu-aberto .op-dock { opacity: 0; pointer-events: none; }
}

/* ============================================================
   Legibilidade — contraste de botões e textos sobre foto (v0.6.6)
   ============================================================ */
/* botão "Ver o canal no YouTube" estava quase invisível */
.op-vids__canal .button, .op-vids__canal .button.is-outline {
    border: 2px solid var(--vk-primaria) !important; color: var(--vk-primaria-escura) !important;
    background: #fff !important; font-weight: 600; opacity: 1 !important;
}
.op-vids__canal .button:hover { background: var(--vk-primaria) !important; color: #fff !important; }
/* qualquer botão outline em fundo claro: cor firme */
.section .button.is-outline:not(.white) { border-width: 2px; opacity: 1; }
.section .button.is-outline:not(.white) > span { color: var(--vk-primaria-escura); }
.section .button.is-outline.white > span, .op-cta-final .button.is-outline > span { color: #fff; }

/* textos sobre banner com foto: véu escuro para leitura */
.op-cta-final .banner::before, .single-post .entry-header .banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,11,.15), rgba(11,11,11,.55)); z-index: 1; pointer-events: none; }
.op-cta-final .text-box, .op-cta-final .banner-layer { z-index: 2; }
.op-cta-final h2, .op-cta-final .op-kicker, .op-cta-final .lead,
.banner h1, .banner h2, .banner .lead {
    text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45);
}
/* botões sobre foto ganham corpo */
.banner .button.is-outline { background: rgba(11,11,11,.35) !important; backdrop-filter: blur(3px); border-color: rgba(255,255,255,.85) !important; }
.banner .button.is-outline > span { color: #fff !important; }
.banner .button.is-outline:hover { background: rgba(255,255,255,.95) !important; }
.banner .button.is-outline:hover > span { color: var(--vk-primaria-escura) !important; }

/* Botões preenchidos: texto SEMPRE branco (o shade herdava roxo escuro e sumia) */
.button.is-shade, .button.is-shade > span,
.button.primary:not(.is-outline):not(.is-link), .button.primary:not(.is-outline):not(.is-link) > span,
.button.is-gloss:not(.is-outline), .button.is-gloss:not(.is-outline) > span,
.op-ct-destaque .button, .op-ct-destaque .button > span {
    color: #fff !important;
}
.button.is-shade:hover > span, .button.primary:not(.is-outline):hover > span { color: #fff !important; }
/* botão verde (WhatsApp) mantém identidade */
.button.success, .button.success > span { color: #fff !important; background-color: var(--vk-wa); border-color: var(--vk-wa); }

/* --- Formulário de contato --- */
.op-form { background: #fff; border: 1px solid #f7e9e2; border-radius: 18px; padding: 26px 28px; box-shadow: 0 4px 18px rgba(91,42,134,.07); }
.op-form label { display: block; font: 500 .82rem 'Montserrat',sans-serif; color: #4a3a60; margin-bottom: 14px; }
.op-form label > span:not(:only-child), .op-form label .op-req { color: #c23b3b; }
.op-form__check span { color: var(--vk-texto-aux) !important; }
.op-form input[type=text], .op-form input[type=email], .op-form input[type=tel], .op-form select, .op-form textarea {
    width: 100%; margin-top: 5px; border-radius: 10px; border: 1px solid #f1dcd3; padding: 11px 14px; box-shadow: none; background: #fffaf7; font-size: .95rem;
    height: auto; min-height: 46px; line-height: 1.4;
}
/* o select herdava altura fixa do tema e cortava o texto */
.op-form select {
    appearance: none; -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6182' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.op-form textarea { min-height: 130px; }
.op-form input:focus, .op-form select:focus, .op-form textarea:focus { background: #fff; border-color: var(--vk-primaria); box-shadow: 0 0 0 3px rgba(230,46,115,.14); }
.op-form__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.op-form__check { display: flex !important; gap: 10px; align-items: flex-start; font-size: .8rem !important; color: #6f6182; font-weight: 400 !important; }
.op-form__check input { margin-top: 3px; accent-color: var(--vk-primaria); }
.op-form__nota { margin: 12px 0 0; font-size: .85rem; color: #6f6182; }
.op-form .op-hp { position: absolute !important; left: -9999px !important; }
.op-form-alerta { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 500; font-size: .9rem; }
.op-form-alerta--ok { background: #eafaf0; color: #1f7a3a; }
.op-form-alerta--erro { background: #fdecec; color: #a12626; }
@media (max-width: 640px) { .op-form__linha { grid-template-columns: 1fr; } .op-form { padding: 20px 18px; } }

/* Ícone no botão "Área do cliente" do cabeçalho.
   O botão é do Customizer do Flatsome, não é item de menu — não passa
   pelo filtro de ícones do tema (inc/menu-icons.php). Por isso o ícone
   entra por CSS, com máscara: assim ele herda a cor do texto e continua
   certo no hover, que inverte as cores. */
.header-button-1 .header-button > .button > span::before {
    content: "";
    display: inline-block;
    width: 15px; height: 15px;
    margin-right: 7px;
    vertical-align: -2px;
    background: currentColor;
    -webkit-mask: var(--op-icone-usuario) center / contain no-repeat;
    mask: var(--op-icone-usuario) center / contain no-repeat;
}
:root {
    --op-icone-usuario: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>');
}

/* ============================================================
   Vicente Kids — blocos novos (home e Sobre)
   ============================================================ */
/* Comprar é simples assim: três passos */
.op-passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 980px; margin: 0 auto 26px; }
.op-passo { position: relative; background: #fff; border: 2px solid #f7e9e2; border-radius: 24px; padding: 30px 22px 22px; text-align: center; box-shadow: 0 10px 0 #fde6ee; }
.op-passo .op-mi { color: var(--vk-primaria); margin: 0 0 8px; }
.op-passo:nth-child(2) .op-mi { color: var(--vk-destaque); }
.op-passo:nth-child(3) .op-mi { color: #1fa855; }
.op-passo h3 { font-family: 'Fredoka', sans-serif; font-size: 1.25rem; margin-bottom: 4px; }
.op-passo p { color: #6f6182; font-size: .92rem; margin: 0; }
.op-passo__n { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--vk-amarelo); color: #2b2140; font: 700 1rem 'Fredoka', sans-serif; box-shadow: 0 4px 0 rgba(0,0,0,.08); }
@media (max-width: 767px) { .op-passos { grid-template-columns: 1fr; gap: 26px; } }

/* Sobre: personalidade da marca em pílulas */
.op-personalidade { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 30px; }
.op-personalidade span { color: #fff; font: 700 1.25rem 'Fredoka', sans-serif; padding: 12px 30px; border-radius: 99px; box-shadow: 0 6px 0 rgba(0,0,0,.10); }

/* Categorias da home: capas redondas com o nome embaixo */
.op-home-cats .box-category .box-text h5, .op-home-cats .box-category .header-title { font: 600 .95rem 'Fredoka', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; color: #2b2140; }
.op-home-cats .box-category .box-image { box-shadow: 0 8px 0 rgba(43,33,64,.06); }
.op-home-cats .box-category:hover .header-title { color: var(--vk-primaria); }

/* Barra de categorias com 13 itens: centralizada quando cabe, rolagem
   lateral discreta quando não cabe (sem cortar o primeiro item). */
@media (min-width: 850px) {
    .header-bottom .nav { justify-content: safe center; overflow-x: auto; scrollbar-width: none; gap: 2px; }
    .header-bottom .nav::-webkit-scrollbar { display: none; }
    .header-bottom .nav > li > a { padding: 9px 11px !important; }
}
@media (min-width: 850px) and (max-width: 1360px) {
    /* letra mínima legível; se não couber, a barra desliza para o lado */
    .header-bottom .nav > li > a { font-size: 11.5px; padding: 8px 9px !important; }
    .header-bottom .nav > li > a .op-mi { width: 22px; height: 22px; }
}

/* Diferenciais da home: cada ícone numa cor da marca */
.op-diferenciais .icon-box-img svg, .op-diferenciais .icon-box-img svg * { stroke: currentColor !important; }
.op-diferenciais .col:nth-child(1) .icon-box-img { color: var(--vk-primaria); }
.op-diferenciais .col:nth-child(2) .icon-box-img { color: #1fa855; }
.op-diferenciais .col:nth-child(3) .icon-box-img { color: var(--vk-destaque); }
.op-diferenciais .col:nth-child(4) .icon-box-img { color: var(--vk-roxo); }
.op-home-cats .box-category .box-text, .op-home-cats .box-category .header-title { text-shadow: none !important; }
/* featured boxes em geral (Sobre nós, Fale com a gente…) seguem a cor da marca */
.featured-box .icon-box-img svg * { stroke: currentColor; }
.featured-box .icon-box-img { color: var(--vk-primaria); }

/* Bloco de ícone + título + texto (substitui o featured_box, que mostrava
   o SVG como <img> e não aceitava a cor da marca) */
.op-fb { text-align: center; padding: 6px 4px; }
.op-fb .op-mi { color: var(--vk-primaria); margin: 0 auto 10px; display: block; }
.op-fb h4 { font: 700 .8rem 'Montserrat', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #2b2140; margin-bottom: 4px; }
.op-fb__txt { color: #6f6182; font-size: .9rem; line-height: 1.5; }
.op-fb__txt p { margin-bottom: 6px; }
.op-diferenciais .col:nth-child(1) .op-fb .op-mi { color: var(--vk-primaria); }
.op-diferenciais .col:nth-child(2) .op-fb .op-mi { color: #1fa855; }
.op-diferenciais .col:nth-child(3) .op-fb .op-mi { color: var(--vk-destaque); }
.op-diferenciais .col:nth-child(4) .op-fb .op-mi { color: var(--vk-roxo); }

/* ============================================================
   Bateria de testes 07/10 — ajustes de usabilidade e leitura
   ============================================================ */
/* textos que ficavam abaixo de 11,5 px no celular */
.product-small .box-text .category, .product-small .category { font-size: 11.5px !important; letter-spacing: .04em; }
.wp-bottom-menu .wp-bottom-menu-item span, .wp-bottom-menu a span { font-size: 11.5px !important; }
.op-kicker, .op-hero__kicker { font-size: .76rem; }
/* caminho de navegação (Início › Menina): alvo de toque maior */
.breadcrumbs a { display: inline-block; padding: 8px 2px; }
/* quantidade no carrinho e no produto: campo largo o bastante para o dedo */
.quantity input.qty { min-width: 46px; height: 42px; font-size: 1rem; }
.quantity .button.minus, .quantity .button.plus { min-width: 36px; height: 42px; }
/* botões dentro de banners não podem encolher abaixo do legível */
@media (max-width: 549px) {
    .banner .button, .button.is-small { font-size: .8rem !important; padding: 9px 18px !important; }
}
/* blog: sem "Posted on" em inglês e sem nome de usuário do autor */
.entry-meta .byline, .blog-single .byline, .post-item .byline { display: none !important; }
/* aviso de cookies aberto: botões flutuantes não ficam por cima dele */
body:has(.op-lgpd:not([hidden])) .xoo-wsc-basket,
body:has(.op-lgpd:not([hidden])) .op-wa,
body:has(.op-lgpd:not([hidden])) .op-dock { opacity: 0 !important; pointer-events: none !important; }
/* navegação "produto anterior/próximo" do Flatsome: ícone solto sob o título */
.product-info .next-prev-thumbs, .next-prev-thumbs { display: none !important; }
/* celular, página do produto: o botão flutuante do WhatsApp cobria o
   "Adicionar ao carrinho" — a página já tem "Comprar pelo WhatsApp" */
@media (max-width: 849px) {
    .single-product .op-wa { display: none !important; }
    .single-product .product-summary, .single-product .product-info { padding-bottom: 18px; }
}

/* Rodapé no celular: cada lista abre e fecha ao toque (eram 30+ links empilhados) */
@media (max-width: 549px) {
    .footer-2 .widget_nav_menu { padding-bottom: 0 !important; margin-bottom: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
    .footer-2 .widget_nav_menu > .widget-title {
        display: flex; align-items: center; justify-content: space-between; width: 100%;
        padding: 15px 2px; margin: 0; cursor: pointer; user-select: none; font-size: 1.1rem;
    }
    .footer-2 .widget_nav_menu > .widget-title::after {
        content: ""; width: 10px; height: 10px; flex: none; margin-right: 6px;
        border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; background: none !important;
        transform: rotate(45deg) translateY(-3px); transition: transform .2s;
    }
    .footer-2 .widget_nav_menu.is-aberto > .widget-title::after { transform: rotate(-135deg) translateY(-2px); }
    .footer-2 .widget_nav_menu > .is-divider { display: none; }
    .footer-2 .widget_nav_menu:not(.is-aberto) > div { display: none; }
    .footer-2 .widget_nav_menu.is-aberto > div { padding-bottom: 12px; }
}

/* Home no celular mais curta (passava de 11 mil px) */
@media (max-width: 549px) {
    /* categorias em 4 colunas: círculos menores, nomes legíveis */
    .op-home-cats .box-category .box-text { padding: 6px 0 0 !important; }
    .op-home-cats .box-category .header-title, .op-home-cats .box-category h5 { font-size: .74rem !important; white-space: nowrap; }
    .op-home-cats .col { padding: 0 5px 14px !important; }
    /* novidades: 4 peças no celular, o resto fica em "Ver todas as peças" */
    .op-home-novidades .products > .col:nth-child(n+5), .op-home-novidades .product-small.col:nth-child(n+5) { display: none !important; }
    /* atalhos (Sobre, Contato, Blog): deslizam com o dedo em vez de empilhar; o blog já é carrossel do Flatsome */
    .op-home-atalhos .row:first-of-type {
        flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px;
    }
    .op-home-atalhos .row:first-of-type::-webkit-scrollbar { display: none; }
    .op-home-atalhos .row:first-of-type > .col { flex: 0 0 70% !important; max-width: 70% !important; scroll-snap-align: start; }
    .op-home-atalhos .op-fb { background: #fff; border-radius: 18px; padding: 18px 14px; height: 100%; }
}

/* Tablet (550–849 px): rodapé em 2 colunas (antes uma coluna só, enorme) */
@media (min-width: 550px) and (max-width: 849px) {
    .footer-2 .row > .col.widget { flex: 0 0 50% !important; max-width: 50% !important; }
    .op-ct-card a[href^="https://wa.me"] { white-space: nowrap; }
}

/* botão "Área do cliente" do cabeçalho legível */
.header-main .header-button > .button { font-size: 12px !important; }

/* produto em várias categorias: só a primeira fica destacada na barra */
.single-product .header-bottom .nav > li.current-product-ancestor:not(:nth-child(1 of .current-product-ancestor)) > a,
.single-product .header-bottom .nav > li.current-menu-parent:not(:nth-child(1 of .current-menu-parent)) > a {
    background: transparent !important; box-shadow: none !important;
}

/* ============================================================
   Cabeçalho: busca e carrinho com marcação visual (08/10)
   A sacola era desenhada em branco (herança do cabeçalho escuro do
   Orquidário) e sumia no fundo branco; a lupa ficava fina e apagada.
   ============================================================ */
/* campo de busca com contorno da marca */
.header-main .searchform .search-field {
    border: 2px solid #f6c3d6 !important; border-right: 0 !important; background: #fff !important;
    padding-left: 16px !important; color: #2b2140 !important;
}
.header-main .searchform .search-field::placeholder { color: #8d7f9e; opacity: 1; }
.header-main .searchform .search-field:focus { border-color: var(--vk-primaria) !important; box-shadow: none !important; }
.header-main .searchform .search-field:focus + .ux-search-submit,
.header-main .searchform:focus-within .ux-search-submit { box-shadow: 0 0 0 3px rgba(230,46,115,.18); }
/* botão da lupa: rosa sólido, ícone branco e grosso */
.header .searchform .ux-search-submit,
.header-main .searchform .ux-search-submit {
    background-color: var(--vk-primaria) !important;
    background-size: 22px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") !important;
    box-shadow: 0 4px 12px rgba(230,46,115,.35);
    transition: background-color .2s, transform .2s;
}
.header .searchform .ux-search-submit:hover,
.header-main .searchform .ux-search-submit:hover { background-color: var(--vk-roxo) !important; }

/* carrinho: botão redondo rosa com a sacola branca, igual ao da conta */
body .header .cart-icon.image-icon,
body .header-main .cart-icon.image-icon,
body .header-top .cart-icon.image-icon {
    width: 40px !important; height: 40px !important; border-radius: 50% !important;
    background-color: var(--vk-primaria) !important;
    background-size: 21px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l1.2 11.2a1.5 1.5 0 0 1-1.5 1.8H5.3a1.5 1.5 0 0 1-1.5-1.8L5 8Z'/%3E%3Cpath d='M8.5 11V6.5a3.5 3.5 0 0 1 7 0V11'/%3E%3C/svg%3E") !important;
    box-shadow: 0 4px 12px rgba(230,46,115,.35);
    transition: background-color .2s, transform .2s;
}
body .header-main .header-cart-link:hover .cart-icon.image-icon,
body .header-top .header-cart-link:hover .cart-icon.image-icon { background-color: var(--vk-roxo) !important; transform: translateY(-2px); }
/* contador amarelo, bem visível sobre o rosa */
body .header .cart-icon strong,
body .header-top .cart-icon strong,
body .header-main .cart-icon strong {
    background-color: var(--vk-amarelo) !important; color: #2b2140 !important;
    top: -6px !important; right: -6px !important;
}
/* na barra roxa do topo (celular) o botão fica um pouco menor */
@media (max-width: 849px) {
    body .header-top .cart-icon.image-icon { width: 34px !important; height: 34px !important; background-size: 18px !important; }
}

/* ============================================================
   Home: "Compre por categoria" em blocos coloridos (08/10)
   Antes: anéis grandes vazados (as capas cortadas em círculo).
   Agora: a capa inteira em bloco de cantos arredondados, menor,
   com o nome embaixo e um leve salto ao passar o mouse.
   ============================================================ */
.op-home-cats { background: linear-gradient(180deg, #fff 0%, #fff6f1 100%); }
.op-home-cats .op-cats-sub { text-align: center; color: #6f6182; margin: -6px auto 26px; font-size: 1rem; }
.op-home-cats .row { max-width: 1080px; margin-left: auto; margin-right: auto; }
.op-home-cats .col { padding-bottom: 22px !important; }
.op-home-cats .box-category .box-image {
    width: 100%; max-width: 150px; margin: 0 auto; border-radius: 28px !important; overflow: hidden;
    box-shadow: 0 10px 0 rgba(43,33,64,.06), 0 12px 24px rgba(91,42,134,.12);
    transition: transform .25s ease, box-shadow .25s ease;
}
.op-home-cats .box-category .box-image img { border-radius: 28px !important; transition: transform .35s ease; }
.op-home-cats .box-category:hover .box-image {
    transform: translateY(-6px) rotate(-2deg);
    box-shadow: 0 14px 0 rgba(43,33,64,.05), 0 18px 30px rgba(230,46,115,.22);
}
.op-home-cats .box-category:hover .box-image img { transform: scale(1.06); }
.op-home-cats .box-category .box-text { padding-top: 12px !important; }
.op-home-cats .box-category .header-title, .op-home-cats .box-category h5 {
    font: 600 1.02rem 'Fredoka', sans-serif !important; color: #2b2140 !important;
    text-transform: none !important; letter-spacing: 0 !important; margin: 0;
}
.op-home-cats .box-category:hover .header-title { color: var(--vk-primaria) !important; }
.op-home-cats .box-category .count { display: none; }
@media (max-width: 849px) {
    .op-home-cats .box-category .box-image { max-width: 120px; border-radius: 22px !important; }
    .op-home-cats .box-category .box-image img { border-radius: 22px !important; }
}
@media (max-width: 549px) {
    .op-home-cats .op-cats-sub { font-size: .9rem; margin-bottom: 18px; }
    .op-home-cats .box-category .box-image { max-width: 76px; border-radius: 18px !important; box-shadow: 0 6px 0 rgba(43,33,64,.05), 0 8px 16px rgba(91,42,134,.12); }
    .op-home-cats .box-category .box-image img { border-radius: 18px !important; }
    .op-home-cats .box-category .header-title, .op-home-cats .box-category h5 { font-size: .78rem !important; }
    .op-home-cats .box-category:hover .box-image { transform: none; }
}


/* ===== Mapa sob demanda (LGPD: o Google só carrega no clique) — 08/10 ===== */
.op-mapa { position: relative; min-height: 320px; display: grid; place-items: center; padding: 32px 20px; text-align: center;
    background-color: #fff6f1;
    background-image: linear-gradient(rgba(144,72,182,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(144,72,182,.07) 1px, transparent 1px),
        radial-gradient(circle at 30% 40%, rgba(5,189,201,.16), transparent 45%), radial-gradient(circle at 75% 65%, rgba(230,46,115,.13), transparent 45%);
    background-size: 28px 28px, 28px 28px, auto, auto; }
.op-mapa.is-aberto { display: block; padding: 0; min-height: 0; background: none; }
.op-mapa__capa { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 440px; }
.op-mapa__pino { width: 58px; height: 58px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 22px rgba(230,46,115,.25); margin-bottom: 6px; }
.op-mapa__pino svg { width: 28px; height: 28px; color: var(--vk-primaria); stroke: currentColor; }
.op-mapa__capa strong { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.35rem; color: #2b2140; }
.op-mapa__capa > span:not(.op-mapa__pino):not(.op-mapa__botoes) { color: #4a3a60; font-size: .95rem; line-height: 1.45; }
.op-mapa__botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 12px 0 4px; }
.op-mapa__ver, .op-mapa__rota { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 99px; font: 600 .9rem/1 Montserrat, sans-serif; text-transform: none; letter-spacing: 0; margin: 0; cursor: pointer; }
.op-mapa__ver { background: var(--vk-primaria); color: #fff; border: 0; box-shadow: 0 6px 16px rgba(230,46,115,.3); }
.op-mapa__ver:hover { background: #c21e5e; }
.op-mapa__rota { background: #fff; color: #5b2a86; border: 2px solid #e6d6f2; text-decoration: none; }
.op-mapa__rota:hover { border-color: #9048b6; color: #5b2a86; }
.op-mapa__capa small { color: #7a6c8c; font-size: .75rem; line-height: 1.4; max-width: 320px; }
@media (max-width: 549px) { .op-mapa { min-height: 260px; padding: 24px 16px; } }


/* ===== Tabela de cookies da Política de Privacidade — 08/10 ===== */
.op-tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.4em; border: 1px solid #f1dcd3; border-radius: 14px; }
.op-cookies { width: 100%; min-width: 560px; border-collapse: collapse; margin: 0; font-size: .88rem; }
.op-cookies th, .op-cookies td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid #f7e9e2; }
.op-cookies th { background: #fff6f1; color: #5b2a86; font-weight: 600; }
.op-cookies tr:last-child td { border-bottom: 0; }
.op-cookies code { font-size: .8rem; background: #f8f1fb; color: #5b2a86; padding: 2px 6px; border-radius: 6px; word-break: break-word; }


/* ===== Correções da bateria de testes de 08/10 (parte 1) ===== */
/* campo-isca antirrobô nunca aparece, em formulário nenhum */
.op-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; }
/* selo de desconto: o .badge-container do Flatsome tem largura 0, e o selo
   com right:10px caía no cartão vizinho. Agora fica no canto da foto. */
.badge-container .op-oferta { position: relative; top: auto; right: auto; display: inline-block; margin: 12px 0 0 12px; }
/* carrinho lateral: preços em branco no fundo branco (resto da paleta escura) */
.xoo-wsc-products span.amount, .xoo-wsc-products .xoo-wsc-qty-price, .xoo-wsc-products .xoo-wsc-qty-price span { color: #2b2140 !important; }
.xoo-wsc-products .xoo-wsc-qty-price > span:last-child .amount { color: #b3123f !important; font-weight: 700; }
/* carrinho: os botões flutuantes cobriam a quantidade e competiam com o pedido */
.woocommerce-cart .xoo-wsc-basket, .woocommerce-cart .op-wa { display: none !important; }

/* banners e cabeçalhos em <picture> (08/10) */
.op-slide picture, .op-page-header picture { display: block; }
.op-slide picture img, .op-page-header picture img { display: block; width: 100%; height: auto; }

/* =====================================================================
   Bateria de testes e revisão de UX — 08/10/2026 (parte 2)
   ===================================================================== */

/* --- Botões: um padrão só (pílula) --- */
.button:not(.icon):not(.is-link):not(.plain):not(.is-form):not(.minus):not(.plus) { border-radius: 99px; }
.page-wrapper .searchform .search-field { border-radius: 10px 0 0 10px; }
.page-wrapper .searchform .ux-search-submit { border-radius: 0 10px 10px 0 !important; background-color: var(--vk-btn) !important; }

/* --- Foco visível para quem navega pelo teclado --- */
:where(a, button, .button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--vk-roxo, #9048b6) !important; outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(144,72,182,.22) !important;
}
select:focus { border-color: var(--vk-roxo, #9048b6) !important; }

/* --- Textos auxiliares com contraste AA --- */
.op-pwa__lgpd, .op-compra-selos small, .op-rc-aviso, .op-mapa__capa small { color: var(--vk-texto-aux) !important; }
.price del, .price del .amount { color: #6f6182 !important; }

/* --- Cartões de produto: mesma altura, botão no pé, coração sobre a foto --- */
.products .product-small.col > .col-inner { display: flex; flex-direction: column; height: 100%; position: relative; }
.products .product-small.box { flex: 1 1 auto; display: flex; flex-direction: column; }
.products .product-small .box-text { flex: 1 1 auto; display: flex; flex-direction: column; }
.products .product-small .add-to-cart-button { margin-top: auto; padding-top: 6px; }
.product-small .box-text .name, .product-small .box-text .product-title, .product-small .box-text .category { text-align: center; }
.product-small .button { white-space: nowrap; text-transform: none !important; letter-spacing: 0 !important; font-size: .84rem !important; min-height: 44px; line-height: 1.2 !important; padding: 11px 16px !important; }
:is(.products, .related-products-wrapper) .tinvwl-loop-button-wrapper { position: absolute; top: 12px; right: 12px; z-index: 5; margin: 0 !important; padding: 0 !important; width: auto !important; }
:is(.products, .related-products-wrapper) .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button {
    width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(43,33,64,.18);
    display: grid !important; place-items: center; margin: 0 !important; padding: 0 !important; font-size: 0 !important;
}
:is(.products, .related-products-wrapper) .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button::before { font-size: 20px !important; margin: 0 !important; color: var(--vk-primaria); position: static !important; }
:is(.products, .related-products-wrapper) .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist-text,
:is(.products, .related-products-wrapper) .tinvwl-loop-button-wrapper .tinvwl_already_on_wishlist-text { display: none !important; }

/* --- Cabeçalho de categoria/loja: sem o ícone ampliado e borrado como fundo --- */
.shop-page-title.featured-title .title-bg { background-image: none !important; }
.shop-page-title.featured-title .page-title-bg { background: linear-gradient(100deg, #c21e5e 0%, #9048b6 100%); }
.shop-page-title .woocommerce-ordering select { background-color: #fff !important; color: #2b2140 !important; border-radius: 10px; border: 0; }

/* --- Carrinho lateral: hierarquia das ações e linha do item legível --- */
.xoo-wsc-ft-buttons-cont { display: flex !important; flex-direction: column; gap: 8px; }
.xoo-wsc-ft-buttons-cont .xoo-wsc-ft-btn { border-radius: 99px !important; margin: 0 !important; width: 100%; }
.xoo-wsc-ft-buttons-cont .xoo-wsc-ft-btn-checkout { order: -1; background: var(--vk-wa) !important; color: #fff !important; border: 0 !important; }
.xoo-wsc-ft-buttons-cont .xoo-wsc-ft-btn-cart { background: #fff !important; color: var(--vk-primaria-escura) !important; border: 1.5px solid #f6c3d6 !important; }
.xoo-wsc-ft-buttons-cont .xoo-wsc-ft-btn-continue { background: transparent !important; color: var(--vk-primaria-escura) !important; border: 0 !important; box-shadow: none !important; text-decoration: underline; text-underline-offset: 3px; }
.xoo-wsc-qty-price { display: flex !important; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.xoo-wsc-qty-price > span:nth-child(2) { text-transform: lowercase; }
/* carrinho flutuante sempre visível, mesmo vazio (pedido do cliente em 19/10/2026); só o contador some */

/* --- Carrinho: cupom antes do total e do pedido; item enxuto no celular --- */
.cart-sidebar { display: flex; flex-direction: column; }
.cart-sidebar > .checkout_coupon { order: -1; margin: 0 0 18px !important; }
.woocommerce-cart button[name="update_cart"], .woocommerce-cart td.actions .continue-shopping { display: none !important; }
.shop_table.cart th:first-child, .shop_table.cart td:first-child { padding-left: 16px; }
.shop_table.cart th:last-child, .shop_table.cart td:last-child { padding-right: 16px; }
@media (max-width: 640px) {
    .woocommerce-cart table.cart td::before { flex: none; white-space: nowrap; }
    .woocommerce-cart table.cart td.product-price, .woocommerce-cart table.cart td.product-name .mobile-product-price { display: none !important; }
    .woocommerce-cart table.cart tr { position: relative; }
    .woocommerce-cart table.cart td.product-remove { position: absolute; top: 6px; right: 6px; border: 0 !important; padding: 0 !important; z-index: 2; }
    .woocommerce-cart table.cart td.product-thumbnail { justify-content: center; }
    .woocommerce-cart table.cart td.product-name { text-align: left; }
}
@media (max-width: 549px) {
    .op-etapas { flex-wrap: nowrap !important; gap: 4px !important; margin-left: 0 !important; margin-right: 0 !important; }
    .op-etapas li { flex: 1 1 0 !important; min-width: 0; white-space: normal !important; text-align: center; line-height: 1.15 !important;
        padding: 8px 6px !important; font-size: .68rem !important; flex-direction: column; gap: 4px !important; border-radius: 14px !important; }
}

/* --- Avisos do WooCommerce no padrão do site --- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
    border: 0 !important; border-radius: 14px !important; padding: 12px 16px !important; background: #eafaf0 !important; color: #1f5e33 !important; box-shadow: none !important;
}
.woocommerce-error { background: #fdecec !important; color: #a12626 !important; }
.woocommerce-info { background: #fff6f1 !important; color: #4a3a60 !important; }

/* --- Produto: seletores maiores, aviso amigável, compartilhar redondo --- */
.variations select { min-height: 46px; border-radius: 10px; font-size: 16px; }
.variations select.op-falta { border: 2px solid var(--vk-primaria) !important; box-shadow: 0 0 0 4px rgba(230,46,115,.15) !important; }
.op-escolha-aviso { margin: 4px 0 10px; color: #a12666; font-weight: 600; font-size: .9rem; }
.op-guia { margin: 2px 0 14px; font-size: .88rem; }
.op-guia a { color: var(--vk-primaria-escura); text-decoration: underline; text-underline-offset: 3px; }
.product-info .social-icons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.product-info .social-icons a.button.icon { width: 42px !important; height: 42px !important; min-height: 42px !important; padding: 0 !important; margin: 0 !important;
    display: inline-grid !important; place-items: center; border-radius: 50% !important; }
.single-product .product_meta .sku_wrapper { display: none; }
.cwginstock-subscribe-form .panel-primary { border-color: #f1dcd3 !important; border-radius: 14px; overflow: hidden; }
.cwginstock-subscribe-form input { text-align: left !important; }
.cwginstock-subscribe-form .button, .cwginstock-subscribe-form input[type=submit] { border-radius: 99px !important; background: var(--vk-btn) !important; border-color: var(--vk-btn) !important; }

/* --- Formulários no celular: 16px evita o zoom do iPhone; campos com altura confortável --- */
@media (max-width: 849px) {
    .op-form input, .op-form select, .op-form textarea, .op-lgpd-form input, .op-lgpd-form select, .op-lgpd-form textarea,
    .op-pwa input, .op-pwa textarea, #op-faq-q, .searchform .search-field { font-size: 16px !important; }
}
.op-lgpd-form input[type=text], .op-lgpd-form input[type=email], .op-lgpd-form select { min-height: 46px; padding: 11px 14px; border-radius: 10px; }
.op-lgpd-form select { -webkit-appearance: none; appearance: none; padding-right: 40px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b2a86' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; }
.op-lgpd-form .button { border-radius: 99px !important; }
.op-form__check input, .op-lgpd-check input { width: 20px; height: 20px; flex: none; }

/* --- Páginas legais: leitura mais confortável e links visíveis --- */
:is(.page-id-2619, .page-id-2611, .page-id-2625, .page-id-9389) .col-inner p.lead { font-size: .9rem !important; color: var(--vk-texto-aux) !important; }
:is(.page-id-2619, .page-id-2611, .page-id-2625, .page-id-9389) .col-inner :is(p, li) { color: #4a3a60; }
:is(.page-id-2619, .page-id-2611, .page-id-2625, .page-id-9389) .col-inner :is(p, li) a:not(.button) { color: var(--vk-primaria-escura); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 549px) {
    :is(.page-id-2619, .page-id-2611, .page-id-2625, .page-id-9389) .col-inner h3 { font-size: 1.15rem !important; margin-top: 1.5em; }
    p.lead { font-size: 1.02rem; }
}

/* --- Título repetido logo abaixo do cabeçalho em imagem: continua para leitor de tela e Google --- */
.op-page-header + .section .col-inner > h1:first-child { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- FAQ --- */
.op-faq-lista .accordion-title .toggle { min-height: 0 !important; }
.op-faq-lista .accordion-title .toggle i { font-size: 16px; font-weight: 700; }

/* --- Minha conta no celular: cartões com margem e mesma largura --- */
@media (max-width: 549px) {
    #customer_login { margin-left: 0 !important; margin-right: 0 !important; gap: 18px; }
    #customer_login .col-1, #customer_login .col-2 { flex: 1 1 100%; width: 100%; max-width: 100%; padding: 22px 18px !important; }
}

/* --- Lista de desejos vazia: só o nosso cartão (o aviso do plugin repetia) --- */
.tinv-wishlist:has(.op-fav-vazio) > :not(.op-fav-vazio),
.op-fav-vazio-ativo > :not(.op-fav-vazio) { display: none !important; }

/* --- Barra flutuante (computador) e "voltar ao topo" --- */
@media (min-width: 850px) {
    .woocommerce-cart .op-dock, .single-product .op-dock, .woocommerce-account .op-dock { display: none !important; }
    .op-dock { transition: transform .3s ease, opacity .3s ease; }
    #top-link { bottom: 96px !important; right: 28px !important; }
    #wp-bottom-menu-search-form-wrapper, .wp-bottom-menu-search-form-wrapper { display: none !important; }
}

/* --- Celular: a barra roxa do topo repetia conta e carrinho da barra de baixo --- */
@media (max-width: 549px) {
    #top-bar { display: none !important; }
}

/* --- Home --- */
.op-fb__txt .button.is-link, .op-fb > .button.is-link { display: table; margin: 10px auto 0; }
.op-home-atalhos .col-inner { height: 100%; }
.op-cta-card .op-cta-link { color: #fff !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; justify-content: center; }
.op-ofertas__todas { display: none !important; }
.op-ofertas__trilho > :first-child { margin-left: auto; }
.op-ofertas__trilho > :last-child { margin-right: auto; }

/* --- Blog --- */
.blog-archive footer.entry-meta, .blog .post footer.entry-meta { display: none; }
.more-link, .blog-archive .button { border-radius: 99px !important; }
.blog-single .badge.post-date { left: 10px; top: 10px; }
@media (max-width: 549px) {
    .blog-archive .entry-summary p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .blog-archive .entry-category, .blog-archive .entry-meta { font-size: 12px !important; }
}
@media (min-width: 850px) { .blog-archive .entry-image img { aspect-ratio: 2 / 1; object-fit: cover; } }

/* --- Rodapé --- */
.footer-2 .widget a[href^="mailto:"], .footer-2 .op-mi-label { overflow-wrap: anywhere; }

/* --- Contato e Sobre --- */
/* só no Contato (fundo claro): no bloco roxo do fim da home os ícones ficavam roxo sobre roxo */
.page-id-581 .section .follow-icons a { color: var(--vk-roxo, #9048b6) !important; border-color: #e6d6f2 !important; }
.page-id-581 .section .follow-icons a:hover { color: #fff !important; background: var(--vk-btn) !important; border-color: var(--vk-btn) !important; }
/* fundos escuros (CTA final da home e rodapé): ícones brancos e bem visíveis */
.op-cta-final .follow-icons a, .footer-wrapper .follow-icons a { color: #fff !important; border-color: rgba(255,255,255,.85) !important; background: rgba(255,255,255,.12) !important; }
.op-cta-final .follow-icons a:hover, .footer-wrapper .follow-icons a:hover { background: #fff !important; color: var(--vk-roxo, #9048b6) !important; border-color: #fff !important; }
.gallery-box .box-text:empty { display: none; }

/* --- Página 404 --- */
.op-404 { text-align: center; }
.op-404__num { font: 700 clamp(4rem, 14vw, 7rem)/1 'Fredoka', sans-serif; color: var(--vk-primaria); margin: 0 0 6px; letter-spacing: -.02em; }
.op-404 h1 { font-family: 'Fredoka', sans-serif; margin-bottom: 8px; }
.op-404__busca { display: flex; max-width: 460px; margin: 18px auto 20px; }
.op-404__busca input { flex: 1; min-height: 48px; border: 2px solid #f6c3d6; border-right: 0; border-radius: 99px 0 0 99px; padding: 0 18px; font-size: 16px; margin: 0; box-shadow: none; }
.op-404__busca button { min-height: 48px; border: 0; border-radius: 0 99px 99px 0; background: var(--vk-btn); color: #fff; font-weight: 600; padding: 0 22px; margin: 0; }
.op-404__botoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.op-404__botoes .button { margin: 0 !important; }
.op-btn-wa { background: var(--vk-wa) !important; color: #fff !important; border-color: var(--vk-wa) !important; }

/* --- Busca/categoria sem resultado e carrinho vazio --- */
.op-vazio { text-align: center; background: #fff6f1; border-radius: 18px; padding: 26px 20px; margin: 10px 0 26px; }
.op-vazio p { font-weight: 600; color: #4a3a60; margin-bottom: 12px; }
.op-vazio .button { margin: 4px !important; }
.return-to-shop .button { border-radius: 99px !important; text-transform: none; }

.xoo-wsc-ft-buttons-cont .xoo-wsc-ft-btn-continue { order: 2; }
.op-selo__link { display: inline-block; margin-top: 2px; font-size: .78rem; color: var(--vk-primaria-escura) !important; text-decoration: underline; text-underline-offset: 3px; }
.woocommerce-cart table.cart tr:has(> td.actions) { display: none; }
@media (max-width: 640px) {
    .woocommerce-cart table.cart tr.cart_item { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px 40px 12px 12px; }
    .woocommerce-cart table.cart tr.cart_item td.product-thumbnail { grid-row: 1 / span 3; padding: 0 !important; border: 0; }
    .woocommerce-cart table.cart tr.cart_item td.product-thumbnail img { width: 84px; border-radius: 10px; }
    .woocommerce-cart table.cart tr.cart_item td.product-thumbnail::before, .woocommerce-cart table.cart tr.cart_item td.product-name::before { display: none; }
    .woocommerce-cart table.cart tr.cart_item td.product-name { justify-content: flex-start; font-weight: 600; text-align: left; }
}
.op-404__busca button { text-transform: none; letter-spacing: 0; }

/* =====================================================================
   Bateria de testes — tablet (08/10/2026)
   ===================================================================== */

/* tablet deitado: a barra de categorias escondia "Promoções" */
@media (min-width: 850px) and (max-width: 1100px) {
    .header-bottom .nav { gap: 0; }
    .header-bottom .nav > li > a { padding: 8px 5px !important; font-size: 11px; letter-spacing: .02em; }
}
/* tablet deitado: cabeçalho fixo + dock tomavam um terço da tela; o botão do WhatsApp volta */
@media (min-width: 850px) and (max-width: 1199px) {
    .op-dock { display: none !important; }
    body { padding-bottom: 0 !important; }
    .op-wa__btn { display: grid !important; }
}
/* produto no tablet em pé: foto e informações lado a lado */
@media (min-width: 600px) and (max-width: 849px) {
    .single-product .product-main .product-gallery, .single-product .product-main .product-info { flex-basis: 50% !important; max-width: 50% !important; }
}
/* blocos que encostavam na borda */
.op-passos { padding-left: 15px; padding-right: 15px; box-sizing: border-box; }
#customer_login { margin-left: 0 !important; margin-right: 0 !important; width: 100%; }
#customer_login::before, #customer_login::after { display: none !important; }
/* formulário do pedido: campos confortáveis e sem zoom no iPhone */
.op-pwa input[type=text], .op-pwa input[type=tel], .op-pwa textarea { min-height: 46px; padding: 11px 14px; font-size: 16px; }
/* Avise-me na identidade da loja (classes reais do plugin) */
.cwginstock-panel-primary { border: 1px solid #f1dcd3 !important; border-radius: 16px; overflow: hidden; box-shadow: none !important; }
.cwginstock-panel-heading { background: #fff6f1 !important; border: 0 !important; }
.cwginstock-panel-heading, .cwginstock-panel-heading * { color: #2b2140 !important; font-family: 'Fredoka', sans-serif; }
.cwginstock-panel-body input[type=text], .cwginstock-panel-body input[type=email] { text-align: left !important; border-radius: 10px; min-height: 46px; font-size: 16px; }
.cwginstock-panel-body .button, .cwginstock-panel-body input[type=submit], .cwginstock-panel-body .cwgstock_button { border-radius: 99px !important; background: var(--vk-btn) !important; border-color: var(--vk-btn) !important; color: #fff !important; }
/* tabela de cookies: os "_" não somem e a última coluna cabe */
.op-cookies { min-width: 520px; }
.op-cookies code { display: inline-block; line-height: 1.4; padding: 1px 6px; margin: 1px 0; word-break: normal; overflow-wrap: anywhere; }
/* FAQ: cartões de ajuda sem órfão */
.op-faq-ajuda a:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 700px) { .op-faq-ajuda { grid-template-columns: repeat(3, 1fr) !important; } .op-faq-ajuda a:last-child:nth-child(odd) { grid-column: auto; } }
/* rodapé no tablet deitado: colunas proporcionais e telefone sem quebrar */
@media (min-width: 850px) and (max-width: 1100px) {
    .footer-2 .row { display: grid !important; grid-template-columns: 1.35fr 1fr 1fr 1fr; column-gap: 20px; }
    .footer-2 .row > .col { max-width: none !important; flex: none !important; width: auto !important; }
}
.footer a[href*="wa.me"] .op-mi-label { white-space: nowrap; }
/* CTA final da home: cartões da mesma altura, link no pé */
.op-cta-final .row > .col > .col-inner { height: 100%; }
.op-cta-card { display: flex; flex-direction: column; align-items: center; height: 100%; }
.op-cta-card .op-cta-link { margin-top: auto; white-space: nowrap; }
/* blog: dois posts por linha a partir do tablet */
@media (min-width: 600px) {
    .blog-archive #post-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
    .blog-archive #post-list .article-inner { margin-bottom: 0; }
    .blog-archive #post-list > :not(article) { grid-column: 1 / -1; }
}
/* carrinho no tablet em pé: o × não fica sobre a foto */
@media (min-width: 641px) and (max-width: 849px) {
    .woocommerce-cart td.product-remove { width: 48px; padding-right: 8px; }
    .woocommerce-cart td.product-thumbnail { padding-left: 6px; }
}
/* carrinho vazio */
.op-carrinho-vazio { margin-bottom: 26px; }
.op-carrinho-vazio__botoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.op-carrinho-vazio__botoes .button { margin: 0 !important; }
.woocommerce-cart .wc-empty-cart-message:has(+ .op-carrinho-vazio), .woocommerce-cart .op-carrinho-vazio ~ .return-to-shop { display: none !important; }


/* ===== Bateria de UX — verificação final (08/10) ===== */
/* etapas: o Flatsome dá margin-left:1.3em a "ol li" dentro de .col-inner */
.col-inner ol.op-etapas li, ol.op-etapas li { margin: 0 !important; }
/* cabeçalho de categoria: a imagem vem de CSS inline do Flatsome com !important (0,3,0) */
.shop-page-title.category-page-title .title-bg.fill, .shop-page-title.featured-title .title-bg.fill { background-image: none !important; }
/* carrinho lateral: o "R$" na mesma cor do valor */
.xoo-wsc-products .woocommerce-Price-currencySymbol { color: inherit !important; }
/* contato: botão do cartão verde de WhatsApp em verde */
.op-ct-destaque .button { background: var(--vk-wa) !important; border-color: var(--vk-wa) !important; color: #fff !important; }
/* Sobre: itens da galeria sem o vão do texto vazio */
.gallery-box .box-text:has(> p:only-child:empty) { display: none; }
/* tablet deitado com barra lateral: 3 peças por linha em vez de 4 espremidas */
@media (min-width: 850px) and (max-width: 1100px) {
    .shop-container .products > .product-small.col { flex-basis: 33.333% !important; max-width: 33.333% !important; }
}


/* ===== Regressão depois das atualizações (08/10) ===== */
.op-cta-final .op-kicker { text-shadow: none; }
/* formulário de avaliação: 5 estrelas numa linha, visíveis, campos sem zoom no iPhone */
#review_form p.stars a { font-size: 0 !important; margin: 0 6px 0 0 !important; padding: 4px 2px; border: 0 !important; line-height: 1; }
#review_form p.stars a::after { font-size: 17px; letter-spacing: 1px; color: #a08bb8; }
#review_form p.stars span { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
#review_form p.stars a:hover::after, #review_form p.stars a.active::after,
#review_form p.stars.selected a:not(.active)::after { color: var(--vk-amarelo, #f5bc24); }
#review_form p.stars.selected a.active ~ a::after { color: #a08bb8; }
#review_form input[type=text], #review_form input[type=email] { font-size: 16px; border-radius: 10px; min-height: 46px; }
#review_form textarea { font-size: 16px; border-radius: 10px; }
#review_form .form-submit input#submit, #review_form #submit { border-radius: 99px; background: var(--vk-btn); border-color: var(--vk-btn); padding: 0 28px; }
.op-avaliacao-nota { font-size: .8rem; color: var(--vk-texto-aux); margin: 4px 0 12px; }
.op-avaliacao-nota a { color: var(--vk-primaria-escura); text-decoration: underline; }
/* carrinho no celular: o × de remover ficava cortado na borda do cartão */
@media (max-width: 640px) {
    .woocommerce-cart table.cart td.product-remove { width: 34px !important; right: 8px; }
    .woocommerce-cart .product-remove a.remove { color: #b3123f !important; border-color: #f6c3d6 !important; }
}
/* ícones de compartilhar do produto (prata sobre branco, 1,8:1) */
.product-info .share-icons a.button.icon { color: var(--vk-roxo, #9048b6) !important; border-color: #e6d6f2 !important; }
.product-info .share-icons a.button.icon:hover { color: #fff !important; background: var(--vk-btn) !important; border-color: var(--vk-btn) !important; }
/* contato no tablet: o "Assunto" cortava o texto */
@media (max-width: 849px) { .op-form__linha { grid-template-columns: 1fr; } }
.op-form select { padding-right: 34px; }
/* o mini-carrinho do Flatsome abria junto com o lateral e oferecia "Finalização de compra" */
.header-main .cart-item .nav-dropdown { display: none !important; }

/* e-mail da loja (administrativo@, 33 letras): quebra em vez de vazar nos celulares de 320 px */
a[href^="mailto:"], .op-mi-label { overflow-wrap: anywhere; }

/* carrinho lateral: passar o mouse nos botões do rodapé (o hover do plugin pintava o fundo de rosa sob o texto rosa) */
.xoo-wsc-ft-buttons-cont .xoo-wsc-ft-btn-continue:hover, .xoo-wsc-ft-buttons-cont .xoo-wsc-ft-btn-continue:focus-visible {
    background: #fdeef4 !important; color: var(--vk-primaria-escura) !important; text-decoration: none; }
.xoo-wsc-ft-buttons-cont .xoo-wsc-ft-btn-cart:hover, .xoo-wsc-ft-buttons-cont .xoo-wsc-ft-btn-cart:focus-visible {
    background: var(--vk-btn) !important; color: #fff !important; border-color: var(--vk-btn) !important; }
.xoo-wsc-ft-buttons-cont .xoo-wsc-ft-btn-checkout:hover, .xoo-wsc-ft-buttons-cont .xoo-wsc-ft-btn-checkout:focus-visible {
    background: var(--vk-wa-hover, #0f5f2d) !important; color: #fff !important; }