﻿.cart-checkout-main, .cart-checkout-sidebar { min-width: 0; width: 100%; }

/* Split only when both the screen and the space beside the site menu are wide enough. */
@media (min-width: 1600px) {
    html:not(.ow-checkout-document) .cart-page {
        width: 100%;
        max-width: 1800px;
        container: cart-checkout / inline-size;
    }
}
@container cart-checkout (min-width: 1400px) {
    #cartForm > .cart-checkout-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: start;
        gap: 28px;
        margin: 0;
    }
    #cartForm .cart-checkout-main > .checkout-panel:first-child { margin-top: 0; }
    #cartForm .cart-checkout-sidebar {
        display: flex;
        flex-direction: column;
        gap: 24px;
        position: sticky;
        top: 76px;
    }
    #cartForm .cart-checkout-sidebar > .checkout-panel { flex: 0 0 auto; margin: 0 0 26px; padding: 24px; }
}

.limited-width-content.center-page.cart-page {
    background: transparent !important;
    padding-bottom: 24px;
}

@media (max-width: 767px) {
    html:not(.ow-checkout-document) .limited-width-content.center-page.cart-page {
        padding-right: 10px;
    }
}

.cart-customer-picker { justify-self: end; width: min(100%, 360px); position: relative; }
.cart-customer-picker label { display: block; font-size: 14px; font-weight: 500; margin: 0 0 7px; color: var(--cart-contact-text); }
.cart-customer-results { position: absolute; z-index: 5; top: 78px; left: 0; right: 0; list-style: none; padding: 5px; margin: 0; max-height: 280px; overflow-y: auto; }
.cart-customer-results button { display: block; width: 100%; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; padding: 10px; font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.cart-customer-results button:hover, .cart-customer-results button:focus { background: rgba(111, 191, 72, .15); outline: 2px solid var(--cart-contact-accent); }
.cart-customer-results button span { display: block; font-size: .85em; color: var(--cart-contact-muted); }
.cart-customer-status { display: block; margin-top: 6px; color: var(--cart-contact-muted); }

.cart-contact-details {
    --cart-contact-text: #202b35;
    --cart-contact-muted: #617080;
    --cart-contact-border: #cbd5df;
    --cart-contact-input: #fff;
    --cart-contact-accent: #dc5800;
    display: grid;
    gap: 20px;
    color: var(--cart-contact-text);
    color-scheme: light;
}
html[data-theme="dark"] .cart-contact-details {
    --cart-contact-text: #f0f3f7;
    --cart-contact-muted: #b5becd;
    --cart-contact-border: #46515f;
    --cart-contact-input: #20252b;
    --cart-contact-accent: #ff873d;
    color-scheme: dark;
}
.cart-contact-details .registration-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.cart-contact-intro { margin: 0; color: var(--cart-contact-muted); line-height: 1.65; }
.cart-contact-card { min-width: 0; padding: 24px; }
.cart-contact-heading { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cart-contact-heading > div { flex: 1; min-width: 190px; }
#cartForm .cart-contact-heading h3 { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; max-width: none; margin: 0 0 5px; font-size: 22px; font-weight: 600; text-align: left; color: var(--cart-contact-text); }
#cartForm .cart-contact-heading h3::before, #cartForm .cart-contact-heading h3::after { content: none; }
.cart-contact-heading p, .cart-saved-deliveries p { margin: 0; color: var(--cart-contact-muted); font-size: 13px; line-height: 1.6; }
.cart-contact-badge { display: grid; place-items: center; width: 62px; height: 62px; flex: 0 0 62px; border-radius: 50%; }
.cart-contact-badge svg { width: 29px; height: 29px; fill: currentColor; }
.cart-contact-badge-account { color: #e96412; background: #ffe9d8; }
.cart-contact-badge-invoice { color: #268653; background: #ddf3e4; }
.cart-contact-badge-delivery { color: #6353ce; background: #e9e4ff; }
html[data-theme="dark"] .cart-contact-badge-account { color: #ff873d; background: #573015; }
html[data-theme="dark"] .cart-contact-badge-invoice { color: #71df9c; background: #153e2b; }
html[data-theme="dark"] .cart-contact-badge-delivery { color: #b7a6ff; background: #30275c; }
.cart-contact-optional { padding: 4px 13px; border-radius: 20px; background: rgba(130, 145, 164, .16); color: var(--cart-contact-muted); font-size: 12px; font-weight: 400; }
.cart-contact-toggle { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; font-weight: 400; cursor: pointer; }
.cart-contact-toggle > input[type="checkbox"] { position: absolute; width: 42px; height: 25px; margin: 0; opacity: 0; cursor: pointer; }
.cart-contact-switch { position: relative; width: 42px; height: 25px; flex: 0 0 42px; border-radius: 20px; background: #87919f; transition: background .18s; }
.cart-contact-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform .18s; }
.cart-contact-toggle input:checked + input + .cart-contact-switch, .cart-contact-toggle input:checked + .cart-contact-switch { background: #e66716; }
.cart-contact-toggle input:checked + input + .cart-contact-switch::after, .cart-contact-toggle input:checked + .cart-contact-switch::after { transform: translateX(17px); }
.cart-contact-toggle input:focus-visible ~ .cart-contact-switch { outline: 3px solid var(--cart-contact-accent); outline-offset: 3px; }
.cart-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
#cartForm .cart-contact-type { min-width: 0; margin: 24px 0 20px; padding: 0; border: 0; }
#cartForm .cart-contact-type legend { margin: 0 0 10px; border: 0; color: var(--cart-contact-text); font-size: 14px; font-weight: 600; }
.cart-contact-type-option { display: flex; align-items: center; gap: 16px; min-width: 0; margin: 0; padding: 15px; font-size: 14px; cursor: pointer; }
.cart-contact-type-option:has(input:checked) { outline: 2px solid var(--cart-contact-accent); outline-offset: -2px; }
.cart-contact-type-option input { width: 20px; height: 20px; margin: 0; accent-color: #e66716; }
.cart-contact-type-option svg { width: 25px; height: 27px; fill: currentColor; color: var(--cart-contact-muted); }
.cart-contact-type-option:has(input:checked) svg { color: var(--cart-contact-accent); }
#cartForm .cart-contact-field { min-width: 0; margin: 0; }
.cart-contact-fields { --cart-contact-field-gap: 20px; row-gap: 0; align-items: start; }
#cartForm .cart-contact-fields > .cart-contact-field { margin-bottom: var(--cart-contact-field-gap); }
#cartForm .cart-contact-fields > .cart-contact-field:nth-last-child(-n+2) { margin-bottom: 0; }
.cart-contact-identity-reveal { grid-column: 1 / -1; display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .28s ease, opacity .22s ease; }
/* Keep the collapsing row in layout while hidden fields stop validating immediately. */
#cartForm .cart-contact-identity-reveal[hidden] { display: grid !important; grid-template-rows: 0fr; opacity: 0; }
.cart-contact-identity-inner { min-height: 0; overflow: hidden; }
.cart-contact-identity-inner > .cart-contact-grid { padding-bottom: var(--cart-contact-field-gap); }
#cartForm .cart-contact-field > label { display: block; margin: 0 0 7px; max-width: none; width: auto; font-size: 14px; font-weight: 500; color: var(--cart-contact-text); }
.cart-contact-required { color: #e44e59; }
.cart-contact-control { position: relative; }
#cartForm .cart-contact-details .cart-contact-field .form-control,
#cartForm .cart-contact-details .cart-customer-picker .form-control { display: block; width: 100%; max-width: none; height: 44px; padding: 9px 13px; border: 1px solid var(--cart-contact-border); border-radius: 7px; background: var(--cart-contact-input); color: var(--cart-contact-text); color-scheme: inherit; box-shadow: none; }
#cartForm .cart-contact-control input { padding-right: 40px; }
#cartForm .cart-contact-details .form-control[readonly], #cartForm .cart-contact-details select.form-control:disabled { opacity: .85; }
#cartForm .cart-contact-details .form-control:focus { border-color: var(--cart-contact-accent); outline: 2px solid var(--cart-contact-accent); outline-offset: 2px; }
#cartForm .cart-contact-details .form-control[aria-invalid="true"] { border-color: #df4656; }
.cart-contact-details .imgValidate { position: absolute; top: 13px; right: 12px; width: 18px; height: 18px; margin: 0; }
.cart-contact-details .imgValidate[alt=""] { visibility: hidden; }
.cart-contact-panel { margin-top: 22px; border-top: 1px solid var(--cart-contact-border); animation: cartContactReveal .2s ease-out; }
.cart-saved-deliveries { padding-top: 20px; }
.cart-saved-deliveries p { margin-top: 7px; }
#cartForm .cart-contact-heading > .cart-contact-edit-link { display: inline-flex; flex: 0 0 auto; align-self: flex-start; align-items: center; padding: 6px 0; border: 0; background: none; color: var(--cart-contact-accent); font: inherit; font-size: 13px; line-height: 1.4; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; appearance: none; -webkit-appearance: none; }
#cartForm .cart-contact-heading > .cart-contact-edit-link:hover, #cartForm .cart-contact-heading > .cart-contact-edit-link:focus-visible { color: var(--cart-contact-text); }
#cartForm .cart-contact-heading > .cart-contact-edit-link:focus-visible { outline: 2px solid var(--cart-contact-accent); outline-offset: 3px; }
.cart-contact-error { display: block; margin-top: 5px; color: #d73447; font-size: 13px; line-height: 1.5; }
html[data-theme="dark"] .cart-contact-error { color: #ff9ba6; }
.cart-contact-errors { padding: 17px 20px; border: 1px solid #d73447; border-radius: 10px; color: var(--cart-contact-text); }
.cart-contact-errors ul { margin: 8px 0 0; padding-left: 20px; }
.cart-contact-errors li + li { margin-top: 6px; }
.cart-contact-errors a { color: inherit; text-decoration: underline; }
.cart-contact-details [hidden] { display: none !important; }
.cart-order-notes { margin-top: 24px; margin-bottom: 20px; }
.cart-order-notes .cart-contact-field { grid-column: 1 / -1; }
@keyframes cartContactReveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) {
    .cart-contact-card { padding: 20px 16px; }
    .cart-contact-grid { grid-template-columns: 1fr; gap: 18px; }
    #cartForm .cart-contact-fields { --cart-contact-field-gap: 18px; row-gap: 0; }
    #cartForm .cart-contact-fields > .cart-contact-field:nth-last-child(2) { margin-bottom: var(--cart-contact-field-gap); }
    .cart-contact-heading { gap: 12px; }
    .cart-contact-heading > div { min-width: 150px; }
    .cart-contact-badge { width: 46px; height: 46px; flex-basis: 46px; }
    #cartForm .cart-contact-heading h3 { font-size: 19px; }
    .cart-contact-toggle { width: 100%; padding-top: 8px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .cart-contact-panel { animation: none; } .cart-contact-switch, .cart-contact-switch::after, .cart-contact-identity-reveal { transition: none; } }
