/* =========================================================
   SONA MARBLE - HOME PAGE CSS
   Product Preview + Category Preview + Reviews
========================================================= */


/* =========================================================
   01. HOME PRODUCT PREVIEW
   Hero section-এর পর cleanভাবে শুরু হবে
========================================================= */

.home-product-preview {
  position: relative;
  z-index: 1;

  width: 100%;

  margin-top: 40px !important;

  /* Space for the hero cards that extend below the video banner. */
  padding-top: 92px;
  padding-bottom: 48px;

  background: #f7f5f0;

  transform: none !important;
}


/* Product Preview Heading */

.home-product-preview .section-head {
  position: relative;
  z-index: 2;

  margin-top: 0 !important;

  transform: none !important;

  padding: 18px 28px;
  border-color: rgba(15,118,110,.13);
  box-shadow: none;
}

.home-product-preview .section-head h2 {
  max-width: none;
  font-size: 31px;
  white-space: nowrap;
}


/* Category Preview Container */

.home-product-preview .category-preview-stack {
  position: relative;
  z-index: 2;

  margin-top: 24px;
}


/* =========================================================
   02. CATEGORY PREVIEW STACK
========================================================= */

.category-preview-stack {
  display: grid;

  gap: 24px;
}


/* =========================================================
   03. CATEGORY PREVIEW CARD
========================================================= */

.category-preview {
  position: relative;

  padding: 18px;

  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, 0.64);

  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.88),
      rgba(237, 245, 242, 0.68)
    ),
    radial-gradient(
      circle at 92% 10%,
      rgba(15, 118, 110, 0.10),
      transparent 28%
    );

  box-shadow:
    var(--soft-shadow);
}


/* =========================================================
   04. CATEGORY PREVIEW HEADER
========================================================= */

.category-preview-head {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  margin-bottom: 16px;
}


.category-preview-head span,
.category-preview-head strong {
  display: block;
}


/* Category Name */

.category-preview-head span {
  color: #10201c;

  font-size: 24px;

  font-weight: 950;

  line-height: 1.2;
}


/* Product Count */

.category-preview-head strong {
  margin-top: 3px;

  color: var(--muted);

  font-size: 12px;

  font-weight: 850;

  text-transform: uppercase;
}


/* View Category Button */

.category-preview-head a {
  flex: 0 0 auto;

  padding: 9px 14px;

  border:
    1px solid rgba(15, 118, 110, 0.18);

  border-radius: 999px;

  color: var(--brand);

  background:
    rgba(255, 255, 255, 0.78);

  font-size: 13px;

  font-weight: 950;

  transition:
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


/* View Category Hover */

.category-preview-head a:hover {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      var(--brand),
      var(--brand-2)
    );

  border-color:
    transparent;

  transform:
    translateY(-2px);

  box-shadow:
    0 10px 24px rgba(15, 118, 110, 0.20);
}


/* =========================================================
   05. CATEGORY PRODUCT ROW
========================================================= */

.category-product-row {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 18px;

  width: 100%;
}


/* =========================================================
   06. REVIEW CAROUSEL
========================================================= */

.review-carousel {
  position: relative;

  overflow: hidden;

  padding:
    8px 54px 20px;
}


/* =========================================================
   07. REVIEW TRACK
========================================================= */

.review-track {
  display: flex;

  gap: 18px;

  overflow-x: auto;

  padding:
    12px 0 18px;

  scroll-behavior: smooth;

  scrollbar-width: none;
}


.review-track::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   08. REVIEW CARD
========================================================= */

.review-track article {
  position: relative;

  flex:
    0 0 360px;

  min-height:
    220px;

  padding:
    28px 24px 24px;

  overflow:
    hidden;

  border:
    1px solid rgba(255, 255, 255, 0.68);

  border-radius:
    20px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.94),
      rgba(255, 255, 255, 0.76)
    ),
    radial-gradient(
      circle at 88% 12%,
      rgba(216, 166, 84, 0.18),
      transparent 28%
    );

  box-shadow:
    0 20px 54px rgba(18, 33, 30, 0.10);
}


/* Review Decorative Circle */

.review-track article::after {
  content: "";

  position:
    absolute;

  right:
    -34px;

  bottom:
    -42px;

  width:
    120px;

  height:
    120px;

  border-radius:
    999px;

  background:
    rgba(15, 118, 110, 0.08);

  pointer-events:
    none;
}


/* =========================================================
   09. REVIEW CONTENT
========================================================= */

.review-track strong {
  position: relative;

  z-index: 2;

  display: block;

  color: #10201c;

  font-size: 19px;

  line-height: 1.2;
}


.review-track p {
  position: relative;

  z-index: 2;

  margin:
    12px 0 16px;

  /* Add more space below the review text for the customer info */
  margin-bottom: 24px;

  color:
    var(--muted);

  line-height:
    1.65;
}
/* Customer info container */
.review-customer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Customer photo */
.review-customer img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* Customer name */
.review-customer span {
  color: var(--brand);
  font-weight: 950;
  font-size: 15px;
}

/* Hide the old customer name span if it's still there */
.review-track > span:last-child {
 display: none;
}

/* Star Rating */
.review-stars {
  display: flex;
  gap: 4px;
  color: var(--brand); /* Star color */
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

.review-stars .fa-star.empty {
  color: #e0e0e0; /* Empty star color */
}

.review-track-item strong {
  margin-top: 4px;
}



/* =========================================================
   10. QUOTE MARK
========================================================= */

.quote-mark {
  position:
    absolute;

  right:
    20px;

  top:
    0;

  color:
    rgba(15, 118, 110, 0.12);

  font-size:
    86px;

  font-weight:
    950;

  line-height:
    1;

  pointer-events:
    none;
}


/* Common styles for review navigation buttons */
.review-nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* =========================================================
   11. REVIEW PREVIOUS BUTTON
========================================================= */

.review-prev {
  left:
    0;

  top:
    42%;

  color:
    var(--brand-2);

  border-color:
    var(--line);

  background:
    rgba(255, 255, 255, 0.88);

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}


/* =========================================================
   12. REVIEW NEXT BUTTON
========================================================= */

.review-next {
  right:
    0;
}



/* Review Navigation Hover */

.review-prev:hover,
.review-next:hover {
  color:
    #ffffff;

  background:
    var(--brand);

  transform:
    translateY(-2px);

  box-shadow:
    0 10px 24px rgba(15, 118, 110, 0.22);
}


/* =========================================================
   13. HERO -> PRODUCT PREVIEW FIX
========================================================= */

.cinematic-hero {
  margin-bottom:
    0 !important;
}


.cinematic-hero + .home-product-preview {
  margin-top:
    65px !important;
}


/* =========================================================
   14. TABLET
========================================================= */

@media (max-width: 980px) {

  .home-product-preview {
    padding-top:
      84px;

    padding-bottom:
      42px;
  }


  .category-product-row {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   15. MOBILE
========================================================= */

@media (max-width: 640px) {

  .home-product-preview .section-head h2 {
    font-size: 26px;
    white-space: normal;
  }

  .home-product-preview {
    padding-top:
      78px;

    padding-bottom:
      36px;
  }


  .home-product-preview .category-preview-stack {
    margin-top:
      18px;
  }


  .category-product-row {
    grid-template-columns:
      1fr;
  }


  .category-preview {
    padding:
      14px;

    border-radius:
      16px;
  }


  .category-preview-head {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      10px;
  }


  .category-preview-head span {
    font-size:
      21px;
  }


  .review-carousel {
    padding:
      4px 0 20px;
  }


  .review-carousel .review-nav {
    display:
      none;
  }


  .review-track article {
    flex-basis:
      82%;

    min-height:
      200px;
  }

}


/* =========================================================
   16. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .review-track {
    scroll-behavior:
      auto;
  }


  .category-preview-head a,
  .review-prev,
  .review-next {
    transition:
      none;
  }

}