/* ==========================================================================
   CABEÇALHO ESTOQUE ONLINE — tema Toluca (Nuvemshop)
   Arquivo: static/css/header-estoque.css
   Todas as classes usam o prefixo .eoh- para não conflitar com o tema.
   ========================================================================== */

.eoh {
  --eoh-wine: #7c0f1d;        /* barra superior */
  --eoh-red: #e2173a;         /* botões (Mais Vendidos, carrinho) */
  --eoh-line: #8e1526;        /* ícones e borda da busca */
  --eoh-text: #1f1f1f;
  --eoh-muted: #9a9a9a;
  --eoh-border: #e4e4e4;
  --eoh-max: 1440px;
  font-family: inherit;
  color: var(--eoh-text);
  background: #fff;
  position: relative;
  z-index: 50;
}
/* Neutraliza estilos do Toluca na tag <header> que envolve o cabeçalho novo */
.head-main.eoh-host {
  position: relative !important; top: auto !important;
  padding: 0 !important; margin: 0 !important;
  background: #fff !important; border: 0 !important; box-shadow: none !important;
  transform: none !important;
  display: block !important;
  width: 100% !important; max-width: none !important;
}
.head-main.eoh-host > .eoh { width: 100%; flex: 1 1 100%; }

.eoh *, .eoh *::before, .eoh *::after { box-sizing: border-box; }
.eoh a { color: inherit; text-decoration: none; }
.eoh svg { display: block; flex-shrink: 0; }

.eoh-wrap {
  max-width: var(--eoh-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- 1. Barra superior ---------- */
.eoh-top { background: var(--eoh-wine); color: #fff; }
.eoh-top-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 42px; gap: 24px;
}
.eoh-top-title { font-size: 17px; letter-spacing: .2px; white-space: nowrap; }
.eoh-top-links { display: flex; gap: 28px; }
.eoh-top-links a { font-size: 15px; opacity: .95; white-space: nowrap; transition: opacity .2s; }
.eoh-top-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 2. Linha principal ---------- */
.eoh-main { border-bottom: 1px solid var(--eoh-border); }
.eoh-main-inner {
  display: flex; align-items: center; gap: 32px;
  padding-top: 18px; padding-bottom: 18px;
}
.eoh-logo { flex: 0 0 auto; }
.eoh-logo img, .eoh-logo .eoh-logo-img { max-height: 76px; width: auto; display: block; }
.eoh-logo .eoh-logo-text { font-size: 28px; font-weight: 700; margin: 0; }

.eoh-search { position: relative; flex: 1 1 auto; display: flex; align-items: center; margin: 0; }
.eoh-search-input {
  width: 100%; height: 58px;
  border: 2px solid var(--eoh-line); border-radius: 999px;
  padding: 0 72px 0 26px;
  font: inherit; font-size: 17px; color: var(--eoh-text);
  background: #fff; outline: none; -webkit-appearance: none; appearance: none;
  transition: box-shadow .2s;
}
.eoh-search-input::placeholder { color: var(--eoh-muted); }
.eoh-search-input:focus { box-shadow: 0 0 0 4px rgba(226, 23, 58, .12); }
.eoh-search-btn {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; padding: 6px; cursor: pointer; color: var(--eoh-red);
}
.eoh-search-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; }

.eoh-actions { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; }
.eoh-account { display: flex; align-items: center; gap: 14px; }
.eoh .eoh-account-icon { color: var(--eoh-line); }
.eoh-account-text { display: flex; flex-direction: column; font-size: 15px; line-height: 1.35; }
.eoh-account-text a:hover { color: var(--eoh-red); }
.eoh-divider { width: 1px; height: 52px; background: var(--eoh-border); }

.eoh-cart-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--eoh-red); color: #fff !important;
  border-radius: 10px; padding: 10px 14px; min-height: 58px;
  transition: filter .2s;
}
.eoh-cart-btn:hover { filter: brightness(.92); }
.eoh-cart-count {
  min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 999px; background: #fff; color: var(--eoh-text);
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  position: static !important;   /* neutraliza posicionamento do tema */
}

/* ---------- 3. Barra de categorias ---------- */
.eoh-cats { background: #fff; box-shadow: 0 10px 18px -12px rgba(0,0,0,.18); }
.eoh-cats-inner { display: flex; align-items: center; gap: 28px; padding-top: 12px; padding-bottom: 12px; }

.eoh-menu-btn {
  display: flex; align-items: center; gap: 16px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 17px; color: var(--eoh-text); flex: 0 0 auto;
}
.eoh-burger { display: flex; flex-direction: column; gap: 5px; }
.eoh-burger i { display: block; width: 28px; height: 4px; border-radius: 3px; background: var(--eoh-line); }

.eoh-cats-list {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.eoh-cats-list::-webkit-scrollbar { display: none; }

.eoh-pill {
  display: flex; align-items: center; gap: 14px; flex: 0 0 auto;
  background: var(--eoh-red); color: #fff !important;
  border-radius: 999px; padding: 10px 28px 10px 22px;
  font-size: 17px; white-space: nowrap; transition: filter .2s;
}
.eoh-pill:hover { filter: brightness(.92); }

.eoh-cat {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  font-size: 15px; white-space: nowrap; color: var(--eoh-text);
}
.eoh-cat svg { color: var(--eoh-line); transition: transform .2s; }
.eoh-cat:hover { color: var(--eoh-red); }
.eoh-cat:hover svg { transform: translateY(-2px); }

/* ---------- 4. Menu lateral ---------- */
.eoh-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 9998; }
.eoh-overlay[hidden] { display: none; }
.eoh-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 86vw);
  background: #fff; z-index: 9999; overflow-y: auto;
  transform: translateX(-100%); transition: transform .28s ease, visibility .28s;
  box-shadow: none; visibility: hidden;
}
.eoh-drawer.is-open { transform: translateX(0); visibility: visible; box-shadow: 6px 0 24px rgba(0,0,0,.15); }
.eoh-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--eoh-wine); color: #fff; padding: 16px 20px; font-size: 17px;
}
.eoh-drawer-close { border: 0; background: none; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.eoh-drawer-list, .eoh-drawer-list ul { list-style: none; margin: 0; padding: 0; }
.eoh-drawer-list > li { border-bottom: 1px solid var(--eoh-border); }
.eoh-drawer-list a, .eoh-drawer-list summary { display: block; padding: 14px 20px; font-size: 15px; cursor: pointer; }
.eoh-drawer-list summary { list-style: none; position: relative; }
.eoh-drawer-list summary::-webkit-details-marker { display: none; }
.eoh-drawer-list summary::after { content: '+'; position: absolute; right: 20px; color: var(--eoh-red); font-weight: 700; }
.eoh-drawer-list details[open] summary::after { content: '–'; }
.eoh-drawer-list ul a { padding-left: 34px; font-size: 14px; color: #555; }
.eoh-drawer-list a:hover { color: var(--eoh-red); background: #fafafa; }
html.eoh-lock { overflow: hidden; }

/* ---------- Responsivo ---------- */
@media (max-width: 1200px) {
  .eoh-main-inner { gap: 20px; }
  .eoh-cats-list { justify-content: flex-start; }
}

@media (max-width: 991px) {
  .eoh-top-links { display: none; }
  .eoh-top-inner { justify-content: center; min-height: 34px; }
  .eoh-top-title { font-size: 14px; }

  .eoh-main-inner { flex-wrap: wrap; gap: 12px 16px; padding-top: 12px; padding-bottom: 12px; }
  .eoh-logo { order: 1; flex: 1 1 auto; }
  .eoh-logo img, .eoh-logo .eoh-logo-img { max-height: 52px; }
  .eoh-actions { order: 2; gap: 12px; }
  .eoh-search { order: 3; flex: 1 1 100%; }
  .eoh-search-input { height: 46px; font-size: 16px; padding-left: 18px; }
  .eoh-search-btn svg { width: 24px; height: 24px; }
  .eoh-account-text, .eoh-divider { display: none; }
  .eoh-account-icon svg { width: 32px; height: 32px; }
  .eoh-cart-btn { min-height: 46px; padding: 6px 10px; }
  .eoh-cart-btn svg { width: 34px; height: 30px; }

  .eoh-cats-inner { gap: 16px; padding-top: 8px; padding-bottom: 8px; }
  .eoh-menu-btn span:last-child { display: none; }
  .eoh-cats-list { gap: 18px; }
  .eoh-pill { font-size: 15px; padding: 8px 18px 8px 14px; gap: 8px; }
  .eoh-pill svg { width: 24px; height: 24px; }
  .eoh-cat { font-size: 14px; gap: 6px; }
  .eoh-cat svg { width: 34px; height: 34px; }
}

@media (max-width: 575px) {
  .eoh-wrap { padding: 0 16px; }
}


/* ==========================================================================
   FAIXA DE VANTAGENS (Entrega rápida, Pedido mínimo...) — cartões claros
   Arquivo do tema: snipplets/banner-services/banner-services-item.tpl
   Textos e ícones continuam editáveis no painel.
   ========================================================================== */
.section-informative-banners { padding: 20px 0 !important; }

.section-informative-banners .card {
  background: #fbf3f4 !important;
  border: 1px solid #eadfe0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  height: 100%;
  transition: transform .2s, box-shadow .2s;
}
.section-informative-banners .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(124, 15, 29, .12) !important;
}
.section-informative-banners a { color: inherit !important; text-decoration: none !important; }
.section-informative-banners h3 { color: #7c0f1d !important; font-weight: 700; font-size: 16px; }
.section-informative-banners .service-text { color: #555 !important; }

/* círculo do ícone: vermelho da marca */
.section-informative-banners .home-circle-image,
.section-informative-banners .icon-circle {
  background: #e2173a !important;
  box-shadow: 0 4px 10px rgba(226, 23, 58, .25);
}
.section-informative-banners svg:not(.eo-svc-icon),
.section-informative-banners .svg-icon-text { fill: #fff !important; color: #fff !important; }

/* ícones Estoque Online (traço branco) */
.section-informative-banners .eo-svc-circle { display: flex !important; align-items: center; justify-content: center; }
.section-informative-banners .eo-svc-icon {
  width: 32px; height: 32px; display: block;
  fill: none !important; stroke: #fff; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* bolinhas do carrossel no celular */
.section-informative-banners .swiper-pagination-bullet-active { background: #e2173a !important; }


/* ==========================================================================
   HOME — MAIS VENDIDOS / VITRINES / CATEGORIAS (padrão Estoque Online)
   Só CSS: não altera os arquivos .tpl do tema. Vale para os cartões de
   produto da loja inteira (.item-product) e para as seções da home.
   ========================================================================== */

/* ---------- Títulos das seções da home ---------- */
.section-featured-home h2,
.section-featured-home h3.h6,
.section-categories-home h2 {
  color: #7c0f1d !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  border-left: 4px solid #e2173a;
  padding-left: 12px;
}

/* ---------- Cartão de produto ---------- */
.item-product .item {
  background: #fff;
  border: 1px solid #eee4e5;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  height: calc(100% - 4px);
}
.item-product .item:hover {
  transform: translateY(-3px);
  border-color: #e2173a;
  box-shadow: 0 10px 22px rgba(124,15,29,.12);
}
.item-product .item-image { background: #fff; }
.item-product .item-image img { object-fit: contain !important; padding: 6px; }

.item-product .item-description { padding: 12px 14px 14px !important; }
.item-product .item-name {
  opacity: 1 !important;
  color: #2a2a2a;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item-product .item-price { color: #7c0f1d !important; font-size: 20px; }
.item-product .price-compare { color: #999 !important; }

/* botão COMPRAR */
.item-product .btn-primary {
  background: #e2173a !important;
  border-color: #e2173a !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: .4px;
  min-height: 40px;
  padding-left: 16px !important; padding-right: 16px !important;
  transition: filter .2s, transform .1s;
}
.item-product .btn-primary:hover { filter: brightness(.92); }
.item-product .btn-primary:active { transform: scale(.98); }
.item-product .item-quickshop-icon { fill: #fff !important; }

/* cartão horizontal (disposição usada na home) */
.item-product .item-horizontal .item-image { border-right: 1px solid #f3eaeb; }

/* selo "Mais vendido" só na vitrine de mais vendidos */
[data-store="home-products-best-seller"] .item-image { position: relative; }
[data-store="home-products-best-seller"] .item-image::after {
  content: "Mais vendido";
  position: absolute; top: 8px; left: 8px; z-index: 3;
  background: #7c0f1d; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 3px 9px; border-radius: 999px;
  pointer-events: none;
}

/* ---------- Setas dos carrosséis da home ---------- */
.section-featured-home .swiper-button-prev,
.section-featured-home .swiper-button-next,
.section-categories-home .swiper-button-prev,
.section-categories-home .swiper-button-next {
  width: 40px !important; height: 40px !important;
  border-radius: 50%;
  background: #e2173a !important;
  box-shadow: 0 4px 10px rgba(226,23,58,.3);
  display: flex !important; align-items: center; justify-content: center;
  transition: filter .2s, opacity .2s;
}
.section-featured-home .swiper-button-prev svg,
.section-featured-home .swiper-button-next svg,
.section-categories-home .swiper-button-prev svg,
.section-categories-home .swiper-button-next svg {
  fill: #fff !important; color: #fff !important; width: 16px; height: 16px;
}
.section-featured-home .swiper-button-prev:hover,
.section-featured-home .swiper-button-next:hover,
.section-categories-home .swiper-button-prev:hover,
.section-categories-home .swiper-button-next:hover { filter: brightness(.9); }
.section-featured-home .swiper-button-disabled,
.section-categories-home .swiper-button-disabled { opacity: .3 !important; }

/* ---------- Categorias em círculos ---------- */
.section-categories-home .home-circle-image {
  border: 2px solid #eadfe0;
  background: #fbf3f4;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.section-categories-home .home-circle-image img { object-fit: cover; }
.section-categories-home a:hover .home-circle-image {
  border-color: #e2173a;
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(124,15,29,.15);
}
.section-categories-home .home-category { color: #2a2a2a; font-size: 13px; font-weight: 600; }
.section-categories-home a:hover .home-category { color: #e2173a; }

/* ---------- Link "Ver todos" nas vitrines da home ---------- */
.section-featured-home .eo-see-all {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 16px 16px;
  color: #e2173a !important; font-size: 14px; font-weight: 700;
  text-decoration: none !important;
  transition: gap .2s;
}
.section-featured-home .eo-see-all:hover { gap: 10px; text-decoration: underline !important; }
.section-featured-home .section-title { margin-bottom: 6px !important; }
@media (max-width: 767px) {
  .section-featured-home .eo-see-all { margin-left: 16px; margin-bottom: 12px; }
}


/* ==========================================================================
   AJUSTE DE PROPORÇÕES (desktop) — cabeçalho mais compacto e equilibrado
   ========================================================================== */
@media (min-width: 992px) {
  /* mesma largura do conteúdo do tema (alinha cabeçalho com as seções) */
  .eoh { --eoh-max: 1275px; }
  .eoh-wrap { padding: 0 15px; }

  /* barra vinho */
  .eoh-top-inner { min-height: 36px; }
  .eoh-top-title { font-size: 14px; }
  .eoh-top-links { gap: 24px; }
  .eoh-top-links a { font-size: 13.5px; }

  /* linha principal */
  .eoh-main-inner { gap: 36px; padding-top: 14px; padding-bottom: 14px; }
  .eoh-logo img, .eoh-logo .eoh-logo-img { max-height: 58px; }
  .eoh-search { max-width: 640px; margin: 0 auto; }
  .eoh-search-input { height: 46px; font-size: 15px; border-width: 1.5px; padding: 0 56px 0 22px; }
  .eoh-search-btn { right: 12px; }
  .eoh-search-btn svg { width: 22px; height: 22px; }
  .eoh-actions { gap: 18px; }
  .eoh-account { gap: 10px; }
  .eoh-account-icon svg { width: 30px; height: 30px; }
  .eoh-account-text { font-size: 13.5px; line-height: 1.3; }
  .eoh-divider { height: 38px; }
  .eoh-cart-btn { min-height: 46px; padding: 6px 14px; border-radius: 10px; gap: 8px; }
  .eoh-cart-btn svg { width: 30px; height: 28px; }
  .eoh-cart-count { min-width: 22px; height: 22px; font-size: 12px; }

  /* barra de categorias */
  .eoh-cats-inner { gap: 22px; padding-top: 8px; padding-bottom: 8px; }
  .eoh-menu-btn { font-size: 15px; gap: 10px; }
  .eoh-burger { gap: 4px; }
  .eoh-burger i { width: 22px; height: 3px; }
  .eoh-cats-list { gap: 14px; }
  .eoh-pill { font-size: 14.5px; padding: 8px 20px 8px 16px; gap: 8px; }
  .eoh-pill svg { width: 22px; height: 22px; }
  .eoh-cat { font-size: 14px; gap: 8px; }
  .eoh-cat svg { width: 30px; height: 30px; }
}

/* ---------- Título da seção de marcas no mesmo padrão das outras ---------- */
[data-store="home-brands"] h2,
.section-brands-home h2 {
  color: #7c0f1d !important; font-size: 22px !important; font-weight: 700 !important;
  border-left: 4px solid #e2173a; padding-left: 12px; line-height: 1.2;
}