/* ==========================================================================
   CDA Cart - Shopify-style two-column cart.
   Pairs with:
     templates/cart.php
     class-cda-cart.php

   Deliberately independent of modules/wc-checkout's CSS/classes, even though
   the two look alike - see class-cda-cart.php's docblock: this page's own
   Elementor header lives in a completely different element tree
   (.elementor-11) than checkout's (.elementor-12), so nothing here may
   assume it can reach into or reuse checkout's rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Full-bleed page: strip theme chrome so cart feels like its own flow
   -------------------------------------------------------------------------- */
body.cda-cart-v2 .site-header,
body.cda-cart-v2 header.site-header,
body.cda-cart-v2 #masthead,
body.cda-cart-v2 .site-footer,
body.cda-cart-v2 footer.site-footer,
body.cda-cart-v2 #colophon,
body.cda-cart-v2 .woocommerce-breadcrumb,
body.cda-cart-v2 .page-title,
body.cda-cart-v2 .entry-title {
    display: none !important;
}

/* Same Elementor Canvas dual-scroll-container fix as checkout.css - see that
   file's identical rule for the full explanation. Required here too:
   position: sticky on .cda-cart-summary needs it just as much. */
html:has(body.cda-cart-v2) {
    height: auto !important;
    overflow: visible !important;
}

/* Header row border - targeted structurally (first direct child of the
   stable .elementor-11 root, tied to the post ID) rather than by its own
   auto-generated element ID, which has already changed once after a
   re-save. */
body.cda-cart-v2 .elementor-11 > :first-child {
    border-bottom: 1px solid var(--cda-ab-border, #DEDEDE);
}

/* WooCommerce notices (invalid coupon, coupon applied, etc.) - default
   markup is a bare <ul class="woocommerce-error/-message/-info"><li>...</li>
   with no styling of its own in this theme, showing as plain text with
   thin colored top/bottom rules. Restyled as a proper inline alert box,
   same color tokens used elsewhere in this codebase (--cda-color-primary
   for error, #1A7F37 for success - see checkout.css). */
/* :not(:empty) - WooCommerce always outputs this wrapper div even with no
   notice inside it. Without this guard the padding alone gave it ~20px of
   visible height at all times, showing as an unwanted gap between the
   header and the content below even when nothing was actually being
   shown. */
body.cda-cart-v2 .woocommerce-notices-wrapper:not(:empty) {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}

body.cda-cart-v2 .woocommerce-error,
body.cda-cart-v2 .woocommerce-message,
body.cda-cart-v2 .woocommerce-info {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 8px);
    margin: 0 0 var(--space-3, 20px);
    padding: var(--space-3, 20px) var(--space-4, 24px);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: var(--font-normal, 400);
}

/* WooCommerce gives the error notice tabindex="-1" and focuses it so screen
   readers announce it; the theme paints focus as a yellow ring, and outlines
   follow border-radius so it traced the whole card. Dropped rather than
   restyled - the focus is programmatic, moved for announcement rather than
   by anyone navigating, and the notice is already the loudest thing on the
   page. Focus still moves, so assistive tech loses nothing. */
body.cda-cart-v2 .woocommerce-error:focus,
body.cda-cart-v2 .woocommerce-error:focus-visible,
body.cda-cart-v2 .woocommerce-message:focus,
body.cda-cart-v2 .woocommerce-message:focus-visible,
body.cda-cart-v2 .woocommerce-info:focus,
body.cda-cart-v2 .woocommerce-info:focus-visible,
body.cda-cart-v2 .woocommerce-NoticeGroup:focus,
body.cda-cart-v2 .woocommerce-NoticeGroup:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

body.cda-cart-v2 .woocommerce-error li,
body.cda-cart-v2 .woocommerce-message li,
body.cda-cart-v2 .woocommerce-info li {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.cda-cart-v2 .woocommerce-error {
    background: #FDECEC;
    color: var(--cda-color-primary, #D9262A);
}

body.cda-cart-v2 .woocommerce-message,
body.cda-cart-v2 .woocommerce-info {
    background: #E9F6EC;
    color: #1A7F37;
}

/* The "Continue shopping"/"Choose a different address"-style link
   WooCommerce sometimes appends inside a success/info notice - restyle to
   match this module's own buttons rather than WooCommerce's default. */
body.cda-cart-v2 .woocommerce-message .button,
body.cda-cart-v2 .woocommerce-info .button {
    align-self: flex-start;
    padding: 8px 16px;
    background: var(--cda-ab-dark, #212A2F);
    color: var(--color-white, #fff);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: var(--font-semibold, 600);
    text-decoration: none;
    text-transform: none;
}

body.cda-cart-v2 {
    height: auto !important;
    overflow: visible !important;
    background: var(--color-white, #fff);
    /* Same reference values as checkout.css (Allbirds/Shopify checkout,
       computed styles) - shared visual language, kept as this module's own
       copy rather than a cross-module dependency. */
    --cda-ab-dark: #212A2F;
    --cda-ab-text: #333333;
    --cda-ab-border: #DEDEDE;
}

/* --------------------------------------------------------------------------
   2. Base typography - Elementor's OWN global "Body Text" font, read live
   off body.elementor-kit-25, not the theme's separate --font-primary. See
   modules/wc-checkout/assets/css/checkout.css section 2's identical rule for
   the full story (documenting real, resolved values via getComputedStyle,
   why :root/documentElement reads empty, why this is scoped to these
   containers and not body.cda-cart-v2 itself).
   -------------------------------------------------------------------------- */
.cda-cart-main,
.cda-cart-summary {
    font-family: var(--e-global-typography-text-font-family, "Inter", sans-serif);
}

/* --------------------------------------------------------------------------
   3. Layout grid
   -------------------------------------------------------------------------- */
/* This layout is full-bleed by design (spans the viewport, own inset via
   --cda-page-gutter below) - see checkout.css's identical rule for why a
   boxed Elementor container breaks it (squeezed columns, starved gutter
   math) and why this is scoped to :has(.cda-cart) rather than every
   .e-con-inner on the page (this page's own header row must stay boxed - see
   class-cda-cart.php). */
.e-con-inner:has(.cda-cart-layout),
/* Same un-boxing, needed for the empty-cart state too (cart-empty.php) -
   without it, this section's max-width:1140px leaves the theme's own
   near-black section background (SECTION.wrapper-content, confirmed live:
   rgb(17,15,26)) visible as bars on both sides, since .cda-cart-empty's own
   white background then only covers that narrower boxed column instead of
   the true full page width. */
.e-con-inner:has(.cda-cart-empty) {
    max-width: none;
}

/* Sticky footer for the empty-cart state. Confirmed live: .wrapper-site (the
   theme's own site wrapper) has 4 direct children - the stray global header
   (hidden), SECTION.wrapper-content (which holds .elementor-11 and this
   page's actual content), SECTION.footer-site (the theme's own real global
   footer, also hidden), and a position:fixed search overlay (irrelevant to
   flex sizing). None of them had any min-height:100vh or flex-grow, so with
   short empty-cart content the real footer ends up floating with blank
   space below it instead of anchored to the viewport bottom. Building the
   classic sticky-footer pattern ourselves here rather than depending on
   Elementor's own container settings, which aren't something this module
   owns or can rely on staying put (already confirmed to differ from an
   earlier measurement taken before this page's own re-save). First attempt
   wrongly targeted .elementor-11 directly for flex:1 - that element is a
   GRANDCHILD of .wrapper-site (nested inside .wrapper-content), not a
   direct child, so growing it did nothing; .wrapper-content is the actual
   direct child that needs to grow. */
body.cda-cart-v2 .wrapper-site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* WordPress's admin bar sits above .wrapper-site (pushing it down by 32px)
   without itself taking up any of that 100vh - so for a logged-in admin,
   a flat 100vh here overshoots the actual viewport by 32px, forcing an
   unnecessary scrollbar. Same .admin-bar-conditional pattern used elsewhere
   in this codebase (e.g. --cda-sticky-top). */
body.cda-cart-v2.admin-bar .wrapper-site {
    min-height: calc(100vh - 32px);
}

body.cda-cart-v2 .wrapper-site > section.wrapper-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Stretching this section to fill the viewport re-exposes its own
       near-black background (rgb(17,15,26)) in the newly-grown space that
       .cda-cart-empty's own (much shorter) white background doesn't reach -
       override it to white so the grown area reads as page background, not
       a visible dark strip. */
    background: var(--color-white, #fff) !important;
}

body.cda-cart-v2 .wrapper-site > section.wrapper-content > .elementor-11 {
    flex: 1;
    display: flex;
    flex-direction: column;
}

body.cda-cart-v2 .elementor-11 > .elementor-element:has(.cda-cart-empty) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cda-cart-layout {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    --cda-page-gutter: max(0px, calc((100vw - 1000px) / 2));
    /* No border-top here anymore - it duplicated the header row's own
       border-bottom (added later, see .elementor-11 > :first-child),
       showing as two separate lines with the (usually empty)
       .woocommerce-notices-wrapper's gap sandwiched between them. */
    /* Unlike checkout, a cart with only 1-2 items is naturally much shorter
       than the viewport, so align-self:stretch on .cda-cart-summary (below)
       has nothing tall to stretch to - both columns end early and the gray
       panel stops well above the footer instead of reaching it. Checkout
       never needs this because a real checkout form (billing + shipping +
       payment) is already tall enough on its own. Measured live: header
       (logo row) is ~234px tall for a real, logged-out visitor; +32px more
       when the admin bar is showing (see the .admin-bar override below). */
    min-height: calc(100vh - 234px);
}

body.cda-cart-v2.admin-bar .cda-cart-layout {
    min-height: calc(100vh - 230px);
}

.cda-cart-main {
    min-width: 0;
    box-sizing: content-box;
    max-width: 560px;
    padding: var(--space-6, 40px) var(--space-6, 40px) var(--space-8, 64px) var(--cda-page-gutter);
}

.cda-cart-heading {
    /* !important: Elementor's own kit CSS carries a blanket
       "h1, h2, h3, h4, h5, h6 {...}" rule (hardcoded termina) plus a
       ".elementor-kit-25 h1" rule - both directly target this h1, and a
       directly-matched rule always wins over an inherited value regardless
       of specificity. Confirmed on the checkout module first (see
       .cda-checkout-main h3 there) before applying the same fix here. */
    font-family: var(--e-global-typography-text-font-family, "Inter", sans-serif) !important;
    font-size: 24px;
    font-weight: var(--font-bold, 700);
    color: var(--cda-ab-text, #333);
    text-transform: none !important;
    letter-spacing: normal;
    margin: 0 0 var(--space-4, 24px);
}

.cda-cart-summary {
    align-self: stretch;
    background: #F5F5F5;
    border-left: 1px solid var(--cda-ab-border, #DEDEDE);
}

.cda-cart-summary-inner {
    /* Deliberately NOT sticky, unlike checkout's equivalent - the cart page
       is short enough that a fixed-in-place summary panel isn't needed here. */
    box-sizing: content-box;
    max-width: 480px;
    margin-left: auto;
    padding: var(--space-6, 40px) var(--cda-page-gutter) var(--space-8, 64px) var(--space-6, 40px);
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 20px);
}

@media (max-width: 900px) {
    .cda-cart-layout {
        grid-template-columns: 1fr;
        --cda-page-gutter: 0px;
    }

    .cda-cart-main,
    .cda-cart-summary-inner {
        padding: var(--space-4, 24px) var(--space-3, 20px);
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    /* The min-height above exists to stop the gray summary panel stopping
       short of the footer when the columns sit SIDE BY SIDE and both end
       early. Stacked, there is no short column to prop up - the panel is
       full-width and already reaches the footer - so all the rule does is
       stretch the layout to the viewport and open a band of empty white
       between the last product and the checkout button. */
    .cda-cart-layout,
    body.cda-cart-v2.admin-bar .cda-cart-layout {
        min-height: 0;
    }

    /* Tightened on top of that. Stacked, the main column's bottom padding,
       the summary's top padding and the last item's own bottom padding all
       land in the same place; side by side none of them is visible, since
       nothing sits below either column. */
    .cda-cart-main {
        padding-bottom: var(--space-2, 16px);
    }

    .cda-cart-summary-inner {
        padding-top: var(--space-3, 20px);
    }

    .cda-cart-items .cda-cart-item:last-child {
        padding-bottom: 0;
    }

    .cda-cart-summary {
        /* No order override: the items come first on a narrow screen, and
           the summary follows. Pulling the summary up put the totals and
           the checkout button above the things being bought, so the first
           thing on screen was a price with nothing yet explaining it.
           The rule between the two moves to the top edge with it. */
        align-self: auto;
        border-left: none;
        border-top: 1px solid var(--cda-ab-border, #DEDEDE);
    }
}

/* --------------------------------------------------------------------------
   4. Cart items
   -------------------------------------------------------------------------- */
.cda-cart-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 24px);
}

.cda-cart-item {
    display: grid;
    grid-template-columns: 80px 1fr auto auto;
    gap: var(--space-3, 20px);
    align-items: start;
    padding-bottom: var(--space-4, 24px);
    border-bottom: 1px solid var(--cda-ab-border, #DEDEDE);
}

.cda-cart-item:last-child {
    border-bottom: none;
}

.cda-cart-item-thumb img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    box-sizing: border-box;
    /*border: 2px solid #fff;*/
    border-radius: 8px;
    display: block;
}

.cda-cart-item-details {
    min-width: 0;
}

.cda-cart-item-name {
    font-size: 15px;
    font-weight: var(--font-semibold, 600);
    color: var(--cda-ab-text, #333);
}

.cda-cart-item-name a {
    color: inherit;
    text-decoration: none;
}

.cda-cart-item-meta span {
    font-weight: var(--font-normal, 400);
}

.cda-cart-item-meta {
    font-size: 13px;
    color: rgba(51, 51, 51, 0.56);
    margin-top: 2px;
    font-weight: var(--font-normal, 400);
}

.cda-cart-item-remove {
    display: inline-block;
    margin-top: var(--space-2, 16px);
    font-size: 13px;
    color: var(--cda-color-gray-500, #53616F);
    text-decoration: underline;
}

.cda-cart-item-remove:hover {
    color: var(--cda-ab-dark, #212A2F);
}

.cda-cart-item-qty {
    align-self: center;
}

.cda-cart-item-qty .quantity {
    display: flex;
}

.cda-cart-item-qty input.qty {
    width: 56px;
    height: 40px;
    text-align: center;
    border: 1px solid var(--cda-ab-border, #DEDEDE);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    /* Native number-input spinners look inconsistent across browsers and
       clash with the flat, bordered style everywhere else on this page -
       the input is still a real <input type="number">, just without the
       browser's own up/down arrows. */
    -moz-appearance: textfield;
}

.cda-cart-item-qty input.qty::-webkit-outer-spin-button,
.cda-cart-item-qty input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cda-cart-item-subtotal {
    align-self: center;
    font-size: 15px;
    font-weight: var(--font-semibold, 600);
    color: var(--cda-ab-text, #333);
    text-align: right;
    white-space: nowrap;
}

.cda-cart-update {
    /* Visually hidden, not removed - see cart.php's comment on this button
       and cart.js's attachQuantityAutoUpdate(): quantity changes auto-click
       this exact element, and WooCommerce's own cart handler looks for this
       specific name="update_cart" field to know to recalculate - so it still
       has to exist in the DOM and be genuinely submittable, just not shown.
       display:none was tried first and confirmed LIVE to break this: Chrome
       does not fire a submit from a native .click() (or jQuery's
       .trigger('click')) on a display:none button - the auto-update silently
       stopped working entirely. This is the standard visually-hidden-but-
       still-functional technique instead: a real 1x1px box (not display:none)
       so click()/submit still fires, just invisible and clipped. Tradeoff: a
       shopper with JS disabled has no visible way to trigger a manual update
       anymore (rare in practice given how much else on this page already
       depends on JS - Stripe Elements, Elementor, etc). */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 900px) {
    /* The price keeps its own column beside the details instead of dropping
       to a row underneath. minmax(0, 1fr) rather than 1fr on the middle
       column: a bare 1fr floors at the content's min-content width, so a
       long product name would push the price off the row instead of being
       truncated by the rules further down. */
    .cda-cart-item {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        gap: var(--space-2, 16px);
        grid-template-areas:
            "thumb details subtotal"
            "thumb qty     qty";
    }

    .cda-cart-item-thumb { grid-area: thumb; }
    .cda-cart-item-details { grid-area: details; }
    .cda-cart-item-qty { grid-area: qty; margin-top: var(--space-2, 16px); }

    .cda-cart-item-subtotal {
        grid-area: subtotal;
        text-align: right;
        margin-top: 0;
        /* Never the thing that wraps - it is the column the row is sized
           around. */
        white-space: nowrap;
    }

    .cda-cart-item-thumb img {
        width: 56px;
        height: 56px;
    }

    /* Truncate rather than wrap, so the details stay one line each and the
       price keeps its place on the first of them. */
    .cda-cart-item-name,
    .cda-cart-item-meta {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cda-cart-item-name a {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* --------------------------------------------------------------------------
   5. Inline coupon field - same visual treatment as checkout's
   .cda-inline-coupon (own copy, own class name): floating label, and the
   "Apply" button inset INSIDE the input's own bordered box rather than
   sitting beside it as a flex sibling.
   -------------------------------------------------------------------------- */
.cda-cart-coupon-field {
    position: relative;
    display: block;
}

.cda-cart-coupon-field label {
    position: absolute;
    left: 11px;
    top: 5px;
    font-size: 12px;
    font-weight: var(--font-normal, 400);
    color: #707070;
    margin: 0;
    pointer-events: none;
    max-width: calc(100% - 32px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    z-index: 1;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1), transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.cda-cart-coupon-field:has(input:not(:placeholder-shown)) label {
    opacity: 1;
    transform: translateY(0);
}

.cda-cart-coupon input.input-text {
    width: 100%;
    box-sizing: border-box;
    height: 50px;
    /* Right padding leaves room for the "Apply" button inset inside this
       same box - wide enough that typed text never runs under it. */
    padding: 0 90px 0 var(--space-2, 16px);
    border: 1px solid var(--cda-ab-border, #DEDEDE);
    /* !important for the same reason as .cda-cart-coupon .button and the
       currency select below - a border/radius rule elsewhere on the page
       ties or beats this selector, and won silently without it. */
    border-radius: 12px !important;
    font-family: inherit;
    font-size: 15px;
    background: var(--color-white, #fff);
    transition: padding 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.cda-cart-coupon-field:has(input:not(:placeholder-shown)) input.input-text {
    padding-top: 20px;
    padding-bottom: 0;
    padding-left: 10px;
}

.cda-cart-coupon input.input-text:focus {
    outline: none;
    border-color: var(--cda-ab-dark, #212A2F);
    box-shadow: 0 0 0 1px var(--cda-ab-dark, #212A2F);
}

.cda-cart-coupon .button {
    /* !important throughout - same competing rules as .cda-cart-update
       above, PLUS an even more specific one from Elementor's own cart-widget
       stylesheet: ".elementor-widget-woocommerce-cart .woocommerce
       button.button" (two classes + a tag), which ties or beats this
       selector's own specificity regardless of source order. */
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: 8px;
    width: auto !important;
    height: auto;
    padding: 0 var(--space-3, 20px);
    border: none !important;
    border-radius: 8px;
    background: var(--cda-ab-dark, #212A2F) !important;
    color: var(--color-white, #fff) !important;
    font-family: inherit !important;
    font-size: 14px;
    font-weight: var(--font-semibold, 600);
    text-transform: none !important;
    cursor: pointer;
}

.cda-cart-coupon .button:hover {
    background: #3c4043 !important;
}

.cda-cart-coupon .button:disabled {
    background: var(--cda-color-gray-100, #F4F4F4) !important;
    color: var(--cda-color-gray-400, #868F98) !important;
    border-color: var(--cda-color-gray-100, #F4F4F4) !important;
    text-transform: none !important;
    cursor: not-allowed;
}

.cda-cart-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: var(--cda-ab-text, #333);
}

/* --------------------------------------------------------------------------
   6. Totals table - same typography treatment as checkout's
   .cda-order-totals: no uppercase, no dividers, no hover backgrounds.
   -------------------------------------------------------------------------- */
.cda-cart-totals {
    width: 100%;
    border-collapse: collapse;
}

.cda-cart-totals tr th,
.cda-cart-totals tr td {
    background: transparent !important;
    text-align: left;
    text-transform: none !important;
    border: none !important;
    padding: var(--space-2, 16px) 0 0;
    font-size: 15px;
    font-weight: var(--font-normal, 400);
    font-family: var(--e-global-typography-text-font-family, "Inter", sans-serif) !important;
}

.cda-cart-totals tr:first-child th,
.cda-cart-totals tr:first-child td {
    padding-top: 0;
}

.cda-cart-totals tr td {
    text-align: right;
}

.cda-cart-totals tbody tr:hover,
.cda-cart-totals tbody tr:hover th,
.cda-cart-totals tbody tr:hover td {
    background-color: transparent !important;
}

.cda-cart-total th {
   letter-spacing: unset;
}

.cda-cart-total th,
.cda-cart-total td {
    padding-top: var(--space-3, 20px);
    font-size: 20px !important;
    font-weight: var(--font-bold, 700) !important;
}

/* Header currency label ([cda_currency_label] shortcode) - same small gray
   tag style as .cda-cart-total-currency below, just without the
   margin-right (nothing to its right on this side). */
.cda-currency-label {
    font-size: 13px;
    font-weight: var(--font-normal, 400);
    color: var(--cda-color-gray-500, #53616F);
    vertical-align: middle;
}

.cda-cart-total-currency {
    font-size: 13px;
    font-weight: var(--font-normal, 400);
    color: var(--cda-color-gray-500, #53616F);
    margin-right: 4px;
    vertical-align: middle;
}

/* The real WCPBC currency-switcher <select> now lives inside this span (see
   cart.php) - strip its native appearance so it reads as plain text with a
   small dropdown chevron, matching the plain label it replaced. */
/* the_widget() (called internally by the [wcpbc_currency_switcher]
   shortcode) wraps the real <select> in TWO block-level divs
   (.widget, then .wc-price-based-country) - confirmed live via DOM
   ancestor walk. Those force a line break before/after the select
   regardless of the select's own width, which is what was actually pushing
   the price onto its own line below (not a width problem on the select
   itself, already fixed above). */
.cda-cart-total-currency .widget,
.cda-cart-total-currency .wc-price-based-country {
    display: inline !important;
}

.cda-cart-total-currency select.wcpbc-currency-switcher {
    /* !important throughout - same competing Elementor/kit-wide "select"
       rule pattern documented elsewhere in this file (.cda-cart-update,
       .cda-cart-coupon .button): a border/background/padding rule
       elsewhere on the page ties or beats this selector's specificity.
       Confirmed live: border was winning without !important. */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 14px 0 0 !important;
    height: auto !important;
    /* NOT width:auto - a native <select>, even with appearance:none, some
       browsers still size to comfortably fit its WIDEST <option> (as if
       measuring for the open dropdown), not its own displayed text alone.
       Confirmed live: this rendered ~223px wide instead of ~40px, wrapping
       the price onto its own line below. Currency codes are always exactly
       3 letters (ISO 4217), so a small fixed width comfortably fits any of
       them without needing to guess/measure per-option. */
    width: 3.5em !important;
    display: inline-block !important;
    vertical-align: middle !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: var(--font-normal, 400) !important;
    color: var(--cda-color-gray-500, #53616F) !important;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353616F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: 10px !important;
}

.cda-cart-total-currency select.wcpbc-currency-switcher:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   7. Proceed to checkout - restyles WooCommerce's own default button
   (see the docblock on woocommerce_proceed_to_checkout in cart.php for why
   this isn't a hardcoded link instead).
   -------------------------------------------------------------------------- */
.cda-cart-checkout-button .checkout-button,
.cda-cart-checkout-button a.button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    /*height: 52px;*/
    /*line-height: 52px;*/
    text-align: center;
    background: var(--cda-ab-dark, #212A2F) !important;
    color: var(--color-white, #fff) !important;
    border: none !important;
    /*border-radius: 8px;*/
    font-family: inherit !important;
    font-size: 14px !important;
    /*font-weight: 400 !important;*/
    text-decoration: none !important;
    text-transform: none !important;

    font-weight: 500 !important;
    height: auto;
    line-height: normal;
    padding-block: 15px;
    /* 4px, not the checkout's 12px: this button sits directly above Stripe's
       express buttons, whose radius Stripe owns, and matching them matters
       more here than matching the next page. */
    border-radius: 4px;
    /* Same face as the checkout's Pay now and the sign-in button: a white
       sheen falling off down the button over near-black. */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%), #171717 !important;
    /* Release overshoots slightly past resting size - that overshoot is
       what reads as a bounce rather than a fade back. The press is retimed
       below; a spring on the way DOWN feels mushy. */
    transition: background 0.15s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Sinks under the finger. */
.cda-cart-checkout-button .checkout-button:active,
.cda-cart-checkout-button a.button:active {
    transform: scale(0.96);
    transition: transform 0.08s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .cda-cart-checkout-button .checkout-button,
    .cda-cart-checkout-button a.button,
    .cda-cart-checkout-button .checkout-button:active,
    .cda-cart-checkout-button a.button:active {
        transition: background 0.15s ease;
        transform: none;
    }
}

.cda-cart-subtotal th {
    letter-spacing: normal;
    font-family: var(--e-global-typography-text-font-family, "Inter", sans-serif) !important;
}

.cda-cart-checkout-button a.button:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%),
        #171717 !important;
}

/*.cda-cart-checkout-button .checkout-button:hover,*/
/*.cda-cart-checkout-button a.button:hover {*/
/*    background: var(--cda-color-gray-900, #000) !important;*/
/*}*/

/* --------------------------------------------------------------------------
   8. Cross-sells - hook still fires (see cart.php), hidden here so a
   revenue-relevant widget disappearing is a one-line, reversible CSS change,
   not a missing template feature.
   -------------------------------------------------------------------------- */
.cda-cart-collaterals {
    display: none;
}

/* --------------------------------------------------------------------------
   9. WooCommerce Subscriptions injects its OWN "Recurring totals" table
   (Subtotal / Recurring total / next renewal date) into whatever action
   this template fires around the order total - same as the checkout
   module's identical issue and identical fix (see .cda-order-totals in
   checkout.css). Redundant here: the item's own recurring-price line under
   its name already carries the cadence.
   -------------------------------------------------------------------------- */
.cda-cart-totals tr.recurring-totals,
.cda-cart-totals tr.recurring-total {
    display: none !important;
}

/* --------------------------------------------------------------------------
   10. Elementor's OWN "Cart" widget wraps a two-column grid
   (.e-cart__container > .e-cart__column-start / .e-cart__column-end) around
   the classic cart.php template call this module overrides - it puts our
   ENTIRE template (main column + summary, already a complete two-column
   layout on its own) into column-start, then independently renders its own
   second column alongside it. That second column measures empty today
   (confirmed live: 0 visible text) but is NOT genuinely empty (1874 chars
   of markup) - it is Elementor's own totals/cross-sell rendering, which
   currently produces nothing visible only by chance. Hidden here as a
   pragmatic guard against it starting to render real content later and
   silently duplicating the totals/checkout button this template already
   shows in full.
   The durable fix is the same one documented in class-cda-cart.php's
   top-of-file warning: swap the Cart page's Elementor "Cart" widget for a
   plain Shortcode widget containing [woocommerce_cart]. That removes this
   wrapper (and the widget's second column with it) entirely, rather than
   relying on this rule to keep suppressing whatever it renders. */
.e-cart__column-end {
    display: none !important;
}

/* --------------------------------------------------------------------------
   11. This one is more serious than it looks - see the long comment above,
   but the short version: Elementor's Cart widget doesn't just wrap our
   template in a static grid. It runs CLIENT-SIDE JS that takes whatever HTML
   the classic cart.php template call renders (ours, since our override
   works) and restructures it into Elementor's own component pieces AFTER
   the page loads. Confirmed directly: this ".coupon.e-cart-section" block,
   containing a SECOND "Apply coupon" button, gets injected as a direct
   child of .cda-cart (our own <form>), not a sibling wrapper - meaning
   Elementor's JS is reaching INSIDE our markup, not just around it.
   This rule hides the one duplicate found so far. It is not a complete
   guarantee there isn't another - a JS restructuring pass can inject
   anywhere, including places a CSS audit won't catch (e.g. a second
   "Update cart" button double-submitting the form). The durable fix is
   the one in class-cda-cart.php's own top-of-file warning: swap this page's
   Elementor "Cart" widget for a plain Shortcode widget with [woocommerce_cart].
   That removes the JS restructuring entirely, not just its symptoms. */
.coupon.e-cart-section {
    display: none !important;
}

/* --------------------------------------------------------------------------
   12. Empty-cart state (cart-empty.php override) - centered icon, heading,
   subtext and a "Continue shopping" button, replacing WooCommerce's plain
   "Your cart is currently empty." notice + bare text link.
   -------------------------------------------------------------------------- */
.cda-cart-empty {
    max-width: 480px;
    min-height: calc(100vh - 234px);
    margin: 0 auto;
    /* Symmetrical now - the old 120px-top/64px-bottom split was for a
       top-anchored layout; the parent section now centers this block
       vertically (see the sticky-footer rule above), so padding here only
       needs to add a bit of breathing room, not do the positioning. */
    padding: var(--space-8, 64px) var(--space-4, 24px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Same font token as .cda-cart-main/.cda-cart-summary (section 2) -
       this block sits outside both of those, so without this it was
       inheriting the theme's own separate font stack instead (confirmed
       live: computed font-family was "inter, Inter-fallback, Segoe UI..."
       on the text/button, not our Elementor-global token). */
    font-family: var(--e-global-typography-text-font-family, "Inter", sans-serif);
}

/* WooCommerce's own do_action('woocommerce_cart_is_empty') notice still
   fires (any other plugin hooked onto it still needs to run) - just hidden,
   since this template's own heading/text replaces it visually. NOT nested
   under .cda-cart-empty - confirmed live that WooCommerce wraps the notice
   and this template's own output as SIBLINGS inside a shared
   .wc-empty-cart-message wrapper, not as an ancestor/descendant pair. */
body.cda-cart-v2 .cart-empty.woocommerce-info {
    display: none;
}

.cda-cart-empty-icon {
    color: var(--cda-color-gray-400, #868F98);
    margin-bottom: var(--space-4, 24px);
}

.cda-cart-empty-heading {
    /* !important throughout, including margin: same Elementor kit-wide
       h1-h6 rule fight documented on .cda-cart-heading above - confirmed
       live the margin was computing to 0px without !important (a
       competing reset was winning silently, not just font-family). */
    font-family: var(--e-global-typography-text-font-family, "Inter", sans-serif) !important;
    font-size: 24px;
    font-weight: var(--font-bold, 700);
    color: var(--cda-ab-text, #333);
    text-transform: none !important;
    letter-spacing: normal;
    margin: 0 0 var(--space-3, 20px) !important;
}

.cda-cart-empty-text {
    /* !important: a <p> tag has its own directly-matched font-family rule
       elsewhere (theme/WooCommerce base styles) that beats the inherited
       value from .cda-cart-empty regardless of specificity - confirmed
       live, this stayed on the theme's own font stack even after the
       parent's font-family was fixed. */
    font-family: var(--e-global-typography-text-font-family, "Inter", sans-serif) !important;
    font-size: 15px;
    font-weight: var(--font-normal, 400);
    color: var(--cda-color-gray-500, #53616F);
    /* !important - same margin-reset fight as the heading above. */
    margin: 0 0 var(--space-6, 40px) !important;
}

.cda-cart-empty-button {
    display: inline-block;
    padding: 14px 32px;
    background: var(--cda-ab-dark, #212A2F);
    color: var(--color-white, #fff) !important;
    border-radius: 8px;
    /* Explicit, not inherit - matches .cda-cart-empty-heading/-text above
       rather than relying on inheritance from .cda-cart-empty, in case a
       future theme/Elementor rule directly targets anchors the same way
       one already directly targets <p> tags (see .cda-cart-empty-text). */
    font-family: var(--e-global-typography-text-font-family, "Inter", sans-serif) !important;
    font-size: 14px;
    font-weight: var(--font-semibold, 600);
    text-decoration: none !important;
    text-transform: none !important;
}

.cda-cart-empty-button:hover {
    background: var(--cda-color-gray-900, #000);
}
/* --------------------------------------------------------------------------
   "OR" divider above the express checkout buttons

   Drawn on Stripe's own container rather than added to cart.php, because
   there is no clean place to insert it: WooCommerce's "Proceed to checkout"
   button and Stripe's express buttons BOTH hook woocommerce_proceed_to_checkout
   at priority 20 (wc-template-hooks.php, and
   class-wc-stripe-express-checkout-element.php:92), so any callback of ours
   lands before both or after both, never between them.

   Hanging it here also means it appears only when the buttons do: Stripe
   ships that container with an inline display:none and unhides it once the
   element has actually mounted, so a store with express checkout switched
   off - or a shopper Stripe will not offer it to - never sees an orphaned
   "OR" under the checkout button.

   The rule is two background gradients, each stopping short of centre,
   rather than the checkout's flex + ::before/::after pair: a pseudo-element
   has no children to lay out, so the gap has to be left in the lines rather
   than punched out by the text sitting on top of them.
   -------------------------------------------------------------------------- */
/* Coupon list printed by the WebToffee coupon plugin above the cart form -
   this layout has its own discount field in the summary panel. */
.wt_coupon_wrapper {
    display: none;
}

/* eh-paypal-express-checkout prints its container unconditionally:
   <center><div class="eh_payapal_express_checkout_button"></div></center>,
   sitting between the checkout button and Stripe's express buttons. With
   the gateway inactive the inner div renders empty, but the wrapper still
   takes ~36px of height, which is the gap that opened up under "Proceed to
   checkout".

   Matched on :empty rather than hidden outright, so the moment that plugin
   actually renders a button the space comes back on its own. */
.eh_payapal_express_checkout_button:empty {
    display: none;
}

.cda-cart-checkout-button center:has(> .eh_payapal_express_checkout_button:empty) {
    display: none;
}

/* Stripe lays this container out as a flex box once the element mounts, so
   the divider below arrives as a flex ITEM - sitting beside the buttons on
   one line, at whatever width its own text needs, which is what put a tiny
   "OR" to the left of Apple Pay. Allow wrapping and make the divider claim a
   full row of its own. */
#wc-stripe-express-checkout-element {
    flex-wrap: wrap;
    /* Stripe writes margin-top: 1em straight onto the element as an inline
       style, so nothing but !important reaches it. */
    margin-top: 0.7em !important;
}

#wc-stripe-express-checkout-element::before {
    content: "OR";
    display: block;
    flex: 0 0 100%;
    width: 100%;
    margin: var(--space-3, 20px) 0;
    text-align: center;
    font-size: 12px;
    line-height: 1;
    color: var(--cda-color-gray-400, #868F98);
    background-image:
        linear-gradient(var(--cda-ab-border, #DEDEDE), var(--cda-ab-border, #DEDEDE)),
        linear-gradient(var(--cda-ab-border, #DEDEDE), var(--cda-ab-border, #DEDEDE));
    background-size: calc(50% - 24px) 1px, calc(50% - 24px) 1px;
    background-position: left center, right center;
    background-repeat: no-repeat;
}
/* WooCommerce appends the tax note to the total as an inline
   <small class="includes_tax"> straight after the amount (see
   wc_cart_totals_order_total_html()), so on a tax-inclusive store it sits
   on the same line and pushes the figure out of alignment with the rows
   above. Give it a line of its own under the total. */
.cda-cart-total small.includes_tax {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: var(--font-normal, 400);
    line-height: 1.3;
    color: var(--cda-ab-muted, #6C6C6C);
}
/* The theme's focus ring is a yellow outline drawn on mouse clicks as well
   as keyboard focus, so pressing the button left it ringed. :focus-visible
   keeps a ring for keyboard users - where it is the only thing showing them
   where they are - and restyles it to a dark outline outside the button,
   which reads against the light panel behind it rather than disappearing
   into the button's own near-black face. */
.cda-cart-checkout-button .checkout-button:focus,
.cda-cart-checkout-button a.button:focus {
    outline: none !important;
    box-shadow: none !important;
}

.cda-cart-checkout-button .checkout-button:focus-visible,
.cda-cart-checkout-button a.button:focus-visible {
    outline: 2px solid var(--cda-ab-dark, #212A2F) !important;
    outline-offset: 2px;
}
/* --------------------------------------------------------------------------
   Text selection

   The theme paints selected text with its brand yellow (::selection in
   coachdave-wp/assets/css/base.css, --color-primary #fc0);
   Highlight/HighlightText are the system colours the OS uses for selection
   everywhere else.

   Repeated here even though assets/css/custom-cart.css carries the same
   rule: that file is enqueued on is_cart(), which needs the
   [woocommerce_cart] shortcode in the page's POST CONTENT. This module is
   gated on is_page('cart-v2') instead, so on a test page built in Elementor
   - where the shortcode lives in _elementor_data and post_content is empty -
   this stylesheet loads and that one does not.

   ::-moz-selection needs its own rule: Firefox discards a whole selector
   list containing a pseudo-element it does not recognise.
   -------------------------------------------------------------------------- */
body.cda-cart-v2 ::selection,
body.cda-cart-v2 *::selection {
    background-color: Highlight !important;
    color: HighlightText !important;
}

body.cda-cart-v2 ::-moz-selection,
body.cda-cart-v2 *::-moz-selection {
    background-color: Highlight !important;
    color: HighlightText !important;
}