/**
 * Cart page — classic `[woocommerce_cart]` shortcode restyled to match the
 * WooCommerce Cart *Block* it replaced.
 *
 * The page was the Cart Block and is now the shortcode inside a Divi code
 * module, so the rendered nesting is:
 *
 *   .et_pb_code_inner
 *     └ .woocommerce                    <- the shortcode wrapper
 *         ├ .woocommerce-notices-wrapper
 *         ├ form.woocommerce-cart-form  <- table.shop_table.cart
 *         └ .cart-collaterals           <- .cart_totals + checkout button
 *
 * EVERY VALUE BELOW IS COPIED FROM THE BLOCK, not invented. Sources are
 * wc-blocks' `cart.css` plus the `global-styles-inline-css` presets:
 *
 *   .wc-block-components-sidebar-layout .wc-block-components-main
 *     -> width 65%, padding-right 4.5283018868%
 *   .wc-block-components-sidebar
 *     -> width 35%, padding-left 2.2641509434%
 *   .wc-block-cart__main .wc-block-cart-items
 *     -> border-bottom 1px color-mix(currentColor 20%), border-spacing 0
 *   .wc-block-cart__main .wc-block-cart-items th
 *     -> padding 8px 16px 12px 0, white-space nowrap
 *   .wc-block-cart__main .wc-block-cart-items td
 *     -> border-top 1px color-mix(currentColor 20%), padding 20px 0 20px 16px,
 *        vertical-align top;  :last-child adds padding-right 16px
 *   .wc-block-components-product-name (in cart items)
 *     -> font-size var(--wp--preset--font-size--small), weight 500, lh 1.4
 *   .wc-block-components-quantity-selector
 *     -> 107px wide, 1px border, radius 4px, flex; input centred at 14px with
 *        padding .4em 0 and min-width 40px; buttons min-width 30px, opacity .6
 *   .wc-block-components-totals-footer-item .../__label, .../__value
 *     -> font-size var(--wp--preset--font-size--medium), weight 500, lh 1.4
 *   .wc-block-cart__submit  /  .wc-block-cart__submit-button
 *     -> margin 0 0 16px  /  width 100%, box-sizing border-box
 *   .wc-block-components-totals-coupon__form
 *     -> flex, gap 8px; input flex 3 1 120px; button flex 1 1 auto,
 *        padding-inline 16px, white-space nowrap
 *
 * `color-mix(in srgb, currentColor 20%, transparent)` resolves against the body
 * colour, so on this site it is literally `rgba(49, 44, 33, 0.2)`.
 *
 * ONE DELIBERATE DEVIATION: the block's solid button is `#32373c`, which is
 * WordPress's generic `.wp-element-button` fallback rather than a brand colour.
 * The rest of this store uses `--ama-ink` (#312c21) for solid buttons, so the
 * checkout button follows suit — matching `#32373c` here would reintroduce the
 * product-page/cart mismatch this project set out to fix.
 *
 * `--ama-*` design tokens come from assets/css/divi-woo-products.css, which
 * loads on every front-end page and is a declared dependency of this file.
 */

.woocommerce-cart {
    /* The block's table rules use color-mix against currentColor; this is the
     * resolved equivalent, kept in one place. */
    --ama-cart-line: rgba(49, 44, 33, 0.2);

    /* Thumbnail size and cell padding, as custom properties because the remove
     * button's overlay offsets are derived from them (section 2b). Change these
     * and the overlay follows instead of drifting off the image corner. */
    --ama-cart-thumb: 80px;
    --ama-cart-cell-pad: 20px;
    --ama-cart-remove-size: 24px;
}

/* -------------------------------------------------------------------------
 * 1. Sidebar layout — cart table left (65%), totals right (35%)
 *
 * The classic shortcode stacks the form and `.cart-collaterals` vertically and
 * floats `.cart_totals` right at 48%, so the totals ended up under the table.
 * The block puts them side by side; this reproduces that.
 *
 * `:has()` gates the flex on the cart actually having items — when the cart is
 * empty the same `.woocommerce` wrapper holds only a notice and a "Return to
 * shop" button, and those must not be laid out in a row.
 * ---------------------------------------------------------------------- */

.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
    flex: 0 0 100%;
}

/* `min-width: 0` on both children is not optional. A flex item's automatic
 * minimum size is its content's min-content width, and a six-column cart table
 * has a large one — so without this the form refused to shrink to 65%, spilled
 * past its track and rendered *underneath* the totals panel. */
/* Widened from the block's 65/35 to 72/28: the classic table carries six real
 * columns where the block's row is a compact grid, so the item list needs the
 * extra room more than the totals panel does. At 28% the panel still holds
 * "Subtotal / Total / Proceed to checkout" comfortably. */
.woocommerce-cart .woocommerce > form.woocommerce-cart-form {
    box-sizing: border-box;
    width: 72%;
    min-width: 0;
    padding-right: 4.5283018868%;
    margin: 0 !important;
    float: none !important;
}

.woocommerce-cart .woocommerce > .cart-collaterals {
    box-sizing: border-box;
    /* Overrides WooCommerce's `.cart-collaterals { width: 100% }`. */
    width: 28% !important;
    min-width: 0;
    padding-left: 2.2641509434%;
    margin: 0 !important;
    float: none !important;
}

/* `.cart-collaterals` is clearfixed by WooCommerce
 * (`.woocommerce .cart-collaterals::before/::after { content:" "; display:table }`).
 * Harmless while it stays a block, but hidden so it can never turn into a
 * phantom flex/grid item if this ever becomes a flex container. */
.woocommerce-cart .woocommerce > .cart-collaterals::before,
.woocommerce-cart .woocommerce > .cart-collaterals::after,
.woocommerce-cart .wc-proceed-to-checkout::before,
.woocommerce-cart .wc-proceed-to-checkout::after {
    display: none !important;
    content: none !important;
}

/* Undo `.cart-collaterals .cart_totals { float: right; width: 48% }` — the
 * panel now fills the 35% sidebar it sits in. */
.woocommerce-cart .woocommerce .cart-collaterals .cart_totals {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* -------------------------------------------------------------------------
 * 2. Cart items table
 * ---------------------------------------------------------------------- */

/* `table-layout: fixed` so the column widths below are honoured exactly.
 * Under `auto`, the browser sizes columns from content and the name column
 * loses out to whatever else is widest — which is how the product titles ended
 * up one character per line. */
.woocommerce-cart .woocommerce table.shop_table.cart,
.woocommerce-cart .woocommerce table.woocommerce-cart-form__contents {
    width: 100%;
    table-layout: fixed;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ama-cart-line) !important;
    border-radius: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: none !important;
    font-family: var(--ama-font-body) !important;
}

/* Explicit column widths. Everything is pinned except the name, which takes
 * the remainder. Quantity is 123px = the 107px selector + its 16px cell pad.
 * The remove column is 0 — its link is overlaid on the thumbnail instead
 * (section 2b). */
.woocommerce-cart .woocommerce table.shop_table.cart th.product-thumbnail,
.woocommerce-cart .woocommerce table.shop_table.cart td.product-thumbnail {
    width: 96px;
}

.woocommerce-cart .woocommerce table.shop_table.cart th.product-name,
.woocommerce-cart .woocommerce table.shop_table.cart td.product-name {
    width: auto;
}

.woocommerce-cart .woocommerce table.shop_table.cart th.product-price,
.woocommerce-cart .woocommerce table.shop_table.cart td.product-price {
    width: 90px;
}

.woocommerce-cart .woocommerce table.shop_table.cart th.product-quantity,
.woocommerce-cart .woocommerce table.shop_table.cart td.product-quantity {
    width: 123px;
}

.woocommerce-cart .woocommerce table.shop_table.cart th.product-subtotal,
.woocommerce-cart .woocommerce table.shop_table.cart td.product-subtotal {
    width: 96px;
}

/* Header and body cells share the same 16px LEFT padding so each heading sits
 * directly above its column's values, and both are explicitly left-aligned.
 *
 * The block's own values are asymmetric — `th { padding: 8px 16px 12px 0 }` vs
 * `td { padding: 20px 0 20px 16px }` — because its rows are CSS grids where the
 * header is decorative and never has to line up with a column. Copied onto a
 * real six-column table that mismatch put every heading 16px to the left of the
 * values beneath it. */
.woocommerce-cart .woocommerce table.shop_table.cart thead th {
    padding: 8px 0 12px 16px !important;
    border: 0 !important;
    background: none !important;
    color: rgba(49, 44, 33, 0.7) !important;
    font-family: var(--ama-font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    text-transform: none !important;
    white-space: nowrap;
}

.woocommerce-cart .woocommerce table.shop_table.cart tbody td {
    padding: 20px 0 20px 16px !important;
    border: 0 !important;
    border-top: 1px solid var(--ama-cart-line) !important;
    background: none !important;
    color: var(--ama-ink) !important;
    font-family: var(--ama-font-body) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: left !important;
    vertical-align: top !important;
}

/* The thumbnail is the first visible column (remove is 0-wide), so it starts
 * flush with the table's left edge — header included, or the "Product" heading
 * would sit 16px out from the images below it. */
.woocommerce-cart .woocommerce table.shop_table.cart thead th.product-thumbnail,
.woocommerce-cart .woocommerce table.shop_table.cart thead th.product-remove {
    padding-left: 0 !important;
}

/* -------------------------------------------------------------------------
 * 2b. Remove button, overlaid on the thumbnail
 *
 * `a.remove` lives in `td.product-remove`, a SIBLING cell of the thumbnail, and
 * CSS cannot move an element between table cells. So instead the remove column
 * is collapsed to zero width and the link is taken out of flow and positioned
 * from that cell's corner — which, with the column at 0px, is exactly the
 * top-left of the thumbnail cell next to it.
 *
 * The offsets are derived from `--ama-cart-thumb` and `--ama-cart-cell-pad`
 * rather than hardcoded, so they track the thumbnail rather than drifting if it
 * is resized. Moving the link in PHP was the alternative, but WooCommerce wraps
 * the thumbnail in a product `<a>` when the product is visible, and injecting an
 * anchor inside an anchor is invalid HTML that browsers un-nest.
 * ---------------------------------------------------------------------- */

.woocommerce-cart .woocommerce table.shop_table.cart th.product-remove,
.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove {
    position: relative;
    width: 0 !important;
    padding: 0 !important;
    overflow: visible;
    text-align: left !important;
}

.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove a.remove {
    position: absolute;
    z-index: 2;
    /* 4px inset from the thumbnail's top-right corner. */
    top: calc(var(--ama-cart-cell-pad) + 4px);
    left: calc(var(--ama-cart-thumb) - var(--ama-cart-remove-size) - 4px);
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--ama-cart-remove-size);
    height: var(--ama-cart-remove-size);
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--ama-line) !important;
    border-radius: 50%;
    background-color: #fff !important;
    box-shadow: 0 1px 3px rgba(49, 44, 33, 0.18);
    color: var(--ama-ink) !important;
    /* The glyph is drawn geometrically below, so the `&times;` text node is
     * hidden. `aria-label` on the anchor carries the accessible name, so
     * nothing is lost. */
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
    transition: background-color 0.15s linear, color 0.15s linear, border-color 0.15s linear;
}

/* The × is two rotated bars rather than the `&times;` character.
 *
 * U+00D7 sits on the font's math axis, which is ABOVE the em box's vertical
 * centre — so flex centring aligns the line box correctly and the glyph still
 * looks high. Drawing it means it is centred by geometry and identical in every
 * font. Both bars are positioned from the anchor's own centre. */
.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove a.remove::before,
.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove a.remove::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1.5px;
    border-radius: 1px;
    background-color: currentColor;
}

.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove a.remove::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove a.remove::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove a.remove:hover,
.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove a.remove:focus {
    border-color: #b3452f !important;
    background-color: #b3452f !important;
    color: #fff !important;
    outline: none;
}

/* The thumbnail cell must not clip the button that sits on top of it. */
.woocommerce-cart .woocommerce table.shop_table.cart td.product-thumbnail {
    position: relative;
    overflow: visible;
}

/* Thumbnail column — the block uses an 80px image cell with 16px of gutter. */
.woocommerce-cart .woocommerce table.shop_table.cart td.product-thumbnail {
    padding-left: 0 !important;
    padding-right: 16px !important;
}

.woocommerce-cart .woocommerce table.shop_table.cart td.product-thumbnail img {
    display: block;
    width: 80px;
    height: auto;
    margin: 0 !important;
    border-radius: var(--ama-image-radius);
}

/* Product name: the block's `.wc-block-components-product-name`. */
.woocommerce-cart .woocommerce table.shop_table.cart td.product-name a {
    color: var(--ama-ink) !important;
    font-family: var(--ama-font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    /* The block uses `overflow-wrap: anywhere`, but `anywhere` also feeds into
     * min-content sizing and breaks mid-word eagerly — in a ~200px column that
     * turned "Vitamin D Injections" into one letter per line. `break-word`
     * breaks only when a word genuinely cannot fit. */
    overflow-wrap: break-word;
    transition: color 0.15s linear;
}

.woocommerce-cart .woocommerce table.shop_table.cart td.product-name a:hover {
    color: var(--ama-gold) !important;
}

.woocommerce-cart .woocommerce table.shop_table.cart td.product-name .variation,
.woocommerce-cart .woocommerce table.shop_table.cart td.product-name dl.variation {
    margin: 6px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: rgba(49, 44, 33, 0.65) !important;
}

.woocommerce-cart .woocommerce table.shop_table.cart td.product-price,
.woocommerce-cart .woocommerce table.shop_table.cart td.product-subtotal {
    white-space: nowrap;
}

.woocommerce-cart .woocommerce table.shop_table.cart td.product-subtotal,
.woocommerce-cart .woocommerce table.shop_table.cart td.product-subtotal bdi {
    font-weight: 500 !important;
}

.woocommerce-cart .woocommerce table.shop_table.cart td .woocommerce-Price-amount,
.woocommerce-cart .woocommerce table.shop_table.cart td bdi {
    color: var(--ama-ink) !important;
}

/* -------------------------------------------------------------------------
 * 3. Quantity field — the block's `.wc-block-components-quantity-selector`
 *
 * Same spec as the single product page, so the two match each other as well as
 * the block. The −/+ buttons are injected by assets/js/quantity-stepper.js.
 * ---------------------------------------------------------------------- */

.woocommerce-cart .woocommerce table.shop_table.cart td.product-quantity div.quantity {
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    position: relative;
    width: 107px;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--ama-field-border);
    border-radius: var(--ama-radius);
    background-color: #fff;
    overflow: hidden;
    float: none !important;
}

.woocommerce-cart .woocommerce td.product-quantity div.quantity input.qty {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    order: 2;
    flex: 1 1 auto;
    box-sizing: border-box;
    min-width: 40px;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.4em 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--ama-ink) !important;
    font-family: var(--ama-font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-align: center !important;
}

.woocommerce-cart .woocommerce td.product-quantity div.quantity input.qty::-webkit-inner-spin-button,
.woocommerce-cart .woocommerce td.product-quantity div.quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.woocommerce-cart .woocommerce td.product-quantity div.quantity:focus-within {
    border-color: var(--ama-ink);
    box-shadow: 0 0 0 1px var(--ama-ink);
}

.woocommerce-cart .woocommerce td.product-quantity div.quantity .ama-qty-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none transparent !important;
    color: var(--ama-ink) !important;
    cursor: pointer;
    opacity: 0.6;
    font-family: var(--ama-font-body) !important;
    font-size: 0.9em !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-transform: none !important;
    transition: opacity 0.15s linear;
}

.woocommerce-cart .woocommerce td.product-quantity div.quantity .ama-qty-button--minus {
    order: 1;
}

.woocommerce-cart .woocommerce td.product-quantity div.quantity .ama-qty-button--plus {
    order: 3;
}

.woocommerce-cart .woocommerce td.product-quantity div.quantity .ama-qty-button:hover,
.woocommerce-cart .woocommerce td.product-quantity div.quantity .ama-qty-button:focus {
    opacity: 1;
    outline: none;
}

.woocommerce-cart .woocommerce td.product-quantity div.quantity .ama-qty-button:disabled {
    cursor: default;
    opacity: 0.3;
}

.woocommerce-cart .woocommerce td.product-quantity div.quantity .ama-qty-button::before,
.woocommerce-cart .woocommerce td.product-quantity div.quantity .ama-qty-button::after {
    display: none !important;
    content: none !important;
}

/* -------------------------------------------------------------------------
 * 4. Actions row — coupon + update cart
 *
 * The block's coupon form is `display:flex; gap:8px` with the input at
 * `flex: 3 1 120px` and a nowrap button at `flex: 1 1 auto`.
 *
 * CRITICAL: this cell must stay `display: table-cell`. It carries
 * `colspan="6"`, and giving it any other `display` stops it being a table cell —
 * at which point the browser wraps it in an ANONYMOUS table cell, which has no
 * colspan and therefore lands in column 1. That inflated the narrow remove
 * column to the width of the coupon form and wrecked every other column with
 * it. Floats inside the cell get the same left/right split without touching the
 * cell's own display; `overflow: hidden` establishes a block formatting context
 * so the cell still contains them.
 * ---------------------------------------------------------------------- */

.woocommerce-cart .woocommerce table.shop_table.cart td.actions {
    display: table-cell !important;
    overflow: hidden;
    padding: 20px 16px 20px 0 !important;
    border-top: 1px solid var(--ama-cart-line) !important;
    text-align: left !important;
}

.woocommerce-cart .woocommerce table.shop_table.cart td.actions .coupon {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    float: left !important;
    width: 100%;
    max-width: 380px;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-cart .woocommerce table.shop_table.cart td.actions button[name="update_cart"],
.woocommerce-cart .woocommerce table.shop_table.cart td.actions input[name="update_cart"] {
    float: right !important;
}

.woocommerce-cart .woocommerce table.shop_table.cart td.actions .coupon::before,
.woocommerce-cart .woocommerce table.shop_table.cart td.actions .coupon::after {
    display: none !important;
    content: none !important;
}

.woocommerce-cart .woocommerce table.shop_table.cart td.actions .coupon input.input-text,
.woocommerce-cart .woocommerce table.shop_table.cart td.actions input#coupon_code {
    /* Overrides `table.cart td.actions .input-text { width: 80px }`. */
    flex: 3 1 120px;
    box-sizing: border-box;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid var(--ama-field-border) !important;
    border-radius: var(--ama-radius) !important;
    background-color: #fff !important;
    box-shadow: none !important;
    color: var(--ama-ink) !important;
    font-family: var(--ama-font-body) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.woocommerce-cart .woocommerce table.shop_table.cart td.actions .coupon input.input-text:focus {
    border-color: var(--ama-ink) !important;
    box-shadow: 0 0 0 1px var(--ama-ink) !important;
    outline: none;
}

.woocommerce-cart .woocommerce table.shop_table.cart td.actions .coupon button {
    flex: 1 1 auto;
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * 5. Totals panel
 * ---------------------------------------------------------------------- */

.woocommerce-cart .woocommerce .cart_totals > h2 {
    margin: 0 0 4px !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--ama-ink) !important;
    font-family: var(--ama-font-body) !important;
    /* The block's `.wc-block-cart__totals-title`: small + 500, not a display
     * heading — it labels the panel rather than titling a section. */
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
    line-height: 1.4 !important;
    text-transform: uppercase;
}

.woocommerce-cart .woocommerce .cart_totals table.shop_table {
    width: 100%;
    margin: 0 0 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: none !important;
}

.woocommerce-cart .woocommerce .cart_totals table.shop_table th,
.woocommerce-cart .woocommerce .cart_totals table.shop_table td {
    padding: 16px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--ama-cart-line) !important;
    background: none !important;
    font-family: var(--ama-font-body) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    vertical-align: top !important;
}

.woocommerce-cart .woocommerce .cart_totals table.shop_table th {
    width: 50%;
    color: rgba(49, 44, 33, 0.8) !important;
    font-weight: 400 !important;
    text-align: left !important;
}

.woocommerce-cart .woocommerce .cart_totals table.shop_table td {
    color: var(--ama-ink) !important;
    font-weight: 500 !important;
    text-align: right !important;
}

/* The order total is the block's `.wc-block-components-totals-footer-item`:
 * `--wp--preset--font-size--medium` at weight 500. */
.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total td,
.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total td .woocommerce-Price-amount,
.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total td bdi {
    color: var(--ama-ink) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total small,
.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total .includes_tax {
    display: block;
    margin-top: 4px;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgba(49, 44, 33, 0.6) !important;
}

.woocommerce-cart .woocommerce .cart_totals .shipping-calculator-button {
    font-size: 13px !important;
    color: var(--ama-ink) !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(49, 44, 33, 0.3) !important;
    text-underline-offset: 3px;
}

.woocommerce-cart .woocommerce .cart_totals .shipping-calculator-button:hover {
    color: var(--ama-gold) !important;
    text-decoration-color: var(--ama-gold) !important;
}

.woocommerce-cart .woocommerce .cart_totals ul#shipping_method {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.woocommerce-cart .woocommerce .cart_totals ul#shipping_method li {
    margin: 0 0 6px !important;
    padding: 0 !important;
    list-style: none !important;
    font-size: 14px !important;
}

/* -------------------------------------------------------------------------
 * 6. Buttons
 *
 * Geometry from the block (`min-height: 3em`, the `calc()` padding pair). The
 * checkout button is the full-width primary; Update cart / Apply coupon are
 * the outline variant, drawn with an inset shadow so their box size matches
 * the solid one exactly.
 * ---------------------------------------------------------------------- */

.woocommerce-cart .woocommerce .wc-proceed-to-checkout {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-cart .woocommerce a.checkout-button,
.woocommerce-cart .woocommerce table.shop_table.cart td.actions button.button,
.woocommerce-cart .woocommerce table.shop_table.cart td.actions input.button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3em;
    margin: 0 !important;
    padding: calc(0.667em + 2px) calc(1.333em + 2px) !important;
    border: 0 !important;
    border-radius: var(--ama-radius) !important;
    font-family: var(--ama-font-body) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none !important;
    text-transform: none !important;
    cursor: pointer;
    transition: background-color 0.15s linear, color 0.15s linear, box-shadow 0.15s linear;
}

/* Divi appends an arrow glyph via `:after` to `.button.alt` — and the checkout
 * button carries `alt`. */
.woocommerce-cart .woocommerce a.checkout-button::before,
.woocommerce-cart .woocommerce a.checkout-button::after,
.woocommerce-cart .woocommerce td.actions button.button::before,
.woocommerce-cart .woocommerce td.actions button.button::after,
.woocommerce-cart .woocommerce td.actions input.button::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
}

/* Primary: full width, matching `.wc-block-cart__submit-button`. */
.woocommerce-cart .woocommerce a.checkout-button,
.woocommerce-cart .woocommerce a.checkout-button.alt {
    width: 100%;
    margin: 0 0 16px !important;
    background-color: var(--ama-ink) !important;
    color: #fff !important;
    font-size: 16px !important;
}

.woocommerce-cart .woocommerce a.checkout-button:hover,
.woocommerce-cart .woocommerce a.checkout-button.alt:hover {
    background-color: var(--ama-ink-hover) !important;
    color: #fff !important;
}

/* Secondary: Update cart + Apply coupon. */
.woocommerce-cart .woocommerce table.shop_table.cart td.actions button.button,
.woocommerce-cart .woocommerce table.shop_table.cart td.actions input.button {
    background-color: transparent !important;
    color: var(--ama-ink) !important;
    box-shadow: inset 0 0 0 1px var(--ama-ink) !important;
    font-size: 14px !important;
}

.woocommerce-cart .woocommerce table.shop_table.cart td.actions button.button:hover,
.woocommerce-cart .woocommerce table.shop_table.cart td.actions input.button:hover {
    background-color: var(--ama-ink) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px var(--ama-ink) !important;
}

.woocommerce-cart .woocommerce table.shop_table.cart td.actions button.button:disabled,
.woocommerce-cart .woocommerce table.shop_table.cart td.actions button.button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* -------------------------------------------------------------------------
 * 7. Notices, empty cart, cross-sells
 * ---------------------------------------------------------------------- */

.woocommerce-cart .woocommerce .woocommerce-message,
.woocommerce-cart .woocommerce .woocommerce-info,
.woocommerce-cart .woocommerce .woocommerce-error {
    box-sizing: border-box;
    margin: 0 0 24px !important;
    padding: 16px 18px !important;
    border: 1px solid var(--ama-line) !important;
    border-left: 3px solid var(--ama-gold) !important;
    border-radius: var(--ama-radius) !important;
    background-color: var(--ama-cream) !important;
    color: var(--ama-ink) !important;
    font-family: var(--ama-font-body) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    list-style: none !important;
}

.woocommerce-cart .woocommerce .woocommerce-error {
    border-left-color: #b3452f !important;
    background-color: #fbf1ee !important;
}

.woocommerce-cart .woocommerce .woocommerce-message::before,
.woocommerce-cart .woocommerce .woocommerce-info::before,
.woocommerce-cart .woocommerce .woocommerce-error::before {
    display: none !important;
    content: none !important;
}

.woocommerce-cart .woocommerce .cart-empty {
    font-family: var(--ama-font-body);
    font-size: 16px;
    color: var(--ama-ink);
}

/* Cross-sells are moved out of `.cart-collaterals` onto `woocommerce_after_cart`
 * (see class-wc-amazing-shop-cart.php) so they run full width below the cart,
 * as the block's cross-sells block does — inside the 35% sidebar they would be
 * unusably narrow. */
.woocommerce-cart .woocommerce .cross-sells {
    width: 100% !important;
    float: none !important;
    clear: both;
    margin-top: 48px;
}

.woocommerce-cart .woocommerce .cross-sells > h2 {
    font-family: var(--ama-font-heading) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    color: var(--ama-ink) !important;
    margin-bottom: 0.9em !important;
}

/* -------------------------------------------------------------------------
 * 8. Responsive
 *
 * The block collapses its sidebar layout to a single 100%-wide column
 * (`.wc-block-components-sidebar-layout { flex-direction: column }` with both
 * children at `width: 100%; padding: 0`). Same here.
 * ---------------------------------------------------------------------- */

@media (max-width: 980px) {

    .woocommerce-cart .woocommerce > form.woocommerce-cart-form,
    .woocommerce-cart .woocommerce > .cart-collaterals {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .woocommerce-cart .woocommerce > .cart-collaterals {
        margin-top: 32px !important;
    }
}

/* Woo's `woocommerce-smallscreen.css` has NO @media block of its own — its
 * breakpoint comes from the stylesheet's `media` attribute, which WooCommerce
 * sets to `only screen and (max-width: 768px)`. This query has to be 768px to
 * match: at 767px there was a 1px window at exactly 768px where Woo stacked the
 * table but the resets below had not kicked in yet.
 *
 * Woo's stacking turns every `tr` and `td` into a block and labels each cell
 * from its `data-title`. That is functional but nothing like the block cart, so
 * the item rows are rebuilt as a grid mirroring the block's own narrow layout
 * (`.wc-block-cart-items__row { display: grid; grid-template-columns: 80px ... }`):
 * thumbnail in a fixed left column, everything else stacked to its right.
 * ---------------------------------------------------------------------- */

@media (max-width: 768px) {

    /* Drop table layout entirely rather than just switching to `auto`.
     *
     * This is what was overflowing to the right. Making `tr.cart_item` a grid
     * takes it out of table layout, so the browser wraps it in ANONYMOUS
     * table-row and table-cell boxes — and the table then sizes itself from
     * those anonymous cells' min-content, which a real `<table>` will not shrink
     * below no matter what `width: 100%` says. Same family of bug as putting
     * `display: flex` on the colspan'd actions cell.
     *
     * With the table and its row group as blocks there is no table layout left
     * to compute, so the grid rows and the actions block simply behave as normal
     * boxes and can't force the container open. */
    .woocommerce-cart .woocommerce table.shop_table.cart {
        display: block;
        table-layout: auto;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        border-bottom: 0 !important;
    }

    .woocommerce-cart .woocommerce table.shop_table.cart tbody {
        display: block;
        width: 100%;
    }

    .woocommerce-cart .woocommerce table.shop_table.cart tbody tr {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Belt and braces: nothing inside the cart may exceed the viewport. */
    .woocommerce-cart .woocommerce > form.woocommerce-cart-form,
    .woocommerce-cart .woocommerce > .cart-collaterals {
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
    }

    .woocommerce-cart .woocommerce table.shop_table.cart th.product-thumbnail,
    .woocommerce-cart .woocommerce table.shop_table.cart td.product-thumbnail,
    .woocommerce-cart .woocommerce table.shop_table.cart th.product-price,
    .woocommerce-cart .woocommerce table.shop_table.cart td.product-price,
    .woocommerce-cart .woocommerce table.shop_table.cart th.product-quantity,
    .woocommerce-cart .woocommerce table.shop_table.cart td.product-quantity,
    .woocommerce-cart .woocommerce table.shop_table.cart th.product-subtotal,
    .woocommerce-cart .woocommerce table.shop_table.cart td.product-subtotal,
    .woocommerce-cart .woocommerce table.shop_table.cart th.product-name,
    .woocommerce-cart .woocommerce table.shop_table.cart td.product-name {
        width: auto !important;
    }

    /* --- Item rows: thumbnail left, details right ---------------------- */

    .woocommerce-cart .woocommerce table.shop_table.cart tbody tr.cart_item {
        display: grid !important;
        grid-template-columns: var(--ama-cart-thumb) minmax(0, 1fr);
        gap: 2px 16px;
        padding: 18px 0;
        border-top: 1px solid var(--ama-cart-line);
    }

    /* Woo hides the thumbnail entirely on small screens
     * (`table.cart .product-thumbnail { display: none }`). Bring it back — it
     * anchors this layout, and it is what the remove button sits on. */
    .woocommerce-cart .woocommerce table.shop_table.cart td.product-thumbnail {
        display: block !important;
        grid-column: 1;
        grid-row: 1 / span 4;
        align-self: start;
        padding: 0 !important;
        border-top: 0 !important;
    }

    .woocommerce-cart .woocommerce table.shop_table.cart td.product-name,
    .woocommerce-cart .woocommerce table.shop_table.cart td.product-price,
    .woocommerce-cart .woocommerce table.shop_table.cart td.product-quantity,
    .woocommerce-cart .woocommerce table.shop_table.cart td.product-subtotal {
        grid-column: 2;
        padding: 0 !important;
        border-top: 0 !important;
        text-align: left !important;
    }

    .woocommerce-cart .woocommerce table.shop_table.cart td.product-quantity {
        margin-top: 8px;
    }

    /* Woo prefixes each stacked cell with `attr(data-title) ": "` floated left.
     * Keep the labels, but as quiet inline text rather than bold floats — the
     * float would fight the grid cells' left alignment. */
    .woocommerce-cart .woocommerce table.shop_table.cart tbody td::before {
        float: none !important;
        display: inline !important;
        margin-right: 6px;
        color: rgba(49, 44, 33, 0.6) !important;
        font-weight: 400 !important;
    }

    /* Only the price/subtotal cells carry a `data-title`. WooCommerce already
     * hides the labels on the actions and remove cells; the blanket rule above
     * had re-enabled them, and with no attribute to interpolate they rendered as
     * a bare ": " floating above each thumbnail and above the coupon field. */
    .woocommerce-cart .woocommerce table.shop_table.cart td.product-name::before,
    .woocommerce-cart .woocommerce table.shop_table.cart td.product-quantity::before,
    .woocommerce-cart .woocommerce table.shop_table.cart td.product-remove::before,
    .woocommerce-cart .woocommerce table.shop_table.cart td.product-thumbnail::before,
    .woocommerce-cart .woocommerce table.shop_table.cart td.actions::before,
    .woocommerce-cart .woocommerce table.shop_table.cart td:not([data-title])::before {
        display: none !important;
        content: none !important;
    }

    /* Woo zebra-stripes the stacked rows (`tr:nth-child(2n) td` at
     * rgba(0,0,0,.025)); the block cart has no striping. */
    .woocommerce-cart .woocommerce table.shop_table.cart tbody tr:nth-child(2n) td {
        background-color: transparent !important;
    }

    /* --- Remove button ------------------------------------------------
     * The row is a grid here, so the button can simply be placed in the same
     * cell as the thumbnail and pinned to its top-right — no absolute
     * positioning or derived offsets needed. Items in a shared grid cell
     * overlap, and the remove cell comes first in the DOM, so it needs raising
     * above the image. */
    .woocommerce-cart .woocommerce table.shop_table.cart td.product-remove {
        position: relative;
        z-index: 2;
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
        align-self: start;
        width: auto !important;
        margin: 4px !important;
        padding: 0 !important;
        border-top: 0 !important;
    }

    /* `relative`, not `static`: the link stays in flow as the grid cell's child,
     * but must remain a positioning context for the two bars that draw the ×. */
    .woocommerce-cart .woocommerce table.shop_table.cart td.product-remove a.remove {
        position: relative !important;
        top: auto;
        left: auto;
    }

    /* --- Actions row -------------------------------------------------
     * `display: table-cell !important` from the desktop rules would otherwise
     * survive into Woo's stacked layout, where the parent `tr` is a block. */
    .woocommerce-cart .woocommerce table.shop_table.cart td.actions {
        display: block !important;
        overflow: visible;
        padding: 20px 0 !important;
        border-top: 1px solid var(--ama-cart-line) !important;
        text-align: left !important;
    }

    /* Stacked, not side by side. The desktop row is `flex-wrap: nowrap` with a
     * `white-space: nowrap` button, which cannot shrink — that is what pushed
     * "Apply coupon" off the right edge. Full-width rows can't overflow at any
     * viewport size. */
    .woocommerce-cart .woocommerce table.shop_table.cart td.actions .coupon {
        display: flex !important;
        flex-wrap: wrap;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin: 0 0 12px !important;
        padding: 0 !important;
    }

    /* Woo pins these to `width: 48%` and floats the button right. */
    .woocommerce-cart .woocommerce table.shop_table.cart td.actions .coupon input.input-text,
    .woocommerce-cart .woocommerce table.shop_table.cart td.actions .coupon button.button {
        flex: 1 1 100%;
        box-sizing: border-box;
        width: 100% !important;
        min-width: 0;
        max-width: 100% !important;
        float: none !important;
    }

    /* Long labels wrap rather than forcing the button wider than its column. */
    .woocommerce-cart .woocommerce table.shop_table.cart td.actions button.button,
    .woocommerce-cart .woocommerce table.shop_table.cart td.actions input.button,
    .woocommerce-cart .woocommerce a.checkout-button {
        white-space: normal !important;
    }

    .woocommerce-cart .woocommerce table.shop_table.cart td.actions button[name="update_cart"],
    .woocommerce-cart .woocommerce table.shop_table.cart td.actions input[name="update_cart"] {
        display: block !important;
        float: none !important;
        width: 100% !important;
    }
}