/* Header */
.header { z-index: 880; position: fixed; width: 100%; top: 0; left: 0; right: 0; background: #FFF; border-bottom: 1px solid transparent; transition: all .4s ease-in-out; }

.header ul { margin: 0; padding: 0; list-style: none; }

.header .mobile-menu, .header .mobile-back { display: none; }

.header__logo { padding-right: 24px; min-width: 190px; }

.header__logo > a { display: -webkit-flex; display: -ms-flexbox; display: flex; }

.header__logo > a:hover { text-decoration: none; }

.header__logo img { display: block; max-width: 120px; max-height: 32px; width: auto; height: auto; }

.header__menu .menu { display: -webkit-flex; display: -ms-flexbox; display: flex; }

.header__menu .menu__item { padding-left: 12px; padding-right: 12px; }

.header__menu .menu__item--parent { position: relative; }

.header__menu .menu__item--parent .menu__link { padding-right: 20px; }

.header__menu .menu__item--parent .menu__link::after { content: ""; display: block; position: absolute; width: 20px; height: 20px; top: calc(50% - 10px); right: 0; background: url(../images/ic-dropdown.svg) no-repeat center/contain; }

.header__menu .menu__item--parent:hover .menu__link::before { background: #4B61DD; }

.header__menu .menu__item--parent:hover > .submenu { opacity: 1; visibility: visible; }

.header__menu .menu__item .submenu { display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; width: 324px; padding: 16px 24px; top: calc(100% + 16px); left: calc(50% - 162px); background: #FFF; border: 1px solid #E2E2E2; border-radius: 16px; opacity: 0; overflow: hidden; visibility: hidden; transition: all .2s ease-in-out; }

.header__menu .menu__item .submenu::before { content: ""; display: block; position: absolute; width: 100%; height: 15px; left: 0; top: -15px; }

.header__menu .menu__item .submenu__to-parent { display: none; }

.header__menu .menu__item .submenu__title { z-index: 2; position: relative; display: block; font-size: 12px; line-height: 16px; font-weight: 600; color: #626B79; text-transform: uppercase; padding: 8px; }

.header__menu .menu__item .submenu__item { padding: 8px 0; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }

.header__menu .menu__item .submenu__link { display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 8px; border-radius: 8px; cursor: pointer; }

.header__menu .menu__item .submenu__link .icon { display: block; width: 24px; height: 24px; object-fit: contain; object-position: center; margin-right: 8px; opacity: 0.8; transition: all .3s ease; }

.header__menu .menu__item .submenu__link .text span { display: block; font-size: 14px; line-height: 20px; }

.header__menu .menu__item .submenu__link .text .title { font-weight: 600; color: #2B2A35; }

.header__menu .menu__item .submenu__link .text .desc { color: #626B79; }

.header__menu .menu__item .submenu__link:hover { text-decoration: none; background: #F7FBFF; }

.header__menu .menu__item .submenu__link:hover .icon { -webkit-filter: none; filter: none; opacity: 1; }

.header__menu .menu__item .submenu__col { width: 100%; }

.header__menu .menu__item .submenu__col.menutab-nav { position: relative; padding-right: 32px; }

.header__menu .menu__item .submenu__col.menutab-nav::before { content: ""; z-index: 1; display: block; position: absolute; width: calc(100% + 24px); height: calc(100% + 32px); top: -16px; left: -24px; background: #FBFCFC; }

.header__menu .menu__item .submenu__menutab-nav { z-index: 2; position: relative; }

.header__menu .menu__item .submenu__menutab-nav .submenu__item { padding-top: 16px; padding-bottom: 16px; }

.header__menu .menu__item .submenu__menutab-nav .submenu__link { border-radius: 0; border-bottom: 1px solid transparent; }

.header__menu .menu__item .submenu__menutab-nav .submenu__link:hover, .header__menu .menu__item .submenu__menutab-nav .submenu__link.active { background: transparent; border-bottom-color: #4B61DD; }

.header__menu .menu__item .submenu__menutab-pane { display: none; }

.header__menu .menu__item .submenu__menutab-pane.active { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100%; }

.header__menu .menu__item.menu--lang { display: none; }

.header__menu .menu__item.sub-prod .submenu { width: 1248px; left: calc(50% - 251px); }

.header__menu .menu__item.sub-prod .submenu__list { display: block; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; }

.header__menu .menu__item.sub-prod .submenu__link .icon { width: 40px; height: 40px; -webkit-filter: none; filter: none; opacity: 1; }

.header__menu .menu__item.sub-sm2 .submenu { width: 616px; left: calc(50% - 80px); }

.header__menu .menu__item.sub-sm2 .submenu__list { display: block; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; }

.header__menu .menu__item.sub-md .submenu { width: 840px; left: calc(50% - 420px); }

.header__menu .menu__item.sub-md .submenu__col { width: 100%; max-width: 33.33%; -webkit-flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; }

.header__menu .menu__item.sub-md .submenu__link { -webkit-align-items: center; -ms-flex-align: center; align-items: center; }

.header__menu .menu__item:nth-child(1) .submenu { left: calc(50% - 250px); }

.header__menu .menu__item:nth-child(1).sub-lg .submenu { left: 12px; }

.header__menu .menu__item.sub-lg { position: initial; }

.header__menu .menu__item.sub-lg .submenu { width: 1224px; left: 12px; top: calc(100% - 4px); }

.header__menu .menu__item.sub-lg .submenu__list { display: block; -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; }

.header__menu .menu__item.sub-tab { position: initial; }

.header__menu .menu__item.sub-tab .submenu { width: 1224px; left: 12px; top: calc(100% - 4px); padding: 8px; }

.header__menu .menu__item.sub-tab .submenu__side { width: 100%; max-width: 240px; -webkit-flex: 0 0 240px; -ms-flex: 0 0 240px; flex: 0 0 240px; padding: 16px 0; }

.header__menu .menu__item.sub-tab .submenu__side .submenu__title { padding: 8px 8px 8px 16px; }

.header__menu .menu__item.sub-tab .submenu__side .side-item { display: block; font-size: 14px; line-height: 20px; padding: 16px; font-weight: 600; }

.header__menu .menu__item.sub-tab .submenu__side .side-item:hover { cursor: pointer; }

.header__menu .menu__item.sub-tab .submenu__side .side-item__pane { display: none; }

.header__menu .menu__item.sub-tab .submenu__side .side-item.active { background: #F1F5F9; border-radius: 12px 0 0 12px; position: relative; }

.header__menu .menu__item.sub-tab .submenu__side .side-item.active::before, .header__menu .menu__item.sub-tab .submenu__side .side-item.active::after { content: ""; position: absolute; width: 16px; height: 16px; background-size: contain; background-repeat: no-repeat; }

.header__menu .menu__item.sub-tab .submenu__side .side-item.active::before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M0 16C8.8366 16 16 8.83655 16 0V16H0Z" fill="%23F1F5F9"/></svg>'); top: -16px; right: 0; }

.header__menu .menu__item.sub-tab .submenu__side .side-item.active::after { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M0 9.53674e-07C8.8366 9.53674e-07 16 7.16345 16 16V9.53674e-07H0Z" fill="%23F1F5F9"/></svg>'); bottom: -16px; right: 0; }

.header__menu .menu__item.sub-tab .submenu__side .submenu__all { font-size: 14px; line-height: 20px; border-top: 1px solid #d0d6dd; padding: 8px 0 16px; margin: 8px 8px 16px; font-weight: 400; }

.header__menu .menu__item.sub-tab .submenu__side .submenu__all p { margin-bottom: 0; color: #626b79; font-size: 12px; line-height: 16px; margin-bottom: 4px; }

.header__menu .menu__item.sub-tab .submenu__content { width: 100%; max-width: calc(100% - 240px); -webkit-flex: 0 0 calc(100% - 240px); -ms-flex: 0 0 calc(100% - 240px); flex: 0 0 calc(100% - 240px); background: #F1F5F9; border-radius: 12px; padding: 16px; }

.header__menu .menu__item.sub-tab .submenu__content .submenu__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; }

.header__menu .menu__item.sub-tab .submenu__content .submenu__list:not(:last-child) { margin-bottom: 32px; }

.header__menu .menu__item.sub-tab .submenu__content .submenu__all { font-size: 14px; line-height: 20px; border-top: 1px solid #d0d6dd; padding: 16px 0 0; }

.header__menu .menu__item.sub-tab .submenu__content .submenu__all p { margin-bottom: 0; color: #626b79; font-size: 12px; line-height: 16px; margin-bottom: 4px; }

.header__menu .menu__item.sub-tab .submenu__content .submenu__item { padding: 0; }

.header__menu .menu__item.sub-tab .submenu__content .submenu__link .icon { -webkit-filter: grayscale(1); filter: grayscale(1); }

.header__menu .menu__item.sub-tab .submenu__content .submenu__link:hover { background: #FFFFFF; }

.header__menu .menu__item.sub-tab .submenu__content .side-pane { display: none; }

.header__menu .menu__item.sub-tab .submenu__content .side-pane.active { display: block; }

.header__menu .menu__link { position: relative; display: block; color: #2B2A35; }

.header__menu .menu__link::before { content: ""; display: block; position: absolute; bottom: -8px; left: -8px; width: calc(100% + 16px); height: 2px; background: transparent; transition: all .3s ease-in; }

.header__menu .menu__link:hover { color: #2B2A35; text-decoration: none; }

.header__menu .menu__link:hover::before { background: #4B61DD; }

.header__lang { padding-right: 16px; }

/* .header__lang is nested as .header__cta's first child (see header.php) so
   it rides along with it everywhere - inline in the desktop row, and inside
   the same fixed mobile drawer box below, with no separate position/height
   coordination needed. margin-left:auto (previously on .header__lang itself)
   moves here, since .header__cta is now the one anchoring the whole
   lang+buttons cluster to the row's right edge. */
.header__cta { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-left: auto; }

.header__cta .btn--link { font-size: 14px; font-weight: 600; padding-left: 0; padding-right: 0; }

.header__cta .btn-col { position: relative; }

.header__cta .btn-separator { height: 16px; width: 1px; background: #D0D6DD; margin: 0 16px; }

.header__cta .btn-separator:last-child { display: none; }

.header__wrap { position: relative; padding-top: 12px; padding-bottom: 12px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; transition: all .4s ease-in-out; min-height: 64px; }

.header.fixed { border-bottom-color: #D0D6DD; }

.header.fixed .header__wrap { padding-top: 12px; padding-bottom: 12px; }

.header.is-ready { display: block; }

.header.is-ready + .header.header-dbh { display: block; }

.header.header-dbh { z-index: 879; top: 64px; background: #FFF; }

.header.header-dbh .mobile-menu-dbh { display: none; }

.header.header-dbh .header__logo { display: -webkit-flex; display: -ms-flexbox; display: flex; }

.header.header-dbh .header__logo > a { max-width: 200px; }

.header.header-dbh .header__logo .logo-home { max-width: 0; opacity: 0; visibility: hidden; transition: all .4s ease-in-out; }

.header.header-dbh .header__logo .logo-product { transition: all .4s ease-in-out; }

.header.header-dbh .header__logo img { max-height: 24px; transition: all .4s ease-in-out; }

.header.header-dbh .header__logo .text { display: block; padding-left: 10px; font-size: 16px; line-height: 24px; font-weight: 600; color: #232933; transition: all .4s ease-in-out; white-space: nowrap; }

.header.header-dbh .header__cta { opacity: 0; visibility: hidden; margin-left: auto; transition: all .4s ease-in-out; }

.header.header-dbh .header__wrap { position: relative; padding-top: 12px; padding-bottom: 12px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; min-height: 64px; transition: all .4s ease-in-out; }

main { padding-top: 64px; }

main.pt0 { padding-top: 0 !important; }

.wpml-ls { width: auto !important; }

.wpml-ls .wpml-ls-sub-menu { position: absolute; opacity: 1; visibility: hidden; top: calc( 100% + 10px); right: 0; left: auto !important; padding: 4px; border-radius: 12px; background: #FFF; border: 1px solid #D0D6DD !important; overflow: hidden; transition: all .3s ease; }

.wpml-ls .wpml-ls-sub-menu .wpml-ls-link { display: block; min-width: 80px; padding: 12px 16px; color: #232933; font-size: 16px; line-height: 24px; font-weight: 600; border-radius: 8px; background: #FFF; }

.wpml-ls .wpml-ls-sub-menu .wpml-ls-link:hover { text-decoration: none; background: #E0EEFF; }

.wpml-ls .wpml-ls-sub-menu .wpml-ls-item-id > a::before { content: "Indonesia"; }

.wpml-ls .wpml-ls-sub-menu .wpml-ls-item-id > a > span { display: none; }

.wpml-ls .wpml-ls-sub-menu .wpml-ls-item-en > a::before { content: "English"; }

.wpml-ls .wpml-ls-sub-menu .wpml-ls-item-en > a > span { display: none; }

.wpml-ls .wpml-ls-sub-menu .wpml-ls-item-jp > a::before { content: "Japanese"; }

.wpml-ls .wpml-ls-sub-menu .wpml-ls-item-jp > a > span { display: none; }

.wpml-ls a.wpml-ls-item-toggle { display: block; position: relative; color: #626B79; font-size: 14px; padding: 8px 0; line-height: 20px; padding-left: 20px; padding-right: 20px; }

.wpml-ls a.wpml-ls-item-toggle:hover { text-decoration: none; }

.wpml-ls a.wpml-ls-item-toggle::before { content: ""; display: block; width: 16px; height: 16px; position: absolute; left: 0; top: 10px; background: url(../images/ic-lang.svg) no-repeat center/contain; }

.wpml-ls a.wpml-ls-item-toggle::after { content: ""; display: block; width: 16px; height: 16px; position: absolute; right: 0; top: 10px !important; background: url(../images/ic-caret-down.svg) no-repeat center/16px; border: 0 !important; }

.wpml-ls .wpml-ls-current-language { position: relative; }

.wpml-ls-legacy-dropdown-click .wpml-ls-current-language:hover > a, .wpml-ls-legacy-dropdown-click a:focus, .wpml-ls-legacy-dropdown-click a:hover { background: transparent !important; }

body.has-dbh:not(.menu-open) .header:not(.header-dbh) { background: #F8F9FB; border-bottom: 0; }

body.has-dbh:not(.menu-open) .header.fixed { top: -64px; }

body.has-dbh:not(.menu-open) .header.fixed + .header.header-dbh { top: 0; border-bottom: 1px solid #D0D6DD; }

body.has-dbh:not(.menu-open) .header.fixed + .header.header-dbh .header__logo .logo-home { max-width: 105px; opacity: 1; visibility: visible; }

body.has-dbh:not(.menu-open) .header.fixed + .header.header-dbh .header__logo .logo-product > img { max-width: 0; opacity: 0; visibility: hidden; }

body.has-dbh:not(.menu-open) .header.fixed + .header.header-dbh .header__logo .logo-product .text { margin-left: 24px; padding-left: 24px; border-left: 1px solid #D0D6DD; }

body.has-dbh:not(.menu-open) .header.fixed + .header.header-dbh .header__cta { top: 0; opacity: 1; visibility: visible; }

body.has-dbh:not(.menu-open) .wpml-ls-statics-shortcode_actions, body.has-dbh:not(.menu-open) .wpml-ls-statics-shortcode_actions .wpml-ls-sub-menu, body.has-dbh:not(.menu-open) .wpml-ls-statics-shortcode_actions a { border-color: #F8F9FB !important; background-color: #F8F9FB !important; }

body.has-dbh:not(.menu-open) main { padding-top: 128px; }

body.has-dbh.has-tb .top-banner-bot { margin-top: 128px; }

body.has-dbh.has-tb .header { top: 0; }

body.has-dbh.has-tb .header.header-dbh { top: 64px; }

body.has-dbh.has-tb:not(.menu-open):not(.menu-open-dbh) main { padding-top: 0; }

body.has-dbh.has-tb:not(.menu-open):not(.menu-open-dbh) .header.fixed { top: 0; }

body.has-dbh.has-tb:not(.menu-open):not(.menu-open-dbh) .header.fixed + .header.header-dbh { padding-top: 0; top: 64px; }

body.has-dbh.has-tb:not(.menu-open):not(.menu-open-dbh).tbs-show .header.fixed { top: -128px; }

@media (max-width: 1279px) { .header .mobile-menu { z-index: 12; position: relative; display: block; width: 20px; height: 14px; margin-left: 24px; }
  .header .mobile-menu span { display: block; position: absolute; height: 2px; width: 20px; right: 0; background: #5B37D4; opacity: 1; -webkit-transform: none; transform: none; transform-origin: center; transition: all .4s ease; }
  .header .mobile-menu span:nth-child(1) { top: 0; will-change: transform, top;}
  .header .mobile-menu span:nth-child(2) { top: 6px; width: 80%;  will-change: transform, top, width;}
  .header .mobile-menu span:nth-child(3) { top: 12px; width: 90%;  will-change: transform, top, width;}
  .header__menu { position: fixed; width: 100%; left: 0; top: 64px; padding: 16px 0; background: #FFF; border-top: none; border-bottom: 1px solid #D0D6DD; transition: all .4s ease-in-out; opacity: 0; visibility: hidden; }
  .header__menu .menu { -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
  .header__menu .menu__item.sub-tab .submenu { width: calc(100% - 24px); }
  .header__menu .menu__item.sub-tab .submenu__list { grid-template-columns: repeat(2, 1fr); }
  body.menu-open .header .mobile-menu span { background: #777; }
  body.menu-open .header .mobile-menu span:nth-child(1) { top: 6px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 100%; }
  body.menu-open .header .mobile-menu span:nth-child(2) { top: 6px; opacity: 0; width: 100%; }
  body.menu-open .header .mobile-menu span:nth-child(3) { top: 6px; -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 100%; }
  body.menu-open .header .header__menu { opacity: 1; visibility: visible; }
  body.has-dbh:not(.menu-open) .header.fixed + .header.header-dbh .header__menu { top: 64px; }
  body.has-dbh:not(.menu-open) .header.fixed + .header.header-dbh .header__cta { opacity: 1; }
  body.has-dbh:not(.menu-open) .header.header-dbh .mobile-menu-dbh { z-index: 12; position: relative; display: block; width: 24px; height: 24px; margin-left: 24px; }
  body.has-dbh:not(.menu-open) .header.header-dbh .mobile-menu-dbh span { display: block; width: 24px; height: 24px; background: url(../images/ic-chevron-dbh.svg); background-repeat: no-repeat; background-size: contain; background-position: center; transition: all .4s ease; }
  body.has-dbh:not(.menu-open) .header.header-dbh .header__menu { top: 128px; }
  body.has-dbh:not(.menu-open) .header.header-dbh .header__menu .menu__item.sub-sm2 .submenu { left: calc(50% - 308px); }
  body.has-dbh:not(.menu-open).menu-open-dbh .header.header-dbh .mobile-menu-dbh span { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
  body.has-dbh:not(.menu-open).menu-open-dbh .header.header-dbh .header__menu { opacity: 1; visibility: visible; }
  body.has-dbh:not(.menu-open).menu-open-dbh .header.fixed + .header.header-dbh .header__menu { top: 64px; }
  body.has-dbh:not(.menu-open).menu-open .header.header-dbh .header__menu { display: none; } }

/* 768-1024px only (NOT the full 768-1279px the hamburger button/basic toggle
   above is active for): only the <=768px block below gives .header__menu a
   full-viewport height, an opaque backdrop, and moves .header__cta (Sign in /
   WhatsApp) into a fixed bottom bar. Without those, at this width
   .header__menu is only as tall as its own nav list, .header__cta stays
   inline in the top bar instead of moving to the bottom, and the actual page
   content underneath shows through below the open menu. Reuse the same
   technique (fixed height + max-height transition + full-screen ::after
   backdrop + bottom-pinned CTA) for this range too, using the 64px header
   offset already established for it in the block above (mobile uses 60px).
   Deliberately capped at 1024px (not 1279px, unlike the block above): from
   1025-1279px, clicking the hamburger should still just reveal the plain
   centered .header__menu list as before, with NO drawer/backdrop/pinned-CTA
   treatment - that combination only reads correctly at <=1024px, where there
   isn't also a full desktop nav visible at the same time. */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Same fix as the <=768px block below: .header__lang nested inside
     .header__cta (both now position:fixed here too) no longer provides an
     in-flow margin-left:auto spacer, so .mobile-menu needs its own to stay
     pinned to the header's right edge. */
  .header .mobile-menu { margin-left: auto; }
  .header__menu { z-index: 10; height: calc(100vh - 224px); max-width: 100%; overflow: auto; max-height: 0; border-bottom: none; }
  body.menu-open .header__menu { max-height: calc(100vh - 64px); }
  body.menu-open { position: relative; }
  body.menu-open::after { content: ""; z-index: 20; display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #FFF; }
  .header__cta { z-index: 11; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 12px; position: fixed; bottom: -100px; left: 0; width: 100%; background: #F8F8FB; padding: 24px 16px; opacity: 0; visibility: hidden; transition: all .3s ease; }
  .header__cta .btn-col { padding: 0; display: block; width: 100%; max-width: calc(50% - 6px); flex: 0 0 calc(50% - 6px); }
  .header__cta .btn { display: block; width: 100%; font-size: 16px; line-height: 24px; text-align: center; }
  .header__cta .btn--link { border: 1px solid #D5D7DA; background: #FFF; border-radius: 8px; padding: 12px 16px; color: #40149E; }
  .header__cta .btn-separator { display: none; }
  /* .header__lang is now nested inside .header__cta too (see header.php) -
     force it onto its own full-width row above Sign in / WhatsApp, which
     then wrap onto the next row together at 50/50 (matches the <=768px
     drawer's stacked layout: language switcher on top, buttons below). */
  .header__cta .header__lang { flex: 0 0 100%; padding-right: 0; position: relative; }
  /* .wpml-ls-current-language (the <li>) is what the base rule's
     position:relative + the submenu's absolute positioning normally anchor
     to - it's only as tall/wide as the toggle itself, which is what pushed
     the submenu's own reference point off-center and too close to Sign in.
     Make .header__lang (set to position:relative above) the positioning
     ancestor instead, and center the submenu under the whole row via
     left:50%/transform instead of right:0. */
  .header__cta .header__lang .wpml-ls-current-language { position: static !important; }
  .header__cta .header__lang .wpml-ls-sub-menu { top: 100% !important; bottom: auto !important; left: 50% !important; right: auto !important; -webkit-transform: translateX(-50%) !important; transform: translateX(-50%) !important; margin-top: 8px; }
  .header__cta .header__lang .wpml-ls,
  .header__cta .header__lang .wpml-ls-legacy-dropdown-click,
  .header__cta .header__lang .wpml-ls > ul,
  .header__cta .header__lang .wpml-ls-current-language { display: block !important; width: 100% !important; max-width: 100% !important; }
  .header__cta .header__lang .wpml-ls-item-toggle { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; padding: 6px 6px 6px 12px !important; border-radius: 6px !important; border: 0 !important; background: none !important; color: #656F80 !important; }
  .header__cta .header__lang .wpml-ls-item-toggle::before { position: static !important; width: 20px !important; height: 20px !important; top: auto !important; left: auto !important; }
  .header__cta .header__lang .wpml-ls-item-toggle::after { position: static !important; width: 20px !important; height: 20px !important; top: auto !important; right: auto !important; background-size: 20px !important; border: 0 !important; }
  body.menu-open .header__cta { opacity: 1; visibility: visible; top: auto; bottom: 0; }
}

@media (max-width: 768px) { main { padding-top: 60px; }
  .header .mobile-back { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 60px; background: #FFF; border-bottom: 1px solid #D0D6DD; z-index: 11; font-size: 16px; line-height: 28px; padding: 16px; font-weight: 600; color: #4B61DD; opacity: 0; visibility: hidden; transition: all .4s ease; }
  .header .mobile-back::before { content: ""; display: block; width: 20px; height: 20px; margin-right: 8px; background: url(../images/ic-arrow-right.svg) no-repeat center/contain; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
  .header__menu { z-index: 10; position: fixed; height: calc(100vh - 220px); max-width: 100%; overflow: auto; top: 60px; left: 0; width: 100%; background: #FFF; padding: 0px 0 48px; max-height: 0; opacity: 0; visibility: hidden; transition: all .3s ease; border-bottom: 0; }
  .header__menu .menu { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; max-width: 960px; margin: 0 auto; }
  .header__menu .menu__link { padding: 16px 16px 16px 0; border-bottom: 1px solid #D0D6DD; font-weight: 600; }
  .header__menu .menu__link::before { display: none !important; }
  .header__menu .menu__item .menu__link::after { background: url(../images/chevron.svg) no-repeat center/contain; }
  .header__menu .menu__item .submenu { z-index: 20; position: fixed; top: 0 !important; left: -100% !important; width: 100% !important; height: calc(100vh - 160px); opacity: 1; visibility: visible; border: 0; border-radius: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; opacity: 0; padding: 64px 16px 32px; overflow: auto; }
  .header__menu .menu__item .submenu__to-parent { display: block; padding: 8px; width: 100%; font-size: 14px; line-height: 20px; margin-bottom: 24px; border-bottom: 1px solid #D0D6DD; color: #2B2A35; }
  .header__menu .menu__item .submenu__to-parent .title { display: block; font-weight: 600; }
  .header__menu .menu__item .submenu__to-parent .desc { display: block; }
  .header__menu .menu__item .submenu__menutab-pane { display: block; margin-bottom: 16px; }
  .header__menu .menu__item .submenu__menutab-pane .submenu__title { font-size: 14px; line-height: 20px; color: #2B2A35; font-weight: 600; border-bottom: 1px solid #D0D6DD; }
  .header__menu .menu__item .submenu__menutab-pane .submenu__list { margin-bottom: 8px; }
  .header__menu .menu__item .submenu__menutab-pane .submenu__all { border-top: 0; padding-top: 0; padding-bottom: 0; }
  .header__menu .menu__item .submenu__menutab-pane.active { height: auto; }
  .header__menu .menu__item.menu--lang { display: block; padding-top: 8px; }
  .header__menu .menu__item.menu--lang .wpml-ls a.wpml-ls-item-toggle { padding-top: 16px; padding-bottom: 16px; padding-left: 26px; font-size: 16px; line-height: 24px; font-weight: 600; color: #2B2A35; }
  .header__menu .menu__item.menu--lang .wpml-ls a.wpml-ls-item-toggle::before { width: 20px; height: 20px; top: 18px; }
  .header__menu .menu__item.menu--lang .wpml-ls a.wpml-ls-item-toggle::after { top: 16px !important; width: 20px; height: 20px; right: 0; background-size: 20px; }
  .header__menu .menu__item.menu--lang .wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu { width: 100%; }
  .header__menu .menu__item.sub-md .submenu { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .header__menu .menu__item.sub-tab .submenu { padding: 64px 16px 32px; }
  .header__menu .menu__item.sub-tab .submenu__content { display: none; }
  .header__menu .menu__item.sub-tab .submenu__side { max-width: 100%; }
  .header__menu .menu__item.sub-tab .submenu__side .side-item { display: block; width: 100%; position: relative; border-radius: 0; padding: 8px; border-radius: 16px; border: 1px solid transparent; transition: all .2s ease; }
  .header__menu .menu__item.sub-tab .submenu__side .side-item .submenu__link .text .desc { font-weight: 400; }
  .header__menu .menu__item.sub-tab .submenu__side .side-item__text { display: block; position: relative; padding: 8px 40px 8px 8px; }
  .header__menu .menu__item.sub-tab .submenu__side .side-item__text::after { content: ""; display: block; position: absolute; width: 20px; height: 20px; top: calc(50% - 10px); bottom: auto; right: 4px; background: url(../images/chevron.svg) no-repeat center/contain; -webkit-transform: rotate(90deg); transform: rotate(90deg); transition: all .2s ease; }
  .header__menu .menu__item.sub-tab .submenu__side .side-item__pane { display: block; opacity: 0; visibility: hidden; max-height: 0; padding: 0; background: #F1F5F9; margin: 0; border-radius: 12px; transition: all .2s ease; }
  .header__menu .menu__item.sub-tab .submenu__side .side-item.active { background: #FFF; border-radius: 16px; border-color: #D0D6DD; }
  .header__menu .menu__item.sub-tab .submenu__side .side-item.active::before, .header__menu .menu__item.sub-tab .submenu__side .side-item.active::after { display: none; }
  .header__menu .menu__item.sub-tab .submenu__side .side-item.active .side-item__text::after { width: 20px; height: 20px; right: 4px; background: url(../images/chevron.svg) no-repeat center/contain; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
  .header__menu .menu__item.sub-tab .submenu__side .side-item.active .side-item__pane { max-height: -webkit-max-content; max-height: -moz-max-content; max-height: max-content; margin-top: 8px; opacity: 1; visibility: visible; }
  /* Language switcher: a full-width "globe / ID / caret" row (Figma:
     node-id=8041-19122). .header__lang is .header__cta's first child (see
     header.php), so it's shown/hidden and positioned as part of the exact
     same fixed drawer box as Sign in / WhatsApp below - no separate
     position/height/offset math to keep in sync. Only its own internal
     look (the WPML toggle's flex layout + icon sizing + stripping the
     plugin's default white box) needs styling here. */
  .header .mobile-menu { margin-left: auto; }
  /* padding-right:16px (base rule, desktop-only concern) was spacing
     .header__lang from the next sibling back when it was a standalone
     element - now that it's a flex child of .header__cta with its own
     gap:12px, that padding just throws off centering here. */
  .header__lang { width: 100%; padding-right: 0; position: relative; }
  /* .wpml-ls-current-language (the <li>) is what the base rule's
     position:relative + the submenu's absolute positioning normally anchor
     to - it's only as tall/wide as the toggle itself, which is what pushed
     the submenu's own reference point off-center and too close to Sign in.
     Make .header__lang (set to position:relative above) the positioning
     ancestor instead, and center the submenu under the whole row via
     left:50%/transform instead of right:0. */
  .header__lang .wpml-ls-current-language { position: static !important; }
  .header__lang .wpml-ls-sub-menu { top: 100% !important; bottom: auto !important; left: 50% !important; right: auto !important; -webkit-transform: translateX(-50%) !important; transform: translateX(-50%) !important; margin-top: 8px; }
  /* .wpml-ls itself carries a hardcoded width:auto!important (this same
     file, desktop-compact rule) and WPML's own plugin CSS additionally
     fixes .wpml-ls-legacy-dropdown-click to width:15.5em - both need
     !important here too, or the toggle's flex row ends up centering itself
     within that narrow shrink-wrapped box instead of the full drawer width. */
  .header__lang .wpml-ls,
  .header__lang .wpml-ls-legacy-dropdown-click,
  .header__lang .wpml-ls > ul,
  .header__lang .wpml-ls-current-language { display: block !important; width: 100% !important; max-width: 100% !important; }
  .header__lang .wpml-ls-item-toggle { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; padding: 6px 6px 6px 12px !important; border-radius: 6px !important; border: 0 !important; background: none !important; color: #656F80 !important; }
  .header__lang .wpml-ls-item-toggle:hover { background: none !important; color: #656F80 !important; }
  .header__lang .wpml-ls-item-toggle::before { position: static !important; width: 20px !important; height: 20px !important; top: auto !important; left: auto !important; }
  .header__lang .wpml-ls-item-toggle::after { position: static !important; width: 20px !important; height: 20px !important; top: auto !important; right: auto !important; background-size: 20px !important; border: 0 !important; }
  .header__cta { z-index: 11; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; align-items: stretch; gap: 12px; position: fixed; bottom: -100px; left: 0; width: 100%; background: #F8F8FB; padding: 24px 16px; opacity: 0; visibility: hidden; transition: all .3s ease; }
  .header__cta .btn-col { padding: 0; display: block; width: 100%; max-width: 100%; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; }
  .header__cta .btn { display: block; width: 100%; font-size: 16px; line-height: 24px; text-align: center; }
  .header__cta .btn--link { border: 1px solid #D5D7DA; background: #FFF; border-radius: 8px; padding: 12px 16px; color: #40149E; }
  /* .header .btn-blue.cta-waba / .btn--primary.cta-waba (addition-style.sass)
     sets a compact padding:8px 12px/border-radius:6px meant for the small
     inline desktop header CTA - with no media query of its own, it also
     wins here (same class-count specificity, but declared first). Restore
     the full-size Figma mobile button here specifically. */
  .header__cta .btn-blue.cta-waba,
  .header__cta .btn--primary.cta-waba { padding: 12px 16px !important; border-radius: 8px !important; }
  .header__cta .btn-separator { display: none; }
  .header__wrap { min-height: 64px; padding: 16px; max-width: 100%; }
  .header.fixed .header__wrap { padding-top: 16px; padding-bottom: 16px; }
  .header.fixed .header__menu { top: 60px; }
  .header.fixed .header__menu .menu__item .submenu { top: 0; }
  body.menu-open { position: relative; }
  body.menu-open::after { content: ""; z-index: 20; display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #FFF; }
  body.menu-open .header__menu { opacity: 1; visibility: visible; max-height: calc(100vh - 60px); }
  body.menu-open .header__menu .menu__item .submenu__col { width: 100%; }
  body.menu-open .header__menu .menu__item .submenu.show { top: 0 !important; left: 0 !important; opacity: 1; visibility: visible; }
  body.menu-open .header__cta { opacity: 1; visibility: visible; top: auto; bottom: 0; }
  body.menu-open .header .mobile-menu span { background: #777; }
  body.menu-open .header .mobile-menu span:nth-child(1) { top: 6px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
  body.menu-open .header .mobile-menu span:nth-child(2) { top: 6px; opacity: 0; }
  body.menu-open .header .mobile-menu span:nth-child(3) { top: 6px; -webkit-transform: rotate(135deg); transform: rotate(135deg); }
  body.menu-open.sub-menu-open .header__wrap { max-width: 100% !important; }
  body.menu-open.sub-menu-open .header .mobile-back { opacity: 1; visibility: visible; }
  body.has-dbh:not(.menu-open) .header.header-dbh .mobile-menu-dbh { margin-left: auto; }
  body.has-dbh:not(.menu-open) .header.header-dbh .header__cta { margin-left: auto; }
  body.has-dbh:not(.menu-open) .header.fixed + .header.header-dbh .header__logo .logo-product .text { margin-left: 12px; padding-left: 12px; }
  body.has-dbh:not(.menu-open) .header.fixed + .header.header-dbh .header__cta { display: none; }
  body.has-dbh:not(.menu-open).menu-open-dbh .header:not(.header-dbh) { top: -64px; opacity: 0; visibility: hidden; }
  body.has-dbh:not(.menu-open).menu-open-dbh .header.header-dbh { top: 0; }
  body.has-dbh:not(.menu-open).menu-open-dbh .header.header-dbh .header__logo .logo-home { max-width: 105px; opacity: 1; visibility: visible; }
  body.has-dbh:not(.menu-open).menu-open-dbh .header.header-dbh .header__logo .logo-product > img { max-width: 0; opacity: 0; visibility: hidden; }
  body.has-dbh:not(.menu-open).menu-open-dbh .header.header-dbh .header__logo .logo-product .text { margin-left: 12px; padding-left: 12px; border-left: 1px solid #D0D6DD; }
  body.has-dbh:not(.menu-open).menu-open-dbh .header.header-dbh .header__menu { top: 64px; max-height: 100vh; height: calc(100vh - 64px); }
  body.has-dbh:not(.menu-open).menu-open-dbh .header.header-dbh .header__menu .menu__item .submenu { height: calc(100vh - 64px); }
  body.has-dbh:not(.menu-open).menu-open-dbh .header.header-dbh .header__menu .menu__item .submenu__col { width: 100%; }
  body.has-dbh:not(.menu-open).menu-open-dbh .header.header-dbh .header__menu .menu__item .submenu.show { left: 0 !important; opacity: 1; visibility: visible; }
  body.has-dbh:not(.menu-open).menu-open-dbh.sub-menu-open-dbh .header__wrap { max-width: 100% !important; }
  body.has-dbh:not(.menu-open).menu-open-dbh.sub-menu-open-dbh .header .mobile-back { opacity: 1; visibility: visible; }
  body.has-dbh:not(.menu-open) .wpml-ls-statics-shortcode_actions, body.has-dbh:not(.menu-open) .wpml-ls-statics-shortcode_actions .wpml-ls-sub-menu, body.has-dbh:not(.menu-open) .wpml-ls-statics-shortcode_actions a { border-color: #FFF !important; background-color: #FFF !important; }
  body.has-dbh.has-tb.menu-open header, body.has-dbh.has-tb.menu-open header.fixed { top: 0; border-bottom: 1px solid #D0D6DD; }
  body.has-dbh.has-tb.menu-open header .header__menu, body.has-dbh.has-tb.menu-open header.fixed .header__menu { top: 64px; }
  body.has-dbh.has-tb.menu-open .header.header-dbh { display: none; }
  body.has-dbh.has-tb:not(.menu-open).menu-open-dbh .header.header-dbh { top: 0; }
  body.has-dbh.has-tb:not(.menu-open).menu-open-dbh .header.header-dbh .header__menu { top: 64px; }
  body.has-dbh.has-tb:not(.menu-open).menu-open-dbh .header.fixed + .header.header-dbh { top: 0; }
  body.has-dbh.has-tb:not(.menu-open).menu-open-dbh .header.fixed + .header.header-dbh .header__menu { top: 64px; } }

@media (max-width: 580px) { .header__menu .menu__item.sub-prod, .header__menu .menu__item.sub-sm2, .header__menu .menu__item.sub-lg { position: relative; }
  .header__menu .menu__item.sub-prod .submenu__col, .header__menu .menu__item.sub-sm2 .submenu__col, .header__menu .menu__item.sub-lg .submenu__col { width: 100%; }
  .header__menu .menu__item.sub-prod .submenu__list, .header__menu .menu__item.sub-sm2 .submenu__list, .header__menu .menu__item.sub-lg .submenu__list { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
  .header__menu .menu__item.sub-md .submenu { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .header__menu .menu__item.sub-md .submenu__col { max-width: 100%; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; padding-bottom: 24px; }
  .header__menu .menu__item.sub-tab .submenu__list { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
  .header__cta { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
  .header__cta .btn-col { max-width: 100%; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; padding: 0; }
  body.has-dbh.has-tb.tbs-show:not(.menu-open):not(.menu-open-dbh) .header.fixed { top: -200px; }
  body.has-dbh.has-tb.tbs-show:not(.menu-open):not(.menu-open-dbh) .header.fixed + .header.header-dbh { top: 120px; } }

/*# sourceMappingURL=header.css.map */