/* =========================================
           1. Fonts & Typography
           ========================================= */
  @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&display=swap');

  /* Apply Quicksand to all custom classes found in the template */
  .section-title,
  .product-card-category,
  .product-card-name,
  .product-card-price,
  .product-card-price-slashed,
  .category-card-title,
  .category-card-item-count,
  .feature-banner-title,
  .feature-banner-desc,
  .trending-collections-title,
  .trending-collections-subtitle,
  .trending-collection-card-title,
  .card-body {
    font-family: 'Quicksand', sans-serif;
  }

  /* =========================================
           2. Global Elements & Overrides
           ========================================= */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Bootstrap Button Override */
  .btn:hover,
  .btn:focus,
  .btn:active,
  .btn:active:hover {
    color: #101828 !important;
    background-color: white !important;
    border-color: #dee2e6 !important;
    box-shadow: none !important;
  }

  /* =========================================
           3. Section Components
           ========================================= */
  .section-title {
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0px;
  }

  /* =========================================
           4. Product Cards
           ========================================= */
  .product-card-category {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }

  .product-card-name {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
  }

  /* Grouped Price Styles */
  .product-card-price,
  .product-card-price-slashed {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
  }

  /* =========================================
           5. Category Cards
           ========================================= */
  .category-card-title {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.35px;
    text-transform: uppercase;
  }

  .category-card-item-count {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0px;
  }

  /* =========================================
           6. Trending Collections
           ========================================= */
  .trending-collections-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0px;
  }

  .trending-collections-subtitle {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
  }

  .trending-collection-card-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
  }

  .trending-collections-wrapper {
    width: 100%;
    margin: 0 auto;
  }

  .trending-collections .card {
    min-height: 100%;
    border-radius: 0;
  }

  .trending-collections .collection-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (max-width: 991.98px) {
    .trending-collections .collection-card-img {
      height: 100%;
    }
  }

  @media (max-width: 575.98px) {
    .trending-collections {
      padding: 1.5rem 1rem !important;
    }

    .trending-collections .collection-card-img {
      height: 100%;
    }

    .trending-collections .card-img-overlay {
      padding: 1.5rem !important;
    }
  }

  /* =========================================
           7. Feature Banner
           ========================================= */
  .feature-banner-title {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: center;
    text-transform: uppercase;
  }

  .feature-banner-desc {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: center;
  }

  /* =========================================
           8. Media Queries
           ========================================= */
  @media screen and (min-width: 900px) and (max-width: 1136px) {
    .category-card-title {
      font-size: 8px !important;
    }
  }

  @media screen and (min-width: 1136px) and (max-width: 1372px) {
    .category-card-title {
      font-size: 10px !important;
    }
  }

  /* =========================================
           9. Mobile Product Horizontal Scroll
           ========================================= */
  @media (max-width: 767.98px) {
    .mobile-product-scroll-row {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      gap: 12px;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-bottom: 6px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .mobile-product-scroll-row::-webkit-scrollbar {
      display: none;
    }

    .mobile-product-scroll-row>.mobile-product-scroll-col {
      flex: 0 0 calc((100% - 24px) / 3);
      max-width: calc((100% - 24px) / 3);
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-bottom: 0 !important;
      scroll-snap-align: start;
    }

    .mobile-product-scroll-row .card-body {
      padding: 8px !important;
    }

    .mobile-product-scroll-row .product-card-category {
      font-size: 10px;
      line-height: 14px;
      margin-bottom: 4px !important;
    }

    .mobile-product-scroll-row .product-card-name {
      font-size: 12px !important;
      line-height: 14px;
      margin-bottom: 4px !important;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .mobile-product-scroll-row .product-card-price,
    .mobile-product-scroll-row .product-card-price-slashed {
      font-size: 12px !important;
      line-height: 14px;
    }

    .mobile-product-scroll-row .best-selling-badge {
      font-size: 9px !important;
      line-height: 12px;
      padding: 2px 6px !important;
      margin: 6px !important;
      border-radius: 6px !important;
    }

    .mobile-product-scroll-row .product-wishlist-btn {
      margin: 6px !important;
      font-size: 14px !important;
      line-height: 1;
    }

    .mobile-product-scroll-row .product-wishlist-btn .wishlist-item {
      font-size: 14px !important;
    }
  }