/* The checkout, in the go-live design: a white page, a step line, the greeting, address (or client) and "Place your
   order" cards on the left, the sticky order summary on the right, then the help banner and the photo band. Phones get
   one column: the compact greeting, the open summary (its bar folds it), the cards, and the place-order card last.
   Flat, with 8px corners; pills only for the Purchase/Send toggle, the chips and the step dots. */

/* The design's teal buttons (#5BBFB3 with white text), for the checkout only. Teal text stays --tb-teal-ink. */
.tb-checkout {
    --tb-teal-fill: var(--tb-teal-ui);
    --tb-teal-fill-text: #fff;
    color: var(--tb-ink-soft);
    line-height: 1.5;
}

.tb-customer-main:has(.tb-checkout) {
    background: #fff;
}

.tb-checkout .alert {
    max-width: 1200px;
    margin: 16px auto 0;
    border-radius: var(--tb-radius-control);
}

/* The page's problem banner lines up with the cards: the grid's side gutters (48px, or centred at 1200px). */
.tb-checkout > .alert {
    max-width: none;
    margin: 16px max(48px, calc((100% - 1200px) / 2)) 0;
}

.tb-checkout a:not(.tb-checkout-button):not(.tb-checkout-icon):not(.tb-checkout-help-whatsapp):not(.tb-checkout-help-email) {
    color: var(--tb-teal-ink);
    font-weight: 600;
}

/* Keyboard focus: the design system's 3px accessible teal ring, 2px out (MudBlazor's reset removes the browser's own).
   The pop-ups render inside .tb-checkout, so this covers them too. Controls inside a box that clips (the address
   list, the client list, the quantity box) draw the ring inside themselves instead; see their rules. :where keeps
   this at two classes, above MudBlazor's button:focus and a:focus-visible resets, so those rules can override it. */
.tb-checkout :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 3px solid var(--tb-teal-accessible);
    outline-offset: 2px;
}

/* Steps: a ring with a small dot (a tick once done), joined by a line that turns teal up to the current one. */
.tb-checkout-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 48px 6px;
}

.tb-checkout-step-line {
    width: 40px;
    height: 1px;
    background: var(--slate-200);
}

.tb-checkout-step-line.on {
    background: var(--tb-teal-ui);
}

.tb-checkout-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--slate-400);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tb-checkout-step-number {
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--slate-300);
    border-radius: 999px;
    background: #fff;
    font-size: 10px;
    letter-spacing: 0;
}

.tb-checkout-step.done {
    color: var(--slate-700);
}

.tb-checkout-step.current {
    color: var(--tb-teal-ink);
}

.tb-checkout-step.current .tb-checkout-step-number {
    border-color: var(--tb-teal-ui);
    color: var(--tb-teal-ink);
}

.tb-checkout-step.done .tb-checkout-step-number {
    background: var(--tb-teal-fill);
    border-color: var(--tb-teal-fill);
    color: var(--tb-teal-fill-text);
}

.tb-checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 28px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 48px 56px;
    box-sizing: content-box;
}

.tb-checkout-main,
.tb-checkout-purchase {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Only hidden fields, posted by the pay button: it must not take up a gap between the cards. */
#paymentForm {
    display: none;
}

.tb-checkout-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-card);
}

.tb-checkout-card h2 {
    margin: 0;
    color: var(--tb-ink);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    text-transform: none;
}

.tb-checkout-card > p {
    margin: 0;
    color: var(--tb-ink-muted);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.6;
}

.tb-checkout-eyebrow {
    padding-right: 48px;
    color: var(--tb-teal-ink);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: 0.24em;
    line-height: 1.6;
    text-transform: uppercase;
}

.tb-checkout-eyebrow.muted {
    color: var(--slate-400);
}

/* Greeting. */
.tb-checkout-greeting {
    overflow: hidden;
    gap: 12px;
}

.tb-checkout-greeting > img {
    position: absolute;
    top: 18px;
    right: 18px;
    object-fit: contain;
    opacity: 0.55;
}

.tb-checkout-greeting h1 {
    margin: 0;
    padding-right: 40px;
    color: var(--tb-ink);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-transform: none;
    text-wrap: pretty;
}

.tb-checkout-greeting > p {
    max-width: 560px;
    font-size: 14px;
    text-wrap: pretty;
}

/* Purchase / Send: a grey pill track with the chosen tab in white. */
.tb-checkout-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-top: 8px;
    padding: 4px;
    background: var(--tb-page);
    border-radius: 999px;
}

.tb-checkout-modes button {
    padding: 11px 12px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--slate-500);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

.tb-checkout-modes button.active {
    background: #fff;
    box-shadow: var(--tb-shadow-toggle);
    color: var(--tb-ink);
    font-weight: 700;
}

/* Delivery address and its address book. */
.tb-checkout-addresses {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tb-checkout-addresses:empty {
    display: none;
}

.tb-checkout-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tb-checkout-picker-box {
    position: relative;
    z-index: 30;
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: #fff;
    border: 1.5px solid var(--slate-200);
    border-radius: var(--tb-radius-control);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tb-checkout-picker-box.open {
    border-color: var(--tb-teal-ui);
}

@media (hover: hover) {
    .tb-checkout-picker-box:hover:not(:disabled) {
        border-color: var(--tb-teal-ui);
    }
}

.tb-checkout-picker-box:disabled {
    cursor: default;
    opacity: 0.6;
}

.tb-checkout-picker-chevron {
    color: var(--slate-500);
    transition: transform var(--dur-base) var(--ease-out);
}

.tb-checkout-picker-box.open .tb-checkout-picker-chevron {
    transform: rotate(180deg);
}

.tb-checkout-picker-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tb-checkout-picker-name {
    color: var(--slate-900);
    font-size: 13.5px;
    font-weight: 700;
}

.tb-checkout-picker-mobile {
    color: var(--slate-500);
    font-size: 13.5px;
    font-weight: 500;
}

.tb-checkout-picker-detail {
    color: var(--slate-600);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

.tb-checkout-picker-box .tb-checkout-picker-detail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-checkout-picker-placeholder {
    color: var(--slate-500);
    font-size: 13.5px;
    font-weight: 500;
}

.tb-checkout-picker-panel {
    position: relative;
    z-index: 30;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--tb-radius-control);
}

.tb-checkout-picker-search {
    height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 12px;
    border-bottom: 1px solid var(--slate-100);
    color: var(--slate-400);
}

.tb-checkout-picker-search input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    color: var(--slate-900);
    font: inherit;
    font-size: 13px;
}

/* The ring goes round the whole search row, inside the panel (which clips), not tight round the bare input. A browser
   without :has() keeps the input's own ring. */
@supports selector(:has(*)) {
    .tb-checkout-picker-search:has(input:focus-visible) {
        outline: 3px solid var(--tb-teal-accessible);
        outline-offset: -3px;
    }

    .tb-checkout .tb-checkout-picker-search input:focus-visible {
        outline: none;
    }
}

.tb-checkout-picker-options {
    max-height: 264px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tb-checkout-picker-option {
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 10px;
    align-items: center;
    padding: 11px 14px;
    background: #fff;
    border: 0;
    border-top: 1px solid var(--slate-100);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tb-checkout-picker-option:first-child {
    border-top: 0;
}

@media (hover: hover) {
    .tb-checkout-picker-option:hover {
        background: var(--tb-page);
    }
}

.tb-checkout .tb-checkout-picker-option:focus-visible {
    outline-offset: -3px;
}

.tb-checkout-picker-option.selected {
    background: var(--tb-teal-wash);
}

.tb-checkout-picker-option .tb-checkout-picker-name,
.tb-checkout-picker-option .tb-checkout-picker-mobile {
    font-size: 13px;
}

.tb-checkout-picker-option .tb-checkout-picker-detail {
    font-size: 12.5px;
    line-height: 1.45;
}

.tb-checkout-picker-tick {
    color: var(--tb-teal-ink);
}

.tb-checkout-picker-empty {
    margin: 0;
    padding: 16px 14px;
    color: var(--slate-500);
    font-size: 12.5px;
    font-weight: 500;
}

.tb-checkout-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--tb-teal-ink);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

@media (hover: hover) {
    .tb-checkout-link:hover {
        text-decoration: underline;
    }
}

.tb-checkout-link.danger {
    min-height: 0;
    margin-left: 8px;
    color: var(--tb-danger-fill-hover);
}

.tb-checkout-icon {
    width: 32px;
    height: 32px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 999px;
    color: var(--slate-500) !important;
    cursor: pointer;
}

@media (hover: hover) {
    .tb-checkout-icon:hover:not(:disabled) {
        background: var(--tb-page);
        color: var(--slate-900) !important;
    }
}

.tb-checkout-icon:disabled {
    cursor: default;
    opacity: 0.5;
}

/* Forms: the new address and the new client, as a grey panel inside the card. */
.tb-checkout-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: var(--tb-radius-control);
}

#addressField_delivery {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tb-checkout-form-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tb-checkout-form-head strong {
    color: var(--slate-900);
    font-size: 15px;
    font-weight: 700;
}

.tb-checkout-form-head span {
    color: var(--slate-500);
    font-size: 12px;
    font-weight: 500;
}

.tb-checkout-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 14px;
}

.tb-checkout-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tb-checkout-field.wide {
    grid-column: 1 / -1;
}

.tb-checkout-field label,
.tb-checkout-label {
    margin: 0;
    color: var(--slate-700);
    font-size: 12px;
    font-weight: 600;
}

.tb-checkout-required,
.tb-checkout-optional {
    margin-left: 4px;
}

.tb-checkout-required {
    color: var(--destructive);
}

.tb-checkout-optional {
    color: var(--slate-500);
    font-weight: 500;
}

.tb-checkout-field .form-control,
.tb-checkout-field .form-select {
    height: 44px;
    padding-left: 12px;
    background-color: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--tb-radius-control);
    box-shadow: none;
    color: var(--slate-900);
    font-size: 13.5px;
    font-weight: 500;
}

.tb-checkout-field .form-control {
    padding-right: 12px;
}

.tb-checkout-field .form-control:focus,
.tb-checkout-field .form-select:focus {
    border-color: var(--tb-teal-ui);
    box-shadow: none;
}

.tb-checkout-field .form-control.invalid {
    border-color: var(--destructive);
}

.tb-checkout-form-error {
    margin: 0;
    color: var(--destructive);
    font-size: 12px;
    font-weight: 600;
}

.tb-checkout-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.tb-checkout-form-actions .tb-checkout-button {
    height: 42px;
    padding: 0 18px;
    font-size: 13px;
}

.tb-checkout-small {
    margin: 0;
    color: var(--slate-500);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.6;
}

.tb-checkout-button {
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    background: var(--tb-teal-fill);
    border: 0;
    border-radius: var(--tb-radius-control);
    color: var(--tb-teal-fill-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

@media (hover: hover) {
    .tb-checkout-button:hover:not(:disabled) {
        background: var(--tb-teal-ui-dark);
        color: var(--tb-teal-fill-text);
    }
}

.tb-checkout-button.outline {
    background: #fff;
    border: 1px solid var(--slate-200);
    color: var(--slate-900);
    font-weight: 600;
}

@media (hover: hover) {
    .tb-checkout-button.outline:hover:not(:disabled) {
        background: #fff;
        border-color: var(--slate-400);
        color: var(--slate-900);
    }
}

.tb-checkout-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Send: the chosen clients, the search and its list. */
.tb-checkout-clients {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tb-checkout-clients > .tb-checkout-small {
    margin-top: 4px;
}

/* The client field's label is a step smaller and lighter than "Deliver to" (the design). */
.tb-checkout-clients > .tb-checkout-label {
    color: var(--slate-600);
    font-size: 11.5px;
    font-weight: 600;
}

.tb-checkout-chosen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tb-checkout-chosen:empty {
    display: none;
}

.tb-checkout-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 5px 6px 5px 14px;
    background: var(--tb-teal-tint);
    /* A full pill at its usual ~39px height; a chip whose name wraps keeps rounded corners, not a stadium. */
    border-radius: 20px;
    color: var(--slate-900);
}

/* Long names and emails wrap (overflow-wrap on the base classes) rather than being cut short. */
.tb-checkout-chip-text {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-width: 0;
    line-height: 1.25;
}

.tb-checkout-chip .tb-checkout-client-name {
    font-size: 12px;
}

.tb-checkout-chip .tb-checkout-client-email {
    font-size: 11px;
}

.tb-checkout-chip button {
    flex: none;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 999px;
    color: var(--slate-600);
    cursor: pointer;
}

@media (hover: hover) {
    .tb-checkout-chip button:hover {
        background: #fff;
        color: var(--slate-900);
    }
}

.tb-checkout-client-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.tb-checkout-client-search {
    position: relative;
    flex: 1;
    min-width: 0;
}

.tb-checkout-client-search > label {
    position: relative;
    z-index: 30;
    height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 16px;
    background: #fff;
    border: 1.5px solid var(--slate-200);
    border-radius: var(--tb-radius-control);
    color: var(--slate-400);
}

.tb-checkout-client-search > label.open,
.tb-checkout-client-search > label:focus-within {
    border-color: var(--tb-teal-ui);
}

.tb-checkout-client-search input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    color: var(--slate-900);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
}

/* The ring goes round the bordered search box, not tight round the bare input inside it. A browser without :has() keeps
   the input's own ring. */
@supports selector(:has(*)) {
    .tb-checkout-client-search > label:has(input:focus-visible) {
        outline: 3px solid var(--tb-teal-accessible);
        outline-offset: 2px;
    }

    .tb-checkout .tb-checkout-client-search input:focus-visible {
        outline: none;
    }
}

.tb-checkout-client-row > .tb-checkout-button {
    height: 48px;
}

/* The invisible page-sized button that closes a list on a click outside it. */
.tb-checkout-list-away {
    position: fixed;
    inset: 0;
    z-index: 20;
    padding: 0;
    background: none;
    border: 0;
    cursor: default;
}

.tb-checkout-client-list {
    position: absolute;
    top: 54px;
    right: 0;
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    max-height: 320px;
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--tb-radius-control);
    box-shadow: var(--tb-shadow-menu);
}

/* MudBlazor centres a button's content; the results read from the left. */
.tb-checkout-client-option {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: none;
    border: 0;
    border-radius: var(--tb-radius-control);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

@media (hover: hover) {
    .tb-checkout-client-option:hover {
        background: var(--tb-page);
    }
}

.tb-checkout .tb-checkout-client-option:focus-visible {
    outline-offset: -3px;
}

.tb-checkout-avatar {
    width: 32px;
    height: 32px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tb-page);
    border-radius: 999px;
    color: var(--slate-600);
    font-size: 11px;
    font-weight: 700;
}

.tb-checkout-client-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.tb-checkout-client-name {
    color: var(--slate-900);
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.tb-checkout-client-email {
    color: var(--slate-500);
    font-size: 11.5px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.tb-checkout-client-list .tb-checkout-small {
    padding: 14px 12px;
}

/* Sent: who the basket went to. */
.tb-checkout-sent {
    align-items: flex-start;
    gap: 14px;
    padding: 40px 32px;
}

.tb-checkout-sent-mark {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tb-teal-lighter);
    border-radius: 999px;
    color: var(--tb-teal-ink);
}

.tb-checkout-sent > p {
    max-width: 480px;
    font-size: 14px;
}

.tb-checkout-sent .tb-checkout-button {
    margin-top: 6px;
}

/* Place your order: the three steps, joined by a line, then the terms, the button and the gateway. */
.tb-checkout-place {
    gap: 20px;
}

.tb-checkout-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 4px 0 6px;
    list-style: none;
}

.tb-checkout-timeline::before {
    content: "";
    position: absolute;
    top: 21px;
    right: 16.66%;
    left: 16.66%;
    height: 1px;
    background: var(--slate-200);
}

.tb-checkout-timeline li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--slate-700);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-wrap: balance;
}

.tb-checkout-timeline-icon {
    width: 34px;
    height: 34px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: 999px;
    color: var(--tb-teal-ink);
}

.tb-checkout-delivery-days {
    color: var(--slate-500);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}

.tb-checkout-delivery-days:empty {
    display: none;
}

.tb-checkout-pay {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tb-checkout-terms {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    margin: 0;
    color: var(--slate-700);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.tb-checkout-terms input {
    width: 20px;
    height: 20px;
    flex: none;
    margin: 0;
    accent-color: var(--tb-teal-ui);
}

/* In the page's flow, on phones too: nothing is fixed to the screen. */
.tb-checkout-cta {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tb-checkout-pay-button {
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 12px;
    background: var(--tb-teal-fill);
    border: 0;
    border-radius: var(--tb-radius-control);
    color: var(--tb-teal-fill-text);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background var(--dur-base) var(--ease-out);
    cursor: pointer;
}

@media (hover: hover) {
    .tb-checkout-pay-button:hover:not(:disabled) {
        background: var(--tb-teal-ui-dark);
    }
}

.tb-checkout-pay-button:active:not(:disabled) {
    transform: scale(0.98);
}

.tb-checkout-terms-message {
    margin: -6px 0 0;
    color: var(--destructive);
    font-size: 12px;
    font-weight: 600;
}

.tb-checkout-pay-button:disabled {
    background: var(--tb-line);
    color: var(--slate-500);
    cursor: not-allowed;
}

.tb-checkout-gateway-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 2px;
}

.tb-checkout-gateway-strip {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
}

.tb-checkout-gateway {
    max-width: 100%;
    height: 30px;
    object-fit: contain;
}

.tb-checkout-fineprint {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    color: var(--slate-500);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
}

.tb-checkout-fineprint svg {
    flex: none;
    margin-top: 2px;
}

/* Order summary. */
.tb-checkout-side {
    position: sticky;
    top: 24px;
    min-width: 0;
}

.tb-checkout-order {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-card);
}

.tb-checkout-bar {
    display: none;
}

.tb-checkout-summary {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px;
}

.tb-checkout-summary > .tb-checkout-eyebrow {
    padding-right: 0;
}

#order_details {
    display: flex;
    flex-direction: column;
}

#order_details p {
    margin: 0;
}

.tb-checkout-expect-link {
    margin-top: -16px;
}

.tb-checkout-line {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 16px 0;
}

.tb-checkout-line:first-child {
    padding-top: 0;
}

/* The others below the first, each set off by a line. */
.tb-checkout-line + .tb-checkout-line {
    border-top: 1px solid var(--slate-100);
}

.tb-checkout-line.voucher {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
}

.tb-checkout-thumb {
    width: 64px;
    height: 64px;
    overflow: hidden;
}

.tb-checkout-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.3);
}

.tb-checkout-line-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tb-checkout-line-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.tb-checkout-line-name {
    color: var(--slate-900);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.tb-checkout-line-price {
    color: var(--slate-900);
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    white-space: nowrap;
}

.tb-checkout-line.voucher .tb-checkout-line-price {
    font-size: 13.5px;
    font-weight: 700;
}

.tb-checkout-line-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    color: var(--slate-600);
    font-size: 11.5px;
    line-height: 1.55;
}

.tb-checkout-line-meta > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.tb-checkout-line-meta dt {
    color: var(--slate-900);
    font-weight: 700;
}

.tb-checkout-line-meta dd {
    margin: 0;
    min-width: 0;
}

.tb-checkout-line-flavour {
    gap: 6px !important;
}

.tb-checkout-line-flavour .form-select {
    width: auto;
    max-width: min(200px, 100%);
    height: 28px;
    padding-top: 0;
    padding-bottom: 0;
    background-color: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--tb-radius-menu);
    box-shadow: none;
    color: var(--slate-900);
    font-size: 11.5px;
    font-weight: 600;
}

.tb-checkout-line-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
}

.tb-checkout-line-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
}

.tb-checkout-preview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--tb-teal-ink);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

@media (hover: hover) {
    .tb-checkout-preview:hover {
        text-decoration: underline;
    }
}

.tb-checkout-qty {
    height: 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border: 1px solid var(--slate-200);
    border-radius: var(--tb-radius-control);
}

.tb-checkout-qty button {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    color: var(--slate-700);
    cursor: pointer;
}

.tb-checkout-qty button:disabled {
    color: var(--slate-300);
    cursor: default;
}

.tb-checkout-qty input {
    width: 26px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--slate-900);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    appearance: textfield;
}

/* The ring goes round the whole quantity box, not tight round the narrow number inside it. A browser without :has() keeps
   the input's own ring. */
@supports selector(:has(*)) {
    .tb-checkout-qty:has(input:focus-visible) {
        outline: 3px solid var(--tb-teal-accessible);
        outline-offset: 2px;
    }

    .tb-checkout .tb-checkout-qty input:focus-visible {
        outline: none;
    }
}

.tb-checkout-qty input::-webkit-outer-spin-button,
.tb-checkout-qty input::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
}

/* margin-left: auto keeps the tools on the right when the row wraps. */
.tb-checkout-line-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: -6px;
    margin-left: auto;
}

/* Voucher. */
.tb-checkout-voucher {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--slate-100);
}

.tb-checkout-voucher .alert {
    margin: 0;
}

.tb-checkout-voucher-form {
    display: flex;
    gap: 8px;
}

.tb-checkout-voucher-form input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 18px;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--tb-radius-control);
    color: var(--slate-900);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
}

.tb-checkout-voucher-form input::placeholder {
    text-transform: none;
}

.tb-checkout-voucher-form input:focus {
    border-color: var(--tb-teal-ui);
}

.tb-checkout-voucher-form button {
    height: 44px;
    padding: 0 22px;
    background: #fff;
    border: 1px solid var(--slate-900);
    border-radius: var(--tb-radius-control);
    color: var(--slate-900);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

@media (hover: hover) {
    .tb-checkout-voucher-form button:hover:not(:disabled) {
        background: var(--slate-900);
        color: #fff;
    }
}

.tb-checkout-voucher-form button:disabled {
    opacity: 0.4;
    cursor: default;
}

.applied-text {
    color: var(--tb-teal-ink);
    font-size: 13px;
}

/* Totals. */
.tb-checkout-totals {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--slate-100);
    font-size: 13px;
    font-weight: 500;
}

.tb-checkout-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.tb-checkout-totals > div > span:first-child {
    color: var(--slate-600);
}

.tb-checkout-totals > div > span:last-child {
    color: var(--slate-900);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tb-checkout-totals > .tb-checkout-discount > span:last-child {
    color: var(--tb-teal-ink);
}

.tb-checkout-totals .tb-checkout-total {
    align-items: baseline;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--slate-100);
}

.tb-checkout-total > span:first-child {
    color: var(--slate-900) !important;
    font-size: 14px;
    font-weight: 700;
}

.tb-checkout-total > span:last-child {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.tb-checkout-totals .tb-checkout-tax {
    margin-top: -4px;
}

/* Help, under both columns. */
.tb-checkout-helpbar-wrap {
    padding: 0 48px 28px;
}

.tb-checkout-helpbar {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 12px 20px;
    background: var(--tb-teal-wash);
    border: 1px solid var(--tb-teal-tint-border);
    border-radius: var(--tb-radius-card);
}

.tb-checkout-helpbar-text {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.tb-checkout-helpbar-text > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tb-checkout-helpbar strong {
    color: var(--slate-900);
    font-size: 14px;
    font-weight: 600;
}

.tb-checkout-helpbar-text > span:last-child > span {
    color: var(--slate-600);
    font-size: 12.5px;
}

.tb-checkout-helpbar-icon {
    width: 36px;
    height: 36px;
    flex: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--tb-teal-tint-border);
    border-radius: 999px;
    color: var(--tb-teal-ink);
}

.tb-checkout-helpbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-checkout-help-whatsapp,
.tb-checkout-help-email {
    height: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: var(--tb-radius-control);
    font-size: 12px;
    text-decoration: none;
}

.tb-checkout-help-whatsapp {
    background: var(--slate-900);
    color: #fff;
    font-weight: 700;
}

@media (hover: hover) {
    .tb-checkout-help-whatsapp:hover {
        background: var(--slate-800);
        color: #fff;
    }
}

.tb-checkout-help-email {
    background: #fff;
    border: 1px solid var(--slate-200);
    color: var(--slate-700);
    font-weight: 600;
    overflow-wrap: anywhere;
}

@media (hover: hover) {
    .tb-checkout-help-email:hover {
        border-color: var(--slate-400);
        color: var(--slate-900);
    }
}

/* The photo band above the footer. */
.tb-checkout-band {
    position: relative;
    height: 240px;
    overflow: hidden;
    background: #2a2118;
}

.tb-checkout-band-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 64%;
}

.tb-checkout-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 10, 10, 0.82) 0%, rgba(10, 10, 10, 0.55) 32%, rgba(10, 10, 10, 0) 60%);
}

.tb-checkout-band-text {
    position: relative;
    z-index: 1;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
    box-sizing: content-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.tb-checkout-band-text img {
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.tb-checkout-band-text span {
    color: var(--tb-teal-light);
    font-size: var(--tb-eyebrow-size);
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.tb-checkout-band-text h2 {
    max-width: 520px;
    margin: 0;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-transform: uppercase;
}

/* Pop-ups: Preview label and What to expect. Above the navbar and Bootstrap's cart modal, as the blend notes. */
.tb-checkout-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(20, 20, 20, 0.45);
}

.tb-checkout-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1100;
    width: calc(100vw - 64px);
    max-width: 560px;
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: var(--tb-radius-card);
    transform: translate(-50%, -50%);
}

.tb-checkout-label-dialog {
    max-width: 980px;
}

.tb-checkout-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 28px;
    border-bottom: 1px solid var(--slate-100);
}

.tb-checkout-dialog-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tb-checkout-dialog-title .tb-checkout-eyebrow {
    padding-right: 0;
}

/* A long blend name wraps rather than being cut short. */
.tb-checkout-dialog-title h2 {
    margin: 0;
    color: var(--slate-900);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: anywhere;
}

.tb-checkout-dialog-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-checkout-dialog-tools .tb-checkout-button {
    height: 40px;
    padding: 0 18px;
    font-size: 12px;
}

.tb-checkout-dialog-close {
    width: 40px;
    height: 40px;
    flex: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    border: 1px solid var(--slate-300);
    border-radius: 999px;
    color: var(--slate-900);
    cursor: pointer;
}

@media (hover: hover) {
    .tb-checkout-dialog-close:hover {
        background: var(--tb-page);
    }
}

.tb-checkout-dialog-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 28px;
}

.tb-checkout-label-body {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    background: var(--slate-50);
}

.tb-checkout-label-pane {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.tb-checkout-caption {
    margin: 0;
    color: var(--slate-600);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
}

.tb-checkout-caption.muted {
    color: var(--slate-500);
    font-weight: 500;
}

.tb-checkout-label-frame {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--tb-radius-card);
}

.tb-checkout-label-problem {
    margin: 0;
    padding: 10px 28px;
    border-bottom: 1px solid var(--slate-100);
    color: var(--destructive);
    font-size: 12px;
    font-weight: 600;
}

.tb-checkout-label-frame p {
    margin: 0;
    padding: 24px;
    color: var(--slate-400);
    font-size: 12px;
    text-align: center;
}

.tb-checkout-label-image {
    display: block;
    width: 100%;
}

.tb-checkout-label-image[hidden] {
    display: none;
}

/* The tub: its photo at once, then the 3D tub in the photo's place once the viewer marks the box data-tub3d="ready".
   While it loads, and whenever it fails, the photo stays and the canvas, its buttons and the hint stay hidden. The
   canvas is hidden rather than removed, so the viewer can measure it before it is shown. */
.tb-checkout-label-tub {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tb-checkout-label-tub-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--tb-radius-card);
}

.tb-checkout-label-tub-stage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.25);
}

.tb-checkout-label-tub-stage canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    visibility: hidden;
}

.tb-checkout-label-tub-views,
.tb-checkout-label-tub [data-tub-hint] {
    display: none;
}

.tb-checkout-label-tub[data-tub3d="ready"] .tb-checkout-label-tub-stage img {
    visibility: hidden;
}

.tb-checkout-label-tub[data-tub3d="ready"] .tb-checkout-label-tub-stage canvas {
    visibility: visible;
}

/* The row wraps rather than run out of the pane when the text is enlarged (text-only zoom) or a wider font stands in. */
.tb-checkout-label-tub[data-tub3d="ready"] .tb-checkout-label-tub-views {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Turn left and Turn right: square icon buttons, 44px like Front and Back. */
.tb-checkout-label-tub-turn {
    width: 44px;
    flex: none;
    padding: 0;
}

.tb-checkout-label-tub[data-tub3d="ready"] [data-tub-hint] {
    display: block;
}

/* The ring goes round the whole tub box (the box clips, and its corners are round), not on the bare canvas. A browser
   without :has() keeps the canvas's own ring instead, drawn inside the canvas because the box would clip a ring 2px
   out, so the focused tub is never without one. */
.tb-checkout .tb-checkout-label-tub-stage canvas:focus-visible {
    outline-offset: -3px;
}

@supports selector(:has(*)) {
    .tb-checkout-label-tub-stage:has(canvas:focus-visible) {
        outline: 3px solid var(--tb-teal-accessible);
        outline-offset: 2px;
    }

    .tb-checkout .tb-checkout-label-tub-stage canvas:focus-visible {
        outline: none;
    }
}

.tb-checkout-expect-intro {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 16px;
}

.tb-checkout-expect-intro strong {
    color: var(--slate-900);
    font-size: 15px;
    font-weight: 700;
}

.tb-checkout-expect-intro p {
    margin: 0;
    color: var(--slate-600);
    font-size: 13.5px;
    line-height: 1.65;
}

.tb-checkout-expect-rows {
    margin: 0;
}

.tb-checkout-expect-rows > div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 4px 16px;
    padding: 14px 0;
    border-top: 1px solid var(--slate-100);
    font-size: 13px;
}

.tb-checkout-expect-rows dt {
    color: var(--slate-900);
    font-weight: 700;
}

.tb-checkout-expect-rows dd {
    margin: 0;
    color: var(--slate-600);
    line-height: 1.6;
}

/* The blend notes pop-up. */
.tb-checkout-notes {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.tb-checkout-notes h2 {
    margin: 0 0 14px;
    color: var(--tb-ink);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
}

.tb-checkout-notes-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.tb-checkout-notes h3 {
    margin: 0 0 8px;
    color: var(--tb-teal-ink);
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
}

.tb-checkout-notes dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 8px 12px;
    margin: 0 0 12px;
    font-size: 13px;
}

.tb-checkout-notes dt {
    color: var(--tb-ink);
    font-weight: 600;
}

.tb-checkout-notes dd {
    margin: 0;
}

/* Wide screens: the markup has the summary straight after the greeting (the order phones show, and the order Tab and
   screen readers follow); the grid puts the greeting and the cards on the left and the summary on the right beside both,
   sticky as before. The cards' row takes any extra height, so a long summary never opens a gap under the greeting. */
.tb-checkout-grid {
    grid-template-rows: auto 1fr;
    row-gap: 16px;
}

.tb-checkout-greeting {
    grid-column: 1;
    grid-row: 1;
}

.tb-checkout-main {
    grid-column: 1;
    grid-row: 2;
}

.tb-checkout-side {
    grid-column: 2;
    grid-row: 1 / span 2;
}

/* Narrow laptops and tablets: one column, with the summary under the greeting and the place-order card last. */
@media (max-width: 999.98px) {
    .tb-checkout-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 12px 32px 40px;
        box-sizing: border-box;
    }

    /* One column in the markup's order (greeting, summary, cards); the summary no longer sticks. */
    .tb-checkout-side {
        position: static;
    }

    .tb-checkout-steps {
        padding-right: 32px;
        padding-left: 32px;
    }

    .tb-checkout > .alert {
        margin-right: 32px;
        margin-left: 32px;
    }

    .tb-checkout-helpbar-wrap {
        padding: 0 32px 24px;
    }

    .tb-checkout-band-text {
        padding: 0 32px;
    }
}

/* Phones: a compact greeting, and the summary open under a bar that folds it. */
@media (max-width: 759.98px) {
    /* Each step's mark sits above its label, so the three fit on one line down to 320px; the lines join the marks. */
    .tb-checkout-steps {
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 6px;
        padding: 14px 20px 4px;
    }

    .tb-checkout-step {
        flex-direction: column;
        gap: 4px;
    }

    .tb-checkout-step-line {
        flex: none;
        width: 24px;
        margin-top: 12px;
    }

    .tb-checkout > .alert {
        margin-right: 20px;
        margin-left: 20px;
    }

    .tb-checkout-grid {
        padding: 12px 20px 24px;
    }

    .tb-checkout-card {
        padding: 20px;
    }

    .tb-checkout-card h2 {
        font-size: 17px;
    }

    /* At least 16px, so iOS does not zoom the page when a field gets focus. */
    .tb-checkout-picker-search input,
    .tb-checkout-field .form-control,
    .tb-checkout-field .form-select,
    .tb-checkout-client-search input,
    .tb-checkout-voucher-form input,
    .tb-checkout-line-flavour .form-select,
    .tb-checkout-qty input {
        font-size: 1rem;
    }

    .tb-checkout-greeting {
        gap: 6px;
        padding: 14px 16px;
    }

    .tb-checkout-greeting > img {
        top: 12px;
        right: 12px;
        width: 24px;
        height: 24px;
    }

    /* The page heading stays above the cards' headings (17px). */
    .tb-checkout-greeting h1 {
        font-size: var(--type-heading-sm);
    }

    .tb-checkout-greeting > p {
        font-size: 12.5px;
    }

    .tb-checkout-modes {
        margin-top: 4px;
    }

    .tb-checkout-order {
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .tb-checkout-bar {
        width: 100%;
        min-height: 52px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 16px;
        background: #fff;
        border: 1px solid var(--tb-line);
        border-radius: var(--tb-radius-card);
        color: var(--slate-900);
        font: inherit;
        font-size: 14px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        cursor: pointer;
    }

    .tb-checkout-bar > span:first-child {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 600;
    }

    .tb-checkout-bar svg {
        transition: transform var(--dur-base) var(--ease-out);
    }

    .tb-checkout-order.open .tb-checkout-bar {
        border-radius: 8px 8px 0 0;
    }

    .tb-checkout-order.open .tb-checkout-bar svg {
        transform: rotate(180deg);
    }

    .tb-checkout-summary {
        padding: 20px;
        border: 1px solid var(--tb-line);
        border-radius: var(--tb-radius-card);
    }

    /* Folded: only the bar shows. An empty cart has no bar, so nothing is folded away. */
    .tb-checkout-order:has(.tb-checkout-bar):not(.open) .tb-checkout-summary {
        display: none;
    }

    .tb-checkout-order:has(.tb-checkout-bar) .tb-checkout-summary {
        border-top: 0;
        border-radius: 0 0 8px 8px;
    }

    .tb-checkout-summary > .tb-checkout-eyebrow {
        display: none;
    }

    .tb-checkout-line-row {
        align-items: flex-start;
    }

    .tb-checkout-client-row {
        flex-wrap: wrap;
    }

    .tb-checkout-client-search,
    .tb-checkout-client-row > .tb-checkout-button {
        flex: 1 1 100%;
    }

    .tb-checkout-sent {
        padding: 28px 20px;
    }

    .tb-checkout-helpbar-wrap {
        padding: 0 20px 16px;
    }

    .tb-checkout-helpbar {
        padding: 14px 16px;
    }

    .tb-checkout-band {
        height: 210px;
        margin-top: 8px;
    }

    .tb-checkout-band-photo {
        object-position: 62% 60%;
    }

    .tb-checkout-band::after {
        background: linear-gradient(0deg, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.25) 70%, rgba(10, 10, 10, 0.1) 100%);
    }

    .tb-checkout-band-text {
        justify-content: flex-end;
        padding: 20px;
        box-sizing: border-box;
    }

    .tb-checkout-band-text h2 {
        font-size: 22px;
    }

    /* Pop-ups fill the screen. */
    .tb-checkout-dialog {
        top: 0;
        left: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
        transform: none;
    }

    /* A wrapped title grows downwards; Download and ✕ stay at the top right. */
    .tb-checkout-dialog-head {
        align-items: flex-start;
        padding: 14px 16px;
    }

    /* Label preview: the eyebrow shares the top row with Download and ✕, and the blend name gets the full width below. */
    .tb-checkout-label-dialog .tb-checkout-dialog-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "eyebrow tools"
            "title title";
        align-items: center;
        column-gap: 12px;
        row-gap: 10px;
    }

    .tb-checkout-label-dialog .tb-checkout-dialog-title {
        display: contents;
    }

    .tb-checkout-label-dialog .tb-checkout-dialog-title .tb-checkout-eyebrow {
        grid-area: eyebrow;
    }

    .tb-checkout-label-dialog .tb-checkout-dialog-title h2 {
        grid-area: title;
    }

    .tb-checkout-label-dialog .tb-checkout-dialog-tools {
        grid-area: tools;
    }

    .tb-checkout-dialog-tools .tb-checkout-button {
        padding: 0 14px;
    }

    .tb-checkout-wide-only {
        display: none;
    }

    .tb-checkout-dialog-body {
        padding: 16px;
    }

    .tb-checkout-label-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    /* The tub box stays square and is never taller than 60% of the screen (a phone on its side gets a smaller square,
       not a strip that crops the photo), so a swipe beside it still reaches the rest of the pop-up. The smaller square
       keeps to the left edge, with Front, Back and the hint under it. */
    .tb-checkout-label-tub-stage {
        width: min(100%, 60svh);
        align-self: flex-start;
    }

    .tb-checkout-expect-rows > div {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Reduced motion: the chevrons flip at once, and the Pay button does not shrink when pressed. */
@media (prefers-reduced-motion: reduce) {
    .tb-checkout-picker-chevron,
    .tb-checkout-bar svg,
    .tb-checkout-pay-button {
        transition: none;
    }

    .tb-checkout-pay-button:active:not(:disabled) {
        transform: none;
    }
}