/*
Theme Name: Vitrine PRO
Theme URI: https://example.com/vitrine-pro
Author: Vitrine PRO
Description: Tema WordPress para WooCommerce com visual de loja de ferramentas/varejo, preço no Pix, parcelamento e selos de confiança. Pronto para integrar Mercado Pago e Melhor Envio.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: vitrine-pro
Requires Plugins: woocommerce
*/

/* =========================================================
   RESET & BASE
   ========================================================= */
:root{
    --vp-primary: #00a651;
    --vp-primary-dark: #00823f;
    --vp-primary-light: #e6f7ee;
    --vp-accent: #e6393b;
    --vp-accent-2: #ffc72c;
    --vp-bg: #ffffff;
    --vp-ink: #1f2937;
    --vp-gray: #6b7280;
    --vp-gray-light: #f3f4f6;
    --vp-border: #e5e7eb;
    --vp-radius: 8px;
    --vp-radius-pill: 999px;
    --vp-max-width: 1280px;
}

*, *::before, *::after{ box-sizing: border-box; }

body{
    margin:0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color:#1f2937;
    background:var(--vp-bg);
    line-height:1.5;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0 0 .5em; font-weight:700; }

.vp-container{
    max-width: var(--vp-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.vp-btn{
    display:inline-block;
    background:var(--vp-primary);
    color:#fff;
    padding:10px 20px;
    border-radius:var(--vp-radius);
    font-weight:600;
    border:none;
    cursor:pointer;
    transition:background .2s ease;
}
.vp-btn:hover{ background:var(--vp-primary-dark); color:#fff; }
.vp-btn-accent{ background:var(--vp-accent); }
.vp-btn-accent:hover{ background:#c7241b; }

.vp-section{ padding:40px 0; }
.vp-section-title{
    font-size:1.5rem;
    margin-bottom:24px;
    text-align:center;
    color:var(--vp-primary);
}

/* =========================================================
   MARQUEE / TICKER DE PROMOCOES
   ========================================================= */
.vp-marquee{
    background:var(--vp-primary);
    color:#fff;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.02em;
    overflow:hidden;
    white-space:nowrap;
    padding:8px 0;
}
.vp-marquee-track{
    display:inline-flex;
    align-items:center;
    animation:vp-marquee-scroll 28s linear infinite;
}
.vp-marquee-track span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 28px;
    position:relative;
}
.vp-marquee-track span::after{
    content:"";
    position:absolute;
    right:0;
    width:4px; height:4px;
    border-radius:50%;
    background:rgba(255,255,255,.6);
}
.vp-marquee-track svg{ width:14px; height:14px; flex-shrink:0; }
@keyframes vp-marquee-scroll{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
    .vp-marquee-track{ animation:none; }
}

/* =========================================================
   HEADER
   ========================================================= */
.vp-header{
    background:#fff;
    padding:18px 0;
}
.vp-header .vp-container{
    display:flex;
    align-items:center;
    gap:28px;
    flex-wrap:wrap;
}
.vp-logo{ flex-shrink:0; }
.vp-logo img{ max-height:52px; }
.vp-logo a{
    font-size:1.5rem;
    font-weight:800;
    color:var(--vp-primary);
    letter-spacing:-.02em;
}

.vp-search{ flex:1 1 360px; }
.vp-search form{
    display:flex;
    align-items:center;
    border:2px solid var(--vp-border);
    border-radius:var(--vp-radius-pill);
    padding:2px 4px 2px 18px;
    transition:border-color .15s ease;
}
.vp-search form:focus-within{ border-color:var(--vp-primary); }
.vp-search input[type="search"]{
    flex:1;
    border:none;
    outline:none;
    padding:9px 8px;
    font-size:.92rem;
    background:transparent;
    font-family:inherit;
}
.vp-search button{
    background:var(--vp-primary);
    border:none;
    color:#fff;
    width:38px; height:38px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.vp-search button svg{ width:18px; height:18px; }

.vp-header-actions{ display:flex; align-items:center; gap:22px; flex-shrink:0; }
.vp-action-link{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.82rem;
    color:var(--vp-ink);
    font-weight:600;
}
.vp-action-link svg{ width:22px; height:22px; color:var(--vp-primary); flex-shrink:0; }
.vp-action-link .vp-action-label small{ display:block; font-weight:400; color:var(--vp-gray); font-size:.72rem; }
.vp-action-cart{ position:relative; }
.vp-cart-count{
    background:var(--vp-accent);
    color:#fff;
    border-radius:50%;
    min-width:18px; height:18px;
    font-size:.65rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:-8px;
    left:14px;
    padding:0 4px;
}

/* =========================================================
   NAV
   ========================================================= */
.vp-nav{ background:#fff; border-top:1px solid var(--vp-border); border-bottom:1px solid var(--vp-border); position:relative; }
.vp-nav .vp-container{ display:flex; align-items:stretch; }

.vp-all-cats{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--vp-primary);
    color:#fff;
    border:none;
    padding:0 18px;
    font-size:.85rem;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
    flex-shrink:0;
}
.vp-all-cats:hover{ background:var(--vp-primary-dark); }
.vp-all-cats svg{ width:18px; height:18px; }

.vp-nav-menu{ display:flex; flex-wrap:wrap; align-items:stretch; }
.vp-nav-menu > li{ position:relative; }
.vp-nav-menu > li > a{
    display:flex;
    align-items:center;
    gap:4px;
    height:100%;
    padding:14px 16px;
    color:var(--vp-ink);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.01em;
}
.vp-nav-menu > li > a:hover{ color:var(--vp-primary); }
.vp-nav-menu li.menu-item-has-children > a::after{
    content:"";
    width:7px; height:7px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    margin-left:2px;
    opacity:.6;
}
.vp-nav-menu .sub-menu{
    display:none;
    position:absolute;
    top:100%; left:0;
    background:#fff;
    border:1px solid var(--vp-border);
    border-radius:0 0 var(--vp-radius) var(--vp-radius);
    box-shadow:0 12px 24px rgba(0,0,0,.10);
    min-width:220px;
    z-index:30;
    padding:8px 0;
}
.vp-nav-menu li.menu-item-has-children:hover > .sub-menu{ display:block; }
.vp-nav-menu .sub-menu li a{ display:block; padding:9px 18px; font-size:.85rem; font-weight:500; color:var(--vp-ink); }
.vp-nav-menu .sub-menu li a:hover{ background:var(--vp-primary-light); color:var(--vp-primary); }

.vp-cat-panel{
    display:none;
    position:absolute;
    top:100%; left:0;
    background:#fff;
    border:1px solid var(--vp-border);
    box-shadow:0 16px 30px rgba(0,0,0,.12);
    min-width:280px;
    z-index:40;
    padding:10px 0;
}
.vp-cat-panel.is-open{ display:block; }
.vp-cat-panel a{ display:flex; align-items:center; justify-content:space-between; padding:10px 20px; font-size:.85rem; font-weight:600; color:var(--vp-ink); }
.vp-cat-panel a:hover{ background:var(--vp-primary-light); color:var(--vp-primary); }

.vp-menu-toggle{
    display:none;
    background:none;
    border:none;
    color:var(--vp-ink);
    font-size:1.4rem;
    padding:10px 16px;
    cursor:pointer;
}

/* Faixa decorativa */
.vp-stripe{
    height:6px;
    background:repeating-linear-gradient(-45deg, var(--vp-accent-2) 0 14px, var(--vp-primary) 14px 28px);
}

/* =========================================================
   HERO / BANNER SLIDER
   ========================================================= */
.vp-hero{ position:relative; overflow:hidden; background:var(--vp-gray-light); }
.vp-hero-slides{ position:relative; height: 380px; }
.vp-hero-slide{
    position:absolute; inset:0;
    opacity:0; transition:opacity .6s ease;
    display:flex; align-items:center;
    background-size:cover; background-position:center;
}
.vp-hero-slide.is-active{ opacity:1; z-index:1; }
.vp-hero-slide-inner{
    max-width: var(--vp-max-width);
    margin:0 auto;
    padding:0 20px;
    color:#fff;
    text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.vp-hero-slide-inner h2{ font-size:2rem; max-width:520px; }
.vp-hero-slide-inner p{ max-width:480px; margin-bottom:16px; }

.vp-hero-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    background:rgba(0,0,0,.4); color:#fff; border:none;
    width:40px; height:40px; border-radius:50%; cursor:pointer;
    z-index:2; font-size:1.2rem;
}
.vp-hero-prev{ left:16px; } .vp-hero-next{ right:16px; }
.vp-hero-dots{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:2; }
.vp-hero-dots button{ width:10px; height:10px; border-radius:50%; border:none; background:rgba(255,255,255,.5); cursor:pointer; padding:0; }
.vp-hero-dots button.is-active{ background:#fff; }

/* =========================================================
   BENEFITS BAR
   ========================================================= */
.vp-benefits{ background:var(--vp-gray-light); border-bottom:1px solid var(--vp-border); }
.vp-benefits .vp-container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    padding:20px;
}
.vp-benefit{ display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--vp-primary); font-weight:600; }
.vp-benefit svg{ flex-shrink:0; width:28px; height:28px; }

/* =========================================================
   CATEGORIES
   ========================================================= */
.vp-categories{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.vp-category-card{
    text-align:center;
    border:1px solid var(--vp-border);
    border-radius:var(--vp-radius);
    padding:16px 8px;
    transition:box-shadow .2s ease, transform .2s ease;
}
.vp-category-card:hover{ box-shadow:0 4px 14px rgba(0,0,0,.08); transform:translateY(-2px); }
.vp-category-card img{ margin:0 auto 8px; max-height:64px; }
.vp-category-card span{ font-size:.85rem; font-weight:600; color:var(--vp-primary); }

/* =========================================================
   PRODUCTS (WooCommerce loop overrides)
   ========================================================= */
ul.products{
    display:grid !important;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin:0 !important;
    padding:0 !important;
}
ul.products li.product{
    width:100% !important;
    margin:0 !important;
    border:1px solid var(--vp-border);
    border-radius:var(--vp-radius);
    padding:14px;
    position:relative;
    background:#fff;
    transition:box-shadow .2s ease, transform .2s ease;
}
ul.products li.product:hover{ box-shadow:0 6px 18px rgba(0,0,0,.10); transform:translateY(-3px); }
ul.products li.product img{ border-radius:calc(var(--vp-radius) - 2px); margin-bottom:10px; }
ul.products li.product .woocommerce-loop-product__title{
    font-size:.9rem; font-weight:600; color:#1f2937; min-height:2.7em;
}
ul.products li.product .price{ color:var(--vp-gray); font-size:.85rem; }
ul.products li.product .price del{ opacity:.6; }
ul.products li.product .price ins{ text-decoration:none; color:var(--vp-primary); font-weight:700; }
ul.products li.product .star-rating{ font-size:.8rem; margin-bottom:4px; }

.vp-badge{
    position:absolute; top:10px; left:10px;
    background:var(--vp-accent);
    color:#fff;
    font-size:.68rem;
    font-weight:700;
    padding:4px 8px;
    border-radius:4px;
    z-index:2;
}

.vp-price-extra{ margin-top:6px; display:flex; flex-direction:column; gap:2px; }
.vp-pix-price{ color:var(--vp-accent); font-weight:700; font-size:1rem; }
.vp-pix-price small{ font-weight:600; font-size:.7rem; }
.vp-installments{ font-size:.75rem; color:var(--vp-gray); }

ul.products li.product .button{
    display:block;
    text-align:center;
    margin-top:10px;
    background:var(--vp-primary);
    color:#fff !important;
    padding:8px 12px;
    border-radius:var(--vp-radius);
    font-size:.85rem;
    font-weight:600;
}
ul.products li.product .button:hover{ background:var(--vp-primary-dark); }

/* =========================================================
   PAGINA DE PRODUTO INDIVIDUAL
   ========================================================= */
.woocommerce-breadcrumb{
    font-size:.82rem;
    color:var(--vp-gray);
    margin:18px 0;
}
.woocommerce-breadcrumb a{ color:var(--vp-gray); }
.woocommerce-breadcrumb a:hover{ color:var(--vp-primary); }

.woocommerce div.product{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    margin-bottom:50px;
}
.woocommerce div.product .woocommerce-product-gallery{ max-width:100%; }
.woocommerce div.product .woocommerce-product-gallery__wrapper{
    border:1px solid var(--vp-border);
    border-radius:var(--vp-radius);
    overflow:hidden;
}
.woocommerce div.product .flex-control-thumbs{
    display:flex;
    gap:10px;
    margin-top:10px;
    flex-wrap:wrap;
}
.woocommerce div.product .flex-control-thumbs li{ width:70px; }
.woocommerce div.product .flex-control-thumbs img{
    border:2px solid var(--vp-border);
    border-radius:6px;
    cursor:pointer;
}
.woocommerce div.product .flex-control-thumbs img.flex-active{ border-color:var(--vp-primary); }

.woocommerce div.product .summary{ padding-top:4px; }
.woocommerce div.product .product_title{
    font-size:1.6rem;
    color:var(--vp-ink);
    margin-bottom:10px;
}
.woocommerce div.product .woocommerce-product-rating{ margin-bottom:14px; }
.woocommerce div.product p.price{
    font-size:1rem;
    color:var(--vp-gray);
    margin-bottom:6px;
}
.woocommerce div.product p.price ins{ text-decoration:none; color:var(--vp-primary); font-weight:800; font-size:1.5rem; }
.woocommerce div.product p.price del{ opacity:.6; font-size:1rem; }
.woocommerce div.product .vp-price-extra{ margin:10px 0 20px; padding:14px; background:var(--vp-primary-light); border-radius:var(--vp-radius); }
.woocommerce div.product .vp-price-extra .vp-pix-price{ font-size:1.1rem; }
.woocommerce div.product .woocommerce-product-details__short-description{
    color:var(--vp-gray);
    margin-bottom:20px;
    line-height:1.6;
}
.woocommerce div.product form.cart{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:20px;
    flex-wrap:wrap;
}
.woocommerce div.product .quantity input.qty{
    width:64px;
    padding:11px 10px;
    border:1px solid var(--vp-border);
    border-radius:var(--vp-radius);
    font-size:.95rem;
    text-align:center;
}
.woocommerce div.product .single_add_to_cart_button{
    background:var(--vp-primary);
    color:#fff;
    border:none;
    padding:13px 32px;
    border-radius:var(--vp-radius);
    font-weight:700;
    font-size:.95rem;
    cursor:pointer;
}
.woocommerce div.product .single_add_to_cart_button:hover{ background:var(--vp-primary-dark); }
.woocommerce div.product .product_meta{
    font-size:.82rem;
    color:var(--vp-gray);
    border-top:1px solid var(--vp-border);
    padding-top:14px;
}
.woocommerce div.product .product_meta a{ color:var(--vp-primary); }
.woocommerce div.product .stock{
    font-size:.85rem;
    font-weight:600;
    color:var(--vp-primary);
    margin-bottom:14px;
}
.woocommerce div.product .stock.out-of-stock{ color:var(--vp-accent); }

.woocommerce-tabs{ grid-column:1 / -1; border-top:1px solid var(--vp-border); padding-top:24px; }
.woocommerce-tabs ul.tabs{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.woocommerce-tabs ul.tabs li{
    border:1px solid var(--vp-border);
    border-radius:var(--vp-radius-pill);
    overflow:hidden;
}
.woocommerce-tabs ul.tabs li a{ display:block; padding:9px 20px; font-size:.85rem; font-weight:700; }
.woocommerce-tabs ul.tabs li.active{ background:var(--vp-primary); border-color:var(--vp-primary); }
.woocommerce-tabs ul.tabs li.active a{ color:#fff; }
.woocommerce-tabs .panel{ max-width:780px; line-height:1.7; color:var(--vp-ink); }

.related.products{ grid-column:1 / -1; border-top:1px solid var(--vp-border); padding-top:30px; margin-top:10px; }
.related.products > h2{ font-size:1.3rem; margin-bottom:20px; color:var(--vp-primary); }

@media(max-width:900px){
    .woocommerce div.product{ grid-template-columns:1fr; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.vp-footer{ background:var(--vp-primary); color:#dbe4ef; margin-top:40px; }
.vp-footer .vp-container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:32px;
    padding:40px 20px;
}
.vp-footer h4{ color:#fff; font-size:1rem; margin-bottom:14px; }
.vp-footer ul li{ margin-bottom:8px; font-size:.85rem; }
.vp-footer ul li a:hover{ text-decoration:underline; }
.vp-footer-social{ display:flex; gap:12px; margin-top:12px; }
.vp-footer-social a{
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center;
    color:#fff;
}
.vp-footer-social a:hover{ background:var(--vp-primary); }
.vp-footer-social a svg{ width:17px; height:17px; }
.vp-footer-bottom{
    border-top:1px solid rgba(255,255,255,.15);
    text-align:center;
    padding:16px 20px;
    font-size:.8rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width: 992px){
    ul.products{ grid-template-columns:repeat(3,1fr); }
    .vp-categories{ grid-template-columns:repeat(3,1fr); }
    .vp-footer .vp-container{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width: 768px){
    .vp-benefits .vp-container{ grid-template-columns:repeat(2,1fr); }
    .vp-header-actions .vp-action-label{ display:none; }
    .vp-menu-toggle{ display:block; }
    .vp-all-cats span{ display:none; }
    .vp-nav-menu{
        display:none;
        flex-direction:column;
        width:100%;
    }
    .vp-nav-menu .sub-menu{ position:static; box-shadow:none; border:none; padding-left:16px; }
    .vp-nav.is-open .vp-nav-menu{ display:flex; }
    .vp-nav .vp-container{ flex-wrap:wrap; }
}
@media(max-width: 600px){
    ul.products{ grid-template-columns:repeat(2,1fr); }
    .vp-categories{ grid-template-columns:repeat(2,1fr); }
    .vp-footer .vp-container{ grid-template-columns:1fr; }
    .vp-hero-slide-inner h2{ font-size:1.4rem; }
}