/* =========================================================
   Oxinex — herbal theme
   Activated by data-theme="herbal" on <html>.

   A light theme like the default, so the two variables that do double
   duty (--tg-color-white-default for text-on-fill, --tg-heading-color
   for dark button fills) keep working untouched. The work here is the
   brand hue: primary moves from warm terracotta to a deep herbal
   green, surfaces pick up a cool green tint, and the warm-toned
   background artwork is re-hued.

   1. palette
   2. page + surfaces
   3. themed backgrounds + artwork
   4. small corrections
   5. toggle icon
   ========================================================= */

/* ---------- 1. palette ---------- */
[data-theme="herbal"] {
  --tg-theme-primary: #2f7a4f;
  --tg-color-yellow-light: #e0a316;
  --tg-color-brown-light: #4b9a68;
  /* accent for link hovers, rating stars and the product price —
     terracotta #FF3D00 by default, which clashes with green */
  --tg-color-orange-light: #d8930f;

  --tg-heading-color: #16261d;
  --tg-body-color: #5c6b62;

  --tg-color-gray-1: #eef5ec;
  --tg-color-gray-2: #e5efe3;
  --tg-border-1: #d3e2d0;

  --ox-page: #f7faf6;
  --ox-surface: #ffffff;
  --ox-surface-2: #eef5ec;
  --ox-border: #dde9da;
  --ox-header-solid: #1d3a28;

  color-scheme: light;
}

/* ---------- 2. page + surfaces ---------- */
[data-theme="herbal"] body {
  background-color: var(--ox-page);
  color: var(--tg-body-color);
}
[data-theme="herbal"] .section-bg,
[data-theme="herbal"] .section-bg-three {
  background-color: var(--tg-color-gray-1);
}
[data-theme="herbal"] .section-bg-two {
  background-color: var(--tg-color-gray-2);
}
[data-theme="herbal"] .customer__form-wrap,
[data-theme="herbal"] .order__info-wrap,
[data-theme="herbal"] .search__results,
[data-theme="herbal"] .product__notfound-list a,
[data-theme="herbal"] .coupon__code-info {
  border-color: var(--ox-border);
}
[data-theme="herbal"] .search__result-thumb,
[data-theme="herbal"] .product__details-img,
[data-theme="herbal"] .product__item .product__thumb {
  background-color: var(--tg-color-gray-1);
}

/* ---------- 3. themed backgrounds + artwork ---------- */
/* main.js writes data-background onto the style attribute, so these
   need !important to win */
/* deep enough for the header's white nav text to stay legible */
[data-theme="herbal"] .slider__bg {
  background-image: radial-gradient(circle at 74% 26%, rgba(76, 160, 106, 0.32), transparent 58%),
                    radial-gradient(circle at 16% 80%, rgba(224, 163, 22, 0.16), transparent 55%),
                    linear-gradient(140deg, #1d3a28 0%, #24512f 55%, #12251a 100%) !important;
}
[data-theme="herbal"] .slider__content .title,
[data-theme="herbal"] .slider__content p,
[data-theme="herbal"] .slider__content .sub-title {
  color: var(--tg-color-white-default);
}
[data-theme="herbal"] .features__bg,
[data-theme="herbal"] .video__bg {
  background-image: linear-gradient(150deg, #fbfdfa 0%, #eaf4e8 60%, #dcebd9 100%) !important;
}
[data-theme="herbal"] .cta__bg {
  background-image: radial-gradient(circle at 80% 70%, rgba(224, 163, 22, 0.22), transparent 55%),
                    linear-gradient(120deg, #2f7a4f 0%, #205a39 60%, #123d25 100%) !important;
}
[data-theme="herbal"] .footer__bg {
  background-image: linear-gradient(160deg, #16261d 0%, #1c3626 60%, #0f1d15 100%) !important;
}
[data-theme="herbal"] .breadcrumb__bg {
  background-image: linear-gradient(135deg, #1b3325 0%, #24492f 60%, #101d15 100%) !important;
}
/* the decorative shapes are drawn in the terracotta palette */
[data-theme="herbal"] .top-shape img,
[data-theme="herbal"] .bottom-shape img,
[data-theme="herbal"] .section__shape img,
[data-theme="herbal"] .about__shape img,
[data-theme="herbal"] .faq__shape img,
[data-theme="herbal"] .testimonial__shape img {
  filter: hue-rotate(85deg) saturate(0.8);
}

/* ---------- 4. small corrections ---------- */
[data-theme="herbal"] .search__suggest .list-wrap a { border-color: var(--ox-border); }
[data-theme="herbal"] input,
[data-theme="herbal"] textarea,
[data-theme="herbal"] select { border-color: var(--ox-border); }
[data-theme="herbal"] input:focus,
[data-theme="herbal"] textarea:focus,
[data-theme="herbal"] select:focus { border-color: var(--tg-theme-primary); }

/* ---------- 5. toggle icon ---------- */
.theme-toggle .icon-leaf { display: none; }
[data-theme="herbal"] .theme-toggle .icon-sun { display: none; }
[data-theme="herbal"] .theme-toggle .icon-leaf { display: block; }