*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;}
body{font-family:'Poppins',sans-serif;background:#f5f5f5;color:#111;padding-top:65px;}
a{text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}
.container{width:90%;max-width:1200px;margin:0 auto}

#header-placeholder{position:fixed;top:0;left:0;width:100%;z-index:1000;}
.header{background:#111;box-shadow:0 2px 10px rgba(0,0,0,.15);width:100%;}
.header .container{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
.logo{font-size:1.8rem;font-weight:700;color:white}
.logo span{color:#FFD54A}
.navbar ul{display:flex;gap:30px}
.navbar a{color:white;font-weight:500;transition:.3s}
.navbar a:hover{color:#FFD54A}
.btn-primary,.btn-secondary{padding:14px 28px;border-radius:12px;font-weight:600;transition:.3s}
.btn-primary{background:#FFD54A;color:#111}
.btn-primary:hover{transform:translateY(-3px)}
.btn-secondary{border:2px solid #FFD54A;color:#FFD54A}
.btn-secondary:hover{background:#FFD54A;color:#111}
.section-title{text-align:center;font-size:2.2rem;margin-bottom:40px}
.featured{padding:80px 0}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px;padding:20px 0; touch-action:pan-y;}
.product-card{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:100%;
    background:white;
    border-radius:16px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    overflow:hidden;
    transition:.3s;
}
.product-card:hover{
    box-shadow:0 8px 20px rgba(0,0,0,.12);
    transform:translateY(-6px);
}
.product-image{width:100%;padding:15px 15px 5px 15px;display:flex;justify-content:center;align-items:center}
.product-image img{width:100%;aspect-ratio:350/489;object-fit:contain;background-color:#f4f4f4;border-radius:8px}
.product-info{padding:20px}
.product-info h3{font-size:1.1rem;margin:10px 0 5px}
.product-price{color:#F5B700;font-size:1.4rem;font-weight:700;margin-bottom:0}

/* Área de preço com altura mínima fixa — garante que cards com desconto
   (2 linhas: riscado + novo) e sem desconto (1 linha) tenham exatamente
   a mesma altura nessa seção, evitando que o card cresça/desalinhe. */
.product-price-area{
    min-height:50px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin-bottom:8px;
}
.product-price-wrapper{line-height:1.1}
.product-price-original{color:#999;font-size:.85rem;text-decoration:line-through;display:block;margin-bottom:0;line-height:1.3}
.product-price-promo{margin-bottom:0 !important;color:#2ecc71;line-height:1.3}
.buy-btn{width:100%;background:#111;color:white;border:none;padding:12px;border-radius:10px;cursor:pointer;transition:.3s}
.buy-btn:hover{background:#F5B700;color:#111}
.benefits{padding:80px 0}
.benefits .container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.benefit-card{background:white;padding:30px;border-radius:18px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.benefit-card h3{margin-bottom:12px}
footer{background:#0a0a0a;color:white}
footer .container{padding:60px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px}
footer h3{margin-bottom:15px}
footer ul li{margin-bottom:10px}
footer a{color:#d8d8d8}
footer a:hover{color:#FFD54A}
.copyright{text-align:center;padding:20px;border-top:1px solid rgba(255,255,255,.1)}
.cart-item{background:white;padding:20px;border-radius:16px;margin-bottom:20px;display:flex;gap:20px;align-items:center;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.cart-item img{width:120px;border-radius:12px}
.cart-info{flex:1}
.cart-info h3{margin-bottom:10px}
.cart-price{color:#F5B700;font-weight:700;font-size:1.2rem}
.cart-price-promo-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.cart-price-original{color:#999;font-size:.9rem;text-decoration:line-through}
.cart-desconto-tag{color:#2ecc71;font-size:.8rem;font-weight:700}
.empty-cart{text-align:center;padding:60px 20px}
.cart-container{position:relative}
.mini-cart{position:absolute;top:60px;right:0;width:350px;background:white;border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,.15);overflow:hidden;display:none;z-index:9999}
.mini-cart.active{display:block}
.mini-cart-header{padding:20px;border-bottom:1px solid #eee}
.mini-cart-item{display:flex;gap:12px;padding:15px 20px;border-bottom:1px solid #eee}
.mini-cart-item img{width:60px;height:80px;object-fit:cover;border-radius:8px}
.mini-cart-footer{padding:20px;display:flex;flex-direction:column;gap:15px}
.mini-cart-total{font-size:1.1rem;font-weight:700}
.catalog-page{padding:60px 0}
.carousel-container{position:relative;display:flex;align-items:center;width:100%;padding:0 40px}
.carousel-window{width:100%;overflow:hidden; touch-action:pan-y;}
.carousel-track{display:flex;gap:25px;transition:transform .4s ease-in-out; touch-action:pan-y;}
.carousel-track.center-cards{justify-content:center}
.carousel-track .product-card{flex:0 0 calc(25% - 18.75px);min-width:240px}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);background:#111;color:#FFD54A;border:none;width:45px;height:45px;border-radius:50%;font-size:1.2rem;cursor:pointer;z-index:10;transition:.3s;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 10px rgba(0,0,0,.2)}
.carousel-arrow:hover{background:#FFD54A;color:#111;transform:translateY(-50%) scale(1.1)}
.carousel-arrow.prev{left:-15px}
.carousel-arrow.next{right:-15px}
.carousel-arrow.hidden{display:none}
@media(max-width:1024px){.carousel-track .product-card{flex:0 0 calc(33.333% - 16.66px)}}
@media(max-width:768px){.carousel-track .product-card{flex:0 0 calc(50% - 12.5px)}.carousel-container{padding:0 20px}.carousel-arrow.prev{left:-10px}.carousel-arrow.next{right:-10px}}
@media(max-width:480px){.carousel-track .product-card{flex:0 0 100%}}
.custom-alert-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease}
.custom-alert-overlay.active{opacity:1;pointer-events:auto}
.custom-alert-box{background:#fff;padding:30px 25px;border-radius:12px;max-width:380px;width:90%;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.2);transform:translateY(-20px);transition:transform .3s ease}
.custom-alert-overlay.active .custom-alert-box{transform:translateY(0)}
.custom-alert-icon{font-size:3rem;margin-bottom:15px}
.custom-alert-message{font-size:1rem;color:#333;margin-bottom:25px;line-height:1.5;font-family:'Poppins',sans-serif}
.custom-alert-btn{background:#FFD54A;color:#111;border:none;padding:10px 25px;font-size:1rem;font-weight:600;border-radius:6px;cursor:pointer;transition:background .2s;font-family:'Poppins',sans-serif}
.custom-alert-btn:hover{background:#e6bf42}
.about-page{padding:60px 20px;max-width:800px;margin:0 auto;text-align:center}
.about-text p{font-size:1.1rem;line-height:1.6;color:#555;margin-bottom:20px}
.contact-section{margin-top:50px;padding-top:40px;border-top:2px solid #eee}
.contact-section h3{font-size:1.8rem;color:#111;margin-bottom:10px}
.contact-section p{color:#666;margin-bottom:30px}
.contact-buttons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
/* =========================================================
   BOTÕES DE CONTATO (Sobre) — substituem as classes antigas
   .btn-whatsapp, .btn-pokemon, .btn-instagram, .btn-youtube
   ========================================================= */

.btn-social{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 28px;
    border-radius:12px;
    font-weight:600;
    font-size:1rem;
    text-decoration:none;
    background:#FFD54A;
    color:#111;
    transition:.3s;
}
.btn-social svg{
    color:#111;
    flex-shrink:0;
}
.btn-social:hover{
    transform:translateY(-3px);
    background:#e6bf42;
}
.header-logo{max-height:50px;width:auto;display:block}
/* =========================================================
   ESTILOS DO PAINEL ADMIN
   (adicionar ao final do style.css existente)
   ========================================================= */

/* --- Tela de login --- */
.admin-login-wrapper{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.admin-login-box{background:white;padding:40px;border-radius:18px;box-shadow:0 4px 12px rgba(0,0,0,.08);width:100%;max-width:400px;text-align:center}
.admin-login-box h2{margin-bottom:10px}
.admin-login-box p{color:#777;margin-bottom:25px}
.admin-login-box input{width:100%;padding:12px;margin-bottom:15px;border:1px solid #ddd;border-radius:10px;font-family:'Poppins',sans-serif}
.admin-login-box .btn-primary{width:100%;border:none;cursor:pointer}
.admin-login-error{color:#ff4d4d;margin-top:10px;font-size:.9rem;min-height:20px}

/* --- Layout geral do painel --- */
.admin-page{padding:50px 0;min-height:80vh;overflow-x:hidden;}
.admin-header-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:15px}
.admin-header-bar h1{font-size:1.8rem}
.btn-logout{background:#ff4d4d;color:white;border:none;padding:10px 20px;border-radius:10px;cursor:pointer;font-weight:600;font-family:'Poppins',sans-serif}

/* --- Abas --- */
.admin-tabs{display:flex;gap:10px;margin-bottom:30px;border-bottom:2px solid #e0e0e0}
.admin-tab-btn{background:none;border:none;padding:14px 22px;font-size:1rem;font-weight:600;cursor:pointer;color:#777;font-family:'Poppins',sans-serif;border-bottom:3px solid transparent;transition:.2s}
.admin-tab-btn:hover{color:#111}
.admin-tab-btn.active{color:#111;border-bottom-color:#FFD54A}
.admin-tab-content{display:none}
.admin-tab-content.active{display:block}

/* --- Dashboard de Resumo --- */
.resumo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:25px;
}
.resumo-card{
    background:white;
    border-radius:16px;
    padding:28px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.resumo-card h3{
    font-size:1rem;
    color:#666;
    margin-bottom:12px;
}
.resumo-numero-grande{
    font-size:2.4rem;
    font-weight:700;
    color:#111;
    line-height:1.1;
}
.resumo-legenda{
    color:#999;
    font-size:.85rem;
    margin-bottom:18px;
}
.resumo-sublinha{
    color:#555;
    font-size:.85rem;
    font-weight:600;
    margin-bottom:14px;
    margin-top:-12px;
}
.resumo-detalhamento{
    border-top:1px solid #f0f0f0;
    padding-top:14px;
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:220px;
    overflow-y:auto;
}
.resumo-linha{
    display:flex;
    justify-content:space-between;
    font-size:.9rem;
    color:#555;
}
.resumo-linha-valor{
    font-weight:700;
    color:#111;
}
.resumo-vazio{
    color:#aaa;
    font-size:.85rem;
}

/* --- Sub-abas (dentro de "Pedidos Ativos") --- */
.admin-subtabs{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.admin-subtab-btn{background:#f0f0f0;border:none;padding:10px 18px;border-radius:20px;font-size:.9rem;font-weight:600;cursor:pointer;color:#666;font-family:'Poppins',sans-serif;transition:.2s}
.admin-subtab-btn:hover{background:#e5e5e5}
.admin-subtab-btn.active{background:#111;color:#FFD54A}
.admin-subtab-content{display:none}
.admin-subtab-content.active{display:block}

/* --- Barra de busca do admin --- */
.admin-search-bar{margin-bottom:20px}
.admin-search-bar input{width:100%;padding:12px 16px;border:1px solid #ddd;border-radius:10px;font-family:'Poppins',sans-serif;font-size:.95rem}

/* --- Link/botão de comprovante e rastreio dentro do card --- */
.pedido-link-rastreio{display:block;margin:10px 0;color:#1a5fa8;font-weight:600;font-size:.9rem;text-decoration:none;text-align:left;padding:0;}
.pedido-link-rastreio:hover{text-decoration:underline;}

/* --- Lista de toploaders no modal de edição de pedido --- */
#pedido-edit-toploaders{margin-bottom:10px;max-height:160px;overflow-y:auto;}

/* --- Preview do comprovante PIX (proporção livre, diferente do preview de carta) --- */
.comprovante-preview{max-width:100%;max-height:300px;object-fit:contain;border-radius:10px;margin-top:10px;display:none;}

/* --- Cards de pedido --- */
.pedido-card{background:white;border-radius:16px;padding:25px;margin-bottom:20px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.pedido-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px;flex-wrap:wrap;gap:10px}
.pedido-card-header h3{font-size:1.2rem}
.pedido-data{color:#999;font-size:.85rem}
.pedido-cliente{margin-bottom:15px;color:#555;font-size:.95rem}
.pedido-cliente strong{color:#111}
.pedido-itens{list-style:none;margin-bottom:15px;border-top:1px solid #eee;border-bottom:1px solid #eee;padding:12px 0}
.pedido-itens li{padding:6px 0;display:flex;justify-content:space-between;font-size:.95rem}
.pedido-total{text-align:right;font-weight:700;font-size:1.15rem;color:#F5B700;margin-bottom:18px}
.pedido-frete{text-align:right;font-size:.85rem;color:#777;margin-top:-14px;margin-bottom:18px}
.pedido-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-confirmar{background:#2ecc71;color:white;border:none;padding:12px 24px;border-radius:10px;cursor:pointer;font-weight:600;font-family:'Poppins',sans-serif;transition:.2s}
.btn-confirmar:hover{background:#27ae60}
.btn-cancelar{background:#ff4d4d;color:white;border:none;padding:12px 24px;border-radius:10px;cursor:pointer;font-weight:600;font-family:'Poppins',sans-serif;transition:.2s}
.btn-cancelar:hover{background:#e63b3b}

/* --- Badges de status (usados no histórico) --- */
.status-badge{display:inline-block;padding:5px 14px;border-radius:20px;font-size:.8rem;font-weight:600}
.status-pendente{background:#fff3cd;color:#946c00}
.status-confirmado{background:#d4f4dd;color:#1e7e3e}
.status-cancelado{background:#fde2e2;color:#c0392b}

/* --- Filtro do histórico --- */
.admin-filter-bar{margin-bottom:20px}
.admin-filter-bar select{padding:10px;border:1px solid #ddd;border-radius:10px;font-family:'Poppins',sans-serif;min-width:200px}

.admin-empty-state{text-align:center;padding:60px 20px;color:#999}
.admin-loading{text-align:center;padding:40px;color:#999}

/* =========================================================
   ESTILOS DA GESTÃO DE ESTOQUE (admin)
   (adicionar ao final do style.css existente)
   ========================================================= */

/* --- Barra de ações da aba estoque --- */
.estoque-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:25px;flex-wrap:wrap}
.estoque-search{flex:1;min-width:220px;padding:12px;border:1px solid #ddd;border-radius:10px;font-family:'Poppins',sans-serif}
.estoque-filter-select{padding:12px;border:1px solid #ddd;border-radius:10px;font-family:'Poppins',sans-serif;background:white;cursor:pointer;min-width:180px}

/* Toggle switch (estilo iOS) para ligar/desligar destaque direto na lista */
.destaque-toggle{
    position:relative;
    display:inline-block;
    width:44px;
    height:24px;
}
.destaque-toggle input{
    opacity:0;
    width:0;
    height:0;
}
.destaque-toggle-slider{
    position:absolute;
    cursor:pointer;
    top:0;left:0;right:0;bottom:0;
    background-color:#ddd;
    border-radius:24px;
    transition:.25s;
}
.destaque-toggle-slider::before{
    position:absolute;
    content:"";
    height:18px;
    width:18px;
    left:3px;
    bottom:3px;
    background-color:white;
    border-radius:50%;
    transition:.25s;
    box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.destaque-toggle input:checked + .destaque-toggle-slider{
    background-color:#FFD54A;
}
.destaque-toggle input:checked + .destaque-toggle-slider::before{
    transform:translateX(20px);
}

/* Card de banner no admin: imagem em miniatura à esquerda, info à direita */
.banner-admin-card{
    display:flex;
    gap:20px;
    background:white;
    border-radius:16px;
    padding:20px;
    margin-bottom:20px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.banner-admin-preview{
    width:220px;
    aspect-ratio:1200/630;
    object-fit:cover;
    border-radius:10px;
    flex-shrink:0;
    background:#f0f0f0;
}
.banner-admin-info{
    flex:1;
    display:flex;
    flex-direction:column;
}
.banner-admin-actions{
    display:flex;
    justify-content:flex-start;
    margin-top:auto;
    padding-top:12px;
}

@media(max-width:700px){
    .banner-admin-card{flex-direction:column;}
    .banner-admin-preview{width:100%;}
}

/* --- Grid e card de Prova Social no admin --- */
.provas-sociais-admin-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:20px;
}
.prova-social-admin-card{
    background:white;
    border-radius:16px;
    padding:16px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    display:flex;
    flex-direction:column;
}
.prova-social-admin-preview{
    width:100%;
    max-height:280px;
    object-fit:contain;
    border-radius:10px;
    background:#f5f5f5;
    margin-bottom:12px;
}
.prova-social-admin-info strong{
    display:block;
    margin-bottom:4px;
}
.prova-social-admin-info p{
    color:#777;
    font-size:.85rem;
    margin-bottom:10px;
}
.prova-social-admin-actions{
    margin-top:auto;
}

.btn-add-card{background:#FFD54A;color:#111;border:none;padding:12px 22px;border-radius:10px;cursor:pointer;font-weight:600;font-family:'Poppins',sans-serif;white-space:nowrap}
.btn-add-card:hover{background:#e6bf42}

/* --- Tabela simples de estoque --- */
.estoque-table-wrapper{background:white;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.08);overflow-x:auto}
.estoque-table{width:100%;border-collapse:collapse;min-width:600px}
.estoque-table th{text-align:left;padding:16px 18px;background:#fafafa;font-weight:600;font-size:.9rem;color:#777;border-bottom:2px solid #eee}
.estoque-table td{padding:14px 18px;border-bottom:1px solid #f0f0f0;font-size:.95rem}
.estoque-table tr:last-child td{border-bottom:none}
.estoque-table tr:hover{background:#fafafa}
.estoque-stock-zero{color:#ff4d4d;font-weight:700}
.estoque-tag-desconto{
    display:inline-block;
    background:#e8f8ee;
    color:#2ecc71;
    font-size:.7rem;
    font-weight:700;
    padding:2px 7px;
    border-radius:10px;
    margin-left:4px;
}
.btn-edit-card{background:#111;color:white;border:none;padding:8px 18px;border-radius:8px;cursor:pointer;font-weight:600;font-family:'Poppins',sans-serif;font-size:.85rem}
.btn-edit-card:hover{background:#FFD54A;color:#111}

/* --- Modal --- */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.active{display:flex}
.modal-box{background:white;border-radius:18px;width:100%;max-width:550px;max-height:90vh;overflow-y:auto;padding:35px}
.modal-box h2{margin-bottom:20px}
.modal-box label{display:block;margin-top:14px;margin-bottom:6px;font-weight:600;font-size:.9rem}
.modal-box input,.modal-box select{width:100%;padding:11px;border:1px solid #ddd;border-radius:10px;font-family:'Poppins',sans-serif}
.modal-box .checkbox-row{display:flex;align-items:center;gap:10px;margin-top:16px}
.modal-box .checkbox-row input{width:auto}
.modal-image-preview{width:120px;aspect-ratio:350/489;object-fit:contain;background:#f4f4f4;border-radius:10px;margin-top:10px;display:none}
.modal-actions{display:flex;gap:12px;margin-top:25px}
.modal-actions .btn-primary{flex:1;border:none;cursor:pointer}
.btn-modal-cancel{flex:1;background:#eee;color:#555;border:none;padding:14px;border-radius:12px;cursor:pointer;font-weight:600;font-family:'Poppins',sans-serif}
.modal-error{color:#ff4d4d;margin-top:12px;font-size:.9rem;min-height:18px}
.modal-upload-hint{font-size:.8rem;color:#999;margin-top:4px}
.btn-delete-card{width:100%;background:none;border:none;color:#ff4d4d;padding:12px;margin-top:18px;cursor:pointer;font-weight:600;font-family:'Poppins',sans-serif;font-size:.9rem;border-top:1px solid #f0f0f0;transition:.2s}
.btn-delete-card:hover{background:#fde2e2;border-radius:8px}

/* =========================================================
   HERO COM SLIDE — substitui TODAS as regras antigas de:
   .hero, .hero-overlay, .hero-content, .hero-text,
   .hero-buttons, .hero-image, .hero-arrow, .hero-dots, .hero-dot
   ========================================================= */

.hero-wrapper{
    position:relative;
    width:100%;
    aspect-ratio:1920/800;
    overflow:hidden;
    touch-action:pan-y;
}

/* Faixa que deslica horizontalmente contendo todos os slides */
.hero-track{
    display:flex;
    height:100%;
}

/* Cada slide individual ocupa 100% da largura do wrapper */
.hero-slide{
    position:relative;
    min-width:100%;
    height:100%;
    display:flex;
    align-items:center;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-color:#111; /* aparece enquanto a imagem carrega, ou se faltar */
}

.hero-overlay{
    position:absolute;
    top:0;left:0;width:100%;height:100%;
    background:linear-gradient(135deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.55) 100%);
}

/* Em telas pequenas, usa a imagem mobile do banner (--imagem-mobile),
   se ela tiver sido definida. Quando o banner não tem imagem mobile
   própria, a variável não existe, e o navegador simplesmente ignora
   esta regra, mantendo a imagem desktop já aplicada via inline style. */
@media(max-width:768px){
    .hero-slide{
        background-image:var(--imagem-mobile, inherit) !important;
    }
}

.hero-content{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    width:100%;
}

.hero-text{
    max-width:650px;
    text-align:center;
}
.hero-text h1{
    color:white;
    font-size:3.2rem;
    line-height:1.15;
    margin-bottom:20px;
}
.hero-text h1 span{color:#FFD54A}
.hero-text p{
    color:#e8e8e8;
    font-size:1.1rem;
    margin-bottom:35px;
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
}
.hero-buttons{
    display:flex;
    gap:15px;
    justify-content:center;
    min-height:54px; /* evita "pulo" de layout quando um slide não tem botão */
}

/* --- Setas de navegação --- */
.hero-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,.4);
    color:white;
    border:none;
    width:50px;height:50px;
    border-radius:50%;
    font-size:1.3rem;
    cursor:pointer;
    z-index:5;
    transition:.3s;
    display:flex;align-items:center;justify-content:center;
}
.hero-arrow:hover{background:#FFD54A; color:#111;}
.hero-prev{left:25px}
.hero-next{right:25px}

/* --- Indicadores (dots) --- */
.hero-dots{
    position:absolute;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:5;
}
.hero-dot{
    width:10px;height:10px;
    border-radius:50%;
    background:rgba(255,255,255,.4);
    cursor:pointer;
    transition:.3s;
}
.hero-dot.active{background:#FFD54A; width:28px; border-radius:6px;}

@media(max-width:900px){
    .hero-wrapper{
        aspect-ratio:1080/720; /* proporção recomendada para a imagem mobile (1080x720px) */
    }
}
@media(max-width:600px){
    .hero-text h1{font-size:2rem}
    .hero-text p{font-size:1rem}
    .hero-buttons{flex-direction:column}
    .hero-arrow{width:40px;height:40px;font-size:1rem}
    .hero-prev{left:12px}
    .hero-next{right:12px}
}

/* =========================================================
   BADGE "ÚLTIMA UNIDADE!" — adicionar ao final do style.css
   ========================================================= */

.product-image{position:relative;} /* necessário para o badge se posicionar corretamente */

.badge-ultima-unidade{
    position:absolute;
    top:10px;
    left:10px;
    background:#ff4d4d;
    color:white;
    font-size:.75rem;
    font-weight:700;
    padding:5px 10px;
    border-radius:20px;
    z-index:2;
    text-transform:uppercase;
    letter-spacing:.3px;
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.25));
    animation:pulse-badge 1.8s infinite;
}

/* Badge de desconto (% OFF) — canto direito, para não conflitar
   visualmente com o badge "Última Unidade!" (canto esquerdo) */
.badge-desconto{
    position:absolute;
    top:10px;
    right:10px;
    background:#2ecc71;
    color:white;
    font-size:.75rem;
    font-weight:700;
    padding:5px 10px;
    border-radius:20px;
    z-index:2;
    letter-spacing:.3px;
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.2));
}

@keyframes pulse-badge{
    0%, 100% { transform:scale(1); }
    50% { transform:scale(1.06); }
}

/* Botão "Esgotado" em vermelho, para diferenciar visualmente do botão normal */
.buy-btn:disabled{
    background:#ff4d4d !important;
    color:white !important;
    cursor:not-allowed;
    opacity:1;
}

/* =========================================================
   PÁGINA 404 — adicionar ao final do style.css
   ========================================================= */

.not-found-page{
    min-height:75vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px 20px;
}
.not-found-content{
    text-align:center;
    max-width:600px;
}
.not-found-code{
    font-size:7rem;
    font-weight:700;
    color:#FFD54A;
    line-height:1;
    margin-bottom:10px;
}
.not-found-content h1{
    font-size:1.8rem;
    margin-bottom:18px;
}
.not-found-content p{
    color:#666;
    font-size:1.05rem;
    margin-bottom:35px;
    line-height:1.5;
}
.not-found-buttons{
    display:flex;
    gap:15px;
    justify-content:center;
    flex-wrap:wrap;
}

@media(max-width:600px){
    .not-found-code{font-size:5rem}
    .not-found-content h1{font-size:1.4rem}
    .not-found-buttons{flex-direction:column}
}

/* =========================================================
   RESPONSIVIDADE GERAL — adicionar ao final do style.css
   ========================================================= */

/* ---------------------------------------------------------
   1. MENU MOBILE (hambúrguer + painel lateral)
   --------------------------------------------------------- */

.menu-toggle{
    display:none; /* só aparece em telas pequenas, via media query abaixo */
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:32px;
    height:32px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
}
.menu-toggle span{
    display:block;
    width:100%;
    height:3px;
    background:white;
    border-radius:2px;
}

.mobile-menu-overlay{
    position:fixed;
    top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,.5);
    z-index:1998;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
}
.mobile-menu-overlay.active{
    opacity:1;
    pointer-events:auto;
}

.mobile-menu{
    position:fixed;
    top:0;
    right:0;
    width:280px;
    max-width:80vw;
    height:100%;
    background:#111;
    z-index:1999;
    transform:translateX(100%);
    transition:transform .3s ease-in-out;
    padding:30px 25px;
    box-shadow:-5px 0 20px rgba(0,0,0,.3);
}
.mobile-menu.active{
    transform:translateX(0);
}
.mobile-menu-close{
    background:none;
    border:none;
    color:white;
    font-size:2rem;
    cursor:pointer;
    position:absolute;
    top:20px;
    right:20px;
    line-height:1;
}
.mobile-menu ul{
    margin-top:50px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.mobile-menu a{
    display:block;
    color:white;
    font-size:1.15rem;
    font-weight:500;
    padding:14px 10px;
    border-radius:10px;
    transition:.2s;
}
.mobile-menu a:hover{
    background:rgba(255,255,255,.08);
    color:#FFD54A;
}

/* ---------------------------------------------------------
   2. HEADER — mostra hambúrguer e escode navbar/carrinho-texto no mobile
   --------------------------------------------------------- */

@media(max-width:768px){
    .navbar{display:none}
    .menu-toggle{display:flex}
    .header .container{
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
}

/* ---------------------------------------------------------
   3. GRIDS E SEÇÕES GERAIS
   --------------------------------------------------------- */

@media(max-width:600px){
    .section-title{font-size:1.6rem; margin-bottom:25px}
    .container{width:92%}

    /* Benefícios: de grid largo para coluna única */
    .benefits .container{grid-template-columns:1fr; gap:15px}

    /* Catálogo: filtros em coluna, ocupando largura toda */
    .catalog-filters{flex-direction:column}
    .catalog-filters input, .catalog-filters select{
        width:100%;
        min-width:0;
    }

    /* Cards de produto: 2 por linha em vez de "auto-fill" apertado */
    .product-grid{grid-template-columns:repeat(2, 1fr); gap:12px}
    .product-info{padding:12px}
    .product-title{font-size:.95rem}
    .product-price{font-size:1.1rem}

    /* Carrinho: item em coluna (imagem em cima, info no meio, lixeira embaixo),
       tudo centralizado verticalmente */
    .cart-item{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }
    .cart-item img{width:100%; max-width:160px}
    .cart-info{width:100%; display:flex; flex-direction:column; align-items:center;}
    .mini-cart-qty-row{justify-content:center;}
    .cart-item .mini-cart-delete-btn{align-self:center; margin-top:10px;}

    /* Mini-carrinho: ocupa quase a largura toda, alinhado à borda direita da tela */
    .cart-container{position:static;}
    .mini-cart{
        position:fixed;
        top:70px;
        right:4vw;
        left:auto;
        width:92vw;
        max-width:380px;
    }

    /* Sobre: botões de contato em coluna */
    .contact-buttons{flex-direction:column}

    /* Resumo do carrinho: total e botão centralizados, empilhados */
    .cart-summary{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }
    .cart-summary .btn-primary{
        width:100%;
    }
}

@media(max-width:400px){
    /* Telas bem pequenas: 1 carta por linha fica mais confortável que 2 */
    .product-grid{grid-template-columns:1fr}
}

/* =========================================================
   CONFIRMAÇÃO ESTILIZADA (Sim/Cancelar) — adicionar ao final do style.css
   ========================================================= */

.custom-confirm-actions{
    display:flex;
    gap:12px;
}
.custom-confirm-actions .custom-alert-btn{
    flex:1;
}
.custom-confirm-cancel{
    background:#eee !important;
    color:#555 !important;
}
.custom-confirm-cancel:hover{
    background:#ddd !important;
}

/* =========================================================
   AJUSTES VISUAIS DO MINI-CARRINHO — adicionar ao final do style.css
   ========================================================= */

/* Item do mini-carrinho: imagem | info | lixeira (3 colunas) */
.mini-cart-item{
    display:flex;
    align-items:center;
    gap:12px;
}

/* Item sem estoque suficiente: imagem e texto ficam translúcidos/apagados,
   dando a sensação de "indisponível". A lixeira fica fora dessa opacidade
   (sem herdar nada do pai), em vermelho vivo, já que é a ação válida ali.
   O "-" fica com leve transparência (sutil, mas ainda claramente clicável). */
.mini-cart-item-sem-estoque img{
    opacity:.5;
}
.mini-cart-item-sem-estoque h4,
.mini-cart-item-sem-estoque .mini-cart-stock-warning{
    opacity:.7;
}
.mini-cart-stock-warning{
    color:#ff4d4d;
    font-size:.8rem;
    font-weight:600;
    margin-top:4px;
}

/* Desconto no mini-carrinho: bem simples, sem fundo, só o essencial */
.mini-cart-price-row{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:0;
}
.mini-cart-price-original{
    color:#999;
    font-size:.78rem;
    text-decoration:line-through;
}
.mini-cart-desconto-tag{
    color:#2ecc71;
    font-size:.75rem;
    font-weight:700;
}

.cart-item-sem-estoque img{
    opacity:.5;
}
.cart-item-sem-estoque h3,
.cart-item-sem-estoque .cart-stock-warning{
    opacity:.7;
}
.cart-stock-warning{
    color:#ff4d4d;
    font-size:.85rem;
    font-weight:600;
    margin-top:4px;
}
.cart-bulk-note{
    color:#888;
    font-size:.8rem;
    margin-top:8px;
}
.cart-bulk-note-geral{
    background:#eef6fb;
    color:#21618c;
}
.checkout-stock-blocker{
    display:block;
    background:#fde2e2;
    color:#c0392b;
    padding:10px 14px;
    border-radius:10px;
    font-size:.82rem;
    font-weight:600;
    margin-bottom:12px;
}
.checkout-stock-blocker-wrapper{
    text-align:left;
}

/* Botão desabilitado (estoque insuficiente, etc): cinza, igual aos outros
   estados desabilitados do site, em vez de manter o amarelo do btn-primary */
.btn-disabled{
    background:#ddd !important;
    color:#888 !important;
    cursor:not-allowed !important;
}
.btn-disabled:hover{
    background:#ddd !important;
    transform:none !important;
}

/* Linha dos controles de quantidade (- número +) */
.mini-cart-qty-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:4px;
}

/* Botões +/- soltos, sem aparência de botão tradicional */
.qty-btn-soft{
    background:none;
    border:none;
    color:#999;
    font-size:1.1rem;
    font-weight:600;
    cursor:pointer;
    width:24px;
    height:24px;
    padding:0;
    transition:color .2s;
}
.qty-btn-soft:hover{color:#555;}

/* Visualmente "desabilitado", mas continua clicável para poder mostrar o alerta explicativo */
.qty-btn-limite{
    color:#ccc;
    cursor:not-allowed;
}
.qty-btn-limite:hover{
    color:#ccc;
}

/* Número da quantidade, dentro de uma caixinha discreta */
.qty-box{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:28px;
    height:24px;
    background:#f5f5f5;
    border-radius:6px;
    font-size:.9rem;
    font-weight:600;
    color:#333;
}

/* Botão da lixeira: separado, alinhado à esquerda da sua própria coluna,
   centralizado verticalmente em relação ao item todo */
.mini-cart-delete-btn{
    flex-shrink:0;
    width:34px;
    height:34px;
    border-radius:8px;
    background:#fff;
    border:1px solid #e5e5e5;
    color:#ff4d4d;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    align-self:center;
    transition:.2s;
}
.mini-cart-delete-btn:hover{
    background:#fde2e2;
    border-color:#ff4d4d;
}

/* Botão "Ver Carrinho": texto centralizado (caso o btn-primary não centralize por padrão) */
.mini-cart-footer .btn-primary{
    text-align:center;
}

/* Botão "Limpar Carrinho": só texto vermelho discreto, sem fundo chamativo */
.mini-cart-clear-btn{
    background:none;
    border:none;
    color:#ff4d4d;
    font-size:.85rem;
    font-weight:500;
    cursor:pointer;
    text-align:center;
    padding:6px;
    margin-top:4px;
    font-family:'Poppins',sans-serif;
    transition:.2s;
}
.mini-cart-clear-btn:hover{
    text-decoration:underline;
}

/* Botão "Esgotado" em vermelho, para diferenciar visualmente do botão normal */
.buy-btn:disabled{
    background:#ff4d4d !important;
    color:white !important;
    cursor:not-allowed;
    opacity:1;
}

/* =========================================================
   CARRINHO: total alinhado à esquerda — adicionar ao final do style.css
   ========================================================= */

.cart-summary{
    display:flex;
    flex-direction:column;
    gap:6px;
    text-align:left;
    border-top:1px solid #eee;
    padding-top:16px;
    margin-top:8px;
}
.cart-summary h3{
    margin-bottom:0;
    font-size:1.3rem;
}
.cart-summary .btn-primary{
    border:none;
    cursor:pointer;
    width:100%;
    margin-top:10px;
}
.cart-summary-pix-note{
    color:#2ecc71;
    font-size:.85rem;
    font-weight:600;
    margin:0;
}

/* =========================================================
   MODAL DE CHECKOUT (revisão do pedido)
   ========================================================= */

.checkout-modal-box{
    max-width:760px;
}

.checkout-modal-title{
    text-align:center;
}

.checkout-modal-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin-top:10px;
}

.order-summary-title{
    font-size:1.05rem;
    margin-bottom:15px;
    color:#111;
}

/* Coluna esquerda: visual de "cupom fiscal" */
.order-summary{
    background:#fafafa;
    border:1px dashed #ccc;
    border-radius:12px;
    padding:20px;
}
.order-summary-items{
    border-top:1px dashed #ccc;
    border-bottom:1px dashed #ccc;
    padding:10px 0;
    margin-bottom:15px;
}
.order-summary-row{
    display:flex;
    gap:8px;
    font-size:.9rem;
    padding:6px 0;
    font-family:'Courier New', monospace; /* reforça a sensação de "nota fiscal" */
}
.order-summary-qty{
    color:#777;
    flex-shrink:0;
}
.order-summary-name{
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.order-summary-price{
    flex-shrink:0;
    font-weight:600;
}
.order-summary-cupom-row{
    display:flex;
    justify-content:space-between;
    font-size:.9rem;
    color:#2ecc71;
    font-weight:600;
    margin-bottom:8px;
}
.order-summary-total{
    display:flex;
    justify-content:space-between;
    font-weight:700;
    font-size:1.1rem;
    color:#111;
}
.order-summary-note{
    font-size:.8rem;
    color:#888;
    margin-top:15px;
    line-height:1.4;
}
.order-summary-warning{
    color:#946C00;
    background:#FFF3CD;
    padding:10px 12px;
    border-radius:8px;
    font-weight:600;
}

/* Coluna direita: formulário */
.checkout-form-column label{
    display:block;
    margin-top:14px;
    margin-bottom:6px;
    font-weight:600;
    font-size:.9rem;
}
.checkout-form-column input{
    width:100%;
    padding:11px;
    border:1px solid #ddd;
    border-radius:10px;
    font-family:'Poppins',sans-serif;
}

/* Número e Complemento lado a lado, para economizar espaço vertical */
.checkout-form-row{
    display:grid;
    grid-template-columns:0.7fr 1.3fr;
    gap:12px;
    min-width:0;
}
.checkout-form-row > div{
    min-width:0;
}
.checkout-form-row label{
    margin-top:14px;
}

/* Botões finais: centralizados, WhatsApp em cima e Cancelar embaixo dele */
.checkout-form-actions{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin-top:20px;
}
.checkout-form-actions .btn-primary{
    width:100%;
    border:none;
    cursor:pointer;
    text-align:center;
}
.checkout-form-actions .mini-cart-clear-btn{
    text-align:center;
}

@media(max-width:700px){
    .checkout-modal-grid{
        grid-template-columns:1fr;
        gap:25px;
    }
}
@media(max-width:420px){
    .checkout-form-row{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   CONFIRMAÇÃO DE SUCESSO NO CHECKOUT — adicionar ao final do style.css
   ========================================================= */

.checkout-success{
    text-align:center;
    padding:20px 10px;
}
.checkout-success-icon{
    font-size:3.5rem;
    margin-bottom:15px;
}
.checkout-success h2{
    margin-bottom:15px;
}
.checkout-success p{
    color:#666;
    line-height:1.5;
    margin-bottom:25px;
}
.checkout-success .btn-primary{
    border:none;
    cursor:pointer;
    width:100%;
    max-width:280px;
}

/* =========================================================
   OPÇÃO DE TOPLOADER NO CARRINHO — adicionar ao final do style.css
   ========================================================= */

.toploader-option{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:12px;
    font-size:.85rem;
    color:#555;
    cursor:pointer;
}
.toploader-option input[type="checkbox"]{
    width:16px;
    height:16px;
    accent-color:#FFD54A;
    cursor:pointer;
    flex-shrink:0;
}

/* Linha extra do toploader dentro do resumo do pedido (cupom fiscal) */
.order-summary-row-extra{
    color:#999;
    font-size:.8rem;
}
.order-summary-row-extra .order-summary-name{
    padding-left:20px;
}

/* Aviso fixo de que as cartas já vão bem protegidas mesmo sem toploader */
.cart-protection-note{
    background:#fafafa;
    border:1px dashed #ddd;
    border-radius:10px;
    padding:14px 16px;
    margin-top:20px;
    font-size:.85rem;
    color:#666;
    text-align:left;
}

/* Linha extra de toploader na lista de itens do pedido (admin: pendentes/histórico) */
.pedido-item-extra{
    color:#999;
    font-size:.8rem;
    padding-left:20px !important;
}

/* =========================================================
   ÍCONE DO CARRINHO + BADGE — substitui o estilo antigo de .cart-btn
   ========================================================= */

.cart-btn{
    position:relative;
    background:none;
    border:none;
    color:#FFD54A;
    cursor:pointer;
    padding:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s;
}
.cart-btn:hover{
    color:#fff;
    transform:scale(1.08);
}

.cart-badge{
    position:absolute;
    top:-2px;
    right:-2px;
    background:#ff4d4d;
    color:white;
    font-size:.7rem;
    font-weight:700;
    min-width:18px;
    height:18px;
    border-radius:50%;
    display:none; /* só aparece via JS quando o carrinho tem itens */
    align-items:center;
    justify-content:center;
    padding:0 4px;
    line-height:1;
    box-shadow:0 0 0 2px #111; /* "respiro" do badge contra o fundo escuro do header */
}

@keyframes cart-badge-pulse{
    0%   { transform:scale(1); }
    35%  { transform:scale(1.5); }
    60%  { transform:scale(0.9); }
    100% { transform:scale(1); }
}
.cart-badge-pulse{
    animation:cart-badge-pulse .4s ease;
}

/* =========================================================
   ANIMAÇÃO "VOAR PARA O CARRINHO"
   ========================================================= */

.cart-fly-ball{
    position:fixed;
    width:24px;
    height:24px;
    background:#FFD54A;
    border-radius:50%;
    pointer-events:none;
    z-index:9999;
    transform:translate(0, 0) scale(1);
    opacity:1;
    transition:transform .6s cubic-bezier(.3,.6,.4,1), opacity .6s ease;
}

@keyframes cart-btn-bump{
    0%   { transform:scale(1); }
    40%  { transform:scale(1.25); }
    100% { transform:scale(1); }
}
.cart-btn-bump{
    animation:cart-btn-bump .35s ease;
}

/* =========================================================
   PÁGINA DE DETALHE DA CARTA — adicionar ao final do style.css
   ========================================================= */

.card-detail-page{
    padding:50px 0;
    min-height:70vh;
}

.card-detail-not-found{
    text-align:center;
    padding:60px 20px;
}
.card-detail-not-found h2{margin-bottom:15px;}
.card-detail-not-found p{color:#666; margin-bottom:25px;}

.card-detail-grid{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:50px;
    align-items:start;
    background:white;
    border-radius:20px;
    padding:40px;
    box-shadow:0 4px 16px rgba(0,0,0,.08);
}

.card-detail-image{
    background:#f5f5f5;
    border-radius:18px;
    padding:30px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.card-detail-image img{
    width:100%;
    max-width:340px;
    aspect-ratio:350/489;
    object-fit:contain;
}

.card-detail-info h1{
    font-size:2rem;
    margin-bottom:10px;
}

.card-detail-meta{
    display:flex;
    gap:15px;
    color:#888;
    font-size:.95rem;
    margin-bottom:18px;
}

.card-detail-badges{
    display:flex;
    gap:10px;
    margin-bottom:20px;
    flex-wrap:wrap;
}
.card-detail-badge{
    background:#f0f0f0;
    color:#555;
    padding:6px 14px;
    border-radius:20px;
    font-size:.85rem;
    font-weight:600;
}
.card-detail-badge-estado{
    background:#FFF3CD;
    color:#946C00;
}

.card-detail-description{
    color:#666;
    font-size:.95rem;
    line-height:1.5;
    margin-bottom:18px;
}

.card-detail-price{
    color:#F5B700;
    font-size:2.2rem;
    font-weight:700;
    margin-bottom:10px;
}

.card-detail-price-wrapper{
    margin-bottom:10px;
}
.card-detail-price-promo-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:4px;
}
.card-detail-price-original{
    color:#999;
    font-size:1.1rem;
    text-decoration:line-through;
}
.card-detail-price-promo{
    color:#2ecc71;
    margin-bottom:0 !important;
}
.card-detail-badge-desconto{
    background:none;
    color:#2ecc71;
    font-size:.9rem;
    font-weight:700;
    padding:0;
}

.card-detail-stock{
    font-size:.95rem;
    color:#2ecc71;
    font-weight:600;
    margin-bottom:25px;
}
.card-detail-stock-esgotado{
    color:#ff4d4d;
}

.card-detail-actions{
    display:flex;
    gap:12px;
    margin-bottom:25px;
    flex-wrap:wrap;
}
.card-detail-actions .btn-primary,
.card-detail-actions .btn-secondary{
    flex:1;
    min-width:180px;
    border:none;
    cursor:pointer;
    text-align:center;
}
.card-detail-actions .btn-primary:disabled,
.card-detail-actions .btn-secondary:disabled{
    opacity:.5;
    cursor:not-allowed;
}

.card-detail-extra-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    border-top:1px solid #eee;
    padding-top:20px;
}

.btn-card-share, .btn-card-photos{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:none;
    border:1px solid #ddd;
    color:#555;
    padding:12px;
    border-radius:10px;
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:.9rem;
    cursor:pointer;
    transition:.2s;
}
.btn-card-share:hover, .btn-card-photos:hover{
    background:#fafafa;
    border-color:#FFD54A;
}

@media(max-width:800px){
    .card-detail-grid{
        grid-template-columns:1fr;
        gap:30px;
        padding:24px;
    }
    .card-detail-image{padding:20px;}
    .card-detail-actions .btn-primary,
    .card-detail-actions .btn-secondary{
        min-width:100%;
    }
}

/* Link do título do card (catálogo/destaques) sem sublinhado */
.product-title-link{
    text-decoration:none;
    color:inherit;
    display:block;
}


/* =========================================================
   ZOOM SUAVE NA IMAGEM AO PASSAR O MOUSE
   ========================================================= */
 
/* Cards do catálogo/destaques: zoom discreto na imagem dentro do card */
.product-image{
    overflow:hidden;
}
.product-image img{
    transition:transform .35s ease;
}
.product-card:hover .product-image img{
    transform:scale(1.08);
}
 
/* Imagem grande na página de detalhe da carta — efeito de lupa */
.card-detail-image{
    overflow:hidden;
    cursor:zoom-in;
}
.card-detail-image img{
    transition:transform .15s ease-out; /* rápida, para acompanhar o mouse com naturalidade */
}
.card-detail-image:hover img{
    transform:scale(2);
}

/* =========================================================
   PÁGINA DE RASTREIO DE PEDIDO — adicionar ao final do style.css
   ========================================================= */

.track-order-page{
    padding:50px 0;
    min-height:70vh;
}
.track-order-container{
    max-width:550px;
}
.track-order-subtitle{
    text-align:center;
    color:#666;
    margin-bottom:35px;
}

.track-order-form{
    background:white;
    border-radius:16px;
    padding:30px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.track-order-form label{
    display:block;
    margin-top:14px;
    margin-bottom:6px;
    font-weight:600;
    font-size:.9rem;
}
.track-order-form input{
    width:100%;
    padding:12px;
    border:1px solid #ddd;
    border-radius:10px;
    font-family:'Poppins',sans-serif;
}
.track-order-form .btn-primary{
    width:100%;
    border:none;
    cursor:pointer;
    margin-top:20px;
}

.track-order-result{
    margin-top:30px;
}
.track-status-mensagem{
    color:#555;
    margin-bottom:18px;
    line-height:1.5;
}
.track-itens-list{
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
    padding:12px 0;
    margin-bottom:10px;
}
.track-linha-extra{
    font-size:.9rem;
    color:#666;
    margin-bottom:6px;
    text-align:right;
}
.track-item-row{
    display:flex;
    justify-content:space-between;
    font-size:.95rem;
    padding:6px 0;
}
.track-item-extra{
    color:#999;
    font-size:.8rem;
    padding-left:20px;
}
.track-item-row.track-item-extra{
    padding-top:0;
    padding-bottom:6px;
}

/* =========================================================
   STATUS "ENVIADO" E FORMULÁRIO DE ENVIO (admin) — adicionar ao style.css
   ========================================================= */

.status-enviado{
    background:#d6e9ff;
    color:#1a5fa8;
}

.pedido-link-rastreio{
    display:inline-block;
    color:#1a5fa8;
    font-weight:600;
    font-size:.9rem;
    margin:10px 0;
    text-decoration:none;
}
.pedido-link-rastreio:hover{
    text-decoration:underline;
}

.envio-form{
    background:#fafafa;
    border-radius:10px;
    padding:16px;
    margin-top:12px;
}
.envio-form label{
    display:block;
    font-size:.85rem;
    font-weight:600;
    margin-bottom:8px;
}
.envio-form input{
    width:100%;
    padding:10px;
    border:1px solid #ddd;
    border-radius:8px;
    font-family:'Poppins',sans-serif;
    margin-bottom:12px;
}
.envio-form-actions{
    display:flex;
    gap:10px;
}

/* =========================================================
   REDESIGN DOS CARDS DE PRODUTO — adicionar ao final do style.css
   Aplica-se a todos os lugares que usam createProductCard
   (catálogo, destaques, chegaram agora)
   ========================================================= */

/* Selo de estado de conservação, em formato de fita: ponta recortada à
   esquerda, reta à direita (alinhada com a borda da imagem), posicionado
   na parte inferior da carta */
.estado-selo{
    position:absolute;
    bottom:14px;
    right:0;
    width:62%;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    font-weight:700;
    font-style:italic;
    color:white;
    z-index:2;
    clip-path:polygon(15% 0%, 100% 0%, 100% 100%, 15% 100%, 0% 50%);
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.3));
    letter-spacing:.5px;
}

.selo-nm{background:linear-gradient(135deg, #FFD700, #B8860B);}
.selo-lp{background:linear-gradient(135deg, #C0C0C0, #888);}
.selo-mp{background:linear-gradient(135deg, #CD7F32, #8B4513);}
.selo-hp{background:linear-gradient(135deg, #666, #333);}
.selo-dmg{background:linear-gradient(135deg, #ff4d4d, #b30000);}
.selo-bulk{background:linear-gradient(135deg, #9b59b6, #6c3483);}
.selo-codigo{background:linear-gradient(135deg, #3498db, #21618c); font-size:.85rem; letter-spacing:0;}

/* Nome da carta + número entre parênteses na mesma linha */
.product-title{
    font-size:1.05rem;
    font-weight:700;
    margin-bottom:2px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:2.6em;
    line-height:1.3em;
}

/* Coleção, discreta, abaixo do nome */
.product-collection{
    color:#999;
    font-size:.8rem;
    margin-bottom:8px;
}

/* Ajuste fino para o texto mais longo "Adicionar ao Carrinho" caber bem */
.buy-btn{
    font-size:.85rem;
    padding:11px 8px;
}

@media(max-width:480px){
    .buy-btn{font-size:.78rem;}
}

@media(max-width:480px){
    .estado-selo{
        height:28px;
        font-size:.85rem;
        bottom:10px;
    }
}

/* =========================================================
   REDESIGN DO CATÁLOGO — substitui as regras antigas de
   .catalog-filters (remova-as do seu style.css)
   ========================================================= */

/* --- Barra de filtros horizontal, alinhada à direita, mais compacta --- */
.catalog-filters-bar{
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    gap:12px;
    flex-wrap:wrap;
    background:white;
    border-radius:16px;
    padding:16px 20px;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
    margin-bottom:30px;
}

.catalog-search-inline{
    padding:9px 14px;
    border:1px solid #ddd;
    border-radius:8px;
    font-family:'Poppins',sans-serif;
    font-size:.85rem;
    min-width:200px;
    flex:1;
    max-width:280px;
}

.catalog-filter-field{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:130px;
}
.catalog-filter-field label{
    font-size:.72rem;
    font-weight:600;
    color:#888;
    text-transform:uppercase;
    letter-spacing:.4px;
}
.catalog-filter-field select{
    padding:8px 10px;
    border:1px solid #ddd;
    border-radius:8px;
    font-family:'Poppins',sans-serif;
    font-size:.83rem;
    background:white;
    cursor:pointer;
}
.catalog-filter-price{
    min-width:190px;
}

.price-filter-inputs{
    display:flex;
    align-items:center;
    gap:6px;
}
.price-filter-inputs input{
    width:65px;
    padding:8px;
    border:1px solid #ddd;
    border-radius:8px;
    font-family:'Poppins',sans-serif;
    font-size:.8rem;
}
.price-filter-inputs span{
    color:#999;
    font-size:.75rem;
}

.btn-apply-price{
    background:#111;
    color:white;
    border:none;
    padding:8px 12px;
    border-radius:8px;
    cursor:pointer;
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:.8rem;
    transition:.2s;
}
.btn-apply-price:hover{
    background:#FFD54A;
    color:#111;
}

/* Vazado, mas já em vermelho por padrão (não só no hover) */
.btn-clear-filters{
    background:none;
    border:1px solid #ff4d4d;
    color:#ff4d4d;
    padding:9px 14px;
    border-radius:8px;
    cursor:pointer;
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:.8rem;
    transition:.2s;
    height:fit-content;
}
.btn-clear-filters:hover{
    background:#ff4d4d;
    color:white;
}

/* --- Paginação --- */
.catalog-pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    margin-top:40px;
}
.pagination-btn{
    background:white;
    border:1px solid #ddd;
    padding:10px 20px;
    border-radius:10px;
    cursor:pointer;
    font-family:'Poppins',sans-serif;
    font-weight:600;
    transition:.2s;
}
.pagination-btn:hover:not(:disabled){
    background:#FFD54A;
    border-color:#FFD54A;
}
.pagination-btn:disabled{
    opacity:.4;
    cursor:not-allowed;
}
.pagination-info{
    color:#666;
    font-size:.9rem;
    font-weight:600;
}

/* --- Responsividade: barra de filtros quebra em coluna no mobile --- */
@media(max-width:900px){
    .catalog-filters-bar{
        flex-direction:column;
        align-items:stretch;
    }
    .catalog-search-inline{
        max-width:100%;
    }
    .catalog-filter-field{
        min-width:100%;
    }
    .price-filter-inputs{
        flex-wrap:wrap;
    }
}
/* =========================================================
   PÁGINA PÚBLICA DE PROVA SOCIAL — grid orgânico (masonry)
   ========================================================= */

.prova-social-page{
    padding:60px 0;
}
.prova-social-subtitle{
    text-align:center;
    color:#666;
    margin-bottom:40px;
}

/* column-count cria colunas verticais onde cada item entra na próxima
   vaga disponível, respeitando sua própria altura — efeito masonry sem
   precisar de JavaScript para calcular posições. */
.prova-social-masonry{
    column-count:4;
    column-gap:20px;
}
.prova-social-card{
    background:white;
    border-radius:14px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    overflow:hidden;
    margin-bottom:20px;
    break-inside:avoid; /* evita um card ser cortado entre duas colunas */
    display:inline-block;
    width:100%;
}
.prova-social-card img{
    width:100%;
    display:block;
    border-radius:14px 14px 0 0;
}
.prova-social-card-footer{
    padding:12px 16px;
}
.prova-social-card-footer strong{
    display:block;
    font-size:.95rem;
}
.prova-social-card-footer span{
    color:#999;
    font-size:.82rem;
}

@media(max-width:1100px){
    .prova-social-masonry{column-count:3;}
}
@media(max-width:760px){
    .prova-social-masonry{column-count:2;}
}
@media(max-width:480px){
    .prova-social-masonry{column-count:1;}
}

/* =========================================================
   CUPOM DE DESCONTO NO CARRINHO
   ========================================================= */

.cupom-feedback{
    margin-bottom:10px;
}

/* Badge do cupom aplicado: fundo verde claro, código em verde escuro,
   percentual sem fundo (só texto verde escuro também) */
.cupom-aplicado-badge{
    display:flex;
    align-items:center;
    gap:8px;
    background:#e8f8ee;
    padding:8px 12px;
    border-radius:10px;
    margin-bottom:8px;
}
.cupom-aplicado-codigo{
    color:#1e8449;
    font-weight:700;
    font-size:.85rem;
    flex:1;
}
.cupom-aplicado-percentual{
    color:#1e8449;
    font-weight:700;
    font-size:.85rem;
}
.cupom-remover-btn{
    background:none;
    border:none;
    color:#1e8449;
    cursor:pointer;
    font-size:.9rem;
    font-weight:700;
    padding:0 2px;
    line-height:1;
}
.cupom-aviso-promocao{
    color:#946C00;
    background:#FFF3CD;
    padding:8px 12px;
    border-radius:8px;
    font-size:.8rem;
    margin-top:8px;
}

.cart-summary-economia{
    color:#2ecc71;
    font-size:.85rem;
    font-weight:600;
    margin:4px 0 0;
}

/* =========================================================
   LAYOUT DO CARRINHO: 2 colunas no desktop, 1 coluna no mobile
   ========================================================= */

.cart-layout{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:30px;
    align-items:start;
}

.cart-items-column{
    min-width:0; /* evita overflow em itens muito largos dentro do grid */
}

.cart-summary-column{
    position:sticky;
    top:90px; /* fica visível ao rolar a página, abaixo do header fixo */
}

.cart-summary-box{
    background:white;
    border-radius:16px;
    padding:24px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.cart-summary-box-title{
    font-size:1.1rem;
    margin-bottom:16px;
}
.cart-summary-row{
    display:flex;
    justify-content:space-between;
    font-size:.95rem;
    color:#444;
    margin-bottom:6px;
}

/* Botão (estilo link) que abre o modal de cupom */
.cupom-toggle-link{
    background:none;
    border:none;
    color:#1a5fa8;
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
    padding:8px 0;
    text-align:left;
    font-family:'Poppins',sans-serif;
    display:block;
}
.cupom-toggle-link:hover{
    text-decoration:underline;
}

/* --- Responsividade: 1 coluna no mobile/tablet --- */
@media(max-width:900px){
    .cart-layout{
        grid-template-columns:1fr;
    }
    .cart-summary-column{
        position:static;
        min-width:0;
    }
}

/* =========================================================
   FRETE NO CARRINHO (cotação automática via SuperFrete)
   ========================================================= */

.frete-box{
    margin-bottom:8px;
}
.frete-label{
    display:block;
    font-size:.78rem;
    font-weight:600;
    color:#888;
    text-transform:uppercase;
    letter-spacing:.4px;
    margin-bottom:6px;
}
.frete-input-row{
    display:flex;
    gap:8px;
    margin-bottom:8px;
}
.frete-input-row input{
    flex:1;
    min-width:0; /* sem isso, o <input> resiste a encolher no flex, causando overflow horizontal no mobile */
    padding:9px 12px;
    border:1px solid #ddd;
    border-radius:8px;
    font-family:'Poppins',sans-serif;
    font-size:.85rem;
}
.btn-calcular-frete{
    background:#111;
    color:white;
    border:none;
    padding:9px 16px;
    border-radius:8px;
    cursor:pointer;
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:.82rem;
    transition:.2s;
    white-space:nowrap;
}
.btn-calcular-frete:hover{
    background:#FFD54A;
    color:#111;
}
.btn-calcular-frete:disabled{
    opacity:.6;
    cursor:not-allowed;
}

.frete-opcoes{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.frete-opcao{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border:1px solid #eee;
    border-radius:8px;
    cursor:pointer;
    transition:.2s;
}
.frete-opcao:hover{
    border-color:#FFD54A;
    background:#fffbf0;
}
.frete-opcao input[type="radio"]{
    accent-color:#FFD54A;
    cursor:pointer;
}
.frete-opcao-info{
    flex:1;
    display:flex;
    flex-direction:column;
}
.frete-opcao-nome{
    font-size:.85rem;
    font-weight:600;
    color:#333;
}
.frete-opcao-prazo{
    font-size:.72rem;
    color:#999;
}
.frete-opcao-preco{
    font-size:.85rem;
    font-weight:700;
    color:#111;
}

.frete-feedback{
    color:#c0392b;
    font-size:.8rem;
    margin-top:4px;
}

/* =========================================================
   PAINEL ADMIN — AJUSTES PARA MOBILE
   ========================================================= */
@media(max-width:768px){
    /* O container do admin usa toda a largura disponível no mobile,
       em vez do limite de 90%/1200px pensado para desktop */
    .admin-page .container{
        width:100%;
        max-width:100%;
        padding:0 12px;
    }

    /* Abas principais: permite rolagem horizontal suave em vez de
       quebrar feio ou espremer os textos dos botões */
    .admin-tabs{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        flex-wrap:nowrap;
        padding-bottom:4px;
    }
    .admin-tab-btn{
        white-space:nowrap;
        padding:12px 14px;
        font-size:.85rem;
    }

    .admin-subtabs{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        flex-wrap:nowrap;
    }
    .admin-subtab-btn{
        white-space:nowrap;
    }

    /* Toolbars (busca + filtro + botão "Adicionar"): em coluna, cada
       elemento ocupando a largura toda, em vez de espremidos numa linha */
    .estoque-toolbar{
        flex-direction:column;
        align-items:stretch;
    }
    .estoque-toolbar > *{
        width:100%;
    }

    /* Dashboard de Resumo: 1 card por linha, ocupando a largura cheia */
    .resumo-grid{
        grid-template-columns:1fr;
    }

    /* Cards de pedido e banner: já são blocos verticais, só garantindo
       que não sobre nenhuma margem lateral desperdiçando espaço */
    .pedido-card, .banner-admin-card, .prova-social-admin-card{
        margin-left:0;
        margin-right:0;
    }

    /* Modais: ocupam quase toda a largura da tela no mobile, em vez de
       ficarem com uma largura fixa pensada para desktop */
    .modal-box{
        width:94%;
        max-width:94%;
        padding:24px 18px;
    }
}

/* =========================================================
   PÁGINA: VENDER CARTAS
   ========================================================= */

.vender-subtitulo{
    color:#666;
    margin-bottom:30px;
    font-size:1rem;
    text-align:center;
}

/* Modal de aviso inicial: um pouco mais largo que o padrão, por ter
   bastante texto, e com listas estilizadas para facilitar a leitura */
.vender-aviso-box{
    max-width:820px;
    background:#111;
    color:white;
    border-top:6px solid #FFD54A;
}
.vender-aviso-box h2{
    color:#FFD54A;
    font-size:1.5rem;
    margin-bottom:16px;
}
.vender-aviso-box .modal-actions a.btn-modal-cancel{
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}
.vender-aviso-intro{
    color:#ddd;
    font-size:1rem;
    margin-bottom:20px;
    line-height:1.5;
}

/* No desktop, "Como funciona" e "Importante" ficam lado a lado, o que
   reduz bastante a altura total do modal e evita rolagem */
.vender-aviso-colunas{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    margin-bottom:20px;
}
.vender-aviso-coluna-titulo{
    color:#FFD54A;
    font-weight:700;
    font-size:1rem;
    margin-bottom:10px;
    text-transform:uppercase;
    letter-spacing:.4px;
}
.vender-aviso-lista{
    margin:0;
    padding-left:20px;
    color:#e8e8e8;
    line-height:1.55;
    font-size:.92rem;
}
.vender-aviso-lista li{
    margin-bottom:8px;
}
.vender-aviso-lista li strong{
    color:#FFD54A;
}

.vender-aviso-final{
    font-weight:600;
    color:white;
    background:rgba(255,213,74,.12);
    border:1px solid rgba(255,213,74,.3);
    border-radius:10px;
    padding:12px 16px;
    font-size:.9rem;
    margin-bottom:4px;
}

.vender-aviso-box .vender-checkbox-row{
    color:#e8e8e8;
    background:rgba(255,255,255,.06);
    border-radius:10px;
    padding:12px 14px;
}

@media(max-width:700px){
    .vender-aviso-colunas{
        grid-template-columns:1fr;
        gap:18px;
    }
}

/* Checkbox customizado, reaproveitado tanto no modal de aviso quanto no
   termo final do formulário — texto ao lado, alinhado ao topo */
.vender-checkbox-row{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:16px 0;
    cursor:pointer;
    font-size:.9rem;
    color:#444;
    line-height:1.5;
}
.vender-checkbox-row input[type="checkbox"]{
    margin-top:3px;
    flex-shrink:0;
    width:18px;
    height:18px;
    cursor:pointer;
}

/* Formulário principal: 2 colunas no desktop (dados | fotos), 1 coluna no mobile */
.vender-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    background:white;
    border-radius:16px;
    padding:30px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    border-top:5px solid #FFD54A;
}
.vender-form-coluna label{
    display:block;
    margin-top:14px;
    margin-bottom:6px;
    font-weight:600;
    font-size:.9rem;
}
.vender-form-coluna input[type="text"],
.vender-form-coluna select,
.vender-form-coluna textarea{
    width:100%;
    padding:11px;
    border:1px solid #ddd;
    border-radius:10px;
    font-family:'Poppins',sans-serif;
    font-size:.95rem;
}
.vender-form-coluna textarea{
    resize:vertical;
}

.vender-fotos-titulo{
    font-weight:700;
    font-size:.95rem;
    margin-bottom:4px;
    color:#111;
    text-transform:uppercase;
    letter-spacing:.3px;
}
.vender-fotos-titulo::before{
    content:"";
    display:inline-block;
    width:8px;
    height:8px;
    background:#F5B700;
    border-radius:50%;
    margin-right:8px;
}
.vender-fotos-instrucao{
    font-size:.82rem;
    color:#888;
    margin-bottom:16px;
    line-height:1.4;
}
.vender-fotos-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:10px;
}
.vender-foto-campo label{
    font-size:.82rem;
    font-weight:600;
    margin-top:0;
}
.vender-foto-campo input[type="file"]{
    width:100%;
    font-size:.78rem;
    padding:8px 0;
}
.vender-foto-preview{
    width:60px;
    height:60px;
    object-fit:cover;
    border-radius:8px;
    margin-top:6px;
    border:1px solid #ddd;
}

#vender-enviar-btn{
    width:100%;
    border:none;
    cursor:pointer;
    margin-top:10px;
}
#vender-enviar-btn:disabled{
    opacity:.6;
    cursor:not-allowed;
}

/* Tela de sucesso após o envio */
.vender-sucesso{
    background:white;
    border-radius:16px;
    padding:50px 30px;
    text-align:center;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    max-width:500px;
    margin:0 auto;
}
.vender-sucesso-os{
    font-size:1.8rem;
    font-weight:700;
    color:#F5B700;
    margin:16px 0;
}

@media(max-width:800px){
    .vender-form{
        grid-template-columns:1fr;
        gap:10px;
        padding:20px;
    }
    .vender-fotos-grid{
        grid-template-columns:1fr 1fr;
    }
}
@media(max-width:420px){
    .vender-fotos-grid{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   ADMIN: MODAL DE FOTOS DA COMPRA
   ========================================================= */

.compra-fotos-box{
    max-width:600px;
}
.compra-fotos-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin:16px 0;
}
.compra-foto-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
}
.compra-foto-item img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:10px;
    border:1px solid #eee;
    cursor:zoom-in;
}
.compra-foto-item span{
    font-size:.8rem;
    color:#777;
    text-align:center;
}

@media(max-width:480px){
    .compra-fotos-grid{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   RASTREIO: PEDIDO CANCELADO (mensagem vermelha)
   ========================================================= */

.track-cancelado-box{
    background:#fde2e2;
    border:1px solid #f5b5b5;
    border-radius:16px;
    padding:36px 24px;
    text-align:center;
    color:#c0392b;
}
.track-cancelado-icone{
    width:52px;
    height:52px;
    margin:0 auto 14px;
    border-radius:50%;
    background:#c0392b;
    color:white;
    font-size:1.6rem;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}
.track-cancelado-box h3{
    font-size:1.25rem;
    margin-bottom:8px;
    color:#c0392b;
}
.track-cancelado-box p{
    color:#a33;
    font-size:.95rem;
    line-height:1.5;
}

/* =========================================================
   ADMIN COMPRAS: linhas extras dos cards (dados acumulados)
   ========================================================= */

.compra-extra{
    color:#555;
    font-size:.88rem;
    margin:4px 0;
}

/* =========================================================
   CHECKOUT: opção de tipo de entrega (retirada x envio)
   ========================================================= */

.entrega-opcao{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border:1px solid #e0e0e0;
    border-radius:12px;
    margin-bottom:10px;
    cursor:pointer;
    transition:border-color .15s, background .15s;
}
.entrega-opcao:has(input:checked){
    border-color:#F5B700;
    background:#fffdf5;
}
.entrega-opcao input{
    accent-color:#F5B700;
    width:18px;
    height:18px;
    flex-shrink:0;
}
.entrega-opcao-info{
    display:flex;
    flex-direction:column;
    flex:1;
}
.entrega-opcao-nome{
    font-weight:600;
    font-size:.95rem;
    color:#333;
}
.entrega-opcao-prazo{
    font-size:.8rem;
    color:#888;
}
.entrega-opcao-preco{
    font-weight:700;
    color:#1e7e3e;
    font-size:.9rem;
}

/* =========================================================
   ADMIN: selo de retirada em mãos no card de pedido
   ========================================================= */

.selo-retirada{
    display:inline-block;
    background:#fff3cd;
    color:#946c00;
    font-size:.8rem;
    font-weight:700;
    padding:4px 10px;
    border-radius:6px;
    margin-bottom:10px;
}

/* Aviso de retirada no formulário de checkout */
.checkout-retirada-info{
    background:#fffdf5;
    border:1px solid #ffe08a;
    border-radius:10px;
    padding:14px 16px;
    font-size:.9rem;
    color:#946c00;
    line-height:1.5;
    margin-top:8px;
}

/* Linha de cupom no card de pedido (admin) — logo acima do total */
.pedido-cupom{
    text-align:right;
    font-size:.85rem;
    color:#22c55e;
    margin-bottom:4px;
}