:root {
  --primaria:    #7A1530;
  --secundaria:  #A01035;
  --destaque:    #D4AF37;
  --fundo:       #FBF7F4;
  --texto:       #2B1119;
  --rosa-suave:  #FCE7EC;
  --fonte-titulos: 'Playfair Display', serif;
  --fonte-textos:  'Montserrat', sans-serif;
}

body {
  background-color: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-textos);
}

h1, h2, h3, .titulo-marca {
  font-family: var(--fonte-titulos);
}

.botao-primario {
  background-color: var(--primaria);
  border-color: var(--primaria);
  color: #fff;
}
.botao-primario:hover {
  background-color: var(--secundaria);
  border-color: var(--secundaria);
}

.botao-secundario {
  background-color: transparent;
  border: 1px solid var(--secundaria);
  color: var(--secundaria);
}

.botao-destaque {
  background-color: var(--destaque);
  border-color: var(--destaque);
  color: #fff;
}

.texto-primario { color: var(--primaria); }
.fundo-suave    { background-color: var(--rosa-suave); }

/* ===== VISUAL MODERNO (reformulação) ===== */
:root {
  --escuro: #1B0E14;            /* menu lateral da administração */
  --sombra: 0 6px 24px rgba(27, 14, 20, .08);
  --raio: 14px;
}

.btn { border-radius: 10px; transition: all .18s ease; font-weight: 600; }
.btn:active { transform: scale(.97); }
.botao-primario:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--secundaria) 45%, transparent); }
.botao-secundario:hover { background: var(--secundaria); color: #fff; }

.card { border-radius: var(--raio); box-shadow: var(--sombra); border: 0; }
.form-control, .form-select { border-radius: 10px; border-color: #E9DDE2; }
.form-control:focus, .form-select:focus {
  border-color: var(--secundaria);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--secundaria) 18%, transparent);
}
.badge { border-radius: 8px; font-weight: 600; }
.alert { border-radius: var(--raio); border: 0; }
img { border-radius: 4px; }
.navbar { backdrop-filter: blur(8px); }

/* Tabelas de listagem da administração */
.tabela-admin { background: #fff; }
.tabela-admin thead th {
  background: var(--fundo);
  color: var(--texto);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  position: relative;
  white-space: nowrap;
  user-select: none;
}
.tabela-admin tbody tr { transition: background .15s; }
.tabela-admin tbody tr:hover { background: color-mix(in srgb, var(--rosa-suave) 22%, #fff); }
.redimensionador {
  position: absolute; right: 0; top: 0; bottom: 0; width: 6px;
  cursor: col-resize; border-right: 2px solid transparent;
}
.redimensionador:hover, .redimensionador.arrastando { border-right-color: var(--secundaria); }

/* Barra padrão das listagens */
.barra-listagem .input-group-text { background: #fff; border-right: 0; border-radius: 10px 0 0 10px; border-color: #E9DDE2; }
.barra-listagem .form-control { border-left: 0; }

/* Menu lateral escuro (administração) */
.menu-lateral { background: var(--escuro) !important; }
.menu-lateral a { color: rgba(255,255,255,.72); transition: all .15s; }
.menu-lateral a:hover { background: rgba(255,255,255,.08); color: #fff; }
.menu-lateral a.ativo {
  background: linear-gradient(90deg, var(--secundaria), color-mix(in srgb, var(--secundaria) 60%, var(--primaria)));
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--secundaria) 40%, transparent);
}

/* Links sem sublinhado (padrão e-commerce); use .link-sublinhado quando quiser destacar */
a { text-decoration: none; }
a:hover { text-decoration: none; }
.link-sublinhado { text-decoration: underline; }
p a, .card-body p a { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   LAYOUT DEFINITIVO (mockup) — Loja Guerrear
   ============================================================ */
:root{
  --bordo-escuro: #7A1530;
  --vinho: var(--secundaria);
  --dourado: var(--destaque, #C9A24B);
}
body{ font-family:'Poppins','Montserrat',sans-serif; color:var(--texto); background:#fff; }
.titulo-marca, h1,h2,h3,.fonte-titulo{ font-family:'Cormorant Garamond','Playfair Display',serif; }

/* ---- Topbar ---- */
.topbar{ background:var(--bordo-escuro); color:#f7dfe6; font-size:.8rem; }
.topbar a{ color:#f7dfe6; }
.topbar a:hover{ color:#fff; }
.topbar .bi{ color:var(--dourado); }
.topbar .divisoria{ opacity:.35; }

/* ---- Cabeçalho ---- */
.cabecalho-loja{ background:#fff; }
.busca-mock{ border:2px solid var(--bordo-escuro); border-radius:8px; overflow:hidden; }
.busca-mock input{ border:0; height:46px; box-shadow:none!important; font-size:.9rem; }
.busca-mock select{ border:0; border-left:1px solid #eee; width:auto; min-width:160px; box-shadow:none!important;
  color:#8b7580; font-size:.82rem; padding-right:1.8rem; }
.busca-mock button{ background:var(--bordo-escuro); color:#fff; border:0; width:56px; }
.busca-mock button:hover{ background:var(--vinho); }
.acao-topo{ color:var(--texto); display:flex; align-items:center; gap:.5rem; line-height:1.1; }
.acao-topo .bi{ font-size:1.5rem; color:var(--bordo-escuro); }
.acao-topo small{ display:block; font-size:.7rem; color:#9a8790; }
.acao-topo strong{ font-size:.82rem; font-weight:600; }
.acao-topo:hover{ color:var(--vinho); }
.acao-topo:hover .bi{ color:var(--vinho); }
.selo-contador{ position:absolute; top:-6px; right:-8px; background:var(--vinho); color:#fff;
  font-size:.62rem; font-weight:700; min-width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; }

/* ---- Navegação principal ---- */
.nav-principal{ background:#fff; border-bottom:1px solid #F0E3E8; }
.btn-categorias{ background:var(--bordo-escuro); color:#fff; font-weight:600; letter-spacing:.03em;
  border-radius:8px; padding:.6rem 1.3rem; white-space:nowrap; }
.btn-categorias:hover{ background:var(--vinho); color:#fff; }
.menu-principal{ display:flex; gap:.2rem; overflow-x:auto; scrollbar-width:none; }
.menu-principal::-webkit-scrollbar{ display:none; }
.menu-principal a{ color:var(--texto); font-size:.82rem; font-weight:600; letter-spacing:.02em;
  padding:.55rem .8rem; white-space:nowrap; border-bottom:2px solid transparent; text-transform:uppercase; }
.menu-principal a:hover, .menu-principal a.ativa{ color:var(--vinho); border-bottom-color:var(--dourado); }

/* ---- Hero ---- */
.hero-mock{ background:linear-gradient(120deg,#FCE7EC 0%,#FBD9E1 55%,#F6C9D3 100%); overflow:hidden; }
.hero-mock .rotulo{ letter-spacing:.18em; color:var(--dourado); font-weight:700; font-size:.8rem; }
.hero-mock h1{ font-size:clamp(2.2rem,4.6vw,3.6rem); font-weight:600; line-height:1.05; color:var(--vinho); }
.hero-mock .lead{ color:#7a5561; }

/* ---- Faixa de benefícios sobreposta ---- */
.faixa-beneficios{ background:#fff; border-radius:14px; box-shadow:0 10px 30px rgba(122,21,48,.10); }
.faixa-beneficios .item{ display:flex; gap:.7rem; align-items:center; }
.faixa-beneficios .bi{ font-size:1.6rem; color:var(--vinho); }
.faixa-beneficios .item strong{ font-size:.82rem; display:block; }
.faixa-beneficios .item span{ font-size:.72rem; color:#9a8790; }

/* ---- Seções ---- */
.titulo-secao{ font-weight:600; color:var(--texto); }
.link-ver-todos{ color:var(--vinho); font-weight:600; font-size:.85rem; }
.categoria-circulo img{ width:100%; aspect-ratio:1/1.15; object-fit:cover; border-radius:14px; }
.categoria-circulo div{ text-align:center; font-size:.8rem; font-weight:600; margin-top:.5rem; text-transform:uppercase; letter-spacing:.02em; }

/* ---- Cartão de produto (mockup) ---- */
.cartao-produto{ border:1px solid #F2E6EA; border-radius:14px; overflow:hidden; background:#fff; transition:box-shadow .15s, transform .15s; }
.cartao-produto:hover{ box-shadow:0 12px 26px rgba(122,21,48,.12); transform:translateY(-3px); }
.imagem-produto{ aspect-ratio:3/4; object-fit:cover; width:100%; }
.selo-produto{ position:absolute; top:10px; left:10px; color:#fff; font-size:.66rem; font-weight:700;
  padding:.22rem .6rem; border-radius:6px; letter-spacing:.03em; }
.selo-lancamento{ background:var(--vinho); }
.selo-medida{ background:var(--dourado); }
.selo-encomenda{ background:#8a6d3b; }
.preco-produto{ color:var(--vinho); font-weight:700; font-size:1.05rem; }
.parcelamento{ font-size:.72rem; color:#9a8790; }
.estrelas{ color:var(--dourado); font-size:.78rem; }

/* ---- Rodapé ---- */
.rodape-newsletter{ background:var(--bordo-escuro); color:#fff; }
.rodape-newsletter input{ border:0; border-radius:6px 0 0 6px; height:46px; }
.rodape-newsletter .btn{ background:var(--dourado); color:#3a2410; font-weight:700; height:46px; border-radius:0 6px 6px 0; white-space:nowrap; }
.rodape-newsletter form{ flex-wrap:nowrap; }
.rodape-newsletter input{ min-width:0; }
.rodape-links{ background:#fff; }
.rodape-links h5{ font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--vinho); font-weight:700; }
.rodape-links a{ color:#6f5b62; font-size:.85rem; display:block; padding:.2rem 0; }
.rodape-links a:hover{ color:var(--vinho); }
.rede-social{ width:40px; height:40px; border-radius:50%; background:var(--vinho); color:#fff; border:0;
  display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; transition:transform .15s, background .15s; text-decoration:none; }
.rede-social i, .rede-social .bi{ color:#fff !important; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; line-height:1; }
.rede-social i::before, .rede-social .bi::before{ margin:0; vertical-align:middle; }
.rede-social:hover{ background:var(--bordo-escuro); transform:translateY(-2px); }
.rede-social:hover i, .rede-social:hover .bi{ color:#fff !important; }