/* Global styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Chathura', sans-serif;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Prevent horizontal overflow on all elements */
* {
  max-width: 100%;
}

/* Allow specific elements to exceed for layout purposes */
.CardGrid,
.navbar,
header,
main {
  max-width: none;
}

*::-webkit-scrollbar {
  display: none;
}

body {
  background-color: #000;
  color: #fff;
  overflow-x: hidden;
  height: auto;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
}

/* Force scrolling on desktop */
@media screen and (min-width: 768px) {
  html {
    overflow-y: auto !important;
  }

  body {
    overflow-y: hidden !important;
  }
}

/* Ensure mobile scrolling works - fix double scroll issue */
@media screen and (max-width: 767px) {
  html {
    overflow: hidden;
    height: 100%;
  }

  body {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  /* Ensure main content doesn't create additional scroll containers */
  main {
    overflow: visible;
    height: auto;
  }

  /* Ensure CardGrid doesn't interfere with scrolling */
  .CardGrid {
    overflow: visible !important;
    height: auto !important;
  }
}

/* Base responsive setup */
html {
  font-size: 100%;
  height: auto;
}

main {
  margin-top: 180px;
  min-height: calc(100vh - 180px);
  position: relative;
  /* Ensure content extends beyond viewport for scrolling */
  padding-bottom: 200px;
}

/* Mobile main container adjustments */
@media screen and (max-width: 767px) {
  main {
    margin-top: 100px;
    min-height: auto;
    padding-bottom: 50px;
  }
}

body {
  background-color: #000;
  color: #fff;
  overflow-x: hidden;
  height: auto;
  min-height: 100vh;
}

/* Base responsive setup */
html {
  font-size: 100%;
  height: auto;
}

/* Force scrolling on desktop for html element */
@media screen and (min-width: 768px) {
  html {
    overflow-y: auto !important;
  }

  body {
    overflow-y: hidden !important;
  }
}

/* Ensure mobile scrolling works - fix double scroll issue */
@media screen and (max-width: 767px) {
  html {
    overflow: hidden;
    height: 100%;
  }

  body {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  /* Ensure main content doesn't create additional scroll containers */
  main {
    overflow: visible;
    height: auto;
  }

  /* Ensure CardGrid doesn't interfere with scrolling */
  .CardGrid {
    overflow: visible !important;
    height: auto !important;
  }
}

/* Fix the header to the top */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: #000;
  /* match body bg or set your desired color */
}

/* No reviews message styling */
.no-reviews-message {
  display: none;
  padding: 20px;
  text-align: center;
  font-size: 40px;
  color: #fff;
  margin: 20px auto;
  width: 80%;
  max-width: 600px;
  border: 2px solid #fff;
  background-color: transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.no-reviews-message.active {
  display: block;
  opacity: 1;
}

/* Review loading animation */
.review-loading-container {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
  margin-top: 30px;
}

.review-loading-container.active {
  display: flex;
  opacity: 1;
}

.review-loading-container .loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid #333;
  border-top: 3px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.review-loading-container .loading-text {
  margin-top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 1;
  letter-spacing: 2px;
}

/* Navigation bar styles */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
}

.SearchIconNavBar {
  width: 25px;
}

.nav-links,
.nav-actions {
  display: flex;
  gap: 20px;
  width: 220px;
}

hr {
  height: 40px;
  line-height: 20px;
  border: 1px solid white;
  transform: translate(0%, +35%);
}

.nav-link {
  color: #fff;
  text-decoration: none;
  font-size: 40px;
  letter-spacing: 1px;
  transition: opacity 0.3s;
  white-space: nowrap;
  display: inline-block;
}

@media (hover: hover) {


  .nav-link:hover {
    opacity: 0.7;
  }


}

.logo {
  font-size: 70px;
  font-weight: 500;
  line-height: 70px;
  letter-spacing: 1px;
  pointer-events: none;
}

.logo-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.browse-link {
  color: #fff;
  text-decoration: none;
  font-size: 40px;
  letter-spacing: 1px;
  transition: opacity 0.3s;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

@media (hover: hover) {


  .browse-link:hover {
    opacity: 0.7;
  }


}

.StoreInstaIcon {
  color: #000;
  font-size: 30px;
  text-decoration: none;
  transition: all 0.3s ease;
  height: 40px;
  width: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  background-color: transparent;
}

@media (hover: hover) {


  .StoreInstaIcon:hover {
    transform: scale(1.2);
  }


}

.Header2 {
  width: 100%;
  z-index: 100;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  margin-top: 20px;
}

.Header2Content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px;
  max-width: 1600px;
  font-size: 40px;
  line-height: 0.8;
  font-weight: bold;
  height: 50px;
  color: black;
  background-color: white;
}

.StoreRating {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Temporarily removed rating icon styles */
/*
.StarIcon {
  width: 25px;
}
*/

.StoreImage {
  position: absolute;
  transform: translate(0%, -30%);
  border-radius: 50%;
  width: 150px;
  height: 150px;
  object-fit: cover;
}

/* ─── Review ─────────────────────────────────────────── */

/* Main content grid - add top margin so it sits below fixed header */
.review-section {
  width: 100%;
  padding: 20px 0;
  overflow: hidden;
  position: relative;
}

.review-container {
  display: flex;
  gap: 60px;
  justify-content: center;
  padding: 0 10px;
  transition: transform 0.5s ease;
}

.review-container.animate {
  animation: scroll-left 30s linear infinite;
  justify-content: flex-start;
  width: 3000px;
  /* Ensure container fits all items */
}

@media (hover: hover) {


  .review-container.animate:hover {
    animation-play-state: paused;
  }


}

@keyframes scroll-left {
  0% {
    transform: translateX(2%);
    /* Start from 2% of screen width */
  }

  100% {
    transform: translateX(calc(-100% + 2%));
    /* End position adjusted for seamless loop */
  }
}

.review-card {
  background-color: transparent;
  min-width: 280px;
  max-width: 300px;
  width: 300px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 320px;
}

.review-card2 {
  border: 2px solid #fff;
  border-radius: 15px;
  padding: 0px 10px;
  display: flex;
  flex-direction: column;
  background-color: #000;
  height: 100%;
  margin: 0;
  padding-top: 10px;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.review-user-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.review-stars {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2px;
  height: 100%;
  width: 100%;
}

.star-icon {
  width: 25px;
  height: 25px;
  filter: brightness(0) saturate(100%) invert(85%) sepia(94%) saturate(1453%) hue-rotate(359deg) brightness(104%) contrast(103%);
}

.star-icon-empty {
  width: 25px;
  height: 25px;
  filter: brightness(0) saturate(100%) invert(100%);
}

.review-number {
  width: 30px;
  height: 30px;
  margin: 10px 0px;
}

.review-text {
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  line-height: 0.8;
  margin-bottom: auto;
  font-family: 'Chathura', sans-serif;
  flex-grow: 1;
  padding: 5px 0;
}

.review-author {
  margin-top: auto;
  padding: 5px 20px;
  border-radius: 0px 15px 0px 0px;
  margin: 0px;
  position: relative;
  background-color: #000;
  width: fit-content;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  margin: 0;
}

.AuthorContainer {
  display: flex;
  flex-direction: row;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0;
  margin: 0;
  border: none;
}

.GapContainer {
  display: none;
}

.author-name {
  font-size: 30px;
  line-height: 0.8;
  font-weight: bold;
  color: #fff;
  font-family: 'Chathura', sans-serif;
  z-index: 100000;
}

.review-date {
  font-size: 20px;
  line-height: 0.8;
  font-weight: bold;
  color: #999;
  font-family: 'Chathura', sans-serif;
  box-shadow:
    -7px -2px 0 25px black;
  border-radius: 4px;
}

/* ─── Filter Dropdown Styles ─────────────────────────────────────────── */

.filter-dropdown {
  width: 80%;
  margin: 30px auto 20px auto;
  position: relative;
  z-index: 50;
  display: flex;
  justify-content: center;
  transition: all 0.3s ease;
}

.filter-dropdown.open {
  margin: 30px auto 200px auto;
}

#filterToggle {
  background: none;
  border: none;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  border-top: 1px solid #fff;
  border-bottom: none;
  color: #fff;
  padding: 5px 40px;
  font-size: 35px;
  font-weight: bold;
  line-height: 0.8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: black;
  z-index: 50;
  transition: all 0.3s ease;
  margin-top: 60px;
}

.filter-dropdown #filterToggle {
  border: none;
}

.filter-dropdown.open #filterToggle {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  border-top: 1px solid #fff;
  box-shadow: 0 4px 0px 0px black;
}

#filterToggle .chevron {
  font-size: 30px;
  line-height: 0.1;
  transition: transform 0.2s;
  display: inline-block;
  transition: transform 0.3s ease;
}

.filter-dropdown.open #filterToggle .chevron {
  transform: rotate(180deg);
}

.filter-panel {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  border: 1px solid #fff;
  padding: 20px;
  overflow: hidden;
  z-index: 49;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    max-height 0.5s ease,
    opacity 0.5s step-start,
    visibility 0.5s ease;
  background-color: black;
}

.filter-panel.open {
  max-height: 200px;
  opacity: 1;
  visibility: visible;
}

/* Example inner layout: adjust as needed */
.filter-cats {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  margin-bottom: 50px;
  overflow-x: auto;
  white-space: nowrap;
  flex-wrap: nowrap;
  padding: 5px 0;
  -ms-overflow-style: none;
  /* Hide scrollbar in IE and Edge */
  scrollbar-width: none;
  /* Hide scrollbar in Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.filter-cats::-webkit-scrollbar {
  display: none;
}

.HrFilter {
  transform: translate(0%, 15%);
  height: 30px;
}

.filter-cats a {
  color: #fff;
  text-decoration: none;
  font-size: 30px;
  line-height: 1;
  padding: 2px 10px;
  border-radius: 0px !important;
  transition: background 0.2s;
  flex-shrink: 0;
}

.filter-cats a.active {
  /* background: rgba(255, 255, 255, 0.2); */
  font-weight: bold;
  border-bottom: 2px solid #fff;
}

/* Discount Filter Button */
.discount-filter-btn {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.3) 0%, rgba(32, 201, 151, 0.3) 100%);
  color: #fff;
  font-size: 25px;
  font-weight: 900;
  padding: 4px 12px;
  border-radius: 8px;
  letter-spacing: 1px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  line-height: 1;
}

/* Only apply hover effect on devices that support hover (desktop) */
@media (hover: hover) and (pointer: fine) {
  .discount-filter-btn:hover {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.5) 0%, rgba(32, 201, 151, 0.5) 100%);
    transform: translateY(-1px);
  }
}

.discount-filter-btn.active {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  border-color: #fff;
}

.discount-icon {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.filter-options {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  /* Changed from center to flex-start */
  gap: 30px;
}

.filter-options .price-range,
.filter-options .sizes {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.filter-options .sizes {
  flex-wrap: wrap;
}

.filter-options label {
  font-size: 30px;
  font-weight: bold;
  line-height: 0.8;
  padding: 0px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* simple size buttons */
.filter-options .sizes button {
  background: none;
  border: none;
  color: #fff;
  width: 40px;
  height: 40px;
  padding: 0;
  line-height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-options .sizes button.active {
  background: rgba(255, 255, 255, 0.2);
}


/* Main content grid - add top margin so it sits below fixed header */
.CardGrid {
  width: 90%;
  max-width: 2000px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px auto 100px;
  /* Smooth transitions during resize events */
  transition: opacity 0.3s ease, visibility 0.3s ease;
  /* Force hardware acceleration for better performance */
  transform: translateZ(0);
  will-change: opacity;
}

/* Mobile: Use flexbox layout for stable 2-column layout */
@media screen and (max-width: 479px) {
  .CardGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* Disable masonry positioning */
    position: relative !important;
    /* Ensure equal heights */
    align-items: stretch;
    gap: 8px;
    padding: 0 8px;
    /* Prevent overflow issues */
    overflow: visible;
    height: auto;
    margin: 10px auto 50px;
  }

  .CardGrid .grid-item {
    /* Force static positioning on mobile to override masonry positioning */
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    /* Ensure 2-column layout with equal heights */
    display: flex;
    flex-direction: column;
    /* Fix for iPhone display issues */
    flex: 0 0 calc(50% - 4px);
    max-width: calc(50% - 4px);
    /* Ensure consistent spacing */
    margin-bottom: 8px;
    /* Ensure items don't grow larger than intended */
    width: calc(50% - 4px);
    /* Prevent any flexbox growth */
    flex-grow: 0;
    flex-shrink: 0;
    /* Prevent any scroll issues */
    overflow: visible;
    height: auto;
  }

  .CardGrid .grid-item a {
    /* Make the link take full height for equal heights */
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Fix for Safari rendering issues */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .CardGrid .grid-item .product-image-container {
    /* Ensure image container grows to fill available space */
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Set a minimum aspect ratio for consistent image display */
    min-height: 250px;
    aspect-ratio: 3/4;
    /* Fix for iOS Safari aspect ratio issues */
    position: relative;
    overflow: hidden;
    /* Ensure proper layering on iOS */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .CardGrid .grid-item .product-image {
    /* Make images fill the entire container */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    /* Fix for iOS Safari image rendering */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Ensure smooth rendering on iOS */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .CardGrid .grid-item .product-image:first-child {
    /* Override the relative positioning for first image on mobile */
    position: absolute !important;
    /* Ensure proper z-index on iOS - must be above shimmer (z-index: 1) */
    z-index: 3 !important;
  }

  /* Force image visibility on mobile */
  .CardGrid .grid-item .product-image.active {
    opacity: 1 !important;
    z-index: 3 !important;
    display: block !important;
  }

  /* Ensure image container has proper height on mobile */
  .CardGrid .grid-item .product-image-container {
    min-height: 250px !important;
    height: auto !important;
  }

  /* Disable shimmer overlay on mobile to prevent blocking images */
  .CardGrid .grid-item .product-image-container::before {
    display: none !important;
  }
}

/* iPhone specific fixes for Safari rendering issues */
@supports (-webkit-appearance: none) {
  @media screen and (max-width: 479px) {
    .CardGrid .grid-item {
      /* Additional fix for iPhone layout issues */
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    .CardGrid .grid-item .product-image-container {
      /* Keep the aspect ratio but don't override height/padding */
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      /* Keep the min-height and aspect-ratio for better compatibility */
      min-height: 250px;
      aspect-ratio: 3/4;
    }

    .CardGrid .grid-item .product-info {
      /* Ensure product info displays correctly on iOS */
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
  }
}

/* CSS Grid Fallback - When Masonry fails to initialize */
.CardGrid.css-grid-fallback {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  padding: 20px !important;
  width: 95% !important;
  max-width: 2000px !important;
  margin: 20px auto 100px !important;
}

.CardGrid.css-grid-fallback .grid-item {
  position: static !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  padding: 0 !important;
  opacity: 1 !important;
  animation: none !important;
}

/* Tablet fallback */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .CardGrid.css-grid-fallback {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
  }
}

/* Mobile fallback */
@media screen and (max-width: 479px) {
  .CardGrid.css-grid-fallback {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }
}

.grid-item {
  width: 25%;
  padding: 30px;
  z-index: 0;
  opacity: 0;
  transform: translateY(50px) scale(0.8);
  animation-fill-mode: forwards;
  /* Force hardware acceleration for better performance */
  will-change: transform, opacity;
}

.grid-item a {
  display: block;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {


  .grid-item a:hover {
    /* Avoid scaling the anchor itself (changes bounding box and causes pointer flicker).
       Apply visual emphasis via box-shadow and scale the inner image instead. */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }


}

.grid-item.animate-in {
  animation: slideInFromBottom 0.6s ease-out forwards;
  opacity: 1 !important;
}

/* Animation keyframes for smooth product appearance */
@keyframes slideInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Faster animations on mobile for better performance */
@media screen and (max-width: 767px) {
  .grid-item.animate-in {
    animation: slideInFromBottom 0.4s ease-out forwards;
  }

  /* On mobile, prevent re-animation issues by applying simpler animations */
  .grid-item {
    transform: translateY(0) scale(1);
    transition: opacity 0.4s ease-out;
  }
}

@media screen and (max-width: 400px) {
  .grid-item.animate-in {
    animation: slideInFromBottom 0.3s ease-out forwards;
  }
}

.grid-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  transition: opacity 0.5s ease;
}

.product-image-container {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.product-discount-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: #fff;
  font-size: 25px;
  font-weight: 900;
  padding: 4px 12px;
  border-radius: 8px;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
  z-index: 10;
  animation: pulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
  }

  50% {
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.7);
  }
}

.product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  transition: opacity 0.5s ease;
}

.product-image.active {
  opacity: 1;
  z-index: 3;
}

.product-image:first-child {
  position: relative;
}

.sold-item {
  position: relative;
}

.sold-item .product-image-container img {
  opacity: 1;
  filter: brightness(0.3);
}

.sold-label {
  position: absolute;
  top: 40px;
  left: 40px;
  background-color: transparent;
  border: 5px solid #FF0000;
  color: #FF0000;
  padding: 5px 20px;
  font-size: 20px;
  font-family: Dela Gothic One, sans-serif;
  border-radius: 0px;
  z-index: 5;
}

/* Product info overlay styles */
.product-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0) 100%);
  color: white;
  padding: 10px 15px;
  z-index: 4;
  opacity: 1;
  transition: opacity 0.3s ease, background 0.3s ease;
  pointer-events: none;
  /* Allow hover events to pass through to elements underneath */
}

.product-title {
  font-size: 35px;
  font-weight: bold;
  line-height: 1;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-price-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

.product-compare-price {
  font-size: 30px;
  font-weight: normal;
  color: #fff;
  text-decoration: none;
  transform: rotate(3deg);
  display: block;
  margin-top: 0px;
  margin-bottom: -20px;
  line-height: 1;
  position: relative;
}

.product-compare-price::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background-color: #ff0000;
  transform: translateY(-50%);
}

.product-price {
  font-size: 30px;
  font-weight: normal;
  margin-top: 0px;
}

/* Add to cart button styles */
.add-to-cart-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  pointer-events: auto;
  /* Ensure this button still captures clicks even when over elements with pointer-events: none */
}

@media (hover: hover) {


  .add-to-cart-btn:hover {
    background-color: rgba(255, 255, 255, 0.9);
  }


}

.add-to-cart-btn:hover img {
  filter: invert(1);
}

.add-to-cart-btn.in-cart {
  background-color: rgba(76, 175, 80, 0.9);
  border-color: #4CAF50;
}

.add-to-cart-btn.in-cart img {
  filter: brightness(0) invert(1);
}

.add-to-cart-btn .cart-icon {
  width: 20px;
  height: 20px;
}

.cart-success-indicator {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #4CAF50;
  color: white;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  border: 2px solid white;
}

.cart-remove-indicator {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #ff5722;
  color: white;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  border: 2px solid white;
  animation: fade-in-out 2s forwards;
}

@keyframes fade-in-out {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  20% {
    opacity: 1;
    transform: scale(1.2);
  }

  40% {
    transform: scale(1);
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.CardGrid::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
}

.CardGrid,
body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Double-ended price range slider styles */
.slider-container {
  position: relative;
  width: 30vw;
  max-width: 700px;
  height: 60px;
  margin: 0 auto;
  padding: 0 10px;
}

.slider-track {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  height: 1px;
  background: #333;
  /* Darker background for inactive part */
  z-index: 1;
  width: 100%;
}

.slider-range {
  position: absolute;
  top: 30px;
  height: 1px;
  background: #fff;
  /* Highlight the active range */
  z-index: 2;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1px;
  background: transparent;
  outline: none;
  margin: 0;
  position: absolute;
  top: 30px;
  pointer-events: auto;
  z-index: 2;
}

/* Make the min slider more accessible by raising its z-index */
#minPrice {
  z-index: 3;
}

#maxPrice {
  z-index: 2;
}

/* Use the DownArrow.svg icon from your Icons folder for slider handles */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 21px;
  height: 30px;
  border-radius: 50%;
  background-color: #000;
  background-image: url('../Icons/FilterPrice.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  cursor: pointer;
  z-index: 5;
}

.slider::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #000;
  background-image: url('../Icons/FilterPrice.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px;
  cursor: pointer;
}

.slider::-ms-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #000;
  background-image: url('../Icons/FilterPrice.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px;
  cursor: pointer;
}

.slider-values {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 35px;
  color: #fff;
  font-size: 24px;
  font-weight: normal;
}

.slider-value {
  font-family: 'Chathura', sans-serif;
  font-size: 28px;
}

/* Loading animation styles */
.loading-container {
  position: relative;
  width: 100%;
  margin: 40px auto;
  z-index: 1000;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loading-container.active {
  display: flex;
}

.loading-text {
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 1;
  letter-spacing: 2px;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid #333;
  border-top: 3px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Hide grid while loading and ensure smooth transitions */
.CardGrid.loading {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show grid with smooth transition when loaded */
.CardGrid:not(.loading) {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Class for when grid is being resized/reorganized */
.CardGrid.resizing {
  pointer-events: none;
  /* Prevent interactions during resize */
}

.CardGrid.resizing .grid-item {
  transition: all 0.1s ease;
  /* Faster transitions during resize */
}

@media (hover: hover) {


  .CardGrid.resizing .grid-item:hover {
    transition: all 0.3s ease !important;
    /* Ensure hover transitions are not affected by resize optimization */
  }


}

.no-products-message {
  position: relative;
  width: 80%;
  margin: 20px auto;
  color: #fff;
  font-size: 40px;
  text-align: center;
  letter-spacing: 2px;
  line-height: 1.2;
  z-index: 40;
  background-color: rgba(0, 0, 0, 0.9);
  padding: 20px 40px;
  display: none;
  transition: margin 0.3s ease;
}

.no-products-message.active {
  display: block;
}

.no-products-message.filter-open {
  margin-top: 280px;
}

/* Adjust loading container position when filter is open */
.filter-dropdown.open~.loading-container.active {
  margin-top: 180px;
}

/* Extended Footer Styles */
.extended-footer {
  width: 100vw;
  background: #000;
  color: #fff;
  padding: 50px 0 100px 0;
  margin: 0;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
  /* Ensure footer adds enough height for scrolling */
  min-height: 400px;
}

/* Hide footer when loading is active */
.loading-container.active~.extended-footer,
body:has(.loading-container.active) .extended-footer,
body:has(.no-products-message.active) .extended-footer {
  display: none !important;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 90vw;
  margin: 0 auto;
  padding-bottom: 40px;
}

.footer-left {
  flex: 1;
  min-width: 300px;
}

.footer-logo {
  font-size: 70px;
  font-weight: bold;
  line-height: 0.8;
  margin-bottom: 30px;
  letter-spacing: 2px;
}

.footer-links {
  list-style: none;
  margin-bottom: 30px;
}

.footer-links li {
  font-size: 40px;
  font-weight: bold;
  line-height: 0.8;
  margin-bottom: 10px;
  padding-left: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) {


  .footer-links li:hover {
    opacity: 0.7;
  }


}

.footer-copyright {
  font-size: 25px;
  margin-top: 10px;
  padding-left: 10px;
  line-height: 0.8;
  font-weight: bold;
  opacity: 0.7;
}

.footer-right {
  flex: 2;
  min-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.footer-join-title {
  font-size: 40px;
  line-height: 0.8;
  padding-bottom: 20px;
  margin-top: 30px;
}

.footer-join-form {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-inputs {
  display: flex;
  flex-direction: row;
}

.footer-email {
  font-size: 40px;
  line-height: 0.8;
  font-weight: bold;
  padding: 0px 30px;
  border-radius: 50px;
  border: none;
  outline: none;
  margin-right: 30px;
  width: 350px;
  background: #fff;
  color: #000;
}

.footer-subscribe {
  font-size: 40px;
  line-height: 0.8;
  font-weight: bold;
  padding: 15px 30px;
  border-radius: 0;
  border: 1px solid #fff;
  background: #000;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

@media (hover: hover) {


  .footer-subscribe:hover {
    background: #fff;
    color: #000;
  }


}

.footer-icons {
  display: flex;
  gap: 60px;
  margin-top: 10px;
}

.footer-icon-circle {
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #000;
  transition: all 0.3s ease;
  cursor: pointer;
}

@media (hover: hover) {


  .footer-icon-circle:hover {
    scale: 1.2;
    color: white;
    background-color: #000;
    border: 1px solid #fff;
  }


}

.footer-divider {
  border: none;
  border-top: 2px solid #fff;
  margin: 0 4vw 0 4vw;
  opacity: 0.7;
}

.footer-icons {
  display: flex;
  flex-direction: row;
}

/* Mobile Menu Styles */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  cursor: pointer;
  z-index: 130;
  position: relative;
}

.mobile-menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background: white;
  transition: all 0.3s ease;
}

.mobile-menu-toggle span:first-child {
  transform-origin: top left;
}

.mobile-menu-toggle span:nth-child(2) {
  transform-origin: center;
}

.mobile-menu-toggle span:last-child {
  transform-origin: bottom left;
}

.mobile-menu-toggle.active span:first-child {
  transform: rotate(45deg);
  width: 100%;
  position: relative;
  top: -1px;
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:last-child {
  transform: rotate(-45deg);
  width: 100%;
  position: relative;
  bottom: -1px;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 120;
  padding: 80px 30px 30px;
  transition: left 0.3s ease;
  overflow-y: auto;
}

.mobile-drawer.active {
  left: 0;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.mobile-nav-list {
  list-style: none;
  padding: 0;
}

.mobile-nav-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-link {
  color: white;
  font-size: 40px;
  font-weight: bold;
  line-height: 0.8;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 20px 0;
  transition: opacity 0.2s ease;
}

@media (hover: hover) {


  .mobile-nav-link:hover {
    opacity: 0.7;
  }


}

.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ====== RESPONSIVE STYLES ====== */

/* Additional responsive styles for product info and cart button */
@media screen and (max-width: 1300px) {
  .product-title {
    font-size: 30px;
  }

  .product-price {
    font-size: 25px;
  }

  .product-compare-price {
    font-size: 25px;
    margin-bottom: -15px;
  }

  .add-to-cart-btn {
    width: 35px;
    height: 35px;
  }

  .product-discount-badge {
    font-size: 20px;
    padding: 3px 10px;
  }

  .review-container {
    gap: 30px;
  }
}

@media screen and (max-width: 767px) {
  .product-info {
    padding: 8px 10px;
  }

  .review-container {
    padding: 0 20px;
  }

  .review-card {
    height: 280px;
    min-width: 200px;
    max-width: 250px;
  }

  .product-title {
    font-size: 28px;
  }

  .product-price {
    font-size: 22px;
    margin-top: 2px;
  }

  .product-compare-price {
    font-size: 22px;
    margin-bottom: -10px;
  }

  .add-to-cart-btn {
    width: 32px;
    height: 32px;
    top: 10px;
    right: 10px;
  }

  .add-to-cart-btn .cart-icon {
    width: 16px;
    height: 16px;
  }

  .product-discount-badge {
    font-size: 20px;
    padding: 3px 10px;
    top: 10px;
    left: 10px;
  }
}

@media screen and (max-width: 479px) {
  .product-title {
    font-size: 25px;
  }

  .product-price {
    font-size: 20px;
  }

  .product-compare-price {
    font-size: 20px;
  }

  .add-to-cart-btn {
    width: 30px;
    height: 30px;
    top: 8px;
    right: 8px;
  }

  .product-discount-badge {
    font-size: 16px;
    padding: 2px 8px;
    top: 8px;
    left: 8px;
  }
}

@media screen and (max-width: 400px) {
  .product-info {
    padding: 5px 8px;
  }

  .product-title {
    font-size: 22px;
  }

  .product-price {
    font-size: 18px;
  }

  .product-compare-price {
    font-size: 18px;
  }

  .product-discount-badge {
    font-size: 16px;
    padding: 2px 6px;
    top: 8px;
    left: 8px;
  }
}

/* Tablet Styles (768px - 1023px) */
@media screen and (max-width: 1300px) {

  /* Navigation adjustments */
  .navbar {
    padding: 20px;
  }

  .nav-links,
  .nav-actions {
    gap: 10px;
    width: auto;
  }

  .nav-link {
    font-size: 30px;
  }

  hr {
    height: 30px;
  }

  /* Main content */
  .logo {
    font-size: 60px;
    line-height: 60px;
  }

  /* Filter adjustments */
  #filterToggle {
    font-size: 30px;
    margin-top: 50px;
  }

  .filter-cats a {
    font-size: 28px;
  }

  .filter-options label {
    font-size: 28px;
  }

  .filter-options .sizes button {
    width: 35px;
    height: 35px;
    font-size: 28px;
  }

  .slider-container {
    width: 40vw;
  }

  /* Grid layout */
  .grid-item {
    width: 33.333%;
    /* 3 items per row */
    padding: 15px;
    /* Maintain animation properties */
    opacity: 0;
    transform: translateY(50px) scale(0.8);
    animation-fill-mode: forwards;
  }

  .CardGrid {
    width: 90%;
  }

  .footer-content {
    flex-direction: column;
  }

  .footer-right,
  .footer-left {
    width: 100%;
    min-width: unset;
    align-items: flex-start;
  }

  .footer-join-form {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-icons {
    margin-top: 30px;
  }

  .footer-email,
  .footer-subscribe {
    font-size: 30px;
    height: 50px;
    padding: 0px 20px;
  }
}

/* Mobile Styles for very small screens (up to 479px) */
@media screen and (max-width: 479px) {

  /* Grid layout specifically for mobile phones */
  .CardGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* Disable masonry positioning */
    position: relative !important;
    /* Ensure equal heights */
    align-items: stretch;
    gap: 8px;
    width: 100%;
    padding: 0 8px;
    margin: 30px auto 0;
  }

  .grid-item {
    /* Force static positioning on mobile to override masonry positioning */
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    /* Ensure 2-column layout with equal heights */
    display: flex;
    flex-direction: column;
    /* Fix for iPhone display issues */
    flex: 0 0 calc(50% - 4px);
    max-width: calc(50% - 4px);
    width: calc(50% - 4px);
    /* Ensure consistent spacing */
    margin-bottom: 8px;
    padding: 2px;
    /* Prevent flex growth */
    flex-grow: 0;
    flex-shrink: 0;
  }

  .grid-item a {
    /* Make the link take full height for equal heights */
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Fix for Safari rendering issues */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .grid-item .product-image-container {
    /* Ensure image container grows to fill available space */
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Set a minimum aspect ratio for consistent image display */
    min-height: 250px;
    aspect-ratio: 3/4;
    /* Fix for iOS Safari aspect ratio issues */
    position: relative;
    overflow: hidden;
    /* Ensure proper layering on iOS */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .grid-item .product-image {
    /* Make images fill the entire container */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    /* Fix for iOS Safari image rendering */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Ensure smooth rendering on iOS */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .grid-item .product-image:first-child {
    /* Override the relative positioning for first image on mobile */
    position: absolute !important;
    /* Ensure proper z-index on iOS - must be above shimmer (z-index: 1) */
    z-index: 3 !important;
  }

  /* Force image visibility on mobile */
  .grid-item .product-image.active {
    opacity: 1 !important;
    z-index: 3 !important;
    display: block !important;
  }
}

/* Mobile Styles (up to 767px) */
@media screen and (max-width: 767px) {

  /* Navigation adjustments */
  .navbar {
    padding: 30px 20px;
    justify-content: space-between;
  }

  /* Error message adjustments */
  .no-products-message,
  .no-reviews-message {
    font-size: 30px;
    max-width: 90%;
    padding: 15px 30px;
  }

  .no-products-message.filter-open {
    margin-top: 320px;
  }

  .filter-dropdown.open~.loading-container.active {
    margin-top: 220px;
  }

  /* Review loading text adjustment */
  .review-loading-container {
    margin-top: 30px;
  }

  .review-loading-container .loading-text,
  .loading-text {
    font-size: 30px;
  }

  /* Show mobile menu toggle */
  .mobile-menu-toggle {
    display: flex;
  }

  /* Hide desktop navigation */
  .nav-links,
  .nav-actions {
    display: none;
  }

  .nav-link {
    font-size: 24px;
  }

  .logo {
    font-size: 60px;
    line-height: 50px;
  }

  /* Main content */
  .filter-dropdown {
    width: 95%;
    margin: 80px auto 0px auto;
    /* Reduced top margin in mobile view */
  }

  .filter-dropdown.open {
    margin: 80px auto 250px auto;
    /* Increased bottom margin when filter is open */
  }

  #filterToggle {
    font-size: 26px;
    padding: 5px 20px;
    margin-top: 120px;
  }

  .filter-panel.open {
    max-height: 300px;
    /* Increase for mobile to fit content better */
    overflow-y: auto;
  }

  .filter-cats {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-bottom: 30px;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
  }

  .filter-options {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .filter-options .price-range {
    width: 100%;
    justify-content: center;
    order: -1;
    /* Make price range always appear first */
  }

  .filter-options .sizes {
    width: 100%;
    justify-content: center;
  }

  .slider-container {
    width: 85vw;
  }

  .filter-options .sizes button {
    width: 30px;
    height: 30px;
    font-size: 24px;
  }

  /* Grid layout */
  .CardGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding: 0 8px;
    margin: 30px auto 0;
    /* Additional top margin to prevent overlap with filter panel */
    /* Ensure equal heights for mobile */
    align-items: stretch;
    gap: 8px;
  }

  .grid-item {
    /* Force 2-column layout with proper flex properties */
    flex: 0 0 calc(50% - 4px);
    max-width: calc(50% - 4px);
    width: calc(50% - 4px);
    /* Always 2 items per row minimum */
    padding: 2px;
    /* Maintain animation properties */
    opacity: 0;
    transform: translateY(50px) scale(0.8);
    animation-fill-mode: forwards;
    /* Ensure 2-column layout with equal heights */
    display: flex;
    flex-direction: column;
    /* Prevent flex growth */
    flex-grow: 0;
    flex-shrink: 0;
    margin-bottom: 8px;
    /* Force static positioning on mobile to override masonry positioning */
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
  }

  .grid-item a {
    /* Make the link take full height for equal heights */
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Fix for Safari rendering issues */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .grid-item .product-image-container {
    /* Ensure image container grows to fill available space */
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Set a minimum aspect ratio for consistent image display */
    min-height: 250px;
    aspect-ratio: 3/4;
    /* Fix for iOS Safari aspect ratio issues */
    position: relative;
    overflow: hidden;
    /* Ensure proper layering on iOS */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .grid-item .product-image {
    /* Make images fill the entire container */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    /* Fix for iOS Safari image rendering */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Ensure smooth rendering on iOS */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .grid-item .product-image:first-child {
    /* Override the relative positioning for first image on mobile */
    position: absolute !important;
    /* Ensure proper z-index on iOS - must be above shimmer (z-index: 1) */
    z-index: 3 !important;
  }

  /* Force image visibility on mobile */
  .grid-item .product-image.active {
    opacity: 1 !important;
    z-index: 3 !important;
    display: block !important;
  }

  .footer-logo {
    font-size: 50px;
  }

  .footer-links li {
    font-size: 30px;
  }

  .footer-join-title {
    font-size: 30px;
  }

  .footer-email,
  .footer-subscribe {
    font-size: 30px;
    height: 50px;
    padding: 0px 20px;
  }

  .footer-email {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }

  .footer-inputs {
    flex-direction: column;
    width: 100%;
  }

  .footer-subscribe {
    width: 100%;
  }

  .footer-icons {
    justify-content: center;
    width: 100%;
  }
}

/* Small Mobile Styles (up to 479px) */
@media screen and (max-width: 479px) {

  .StoreImage {
    position: absolute;
    transform: translate(0%, 0%);
    border-radius: 50%;
    width: 90px;
    height: 90px;
    object-fit: cover;
  }

  .logo {
    font-size: 50px;
    line-height: 40px;
  }

  .nav-link {
    font-size: 22px;
  }

  /* Filter adjustments */
  #filterToggle {
    font-size: 24px;
    padding: 5px 15px;
    margin-top: 100px;
  }

  .filter-cats a {
    font-size: 24px;
  }

  .filter-options label {
    font-size: 24px;
  }

  /* Grid layout */
  .grid-item {
    width: 50%;
    /* Keep 2 items per row even on smallest screens */
    padding: 5px;
    /* Maintain animation properties */
    opacity: 0;
    transform: translateY(50px) scale(0.8);
    animation-fill-mode: forwards;
    /* Ensure 2-column layout with equal heights */
    display: flex;
    flex-direction: column;
  }

  .grid-item a {
    /* Make the link take full height for equal heights */
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .grid-item .product-image-container {
    /* Ensure image container grows to fill available space */
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Set a minimum aspect ratio for consistent image display */
    min-height: 250px;
    aspect-ratio: 3/4;
  }

  .grid-item .product-image {
    /* Make images fill the entire container */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
  }

  .grid-item .product-image:first-child {
    /* Override the relative positioning for first image on mobile */
    position: absolute !important;
    /* Ensure proper z-index on iOS - must be above shimmer (z-index: 1) */
    z-index: 3 !important;
  }

  /* Force image visibility on mobile */
  .grid-item .product-image.active {
    opacity: 1 !important;
    z-index: 3 !important;
    display: block !important;
  }

  .footer-logo {
    font-size: 40px;
  }

  .footer-links li {
    font-size: 24px;
  }

  .review-text {
    font-size: 24px;
  }

  .footer-join-title {
    font-size: 24px;
  }

  .footer-email,
  .footer-subscribe {
    font-size: 25px;
    height: 40px;
    padding: 0px 20px;
  }

  .footer-icon-circle {
    width: 50px;
    height: 50px;
    font-size: 30px;
  }

  /* Smaller error message for very small devices */
  .no-products-message,
  .no-reviews-message {
    font-size: 25px;
    padding: 12px 20px;
    max-width: 95%;
  }

  .no-products-message.filter-open {
    margin-top: 240px;
  }

  .filter-dropdown.open~.loading-container.active {
    margin-top: 190px;
  }

  /* Review loading text adjustment for small devices */
  .review-loading-container {
    margin-top: 30px;
  }

  .review-loading-container .loading-text,
  .loading-text {
    font-size: 25px;
  }
}

/* Very Small Mobile Styles (up to 400px) */
@media screen and (max-width: 400px) {

  .filter-cats {
    gap: 10px;
  }

  .filter-cats a {
    font-size: 20px;
    padding: 5px 12px;
    min-width: 60px;
  }

  /* Additional fixes for very small iPhones */
  .CardGrid .grid-item {
    /* Ensure consistent spacing on small screens */
    flex: 0 0 calc(50% - 3px);
    max-width: calc(50% - 3px);
    padding: 3px;
  }

  .CardGrid .grid-item .product-image-container {
    /* Adjust aspect ratio for very small screens */
    min-height: 200px;
  }
}

/* Specific fix for screens 376px-400px to ensure 2-column layout */
@media screen and (min-width: 376px) and (max-width: 400px) {
  .CardGrid {
    gap: 6px;
    padding: 0 6px;
    /* Ensure proper space distribution */
    justify-content: space-between;
  }

  .CardGrid .grid-item {
    /* Force 2-column layout with proper sizing */
    flex: 0 0 calc(50% - 3px) !important;
    max-width: calc(50% - 3px) !important;
    width: calc(50% - 3px) !important;
    padding: 2px !important;
    margin-bottom: 6px;
    /* Prevent items from growing */
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }

  .CardGrid .grid-item .product-image-container {
    min-height: 210px;
  }
}

/* iPhone SE and similar small devices specific fixes */
@media screen and (max-width: 375px) and (-webkit-min-device-pixel-ratio: 2) {
  .CardGrid {
    /* Add additional gap for readability */
    gap: 8px;
    padding: 0 5px;
  }

  .CardGrid .grid-item {
    flex: 0 0 calc(50% - 4px);
    max-width: calc(50% - 4px);
  }

  .CardGrid .grid-item .product-image-container {
    /* Keep minimum height but don't override the container structure */
    min-height: 180px;
    /* Keep aspect ratio for better display */
    aspect-ratio: 3/4;
  }
}

/* iPhone specific fixes for Safari rendering issues */
@supports (-webkit-appearance: none) {
  @media screen and (max-width: 479px) {
    .CardGrid .grid-item {
      /* Additional fix for iPhone layout issues */
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    .CardGrid .grid-item .product-image-container {
      /* Keep the aspect ratio but don't override height/padding */
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      /* Keep the min-height and aspect-ratio for better compatibility */
      min-height: 250px;
      aspect-ratio: 3/4;
    }

    .CardGrid .grid-item .product-info {
      /* Ensure product info displays correctly on iOS */
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
  }
}

/* Complete the filter cats styling that was cut off */
@media screen and (max-width: 400px) {
  .filter-cats a {
    font-size: 22px;
    padding: 3px 8px;
    text-align: center;
  }

  .filter-options .sizes button {
    margin: 0 3px;
  }
}

/* Pagination Styles */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px auto;
  padding: 20px;
  width: 100%;
  max-width: 1200px;
  text-align: center;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.pagination-btn {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
  padding: 0 20px;
  cursor: pointer;
  font-family: 'Chathura', sans-serif;
  font-size: 30px;
  transition: all 0.3s ease;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.pagination-btn:hover:not(:disabled) {
  background-color: #fff;
  color: #000;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-numbers {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.pagination-number {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
  padding: 0;
  cursor: pointer;
  font-family: 'Chathura', sans-serif;
  font-size: 30px;
  transition: all 0.3s ease;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

@media (hover: hover) {


  .pagination-number:hover {
    background-color: #fff;
    color: #000;
  }


}

.pagination-number.active {
  background-color: #fff;
  color: #000;
}

.pagination-ellipsis {
  color: #fff;
  padding: 0;
  font-family: 'Chathura', sans-serif;
  font-size: 30px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Tablet view - maintain desktop styling */
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .pagination-btn {
    font-size: 30px;
    height: 50px;
  }

  .pagination-number {
    font-size: 30px;
    width: 50px;
    height: 50px;
  }

  .pagination-ellipsis {
    font-size: 30px;
    width: 50px;
    height: 50px;
  }
}

@media screen and (max-width: 768px) {
  .pagination-container {
    margin: 20px 0;
    padding: 10px;
  }

  /* Check if there's enough space, if not, use column layout */
  @media screen and (max-width: 480px) {
    .pagination {
      flex-direction: column;
      gap: 10px;
    }

    .pagination-numbers {
      order: 2;
      justify-content: center;
    }

    .pagination-btn:first-child {
      order: 1;
    }

    .pagination-btn:last-child {
      order: 3;
    }
  }

  .pagination {
    gap: 5px;
  }

  .pagination-btn {
    padding: 0 15px;
    font-size: 25px;
    height: 40px;
  }

  .pagination-number {
    padding: 0;
    font-size: 25px;
    width: 40px;
    height: 40px;
  }

  .pagination-ellipsis {
    padding: 0;
    font-size: 25px;
    width: 40px;
    height: 40px;
  }
}

/* Mobile styles for screens less than 500px */
@media screen and (max-width: 499px) {
  .Header2Content {
    padding: 0px 10px;
  }

  .StoreInstaIcon {
    margin-left: 0px;
  }
}

/* Skeleton placeholder for product images to improve perceived load */

.product-image-container {
  position: relative;
  background: #0f0f0f;
  overflow: hidden;
  min-height: 220px;
  /* reserve space so layout doesn't jump */
}

.product-image-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
  z-index: 1;
  /* Hide shimmer once image is loaded (active) */
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Hide loading shimmer when image is loaded */
.product-image-container:has(.product-image.active)::before,
.grid-item:has(.product-image.active) .product-image-container::before {
  opacity: 0;
  animation: none;
}

/* Disable the loading shimmer on touch devices to avoid infinite moving gradients.
   Show a static placeholder background instead to ensure the primary image is visible. */
@media (hover: none) and (pointer: coarse) {
  .product-image-container::before {
    animation: none !important;
    background: linear-gradient(180deg, #070707 0%, #0f0f0f 100%) !important;
    background-size: auto !important;
  }

  /* Also ensure any hover overlay doesn't run on touch devices */
  .product-image-container::after {
    animation: none !important;
    opacity: 0 !important;
    transform: none !important;
  }
}

/* Stack images on top of each other. Primary image has .active and is visible.
   Hover / secondary images are positioned identically but hidden until activated. */
.product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 500ms ease, transform 400ms cubic-bezier(.2, .8, .2, 1);
  z-index: 2;
}

.product-image.active {
  opacity: 1;
  z-index: 3;
}

.product-image.lazy-hover {
  opacity: 0;
  z-index: 1;
}

/* On hover, slightly scale the active image instead of scaling the anchor to avoid pointer flicker */
.grid-item a:hover .product-image.active {
  transform: scale(1.02);
}

/* Use the image container as the hover target (keeps bounding box stable) */
.grid-item .product-image-container {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

/* On hover, don't scale the container (keeps hit area stable). Only scale the visible image. */

/* Hover shine effect: animated stripe that moves left->right */
.product-image-container::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.06) 55%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transform: translateX(-100%);
}

@keyframes hover-shine {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  60% {
    transform: translateX(100%);
    opacity: 1;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@media (hover: hover) {
  .grid-item .product-image-container:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }

  .grid-item .product-image-container:hover::after {
    animation: hover-shine 900ms linear 1;
    opacity: 1;
  }

  /* Scale only the active image on hover to match Browse */
  .grid-item .product-image-container:hover .product-image.active {
    transform: scale(1.05);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* CRITICAL FIX: Force image visibility on all mobile devices - MUST BE LAST */
@media screen and (max-width: 767px) {
  .product-image.active,
  .grid-item .product-image.active,
  .CardGrid .grid-item .product-image.active {
    opacity: 1 !important;
    z-index: 3 !important;
    display: block !important;
    visibility: visible !important;
  }

  .product-image-container::before {
    z-index: 1 !important;
  }
}