/* ==== Typography ==== */
body {
  font-family: var(--body-font);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: #212529; /* Bootstrap's default dark color - near black */
  background-color: #fefefe;
  letter-spacing: 0.01625rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  line-height: 1.3;
  margin-bottom: 0.5em;
  color: #000; /* Pure black for headings */
  font-weight: 600;
  text-transform: capitalize;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5 {
  font-weight: 700;
}

.display-3 {
  font-size: var(--fs-3xl);
}

.display-4 {
  font-size: var(--fs-2xl);
}

.lead {
  font-size: var(--fs-md);
  line-height: 1.6;
}

a {
  text-decoration: none;
}

.secondary-font {
  font-family: var(--secondary-font);
  font-weight: 400;
  font-size: 1.1rem;
}

/* Rating stars */
.rating.secondary-font {
  font-size: 1.2rem;
}

.rating iconify-icon,
.rating .fas.fa-star {
  color: #ffd700 !important; /* Gold color for stars */
}

/* Text highlights */
.highlight-text {
  position: relative;
  z-index: 1;
}

.highlight-text::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 30%;
  bottom: 0;
  left: 0;
  background-color: rgba(74, 124, 89, 0.2); /* Using primary color with opacity */
  z-index: -1;
  transition: height 0.3s ease;
}

.highlight-text:hover::after {
  height: 100%;
}

/* Blog typography */
.blog-paragraph {
  color: #666;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  font-family: var(--body-font);
}

.blog-read {
  color: #666;
  font-size: 1rem;
  letter-spacing: 0.02rem;
  text-transform: uppercase;
}

a.blog-read {
  border-bottom: 3px solid #d9d9d8;
  transition: all 0.3s ease-in;
}

a.blog-read:hover {
  border-bottom: 3px solid var(--primary-color);
}

/* Breadcrumb */
.breadcrumb.text-white {
  --bs-breadcrumb-divider-color: #fff;
  --bs-breadcrumb-item-active-color: var(--bs-primary);
}

.card-title, .product-title {
  color: #000;
}

/* Improved shop page layout */
.shop-container {
  padding: 2rem 0;
}

.filter-sidebar {
  position: sticky;
  top: 90px; /* Adjust based on your header height */
  height: fit-content;
  padding-right: 1rem;
}

.filter-sidebar .card {
  margin-bottom: 1.5rem;
}

.filter-sidebar .card-header {
  background-color: var(--light-primary-color);
  font-weight: 600;
  color: var(--primary-color);
}

/* Ensure filter options are easy to use */
.filter-sidebar .form-check {
  margin-bottom: 0.5rem;
}