/* CAROUSEL MOBILE COM DESIGN HERO */
/* Estilos específicos para carousel de produtos em destaque no mobile */

@media screen and (max-width: 768px) {
  /* Container do carousel mobile */
  #featuredProductsContainer {
    gap: 12px !important;
    padding: 0 8px !important;
  }

  /* Cards do carousel mobile com glassmorphism */
  #featuredProductsContainer > div {
    background: linear-gradient(145deg,
      rgba(255,255,255,.15) 0%,
      rgba(255,255,255,.08) 100%) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    backdrop-filter: blur(8px) saturate(120%) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,.15) !important;
    min-width: 140px !important;
    width: 140px !important;
    transition: all 0.3s cubic-bezier(.22,1,.36,1) !important;
  }

  /* Efeito aurora nos cards do carousel mobile */
  #featuredProductsContainer > div::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: -1;
    background:
      radial-gradient(150px 100px at 20% 80%, rgba(0,0,139,.06), transparent 60%),
      radial-gradient(120px 80px at 80% 20%, rgba(0,0,205,.04), transparent 60%);
    filter: blur(12px);
    animation: carousel-aurora 6s ease-in-out infinite alternate;
  }

  /* Botões do carousel mobile com design hero */
  #featuredProductsContainer button[data-action="add"] {
    background: linear-gradient(135deg, #00008B, #0000CD) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    backdrop-filter: blur(6px) !important;
    color: white !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    font-size: 7px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: all 0.3s cubic-bezier(.22,1,.36,1) !important;
  }

  /* Preços com gradiente no carousel mobile */
  #featuredProductsContainer > div > div:last-child > div:nth-child(2) {
    background: linear-gradient(135deg, #00008B, #0000CD) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 800 !important;
  }

  /* Status "No Carrinho" no carousel mobile */
  #featuredProductsContainer > div > div:last-child > div:first-child {
    color: #00008B !important;
    font-weight: 600 !important;
    font-size: 7px !important;
  }

  /* Badge quantidade no carousel mobile */
  #featuredProductsContainer span[style*="position: absolute"] {
    background: #00008B !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
  }

  /* Seção de produtos em destaque mobile */
  .featured-products-section {
    padding: 16px 8px !important;
    margin: 8px 0 !important;
  }

  /* Título da seção mobile */
  .featured-products-section h2 {
    font-size: 18px !important;
    margin-bottom: 12px !important;
    text-align: center !important;
    color: #00008B !important;
    font-weight: 700 !important;
  }
}

/* Animação aurora para carousel mobile */
@keyframes carousel-aurora {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 0.2;
  }
  50% {
    transform: rotate(90deg) scale(1.05);
    opacity: 0.4;
  }
  100% {
    transform: rotate(180deg) scale(1);
    opacity: 0.2;
  }
}

/* Para telas muito pequenas */
@media screen and (max-width: 480px) {
  #featuredProductsContainer {
    gap: 8px !important;
    padding: 0 4px !important;
  }

  #featuredProductsContainer > div {
    min-width: 120px !important;
    width: 120px !important;
  }

  .featured-products-section {
    padding: 12px 4px !important;
  }

  .featured-products-section h2 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }
}