:root{
  --bg:#ffffff;
  --soft:#f6f7fb;          /* superfícies suaves */
  --card:#ffffff;          /* cartões */
  --text:#1b2430;          /* texto principal */
  --muted:#667085;         /* texto secundário */
  --border:rgba(0,0,0,.08);
  --primary:#0b4d8f;       /* azul profundo */
  --primary-600:#093f76;
  --accent:#ff7e46;        /* laranja da marca já usada */
  --accent-2:#ffc635;      /* amarelo preço */
  --radius:14px;           /* cantos mais suaves */
  --shadow-sm:0 3px 10px rgba(0,0,0,.06);
  --shadow-md:0 10px 30px rgba(0,0,0,.08);
  /* Topbar variables */
  --topbar-bg:#ffffff;
  --topbar-border:#e9edf3;
  --topbar-text:#0f172a;
  --topbar-text-muted:#64748b;
  --topbar-link:#3aa6ea;
}

html, body{background:var(--bg); color:var(--text)}

/* Container com largura mais moderna */
.conteudo{max-width:1200px; width:100%; margin:0 auto; padding:0 16px}

/* Tipografia mais arejada */
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';}
.titulo{font-weight:700; font-size:1.35rem; letter-spacing:.2px; margin:.5rem 0 0.75rem; padding:0}
small, .muted{color:var(--muted)}

/* Links acessíveis */
a{color:inherit; text-decoration:none}
a:hover{opacity:.85}
:focus-visible{outline:3px solid rgba(11,77,143,.25); outline-offset:2px}

/* =============================================
   TOP BAR / HEADER
============================================= */
.base-topo .barra{
  background:var(--topbar-bg, #ffffff);
  border-bottom:1px solid var(--topbar-border, #e9edf3);
  box-shadow:0 2px 10px rgba(16, 24, 40, 0.04);
  padding:.55rem 0;
  color:var(--topbar-text, #0f172a);
}
.base-topo .barra .conteudo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.base-topo .barra .submenu{border:1px solid var(--border); box-shadow:var(--shadow-md)}

/* Contatos - telefone e email */
.base-topo .barra .contatos{
  display:flex !important;
  align-items:center;
  gap:1rem;
  list-style:none;
  margin:0;
  padding:0;
  flex:1;
  visibility:visible !important;
  opacity:1 !important;
}

.base-topo .barra .contatos li{
  display:flex;
  align-items:center;
  gap:0.5rem;
}

.base-topo .barra .contatos a{
  display:flex;
  align-items:center;
  gap:0.5rem;
  color:var(--topbar-text, #0f172a);
  font-weight:600;
  font-size:0.875rem;
  text-decoration:none;
  transition:color 0.2s ease;
}

.base-topo .barra .contatos a:hover{
  color:var(--topbar-link, #3aa6ea);
  opacity:0.85;
}

.base-topo .barra .contatos a svg{
  flex-shrink:0;
}

.base-topo .barra .submenu a{
  color:var(--topbar-text, #0f172a);
  font-weight:600;
  transition:color 0.2s ease;
}

.base-topo .barra .submenu a:hover{
  color:var(--topbar-link, #3aa6ea);
  opacity:0.85;
}

.areaTopo{padding:1.25rem 0}
.areaTopo .logo{width:auto; min-width:160px; display:flex; align-items:center;}
.areaTopo .logo .logo-text{font-size:1.5rem; font-weight:700; color:var(--text); text-decoration:none; white-space:nowrap;}
.areaTopo .grupoSearch form{background:var(--soft); border-radius:999px; border:1px solid var(--border)}
.areaTopo .grupoSearch form input{padding:.9rem 1rem}
.areaTopo .grupoSearch form .btn{padding:0 .9rem}

/* Mini cartão de ações do topo */
.areaTopo .itemCesta{display:block; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-sm)}
.areaTopo .itemCarrinho .item1{gap:10px}
.areaTopo .itemCarrinho .item1 span{background:var(--accent)}
.areaTopo .itemCarrinho.sub ul li{border-color:var(--border)}

/* =============================================
   MENU SUPERIOR — carrossel horizontal
============================================= */
.base-menu-topo{background:var(--soft); height:auto; padding:.6rem 0}
.base-menu-topo .conteudo{gap:12px}
.carousel{gap:.75rem}
.carousel-item{min-width:110px; padding:.5rem .85rem; background:#fff; border:1px solid var(--border); border-radius:999px; box-shadow:var(--shadow-sm); text-align:center}
.carousel-item:hover{opacity:.9}
.carousel-ante,.carousel-prox{top:50%; transform:translateY(-50%); width:36px; height:36px; background-size:18px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.08))}

/* =============================================
   BANNER PRINCIPAL
============================================= */
.base-banner{border-radius:var(--radius); overflow:hidden}
.base-banner .lSSlideOuter .lSPager.lSpg > li a{border-color:#00000066}
.base-banner .lSSlideOuter .lSPager.lSpg > li.active a{background:#000}

/* =============================================
   CARDS DE PRODUTO / LISTAS
============================================= */
.destaques{padding:0}
.destaques .caixa{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); transition:transform .12s ease, box-shadow .12s ease}
.destaques .caixa:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
/* Em touch: desabilita hover para evitar "sticky hover" que bloqueia toque em alguns dispositivos */
@media (hover: none) {
  .destaques .caixa:hover{transform:none; box-shadow:var(--shadow-sm)}
}

/* Fix global: botões e links clicáveis em mobile/tablet */
.loja-main .btn,
.loja-main button,
.loja-main a[href] {
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}
/* Dentro do carrossel (ex: Produtos semelhantes) - garantir que toques cheguem aos botões */
.lSSlideOuter .caixa .opcoes a,
.lSSlideOuter .caixa .btn,
.lSSlideOuter a.btn {
  pointer-events: auto;
  touch-action: manipulation;
  position: relative;
  z-index: 5;
}
.destaques .caixa .opcoes{right:12px; top:12px}
.destaques .caixa h4{font-size:1rem; font-weight:600}
.precoAnt{color:#9da3ae}

/* Selo de preço mais elegante */
.elementos{gap:8px}
.elementos .preco{background:var(--accent-2); padding:4px 14px; border-radius:10px; box-shadow:inset 0 -1px 0 rgba(0,0,0,.08)}
.elementos .preco strong{font-size:1.5rem}

/* =============================================
   DETALHE DO PRODUTO
============================================= */
.detalhes .thumbProd{background:var(--soft); border:1px solid var(--border); border-radius:var(--radius); height:auto; min-height:420px}
.detalhes .areaProd{gap:14px}
.detalhes .areaProd .minThumb .thumb{background:var(--soft); border:1px solid var(--border); border-radius:10px}
.detalhes .caixa{border:1px solid var(--border); background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.detalhes .caixa h4{font-weight:700; font-size:2rem; line-height:2.4rem; margin-top:.6rem}
.detalhes .caixa .preco{color:#d86464}
.detalhes .botoes .btn{border-radius:10px}

/* Variações (cor/tamanho) mais "chip" */
.CorTam{gap:8px}
.CorTam .item{border:1px solid var(--border); background:#fff; padding:.55rem .75rem; border-radius:999px}
.CorTam input[type=radio]:checked + label{background:var(--accent); color:#fff; border-color:var(--accent)}

/* =============================================
   CAIXAS / FORM / CHECKOUT
============================================= */
.caixa-itens{border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.caixa-itens .iten{border-color:var(--border)}
.cont input{border:1px solid var(--border); border-radius:10px}
.cont .plusButton,.cont .minusButton{color:var(--accent)}

.caixa-total{background:var(--soft)}
.caixa-cupom{border:1px solid var(--border)}
.caixa-cupom .group .form-campo{background:#fff; border:1px solid var(--border)}

.checkout .caixa{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.checkout .caixa.alt{background:var(--soft)}
.checkout .total{background:linear-gradient(0deg,#d7ff9b, transparent 40%)}

/* Rádio custom dos steps */
.checkout.endereco .caixa.end .opcoes .opCheck li input[type=radio] + label:before{border-color:var(--accent); color:var(--accent)}
.checkout.endereco .caixa.end .opcoes .opCheck li input[type=radio]:checked + label:before{border-color:var(--accent);}

/* =============================================
   BUSCA / FILTROS
============================================= */
.Busca .resulFilter{border-left:1px solid var(--border); box-shadow:var(--shadow-md)}
.tarja{background:#f2f4f7; color:var(--muted)}
.fil_Categorias h3{color:var(--text)}
.Busca .checks label input[type=checkbox]::before{border-color:#1e1e1e}

/* =============================================
   RODAPÉ
============================================= */
.rodape{background:#0e131b; color:#cbd5e1}
.rodape .thumb{filter:invert(1) saturate(.4)}
.rodape .endereco li{color:#94a3b8}

/* =============================================
   BOTÕES / INPUTS — consistentes
============================================= */
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border:1px solid transparent; border-radius:10px; font-weight:600; cursor:pointer; transition:box-shadow .12s ease, transform .06s ease}
.btn:active{transform:translateY(1px)}
.btn-primario{background:var(--primary); color:#fff}
.btn-primario:hover{background:var(--primary-600)}
.btn-escuro{background:#1c1c1c; color:#fff}
.btn-escuro:hover{opacity:.9}
.btn-ghost{background:#fff; border-color:var(--border)}

input[type=text], input[type=number], input[type=email], select{
  background:#fff; border:1px solid var(--border); border-radius:10px; padding:.7rem .85rem
}

/* =============================================
   RESPONSIVIDADE
============================================= */
@media (max-width: 992px){
  .areaTopo .grupoSearch{width:100%}
  .areaTopo .mobCarrinho{top:unset; right:10px}
}
@media (max-width: 768px){
  .titulo{font-size:1.2rem}
  .destaques .caixa h4{font-size:.95rem}
  .detalhes .caixa h4{font-size:1.6rem; line-height:2rem}
}
@media (max-width: 576px){
  .conteudo{padding:0 12px}
  .carousel-item{min-width:96px}
}

/* =============================================
   RESUMO DO PEDIDO (checkout/pagamento)
   Hierarquia visual, truncate, imagem fixa
============================================= */
.resultado .resumo-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
  min-width:0;
}
.resultado .resumo-item:last-of-type{
  border-bottom:none;
}
.resultado .resumo-img{
  width:56px;
  height:56px;
  min-width:56px;
  min-height:56px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--soft);
}
.resultado .resumo-info{
  flex:1;
  min-width:0;
}
.resultado .resumo-titulo{
  font-size:0.9rem;
  font-weight:500;
  color:var(--text);
  line-height:1.35;
  margin:0 0 4px 0;
  /* 2 linhas + reticências */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}
.resultado .resumo-variacao{
  font-size:0.8rem;
  color:var(--muted);
  margin-bottom:2px;
  line-height:1.3;
}
.resultado .resumo-meta{
  font-size:0.8rem;
  color:var(--muted);
  margin:0;
}
/* Totais do resumo mantêm destaque */
.resultado .caixa-itens .iten strong{
  font-weight:600;
  color:var(--text);
}
.resultado .caixa-itens .iten small{
  color:var(--muted);
  font-size:0.9rem;
}
@media (max-width: 576px){
  .resultado .resumo-img{
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
  }
  .resultado .resumo-titulo{
    font-size:0.85rem;
  }
}