:root {
  --purple: #916aff;
  --purple-deep: #5f46c7;
  --red: #ff4b4d;
  --pink: #ff2b76;
  --surface: #f7f7f7;
  --muted: rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; background: #e9e9ec; color: rgba(0, 0, 0, .95); }
button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.detail-shell { position: relative; width: 375px; height: 812px; margin: auto; overflow: hidden; background: var(--surface); }
.detail-shell > h1, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.detail-scroll { position: absolute; inset: 0 0 84px; overflow-y: auto; scrollbar-width: none; touch-action: none; overscroll-behavior: none; }
.detail-scroll::-webkit-scrollbar { display: none; }
.detail-scroll-content { min-height: 100%; padding-bottom: 14px; transform: translate3d(0, 0, 0); will-change: transform; }

.detail-hero { position: relative; height: 290px; overflow: hidden; background: #eee; }
.detail-hero-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; }
.detail-status { position: absolute; top: 10px; left: 0; right: 0; height: 24px; padding: 0 29px 0 46px; display: flex; align-items: center; justify-content: space-between; }
.detail-status strong { font-size: 15px; line-height: 20px; }
.detail-status img { width: 95px; height: 22px; object-fit: contain; filter: brightness(0); }
.detail-back, .detail-share { position: absolute; z-index: 2; top: 49px; width: 32px; height: 32px; padding: 4px; display: grid; place-items: center; text-decoration: none; }
.detail-back { left: 10px; }
.detail-share { right: 10px; }
.detail-back img, .detail-share img { display: block; width: 24px; height: 24px; }
.purchase-toast { position: absolute; left: 42px; top: 55px; width: 200px; height: 20px; object-fit: contain; }
.hero-product-title { position: absolute; left: 24px; top: 96px; color: var(--purple-deep); }
.hero-product-title strong { display: block; font-size: 38px; line-height: 43px; letter-spacing: -1px; }
.hero-product-title span { display: inline-block; margin-top: 7px; padding: 3px 23px 4px; border-radius: 22px; background: var(--purple-deep); color: #fff; font-size: 23px; line-height: 28px; font-weight: 700; }
.photo-count { position: absolute; right: 12px; bottom: 9px; padding: 4px 8px; border-radius: 2px; background: rgba(0,0,0,.34); color: #fff; font-size: 10px; }

.product-summary { position: relative; z-index: 1; width: 375px; height: 177px; margin-top: -6px; overflow: hidden; background: transparent; }
.product-summary-artwork { display: block; width: 375px; height: 177px; }
.package-options { position: absolute; inset: 0; pointer-events: none; }
.package-hit-area { position: absolute; top: 93px; width: 212px; height: 72px; border-radius: 10px; pointer-events: auto; }
.package-hit-area:first-child { left: 13px; }
.package-hit-area:last-child { left: 240px; }

.service-details { position: relative; width: 375px; height: 150px; margin-top: 15px; overflow: hidden; background: #fff; }
.service-details-artwork { display: block; width: 375px; height: 150px; }
.service-detail-hit-area { position: absolute; left: 0; width: 375px; height: 38px; }
.coupon-hit { top: 36px; }
.service-hit { top: 74px; }
.address-hit { top: 112px; }

.qa-section { position: relative; width: 375px; height: 198px; margin-top: 15px; overflow: hidden; background: #fff; }
.qa-artwork { display: block; width: 375px; height: 198px; }
.qa-view-hit-area { position: absolute; top: 10px; right: 8px; width: 54px; height: 38px; }
.reviews-section { position: relative; width: 375px; height: 452px; margin-top: 15px; overflow: hidden; background: #fff; }
.reviews-artwork { display: block; width: 375px; height: 452px; }
.reviews-view-hit-area { position: absolute; left: 135px; bottom: 5px; width: 105px; height: 40px; }

.detail-purchase-bar { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; width: 375px; height: 84px; overflow: hidden; background: #fff; box-shadow: 0 -3px 12px rgba(0,0,0,.035); }
.detail-purchase-bar-artwork { display: block; width: 375px; height: 84px; }
.detail-purchase-bar nav { position: absolute; inset: 0; pointer-events: none; }
.purchase-bar-hit-area { position: absolute; top: 6px; height: 44px; pointer-events: auto; }
.phone-hit { left: 0; width: 49px; }
.wechat-hit { left: 49px; width: 49px; }
.service-contact-hit { left: 98px; width: 49px; }
.detail-primary-action { left: 155px; width: 208px; border-radius: 22px; }
.detail-primary-action:active { transform: scale(.98); }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(145,106,255,.4); outline-offset: 2px; }

@media (max-width: 375px) { .detail-shell { width: 100vw; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
.device-stage { position: relative; width: 375px; height: 812px; margin: auto; }
.device-frame { display: none; }
@media (min-width: 700px) and (min-height: 850px) {
  html, body { height: 100%; }
  body { display: grid; place-items: center; overflow: hidden; }
  .device-stage { width: 475px; height: 903px; transform: scale(.9); }
  .device-stage .detail-shell { position: absolute; z-index: 1; left: 57px; top: 44px; }
  .device-frame { position: absolute; z-index: 2; inset: 0; display: block; width: 475px; height: 903px; object-fit: fill; mix-blend-mode: multiply; pointer-events: none; user-select: none; }
}
@media (min-width: 700px) and (min-height: 930px) { .device-stage { transform: none; } }