/* ============================================================
   BRAND COLOR BINDINGS — FINAL OVERRIDE
   Mengikat elemen yang masih hardcode warna lama (hijau/ungu)
   ke warna brand dari Settings (var(--primary), var(--accent),
   var(--btn-*) dst).
   Dimuat PALING AKHIR (layout head + akhir konten landing page)
   sehingga menang atas semua file override lain.
   ============================================================ */

/* ---------- 1. TOMBOL ADD TO BAG ---------- */
.product-add-to-bag,
#products .landing-product-add-to-bag,
.sale-home-section .product-add-to-bag,
.catalogue-page .catalogue-actions--cart-only [data-cart-add] {
  background: linear-gradient(135deg, var(--btn-primary-bg, var(--primary, #4e7661)) 0%, var(--primary-dark, #3a5948) 55%, var(--btn-primary-bg, var(--primary, #4e7661)) 100%) !important;
  border-color: var(--btn-primary-bg, var(--primary, #4e7661)) !important;
  color: var(--btn-primary-text, #ffffff) !important;
  -webkit-text-fill-color: var(--btn-primary-text, #ffffff) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .18) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary, #4e7661) 30%, transparent) !important;
}
.product-add-to-bag:hover,
#products .landing-product-add-to-bag:hover,
.sale-home-section .product-add-to-bag:hover,
.catalogue-page .catalogue-actions--cart-only [data-cart-add]:hover {
  background: linear-gradient(135deg, var(--primary-dark, #3a5948) 0%, var(--btn-primary-bg, var(--primary, #4e7661)) 100%) !important;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--primary, #4e7661) 42%, transparent) !important;
}
.product-add-to-bag.is-adding,
.catalogue-page .catalogue-actions--cart-only [data-cart-add].is-adding {
  background: linear-gradient(135deg, var(--primary-dark, #3a5948) 0%, var(--btn-primary-bg, var(--primary, #4e7661)) 100%) !important;
}
.product-add-to-bag.is-added,
.catalogue-page .catalogue-actions--cart-only [data-cart-add].is-added {
  background: linear-gradient(135deg, var(--btn-primary-bg, var(--primary, #4e7661)) 0%, var(--primary-dark, #3a5948) 100%) !important;
}

/* ---------- 2. SECTION SALE ---------- */
html body .sale-home-section .sale-home-badge {
  background: #ffffff !important;
  border-color: color-mix(in srgb, var(--primary, #4e7661) 80%, transparent) !important;
}
html body .sale-home-section .sale-home-badge span,
html body .sale-home-section .sale-home-badge strong {
  color: var(--primary-dark, #3a5948) !important;
  -webkit-text-fill-color: var(--primary-dark, #3a5948) !important;
}
html body .sale-home-section .sale-home-countdown,
html body .sale-home-section .sale-home-countdown span,
html body .sale-home-section .sale-home-countdown strong,
html body .sale-home-section .sale-home-countdown small,
html body .sale-home-section .sale-home-countdown b,
html body .sale-home-section .sale-home-see {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}
html body .sale-home-section .sale-home-discount {
  background: var(--btn-primary-bg, var(--primary, #4e7661)) !important;
  color: var(--btn-primary-text, #ffffff) !important;
  -webkit-text-fill-color: var(--btn-primary-text, #ffffff) !important;
}
html body .sale-home-section .sale-home-arrow {
  background: color-mix(in srgb, var(--primary, #4e7661) 92%, transparent) !important;
  border-color: rgba(255, 255, 255, .35) !important;
  color: #ffffff !important;
}
html body .sale-home-section .sale-home-card-box {
  border-color: color-mix(in srgb, var(--primary, #4e7661) 30%, transparent) !important;
  box-shadow: 0 16px 38px color-mix(in srgb, var(--primary, #4e7661) 14%, transparent) !important;
}
html body .sale-home-section .sale-home-info {
  background: var(--primary-dark, #3a5948) !important;
  color: #ffffff !important;
}
html body .sale-home-section .sale-home-info p,
html body .sale-home-section .sale-home-info h3,
html body .sale-home-section .sale-home-info strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body .sale-home-section .sale-home-info .sale-home-original {
  color: rgba(255, 255, 255, .58) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .58) !important;
}

/* ---------- 3. SHOP BY SKIN TYPE ---------- */
html body .skin-type-showcase .skin-type-showcase__heading p {
  color: var(--primary, #4e7661) !important;
  -webkit-text-fill-color: var(--primary, #4e7661) !important;
}
html body .skin-type-showcase .skin-type-tab {
  background: #ffffff !important;
  border-color: color-mix(in srgb, var(--primary, #4e7661) 30%, transparent) !important;
  color: #30223d !important;
}
html body .skin-type-showcase .skin-type-tab:hover,
html body .skin-type-showcase .skin-type-tab.active {
  border-color: var(--primary, #4e7661) !important;
  background: color-mix(in srgb, var(--primary, #4e7661) 10%, #ffffff) !important;
  transform: translateX(4px) !important;
}
html body .skin-type-showcase .skin-type-tab small {
  color: var(--primary-dark, #3a5948) !important;
  -webkit-text-fill-color: var(--primary-dark, #3a5948) !important;
  opacity: .62 !important;
}
html body .skin-type-showcase .skin-type-tab.active small {
  color: var(--primary, #4e7661) !important;
  -webkit-text-fill-color: var(--primary, #4e7661) !important;
  opacity: 1 !important;
}
html body .skin-type-showcase .skin-type-tab.active strong,
html body .skin-type-showcase .skin-type-tab[aria-selected="true"] strong {
  color: #30223d !important;
  -webkit-text-fill-color: #30223d !important;
}
html body .skin-type-showcase .skin-type-tab__icon {
  background: var(--skin-color, var(--primary, #4e7661)) !important;
  color: #ffffff !important;
}
html body .skin-type-showcase .skin-type-panel__eyebrow {
  color: var(--primary, #4e7661) !important;
  -webkit-text-fill-color: var(--primary, #4e7661) !important;
}
html body .skin-type-showcase .skin-type-panel__tags span,
html body .skin-type-showcase .skin-type-panel__tags a {
  color: var(--primary-dark, #3a5948) !important;
  -webkit-text-fill-color: var(--primary-dark, #3a5948) !important;
  background: var(--primary-pale, #e8f2ec) !important;
  border-color: color-mix(in srgb, var(--primary, #4e7661) 75%, transparent) !important;
  box-shadow: none !important;
}
html body .skin-type-showcase .skin-type-panel__tags span:hover,
html body .skin-type-showcase .skin-type-panel__tags a:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: var(--primary, #4e7661) !important;
  border-color: var(--primary, #4e7661) !important;
}
html body .skin-type-showcase .skin-type-panel__button {
  background: var(--primary, #4e7661) !important;
  border-color: var(--primary, #4e7661) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body .skin-type-showcase .skin-type-panel__button:hover {
  background: var(--primary-dark, #3a5948) !important;
  border-color: var(--primary-dark, #3a5948) !important;
}
html body .skin-type-showcase .skin-type-product-card {
  border-color: color-mix(in srgb, var(--primary, #4e7661) 42%, transparent) !important;
}
html body .skin-type-showcase .skin-type-product-card__image {
  background: var(--primary-pale, #e8f2ec) !important;
}
html body .skin-type-showcase .skin-type-product-card__image > span {
  background: var(--primary, #4e7661) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--primary, #4e7661) 22%, transparent) !important;
}
html body .skin-type-showcase .skin-type-product-card__body {
  background: linear-gradient(145deg, var(--primary, #4e7661) 0%, var(--primary-dark, #3a5948) 100%) !important;
  color: #ffffff !important;
}
html body .skin-type-showcase .skin-type-product-card__body small {
  color: rgba(255, 255, 255, .82) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .82) !important;
}
html body .skin-type-showcase .skin-type-product-card__body h3,
html body .skin-type-showcase .skin-type-product-card__body h4,
html body .skin-type-showcase .skin-type-product-card__body strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body .skin-type-showcase .skin-type-product-card:hover {
  border-color: var(--primary, #4e7661) !important;
  box-shadow: 0 23px 50px color-mix(in srgb, var(--primary, #4e7661) 20%, transparent) !important;
}

/* ---------- 4. MEGA MENU / DROPDOWN SHOP ---------- */
body:not(.admin-dashboard) .tab-underline-active {
  color: var(--primary, #4e7661) !important;
  border-color: var(--primary, #4e7661) !important;
}
.shop-mega-eyebrow,
.shop-mega-link::after,
.shop-mega-mini::after,
.shop-mega-card span,
.shop-mega-card em,
.shop-mega-link:hover strong,
.shop-mega-link.active strong,
.shop-mega-mini:hover,
.shop-mega-link:hover small,
.shop-mega-card:hover span,
.shop-mega-card:hover em {
  color: var(--primary, #4e7661) !important;
  -webkit-text-fill-color: var(--primary, #4e7661) !important;
}
.shop-mega-link::after,
.shop-mega-mini::after {
  background: var(--primary, #4e7661) !important;
}
.site-nav .site-nav-shop-dropdown .shop-mega-link:hover,
.site-nav .site-nav-shop-dropdown .shop-mega-link.active,
.site-nav .site-nav-shop-dropdown .shop-mega-mini:hover {
  border-color: color-mix(in srgb, var(--primary, #4e7661) 40%, transparent) !important;
  background: color-mix(in srgb, var(--primary, #4e7661) 10%, #ffffff) !important;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--primary, #4e7661) 12%, transparent) !important;
}
.shop-mega-panel::before {
  background: linear-gradient(90deg, var(--primary, #4e7661) 0%, var(--primary-soft, #d4e4db) 100%) !important;
}

/* ---------- 5. TOMBOL GREEN/OLIVE-GRADIENT (halaman publik) ---------- */
body:not(.admin-dashboard) [class*="green-gradient"],
body:not(.admin-dashboard) [class*="olive-gradient"] {
  background: var(--btn-primary-bg, var(--primary, #4e7661)) !important;
  background-image: none !important;
  color: var(--btn-primary-text, #ffffff) !important;
  -webkit-text-fill-color: var(--btn-primary-text, #ffffff) !important;
  border: none !important;
  border-color: var(--btn-primary-bg, var(--primary, #4e7661)) !important;
  box-shadow: none !important;
  filter: none !important;
}
body:not(.admin-dashboard) [class*="green-gradient"]:hover,
body:not(.admin-dashboard) [class*="green-gradient"]:focus,
body:not(.admin-dashboard) [class*="olive-gradient"]:hover,
body:not(.admin-dashboard) [class*="olive-gradient"]:focus {
  background: var(--btn-primary-dark, var(--primary-dark, #3a5948)) !important;
  background-image: none !important;
  border-color: var(--btn-primary-dark, var(--primary-dark, #3a5948)) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ---------- 6. BEAUTY HIGHLIGHT ---------- */
body.has-landing-hero section.beauty-highlight-section {
  background: var(--primary, #4e7661) !important;
  background-image: none !important;
}
body.has-landing-hero section.beauty-highlight-section .text-white {
  color: #ffffff !important;
}
body.has-landing-hero section.beauty-highlight-section .beauty-highlight-underline {
  background: var(--primary, #4e7661) !important;
  background-image: none !important;
}
body.has-landing-hero section.beauty-highlight-section .green-gradient-btn {
  border: none !important;
  box-shadow: none !important;
}

/* ---------- 6a. HERO TITLE SIZE ---------- */
.hero-section .text-hero-xl {
  font-size: 32px !important;
  line-height: 1.05 !important;
}
@media (min-width: 768px) {
  .hero-section .text-hero-xl {
    font-size: 40px !important;
  }
}

/* ---------- 6b. CTA SECTION TITLE SIZE ---------- */
#beauty-highlight-heading {
  font-size: 32px !important;
}
@media (min-width: 768px) {
  #beauty-highlight-heading {
    font-size: 40px !important;
  }
}

/* ---------- 6c. CONNECT WITH US TITLE SIZE ---------- */
section.relative.py-20 h2 {
  font-size: 32px !important;
}
@media (min-width: 768px) {
  section.relative.py-20 h2 {
    font-size: 40px !important;
  }
}

/* ---------- 7. HEADER NAV — HAPUS EFEK HOVER ---------- */
/* Hover TIDAK mengubah warna dan TIDAK menampilkan garis bawah (kecuali .active).
   Specificity dinaikkan agar menang atas landing-flat-brand-colors.css
   (hover/active dipaksa warna primary) saat header sudah scroll. */

/* Homepage belum scroll (header transparan): base link PUTIH. */
body.has-landing-hero:not(.admin-dashboard) .site-header:not(.is-scrolled) .site-nav a {
  color: #ffffff !important;
}
body.has-landing-hero:not(.admin-dashboard) .site-header:not(.is-scrolled) .site-nav-shop-trigger {
  color: #ffffff !important;
}
body.has-landing-hero:not(.admin-dashboard) .site-header:not(.is-scrolled) .site-actions .circle-action {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
}
body.has-landing-hero:not(.admin-dashboard) .site-header:not(.is-scrolled) .mobile-menu-toggle .mobile-menu-toggle__line {
  background: #ffffff !important;
}
body.has-landing-hero:not(.admin-dashboard) .site-header:not(.is-scrolled) .site-logo {
  filter: brightness(0) invert(1) !important;
}

/* Homepage belum scroll (header transparan): hover pakai primary dari setting. */
body.has-landing-hero:not(.admin-dashboard) .site-header:not(.is-scrolled) .site-nav a:hover:not(.active),
body.has-landing-hero:not(.admin-dashboard) .site-header:not(.is-scrolled) .site-nav a:focus-visible:not(.active) {
  color: var(--primary, #4e7661) !important;
}
body.has-landing-hero:not(.admin-dashboard) .site-header:not(.is-scrolled) .site-nav-shop:hover .site-nav-shop-trigger {
  color: var(--primary, #4e7661) !important;
}
body.has-landing-hero:not(.admin-dashboard) .site-header:not(.is-scrolled) .site-actions .circle-action:hover {
  background: var(--primary, #4e7661) !important;
  border-color: var(--primary, #4e7661) !important;
  color: #ffffff !important;
}

/* Homepage sudah scroll (header putih): hover pakai primary settingan. */
body.has-landing-hero:not(.admin-dashboard) .site-header.is-scrolled .site-nav a:hover:not(.active),
body.has-landing-hero:not(.admin-dashboard) .site-header.is-scrolled .site-nav a:focus-visible:not(.active) {
  color: var(--primary, #4e7661) !important;
}
body.has-landing-hero:not(.admin-dashboard) .site-header.is-scrolled .site-nav-shop:hover .site-nav-shop-trigger {
  color: var(--primary, #4e7661) !important;
}

/* Halaman inner (header putih): hover pakai primary settingan. */
body:not(.admin-dashboard) .site-header.site-header--inner-page .site-nav a:hover:not(.active),
body:not(.admin-dashboard) .site-header.site-header--inner-page .site-nav a:focus-visible:not(.active) {
  color: var(--primary, #4e7661) !important;
}
body:not(.admin-dashboard) .site-header.site-header--inner-page .site-nav-shop:hover .site-nav-shop-trigger {
  color: var(--primary, #4e7661) !important;
}

/* Hapus garis bawah saat hover (semua halaman/state). */
body:not(.admin-dashboard) .site-header .site-nav a:hover:not(.active)::after,
body:not(.admin-dashboard) .site-header .site-nav a:focus-visible:not(.active)::after,
body:not(.admin-dashboard) .site-header .site-nav-shop:hover .site-nav-shop-trigger::after {
  transform: scaleX(0) !important;
  opacity: 0 !important;
}

/* Garis bawah halaman aktif tetap tampil, warnanya primary settingan. */
body:not(.admin-dashboard) .site-header .site-nav a.active::after,
body:not(.admin-dashboard) .site-header .site-nav a.active:hover::after,
body:not(.admin-dashboard) .site-header .site-nav-shop.active .site-nav-shop-trigger::after {
  background: var(--primary, #4e7661) !important;
  transform: scaleX(1) !important;
  opacity: 1 !important;
}

/* Hilangkan icon panah (→) pada link dropdown menu Shop, baik saat hover maupun tidak. */
body:not(.admin-dashboard) .site-nav .site-nav-shop-dropdown a::after,
body:not(.admin-dashboard) .site-nav .site-nav-shop-dropdown a:hover::after {
  content: none !important;
  display: none !important;
}

/* ---------- 8. GARIS TAB PRODUK + CARD MEGA MENU (warna primary) ---------- */
body:not(.admin-dashboard) #products [data-products-tab].tab-underline-active::after {
  background: var(--primary, #4e7661) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary, #4e7661) 35%, transparent) !important;
}
body:not(.admin-dashboard) .site-nav .site-nav-shop-dropdown .shop-mega-card:hover {
  border-color: color-mix(in srgb, var(--primary, #4e7661) 55%, transparent) !important;
  box-shadow: 0 22px 48px color-mix(in srgb, var(--primary, #4e7661) 18%, transparent) !important;
  filter: none !important;
}

/* ---------- 9. SECTION "PRODUK PILIHAN" (sale home redesign) ---------- */
/* Background primary 10% di atas putih (bukan gradien hijau/putih polos). */
body.has-landing-hero .sale-home-section,
.sale-home-section {
  background: color-mix(in srgb, var(--primary, #4e7661) 10%, #ffffff) !important;
  background-image: none !important;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
@media (min-width: 768px) {
  body.has-landing-hero .sale-home-section,
  .sale-home-section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}
/* Container sama seperti New Arrival: max-w-7xl + px-4 md:px-8. */
body.has-landing-hero .sale-home-shell,
.sale-home-shell {
  width: 100% !important;
  max-width: 80rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
@media (min-width: 768px) {
  body.has-landing-hero .sale-home-shell,
  .sale-home-shell {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}
/* Kepala section: judul kiri + tombol kanan. */
body.has-landing-hero .sale-home-head,
.sale-home-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  margin-bottom: 28px !important;
}
body.has-landing-hero .sale-home-title-wrap,
.sale-home-title-wrap {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
}
body.has-landing-hero .sale-home-title,
.sale-home-title {
  margin: 0 !important;
  color: #24192d !important;
  -webkit-text-fill-color: #24192d !important;
  font-size: 32px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}
@media (min-width: 768px) {
  body.has-landing-hero .sale-home-title,
  .sale-home-title {
    font-size: 40px !important;
  }
}
/* Tombol "Lihat Semua" menjadi tombol primary. */
body:not(.admin-dashboard) .sale-home-see,
.sale-home-see {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  background: var(--btn-primary-bg, var(--primary, #4e7661)) !important;
  background-image: none !important;
  border: 1px solid var(--btn-primary-bg, var(--primary, #4e7661)) !important;
  color: var(--btn-primary-text, #ffffff) !important;
  -webkit-text-fill-color: var(--btn-primary-text, #ffffff) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary, #4e7661) 30%, transparent) !important;
}
body.has-landing-hero .sale-home-see:hover,
.sale-home-see:hover {
  background: var(--btn-primary-dark, var(--primary-dark, #3a5948)) !important;
  background-image: none !important;
  border-color: var(--btn-primary-dark, var(--primary-dark, #3a5948)) !important;
}
/* Countdown tetap terbaca di latar terang (teks warna primary gelap). */
body.has-landing-hero .sale-home-countdown,
body.has-landing-hero .sale-home-countdown span,
body.has-landing-hero .sale-home-countdown strong,
body.has-landing-hero .sale-home-countdown small,
body.has-landing-hero .sale-home-countdown b,
.sale-home-countdown,
.sale-home-countdown span,
.sale-home-countdown strong,
.sale-home-countdown small,
.sale-home-countdown b {
  color: var(--primary-dark, #3a5948) !important;
  -webkit-text-fill-color: var(--primary-dark, #3a5948) !important;
  text-shadow: none !important;
}
/* Grid: 2 kolom mobile, 4 kolom desktop. */
body.has-landing-hero .sale-home-grid,
.sale-home-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}
@media (min-width: 768px) {
  body.has-landing-hero .sale-home-grid,
  .sale-home-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
  }
}
body.has-landing-hero .sale-home-card,
.sale-home-card {
  flex: none !important;
  width: auto !important;
  scroll-snap-align: none !important;
}
/* Card: putih, rounded, border primary lembut, tinggi seragam. */
body.has-landing-hero .sale-home-card-box,
.sale-home-card-box {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #ffffff !important;
  border: 1px solid color-mix(in srgb, var(--primary, #4e7661) 28%, transparent) !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 38px color-mix(in srgb, var(--primary, #4e7661) 12%, transparent) !important;
}
body.has-landing-hero .sale-home-image,
.sale-home-image {
  border-radius: 21px 21px 0 0 !important;
}
/* Body info: panel putih seperti card New Arrival/Best Seller (bukan primary). */
body.has-landing-hero .sale-home-info,
.sale-home-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #24192d !important;
  border-radius: 0 0 21px 21px !important;
  padding: 15px 16px 18px !important;
}
body.has-landing-hero .sale-home-info p,
.sale-home-info p {
  color: var(--primary, #b23c7c) !important;
  -webkit-text-fill-color: var(--primary, #b23c7c) !important;
}
body.has-landing-hero .sale-home-info h3,
.sale-home-info h3 {
  color: #24192d !important;
  -webkit-text-fill-color: #24192d !important;
  font-size: 14px !important;
}
body.has-landing-hero .sale-home-info .sale-home-original,
.sale-home-info .sale-home-original {
  color: #9aa0a6 !important;
  -webkit-text-fill-color: #9aa0a6 !important;
}
body.has-landing-hero .sale-home-info strong,
.sale-home-info strong {
  color: #24192d !important;
  -webkit-text-fill-color: #24192d !important;
  font-size: 20px !important;
}
/* Badge diskon: warna primary pekat. */
body.has-landing-hero .sale-home-discount,
.sale-home-discount {
  background: var(--btn-primary-bg, var(--primary, #4e7661)) !important;
  background-image: none !important;
  color: var(--btn-primary-text, #ffffff) !important;
  -webkit-text-fill-color: var(--btn-primary-text, #ffffff) !important;
}

/* ---------- 10. CARD PRODUK: LABEL, BARIS AKSI SLIDE-UP, ROW DISKON ---------- */
/* Label NEW / BEST SELLER di kiri atas gambar — pill rounded penuh. */
.product-card-tag {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .14) !important;
}
.product-card-tag--new {
  background: var(--primary, #b23c7c) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.product-card-tag--best {
  background: linear-gradient(135deg, var(--primary, #b23c7c) 0%, var(--primary-dark, #8b2f61) 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Baris aksi (wishlist + tambah ke keranjang) di bawah gambar. */
.product-card-actions {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  z-index: 6 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.product-card-actions .wishlist-love {
  position: static !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
  border-radius: 999px !important;
  color: var(--primary, #b23c7c) !important;
  -webkit-text-fill-color: var(--primary, #b23c7c) !important;
  font-size: 18px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16) !important;
}
.product-card-actions .wishlist-love:hover,
.product-card-actions .wishlist-love.is-wished {
  background: var(--primary, #b23c7c) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: var(--primary, #b23c7c) !important;
}
#products .product-card-actions .product-add-to-bag,
.sale-home-section .product-card-actions .product-add-to-bag,
.catalogue-page .product-card-actions .product-add-to-bag {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
}
/* Button "Tambah ke Keranjang" di card: default putih + outline primary,
   saat hover jadi primary + font putih. */
#products .product-card-actions .product-add-to-bag,
.sale-home-section .product-card-actions .product-add-to-bag,
.catalogue-page .product-card-actions .product-add-to-bag {
  background: #ffffff !important;
  background-image: none !important;
  border: 1.5px solid var(--primary, #b23c7c) !important;
  color: var(--primary, #b23c7c) !important;
  -webkit-text-fill-color: var(--primary, #b23c7c) !important;
  text-shadow: none !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary, #b23c7c) 16%, transparent) !important;
}
#products .product-card-actions .product-add-to-bag:hover,
.sale-home-section .product-card-actions .product-add-to-bag:hover,
.catalogue-page .product-card-actions .product-add-to-bag:hover,
#products .product-card-actions .product-add-to-bag:active,
.sale-home-section .product-card-actions .product-add-to-bag:active,
.catalogue-page .product-card-actions .product-add-to-bag:active {
  background: var(--primary, #b23c7c) !important;
  background-image: none !important;
  border-color: var(--primary, #b23c7c) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .18) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary, #b23c7c) 30%, transparent) !important;
}

/* Desktop (perangkat ber-hover): baris aksi tersembunyi di bawah gambar,
   naik dari bawah ke atas saat card di-hover. */
@media (hover: hover) and (pointer: fine) {
  .product-card-actions {
    transform: translateY(150%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), opacity .4s ease, visibility .4s ease !important;
  }
  #products .product-card-hover:hover .product-card-actions,
  .sale-home-section .product-card-hover:hover .product-card-actions,
  .catalogue-page .product-card-hover:hover .product-card-actions,
  #products .product-card-hover .product-card-actions:focus-within,
  .sale-home-section .product-card-hover .product-card-actions:focus-within,
  .catalogue-page .product-card-hover .product-card-actions:focus-within {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}
/* Perangkat sentuh (tanpa hover): baris aksi selalu tampil. */
@media (hover: none), (pointer: coarse) {
  .product-card-actions {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  #products .product-card-actions .product-add-to-bag,
  .sale-home-section .product-card-actions .product-add-to-bag,
  .catalogue-page .product-card-actions .product-add-to-bag {
    font-size: 9.5px !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
    padding: 8px 10px !important;
    min-height: 36px !important;
  }
  .product-card-actions .wishlist-love {
    flex-basis: 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

/* Row diskon + harga coret (1 baris) di bawah harga. */
.product-card-sale-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 8px !important;
}
.product-card-discount-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: var(--color-secondary, #C4922A) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
.product-card-original-price {
  color: #9aa0a6 !important;
  -webkit-text-fill-color: #9aa0a6 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: line-through !important;
  text-decoration-color: #b9bec4 !important;
}

/* Card di section Produk Pilihan memakai struktur yang sama persis dengan
   card tab New Arrival/Best Seller (rounded + gambar atas). */
.sale-home-section .product-card-hover {
  border-radius: 18px !important;
  overflow: hidden !important;
}
.sale-home-section .product-card-hover > div.relative.overflow-hidden {
  border-radius: 18px 18px 0 0 !important;
}

/* ============================================================
   PROFILE DROPDOWN — WARNA SERAGAM #2a2034
   ============================================================ */
.profile-dropdown {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, .08) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .15) !important;
}
.profile-dropdown::before {
  background: var(--primary, #4e7661) !important;
}
.profile-dropdown a,
.profile-dropdown button {
  color: #2a2034 !important;
}
.profile-dropdown a:hover,
.profile-dropdown button:hover {
  background: var(--primary-pale, rgba(74, 122, 58, .08)) !important;
  color: var(--primary, #2a2034) !important;
}

/* ============================================================
   NAV HOVER/ACTIVE — FINAL OVERRIDE SEMUA HALAMAN
   Menang atas semua file CSS lain (load terakhir).
   ============================================================ */
.site-header .site-nav a:hover,
.site-header .site-nav a.active,
.site-header .site-nav-shop:hover .site-nav-shop-trigger,
.site-header .site-nav-shop.active .site-nav-shop-trigger {
  color: var(--primary, #4e7661) !important;
}
.site-header .site-nav a::after,
.site-header .site-nav-shop-trigger::after {
  background: var(--primary, #4e7661) !important;
}

/* ============================================================
   HAPUS SHADOW SEMUA ITEM HEADER
   ============================================================ */
.site-header {
  box-shadow: none !important;
}
.site-header .site-logo,
.site-header .site-logo img {
  filter: none !important;
  box-shadow: none !important;
}
.site-header .circle-action {
  box-shadow: none !important;
}
.site-header .profile-trigger {
  box-shadow: none !important;
}
.site-header .auth-actions a {
  box-shadow: none !important;
}
.site-header .profile-dropdown {
  box-shadow: 0 20px 50px rgba(0, 0, 0, .12) !important;
}

/* ============================================================
   HOMEPAGE HEADER — TRANSPARAN SAAT ATAS, PUTIH SAAT SCROLL
   Load paling akhir, menang atas semua CSS lain.
   ============================================================ */
body.has-landing-hero .hero-section {
  margin-top: 0 !important;
}
@media (max-width: 1080px) {
  body.has-landing-hero .hero-section {
    margin-top: 0 !important;
  }
}
body.has-landing-hero .site-header:not(.is-scrolled) {
  background: transparent !important;
  background-image: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
body.has-landing-hero .site-header.is-scrolled {
  background: #ffffff !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Homepage header transparan: auth buttons putih teks */
body.has-landing-hero .site-header:not(.is-scrolled) .auth-actions a {
  border-color: #ffffff !important;
  color: #ffffff !important;
}
body.has-landing-hero .site-header:not(.is-scrolled) .auth-actions a:first-child {
  background: var(--primary, #4e7661) !important;
  border-color: var(--primary, #4e7661) !important;
  color: #ffffff !important;
}
body.has-landing-hero .site-header:not(.is-scrolled) .auth-actions a:first-child:hover {
  background: var(--primary-dark, #3a5948) !important;
  border-color: var(--primary-dark, #3a5948) !important;
}
body.has-landing-hero .site-header:not(.is-scrolled) .auth-actions a:last-child {
  background: transparent !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}
body.has-landing-hero .site-header:not(.is-scrolled) .auth-actions a:last-child:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--primary, #4e7661) !important;
}

/* Homepage header scrolled: auth buttons pakai primary color */
body.has-landing-hero .site-header.is-scrolled .auth-actions a {
  border-color: var(--primary, #4e7661) !important;
  color: var(--primary, #4e7661) !important;
}
body.has-landing-hero .site-header.is-scrolled .auth-actions a:first-child {
  background: var(--primary, #4e7661) !important;
  border-color: var(--primary, #4e7661) !important;
  color: #ffffff !important;
}
body.has-landing-hero .site-header.is-scrolled .auth-actions a:first-child:hover {
  background: var(--primary-dark, #3a5948) !important;
  border-color: var(--primary-dark, #3a5948) !important;
}
body.has-landing-hero .site-header.is-scrolled .auth-actions a:last-child {
  background: transparent !important;
  border-color: var(--primary, #4e7661) !important;
  color: var(--primary, #4e7661) !important;
}
body.has-landing-hero .site-header.is-scrolled .auth-actions a:last-child:hover {
  background: var(--primary, #4e7661) !important;
  border-color: var(--primary, #4e7661) !important;
  color: #ffffff !important;
}

/* ============================================================
   SHOP DROPDOWN — FINAL OVERRIDE (light theme)
   Berlaku untuk semua variant dropdown shop.
   ============================================================ */
.site-nav-shop-dropdown,
.glow-shop-menu,
.glow-shop-menu,
.glowskin-shop-nav-menu {
  background: #ffffff !important;
  border-color: var(--primary-soft, rgba(78,118,97,.18)) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.10) !important;
}
.site-nav-shop-dropdown::before,
.site-nav-shop-dropdown:before {
  background: #ffffff !important;
  border-color: var(--primary-soft, rgba(78,118,97,.18)) !important;
}
.site-nav .site-nav-shop-dropdown a,
.glow-shop-menu a,
.glowskin-shop-nav-menu a {
  color: #2a2034 !important;
}
.site-nav .site-nav-shop-dropdown a small,
.glow-shop-menu a small,
.glowskin-shop-nav-menu a small {
  color: rgba(42,32,52,.5) !important;
}
.site-nav .site-nav-shop-dropdown a:after,
.glow-shop-menu a::after,
.glowskin-shop-nav-menu a::after {
  color: var(--primary, #4e7661) !important;
}
.site-nav .site-nav-shop-dropdown a:hover,
.site-nav .site-nav-shop-dropdown a.active,
.glow-shop-menu a:hover,
.glow-shop-menu a.active,
.glowskin-shop-nav-menu a:hover,
.glowskin-shop-nav-menu a.active {
  background: color-mix(in srgb, var(--primary, #4e7661) 8%, #ffffff) !important;
  color: var(--primary, #4e7661) !important;
}
.site-nav .site-nav-shop-dropdown a:hover small,
.site-nav .site-nav-shop-dropdown a.active small,
.glow-shop-menu a:hover small,
.glow-shop-menu a.active small,
.glowskin-shop-nav-menu a:hover small,
.glowskin-shop-nav-menu a.active small {
  color: rgba(42,32,52,.65) !important;
}

/* ============================================================
   CATALOGUE REDESIGN — BRAND COLOR BINDINGS
   Mengikat elemen baru catalogue-redesign.css ke warna brand.
   ============================================================ */

/* Hero overlay: primary color */
.catalogue-hero-overlay {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary, #b23c7c) 85%, transparent) 0%, color-mix(in srgb, var(--primary, #b23c7c) 55%, transparent) 50%, transparent 100%) !important;
}

/* Category tabs: active state */
.catalogue-cat-tab.active {
  background: var(--btn-primary-bg, var(--primary, #b23c7c)) !important;
  color: var(--btn-primary-text, #ffffff) !important;
  border-color: var(--btn-primary-bg, var(--primary, #b23c7c)) !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary, #b23c7c) 25%, transparent) !important;
}
.catalogue-cat-tab:hover:not(.active) {
  border-color: color-mix(in srgb, var(--primary, #b23c7c) 40%, transparent) !important;
  color: var(--primary, #b23c7c) !important;
  background: color-mix(in srgb, var(--primary, #b23c7c) 6%, #ffffff) !important;
}

/* Search focus ring */
.catalogue-search:focus-within {
  border-color: var(--primary, #b23c7c) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #b23c7c) 12%, transparent) !important;
}
.catalogue-search-icon {
  color: var(--primary, #b23c7c) !important;
}

/* Filter select focus */
.catalogue-filter-select:focus {
  border-color: var(--primary, #b23c7c) !important;
}

/* Empty state */
.catalogue-empty-icon {
  background: var(--primary, #b23c7c) !important;
}
.catalogue-empty-btn {
  background: var(--btn-primary-bg, var(--primary, #b23c7c)) !important;
  color: var(--btn-primary-text, #ffffff) !important;
}
.catalogue-empty-btn:hover {
  background: var(--primary-dark, #8b2f61) !important;
}

/* ============================================================
   HEADER ICONS — SVG + WARNA PRIMARY
   Wishlist, Search, Cart memakai ikon SVG (bukan emoji),
   semua diwarnai sesuai warna primary brand.
   ============================================================ */
.site-actions .circle-action .header-icon-svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  display: block !important;
  fill: none !important;
  stroke: var(--primary, #4e7661) !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform: none !important;
}
.site-actions .circle-action .search-icon-svg {
  stroke: var(--primary, #4e7661) !important;
}
.site-actions .circle-action > span,
.site-actions .search-icon-wrap {
  color: var(--primary, #4e7661) !important;
}

/* Saat header hero transparan di-hover (bg jadi primary), ikon putih */
body.has-landing-hero:not(.admin-dashboard) .site-header:not(.is-scrolled) .site-actions .circle-action:hover > span,
body.has-landing-hero:not(.admin-dashboard) .site-header:not(.is-scrolled) .site-actions .circle-action:hover .search-icon-wrap {
  color: #ffffff !important;
}
body.has-landing-hero:not(.admin-dashboard) .site-header:not(.is-scrolled) .site-actions .circle-action:hover .header-icon-svg,
body.has-landing-hero:not(.admin-dashboard) .site-header:not(.is-scrolled) .site-actions .circle-action:hover .search-icon-svg {
  stroke: #ffffff !important;
}