/*theme.css*/
:root{
  --brand-700:#2565B5;
  --brand-650:#226AB8;
  --brand-600:#197BC7;
  --brand-500:#0F93DB;
  --brand-400:#089DE1;
  --ink-900:#0f172a;
  --ink-600:#334155;
  --bg-50:#f1f5f9;
}

body{ background: var(--bg-50); color: var(--ink-900); }
a{ color: var(--brand-700); }
a:hover{ color: var(--brand-600); }

.topbar{ background: linear-gradient(90deg,var(--brand-700),var(--brand-500)); }
.search-input{ width: 320px; }
.btn-brand{
  --bs-btn-bg: var(--brand-700);
  --bs-btn-border-color: var(--brand-700);
  --bs-btn-hover-bg: var(--brand-600);
  --bs-btn-hover-border-color: var(--brand-600);
  --bs-btn-active-bg: var(--brand-650);
  --bs-btn-active-border-color: var(--brand-650);
  color:#fff;
}
.text-brand-700{ color: var(--brand-700)!important; }

.section-title{
  display:flex; align-items:center; gap:.5rem; margin-bottom:1rem;
}
.section-title::before{
  content:""; width:10px; height:24px; background:var(--brand-700); border-radius:2px;
}

.card-product{
  border:1px solid #e5e7eb; background:#fff; transition:transform .15s ease;
}
.card-product:hover{ transform: translateY(-2px); }
.card-product .price{ color: var(--brand-700); font-weight:700; }
.newsletter{ background: #fff; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb;}

.badge.rounded-pill{ font-weight:700; }
.newsletter input[type="email"]{ max-width: 360px; }

.section-title{display:block !important; text-align:left !important;}
.section-title h3{margin:0; text-align:left !important;}
.section-title h3 { text-transform: uppercase; }

.hero-banner{
  position: relative;
  min-height: 320px;
  padding: 2rem 2rem 2.25rem;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  display: flex; align-items: center;
}
@media (min-width: 992px){ .hero-banner{ min-height: 420px; padding: 3rem 3.5rem; } }
@media (max-width: 576px){
  .hero-banner{ background-image: var(--bg-mobile, var(--bg)); }
}
/* overlay em brand gradient */
.hero-banner::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, var(--brand-700, #1e40af), var(--brand-400, #3b82f6));
  opacity:.55; mix-blend-mode:multiply; border-radius:.75rem;
}
.hero-banner > *{ position: relative; z-index: 1; }

/* Selo do provador virtual (VTO) nos cards */
.card-product { position: relative; }
.vto-badge{
  position: absolute; top: .5rem; left: .5rem;
  background: rgba(255,255,255,.92);
  color: var(--brand-700);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 999px;
  padding: .25rem .55rem;
  font-size: .75rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .35rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  z-index: 2;
}
.vto-badge i{ font-size: .95rem; line-height: 1; }
.vto-badge:hover{ background: #fff; }