body{ --canvas-h: 720; }

.e-background-plate{
  width: calc(var(--canvas-w) * 1px);
  height: calc(var(--canvas-h) * 1px);
}

.t-eyebrow  { font: 400 10.9px/13px var(--f-serif); color: var(--paper); white-space: nowrap; }
.t-h1a      { font: 400   23px/27px var(--f-serif); color: var(--paper); white-space: nowrap; }
.t-h1b      { font: 400   26px/31px var(--f-serif); white-space: nowrap; }
.t-body     { font: 400   10px/13px var(--f-body);  color: var(--paper); }

.t-q        { font: 700   10px/normal var(--f-body); color: var(--gold); white-space: nowrap; }
.t-q--open  { line-height: 13px; }
.t-answer   { font: 400    8px/11px   var(--f-body); color: var(--gold); }
.t-chev     { font: 400   12px/normal var(--f-body); color: var(--gold); white-space: nowrap; }
.t-chev--open{ line-height: 14px; }

.t-jamlead  { font: 700    9px/12px   var(--f-body); color: var(--gold); }
.t-jamsub   { font: 400    8px/10.5px var(--f-body); color: var(--gold); }

.slot{ border-radius: 5px; }

.faq-row{
  left: 60px;                       width: 511px;
  height: 27px;
  border: 1px solid rgba(var(--gold-rgb), .7);
  border-radius: 8px;
}
.faq-row > .faq-badge{ left: 12px; top: 5px; width: 15px; height: 15px; }
.faq-row > .faq-q    { left: 28px; top: 5px; }
.faq-row > .faq-chev { left: 481px; top: 1px; }

.faq-row--open{
  height: 68px;
  border-color: rgba(var(--gold-rgb), .95);
  overflow: hidden;               }
.faq-row--open > .faq-badge{ top: 6px; }
.faq-row--open > .faq-q   { top: 11px; }
.faq-row--open > .faq-chev{ top: 7px; }

.e-faq-soka-oil{ left:1120px; top:160px; }
.e-pertanyaan-yang-sering-diajukan{ left:79px; top:99px; }
.e-t-h1b{ left:80px; top:123px; }
.e-t-body{ left:80px; top:156px; width:350px; }

.faq-list{
  position: static;
  margin: 199px 0 0 60px;
  width: 511px;
  pointer-events: auto;
}
.faq-list > li{ margin-bottom: 8px; }
.faq-list > li:last-child{ margin-bottom: 0; }

.faq-list .faq-row{
  position: relative;
  left: auto; top: auto;
  height: auto;
  padding-top: 27px;
  box-sizing: border-box;
  cursor: pointer;
}
.faq-list .faq-row--open{
  height: auto;
  overflow: visible;
  padding-top: 30px;
}
.faq-list .faq-row .t-answer{
  position: static;
  left: auto; top: auto; width: auto;
  display: none;
  margin: 0;
  padding: 0 28px 14px;
  box-sizing: border-box;
}
.faq-list .faq-row--open .t-answer{
  display: block;
}
.faq-list .faq-chev{
  transition: transform .2s ease;
}
.faq-list .faq-row--open .faq-chev{
  transform: rotate(180deg);
}

.e-bar-jaminan{
  position: relative;
  left: auto; top: auto;
  margin: 24px 0 0 60px;
  width: 599px;
  height: 60px;
}

.e-bar-jaminan-icon-jaminan-1{ left:13px;  top:17px; width:24px; height:24px; border:none; background:url('/jemassets/frontend/img/soka-oil/faq1.png') center/contain no-repeat; }
.e-bar-jaminan-icon-jaminan-2{ left:174px; top:12px; width:24px; height:24px; border:none; background:url('/jemassets/frontend/img/soka-oil/faq2.png') center/contain no-repeat; }
.e-bar-jaminan-icon-jaminan-3{ left:302px; top:12px; width:24px; height:24px; border:none; background:url('/jemassets/frontend/img/soka-oil/faq3.png') center/contain no-repeat; }
.e-bar-jaminan-icon-jaminan-4{ left:456px; top:13px; width:24px; height:24px; border:none; background:url('/jemassets/frontend/img/soka-oil/faq4.png') center/contain no-repeat; }
.e-bar-jaminan-100pct-alami{ left:39px;  top:15px; width:125px; }
.e-bar-jaminan-tanpa-bahan-kimia-berbahaya{ left:39px;  top:27px; width:125px; }
.e-bar-jaminan-aman-digunakan{ left:200px; top:10px; width:100px; }
.e-bar-jaminan-t-jamsub{ left:200px; top:22px; width:100px; }
.e-bar-jaminan-bebas-bahan-berbahaya{ left:328px; top:10px; width:105px; }
.e-bar-jaminan-t-jamsub-2{ left:328px; top:34px; width:105px; }
.e-bar-jaminan-garansi-uang-kembali{ left:482px; top:11px; width:100px; }
.e-bar-jaminan-jika-tidak-puas-dalam-30-hari{ left:482px; top:35px; width:100px; }
.e-bar-jaminan-rule{ left:168px;   top:8px; width:1px; height:42px; }
.e-bar-jaminan-rule-2{ left:298px;   top:8px; width:1px; height:42px; }
.e-bar-jaminan-rule-3{ left:448.5px; top:8px; width:1px; height:42px; }

.e-overlay-plate{ left:39px; top:32px; width:873px; height:546px; pointer-events: none; }

@media (max-width: 767px){
  .t-eyebrow  { font-size: 12px; }
  .t-h1a      { font-size: 26px; line-height: 31px; white-space: normal !important; }
  .t-h1b      { font-size: 24px; line-height: 29px; white-space: normal !important; }
  .t-body     { font-size: 15px; line-height: 21px; }
  .t-q        { font-size: 15px; }
  .t-answer   { font-size: 14px; line-height: 19px; }
  .t-chev     { font-size: 18px; }
  .t-jamlead  { font-size: 14px; }
  .t-jamsub   { font-size: 12px; line-height: 16px; }

    .faq-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .faq-badge{ order: 0; flex: 0 0 auto; }
    .faq-q    { order: 1; flex: 1 1 0%; min-width: 0; }
  .faq-chev { order: 2; flex: 0 0 auto; }
  .t-answer { order: 3; flex-basis: 100%; }
    .canvas .t-answer{ margin-top: 10px !important; }

    .faq-list{
    margin: 24px 0 0 0 !important;
    width: auto;
  }
  .faq-list .faq-row,
  .faq-list .faq-row--open{
    padding-top: 14px;
    padding-bottom: 14px;
  }
    .canvas .e-bar-jaminan{
    margin: 24px 0 0 0 !important;
  }

    .e-bar-jaminan .group{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;
  }
  .e-bar-jaminan .group > li{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }

    .canvas .e-overlay-plate{
    max-width: 82% !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    display: block !important;
  }
  .canvas .e-overlay-plate .cover{
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    object-position: 100% 50% !important;
  }
}