html.order-modal-open,
body.order-modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.order-cart-button {
    position: relative;
    display: inline-grid;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    place-items: center;
    margin-left: 16px;
    border: 1px solid rgba(17, 17, 17, .12);
    border-radius: 50%;
    color: #111111;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 8px 24px rgba(17, 17, 17, .08);
    transition:
        transform var(--transition),
        background-color var(--transition),
        box-shadow var(--transition);
}

.order-cart-button[hidden] {
    display: none;
}

.order-cart-button:hover {
    transform: translateY(-2px);
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(17, 17, 17, .13);
}

.order-cart-button svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.order-cart-button span {
    position: absolute;
    top: -5px;
    right: -4px;
    display: grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    padding: 0 5px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    color: #111111;
    background: #d9b86c;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.order-postcode-modal[hidden],
.order-quantity-modal[hidden] {
    display: none;
}

.order-postcode-modal,
.order-quantity-modal {
    position: fixed;
    z-index: 6200;
    inset: 0;
    display: grid;
    place-items: center;
    padding:
        max(16px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
}

.order-postcode-modal__backdrop,
.order-quantity-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(6, 6, 6, .84);
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.order-postcode-modal__dialog,
.order-quantity-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(620px, 100%);
    max-height: min(90dvh, 780px);
    padding: clamp(28px, 5vw, 54px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 28px;
    color: #111111;
    background:
        radial-gradient(circle at 100% 0, rgba(217, 184, 108, .26), transparent 34%),
        #f8f4ec;
    box-shadow: 0 34px 100px rgba(0, 0, 0, .44);
    overflow-y: auto;
}

.order-postcode-modal__close,
.order-quantity-modal__close {
    position: absolute;
    z-index: 2;
    top: 16px;
    right: 16px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(17, 17, 17, .12);
    border-radius: 50%;
    color: #111111;
    background: rgba(255, 255, 255, .82);
    cursor: pointer;
}

.order-postcode-modal__close svg,
.order-quantity-modal__close svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.order-postcode-modal__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    padding: 7px 11px;
    border: 1px solid rgba(17, 17, 17, .12);
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: .14em;
}

.order-postcode-modal__brand span {
    color: rgba(17, 17, 17, .52);
}

.order-postcode-modal__brand strong {
    font-weight: 700;
}

.order-postcode-modal__eyebrow,
.order-quantity-modal__eyebrow {
    margin: 0 0 10px;
    color: rgba(17, 17, 17, .56);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.order-postcode-modal__step h2,
.order-quantity-modal__dialog h2 {
    margin: 0;
    max-width: 510px;
    font-size: clamp(31px, 6vw, 52px);
    font-weight: 570;
    line-height: .98;
    letter-spacing: -.045em;
}

.order-postcode-modal__step > p:not(.order-postcode-modal__eyebrow),
.order-quantity-modal__dialog > p:not(.order-quantity-modal__eyebrow) {
    margin: 17px 0 0;
    color: rgba(17, 17, 17, .67);
    font-size: 15px;
    line-height: 1.65;
}

.order-postcode-form {
    margin-top: 28px;
}

.order-postcode-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.order-postcode-form__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.order-postcode-form input {
    width: 100%;
    min-width: 0;
    height: 58px;
    padding: 0 18px;
    border: 1px solid rgba(17, 17, 17, .16);
    border-radius: 14px;
    color: #111111;
    background: #ffffff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.order-postcode-form input:focus {
    border-color: #111111;
    box-shadow: 0 0 0 4px rgba(17, 17, 17, .08);
    outline: 0;
}

.order-postcode-form__row button,
.order-quantity-modal__confirm {
    min-height: 58px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    background: #111111;
    cursor: pointer;
    font-weight: 650;
}

.order-postcode-form__row button:disabled {
    cursor: wait;
    opacity: .58;
}

.order-postcode-form small {
    display: block;
    margin-top: 9px;
    color: rgba(17, 17, 17, .48);
    font-size: 12px;
}

.order-postcode-status,
.cart-inline-status,
.checkout-form-status {
    margin: 14px 0 0;
    padding: 11px 13px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
}

.order-postcode-status[data-status-type="error"],
.cart-inline-status[data-status-type="error"],
.checkout-form-status[data-status-type="error"] {
    color: #862e25;
    background: rgba(201, 88, 72, .12);
}

.order-postcode-status[data-status-type="success"],
.cart-inline-status[data-status-type="success"],
.checkout-form-status[data-status-type="success"] {
    color: #225c35;
    background: rgba(70, 151, 91, .13);
}

.order-postcode-status[data-status-type="info"],
.cart-inline-status[data-status-type="info"],
.checkout-form-status[data-status-type="info"] {
    color: #5b4a1c;
    background: rgba(217, 184, 108, .18);
}

.order-fulfilment-choices {
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

.order-fulfilment-choice {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(17, 17, 17, .13);
    border-radius: 18px;
    color: #111111;
    background: rgba(255, 255, 255, .72);
    cursor: pointer;
    text-align: left;
    transition:
        transform var(--transition),
        border-color var(--transition),
        background-color var(--transition);
}

.order-fulfilment-choice:hover {
    transform: translateY(-2px);
    border-color: rgba(17, 17, 17, .36);
    background: #ffffff;
}

.order-fulfilment-choice__icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 14px;
    background: rgba(217, 184, 108, .22);
}

.order-fulfilment-choice__icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.order-fulfilment-choice > span:last-child {
    display: grid;
    gap: 4px;
}

.order-fulfilment-choice strong {
    font-size: 18px;
}

.order-fulfilment-choice small {
    color: rgba(17, 17, 17, .58);
    font-size: 12px;
}

.order-fulfilment-choice.is-unavailable {
    border-color: rgba(17, 17, 17, .09);
    background: rgba(255, 255, 255, .48);
    cursor: not-allowed;
}

.order-fulfilment-choice.is-unavailable:hover {
    transform: none;
    border-color: rgba(17, 17, 17, .13);
    background: rgba(255, 255, 255, .58);
}

.order-fulfilment-choice.is-unavailable .order-fulfilment-choice__icon {
    color: rgba(17, 17, 17, .48);
    background: rgba(17, 17, 17, .065);
}

.order-fulfilment-choice.is-unavailable-feedback {
    border-color: rgba(180, 48, 38, .42);
    background: rgba(201, 88, 72, .075);
}

.order-fulfilment-choice small.is-error {
    color: #a62f25;
    font-style: italic;
    font-weight: 600;
}

.order-postcode-modal__back {
    margin-top: 18px;
    padding: 0;
    border: 0;
    color: rgba(17, 17, 17, .62);
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.order-page {
    background: #f6f2ea;
}

.order-main {
    min-height: 100vh;
}

.order-menu-board {
    min-height: 100vh;
    padding-top: calc(
        var(--announcement-height, 0px) +
        var(--header-height, 0px) +
        12px
    );
}

.order-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.order-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: -26px auto 22px;
    padding: 13px 16px;
    border: 1px solid rgba(17, 17, 17, .1);
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
}

.order-context-bar > div {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 10px;
}

.order-context-bar small {
    flex: 0 0 auto;
    color: rgba(17, 17, 17, .48);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.order-context-bar strong {
    min-width: 0;
    font-size: 14px;
    line-height: 1.25;
}

.order-context-bar button,
.checkout-step__heading > button {
    flex: 0 0 auto;
    padding: 9px 13px;
    border: 1px solid rgba(17, 17, 17, .13);
    border-radius: 999px;
    color: #111111;
    background: transparent;
    cursor: pointer;
    font-size: 11px;
    font-weight: 650;
}

.order-category-nav-shell {
    top: var(--order-sticky-offset, 0px);
    margin-bottom: 38px;
}

.order-closed-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 auto 22px;
    padding: 14px 16px;
    border: 1px solid rgba(17, 17, 17, .12);
    border-radius: 16px;
    color: #111111;
    background: rgba(217, 184, 108, .22);
}

.order-closed-notice strong {
    font-size: 14px;
}

.order-closed-notice span {
    color: rgba(17, 17, 17, .62);
    font-size: 12px;
    text-align: right;
}

.order-menu-grid.has-card-selection .menu-category,
.order-menu-grid.has-card-selection .menu-category.is-dimmed,
.order-menu-grid .menu-category.is-dimmed,
.order-menu-grid .menu-category.is-selected {
    opacity: 1;
    filter: none;
    pointer-events: auto;
    transform: none;
}

.order-menu-item {
    grid-template-columns: auto minmax(16px, 1fr) auto;
}

.order-menu-item.has-product-add {
    grid-template-columns: auto minmax(16px, 1fr) auto auto;
}

.order-menu-item.has-variants {
    grid-template-columns: auto minmax(16px, 1fr) auto;
}

.order-add-button {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(17, 17, 17, .14);
    border-radius: 50%;
    color: #111111;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(17, 17, 17, .08);
    cursor: pointer;
    font-size: 23px;
    font-weight: 400;
    line-height: 1;
    transition:
        transform var(--transition),
        color var(--transition),
        background-color var(--transition);
}

.order-add-button:hover {
    transform: scale(1.08);
    color: #ffffff;
    background: #111111;
}

.order-add-button:disabled {
    cursor: not-allowed;
    opacity: .3;
}

.order-add-button--variant {
    align-self: center;
}

.order-menu-variant {
    grid-template-columns: 76px minmax(0, 1fr) 40px;
}

.order-menu-variant .menu-variant__copy {
    padding-right: 4px;
}

.order-quantity-modal__dialog {
    width: min(480px, 100%);
    text-align: center;
}

.order-quantity-modal__image {
    display: grid;
    box-sizing: border-box;
    width: 116px;
    height: 116px;
    place-items: center;
    margin: 0 auto 22px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, .08);
    border-radius: 20px;
    background: #ffffff;
    isolation: isolate;
}

.order-quantity-modal__image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    border-radius: 12px;
    object-fit: contain;
    object-position: center;
}

.order-quantity-modal__eyebrow {
    text-align: center;
}

.order-quantity-modal__dialog h2 {
    max-width: none;
    font-size: clamp(30px, 6vw, 45px);
}

.order-quantity-control,
.cart-item-quantity {
    display: inline-grid;
    grid-template-columns: 44px 54px 44px;
    align-items: center;
    margin: 28px auto 0;
    padding: 5px;
    border: 1px solid rgba(17, 17, 17, .13);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
}

.order-quantity-control button,
.cart-item-quantity button {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #111111;
    background: rgba(17, 17, 17, .06);
    cursor: pointer;
    font-size: 21px;
}

.order-quantity-control button:disabled {
    cursor: not-allowed;
    opacity: .32;
}

.order-quantity-control strong,
.cart-item-quantity strong {
    text-align: center;
    font-size: 18px;
}

.order-quantity-modal__confirm {
    width: 100%;
    margin-top: 20px;
}

.order-toast {
    position: fixed;
    z-index: 7000;
    right: 22px;
    bottom: 22px;
    max-width: min(390px, calc(100vw - 32px));
    padding: 14px 18px;
    border-radius: 14px;
    color: #ffffff;
    background: #111111;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

.order-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.order-footer {
    margin-top: clamp(70px, 10vw, 130px);
}

.cart-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 12%, rgba(217, 184, 108, .18), transparent 28%),
        #f6f2ea;
}

.cart-main {
    min-height: 100vh;
    padding:
        calc(var(--announcement-height, 0px) + var(--header-height, 0px) + 56px)
        0
        100px;
}

.cart-page-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 16px 30px;
    margin-bottom: 44px;
}

.cart-page-heading > p {
    grid-column: 1 / -1;
    margin: 0;
    color: rgba(17, 17, 17, .54);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .13em;
}

.cart-page-heading h1 {
    margin: 0;
    font-size: clamp(48px, 8vw, 94px);
    font-weight: 550;
    line-height: .9;
    letter-spacing: -.06em;
}

.cart-page-heading a {
    padding: 12px 17px;
    border: 1px solid rgba(17, 17, 17, .14);
    border-radius: 999px;
    color: #111111;
    background: rgba(255, 255, 255, .7);
    font-size: 12px;
    font-weight: 650;
}

.checkout-progress {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(28px, 70px)
        minmax(0, 1fr)
        minmax(28px, 70px)
        minmax(0, 1fr);
    align-items: center;
    margin-bottom: 30px;
}

.checkout-progress__step {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(17, 17, 17, .35);
    transition:
        opacity var(--transition),
        color var(--transition);
}

.checkout-progress__step[data-checkout-progress="details"] {
    justify-content: center;
    text-align: center;
}

.checkout-progress__step:last-child {
    justify-content: flex-end;
    text-align: right;
}

.checkout-progress__step span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
}

.checkout-progress__step strong {
    font-size: 13px;
}

.checkout-progress__step.is-active {
    color: #111111;
}

.checkout-progress__step.is-completed {
    color: rgba(17, 17, 17, .46);
}

.checkout-progress__line {
    height: 1px;
    background: rgba(17, 17, 17, .16);
}

.checkout-step {
    padding: clamp(22px, 4vw, 42px);
    border: 1px solid rgba(17, 17, 17, .11);
    border-radius: 28px;
    background: rgba(255, 255, 255, .64);
    box-shadow: 0 30px 90px rgba(17, 17, 17, .08);
}

.checkout-step + .checkout-step {
    margin-top: 24px;
}

.checkout-step[hidden] {
    display: none;
}

.checkout-step.is-completed {
    opacity: .42;
    filter: grayscale(.65);
    pointer-events: none;
}

.checkout-step__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 28px;
}

.checkout-step__heading p {
    margin: 0 0 6px;
    color: rgba(17, 17, 17, .5);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.checkout-step__heading h2 {
    margin: 0;
    font-size: clamp(30px, 5vw, 52px);
    font-weight: 560;
    line-height: 1;
    letter-spacing: -.04em;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
    gap: 22px;
    align-items: start;
}

.cart-items-card,
.cart-summary-card {
    border: 1px solid rgba(17, 17, 17, .1);
    border-radius: 20px;
    background: rgba(255, 255, 255, .76);
}

.cart-items-card {
    padding: 8px 20px;
}

.cart-summary-card {
    position: sticky;
    top: 142px;
    padding: 22px;
}

.cart-empty-state {
    padding: 54px 20px;
    text-align: center;
}

.cart-empty-state h3 {
    margin: 0;
    font-size: 27px;
}

.cart-empty-state p {
    margin: 10px auto 22px;
    max-width: 390px;
    color: rgba(17, 17, 17, .58);
}

.cart-empty-state a {
    display: inline-flex;
    padding: 12px 18px;
    border-radius: 999px;
    color: #ffffff;
    background: #111111;
    font-size: 13px;
    font-weight: 650;
}

.cart-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(17, 17, 17, .1);
}

.cart-item:last-child {
    border-bottom: 0;
}

.cart-item.has-no-image {
    grid-template-columns: minmax(0, 1fr) auto;
}

.cart-item__image {
    display: grid;
    width: 82px;
    height: 82px;
    place-items: center;
    padding: 8px;
    border-radius: 15px;
    background: #ffffff;
}

.cart-item__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cart-item__copy {
    min-width: 0;
}

.cart-item__copy h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.1;
}

.cart-item__copy small {
    display: block;
    margin-top: 4px;
    color: rgba(17, 17, 17, .52);
    font-size: 12px;
}

.cart-item__copy p {
    margin: 5px 0 0;
    color: rgba(17, 17, 17, .62);
    font-size: 12px;
    font-style: italic;
}

.cart-item__unit-price {
    display: block;
    margin-top: 8px;
    font-size: 13px;
}

.cart-item__actions {
    display: grid;
    justify-items: end;
    gap: 8px;
}

.cart-item-quantity {
    grid-template-columns: 34px 40px 34px;
    margin: 0;
    padding: 3px;
}

.cart-item-quantity button {
    width: 34px;
    height: 34px;
    font-size: 18px;
}

.cart-item-quantity strong {
    font-size: 14px;
}

.cart-item__line-total {
    font-size: 14px;
}

.cart-item__remove {
    padding: 0;
    border: 0;
    color: rgba(17, 17, 17, .48);
    background: transparent;
    cursor: pointer;
    font-size: 11px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cart-fulfilment-summary {
    display: grid;
    gap: 4px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(17, 17, 17, .1);
}

.cart-fulfilment-summary small {
    color: rgba(17, 17, 17, .48);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.cart-fulfilment-summary strong {
    font-size: 21px;
}

.cart-fulfilment-summary span {
    color: rgba(17, 17, 17, .58);
    font-size: 13px;
}

.cart-totals {
    display: grid;
    gap: 12px;
    margin: 20px 0 0;
}

.cart-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: rgba(17, 17, 17, .66);
    font-size: 14px;
}

.cart-totals dd {
    margin: 0;
    color: #111111;
    font-weight: 650;
}

.cart-totals__grand {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid rgba(17, 17, 17, .12);
    color: #111111 !important;
    font-size: 18px !important;
    font-weight: 650;
}

.cart-continue-button,
.checkout-pay-button {
    width: 100%;
    min-height: 56px;
    margin-top: 22px;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    background: #111111;
    cursor: pointer;
    font-weight: 650;
}

.cart-continue-button:disabled {
    cursor: not-allowed;
    opacity: .32;
}

.checkout-details-form {
    padding-top: 4px;
}

.checkout-form-grid,
.checkout-address-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.checkout-address-fields {
    grid-column: 1 / -1;
}

.checkout-address-fields[hidden] {
    display: none;
}

.checkout-form-grid label {
    display: grid;
    gap: 8px;
}

.checkout-form-grid label > span {
    color: rgba(17, 17, 17, .58);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.checkout-form-grid input,
.checkout-form-grid textarea {
    width: 100%;
    border: 1px solid rgba(17, 17, 17, .13);
    border-radius: 14px;
    color: #111111;
    background: rgba(255, 255, 255, .86);
}

.checkout-form-grid input {
    height: 54px;
    padding: 0 16px;
}

.checkout-form-grid textarea {
    min-height: 118px;
    padding: 15px 16px;
    resize: vertical;
}

.checkout-form-grid input:focus,
.checkout-form-grid textarea:focus {
    border-color: #111111;
    box-shadow: 0 0 0 4px rgba(17, 17, 17, .07);
    outline: 0;
}

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

.checkout-form-actions {
    display: grid;
    grid-template-columns: auto minmax(220px, 360px);
    justify-content: space-between;
    gap: 16px;
    margin-top: 26px;
}

.checkout-back-button {
    min-height: 54px;
    padding: 0 24px;
    border: 1px solid rgba(17, 17, 17, .14);
    border-radius: 999px;
    color: #111111;
    background: transparent;
    cursor: pointer;
    font-weight: 650;
}

.checkout-pay-button {
    margin: 0;
}

@media (max-width: 920px) {
    .order-cart-button {
        margin-left: auto;
        margin-right: 10px;
    }

    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary-card {
        position: static;
    }
}

@media (max-width: 640px) {
    .order-cart-button {
        width: 40px;
        height: 40px;
        margin-right: 7px;
    }

    .order-postcode-modal,
    .order-quantity-modal {
        padding: 10px;
    }

    .order-postcode-modal__dialog,
    .order-quantity-modal__dialog {
        max-height: 92dvh;
        padding: 30px 20px 22px;
        border-radius: 22px;
    }

    .order-postcode-modal__close,
    .order-quantity-modal__close {
        top: 12px;
        right: 12px;
        width: 38px;
        height: 38px;
    }

    .order-postcode-form__row {
        grid-template-columns: 1fr;
    }

    .order-postcode-form__row button {
        width: 100%;
    }

    .order-menu-board {
        padding-top: calc(
            var(--announcement-height, 0px) +
            var(--header-height, 0px) +
            8px
        );
    }

    .order-category-nav-shell {
        margin-bottom: 34px;
    }

    .order-context-bar {
        align-items: flex-start;
        margin-top: -22px;
        padding: 12px 14px;
    }

    .order-context-bar > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .order-closed-notice {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .order-closed-notice span {
        text-align: left;
    }

    .order-menu-item {
        grid-template-columns: auto minmax(10px, 1fr) auto;
    }

    .order-menu-item.has-product-add {
        grid-template-columns: auto minmax(10px, 1fr) auto 36px;
    }

    .order-menu-item.has-variants {
        grid-template-columns: auto minmax(10px, 1fr) auto;
    }

    .order-add-button {
        width: 34px;
        height: 34px;
        font-size: 21px;
    }

    .order-menu-variant {
        grid-template-columns: 66px minmax(0, 1fr) 34px;
    }

    .order-toast {
        right: 16px;
        bottom: max(16px, env(safe-area-inset-bottom));
        left: 16px;
        max-width: none;
    }

    .cart-main {
        padding-top: calc(
            var(--announcement-height, 0px) +
            var(--header-height, 0px) +
            34px
        );
    }

    .cart-page-heading {
        grid-template-columns: 1fr;
        margin-bottom: 30px;
    }

    .cart-page-heading > p {
        grid-column: auto;
    }

    .cart-page-heading a {
        justify-self: start;
    }

    .checkout-progress {
        grid-template-columns:
            minmax(130px, 1fr)
            30px
            minmax(150px, 1fr)
            30px
            minmax(130px, 1fr);
    }

    .checkout-progress__step {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .checkout-progress__step[data-checkout-progress="details"] {
        align-items: center;
    }

    .checkout-progress__step:last-child {
        align-items: flex-end;
    }

    .checkout-progress__step strong {
        font-size: 10px;
        line-height: 1.25;
    }

    .checkout-step {
        padding: 20px 14px;
        border-radius: 21px;
    }

    .checkout-step__heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .cart-items-card {
        padding: 6px 13px;
    }

    .cart-item {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 12px;
    }

    .cart-item.has-no-image {
        grid-template-columns: 1fr;
    }

    .cart-item.has-no-image .cart-item__actions {
        padding-left: 0;
    }

    .cart-item__image {
        width: 66px;
        height: 66px;
    }

    .cart-item__actions {
        grid-column: 1 / -1;
        grid-template-columns: auto auto;
        align-items: center;
        justify-items: start;
        justify-content: space-between;
        width: 100%;
        padding-left: 78px;
    }

    .cart-item__remove {
        grid-column: 1 / -1;
    }

    .checkout-form-grid,
    .checkout-address-fields {
        grid-template-columns: 1fr;
    }

    .checkout-field--wide,
    .checkout-address-fields {
        grid-column: auto;
    }

    .checkout-form-actions {
        grid-template-columns: 1fr;
    }

    .checkout-back-button {
        order: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .order-cart-button,
    .order-fulfilment-choice,
    .order-add-button,
    .order-toast {
        transition: none;
    }
}

/* Keep all order-menu products immediately visible */
.order-page .order-menu-item {
    opacity: 1;
    transform: none;
}

.order-page .menu-category.is-visible .order-menu-item {
    animation: none;
}

/* =========================================================
   ORDER CONTROLS
   Exact geometric plus/minus alignment and mobile zoom lock
   ========================================================= */

html.order-zoom-locked,
body.order-zoom-locked {
    overscroll-behavior: none;
    touch-action:
        pan-x
        pan-y;
}

body.order-zoom-locked {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.order-add-button,
.order-quantity-control button,
.cart-item-quantity__button {
    position: relative;
    display: grid;
    place-items: center;
    font-size: 0;
    line-height: 0;
}

.order-add-button > span {
    display: none;
}

.order-add-button::before,
.order-add-button::after,
.order-quantity-control button::before,
.order-quantity-control [data-order-quantity-plus]::after,
.cart-item-quantity__button::before,
.cart-item-quantity__button--plus::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--order-control-symbol-size, 14px);
    height: 2px;
    content: "";
    background: currentColor;
    border-radius: 999px;
    pointer-events: none;
    transform:
        translate(
            -50%,
            -50%
        );
    transform-origin: center;
}

.order-add-button::after,
.order-quantity-control [data-order-quantity-plus]::after,
.cart-item-quantity__button--plus::after {
    transform:
        translate(
            -50%,
            -50%
        )
        rotate(90deg);
}

.order-add-button {
    --order-control-symbol-size: 14px;
}

.order-quantity-control button {
    --order-control-symbol-size: 14px;
}

.cart-item-quantity__button {
    --order-control-symbol-size: 10px;
}

.order-page button,
.order-page a,
.order-page input,
.order-page textarea,
.order-page select,
.cart-page button,
.cart-page a,
.cart-page input,
.cart-page textarea,
.cart-page select,
.order-postcode-modal button,
.order-postcode-modal a,
.order-postcode-modal input,
.order-postcode-modal textarea,
.order-postcode-modal select {
    touch-action: manipulation;
}

@media (max-width: 920px) {
    .order-postcode-form input,
    .checkout-form-grid input,
    .checkout-form-grid textarea {
        font-size: 16px;
    }
}

@media (max-width: 640px) {
    .order-add-button {
        --order-control-symbol-size: 12px;
    }

    .order-quantity-control button {
        --order-control-symbol-size: 12px;
    }

    .cart-item-quantity__button {
        --order-control-symbol-size: 10px;
    }
}

/* Accountadressen in de afrekenstap */
.checkout-address-choice {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(20, 20, 20, .12);
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
}

.checkout-address-choice[hidden] {
    display: none;
}

.checkout-address-choice > div:first-child > span {
    display: block;
    font-weight: 700;
}

.checkout-address-choice > div:first-child > p {
    margin: 4px 0 0;
    color: rgba(20, 20, 20, .62);
    font-size: .9rem;
}

.checkout-address-choice__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.checkout-address-choice__option,
.checkout-address-choice > button {
    border: 1px solid rgba(20, 20, 20, .14);
    border-radius: 14px;
    background: #fff;
    color: #111;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.checkout-address-choice__option {
    display: grid;
    gap: 4px;
    padding: 14px;
}

.checkout-address-choice__option span {
    color: rgba(20, 20, 20, .62);
    font-size: .82rem;
    line-height: 1.35;
}

.checkout-address-choice__option.is-active {
    border-color: #111;
    box-shadow: 0 0 0 2px rgba(17, 17, 17, .08);
}

.checkout-address-choice > button {
    justify-self: start;
    padding: 10px 14px;
    font-weight: 650;
}

.checkout-address-fields[hidden] {
    display: none;
}

/* Opgeslagen adressen in de eerste bestelcontrole */
.order-saved-addresses {
    display: grid;
    gap: 13px;
    margin-top: 24px;
    padding: 17px;
    border: 1px solid rgba(17, 17, 17, .13);
    border-radius: 19px;
    background:
        linear-gradient(135deg, rgba(217, 184, 108, .16), transparent 58%),
        rgba(255, 255, 255, .76);
}

.order-saved-addresses[hidden],
.order-location-divider[hidden] {
    display: none;
}

.order-saved-addresses__heading {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.order-saved-addresses__icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    color: #111111;
    background: rgba(217, 184, 108, .28);
}

.order-saved-addresses__icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.order-saved-addresses__heading strong {
    display: block;
    font-size: 15px;
}

.order-saved-addresses__heading p {
    margin: 3px 0 0;
    color: rgba(17, 17, 17, .62);
    font-size: 12px;
    line-height: 1.45;
}

.order-saved-addresses > label {
    color: rgba(17, 17, 17, .62);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.order-saved-addresses__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.order-saved-addresses select {
    width: 100%;
    min-width: 0;
    height: 54px;
    padding: 0 42px 0 15px;
    border: 1px solid rgba(17, 17, 17, .15);
    border-radius: 14px;
    color: #111111;
    background: #ffffff;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.order-saved-addresses select:focus {
    border-color: #111111;
    box-shadow: 0 0 0 4px rgba(17, 17, 17, .07);
    outline: 0;
}

.order-saved-addresses__controls button {
    min-height: 54px;
    padding: 0 19px;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    background: #111111;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.order-saved-addresses__controls button:disabled {
    cursor: not-allowed;
    opacity: .42;
}

.order-saved-addresses__preview {
    margin: 0;
    padding: 10px 12px;
    border-left: 3px solid #d9b86c;
    border-radius: 0 10px 10px 0;
    color: rgba(17, 17, 17, .68);
    background: rgba(217, 184, 108, .1);
    font-size: 12px;
    line-height: 1.45;
}

.order-saved-addresses__preview[hidden] {
    display: none;
}

.order-location-divider {
    position: relative;
    display: grid;
    place-items: center;
    margin: 22px 0 -6px;
    color: rgba(17, 17, 17, .48);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.order-location-divider::before {
    position: absolute;
    z-index: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: rgba(17, 17, 17, .12);
    content: "";
}

.order-location-divider span {
    position: relative;
    z-index: 1;
    padding: 0 11px;
    background: #f8f4ec;
}

/* Extra verificatie en vrije adreskeuze bij afrekenen */
.checkout-address-choice__option-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.checkout-address-choice__option-top small {
    padding: 4px 7px;
    border-radius: 999px;
    color: #5b4a1c;
    background: rgba(217, 184, 108, .2);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.checkout-form-grid input.is-readonly {
    border-color: rgba(217, 184, 108, .42);
    background:
        linear-gradient(135deg, rgba(217, 184, 108, .13), transparent 72%),
        rgba(255, 255, 255, .94);
    cursor: default;
}

.checkout-address-verification {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 18px;
    padding: 17px;
    border: 1px dashed rgba(17, 17, 17, .24);
    border-radius: 17px;
    background:
        linear-gradient(135deg, rgba(217, 184, 108, .15), transparent 62%),
        rgba(255, 255, 255, .68);
}

.checkout-address-verification[hidden] {
    display: none;
}

.checkout-address-verification__eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #8a6b25;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.checkout-address-verification strong {
    display: block;
    font-size: 14px;
}

.checkout-address-verification p {
    margin: 5px 0 0;
    color: rgba(17, 17, 17, .62);
    font-size: 12px;
    line-height: 1.5;
}

.checkout-address-verification > button {
    min-height: 46px;
    padding: 0 17px;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    background: #111111;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.checkout-address-verification > button:disabled {
    cursor: wait;
    opacity: .56;
}

.checkout-address-verification__status {
    grid-column: 1 / -1;
    margin: 0 !important;
    padding: 10px 12px;
    border-radius: 11px;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.checkout-address-verification__status[data-status-type="error"] {
    color: #862e25;
    background: rgba(201, 88, 72, .12);
}

.checkout-address-verification__status[data-status-type="success"] {
    color: #225c35;
    background: rgba(70, 151, 91, .13);
}

.checkout-address-verification__status[data-status-type="info"] {
    color: #5b4a1c;
    background: rgba(217, 184, 108, .18);
}

@media (max-width: 640px) {
    .order-saved-addresses {
        padding: 14px;
    }

    .order-saved-addresses__controls,
    .checkout-address-verification {
        grid-template-columns: 1fr;
    }

    .order-saved-addresses__controls button,
    .checkout-address-verification > button {
        width: 100%;
    }

    .checkout-address-choice__list {
        grid-template-columns: 1fr;
    }
}

.checkout-address-choice__option-top strong {
    color: #111111;
    font-size: .94rem;
    line-height: 1.25;
}


/* SumUp in-website betaalstap */
.checkout-payment-step {
    padding-bottom: clamp(44px, 8vw, 88px);
}

.checkout-payment-environment {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .08em;
}

.checkout-payment-environment[data-environment="sandbox"] {
    color: #745413;
    border: 1px solid rgba(217, 184, 108, .55);
    background: rgba(217, 184, 108, .18);
}

.checkout-payment-environment[data-environment="live"] {
    color: #1f5b37;
    border: 1px solid rgba(66, 151, 98, .42);
    background: rgba(66, 151, 98, .13);
}

.checkout-payment-card,
.checkout-payment-success {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(20px, 4vw, 34px);
    border: 1px solid rgba(17, 17, 17, .09);
    border-radius: 24px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 20px 55px rgba(33, 27, 17, .08);
}

.checkout-payment-card__intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}

.checkout-payment-card__intro small,
.checkout-payment-card__intro strong {
    display: block;
}

.checkout-payment-card__intro small {
    color: rgba(17, 17, 17, .55);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.checkout-payment-card__intro strong {
    margin-top: 4px;
    font-size: clamp(27px, 5vw, 40px);
    line-height: 1;
}

.checkout-payment-card__intro p {
    max-width: 390px;
    margin: 0;
    color: rgba(17, 17, 17, .62);
    font-size: 13px;
    line-height: 1.55;
}

.checkout-payment-methods {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid rgba(17, 17, 17, .08);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(229, 246, 247, .78), rgba(255, 250, 236, .82));
}

.checkout-payment-methods__heading {
    min-width: 0;
}

.checkout-payment-methods__heading > span,
.checkout-payment-methods__heading > small {
    display: block;
}

.checkout-payment-methods__heading > span {
    color: #111;
    font-size: 12px;
    font-weight: 760;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.checkout-payment-methods__heading > small {
    margin-top: 3px;
    color: rgba(17, 17, 17, .58);
    font-size: 11px;
    line-height: 1.35;
}

.checkout-payment-methods__list {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.checkout-payment-method {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    min-width: 122px;
    min-height: 52px;
    padding: 8px 12px;
    border: 1px solid rgba(17, 17, 17, .11);
    border-radius: 13px;
    background: rgba(255, 255, 255, .9);
}

.checkout-payment-method strong {
    color: #111;
    font-size: 14px;
    line-height: 1.15;
}

.checkout-payment-method small {
    margin-top: 3px;
    color: rgba(17, 17, 17, .56);
    font-size: 10px;
    line-height: 1.25;
}

.checkout-payment-method--ideal {
    border-color: rgba(204, 0, 102, .22);
    background: rgba(255, 247, 251, .95);
}

.checkout-payment-method--ideal strong {
    color: #b00059;
}

/* SumUp toont alleen de methoden die door de checkout beschikbaar zijn. */
.checkout-payment-widget [data-sumup-id="payment_option"][data-sumup-item="ideal"] {
    border-radius: 12px;
}

.checkout-ideal-action,
.checkout-card-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid rgba(204, 0, 102, .18);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 247, 251, .98), rgba(255, 252, 242, .98));
}

.checkout-ideal-action[hidden],
.checkout-card-action[hidden] {
    display: none !important;
}

.checkout-ideal-action strong,
.checkout-ideal-action small,
.checkout-card-action strong,
.checkout-card-action small {
    display: block;
}

.checkout-ideal-action strong,
.checkout-card-action strong {
    color: #111;
    font-size: 15px;
}

.checkout-ideal-action small,
.checkout-card-action small {
    margin-top: 4px;
    color: rgba(17, 17, 17, .6);
    font-size: 11px;
    line-height: 1.45;
}

.checkout-ideal-action button,
.checkout-card-action button,
.checkout-card-submit-button {
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: #111;
    font: inherit;
    font-size: 13px;
    font-weight: 760;
    cursor: pointer;
}

.checkout-ideal-action button {
    background: #b00059;
}

.checkout-ideal-action button:disabled,
.checkout-card-action button:disabled,
.checkout-card-submit-button:disabled {
    cursor: wait;
    opacity: .55;
}

.checkout-card-submit-button {
    width: 100%;
    margin-top: 12px;
}

.checkout-card-submit-button[hidden] {
    display: none !important;
}

.checkout-payment-widget {
    min-height: 220px;
    padding: 14px;
    border: 1px solid rgba(17, 17, 17, .08);
    border-radius: 18px;
    background: #fff;
}


.checkout-payment-widget[hidden] {
    display: none !important;
}

.checkout-card-action button {
    background: #111111;
}

.checkout-payment-status {
    margin: 18px 0 0;
    padding: 12px 14px;
    border-radius: 13px;
    font-size: 13px;
    line-height: 1.5;
}

.checkout-payment-status[data-status-type="info"] {
    color: #5b4a1c;
    background: rgba(217, 184, 108, .18);
}

.checkout-payment-status[data-status-type="error"] {
    color: #862e25;
    background: rgba(201, 88, 72, .12);
}

.checkout-payment-status[data-status-type="success"] {
    color: #225c35;
    background: rgba(70, 151, 91, .13);
}

.checkout-payment-diagnostics {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(134, 46, 37, .2);
    border-radius: 15px;
    background: rgba(255, 248, 246, .95);
}

.checkout-payment-diagnostics summary {
    color: #6f271f;
    font-size: 13px;
    font-weight: 760;
    cursor: pointer;
}

.checkout-payment-diagnostics > p {
    margin: 10px 0 0;
    color: #4f2924;
    font-size: 12px;
    line-height: 1.5;
}

.checkout-payment-diagnostics__notice {
    color: rgba(17, 17, 17, .62) !important;
}

.checkout-payment-diagnostics code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .95em;
}

.checkout-payment-diagnostics pre {
    max-height: 360px;
    margin: 12px 0 0;
    padding: 13px;
    overflow: auto;
    border-radius: 12px;
    color: #f7f3ea;
    background: #171717;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.checkout-payment-diagnostics button {
    min-height: 42px;
    margin-top: 12px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: #111;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.checkout-payment-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

.checkout-payment-check-button {
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: #111;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.checkout-payment-success {
    text-align: center;
}

.checkout-payment-success > span {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    color: #fff;
    background: #2f7b4b;
    font-size: 30px;
    font-weight: 800;
}

.checkout-payment-success > p:first-of-type {
    margin: 0;
    color: #2f7b4b;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .12em;
}

.checkout-payment-success h3 {
    margin: 8px 0;
    font-size: clamp(26px, 5vw, 42px);
}

.checkout-payment-success strong {
    display: block;
    margin: 12px 0;
    font-size: 18px;
}

.checkout-payment-success a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 14px;
    padding: 0 20px;
    border-radius: 999px;
    color: #fff;
    background: #111;
    text-decoration: none;
    font-weight: 700;
}

@media (max-width: 720px) {
    .checkout-ideal-action,
    .checkout-card-action {
        grid-template-columns: 1fr;
    }

    .checkout-ideal-action button,
    .checkout-card-action button {
        width: 100%;
    }

    .checkout-progress {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 8px;
    }

    .checkout-progress__step {
        min-width: 150px;
    }

    .checkout-progress__line {
        min-width: 30px;
    }

    .checkout-payment-card__intro,
    .checkout-payment-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .checkout-payment-card__intro p {
        max-width: none;
    }

    .checkout-payment-methods {
        align-items: stretch;
        flex-direction: column;
    }

    .checkout-payment-methods__list {
        justify-content: stretch;
    }

    .checkout-payment-method {
        flex: 1 1 145px;
    }

    .checkout-payment-check-button,
    .checkout-payment-actions .checkout-back-button {
        width: 100%;
    }
}