/* ==========================================================================
   MrAgri Theme — Cart & Checkout PRO Layout Layer
   Version: 1.6.5

   This stylesheet is loaded LAST (priority 999) so it always wins over
   WooCommerce core CSS and every earlier accumulated theme patch.

   It is the single source of truth for:
     1. Real desktop/laptop layout (no more phone-style stacking on laptop)
     2. Table column alignment + width control (no more right-edge drift)
     3. Compact vertical rhythm (no more endless scrolling)
     4. Tablet & mobile alignment of all text inside boxes
     5. Modern compact payment method selector with a real tick mark
     6. Compact coupon bar placed before Order Review & Payment
   All sizing is driven by Customizer CSS variables (see :root defaults).
   ========================================================================== */

:root {
    /* Layout */
    --cc-container: 1280px;
    --cc-gap: 16px;
    --cc-sidebar: 370px;
    --cc-sidebar-tablet: 330px;
    --cc-card-pad: 22px;
    --cc-radius: 16px;
    --cc-row-pad: 14px;

    /* Colour */
    --cc-accent: #165B33;
    --cc-accent-2: #25B865;
    --cc-accent-soft: rgba(37, 184, 101, 0.12);
    --cc-border: #E2E8F0;
    --cc-border-strong: #CBD5E1;
    --cc-card-bg: #FFFFFF;
    --cc-page-bg: #F7FAF6;
    --cc-heading: #0F2E1B;
    --cc-text: #334155;
    --cc-muted: #64748B;

    /* Typography */
    --cc-title-size: 1.12rem;
    --cc-body-size: 0.92rem;
    --cc-small-size: 0.8rem;
    --cc-product-size: 0.97rem;
}

/* ==========================================================================
   0. PAGE SHELL — stop horizontal drift, control vertical rhythm
   ========================================================================== */
body.woocommerce-cart .site-main-custom-flow,
body.woocommerce-checkout .site-main-custom-flow {
    padding: 0 !important;
    overflow-x: clip;
}

.mragri-cart-main-wrap,
.mragri-checkout-main-wrap {
    background: var(--cc-page-bg);
    padding: 22px 0 52px 0 !important;
    width: 100%;
    box-sizing: border-box;
}

/* Close the dead space between the banner and the first card */
form.checkout.woocommerce-checkout,
form.woocommerce-cart-form {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-notices-wrapper:empty {
    display: none !important;
    margin: 0 !important;
}

.mragri-cart-main-wrap > .section-container,
.mragri-checkout-main-wrap > .section-container,
.mragri-checkout-header > .section-container {
    max-width: var(--cc-container) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
    float: none !important;
}

/* ==========================================================================
   1. DESKTOP / LAPTOP GRID — the core fix
   ========================================================================== */
.mragri-cart-grid-layout,
.mragri-checkout-grid {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 992px) {
    .mragri-cart-grid-layout,
    .mragri-checkout-grid {
        display: grid !important;
        /* minmax(0,1fr) is what prevents the left column from overflowing
           its track and pushing content toward the right page edge. */
        grid-template-columns: minmax(0, 1fr) var(--cc-sidebar) !important;
        grid-auto-flow: row !important;
        gap: var(--cc-gap) !important;
        align-items: start !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .mragri-cart-table-card,
    .mragri-billing-card {
        /* Explicit row AND column lines. Auto-placement was letting the
           sidebar fall into an implicit second row; pinning both items to
           row 1 makes the two-column layout impossible to break. */
        grid-row: 1 / 2 !important;
        grid-column: 1 / 2 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }

    .mragri-cart-sidebar,
    .mragri-checkout-sidebar {
        grid-row: 1 / 2 !important;
        grid-column: 2 / 3 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        float: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        position: sticky !important;
        top: 92px !important;
        align-self: start !important;
    }
}

/* Tablet & small laptop: keep two columns, narrower sidebar, tighter gaps */
@media (min-width: 768px) and (max-width: 991.98px) {
    .mragri-checkout-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--cc-sidebar-tablet) !important;
        gap: 10px !important;
        align-items: start !important;
        width: 100% !important;
    }

    .mragri-cart-table-card,
    .mragri-billing-card {
        grid-row: 1 / 2 !important;
        grid-column: 1 / 2 !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .mragri-cart-sidebar,
    .mragri-checkout-sidebar {
        grid-row: 1 / 2 !important;
        grid-column: 2 / 3 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 9px !important;
        position: static !important;
        margin: 0 !important;
    }
}

/* Cart only: single column below 1200px so the items table keeps real width */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .mragri-cart-grid-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 13px !important;
        width: 100% !important;
    }

    .mragri-cart-table-card,
    .mragri-cart-sidebar {
        grid-row: auto !important;
        grid-column: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        top: auto !important;
        margin: 0 !important;
    }

    .mragri-cart-sidebar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: start !important;
        gap: 11px !important;
    }
}

/* Phone: single column with compact vertical gaps */
@media (max-width: 767.98px) {
    .mragri-cart-grid-layout,
    .mragri-checkout-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .mragri-cart-table-card,
    .mragri-billing-card {
        margin: 0 !important;
    }

    .mragri-cart-sidebar,
    .mragri-checkout-sidebar {
        display: flex !important;
        flex-direction: column !important;
        gap: 9px !important;
        position: static !important;
        top: auto !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   2. CARDS — uniform, compact
   ========================================================================== */
.mragri-cart-table-card,
.mragri-billing-card,
.mragri-cart-totals-card,
.mragri-order-review-card,
.mragri-trust-badges-card,
.mragri-checkout-coupon-compact {
    background: var(--cc-card-bg);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    box-shadow: 0 2px 10px rgba(15, 46, 27, 0.04);
}

.mragri-cart-table-card,
.mragri-billing-card {
    padding: var(--cc-card-pad);
    overflow: hidden;
}

.mragri-cart-totals-card,
.mragri-order-review-card {
    padding: 0;
    overflow: hidden;
}

/* ==========================================================================
   3. CART TABLE — force a REAL table on tablet & laptop
   This is what stops the laptop view rendering like a phone.
   ========================================================================== */
.mragri-cart-table-responsive-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .mragri-cart-table-responsive-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table.mragri-custom-cart-table {
        display: table !important;
        table-layout: fixed !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 560px !important;
        margin: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        float: none !important;
    }

    table.mragri-custom-cart-table thead {
        display: table-header-group !important;
    }

    table.mragri-custom-cart-table tbody {
        display: table-row-group !important;
    }

    table.mragri-custom-cart-table tr,
    table.mragri-custom-cart-table tbody tr.cart_item {
        display: table-row !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    table.mragri-custom-cart-table th,
    table.mragri-custom-cart-table td {
        display: table-cell !important;
        width: auto !important;
        grid-area: auto !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    /* Kill WooCommerce's mobile data-title labels on desktop */
    table.mragri-custom-cart-table td::before,
    table.mragri-custom-cart-table th::before {
        content: none !important;
        display: none !important;
    }

    /* Fixed column widths — the actual cure for right-edge drift */
    table.mragri-custom-cart-table th.product-remove,
    table.mragri-custom-cart-table td.product-remove {
        width: 40px !important;
        text-align: center !important;
        padding: var(--cc-row-pad) 4px !important;
    }

    table.mragri-custom-cart-table th.product-thumbnail,
    table.mragri-custom-cart-table td.product-thumbnail {
        width: 76px !important;
        text-align: left !important;
        padding: var(--cc-row-pad) 8px var(--cc-row-pad) 0 !important;
    }

    table.mragri-custom-cart-table th.product-name,
    table.mragri-custom-cart-table td.product-name {
        width: auto !important;
        text-align: left !important;
        padding: var(--cc-row-pad) 14px var(--cc-row-pad) 4px !important;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    table.mragri-custom-cart-table th.product-price,
    table.mragri-custom-cart-table td.product-price {
        width: 104px !important;
        text-align: right !important;
        padding: var(--cc-row-pad) 10px !important;
        white-space: nowrap;
    }

    table.mragri-custom-cart-table th.product-quantity,
    table.mragri-custom-cart-table td.product-quantity {
        width: 120px !important;
        text-align: center !important;
        padding: var(--cc-row-pad) 8px !important;
    }

    table.mragri-custom-cart-table th.product-subtotal,
    table.mragri-custom-cart-table td.product-subtotal {
        width: 120px !important;
        text-align: right !important;
        padding: var(--cc-row-pad) 0 var(--cc-row-pad) 10px !important;
        white-space: nowrap;
    }

    /* Header row */
    table.mragri-custom-cart-table thead th {
        background: #F1F6F0 !important;
        font-size: 0.74rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        color: var(--cc-accent) !important;
        border: 0 !important;
        border-bottom: 1.5px solid var(--cc-border) !important;
        padding-top: 11px !important;
        padding-bottom: 11px !important;
    }

    table.mragri-custom-cart-table thead th:first-child {
        border-top-left-radius: 10px;
    }

    table.mragri-custom-cart-table thead th:last-child {
        border-top-right-radius: 10px;
    }

    table.mragri-custom-cart-table tbody td {
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid #EEF2EC !important;
    }

    table.mragri-custom-cart-table tbody tr:last-child td {
        border-bottom: 0 !important;
    }

    table.mragri-custom-cart-table tbody tr:hover td {
        background: #FAFDF9 !important;
    }

    /* Thumbnail box */
    td.product-thumbnail .cart-item-img-box {
        width: 72px !important;
        height: 72px !important;
        border-radius: 11px !important;
        overflow: hidden;
        border: 1px solid var(--cc-border);
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    td.product-thumbnail .cart-item-img-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 !important;
        max-width: none !important;
    }
}

/* Cart item text block — tight, aligned, no runaway gaps */
.cart-product-title-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
    min-width: 0;
}

.cart-product-cat-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cc-accent-2);
    line-height: 1.2;
    margin: 0;
}

.cart-product-cat-tag a {
    color: inherit;
    text-decoration: none;
}

h4.cart-product-name-heading {
    font-size: var(--cc-product-size) !important;
    font-weight: 800 !important;
    color: var(--cc-heading) !important;
    line-height: 1.32 !important;
    margin: 0 !important;
    padding: 0 !important;
}

h4.cart-product-name-heading a {
    color: inherit !important;
    text-decoration: none !important;
}

h4.cart-product-name-heading a:hover {
    color: var(--cc-accent-2) !important;
}

.cart-stock-badge.in-stock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #15803D;
    background: rgba(37, 184, 101, 0.1);
    border-radius: 999px;
    padding: 2px 9px;
    line-height: 1.5;
    margin: 1px 0 0 0;
}

.cart-item-sku {
    font-size: 0.68rem;
    color: var(--cc-muted);
    line-height: 1.4;
    margin: 0;
}

.cart-price-val {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--cc-text);
}

.cart-subtotal-val {
    font-size: 1rem;
    font-weight: 800;
    color: var(--cc-accent);
}

/* Remove button */
a.remove.mragri-remove-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
    background: #FEF2F2 !important;
    color: #DC2626 !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
    text-decoration: none !important;
    border: 1px solid #FECACA !important;
    transition: all 0.2s ease;
}

a.remove.mragri-remove-btn:hover {
    background: #DC2626 !important;
    color: #FFFFFF !important;
    border-color: #DC2626 !important;
}

/* Quantity stepper on Cart Page & Everywhere */
.cart-qty-stepper-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cart-qty-stepper-wrap .quantity,
.woocommerce td.product-quantity .quantity {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    border: 1.5px solid var(--cc-border-strong) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    height: 38px !important;
    min-width: 114px !important;
    max-width: 122px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.cart-qty-stepper-wrap .quantity:focus-within,
.woocommerce td.product-quantity .quantity:focus-within {
    border-color: var(--cc-accent-2) !important;
    box-shadow: 0 0 0 3px var(--cc-accent-soft) !important;
}

.cart-qty-stepper-wrap .quantity .qty-btn,
.woocommerce td.product-quantity .quantity .qty-btn {
    width: 35px !important;
    min-width: 35px !important;
    height: 100% !important;
    border: 0 !important;
    background: #F8FAF7 !important;
    color: var(--cc-heading) !important;
    cursor: pointer !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    transition: background 0.18s ease, color 0.18s ease !important;
}

.cart-qty-stepper-wrap .quantity .qty-btn:hover,
.woocommerce td.product-quantity .quantity .qty-btn:hover {
    background: var(--cc-accent) !important;
    color: #FFFFFF !important;
}

.cart-qty-stepper-wrap .quantity .qty-btn:active,
.woocommerce td.product-quantity .quantity .qty-btn:active {
    transform: scale(0.94);
}

.cart-qty-stepper-wrap .quantity input.qty,
.woocommerce td.product-quantity .quantity input.qty {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 48px !important;
    height: 100% !important;
    border: 0 !important;
    border-left: 1px solid var(--cc-border) !important;
    border-right: 1px solid var(--cc-border) !important;
    border-radius: 0 !important;
    text-align: center !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--cc-heading) !important;
    background: #FFFFFF !important;
    padding: 0 2px !important;
    margin: 0 !important;
    box-shadow: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
    -moz-appearance: textfield !important;
}

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

/* Cart footer actions */
.mragri-cart-table-footer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--cc-border);
}

.mragri-cart-nav-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
}

.btn-continue-shopping,
.btn-update-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: 1.5px solid var(--cc-border-strong) !important;
    background: #FFFFFF !important;
    color: var(--cc-heading) !important;
    transition: all 0.22s ease !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
}

.btn-continue-shopping:hover {
    border-color: var(--cc-accent) !important;
    color: var(--cc-accent) !important;
}

.btn-update-cart {
    background: var(--cc-accent) !important;
    border-color: var(--cc-accent) !important;
    color: #FFFFFF !important;
}

.btn-update-cart:hover {
    background: #0F4726 !important;
}

.btn-update-cart[disabled],
.btn-update-cart:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* ==========================================================================
   4. PHONE CART CARDS — tidy, properly aligned
   ========================================================================== */
@media (max-width: 767.98px) {
    .mragri-cart-table-responsive-wrap {
        overflow-x: visible !important;
    }

    table.mragri-custom-cart-table,
    table.mragri-custom-cart-table tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border: 0 !important;
    }

    table.mragri-custom-cart-table thead {
        display: none !important;
    }

    table.mragri-custom-cart-table tbody tr.cart_item {
        display: grid !important;
        grid-template-columns: 68px minmax(0, 1fr) 34px !important;
        grid-template-areas:
            "thumb title remove"
            "qty   qty   qty"
            "total total total" !important;
        column-gap: 11px !important;
        row-gap: 9px !important;
        align-items: start !important;
        padding: 13px !important;
        margin: 0 0 11px 0 !important;
        background: #FFFFFF !important;
        border: 1.5px solid var(--cc-border) !important;
        border-radius: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    table.mragri-custom-cart-table td {
        display: block !important;
        width: auto !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: left !important;
        background: transparent !important;
    }

    table.mragri-custom-cart-table td::before {
        content: none !important;
        display: none !important;
    }

    table.mragri-custom-cart-table td.product-thumbnail {
        grid-area: thumb !important;
    }

    table.mragri-custom-cart-table td.product-thumbnail .cart-item-img-box {
        width: 68px !important;
        height: 68px !important;
        border-radius: 11px !important;
        overflow: hidden !important;
        border: 1px solid var(--cc-border) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    table.mragri-custom-cart-table td.product-thumbnail .cart-item-img-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 !important;
    }

    table.mragri-custom-cart-table td.product-name {
        grid-area: title !important;
        min-width: 0 !important;
        padding-top: 1px !important;
    }

    table.mragri-custom-cart-table td.product-remove {
        grid-area: remove !important;
        justify-self: end !important;
        align-self: start !important;
    }

    table.mragri-custom-cart-table td.product-price {
        display: none !important;
    }

    table.mragri-custom-cart-table td.product-quantity {
        grid-area: qty !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding-top: 9px !important;
        border-top: 1px dashed var(--cc-border) !important;
        width: 100% !important;
    }

    table.mragri-custom-cart-table td.product-quantity::after {
        content: var(--cc-qty-label, 'Quantity') !important;
        order: -1 !important;
        font-size: 0.78rem;
        font-weight: 800;
        color: var(--cc-muted);
        line-height: 1.2;
    }

    table.mragri-custom-cart-table td.product-subtotal {
        grid-area: total !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding-top: 9px !important;
        border-top: 1px solid #F1F5F9 !important;
        width: 100% !important;
    }

    table.mragri-custom-cart-table td.product-subtotal::after {
        content: var(--cc-subtotal-label, 'Subtotal') !important;
        order: -1 !important;
        font-size: 0.78rem;
        font-weight: 800;
        color: var(--cc-muted);
        line-height: 1.2;
    }

    table.mragri-custom-cart-table td.product-subtotal .cart-subtotal-val {
        font-size: 1.04rem !important;
        text-align: right !important;
    }

    h4.cart-product-name-heading {
        font-size: 0.9rem !important;
    }

    .mragri-cart-nav-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .btn-continue-shopping,
    .btn-update-cart {
        width: 100% !important;
    }
}

/* ==========================================================================
   5. SIDEBAR SUMMARY CARDS
   ========================================================================== */
.totals-card-header,
.mragri-order-review-card .mragri-card-header {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 11px !important;
    row-gap: 6px !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    background: linear-gradient(135deg, #F4F9F2 0%, #EDF6EC 100%) !important;
    border-bottom: 1px solid var(--cc-border) !important;
    box-sizing: border-box !important;
}

.mragri-order-review-card .mragri-card-header > .card-header-icon-badge {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.mragri-order-review-card .mragri-card-header > .card-header-text {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.mragri-order-review-card .mragri-card-header > .card-header-badge {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    /* legacy rule sets margin-left:auto, which pushed it to the far right */
    margin: 0 !important;
}

.totals-card-header > .totals-header-left {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.totals-card-header > .totals-items-count {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    margin: 0 !important;
}

.totals-icon-badge,
.card-header-icon-badge {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
    background: var(--cc-accent) !important;
    color: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.86rem !important;
    flex-shrink: 0 !important;
}

h3.totals-title,
h3.mragri-card-title {
    font-size: var(--cc-title-size) !important;
    font-weight: 800 !important;
    color: var(--cc-heading) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.card-header-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.mragri-card-subtitle {
    font-size: var(--cc-small-size) !important;
    color: var(--cc-muted) !important;
    line-height: 1.4 !important;
    display: block !important;
}

.totals-items-count,
.card-header-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    color: var(--cc-accent) !important;
    background: var(--cc-accent-soft) !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.totals-content-inner {
    padding: 14px 18px 18px 18px !important;
}

.totals-content-inner .cart_totals,
.totals-content-inner .cart_totals > h2 {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.totals-content-inner .cart_totals > h2 {
    display: none !important;
}

/* Totals rows — label left, value right, always aligned */
.totals-content-inner table.shop_table,
.totals-content-inner table.shop_table tbody,
.totals-content-inner table.shop_table tr,
.totals-content-inner table.shop_table th,
.totals-content-inner table.shop_table td {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.totals-content-inner table.shop_table tr {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 9px 0 !important;
    border-bottom: 1px dashed var(--cc-border) !important;
}

.totals-content-inner table.shop_table tr:last-child {
    border-bottom: 0 !important;
}

.totals-content-inner table.shop_table th {
    font-size: var(--cc-body-size) !important;
    font-weight: 700 !important;
    color: var(--cc-text) !important;
    text-align: left !important;
    flex: 1 1 auto !important;
    width: auto !important;
}

.totals-content-inner table.shop_table td {
    font-size: var(--cc-body-size) !important;
    font-weight: 800 !important;
    color: var(--cc-heading) !important;
    text-align: right !important;
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
}

.totals-content-inner table.shop_table td::before,
.totals-content-inner table.shop_table th::before {
    content: none !important;
    display: none !important;
}

.totals-content-inner table.shop_table tr.order-total {
    margin-top: 6px !important;
    padding-top: 13px !important;
    border-top: 2px solid var(--cc-accent) !important;
    border-bottom: 0 !important;
}

.totals-content-inner table.shop_table tr.order-total th {
    font-size: 1rem !important;
    font-weight: 900 !important;
    color: var(--cc-heading) !important;
}

.totals-content-inner table.shop_table tr.order-total td,
.totals-content-inner table.shop_table tr.order-total td .amount {
    font-size: 1.24rem !important;
    font-weight: 900 !important;
    color: var(--cc-accent) !important;
}

/* Shipping method list inside totals */
.totals-content-inner ul#shipping_method,
.woocommerce-checkout-review-order-table ul#shipping_method {
    list-style: none !important;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    text-align: left !important;
}

.totals-content-inner ul#shipping_method li,
.woocommerce-checkout-review-order-table ul#shipping_method li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--cc-small-size) !important;
    line-height: 1.4 !important;
}

.totals-content-inner ul#shipping_method li label,
.woocommerce-checkout-review-order-table ul#shipping_method li label {
    margin: 0 !important;
    font-weight: 700 !important;
    color: var(--cc-text) !important;
    display: inline !important;
}

.totals-content-inner .woocommerce-shipping-destination,
.woocommerce-checkout-review-order-table .woocommerce-shipping-destination {
    font-size: 0.74rem !important;
    color: var(--cc-muted) !important;
    margin: 6px 0 0 0 !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

/* Proceed to checkout button — Perfectly Centered Across All Devices */
.wc-proceed-to-checkout {
    padding: 16px 0 0 0 !important;
    margin: 0 !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
}

.wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
a.checkout-button.button.alt,
.mragri-checkout-grand-btn {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    min-height: 52px !important;
    height: auto !important;
    padding: 15px 32px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #0F4726 0%, #165B33 55%, #25B865 100%) !important;
    color: #FFFFFF !important;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    box-shadow: 0 8px 24px -4px rgba(22, 91, 51, 0.38) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    float: none !important;
    clear: both !important;
}

/* Eliminate any unaligned default WooCommerce pseudo-arrows */
.wc-proceed-to-checkout a.checkout-button::after,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after,
.wc-proceed-to-checkout a.checkout-button::before,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::before {
    display: none !important;
    content: none !important;
}

.checkout-grand-btn-text {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.checkout-grand-btn-icon {
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    font-size: 0.8rem !important;
    transition: transform 0.25s ease, background 0.25s ease !important;
}

.wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px -4px rgba(22, 91, 51, 0.48) !important;
    color: #FFFFFF !important;
}

.wc-proceed-to-checkout a.checkout-button:hover .checkout-grand-btn-icon {
    transform: translateY(-50%) translateX(3px) !important;
    background: rgba(255, 255, 255, 0.32) !important;
}

/* ==========================================================================
   6. PROMO CODE / VOUCHER CARD — Premium Modern E-Commerce UI
   ========================================================================== */
.mragri-checkout-coupon-compact {
    padding: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    background: linear-gradient(135deg, #FFFFFF 0%, #F6FBF7 100%) !important;
    border: 1.5px dashed rgba(22, 91, 51, 0.45) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(15, 46, 27, 0.04) !important;
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mragri-checkout-coupon-compact:hover {
    border-color: var(--cc-accent) !important;
    box-shadow: 0 6px 18px rgba(22, 91, 51, 0.1) !important;
}

.mragri-coupon-toggle-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 11px 15px !important;
    background: transparent !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    transition: background 0.18s ease !important;
}

.mragri-coupon-toggle-bar:hover {
    background: rgba(22, 91, 51, 0.03) !important;
}

.coupon-toggle-left {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.coupon-toggle-left .coupon-toggle-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, rgba(22, 91, 51, 0.12) 0%, rgba(37, 184, 101, 0.22) 100%) !important;
    color: var(--cc-accent) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.88rem !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(37, 184, 101, 0.3) !important;
    box-shadow: 0 1px 3px rgba(22, 91, 51, 0.08) !important;
}

.coupon-toggle-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

.coupon-title-line {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex-wrap: wrap !important;
}

.coupon-toggle-info .coupon-toggle-text {
    font-size: 0.83rem !important;
    font-weight: 800 !important;
    color: var(--cc-heading) !important;
    line-height: 1.25 !important;
}

.coupon-badge-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 7px !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--cc-accent) !important;
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
}

.coupon-badge-tag i {
    font-size: 0.58rem !important;
    color: var(--cc-accent-2) !important;
}

.coupon-toggle-info .coupon-toggle-subtext {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: var(--cc-muted) !important;
    line-height: 1.2 !important;
}

.mragri-coupon-toggle-bar .mragri-coupon-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    color: var(--cc-accent) !important;
    text-decoration: none !important;
    padding: 6px 13px !important;
    border: 1.5px solid var(--cc-accent) !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(22, 91, 51, 0.08) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mragri-coupon-toggle-bar .mragri-coupon-toggle-btn:hover {
    background: var(--cc-accent) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(22, 91, 51, 0.2) !important;
}

.mragri-coupon-toggle-bar .mragri-coupon-toggle-btn i {
    font-size: 0.68rem !important;
    transition: transform 0.22s ease !important;
}

/* Secure Payment Icon Badge in Card Header */
.card-header-badge.card-header-secure-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(22, 91, 51, 0.12) 0%, rgba(37, 184, 101, 0.16) 100%) !important;
    color: var(--cc-accent) !important;
    border: 1.5px solid rgba(37, 184, 101, 0.35) !important;
    font-size: 0.88rem !important;
    padding: 0 !important;
    line-height: 1 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 3px rgba(15, 46, 27, 0.05) !important;
    transition: all 0.2s ease !important;
}

.card-header-badge.card-header-secure-badge:hover {
    background: var(--cc-accent) !important;
    color: #FFFFFF !important;
    border-color: var(--cc-accent) !important;
    transform: scale(1.06);
}

.mragri-checkout-coupon-compact .mragri-compact-coupon-form {
    margin: 0 !important;
    padding: 0 14px 13px 14px !important;
    border: 0 !important;
    border-top: 1px dashed rgba(22, 91, 51, 0.22) !important;
    border-radius: 0 !important;
    background: #FFFFFF !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.mragri-checkout-coupon-compact .mragri-compact-coupon-form > p {
    display: none !important;
}

.mragri-coupon-input-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding-top: 11px !important;
    width: 100% !important;
}

.mragri-coupon-input-wrap {
    position: relative !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
}

.mragri-coupon-input-wrap .coupon-field-icon {
    position: absolute !important;
    left: 12px !important;
    color: var(--cc-accent) !important;
    font-size: 0.82rem !important;
    pointer-events: none !important;
    opacity: 0.7 !important;
}

.mragri-coupon-input-wrap input.input-text {
    width: 100% !important;
    height: 40px !important;
    padding: 0 12px 0 34px !important;
    border: 1.5px solid var(--cc-border-strong) !important;
    border-radius: 10px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    color: var(--cc-heading) !important;
    background: #FAFAFA !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
}

.mragri-coupon-input-wrap input.input-text::placeholder {
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #94A3B8 !important;
}

.mragri-coupon-input-wrap input.input-text:focus {
    outline: none !important;
    background: #FFFFFF !important;
    border-color: var(--cc-accent-2) !important;
    box-shadow: 0 0 0 3px var(--cc-accent-soft) !important;
}

.mragri-coupon-input-row button.btn-apply-coupon {
    flex: 0 0 auto !important;
    height: 40px !important;
    padding: 0 20px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #0F4726 0%, #165B33 52%, #25B865 100%) !important;
    color: #FFFFFF !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    margin: 0 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(22, 91, 51, 0.25) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mragri-coupon-input-row button.btn-apply-coupon:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(22, 91, 51, 0.35) !important;
}

.mragri-coupon-input-row button.btn-apply-coupon:active {
    transform: scale(0.97) !important;
}

/* Hide WooCommerce's stock full-width coupon box everywhere on checkout */
body.woocommerce-checkout form.checkout_coupon:not(.mragri-compact-coupon-form) {
    display: none !important;
}

/* Zero out all bottom dead space in Billing & Delivery card */
.mragri-billing-card,
.mragri-billing-card #customer_details,
.mragri-billing-card .mragri-customer-fields-wrap,
.mragri-billing-card .mragri-billing-fields-wrap,
.mragri-billing-card .mragri-shipping-fields-wrap,
.mragri-billing-card .woocommerce-billing-fields,
.mragri-billing-card .woocommerce-billing-fields__field-wrapper,
.mragri-billing-card .woocommerce-shipping-fields,
.mragri-billing-card .woocommerce-shipping-fields__field-wrapper,
.mragri-billing-card .shipping_address,
.mragri-billing-card .woocommerce-additional-fields,
.mragri-billing-card .woocommerce-additional-fields__field-wrapper,
.mragri-billing-card #order_comments_field,
.mragri-billing-card #order_comments_field .woocommerce-input-wrapper,
.mragri-billing-card #order_comments,
.mragri-billing-card p.form-row:last-child,
.mragri-billing-card .clear {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.mragri-billing-card #order_comments {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

.mragri-billing-card {
    padding-bottom: 14px !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   7. CHECKOUT FORM FIELDS — proper alignment on every screen
   ========================================================================== */
.mragri-billing-card .mragri-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    padding: 0 0 14px 0 !important;
    margin: 0 0 16px 0 !important;
    border-bottom: 1px solid var(--cc-border) !important;
    background: transparent !important;
}

#customer_details.mragri-customer-fields-wrap {
    display: block !important;
    width: 100% !important;
}

.mragri-billing-fields-wrap,
.mragri-shipping-fields-wrap {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.mragri-shipping-fields-wrap:not(:empty) {
    margin-top: 16px !important;
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--cc-heading) !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 12px 14px !important;
    width: 100% !important;
}

@media (max-width: 575.98px) {
    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper,
    .woocommerce-additional-fields__field-wrapper {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

.woocommerce-billing-fields__field-wrapper > p.form-row,
.woocommerce-shipping-fields__field-wrapper > p.form-row,
.woocommerce-additional-fields__field-wrapper > p.form-row {
    grid-column: span 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    min-width: 0 !important;
}

.woocommerce-billing-fields__field-wrapper > p.form-row,
.woocommerce-shipping-fields__field-wrapper > p.form-row,
.woocommerce-additional-fields__field-wrapper > p.form-row,
p.form-row {
    float: none !important;
    clear: none !important;
}

@media (min-width: 576px) {
    .woocommerce-billing-fields__field-wrapper > p.form-row.form-row-first,
    .woocommerce-shipping-fields__field-wrapper > p.form-row.form-row-first,
    .woocommerce-additional-fields__field-wrapper > p.form-row.form-row-first {
        grid-column: 1 / 2 !important;
    }

    .woocommerce-billing-fields__field-wrapper > p.form-row.form-row-last,
    .woocommerce-shipping-fields__field-wrapper > p.form-row.form-row-last,
    .woocommerce-additional-fields__field-wrapper > p.form-row.form-row-last {
        grid-column: 2 / 3 !important;
    }
}

@media (max-width: 575.98px) {
    .woocommerce-billing-fields__field-wrapper > p.form-row.form-row-first,
    .woocommerce-billing-fields__field-wrapper > p.form-row.form-row-last,
    .woocommerce-shipping-fields__field-wrapper > p.form-row.form-row-first,
    .woocommerce-shipping-fields__field-wrapper > p.form-row.form-row-last,
    .woocommerce-additional-fields__field-wrapper > p.form-row.form-row-first,
    .woocommerce-additional-fields__field-wrapper > p.form-row.form-row-last {
        grid-column: 1 / -1 !important;
    }
}

p.form-row label {
    display: block !important;
    font-size: 0.79rem !important;
    font-weight: 800 !important;
    color: var(--cc-heading) !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    text-align: left !important;
}

p.form-row label .required {
    color: #DC2626 !important;
    text-decoration: none !important;
    border: 0 !important;
}

p.form-row .woocommerce-input-wrapper {
    display: block !important;
    width: 100% !important;
}

p.form-row input.input-text,
p.form-row textarea,
p.form-row select,
.select2-container .select2-selection--single {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border: 1.5px solid var(--cc-border-strong) !important;
    border-radius: 9px !important;
    background: #FFFFFF !important;
    font-size: 0.87rem !important;
    color: var(--cc-heading) !important;
    line-height: 40px !important;
    margin: 0 !important;
    box-shadow: none !important;
}

p.form-row textarea {
    height: auto !important;
    min-height: 82px !important;
    padding: 10px 12px !important;
    line-height: 1.5 !important;
    resize: vertical !important;
}

p.form-row input.input-text:focus,
p.form-row textarea:focus,
p.form-row select:focus {
    outline: none !important;
    border-color: var(--cc-accent-2) !important;
    box-shadow: 0 0 0 3px var(--cc-accent-soft) !important;
}

/* Select2 alignment (country/state pickers) */
.select2-container .select2-selection--single {
    display: flex !important;
    align-items: center !important;
    line-height: normal !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    line-height: normal !important;
    color: var(--cc-heading) !important;
    font-size: 0.87rem !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
    right: 6px !important;
}

/* Checkboxes (ship to different address, terms) */
p.form-row.woocommerce-validated input.input-text {
    border-color: #86EFAC !important;
}

p.form-row.woocommerce-invalid input.input-text {
    border-color: #FCA5A5 !important;
}

#ship-to-different-address {
    display: flex !important;
    align-items: center !important;
    margin: 0 0 12px 0 !important;
}

#ship-to-different-address label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: var(--cc-heading) !important;
    cursor: pointer !important;
    margin: 0 !important;
}

#ship-to-different-address input[type="checkbox"],
.woocommerce-form__input-checkbox,
p.form-row input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    border: 2px solid var(--cc-border-strong) !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
    cursor: pointer !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 11px 11px !important;
    transition: all 0.18s ease !important;
    vertical-align: middle !important;
}

#ship-to-different-address input[type="checkbox"]:checked,
.woocommerce-form__input-checkbox:checked,
p.form-row input[type="checkbox"]:checked {
    background-color: var(--cc-accent) !important;
    border-color: var(--cc-accent) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3 8.4l3.2 3.1L13 4.8'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   8. ORDER REVIEW TABLE
   ========================================================================== */
#order_review.woocommerce-checkout-review-order {
    padding: 14px 18px 18px 18px !important;
    width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
}

table.woocommerce-checkout-review-order-table,
table.woocommerce-checkout-review-order-table tbody,
table.woocommerce-checkout-review-order-table tfoot,
table.woocommerce-checkout-review-order-table thead,
table.woocommerce-checkout-review-order-table tr,
table.woocommerce-checkout-review-order-table th,
table.woocommerce-checkout-review-order-table td {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

table.woocommerce-checkout-review-order-table thead {
    display: none !important;
}

table.woocommerce-checkout-review-order-table tr {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 9px 0 !important;
    border-bottom: 1px dashed var(--cc-border) !important;
}

table.woocommerce-checkout-review-order-table tbody tr:last-child {
    border-bottom: 1.5px solid var(--cc-border) !important;
}

table.woocommerce-checkout-review-order-table tfoot tr:last-child {
    border-bottom: 0 !important;
}

table.woocommerce-checkout-review-order-table td::before,
table.woocommerce-checkout-review-order-table th::before {
    content: none !important;
    display: none !important;
}

table.woocommerce-checkout-review-order-table td.product-name,
table.woocommerce-checkout-review-order-table th {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: left !important;
    font-size: var(--cc-body-size) !important;
    font-weight: 700 !important;
    color: var(--cc-text) !important;
    line-height: 1.42 !important;
    word-break: break-word !important;
    white-space: normal !important;
}

table.woocommerce-checkout-review-order-table td.product-name {
    font-weight: 800 !important;
    color: var(--cc-heading) !important;
}

table.woocommerce-checkout-review-order-table td.product-name .product-quantity {
    display: inline-block !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    color: var(--cc-accent) !important;
    background: var(--cc-accent-soft) !important;
    border-radius: 999px !important;
    padding: 1px 8px !important;
    margin-left: 6px !important;
    width: auto !important;
    vertical-align: middle !important;
}

table.woocommerce-checkout-review-order-table td.product-total,
table.woocommerce-checkout-review-order-table td {
    flex: 0 0 auto !important;
    width: auto !important;
    text-align: right !important;
    font-size: var(--cc-body-size) !important;
    font-weight: 800 !important;
    color: var(--cc-heading) !important;
    white-space: nowrap !important;
}

table.woocommerce-checkout-review-order-table tr.order-total {
    align-items: baseline !important;
    margin-top: 6px !important;
    padding-top: 13px !important;
    border-top: 2px solid var(--cc-accent) !important;
    border-bottom: 0 !important;
}

table.woocommerce-checkout-review-order-table tr.order-total th {
    font-size: 1rem !important;
    font-weight: 900 !important;
    color: var(--cc-heading) !important;
}

table.woocommerce-checkout-review-order-table tr.order-total td,
table.woocommerce-checkout-review-order-table tr.order-total td .amount {
    font-size: 1.24rem !important;
    font-weight: 900 !important;
    color: var(--cc-accent) !important;
}

/* Shipping row needs to wrap, not stay nowrap */
table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
    align-items: flex-start !important;
}

table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
    white-space: normal !important;
    text-align: right !important;
    max-width: 62% !important;
}

/* ==========================================================================
   9. PAYMENT METHODS — compact, modern, with a REAL tick mark
   The tick is drawn with an inline SVG background image rather than a
   pseudo-element, because ::after on a replaced <input> element is not
   reliably painted across browsers — that was why no tick appeared.
   ========================================================================== */
#payment.woocommerce-checkout-payment {
    background: #FBFDFA !important;
    border: 1px solid var(--cc-border) !important;
    border-radius: 12px !important;
    padding: 13px !important;
    margin: 14px 0 0 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#payment ul.payment_methods {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}

#payment ul.payment_methods li.wc_payment_method {
    /* The radio input is a SIBLING of the label in WooCommerce markup, so the
       <li> itself must be the flex container — otherwise the radio renders on
       its own line above the label. */
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    background: #FFFFFF !important;
    border: 1.5px solid var(--cc-border-strong) !important;
    border-radius: 11px !important;
    /* Reduced height as requested */
    padding: 9px 12px !important;
    margin: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}

#payment ul.payment_methods li.wc_payment_method:hover {
    border-color: var(--cc-accent-2) !important;
    transform: none !important;
    box-shadow: none !important;
}

#payment ul.payment_methods li.wc_payment_method.is-selected,
#payment ul.payment_methods li.wc_payment_method:has(input[type="radio"]:checked) {
    border-color: var(--cc-accent) !important;
    background: #F4FBF6 !important;
    box-shadow: 0 0 0 1px var(--cc-accent) inset !important;
}

#payment ul.payment_methods li.wc_payment_method > label {
    order: 2 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    color: var(--cc-heading) !important;
    line-height: 1.35 !important;
    cursor: pointer !important;
    text-align: left !important;
    min-height: 26px !important;
}

#payment ul.payment_methods li.wc_payment_method > label img {
    max-height: 21px !important;
    width: auto !important;
    margin: 0 0 0 auto !important;
    float: none !important;
    display: inline-block !important;
}

#payment ul.payment_methods li.wc_payment_method > label .payment_method_description,
#payment ul.payment_methods li.wc_payment_method > label small {
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    color: var(--cc-muted) !important;
}

/* The radio control */
#payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
    order: 1 !important;
    flex: 0 0 auto !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border: 2px solid var(--cc-border-strong) !important;
    border-radius: 50% !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 12px 12px !important;
    outline: none !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    position: relative !important;
    float: none !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

#payment ul.payment_methods li.wc_payment_method > input[type="radio"]:hover {
    border-color: var(--cc-accent-2) !important;
    transform: none !important;
}

#payment ul.payment_methods li.wc_payment_method > input[type="radio"]:checked {
    background-color: var(--cc-accent) !important;
    border-color: var(--cc-accent) !important;
    box-shadow: 0 0 0 3px var(--cc-accent-soft) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3 8.4l3.2 3.1L13 4.8'/%3E%3C/svg%3E") !important;
}

#payment ul.payment_methods li.wc_payment_method > input[type="radio"]:focus-visible {
    box-shadow: 0 0 0 3px var(--cc-accent-soft) !important;
}

/* Neutralise the old unreliable pseudo-element tick */
#payment ul.payment_methods li.wc_payment_method input[type="radio"]::after,
#payment ul.payment_methods li.wc_payment_method input[type="radio"]::before {
    content: none !important;
    display: none !important;
}

/* Gateway description box */
#payment div.payment_box {
    order: 3 !important;
    flex: 0 0 100% !important;
    background: #FFFFFF !important;
    border: 1px solid var(--cc-border) !important;
    border-left: 3px solid var(--cc-accent) !important;
    border-radius: 8px !important;
    padding: 9px 12px !important;
    margin: 8px 0 0 0 !important;
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
    color: var(--cc-text) !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#payment div.payment_box::before,
#payment div.payment_box::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
}

#payment div.payment_box p {
    margin: 0 !important;
}

#payment .woocommerce-privacy-policy-text,
#payment .woocommerce-terms-and-conditions-wrapper {
    margin: 11px 0 0 0 !important;
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
    color: var(--cc-muted) !important;
    text-align: left !important;
}

#payment .woocommerce-terms-and-conditions-wrapper p.form-row {
    margin: 8px 0 0 0 !important;
}

#payment .woocommerce-terms-and-conditions-wrapper label.checkbox {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: var(--cc-text) !important;
    line-height: 1.5 !important;
}

#payment .form-row.place-order {
    padding: 13px 0 0 0 !important;
    margin: 0 !important;
}

#place_order {
    display: block !important;
    width: 100% !important;
    padding: 14px 20px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #0F4726 0%, #165B33 55%, #25B865 100%) !important;
    color: #FFFFFF !important;
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
    transition: filter 0.22s ease, transform 0.22s ease !important;
}

#place_order:hover {
    filter: brightness(1.07) !important;
    transform: translateY(-1px) !important;
}


/* Legacy rules put a 2px border-top on .order-total th/td. Because the row is a
   flex container with a gap, that drew as two disconnected line segments either
   side of the gap. These selectors outrank them so the row border (on the <tr>)
   is the only line drawn. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td,
table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
    border: 0 !important;
}

body.woocommerce-cart .totals-content-inner .cart_totals table.shop_table th,
body.woocommerce-cart .totals-content-inner .cart_totals table.shop_table td,
.totals-content-inner .cart_totals tr.order-total th,
.totals-content-inner .cart_totals tr.order-total td {
    border: 0 !important;
}

/* ==========================================================================
   10. TRUST BADGES CARD
   ========================================================================== */
.mragri-trust-badges-card {
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.trust-badge-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.trust-badge-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.88rem !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
}

.trust-badge-icon.icon-shield {
    background: rgba(22, 91, 51, 0.1) !important;
    color: var(--cc-accent) !important;
}

.trust-badge-icon.icon-sprout {
    background: rgba(37, 184, 101, 0.13) !important;
    color: #15803D !important;
}

.trust-badge-icon.icon-truck {
    background: rgba(234, 151, 30, 0.14) !important;
    color: #B45309 !important;
}

.trust-badge-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

h4.trust-badge-title {
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    color: var(--cc-heading) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.33 !important;
}

span.trust-badge-desc {
    display: block !important;
    font-size: 0.74rem !important;
    font-weight: 500 !important;
    color: var(--cc-muted) !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

/* ==========================================================================
   11. HEADER BANNER & STEP TRACKER — compact
   ========================================================================== */
.mragri-checkout-header {
    padding: 22px 0 18px 0 !important;
    text-align: center !important;
}

.checkout-header-title-wrap {
    margin-bottom: 14px !important;
}

h1.checkout-header-title {
    font-size: 1.85rem !important;
    font-weight: 900 !important;
    color: var(--cc-heading) !important;
    margin: 6px 0 0 0 !important;
    line-height: 1.2 !important;
}

.mragri-step-tracker {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
}

.step-tracker-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    text-decoration: none !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

.step-tracker-line {
    flex: 1 1 auto !important;
    height: 2px !important;
    background: #D6E2D6 !important;
    margin: 0 10px !important;
    min-width: 18px !important;
}

.step-tracker-line.step-active-line {
    background: var(--cc-accent-2) !important;
}

.step-num {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 2px solid #D6E2D6 !important;
    color: var(--cc-muted) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
}

.step-tracker-item.step-active .step-num {
    background: var(--cc-accent) !important;
    border-color: var(--cc-accent) !important;
    color: #FFFFFF !important;
}

.step-tracker-item.step-completed .step-num {
    background: var(--cc-accent-2) !important;
    border-color: var(--cc-accent-2) !important;
    color: #FFFFFF !important;
}

.step-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    text-align: left !important;
    min-width: 0 !important;
}

.step-badge {
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--cc-muted) !important;
    line-height: 1.4 !important;
}

.step-label {
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    color: var(--cc-heading) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   PHONE (max-width: 767.98px) — Compact vertical rhythm, zero wasted gaps
   ========================================================================== */
@media (max-width: 767.98px) {
    .mragri-checkout-header {
        padding: 14px 0 10px 0 !important;
    }

    .checkout-header-title-wrap {
        margin-bottom: 8px !important;
    }

    h1.checkout-header-title {
        font-size: 1.32rem !important;
        margin: 4px 0 0 0 !important;
    }

    .step-text {
        display: none !important;
    }

    .mragri-step-tracker {
        max-width: 220px !important;
    }

    .step-num {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: 0.74rem !important;
    }

    .step-tracker-line {
        margin: 0 5px !important;
        min-width: 14px !important;
    }

    .mragri-cart-main-wrap,
    .mragri-checkout-main-wrap {
        padding: 10px 0 24px 0 !important;
    }

    .mragri-cart-main-wrap > .section-container,
    .mragri-checkout-main-wrap > .section-container,
    .mragri-checkout-header > .section-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Checkout Containers & Vertical Gaps */
    .mragri-checkout-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    .mragri-billing-card {
        padding: 11px 11px 8px 11px !important;
        border-radius: 13px !important;
        margin: 0 !important;
    }

    .mragri-billing-card .mragri-card-header {
        padding: 0 0 8px 0 !important;
        margin: 0 0 10px 0 !important;
        gap: 8px !important;
    }

    .card-header-icon-badge {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: 0.76rem !important;
        border-radius: 8px !important;
    }

    h3.mragri-card-title,
    h3.totals-title {
        font-size: 0.95rem !important;
        line-height: 1.25 !important;
    }

    span.mragri-card-subtitle {
        font-size: 0.72rem !important;
    }

    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper,
    .woocommerce-additional-fields__field-wrapper {
        gap: 9px !important;
        margin-bottom: 0 !important;
    }

    .mragri-customer-fields-wrap,
    .mragri-billing-fields-wrap,
    .mragri-shipping-fields-wrap {
        margin-bottom: 0 !important;
    }

    p.form-row {
        gap: 4px !important;
        margin: 0 !important;
    }

    p.form-row label {
        font-size: 0.76rem !important;
    }

    p.form-row input.input-text,
    p.form-row textarea,
    p.form-row select,
    .select2-container .select2-selection--single {
        height: 38px !important;
        min-height: 38px !important;
        font-size: 16px !important;
        padding: 0 10px !important;
        border-radius: 8px !important;
    }

    p.form-row textarea {
        min-height: 60px !important;
        padding: 8px 10px !important;
        margin-bottom: 0 !important;
    }

    .woocommerce-billing-fields h3,
    .woocommerce-shipping-fields h3,
    .woocommerce-additional-fields h3 {
        margin: 8px 0 6px 0 !important;
        font-size: 0.88rem !important;
        padding-bottom: 2px !important;
    }

    #ship-to-different-address {
        margin: 6px 0 6px 0 !important;
        padding-bottom: 2px !important;
    }

    /* Sidebar Containers & Vertical Gaps */
    .mragri-checkout-sidebar {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    /* Promo code / Voucher container */
    .mragri-checkout-coupon-compact {
        border-radius: 12px !important;
        margin: 0 !important;
    }

    .mragri-coupon-toggle-bar {
        padding: 8px 11px !important;
        column-gap: 8px !important;
    }

    .mragri-coupon-toggle-bar .coupon-toggle-icon {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        font-size: 0.7rem !important;
    }

    .mragri-coupon-toggle-bar .coupon-toggle-text {
        font-size: 0.74rem !important;
    }

    .mragri-coupon-toggle-bar .mragri-coupon-toggle-btn {
        font-size: 0.72rem !important;
        padding: 4px 9px !important;
    }

    .mragri-checkout-coupon-compact .mragri-compact-coupon-form {
        padding: 0 10px 9px 10px !important;
    }

    .mragri-coupon-input-row {
        gap: 6px !important;
        padding-top: 8px !important;
    }

    .mragri-coupon-input-row input.input-text {
        height: 38px !important;
        font-size: 16px !important;
        padding: 0 10px !important;
        border-radius: 8px !important;
    }

    .mragri-coupon-input-row button.btn-apply-coupon {
        height: 38px !important;
        padding: 0 14px !important;
        font-size: 0.78rem !important;
        border-radius: 8px !important;
    }

    /* Order Review & Payment container */
    .mragri-order-review-card {
        border-radius: 13px !important;
        margin: 0 !important;
    }

    .mragri-order-review-card .mragri-card-header {
        padding: 9px 11px !important;
        gap: 8px !important;
    }

    #order_review.woocommerce-checkout-review-order {
        padding: 8px 11px 11px 11px !important;
    }

    table.woocommerce-checkout-review-order-table tr {
        padding: 6px 0 !important;
        gap: 8px !important;
    }

    table.woocommerce-checkout-review-order-table tr.order-total {
        margin-top: 4px !important;
        padding-top: 8px !important;
    }

    /* Payment section within Order Review */
    #payment.woocommerce-checkout-payment {
        margin: 8px 0 0 0 !important;
        padding: 8px 9px !important;
        border-radius: 10px !important;
    }

    #payment ul.payment_methods {
        gap: 5px !important;
    }

    #payment ul.payment_methods li.wc_payment_method {
        padding: 7px 9px !important;
        gap: 8px !important;
        border-radius: 9px !important;
    }

    #payment ul.payment_methods li.wc_payment_method > label {
        font-size: 0.82rem !important;
        min-height: 22px !important;
    }

    #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
    }

    #payment div.payment_box {
        padding: 7px 9px !important;
        margin: 6px 0 0 0 !important;
        font-size: 0.74rem !important;
        border-radius: 7px !important;
    }

    #payment .woocommerce-privacy-policy-text,
    #payment .woocommerce-terms-and-conditions-wrapper {
        margin: 7px 0 0 0 !important;
        font-size: 0.72rem !important;
    }

    #payment .form-row.place-order {
        padding: 9px 0 0 0 !important;
    }

    #place_order {
        padding: 12px 18px !important;
        font-size: 0.94rem !important;
        border-radius: 10px !important;
    }

    /* Cart Page Mobile Container Rhythm */
    .mragri-cart-grid-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    .mragri-cart-sidebar {
        display: flex !important;
        flex-direction: column !important;
        gap: 9px !important;
        margin: 0 !important;
    }

    .mragri-cart-table-card {
        padding: 11px 10px !important;
        border-radius: 13px !important;
        margin: 0 !important;
    }

    table.mragri-custom-cart-table tbody tr.cart_item {
        padding: 9px 10px !important;
        margin: 0 0 7px 0 !important;
        row-gap: 6px !important;
        border-radius: 11px !important;
    }

    table.mragri-custom-cart-table td.product-thumbnail .cart-item-img-box {
        width: 62px !important;
        height: 62px !important;
    }

    table.mragri-custom-cart-table td.product-quantity {
        padding-top: 7px !important;
    }

    table.mragri-custom-cart-table td.product-subtotal {
        padding-top: 7px !important;
    }

    .mragri-cart-table-footer {
        margin-top: 9px !important;
        padding-top: 9px !important;
        gap: 9px !important;
    }


    .mragri-cart-nav-actions {
        width: 100% !important;
        flex-direction: column !important;
        gap: 7px !important;
    }

    .btn-continue-shopping,
    .btn-update-cart {
        width: 100% !important;
        height: 38px !important;
        padding: 0 14px !important;
        font-size: 0.82rem !important;
    }

    .mragri-cart-totals-card {
        border-radius: 13px !important;
        margin: 0 !important;
    }

    .totals-card-header {
        padding: 9px 11px !important;
        gap: 8px !important;
    }

    .totals-content-inner {
        padding: 8px 11px 11px 11px !important;
    }

    table.shop_table.shop_table_responsive tr {
        padding: 7px 0 !important;
    }

    table.shop_table.shop_table_responsive tr.order-total {
        margin-top: 4px !important;
        padding-top: 8px !important;
    }

    .wc-proceed-to-checkout {
        margin-top: 9px !important;
    }

    .wc-proceed-to-checkout a.checkout-button {
        padding: 11px 18px !important;
        font-size: 0.92rem !important;
        border-radius: 10px !important;
    }

    .mragri-trust-badges-card {
        padding: 9px 11px !important;
        border-radius: 13px !important;
        margin: 0 !important;
    }

    .trust-badges-list {
        gap: 7px !important;
    }

    .trust-badge-item {
        gap: 8px !important;
    }
}

/* ==========================================================================
   TABLET (768px to 991.98px) — Balanced compact vertical rhythm
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
    .mragri-checkout-header {
        padding: 16px 0 12px 0 !important;
    }

    .mragri-cart-main-wrap,
    .mragri-checkout-main-wrap {
        padding: 13px 0 28px 0 !important;
    }

    .mragri-cart-table-card {
        padding: 15px !important;
        margin: 0 !important;
        border-radius: 14px !important;
    }

    .mragri-billing-card {
        padding: 14px 15px 10px 15px !important;
        margin: 0 !important;
        border-radius: 14px !important;
    }

    .mragri-billing-card .mragri-card-header {
        padding: 0 0 9px 0 !important;
        margin: 0 0 11px 0 !important;
    }

    .mragri-checkout-coupon-compact {
        border-radius: 13px !important;
        margin: 0 !important;
    }

    .mragri-order-review-card {
        border-radius: 14px !important;
        margin: 0 !important;
    }

    .mragri-order-review-card .mragri-card-header {
        padding: 10px 13px !important;
    }

    #order_review.woocommerce-checkout-review-order {
        padding: 10px 13px 13px 13px !important;
    }

    #payment.woocommerce-checkout-payment {
        margin: 9px 0 0 0 !important;
        padding: 10px 11px !important;
        border-radius: 11px !important;
    }

    #payment ul.payment_methods {
        gap: 6px !important;
    }

    #payment ul.payment_methods li.wc_payment_method {
        padding: 8px 11px !important;
    }

    #payment .form-row.place-order {
        padding: 10px 0 0 0 !important;
    }

    #place_order {
        padding: 13px 20px !important;
        border-radius: 11px !important;
    }

    .totals-card-header {
        padding: 10px 13px !important;
    }

    .totals-content-inner {
        padding: 10px 13px 13px 13px !important;
    }

    .mragri-cart-totals-card,
    .mragri-trust-badges-card {
        border-radius: 14px !important;
        margin: 0 !important;
    }

    table.mragri-custom-cart-table {
        min-width: 540px !important;
    }

    .step-label {
        font-size: 0.72rem !important;
    }
}

/* ==========================================================================
   12. NOTICES & EMPTY CART
   ========================================================================== */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
    border-radius: 11px !important;
    border: 1px solid var(--cc-border) !important;
    border-left: 4px solid var(--cc-accent-2) !important;
    background: #F6FBF5 !important;
    padding: 12px 15px !important;
    margin: 0 0 16px 0 !important;
    font-size: 0.86rem !important;
    line-height: 1.5 !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.woocommerce-notices-wrapper .woocommerce-error {
    border-left-color: #DC2626 !important;
    background: #FEF5F5 !important;
}

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

.woocommerce-notices-wrapper .button {
    margin-left: auto !important;
    padding: 8px 15px !important;
    border-radius: 8px !important;
    background: var(--cc-accent) !important;
    color: #FFFFFF !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.mragri-empty-cart-card {
    background: var(--cc-card-bg);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    padding: 44px 26px !important;
    text-align: center !important;
    max-width: 620px !important;
    margin: 0 auto !important;
}

.empty-cart-icon-wrap {
    width: 74px !important;
    height: 74px !important;
    margin: 0 auto 16px auto !important;
    border-radius: 50% !important;
    background: var(--cc-accent-soft) !important;
    color: var(--cc-accent) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.7rem !important;
}

h2.empty-cart-title {
    font-size: 1.32rem !important;
    font-weight: 800 !important;
    color: var(--cc-heading) !important;
    margin: 0 0 9px 0 !important;
}

p.empty-cart-desc {
    font-size: 0.9rem !important;
    color: var(--cc-muted) !important;
    line-height: 1.6 !important;
    margin: 0 0 20px 0 !important;
}

a.btn-return-shop {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 13px 24px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #0F4726 0%, #165B33 55%, #25B865 100%) !important;
    color: #FFFFFF !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}