/* Bar Tips Maksimal grew taller to fit a bigger header icon (see e-icon-tips-header
   below) — bump the page's fixed canvas height so the extra content isn't clipped
   by .canvas{overflow:hidden}. Scoped to body since this file only loads on this page. */
body{ --canvas-h: 650; }

.t-eyebrow  { font: 400 10.9px/13px  var(--f-serif); color: var(--paper); white-space: nowrap; }
.t-h1a      { font: 400 42.7px/50px  var(--f-serif); color: var(--paper); white-space: nowrap; }
.t-h1b      { font: 400 39.1px/46px  var(--f-serif); white-space: nowrap; }
.t-body     { font: 400   10px/13px  var(--f-body);  color: var(--paper); }
.t-seclabel { font: 700   10px/13px  var(--f-body);  color: var(--paper); white-space: nowrap; }

.t-steptitle{ font: 700    8px/10px   var(--f-body); color: var(--gold);  text-align: center;
                            white-space: pre-wrap; }
.t-stepbody { font: 400  7.7px/10.3px var(--f-body); color: var(--paper); text-align: center; }

.t-tiplabel { font: 400  7.4px/9px  var(--f-body); color: var(--paper); text-align: center; }
.t-tip      { font: 400  7.7px/8px  var(--f-body); color: var(--paper); }
.t-notetitle{ font: 700  7.8px/10px var(--f-body); color: var(--paper); }
.t-notebody { font: 400  6.7px/9px  var(--f-body); color: var(--paper); }
.slot--round{ border-radius: 14px; }

.e-cara-pakai-soka-oil{ left:84px; top:96px; }
.e-mudah-digunakan{ left:82px; top:111px; }
.e-manfaat-maksimal{ left:82px; top:154px; }
.e-t-body-2{ left:84px; top:198px; width:370px; }
.e-langkah-pemakaian{ left:80px; top:242px; }

.e-card-step-1{ left:80px;  top:263px; width:187px; height:149px; }
.e-card-step-2{ left:273px; top:263px; width:188px; height:149px; }
.e-card-step-3{ left:467px; top:263px; width:187px; height:149px; }

.e-card-step-1-div-1{ left:35px;   top:14px; width:116px; height:59px; }
.e-untuk-nyeri-masuk-angin{ left:92.5px; top:79px; width:187px; }
.e-card-step-1-t-stepbody-1{ left:92.5px; top:94px; width:155px; }

.e-card-step-2-div-1{ left:33px;   top:14px; width:119px; height:59px; }
.e-untuk-rileksasi-amp-imunitas{ left:93px;   top:79px; width:188px; }
.e-card-step-2-t-stepbody-1{ left:93px;   top:94px; width:146px; }

.e-card-step-3-div-1{ left:37px;   top:15px; width:111px; height:58px; }
.e-untuk-insomnia-kualitas-tidur{ left:92.5px; top:79px; width:187px; }
.e-card-step-3-t-stepbody-1{ left:92.5px; top:94px; width:164px; }

.e-bar-tips-maksimal{ left:80px; top:436px; width:687px; height:110px; }
.e-bar-tips-maksimal-rule-1{ left:79px;  top:9px;  width:1px; height:92px; }
.e-icon-tips-header{ left:39px; top:10px; width:40px; height:40px; border:none; background:url('/jemassets/frontend/img/soka-oil/cara1.png') center/contain no-repeat; }
.e-tips-maksimal{ left:39px;  top:58px; width:58px; }
.e-icon-tip-1{ left:101px; top:40px; width:28px; height:28px; border:none; background:url('/jemassets/frontend/img/soka-oil/cara2.png') center/contain no-repeat; }
.e-bar-tips-maksimal-t-tip-1{ left:139px; top:38px; width:110px; }
.e-icon-tip-2{ left:255px; top:40px; width:28px; height:28px; border:none; background:url('/jemassets/frontend/img/soka-oil/cara3.png') center/contain no-repeat; }
.e-bar-tips-maksimal-t-tip-2{ left:293px; top:38px; width:110px; }
.e-icon-tip-3{ left:409px; top:40px; width:28px; height:28px; border:none; background:url('/jemassets/frontend/img/soka-oil/cara4.png') center/contain no-repeat; }
.e-bar-tips-maksimal-t-tip-3{ left:447px; top:38px; width:110px; }
.e-icon-tip-4{ left:560px; top:40px; width:28px; height:28px; border:none; background:url('/jemassets/frontend/img/soka-oil/cara5.png') center/contain no-repeat; }
.e-bar-tips-maksimal-t-tip-4{ left:598px; top:38px; width:110px; }
.e-bar-tips-maksimal-rule-2{ left:252px; top:35px; width:1px; height:38px; }
.e-bar-tips-maksimal-rule-3{ left:406px; top:35px; width:1px; height:38px; }
.e-bar-tips-maksimal-rule-4{ left:558px; top:35px; width:1px; height:38px; }

.e-bar-perhatian{ left:80px; top:569px; width:687px; height:62px; }
.e-icon-note-1{ left:36px;  top:15px; width:30px; height:30px; border:none; background:url('/jemassets/frontend/img/soka-oil/cara6.png') center/contain no-repeat; }
.e-perhatian{ left:70px;  top:13px; width:250px; }
.e-bar-perhatian-t-notebody-1{ left:70px;  top:26px; width:250px; }
.e-icon-note-2{ left:362px; top:15px; width:30px; height:30px; border:none; background:url('/jemassets/frontend/img/soka-oil/cara7.png') center/contain no-repeat; }
.e-aman-untuk-dewasa{ left:396px; top:13px; width:95px; }
.e-untuk-pria-dan-wanita-dewasa{ left:396px; top:26px; width:95px; }
.e-icon-note-3{ left:541px; top:15px; width:30px; height:30px; border:none; background:url('/jemassets/frontend/img/soka-oil/cara8.png') center/contain no-repeat; }
.e-hasil-optimal{ left:575px; top:13px; width:100px; }
.e-bar-perhatian-t-notebody-2{ left:575px; top:26px; width:100px; }
.e-bar-perhatian-rule-1{ left:329px; top:11px; width:1px; height:38px; }
.e-bar-perhatian-rule-2{ left:508px; top:11px; width:1px; height:38px; }

.e-bottle-plate-2{ left:654px; top:80px; width:296px; height:361px; pointer-events: none; }

@media (max-width: 767px){
  .t-eyebrow  { font-size: 12px; }
  .t-h1a      { font-size: 30px; line-height: 36px; white-space: normal !important; }
  .t-h1b      { font-size: 26px; line-height: 32px; white-space: normal !important; }
  .t-body     { font-size: 15px; line-height: 22px; }
  .t-seclabel { font-size: 13px; }
  .t-steptitle{ font-size: 15px; line-height: 19px; white-space: normal !important; }
  .t-stepbody { font-size: 13px; line-height: 18px; }
  .t-tiplabel { font-size: 13px; }
  .t-tip      { font-size: 14px; line-height: 19px; }
  .t-notetitle{ font-size: 14px; }
  .t-notebody { font-size: 13px; line-height: 18px; }

    #cara-pakai > .group{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  #cara-pakai > .group > li:last-child{
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
  }
  #cara-pakai > .group > li:last-child .panel{
    width: 100%;
    max-width: calc(50% - 8px);
  }
  .group > li > .panel{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }

    .e-bar-tips-maksimal .group{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
  }

    .e-bar-perhatian .group{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .e-bar-perhatian .group > li:last-child{
    grid-column: 1 / -1;
    max-width: calc(50% - 8px);
    margin: 0 auto;
  }

    .e-bar-tips-maksimal .group > li,
  .e-bar-perhatian .group > li{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }

  .canvas .e-icon-tips-header{
    display: block;
    width: 56px !important;
    height: 56px !important;
    margin: 0 auto 12px !important;
  }
}