/* ============================================================================
   PRODUCTS.CSS — Estilos dos cards de produto / vitrine (products.tpl + cart0)
   Consolidado de cart-compact-overrides + cart-ultra-compact + cart-modern
   (ordem de carregamento preservada para manter a cascata exata). 2026-06-08
   ============================================================================ */

/* ---- de cart-compact-overrides.css ---- */
/**
 * Cart Compact Overrides
 * Aplicação rápida dos estilos compactos sem recompilar SCSS
 * 
 * Data: 2026-01-22
 * Uso: Adicionar após app.css no header
 */

/* ============================================================================
   PAGE HERO COMPACTO
   ============================================================================ */

.page-hero-compact-cart,
.page-hero.page-hero-compact-cart {
  padding: 1.25rem 1rem !important; /* 20px 16px */
  margin-bottom: 1.25rem !important; /* 20px */
}

.page-hero-compact-cart .page-hero-title {
  font-size: 1.5rem !important; /* 24px */
  margin-bottom: 0.5rem !important; /* 8px */
}

.page-hero-compact-cart .page-hero-subtitle {
  font-size: 1rem !important; /* 16px */
  margin-top: 0.25rem !important; /* 4px */
}

/* ============================================================================
   SEÇÃO "SELECIONE O PRODUTO" COMPACTA
   ============================================================================ */

.cart-product-section {
  margin-bottom: 1.25rem !important; /* 20px */
}

.cart-product-section .section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px */
  margin-bottom: 1rem !important; /* 16px */
}

.cart-product-section .step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-primary, #D6400F);
  color: white;
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  flex-shrink: 0;
}

.cart-product-section h3 {
  font-size: 1.125rem !important; /* 18px */
  font-weight: 600;
  margin: 0;
}

/* ============================================================================
   CARDS DE PRODUTOS COMPACTOS
   ============================================================================ */

.cart-product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  border: 1px solid var(--border-color, #EBECF0);
  border-radius: 0.75rem; /* 12px */
}

.cart-product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-color: var(--brand-primary, #D6400F);
}

.cart-product-card.selected {
  border-color: var(--brand-primary, #D6400F);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(214,64,15, 0.1);
}

.cart-product-card .card-header {
  padding: 0.75rem 1rem !important; /* 12px 16px */
  border-bottom: 1px solid var(--border-color, #EBECF0);
}

.cart-product-card .card-title {
  font-size: 1.125rem !important; /* 18px */
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
}

.cart-product-card .card-body {
  padding: 1rem !important; /* 16px */
}

.cart-product-card .card-description,
.cart-product-card .text-muted {
  font-size: 0.875rem !important; /* 14px */
  line-height: 1.5;
  margin-bottom: 0.75rem !important; /* 12px */
}

.cart-product-card .form-control {
  font-size: 0.875rem !important; /* 14px */
  padding: 0.5rem 0.75rem !important; /* 8px 12px */
}

.cart-product-card .btn {
  padding: 0.5rem 1rem !important; /* 8px 16px */
  font-size: 0.875rem !important; /* 14px */
  font-weight: 500;
}

/* ============================================================================
   GRID DE PRODUTOS OTIMIZADO
   ============================================================================ */

.cart-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem !important; /* 16px */
}

@media (max-width: 768px) {
  .cart-products-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem !important; /* 12px */
  }
}

/* ============================================================================
   REDUZIR ESPAÇAMENTOS GERAIS
   ============================================================================ */

#orderpage .cart-product {
  margin-bottom: 1.25rem !important; /* 20px ao invés de 48px */
}

#orderpage .mb-5 {
  margin-bottom: 1.25rem !important; /* 20px */
}

#orderpage .mb-4 {
  margin-bottom: 1rem !important; /* 16px */
}

#orderpage .mb-3 {
  margin-bottom: 0.75rem !important; /* 12px */
}

/* ============================================================================
   RESPONSIVIDADE
   ============================================================================ */

@media (max-width: 768px) {
  .page-hero-compact-cart {
    padding: 1rem !important; /* 16px */
    margin-bottom: 1rem !important; /* 16px */
  }
  
  .page-hero-compact-cart .page-hero-title {
    font-size: 1.25rem !important; /* 20px */
  }
  
  .page-hero-compact-cart .page-hero-subtitle {
    font-size: 0.875rem !important; /* 14px */
  }
  
  .cart-product-card .card-header {
    padding: 0.5rem 0.75rem !important; /* 8px 12px */
  }
  
  .cart-product-card .card-body {
    padding: 0.75rem !important; /* 12px */
  }
  
  .cart-product-card .card-title {
    font-size: 1rem !important; /* 16px */
  }
  
  .cart-product-section h3 {
    font-size: 1rem !important; /* 16px */
  }
}


/* ---- de cart-ultra-compact.css ---- */
/**
 * Cart Ultra-Compact Styles
 * Refatoração agressiva para cards ultra-compactos, elegantes e modernos
 * Reduz ~50% do espaço vertical mantendo legibilidade
 * 
 * Data: 2026-01-22
 * Prioridade: Máxima (usa !important para sobrescrever tudo)
 */

/* ============================================================================
   RESET GERAL - ORDEPAGE E CARDS
   ============================================================================ */

/* Target: Todos os cards de produtos do carrinho */
#orderpage .card,
.orderpage .card,
.cart-product-card,
.hugetalk-pricing-card,
.section-product-card {
  padding: 12px !important;
  margin-bottom: 12px !important;
  min-height: auto !important;
  max-height: 180px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

/* Remove altura fixa que força cards grandes */
.cart-product-card,
.hugetalk-pricing-card {
  height: auto !important;
  max-height: 180px !important;
}

/* ============================================================================
   PAGE HERO ULTRA-COMPACTO
   ============================================================================ */

.page-hero-compact-cart,
.page-hero.page-hero-compact-cart {
  padding: 16px 12px !important; /* Reduzido de 20px 16px */
  margin-bottom: 16px !important; /* Reduzido de 20px */
}

.page-hero-compact-cart .page-hero-title {
  font-size: 1.25rem !important; /* 20px - reduzido de 24px */
  font-weight: 600 !important;
  margin-bottom: 6px !important; /* Reduzido de 8px */
  line-height: 1.3 !important;
}

.page-hero-compact-cart .page-hero-title i,
.page-hero-compact-cart .page-hero-title .fas,
.page-hero-compact-cart .page-hero-title .material-icons {
  font-size: 1.125rem !important; /* 18px - reduzido de 20px */
}

.page-hero-compact-cart .page-hero-subtitle {
  font-size: 0.875rem !important; /* 14px - mantido */
  margin-top: 4px !important;
  opacity: 0.8;
  line-height: 1.4 !important;
}

/* ============================================================================
   SEÇÃO "SELECIONE O PRODUTO" ULTRA-COMPACTA
   ============================================================================ */

.cart-product-section {
  margin-bottom: 16px !important; /* Reduzido de 20px */
}

.cart-product-section .section-header {
  margin-bottom: 12px !important; /* Reduzido de 16px */
  gap: 8px !important; /* Reduzido de 12px */
}

.cart-product-section .step-number {
  width: 24px !important; /* Reduzido de 28px */
  height: 24px !important;
  font-size: 0.75rem !important; /* 12px - reduzido de 14px */
  font-weight: 600 !important;
}

.cart-product-section h3 {
  font-size: 1rem !important; /* 16px - reduzido de 18px */
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* ============================================================================
   CARDS DE PRODUTOS ULTRA-COMPACTOS
   ============================================================================ */

/* Header do card - padding mínimo */
.cart-product-card .card-header,
.hugetalk-pricing-card .card-header {
  padding: 8px 12px !important; /* Reduzido de 12px 16px */
  border-bottom: 1px solid var(--border-color, #EBECF0) !important;
  background: rgba(var(--card-head-bg-rgb, 251, 251, 252), 0.6) !important;
  border-radius: 8px 8px 0 0 !important;
}

/* Título do produto - drasticamente reduzido */
.cart-product-card .card-title,
.hugetalk-pricing-card-title {
  font-size: 0.875rem !important; /* 14px - reduzido de 18px */
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  margin-bottom: 6px !important;
  color: var(--brand-secondary, #00C26D) !important;
  word-wrap: break-word !important;
}

/* Body do card - padding mínimo */
.cart-product-card .card-body,
.hugetalk-pricing-card .card-body {
  padding: 12px !important; /* Reduzido de 16px */
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

/* Descrição - compacta */
.cart-product-card .card-description,
.hugetalk-pricing-features,
.hugetalk-pricing-card .card-description {
  font-size: 0.8125rem !important; /* 13px */
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
  color: var(--text-muted, #6B7280) !important;
  flex-grow: 1 !important;
}

/* Lista de features - compacta */
.hugetalk-pricing-features li,
.hugetalk-pricing-card ul li {
  padding: 4px 0 !important; /* Reduzido de 12px */
  font-size: 0.8125rem !important; /* 13px */
  line-height: 1.4 !important;
}

.hugetalk-pricing-features li:before,
.hugetalk-pricing-card ul li:before {
  font-size: 1rem !important; /* Reduzido de 1.2rem */
  margin-right: 6px !important; /* Reduzido de 12px */
}

/* ============================================================================
   PREÇOS ULTRA-COMPACTOS
   ============================================================================ */

/* Seção de preço - padding mínimo */
.cart-product-card .card-price-section,
.hugetalk-pricing-price-section {
  margin-top: auto !important;
  padding-top: 8px !important; /* Reduzido de 12px */
  border-top: 1px solid var(--border-color, #EBECF0) !important;
}

/* Label do preço - muito pequeno */
.cart-product-card .card-price-label,
.hugetalk-pricing-cycle-label {
  font-size: 0.6875rem !important; /* 11px - reduzido de 12px */
  color: var(--text-muted, #6B7280) !important;
  margin-bottom: 4px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

/* Preço - reduzido mas ainda destacado */
.cart-product-card .card-price,
.hugetalk-pricing-price {
  font-size: 1.25rem !important; /* 20px - reduzido de 32px */
  font-weight: 700 !important;
  color: var(--brand-secondary, #00C26D) !important;
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}

/* Period text - muito pequeno */
.cart-product-card .card-price .period,
.hugetalk-pricing-price .period {
  font-size: 0.75rem !important; /* 12px */
  font-weight: 400 !important;
  color: var(--text-muted, #6B7280) !important;
}

/* ============================================================================
   BOTÕES E CONTROLES ULTRA-COMPACTOS
   ============================================================================ */

/* Botões - mais finos */
.cart-product-card .btn,
.hugetalk-btn-continue {
  padding: 6px 12px !important; /* Reduzido de 8px 16px */
  font-size: 0.8125rem !important; /* 13px - reduzido de 14px */
  font-weight: 500 !important;
  border-radius: 6px !important;
  width: 100% !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  margin-top: 8px !important;
}

.cart-product-card .btn:hover,
.hugetalk-btn-continue:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Selects - compactos */
.cart-product-card .form-control,
.hugetalk-cycle-display {
  font-size: 0.8125rem !important; /* 13px */
  padding: 6px 10px !important; /* Reduzido de 8px 12px */
  line-height: 1.4 !important;
  border-radius: 6px !important;
  margin-bottom: 8px !important;
}

/* ============================================================================
   GRID ULTRA-COMPACTO
   ============================================================================ */

/* Grid com espaçamento mínimo */
.cart-products-grid,
.hugetalk-pricing-cards {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 12px !important; /* Reduzido de 16px */
  margin-top: 0 !important;
}

/* 5 cards por linha em desktop grande */
@media (min-width: 1400px) {
  .cart-products-grid,
  .hugetalk-pricing-cards {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 12px !important;
  }
}

/* 4 cards por linha em desktop médio */
@media (min-width: 1200px) and (max-width: 1399px) {
  .cart-products-grid,
  .hugetalk-pricing-cards {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* 3 cards por linha em desktop pequeno */
@media (min-width: 992px) and (max-width: 1199px) {
  .cart-products-grid,
  .hugetalk-pricing-cards {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 2 cards por linha em tablet */
@media (min-width: 768px) and (max-width: 991px) {
  .cart-products-grid,
  .hugetalk-pricing-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* 1 card por linha em mobile */
@media (max-width: 767px) {
  .cart-products-grid,
  .hugetalk-pricing-cards {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  .cart-product-card,
  .hugetalk-pricing-card {
    max-height: none !important; /* Remover limite em mobile */
  }
}

/* ============================================================================
   REDUZIR ESPAÇAMENTOS GERAIS DO ORDEPAGE
   ============================================================================ */

#orderpage .cart-product,
#orderpage .mb-5,
.orderpage .mb-5 {
  margin-bottom: 16px !important; /* Reduzido de 20px */
}

#orderpage .mb-4,
.orderpage .mb-4 {
  margin-bottom: 12px !important; /* Reduzido de 16px */
}

#orderpage .mb-3,
.orderpage .mb-3 {
  margin-bottom: 8px !important; /* Reduzido de 12px */
}

#orderpage .mt-5,
.orderpage .mt-5 {
  margin-top: 16px !important;
}

#orderpage .mt-4,
.orderpage .mt-4 {
  margin-top: 12px !important;
}

#orderpage .mt-3,
.orderpage .mt-3 {
  margin-top: 8px !important;
}

/* ============================================================================
   HOVER STATES ELEGANTES
   ============================================================================ */

.cart-product-card:hover,
.hugetalk-pricing-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--brand-primary, #D6400F) !important;
}

.cart-product-card.selected,
.hugetalk-pricing-card.selected {
  border-color: var(--brand-primary, #D6400F) !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 3px rgba(214,64,15, 0.1) !important;
}

/* ============================================================================
   RESPONSIVIDADE ADICIONAL
   ============================================================================ */

@media (max-width: 768px) {
  .page-hero-compact-cart {
    padding: 12px !important;
    margin-bottom: 12px !important;
  }
  
  .page-hero-compact-cart .page-hero-title {
    font-size: 1.125rem !important; /* 18px */
  }
  
  .page-hero-compact-cart .page-hero-subtitle {
    font-size: 0.8125rem !important; /* 13px */
  }
  
  .cart-product-section .section-header {
    margin-bottom: 10px !important;
  }
  
  .cart-product-section h3 {
    font-size: 0.9375rem !important; /* 15px */
  }
  
  .cart-product-card .card-header,
  .hugetalk-pricing-card .card-header {
    padding: 6px 10px !important;
  }
  
  .cart-product-card .card-body,
  .hugetalk-pricing-card .card-body {
    padding: 10px !important;
  }
  
  .cart-product-card .card-title,
  .hugetalk-pricing-card-title {
    font-size: 0.8125rem !important; /* 13px */
  }
  
  .cart-product-card .card-price,
  .hugetalk-pricing-price {
    font-size: 1.125rem !important; /* 18px */
  }
}

/* ============================================================================
   SOBRESCREVER ESTILOS DO HOSTBILL ORDERPAGE
   ============================================================================ */

/* Reset de estilos inline que podem estar nos templates */
#orderpage [style*="padding"],
#orderpage [style*="font-size"],
.orderpage [style*="padding"],
.orderpage [style*="font-size"] {
  /* Não podemos sobrescrever inline styles diretamente,
     mas podemos usar !important nos seletores específicos */
}

/* Target específico para cards com estilos inline */
#orderpage .card[style],
.orderpage .card[style] {
  padding: 12px !important;
  max-height: 180px !important;
}

/* ============================================================================
   AJUSTES ESPECÍFICOS PARA HUGETALK PRICING CARDS
   ============================================================================ */

.hugetalk-products-header {
  margin-bottom: 16px !important; /* Reduzido de 2.5rem (40px) */
}

.hugetalk-products-header h1 {
  font-size: 1.25rem !important; /* 20px - reduzido de 2rem (32px) */
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
}

.hugetalk-products-header h1 .shopping-icon {
  font-size: 1.125rem !important; /* 18px - reduzido de 2rem */
}

.hugetalk-products-header .subtitle {
  font-size: 0.875rem !important; /* 14px - reduzido de 1rem */
  margin-top: 4px !important;
}

.hugetalk-section-title {
  font-size: 1rem !important; /* 16px - reduzido de 1.5rem */
  margin-bottom: 12px !important; /* Reduzido de 2rem */
  margin-top: 8px !important; /* Reduzido de 1rem */
}

.hugetalk-pricing-cards {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 12px !important; /* Reduzido de 2rem (32px) */
}

.hugetalk-pricing-card {
  padding: 12px !important; /* Reduzido de 2rem (32px) */
  border-radius: 8px !important; /* Reduzido de 12px */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  max-height: 180px !important;
}

.hugetalk-pricing-card:hover {
  transform: translateY(-2px) !important; /* Reduzido de -4px */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.hugetalk-pricing-card-title {
  font-size: 0.875rem !important; /* 14px - reduzido de 1.5rem (24px) */
  font-weight: 600 !important; /* Reduzido de 700 */
  margin-bottom: 8px !important; /* Reduzido de 1.5rem */
  line-height: 1.3 !important;
}

.hugetalk-pricing-features {
  margin: 0 0 8px 0 !important; /* Reduzido de 2rem */
}

.hugetalk-pricing-price-section {
  padding-top: 8px !important; /* Reduzido de 1.5rem */
}

.hugetalk-pricing-price {
  font-size: 1.25rem !important; /* 20px - reduzido de 2rem (32px) */
  font-weight: 700 !important;
  margin-bottom: 8px !important; /* Reduzido de 1rem */
  line-height: 1.2 !important;
}

.hugetalk-pricing-price .period {
  font-size: 0.75rem !important; /* 12px - reduzido de 1rem */
  font-weight: 400 !important;
}

/* ============================================================================
   AJUSTES PARA SECTION PRODUCT CARDS (products.tpl)
   ============================================================================ */

.section-product-cards .card,
.section-product-card {
  padding: 12px !important;
  max-height: 180px !important;
}

.section-product-card .card-title {
  font-size: 0.875rem !important; /* 14px */
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}

.section-product-card .card-body {
  padding: 12px !important;
}

/* ============================================================================
   GARANTIR LEGIBILIDADE MÍNIMA
   ============================================================================ */

/* Nunca reduzir abaixo destes valores para manter legibilidade */
.cart-product-card .card-title,
.hugetalk-pricing-card-title {
  min-font-size: 13px !important;
}

.cart-product-card .card-price,
.hugetalk-pricing-price {
  min-font-size: 18px !important;
}

.cart-product-card .btn {
  min-font-size: 13px !important;
  min-height: 32px !important; /* Área de toque mínima */
}


/* ---- de cart-modern.css ---- */
/**
 * Cart Modern Styles - Design Refinado 2026
 * Cards modernos com proporções harmoniosas e espaçamento consistente
 * Baseado em escala 8px e princípios de design moderno
 * 
 * Data: 2026-01-22
 * Versão: Moderna e Elegante
 */

/* ============================================================================
   SISTEMA DE ESPAÇAMENTO - ESCALA 8PX
   ============================================================================ */

:root {
  --spacing-xs: 4px;    /* 0.5 * 8px */
  --spacing-sm: 8px;    /* 1 * 8px */
  --spacing-md: 16px;  /* 2 * 8px */
  --spacing-lg: 24px;  /* 3 * 8px */
  --spacing-xl: 32px;  /* 4 * 8px */
}

/* ============================================================================
   RESET E BASE DOS CARDS - DESIGN MODERNO
   ============================================================================ */

/* Cards principais - proporções harmoniosas */
#orderpage .card,
.orderpage .card,
.cart-product-card,
.hugetalk-pricing-card,
.section-product-card {
  padding: 0 !important; /* Reset - padding será aplicado internamente */
  margin-bottom: var(--spacing-md) !important; /* 16px */
  min-height: auto !important;
  max-height: none !important; /* Remove limitação - deixa fluir naturalmente */
  border-radius: 12px !important; /* Mais moderno que 8px */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Easing suave */
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)) !important;
  background: var(--card-bg, #ffffff) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Hover state elegante */
.cart-product-card:hover,
.hugetalk-pricing-card:hover,
#orderpage .card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--brand-primary, #D6400F) !important;
}

/* Selected state */
.cart-product-card.selected,
.hugetalk-pricing-card.selected,
#orderpage .card.selected {
  border-color: var(--brand-primary, #D6400F) !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 4px rgba(214,64,15, 0.08) !important;
}

/* ============================================================================
   HEADER DO CARD - MODERNO E LIMPO
   ============================================================================ */

.cart-product-card .card-header,
.hugetalk-pricing-card .card-header,
#orderpage .card .card-header {
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm) !important; /* 16px 16px 8px */
  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)) !important;
  background: transparent !important; /* Sem background - mais limpo */
  border-radius: 0 !important;
}

.cart-product-card .card-title,
.hugetalk-pricing-card-title,
#orderpage .card .card-title {
  font-size: 1rem !important; /* 16px - tamanho ideal para legibilidade */
  font-weight: 600 !important;
  line-height: 1.4 !important; /* Espaçamento confortável */
  margin: 0 !important;
  margin-bottom: var(--spacing-xs) !important; /* 4px */
  color: var(--text-primary, #1a1f3a) !important;
  word-wrap: break-word !important;
  letter-spacing: -0.01em !important; /* Tracking sutil para modernidade */
}

/* ============================================================================
   BODY DO CARD - ESPAÇAMENTO HARMONIOSO
   ============================================================================ */

.cart-product-card .card-body,
.hugetalk-pricing-card .card-body,
#orderpage .card .card-body {
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md) !important; /* 8px 16px 16px */
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  gap: var(--spacing-sm) !important; /* 8px entre elementos */
}

/* Descrição - tipografia refinada */
.cart-product-card .card-description,
.hugetalk-pricing-features,
.hugetalk-pricing-card .card-description {
  font-size: 0.875rem !important; /* 14px - legível e compacto */
  line-height: 1.5 !important; /* Espaçamento confortável para leitura */
  color: var(--text-muted, #6B7280) !important;
  margin: 0 !important;
  flex-grow: 1 !important;
}

/* Lista de features - espaçamento consistente */
.hugetalk-pricing-features li,
.hugetalk-pricing-card ul li {
  padding: var(--spacing-xs) 0 !important; /* 4px vertical */
  font-size: 0.875rem !important; /* 14px */
  line-height: 1.5 !important;
  color: var(--text-muted, #6B7280) !important;
}

.hugetalk-pricing-features li:before,
.hugetalk-pricing-card ul li:before {
  font-size: 1rem !important;
  margin-right: var(--spacing-sm) !important; /* 8px */
  color: var(--brand-secondary, #00C26D) !important;
}

/* ============================================================================
   SEÇÃO DE PREÇO - DESTAQUE ELEGANTE
   ============================================================================ */

.cart-product-card .card-price-section,
.hugetalk-pricing-price-section {
  margin-top: auto !important;
  padding-top: var(--spacing-md) !important; /* 16px */
  border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-xs) !important; /* 4px entre label e preço */
}

/* Label do preço - discreto mas legível */
.cart-product-card .card-price-label,
.hugetalk-pricing-cycle-label {
  font-size: 0.75rem !important; /* 12px */
  color: var(--text-muted, #6B7280) !important;
  margin: 0 !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important; /* Tracking para labels */
}

/* Preço - destaque mas não dominante */
.cart-product-card .card-price,
.hugetalk-pricing-price {
  font-size: 1.5rem !important; /* 24px - proporção harmoniosa */
  font-weight: 700 !important;
  color: var(--brand-secondary, #00C26D) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: var(--spacing-xs) !important; /* 4px */
  letter-spacing: -0.02em !important; /* Tracking para números grandes */
}

/* Period text - complemento discreto */
.cart-product-card .card-price .period,
.hugetalk-pricing-price .period {
  font-size: 0.875rem !important; /* 14px */
  font-weight: 400 !important;
  color: var(--text-muted, #6B7280) !important;
  margin-left: var(--spacing-xs) !important;
}

/* ============================================================================
   BOTÕES E CONTROLES - MODERNOS E ACESSÍVEIS
   ============================================================================ */

.cart-product-card .btn,
.hugetalk-btn-continue,
#orderpage .card .btn {
  padding: var(--spacing-sm) var(--spacing-md) !important; /* 8px 16px */
  font-size: 0.875rem !important; /* 14px */
  font-weight: 600 !important; /* Mais destaque */
  border-radius: 8px !important;
  width: 100% !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
  margin-top: var(--spacing-md) !important; /* 16px */
  transition: all 0.2s ease !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.cart-product-card .btn:hover,
.hugetalk-btn-continue:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Selects - modernos e compactos */
.cart-product-card .form-control,
.hugetalk-cycle-display,
#orderpage .card .form-control {
  font-size: 0.875rem !important; /* 14px */
  padding: var(--spacing-sm) var(--spacing-md) !important; /* 8px 16px */
  line-height: 1.5 !important;
  border-radius: 8px !important;
  margin: 0 !important;
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.15)) !important;
  transition: all 0.2s ease !important;
}

.cart-product-card .form-control:focus,
.hugetalk-cycle-display:focus {
  border-color: var(--brand-primary, #D6400F) !important;
  box-shadow: 0 0 0 3px rgba(214,64,15, 0.1) !important;
  outline: none !important;
}

/* ============================================================================
   PAGE HERO - MODERNO E COMPACTO
   ============================================================================ */

.page-hero-compact-cart,
.page-hero.page-hero-compact-cart {
  padding: var(--spacing-lg) var(--spacing-md) !important; /* 24px 16px */
  margin-bottom: var(--spacing-lg) !important; /* 24px */
  border-radius: 12px !important;
}

.page-hero-compact-cart .page-hero-title {
  font-size: 1.5rem !important; /* 24px - proporção moderna */
  font-weight: 700 !important;
  margin-bottom: var(--spacing-sm) !important; /* 8px */
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}

.page-hero-compact-cart .page-hero-title i,
.page-hero-compact-cart .page-hero-title .fas {
  font-size: 1.375rem !important; /* 22px */
  margin-right: var(--spacing-sm) !important;
}

.page-hero-compact-cart .page-hero-subtitle {
  font-size: 0.9375rem !important; /* 15px */
  margin-top: var(--spacing-xs) !important; /* 4px */
  opacity: 0.75;
  line-height: 1.5 !important;
}

/* ============================================================================
   SEÇÃO "SELECIONE O PRODUTO" - MODERNA
   ============================================================================ */

.cart-product-section {
  margin-bottom: var(--spacing-lg) !important; /* 24px */
}

.cart-product-section .section-header {
  margin-bottom: var(--spacing-md) !important; /* 16px */
  gap: var(--spacing-sm) !important; /* 8px */
  display: flex !important;
  align-items: center !important;
}

.cart-product-section .step-number {
  width: 32px !important; /* Proporção melhor */
  height: 32px !important;
  font-size: 0.875rem !important; /* 14px */
  font-weight: 700 !important;
  border-radius: 8px !important; /* Mais moderno que círculo */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--brand-primary, #D6400F) !important;
  color: white !important;
  flex-shrink: 0 !important;
}

.cart-product-section h3 {
  font-size: 1.125rem !important; /* 18px */
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
}

/* ============================================================================
   GRID MODERNO E RESPONSIVO
   ============================================================================ */

.cart-products-grid,
.hugetalk-pricing-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: var(--spacing-md) !important; /* 16px - espaçamento harmonioso */
  margin-top: 0 !important;
}

/* Desktop grande - 4-5 cards por linha */
@media (min-width: 1400px) {
  .cart-products-grid,
  .hugetalk-pricing-cards {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: var(--spacing-md) !important; /* 16px */
  }
}

/* Desktop médio - 4 cards */
@media (min-width: 1200px) and (max-width: 1399px) {
  .cart-products-grid,
  .hugetalk-pricing-cards {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Desktop pequeno - 3 cards */
@media (min-width: 992px) and (max-width: 1199px) {
  .cart-products-grid,
  .hugetalk-pricing-cards {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Tablet - 2 cards */
@media (min-width: 768px) and (max-width: 991px) {
  .cart-products-grid,
  .hugetalk-pricing-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--spacing-sm) !important; /* 12px */
  }
}

/* Mobile - 1 card */
@media (max-width: 767px) {
  .cart-products-grid,
  .hugetalk-pricing-cards {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-sm) !important; /* 12px */
  }
  
  .cart-product-card,
  .hugetalk-pricing-card {
    max-height: none !important; /* Sem limitação em mobile */
  }
}

/* ============================================================================
   REDUZIR ESPAÇAMENTOS GERAIS DO ORDEPAGE
   ============================================================================ */

#orderpage .cart-product,
#orderpage .mb-5,
.orderpage .mb-5 {
  margin-bottom: var(--spacing-lg) !important; /* 24px */
}

#orderpage .mb-4,
.orderpage .mb-4 {
  margin-bottom: var(--spacing-md) !important; /* 16px */
}

#orderpage .mb-3,
.orderpage .mb-3 {
  margin-bottom: var(--spacing-sm) !important; /* 8px */
}

#orderpage .mt-5,
.orderpage .mt-5 {
  margin-top: var(--spacing-lg) !important; /* 24px */
}

#orderpage .mt-4,
.orderpage .mt-4 {
  margin-top: var(--spacing-md) !important; /* 16px */
}

#orderpage .mt-3,
.orderpage .mt-3 {
  margin-top: var(--spacing-sm) !important; /* 8px */
}

/* ============================================================================
   AJUSTES ESPECÍFICOS PARA HUGETALK
   ============================================================================ */

.hugetalk-products-header {
  margin-bottom: var(--spacing-lg) !important; /* 24px */
}

.hugetalk-products-header h1 {
  font-size: 1.5rem !important; /* 24px */
  font-weight: 700 !important;
  margin-bottom: var(--spacing-sm) !important; /* 8px */
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}

.hugetalk-products-header h1 .shopping-icon {
  font-size: 1.375rem !important; /* 22px */
}

.hugetalk-products-header .subtitle {
  font-size: 0.9375rem !important; /* 15px */
  margin-top: var(--spacing-xs) !important; /* 4px */
}

.hugetalk-section-title {
  font-size: 1.125rem !important; /* 18px */
  margin-bottom: var(--spacing-md) !important; /* 16px */
  margin-top: var(--spacing-sm) !important; /* 8px */
  font-weight: 600 !important;
}

/* ============================================================================
   RESPONSIVIDADE ADICIONAL
   ============================================================================ */

@media (max-width: 768px) {
  .page-hero-compact-cart {
    padding: var(--spacing-md) !important; /* 16px */
    margin-bottom: var(--spacing-md) !important; /* 16px */
  }
  
  .page-hero-compact-cart .page-hero-title {
    font-size: 1.25rem !important; /* 20px */
  }
  
  .page-hero-compact-cart .page-hero-subtitle {
    font-size: 0.875rem !important; /* 14px */
  }
  
  .cart-product-section .section-header {
    margin-bottom: var(--spacing-sm) !important; /* 8px */
  }
  
  .cart-product-section h3 {
    font-size: 1rem !important; /* 16px */
  }
  
  .cart-product-card .card-header,
  .hugetalk-pricing-card .card-header {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-xs) !important; /* 8px 16px 4px */
  }
  
  .cart-product-card .card-body,
  .hugetalk-pricing-card .card-body {
    padding: var(--spacing-xs) var(--spacing-md) var(--spacing-md) !important; /* 4px 16px 16px */
  }
  
  .cart-product-card .card-title,
  .hugetalk-pricing-card-title {
    font-size: 0.9375rem !important; /* 15px */
  }
  
  .cart-product-card .card-price,
  .hugetalk-pricing-price {
    font-size: 1.25rem !important; /* 20px */
  }
  
  .cart-product-card .btn {
    padding: var(--spacing-sm) var(--spacing-md) !important; /* 8px 16px */
    font-size: 0.875rem !important; /* 14px */
    min-height: 40px !important; /* Área de toque adequada */
  }
}

/* ============================================================================
   GARANTIR LEGIBILIDADE MÍNIMA
   ============================================================================ */

/* Tamanhos mínimos para acessibilidade */
.cart-product-card .card-title,
.hugetalk-pricing-card-title {
  min-font-size: 14px !important;
}

.cart-product-card .card-price,
.hugetalk-pricing-price {
  min-font-size: 20px !important;
}

.cart-product-card .btn {
  min-font-size: 14px !important;
  min-height: 40px !important; /* Área de toque mínima para mobile */
}

/* ============================================================================
   ANIMAÇÕES E TRANSIÇÕES SUAVES
   ============================================================================ */

.cart-product-card,
.hugetalk-pricing-card {
  animation: fadeIn 0.3s ease-out !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger animation para grid */
.cart-products-grid > *:nth-child(1) { animation-delay: 0.05s; }
.cart-products-grid > *:nth-child(2) { animation-delay: 0.1s; }
.cart-products-grid > *:nth-child(3) { animation-delay: 0.15s; }
.cart-products-grid > *:nth-child(4) { animation-delay: 0.2s; }
.cart-products-grid > *:nth-child(5) { animation-delay: 0.25s; }