/* detail.css — product detail screen: header, cover image, variant chips,
   price-tier table, quantity stepper, sticky total/CTA footer. */

.detail-scroll { flex: 1; padding-bottom: 170px; }
.detail-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--neutral-50); }
.detail-body { padding: 16px 16px 0; display: flex; flex-direction: column; gap: 16px; }

.detail-name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.detail-name { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -.3px; text-wrap: pretty; }
.detail-desc { font-size: var(--fs-body); color: var(--muted); line-height: var(--lh-relaxed); text-wrap: pretty; }

.detail-section-title { font-weight: 600; font-size: var(--fs-label); margin-bottom: 9px; }
.variant-chips { display: flex; gap: 9px; flex-wrap: wrap; }

.howto-details { border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); padding: 12px 14px; }
.howto-details summary { cursor: pointer; font-weight: 600; font-size: var(--fs-label); color: var(--brand-d); list-style: none; }
.howto-details summary::-webkit-details-marker { display: none; }
.howto-details[open] summary { margin-bottom: 8px; }
.howto-details-body { font-size: var(--fs-note); color: var(--ink-soft); line-height: var(--lh-loose); white-space: pre-wrap; }

.tier-table { overflow: hidden; }
.tier-table-head { padding: 11px 14px; font-weight: 600; font-size: var(--fs-label); border-bottom: 1px solid var(--line); background: #FCFAF8; }
.tier-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-top: 1px solid var(--line); }
.tier-row:first-of-type { border-top: none; }
.tier-row.active { background: var(--brand-50); }
.tier-row .qty { font-size: var(--fs-body); }
.tier-row .price { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-body-lg); }
.tier-row.active .price { font-weight: 700; color: var(--brand-d); }

.qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qty-stepper { display: flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r1); padding: 4px; }
.qty-stepper button { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; font-size: var(--fs-display); color: var(--text); }
.qty-stepper button:hover { background: #F5F1EC; }
.qty-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.qty-value { min-width: 44px; text-align: center; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-heading-sm); }

.total-box { display: flex; flex-direction: column; gap: 7px; padding: 14px; border-radius: var(--r2); background: var(--brand-50); border: 1px solid var(--brand-100); }
.total-row { display: flex; justify-content: space-between; font-size: var(--fs-label); color: var(--brand-ink); }
.total-row strong { font-weight: 600; }
.total-row.big { align-items: baseline; }
.total-row.big .amount { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-hero); color: var(--brand-d); }
.total-save { font-size: var(--fs-small); color: var(--brand-ink-soft); }

.detail-footer {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-top: 1px solid var(--line);
}
.detail-footer .out-note { font-size: var(--fs-caption); color: var(--muted); text-align: center; margin-top: 8px; }