/* Dedicated cart and checkout layout. Kept separate from article/prose styles. */
.woocommerce-cart .dbn-commerce-page,
.woocommerce-checkout .dbn-commerce-page {
    padding: 0 0 110px;
}

.dbn-commerce-hero {
    padding: 52px 0 38px;
    border-bottom: 1px solid var(--dbn-ink);
    background: var(--dbn-white);
}

.dbn-commerce-hero .dbn-shell {
    width: min(calc(100% - 48px), 1268px);
    max-width: 1268px;
    padding-inline: 0;
}

.dbn-commerce-hero h1 {
    margin: 8px 0 0;
    font-family: var(--dbn-ui);
    font-size: clamp(48px, 6vw, 76px);
    font-weight: 800;
    line-height: .96;
    letter-spacing: 0;
}

.woocommerce-cart .dbn-commerce-page__inner,
.woocommerce-checkout .dbn-commerce-page__inner {
    width: min(calc(100% - 48px), 1268px);
    max-width: 1268px;
    padding: 46px 0 0;
}

.dbn-commerce-content,
.dbn-commerce-content > .wp-block-woocommerce-cart,
.dbn-commerce-content > .wp-block-woocommerce-checkout {
    width: 100%;
    max-width: none;
    margin: 0;
}

.woocommerce-cart .wc-block-components-sidebar-layout,
.woocommerce-checkout .wc-block-components-sidebar-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.65fr) minmax(360px, .85fr) !important;
    gap: clamp(36px, 4.5vw, 64px) !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
}

.woocommerce-cart .wc-block-components-main,
.woocommerce-checkout .wc-block-components-main,
.woocommerce-cart .wc-block-cart__main,
.woocommerce-checkout .wc-block-checkout__main {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-cart .wc-block-components-sidebar,
.woocommerce-checkout .wc-block-components-sidebar,
.woocommerce-cart .wc-block-cart__sidebar,
.woocommerce-checkout .wc-block-checkout__sidebar {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 28px !important;
    position: sticky;
    top: 132px;
    border-top: 4px solid var(--dbn-red);
    border-radius: 0 !important;
    background: var(--dbn-white);
    box-shadow: 0 18px 45px rgba(20, 19, 19, .05);
}

.woocommerce-cart .wc-block-cart-items {
    width: 100% !important;
    table-layout: auto !important;
}

.woocommerce-cart .wc-block-cart-items__row {
    display: table-row !important;
}

.woocommerce-cart .wc-block-cart-items__row td {
    display: table-cell !important;
    padding: 20px 12px !important;
    vertical-align: top !important;
}

.woocommerce-cart .wc-block-cart-item__image {
    width: 112px !important;
    min-width: 112px !important;
}

.woocommerce-cart .wc-block-cart-item__image img {
    display: block;
    width: 96px !important;
    height: 96px !important;
    padding: 6px;
    object-fit: contain;
    background: #ebe6df;
}

.woocommerce-cart .wc-block-cart-item__product {
    width: auto !important;
    min-width: 0 !important;
}

.woocommerce-cart .wc-block-cart-item__total {
    width: 120px !important;
    min-width: 120px !important;
    text-align: right !important;
}

.woocommerce-cart .wc-block-components-product-name {
    display: block !important;
    max-width: 100%;
    font-family: var(--dbn-ui) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    writing-mode: horizontal-tb !important;
}

.woocommerce-cart .wc-block-components-product-metadata,
.woocommerce-cart .wc-block-components-product-details,
.woocommerce-checkout .wc-block-components-order-summary-item__description {
    display: none !important;
}

.woocommerce-cart .wc-block-components-quantity-selector {
    margin-top: 14px;
    border-radius: 0 !important;
}

.woocommerce-cart .wc-block-cart-items__header th,
.wc-block-components-order-summary__button-text,
.wc-block-components-totals-footer-item {
    font-weight: 800 !important;
}

.woocommerce-checkout .wc-block-checkout__form,
.woocommerce-checkout .wc-block-components-form,
.woocommerce-checkout .wc-block-components-address-form,
.woocommerce-checkout .wc-block-components-checkout-step,
.woocommerce-checkout .wc-block-components-checkout-step__container {
    width: 100% !important;
    max-width: none !important;
}

.woocommerce-checkout .wc-block-components-checkout-step {
    padding-left: 0 !important;
}

.woocommerce-checkout .wc-block-components-checkout-step__title {
    font-family: var(--dbn-ui) !important;
    font-size: 23px !important;
    font-weight: 800 !important;
}

.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-form .wc-block-components-combobox-control input {
    min-height: 52px !important;
    border: 1px solid var(--dbn-ink) !important;
    border-radius: 0 !important;
    background: var(--dbn-white) !important;
}

.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input label {
    font-weight: 700 !important;
}

.wc-block-components-button:not(.is-link) {
    min-height: 52px !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: none !important;
}

.dbn-cart-completion {
    width: 100%;
    margin-top: clamp(62px, 7vw, 92px);
    padding-top: 30px;
    border-top: 1px solid var(--dbn-ink);
}

.dbn-cart-completion .dbn-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 38px;
    padding: 0;
    border: 0;
}

.dbn-cart-completion .dbn-section-head h2 {
    margin: 0;
    font-family: var(--dbn-display);
    font-size: clamp(36px, 4vw, 62px);
    font-weight: 600;
    line-height: 1;
}

/* The recommendation uses the same product cards as the catalogue archive. */
.dbn-cart-completion .dbn-product-grid {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 44px) clamp(16px, 2vw, 30px);
}

.dbn-cart-completion .dbn-product-card__cover img {
    padding: 10px;
}

.dbn-cart-completion .dbn-product-card__title {
    margin: 6px 0 14px;
    font-family: var(--dbn-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.12;
    text-transform: none;
}

.dbn-cart-completion .dbn-product-card__title a {
    text-decoration: none !important;
}

.dbn-cart-completion .dbn-product-card__artist {
    font-size: 12px;
}

.dbn-cart-completion .dbn-product-card__buy {
    gap: 10px;
}

.dbn-cart-completion .dbn-product-card__action .button {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 11px;
    line-height: normal;
    white-space: normal;
}

@media (max-width: 900px) {
    .woocommerce-cart .wc-block-components-sidebar-layout,
    .woocommerce-checkout .wc-block-components-sidebar-layout {
        grid-template-columns: 1fr !important;
    }

    .woocommerce-cart .wc-block-components-sidebar,
    .woocommerce-checkout .wc-block-components-sidebar,
    .woocommerce-cart .wc-block-cart__sidebar,
    .woocommerce-checkout .wc-block-checkout__sidebar {
        grid-column: 1 !important;
        position: static;
    }

    .dbn-cart-completion .dbn-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .dbn-commerce-hero {
        padding: 36px 0 28px;
    }

    .dbn-commerce-hero .dbn-shell {
        width: min(calc(100% - 28px), 1268px);
    }

    .woocommerce-cart .dbn-commerce-page__inner,
    .woocommerce-checkout .dbn-commerce-page__inner {
        width: min(calc(100% - 28px), 1268px);
        padding-top: 30px;
    }

    .woocommerce-cart .wc-block-cart-items__row,
    .woocommerce-cart .wc-block-cart-items__row td {
        display: block !important;
        width: 100% !important;
    }

    .woocommerce-cart .wc-block-cart-item__image {
        padding-bottom: 0 !important;
    }

    .woocommerce-cart .wc-block-cart-item__total {
        min-width: 0 !important;
        text-align: left !important;
    }

    .dbn-cart-completion .dbn-product-grid {
        grid-template-columns: 1fr;
    }
}