@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800&display=swap');

/* ========= ANNOUNCEMENT BAR (CSS only) ========= */
body::before {
  content: '\1F69A  Frete Gratis acima de R$299  |  Couro Artesanal Feito a Mao';
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: #1C1C1C;
  color: #ffffff;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: 'DM Sans', Roboto, sans-serif;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 44px;
}

header {
  position: fixed !important;
  top: 44px !important;
  left: 0 !important; right: 0 !important;
  z-index: 1001 !important;
  background: #ffffff !important;
  border-bottom: 1px solid #ebebeb !important;
  box-shadow: none !important;
  width: 100% !important;
}

.secao-banners { margin-top: 130px !important; }

.secao-banners .conteiner {
  max-width: 100% !important; width: 100% !important;
  padding-left: 0 !important; padding-right: 0 !important;
}

.banner.cheio, .banner.cheio .span12, .flexslider {
  width: 100% !important; max-width: 100% !important;
  margin: 0 !important; padding: 0 !important;
  border-radius: 0 !important; border: none !important;
}

.flexslider img { width: 100% !important; height: auto !important; display: block !important; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', 'DM Sans', sans-serif !important;
  font-weight: 700 !important; color: #1C1C1C !important; line-height: 1.2 !important;
}

body {
  font-family: 'DM Sans', Roboto, sans-serif !important;
  color: #1C1C1C !important; background-color: #f5f5f3 !important;
}

.botao:not(.botao-busca), .fundo-principal, .btn-block,
input[type="submit"], a.botao, .botao.principal {
  background-color: #1C1C1C !important; color: #ffffff !important;
  border: 2px solid #1C1C1C !important; border-radius: 100px !important;
  padding: 10px 24px !important; font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important; font-size: 14px !important;
  letter-spacing: 0.02em !important; cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.botao-busca {
  background-color: #1C1C1C !important;
  border-radius: 0 100px 100px 0 !important;
}

.banner.mini-banner .span4 img, .mini-banner img {
  border-radius: 8px !important; transition: transform 0.3s ease !important;
}

.produto, .item-produto, .item-listagem, .produto-item {
  border: none !important; border-radius: 12px !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  background: white !important;
}

.produto:hover, .item-produto:hover, .item-listagem:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.09) !important;
}

#barraNewsletter { background-color: #f5f5f3 !important; padding: 48px 0 !important; }

#rodape { background-color: #1C1C1C !important; color: rgba(255,255,255,0.75) !important; }
#rodape a { color: #aaaaaa !important; }
#rodape a:hover { color: #ffffff !important; }
#rodape h3, #rodape h4 {
  color: #ffffff !important; font-size: 13px !important;
  text-transform: uppercase !important; letter-spacing: 0.08em !important;
}
.fundo-secundario { background-color: #1C1C1C !important; color: #ffffff !important; }

/* ========= BLOCOS NOVOS - ESTILO GARBANO ========= */
.lc-cat-card {
  position: relative; display: block;
  border-radius: 16px; overflow: hidden;
  aspect-ratio: 3/4; text-decoration: none;
  transition: transform 0.3s ease;
}
.lc-cat-card:hover { transform: scale(1.02); }
.lc-cat-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%);
  z-index: 1;
}
.lc-cat-label {
  position: absolute; bottom: 20px;
  left: 0; right: 0; text-align: center;
  color: white; font-family: 'Raleway', sans-serif;
  font-size: 1.2rem; font-weight: 700; z-index: 2;
}
.lc-spotlight {
  background: white; border-radius: 16px;
  overflow: hidden; display: flex; min-height: 480px;
  margin-bottom: 12px;
}
.lc-spotlight.reverse { flex-direction: row-reverse; }
.lc-spotlight-text {
  flex: 1; padding: 60px 56px;
  display: flex; flex-direction: column; justify-content: center;
}
.lc-spotlight-img {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 480px;
}
.lc-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; letter-spacing: 0.05em;
  font-family: 'DM Sans', sans-serif;
}
.lc-btn-dark {
  display: inline-flex; align-items: center;
  background: #1C1C1C; color: white !important;
  text-decoration: none !important;
  padding: 14px 28px; border-radius: 100px;
  font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 14px;
  transition: background 0.2s; width: fit-content;
}
.lc-btn-dark:hover { background: #333 !important; color: white !important; }
.lc-story-card {
  position: relative; border-radius: 16px;
  overflow: hidden; aspect-ratio: 4/3;
  display: flex; align-items: flex-end;
}
.lc-story-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 50%);
  z-index: 1;
}
.lc-story-content { position: relative; z-index: 2; padding: 32px; }
.lc-badges {
  background: white; border-radius: 16px;
  display: flex; justify-content: space-around;
  align-items: center; padding: 40px 60px;
}
.lc-badge { text-align: center; flex: 1; }
.lc-divider { width: 1px; background: #ebebeb; height: 40px; flex-shrink: 0; }

@media (max-width: 768px) {
  .lc-cat-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .lc-spotlight { flex-direction: column !important; min-height: auto !important; }
  .lc-spotlight-text { padding: 32px 24px !important; }
  .lc-spotlight.reverse { flex-direction: column-reverse !important; }
  .lc-two-col { grid-template-columns: 1fr !important; }
  .lc-badges { flex-wrap: wrap !important; gap: 24px !important; padding: 32px 24px !important; }
  .lc-divider { display: none !important; }
}

/* === HERO BANNER — estilo editorial Garbano === */
.row-fluid.banner.cheio {
  position: relative !important;
  overflow: hidden !important;
}
.row-fluid.banner.cheio > a { display: block; width: 100%; }
.row-fluid.banner.cheio img {
  width: 100% !important;
  height: 560px !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
.lc-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 8%;
  background: linear-gradient(to right, rgba(12,10,8,.62) 40%, rgba(12,10,8,.04) 82%);
  pointer-events: none;
}
.lc-hero-overlay a { pointer-events: auto; }
.lc-hero-text { color: #fff; max-width: 520px; }
.lc-hero-text h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 2rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.lc-hero-text h1 em { font-style: italic; }
.lc-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #1a1a1a !important;
  padding: 14px 32px;
  border-radius: 100px;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .02em;
  text-decoration: none !important;
  transition: background .2s, transform .2s;
}
.lc-hero-cta:hover { background: #f5f5f3; transform: translateX(3px); }
@media (max-width: 767px) {
  .row-fluid.banner.cheio img { height: 320px !important; }
  .lc-hero-overlay { padding: 0 5%; }
  .lc-hero-text h1 { font-size: 1.8rem; }
  .lc-hero-cta { padding: 12px 24px; }
}