/* ========================================================================== NHV-20 — Checkout ========================================================================== Covers the basket (checkout/cart) and the one-page checkout. Forms are styled centrally through the id="checkout-*" container, the same approach as the account section — the step partials are 350–540 line address and register forms and overriding them would be a lot of duplication for no gain. */ /* --- Layout ---------------------------------------------------------------- */ .nhv-checkout { display: flex; flex-wrap: wrap; } .nhv-checkout-main, .nhv-checkout-aside { display: flex; flex-direction: column; } /* The summary follows the shopper down a long form. top clears the header; the max-height/overflow keeps it usable when the basket is longer than the viewport, which sticky alone does not handle. */ @media (min-width: 992px) { .nhv-checkout-summary { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; } } /* --- Steps ----------------------------------------------------------------- */ .nhv-checkout-step { margin: 0 0 20px; } .nhv-checkout-step .nhv-step-head { margin-bottom: 0; } .nhv-step-body { padding: 16px; background: var(--nhv-cream-bright); border: 1px solid var(--nhv-rule-warm); border-top: 0; } /* Every box stays open. A step that cannot render yet collapses its empty body and shows the waiting line instead; the moment the flow fills the body, the sibling selector hides the line again. No JavaScript involved, and no step is ever dimmed — a box that looks disabled reads as broken. */ .nhv-step-body:empty { display: none; } .nhv-step-waiting { margin: 0; padding: 16px; font-family: var(--nhv-font-body); font-size: var(--nhv-fs-small); color: var(--nhv-grey-link); background: var(--nhv-cream-bright); border: 1px solid var(--nhv-rule-warm); border-top: 0; } .nhv-step-body:not(:empty) + .nhv-step-waiting { display: none; } /* The order table, above Step 6. Its own bordered box with a gap beneath, so it reads as the basket rather than as part of the confirm step. The table fills it edge to edge — a bordered table inset inside a bordered box is a box in a box — and only the border-radius needs clipping. */ .nhv-summary-preview { margin: 0 0 20px; background: var(--nhv-cream-bright); border: 1px solid var(--nhv-rule-warm); border-radius: var(--nhv-radius-sm); overflow: hidden; } .nhv-summary-preview .table { margin: 0; } .nhv-summary-preview .table > tbody > tr > td, .nhv-summary-preview .table > tfoot > tr > td { border-color: var(--nhv-rule-warm); } .nhv-summary-preview .table > tbody > tr:first-child > td { border-top: 0; } /* Step 6 now takes the same body as every other step. It had none of this while it held the table; with the table lifted out, the payment instructions and the confirm button need the standard panel. */ .nhv-checkout-summary .nhv-step-body { padding: 16px; background: var(--nhv-cream-bright); border: 1px solid var(--nhv-rule-warm); border-top: 0; } .nhv-checkout-summary .nhv-step-body h1, .nhv-checkout-summary .nhv-step-body h2, .nhv-checkout-summary .nhv-step-body h3 { margin-top: 0; font-family: var(--nhv-font-display); font-size: var(--nhv-fs-h4, 18px); font-weight: var(--nhv-fw-bold); color: var(--nhv-navy); } .nhv-checkout-summary .nhv-step-body > *:last-child { margin-bottom: 0; } /* The two headings core drops inside step 1 — "New Customer" and "Returning Customer". Left alone they are 27px in Open Sans: larger than the step heading above them, and the only type on the page not set in a brand face. Sized to agree with the summary headings opposite. :not(.nhv-block-title) is insurance, not a fix — the step headings are h2s too, and they sit in .nhv-step-head rather than .nhv-step-body, so this rule does not reach them today. It would take one template edit for that to stop being true, and a navy-on-navy step heading is the exact trap the account and information stylesheets both carry a note about. */ [id^="checkout-"] .nhv-step-body h2:not(.nhv-block-title), [id^="checkout-"] .nhv-step-body h3:not(.nhv-block-title) { margin: 26px 0 12px; padding-bottom: 10px; font-family: var(--nhv-font-display); font-size: var(--nhv-fs-h4, 18px); font-weight: var(--nhv-fw-bold); line-height: 1.3; color: var(--nhv-navy); border-bottom: 1px solid var(--nhv-rule-warm); } /* Core follows each with its one-line explainer; the heading's own margin is enough separation. */ [id^="checkout-"] .nhv-step-body h2:not(.nhv-block-title) + p { margin-top: 0; } /* Step 1 is two columns — New Customer | Returning Customer — and each opens with one of these headings, so neither needs the top margin while they sit side by side. Below 768 Bootstrap stacks them and the second one lands directly under the first column's Continue button, which is exactly where the margin is needed. Hence the breakpoint rather than a flat rule. */ [id^="checkout-"] .nhv-step-body > .row > [class^="col-"]:first-child > h2:not(.nhv-block-title), [id^="checkout-"] .nhv-step-body > h2:not(.nhv-block-title):first-child { margin-top: 0; } @media (min-width: 768px) { [id^="checkout-"] .nhv-step-body > .row > [class^="col-"] > h2:not(.nhv-block-title) { margin-top: 0; } } /* --- Forms ----------------------------------------------------------------- */ /* Same Bootstrap negative gutters as the account forms — the address and register partials are .form-horizontal, and .nhv-step-body supplies the padding they were cancelling. */ [id^="checkout-"] .form-horizontal .form-group { margin-right: 0; margin-left: 0; } [id^="checkout-"] .control-label { font-family: var(--nhv-font-display); font-size: var(--nhv-fs-small); font-weight: var(--nhv-fw-semi); color: var(--nhv-navy); } [id^="checkout-"] .form-control, [id^="checkout-"] .form-control:focus { height: 38px; padding: 0 10px; font-family: var(--nhv-font-body); font-size: var(--nhv-fs-base); color: var(--nhv-navy); background-color: var(--nhv-cream-bright); border: 1px solid var(--nhv-rule-warm); border-radius: var(--nhv-radius-sm); box-shadow: none; } [id^="checkout-"] textarea.form-control { height: auto; padding: 8px 10px; } [id^="checkout-"] select.form-control { padding-right: 28px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23A3795B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 7px; } [id^="checkout-"] .form-control:focus-visible { outline: 2px solid var(--nhv-copper); outline-offset: 1px; } [id^="checkout-"] .required .control-label:before { color: var(--nhv-sale-red); } [id^="checkout-"] .text-danger { display: block; margin-top: 4px; font-size: var(--nhv-fs-small); color: var(--nhv-sale-red); } [id^="checkout-"] .has-error .form-control { border-color: var(--nhv-sale-red); } /* --- Choices ---------------------------------------------------------------- Register/Guest, the delivery method, the payment method and the terms box. Core renders them as bare radios in a run of paragraphs; as the decisions that change the price they deserve to look selectable. THE CONTROL HAD TO COME BACK INTO FLOW. Bootstrap positions the input ABSOLUTELY inside .radio/.checkbox and pulls it 20px to the left of the label's text — a hanging indent that only works while the label has no padding of its own. Once these became padded rows that offset was wrong, and zeroing the margin (which is what this file did before) dropped the control onto the label's padding origin, on top of the first word: "Register Account" with the radio sitting over the R. `position: static` puts it back in flow as a flex item and the gap does the spacing. */ [id^="checkout-"] .nhv-step-body .radio, [id^="checkout-"] .nhv-step-body .checkbox { margin: 0 0 8px; } [id^="checkout-"] .nhv-step-body .radio label, [id^="checkout-"] .nhv-step-body .checkbox label { display: flex; align-items: flex-start; gap: 12px; width: 100%; margin: 0; padding: 12px 14px; font-family: var(--nhv-font-body); font-size: var(--nhv-fs-base); font-weight: var(--nhv-fw-normal); line-height: 1.5; color: var(--nhv-navy); background: var(--nhv-cream-bright); border: 1px solid var(--nhv-rule-warm); border-radius: var(--nhv-radius-sm); cursor: pointer; transition: background-color var(--nhv-transition), border-color var(--nhv-transition), color var(--nhv-transition); } [id^="checkout-"] .nhv-step-body .radio label:hover, [id^="checkout-"] .nhv-step-body .checkbox label:hover { background: var(--nhv-sand); border-color: var(--nhv-copper); } /* The dial and the box, drawn rather than left to the platform. appearance:none turns the input into an ordinary 18px element we can colour to the brand; it also stops Windows and Android rendering three different-sized controls. */ [id^="checkout-"] .nhv-step-body .radio input[type="radio"], [id^="checkout-"] .nhv-step-body .checkbox input[type="checkbox"] { position: static; flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; /* onto the cap height of the first line */ padding: 0; -webkit-appearance: none; appearance: none; background-color: var(--nhv-white); background-repeat: no-repeat; background-position: center; background-size: 12px 12px; border: 1px solid var(--nhv-ink-soft); cursor: pointer; transition: background-color var(--nhv-transition), border-color var(--nhv-transition), box-shadow var(--nhv-transition); } [id^="checkout-"] .nhv-step-body .radio input[type="radio"] { border-radius: 50%; } [id^="checkout-"] .nhv-step-body .checkbox input[type="checkbox"] { border-radius: var(--nhv-radius-sm); } /* Checked. The dot is an inset ring rather than a pseudo-element: an input is a replaced element and ::before on one is not reliable across engines. Copper, not navy. The selected ROW inverts to the dark ground below, and the control has to stay legible whether that inversion lands or not — see the note on :has(). Copper reads on both. */ [id^="checkout-"] .nhv-step-body .radio input[type="radio"]:checked { background-color: var(--nhv-copper); border-color: var(--nhv-copper); box-shadow: inset 0 0 0 3px var(--nhv-cream-bright); } [id^="checkout-"] .nhv-step-body .checkbox input[type="checkbox"]:checked { background-color: var(--nhv-copper); border-color: var(--nhv-copper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23FFFDF5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E"); } /* Kept in separate rules: an engine that cannot parse :focus-visible throws away the whole selector list, so merging these would lose the modern ring everywhere. Same pattern as the product option chips. */ [id^="checkout-"] .nhv-step-body .radio input:focus-visible, [id^="checkout-"] .nhv-step-body .checkbox input:focus-visible { outline: 2px solid var(--nhv-copper); outline-offset: 2px; } [id^="checkout-"] .nhv-step-body .radio input:focus, [id^="checkout-"] .nhv-step-body .checkbox input:focus { outline: 2px solid var(--nhv-copper); outline-offset: 2px; } [id^="checkout-"] .nhv-step-body .radio input:focus:not(:focus-visible), [id^="checkout-"] .nhv-step-body .checkbox input:focus:not(:focus-visible) { outline: none; } /* --- The selected row ------------------------------------------------------- Solid --nhv-footer-ground with cream text: the same inversion the product option chips use, so "this is the one you picked" looks the same wherever it appears in the shop. :has() is the only way in. The text beside the control is a bare text node inside the