/*
 * GreatTech PPOB responsive refresh
 * Loaded last so legacy visual layers stay functional while this file normalizes
 * spacing, responsive breakpoints, touch targets, navigation and content widths.
 */
:root {
  --ppob-r-primary: #f26e22;
  --ppob-r-primary-dark: #d95712;
  --ppob-r-secondary: #5142d9;
  --ppob-r-bg: #f5f7fb;
  --ppob-r-surface: #ffffff;
  --ppob-r-text: #172033;
  --ppob-r-muted: #667085;
  --ppob-r-border: #e6eaf1;
  --ppob-r-success: #168a55;
  --ppob-r-danger: #c93434;
  --ppob-r-radius-sm: 12px;
  --ppob-r-radius: 18px;
  --ppob-r-radius-lg: 26px;
  --ppob-r-shadow: 0 12px 34px rgba(31, 42, 68, .08);
  --ppob-r-shadow-soft: 0 6px 20px rgba(31, 42, 68, .06);
  --ppob-r-content: 1180px;
  --ppob-r-reading: 900px;
  --ppob-r-nav-height: 72px;
}

html {
  min-width: 320px !important;
  background: var(--ppob-r-bg) !important;
  scroll-behavior: smooth;
}

body.ppob-storefront {
  margin: 0 !important;
  min-width: 320px !important;
  min-height: 100dvh !important;
  overflow-x: clip !important;
  background: var(--ppob-r-bg) !important;
  color: var(--ppob-r-text) !important;
  font-family: Poppins, "Segoe UI", Arial, sans-serif !important;
  padding-bottom: calc(var(--ppob-r-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
}

body.ppob-storefront *,
body.ppob-storefront *::before,
body.ppob-storefront *::after {
  box-sizing: border-box !important;
}

body.ppob-storefront :is(button, a, input, select, textarea, summary) {
  -webkit-tap-highlight-color: transparent;
}

body.ppob-storefront :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid rgba(242, 110, 34, .24) !important;
  outline-offset: 2px !important;
}

body.ppob-storefront :is(input, select, textarea) {
  min-width: 0 !important;
  max-width: 100% !important;
  font-family: inherit !important;
  font-size: 16px !important;
}

body.ppob-storefront :is(button, .btn, input, select) {
  min-height: 44px;
}

body.ppob-storefront img,
body.ppob-storefront svg {
  max-width: 100%;
}

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

body.ppob-storefront .container {
  width: min(100% - 32px, var(--ppob-r-content)) !important;
  max-width: var(--ppob-r-content) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

body.ppob-storefront .btn {
  min-height: 44px !important;
  border-radius: 14px !important;
  padding: 10px 18px !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.ppob-storefront .btn-primary {
  border: 1px solid var(--ppob-r-primary) !important;
  background: var(--ppob-r-primary) !important;
  color: #fff !important;
}

body.ppob-storefront .btn-primary:hover {
  border-color: var(--ppob-r-primary-dark) !important;
  background: var(--ppob-r-primary-dark) !important;
}

body.ppob-storefront .btn-outline {
  border: 1px solid var(--ppob-r-border) !important;
  background: #fff !important;
  color: var(--ppob-r-text) !important;
}

body.ppob-storefront :is(.ppob-panel, .summary-card, .checkout-selected-product-card,
  .checkout-form-section, .checkout-payment-focus, .checkout-qris-panel,
  .checkout-status-card, .checkout-status-detail-card, .checkout-status-payment-card,
  .ppob-catalog-status, .saldo-card, .catatan-card, .catatan-user-card,
  .catatan-info-box, .riwayat-receipt) {
  border: 1px solid var(--ppob-r-border) !important;
  border-radius: var(--ppob-r-radius) !important;
  background: var(--ppob-r-surface) !important;
  box-shadow: var(--ppob-r-shadow-soft) !important;
}

/* Shared app bottom navigation */
html body.ppob-storefront > .ppob-native-bottom-nav {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  z-index: 3000 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: calc(var(--ppob-r-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
  height: auto !important;
  padding: 7px max(10px, env(safe-area-inset-right, 0px)) calc(7px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 4px !important;
  border: 1px solid rgba(230, 234, 241, .9) !important;
  border-width: 1px 0 0 !important;
  border-radius: 20px 20px 0 0 !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 -12px 32px rgba(31, 42, 68, .10) !important;
  backdrop-filter: blur(16px) !important;
  transform: none !important;
}

html body.ppob-storefront > .ppob-native-bottom-nav a {
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 5px 2px !important;
  display: grid !important;
  grid-template-rows: 25px 14px !important;
  place-items: center !important;
  align-content: center !important;
  gap: 3px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #8a94a8 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

html body.ppob-storefront > .ppob-native-bottom-nav a span {
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: currentColor !important;
  box-shadow: none !important;
}

html body.ppob-storefront > .ppob-native-bottom-nav a svg {
  width: 19px !important;
  height: 19px !important;
  fill: currentColor !important;
}

html body.ppob-storefront > .ppob-native-bottom-nav a small {
  max-width: 100% !important;
  overflow: hidden !important;
  color: currentColor !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.ppob-storefront > .ppob-native-bottom-nav a.is-active {
  background: #fff3ea !important;
  color: var(--ppob-r-primary) !important;
}

/* Home */
body.ppob-storefront .ppob-native-app-home {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.ppob-storefront .ppob-native-top {
  width: 100% !important;
  max-width: none !important;
  padding: calc(18px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 26px max(16px, env(safe-area-inset-left, 0px)) !important;
  border-radius: 0 0 28px 28px !important;
  background: linear-gradient(145deg, #4136be 0%, #5a49e3 60%, #7668f1 100%) !important;
}

body.ppob-storefront .ppob-native-brand {
  width: min(100%, var(--ppob-r-content)) !important;
  margin: 0 auto 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body.ppob-storefront .ppob-native-brand strong {
  color: #fff !important;
  font-size: clamp(21px, 5vw, 27px) !important;
  letter-spacing: -.04em !important;
}

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

body.ppob-storefront :is(.ppob-notification-button, .ppob-promo-chip) {
  min-height: 38px !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) !important;
}

body.ppob-storefront .ppob-native-wallet {
  width: min(100%, var(--ppob-r-content)) !important;
  max-width: var(--ppob-r-content) !important;
  min-height: 126px !important;
  margin: 0 auto !important;
  padding: 18px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px 18px !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.14) !important;
  box-shadow: 0 18px 45px rgba(25, 19, 103, .22) !important;
  backdrop-filter: blur(18px) !important;
}

body.ppob-storefront .ppob-native-wallet-main {
  min-width: 0 !important;
}

body.ppob-storefront .ppob-native-wallet-main :is(span, small, strong) {
  color: #fff !important;
}

html body.ppob-storefront #ppobBalanceValue {
  display: block !important;
  max-width: 100% !important;
  margin-top: 6px !important;
  font-size: clamp(23px, 6vw, 34px) !important;
  line-height: 1.1 !important;
  overflow-wrap: anywhere !important;
}

body.ppob-storefront .ppob-native-point {
  align-self: start !important;
  min-height: 30px !important;
  padding: 6px 11px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.88) !important;
  color: var(--ppob-r-secondary) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body.ppob-storefront .ppob-native-actions {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.ppob-storefront .ppob-native-actions a {
  min-width: 0 !important;
  min-height: 50px !important;
  padding: 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  text-decoration: none !important;
}

body.ppob-storefront .ppob-native-actions a span {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.17) !important;
}

body.ppob-storefront .ppob-native-actions a small {
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

body.ppob-storefront .ppob-native-sheet {
  width: min(calc(100% - 24px), var(--ppob-r-content)) !important;
  max-width: var(--ppob-r-content) !important;
  margin: -12px auto 0 !important;
  padding: 14px !important;
  display: grid !important;
  gap: 14px !important;
  border: 1px solid var(--ppob-r-border) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: var(--ppob-r-shadow) !important;
}

body.ppob-storefront .ppob-native-alert {
  width: 100% !important;
  min-height: 0 !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  grid-template-areas: "icon copy close" "icon action close" !important;
  gap: 6px 10px !important;
  align-items: center !important;
  border: 1px solid #f5d7a0 !important;
  border-radius: 15px !important;
  background: #fff9ed !important;
  box-shadow: none !important;
}

body.ppob-storefront .ppob-native-alert > span {
  grid-area: icon !important;
  width: 38px !important;
  height: 38px !important;
}
body.ppob-storefront .ppob-native-alert > div { grid-area: copy !important; }
body.ppob-storefront .ppob-native-alert > a { grid-area: action !important; }
body.ppob-storefront .ppob-native-alert > button { grid-area: close !important; }

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

body.ppob-storefront .ppob-native-search {
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 12px !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  border: 1px solid var(--ppob-r-border) !important;
  border-radius: 15px !important;
  background: #f7f8fb !important;
  box-shadow: none !important;
}

body.ppob-storefront .ppob-native-search input {
  width: 100% !important;
  min-height: 46px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
}

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

body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button {
  min-width: 0 !important;
  min-height: 78px !important;
  padding: 4px !important;
  display: grid !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: var(--ppob-r-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button span {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 18px rgba(81,66,217,.14) !important;
}

body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button small {
  width: 100% !important;
  color: var(--ppob-r-text) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

body.ppob-storefront .ppob-store-products {
  width: 100% !important;
  padding: 20px 0 34px !important;
  background: transparent !important;
}

body.ppob-storefront .ppob-banner-slider {
  width: 100% !important;
  margin: 0 0 20px !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  box-shadow: var(--ppob-r-shadow-soft) !important;
}

body.ppob-storefront :is(.ppob-catalog-heading, .ppob-section-head) {
  margin: 18px 0 12px !important;
}

body.ppob-storefront .ppob-catalog-tabs,
body.ppob-storefront .ppob-visible-subfilter,
body.ppob-storefront .portfolio-filter {
  max-width: 100% !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain !important;
  scrollbar-width: none !important;
}
body.ppob-storefront :is(.ppob-catalog-tabs, .ppob-visible-subfilter, .portfolio-filter)::-webkit-scrollbar { display: none !important; }

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

body.ppob-storefront .ppob-product-grid::before {
  grid-column: 1 / -1 !important;
}

body.ppob-storefront .ppob-product-grid .ppob-product-card.ppob-product-card {
  min-width: 0 !important;
  min-height: 104px !important;
  padding: 13px !important;
  border: 1px solid var(--ppob-r-border) !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: var(--ppob-r-text) !important;
  box-shadow: var(--ppob-r-shadow-soft) !important;
  transform: none !important;
}

body.ppob-storefront .ppob-product-grid .ppob-product-card h3 {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

body.ppob-storefront .ppob-product-grid .ppob-product-card p {
  margin: 6px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  overflow-wrap: anywhere !important;
}

body.ppob-storefront :is(.ppob-recent-list, .ppob-news-grid) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

body.ppob-storefront .ppob-recent-card {
  min-width: 0 !important;
  padding: 14px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  border: 1px solid var(--ppob-r-border) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: var(--ppob-r-shadow-soft) !important;
}

/* Product selection */
body.ppob-product-page .ppob-product-shell {
  width: min(100%, var(--ppob-r-reading)) !important;
  max-width: var(--ppob-r-reading) !important;
  min-height: 100dvh !important;
  margin: 0 auto !important;
  padding: 0 0 26px !important;
  background: var(--ppob-r-bg) !important;
  box-shadow: none !important;
}

body.ppob-product-page .ppob-product-header {
  min-height: 88px !important;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 18px 16px !important;
  border-radius: 0 0 24px 24px !important;
  background: linear-gradient(145deg, #4136be, #6658eb) !important;
  color: #fff !important;
}

body.ppob-product-page :is(.ppob-product-input-card, .ppob-product-list-section, .ppob-product-empty) {
  width: calc(100% - 24px) !important;
  max-width: none !important;
  margin-inline: auto !important;
  border: 1px solid var(--ppob-r-border) !important;
  border-radius: var(--ppob-r-radius) !important;
  background: #fff !important;
  box-shadow: var(--ppob-r-shadow-soft) !important;
}

body.ppob-product-page .ppob-product-input-card {
  margin-top: 14px !important;
  padding: 16px !important;
}

body.ppob-product-page .ppob-product-list-section {
  margin-top: 12px !important;
  padding: 14px !important;
}

body.ppob-product-page .ppob-product-target-box {
  min-width: 0 !important;
}

body.ppob-product-page .ppob-product-search-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) repeat(2, 44px) !important;
  gap: 8px !important;
}

body.ppob-product-page .ppob-product-search-row input {
  width: 100% !important;
}

body.ppob-product-page .ppob-product-nominal-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.ppob-product-page .ppob-product-nominal-card {
  min-width: 0 !important;
  min-height: 96px !important;
  padding: 13px !important;
  border: 1px solid var(--ppob-r-border) !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: var(--ppob-r-text) !important;
  box-shadow: none !important;
}

body.ppob-product-page .ppob-product-sheet {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  z-index: 3200 !important;
  width: min(100%, 620px) !important;
  max-width: 620px !important;
  max-height: calc(100dvh - 16px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  border-radius: 24px 24px 0 0 !important;
  transform: translateX(-50%) !important;
  overflow-y: auto !important;
}

body.ppob-product-page .ppob-product-sheet-action {
  position: sticky !important;
  bottom: 0 !important;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  background: #fff !important;
}

/* Checkout and status */
body.ppob-dedicated-checkout-page,
body.checkout-status-page {
  padding-top: 78px !important;
}

body.ppob-dedicated-checkout-page .navbar,
body.checkout-status-page .navbar {
  min-height: 72px !important;
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid var(--ppob-r-border) !important;
  box-shadow: 0 8px 24px rgba(31,42,68,.06) !important;
  backdrop-filter: blur(14px) !important;
}

body.ppob-dedicated-checkout-page .checkout-section,
body.checkout-status-page .checkout-section {
  padding: 24px 0 38px !important;
}

body.ppob-dedicated-checkout-page .ppob-layout,
body.checkout-status-page .ppob-layout {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  align-items: start !important;
}

body.ppob-dedicated-checkout-page .ppob-panel,
body.checkout-status-page .ppob-panel {
  padding: 18px !important;
}

body.ppob-dedicated-checkout-page .ppob-panel-head,
body.checkout-status-page .ppob-panel-head {
  margin-bottom: 16px !important;
}

body.ppob-dedicated-checkout-page :is(.checkout-selected-product-card, .checkout-form-section),
body.checkout-status-page :is(.checkout-status-card, .checkout-status-detail-card) {
  margin-top: 14px !important;
  padding: 16px !important;
}

body.ppob-dedicated-checkout-page .checkout-form-section-head,
body.checkout-status-page .checkout-status-lookup-head {
  margin-bottom: 14px !important;
}

body.ppob-dedicated-checkout-page .form-group,
body.checkout-status-page .form-group {
  min-width: 0 !important;
  margin-bottom: 14px !important;
}

body.ppob-dedicated-checkout-page :is(input, select, textarea),
body.checkout-status-page :is(input, select, textarea) {
  width: 100% !important;
  border: 1px solid var(--ppob-r-border) !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.ppob-dedicated-checkout-page .payment-method-selector {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 9px !important;
}

body.ppob-dedicated-checkout-page .checkout-qris-panel {
  grid-template-columns: 1fr !important;
  padding: 14px !important;
}

body.ppob-dedicated-checkout-page .checkout-qris-card {
  width: min(100%, 280px) !important;
  margin-inline: auto !important;
}

body.ppob-dedicated-checkout-page .checkout-action-row,
body.checkout-status-page .checkout-action-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

body.ppob-dedicated-checkout-page .checkout-action-row > *,
body.checkout-status-page .checkout-action-row > * {
  width: 100% !important;
}

body.ppob-dedicated-checkout-page .ppob-summary,
body.checkout-status-page .ppob-summary {
  min-width: 0 !important;
}

body.ppob-dedicated-checkout-page .summary-card,
body.checkout-status-page .summary-card {
  padding: 18px !important;
}

body.ppob-dedicated-checkout-page .summary-list li,
body.checkout-status-page .summary-list li,
body.checkout-status-page .checkout-status-payment-row {
  min-width: 0 !important;
  gap: 12px !important;
}

body.ppob-dedicated-checkout-page .summary-list strong,
body.checkout-status-page :is(.summary-list strong, .checkout-status-payment-row strong) {
  max-width: 58% !important;
  overflow-wrap: anywhere !important;
  text-align: right !important;
}

body.checkout-status-page .checkout-status-lookup-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

/* Transaction, balance and notes */
body.riwayat-page .riwayat-shell,
body.saldo-page .saldo-shell,
body.catatan-page .catatan-shell {
  width: min(100%, var(--ppob-r-reading)) !important;
  max-width: var(--ppob-r-reading) !important;
  min-height: 100dvh !important;
  margin: 0 auto !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.riwayat-page .riwayat-header,
body.saldo-page :is(.saldo-header, .saldo-sub-header),
body.catatan-page .catatan-header {
  min-height: 142px !important;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 18px 48px !important;
  border-radius: 0 0 26px 26px !important;
  background: linear-gradient(145deg, #4136be, #6658eb) !important;
}

body.riwayat-page .riwayat-header h1,
body.saldo-page :is(.saldo-header h1, .saldo-sub-header h1),
body.catatan-page .catatan-header h1 {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(28px, 8vw, 40px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.04em !important;
}

body.riwayat-page .riwayat-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: start !important;
}

body.riwayat-page .riwayat-header-actions {
  display: flex !important;
  gap: 8px !important;
}

body.riwayat-page .riwayat-search-toggle,
body.saldo-page .saldo-header-icon,
body.catatan-page .catatan-back {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 14px !important;
}

body.riwayat-page :is(.riwayat-search-panel, .ppob-page-status) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin: 4px 0 0 !important;
}

body.riwayat-page .riwayat-search-panel input {
  width: 100% !important;
  border-radius: 13px !important;
}

body.riwayat-page .riwayat-tabs,
body.saldo-page .saldo-tabs {
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 16px 0 !important;
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  background: #fff !important;
}
body.riwayat-page .riwayat-tabs::-webkit-scrollbar,
body.saldo-page .saldo-tabs::-webkit-scrollbar { display: none !important; }

body.riwayat-page .riwayat-tabs button,
body.saldo-page .saldo-tabs button {
  flex: 0 0 auto !important;
  min-height: 40px !important;
  padding: 8px 13px !important;
  border: 1px solid var(--ppob-r-border) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--ppob-r-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

body.riwayat-page .riwayat-tabs button.is-active,
body.saldo-page .saldo-tabs button.is-active {
  border-color: var(--ppob-r-primary) !important;
  background: #fff3ea !important;
  color: var(--ppob-r-primary) !important;
}

body.riwayat-page .riwayat-list,
body.saldo-page .saldo-history-list {
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}

body.riwayat-page .riwayat-item,
body.saldo-page .saldo-history-item,
body.catatan-page .catatan-customer-item {
  width: 100% !important;
  min-width: 0 !important;
  margin-bottom: 10px !important;
  padding: 14px !important;
  border: 1px solid var(--ppob-r-border) !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: var(--ppob-r-shadow-soft) !important;
}

body.riwayat-page .riwayat-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  text-align: left !important;
}

body.riwayat-page .riwayat-item-side {
  min-width: 0 !important;
  text-align: right !important;
}

body.riwayat-page .riwayat-item :is(strong, span),
body.saldo-page .saldo-history-item :is(strong, span),
body.catatan-page .catatan-customer-item :is(strong, span) {
  overflow-wrap: anywhere !important;
}

body.riwayat-page .riwayat-detail-view,
body.saldo-page :is(.saldo-deposit-view, .saldo-deposit-detail) {
  min-height: 100dvh !important;
  padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
  background: var(--ppob-r-bg) !important;
}

body.riwayat-page :is(.riwayat-receipt, .riwayat-detail-actions),
body.saldo-page :is(.saldo-deposit-form, .saldo-deposit-history, .saldo-receipt, .saldo-payment-card) {
  width: calc(100% - 32px) !important;
  max-width: 720px !important;
  margin-inline: auto !important;
}

body.saldo-page .saldo-card,
body.catatan-page .catatan-create-panel {
  width: calc(100% - 32px) !important;
  max-width: 760px !important;
  margin: -34px auto 0 !important;
  padding: 16px !important;
}

body.saldo-page .saldo-card-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

body.saldo-page .saldo-card-actions button {
  min-width: 0 !important;
  min-height: 48px !important;
}

body.saldo-page :is(.saldo-deposit-form, .saldo-payment-card) {
  padding: 16px !important;
}

body.saldo-page .saldo-field {
  min-width: 0 !important;
}

body.saldo-page .saldo-field :is(input, select, textarea) {
  width: 100% !important;
}

body.saldo-page .saldo-transfer-sheet {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  z-index: 3200 !important;
  width: min(100%, 620px) !important;
  max-width: 620px !important;
  max-height: calc(100dvh - 16px) !important;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  border-radius: 24px 24px 0 0 !important;
  transform: translateX(-50%) !important;
  overflow-y: auto !important;
}

body.catatan-page .catatan-create-panel {
  position: relative !important;
  z-index: 2 !important;
}

body.catatan-page .catatan-primary-btn,
body.catatan-page .catatan-secondary-btn,
body.catatan-page .catatan-save-btn {
  min-height: 46px !important;
  border-radius: 13px !important;
}

body.catatan-page .catatan-detail,
body.catatan-page .catatan-customer-section {
  width: calc(100% - 32px) !important;
  max-width: 760px !important;
  margin-inline: auto !important;
}

body.catatan-page .catatan-action-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.catatan-page .catatan-empty {
  min-height: 360px !important;
  padding: 40px 24px calc(100px + env(safe-area-inset-bottom, 0px)) !important;
}

body.catatan-page .catatan-modal-card {
  width: min(calc(100% - 24px), 520px) !important;
  max-width: 520px !important;
  max-height: calc(100dvh - 24px) !important;
  padding: 20px !important;
  border-radius: 22px !important;
  overflow-y: auto !important;
}

body.catatan-page .catatan-line-field {
  min-width: 0 !important;
}
body.catatan-page .catatan-line-field input { width: 100% !important; }

/* Small phones */
@media (max-width: 359px) {
  body.ppob-storefront .container { width: min(100% - 20px, var(--ppob-r-content)) !important; }
  body.ppob-storefront .ppob-native-top { padding-inline: 10px !important; }
  body.ppob-storefront .ppob-native-sheet { width: calc(100% - 16px) !important; padding: 10px !important; }
  body.ppob-storefront .ppob-native-menu { gap: 9px 4px !important; }
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button span { width: 43px !important; height: 43px !important; min-width: 43px !important; min-height: 43px !important; }
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button small { font-size: 8.5px !important; }
  body.ppob-storefront .ppob-product-grid,
  body.ppob-product-page .ppob-product-nominal-grid { gap: 7px !important; }
  html body.ppob-storefront > .ppob-native-bottom-nav { padding-inline: 4px !important; gap: 0 !important; }
  html body.ppob-storefront > .ppob-native-bottom-nav a small { font-size: 8px !important; }
}

/* Tablet */
@media (min-width: 600px) {
  body.ppob-storefront .container { width: min(100% - 48px, var(--ppob-r-content)) !important; }
  body.ppob-storefront .ppob-native-top { padding-inline: 24px !important; }
  body.ppob-storefront .ppob-native-sheet { width: min(calc(100% - 48px), var(--ppob-r-content)) !important; padding: 18px !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; gap: 14px !important; }
  body.ppob-product-page .ppob-product-nominal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
  body.ppob-storefront :is(.ppob-recent-list, .ppob-news-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.ppob-dedicated-checkout-page .payment-method-selector { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.ppob-dedicated-checkout-page .checkout-action-row,
  body.checkout-status-page .checkout-action-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.checkout-status-page .checkout-status-lookup-grid { grid-template-columns: minmax(0, 1fr) auto !important; align-items: end !important; }
  body.checkout-status-page .checkout-status-lookup-grid .btn { width: auto !important; min-width: 150px !important; }
}

/* Desktop */
@media (min-width: 1024px) {
  body.ppob-storefront {
    padding-bottom: 32px !important;
  }

  body.ppob-storefront:not(.ppob-dedicated-checkout-page):not(.checkout-status-page) {
    padding-left: 96px !important;
  }

  html body.ppob-storefront > .ppob-native-bottom-nav {
    top: 50% !important;
    left: 18px !important;
    right: auto !important;
    bottom: auto !important;
    width: 72px !important;
    max-width: 72px !important;
    min-height: 0 !important;
    padding: 10px 7px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(5, auto) !important;
    gap: 6px !important;
    border: 1px solid var(--ppob-r-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--ppob-r-shadow) !important;
    transform: translateY(-50%) !important;
  }

  html body.ppob-storefront > .ppob-native-bottom-nav a {
    min-height: 58px !important;
    padding: 6px 2px !important;
  }

  body.ppob-dedicated-checkout-page > .ppob-native-bottom-nav,
  body.checkout-status-page > .ppob-native-bottom-nav {
    display: none !important;
  }

  body.ppob-storefront .ppob-native-top {
    padding: 28px 32px 32px !important;
    border-radius: 0 0 34px 34px !important;
  }

  body.ppob-storefront .ppob-native-wallet {
    grid-template-columns: minmax(260px, 1fr) auto minmax(420px, .9fr) !important;
    align-items: center !important;
    min-height: 118px !important;
    padding: 20px 22px !important;
  }

  body.ppob-storefront .ppob-native-actions {
    grid-column: auto !important;
  }

  body.ppob-storefront .ppob-native-sheet {
    margin-top: -14px !important;
    padding: 20px 22px !important;
    grid-template-columns: minmax(280px, .8fr) minmax(360px, 1.2fr) !important;
    align-items: start !important;
  }

  body.ppob-storefront .ppob-native-alert {
    grid-row: span 2 !important;
    height: 100% !important;
  }

  body.ppob-storefront .ppob-native-search,
  body.ppob-storefront .ppob-native-menu {
    grid-column: 2 !important;
  }

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

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

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

  body.ppob-product-page .ppob-product-shell {
    padding: 24px 0 40px !important;
  }

  body.ppob-product-page .ppob-product-header {
    border-radius: 26px !important;
  }

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

  body.ppob-dedicated-checkout-page,
  body.checkout-status-page {
    padding-bottom: 0 !important;
  }

  body.ppob-dedicated-checkout-page .ppob-layout,
  body.checkout-status-page .ppob-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr) !important;
    gap: 22px !important;
  }

  body.ppob-dedicated-checkout-page .ppob-summary,
  body.checkout-status-page .ppob-summary {
    position: sticky !important;
    top: 96px !important;
  }

  body.ppob-dedicated-checkout-page .checkout-qris-panel {
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) !important;
    align-items: center !important;
  }

  body.riwayat-page .riwayat-shell,
  body.saldo-page .saldo-shell,
  body.catatan-page .catatan-shell {
    min-height: calc(100dvh - 48px) !important;
    margin-block: 24px !important;
    border: 1px solid var(--ppob-r-border) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow: var(--ppob-r-shadow) !important;
  }

  body.riwayat-page .riwayat-header,
  body.saldo-page :is(.saldo-header, .saldo-sub-header),
  body.catatan-page .catatan-header {
    border-radius: 0 0 28px 28px !important;
  }

  body.riwayat-page .riwayat-list,
  body.saldo-page .saldo-history-list {
    padding-bottom: 32px !important;
  }

  body.catatan-page .catatan-empty {
    padding-bottom: 48px !important;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  body.ppob-storefront *,
  body.ppob-storefront *::before,
  body.ppob-storefront *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Public checkout navbar */
body.ppob-dedicated-checkout-page .navbar .container,
body.checkout-status-page .navbar .container {
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

body.ppob-dedicated-checkout-page .logo,
body.checkout-status-page .logo {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--ppob-r-text) !important;
  text-decoration: none !important;
}

body.ppob-dedicated-checkout-page .logo-icon,
body.checkout-status-page .logo-icon,
body.ppob-dedicated-checkout-page .logo-icon img,
body.checkout-status-page .logo-icon img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
}

body.ppob-dedicated-checkout-page .public-nav-links,
body.checkout-status-page .public-nav-links {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  list-style: none !important;
}

body.ppob-dedicated-checkout-page .public-nav-links a,
body.checkout-status-page .public-nav-links a {
  min-height: 40px !important;
  padding: 9px 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 12px !important;
  color: var(--ppob-r-muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

body.ppob-dedicated-checkout-page .public-nav-links a.active,
body.checkout-status-page .public-nav-links a.active {
  background: #fff3ea !important;
  color: var(--ppob-r-primary) !important;
}

body.ppob-dedicated-checkout-page .menu-toggle,
body.checkout-status-page .menu-toggle {
  display: none !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 9px !important;
  border: 1px solid var(--ppob-r-border) !important;
  border-radius: 13px !important;
  background: #fff !important;
}

@media (max-width: 860px) {
  body.ppob-dedicated-checkout-page .navbar .container,
  body.checkout-status-page .navbar .container {
    width: min(100% - 24px, var(--ppob-r-content)) !important;
  }

  body.ppob-dedicated-checkout-page .logo span,
  body.checkout-status-page .logo span {
    max-width: 180px !important;
    overflow: hidden !important;
    font-size: 14px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.ppob-dedicated-checkout-page .menu-toggle,
  body.checkout-status-page .menu-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
  }

  body.ppob-dedicated-checkout-page .menu-toggle span,
  body.checkout-status-page .menu-toggle span {
    width: 22px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: var(--ppob-r-primary) !important;
  }

  body.ppob-dedicated-checkout-page .public-nav-links,
  body.checkout-status-page .public-nav-links {
    position: fixed !important;
    top: 78px !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 3100 !important;
    width: auto !important;
    max-height: calc(100dvh - 96px) !important;
    padding: 10px !important;
    display: grid !important;
    gap: 5px !important;
    overflow-y: auto !important;
    border: 1px solid var(--ppob-r-border) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.99) !important;
    box-shadow: var(--ppob-r-shadow) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    pointer-events: none !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
  }

  body.ppob-dedicated-checkout-page .public-nav-links.active,
  body.checkout-status-page .public-nav-links.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  body.ppob-dedicated-checkout-page .public-nav-links li,
  body.checkout-status-page .public-nav-links li {
    width: 100% !important;
  }

  body.ppob-dedicated-checkout-page .public-nav-links a,
  body.checkout-status-page .public-nav-links a {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: flex-start !important;
    padding: 11px 14px !important;
  }

  body.ppob-dedicated-checkout-page.menu-open,
  body.checkout-status-page.menu-open {
    overflow: hidden !important;
  }
}

/* ========================================================================== 
   Typography and layout consistency pass — 2026-07-02 v2
   This final layer intentionally loads after every legacy PPOB stylesheet.
   ========================================================================== */
:root {
  --ppob-type-xs: 12px;
  --ppob-type-sm: 13px;
  --ppob-type-base: 14px;
  --ppob-type-md: 16px;
  --ppob-type-lg: 18px;
  --ppob-type-xl: 22px;
  --ppob-type-2xl: 28px;
  --ppob-line-tight: 1.25;
  --ppob-line-normal: 1.5;
}

body.ppob-storefront {
  font-size: var(--ppob-type-base) !important;
  line-height: var(--ppob-line-normal) !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.ppob-storefront :is(main, section, article, header, footer, nav, form, fieldset, div, label) {
  min-width: 0;
}

body.ppob-storefront :is(h1, h2, h3, h4, p, small, span, strong, label, dt, dd, a, button) {
  overflow-wrap: break-word;
}

body.ppob-storefront h1 {
  margin-block: 0 12px !important;
  font-size: var(--ppob-type-xl) !important;
  font-weight: 800 !important;
  line-height: var(--ppob-line-tight) !important;
  letter-spacing: -.02em !important;
}

body.ppob-storefront h2 {
  margin-block: 0 10px !important;
  font-size: var(--ppob-type-lg) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: -.015em !important;
}

body.ppob-storefront h3,
body.ppob-storefront h4 {
  margin-block: 0 8px !important;
  font-size: var(--ppob-type-md) !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
}

body.ppob-storefront p,
body.ppob-storefront li,
body.ppob-storefront dd,
body.ppob-storefront dt {
  font-size: var(--ppob-type-base) !important;
  line-height: var(--ppob-line-normal) !important;
}

body.ppob-storefront small,
body.ppob-storefront .checkout-hint,
body.ppob-storefront .ppob-page-status {
  font-size: var(--ppob-type-xs) !important;
  line-height: 1.45 !important;
}

body.ppob-storefront :is(label, .form-group > label, .saldo-field > span, .saldo-transfer-sheet label > span) {
  font-size: var(--ppob-type-sm) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

body.ppob-storefront :is(button, .btn, [role="button"], .public-nav-links a) {
  font-size: var(--ppob-type-base) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

body.ppob-storefront :is(input, select, textarea) {
  min-height: 46px !important;
  padding: 11px 13px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}

body.ppob-storefront textarea {
  min-height: 104px !important;
  resize: vertical !important;
}

body.ppob-storefront :is(.section-tag, .status-badge, [data-status], .ppob-native-point) {
  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: .02em !important;
}

/* Home typography */
body.ppob-storefront .ppob-native-brand strong {
  font-size: 24px !important;
  line-height: 1.1 !important;
}

body.ppob-storefront .ppob-promo-chip {
  font-size: var(--ppob-type-sm) !important;
}

body.ppob-storefront .ppob-native-wallet-main > span,
body.ppob-storefront .ppob-native-wallet-main > small {
  font-size: var(--ppob-type-xs) !important;
  line-height: 1.35 !important;
}

html body.ppob-storefront #ppobBalanceValue {
  font-size: var(--ppob-type-2xl) !important;
  line-height: 1.1 !important;
}

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

body.ppob-storefront .ppob-native-alert strong {
  font-size: var(--ppob-type-sm) !important;
  line-height: 1.35 !important;
}

body.ppob-storefront .ppob-native-alert small,
body.ppob-storefront .ppob-native-alert > a {
  font-size: var(--ppob-type-xs) !important;
  line-height: 1.4 !important;
}

body.ppob-storefront .ppob-native-search input {
  padding: 0 !important;
  font-size: var(--ppob-type-base) !important;
}

body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button {
  min-height: 82px !important;
}

body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button small {
  max-width: 76px !important;
  min-height: 28px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  text-wrap: balance;
}

body.ppob-storefront :is(.ppob-catalog-heading, .ppob-section-head) h2 {
  font-size: var(--ppob-type-lg) !important;
}

body.ppob-storefront :is(.ppob-catalog-heading, .ppob-section-head) a {
  font-size: var(--ppob-type-sm) !important;
}

body.ppob-storefront .ppob-product-grid .ppob-product-card h3,
body.ppob-storefront .ppob-product-card h3 {
  font-size: var(--ppob-type-base) !important;
  line-height: 1.35 !important;
}

body.ppob-storefront .ppob-product-grid .ppob-product-card p,
body.ppob-storefront .ppob-product-card p {
  font-size: var(--ppob-type-xs) !important;
  line-height: 1.45 !important;
}

/* Bottom navigation uses one shared size on every PPOB page. */
html body.ppob-storefront > .ppob-native-bottom-nav a small {
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

/* Product selection */
body.ppob-product-page .ppob-product-input-card h1 {
  margin: 0 !important;
  font-size: var(--ppob-type-xl) !important;
}

body.ppob-product-page .ppob-product-target-box > span,
body.ppob-product-page .ppob-product-target-hint,
body.ppob-product-page .ppob-product-tools button span {
  font-size: var(--ppob-type-sm) !important;
  line-height: 1.4 !important;
}

body.ppob-product-page .ppob-product-list-section > h2,
body.ppob-product-page .ppob-product-sheet-card > h2 {
  font-size: var(--ppob-type-lg) !important;
}

body.ppob-product-page .ppob-product-nominal-grid :is(strong, h3) {
  font-size: var(--ppob-type-base) !important;
  line-height: 1.35 !important;
}

body.ppob-product-page .ppob-product-nominal-grid :is(span, small, p) {
  font-size: var(--ppob-type-xs) !important;
  line-height: 1.4 !important;
}

body.ppob-product-page .ppob-product-sheet-card :is(dt, dd, p),
body.ppob-product-page .ppob-product-sheet-action small {
  font-size: var(--ppob-type-sm) !important;
}

body.ppob-product-page .ppob-product-sheet-action strong {
  font-size: var(--ppob-type-md) !important;
}

/* Checkout and status */
body.ppob-dedicated-checkout-page .ppob-panel-head h3,
body.checkout-status-page .ppob-panel-head h3,
body.ppob-dedicated-checkout-page .checkout-selected-product-card h3,
body.checkout-status-page .checkout-status-detail-card h2 {
  font-size: var(--ppob-type-lg) !important;
}

body.ppob-dedicated-checkout-page .checkout-form-section-head h4,
body.ppob-dedicated-checkout-page .checkout-payment-focus h4 {
  font-size: var(--ppob-type-md) !important;
}

body.ppob-dedicated-checkout-page :is(.checkout-form-section-head p, .checkout-payment-note, .checkout-inline-state),
body.checkout-status-page :is(.checkout-status-copy, .checkout-status-note) {
  font-size: var(--ppob-type-sm) !important;
  line-height: 1.5 !important;
}

body.ppob-dedicated-checkout-page .checkout-selected-product-price strong,
body.ppob-dedicated-checkout-page .checkout-total-card strong,
body.checkout-status-page .checkout-total-card strong {
  font-size: var(--ppob-type-lg) !important;
}

body.ppob-dedicated-checkout-page .payment-method-option,
body.ppob-dedicated-checkout-page .checkout-action-row > *,
body.checkout-status-page .checkout-action-row > * {
  min-width: 0 !important;
}

/* Saldo, transaction history and notes */
body.saldo-page :is(.saldo-header h1, .saldo-sub-header h1),
body.riwayat-page :is(.riwayat-header h1, .riwayat-detail-header h1),
body.catatan-page .catatan-header h1 {
  margin: 0 !important;
  font-size: var(--ppob-type-xl) !important;
}

body.saldo-page :is(.saldo-card h2, .saldo-receipt h2),
body.riwayat-page :is(.riwayat-receipt h2, .riwayat-empty h2),
body.catatan-page :is(.catatan-user-card h2, .catatan-empty h2, .catatan-modal-card h2) {
  font-size: var(--ppob-type-lg) !important;
}

body.saldo-page :is(.saldo-history-list, .saldo-receipt, .saldo-payment-card, .saldo-transfer-sheet),
body.riwayat-page :is(.riwayat-list, .riwayat-receipt),
body.catatan-page :is(.catatan-user-card, .catatan-info-box, .catatan-customer-list, .catatan-debt-list) {
  font-size: var(--ppob-type-base) !important;
}

body.riwayat-page .riwayat-tabs button,
body.saldo-page .saldo-tabs button,
body.catatan-page .catatan-section-head :is(span, button) {
  font-size: var(--ppob-type-sm) !important;
}

body.saldo-page :is(.saldo-card-actions button, .saldo-transfer-sheet button),
body.catatan-page :is(.catatan-primary-btn, .catatan-secondary-btn, .catatan-save-btn),
body.riwayat-page .riwayat-detail-actions a {
  font-size: var(--ppob-type-base) !important;
}

/* Prevent text and action collisions in narrow cards. */
body.ppob-storefront :is(.ppob-product-card, .checkout-selected-product-card, .summary-card,
  .checkout-status-detail-card, .saldo-card, .saldo-payment-card, .saldo-receipt,
  .riwayat-receipt, .catatan-user-card, .catatan-info-box) {
  overflow: hidden !important;
}

body.ppob-storefront :is(.checkout-selected-product-price, .checkout-total-card,
  .saldo-receipt dl > div, .riwayat-receipt dl > div, .ppob-product-sheet-card dl > div) > * {
  min-width: 0 !important;
}

body.ppob-storefront :is(dd, .checkout-payment-number, #detailPaymentNumber, #detailPaymentAmount,
  #detailId, #detailTarget, #sheetTarget, #sheetProduct) {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Breakpoint refinements */
@media (max-width: 359px) {
  body.ppob-storefront {
    font-size: 13px !important;
  }

  body.ppob-storefront h1,
  body.saldo-page :is(.saldo-header h1, .saldo-sub-header h1),
  body.riwayat-page .riwayat-header h1,
  body.catatan-page .catatan-header h1 {
    font-size: 20px !important;
  }

  body.ppob-storefront .ppob-native-brand strong {
    font-size: 22px !important;
  }

  html body.ppob-storefront #ppobBalanceValue {
    font-size: 25px !important;
  }

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

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

  body.ppob-storefront .btn,
  body.ppob-storefront button:not([aria-label]) {
    font-size: 13px !important;
  }
}

@media (min-width: 600px) and (max-width: 767px) {
  body.ppob-storefront .ppob-native-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

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

@media (min-width: 1024px) {
  body.ppob-storefront {
    font-size: var(--ppob-type-base) !important;
  }

  html body.ppob-storefront > .ppob-native-bottom-nav a small {
    font-size: 10px !important;
  }

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

/* ========================================================================== 
   High-specificity responsive shell corrections — v2
   Legacy PPOB layers contain phone-frame rules with !important declarations.
   These rules are deliberately last and more specific.
   ========================================================================== */
html body.ppob-storefront.is-ppob-guest > section.ppob-native-app-home.ppob-native-app-home {
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  margin-inline: auto !important;
}

html body.ppob-storefront.is-ppob-guest > section.ppob-native-app-home.ppob-native-app-home > .ppob-native-top {
  width: 100% !important;
  max-width: none !important;
}

body.ppob-storefront .ppob-banner-slider:has(.ppob-banner-track:empty) {
  display: none !important;
}

body.ppob-storefront .ppob-product-grid .ppob-product-card.ppob-product-card {
  width: 100% !important;
  min-height: 104px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: left !important;
  overflow: hidden !important;
}

body.ppob-storefront .ppob-product-grid .ppob-product-card-copy {
  min-width: 0 !important;
  display: block !important;
}

body.ppob-storefront .ppob-product-grid .ppob-product-card-copy h3,
body.ppob-storefront .ppob-product-grid .ppob-product-card-copy p {
  max-width: 100% !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
}

body.ppob-storefront .ppob-product-grid .ppob-product-card-copy h3 {
  -webkit-line-clamp: 2 !important;
}

body.ppob-storefront .ppob-product-grid .ppob-product-card-copy p {
  margin: 7px 0 0 !important;
  -webkit-line-clamp: 1 !important;
}

body.ppob-storefront .ppob-product-grid .ppob-product-card-visual {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex: 0 0 44px !important;
}

@media (min-width: 600px) {
  html body.ppob-storefront.is-ppob-guest > section.ppob-native-app-home.ppob-native-app-home {
    width: min(100%, 900px) !important;
    max-width: 900px !important;
  }

  html body.ppob-storefront.is-ppob-guest > section.ppob-native-app-home.ppob-native-app-home > .ppob-native-top {
    padding-inline: 24px !important;
  }

  html body.ppob-storefront.is-ppob-guest .ppob-native-brand,
  html body.ppob-storefront.is-ppob-guest .ppob-native-wallet {
    width: min(100%, 840px) !important;
    max-width: 840px !important;
  }

  html body.ppob-storefront.is-ppob-guest .ppob-native-sheet.ppob-native-sheet {
    width: min(calc(100% - 48px), 840px) !important;
    max-width: 840px !important;
    margin-inline: auto !important;
  }
}

@media (min-width: 1024px) {
  html body.ppob-storefront.is-ppob-guest > section.ppob-native-app-home.ppob-native-app-home {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  html body.ppob-storefront.is-ppob-guest > section.ppob-native-app-home.ppob-native-app-home > .ppob-native-top {
    width: 100% !important;
    max-width: none !important;
    padding: 28px 32px 32px !important;
    border-radius: 0 0 34px 34px !important;
  }

  html body.ppob-storefront.is-ppob-guest .ppob-native-brand,
  html body.ppob-storefront.is-ppob-guest .ppob-native-wallet {
    width: min(100%, var(--ppob-r-content)) !important;
    max-width: var(--ppob-r-content) !important;
  }

  html body.ppob-storefront.is-ppob-guest .ppob-native-wallet.ppob-native-wallet {
    grid-template-columns: minmax(260px, 1fr) auto minmax(420px, .9fr) !important;
    align-items: center !important;
  }

  html body.ppob-storefront.is-ppob-guest .ppob-native-wallet .ppob-native-actions {
    grid-column: auto !important;
  }

  html body.ppob-storefront.is-ppob-guest .ppob-native-sheet.ppob-native-sheet {
    width: min(calc(100% - 64px), var(--ppob-r-content)) !important;
    max-width: var(--ppob-r-content) !important;
    margin: -14px auto 0 !important;
    padding: 20px 22px !important;
    grid-template-columns: minmax(280px, .8fr) minmax(360px, 1.2fr) !important;
    align-items: start !important;
  }

  html body.ppob-storefront:not(.ppob-dedicated-checkout-page):not(.checkout-status-page) > nav.ppob-native-bottom-nav.ppob-native-bottom-nav {
    inset: auto !important;
    top: 50% !important;
    left: 18px !important;
    right: auto !important;
    bottom: auto !important;
    width: 72px !important;
    max-width: 72px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 36px) !important;
    padding: 10px 7px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(5, minmax(58px, auto)) !important;
    align-content: center !important;
    gap: 6px !important;
    overflow: visible !important;
    border: 1px solid var(--ppob-r-border) !important;
    border-radius: 22px !important;
    transform: translateY(-50%) !important;
  }

  html body.ppob-storefront:not(.ppob-dedicated-checkout-page):not(.checkout-status-page) > nav.ppob-native-bottom-nav.ppob-native-bottom-nav > a {
    width: 100% !important;
    height: auto !important;
    min-height: 58px !important;
    padding: 6px 2px !important;
    grid-template-rows: 25px auto !important;
  }

  body.ppob-storefront .ppob-store-products > .container {
    width: min(100% - 64px, var(--ppob-r-content)) !important;
  }
}

@media (min-width: 1024px) {
  html body.ppob-storefront.is-ppob-guest > section.ppob-native-app-home.ppob-native-app-home {
    height: auto !important;
    min-height: 0 !important;
  }

  html body.ppob-storefront.is-ppob-guest > section.ppob-store-products.ppob-store-products {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 28px 0 40px !important;
    overflow: visible !important;
  }

  html body.ppob-storefront.is-ppob-guest > section.ppob-store-products.ppob-store-products > .container.container {
    width: min(calc(100% - 64px), var(--ppob-r-content)) !important;
    max-width: var(--ppob-r-content) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  html body.ppob-storefront.is-ppob-guest .ppob-catalog-status.ppob-catalog-status {
    width: 100% !important;
    max-width: none !important;
  }

  html body.ppob-storefront.is-ppob-guest .ppob-product-grid.ppob-product-grid {
    width: 100% !important;
    max-width: none !important;
    padding-top: 0 !important;
  }
}

/* ========================================================================== 
   Cross-page shell and typography hardening — v2
   ========================================================================== */
html body.ppob-storefront.ppob-storefront {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

html body.ppob-storefront.ppob-product-page > main.ppob-product-shell.ppob-product-shell {
  width: min(100%, var(--ppob-r-reading)) !important;
  max-width: var(--ppob-r-reading) !important;
  margin-inline: auto !important;
  overflow-x: clip !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-header.ppob-product-header,
html body.ppob-storefront.catatan-page .catatan-header.catatan-header {
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  transform: none !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-input-card h1,
html body.ppob-storefront.saldo-page :is(.saldo-header h1, .saldo-sub-header h1),
html body.ppob-storefront.riwayat-page :is(.riwayat-header h1, .riwayat-detail-header h1),
html body.ppob-storefront.catatan-page .catatan-header h1 {
  margin: 0 !important;
  font-size: var(--ppob-type-xl) !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-target-box input,
html body.ppob-storefront.ppob-product-page .ppob-product-search-row input,
html body.ppob-storefront.saldo-page :is(input, select, textarea),
html body.ppob-storefront.riwayat-page :is(input, select, textarea),
html body.ppob-storefront.catatan-page :is(input, select, textarea) {
  font-size: 16px !important;
  line-height: 1.35 !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-tools button span,
html body.ppob-storefront.catatan-page :is(.catatan-primary-btn, .catatan-secondary-btn, .catatan-save-btn),
html body.ppob-storefront.saldo-page :is(.saldo-card-actions button, .saldo-transfer-sheet button),
html body.ppob-storefront.riwayat-page .riwayat-tabs button {
  font-size: var(--ppob-type-base) !important;
  line-height: 1.25 !important;
}

html body.ppob-storefront.riwayat-page .riwayat-tabs.riwayat-tabs {
  width: calc(100% - 32px) !important;
  max-width: 760px !important;
  margin: 14px auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  overflow: visible !important;
}

html body.ppob-storefront.riwayat-page .riwayat-tabs.riwayat-tabs > button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 9px 8px !important;
  white-space: normal !important;
  text-align: center !important;
}

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

@media (max-width: 1023px) {
  html body.ppob-storefront.ppob-product-page > nav.ppob-native-bottom-nav.ppob-native-bottom-nav,
  html body.ppob-storefront.saldo-page > nav.ppob-native-bottom-nav.ppob-native-bottom-nav,
  html body.ppob-storefront.riwayat-page > nav.ppob-native-bottom-nav.ppob-native-bottom-nav,
  html body.ppob-storefront.catatan-page > nav.ppob-native-bottom-nav.ppob-native-bottom-nav,
  html body.ppob-storefront.is-ppob-guest > nav.ppob-native-bottom-nav.ppob-native-bottom-nav {
    inset: auto 0 0 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: calc(var(--ppob-r-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 7px max(8px, env(safe-area-inset-right, 0px)) calc(7px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)) !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    gap: 3px !important;
    border-radius: 20px 20px 0 0 !important;
    transform: none !important;
  }

  html body.ppob-storefront.ppob-product-page > nav.ppob-native-bottom-nav a small,
  html body.ppob-storefront.saldo-page > nav.ppob-native-bottom-nav a small,
  html body.ppob-storefront.riwayat-page > nav.ppob-native-bottom-nav a small,
  html body.ppob-storefront.catatan-page > nav.ppob-native-bottom-nav a small,
  html body.ppob-storefront.is-ppob-guest > nav.ppob-native-bottom-nav a small {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }
}

@media (min-width: 600px) and (max-width: 1023px) {
  html body.ppob-storefront.ppob-product-page > main.ppob-product-shell.ppob-product-shell,
  html body.ppob-storefront.saldo-page > main.saldo-shell.saldo-shell,
  html body.ppob-storefront.riwayat-page > main.riwayat-shell.riwayat-shell,
  html body.ppob-storefront.catatan-page > main.catatan-shell.catatan-shell {
    width: min(calc(100% - 40px), var(--ppob-r-reading)) !important;
    max-width: var(--ppob-r-reading) !important;
    margin: 20px auto !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    box-shadow: var(--ppob-r-shadow) !important;
  }
}

@media (max-width: 359px) {
  html body.ppob-storefront.ppob-storefront {
    font-size: var(--ppob-type-base) !important;
  }

  html body.ppob-storefront.ppob-product-page .ppob-product-input-card h1,
  html body.ppob-storefront.saldo-page :is(.saldo-header h1, .saldo-sub-header h1),
  html body.ppob-storefront.riwayat-page .riwayat-header h1,
  html body.ppob-storefront.catatan-page .catatan-header h1 {
    font-size: var(--ppob-type-xl) !important;
  }

  html body.ppob-storefront :is(.btn, button:not([aria-label])) {
    font-size: var(--ppob-type-base) !important;
  }

  html body.ppob-storefront.ppob-product-page > nav.ppob-native-bottom-nav a small,
  html body.ppob-storefront.saldo-page > nav.ppob-native-bottom-nav a small,
  html body.ppob-storefront.riwayat-page > nav.ppob-native-bottom-nav a small,
  html body.ppob-storefront.catatan-page > nav.ppob-native-bottom-nav a small,
  html body.ppob-storefront.is-ppob-guest > nav.ppob-native-bottom-nav a small {
    font-size: 10px !important;
  }
}

/* Transaction status filters: override legacy intrinsic-column layout. */
html body.ppob-storefront.riwayat-page main.riwayat-shell.riwayat-shell section.riwayat-list-view nav.riwayat-tabs.riwayat-tabs[aria-label="Filter status transaksi"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  grid-auto-rows: minmax(44px, auto) !important;
  align-items: stretch !important;
}

@media (min-width: 600px) {
  html body.ppob-storefront.riwayat-page main.riwayat-shell.riwayat-shell section.riwayat-list-view nav.riwayat-tabs.riwayat-tabs[aria-label="Filter status transaksi"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  html body.ppob-storefront.saldo-page > main.saldo-shell.saldo-shell,
  html body.ppob-storefront.riwayat-page > main.riwayat-shell.riwayat-shell,
  html body.ppob-storefront.catatan-page > main.catatan-shell.catatan-shell {
    width: min(calc(100% - 64px), 760px) !important;
    max-width: 760px !important;
    min-height: calc(100dvh - 48px) !important;
    height: auto !important;
    margin: 24px auto !important;
    padding-bottom: 32px !important;
    border: 1px solid var(--ppob-r-border) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow: var(--ppob-r-shadow) !important;
  }
}

/* ========================================================================== 
   Unified PPOB menu presentation — v3
   Final visual layer for Home, Product, Balance, Transactions, Notes,
   Checkout and Status. It intentionally overrides legacy phone-only layouts.
   ========================================================================== */
:root {
  --ppob-u-indigo: #5848dd;
  --ppob-u-indigo-dark: #4334bd;
  --ppob-u-cyan: #19acd0;
  --ppob-u-orange: #ff6b2c;
  --ppob-u-orange-dark: #e95418;
  --ppob-u-page: #f3f6fb;
  --ppob-u-panel: #ffffff;
  --ppob-u-line: #e3e8f1;
  --ppob-u-ink: #172033;
  --ppob-u-subtle: #667085;
  --ppob-u-soft: #f8faff;
  --ppob-u-header-gradient: linear-gradient(135deg, #5848dd 0%, #466be8 48%, #1db2cf 100%);
  --ppob-u-shadow: 0 16px 44px rgba(28, 39, 73, .10);
  --ppob-u-shadow-soft: 0 8px 26px rgba(28, 39, 73, .07);
  --ppob-u-desktop-width: 1080px;
}

html body.ppob-storefront.ppob-storefront {
  background:
    radial-gradient(circle at 88% 6%, rgba(29, 178, 207, .11), transparent 28rem),
    radial-gradient(circle at 8% 0%, rgba(88, 72, 221, .10), transparent 26rem),
    var(--ppob-u-page) !important;
  color: var(--ppob-u-ink) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

html body.ppob-storefront :is(h1, h2, h3, h4, p) {
  overflow-wrap: anywhere;
}

html body.ppob-storefront :is(h1, h2, h3) {
  color: var(--ppob-u-ink) !important;
  letter-spacing: -.025em !important;
}

html body.ppob-storefront :is(button, .btn, a[role="button"]) {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

@media (hover: hover) {
  html body.ppob-storefront :is(button, .btn, a[role="button"]):not(:disabled):hover {
    transform: translateY(-1px) !important;
  }
}

html body.ppob-storefront :is(button, .btn):disabled {
  cursor: wait !important;
  opacity: .66 !important;
  transform: none !important;
}

/* One shared visual language for cards, forms and action areas. */
html body.ppob-storefront :is(
  .ppob-panel,
  .ppob-product-input-card,
  .ppob-product-list-section,
  .ppob-catalog-status,
  .saldo-card,
  .saldo-deposit-form,
  .saldo-deposit-history,
  .saldo-receipt,
  .saldo-payment-card,
  .riwayat-receipt,
  .catatan-card,
  .catatan-user-card,
  .catatan-info-box,
  .checkout-selected-product-card,
  .checkout-form-section,
  .checkout-payment-focus,
  .checkout-qris-panel,
  .checkout-status-card,
  .checkout-status-detail-card,
  .checkout-status-payment-card
) {
  border: 1px solid var(--ppob-u-line) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: var(--ppob-u-shadow-soft) !important;
}

html body.ppob-storefront :is(
  .ppob-product-target-box,
  .ppob-product-search-row,
  .saldo-field,
  .saldo-transfer-sheet label,
  .checkout-form-section,
  .checkout-status-lookup-grid,
  .catatan-line-field
) :is(input, select, textarea),
html body.ppob-storefront :is(input.input, select.input, textarea.input) {
  min-height: 48px !important;
  border: 1px solid #dbe2ee !important;
  border-radius: 13px !important;
  background: #f9fbff !important;
  color: var(--ppob-u-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85) !important;
}

html body.ppob-storefront :is(input, select, textarea):focus {
  border-color: rgba(88, 72, 221, .58) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(88, 72, 221, .10) !important;
}

/* Shared gradient page headers. */
html body.ppob-storefront :is(
  .ppob-product-header,
  .saldo-header,
  .saldo-sub-header,
  .riwayat-header,
  .riwayat-detail-header,
  .catatan-header
) {
  min-height: 82px !important;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 18px 24px !important;
  border: 0 !important;
  border-radius: 0 0 26px 26px !important;
  background: var(--ppob-u-header-gradient) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(69, 73, 197, .18) !important;
}

html body.ppob-storefront :is(
  .saldo-header h1,
  .saldo-sub-header h1,
  .riwayat-header h1,
  .riwayat-detail-header h1,
  .catatan-header h1
) {
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

html body.ppob-storefront :is(
  .ppob-product-back,
  .saldo-header-icon,
  .saldo-back-button,
  .saldo-close-button,
  .riwayat-search-toggle,
  .riwayat-back,
  .catatan-back
) {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, .30) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) !important;
}

html body.ppob-storefront :is(
  .ppob-product-back,
  .saldo-header-icon,
  .saldo-back-button,
  .riwayat-search-toggle,
  .riwayat-back,
  .catatan-back
) svg {
  width: 21px !important;
  height: 21px !important;
  fill: currentColor !important;
}

/* Shared app navigation: compact dock on phones, readable rail on desktop. */
html body.ppob-storefront > nav.ppob-native-bottom-nav.ppob-native-bottom-nav {
  border-color: rgba(216, 224, 237, .92) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 -12px 34px rgba(30, 42, 77, .12) !important;
}

html body.ppob-storefront > nav.ppob-native-bottom-nav.ppob-native-bottom-nav > a {
  color: #7a859a !important;
}

html body.ppob-storefront > nav.ppob-native-bottom-nav.ppob-native-bottom-nav > a.is-active {
  background: linear-gradient(145deg, #fff2ea, #fff8f3) !important;
  color: var(--ppob-u-orange) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 44, .11) !important;
}

html body.ppob-storefront > nav.ppob-native-bottom-nav.ppob-native-bottom-nav > a small {
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* Home storefront refinements. */
html body.ppob-storefront.is-ppob-guest .ppob-native-top {
  background: var(--ppob-u-header-gradient) !important;
}

html body.ppob-storefront.is-ppob-guest .ppob-native-brand strong {
  color: #fff !important;
  font-size: 18px !important;
  letter-spacing: -.02em !important;
}

html body.ppob-storefront.is-ppob-guest .ppob-native-wallet {
  border: 1px solid rgba(255, 255, 255, .28) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .10)) !important;
  box-shadow: 0 16px 38px rgba(26, 33, 94, .18) !important;
  backdrop-filter: blur(16px) !important;
}

html body.ppob-storefront.is-ppob-guest .ppob-native-sheet {
  border: 1px solid var(--ppob-u-line) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: var(--ppob-u-shadow) !important;
}

html body.ppob-storefront.is-ppob-guest .ppob-native-alert {
  border: 1px solid #f7d7c5 !important;
  border-radius: 15px !important;
  background: #fff8f3 !important;
}

html body.ppob-storefront.is-ppob-guest .ppob-native-search {
  min-height: 48px !important;
  border: 1px solid #dfe5ef !important;
  border-radius: 15px !important;
  background: #f8faff !important;
}

html body.ppob-storefront.is-ppob-guest .ppob-native-menu-item {
  min-height: 78px !important;
  padding: 8px 4px !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
}

html body.ppob-storefront.is-ppob-guest .ppob-native-menu-item:is(:hover, :focus-visible) {
  border-color: rgba(88, 72, 221, .14) !important;
  background: #f8f7ff !important;
}

html body.ppob-storefront.is-ppob-guest .ppob-native-menu-item small {
  color: #4d586c !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

html body.ppob-storefront.is-ppob-guest .ppob-store-products {
  padding-top: 28px !important;
}

html body.ppob-storefront.is-ppob-guest .ppob-product-grid {
  align-items: stretch !important;
}

html body.ppob-storefront.is-ppob-guest .ppob-product-card {
  min-height: 138px !important;
  border: 1px solid var(--ppob-u-line) !important;
  border-radius: 17px !important;
  background: #fff !important;
  box-shadow: var(--ppob-u-shadow-soft) !important;
}

/* Product selection page. */
html body.ppob-storefront.ppob-product-page > main.ppob-product-shell {
  background: transparent !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-header {
  min-height: 112px !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-input-card {
  position: relative !important;
  z-index: 2 !important;
  margin: -46px 14px 16px !important;
  padding: 18px !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-title-row h1 {
  font-size: 20px !important;
  font-weight: 800 !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-type-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 13px !important;
  background: #fff1e9 !important;
  color: var(--ppob-u-orange) !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-tools {
  gap: 8px !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-tools > button {
  min-height: 50px !important;
  border: 1px solid var(--ppob-u-line) !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: #3c4658 !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-list-section {
  margin: 0 14px 20px !important;
  padding: 18px !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-list-section > h2 {
  font-size: 18px !important;
  font-weight: 800 !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-nominal-grid > :is(button, article, .ppob-product-nominal-card) {
  min-height: 116px !important;
  border: 1px solid var(--ppob-u-line) !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: 0 5px 16px rgba(28, 39, 73, .055) !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-sheet {
  border-radius: 24px 24px 0 0 !important;
  background: #fff !important;
  box-shadow: 0 -18px 50px rgba(21, 31, 60, .18) !important;
}

/* Balance menu. */
html body.ppob-storefront.saldo-page > main.saldo-shell {
  background: transparent !important;
}

html body.ppob-storefront.saldo-page .saldo-card {
  position: relative !important;
  z-index: 2 !important;
  margin: -18px 14px 16px !important;
  padding: 18px !important;
}

html body.ppob-storefront.saldo-page .saldo-balance-row strong {
  font-size: 26px !important;
  line-height: 1.2 !important;
}

html body.ppob-storefront.saldo-page .saldo-card-actions {
  gap: 8px !important;
}

html body.ppob-storefront.saldo-page .saldo-card-actions button {
  min-height: 46px !important;
  border: 1px solid #ffd9c6 !important;
  border-radius: 13px !important;
  background: #fff8f3 !important;
  color: var(--ppob-u-orange-dark) !important;
  font-weight: 700 !important;
}

html body.ppob-storefront.saldo-page .saldo-tabs,
html body.ppob-storefront.riwayat-page .riwayat-tabs {
  padding: 5px !important;
  border: 1px solid var(--ppob-u-line) !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: 0 6px 18px rgba(28, 39, 73, .05) !important;
}

html body.ppob-storefront.saldo-page .saldo-tabs > button,
html body.ppob-storefront.riwayat-page .riwayat-tabs > button {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: #687286 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body.ppob-storefront.saldo-page .saldo-tabs > button.is-active,
html body.ppob-storefront.riwayat-page .riwayat-tabs > button.is-active {
  background: #f1efff !important;
  color: var(--ppob-u-indigo) !important;
  box-shadow: inset 0 0 0 1px rgba(88, 72, 221, .10) !important;
}

html body.ppob-storefront.saldo-page .saldo-history-list,
html body.ppob-storefront.riwayat-page .riwayat-list,
html body.ppob-storefront.riwayat-page #riwayatList {
  padding-inline: 14px !important;
}

html body.ppob-storefront.saldo-page .saldo-transfer-sheet {
  border-radius: 24px 24px 0 0 !important;
  box-shadow: 0 -18px 52px rgba(21, 31, 60, .22) !important;
}

html body.ppob-storefront.saldo-page .saldo-transfer-sheet > button {
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--ppob-u-orange) !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* Transactions menu. */
html body.ppob-storefront.riwayat-page > main.riwayat-shell {
  background: transparent !important;
}

html body.ppob-storefront.riwayat-page .riwayat-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}

html body.ppob-storefront.riwayat-page .riwayat-header-actions {
  display: flex !important;
  gap: 8px !important;
}

html body.ppob-storefront.riwayat-page .riwayat-search-panel {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

html body.ppob-storefront.riwayat-page .riwayat-search-panel input {
  min-height: 46px !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  background: rgba(255, 255, 255, .96) !important;
}

html body.ppob-storefront.riwayat-page .riwayat-tabs {
  position: relative !important;
  z-index: 2 !important;
  margin-top: -14px !important;
}

html body.ppob-storefront.riwayat-page :is(.riwayat-item, .riwayat-transaction-card) {
  margin-bottom: 10px !important;
  border: 1px solid var(--ppob-u-line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: var(--ppob-u-shadow-soft) !important;
}

/* Customer notes menu. */
html body.ppob-storefront.catatan-page > main.catatan-shell {
  background: transparent !important;
}

html body.ppob-storefront.catatan-page .catatan-create-panel {
  position: relative !important;
  z-index: 2 !important;
  margin: -18px 14px 18px !important;
  padding: 10px !important;
}

html body.ppob-storefront.catatan-page :is(.catatan-primary-btn, .catatan-save-btn) {
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #ff7a38, #ff5f23) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 24px rgba(255, 103, 42, .20) !important;
}

html body.ppob-storefront.catatan-page .catatan-secondary-btn {
  min-height: 44px !important;
  border: 1px solid var(--ppob-u-line) !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: #4f596d !important;
}

html body.ppob-storefront.catatan-page .catatan-customer-section,
html body.ppob-storefront.catatan-page .catatan-detail {
  padding-inline: 14px !important;
}

html body.ppob-storefront.catatan-page .catatan-modal-card {
  width: min(calc(100% - 28px), 500px) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow-y: auto !important;
  border: 1px solid var(--ppob-u-line) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(20, 29, 56, .22) !important;
}

/* Checkout and status. */
html body.ppob-storefront :is(.ppob-store-nav, .public-navbar-standard) {
  border-bottom: 1px solid rgba(218, 225, 237, .92) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 8px 24px rgba(28, 39, 73, .06) !important;
  backdrop-filter: blur(16px) !important;
}

html body.ppob-storefront :is(.checkout-section, .checkout-status-section) {
  padding-top: 28px !important;
  padding-bottom: 34px !important;
}

html body.ppob-storefront .ppob-panel-head {
  padding-bottom: 16px !important;
  border-bottom: 1px solid #edf0f5 !important;
}

html body.ppob-storefront .ppob-panel-head h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
}

html body.ppob-storefront .checkout-timer-box {
  border: 1px solid #eadfff !important;
  border-radius: 14px !important;
  background: #f8f5ff !important;
}

html body.ppob-storefront .checkout-selected-product-price,
html body.ppob-storefront .checkout-summary-total {
  border-radius: 14px !important;
  background: linear-gradient(135deg, #fff5ef, #fff9f5) !important;
}

html body.ppob-storefront .checkout-action-row .btn,
html body.ppob-storefront #checkoutSubmitButton,
html body.ppob-storefront #checkoutStatusLookupButton {
  min-height: 48px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #ff7a38, #ff5f23) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 24px rgba(255, 103, 42, .20) !important;
}

/* Phones. */
@media (max-width: 599px) {
  html body.ppob-storefront.ppob-storefront {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body.ppob-storefront .container {
    width: min(calc(100% - 24px), var(--ppob-r-content)) !important;
  }

  html body.ppob-storefront > nav.ppob-native-bottom-nav.ppob-native-bottom-nav {
    padding-inline: max(6px, env(safe-area-inset-left, 0px)) !important;
    gap: 2px !important;
    border-radius: 18px 18px 0 0 !important;
  }

  html body.ppob-storefront > nav.ppob-native-bottom-nav.ppob-native-bottom-nav > a {
    min-height: 56px !important;
    border-radius: 12px !important;
  }

  html body.ppob-storefront.is-ppob-guest .ppob-native-sheet {
    margin-inline: 12px !important;
  }

  html body.ppob-storefront.is-ppob-guest .ppob-native-menu {
    gap: 8px 4px !important;
  }

  html body.ppob-storefront.is-ppob-guest .ppob-native-menu-item {
    min-height: 72px !important;
  }

  html body.ppob-storefront .ppob-layout {
    gap: 14px !important;
  }

  html body.ppob-storefront .ppob-panel {
    padding: 16px !important;
  }
}

/* Tablets and desktops get real workspace layouts instead of a centered phone frame. */
@media (min-width: 768px) {
  html body.ppob-storefront.ppob-product-page > main.ppob-product-shell,
  html body.ppob-storefront.saldo-page > main.saldo-shell,
  html body.ppob-storefront.riwayat-page > main.riwayat-shell,
  html body.ppob-storefront.catatan-page > main.catatan-shell {
    width: min(calc(100% - 40px), var(--ppob-u-desktop-width)) !important;
    max-width: var(--ppob-u-desktop-width) !important;
    min-height: calc(100dvh - 40px) !important;
    margin: 20px auto !important;
    border: 1px solid rgba(221, 227, 238, .92) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background: rgba(249, 251, 255, .82) !important;
    box-shadow: var(--ppob-u-shadow) !important;
  }

  html body.ppob-storefront :is(
    .ppob-product-header,
    .saldo-header,
    .saldo-sub-header,
    .riwayat-header,
    .riwayat-detail-header,
    .catatan-header
  ) {
    border-radius: 0 0 28px 28px !important;
  }

  html body.ppob-storefront.ppob-product-page .ppob-product-input-card,
  html body.ppob-storefront.saldo-page .saldo-card,
  html body.ppob-storefront.catatan-page .catatan-create-panel {
    margin-inline: 20px !important;
  }

  html body.ppob-storefront.ppob-product-page .ppob-product-list-section,
  html body.ppob-storefront.catatan-page :is(.catatan-customer-section, .catatan-detail) {
    margin-inline: 20px !important;
    padding-inline: 0 !important;
  }
}

@media (min-width: 1024px) {
  html body.ppob-storefront.ppob-storefront {
    padding-left: 116px !important;
    padding-bottom: 36px !important;
  }

  html body.ppob-storefront > nav.ppob-native-bottom-nav.ppob-native-bottom-nav {
    display: grid !important;
    top: 50% !important;
    left: 20px !important;
    right: auto !important;
    bottom: auto !important;
    width: 82px !important;
    max-width: 82px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - 40px) !important;
    padding: 10px 8px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(5, minmax(62px, auto)) !important;
    gap: 7px !important;
    border: 1px solid var(--ppob-u-line) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: var(--ppob-u-shadow) !important;
    transform: translateY(-50%) !important;
  }

  html body.ppob-storefront > nav.ppob-native-bottom-nav.ppob-native-bottom-nav > a {
    width: 100% !important;
    min-height: 62px !important;
    padding: 7px 3px !important;
    grid-template-rows: 26px auto !important;
    border-radius: 15px !important;
  }

  html body.ppob-storefront > nav.ppob-native-bottom-nav.ppob-native-bottom-nav > a small {
    font-size: 10px !important;
    white-space: normal !important;
  }

  /* Product page: input stays visible while the catalog uses the wide column. */
  html body.ppob-storefront.ppob-product-page > main.ppob-product-shell {
    display: grid !important;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
    grid-template-rows: auto auto 1fr !important;
    align-items: start !important;
    column-gap: 22px !important;
    row-gap: 18px !important;
    padding-bottom: 24px !important;
  }

  html body.ppob-storefront.ppob-product-page .ppob-product-header {
    grid-column: 1 / -1 !important;
    min-height: 100px !important;
  }

  html body.ppob-storefront.ppob-product-page .ppob-product-input-card {
    grid-column: 1 !important;
    grid-row: 2 / span 2 !important;
    position: sticky !important;
    top: 20px !important;
    margin: -42px 0 0 22px !important;
  }

  html body.ppob-storefront.ppob-product-page .ppob-catalog-status,
  html body.ppob-storefront.ppob-product-page .ppob-product-list-section,
  html body.ppob-storefront.ppob-product-page .ppob-product-empty {
    grid-column: 2 !important;
    width: auto !important;
    margin: 0 22px 0 0 !important;
  }

  html body.ppob-storefront.ppob-product-page .ppob-product-list-section {
    padding: 20px !important;
  }

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

  /* Balance page: account summary left, history right. */
  html body.ppob-storefront.saldo-page .saldo-home-view {
    display: grid !important;
    grid-template-columns: minmax(300px, 350px) minmax(0, 1fr) !important;
    grid-template-areas:
      "header header"
      "status status"
      "balance tabs"
      "balance history" !important;
    align-items: start !important;
    column-gap: 22px !important;
    row-gap: 14px !important;
    padding-bottom: 26px !important;
  }

  html body.ppob-storefront.saldo-page .saldo-header { grid-area: header !important; }
  html body.ppob-storefront.saldo-page #saldoPageStatus { grid-area: status !important; margin-inline: 22px !important; }
  html body.ppob-storefront.saldo-page .saldo-card {
    grid-area: balance !important;
    position: sticky !important;
    top: 20px !important;
    margin: -18px 0 0 22px !important;
  }
  html body.ppob-storefront.saldo-page .saldo-tabs {
    grid-area: tabs !important;
    width: auto !important;
    max-width: none !important;
    margin: -18px 22px 0 0 !important;
  }
  html body.ppob-storefront.saldo-page .saldo-history-list,
  html body.ppob-storefront.saldo-page .saldo-empty {
    grid-area: history !important;
    width: auto !important;
    margin-right: 22px !important;
    padding-inline: 0 !important;
  }

  html body.ppob-storefront.saldo-page :is(.saldo-deposit-view, .saldo-deposit-detail) {
    padding: 0 22px 28px !important;
  }

  html body.ppob-storefront.saldo-page .saldo-deposit-view .saldo-sub-header,
  html body.ppob-storefront.saldo-page .saldo-deposit-detail .saldo-sub-header {
    margin-inline: -22px !important;
    margin-bottom: 22px !important;
  }

  html body.ppob-storefront.saldo-page .saldo-deposit-view {
    display: grid !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
    gap: 22px !important;
  }

  html body.ppob-storefront.saldo-page .saldo-deposit-view[hidden] { display: none !important; }
  html body.ppob-storefront.saldo-page .saldo-deposit-view .saldo-sub-header { grid-column: 1 / -1 !important; }

  /* Transactions and notes use the desktop width instead of phone proportions. */
  html body.ppob-storefront.riwayat-page .riwayat-tabs {
    width: calc(100% - 44px) !important;
    max-width: none !important;
    margin-inline: 22px !important;
  }

  html body.ppob-storefront.riwayat-page :is(.riwayat-list, #riwayatList, .riwayat-empty) {
    width: auto !important;
    margin-inline: 22px !important;
    padding-inline: 0 !important;
  }

  html body.ppob-storefront.catatan-page .catatan-customer-section,
  html body.ppob-storefront.catatan-page .catatan-detail {
    margin-inline: 22px !important;
  }

  html body.ppob-storefront.catatan-page .catatan-customer-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  html body.ppob-storefront.catatan-page .catatan-empty {
    min-height: 390px !important;
  }

  /* Checkout/status keep the public header, but their app dock remains available. */
  html body.ppob-storefront.ppob-dedicated-checkout-page > nav.ppob-native-bottom-nav,
  html body.ppob-storefront.checkout-status-page > nav.ppob-native-bottom-nav {
    display: grid !important;
  }

  html body.ppob-storefront.ppob-dedicated-checkout-page .ppob-layout,
  html body.ppob-storefront.checkout-status-page .ppob-layout {
    width: min(100%, var(--ppob-u-desktop-width)) !important;
    margin-inline: auto !important;
    gap: 22px !important;
  }

  html body.ppob-storefront.ppob-dedicated-checkout-page .ppob-panel,
  html body.ppob-storefront.checkout-status-page .ppob-panel {
    padding: 22px !important;
  }
}

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

  html body.ppob-storefront.catatan-page .catatan-customer-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.ppob-storefront *,
  html body.ppob-storefront *::before,
  html body.ppob-storefront *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ========================================================================== 
   v3 specificity lock
   Legacy styles repeat page selectors and use !important. These selectors are
   intentionally more specific so the unified layout is the actual final layer.
   ========================================================================== */
html body.ppob-storefront.ppob-storefront.ppob-storefront :is(
  .saldo-header h1,
  .saldo-sub-header h1,
  .riwayat-header h1,
  .riwayat-detail-header h1,
  .catatan-header h1
) {
  font-size: 22px !important;
  line-height: 1.25 !important;
}

html body.ppob-storefront.ppob-storefront.ppob-product-page .ppob-product-input-card.ppob-product-input-card h1 {
  font-size: 20px !important;
  line-height: 1.25 !important;
}

@media (max-width: 1023px) {
  html body.ppob-storefront.ppob-storefront.ppob-storefront {
    padding-left: 0 !important;
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body.ppob-storefront.ppob-storefront.ppob-storefront > nav.ppob-native-bottom-nav.ppob-native-bottom-nav {
    inset: auto 0 0 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 7px max(6px, env(safe-area-inset-right, 0px)) calc(7px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    gap: 2px !important;
    border-radius: 18px 18px 0 0 !important;
    transform: none !important;
  }
}

@media (min-width: 768px) {
  html body.ppob-storefront.ppob-storefront.ppob-product-page > main.ppob-product-shell.ppob-product-shell,
  html body.ppob-storefront.ppob-storefront.saldo-page > main.saldo-shell.saldo-shell,
  html body.ppob-storefront.ppob-storefront.riwayat-page > main.riwayat-shell.riwayat-shell,
  html body.ppob-storefront.ppob-storefront.catatan-page > main.catatan-shell.catatan-shell {
    width: min(calc(100% - 40px), var(--ppob-u-desktop-width)) !important;
    max-width: var(--ppob-u-desktop-width) !important;
    min-height: calc(100dvh - 40px) !important;
    height: auto !important;
    margin: 20px auto !important;
    padding-bottom: 26px !important;
    border: 1px solid rgba(221, 227, 238, .92) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background: rgba(249, 251, 255, .92) !important;
    box-shadow: var(--ppob-u-shadow) !important;
    transform: none !important;
  }
}

@media (min-width: 1024px) {
  html body.ppob-storefront.ppob-storefront.ppob-storefront {
    width: 100% !important;
    max-width: none !important;
    padding-left: 116px !important;
    padding-right: 0 !important;
    padding-bottom: 36px !important;
  }

  html body.ppob-storefront.ppob-storefront.ppob-storefront > nav.ppob-native-bottom-nav.ppob-native-bottom-nav {
    inset: auto !important;
    top: 50% !important;
    left: 20px !important;
    right: auto !important;
    bottom: auto !important;
    width: 82px !important;
    max-width: 82px !important;
    min-width: 82px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 40px) !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(5, minmax(62px, auto)) !important;
    gap: 7px !important;
    border: 1px solid var(--ppob-u-line) !important;
    border-radius: 24px !important;
    transform: translateY(-50%) !important;
  }

  html body.ppob-storefront.ppob-storefront.ppob-storefront > nav.ppob-native-bottom-nav.ppob-native-bottom-nav > a {
    width: 100% !important;
    height: auto !important;
    min-height: 62px !important;
    padding: 7px 3px !important;
    display: grid !important;
    grid-template-rows: 26px auto !important;
    border-radius: 15px !important;
  }

  html body.ppob-storefront.ppob-storefront.ppob-product-page > main.ppob-product-shell.ppob-product-shell {
    display: grid !important;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
    grid-template-rows: auto auto 1fr !important;
    align-items: start !important;
    column-gap: 22px !important;
    row-gap: 18px !important;
  }

  html body.ppob-storefront.ppob-storefront.ppob-product-page > main.ppob-product-shell.ppob-product-shell > header.ppob-product-header.ppob-product-header {
    grid-column: 1 / -1 !important;
  }

  html body.ppob-storefront.ppob-storefront.ppob-product-page > main.ppob-product-shell.ppob-product-shell > section.ppob-product-input-card.ppob-product-input-card {
    grid-column: 1 !important;
    grid-row: 2 / span 2 !important;
    position: sticky !important;
    top: 20px !important;
    width: auto !important;
    margin: -42px 0 0 22px !important;
  }

  html body.ppob-storefront.ppob-storefront.ppob-product-page > main.ppob-product-shell.ppob-product-shell > :is(
    .ppob-catalog-status,
    .ppob-product-list-section,
    .ppob-product-empty
  ) {
    grid-column: 2 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 22px 0 0 !important;
  }

  html body.ppob-storefront.ppob-storefront.saldo-page .saldo-home-view.saldo-home-view {
    display: grid !important;
    grid-template-columns: minmax(300px, 350px) minmax(0, 1fr) !important;
    grid-template-areas:
      "header header"
      "status status"
      "balance tabs"
      "balance history" !important;
    align-items: start !important;
    column-gap: 22px !important;
    row-gap: 14px !important;
    padding-bottom: 26px !important;
  }

  html body.ppob-storefront.ppob-storefront.saldo-page .saldo-home-view > .saldo-header { grid-area: header !important; }
  html body.ppob-storefront.ppob-storefront.saldo-page .saldo-home-view > #saldoPageStatus { grid-area: status !important; margin-inline: 22px !important; }
  html body.ppob-storefront.ppob-storefront.saldo-page .saldo-home-view > .saldo-card.saldo-card {
    grid-area: balance !important;
    position: sticky !important;
    top: 20px !important;
    width: auto !important;
    margin: -18px 0 0 22px !important;
  }
  html body.ppob-storefront.ppob-storefront.saldo-page .saldo-home-view > .saldo-tabs.saldo-tabs {
    grid-area: tabs !important;
    width: auto !important;
    max-width: none !important;
    margin: -18px 22px 0 0 !important;
  }
  html body.ppob-storefront.ppob-storefront.saldo-page .saldo-home-view > :is(.saldo-history-list, .saldo-empty) {
    grid-area: history !important;
    width: auto !important;
    max-width: none !important;
    margin-right: 22px !important;
    padding-inline: 0 !important;
  }

  html body.ppob-storefront.ppob-storefront.riwayat-page .riwayat-tabs.riwayat-tabs {
    width: calc(100% - 44px) !important;
    max-width: none !important;
    margin: -14px 22px 16px !important;
  }

  html body.ppob-storefront.ppob-storefront.catatan-page .catatan-customer-list.catatan-customer-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

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

  html body.ppob-storefront.ppob-storefront.catatan-page .catatan-customer-list.catatan-customer-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* PPOB product-focus banner: keep slides proportional and dots compact. */
html body.ppob-storefront:not(.ppob-order-page):not(.checkout-page):not(.checkout-status-page) .ppob-banner-slider {
  width: min(100%, 920px) !important;
  min-height: 0 !important;
  margin: 0 auto 24px !important;
  padding: 0 0 24px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.ppob-storefront:not(.ppob-order-page):not(.checkout-page):not(.checkout-status-page) .ppob-banner-track {
  min-height: 0 !important;
  gap: 12px !important;
  padding: 0 calc((100% - min(88%, 760px)) / 2) !important;
  align-items: center !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
}

html body.ppob-storefront:not(.ppob-order-page):not(.checkout-page):not(.checkout-status-page) .ppob-banner-track::-webkit-scrollbar {
  display: none !important;
}

html body.ppob-storefront:not(.ppob-order-page):not(.checkout-page):not(.checkout-status-page) .ppob-banner-slide {
  flex: 0 0 min(88%, 760px) !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 16 / 7.2 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  scroll-snap-align: center !important;
  transform: none !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .08) !important;
}

html body.ppob-storefront:not(.ppob-order-page):not(.checkout-page):not(.checkout-status-page) .ppob-banner-slide:not(.is-active) {
  opacity: .78 !important;
  transform: scale(.96) !important;
}

html body.ppob-storefront:not(.ppob-order-page):not(.checkout-page):not(.checkout-status-page) .ppob-banner-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #ffffff !important;
}

html body.ppob-storefront:not(.ppob-order-page):not(.checkout-page):not(.checkout-status-page) .ppob-banner-stage {
  min-height: 100% !important;
  height: 100% !important;
}

html body.ppob-storefront:not(.ppob-order-page):not(.checkout-page):not(.checkout-status-page) .ppob-banner-dots {
  left: 50% !important;
  right: auto !important;
  bottom: 2px !important;
  width: auto !important;
  min-height: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  transform: translateX(-50%) !important;
}

html body.ppob-storefront:not(.ppob-order-page):not(.checkout-page):not(.checkout-status-page) .ppob-banner-dots button {
  flex: 0 0 auto !important;
  width: 8px !important;
  min-width: 8px !important;
  max-width: 8px !important;
  height: 8px !important;
  min-height: 8px !important;
  max-height: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #cbd5e1 !important;
  box-shadow: none !important;
}

html body.ppob-storefront:not(.ppob-order-page):not(.checkout-page):not(.checkout-status-page) .ppob-banner-dots button.active {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 8px !important;
  min-height: 8px !important;
  max-height: 8px !important;
  background: #f26e22 !important;
}

@media (max-width: 760px) {
  html body.ppob-storefront:not(.ppob-order-page):not(.checkout-page):not(.checkout-status-page) .ppob-banner-slider {
    margin-bottom: 20px !important;
    padding-bottom: 22px !important;
  }

  html body.ppob-storefront:not(.ppob-order-page):not(.checkout-page):not(.checkout-status-page) .ppob-banner-track {
    padding: 0 calc((100% - 92%) / 2) !important;
  }

  html body.ppob-storefront:not(.ppob-order-page):not(.checkout-page):not(.checkout-status-page) .ppob-banner-slide {
    flex-basis: 92% !important;
    aspect-ratio: 16 / 8.4 !important;
    border-radius: 16px !important;
  }
}