/* ============================================================
   Kersantara Fabric — Professional Elegant Palette Override
   Background tetap putih #ffffff
   Navy   #1c4b62 = primary / heading / header / footer / button
   Gold   #e8a519 = accent / subheading / divider / hover / icon
   Red    #cd3318 = CTA penting / sale / badge / error (sparingly)
   Hanya warna, tidak mengubah layout.
   Dimuat SETELAH theme.css sehingga menang tanpa edit theme.
   ============================================================ */
:root {
  --kf-white: #ffffff;
  --kf-navy: #1c4b62;
  --kf-navy-deep: #14384c;
  --kf-navy-light: #2a5a75;
  --kf-gold: #e8a519;
  --kf-gold-soft: rgba(232, 165, 25, 0.12);
  --kf-red: #cd3318;
  --kf-red-soft: rgba(205, 51, 24, 0.08);

  /* — Background tetap putih — */
  --COLOR-BACKGROUND: #ffffff !important;
  --COLOR-BACKGROUND-ACCENT: #f7f8f9 !important;
  --COLOR-BACKGROUND-OVERLAY: rgba(255, 255, 255, 0.92) !important;
  --COLOR-FOOTER-BG: #ffffff !important;

  /* — Heading & teks: navy elegan, body tetap terbaca — */
  --COLOR-HEADING: #1c4b62 !important;
  --COLOR-TEXT: #1c4b62 !important;
  --COLOR-TEXT-DARK: #1c4b62 !important;
  --COLOR-TEXT-LIGHT: rgba(28, 75, 98, 0.72) !important;
  --COLOR-LABEL: rgba(28, 75, 98, 0.9) !important;
  --COLOR-INPUT-PLACEHOLDER: rgba(28, 75, 98, 0.5) !important;
  --COLOR-CART-TEXT: rgba(28, 75, 98, 0.65) !important;
  --COLOR-FOOTER-TEXT: #1c4b62 !important;
  --COLOR-FOOTER-PLACEHOLDER-TEXT: rgba(28, 75, 98, 0.5) !important;
  --COLOR-FOOTER-BG-HOVER: rgba(28, 75, 98, 0.05) !important;

  /* — Footer bottom: navy + teks putih + hover gold — */
  --COLOR-FOOTER-BOTTOM-TEXT: #ffffff !important;
  --COLOR-FOOTER-BOTTOM-BG: #1c4b62 !important;
  --COLOR-FOOTER-BOTTOM-BG-HOVER: rgba(232, 165, 25, 0.14) !important;
  --COLOR-FOOTER-BOTTOM-BORDER: rgba(255, 255, 255, 0.16) !important;

  /* — Border & overlay: navy tint — */
  --COLOR-BORDER: #1c4b62 !important;
  --COLOR-BORDER-ALPHA-8: rgba(28, 75, 98, 0.14) !important;
  --COLOR-BORDER-DARK: #1c4b62 !important;
  --COLOR-SEARCH-OVERLAY: rgba(28, 75, 98, 0.5) !important;

  /* — Error / validasi: merah bata (hanya di sini) — */
  --COLOR-ERROR-TEXT: #cd3318 !important;
  --COLOR-ERROR-BG: rgba(205, 51, 24, 0.06) !important;
  --COLOR-ERROR-BORDER: rgba(205, 51, 24, 0.3) !important;

  /* — Badge / tag hemat: merah elegan — */
  --COLOR-BADGE-TEXT: #ffffff !important;
  --COLOR-BADGE-BG: #cd3318 !important;
  --COLOR-TAG-SAVING: #cd3318 !important;

  /* — Button primary: navy, hover navy-light — */
  --BTN-PRIMARY-BORDER-COLOR: #1c4b62 !important;
  --BTN-PRIMARY-BG-COLOR: #1c4b62 !important;
  --BTN-PRIMARY-TEXT-COLOR: #ffffff !important;
  --BTN-PRIMARY-BG-COLOR-BRIGHTER: #2a5a75 !important;

  /* — Button secondary: putih + border navy, hover gold tint — */
  --BTN-SECONDARY-BORDER-COLOR: #1c4b62 !important;
  --BTN-SECONDARY-BG-COLOR: #ffffff !important;
  --BTN-SECONDARY-TEXT-COLOR: #1c4b62 !important;
  --BTN-SECONDARY-BG-COLOR-BRIGHTER: rgba(232, 165, 25, 0.16) !important;

  /* — Review widget (Judge.me): satukan ke navy/gold — */
  --jdgm-primary-color: #1c4b62 !important;
  --jdgm-secondary-color: rgba(28, 75, 98, 0.1) !important;
  --jdgm-write-review-bg-color: #1c4b62 !important;
  --jdgm-reviewer-name-color: #1c4b62 !important;
}

/* — Announcement bar: navy + teks putih — */
announcement-bar {
  --text: #ffffff !important;
  --bg: #1c4b62 !important;
}
.announcement__bar-outer {
  --text: #ffffff !important;
  --bg: #1c4b62 !important;
}

/* — Subheading aksen emas (elegant, tidak norak) — */
.rich__subheading.subheading-text,
h4 {
  border-color: rgba(232, 165, 25, 0.5);
}

/* — Search popdown: border navy, tombol navy, hover gold — */
header-search-popdown .search-form:focus-within {
  border-color: #1c4b62 !important;
  box-shadow: 0 0 0 4px rgba(28, 75, 98, 0.1) !important;
}
header-search-popdown .search-form .search-popdown__submit {
  background: #1c4b62 !important;
}
header-search-popdown .search-form .search-popdown__submit:hover {
  background: #e8a519 !important;
}

/* — Link / hover emas untuk sentuhan premium — */
a:hover,
.footer__block__menu-link a:hover,
.footer__menu__item a:hover {
  text-decoration-color: #e8a519;
}

/* — Harga diskon / sale tetap merah bata — */
.price--sale,
.sale-badge,
.badge--sale {
  color: #cd3318 !important;
  border-color: rgba(205, 51, 24, 0.3) !important;
}

/* — Floating WhatsApp button: navy (hover tetap navy) — */
.sc-btn-whatsapp {
  background: rgba(28, 75, 98, 0.85) !important;
  border-color: #ffffff !important;
}
.sc-btn-whatsapp:hover {
  background: #1c4b62 !important;
}
.sc-btn-whatsapp svg [stroke] {
  stroke: #ffffff;
}

/* — Button & garis border button: navy — */
.btn,
button.btn,
.btn--primary {
  border-color: #1c4b62 !important;
}
.btn--primary {
  background-color: #1c4b62 !important;
  color: #ffffff !important;
}

/* — Pengecualian: tombol putih di atas hero/foto gelap tetap putih — */
.btn--white {
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* — Footer: teks link/menu navy, hover gold — */
.footer__block__menu-link a {
  color: #1c4b62 !important;
}
.footer__block__menu-link a:hover {
  color: #e8a519 !important;
}

/* ============================================================
   Netralisir coklat hardcode di theme.css.
   theme.css adalah file bersama (dipakai dashboard juga) sehingga
   TIDAK diedit — override ini hanya dimuat halaman non-dashboard.
   ============================================================ */
::selection {
  background-color: #1c4b62 !important;
}

/* — Footer bawah: matikan gradient coklat, paksa navy flat — */
.footer__bottom {
  background-image: none !important;
  background-color: #1c4b62 !important;
}

/* — Announcement bar: FLAT navy, tanpa gradasi, teks putih — */
.announcement__wrapper--top {
  background: #1c4b62 !important;
}
.announcement__bar-outer .announcement__bar {
  background-image: none !important;
  background-color: #1c4b62 !important;
  color: #ffffff !important;
}

/* — Tombol payment & submit produk: navy flat — */
body .btn--primary.btn--solid,
body .shopify-challenge__button,
body .shopify-payment-button__button--unbranded {
  background-image: none !important;
  background-color: #1c4b62 !important;
}
.product__container .product__form-block .product__form-buttons .product__form-submit {
  background-image: none !important;
  background-color: #1c4b62 !important;
}

/* — Badge produk: merah bata — */
body .product__badge .product__badge__item {
  background-color: #cd3318 !important;
}

/* — Quick view: navy transparan, hover navy solid — */
body .quickView-button {
  background: rgba(28, 75, 98, 0.25) !important;
  background-color: rgba(28, 75, 98, 0.25) !important;
}
body .quickView-button:hover {
  background: #1c4b62 !important;
  background-color: #1c4b62 !important;
}

/* — Collection button tint: navy transparan — */
.collection-block .btn {
  background: rgba(28, 75, 98, 0.15) !important;
}

/* — Accordion / FAQ / varian produk: garis & teks navy — */
.accordion-header {
  border-bottom-color: rgba(28, 75, 98, 0.15) !important;
  color: #1c4b62 !important;
}
.accordion-toggle-icon:before {
  color: rgba(28, 75, 98, 0.35) !important;
}
.product__info__wrapper .variant-wrapper--boxes,
.product__info__wrapper .variant-wrapper--color {
  border-top-color: rgba(28, 75, 98, 0.15) !important;
}

/* — Login link hover & review link: navy — */
#login-form .account-form__links .account-form__link:hover {
  background: rgba(28, 75, 98, 0.1) !important;
}
.jdgm-write-rev-link.jdgm-write-rev-link {
  background-image: linear-gradient(#1c4b62, transparent) !important;
}

/* — Pastikan body tetap putih — */
body,
.template-index,
.template-collection,
.template-product,
.template-page,
.template-article,
.template-blog,
.template-cart,
.template-login,
.template-register {
  background-color: #ffffff !important;
}

/* — Footer bottom brand block — */
.footer__brand-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  line-height: 1.4;
}
.footer__brand-block strong {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: inherit;
}
.footer__brand-block span {
  font-size: 11px;
  opacity: 0.85;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-top: 2px;
}
@media only screen and (max-width: 767px) {
  .footer__brand-block {
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 8px;
  }
}