/* 购买单 + 提示条：店面和专题页共用，颜色都写在这里，不跟页面走。外面冷的雾，单子是暖的 */
.dr-veil {
  position: fixed; inset: 0; z-index: 50; background: rgba(176, 186, 193, .38);
  -webkit-backdrop-filter: blur(8px) saturate(.7); backdrop-filter: blur(8px) saturate(.7);
  opacity: 0; pointer-events: none; transition: opacity .5s ease;
}
.dr {
  --dr-ink: #1e1b18; --dr-ink2: #6f675f; --dr-ink3: #a39b92; --dr-line: rgba(30, 27, 24, .14);
  --dr-warm: #d4935a; --dr-glow: #f0c896; --dr-crust: #6e4024;
  position: fixed; z-index: 51; top: 0; right: 0; bottom: 0; width: min(480px, 100%); overflow-y: auto; overscroll-behavior: contain;
  padding: 44px 44px 40px; background: #f7f2ea; color: var(--dr-ink);
  font-family: "ZZ", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 400; line-height: 1.8; text-align: left;
  box-shadow: -30px 0 80px rgba(110, 64, 36, .14);
  transform: translateX(104%); visibility: hidden;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), visibility 0s .7s;
}
.dr::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--dr-glow), var(--dr-warm)); opacity: .7; }
.dr-open { overflow: hidden; }
.dr-open .dr-veil { opacity: 1; pointer-events: auto; }
.dr-open .dr { transform: none; visibility: visible; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.dr button { font: inherit; color: inherit; }
.dr-x { position: absolute; top: 52px; right: 36px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 14px !important; color: var(--dr-ink2) !important; }
.dr-x:hover { color: var(--dr-ink) !important; }
.dr-x:focus { outline: none; }
.dr-x:focus-visible { text-decoration: underline; text-underline-offset: 6px; }
.dr h2 { margin: 0; padding-right: 64px; font-size: 32px; font-weight: 300; line-height: 1.35; color: var(--dr-ink); }
.dr-price { margin: 8px 0 0; font-size: 20px; font-weight: 300; font-variant-numeric: tabular-nums; }
.dr-price span, .dr-price small { margin-left: 14px; font-size: 13px; color: var(--dr-ink2); }
.dr-contact { margin-top: 44px; }
.dr-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; margin: 0; font-size: 22px; font-weight: 300; line-height: 1.6; color: var(--dr-ink); }
.dr-id span { font-size: 14px; color: var(--dr-ink2); }
.dr-id .dr-link { margin-top: 0; }
.dr-qr { display: grid; place-items: center; width: 160px; height: 160px; margin-top: 16px; border: 1px solid var(--dr-line); background: #fff; }
.dr-qr img { width: 100%; height: 100%; object-fit: contain; padding: 8px; display: block; }
.dr-qr.ph { background: #fbf8f3; border-style: dashed; font-size: 13px; color: var(--dr-ink3); }
.dr-row { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.dr-link {
  display: inline-block; margin-top: 12px; padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--dr-ink); background: none;
  cursor: pointer; font-size: 14px !important; color: var(--dr-ink) !important; text-decoration: none;
}
.dr-link:hover { color: var(--dr-crust) !important; border-color: var(--dr-crust); }
.dr-tip { margin: 24px 0 0; font-size: 14px; line-height: 1.9; color: var(--dr-ink2); }

.dr-toast {
  position: fixed; left: 50%; bottom: 110px; z-index: 60; transform: translate(-50%, 10px);
  padding: 10px 20px; background: #1e1b18; color: #f4efe6;
  font-family: "ZZ", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
}
.dr-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 手机：单子从底下升起 */
@media (max-width: 860px) {
  .dr {
    top: auto; width: 100%; max-height: 90vh; max-height: 90dvh; padding: 34px 24px calc(30px + env(safe-area-inset-bottom));
    transform: translateY(104%); box-shadow: 0 -30px 80px rgba(110, 64, 36, .14);
  }
  .dr::before { right: 0; bottom: auto; width: auto; height: 3px; background: linear-gradient(90deg, var(--dr-glow), var(--dr-warm)); }
  .dr-x { top: 26px; right: 24px; }
  .dr h2 { font-size: 26px; }
  .dr-id { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .dr, .dr-open .dr, .dr-veil { transition: none; }
}
/* 打开时，单子里的字跟着单子滑进来，一行一行浮现 */
@media (prefers-reduced-motion: no-preference) {
  .dr-open .dr h2, .dr-open .dr-price, .dr-open .dr-contact, .dr-open .dr-tip { animation: dr-in 1s cubic-bezier(.2, .7, .2, 1) both; }
  .dr-open .dr h2 { animation-delay: .18s; }
  .dr-open .dr-price { animation-delay: .26s; }
  .dr-open .dr-contact { animation-delay: .34s; }
  .dr-open .dr-tip { animation-delay: .58s; }
  .dr-link { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; border-bottom: 0; transition: background-size .6s cubic-bezier(.2, .7, .2, 1), color .3s; }
  .dr-link:hover { background-size: 0 1px; background-position: 100% 100%; }
}
@keyframes dr-in { from { opacity: 0; transform: translateY(14px); } }