/** Shopify CDN: Minification failed

Line 2324:0 All "@import" rules must come first

**/
#shopify-section-herbalever-categories,
[id^="shopify-section-"] .hl-categories {
  --hl-heading-font: 'Playfair Display', serif;
  --hl-body-font: 'Poppins', sans-serif;
  --hl-orange: #E07A3F;
  --hl-orange-dark: #C9622B;
  --hl-text: #2E2A25;
  --hl-muted: #6B6259;
  --hl-card-bg: #FFFFFF;
  --hl-card-radius: 18px;
  --hl-shadow: 0 8px 24px rgba(46, 42, 37, 0.08);
  --hl-shadow-hover: 0 18px 40px rgba(46, 42, 37, 0.16);
}

.hl-categories {
  background-color: var(--hl-bg-color, #FBF6EF);
  padding-top: var(--hl-padding-top, 60px);
  padding-bottom: var(--hl-padding-bottom, 60px);
}

.hl-categories__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.hl-categories__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px auto;
}

.hl-categories__heading {
  font-family: var(--hl-heading-font);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  color: var(--hl-text);
  line-height: 1.2;
  margin: 0 0 12px 0;
}

.hl-categories__subheading {
  font-family: var(--hl-body-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--hl-muted);
  margin: 0;
}

.hl-categories__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}

@media screen and (max-width: 989px) {
  .hl-categories__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media screen and (max-width: 599px) {
  .hl-categories__grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 18px;
  }
  .hl-categories__header {
    margin-bottom: 32px;
  }
}

.hl-card {
  background: var(--hl-card-bg);
  border-radius: var(--hl-card-radius);
  box-shadow: var(--hl-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  height: 100%;
}

.hl-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--hl-shadow-hover);
}

.hl-card__image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #F1E9DC;
}

.hl-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.hl-card:hover .hl-card__image {
  transform: scale(1.06);
}

.hl-card__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F1E9DC;
}

.hl-card__image-placeholder svg {
  width: 40%;
  height: 40%;
  opacity: 0.4;
}

.hl-card__body {
  padding: 22px 20px 24px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.hl-card__title {
  font-family: var(--hl-heading-font);
  font-weight: 600;
  font-size: 20px;
  color: var(--hl-text);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.hl-card__description {
  font-family: var(--hl-body-font);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--hl-muted);
  margin: 0 0 14px 0;
}

.hl-card__benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hl-card__benefits li {
  font-family: var(--hl-body-font);
  font-size: 13px;
  color: var(--hl-text);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}

.hl-card__benefits li svg {
  flex-shrink: 0;
  margin-top: 3px;
  width: 14px;
  height: 14px;
  color: var(--hl-orange);
}

.hl-card__footer {
  margin-top: auto;
}

.hl-card__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hl-body-font);
  font-weight: 600;
  font-size: 13.5px;
  color: #FFFFFF;
  background: var(--hl-orange);
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 999px;
  transition: background 0.25s ease, transform 0.25s ease;
  width: 100%;
  justify-content: center;
}

.hl-card__button:hover {
  background: var(--hl-orange-dark);
  transform: translateX(2px);
}

.hl-card__button svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}

.hl-card__button:hover svg {
  transform: translateX(3px);
}

.hl-bestsellers {
  background-color: var(--hl-bg-color, #FFFFFF);
  padding-top: var(--hl-padding-top, 60px);
  padding-bottom: var(--hl-padding-bottom, 60px);
}

.hl-bestsellers__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.hl-bestsellers__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px auto;
}

.hl-bestsellers__heading {
  font-family: var(--hl-heading-font);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  color: var(--hl-text);
  line-height: 1.2;
  margin: 0 0 12px 0;
}

.hl-bestsellers__subheading {
  font-family: var(--hl-body-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--hl-muted);
  margin: 0;
}

.hl-bestsellers__empty {
  font-family: var(--hl-body-font);
  text-align: center;
  color: var(--hl-muted);
}

.hl-bestsellers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media screen and (max-width: 989px) {
  .hl-bestsellers__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

@media screen and (max-width: 599px) {
  .hl-bestsellers__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .hl-bestsellers__header {
    margin-bottom: 28px;
  }
}

.hl-product-card {
  position: relative;
  background: var(--hl-card-bg);
  border-radius: var(--hl-card-radius);
  box-shadow: var(--hl-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.hl-product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hl-shadow-hover);
}

.hl-product-card__wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--hl-text);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  padding: 0;
}

.hl-product-card__wishlist:hover {
  background: var(--hl-orange);
  color: #FFFFFF;
  transform: scale(1.08);
}

.hl-product-card__wishlist svg {
  width: 16px;
  height: 16px;
}

.hl-product-card__image-link {
  display: block;
  text-decoration: none;
}

.hl-product-card__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #F1E9DC;
}

.hl-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s ease, transform 0.5s ease;
}

.hl-product-card__image--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.hl-product-card:hover .hl-product-card__image:not(.hl-product-card__image--hover) {
  transform: scale(1.06);
}

.hl-product-card:hover .hl-product-card__image--hover {
  opacity: 1;
}

.hl-product-card__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F1E9DC;
}

.hl-product-card__image-placeholder svg {
  width: 40%;
  height: 40%;
  opacity: 0.4;
}

.hl-product-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--hl-orange);
  color: #FFFFFF;
  font-family: var(--hl-body-font);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hl-product-card__body {
  padding: 16px 14px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hl-product-card__rating {
  display: flex;
  gap: 2px;
  color: var(--hl-orange);
}

.hl-product-card__rating svg {
  width: 13px;
  height: 13px;
}

.hl-product-card__title-link {
  text-decoration: none;
}

.hl-product-card__title {
  font-family: var(--hl-heading-font);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--hl-text);
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hl-product-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--hl-body-font);
}

.hl-product-card__price-regular,
.hl-product-card__price-sale {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--hl-text);
}

.hl-product-card__price-compare {
  font-size: 12.5px;
  color: var(--hl-muted);
  text-decoration: line-through;
}

.hl-product-card__add-btn {
  margin-top: 8px;
  width: 100%;
  border: none;
  cursor: pointer;
  font-family: var(--hl-body-font);
  font-weight: 600;
  font-size: 13px;
  color: #FFFFFF;
  background: var(--hl-orange);
  padding: 10px 16px;
  border-radius: 999px;
  transition: background 0.25s ease, transform 0.25s ease;
}

.hl-product-card__add-btn:hover {
  background: var(--hl-orange-dark);
  transform: translateY(-2px);
}

.hl-product-card__add-btn--disabled {
  background: #D8D0C4;
  color: #8A8175;
  cursor: not-allowed;
}

.hl-product-card__add-btn--disabled:hover {
  transform: none;
  background: #D8D0C4;
}

.hl-why-us {
  background-color: var(--hl-bg-color, #FBF6EF);
  padding-top: var(--hl-padding-top, 60px);
  padding-bottom: var(--hl-padding-bottom, 60px);
}

.hl-why-us__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.hl-why-us__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px auto;
}

.hl-why-us__heading {
  font-family: var(--hl-heading-font);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  color: var(--hl-text);
  line-height: 1.2;
  margin: 0 0 12px 0;
}

.hl-why-us__subheading {
  font-family: var(--hl-body-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--hl-muted);
  margin: 0;
}

.hl-why-us__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media screen and (max-width: 989px) {
  .hl-why-us__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media screen and (max-width: 599px) {
  .hl-why-us__grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
  }
  .hl-why-us__header {
    margin-bottom: 32px;
  }
}

.hl-why-us__card {
  background: var(--hl-card-bg);
  border-radius: var(--hl-card-radius);
  box-shadow: var(--hl-shadow);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.hl-why-us__card:hover {
  transform: translateY(-8px);
  box-shadow: var(--hl-shadow-hover);
}

.hl-why-us__icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #F1E9DC;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  overflow: hidden;
  transition: transform 0.35s ease, background 0.35s ease;
}

.hl-why-us__card:hover .hl-why-us__icon-wrap {
  transform: scale(1.08);
  background: rgba(224, 122, 63, 0.14);
}

.hl-why-us__icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.hl-why-us__icon-placeholder {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.45;
}

.hl-why-us__icon-placeholder svg {
  width: 100%;
  height: 100%;
}

.hl-why-us__title {
  font-family: var(--hl-heading-font);
  font-weight: 600;
  font-size: 18px;
  color: var(--hl-text);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.hl-why-us__description {
  font-family: var(--hl-body-font);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--hl-muted);
  margin: 0;
}
.hl-ingredients {
  background-color: var(--hl-bg-color, #FFFFFF);
  padding-top: var(--hl-padding-top, 60px);
  padding-bottom: var(--hl-padding-bottom, 60px);
}

.hl-ingredients__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.hl-ingredients__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

@media screen and (max-width: 989px) {
  .hl-ingredients__grid {
    gap: 40px;
  }
}

@media screen and (max-width: 749px) {
  .hl-ingredients__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hl-ingredients__media {
    order: 1;
  }
  .hl-ingredients__content {
    order: 2;
  }
}

.hl-ingredients__media {
  width: 100%;
  border-radius: var(--hl-card-radius);
  overflow: hidden;
  box-shadow: var(--hl-shadow);
}

.hl-ingredients__image {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.hl-ingredients__media:hover .hl-ingredients__image {
  transform: scale(1.03);
}

.hl-ingredients__image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F1E9DC;
}

.hl-ingredients__image-placeholder svg {
  width: 35%;
  height: 35%;
  opacity: 0.4;
}

.hl-ingredients__content {
  display: flex;
  flex-direction: column;
}

.hl-ingredients__header {
  margin-bottom: 32px;
}

.hl-ingredients__eyebrow {
  display: inline-block;
  font-family: var(--hl-body-font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hl-orange);
  margin-bottom: 10px;
}

.hl-ingredients__heading {
  font-family: var(--hl-heading-font);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 38px);
  color: var(--hl-text);
  line-height: 1.25;
  margin: 0;
}

.hl-ingredients__list {
  list-style: none;
  margin: 0 0 36px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hl-ingredients__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
  border-radius: var(--hl-card-radius);
  background: var(--hl-card-bg);
  box-shadow: var(--hl-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hl-ingredients__item:hover {
  transform: translateX(4px);
  box-shadow: var(--hl-shadow-hover);
}

.hl-ingredients__item-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(224, 122, 63, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hl-orange);
  overflow: hidden;
}

.hl-ingredients__item-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.hl-ingredients__item-icon svg {
  width: 20px;
  height: 20px;
}

.hl-ingredients__item-text {
  flex-grow: 1;
}

.hl-ingredients__item-title {
  font-family: var(--hl-heading-font);
  font-weight: 600;
  font-size: 17px;
  color: var(--hl-text);
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.hl-ingredients__item-description {
  font-family: var(--hl-body-font);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--hl-muted);
  margin: 0;
}

.hl-ingredients__footer {
  margin-top: auto;
}

.hl-ingredients__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hl-body-font);
  font-weight: 600;
  font-size: 14px;
  color: #FFFFFF;
  background: var(--hl-orange);
  text-decoration: none;
  padding: 13px 28px;
  border-radius: 999px;
  transition: background 0.25s ease, transform 0.25s ease;
}

.hl-ingredients__button:hover {
  background: var(--hl-orange-dark);
  transform: translateX(2px);
}

.hl-ingredients__button svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}

.hl-ingredients__button:hover svg {
  transform: translateX(3px);
}

@media screen and (max-width: 749px) {
  .hl-ingredients__item {
    padding: 14px;
  }
  .hl-ingredients__button {
    width: 100%;
    justify-content: center;
  }
}
.hl-testimonials {
  background-color: var(--hl-bg-color, #FBF6EF);
  padding-top: var(--hl-padding-top, 60px);
  padding-bottom: var(--hl-padding-bottom, 60px);
  overflow: hidden;
}

.hl-testimonials__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.hl-testimonials__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px auto;
}

.hl-testimonials__heading {
  font-family: var(--hl-heading-font);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  color: var(--hl-text);
  line-height: 1.2;
  margin: 0 0 12px 0;
}

.hl-testimonials__subheading {
  font-family: var(--hl-body-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--hl-muted);
  margin: 0;
}

.hl-testimonials__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media screen and (max-width: 989px) {
  .hl-testimonials__track {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media screen and (max-width: 749px) {
  .hl-testimonials__track {
    display: flex;
    grid-template-columns: unset;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    margin: 0 -24px;
    padding: 4px 24px 12px 24px;
    scrollbar-width: none;
  }

  .hl-testimonials__track::-webkit-scrollbar {
    display: none;
  }

  .hl-testimonials__card {
    flex: 0 0 85%;
    scroll-snap-align: center;
  }
}

.hl-testimonials__card {
  background: var(--hl-card-bg);
  border-radius: var(--hl-card-radius);
  box-shadow: var(--hl-shadow);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  opacity: 0;
  animation: hl-testimonials-fade-up 0.6s ease forwards;
  animation-delay: calc(var(--hl-card-index, 0) * 0.12s);
}

.hl-testimonials__card:hover {
  transform: translateY(-8px);
  box-shadow: var(--hl-shadow-hover);
}

@keyframes hl-testimonials-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hl-testimonials__card {
    opacity: 1;
    animation: none;
  }
}

.hl-testimonials__rating {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
}

.hl-testimonials__star {
  width: 16px;
  height: 16px;
  color: #E4D9C6;
}

.hl-testimonials__star--filled {
  color: #D9A441;
}

.hl-testimonials__review {
  font-family: var(--hl-body-font);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--hl-text);
  margin: 0 0 24px 0;
  flex-grow: 1;
}

.hl-testimonials__customer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}

.hl-testimonials__photo-wrap {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: #F1E9DC;
}

.hl-testimonials__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hl-testimonials__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hl-heading-font);
  font-weight: 700;
  font-size: 18px;
  color: var(--hl-orange);
  background: rgba(224, 122, 63, 0.14);
}

.hl-testimonials__customer-text {
  display: flex;
  flex-direction: column;
}

.hl-testimonials__name {
  font-family: var(--hl-heading-font);
  font-weight: 600;
  font-size: 15px;
  color: var(--hl-text);
  margin: 0;
  line-height: 1.4;
}

.hl-testimonials__city {
  font-family: var(--hl-body-font);
  font-size: 12.5px;
  color: var(--hl-muted);
  margin: 0;
}
.hl-collection {
  background-color: var(--hl-bg-color, #FFFFFF);
  position: relative;
}

.hl-collection__toggle-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.hl-collection__breadcrumb-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 24px 0 24px;
}

.hl-collection__breadcrumb {
  font-family: var(--hl-body-font);
  font-size: 12.5px;
  color: var(--hl-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hl-collection__breadcrumb a {
  color: var(--hl-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.hl-collection__breadcrumb a:hover {
  color: var(--hl-orange);
}

.hl-collection__breadcrumb-sep {
  opacity: 0.5;
}

.hl-collection__breadcrumb-current {
  color: var(--hl-text);
  font-weight: 500;
}

.hl-collection__banner {
  position: relative;
  width: 100%;
  min-height: 220px;
  margin-top: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hl-collection__banner-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hl-collection__banner-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #F1E9DC, #E7D9C3);
}

.hl-collection__banner-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 40px 24px;
  background: rgba(255, 255, 255, 0.72);
  border-radius: var(--hl-card-radius);
  backdrop-filter: blur(2px);
}

.hl-collection__title {
  font-family: var(--hl-heading-font);
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 44px);
  color: var(--hl-text);
  margin: 0 0 8px 0;
  line-height: 1.2;
}

.hl-collection__count {
  font-family: var(--hl-body-font);
  font-size: 13.5px;
  color: var(--hl-muted);
  margin: 0;
}

.hl-collection__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  padding-top: var(--hl-padding-top, 0px);
  padding-bottom: var(--hl-padding-bottom, 60px);
}

.hl-collection__description {
  font-family: var(--hl-body-font);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--hl-muted);
  max-width: 780px;
  margin: 32px auto 0 auto;
  text-align: center;
}

.hl-collection__form {
  margin-top: 32px;
}

.hl-collection__toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #EDE4D6;
}

.hl-collection__filter-btn {
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--hl-body-font);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--hl-text);
  background: var(--hl-card-bg);
  border: 1px solid #E4D9C6;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  margin-right: auto;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.hl-collection__filter-btn:hover {
  border-color: var(--hl-orange);
}

.hl-collection__filter-btn svg {
  width: 15px;
  height: 15px;
}

.hl-collection__sort {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hl-collection__sort-label {
  font-family: var(--hl-body-font);
  font-size: 13px;
  color: var(--hl-muted);
  white-space: nowrap;
}

.hl-collection__sort-select {
  font-family: var(--hl-body-font);
  font-size: 13.5px;
  color: var(--hl-text);
  background: var(--hl-card-bg);
  border: 1px solid #E4D9C6;
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%236B6259' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

.hl-collection__apply-btn {
  font-family: var(--hl-body-font);
  font-weight: 600;
  font-size: 13.5px;
  color: #FFFFFF;
  background: var(--hl-orange);
  border: none;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.hl-collection__apply-btn:hover {
  background: var(--hl-orange-dark);
  transform: translateY(-1px);
}

.hl-collection__apply-btn--full {
  display: none;
  width: 100%;
  margin-top: 8px;
}

.hl-collection__active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.hl-collection__active-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hl-body-font);
  font-size: 12.5px;
  color: var(--hl-text);
  background: #F1E9DC;
  padding: 7px 12px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.hl-collection__active-pill:hover {
  background: #E7D9C3;
}

.hl-collection__active-pill svg {
  width: 10px;
  height: 10px;
}

.hl-collection__clear-all {
  font-family: var(--hl-body-font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hl-orange);
  text-decoration: none;
  align-self: center;
  padding: 7px 4px;
}

.hl-collection__clear-all:hover {
  text-decoration: underline;
}

.hl-collection__layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
}

.hl-collection__drawer-overlay {
  display: none;
}

.hl-collection__sidebar {
  position: sticky;
  top: 24px;
  background: var(--hl-card-bg);
  border-radius: var(--hl-card-radius);
  box-shadow: var(--hl-shadow);
  padding: 22px;
}

.hl-collection__sidebar-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  font-family: var(--hl-heading-font);
  font-weight: 600;
  font-size: 17px;
  color: var(--hl-text);
  margin-bottom: 16px;
}

.hl-collection__drawer-close {
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hl-muted);
}

.hl-collection__drawer-close svg {
  width: 16px;
  height: 16px;
}

.hl-collection__filter-group {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #EDE4D6;
}

.hl-collection__filter-group:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.hl-collection__filter-title {
  font-family: var(--hl-heading-font);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--hl-text);
  margin: 0 0 12px 0;
}

.hl-collection__filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hl-collection__checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--hl-body-font);
  font-size: 13px;
  color: var(--hl-text);
  cursor: pointer;
}

.hl-collection__checkbox--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.hl-collection__checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.hl-collection__checkbox-mark {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid #D8CBB4;
  background: #FFFFFF;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.hl-collection__checkbox input:checked ~ .hl-collection__checkbox-mark {
  background: var(--hl-orange);
  border-color: var(--hl-orange);
}

.hl-collection__checkbox input:checked ~ .hl-collection__checkbox-mark::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #FFFFFF;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

.hl-collection__checkbox-label {
  flex-grow: 1;
}

.hl-collection__checkbox-count {
  color: var(--hl-muted);
  font-size: 12px;
}

.hl-collection__price-range {
  display: flex;
  gap: 10px;
}

.hl-collection__price-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--hl-body-font);
  font-size: 11.5px;
  color: var(--hl-muted);
}

.hl-collection__price-field input {
  font-family: var(--hl-body-font);
  font-size: 13px;
  color: var(--hl-text);
  border: 1px solid #E4D9C6;
  border-radius: 8px;
  padding: 8px 10px;
}

.hl-collection__products {
  min-width: 0;
}

.hl-collection__grid {
  display: grid;
  grid-template-columns: repeat(var(--hl-cols-desktop, 4), 1fr);
  gap: 24px;
}

.hl-collection__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
  flex-wrap: wrap;
}

.hl-collection__page-btn {
  min-width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hl-body-font);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--hl-text);
  background: var(--hl-card-bg);
  border-radius: 50%;
  text-decoration: none;
  box-shadow: var(--hl-shadow);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.hl-collection__page-btn:hover {
  background: var(--hl-orange);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.hl-collection__page-btn--current {
  background: var(--hl-orange);
  color: #FFFFFF;
}

.hl-collection__page-btn--dots {
  box-shadow: none;
  background: transparent;
  color: var(--hl-muted);
}

.hl-collection__page-btn--arrow svg {
  width: 14px;
  height: 14px;
}

.hl-collection__empty {
  text-align: center;
  padding: 80px 24px;
}

.hl-collection__empty-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px auto;
  opacity: 0.35;
}

.hl-collection__empty-icon svg,
.hl-collection__empty-icon img {
  width: 100%;
  height: 100%;
}

.hl-collection__empty-title {
  font-family: var(--hl-heading-font);
  font-weight: 600;
  font-size: 22px;
  color: var(--hl-text);
  margin: 0 0 8px 0;
}

.hl-collection__empty-text {
  font-family: var(--hl-body-font);
  font-size: 14px;
  color: var(--hl-muted);
  margin: 0 0 24px 0;
}

.hl-collection__empty-btn {
  display: inline-block;
  font-family: var(--hl-body-font);
  font-weight: 600;
  font-size: 13.5px;
  color: #FFFFFF;
  background: var(--hl-orange);
  text-decoration: none;
  padding: 12px 26px;
  border-radius: 999px;
  transition: background 0.2s ease;
}

.hl-collection__empty-btn:hover {
  background: var(--hl-orange-dark);
}

@media screen and (max-width: 989px) {
  .hl-collection__layout {
    grid-template-columns: 1fr;
  }

  .hl-collection__filter-btn {
    display: inline-flex;
  }

  .hl-collection__sidebar-header {
    display: flex;
  }

  .hl-collection__apply-btn--full {
    display: block;
  }

  .hl-collection__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 82%;
    max-width: 340px;
    z-index: 60;
    border-radius: 0;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.35s ease;
    box-shadow: var(--hl-shadow-hover);
  }

  .hl-collection__drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(46, 42, 37, 0.45);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .hl-collection__toggle-checkbox:checked ~ .hl-collection__inner .hl-collection__sidebar {
    transform: translateX(0);
  }

  .hl-collection__toggle-checkbox:checked ~ .hl-collection__inner .hl-collection__drawer-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .hl-collection__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 749px) {
  .hl-collection__banner {
    min-height: 160px;
  }

  .hl-collection__banner-overlay {
    padding: 24px 18px;
  }

  .hl-collection__toolbar {
    justify-content: space-between;
  }

  .hl-collection__grid {
    grid-template-columns: repeat(var(--hl-cols-mobile, 2), 1fr);
    gap: 14px;
  }
}
.hl-footer {
  background-color: var(--hl-footer-bg, #2E2A25);
  color: var(--hl-footer-text, #D9D2C6);
  padding-top: var(--hl-padding-top, 70px);
  padding-bottom: var(--hl-padding-bottom, 30px);
}

.hl-footer__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.hl-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 44px;
}

@media screen and (max-width: 989px) {
  .hl-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .hl-footer__column--brand {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 599px) {
  .hl-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 36px;
  }
}

.hl-footer__column {
  display: flex;
  flex-direction: column;
}

.hl-footer__logo {
  width: auto;
  max-width: 160px;
  height: auto;
  object-fit: contain;
  margin-bottom: 16px;
}

.hl-footer__logo-text {
  font-family: var(--hl-heading-font);
  font-weight: 700;
  font-size: 22px;
  color: var(--hl-footer-heading, #FFFFFF);
  margin: 0 0 16px 0;
}

.hl-footer__description {
  font-family: var(--hl-body-font);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--hl-footer-text, #D9D2C6);
  margin: 0;
  max-width: 320px;
}

.hl-footer__heading {
  font-family: var(--hl-heading-font);
  font-weight: 600;
  font-size: 16px;
  color: var(--hl-footer-heading, #FFFFFF);
  margin: 0 0 18px 0;
  line-height: 1.3;
}

.hl-footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hl-footer__menu-link {
  font-family: var(--hl-body-font);
  font-size: 13.5px;
  color: var(--hl-footer-text, #D9D2C6);
  text-decoration: none;
  transition: color 0.25s ease, padding-left 0.25s ease;
}

.hl-footer__menu-link:hover {
  color: var(--hl-footer-accent, #E07A3F);
  padding-left: 4px;
}

.hl-footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hl-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.hl-footer__contact-item svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--hl-footer-accent, #E07A3F);
}

.hl-footer__contact-link {
  font-family: var(--hl-body-font);
  font-size: 13.5px;
  color: var(--hl-footer-text, #D9D2C6);
  text-decoration: none;
  transition: color 0.25s ease;
  line-height: 1.5;
}

.hl-footer__contact-link:hover {
  color: var(--hl-footer-accent, #E07A3F);
}

.hl-footer__contact-text {
  font-family: var(--hl-body-font);
  font-size: 13.5px;
  color: var(--hl-footer-text, #D9D2C6);
  line-height: 1.6;
}

.hl-footer__social {
  display: flex;
  gap: 12px;
  padding: 32px 0;
  border-top: 1px solid rgba(217, 210, 198, 0.15);
}

.hl-footer__social-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(217, 210, 198, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hl-footer-text, #D9D2C6);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.hl-footer__social-icon:hover {
  background: var(--hl-footer-accent, #E07A3F);
  border-color: var(--hl-footer-accent, #E07A3F);
  color: #FFFFFF;
  transform: translateY(-3px);
}

.hl-footer__social-icon svg {
  width: 16px;
  height: 16px;
}

.hl-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(217, 210, 198, 0.15);
  flex-wrap: wrap;
}

@media screen and (max-width: 599px) {
  .hl-footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}

.hl-footer__copyright {
  font-family: var(--hl-body-font);
  font-size: 12.5px;
  color: var(--hl-footer-text, #D9D2C6);
  opacity: 0.85;
  margin: 0;
}

.hl-footer__credit {
  font-family: var(--hl-body-font);
  font-size: 12px;
  color: var(--hl-footer-text, #D9D2C6);
  opacity: 0.7;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hl-footer__credit-heart {
  color: var(--hl-footer-accent, #E07A3F);
  font-size: 11px;
}

.hl-footer__credit-link {
  color: var(--hl-footer-text, #D9D2C6);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.25s ease;
}

.hl-footer__credit-link:hover {
  color: var(--hl-footer-accent, #E07A3F);
}

/* ==========================================================================
   HERBALEVER — Instagram Reels Section
   Prefix: iff3eef-
   Append this block to the END of assets/herbalever.css
   Do not remove or edit any existing rules in this file.
   ========================================================================== */

.iff3eef-reels-section {
  --iff3eef-bg: #FBF6EC;
  --iff3eef-text: #1E3A2B;
  --iff3eef-accent: #E67A2E;
  --iff3eef-radius: 20px;
  --iff3eef-desktop-cols: 4;
  --iff3eef-mobile-cols: 1.2;
  --iff3eef-gap: 20px;

  background: var(--iff3eef-bg);
  color: var(--iff3eef-text);
  padding: clamp(48px, 7vw, 96px) 0;
  overflow: hidden;
  font-family: inherit;
}

.iff3eef-reels-section * {
  box-sizing: border-box;
}

.iff3eef-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}

/* ---------- Header ---------- */

.iff3eef-reels-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(32px, 5vw, 56px);
}

.iff3eef-instagram-handle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--iff3eef-accent);
  margin-bottom: 14px;
}

.iff3eef-ig-glyph {
  flex-shrink: 0;
}

.iff3eef-reels-heading {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  font-weight: 700;
  color: var(--iff3eef-text);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.iff3eef-reels-subheading {
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.6;
  color: color-mix(in srgb, var(--iff3eef-text) 70%, transparent);
  margin: 0 0 24px;
}

.iff3eef-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--iff3eef-accent);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 999px;
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--iff3eef-accent) 60%, transparent);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.iff3eef-follow-btn:hover,
.iff3eef-follow-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -6px color-mix(in srgb, var(--iff3eef-accent) 70%, transparent);
  background: color-mix(in srgb, var(--iff3eef-accent) 88%, #000);
}

.iff3eef-follow-btn:focus-visible,
.iff3eef-arrow:focus-visible,
.iff3eef-play-btn:focus-visible,
.iff3eef-modal-close:focus-visible,
.iff3eef-dot:focus-visible,
.iff3eef-track:focus-visible {
  outline: 2px solid var(--iff3eef-accent);
  outline-offset: 3px;
}

/* ---------- Carousel ---------- */

.iff3eef-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.iff3eef-track {
  flex: 1;
  display: flex;
  gap: var(--iff3eef-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 2px 18px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

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

.iff3eef-reel-card {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - (var(--iff3eef-mobile-cols) - 1) * var(--iff3eef-gap)) / var(--iff3eef-mobile-cols));
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--iff3eef-radius);
  overflow: hidden;
  box-shadow: 0 4px 16px -8px rgba(30, 58, 43, 0.18);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
  cursor: pointer;
}

@media (min-width: 750px) and (max-width: 989px) {
  .iff3eef-reel-card {
    flex-basis: calc((100% - var(--iff3eef-gap)) / 2);
  }
}

@media (min-width: 990px) {
  .iff3eef-reel-card {
    flex-basis: calc((100% - (var(--iff3eef-desktop-cols) - 1) * var(--iff3eef-gap)) / var(--iff3eef-desktop-cols));
  }
}

.iff3eef-reel-card:hover,
.iff3eef-reel-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 20px 34px -14px rgba(30, 58, 43, 0.3);
}

.iff3eef-reel-media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #e9e2d3;
  overflow: hidden;
}

.iff3eef-video-wrap,
.iff3eef-video-wrap video,
.iff3eef-reel-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.iff3eef-reel-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.iff3eef-reel-card:hover .iff3eef-reel-thumb {
  transform: scale(1.06);
}

.iff3eef-reel-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--iff3eef-text) 35%, transparent);
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--iff3eef-accent) 8%, #fff),
    color-mix(in srgb, var(--iff3eef-accent) 8%, #fff) 10px,
    #fff 10px,
    #fff 20px
  );
}

.iff3eef-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--iff3eef-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}

.iff3eef-play-btn svg {
  transform: translateX(2px);
}

.iff3eef-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: #fff;
}

.iff3eef-card-instagram-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.iff3eef-featured-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--iff3eef-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.3);
}

.iff3eef-reel-info {
  padding: 16px 16px 18px;
}

.iff3eef-reel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--iff3eef-text);
  margin: 0 0 6px;
  line-height: 1.3;
}

.iff3eef-reel-caption {
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--iff3eef-text) 65%, transparent);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Arrows ---------- */

.iff3eef-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--iff3eef-text) 15%, transparent);
  background: #fff;
  color: var(--iff3eef-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.iff3eef-arrow:hover {
  background: var(--iff3eef-accent);
  border-color: var(--iff3eef-accent);
  color: #fff;
  transform: scale(1.06);
}

.iff3eef-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
  background: #fff;
  color: var(--iff3eef-text);
  border-color: color-mix(in srgb, var(--iff3eef-text) 15%, transparent);
}

@media (max-width: 749px) {
  .iff3eef-arrow {
    display: none;
  }
}

/* ---------- Dots ---------- */

.iff3eef-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.iff3eef-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: color-mix(in srgb, var(--iff3eef-text) 22%, transparent);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease;
}

.iff3eef-dot.iff3eef-dot-active {
  background: var(--iff3eef-accent);
  width: 22px;
  border-radius: 999px;
}

/* ---------- Empty state ---------- */

.iff3eef-empty-state {
  text-align: center;
  padding: 40px 20px;
  border: 1px dashed color-mix(in srgb, var(--iff3eef-text) 25%, transparent);
  border-radius: var(--iff3eef-radius);
  color: color-mix(in srgb, var(--iff3eef-text) 60%, transparent);
}

/* ---------- Modal ---------- */

.iff3eef-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.iff3eef-modal[data-iff3eef-open="true"] {
  opacity: 1;
  visibility: visible;
}

.iff3eef-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 22, 0.75);
  backdrop-filter: blur(3px);
}

.iff3eef-modal-dialog {
  position: relative;
  width: min(420px, 92vw);
  max-height: 88vh;
  background: #000;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  transform: scale(0.94) translateY(10px);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.iff3eef-modal[data-iff3eef-open="true"] .iff3eef-modal-dialog {
  transform: scale(1) translateY(0);
}

.iff3eef-modal-media {
  width: 100%;
  aspect-ratio: 9 / 16;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.iff3eef-modal-media video,
.iff3eef-modal-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.iff3eef-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.25s ease, transform 0.25s ease;
}

.iff3eef-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* ---------- Animations ---------- */

.iff3eef-fade-up {
  opacity: 0;
  transform: translateY(24px);
  animation: iff3eef-fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-play-state: paused;
}

.iff3eef-fade-up.iff3eef-in-view {
  animation-play-state: running;
}

@keyframes iff3eef-fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .iff3eef-fade-up {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .iff3eef-reel-card,
  .iff3eef-follow-btn,
  .iff3eef-arrow,
  .iff3eef-play-btn,
  .iff3eef-reel-thumb,
  .iff3eef-modal,
  .iff3eef-modal-dialog {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   Herbalever Hero — Section Styles
   Prefix: iff3eef-
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,600&family=Poppins:wght@400;500;600;700&display=swap');

.iff3eef-hero {
  --iff3eef-font-heading: 'Cormorant Garamond', Georgia, serif;
  --iff3eef-font-body: 'Poppins', sans-serif;
  --iff3eef-cream: #FBF3E7;

  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: var(--iff3eef-desktop-height, 640px);
  background-color: var(--iff3eef-cream);
  padding-top: var(--iff3eef-top-padding, 48px);
  padding-bottom: var(--iff3eef-bottom-padding, 48px);
}

/* ---------- Background layer ---------- */

.iff3eef-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.iff3eef-hero__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.iff3eef-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--iff3eef-bg-position, right center);
  display: block;
}

.iff3eef-hero__overlay {
  position: absolute;
  inset: 0;
  background-color: #000;
  opacity: var(--iff3eef-overlay-opacity, 0);
  pointer-events: none;
}

/* ---------- Inner container ---------- */

.iff3eef-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 72px);
}

.iff3eef-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 2vw, 20px);
  width: 100%;
  max-width: var(--iff3eef-content-width, 560px);
}

/* ---------- Badge ---------- */

.iff3eef-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--iff3eef-font-body);
  font-weight: 600;
  font-size: clamp(0.75rem, 1vw, 0.85rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--iff3eef-badge-color, #E17E30);
  background-color: color-mix(in srgb, var(--iff3eef-badge-color, #E17E30) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--iff3eef-badge-color, #E17E30) 35%, transparent);
  border-radius: 999px;
  padding: 6px 16px;
}

/* ---------- Heading ---------- */

.iff3eef-heading {
  margin: 0;
  font-family: var(--iff3eef-font-heading);
  font-weight: 600;
  line-height: 1.08;
  color: var(--iff3eef-text-color, #1F3B26);
}

.iff3eef-heading__line1 {
  display: block;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 500;
  color: var(--iff3eef-text-color, #1F3B26);
}

.iff3eef-heading__line2 {
  display: block;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 700;
  color: var(--iff3eef-text-color, #1F3B26);
}

.iff3eef-heading__highlight {
  display: block;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  color: var(--iff3eef-highlight-color, #E17E30);
}

/* ---------- Paragraph ---------- */

.iff3eef-paragraph {
  font-family: var(--iff3eef-font-body);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.6;
  color: var(--iff3eef-text-color, #1F3B26);
  opacity: 0.85;
  max-width: 46ch;
}

.iff3eef-paragraph p {
  margin: 0;
}

/* ---------- Button ---------- */

.iff3eef-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--iff3eef-font-body);
  font-weight: 600;
  font-size: clamp(0.9rem, 1vw, 1rem);
  color: #fff;
  background-color: var(--iff3eef-button-color, #E17E30);
  border-radius: 999px;
  padding: 14px 28px;
  text-decoration: none;
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--iff3eef-button-color, #E17E30) 60%, transparent);
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  margin-top: 4px;
}

.iff3eef-button:hover,
.iff3eef-button:focus-visible {
  background-color: var(--iff3eef-button-hover, #C9691F);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px color-mix(in srgb, var(--iff3eef-button-hover, #C9691F) 65%, transparent);
}

.iff3eef-button:focus-visible {
  outline: 2px solid var(--iff3eef-text-color, #1F3B26);
  outline-offset: 3px;
}

.iff3eef-button__icon {
  transition: transform 0.25s ease;
}

.iff3eef-button:hover .iff3eef-button__icon {
  transform: translateX(3px);
}

/* ---------- Animations ---------- */

.iff3eef-fade-up {
  animation: iff3eef-fade-up-kf 0.7s ease both;
  animation-delay: var(--iff3eef-delay, 0s);
}

@keyframes iff3eef-fade-up-kf {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .iff3eef-fade-up {
    animation: none;
  }
  .iff3eef-button,
  .iff3eef-button__icon,
  .iff3eef-trust-item__icon {
    transition: none;
  }
}

/* ---------- Tablet ---------- */

@media (max-width: 989px) {
  .iff3eef-hero {
    min-height: var(--iff3eef-tablet-height, 560px);
  }
}

/* ---------- Mobile: redesigned layout, not a shrink ---------- */

@media (max-width: 749px) {
  .iff3eef-hero {
    min-height: var(--iff3eef-mobile-height, 680px);
    align-items: flex-end;
    padding-bottom: max(var(--iff3eef-bottom-padding, 48px), 32px);
  }

  .iff3eef-hero__overlay {
    opacity: max(var(--iff3eef-overlay-opacity, 0), 0.28);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 45%, rgba(251,243,231,0.94) 82%);
  }

  .iff3eef-hero__inner {
    padding-inline: 20px;
  }

  .iff3eef-hero__content {
    max-width: 100%;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .iff3eef-heading__line1 {
    font-size: clamp(1.2rem, 5vw, 1.4rem);
  }

  .iff3eef-heading__line2 {
    font-size: clamp(2.2rem, 11vw, 2.8rem);
  }

  .iff3eef-heading__highlight {
    font-size: clamp(2rem, 9vw, 2.5rem);
  }

  .iff3eef-paragraph {
    max-width: 34ch;
  }

  .iff3eef-button {
    width: 100%;
    justify-content: center;
  }
}

/* Prevent any horizontal overflow introduced by the hero */
.iff3eef-hero,
.iff3eef-hero__inner {
  max-width: 100vw;
}


/* ============================================================
   Herbalever Best Sellers — Adaptive Layout & Card Design
   Prefix: hl-
   Appended rules for: section header, view-all button,
   product-count-adaptive layouts (1 / 2 / 3 / 4+), slider
   arrows, mobile swipe/snap, product card design, and the
   "Products Coming Soon" empty state.
   ============================================================ */

.hl-bestsellers {
  background-color: var(--hl-bg-color, #fff);
  padding-top: var(--hl-padding-top, 60px);
  padding-bottom: var(--hl-padding-bottom, 60px);
  width: 100%;
  overflow: hidden;
}

.hl-bestsellers__inner {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 72px);
}

/* ---------- Header ---------- */

.hl-bestsellers__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.hl-bestsellers__header-top {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}

.hl-bestsellers__heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hl-bestsellers__heading {
  margin: 0;
  font-family: var(--hl-font-heading, 'Cormorant Garamond', Georgia, serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  color: var(--hl-text-color, #1F3B26);
}

.hl-bestsellers__heading-icon {
  display: inline-flex;
  color: var(--hl-accent-color, #E17E30);
}

.hl-bestsellers__heading-icon svg {
  width: 20px;
  height: 20px;
}

.hl-bestsellers__subheading {
  margin: 0;
  font-family: var(--hl-font-body, 'Poppins', sans-serif);
  font-size: 1rem;
  color: var(--hl-text-color, #1F3B26);
  opacity: 0.75;
  max-width: 52ch;
}

.hl-bestsellers__cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 20px;
}

.hl-bestsellers__view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--hl-font-body, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
  background-color: var(--hl-button-color, #E17E30);
  border-radius: 999px;
  padding: 14px 28px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--hl-button-color, #E17E30) 60%, transparent);
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.hl-bestsellers__view-all svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.hl-bestsellers__view-all:hover {
  background-color: var(--hl-button-hover-color, #C9691F);
  transform: translateY(-2px);
  box-shadow: 0 14px 24px -10px color-mix(in srgb, var(--hl-button-hover-color, #C9691F) 65%, transparent);
}

.hl-bestsellers__view-all:hover svg {
  transform: translateX(3px);
}

/* Mobile & tablet: centered, full-width up to 260px */
@media (max-width: 989px) {
  .hl-bestsellers__cta .hl-bestsellers__view-all {
    width: 100%;
    max-width: 260px;
    text-align: center;
  }
}

/* ---------- Viewport / adaptive layouts ---------- */

.hl-bestsellers__viewport {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
}

.hl-bestsellers__grid {
  display: grid;
  gap: 24px;
  width: 100%;
}

/* 1 product: centered, large card */
.hl-bestsellers__grid--single {
  grid-template-columns: minmax(280px, 420px);
  justify-content: center;
}

.hl-bestsellers__grid--single .hl-product-card {
  max-width: 420px;
  width: 100%;
}

/* 2 products: centered pair, no huge empty space */
.hl-bestsellers__grid--duo {
  grid-template-columns: repeat(2, minmax(280px, 400px));
  justify-content: center;
}

.hl-bestsellers__grid--duo .hl-product-card {
  max-width: 400px;
  min-width: 280px;
  width: 100%;
}

/* 3 products: centered evenly */
.hl-bestsellers__grid--trio {
  grid-template-columns: repeat(3, minmax(260px, 360px));
  justify-content: center;
}

/* 4+ products: 4 per row, horizontal slider */
.hl-bestsellers__grid--slider {
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 24px) / 4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.hl-bestsellers__grid--slider::-webkit-scrollbar {
  display: none;
}

.hl-bestsellers__grid--slider .hl-product-card {
  scroll-snap-align: start;
}

/* ---------- Slider arrows ---------- */

.hl-bestsellers__arrow {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #EAD9BE;
  color: var(--hl-text-color, #1F3B26);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  align-self: center;
}

.hl-bestsellers__viewport--slider .hl-bestsellers__arrow {
  display: flex;
}

.hl-bestsellers__arrow svg {
  width: 18px;
  height: 18px;
}

.hl-bestsellers__arrow:hover:not(:disabled) {
  background-color: var(--hl-accent-color, #E17E30);
  color: #fff;
  transform: translateY(-2px);
}

.hl-bestsellers__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------- Product card ---------- */

.hl-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px -12px rgba(31, 59, 38, 0.18);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hl-product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -14px rgba(31, 59, 38, 0.28);
}

.hl-product-card__wishlist {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  color: var(--hl-text-color, #1F3B26);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.hl-product-card__wishlist svg {
  width: 18px;
  height: 18px;
}

.hl-product-card__wishlist:hover {
  background-color: var(--hl-accent-color, #E17E30);
  color: #fff;
  transform: scale(1.08);
}

.hl-product-card__image-link {
  display: block;
  text-decoration: none;
}

.hl-product-card__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #FBF3E7;
  overflow: hidden;
}

.hl-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s ease, transform 0.5s ease;
}

.hl-product-card__image--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.hl-product-card:hover .hl-product-card__image {
  transform: scale(1.06);
}

.hl-product-card:hover .hl-product-card__image--hover {
  opacity: 1;
}

.hl-product-card__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hl-product-card__image-placeholder svg {
  width: 60%;
  height: 60%;
  opacity: 0.5;
}

.hl-product-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-family: var(--hl-font-body, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background-color: #C0392B;
  border-radius: 999px;
  padding: 5px 12px;
}

.hl-product-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 20px 22px;
}

.hl-product-card__rating {
  display: flex;
  gap: 2px;
  color: var(--hl-accent-color, #E17E30);
}

.hl-product-card__rating svg {
  width: 14px;
  height: 14px;
}

.hl-product-card__title-link {
  text-decoration: none;
}

.hl-product-card__title {
  margin: 0;
  font-family: var(--hl-font-body, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 1rem;
  color: var(--hl-text-color, #1F3B26);
  line-height: 1.35;
}

.hl-product-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--hl-font-body, 'Poppins', sans-serif);
}

.hl-product-card__price-regular,
.hl-product-card__price-sale {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--hl-text-color, #1F3B26);
}

.hl-product-card__price-compare {
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--hl-text-color, #1F3B26);
  opacity: 0.5;
  text-decoration: line-through;
}

.hl-product-card__add-btn {
  width: 100%;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hl-font-body, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 0.92rem;
  color: #fff;
  background-color: var(--hl-button-color, #E17E30);
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--hl-button-color, #E17E30) 60%, transparent);
}

.hl-product-card__add-btn:hover {
  background-color: var(--hl-button-hover-color, #C9691F);
  transform: translateY(-2px);
}

.hl-product-card__add-btn--disabled {
  background-color: #C9C2B4;
  color: #fff;
  cursor: not-allowed;
  box-shadow: none;
}

.hl-product-card__add-btn--disabled:hover {
  transform: none;
}

/* ---------- Empty state ---------- */

.hl-bestsellers__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 20px;
  border-radius: 20px;
  background-color: #FBF3E7;
  text-align: center;
}

.hl-bestsellers__empty-icon {
  display: flex;
  color: var(--hl-accent-color, #E17E30);
  opacity: 0.8;
}

.hl-bestsellers__empty-icon svg {
  width: 42px;
  height: 42px;
}

.hl-bestsellers__empty-text {
  margin: 0;
  font-family: var(--hl-font-body, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--hl-text-color, #1F3B26);
  opacity: 0.75;
}

/* ---------- Tablet ---------- */

@media (max-width: 989px) {
  .hl-bestsellers__grid--trio {
    grid-template-columns: repeat(2, minmax(260px, 360px));
  }

  .hl-bestsellers__grid--slider {
    grid-auto-columns: calc((100% - 2 * 24px) / 3);
  }
}

/* ---------- Mobile: always 1 card per screen, swipe + snap ---------- */

@media (max-width: 749px) {
  .hl-bestsellers__header-top {
    justify-content: center;
  }

  .hl-bestsellers__arrow {
    display: none !important;
  }

  .hl-bestsellers__viewport {
    justify-content: flex-start;
  }

  .hl-bestsellers__grid,
  .hl-bestsellers__grid--single,
  .hl-bestsellers__grid--duo,
  .hl-bestsellers__grid--trio,
  .hl-bestsellers__grid--slider {
    display: flex;
    grid-template-columns: none;
    grid-auto-flow: unset;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 16px;
    padding-bottom: 4px;
    padding-inline: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .hl-bestsellers__grid::-webkit-scrollbar {
    display: none;
  }

  .hl-bestsellers__grid .hl-product-card,
  .hl-bestsellers__grid--single .hl-product-card,
  .hl-bestsellers__grid--duo .hl-product-card,
  .hl-bestsellers__grid--trio .hl-product-card,
  .hl-bestsellers__grid--slider .hl-product-card {
    flex: 0 0 88vw;
    max-width: 88vw;
    min-width: 0;
    scroll-snap-align: center;
  }
}

/* Prevent horizontal overflow from the section */
.hl-bestsellers,
.hl-bestsellers__inner {
  max-width: 100vw;
}

/* ============================================================
   Herbalever Testimonials — Premium Carousel (append-only)
   Prefix: iff3eef-
   Matches the Hero / Best Sellers design language: Cormorant
   Garamond + Poppins, cream/dark-green/orange palette.
   ============================================================ */

.iff3eef-testimonials {
  --iff3eef-font-heading: 'Cormorant Garamond', Georgia, serif;
  --iff3eef-font-body: 'Poppins', sans-serif;
  --iff3eef-text-color: #1F3B26;
  --iff3eef-accent-color: #E17E30;
  --iff3eef-accent-hover: #C9691F;
  --iff3eef-visible: 3;

  background-color: var(--iff3eef-bg-color, #FFF9F2);
  padding-top: var(--iff3eef-padding-top, 60px);
  padding-bottom: var(--iff3eef-padding-bottom, 60px);
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}

.iff3eef-testimonials__inner {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 72px);
}

/* ---------- Header ---------- */

.iff3eef-testimonials__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  margin-bottom: clamp(32px, 5vw, 52px);
}

.iff3eef-testimonials__heading {
  margin: 0;
  font-family: var(--iff3eef-font-heading);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  color: var(--iff3eef-text-color);
}

.iff3eef-testimonials__heading-icon {
  display: inline-flex;
  color: var(--iff3eef-accent-color);
}

.iff3eef-testimonials__heading-icon svg {
  width: 20px;
  height: 20px;
}

.iff3eef-testimonials__subheading {
  margin: 4px 0 0;
  font-family: var(--iff3eef-font-body);
  font-size: 1rem;
  color: var(--iff3eef-text-color);
  opacity: 0.7;
  max-width: 56ch;
  line-height: 1.6;
}

/* ---------- Viewport & track ---------- */

.iff3eef-testimonials__viewport {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.iff3eef-testimonials__track-wrap {
  overflow: hidden;
  width: 100%;
}

.iff3eef-testimonials__track {
  display: flex;
  gap: 24px;
  will-change: transform;
}

.iff3eef-testimonials__slide {
  flex: 0 0 calc((100% - (var(--iff3eef-visible) - 1) * 24px) / var(--iff3eef-visible));
  min-width: 0;
  display: flex;
}

/* ---------- Arrows ---------- */

.iff3eef-testimonials__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #EAD9BE;
  color: var(--iff3eef-text-color);
  box-shadow: 0 8px 20px -8px rgba(31, 59, 38, 0.25);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.iff3eef-testimonials__arrow svg {
  width: 20px;
  height: 20px;
}

.iff3eef-testimonials__arrow:hover:not(:disabled) {
  background-color: var(--iff3eef-accent-color);
  border-color: var(--iff3eef-accent-color);
  color: #fff;
  transform: translateY(-2px);
}

.iff3eef-testimonials__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------- Dots ---------- */

.iff3eef-testimonials__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(24px, 3vw, 36px);
}

.iff3eef-testimonials__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #EAD9BE;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease, width 0.25s ease;
}

.iff3eef-testimonials__dot:hover {
  background-color: var(--iff3eef-accent-hover);
}

.iff3eef-testimonials__dot.is-active {
  background-color: var(--iff3eef-accent-color);
  width: 26px;
  border-radius: 999px;
}

/* ---------- Card ---------- */

.iff3eef-testimonials__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  background-color: #fff;
  border-radius: var(--iff3eef-card-radius, 22px);
  box-shadow: var(--iff3eef-card-shadow, 0 18px 42px -16px rgba(31, 59, 38, 0.22));
  padding: 30px;
  gap: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.iff3eef-testimonials__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px -18px rgba(31, 59, 38, 0.3);
}

.iff3eef-testimonials__quote {
  position: absolute;
  top: 22px;
  right: 26px;
  color: var(--iff3eef-accent-color);
  opacity: 0.12;
  pointer-events: none;
}

.iff3eef-testimonials__quote svg {
  width: 56px;
  height: 42px;
}

.iff3eef-testimonials__rating {
  display: flex;
  gap: 3px;
}

.iff3eef-testimonials__star {
  width: 16px;
  height: 16px;
  color: #EAD9BE;
}

.iff3eef-testimonials__star--filled {
  color: #F0A93A;
}

.iff3eef-testimonials__review {
  margin: 0;
  font-family: var(--iff3eef-font-body);
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--iff3eef-text-color);
  opacity: 0.85;
}

.iff3eef-testimonials__customer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 6px;
}

.iff3eef-testimonials__photo-wrap {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
}

.iff3eef-testimonials__photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid #FBF3E7;
}

.iff3eef-testimonials__photo-placeholder {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--iff3eef-accent-color);
  color: #fff;
  font-family: var(--iff3eef-font-body);
  font-weight: 600;
  font-size: 1.1rem;
}

.iff3eef-testimonials__customer-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.iff3eef-testimonials__name {
  margin: 0;
  font-family: var(--iff3eef-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--iff3eef-text-color);
}

.iff3eef-testimonials__city {
  margin: 0;
  font-family: var(--iff3eef-font-body);
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--iff3eef-text-color);
  opacity: 0.6;
}

.iff3eef-testimonials__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid #F3E8D8;
}

.iff3eef-testimonials__verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--iff3eef-font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #2F855A;
  background-color: rgba(47, 133, 90, 0.1);
  border: 1px solid rgba(47, 133, 90, 0.3);
  border-radius: 999px;
  padding: 5px 12px;
}

.iff3eef-testimonials__verified svg {
  width: 12px;
  height: 12px;
}

.iff3eef-testimonials__product {
  margin: 0;
  font-family: var(--iff3eef-font-body);
  font-size: 0.82rem;
  color: var(--iff3eef-text-color);
  opacity: 0.7;
}

.iff3eef-testimonials__product span {
  font-weight: 600;
  opacity: 1;
}

/* ---------- Empty state ---------- */

.iff3eef-testimonials__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 20px;
  border-radius: 20px;
  background-color: #fff;
  text-align: center;
}

.iff3eef-testimonials__empty-icon {
  display: flex;
  color: var(--iff3eef-accent-color);
  opacity: 0.6;
}

.iff3eef-testimonials__empty-icon svg {
  width: 36px;
  height: 36px;
}

.iff3eef-testimonials__empty-text {
  margin: 0;
  font-family: var(--iff3eef-font-body);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--iff3eef-text-color);
  opacity: 0.75;
}

/* ---------- Tablet ---------- */

@media (max-width: 989px) {
  .iff3eef-testimonials__arrow {
    width: 40px;
    height: 40px;
  }

  .iff3eef-testimonials__card {
    padding: 26px;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 749px) {
  .iff3eef-testimonials__inner {
    padding-inline: 20px;
  }

  .iff3eef-testimonials__viewport {
    gap: 8px;
  }

  .iff3eef-testimonials__arrow {
    width: 36px;
    height: 36px;
  }

  .iff3eef-testimonials__arrow svg {
    width: 16px;
    height: 16px;
  }

  .iff3eef-testimonials__track {
    gap: 16px;
  }

  .iff3eef-testimonials__slide {
    flex-basis: calc((100% - (var(--iff3eef-visible) - 1) * 16px) / var(--iff3eef-visible));
  }

  .iff3eef-testimonials__card {
    padding: 22px;
    max-width: 100%;
  }

  .iff3eef-testimonials__quote svg {
    width: 44px;
    height: 33px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iff3eef-testimonials__track {
    transition: none !important;
  }

  .iff3eef-testimonials__card,
  .iff3eef-testimonials__arrow,
  .iff3eef-testimonials__dot {
    transition: none;
  }
}

/* ===== hl-categories — Smart Grid Redesign ===== */
.hl-categories {
  background-color: var(--hl-bg-color, #FBF6EF);
  padding-top: var(--hl-padding-top, 60px);
  padding-bottom: var(--hl-padding-bottom, 60px);
  width: 100%;
  overflow: visible;
}

.hl-categories * {
  box-sizing: border-box;
}

.hl-categories__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.hl-categories__header {
  text-align: center;
  margin-bottom: 48px;
}

.hl-categories__heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.15;
  color: #233B2D;
  margin: 0;
}

.hl-categories__subheading {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #5B5B5B;
  max-width: 560px;
  margin: 14px auto 0;
  line-height: 1.6;
}

/* Track */
.hl-categories__track {
  width: 100%;
}

/* ===== Smart Grid ===== */
.hl-categories__grid {
  display: grid;
  gap: 32px;
}

/* 1–2 cards: centered, wide, premium */
.hl-categories__grid[data-hl-count="1"],
.hl-categories__grid[data-hl-count="2"] {
  grid-template-columns: repeat(var(--hl-count, 2), minmax(0, var(--hl-card-width, 360px)));
  justify-content: center;
  max-width: 920px;
  margin: 0 auto;
  gap: 40px;
}

.hl-categories__grid[data-hl-count="1"] {
  --hl-count: 1;
}

.hl-categories__grid[data-hl-count="2"] {
  --hl-count: 2;
}

/* 3 cards: centered 3-column */
.hl-categories__grid[data-hl-count="3"] {
  grid-template-columns: repeat(3, minmax(0, var(--hl-card-width, 340px)));
  justify-content: center;
  max-width: 1260px;
  margin: 0 auto;
}

/* 4+ cards: responsive grid, controlled by cards_per_row setting */
.hl-categories__grid:not([data-hl-count="1"]):not([data-hl-count="2"]):not([data-hl-count="3"]) {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.hl-categories__grid:not([data-hl-count="1"]):not([data-hl-count="2"]):not([data-hl-count="3"])[data-hl-cpr="2"] {
  grid-template-columns: repeat(2, 1fr);
}

.hl-categories__grid:not([data-hl-count="1"]):not([data-hl-count="2"]):not([data-hl-count="3"])[data-hl-cpr="3"] {
  grid-template-columns: repeat(3, 1fr);
}

.hl-categories__grid:not([data-hl-count="1"]):not([data-hl-count="2"]):not([data-hl-count="3"])[data-hl-cpr="4"] {
  grid-template-columns: repeat(4, 1fr);
}

/* ===== Card ===== */
.hl-card {
  position: relative;
  background: #ffffff;
  border-radius: var(--hl-card-radius, 24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 300ms ease, box-shadow 300ms ease;
  opacity: 0;
  transform: translateY(24px);
}

.hl-card.hl-in-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 550ms ease, transform 550ms ease;
  transition-delay: inherit;
}

/* Shadow strength */
.hl-categories__grid[data-hl-shadow="soft"] .hl-card { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); }
.hl-categories__grid[data-hl-shadow="medium"] .hl-card { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); }
.hl-categories__grid[data-hl-shadow="strong"] .hl-card { box-shadow: 0 20px 48px rgba(0, 0, 0, 0.14); }

/* Hover lift (togglable) */
.hl-categories:not(.hl-hover-off) .hl-card:hover,
.hl-categories:not(.hl-hover-off) .hl-card.hl-in-view:hover {
  transform: translateY(-10px);
}

.hl-categories:not(.hl-hover-off) .hl-categories__grid[data-hl-shadow="soft"] .hl-card:hover { box-shadow: 0 16px 32px rgba(0, 0, 0, 0.10); }
.hl-categories:not(.hl-hover-off) .hl-categories__grid[data-hl-shadow="medium"] .hl-card:hover { box-shadow: 0 22px 44px rgba(0, 0, 0, 0.14); }
.hl-categories:not(.hl-hover-off) .hl-categories__grid[data-hl-shadow="strong"] .hl-card:hover { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.20); }

/* Badge */
.hl-card__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

.hl-card__badge--new {
  background: linear-gradient(135deg, #4C8C5C, #2F6640);
}

.hl-card__badge--popular {
  background: linear-gradient(135deg, #E67E22, #C9670F);
}

.hl-card__badge--bestseller {
  background: linear-gradient(135deg, #E3B341, #C9922A);
}

/* Image */
.hl-card__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #FBF3E8;
}

.hl-card__image-link {
  display: block;
  width: 100%;
  height: 100%;
}

.hl-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.hl-categories:not(.hl-hover-off) .hl-card:hover .hl-card__image {
  transform: scale(1.06);
}

.hl-card__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
}

.hl-card__image-placeholder svg {
  width: 64px;
  height: 64px;
}

/* Body */
.hl-card__body {
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hl-card__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
  color: #233B2D;
  margin: 0 0 6px;
}

.hl-card__title-link {
  color: inherit;
  text-decoration: none;
}

.hl-card__count {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #E67E22;
  margin-bottom: 12px;
}

.hl-card__description {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #5B5B5B;
  line-height: 1.6;
  margin: 0 0 18px;
}

/* Benefits */
.hl-card__benefits {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hl-card__benefits li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #233B2D;
  line-height: 1.4;
}

.hl-card__benefits svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #E67E22;
}

/* Footer / CTA */
.hl-card__footer {
  margin-top: auto;
  padding-top: 4px;
}

.hl-card__button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #ffffff;
  background: #E67E22;
  padding: 14px 20px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}

.hl-card__button svg {
  width: 18px;
  height: 18px;
  transition: transform 300ms ease;
}

.hl-card__button:hover {
  background: #C9670F;
  box-shadow: 0 10px 22px rgba(230, 126, 34, 0.32);
}

.hl-card__button:hover svg {
  transform: translateX(4px);
}

.hl-card__button:focus-visible {
  outline: 2px solid #E67E22;
  outline-offset: 3px;
}

/* ===== Tablet: 2 cards ===== */
@media screen and (max-width: 989px) {
  .hl-categories__heading { font-size: 34px; }
  .hl-card__title { font-size: 22px; }

  .hl-categories__grid[data-hl-count="1"],
  .hl-categories__grid[data-hl-count="2"],
  .hl-categories__grid[data-hl-count="3"],
  .hl-categories__grid:not([data-hl-count="1"]):not([data-hl-count="2"]):not([data-hl-count="3"]) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 720px;
    margin: 0 auto;
  }

  .hl-categories__grid[data-hl-count="1"] {
    grid-template-columns: minmax(0, 420px);
  }
}

/* ===== Mobile: stacked vertical layout (top to bottom) ===== */
@media screen and (max-width: 749px) {
  .hl-categories__heading { font-size: 28px; }
  .hl-categories__header { margin-bottom: 32px; }
  .hl-card__title { font-size: 21px; }

  .hl-categories__track {
    overflow-x: visible;
    -webkit-overflow-scrolling: auto;
    scroll-snap-type: none;
  }

  .hl-categories__grid,
  .hl-categories__grid[data-hl-count="1"],
  .hl-categories__grid[data-hl-count="2"],
  .hl-categories__grid[data-hl-count="3"],
  .hl-categories__grid:not([data-hl-count="1"]):not([data-hl-count="2"]):not([data-hl-count="3"]) {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 440px;
    margin: 0 auto;
  }

  .hl-card {
    width: 100%;
    max-width: none;
    flex: none;
    scroll-snap-align: none;
  }

  .hl-card__image-wrap {
    aspect-ratio: 4 / 3;
  }

  .hl-card__body {
    padding: 22px 20px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hl-card,
  .hl-card__image,
  .hl-card__button svg {
    transition: none !important;
  }

  .hl-card {
    opacity: 1;
    transform: none;
  }
}
/* =========================================================
   Herbalever Benefits — "Our Herbs, Their Benefits"
   Append this block to the end of assets/herbalever.css.
   Scoped entirely under .hlb to avoid touching other styles.
   ========================================================= */

.hlb {
  background: var(--hlb-bg, #FBF3E9);
  padding-top: var(--hlb-pad-top, 96px);
  padding-bottom: var(--hlb-pad-bottom, 96px);
  color: #2B2620;
  font-family: inherit;
  overflow: hidden;
}

.hlb__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.hlb *,
.hlb *::before,
.hlb *::after {
  box-sizing: border-box;
}

/* ---------- Header ---------- */

.hlb__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.hlb__header.hlb-in-view {
  opacity: 1;
  transform: translateY(0);
}

.hlb__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--hlb-btn-bg, #D9772E);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hlb__eyebrow-leaf {
  width: 16px;
  height: 16px;
  display: inline-flex;
  color: var(--hlb-btn-bg, #D9772E);
}

.hlb__eyebrow-leaf svg {
  width: 100%;
  height: 100%;
}

.hlb__eyebrow-line {
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.hlb__heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.1;
  font-weight: 600;
  color: var(--hlb-accent, #1F4B33);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

.hlb__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.hlb__divider-line {
  width: 44px;
  height: 1px;
  background: var(--hlb-btn-bg, #D9772E);
  opacity: 0.6;
}

.hlb__divider-leaf {
  width: 18px;
  height: 18px;
  color: var(--hlb-accent, #1F4B33);
}

.hlb__divider-leaf svg {
  width: 100%;
  height: 100%;
}

.hlb__subheading {
  font-size: 17px;
  line-height: 1.6;
  color: #6B6355;
  margin: 0;
}

/* ---------- Pill nav ---------- */

.hlb__pillnav-wrap {
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease 0.05s, transform 0.7s ease 0.05s;
}

.hlb__pillnav-wrap.hlb-in-view {
  opacity: 1;
  transform: translateY(0);
}

.hlb__pillnav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.hlb__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(31, 75, 51, 0.16);
  background: #FFFFFF;
  color: #2B2620;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.35s cubic-bezier(.2,.8,.2,1),
              color 0.35s cubic-bezier(.2,.8,.2,1),
              border-color 0.35s ease,
              transform 0.25s ease,
              box-shadow 0.35s ease;
}

.hlb__pill:hover {
  border-color: var(--hlb-accent, #1F4B33);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(31, 75, 51, 0.1);
}

.hlb__pill.is-active {
  background: var(--hlb-accent, #1F4B33);
  border-color: var(--hlb-accent, #1F4B33);
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(31, 75, 51, 0.25);
}

.hlb__pill-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  flex-shrink: 0;
}

.hlb__pill-icon svg,
.hlb__pill-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hlb__pill-name {
  line-height: 1;
}

/* ---------- Main card ---------- */

.hlb__card {
  position: relative;
  background: var(--hlb-card, #FFFFFF);
  border-radius: 30px;
  box-shadow: 0 30px 70px -20px rgba(31, 75, 51, 0.18), 0 2px 12px rgba(0,0,0,0.04);
  padding: 56px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease 0.1s, transform 0.8s ease 0.1s;
}

.hlb__card.hlb-in-view {
  opacity: 1;
  transform: translateY(0);
}

.hlb__card-track {
  position: relative;
  min-height: 460px;
}

.hlb__panel {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hlb__panel[hidden] {
  display: none;
}

.hlb__panel.is-active {
  opacity: 1;
  transform: translateX(0);
}

.hlb__panel.is-leaving {
  opacity: 0;
  transform: translateX(-16px);
  position: absolute;
  inset: 0;
}

/* ---------- Panel media (left) ---------- */

.hlb__panel-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}

.hlb__media-circle {
  position: absolute;
  width: 84%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(31, 75, 51, 0.08), rgba(217, 119, 46, 0.05) 70%);
  z-index: 0;
}

.hlb__herb-image {
  position: relative;
  z-index: 1;
  max-width: var(--hlb-image-size, 420px);
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.16));
}

.hlb__herb-image.is-floating {
  animation: hlb-float 5s ease-in-out infinite;
}

@keyframes hlb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.hlb__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #FBF3E9;
  border: 1px solid rgba(31, 75, 51, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.hlb__badge-percent {
  font-size: 17px;
  font-weight: 700;
  color: var(--hlb-accent, #1F4B33);
  line-height: 1.2;
}

.hlb__badge-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6B6355;
}

/* ---------- Panel content (right) ---------- */

.hlb__panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.hlb__category {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hlb-btn-bg, #D9772E);
}

.hlb__panel-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FBF3E9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hlb-accent, #1F4B33);
  flex-shrink: 0;
}

.hlb__panel-icon svg {
  width: 16px;
  height: 16px;
}

.hlb__panel-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.hlb__herb-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600;
  color: var(--hlb-accent, #1F4B33);
  margin: 0 0 14px;
  line-height: 1.1;
}

.hlb__description {
  font-size: 16px;
  line-height: 1.7;
  color: #565044;
  margin: 0 0 22px;
  max-width: 46ch;
}

.hlb__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(31, 75, 51, 0.12);
  margin-bottom: 22px;
}

.hlb__benefits {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.hlb__benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: #33302A;
}

.hlb__check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--hlb-accent, #1F4B33);
}

.hlb__check svg {
  width: 100%;
  height: 100%;
}

.hlb__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  background: var(--hlb-btn-bg, #D9772E);
  color: var(--hlb-btn-text, #FFFFFF);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease, background 0.3s ease;
  box-shadow: 0 14px 28px -8px rgba(217, 119, 46, 0.5);
}

.hlb__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -8px rgba(217, 119, 46, 0.55);
}

.hlb__button-arrow {
  width: 16px;
  height: 16px;
  display: inline-flex;
  transition: transform 0.3s ease;
}

.hlb__button-arrow svg {
  width: 100%;
  height: 100%;
}

.hlb__button:hover .hlb__button-arrow {
  transform: translateX(4px);
}

/* ---------- Arrows ---------- */

.hlb__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #FFFFFF;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  color: var(--hlb-accent, #1F4B33);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.hlb__arrow svg {
  width: 18px;
  height: 18px;
}

.hlb__arrow:hover {
  background: var(--hlb-accent, #1F4B33);
  color: #FFFFFF;
  box-shadow: 0 14px 30px rgba(31, 75, 51, 0.28);
}

.hlb__arrow--prev {
  left: -24px;
}

.hlb__arrow--next {
  right: -24px;
}

/* ---------- Dots ---------- */

.hlb__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

.hlb__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(31, 75, 51, 0.22);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
}

.hlb__dot:hover {
  background: rgba(31, 75, 51, 0.45);
}

.hlb__dot.is-active {
  background: var(--hlb-accent, #1F4B33);
  width: 22px;
  border-radius: 999px;
}

/* ---------- Bottom features ---------- */

.hlb__features {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(var(--hlb-features-desktop, 4), minmax(0, 1fr));
  gap: 40px;
}

.hlb__feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-left: 24px;
  border-left: 1px solid rgba(31, 75, 51, 0.12);
}

.hlb__feature:first-child {
  border-left: none;
  padding-left: 0;
}

.hlb__feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FBF3E9;
  color: var(--hlb-accent, #1F4B33);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hlb__feature-icon svg {
  width: 20px;
  height: 20px;
}

.hlb__feature-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.hlb__feature-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #2B2620;
  margin: 0 0 4px;
}

.hlb__feature-description {
  font-size: 13.5px;
  line-height: 1.5;
  color: #7A7266;
  margin: 0;
}

.hlb__empty {
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed rgba(31, 75, 51, 0.3);
  border-radius: 20px;
  color: #7A7266;
  font-size: 15px;
}

/* =========================================================
   Responsive — tablet
   ========================================================= */

@media (max-width: 989px) {
  .hlb__card {
    padding: 40px;
  }

  .hlb__panel {
    gap: 36px;
  }

  .hlb__arrow--prev { left: -12px; }
  .hlb__arrow--next { right: -12px; }
}

/* =========================================================
   Responsive — mobile
   ========================================================= */

@media (max-width: 749px) {
  .hlb {
    padding-top: calc(var(--hlb-pad-top, 96px) * 0.6);
    padding-bottom: calc(var(--hlb-pad-bottom, 96px) * 0.6);
  }

  .hlb__inner {
    padding: 0 16px;
  }

  .hlb__header {
    margin-bottom: 32px;
  }

  .hlb__pillnav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    -webkit-overflow-scrolling: touch;
  }

  .hlb__pillnav::-webkit-scrollbar {
    display: none;
  }

  .hlb__pill {
    scroll-snap-align: start;
    padding: 10px 16px;
    font-size: 14px;
  }

  .hlb__card {
    padding: 24px;
    border-radius: 24px;
  }

  .hlb__card-track {
    min-height: 0;
  }

  .hlb__panel {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }

  .hlb__panel-media {
    min-height: 260px;
  }

  .hlb__herb-image {
    max-width: 240px;
  }

  .hlb__panel-top {
    justify-content: center;
    gap: 10px;
  }

  .hlb__rule {
    margin-left: auto;
    margin-right: auto;
  }

  .hlb__benefits {
    text-align: left;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .hlb__button {
    width: 100%;
    justify-content: center;
  }

  .hlb__arrow {
    display: none;
  }

  .hlb__badge {
    width: 76px;
    height: 76px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .hlb__features {
    grid-template-columns: repeat(var(--hlb-features-mobile, 1), minmax(0, 1fr));
    gap: 28px;
    margin-top: 40px;
  }

  .hlb__feature {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(31, 75, 51, 0.12);
    padding-top: 20px;
  }

  .hlb__feature:first-child {
    border-top: none;
    padding-top: 0;
  }
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .hlb__header,
  .hlb__pillnav-wrap,
  .hlb__card,
  .hlb__panel,
  .hlb__pill,
  .hlb__button,
  .hlb__arrow,
  .hlb__dot,
  .hlb__herb-image.is-floating {
    transition: none !important;
    animation: none !important;
  }
}

/* Focus visibility for accessibility */
.hlb__pill:focus-visible,
.hlb__arrow:focus-visible,
.hlb__dot:focus-visible,
.hlb__button:focus-visible {
  outline: 2px solid var(--hlb-accent, #1F4B33);
  outline-offset: 3px;
}
/* =========================================================
   Herbalever Benefits — "Our Herbs, Their Benefits"
   Append this block to the end of assets/herbalever.css.
   Scoped entirely under .hlb to avoid touching other styles.
   ========================================================= */

.hlb {
  background: var(--hlb-bg, #FBF3E9);
  padding-top: var(--hlb-pad-top, 96px);
  padding-bottom: var(--hlb-pad-bottom, 96px);
  color: #2B2620;
  font-family: inherit;
  overflow: hidden;
}

.hlb__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.hlb *,
.hlb *::before,
.hlb *::after {
  box-sizing: border-box;
}

/* ---------- Header ---------- */

.hlb__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.hlb__header.hlb-in-view {
  opacity: 1;
  transform: translateY(0);
}

.hlb__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--hlb-btn-bg, #D9772E);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hlb__eyebrow-leaf {
  width: 16px;
  height: 16px;
  display: inline-flex;
  color: var(--hlb-btn-bg, #D9772E);
}

.hlb__eyebrow-leaf svg {
  width: 100%;
  height: 100%;
}

.hlb__eyebrow-line {
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.hlb__heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.1;
  font-weight: 600;
  color: var(--hlb-accent, #1F4B33);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

.hlb__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.hlb__divider-line {
  width: 44px;
  height: 1px;
  background: var(--hlb-btn-bg, #D9772E);
  opacity: 0.6;
}

.hlb__divider-leaf {
  width: 18px;
  height: 18px;
  color: var(--hlb-accent, #1F4B33);
}

.hlb__divider-leaf svg {
  width: 100%;
  height: 100%;
}

.hlb__subheading {
  font-size: 17px;
  line-height: 1.6;
  color: #6B6355;
  margin: 0;
}

/* ---------- Pill nav ---------- */

.hlb__pillnav-wrap {
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease 0.05s, transform 0.7s ease 0.05s;
}

.hlb__pillnav-wrap.hlb-in-view {
  opacity: 1;
  transform: translateY(0);
}

.hlb__pillnav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.hlb__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(31, 75, 51, 0.16);
  background: #FFFFFF;
  color: #2B2620;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.35s cubic-bezier(.2,.8,.2,1),
              color 0.35s cubic-bezier(.2,.8,.2,1),
              border-color 0.35s ease,
              transform 0.25s ease,
              box-shadow 0.35s ease;
}

.hlb__pill:hover {
  border-color: var(--hlb-accent, #1F4B33);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(31, 75, 51, 0.1);
}

.hlb__pill.is-active {
  background: var(--hlb-accent, #1F4B33);
  border-color: var(--hlb-accent, #1F4B33);
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(31, 75, 51, 0.25);
}

.hlb__pill-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  flex-shrink: 0;
}

.hlb__pill-icon svg,
.hlb__pill-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hlb__pill-name {
  line-height: 1;
}

/* ---------- Main card ---------- */

.hlb__card {
  position: relative;
  background: var(--hlb-card, #FFFFFF);
  border-radius: 30px;
  box-shadow: 0 30px 70px -20px rgba(31, 75, 51, 0.18), 0 2px 12px rgba(0,0,0,0.04);
  padding: 56px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease 0.1s, transform 0.8s ease 0.1s;
}

.hlb__card.hlb-in-view {
  opacity: 1;
  transform: translateY(0);
}

.hlb__card-track {
  position: relative;
  min-height: 460px;
}

.hlb__panel {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hlb__panel[hidden] {
  display: none;
}

.hlb__panel.is-active {
  opacity: 1;
  transform: translateX(0);
}

.hlb__panel.is-leaving {
  opacity: 0;
  transform: translateX(-16px);
  position: absolute;
  inset: 0;
}

/* ---------- Panel media (left) ---------- */

.hlb__panel-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}

.hlb__media-circle {
  position: absolute;
  width: 84%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(31, 75, 51, 0.08), rgba(217, 119, 46, 0.05) 70%);
  z-index: 0;
}

.hlb__herb-image {
  position: relative;
  z-index: 1;
  max-width: var(--hlb-image-size, 420px);
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.16));
}

.hlb__herb-image.is-floating {
  animation: hlb-float 5s ease-in-out infinite;
}

@keyframes hlb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.hlb__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #FBF3E9;
  border: 1px solid rgba(31, 75, 51, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.hlb__badge-percent {
  font-size: 17px;
  font-weight: 700;
  color: var(--hlb-accent, #1F4B33);
  line-height: 1.2;
}

.hlb__badge-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6B6355;
}

/* ---------- Panel content (right) ---------- */

.hlb__panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.hlb__category {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hlb-btn-bg, #D9772E);
}

.hlb__panel-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FBF3E9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hlb-accent, #1F4B33);
  flex-shrink: 0;
}

.hlb__panel-icon svg {
  width: 16px;
  height: 16px;
}

.hlb__panel-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.hlb__herb-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600;
  color: var(--hlb-accent, #1F4B33);
  margin: 0 0 14px;
  line-height: 1.1;
}

.hlb__description {
  font-size: 16px;
  line-height: 1.7;
  color: #565044;
  margin: 0 0 22px;
  max-width: 46ch;
}

.hlb__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(31, 75, 51, 0.12);
  margin-bottom: 22px;
}

.hlb__benefits {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.hlb__benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: #33302A;
}

.hlb__check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--hlb-accent, #1F4B33);
}

.hlb__check svg {
  width: 100%;
  height: 100%;
}

.hlb__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  background: var(--hlb-btn-bg, #D9772E);
  color: var(--hlb-btn-text, #FFFFFF);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease, background 0.3s ease;
  box-shadow: 0 14px 28px -8px rgba(217, 119, 46, 0.5);
}

.hlb__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -8px rgba(217, 119, 46, 0.55);
}

.hlb__button-arrow {
  width: 16px;
  height: 16px;
  display: inline-flex;
  transition: transform 0.3s ease;
}

.hlb__button-arrow svg {
  width: 100%;
  height: 100%;
}

.hlb__button:hover .hlb__button-arrow {
  transform: translateX(4px);
}

/* ---------- Arrows ---------- */

.hlb__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #FFFFFF;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  color: var(--hlb-accent, #1F4B33);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.hlb__arrow svg {
  width: 18px;
  height: 18px;
}

.hlb__arrow:hover {
  background: var(--hlb-accent, #1F4B33);
  color: #FFFFFF;
  box-shadow: 0 14px 30px rgba(31, 75, 51, 0.28);
}

.hlb__arrow--prev {
  left: -24px;
}

.hlb__arrow--next {
  right: -24px;
}

/* ---------- Dots ---------- */

.hlb__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

.hlb__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(31, 75, 51, 0.22);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
}

.hlb__dot:hover {
  background: rgba(31, 75, 51, 0.45);
}

.hlb__dot.is-active {
  background: var(--hlb-accent, #1F4B33);
  width: 22px;
  border-radius: 999px;
}

/* ---------- Bottom features ---------- */

.hlb__features {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(var(--hlb-features-desktop, 4), minmax(0, 1fr));
  gap: 40px;
}

.hlb__feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-left: 24px;
  border-left: 1px solid rgba(31, 75, 51, 0.12);
}

.hlb__feature:first-child {
  border-left: none;
  padding-left: 0;
}

.hlb__feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FBF3E9;
  color: var(--hlb-accent, #1F4B33);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hlb__feature-icon svg {
  width: 20px;
  height: 20px;
}

.hlb__feature-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.hlb__feature-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #2B2620;
  margin: 0 0 4px;
}

.hlb__feature-description {
  font-size: 13.5px;
  line-height: 1.5;
  color: #7A7266;
  margin: 0;
}

.hlb__empty {
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed rgba(31, 75, 51, 0.3);
  border-radius: 20px;
  color: #7A7266;
  font-size: 15px;
}

/* =========================================================
   Responsive — tablet
   ========================================================= */

@media (max-width: 989px) {
  .hlb__card {
    padding: 40px;
  }

  .hlb__panel {
    gap: 36px;
  }

  .hlb__arrow--prev { left: -12px; }
  .hlb__arrow--next { right: -12px; }
}

/* =========================================================
   Responsive — mobile
   ========================================================= */

@media (max-width: 749px) {
  .hlb {
    padding-top: calc(var(--hlb-pad-top, 96px) * 0.6);
    padding-bottom: calc(var(--hlb-pad-bottom, 96px) * 0.6);
  }

  .hlb__inner {
    padding: 0 16px;
  }

  .hlb__header {
    margin-bottom: 32px;
  }

  .hlb__pillnav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    -webkit-overflow-scrolling: touch;
  }

  .hlb__pillnav::-webkit-scrollbar {
    display: none;
  }

  .hlb__pill {
    scroll-snap-align: start;
    padding: 10px 16px;
    font-size: 14px;
  }

  .hlb__card {
    padding: 24px;
    border-radius: 24px;
  }

  .hlb__card-track {
    min-height: 0;
  }

  .hlb__panel {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }

  .hlb__panel-media {
    min-height: 260px;
  }

  .hlb__herb-image {
    max-width: 240px;
  }

  .hlb__panel-top {
    justify-content: center;
    gap: 10px;
  }

  .hlb__rule {
    margin-left: auto;
    margin-right: auto;
  }

  .hlb__benefits {
    text-align: left;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .hlb__button {
    width: 100%;
    justify-content: center;
  }

  .hlb__arrow {
    display: none;
  }

  .hlb__badge {
    width: 76px;
    height: 76px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .hlb__features {
    grid-template-columns: repeat(var(--hlb-features-mobile, 1), minmax(0, 1fr));
    gap: 28px;
    margin-top: 40px;
  }

  .hlb__feature {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(31, 75, 51, 0.12);
    padding-top: 20px;
  }

  .hlb__feature:first-child {
    border-top: none;
    padding-top: 0;
  }
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .hlb__header,
  .hlb__pillnav-wrap,
  .hlb__card,
  .hlb__panel,
  .hlb__pill,
  .hlb__button,
  .hlb__arrow,
  .hlb__dot,
  .hlb__herb-image.is-floating {
    transition: none !important;
    animation: none !important;
  }
}

/* Focus visibility for accessibility */
.hlb__pill:focus-visible,
.hlb__arrow:focus-visible,
.hlb__dot:focus-visible,
.hlb__button:focus-visible {
  outline: 2px solid var(--hlb-accent, #1F4B33);
  outline-offset: 3px;
}

/* ============================================================
   HERBALEVER HERO — TRUST BADGES (v2, premium redesign)
   ------------------------------------------------------------
   Paste / merge this block into assets/herbalever.css, replacing
   the previous .iff3eef-trust-* rules. Nothing else in the file
   needs to change — this only restyles the trust badge component
   under the CTA button. No JS. Uses the same CSS custom
   properties already set inline on .iff3eef-hero, with safe
   fallbacks matching the brand palette.

   Design reference: Aesop / Forest Essentials / Kama Ayurveda /
   Ritual / Apple / Notion / Stripe — minimal, quiet, generous
   whitespace, no gradients, no glossy effects, no heavy shadows.
   ============================================================ */

/* ---------- Local tokens (scoped, do not leak) ---------- */
.iff3eef-trust-list {
  --iff3eef-trust-icon-bg: var(--iff3eef-trust-bg, #FFFCF7);
  --iff3eef-trust-icon-bg-hover: #FFF8EC;                 /* slightly warmer on hover */
  --iff3eef-trust-icon-border: var(--iff3eef-trust-border, #EFE3CF);
  --iff3eef-trust-icon-border-hover: #DFCBA3;             /* darker border on hover */
  --iff3eef-trust-title-color: var(--iff3eef-text-color, #1F3B26);
  --iff3eef-trust-subtitle-color: #8A8578;                /* warm medium gray */
  --iff3eef-trust-icon-color: var(--iff3eef-text-color, #1F3B26);
  --iff3eef-trust-ease: cubic-bezier(0.22, 1, 0.36, 1);    /* soft premium easing */
}

/* ---------- List / grid container ---------- */
.iff3eef-trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: clamp(12px, 2.5vw, 48px);
  width: 100%;
  /* Deliberately wider than --iff3eef-content-width (560px default):
     the heading/paragraph column is too narrow to hold 4 spacious
     badges without ugly 3-line wraps, so this row is allowed to
     extend beyond that column. Nothing else in the hero clips it —
     .iff3eef-hero itself is the only ancestor with overflow:hidden,
     and its width is the full section, so this has room to breathe. */
  min-width: min(680px, 92vw);
}

/* ---------- Item (li) + optional link wrapper ----------
   The link (when a badge has a URL) wraps the icon + text spans,
   otherwise the <li> itself is the flex container. Both are
   styled identically so the layout never shifts. */
.iff3eef-trust-item,
.iff3eef-trust-item__link {
  display: flex;
  flex-direction: row; /* explicit — prevents any other rule elsewhere from silently forcing column */
  align-items: flex-start; /* was: center — keeps icons level across badges regardless of text line count */
  gap: clamp(6px, 1.5vw, 14px); /* was: fixed 14px — shrinks to give text more room in tight columns */
  text-decoration: none;
  color: inherit;
}

.iff3eef-trust-item {
  flex: 0 1 auto; /* was: 1 1 0 — sizes to content instead of forcing every badge to equal width */
  min-width: 0; /* required for flex-shrink to actually work */
  transition: transform 220ms var(--iff3eef-trust-ease);
  will-change: transform;
}

.iff3eef-trust-item__link {
  outline-offset: 4px;
  border-radius: 12px;
}

/* Whole item lifts subtly on hover / keyboard focus */
.iff3eef-trust-item:hover,
.iff3eef-trust-item:focus-within {
  transform: translateY(-3px);
}

/* ---------- Icon container ----------
   Small premium rounded-square / glass-capsule container,
   46–54px, warm cream background, soft beige border, very
   soft shadow. No gradients, no glossy overlays. */
.iff3eef-trust-item__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 6vw, 50px);
  height: clamp(34px, 6vw, 50px);
  border-radius: 18px;
  background: var(--iff3eef-trust-icon-bg);
  border: 1px solid var(--iff3eef-trust-icon-border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  color: var(--iff3eef-trust-icon-color);
  transition:
    background-color 220ms var(--iff3eef-trust-ease),
    border-color 220ms var(--iff3eef-trust-ease),
    box-shadow 220ms var(--iff3eef-trust-ease);
}

.iff3eef-trust-item:hover .iff3eef-trust-item__icon,
.iff3eef-trust-item:focus-within .iff3eef-trust-item__icon {
  background: var(--iff3eef-trust-icon-bg-hover);
  border-color: var(--iff3eef-trust-icon-border-hover);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.09);
}

/* Icon glyph — consistent, slightly heavier weight so every
   icon in the dropdown reads as one family (stroke-width is
   also set to 2.2 directly on the SVGs in the Liquid file). */
.iff3eef-trust-svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: block;
}

/* ---------- Text block ---------- */
.iff3eef-trust-item__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0; /* required so text can shrink instead of forcing the row wider than the container */
  max-width: clamp(90px, 20vw, 220px); /* raised cap — lets short labels reach one line instead of being squeezed to match the longest badge */
}

.iff3eef-trust-item__title {
  font-size: clamp(11px, 1.7vw, 16px);
  line-height: 1.3;
  font-weight: 600;
  color: var(--iff3eef-trust-title-color);
  letter-spacing: -0.01em;
  word-break: normal; /* was implicitly default — never break mid-word if a space is available */
  overflow-wrap: normal; /* was: break-word — only break as an absolute last resort (see hyphens below) */
  hyphens: auto; /* graceful "Chem-icals" instead of an abrupt "Chemical/s" cut */
}

.iff3eef-trust-item__subtitle {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--iff3eef-trust-subtitle-color);
}

/* ---------- Responsive behavior ----------
   Desktop (>990px): UNCHANGED — original single row, flex,
   generous gaps, icon 50px / svg 24px, title + subtitle shown.

   ===== UPDATED 2026-07-12 =====
   Tablet (750–989px) and Mobile (<750px) now keep all 4 badges
   in ONE horizontal row instead of wrapping into a 2x2 grid.
   - display:flex + flex-wrap:nowrap (no CSS Grid, no wrapping)
   - each badge gets flex:1 so all 4 are equal width
   - icon + title are centered within each badge
   - subtitle is hidden (title only) to keep the row compact
   - icon container shrinks to 44px / svg to 20px on mobile
   - horizontal gaps are reduced so nothing overflows
   The previous 2x2 grid rules and the <380px single-column
   stack have been removed — a single row is now used at every
   width below desktop. */

/* Tablet (750–989px) — single row, equal width, centered
   NOTE: selector is scoped with .iff3eef-hero and key layout
   properties carry !important so this cannot be overridden by
   any leftover/duplicate .iff3eef-trust-list rule elsewhere in
   the stylesheet (e.g. an old grid rule that wasn't removed). */
@media screen and (max-width: 989px) {
  .iff3eef-hero .iff3eef-trust-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    column-gap: 16px;
    row-gap: 0;
  }

  .iff3eef-hero .iff3eef-trust-item,
  .iff3eef-hero .iff3eef-trust-item__link {
    flex: 0 1 auto !important; /* was: 1 1 0 — content-sized, not forced equal-width */
    width: auto !important;
    min-width: 0 !important; /* allow items to shrink evenly, prevents overflow */
    max-width: none !important;
    flex-direction: column !important;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .iff3eef-hero .iff3eef-trust-item__text {
    max-width: none;
    align-items: center;
    text-align: center;
  }
}

/* Mobile (<750px) — single row, smaller icons, subtitle hidden */
@media screen and (max-width: 749px) {
  .iff3eef-hero .iff3eef-trust-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    column-gap: 8px;
    row-gap: 0;
  }

  .iff3eef-hero .iff3eef-trust-item,
  .iff3eef-hero .iff3eef-trust-item__link {
    flex: 0 1 auto !important; /* was: 1 1 0 — content-sized, not forced equal-width */
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-direction: column !important;
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  .iff3eef-hero .iff3eef-trust-item__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .iff3eef-hero .iff3eef-trust-svg {
    width: 20px;
    height: 20px;
  }

  .iff3eef-hero .iff3eef-trust-item__text {
    max-width: none;
    align-items: center;
    text-align: center;
  }

  .iff3eef-hero .iff3eef-trust-item__title {
    font-size: 12.5px;
    line-height: 1.3;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: auto;
    max-width: 100%;
  }

  /* Hide only the subtitle on mobile — title stays visible */
  .iff3eef-hero .iff3eef-trust-item__subtitle {
    display: none !important;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .iff3eef-trust-item,
  .iff3eef-trust-item__icon {
    transition: none;
  }

  .iff3eef-trust-item:hover,
  .iff3eef-trust-item:focus-within {
    transform: none;
  }
}
/* ==========================================================
   HERBALEVER BEST SELLERS
   Mobile Responsive Override (2 Product Layout)
   Add at END of herbalever.css
   ========================================================== */

/* ---------------- Tablet ---------------- */

@media screen and (min-width:768px) and (max-width:1023px){

  .hl-bestsellers__grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:22px;
  }

}

/* ---------------- Mobile ---------------- */

@media screen and (max-width:767px){

  .hl-bestsellers__inner{
    padding:0 18px;
  }

  .hl-bestsellers__header{
    margin-bottom:30px;
  }

  .hl-bestsellers__grid{

    display:grid !important;
    grid-template-columns:1fr !important;

    gap:22px;

  }

  .hl-product-card{

    width:100%;
    border-radius:22px;

  }

  .hl-product-card__image-wrap{

    aspect-ratio:4 / 5;

  }

  .hl-product-card__wishlist{

    top:16px;
    right:16px;

    width:44px;
    height:44px;

  }

  .hl-product-card__wishlist svg{

    width:20px;
    height:20px;

  }

  .hl-product-card__body{

    padding:22px;

    gap:10px;

  }

  .hl-product-card__rating svg{

    width:15px;
    height:15px;

  }

  .hl-product-card__title{

    font-size:20px;
    line-height:1.45;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;

  }

  .hl-product-card__price-regular,
  .hl-product-card__price-sale{

    font-size:24px;
    font-weight:700;

  }

  .hl-product-card__price-compare{

    font-size:16px;

  }

  .hl-product-card__add-btn{

    width:100%;

    padding:16px 24px;

    font-size:16px;

    margin-top:14px;

    border-radius:999px;

  }

}

/* ==========================================================
   HERBALEVER GLOBAL TYPOGRAPHY SYSTEM
   ========================================================== */

:root{

    --hl-font:'Montserrat',sans-serif;

}

/* Entire Website */

body,
html,
input,
textarea,
select,
button{

    font-family:var(--hl-font)!important;

}

/* Every Heading */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--hl-font)!important;
    font-weight:700;

}

/* Paragraph */

p,
span,
small,
label,
li{

    font-family:var(--hl-font)!important;

}

/* Links */

a{

    font-family:var(--hl-font)!important;

}

/* Buttons */

button,
.button,
.btn{

    font-family:var(--hl-font)!important;
    font-weight:600;

}

/* Navigation */

.header,
.header *{

    font-family:var(--hl-font)!important;

}

/* Product */

.product,
.product *{

    font-family:var(--hl-font)!important;

}

/* Collection */

.collection,
.collection *{

    font-family:var(--hl-font)!important;

}

/* Cart */

.cart,
.cart *{

    font-family:var(--hl-font)!important;

}

/* Footer */

.footer,
.footer *{

    font-family:var(--hl-font)!important;

}

/* FAQ */

.faq,
.faq *{

    font-family:var(--hl-font)!important;

}

/* Rich Text */

.rte,
.rte *{

    font-family:var(--hl-font)!important;

}

/* ===== Force Black Header Navigation ===== */

.menu-list__link,
.menu-list__link-title,
.menu-list__link span,
.menu-list__link a {
    color: #000000 !important;
}

.menu-list__link svg,
.header svg,
.header .icon {
    color: #000000 !important;
    stroke: #000000 !important;
}