/* "Pay on collection / delivery" (features.cashOrders; docs/cash-option.md). Shipped only while the flag is on, so a default build is byte-identical to one that never had it. */
.details-fields .cash-consent, .cash-consent { display: flex; align-items: flex-start; gap: 12px; margin: 12px 0 6px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--radius); font-size: 16px; line-height: 1.45; font-weight: 600; }
.cash-consent input { flex: none; margin-top: 3px; width: 22px; height: 22px; }
.cash-consent span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Review pin P3 (21 Oct): `.details-fields label` (display:block) outranked `.cash-consent`, so the tick box sat on top of the sentence, and the global 44px link box was taller than the line. A1 (21 Oct, checker): padded tap area overlapped the neighbouring lines, so the link is a 24px-high inline-block (WCAG 2.5.8 minimum) with no padding, nothing overlaps. Selector mirrors the global link rule so it wins on specificity. */
.cash-consent a[href]:not(.brand):not(.button):not(.text-link):not(.skip-link) { font-weight: 700; display: inline-block; min-height: 24px; min-width: 0; line-height: 24px; padding: 0; white-space: nowrap; }
.cash-panel { margin: 14px 0 0; padding: 12px 14px 14px; border: 1px solid var(--hairline); border-radius: var(--radius); }
.cash-panel legend { padding-inline: 6px; font-weight: 700; }
.cash-choice { display: flex; align-items: center; gap: 12px; padding: 8px 2px; font-size: 16px; font-weight: 600; }
.cash-choice input { flex: none; width: 22px; height: 22px; }
.cash-choice-off { color: #575c55; }
.cash-choice-off .pay-soon-tag { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 9px; border: 1px solid #8d9289; border-radius: 999px; background: #fcfbf5; color: #4a4f48; margin-left: 6px; }
.cash-total { margin: 8px 0 0; font-weight: 700; }
.pay-cash-button { width: 100%; font-size: 16px; gap: 0; padding-inline: 15px; margin-top: 12px; }
/* D1 T13: the live "Place order" carries the site primary (solid deep green, white text). */
.pay-cash-button { background: var(--green-deep); color: var(--white); border-color: var(--green-deep); }
.pay-cash-button:hover { background: var(--green-bright); border-color: var(--green-bright); color: var(--white); }
/* D1 T23 + T24: with card AND cash on, the cash route is the quiet alternative under "Pay by card": a divider (not a box in a box) and the secondary button style. */
/* `.stage-panel fieldset` (order-flow.css, 0,1,1) resets fieldsets inside a checkout stage, so the divider is repeated under `.stage-panel`. */
.cash-panel-alt, .stage-panel .cash-panel-alt { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 18px 0 0; margin-top: 18px; }
.cash-panel-alt legend { padding-inline: 0; }
.cash-panel-alt .pay-cash-button { background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); }
.cash-panel-alt .pay-cash-button:hover { background: var(--tint); border-color: var(--accent); color: var(--ink); }
.placed-section { max-width: 44rem; }
/* D1 T26: the confirmation block shares the page heading's left edge (the .wrap gutter at each width) instead of floating 240px in. */
.placed-section, .paid-section { margin-left: max(48px, calc((100% - var(--wrap)) / 2)); margin-right: auto; }
@media (max-width: 1100px) { .placed-section, .paid-section { margin-left: 32px; } }
@media (max-width: 767px) { .placed-section, .paid-section { margin-left: 18px; } }
.placed-section .paid-status { font-size: 1.25rem; font-weight: 700; line-height: 1.4; margin: 0 0 14px; }
.placed-section .paid-status[data-state="placed"] { color: var(--accent); }
.placed-details p, .placed-details ul { margin: 0 0 14px; }
.placed-details ul { padding-left: 1.2em; }
.placed-total { font-size: 1.15rem; font-weight: 700; }
.placed-section .paid-actions p { margin: 0 0 14px; }
/* D1 T25: the confirmation actions are a row with a gap; the second action ("Back") is the quiet one. [hidden] must still hide the row. */
#placed-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
#placed-actions[hidden] { display: none; }
#placed-actions > p { flex: 1 0 100%; margin: 0; }
#placed-actions .button:not(:only-of-type):last-of-type { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
#placed-actions .button:not(:only-of-type):last-of-type:hover { background: var(--tint); border-color: var(--accent); color: var(--ink); }
@media (max-width: 640px) { #placed-actions .button { width: 100%; } }