/* Consumer-only layer. Admin styles and all payment server behavior stay unchanged. */
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

.consumer {
  --page: #f6f7fa;
  --surface: #fff;
  --surface-soft: #f1f2f6;
  --text: #202333;
  --ink: var(--text);
  --muted: #646a7d;
  --line: #e2e4ec;
  --primary: #5b4dff;
  --primary-deep: #4035d8;
  --radius-lg: 16px;
  --radius-md: 10px;
  --shadow: none;
  background: var(--page);
  font-family: "Manrope", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 400;
  caret-color: var(--primary);
  scrollbar-color: #b9bdcb var(--page);
}

.consumer :is(button, .button, input, select) { min-height: 44px; }
.consumer :is(h1, h2, h3) { text-wrap: balance; font-weight: 650; }
.consumer :is(button, .button) {
  background: var(--text);
  box-shadow: none;
  font-weight: 600;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.consumer :is(button, .button):hover { transform: none; background: #373b50; box-shadow: none; }
.consumer :is(button, .button):disabled { opacity: .45; }
.consumer :is(button, .button).secondary { background: #eff0f5; color: var(--text); }
.consumer :is(button, .button).secondary:hover { background: #e3e5ed; }
.consumer input::placeholder { color: #6e7486; opacity: 1; }
.consumer :is(input, select, textarea) { font-size: 14px; }
.consumer :is(input, select, textarea):focus { box-shadow: none; border-color: var(--primary); }
.consumer :focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.consumer ::selection { background: #dedbff; color: #292165; }
.consumer a:not(.button):hover { color: var(--primary-deep); }
.consumer .shell { width: min(1440px, calc(100% - 80px)); }
.consumer .topbar { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.consumer .topbar-inner { min-height: 68px; gap: 20px; }
.consumer .brand { gap: 12px; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.consumer .brand-mark {
  width: 42px;
  height: 44px;
  border-radius: 12px 12px 12px 3px;
  background: var(--text);
  box-shadow: none;
  color: #dbd7ff;
  font: 750 29px/1 "Manrope", sans-serif;
}
.brand-wordmark { display: grid; gap: 0; }
.brand-wordmark small { font-size: 10px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.consumer .nav-actions { gap: 28px; }
.nav-link { font-size: 13px; font-weight: 500; }
.consumer .nav-actions .button { padding-inline: 19px; }
.consumer .locale-select { min-width: 105px; width: auto; border: 0; background: transparent; padding-inline: 6px; font-size: 12px; }
.consumer .store-page { padding-block: 0 32px; }
.consumer .notice-strip {
  margin: 0;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  gap: 26px;
  font-size: 12px;
}
.consumer .notice-strip > div { gap: 18px; }
.consumer .notice-strip strong { font-size: 11px; font-weight: 600; color: var(--primary-deep); }
.consumer .notice-strip p { color: var(--muted); }
.consumer #localeBadge { font-size: 11px; }
.catalog-intro { display: grid; grid-template-columns: 1fr minmax(280px, 430px); gap: 24px; align-items: center; padding-block: 20px; }
.intro-copy h1 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.35; letter-spacing: -.03em; margin: 0 0 6px; }
.intro-copy p { margin: 0; color: var(--muted); font-size: 13px; }
.catalog-search { display: grid; gap: 10px; min-width: 0; }
.catalog-search > .search-box, .catalog-search > .quick-row { grid-area: auto; }
.consumer .search-box { grid-template-columns: minmax(0, 1fr) auto; gap: 0; padding: 4px; background: #fff; border: 1px solid #d6d9e4; border-radius: 12px; }
.consumer .search-box input { border: 0; background: transparent; padding-inline: 13px; min-width: 0; box-shadow: none; font-size: 12px; }
.consumer .search-box button { min-height: 40px; padding: 8px 20px; font-size: 12px; }
.consumer .quick-row { gap: 5px; flex-wrap: wrap; }
.consumer .chip { color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 3px 8px; min-height: 28px; font-size: 11px; font-weight: 500; }
.consumer .chip:hover, .consumer .chip.active { color: var(--primary-deep); background: #eae8ff; border-color: transparent; }
.consumer .storefront { grid-template-columns: 140px minmax(0, 1fr); gap: 20px; scroll-margin-top: 88px; }
.consumer .catalog-sidebar { top: 88px; gap: 20px; min-width: 0; }
.consumer .side-block { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.consumer .side-block h2 { font-size: 12px; color: var(--muted); font-weight: 500; margin-bottom: 16px; padding-inline: 12px; }
.consumer .category-list { gap: 3px; }
.consumer .category-pill { background: transparent; color: #4e5467; padding: 10px 12px; font-size: 13px; font-weight: 500; border-radius: 8px; min-height: 44px; border: 1px solid transparent; }
.consumer .category-pill::after { content: none; }
.consumer .category-pill:hover { background: #edeef4; }
.consumer .category-pill.active { background: #eae8ff; color: var(--primary-deep); font-weight: 650; border-color: transparent; }
.consumer .category-pill.active::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }
.consumer .stats-card { gap: 0; margin: 0 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.consumer .stats-card h2 { margin-bottom: 8px; padding: 0; }
.consumer .stat-line { border: 0; padding-block: 5px; font-size: 11px; }
.consumer .stat-line strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.consumer .catalog-main { gap: 12px; min-width: 0; }
.consumer .section-head { min-height: 28px; }
.consumer .section-head h2 { font-size: 15px; font-weight: 600; }
.consumer .result-meta { font-size: 12px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.consumer .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.consumer .product {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px;
  gap: 8px;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
  transition: border-color 160ms ease;
}
.consumer .product { position: relative; }
.consumer .product:hover { border-color: #b8b4dd; transform: none; box-shadow: none; }
.product-link::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.product-link:focus-visible { outline: none; }
.product-link:focus-visible::after { outline: 2px solid var(--primary); outline-offset: 3px; }
.product-purchase button { position: relative; z-index: 1; }
.product-detail-hint { display: inline-block; margin-top: 4px; color: var(--primary-deep); font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.consumer .cover { position: relative; display: grid; place-items: center; grid-column: 1; grid-row: 1 / 3; align-self: center; width: 100%; height: auto; aspect-ratio: 30 / 13; background: #efeff7; color: #42435b; border-radius: 10px; overflow: hidden; font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.cover-fallback { display: grid; place-items: center; width: 100%; height: 100%; padding: 24px; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.4; }
.consumer .cover.has-image { display: grid; background: #f0f1f6; }
.consumer .cover.has-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #f0f1f6; }
.consumer .cover img[hidden] { display: none; }
.consumer .product > .cover { aspect-ratio: 2 / 1; align-self: stretch; flex: 0 0 auto; border-radius: 8px; }
.consumer .product:nth-child(even) .cover { background: #eae9f7; color: #51419a; }
.product-body { padding: 0; min-width: 0; }
.product-meta { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 5px; }
.product-category { color: var(--muted); font-size: 11px; }
.consumer .stock { display: inline-flex; align-items: center; gap: 5px; color: #267052; font-size: 10px; font-weight: 500; }
.consumer .stock::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.consumer .product h3 { font-size: 15px; line-height: 1.45; font-weight: 650; letter-spacing: -.02em; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.consumer .product p { margin-top: 4px; font-size: 12px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.product-purchase { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.catalog-options { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; font-size: 11px; color: var(--muted); }
.catalog-options-values { display: flex; flex-wrap: wrap; gap: 3px 8px; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.consumer .price { display: block; font-size: 22px; font-weight: 650; line-height: 1.25; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.consumer .price small { font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-inline-start: 5px; }
.product-minimum { display: block; color: var(--muted); font-size: 10px; font-weight: 400; margin-top: 5px; letter-spacing: 0; }
.unit-label { color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: 0; margin-inline-end: 6px; }
.consumer .stock.insufficient { color: #975209; }
.product-purchase button { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; font-size: 12px; border-radius: 8px; }
.consumer .empty { border-style: solid; background: #fff; padding: 55px 22px; border-radius: 12px; }
.consumer .grid > .empty { grid-column: 1 / -1; }
.empty p { margin: 0 0 18px; }
.consumer .loading-line { height: 360px; border-radius: 16px; }
.purchase-guide { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); scroll-margin-top: 88px; }
.guide-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.guide-heading h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.guide-heading > p { margin: 0; color: var(--muted); font-size: 12px; }
.guide-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; list-style: none; padding: 0; margin: 18px 0; counter-reset: purchase; }
.guide-steps li { counter-increment: purchase; padding-inline-start: 30px; position: relative; }
.guide-steps li::before { content: counter(purchase, decimal-leading-zero); position: absolute; inset-inline-start: 0; top: 2px; font-size: 11px; color: var(--primary-deep); font-variant-numeric: tabular-nums; }
.guide-steps strong { font-weight: 600; font-size: 13px; }
.guide-steps p { margin: 7px 0 0; color: var(--muted); font-size: 12px; max-width: 38ch; line-height: 1.8; }
.guide-note { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; border-top: 1px solid var(--line); padding-top: 16px; color: var(--muted); font-size: 11px; }
.guide-note a { color: var(--primary-deep); white-space: nowrap; text-underline-offset: 4px; text-decoration: underline; }
.site-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-block: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 500; }
.footer-divider { margin-inline: 12px; color: #b1b5c4; }
.consumer .modal { background: rgb(23 25 44 / 48%); z-index: 20; padding: 24px; }
.consumer:has(.modal.is-open) { overflow: hidden; }
.consumer .modal-card { width: min(680px, 100%); max-height: calc(100dvh - 48px); padding: 32px; border-radius: 16px; box-shadow: 0 24px 80px rgb(16 20 40 / 22%); }
.consumer .modal-head { padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.consumer .modal-head h2 { font-size: 23px; }
.consumer .modal-head button { font-size: 12px; min-height: 36px; padding: 7px 12px; }
.consumer #orderProduct { margin: 0; font-size: 14px; color: var(--text); font-weight: 500; }
.consumer .form-grid { gap: 20px 18px; }
.consumer label { font-weight: 500; font-size: 12px; color: #4f556a; }
.consumer label small { font-weight: 400; }
.consumer .checkout-summary { padding: 18px; background: var(--surface-soft); border: 0; border-radius: 10px; font-size: 12px; }
.consumer .checkout-summary-row strong { font-weight: 600; }
.consumer .checkout-summary-row.total { padding-top: 14px; margin-top: 5px; font-weight: 500; }
.consumer .checkout-summary-row.total strong { color: var(--text); font-size: 22px; font-weight: 650; }
.consumer .checkout-summary p { font-size: 11px; line-height: 1.8; }
.consumer #submitOrder { min-height: 48px; }
.consumer .paybox { background: #f3f4f8; border: 0; border-radius: 12px; padding: 20px; }
.consumer .paybox > strong { font-weight: 600; }
.consumer #createdOrderId { font-size: 12px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.consumer #createdAmount { font-size: 24px; font-variant-numeric: tabular-nums; }
.consumer .code { background: #242638; color: #f1f0ff; font-size: 12px; line-height: 1.85; border-radius: 10px; }
.consumer #binanceGuide { padding-top: 8px; font-size: 12px; }
.consumer #binanceGuide ol { margin: 0; padding-inline-start: 20px; }
.consumer #binanceGuide li + li { margin-top: 7px; }
.consumer #binanceGuide small { line-height: 1.8; }
.consumer .payment-status-head { background: #e8e9f1; border: 0; }
.consumer .payment-status-head.waiting { background: #e9e6ff; }
.consumer .payment-status-head.success { background: #e0f4eb; color: #16634a; }
.consumer .delivery-code { background: #242638; }
.delivered-account { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; min-width: 0; }
.consumer .credential-value { min-height: 44px; resize: vertical; font-family: Consolas, monospace; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.consumer .delivery-raw { white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.consumer .order-page { min-height: calc(100dvh - 180px); padding-block: 64px; }
.consumer .order-lookup-panel { width: min(780px, 100%); padding: 38px; border: 1px solid var(--line); box-shadow: none; border-radius: 16px; gap: 22px; }
.consumer .order-lookup-panel > h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.4; letter-spacing: -.03em; }
.consumer .order-lookup-panel > p { margin: -10px 0 0; font-size: 13px; max-width: 65ch; }
.consumer #queryForm { padding-top: 10px; }
.consumer #queryForm button { grid-column: 1 / -1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (min-width: 1200px) {
  .consumer .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1050px) {
  .consumer .shell { width: calc(100% - 48px); }
  .consumer .nav-actions { gap: 16px; }
  .catalog-intro { grid-template-columns: 1fr 360px; gap: 24px; }
  .intro-copy h1 { font-size: 26px; }
  .consumer .storefront { grid-template-columns: 128px minmax(0, 1fr); gap: 16px; grid-template-areas: "side main"; }
  .consumer .catalog-sidebar { grid-template-columns: 1fr; }
  .product-purchase { gap: 10px; }
  .guide-steps { gap: 24px; }
}
@media (max-width: 959px) {
  .consumer .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .consumer .nav-link { display: none; }
  .catalog-intro { grid-template-columns: 1fr; gap: 14px; padding-block: 18px; }
  .catalog-search { max-width: 560px; }
  .consumer .storefront { grid-template-columns: 1fr; grid-template-areas: "side" "main"; gap: 14px; }
  .consumer .catalog-sidebar { position: static; display: block; }
  .consumer .catalog-sidebar .side-block > h2, .consumer .stats-card { display: none; }
  .consumer .category-list { display: flex; overflow-x: auto; padding: 3px 0 9px; scrollbar-width: thin; gap: 5px; }
  .consumer .category-pill { width: auto; flex: 0 0 auto; padding-inline: 15px; background: #edeef4; }
  .consumer .category-pill.active::after { content: none; }
  .consumer .grid { gap: 12px; }
  .consumer .notice-strip { gap: 18px; }
  .consumer #localeBadge { display: none; }
  .guide-steps { gap: 20px; }
}
@media (max-width: 540px) {
  .consumer .shell { width: calc(100% - 36px); }
  .consumer .topbar-inner { min-height: 62px; gap: 10px; }
  .consumer .brand { font-size: 18px; gap: 8px; }
  .consumer .brand-mark { width: 33px; height: 36px; font-size: 24px; border-radius: 9px 9px 9px 2px; }
  .brand-wordmark small { display: none; }
  .consumer .nav-actions { gap: 4px; }
  .consumer .locale-select { min-width: 82px; max-width: 96px; padding-inline: 3px; font-size: 11px; }
  .consumer .nav-actions .button { padding-inline: 11px; font-size: 11px; }
  .consumer .notice-strip { display: flex; align-items: baseline; flex-direction: row; gap: 14px; padding-block: 12px; font-size: 11px; }
  .consumer .notice-strip > div { flex: 0 0 auto; }
  .consumer .notice-strip p { min-width: 0; line-height: 1.7; }
  .intro-copy h1 { font-size: 24px; margin-bottom: 5px; }
  .intro-copy p { font-size: 12px; }
  .consumer .section-head { flex-direction: row; align-items: center; }
  .consumer .grid { gap: 10px; }
  .consumer .product { padding: 10px; gap: 8px; }
  .consumer .product h3 { font-size: 15px; }
  .consumer .product .product-meta { gap: 4px; }
  .consumer .product .price { font-size: 19px; }
  .consumer .product .product-minimum { font-size: 10px; line-height: 1.6; }
  .consumer .store-page { padding-bottom: 34px; }
  .purchase-guide { margin-top: 24px; padding-top: 18px; }
  .guide-heading { display: block; }
  .guide-heading h2 { font-size: 19px; }
  .guide-heading > p { margin-top: 7px; }
  .guide-steps { grid-template-columns: 1fr; gap: 24px; }
  .guide-steps p { max-width: 46ch; }
  .guide-note { align-items: start; font-size: 10px; }
  .site-footer { font-size: 9px; gap: 8px; padding-block: 20px; }
  .footer-divider { margin-inline: 6px; }
  .consumer .modal { padding: 12px; }
  .consumer .modal-card { max-height: calc(100dvh - 24px); padding: 22px; }
  .consumer .modal-head h2 { font-size: 21px; }
  .consumer .form-grid { grid-template-columns: 1fr; gap: 16px; }
  .consumer .modal :is(input, select), .consumer #queryForm input { font-size: 16px; }
  .consumer .paybox { padding: 15px; }
  .consumer .order-page { padding-block: 30px; min-height: calc(100dvh - 145px); }
  .consumer .order-lookup-panel { padding: 24px; }
}
@media (max-width: 359px) {
  .consumer .grid { grid-template-columns: minmax(0, 1fr); }
}
.detail-page { padding-block: 24px 56px; min-height: calc(100dvh - 150px); }
.detail-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.detail-breadcrumb a { color: var(--primary-deep); text-decoration: underline; text-underline-offset: 4px; }
.detail-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.detail-art { margin: 0; border-radius: 16px; overflow: hidden; min-width: 0; background: var(--surface-soft); }
.detail-art-link { display: block; }
.detail-art-link:focus-visible { outline-offset: -3px; }
.detail-art figcaption { display: grid; gap: 4px; margin: 0; padding: 10px 16px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.detail-art figcaption a { display: inline-flex; align-items: center; width: fit-content; min-height: 36px; color: var(--primary-deep); text-decoration: underline; text-underline-offset: 4px; }
.consumer .detail-art .cover { aspect-ratio: 4 / 3; border-radius: 0; font-size: clamp(22px, 3vw, 36px); }
.detail-summary { min-width: 0; padding-top: 4px; }
.detail-summary h1 { margin: 0; font-size: clamp(25px, 3vw, 36px); line-height: 1.35; letter-spacing: -.03em; overflow-wrap: anywhere; }
.detail-name-zh { margin: 8px 0 0; font-size: 18px; font-weight: 600; line-height: 1.6; color: var(--muted); }
.detail-subtitle { color: var(--muted); margin: 12px 0 0; white-space: pre-line; }
.detail-value { margin: 12px 0 0; max-width: 46ch; color: var(--text); font-size: 15px; font-weight: 500; line-height: 1.8; }
.detail-pricing { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; font-variant-numeric: tabular-nums; }
.detail-pricing strong { font-size: 34px; font-weight: 650; letter-spacing: -.03em; line-height: 1.3; }
.detail-pricing > span:last-child { color: var(--muted); font-size: 12px; }
.detail-minimum { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.purchase-options { margin-block: 12px; font-size: 12px; line-height: 1.8; font-variant-numeric: tabular-nums; }
.purchase-options strong { font-size: inherit; font-weight: 650; }
.purchase-options ul { list-style: none; padding: 0; margin: 4px 0 0; }
.purchase-options li { overflow-wrap: anywhere; }
.product-purchase .purchase-options { margin-block: 0 8px; }
.delivery-batch-toolbar { display: grid; gap: 10px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.delivery-batch-toolbar > div { display: flex; flex-wrap: wrap; gap: 8px; }
.delivery-batch-status { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.detail-facts { margin: 22px 0; border-top: 1px solid var(--line); }
.detail-facts > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; border-bottom: 1px solid var(--line); padding-block: 11px; font-size: 12px; }
.detail-facts dt { color: var(--muted); }
.detail-facts dd { margin: 0; overflow-wrap: anywhere; }
.detail-buy { width: 100%; }
.detail-service-link { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; padding-block: 8px; color: var(--primary-deep); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.detail-service-link span { color: var(--muted); font-size: 11px; }
.detail-previews .preview-disclaimer { font-size: 12px; color: var(--muted); }
.preview-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 16px; }
.consumer .preview-button { padding: 8px 14px; font-size: 12px; }
.consumer .preview-button[aria-pressed="true"] { background: #eae8ff; color: var(--primary-deep); }
.preview-image-link { display: block; border-radius: 12px; overflow: hidden; background: #101b2e; }
.preview-image-link img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.preview-caption { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--muted); font-size: 12px; }
.preview-caption a { display: inline-flex; align-items: center; min-height: 44px; color: var(--primary-deep); text-decoration: underline; text-underline-offset: 4px; }
.detail-payment-note { color: var(--muted); font-size: 11px; margin: 10px 0 0; }
.detail-content { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: clamp(24px, 5vw, 72px); padding-top: 32px; }
.detail-reading { min-width: 0; max-width: 74ch; }
.detail-section + .detail-section { margin-top: 32px; }
.detail-advantages dl { margin: 0; border-top: 1px solid var(--line); }
.detail-advantages dl > div { display: grid; grid-template-columns: minmax(140px, .7fr) minmax(0, 1.3fr); gap: 20px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.detail-advantages dt { font-size: 14px; font-weight: 650; line-height: 1.8; }
.detail-advantages dd { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
.detail-section h2, .detail-help h2 { margin: 0 0 12px; font-size: 18px; line-height: 1.4; }
.detail-section p { margin: 0; white-space: pre-line; }
.detail-section p, .detail-section li { font-size: 14px; line-height: 1.9; overflow-wrap: anywhere; }
.detail-section :is(ul, ol) { margin: 0; padding-inline-start: 22px; }
.detail-section li + li { margin-top: 10px; }
.detail-section li::marker { color: var(--muted); }
.detail-seller { padding: 20px; border-radius: 12px; background: #eeeff5; }
.detail-seller h2 { font-size: 14px; }
.detail-help { align-self: start; border-top: 1px solid var(--line); padding-top: 18px; }
.detail-help h2 { font-size: 15px; }
.detail-help p { color: var(--muted); font-size: 12px; line-height: 1.9; margin: 0 0 14px; }
.detail-help a { display: inline-flex; align-items: center; min-height: 44px; color: var(--primary-deep); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.detail-error { max-width: 680px; padding-block: 64px; }
.detail-error h1 { font-size: 28px; margin: 0 0 14px; }
.detail-error p { color: var(--muted); }
.detail-error-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.detail-loading { color: var(--muted); padding-block: 64px; }
@media (max-width: 800px) {
  .detail-header { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .consumer .detail-art .cover { aspect-ratio: 4 / 3; }
  .detail-content { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .detail-reading { max-width: none; }
  .detail-help { max-width: 74ch; }
}
@media (max-width: 540px) {
  .detail-page { padding-block: 18px 36px; }
  .detail-breadcrumb { margin-bottom: 18px; font-size: 11px; }
  .detail-summary h1 { font-size: 26px; }
  .detail-section p, .detail-section li { font-size: 13px; }
  .detail-pricing strong { font-size: 30px; }
  .detail-seller { padding: 16px; }
  .detail-advantages dl > div { grid-template-columns: minmax(0, 1fr); gap: 5px; padding-block: 16px; }
  .detail-value { font-size: 14px; }
}
.consumer .precise-payment { border-block: 1px solid var(--line); padding-block: 16px; min-width: 0; }
.consumer .precise-payment-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-variant-numeric: tabular-nums; }
.consumer .precise-payment-amount strong { font-size: clamp(26px, 7vw, 36px); line-height: 1.25; }
.consumer .precise-payment p { margin: 0; font-weight: 600; }
.consumer .precise-payment-address { white-space: normal; overflow-wrap: anywhere; }
.consumer .precise-payment-feedback:empty { display: none; }
.consumer .stock.sold-out { color: #646a7d; font-weight: 650; }
.consumer .product.is-sold-out button:disabled { background: #e8e9ef; color: #50566a; opacity: 1; cursor: not-allowed; }
.consumer .payment-deadline { padding-block: 12px; border-block: 1px solid var(--line); min-width: 0; }
.consumer .payment-deadline > div { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; }
.consumer .payment-deadline strong { color: var(--primary-deep); font-size: 28px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.consumer .payment-deadline p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.consumer .payment-deadline.ended strong, .consumer .payment-deadline.ended p { color: #8b3f22; }
.consumer .product-promotion { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding-block: 8px; border-block: 1px solid var(--line); font-size: 11px; color: var(--primary-deep); }
.consumer .product-promotion strong { font-size: 17px; line-height: 1.4; font-weight: 650; font-variant-numeric: tabular-nums; }
.consumer .product-purchase .product-promotion { gap: 2px 8px; padding-block: 0; border: 0; font-size: 10px; }
.consumer .product-purchase .product-promotion strong { font-size: 13px; }
.consumer .product-promotion.ended, .consumer .product-promotion.upcoming { color: var(--muted); }
.consumer .detail-summary .product-promotion { margin-top: 14px; font-size: 13px; }
.consumer .detail-summary .product-promotion strong { font-size: 24px; }
@media (prefers-reduced-motion: reduce) {
  .consumer *, .consumer *::before, .consumer *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}