/** Shopify CDN: Minification failed

Line 484:3 Unexpected "("

**/
/* ==========================================================================
   RESET GLOBAL — FLASH PRETO AO TOCAR (tap highlight nativo)
   --------------------------------------------------------------------------
   iOS e Android pintam automaticamente um overlay preto semitransparente
   por cima de <a>/<button>/<input> no instante do toque, que some sozinho
   em ~200ms — é o "flash" que aparecia nos botões do carrinho (e no site).
   O tema Vortex só zerava isso em alguns componentes; aqui estendemos o
   mesmo comportamento para a loja toda.

   -webkit-tap-highlight-color é propriedade HERDADA: zerar em <html> já
   cascateia para tudo. Reforçamos nos controles de formulário porque alguns
   webviews Android não herdam o valor de forma confiável nesses elementos.
   Não afeta o anel de foco do teclado (:focus) nem o desktop (só toque).
   ========================================================================== */
html,
a,
button,
input,
textarea,
select,
label,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   PREÇOS VITORINE — Estilos do PIX no CARD de produto
   --------------------------------------------------------------------------
   Usado em: snippets/product-item.liquid
   Pega todos os cards: coleção, busca, home, visto recentemente,
   "quem comprou também comprou" e recomendações do carrinho.
   (A página de produto tem estilos próprios no seu arquivo.)
   ========================================================================== */

/* Linha do PIX no card: valor + ícone do PIX + "(X% OFF)" */
.product-item__info .preco-card__pix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; /* cards são centralizados no tema Vortex */
  gap: 4px;
  font-size: 14px;
  color: #111;
  margin-top: 2px;
}

.product-item__info .preco-card__pix b {
  font-weight: 700;
}

/* Ícone do PIX no card. O seletor global do tema esconde svg dentro de
   .parcelamento, mas a linha do PIX não é .parcelamento, então o ícone aparece. */
.product-item__info .preco-card__pix .icone-pix {
  width: 14px;
  height: 14px;
  color: #111; /* PIX em preto */
}

/* "(X% OFF)" do PIX em preto (mantém o negrito para leve destaque) */
.product-item__info .preco-card__pix-off {
  color: #111;
  font-weight: 600;
  font-size: 13px;
}

/* ----- MOBILE: linhas de valor do card no MESMO tamanho (preço + parcelamento + PIX) -----
   A pedido do cliente, as três linhas de valor ficam uniformes. O fator limitante é
   o PIX, a linha mais longa ("R$ ... no PIX ◆ (X% OFF)"), que precisa caber numa
   linha só (nowrap). Por isso o corpo é ESCALONADO por largura — sempre o maior que o
   PIX comporta — e preço/parcelamento acompanham para ficarem iguais em cada tela
   (medições c/ Poppins: PIX ≈ 168px@12 / 153px@11 / 137px@10; card ≈ (vw−34)/2):
     • ≥390px (iPhone 12–15, Galaxy, Pixel): 12px
     • 360–389px (Androids comuns, iPhone SE2/8): 11px
     • ≤359px (iPhone SE 1ª geração): 10px
   O preço conserva o negrito/cor do tema, então segue com leve destaque mesmo igual.
   OBS: theme.css carrega DEPOIS deste arquivo, então o override do parcelamento (que
   tem 15px!important no tema) usa especificidade maior (.product-item .product-item__info).
   Escopo restrito ao card de produto: PDP e carrinho não são afetados. */
@media screen and (max-width: 740px) {
  /* PIX: trava tudo numa linha */
  .product-item__info .preco-card__pix {
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: 11px;
    gap: 2px;
  }

  .product-item__info .preco-card__pix .icone-pix {
    width: 11px;
    height: 11px;
  }

  .product-item__info .preco-card__pix-off {
    font-size: 11px;
  }

  /* Preço e parcelamento no mesmo corpo do PIX */
  .product-item__info .price-list .price {
    font-size: 11px;
  }

  .product-item .product-item__info .parcelamento,
  .product-item .product-item__info .parcelamento * {
    font-size: 11px !important;
  }
}

/* Telas a partir de 390px (a maioria dos smartphones atuais): cabe 12px, o teto
   com o texto completo. Um respiro a mais no gap por já haver folga. */
@media screen and (min-width: 390px) and (max-width: 740px) {
  .product-item__info .preco-card__pix {
    font-size: 12px;
    gap: 3px;
  }

  .product-item__info .preco-card__pix .icone-pix {
    width: 12px;
    height: 12px;
  }

  .product-item__info .preco-card__pix-off {
    font-size: 12px;
  }

  /* Preço e parcelamento no mesmo corpo do PIX */
  .product-item__info .price-list .price {
    font-size: 12px;
  }

  .product-item .product-item__info .parcelamento,
  .product-item .product-item__info .parcelamento * {
    font-size: 12px !important;
  }
}

/* Telas bem estreitas (≤359px, ex. iPhone SE 1ª geração): 10px pra nunca estourar. */
@media screen and (max-width: 359px) {
  .product-item__info .preco-card__pix {
    font-size: 10px;
  }

  .product-item__info .preco-card__pix .icone-pix {
    width: 10px;
    height: 10px;
  }

  .product-item__info .preco-card__pix-off {
    font-size: 10px;
  }

  /* Preço e parcelamento no mesmo corpo do PIX */
  .product-item__info .price-list .price {
    font-size: 10px;
  }

  .product-item .product-item__info .parcelamento,
  .product-item .product-item__info .parcelamento * {
    font-size: 10px !important;
  }
}

/* ==========================================================================
   CROSS-SELL DO CARRINHO (mini-cart)
   --------------------------------------------------------------------------
   O cross-sell do carrinho usa o mesmo card, mas em espaço estreito
   (desktop = coluna de 240px, mobile = card compacto). A fonte padrão do
   parcelamento/PIX quebra a linha ali. Aqui reduzimos SÓ nesse contexto
   para tudo caber em uma linha, sem afetar os cards das outras páginas.
   ========================================================================== */

/* Parcelamento e PIX menores e em linha única dentro do carrinho */
.mini-cart__recommendations .preco-card__parcela,
.mini-cart__recommendations .preco-card__pix {
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}

/* O tema força 15px!important nos filhos de .parcelamento;
   reduzimos com a mesma especificidade só no carrinho. */
.mini-cart__recommendations .product-item__info .parcelamento * {
  font-size: 12px !important;
}

/* Linha do PIX: mantém valor + ícone + "(% OFF)" tudo junto, sem quebrar */
.mini-cart__recommendations .preco-card__pix {
  flex-wrap: nowrap;
  gap: 3px;
}

.mini-cart__recommendations .preco-card__pix .icone-pix {
  width: 12px;
  height: 12px;
}

.mini-cart__recommendations .preco-card__pix-off {
  font-size: 12px;
}

/* No carrinho MOBILE o card é em linha (imagem à esquerda, infos à direita)
   e tudo é alinhado à esquerda. A linha do PIX herdava justify-content:center
   dos cards normais e ficava desalinhada das linhas de preço acima.
   Aqui forçamos parcelamento e PIX à esquerda, só nesse contexto. */
@media screen and (max-width: 999px) {
  .mini-cart__recommendations .preco-card__pix {
    justify-content: flex-start;
  }

  .mini-cart__recommendations .product-item__info .parcelamento,
  .mini-cart__recommendations .product-item__info .parcelamento * {
    text-align: left !important;
  }
}

/* ==========================================================================
   RESUMO DE PREÇOS DO RODAPÉ DO CARRINHO (mini-cart)
   --------------------------------------------------------------------------
   Usado em: sections/mini-cart.liquid
   Estrutura: Subtotal / Desconto / TOTAL (âncora) / parcelamento / selo Pix / cashback
   Cores da marca: preto #1a1a1a e laranja #ec6633. Sem verde.
   ========================================================================== */
.cart-resumo {
  margin-bottom: 14px;
}

/* Subtotal e desconto — preto seminegrito (mais legível que cinza) */
.cart-resumo__linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: #1a1a1a;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Linha do desconto no laranja da marca */
.cart-resumo__linha--desconto {
  color: #ec6633;
  font-weight: 600;
}

.cart-resumo__divisor {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 10px 0;
}

/* TOTAL — âncora do carrinho, idêntico ao valor do botão */
.cart-resumo__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.cart-resumo__total-label {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}

.cart-resumo__total-valor {
  font-size: 18px;
  font-weight: 800;
  color: #1a1a1a;
  white-space: nowrap;
}

/* Parcelamento, logo abaixo do Total */
.cart-resumo__parcela {
  font-size: 12px;
  color: #1a1a1a;
  font-weight: 600;
  margin-top: 2px;
}

/* Pix — linha solta (sem caixa), preto e negrito, mais enxuto e consistente com o cashback */
.cart-resumo__pix {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px; /* mesmo tamanho do Subtotal */
  font-weight: 600;
  color: #1a1a1a;
  margin-top: 9px;
  padding-left: 2px;
}

.cart-resumo__pix b {
  font-weight: 800;
}

.cart-resumo__pix .icone-pix {
  width: 15px;
  height: 15px;
  color: #1a1a1a; /* PIX em preto */
  flex: none;
}

/* Cashback — inline, mesma cor da PDP (cinza-escuro), com o ícone idêntico */
.cart-resumo__cashback {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #4f4f4f;
  font-size: 13px;
  margin-top: 10px;
  padding-left: 2px;
}

.cart-resumo__cashback b {
  font-weight: 700;
}

.cart-resumo__cashback .icone-cashback {
  width: 17px;
  height: 17px;
  flex: none;
  color: #4f4f4f;
}

/* ----- Compactação no MOBILE (drawer estreito) ----- */
@media screen and (max-width: 749px) {
  .cart-resumo {
    margin-bottom: 10px;
  }

  .cart-resumo__linha {
    font-size: 12px;
    margin-bottom: 3px;
  }

  .cart-resumo__divisor {
    margin: 7px 0;
  }

  .cart-resumo__total-label {
    font-size: 14px;
  }

  .cart-resumo__total-valor {
    font-size: 16px;
  }

  .cart-resumo__parcela {
    font-size: 11px;
  }

  .cart-resumo__pix {
    font-size: 12px; /* mesmo tamanho do Subtotal no mobile */
    margin-top: 8px;
    gap: 6px;
  }

  .cart-resumo__pix .icone-pix {
    width: 14px;
    height: 14px;
  }

  .cart-resumo__cashback {
    font-size: 12px;
    margin-top: 8px;
    gap: 6px;
  }

  .cart-resumo__cashback .icone-cashback {
    width: 15px;
    height: 15px;
  }
}

/* ==========================================================================
   NOME DO PRODUTO NO CARD — no máximo 2 linhas (2026-07-21)
   --------------------------------------------------------------------------
   Usado em: snippets/product-item.liquid (a classe --clamp é aplicada só lá).
   Vale para TODOS os cards da loja: coleções, home, busca, relacionados,
   recém-vistos, blocos de promoção e recomendações do carrinho.

   Por que uma classe modificadora e não a .product-item-meta__title "crua":
   o tema reaproveita essa mesma classe na PÁGINA DO PRODUTO (main-product.liquid),
   no carrinho, no mini-cart, na busca preditiva e nos pedidos do cliente. Mirar a
   classe base truncaria o nome da PDP, que precisa continuar inteiro.

   O corte é por ALTURA DE LINHA, nunca por contagem de caracteres no Liquid:
   assim o limite respeita a largura real da tela e funciona igual no iPhone SE
   e no desktop. A altura fixa de 2 linhas cumpre dois papéis: (a) é o fallback
   para navegadores sem -webkit-line-clamp, que passam a cortar por overflow; e
   (b) alinha os cards da grade — nome de 1 linha e nome de 2 linhas ocupam a
   mesma altura, então preço, parcelamento e PIX ficam na mesma altura nos vizinhos.

   Especificidade dupla (.product-item .…) porque o theme.css carrega DEPOIS deste
   arquivo e define line-height na classe base. Evita !important.
   ========================================================================== */
.product-item .product-item-meta__title--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6; /* mesmo valor do tema no mobile */
  height: 3.2em; /* 2 linhas x 1.6 */
}

@media screen and (min-width: 741px) {
  .product-item .product-item-meta__title--clamp {
    line-height: 1.5; /* o tema reduz o line-height a partir daqui */
    height: 3em; /* 2 linhas x 1.5 */
  }
}

/* Cross-sell do carrinho: o tema já resolve esse card com UMA linha e reticências
   (.mini-cart__recommendations .product-item-meta__title, em theme.css). Mantemos
   o comportamento original ali — as duas regras juntas brigariam e o corte ficaria
   sem as reticências. Especificidade maior para vencer a regra acima. */
.mini-cart__recommendations .product-item .product-item-meta__title--clamp {
  display: block;
  height: auto;
}

/* Correção de um vazamento do tema (bug pré-existente, encontrado em 21/07/26):
   a regra acima do Vortex mira QUALQUER .product-item-meta__title dentro do
   cross-sell — e a compra rápida (popover no celular, gaveta no desktop) é
   injetada DENTRO do card, no DOM. Resultado: ao abrir a compra rápida a partir
   do "Aproveite e compre junto", o nome do produto vinha espremido em 1 linha e
   cortado ("Sapato Loafer Masculino Tratorado Louis Ca..."). Aqui devolvemos a
   quebra normal só dentro da compra rápida; o card do cross-sell continua com
   1 linha, como o tema quer. Especificidade 0,3,0 vence a regra do tema (0,2,0)
   sem !important. */
.mini-cart__recommendations .popover--quick-buy .product-item-meta__title,
.mini-cart__recommendations .drawer--quick-buy .product-item-meta__title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* ==========================================================================
   ETIQUETA DE DESCONTO AO LADO DO PREÇO (2026-07-21)
   --------------------------------------------------------------------------
   Antes o desconto era um selo preto SOBRE a foto (canto superior esquerdo,
   empilhado sob o "MAIS VENDIDO"). Saiu de lá porque praticamente todo produto
   da loja tem desconto — um selo presente em ~100% dos cards não ajuda a
   escolher, só consome o espaço mais valioso do card, que em calçados é a foto.
   Agora ele fecha a linha do preço: de / por / quanto caiu, numa leitura só.

   Usado em: snippets/product-item.liquid (card) e snippets/product-info.liquid (PDP).

   Cor: laranja da marca em versão clara, com texto escuro da mesma família
   (contraste 6,52 — passa AA). A diferença de SATURAÇÃO em relação ao botão
   (#ec6608 sólido) é o que mantém o botão como único elemento que parece
   clicável: tinta clara lê como informação, sólido saturado lê como ação.
   ========================================================================== */
.badge-off {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  background: #fdeee1;
  color: #8f3d06;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.badge-off--pdp {
  font-size: 12px;
  align-self: center; /* a .preco-linha alinha por baseline; o badge fica centrado */
}

@media screen and (min-width: 741px) {
  .badge-off {
    font-size: 12px;
  }
}

/* O "(X% OFF)" do PIX perde o peso: com a etiqueta de desconto a duas linhas
   dali, dois percentuais em negrito disputavam a mesma atenção e davam margem
   para o cliente ler o 5% como se fosse o desconto do produto. Continua
   legível, mas subordinado. */
   (Na PDP a mesma regra vive no <style> do snippets/product-info.liquid, que
   carrega depois deste arquivo e venceria daqui.) */
.product-item__info .preco-card__pix-off {
  font-weight: 400;
  color: #6b6b6b;
}

/* ==========================================================================
   FAIXA DE OFERTA DO KIT — card de produto (2026-07-21)
   --------------------------------------------------------------------------
   Usado em: snippets/kit-offer-band.liquid, renderizado por
   sections/main-collection.liquid apenas na coleção Monte Seu Kit.

   Posição: entre a foto e o nome, na própria linha do fluxo — por isso nunca
   colide com os selos "-XX%" e "★ nota", que são absolutos sobre a imagem.
   Largura total do card porque é filho direto do <product-item>, que é flex
   column (align-items: stretch).

   Cantos: arredondados só no topo-direita e na base-esquerda, como a Aramis
   (medido no CSS deles: border-radius 0 8px 0 8px). O raio é editável no schema.

   MOBILE (crítico): a faixa tem que caber em UMA linha no card de 2 colunas.
   Larguras medidas em Poppins ("Compre 1" 600 + "2º par 30% OFF" 700), somando
   padding lateral e a divisória — card = (largura da tela - 36) / 2:
     • ≤359px  (iPhone SE 1ª ger.): card 142px — texto a 10px ocupa 140px
     • 360-389px (Androids, SE2/8): card 162px — texto a 11px ocupa 159px
     • ≥390px  (iPhone 12-15 etc.): card 177px — texto a 12px ocupa 171px
   Sempre o MAIOR corpo que ainda cabe, com piso de 10px. O white-space: nowrap
   garante que nunca quebre. Mesmo escalonamento por largura já usado acima nas
   linhas de preço/parcelamento/PIX deste arquivo.
   ========================================================================== */

/* Sem respiro entre a foto e a faixa: a faixa herda o espaçamento que a imagem
   tinha, para o resto do card não se mexer. */
.product-item--kit-band .product-item__image-wrapper {
  margin-bottom: 0;
}

.kit-band {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px; /* mesmo respiro que a foto usava antes */
  padding: 6px;
  background: var(--kit-band-bg, #1a1a1a);
  color: var(--kit-band-color, #ffffff);
  border-radius: 0 var(--kit-band-radius, 8px) 0 var(--kit-band-radius, 8px);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap; /* a faixa vive em uma linha só */
}

.kit-band--shadow {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

.kit-band__text--strong {
  font-weight: 600;
}

/* Divisória vertical fina; acompanha a altura do texto via align-self: stretch */
.kit-band__sep {
  width: 1px;
  align-self: stretch;
  margin: 0 6px;
  background: currentColor;
  opacity: 0.45;
}

/* Ícone: escondido no mobile por falta de espaço (ver medições acima). Quando
   oculto não sobra espaço órfão, porque o display: none tira a caixa inteira. */
.kit-band__icon {
  display: none;
  flex: none;
  margin-right: 5px;
  color: var(--kit-band-icon-color, #ffffff);
}

/* O tamanho é imposto aqui e não pelo SVG: CSS vence os atributos width/height,
   então um SVG colado no schema entra proporcional ao texto sem quebrar a faixa. */
.kit-band__icon svg {
  display: block;
  width: 1.15em;
  height: 1.15em;
  max-width: 100%;
}

@media screen and (max-width: 359px) {
  .kit-band {
    font-size: 10px; /* piso de legibilidade */
    padding: 5px 4px;
  }

  .kit-band__sep {
    margin: 0 4px;
  }
}

@media screen and (min-width: 390px) {
  .kit-band {
    font-size: 12px;
  }
}

/* Tablet e desktop: mais espaço, então o ícone volta e o corpo cresce. */
@media screen and (min-width: 741px) {
  .kit-band {
    padding: 7px;
  }

  .kit-band__icon {
    display: block;
  }
}

@media screen and (min-width: 1200px) {
  .kit-band {
    padding: 8px;
    font-size: 13px;
  }
}

/* ==========================================================================
   RODAPÉ DO CARRINHO — espaço abaixo dos botões (MOBILE)
   --------------------------------------------------------------------------
   Reduz o padding-bottom do rodapé no mobile (de ~20px para 14px), mantendo
   a proteção da safe-area do iPhone (barra de gestos). Especificidade dupla
   (.mini-cart .mini-cart__drawer-footer) para vencer o .drawer__footer do tema.
   ========================================================================== */
@media screen and (max-width: 740px) {
  .mini-cart .mini-cart__drawer-footer {
    padding-bottom: 14px;
  }

  @supports (padding: max(0px)) {
    .mini-cart .mini-cart__drawer-footer {
      padding-bottom: max(14px, env(safe-area-inset-bottom, 0px) + 14px);
    }
  }
}
