/* Cart
 *
 * Same surface as the checkout: the kittens on a card to the left, what they
 * add up to on a card to the right that follows the page down.
 *
 * WooCommerce ships its own cart stylesheet with fairly specific selectors
 * (`.woocommerce-page .cart-collaterals .cart_totals`, `.woocommerce
 * table.shop_table img`…), so the rules below lead with `body.woocommerce-cart`
 * and name the elements — otherwise the plugin's defaults win the cascade.
 */

body.woocommerce-cart .site-main { padding: 40px 0 80px; }

body.woocommerce-cart .entry-header { margin-bottom: 40px; }

body.woocommerce-cart .entry-title {
    margin:      0;
    font-size:   64px;
    line-height: 68px;
    font-weight: 500;
    color:       #000000;
    text-align:  center;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
body.woocommerce-cart .cart-layout {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) 378px;
    gap:                   20px;
    align-items:           start;
}

body.woocommerce-cart .woocommerce-cart-form { margin: 0; }

/* ── Notices ────────────────────────────────────────────────────────────── */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error {
    margin:        0 0 20px;
    padding:       16px 20px;
    border:        1px solid var(--color-border-light);
    border-left:   3px solid var(--color-secondary);
    border-radius: var(--radius-box);
    background:    var(--color-bg-alt);
    font-size:     15px;
    line-height:   22px;
    list-style:    none;
}
body.woocommerce-cart .woocommerce-error { border-left-color: var(--color-primary); }
body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-cart .woocommerce-error::before { content: none; }

body.woocommerce-cart .woocommerce-message .button,
body.woocommerce-cart .woocommerce-info .button {
    float:           right;
    padding:         6px 16px;
    border-radius:   var(--radius-pill);
    background:      var(--color-primary);
    font-size:       14px;
    color:           #ffffff;
    text-decoration: none;
}

/* ── Items ──────────────────────────────────────────────────────────────── */
/* "separate" rather than "collapse": collapsing merges the row rules with the
   card's own border and draws them over it, so the dividers cross the outline
   at the corners. Separated, they stay inside and the radius clips cleanly. */
body.woocommerce-cart table.shop_table.cart {
    width:           100%;
    margin:          0;
    border:          1px solid var(--color-border-light);
    border-radius:   var(--radius);
    border-collapse: separate;
    border-spacing:  0;
    background:      #ffffff;
    box-shadow:      var(--shadow-block);
    overflow:        hidden;
}

/* The column heads say nothing the rows do not */
body.woocommerce-cart table.shop_table.cart thead { display: none; }

body.woocommerce-cart table.shop_table.cart td {
    padding:        24px 12px;
    border:         none;
    border-bottom:  1px solid var(--color-border-light);
    text-align:     left;
    vertical-align: middle;
}

/* A table box ignores its own padding once the borders collapse, so the inset
   is carried by the outer cells — otherwise the price sits on the card edge */
body.woocommerce-cart table.shop_table.cart tr > td:first-child { padding-left: 24px; }
body.woocommerce-cart table.shop_table.cart tr > td:last-child  { padding-right: 24px; }

body.woocommerce-cart table.shop_table.cart .product-remove    { width: 40px; }
body.woocommerce-cart table.shop_table.cart .product-thumbnail { width: 112px; }
body.woocommerce-cart table.shop_table.cart .product-price     { width: 140px; }

/* A quiet control until it is wanted — the red × WooCommerce ships reads as a
   warning next to a kitten you are about to reserve */
body.woocommerce-cart table.shop_table.cart .product-remove a.remove {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    border-radius:   50%;
    background:      transparent;
    font-size:       20px;
    line-height:     1;
    color:           var(--color-muted) !important;
    text-decoration: none;
    transition:      background var(--transition), color var(--transition);
}
body.woocommerce-cart table.shop_table.cart .product-remove a.remove:hover {
    background: var(--color-pink-50);
    color:      var(--color-primary) !important;
}

body.woocommerce-cart table.shop_table.cart .product-thumbnail img {
    display:       block;
    width:         88px;
    height:        88px;
    border-radius: 14px;
    object-fit:    cover;
}

body.woocommerce-cart table.shop_table.cart .product-name a {
    font-size:       18px;
    line-height:     26px;
    font-weight:     600;
    color:           var(--color-text);
    text-decoration: none;
    transition:      color var(--transition);
}
body.woocommerce-cart table.shop_table.cart .product-name a:hover { color: var(--color-primary); }

/* The chosen variation, printed under the name */
body.woocommerce-cart table.shop_table.cart .product-name .variation {
    display:     flex;
    flex-wrap:   wrap;
    gap:         0 6px;
    margin:      6px 0 0;
    font-size:   14px;
    line-height: 20px;
    color:       #3b3d42;
}
body.woocommerce-cart table.shop_table.cart .product-name .variation dt,
body.woocommerce-cart table.shop_table.cart .product-name .variation dd,
body.woocommerce-cart table.shop_table.cart .product-name .variation p { margin: 0; }

body.woocommerce-cart table.shop_table.cart .product-price {
    font-size:   18px;
    line-height: 26px;
    font-weight: 600;
    color:       var(--color-text);
    text-align:  right;
}

/* ── Coupon row ─────────────────────────────────────────────────────────── */
body.woocommerce-cart table.shop_table.cart td.actions {
    padding:       24px;
    border-bottom: none;
}

body.woocommerce-cart table.shop_table.cart td.actions .coupon {
    display:   flex;
    flex-wrap: wrap;
    gap:       12px;
    float:     none;
    width:     auto;
}

body.woocommerce-cart table.shop_table.cart td.actions .coupon input.input-text {
    flex:          1;
    min-width:     180px;
    max-width:     260px;
    height:        46px;
    margin:        0;
    padding:       12px 16px;
    border:        1px solid var(--color-border-light);
    border-radius: 10px;
    background:    #fcfcfd;
    font-family:   inherit;
    font-size:     15px;
    line-height:   20px;
    font-weight:   400;
    color:         var(--color-text);
    transition:    border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
body.woocommerce-cart table.shop_table.cart td.actions .coupon input.input-text::placeholder { color: var(--color-muted); }
body.woocommerce-cart table.shop_table.cart td.actions .coupon input.input-text:focus {
    outline:      none;
    border-color: var(--color-primary);
    background:   #ffffff;
    box-shadow:   0 0 0 3px rgba(249, 129, 168, 0.16);
}

body.woocommerce-cart table.shop_table.cart td.actions .coupon .button {
    flex:           none;
    height:         46px;
    padding:        12px 28px;
    border:         none;
    border-radius:  var(--radius-pill);
    background:     var(--color-secondary);
    font-family:    inherit;
    font-size:      15px;
    line-height:    22px;
    font-weight:    500;
    color:          #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor:         pointer;
    transition:     background var(--transition);
}
body.woocommerce-cart table.shop_table.cart td.actions .coupon .button:hover { background: #5aa974; }

/* ── Totals ─────────────────────────────────────────────────────────────── */
body.woocommerce-cart .cart-collaterals {
    position: sticky;
    top:      calc(var(--topbar-height) + var(--header-height) + var(--header-offset) + 20px);
    width:    100%;
    margin:   0;
}
body.woocommerce-cart .cart-collaterals::before,
body.woocommerce-cart .cart-collaterals::after { content: none; }

body.woocommerce-cart .cart-collaterals .cart_totals {
    float:         none;
    width:         100%;
    padding:       24px;
    border:        1px solid var(--color-border-light);
    border-radius: var(--radius);
    background:    #ffffff;
    box-shadow:    var(--shadow-block);
}

body.woocommerce-cart .cart_totals__title {
    margin:      0 0 16px;
    font-size:   24px;
    line-height: 32px;
    font-weight: 600;
    color:       var(--color-text);
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table {
    width:           100%;
    margin:          0 0 20px;
    border:          none;
    border-collapse: collapse;
    border-radius:   0;
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th {
    padding:     8px 0;
    border:      none;
    font-size:   15px;
    line-height: 22px;
    font-weight: 500;
    color:       #3b3d42;
    text-align:  left;
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td {
    padding:     8px 0;
    border:      none;
    font-size:   15px;
    line-height: 22px;
    font-weight: 600;
    color:       var(--color-text);
    text-align:  right;
}
body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td strong { font-weight: inherit; }

body.woocommerce-cart .cart-collaterals .cart_totals .order-total th,
body.woocommerce-cart .cart-collaterals .cart_totals .order-total td {
    padding-top: 16px;
    border-top:  1px solid var(--color-border-light);
    font-size:   20px;
    line-height: 28px;
    font-weight: 600;
    color:       var(--color-text);
}
body.woocommerce-cart .cart-collaterals .cart_totals .order-total td .amount { color: var(--color-primary-dark); }

body.woocommerce-cart .wc-proceed-to-checkout { padding: 0; }

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          54px;
    margin:          0;
    padding:         16px 24px;
    border:          1px solid rgba(255, 255, 255, 0.7);
    border-radius:   var(--radius-pill);
    background:      linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    box-shadow:      var(--shadow-btn-pink);
    font-family:     inherit;
    font-size:       16px;
    line-height:     20px;
    font-weight:     600;
    letter-spacing:  0.64px;
    color:           #ffffff;
    text-align:      center;
    text-transform:  uppercase;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background var(--transition), box-shadow var(--transition);
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background: linear-gradient(180deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    box-shadow: none;
}

/* ── Empty cart ─────────────────────────────────────────────────────────── */
.cart-empty-state {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             24px;
    min-height:      60vh;
    padding:         120px 20px 80px;
    text-align:      center;
}

/* Woo's cart.js needs its own classes on the block (see cart-empty.php), but
   none of the plugin's notice styling should come with them. */
body.woocommerce-cart .cart-empty-state.wc-empty-cart-message,
body.woocommerce-cart .cart-empty-state.cart-empty {
    border:     none;
    background: none;
    color:      inherit;
}

.cart-empty-state__title {
    margin:      0;
    font-size:   64px;
    line-height: 68px;
    font-weight: 500;
    color:       #000000;
}

.cart-empty-state .return-to-shop { margin: 0; }

body.woocommerce-cart .cart-empty-state__btn {
    height:         54px;
    padding:        16px 32px;
    border:         1px solid rgba(255, 255, 255, 0.7);
    border-radius:  var(--radius-pill);
    background:     linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    box-shadow:     var(--shadow-btn-pink);
    font-size:      16px;
    line-height:    20px;
    font-weight:    600;
    letter-spacing: 0.64px;
    color:          #ffffff;
    text-transform: uppercase;
}
body.woocommerce-cart .cart-empty-state__btn:hover {
    background: linear-gradient(180deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    box-shadow: none;
}

/* The page title would only repeat the headline */
.cart-is-empty .entry-header { display: none; }
body.cart-is-empty .site-main { padding: 0; }

body.woocommerce-cart .site-main:has(.cart-empty-state) .entry-header { display: none; }
body.woocommerce-cart .site-main:has(.cart-empty-state) { padding: 0; }

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    body.woocommerce-cart .entry-title { font-size: 36px; line-height: 42px; }

    /* Stacked, so the summary has nothing left to follow */
    body.woocommerce-cart .cart-layout { grid-template-columns: minmax(0, 1fr); }
    body.woocommerce-cart .cart-collaterals { position: static; }

    .cart-empty-state { padding: 80px 20px 60px; }
    .cart-empty-state__title { font-size: 36px; line-height: 42px; }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
/* The table drops its head and each kitten becomes a card: photo on the left,
   name and price beside it, the remove control in the corner. */
@media (max-width: 767px) {
    body.woocommerce-cart .site-main { padding: 24px 0 50px; }
    body.woocommerce-cart .entry-header { margin-bottom: 24px; }
    body.woocommerce-cart .entry-title { font-size: 28px; line-height: 32px; }

    body.woocommerce-cart table.shop_table.cart,
    body.woocommerce-cart table.shop_table.cart tbody,
    body.woocommerce-cart table.shop_table.cart tr,
    body.woocommerce-cart table.shop_table.cart td { display: block; width: auto; }

    body.woocommerce-cart table.shop_table.cart tr.cart_item {
        position:              relative;
        display:               grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap:                   4px 16px;
        padding:               16px 44px 16px 16px;
        border-bottom:         1px solid var(--color-border-light);
    }

    body.woocommerce-cart table.shop_table.cart tr.cart_item td {
        padding:    0;
        border:     none;
        text-align: left;
    }

    body.woocommerce-cart table.shop_table.cart td.product-thumbnail {
        grid-row:   1 / span 2;
        align-self: center;
    }
    body.woocommerce-cart table.shop_table.cart .product-thumbnail img { width: 72px; height: 72px; }

    body.woocommerce-cart table.shop_table.cart .product-name a { font-size: 16px; line-height: 22px; }

    body.woocommerce-cart table.shop_table.cart td.product-remove {
        position: absolute;
        top:      10px;
        right:    6px;
        padding:  0;
    }

    /* Matches the first/last-child inset above, which is just as specific */
    body.woocommerce-cart table.shop_table.cart tr > td.actions { padding: 16px; }
    body.woocommerce-cart table.shop_table.cart td.actions .coupon input.input-text,
    body.woocommerce-cart table.shop_table.cart td.actions .coupon .button {
        flex:      1 0 100%;
        max-width: none;
    }

    .cart-empty-state { padding: 60px 20px 40px; }
    .cart-empty-state__title { font-size: 28px; line-height: 32px; }
}