/* ==========================================================================
   UNIVERSO SUPRIMENTOS CORPORATIVOS - DESIGN SYSTEM & THEME
   Vitrine Digital B2B / Cotação WhatsApp Corporativa
   PALETA REFINADA: Tons de Cinza Neutros, Texturas Sutis e Hero Humanizada
   ========================================================================== */

:root {
  /* Brand Grayscale Palette (Elegância Industrial & Minimalismo) */
  --color-primary: #18191B;        /* Grafite Quase Preto Profundo */
  --color-primary-light: #2A2C30;  /* Grafite Médio */
  --color-primary-muted: #4A4D54;  /* Grafite Claro */
  
  /* Tons de Cinza Suaves */
  --gray-50: #F8F9FA;
  --gray-100: #F1F3F5;
  --gray-200: #E9ECEF;
  --gray-300: #DEE2E6;
  --gray-400: #CED4DA;
  --gray-500: #ADB5BD;
  --gray-600: #6C757D;
  --gray-700: #495057;
  --gray-800: #343A40;
  --gray-900: #212529;

  /* Cores de Ação */
  --color-accent: #C67B2E;         /* Azul Royal Elétrico para Ações */
  --color-accent-hover: #9E5F1D;
  --color-secondary: #00C853;      /* Verde Sucesso / Cotação */
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #1EBE5D;
  --color-offer: #FF3B30;          /* Destaque de Oferta Pronta Entrega */

  /* Superfícies - Tons Neutros & Ardósia (Zero Preto Puro) */
  --bg-body: #EEF2F6;
  --bg-surface: #FFFFFF;
  --bg-dark: #1E2229;
  --bg-dark-surface: #252A33;

  /* Tipografia */
  --text-main: #1C1E21;
  --text-muted: #5C6370;
  --text-light: #8C93A0;
  --text-inverse: #FFFFFF;

  /* Bordas e Raios Mais Refinados */
  --border-subtle: #E2E5E9;
  --border-strong: #CDD2D9;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 9999px;

  /* Sombras */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.09);
  --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.08);

  --container-max: 1240px;
  --transition-fast: 0.16s ease;
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-body);
  /* Padrão sutil geométrico de fundo com contraste elegante */
  background-image: radial-gradient(#D1D7E0 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ==========================================================================
   TOP BAR (TONS DE CINZA GRAFITE)
   ========================================================================== */
.top-bar {
  background: var(--bg-dark);
  color: var(--gray-400);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.top-bar-features {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.top-feature-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.top-feature-item svg {
  color: var(--color-secondary);
  flex-shrink: 0;
}

.top-bar-contact {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.top-bar-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color var(--transition-fast);
}

.top-bar-contact a:hover {
  color: #FFFFFF;
}

.top-bar-proposta {
  background: rgba(198, 123, 46, 0.18);
  color: #E9B872 !important;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  border: 1px solid rgba(198, 123, 46, 0.35);
  font-size: 0.76rem;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.top-bar-proposta:hover {
  background: rgba(198, 123, 46, 0.3);
  color: #FFFFFF !important;
}

.top-bar-whatsapp {
  color: #25D366 !important;
  font-weight: 600;
}

/* ==========================================================================
   HEADER PRINCIPAL & LOGO OFICIAL SVG
   ========================================================================== */
.header-main {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border-subtle);
  transition: all var(--transition-fast);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.75rem 0;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo-img {
  height: 48px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}

/* ==========================================================================
   BARRA DE BUSCA DO CATÁLOGO (FORA DO CABEÇALHO)
   ========================================================================== */
.catalog-search-section {
  padding: 1.5rem 0 0.75rem;
  background: #E2E8F0;
  border-top: 1px solid #CBD5E1;
  border-bottom: 1px solid #CBD5E1;
}

.catalog-search-card {
  max-width: 740px;
  margin: 0 auto;
}

.search-input-wrapper {
  position: relative;
  width: 100%;
}

.catalog-search-card .search-input-wrapper input {
  width: 100%;
  height: 54px;
  background: #FFFFFF;
  border: 2px solid #CBD5E1;
  padding: 0.75rem 1.25rem 0.75rem 3.4rem;
  border-radius: var(--radius-pill);
  font-size: 0.98rem;
  outline: none;
  transition: all var(--transition-fast);
  color: var(--text-main);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
}

.catalog-search-card .search-input-wrapper input:focus {
  background: #FFFFFF;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(198, 123, 46, 0.18), 0 4px 20px rgba(198, 123, 46, 0.15);
}

.catalog-search-card .search-input-wrapper input::placeholder {
  color: var(--text-muted);
  font-size: 0.92rem;
}

.catalog-search-card .search-icon {
  position: absolute;
  left: 1.15rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-accent);
  pointer-events: none;
  width: 20px;
  height: 20px;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.btn-upload-list {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #FFFFFF;
  color: var(--color-primary);
  border: 1px solid var(--border-subtle);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-repeat-quote {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(37, 211, 102, 0.1);
  color: #15803D;
  border: 1.5px solid rgba(37, 211, 102, 0.4);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-repeat-quote:hover {
  background: #25D366;
  color: #FFFFFF;
  border-color: #25D366;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.btn-drawer-repeat-quote {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #F0FDF4;
  color: #16A34A;
  border: 1.5px solid #BBF7D0;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.84rem;
  cursor: pointer;
  margin-top: 0.85rem;
  transition: all var(--transition-fast);
}

.btn-drawer-repeat-quote:hover {
  background: #25D366;
  color: #FFFFFF;
  border-color: #25D366;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
}

.btn-upload-list:hover {
  background: var(--gray-100);
  border-color: var(--gray-400);
}

.btn-cart-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: transparent;
  color: #C67B2E;
  border: 2px solid #C67B2E;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(198, 123, 46, 0.12);
}

.btn-cart-trigger:hover {
  background: rgba(198, 123, 46, 0.08);
  border-color: #9E5F1D;
  color: #9E5F1D;
  transform: translateY(-1px);
}

/* Quando o carrinho tiver itens: fica preenchido em azul corporativo */
.btn-cart-trigger.has-items {
  background: #C67B2E;
  color: #FFFFFF;
  border: 2px solid #C67B2E;
  box-shadow: 0 4px 16px rgba(198, 123, 46, 0.35);
}

.btn-cart-trigger.has-items:hover {
  background: #9E5F1D;
  border-color: #9E5F1D;
  color: #FFFFFF;
}

/* Badge do carrinho: branco com número azul */
.cart-badge {
  background: #FFFFFF;
  color: #C67B2E;
  font-size: 0.78rem;
  font-weight: 900;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(198, 123, 46, 0.2);
}

.btn-cart-trigger:not(.has-items) .cart-badge {
  background: #C67B2E;
  color: #FFFFFF;
  border: none;
}

/* ==========================================================================
   HERO BANNER HUMANIZADA COM BACKGROUND FOTOGRÁFICO & SHADER FADER
   ========================================================================== */
.hero-section {
  position: relative;
  /* Background: capa do catálogo 2026 (foto real Lutes) com overlay reforçado no lado do texto */
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.72) 50%, rgba(15, 23, 42, 0.45) 100%),
    url('assets/images/produtos/capa_lutes.jpg') center 30% / cover no-repeat;
  color: #FFFFFF;
  padding: 3.5rem 0 3.25rem;
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
  width: 100%;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 2.5rem;
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-content {
  min-width: 0;
}

.hero-offers-container {
  min-width: 0;
  width: 100%;
}

.hero-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  backdrop-filter: blur(10px);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.hero-title {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.95);
}

.hero-title span {
  color: #FFFFFF;
  border-bottom: 3px solid var(--color-accent);
}

.hero-subtitle {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #F1F5F9;
  margin-bottom: 1.75rem;
  max-width: 540px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.btn-primary-glow {
  background: var(--color-accent);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 16px rgba(198, 123, 46, 0.35);
}

.btn-primary-glow:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
}

.btn-secondary-glass {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-secondary-glass:hover {
  background: rgba(255, 255, 255, 0.2);
}

.hero-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: #E5E9F0;
}

.highlight-item svg {
  color: var(--color-secondary);
  flex-shrink: 0;
}

/* ==========================================================================
   CARROSSEL DE OFERTAS B2B EM DESTAQUE (HERO CLEAN & TRANSLÚCIDO)
   ========================================================================== */
.hero-offers-container {
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-xl);
  padding: 1.35rem 1.45rem;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  color: #FFFFFF;
  position: relative;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.offers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.offers-header-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-offer-tag {
  background: rgba(239, 68, 68, 0.2);
  color: #FCA5A5;
  border: 1px solid rgba(239, 68, 68, 0.4);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.03em;
}

/* Carrossel de Ofertas Clean */
.offers-carousel-wrapper {
  position: relative;
  overflow: hidden;
}

.offers-slides-track {
  display: flex;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

.offer-slide-item {
  min-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.offer-card-body {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: 1.15rem;
  display: grid;
  grid-template-columns: 135px 1fr;
  gap: 1.25rem;
  align-items: center;
  transition: all var(--transition-fast);
}

.offer-card-body:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.26);
}

.offer-img-box {
  width: 135px;
  height: 135px;
  background: #FFFFFF;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.offer-img-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.offer-card-body:hover .offer-img-box img {
  transform: scale(1.06);
}

.offer-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.offer-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #4ADE80;
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(74, 222, 128, 0.3);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  align-self: flex-start;
}

.offer-title {
  font-size: 1rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.3;
  margin-bottom: 0.25rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.offer-condition {
  font-size: 0.78rem;
  color: #CBD5E1;
  margin-bottom: 0.65rem;
}

.offer-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.offer-price-val {
  font-size: 1.45rem;
  font-weight: 900;
  color: #E9B872;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 8px rgba(198, 123, 46, 0.4);
}

.offer-price-unit {
  font-size: 0.76rem;
  color: #94A3B8;
  font-weight: 500;
}

.offer-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  gap: 0.75rem;
}

.carousel-nav-arrows {
  display: flex;
  gap: 0.4rem;
}

.btn-carousel-nav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.btn-carousel-nav:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

.btn-add-offer-cart {
  background: #C67B2E;
  color: #FFFFFF;
  border: none;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0.6rem 1.05rem;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 14px rgba(198, 123, 46, 0.4);
}

.btn-add-offer-cart:hover {
  background: #9E5F1D;
  transform: translateY(-1px);
}

/* Dots indicadores do carrossel */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.carousel-dot.active {
  width: 22px;
  border-radius: var(--radius-pill);
  background: #C67B2E;
}

/* Botão de Receber Ofertas via WhatsApp na Hero */
.hero-offers-whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.65rem 1rem;
  margin-top: 0.85rem;
  background: rgba(37, 211, 102, 0.15);
  border: 1px solid rgba(37, 211, 102, 0.35);
  color: #4ADE80;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.hero-offers-whatsapp-btn:hover {
  background: #25D366;
  color: #FFFFFF;
  border-color: #25D366;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}

/* ==========================================================================
   TRUST BAR (NEUTRO)
   ========================================================================== */
.trust-banner {
  background: #FFFFFF;
  border-bottom: 1px solid var(--border-subtle);
  padding: 1.5rem 0;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.trust-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.trust-icon-box {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--gray-100);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust-text h5 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
  margin-bottom: 0.15rem;
}

.trust-text p {
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* ==========================================================================
   CATEGORIAS (STICKY TABS EM GRAFITE & CINZA)
   ========================================================================== */
.categories-nav-section {
  padding: 1.25rem 0;
  position: sticky;
  top: 65px;
  z-index: 90;
  background: #EAEEF4;
  border-bottom: 1.5px solid #CBD5E1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.categories-bar-wrapper {
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: var(--radius-lg);
  padding: 0.5rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.categories-bar-wrapper::-webkit-scrollbar {
  display: none;
}

.category-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #E2E8F0;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.category-tab-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
  border-color: #CBD5E1;
  transform: translateY(-1px);
}

.category-tab-btn.active {
  background: #C67B2E;
  color: #FFFFFF;
  border-color: #C67B2E;
  box-shadow: 0 4px 14px rgba(198, 123, 46, 0.4);
}

.category-tab-btn.active svg {
  color: #FFFFFF;
}

/* ==========================================================================
   SEÇÃO "MANDE SUA LISTA DE COMPRAS" (SUAVIZADA COM CARD CLARO & BORDA DELICADA)
   ========================================================================== */
.quick-quote-banner {
  margin: 2rem auto 3rem;
  width: 100%;
}

.quick-quote-box {
  /* Substituição do bloco escuro por um card clean de alto contraste suave com padrão sutil */
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: 2rem 2.25rem;
  color: var(--text-main);
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: center;
  gap: 2rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}

.quick-quote-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--color-primary);
}

.quick-quote-content h3 {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.45rem;
  color: var(--text-main);
}

.quick-quote-content p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 1.15rem;
  max-width: 540px;
}

.quick-quote-form textarea {
  width: 100%;
  height: 85px;
  padding: 0.75rem 1rem;
  background: var(--gray-50);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-size: 0.85rem;
  resize: none;
  outline: none;
  transition: all var(--transition-fast);
}

.quick-quote-form textarea:focus {
  background: #FFFFFF;
  border-color: var(--gray-700);
}

.quick-quote-form textarea::placeholder {
  color: var(--gray-500);
}

.btn-send-list {
  background: var(--color-whatsapp);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-md);
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: 0.75rem;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}

.btn-send-list:hover {
  background: var(--color-whatsapp-hover);
  transform: translateY(-1px);
}

/* ==========================================================================
   SUPER CTA: SISTEMA INVISÍVEL DE APOIO A VENDAS & LISTA WHATSAPP
   ========================================================================== */
.super-cta-whatsapp-section {
  margin: 3.5rem auto 4.5rem;
}

.super-cta-card {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border: 1.5px solid #334155;
  border-radius: var(--radius-2xl, 24px);
  padding: 3rem 3.25rem;
  color: #FFFFFF;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: center;
  gap: 3rem;
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.25);
  position: relative;
  overflow: hidden;
}

.super-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(37, 211, 102, 0.15);
  border: 1px solid rgba(37, 211, 102, 0.35);
  color: #4ADE80;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.25rem;
}

.super-cta-content h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.super-cta-content p {
  font-size: 0.96rem;
  line-height: 1.6;
  color: #CBD5E1;
  margin-bottom: 1.5rem;
}

.super-cta-content p strong {
  color: #FFFFFF;
}

.super-cta-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.super-cta-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: #E2E8F0;
  line-height: 1.45;
}

.super-cta-features li svg {
  color: #22C55E;
  flex-shrink: 0;
  margin-top: 2px;
}

.super-cta-features li strong {
  color: #FFFFFF;
}

.super-cta-btn-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.btn-super-cta-whats {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  background: #25D366;
  color: #FFFFFF;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 1rem 1.85rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
  align-self: flex-start;
}

.btn-super-cta-whats:hover {
  background: #20BA56;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5);
  color: #FFFFFF;
}

.super-cta-subtext {
  font-size: 0.76rem;
  color: #94A3B8;
}

/* Mockup visual de celular/balão WhatsApp */
.whats-preview-card {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.whats-preview-header {
  background: #075E54;
  color: #FFFFFF;
  padding: 0.85rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.whats-preview-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #C67B2E;
  color: #FFFFFF;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.whats-preview-name {
  font-size: 0.88rem;
  font-weight: 700;
}

.whats-preview-status {
  font-size: 0.72rem;
  color: #A7F3D0;
}

.whats-preview-body {
  background: #EFEAE2;
  padding: 1.25rem 1rem;
  background-image: radial-gradient(#CBD5E1 1px, transparent 1px);
  background-size: 16px 16px;
}

.whats-balloon-msg {
  background: #FFFFFF;
  border-radius: 0.5rem 0.5rem 0.5rem 0;
  padding: 0.85rem 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  color: #1E293B;
  font-size: 0.82rem;
  line-height: 1.45;
}

.whats-balloon-msg p {
  margin: 0 0 0.4rem;
}

.whats-mini-item {
  background: #F1F5F9;
  border-left: 3px solid #C67B2E;
  padding: 0.35rem 0.55rem;
  margin: 0.3rem 0;
  border-radius: 3px;
  font-size: 0.76rem;
}

@media (max-width: 900px) {
  .super-cta-card {
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem;
    gap: 2rem;
  }
  .btn-super-cta-whats {
    width: 100%;
  }
}

/* ==========================================================================
   GRID DE PRODUTOS B2B
   ========================================================================== */
.catalog-section {
  padding: 2.25rem 0 4rem;
  background: #F1F4F9;
  border-top: 1px solid #CBD5E1;
}

.catalog-header {
  display: none; /* Oculto no modo streaming geral para eliminar os banners redundantes conforme Print 2 */
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1.25rem;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-left: 6px solid #C67B2E;
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.75rem;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

.catalog-header-title h2 {
  font-size: 1.55rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}

.catalog-header-title p {
  font-size: 0.90rem;
  color: #64748B;
  margin: 0;
}

.catalog-counter-badge {
  background: #EFF6FF;
  color: #C67B2E;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 0.45rem 1.15rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid #BFDBFE;
  box-shadow: 0 2px 8px rgba(198, 123, 46, 0.12);
  white-space: nowrap;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* ==========================================================================
   CATEGORIAS TIPO STREAMING (RAILS / TRILHOS HORIZONTAIS ESTILO NETFLIX B2B)
   ========================================================================== */
.streaming-rails-container {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  width: 100%;
}

.streaming-rail-section {
  width: 100%;
  position: relative;
}

.streaming-rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.15rem;
  padding: 1.1rem 1.4rem;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  position: relative;
  overflow: hidden;
}

/* MINI HERO DE CATEGORIA: DESFOQUE/FADE À ESQUERDA PARA TEXTO RESPIRAR E FOTOGRAFIA NÍTIDA AO LONGE À DIREITA */
.streaming-rail-header.category-mini-hero {
  background-color: #0F172A;
  background-image: 
    linear-gradient(90deg, 
      rgba(15, 23, 42, 0.96) 0%, 
      rgba(15, 23, 42, 0.90) 30%, 
      rgba(15, 23, 42, 0.65) 60%, 
      rgba(15, 23, 42, 0.22) 100%
    ), 
    var(--cat-bg);
  background-size: cover;
  background-position: center right;
  border: 1.5px solid #334155;
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  min-height: 90px;
  position: relative;
  overflow: hidden;
}

.cat-mini-hero-overlay {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  mask-image: linear-gradient(to right, black 0%, black 40%, transparent 85%);
  -webkit-mask-image: linear-gradient(to right, black 0%, black 40%, transparent 85%);
  pointer-events: none;
}

.rail-title-box {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.clickable-rail-header {
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.clickable-rail-header:hover {
  transform: translateY(-2px);
  border-color: #C67B2E !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
}

/* Ocultar ícone sob imagem nas categorias (mobile e desktop) conforme solicitado */
.cat-mini-hero-icon-filter {
  display: none !important;
}

.cat-mini-hero-meta {
  display: flex;
  flex-direction: column;
}

.cat-tag-badge-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

/* Botão "CATEGORIA" em outline fino branco */
.cat-badge-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.45);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
}

/* Badge de quantidade no mesmo outline fino suave */
.streaming-rail-header.category-mini-hero .rail-count-badge {
  font-size: 0.68rem;
  font-weight: 600;
  color: #CBD5E1;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.streaming-rail-header.category-mini-hero .rail-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.streaming-rail-header.category-mini-hero .rail-subtitle-desktop {
  display: block;
  font-size: 0.82rem;
  color: #E2E8F0;
  font-weight: 500;
  margin-top: 3px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

/* Seta minimalista para conhecer categoria com transição suave */
.streaming-rail-header.category-mini-hero .rail-see-all-btn,
.minimal-arrow-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all var(--transition-fast);
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  backdrop-filter: blur(8px);
}

.streaming-rail-header.category-mini-hero .rail-see-all-btn svg,
.minimal-arrow-btn svg {
  transition: transform var(--transition-fast);
}

.streaming-rail-header.category-mini-hero:hover .rail-see-all-btn,
.streaming-rail-header.category-mini-hero:hover .minimal-arrow-btn {
  background: #C67B2E;
  border-color: #C67B2E;
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(198, 123, 46, 0.5);
}

.streaming-rail-header.category-mini-hero:hover .minimal-arrow-btn svg {
  transform: translateX(4px);
}

/* BANNER EXPANDIDO NO MODO FOCO DE CATEGORIA (CONTRASTE MÁXIMO E MESMO ESPAÇO DO PRIMEIRO BANNER) */
.category-hero-banner,
.category-focus-header {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 90px !important;
  padding: 1.1rem 1.4rem !important;
  background-color: #0F172A !important;
  background-image: 
    linear-gradient(90deg, 
      rgba(15, 23, 42, 0.98) 0%, 
      rgba(15, 23, 42, 0.94) 35%, 
      rgba(15, 23, 42, 0.82) 65%, 
      rgba(15, 23, 42, 0.55) 100%
    ), 
    var(--cat-bg) !important;
  background-size: cover !important;
  background-position: center right !important;
  border: 1.5px solid #334155 !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22) !important;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 1.15rem !important;
  gap: 1.25rem;
}

.cat-focus-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.7) 50%, transparent 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
}

.cat-focus-info {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  position: relative;
  z-index: 2;
  min-width: 0;
}

.cat-hero-text {
  display: flex;
  flex-direction: column;
}

.cat-hero-tag-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}

.cat-hero-title {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.cat-hero-sub {
  font-size: 0.82rem !important;
  color: #E2E8F0 !important;
  margin-top: 3px !important;
  margin-bottom: 0 !important;
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

.category-hero-banner .btn-back-streaming {
  background: #FFFFFF !important;
  border: 1px solid #FFFFFF !important;
  color: #0F172A !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 0.5rem 1.15rem !important;
  border-radius: var(--radius-pill) !important;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  z-index: 2;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.category-hero-banner .btn-back-streaming:hover {
  background: #F1F5F9 !important;
  color: #C67B2E !important;
  border-color: #F1F5F9 !important;
  transform: translateX(-3px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.streaming-rail-wrapper {
  position: relative;
  width: 100%;
}

.streaming-rail-track {
  display: flex;
  gap: 1.15rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.4rem 0.35rem 0.95rem;
  scroll-behavior: smooth;
}

.streaming-rail-track::-webkit-scrollbar {
  display: none;
}

/* Card nos Trilhos Streaming */
.streaming-rail-track .product-card {
  flex: 0 0 250px;
  max-width: 250px;
  scroll-snap-align: start;
}

/* Botões de Navegação dos Trilhos (Desktop) */
.rail-nav-btn {
  position: absolute;
  top: 48%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid var(--border-subtle);
  color: var(--text-main);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all var(--transition-fast);
  font-size: 1.35rem;
  font-weight: bold;
}

.rail-nav-btn:hover {
  background: var(--color-accent);
  color: #FFFFFF;
  border-color: var(--color-accent);
  box-shadow: 0 6px 20px rgba(198, 123, 46, 0.35);
  transform: translateY(-50%) scale(1.08);
}

.rail-nav-prev {
  left: -18px;
}

.rail-nav-next {
  right: -18px;
}

/* Visões Especiais de Busca e Foco */
.search-results-grid,
.category-focus-grid {
  grid-column: 1/-1;
}

.search-results-header {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.search-results-header h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.15rem;
}

.search-results-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.cat-focus-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cat-focus-icon {
  font-size: 1.6rem;
}

.btn-clear-search-pill,
.btn-back-streaming {
  background: rgba(198, 123, 46, 0.08);
  border: 1px solid rgba(198, 123, 46, 0.25);
  color: var(--color-accent);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-clear-search-pill:hover,
.btn-back-streaming:hover {
  background: var(--color-accent);
  color: #FFFFFF;
}

.search-empty-state {
  grid-column: 1/-1;
  text-align: center;
  padding: 4rem 1.5rem;
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.search-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

.search-empty-state h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.search-empty-state p {
  font-size: 0.88rem;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto 1.25rem;
}

.btn-reset-search {
  background: var(--color-accent);
  color: #FFFFFF;
  border: none;
  padding: 0.65rem 1.35rem;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-reset-search:hover {
  background: var(--color-accent-hover);
}

.product-card {
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
  cursor: pointer;
  position: relative;
}

.product-card:hover {
  border-color: #94A3B8;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

.product-thumb-box {
  position: relative;
  background: #FFFFFF;
  padding: 1.25rem;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #E2E8F0;
  overflow: hidden;
}

.product-thumb-box img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: transform var(--transition-normal);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08));
  position: relative;
  z-index: 1;
}

.product-card:hover .product-thumb-box img {
  transform: scale(1.05);
}

.product-badge-tag {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  background: #FFFFFF;
  color: var(--text-main);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.product-content {
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-category-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}

.product-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
  margin-bottom: 0.45rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 0.85rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-package-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-xs);
  margin-bottom: 1rem;
}

.product-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-subtle);
  margin-top: auto;
}

.btn-open-options {
  background: var(--color-primary);
  color: #FFFFFF;
  border: none;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-open-options.full-width {
  width: 100%;
}

.btn-open-options:hover {
  background: var(--color-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(198, 123, 46, 0.25);
}

.btn-open-options.added {
  background: #16A34A;
  color: #FFFFFF;
}

/* ==========================================================================
   MODAL DE OPÇÕES E PERSONALIZAÇÃO DO PRODUTO (PADRÃO GASTRO / ONIRA.FLY)
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 19, 22, 0.7);
  backdrop-filter: blur(5px);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  background: #FFFFFF;
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  transform: translateY(20px) scale(0.98);
  transition: transform var(--transition-normal);
}

.modal-overlay.open .modal-card {
  transform: translateY(0) scale(1);
}

.modal-header {
  padding: 1.15rem 1.5rem;
  background: #252A33; /* Cinza ardósia elegante - ZERO PRETO */
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

.btn-close-modal {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all var(--transition-fast);
}

.btn-close-modal:hover {
  background: #EF4444;
  border-color: #EF4444;
  transform: rotate(90deg);
}

.modal-body {
  padding: 1.35rem 1.5rem;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}

.modal-body::-webkit-scrollbar {
  width: 6px;
}

.modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: var(--radius-pill);
}

.modal-product-summary {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 1.4rem;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: var(--radius-lg);
  margin-bottom: 1.35rem;
}

.modal-product-thumb-wrap {
  position: relative;
  width: 165px;
  height: 165px;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1.5px solid #CBD5E1;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.09);
  overflow: hidden;
}

.modal-product-thumb {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.modal-product-thumb:hover {
  transform: scale(1.1);
}

.modal-product-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: #C67B2E;
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(198, 123, 46, 0.4);
}

.modal-product-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.modal-product-package {
  display: inline-flex;
  align-items: center;
  background: #EFF6FF;
  color: #C67B2E;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-xs);
  margin-bottom: 0.35rem;
  align-self: flex-start;
}

.modal-product-info h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.3;
  margin-bottom: 0.3rem;
}

.modal-product-info p {
  font-size: 0.82rem;
  color: #64748B;
  line-height: 1.45;
}

.option-group {
  margin-bottom: 1.35rem;
}

.option-group-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.option-group-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--gray-100);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-xs);
}

.option-choices-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.option-choice-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: #FFFFFF;
}

.option-choice-label:hover {
  border-color: var(--gray-400);
  background: var(--gray-50);
}

.option-choice-label input[type="radio"] {
  accent-color: var(--color-primary);
  margin-right: 0.65rem;
  width: 16px;
  height: 16px;
}

.choice-text {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-main);
  display: flex;
  align-items: center;
}

.modal-obs-box {
  margin-top: 1rem;
}

.modal-obs-box label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.4rem;
}

.modal-obs-box textarea {
  width: 100%;
  height: 75px;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  outline: none;
  background: var(--gray-50);
  resize: none;
}

.modal-obs-box textarea:focus {
  border-color: var(--gray-700);
  background: #FFFFFF;
}

.modal-footer {
  padding: 1.25rem 1.5rem;
  background: var(--gray-50);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.modal-qty-selector {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: #FFFFFF;
}

.btn-modal-qty {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--color-primary);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-qty-val {
  font-size: 0.95rem;
  font-weight: 800;
  min-width: 36px;
  text-align: center;
}

.modal-actions-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
}

.btn-confirm-add {
  flex: 1;
  background: #C67B2E;
  color: #FFFFFF;
  border: none;
  padding: 0.8rem 1.1rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 14px rgba(198, 123, 46, 0.3);
  white-space: nowrap;
}

.btn-confirm-add:hover {
  background: #9E5F1D;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(198, 123, 46, 0.45);
}

.btn-direct-whatsapp-quote {
  background: #25D366;
  color: #FFFFFF;
  border: none;
  padding: 0.8rem 1.1rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
  white-space: nowrap;
}

.btn-direct-whatsapp-quote:hover {
  background: #1EBE5D;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
}

/* MODAL DE CONFIRMAÇÃO PARA LIMPAR PEDIDO */
.modal-confirm-card {
  max-width: 440px !important;
  text-align: center;
}

.modal-confirm-icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem auto 1rem;
}

.modal-confirm-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 0.5rem;
}

.modal-confirm-desc {
  font-size: 0.88rem;
  color: #64748B;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.modal-confirm-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}

.btn-cancel-modal {
  padding: 0.75rem 1.25rem;
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  color: #475569;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-cancel-modal:hover {
  background: #E2E8F0;
  color: #1E293B;
}

.btn-confirm-clear {
  padding: 0.75rem 1.35rem;
  background: #EF4444;
  border: 1.5px solid #EF4444;
  color: #FFFFFF;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

.btn-confirm-clear:hover {
  background: #DC2626;
  border-color: #DC2626;
  transform: translateY(-1px);
}

/* MODAL DE COTAÇÃO RÁPIDA (COLA DO CLIENTE) */
.quick-quote-modal-card {
  max-width: 580px !important;
}

.quick-quote-modal-card .modal-body {
  padding: 1.5rem;
}

.quick-quote-modal-textarea {
  width: 100%;
  height: 160px;
  padding: 0.95rem;
  border: 2px solid #CBD5E1;
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  font-family: inherit;
  color: #0F172A;
  background: #F8FAFC;
  resize: vertical;
  outline: none;
  transition: border-color var(--transition-fast);
}

.quick-quote-modal-textarea:focus {
  border-color: #C67B2E;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(198, 123, 46, 0.15);
}

.quick-quote-tip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #64748B;
  margin-top: 0.65rem;
}

.quick-quote-tip svg {
  color: #C67B2E;
  flex-shrink: 0;
}

/* ==========================================================================
   DRAWER DO CARRINHO (SEM BARRA DE ROLAGEM INDESEJADA NOS ITENS)
   ========================================================================== */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 19, 22, 0.65);
  backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.cart-overlay.open {
  opacity: 1;
  visibility: visible;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 490px;
  background: #1E2229; /* Grafite ardósia refinado - ZERO PRETO PURO */
  z-index: 1000;
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 45px rgba(15, 23, 42, 0.4);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.cart-drawer.open {
  transform: translateX(0);
}

.cart-drawer-header {
  padding: 1.15rem 1.4rem;
  background: #252A33; /* Cinza grafite suave com transparência */
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.cart-drawer-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1;
}

.cart-drawer-title h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #F8FAFC;
}

.btn-close-drawer {
  background: #FFFFFF !important;
  border: 1px solid #FFFFFF !important;
  color: #0F172A !important;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700 !important;
  transition: all var(--transition-fast);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-close-drawer:hover {
  background: #F1F5F9 !important;
  color: #C67B2E !important;
  border-color: #F1F5F9 !important;
  transform: translateX(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

/* Botão Limpar Pedido no Drawer */
.btn-clear-cart-drawer {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #CBD5E1;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.btn-clear-cart-drawer:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #F87171;
}

/* Botão Limpar Pedido Global no Header: Apenas a lixeirinha (icon-only), outline vermelho puro */
.btn-clear-cart-global {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent !important;
  color: #EF4444 !important;
  border: 1.5px solid #EF4444 !important;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.btn-clear-cart-global:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: #DC2626 !important;
  color: #DC2626 !important;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.18);
  transform: translateY(-1px);
}

.cart-drawer-body {
  padding: 1.25rem 1.4rem 0.75rem;
  overflow: visible;
  flex: none;
  background: #1E2229;
}

.empty-cart-state {
  text-align: center;
  padding: 3.5rem 1rem;
  color: #94A3B8;
}

.empty-cart-state svg {
  margin-bottom: 1rem;
  color: #64748B;
}

.empty-cart-state h4 {
  font-size: 1.1rem;
  color: #F8FAFC;
  margin-bottom: 0.4rem;
}

.cart-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
  overflow: visible;
  height: auto;
  max-height: none;
}

/* Card do Item: Branco suave com borda cinza translúcida */
.cart-item-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.95rem;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  position: relative;
  overflow: visible;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  transition: transform var(--transition-fast);
}

.cart-item-row:hover {
  transform: translateY(-1px);
}

.cart-item-thumb {
  width: 54px;
  height: 54px;
  object-fit: contain;
  background: #F8FAFC;
  border-radius: var(--radius-sm);
  padding: 4px;
  border: 1px solid #E2E8F0;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
}

.cart-item-details {
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1E293B;
  line-height: 1.25;
  margin-bottom: 0.2rem;
  word-break: break-word;
}

.cart-item-options-summary {
  font-size: 0.74rem;
  color: #64748B;
  line-height: 1.35;
  margin-bottom: 0.35rem;
  word-break: break-word;
  overflow: visible;
}

.cart-item-obs {
  font-size: 0.72rem;
  color: #0369A1;
  font-style: italic;
  background: #F0F9FF;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-xs);
  border: 1px dashed #BAE6FD;
  margin-bottom: 0.4rem;
  display: inline-block;
  max-width: 100%;
  word-break: break-word;
  white-space: normal;
  overflow: visible;
}

.cart-item-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.4rem;
}

/* Controle de Quantidade com visual refinado */
.cart-qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid #CBD5E1;
  border-radius: var(--radius-sm);
  background: #F8FAFC;
  overflow: hidden;
}

.btn-qty {
  width: 26px;
  height: 26px;
  border: none;
  background: #E2E8F0;
  color: #1E293B;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.btn-qty:hover {
  background: #CBD5E1;
  color: #0F172A;
}

.qty-display {
  font-size: 0.85rem;
  font-weight: 800;
  width: 32px;
  text-align: center;
  color: #1E293B;
}

/* Botão Lixeira: Outline elegante sem fundo rosa conforme pedido estrito */
.btn-remove-item {
  background: transparent;
  border: 1px solid #CBD5E1;
  color: #94A3B8;
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.btn-remove-item:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: #EF4444;
  color: #EF4444;
  transform: scale(1.05);
}

/* Footer do Drawer: Cinza escuro elegante com transparência - ZERO PRETO */
.cart-drawer-footer {
  padding: 1.25rem 1.4rem 2.25rem;
  background: #252A33;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: auto;
}

.cart-form-group {
  margin-bottom: 0.85rem;
}

.cart-form-group label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  color: #E2E8F0;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cart-form-group input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  outline: none;
  background: #1E2229;
  color: #FFFFFF;
  transition: border-color var(--transition-fast);
}

.cart-form-group input:focus {
  border-color: #E9B872;
  background: #222730;
}

.cart-form-group input::placeholder {
  color: #94A3B8;
}

/* Grid de Botões (Pills) para Forma de Pagamento em 3 Colunas Lado a Lado */
.payment-pills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  width: 100%;
}

.btn-payment-pill {
  width: 100%;
  background: #1E2229;
  color: #CBD5E1;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  padding: 0.65rem 0.35rem;
  border-radius: var(--radius-md);
  font-size: 0.76rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
  min-height: 64px;
}

.btn-payment-pill span {
  line-height: 1.2;
  display: block;
  font-size: 0.74rem;
}

.btn-payment-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #94A3B8;
  transition: color var(--transition-fast);
}

.btn-payment-pill:hover {
  background: #2A303A;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-payment-pill:hover svg {
  color: #FFFFFF;
}

.btn-payment-pill.active {
  background: rgba(198, 123, 46, 0.18);
  color: #FFFFFF;
  border-color: #E9B872;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.btn-payment-pill.active svg {
  color: #E9B872;
}

/* Botão de Envio de Cotação no WhatsApp */
.btn-checkout-whatsapp {
  width: 100%;
  background: #C67B2E;
  color: #FFFFFF;
  border: none;
  padding: 0.95rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 6px 20px rgba(198, 123, 46, 0.4);
  margin-top: 1rem;
}

.btn-checkout-whatsapp:hover {
  background: #9E5F1D;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(198, 123, 46, 0.5);
}

.btn-checkout-whatsapp svg {
  color: #FFFFFF;
}

.checkout-disclaimer {
  text-align: center;
  font-size: 0.72rem;
  color: #94A3B8;
  margin-top: 0.75rem;
}

/* ==========================================================================
   FOOTER (GRAFITE ESCURO)
   ========================================================================== */
.footer-main {
  background: var(--bg-dark);
  color: #FFFFFF;
  padding: 3.5rem 0 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 0.9fr 1.1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.footer-brand h4 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  margin-bottom: 0.4rem;
}

.footer-brand p {
  font-size: 0.85rem;
  color: var(--gray-400);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.footer-col h5 {
  font-size: 0.92rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: 0.4rem;
}

.footer-col h5::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--color-accent);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.footer-links a {
  font-size: 0.84rem;
  color: var(--gray-400);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: #FFFFFF;
}

.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.84rem;
  color: var(--gray-300);
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-bottom {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--gray-500);
}

/* Floating WhatsApp Quick Button */
.whatsapp-float-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 85;
  background: var(--color-whatsapp);
  color: #FFFFFF;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  transition: transform var(--transition-fast);
}

.whatsapp-float-btn:hover {
  transform: scale(1.08);
}

/* ==========================================================================
   RESPONSIVIDADE COMPLETA: TODOS OS BREAKPOINTS (DESKTOP, TABLET, MOBILE)
   ========================================================================== */

/* Breakpoint 1: Telas Médias / Laptops Compactos (<= 1100px) */
@media (max-width: 1100px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 1.75rem;
  }
  .hero-title {
    font-size: 2.35rem;
  }
  .header-search {
    max-width: 360px;
  }
  .trust-grid {
    gap: 1rem;
  }
}

/* Breakpoint 2: Tablets em Paisagem e Laptops Pequenos (<= 992px) */
@media (max-width: 992px) {
  .hero-section {
    padding: 2.75rem 0 2.5rem;
    background:
      linear-gradient(180deg, rgba(14, 15, 17, 0.96) 0%, rgba(18, 20, 24, 0.92) 50%, rgba(24, 26, 30, 0.88) 100%),
      url('assets/images/produtos/capa_lutes.jpg') center 30% / cover no-repeat;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .hero-content {
    max-width: 680px;
  }
  .hero-subtitle {
    max-width: 100%;
  }
  .hero-offers-container {
    max-width: 620px;
  }
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .quick-quote-box {
    grid-template-columns: 1fr;
    padding: 2rem;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Breakpoint 3: Tablets em Retrato / Laptops Pequenos (<= 768px) */
@media (max-width: 768px) {
  .top-bar {
    padding: 0.35rem 0;
  }
  .top-bar-features {
    display: none;
  }
  .top-bar-inner {
    justify-content: space-between;
    font-size: 0.76rem;
  }
  .top-bar-contact {
    width: 100%;
    justify-content: space-between;
    gap: 0.5rem;
  }

  /* Header Compacto de 1 Linha no Tablet/Mobile */
  .header-main {
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    flex-wrap: nowrap;
  }
  .brand-logo-img {
    height: 36px;
    max-width: 130px;
  }
  .catalog-search-section {
    padding: 1.25rem 0 0.4rem;
  }
  .catalog-search-card .search-input-wrapper input {
    height: 48px;
    font-size: 0.9rem;
  }
  .header-actions {
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .btn-upload-list {
    display: none;
  }
  .btn-cart-trigger {
    padding: 0.5rem 0.85rem;
    height: 38px;
    gap: 0.45rem;
  }

  /* Sticky Categories alinhado abaixo do Header */
  .categories-nav-section {
    top: 54px;
    padding: 0.65rem 0;
    background: var(--bg-body);
  }
  .categories-bar-wrapper {
    padding: 0.35rem;
    -webkit-overflow-scrolling: touch;
  }
  .category-tab-btn {
    flex-shrink: 0;
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
  }

  /* Hero Section */
  .hero-section {
    padding: 2.25rem 0 2rem;
  }
  .hero-title {
    font-size: 1.95rem;
  }
  .hero-cta-group {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .btn-primary-glow,
  .btn-secondary-glass {
    padding: 0.75rem 1.15rem;
    font-size: 0.9rem;
  }
  .hero-highlights {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding-top: 1.15rem;
  }

  /* Grid de Produtos */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }

  /* WhatsApp Flutuante */
  .whatsapp-float-btn {
    bottom: 18px;
    right: 18px;
    width: 48px;
    height: 48px;
  }
  .whatsapp-float-btn svg {
    width: 26px;
    height: 26px;
  }
}

/* Breakpoint 4: Mobile Smartphones (<= 640px) */
@media (max-width: 640px) {
  .container {
    padding-inline: 0.75rem;
  }

  /* Top Bar Mobile: Telefone fixo oculto para manter linha única perfeita */
  .top-bar {
    padding: 0.3rem 0;
  }
  .top-bar-landline {
    display: none !important;
  }
  .top-bar-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .top-bar-proposta {
    font-size: 0.7rem;
    padding: 3px 8px;
  }
  .top-bar-whatsapp {
    font-size: 0.72rem;
  }

  /* Header Mobile Compacto de 1 Linha com respiro lateral e equilíbrio */
  .header-main {
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .header-inner {
    padding: 0.5rem 0.25rem;
    gap: 0.5rem;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .brand-logo {
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .brand-logo-img {
    height: 30px;
    width: auto;
    max-width: 110px;
  }
  .catalog-search-section {
    padding: 0.85rem 0 0.35rem;
  }
  .catalog-search-card .search-input-wrapper input {
    height: 46px;
    padding: 0.5rem 0.85rem 0.5rem 2.5rem;
    font-size: 16px !important; /* Previne auto-zoom no iOS */
    border-radius: var(--radius-pill);
  }
  .catalog-search-card .search-input-wrapper input::placeholder {
    font-size: 0.82rem;
  }
  .catalog-search-card .search-icon {
    left: 0.85rem;
    width: 17px;
    height: 17px;
  }
  .header-actions {
    gap: 0.45rem;
    flex-shrink: 0;
  }
  .btn-clear-cart-global {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
  }
  .btn-repeat-quote {
    height: 36px;
    padding: 0.35rem 0.65rem;
    font-size: 0.74rem;
  }
  .btn-upload-list {
    display: none; /* No mobile, economiza espaço precioso no topo para o carrinho e limpar */
  }
  .btn-cart-trigger {
    height: 36px;
    padding: 0.35rem 0.65rem;
    gap: 0.35rem;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .cart-badge {
    min-width: 18px;
    height: 18px;
    font-size: 0.68rem;
    padding: 0 4px;
  }

  /* Sticky Categories Bar Mobile (Sem sobreposição com o Header) */
  .categories-nav-section {
    position: sticky;
    top: 49px; /* Alinhamento pixel-perfect abaixo do header de 49px */
    padding: 0.35rem 0;
    z-index: 90;
    background: var(--bg-body);
  }
  .categories-bar-wrapper {
    padding: 0.3rem;
    gap: 0.3rem;
    border-radius: var(--radius-md);
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .category-tab-btn {
    flex-shrink: 0;
    padding: 0.38rem 0.75rem;
    font-size: 0.75rem;
    gap: 0.35rem;
  }

  /* Hero Section Mobile */
  .hero-section {
    padding: 1.5rem 0 1.75rem;
    background:
      linear-gradient(180deg, rgba(14, 15, 17, 0.96) 0%, rgba(18, 20, 24, 0.93) 50%, rgba(24, 26, 30, 0.90) 100%),
      url('assets/images/produtos/capa_lutes.jpg') center 30% / cover no-repeat;
  }
  .hero-grid {
    gap: 1.35rem;
  }
  .hero-badge-tag {
    font-size: 0.68rem;
    padding: 0.25rem 0.55rem;
    margin-bottom: 0.65rem;
  }
  .hero-title {
    font-size: 1.55rem;
    line-height: 1.22;
    margin-bottom: 0.55rem;
  }
  .hero-title span {
    border-bottom: 2px solid var(--color-accent);
  }
  .hero-subtitle {
    font-size: 0.84rem;
    line-height: 1.45;
    margin-bottom: 1rem;
  }
  .hero-cta-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.15rem;
  }
  .btn-primary-glow,
  .btn-secondary-glass {
    flex: 1;
    min-width: 135px;
    padding: 0.65rem 0.85rem;
    font-size: 0.82rem;
    border-radius: var(--radius-sm);
    justify-content: center;
  }
  .hero-highlights {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .highlight-item {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-pill);
    gap: 0.3rem;
  }
  .highlight-item svg {
    width: 12px;
    height: 12px;
  }

  /* Card de Ofertas Hero Mobile */
  .hero-offers-container {
    padding: 0.85rem;
    border-radius: var(--radius-lg);
  }
  .offers-header {
    margin-bottom: 0.6rem;
    padding-bottom: 0.5rem;
  }
  .offers-header-title {
    font-size: 0.8rem;
  }
  .badge-offer-tag {
    font-size: 0.62rem;
    padding: 0.15rem 0.4rem;
  }
  .offer-card-body {
    grid-template-columns: 75px 1fr;
    gap: 0.65rem;
    padding: 0.65rem;
    border-radius: var(--radius-md);
  }
  .offer-img-box {
    width: 75px;
    height: 75px;
    padding: 4px;
    border-radius: var(--radius-sm);
  }
  .offer-stock-badge {
    font-size: 0.65rem;
    margin-bottom: 0.15rem;
  }
  .offer-title {
    font-size: 0.8rem;
    line-height: 1.2;
    margin-bottom: 0.2rem;
  }
  .offer-condition {
    font-size: 0.68rem;
    margin-bottom: 0.3rem;
  }
  .offer-price-val {
    font-size: 1.05rem;
  }
  .offer-price-unit {
    font-size: 0.65rem;
  }
  .offer-actions-row {
    margin-top: 0.55rem;
    gap: 0.45rem;
  }
  .btn-add-offer-cart {
    font-size: 0.72rem;
    padding: 0.45rem 0.65rem;
    flex: 1;
    justify-content: center;
  }
  .btn-carousel-nav {
    width: 28px;
    height: 28px;
  }

  /* Trust Banner Mobile em Grid 2x2 Compacto */
  .trust-banner {
    padding: 0.85rem 0;
  }
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  .trust-card {
    background: #FFFFFF;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.5rem;
    gap: 0.45rem;
    align-items: center;
  }
  .trust-icon-box {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
  }
  .trust-icon-box svg {
    width: 15px;
    height: 15px;
  }
  .trust-text h5 {
    font-size: 0.72rem;
    line-height: 1.2;
    margin-bottom: 2px;
  }
  .trust-text p {
    font-size: 0.64rem;
    line-height: 1.25;
  }

  /* Catálogo & Cards de Produtos Mobile */
  .catalog-section {
    padding: 0.65rem 0 3.5rem;
  }
  .catalog-header {
    display: none !important; /* Oculta os banners brancos redundantes de seção no mobile */
  }

  /* Streaming Rails & Category Mini-Heros Mobile */
  .streaming-rails-container {
    gap: 1.6rem;
  }
  .streaming-rail-header {
    margin-bottom: 0.75rem;
    padding: 0.85rem 1rem !important;
    border-radius: var(--radius-md) !important;
    min-height: 76px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    box-sizing: border-box !important;
  }
  .rail-title-box {
    gap: 0.6rem !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .cat-mini-hero-meta {
    gap: 0.2rem;
    min-width: 0;
  }
  .cat-tag-badge-line {
    gap: 0.35rem;
    margin-bottom: 0.15rem;
  }
  .cat-badge-label {
    font-size: 0.58rem !important;
    padding: 0.1rem 0.45rem !important;
  }
  .rail-count-badge {
    font-size: 0.62rem !important;
    padding: 0.1rem 0.4rem !important;
  }
  .streaming-rail-header.category-mini-hero .rail-title,
  .rail-title-box h3 {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    word-break: break-word;
  }
  .rail-subtitle-desktop {
    display: none !important;
  }
  
  /* Botão Explorar vira apenas uma seta circular minimalista no mobile */
  .rail-see-all-btn,
  .minimal-arrow-btn {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .btn-label-desktop {
    display: none !important;
  }
  .rail-see-all-btn svg,
  .minimal-arrow-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  .streaming-rail-track {
    gap: 0.65rem;
    padding: 0.25rem 0.15rem 0.65rem;
  }
  .streaming-rail-track .product-card {
    flex: 0 0 205px;
    max-width: 205px;
  }
  .rail-nav-btn {
    display: none; /* No mobile o swipe é 100% nativo por touch */
  }
  .search-results-header {
    padding: 0.75rem 0.85rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  /* Banner de Categoria Isolada no Mobile (Mesmo espaço, padding e proporção limpa) */
  .category-focus-header,
  .category-hero-banner {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    padding: 0.95rem 1rem !important;
    min-height: auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0.65rem !important;
    margin-bottom: 0.95rem !important;
    border-radius: var(--radius-md) !important;
    box-sizing: border-box !important;
  }

  .category-hero-banner .rail-title-box,
  .category-hero-banner .cat-focus-info {
    width: 100%;
  }

  .category-hero-banner .cat-hero-title {
    font-size: 1.1rem !important;
    line-height: 1.25 !important;
  }

  .category-hero-banner .cat-hero-sub {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
    margin-top: 2px !important;
    display: block !important;
  }

  .category-hero-banner .btn-back-streaming {
    font-size: 0.74rem !important;
    padding: 0.35rem 0.8rem !important;
    align-self: flex-start;
    margin-top: 0.25rem;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  .product-card {
    border-radius: var(--radius-md);
  }
  .product-thumb-box {
    height: 112px;
    padding: 0.35rem;
  }
  .product-thumb-box img {
    max-height: 100%;
  }
  .product-badge-tag {
    top: 0.35rem;
    left: 0.35rem;
    font-size: 0.56rem;
    padding: 0.15rem 0.35rem;
  }
  .product-content {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .product-category-label {
    font-size: 0.6rem;
    margin-bottom: 0.15rem;
  }
  .product-title {
    font-size: 0.76rem;
    line-height: 1.25;
    margin-bottom: 0.25rem;
    min-height: 2.5em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .product-desc {
    display: none;
  }
  .product-package-tag {
    font-size: 0.6rem;
    padding: 0.15rem 0.35rem;
    margin-bottom: 0.45rem;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  .product-package-tag span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Footer do Card com alinhamento vertical perfeito (sem quebra ou transbordo) */
  .product-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--border-subtle);
    margin-top: auto;
  }
  .product-quote-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .quote-label {
    font-size: 0.58rem;
  }
  .quote-value {
    font-size: 0.72rem;
    gap: 2px;
  }
  .quote-value svg {
    width: 11px;
    height: 11px;
  }
  .btn-open-options {
    width: 100%;
    justify-content: center;
    padding: 0.48rem 0.35rem;
    font-size: 0.74rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    text-align: center;
  }

  /* Cotação Rápida Mobile */
  .quick-quote-box {
    grid-template-columns: 1fr;
    padding: 1.15rem 0.9rem;
    gap: 0.85rem;
    border-radius: var(--radius-lg);
  }
  .quick-quote-content h3 {
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
  }
  .quick-quote-content p {
    font-size: 0.78rem;
    margin-bottom: 0.75rem;
  }
  .quick-quote-form textarea {
    font-size: 16px !important;
    height: 75px;
    padding: 0.55rem 0.75rem;
  }
  .btn-send-list {
    width: 100%;
    justify-content: center;
    padding: 0.65rem 1rem;
    font-size: 0.84rem;
  }

  /* Drawer do Carrinho Mobile em Tela Cheia */
  .cart-drawer {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
  }
  .cart-drawer-header {
    padding: 0.85rem 1rem;
  }
  .cart-drawer-header .btn-close-drawer {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border: 1px solid #FFFFFF !important;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 700 !important;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }
  .cart-drawer-title h3 {
    font-size: 0.98rem;
  }
  .cart-drawer-body {
    padding: 0.85rem 0.85rem 0.5rem;
  }
  .cart-item-row {
    padding: 0.7rem;
    gap: 0.6rem;
  }
  .cart-item-thumb {
    width: 44px;
    height: 44px;
  }
  .cart-item-name {
    font-size: 0.8rem;
  }
  .cart-item-options-summary {
    font-size: 0.68rem;
  }
  .cart-item-obs {
    font-size: 0.66rem;
  }
  .cart-drawer-footer {
    padding: 1rem 0.85rem calc(1.25rem + env(safe-area-inset-bottom, 16px));
  }
  .cart-form-group {
    margin-bottom: 0.65rem;
  }
  .cart-form-group label {
    font-size: 0.68rem;
    margin-bottom: 0.25rem;
  }
  .cart-form-group input {
    padding: 0.55rem 0.75rem;
    font-size: 16px !important; /* Previne auto-zoom no iOS */
  }
  .payment-pills-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
  }
  .btn-payment-pill {
    padding: 0.5rem 0.25rem;
    font-size: 0.68rem;
    gap: 0.25rem;
    min-height: 58px;
  }
  .btn-payment-pill span {
    font-size: 0.67rem;
    line-height: 1.15;
  }
  .btn-payment-pill svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }
  .btn-checkout-whatsapp {
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
  }

  /* Modal de Opções Mobile (Estilo Bottom-Sheet Otimizado - Ocupa melhor a tela) */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal-card {
    width: 100%;
    max-width: 100%;
    max-height: 95dvh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .modal-overlay.open .modal-card {
    transform: translateY(0);
  }
  .modal-header {
    padding: 0.75rem 1rem;
  }
  .modal-header h3 {
    font-size: 0.95rem;
  }
  .modal-body {
    padding: 0.75rem 1rem 0.5rem;
    gap: 0.65rem;
    -webkit-overflow-scrolling: touch;
  }
  .modal-product-summary {
    gap: 1rem;
    padding: 0.85rem;
    margin-bottom: 0.85rem;
    align-items: center;
  }
  .modal-product-thumb-wrap {
    width: 105px;
    height: 105px;
    padding: 6px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
  }
  .modal-product-thumb {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .modal-product-badge {
    font-size: 0.58rem;
    padding: 0.1rem 0.4rem;
    top: 6px;
    right: 6px;
  }
  .modal-product-package {
    font-size: 0.65rem;
    padding: 0.1rem 0.45rem;
  }
  .modal-product-info h4 {
    font-size: 0.88rem;
  }
  .modal-product-info p {
    font-size: 0.72rem;
  }
  .option-group {
    margin-bottom: 0.75rem;
  }
  .option-group-title {
    font-size: 0.76rem;
    margin-bottom: 0.35rem;
  }
  .option-choice-label {
    padding: 0.5rem 0.7rem;
  }
  .choice-text {
    font-size: 0.78rem;
  }
  .modal-obs-box label {
    font-size: 0.72rem;
  }
  .modal-obs-box textarea {
    font-size: 16px !important; /* Previne auto-zoom no iOS */
    height: 52px;
    padding: 0.45rem 0.6rem;
  }
  .modal-footer {
    padding: 0.65rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 12px));
    gap: 0.65rem;
    flex-direction: column;
    align-items: stretch;
  }
  .modal-qty-selector {
    align-self: center;
    width: auto;
  }
  .btn-modal-qty {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }
  .modal-qty-val {
    min-width: 36px;
    font-size: 0.9rem;
  }
  .modal-actions-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }
  .btn-confirm-add,
  .btn-direct-whatsapp-quote {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.86rem;
    justify-content: center;
  }

  /* Botão Flutuante WhatsApp Mobile */
  .whatsapp-float-btn {
    bottom: 16px;
    right: 16px;
    width: 46px;
    height: 46px;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
  }
  .whatsapp-float-btn svg {
    width: 24px;
    height: 24px;
  }

  /* Ocultar WhatsApp Flutuante quando Carrinho ou Modal estiver aberto */
  body.cart-open .whatsapp-float-btn,
  body.modal-open .whatsapp-float-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transform: scale(0.7);
  }

  /* Footer Mobile */
  .footer-main {
    padding: 2.25rem 0 1.5rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.45rem;
    font-size: 0.74rem;
  }
}

/* Breakpoint 5: Smartphones Ultra-Compactos (<= 360px) */
@media (max-width: 360px) {
  .container {
    padding-inline: 0.5rem;
  }
  .hero-title {
    font-size: 1.35rem;
  }
  .brand-logo-img {
    max-width: 80px;
    height: 28px;
  }
  .products-grid {
    gap: 0.4rem;
  }
  .product-thumb-box {
    height: 100px;
  }
  .product-content {
    padding: 0.4rem;
  }
  .streaming-rail-track .product-card {
    flex: 0 0 185px;
    max-width: 185px;
  }
  .payment-pills-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
  }
  .btn-payment-pill {
    padding: 0.45rem 0.15rem;
    font-size: 0.62rem;
    gap: 0.2rem;
    min-height: 54px;
  }
  .btn-payment-pill span {
    font-size: 0.62rem;
    line-height: 1.1;
  }
  .btn-payment-pill svg {
    width: 13px;
    height: 13px;
  }
}

/* ==========================================================================
   WIDGET FLUTUANTE DE PROPOSTA ONIRA (.onira-cta) — PADRÃO FAFA DOCERIA
   Centralizado na tela, ampliado e com redução de opacidade durante scroll
   ========================================================================== */
.onira-floating-widget {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 850;
  pointer-events: auto;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: calc(100vw - 32px);
}

/* Quando rolando a tela, reduz a opacidade para não obstruir botões e conteúdos */
.onira-floating-widget.is-scrolling {
  opacity: 0.18;
  pointer-events: none;
}

.onira-floating-widget:hover {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.onira-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #0B0E14;
  border: 1.5px solid rgba(198, 123, 46, 0.6);
  border-radius: var(--radius-pill);
  padding: 8px 24px 8px 8px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 32px rgba(198, 123, 46, 0.25);
  color: #FFFFFF;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  white-space: nowrap;
}

.onira-cta:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: #C67B2E;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.7), 0 0 42px rgba(198, 123, 46, 0.45);
  color: #FFFFFF;
}

.onira-avatar-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.onira-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #C67B2E;
  display: block;
  box-shadow: 0 2px 10px rgba(198, 123, 46, 0.4);
}

.onira-status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 13px;
  height: 13px;
  background: #22C55E;
  border: 2px solid #0B0E14;
  border-radius: 50%;
  animation: onira-status-pulse 2s infinite ease-out;
}

@keyframes onira-status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.85); }
  70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.onira-text-col {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
}

.onira-hook {
  font-size: 0.72rem;
  color: #94A3B8;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.onira-call {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.94rem;
  font-weight: 700;
  color: #FFFFFF;
}

.onira-price-label {
  font-size: 0.85rem;
  color: #E2E8F0;
}

.onira-price-label strong {
  color: #E9B872;
  font-weight: 800;
}

.onira-link-text {
  color: #E9B872;
  font-weight: 800;
  font-size: 0.88rem;
  white-space: nowrap;
}

/* Mobile: Centralizado na tela e perfeitamente equilibrado */
@media (max-width: 640px) {
  .onira-floating-widget {
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 24px);
  }
  .onira-cta {
    padding: 6px 16px 6px 6px;
    gap: 10px;
  }
  .onira-avatar-wrap,
  .onira-avatar {
    width: 44px;
    height: 44px;
  }
  .onira-hook {
    font-size: 0.65rem;
  }
  .onira-call {
    font-size: 0.82rem;
    gap: 6px;
  }
  .onira-price-label {
    font-size: 0.78rem;
  }
  .onira-link-text {
    font-size: 0.82rem;
  }
}

@media (max-width: 380px) {
  .onira-price-label {
    display: none;
  }
}

.brand-logo-text{font:800 1.05rem 'Plus Jakarta Sans',sans-serif;letter-spacing:.08em;color:#1C1E21;white-space:nowrap}
.brand-logo-text strong{color:#C67B2E}

/* ===== Lutes: padronagens com foto (modelo x tecido) + refino streaming Fafa ===== */
.product-fabrics-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .55rem;margin:.55rem 0 .15rem}
.product-fabrics-thumbs{display:flex;gap:4px;flex:1 1 100%;min-width:0}
.product-fabrics-thumbs img{width:34px;height:26px;object-fit:cover;border-radius:6px;border:1.5px solid #E2E8F0;background:#F8FAFC;flex-shrink:0}
.product-fabrics-hint{font-size:.72rem;font-weight:700;color:#64748B;flex:1 1 100%;line-height:1.35}
.variant-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem}
.variant-swatch{border:2px solid #E2E8F0;border-radius:12px;background:#fff;padding:6px;cursor:pointer;display:flex;flex-direction:column;gap:6px;align-items:center;transition:border-color .15s ease,transform .15s ease}
.variant-swatch img{width:100%;height:64px;object-fit:cover;border-radius:8px;background:#F1F5F9}
.variant-swatch span{font-size:.72rem;font-weight:800;color:#334155}
.variant-swatch.active{border-color:#C67B2E;box-shadow:0 4px 14px rgba(198,123,46,.25);transform:translateY(-1px)}
.color-pills-list{flex-direction:row !important;flex-wrap:wrap}
.color-pill-label .choice-text{border:1.5px solid #E2E8F0;border-radius:999px;padding:.35rem .7rem;font-size:.78rem;font-weight:700}
.color-pill-label input{accent-color:#C67B2E}
.streaming-rail-track{scroll-snap-type:x mandatory}
.streaming-rail-track .product-card{scroll-snap-align:start}
.rail-nav-btn.rail-end{opacity:.25;pointer-events:none}
@media(max-width:640px){.variant-swatches{grid-template-columns:repeat(2,1fr)}.variant-swatch img{height:84px}}