/*
Theme Name: 4M&C V6
Theme URI: https://4mcinformatica.com.br
Author: 4M&C Dev
Description: Tema customizado oficial da 4M&C Informatica (WooCommerce). V6 - novo campo no Personalizador "Logo do Rodape (versao clara)": o logo padrao (Identidade do Site) tem texto navy pensado pro header claro e ficava ilegivel no rodape escuro. Agora existe um upload dedicado para uma versao com texto branco so pro rodape, com fallback em texto branco (nao navy) quando vazio. Inclui todos os fixes anteriores (Painel Claro V5, erro fatal sem WooCommerce, limpeza de teal residual).
Version: 1.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 4mc-theme
Tags: e-commerce, custom-colors, custom-menu, woocommerce
*/

:root {
    /* Brand Colors */
    --brand: #0891C2;
    --brand-hover: #076E93;
    --success: #6DA544;
    --warning: #FFDA44;

    /* Base Colors */
    --background: #F7F8FA;
    --foreground: #202020;
    --muted: #656565;
    --muted-bg: #F0F0F0;
    --border: #E2E8F0;

    /* Layout & Header/Nav Colors */
    --header-top: #ffffff;
    --header-nav: #ffffff;
    --nav-bg: #ffffff;

    /* Border Radii */
    --radius-lg: 12px;
    --radius-md: 8px;
    --radius-sm: 4px;

    /* Legacy Theme Variables (Aliased for compatibility) */
    --teal-brand: var(--brand);
    --dark-bg-start: #050B14;
    --dark-bg-end: #0B2447;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: 'Inter', Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* TOP PROMO BAR */
.top-promo-bar {
    background-color: var(--brand);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 16px;
    text-align: center;
    letter-spacing: 0.05em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.top-promo-bar .bar-separator {
    opacity: 0.6;
}
@media (max-width: 768px) {
    .top-promo-bar {
        font-size: 10px;
        flex-direction: column;
        gap: 2px;
    }
    .top-promo-bar .bar-separator {
        display: none;
    }
}

/* HEADER — Painel Claro: fundo quase branco (era escuro), navy so no texto/logo */
.site-header {
    background: #FBFCFD;
    padding: 16px 0;
    box-shadow: 0 1px 2px rgba(11,36,71,0.06);
    border-bottom: 1px solid #E2E8F0;
    position: relative;
    z-index: 100;
}
.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.site-branding {
    flex-shrink: 0;
}
.site-logo,
.custom-logo-link img {
    width: 180px;
    height: auto;
    display: block;
}
.site-logo-fallback {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: 'Sora', 'Inter', Arial, sans-serif;
    line-height: 1;
}
.site-logo-fallback strong {
    font-size: 26px;
    font-weight: 800;
    color: #0B2447;
}
.site-logo-fallback span {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: #6B7280;
}
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        gap: 15px;
    }
    .site-logo,
    .custom-logo-link img {
        width: 150px;
    }
    .site-logo-fallback strong { font-size: 22px; }
    .site-logo-fallback span { font-size: 10px; }
}

/* SEARCH BAR */
.header-search {
    flex-grow: 1;
    max-width: 600px;
}
.header-search form {
    display: flex;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.header-search form:focus-within {
    border-color: rgba(41, 171, 226, 0.5);
    box-shadow: 0 0 0 3px rgba(41, 171, 226, 0.25);
}
.search-category-dropdown {
    display: none;
    background-color: #f3f4f6;
    color: var(--foreground);
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    align-items: center;
    border-right: 1px solid var(--border);
    cursor: pointer;
}
.search-category-dropdown:hover {
    background-color: #e5e7eb;
}
@media (min-width: 768px) {
    .search-category-dropdown { display: flex; }
}
.header-search .search-field {
    flex-grow: 1;
    border: none;
    padding: 10px 16px;
    font-size: 14px;
    outline: none;
    color: var(--foreground);
    background: transparent;
}
.header-search .search-submit {
    color: #ffffff;
    border: none;
    padding: 0 24px;
    cursor: pointer;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-search .search-submit:hover {
    opacity: 0.9;
}

/* HEADER LOCATION */
.header-location {
    display: none;
    align-items: center;
    gap: 12px;
    color: #0B2447;
    cursor: pointer;
    transition: opacity 0.2s;
}
.header-location:hover {
    opacity: 0.8;
}
.location-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.location-title {
    font-weight: 700;
    font-size: 14px;
}
.location-sub {
    font-size: 12px;
    color: rgba(11, 36, 71, 0.55);
}
@media (min-width: 1024px) {
    .header-location { display: flex; }
}

/* HEADER ACTIONS */
.header-actions {
    display: flex;
    align-items: center;
    gap: 24px;
}
.header-account {
    display: none;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #0B2447;
    transition: color 0.2s;
}
.header-account:hover {
    color: var(--brand);
}
@media (min-width: 768px) {
    .header-account { display: flex; }
}
.account-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(11, 36, 71, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}
.header-account:hover .account-icon {
    background-color: rgba(41, 171, 226, 0.2);
}
.account-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.account-title {
    font-size: 12px;
    color: rgba(11, 36, 71, 0.55);
}
.account-subtitle {
    font-weight: 700;
    font-size: 14px;
}
.header-cart {
    text-decoration: none;
    color: #0B2447;
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}
.header-cart:hover {
    transform: scale(1.05);
}
.cart-icon-wrapper {
    position: relative;
    padding: 4px;
}
.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--success);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FBFCFD;
}

/* CATEGORY NAV */
.category-nav {
    background-color: #ffffff;
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.nav-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-left {
    display: flex;
    align-items: center;
    gap: 20px;
}
.nav-categories-btn {
    background-color: #1a1a2e;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}
.nav-categories-btn:hover {
    background-color: var(--brand);
}
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    gap: 8px;
}
@media (min-width: 1024px) {
    .nav-menu { display: flex; }
}
.nav-menu li a {
    text-decoration: none;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s;
}
.nav-menu li a:hover {
    color: var(--brand);
    background-color: rgba(41, 171, 226, 0.1);
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}
.nav-right a {
    text-decoration: none;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    transition: color 0.2s;
    display: none;
}
@media (min-width: 768px) {
    .nav-right a { display: flex; align-items: center; }
}
.nav-right a:hover {
    color: var(--foreground);
}
.nav-right .nav-icon-link:hover {
    color: var(--brand);
}
.nav-right .nav-ofertas {
    background-color: rgba(41, 171, 226, 0.05);
    color: var(--brand);
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
}
.nav-right .nav-ofertas:hover {
    background-color: rgba(41, 171, 226, 0.1);
}

/* ======================================================
   MOBILE OFF-CANVAS MENU
   ====================================================== */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #0B2447;
}
@media (max-width: 1024px) {
    .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; }
    /* Hide desktop category nav completely on mobile/tablet */
    .category-nav { display: none !important; }
}

.offcanvas-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    pointer-events: none;
    visibility: hidden;
}
.offcanvas-menu.active {
    pointer-events: auto;
    visibility: visible;
}
.offcanvas-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.offcanvas-menu.active .offcanvas-overlay {
    opacity: 1;
}
.offcanvas-content {
    position: absolute;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    transition: left 0.3s cubic-bezier(0.77, 0, 0.18, 1);
    overflow-y: auto;
}
.offcanvas-menu.active .offcanvas-content {
    left: 0;
}
.offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--border);
    background-color: #f8f9fa;
}
.offcanvas-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--brand);
}
.offcanvas-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #666;
    padding: 4px;
    display: flex;
}
.offcanvas-body {
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.offcanvas-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}
.offcanvas-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.offcanvas-nav li a {
    text-decoration: none;
    color: var(--foreground);
    font-size: 16px;
    font-weight: 600;
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid #f1f1f1;
}
.offcanvas-nav li:last-child a { border-bottom: none; }
.offcanvas-footer-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.offcanvas-footer-links a {
    text-decoration: none;
    color: #444;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
}
.offcanvas-footer-links a svg { color: var(--brand); }
/* MAIN CONTENT GRID & CONTAINER */
.content-area {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}

/* WOOCOMMERCE PRODUCT CARDS & LOOP */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
}

/* WOOCOMMERCE SINGLE PRODUCT PAGE */
.woocommerce div.product {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 30px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    margin-top: 20px !important;
    border: 1px solid var(--border);
}
.woocommerce div.product .product_title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--foreground) !important;
}
.woocommerce div.product p.price, 
.woocommerce div.product span.price {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--brand) !important;
}
.woocommerce div.product form.cart .button {
    background-color: var(--success) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 14px 28px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    transition: background-color 0.2s !important;
}
.woocommerce div.product form.cart .button:hover {
    background-color: #1C8FC4 !important;
}

/* FLOATING WHATSAPP BUTTON */
.whatsapp-float-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    background-color: #25D366;
    color: #ffffff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
}
.whatsapp-float-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* FOOTER */
.site-footer {
    background: linear-gradient(to right, var(--dark-bg-start), var(--dark-bg-end));
    color: #ffffff;
    padding: 60px 0 30px 0;
    margin-top: 60px;
    border-top: 4px solid var(--brand);
}
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 40px;
}
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 576px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}
.footer-logo-wrapper {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 20px;
}
.footer-logo-wrapper .site-logo,
.footer-logo-wrapper .custom-logo,
.footer-logo-img {
    width: 150px;
    height: auto;
}
/* Fallback do rodapé: texto BRANCO (fundo escuro) — diferente do fallback
   do header, que é navy (fundo claro). Mesma classe base, cores opostas. */
.footer-logo-fallback strong {
    color: #FFFFFF !important;
}
.footer-logo-fallback span {
    color: #9AA5B1 !important;
}
.footer-about-text {
    font-size: 14px;
    color: #b3b3b3;
    line-height: 1.6;
}
.footer-title {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    color: #ffffff;
}
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li {
    margin-bottom: 12px;
}
.footer-links li a {
    text-decoration: none;
    color: #b3b3b3;
    font-size: 14px;
    transition: color 0.2s;
}
.footer-links li a:hover {
    color: var(--brand);
}
.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-contact-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #b3b3b3;
}
.footer-contact-list li svg {
    color: var(--brand);
    flex-shrink: 0;
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
.footer-bottom p {
    font-size: 13px;
    color: #808080;
    margin: 0;
}
.footer-payments {
    display: flex;
    gap: 12px;
}
.footer-payments img {
    height: 24px;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.footer-payments img:hover {
    opacity: 1;
}

/* ======================================================
   HERO CAROUSEL  SLIDING TRACK
   ====================================================== */
.hero-carousel-section {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    height: 450px;
    border-radius: 16px;
    background: #1a1a2e;
}
@media (max-width: 768px) {
    .hero-carousel-section { height: 300px; border-radius: 12px; }
}

/* The sliding track that holds all slides side by side */
.hero-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.18, 1);
    will-change: transform;
}

/* Each slide */
.hero-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Decorative diagonal shape on the right — padrão de linhas "blueprint/tech"
   em vez de um bloco de cor chapada (motivo de varejo genérico), pra
   diferenciar estruturalmente do site irmão Portal One. */
.hero-bg-shape {
    position: absolute;
    right: -8%;
    top: 0;
    height: 100%;
    width: 32%;
    transform: skewX(-20deg);
    z-index: 1;
    opacity: 0.35;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255,255,255,0.14) 0px,
        rgba(255,255,255,0.14) 2px,
        transparent 2px,
        transparent 26px
    );
}
@media (max-width: 768px) {
    .hero-bg-shape { width: 45%; right: -18%; }
}

/* Selo técnico de canto (substitui a letra gigante "watermark" por uma
   tag pequena, discreta, estilo especificação técnica). */
.hero-watermark {
    position: absolute;
    right: 6%;
    top: 24px;
    font-family: 'Sora', 'Inter', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 20px;
    padding: 5px 14px;
    pointer-events: none;
    z-index: 2;
    user-select: none;
}
@media (max-width: 768px) {
    .hero-watermark { font-size: 10px; right: 4%; top: 14px; padding: 4px 10px; }
}

/* Content block */
.hero-content {
    position: relative;
    z-index: 10;
    color: #ffffff;
    padding: 0 0 0 8%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    max-width: 55%;
}
@media (max-width: 768px) {
    .hero-content { padding: 0 0 0 5%; max-width: 70%; gap: 10px; }
}

/* Label badge */
.hero-label {
    display: inline-block;
    background-color: var(--brand);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
}

.hero-content h2 {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -1.5px;
    color: #ffffff;
}
.hero-content p {
    font-size: 16px;
    opacity: 0.8;
    margin: 0;
    line-height: 1.6;
    max-width: 380px;
}
@media (max-width: 768px) {
    .hero-content h2 { font-size: 26px; }
    .hero-content p { font-size: 13px; }
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #ffffff;
    color: #1a1a2e;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s, background-color 0.2s;
    font-size: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    margin-top: 4px;
}
.hero-btn:hover {
    opacity: 0.95;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* Navigation arrows */
.hero-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    color: #ffffff;
    transition: background-color 0.2s, transform 0.2s;
}
.hero-nav-arrow:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.08);
}
.arrow-left { left: 20px; }
.arrow-right { right: 20px; }
@media (max-width: 768px) {
    .hero-nav-arrow { width: 36px; height: 36px; }
    .arrow-left { left: 8px; }
    .arrow-right { right: 8px; }
}

/* Dots */
.hero-dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 30;
}
.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.4);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, width 0.3s, border-radius 0.3s;
    padding: 0;
}
.hero-dot.active {
    background-color: #ffffff;
    width: 24px;
    border-radius: 4px;
}


/* TRUST BADGES SECTION */
.trust-badges-section {
    background-color: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 45px;
}
.trust-badges-container {
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}
.badge-item {
    display: flex;
    align-items: center;
    gap: 16px;
}
.badge-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--muted-bg);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.2s, color 0.2s;
}
.badge-item:hover .badge-icon {
    background-color: var(--brand);
    color: #ffffff;
}
.badge-info h4 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--foreground);
}
.badge-info p {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}
@media (max-width: 768px) {
    .trust-badges-container {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* SHOP PAGE WRAPPER */
.shop-page,
#primary.shop-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px;
    width: 100%;
}

/* SHOP CONTAINER */
.shop-content-wrapper {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    width: 100%;
    box-sizing: border-box;
}

/* Force WooCommerce to use 3 columns and proper grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}
@media (max-width: 992px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 576px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* WOOCOMMERCE PRODUCT CARDS (NEXT.JS STYLE) */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    float: none !important;
    text-align: left;
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-4px);
}

/* Product Image Area */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: block;
    text-decoration: none;
    outline: none;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.woocommerce ul.products li.product img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    object-position: center;
    background-color: #f5f6f8;
    margin: 0 !important;
    padding: 20px;
    box-sizing: border-box;
    display: block;
    border-bottom: 1px solid var(--border);
}

/* Product Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--foreground) !important;
    margin: 16px 20px 8px 20px !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    text-transform: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Product Price */
.woocommerce ul.products li.product .price {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--brand) !important;
    margin: 0 20px 20px 20px !important;
    display: block;
}
.woocommerce ul.products li.product .price del {
    color: #a0aec0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-right: 8px;
}
.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    background: none;
    font-weight: 800 !important;
}

/* Add to Cart Button */
.woocommerce ul.products li.product .button {
    background-color: var(--brand) !important;
    color: #ffffff !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
    margin: 0 !important;
    width: 100% !important;
    padding: 14px 0 !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: none !important;
    transition: background-color 0.2s !important;
    border: none !important;
    display: block;
}
.woocommerce ul.products li.product .button:hover {
    background-color: var(--brand-hover) !important;
    color: #ffffff !important;
}

/* Hide Default WooCommerce ratings if any, to keep it clean */
.woocommerce .star-rating {
    margin: 0 20px 8px 20px !important;
}

/* Top bar result count & sorting */
.woocommerce .woocommerce-result-count, 
.woocommerce-page .woocommerce-result-count {
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
}
.woocommerce .woocommerce-ordering select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--foreground);
    background-color: #f8f9fa;
    outline: none;
}

/* CATEGORY CIRCLES */
.home-categories-section {
    max-width: 1200px;
    margin: 40px auto 60px auto;
    padding: 0 20px;
}
.home-categories-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 40px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.hch-left {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--brand);
}
.hch-left h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--foreground);
    letter-spacing: 0.05em;
}
.hch-right a {
    text-decoration: none;
    color: var(--brand);
    font-weight: 700;
    font-size: 14px;
}
.hch-right a:hover {
    text-decoration: underline;
}
.home-categories-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}
.cat-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--foreground);
    transition: transform 0.2s;
}
.cat-circle-item:hover {
    transform: translateY(-5px);
}
.cat-circle-item:hover .cat-circle-title {
    color: var(--brand);
}
.cat-circle-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cat-circle-item:hover .cat-circle-img {
    border-color: var(--brand);
    box-shadow: 0 8px 16px rgba(41, 171, 226, 0.15);
}
.cat-circle-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}
.cat-circle-title {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: color 0.2s;
}

/* RECOMMENDED SECTION */
.home-recommended-section {
    max-width: 1200px;
    margin: 0 auto 60px auto;
    padding: 0 20px;
}
.home-recommended-container {
    display: flex;
    gap: 24px;
}
@media (max-width: 992px) {
    .home-recommended-container { flex-direction: column; }
}
.rec-sidebar {
    flex: 1;
    min-width: 280px;
    background-color: var(--brand);
    border-radius: var(--radius-lg);
    padding: 40px 30px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(41, 171, 226, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.rec-sidebar-bg {
    position: absolute;
}
.shape-1 {
    right: 0;
    top: 0;
    width: 150px;
    height: 150px;
    background-color: rgba(0,0,0,0.1);
    border-bottom-left-radius: 100%;
}
.shape-2 {
    left: 0;
    bottom: 0;
    width: 100px;
    height: 100px;
    background-color: rgba(255,255,255,0.1);
    border-top-right-radius: 100%;
}
.rec-sidebar-content {
    position: relative;
    z-index: 10;
}
.rec-line {
    width: 40px;
    height: 4px;
    background-color: #ffffff;
    border-radius: 2px;
    margin-bottom: 24px;
}
.rec-sidebar-content h2 {
    font-size: 32px;
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 16px 0;
}
.rec-sidebar-content p {
    font-size: 14px;
    opacity: 0.9;
    margin: 0 0 32px 0;
    line-height: 1.5;
}
.rec-btn {
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.3);
    color: #ffffff;
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    transition: background-color 0.2s, color 0.2s;
    text-align: center;
}
.rec-btn:hover {
    background-color: #ffffff;
    color: var(--brand);
}

.rec-products-grid {
    flex: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 768px) {
    .rec-products-grid { grid-template-columns: 1fr; }
}
.rec-product-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
}
.rec-product-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.rec-stars {
    display: flex;
    justify-content: flex-end;
    color: #ffd700;
    font-size: 12px;
    margin-bottom: 16px;
}
.rec-product-link {
    text-decoration: none;
    color: var(--foreground);
    flex-grow: 1;
}
.rec-img-wrapper {
    background-color: #f5f6f8;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
}
.rec-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 12px;
    box-sizing: border-box;
}
.rec-product-card h3 {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 16px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--foreground);
    transition: color 0.2s;
}
.rec-product-link:hover h3 {
    color: var(--brand);
}
.rec-price-area {
    border-top: 1px solid var(--border);
    padding-top: 16px;
    position: relative;
    margin-top: 16px;
}
.rec-price {
    font-size: 20px;
    font-weight: 900;
    color: var(--success);
}
.pix-label {
    font-size: 10px;
    font-weight: 800;
}
.rec-installments {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}
.rec-add-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40px;
    height: 40px;
    background-color: var(--brand);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.2s;
}
.rec-add-btn:hover {
    background-color: #1a1a2e;
    transform: scale(1.05);
}

/* ======================================================
   SHOP INNER CONTAINER
   ====================================================== */
.shop-inner-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

/* ======================================================
   SINGLE PRODUCT PAGE
   ====================================================== */
.woocommerce div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 40px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin: 30px 0;
}
@media (max-width: 768px) {
    .woocommerce div.product {
        grid-template-columns: 1fr;
        padding: 20px;
    }
}

/* Product gallery */
.woocommerce div.product div.images {
    position: sticky;
    top: 20px;
}
.woocommerce div.product div.images img {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: #f8f9fa;
    padding: 20px;
    object-fit: contain;
    aspect-ratio: 1/1;
    width: 100%;
}
.woocommerce div.product div.images .flex-control-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding: 0;
}
.woocommerce div.product div.images .flex-control-thumbs li {
    width: 72px !important;
    height: 72px !important;
    list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs img {
    border-radius: 8px;
    padding: 4px;
    aspect-ratio: 1/1;
    object-fit: contain;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, border-color 0.2s;
}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
    opacity: 1;
    border-color: var(--brand);
}

/* Product summary / details column */
.woocommerce div.product div.summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.woocommerce div.product .product_title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--foreground) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}
.woocommerce div.product .price {
    font-size: 32px !important;
    font-weight: 900 !important;
    color: var(--brand) !important;
    margin: 0 !important;
}
.woocommerce div.product .price del {
    font-size: 18px !important;
    color: var(--muted) !important;
    font-weight: 400 !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
}
.woocommerce div.product form.cart {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.woocommerce div.product form.cart .quantity input {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    width: 80px;
    text-align: center;
    color: var(--foreground);
}
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: var(--brand) !important;
    color: #ffffff !important;
    border-radius: var(--radius-md) !important;
    padding: 14px 32px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s !important;
    text-decoration: none;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background-color: var(--brand-hover) !important;
    transform: translateY(-1px);
}
.woocommerce div.product .product_meta {
    font-size: 13px;
    color: var(--muted);
    border-top: 1px solid var(--border);
    padding-top: 16px;
}
.woocommerce div.product .product_meta span {
    display: block;
    margin-bottom: 4px;
}
.woocommerce div.product .woocommerce-tabs {
    grid-column: 1 / -1;
    margin-top: 20px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 -1px;
    border-bottom: 1px solid var(--border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    transition: color 0.2s, border-color 0.2s;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--brand);
    border-color: var(--border);
    border-bottom-color: #ffffff;
    background: #ffffff;
}
.woocommerce div.product .woocommerce-tabs .panel {
    background: #ffffff;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 24px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
}

/* ======================================================
   CART PAGE
   ====================================================== */
.woocommerce-cart .woocommerce,
.woocommerce-cart #primary {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}
.woocommerce table.shop_table {
    border-collapse: collapse;
    width: 100%;
    background: #ffffff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.woocommerce table.shop_table th {
    background-color: var(--muted-bg);
    color: var(--foreground);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 20px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.woocommerce table.shop_table td {
    padding: 20px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: var(--foreground);
}
.woocommerce table.shop_table td.product-name a {
    font-weight: 600;
    color: var(--foreground);
    text-decoration: none;
    transition: color 0.2s;
}
.woocommerce table.shop_table td.product-name a:hover {
    color: var(--brand);
}
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal {
    font-weight: 800;
    color: var(--brand);
}
.woocommerce table.shop_table td img {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.woocommerce .cart-collaterals {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}
.woocommerce .cart_totals {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    min-width: 320px;
}
.woocommerce .cart_totals h2 {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 20px;
    color: var(--foreground);
}
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.woocommerce .cart_totals .order-total .amount {
    font-size: 22px;
    font-weight: 900;
    color: var(--brand);
}
.woocommerce .wc-proceed-to-checkout .checkout-button {
    background-color: var(--brand) !important;
    color: #ffffff !important;
    padding: 16px 32px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: var(--radius-md) !important;
    display: block;
    text-align: center;
    margin-top: 16px;
    transition: background-color 0.2s !important;
}
.woocommerce .wc-proceed-to-checkout .checkout-button:hover {
    background-color: var(--brand-hover) !important;
}

/* ======================================================
   CHECKOUT PAGE
   ====================================================== */
.woocommerce-checkout #primary,
.woocommerce-checkout .woocommerce {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-bottom: 20px;
}
.woocommerce-checkout .woocommerce-checkout .col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 768px) {
    .woocommerce-checkout .woocommerce-checkout .col2-set {
        grid-template-columns: 1fr;
    }
}
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
    font-size: 18px;
    font-weight: 800;
    color: var(--foreground);
    margin-bottom: 20px;
    border: none;
    background: none;
    padding: 0;
    box-shadow: none;
}
.woocommerce-checkout .form-row label {
    font-size: 13px;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 6px;
    display: block;
}
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    color: var(--foreground) !important;
    width: 100% !important;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus {
    border-color: var(--brand) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(41,171,226,0.12);
}
#place_order {
    background-color: var(--brand) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 18px 32px !important;
    border-radius: var(--radius-md) !important;
    width: 100%;
    margin-top: 16px;
    border: none !important;
    cursor: pointer;
    transition: background-color 0.2s !important;
}
#place_order:hover {
    background-color: var(--brand-hover) !important;
}

/* ======================================================
   CATEGORY BANNER
   ====================================================== */
.category-banner-section {
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 220px;
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    border-radius: 0 0 16px 16px;
}
.category-banner-bg-shape {
    position: absolute;
    right: -8%;
    top: 0;
    height: 100%;
    width: 32%;
    transform: skewX(-20deg);
    opacity: 0.6;
    border-left: 6px solid rgba(255,255,255,0.08);
}
.category-banner-content {
    position: relative;
    z-index: 10;
    color: #ffffff;
    padding: 0 60px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.category-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    opacity: 0.7;
    margin-bottom: 4px;
}
.category-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.category-breadcrumb a:hover {
    opacity: 1;
    text-decoration: underline;
}
.category-banner-icon {
    font-size: 36px;
    line-height: 1;
}
.category-banner-title {
    font-size: 40px;
    font-weight: 900;
    margin: 0;
    letter-spacing: -1px;
    line-height: 1.1;
    color: #ffffff;
}
.category-banner-sub {
    font-size: 15px;
    margin: 0;
    opacity: 0.8;
    max-width: 500px;
}
.category-banner-watermark {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 120px;
    font-weight: 900;
    letter-spacing: -4px;
    opacity: 0.25;
    pointer-events: none;
    user-select: none;
    z-index: 5;
    text-transform: uppercase;
    color: rgba(255,255,255,0.15) !important;
}
@media (max-width: 768px) {
    .category-banner-section { height: 180px; }
    .category-banner-content { padding: 0 24px; }
    .category-banner-title { font-size: 28px; }
    .category-banner-sub { font-size: 13px; }
    .category-banner-watermark { font-size: 70px; right: 2%; }
}

/* Category page title override */
.woocommerce .woocommerce-products-header {
    display: none;
}

/* ======================================================
   EMPTY PRODUCTS STATE
   ====================================================== */
.woocommerce-info,
.woocommerce-message {
    background: #ffffff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    font-size: 14px;
    color: var(--foreground);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.woocommerce-info::before {
    content: '';
    font-size: 20px;
}
.woocommerce .woocommerce-no-products-found,
.woocommerce p.woocommerce-result-count:only-child {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
    font-size: 16px;
}

/* ======================================================
   ACTIVE NAV CATEGORY HIGHLIGHT
   ====================================================== */
.nav-menu li.current-cat > a,
.nav-menu li a.active {
    color: #29ABE2 !important;
    font-weight: 800;
}

/* ======================================================
   SHOP RESULT COUNT & ORDER
   ====================================================== */
.woocommerce-result-count {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--muted);
    display: inline-block;
    margin-bottom: 20px;
}
.woocommerce-ordering {
    margin-bottom: 20px;
}
.woocommerce-ordering select {
    padding: 8px 12px;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    font-size: 14px;
    color: var(--foreground);
    background-color: #ffffff;
    cursor: pointer;
}

/* ======================================================
   NEXTEND SOCIAL LOGIN STYLING
   ====================================================== */
.nsl-container {
    margin-bottom: 24px !important;
    text-align: center;
}
.nsl-container-block .nsl-button-default {
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    transition: box-shadow 0.2s, transform 0.2s !important;
    border: 1px solid var(--border) !important;
    background-color: #ffffff !important;
}
.nsl-container-block .nsl-button-default:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    transform: translateY(-1px) !important;
}
/* Altera a cor do texto do boto do Google para escuro no nosso tema */
.nsl-container-block .nsl-button-google .nsl-button-label-container {
    color: var(--foreground) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* ======================================================
   WOOCOMMERCE SINGLE PRODUCT PREMIUM STYLING
   ====================================================== */

/* Container geral do produto */
.woocommerce div.product {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 40px;
    margin-bottom: 60px;
    align-items: flex-start;
}

/* Coluna de Imagens (Esquerda) */
.woocommerce div.product div.images {
    flex: 1 1 45%;
    min-width: 300px;
    margin-bottom: 0 !important;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #ffffff;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

.woocommerce div.product div.images img {
    border-radius: var(--radius-md);
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Coluna de Resumo (Direita) */
.woocommerce div.product div.summary {
    flex: 1 1 45%;
    min-width: 300px;
    margin-bottom: 0 !important;
    padding: 10px 0;
}

/* Ttulo do Produto */
.woocommerce div.product .product_title {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--foreground) !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.5px;
    clear: none;
}

/* Preo do Produto */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--brand) !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    margin-bottom: 25px !important;
    display: block;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
    color: var(--muted) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    opacity: 0.6;
    margin-right: 10px;
}

/* Descrio Curta */
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Boto de Comprar (Add to Cart) */
.woocommerce div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
    align-items: center;
}

.woocommerce div.product form.cart .button {
    flex: 1;
    background-color: var(--brand) !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    padding: 18px 32px !important;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
    text-align: center;
    border: none !important;
    box-shadow: 0 4px 15px rgba(41, 171, 226, 0.3) !important;
}

.woocommerce div.product form.cart .button:hover {
    background-color: var(--brand-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(41, 171, 226, 0.4) !important;
}

/* Campo de Quantidade */
.woocommerce div.product form.cart div.quantity {
    margin: 0 !important;
}

.woocommerce div.product form.cart div.quantity input.qty {
    width: 80px;
    height: 58px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: var(--foreground);
    background: #ffffff;
}

/* Estilizao para o Woo Variation Swatches */
.woocommerce div.product form.cart .variations {
    width: 100%;
    margin-bottom: 20px;
}

.woocommerce div.product form.cart .variations th {
    text-align: left;
    padding: 10px 0;
    font-weight: 600;
    color: var(--foreground);
    font-size: 15px;
}

.woocommerce div.product form.cart .variations td {
    padding: 10px 0;
}

.woo-variation-swatches .variable-items-wrapper {
    gap: 10px;
}

.woo-variation-swatches .variable-item {
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    border: 2px solid var(--border) !important;
    transition: all 0.2s ease !important;
}

.woo-variation-swatches .variable-item:hover {
    border-color: var(--brand) !important;
}

.woo-variation-swatches .variable-item.selected {
    border-color: var(--brand) !important;
    background-color: rgba(41, 171, 226, 0.05) !important;
    box-shadow: 0 0 0 1px var(--brand) inset !important;
}

/* Meta Infos (SKU, Categoria) */
.woocommerce div.product .product_meta {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: 14px;
    color: var(--muted);
}

.woocommerce div.product .product_meta a {
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
}

.woocommerce div.product .product_meta a:hover {
    text-decoration: underline;
}

/* Abas Inferiores (Descrio, Avaliaes) */
.woocommerce div.product .woocommerce-tabs {
    width: 100%;
    margin-top: 60px;
    clear: both;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
    border-bottom: 2px solid var(--border);
    display: flex;
    gap: 30px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 0 15px 0 !important;
    position: relative;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--muted) !important;
    transition: color 0.3s;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--foreground) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
    content: "";
    display: block !important;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--brand);
}

.woocommerce div.product .woocommerce-tabs .panel {
    background: #ffffff;
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        flex: 1 1 100%;
    }
    .woocommerce div.product .product_title {
        font-size: 24px !important;
    }
    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
        font-size: 28px !important;
    }
}

/* ==========================================================================
    CORREO DO DROPDOWN CATEGORIAS (DESKTOP)
   ========================================================================== */
.nav-left {
    position: relative !important;
}
.nav-left .nav-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: #ffffff !important;
    min-width: 250px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    border-radius: 8px !important;
    z-index: 9999 !important;
    padding: 10px 0 !important;
    flex-direction: column !important;
    margin: 0 !important;
}
.nav-left:hover .nav-menu {
    display: flex !important;
}
.nav-left .nav-menu li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
.nav-left .nav-menu li a {
    display: block !important;
    padding: 12px 20px !important;
    color: #444444 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    border-bottom: 1px solid #f5f5f5;
}
.nav-left .nav-menu li:last-child a {
    border-bottom: none;
}
.nav-left .nav-menu li a:hover {
    background-color: #f8fcfb !important;
    color: #29ABE2 !important;
    padding-left: 25px !important;
}

/* ==========================================================================
    MOBILE APP-LIKE REDESIGN
   ========================================================================== */
@media (max-width: 768px) {
    .elementor-section-boxed > .elementor-container, 
    .wp-block-group, .container, .page-wrapper,
    .site-content, .content-area, .site-main, .entry-content,
    .elementor-column-gap-default > .elementor-column > .elementor-element-populated {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden;
    }
    
    img, .wp-block-image img, .elementor-image img {
        border-radius: 12px;
    }
    .elementor-section-wrap > .elementor-section > .elementor-container {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
    }

    ul.products {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 10px !important;
    }
    ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        padding: 10px !important;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    ul.products li.product img {
        border-radius: 12px;
        margin-bottom: 10px;
    }
    
    ul.products li.product h2, ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }
    
    ul.products li.product .price {
        font-size: 16px !important;
        font-weight: bold !important;
        color: #29ABE2 !important;
    }

    body {
        padding-bottom: 70px !important;
    }
    
    .joinchat, .wa-button, .whatsapp-button, [class*="whatsapp"], .whatsapp-float-btn {
        bottom: 80px !important; 
    }
}

/* ==========================================================================
    BOTTOM APP BAR
   ========================================================================== */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 65px;
        background: #ffffff;
        box-shadow: 0 -2px 15px rgba(0,0,0,0.1);
        z-index: 999999;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }
    
    .mobile-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #666;
        text-decoration: none;
        font-size: 11px;
        font-weight: 600;
        flex: 1;
        transition: all 0.2s ease;
    }
    
    .mobile-bottom-nav a svg {
        margin-bottom: 4px;
        fill: currentColor;
        width: 22px;
        height: 22px;
    }
    
    .mobile-bottom-nav a:hover,
    .mobile-bottom-nav a:active {
        color: #29ABE2;
    }
}

/* ==========================================================================
    CORREO DO SELECT DE CATEGORIAS
   ========================================================================== */
select.search-category-dropdown.real-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    padding: 0 25px 0 15px;
    font-size: 14px;
    color: #444;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    height: 100%;
}
.header-search form {
    position: relative;
}
/* ==========================================================================
                         
          
                              
                            
          
                            

   WOOCOMMERCE CUSTOM CSS  4M&C
   Verso: 2.0  Refatorado e Profissional
   ========================================================================== */


/* ==========================================================================
    DESIGN TOKENS  Altere aqui para mudar o visual de toda a loja
   ========================================================================== */
:root {
    /* Paleta principal */
    --green-50:  #f0fdfa;
    --green-100: #ccfbf1;
    --green-400: #38B6E0;
    --green-500: #0891C2;   /* COR PRIMARIA */
    --green-600: #076E93;   /* HOVER */
    --green-700: #054F6B;   /* ACTIVE */
    --green-900: #0B2447;   /* SECUNDARIA (navy, nao teal) */
    --green-950: #081C38;   /* HOVER SECUNDARIA */

    /* Aliases semnticos */
    --color-primary:       var(--green-500);
    --color-primary-hover: var(--green-600);
    --color-primary-deep:  var(--green-700);
    --color-secondary:     var(--green-900);
    --color-secondary-hover: var(--green-950);
    --color-accent:        var(--green-400);
    --color-success-bg:    var(--green-50);
    --color-success-border: var(--green-100);

    /* Neutros */
    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Slate (tabelas e divisores) */
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-700: #334155;
    --slate-800: #1e293b;

    /* Tipografia */
    --font-xs:   12px;
    --font-sm:   13px;
    --font-base: 15px;
    --font-md:   16px;
    --font-lg:   18px;
    --font-xl:   20px;
    --font-2xl:  24px;
    --font-3xl:  26px;

    /* Espaamento */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;

    /* Bordas */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* Sombras */
    --shadow-xs:    0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:    0 2px 8px rgba(0,0,0,0.06);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.07);
    --shadow-lg:    0 8px 30px rgba(0,0,0,0.08);
    --shadow-xl:    0 16px 48px rgba(0,0,0,0.10);
    --shadow-green: 0 4px 20px rgba(26,188,156,0.25);
    --shadow-green-lg: 0 8px 32px rgba(26,188,156,0.35);

    /* Transies */
    --transition-fast:   all 0.15s ease;
    --transition-base:   all 0.25s ease;
    --transition-slow:   all 0.35s ease;
    --transition-bounce: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}


/* ==========================================================================
    1. GALERIA DE IMAGENS DO PRODUTO
   ========================================================================== */

/* Imagem principal: preenche sem distorcer */
.woocommerce-product-gallery__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: var(--radius-md) !important;
    transition: var(--transition-slow) !important;
}

/* Efeito zoom suave ao passar o mouse na galeria */
.woocommerce-product-gallery__image:hover img {
    transform: scale(1.02) !important;
}

/* Thumbnails da galeria */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child) {
    opacity: 0.7;
    transition: var(--transition-fast);
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child):hover {
    opacity: 1;
}


/* ==========================================================================
    2. MENSAGENS E ALERTAS GLOBAIS DO WOOCOMMERCE
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-top-color: var(--color-primary) !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--font-base) !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
}

.woocommerce-message {
    background-color: var(--color-success-bg) !important;
    border-top-color: var(--color-primary) !important;
}

/* Boto dentro de alertas */
.woocommerce-message .button,
.woocommerce-info .button {
    background-color: var(--color-primary) !important;
    color: #fff !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 20px !important;
    font-weight: 700 !important;
    font-size: var(--font-sm) !important;
    border: none !important;
    text-decoration: none !important;
    transition: var(--transition-base) !important;
    white-space: nowrap !important;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
    background-color: var(--color-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-green) !important;
}


/* ==========================================================================
    3. PGINA DE LOGIN E REGISTRO (/minha-conta/)
   ========================================================================== */

/* Layout lado a lado */
#customer_login {
    display: flex;
    gap: 48px;
    margin: 40px auto;
    max-width: 900px;
    width: 100%;
    align-items: stretch;
}

/* Cartes das colunas - Design Premium */
#customer_login .u-column1,
#customer_login .u-column2 {
    flex: 1;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 24px;
    padding: 48px 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Hover: elevao suave e sombra difusa */
#customer_login .u-column1:hover,
#customer_login .u-column2:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.03);
    border-color: rgba(41, 171, 226, 0.1);
}

/* Ttulos dos cards */
#customer_login h2 {
    font-size: 28px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 32px;
    text-align: center;
    letter-spacing: -0.5px;
    font-family: 'Inter', sans-serif;
}

/* Inputs de texto e senha */
#customer_login form.login .input-text,
#customer_login form.register .input-text,
#customer_login form.register input[type="password"] {
    width: 100%;
    padding: 13px var(--space-4);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    background-color: var(--gray-50);
    font-size: var(--font-base);
    color: var(--gray-800);
    transition: var(--transition-fast);
    box-sizing: border-box;
    margin-bottom: var(--space-1);
}
#customer_login form.login .input-text:focus,
#customer_login form.register .input-text:focus,
#customer_login form.register input[type="password"]:focus {
    border-color: var(--color-primary);
    background-color: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(26,188,156,0.12);
}
#customer_login form.login .input-text::placeholder,
#customer_login form.register .input-text::placeholder {
    color: var(--gray-400);
}

/* Labels */
#customer_login form label {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: var(--space-2);
    display: block;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

/* Boto principal */
#customer_login form button[type="submit"] {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: #fff;
    font-weight: 800;
    font-size: var(--font-md);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    margin-top: var(--space-3);
    transition: var(--transition-smooth);
    letter-spacing: 0.3px;
    box-shadow: var(--shadow-green);
    position: relative;
    overflow: hidden;
}
#customer_login form button[type="submit"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: var(--transition-fast);
}
#customer_login form button[type="submit"]:hover {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-deep) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-green-lg);
}
#customer_login form button[type="submit"]:active {
    transform: translateY(0) scale(0.99);
    box-shadow: var(--shadow-green);
}

/* Login Social */
.nsl-container-block { margin-bottom: var(--space-6) !important; }
.nsl-container-block .nsl-button {
    width: 100% !important;
    border-radius: var(--radius-md) !important;
    justify-content: center !important;
    padding: 13px !important;
    box-shadow: var(--shadow-xs) !important;
    border: 1px solid var(--gray-200) !important;
    transition: var(--transition-fast) !important;
}
.nsl-container-block .nsl-button:hover {
    box-shadow: var(--shadow-sm) !important;
    transform: translateY(-1px) !important;
}

/* "Esqueceu a senha?" */
.woocommerce-LostPassword { text-align: center; margin-top: var(--space-5); }
.woocommerce-LostPassword a {
    color: var(--gray-500);
    font-size: var(--font-sm);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-fast);
    border-bottom: 1px dashed transparent;
}
.woocommerce-LostPassword a:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Lembrar-me */
.woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-4) 0;
    font-size: 14px;
    color: var(--gray-600);
}
.woocommerce-form-login__rememberme input[type="checkbox"] {
    accent-color: var(--color-primary);
    width: 16px;
    height: 16px;
}

/* Privacidade/aviso no bloco de cadastro */
#customer_login .u-column2 > p:not(.form-row) {
    font-size: var(--font-sm);
    color: var(--gray-500);
    line-height: 1.7;
    margin-bottom: var(--space-4);
    background: var(--color-success-bg);
    padding: 14px var(--space-4);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
}

/* Links na coluna de cadastro */
#customer_login .u-column2 a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 600;
    transition: var(--transition-fast);
}
#customer_login .u-column2 a:hover { color: var(--color-primary-hover); }

/* Indicador de fora da senha */
.woocommerce-password-strength {
    margin-top: var(--space-2);
    margin-bottom: var(--space-3);
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    border: none;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.woocommerce-password-strength.strong { background: #dcfce7; color: #15803d; }
.woocommerce-password-strength.good   { background: #fef9c3; color: #a16207; }
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad    { background: #fee2e2; color: #b91c1c; }

/* Dica de senha */
.woocommerce-password-hint {
    font-size: 12px;
    color: var(--gray-400);
    margin-top: var(--space-1);
    display: block;
    line-height: 1.6;
}

/* Checkbox de termos */
.woocommerce-form__label.woocommerce-form__label-for-checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--space-3) !important;
    font-size: 13px !important;
    color: var(--gray-500) !important;
    margin-top: var(--space-4) !important;
    cursor: pointer !important;
    line-height: 1.6 !important;
}
.woocommerce-form__label.woocommerce-form__label-for-checkbox input[type="checkbox"] {
    margin-top: 2px !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--color-primary) !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}


/* ==========================================================================
    4. PAINEL "MINHA CONTA"  FORMULRIOS
   ========================================================================== */

/* Inputs */
.woocommerce-MyAccount-content form .input-text {
    width: 100%;
    padding: 13px var(--space-4);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    background-color: var(--gray-50);
    font-size: var(--font-base);
    color: var(--gray-800);
    transition: var(--transition-fast);
    margin-bottom: var(--space-4);
    box-sizing: border-box;
}
.woocommerce-MyAccount-content form .input-text:focus {
    border-color: var(--color-primary);
    background-color: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(26,188,156,0.12);
}

/* Labels */
.woocommerce-MyAccount-content form label {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: var(--space-2);
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

/* Boto Salvar */
.woocommerce-MyAccount-content form button[type="submit"] {
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: #fff;
    font-weight: 800;
    font-size: var(--font-md);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    margin-top: var(--space-4);
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-green);
    letter-spacing: 0.3px;
}
.woocommerce-MyAccount-content form button[type="submit"]:hover {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-deep) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-green-lg);
}
.woocommerce-MyAccount-content form button[type="submit"]:active {
    transform: translateY(0) scale(0.99);
}

/* Fieldset (Mudana de Senha) */
.woocommerce-MyAccount-content form fieldset {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-top: 32px;
    margin-bottom: 20px;
    background-color: var(--gray-50);
    position: relative;
}
.woocommerce-MyAccount-content form fieldset legend {
    font-size: 16px;
    font-weight: 800;
    color: var(--gray-900);
    padding: 0 12px;
    background: #fff;
    border-radius: var(--radius-sm);
}

/* Layout duas colunas */
.woocommerce-MyAccount-content form .form-row-first { width: 48%; float: left; }
.woocommerce-MyAccount-content form .form-row-last  { width: 48%; float: right; }
.woocommerce-MyAccount-content form .form-row-wide  { clear: both; }
.woocommerce-MyAccount-content form::after          { content: ""; display: table; clear: both; }


/* ==========================================================================
    5. PAINEL "MINHA CONTA"  LAYOUT, NAVEGAO E ALERTAS
   ========================================================================== */

/* Alertas e mensagens dentro da Minha Conta */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error {
    background-color: var(--color-success-bg) !important;
    color: #0B2447 !important;
    border: 1px solid var(--color-success-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 18px var(--space-6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 16px rgba(20,184,166,0.08) !important;
    font-weight: 500 !important;
    gap: var(--space-4) !important;
}
.woocommerce-account .woocommerce-info::before { color: var(--color-primary) !important; font-size: 20px !important; }

/* Botes dentro dos alertas da Minha Conta */
.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-message .button {
    background-color: var(--color-primary) !important;
    color: #fff !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: var(--font-xs) !important;
    letter-spacing: 0.8px !important;
    transition: var(--transition-base) !important;
    border: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.woocommerce-account .woocommerce-info .button:hover,
.woocommerce-account .woocommerce-message .button:hover {
    background-color: var(--color-primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-green) !important;
}

/* Flex: menu (esquerda) + contedo (direita) */
.woocommerce-account .woocommerce {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 24px !important;
    margin-top: 32px !important;
}

/* Menu Lateral  fixado sempre  esquerda */
.woocommerce-account .woocommerce-MyAccount-navigation {
    order: 1 !important;           /* garante posio esquerda */
    flex: 0 0 230px !important;    /* largura fixa, no encolhe */
    width: 230px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-lg) !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm) !important;
    position: relative !important; /* sem sticky para no deslocar */
    top: auto !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--slate-100) !important; margin: 0 !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none !important; }

/* Links do menu lateral */
.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: flex !important;
    align-items: center !important;
    padding: 15px 22px !important;
    color: var(--slate-500) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: var(--transition-base) !important;
    gap: var(--space-3) !important;
    border-left: 3px solid transparent !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background-color: var(--color-success-bg) !important;
    color: var(--color-secondary) !important;
    padding-left: 26px !important;
    border-left-color: var(--color-primary) !important;
}

/* Item de menu ativo */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background-color: var(--color-secondary) !important;
    color: #fff !important;
    border-left-color: var(--color-primary) !important;
    font-weight: 700 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:hover {
    padding-left: 22px !important;
    background-color: var(--color-secondary-hover) !important;
}

/* rea de contedo  ocupa o restante da linha */
.woocommerce-account .woocommerce-MyAccount-content {
    order: 2 !important;           /* garante posio direita */
    flex: 1 1 0 !important;        /* ocupa todo o espao restante */
    min-width: 0 !important;       /* evita overflow em flex */
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-lg) !important;
    padding: 40px !important;
    margin: 0 !important;
    float: none !important;
    box-shadow: var(--shadow-sm) !important;
}
.woocommerce-account .woocommerce-MyAccount-content h3 {
    margin-top: 0 !important;
    color: var(--color-secondary) !important;
    font-size: var(--font-xl) !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
}
.woocommerce-account .woocommerce-MyAccount-content p {
    color: var(--slate-500) !important;
    line-height: 1.7 !important;
}


/* ==========================================================================
    6. STATUS DO PEDIDO (BADGES)
   ========================================================================== */

mark.order-status {
    background-color: transparent !important;
    padding: 5px 12px !important;
    border-radius: var(--radius-full) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: inline-block !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
}
mark.status-processing { background-color: #dcfce7 !important; color: #15803d !important; }
mark.status-completed  { background-color: #dbeafe !important; color: #1d4ed8 !important; }
mark.status-on-hold,
mark.status-pending    { background-color: #fef9c3 !important; color: #a16207 !important; }
mark.status-cancelled,
mark.status-failed     { background-color: #fee2e2 !important; color: #b91c1c !important; }
mark.status-refunded   { background-color: #f3e8ff !important; color: #7e22ce !important; }


/* ==========================================================================
    7. TABELA DE PEDIDOS (MINHA CONTA)
   ========================================================================== */

.woocommerce-account table.shop_table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm) !important;
    width: 100% !important;
}
.woocommerce-account table.shop_table thead th {
    background-color: var(--slate-50) !important;
    color: var(--slate-500) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    padding: 16px 20px !important;
    border: none !important;
    border-bottom: 1px solid var(--slate-200) !important;
}
.woocommerce-account table.shop_table tbody td {
    background-color: #fff !important;
    padding: 18px 20px !important;
    border: none !important;
    border-bottom: 1px solid var(--slate-100) !important;
    color: var(--slate-700) !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    transition: background-color 0.15s ease !important;
}
.woocommerce-account table.shop_table tbody tr:last-child td { border-bottom: none !important; }
.woocommerce-account table.shop_table tbody tr:hover td      { background-color: var(--slate-50) !important; }

/* Boto "Ver Pedido" */
.woocommerce-account table.shop_table .button.view {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    transition: var(--transition-smooth) !important;
    text-decoration: none !important;
    display: inline-block !important;
    border: none !important;
    box-shadow: var(--shadow-green) !important;
}
.woocommerce-account table.shop_table .button.view:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-green-lg) !important;
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-deep) 100%) !important;
}
.woocommerce-account table.shop_table td.woocommerce-orders-table__cell-order-status { font-weight: 600 !important; }


/* ==========================================================================
    8. DETALHES DO PEDIDO (PGINA INTERNA)
   ========================================================================== */

.woocommerce-order-details { margin-top: 32px !important; }

.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
    font-size: var(--font-xl) !important;
    font-weight: 800 !important;
    color: var(--slate-800) !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid var(--slate-100) !important;
    padding-bottom: 12px !important;
    letter-spacing: -0.3px !important;
}

/* Resumo rpido do pedido */
ul.order_details {
    background: var(--slate-50) !important;
    border-radius: var(--radius-lg) !important;
    padding: 20px 28px !important;
    border: 1px solid var(--slate-200) !important;
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    margin-bottom: 32px !important;
}
ul.order_details li {
    font-size: 13px !important;
    color: var(--slate-500) !important;
    border-right: 1px solid var(--slate-200) !important;
    padding-right: 24px !important;
    margin: 0 !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}
ul.order_details li strong {
    display: block !important;
    color: var(--slate-800) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
ul.order_details li:last-child { border-right: none !important; }

/* Timeline de atualizaes do pedido */
ol.commentlist.notes {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 32px 12px !important;
    border-left: 3px solid var(--color-primary) !important;
}
ol.commentlist.notes li {
    position: relative !important;
    padding: 16px 20px !important;
    background: #fff !important;
    border: 1px solid var(--slate-200) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 16px !important;
    margin-left: 24px !important;
    box-shadow: var(--shadow-xs) !important;
    transition: var(--transition-fast) !important;
}
ol.commentlist.notes li:hover { box-shadow: var(--shadow-sm) !important; }
ol.commentlist.notes li::before {
    content: '' !important;
    position: absolute !important;
    left: -31px !important;
    top: 20px !important;
    width: 14px !important;
    height: 14px !important;
    background: var(--color-primary) !important;
    border-radius: 50% !important;
    border: 3px solid #fff !important;
    box-shadow: 0 0 0 2px var(--color-primary) !important;
}
ol.commentlist.notes li .comment_container p.meta {
    font-size: 12px !important;
    color: var(--slate-400) !important;
    margin-bottom: var(--space-1) !important;
    font-weight: 500 !important;
}
ol.commentlist.notes li .description {
    font-size: 14px !important;
    color: var(--slate-700) !important;
    line-height: 1.6 !important;
}


/* ==========================================================================
    9. PGINA DO PRODUTO  REORDENAO E FORMULRIO
   ========================================================================== */

/* Flexbox para reordenar os elementos */
.single-product div.product .summary.entry-summary {
    display: flex !important;
    flex-direction: column !important;
}
.single-product div.product .summary.entry-summary > * { order: 4 !important; }

/* 1 Ttulo */
.single-product div.product .product_title {
    order: 1 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin-bottom: 16px !important;
    color: var(--gray-900) !important;
    letter-spacing: -0.5px !important;
}

/* 2 Preo */
.single-product div.product .price {
    order: 2 !important;
    margin-bottom: 24px !important;
    font-size: 26px !important;
    color: var(--color-secondary) !important;
    font-weight: 800 !important;
}

/* 3 Formulrio de compra */
.single-product div.product form.cart {
    order: 3 !important;
    width: 100% !important;
}

/* 5 Descrio curta */
.single-product div.product .woocommerce-product-details__short-description {
    order: 5 !important;
    margin-top: 24px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--slate-100) !important;
    font-size: 15px !important;
    color: var(--slate-500) !important;
    line-height: 1.8 !important;
}

/* Formulrio carrinho */
.woocommerce div.product form.cart {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    margin-bottom: 28px !important;
}

/* Metadados do produto (SKU etc.)  ocultos */
.woocommerce div.product .product_meta {
    display: none !important;
}

/* Continer da variao */
.woocommerce div.product .single_variation_wrap {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Tabela de variaes */
.woocommerce div.product form.cart .variations { margin-bottom: 24px !important; }
.woocommerce div.product form.cart .variations th {
    text-align: left !important;
    padding-bottom: 10px !important;
    color: var(--gray-700) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    vertical-align: middle !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}
.woocommerce div.product form.cart .variations td { padding-bottom: 12px !important; }


/* ==========================================================================
    10. SWATCHES DE VARIAES (PLUGINS DE ATRIBUTOS)
   ========================================================================== */

/* Container */
.variable-items-wrapper,
ul.variable-items-wrapper,
.tawcvs-swatches,
.rtwpvs-terms-wrapper {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
}

/* Boto base */
.variable-item,
.tawcvs-swatches .swatch,
.rtwpvs-term,
.vi-wpvs-variation-style {
    background-color: #fff !important;
    border: 1.5px solid var(--gray-300) !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 16px !important;
    color: var(--gray-600) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: var(--transition-fast) !important;
    box-shadow: var(--shadow-xs) !important;
    min-width: 56px !important;
    min-height: 38px !important;
    height: auto !important;
    width: auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* Hover */
.variable-item:hover,
.tawcvs-swatches .swatch:hover,
.rtwpvs-term:hover,
.vi-wpvs-variation-style:hover {
    border-color: var(--color-secondary) !important;
    color: var(--color-secondary) !important;
    box-shadow: var(--shadow-sm) !important;
    transform: translateY(-1px) !important;
}

/* Selecionado */
.variable-item.selected,
.variable-item.active,
.tawcvs-swatches .swatch.selected,
.rtwpvs-term.selected,
.vi-wpvs-variation-style.selected {
    border: 2px solid var(--color-secondary) !important;
    color: var(--color-secondary) !important;
    font-weight: 700 !important;
    background-color: var(--color-success-bg) !important;
    padding: 7px 15px !important;
    box-shadow: 0 0 0 3px rgba(11,36,71,0.1) !important;
}

/* Desabilitado */
.variable-item.disabled,
.tawcvs-swatches .swatch.disabled,
.rtwpvs-term.disabled,
.vi-wpvs-variation-style.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-400) !important;
    text-decoration: line-through !important;
    background-color: var(--gray-50) !important;
    transform: none !important;
    box-shadow: none !important;
}


/* ==========================================================================
    11. SELOS DE CONFIANA (APS O BOTO COMPRAR)
   ========================================================================== */

.single-product div.product form.cart::after { content: none !important; }


/* ==========================================================================
    12. BOTES PRINCIPAIS DE COMPRA
   ========================================================================== */

/* "Adicionar ao Carrinho" e "Ir para Checkout" */
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce-page .cart-collaterals .checkout-button {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 16px 32px !important;
    font-size: var(--font-lg) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    width: 100% !important;
    box-shadow: var(--shadow-green-lg) !important;
    transition: var(--transition-smooth) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Efeito de brilho no hover */
.woocommerce div.product form.cart .button.single_add_to_cart_button::before,
.woocommerce ul.products li.product .button.add_to_cart_button::before,
.woocommerce-page .cart-collaterals .checkout-button::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -60% !important;
    width: 40% !important;
    height: 200% !important;
    background: rgba(255,255,255,0.15) !important;
    transform: skewX(-20deg) !important;
    transition: left 0.6s ease !important;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button:hover,
.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.woocommerce-page .cart-collaterals .checkout-button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 40px rgba(26,188,156,0.45) !important;
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-deep) 100%) !important;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover::before,
.woocommerce ul.products li.product .button.add_to_cart_button:hover::before,
.woocommerce-page .cart-collaterals .checkout-button:hover::before {
    left: 130% !important;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button:active,
.woocommerce ul.products li.product .button.add_to_cart_button:active,
.woocommerce-page .cart-collaterals .checkout-button:active {
    transform: translateY(0) scale(0.99) !important;
    box-shadow: var(--shadow-green) !important;
}


/* ==========================================================================
    13. PARCELAMENTO (CLASSE CUSTOMIZADA)
   ========================================================================== */

.sua-classe-de-parcelamento {
    position: relative !important;
    padding-left: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 14px !important;
    color: var(--gray-600) !important;
    font-weight: 500 !important;
}
.sua-classe-de-parcelamento::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}


/* ==========================================================================
    14. CALCULADORA DE FRETE (NA PGINA DO PRODUTO)
   ========================================================================== */

/* Botes de calcular frete */
.single-product .product form:not(.cart) button[type="submit"],
.shipping-calculator-button,
.wc-shipping-simulator button,
#wc-shipping-simulator-button,
.virtuaria-shipping-button,
.calculadora-frete-button,
button#calc_shipping {
    background-color: var(--color-secondary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-xs) !important;
    padding: 10px 22px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: var(--transition-fast) !important;
    letter-spacing: 0.3px !important;
}
.single-product .product form:not(.cart) button[type="submit"]:hover,
.shipping-calculator-button:hover,
.wc-shipping-simulator button:hover,
#wc-shipping-simulator-button:hover,
.virtuaria-shipping-button:hover,
.calculadora-frete-button:hover,
button#calc_shipping:hover {
    background-color: var(--color-secondary-hover) !important;
    transform: translateY(-1px) !important;
}

/* Inputs de CEP */
.single-product .product form:not(.cart) input[type="text"],
.wc-shipping-simulator input[type="text"],
#wc-shipping-simulator-cep,
.virtuaria-shipping-input,
input#calc_shipping_postcode {
    border: 1.5px solid var(--gray-300) !important;
    border-radius: var(--radius-xs) !important;
    padding: 9px 14px !important;
    color: var(--gray-700) !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 14px !important;
    transition: var(--transition-fast) !important;
}
.single-product .product form:not(.cart) input[type="text"]:focus,
.wc-shipping-simulator input[type="text"]:focus,
#wc-shipping-simulator-cep:focus,
.virtuaria-shipping-input:focus,
input#calc_shipping_postcode:focus {
    border-color: var(--color-secondary) !important;
    box-shadow: 0 0 0 3px rgba(11,36,71,0.1) !important;
}

/* Links e valores de frete */
.single-product .product form:not(.cart) a,
.wc-shipping-simulator a { color: var(--gray-500) !important; text-decoration: underline !important; font-size: var(--font-sm) !important; }
.single-product .product form:not(.cart) a:hover,
.wc-shipping-simulator a:hover { color: var(--color-secondary) !important; }
.wc-shipping-simulator td strong,
.shipping-calculator-price,
.virtuaria-shipping-price { color: var(--color-secondary) !important; font-weight: 700 !important; }


/* ==========================================================================
    15. LOGIN NO CHECKOUT (ACORDEO)
   ========================================================================== */

/* Banner "J  cliente? Clique aqui para entrar" */
.woocommerce-info.woocommerce-checkout-login-toggle,
.woocommerce-checkout .woocommerce-info {
    background: linear-gradient(135deg, var(--color-success-bg) 0%, #e8f8f5 100%) !important;
    border: 1px solid var(--color-success-border) !important;
    border-left: 4px solid var(--color-primary) !important;
    border-top: none !important;
    border-radius: var(--radius-md) !important;
    padding: 16px 22px !important;
    color: #0d6e65 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-bottom: 24px !important;
    box-shadow: var(--shadow-xs) !important;
}
/* Remove o ícone de fonte (depende de uma fonte de ícones que às vezes não
   carrega, mostrando uma caixinha sobreposta ao texto) e usa um selo simples
   feito só com CSS, sem depender de nenhuma fonte externa. */
.woocommerce-info.woocommerce-checkout-login-toggle::before,
.woocommerce-checkout .woocommerce-info::before {
    content: '' !important;
    font-family: inherit !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border-radius: 50% !important;
    background: var(--color-primary) !important;
    display: inline-block !important;
}
.woocommerce-checkout .woocommerce-info a,
.woocommerce-info.woocommerce-checkout-login-toggle a {
    color: var(--color-secondary) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    transition: var(--transition-fast) !important;
}
.woocommerce-checkout .woocommerce-info a:hover { color: var(--color-primary) !important; }

/* Formulrio de login no checkout */
.woocommerce-form-login {
    background: #fff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-lg) !important;
    padding: 32px !important;
    margin-bottom: 32px !important;
    box-shadow: var(--shadow-md) !important;
}
.woocommerce-form-login .input-text {
    width: 100% !important;
    padding: 13px var(--space-4) !important;
    border: 2px solid var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    background-color: var(--gray-50) !important;
    font-size: var(--font-base) !important;
    transition: var(--transition-fast) !important;
    box-sizing: border-box !important;
}
.woocommerce-form-login .input-text:focus {
    border-color: var(--color-primary) !important;
    background-color: #fff !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(26,188,156,0.12) !important;
}
.woocommerce-form-login label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--gray-700) !important;
    margin-bottom: var(--space-2) !important;
    display: block !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
}
.woocommerce-form-login button[type="submit"],
.woocommerce-form-login .button {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 13px 28px !important;
    font-size: var(--font-base) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: var(--transition-smooth) !important;
    box-shadow: var(--shadow-green) !important;
}
.woocommerce-form-login button[type="submit"]:hover,
.woocommerce-form-login .button:hover {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-deep) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-green-lg) !important;
}
.woocommerce-form-login button[type="submit"]:active,
.woocommerce-form-login .button:active { transform: scale(0.99) !important; }

.woocommerce-form-login .woocommerce-form__label-for-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    font-size: 14px !important;
    color: var(--gray-600) !important;
    margin-top: var(--space-3) !important;
    cursor: pointer !important;
}
.woocommerce-form-login .lost_password { margin-top: var(--space-3) !important; }
.woocommerce-form-login .lost_password a {
    color: var(--gray-500) !important;
    font-size: var(--font-sm) !important;
    text-decoration: underline !important;
    transition: var(--transition-fast) !important;
}
.woocommerce-form-login .lost_password a:hover { color: var(--color-primary) !important; }


/* ==========================================================================
    16. PGINA DE CHECKOUT  CAMPOS E RESUMO
   ========================================================================== */

/* Ttulos de seo */
.woocommerce-checkout h3,
.woocommerce-checkout h3#order_review_heading {
    font-size: var(--font-xl) !important;
    font-weight: 800 !important;
    color: var(--slate-800) !important;
    margin-bottom: 20px !important;
    padding-bottom: 14px !important;
    border-bottom: 2px solid var(--slate-100) !important;
    letter-spacing: -0.3px !important;
}

/* Campos de formulrio do checkout */
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    width: 100% !important;
    padding: 13px var(--space-4) !important;
    border: 2px solid var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    background-color: var(--gray-50) !important;
    font-size: var(--font-base) !important;
    color: var(--gray-700) !important;
    transition: var(--transition-fast) !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: var(--color-primary) !important;
    background-color: #fff !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(26,188,156,0.12) !important;
}

/* Labels do checkout */
.woocommerce-checkout label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--gray-700) !important;
    margin-bottom: var(--space-2) !important;
    display: block !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
}
.woocommerce-checkout label .required { color: #ef4444 !important; font-weight: 700 !important; }

/* Painel de resumo do pedido */
#order_review {
    background: #fff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-lg) !important;
    padding: 32px !important;
    box-shadow: var(--shadow-sm) !important;
    position: sticky !important;
    top: 20px !important;
}

/* Tabela do resumo — visual de "recibo" (V13) */
table.shop_table.woocommerce-checkout-review-order-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 20px !important;
    border: none !important;
}
table.shop_table.woocommerce-checkout-review-order-table thead th {
    background: none !important;
    color: var(--slate-500) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--slate-200) !important;
}
table.shop_table.woocommerce-checkout-review-order-table tbody td {
    padding: 14px 0 !important;
    border-bottom: 1px dashed var(--slate-200) !important;
    color: var(--slate-700) !important;
    font-size: 14px !important;
    vertical-align: middle !important;
}
table.shop_table.woocommerce-checkout-review-order-table tfoot tr,
table.shop_table.woocommerce-checkout-review-order-table tfoot tr td,
table.shop_table.woocommerce-checkout-review-order-table tfoot tr th {
    background: none !important;
    background-color: transparent !important;
}
table.shop_table.woocommerce-checkout-review-order-table tfoot tr td,
table.shop_table.woocommerce-checkout-review-order-table tfoot tr th {
    padding: 14px 0 !important;
    border-top: none !important;
    border-bottom: 1px dashed var(--slate-200) !important;
    color: var(--slate-700) !important;
    font-size: 14px !important;
}
/* Miniatura do produto no resumo (V13) */
.po-checkout-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.po-checkout-item-thumb img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--slate-200);
    flex-shrink: 0;
}
.po-checkout-item-name { font-weight: 600; line-height: 1.4; }

/* Linha do frete: alinha o rótulo com as opções, sem vão vertical grande */
table.shop_table.woocommerce-checkout-review-order-table tr.shipping th,
table.shop_table.woocommerce-checkout-review-order-table tr.shipping td {
    vertical-align: top !important;
    padding-top: 16px !important;
}

/* Linha do total — destaque real, sem parecer mais uma linha da tabela */
table.shop_table.woocommerce-checkout-review-order-table tfoot .order-total {
    background: var(--slate-50, #f8f9fa) !important;
}
table.shop_table.woocommerce-checkout-review-order-table tfoot .order-total td,
table.shop_table.woocommerce-checkout-review-order-table tfoot .order-total th {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--color-secondary) !important;
    border-top: 2px solid var(--brand) !important;
    border-bottom: none !important;
    padding: 18px 12px !important;
    margin: 4px -12px 0 !important;
}

/* Mtodos de Pagamento */
#payment {
    background: var(--slate-50) !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-lg) !important;
    padding: 28px !important;
    margin-top: 24px !important;
}
#payment ul.payment_methods {
    list-style: none !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
}
#payment ul.payment_methods li {
    background: #fff !important;
    border: 2px solid var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    padding: 16px 20px !important;
    margin-bottom: 10px !important;
    transition: var(--transition-fast) !important;
    cursor: pointer !important;
}
#payment ul.payment_methods li:has(input:checked) {
    border-color: var(--color-primary) !important;
    background-color: var(--color-success-bg) !important;
    box-shadow: 0 0 0 3px rgba(26,188,156,0.1) !important;
}
#payment ul.payment_methods li label {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--slate-800) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
#payment ul.payment_methods li input[type="radio"] {
    accent-color: var(--color-primary) !important;
    width: 18px !important;
    height: 18px !important;
}

/* Descrio do mtodo */
.payment_box {
    background: var(--color-success-bg) !important;
    border-radius: var(--radius-md) !important;
    padding: 14px 18px !important;
    margin-top: 14px !important;
    font-size: 13px !important;
    color: #0B2447 !important;
    border-left: 3px solid var(--color-primary) !important;
    line-height: 1.6 !important;
}

/* BOTO FAZER PEDIDO  o mais importante da loja */
#place_order {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 20px 32px !important;
    font-size: var(--font-lg) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    width: 100% !important;
    box-shadow: 0 6px 24px rgba(26,188,156,0.4) !important;
    transition: var(--transition-smooth) !important;
    margin-top: var(--space-4) !important;
    position: relative !important;
    overflow: hidden !important;
}
#place_order::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -60% !important;
    width: 40% !important;
    height: 200% !important;
    background: rgba(255,255,255,0.15) !important;
    transform: skewX(-20deg) !important;
    transition: left 0.6s ease !important;
}
#place_order:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 40px rgba(26,188,156,0.5) !important;
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-deep) 100%) !important;
}
#place_order:hover::before { left: 130% !important; }
#place_order:active {
    transform: translateY(0) scale(0.99) !important;
    box-shadow: var(--shadow-green) !important;
}

/* Termos e condies */
.woocommerce-terms-and-conditions-wrapper {
    font-size: var(--font-sm) !important;
    color: var(--gray-500) !important;
    margin-bottom: var(--space-4) !important;
    line-height: 1.6 !important;
}
.woocommerce-terms-and-conditions-wrapper a { color: var(--color-primary) !important; font-weight: 600 !important; }
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--space-3) !important;
    cursor: pointer !important;
}
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
    accent-color: var(--color-primary) !important;
    width: 17px !important;
    height: 17px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    cursor: pointer !important;
}


/* ==========================================================================
    17. PGINA DO CARRINHO
   ========================================================================== */

/* Tabela */
.woocommerce-cart table.cart {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm) !important;
    width: 100% !important;
    background: #fff !important;
}
.woocommerce-cart table.cart thead th {
    background-color: var(--slate-50) !important;
    color: var(--slate-500) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--slate-200) !important;
}
.woocommerce-cart table.cart tbody td {
    padding: 20px !important;
    border-bottom: 1px solid var(--slate-100) !important;
    vertical-align: middle !important;
    color: var(--slate-700) !important;
    transition: background-color 0.15s ease !important;
}
.woocommerce-cart table.cart tbody tr:hover td { background-color: var(--slate-50) !important; }
.woocommerce-cart table.cart tbody tr:last-child td { border-bottom: none !important; }

/* Nome do produto */
.woocommerce-cart table.cart td.product-name a {
    color: var(--slate-800) !important;
    font-weight: 600 !important;
    font-size: var(--font-base) !important;
    text-decoration: none !important;
    transition: var(--transition-fast) !important;
}
.woocommerce-cart table.cart td.product-name a:hover { color: var(--color-primary) !important; }

/* Imagem do produto no carrinho */
.woocommerce-cart table.cart td.product-thumbnail img {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--gray-200) !important;
    transition: var(--transition-fast) !important;
}
.woocommerce-cart table.cart td.product-thumbnail img:hover {
    box-shadow: var(--shadow-md) !important;
}

/* Campo de quantidade */
.woocommerce-cart table.cart .qty {
    width: 72px !important;
    padding: 9px 10px !important;
    border: 2px solid var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    text-align: center !important;
    font-size: var(--font-base) !important;
    font-weight: 700 !important;
    transition: var(--transition-fast) !important;
}
.woocommerce-cart table.cart .qty:focus {
    border-color: var(--color-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(26,188,156,0.12) !important;
}

/* Boto remover item */
.woocommerce-cart table.cart td .remove {
    color: var(--gray-400) !important;
    font-size: 20px !important;
    transition: var(--transition-fast) !important;
    text-decoration: none !important;
    line-height: 1 !important;
}
.woocommerce-cart table.cart td .remove:hover {
    color: #ef4444 !important;
    transform: scale(1.2) !important;
}

/* Boto Atualizar Carrinho */
.woocommerce-cart table.cart td.actions .button[name="update_cart"] {
    background-color: var(--slate-50) !important;
    color: var(--slate-500) !important;
    border: 2px solid var(--slate-200) !important;
    border-radius: var(--radius-md) !important;
    padding: 11px 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: var(--transition-fast) !important;
    letter-spacing: 0.3px !important;
}
.woocommerce-cart table.cart td.actions .button[name="update_cart"]:hover {
    background-color: var(--slate-200) !important;
    color: var(--slate-800) !important;
}

/* Cupom de desconto */
.woocommerce-cart table.cart td.actions .coupon {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    flex-wrap: wrap !important;
}
.woocommerce-cart table.cart td.actions .coupon input[type="text"] {
    padding: 11px 16px !important;
    border: 2px solid var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px !important;
    background: var(--gray-50) !important;
    transition: var(--transition-fast) !important;
}
.woocommerce-cart table.cart td.actions .coupon input[type="text"]:focus {
    border-color: var(--color-primary) !important;
    outline: none !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(26,188,156,0.12) !important;
}
.woocommerce-cart table.cart td.actions .coupon .button {
    background-color: var(--color-secondary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 11px 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: var(--transition-fast) !important;
    letter-spacing: 0.3px !important;
}
.woocommerce-cart table.cart td.actions .coupon .button:hover {
    background-color: var(--color-secondary-hover) !important;
    transform: translateY(-1px) !important;
}

/* Bloco de totais do carrinho */
.cart-collaterals .cart_totals {
    background: #fff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-lg) !important;
    padding: 32px !important;
    box-shadow: var(--shadow-sm) !important;
}
.cart-collaterals .cart_totals h2 {
    font-size: var(--font-xl) !important;
    font-weight: 800 !important;
    color: var(--slate-800) !important;
    margin-bottom: 20px !important;
    padding-bottom: 14px !important;
    border-bottom: 2px solid var(--slate-100) !important;
    letter-spacing: -0.3px !important;
}
.cart-collaterals .cart_totals table { width: 100% !important; border-collapse: collapse !important; }
.cart-collaterals .cart_totals table th {
    font-size: 13px !important;
    color: var(--slate-500) !important;
    font-weight: 700 !important;
    padding: 13px 0 !important;
    text-align: left !important;
    border-bottom: 1px solid var(--slate-100) !important;
    width: 40% !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}
.cart-collaterals .cart_totals table td {
    font-size: var(--font-base) !important;
    color: var(--slate-700) !important;
    padding: 13px 0 !important;
    border-bottom: 1px solid var(--slate-100) !important;
    text-align: right !important;
    font-weight: 500 !important;
}
.cart-collaterals .cart_totals table .order-total th,
.cart-collaterals .cart_totals table .order-total td {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--color-secondary) !important;
    border-bottom: none !important;
    padding-top: 20px !important;
    border-top: 2px solid var(--slate-200) !important;
}


/* ==========================================================================
    18. RESPONSIVIDADE  MOBILE (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {

    /* Login/Cadastro */
    #customer_login {
        flex-direction: column !important;
        gap: 24px !important;
    }
    #customer_login .u-column1,
    #customer_login .u-column2 {
        padding: 28px 24px !important;
    }

    /* Minha Conta: empilha menu acima do contedo */
    .woocommerce-account .woocommerce {
        flex-direction: column !important;
        gap: 16px !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        flex: none !important;
        width: 100% !important;
        position: static !important;
        top: auto !important;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        flex: none !important;
        width: 100% !important;
        padding: 24px !important;
        min-width: 0 !important;
    }

    /* Checkout */
    .woocommerce-checkout #customer_details,
    .woocommerce-checkout #order_review {
        width: 100% !important;
        float: none !important;
        position: static !important;
    }

    /* Resumo do pedido no checkout */
    #order_review { padding: 20px !important; }

    /* Carrinho: esconde thumbnail */
    .woocommerce-cart table.cart .product-thumbnail { display: none !important; }
    .woocommerce-cart table.cart thead th,
    .woocommerce-cart table.cart tbody td { padding: 12px !important; font-size: 13px !important; }

    /* Totais do carrinho */
    .cart-collaterals .cart_totals { width: 100% !important; float: none !important; }

    /* Boto Fazer Pedido */
    #place_order { font-size: 16px !important; padding: 17px !important; }

    /* Login no checkout */
    .woocommerce-form-login { padding: 22px !important; }

    /* Tabela de resumo do checkout */
    table.shop_table.woocommerce-checkout-review-order-table thead th,
    table.shop_table.woocommerce-checkout-review-order-table tbody td,
    table.shop_table.woocommerce-checkout-review-order-table tfoot tr td,
    table.shop_table.woocommerce-checkout-review-order-table tfoot tr th {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }

    /* Total final mobile */
    table.shop_table.woocommerce-checkout-review-order-table tfoot .order-total td,
    table.shop_table.woocommerce-checkout-review-order-table tfoot .order-total th {
        font-size: 17px !important;
    }

    /* Swatches em mobile */
    .variable-items-wrapper,
    ul.variable-items-wrapper,
    .tawcvs-swatches,
    .rtwpvs-terms-wrapper { gap: 8px !important; }

    /* Selos de confiana */
    .single-product div.product form.cart::after {
        font-size: 13px !important;
        padding: 14px 16px !important;
    }

    /* Totais do carrinho mobile */
    .cart-collaterals .cart_totals table .order-total th,
    .cart-collaterals .cart_totals table .order-total td { font-size: 18px !important; }

    /* ==========================================
       CORREES GERAIS DE LAYOUT (TELA TORTA)
       ========================================== */
    
    /* 1. Trava a rolagem horizontal que deixa o site bambo */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* 2. Impede imagens e banners de passarem da tela */
    img, banner, .wp-block-image img, .product-image {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 3. Diminui o boto do WhatsApp que est gigante e cobrindo os preos */
    /* (Cobrimos as classes mais comuns de plugins de WhatsApp) */
    .joinchat, .joinchat__button, 
    .wa-button, .whatsapp-button, 
    #whatsapp-button, [class*="whatsapp"] {
        transform: scale(0.7) !important;
        transform-origin: bottom right !important;
        bottom: 10px !important;
        right: 10px !important;
        z-index: 99 !important;
    }
}

/* Tablet: menu um pouco menor */
@media (max-width: 960px) and (min-width: 769px) {
    #customer_login { gap: 24px !important; }
    #customer_login .u-column1,
    #customer_login .u-column2 { padding: 32px !important; }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        flex: 0 0 190px !important;
        width: 190px !important;
    }
}


/* ==========================================================================
    19. BOTES DE NAVEGAO DO MENU PRINCIPAL
   (RASTREAR  OFERTAS  INSTITUCIONAL  ATENDIMENTO)

    COMO USAR:
   Inspecione cada item do menu (boto direito  Inspecionar) e veja a classe
   do <li>  geralmente  "menu-item-{ID}". Substitua os IDs abaixo pelos
   corretos do seu site. Os estilos j funcionam se os itens tiverem o texto
   exato nos links.
   ========================================================================== */

/*  Base: reset visual para todos os itens do menu secundrio  */
/* Ajuste o seletor conforme seu tema (ex: .main-navigation, .nav-secondary) */
nav .menu-item a,
.site-navigation .menu-item a,
ul.menu > .menu-item > a {
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
}


/*   RASTREAR  OCULTO (classe real: .nav-icon-link)  */
.nav-icon-link,
a.nav-icon-link,
.nav-right .nav-icon-link {
    display: none !important;
}


/*   OFERTAS  OCULTO (classe real: .nav-ofertas)  */
.nav-ofertas,
a.nav-ofertas,
.nav-right .nav-ofertas {
    display: none !important;
}



/*   INSTITUCIONAL 
   Estilo: link neutro com underline animado
    */
.menu-item-institucional > a,
li.menu-item > a[href*="institucional"],
li.menu-item > a[href*="sobre"],
li.menu-item > a[href*="empresa"] {
    color: #374151 !important;
    background: transparent !important;
    border: none !important;
    padding: 6px 12px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    position: relative !important;
    transition: color 0.2s ease !important;
}
.menu-item-institucional > a::after,
li.menu-item > a[href*="institucional"]::after,
li.menu-item > a[href*="sobre"]::after,
li.menu-item > a[href*="empresa"]::after {
    content: '' !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 12px !important;
    right: 12px !important;
    height: 2px !important;
    background: #29ABE2 !important;
    border-radius: 2px !important;
    transform: scaleX(0) !important;
    transition: transform 0.2s ease !important;
    transform-origin: left !important;
}
.menu-item-institucional > a:hover,
li.menu-item > a[href*="institucional"]:hover,
li.menu-item > a[href*="sobre"]:hover,
li.menu-item > a[href*="empresa"]:hover {
    color: #0B2447 !important;
}
.menu-item-institucional > a:hover::after,
li.menu-item > a[href*="institucional"]:hover::after,
li.menu-item > a[href*="sobre"]:hover::after,
li.menu-item > a[href*="empresa"]:hover::after {
    transform: scaleX(1) !important;
}


/*   ATENDIMENTO 
   Estilo: boto de destaque (CTA)  cor slida chamativa
    */
.menu-item-atendimento > a,
li.menu-item > a[href*="atendimento"],
li.menu-item > a[href*="contato"],
li.menu-item > a[href*="suporte"],
li.menu-item > a[href*="contact"] {
    background-color: #0891C2 !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 6px 16px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(8,145,194,0.25) !important;
}
.menu-item-atendimento > a:hover,
li.menu-item > a[href*="atendimento"]:hover,
li.menu-item > a[href*="contato"]:hover,
li.menu-item > a[href*="suporte"]:hover,
li.menu-item > a[href*="contact"]:hover {
    background-color: #076E93 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(8,145,194,0.35) !important;
}


/*   Mobile: nav buttons empilhados  */
@media (max-width: 768px) {
    .menu-item-rastrear > a,
    .menu-item-ofertas > a,
    .menu-item-institucional > a,
    .menu-item-atendimento > a,
    li.menu-item > a[href*="rastrear"],
    li.menu-item > a[href*="oferta"],
    li.menu-item > a[href*="institucional"],
    li.menu-item > a[href*="atendimento"],
    li.menu-item > a[href*="contato"] {
        width: 100% !important;
        justify-content: center !important;
        border-radius: 8px !important;
        margin-bottom: 4px !important;
    }
}



/* ==========================================================================
    MOBILE APP-LIKE REDESIGN (Adicionado)
   ========================================================================== */
@media (max-width: 768px) {
    .elementor-section-boxed > .elementor-container, 
    .wp-block-group, .container, .page-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden;
    }
    
    img, .wp-block-image img, .elementor-image img {
        border-radius: 12px;
    }
    .elementor-section-wrap > .elementor-section > .elementor-container {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
    }

    ul.products {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 10px !important;
    }
    ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        padding: 10px !important;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    ul.products li.product img {
        border-radius: 12px;
        margin-bottom: 10px;
    }
    
    ul.products li.product h2, ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }
    
    ul.products li.product .price {
        font-size: 16px !important;
        font-weight: bold !important;
        color: #0E6C93 !important;
    }

    body {
        padding-bottom: 70px !important;
    }
    
    .joinchat, .wa-button, .whatsapp-button, [class*="whatsapp"] {
        bottom: 80px !important; 
    }
}

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 65px;
        background: #ffffff;
        box-shadow: 0 -2px 15px rgba(0,0,0,0.1);
        z-index: 999999;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }
    
    .mobile-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #666;
        text-decoration: none;
        font-size: 11px;
        font-weight: 600;
        flex: 1;
        transition: all 0.2s ease;
    }
    
    .mobile-bottom-nav a svg {
        margin-bottom: 4px;
        fill: currentColor;
        width: 22px;
        height: 22px;
    }
    
    .mobile-bottom-nav a:hover,
    .mobile-bottom-nav a:active {
        color: #0E6C93;
    }
}

/* ==========================================================================
    CATEGORIAS INLINE NO HEADER
   ========================================================================== */
.nav-flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.nav-center {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 24px !important;
}
.nav-center .inline-cat {
    color: #444 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: color 0.2s ease !important;
}
.nav-center .inline-cat:hover {
    color: #29ABE2 !important;
}
/* Link "Ofertas" em destaque */
.nav-center .inline-cat-ofertas {
    color: #e11d48 !important;
    font-weight: 800 !important;
}
.nav-center .inline-cat-ofertas:hover { color: #be123c !important; }
.nav-center .inline-cat-ofertas.active { color: #be123c !important; }

/* Cabeçalho da página de Ofertas */
.po-ofertas-heading {
    margin-bottom: 24px;
    padding: 22px 24px;
    background: linear-gradient(120deg, #fff1f2 0%, #ffe4e6 100%);
    border: 1px solid #fecdd3;
    border-radius: 14px;
}
.po-ofertas-heading h1 {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 800;
    color: #be123c;
}
.po-ofertas-heading p {
    margin: 0;
    font-size: 14px;
    color: #9f1239;
}

@media (max-width: 991px) {
    .nav-center {
        display: none !important;
    }
}

/* ==========================================================================
    CORREES DE RESPONSIVIDADE EXTREMA (MOBILE FIXES)
   ========================================================================== */
html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

@media (max-width: 768px) {
    /* 1. TOP PROMO BAR - Ocultar itens extras para evitar scroll horizontal */
    .top-promo-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        justify-content: center !important;
        padding: 5px 10px !important;
    }
    .top-promo-bar span:not(:first-child) {
        display: none !important;
    }
    .top-promo-bar span {
        font-size: 11px !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* 2. HEADER CONTAINER - Evitar que logo, busca e cones quebrem a tela */
    .header-container {
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 10px !important;
        gap: 10px !important;
        justify-content: space-between !important;
    }
    
    /* Esconder o Atualizar Local no mobile */
    .header-location {
        display: none !important;
    }

    /* Ajustar logo */
    .site-branding {
        max-width: 150px !important;
    }
    .site-logo {
        width: 100% !important;
        height: auto !important;
    }

    /* Barra de pesquisa ocupando 100% da linha no mobile */
    .header-search {
        order: 3 !important; /* Joga para baixo na segunda linha do header */
        width: 100% !important;
        flex: 1 1 100% !important;
        margin: 5px 0 !important;
    }
    
    .woocommerce-product-search {
        display: flex !important;
        width: 100% !important;
    }
    
    .search-category-dropdown.real-select {
        max-width: 90px !important;
        padding-right: 5px !important;
        font-size: 12px !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
    }

    /* Ajustar cones de conta/carrinho (se j no estiverem ocultos pela barra inferior) */
    .header-actions {
        gap: 10px !important;
    }
    .account-text, .cart-label {
        display: none !important; /* Esconde textos, mostra s os cones no header topo */
    }
}

/* ==========================================================================
    CORREES WOOCOMMERCE MOBILE (PGINAS INTERNAS)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. DEVOLVER MARGENS PARA PGINAS INTERNAS */
    .single-product .site-content,
    .single-product .page-wrapper,
    .single-product .container,
    .woocommerce-cart .site-content,
    .woocommerce-cart .page-wrapper,
    .woocommerce-cart .container,
    .woocommerce-checkout .site-content,
    .woocommerce-checkout .page-wrapper,
    .woocommerce-checkout .container,
    .woocommerce-account .site-content,
    .woocommerce-account .page-wrapper,
    .woocommerce-account .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 2. PRODUTO (SINGLE PRODUCT) */
    .single-product div.product {
        display: flex !important;
        flex-direction: column !important;
    }
    .single-product div.product .images,
    .single-product div.product .summary {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px !important;
    }
    
    /* Abas de descrio */
    .woocommerce-tabs ul.tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding: 0 !important;
        white-space: nowrap !important;
        border-bottom: 1px solid #eee !important;
    }
    .woocommerce-tabs ul.tabs li {
        margin: 0 !important;
        border-bottom: none !important;
    }

    /* Produtos Relacionados - 2 por linha */
    .related.products ul.products {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .related.products ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
    }

    /* 3. CARRINHO */
    .woocommerce-cart table.cart {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        border: 1px solid #eee !important;
        border-radius: 8px !important;
    }
    .cart-collaterals {
        width: 100% !important;
        float: none !important;
        margin-top: 30px !important;
    }
    .cart-collaterals .cart_totals {
        width: 100% !important;
        float: none !important;
    }

    /* 4. CHECKOUT */
    .woocommerce-checkout .col2-set,
    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px !important;
    }
    .woocommerce-checkout .col2-set .col-1,
    .woocommerce-checkout .col2-set .col-2 {
        width: 100% !important;
        float: none !important;
    }
    
    #order_review {
        position: static !important;
        padding: 20px 15px !important;
    }
    
    /* 5. MINHA CONTA */
    .woocommerce-account .woocommerce {
        flex-direction: column !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 100% !important;
        flex: none !important;
        margin-bottom: 20px !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 5px !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation li {
        flex-shrink: 0 !important;
        border-bottom: none !important;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        flex: none !important;
        padding: 20px 15px !important;
    }
}

/* ==========================================================================
    CORREO DO BOTO GOOGLE (NEXTEND SOCIAL LOGIN)
   ========================================================================== */
.nsl-container {
    display: block !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 99 !important;
    margin-top: 15px !important;
    flex: 1 1 100% !important; /* Garante espao no flexbox */
}
.nsl-container-block {
    display: block !important;
    width: 100% !important;
}
#customer_login {
    flex-wrap: wrap !important;
}

/* ==========================================================================
   FIX: WOOCOMMERCE SINGLE PRODUCT MOBILE OVERFLOW
   ========================================================================== */
@media (max-width: 768px) {
    .woocommerce div.product {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important; /* Removes the 300px min-width */
        padding: 10px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    .woocommerce div.product .product_title {
        font-size: 22px !important;
        word-wrap: break-word !important;
        hyphens: auto;
    }
    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
        font-size: 24px !important;
    }
    .woocommerce div.product div.images img {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .woocommerce div.product .woocommerce-product-gallery {
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

/* ==========================================================================
   FIX: WOOCOMMERCE BUGS & ENCODING MOBILE V2
   ========================================================================== */
.single-product div.product form.cart::after { content: none !important; }

@media (max-width: 768px) {
    /* Corrigir quebra do breadcrumb (caminho no topo) */
    .woocommerce-breadcrumb {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        padding: 0 10px !important;
    }

    /* Corrigir o boto Adicionar ao Carrinho sendo esmagado */
    .woocommerce div.product form.cart {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .woocommerce div.product form.cart .quantity {
        margin-bottom: 15px !important;
        justify-content: center !important;
        width: 100% !important;
    }
    
    .woocommerce div.product form.cart .button {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 15px 10px !important;
    }
    
    /* Corrigir descrio vazando */
    .woocommerce div.product div.summary {
        overflow: hidden !important;
    }
    
    /* Tabs no mobile */
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        flex-direction: column !important;
        overflow: hidden !important;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        width: 100% !important;
        border-radius: 0 !important;
    }
}

/* ==========================================================================
   FIX: WOOCOMMERCE RELATED PRODUCTS GRID ON MOBILE
   ========================================================================== */
@media (max-width: 768px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .woocommerce .related.products ul.products,
    .woocommerce .up-sells ul.products,
    .woocommerce .cross-sells ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px !important;
        white-space: normal !important;
    }
    
    .woocommerce ul.products li.product .price {
        font-size: 16px !important;
        margin: 0 10px 10px 10px !important;
    }
    
    .woocommerce ul.products li.product .button {
        padding: 10px !important;
        font-size: 12px !important;
    }
}

/* ==========================================================================
     4M&C  REFATORAO MOBILE V5 (BLOCO FINAL / AUTORITATIVO)
   --------------------------------------------------------------------------
   Este bloco reescreve o visual do celular de forma coesa. Por estar por
   LTIMO no arquivo, ele tem prioridade sobre todos os ajustes mobile antigos
   acima.  Para mexer no mobile, edite AQUI (no nos blocos antigos).
   Breakpoints: 768px (celular/tablet) e 380px (celulares pequenos).
   ========================================================================== */
@media (max-width: 768px) {

    /* ---- 0. Base: sem rolagem horizontal ---- */
    html, body { overflow-x: hidden !important; max-width: 100vw !important; }

    /* ---- 1. Barra promocional (topo) ---- */
    .top-promo-bar {
        padding: 7px 12px !important;
        font-size: 11px !important;
        letter-spacing: 0.02em !important;
    }

    /* ---- 2. Cabealho compacto: []  [LOGO]  []  +  busca embaixo ---- */
    .site-header { padding: 10px 0 !important; }
    .site-header .header-container {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 0 14px !important;
    }
    .mobile-menu-toggle { order: 1 !important; flex: 0 0 auto !important; }
    .site-branding {
        order: 2 !important;
        flex: 1 1 auto !important;
        text-align: center !important;
        max-width: none !important;
    }
    .site-logo { width: 140px !important; margin: 0 auto !important; }
    .header-actions { order: 3 !important; flex: 0 0 auto !important; gap: 8px !important; }
    .account-text, .cart-label { display: none !important; }   /* s cones no topo */
    .header-search {
        order: 4 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 2px 0 0 !important;
    }
    .header-search form { border-radius: 10px !important; }
    .header-search .search-field { padding: 12px 14px !important; font-size: 15px !important; }
    .search-category-dropdown { display: none !important; } /* economiza espao no mobile */

    /* ---- 3. Hero / Carrossel ---- */
    .hero-carousel-section {
        height: 240px !important;
        border-radius: 14px !important;
        margin: 0 12px 22px !important;
        width: auto !important;
    }
    .hero-content { max-width: 100% !important; padding: 0 22px !important; gap: 10px !important; }
    .hero-label { font-size: 10px !important; padding: 4px 10px !important; }
    .hero-content h2 { font-size: 23px !important; line-height: 1.15 !important; letter-spacing: -0.5px !important; }
    .hero-content p {
        font-size: 13px !important;
        max-width: 92% !important;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .hero-btn { padding: 11px 20px !important; font-size: 13px !important; }
    .hero-watermark { display: none !important; }  /* marca d'gua polui em telas pequenas */
    .hero-bg-shape { width: 55% !important; right: -22% !important; opacity: 0.4 !important; }
    .hero-nav-arrow { width: 34px !important; height: 34px !important; }
    .arrow-left { left: 8px !important; } .arrow-right { right: 8px !important; }

    /* ---- 4. Selos de confiana (Suporte  Entrega  Seguro) ---- */
    .trust-badges-section { margin: 0 12px 26px !important; padding: 8px 16px !important; border-radius: 14px !important; }
    .trust-badges-container { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; }
    .badge-item { padding: 14px 2px !important; border-bottom: 1px solid var(--border) !important; }
    .badge-item:last-child { border-bottom: none !important; }
    .badge-icon { width: 42px !important; height: 42px !important; }
    .badge-info h4 { font-size: 14px !important; }
    .badge-info p { font-size: 12px !important; }

    /* ---- 5. Categorias em crculo  carrossel horizontal (estilo app) ---- */
    .home-categories-section { margin: 22px auto 30px !important; padding: 0 !important; }
    .home-categories-header { margin: 0 12px 18px !important; padding: 12px 16px !important; }
    .hch-left h2 { font-size: 14px !important; }
    .hch-right a { font-size: 13px !important; }
    .home-categories-grid {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        gap: 18px !important;
        padding: 4px 16px 10px !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .home-categories-grid::-webkit-scrollbar { display: none; }
    .cat-circle-item { flex: 0 0 auto !important; scroll-snap-align: start !important; }
    .cat-circle-img { width: 74px !important; height: 74px !important; padding: 14px !important; margin-bottom: 8px !important; }
    .cat-circle-title { font-size: 12px !important; }

    /* ---- 6. Recomendados (sidebar teal + produtos 2 por linha) ---- */
    .home-recommended-section { margin: 0 auto 32px !important; padding: 0 12px !important; }
    .home-recommended-container { gap: 16px !important; }
    .rec-sidebar { min-width: 0 !important; padding: 24px 22px !important; }
    .rec-sidebar-content h2 { font-size: 22px !important; }
    .rec-sidebar-content p { font-size: 13px !important; margin-bottom: 20px !important; }
    .rec-products-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
    .rec-product-card { padding: 12px !important; }
    .rec-stars { margin-bottom: 10px !important; }
    .rec-product-card h3 { font-size: 13px !important; margin-bottom: 12px !important; }
    .rec-price { font-size: 17px !important; }
    .rec-installments { font-size: 11px !important; }
    .rec-add-btn { width: 34px !important; height: 34px !important; }

    /* ---- 7. Grade de produtos da loja / relacionados (cartes consistentes) ---- */
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .woocommerce .related.products ul.products,
    .woocommerce .up-sells ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        padding: 0 !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }
    .woocommerce ul.products li.product img { padding: 14px !important; aspect-ratio: 1 / 1 !important; }
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px !important;
        margin: 12px 12px 6px !important;
        white-space: normal !important;
    }
    .woocommerce ul.products li.product .star-rating { margin: 0 12px 6px !important; font-size: 12px !important; }
    .woocommerce ul.products li.product .price { font-size: 16px !important; margin: 0 12px 12px !important; }
    .woocommerce ul.products li.product .button {
        border-radius: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        padding: 13px 0 !important;
        font-size: 13px !important;
    }

    /* ---- 8. Rodap ---- */
    .site-footer { padding: 40px 0 90px !important; margin-top: 40px !important; }
    .footer-container { padding: 0 20px !important; }
    .footer-grid { gap: 28px !important; }
    .footer-bottom { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 14px !important; }
    .footer-payments { justify-content: center !important; }

    /* ---- 9. Barra inferior (app) + boto WhatsApp coerentes ---- */
    .mobile-bottom-nav { height: 62px !important; }
    body { padding-bottom: 62px !important; }
    .whatsapp-float-btn {
        transform: none !important;
        width: 52px !important;
        height: 52px !important;
        bottom: 74px !important;
        right: 16px !important;
    }
    .whatsapp-float-btn svg { width: 26px !important; height: 26px !important; }
}

/* ---- 10. Refinamento para celulares pequenos ( 380px) ---- */
@media (max-width: 380px) {
    .site-logo { width: 124px !important; }
    .hero-content h2 { font-size: 21px !important; }
    .hero-carousel-section { height: 220px !important; }
    .cat-circle-img { width: 66px !important; height: 66px !important; }
    .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 12px !important; }
}

/* ==========================================================================
     4M&C  MODERNIZAO GLOBAL V5 (POLISH  TODAS AS PGINAS)
   --------------------------------------------------------------------------
   Camada final de acabamento aplicada a TODO o site (home, loja, produto,
   carrinho, checkout, minha conta e login). S esttica  no altera markup
   nem plugins. Vale para desktop e mobile.
   ========================================================================== */

/* ---- 1. Unificao do verde da marca (home usava #29ABE2, internas #1abc9c) --- */
:root {
    --color-primary:       #0891C2;   /* Painel Claro - ciano aprovado (Opcao B) */
    --color-primary-hover: #076E93;
    --color-primary-deep:  #054F6B;
    --color-accent:        #38B6E0;   /* ciano mais claro, tom de destaque */
}

/* ---- 2. Base: renderizao suave, seleo, rolagem ---- */
html { scroll-behavior: smooth; }
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
::selection { background: rgba(41, 171, 226, 0.22); color: var(--foreground); }

/* Scrollbar moderna (desktop) */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover { background: var(--brand); background-clip: padding-box; }

/* ---- 3. Foco de teclado acessvel e moderno ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--brand) !important;
    outline-offset: 2px !important;
    border-radius: 6px;
}

/* ---- 4. Transies globais em campos de formulrio ---- */
input, select, textarea, button, a { transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s; }

/* ---- 5. Cartes de produto: zoom suave na imagem + realce da borda ---- */
.woocommerce ul.products li.product { transition: box-shadow .28s ease, transform .28s ease, border-color .28s ease; }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { overflow: hidden; }
.woocommerce ul.products li.product img { transition: transform .45s cubic-bezier(.25,.8,.25,1) !important; }
.woocommerce ul.products li.product:hover img { transform: scale(1.06); }
.woocommerce ul.products li.product:hover { border-color: rgba(41,171,226,0.45); }

/* ---- 6. Selo de PROMOO (onsale) moderno em vez do padro do Woo ---- */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
    background: linear-gradient(135deg, #ff5e62 0%, #ff2d55 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    min-height: auto !important;
    min-width: auto !important;
    height: auto !important;
    width: auto !important;
    padding: 5px 13px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    line-height: 1 !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    margin: 0 !important;
    position: absolute !important;
    z-index: 5 !important;
    box-shadow: 0 4px 12px rgba(255,45,85,0.35) !important;
}

/* ---- 7. Breadcrumb em "plula" moderna ---- */
.woocommerce .woocommerce-breadcrumb {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 22px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 9px 18px;
    display: inline-block;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--brand); text-decoration: none; font-weight: 600; }
.woocommerce .woocommerce-breadcrumb a:hover { text-decoration: underline; }

/* ---- 8. Animao de entrada suave (home e loja) ---- */
@keyframes po-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-carousel-section,
.trust-badges-section,
.home-categories-section,
.home-recommended-section,
.shop-content-wrapper { animation: po-fade-up 0.55s ease both; }
.trust-badges-section    { animation-delay: 0.05s; }
.home-categories-section { animation-delay: 0.10s; }
.home-recommended-section{ animation-delay: 0.15s; }

/* ---- 9. Rodap: link desliza levemente no hover ---- */
.footer-links li a { display: inline-block; }
.footer-links li a:hover { transform: translateX(4px); }

/* ---- 10. Minha Conta: dashboard mais respirado e refinado ---- */
.woocommerce-account .woocommerce-MyAccount-content { line-height: 1.7; }
.woocommerce-account .woocommerce-MyAccount-navigation li a svg { flex-shrink: 0; }
.woocommerce-account .addresses .woocommerce-Address,
.woocommerce-MyAccount-content .woocommerce-Address {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-xs);
}

/* ---- 11. Botes WooCommerce genricos: cantos e sombra coerentes ---- */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
    box-shadow: 0 4px 16px rgba(41,171,226,0.28) !important;
}

/* ---- 12. Quantidade (stepper) com visual mais limpo ---- */
.quantity input.qty { -moz-appearance: textfield; }
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- 13. Acessibilidade: respeita quem prefere menos animao ---- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
     4M&C  PGINA DE PRODUTO: LAYOUT LIMPO V5 (DESKTOP 769px)
   --------------------------------------------------------------------------
   Corrige o layout "torto/espremido": havia 3 definies conflitantes de
   `.woocommerce div.product` (ora grid, ora flex-wrap). Aqui foramos um GRID
   coeso: galeria  esquerda, resumo  direita, abas + relacionados embaixo
   ocupando a largura toda. O mobile continua empilhado (blocos anteriores).
   ========================================================================== */
@media (min-width: 769px) {

    /* Container do produto  grid de 2 colunas */
    .woocommerce div.product,
    .single-product div.product {
        display: grid !important;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
        column-gap: 56px !important;
        row-gap: 44px !important;
        align-items: start !important;
        flex-wrap: nowrap !important;
        margin: 30px auto 64px !important;
        padding: 44px !important;
        background: #fff !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-xl) !important;
        box-shadow: 0 8px 30px rgba(0,0,0,0.05) !important;
    }

    /* Galeria (esquerda)  grudenta ao rolar */
    .woocommerce div.product > .woocommerce-product-gallery,
    .woocommerce div.product > div.images {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: start !important;
        position: sticky !important;
        top: 24px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 16px !important;
        flex: none !important;
        box-shadow: none !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-lg) !important;
        background: #fbfbfc !important;
    }
    .woocommerce div.product div.images img,
    .woocommerce div.product .woocommerce-product-gallery__image img {
        aspect-ratio: 1 / 1 !important;
        object-fit: contain !important;
        width: 100% !important;
        height: auto !important;
        background: #fff !important;
    }

    /* Resumo (direita)  pilha vertical bem espaada */
    .woocommerce div.product > div.summary,
    .woocommerce div.product > .summary.entry-summary {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 6px 0 !important;
        flex: none !important;
    }

    /* Ttulo, preo e descrio curta com respiro */
    .woocommerce div.product .product_title {
        font-size: 30px !important;
        line-height: 1.25 !important;
        margin: 0 0 14px !important;
    }
    .woocommerce div.product .summary .price,
    .woocommerce div.product .summary p.price,
    .woocommerce div.product .summary span.price {
        font-size: 34px !important;
        margin: 0 0 22px !important;
    }
    .woocommerce div.product .woocommerce-product-details__short-description {
        font-size: 15px !important;
        line-height: 1.85 !important;
        color: var(--slate-600) !important;
    }

    /* Abas (descrio) e relacionados  largura total, abaixo das colunas */
    .woocommerce div.product > .woocommerce-tabs,
    .woocommerce div.product > .related.products,
    .woocommerce div.product > .up-sells {
        grid-column: 1 / -1 !important;
        width: auto !important;
        min-width: 0 !important;
        margin-top: 8px !important;
        float: none !important;
    }

    /* Painel da descrio: bem arejado e legvel (fim do "espremido") */
    .woocommerce div.product .woocommerce-tabs .panel {
        padding: 40px 48px !important;
        font-size: 15px !important;
        line-height: 1.9 !important;
        color: var(--slate-700) !important;
    }
    .woocommerce div.product .woocommerce-tabs .panel > *:first-child { margin-top: 0 !important; }
    .woocommerce div.product .woocommerce-tabs .panel p { margin: 0 0 16px !important; }
    .woocommerce div.product .woocommerce-tabs .panel ul,
    .woocommerce div.product .woocommerce-tabs .panel ol { margin: 0 0 16px 22px !important; line-height: 1.9 !important; }
    .woocommerce div.product .woocommerce-tabs .panel img { max-width: 100% !important; height: auto !important; border-radius: 12px !important; }
    .woocommerce div.product .woocommerce-tabs .panel table td,
    .woocommerce div.product .woocommerce-tabs .panel table th { padding: 12px 16px !important; }

    /* Ttulos "Produtos relacionados" / "Descrio" */
    .woocommerce div.product .related.products > h2,
    .woocommerce div.product .up-sells > h2 {
        font-size: 22px !important;
        font-weight: 800 !important;
        color: var(--foreground) !important;
        margin: 8px 0 26px !important;
        letter-spacing: -0.3px !important;
    }
    /* Relacionados: grade de 4 no desktop largo */
    .woocommerce div.product .related.products ul.products,
    .woocommerce div.product .up-sells ul.products {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
    }
}

/* Tablet (7691024): relacionados em 3 colunas para no espremer */
@media (min-width: 769px) and (max-width: 1024px) {
    .woocommerce div.product,
    .single-product div.product { column-gap: 36px !important; padding: 32px !important; }
    .woocommerce div.product .related.products ul.products,
    .woocommerce div.product .up-sells ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ==========================================================================
     4M&C  POLIMENTO EXTRA DE DESKTOP V5 (1025px)
   ========================================================================== */
@media (min-width: 1025px) {

    /* Categorias inline no header: sublinhado que cresce no hover */
    .nav-center .inline-cat { position: relative; padding-bottom: 2px; }
    .nav-center .inline-cat::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: -4px;
        height: 2px;
        background: var(--brand);
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.25s ease;
    }
    .nav-center .inline-cat:hover::after { transform: scaleX(1); }

    /* Selos de confiana: leve elevao no hover */
    .badge-item {
        padding: 10px 12px;
        border-radius: 14px;
        transition: transform 0.22s ease, background-color 0.22s ease;
    }
    .badge-item:hover { transform: translateY(-4px); background-color: rgba(41,171,226,0.05); }

    /* Cartes de produto: sombra e elevao um pouco mais ricas no desktop */
    .woocommerce ul.products li.product:hover {
        box-shadow: 0 16px 40px rgba(0,0,0,0.10) !important;
        transform: translateY(-6px) !important;
    }

    /* Boto comprar do card s aparece 100% no hover (efeito refinado) */
    .woocommerce ul.products li.product .button { opacity: 0.92; }
    .woocommerce ul.products li.product:hover .button { opacity: 1; }

    /* Ttulo de seo da home com barra de destaque */
    .hch-left h2::before {
        content: '';
        display: inline-block;
        width: 6px; height: 18px;
        background: var(--brand);
        border-radius: 3px;
        margin-right: 10px;
        vertical-align: -3px;
    }

    /* Contedo um pouco mais arejado */
    .home-recommended-section,
    .home-categories-section { margin-bottom: 72px !important; }
}

/* ==========================================================================
     4M&C  ACABAMENTO PREMIUM / PROFISSIONAL V6
   --------------------------------------------------------------------------
   Refinamentos finos de alto padro: tipografia, sombras em camadas, detalhes
   de marca e micro-interaes. Aplica-se a todo o site (s esttica).
   ========================================================================== */

/* ---- 1. Tipografia mais refinada ---- */
body { letter-spacing: -0.01em; }
h1, h2, h3, .product_title, .footer-title, .hch-left h2, .rec-sidebar-content h2 { letter-spacing: -0.02em; }

/* ---- 1b. Identidade 4M&C: Sora nos títulos (autoridade B2B), Inter no corpo ---- */
h1, h2, h3, h4, h5, h6,
.product_title, .footer-title, .hch-left h2, .rec-sidebar-content h2,
.hero-content h2, .po-featured-head h2, .po-brands-tagline {
    font-family: 'Sora', 'Inter', Arial, sans-serif;
}

/* ---- 2. Barra promocional com leve profundidade (Painel Claro: so ciano, sem navy) ---- */
.top-promo-bar {
    background: linear-gradient(90deg, #076E93 0%, var(--brand) 50%, #076E93 100%) !important;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);
}

/* ---- 3. Cabealho: fio de destaque da marca na base ---- */
.site-header { position: relative; }
.site-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--color-accent), var(--brand));
    opacity: 0.9;
}
/* Busca no header com transio premium */
.header-search form { box-shadow: 0 2px 10px rgba(0,0,0,0.10); }

/* ---- 4. Cartes de produto: acento no topo ao passar o mouse ---- */
.woocommerce ul.products li.product { position: relative; }
.woocommerce ul.products li.product::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--color-accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: 4;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.woocommerce ul.products li.product:hover::before { transform: scaleX(1); }

/* Preo do card com peso e cor de marca consistentes */
.woocommerce ul.products li.product .price {
    color: var(--color-secondary) !important;
    font-weight: 900 !important;
}

/* ---- 5. Crculos de categoria: anel gradiente no hover ---- */
.cat-circle-img { position: relative; }
.cat-circle-item:hover .cat-circle-img {
    border-color: transparent !important;
    box-shadow: 0 0 0 3px var(--brand), 0 10px 20px rgba(41,171,226,0.18) !important;
}

/* ---- 6. Selos de confiana: virar cartes definidos no desktop ---- */
@media (min-width: 1025px) {
    .trust-badges-section { padding: 10px 16px !important; }
    .trust-badges-container { align-items: stretch !important; }
    .badge-item {
        flex: 1 1 0 !important;
        justify-content: center !important;
        padding: 18px 20px !important;
        border-right: 1px solid var(--border);
        border-radius: 0 !important;
    }
    .badge-item:last-child { border-right: none; }
    .badge-item:hover { background-color: rgba(41,171,226,0.04) !important; transform: none !important; }
}

/* ---- 7. Botes: acabamento consistente e sombra de marca ---- */
.hero-btn,
.rec-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    letter-spacing: 0.01em;
}
.hero-btn { box-shadow: 0 8px 24px rgba(0,0,0,0.22) !important; }
.hero-btn:hover { box-shadow: 0 12px 30px rgba(0,0,0,0.28) !important; }

/* ---- 8. Rodap: acento gradiente no topo + brilho no logo ---- */
.site-footer { border-top: none !important; position: relative; }
.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--color-accent), var(--brand));
}
.footer-title { position: relative; padding-bottom: 12px; }
.footer-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 32px; height: 2px;
    background: var(--brand);
    border-radius: 2px;
}

/* ---- 9. Sombras em camadas nos blocos principais (profundidade suave) ---- */
.trust-badges-section,
.home-categories-header,
.shop-content-wrapper,
.rec-product-card,
.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation {
    box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 8px 24px rgba(16,24,40,0.05) !important;
}

/* ---- 10. Inputs de busca/forms: foco premium com anel de marca ---- */
.header-search form:focus-within { box-shadow: 0 0 0 3px rgba(41,171,226,0.25), 0 2px 10px rgba(0,0,0,0.10) !important; }

/* ---- 11. Pgina de produto: preo e boto comprar com destaque profissional (desktop) ---- */
@media (min-width: 769px) {
    .woocommerce div.product form.cart .single_add_to_cart_button {
        letter-spacing: 0.06em !important;
        box-shadow: 0 10px 30px rgba(41,171,226,0.30) !important;
    }
    /* Abas: ttulo ativo com sublinhado de marca mais ntido */
    .woocommerce div.product .woocommerce-tabs ul.tabs { gap: 36px !important; }
}

/* ---- 12. Seleo de texto e links com identidade da marca ---- */
a { text-underline-offset: 2px; }

/* ---- 13. Cabealhos de seo da loja mais "editorial" ---- */
.woocommerce .woocommerce-result-count { font-weight: 600; }

/* ---- 14. Refino final dos cantos (visual mais atual) ---- */
.trust-badges-section,
.home-categories-header,
.shop-content-wrapper { border-radius: var(--radius-xl) !important; }

/* ==========================================================================
     4M&C  FUNDO DO HERO (PROFUNDIDADE + LEGIBILIDADE) V7
   --------------------------------------------------------------------------
   D acabamento ao fundo do banner, seja cor slida ou imagem enviada:
    Overlay diagonal escurece o lado esquerdo (onde fica o texto)  texto
     branco sempre legvel, inclusive sobre fotos claras.
    Leve gradiente d profundidade a cores chapadas (fim do "fundo liso").
   ========================================================================== */
.hero-slide { position: relative; background-size: cover !important; background-position: center !important; }
.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(100deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.30) 42%, rgba(0,0,0,0.05) 72%, rgba(0,0,0,0) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.12) 100%);
}
/* Garante o contedo acima do overlay */
.hero-content { position: relative; z-index: 12 !important; }
.hero-nav-arrow, .hero-dots { z-index: 30 !important; }
/* Selo técnico de canto — mantém legível mesmo com o overlay escuro sobre foto */
.hero-watermark { z-index: 2; color: rgba(255,255,255,0.7) !important; }

/* ---- Modo "BANNER COMPLETO": mostra s a arte enviada (sem overlay/formas) ---- */
.hero-slide--full::before { display: none !important; }               /* remove o escurecimento */
.hero-slide--full .hero-bg-shape,
.hero-slide--full .hero-watermark,
.hero-slide--full .hero-content { display: none !important; }         /* esconde textos/formas do tema */
.hero-slide--full { background-size: cover !important; background-position: center !important; }
.hero-full-link {                                                     /* rea clicvel cobrindo o slide */
    position: absolute;
    inset: 0;
    z-index: 15;
    display: block;
}

/* ==========================================================================
     4M&C  HERO: IMAGENS RESPONSIVAS (DESKTOP  MOBILE) V9
   --------------------------------------------------------------------------
   Cada slide recebe as imagens via variveis CSS (--hero-bg-desktop e
   --hero-bg-mobile). No mobile trocamos automaticamente:
    Se houver imagem mobile dedicada  usa ela preenchendo a rea (cover).
    Se NO houver  no "banner completo" a arte de desktop aparece INTEIRA
     (contain), sem cortar as laterais/texto.
   ========================================================================== */
.hero-slide { background-image: var(--hero-bg-desktop); background-repeat: no-repeat; }

@media (max-width: 768px) {
    .hero-carousel-section { height: 300px !important; }

    /* Usa a imagem de mobile; se no existir, cai na de desktop */
    .hero-slide { background-image: var(--hero-bg-mobile, var(--hero-bg-desktop)) !important; }

    /* Banner completo SEM imagem mobile  mostra a arte inteira (nada  cortado) */
    .hero-slide--full { background-size: contain !important; background-position: center !important; }

    /* Banner completo COM imagem mobile dedicada  preenche a rea (recorte mnimo) */
    .hero-slide--full.has-mobile-img { background-size: cover !important; }
}

/* ==========================================================================
     4M&C  TELA DE LOGIN / CADASTRO PROFISSIONAL V10
   --------------------------------------------------------------------------
   Cabealho de boas-vindas, cones nos campos, divisor "ou entre com" e um
   fundo suave s nesta pgina. Markup no template woocommerce/myaccount/form-login.php.
   ========================================================================== */

/* ---- Fundo suave s na tela de login (navegadores modernos) ---- */
body.woocommerce-account:has(#customer_login) {
    background:
        radial-gradient(60% 55% at 50% 0%, rgba(41,171,226,0.08) 0%, rgba(41,171,226,0) 70%),
        var(--background);
}

/* ---- Cabealho de boas-vindas ---- */
.mc4-login-intro { text-align: center; max-width: 620px; margin: 8px auto 40px; padding: 0 16px; }
.mc4-login-intro .login-intro-icon {
    width: 66px; height: 66px; margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #fff;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    box-shadow: 0 12px 26px rgba(41,171,226,0.35);
}
.mc4-login-intro h1 {
    font-size: 30px; font-weight: 800; margin: 0 0 8px;
    color: var(--gray-900); letter-spacing: -0.02em;
}
.mc4-login-intro p { font-size: 15px; color: var(--slate-500); margin: 0; line-height: 1.6; }

/* ---- Divisor "Ou entre com" ---- */
.mc4-social-wrap { margin-top: 22px; }
.mc4-social-divider {
    display: flex; align-items: center; gap: 14px;
    color: var(--gray-400); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px;
    margin: 6px 0 16px;
}
.mc4-social-divider::before,
.mc4-social-divider::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }
.mc4-social-divider span { white-space: nowrap; }

/* ---- cones dentro dos campos ---- */
#customer_login #username,
#customer_login #reg_username,
#customer_login #password,
#customer_login #reg_password,
#customer_login #reg_email {
    padding-left: 44px !important;
    background-repeat: no-repeat !important;
    background-position: 15px center !important;
    background-size: 18px 18px !important;
}
#customer_login #username,
#customer_login #reg_username {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}
#customer_login #reg_email {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E") !important;
}
#customer_login #password,
#customer_login #reg_password {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important;
}

/* ---- Cartes: brilho superior mais ntido e leve gradiente ---- */
#customer_login .u-column1,
#customer_login .u-column2 {
    background: linear-gradient(180deg, #ffffff 0%, #fcfdfd 100%) !important;
}

/* ---- Mobile: cabealho um pouco menor ---- */
@media (max-width: 768px) {
    .mc4-login-intro h1 { font-size: 24px; }
    .mc4-login-intro .login-intro-icon { width: 58px; height: 58px; }
}

/* ==========================================================================
     4M&C  SEO: H1 acessvel e oculto (palavras-chave na home)
   Fica invisvel na tela, mas  lido por leitores de tela e pelo Google.
   ========================================================================== */
.mc4-seo-h1 {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
     4M&C  MEGA MENU DE CATEGORIAS (DESKTOP) V12
   Aparece ao passar o mouse no boto CATEGORIAS. No mobile continua o
   menu off-canvas (a barra .category-nav some em telas 1024px).
   ========================================================================== */
.nav-left { position: relative; }
.nav-left .nav-menu { display: none !important; } /* dropdown antigo desativado */

.mc4-mega {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 12px;
    display: none;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 30px;
    min-width: 880px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(16,24,40,0.18);
    padding: 28px 32px;
    z-index: 9999;
}
/* "ponte" invisvel para o mouse no perder o hover no vo */
.mc4-mega::before {
    content: '';
    position: absolute;
    top: -14px; left: 0; right: 0;
    height: 14px;
}
.nav-left:hover .mc4-mega { display: grid; animation: po-fade-up 0.25s ease both; }
.nav-left:hover .nav-categories-btn { background-color: var(--brand); }

.mega-col h4 {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--foreground);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border);
}
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col li { margin: 0 0 10px; }
.mega-col li a {
    display: inline-block;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s, padding-left 0.2s;
}
.mega-col li a:hover { color: var(--brand); padding-left: 4px; }
.mega-col li a.mega-all { color: var(--brand); font-weight: 700; margin-top: 4px; }

/* No deixa o mega vazar em telas menores que o container */
@media (max-width: 1240px) {
    .mc4-mega { min-width: 760px; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 22px; }
}

/* ==========================================================================
     4M&C  PGINA DE PRODUTO: BLOCOS PROFISSIONAIS V13
   ========================================================================== */

/* Desativa a caixa pontilhada antiga de selos (substituda pelo card novo) */
.single-product div.product form.cart::after { content: none !important; }

/* Selo de disponibilidade */
.po-stock-badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700;
    padding: 6px 14px; border-radius: 999px; margin: 0 0 14px;
}
.po-stock-badge.in  { background: rgba(109,165,68,0.12); color: #47791f; }
.po-stock-badge.out { background: #fef2f2; color: #b91c1c; }
.po-stock-badge .po-dot {
    width: 8px; height: 8px; border-radius: 50%; background: currentColor;
    box-shadow: 0 0 0 3px rgba(109,165,68,0.18);
}
.po-stock-badge.out .po-dot { box-shadow: 0 0 0 3px rgba(185,28,28,0.15); }

/* Parcelamento + Pix */
.po-payment-info {
    margin: 0 0 24px; padding: 14px 18px;
    background: var(--gray-50); border: 1px solid var(--gray-200);
    border-radius: 12px; display: flex; flex-direction: column; gap: 8px;
}
.po-pay-parc { font-size: 15px; color: var(--foreground); }
.po-pay-parc b { font-weight: 800; }
.po-pay-pix { font-size: 13px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.po-pay-pix b { color: var(--success); }
.po-pix-badge {
    background: var(--success); color: #fff; font-size: 11px; font-weight: 800;
    padding: 3px 8px; border-radius: 6px; letter-spacing: 0.03em;
}

/* Card de benefcios (garantia, entrega, pagamento) */
.po-benefits {
    display: grid; gap: 14px;
    margin: 22px 0 0; padding: 18px 20px;
    background: #fff; border: 1px solid var(--gray-200);
    border-radius: 14px; box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 8px 20px rgba(16,24,40,0.05);
}
.po-benefit { display: flex; align-items: center; gap: 14px; }
.po-benefit-icon {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 11px; background: rgba(41,171,226,0.10); color: var(--brand);
    display: flex; align-items: center; justify-content: center;
}
.po-benefit-txt strong { display: block; font-size: 14px; font-weight: 700; color: var(--foreground); line-height: 1.3; }
.po-benefit-txt span { font-size: 12px; color: var(--muted); }

/* ==========================================================================
     4M&C  HEURSTICAS DE NIELSEN + BANNER DE CATEGORIA V14
   ========================================================================== */

/* ---- Banner de categoria estilo e-commerce ---- */
.category-banner-section { position: relative; overflow: hidden; }
.category-banner-section::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.30) 100%);
}
.category-banner-content { position: relative; z-index: 3; }
.category-breadcrumb .crumb-current { text-transform: capitalize; }
.category-banner-head { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.category-banner-icon {
    width: 56px; height: 56px; flex-shrink: 0; font-size: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px; color: #fff;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.20);
}
.category-banner-icon svg { width: 30px; height: 30px; }
.category-banner-heading { display: flex; flex-direction: column; gap: 4px; }
.category-banner-title { text-transform: capitalize; margin: 0 !important; }
.category-banner-count {
    display: inline-block; margin-top: 16px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff; font-size: 13px; font-weight: 700;
    padding: 6px 14px; border-radius: 999px;
}
@media (max-width: 768px) {
    .category-banner-head { gap: 12px; }
    .category-banner-icon { width: 46px; height: 46px; }
    .category-banner-icon svg { width: 24px; height: 24px; }
    .category-banner-title { font-size: 26px !important; }
}

/* ---- Nielsen #4/#8: um nico breadcrumb (some o do Woo onde j h banner) ---- */
.tax-product_cat .woocommerce-breadcrumb,
.post-type-archive-product .woocommerce-breadcrumb,
.woocommerce-shop .woocommerce-breadcrumb { display: none !important; }

/* ---- Nielsen #1: "voc est aqui"  categoria ativa no menu ---- */
.nav-center .inline-cat.active { color: var(--brand) !important; font-weight: 800 !important; }
@media (min-width: 1025px) {
    .nav-center .inline-cat.active::after { transform: scaleX(1); }
}
.offcanvas-nav li.oc-active > a { color: var(--brand) !important; font-weight: 800 !important; }

/* ---- Nielsen #3: boto "voltar ao topo" ---- */
.po-to-top {
    position: fixed; left: 22px; bottom: 26px; z-index: 9998;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--foreground); color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background-color 0.2s;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.po-to-top.show { opacity: 1; visibility: visible; transform: none; }
.po-to-top:hover { background: var(--brand); }
@media (max-width: 768px) {
    .po-to-top { left: 16px; bottom: 76px; width: 42px; height: 42px; }
}

/* ==========================================================================
     4M&C  CARDS DA LOJA MAIS LIMPOS (menos poluio visual) V15
   Mais respiro entre os elementos e boto "Adicionar" mais leve/discreto.
   ========================================================================== */
/* Mais espao entre os cards */
.woocommerce ul.products,
.woocommerce-page ul.products { gap: 28px !important; }

/* Cantos mais suaves + respiro na base do card */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product { border-radius: 16px !important; }

/* Ttulo alinhado (1 ou 2 linhas ocupam a mesma altura) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin: 18px 18px 10px !important;
    min-height: 2.7em;
    font-size: 14px !important;
    color: var(--slate-700) !important;
}

/* Preo com respiro */
.woocommerce ul.products li.product .price {
    margin: 0 18px 16px !important;
    font-size: 19px !important;
}

/* Boto "Adicionar" mais leve: recuado, cantos redondos, sem caixa-alta pesada */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .button.add_to_cart_button {
    margin: 0 16px 18px !important;
    width: calc(100% - 32px) !important;
    border-radius: 10px !important;
    padding: 12px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: var(--brand) !important;
    box-shadow: none !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button.add_to_cart_button:hover {
    background: var(--brand-hover) !important;
    box-shadow: 0 6px 16px rgba(41,171,226,0.22) !important;
    transform: none !important;
}
/* Remove o "brilho" diagonal do boto nos cards (deixava mais chamativo) */
.woocommerce ul.products li.product .button.add_to_cart_button::before { display: none !important; }

/* Mobile: recuo menor para o boto no ficar estreito demais */
@media (max-width: 768px) {
    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product .button.add_to_cart_button {
        margin: 0 10px 12px !important;
        width: calc(100% - 20px) !important;
        font-size: 13px !important;
    }
    .woocommerce ul.products li.product .woocommerce-loop-product__title { margin: 12px 12px 8px !important; min-height: 2.6em; }
    .woocommerce ul.products li.product .price { margin: 0 12px 12px !important; }
}

/* ==========================================================================
     4M&C  SELOS DE SEGURANA + FIM DO ESPAO EM BRANCO (PRODUTO) V16
   ========================================================================== */

/* Bloco de selos abaixo da galeria */
.po-product-seals {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 6px 16px rgba(16,24,40,0.04);
}
.po-seals-title {
    font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--foreground); margin: 0 0 14px; padding-bottom: 10px;
    border-bottom: 1px solid var(--gray-200);
}
.po-seals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.po-seal { display: flex; align-items: center; gap: 10px; }
.po-seal-full { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gray-200); }

/* ==========================================================================
   📝  4M&C — BLOCO DE CONTEÚDO SEO + FAQ NA HOME (V9)
   ========================================================================== */
.po-home-seo {
    margin: 44px 0 8px;
    padding-top: 30px;
    border-top: 1px solid var(--gray-200);
}
.po-home-seo h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--foreground);
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}
.po-home-seo > p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--muted);
    margin: 0 0 12px;
    max-width: 900px;
}
.po-home-faq { margin-top: 26px; }
.po-home-faq h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--foreground);
    margin: 0 0 12px;
}
.po-home-faq details {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    margin-bottom: 10px;
}
.po-home-faq summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--foreground);
    padding: 14px 44px 14px 16px;
    list-style: none;
    position: relative;
}
.po-home-faq summary::-webkit-details-marker { display: none; }
.po-home-faq summary::after {
    content: '+';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand);
    font-weight: 800;
    font-size: 18px;
    line-height: 1;
}
.po-home-faq details[open] summary::after { content: '\2013'; }
.po-home-faq details p {
    padding: 0 16px 14px;
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
}

/* ==========================================================================
   💰  4M&C — CONVERSÃO NA PÁGINA DE PRODUTO (V10)
   ========================================================================== */

/* Urgência honesta (estoque real baixo) */
.po-low-stock {
    display: inline-block;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #c2410c;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    margin: 0 0 14px;
}

/* Botão Comprar Agora (secundário, abaixo do Adicionar ao Carrinho) */
.woocommerce div.product form.cart .po-buy-now {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-top: 10px !important;
    background: var(--color-secondary, #0B2447) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 15px 10px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    cursor: pointer !important;
    transition: background-color 0.2s, transform 0.15s !important;
    box-shadow: none !important;
}
.woocommerce div.product form.cart .po-buy-now:hover {
    background: var(--color-secondary-hover, #081C38) !important;
    transform: translateY(-1px) !important;
}
.woocommerce div.product form.cart .po-buy-now::before { display: none !important; }

/* Botão Comprar pelo WhatsApp */
.po-wa-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
    padding: 14px 10px;
    background: #25D366;
    color: #fff !important;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background-color 0.2s, transform 0.15s;
}
.po-wa-buy:hover { background: #1eb857; transform: translateY(-1px); color: #fff !important; }
.po-wa-buy svg { flex-shrink: 0; }

/* Chips de formas de pagamento */
.po-pay-chips {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}
.po-pay-chips-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.po-pay-chips img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
    opacity: 0.85;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    aspect-ratio: auto !important;
}

/* Barra fixa de compra (só mobile) */
.po-sticky-atc {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 62px; /* acima da barra de navegação inferior do app */
    z-index: 9998;
    background: #fff;
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -6px 20px rgba(0,0,0,0.10);
    padding: 10px 14px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transform: translateY(130%);
    transition: transform 0.25s ease;
}
.po-sticky-atc.show { transform: translateY(0); }
.po-sticky-info { display: flex; flex-direction: column; min-width: 0; }
.po-sticky-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.po-sticky-price { font-size: 16px; font-weight: 800; color: var(--brand); }
.po-sticky-price del { font-size: 12px; color: var(--gray-400); }
.po-sticky-btn {
    flex-shrink: 0;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}
@media (max-width: 768px) {
    .po-sticky-atc { display: flex; }
    /* sobe o botão do WhatsApp quando a barra está visível, pra não sobrepor */
    body.po-sticky-on .whatsapp-float-btn { bottom: 145px !important; }
}

/* ==========================================================================
   📣  4M&C — FAIXA CTA "FALE COM ESPECIALISTA" NA HOME (V11)
   ========================================================================== */
.po-cta-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(120deg, #051021 0%, #0B2447 55%, #29ABE2 130%);
    border-radius: 16px;
    padding: 30px 34px;
    margin: 10px 0 44px;
    color: #fff;
    box-shadow: 0 10px 30px rgba(14, 60, 55, 0.25);
}
.po-cta-text h2 {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 6px;
    color: #fff;
    letter-spacing: -0.02em;
}
.po-cta-text p {
    margin: 0;
    font-size: 14px;
    opacity: 0.88;
    max-width: 580px;
    line-height: 1.6;
}
.po-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 800;
    font-size: 15px;
    padding: 15px 24px;
    border-radius: 12px;
    flex-shrink: 0;
    transition: transform 0.15s, background-color 0.2s;
}
.po-cta-btn:hover { background: #1eb857; transform: translateY(-2px); color: #fff !important; }

/* ==========================================================================
   📱  4M&C — MOBILE FINAL V11 (BLOCO AUTORITATIVO — fim do arquivo)
   Correções de responsividade que precisam vencer todas as regras acima.
   ========================================================================== */
@media (max-width: 992px) {
    /* Sidebar de filtros nunca deve empilhar em cima dos produtos no mobile */
    .mc4-shop-sidebar { display: none !important; }
    .mc4-shop-layout { display: block !important; }
    .shop-content-wrapper { width: 100% !important; }
}
@media (max-width: 768px) {
    html, body { overflow-x: hidden !important; max-width: 100vw !important; }

    /* Mega menu é recurso de desktop */
    .mc4-mega { display: none !important; }

    /* Blocos novos (V9/V10/V11) no celular */
    .po-home-seo { margin-top: 28px; padding-top: 22px; }
    .po-home-seo h2 { font-size: 17px; }
    .po-cta-strip {
        flex-direction: column;
        text-align: center;
        padding: 24px 18px;
        gap: 14px;
        margin: 6px 0 30px;
    }
    .po-cta-text p { max-width: 100%; }
    .po-cta-btn { width: 100%; justify-content: center; }

    /* Barra fixa de compra acima da navegação inferior, sem sobrepor */
    .po-sticky-atc { bottom: 66px; }
    body.po-sticky-on .po-cookie { bottom: 145px !important; }

    /* Página de produto: reexibe o card de confiança (compacto) — no celular
       ele não divide coluna com a galeria, então cabe bem no fluxo */
    .po-product-seals { display: block !important; margin-top: 18px; }
    .po-seals-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
    .po-seal-txt strong { font-size: 12px !important; }
    .po-seal-txt span { font-size: 10px !important; }
    .po-seal-ico { width: 32px !important; height: 32px !important; }
    .po-seal-ico svg { width: 17px !important; height: 17px !important; }

    /* Botões de compra confortáveis para o dedo */
    .woocommerce div.product form.cart .single_add_to_cart_button,
    .woocommerce div.product form.cart .po-buy-now,
    .po-wa-buy { min-height: 48px; }

    /* Rede de segurança geral: a descrição do produto vem de uma API externa
       e pode conter qualquer HTML com largura fixa embutida (divs, imagens,
       spans com style="width:...px"). Isso força tudo a respeitar a largura
       da tela, evitando que o conteúdo "vaze" pra fora e corte texto. */
    .woocommerce div.product .summary,
    .woocommerce div.product .summary * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .woocommerce div.product .summary img {
        height: auto !important;
    }

    /* Tabela de configurações/ficha técnica do produto (vem de HTML colado na
       descrição, muitas vezes com largura fixa embutida) — no mobile, converte
       de tabela em lista empilhada em vez de depender de rolagem horizontal,
       que corta o texto quando o conteúdo tem estilo inline de largura fixa. */
    .woocommerce div.product .summary table,
    .woocommerce div.product .summary table tbody,
    .woocommerce div.product .summary table tr,
    .woocommerce div.product .summary table th,
    .woocommerce div.product .summary table td,
    .woocommerce div.product .woocommerce-tabs table,
    .woocommerce div.product .woocommerce-tabs table tbody,
    .woocommerce div.product .woocommerce-tabs table tr,
    .woocommerce div.product .woocommerce-tabs table th,
    .woocommerce div.product .woocommerce-tabs table td,
    .woocommerce div.product .summary .entry-content table,
    .woocommerce div.product .summary .entry-content table th,
    .woocommerce div.product .summary .entry-content table td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }
    .woocommerce div.product .summary table td,
    .woocommerce div.product .summary table th,
    .woocommerce div.product .woocommerce-tabs table td,
    .woocommerce div.product .woocommerce-tabs table th {
        border-bottom: 1px solid var(--slate-200, #e2e8f0) !important;
        padding: 10px 12px !important;
    }
    .woocommerce div.product .summary table th,
    .woocommerce div.product .woocommerce-tabs table th {
        background: var(--slate-50, #f8f9fa) !important;
        font-weight: 700 !important;
        border-bottom: none !important;
        padding-bottom: 2px !important;
    }

    /* Rodapé: colunas empilhadas com respiro */
    .footer-grid { grid-template-columns: 1fr !important; gap: 26px !important; }
    .po-footer-trust { gap: 14px 18px; }

    /* Resumo do pedido (checkout) — miniatura menor, texto não estoura (V13) */
    table.shop_table.woocommerce-checkout-review-order-table { font-size: 13px !important; }
    .po-checkout-item-thumb img { width: 38px !important; height: 38px !important; }
    .po-checkout-item-name { font-size: 13px !important; }
    table.shop_table.woocommerce-checkout-review-order-table tfoot .order-total td,
    table.shop_table.woocommerce-checkout-review-order-table tfoot .order-total th {
        font-size: 17px !important;
        padding: 14px 8px !important;
    }
}
@media (max-width: 480px) {
    .home-categories-grid { gap: 14px !important; }
    .cat-circle-img { width: 64px !important; height: 64px !important; }
    .cat-circle-title { font-size: 11px !important; }
    .hero-content h2 { font-size: 21px !important; }
    .po-sticky-name { max-width: 150px; }
}
.po-seal-ico {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
    background: rgba(41,171,226,0.10); color: var(--brand);
    display: flex; align-items: center; justify-content: center;
}
.po-seal-ico svg { width: 20px; height: 20px; }
.po-seal-txt strong { display: block; font-size: 13px; color: var(--foreground); font-weight: 700; line-height: 1.2; }
.po-seal-txt span { font-size: 11px; color: var(--muted); }

/* Coloca os selos na coluna da galeria e elimina o espao vazio (desktop) */
@media (min-width: 769px) {
    .woocommerce div.product > .woocommerce-product-gallery,
    .woocommerce div.product > div.images { position: static !important; grid-row: 1 !important; }
    .woocommerce div.product > .summary,
    .woocommerce div.product > .summary.entry-summary { grid-row: 1 / span 2 !important; }
    .po-product-seals { grid-column: 1 !important; grid-row: 2 !important; align-self: start !important; margin-top: 22px; }
}
/* No celular a coluna  nica, no h vazio: escondemos os selos (o card de
   benefcios j cobre isso) */
/* (regra antiga que escondia os selos no mobile removida na V22 — ela vinha
   DEPOIS da correção da V11 no arquivo e a anulava; selos agora aparecem
   compactos no celular, estilizados no bloco V11 acima) */

/* ---- Faixa de selos no rodap ---- */
.po-footer-trust {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 16px 40px; padding: 26px 0; margin-bottom: 22px;
    border-top: 1px solid rgba(255,255,255,0.10);
    border-bottom: 1px solid rgba(255,255,255,0.10);
}
.po-ft-item { display: flex; align-items: center; gap: 12px; }
.po-ft-ico {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
    background: rgba(41,171,226,0.15); color: var(--brand);
    display: flex; align-items: center; justify-content: center;
}
.po-ft-ico svg { width: 22px; height: 22px; }
.po-ft-txt { display: flex; flex-direction: column; font-size: 13px; color: #cfd8dc; font-weight: 700; line-height: 1.25; }
.po-ft-txt b { font-size: 11px; color: #8fa0a8; font-weight: 500; }
@media (max-width: 768px) {
    .po-footer-trust { gap: 16px 20px; }
    .po-ft-txt { font-size: 12px; }
}

/* ==========================================================================
     4M&C  BANNER DE COOKIES (LGPD) V17
   ========================================================================== */
.po-cookie {
    position: fixed; left: 50%; bottom: 20px;
    transform: translate(-50%, 20px);
    width: calc(100% - 40px); max-width: 920px; z-index: 100000;
    background: #fff; border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.20);
    padding: 18px 22px; display: flex; align-items: center; gap: 18px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.po-cookie.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.po-cookie-text { font-size: 13px; color: var(--muted); line-height: 1.6; flex: 1; }
.po-cookie-text a { color: var(--brand); font-weight: 600; text-decoration: underline; }
.po-cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.po-cookie-btn {
    border: none; cursor: pointer; border-radius: 8px; padding: 10px 22px;
    font-size: 14px; font-weight: 700; background: var(--brand); color: #fff;
    transition: background-color 0.2s;
}
.po-cookie-btn:hover { background: var(--brand-hover); }
.po-cookie-btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.po-cookie-btn.ghost:hover { background: var(--muted-bg); color: var(--foreground); }
@media (max-width: 768px) {
    .po-cookie { flex-direction: column; align-items: stretch; bottom: 78px; gap: 12px; padding: 16px; }
    .po-cookie-actions { justify-content: stretch; }
    .po-cookie-btn { flex: 1; }
}

/* ==========================================================================
     4M&C  HOME COMO VITRINE (menos "catlogo") V18
   Na home escondemos os controles de loja (contagem/ordenar), que do cara
   de catlogo. O catlogo completo fica nas categorias e no menu.
   ========================================================================== */
.home .woocommerce-result-count,
.home .woocommerce-ordering { display: none !important; }
/* Menos espao vazio no topo da grade da home sem esses controles */
.home .shop-content-wrapper > .woocommerce-notices-wrapper { margin-bottom: 0; }

/* ==========================================================================
     4M&C  CHECKOUT CLSSICO: LAYOUT LIMPO V24
   Corrige o "torto" do [woocommerce_checkout]: formulrio  ESQUERDA e
   resumo do pedido  DIREITA (desktop); resetando text-align do Gutenberg.
   ========================================================================== */

/* 1. Reset Forado do Container e Alinhamento */
.woocommerce-checkout .entry-content > .wp-block-shortcode,
.woocommerce-checkout .entry-content > div {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: left !important;
}

/* Desfaz o grid interno frgil  os campos voltam a ocupar a largura toda */
.woocommerce-checkout #customer_details.col2-set,
.woocommerce-checkout #customer_details,
.woocommerce-checkout .col2-set { 
    display: block !important; 
    width: 100% !important;
    text-align: left !important;
}
.woocommerce-checkout .col2-set > .col-1,
.woocommerce-checkout .col2-set > .col-2 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
}
/* clearfix para os campos meia-largura (Nome/Sobrenome) */
.woocommerce-checkout #customer_details::after { content: ""; display: table; clear: both; }

/* Reset dos Ttulos */
.woocommerce-checkout h3, 
.woocommerce-checkout #order_review_heading {
    text-align: left !important;
    width: 100% !important;
}

/* Fora os campos a no ficarem espremidos no meio */
.woocommerce-checkout .form-row {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2. Desktop e Mobile: 1 coluna s (resumo do pedido embaixo) */
.woocommerce-checkout form.checkout,
.woocommerce-checkout form.woocommerce-checkout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

.woocommerce-checkout form.checkout > #customer_details {
    margin-bottom: 40px !important;
    width: 100% !important;
}

.woocommerce-checkout form.checkout > #order_review_heading {
    margin: 0 0 16px !important;
    width: 100% !important;
}

.woocommerce-checkout form.checkout > #order_review {
    margin-bottom: 0 !important;
    width: 100% !important;
}

/* 3. Campos Nome/Sobrenome e padro do WooCommerce */
.woocommerce-checkout .form-row-first { width: 48% !important; clear: left; float: left; }
.woocommerce-checkout .form-row-last  { width: 48% !important; float: right; }
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row.notes  { width: 100% !important; clear: both; }

/* Correo para os campos do plugin Brazilian Market */
.woocommerce-checkout p#billing_cpf_field,
.woocommerce-checkout p#billing_cnpj_field,
.woocommerce-checkout p#billing_postcode_field,
.woocommerce-checkout p#billing_address_1_field,
.woocommerce-checkout p#billing_neighborhood_field,
.woocommerce-checkout p#billing_city_field,
.woocommerce-checkout p#billing_state_field,
.woocommerce-checkout p#billing_phone_field,
.woocommerce-checkout p#billing_email_field { 
    width: 100% !important; 
    float: none !important;
    clear: both !important;
}

/* Deixa Nmero e Complemento lado a lado */
.woocommerce-checkout p#billing_number_field { width: 48% !important; float: left !important; clear: left !important; }
.woocommerce-checkout p#billing_address_2_field { width: 48% !important; float: right !important; clear: right !important; }

/* 4. Mobile: uma coluna s (grid desativado abaixo de 993px automaticamente) */
@media (max-width: 992px) {
    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last { float: none; width: 100% !important; }
    .woocommerce-checkout form.checkout { display: block !important; }
}

/* Sidebar Layout */.mc4-shop-layout { display: flex; gap: 32px; align-items: flex-start; margin-bottom: 40px; } .mc4-shop-sidebar { width: 25%; flex-shrink: 0; } .shop-content-wrapper { width: 75%; flex-grow: 1; } .mc4-shop-sidebar .widget { background: #fff; border-radius: 8px; padding: 24px; margin-bottom: 24px; border: 1px solid var(--gray-200); } .mc4-shop-sidebar .widget-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; color: var(--gray-800); } @media (max-width: 992px) { .mc4-shop-layout { flex-direction: column; } .mc4-shop-sidebar, .shop-content-wrapper { width: 100%; } }


/* ==========================================================================
   MELHORIAS VISUAIS - SIDEBAR DE FILTROS WOOCOMMERCE
   ========================================================================== */

/* Fora a fonte principal (Inter) no sidebar para evitar serifa */
.mc4-shop-sidebar,
.mc4-shop-sidebar * {
    font-family: 'Inter', Arial, sans-serif !important;
}

/* Ttulos do Sidebar */
.mc4-shop-sidebar .wc-block-components-panel__button,
.mc4-shop-sidebar h1,
.mc4-shop-sidebar h2,
.mc4-shop-sidebar h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--foreground) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 !important;
    margin-bottom: 12px !important;
    border: none !important;
    background: transparent !important;
}

/* Remover bordas das divises dos blocos do Woo */
.wc-block-components-panel {
    border: none !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
}

/* Boto Limpar Filtros */
.mc4-shop-sidebar .wc-block-components-button {
    background-color: var(--muted-bg) !important;
    color: var(--muted) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border: none !important;
    width: 100% !important;
    justify-content: center;
    padding: 10px !important;
    margin-bottom: 16px !important;
}
.mc4-shop-sidebar .wc-block-components-button:hover {
    background-color: var(--border) !important;
    color: var(--foreground) !important;
}

/* Checkboxes modernos usando as cores do tema */
.mc4-shop-sidebar .wc-block-components-checkbox-list input[type="checkbox"] {
    appearance: none;
    background-color: #fff;
    margin: 0 10px 0 0;
    font: inherit;
    color: currentColor;
    width: 1.25em !important;
    height: 1.25em !important;
    border: 2px solid var(--border) !important;
    border-radius: 4px !important;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.mc4-shop-sidebar .wc-block-components-checkbox-list input[type="checkbox"]::before {
    content: "";
    width: 0.7em;
    height: 0.7em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em white;
    background-color: white;
    transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.mc4-shop-sidebar .wc-block-components-checkbox-list input[type="checkbox"]:checked {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}

.mc4-shop-sidebar .wc-block-components-checkbox-list input[type="checkbox"]:checked::before {
    transform: scale(1);
}

/* Lista de Categorias e Atributos */
.wc-block-components-checkbox-list li {
    margin-bottom: 10px !important;
}
.wc-block-components-checkbox-list label {
    font-size: 14px !important;
    color: var(--muted) !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
}
.wc-block-components-checkbox-list label:hover {
    color: var(--brand) !important;
}

/* Range slider do preo (Barra e Bolinhas) */
.wc-block-components-price-slider__range-bar {
    background: var(--brand) !important;
}
.wc-block-components-price-slider__range-control {
    --track-background: var(--border) !important;
}
.wc-block-components-price-slider__range-control-thumb {
    background: #fff !important;
    border: 2px solid var(--brand) !important;
    width: 18px !important;
    height: 18px !important;
}

/* Caixinhas de preo (Min e Max) */
.wc-block-components-price-slider__amount {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
    color: var(--foreground) !important;
    font-weight: 600;
}

/* Etiquetas dos filtros ativos (Chips) */
.wc-block-components-filter-badge {
    background-color: var(--muted-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--foreground) !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    padding: 4px 12px !important;
    margin-right: 6px !important;
    margin-bottom: 6px !important;
}
.wc-block-components-filter-badge svg {
    fill: var(--muted) !important;
}

/* Ajuste na caixa principal do Widget para remover a sombra dupla se houver */
.mc4-shop-sidebar .widget {
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border-color: var(--border);
}

/* ==========================================================================
   🏷️  4M&C — FILTRO DE MARCA na sidebar da loja (V15)
   ========================================================================== */
.po-brand-filter-list { list-style: none; margin: 0; padding: 0; }
.po-brand-filter-item { margin-bottom: 4px; }
.po-brand-filter-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    text-decoration: none;
    color: var(--gray-700, #374151);
    font-size: 14px;
    border-radius: 6px;
    transition: background-color 0.15s;
}
.po-brand-filter-item a:hover { background: var(--gray-50, #f8f9fa); color: var(--brand); }
.po-brand-checkbox {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 1.5px solid var(--gray-300, #cbd5e1);
    border-radius: 4px;
    position: relative;
}
.po-brand-filter-item.checked .po-brand-checkbox {
    background: var(--brand);
    border-color: var(--brand);
}
.po-brand-filter-item.checked .po-brand-checkbox::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.po-brand-filter-item.checked a { color: var(--brand); font-weight: 700; }
.po-brand-count { margin-left: auto; font-size: 12px; color: var(--gray-400, #9ca3af); }

/* ==========================================================================
   AJUSTES FINAIS - PRODUTOS, FILTROS E RESPONSIVIDADE (V33)
   ========================================================================== */

/* Caixas de Preo do Filtro: aumentar espao e corrigir corte */
.wc-block-components-price-slider__amount {
    min-width: 75px !important;
    text-align: center;
    padding: 8px 6px !important;
    font-size: 14px !important;
}

/* Boto Limpar Filtros: forar visual */
.mc4-shop-sidebar .wc-block-components-button.wc-block-components-button {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border-radius: 6px !important;
    padding: 12px !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}
.mc4-shop-sidebar .wc-block-components-button.wc-block-components-button:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Ttulo e Texto do cabealho da loja (Exibindo um nico resultado) */
.woocommerce-result-count {
    background: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    font-size: 14px;
    color: #64748b;
    margin-bottom: 24px !important;
}
.woocommerce-ordering select {
    padding: 10px 32px 10px 16px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background-color: #fff;
    font-size: 14px;
    color: #475569;
}

/* Cards de Produtos Premium */
.woocommerce ul.products li.product {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease !important;
    padding: 0 0 16px 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    text-align: center;
    border: 1px solid #f1f5f9;
}
.woocommerce ul.products li.product:hover {
    box-shadow: 0 12px 24px rgba(0,0,0,0.1) !important;
    transform: translateY(-4px) !important;
}

/* Imagem do Produto */
.woocommerce ul.products li.product a img {
    margin: 0 0 16px 0 !important;
    border-radius: 12px 12px 0 0 !important;
    width: 100% !important;
    object-fit: contain;
    padding: 24px;
    background: #fff;
}

/* Ttulo e Preo do Produto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    padding: 0 16px !important;
    margin-bottom: 12px !important;
    min-height: 42px;
}
.woocommerce ul.products li.product .price {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--brand) !important;
    padding: 0 16px !important;
    margin-bottom: 16px !important;
}

/* Boto Comprar do Produto: Full Width */
.woocommerce ul.products li.product .button {
    margin: auto 16px 0 16px !important;
    width: calc(100% - 32px) !important;
    background: var(--brand) !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    padding: 12px !important;
    text-transform: uppercase;
    font-size: 13px !important;
    border: none !important;
}
.woocommerce ul.products li.product .button:hover {
    background: var(--brand-hover) !important;
}

/* Responsividade Extra para Mobile */
@media (max-width: 992px) {
    .mc4-shop-sidebar {
        background: #f8fafc;
        padding: 16px;
        border-radius: 8px;
        margin-bottom: 24px;
        border: 1px solid #e2e8f0;
    }
    .mc4-shop-sidebar .widget {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 0 16px 0 !important;
        margin-bottom: 16px !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    
    .woocommerce ul.products[class*="columns-"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    .woocommerce ul.products li.product {
        margin-bottom: 0 !important;
    }
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 12px !important;
        min-height: 36px;
        padding: 0 8px !important;
    }
    .woocommerce ul.products li.product .price {
        font-size: 15px !important;
        padding: 0 8px !important;
    }
    .woocommerce ul.products li.product .button {
        width: calc(100% - 16px) !important;
        margin: auto 8px 0 8px !important;
        padding: 8px !important;
        font-size: 11px !important;
    }
    .woocommerce ul.products li.product a img {
        padding: 12px;
    }
}

/* ==========================================================================
   FIX LOGIN (V33)
   ========================================================================== */
.auth-top-header {
    text-align: center;
    margin-bottom: 24px;
}
.auth-top-header h3 {
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 8px;
}
.auth-top-header p {
    color: #64748b;
}

#customer_login.mc4-centered-auth {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}
#customer_login.mc4-centered-auth .u-column1,
#customer_login.mc4-centered-auth .u-column2 {
    width: 100% !important;
    max-width: 420px !important;
    background: #ffffff !important;
    padding: 32px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    border: 1px solid #f1f5f9 !important;
    margin: 0 auto !important;
    float: none !important;
}

.auth-separator {
    text-align: center;
    position: relative;
    margin: 24px 0;
}
.auth-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid #e2e8f0;
    z-index: 1;
}
.auth-separator span {
    background: #fff;
    padding: 0 12px;
    color: #94a3b8;
    font-size: 13px;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
}

.auth-switch-link {
    text-align: center;
    margin-top: 24px;
}
.auth-switch-link p {
    color: #475569;
}
.auth-switch-link a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: underline;
}

/* ==========================================================================
   HIDE SEO H1
   ========================================================================== */
.mc4-seo-h1 { display: none !important; margin: 0; padding: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   FIX: BOTOES DE PEDIDOS E LOGIN V37
   ========================================================================== */
.woocommerce-orders-table__cell-order-actions { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; justify-content: flex-end !important; }
.woocommerce-orders-table__cell-order-actions .button { margin: 0 !important; }

/* ==========================================================================
   FIX: ALINHAMENTO DOS BOTOES DE FRETE (CHECKOUT E CARRINHO)
   ========================================================================== */
#shipping_method,
.woocommerce-shipping-methods {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#shipping_method li,
.woocommerce-shipping-methods li {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    padding: 12px 16px !important;
    background: #fff !important;
    border: 1px solid #e8ecf0 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}
#shipping_method li:hover,
.woocommerce-shipping-methods li:hover {
    border-color: #29ABE2 !important;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(41, 171, 226, 0.14) !important;
}
#shipping_method li input[type="radio"],
.woocommerce-shipping-methods li input[type="radio"] {
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
    appearance: radio !important;
    -webkit-appearance: radio !important;
    flex-shrink: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
#shipping_method li label,
.woocommerce-shipping-methods li label {
    margin: 0 !important;
    display: inline-block !important;
    font-size: 14px !important;
    color: #333 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
}
/* ==========================================================================
   URGENTE: FIX MOJIBAKE & CHECKOUT (V45)
   ========================================================================== */

/* 1. Esconder os ícones corrompidos antigos do WooCommerce e colocar o ícone limpo */
.woocommerce-info::before, 
.woocommerce-message::before, 
.woocommerce-error::before {
    content: '\e028' !important; /* Ícone padrão do WooCommerce */
    font-family: 'WooCommerce' !important;
}

/* 2. Sobrescrever completamente o texto corrompido dos selos do carrinho */
.single-product div.product form.cart::after { content: none !important; }

/* 3. Refazer o layout de Opções de Frete (Shipping) URGENTE */
#shipping_method li, .woocommerce-shipping-methods li {
    background: #fff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: all 0.2s ease !important;
}

#shipping_method li:hover, .woocommerce-shipping-methods li:hover {
    border-color: var(--color-primary) !important;
    background: #e8f8f5 !important;
}

#shipping_method li input[type="radio"],
.woocommerce-shipping-methods li input[type="radio"] {
    margin: 0 !important;
    flex-shrink: 0 !important;
    accent-color: var(--color-primary) !important;
}

#shipping_method li label,
.woocommerce-shipping-methods li label {
    margin: 0 !important;
    display: flex !important;
    flex-grow: 1 !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    font-size: 14px !important;
    color: var(--gray-800) !important;
}

/* Esconder qualquer frete falso ou forçar grátis caso seja Retirada no Local */
#shipping_method li label .woocommerce-Price-amount {
    color: var(--color-secondary) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   📱  4M&C — MOBILE V22: RECUPERAÇÃO DE LARGURA ÚTIL (fim do arquivo)
   Medido ao vivo em tela de 375px: o conteúdo do produto tinha só 213px
   (57% da tela) por causa de paddings empilhados em 5 camadas:
   inner-container(20) + wrapper(30) + product(15) + summary(10) + img(20).
   Este bloco colapsa essas camadas SÓ no mobile.
   ========================================================================== */
@media (max-width: 768px) {
    /* Camada 1: container externo */
    .shop-inner-container { padding: 0 10px !important; }

    /* Camada 2: card branco da loja/produto */
    .shop-content-wrapper { padding: 14px 12px !important; }

    /* Camada 3: wrapper do produto */
    .woocommerce div.product { padding: 10px !important; }

    /* Camada 4: galeria e resumo sem padding próprio */
    .woocommerce div.product div.images { padding: 0 !important; }
    .woocommerce div.product .summary { padding: 6px 0 0 !important; }

    /* Camada 5: foto do produto com respiro menor (foto maior na tela) */
    .woocommerce div.product div.images img { padding: 10px !important; }

    /* Título do produto: nomes longos ocupavam 250px de altura */
    .woocommerce div.product .product_title {
        font-size: 18px !important;
        line-height: 1.35 !important;
        margin-bottom: 12px !important;
    }

    /* Botão principal não quebra em 2 linhas (media 86px de altura) */
    .woocommerce div.product form.cart .single_add_to_cart_button {
        font-size: 15px !important;
        padding: 14px 10px !important;
        letter-spacing: 0.02em !important;
        white-space: nowrap !important;
    }

    /* Breadcrumb: 1 linha com reticências (ocupava 82px em 4 linhas) */
    .woocommerce-breadcrumb {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* Home: cards de produto e círculos de categoria com fotos maiores */
    .woocommerce ul.products li.product img { padding: 10px !important; }
    .cat-circle-img { padding: 8px !important; }
}

/* ==========================================================================
   ♿  4M&C — ACESSIBILIDADE V27 (relatório PageSpeed/Lighthouse)
   Corrige os itens apontados: nomes acessíveis, contraste (WCAG AA 4.5:1)
   e áreas de toque. O verde-teal #29ABE2 sobre branco tem contraste 2.6:1
   (reprova); o tom #0E6C93 mantém a identidade e passa (4.6:1).
   ========================================================================== */

/* Rótulos só para leitores de tela (labels da busca) */
.po-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- CONTRASTE: textos teal sobre fundo claro (aprovam em AA) --- */
.rec-price,
.woocommerce ul.products li.product .price,
.pix-label,
.home-categories-header a,
.shipping-calculator-price,
.po-sticky-price {
    color: #0E6C93 !important;
}

/* Botões sólidos: ciano é a cor de ação (Painel Claro) — navy fica só pra texto/rodapé */
.woocommerce ul.products li.product .button,
.rec-add-btn,
.po-cookie-btn:not(.ghost),
.po-sticky-btn,
.header-search .search-submit {
    background-color: #0891C2 !important;
}
.woocommerce ul.products li.product .button:hover,
.rec-add-btn:hover,
.po-cookie-btn:not(.ghost):hover,
.po-sticky-btn:hover {
    background-color: #076E93 !important;
}

/* Faixa "Recomendados": fundo mais profundo para o texto branco aprovar */
.rec-sidebar-bg.shape-1 { background-color: #0E6C93 !important; }
.rec-sidebar { background-color: #0E6C93 !important; }

/* CTA WhatsApp: verde mais profundo (o #25D366 com branco tem 2.1:1) */
.po-cta-btn, .po-wa-buy { background-color: #15803d !important; }
.po-cta-btn:hover, .po-wa-buy:hover { background-color: #116631 !important; }

/* Links do banner de cookies sobre fundo verde-claro */
.po-cookie-text a { color: #082D57 !important; }

/* --- ÁREAS DE TOQUE: mínimo ~44px nos controles pequenos --- */
.hero-dots button,
.hero-dot {
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 8px !important;
    box-sizing: content-box !important;
    background-clip: content-box !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================================
   ♿  V29 — CONTRASTE: últimos 2 itens do Lighthouse
   1) O parágrafo da faixa "Recomendados" tinha opacity .9 (reprovava por pouco)
   2) Os botões Adicionar/Comprar usavam GRADIENTE (background-image), que
      cobria o background-color acessível da V27 — o shorthand `background`
      abaixo elimina o gradiente e aplica o teal que passa no WCAG AA.
   ========================================================================== */
.rec-sidebar-content p { opacity: 1 !important; }

.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce-page .cart-collaterals .checkout-button {
    background: #0B2447 !important;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover,
.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.woocommerce-page .cart-collaterals .checkout-button:hover {
    background: #082D57 !important;
}

/* ==========================================================================
   📱  V32 — CORREÇÕES DE OVERFLOW MOBILE (calculadora de frete + selos de
   pagamento). O plugin de frete (infixs-correios-automatico) e o selo de
   pagamento grande (provavelmente injetado pelo plugin do Mercado Pago) não
   estão nesta cópia local do projeto — foram instalados direto no servidor.
   Por isso as regras abaixo usam seletores GENÉRICOS (por padrão de classe/
   id, não nome exato), pra funcionar não importa a origem do elemento.
   ========================================================================== */
@media (max-width: 768px) {

    /* --- Calculadora de frete: empilha input + botão em vez de espremer --- */
    [class*="shipping-calc" i], [class*="shipping_calc" i],
    [id*="shipping-calc" i], [id*="shipping_calc" i],
    [class*="calcul" i][class*="frete" i], [id*="calc_shipping" i],
    .woocommerce-shipping-calculator, .shipping-calculator-form {
        display: flex !important;
        flex-wrap: wrap !important;
        max-width: 100% !important;
    }
    [class*="shipping-calc" i] input, [class*="shipping_calc" i] input,
    [id*="shipping-calc" i] input, [id*="shipping_calc" i] input,
    .woocommerce-shipping-calculator input,
    .shipping-calculator-form input {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 8px !important;
    }
    [class*="shipping-calc" i] button, [class*="shipping_calc" i] button,
    [id*="shipping-calc" i] button, [id*="shipping_calc" i] button,
    .woocommerce-shipping-calculator button,
    .shipping-calculator-form button,
    .shipping-calculator-button {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
    }

    /* --- Rede de segurança geral: nada no rodapé pode vazar a largura da
       tela, seja lá de onde vier (nosso código ou plugin de terceiros) --- */
    footer, .site-footer, .footer-bottom, footer * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    footer img, .site-footer img {
        max-width: 90px !important;
        height: auto !important;
        width: auto !important;
    }
    .footer-payments,
    [class*="footer-payment" i], [class*="payment-method" i],
    [class*="payment-badge" i], [class*="payment-seal" i] {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
}

/* ==========================================================================
   🏷️  4M&C — FAIXA DE TAGLINE + MARCAS (V35)
   Logos ENVIADOS pelo usuário no Personalizador (imagens no próprio domínio,
   cacheadas). Grayscale discreto que colore no hover — visual profissional
   e uniforme mesmo com logos de cores/tamanhos diferentes.
   ========================================================================== */
.po-brands-strip {
    max-width: 1200px;
    margin: 8px auto 0;
    padding: 22px 20px 6px;
    text-align: center;
}
.po-brands-tagline {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--muted, #64748b);
    letter-spacing: 0.02em;
}
.po-brands-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.po-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.po-brand img {
    height: 38px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.2s ease;
}
.po-brand:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .po-brands-strip { padding: 16px 14px 2px; }
    .po-brands-tagline { font-size: 13px; margin-bottom: 14px; }
    .po-brands-logos { gap: 26px; }
    .po-brand img { height: 28px; max-width: 100px; }
}

/* ==========================================================================
   ⭐  4M&C — VITRINE "DESTAQUES DA LOJA" (V35)
   Só renderiza quando há produtos marcados como Destaque (query leve, 4 itens).
   ========================================================================== */
.po-featured-section {
    max-width: 1200px;
    margin: 20px auto 44px;
    padding: 0 20px;
}
.po-featured-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 22px;
}
.po-featured-head h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--foreground);
    margin: 0;
    letter-spacing: -0.02em;
}
.po-featured-vermais {
    font-size: 14px;
    font-weight: 700;
    color: #0E6C93;
    text-decoration: none;
    white-space: nowrap;
}
.po-featured-vermais:hover { text-decoration: underline; }
/* Grid 2 colunas (não 4) — cards mais largos, formato "ficha técnica"
   horizontal (imagem à esquerda, conteúdo à direita), estruturalmente
   diferente do card vertical/centralizado do site irmão Portal One. */
.po-featured-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.po-featured-card {
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-left: 3px solid transparent;
    border-radius: 10px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.po-featured-card:hover {
    box-shadow: 0 10px 28px rgba(11,36,71,0.10);
    border-left-color: #0891C2;
    transform: translateY(-2px);
}
.po-featured-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}
.po-featured-img {
    position: relative;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.po-featured-img img {
    max-height: 80px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}
.po-featured-tag {
    position: absolute;
    top: -6px;
    left: -6px;
    background: #0B2447;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 5px;
}
.po-featured-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.po-featured-card h3 {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--foreground);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.po-featured-price {
    font-size: 17px;
    font-weight: 800;
    color: #0E6C93;
}
.po-featured-btn {
    flex-shrink: 0;
    display: inline-block;
    text-align: center;
    background: #0891C2;
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 16px;
    border-radius: 8px;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}
.po-featured-btn:hover { background: #076E93; }

@media (max-width: 900px) {
    .po-featured-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .po-featured-section { padding: 0 12px; }
    .po-featured-head h2 { font-size: 19px; }
    .po-featured-grid { gap: 12px; }
    .po-featured-card { flex-wrap: wrap; }
    .po-featured-btn { width: 100%; margin-top: 8px; }
}