/* Dilarang keras menghapus credits
Devoleper : Rahmad Tenpoles
WhatsApp : wa.me/6285764735713
Instagram : instagram.com/rahmad_tenpoles
Telegram : t.me/rahmad_tenpoles
Dilarang keras menghapus credits */
/* =====================================================================================================
   PRODUCT DETAIL / CHECKOUT (views/produk-detail.ejs) — redesign, UI UX Pro Max round 1.
   Own namespace (.vx-*) so none of the ~200 older .vf-pd2 / .pd-* / :where(.vf-pdx) rules in ui.css apply.
   Tokens only (--vf-*): follows light/dark and the six global themes. Weights 400-600, 8 px grid,
   radius ctl / card / pill, 48 px touch targets, motion 150-300 ms (off under reduced motion).
   ===================================================================================================== */

.vx-pdp {
  --vx-gap: 16px;
  --vx-pad: 16px;
  --vx-side-w: 400px;
  width: 100%; max-width: calc(var(--vf-container, 1184px) + 2 * var(--vf-page-pad, 16px)); margin: 0 auto;
  padding: 8px var(--vf-page-pad, 16px) 24px; box-sizing: border-box;
}
.vx-pdp *, .vx-pdp *::before, .vx-pdp *::after { box-sizing: border-box; }
.vx-pdp [hidden] { display: none !important; }
.vx-pdp :is(h1, h2, p, dl, dd, ul, fieldset) { margin: 0; }
.vx-pdp__flash { margin-bottom: var(--vx-gap); }
.vx-num { font-family: var(--vf-font-num); font-variant-numeric: tabular-nums; }
.vx-muted { color: var(--vf-text-2); font: 400 14px/20px var(--vf-font); }
.vx-dot { width: 4px; height: 4px; border-radius: 999px; background: var(--vf-text-3); display: inline-block; }

/* ---------- layout ---------- */
.vx-pdp__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vx-gap); align-items: start; }
.vx-pdp__side { display: contents; }                 /* phones: the purchase cards flow in the page */
.vx-pdp__media { order: 1; min-width: 0; }
.vx-info { order: 2; }
.vx-desc { order: 3; }
.vx-owned { order: 2; }   /* already bought: the download comes right after the name */
.vx-step { order: 4; }
.vx-pay { order: 5; }

@media (min-width: 1024px) {
  .vx-pdp { --vx-gap: 24px; --vx-pad: 24px; padding-top: 16px; }
  .vx-pdp__grid { grid-template-columns: minmax(0, 1fr) var(--vx-side-w); grid-template-areas: "media side" "desc side"; column-gap: 32px; }
  .vx-pdp__media { grid-area: media; }
  .vx-desc { grid-area: desc; }
  .vx-pdp__side { grid-area: side; display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--vf-top-h, 64px) + 16px); }
}
@media (min-width: 1280px) { .vx-pdp { --vx-side-w: 440px; } }

/* ---------- card ---------- */
.vx-card { background: var(--vf-surface-2); border: 1px solid var(--vf-border); border-radius: var(--vf-r-card, 16px); padding: var(--vx-pad); box-shadow: var(--vf-e1); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vx-card__title { display: flex; align-items: center; gap: 8px; font: 600 16px/24px var(--vf-font); color: var(--vf-text-1); }
@media (min-width: 1024px) { .vx-card__title { font-size: 18px; } }

/* ---------- gallery ---------- */
.vx-gal { position: relative; border-radius: var(--vf-r-card, 16px); overflow: hidden; background: var(--vf-surface-3); border: 1px solid var(--vf-border); aspect-ratio: 4 / 3; outline: none; }
.vx-gal:focus-visible { box-shadow: 0 0 0 2px var(--vf-surface-1), 0 0 0 4px var(--vf-focus); }
.vx-gal__track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.vx-gal__track::-webkit-scrollbar { display: none; }
.vx-gal__slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.vx-gal__zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.vx-gal__zoom:focus-visible { outline: 2px solid var(--vf-focus); outline-offset: -4px; }
.vx-gal__slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vx-gal__fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--vf-text-3); }
.vx-gal__slide.is-broken img { visibility: hidden; }
.vx-gal__slide.is-broken .vx-gal__fallback { display: flex; }
.vx-gal__slide.is-broken .vx-gal__zoom { cursor: default; }
.vx-gal__hint { position: absolute; top: 12px; left: 12px; width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--vf-surface-2) 88%, transparent); color: var(--vf-text-2); box-shadow: var(--vf-e1); pointer-events: none; }
.vx-gal__count { position: absolute; top: 12px; right: 12px; height: 24px; padding: 0 8px; border-radius: 999px; display: flex; align-items: center; background: color-mix(in srgb, #000 55%, transparent); color: #fff; font: 600 12px/16px var(--vf-font-num); font-variant-numeric: tabular-nums; pointer-events: none; }
.vx-gal__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.vx-gal__dot { width: 8px; height: 8px; border-radius: 999px; background: color-mix(in srgb, #fff 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, #000 18%, transparent); }
.vx-gal__dot.is-on { width: 20px; background: #fff; }
.vx-gal__arrow { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 999px; border: 1px solid var(--vf-border); background: var(--vf-surface-2); color: var(--vf-text-1); box-shadow: var(--vf-e2); display: none; align-items: center; justify-content: center; cursor: pointer; }
.vx-gal__arrow--prev { left: 12px; } .vx-gal__arrow--next { right: 12px; }
.vx-gal__arrow:focus-visible { outline: 2px solid var(--vf-focus); outline-offset: 2px; display: flex; }
@media (hover: hover) and (pointer: fine) { .vx-gal__arrow { display: flex; opacity: 0; } .vx-gal:hover .vx-gal__arrow, .vx-gal:focus-within .vx-gal__arrow { opacity: 1; } .vx-gal__arrow:hover { background: var(--vf-surface-3); } }
.vx-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.vx-thumbs::-webkit-scrollbar { display: none; }
.vx-thumb { flex: none; width: 64px; height: 48px; padding: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--vf-border); background: var(--vf-surface-3); cursor: pointer; opacity: .72; }
.vx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vx-thumb.is-on { opacity: 1; border: 2px solid var(--vf-accent); }
.vx-thumb:focus-visible { outline: 2px solid var(--vf-focus); outline-offset: 2px; }
@media (min-width: 1024px) { .vx-thumb { width: 80px; height: 60px; } }
@media (max-width: 1023.98px) { .vx-pdp__media { margin: 0 calc(-1 * var(--vf-page-pad, 16px)); } .vx-gal { border-radius: 0; border-width: 1px 0; } .vx-thumbs { padding: 2px var(--vf-page-pad, 16px); } }

/* no product images: a tinted stage with the product logo (tint follows the category hue) */
.vx-hero-tile { aspect-ratio: 16 / 9; border-radius: var(--vf-r-card, 16px); display: flex; align-items: center; justify-content: center;
  background: hsl(var(--pc-h, 245) 70% 95%); border: 1px solid color-mix(in srgb, hsl(var(--pc-h, 245) 60% 50%) 18%, var(--vf-border)); }
html.dark-mode .vx-hero-tile { background: hsl(var(--pc-h, 245) 28% 16%); }
.vx-hero-tile__logo { position: relative; width: 112px; height: 112px; border-radius: 24px; overflow: hidden; background: var(--vf-surface-2); color: var(--vf-text-3); box-shadow: var(--vf-e2); display: flex; align-items: center; justify-content: center; }
.vx-hero-tile__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023.98px) { .vx-hero-tile { aspect-ratio: 2 / 1; } .vx-hero-tile__logo { width: 88px; height: 88px; border-radius: 20px; } }

/* ---------- name, price, trust ---------- */
.vx-info { gap: 12px; }
.vx-info__top { display: flex; flex-wrap: wrap; gap: 8px; }
.vx-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: 999px; font: 600 12px/16px var(--vf-font); text-decoration: none; white-space: nowrap; background: var(--vf-surface-3); color: var(--vf-text-2); }
.vx-chip .rs-icon { width: 14px; height: 14px; }
.vx-chip--cat { background: var(--vf-accent-subtle); color: var(--vf-accent-text); position: relative; }
.vx-chip--cat::after { content: ''; position: absolute; inset: -10px -4px; }   /* 48 px tall hit area */
.vx-chip--ok { background: var(--vf-success-subtle); color: var(--vf-success); }
.vx-chip--info { background: var(--vf-info-subtle); color: var(--vf-info); }
.vx-info__title { font: 600 22px/28px var(--vf-font); letter-spacing: -0.01em; color: var(--vf-text-1); text-wrap: balance; overflow-wrap: anywhere; outline: none; }
@media (min-width: 1024px) { .vx-info__title { font-size: 24px; line-height: 32px; } }
.vx-info__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 400 14px/20px var(--vf-font); color: var(--vf-text-2); }
.vx-info__meta b { font-weight: 600; color: var(--vf-text-1); }
.vx-rating { display: inline-flex; align-items: center; gap: 4px; }
.vx-rating .rs-icon { color: var(--vf-warning); }
.vx-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.vx-price__now { font: 600 28px/36px var(--vf-font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--vf-text-1); }
@media (min-width: 1024px) { .vx-price__now { font-size: 32px; line-height: 40px; } }
.vx-price__was { font: 400 16px/24px var(--vf-font-num); color: var(--vf-text-3); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.vx-price__off { align-self: center; padding: 2px 8px; border-radius: 8px; background: var(--vf-danger-subtle); color: var(--vf-danger); font: 600 12px/16px var(--vf-font-num); }
.vx-price__voucher { flex-basis: 100%; display: inline-flex; align-items: center; gap: 6px; font: 500 14px/20px var(--vf-font); color: var(--vf-success); }
.vx-price__note { flex-basis: 100%; font: 400 14px/20px var(--vf-font); color: var(--vf-text-2); }
.vx-trust { list-style: none; padding: 12px 0 0; border-top: 1px solid var(--vf-border); display: flex; flex-direction: column; gap: 8px; }
.vx-trust li { display: flex; align-items: flex-start; gap: 8px; font: 400 14px/20px var(--vf-font); color: var(--vf-text-2); }
.vx-trust li > .rs-icon { flex: none; margin-top: 2px; color: var(--vf-success); }
.vx-link { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0; border: 0; background: none; color: var(--vf-accent-text); font: 600 14px/20px var(--vf-font); text-decoration: none; cursor: pointer; position: relative; }
.vx-link::after { content: ''; position: absolute; inset: -12px -4px; }
.vx-link:hover { text-decoration: underline; }
.vx-link:focus-visible { outline: 2px solid var(--vf-focus); outline-offset: 2px; border-radius: 4px; }

/* ---------- steps + fields ---------- */
.vx-step__n { flex: none; width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--vf-accent-subtle); color: var(--vf-accent-text); font: 600 12px/16px var(--vf-font-num); }
.vx-field { display: flex; flex-direction: column; gap: 6px; }
.vx-label { font: 600 14px/20px var(--vf-font); color: var(--vf-text-1); }
.vx-req { color: var(--vf-danger); font-weight: 600; }
.vx-input { width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--vf-border-strong); border-radius: var(--vf-r-ctl, 12px); background: var(--vf-surface-2); color: var(--vf-text-1); font: 400 16px/24px var(--vf-font); outline: none; -webkit-appearance: none; appearance: none; }
.vx-input::placeholder { color: var(--vf-text-3); }
.vx-input:hover { border-color: color-mix(in srgb, var(--vf-border-strong) 60%, var(--vf-text-2)); }
.vx-input:focus-visible, .vx-input:focus { border-color: var(--vf-accent); box-shadow: 0 0 0 1px var(--vf-accent), 0 0 0 4px color-mix(in srgb, var(--vf-focus) 28%, transparent); }
.vx-input[aria-invalid="true"] { border-color: var(--vf-danger); box-shadow: 0 0 0 1px var(--vf-danger); }
.vx-hint { display: flex; align-items: flex-start; gap: 6px; font: 400 13px/18px var(--vf-font); color: var(--vf-text-2); }
.vx-hint .rs-icon { flex: none; margin-top: 1px; }
.vx-hint--warn .rs-icon { color: var(--vf-warning); }
.vx-ferr { display: flex; align-items: flex-start; gap: 6px; font: 500 13px/18px var(--vf-font); color: var(--vf-danger); }
.vx-ferr .rs-icon { flex: none; margin-top: 1px; }
.vx-pw { position: relative; }
.vx-pw .vx-input { padding-right: 52px; }
.vx-pw__toggle { position: absolute; top: 0; right: 0; width: 48px; height: 48px; border: 0; background: none; color: var(--vf-text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--vf-r-ctl, 12px); }
.vx-pw__toggle:focus-visible { outline: 2px solid var(--vf-focus); outline-offset: -4px; }
.vx-stepper { display: flex; align-items: stretch; border: 1px solid var(--vf-border-strong); border-radius: var(--vf-r-ctl, 12px); background: var(--vf-surface-2); overflow: hidden; }
.vx-stepper:focus-within { border-color: var(--vf-accent); box-shadow: 0 0 0 1px var(--vf-accent); }
.vx-stepper__btn { flex: none; width: 48px; min-height: 48px; border: 0; background: var(--vf-surface-3); color: var(--vf-accent-text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.vx-stepper__btn:focus-visible { outline: 2px solid var(--vf-focus); outline-offset: -3px; }
.vx-stepper__input.vx-input { flex: 1; min-width: 0; border: 0; border-radius: 0; box-shadow: none; text-align: center; font-family: var(--vf-font-num); font-weight: 600; -moz-appearance: textfield; }
.vx-stepper__input::-webkit-inner-spin-button, .vx-stepper__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.vx-stepper__unit { display: flex; align-items: center; padding-right: 12px; font: 500 14px/20px var(--vf-font); color: var(--vf-text-2); }

/* ---------- payment ---------- */
.vx-notice { display: flex; align-items: flex-start; gap: 8px; padding: 12px; border-radius: var(--vf-r-ctl, 12px); font: 400 14px/20px var(--vf-font); }
.vx-notice .rs-icon { flex: none; }
.vx-notice a { color: inherit; font-weight: 600; }
.vx-notice--warn { background: var(--vf-warning-subtle); color: var(--vf-text-1); }
.vx-notice--warn .rs-icon { color: var(--vf-warning); }
/* payment tiles (.vx-methods / .vx-method) live in vf-upgrade.css: shared by every checkout */
.vx-topup { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 8px 12px; border-radius: var(--vf-r-ctl, 12px); background: var(--vf-danger-subtle); font: 400 14px/20px var(--vf-font); color: var(--vf-text-1); }
.vx-topup[hidden] { display: none; }

.vx-voucher { border: 1px dashed var(--vf-border-strong); border-radius: var(--vf-r-ctl, 12px); }
.vx-voucher[open] { border-style: solid; }
.vx-voucher__sum { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; cursor: pointer; font: 500 14px/20px var(--vf-font); color: var(--vf-text-1); border-radius: var(--vf-r-ctl, 12px); }
.vx-voucher__sum::-webkit-details-marker { display: none; }
.vx-voucher__sum::marker { content: ''; }
.vx-voucher__sum > .rs-icon:first-child { color: var(--vf-accent-text); }
.vx-voucher__sum > span:nth-child(2) { flex: 1; }
.vx-voucher__chev { display: inline-flex; color: var(--vf-text-2); }
.vx-voucher[open] .vx-voucher__chev { transform: rotate(180deg); }
.vx-voucher__sum:focus-visible { outline: 2px solid var(--vf-focus); outline-offset: 2px; }
.vx-voucher__body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.vx-voucher__row { display: flex; gap: 8px; }
.vx-voucher__row .vx-input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .02em; }
.vx-voucher__row .vx-input::placeholder { text-transform: none; letter-spacing: 0; }
.vx-voucher__row .vf-btn { flex: none; min-height: 48px; }
.vx-voucher__msg { display: flex; align-items: flex-start; gap: 6px; font: 400 13px/18px var(--vf-font); color: var(--vf-text-2); }
.vx-voucher__msg:empty { display: none; }
.vx-voucher__msg .rs-icon { flex: none; margin-top: 1px; }
.vx-voucher__msg.is-success { color: var(--vf-success); }
.vx-voucher__msg.is-error { color: var(--vf-danger); }

.vx-sum { display: flex; flex-direction: column; padding-top: 4px; }
.vx-sum__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; font: 400 14px/20px var(--vf-font); color: var(--vf-text-2); }
.vx-sum__row[hidden] { display: none; }
.vx-sum__row dd { color: var(--vf-text-1); font-family: var(--vf-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vx-sum__row--save dd { color: var(--vf-success); }
.vx-sum__row--total { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--vf-border); font: 600 16px/24px var(--vf-font); color: var(--vf-text-1); }
.vx-sum__row--total dd { font: 600 20px/28px var(--vf-font-num); }

/* buy bar: fixed on phones (replaces the bottom nav on this screen), the panel's last row from 1024 */
.vx-buybar { display: flex; align-items: center; gap: 12px; }
.vx-buybar__total { display: flex; flex-direction: column; min-width: 0; }
.vx-buybar__label { font: 400 12px/16px var(--vf-font); color: var(--vf-text-2); white-space: nowrap; }
.vx-buybar__value { font: 600 18px/24px var(--vf-font-num); font-variant-numeric: tabular-nums; color: var(--vf-text-1); white-space: nowrap; }
.vx-buybar__was { margin-left: 4px; font: 400 12px/16px var(--vf-font-num); color: var(--vf-text-3); }
.vx-buybar__btn.vf-btn { flex: 1 1 auto; min-width: 0; min-height: 52px; gap: 8px; border-radius: var(--vf-r-ctl, 12px); font-weight: 600; font-size: 16px; }
.vx-buybar__btn .rs-icon { opacity: .9; }
.vx-secure { display: flex; align-items: flex-start; gap: 6px; font: 400 12px/16px var(--vf-font); color: var(--vf-text-2); }
.vx-secure .rs-icon { flex: none; color: var(--vf-success); }
@media (max-width: 1023.98px) {
  .vx-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--rs-z-sticky, 100); padding: 12px var(--vf-page-pad, 16px) calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--vf-surface-2); border-top: 1px solid var(--vf-border); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 24px -8px rgba(24, 20, 70, .18); }
  html.dark-mode .vx-buybar { box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, .55); }
  .vx-buybar__btn.vf-btn { max-width: 260px; margin-left: auto; }
  body.vx-pdp-page.vf-has-actionbar { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  html.vf-kb-open .vx-buybar { display: none; }
}
@media (min-width: 1024px) {
  .vx-buybar__total { display: none; }
  .vx-buybar__btn.vf-btn { width: 100%; }
}

/* ---------- description ---------- */
.vx-desc { gap: 12px; }
.vx-desc__text { font: 400 15px/24px var(--vf-font); color: var(--vf-text-2); white-space: pre-line; overflow-wrap: anywhere; text-wrap: pretty; max-width: 72ch; }
@media (min-width: 1024px) { .vx-desc__text { font-size: 16px; } }
.vx-desc__text.is-clamped { max-height: calc(24px * 6); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.vx-desc__more { align-self: flex-start; }
.vx-rateblock { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--vf-border); }
.vx-rateblock__val { font: 600 20px/28px var(--vf-font-num); color: var(--vf-text-1); }
.vx-rateblock__stars { display: inline-flex; gap: 2px; color: var(--vf-warning); }

/* ---------- owned ---------- */
.vx-owned__head { display: flex; align-items: flex-start; gap: 12px; }
.vx-owned__ok { flex: none; width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--vf-success-subtle); color: var(--vf-success); }
.vx-owned__actions { display: flex; flex-direction: column; gap: 8px; }
.vx-btn-block.vf-btn { width: 100%; min-height: 48px; gap: 8px; }
.vx-seller { border: 1px solid var(--vf-border); border-radius: var(--vf-r-ctl, 12px); background: var(--vf-surface-3); padding: 12px 16px; }
.vx-seller .seller-msg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.vx-seller .seller-msg-label { font: 600 14px/20px var(--vf-font); color: var(--vf-text-1); }
.vx-seller .seller-msg-text { font: 400 15px/24px var(--vf-font); color: var(--vf-text-1); white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- motion (state changes only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .vx-gal__dot { transition: width 0ms, background-color 150ms var(--vx-ease-in, ease); }
  .vx-gal__arrow, .vx-thumb { transition: opacity 150ms var(--vx-ease-in, ease), border-color 150ms; }
  .vx-method, .vx-method__ico, .vx-method__check { transition: background-color 150ms var(--vx-ease-in, ease), border-color 150ms var(--vx-ease-in, ease), color 150ms; }
  .vx-method:active { transform: scale(.98); transition: transform 100ms; }
  .vx-voucher__chev { transition: transform 200ms var(--vx-ease-in, ease); }
  .vx-voucher[open] .vx-voucher__body { animation: vx-rise 200ms var(--vx-ease-in, ease) both; }
  .vx-ferr { animation: vx-rise 150ms var(--vx-ease-in, ease) both; }
  .vx-buybar__btn.vf-btn:active { transform: scale(.98); }
}

/* ---- Round 4e (UI/UX Pro Max pass: product detail + checkout) ---------------------------------------------------------
   1. Desktop: the description follows the image directly. The purchase column spans both rows; without row sizing the
      browser spread its extra height over row 1 too, leaving a tall blank gap between the image and "Deskripsi produk". */
@media (min-width: 1024px) { .vx-pdp__grid { grid-template-rows: auto 1fr; } .vx-desc { align-self: start; } }

/* 2. No product image: the tile carries the product's category colour and glyph (like the product cards), and is shorter
      on desktop so an empty picture never dominates the page. */
@media (min-width: 1024px) { .vx-hero-tile { aspect-ratio: 2 / 1; } }
.vx-hero-tile__logo .rs-icon { width: 40px; height: 40px; color: hsl(var(--pc-h, 245) 45% 42%); }
html.dark-mode .vx-hero-tile__logo .rs-icon { color: hsl(var(--pc-h, 245) 60% 72%); }

/* 3–4. The step list (.vx-flow) and the guest buy card live in vf-upgrade.css § 11 (also used by the stock product page). */