:root{
  --red:#E60012; --red-dark:#b0000e; --yellow:#FFCC00; --blue:#2b4aa0; --black:#222; --white:#fff;
  --bg:#fffdfa; --muted:#6b7280; --border:#e5e7eb; --radius:18px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial;
     background:linear-gradient(#ffffff,#ffffff); color:var(--black)}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
[hidden]{display:none!important}

.container{max-width:1100px; margin:0 auto; padding:0 16px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:#fff; cursor:pointer; font-weight:600}
.btn:hover{box-shadow:0 2px 12px rgba(0,0,0,.06)}
.btn.primary{background:var(--red); color:#fff; border-color:var(--red)}  
.btn.primary:hover{background:var(--red-dark)}
.icon-btn{border:1px solid var(--border); background:#fff; border-radius:10px; width:38px; height:38px; display:grid; place-items:center; cursor:pointer}
.icon-btn:hover{box-shadow:0 2px 12px rgba(0,0,0,.06)}
.pill{background:var(--red); color:#fff; border-radius:999px; padding:2px 8px; font-size:12px; margin-left:6px}
.muted{color:var(--muted)}
.note{font-size:12px; margin-top:6px}

.site-header{position:sticky; top:0; background:#fff; border-bottom:1px solid var(--border); z-index:50; backdrop-filter:saturate(180%) blur(6px)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px}
.logo{height:45px}
.actions{display:flex; align-items:center; gap:10px}
.search{display:flex; align-items:center; gap:8px; border:1px solid var(--border); padding:8px 10px; border-radius:12px; background:#fff}
.search input{border:0; outline:0; width:240px}
.search svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7}
.btn.whatsapp { background:#21bd1c; color:#fff; border-color:#ffffff; }
.btn.whatsapp:hover { filter: brightness(0.95); box-shadow:0 2px 12px rgba(37,211,102,.35); }

.filters{display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin:18px 0 10px}
.field{display:flex; flex-direction:column; gap:6px}
.field select, .field input{border:1px solid var(--border); border-radius:12px; padding:10px}
.range{display:flex; align-items:center; gap:8px}
.range input{width:100%}

.grid{display:grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap:16px}
@media (min-width:640px){.grid{grid-template-columns: repeat(2, minmax(0,1fr))}}
@media (min-width:960px){.grid{grid-template-columns: repeat(3, minmax(0,1fr))}}

.card{border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff; display:flex; flex-direction:column}
.card .thumb{position:relative; aspect-ratio: 4/3; overflow:hidden; background:#f8fafc; cursor:pointer}
.card img{width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease}
.card:hover img{transform: scale(1.05)}
.card .content{padding:12px}
.card h3{margin:0; font-size:16px; line-height:1.3; cursor:pointer}
.card p{margin:6px 0 0; color:var(--muted); font-size:14px}
.card .row{display:flex; align-items:center; justify-content:space-between; margin-top:10px}
.price{font-weight:900; font-size:18px}
.empty{text-align:center; color:var(--muted); padding:20px 0}

.site-footer{border-top:1px solid var(--border); background:#fff; margin-top:20px}
.site-footer .container{padding:18px 0; color:var(--muted); font-size:14px}

.overlay{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:800}
.drawer{position:fixed; top:0; right:0; height:100%; width:100%; max-width:420px; background:#fff; border-left:1px solid var(--border);
        display:flex; flex-direction:column; transform:translateX(100%); transition: transform .25s ease; z-index:900}
.drawer.open{transform:translateX(0)}
.drawer-header{display:flex; align-items:center; justify-content:space-between; padding:14px; border-bottom:1px solid var(--border)}
.cart-items{flex:1; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:10px}
.cart-item{display:flex; gap:10px; border:1px solid var(--border); border-radius:14px; padding:10px}
.cart-item img{width:64px; height:64px; border-radius:10px; object-fit:cover}
.qty{display:inline-flex; align-items:center; gap:6px}
.qty button{width:28px; height:28px; border-radius:8px; border:1px solid var(--border); background:#fff; cursor:pointer}
.qty input{width:44px; text-align:center; border:1px solid var(--border); border-radius:8px; padding:6px}
.remove{border:none; background:transparent; color:#ef4444; font-weight:700; cursor:pointer}
.cart-summary{border-top:1px solid var(--border); padding:12px}
.cart-summary .row{display:flex; align-items:center; justify-content:space-between; margin:8px 0}
.cart-summary .total strong{font-size:20px}
.coupon{display:flex; gap:8px; margin-top:8px}
.coupon input{flex:1; border:1px solid var(--border); border-radius:10px; padding:10px}

/* Product page layout */
.product-wrap{display:grid; grid-template-columns:1fr; gap:18px; margin:18px 0}
@media (min-width:960px){.product-wrap{grid-template-columns: 520px 1fr}}
.p-hero{aspect-ratio: 4/5; background:#f7f7f7; border-radius:12px; overflow:hidden}
.p-hero img{width:100%; height:100%; object-fit:contain}
.p-thumbs{display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; margin-top:10px}
.p-thumbs button{border:1px solid var(--border); border-radius:10px; padding:6px; background:#fff; cursor:pointer}
.p-thumbs img{width:100%; aspect-ratio:1/1; object-fit:cover}
.p-title{font-size:32px; margin:0}
.p-price{font-size:24px; font-weight:800; margin:8px 0}
.p-stock{display:flex; align-items:center; gap:8px; color:#059669}
.p-stock::before{content:""; width:8px; height:8px; border-radius:999px; background:#10b981; display:inline-block}
.p-actions{display:flex; gap:8px; margin:10px 0; flex-wrap:wrap}
.benefits{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin:24px 0; color:#111}
.benefits .card{padding:16px; align-items:center; text-align:center}


/* Urgency badge */
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid #fde68a; background:#fffbeb; color:#92400e}
.badge svg{width:14px; height:14px}
/* === Desktop banner (edge-to-edge) — centered, no crop, responsive height === */
@media (min-width: 641px){
  .banner-slider{
    width:100vw !important;
    max-width:100vw !important;
    margin-left: calc(50% - 50vw) !important; /* full-bleed */
    overflow:hidden !important;
  }
  .banner-slider > div{ /* track injected by JS */
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:auto !important;
  }
  .banner-slider img{
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    max-height: clamp(320px, 40vh, 520px) !important; /* B: responsive height */
    object-fit:contain !important;
    margin:0 auto !important;
  }
}

/* === FINAL: top-banner desktop + banner-slider desktop (edge-to-edge, no crop) === */

/* DESKTOP – barra azul centrada, bold, sempre no topo */
@media (min-width: 961px){
  .top-banner{
    background:#005bbb !important;
    color:#fff !important;
    text-align:center !important;
    font-weight:700 !important;
    height:48px !important;
    line-height:48px !important;
    display:block !important;
    width:100% !important;
    position:sticky; top:0; z-index:1000;
  }
}

/* DESKTOP – banner ocupa toda a largura, sem cortes e centrado */
@media (min-width: 961px){
  .banner-slider{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important; /* full-bleed */
    overflow:hidden !important;
  }
  /* track que o JS cria (o <div> dentro de .banner-slider) */
  .banner-slider > div{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;  /* impede “puxar” p/ a esquerda/direita */
    width:100% !important;
    height:auto !important;
  }
  /* imagem do slide: proporções naturais, sem zoom, centrada */
  .banner-slider img{
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    max-height:clamp(320px, 40vh, 520px) !important; /* altura responsiva */
    object-fit:contain !important;
    margin:0 auto !important;
  }
}

/* === FIX: remover o “quadrado” entre os banners no desktop === */
@media (min-width: 961px){
  /* o <div> que o JS cria dentro de .banner-slider é o “track” */
  .banner-slider > div{
    justify-content: flex-start !important; /* em vez de center */
  }
  /* garantir que cada slide ocupa toda a altura do banner */
  .banner-slider > div > div{
    height: 100% !important;
  }
  /* sem margens inesperadas na imagem */
  .banner-slider img{
    margin: 0 !important;
  }
}

/* === MOBILE ONLY fixes (≤640px): 3 colunas, barra azul, banner edge-to-edge, logo centrado === */
@media (max-width: 640px){

  /* 3 produtos por linha */
  .grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  /* Logo centrado no topo do header */
  .header-inner{
    display:flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .brand{ display:flex; align-items:center; justify-content:center; }

  /* Barra azul: visível, bold e texto centrado (mobile) */
  .top-banner{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    font-weight:700 !important;
    background:#005bbb !important;
    color:#fff !important;
    line-height: 1.2;
    padding: 8px 10px;      /* altura confortável numa ou duas linhas */
  }

  /* Banner (carrossel) edge-to-edge no mobile (até à direita e à esquerda) */
  .banner-slider{
    width:100vw !important;
    max-width:100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    height: 230px !important;      /* ajusta se quiseres (200–260px) */
    overflow:hidden !important;
  }
  /* track criado via JS */
  .banner-slider > div{
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .banner-slider img{
    display:block !important;
    max-height:100% !important;
    width:auto !important;
    max-width:100% !important;
    object-fit:contain !important;
    margin:0 auto !important;
  }
}


/* === MOBILE (≤640px) — banners edge-to-edge, proporção certa, sem overflow lateral === */
@media (max-width: 640px){
  html, body { overflow-x: hidden; }

  .banner-slider{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    height:230px !important;
    overflow:hidden !important;
  }
  .banner-slider > div{
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
  }
  .banner-slider img{
    display:block !important;
    max-height:100% !important;
    width:auto !important;
    max-width:100% !important;
    object-fit:contain !important;
    margin:0 auto !important;
  }
}

/* === MOBILE (≤640px) — HOME: logo ligeiramente à direita (não afeta produto) === */
@media (max-width: 640px){
  body:not(.is-product) .brand{ transform: translateX(22px); }
}

/* === MOBILE (≤640px) — PRODUTO: header compacto (logo esq, ações dir) e sem barra azul === */
/* === MOBILE (≤640px) — PRODUTO: header compacto */
@media (max-width: 640px){
  .is-product .top-banner{ display:none !important; }

  .is-product .header-inner{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .is-product .brand{
    transform:none !important;
    margin:0;
  }

  .is-product .actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:nowrap;
  }

  .is-product .search{ display:none !important; }

  .is-product .cart-btn > span:not(.pill),
  .is-product .cart-btn .label{ display:none !important; }
  .is-product .cart-btn::before{
    content:"🛒"; font-size:18px; line-height:1; display:inline-block;
  }
  .is-product .cart-btn .pill{ font-size:10px; padding:1px 6px; }
}

/* === MOBILE FIX (≤640px): banner sem cortes/bugs e colado aos produtos === */
@media (max-width: 640px){
  /* nada de 100vw no mobile para evitar “saltos” e overflows */
  .banner-slider{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;              /* remove espaços acima/baixo */
    height: clamp(220px, 38vh, 280px) !important;
    overflow: hidden !important;
  }

  /* o track que o JS cria */
  .banner-slider > div{
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;   /* evita “quadrado/gap” entre slides */
  }

  /* cada slide ocupa exatamente a largura visível */
  .banner-slider > div > div{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* imagem com proporção correta, sem zoom nem cortes */
  .banner-slider img{
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
  }

  /* encostar produtos ao banner (compacto) */
  .grid{ margin-top: 8px !important; }

  /* garantir que não há scroll lateral */
  html, body{ overflow-x: hidden; }
}

/* === MOBILE: remover espaços acima e abaixo do banner === */
@media (max-width: 640px){
  .top-banner { margin-bottom: 0 !important; }
  .header-inner { padding-bottom: 0 !important; }
  .grid { margin-top: 0 !important; }
}

/* === MOBILE (≤640px): remover espaço acima/baixo do banner, colar aos produtos === */
@media (max-width: 640px){
  /* header mais “colado” ao que vem a seguir */
  .header-inner{ padding-bottom: 0 !important; }
  .site-header{ margin-bottom: 0 !important; }

  /* o banner em si sem margens/padding */
  .banner-slider{
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;      /* sem 100vw para evitar bugs */
    max-width: 100% !important;
    height: 100px !important;    /* ajusta: 220–260 se quiseres */
    overflow: hidden !important;
  }

  /* colar o banner ao que está ANTES e DEPOIS (dependa do markup) */
  * + .banner-slider{ margin-top: 0 !important; }
  .banner-slider + *{ margin-top: 6px !important; } /* um respiro mínimo */

  /* se o banner estiver dentro de .container */
  .container > * + .banner-slider{ margin-top: 0 !important; }
  .container > .banner-slider + *{ margin-top: 6px !important; }

  /* filtros logo a seguir ao banner: tirar o “18px” global */
  .filters{ margin-top: 6px !important; }

  /* garantir que não há scroll lateral */
  html, body{ overflow-x: hidden; }
}

/* === MOBILE ONLY (≤640px): WA ícone, pesquisa mais curta, carrinho com emoji === */
@media (max-width: 640px){

/* mobile: botão WhatsApp com ícone oficial, sem fundo */
@media (max-width: 640px){
  .btn.whatsapp{
    background:transparent !important;
    border:none !important;
    font-size:0 !important;
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .btn.whatsapp::before{
    content:"" !important;
    display:block !important;
    width:22px !important;
    height:22px !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:contain !important;
    background-image:url("data:image/svg+xml,%3Csvg fill='%2300D756' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 .667C7.547.667.667 7.547.667 16c0 2.82.747 5.547 2.173 7.947L.667 31.333l7.533-2.107A15.26 15.26 0 0 0 16 31.333C24.453 31.333 31.333 24.453 31.333 16 31.333 7.547 24.453.667 16 .667zm8.84 22.107c-.373 1.04-2.187 2-3.04 2.133-.747.107-1.693.187-2.747-.173-.627-.2-1.44-.467-2.493-.913-4.387-1.893-7.24-6.533-7.453-6.84-.213-.307-1.787-2.373-1.787-4.533 0-2.16 1.12-3.227 1.52-3.68.4-.453.88-.567 1.173-.567.293 0 .587 0 .84.013.267.013.627-.107.987.747.373.88 1.28 3.053 1.387 3.267.107.213.173.467.04.747-.133.28-.2.467-.4.72-.2.253-.427.567-.6.76-.2.2-.413.427-.18.84.24.413 1.067 1.747 2.293 2.827 1.573 1.4 2.88 1.827 3.293 2.027.413.2.653.173.893-.107.24-.28 1.04-1.2 1.32-1.6.28-.4.56-.333.933-.2.373.133 2.4 1.133 2.813 1.333.413.2.68.307.787.467.107.16.107.933-.267 1.973z'/%3E%3C/svg%3E") !important;
  }
}

  /* 2) Barra de pesquisa mais curta (evita empurrar o carrinho para fora) */
  .search{ max-width: 62vw !important; }
  .search input{
    max-width: 62vw !important;
    width: 100% !important;
  }

  /* 3) Carrinho: trocar texto por emoji (badge mantida) */
  .cart-btn{
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 8px 10px;
    font-size: 0 !important;            /* esconde qualquer texto dentro */
  }
  .cart-btn::before{
    content: "🛒";
    font-size: 18px; line-height: 1; display: inline-block;
  }
  .cart-btn .pill{ font-size: 10px; padding: 1px 6px; } /* badge menor */

  /* segurança: sem scroll lateral */
  html, body { overflow-x: hidden; }
}












/* === Checkout refinado === */
.checkout{ padding:24px 0; }
.checkout-grid{ display:grid; gap:20px; }
@media(min-width: 900px){
  .checkout-grid{ grid-template-columns: 1.6fr 1fr; align-items:start; }
}
.card{ background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding:18px; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.card h2{ margin-top:0; font-size:20px; }

/* Campos em grelha dupla para morada */
.field-grid{ display:grid; gap:12px; grid-template-columns:1fr; }
@media(min-width: 700px){
  .field-grid{ grid-template-columns: 1fr 1fr; }
}
.field-grid .full{ grid-column: 1 / -1; }

/* Sumário da encomenda */
.order-summary p{ display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:18px; }
.order-summary small{ font-weight:400; font-size:12px; color:var(--muted); }

/* Painel de confirmação */
.confirm-panel{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:grid; place-items:center; z-index:3000; }
.confirm-card{ background:#fff; border-radius:20px; padding:24px; width:min(560px, 92vw); border:1px solid var(--border); text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.confirm-card svg{ width:52px; height:52px; color:#16a34a; margin:6px auto 4px; display:block; }
.confirm-card h2{ margin:6px 0 4px; }
.confirm-card p{ color:var(--muted); margin:0 0 14px; }
.confirm-card .actions{ display:flex; gap:10px; justify-content:center; }
.confirm-card .actions .btn{ min-width:160px; }


/* Lista de itens no checkout */
.items-list{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:8px; }
.items-list li{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px dashed var(--border); padding:6px 0; }
.items-list li span{ display:flex; gap:6px; align-items:baseline; }
.items-list li small{ color:var(--muted); font-weight:500; }


/* Checkout: miniaturas minimalistas */
.items-list li.mini-item{ display:grid; grid-template-columns: 56px 1fr auto; align-items:center; gap:12px; border-bottom:1px dashed var(--border); padding:8px 0; }
.items-list li.mini-item img{ width:56px; height:56px; object-fit:cover; border-radius:12px; border:1px solid var(--border); background:#fff; }
.items-list li.mini-item .qty{ color:var(--muted); font-weight:600; }


/* === Social proof / Testimonials === */
.social-proof{ padding: 26px 0 6px; background: #fff; }
.social-proof .trustbar{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.social-proof .trustbar .badge{ background:#0ea5e9; color:#fff; border-radius:999px; padding:2px 8px; font-weight:800; font-size:12px; }
.social-proof .trustbar .score{ font-weight:700; }
.social-proof .trustbar .verified{ color:#16a34a; font-weight:700; }
.social-proof .trustbar .sep{ margin:0 8px; color: var(--muted); }
@media(min-width: 900px){
  .social-proof .trustbar{ flex-direction:row; align-items:center; justify-content:space-between; }
}

.testi-grid{ display:grid; gap:14px; grid-template-columns: 1fr; }
@media(min-width: 760px){ .testi-grid{ grid-template-columns: repeat(2,1fr); } }
@media(min-width: 1100px){ .testi-grid{ grid-template-columns: repeat(4,1fr); } }

.testi-card{ background:#fff; border:1px solid var(--border); border-radius:18px; padding:14px; box-shadow:0 6px 20px rgba(0,0,0,.06); display:flex; flex-direction:column; gap:8px; }
.testi-head{ display:flex; align-items:center; gap:10px; }
.avatar{ width:40px; height:40px; border-radius:999px; display:grid; place-items:center; font-weight:800; color:#fff; background: linear-gradient(135deg, #2b4aa0, #0ea5e9); }
.avatar::after{ content: attr(data-initials); font-size:14px; }
.who{ display:flex; flex-direction:column; line-height:1.1; }
.who strong{ font-size:14px; }
.who small{ font-size:12px; color: var(--muted); }
.stars{ margin-left:auto; display:flex; gap:2px; color: var(--yellow); }
.star{ width:16px; height:16px; fill: currentColor; }

.testi-text{ font-size:14px; margin:4px 0; }
.meta{ display:flex; align-items:center; gap:8px; color: var(--muted); font-size:12px; }
.meta .verified{ color:#16a34a; font-weight:700; }

/* === MOBILE: Carousel dos reviews (apenas 1 visível) === */
@media (max-width: 640px){
  .testi-grid {
    position: relative;
    overflow: hidden;
  }
  .testi-card {
    width: 100%;
    flex: 0 0 100%;
    display: none;
  }
  .testi-card.active {
    display: block;
  }
}
/* === MOBILE: Setas do carousel (fora da box) === */
@media (max-width: 640px){
  .testi-grid {
    position: relative;
    overflow: hidden;
  }

  .testi-card {
    width: 100%;
    flex: 0 0 100%;
    display: none;
  }
  .testi-card.active {
    display: block;
  }

  .testi-grid .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    color: #333;
    opacity: 0.9;
    font-weight: bold;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    z-index: 20;
  }

  /* AGORA FORA DA CAIXA, MAS PRÓXIMO */
  .testi-grid .arrow.prev { 
    left: -11px;  /* valor que coloca fora da caixa */
  }
  .testi-grid .arrow.next { 
    right: -11px;
  }
}

/* === CHECKOUT — Estilo moderno, arredondado e mobile first === */
.is-checkout .checkout { max-width:600px; padding:20px 0 50px; }
.is-checkout .checkout-title { font-size:26px; margin:0 0 4px; font-weight:900; }
.is-checkout .checkout-sub { margin:0 0 18px; color:#555; }

.checkout-form { display:flex; flex-direction:column; gap:14px; }

.checkout-form input,
.checkout-form select,
.checkout-form textarea {
  padding:14px;
  border:1px solid #ddd;
  border-radius:12px;
  font-size:15px;
  background:#fff;
}
.checkout-form input:focus,
.checkout-form select:focus,
.checkout-form textarea:focus {
  outline:none;
  border-color:#e60012;
  box-shadow:0 0 0 2px rgba(230,0,18,0.18);
}

.checkout-row { display:flex; gap:10px; }
.checkout-row input { flex:1; }

.checkout-btn {
  background:#e60012;
  color:#fff;
  padding:15px;
  border:none;
  border-radius:12px;
  font-size:17px;
  cursor:pointer;
  font-weight:700;
  transition:0.25s;
}
.checkout-btn:hover { background:#b0000e; }

.checkout-total { margin-top:4px; font-size:17px; font-weight:700; }

.checkout-success { display:none; margin-top:20px; color:#0a0; }

@media (max-width:640px){
  .checkout-row { flex-direction:column; }
}

/* === CHECKOUT — Caixas de resumo & confiança === */
.checkout-box {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  margin:18px 0;
  box-shadow:0 3px 14px rgba(0,0,0,.06);
}
.checkout-box h2 {
  margin:0 0 10px;
  font-size:18px;
  font-weight:800;
}
.checkout-box p {
  margin:4px 0;
  font-size:14px;
  color:#555;
}