.t-eyebrow {
                font: 700 9.8px/normal var(--f-serif);
                color: var(--gold);
                white-space: nowrap;
            }
            .t-h1 {
                font: 700 53.6px/66px var(--f-display);
                white-space: nowrap;
                margin: 0;
            }
            .t-sub {
                font: 700 19.2px/24px var(--f-display);
                color: var(--paper);
                white-space: nowrap;
                margin: 0;
            }
            .t-body {
                font: 400 10px/13.5px var(--f-body);
                color: var(--paper);
                margin: 0;
            }
            .t-btn {
                font: 400 9.3px/normal var(--f-body);
                white-space: nowrap;
            }
            .t-problem {
                font: 400 7.1px/9.4px var(--f-body);
                color: var(--gold-text);
                text-align: center;
            }
            .t-pill {
                font: 400 8.3px/9.7px var(--f-body);
                color: var(--gold-text);
            }
            .t-trust {
                font: 400 7.8px/9.6px var(--f-body);
                color: var(--gold-text);
            }
            .t-inghead {
                font: 400 14.6px/20.1px var(--f-serif);
                color: var(--gold-text);
                white-space: nowrap;
                margin: 0;
            }
            .t-inglabel {
                font: 400 7.9px/10.7px var(--f-body);
                color: var(--gold-text);
                text-align: center;
            }
            .t-more {
                font: 400 6.6px/7.7px var(--f-body);
                color: var(--gold-text);
                text-align: center;
            }

            .t-inghead p,
            .t-inglabel p,
            .t-more p,
            .t-pill p,
            .t-problem p,
            .t-trust p {
                margin: 0;
            }
            .t-eyebrow,
            .t-inghead,
            .t-inglabel {
                margin: 0;
            }

                        .btn-primary {
                display: flex;
                align-items: center;
                justify-content: center;
                background: var(--gold-fill);
                border-radius: 13.5px;
                overflow: hidden;
                color: var(--on-gold);
                transition: filter 0.18s ease;
            }
            .btn-primary:hover {
                filter: brightness(1.08);
            }

            .btn-secondary {
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid var(--gold-border-dim);
                border-radius: 12.5px;
                overflow: hidden;
                color: var(--gold-text);
                transition: border-color 0.18s ease, background-color 0.18s ease;
            }
            .btn-secondary:hover {
                border-color: var(--gold-text);
                background: rgba(var(--gold-rgb), .08);
            }

                        .slot-problem {
                background: var(--slot);
                border: 1px solid rgba(var(--gold-rgb), .45);
                border-style: dashed;
                border-radius: 15px;
            }

            .divider {
                background: rgba(var(--gold-rgb), .55);
            }
            .divider--trust {
                background: rgba(var(--gold-rgb), .5);
            }

            .pill {
                border: 1px solid rgba(var(--gold-rgb), .75);
                border-radius: 9px;
                overflow: hidden;
            }

            .trustbar {
                border: 1px solid rgba(var(--gold-rgb), .7);
                border-radius: 10px;
            }

            .ingredients {
                border: 1px solid rgba(var(--gold-rgb), .6);
                border-radius: 14px;
            }

            .btn-more {
                transition: opacity 0.18s ease;
            }
            .btn-more:hover {
                opacity: 0.78;
            }

                        .e-badge-100pct-alami {
                left: 82px;
                top: 95px;
                width: 195px;
                height: 24px;
            }
            .e-100pct-alami-aman-premium {
                left: 108.3px;
                top: 101px;
            }
            .e-soka-oil {
                left: 82px;
                top: 124px;
            }
            .e-calm-healing-wellness {
                left: 82px;
                top: 180px;
            }
            .e-t-body {
                left: 82.8px;
                top: 213px;
                width: 326px;
            }

                        .e-button-primary {
                left: 88px;
                top: 386px;
                width: 127px;
                height: 27px;
            }
            .e-button-secondary {
                left: 245px;
                top: 387px;
                width: 150px;
                height: 25px;
            }

                        .e-icon-problem-1 {
                left: 97.3px;
                top: 288px;
                width: 30px;
                height: 30px;
                border: none;
                background: url('/jemassets/frontend/img/soka-oil/home8.png') center/contain no-repeat;
            }
            .e-icon-problem-2 {
                left: 175.6px;
                top: 288px;
                width: 30px;
                height: 30px;
                border: none;
                background: url('/jemassets/frontend/img/soka-oil/home9.png') center/contain no-repeat;
            }
            .e-icon-problem-3 {
                left: 253.1px;
                top: 288px;
                width: 30px;
                height: 30px;
                border: none;
                background: url('/jemassets/frontend/img/soka-oil/home10.png') center/contain no-repeat;
            }
            .e-icon-problem-4 {
                left: 335px;
                top: 288px;
                width: 30px;
                height: 30px;
                border: none;
                background: url('/jemassets/frontend/img/soka-oil/home11.png') center/contain no-repeat;
            }
            .e-t-problem {
                left: 112.3px;
                top: 331px;
                width: 90px;
            }
            .e-t-problem-2 {
                left: 190.6px;
                top: 331px;
                width: 90px;
            }
            .e-t-problem-3 {
                left: 268.1px;
                top: 331px;
                width: 90px;
            }
            .e-t-problem-4 {
                left: 350px;
                top: 331px;
                width: 90px;
            }
            .e-divider {
                left: 152px;
                top: 292px;
                width: 1px;
                height: 61px;
            }
            .e-divider-2 {
                left: 228px;
                top: 292px;
                width: 1px;
                height: 61px;
            }
            .e-divider-3 {
                left: 307.5px;
                top: 292px;
                width: 1px;
                height: 61px;
            }

                        .e-pill-feature-1 {
                left: 752.7px;
                top: 99.7px;
                width: 166px;
                height: 42.5px;
            }
            .e-pill-feature-2 {
                left: 752.7px;
                top: 152.5px;
                width: 166px;
                height: 42.5px;
            }
            .e-pill-feature-3 {
                left: 752.7px;
                top: 205.3px;
                width: 166px;
                height: 42.5px;
            }
            .e-icon-slot,
            .e-icon-slot-2,
            .e-icon-slot-3 {
                left: 16px;
                top: 8.25px;
                width: 24px;
                height: 24px;
            }
            .e-pill-feature-1-t-pill-1 {
                left: 61px;
                top: 10.25px;
                width: 84px;
            }
            .e-pill-feature-2-t-pill-1 {
                left: 61px;
                top: 10.25px;
                width: 84px;
            }
            .e-pill-feature-3-t-pill-1 {
                left: 61px;
                top: 5.25px;
                width: 84px;
            }

                        .e-hero-product-botanicals {
                left: 391px;
                top: 131px;
                width: 483px;
                height: 322px;
            }

                        .e-trust-bar {
                left: 53.1px;
                top: 433.4px;
                width: 853.8px;
                height: 43.1px;
            }
            .e-trust-bar-div-1 {
                left: 14.6px;
                top: 7.5px;
                width: 26px;
                height: 26px;
            }
            .e-trust-bar-div-2 {
                left: 253.7px;
                top: 7.5px;
                width: 26px;
                height: 26px;
            }
            .e-trust-bar-div-3 {
                left: 465.2px;
                top: 7.5px;
                width: 26px;
                height: 26px;
            }
            .e-trust-bar-div-4 {
                left: 678.2px;
                top: 7.5px;
                width: 26px;
                height: 26px;
            }
            .e-trust-bar-t-trust-1 {
                left: 46.6px;
                top: 9.4px;
                width: 150px;
            }
            .e-trust-bar-t-trust-2 {
                left: 285.7px;
                top: 9.4px;
                width: 150px;
            }
            .e-trust-bar-t-trust-3 {
                left: 497.2px;
                top: 9.4px;
                width: 150px;
            }
            .e-trust-bar-t-trust-4 {
                left: 710.2px;
                top: 9.4px;
                width: 150px;
            }
            .e-trust-bar-divider--trust-1 {
                left: 208.9px;
                top: 5.5px;
                width: 1px;
                height: 30px;
            }
            .e-trust-bar-divider--trust-2 {
                left: 419.4px;
                top: 5.5px;
                width: 1px;
                height: 30px;
            }
            .e-trust-bar-divider--trust-3 {
                left: 629.9px;
                top: 5.5px;
                width: 1px;
                height: 30px;
            }

                        .e-ingredients-strip {
                left: 7px;
                top: 496px;
                width: 946px;
                height: 120px;
            }
            .e-ingredients-strip-t-inghead-1 {
                left: 64.2px;
                top: 31.6px;
            }

                        .e-ring {
                left: 390.1px;
                top: 18.4px;
                width: 42.6px;
                height: 42.6px;
            }
            .e-ring-2 {
                left: 458.5px;
                top: 18.4px;
                width: 42.6px;
                height: 42.6px;
            }
            .e-ring-3 {
                left: 527.6px;
                top: 18.4px;
                width: 42.6px;
                height: 42.6px;
            }
            .e-ring-4 {
                left: 596.4px;
                top: 18.4px;
                width: 42.6px;
                height: 42.6px;
            }
            .e-ring-5 {
                left: 665.2px;
                top: 18.4px;
                width: 42.6px;
                height: 42.6px;
            }
            .e-ring-6 {
                left: 733.9px;
                top: 18.4px;
                width: 42.6px;
                height: 42.6px;
            }

                        .e-ingredients-strip-div-1 {
                left: 390px;
                top: 19px;
                width: 41px;
                height: 42px;
            }
            .e-ingredients-strip-div-2 {
                left: 458px;
                top: 19px;
                width: 42px;
                height: 42px;
            }
            .e-ingredients-strip-div-3 {
                left: 529px;
                top: 19px;
                width: 39px;
                height: 39px;
            }
            .e-ingredients-strip-div-4 {
                left: 598px;
                top: 19px;
                width: 40px;
                height: 40px;
            }
            .e-ingredients-strip-div-5 {
                left: 669px;
                top: 19px;
                width: 36px;
                height: 36px;
            }
            .e-ingredients-strip-div-6 {
                left: 737px;
                top: 19px;
                width: 39px;
                height: 39px;
            }

            .e-geranium {
                left: 411.4px;
                top: 71.2px;
                width: 96px;
            }
            .e-panax-gingseng {
                left: 479.8px;
                top: 71.2px;
                width: 96px;
            }
            .e-ingredients-strip-t-inglabel-1 {
                left: 548.9px;
                top: 65.8px;
                width: 96px;
            }
            .e-ingredients-strip-t-inglabel-2 {
                left: 617.7px;
                top: 65.8px;
                width: 96px;
            }
            .e-citrus {
                left: 686.5px;
                top: 71.2px;
                width: 96px;
            }
            .e-peppermint {
                left: 755.2px;
                top: 71.2px;
                width: 96px;
            }

            .e-button-lihat-semua {
                left: 839.5px;
                top: 30.1px;
                width: 44.2px;
                height: 44.2px;
            }
            .e-button-lihat-semua-t-more-1 {
                left: 861.6px;
                top: 51.4px;
                width: 44.2px;
            }

@media (max-width: 767px){
  .t-eyebrow  { font-size: 12px; }
  .t-h1       { font-size: 38px; line-height: 44px; }
  .t-sub      { font-size: 17px; line-height: 22px; }
  .t-body     { font-size: 15px; line-height: 22px; }
  .t-btn      { font-size: 14px; }
  .t-problem  { font-size: 12px; line-height: 16px; }
  .t-pill     { font-size: 13px; line-height: 17px; }
  .t-trust    { font-size: 13px; line-height: 17px; }
  .t-inghead  { font-size: 21px; line-height: 27px; white-space: normal !important; text-align: center; }
    .canvas .t-inghead{ margin-bottom: 24px !important; }
  .t-inglabel { font-size: 12px; line-height: 15px; }
  .t-more     { font-size: 12px; line-height: 14px; }

    .canvas .e-badge-100pct-alami{
    display: none !important;
  }

    .canvas .e-100pct-alami-aman-premium{
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content !important;
    margin: 0 auto 14px !important;
    padding: 8px 16px;
    border: 1px solid rgba(var(--gold-rgb), .75);
    border-radius: 20px;
    box-sizing: border-box;
  }
  .canvas .e-100pct-alami-aman-premium::before{
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
  }

  .canvas .btn-primary, .canvas .btn-secondary{
    width: 100%;
    padding: 15px;
    margin-bottom: 24px !important;
    box-sizing: border-box;
  }

    #beranda .group:nth-of-type(1){
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 12px;
    margin-top: 10px;
  }
  #beranda .group:nth-of-type(1) > li{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

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

    #beranda .group:nth-of-type(2){
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  #beranda .group:nth-of-type(2) > li:last-child{
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
  }
  #beranda .group:nth-of-type(2) > li:last-child .pill{
    width: 100%;
    max-width: calc(50% - 6px);
  }

    .canvas .e-icon-slot,
  .canvas .e-icon-slot-2,
  .canvas .e-icon-slot-3{
    width: 32px !important;
    height: 32px !important;
  }
  .canvas .e-icon-slot img,
  .canvas .e-icon-slot-2 img,
  .canvas .e-icon-slot-3 img{
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
  }

    .pill{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    width: 100%;
  }
  .t-pill{
    text-align: center;
  }

  .btn-more{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
  }

    .ingredients .group{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 8px;
  }
  .ingredients .group > li{
    display: grid;
    grid-template-columns: 44px;
    justify-content: center;
    gap: 6px;
    text-align: center;
  }
  .ingredients .group > li > *:nth-child(1),
  .ingredients .group > li > *:nth-child(2){
    grid-row: 1;
    grid-column: 1;
    width: 44px !important;
    height: 44px !important;
  }
  .ingredients .group > li > *:nth-child(1) img,
  .ingredients .group > li > *:nth-child(2) img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  .ingredients .group > li > *:nth-child(3){
    grid-row: 2;
  }
}