/* ================================================================
   Cart page redesign -- same design system as the PDP redesign this
   session (pdp-redesign.css): fluid 10%-side-padding frame, white
   cards, no thin rules/boxes, the .bim-pp-btn button family, the same
   CSS variables. Re-declared here (not shared) so this page's CSS
   doesn't depend on the PDP's file being loaded.

   Real DOM on this page (confirmed from the rendered HTML, not just
   the layout XML -- this theme's own checkout_cart_index.xml replaces
   core Magento's cart-container/cart-summary structure with its own):

   .column.main
     .row.shopping-cart-bottom        -- Bootstrap row/col grid
       .col-md-4 > .totals-container > #cart-totals   (Totals, knockout)
       .col-md-4 > #block-shipping                     (kept only for its
                                                          window.checkoutConfig
                                                          bootstrap script;
                                                          hidden in
                                                          product-purchase.css)
     .table-responsive
       form.form-cart                 -- item table + Continue/Clear actions
       .pdp-cart-pay-slot              -- the Pay & Download button (our own
                                          wrapper, added in form.phtml)

   .table-responsive is set to display:contents so its two children
   (the form and the pay-button slot) become independent grid items of
   .column.main, which is how the Pay button ends up placed with
   Totals in the right-hand column below, even though in the DOM it's
   a sibling of the item table, not of Totals.
   ================================================================ */

body.checkout-cart-index {
    --pp-ink: #111827;
    --pp-muted: #52596b;
    --pp-border: #e8eaf0;
    --pp-light: #f6f7fa;
    --pp-blue: #0030b8;
    --pp-orange: #ff7f1d;
    --pp-orange-contrast: #3a1900;
    --pp-radius: 10px;
    background: var(--pp-light) !important;
}

/* ---- Page frame: same fluid 10%/10% frame as the PDP, instead of this
   theme's fixed-width container. ---- */
body.checkout-cart-index #maincontent.page-main.container,
body.checkout-cart-index .container.heading-page1,
body.checkout-cart-index .breadcrumbs-v1 .container {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10% !important;
    padding-right: 10% !important;
    box-sizing: border-box;
    float: none !important;
}
body.checkout-cart-index .breadcrumbs-v1 {
    padding: 18px 0;
}

/* ---- Title ---- */
body.checkout-cart-index .page-title-wrapper {
    margin: 8px 0 28px;
}
body.checkout-cart-index .page-title-wrapper .page-header,
body.checkout-cart-index .page-title-wrapper .page-header .base {
    font-family: inherit !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    color: var(--pp-ink) !important;
}

/* ---- Success / error messages: flatten to the page's own tone instead of
   the stock bright-green banner. ---- */
body.checkout-cart-index .page.messages {
    margin-bottom: 24px;
}
body.checkout-cart-index .message {
    border-radius: var(--pp-radius) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
}

/* ================================================================
   Layout: two columns on desktop -- items on the left, a sticky
   Totals + Pay panel on the right. Built with display:contents so
   the Pay button (a sibling of the table, not of Totals, in the DOM)
   can still land in the right column.
   ================================================================ */
body.checkout-cart-index .column.main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: 32px;
    row-gap: 0;
    align-items: start;
}

body.checkout-cart-index .row.shopping-cart-bottom {
    display: block !important;
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    position: sticky;
    top: 24px;
}
body.checkout-cart-index .row.shopping-cart-bottom::before,
body.checkout-cart-index .row.shopping-cart-bottom::after {
    content: none !important;
}
body.checkout-cart-index .row.shopping-cart-bottom > .col-md-4 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.checkout-cart-index .table-responsive {
    display: contents;
}
body.checkout-cart-index .table-responsive > form.form-cart {
    grid-column: 1;
    grid-row: 1 / span 2;
}
body.checkout-cart-index .pdp-cart-pay-slot {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
}

@media (max-width: 991px) {
    body.checkout-cart-index .column.main {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }
    body.checkout-cart-index .table-responsive > form.form-cart {
        grid-column: 1;
        grid-row: 2;
    }
    body.checkout-cart-index .row.shopping-cart-bottom {
        grid-column: 1;
        grid-row: 1;
        position: static;
    }
    body.checkout-cart-index .pdp-cart-pay-slot {
        grid-column: 1;
        grid-row: 3;
        margin-top: 0;
    }
}

/* ================================================================
   Items card
   ================================================================ */
body.checkout-cart-index .cart.table-wrapper {
    background: #ffffff;
    border-radius: var(--pp-radius);
    padding: 8px 28px;
    margin-bottom: 0;
}
body.checkout-cart-index #shopping-cart-table {
    width: 100%;
    border-collapse: collapse;
}
body.checkout-cart-index #shopping-cart-table thead {
    border-bottom: 2px solid var(--pp-light);
}
body.checkout-cart-index #shopping-cart-table thead th {
    border: none !important;
    padding: 18px 10px !important;
    text-align: left;
}
body.checkout-cart-index #shopping-cart-table thead th span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pp-muted);
}
body.checkout-cart-index #shopping-cart-table thead th.col.price,
body.checkout-cart-index #shopping-cart-table thead th.col.qty,
body.checkout-cart-index #shopping-cart-table thead th.col.subtotal {
    text-align: right;
}

body.checkout-cart-index tbody.cart.item {
    border: none !important;
}
body.checkout-cart-index tr.item-info {
    border-top: 1px solid var(--pp-light);
}
body.checkout-cart-index tr.item-info td {
    border: none !important;
    padding: 20px 10px !important;
    vertical-align: middle;
    font-size: 16px;
}
body.checkout-cart-index tr.item-info td.col.price,
body.checkout-cart-index tr.item-info td.col.qty,
body.checkout-cart-index tr.item-info td.col.subtotal {
    text-align: right;
}
body.checkout-cart-index tr.item-actions td {
    border: none !important;
    padding: 0 10px 18px !important;
}

body.checkout-cart-index .product-item-photo {
    width: 88px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 18px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--pp-light);
}
body.checkout-cart-index .product-item-photo img {
    display: block;
    width: 100%;
    height: auto;
}
body.checkout-cart-index .product-item-details {
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 112px);
}
body.checkout-cart-index .product-item-name {
    font-weight: 700;
    font-size: 16px;
}
body.checkout-cart-index .product-item-name a {
    color: var(--pp-ink);
    text-decoration: none;
}
body.checkout-cart-index .product-item-name a:hover {
    color: var(--pp-blue);
}

body.checkout-cart-index .col.price .price,
body.checkout-cart-index .col.subtotal .price {
    color: var(--pp-ink) !important;
    font-weight: 700;
    font-size: 16px;
}
body.checkout-cart-index .bim-pp-qty-fixed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--pp-light);
    font-weight: 700;
    font-size: 14px;
    color: var(--pp-ink);
}

body.checkout-cart-index .actions-toolbar {
    display: flex;
    gap: 18px;
}
body.checkout-cart-index .actions-toolbar .action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-muted);
    text-decoration: none;
}
body.checkout-cart-index .actions-toolbar .action:hover {
    color: var(--pp-blue);
}
body.checkout-cart-index .actions-toolbar .action .fa {
    font-size: 14px;
}

/* ---- Continue shopping / Clear cart ---- */
body.checkout-cart-index .cart.main.actions {
    display: flex;
    gap: 12px;
    padding: 22px 10px 8px;
    margin: 0;
}

/* ================================================================
   Button system -- same shape/classes as the PDP's .bim-pp-btn family.
   ================================================================ */
body.checkout-cart-index .bim-pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 22px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.12s ease;
}
body.checkout-cart-index .bim-pp-btn:hover {
    opacity: 0.92;
}
body.checkout-cart-index .bim-pp-btn:active {
    transform: translateY(1px);
}
body.checkout-cart-index .bim-pp-btn--primary {
    background: var(--pp-blue);
    color: #ffffff !important;
}
/* Filled, not outlined (sits directly on the page's light ground, so white
   alone gives it a clear edge without a border). */
body.checkout-cart-index .bim-pp-btn--ghost {
    background: #ffffff;
    color: var(--pp-ink) !important;
    border: none;
}
body.checkout-cart-index .bim-pp-btn--ghost:hover {
    background: var(--pp-border);
    color: var(--pp-blue) !important;
}
body.checkout-cart-index .bim-pp-btn--block {
    width: 100%;
}
body.checkout-cart-index .bim-pp-btn[disabled] {
    opacity: 0.6;
    cursor: default;
}
body.checkout-cart-index .bim-pp-btn span {
    pointer-events: none;
}

/* ================================================================
   Totals + Pay panel -- one continuous card instead of a near-empty
   box floating apart from a disconnected Pay button.
   ================================================================ */
body.checkout-cart-index .totals-container {
    background: #ffffff;
    border-radius: var(--pp-radius) var(--pp-radius) 0 0;
    padding: 28px 26px 8px;
}
body.checkout-cart-index #cart-totals {
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
body.checkout-cart-index #cart-totals .block-title {
    margin-bottom: 18px;
    border: none !important;
}
body.checkout-cart-index #cart-totals .block-title .title,
body.checkout-cart-index #cart-totals .block-title .title span {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pp-muted);
    border: none !important;
    box-shadow: none !important;
}
body.checkout-cart-index #cart-totals table.totals {
    width: 100%;
    border-collapse: collapse;
}
body.checkout-cart-index #cart-totals table.totals tr,
body.checkout-cart-index #cart-totals table.totals th,
body.checkout-cart-index #cart-totals table.totals td {
    background: none !important;
}
body.checkout-cart-index #cart-totals caption {
    display: none;
}
body.checkout-cart-index #cart-totals tr.totals th,
body.checkout-cart-index #cart-totals tr.totals td {
    background: none !important;
    border: none !important;
    padding: 10px 0 !important;
    font-size: 16px;
    font-weight: 500;
    color: var(--pp-muted);
    text-align: left;
}
body.checkout-cart-index #cart-totals tr.totals td {
    text-align: right;
    color: var(--pp-ink);
    font-weight: 600;
}
body.checkout-cart-index #cart-totals tr.grand.totals {
    border-top: 1px solid var(--pp-border);
}
body.checkout-cart-index #cart-totals tr.grand.totals th,
body.checkout-cart-index #cart-totals tr.grand.totals td {
    padding-top: 18px !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    color: var(--pp-ink) !important;
}
body.checkout-cart-index #cart-totals tr.grand.totals .price {
    color: var(--pp-blue) !important;
}

/* Pay panel: same white surface as Totals directly above it (zero gap, see
   .pdp-cart-pay-slot), so the two read as one continuous card. A plain tint
   here would match the page background behind it and read as un-attached. */
body.checkout-cart-index .bim-pp-cart-pay {
    background: #ffffff;
    border-radius: 0 0 var(--pp-radius) var(--pp-radius);
    padding: 6px 26px 26px;
}
body.checkout-cart-index .bim-pp-cart-pay-note {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--pp-muted);
    text-align: center;
}
body.checkout-cart-index .bim-pp-result {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}
body.checkout-cart-index .bim-pp-result--success {
    background: #e8f5e9;
    color: #1b5e20;
}
body.checkout-cart-index .bim-pp-result--failed {
    background: #fdecea;
    color: #b3261e;
}

/* ---- The hidden shipping-estimate block (kept only for its bootstrap
   script -- see product-purchase.css) must never visibly reserve space
   even while display:none is loading. ---- */
body.checkout-cart-index .row.shopping-cart-bottom > .col-md-4:has(#block-shipping) {
    display: none;
}

/* ---- Empty cart ---- */
body.checkout-cart-index .cart-empty {
    background: #ffffff;
    border-radius: var(--pp-radius);
    padding: 48px 32px;
    text-align: center;
}
body.checkout-cart-index .cart-empty p {
    font-size: 16px;
    color: var(--pp-muted);
    margin: 0 0 8px;
}
body.checkout-cart-index .cart-empty a {
    color: var(--pp-blue);
    font-weight: 600;
}

/* ---- Motion: a short entrance, transform only. ---- */
@media (prefers-reduced-motion: no-preference) {
    body.checkout-cart-index .cart.table-wrapper,
    body.checkout-cart-index .totals-container,
    body.checkout-cart-index .bim-pp-cart-pay {
        animation: bimCartIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    body.checkout-cart-index .totals-container { animation-delay: 0.05s; }
    body.checkout-cart-index .bim-pp-cart-pay { animation-delay: 0.1s; }
}
@keyframes bimCartIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    body.checkout-cart-index #maincontent.page-main.container,
    body.checkout-cart-index .container.heading-page1 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    body.checkout-cart-index .cart.table-wrapper,
    body.checkout-cart-index .totals-container,
    body.checkout-cart-index .bim-pp-cart-pay {
        padding-left: 18px;
        padding-right: 18px;
    }
    body.checkout-cart-index #shopping-cart-table thead {
        display: none;
    }
    body.checkout-cart-index tr.item-info {
        display: flex;
        flex-wrap: wrap;
    }
    body.checkout-cart-index tr.item-info td.col.item {
        flex: 0 0 100%;
    }
    body.checkout-cart-index tr.item-info td.col.price,
    body.checkout-cart-index tr.item-info td.col.qty,
    body.checkout-cart-index tr.item-info td.col.subtotal {
        flex: 1;
        text-align: left;
        padding-top: 0 !important;
    }
    body.checkout-cart-index .cart.main.actions {
        flex-direction: column;
    }
    body.checkout-cart-index .bim-pp-btn--ghost,
    body.checkout-cart-index .cart.main.actions .bim-pp-btn {
        width: 100%;
    }
}