/* ============ KARVI KIDS – CLONE FACILZAP ============ */
:root {
–kk-primary: #1abc9c;
–kk-primary-dark: #16a085;
–kk-orange: #ff7a00;
–kk-orange-light: #ffaa3a;
–kk-blue: #57c5f7;
–kk-green: #28c98c;
–kk-bg: #f7f7f7;
–kk-text: #222;
–kk-muted: #6b7280;
}
body { background: #fafafa; font-family: ‘Nunito’, ‘Inter’, system-ui, sans-serif; color: var(–kk-text); }
/* === ESCONDER TITULO DA HOME === */
.page-id-20 .entry-header,
.page-id-20 .entry-title,
.home .entry-header,
.home .entry-title { display: none !important; }
body .ast-site-title-wrap .site-title,
body .ast-site-title-wrap .site-description { display: none !important; }
/* === FAIXA PROMO TOPO === */
.site-header::before {
content: “🚚 Frete Grátis acima de R$ 97,00 | 💳 Ganhe 10% OFF pagando com PIX — desconto automático”;
display: block;
background: linear-gradient(90deg, var(–kk-primary), var(–kk-primary-dark));
color: white;
text-align: center;
padding: 10px 12px;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.3px;
}
/* === HEADER === */
.site-header { box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.custom-logo, .site-logo-img a img { max-height: 70px !important; width: auto !important; }
.main-header-bar { padding: 14px 0 !important; }
/* === MENU PRINCIPAL === */
.main-header-menu, .ast-nav-menu {
font-weight: 700 !important;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.main-header-menu a, .ast-nav-menu a { color: var(–kk-primary) !important; }
.main-header-menu a:hover, .ast-nav-menu a:hover { color: var(–kk-primary-dark) !important; }
/* === GRID DE PRODUTOS – CARDS FACILZAP === */
.woocommerce ul.products, .woocommerce-page ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
margin: 0 !important;
}
@media (max-width: 768px) {
.woocommerce ul.products, .woocommerce-page ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
}
.woocommerce ul.products li.product {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: white;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
transition: all 0.25s ease;
position: relative;
}
.woocommerce ul.products li.product:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(26,188,156,0.18);
}
/* Banner Promocao laranja no topo do card */
.woocommerce ul.products li.product.sale::before {
content: “Promoção”;
display: block;
background: var(–kk-orange);
color: white;
text-align: center;
padding: 6px 8px;
font-weight: 800;
font-size: 13px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
/* Banner Destaque azul no topo do card */
.woocommerce ul.products li.product.featured::before {
content: “Destaque”;
display: block;
background: var(–kk-blue);
color: white;
text-align: center;
padding: 6px 8px;
font-weight: 800;
font-size: 13px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
/* Esconder onsale padrao do woo */
.woocommerce ul.products li.product .onsale { display: none !important; }
/* Imagem do produto – sempre quadrada */
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product img {
width: 100% !important;
height: 220px !important;
object-fit: cover !important;
margin: 0 !important;
display: block;
}
@media (max-width: 768px) {
.woocommerce ul.products li.product img { height: 160px !important; }
}
/* Nome do produto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
padding: 12px 14px 4px !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(–kk-text) !important;
min-height: 56px;
line-height: 1.3;
text-align: center;
}
/* Preco */
.woocommerce ul.products li.product .price {
text-align: center;
padding: 0 14px 4px !important;
color: var(–kk-text) !important;
font-weight: 800 !important;
font-size: 17px !important;
}
.woocommerce ul.products li.product .price del {
color: var(–kk-muted) !important;
font-size: 13px !important;
font-weight: 400 !important;
margin-right: 6px;
}
.woocommerce ul.products li.product .price ins {
text-decoration: none !important;
color: var(–kk-text) !important;
font-weight: 800 !important;
}
/* Botao Comprar Agora */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
display: block !important;
margin: 10px 14px 12px !important;
background: var(–kk-primary) !important;
color: white !important;
border-radius: 24px !important;
padding: 10px 16px !important;
font-weight: 700 !important;
font-size: 14px !important;
text-align: center !important;
text-transform: none !important;
border: none !important;
transition: background 0.2s;
}
.woocommerce ul.products li.product .button:hover {
background: var(–kk-primary-dark) !important;
}
.woocommerce ul.products li.product .button::before {
content: “🛒 “;
margin-right: 4px;
}
/* Esconder rating padrao */
.woocommerce ul.products li.product .star-rating { display: none !important; }
/* === FAIXA PIX no card === */
.woocommerce ul.products li.product::after {
content: “💳 1x sem juros via PIX”;
display: block;
text-align: center;
font-size: 11px;
color: var(–kk-muted);
padding: 0 14px 12px;
border-top: 1px dashed #eee;
margin: 0 14px;
padding-top: 8px;
}
/* === SINGLE PRODUCT (pagina individual) === */
.woocommerce div.product .product_title { color: var(–kk-text); font-weight: 800; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
color: var(–kk-primary) !important;
font-weight: 800 !important;
font-size: 32px !important;
}
.woocommerce #respond input#submit, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt {
background: var(–kk-primary) !important;
border-radius: 30px !important;
font-weight: 700 !important;
padding: 14px 28px !important;
text-transform: none !important;
font-size: 16px !important;
}
/* === LOJA HEADER === */
.woocommerce .woocommerce-products-header__title {
text-align: center;
color: var(–kk-primary);
font-weight: 800;
font-size: 28px;
margin: 20px 0;
}
/* === PAGINACAO === */
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
border-radius: 6px !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
background: var(–kk-primary) !important;
color: white !important;
}
/* === HOME CATEGORIAS CIRCULARES === */
.karvi-cat-circles {
display: flex;
gap: 20px;
overflow-x: auto;
padding: 20px 12px;
scrollbar-width: thin;
}
.karvi-cat-circle {
flex: 0 0 140px;
text-align: center;
text-decoration: none;
}
.karvi-cat-circle img {
width: 130px;
height: 130px;
border-radius: 50% !important;
object-fit: cover;
border: 3px solid var(–kk-primary);
transition: transform 0.2s;
}
.karvi-cat-circle:hover img { transform: scale(1.05); }
.karvi-cat-circle span {
display: block;
margin-top: 10px;
font-weight: 700;
color: var(–kk-text);
font-size: 14px;
}
/* === STATS CARDS === */
.karvi-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
padding: 20px;
}
@media (max-width: 768px) {
.karvi-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.karvi-stat {
background: white;
border-radius: 16px;
padding: 18px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.karvi-stat-icon {
font-size: 28px;
background: linear-gradient(135deg, var(–kk-primary), var(–kk-primary-dark));
color: white;
width: 52px; height: 52px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.karvi-stat-content strong {
display: block;
font-size: 18px;
color: var(–kk-text);
font-weight: 800;
}
.karvi-stat-content small {
display: block;
color: var(–kk-muted);
font-size: 12px;
}
/* === STICKY FINALIZAR PEDIDO === */
.karvi-sticky-checkout {
position: fixed !important;
bottom: 0 !important; left: 0 !important; right: 0 !important;
background: var(–kk-primary);
color: white;
text-align: center;
padding: 14px;
font-weight: 800;
font-size: 16px;
z-index: 9998;
cursor: pointer;
letter-spacing: 0.5px;
box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
text-decoration: none !important;
display: block;
}
.karvi-sticky-checkout:hover { background: var(–kk-primary-dark); color: white; }
.karvi-sticky-checkout::after { content: ” ➤”; }
/* Adicionar espaco no body pra nao tampar conteudo */
body { padding-bottom: 60px !important; }
/* === POPUP SOCIAL PROOF === */
.karvi-social-proof {
position: fixed;
top: 80px;
right: 16px;
background: white;
border-radius: 50px;
padding: 12px 18px 12px 14px;
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
display: flex;
align-items: center;
gap: 10px;
z-index: 9997;
max-width: 320px;
font-size: 13px;
animation: slideInRight 0.5s;
transition: opacity 0.4s, transform 0.4s;
}
.karvi-social-proof.hide { opacity: 0; transform: translateX(20px); pointer-events: none; }
.karvi-social-proof::before {
content: “🛒”;
background: var(–kk-primary);
color: white;
width: 30px; height: 30px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
@keyframes slideInRight {
from { transform: translateX(120%); }
to { transform: translateX(0); }
}
/* === BOTAO WHATSAPP FLUTUANTE (overrride) === */
.ht-ctc-chat { bottom: 80px !important; left: 16px !important; right: auto !important; }
/* === FOOTER === */
.site-footer {
background: linear-gradient(180deg, #fafafa, #ececec) !important;
color: var(–kk-text) !important;
border-top: 3px solid var(–kk-primary);
}
.site-footer a { color: var(–kk-primary) !important; }
.site-footer a:hover { color: var(–kk-primary-dark) !important; }
/* === CARRINHO ICONE === */
.ast-cart-menu-wrap, .astra-cart-drawer-open {
background: var(–kk-primary) !important;
color: white !important;
border-radius: 50px !important;
padding: 8px 16px !important;
}
.ast-cart-menu-wrap .count {
background: var(–kk-orange) !important;
color: white !important;
}
/* === BUTTON GERAL === */
.wp-block-button__link, .wp-element-button {
background: var(–kk-primary) !important;
border-radius: 30px !important;
font-weight: 700 !important;
padding: 12px 28px !important;
}
/* === FAIXA BENEFICIOS HOME (override emojis gigantes) === */
.karvi-stat-icon img { width: 28px; height: 28px; }
/* === REMOVER blocos que poluem === */
.woocommerce-breadcrumb { display: none !important; }
.woocommerce-result-count { color: var(–kk-muted); font-size: 13px; }
/* === CARRINHO LATERAL === */
.woocommerce-mini-cart, .widget_shopping_cart_content { background: white; }
/* === ELEMENTOR WIDGETS === */
.elementor-widget-wp-widget-woocommerce_product_categories ul li a {
color: var(–kk-primary) !important;
font-weight: 600;
}