/* =========================================================
   Kanugrahan Collection — style.css
   Mobile first. Breakpoint desktop: 768px

   ANTI-BENTROK:
   - Semua class memakai prefix "kgc-" dan selalu diawali scope
     ".kgc-section" (specificity 0,2,0).
   - Semua deklarasi memakai !important supaya tidak tertimpa
     Bootstrap / custom.css existing.
   - Font & ukuran dipasang langsung di elemen teks (p, h, span, li,
     strong, a), BUKAN di wrapper, karena aturan seperti
     "p { font-family: ... }" di custom.css akan mengalahkan
     nilai yang hanya diwariskan dari parent.
   ========================================================= */

/* ---------- Skala tipografi (dipakai SEMUA section) ---------- */
:root {
  --kgc-fs-logo: 64px;        /* logo script "Kanugrahan" */
  --kgc-fs-logo-sub: 30px;    /* "Collection" pada logo */
  --kgc-fs-title: 30px;       /* judul section (h2) */
  --kgc-fs-subtitle: 17px;    /* sub judul */
  --kgc-fs-body: 15px;        /* paragraf */
  --kgc-fs-small: 14px;       /* list / teks kecil */
  --kgc-fs-button: 15px;      /* tombol */
  --kgc-fs-script: 40px;      /* judul script, mis. "Kanugrahan Collection?" */
  --kgc-fs-script-col: 36px;  /* judul script di kolom setengah lebar (section 6) */

  --kgc-lh-tight: 1.05;
  --kgc-lh-title: 1.3;
  --kgc-lh-subtitle: 1.375;
  --kgc-lh-body: 1.7;
  --kgc-lh-small: 1.5;

  --kgc-font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kgc-font-serif: "Lora", Georgia, serif;
  --kgc-font-display: "Cormorant Garamond", Georgia, serif;
  --kgc-font-script: "Great Vibes", cursive;
  --kgc-font-caslon: "Libre Caslon Text", Georgia, serif;
  --kgc-font-humanist: "Alegreya Sans", "Segoe UI", sans-serif;
}

@media (min-width: 768px) {
  :root {
    --kgc-fs-logo: 8.6vw;
    --kgc-fs-logo-sub: 4vw;
    --kgc-fs-title: 4.4vw;
    --kgc-fs-subtitle: 2.1vw;
    --kgc-fs-body: 1.85vw;
    --kgc-fs-small: 1.7vw;
    --kgc-fs-button: 1.85vw;
    --kgc-fs-script: 6.65vw;
    --kgc-fs-script-col: 4.6vw;
  }
}

/* ---------- Reset terbatas: HANYA di dalam .kgc-section ---------- */
.kgc-section,
.kgc-section *,
.kgc-section *::before,
.kgc-section *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
  text-align: left !important;
}

.kgc-section {
  display: block !important;
  font-family: var(--kgc-font-sans) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  -webkit-text-size-adjust: 100% !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* <br> hanya aktif di desktop, supaya teks mobile mengalir penuh */
.kgc-section .kgc-br-desktop {
  display: none !important;
}

/* =========================================================
   SECTION 1 — HERO
   ========================================================= */
.kgc-section.kgc-hero {
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  background-color: #000 !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: 57% center !important; /* mobile: fokus ke tangan & kado */
}

.kgc-section .kgc-hero__overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%) !important;
}

.kgc-section .kgc-hero__content {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  padding: 56px 24px 0 !important;
}

.kgc-section .kgc-hero__title {
  display: flex !important;
  align-items: flex-start !important;
  font-family: var(--kgc-font-script) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: #E9C79A !important;
}

.kgc-section .kgc-hero__script {
  font-family: var(--kgc-font-script) !important;
  font-size: var(--kgc-fs-logo) !important;
  font-weight: 400 !important;
  line-height: var(--kgc-lh-tight) !important;
  padding-right: 4px !important;
  background: linear-gradient(180deg, #FBE9CF 0%, #E9C79A 55%, #C99A62 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.kgc-section .kgc-hero__heart {
  display: block !important;
  flex-shrink: 0 !important;
  width: 24px !important;
  height: 24px !important;
  margin-top: 4px !important;
}

.kgc-section .kgc-hero__collection {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 4px !important;
}

.kgc-section .kgc-hero__rule {
  display: block !important;
  flex: 1 !important;
  height: 1px !important;
  background: #F1DDBE !important;
}

.kgc-section .kgc-hero__collection-text {
  font-family: var(--kgc-font-display) !important;
  font-weight: 500 !important;
  font-size: var(--kgc-fs-logo-sub) !important;
  line-height: 1 !important;
  letter-spacing: 0.025em !important;
  color: #F6E7D2 !important;
}

.kgc-section .kgc-hero__desc {
  width: 100% !important;
  margin-top: 24px !important;
  color: #fff !important;
}

.kgc-section .kgc-hero__subtitle {
  font-family: var(--kgc-font-sans) !important;
  font-weight: 600 !important;
  font-size: var(--kgc-fs-subtitle) !important;
  line-height: var(--kgc-lh-subtitle) !important;
  color: #fff !important;
}

.kgc-section .kgc-hero__text {
  margin-top: 4px !important;
  font-family: var(--kgc-font-sans) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-body) !important;
  line-height: var(--kgc-lh-body) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

/* =========================================================
   SECTION 2 — HADIAH INDONESIA
   ========================================================= */
.kgc-section.kgc-gift {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: #FAE0C5 !important;
  background-repeat: no-repeat !important;
  /* mobile: teks di atas, gambar produk di bawah */
  background-size: 175% auto !important;
  background-position: 88% bottom !important;
}

/* gradasi penyambung warna polos dengan tepi atas gambar (mobile) */
.kgc-section.kgc-gift::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(134vw - 30vw) !important;
  height: 30vw !important;
  background: linear-gradient(to bottom, #FAE0C5 0%, rgba(250, 224, 197, 0) 100%) !important;
  pointer-events: none !important;
}

.kgc-section .kgc-gift__content {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  padding: 48px 24px 112vw !important;
}

.kgc-section .kgc-gift__title {
  font-family: var(--kgc-font-serif) !important;
  font-weight: 500 !important;
  font-size: var(--kgc-fs-title) !important;
  line-height: var(--kgc-lh-title) !important;
  color: #3B2414 !important;
}

.kgc-section .kgc-gift__divider {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 16px !important;
}

.kgc-section .kgc-gift__divider-line {
  display: block !important;
  flex: 1 !important;
  height: 1px !important;
  background: #C9A063 !important;
}

.kgc-section .kgc-gift__diamond {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 8px !important;
  border: 1px solid #C9A063 !important;
  background: #F5E9D8 !important;
  transform: rotate(45deg) !important;
}

.kgc-section .kgc-gift__body {
  width: 100% !important;
}

/* paragraf — font dipasang langsung di <p>, bukan di wrapper */
.kgc-section .kgc-gift__p1,
.kgc-section .kgc-gift__p2 {
  font-family: var(--kgc-font-serif) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-body) !important;
  line-height: var(--kgc-lh-body) !important;
  color: #4A3526 !important;
}

.kgc-section .kgc-gift__p1 {
  margin-top: 12px !important;
}

.kgc-section .kgc-gift__p2 {
  margin-top: 8px !important;
}

.kgc-section .kgc-gift__strong {
  font-family: var(--kgc-font-serif) !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 600 !important;
  color: #3B2414 !important;
}

.kgc-section .kgc-gift__list {
  list-style: none !important;
  margin-top: 20px !important;
}

.kgc-section .kgc-gift__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  list-style: none !important;
}

.kgc-section .kgc-gift__item + .kgc-gift__item {
  margin-top: 8px !important;
}

.kgc-section .kgc-gift__item-text {
  font-family: var(--kgc-font-serif) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-small) !important;
  line-height: var(--kgc-lh-small) !important;
  color: #4A3526 !important;
}

.kgc-section .kgc-gift__check {
  display: block !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: 2px !important;
}

.kgc-section .kgc-gift__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 28px !important;
  padding: 12px 28px 12px 20px !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background: linear-gradient(to bottom, #7A4519, #5A2F0F) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-family: var(--kgc-font-sans) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-button) !important;
  line-height: 1.5 !important;
  box-shadow: 0 0 0 1px rgba(201, 160, 99, 0.4), 0 6px 14px rgba(90, 47, 15, 0.35) !important;
  transition: background 0.15s ease !important;
}

.kgc-section .kgc-gift__btn:hover,
.kgc-section .kgc-gift__btn:focus {
  color: #fff !important;
  text-decoration: none !important;
  background: linear-gradient(to bottom, #874E1F, #64350F) !important;
}

.kgc-section .kgc-gift__btn:focus-visible {
  outline: 2px solid #C9A063 !important;
  outline-offset: 2px !important;
}

.kgc-section .kgc-gift__btn-icon {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
}

/* =========================================================
   DESKTOP (>= 768px)
   Ukuran memakai vw agar proporsi sama dengan desain
   ========================================================= */
@media (min-width: 768px) {
  .kgc-section .kgc-br-desktop {
    display: inline !important;
  }

  /* ----- Section 1 ----- */
  .kgc-section.kgc-hero {
    min-height: 0 !important;
    aspect-ratio: 602 / 313 !important;
    background-position: center !important;
  }

  .kgc-section .kgc-hero__overlay {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0) 100%) !important;
  }

  .kgc-section .kgc-hero__content {
    position: absolute !important;
    left: 7.3% !important;
    top: 9% !important;
    width: 50% !important;
    padding: 0 !important;
  }

  .kgc-section .kgc-hero__heart {
    width: 2.6vw !important;
    height: 2.6vw !important;
    margin-top: 0.9vw !important;
  }

  .kgc-section .kgc-hero__collection {
    gap: 1.1vw !important;
    width: 37vw !important;
    margin-top: 0.2vw !important;
    padding-left: 0.3vw !important;
  }

  .kgc-section .kgc-hero__desc {
    margin-top: 2.2vw !important;
  }

  .kgc-section .kgc-hero__text {
    margin-top: 0.25vw !important;
  }

  /* ----- Section 2 ----- */
  .kgc-section.kgc-gift {
    aspect-ratio: 602 / 461 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .kgc-section.kgc-gift::before {
    display: none !important;
  }

  .kgc-section .kgc-gift__content {
    position: absolute !important;
    left: 4.2% !important;
    top: 9.5% !important;
    width: 56% !important;
    padding: 0 !important;
  }

  .kgc-section .kgc-gift__divider {
    width: 42.5vw !important;
    margin-top: 1.6vw !important;
  }

  .kgc-section .kgc-gift__diamond {
    width: 1.1vw !important;
    height: 1.1vw !important;
    margin: 0 0.6vw !important;
  }

  .kgc-section .kgc-gift__p1 {
    margin-top: 1.1vw !important;
  }

  .kgc-section .kgc-gift__p2 {
    margin-top: 0.6vw !important;
  }

  .kgc-section .kgc-gift__list {
    margin-top: 2.3vw !important;
  }

  .kgc-section .kgc-gift__item {
    gap: 1.3vw !important;
  }

  .kgc-section .kgc-gift__item + .kgc-gift__item {
    margin-top: 1.05vw !important;
  }

  .kgc-section .kgc-gift__check {
    width: 2vw !important;
    height: 2vw !important;
    margin-top: 0 !important;
  }

  .kgc-section .kgc-gift__btn {
    gap: 1.3vw !important;
    margin-top: 3vw !important;
    padding: 1.35vw 3.6vw 1.35vw 3.2vw !important;
  }

  .kgc-section .kgc-gift__btn-icon {
    width: 2.6vw !important;
    height: 2.6vw !important;
  }
}

/* =========================================================
   SECTION 3 — KENAPA PILIH KANUGRAHAN COLLECTION
   ========================================================= */
.kgc-section.kgc-why {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: #EFE9E5 !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.kgc-section .kgc-why__inner {
  width: 100% !important;
  padding: 48px 16px 56px !important;
}

.kgc-section .kgc-why__heading {
  display: block !important;
  text-align: center !important;
}

.kgc-section .kgc-why__title {
  display: block !important;
  font-family: var(--kgc-font-caslon) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-title) !important;
  line-height: 1.2 !important;
  color: #3A2E2A !important;
  text-align: center !important;
}

.kgc-section .kgc-why__script {
  display: block !important;
  margin-top: 2px !important;
  font-family: var(--kgc-font-script) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-script) !important;
  line-height: 1.25 !important;
  text-align: center !important;
  background: linear-gradient(180deg, #BB955F 0%, #A57D48 55%, #8C673A 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.kgc-section .kgc-why__divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 80% !important;
  margin: 10px auto 0 !important;
}

.kgc-section .kgc-why__divider-line {
  display: block !important;
  flex: 1 !important;
  height: 1px !important;
}

.kgc-section .kgc-why__divider-line--left {
  background: linear-gradient(to right, rgba(194, 160, 110, 0) 0%, #C9B08A 100%) !important;
}

.kgc-section .kgc-why__divider-line--right {
  background: linear-gradient(to left, rgba(194, 160, 110, 0) 0%, #C9B08A 100%) !important;
}

.kgc-section .kgc-why__ornament {
  display: block !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
}

.kgc-section .kgc-why__intro {
  margin-top: 18px !important;
  font-family: var(--kgc-font-humanist) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-body) !important;
  line-height: var(--kgc-lh-body) !important;
  color: #3A2E2A !important;
  text-align: center !important;
}

.kgc-section .kgc-why__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 28px !important;
}

.kgc-section .kgc-why__card {
  display: block !important;
  padding: 20px 14px 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.78) 100%) !important;
  box-shadow: 0 6px 18px rgba(110, 88, 64, 0.16) !important;
}

.kgc-section .kgc-why__icon-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 46px !important;
}

.kgc-section .kgc-why__icon {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: 44px !important;
  border: 0 !important;
}

.kgc-section .kgc-why__icon--hand {
  height: 39px !important;
}

.kgc-section .kgc-why__card-title {
  margin-top: 12px !important;
  font-family: var(--kgc-font-caslon) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-subtitle) !important;
  line-height: 1.25 !important;
  color: #3A2E2A !important;
  text-align: center !important;
}

.kgc-section .kgc-why__card-text {
  margin-top: 10px !important;
  font-family: var(--kgc-font-humanist) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-small) !important;
  line-height: var(--kgc-lh-small) !important;
  color: #3A2E2A !important;
  text-align: left !important;
}


/* ----- Section 3 desktop (>= 768px) ----- */
@media (min-width: 768px) {
  .kgc-section .kgc-why__inner {
    padding: 4.6vw 3.8vw 8.8vw !important;
  }

  .kgc-section .kgc-why__script {
    margin-top: 0.1vw !important;
  }

  .kgc-section .kgc-why__divider {
    gap: 0.5vw !important;
    width: 38vw !important;
    margin-top: 0.4vw !important;
  }

  .kgc-section .kgc-why__ornament {
    width: 1.45vw !important;
    height: 1.45vw !important;
  }

  .kgc-section .kgc-why__intro {
    margin-top: 2.6vw !important;
  }

  .kgc-section .kgc-why__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.75vw !important;
    margin-top: 3.9vw !important;
  }

  .kgc-section .kgc-why__card {
    padding: 2vw 2.2vw 2.4vw !important;
    border-radius: 1.3vw !important;
    box-shadow: 0 0.6vw 1.6vw rgba(110, 88, 64, 0.16) !important;
  }

  .kgc-section .kgc-why__icon-wrap {
    height: 6.5vw !important;
  }

  .kgc-section .kgc-why__icon {
    height: 6.4vw !important;
  }

  .kgc-section .kgc-why__icon--hand {
    height: 5.7vw !important;
  }

  .kgc-section .kgc-why__card-title {
    margin-top: 1.4vw !important;
  }

  .kgc-section .kgc-why__card-text {
    margin-top: 1.4vw !important;
  }
}


/* =========================================================
   SECTION 4 — KOLEKSI FAVORIT KAMI
   ========================================================= */
.kgc-section.kgc-fav {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: #F1E6E1 !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* bingkai emas (garis luar + garis dalam tipis + ornamen sudut) */
.kgc-section .kgc-fav__frame {
  position: absolute !important;
  inset: 10px !important;
  border: 1px solid #C8AA74 !important;
  pointer-events: none !important;
}

.kgc-section .kgc-fav__frame::before {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  border: 1px solid rgba(200, 170, 116, 0.4) !important;
}

.kgc-section .kgc-fav__corner {
  position: absolute !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border: 1px solid #C8AA74 !important;
  background: transparent !important;
}

.kgc-section .kgc-fav__corner--tl { top: -4px !important; left: -4px !important; }
.kgc-section .kgc-fav__corner--tr { top: -4px !important; right: -4px !important; }
.kgc-section .kgc-fav__corner--bl { bottom: -4px !important; left: -4px !important; }
.kgc-section .kgc-fav__corner--br { bottom: -4px !important; right: -4px !important; }

.kgc-section .kgc-fav__inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  padding: 44px 22px 52px !important;
}

.kgc-section .kgc-fav__title {
  font-family: var(--kgc-font-caslon) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-title) !important;
  line-height: 1.25 !important;
  color: #4A3A35 !important;
  text-align: center !important;
}

.kgc-section .kgc-fav__divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 60% !important;
  margin: 8px auto 0 !important;
}

.kgc-section .kgc-fav__divider-line {
  display: block !important;
  flex: 1 !important;
  height: 1px !important;
}

.kgc-section .kgc-fav__divider-line--left {
  background: linear-gradient(to right, rgba(194, 160, 110, 0) 0%, #C9B08A 100%) !important;
}

.kgc-section .kgc-fav__divider-line--right {
  background: linear-gradient(to left, rgba(194, 160, 110, 0) 0%, #C9B08A 100%) !important;
}

.kgc-section .kgc-fav__ornament {
  display: block !important;
  flex-shrink: 0 !important;
  width: 13px !important;
  height: 13px !important;
}

.kgc-section .kgc-fav__intro {
  margin-top: 16px !important;
  font-family: var(--kgc-font-caslon) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-body) !important;
  line-height: var(--kgc-lh-body) !important;
  color: #3A2E2A !important;
  text-align: center !important;
}

.kgc-section .kgc-fav__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 12px !important;
  row-gap: 14px !important;
  margin-top: 26px !important;
}

.kgc-section .kgc-fav__card {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 247, 244, 0.86) 100%) !important;
  box-shadow: 0 4px 12px rgba(120, 95, 70, 0.18) !important;
}

.kgc-section .kgc-fav__photo {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

.kgc-section .kgc-fav__img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  border: 0 !important;
}

.kgc-section .kgc-fav__body {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 12px 10px 14px !important;
}

.kgc-section .kgc-fav__name {
  font-family: var(--kgc-font-caslon) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-subtitle) !important;
  line-height: 1.3 !important;
  color: #3A2E2A !important;
  text-align: center !important;
}

/* mobile: tombol bertumpuk supaya muat di kartu kecil */
.kgc-section .kgc-fav__actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: auto !important;
  padding-top: 12px !important;
}

.kgc-section .kgc-fav__btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 5px !important;
  font-family: var(--kgc-font-caslon) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-button) !important;
  line-height: 1 !important;
  color: #fff !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 4px rgba(60, 45, 30, 0.25) !important;
  transition: filter 0.15s ease !important;
}

.kgc-section .kgc-fav__btn--detail {
  background: linear-gradient(180deg, #BE9C46 0%, #A2802C 100%) !important;
}

.kgc-section .kgc-fav__btn--buy {
  background: linear-gradient(180deg, #546E5E 0%, #3C5446 100%) !important;
}

.kgc-section .kgc-fav__btn:hover,
.kgc-section .kgc-fav__btn:focus {
  color: #fff !important;
  text-decoration: none !important;
  filter: brightness(1.08) !important;
}

.kgc-section .kgc-fav__btn:focus-visible {
  outline: 2px solid #A2802C !important;
  outline-offset: 2px !important;
}


/* ----- Section 4 desktop (>= 768px) ----- */
@media (min-width: 768px) {
  .kgc-section .kgc-fav__frame {
    inset: 2.2vw 2.3vw !important;
  }

  .kgc-section .kgc-fav__inner {
    padding: 7vw 4.65vw 14.3vw !important;
  }

  .kgc-section .kgc-fav__divider {
    gap: 0.6vw !important;
    width: 26vw !important;
    margin-top: 0.9vw !important;
  }

  .kgc-section .kgc-fav__ornament {
    width: 1.6vw !important;
    height: 1.6vw !important;
  }

  .kgc-section .kgc-fav__intro {
    margin-top: 3vw !important;
  }

  .kgc-section .kgc-fav__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 2.3vw !important;
    row-gap: 3.65vw !important;
    margin-top: 5.2vw !important;
  }

  .kgc-section .kgc-fav__card {
    border-radius: 1.7vw !important;
    box-shadow: 0 0.7vw 2vw rgba(120, 95, 70, 0.18) !important;
  }

  .kgc-section .kgc-fav__body {
    padding: 2.4vw 1.5vw 2.65vw !important;
  }

  .kgc-section .kgc-fav__actions {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.7vw !important;
    padding-top: 2.4vw !important;
  }

  .kgc-section .kgc-fav__btn {
    height: 4vw !important;
    padding: 0 1.9vw !important;
    border-radius: 0.7vw !important;
  }

  .kgc-section .kgc-fav__btn--detail {
    min-width: 15.6vw !important;
  }

  .kgc-section .kgc-fav__btn--buy {
    min-width: 7.6vw !important;
  }
}


/* =========================================================
   SECTION 5 — JELAJAHI KOLEKSI KAMI
   ========================================================= */
.kgc-section.kgc-explore {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: #EEE7E4 !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* bingkai emas ganda + ornamen kotak bertumpuk di sudut */
.kgc-section .kgc-explore__frame {
  position: absolute !important;
  inset: 10px !important;
  border: 1px solid #C2A57A !important;
  pointer-events: none !important;
}

.kgc-section .kgc-explore__frame::before {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  border: 1px solid rgba(194, 165, 122, 0.55) !important;
}

.kgc-section .kgc-explore__corner {
  position: absolute !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border: 1px solid #A8875A !important;
  background: transparent !important;
}

.kgc-section .kgc-explore__corner::after {
  content: "" !important;
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  border: 1px solid #A8875A !important;
}

.kgc-section .kgc-explore__corner--tl { top: -6px !important; left: -6px !important; }
.kgc-section .kgc-explore__corner--tl::after { top: 4px !important; left: 4px !important; }
.kgc-section .kgc-explore__corner--tr { top: -6px !important; right: -6px !important; }
.kgc-section .kgc-explore__corner--tr::after { top: 4px !important; right: 4px !important; }
.kgc-section .kgc-explore__corner--bl { bottom: -6px !important; left: -6px !important; }
.kgc-section .kgc-explore__corner--bl::after { bottom: 4px !important; left: 4px !important; }
.kgc-section .kgc-explore__corner--br { bottom: -6px !important; right: -6px !important; }
.kgc-section .kgc-explore__corner--br::after { bottom: 4px !important; right: 4px !important; }

.kgc-section .kgc-explore__inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  padding: 40px 22px 44px !important;
}

.kgc-section .kgc-explore__title {
  font-family: var(--kgc-font-script) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-script) !important;
  line-height: 1.25 !important;
  text-align: center !important;
  background: linear-gradient(180deg, #7A5532 0%, #5E3F22 55%, #8B6337 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.kgc-section .kgc-explore__divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 70% !important;
  margin: 6px auto 0 !important;
}

.kgc-section .kgc-explore__divider-line {
  display: block !important;
  flex: 1 !important;
  height: 1px !important;
  background: #B49A76 !important;
}

.kgc-section .kgc-explore__ornament {
  display: block !important;
  flex-shrink: 0 !important;
  width: 30px !important;
  height: 8px !important;
}

.kgc-section .kgc-explore__intro {
  margin-top: 16px !important;
  font-family: var(--kgc-font-humanist) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-body) !important;
  line-height: var(--kgc-lh-body) !important;
  color: #3A2E2A !important;
  text-align: center !important;
}

.kgc-section .kgc-explore__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 26px !important;
}

/* kartu kategori: foto penuh + gradasi gelap + teks di bawah */
.kgc-section .kgc-explore__card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  min-height: 290px !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  background-color: #3B3026 !important;
  color: #F4EDE2 !important;
  text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(60, 45, 30, 0.28) !important;
}

.kgc-section .kgc-explore__card:hover,
.kgc-section .kgc-explore__card:focus {
  color: #F4EDE2 !important;
  text-decoration: none !important;
}

.kgc-section .kgc-explore__card:focus-visible {
  outline: 2px solid #A8875A !important;
  outline-offset: 3px !important;
}

.kgc-section .kgc-explore__img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  border: 0 !important;
}

.kgc-section .kgc-explore__shade {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background: linear-gradient(180deg, rgba(30, 22, 15, 0) 35%, rgba(30, 22, 15, 0.45) 62%, rgba(30, 22, 15, 0.72) 100%) !important;
}

.kgc-section .kgc-explore__badge {
  position: absolute !important;
  top: 8px !important;
  left: 0 !important;
  z-index: 2 !important;
  display: block !important;
  padding: 4px 18px 4px 10px !important;
  font-family: var(--kgc-font-humanist) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-small) !important;
  line-height: 1.3 !important;
  color: #3A2E2A !important;
  background: linear-gradient(180deg, #F0E6D2 0%, #DCCBA8 100%) !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.kgc-section .kgc-explore__caption {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  padding: 0 10px 14px !important;
  text-align: center !important;
}

.kgc-section .kgc-explore__card-title {
  font-family: var(--kgc-font-caslon) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-subtitle) !important;
  line-height: 1.22 !important;
  color: #F6F0E6 !important;
  text-align: center !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45) !important;
}

.kgc-section .kgc-explore__card-divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 75% !important;
  margin: 8px auto 0 !important;
}

.kgc-section .kgc-explore__card-divider-line {
  display: block !important;
  flex: 1 !important;
  height: 1px !important;
  background: rgba(217, 190, 140, 0.8) !important;
}

.kgc-section .kgc-explore__card-ornament {
  display: block !important;
  flex-shrink: 0 !important;
  width: 26px !important;
  height: 7px !important;
}

.kgc-section .kgc-explore__card-text {
  margin-top: 8px !important;
  font-family: var(--kgc-font-humanist) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-small) !important;
  line-height: 1.4 !important;
  color: #EFE6D8 !important;
  text-align: center !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}

.kgc-section .kgc-explore__more {
  display: flex !important;
  justify-content: center !important;
  margin-top: 22px !important;
}

.kgc-section .kgc-explore__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 200px !important;
  height: 44px !important;
  padding: 0 24px !important;
  border: 1px solid #D6C8B2 !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #FBF8F3 0%, #EFE8DD 100%) !important;
  font-family: var(--kgc-font-humanist) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-button) !important;
  line-height: 1 !important;
  color: #3A2E2A !important;
  text-decoration: none !important;
  box-shadow: 0 3px 8px rgba(80, 60, 40, 0.15) !important;
  transition: background 0.15s ease !important;
}

.kgc-section .kgc-explore__btn:hover,
.kgc-section .kgc-explore__btn:focus {
  color: #3A2E2A !important;
  text-decoration: none !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F3EDE3 100%) !important;
}

.kgc-section .kgc-explore__btn:focus-visible {
  outline: 2px solid #A8875A !important;
  outline-offset: 2px !important;
}

.kgc-section .kgc-explore__btn-arrow {
  display: inline-block !important;
  font-family: var(--kgc-font-humanist) !important;
  font-size: inherit !important;
  line-height: 1 !important;
  color: inherit !important;
}


/* ----- Section 5 desktop (>= 768px) ----- */
@media (min-width: 768px) {
  .kgc-section .kgc-explore__frame {
    inset: 1.7vw !important;
  }

  .kgc-section .kgc-explore__corner {
    width: 1.3vw !important;
    height: 1.3vw !important;
  }

  .kgc-section .kgc-explore__corner::after {
    width: 1.3vw !important;
    height: 1.3vw !important;
  }

  .kgc-section .kgc-explore__corner--tl { top: -0.75vw !important; left: -0.75vw !important; }
  .kgc-section .kgc-explore__corner--tl::after { top: 0.5vw !important; left: 0.5vw !important; }
  .kgc-section .kgc-explore__corner--tr { top: -0.75vw !important; right: -0.75vw !important; }
  .kgc-section .kgc-explore__corner--tr::after { top: 0.5vw !important; right: 0.5vw !important; }
  .kgc-section .kgc-explore__corner--bl { bottom: -0.75vw !important; left: -0.75vw !important; }
  .kgc-section .kgc-explore__corner--bl::after { bottom: 0.5vw !important; left: 0.5vw !important; }
  .kgc-section .kgc-explore__corner--br { bottom: -0.75vw !important; right: -0.75vw !important; }
  .kgc-section .kgc-explore__corner--br::after { bottom: 0.5vw !important; right: 0.5vw !important; }

  .kgc-section .kgc-explore__inner {
    padding: 4.4vw 3.9vw 4.1vw !important;
  }

  .kgc-section .kgc-explore__divider {
    gap: 0.6vw !important;
    width: 32vw !important;
    margin-top: 0.2vw !important;
  }

  .kgc-section .kgc-explore__ornament {
    width: 3.2vw !important;
    height: 0.9vw !important;
  }

  .kgc-section .kgc-explore__intro {
    margin-top: 2vw !important;
  }

  .kgc-section .kgc-explore__grid {
    grid-template-columns: 319fr 292fr 292fr 321fr !important;
    gap: 1.2vw !important;
    margin-top: 4vw !important;
  }

  .kgc-section .kgc-explore__card {
    min-height: 0 !important;
    height: 35.1vw !important;
    border-radius: 0.5vw !important;
    box-shadow: 0 0.6vw 1.6vw rgba(60, 45, 30, 0.28) !important;
  }

  .kgc-section .kgc-explore__badge {
    top: 0.9vw !important;
    left: -0.2vw !important;
    padding: 0.35vw 2vw 0.35vw 1.9vw !important;
    clip-path: polygon(0 0, 100% 0, calc(100% - 0.8vw) 100%, 0 100%) !important;
  }

  .kgc-section .kgc-explore__caption {
    padding: 0 1.6vw 2.3vw !important;
  }

  .kgc-section .kgc-explore__card-divider {
    gap: 0.4vw !important;
    width: 14.5vw !important;
    margin-top: 0.9vw !important;
  }

  .kgc-section .kgc-explore__card-ornament {
    width: 2.2vw !important;
    height: 0.6vw !important;
  }

  .kgc-section .kgc-explore__card-text {
    margin-top: 0.9vw !important;
  }

  .kgc-section .kgc-explore__more {
    margin-top: 1.8vw !important;
  }

  .kgc-section .kgc-explore__btn {
    gap: 0.6vw !important;
    min-width: 18.6vw !important;
    height: 3.6vw !important;
    padding: 0 2vw !important;
    border-radius: 0.25vw !important;
  }
}


/* =========================================================
   SECTION 6 — DARI BATIK MENJADI KARYA BERNILAI
   ========================================================= */
.kgc-section.kgc-craft {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: #E5D8D0 !important;
  background-repeat: no-repeat !important;
  /* mobile: teks di atas, foto di bawah */
  background-size: 190% auto !important;
  background-position: 0% bottom !important;
}

/* gradasi penyambung warna polos dengan tepi atas foto (mobile) */
.kgc-section.kgc-craft::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(126.6vw - 32vw) !important;
  height: 32vw !important;
  background: linear-gradient(to bottom, #E5D8D0 0%, rgba(229, 216, 208, 0) 100%) !important;
  pointer-events: none !important;
}

/* bingkai emas ganda + ornamen kotak bertumpuk di sudut */
.kgc-section .kgc-craft__frame {
  position: absolute !important;
  inset: 10px !important;
  z-index: 1 !important;
  border: 1px solid #C2A57A !important;
  pointer-events: none !important;
}

.kgc-section .kgc-craft__frame::before {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  border: 1px solid rgba(194, 165, 122, 0.55) !important;
}

.kgc-section .kgc-craft__corner {
  position: absolute !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border: 1px solid #A8875A !important;
  background: transparent !important;
}

.kgc-section .kgc-craft__corner::after {
  content: "" !important;
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  border: 1px solid #A8875A !important;
}

.kgc-section .kgc-craft__corner--tl { top: -6px !important; left: -6px !important; }
.kgc-section .kgc-craft__corner--tl::after { top: 4px !important; left: 4px !important; }
.kgc-section .kgc-craft__corner--tr { top: -6px !important; right: -6px !important; }
.kgc-section .kgc-craft__corner--tr::after { top: 4px !important; right: 4px !important; }
.kgc-section .kgc-craft__corner--bl { bottom: -6px !important; left: -6px !important; }
.kgc-section .kgc-craft__corner--bl::after { bottom: 4px !important; left: 4px !important; }
.kgc-section .kgc-craft__corner--br { bottom: -6px !important; right: -6px !important; }
.kgc-section .kgc-craft__corner--br::after { bottom: 4px !important; right: 4px !important; }

.kgc-section .kgc-craft__content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  padding: 44px 24px 118vw !important;
  text-align: center !important;
}

.kgc-section .kgc-craft__title {
  display: block !important;
  font-family: var(--kgc-font-script) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-script-col) !important;
  line-height: 1.2 !important;
}

.kgc-section .kgc-craft__title-line {
  display: block !important;
  font-family: var(--kgc-font-script) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-script-col) !important;
  line-height: 1.2 !important;
  text-align: center !important;
  background: linear-gradient(180deg, #7A5532 0%, #5E3F22 55%, #8B6337 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.kgc-section .kgc-craft__divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: 14px !important;
}

.kgc-section .kgc-craft__divider-line {
  display: block !important;
  flex: 1 !important;
  height: 1px !important;
}

.kgc-section .kgc-craft__divider-line--left {
  background: linear-gradient(to right, rgba(168, 134, 79, 0) 0%, #B89A6C 100%) !important;
}

.kgc-section .kgc-craft__divider-line--right {
  background: linear-gradient(to left, rgba(168, 134, 79, 0) 0%, #B89A6C 100%) !important;
}

.kgc-section .kgc-craft__ornament {
  display: block !important;
  flex-shrink: 0 !important;
  width: 34px !important;
  height: 10px !important;
}

.kgc-section .kgc-craft__text {
  margin-top: 14px !important;
  font-family: var(--kgc-font-humanist) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-body) !important;
  line-height: var(--kgc-lh-body) !important;
  color: #3A2E2A !important;
  text-align: center !important;
}

.kgc-section .kgc-craft__rule {
  display: block !important;
  width: 90% !important;
  height: 1px !important;
  margin: 14px auto 0 !important;
  background: linear-gradient(to right, rgba(184, 154, 108, 0) 0%, rgba(184, 154, 108, 0.6) 50%, rgba(184, 154, 108, 0) 100%) !important;
}

.kgc-section .kgc-craft__quote {
  margin-top: 16px !important;
  font-family: var(--kgc-font-humanist) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-body) !important;
  line-height: var(--kgc-lh-body) !important;
  color: #3A2E2A !important;
  text-align: center !important;
}

.kgc-section .kgc-craft__quote-mark {
  display: inline-block !important;
  width: 9px !important;
  height: 14px !important;
  margin-right: 6px !important;
  vertical-align: baseline !important;
}

.kgc-section .kgc-craft__divider--bottom {
  margin-top: 16px !important;
}

.kgc-section .kgc-craft__feature {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 12px !important;
  font-family: var(--kgc-font-humanist) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-small) !important;
  line-height: 1.4 !important;
  color: #3A2E2A !important;
  text-align: center !important;
}

.kgc-section .kgc-craft__sparkle {
  display: block !important;
  flex-shrink: 0 !important;
  width: 22px !important;
  height: 20px !important;
}

.kgc-section .kgc-craft__feature-strong {
  font-family: var(--kgc-font-caslon) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-body) !important;
  line-height: 1.4 !important;
  color: #2F2420 !important;
}

.kgc-section .kgc-craft__feature-text {
  font-family: var(--kgc-font-humanist) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-small) !important;
  line-height: 1.4 !important;
  color: #3A2E2A !important;
}


/* ----- Section 6 desktop (>= 768px) ----- */
@media (min-width: 768px) {
  .kgc-section.kgc-craft {
    aspect-ratio: 1379 / 919 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .kgc-section.kgc-craft::before {
    display: none !important;
  }

  .kgc-section .kgc-craft__frame {
    inset: 1.7vw !important;
  }

  .kgc-section .kgc-craft__corner {
    width: 1.3vw !important;
    height: 1.3vw !important;
  }

  .kgc-section .kgc-craft__corner::after {
    width: 1.3vw !important;
    height: 1.3vw !important;
  }

  .kgc-section .kgc-craft__corner--tl { top: -0.75vw !important; left: -0.75vw !important; }
  .kgc-section .kgc-craft__corner--tl::after { top: 0.5vw !important; left: 0.5vw !important; }
  .kgc-section .kgc-craft__corner--tr { top: -0.75vw !important; right: -0.75vw !important; }
  .kgc-section .kgc-craft__corner--tr::after { top: 0.5vw !important; right: 0.5vw !important; }
  .kgc-section .kgc-craft__corner--bl { bottom: -0.75vw !important; left: -0.75vw !important; }
  .kgc-section .kgc-craft__corner--bl::after { bottom: 0.5vw !important; left: 0.5vw !important; }
  .kgc-section .kgc-craft__corner--br { bottom: -0.75vw !important; right: -0.75vw !important; }
  .kgc-section .kgc-craft__corner--br::after { bottom: 0.5vw !important; right: 0.5vw !important; }

  .kgc-section .kgc-craft__content {
    width: 46.5% !important;
    margin-left: 51% !important;
    padding: 7.6vw 0 4vw !important;
  }

  .kgc-section .kgc-craft__title-line--1 {
    text-align: left !important;
    padding-left: 0.6vw !important;
  }

  .kgc-section .kgc-craft__title-line--2 {
    text-align: right !important;
    padding-right: 10vw !important;
  }

  .kgc-section .kgc-craft__divider {
    gap: 0.5vw !important;
    margin-top: 1.4vw !important;
  }

  .kgc-section .kgc-craft__ornament {
    width: 3.4vw !important;
    height: 1vw !important;
  }

  .kgc-section .kgc-craft__text {
    margin-top: 2vw !important;
  }

  .kgc-section .kgc-craft__rule {
    margin-top: 1.9vw !important;
  }

  .kgc-section .kgc-craft__quote {
    margin-top: 2.1vw !important;
  }

  .kgc-section .kgc-craft__quote-mark {
    width: 0.9vw !important;
    height: 1.35vw !important;
    margin-right: 0.5vw !important;
  }

  .kgc-section .kgc-craft__divider--bottom {
    margin-top: 1.9vw !important;
  }

  .kgc-section .kgc-craft__feature {
    gap: 0.5vw !important;
    margin-top: 1.4vw !important;
  }

  .kgc-section .kgc-craft__sparkle {
    width: 2vw !important;
    height: 1.8vw !important;
  }
}


/* =========================================================
   SECTION 7 — KOLEKSI SPESIAL NATAL
   ========================================================= */
.kgc-section.kgc-xmas {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: #FCF6EC !important;
  background-repeat: no-repeat !important;
  /* mobile: teks di atas, foto di bawah */
  background-size: 175% auto !important;
  background-position: 100% bottom !important;
}

/* gradasi penyambung warna polos dengan tepi atas foto (mobile) */
.kgc-section.kgc-xmas::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(117vw - 30vw) !important;
  height: 30vw !important;
  background: linear-gradient(to bottom, #FCF6EC 0%, rgba(252, 246, 236, 0) 100%) !important;
  pointer-events: none !important;
}

.kgc-section .kgc-xmas__content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  padding: 36px 24px 112vw !important;
}

.kgc-section .kgc-xmas__head {
  display: block !important;
  text-align: center !important;
}

.kgc-section .kgc-xmas__eyebrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.kgc-section .kgc-xmas__eyebrow-line {
  display: block !important;
  width: 40px !important;
  height: 1px !important;
  background: #C9A45F !important;
}

.kgc-section .kgc-xmas__eyebrow-text {
  font-family: var(--kgc-font-humanist) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-small) !important;
  line-height: 1.3 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #5A3E2E !important;
}

.kgc-section .kgc-xmas__title {
  display: block !important;
  margin-top: 4px !important;
  font-family: var(--kgc-font-script) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-script) !important;
  line-height: 1 !important;
  text-align: center !important;
}

.kgc-section .kgc-xmas__title-wrap {
  position: relative !important;
  display: block !important;
  width: fit-content !important;
  margin: 0 auto !important;
  font-family: var(--kgc-font-script) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-script) !important;
  line-height: 1.1 !important;
}

.kgc-section .kgc-xmas__title-green {
  display: inline-block !important;
  /* ruang ekstra agar swash huruf script tidak terpotong oleh background-clip: text */
  padding: 0.2em 0.35em !important;
  margin: -0.2em -0.35em !important;
  font-family: var(--kgc-font-script) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-script) !important;
  line-height: 1.1 !important;
  background: linear-gradient(180deg, #2F7D52 0%, #1F5E3B 60%, #174A2E 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* "Natal" sengaja lebih besar (aksen utama desain) */
.kgc-section .kgc-xmas__title-red {
  display: inline-block !important;
  /* ruang ekstra agar swash huruf script tidak terpotong oleh background-clip: text */
  padding: 0.2em 0.35em !important;
  margin: -0.2em -0.35em !important;
  font-family: var(--kgc-font-script) !important;
  font-weight: 400 !important;
  font-size: calc(var(--kgc-fs-script) * 1.5) !important;
  line-height: 1 !important;
  background: linear-gradient(180deg, #CF3A40 0%, #B5232A 55%, #8F1A20 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ornamen menempel ke kata, ukuran pakai em agar ikut skala font */
.kgc-section .kgc-xmas__holly {
  position: absolute !important;
  top: 0 !important;
  right: -0.62em !important;
  display: block !important;
  width: 0.5em !important;
  max-width: none !important;
  height: auto !important;
  border: 0 !important;
}

.kgc-section .kgc-xmas__bow {
  position: absolute !important;
  top: 0.3em !important;
  right: -0.62em !important;
  display: block !important;
  width: 0.55em !important;
  max-width: none !important;
  height: auto !important;
  border: 0 !important;
}

.kgc-section .kgc-xmas__title-wrap:nth-child(2) .kgc-xmas__bow {
  font-size: calc(var(--kgc-fs-script) * 1.5) !important;
}

.kgc-section .kgc-xmas__title-wrap:nth-child(2) {
  font-size: calc(var(--kgc-fs-script) * 1.5) !important;
  line-height: 1 !important;
}

.kgc-section .kgc-xmas__title-sub {
  display: block !important;
  margin-top: 2px !important;
  font-family: var(--kgc-font-caslon) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-subtitle) !important;
  line-height: 1.25 !important;
  color: #5B3A22 !important;
  text-align: center !important;
}

.kgc-section .kgc-xmas__text {
  margin-top: 12px !important;
  font-family: var(--kgc-font-humanist) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-body) !important;
  line-height: 1.45 !important;
  color: #4A3A30 !important;
  text-align: center !important;
}

.kgc-section .kgc-xmas__divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 75% !important;
  margin: 10px auto 0 !important;
}

.kgc-section .kgc-xmas__divider-line {
  display: block !important;
  flex: 1 !important;
  height: 1px !important;
}

.kgc-section .kgc-xmas__divider-line--left {
  background: linear-gradient(to right, rgba(201, 164, 95, 0) 0%, #C9A45F 100%) !important;
}

.kgc-section .kgc-xmas__divider-line--right {
  background: linear-gradient(to left, rgba(201, 164, 95, 0) 0%, #C9A45F 100%) !important;
}

.kgc-section .kgc-xmas__ornament {
  display: block !important;
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 10px !important;
}

.kgc-section .kgc-xmas__list {
  list-style: none !important;
  margin-top: 18px !important;
}

.kgc-section .kgc-xmas__item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  list-style: none !important;
}

.kgc-section .kgc-xmas__item + .kgc-xmas__item {
  margin-top: 8px !important;
}

.kgc-section .kgc-xmas__icon {
  display: block !important;
  flex-shrink: 0 !important;
  width: 36px !important;
  max-width: none !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 5px rgba(90, 30, 20, 0.2) !important;
}

.kgc-section .kgc-xmas__item-text {
  font-family: var(--kgc-font-humanist) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-small) !important;
  line-height: 1.3 !important;
  color: #3A2E2A !important;
  text-align: left !important;
}

.kgc-section .kgc-xmas__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 20px !important;
  padding: 10px 24px !important;
  border: 1px solid #D8B36A !important;
  border-radius: 9999px !important;
  background: linear-gradient(180deg, #BE2A32 0%, #9A1B22 100%) !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 10px rgba(130, 25, 30, 0.3) !important;
  transition: filter 0.15s ease !important;
}

.kgc-section .kgc-xmas__btn:hover,
.kgc-section .kgc-xmas__btn:focus {
  color: #fff !important;
  text-decoration: none !important;
  filter: brightness(1.08) !important;
}

.kgc-section .kgc-xmas__btn:focus-visible {
  outline: 2px solid #D8B36A !important;
  outline-offset: 2px !important;
}

.kgc-section .kgc-xmas__btn-icon {
  display: block !important;
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
}

.kgc-section .kgc-xmas__btn-text {
  font-family: var(--kgc-font-caslon) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-button) !important;
  line-height: 1.2 !important;
  color: #fff !important;
  white-space: nowrap !important;
}


/* ----- Section 7 desktop (>= 768px) ----- */
@media (min-width: 768px) {
  .kgc-section.kgc-xmas {
    aspect-ratio: 602 / 403 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .kgc-section.kgc-xmas::before {
    display: none !important;
  }

  .kgc-section .kgc-xmas__content {
    position: absolute !important;
    top: 4vw !important;
    left: 2.5vw !important;
    width: 46vw !important;
    padding: 0 !important;
  }

  .kgc-section .kgc-xmas__eyebrow {
    gap: 1.2vw !important;
  }

  .kgc-section .kgc-xmas__eyebrow-line {
    width: 6.5vw !important;
  }

  .kgc-section .kgc-xmas__title {
    margin-top: 0.3vw !important;
  }

  .kgc-section .kgc-xmas__title-sub {
    margin-top: 0 !important;
  }

  .kgc-section .kgc-xmas__text {
    margin-top: 1.2vw !important;
  }

  .kgc-section .kgc-xmas__divider {
    gap: 0.4vw !important;
    width: 24vw !important;
    margin-top: 1vw !important;
  }

  .kgc-section .kgc-xmas__ornament {
    width: 4vw !important;
    height: 1.1vw !important;
  }

  .kgc-section .kgc-xmas__list {
    margin-top: 1.6vw !important;
    margin-left: 4.6vw !important;
  }

  .kgc-section .kgc-xmas__item {
    gap: 1.8vw !important;
  }

  .kgc-section .kgc-xmas__item + .kgc-xmas__item {
    margin-top: 0.8vw !important;
  }

  .kgc-section .kgc-xmas__icon {
    width: 4.5vw !important;
    height: 4.5vw !important;
  }

  .kgc-section .kgc-xmas__btn {
    gap: 1.2vw !important;
    margin-top: 1.6vw !important;
    margin-left: 4.6vw !important;
    padding: 0.9vw 3vw 0.9vw 2.4vw !important;
  }

  .kgc-section .kgc-xmas__btn-icon {
    width: 2.8vw !important;
    height: 2.8vw !important;
  }
}


/* =========================================================
   SECTION 8 — APA KATA PELANGGAN KAMI
   ========================================================= */
.kgc-section.kgc-testi {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: #EFE8E4 !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* bingkai emas ganda + ornamen kotak bertumpuk di sudut */
.kgc-section .kgc-testi__frame {
  position: absolute !important;
  inset: 10px !important;
  z-index: 1 !important;
  border: 1px solid #C2A57A !important;
  pointer-events: none !important;
}

.kgc-section .kgc-testi__frame::before {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  border: 1px solid rgba(194, 165, 122, 0.55) !important;
}

.kgc-section .kgc-testi__corner {
  position: absolute !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border: 1px solid #A8875A !important;
  background: transparent !important;
}

.kgc-section .kgc-testi__corner::after {
  content: "" !important;
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  border: 1px solid #A8875A !important;
}

.kgc-section .kgc-testi__corner--tl { top: -6px !important; left: -6px !important; }
.kgc-section .kgc-testi__corner--tl::after { top: 4px !important; left: 4px !important; }
.kgc-section .kgc-testi__corner--tr { top: -6px !important; right: -6px !important; }
.kgc-section .kgc-testi__corner--tr::after { top: 4px !important; right: 4px !important; }
.kgc-section .kgc-testi__corner--bl { bottom: -6px !important; left: -6px !important; }
.kgc-section .kgc-testi__corner--bl::after { bottom: 4px !important; left: 4px !important; }
.kgc-section .kgc-testi__corner--br { bottom: -6px !important; right: -6px !important; }
.kgc-section .kgc-testi__corner--br::after { bottom: 4px !important; right: 4px !important; }

.kgc-section .kgc-testi__defs {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.kgc-section .kgc-testi__inner {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  padding: 40px 22px 52px !important;
}

.kgc-section .kgc-testi__title {
  font-family: var(--kgc-font-script) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-script) !important;
  line-height: 1.25 !important;
  text-align: center !important;
  background: linear-gradient(180deg, #8A6238 0%, #6B4826 55%, #94693A 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  /* ruang ekstra agar swash huruf script tidak terpotong */
  padding: 0.1em 0.35em !important;
  margin: -0.1em -0.35em !important;
}

.kgc-section .kgc-testi__divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 70% !important;
  margin: 8px auto 0 !important;
}

.kgc-section .kgc-testi__divider-line {
  display: block !important;
  flex: 1 !important;
  height: 1px !important;
}

.kgc-section .kgc-testi__divider-line--left {
  background: linear-gradient(to right, rgba(168, 134, 79, 0) 0%, #B89A6C 100%) !important;
}

.kgc-section .kgc-testi__divider-line--right {
  background: linear-gradient(to left, rgba(168, 134, 79, 0) 0%, #B89A6C 100%) !important;
}

.kgc-section .kgc-testi__ornament {
  display: block !important;
  flex-shrink: 0 !important;
  width: 34px !important;
  height: 10px !important;
}

.kgc-section .kgc-testi__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  margin-top: 26px !important;
}

.kgc-section .kgc-testi__card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 28px 22px 30px !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(250, 247, 245, 0.88) 100%) !important;
  box-shadow: 0 8px 20px rgba(110, 88, 70, 0.16) !important;
}

.kgc-section .kgc-testi__stars {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.kgc-section .kgc-testi__star {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  filter: drop-shadow(0 1px 1px rgba(120, 80, 20, 0.25)) !important;
}

.kgc-section .kgc-testi__quote-wrap {
  display: block !important;
  flex: 1 !important;
  width: 100% !important;
  margin-top: 20px !important;
  text-align: center !important;
}

.kgc-section .kgc-testi__quote {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: var(--kgc-font-humanist) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-body) !important;
  line-height: 1.75 !important;
  color: #3A2E2A !important;
  text-align: center !important;
  quotes: none !important;
}

.kgc-section .kgc-testi__quote::before,
.kgc-section .kgc-testi__quote::after,
.kgc-section .kgc-testi__name::before,
.kgc-section .kgc-testi__name::after {
  content: none !important;
  display: none !important;
}

.kgc-section .kgc-testi__card-divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 80% !important;
  margin-top: 20px !important;
}

.kgc-section .kgc-testi__card-divider-line {
  display: block !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(to right, rgba(201, 170, 116, 0) 0%, rgba(201, 170, 116, 0.8) 50%, rgba(201, 170, 116, 0) 100%) !important;
}

.kgc-section .kgc-testi__card-ornament {
  display: block !important;
  flex-shrink: 0 !important;
  width: 24px !important;
  height: 8px !important;
}

.kgc-section .kgc-testi__name {
  margin-top: 16px !important;
  font-family: var(--kgc-font-humanist) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-body) !important;
  line-height: 1.4 !important;
  color: #3A2E2A !important;
  text-align: center !important;
}


/* ----- Section 8 desktop (>= 768px) ----- */
@media (min-width: 768px) {
  .kgc-section .kgc-testi__frame {
    inset: 1.7vw !important;
  }

  .kgc-section .kgc-testi__corner {
    width: 1.3vw !important;
    height: 1.3vw !important;
  }

  .kgc-section .kgc-testi__corner::after {
    width: 1.3vw !important;
    height: 1.3vw !important;
  }

  .kgc-section .kgc-testi__corner--tl { top: -0.75vw !important; left: -0.75vw !important; }
  .kgc-section .kgc-testi__corner--tl::after { top: 0.5vw !important; left: 0.5vw !important; }
  .kgc-section .kgc-testi__corner--tr { top: -0.75vw !important; right: -0.75vw !important; }
  .kgc-section .kgc-testi__corner--tr::after { top: 0.5vw !important; right: 0.5vw !important; }
  .kgc-section .kgc-testi__corner--bl { bottom: -0.75vw !important; left: -0.75vw !important; }
  .kgc-section .kgc-testi__corner--bl::after { bottom: 0.5vw !important; left: 0.5vw !important; }
  .kgc-section .kgc-testi__corner--br { bottom: -0.75vw !important; right: -0.75vw !important; }
  .kgc-section .kgc-testi__corner--br::after { bottom: 0.5vw !important; right: 0.5vw !important; }

  .kgc-section.kgc-testi {
    aspect-ratio: 1379 / 919 !important;
  }

  .kgc-section .kgc-testi__inner {
    padding: 6.3vw 4.5vw 6vw !important;
  }

  .kgc-section .kgc-testi__divider {
    gap: 0.5vw !important;
    width: 34vw !important;
    margin-top: 0.4vw !important;
  }

  .kgc-section .kgc-testi__ornament {
    width: 3.4vw !important;
    height: 1vw !important;
  }

  .kgc-section .kgc-testi__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.85vw !important;
    margin-top: 2.6vw !important;
  }

  .kgc-section .kgc-testi__card {
    height: 34.4vw !important;
    padding: 3.9vw 3vw 4.9vw !important;
    border-radius: 0.45vw !important;
    box-shadow: 0 0.8vw 2vw rgba(110, 88, 70, 0.16) !important;
  }

  .kgc-section .kgc-testi__stars {
    gap: 1vw !important;
  }

  .kgc-section .kgc-testi__star {
    width: 1.95vw !important;
    height: 1.95vw !important;
  }

  .kgc-section .kgc-testi__quote-wrap {
    margin-top: 3.3vw !important;
  }

  .kgc-section .kgc-testi__quote {
    line-height: 2.05 !important;
    text-align: left !important;
  }

  .kgc-section .kgc-testi__card-divider {
    width: 22vw !important;
    margin-top: 0 !important;
  }

  .kgc-section .kgc-testi__card-ornament {
    width: 1.9vw !important;
    height: 0.6vw !important;
  }

  .kgc-section .kgc-testi__name {
    margin-top: 3.2vw !important;
  }

}

/* =========================================================
   SECTION 9 — CTA "PERCAYAKAN KEPADA KANUGRAHAN COLLECTION"
   ========================================================= */
.kgc-section.kgc-cta {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: #F7E7CF !important;
  background-repeat: no-repeat !important;
  /* mobile: gambar utuh di atas, teks mengalir di bawah foto */
  background-size: 100% auto !important;
  background-position: center top !important;
}

/* mobile: memudarkan tepi bawah gambar ke warna krem */
.kgc-section.kgc-cta::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 52vw !important;
  height: 22.5vw !important;
  background: linear-gradient(to bottom, rgba(247, 231, 207, 0) 0%, #F7E7CF 100%) !important;
  pointer-events: none !important;
}

.kgc-section .kgc-cta__content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  padding: 43vw 22px 40px !important;
  padding-bottom: 80px !important;
  text-align: center !important;
}

.kgc-section .kgc-cta__heading {
  display: block !important;
  text-align: center !important;
}

.kgc-section .kgc-cta__title {
  display: block !important;
  font-family: var(--kgc-font-caslon) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-title) !important;
  line-height: 1.05 !important;
  color: #4A2E1E !important;
  text-align: center !important;
}

.kgc-section .kgc-cta__script-wrap {
  position: relative !important;
  display: block !important;
  width: fit-content !important;
  margin: 0 auto !important;
  font-family: var(--kgc-font-script) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-script) !important;
  line-height: 1.15 !important;
}

.kgc-section .kgc-cta__script {
  position: relative !important;
  z-index: 1 !important;
  display: inline-block !important;
  font-family: var(--kgc-font-script) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-script) !important;
  line-height: 1.15 !important;
  background: linear-gradient(180deg, #D2AA62 0%, #B8893F 55%, #93682A 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  /* ruang ekstra agar swash huruf script tidak terpotong */
  padding: 0.2em 0.35em !important;
  margin: -0.2em -0.35em !important;
}

.kgc-section .kgc-cta__swash {
  position: absolute !important;
  left: -0.2em !important;
  right: -0.45em !important;
  bottom: -0.12em !important;
  display: block !important;
  width: calc(100% + 0.65em) !important;
  height: 0.42em !important;
  pointer-events: none !important;
}

.kgc-section .kgc-cta__text {
  margin-top: 16px !important;
  font-family: var(--kgc-font-caslon) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-body) !important;
  line-height: 1.6 !important;
  color: #3A2618 !important;
  text-align: center !important;
}

.kgc-section .kgc-cta__strong {
  font-family: var(--kgc-font-caslon) !important;
  font-weight: 700 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: #2E1D12 !important;
}

.kgc-section .kgc-cta__action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

.kgc-section .kgc-cta__line {
  position: relative !important;
  display: block !important;
  flex: 1 !important;
  max-width: 70px !important;
  height: 1px !important;
  background: #C9A45F !important;
}

.kgc-section .kgc-cta__line::after {
  content: "" !important;
  position: absolute !important;
  top: -3px !important;
  width: 6px !important;
  height: 6px !important;
  background: #C9A45F !important;
  transform: rotate(45deg) !important;
}

.kgc-section .kgc-cta__line--left::after {
  right: -10px !important;
}

.kgc-section .kgc-cta__line--right::after {
  left: -10px !important;
}

.kgc-section .kgc-cta__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  padding: 8px 26px 8px 12px !important;
  border: 1px solid rgba(233, 199, 126, 0.75) !important;
  border-radius: 9999px !important;
  background: radial-gradient(ellipse at 50% 30%, #B5843F 0%, #946327 55%, #7A4F1E 100%) !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.35), 0 4px 10px rgba(100, 65, 25, 0.3) !important;
  transition: filter 0.15s ease !important;
}

.kgc-section .kgc-cta__btn:hover,
.kgc-section .kgc-cta__btn:focus {
  color: #fff !important;
  text-decoration: none !important;
  filter: brightness(1.08) !important;
}

.kgc-section .kgc-cta__btn:focus-visible {
  outline: 2px solid #C9A45F !important;
  outline-offset: 2px !important;
}

.kgc-section .kgc-cta__wa {
  display: block !important;
  flex-shrink: 0 !important;
  width: 34px !important;
  height: 34px !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)) !important;
}

.kgc-section .kgc-cta__btn-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.kgc-section .kgc-cta__btn-title {
  display: block !important;
  font-family: var(--kgc-font-humanist) !important;
  font-weight: 700 !important;
  font-size: var(--kgc-fs-button) !important;
  line-height: 1.15 !important;
  color: #FFF8EC !important;
  text-align: left !important;
}

.kgc-section .kgc-cta__btn-sub {
  display: block !important;
  font-family: var(--kgc-font-humanist) !important;
  font-weight: 400 !important;
  font-size: var(--kgc-fs-small) !important;
  line-height: 1.2 !important;
  color: #FFF1DA !important;
  text-align: left !important;
}


/* ----- Section 9 desktop (>= 768px) ----- */
@media (min-width: 768px) {
  .kgc-section.kgc-cta {
    aspect-ratio: 602 / 447 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .kgc-section.kgc-cta::before {
    display: none !important;
  }

  .kgc-section .kgc-cta__content {
    position: absolute !important;
    top: 40.6vw !important;
    left: 15% !important;
    width: 70% !important;
    padding: 0 !important;
  }

  .kgc-section .kgc-cta__text {
    margin-top: 1.3vw !important;
  }

  .kgc-section .kgc-cta__action {
    gap: 1.6vw !important;
    margin-top: 1.3vw !important;
  }

  .kgc-section .kgc-cta__line {
    max-width: 11.5vw !important;
  }

  .kgc-section .kgc-cta__line::after {
    top: -0.5vw !important;
    width: 1vw !important;
    height: 1vw !important;
  }

  .kgc-section .kgc-cta__line--left::after {
    right: -1.6vw !important;
  }

  .kgc-section .kgc-cta__line--right::after {
    left: -1.6vw !important;
  }

  .kgc-section .kgc-cta__btn {
    gap: 1.5vw !important;
    padding: 1.1vw 4.2vw 1.1vw 1.8vw !important;
  }

  .kgc-section .kgc-cta__wa {
    width: 5vw !important;
    height: 5vw !important;
  }
}


/* Hormati preferensi kurangi animasi */
@media (prefers-reduced-motion: reduce) {
  .kgc-section .kgc-gift__btn,
  .kgc-section .kgc-fav__btn,
  .kgc-section .kgc-explore__btn,
  .kgc-section .kgc-xmas__btn,
  .kgc-section .kgc-cta__btn {
    transition: none !important;
  }
}