/* ============================================================
   LEXORA — CART & CHECKOUT (WooCommerce Blocks)
   Restyle-only, scoped to body.woocommerce-cart /
   body.woocommerce-checkout. Brand-matched to the site:
   navy #09243C + teal #1F9C8A, Inter, cool neutrals, soft
   cards. No content/markup/functional changes. Third-party
   express-pay buttons (PayPal / Google Pay) are left as-is.
   ============================================================ */

.woocommerce-cart,
.woocommerce-checkout {
    --lx-navy: #09243C;
    --lx-teal: #1F9C8A;
    --lx-teal-dark: #178b7a;
    --lx-teal-light: #45c2ad;
    --lx-teal-soft: #eafaf6;
    --lx-hairline: #e7ebef;
    --lx-ink: #44545f;
    --lx-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ============================================================
   0. LOADING STATE — stop the "Your cart is currently empty!"
   flash. The Cart Block renders BOTH the filled (skeleton) and
   empty blocks with no `hidden` attribute, so the empty message
   shows until the Store API returns the cart. Hide it while the
   block is still loading; JS reveals it only if truly empty.
   ============================================================ */
.wp-block-woocommerce-cart.is-loading .wp-block-woocommerce-empty-cart-block,
.wp-block-woocommerce-cart.is-loading .wc-block-cart__empty {
    display: none !important;
}

/* ============================================================
   1. PAGE BANNER -> compact navy hero
   ============================================================ */
.woocommerce-cart #pxl-page-title-default,
.woocommerce-checkout #pxl-page-title-default {
    background-color: var(--lx-navy) !important;
    background-image:
        radial-gradient(60% 90% at 80% 0%, rgba(31, 156, 138, 0.32), rgba(0, 0, 0, 0) 60%),
        radial-gradient(40% 70% at 12% 100%, rgba(31, 156, 138, 0.12), rgba(0, 0, 0, 0) 60%),
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, rgba(0, 0, 0, 0) 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, rgba(0, 0, 0, 0) 1px) !important;
    background-size: auto, auto, 46px 46px, 46px 46px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 62px 0 52px !important;
    text-align: center;
}
.woocommerce-cart #pxl-page-title-default .row,
.woocommerce-checkout #pxl-page-title-default .row {
    justify-content: center;
}
.woocommerce-cart h1.pxl-page-title,
.woocommerce-checkout h1.pxl-page-title {
    color: #ffffff !important;
    font-family: var(--lx-font) !important;
    font-size: clamp(34px, 4vw, 52px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
    line-height: 1.1 !important;
    margin: 0 0 12px !important;
}
.woocommerce-cart .pxl-breadcrumb,
.woocommerce-checkout .pxl-breadcrumb {
    justify-content: center;
}
.woocommerce-cart .pxl-breadcrumb a,
.woocommerce-checkout .pxl-breadcrumb a {
    color: var(--lx-teal-light) !important;
    transition: color 0.2s ease;
}
.woocommerce-cart .pxl-breadcrumb a:hover,
.woocommerce-checkout .pxl-breadcrumb a:hover {
    color: #ffffff !important;
}
.woocommerce-cart .pxl-breadcrumb .breadcrumb-entry,
.woocommerce-checkout .pxl-breadcrumb .breadcrumb-entry {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* trim the theme's oversized content-top gap on these pages */
.woocommerce-cart #pxl-main,
.woocommerce-checkout #pxl-main {
    padding-top: 56px !important;
    padding-bottom: 72px !important;
}

/* ============================================================
   2. SHARED — typography + primary buttons
   ============================================================ */
.woocommerce-cart .wc-block-cart,
.woocommerce-cart .wc-block-cart *,
.woocommerce-checkout .wc-block-checkout,
.woocommerce-checkout .wc-block-checkout * {
    font-family: var(--lx-font);
}

/* Primary filled buttons (Proceed to checkout / Place order / Apply) */
.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-checkout .wc-block-components-checkout-place-order-button,
.woocommerce-cart .wc-block-components-button.contained,
.woocommerce-checkout .wc-block-components-button.contained {
    background-color: var(--lx-teal) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 11px !important;
    font-weight: 500 !important;
    box-shadow: 0 6px 18px rgba(31, 156, 138, 0.25) !important;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
.woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.woocommerce-cart .wc-block-components-button.contained:hover,
.woocommerce-checkout .wc-block-components-button.contained:hover {
    background-color: var(--lx-teal-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(31, 156, 138, 0.30) !important;
}

/* Links + headings */
.woocommerce-cart .wc-block-cart a,
.woocommerce-checkout .wc-block-checkout a {
    color: var(--lx-teal);
}
.woocommerce-cart .wc-block-components-title,
.woocommerce-checkout .wc-block-components-title,
.woocommerce-cart .wc-block-cart__totals-title,
.woocommerce-checkout .wc-block-components-checkout-step__title {
    color: var(--lx-navy) !important;
    font-family: var(--lx-font) !important;
    font-weight: 500 !important;
}

/* ============================================================
   3. CART — items, quantity, totals
   ============================================================ */
/* product titles */
.woocommerce-cart .wc-block-cart-items__row .wc-block-components-product-name {
    color: var(--lx-navy) !important;
    font-weight: 500 !important;
    text-decoration: none;
}
.woocommerce-cart .wc-block-cart-items__row .wc-block-components-product-name:hover {
    color: var(--lx-teal) !important;
}
/* table header */
.woocommerce-cart .wc-block-cart-items__header {
    color: var(--lx-ink) !important;
    border-bottom: 1px solid var(--lx-hairline) !important;
}
.woocommerce-cart .wc-block-cart-items__row {
    border-bottom: 1px solid var(--lx-hairline) !important;
}
/* quantity selector -> branded pill */
.woocommerce-cart .wc-block-components-quantity-selector {
    border: 1px solid var(--lx-hairline) !important;
    border-radius: 10px !important;
    overflow: hidden;
}
.woocommerce-cart .wc-block-components-quantity-selector__button {
    color: var(--lx-navy) !important;
    transition: color 0.2s ease, background 0.2s ease;
}
.woocommerce-cart .wc-block-components-quantity-selector__button:hover {
    color: var(--lx-teal) !important;
    background: var(--lx-teal-soft) !important;
}
.woocommerce-cart .wc-block-components-quantity-selector__input {
    color: var(--lx-navy) !important;
    font-weight: 500 !important;
}
/* remove link */
.woocommerce-cart .wc-block-cart-item__remove-link {
    color: var(--lx-ink) !important;
    transition: color 0.2s ease;
}
.woocommerce-cart .wc-block-cart-item__remove-link:hover {
    color: var(--lx-teal) !important;
}
/* prices */
.woocommerce-cart .wc-block-components-product-price,
.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
    color: var(--lx-navy) !important;
}
/* totals sidebar card */
.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-sidebar,
.woocommerce-cart .wc-block-cart__sidebar > .is-large {
    background: #ffffff;
    border: 1px solid var(--lx-hairline);
    border-radius: 16px;
    padding: 8px 4px;
}
.woocommerce-cart .wc-block-components-totals-item__label {
    color: var(--lx-ink) !important;
}
.woocommerce-cart .wc-block-components-totals-item__value,
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--lx-navy) !important;
}
.woocommerce-cart .wc-block-components-totals-footer-item {
    color: var(--lx-navy) !important;
    font-weight: 500 !important;
}

/* ============================================================
   4. CHECKOUT — fields, steps, order summary
   ============================================================ */
/* form inputs */
.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-text-input textarea,
.woocommerce-checkout .wc-block-components-select .wc-block-components-select__container,
.woocommerce-checkout .wc-block-components-combobox .components-form-token-field__input-container,
.woocommerce-checkout .wc-block-components-address-form input,
.woocommerce-checkout .wc-block-components-address-form select {
    border: 1px solid var(--lx-hairline) !important;
    border-radius: 10px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.woocommerce-checkout .wc-block-components-text-input input:focus,
.woocommerce-checkout .wc-block-components-text-input textarea:focus,
.woocommerce-checkout .wc-block-components-address-form input:focus,
.woocommerce-checkout .wc-block-components-select .wc-block-components-select__container:focus-within {
    border-color: var(--lx-teal) !important;
    box-shadow: 0 0 0 3px rgba(31, 156, 138, 0.12) !important;
    outline: none !important;
}
/* floating labels */
.woocommerce-checkout .wc-block-components-text-input.is-active label,
.woocommerce-checkout .wc-block-components-text-input input:focus + label {
    color: var(--lx-teal) !important;
}
/* step number badges -> teal */
.woocommerce-checkout .wc-block-components-checkout-step__title-text {
    color: var(--lx-navy) !important;
}
.woocommerce-checkout .wc-block-components-checkout-step::before,
.woocommerce-checkout .wc-block-components-checkout-step__heading-content {
    color: var(--lx-teal) !important;
}
/* order summary sidebar -> card */
.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-sidebar,
.woocommerce-checkout .wc-block-checkout__sidebar > .is-large {
    background: #ffffff;
    border: 1px solid var(--lx-hairline);
    border-radius: 16px;
}
.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices,
.woocommerce-checkout .wc-block-components-totals-item__value {
    color: var(--lx-navy) !important;
}
.woocommerce-checkout .wc-block-components-totals-footer-item {
    color: var(--lx-navy) !important;
    font-weight: 500 !important;
}
.woocommerce-checkout .wc-block-components-product-metadata,
.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
    color: var(--lx-navy) !important;
}

/* ============================================================
   5. Responsive
   ============================================================ */
@media screen and (max-width: 767px) {
    .woocommerce-cart #pxl-page-title-default,
    .woocommerce-checkout #pxl-page-title-default {
        padding: 44px 0 38px !important;
    }
    .woocommerce-cart #pxl-main,
    .woocommerce-checkout #pxl-main {
        padding-top: 36px !important;
    }
}