/**
 * Override: Layout do frete idêntico ao famosinhosshop.com
 * - Página produto: ícone caminhão + badge "Frete grátis" (pill verde) + "Receba até [data]" + Taxa de envio riscada
 * - Checkout: linha Frete | valor com mesmo estilo
 */

/* Linha original de frete (React): oculta quando substituída pelo bloco customizado */
[data-frete-original="1"] {
  display: none !important;
}

/* ========== PÁGINA DE PRODUTO: bloco frete grátis (idêntico famosinhos) ========== */
.product-frete-block {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid rgb(240, 240, 240) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

.product-badge.product-badge-frete {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #27BF93 !important;
  background: #EDF7F5 !important;
}

.product-frete-block .product-frete-date {
  font-size: 12px !important;
  color: rgb(117, 117, 117) !important;
  font-weight: 400 !important;
}

.product-frete-block .product-frete-taxa {
  font-size: 12px !important;
  color: rgb(117, 117, 117) !important;
  font-weight: 400 !important;
}

.product-frete-block .product-frete-taxa span {
  text-decoration: line-through !important;
}

/* Layout base da linha de frete (idêntico ao HTML de referência) */
.checkout-summary-totals .checkout-summary-row,
.checkout-cart-summary .checkout-summary-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid rgb(240, 240, 240) !important;
  font-size: 13px !important;
  color: rgb(34, 34, 34) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

.checkout-summary-totals .checkout-summary-row > *:last-child,
.checkout-cart-summary .checkout-summary-row > *:last-child {
  font-size: 13px !important;
  color: rgb(34, 34, 34) !important;
  font-weight: 500 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

/* Linha de resumo quando o frete é grátis */
.checkout-summary-row:has(.checkout-free) {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

/* Label "Frete" vira badge "Frete grátis" (verde, pill) */
.checkout-summary-row:has(.checkout-free) > *:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e8f5e9;
  color: #2e7d32;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
}

.checkout-summary-row:has(.checkout-free) > *:first-child::after {
  content: " grátis";
}

/* Valor "R$ 0,00" ou "Grátis" em verde */
.checkout-summary-row .checkout-free {
  color: #2e7d32 !important;
  font-weight: 700 !important;
  background: transparent;
}

/* Bloco de frete no resumo: quando grátis, taxa original riscada */
.checkout-summary-totals .checkout-summary-row.checkout-frete-row .checkout-taxa-envio-original,
.checkout-summary-row:has(.checkout-free) + .checkout-summary-row span:last-child,
.checkout-shipping-section .checkout-summary-row:has(.checkout-free) ~ * .checkout-taxa-envio-valor {
  text-decoration: line-through !important;
  color: #999 !important;
  font-weight: 400;
}

/* Seção de frete no checkout: título + opção grátis com badge */
.checkout-shipping-price-free {
  color: #2e7d32 !important;
  font-weight: 700 !important;
  background: #e8f5e9;
  padding: 2px 8px;
  border-radius: 6px;
}

/* Cart: banner frete grátis (reforçar estilo do print) */
.cart-free-shipping-banner {
  background: #EFF7F5 !important;
  border-radius: 6px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

.cart-free-shipping-banner span {
  color: #000301 !important;
  font-weight: 400 !important;
}

/* Holder do SVG do caminhão — força a cor teal mesmo sendo um <span> dentro do banner */
.cart-free-shipping-banner .cart-truck-holder {
  color: #167A73 !important;
}

.cart-free-shipping-banner svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

/* Resumo checkout: linha "Frete" com valor grátis - data de entrega em cinza ao lado do badge */
.checkout-summary-row:has(.checkout-free) .checkout-entrega-date {
  color: #666;
  font-size: 13px;
  font-weight: 400;
}

/* ========== PÁGINA PRODUTO: scroll até o final ========== */
html {
  overflow-x: hidden;
  overflow-y: scroll; /* força scroll no documento */
  -webkit-overflow-scrolling: touch;
  height: 100%;
  /* Aplicar overscroll-behavior SÓ em devices touch (mobile).
     No desktop, deixar default — `none` em html+body simultâneos pode causar
     o browser a ignorar wheel events do trackpad. */
}

body {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 100%;
  position: relative;
}

/* Bloqueia pull-to-refresh (Android Chrome) e bounce overscroll (iOS Safari)
   apenas em dispositivos touch. `pointer: coarse` cobre celular/tablet sem
   afetar laptop com trackpad. */
@media (pointer: coarse) {
  html, body {
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
  }
}

#root,
.container {
  overflow: visible !important;
  min-height: 100%;
}

.product-detail-page {
  overflow: visible !important;
  padding-bottom: 140px;
  min-height: auto;
}

/* Garantir que a galeria não impeça o scroll da página (só o horizontal da galeria) */
.product-gallery-wrap {
  touch-action: pan-y pinch-zoom;
}

/* ========== Seletor de quantidade (carrinho + modal de variantes): visual TikTok-shop ========== */
.cart-item-quantity,
.modal-quantity-controls {
  background: #F1F1F2 !important;
  border-radius: 5px !important;
  padding: 6px !important;
  gap: 0 !important;
}

.cart-qty-btn,
.modal-qty-btn {
  width: 28px !important;
  height: 24px !important;
  padding: 0 !important;
  background-color: transparent !important;
  border: none !important;
  font-size: 0 !important;
  color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 14px 14px !important;
  cursor: pointer !important;
}

.cart-item-quantity .cart-qty-btn:first-of-type,
.modal-quantity-controls .modal-qty-btn:first-of-type {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23222' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 23a1 1 0 0 1 1-1h34a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-2Z'/%3E%3C/svg%3E") !important;
}

.cart-item-quantity .cart-qty-btn:last-of-type,
.modal-quantity-controls .modal-qty-btn:last-of-type {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23222' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 7a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v15H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h15v15a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V26h15a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H26V7Z'/%3E%3C/svg%3E") !important;
}

.cart-qty-value,
.modal-qty-value {
  font-weight: 600 !important;
  font-size: 14px !important;
  min-width: 36px !important;
  padding: 0 8px !important;
  border-left: 1px solid #D8D8D8 !important;
  border-right: 1px solid #D8D8D8 !important;
}