/* Updated Grid Carousel CSS - All Changes Applied */
/* Replace your existing grid carousel CSS with this updated version */

/* Base Reset and Common Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Common Carousel Wrapper Styles */
.carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: 85vw;
  margin: 20px auto 0 auto;
  padding: 0;
  overflow: visible;
}

.swiper {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
  position: relative;
}

.swiper-slide {
  display: flex;
  flex-direction: column;
  height: auto;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
  width: 400px; /* Default width */
}

.carousel-title {
  text-align: center;
  margin: 20px auto 0 auto;
  font-size: 24px;
  font-weight: 600;
  color: #333;
  width: 100%;
}

.carousel-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
}

/* Enhanced Reel Container with Mobile Fixes */
.reel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  aspect-ratio: 9/16;
  background-color: #000;
  min-height: 200px;
  border-radius: 8px;
}

/* Enhanced Video Styling for Mobile Compatibility */
.swiper-slide video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  background-color: #000;
  border-radius: 8px;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;

  /* Mobile-specific video fixes */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ===== UPDATED GRID CAROUSEL STYLES (MATCHING STACKED SIZES + ALL FIXES) ===== */

/* Grid Carousel Wrapper - Updated with Stacked Sizing */
.carousel-wrapper[data-carousel-type="grid"] {
  max-width: 85vw; /* Match stacked desktop approach */
  padding: 0 20px; /* Better padding like stacked */
  min-height: auto;
}

.carousel-wrapper[data-carousel-type="grid"] .swiper {
  overflow: visible;
}

.carousel-wrapper[data-carousel-type="grid"] .swiper-wrapper {
  display: block !important;
  height: auto !important;
}

/* Grid Slides - Updated with Stacked Desktop Approach */
.carousel-wrapper[data-carousel-type="grid"] .swiper-slide {
  width: calc(33.333% - 12px) !important; /* 3 columns like stacked desktop */
  height: auto !important;
  margin-bottom: 18px !important;
  margin-right: 18px !important; /* Match stacked spacing */
  display: inline-block !important;
  vertical-align: top !important;
  float: left !important;
  max-width: 280px !important; /* Match stacked desktop slide width */
}

/* Better column spacing - Match Stacked */
.carousel-wrapper[data-carousel-type="grid"] .swiper-slide:nth-child(3n) {
  margin-right: 0 !important;
}

/* Grid Reel Container - Match Stacked Sizing Exactly */
.carousel-wrapper[data-carousel-type="grid"] .reel-container {
  aspect-ratio: 9/16; /* Maintain stacked aspect ratio */
  height: auto;
  max-height: 400px; /* Close to stacked 500px height */
  width: 100%;
  border-radius: 12px; /* Match stacked border radius */
}

/* Grid Videos - Match Stacked Performance */
.carousel-wrapper[data-carousel-type="grid"] .swiper-slide video {
  border-radius: 12px; /* Match stacked */
  transform: translateZ(0); /* Match stacked performance */
}

/* ===== PROPORTIONAL PRODUCT INFO SIZING ===== */
/* Grid Product Info - Proportional sizing applied */
.carousel-wrapper[data-carousel-type="grid"]
  .product-info-section[data-product-id] {
  padding: 8px; /* Reduced from original 12px */
  padding-top: 20px; /* Reduced from original 30px */
}

/* Proportional Product Image */
.carousel-wrapper[data-carousel-type="grid"] .product-image-container {
  width: 40px; /* Reduced from original 60px */
  height: 40px;
  top: -20px; /* Adjusted from original -30px */
  border-radius: 6px; /* Reduced from original 8px */

  /* CENTER IMAGE WITHIN CONTAINER - APPLIED FIX */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* CENTER PRODUCT THUMBNAIL WITHIN CONTAINER */
.carousel-wrapper[data-carousel-type="grid"] .product-thumbnail {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Grid Product Title - Proportional sizing */
.carousel-wrapper[data-carousel-type="grid"]
  .product-info-section[data-product-id]
  .product-info-content
  .product-title {
  font-size: 12px !important; /* Reduced from original 16px */
  font-weight: 600 !important;
  margin-left: 46px !important; /* Adjusted for smaller image */

  /* TITLE ELLIPSIS - APPLIED FIX */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: calc(100% - 50px) !important; /* Account for image width */
  max-width: 120px !important;
  display: block !important;
}

/* Grid Price - Proportional sizing */
.carousel-wrapper[data-carousel-type="grid"] .price {
  font-size: 14px; /* Reduced from original 18px */
  font-weight: 600;
  color: #e74c3c;
}

/* Grid Add to Cart - Proportional sizing */
.carousel-wrapper[data-carousel-type="grid"] .add-to-cart-btn {
  padding: 8px 12px; /* Reduced from original 12px 16px */
  font-size: 11px; /* Reduced from original 15px */
  font-weight: 600;
  border-radius: 4px; /* Reduced from original 6px */
}

/* Grid Sale Badge - Proportional sizing */
.carousel-wrapper[data-carousel-type="grid"] .sale-badge {
  border-radius: 8px; /* Reduced from original 12px */
  font-size: 10px; /* Reduced from original 12px */
  padding: 3px 6px; /* Reduced from original 4px 8px */
}

/* ===== MOBILE GRID LAYOUT - ENFORCED 2 COLUMNS ===== */
@media screen and (max-width: 768px) {
  /* Grid Wrapper - Mobile Specific */
  .carousel-wrapper[data-carousel-type="grid"] {
    max-width: 100% !important; /* Full width on mobile */
    padding: 0 15px !important; /* Mobile padding */
    min-height: 720px !important; /* Minimum height for content */
  }

  /* Grid Slides - STRICT 2-Column Layout */
  .carousel-wrapper[data-carousel-type="grid"] .swiper-slide {
    width: calc(50% - 8px) !important; /* Exactly 50% minus gap */
    margin-right: 16px !important; /* Default margin for left column */
    margin-bottom: 15px !important; /* Bottom spacing */
    max-width: 200px !important; /* Maximum slide width */
    display: inline-block !important; /* Inline block for layout */
    vertical-align: top !important; /* Align to top */
    float: left !important; /* Float for 2-column effect */
  }

  /* Right Column (Even slides) - Remove right margin */
  .carousel-wrapper[data-carousel-type="grid"] .swiper-slide:nth-child(even) {
    margin-right: 0 !important; /* No margin on right column */
  }

  /* Reset any 3-column desktop rules that might interfere */
  .carousel-wrapper[data-carousel-type="grid"] .swiper-slide:nth-child(3n) {
    margin-right: 16px !important; /* Override 3-column rule */
  }

  /* Specific rule for slides that are both 3n and even (right column) */
  .carousel-wrapper[data-carousel-type="grid"]
    .swiper-slide:nth-child(3n):nth-child(even) {
    margin-right: 0 !important; /* Ensure right column has no margin */
  }

  /* Grid Swiper Wrapper - Mobile Specific */
  .carousel-wrapper[data-carousel-type="grid"] .swiper-wrapper {
    display: block !important; /* Block display for proper wrapping */
    height: auto !important; /* Auto height */
  }

  /* Grid Reel Container - Mobile Sizing */
  .carousel-wrapper[data-carousel-type="grid"] .reel-container {
    max-height: 300px !important; /* Mobile video height */
    aspect-ratio: 9/16 !important; /* Maintain aspect ratio */
    border-radius: 12px !important; /* Rounded corners */
  }

  /* Grid Videos - Mobile Optimizations */
  .carousel-wrapper[data-carousel-type="grid"] .swiper-slide video {
    border-radius: 12px !important; /* Match container */
    transform: translateZ(0) !important; /* Performance optimization */
  }

  /* Mobile Proportional Product Info */
  .carousel-wrapper[data-carousel-type="grid"]
    .product-info-section[data-product-id] {
    padding: 10px !important; /* Slightly larger on mobile */
    padding-top: 25px !important; /* Adjusted for mobile */
  }

  .carousel-wrapper[data-carousel-type="grid"] .product-image-container {
    width: 50px !important; /* Larger on mobile */
    height: 50px !important;
    top: -25px !important; /* Adjusted position */
    border-radius: 6px !important;
  }

  /* Mobile Product Title */
  .carousel-wrapper[data-carousel-type="grid"]
    .product-info-section[data-product-id]
    .product-info-content
    .product-title {
    font-size: 10px !important; /* Mobile font size */
    font-weight: 600 !important;
    margin-left: 56px !important; /* Space for mobile image */
    max-width: 100px !important; /* Smaller width on mobile */
  }

  /* Mobile Price */
  .carousel-wrapper[data-carousel-type="grid"] .price {
    font-size: 12px !important; /* Mobile price size */
    font-weight: 700 !important;
    color: #e74c3c !important;
  }

  /* Mobile Add to Cart */
  .carousel-wrapper[data-carousel-type="grid"] .add-to-cart-btn {
    padding: 5px 6px !important; /* Mobile button padding */
    font-size: 9px !important; /* Mobile button text */
    font-weight: 600 !important;
    border-radius: 4px !important;
  }

  /* Mobile Sale Badge */
  .carousel-wrapper[data-carousel-type="grid"] .sale-badge {
    font-size: 8px !important; /* Mobile badge text */
    padding: 2px 4px !important;
    border-radius: 6px !important;
  }
}

/* ===== VERY SMALL MOBILE SCREENS ===== */
@media screen and (max-width: 480px) {
  .carousel-wrapper[data-carousel-type="grid"] .swiper-slide {
    max-width: 180px !important; /* Smaller max width */
  }

  .carousel-wrapper[data-carousel-type="grid"] .reel-container {
    max-height: 280px !important; /* Slightly smaller video height */
  }

  .carousel-wrapper[data-carousel-type="grid"] {
    padding: 0 10px !important; /* Tighter padding on very small screens */
  }

  /* Very small mobile product title */
  .carousel-wrapper[data-carousel-type="grid"] .product-title {
    font-size: 9px !important;
    max-width: 90px !important;
  }

  .carousel-wrapper[data-carousel-type="grid"] .price {
    font-size: 11px !important;
  }

  .carousel-wrapper[data-carousel-type="grid"] .add-to-cart-btn {
    font-size: 8px !important;
    padding: 4px 5px !important;
  }
}

/* ===== EXTRA SMALL SCREENS ===== */
@media screen and (max-width: 320px) {
  .carousel-wrapper[data-carousel-type="grid"] .swiper-slide {
    width: calc(50% - 4px) !important; /* Tighter gap */
    margin-right: 8px !important; /* Smaller margin */
    max-width: 150px !important; /* Smaller max width */
  }

  .carousel-wrapper[data-carousel-type="grid"] .swiper-slide:nth-child(even) {
    margin-right: 0 !important; /* Still no margin on right */
  }

  .carousel-wrapper[data-carousel-type="grid"] .reel-container {
    max-height: 250px !important; /* Even smaller video height */
  }

  /* Extra small product adjustments */
  .carousel-wrapper[data-carousel-type="grid"] .product-image-container {
    width: 40px !important;
    height: 40px !important;
    top: -20px !important;
  }

  .carousel-wrapper[data-carousel-type="grid"] .product-title {
    font-size: 8px !important;
    margin-left: 46px !important;
    max-width: 80px !important;
  }
}

/* ===== LARGE DESKTOP (ENHANCED STACKED APPROACH) ===== */
@media screen and (min-width: 1200px) {
  .carousel-wrapper[data-carousel-type="grid"] {
    max-width: 80vw; /* Slightly smaller on large screens */
  }

  .carousel-wrapper[data-carousel-type="grid"] .swiper-slide {
    max-width: 320px !important; /* Slightly larger slides */
  }

  .carousel-wrapper[data-carousel-type="grid"] .reel-container {
    max-height: 450px !important; /* Slightly taller for large screens */
  }

  /* Desktop proportional adjustments */
  .carousel-wrapper[data-carousel-type="grid"]
    .product-info-section[data-product-id] {
    padding: 12px !important;
    padding-top: 30px !important;
  }

  .carousel-wrapper[data-carousel-type="grid"] .product-image-container {
    width: 60px !important;
    height: 60px !important;
    top: -30px !important;
  }

  .carousel-wrapper[data-carousel-type="grid"] .product-title {
    font-size: 13px !important;
    margin-left: 70px !important;
    max-width: 180px !important;
  }

  .carousel-wrapper[data-carousel-type="grid"] .price {
    font-size: 16px !important;
  }

  .carousel-wrapper[data-carousel-type="grid"] .add-to-cart-btn {
    padding: 10px 14px !important;
    font-size: 12px !important;
  }
}