/* Basic Swiper styling - keep it simple like the reference */
.myTrendingSwiper,
.myFeaturedSwiper,
.myAntiqueSwiper {
  /* Use the site container width so Swiper calculates reasonable slide widths.
       Avoid forcing 100vw and translate centering which makes container extremely wide
       and causes large computed slide widths (visible as big gaps). */
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  height: 100%;
  left: 0 !important;
  transform: none !important;
}

.swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fix View Details button cursor - CRITICAL FIX */
.trending-link,
.featured-link,
.antique-link {
  cursor: pointer !important;
  pointer-events: auto !important;
}

.trending-link:hover,
.featured-link:hover,
.antique-link:hover {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Move pagination dots downward */
.trending-pagination,
.featured-pagination,
.antique-pagination {
  bottom: -50px !important;
  position: relative !important;
  margin-top: 40px !important;
}

.swiper-pagination-bullet {
  background: var(--accent-gold) !important;
  opacity: 0.5 !important;
  width: 12px !important;
  height: 12px !important;
}

.swiper-pagination-bullet-active {
  opacity: 1 !important;
  background: var(--accent-gold) !important;
}

/* MOBILE SPECIFIC FIXES */
@media (max-width: 768px) {
  /* Make buttons fully clickable on mobile */
  .trending-link,
  .featured-link,
  .antique-link {
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3) !important;
    z-index: 1000 !important;
    position: relative !important;
  }

  /* Make button containers clickable on mobile */
  .trending-card > div:last-child,
  .featured-card > div:last-child,
  .antique-card > div:last-child {
    pointer-events: auto !important;
    z-index: 999 !important;
  }
}

/* Fix: Trending section gaps on small screens
     Ensure trending slides fit viewport and gaps are small and consistent. */
@media (max-width: 768px) {
  .myTrendingSwiper {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
  }

  .myTrendingSwiper .swiper-wrapper {
    gap: 8px !important;
  }

  /* Let Swiper set the slide width (it writes inline styles). Don't
       override that with !important width:auto which breaks calculated
       widths and causes large gaps. Keep flex and a small right gap so
       slides sit closely together and the card can fill the slide. */
  .myTrendingSwiper .swiper-slide {
    flex: 0 0 auto !important;
    margin-right: 8px !important;
    box-sizing: border-box !important;
  }

  /* Make the card fill the slide container so slide width controls spacing.
       Card width is set here; Swiper will size slides to match. */
  .myTrendingSwiper .trending-card,
  .myTrendingSwiper .trending-card.category-card {
    width: 100% !important;
    max-width: calc(100vw - 48px) !important; /* allow small side padding */
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  .myTrendingSwiper .trending-image img {
    height: 200px !important;
    object-fit: cover !important;
  }
}

/* Card Styles - Matching Collections Page Design - ALL CARDS SAME SIZE */
.trending-card,
.featured-card,
.antique-card {
  /* Identical card dimensions (slightly narrower to fit 4 per viewport) */
  height: 450px !important;
  width: 300px !important;
  margin: 0 !important; /* remove auto-centering so slides sit adjacent */

  /* Identical layout */
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;

  /* Identical visual styling */
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a) !important;
  border: 2px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  text-align: center !important;
  padding: 12px !important; /* keep inner padding small so gaps feel tighter */
  position: relative !important;
  transition: all 0.4s ease !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Desktop: make trending match featured card/layout exactly */
@media (min-width: 769px) {
  .myTrendingSwiper .trending-card,
  .trending-products .trending-card {
    height: 400px !important; /* same as featured */
    width: 300px !important;
    margin: 0 15px !important; /* small side gap; Swiper also applies spaceBetween */
  }

  .myTrendingSwiper .trending-image,
  .trending-products .trending-image {
    height: 200px !important; /* same as featured */
  }

  .myTrendingSwiper .trending-content,
  .trending-products .trending-content {
    padding: 20px 20px !important;
  }

  /* Align controls to match featured placement */
  .myTrendingSwiper + .trending-controls {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}

/* Centralized product card styling used for featured, trending, antique on desktop and mobile.
   We intentionally do not modify `.category-card` rules; this adds a new `product-card` class
   so you can keep `category-card` intact elsewhere. */
.product-card {
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a) !important;
  border: 2px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  transition: all 0.4s ease !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.product-image {
  overflow: hidden !important;
  position: relative !important;
  height: 200px !important;
}

.product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a) !important;
}

.product-content {
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex-grow: 1 !important;
}

.product-link {
  display: inline-block !important;
  background: linear-gradient(135deg, #d4af37, #f4d03f) !important;
  color: #000000 !important;
  padding: 12px 24px !important;
  text-decoration: none !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: all 0.3s ease !important;
  font-size: 0.85rem !important;
  border: none !important;
  cursor: pointer !important;
  text-align: center !important;
}

/* Mobile adjustments: make product-card fill slide and be responsive */
@media (max-width: 768px) {
  .product-card {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }

  .product-image {
    height: 200px !important;
  }

  .product-content {
    padding: 16px !important;
  }
}

/* Strong unified override: ensure product-card looks identical across
   Trending, Featured, Antique Swipers. This block is intentionally
   specific and uses !important where necessary to override legacy
   rules for `.trending-card`, `.featured-card`, `.antique-card`. */
.myTrendingSwiper .product-card,
.myFeaturedSwiper .product-card,
.myAntiqueSwiper .product-card {
  height: 400px !important;
  width: 300px !important;
  margin: 0 !important; /* slide spacing handled on .swiper-slide */
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a) !important;
  border: 2px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 20px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.myTrendingSwiper .product-image img,
.myFeaturedSwiper .product-image img,
.myAntiqueSwiper .product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.myTrendingSwiper .product-image,
.myFeaturedSwiper .product-image,
.myAntiqueSwiper .product-image {
  height: 200px !important;
}

.myTrendingSwiper .product-content,
.myFeaturedSwiper .product-content,
.myAntiqueSwiper .product-content {
  padding: 20px !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.myTrendingSwiper .product-link,
.myFeaturedSwiper .product-link,
.myAntiqueSwiper .product-link {
  padding: 12px 24px !important;
  font-size: 0.85rem !important;
  border-radius: 30px !important;
}

/* Use slide margin to control spacing reliably across browsers and
   avoid duplicate margins from card + slide. Keep small gap (8px). */
.myTrendingSwiper .swiper-slide,
.myFeaturedSwiper .swiper-slide,
.myAntiqueSwiper .swiper-slide {
  margin-right: 6px !important;
  box-sizing: border-box !important;
}

/* SECTION HEADER / CARD UNIFIED TYPOGRAPHY */
.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-header .section-title {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  color: var(--text-primary);
  margin: 0 0 10px 0;
  font-weight: 300;
}

.section-header .section-desc {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 680px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

/* Ensure on mobile the product cards visually match desktop styles (same borders, shadows, padding)
   but adapt to a single-column width. This enforces identical visuals for trending/featured/antique. */
@media (max-width: 768px) {
  .myTrendingSwiper .product-card,
  .myFeaturedSwiper .product-card,
  .myAntiqueSwiper .product-card {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    padding: 12px !important;
    margin: 0 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
    border-radius: 18px !important;
  }

  .myTrendingSwiper .product-image,
  .myFeaturedSwiper .product-image,
  .myAntiqueSwiper .product-image {
    height: 220px !important;
  }

  .myTrendingSwiper .product-content,
  .myFeaturedSwiper .product-content,
  .myAntiqueSwiper .product-content {
    padding: 16px !important;
  }
}

/* Strong mobile fixes to prevent clipping of image, title, price, CTA */
@media (max-width: 768px) {
  .myTrendingSwiper,
  .myFeaturedSwiper,
  .myAntiqueSwiper {
    overflow: visible !important;
  }

  .myTrendingSwiper .swiper-wrapper,
  .myFeaturedSwiper .swiper-wrapper,
  .myAntiqueSwiper .swiper-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .myTrendingSwiper .swiper-slide,
  .myFeaturedSwiper .swiper-slide,
  .myAntiqueSwiper .swiper-slide {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .product-image img,
  .trending-image img,
  .featured-image img,
  .antique-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 320px !important;
    object-fit: contain !important;
  }

  .product-title,
  .trending-title,
  .featured-title,
  .antique-title {
    height: auto !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
  }

  .product-content,
  .trending-content,
  .featured-content,
  .antique-content {
    min-height: 0 !important;
    padding-bottom: 18px !important;
  }

  .product-link,
  .trending-link,
  .featured-link,
  .antique-link {
    margin-top: 12px !important;
    align-self: center !important;
  }
}

/* Tighter mobile image sizing so CTA isn't pushed off-screen */
@media (max-width: 768px) {
  .myTrendingSwiper .product-image,
  .myFeaturedSwiper .product-image,
  .myAntiqueSwiper .product-image {
    height: 160px !important;
  }

  /* Smaller phones */
  @media (max-width: 480px) {
    .myTrendingSwiper .product-image,
    .myFeaturedSwiper .product-image,
    .myAntiqueSwiper .product-image {
      height: 130px !important;
    }
  }

  /* Ensure cards allow content to flow and CTA stays visible above controls */
  .myTrendingSwiper .product-card,
  .myFeaturedSwiper .product-card,
  .myAntiqueSwiper .product-card {
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .myTrendingSwiper,
  .myFeaturedSwiper,
  .myAntiqueSwiper {
    padding-bottom: 140px !important; /* extra space for controls */
  }

  .product-content,
  .trending-content,
  .featured-content,
  .antique-content {
    padding-bottom: 8px !important;
  }

  .product-link,
  .trending-link,
  .featured-link,
  .antique-link {
    margin-bottom: 6px !important;
    z-index: 999 !important;
  }
}

/* Mobile: ensure controls don't overlap card content — give swipers extra bottom padding
   and reset transforms for control wrappers so arrows sit below cards and do not cover CTA. */
@media (max-width: 768px) {
  .myTrendingSwiper,
  .myFeaturedSwiper,
  .myAntiqueSwiper {
    padding-bottom: 110px !important; /* reserve space for controls */
    box-sizing: border-box !important;
  }

  .myTrendingSwiper + .trending-controls,
  .myFeaturedSwiper + .featured-controls,
  .myAntiqueSwiper + .antique-controls {
    transform: none !important;
    margin-top: 14px !important;
    position: relative !important;
    z-index: 60 !important;
  }

  /* Make CTA appear above controls */
  .product-link,
  .trending-link,
  .featured-link,
  .antique-link {
    z-index: 200 !important;
    position: relative !important;
    pointer-events: auto !important;
  }

  /* Slightly reduce arrow size on mobile and ensure visible spacing */
  .trending-controls .slider-nav button,
  .featured-controls .slider-nav button,
  .antique-controls .slider-nav button,
  .swiper-button-next,
  .swiper-button-prev {
    width: 44px !important;
    height: 44px !important;
    margin: 6px !important;
  }

  /* Ensure swiper wrapper uses visible overflow so slides can be scrolled into view */
  .myTrendingSwiper .swiper-wrapper,
  .myFeaturedSwiper .swiper-wrapper,
  .myAntiqueSwiper .swiper-wrapper {
    overflow: visible !important;
  }
}

/* Strong mobile: ensure swiper wrapper/slide layout is flexible and slides are visible */
@media (max-width: 768px) {
  .myTrendingSwiper,
  .myFeaturedSwiper,
  .myAntiqueSwiper {
    overflow: visible !important;
  }

  .myTrendingSwiper .swiper-wrapper,
  .myFeaturedSwiper .swiper-wrapper,
  .myAntiqueSwiper .swiper-wrapper {
    display: flex !important;
    align-items: stretch !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .myTrendingSwiper .swiper-slide,
  .myFeaturedSwiper .swiper-slide,
  .myAntiqueSwiper .swiper-slide {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
  }
}

/* Remove extra end-gap on wrapper if any (some CSS used gap on wrapper)
   and ensure slides are left-aligned with consistent spacing */
.myTrendingSwiper .swiper-wrapper,
.myFeaturedSwiper .swiper-wrapper,
.myAntiqueSwiper .swiper-wrapper {
  gap: 0 !important;
}

/* Desktop: force slide width so slides don't expand to fill large containers. */
@media (min-width: 1024px) {
  .myTrendingSwiper .swiper-slide,
  .myFeaturedSwiper .swiper-slide,
  .myAntiqueSwiper .swiper-slide {
    width: 320px !important; /* slide width including small gutters */
    flex: 0 0 320px !important;
  }

  /* reduce overall wrapper padding so slides sit closer to each other */
  .myTrendingSwiper,
  .myFeaturedSwiper,
  .myAntiqueSwiper {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Ensure default Swiper buttons (if present) match our slider-nav buttons and are visible */
.swiper-button-next,
.swiper-button-prev,
.swiper-button-next-featured,
.swiper-button-prev-featured,
.swiper-button-next-trending,
.swiper-button-prev-trending {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.95),
    rgba(212, 175, 55, 0.85)
  ) !important;
  color: #111 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
  border: none !important;
  z-index: 60 !important;
  position: relative !important;
}

/* Spacer slide styling - small invisible slide used to pad end of antique swiper */
.myAntiqueSwiper .spacer-slide {
  background: transparent !important;
  pointer-events: none !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: 1px !important;
}

/* Ensure all control wrappers are centered and occupy full width so arrows align consistently */
.trending-controls,
.featured-controls,
.antique-controls,
.myTrendingSwiper + .trending-controls,
.myFeaturedSwiper + .featured-controls,
.myAntiqueSwiper + .antique-controls {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}

.slider-nav {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Neutralize any absolutely positioned default swiper buttons so they sit inline and centered */
.swiper-button-prev,
.swiper-button-next,
.swiper-button-prev-featured,
.swiper-button-next-featured,
.swiper-button-prev-trending,
.swiper-button-next-trending {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  margin: 8px !important;
  display: inline-flex !important;
}

/* Ensure controls inside container are centered */
.container > .trending-controls,
.container > .featured-controls,
.container > .antique-controls {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

/* Product title & price unified styles */
.product-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.4rem !important;
  color: #fff !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
  height: 2.6em !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.product-price-section {
  color: #d4af37 !important;
  font-weight: 600 !important;
  margin-bottom: 15px !important;
  display: flex !important;
  gap: 0.6em !important;
  align-items: center !important;
  justify-content: center !important;
}

.product-price-original {
  text-decoration: line-through !important;
  color: #ff0000 !important;
  font-size: 0.9rem !important;
}

.product-price-sale {
  color: #d4af37 !important;
  font-weight: 700 !important;
}

.trending-card:hover,
.featured-card:hover,
.antique-card:hover {
  transform: translateY(-10px) !important;
  border-color: rgba(212, 175, 55, 0.6) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
}

/* Identical image styling across all sections */
.trending-image,
.featured-image,
.antique-image {
  height: 250px !important;
  overflow: hidden !important;
  position: relative !important;
  margin-bottom: 12px !important;
}

.trending-image img,
.featured-image img,
.antique-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a) !important;
}

.trending-card:hover .trending-image img,
.featured-card:hover .featured-image img,
.antique-card:hover .antique-image img {
  transform: scale(1.05) !important;
}

/* Identical content styling across all sections */
.trending-content,
.featured-content,
.antique-content {
  padding: 30px 25px !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* Identical title styling across all sections */
.trending-title,
.featured-title,
.antique-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.6rem !important;
  color: #fff !important;
  margin-bottom: 10px !important;
  height: 2.4em !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  line-height: 1.2em !important;
}

/* Identical price section styling across all sections */
.trending-price-section,
.featured-price-section,
.antique-price-section {
  display: flex !important;
  gap: 0.8em !important;
  align-items: center !important;
  margin-bottom: 15px !important;
  justify-content: center !important;
  color: #d4af37 !important;
  font-weight: 600 !important;
}

.trending-price-original,
.featured-price-original,
.antique-price-original {
  text-decoration: line-through !important;
  color: #ff0000 !important;
  font-size: 0.9rem !important;
}

.trending-price-sale,
.featured-price-sale,
.antique-price-sale {
  color: #d4af37 !important;
  font-weight: 700 !important;
}

/* Identical button styling across all sections */
.trending-link,
.featured-link,
.antique-link {
  display: inline-block !important;
  background: linear-gradient(135deg, #d4af37, #f4d03f) !important;
  color: #000000 !important;
  padding: 14px 28px !important;
  text-decoration: none !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: all 0.3s ease !important;
  font-size: 0.8rem !important;
  border: none !important;
  cursor: pointer !important;
  margin-top: auto !important;
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* Force button cursor and clickability on hover */
.trending-link:hover,
.featured-link:hover,
.antique-link:hover,
.trending-link:focus,
.featured-link:focus,
.antique-link:focus {
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

.trending-link:hover,
.featured-link:hover,
.antique-link:hover {
  background: #b8962f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important;
}

/* Replace hard background hover with subtle shimmer effect on CTA buttons */
.product-link,
.trending-link,
.featured-link,
.antique-link {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #d4af37, #f4d03f) !important;
}

.product-link::after,
.trending-link::after,
.featured-link::after,
.antique-link::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 140% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  transform: skewX(-20deg) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@keyframes shimmer {
  from {
    left: -120% !important;
  }
  to {
    left: 120% !important;
  }
}

.product-link:hover::after,
.trending-link:hover::after,
.featured-link:hover::after,
.antique-link:hover::after,
.product-link:focus::after,
.trending-link:focus::after,
.featured-link:focus::after,
.antique-link:focus::after {
  animation: shimmer 900ms linear !important;
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .product-link::after,
  .trending-link::after,
  .featured-link::after,
  .antique-link::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ===== FORCE GRAB CURSOR ON SWIPER SLIDERS - HIGHEST PRIORITY ===== */
.myTrendingSwiper,
.myFeaturedSwiper,
.myAntiqueSwiper {
  cursor: grab !important;
}

.myTrendingSwiper:active,
.myFeaturedSwiper:active,
.myAntiqueSwiper:active {
  cursor: grabbing !important;
}

.myTrendingSwiper .swiper-slide,
.myFeaturedSwiper .swiper-slide,
.myAntiqueSwiper .swiper-slide {
  cursor: grab !important;
}

.myTrendingSwiper .swiper-slide:active,
.myFeaturedSwiper .swiper-slide:active,
.myAntiqueSwiper .swiper-slide:active {
  cursor: grabbing !important;
}

/* Force grab cursor on all swiper elements - override any conflicts */
.myTrendingSwiper *,
.myFeaturedSwiper *,
.myAntiqueSwiper * {
  cursor: grab !important;
}

.myTrendingSwiper *:active,
.myFeaturedSwiper *:active,
.myAntiqueSwiper *:active {
  cursor: grabbing !important;
}

/* EXCEPT buttons - they should have pointer cursor */
.myTrendingSwiper .trending-link,
.myFeaturedSwiper .featured-link,
.myAntiqueSwiper .antique-link,
.myTrendingSwiper .trending-link *,
.myFeaturedSwiper .featured-link *,
.myAntiqueSwiper .antique-link * {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Ensure links/buttons inside slides keep pointer, but everything else shows grab */
.myTrendingSwiper .product-link,
.myFeaturedSwiper .product-link,
.myAntiqueSwiper .product-link {
  cursor: pointer !important;
}

/* When body has is-grabbing, enforce grabbing cursor for all swiper content */
body.is-grabbing .myTrendingSwiper *,
body.is-grabbing .myFeaturedSwiper *,
body.is-grabbing .myAntiqueSwiper * {
  cursor: grabbing !important;
}

/* Force button clickability with highest specificity */
.trending-link,
.featured-link,
.antique-link {
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 1000 !important;
  position: relative !important;
}

/* Force visibility and clickability */
.trending-card *,
.featured-card *,
.antique-card * {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* MOBILE CARD SIZES - Ensure all cards are identical on mobile */
@media (max-width: 768px) {
  .trending-card,
  .featured-card,
  .antique-card {
    height: 450px !important;
    /* Same mobile height */
    width: 280px !important;
    /* Same mobile width */
    padding: 16px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 480px) {
  .trending-card,
  .featured-card,
  .antique-card {
    height: 450px !important;
    /* Same small mobile height */
    width: 260px !important;
    /* Same small mobile width */
    padding: 14px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 360px) {
  .trending-card,
  .featured-card,
  .antique-card {
    height: 450px !important;
    /* Same very small mobile height */
    width: 240px !important;
    /* Same very small mobile width */
    padding: 12px !important;
    margin: 0 auto !important;
  }
}

/* Strong mobile override: unset any fixed heights so card content can expand naturally.
   This prevents content from being clipped on smaller screens while preserving
   visual styling (borders, shadows, paddings). */
@media (max-width: 768px) {
  .trending-card,
  .featured-card,
  .antique-card,
  .product-card {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 14px 14px 22px 14px !important;
    margin: 0 0 18px 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Ensure image area keeps a reasonable height but doesn't force total card height */
  .trending-image,
  .featured-image,
  .antique-image,
  .product-image {
    height: 220px !important;
  }

  /* Let content area grow naturally and avoid forced clamps that reduce available space */
  .product-content,
  .trending-content,
  .featured-content,
  .antique-content {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  /* Reduce title clamp to allow wrapping if needed (but still limit height reasonably) */
  .product-title,
  .trending-title,
  .featured-title,
  .antique-title {
    height: auto !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
  }

  /* Ensure CTA button stays below content and is visible */
  .trending-link,
  .featured-link,
  .antique-link,
  .product-link {
    display: inline-block !important;
    width: auto !important;
    margin: 12px 0 0 0 !important;
    align-self: center !important;
    position: relative !important;
    z-index: 50 !important;
  }
}

/* Centered controls for all sections: place arrows centered at bottom of card area */
.trending-controls,
.featured-controls,
.antique-controls {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 40 !important;
}

/* Position the controls so they sit visually at the center bottom of the cards.
   Controls are inserted AFTER the .swiper element, so use a negative margin to
   overlap them upward into the card area consistently across sections. */
.myTrendingSwiper + .trending-controls,
.myFeaturedSwiper + .featured-controls,
.myAntiqueSwiper + .antique-controls {
  margin-top: 24px !important;
  transform: translateY(-16px) !important; /* pull controls upward slightly into the card area */
  pointer-events: auto !important;
  position: relative !important;
  z-index: 120 !important;
}

/* Unified arrow button styling */
.slider-nav button {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.95),
    rgba(212, 175, 55, 0.85)
  ) !important;
  color: #111 !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

/* Give a subtle hover effect to arrows */
.slider-nav button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
}

/* Ensure antique wrapper has a small right padding so last slides aren't clipped */
.myAntiqueSwiper .swiper-wrapper {
  padding-right: 28px !important;
}

/* For desktop where slides are fixed width, ensure wrapper right padding equals one slide width minus gap */
@media (min-width: 1024px) {
  .myAntiqueSwiper .swiper-wrapper {
    padding-right: 32px !important;
  }
}