/* KHF real 3D + live bar + 2 column product fix
   Loaded last. Only frontend layout/style, no backend/payment logic. */
:root{
  --khf-bg:#070b14;
  --khf-card:rgba(11,18,32,.78);
  --khf-line:rgba(148,163,184,.18);
  --khf-cyan:#22d3ee;
  --khf-orange:#f59e0b;
  --khf-yellow:#facc15;
  --khf-purple:#a855f7;
  --khf-pink:#fb7185;
}
html{scroll-behavior:smooth;}
body.storefront-body,
body.orange-home-page,
body.product-page-body,
body.invoice-page{
  background:
    radial-gradient(circle at 18% 12%, rgba(251,146,60,.22), transparent 30%),
    radial-gradient(circle at 84% 22%, rgba(34,211,238,.23), transparent 32%),
    radial-gradient(circle at 48% 65%, rgba(168,85,247,.19), transparent 34%),
    linear-gradient(180deg,#050815 0%,#070b14 48%,#090d18 100%) !important;
  color:#f8fafc;
  overflow-x:hidden;
}
body.storefront-body::before,
body.orange-home-page::before,
body.product-page-body::before,
body.invoice-page::before{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:-3;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:44px 44px;
  transform:perspective(700px) rotateX(62deg) translateY(-130px) scale(1.45);
  transform-origin:center top;
  opacity:.55;
  animation:khfGridMove 13s linear infinite;
}
body.storefront-body::after,
body.orange-home-page::after,
body.product-page-body::after,
body.invoice-page::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at var(--khf-mx, 52%) var(--khf-my, 18%), rgba(255,255,255,.11), transparent 18%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px);
  mix-blend-mode:screen;
  opacity:.75;
}
@keyframes khfGridMove{from{background-position:0 0,0 0}to{background-position:0 44px,44px 0}}
@keyframes khfFloat{0%,100%{transform:translate3d(0,0,0) rotateX(0deg)}50%{transform:translate3d(0,-7px,0) rotateX(1deg)}}
@keyframes khfGlowPulse{0%,100%{opacity:.68;filter:blur(18px)}50%{opacity:1;filter:blur(24px)}}
@keyframes khfEq{0%,100%{height:8px}50%{height:25px}}
@keyframes khfSpin{to{transform:rotate(360deg)}}
@keyframes khfShine{0%{transform:translateX(-130%) skewX(-20deg)}100%{transform:translateX(170%) skewX(-20deg)}}

/* Header polish */
.sf-header,.orange-home-header,.topbar{
  backdrop-filter: blur(22px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.08) !important;
}
.sf-logo,.orange-home-logo,.topbar-logo{
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 14px 30px rgba(245,158,11,.42), inset 0 1px rgba(255,255,255,.45) !important;
}

/* HOME 3D effect, visible but tidy */
.orange-home-shell{padding-bottom:118px !important;}
.orange-home-hero{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  border:1px solid rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at 24% 22%, rgba(251,146,60,.52), transparent 27%),
    radial-gradient(circle at 72% 22%, rgba(34,211,238,.40), transparent 33%),
    linear-gradient(135deg, rgba(15,23,42,.88), rgba(2,6,23,.64)) !important;
  box-shadow:0 30px 80px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.13) !important;
  transform-style:preserve-3d !important;
}
.orange-home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.22) 47%, transparent 58%),
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:auto,38px 38px,38px 38px;
  opacity:.70;
  transform:translateZ(-1px);
}
.orange-home-hero::after{
  content:"";
  position:absolute;
  width:180px;height:180px;right:-42px;top:-38px;border-radius:50%;
  background:radial-gradient(circle,rgba(250,204,21,.52),rgba(251,113,133,.22) 45%,transparent 70%);
  filter:blur(8px);
  animation:khfGlowPulse 3.8s ease-in-out infinite;
}
.orange-kicker,.orange-home-actions a,.orange-home-proof article,.orange-live-card,.orange-product-card,.orange-info-card{
  transform:translateZ(24px);
}
.orange-live-card,.orange-product-card,.orange-info-card{
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:0 22px 55px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.12) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
}
.orange-live-card{
  overflow:hidden !important;
}
.orange-live-card::after,.orange-product-card::after,.orange-info-card::after{
  content:"";
  position:absolute;
  inset:-80% -45%;
  width:50%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  animation:khfShine 5.2s ease-in-out infinite;
  pointer-events:none;
}
.orange-eq i,.pd-eq i{animation:khfEq 1.2s ease-in-out infinite alternate !important;}
.orange-eq i:nth-child(2),.pd-eq i:nth-child(2){animation-delay:.1s!important}.orange-eq i:nth-child(3),.pd-eq i:nth-child(3){animation-delay:.22s!important}.orange-eq i:nth-child(4),.pd-eq i:nth-child(4){animation-delay:.34s!important}.orange-eq i:nth-child(5),.pd-eq i:nth-child(5){animation-delay:.46s!important}.orange-eq i:nth-child(6),.pd-eq i:nth-child(6){animation-delay:.58s!important}.orange-eq i:nth-child(7),.pd-eq i:nth-child(7){animation-delay:.70s!important}

/* PRODUCT PAGE: hero + live bar fixed */
.product-dash-shell{padding-bottom:128px !important;}
.product-page-body .pd-hero{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  border:1px solid rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(249,115,22,.50), transparent 28%),
    radial-gradient(circle at 82% 26%, rgba(34,211,238,.45), transparent 31%),
    radial-gradient(circle at 46% 80%, rgba(168,85,247,.26), transparent 34%),
    linear-gradient(135deg, rgba(15,23,42,.88), rgba(2,6,23,.66)) !important;
  box-shadow:0 30px 85px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.13) !important;
  transform-style:preserve-3d !important;
}
.product-page-body .pd-hero::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(120deg,transparent 0 35%,rgba(255,255,255,.18) 47%,transparent 58%),
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:auto,38px 38px,38px 38px;
  opacity:.74;
}
.product-page-body .pd-hero-copy,.product-page-body .pd-live-card{transform:translateZ(24px);}
.product-page-body .pd-live-card{
  border:1px solid rgba(255,255,255,.14) !important;
  background:linear-gradient(145deg,rgba(15,23,42,.76),rgba(2,6,23,.58)) !important;
  box-shadow:0 24px 55px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.12) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  overflow:hidden !important;
}
.product-page-body .pd-live-card::after{
  content:"";position:absolute;inset:-80% -45%;width:46%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
  animation:khfShine 5.6s ease-in-out infinite;
}
.product-page-body .pd-live-card > *{position:relative;z-index:2;}
.product-page-body .pd-ring{
  box-shadow:0 0 30px rgba(34,211,238,.34), inset 0 0 22px rgba(250,204,21,.14) !important;
  animation:khfSpin 7s linear infinite !important;
}
.product-page-body .pd-stats,
.product-page-body .pd-filter-bar{
  transform-style:preserve-3d !important;
}
.product-page-body .pd-stats article,
.product-page-body .pd-filter-bar button{
  box-shadow:0 16px 38px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.13) !important;
}
.product-page-body .pd-stats article::after{
  content:"";display:block;height:3px;border-radius:999px;margin-top:8px;
  background:linear-gradient(90deg,var(--khf-orange),var(--khf-cyan),var(--khf-purple));
  box-shadow:0 0 16px rgba(34,211,238,.35);
}

/* PRODUCT CARDS: keep 2 columns + readable text */
.product-page-body .pd-product-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  align-items:stretch !important;
  perspective:900px !important;
}
.product-page-body .pd-product-card{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  min-height:330px !important;
  padding:14px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(251,146,60,.26), transparent 35%),
    radial-gradient(circle at 88% 16%, rgba(34,211,238,.18), transparent 34%),
    linear-gradient(145deg, rgba(15,23,42,.85), rgba(2,6,23,.62)) !important;
  box-shadow:0 28px 60px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.12) !important;
  transform-style:preserve-3d !important;
  transform:translateZ(0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  animation:khfFloat 6s ease-in-out infinite !important;
}
.product-page-body .pd-product-card:nth-child(2){animation-delay:.6s !important;}
.product-page-body .pd-product-card:nth-child(3){animation-delay:1.1s !important;}
.product-page-body .pd-product-card:hover,
.product-page-body .pd-product-card.khf-tilt-active{
  border-color:rgba(250,204,21,.32) !important;
  box-shadow:0 35px 80px rgba(0,0,0,.48), 0 0 35px rgba(34,211,238,.18), inset 0 1px rgba(255,255,255,.16) !important;
}
.product-page-body .pd-product-card::before{
  content:"";
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at var(--mx,30%) var(--my,20%), rgba(255,255,255,.22), transparent 24%);
  opacity:.7;
}
.product-page-body .pd-product-card::after{
  content:"";
  position:absolute;inset:-1px;z-index:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,rgba(250,204,21,.32),transparent 27%,rgba(34,211,238,.26) 64%,rgba(168,85,247,.32));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:1px;opacity:.78;
}
.product-page-body .pd-product-card > *{position:relative;z-index:2;}
.product-page-body .pd-card-glow{z-index:1 !important;opacity:.75 !important;filter:blur(22px) !important;}
.product-page-body .pd-card-head{
  display:flex !important;align-items:flex-start !important;justify-content:space-between !important;gap:8px !important;margin-bottom:10px !important;
}
.product-page-body .pd-icon-box{
  width:50px !important;height:50px !important;min-width:50px !important;flex:0 0 50px !important;border-radius:16px !important;
  box-shadow:0 16px 28px rgba(0,0,0,.30), 0 0 25px rgba(250,204,21,.20), inset 0 1px rgba(255,255,255,.28) !important;
  transform:translateZ(32px) !important;
}
.product-page-body .pd-card-head > span{
  max-width:70px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
  font-size:9px !important;letter-spacing:.08em !important;line-height:1 !important;padding:7px 8px !important;border-radius:999px !important;
}
.product-page-body .pd-product-card h2{
  margin:0 0 8px !important;
  font-size:clamp(16px,4.7vw,21px) !important;
  line-height:1.08 !important;
  letter-spacing:-.055em !important;
  max-width:100% !important;
  display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important;
  text-wrap:balance;
  transform:translateZ(26px) !important;
}
.product-page-body .pd-chip-row{
  display:flex !important;flex-wrap:wrap !important;gap:5px !important;margin:0 0 8px !important;min-height:42px !important;max-height:44px !important;overflow:hidden !important;
}
.product-page-body .pd-chip-row span{
  max-width:100% !important;min-width:0 !important;
  font-size:8.7px !important;line-height:1 !important;font-weight:900 !important;
  padding:6px 7px !important;border-radius:999px !important;
  white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
}
.product-page-body .pd-package-strip{
  display:flex !important;flex-wrap:wrap !important;gap:6px !important;margin:0 0 10px !important;max-height:56px !important;overflow:hidden !important;
}
.product-page-body .pd-package-strip em{
  min-width:34px !important;max-width:62px !important;padding:7px 7px !important;border-radius:12px !important;
  font-size:10px !important;line-height:1 !important;font-weight:900 !important;text-align:center !important;
  white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
  background:rgba(148,163,184,.14) !important;border:1px solid rgba(255,255,255,.10) !important;
}
.product-page-body .pd-script-preview{
  display:flex !important;flex-direction:column !important;gap:6px !important;margin:0 0 10px !important;max-height:86px !important;overflow:hidden !important;
}
.product-page-body .pd-script-preview div{
  display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;gap:6px !important;align-items:center !important;padding:8px 9px !important;border-radius:12px !important;
}
.product-page-body .pd-script-preview b{
  min-width:0 !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;font-size:10.8px !important;line-height:1.1 !important;
}
.product-page-body .pd-script-preview small{font-size:10px !important;white-space:nowrap !important;}
.product-page-body .pd-price-row{
  margin-top:auto !important;margin-bottom:11px !important;
  min-height:58px !important;padding:10px 10px !important;border-radius:15px !important;
  display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:center !important;
  background:linear-gradient(90deg,rgba(251,146,60,.25),rgba(168,85,247,.13),rgba(34,211,238,.12)) !important;
  border:1px solid rgba(251,146,60,.22) !important;
  transform:translateZ(18px) !important;
}
.product-page-body .pd-price-row small{font-size:9.5px !important;line-height:1 !important;margin-bottom:3px !important;letter-spacing:.02em !important;}
.product-page-body .pd-price-row strong{
  max-width:100% !important;display:block !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
  font-size:clamp(18px,5.8vw,25px) !important;line-height:1 !important;letter-spacing:-.065em !important;
}
.product-page-body .pd-order-btn{
  width:100% !important;min-height:38px !important;padding:0 10px !important;border-radius:14px !important;
  font-size:11px !important;line-height:1 !important;font-weight:950 !important;white-space:nowrap !important;
  display:flex !important;align-items:center !important;justify-content:center !important;gap:4px !important;
  box-shadow:0 15px 30px rgba(250,204,21,.22), inset 0 1px rgba(255,255,255,.42) !important;
  transform:translateZ(28px) !important;
}

/* Flow/live panel tidy */
.product-page-body .pd-flow-panel.flow-live-panel{
  border:1px solid rgba(255,255,255,.13) !important;
  background:linear-gradient(145deg,rgba(15,23,42,.80),rgba(2,6,23,.62)) !important;
  box-shadow:0 25px 65px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.12) !important;
  overflow:hidden !important;
}
.product-page-body .flow-live-head h2{letter-spacing:-.04em !important;line-height:1.05 !important;}
.product-page-body .flow-step{min-width:0 !important;}
.product-page-body .flow-step b,
.product-page-body .flow-step small{overflow:hidden !important;text-overflow:ellipsis !important;}
.product-page-body .flow-live-rail span{box-shadow:0 0 20px rgba(34,211,238,.55) !important;}

/* Invoice text + QR tidy with visible 3D */
.invoice-wrap-v2{padding-bottom:110px !important;}
.invoice-head-v2,.qris-container,.invoice-detail-card,.payment-note{
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:0 24px 58px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.10) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}
.invoice-product-name{line-height:1.08 !important;letter-spacing:-.045em !important;overflow-wrap:anywhere !important;}
.invoice-id code,.invoice-detail-val code,.invoice-detail-val{overflow-wrap:anywhere !important;word-break:break-word !important;}
.qris-img-frame{background:rgba(15,23,42,.82) !important;border:1px solid rgba(255,255,255,.14) !important;box-shadow:0 22px 55px rgba(0,0,0,.38),0 0 35px rgba(34,211,238,.12) !important;}
.qris-img-frame img{background:#fff !important;border-radius:18px !important;padding:10px !important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07) !important;}
.qris-amount-box{background:linear-gradient(110deg,rgba(251,146,60,.24),rgba(168,85,247,.12),rgba(34,211,238,.12)) !important;border:1px solid rgba(251,146,60,.22) !important;}
.qris-amount-value{white-space:nowrap !important;letter-spacing:-.055em !important;}

/* Mobile exact fixes from screenshots */
@media (max-width:640px){
  body.storefront-body,body.orange-home-page,body.product-page-body,body.invoice-page{padding-bottom:112px !important;}
  .sf-header,.orange-home-header,.topbar{margin-inline:8px !important;border-radius:20px !important;}
  .sf-brand,.orange-home-brand,.topbar-brand{min-width:0 !important;}
  .sf-brand > span:last-child,.orange-home-brand > span:last-child,.topbar-brand > span:last-child{overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;}

  .orange-home-hero{
    min-height:0 !important;padding:38px 18px 18px !important;border-radius:30px !important;
  }
  .orange-home-hero h1{font-size:clamp(40px,13vw,58px) !important;line-height:.90 !important;margin:18px 0 14px !important;letter-spacing:-.085em !important;}
  .orange-home-actions{gap:9px !important;margin-top:12px !important;}
  .orange-home-actions a{min-height:40px !important;padding:0 14px !important;font-size:12px !important;}
  .orange-home-proof{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important;margin-top:16px !important;}
  .orange-home-proof article{padding:9px 8px !important;min-width:0 !important;}
  .orange-home-proof b,.orange-home-proof small{overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;}
  .orange-live-card{position:relative !important;right:auto !important;bottom:auto !important;width:100% !important;margin-top:12px !important;padding:12px !important;border-radius:22px !important;}
  .orange-live-top{align-items:center !important;}
  .orange-live-mini{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important;}
  .orange-mini-strip{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;}
  .orange-mini-strip span{min-width:0 !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;text-align:center !important;}
  .orange-section-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;}
  .orange-info-card.wide{grid-column:1/-1 !important;}
  .orange-product-card{min-width:0 !important;padding:14px !important;border-radius:22px !important;}
  .orange-product-card h3{font-size:15px !important;line-height:1.08 !important;letter-spacing:-.04em !important;display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important;}
  .orange-product-card p{font-size:11px !important;line-height:1.35 !important;display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important;}

  .product-page-body .pd-hero{
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    padding:22px 16px 14px !important;
    border-radius:30px !important;
  }
  .product-page-body .pd-kicker{font-size:9.8px !important;line-height:1 !important;padding:8px 10px !important;}
  .product-page-body .pd-hero h1{font-size:clamp(37px,12vw,55px) !important;line-height:.92 !important;letter-spacing:-.085em !important;margin:14px 0 12px !important;}
  .product-page-body .pd-hero-actions{gap:8px !important;margin-top:12px !important;}
  .product-page-body .pd-hero-actions a{min-height:38px !important;padding:0 13px !important;font-size:11px !important;border-radius:13px !important;}

  .product-page-body .pd-live-card{
    width:100% !important;
    min-height:0 !important;
    padding:11px !important;
    border-radius:20px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 58px !important;
    grid-template-areas:"top ring" "eq ring" "row1 row2" !important;
    align-items:center !important;
    gap:7px 10px !important;
  }
  .product-page-body .pd-live-top{grid-area:top !important;min-width:0 !important;display:flex !important;align-items:center !important;gap:8px !important;}
  .product-page-body .pd-live-top div{min-width:0 !important;}
  .product-page-body .pd-live-top small{font-size:8.8px !important;line-height:1 !important;white-space:nowrap !important;}
  .product-page-body .pd-live-top b{font-size:13px !important;line-height:1 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
  .product-page-body .pd-live-top span{font-size:9px !important;line-height:1 !important;padding:6px 8px !important;white-space:nowrap !important;}
  .product-page-body .pd-ring-box{grid-area:ring !important;width:56px !important;height:56px !important;margin:0 !important;}
  .product-page-body .pd-ring-core b{font-size:15px !important;line-height:1 !important;}
  .product-page-body .pd-ring-core small{font-size:6.5px !important;line-height:1 !important;}
  .product-page-body .pd-eq{grid-area:eq !important;height:24px !important;align-items:end !important;gap:3px !important;margin:0 !important;}
  .product-page-body .pd-eq i{width:5px !important;max-height:23px !important;border-radius:999px !important;}
  .product-page-body .pd-live-row{font-size:9.5px !important;line-height:1 !important;padding:7px 8px !important;border-radius:11px !important;margin:0 !important;min-width:0 !important;width:100% !important;display:flex !important;align-items:center !important;justify-content:space-between !important;gap:6px !important;}
  .product-page-body .pd-live-row:nth-last-child(2),
  .product-page-body .pd-live-row.khf-live-row-1{grid-area:row1 !important;}
  .product-page-body .pd-live-row:nth-last-child(1),
  .product-page-body .pd-live-row.khf-live-row-2{grid-area:row2 !important;}
  .product-page-body .pd-live-row span,.product-page-body .pd-live-row b{white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;min-width:0 !important;}

  .product-page-body .pd-stats{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important;margin:11px 0 10px !important;}
  .product-page-body .pd-stats article{min-width:0 !important;min-height:62px !important;padding:10px 8px !important;border-radius:18px !important;}
  .product-page-body .pd-stats small{font-size:9.5px !important;line-height:1 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
  .product-page-body .pd-stats b{font-size:22px !important;line-height:1 !important;}
  .product-page-body .pd-filter-bar{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:7px !important;margin:12px 0 !important;}
  .product-page-body .pd-filter-bar button{min-width:0 !important;min-height:34px !important;padding:0 6px !important;font-size:10px !important;border-radius:13px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}

  .product-page-body .pd-product-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;}
  .product-page-body .pd-product-card{min-height:330px !important;padding:13px !important;border-radius:23px !important;}
  .product-page-body .pd-card-head{margin-bottom:9px !important;}
  .product-page-body .pd-icon-box{width:47px !important;height:47px !important;min-width:47px !important;flex-basis:47px !important;border-radius:15px !important;}
  .product-page-body .pd-card-head > span{font-size:8.2px !important;padding:6px 7px !important;max-width:64px !important;}
  .product-page-body .pd-product-card h2{font-size:18px !important;line-height:1.05 !important;margin-bottom:7px !important;}
  .product-page-body .pd-chip-row{gap:4px !important;min-height:38px !important;max-height:39px !important;margin-bottom:8px !important;}
  .product-page-body .pd-chip-row span{font-size:8.1px !important;padding:5px 6px !important;max-width:72px !important;}
  .product-page-body .pd-package-strip{gap:5px !important;max-height:49px !important;margin-bottom:9px !important;}
  .product-page-body .pd-package-strip em{min-width:31px !important;max-width:50px !important;font-size:9.5px !important;padding:6px 6px !important;}
  .product-page-body .pd-price-row{min-height:55px !important;padding:9px !important;margin-bottom:10px !important;border-radius:14px !important;}
  .product-page-body .pd-price-row small{font-size:9px !important;}
  .product-page-body .pd-price-row strong{font-size:21px !important;}
  .product-page-body .pd-order-btn{min-height:37px !important;font-size:10.5px !important;border-radius:13px !important;}

  .product-page-body .pd-flow-panel.flow-live-panel{padding:14px !important;border-radius:24px !important;margin-bottom:24px !important;}
  .product-page-body .flow-live-head{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:8px !important;margin-bottom:12px !important;}
  .product-page-body .flow-live-head h2{font-size:18px !important;line-height:1.08 !important;margin:5px 0 0 !important;}
  .product-page-body .flow-live-kicker{font-size:9px !important;}
  .product-page-body .flow-live-status{font-size:10px !important;padding:7px 9px !important;white-space:nowrap !important;}
  .product-page-body .flow-live-rail{display:none !important;}
  .product-page-body .pd-flow-steps.flow-live-steps{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important;}
  .product-page-body .flow-step{padding:10px 7px !important;border-radius:14px !important;min-height:86px !important;}
  .product-page-body .flow-step em{font-size:9px !important;}
  .product-page-body .flow-step b{font-size:10.5px !important;line-height:1.05 !important;white-space:nowrap !important;}
  .product-page-body .flow-step small{font-size:8.3px !important;line-height:1.15 !important;display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important;}

  .invoice-head-v2{display:flex !important;align-items:flex-start !important;gap:10px !important;}
  .invoice-product-name{font-size:clamp(25px,8vw,34px) !important;}
  .invoice-id{font-size:11px !important;line-height:1.4 !important;}
  .invoice-status-badge{flex:0 0 auto !important;max-width:92px !important;font-size:10px !important;padding:8px 9px !important;overflow:hidden !important;text-overflow:ellipsis !important;}
  .qris-container{padding:15px !important;border-radius:24px !important;}
  .qris-img-frame{padding:12px !important;border-radius:22px !important;}
  .qris-img-frame img{width:min(100%,285px) !important;border-radius:16px !important;}
  .qris-amount-box{padding:14px 12px !important;border-radius:18px !important;}
  .qris-amount-label{font-size:10px !important;}
  .qris-amount-value{font-size:clamp(35px,12vw,50px) !important;}
  .qris-unique-hint{font-size:11px !important;line-height:1.35 !important;}
}
@media (max-width:380px){
  .product-page-body .pd-product-grid{gap:10px !important;}
  .product-page-body .pd-product-card{padding:11px !important;min-height:322px !important;border-radius:21px !important;}
  .product-page-body .pd-icon-box{width:43px !important;height:43px !important;min-width:43px !important;flex-basis:43px !important;}
  .product-page-body .pd-card-head > span{font-size:7.6px !important;max-width:58px !important;padding:5px 6px !important;}
  .product-page-body .pd-product-card h2{font-size:16.5px !important;}
  .product-page-body .pd-chip-row span{font-size:7.7px !important;padding:5px 5px !important;max-width:63px !important;}
  .product-page-body .pd-package-strip em{min-width:29px;font-size:8.8px !important;padding:6px 5px !important;}
  .product-page-body .pd-price-row strong{font-size:19px !important;}
  .product-page-body .pd-order-btn{font-size:10px !important;min-height:35px !important;}
}
@media (min-width:800px){
  .product-page-body .pd-product-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:18px !important;}
  .product-page-body .pd-product-card{min-height:360px !important;padding:18px !important;}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
}