/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/*  Product Grid & Card Styles (tightened spacing by default)      */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

/* —— Halve the default gutter between cards —— */
.raya-section .row,
.best-section .row {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.raya-section .row > [class*="col-"],
.best-section .row > [class*="col-"] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Section Background */
.raya-section,
.best-section {
  background-color: #fffafc;
}

/* Product Card Base */
.product-card {
  padding: 0.75rem;             /* new: internal padding */
  margin-bottom: 1rem;          /* keep a little vertical space */
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;             /* ensure nothing leaks out */
  border-radius: 8px;
  background: #fff;
}

/* Product Image – enforce 3:4 ratio, crop & round */
.product-img,
.product-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* Zoom image on hover (unchanged) */
.product-card:hover .product-img {
  transform: scale(1.03);
}

/* Product Name */
.product-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: #333;
  margin: 0.75rem 0 0.5rem;
  transition: color 0.2s ease;
  white-space: normal;          
  word-break: break-word;
}

/* Change name color on hover (unchanged) */
.product-card:hover .product-name {
  color: #d63384;
}

/* Price Layout */
.price-wrapper {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;              
}

/* Old Price */
.old-price {
  font-size: 0.875rem;
  color: #888;
  position: relative;
  margin: 0;
  padding: 0;
}
.old-price::after {
  content: "";
  position: absolute;
  top: 50%;                   
  left: 0;
  width: 100%;
  height: 1px;               
  background-color: currentColor; 
  transform: translateY(-50%);
  pointer-events: none;
}

/* New Price */
.new-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: #A67B5B;
  letter-spacing: 0.5px;
  margin: 0;
}

/* Card Elevation on Hover (unchanged) */
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/*  Responsive: 2 columns on Mobile & better wrapping               */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
@media (max-width: 575.98px) {
  /* two columns */
  .raya-section .row > [class*="col-"],
  .best-section .row > [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0.25rem;          /* slightly tighter gutter on mobile */
  }

  /* card adjustments (padding already applied) */
  .product-card {
    /* margin-bottom: 1rem; already set above */
  }

  /* smaller product name */
  .product-name {
    font-size: 1rem;
    margin: 0.5rem 0 0.25rem;
    text-align: center;
  }

  /* price wrapper stacks vertically AND centers its items */
  .price-wrapper {
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
    align-items: center;    
  }

  .old-price {
    font-size: 0.75rem;
    text-align: center;
  }

  .new-price {
    font-size: 1rem;
    text-align: center;
  }
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/*  Remove underlines from product-card links and their text       */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.best-section a,
.best-section a:hover,
.best-section a:focus {
  text-decoration: none !important;
}
.best-section a .product-name,
.best-section a .old-price,
.best-section a .new-price {
  text-decoration: none !important;
}