body{ --canvas-h: 1060; }

.t-desc        { font: 700 8px/10.5px var(--f-body); color: var(--paper); transition: color .2s ease; pointer-events: auto; }
.t-desc--right { text-align: right; }
.t-label       { font: 600 6px/normal var(--f-util); color: var(--gold); white-space: nowrap; transition: color .2s ease; }

.label-pill{
  display: flex; align-items: center; justify-content: center;
  background: var(--ink);
  border: 1px solid rgba(var(--gold-rgb), .9);
  border-radius: 7px;
  overflow: hidden;
  transition: border-color .2s ease;
  pointer-events: auto;
}

.e-central-bottle-plate{ left:264px; top:30px; width:443px; height:591px; pointer-events: none; }

.e-div-15{ left:178px; top:0;     width:343px; height:324px; }
.e-div-16{ left:178px; top:16px;  width:348px; height:369px; }
.e-div-17{ left:178px; top:109px; width:350px; height:350px; }
.e-div-18{ left:177px; top:194px; width:347px; height:347px; }
.e-div-19{ left:177px; top:282px; width:344px; height:319px; }
.e-div-20{ left:178px; top:349px; width:343px; height:251px; }
.e-div-21{ left:439px; top:0;     width:343px; height:292px; }
.e-div-22{ left:424px; top:32px;  width:375px; height:343px; }
.e-div-23{ left:434px; top:116px; width:351px; height:338px; }
.e-div-24{ left:438px; top:174px; width:343px; height:393px; }
.e-div-25{ left:440px; top:279px; width:393px; height:321px; }
.e-div-26{ left:438px; top:360px; width:350px; height:240px; }

.e-label-geranium,
.e-label-lavender,
.e-label-jahe,
.e-label-gingseng,
.e-label-minyak-zaitun,
.e-label-peppermint{ left:318.5px; width:62px; height:14px; }
.e-label-natural-vitamin-e,
.e-label-kayu-putih,
.e-label-serai-citronella,
.e-label-ciitrus,
.e-label-serai-lemongrass,
.e-label-lada-hitam{ left:580.5px; width:62px; height:14px; }

.e-label-geranium, .e-label-natural-vitamin-e{ top:146px; }
.e-label-lavender, .e-label-kayu-putih{ top:230px; }
.e-label-jahe, .e-label-serai-citronella{ top:312px; }
.e-label-gingseng{ top:395px; }
.e-label-ciitrus{ top:396px; }
.e-label-minyak-zaitun{ top:479px; }
.e-label-serai-lemongrass{ top:480px; }
.e-label-peppermint{ top:563px; }
.e-label-lada-hitam{ top:564px; }

.e-t-desc,
.e-t-desc-2,
.e-t-desc-3,
.e-t-desc-4,
.e-t-desc-5,
.e-t-desc-6{ left:39px;  width:270px; }
.e-t-desc-7,
.e-t-desc-8,
.e-t-desc-9,
.e-t-desc-10,
.e-t-desc-11,
.e-t-desc-12{ left:655px; width:270px; }

[class*="e-div-"]{
  pointer-events: none;
  transition: filter .25s ease;
}
[class*="e-div-"]::after{
  content: "";
  position: absolute;
  inset: 35%;
  pointer-events: auto;
}
.e-div-20::after{
  inset: 64% 35% 8% 35%;
}
.e-div-26::after{
  inset: 58% 35% 8% 35%;
}

.e-div-15:hover, .e-div-15:has(~ .e-label-geranium:hover), .e-div-15:has(~ .e-t-desc:hover),
.e-div-16:hover, .e-div-16:has(~ .e-label-lavender:hover), .e-div-16:has(~ .e-t-desc-2:hover),
.e-div-17:hover, .e-div-17:has(~ .e-label-jahe:hover), .e-div-17:has(~ .e-t-desc-3:hover),
.e-div-18:hover, .e-div-18:has(~ .e-label-gingseng:hover), .e-div-18:has(~ .e-t-desc-4:hover),
.e-div-19:hover, .e-div-19:has(~ .e-label-minyak-zaitun:hover), .e-div-19:has(~ .e-t-desc-5:hover),
.e-div-20:hover, .e-div-20:has(~ .e-label-peppermint:hover), .e-div-20:has(~ .e-t-desc-6:hover),
.e-div-21:hover, .e-div-21:has(~ .e-label-natural-vitamin-e:hover), .e-div-21:has(~ .e-t-desc-7:hover),
.e-div-22:hover, .e-div-22:has(~ .e-label-kayu-putih:hover), .e-div-22:has(~ .e-t-desc-8:hover),
.e-div-23:hover, .e-div-23:has(~ .e-label-serai-citronella:hover), .e-div-23:has(~ .e-t-desc-9:hover),
.e-div-24:hover, .e-div-24:has(~ .e-label-ciitrus:hover), .e-div-24:has(~ .e-t-desc-10:hover),
.e-div-25:hover, .e-div-25:has(~ .e-label-serai-lemongrass:hover), .e-div-25:has(~ .e-t-desc-11:hover),
.e-div-26:hover, .e-div-26:has(~ .e-label-lada-hitam:hover), .e-div-26:has(~ .e-t-desc-12:hover){
  filter: drop-shadow(0 0 10px rgba(255,203,123,.65)) drop-shadow(0 0 22px rgba(255,203,123,.35));
}

.e-label-geranium:hover, .e-label-geranium:has(~ .e-t-desc:hover), .e-div-15:hover ~ .e-label-geranium,
.e-label-lavender:hover, .e-label-lavender:has(~ .e-t-desc-2:hover), .e-div-16:hover ~ .e-label-lavender,
.e-label-jahe:hover, .e-label-jahe:has(~ .e-t-desc-3:hover), .e-div-17:hover ~ .e-label-jahe,
.e-label-gingseng:hover, .e-label-gingseng:has(~ .e-t-desc-4:hover), .e-div-18:hover ~ .e-label-gingseng,
.e-label-minyak-zaitun:hover, .e-label-minyak-zaitun:has(~ .e-t-desc-5:hover), .e-div-19:hover ~ .e-label-minyak-zaitun,
.e-label-peppermint:hover, .e-label-peppermint:has(~ .e-t-desc-6:hover), .e-div-20:hover ~ .e-label-peppermint,
.e-label-natural-vitamin-e:hover, .e-label-natural-vitamin-e:has(~ .e-t-desc-7:hover), .e-div-21:hover ~ .e-label-natural-vitamin-e,
.e-label-kayu-putih:hover, .e-label-kayu-putih:has(~ .e-t-desc-8:hover), .e-div-22:hover ~ .e-label-kayu-putih,
.e-label-serai-citronella:hover, .e-label-serai-citronella:has(~ .e-t-desc-9:hover), .e-div-23:hover ~ .e-label-serai-citronella,
.e-label-ciitrus:hover, .e-label-ciitrus:has(~ .e-t-desc-10:hover), .e-div-24:hover ~ .e-label-ciitrus,
.e-label-serai-lemongrass:hover, .e-label-serai-lemongrass:has(~ .e-t-desc-11:hover), .e-div-25:hover ~ .e-label-serai-lemongrass,
.e-label-lada-hitam:hover, .e-label-lada-hitam:has(~ .e-t-desc-12:hover), .e-div-26:hover ~ .e-label-lada-hitam{
  border-color: var(--gold-text);
}
.e-label-geranium:hover .t-label, .e-label-geranium:has(~ .e-t-desc:hover) .t-label, .e-div-15:hover ~ .e-label-geranium .t-label,
.e-label-lavender:hover .t-label, .e-label-lavender:has(~ .e-t-desc-2:hover) .t-label, .e-div-16:hover ~ .e-label-lavender .t-label,
.e-label-jahe:hover .t-label, .e-label-jahe:has(~ .e-t-desc-3:hover) .t-label, .e-div-17:hover ~ .e-label-jahe .t-label,
.e-label-gingseng:hover .t-label, .e-label-gingseng:has(~ .e-t-desc-4:hover) .t-label, .e-div-18:hover ~ .e-label-gingseng .t-label,
.e-label-minyak-zaitun:hover .t-label, .e-label-minyak-zaitun:has(~ .e-t-desc-5:hover) .t-label, .e-div-19:hover ~ .e-label-minyak-zaitun .t-label,
.e-label-peppermint:hover .t-label, .e-label-peppermint:has(~ .e-t-desc-6:hover) .t-label, .e-div-20:hover ~ .e-label-peppermint .t-label,
.e-label-natural-vitamin-e:hover .t-label, .e-label-natural-vitamin-e:has(~ .e-t-desc-7:hover) .t-label, .e-div-21:hover ~ .e-label-natural-vitamin-e .t-label,
.e-label-kayu-putih:hover .t-label, .e-label-kayu-putih:has(~ .e-t-desc-8:hover) .t-label, .e-div-22:hover ~ .e-label-kayu-putih .t-label,
.e-label-serai-citronella:hover .t-label, .e-label-serai-citronella:has(~ .e-t-desc-9:hover) .t-label, .e-div-23:hover ~ .e-label-serai-citronella .t-label,
.e-label-ciitrus:hover .t-label, .e-label-ciitrus:has(~ .e-t-desc-10:hover) .t-label, .e-div-24:hover ~ .e-label-ciitrus .t-label,
.e-label-serai-lemongrass:hover .t-label, .e-label-serai-lemongrass:has(~ .e-t-desc-11:hover) .t-label, .e-div-25:hover ~ .e-label-serai-lemongrass .t-label,
.e-label-lada-hitam:hover .t-label, .e-label-lada-hitam:has(~ .e-t-desc-12:hover) .t-label, .e-div-26:hover ~ .e-label-lada-hitam .t-label{
  color: var(--gold-text);
}

.e-t-desc:hover, .e-label-geranium:hover ~ .e-t-desc, .e-div-15:hover ~ .e-t-desc,
.e-t-desc-2:hover, .e-label-lavender:hover ~ .e-t-desc-2, .e-div-16:hover ~ .e-t-desc-2,
.e-t-desc-3:hover, .e-label-jahe:hover ~ .e-t-desc-3, .e-div-17:hover ~ .e-t-desc-3,
.e-t-desc-4:hover, .e-label-gingseng:hover ~ .e-t-desc-4, .e-div-18:hover ~ .e-t-desc-4,
.e-t-desc-5:hover, .e-label-minyak-zaitun:hover ~ .e-t-desc-5, .e-div-19:hover ~ .e-t-desc-5,
.e-t-desc-6:hover, .e-label-peppermint:hover ~ .e-t-desc-6, .e-div-20:hover ~ .e-t-desc-6,
.e-t-desc-7:hover, .e-label-natural-vitamin-e:hover ~ .e-t-desc-7, .e-div-21:hover ~ .e-t-desc-7,
.e-t-desc-8:hover, .e-label-kayu-putih:hover ~ .e-t-desc-8, .e-div-22:hover ~ .e-t-desc-8,
.e-t-desc-9:hover, .e-label-serai-citronella:hover ~ .e-t-desc-9, .e-div-23:hover ~ .e-t-desc-9,
.e-t-desc-10:hover, .e-label-ciitrus:hover ~ .e-t-desc-10, .e-div-24:hover ~ .e-t-desc-10,
.e-t-desc-11:hover, .e-label-serai-lemongrass:hover ~ .e-t-desc-11, .e-div-25:hover ~ .e-t-desc-11,
.e-t-desc-12:hover, .e-label-lada-hitam:hover ~ .e-t-desc-12, .e-div-26:hover ~ .e-t-desc-12{
  color: var(--gold-text);
}

.e-t-desc, .e-t-desc-7{ top:108px; }
.e-t-desc-2, .e-t-desc-8{ top:192px; }
.e-t-desc-3, .e-t-desc-9{ top:274px; }
.e-t-desc-4{ top:357px; }
.e-t-desc-10{ top:358px; }
.e-t-desc-5{ top:441px; }
.e-t-desc-11{ top:442px; }
.e-t-desc-6{ top:525px; }
.e-t-desc-12{ top:526px; }

.e-kandungan-video-label{ left:80px; top:630px; }
.t-seclabel-video{
  margin: 0;
  font: 700 12px/16px var(--f-body);
  color: var(--paper);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.e-kandungan-videos{ left:160px; top:664px; width:640px; }
.kandungan-videos{ display: flex; gap: 20px; }
.kandungan-video{
  width: 200px; height: 355px;
  border-radius: 10px;
  border: 1px solid rgba(var(--gold-rgb), .6);
  background: var(--ink);
  object-fit: cover;
}

@media (max-width: 767px){
  .t-desc  { font-size: 14px; line-height: 19px; }
  .t-label { font-size: 11px; }

    .group > li{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(var(--gold-rgb), .18);
  }
  .group > li:last-child{ border-bottom: none; }

  .label-pill{
    align-self: flex-start;
    padding: 4px 12px;
  }

  [class*="e-div-"]{
    overflow: hidden;
  }
  [class*="e-div-"] img{
    transform: scale(2.5);
    transform-origin: 50% 50%;
  }
  .e-div-15 img{ transform: translate(0%, 13%)   scale(2.5); transform-origin: 50% 37%; }
  .e-div-16 img{ transform: translate(1%, -1%)   scale(2.5); transform-origin: 49% 51%; }
  .e-div-17 img{ transform: translate(1%, -1%)   scale(2.5); transform-origin: 49% 51%; }
  .e-div-18 img{ transform: translate(0%, -1%)   scale(2.5); transform-origin: 50% 51%; }
  .e-div-19 img{ transform: translate(0%, -4%)   scale(2.5); transform-origin: 50% 54%; }
  .e-div-20 img{ transform: translate(0%, -25%)  scale(2.5); transform-origin: 50% 75%; }
  .e-div-21 img{ transform: translate(0%, 9%)    scale(2.5); transform-origin: 50% 41%; }
  .e-div-25 img{ transform: translate(6%, -4%)   scale(2.5); transform-origin: 44% 54%; }
  .e-div-26 img{ transform: translate(1%, -24%)  scale(2.5); transform-origin: 49% 74%; }

  .t-desc, .t-desc--right{
    text-align: left !important;
  }

    .t-seclabel-video{ text-align: center; margin-bottom: 20px; }
  .kandungan-videos{
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .kandungan-video{
    width: 100%;
    max-width: 320px;
    height: auto;
  }
}