/**
 * Tapgrix Child — Premium WooCommerce Cart
 *
 * Parent Theme: Blocksy
 * Store: Tapgrix — GPCB Pay Demo Store
 *
 * SCOPE:
 * Native WooCommerce Cart Block.
 *
 * RESPONSIBILITIES:
 * - Responsive cart layout
 * - Product images and information
 * - Quantity control presentation
 * - Native WooCommerce totals
 * - Coupons and shipping presentation
 * - Proceed to Checkout appearance
 * - Empty cart and related products
 *
 * SECURITY:
 * - CSS presentation only
 * - No cart mutations
 * - No Store API modifications
 * - No checkout interception
 * - No changes to GPCB Pay Payment Core
 *
 * Transitional tnx-* informational classes
 * are retained for optional compatibility.
 */

/* =========================================================
   1. CART DESIGN TOKENS
   ========================================================= */

body.woocommerce-cart {

    --tgx-cart-ink: #061126;
    --tgx-cart-navy: #0a1c3a;

    --tgx-cart-blue: #2563eb;
    --tgx-cart-blue-dark: #1d4ed8;
    --tgx-cart-cyan: #22d3ee;

    --tgx-cart-muted: #60758c;
    --tgx-cart-line: #dfe9f5;
    --tgx-cart-soft: #f5f9ff;

    --tgx-cart-radius: 20px;
}

/* =========================================================
   2. PAGE BACKGROUND
   ========================================================= */

body.woocommerce-cart:has(
    .wp-block-woocommerce-cart
) .site-main {

    background:

        radial-gradient(
            ellipse at 90% 13%,
            rgba(37, 99, 235, 0.07),
            transparent 46%
        ),

        linear-gradient(
            180deg,
            #fafcff,
            #f4f9ff
        );
}

/* =========================================================
   3. PAGE TITLE
   ========================================================= */

body.woocommerce-cart .entry-header :is(
    .entry-title,
    .page-title
) {

    color: var(--tgx-cart-ink);

    font-size: clamp(
        2.1rem,
        4.5vw,
        3.3rem
    );

    font-weight: 800;

    letter-spacing: -0.04em;
    line-height: 1.12;
}

/* =========================================================
   4. CART INTRODUCTION
   ========================================================= */

/*
 * Optional presentation element.
 * Does not create additional content.
 */

body.woocommerce-cart :is(
    .tgx-cart-lead,
    .tnx-cart-lead
) {

    max-width: 1260px;

    margin: 0 auto 29px;

    color: var(--tgx-cart-muted);

    font-size: clamp(
        0.96rem,
        1.4vw,
        1.08rem
    );

    line-height: 1.75;
}

body.woocommerce-cart :is(
    .tgx-cart-lead,
    .tnx-cart-lead
) p {

    margin: 0;
}

/* =========================================================
   5. NATIVE CART WRAPPER
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart {

    box-sizing: border-box;

    width: 100%;
    max-width: 1260px;

    margin-inline: auto;

    color: var(--tgx-cart-ink);
}

/* =========================================================
   6. RESPONSIVE CART FOUNDATION
   ========================================================= */

/*
 * Avoid percentage columns + additional gap
 * overflowing the available cart width.
 *
 * The main column can shrink.
 * The sidebar occupies no more than its
 * allocated space.
 *
 * WooCommerce still owns cart functionality.
 */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart.wc-block-components-sidebar-layout {

    display: flex;
    flex-wrap: nowrap;

    gap: 24px;

    align-items: flex-start;
}

/* =========================================================
   7. PREMIUM CART SURFACES
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart :is(
    .wc-block-cart__main,
    .wc-block-cart__sidebar
) {

    box-sizing: border-box;

    min-width: 0;

    border: 1px solid
        var(--tgx-cart-line);

    border-radius:
        var(--tgx-cart-radius);

    background: #ffffff;

    box-shadow:

        0 4px 12px
        rgba(6, 17, 38, 0.025),

        0 18px 42px
        rgba(6, 17, 38, 0.04);
}

/* =========================================================
   8. CART MAIN COLUMN
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart .wc-block-cart__main {

    flex: 1 1 0;

    width: auto;
    max-width: none;
    min-width: 0;

    margin: 0;

    padding: clamp(
        16px,
        2.3vw,
        28px
    );
}

/* =========================================================
   9. CART SIDEBAR
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart .wc-block-cart__sidebar {

    flex: 0 0 min(35%, 415px);

    width: min(35%, 415px);
    max-width: none;
    min-width: 0;

    margin: 0;

    padding: clamp(
        19px,
        2.2vw,
        27px
    );
}

/* =========================================================
   10. CART ITEMS TABLE
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart-items {

    width: 100%;

    margin: 0;

    border: 0;
}

/* Table Headings */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart-items thead th {

    padding: 10px 12px 17px;

    border-bottom: 1px solid
        var(--tgx-cart-line);

    color: #7589a2;

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}

/* Cart Rows */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart-items
.wc-block-cart-items__row > td {

    padding-top: 24px;
    padding-bottom: 24px;

    border-bottom-color:
        var(--tgx-cart-line);

    vertical-align: middle;
}

/* =========================================================
   11. PRODUCT IMAGE CONTAINER
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart-item__image a {

    display: block;

    border-radius: 14px;
}

/* =========================================================
   12. PRODUCT IMAGE
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart-item__image img {

    display: block;

    box-sizing: border-box;

    width: 100%;
    max-width: 130px;

    height: auto;

    aspect-ratio: 1;

    padding: 8px;

    border: 1px solid #edf2f8;
    border-radius: 14px;

    background: linear-gradient(
        140deg,
        #ffffff,
        #f5f9ff
    );

    object-fit: contain;

    transition:
        border-color 180ms ease,
        transform 180ms ease;
}

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart-item__image a:hover img {

    border-color:
        rgba(37, 99, 235, 0.3);

    transform: scale(1.025);
}

/* =========================================================
   13. PRODUCT NAME
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-components-product-name {

    color: var(--tgx-cart-ink);

    font-size: clamp(
        0.94rem,
        1.4vw,
        1.03rem
    );

    font-weight: 800;
    line-height: 1.5;

    text-decoration: none;

    overflow-wrap: anywhere;
}

body.woocommerce-cart
.wp-block-woocommerce-cart
a.wc-block-components-product-name:hover {

    color: var(--tgx-cart-blue-dark);
}

/* =========================================================
   14. PRODUCT PRICE
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart :is(
    .wc-block-components-product-price,
    .wc-block-cart-item__total
    .wc-block-components-product-price
) {

    color: var(--tgx-cart-ink);

    font-weight: 800;
}

/* =========================================================
   15. PRODUCT DETAILS
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-components-product-details {

    color: var(--tgx-cart-muted);

    font-size: 0.82rem;
    line-height: 1.6;
}

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart-item__total
.wc-block-components-product-price {

    font-size: 1.1rem;
}

/* =========================================================
   16. QUANTITY SELECTOR
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-components-quantity-selector {

    min-height: 45px;

    border: 1px solid #cddded;
    border-radius: 10px;

    background: #ffffff;

    box-shadow: none;
}

/* Quantity Input */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-components-quantity-selector input {

    color: var(--tgx-cart-ink);

    font-weight: 750;
}

/* Quantity Buttons */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-components-quantity-selector button {

    color: #315779;

    transition:
        color 160ms ease,
        background-color 160ms ease;
}

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-components-quantity-selector
button:hover:not(:disabled) {

    background: #eff6ff;

    color: var(--tgx-cart-blue-dark);
}

/* =========================================================
   17. REMOVE ITEM
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart-item__remove-link {

    color: #647b96;

    font-size: 0.81rem;
    font-weight: 700;

    text-decoration: underline;
    text-underline-offset: 3px;
}

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart-item__remove-link:hover {

    color: #b42333;
}

/* =========================================================
   18. ORDER SUMMARY HEADING
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart :is(
    .wc-block-cart__totals-title,
    .wp-block-woocommerce-cart-order-summary-heading-block
) {

    color: var(--tgx-cart-ink);

    font-size: clamp(
        1.25rem,
        2vw,
        1.5rem
    );

    font-weight: 800;

    letter-spacing: -0.025em;

    text-transform: none;
}

/* =========================================================
   19. ORDER SUMMARY DIVIDERS
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart__sidebar
.wc-block-components-totals-wrapper {

    border-color: var(--tgx-cart-line);
}

/* =========================================================
   20. ORDER TOTALS
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart__sidebar :is(
    .wc-block-components-totals-item__label,
    .wc-block-components-totals-item__value
) {

    color: #304b6c;

    font-size: 0.94rem;
    line-height: 1.55;
}

/* =========================================================
   21. GRAND TOTAL
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart__sidebar
.wc-block-components-totals-footer-item {

    padding-top: 17px;
}

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart__sidebar
.wc-block-components-totals-footer-item :is(
    .wc-block-components-totals-item__label,
    .wc-block-components-totals-item__value
) {

    color: var(--tgx-cart-ink);

    font-size: 1.13rem;
    font-weight: 850;
}

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart__sidebar
.wc-block-components-totals-footer-item
.wc-block-components-totals-item__value {

    color: var(--tgx-cart-blue-dark);
}

/* =========================================================
   22. COUPONS
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart__sidebar
.wc-block-components-totals-coupon {

    color: #315779;
}

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart__sidebar :is(
    .wc-block-components-text-input input,
    .wc-block-components-combobox-control input
) {

    border-color: #cddded;

    border-radius: 9px;
}

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart__sidebar
.wc-block-components-totals-coupon__button {

    border-radius: 8px;

    color: var(--tgx-cart-blue-dark);

    font-weight: 800;
}

/* =========================================================
   23. NATIVE CART NOTICES
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-components-notice-banner {

    border-radius: 11px;
}

/* =========================================================
   24. PROCEED TO CHECKOUT
   ========================================================= */

/*
 * Styling only.
 *
 * This selector targets the native
 * WooCommerce Cart Block checkout action.
 *
 * It does not change:
 * - link destination
 * - button disabled state
 * - cart validation
 * - shipping calculation
 * - payment authorization
 */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart__submit-container :is(
    .wc-block-cart__submit-button,
    .wc-block-components-button
) {

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 56px;

    padding: 14px 22px;

    border: 0;
    border-radius: 11px;

    background: linear-gradient(
        125deg,
        #3b82f6,
        #2563eb
    );

    color: #ffffff;

    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.3;

    text-decoration: none;

    box-shadow:
        0 10px 25px
        rgba(37, 99, 235, 0.18);

    transition:
        transform 180ms ease,
        filter 180ms ease,
        box-shadow 180ms ease;
}

/* Checkout Button Hover */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart__submit-container :is(
    .wc-block-cart__submit-button,
    .wc-block-components-button
):not(:disabled):not([aria-disabled="true"]):hover {

    transform: translateY(-2px);

    filter: brightness(1.06);

    color: #ffffff;

    box-shadow:
        0 13px 30px
        rgba(37, 99, 235, 0.25);
}

/* Disabled Checkout Appearance */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wc-block-cart__submit-container
.wc-block-components-button:is(
    :disabled,
    [aria-disabled="true"]
) {

    opacity: 0.65;

    cursor: not-allowed;

    box-shadow: none;

    transform: none;
}

/* =========================================================
   25. KEYBOARD ACCESSIBILITY
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart :is(
    a,
    button,
    input
):focus-visible,

body.woocommerce-cart :is(
    .tgx-cart-extras,
    .tnx-cart-extras
) a:focus-visible {

    outline: 3px solid #22d3ee;

    outline-offset: 3px;
}

/* =========================================================
   26. EMPTY CART
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart :is(
    .wc-block-cart__empty-cart,
    .wp-block-woocommerce-empty-cart-block
) {

    padding: clamp(
        24px,
        5vw,
        60px
    );

    border: 1px solid
        var(--tgx-cart-line);

    border-radius:
        var(--tgx-cart-radius);

    background: #ffffff;

    text-align: center;
}

/* =========================================================
   27. CART CROSS-SELLS
   ========================================================= */

body.woocommerce-cart
.wp-block-woocommerce-cart
.wp-block-woocommerce-cart-cross-sells-block {

    margin-top: 28px;
}

/* =========================================================
   28. OPTIONAL INFORMATION PANEL
   ========================================================= */

/*
 * Legacy tnx-* classes are supported.
 *
 * This panel is only styled if a separate
 * PHP presentation component renders it.
 *
 * No panel is automatically created here.
 */

body.woocommerce-cart :is(
    .tgx-cart-extras,
    .tnx-cart-extras
) {

    max-width: 1260px;

    margin: 24px auto 8px;

    padding: clamp(
        20px,
        3vw,
        32px
    );

    border: 1px solid
        var(--tgx-cart-line);

    border-radius:
        var(--tgx-cart-radius);

    background: #ffffff;

    box-shadow:
        0 14px 35px
        rgba(6, 17, 38, 0.035);
}

/* =========================================================
   29. OPTIONAL PANEL HEADINGS
   ========================================================= */

body.woocommerce-cart :is(
    .tgx-cart-extras__eyebrow,
    .tnx-cart-extras__eyebrow
) {

    margin: 0 0 6px;

    color: var(--tgx-cart-blue-dark);

    font-size: 0.74rem;
    font-weight: 850;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

body.woocommerce-cart :is(
    .tgx-cart-extras__title,
    .tnx-cart-extras__title
) {

    margin: 0 0 20px;

    color: var(--tgx-cart-ink);

    font-size: clamp(
        1.25rem,
        2.4vw,
        1.7rem
    );

    font-weight: 800;

    letter-spacing: -0.025em;
}

/* =========================================================
   30. OPTIONAL INFORMATION GRID
   ========================================================= */

body.woocommerce-cart :is(
    .tgx-cart-extras__grid,
    .tnx-cart-extras__grid
) {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;
}

/* =========================================================
   31. OPTIONAL INFORMATION CARDS
   ========================================================= */

body.woocommerce-cart :is(
    .tgx-cart-info,
    .tnx-cart-info
) {

    display: flex;

    gap: 12px;

    padding: 18px;

    border: 1px solid #e4edf7;
    border-radius: 14px;

    background: linear-gradient(
        150deg,
        #fbfdff,
        #f5f9ff
    );
}

/* Information Icon */

body.woocommerce-cart :is(
    .tgx-cart-info__icon,
    .tnx-cart-info__icon
) {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    border: 1px solid #d6e8ff;
    border-radius: 50%;

    background: #eff6ff;

    color: var(--tgx-cart-blue);
}

body.woocommerce-cart :is(
    .tgx-cart-info__icon,
    .tnx-cart-info__icon
) svg {

    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Information Text */

body.woocommerce-cart :is(
    .tgx-cart-info__content,
    .tnx-cart-info__content
) {

    min-width: 0;
}

body.woocommerce-cart :is(
    .tgx-cart-info__content,
    .tnx-cart-info__content
) strong {

    display: block;

    margin: 1px 0 5px;

    color: var(--tgx-cart-ink);

    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.4;
}

body.woocommerce-cart :is(
    .tgx-cart-info__content,
    .tnx-cart-info__content
) p {

    margin: 0;

    color: var(--tgx-cart-muted);

    font-size: 0.82rem;
    line-height: 1.65;
}

body.woocommerce-cart :is(
    .tgx-cart-info__content,
    .tnx-cart-info__content
) a {

    color: var(--tgx-cart-blue-dark);

    font-weight: 750;

    text-underline-offset: 3px;
}

/* =========================================================
   32. CONTINUE SHOPPING
   ========================================================= */

body.woocommerce-cart :is(
    .tgx-cart-extras__continue,
    .tnx-cart-extras__continue
) {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 43px;

    margin-top: 22px;
    padding: 10px 17px;

    border: 1px solid #cedef2;
    border-radius: 9px;

    background: #ffffff;

    color: var(--tgx-cart-blue-dark);

    font-size: 0.88rem;
    font-weight: 800;

    text-decoration: none;

    transition:
        background-color 160ms ease,
        border-color 160ms ease;
}

body.woocommerce-cart :is(
    .tgx-cart-extras__continue,
    .tnx-cart-extras__continue
):hover {

    border-color:
        var(--tgx-cart-blue);

    background: #eff6ff;

    color: var(--tgx-cart-blue-dark);
}

/* =========================================================
   33. TABLET
   ========================================================= */

@media (max-width: 1100px) {

    body.woocommerce-cart
    .wp-block-woocommerce-cart
    .wc-block-cart.wc-block-components-sidebar-layout {

        gap: 18px;
    }

    body.woocommerce-cart :is(
        .tgx-cart-extras__grid,
        .tnx-cart-extras__grid
    ) {

        gap: 11px;
    }

    body.woocommerce-cart :is(
        .tgx-cart-info,
        .tnx-cart-info
    ) {

        padding: 14px;
    }
}

/* =========================================================
   34. TABLET — STACKED CART
   ========================================================= */

@media (max-width: 900px) {

    body.woocommerce-cart
    .wp-block-woocommerce-cart
    .wc-block-cart.wc-block-components-sidebar-layout {

        flex-direction: column;

        align-items: stretch;
    }

    body.woocommerce-cart
    .wp-block-woocommerce-cart
    .wc-block-cart .wc-block-cart__main,

    body.woocommerce-cart
    .wp-block-woocommerce-cart
    .wc-block-cart .wc-block-cart__sidebar {

        flex: 0 0 auto;

        width: 100%;
        max-width: 100%;

        margin: 0;
    }

    body.woocommerce-cart :is(
        .tgx-cart-extras__grid,
        .tnx-cart-extras__grid
    ) {

        grid-template-columns: 1fr;
    }
}

/* =========================================================
   35. MOBILE
   ========================================================= */

@media (max-width: 600px) {

    body.woocommerce-cart
    .wp-block-woocommerce-cart
    .wc-block-cart .wc-block-cart__main,

    body.woocommerce-cart
    .wp-block-woocommerce-cart
    .wc-block-cart .wc-block-cart__sidebar {

        padding: 16px;

        border-radius: 15px;
    }

    body.woocommerce-cart
    .wp-block-woocommerce-cart
    .wc-block-cart.wc-block-components-sidebar-layout {

        gap: 15px;
    }

    body.woocommerce-cart
    .wp-block-woocommerce-cart
    .wc-block-cart-items
    .wc-block-cart-items__row > td {

        padding-top: 18px;
        padding-bottom: 18px;
    }

    body.woocommerce-cart
    .wp-block-woocommerce-cart
    .wc-block-cart-item__image img {

        padding: 4px;

        border-radius: 10px;
    }

    body.woocommerce-cart
    .wp-block-woocommerce-cart
    .wc-block-cart__submit-container {

        background-color: #ffffff;
    }

    body.woocommerce-cart :is(
        .tgx-cart-extras,
        .tnx-cart-extras
    ) {

        margin-top: 16px;

        padding: 18px;

        border-radius: 15px;
    }

    body.woocommerce-cart :is(
        .tgx-cart-info,
        .tnx-cart-info
    ) {

        gap: 10px;
    }

    body.woocommerce-cart :is(
        .tgx-cart-info__icon,
        .tnx-cart-info__icon
    ) {

        flex-basis: 38px;

        width: 38px;
        height: 38px;
    }

    body.woocommerce-cart :is(
        .tgx-cart-extras__continue,
        .tnx-cart-extras__continue
    ) {

        width: 100%;
    }
}

/* =========================================================
   36. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.woocommerce-cart
    .wp-block-woocommerce-cart :is(
        .wc-block-cart-item__image img,
        .wc-block-components-quantity-selector button,
        .wc-block-cart__submit-button,
        .wc-block-components-button
    ),

    body.woocommerce-cart :is(
        .tgx-cart-extras__continue,
        .tnx-cart-extras__continue
    ) {

        transition: none;
    }

    body.woocommerce-cart
    .wp-block-woocommerce-cart
    .wc-block-cart-item__image a:hover img,

    body.woocommerce-cart
    .wp-block-woocommerce-cart
    .wc-block-cart__submit-container
    .wc-block-components-button:hover {

        transform: none;
    }
}