/* © Propriedade Intelectual Reservada - CliqueMaisDigital Soluções Online. Todos os direitos reservados. */

/* ==========================================================================
   SISTEMA DE CATÁLOGO LEVIX L99+ — CONTENÇÃO DE CTAs, SETAS E VER MAIS 3D
   Timestamp de Produção: 2026-09-01T11:55:00-03:00
   ========================================================================== */

/* 1. KEYFRAMES DE PERFORMANCE & SONAR CARDÍACO */
@keyframes redSonarPing {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(227, 0, 15, 0.6); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(227, 0, 15, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(227, 0, 15, 0); }
}

@keyframes cardiacPulse {
  0% { transform: scale(0.98); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
  50% { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(37, 211, 102, 0); }
  100% { transform: scale(0.98); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

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

@keyframes railSurge {
  from { transform: translateX(56px) rotateY(-16deg) scale(0.94); opacity: 0; }
  to { transform: translateX(0) rotateY(0) scale(1); opacity: 1; }
}

/* 2. GEOMETRIA, COMPRESSÃO VERTICAL E LARGURA DE TELA (1560PX) */
.levix-catalog-container {
  width: 100%;
  max-width: 1560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  box-sizing: border-box;
  position: relative;
}

@media (min-width: 640px) {
  .levix-catalog-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Compressão Agressiva das Seções de Catálogo */
#catalogo-cell,
#catalogo-store,
#catalogo-grafica {
  padding-top: 0.85rem !important;
  padding-bottom: 1.25rem !important;
  overflow-x: hidden;
  width: 100%;
}

@media (min-width: 640px) {
  #catalogo-cell,
  #catalogo-store,
  #catalogo-grafica {
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
  }
}

#catalogo-cell h2,
#catalogo-store h2,
#catalogo-grafica h2,
.levix-catalog-title {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 0px !important;
}

/* 1. POLIMENTO CIRÚRGICO CSS: Pills 6px e Setas Redondas 32px */
.levix-pills-wrapper,
.levix-pills-carousel,
.category-filter-bar {
  position: sticky !important;
  top: 58px !important;
  z-index: 40 !important;
  background: #ffffff !important;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  overflow: visible !important;
}

.levix-pills-track {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: visible !important;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  margin: 0px !important;
  width: 100%;
  flex: 1;
}

.levix-pills-track::-webkit-scrollbar {
  display: none !important;
}

/* Micro-setas de navegação das pills */
.levix-pills-nav-btn,
.levix-pills-arrow,
.levix-pills-prev,
.levix-pills-next {
  position: relative;
  border-radius: 50% !important;
  aspect-ratio: 1/1 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #0F204B !important;
  color: #0F204B !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(15, 32, 75, 0.12) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 25 !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}

.levix-pills-arrow svg,
.levix-pills-nav-btn svg {
  width: 12px;
  height: 12px;
}

.levix-pills-arrow:hover {
  background: #E3000F;
  border-color: #E3000F;
  color: #FFFFFF;
  transform: scale(1.12);
}

.levix-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.8rem;
  min-height: 30px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1.5px solid transparent;
}

.levix-pill-btn.active {
  background: #E3000F !important;
  color: #FFFFFF !important;
  border-color: #E3000F !important;
  box-shadow: 0 3px 10px rgba(227, 0, 15, 0.3) !important;
  transform: scale(1.02);
}

.levix-pill-btn:not(.active) {
  background: #F3F4F6;
  color: #0F204B;
  border-color: #E5E7EB;
}

.levix-pill-btn:not(.active):hover {
  background: #E5E7EB;
  color: #00CED1;
  border-color: #00CED1;
}

/* 4. BLINDAGEM DO ÍCONE WHATSAPP NOS CTAs (CONTENÇÃO TOTAL L99+) */
.levix-cta-btn,
[data-card-main-cta],
.cta-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 40px !important;
  max-height: 44px !important;
  padding: 0.5rem 0.75rem !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  font-family: var(--font-primary, 'Montserrat', sans-serif) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 0.75rem !important;
  cursor: pointer !important;
  position: relative !important;
}

.levix-cta-btn svg,
.levix-cta-btn img,
[data-card-main-cta] svg,
[data-card-main-cta] img,
.cta-button svg,
.cta-button img,
.wa-icon {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

[data-card-main-cta-text],
.levix-cta-btn span {
  flex-shrink: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 11px !important;
}

/* 5. BLINDAGEM DE Z-INDEX ESPACIAL & BALÕES COGNITIVOS (TOOLTIPS DINÂMICOS L99+) */
.swiper-slide {
  position: relative !important;
  z-index: 1 !important;
  transition: z-index 0.1s ease;
}

.swiper-slide:hover,
.swiper-slide:focus-within {
  z-index: 50 !important;
}

.elite-card,
.netflix-card,
.product-card,
.rail-card {
  position: relative !important;
  z-index: 1 !important;
  padding: 14px 16px !important;
  background: #ffffff !important;
  border-radius: 1.25rem !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, z-index 0.1s ease !important;
}

.elite-card:hover,
.netflix-card:hover,
.product-card:hover,
.rail-card:hover {
  z-index: 50 !important;
}

/* Posição do Badge no topo absoluto esquerdo */
.elite-card [data-card-badge],
.netflix-card [data-card-badge],
.product-card [data-card-badge] {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 10 !important;
}

/* Tipografia Fluida de até 2 linhas */
.elite-card h3,
.netflix-card h3,
.product-card h3,
[data-card-title],
.card-product-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
  word-break: break-word !important;
}

.elite-card p,
.netflix-card p,
.product-card p,
[data-card-desc],
.card-product-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
  word-break: normal !important;
  line-height: 1.45 !important;
  min-height: 3.8rem !important;
}

/* Botão 3D Half-in/Half-out com Z-Index Elevado */
.card-top-cart-btn {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  transform: translate(30%, -30%) translateZ(0) !important;
  width: 40px !important;
  height: 40px !important;
  background: rgba(227, 0, 15, 0.94) !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  color: #FFFFFF !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(227, 0, 15, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.7) !important;
  z-index: 60 !important;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease, background 0.25s ease !important;
  will-change: transform, box-shadow;
  cursor: pointer !important;
}

.card-top-cart-btn:hover {
  transform: translate(30%, -30%) scale(1.14) translateZ(0) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25), 0 6px 18px rgba(227, 0, 15, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
  background: #E3000F !important;
  z-index: 100 !important;
}

.card-top-cart-btn.is-quote,
.card-top-quote-btn {
  background: rgba(0, 206, 209, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 206, 209, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.7) !important;
}

.card-top-cart-btn.is-quote:hover,
.card-top-quote-btn:hover {
  transform: translate(30%, -30%) scale(1.14) translateZ(0) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25), 0 6px 18px rgba(0, 206, 209, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
  background: #00CED1 !important;
  z-index: 100 !important;
}

/* Tooltip Base: Salto de Z-Index para 9999 */
.card-top-cart-btn::before {
  content: 'Adicionar ao carrinho';
  position: absolute;
  top: 50% !important;
  background: rgba(15, 32, 75, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #FFFFFF !important;
  font-family: var(--font-primary, 'Montserrat', sans-serif);
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1), transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.2s;
  z-index: 9999 !important;
  will-change: transform, opacity;
}

.card-top-cart-btn.is-quote::before {
  content: 'Listar para orçamento';
}

/* Setinha triangular do balão */
.card-top-cart-btn::after {
  content: '';
  position: absolute;
  top: 50% !important;
  width: 0;
  height: 0;
  border-style: solid;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1), transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.2s;
  z-index: 10000 !important;
}

/* ÂNCORA DIREITA (.levix-tooltip-right) */
.card-top-cart-btn.levix-tooltip-right::before,
.card-top-cart-btn:not(.levix-tooltip-left)::before {
  left: calc(100% + 10px) !important;
  right: auto !important;
  transform: translateY(-50%) translateX(-4px) scale(0.95) !important;
}

.card-top-cart-btn.levix-tooltip-right::after,
.card-top-cart-btn:not(.levix-tooltip-left)::after {
  left: calc(100% + 5px) !important;
  right: auto !important;
  transform: translateY(-50%) !important;
  border-width: 5px 6px 5px 0 !important;
  border-color: transparent rgba(15, 32, 75, 0.98) transparent transparent !important;
}

.card-top-cart-btn.levix-tooltip-right:hover::before,
.card-top-cart-btn:not(.levix-tooltip-left):hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0) scale(1) !important;
}

.card-top-cart-btn.levix-tooltip-right:hover::after,
.card-top-cart-btn:not(.levix-tooltip-left):hover::after {
  opacity: 1;
  visibility: visible;
}

/* ÂNCORA ESQUERDA (.levix-tooltip-left) */
.card-top-cart-btn.levix-tooltip-left::before {
  right: calc(100% + 10px) !important;
  left: auto !important;
  transform: translateY(-50%) translateX(4px) scale(0.95) !important;
}

.card-top-cart-btn.levix-tooltip-left::after {
  right: calc(100% + 5px) !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  border-width: 5px 0 5px 6px !important;
  border-color: transparent transparent transparent rgba(15, 32, 75, 0.98) !important;
}

.card-top-cart-btn.levix-tooltip-left:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0) scale(1) !important;
}

.card-top-cart-btn.levix-tooltip-left:hover::after {
  opacity: 1;
  visibility: visible;
}

/* 6. UNIFICAÇÃO UNIVERSAL DAS SETAS DE TRILHO (SWIPER & EXTRA RAILS) */
.swiper-button-prev-cell,
.swiper-button-next-cell,
.swiper-button-prev-store,
.swiper-button-next-store,
.swiper-button-prev-grafica,
.swiper-button-next-grafica,
.rail-arrow-prev,
.rail-arrow-next,
.swiper-nav-arrow {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 1.5px solid #0F204B !important;
  color: #0F204B !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 35 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.swiper-button-prev-cell:hover,
.swiper-button-next-cell:hover,
.swiper-button-prev-store:hover,
.swiper-button-next-store:hover,
.swiper-button-prev-grafica:hover,
.swiper-button-next-grafica:hover,
.rail-arrow-prev:hover,
.rail-arrow-next:hover,
.swiper-nav-arrow:hover {
  background: #00CED1 !important;
  border-color: #00CED1 !important;
  color: #FFFFFF !important;
  transform: translateY(-50%) scale(1.08) !important;
  box-shadow: 0 6px 18px rgba(0, 206, 209, 0.4) !important;
}

.swiper-button-prev-cell,
.swiper-button-prev-store,
.swiper-button-prev-grafica,
.rail-arrow-prev {
  left: 6px !important;
}

.swiper-button-next-cell,
.swiper-button-next-store,
.swiper-button-next-grafica,
.rail-arrow-next {
  right: 6px !important;
}

@media (min-width: 640px) {
  .swiper-button-prev-cell,
  .swiper-button-prev-store,
  .swiper-button-prev-grafica,
  .rail-arrow-prev {
    left: 10px !important;
  }
  .swiper-button-next-cell,
  .swiper-button-next-store,
  .swiper-button-next-grafica,
  .rail-arrow-next {
    right: 10px !important;
  }
}

.swiper-button-prev-cell svg,
.swiper-button-next-cell svg,
.swiper-button-prev-store svg,
.swiper-button-next-store svg,
.swiper-button-prev-grafica svg,
.swiper-button-next-grafica svg,
.rail-arrow-prev svg,
.rail-arrow-next svg,
.swiper-nav-arrow svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  stroke: currentColor !important;
  stroke-width: 2.5 !important;
  fill: none !important;
}

/* 7. DNA DO BOTÃO "VER MAIS" (ELEVAÇÃO 3D E CORES PRIMÁRIAS) */
.btn-ver-mais,
#btn-toggle-cell,
#btn-toggle-store,
#btn-toggle-grafica {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.6rem 1.5rem !important;
  background: transparent !important;
  border-radius: 0.75rem !important;
  font-family: var(--font-primary, 'Montserrat', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Categoria Cell: Azul Primário #0F204B */
#btn-toggle-cell {
  border: 2px solid #0F204B !important;
  color: #0F204B !important;
}
#btn-toggle-cell:hover {
  transform: translateY(-3px) translateZ(0) !important;
  box-shadow: 0 8px 18px rgba(15, 32, 75, 0.25) !important;
  background: #0F204B !important;
  color: #FFFFFF !important;
}

/* Categoria Store: Vermelho Primário #E3000F */
#btn-toggle-store {
  border: 2px solid #E3000F !important;
  color: #E3000F !important;
}
#btn-toggle-store:hover {
  transform: translateY(-3px) translateZ(0) !important;
  box-shadow: 0 8px 18px rgba(227, 0, 15, 0.25) !important;
  background: #E3000F !important;
  color: #FFFFFF !important;
}

/* Categoria Gráfica: Turquesa Primário #00CED1 */
#btn-toggle-grafica {
  border: 2px solid #00CED1 !important;
  color: #00CED1 !important;
}
#btn-toggle-grafica:hover {
  transform: translateY(-3px) translateZ(0) !important;
  box-shadow: 0 8px 18px rgba(0, 206, 209, 0.3) !important;
  background: #00CED1 !important;
  color: #FFFFFF !important;
}

.btn-ver-mais:hover svg,
#btn-toggle-cell:hover svg,
#btn-toggle-store:hover svg,
#btn-toggle-grafica:hover svg {
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* 8. HIERARQUIA DE CURSORES (GRAB vs POINTER) */
.levix-catalog-rail,
.levix-catalog-rail .netflix-rail-container,
.netflix-rail-container,
.rail-snap,
.main-swiper,
.swiper,
.swiper-wrapper,
.swiper-slide,
.elite-card,
.netflix-card,
.rail-card {
  cursor: grab !important;
}

.levix-catalog-rail:active,
.levix-catalog-rail .netflix-rail-container:active,
.netflix-rail-container:active,
.rail-snap:active,
.main-swiper:active,
.swiper:active,
.swiper-wrapper:active,
.elite-card:active,
.netflix-card:active,
.rail-card:active {
  cursor: grabbing !important;
}

/* Elementos Interativos do Card — FORÇAR POINTER */
.card-top-cart-btn,
.card-top-quote-btn,
.levix-cta-btn,
[data-card-main-cta],
.detail-lupa-btn,
[data-card-quickview],
.levix-pill-btn,
.levix-pills-arrow,
.cart-continue-btn,
.cart-send-btn,
.btn-ver-mais,
#btn-toggle-cell,
#btn-toggle-store,
#btn-toggle-grafica,
.swiper-button-prev-cell,
.swiper-button-next-cell,
.swiper-button-prev-store,
.swiper-button-next-store,
.swiper-button-prev-grafica,
.swiper-button-next-grafica,
.rail-arrow-prev,
.rail-arrow-next,
button,
a {
  cursor: pointer !important;
}

/* 9. PERFORMANCE EXTREMA — PULSAR INTELIGENTE */
@media (hover: hover) and (pointer: fine) {
  .elite-card:hover [data-card-main-cta],
  .elite-card:hover .levix-cta-btn,
  .netflix-card:hover [data-card-main-cta],
  .netflix-card:hover .levix-cta-btn,
  .rail-card:hover [data-card-main-cta],
  .rail-card:hover .levix-cta-btn,
  .elite-card:hover .btn-cardiac,
  .rail-card:hover .btn-cardiac {
    animation: cardiacPulse 1.8s ease-in-out 1.5s infinite !important;
  }
}

.elite-card.is-centered [data-card-main-cta],
.elite-card.is-centered .levix-cta-btn,
.netflix-card.is-centered [data-card-main-cta],
.netflix-card.is-centered .levix-cta-btn,
.rail-card.is-centered [data-card-main-cta],
.rail-card.is-centered .levix-cta-btn,
.is-centered .btn-cardiac {
  animation: cardiacPulse 1.8s ease-in-out infinite !important;
}

/* 10. UI CRISP & BOTÕES VETORIZADOS */
.card-top-cart-btn,
.card-top-cart-btn svg,
.detail-lupa-btn,
.detail-lupa-btn svg,
.levix-cta-btn svg,
.header-cart-btn svg {
  -webkit-font-smoothing: antialiased !important;
  transform: translateZ(0) !important;
  shape-rendering: geometricPrecision !important;
  text-rendering: geometricPrecision !important;
}

/* 11. TRILHOS NETFLIX CONTÍNUOS — ZERO GRIDS & RESPIRO (24PX) */
.levix-catalog-rail-wrapper,
.swiper-container-wrapper,
.levix-catalog-rail,
#swiper-container-cell,
#swiper-container-store,
#swiper-container-grafica {
  width: 100%;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  padding-top: 0px !important;
  position: relative;
}

.levix-catalog-rail.rail-enter {
  animation: railRise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
}

.levix-catalog-rail-wrapper,
.swiper-container-wrapper,
#swiper-container-cell,
#swiper-container-store,
#swiper-container-grafica {
  margin-top: 0px !important;
  padding-top: 0 !important;
}

/* XEQUE-MATE L99+: Força a estrutura Flexbox na prateleira dinâmica */
.levix-catalog-rail,
.extra-rail {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.extra-rail {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  margin-top: -10px !important; /* Sucção cirúrgica do abismo */
  padding-bottom: 8px !important;
  gap: 16px !important;
  width: 100% !important;
}

.extra-rail::-webkit-scrollbar {
  display: none !important;
}

.levix-catalog-section,
#catalogo-cell,
#catalogo-store,
#catalogo-grafica {
  margin-top: 1.5rem !important;
  margin-bottom: 2rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  scroll-margin-top: 58px !important;
}

.btn-ver-mais-wrapper {
  margin-top: -18px !important;
  margin-bottom: 2rem !important;
  padding-bottom: 8px !important;
  position: relative !important;
  z-index: 30 !important;
  display: flex !important;
  justify-content: center !important;
}

/* 8. RESPONSIVIDADE CAMALEÔNICA — MEDIA QUERIES MOBILE / TABLET */
@media (max-width: 992px) {
  .levix-pills-wrapper,
  .levix-pills-carousel,
  .category-filter-bar {
    top: 56px !important;
    padding: 4px 0 !important;
  }
  .levix-catalog-section,
  #catalogo-cell,
  #catalogo-store,
  #catalogo-grafica {
    margin-top: 1.25rem !important;
    margin-bottom: 1.5rem !important;
    scroll-margin-top: 56px !important;
  }
  .levix-catalog-rail-wrapper,
  .swiper-container-wrapper,
  #swiper-container-cell,
  #swiper-container-store,
  #swiper-container-grafica {
    margin-top: 0px !important;
    padding-top: 0 !important;
  }
  .btn-ver-mais-wrapper {
    margin-top: -16px !important;
    margin-bottom: 18px !important;
  }
  .btn-ver-mais,
  #btn-toggle-cell,
  #btn-toggle-store,
  #btn-toggle-grafica {
    padding: 0.5rem 1.25rem !important;
    font-size: 10px !important;
  }
}

@media (max-width: 768px) {
  .levix-pills-wrapper,
  .levix-pills-carousel,
  .category-filter-bar {
    top: 52px !important;
    padding: 3px 0 !important;
  }
  .levix-catalog-section,
  #catalogo-cell,
  #catalogo-store,
  #catalogo-grafica {
    margin-top: 1rem !important;
    margin-bottom: 1.25rem !important;
    scroll-margin-top: 52px !important;
  }
  .levix-catalog-rail-wrapper,
  .swiper-container-wrapper,
  #swiper-container-cell,
  #swiper-container-store,
  #swiper-container-grafica {
    margin-top: 0px !important;
    padding-top: 0 !important;
  }
  .btn-ver-mais-wrapper {
    margin-top: -12px !important;
    margin-bottom: 16px !important;
  }
  .btn-ver-mais,
  #btn-toggle-cell,
  #btn-toggle-store,
  #btn-toggle-grafica {
    padding: 0.45rem 1rem !important;
    font-size: 9.5px !important;
    letter-spacing: 0.08em !important;
  }
}

.levix-catalog-rail .netflix-rail-container,
.netflix-rail-container,
.rail-snap,
.main-swiper,
.cellSwiper,
.storeSwiper,
.graficaSwiper,
.swiper,
.levix-catalog-rail {
  display: flex !important;
  gap: 16px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  touch-action: pan-x pan-y !important;
  width: 100% !important;
  max-width: 100% !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 58px !important;
}

section[id],
#catalogo-cell,
#catalogo-store,
#catalogo-grafica,
.levix-catalog-section {
  scroll-margin-top: 58px !important;
}

.levix-catalog-rail .netflix-rail-container::-webkit-scrollbar,
.netflix-rail-container::-webkit-scrollbar,
.rail-snap::-webkit-scrollbar,
.main-swiper::-webkit-scrollbar,
.swiper::-webkit-scrollbar {
  display: none !important;
}

/* 12. MATEMÁTICA RESPONSIVA CAMALEÃO (CARDS + 5% PEEK - 5.2 VIEWPORT) */
.levix-catalog-rail-wrapper .rail-card,
.levix-catalog-rail .rail-card,
.extra-rail .rail-card,
.extra-rail > div,
.swiper-wrapper .rail-card,
.netflix-rail-container .rail-card,
.rail-snap .rail-card,
[id^="swiper-container"] .rail-card,
.rail-card {
  scroll-snap-align: start !important;
  flex: 0 0 calc(100% / 5.2) !important;
  max-width: calc(100% / 5.2) !important;
  min-width: calc(100% / 5.2) !important;
  height: auto !important;
  box-sizing: border-box !important;
  will-change: transform, opacity;
}

@media (max-width: 992px) {
  .levix-catalog-rail-wrapper .rail-card,
  .levix-catalog-rail .rail-card,
  .extra-rail .rail-card,
  .extra-rail > div,
  .swiper-wrapper .rail-card,
  .netflix-rail-container .rail-card,
  .rail-snap .rail-card,
  [id^="swiper-container"] .rail-card,
  .rail-card {
    flex: 0 0 calc(100% / 3.2) !important;
    max-width: calc(100% / 3.2) !important;
    min-width: calc(100% / 3.2) !important;
  }
}

@media (max-width: 768px) {
  .levix-catalog-rail-wrapper .rail-card,
  .levix-catalog-rail .rail-card,
  .extra-rail .rail-card,
  .extra-rail > div,
  .swiper-wrapper .rail-card,
  .netflix-rail-container .rail-card,
  .rail-snap .rail-card,
  [id^="swiper-container"] .rail-card,
  .rail-card {
    flex: 0 0 calc(100% / 1.15) !important;
    max-width: calc(100% / 1.15) !important;
    min-width: calc(100% / 1.15) !important;
  }
}

/* 13. CARRINHO LATERAL — BOTÃO CONTINUAR NAVEGANDO (HOVER AZUL) */
.cart-continue-btn {
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  color: #0F204B;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
}

.cart-continue-btn:hover {
  background: rgba(0, 206, 209, 0.08);
  border-color: #00CED1;
  color: #00CED1;
}

/* ==========================================================================
   MOCKUP IPHONE 17 TITANIUM — CSS PURO (CONTRAMEDIDA ANTI-FALSO POSITIVO)
   ========================================================================== */

.iphone-17-mockup {
  position: relative;
  width: 100%;
  max-width: min(340px, calc(86vh * 9 / 19.2));
  height: auto;
  max-height: 86vh;
  aspect-ratio: 9 / 19.2;
  margin-left: auto;
  margin-right: auto;
  border-radius: 3.2rem;
  padding: 7px;
  background: linear-gradient(135deg, #CCCCCC 0%, #F4F4F4 50%, #B0B0B0 100%);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: box-shadow 0.3s ease;
  z-index: 10;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transform: translateZ(0);
}

.iphone-17-mockup:hover {
  transform: none !important;
  box-shadow: 0 35px 80px -15px rgba(0, 0, 0, 0.95), inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.4);
}

/* Botões Físicos Laterais (Proporcionais à Escala Fluida) */
.iphone-btn-action {
  position: absolute;
  left: -3px;
  top: 13%;
  width: 3px;
  height: 4.5%;
  min-height: 20px;
  background: linear-gradient(to right, #DFDFDF, #B0B0B0);
  border-radius: 3px 0 0 3px;
  box-shadow: -1px 2px 4px rgba(0, 0, 0, 0.4);
  z-index: 20;
}

.iphone-btn-vol-up {
  position: absolute;
  left: -3px;
  top: 20%;
  width: 3px;
  height: 8%;
  min-height: 35px;
  background: linear-gradient(to right, #DFDFDF, #B0B0B0);
  border-radius: 3px 0 0 3px;
  box-shadow: -1px 2px 4px rgba(0, 0, 0, 0.4);
  z-index: 20;
}

.iphone-btn-vol-down {
  position: absolute;
  left: -3px;
  top: 29.5%;
  width: 3px;
  height: 8%;
  min-height: 35px;
  background: linear-gradient(to right, #DFDFDF, #B0B0B0);
  border-radius: 3px 0 0 3px;
  box-shadow: -1px 2px 4px rgba(0, 0, 0, 0.4);
  z-index: 20;
}

.iphone-btn-power {
  position: absolute;
  right: -3px;
  top: 20%;
  width: 3px;
  height: 11%;
  min-height: 50px;
  background: linear-gradient(to left, #DFDFDF, #B0B0B0);
  border-radius: 0 3px 3px 0;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
  z-index: 20;
}

/* Tela do Aparelho (Safe Area Dynamic Island & Status Bar OLED) */
.iphone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  background-color: #0A0A0C !important;
  border-radius: 2.8rem;
  overflow: hidden;
  border: 5px solid #0C0C0D;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.95);
  padding-top: 54px !important;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Dynamic Island */
.dynamic-island {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 16px;
  background-color: #000000;
  border-radius: 20px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px;
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  pointer-events: none;
}

.camera-lens {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #0d0d1e;
  border: 1px solid rgba(255, 255, 255, 0.05);
  opacity: 0.6;
}

/* Iframe do Vídeo Reels (Escala Segura, Preenchimento Equilibrado e Rodapé 100% Visível) */
.reels-iframe,
.iphone-screen .reels-iframe,
section#instagram-reels .reels-iframe {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  outline: none !important;
  background-color: #000000 !important;
  clip-path: none !important;
  border-radius: 0 0 2.5rem 2.5rem !important;
  z-index: 30 !important;
  display: block !important;
  pointer-events: auto !important;
  transform: scale(1.05) translateZ(0) !important;
  transform-origin: center top !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transition: none !important;
}

/* Oclusor Cirúrgico de Curtidas do Reels (Ocultação de Métricas Antigas & Rodapé Clean) */
.reels-likes-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 12px !important;
  background-color: #FFFFFF;
  border-radius: 0 0 2.5rem 2.5rem;
  z-index: 35;
  pointer-events: none;
}

/* Trava Dimensional Responsiva Mobile */
@media (max-width: 360px) {
  .iphone-17-mockup {
    max-width: min(280px, calc(86vh * 9 / 19.2));
  }
}