/* Local simulation only; shared visual rhythm with product-review.css. */
body .step-label { display: block; color: var(--muted); font-size: 11px; letter-spacing: .08em; margin-bottom: 14px; }
body .bag-page { max-width: 1040px; }
body .bag-page h1, body .demo-checkout h1, body .account-page h1,
body .account-overview h1, body .demo-complete h1 { font-size: clamp(30px,3vw,42px); line-height: 1.15; letter-spacing: -.035em; margin-bottom: 24px; }
body .bag-page > .notice { font-size: 13px; border-radius: 5px; margin-bottom: 20px; }
body .bag-line { gap: 24px; padding-block: 28px; }
body .bag-photo { width: 96px; flex-shrink: 0; }
body .bag-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 5px; display: block; }
body .bag-line h2 { font-size: 18px; line-height: 1.45; letter-spacing: -.02em; margin-bottom: 10px; }
body .bag-line p { font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
body .bag-line label { font-size: 12px; }
body .bag-line input { width: 76px; min-height: 48px; text-align: center; border-radius: 5px; }
body .bag-line > .text-button { font-size: 12px; }
body .bag-summary { margin: 32px 0; padding: 26px; background: var(--surface); border-radius: 5px; display: grid; grid-template-columns: 1fr auto; gap: 12px; }
body .bag-summary strong { font-size: 24px; font-weight: 500; }
body .bag-summary > span { align-self: center; font-size: 14px; }
body .bag-summary p { grid-column: 1/-1; font-size: 12px; margin: 0; }
body .bag-actions { gap: 16px; align-items: stretch; margin-top: 28px; }
body .account-page { max-width: 580px; padding-block: 64px; }
body .account-page > p { font-size: 14px; line-height: 1.8; }
body .account-page form { gap: 22px; margin-block: 28px; }
body .account-page label { font-size: 13px; gap: 9px; }
body .account-page input { min-height: 50px; font-size: 16px; border-radius: 5px; }
body .account-page > .text-link { justify-content: center; margin-block: 8px; font-size: 13px; }
body .demo-account-help { background: var(--surface); padding: 20px; border-radius: 5px; }
body .demo-account-help p { font-size: 12px; margin-bottom: 4px; line-height: 1.7; }
body .demo-account-help .text-button { padding-inline: 0; font-size: 13px; }
body .demo-account-help small { display: block; color: var(--muted); overflow-wrap: anywhere; font-size: 11px; }
body .account-overview { max-width: 720px; }
body .account-overview > .notice { margin-block: 24px; }
body .account-overview > p { font-size: 14px; }
body .checkout-path { display: flex; gap: 24px; font-size: 12px; color: var(--muted); margin-bottom: 36px; align-items: center; flex-wrap: wrap; }
body .checkout-path a { min-height: 44px; display: flex; align-items: center; }
body .checkout-path [aria-current] { color: var(--ink); border-bottom: 1px solid var(--ink); padding-block: 12px; }
body .demo-checkout { padding-top: 24px; }
body .demo-checkout > .notice { font-size: 12px; margin-bottom: 36px; border-radius: 5px; }
body .demo-checkout .section-heading { margin-bottom: 8px; }
body .checkout-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.9fr); gap: clamp(32px,6vw,80px); align-items: start; }
body .checkout-layout form { min-width: 0; }
body .checkout-layout fieldset { min-width: 0; border: 0; border-bottom: 1px solid var(--line); padding: 0 0 28px; margin: 0 0 30px; }
body .checkout-layout legend { font-size: 20px; font-weight: 500; letter-spacing: -.02em; padding: 0 0 22px; }
body .checkout-layout p { font-size: 13px; line-height: 1.8; }
body .checkout-layout label { font-size: 13px; gap: 9px; }
body .checkout-layout input, body .checkout-layout select { min-height: 48px; width: 100%; font-size: 16px; border-radius: 5px; }
body .checkout-layout input[type=radio], body .checkout-layout input[type=checkbox] { width: 18px; height: 18px; min-height: 18px; flex-shrink: 0; accent-color: var(--primary); }
body .inline-link { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
body .address-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 18px; }
body .address-fields .full { grid-column: 1/-1; }
body .fill-demo { margin-bottom: 18px; padding: 0; border: 0; background: transparent; text-decoration: underline; text-underline-offset: 4px; }
body .delivery-option { display: flex; align-items: center; gap: 12px; min-height: 84px; border: 1px solid var(--line); border-radius: 5px; padding: 16px; margin-bottom: 12px; cursor: pointer; }
body .delivery-option:has(input:checked) { border-color: var(--primary); background: var(--surface); }
body .delivery-option strong { font-weight: 500; font-size: 14px; }
body .delivery-option small { display: block; font-size: 11px; color: var(--muted); line-height: 1.7; margin-top: 4px; }
body .delivery-option > span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; }
body .demo-consent { display: flex; align-items: center; gap: 12px; margin-block: 22px; min-height: 44px; line-height: 1.6; }
body .checkout-layout form > .button { width: 100%; }
body .checkout-layout form > .muted { margin-top: 12px; font-size: 12px; text-align: center; }
body .checkout-summary { background: var(--surface); padding: 28px; border-radius: 6px; }
body .checkout-summary h2 { font-size: 22px; margin-bottom: 26px; }
body .summary-disclosure > summary { display: none; }
body .summary-item { display: flex; gap: 16px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
body .summary-item img { width: 72px; height: 90px; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; }
body .summary-item > div { min-width: 0; }
body .summary-item h3 { font-size: 14px; line-height: 1.5; margin-bottom: 7px; }
body .summary-item p { font-size: 12px; margin-bottom: 6px; }
body .summary-item strong { font-size: 14px; font-weight: 500; }
body .checkout-summary dl { margin: 0; }
body .checkout-summary dl > div { display: flex; justify-content: space-between; gap: 20px; padding-block: 8px; font-size: 13px; }
body .checkout-summary dd { margin: 0; font-variant-numeric: tabular-nums; }
body .checkout-summary .grand-total { border-top: 1px solid var(--line); margin-top: 16px; padding-block: 20px; font-size: 20px; }
body .summary-content > .muted { font-size: 11px; margin: 0; }
body .demo-complete { max-width: 840px; }
body .demo-complete > p { font-size: 14px; }
body .demo-complete h2 { font-size: 22px; margin-top: 32px; }
body .order-receipt { background: var(--surface); padding: 24px; border-radius: 5px; margin-block: 30px; }
body .order-receipt > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-block: 10px; font-size: 14px; }
body .order-receipt strong { font-weight: 500; }
@media(max-width:850px) {
  body .checkout-layout { grid-template-columns: minmax(0,1fr); gap: 32px; }
  body .checkout-summary { grid-row: 1; }
  body .summary-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 15px; min-height: 44px; }
  body .summary-disclosure > summary::after { content: '+'; font-size: 20px; }
  body .summary-disclosure[open] > summary::after { content: '-'; }
  body .summary-disclosure > summary span { margin-left: auto; font-variant-numeric: tabular-nums; }
  body .summary-disclosure > summary::-webkit-details-marker { display: none; }
  body .summary-content { padding-top: 24px; }
  body .summary-content h2 { display: none; }
  body .checkout-summary { padding: 14px 22px; }
}
@media(max-width:700px) {
  body .bag-page, body .account-page { padding-top: 36px; }
  body .bag-line { display: grid; grid-template-columns: 76px minmax(0,1fr) auto; gap: 16px; padding-block: 24px; }
  body .bag-photo { grid-column: 1; grid-row: 1; width: 76px; }
  body .bag-line > div { grid-column: 2/-1; grid-row: 1; }
  body .bag-line label { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 10px; }
  body .bag-line label input { width: 64px; font-size: 16px; }
  body .bag-line > .text-button { grid-column: 3; grid-row: 2; padding-inline: 0; }
  body .bag-line h2 { font-size: 16px; }
  body .bag-summary { padding: 22px; }
  body .bag-actions { flex-direction: column-reverse; }
  body .account-page form { gap: 20px; }
  body .checkout-path { gap: 16px; font-size: 11px; margin-bottom: 24px; }
  body .demo-checkout > .notice { margin-bottom: 28px; }
  body .checkout-summary { padding: 22px; }
  body .checkout-layout legend { font-size: 20px; }
  body .address-fields { gap: 18px 14px; }
  body .delivery-option { padding: 14px 12px; }
  body .delivery-option strong { font-size: 13px; }
}
@media(max-width:390px) {
  body .bag-line { grid-template-columns: 66px minmax(0,1fr) auto; gap: 12px; }
  body .bag-photo { width: 66px; }
  body .address-fields { grid-template-columns: minmax(0,1fr); }
}