/* Purple background for CTA */
.cta-section {
  background-color: #6950ec; /* or #5950ec, whichever purple you prefer */
  color: #fff;
  padding: 3rem 1rem;
  text-align: left;
  border-radius: 10px;
}
.cta-section h2 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Single pill container for input + button */
.subscribe-container {
  background-color: #fff; /* White interior */
  border-radius: 9999px; /* Large radius for full pill shape */
  display: flex;
  align-items: center;
  overflow: hidden; /* Ensures corners are truly rounded */
  max-width: 550px; /* Adjust as desired */
  width: 100%;
}

/* The text input inside the pill */
.subscribe-container input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: #333;
}
.subscribe-container input::placeholder {
  color: #aaa; /* Subtle placeholder color */
}

/* The orange button on the right side of the pill */
.subscribe-container button {
  background-color: #ee7b3d;
  color: #fff;
  border: none;
  border-radius: 0; /* Let the container handle the pill shape */
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem; /* space before arrow */
  cursor: pointer;
}
.subscribe-container button:hover {
  opacity: 0.9;
}

/* Tiny text link under the form */
.cta-footer-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: #e6e6e6;
}
.cta-footer-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* Example responsiveness */
@media (max-width: 767px) {
  .cta-section {
    text-align: left;
  }
}

/* HAND-PICKED ITEMS + CAROUSEL */
.handpicked-title {
  margin: 2rem 0 1rem;
  font-weight: 600;
  font-size: 1.2rem;
}
.handpicked-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
}
.handpicked-card {
  min-width: 160px;
  background-color: #fff;
  border-radius: 6px;
  text-align: center;
  padding: 1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.handpicked-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 2rem 0 1rem;
}

/* Owl nav arrow styling */
.owl-nav button {
  background: none;
  border: none;
  font-size: 1.5rem;
  margin: 0 5px;
  color: #333;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 999; /* Make sure arrows appear above items */
  cursor: pointer;
}
.owl-nav button.owl-prev {
  left: -20px; /* adjust as needed */
}
.owl-nav button.owl-next {
  right: -20px; /* adjust as needed */
}
.owl-nav button:hover {
  color: #ee7b3d;
}

/* This ensures Owl handles spacing between items */
.owl-stage-outer {
  margin: 0 -16px; /* match the .margin:16 config in JS if needed */
}
.owl-item {
  padding: 0 16px;
}

.carousel-section {
  margin: 2rem auto;
  max-width: 1200px; /* Adjust as needed */
  padding: 0 1rem;
}

/* Headings */
.carousel-section h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.carousel-section p {
  color: #666;
  margin-bottom: 1.5rem;
}

/* The card around each image + label */
.carousel-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s;
}
.carousel-card:hover {
  transform: translateY(-3px);
}

.carousel-card img {
  /*width: 100px;  example size */
  /* height: 100px; */
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}
.carousel-card h6 {
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0; /* no extra margin below label */
}

/* Product card styling */
.product-card {
  position: relative;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 1rem;
  text-align: center;
  transition: transform 0.2s;
}
.product-card:hover {
  transform: translateY(-3px);
}

/* Product image */
.product-card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 0.75rem;
}

/* Title & price */
.product-card p {
  margin: 0.25rem 0;
  font-size: 0.95rem;
  color: #333;
}
.product-card p:last-child {
  font-weight: 600;
}

/* Favorite icon (heart) in top-right corner */
.favorite-icon {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  cursor: pointer;
}
.favorite-icon i {
  color: #ccc; /* unfilled heart color */
  font-size: 1.2rem;
}
.favorite-icon i:hover {
  color: #ee7b3d;
}

/* Container spacing */
.featured-categories {
  margin: 2rem auto;
  max-width: 100vw; /* adjust as needed */
}

/* Card styling */
.featured-category-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  height: 200px; /* fixed height, adjust as needed */
  color: #fff;
  display: flex;
  align-items: flex-end; /* position text at bottom */
  padding: 1rem;
  background-size: cover;
  background-position: center;
  transition: transform 0.2s ease-in-out;
}
.featured-category-card:hover {
  transform: translateY(-3px);
}

/* Text label in bottom-left */
.featured-category-card h5 {
  margin: 0;
  font-size: 0.9rem;
}

/* Product card container with colored background */
.product-card1 {
  position: relative;
  border-radius: 8px;
  color: #333;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: transform 0.2s;
  /* min-height: 400px; */
}
.product-card1:hover {
  transform: translateY(-3px);
}

/* Heart icon in the top-right corner */
.favorite-icon1 {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  cursor: pointer;
}
.favorite-icon1 i {
  font-size: 1.3rem;
  color: #fff; /* or #999 if you prefer a neutral color */
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
.favorite-icon1 i:hover {
  color: #ee7b3d;
}

/* The product image */
.product-img1 {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1rem;
}

/* Colors label + dots row */

.product-name1 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.product-price1 {
  font-weight: 700;
}

/* Distinct background colors for each card */

/* Tab nav styling (optional) */
.nav-tabs {
  border-bottom: none;
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: #ee7b3d !important;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 0;
  font-family: Arial, Helvetica, sans-serif;
}
.nav-tabs .nav-link.active {
  color: #ee7b3d; /* highlight color */
  border-bottom: 2px solid #ee7b3d;
}

/* Hide default tab-content border */
.tab-content {
  border: none;
}

/*mobile view*/
@media (max-width: 767px) {
  .featured-category-card {
    margin-bottom: 30px !important;
  }
}

/* .image-container {
          width: 100%;         
          height: 100px;       
          overflow: hidden;    
      } */

/* .product-img1 {
          width: 100%;       
          height: 100%;        
          object-fit: cover;   
          display: block;
      } */

.trending img {
  width: 100%; /* or a specific width if preferred */
  height: 250px;
  object-fit: cover; /* crops the image to fill the area while maintaining aspect ratio */
  border-radius: 8px;
}

.essential img {
  width: 100%; /* Full width of container */
  height: 150px !important; /* Fixed height (adjust this value as needed) */
  object-fit: cover; /* Crop to cover the area while maintaining aspect ratio */
  object-position: center center; /* Focus on center of image when cropping */
  display: block; /* Remove any default inline spacing */
  max-height: 150px !important;
 }

.essenstial a {
  color: #333 !important;
}

.discover img {
  width: 100%; /* or a specific width if preferred */
  height: 120px; /* fixed height for uniformity */
  object-fit: cover; /* crops the image to fill the area while maintaining aspect ratio */
  border-radius: 8px;
}

.categories-tabs img {
  width: 100% !important; /* or a specific width if preferred */
  height: 250px !important; /* fixed height for uniformity */
  object-fit: cover; /* crops the image to fill the area while maintaining aspect ratio */
  border-radius: 8px;
}
.carousel-card a, .carousel-card h6 {
  color: #333 !important;
}