/* PPOB Android/iOS app shell - final layer for phone and desktop. Loaded last. */

:root {
  --ppob-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ppob-safe-top: env(safe-area-inset-top, 0px);
  --ppob-frame-max: 430px;
}

/* v196 compact typography: keep the Android/iOS app frame neat on phone and desktop */
@media (min-width: 0) {
  body.ppob-storefront .ppob-native-brand strong {
    font-size: clamp(20px, 5.8vw, 25px) !important;
    line-height: 1.05 !important;
  }

  body.ppob-storefront .ppob-promo-chip {
    min-height: 34px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
  }

  body.ppob-storefront .ppob-native-wallet {
    min-height: 112px !important;
    padding: 14px 16px 13px !important;
  }

  body.ppob-storefront .ppob-native-wallet-main span {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  body.ppob-storefront .ppob-native-wallet-main small {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  html body.ppob-storefront #ppobBalanceValue {
    font-size: clamp(23px, 6.4vw, 29px) !important;
    line-height: 1 !important;
    letter-spacing: -0.035em !important;
  }

  body.ppob-storefront .ppob-native-point {
    min-height: 29px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
  }

  body.ppob-storefront .ppob-native-actions a span {
    width: 31px !important;
    height: 31px !important;
  }

  body.ppob-storefront .ppob-native-actions a small {
    font-size: 9.4px !important;
    line-height: 1.12 !important;
  }

  body.ppob-storefront .ppob-native-alert strong {
    font-size: 12.2px !important;
    line-height: 1.15 !important;
  }

  body.ppob-storefront .ppob-native-alert small {
    font-size: 10.8px !important;
    line-height: 1.2 !important;
  }

  body.ppob-storefront .ppob-native-search input {
    font-size: 12.5px !important;
  }

  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button span {
    width: 42px !important;
    height: 42px !important;
  }

  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button small {
    font-size: 9.2px !important;
    line-height: 1.15 !important;
  }

  body.ppob-storefront .ppob-category-route-hint,
  body.ppob-storefront .ppob-provider-helper {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  body.ppob-storefront .ppob-product-grid::before,
  body.ppob-storefront .ppob-catalog-heading h2 {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }

  body.ppob-storefront .ppob-visible-subfilter button,
  body.ppob-storefront .ppob-provider-card {
    min-height: 62px !important;
  }

  body.ppob-storefront .ppob-visible-subfilter button strong,
  body.ppob-storefront .ppob-provider-card strong,
  body.ppob-storefront .ppob-product-card h3 {
    font-size: 12.5px !important;
    line-height: 1.25 !important;
  }

  body.ppob-storefront .ppob-visible-subfilter button small,
  body.ppob-storefront .ppob-provider-card small,
  body.ppob-storefront .ppob-product-card p {
    font-size: 10.6px !important;
    line-height: 1.2 !important;
  }

  body.ppob-storefront .ppob-section-head h2 {
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  body.ppob-storefront .ppob-section-head span,
  body.ppob-storefront .ppob-section-head a {
    font-size: 11px !important;
  }

  body.ppob-storefront .ppob-empty-state {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body.ppob-storefront .ppob-native-bottom-nav a small {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }
}

html {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #f3f6fb;
  overscroll-behavior-y: none;
}

body.ppob-storefront,
body.ppob-product-page,
body.riwayat-page,
body.saldo-page,
body.catatan-page {
  width: 100%;
  min-width: 320px;
  min-height: 100dvh;
  overflow-x: hidden !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body.ppob-storefront *,
body.ppob-storefront *::before,
body.ppob-storefront *::after,
body.ppob-product-page *,
body.ppob-product-page *::before,
body.ppob-product-page *::after,
body.riwayat-page *,
body.riwayat-page *::before,
body.riwayat-page *::after,
body.saldo-page *,
body.saldo-page *::before,
body.saldo-page *::after,
body.catatan-page *,
body.catatan-page *::before,
body.catatan-page *::after {
  box-sizing: border-box;
}

body.ppob-storefront :is(button, a, input, select, textarea, summary),
body.ppob-product-page :is(button, a, input, select, textarea, summary),
body.riwayat-page :is(button, a, input, select, textarea, summary),
body.saldo-page :is(button, a, input, select, textarea, summary),
body.catatan-page :is(button, a, input, select, textarea, summary) {
  touch-action: manipulation;
}

body.ppob-storefront :is(input, select, textarea),
body.ppob-product-page :is(input, select, textarea),
body.riwayat-page :is(input, select, textarea),
body.saldo-page :is(input, select, textarea),
body.catatan-page :is(input, select, textarea) {
  min-width: 0;
  max-width: 100%;
  font-size: 16px;
}

body.ppob-storefront :is(svg, img),
body.ppob-product-page :is(svg, img),
body.riwayat-page :is(svg, img),
body.saldo-page :is(svg, img),
body.catatan-page :is(svg, img) {
  max-width: 100%;
}

body.ppob-storefront :is(h1, h2, h3, h4, p, span, small, strong, dd, dt, button, a),
body.ppob-product-page :is(h1, h2, h3, h4, p, span, small, strong, dd, dt, button, a),
body.riwayat-page :is(h1, h2, h3, h4, p, span, small, strong, dd, dt, button, a),
body.saldo-page :is(h1, h2, h3, h4, p, span, small, strong, dd, dt, button, a),
body.catatan-page :is(h1, h2, h3, h4, p, span, small, strong, dd, dt, button, a) {
  min-width: 0;
}

body.ppob-storefront :is(.ppob-native-app-home, .ppob-native-bottom-nav),
body.ppob-product-page :is(.ppob-product-shell, .ppob-product-sheet),
body.riwayat-page :is(.riwayat-shell, .ppob-native-bottom-nav),
body.saldo-page :is(.saldo-shell, .ppob-native-bottom-nav, .saldo-transfer-sheet),
body.catatan-page :is(.catatan-shell, .ppob-native-bottom-nav) {
  width: min(100%, var(--ppob-frame-max)) !important;
  max-width: var(--ppob-frame-max) !important;
}

body.ppob-storefront .ppob-native-bottom-nav,
body.riwayat-page .ppob-native-bottom-nav,
body.saldo-page .ppob-native-bottom-nav,
body.catatan-page .ppob-native-bottom-nav {
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  padding-bottom: calc(8px + var(--ppob-safe-bottom)) !important;
}

body.ppob-storefront :is(.ppob-order-popup, .ppob-category-modal-dialog, .ppob-price-modal-dialog),
body.ppob-product-page .ppob-product-sheet,
body.saldo-page .saldo-transfer-sheet,
body.catatan-page .catatan-modal-card {
  max-height: calc(100dvh - var(--ppob-safe-top) - var(--ppob-safe-bottom) - 18px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

body.ppob-storefront :is(.ppob-order-popup, .ppob-category-modal-dialog, .ppob-price-modal-dialog),
body.catatan-page .catatan-modal-card {
  width: min(calc(100vw - 24px), var(--ppob-frame-max)) !important;
}

body.ppob-storefront :is(.ppob-order-popup, .ppob-category-modal-dialog, .ppob-price-modal-dialog) {
  border-radius: 24px !important;
}

body.ppob-storefront :is(.ppob-order-popup-backdrop, .ppob-category-modal-backdrop, .ppob-price-modal-backdrop),
body.ppob-product-page .ppob-product-sheet-overlay,
body.saldo-page .saldo-sheet-overlay,
body.catatan-page .catatan-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
}

@supports not (height: 100dvh) {
  body.ppob-storefront,
  body.ppob-product-page,
  body.riwayat-page,
  body.saldo-page,
  body.catatan-page,
  body.ppob-storefront .ppob-native-app-home,
  body.ppob-product-page .ppob-product-shell,
  body.riwayat-page .riwayat-shell,
  body.saldo-page .saldo-shell,
  body.catatan-page .catatan-shell {
    min-height: 100vh !important;
  }

  body.ppob-storefront :is(.ppob-order-popup, .ppob-category-modal-dialog, .ppob-price-modal-dialog),
  body.ppob-product-page .ppob-product-sheet,
  body.saldo-page .saldo-transfer-sheet,
  body.catatan-page .catatan-modal-card {
    max-height: calc(100vh - 18px) !important;
  }
}

@media (max-width: 360px) {
  body.ppob-storefront,
  body.ppob-product-page,
  body.riwayat-page,
  body.saldo-page,
  body.catatan-page {
    min-width: 300px;
  }

  body.ppob-storefront .ppob-native-bottom-nav a small,
  body.riwayat-page .ppob-native-bottom-nav a small,
  body.saldo-page .ppob-native-bottom-nav a small,
  body.catatan-page .ppob-native-bottom-nav a small {
    font-size: 9px !important;
  }
}

.ppob-native-app-home,
.ppob-native-bottom-nav {
  display: none;
}

/* v159 app polish: clean guest/member states, compact categories, readable product cards */
@media (min-width: 0) {
  body.ppob-storefront.is-ppob-guest .ppob-native-wallet {
    background:
      linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.10)),
      radial-gradient(circle at 88% 14%, rgba(255,112,67,.28), transparent 52px) !important;
  }

  body.ppob-storefront.is-ppob-member .ppob-native-wallet {
    background:
      linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.12)),
      radial-gradient(circle at 86% 16%, rgba(34,197,94,.24), transparent 56px) !important;
  }

  body.ppob-storefront.is-ppob-guest #ppobAccountBadge {
    background: #FFF3EA !important;
    color: var(--gt-accent) !important;
  }

  body.ppob-storefront.is-ppob-member #ppobAccountBadge {
    background: #ECFDF3 !important;
    color: #027A48 !important;
  }

  body.ppob-storefront #ppobBalanceValue {
    max-width: min(100%, 260px) !important;
    overflow-wrap: anywhere !important;
  }

  body.ppob-storefront.is-ppob-guest #ppobBalanceValue {
    font-size: clamp(24px, 7vw, 31px) !important;
  }

  body.ppob-storefront .ppob-native-sheet {
    overflow: visible !important;
  }

  body.ppob-storefront .ppob-native-alert {
    grid-template-columns: 42px minmax(0, 1fr) 30px !important;
    grid-template-areas:
      "icon copy close"
      "icon action close" !important;
    align-items: center !important;
    padding: 13px !important;
    gap: 9px 11px !important;
    min-height: 0 !important;
  }

  body.ppob-storefront .ppob-native-alert > span {
    grid-area: icon !important;
    width: 42px !important;
    height: 42px !important;
    align-self: center !important;
  }

  body.ppob-storefront .ppob-native-alert > div {
    grid-area: copy !important;
    min-width: 0 !important;
  }

  body.ppob-storefront .ppob-native-alert strong {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  body.ppob-storefront .ppob-native-alert small {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }

  body.ppob-storefront .ppob-native-alert a {
    grid-area: action !important;
    width: max-content !important;
    min-height: 32px !important;
    padding-inline: 12px !important;
  }

  body.ppob-storefront .ppob-native-alert button {
    grid-area: close !important;
    align-self: center !important;
  }

  body.ppob-storefront .ppob-native-menu {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px 6px !important;
    align-items: start !important;
  }

  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button,
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button:is(.is-active, .active, :hover, :focus) {
    min-height: 76px !important;
    padding: 0 1px !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button span,
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button:is(.is-active, .active, :hover, :focus) span {
    width: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
  }

  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button small {
    max-width: 72px !important;
    margin-inline: auto !important;
    font-size: 10px !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
    text-align: center !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  body.ppob-storefront .ppob-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding-top: 42px !important;
  }

  body.ppob-storefront .ppob-product-grid::before {
    content: attr(data-title) !important;
  }

  body.ppob-storefront .ppob-product-grid::before {
    left: 0 !important;
    right: auto !important;
    top: 4px !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card.ppob-product-card,
  body.ppob-storefront .ppob-product-grid .ppob-product-card {
    min-height: 108px !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 13px 12px !important;
    border-radius: 19px !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card::after {
    display: none !important;
    content: none !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card-copy {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  body.ppob-storefront .ppob-product-grid :is(.ppob-product-card-visual, .ppob-product-fallback, .ppob-product-thumb, .ppob-product-action) {
    display: none !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card h3 {
    min-height: 36px !important;
    margin: 0 !important;
    color: var(--gt-ink) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.28 !important;
    letter-spacing: -.02em !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    -webkit-line-clamp: 2 !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card p {
    margin: 0 !important;
    color: var(--gt-primary) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card.is-selected {
    border-color: rgba(255, 112, 67, .42) !important;
    box-shadow: 0 12px 26px rgba(255, 112, 67, .13) !important;
  }

  @media (max-width: 380px) {
    body.ppob-storefront .ppob-native-sheet {
      margin-inline: 8px !important;
      padding-inline: 10px !important;
    }

    body.ppob-storefront .ppob-native-alert {
      grid-template-columns: 38px minmax(0, 1fr) 28px !important;
      padding: 11px !important;
    }

    body.ppob-storefront .ppob-native-menu {
      gap: 11px 4px !important;
    }

    body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button span {
      width: 42px !important;
      height: 42px !important;
    }

    body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button small {
      max-width: 64px !important;
      font-size: 9.2px !important;
    }
  }

  @media (min-width: 768px) {
    body.ppob-storefront .ppob-native-alert {
      grid-template-columns: 46px minmax(0, 1fr) auto 34px !important;
      grid-template-areas: "icon copy action close" !important;
    }

    body.ppob-storefront .ppob-native-menu {
      grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
      gap: 12px !important;
    }

    body.ppob-storefront .ppob-product-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  }

  @media (min-width: 1024px) {
    body.ppob-storefront .ppob-product-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    body.ppob-storefront .ppob-product-grid .ppob-product-card.ppob-product-card,
    body.ppob-storefront .ppob-product-grid .ppob-product-card {
      min-height: 102px !important;
    }
  }
}

/* v159 final winning layer */
@media (min-width: 0) {
  body.ppob-storefront.is-ppob-guest #ppobAccountBadge { background: #FFF3EA !important; color: var(--gt-accent) !important; }
  body.ppob-storefront.is-ppob-member #ppobAccountBadge { background: #ECFDF3 !important; color: #027A48 !important; }
  body.ppob-storefront.is-ppob-guest #ppobBalanceValue { font-size: clamp(24px, 7vw, 31px) !important; overflow-wrap: anywhere !important; }

  body.ppob-storefront .ppob-native-alert {
    grid-template-columns: 42px minmax(0, 1fr) 30px !important;
    grid-template-areas: "icon copy close" "icon action close" !important;
    gap: 9px 11px !important;
    padding: 13px !important;
    align-items: center !important;
  }

  body.ppob-storefront .ppob-native-alert > span { grid-area: icon !important; width: 42px !important; height: 42px !important; }
  body.ppob-storefront .ppob-native-alert > div { grid-area: copy !important; min-width: 0 !important; }
  body.ppob-storefront .ppob-native-alert a { grid-area: action !important; width: max-content !important; min-height: 32px !important; padding-inline: 12px !important; }
  body.ppob-storefront .ppob-native-alert button { grid-area: close !important; align-self: center !important; }
  body.ppob-storefront .ppob-native-alert strong { font-size: 13px !important; line-height: 1.35 !important; }
  body.ppob-storefront .ppob-native-alert small { font-size: 11.5px !important; line-height: 1.4 !important; }

  body.ppob-storefront .ppob-native-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px 6px !important;
    align-items: start !important;
  }

  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button,
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button:is(.is-active, .active, :hover, :focus) {
    min-height: 76px !important;
    padding: 0 1px !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button span,
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button:is(.is-active, .active, :hover, :focus) span {
    width: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
  }

  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button small {
    max-width: 72px !important;
    margin-inline: auto !important;
    font-size: 10px !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
    text-align: center !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  body.ppob-storefront .ppob-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding-top: 42px !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card.ppob-product-card,
  body.ppob-storefront .ppob-product-grid .ppob-product-card {
    min-height: 108px !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 13px 12px !important;
    border-radius: 19px !important;
    overflow: hidden !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card::after { display: none !important; content: none !important; }
  body.ppob-storefront .ppob-product-grid .ppob-product-card-copy {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  body.ppob-storefront .ppob-product-grid :is(.ppob-product-card-visual, .ppob-product-fallback, .ppob-product-thumb, .ppob-product-action) { display: none !important; }
  body.ppob-storefront .ppob-product-grid .ppob-product-card h3 {
    min-height: 36px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    -webkit-line-clamp: 2 !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  @media (max-width: 380px) {
    body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button span { width: 42px !important; height: 42px !important; }
    body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button small { max-width: 64px !important; font-size: 9.2px !important; }
  }

  @media (min-width: 768px) {
    body.ppob-storefront .ppob-native-alert {
      grid-template-columns: 46px minmax(0, 1fr) auto 34px !important;
      grid-template-areas: "icon copy action close" !important;
    }
    body.ppob-storefront .ppob-native-menu { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; gap: 12px !important; }
    body.ppob-storefront .ppob-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  }

  @media (min-width: 1024px) {
    body.ppob-storefront .ppob-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  }
}

/* v196-final: compact typography placed last so it cannot be overwritten */
@media (min-width: 0) {
  body.ppob-storefront .ppob-native-brand strong { font-size: clamp(20px, 5.8vw, 25px) !important; line-height: 1.05 !important; }
  body.ppob-storefront .ppob-promo-chip { min-height: 34px !important; padding: 0 13px !important; font-size: 12px !important; }
  body.ppob-storefront .ppob-native-wallet { min-height: 112px !important; padding: 14px 16px 13px !important; }
  body.ppob-storefront .ppob-native-wallet-main span { font-size: 12px !important; line-height: 1.15 !important; }
  body.ppob-storefront .ppob-native-wallet-main small { font-size: 11px !important; line-height: 1.15 !important; }
  html body.ppob-storefront #ppobBalanceValue { font-size: clamp(23px, 6.4vw, 29px) !important; line-height: 1 !important; letter-spacing: -0.035em !important; }
  body.ppob-storefront .ppob-native-point { min-height: 29px !important; padding: 0 12px !important; font-size: 11px !important; }
  body.ppob-storefront .ppob-native-actions a span { width: 31px !important; height: 31px !important; }
  body.ppob-storefront .ppob-native-actions a small { font-size: 9.4px !important; line-height: 1.12 !important; }
  body.ppob-storefront .ppob-native-alert strong { font-size: 12.2px !important; line-height: 1.15 !important; }
  body.ppob-storefront .ppob-native-alert small { font-size: 10.8px !important; line-height: 1.2 !important; }
  body.ppob-storefront .ppob-native-search input { font-size: 12.5px !important; }
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button span { width: 42px !important; height: 42px !important; }
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button small { font-size: 9.2px !important; line-height: 1.15 !important; }
  body.ppob-storefront .ppob-category-route-hint,
  body.ppob-storefront .ppob-provider-helper { font-size: 12.5px !important; line-height: 1.35 !important; text-align: center !important; }
  body.ppob-storefront .ppob-product-grid::before,
  body.ppob-storefront .ppob-catalog-heading h2 { font-size: 19px !important; line-height: 1.2 !important; }
  body.ppob-storefront .ppob-visible-subfilter button,
  body.ppob-storefront .ppob-provider-card { min-height: 62px !important; }
  body.ppob-storefront .ppob-visible-subfilter button strong,
  body.ppob-storefront .ppob-provider-card strong,
  body.ppob-storefront .ppob-product-card h3 { font-size: 12.5px !important; line-height: 1.25 !important; }
  body.ppob-storefront .ppob-visible-subfilter button small,
  body.ppob-storefront .ppob-provider-card small,
  body.ppob-storefront .ppob-product-card p { font-size: 10.6px !important; line-height: 1.2 !important; }
  body.ppob-storefront .ppob-section-head h2 { font-size: 18px !important; line-height: 1.15 !important; }
  body.ppob-storefront .ppob-section-head span,
  body.ppob-storefront .ppob-section-head a { font-size: 11px !important; }
  body.ppob-storefront .ppob-empty-state { font-size: 12px !important; line-height: 1.35 !important; }
  body.ppob-storefront .ppob-native-bottom-nav a small { font-size: 9px !important; line-height: 1.1 !important; }
}

/* v195 mobile precision: centered text, stable wallet card, and lighter navigation */
@media (min-width: 0) {
  body.ppob-storefront {
    -webkit-tap-highlight-color: transparent !important;
  }

  body.ppob-storefront .ppob-native-app-home,
  body.ppob-storefront .ppob-store-section-first {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.ppob-storefront .ppob-native-brand {
    align-items: center !important;
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
  }

  body.ppob-storefront .ppob-native-brand strong {
    line-height: 1 !important;
    letter-spacing: -.04em !important;
  }

  body.ppob-storefront .ppob-native-wallet {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "copy badge" "actions actions" !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 15px 16px 14px !important;
    min-height: 122px !important;
    overflow: hidden !important;
  }

  body.ppob-storefront .ppob-native-wallet-main {
    grid-area: copy !important;
    min-width: 0 !important;
    display: grid !important;
    gap: 1px !important;
    align-content: start !important;
  }

  body.ppob-storefront .ppob-native-wallet-main span,
  body.ppob-storefront .ppob-native-wallet-main small {
    line-height: 1.15 !important;
  }

  html body.ppob-storefront #ppobBalanceValue {
    margin: 0 !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
    white-space: normal !important;
  }

  body.ppob-storefront .ppob-native-point {
    grid-area: badge !important;
    justify-self: end !important;
    align-self: start !important;
    white-space: nowrap !important;
  }

  body.ppob-storefront .ppob-native-actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: end !important;
  }

  body.ppob-storefront .ppob-native-actions a {
    min-width: 0 !important;
    display: grid !important;
    justify-items: center !important;
    gap: 5px !important;
    color: #fff !important;
    text-align: center !important;
  }

  body.ppob-storefront .ppob-native-actions a span {
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
  }

  body.ppob-storefront .ppob-native-actions a small {
    max-width: 92px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  body.ppob-storefront .ppob-native-alert {
    margin-top: 0 !important;
    text-align: left !important;
  }

  body.ppob-storefront .ppob-native-search input {
    text-align: left !important;
  }

  body.ppob-storefront .ppob-native-menu {
    justify-items: center !important;
  }

  body.ppob-storefront .ppob-provider-helper,
  body.ppob-storefront .ppob-category-route-hint {
    width: min(100% - 28px, 380px) !important;
    margin: 16px auto 4px !important;
    text-align: left !important;
    line-height: 1.35 !important;
  }

  body.ppob-storefront .ppob-provider-section-title,
  body.ppob-storefront .ppob-product-grid::before,
  body.ppob-storefront .ppob-catalog-heading h2 {
    text-align: center !important;
    line-height: 1.2 !important;
  }

  body.ppob-storefront .ppob-visible-subfilter {
    width: min(100% - 28px, 380px) !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  body.ppob-storefront .ppob-visible-subfilter button {
    width: 100% !important;
    min-height: 68px !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05) !important;
    text-align: left !important;
  }

  body.ppob-storefront .ppob-recent-transactions {
    margin-top: 34px !important;
  }

  body.ppob-storefront .ppob-native-bottom-nav {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    align-items: center !important;
  }
}

/* v192 wallet header precision: prevent title/action overlap on Android/iOS */
@media (min-width: 0) {
  html body.ppob-storefront .ppob-native-wallet,
  html body.ppob-storefront .ppob-native-app-home .ppob-native-wallet.ppob-native-wallet {
    min-height: 132px !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas:
      "copy badge"
      "actions actions" !important;
    align-items: start !important;
    gap: 10px 12px !important;
    padding: 16px 18px 14px !important;
    overflow: hidden !important;
  }

  html body.ppob-storefront .ppob-native-wallet-main {
    grid-area: copy !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: grid !important;
    gap: 2px !important;
    align-content: start !important;
  }

  html body.ppob-storefront .ppob-native-wallet-main span,
  html body.ppob-storefront .ppob-native-wallet-main small {
    display: block !important;
    max-width: 100% !important;
    color: rgba(255, 255, 255, .94) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.ppob-storefront .ppob-native-wallet-main strong,
  html body.ppob-storefront.is-ppob-guest #ppobBalanceValue,
  html body.ppob-storefront #ppobBalanceValue {
    display: block !important;
    max-width: 100% !important;
    color: #fff !important;
    font-size: clamp(24px, 7vw, 30px) !important;
    font-weight: 900 !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.ppob-storefront .ppob-native-point {
    grid-area: badge !important;
    position: static !important;
    place-self: start end !important;
    width: auto !important;
    min-width: 58px !important;
    max-width: 96px !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.ppob-storefront .ppob-native-actions {
    grid-area: actions !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: end !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.ppob-storefront .ppob-native-actions a {
    min-width: 0 !important;
    min-height: 50px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 4px !important;
    color: #fff !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  html body.ppob-storefront .ppob-native-actions span {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    background: #fff !important;
    color: #6554e8 !important;
    box-shadow: none !important;
  }

  html body.ppob-storefront .ppob-native-actions svg {
    width: 18px !important;
    height: 18px !important;
  }

  html body.ppob-storefront .ppob-native-actions small {
    max-width: 100% !important;
    color: #fff !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 360px) {
  html body.ppob-storefront .ppob-native-wallet,
  html body.ppob-storefront .ppob-native-app-home .ppob-native-wallet.ppob-native-wallet {
    min-height: 128px !important;
    padding: 14px 14px 12px !important;
    gap: 8px 10px !important;
  }

  html body.ppob-storefront .ppob-native-wallet-main strong,
  html body.ppob-storefront.is-ppob-guest #ppobBalanceValue,
  html body.ppob-storefront #ppobBalanceValue {
    font-size: 25px !important;
  }

  html body.ppob-storefront .ppob-native-actions span {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  html body.ppob-storefront .ppob-native-actions small {
    font-size: 9.5px !important;
  }
}

/* v190 PPOB home stabilizer: keep the native app precise and remove old inline checkout bleed. */
@media (min-width: 0) {
  body.ppob-storefront:not(.ppob-product-page) {
    overflow-x: hidden !important;
  }

  body.ppob-storefront:not(.ppob-product-page) #ppobInlineOrder:not(.is-open),
  body.ppob-storefront:not(.ppob-product-page) #checkout[hidden],
  body.ppob-storefront:not(.ppob-product-page) .ppob-inline-checkout-section[hidden] {
    display: none !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-native-app-home,
  body.ppob-storefront:not(.ppob-product-page) .ppob-store-section-first {
    width: min(100%, 390px) !important;
    max-width: 390px !important;
    margin-inline: auto !important;
    overflow: hidden !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-native-top {
    padding: 24px 16px 70px !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-native-wallet {
    min-height: 112px !important;
    padding: 14px 18px !important;
    border-radius: 18px !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-native-wallet-main strong {
    font-size: clamp(25px, 7vw, 31px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.05em !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-native-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-native-actions a {
    min-width: 0 !important;
    gap: 5px !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-native-actions span {
    width: 34px !important;
    height: 34px !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-native-actions small {
    max-width: 72px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-native-sheet {
    width: calc(100% - 24px) !important;
    margin: -40px auto 0 !important;
    padding: 12px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-native-search {
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 0 14px !important;
    border-radius: 15px !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-native-menu {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px 8px !important;
    overflow: visible !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 72px !important;
    padding: 0 !important;
    border-radius: 16px !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button span {
    width: 44px !important;
    height: 44px !important;
    border-radius: 15px !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button small {
    max-width: 68px !important;
    min-height: 24px !important;
    font-size: 9.5px !important;
    line-height: 1.14 !important;
    letter-spacing: -.03em !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-store-section-first {
    padding: 18px 0 92px !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-store-section-first > .container {
    width: 100% !important;
    max-width: 390px !important;
    padding: 0 16px !important;
    overflow: hidden !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-banner-slider {
    width: 100% !important;
    margin: 0 auto 22px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-category-route-hint {
    width: 100% !important;
    margin: 0 0 5px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-visible-subfilter:not([hidden]) {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 12px 0 28px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-visible-subfilter-btn.ppob-provider-chip {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 70px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 11px !important;
    align-items: center !important;
    justify-content: start !important;
    padding: 12px !important;
    border: 0 !important;
    border-radius: 19px !important;
    background: #fff !important;
    box-shadow: 0 10px 22px rgba(23, 26, 43, .045) !important;
    overflow: hidden !important;
    text-align: left !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-visible-subfilter-btn.ppob-provider-chip.is-active {
    background: var(--gt-orange) !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(242, 110, 34, .22) !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-visible-subfilter-media,
  body.ppob-storefront:not(.ppob-product-page) .ppob-visible-subfilter-fallback {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-visible-subfilter-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-visible-subfilter-text {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-visible-subfilter-text strong,
  body.ppob-storefront:not(.ppob-product-page) .ppob-visible-subfilter-text small {
    min-width: 0 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-visible-subfilter-text strong {
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-visible-subfilter-text small {
    font-size: 10px !important;
    opacity: .78 !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-product-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    overflow: hidden !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-product-grid:empty {
    display: none !important;
  }

  body.ppob-storefront:not(.ppob-product-page) .ppob-product-grid .ppob-product-card.ppob-product-card {
    min-width: 0 !important;
    width: 100% !important;
  }

  @media (min-width: 768px) {
    body.ppob-storefront:not(.ppob-product-page) .ppob-native-app-home,
    body.ppob-storefront:not(.ppob-product-page) .ppob-store-section-first,
    body.ppob-storefront:not(.ppob-product-page) .ppob-store-section-first > .container {
      width: min(100%, 430px) !important;
      max-width: 430px !important;
    }

    body.ppob-storefront:not(.ppob-product-page) .ppob-native-bottom-nav {
      width: min(100%, 430px) !important;
      border-radius: 24px 24px 0 0 !important;
      bottom: 0 !important;
    }
  }
}

/* v164 desktop final override - must stay at the very end */
@media (min-width: 1024px) {
  html,
  html body.ppob-storefront {
    width: 100% !important;
    max-width: none !important;
  }

  html {
    display: block !important;
    min-height: 100% !important;
    background: #F5F7FC !important;
  }

  html body.ppob-storefront {
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 28px 32px 118px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body.ppob-storefront .ppob-native-app-home,
  html body.ppob-storefront .ppob-store-section-first,
  html body.ppob-storefront .ppob-inline-order.ppob-order-hero-section,
  html body.ppob-storefront .ppob-inline-checkout-section.ppob-order-hero-section {
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border: 0 !important;
    box-shadow: 0 20px 50px rgba(23, 26, 43, .06) !important;
  }

  html body.ppob-storefront .ppob-native-app-home {
    border-radius: 30px 30px 0 0 !important;
    overflow: hidden !important;
  }

  html body.ppob-storefront .ppob-native-top {
    padding: 30px 34px 76px !important;
  }

  html body.ppob-storefront .ppob-app-header strong {
    font-size: 28px !important;
  }

  html body.ppob-storefront.ppob-inline-checkout-page .ppob-native-wallet,
  html body.ppob-storefront.ppob-inline-checkout-page .ppob-native-app-home .ppob-native-wallet.ppob-native-wallet {
    max-width: 620px !important;
    min-height: 164px !important;
  }

  html body.ppob-storefront .ppob-native-sheet {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr) !important;
    grid-template-areas:
      "alert search"
      "menu menu" !important;
    gap: 16px !important;
    margin: -44px 34px 0 !important;
    padding: 22px !important;
    border-radius: 28px !important;
  }

  html body.ppob-storefront .ppob-native-alert {
    grid-area: alert !important;
    margin: 0 !important;
  }

  html body.ppob-storefront .ppob-native-search {
    grid-area: search !important;
    margin: 0 !important;
    align-self: stretch !important;
  }

  html body.ppob-storefront .ppob-native-menu {
    grid-area: menu !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  html body.ppob-storefront .ppob-store-section-first {
    padding: 22px 0 34px !important;
    border-radius: 0 0 30px 30px !important;
  }

  html body.ppob-storefront .ppob-store-section-first > .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 34px !important;
  }

  html body.ppob-storefront .ppob-banner-slider {
    margin: 0 0 24px !important;
  }

  html body.ppob-storefront .ppob-banner-photo {
    aspect-ratio: 16 / 4.9 !important;
    object-fit: contain !important;
  }

  html body.ppob-storefront .ppob-product-grid {
    width: 100% !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding-top: 48px !important;
  }

  html body.ppob-storefront .ppob-product-grid .ppob-product-card.ppob-product-card,
  html body.ppob-storefront .ppob-product-grid .ppob-product-card {
    min-height: 116px !important;
    padding: 16px !important;
  }

  html body.ppob-storefront .ppob-product-grid .ppob-product-card h3 {
    font-size: 14px !important;
    line-height: 1.32 !important;
  }

  html body.ppob-storefront .ppob-product-grid .ppob-product-card p {
    font-size: 13px !important;
  }

  html body.ppob-storefront .ppob-product-footer,
  html body.ppob-storefront .ppob-recent-transactions {
    width: 100% !important;
  }

  html body.ppob-storefront .ppob-native-bottom-nav {
    width: min(100% - 64px, 1180px) !important;
    max-width: 1180px !important;
    left: 50% !important;
    right: auto !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;
    border: 1px solid #E7EAF2 !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 45px rgba(23, 26, 43, .10) !important;
  }
}

@media (min-width: 1280px) {
  html body.ppob-storefront .ppob-product-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

/* v163 desktop layout: web-app wide, mobile remains native-app style */
@media (min-width: 1024px) {
  html {
    display: block !important;
    min-height: 100% !important;
    background: #F5F7FC !important;
  }

  body.ppob-storefront {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 28px 32px 118px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.ppob-storefront .ppob-native-app-home,
  body.ppob-storefront .ppob-store-section-first,
  body.ppob-storefront .ppob-inline-order.ppob-order-hero-section,
  body.ppob-storefront .ppob-inline-checkout-section.ppob-order-hero-section {
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border: 0 !important;
    box-shadow: 0 20px 50px rgba(23, 26, 43, .06) !important;
  }

  body.ppob-storefront .ppob-native-app-home {
    border-radius: 30px 30px 0 0 !important;
    overflow: hidden !important;
  }

  body.ppob-storefront .ppob-native-top {
    padding: 30px 34px 76px !important;
  }

  body.ppob-storefront .ppob-app-header strong {
    font-size: 28px !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-wallet,
  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-app-home .ppob-native-wallet.ppob-native-wallet {
    max-width: 620px !important;
    min-height: 164px !important;
  }

  body.ppob-storefront .ppob-native-sheet {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr) !important;
    grid-template-areas:
      "alert search"
      "menu menu" !important;
    gap: 16px !important;
    margin: -44px 34px 0 !important;
    padding: 22px !important;
    border-radius: 28px !important;
  }

  body.ppob-storefront .ppob-native-alert {
    grid-area: alert !important;
    margin: 0 !important;
  }

  body.ppob-storefront .ppob-native-search {
    grid-area: search !important;
    margin: 0 !important;
    align-self: stretch !important;
  }

  body.ppob-storefront .ppob-native-menu {
    grid-area: menu !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  body.ppob-storefront .ppob-store-section-first {
    padding: 22px 0 34px !important;
    border-radius: 0 0 30px 30px !important;
  }

  body.ppob-storefront .ppob-store-section-first > .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 34px !important;
  }

  body.ppob-storefront .ppob-banner-slider {
    margin: 0 0 24px !important;
  }

  body.ppob-storefront .ppob-banner-photo {
    aspect-ratio: 16 / 4.9 !important;
    object-fit: contain !important;
  }

  body.ppob-storefront .ppob-product-grid {
    width: 100% !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding-top: 48px !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card.ppob-product-card,
  body.ppob-storefront .ppob-product-grid .ppob-product-card {
    min-height: 116px !important;
    padding: 16px !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card h3 {
    font-size: 14px !important;
    line-height: 1.32 !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card p {
    font-size: 13px !important;
  }

  body.ppob-storefront .ppob-product-footer,
  body.ppob-storefront .ppob-recent-transactions {
    width: 100% !important;
  }

  body.ppob-storefront .ppob-native-bottom-nav {
    width: min(100% - 64px, 1180px) !important;
    max-width: 1180px !important;
    left: 50% !important;
    right: auto !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;
    border: 1px solid #E7EAF2 !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 45px rgba(23, 26, 43, .10) !important;
  }
}

@media (min-width: 1280px) {
  body.ppob-storefront .ppob-product-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

body.ppob-storefront :is(.ppob-app-home, .ppob-app-bottom-nav, [hidden]) {
  display: none !important;
}

@media (min-width: 0) {
  html {
    background: #eef3f8;
    -webkit-text-size-adjust: 100%;
  }

  body.ppob-storefront {
    --gt-orange: #f26e22;
    --gt-orange-2: #ff8744;
    --gt-orange-soft: #fff3ea;
    --gt-ink: #172033;
    --gt-muted: #667085;
    --gt-line: #e3ebf5;
    --gt-bg: #eef3f8;
    width: 100%;
    min-width: 320px;
    margin: 0;
    padding: 0 0 calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden;
    background: var(--gt-bg) !important;
    color: var(--gt-ink);
  }

  body.ppob-storefront::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(circle at top left, rgba(242, 110, 34, .10), transparent 340px),
      linear-gradient(180deg, #f8fbff 0%, #eef3f8 100%);
  }

  body.ppob-storefront :is(.navbar, .footer, .floating-wa, .back-to-top, .ppob-app-home, .ppob-app-bottom-nav) {
    display: none !important;
  }

  body.ppob-storefront .ppob-native-app-home,
  body.ppob-storefront .ppob-native-bottom-nav {
    display: block !important;
  }

  body.ppob-storefront .ppob-native-app-home {
    width: min(100%, 430px);
    margin: 0 auto;
    background: #fff;
  }

  @media (min-width: 821px) {
    html {
      min-height: 100%;
    }

    body.ppob-storefront {
      padding-top: 22px !important;
      padding-bottom: 110px !important;
    }

    body.ppob-storefront .ppob-native-app-home,
    body.ppob-storefront .ppob-store-section-first,
    body:is(.ppob-order-page, .checkout-page, .checkout-status-page) .ppob-order-hero-section {
      max-width: 430px !important;
      border-left: 1px solid rgba(211, 224, 239, .85);
      border-right: 1px solid rgba(211, 224, 239, .85);
      box-shadow: 0 26px 70px rgba(17, 24, 39, .14);
    }

    body.ppob-storefront .ppob-native-app-home {
      border-top-left-radius: 26px;
      border-top-right-radius: 26px;
      overflow: hidden;
    }

    body.ppob-storefront .ppob-store-section-first,
    body:is(.ppob-order-page, .checkout-page, .checkout-status-page) .ppob-order-hero-section {
      border-bottom-left-radius: 26px;
      border-bottom-right-radius: 26px;
      overflow: hidden;
    }

    body.ppob-storefront .ppob-native-bottom-nav {
      bottom: 22px;
      border: 1px solid rgba(211, 224, 239, .9);
      border-radius: 24px;
    }
  }

  body.ppob-storefront .ppob-native-top {
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 26px;
    background:
      radial-gradient(circle at 88% 40%, rgba(242, 110, 34, .16) 0 42px, transparent 43px),
      linear-gradient(180deg, #ffffff 0%, #fff6ef 100%);
  }

  body.ppob-storefront .ppob-native-status,
  body.ppob-storefront .ppob-native-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  body.ppob-storefront .ppob-native-status {
    min-height: 22px;
    color: var(--gt-orange);
    font-size: 12px;
    font-weight: 800;
  }

  body.ppob-storefront .ppob-native-brand {
    margin: 12px 0 14px;
  }

  body.ppob-storefront .ppob-native-brand strong {
    color: var(--gt-ink);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.02em;
  }

  body.ppob-storefront .ppob-native-brand a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid rgba(242, 110, 34, .24);
    border-radius: 999px;
    background: #fff;
    color: var(--gt-orange);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(242, 110, 34, .12);
  }

  body.ppob-storefront .ppob-native-brand a::before {
    content: "+";
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    margin-right: 6px;
    border-radius: 999px;
    background: var(--gt-orange);
    color: #fff;
    font-size: 13px;
    line-height: 1;
  }

  body.ppob-storefront .ppob-native-wallet {
    position: relative;
    min-height: 150px;
    padding: 14px;
    overflow: hidden;
    border-radius: 18px;
    background:
      radial-gradient(circle at 84% 20%, rgba(255, 255, 255, .24) 0 29px, transparent 30px),
      radial-gradient(circle at 52% 0%, rgba(255, 255, 255, .16) 0 70px, transparent 71px),
      linear-gradient(135deg, var(--gt-orange-2), var(--gt-orange));
    color: #fff;
    box-shadow: 0 18px 36px rgba(242, 110, 34, .24);
  }

  body.ppob-storefront .ppob-native-wallet-main {
    display: grid;
    gap: 3px;
  }

  body.ppob-storefront .ppob-native-wallet-main span,
  body.ppob-storefront .ppob-native-wallet-main small {
    color: #fff;
    font-size: 12px;
    font-weight: 900;
  }

  body.ppob-storefront .ppob-native-wallet-main strong {
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.04em;
  }

  body.ppob-storefront .ppob-native-point {
    position: absolute;
    right: 16px;
    top: 62px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    background: #fff;
    color: var(--gt-orange);
    font-size: 11px;
    font-weight: 900;
  }

  body.ppob-storefront .ppob-native-actions {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  body.ppob-storefront .ppob-native-actions a {
    display: grid;
    justify-items: center;
    gap: 4px;
    color: #fff;
    text-decoration: none;
  }

  body.ppob-storefront .ppob-native-actions span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #fff;
    color: var(--gt-orange);
    font-size: 15px;
    font-weight: 900;
  }

  body.ppob-storefront .ppob-native-actions small {
    color: #fff;
    font-size: 10px;
    font-weight: 900;
  }

  body.ppob-storefront .ppob-native-sheet {
    position: relative;
    margin-top: -14px;
    padding: 20px 16px 18px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    background: #fff;
    box-shadow: 0 -10px 24px rgba(17, 24, 39, .04);
  }

  body.ppob-storefront .ppob-native-alert {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--gt-ink);
    font-size: 13px;
    font-weight: 900;
    text-align: center;
  }

  body.ppob-storefront .ppob-native-alert span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--gt-orange-soft);
    color: var(--gt-orange);
    font-size: 18px;
    font-weight: 900;
  }

  body.ppob-storefront .ppob-native-menu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 10px;
  }

  body.ppob-storefront .ppob-native-menu-item,
  body.ppob-storefront .ppob-native-menu-item:is(:hover, :focus, .active, .is-active) {
    min-width: 0 !important;
    min-height: 76px !important;
    display: grid !important;
    place-items: center !important;
    align-content: start !important;
    gap: 7px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.ppob-storefront .ppob-native-menu-item span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(242, 110, 34, .18);
    border-radius: 999px;
    background: var(--gt-orange-soft);
    color: var(--gt-orange);
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(242, 110, 34, .10);
  }

  body.ppob-storefront .ppob-native-menu-item small {
    max-width: 74px;
    color: var(--gt-ink);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.22;
    text-align: center;
  }

  body.ppob-storefront .ppob-store-section-first {
    width: min(100%, 430px);
    margin: 0 auto;
    padding: 0 0 24px !important;
    background: #fff !important;
  }

  body.ppob-storefront .ppob-store-section-first > .container {
    width: 100% !important;
    max-width: 430px !important;
    padding: 0 16px !important;
  }

  body.ppob-inline-checkout-page .ppob-inline-order,
  body.ppob-inline-checkout-page .ppob-inline-checkout-section {
    width: min(100%, 430px) !important;
    margin: 0 auto !important;
    padding: 14px 0 20px !important;
    background: #fff !important;
  }

  body.ppob-inline-checkout-page .ppob-inline-order > .container,
  body.ppob-inline-checkout-page .ppob-inline-checkout-section > .container {
    width: 100% !important;
    max-width: 430px !important;
    padding: 0 16px !important;
  }

  body.ppob-inline-checkout-page .ppob-inline-order.ppob-order-hero-section::before,
  body.ppob-inline-checkout-page .ppob-inline-checkout-section.ppob-order-hero-section::before {
    display: none !important;
    content: none !important;
  }

  body.ppob-inline-checkout-page .ppob-inline-order-card,
  body.ppob-inline-checkout-page .ppob-inline-checkout-section .ppob-panel {
    padding: 16px !important;
    border: 1px solid var(--gt-line) !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(17, 24, 39, .06) !important;
  }

  body.ppob-inline-checkout-page .ppob-inline-selected-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid var(--gt-line);
    border-radius: 18px;
    background: #f8fafc;
  }

  body.ppob-inline-checkout-page .ppob-inline-selected-product small {
    display: block;
    color: var(--gt-muted);
    font-size: 11px;
    font-weight: 800;
  }

  body.ppob-inline-checkout-page .ppob-inline-selected-product strong {
    display: block;
    color: var(--gt-orange);
    font-size: 17px;
    font-weight: 900;
  }

  body.ppob-inline-checkout-page .ppob-inline-contact-form {
    display: grid !important;
    gap: 12px !important;
  }

  body.ppob-inline-checkout-page .ppob-inline-checkout-section[hidden] {
    display: none !important;
  }

  body.ppob-inline-checkout-page .ppob-inline-checkout-section.is-active {
    display: block !important;
  }

  body.ppob-storefront :is(.ppob-selection-panel, .ppob-featured-products, .ppob-catalog-heading, .ppob-catalog-kicker, .ppob-catalog-tabs, .ppob-visible-subfilter, .ppob-category-route-hint, .ppob-store-benefits) {
    display: none !important;
  }

  body.ppob-storefront .ppob-banner-slider {
    margin: 0 0 16px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  body.ppob-storefront .ppob-banner-slider::before,
  body.ppob-storefront .ppob-banner-slider::after {
    content: "";
    display: block;
    height: 8px;
    margin: 0 -16px 10px;
    background: #f4f4f4;
  }

  body.ppob-storefront .ppob-banner-slider::after {
    margin: 10px -16px 0;
  }

  body.ppob-storefront .ppob-banner-photo {
    aspect-ratio: 16 / 6.2 !important;
    width: 100% !important;
    border-radius: 16px !important;
    object-fit: contain !important;
    background: #fff !important;
  }

  body.ppob-storefront .ppob-product-grid {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 34px 0 0 !important;
  }

  body.ppob-storefront .ppob-product-grid::before {
    content: "Rekomendasi Pilihan";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--gt-ink);
    font-size: 15px;
    font-weight: 900;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card {
    width: 100% !important;
    min-height: 76px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 28px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 12px !important;
    border: 1px solid var(--gt-line) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(17, 24, 39, .05) !important;
    text-align: left !important;
    transform: none !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card::after {
    content: ">";
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--gt-orange-soft);
    color: var(--gt-orange);
    font-size: 18px;
    font-weight: 900;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
    padding: 0 !important;
    text-align: left !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card h3 {
    margin: 0 !important;
    color: var(--gt-ink) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card p {
    margin: 0 !important;
    color: var(--gt-orange) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  body.ppob-storefront .ppob-product-grid :is(.ppob-product-card-visual, .ppob-product-fallback, .ppob-product-thumb, .ppob-product-action) {
    display: none !important;
  }

  body:is(.ppob-order-page, .checkout-page, .checkout-status-page) {
    background: var(--gt-bg) !important;
  }

  body:is(.ppob-order-page, .checkout-page, .checkout-status-page) :is(.navbar, .footer, .ppob-app-bottom-nav) {
    display: none !important;
  }

  body:is(.ppob-order-page, .checkout-page, .checkout-status-page) .ppob-order-hero-section {
    width: min(100%, 430px);
    min-height: calc(100dvh - 84px);
    margin: 0 auto;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 0 24px !important;
    background: var(--gt-bg) !important;
  }

  body:is(.ppob-order-page, .checkout-page, .checkout-status-page) .ppob-order-hero-section::before {
    display: block;
    margin: 0 16px 12px;
    color: var(--gt-ink);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.04em;
  }

  body.ppob-order-page .ppob-order-hero-section::before { content: "Pesanan PPOB"; }
  body.checkout-page .ppob-order-hero-section::before { content: "Pembayaran"; }
  body.checkout-status-page .ppob-order-hero-section::before { content: "Status Transaksi"; }

  body:is(.ppob-order-page, .checkout-page, .checkout-status-page) .ppob-order-hero-section > .container {
    width: 100% !important;
    max-width: 430px !important;
    padding: 0 12px !important;
  }

  body:is(.ppob-order-page, .checkout-page, .checkout-status-page) .ppob-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body:is(.ppob-order-page, .checkout-page, .checkout-status-page) .ppob-summary {
    display: none !important;
  }

  body.ppob-inline-checkout-page .ppob-inline-checkout-section .ppob-summary {
    display: block !important;
  }

  /* Final layout stabilizer: prevent desktop phone-frame overlap and old slider bleed. */
  body.ppob-storefront.ppob-inline-checkout-page {
    display: block !important;
    min-height: 100dvh !important;
    height: auto !important;
    padding: 0 0 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page :is(.ppob-native-app-home, .ppob-store-section-first, .ppob-inline-order, .ppob-inline-checkout-section) {
    position: relative !important;
    z-index: auto !important;
    width: 100% !important;
    max-width: 390px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-top {
    padding-bottom: 64px !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-wallet,
  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-app-home .ppob-native-wallet.ppob-native-wallet {
    min-height: 132px !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-actions a {
    min-width: 0 !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-store-section-first {
    padding-top: 14px !important;
    padding-bottom: 10px !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-banner-slider {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 18px !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background: #fff !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-banner-track {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-banner-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background: #fff !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-banner-photo {
    width: 100% !important;
    height: auto !important;
    max-height: 154px !important;
    aspect-ratio: 16 / 7 !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    border-radius: 20px !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-banner-copy,
  body.ppob-storefront.ppob-inline-checkout-page .ppob-banner-content,
  body.ppob-storefront.ppob-inline-checkout-page .ppob-banner-overlay {
    display: none !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-banner-dots {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 0 2px !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-product-grid,
  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-contact-form,
  body.ppob-storefront.ppob-inline-checkout-page .ppob-form {
    min-width: 0 !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-order.ppob-order-hero-section,
  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-checkout-section.ppob-order-hero-section {
    max-width: 390px !important;
    padding: 10px 0 18px !important;
    background: var(--gt-bg) !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-order > .container,
  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-checkout-section > .container {
    width: 100% !important;
    max-width: 390px !important;
    padding: 0 16px !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-order-card,
  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-checkout-section .ppob-panel {
    overflow: hidden !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .checkout-action-row,
  body.ppob-storefront.ppob-inline-checkout-page .ppob-precheckout-footer {
    position: static !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-bottom-nav {
    position: sticky !important;
    left: auto !important;
    bottom: 0 !important;
    transform: none !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 390px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  @media (min-width: 821px) {
    body.ppob-storefront.ppob-inline-checkout-page {
      height: auto !important;
      min-height: 0 !important;
      margin: 48px auto !important;
      overflow-y: visible !important;
      border-radius: 44px !important;
      box-shadow: 0 40px 100px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .1) !important;
    }

    body.ppob-storefront.ppob-inline-checkout-page .ppob-native-app-home {
      border-top-left-radius: 44px !important;
      border-top-right-radius: 44px !important;
      overflow: hidden !important;
    }

    body.ppob-storefront.ppob-inline-checkout-page .ppob-native-bottom-nav {
      border-bottom-left-radius: 44px !important;
      border-bottom-right-radius: 44px !important;
    }
  }

  /* compact app banner; stop old hero/banner layers from overlapping content. */
  body.ppob-storefront.ppob-inline-checkout-page .ppob-store-section-first .ppob-banner-slider {
    display: block !important;
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #ffffff, #f8faff) !important;
    box-shadow: 0 8px 26px rgba(15, 23, 42, .06) !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-store-section-first .ppob-banner-track {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    transform: none !important;
    transition: none !important;
    overflow: hidden !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-store-section-first .ppob-banner-slide {
    position: relative !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    display: block !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 20px !important;
    background: #fff !important;
    transform: none !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-store-section-first .ppob-banner-stage {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 126px !important;
    min-height: 126px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-store-section-first .ppob-banner-photo {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: 126px !important;
    max-height: 126px !important;
    min-height: 126px !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 20px !important;
    transform: none !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-store-section-first :is(
    .ppob-banner-copy,
    .ppob-banner-overline,
    .ppob-banner-offer,
    .ppob-banner-visual,
    .ppob-banner-side-copy,
    .ppob-banner-side-card,
    .ppob-banner-cta,
    .ppob-banner-visual-core
  ) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-store-section-first .ppob-banner-dots {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 8px !important;
    z-index: 5 !important;
    width: 100% !important;
    height: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-store-section-first .ppob-banner-dots button {
    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(91, 79, 207, .22) !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-store-section-first .ppob-banner-dots button:is(.active, .is-active) {
    width: 18px !important;
    background: var(--gt-accent) !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-product-grid {
    position: relative !important;
    z-index: 1 !important;
    padding-top: 34px !important;
    margin-top: 0 !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-order {
    clear: both !important;
  }

  body.ppob-storefront:is(.ppob-order-page, .checkout-page, .checkout-status-page):not(.ppob-inline-checkout-page) .ppob-order-hero-section {
    width: 100% !important;
    max-width: 390px !important;
    min-height: calc(100dvh - 78px) !important;
    padding: 0 0 92px !important;
    background: var(--gt-bg) !important;
  }

  body.ppob-storefront:is(.ppob-order-page, .checkout-page, .checkout-status-page):not(.ppob-inline-checkout-page) .ppob-order-hero-section::before {
    display: block !important;
    margin: 0 0 16px !important;
    padding: 22px 20px 26px !important;
    border-radius: 0 0 26px 26px !important;
    background:
      radial-gradient(circle at 86% 8%, rgba(255, 107, 53, .24), transparent 72px),
      linear-gradient(135deg, var(--gt-primary-dark), var(--gt-primary) 68%, #19B6A4) !important;
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
  }

  body.ppob-storefront:is(.ppob-order-page, .checkout-page, .checkout-status-page):not(.ppob-inline-checkout-page) .ppob-order-hero-section > .container {
    width: 100% !important;
    max-width: 390px !important;
    padding: 0 16px !important;
  }

  body.ppob-storefront:is(.ppob-order-page, .checkout-page, .checkout-status-page):not(.ppob-inline-checkout-page) .ppob-panel,
  body.ppob-storefront:is(.ppob-order-page, .checkout-page, .checkout-status-page):not(.ppob-inline-checkout-page) .summary-card,
  body.ppob-storefront:is(.ppob-order-page, .checkout-page, .checkout-status-page):not(.ppob-inline-checkout-page) :is(.checkout-form-section, .checkout-status-lookup, .checkout-status-card, .checkout-status-detail-card, .checkout-payment-focus, .checkout-qris-panel, .checkout-payment-confirmation, .ppob-extra-fields, .checkout-invoice-followup) {
    border: 0 !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06) !important;
  }

  body:is(.ppob-order-page, .checkout-page, .checkout-status-page) .ppob-panel {
    padding: 16px !important;
    border: 1px solid var(--gt-line) !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(17, 24, 39, .06) !important;
  }

  body:is(.ppob-order-page, .checkout-page, .checkout-status-page) :is(.ppob-precheckout-card, .checkout-form-section, .checkout-status-lookup, .checkout-status-card, .checkout-status-detail-card, .checkout-payment-focus, .checkout-qris-panel, .checkout-payment-confirmation, .checkout-submit-safety, .ppob-extra-fields, .checkout-invoice-followup) {
    border: 1px solid var(--gt-line) !important;
    border-radius: 18px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
  }

  body:is(.ppob-order-page, .checkout-page) :is(.ppob-precheckout-footer, .checkout-action-row) {
    position: sticky !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 60 !important;
    margin: 14px -16px -16px !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--gt-line) !important;
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  }

  body.ppob-order-page .ppob-precheckout-footer :is(.ppob-precheckout-divider, .ppob-extra-fields, .ppob-continue-meta),
  body.checkout-page .checkout-submit-safety {
    display: none !important;
  }

  body.ppob-storefront .btn.btn-primary {
    min-height: 52px !important;
    border-radius: 999px !important;
    background: var(--gt-orange) !important;
    border-color: var(--gt-orange) !important;
    color: #fff !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 24px rgba(242, 110, 34, .22) !important;
  }

  body.ppob-storefront .btn.btn-outline {
    min-height: 48px !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--gt-ink) !important;
    border-color: var(--gt-line) !important;
    font-weight: 900 !important;
  }

  body.ppob-storefront .ppob-native-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 1000;
    width: min(100%, 430px);
    min-height: calc(72px + env(safe-area-inset-bottom, 0px));
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: 4px;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    border-top: 1px solid var(--gt-line);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -10px 30px rgba(17, 24, 39, .08);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
  }

  body.ppob-storefront .ppob-native-bottom-nav a {
    display: grid;
    place-items: center;
    gap: 3px;
    color: #7a8496;
    text-decoration: none;
  }

  body.ppob-storefront .ppob-native-bottom-nav a span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: inherit;
    font-size: 12px;
    font-weight: 900;
  }

  body.ppob-storefront .ppob-native-bottom-nav a small {
    color: inherit;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1;
  }

  body.ppob-storefront .ppob-native-bottom-nav a.is-active {
    color: var(--gt-orange);
  }

  body.ppob-storefront .ppob-native-bottom-nav .is-main {
    margin-top: -30px;
  }

  body.ppob-storefront .ppob-native-bottom-nav .is-main span {
    width: 58px;
    height: 58px;
    border: 1px solid rgba(242, 110, 34, .32);
    border-radius: 999px;
    background: #fff;
    color: var(--gt-orange);
    font-size: 16px;
    box-shadow: 0 12px 24px rgba(242, 110, 34, .20);
  }

  body.ppob-storefront .ppob-native-app-home.ppob-native-app-home {
    display: block !important;
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  body.ppob-storefront .ppob-native-app-home .ppob-native-wallet.ppob-native-wallet {
    display: block !important;
    width: auto !important;
    min-height: 150px !important;
    padding: 14px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 84% 20%, rgba(255, 255, 255, .24) 0 29px, transparent 30px),
      radial-gradient(circle at 52% 0%, rgba(255, 255, 255, .16) 0 70px, transparent 71px),
      linear-gradient(135deg, #ff8744, #f26e22) !important;
    color: #fff !important;
    box-shadow: 0 18px 36px rgba(242, 110, 34, .24) !important;
  }

  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button,
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button:is(.is-active, .active, :hover, :focus) {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 76px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    align-content: start !important;
    gap: 7px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--gt-ink) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button span,
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button:is(.is-active, .active, :hover, :focus) span {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    border: 1px solid rgba(242, 110, 34, .18) !important;
    border-radius: 999px !important;
    background: #fff3ea !important;
    color: #f26e22 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 18px rgba(242, 110, 34, .10) !important;
  }

  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button small,
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button:is(.is-active, .active, :hover, :focus) small {
    max-width: 74px !important;
    margin: 0 !important;
    color: var(--gt-ink) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    text-align: center !important;
  }

  body.ppob-storefront :is(.ppob-selection-panel, .ppob-featured-products, .ppob-catalog-heading, .ppob-catalog-kicker, .ppob-catalog-tabs, .ppob-visible-subfilter, .ppob-category-route-hint, .ppob-store-benefits) {
    display: none !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card.ppob-product-card {
    width: 100% !important;
    min-height: 76px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 28px !important;
    align-items: center !important;
    padding: 13px 12px !important;
    border: 1px solid var(--gt-line) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(17, 24, 39, .05) !important;
    text-align: left !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card.ppob-product-card :is(.ppob-product-card-visual, .ppob-product-fallback, .ppob-product-thumb, .ppob-product-action) {
    display: none !important;
  }

  body.ppob-storefront :is(.checkout-method-icon, .checkout-method-icon-focus) {
    flex: 0 0 auto !important;
    overflow: hidden !important;
    border-radius: 14px !important;
  }

  body.ppob-storefront :is(.checkout-method-icon, .checkout-method-icon-focus) img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  /*
   * Reference-inspired PPOB app shell.
   * Matches the supplied app reference: centered phone frame on desktop,
   * status bar, dark gradient header, soft cards, and clean app navigation.
   */
  html {
    background: #ffffff !important;
  }

  body.ppob-storefront {
    --gt-primary: #5B4FCF;
    --gt-primary-light: #7B6FE8;
    --gt-primary-dark: #3D31B0;
    --gt-accent: #FF6B35;
    --gt-accent-2: #00C896;
    --gt-bg: #F0F2F8;
    --gt-card: #FFFFFF;
    --gt-ink: #1A1A2E;
    --gt-muted: #8B8FA8;
    --gt-line: #E8EAF2;
    --gt-orange: #FF6B35;
    --gt-orange-2: #FF9F43;
    --gt-orange-soft: rgba(255, 107, 53, .12);
    width: min(100%, 390px) !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    background: var(--gt-bg) !important;
    font-family: 'Nunito', 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: var(--gt-ink) !important;
    overflow-x: hidden !important;
  }

  body.ppob-storefront::before {
    background: #ffffff !important;
  }

  body.ppob-storefront :is(.ppob-native-app-home, .ppob-store-section-first, .ppob-inline-order, .ppob-inline-checkout-section) {
    width: 100% !important;
    max-width: 390px !important;
    box-shadow: none !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  body.ppob-storefront .ppob-native-app-home {
    background: var(--gt-bg) !important;
  }

  body.ppob-storefront .ppob-native-top {
    padding: 12px 18px 64px !important;
    background:
      radial-gradient(circle at 78% 26%, rgba(255, 255, 255, .15) 0 44px, transparent 45px),
      radial-gradient(circle at 90% 5%, rgba(255, 107, 53, .25) 0 58px, transparent 59px),
      linear-gradient(135deg, var(--gt-primary-dark), var(--gt-primary) 68%, #19B6A4) !important;
    color: #fff !important;
  }

  body.ppob-storefront .ppob-native-status {
    min-height: 22px !important;
    color: rgba(255, 255, 255, .92) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  body.ppob-storefront .ppob-native-brand {
    margin: 14px 0 16px !important;
  }

  body.ppob-storefront .ppob-native-brand strong {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
  }

  body.ppob-storefront .ppob-native-brand a {
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--gt-accent) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(255, 107, 53, .35) !important;
  }

  body.ppob-storefront .ppob-native-brand a::before {
    background: rgba(255, 255, 255, .22) !important;
    color: #fff !important;
  }

  body.ppob-storefront .ppob-native-wallet,
  body.ppob-storefront .ppob-native-app-home .ppob-native-wallet.ppob-native-wallet {
    min-height: 118px !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  body.ppob-storefront .ppob-native-wallet-main span,
  body.ppob-storefront .ppob-native-wallet-main small {
    color: rgba(255, 255, 255, .76) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
  }

  body.ppob-storefront .ppob-native-wallet-main strong {
    color: #fff !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
  }

  body.ppob-storefront .ppob-native-point {
    top: 18px !important;
    right: 18px !important;
    background: rgba(255, 255, 255, .18) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
  }

  body.ppob-storefront .ppob-native-actions {
    bottom: 12px !important;
    gap: 10px !important;
  }

  body.ppob-storefront .ppob-native-actions span {
    width: 30px !important;
    height: 30px !important;
    background: rgba(255, 255, 255, .92) !important;
    color: var(--gt-primary) !important;
    box-shadow: none !important;
  }

  body.ppob-storefront .ppob-native-sheet {
    margin: -40px 16px 0 !important;
    padding: 18px 12px 16px !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 8px 26px rgba(15, 23, 42, .06) !important;
  }

  body.ppob-storefront .ppob-native-alert {
    justify-content: flex-start !important;
    margin: 0 2px 16px !important;
    color: var(--gt-ink) !important;
    font-size: 12px !important;
  }

  body.ppob-storefront .ppob-native-alert span {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    background: rgba(91, 79, 207, .10) !important;
    color: var(--gt-primary) !important;
  }

  body.ppob-storefront .ppob-native-menu {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px 12px !important;
    justify-items: center !important;
  }

  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button span,
  body.ppob-storefront .ppob-native-menu-item span {
    width: 52px !important;
    height: 52px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--gt-primary-light), var(--gt-primary)) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item:nth-child(2) span { background: linear-gradient(135deg, #4facfe, #00f2fe) !important; }
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item:nth-child(3) span { background: linear-gradient(135deg, #43e97b, #38f9d7) !important; }
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item:nth-child(4) span { background: linear-gradient(135deg, #fa709a, #fee140) !important; }
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item:nth-child(5) span { background: linear-gradient(135deg, #2457D6, #08A88A) !important; }
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item:nth-child(6) span { background: linear-gradient(135deg, #FF8A3D, #F59E0B) !important; }
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item:nth-child(7) span { background: linear-gradient(135deg, #7C3AED, #DB2777) !important; }

  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button small,
  body.ppob-storefront .ppob-native-menu-item small {
    color: var(--gt-ink) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  body.ppob-storefront .ppob-store-section-first {
    padding: 16px 0 18px !important;
    background: var(--gt-bg) !important;
  }

  body.ppob-storefront .ppob-store-section-first > .container {
    padding: 0 16px !important;
  }

  body.ppob-storefront .ppob-banner-slider {
    margin: 0 0 16px !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 8px 26px rgba(15, 23, 42, .06) !important;
  }

  body.ppob-storefront .ppob-banner-slider::before,
  body.ppob-storefront .ppob-banner-slider::after {
    display: none !important;
  }

  body.ppob-storefront .ppob-banner-photo {
    aspect-ratio: 16 / 7 !important;
    border-radius: 20px !important;
    object-fit: contain !important;
    background: #fff !important;
  }

  body.ppob-storefront .ppob-product-grid {
    gap: 10px !important;
    padding-top: 34px !important;
  }

  body.ppob-storefront .ppob-product-grid::before {
    content: "Best Produk" !important;
    font-size: 16px !important;
    font-weight: 900 !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card.ppob-product-card,
  body.ppob-storefront .ppob-product-grid .ppob-product-card {
    min-height: 82px !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04) !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card h3 {
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card p {
    color: var(--gt-primary) !important;
    font-size: 13px !important;
  }

  body.ppob-inline-checkout-page .ppob-inline-order,
  body.ppob-inline-checkout-page .ppob-inline-checkout-section {
    background: var(--gt-bg) !important;
    padding: 8px 0 18px !important;
  }

  body.ppob-inline-checkout-page .ppob-inline-order-card,
  body.ppob-inline-checkout-page .ppob-inline-checkout-section .ppob-panel,
  body.ppob-inline-checkout-page .ppob-inline-selected-product,
  body.ppob-inline-checkout-page .summary-card,
  body.ppob-inline-checkout-page :is(.checkout-form-section, .checkout-status-card, .checkout-payment-focus, .checkout-qris-panel, .checkout-payment-confirmation, .ppob-extra-fields) {
    border: 0 !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06) !important;
  }

  body.ppob-storefront .btn.btn-primary,
  body.ppob-storefront .confirm-btn {
    min-height: 48px !important;
    border-radius: 16px !important;
    background: var(--gt-accent) !important;
    border-color: var(--gt-accent) !important;
    box-shadow: 0 4px 15px rgba(255, 107, 53, .35) !important;
  }

  body.ppob-storefront .btn.btn-outline {
    min-height: 44px !important;
    border: 1px solid var(--gt-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  body.ppob-storefront :is(.input, input, select, textarea) {
    border-radius: 14px !important;
    background: #F8FAFC !important;
    border-color: #CCD4E2 !important;
    font-family: inherit !important;
  }

  body.ppob-storefront .ppob-native-bottom-nav {
    width: min(100%, 390px) !important;
    min-height: 78px !important;
    padding: 9px 18px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-top: 1px solid var(--gt-line) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .06) !important;
  }

  body.ppob-storefront .ppob-native-bottom-nav a span {
    color: #111827 !important;
    font-size: 12px !important;
  }

  body.ppob-storefront .ppob-native-bottom-nav a small {
    color: #8B8FA8 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
  }

  body.ppob-storefront .ppob-native-bottom-nav a.is-active,
  body.ppob-storefront .ppob-native-bottom-nav a.is-active small {
    color: var(--gt-primary) !important;
  }

  body.ppob-storefront .ppob-native-bottom-nav .is-main span {
    width: 56px !important;
    height: 56px !important;
    background: var(--gt-primary) !important;
    color: #fff !important;
    border: 4px solid var(--gt-bg) !important;
    box-shadow: 0 10px 24px rgba(91, 79, 207, .28) !important;
  }

  @media (min-width: 821px) {
    html {
      min-height: 100%;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: #fff !important;
    }

    body.ppob-storefront {
      height: min(844px, calc(100dvh - 32px)) !important;
      min-height: 640px !important;
      margin: 16px auto !important;
      border-radius: 44px !important;
      overflow-y: auto !important;
      box-shadow: 0 40px 100px rgba(0, 0, 0, .36), inset 0 0 0 1px rgba(255, 255, 255, .1) !important;
    }

    body.ppob-storefront::-webkit-scrollbar {
      display: none !important;
    }

    body.ppob-storefront .ppob-native-app-home {
      border-top-left-radius: 44px !important;
      border-top-right-radius: 44px !important;
    }

    body.ppob-storefront .ppob-native-bottom-nav {
      bottom: calc((100dvh - min(844px, calc(100dvh - 32px))) / 2 + 16px) !important;
      border-bottom-left-radius: 44px !important;
      border-bottom-right-radius: 44px !important;
    }
  }

  @media (max-width: 520px) {
    body.ppob-storefront {
      width: 100% !important;
      max-width: 100% !important;
      border-radius: 0 !important;
    }

    body.ppob-storefront .ppob-native-bottom-nav {
      width: 100% !important;
    }
  }

  body.ppob-inline-checkout-page .ppob-inline-checkout-section.ppob-order-hero-section {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    min-height: auto !important;
    margin: 0 auto !important;
    padding: 14px 0 20px !important;
    background: #fff !important;
  }

  body.ppob-inline-checkout-page .ppob-inline-checkout-section.ppob-order-hero-section::before {
    display: none !important;
    content: none !important;
  }

  body.ppob-inline-checkout-page .ppob-inline-checkout-section .ppob-summary {
    display: block !important;
  }

  /* keep the wallet controls readable and make provider/product choices visible in the app shell. */
  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-wallet,
  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-app-home .ppob-native-wallet.ppob-native-wallet {
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    gap: 8px !important;
    min-height: 154px !important;
    padding: 18px 16px 14px !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-wallet-main {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
    max-width: calc(100% - 116px) !important;
    padding: 0 !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-wallet-main span,
  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-wallet-main small {
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-wallet-main strong {
    margin-top: 3px !important;
    font-size: clamp(24px, 6.2vw, 30px) !important;
    line-height: .95 !important;
    letter-spacing: -.04em !important;
    white-space: nowrap !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-point {
    top: 17px !important;
    right: 16px !important;
    z-index: 3 !important;
    max-width: 104px !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-actions {
    position: static !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    transform: none !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-actions a {
    min-width: 0 !important;
    display: grid !important;
    justify-items: center !important;
    gap: 5px !important;
    color: #fff !important;
    text-decoration: none !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-actions span {
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-actions small {
    max-width: 100% !important;
    overflow: hidden !important;
    color: #fff !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-category-route-hint:not([hidden]) {
    display: block !important;
    width: calc(100% - 32px) !important;
    margin: 10px auto 0 !important;
    color: var(--gt-muted) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-visible-subfilter:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: calc(100% - 32px) !important;
    margin: 0 auto 12px !important;
    padding-top: 34px !important;
    position: relative !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-visible-subfilter:not([hidden])::before {
    content: "Pilih Produk" !important;
    position: absolute !important;
    top: 4px !important;
    left: 0 !important;
    color: var(--gt-ink) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-visible-subfilter-btn.is-image-tile {
    min-height: 78px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .06) !important;
    text-align: left !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-visible-subfilter-media {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: rgba(242, 110, 34, .10) !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-visible-subfilter-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-visible-subfilter-text strong,
  body.ppob-storefront.ppob-inline-checkout-page .ppob-visible-subfilter-text small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-visible-subfilter-text strong {
    color: var(--gt-ink) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-visible-subfilter-text small {
    margin-top: 2px !important;
    color: var(--gt-muted) !important;
    font-size: 11px !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-product-grid[hidden] {
    display: none !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-order.ppob-order-hero-section {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1200 !important;
    display: none !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 18px 16px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(15, 23, 42, .42) !important;
    backdrop-filter: blur(10px) !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page.ppob-order-popup-open {
    overflow: hidden !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-order.ppob-order-hero-section.is-open {
    display: flex !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-order.ppob-order-hero-section::before {
    display: none !important;
    content: none !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-order.ppob-order-hero-section > .container {
    width: min(100%, 398px) !important;
    max-width: 398px !important;
    padding: 0 !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-order-card {
    position: relative !important;
    max-height: min(76dvh, 560px) !important;
    overflow: auto !important;
    padding: 24px 16px 16px !important;
    border: 0 !important;
    border-radius: 28px 28px 22px 22px !important;
    background: #fff !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .26) !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-order-card::-webkit-scrollbar {
    display: none !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-order-popup-close {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #F4F7FB !important;
    color: var(--gt-ink) !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-order-card .ppob-panel-head {
    padding-right: 34px !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-order-card .ppob-panel-head .section-tag {
    display: block !important;
    color: var(--gt-accent) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-order-card .ppob-panel-head h3 {
    margin: 8px 0 6px !important;
    color: var(--gt-ink) !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-order-card .ppob-panel-head p {
    margin: 0 !important;
    color: var(--gt-muted) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-selected-product {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 16px 0 !important;
    padding: 12px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06) !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-selected-product small {
    color: #9AA4B5 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-selected-product strong {
    color: var(--gt-accent) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-selected-product .btn {
    width: auto !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 16px !important;
    white-space: nowrap !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-contact-form {
    gap: 12px !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-contact-form .form-group label {
    margin-bottom: 7px !important;
    color: var(--gt-ink) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-contact-form .input {
    min-height: 50px !important;
    padding: 0 14px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-inline-contact-form .checkout-hint {
    margin-top: 6px !important;
    color: var(--gt-muted) !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page #buyButton {
    margin-top: 4px !important;
    min-height: 52px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page #buyButton:disabled {
    opacity: .62 !important;
    box-shadow: none !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page :is(.ppob-native-status, .ppob-app-statusbar) {
    display: none !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-top {
    padding-top: calc(18px + env(safe-area-inset-top, 0px)) !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-brand {
    margin-top: 0 !important;
  }

  /* v157 professional PPOB app refresh */
  body.ppob-storefront {
    --gt-primary: #5546D8 !important;
    --gt-primary-dark: #4338B8 !important;
    --gt-blue: #3B82F6 !important;
    --gt-cyan: #22C7D9 !important;
    --gt-accent: #FF7043 !important;
    --gt-bg: #F5F7FC !important;
    --gt-card: #FFFFFF !important;
    --gt-ink: #171A2B !important;
    --gt-muted: #737A91 !important;
    --gt-line: #E7EAF2 !important;
    font-family: Poppins, Inter, "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    background: var(--gt-bg) !important;
  }

  body.ppob-storefront::before {
    background:
      radial-gradient(circle at 12% 4%, rgba(85, 70, 216, .16), transparent 270px),
      radial-gradient(circle at 90% 0%, rgba(34, 199, 217, .16), transparent 260px),
      linear-gradient(180deg, #FBFCFF 0%, var(--gt-bg) 100%) !important;
  }

  body.ppob-storefront .ppob-native-app-home,
  body.ppob-storefront .ppob-store-section-first,
  body.ppob-inline-checkout-page .ppob-inline-order.ppob-order-hero-section,
  body.ppob-inline-checkout-page .ppob-inline-checkout-section.ppob-order-hero-section {
    width: min(100%, 640px) !important;
    max-width: 640px !important;
  }

  body.ppob-storefront .ppob-native-top {
    padding: calc(18px + env(safe-area-inset-top, 0px)) 16px 58px !important;
    background:
      radial-gradient(circle at 82% 15%, rgba(255, 112, 67, .28) 0 46px, transparent 47px),
      radial-gradient(circle at 24% 0%, rgba(255, 255, 255, .20) 0 64px, transparent 65px),
      linear-gradient(135deg, var(--gt-primary) 0%, var(--gt-primary-dark) 52%, var(--gt-cyan) 100%) !important;
  }

  body.ppob-storefront .ppob-app-header {
    min-height: 42px !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
  }

  body.ppob-storefront .ppob-app-header strong {
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    letter-spacing: -.03em !important;
  }

  body.ppob-storefront .ppob-app-header-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body.ppob-storefront .ppob-notification-button,
  body.ppob-storefront .ppob-promo-chip {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }

  body.ppob-storefront .ppob-notification-button {
    position: relative !important;
    padding: 0 !important;
  }

  body.ppob-storefront .ppob-notification-button svg,
  body.ppob-storefront .ppob-promo-chip svg,
  body.ppob-storefront .ppob-native-actions svg,
  body.ppob-storefront .ppob-native-menu svg,
  body.ppob-storefront .ppob-native-bottom-nav svg,
  body.ppob-storefront .ppob-recent-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: currentColor !important;
  }

  body.ppob-storefront .ppob-notification-button i {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--gt-accent) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .75) !important;
  }

  body.ppob-storefront .ppob-promo-chip {
    min-height: 38px !important;
    padding: 0 13px !important;
    background: #fff !important;
    color: var(--gt-accent) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  body.ppob-storefront .ppob-promo-chip::before,
  body.ppob-storefront .ppob-native-brand a::before {
    display: none !important;
    content: none !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-wallet,
  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-app-home .ppob-native-wallet.ppob-native-wallet {
    min-height: 160px !important;
    padding: 18px 16px 14px !important;
    border: 1px solid rgba(255, 255, 255, .20) !important;
    background: rgba(255, 255, 255, .14) !important;
    box-shadow: 0 18px 45px rgba(23, 26, 43, .16) !important;
    backdrop-filter: blur(16px) saturate(145%) !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-wallet-main strong {
    font-size: clamp(26px, 7vw, 34px) !important;
    letter-spacing: -.05em !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-actions span {
    width: 36px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, .92) !important;
    color: var(--gt-primary) !important;
  }

  body.ppob-storefront.ppob-inline-checkout-page .ppob-native-actions small {
    font-size: 10.5px !important;
  }

  body.ppob-storefront .ppob-native-sheet {
    margin: -36px 12px 0 !important;
    padding: 14px 12px 16px !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 12px 30px rgba(23, 26, 43, .07) !important;
  }

  body.ppob-storefront .ppob-native-alert {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto 30px !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
    padding: 10px !important;
    border: 1px solid rgba(255, 112, 67, .18) !important;
    border-radius: 18px !important;
    background: #FFF7ED !important;
    color: var(--gt-ink) !important;
  }

  body.ppob-storefront .ppob-native-alert > span {
    width: 38px !important;
    height: 38px !important;
    background: rgba(255, 112, 67, .12) !important;
    color: var(--gt-accent) !important;
  }

  body.ppob-storefront .ppob-native-alert strong {
    display: block !important;
    color: var(--gt-ink) !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    text-transform: none !important;
  }

  body.ppob-storefront .ppob-native-alert small {
    display: block !important;
    margin-top: 2px !important;
    color: var(--gt-muted) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  body.ppob-storefront .ppob-native-alert a {
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--gt-accent) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  body.ppob-storefront .ppob-native-alert button {
    width: 30px !important;
    height: 30px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--gt-muted) !important;
    font-size: 20px !important;
    cursor: pointer !important;
  }

  body.ppob-storefront .ppob-native-search {
    min-height: 50px !important;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) 34px !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 16px !important;
    padding: 0 10px 0 14px !important;
    border: 1px solid var(--gt-line) !important;
    border-radius: 18px !important;
    background: #F8FAFF !important;
  }

  body.ppob-storefront .ppob-native-search svg {
    width: 20px !important;
    height: 20px !important;
    fill: var(--gt-muted) !important;
  }

  body.ppob-storefront .ppob-native-search .input {
    min-height: 46px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--gt-ink) !important;
    font-size: 14px !important;
  }

  body.ppob-storefront .ppob-native-search button {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #EEF2FF !important;
    color: var(--gt-primary) !important;
    font-size: 20px !important;
    cursor: pointer !important;
  }

  body.ppob-storefront .ppob-native-search button[hidden] {
    display: none !important;
  }

  body.ppob-storefront .ppob-native-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 13px 8px !important;
  }

  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button,
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button:is(.is-active, .active, :hover, :focus) {
    min-width: 0 !important;
    min-height: 78px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 7px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: var(--gt-ink) !important;
    box-shadow: none !important;
  }

  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button span,
  body.ppob-storefront .ppob-native-menu-item span,
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button:is(.is-active, .active, :hover, :focus) span {
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    background: #EEF2FF !important;
    color: var(--gt-primary) !important;
    box-shadow: none !important;
  }

  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item:nth-child(2) span { background: #EAF3FF !important; color: var(--gt-blue) !important; }
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item:nth-child(3) span { background: #FFF5E8 !important; color: var(--gt-accent) !important; }
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item:nth-child(4) span { background: #E9FBFD !important; color: #0891A4 !important; }
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item:nth-child(5) span { background: #F1EDFF !important; color: var(--gt-primary-dark) !important; }
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item:nth-child(6) span { background: #FFF3EA !important; color: var(--gt-accent) !important; }
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item:nth-child(7) span { background: #EEF8FF !important; color: var(--gt-blue) !important; }
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item:nth-child(8) span { background: #F2F4F8 !important; color: #64748B !important; }

  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button small,
  body.ppob-storefront .ppob-native-menu-item small {
    width: 100% !important;
    color: var(--gt-ink) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body.ppob-storefront .ppob-store-section-first {
    width: min(100%, 640px) !important;
    max-width: 640px !important;
    padding: 14px 0 22px !important;
    background: var(--gt-bg) !important;
  }

  body.ppob-storefront .ppob-banner-slider {
    margin: 0 12px 18px !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(23, 26, 43, .06) !important;
  }

  body.ppob-storefront .ppob-banner-photo {
    aspect-ratio: 16 / 7.2 !important;
    border-radius: 22px !important;
    object-fit: contain !important;
  }

  body.ppob-storefront .ppob-product-grid {
    width: calc(100% - 24px) !important;
    margin: 0 auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding-top: 38px !important;
  }

  body.ppob-storefront .ppob-product-grid::before {
    content: "Produk Favorit" !important;
    top: 5px !important;
    font-size: 17px !important;
    letter-spacing: -.02em !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card.ppob-product-card,
  body.ppob-storefront .ppob-product-grid .ppob-product-card {
    min-height: 116px !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px !important;
    border: 1px solid var(--gt-line) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 22px rgba(23, 26, 43, .045) !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card h3 {
    font-size: 13.5px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.ppob-storefront .ppob-product-grid .ppob-product-card p {
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  body.ppob-storefront .ppob-product-footer {
    width: calc(100% - 24px) !important;
    margin: 14px auto 4px !important;
  }

  body.ppob-storefront .ppob-product-footer .btn {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 16px !important;
  }

  body.ppob-storefront .ppob-recent-transactions {
    width: calc(100% - 24px) !important;
    margin: 20px auto 0 !important;
  }

  body.ppob-storefront .ppob-section-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
  }

  body.ppob-storefront .ppob-section-head span {
    color: var(--gt-accent) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
  }

  body.ppob-storefront .ppob-section-head h2 {
    margin: 2px 0 0 !important;
    color: var(--gt-ink) !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
  }

  body.ppob-storefront .ppob-section-head a {
    color: var(--gt-primary) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }

  body.ppob-storefront .ppob-recent-list,
  body.ppob-storefront .ppob-empty-state {
    border-radius: 20px !important;
    background: #fff !important;
  }

  body.ppob-storefront .ppob-empty-state {
    padding: 18px !important;
    color: var(--gt-muted) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    box-shadow: 0 8px 22px rgba(23, 26, 43, .045) !important;
  }

  body.ppob-storefront .ppob-recent-card {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 13px !important;
    border: 1px solid var(--gt-line) !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(23, 26, 43, .045) !important;
  }

  body.ppob-storefront .ppob-recent-icon {
    width: 46px !important;
    height: 46px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 16px !important;
    background: #EEF2FF !important;
    color: var(--gt-primary) !important;
  }

  body.ppob-storefront .ppob-recent-copy strong,
  body.ppob-storefront .ppob-recent-copy small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.ppob-storefront .ppob-recent-copy strong {
    color: var(--gt-ink) !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }

  body.ppob-storefront .ppob-recent-copy small {
    margin-top: 3px !important;
    color: var(--gt-muted) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  body.ppob-storefront .ppob-recent-meta {
    display: grid !important;
    justify-items: end !important;
    gap: 4px !important;
  }

  body.ppob-storefront .ppob-recent-status {
    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
  }

  body.ppob-storefront .ppob-recent-status.is-success { background: #ECFDF3 !important; color: #027A48 !important; }
  body.ppob-storefront .ppob-recent-status.is-failed { background: #FEF3F2 !important; color: #B42318 !important; }
  body.ppob-storefront .ppob-recent-status.is-processing { background: #EEF2FF !important; color: var(--gt-primary) !important; }

  body.ppob-storefront .ppob-recent-meta strong {
    color: var(--gt-ink) !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  body.ppob-storefront .ppob-recent-repeat {
    grid-column: 1 / -1 !important;
    min-height: 42px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #F8FAFF !important;
    color: var(--gt-primary) !important;
    font-weight: 900 !important;
    cursor: pointer !important;
  }

  body.ppob-storefront .ppob-native-bottom-nav {
    width: min(100%, 640px) !important;
    min-height: 72px !important;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--gt-line) !important;
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(14px) saturate(150%) !important;
  }

  body.ppob-storefront .ppob-native-bottom-nav a {
    min-width: 0 !important;
    min-height: 52px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 4px !important;
    border-radius: 16px !important;
    color: #8A90A3 !important;
    text-decoration: none !important;
  }

  body.ppob-storefront .ppob-native-bottom-nav a span,
  body.ppob-storefront .ppob-native-bottom-nav .is-main span {
    width: 26px !important;
    height: 26px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
  }

  body.ppob-storefront .ppob-native-bottom-nav a small {
    color: inherit !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
  }

  body.ppob-storefront .ppob-native-bottom-nav a.is-active,
  body.ppob-storefront .ppob-native-bottom-nav a.is-active small,
  body.ppob-storefront .ppob-native-bottom-nav .is-main {
    color: var(--gt-primary) !important;
  }

  body.ppob-storefront .ppob-native-bottom-nav .is-main {
    transform: none !important;
  }

  @media (min-width: 768px) {
    body.ppob-storefront .ppob-native-app-home,
    body.ppob-storefront .ppob-store-section-first,
    body.ppob-inline-checkout-page .ppob-inline-checkout-section.ppob-order-hero-section {
      width: min(100% - 40px, 920px) !important;
      max-width: 920px !important;
    }

    body.ppob-storefront .ppob-native-sheet {
      margin-inline: 22px !important;
      padding: 18px !important;
    }

    body.ppob-storefront .ppob-native-menu {
      grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    }

    body.ppob-storefront .ppob-product-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      width: calc(100% - 44px) !important;
    }

    body.ppob-storefront .ppob-product-footer,
    body.ppob-storefront .ppob-recent-transactions {
      width: calc(100% - 44px) !important;
    }

    body.ppob-storefront .ppob-native-bottom-nav {
      width: min(100% - 40px, 920px) !important;
    }
  }

  @media (min-width: 1024px) {
    html {
      display: block !important;
      background: var(--gt-bg) !important;
    }

    body.ppob-storefront {
      width: 100% !important;
      height: auto !important;
      min-height: 100dvh !important;
      margin: 0 !important;
      border-radius: 0 !important;
      overflow-y: auto !important;
      box-shadow: none !important;
      padding-top: 28px !important;
    }

    body.ppob-storefront .ppob-native-app-home,
    body.ppob-storefront .ppob-store-section-first,
    body.ppob-inline-checkout-page .ppob-inline-checkout-section.ppob-order-hero-section {
      width: min(100% - 64px, 1120px) !important;
      max-width: 1120px !important;
      border: 0 !important;
      border-radius: 28px !important;
      box-shadow: 0 20px 50px rgba(23, 26, 43, .06) !important;
    }

    body.ppob-storefront .ppob-native-top {
      padding-inline: 28px !important;
    }

    body.ppob-storefront .ppob-native-sheet {
      margin-inline: 28px !important;
    }

    body.ppob-storefront .ppob-product-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    body.ppob-storefront .ppob-native-bottom-nav {
      width: min(100% - 64px, 1120px) !important;
      bottom: 16px !important;
      border: 1px solid var(--gt-line) !important;
      border-radius: 24px !important;
    }
  }
}

/* v159 final winning layer - placed last intentionally */
@media (min-width: 0) {
  body.ppob-storefront.is-ppob-guest #ppobAccountBadge { background: #FFF3EA !important; color: var(--gt-accent) !important; }
  body.ppob-storefront.is-ppob-member #ppobAccountBadge { background: #ECFDF3 !important; color: #027A48 !important; }
  body.ppob-storefront.is-ppob-guest #ppobBalanceValue { font-size: clamp(24px, 7vw, 31px) !important; overflow-wrap: anywhere !important; }

  body.ppob-storefront .ppob-native-alert {
    grid-template-columns: 42px minmax(0, 1fr) 30px !important;
    grid-template-areas: "icon copy close" "icon action close" !important;
    gap: 9px 11px !important;
    padding: 13px !important;
    align-items: center !important;
  }
  body.ppob-storefront .ppob-native-alert > span { grid-area: icon !important; width: 42px !important; height: 42px !important; }
  body.ppob-storefront .ppob-native-alert > div { grid-area: copy !important; min-width: 0 !important; }
  body.ppob-storefront .ppob-native-alert a { grid-area: action !important; width: max-content !important; min-height: 32px !important; padding-inline: 12px !important; }
  body.ppob-storefront .ppob-native-alert button { grid-area: close !important; align-self: center !important; }
  body.ppob-storefront .ppob-native-alert strong { font-size: 13px !important; line-height: 1.35 !important; }
  body.ppob-storefront .ppob-native-alert small { font-size: 11.5px !important; line-height: 1.4 !important; }

  body.ppob-storefront .ppob-native-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px 6px !important;
    align-items: start !important;
  }
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button,
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button:is(.is-active, .active, :hover, :focus) {
    min-height: 76px !important;
    padding: 0 1px !important;
    gap: 6px !important;
    overflow: visible !important;
  }
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button span,
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button:is(.is-active, .active, :hover, :focus) span {
    width: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
  }
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button small {
    max-width: 72px !important;
    margin-inline: auto !important;
    font-size: 10px !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
    text-align: center !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  body.ppob-storefront .ppob-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding-top: 42px !important;
  }
  body.ppob-storefront .ppob-product-grid::before {
    content: attr(data-title) !important;
  }
  body.ppob-storefront .ppob-product-grid .ppob-product-card.ppob-product-card,
  body.ppob-storefront .ppob-product-grid .ppob-product-card {
    min-height: 108px !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 13px 12px !important;
    border-radius: 19px !important;
    overflow: hidden !important;
  }
  body.ppob-storefront .ppob-product-grid .ppob-product-card::after { display: none !important; content: none !important; }
  body.ppob-storefront .ppob-product-grid .ppob-product-card-copy {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  body.ppob-storefront .ppob-product-grid :is(.ppob-product-card-visual, .ppob-product-fallback, .ppob-product-thumb, .ppob-product-action) { display: none !important; }
  body.ppob-storefront .ppob-product-grid .ppob-product-card h3 {
    min-height: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: break-word !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
  }
  body.ppob-storefront .ppob-product-grid .ppob-product-card p {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
  }

  @media (max-width: 380px) {
    body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button span { width: 42px !important; height: 42px !important; }
    body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button small { max-width: 64px !important; font-size: 9.2px !important; }
  }

  @media (min-width: 768px) {
    body.ppob-storefront .ppob-native-alert {
      grid-template-columns: 46px minmax(0, 1fr) auto 34px !important;
      grid-template-areas: "icon copy action close" !important;
    }
    body.ppob-storefront .ppob-native-menu { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; gap: 12px !important; }
    body.ppob-storefront .ppob-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  }

  @media (min-width: 1024px) {
    body.ppob-storefront .ppob-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  }
}