/* ===================== MOBILE CAROUSEL (shared) ===================== */
.mobile-carousel-wrap {
  position: relative;
}
.mobile-carousel-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 8px 4px 20px;
  scrollbar-width: none;
  cursor: grab;
}
.mobile-carousel-scroll::-webkit-scrollbar {
  display: none;
}
.mobile-carousel-scroll.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* Category carousel card sizing on mobile */
.mobile-carousel-scroll .cat-card {
  flex-shrink: 0;
  width: 62vw;
  max-width: 240px;
  scroll-snap-align: start;
}

/* Blog carousel card sizing on mobile */
.mobile-carousel-scroll .blog-card {
  flex-shrink: 0;
  width: 75vw;
  max-width: 300px;
  scroll-snap-align: start;
}

/* Carousel dot indicators */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}
.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-border);
  border: 1.5px solid var(--c-text-3);
  transition:
    width var(--transition),
    background var(--transition);
  cursor: pointer;
}
.carousel-dot.active {
  width: 20px;
  border-radius: 3px;
  background: var(--c-accent);
  border-color: var(--c-accent);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
  .categories-grid .cat-card {
    width: 180px;
  }
  .footer-bottom {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .nav-links {
    display: none;
  }
}
@media (max-width: 768px) {
  :root {
    --nav-h: 58px;
  }
  .nav-hamburger {
    display: flex;
  }
  .nav-icon-wish,
  .nav-icon-cart {
    display: none !important;
  }
  .navbar {
    padding: 0 16px;
  }
  .nav-right {
    gap: 10px;
  }
  .section {
    padding: 64px 0;
  }
  .section-inner {
    padding: 0 20px;
  }
  /* Categories card size on tablet */
  .categories-grid .cat-card {
    width: 160px;
  }
  /* Blog → carousel on mobile */
  .blog-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 8px 4px 20px;
    scrollbar-width: none;
    cursor: grab;
  }
  .blog-grid::-webkit-scrollbar {
    display: none;
  }
  .blog-grid .blog-card {
    flex-shrink: 0;
    width: 75vw;
    max-width: 300px;
    scroll-snap-align: start;
  }
  .deals-grid {
    grid-template-columns: 1fr;
  }
  .deal-card {
    min-height: 300px;
  }
  .features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .footer-bottom {
    grid-template-columns: 1fr 1fr;
  }
  .footer-top {
    padding: 24px 20px;
  }
  .mobile-carousel-dots {
    display: flex !important;
  }
  .hero-arrow {
    display: none;
  }
}
@media (max-width: 480px) {
  :root {
    --announcement-h: 36px;
  }
  /* .ann-socials {
    display: none;
  } */
  .ann-marquee-wrap {
    width: 100%;
    max-width: 100%;
  }
  .footer-bottom {
    grid-template-columns: 1fr;
  }
  .hero {
    min-height: 420px;
  }
  .categories-grid .cat-card {
    width: 58vw;
  }
  .blog-grid .blog-card {
    width: 82vw;
  }
  .deal-content {
    padding: 28px 24px;
  }
}
@media (max-width: 768px) {
  .video-label,
  .video-title,
  .video-sub {
    display: none;
  }

  .video-content {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    backdrop-filter: none;
    -webkit-backdrop-filter: none; /* for Safari */
    background: transparent;
    border-radius: 0;
    margin: 0;
  }
  .video-container {
    border-radius: 18px;
    background-color: red;
  }
}
@media (max-width: 768px) {
  .video-content {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
  }
}

@media (max-width: 550px) {
  .hero-content-box {
    margin-left: 20px;
    margin-right: 20px;
    padding: 28px 28px;
    max-width: 100%;
  }
}

/* Dot indicators hidden on desktop */
.mobile-carousel-dots {
  display: none;
}