/* =========================================================
   PF New Home (v2027.43) - Clean Rebuild
   Scope: only when body has .pf-newhome
   ========================================================= */

/* ---------- Base ---------- */
body.pf-newhome {
  background: #f5f6fb !important;
  overflow-y: auto !important;
  padding-top: 0 !important;
}

/* Force scroll on WINDOW (not inner wrappers) — newhome only */
body.pf-newhome .pc-container,
body.pf-newhome .pc-content,
body.pf-newhome .pcoded-wrapper,
body.pf-newhome .pcoded-main-container,
body.pf-newhome .pcoded-content,
body.pf-newhome main,
body.pf-newhome .main-content,
body.pf-newhome .content,
body.pf-newhome .content-wrapper {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ---------- Legacy header sticky (hamburger + logo) ---------- */
body.pf-newhome header.d-block.p-0.border-bottom {
  position: sticky !important;
  top: 0 !important;
  z-index: 900 !important; /* below Bootstrap offcanvas (1045) */
  background: #fff !important;
}

body.pf-newhome header.d-block.p-0.border-bottom nav,
body.pf-newhome header.d-block.p-0.border-bottom .navbar {
  background: #fff !important;
}

/* Inner legacy bar must NOT be fixed (theme sometimes forces fixed) */
body.pf-newhome .container.py-3.d-flex.gap-4.align-items-center {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
}

/* When offcanvas open: hide legacy bar (avoid overlap / click issues) */
body.pf-newhome.pf-offcanvas-open .container.py-3.d-flex.gap-4.align-items-center {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ensure offcanvas above */
body.pf-newhome .offcanvas-backdrop { z-index: 1040 !important; }
body.pf-newhome .offcanvas { z-index: 1045 !important; }

/* ---------- PF Root ---------- */
#pf-home-root {
  max-width: 520px;
  margin: 0 auto;
  padding: 12px 14px 96px; /* space for bottom nav */
}

#pf-home-root,
#pf-home-root * {
  box-sizing: border-box;
}

#pf-home-root a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Topbar (logged in) ---------- */
#pf-home-root .pf-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  background: #fff;
  border-radius: 16px;
  padding: 12px;

  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

#pf-home-root .pf-user {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

#pf-home-root .pf-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #e9ecf5;
  overflow: hidden;
  flex: 0 0 36px;
}

#pf-home-root .pf-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#pf-home-root .pf-name {
  font-weight: 900;
  line-height: 1.1;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pf-home-root .pf-balance {
  font-size: 12px;
  opacity: .7;
  margin-top: 2px;
}

/* Topbar actions */
#pf-home-root .pf-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

#pf-home-root .pf-iconbtn {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #f1f3ff;
  display: grid;
  place-items: center;
}

#pf-home-root .pf-iconbtn-img {
  padding: 0;
  overflow: hidden;
}

#pf-home-root .pf-iconbtn-img img {
  width: 36px;
  height: 22px;
  object-fit: contain;
  display: block;
  margin: auto;
}

/* ---------- Guest topbar (login/register pill) ---------- */
#pf-home-root .pf-topbar.pf-guest {
  background: transparent !important; /* ✅ buang outer kotak */
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
}


#pf-home-root .pf-login-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 14px;
  border-radius: 18px;

  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
}

#pf-home-root .pf-login-pill:active {
  transform: translateY(1px);
}

#pf-home-root .pf-login-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 18px;

  background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(16,185,129,.14));
  border: 1px solid rgba(59,130,246,.18);
}

/* ===== FINAL service icon size sync v2028.65 ===== */
@media (max-width: 991px) {
  html body.pf-newhome #pf-home-root .pf-grid .pf-tile {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
  }

  /* Bigger base icon */
  html body.pf-newhome #pf-home-root .pf-grid .pf-tile img {
    width: 56px !important;
    height: 56px !important;
    padding: 4px !important;
    object-fit: contain !important;
    margin: 0 !important;
  }

  /* Make tiles 2,3,4 visually same size as tile 1 */
  html body.pf-newhome #pf-home-root .pf-grid .pf-tile:nth-child(2) img,
  html body.pf-newhome #pf-home-root .pf-grid .pf-tile:nth-child(3) img,
  html body.pf-newhome #pf-home-root .pf-grid .pf-tile:nth-child(4) img {
    transform: scale(1.16) !important;
    transform-origin: center center !important;
  }
}

/* ===== FINAL mobile clarity + dark bottom nav v2028.64 ===== */
@media (max-width: 991px) {
  /* Login/Register bar: smaller + clearer */
  html body.pf-newhome #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest {
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 4px 6px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(112,174,255,.34) !important;
    box-shadow:
      0 6px 14px rgba(4,16,50,.30),
      inset 0 0 0 1px rgba(255,255,255,.70) !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest:before {
    opacity: .55 !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest:after {
    opacity: .66 !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest .pf-login-pill {
    min-height: 44px !important;
    padding: 5px 9px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(110,170,255,.42) !important;
    background: linear-gradient(180deg, #f9fcff, #ecf4ff) !important;
    box-shadow: 0 4px 10px rgba(22,60,138,.16), inset 0 0 0 1px rgba(255,255,255,.78) !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest .pf-login-ico {
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(98,158,255,.46) !important;
    background: linear-gradient(180deg, #eff7ff, #dfecff) !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest .pf-login-ico i {
    font-size: 14px !important;
    color: #1f56d8 !important;
    opacity: 1 !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest .pf-login-text {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f2a5a !important;
    opacity: 1 !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest .pf-login-arrow {
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
    font-size: 18px !important;
    color: #1f56d8 !important;
    opacity: 1 !important;
  }

  /* Bottom bar: dark theme */
  html body.pf-newhome .pf-bottomnav {
    background: linear-gradient(180deg, rgba(5,20,58,.96), rgba(4,15,46,.98)) !important;
    border-top: 1px solid rgba(100,168,255,.26) !important;
    box-shadow: 0 -8px 22px rgba(0,0,0,.38) !important;
  }
  html body.pf-newhome .pf-bottomnav .pf-navitem,
  html body.pf-newhome .pf-bottomnav a {
    color: #cfe3ff !important;
    opacity: .92 !important;
  }
  html body.pf-newhome .pf-bottomnav .pf-navicon i {
    color: #b9d8ff !important;
  }
  html body.pf-newhome .pf-bottomnav .pf-navtext {
    color: #d6e8ff !important;
    font-weight: 600 !important;
  }
  html body.pf-newhome .pf-bottomnav .pf-navitem.active,
  html body.pf-newhome .pf-bottomnav .pf-navitem.active .pf-navicon i,
  html body.pf-newhome .pf-bottomnav .pf-navitem.active .pf-navtext {
    color: #45c3ff !important;
    opacity: 1 !important;
  }
}

/* ===== Desktop fine-tune v2028.63 ===== */
@media (min-width: 992px) {
  /* Image 1: make Login/Register bar smaller */
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest {
    min-height: 86px !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
  }
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest .pf-login-pill {
    min-height: 62px !important;
    padding: 8px 12px !important;
    border-radius: 13px !important;
  }
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest .pf-login-ico {
    width: 42px !important;
    height: 42px !important;
  }
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest .pf-login-ico i {
    font-size: 19px !important;
  }
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest .pf-login-text {
    font-size: 17px !important;
    line-height: 1 !important;
  }

  /* Image 2: enlarge service icon + text */
  #pf-home-root .pf-grid .pf-tile {
    min-height: 126px !important;
    padding: 16px 14px !important;
  }
  #pf-home-root .pf-grid .pf-tile img {
    width: 70px !important;
    height: 70px !important;
    padding: 10px !important;
    margin-bottom: 12px !important;
  }
  #pf-home-root .pf-grid .pf-tile div {
    font-size: 18px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
  }
}

/* ===== Mobile offcanvas clarity boost v2028.62 ===== */
@media (max-width: 991px) {
  html body.pf-newhome #menuOffcanvas.offcanvas {
    background: #ffffff !important;
  }

  html body.pf-newhome #menuOffcanvas .offcanvas-header {
    background: #0d2f7a !important;
    border-bottom: 1px solid rgba(13,47,122,.22) !important;
  }

  html body.pf-newhome #menuOffcanvas .offcanvas-body {
    background: #ffffff !important;
    color: #0e2758 !important;
  }

  html body.pf-newhome #menuOffcanvas .offcanvas-body h5.display-6 {
    color: #0d234f !important;
    font-weight: 800 !important;
    opacity: 1 !important;
  }

  html body.pf-newhome #menuOffcanvas .offcanvas-body a.text-reset {
    color: #1f3f7c !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    border-bottom-color: rgba(24,58,118,.18) !important;
  }

  html body.pf-newhome #menuOffcanvas .offcanvas-body a.text-reset .float-end,
  html body.pf-newhome #menuOffcanvas .offcanvas-body a.text-reset .float-end i {
    color: #1d4ca8 !important;
    opacity: 1 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
  }

  html body.pf-newhome #menuOffcanvas .offcanvas-body i {
    color: #2a56a6 !important;
    opacity: 1 !important;
  }

  html body.pf-newhome #menuOffcanvas .menu-login-btn {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    opacity: 1 !important;
  }
}

/* ===== Mobile bar height cut 50% v2028.59 ===== */
@media (max-width: 991px) {
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 1px 4px !important;
    overflow: hidden !important;
    align-items: center !important;
  }
}

/* ===== Mobile action cards compact + bigger icons v2028.60 ===== */
@media (max-width: 991px) {
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-actions {
    gap: 3px !important;
  }

  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-actions .pf-action-card {
    width: 32px !important;
    min-width: 32px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 1px !important;
    border-radius: 7px !important;
    overflow: hidden !important;
  }

  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-actions .pf-action-ico {
    width: 22px !important;
    height: 22px !important;
    margin: 2px 0 0 !important;
  }

  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-actions .pf-action-ico i {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-actions .pf-action-txt {
    font-size: 6px !important;
    line-height: 1 !important;
  }
}

/* ===== Mobile topbar tidy rescue v2028.57 ===== */
@media (max-width: 991px) {
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro {
    min-height: 50px !important;
    padding: 2px 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-user {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-user-meta {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-avatar {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-name {
    font-size: 10px !important;
    line-height: 1.05 !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-balance-amount {
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-name,
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-balance-amount {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 4px !important;
    align-items: stretch !important;
  }

  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-actions .pf-action-card {
    width: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
    padding: 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    position: relative !important;
  }

  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-actions .pf-action-ico {
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    margin: 6px 0 0 !important;
  }

  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-actions .pf-action-ico i {
    font-size: 16px !important;
    line-height: 1 !important;
  }

  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-actions .pf-action-txt {
    font-size: 7px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-actions .pf-action-arr {
    position: absolute !important;
    right: 2px !important;
    top: 12px !important;
    transform: none !important;
    font-size: 12px !important;
    line-height: 1 !important;
    margin-top: 0 !important;
  }
}

/* =========================================================
   PF Premium Mobile Sync (make phone visually match PC)
   ========================================================= */
@media (max-width: 991px) {
  body.pf-newhome {
    background:
      radial-gradient(1200px 680px at 50% -260px, rgba(56,130,255,.30), transparent 58%),
      linear-gradient(180deg, #030a21 0%, #0a1738 40%, #101f46 100%) !important;
    color: #e6eeff !important;
  }

  body.pf-newhome .gsm-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 950 !important;
    background: linear-gradient(180deg, rgba(2,10,34,.96), rgba(2,10,34,.88)) !important;
    border: 1px solid rgba(68,146,255,.24) !important;
    border-radius: 14px !important;
    margin: 8px 8px 10px !important;
    box-shadow: 0 12px 30px rgba(2,12,40,.45), inset 0 0 0 1px rgba(102,170,255,.12) !important;
    backdrop-filter: blur(8px) !important;
  }

  body.pf-newhome .gsm-theme-header {
    min-height: 56px !important;
    padding: 0 10px !important;
  }

  body.pf-newhome .nav-logo img.logo {
    height: 30px !important;
    width: auto !important;
    filter: drop-shadow(0 0 10px rgba(52,148,255,.35)) !important;
  }

  body.pf-newhome .mobile-menu-btn,
  body.pf-newhome .mobile-menu-btn i {
    color: #eaf2ff !important;
  }

  #pf-home-root {
    max-width: 100% !important;
    padding: 10px 10px 104px !important;
  }

  #pf-home-root .pf-topbar,
  #pf-home-root .pf-search-wrap,
  #pf-home-root .pf-banner,
  #pf-home-root .pf-section,
  #pf-home-root .pf-grid,
  #pf-home-root .pf-best-selling,
  body.pf-newhome .pf-official-wrap {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #pf-home-root .pf-topbar.pf-topbar-pro,
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest {
    min-height: 92px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(88,160,255,.26) !important;
    background:
      radial-gradient(120px 92px at 0% 50%, rgba(10,67,190,.30), transparent 72%),
      radial-gradient(150px 96px at 100% 50%, rgba(0,151,255,.34), transparent 70%),
      linear-gradient(180deg, rgba(242,248,255,.97), rgba(232,240,252,.94)),
      url("/media/bg-circuit-light.png") center/cover no-repeat !important;
    box-shadow:
      0 16px 44px rgba(3,12,42,.38),
      inset 0 0 0 3px rgba(4,15,60,.88),
      inset 8px 0 18px rgba(4,38,132,.30),
      inset -10px 0 20px rgba(0,152,255,.34),
      inset 0 0 0 1px rgba(255,255,255,.74) !important;
    padding: 8px 9px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  #pf-home-root .pf-topbar.pf-topbar-pro:before,
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest:before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    left: 18.5% !important;
    right: 11.2% !important;
    top: 8% !important;
    bottom: 1% !important;
    background: url("/media/pf-topbar-circuit-exact.svg?v=2028.51") center/100% 100% no-repeat !important;
    opacity: .96 !important;
    pointer-events: none !important;
  }

  #pf-home-root .pf-topbar.pf-topbar-pro:after,
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest:after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(90deg, rgba(8,33,112,.26) 0%, transparent 10%, transparent 90%, rgba(0,174,255,.24) 100%),
      url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 82' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-40%25' y='-120%25' width='180%25' height='340%25'%3E%3CfeGaussianBlur stdDeviation='1.2'/%3E%3C/filter%3E%3ClinearGradient id='r' x1='0' x2='1'%3E%3Cstop stop-color='%23071745' stop-opacity='.95'/%3E%3Cstop offset='.55' stop-color='%231065d8' stop-opacity='.32'/%3E%3Cstop offset='1' stop-color='%2300cfff' stop-opacity='.0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='2' width='54' height='78' rx='18' fill='url(%23r)' opacity='.70'/%3E%3Crect x='1140' y='2' width='58' height='78' rx='18' fill='url(%23r)' transform='rotate(180 1169 41)' opacity='.78'/%3E%3Cpath d='M0 0 H340 L363 8 H438 L462 0 H1200' fill='none' stroke='%23061542' stroke-width='8' stroke-linejoin='round' opacity='.98'/%3E%3Cpath d='M0 82 H626 L650 74 H744 L768 82 H1200' fill='none' stroke='%23061542' stroke-width='8' stroke-linejoin='round' opacity='.98'/%3E%3Cpath d='M340 2 L363 8 H438 L462 2' fill='none' stroke='%230d2f89' stroke-width='6' stroke-linejoin='round' opacity='.88'/%3E%3Cpath d='M626 80 L650 74 H744 L768 80' fill='none' stroke='%230d2f89' stroke-width='6' stroke-linejoin='round' opacity='.88'/%3E%3Cg stroke='%234ed4ff' stroke-width='2.2' stroke-linecap='round' filter='url(%23b)'%3E%3Cpath d='M382 4 l-8 6'/%3E%3Cpath d='M394 4 l-8 6'/%3E%3Cpath d='M406 4 l-8 6'/%3E%3Cpath d='M418 4 l-8 6'/%3E%3Cpath d='M686 78 l-8 -6'/%3E%3Cpath d='M698 78 l-8 -6'/%3E%3Cpath d='M710 78 l-8 -6'/%3E%3Cpath d='M722 78 l-8 -6'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat !important;
    opacity: .98 !important;
    pointer-events: none !important;
  }

  #pf-home-root .pf-topbar.pf-topbar-pro > *,
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest > * {
    position: relative !important;
    z-index: 2 !important;
  }

  #pf-home-root .pf-avatar {
    width: 48px !important;
    height: 48px !important;
    border: 3px solid rgba(255,255,255,.92) !important;
    box-shadow: 0 8px 20px rgba(4,20,64,.22) !important;
  }
  #pf-home-root .pf-user {
    gap: 12px !important;
  }
  #pf-home-root .pf-name {
    color: #0f244e !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }
  #pf-home-root .pf-balance {
    color: #2758d7 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    opacity: 1 !important;
  }

  #pf-home-root .pf-actions {
    gap: 6px !important;
  }
  #pf-home-root .pf-action-card {
    width: 74px !important;
    min-width: 74px !important;
    height: 76px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(97,166,255,.26) !important;
    background: linear-gradient(180deg, #f7fbff, #eaf2ff) !important;
    box-shadow: 0 8px 18px rgba(11,29,74,.16) !important;
    padding: 6px 4px !important;
  }
  #pf-home-root .pf-action-ico {
    width: 26px !important;
    height: 26px !important;
    margin-bottom: 5px !important;
  }
  #pf-home-root .pf-action-name {
    font-size: 12px !important;
    color: #0f2349 !important;
  }

  #pf-home-root .pf-search-wrap {
    margin-top: 12px !important;
  }
  #pf-home-root .pf-search {
    height: 48px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(100,168,255,.35) !important;
    background: linear-gradient(180deg, #ffffff, #f3f8ff) !important;
    box-shadow: 0 10px 30px rgba(5,18,54,.36) !important;
    color: #2f466a !important;
    padding: 0 12px !important;
  }
  #pf-home-root #pf-search-input {
    color: #1e335c !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  #pf-home-root #pf-search-input::placeholder {
    color: #6b7f9f !important;
    opacity: 1 !important;
  }
  #pf-home-root #pf-search-filter {
    width: 36px !important;
    height: 34px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(85,157,255,.4) !important;
    background: linear-gradient(180deg, #f9fdff, #eaf2ff) !important;
    color: #0d4dc8 !important;
  }

  #pf-search-results.pf-search-results {
    background: #ffffff !important;
    border: 1px solid rgba(86, 126, 196, .32) !important;
    box-shadow: 0 16px 32px rgba(6, 20, 63, .30) !important;
  }
  #pf-search-results .pf-sr-item,
  #pf-search-results .pf-sr-meta {
    color: #183362 !important;
  }
  #pf-home-root .pf-sr-title {
    color: #123163 !important;
    font-weight: 800 !important;
  }
  #pf-home-root .pf-sr-sub {
    color: #5d7296 !important;
    opacity: 1 !important;
    font-weight: 600 !important;
  }
  #pf-search-results .pf-sr-img {
    background: #e8f2ff !important;
    border: 1px solid #cbdaf8 !important;
  }

  #pf-home-root .pf-banner {
    border: 1px solid rgba(105,175,255,.36) !important;
    border-radius: 16px !important;
    background: #03153b !important;
    box-shadow: 0 14px 40px rgba(5,16,48,.5) !important;
  }
  #pf-home-root .pf-banner-slider {
    height: 180px !important;
    border-radius: 16px !important;
  }

  #pf-home-root .pf-section h3 {
    color: #f2f8ff !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
    font-size: 34px !important;
    font-weight: 900 !important;
  }

  #pf-home-root .pf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  #pf-home-root .pf-tile {
    min-height: 84px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(8,29,85,.92), rgba(6,20,64,.94)) !important;
    border: 1px solid rgba(91,165,255,.28) !important;
    box-shadow: 0 10px 24px rgba(4,14,44,.42) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 10px !important;
    position: relative !important;
    text-align: left !important;
  }
  #pf-home-root .pf-tile img {
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #123f9f, #0a2e80) !important;
    padding: 6px !important;
    box-shadow: inset 0 0 0 1px rgba(139,194,255,.25) !important;
  }
  #pf-home-root .pf-tile div {
    color: #f3f7ff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  #pf-home-root .pf-tile:after {
    content: "\203A" !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(120,186,255,.35) !important;
    display: grid !important;
    place-items: center !important;
    color: #8cc7ff !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  #pf-home-root .pf-best-selling {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #pf-home-root .pf-bs-item,
  #pf-home-root .pf-bs-skel {
    background: linear-gradient(180deg, #ffffff, #f6f9ff) !important;
    border: 1px solid rgba(35, 78, 165, .20) !important;
    box-shadow: 0 10px 24px rgba(5, 18, 54, .28) !important;
    color: #0f2347 !important;
    border-radius: 16px !important;
  }
  #pf-home-root .pf-bs-title {
    color: #162e5d !important;
    font-weight: 700 !important;
  }
  #pf-home-root .pf-bs-badge {
    color: #1f3f84 !important;
    background: #edf3ff !important;
    border: 1px solid #ccd9f5 !important;
    font-weight: 700 !important;
  }
}

/* ===== USER LOCK OVERRIDE v2028.54 (strong specificity) ===== */
@media (max-width: 991px) {
  html body.pf-newhome header.gsm-header {
    background: linear-gradient(180deg, rgba(3,14,42,.56), rgba(3,14,42,.48)) !important;
    border: 1px solid rgba(84,156,255,.18) !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 14px rgba(2,10,34,.22), inset 0 0 0 1px rgba(123,184,255,.08) !important;
    margin: 6px 8px 8px !important;
    backdrop-filter: blur(8px) !important;
  }
  html body.pf-newhome header.gsm-header .gsm-theme-header {
    min-height: 40px !important;
    padding: 0 8px !important;
  }
  html body.pf-newhome header.gsm-header .nav-logo .logo {
    height: 22px !important;
    width: auto !important;
    opacity: .9 !important;
    filter: drop-shadow(0 0 6px rgba(53,148,255,.20)) !important;
  }
  html body.pf-newhome header.gsm-header .navbar-toggler {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(92,164,255,.22) !important;
    background: rgba(9,26,66,.34) !important;
    display: grid !important;
    place-items: center !important;
  }
  html body.pf-newhome header.gsm-header .navbar-toggler i {
    font-size: 15px !important;
    color: rgba(234,244,255,.92) !important;
  }

  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro {
    min-height: 70px !important;
    border-radius: 12px !important;
    padding: 5px 6px !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro:before {
    left: 22% !important;
    right: 11% !important;
    top: 14% !important;
    bottom: 8% !important;
    background: url("/media/pf-topbar-circuit-exact.svg?v=2028.54") center/100% 100% no-repeat !important;
    opacity: .62 !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro:after {
    opacity: .45 !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-user {
    gap: 9px !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-avatar {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-name {
    font-size: 12px !important;
    line-height: 1.05 !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-balance-amount {
    font-size: 11px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
  }

  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-actions {
    gap: 5px !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-actions .pf-action-card {
    width: 46px !important;
    min-width: 46px !important;
    min-height: 48px !important;
    border-radius: 8px !important;
    padding: 2px !important;
    background: linear-gradient(180deg, #f8fcff, #eaf3ff) !important;
    border: 1px solid rgba(102,164,255,.30) !important;
    box-shadow: 0 5px 12px rgba(10,34,82,.16) !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-actions .pf-action-ico i {
    font-size: 12px !important;
    color: #2158d8 !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-actions .pf-action-txt {
    font-size: 7px !important;
    font-weight: 700 !important;
    color: #102851 !important;
    line-height: 1 !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-actions .pf-action-arr {
    font-size: 10px !important;
    right: 4px !important;
    color: #1f53ce !important;
  }

  html body.pf-newhome #pf-home-root .pf-search-wrap {
    margin-top: 9px !important;
  }
  html body.pf-newhome #pf-home-root .pf-search {
    height: 38px !important;
    border-radius: 10px !important;
    padding: 0 9px !important;
  }
  html body.pf-newhome #pf-home-root #pf-search-input {
    font-size: 12px !important;
  }
  html body.pf-newhome #pf-home-root #pf-search-filter {
    width: 28px !important;
    height: 26px !important;
    border-radius: 8px !important;
  }

  /* keep tile box + text, make image bigger */
  html body.pf-newhome #pf-home-root .pf-grid .pf-tile {
    min-height: 92px !important;
  }
  html body.pf-newhome #pf-home-root .pf-grid .pf-tile img {
    width: 52px !important;
    height: 52px !important;
    padding: 6px !important;
  }
  html body.pf-newhome #pf-home-root .pf-grid .pf-tile div {
    font-size: 11px !important;
  }
}

/* ===== Final mobile override (keep at file end) ===== */
@media (max-width: 991px) {
  body.pf-newhome {
    background:
      radial-gradient(1200px 680px at 50% -260px, rgba(56,130,255,.30), transparent 58%),
      linear-gradient(180deg, #030a21 0%, #0a1738 40%, #101f46 100%) !important;
    color: #e6eeff !important;
  }

  body.pf-newhome .gsm-header {
    background: linear-gradient(180deg, rgba(2,10,34,.96), rgba(2,10,34,.88)) !important;
    border: 1px solid rgba(68,146,255,.24) !important;
    border-radius: 14px !important;
    margin: 8px 8px 10px !important;
    box-shadow: 0 12px 30px rgba(2,12,40,.45), inset 0 0 0 1px rgba(102,170,255,.12) !important;
  }

  #pf-home-root {
    max-width: 100% !important;
    padding: 10px 10px 104px !important;
  }

  #pf-home-root .pf-topbar.pf-topbar-pro,
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest {
    min-height: 92px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(88,160,255,.26) !important;
    background:
      radial-gradient(120px 92px at 0% 50%, rgba(10,67,190,.30), transparent 72%),
      radial-gradient(150px 96px at 100% 50%, rgba(0,151,255,.34), transparent 70%),
      linear-gradient(180deg, rgba(242,248,255,.97), rgba(232,240,252,.94)),
      url("/media/bg-circuit-light.png") center/cover no-repeat !important;
    box-shadow:
      0 16px 44px rgba(3,12,42,.38),
      inset 0 0 0 3px rgba(4,15,60,.88),
      inset 8px 0 18px rgba(4,38,132,.30),
      inset -10px 0 20px rgba(0,152,255,.34),
      inset 0 0 0 1px rgba(255,255,255,.74) !important;
    padding: 8px 9px !important;
  }
  #pf-home-root .pf-topbar.pf-topbar-pro:before,
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest:before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    left: 18.5% !important;
    right: 11.2% !important;
    top: 8% !important;
    bottom: 1% !important;
    background: url("/media/pf-topbar-circuit-exact.svg?v=2028.51") center/100% 100% no-repeat !important;
    opacity: .96 !important;
  }
  #pf-home-root .pf-topbar.pf-topbar-pro:after,
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest:after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(90deg, rgba(8,33,112,.26) 0%, transparent 10%, transparent 90%, rgba(0,174,255,.24) 100%),
      url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 82' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' x2='1'%3E%3Cstop stop-color='%23071745' stop-opacity='.95'/%3E%3Cstop offset='.55' stop-color='%231065d8' stop-opacity='.32'/%3E%3Cstop offset='1' stop-color='%2300cfff' stop-opacity='.0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='2' width='54' height='78' rx='18' fill='url(%23r)' opacity='.70'/%3E%3Crect x='1140' y='2' width='58' height='78' rx='18' fill='url(%23r)' transform='rotate(180 1169 41)' opacity='.78'/%3E%3Cpath d='M0 0 H340 L363 8 H438 L462 0 H1200' fill='none' stroke='%23061542' stroke-width='8'/%3E%3Cpath d='M0 82 H626 L650 74 H744 L768 82 H1200' fill='none' stroke='%23061542' stroke-width='8'/%3E%3C/svg%3E") center/100% 100% no-repeat !important;
    opacity: .98 !important;
    pointer-events: none !important;
  }
  #pf-home-root .pf-topbar.pf-topbar-pro > *,
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest > * {
    position: relative !important;
    z-index: 2 !important;
  }

  #pf-home-root .pf-name {
    color: #0f244e !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }
  #pf-home-root .pf-balance {
    color: #2758d7 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    opacity: 1 !important;
  }

  #pf-home-root .pf-search {
    height: 48px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(100,168,255,.35) !important;
    background: linear-gradient(180deg, #ffffff, #f3f8ff) !important;
    box-shadow: 0 10px 30px rgba(5,18,54,.36) !important;
    color: #2f466a !important;
  }
  #pf-home-root #pf-search-input {
    color: #1e335c !important;
    font-weight: 600 !important;
  }
  #pf-home-root #pf-search-input::placeholder {
    color: #6b7f9f !important;
    opacity: 1 !important;
  }
  #pf-home-root #pf-search-filter {
    border: 1px solid rgba(85,157,255,.4) !important;
    background: linear-gradient(180deg, #f9fdff, #eaf2ff) !important;
    color: #0d4dc8 !important;
  }

  #pf-home-root .pf-section h3 {
    color: #f2f8ff !important;
    text-transform: uppercase !important;
    font-size: 34px !important;
    font-weight: 900 !important;
  }
  #pf-home-root .pf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  #pf-home-root .pf-tile {
    min-height: 84px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(8,29,85,.92), rgba(6,20,64,.94)) !important;
    border: 1px solid rgba(91,165,255,.28) !important;
    box-shadow: 0 10px 24px rgba(4,14,44,.42) !important;
    text-align: left !important;
  }
  #pf-home-root .pf-tile div { color: #f3f7ff !important; font-weight: 700 !important; }

  #pf-home-root .pf-bs-item,
  #pf-home-root .pf-bs-skel {
    background: linear-gradient(180deg, #ffffff, #f6f9ff) !important;
    border: 1px solid rgba(35, 78, 165, .20) !important;
    box-shadow: 0 10px 24px rgba(5, 18, 54, .28) !important;
    color: #0f2347 !important;
  }
}

/* =========================================================
   PF Premium Mobile Mirror (match desktop visual language)
   ========================================================= */
@media (max-width: 991px) {
  body.pf-newhome {
    background:
      radial-gradient(900px 520px at 50% -210px, rgba(56,130,255,.28), transparent 58%),
      linear-gradient(180deg, #030a21 0%, #0a1738 40%, #101f46 100%) !important;
    color: #e6eeff !important;
  }

  body.pf-newhome .gsm-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 950 !important;
    background: linear-gradient(180deg, rgba(2,10,34,.96), rgba(2,10,34,.88)) !important;
    border: 1px solid rgba(68,146,255,.24) !important;
    border-radius: 14px !important;
    margin: 8px 8px 10px !important;
    box-shadow: 0 12px 30px rgba(2,12,40,.45), inset 0 0 0 1px rgba(102,170,255,.12) !important;
  }

  #pf-home-root {
    max-width: 100% !important;
    padding: 10px 10px 96px !important;
  }

  #pf-home-root .pf-topbar.pf-topbar-pro,
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest {
    min-height: 96px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(88,160,255,.26) !important;
    background:
      radial-gradient(120px 92px at 0% 50%, rgba(10,67,190,.30), transparent 72%),
      radial-gradient(150px 96px at 100% 50%, rgba(0,151,255,.34), transparent 70%),
      linear-gradient(180deg, rgba(242,248,255,.97), rgba(232,240,252,.94)),
      url("/media/bg-circuit-light.png") center/cover no-repeat !important;
    box-shadow:
      0 16px 44px rgba(3,12,42,.38),
      inset 0 0 0 3px rgba(4,15,60,.88),
      inset 8px 0 18px rgba(4,38,132,.30),
      inset -10px 0 20px rgba(0,152,255,.34),
      inset 0 0 0 1px rgba(255,255,255,.74) !important;
    padding: 9px 10px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  #pf-home-root .pf-topbar.pf-topbar-pro:before,
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest:before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    left: 18.5% !important;
    right: 11.2% !important;
    top: 8% !important;
    bottom: 1% !important;
    background:
      url("/media/pf-topbar-circuit-exact.svg?v=2028.50") center/100% 100% no-repeat,
      linear-gradient(100deg, transparent 0%, rgba(67,151,255,0) 45%, rgba(73,178,255,.02) 49%, rgba(255,255,255,.03) 50%, rgba(73,178,255,.02) 51%, transparent 55%) 0 0/440px 100% repeat-x !important;
    opacity: .96 !important;
    animation: none !important;
    pointer-events: none !important;
  }

  #pf-home-root .pf-topbar.pf-topbar-pro:after,
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest:after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 82' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-40%25' y='-120%25' width='180%25' height='340%25'%3E%3CfeGaussianBlur stdDeviation='1.2'/%3E%3C/filter%3E%3ClinearGradient id='r' x1='0' x2='1'%3E%3Cstop stop-color='%23071745' stop-opacity='.95'/%3E%3Cstop offset='.55' stop-color='%231065d8' stop-opacity='.32'/%3E%3Cstop offset='1' stop-color='%2300cfff' stop-opacity='.0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='2' width='54' height='78' rx='18' fill='url(%23r)' opacity='.70'/%3E%3Crect x='1140' y='2' width='58' height='78' rx='18' fill='url(%23r)' transform='rotate(180 1169 41)' opacity='.78'/%3E%3Cpath d='M0 0 H340 L363 8 H438 L462 0 H1200' fill='none' stroke='%23061542' stroke-width='8' stroke-linejoin='round' opacity='.98'/%3E%3Cpath d='M0 82 H626 L650 74 H744 L768 82 H1200' fill='none' stroke='%23061542' stroke-width='8' stroke-linejoin='round' opacity='.98'/%3E%3Cpath d='M340 2 L363 8 H438 L462 2' fill='none' stroke='%230d2f89' stroke-width='6' stroke-linejoin='round' opacity='.88'/%3E%3Cpath d='M626 80 L650 74 H744 L768 80' fill='none' stroke='%230d2f89' stroke-width='6' stroke-linejoin='round' opacity='.88'/%3E%3Cg stroke='%234ed4ff' stroke-width='2.2' stroke-linecap='round' filter='url(%23b)'%3E%3Cpath d='M382 4 l-8 6'/%3E%3Cpath d='M394 4 l-8 6'/%3E%3Cpath d='M406 4 l-8 6'/%3E%3Cpath d='M418 4 l-8 6'/%3E%3Cpath d='M686 78 l-8 -6'/%3E%3Cpath d='M698 78 l-8 -6'/%3E%3Cpath d='M710 78 l-8 -6'/%3E%3Cpath d='M722 78 l-8 -6'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat !important;
    opacity: .98 !important;
    pointer-events: none !important;
  }

  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest > *,
  #pf-home-root .pf-topbar.pf-topbar-pro > * {
    position: relative !important;
    z-index: 1 !important;
  }

  #pf-home-root .pf-login-pill {
    min-height: 76px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(116,173,255,.40) !important;
    background: linear-gradient(180deg, #f7fbff, #e9f3ff) !important;
    box-shadow: 0 8px 22px rgba(20,64,152,.20), inset 0 0 0 1px rgba(255,255,255,.72) !important;
  }

  #pf-home-root .pf-search {
    border: 1px solid rgba(100,168,255,.35) !important;
    background: linear-gradient(180deg, #ffffff, #f3f8ff) !important;
    box-shadow: 0 10px 30px rgba(5,18,54,.36) !important;
  }

  #pf-home-root .pf-section h3 {
    color: #f2f8ff !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
  }

  #pf-home-root .pf-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #pf-home-root .pf-tile {
    min-height: 86px !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(8,29,85,.92), rgba(6,20,64,.94)) !important;
    border: 1px solid rgba(91,165,255,.28) !important;
    box-shadow: 0 10px 24px rgba(4,14,44,.42) !important;
  }

  #pf-home-root .pf-tile div {
    color: #f3f7ff !important;
  }

  #pf-home-root .pf-bs-item,
  #pf-home-root .pf-bs-skel {
    background: linear-gradient(180deg, #ffffff, #f6f9ff) !important;
    border: 1px solid rgba(35, 78, 165, .20) !important;
    box-shadow: 0 10px 24px rgba(5, 18, 54, .28) !important;
    color: #0f2347 !important;
  }
}

#pf-home-root .pf-login-ico i {
  display: block;
  font-size: 20px;
  line-height: 1;
}

#pf-home-root .pf-login-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#pf-home-root .pf-login-text {
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .2px;
  line-height: 1.1;
}

#pf-home-root .pf-login-sub {
  font-size: 12px;
  opacity: .6;
  line-height: 1.1;
}

#pf-home-root .pf-login-arrow {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #f7f7fb;
  border: 1px solid rgba(0,0,0,.06);
  color: #334155;
  font-size: 20px;
}

/* ---------- Search ---------- */
#pf-home-root .pf-search-wrap {
  position: relative;
  overflow: visible;
  margin-top: 12px;
}

#pf-home-root .pf-search {
  height: 48px;
  padding: 0 12px;

  display: flex;
  align-items: center;
  gap: 10px;

  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

#pf-home-root #pf-search-input {
  height: 12px;
  line-height: 12px;
  font-size: 14px;

  border: 0;
  outline: none;
  background: transparent;

  flex: 1 1 auto;
  min-width: 0;
}

#pf-home-root #pf-search-filter {
  width: 36px;
  height: 36px;
  border-radius: 12px;

  display: grid;
  place-items: center;

  background: #f1f3ff;
  border: 0;
  cursor: pointer;
}

/* ---------- Search results dropdown ---------- */
#pf-search-results.pf-search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: 54px;
  z-index: 99998;

  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.12);

  max-height: var(--pf-sr-max, 360px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#pf-home-root .pf-sr-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

#pf-home-root .pf-sr-item:last-child {
  border-bottom: none;
}

#pf-home-root .pf-sr-item:active {
  background: rgba(0,0,0,.04);
}

#pf-home-root .pf-sr-img {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #f3f5ff;
  overflow: hidden;
  flex: 0 0 40px;
}

#pf-home-root .pf-sr-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#pf-home-root .pf-sr-meta {
  flex: 1;
  min-width: 0;
}

#pf-home-root .pf-sr-title {
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pf-home-root .pf-sr-sub {
  font-size: 11px;
  opacity: .7;
  margin-top: 2px;
}

#pf-home-root .pf-sr-tag {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #1e40af;
  font-weight: 700;
  flex: 0 0 auto;
}

/* ---------- Filter menu ---------- */
#pf-home-root .pf-filter-menu {
  position: absolute;
  right: 12px;
  top: 54px;
  width: 220px;

  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.12);

  padding: 10px;
  z-index: 99999;
}

#pf-home-root .pf-fm-title {
  font-weight: 800;
  font-size: 12px;
  opacity: .75;
  margin: 6px 6px 8px;
}

#pf-home-root button.pf-fm-item {
  width: 100%;
  display: block;
  text-align: left;

  border: 1px solid rgba(0,0,0,.08);
  background: #f7f7fb;
  border-radius: 12px;

  padding: 10px 12px;
  margin: 6px 0;

  font-size: 12px;
  cursor: pointer;
  line-height: 1.1;
}

#pf-home-root button.pf-fm-item.is-on {
  background: rgba(59,130,246,.16);
  border-color: rgba(59,130,246,.35);
  font-weight: 900;
}

#pf-home-root .pf-fm-select {
  width: 100%;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
}

/* ---------- Banner slider ---------- */
#pf-home-root .pf-banner {
  margin-top: 12px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

#pf-home-root .pf-banner-slider {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  height: var(--pf-banner-h, 140px);
  touch-action: pan-y;
}

#pf-home-root .pf-banner-track {
  display: flex;
  height: 100%;
  will-change: transform;
  transform: translate3d(0,0,0);
}

#pf-home-root .pf-banner-slide {
  flex: 0 0 100%;
  height: 100%;
}

#pf-home-root .pf-banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

#pf-home-root .pf-banner-dots {
  position: absolute;
  left: 0; right: 0;
  bottom: 10px;

  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

#pf-home-root .pf-banner-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.10);
  cursor: pointer;
}

#pf-home-root .pf-banner-dot.is-active {
  width: 18px;
  background: rgba(255,255,255,.95);
}

/* ---------- Sections + grid ---------- */
#pf-home-root .pf-section {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#pf-home-root .pf-section h3 {
  font-size: 16px;
  margin: 0;
  font-weight: 900;
}

#pf-home-root .pf-section a {
  font-size: 13px;
  opacity: .7;
}

#pf-home-root .pf-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

#pf-home-root .pf-tile {
  background: #fff;
  border-radius: 16px;
  padding: 10px 8px;
  text-align: center;

  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  display: block;
}

#pf-home-root .pf-tile img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  margin: 0 auto 8px;
}

#pf-home-root .pf-tile div {
  font-size: 12px;
  font-weight: 900;
}

/* ---------- Best selling list ---------- */
#pf-home-root .pf-best-selling {
  margin: 8px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#pf-home-root .pf-bs-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  padding: 12px;
  min-height: 92px;

  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

#pf-home-root .pf-bs-img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  flex: 0 0 56px;
  background: #f3f5fb;

  display: flex;
  align-items: center;
  justify-content: center;
}

#pf-home-root .pf-bs-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#pf-home-root .pf-bs-meta {
  flex: 1;
  min-width: 0;
}

#pf-home-root .pf-bs-title {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
  margin: 0 0 8px;

  white-space: normal;
  word-break: break-word;
}

#pf-home-root .pf-bs-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#pf-home-root .pf-bs-badge {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  background: #f6f7fb;
}

#pf-home-root .pf-bs-skel {
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  opacity: .85;
}

/* ---------- Bottom nav ---------- */
.pf-bottomnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  background: #fff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -10px 24px rgba(0,0,0,.10);

  padding: 10px 14px;
  z-index: 9999;
}

.pf-bottomnav .pf-navrow {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.pf-bottomnav .pf-navitem {
  flex: 1;
  text-align: center;
  font-size: 11px;
  opacity: .7;
}

.pf-bottomnav .pf-navitem.active {
  opacity: 1;
  font-weight: 900;
}

.pf-bottomnav .pf-navicon {
  display: block;
  font-size: 18px;
  line-height: 1;
}

.pf-bottomnav .pf-navicon i,
.pf-bottomnav .pf-icon i {
  display: block;
  font-size: 19px;
  line-height: 1;
}

.pf-bottomnav .pf-navtext {
  display: block;
  font-size: 11px;
  line-height: 1.1;
}

/* WhatsApp float spacing (if exists) */
body.pf-newhome .whatsapp-float {
  bottom: 90px !important;
}

/* ===== PF Bottom Nav: tukar link jadi hitam ===== */
body.pf-newhome .pf-bottomnav a,
body.pf-newhome .pf-bottomnav .pf-navitem{
  color: #111 !important;        /* hitam */
  text-decoration: none !important;
}

/* optional: kalau sebelum ni kau guna opacity utk inactive */
body.pf-newhome .pf-bottomnav .pf-navitem{
  color:#111 !important;
  opacity:.85;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;              /* ✅ jarak icon-text (ubah 4-10px ikut sedap) */
}
body.pf-newhome .pf-bottomnav .pf-navitem.active{
  opacity: 16 !important;
  font-weight: 600 !important;
  color: #111 !important;        /* pastikan active pun hitam */
}



.seller-card{
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}
.seller-card .overlay{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.685);
  color: #fff;
  padding: 15px;
  display: none;
  text-align: center;
}
.seller-card:hover .overlay{
  display:block;
  border-top: 1px solid #4d4d4d5c;
}

/* ---------- Desktop polish (keep mobile untouched) ---------- */
@media (min-width: 992px) {
  body.pf-newhome {
    background:
      radial-gradient(1200px 420px at 50% -160px, rgba(14, 165, 233, .12), transparent 62%),
      #f5f7fc !important;
  }

  #pf-home-root {
    max-width: 1120px;
    padding: 24px 20px 36px;
  }

  #pf-home-root .pf-topbar,
  #pf-home-root .pf-search-wrap,
  #pf-home-root .pf-banner,
  #pf-home-root .pf-section,
  #pf-home-root .pf-grid,
  #pf-home-root .pf-best-selling,
  body.pf-newhome .pf-official-wrap {
    width: min(100%, 980px);
    margin-left: auto;
    margin-right: auto;
  }

  #pf-home-root .pf-topbar {
    border-radius: 20px;
    padding: 14px 16px;
  }

  #pf-home-root .pf-name {
    font-size: 24px;
    max-width: 420px;
  }

  #pf-home-root .pf-balance {
    font-size: 15px;
  }

  #pf-home-root .pf-search-wrap {
    margin-top: 16px;
  }

  #pf-home-root .pf-search {
    height: 56px;
    border-radius: 18px;
    padding: 0 14px;
  }

  #pf-home-root #pf-search-input {
    height: 16px;
    line-height: 16px;
    font-size: 16px;
  }

  #pf-home-root #pf-search-filter {
    width: 40px;
    height: 40px;
  }

  #pf-search-results.pf-search-results {
    top: 62px;
    border-radius: 18px;
    max-height: 420px;
  }

  #pf-home-root .pf-banner {
    margin-top: 16px;
    border-radius: 24px;
  }

  #pf-home-root .pf-banner-slider {
    height: 240px;
  }

  #pf-home-root .pf-section {
    margin-top: 20px;
  }

  #pf-home-root .pf-section h3 {
    font-size: 28px;
    letter-spacing: .2px;
  }

  #pf-home-root .pf-grid {
    margin-top: 12px;
    gap: 14px;
  }

  #pf-home-root .pf-tile {
    border-radius: 20px;
    padding: 16px 10px;
    transition: transform .18s ease, box-shadow .18s ease;
  }

  #pf-home-root .pf-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0,0,0,.10);
  }

  #pf-home-root .pf-tile img {
    width: 58px;
    height: 58px;
    margin-bottom: 10px;
  }

  #pf-home-root .pf-tile div {
    font-size: 15px;
  }

  #pf-home-root .pf-best-selling {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #pf-home-root .pf-bs-item,
  #pf-home-root .pf-bs-skel {
    border-radius: 20px;
    min-height: 116px;
  }

  #pf-home-root .pf-bs-title {
    font-size: 16px;
  }

  #pf-home-root .pf-bs-badge {
    font-size: 13px;
    padding: 6px 12px;
  }

  body.pf-newhome .pf-official-wrap {
    margin-top: 24px;
  }

  body.pf-newhome .pf-bottomnav {
    display: none !important;
  }

body.pf-newhome .whatsapp-float {
  bottom: 24px !important;
  right: 24px !important;
}
}

/* Mobile recovery: keep footer/hamburger, only suppress stale offcanvas leftovers */
@media (max-width: 991px) {
  body.pf-newhome:not(.pf-menu-user-open) #menuOffcanvas,
  body.pf-newhome.pf-newhome-ready #menuOffcanvas:not(.show) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.pf-newhome:not(.pf-menu-user-open) .offcanvas-backdrop,
  body.pf-newhome.pf-newhome-ready .offcanvas-backdrop:not(.show) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.pf-newhome.pf-menu-user-open #menuOffcanvas.show {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* =========================================================
   PF Premium Desktop Theme (ref match v2028.16)
   ========================================================= */
@media (min-width: 992px) {
  body.pf-newhome {
    background:
      radial-gradient(1200px 680px at 50% -260px, rgba(56,130,255,.30), transparent 58%),
      linear-gradient(180deg, #030a21 0%, #0a1738 40%, #101f46 100%) !important;
    color: #e6eeff !important;
    font-size: 16px !important;
  }

  body.pf-newhome .gsm-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 950 !important;
    background: linear-gradient(180deg, rgba(2,10,34,.96), rgba(2,10,34,.88)) !important;
    border: 1px solid rgba(68,146,255,.24) !important;
    border-radius: 18px !important;
    margin: 10px auto 12px !important;
    max-width: 1280px !important;
    box-shadow: 0 14px 36px rgba(2,12,40,.45), inset 0 0 0 1px rgba(102,170,255,.12) !important;
    backdrop-filter: blur(8px) !important;
  }

  body.pf-newhome .gsm-theme-header {
    min-height: 66px !important;
    padding: 0 16px !important;
  }

  body.pf-newhome .nav-logo img.logo {
    height: 40px !important;
    width: auto !important;
    filter: drop-shadow(0 0 14px rgba(52,148,255,.35)) !important;
  }

  body.pf-newhome .nav-links > li > a {
    color: #eaf2ff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
  }

  body.pf-newhome .nav-links > li:first-child > a {
    color: #59d9ff !important;
    text-shadow: 0 0 18px rgba(90,214,255,.45) !important;
    border-bottom: 2px solid #3ab7ff !important;
  }

  body.pf-newhome .currency-btn,
  body.pf-newhome .login-btn {
    background: rgba(5,18,56,.85) !important;
    border: 1px solid rgba(82,156,255,.36) !important;
    color: #e9f4ff !important;
    border-radius: 14px !important;
    min-height: 40px !important;
  }

  body.pf-newhome .currency-btn {
    min-width: 104px !important;
    font-weight: 800 !important;
    font-size: 15px !important;
  }

  body.pf-newhome .login-btn {
    min-width: 190px !important;
    font-size: 14px !important;
  }

  #pf-home-root {
    max-width: 1240px !important;
    padding: 10px 14px 30px !important;
  }

  #pf-home-root .pf-topbar,
  #pf-home-root .pf-search-wrap,
  #pf-home-root .pf-banner,
  #pf-home-root .pf-section,
  #pf-home-root .pf-grid,
  #pf-home-root .pf-best-selling,
  body.pf-newhome .pf-official-wrap {
    width: min(100%, 1200px) !important;
  }

  #pf-home-root .pf-topbar.pf-topbar-pro {
    min-height: 82px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(88,160,255,.26) !important;
    background:
      radial-gradient(120px 92px at 0% 50%, rgba(10,67,190,.30), transparent 72%),
      radial-gradient(150px 96px at 100% 50%, rgba(0,151,255,.34), transparent 70%),
      linear-gradient(180deg, rgba(242,248,255,.97), rgba(232,240,252,.94)),
      url("/media/bg-circuit-light.png") center/cover no-repeat !important;
    box-shadow:
      0 16px 44px rgba(3,12,42,.38),
      inset 0 0 0 3px rgba(4,15,60,.88),
      inset 8px 0 18px rgba(4,38,132,.30),
      inset -10px 0 20px rgba(0,152,255,.34),
      inset 0 0 0 1px rgba(255,255,255,.74) !important;
    padding: 7px 9px !important;
    position: relative !important;
    overflow: hidden !important;
  }
  #pf-home-root .pf-topbar.pf-topbar-pro:before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    left: 18.5% !important;
    right: 11.2% !important;
    top: 8% !important;
    bottom: 1% !important;
    background:
      url("/media/pf-topbar-circuit-exact.svg?v=2028.50") center/100% 100% no-repeat,
      linear-gradient(100deg, transparent 0%, rgba(67,151,255,0) 45%, rgba(73,178,255,.02) 49%, rgba(255,255,255,.03) 50%, rgba(73,178,255,.02) 51%, transparent 55%) 0 0/440px 100% repeat-x !important;
    opacity: .96 !important;
    animation: none !important;
    pointer-events: none !important;
  }
  #pf-home-root .pf-topbar.pf-topbar-pro .pf-user {
    position: relative !important;
  }
  #pf-home-root .pf-topbar.pf-topbar-pro .pf-user:after {
    content: "" !important;
    position: absolute !important;
    left: 54px !important;
    top: 50% !important;
    width: 2px !important;
    height: 34px !important;
    border-radius: 999px !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(180deg, rgba(101,170,255,.08), rgba(77,151,255,.78), rgba(101,170,255,.08)) !important;
    box-shadow: 0 0 10px rgba(83,158,255,.26) !important;
    pointer-events: none !important;
  }
  #pf-home-root .pf-topbar.pf-topbar-pro:after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 82' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-40%25' y='-120%25' width='180%25' height='340%25'%3E%3CfeGaussianBlur stdDeviation='1.2'/%3E%3C/filter%3E%3ClinearGradient id='v' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop stop-color='%235aa8ff' stop-opacity='.14'/%3E%3Cstop offset='.48' stop-color='%235aa8ff' stop-opacity='.76'/%3E%3Cstop offset='1' stop-color='%235aa8ff' stop-opacity='.14'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' x2='1'%3E%3Cstop stop-color='%23071745' stop-opacity='.95'/%3E%3Cstop offset='.55' stop-color='%231065d8' stop-opacity='.32'/%3E%3Cstop offset='1' stop-color='%2300cfff' stop-opacity='.0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='2' width='54' height='78' rx='18' fill='url(%23r)' opacity='.70'/%3E%3Crect x='1140' y='2' width='58' height='78' rx='18' fill='url(%23r)' transform='rotate(180 1169 41)' opacity='.78'/%3E%3Cpath d='M0 0 H340 L363 8 H438 L462 0 H1200' fill='none' stroke='%23061542' stroke-width='8' stroke-linejoin='round' opacity='.98'/%3E%3Cpath d='M0 82 H626 L650 74 H744 L768 82 H1200' fill='none' stroke='%23061542' stroke-width='8' stroke-linejoin='round' opacity='.98'/%3E%3Cpath d='M340 2 L363 8 H438 L462 2' fill='none' stroke='%230d2f89' stroke-width='6' stroke-linejoin='round' opacity='.88'/%3E%3Cpath d='M626 80 L650 74 H744 L768 80' fill='none' stroke='%230d2f89' stroke-width='6' stroke-linejoin='round' opacity='.88'/%3E%3Cg stroke='%234ed4ff' stroke-width='2.2' stroke-linecap='round' filter='url(%23b)'%3E%3Cpath d='M382 4 l-8 6'/%3E%3Cpath d='M394 4 l-8 6'/%3E%3Cpath d='M406 4 l-8 6'/%3E%3Cpath d='M418 4 l-8 6'/%3E%3Cpath d='M686 78 l-8 -6'/%3E%3Cpath d='M698 78 l-8 -6'/%3E%3Cpath d='M710 78 l-8 -6'/%3E%3Cpath d='M722 78 l-8 -6'/%3E%3C/g%3E%3Cg fill='%238ec1ff' opacity='.25'%3E%3Ccircle cx='62' cy='18' r='1.5'/%3E%3Ccircle cx='82' cy='18' r='1.5'/%3E%3Ccircle cx='102' cy='18' r='1.5'/%3E%3Ccircle cx='62' cy='30' r='1.5'/%3E%3Ccircle cx='82' cy='30' r='1.5'/%3E%3Ccircle cx='102' cy='30' r='1.5'/%3E%3Ccircle cx='62' cy='42' r='1.5'/%3E%3Ccircle cx='82' cy='42' r='1.5'/%3E%3Ccircle cx='102' cy='42' r='1.5'/%3E%3Ccircle cx='224' cy='18' r='1.5'/%3E%3Ccircle cx='244' cy='18' r='1.5'/%3E%3Ccircle cx='264' cy='18' r='1.5'/%3E%3Ccircle cx='224' cy='30' r='1.5'/%3E%3Ccircle cx='244' cy='30' r='1.5'/%3E%3Ccircle cx='264' cy='30' r='1.5'/%3E%3Ccircle cx='224' cy='42' r='1.5'/%3E%3Ccircle cx='244' cy='42' r='1.5'/%3E%3Ccircle cx='264' cy='42' r='1.5'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat !important;
    opacity: .98 !important;
    pointer-events: none !important;
  }
  #pf-home-root .pf-topbar.pf-topbar-pro > * {
    position: relative !important;
    z-index: 2 !important;
  }

  /* Guest login/register bar: match action-card clarity */
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest {
    min-height: 112px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(88,160,255,.26) !important;
    background:
      radial-gradient(120px 92px at 0% 50%, rgba(10,67,190,.30), transparent 72%),
      radial-gradient(150px 96px at 100% 50%, rgba(0,151,255,.34), transparent 70%),
      linear-gradient(180deg, rgba(242,248,255,.97), rgba(232,240,252,.94)),
      url("/media/bg-circuit-light.png") center/cover no-repeat !important;
    box-shadow:
      0 16px 44px rgba(3,12,42,.38),
      inset 0 0 0 3px rgba(4,15,60,.88),
      inset 8px 0 18px rgba(4,38,132,.30),
      inset -10px 0 20px rgba(0,152,255,.34),
      inset 0 0 0 1px rgba(255,255,255,.74) !important;
    padding: 11px 13px !important;
    position: relative !important;
    overflow: hidden !important;
  }
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest:before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    left: 18.5% !important;
    right: 11.2% !important;
    top: 8% !important;
    bottom: 1% !important;
    background:
      url("/media/pf-topbar-circuit-exact.svg?v=2028.50") center/100% 100% no-repeat,
      linear-gradient(100deg, transparent 0%, rgba(67,151,255,0) 45%, rgba(73,178,255,.02) 49%, rgba(255,255,255,.03) 50%, rgba(73,178,255,.02) 51%, transparent 55%) 0 0/440px 100% repeat-x !important;
    opacity: .96 !important;
    animation: none !important;
    pointer-events: none !important;
  }
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest:after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 82' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-40%25' y='-120%25' width='180%25' height='340%25'%3E%3CfeGaussianBlur stdDeviation='1.2'/%3E%3C/filter%3E%3ClinearGradient id='r' x1='0' x2='1'%3E%3Cstop stop-color='%23071745' stop-opacity='.95'/%3E%3Cstop offset='.55' stop-color='%231065d8' stop-opacity='.32'/%3E%3Cstop offset='1' stop-color='%2300cfff' stop-opacity='.0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='2' width='54' height='78' rx='18' fill='url(%23r)' opacity='.70'/%3E%3Crect x='1140' y='2' width='58' height='78' rx='18' fill='url(%23r)' transform='rotate(180 1169 41)' opacity='.78'/%3E%3Cpath d='M0 0 H340 L363 8 H438 L462 0 H1200' fill='none' stroke='%23061542' stroke-width='8' stroke-linejoin='round' opacity='.98'/%3E%3Cpath d='M0 82 H626 L650 74 H744 L768 82 H1200' fill='none' stroke='%23061542' stroke-width='8' stroke-linejoin='round' opacity='.98'/%3E%3Cpath d='M340 2 L363 8 H438 L462 2' fill='none' stroke='%230d2f89' stroke-width='6' stroke-linejoin='round' opacity='.88'/%3E%3Cpath d='M626 80 L650 74 H744 L768 80' fill='none' stroke='%230d2f89' stroke-width='6' stroke-linejoin='round' opacity='.88'/%3E%3Cg stroke='%234ed4ff' stroke-width='2.2' stroke-linecap='round' filter='url(%23b)'%3E%3Cpath d='M382 4 l-8 6'/%3E%3Cpath d='M394 4 l-8 6'/%3E%3Cpath d='M406 4 l-8 6'/%3E%3Cpath d='M418 4 l-8 6'/%3E%3Cpath d='M686 78 l-8 -6'/%3E%3Cpath d='M698 78 l-8 -6'/%3E%3Cpath d='M710 78 l-8 -6'/%3E%3Cpath d='M722 78 l-8 -6'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat !important;
    opacity: .98 !important;
    pointer-events: none !important;
  }
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest > * {
    position: relative !important;
    z-index: 1 !important;
  }
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest .pf-login-pill {
    min-height: 84px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(116,173,255,.40) !important;
    background: linear-gradient(180deg, #f7fbff, #e9f3ff) !important;
    box-shadow: 0 8px 22px rgba(20,64,152,.20), inset 0 0 0 1px rgba(255,255,255,.72) !important;
    color: #0f2347 !important;
    padding: 10px 13px !important;
  }
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest .pf-login-ico {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #eef7ff, #deebff) !important;
    border: 1px solid rgba(100,155,255,.44) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.72) !important;
  }
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest .pf-login-ico i {
    font-size: 22px !important;
    color: #2559d8 !important;
  }
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest .pf-login-text {
    color: #0c2148 !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
  }
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest .pf-login-sub {
    display: none !important;
  }
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest .pf-login-arrow {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(106,165,255,.34) !important;
    background: linear-gradient(180deg, #f4faff, #e8f2ff) !important;
    color: #2458d9 !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.68) !important;
  }

  #pf-home-root .pf-avatar {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    border-radius: 999px !important;
    border: 4px solid #fff !important;
    box-shadow: 0 10px 28px rgba(20,56,132,.35) !important;
  }

  #pf-home-root .pf-user { gap: 16px !important; }
  #pf-home-root .pf-name { color: #0a1431 !important; font-size: 20px !important; font-weight: 900 !important; }
  #pf-home-root .pf-balance-cap { display: none !important; }
  #pf-home-root .pf-balance-amount { color: #2458dd !important; font-size: 30px !important; font-weight: 900 !important; line-height: 1.05; }

  #pf-home-root .pf-actions { gap: 7px !important; }
  #pf-home-root .pf-action-card {
    width: 72px !important;
    min-height: 66px !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #f7fbff, #e8f2ff) !important;
    border: 1px solid rgba(100,155,255,.28) !important;
    color: #091937 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    box-shadow: 0 10px 26px rgba(22,75,171,.22) !important;
  }
  #pf-home-root .pf-action-ico i {
    font-size: 21px !important;
    color: #1f56d6 !important;
    text-shadow: 0 2px 8px rgba(37, 88, 217, .25) !important;
  }
  #pf-home-root .pf-action-txt { margin-top: 2px !important; font-size: 9px !important; font-weight: 700 !important; }
  #pf-home-root .pf-action-arr {
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #2458d9 !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }
  #pf-home-root .pf-actions .pf-action-card .pf-action-ico {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
  }
  #pf-home-root .pf-actions .pf-action-card:first-child .pf-action-ico:after {
    content: "$" !important;
    position: absolute !important;
    right: -6px !important;
    bottom: 2px !important;
    width: 11px !important;
    height: 11px !important;
    border-radius: 999px !important;
    background: #1e56d8 !important;
    color: #fff !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    line-height: 11px !important;
    text-align: center !important;
    box-shadow: 0 1px 4px rgba(30,86,216,.35) !important;
  }
  #pf-home-root .pf-actions .pf-action-card:nth-child(2) .pf-action-ico i {
    font-size: 23px !important;
    color: #1f56d6 !important;
    filter: drop-shadow(0 2px 6px rgba(30,86,216,.30)) !important;
  }
  #pf-home-root .pf-actions .pf-action-card:nth-child(2) .pf-action-ico:after {
    content: "+" !important;
    position: absolute !important;
    right: -6px !important;
    bottom: 2px !important;
    width: 11px !important;
    height: 11px !important;
    border-radius: 999px !important;
    background: #1e56d8 !important;
    border: 0 !important;
    color: #ffffff !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    line-height: 11px !important;
    text-align: center !important;
    box-shadow: 0 1px 4px rgba(30,86,216,.35) !important;
  }

  @keyframes pfCircuitFlow {
    0% { background-position: center, -320px 0; }
    100% { background-position: center, 320px 0; }
  }
  @keyframes pfCircuitGlow {
    0% { background-position: 0 0, -120% 0; }
    100% { background-position: 120% 0, 0 0; }
  }

  #pf-home-root .pf-search-wrap { margin-top: 14px !important; }
  #pf-home-root .pf-search {
    height: 48px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(100,168,255,.35) !important;
    background: linear-gradient(180deg, #ffffff, #f3f8ff) !important;
    box-shadow: 0 10px 30px rgba(5,18,54,.36) !important;
    padding: 0 14px !important;
    color: #2f466a !important;
  }
  #pf-home-root #pf-search-input {
    font-size: 15px !important;
    line-height: 16px !important;
    height: 16px !important;
    color: #1e335c !important;
    font-weight: 600 !important;
  }
  #pf-home-root #pf-search-input::placeholder {
    color: #6b7f9f !important;
    opacity: 1 !important;
  }
  #pf-home-root #pf-search-filter {
    width: 40px !important;
    height: 34px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(85,157,255,.4) !important;
    background: linear-gradient(180deg, #f9fdff, #eaf2ff) !important;
    color: #0d4dc8 !important;
    font-size: 17px !important;
  }
  #pf-search-results.pf-search-results {
    background: #ffffff !important;
    border: 1px solid rgba(86, 126, 196, .32) !important;
    box-shadow: 0 16px 32px rgba(6, 20, 63, .30) !important;
  }
  #pf-home-root .pf-sr-item {
    border-bottom: 1px solid rgba(80, 113, 174, .16) !important;
  }
  #pf-home-root .pf-sr-item:active,
  #pf-home-root .pf-sr-item:hover {
    background: #eef4ff !important;
  }
  #pf-search-results .pf-sr-item,
  #pf-search-results .pf-sr-meta {
    color: #183362 !important;
  }
  #pf-home-root .pf-sr-title {
    color: #123163 !important;
    font-weight: 800 !important;
  }
  #pf-home-root .pf-sr-sub {
    color: #5d7296 !important;
    opacity: 1 !important;
    font-weight: 600 !important;
  }
  #pf-home-root .pf-sr-tag {
    color: #1d4cc0 !important;
    background: #eaf1ff !important;
    border: 1px solid #cfdcf8 !important;
    font-weight: 800 !important;
  }
  #pf-search-results .pf-sr-img {
    background: #e8f2ff !important;
    border: 1px solid #cbdaf8 !important;
  }
  #pf-search-results .pf-sr-img img {
    opacity: 1 !important;
  }

  #pf-home-root .pf-banner {
    margin-top: 14px !important;
    border: 1px solid rgba(105,175,255,.36) !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 40px rgba(5,16,48,.5) !important;
    background: #03153b !important;
  }
  #pf-home-root .pf-banner-slider { height: 300px !important; border-radius: 16px !important; }
  #pf-home-root .pf-banner-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(105,178,255,.45) !important;
    background: rgba(4,26,79,.62) !important;
    color: #d7e9ff !important;
    display: grid !important;
    place-items: center !important;
    z-index: 5 !important;
    box-shadow: 0 8px 20px rgba(6,20,63,.4) !important;
  }
  #pf-home-root .pf-banner-prev { left: 18px !important; }
  #pf-home-root .pf-banner-next { right: 18px !important; }
  #pf-home-root .pf-banner-nav i { font-size: 20px !important; }
  #pf-home-root .pf-banner-dots { bottom: 16px !important; gap: 10px !important; }
  #pf-home-root .pf-banner-dot { width: 10px !important; height: 10px !important; background: rgba(255,255,255,.75) !important; border: none !important; }
  #pf-home-root .pf-banner-dot.is-active { width: 28px !important; background: #43c2ff !important; }

  #pf-home-root .pf-section { margin-top: 18px !important; }
  #pf-home-root .pf-section h3 {
    color: #f2f8ff !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    position: relative !important;
    padding-right: 160px !important;
  }
  #pf-home-root .pf-section h3:after {
    content: "" !important;
    position: absolute !important;
    left: calc(100% - 145px) !important;
    top: 52% !important;
    width: 98px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #34bfff, rgba(52,191,255,0)) !important;
    transform: translateY(-50%) !important;
  }

  #pf-home-root .pf-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-top: 12px !important;
  }
  #pf-home-root .pf-tile {
    min-height: 86px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(8,29,85,.92), rgba(6,20,64,.94)) !important;
    border: 1px solid rgba(91,165,255,.28) !important;
    box-shadow: 0 10px 24px rgba(4,14,44,.42) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    position: relative !important;
    text-align: left !important;
  }
  #pf-home-root .pf-tile img {
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #123f9f, #0a2e80) !important;
    padding: 8px !important;
    box-shadow: inset 0 0 0 1px rgba(139,194,255,.25) !important;
  }
  #pf-home-root .pf-tile div {
    color: #f3f7ff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  #pf-home-root .pf-tile:after {
    content: "\203A" !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(120,186,255,.35) !important;
    display: grid !important;
    place-items: center !important;
    color: #8cc7ff !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  /* Make white product cards clearer/readable on dark premium background */
  #pf-home-root .pf-bs-item,
  #pf-home-root .pf-bs-skel {
    background: linear-gradient(180deg, #ffffff, #f6f9ff) !important;
    border: 1px solid rgba(35, 78, 165, .20) !important;
    box-shadow: 0 10px 24px rgba(5, 18, 54, .28) !important;
    color: #0f2347 !important;
  }
  #pf-home-root .pf-bs-img {
    background: #e9f1ff !important;
    border: 1px solid rgba(59, 109, 206, .22) !important;
  }
  #pf-home-root .pf-bs-title {
    color: #162e5d !important;
    font-weight: 700 !important;
  }
  #pf-home-root .pf-bs-badge {
    color: #1f3f84 !important;
    background: #edf3ff !important;
    border: 1px solid #ccd9f5 !important;
    font-weight: 700 !important;
  }
}
/* ===== Absolute mobile final override (refined) ===== */
@media (max-width: 991px) {
  body.pf-newhome {
    background:
      radial-gradient(1100px 560px at 50% -240px, rgba(56,130,255,.20), transparent 62%),
      linear-gradient(180deg, #030a21 0%, #0a1738 42%, #101f46 100%) !important;
    color: #e6eeff !important;
  }

  /* Image 1 -> Image 2 vibe: slimmer + more transparent top header */
  body.pf-newhome .gsm-header {
    background: linear-gradient(180deg, rgba(2,10,34,.62), rgba(2,10,34,.52)) !important;
    border: 1px solid rgba(82,156,255,.20) !important;
    border-radius: 11px !important;
    box-shadow: 0 8px 18px rgba(2,12,40,.26), inset 0 0 0 1px rgba(102,170,255,.10) !important;
    backdrop-filter: blur(9px) !important;
  }
  body.pf-newhome .gsm-theme-header {
    min-height: 18px !important;
    padding: 0 6px !important;
  }
  body.pf-newhome .nav-logo img.logo {
    height: 48px !important;
    width: auto !important;
    opacity: .96 !important;
    filter: drop-shadow(0 0 8px rgba(52,148,255,.22)) !important;
  }
  body.pf-newhome .mobile-menu-btn {
    width: 20px !important;
    height: 20px !important;
    border-radius: 6px !important;
    padding: 0 !important;
    background: rgba(9,28,72,.36) !important;
    border: 1px solid rgba(90,160,255,.24) !important;
  }
  body.pf-newhome .mobile-menu-btn i {
    font-size: 11px !important;
    line-height: 1 !important;
    color: rgba(226,238,255,.90) !important;
  }

  #pf-home-root {
    max-width: 520px !important;
    margin: 0 auto !important;
    padding: 9px 12px 98px !important;
  }

  /* Image 3: smaller bar + smaller action icons + clearer text */
  #pf-home-root .pf-topbar.pf-topbar-pro,
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest {
    min-height: 76px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(88,160,255,.24) !important;
    background:
      radial-gradient(90px 72px at 0% 50%, rgba(10,67,190,.22), transparent 74%),
      radial-gradient(110px 72px at 100% 50%, rgba(0,151,255,.25), transparent 72%),
      linear-gradient(180deg, rgba(242,248,255,.96), rgba(232,240,252,.93)),
      url("/media/bg-circuit-light.png") center/cover no-repeat !important;
    box-shadow:
      0 8px 20px rgba(3,12,42,.28),
      inset 0 0 0 2px rgba(4,15,60,.78),
      inset 0 0 0 1px rgba(255,255,255,.68) !important;
    padding: 6px 7px !important;
  }
  #pf-home-root .pf-topbar.pf-topbar-pro:before,
  #pf-home-root .pf-topbar.pf-guest.pf-topbar-guest:before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    left: 20% !important;
    right: 12% !important;
    top: 12% !important;
    bottom: 5% !important;
    background: url("/media/pf-topbar-circuit-exact.svg?v=2028.53") center/100% 100% no-repeat !important;
    opacity: .78 !important;
    pointer-events: none !important;
  }

  #pf-home-root .pf-avatar {
    width: 34px !important;
    height: 34px !important;
    border-width: 2px !important;
  }
  #pf-home-root .pf-name {
    font-size: 13px !important;
    color: #0b1f44 !important;
    font-weight: 900 !important;
  }
  #pf-home-root .pf-balance,
  #pf-home-root .pf-balance-cap,
  #pf-home-root .pf-balance-amount {
    opacity: 1 !important;
    color: #2a5adb !important;
  }
  #pf-home-root .pf-balance-amount { font-size: 13px !important; font-weight: 800 !important; }

  #pf-home-root .pf-action-card {
    width: 56px !important;
    min-width: 56px !important;
    min-height: 58px !important;
    border-radius: 9px !important;
    padding: 3px !important;
    background: linear-gradient(180deg, rgba(247,251,255,.92), rgba(232,242,255,.90)) !important;
  }
  #pf-home-root .pf-action-ico {
    width: 38px !important;
    height: 38px !important;
    margin: 0 auto 1px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #pf-home-root .pf-action-ico i { font-size: 33px !important; line-height: 1 !important; }
  #pf-home-root .pf-action-txt,
  #pf-home-root .pf-action-name { font-size: 8px !important; font-weight: 700 !important; }
  #pf-home-root .pf-action-arr {
    right: 5px !important;
    font-size: 11px !important;
  }

  /* bar search smaller and sharper */
  #pf-home-root .pf-search-wrap { margin-top: 10px !important; }
  #pf-home-root .pf-search {
    height: 40px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(100,168,255,.30) !important;
    background: linear-gradient(180deg, #ffffff, #f4f8ff) !important;
    box-shadow: 0 7px 18px rgba(5,18,54,.24) !important;
    padding: 0 10px !important;
  }
  #pf-home-root #pf-search-input { font-size: 13px !important; }
  #pf-home-root #pf-search-filter {
    width: 30px !important;
    height: 28px !important;
    border-radius: 9px !important;
  }

  #pf-home-root .pf-section h3 {
    color: #f2f8ff !important;
    text-transform: uppercase !important;
    font-size: 15px !important;
    letter-spacing: .2px !important;
    font-weight: 800 !important;
  }

  #pf-home-root .pf-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #pf-home-root .pf-tile {
    min-height: 92px !important; /* keep box size */
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
    padding: 8px 6px !important;
    background: linear-gradient(180deg, rgba(8,29,85,.92), rgba(6,20,64,.94)) !important;
    border: 1px solid rgba(91,165,255,.28) !important;
    box-shadow: 0 8px 18px rgba(4,14,44,.34) !important;
  }
  /* Image 4: bigger image, keep text+card size */
  #pf-home-root .pf-tile img {
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 5px !important;
  }
  #pf-home-root .pf-tile div {
    color: #f3f7ff !important;
    font-size: 11px !important; /* keep text size */
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }
  #pf-home-root .pf-tile:after { display: none !important; }

  #pf-home-root .pf-best-selling {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #pf-home-root .pf-bs-item,
  #pf-home-root .pf-bs-skel {
    border-radius: 14px !important;
    background: linear-gradient(180deg, #ffffff, #f6f9ff) !important;
    border: 1px solid rgba(35, 78, 165, .20) !important;
    box-shadow: 0 8px 20px rgba(5, 18, 54, .24) !important;
    color: #0f2347 !important;
  }
}

/* ===== Final mobile tile icon/text consistency v2028.67 ===== */
@media (max-width: 991px) {
  #pf-home-root .pf-grid .pf-tile img {
    width: 44px !important;
    height: 44px !important;
    padding: 4px !important;
    object-fit: contain !important;
  }
  /* Force IMEI Services to stay one line */
  #pf-home-root .pf-grid .pf-tile:first-child div {
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
}

/* ===== Final strict equal size for all service icons v2028.73 ===== */
@media (max-width: 991px) {
  html body.pf-newhome #pf-home-root .pf-grid .pf-tile img {
    width: 44px !important;
    height: 44px !important;
    padding: 4px !important;
    transform: none !important;
    object-fit: contain !important;
  }
  html body.pf-newhome #pf-home-root .pf-grid .pf-tile:first-child img {
    transform: scale(1.12) !important;
    transform-origin: center center !important;
  }
}

/* ===== Final desktop service card height clamp v2028.97 ===== */
@media (min-width: 992px) {
  html body.pf-newhome #pf-home-root .pf-grid .pf-tile {
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    align-items: center !important;
  }
  html body.pf-newhome #pf-home-root .pf-grid .pf-tile img {
    width: 44px !important;
    height: 44px !important;
    padding: 6px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    align-self: center !important;
  }
}

/* ===== Final desktop topbar action icon boost v2029.00 ===== */
@media (min-width: 992px) {
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-actions .pf-action-ico {
    width: 30px !important;
    height: 30px !important;
    display: inline-grid !important;
    place-items: center !important;
    margin-left: -3px !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-actions .pf-action-ico i {
    font-size: 27px !important;
    line-height: 1 !important;
  }
  html body.pf-newhome #pf-home-root .pf-topbar.pf-topbar-pro .pf-actions .pf-action-arr {
    right: 4px !important;
  }
}

/* ===== Final subtle white-darken for list cards (mobile + desktop) v2029.01 ===== */
html body.pf-newhome #pf-home-root .pf-bs-item,
html body.pf-newhome #pf-home-root .pf-bs-skel {
  background: linear-gradient(180deg, #edf1f6, #e2e8f0) !important;
  border-color: rgba(35, 78, 165, .26) !important;
}

/* ===== Final mobile service icon nudge up v2029.03 ===== */
@media (max-width: 991px) {
  html body.pf-newhome #pf-home-root .pf-grid .pf-tile img {
    transform: translateY(-9px) !important;
  }
  html body.pf-newhome #pf-home-root .pf-grid .pf-tile div {
    margin-top: 6px !important;
  }
}

/* ===== Final compact list-card height (phone + desktop) v2029.09 ===== */
@media (max-width: 991px) {
  html body.pf-newhome #pf-home-root .pf-bs-item,
  html body.pf-newhome #pf-home-root .pf-bs-skel {
    min-height: 78px !important;
    padding: 9px 10px !important;
    border-radius: 13px !important;
    gap: 10px !important;
  }
  html body.pf-newhome #pf-home-root .pf-bs-title {
    margin-bottom: 6px !important;
    line-height: 1.28 !important;
  }
}

@media (min-width: 992px) {
  html body.pf-newhome #pf-home-root .pf-bs-item,
  html body.pf-newhome #pf-home-root .pf-bs-skel {
    min-height: 98px !important;
    padding: 11px 12px !important;
    border-radius: 16px !important;
    gap: 11px !important;
  }
  html body.pf-newhome #pf-home-root .pf-bs-title {
    margin-bottom: 6px !important;
    line-height: 1.26 !important;
  }
}

/* ===== Faster mobile offcanvas open/close (reduce perceived delay) v2029.10 ===== */
@media (max-width: 991px) {
  html body.pf-newhome #menuOffcanvas.offcanvas {
    transition: transform .12s ease-out !important;
    will-change: transform !important;
  }
  html body.pf-newhome .offcanvas-backdrop {
    transition: opacity .12s linear !important;
  }
}