/**
 * Override: Card de produto na PÁGINA INICIAL (/)
 *
 * Layout-alvo (igual ao print de referência):
 *   1. Imagem
 *   2. Título
 *   3. Linha de badges: [X% OFF] (rosa, ícone cupom) + [Frete grátis] (verde teal)
 *   4. Linha de rating: ★ N,N | M vendidos
 *   5. Preço atual (grande, vermelho/rosa)
 *   6. Preço antigo (riscado, cinza, abaixo)
 *   7. Botão de carrinho (círculo rosa) à direita do preço, posicionado absoluto
 *
 * Aplicação: marcado via [data-home-card-styled="1"] pelo scripts.js — só vale na home.
 *
 * IMPORTANTE: na home os cards NÃO usam `.product-card` — são <div> inline-styled
 * dentro de <Link to="/produto/id">. Por isso o seletor é genérico em [data-home-card-styled].
 * O resto do site (busca/produto/categoria) continua com o estilo original.
 */

/* O wrapper precisa ser flex column pra 'order' funcionar e relativo pra ancorar o cart.
   NÃO uso padding-right aqui pra não estreitar o conteúdo nos cards do grid de 3 colunas
   (Principais produtos). O cart é absolute e fica sobre o canto inferior direito; pode
   sobrepor parcialmente o old-price em cards muito estreitos — aceitável. */
[data-home-card-styled="1"] {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding-bottom: 8px !important;
}

/* Imagem em primeiro */
[data-home-card-styled="1"] > img,
[data-home-card-styled="1"] .product-image {
  order: 0 !important;
  margin-bottom: 0 !important;
}

/* Ordem dos filhos */
[data-home-card-styled="1"] .product-name        { order: 1 !important; margin-bottom: 0 !important; }
[data-home-card-styled="1"] .product-badges      { order: 2 !important; margin: 0 !important; }
[data-home-card-styled="1"] .home-card-rating-row{ order: 3 !important; }
[data-home-card-styled="1"] .product-price       { order: 4 !important; margin: 0 !important; }
[data-home-card-styled="1"] .product-price-section { order: 4 !important; margin: 0 !important; }
[data-home-card-styled="1"] .product-actions     { order: 5 !important; }
[data-home-card-styled="1"] .home-card-cart-btn  { order: 6 !important; }

/* "X vendido(s)" original some — substituído pela linha de rating */
[data-home-card-styled="1"] .product-sales {
  display: none !important;
}

/* ========== BADGES (linha X% OFF + Frete grátis) ========== */
/* Container: força UMA linha (sem quebrar pra telas estreitas) e centralização. */
[data-home-card-styled="1"] .product-badges {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  min-height: 18px !important;
}

/* Regras COMUNS aos 2 badges (mesma forma/altura/padding) — corrige desalinhamento
   causado por ter ícone num e texto puro no outro. */
[data-home-card-styled="1"] .product-badge,
[data-home-card-styled="1"] .product-badge-discount {
  display: inline-flex !important;
  align-items: center !important;
  height: 18px !important;
  padding: 0 6px !important;
  border-radius: 3px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* X% OFF: pílula rosa com ícone de cupom */
[data-home-card-styled="1"] .product-badge-discount {
  background: #ffe1ea !important;
  color: #ff2b56 !important;
  font-weight: 700 !important;
  gap: 3px !important;
}

[data-home-card-styled="1"] .product-badge-discount svg {
  width: 9px !important;
  height: 8px !important;
  flex-shrink: 0 !important;
}

/* Frete grátis: pílula verde teal */
[data-home-card-styled="1"] .product-badge {
  background: #d8f1ed !important;
  color: #0a8f7e !important;
  font-weight: 600 !important;
}

/* ========== LINHA RATING: ★ N,N | M vendidos (compacto, uma linha só) ========== */
[data-home-card-styled="1"] .home-card-rating-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  color: #9ca3af !important;
  margin: 0 !important;
  font-family: inherit;
  white-space: nowrap !important;
  overflow: hidden !important;
}

[data-home-card-styled="1"] .home-card-rating-row .home-star {
  color: #fbbf24;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

[data-home-card-styled="1"] .home-card-rating-row .home-rating-value {
  color: #000;
  font-weight: 500;
  flex-shrink: 0;
}

[data-home-card-styled="1"] .home-card-rating-row .home-rating-divider {
  color: #d1d5db;
  margin: 0;
  flex-shrink: 0;
}

/* ========== PREÇO (atual grande + antigo abaixo) ========== */
[data-home-card-styled="1"] .product-price,
[data-home-card-styled="1"] .product-price-section .product-price {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

/* Caso o React envolva preço + cart em .product-price-section, ele é apenas wrapper */
[data-home-card-styled="1"] .product-price-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: auto !important;
}

[data-home-card-styled="1"] .current-price {
  color: #ff2b56 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

[data-home-card-styled="1"] .current-price .currency {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ff2b56 !important;
}

[data-home-card-styled="1"] .old-price {
  color: #9ca3af !important;
  font-size: 13px !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
  margin-top: 2px !important;
  line-height: 1.2 !important;
}

/* ========== BOTÃO DE CARRINHO (círculo rosa, à direita do preço) ========== */
[data-home-card-styled="1"] .home-card-cart-btn {
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  background: #ffe1ea !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  z-index: 10 !important;
}

[data-home-card-styled="1"] .home-card-cart-btn svg {
  width: 22px !important;
  height: 22px !important;
}

/* Compatibilidade: caso o card original já tenha um .add-to-cart-btn (variante A do React),
   reutiliza o botão original posicionando-o no mesmo lugar */
[data-home-card-styled="1"] .product-actions {
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  background: transparent !important;
}

[data-home-card-styled="1"] .add-to-cart-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  background: #ffe1ea !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: none !important;
}

[data-home-card-styled="1"] .add-to-cart-btn svg {
  width: 22px !important;
  height: 22px !important;
}

[data-home-card-styled="1"] .buy-btn {
  display: none !important;
}

/* ============================================================================
 * HOME: GRADIENT MARROM DE FUNDO + STORE-SECTION COMO CONTAINER FLUTUANTE
 *
 * Conceito:
 *   - Camada de fundo (::before do .container) com gradient marrom no topo,
 *     dentro do container (scrolla com o conteúdo).
 *   - Header MANTÉM seu estilo original (branco, busca/carrinho normais) —
 *     NÃO é tocado.
 *   - Store-section vira um card flutuante com margens dos lados e cantos
 *     arredondados em TODAS as bordas. O gradient passa por baixo e aparece
 *     ao redor do card (acima dele e nas laterais).
 * ============================================================================ */

.container.is-home-page {
  position: relative !important;
  /* `flow-root` cria um novo formatting context — bloqueia margin-collapsing
     do .store-section (que tinha margin-top: 60 sendo "absorvida" pelo container,
     empurrando o container e o gradient pra baixo, criando um vão branco). */
  display: flow-root !important;
}

/* Gradient como ::before ABSOLUTE no topo do container. Scrolla NATURALMENTE
   junto com o conteúdo — quando descer, o gradient sai junto da viewport
   sem precisar de animação ou corte abrupto. */
.container.is-home-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  /* Primeiros 80px SÓLIDOS da mesma cor do header (#7a1620 — vinho médio
     avermelhado). Depois faz o fade até transparente. */
  background: linear-gradient(
    to bottom,
    #7a1620 0px,
    #7a1620 80px,
    #951c2a 110px,
    #b22838 160px,
    rgba(178, 40, 56, 0) 200px,
    rgba(178, 40, 56, 0) 220px
  );
  z-index: 0;
  pointer-events: none;
}

/* Header NO TOPO (sem scroll): vinho sólido = mesma cor do início do gradient,
   sem linha separadora — parece um pedaço só do gradient. */
.container.is-home-page .header {
  background: #7a1620 !important;
  border-bottom: none !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

/* Header ROLADO: branco com ícones pretos e linha cinza embaixo */
.container.is-home-page.home-scrolled .header {
  background: #fff !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.container.is-home-page.home-scrolled .header .header-icon-svg {
  stroke: #000 !important;
}

.container.is-home-page .header .header-icon-svg {
  stroke: #fff !important;
}

/* Lupa do search: PRETA (sobre o input cinza, não sobre o gradient).
   Reforço com 3 seletores pra garantir que pegue o stroke do SVG. */
.container.is-home-page .header .header-search-icon-btn,
.container.is-home-page .header-search-icon-btn {
  color: #000 !important;
}

.container.is-home-page .header .header-search-icon-btn svg,
.container.is-home-page .header-search-icon-btn svg,
.container.is-home-page .header-search-icon-btn svg * {
  stroke: #000 !important;
  color: #000 !important;
}

/* Card combinado da loja: store-section (topo) + coupons-container (base) viram
   uma só "container" visual com cantos arredondados nas extremidades. */

.container.is-home-page .store-section {
  margin-top: 60px !important;
  margin-left: 12px !important;
  margin-right: 12px !important;
  margin-bottom: 0 !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 14px 17px !important;
  position: relative !important;
  z-index: 1 !important;
  /* Borda contínua: top + laterais. SEM borda inferior (continua no coupons-container). */
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-bottom: none !important;
}

.container.is-home-page .coupons-container {
  margin: 0 12px 14px 12px !important;
  background: #fff !important;
  border-radius: 0 0 14px 14px !important;
  padding: 4px 12px 12px 12px !important;
  position: relative !important;
  z-index: 1 !important;
  box-shadow: none !important;
  /* Borda contínua: laterais + base. SEM borda superior (continua no store-section). */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-top: none !important;
}