/* Index-specific responsive tweaks (mobile-only) */

/* Make the banner carousel shorter on mobile and center content */
@media (max-width: 900px) {
  .slides {
    height: 42vh !important;
  }

  .slide-content {
    margin-left: 6% !important;
    max-width: 86% !important;
  }

  .slide-title {
    font-size: 1.8rem !important;
  }

  .slide-subtitle {
    font-size: 1rem !important;
  }

  /* tighten hero spacing */
  .hero {
    padding: 28px 16px 8px 16px !important;
  }
}

@media (max-width: 480px) {
  .slides {
    height: 34vh !important;
  }

  .slide-title {
    font-size: 1.4rem !important;
  }

  .slide-subtitle {
    font-size: 0.95rem !important;
  }

  .carousel-control {
    width: 36px;
    height: 36px;
  }

  .carousel-control.prev {
    left: 8px;
  }

  .carousel-control.next {
    right: 8px;
  }

  /* promotions list: show two cards per row on mobile */
  .promotions-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding-bottom: 8px;
  }

  .promo-card {
    min-width: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 0 10px 0 !important;
  }

  .promo-img {
    height: 130px !important;
    flex-shrink: 0 !important;
  }

  /* nouveautes cards: limit image height so text stays visible */
  .new-products .product-card {
    min-height: 0 !important;
    padding-bottom: 12px !important;
    overflow: visible !important;
  }

  .new-products .product-img {
    height: 160px !important;
    aspect-ratio: unset !important;
    border-radius: 12px 12px 0 0 !important;
    flex-shrink: 0 !important;
  }

  /* Best sellers and new-products grids: two cards per row */
  .best-sellers-list,
  .new-products .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  /* CTA button center and full width on very small screens */
  .cta-btn {
    width: 86%;
    max-width: 420px;
    margin: 12px auto !important;
    display: block;
  }

  /* Footer spacing */
  .footer-top {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

@media (max-width: 360px) {

  .promotions-list,
  .best-sellers-list,
  .new-products .products-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Make nav icons larger and touch-friendly on narrow widths */
@media (max-width: 740px) {

  .nav-icons .search-btn,
  .nav-icons .fav-btn,
  .nav-icons .cart-btn {
    width: 48px;
    height: 48px;
  }

  .nav-icons {
    gap: 10px;
    margin-right: 8px;
  }
}

/* Hide logo + cart/fav icons when login drawer is open */
body.login-open .logo,
body.login-open #site-logo,
body.login-open .mobile-top-strip .ts-logo,
body.login-open .nav-icons .cart-btn,
body.login-open .nav-icons .fav-btn,
body.login-open .mobile-top-strip .cart-btn,
body.login-open .mobile-top-strip .fav-btn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 180ms ease;
}