/* ============================================================================
   Collapsed bundle rows on /cart
   ----------------------------------------------------------------------------
   A bundle add lands as 5 cart lines (handset + 3 free straps + membership).
   cart_bundle_helper collapses each group into 2 display rows: the physical
   goods together, then the membership on its own. These styles bind that pair
   so it reads as one bundle rather than two unrelated line items.

   Scoped entirely under .cart-bundle-* — nothing here touches legacy cart rows.

   Not wrapped in a max-width media query (the usual convention for new mobile
   CSS) because the 5-to-2 collapse is structural in the markup, so desktop
   needs matching styles too. The namespace carries the isolation instead.

   Breakpoint note: styles.css flips .cart-list from stacked blocks to a real
   table at min-width 992px, so that's the boundary used below, not 768px.
   ========================================================================== */

/* --- Group binding -------------------------------------------------------- */

/* Catalyst Orange rule bracketing the pair. On mobile each row is a block, so
   it sits on the row itself; on desktop rows are table-rows, which don't paint
   borders reliably, so it moves to the first cell (see the 992px block). */
.cart-bundle-row {
    border-left: 3px solid #ff4305;
}

/* styles.css zebra-stripes .cart-list tr:nth-child(2n) on mobile. Left alone,
   that stripes one half of a bundle and not the other, splitting the pair
   visually. Flatten both halves so they read as one block. */
.cart-list tr.cart-bundle-row,
.cart-list tr.cart-bundle-row:nth-child(2n) {
    background: none;
}

/* Tighten the seam between the two halves so the membership reads as hanging
   off the bundle above it rather than starting a new item. The goods row keeps
   its hairline — bound by the orange rule, but still distinguishable. */
.cart-bundle-row-goods + .cart-bundle-row-membership > td {
    padding-top: 12px;
}

/* Two bundles in one cart must not merge into a single four-row block. Zebra
   striping is off and the orange rule is continuous across both, so without a
   separator here bundle 2 butts straight onto bundle 1. Matches both
   membership-then-goods and goods-then-goods (two buy-without bundles); can't
   match the first bundle, whose previous sibling is never a .cart-bundle-row. */
.cart-bundle-row + .cart-bundle-row-goods {
    border-top: 2px solid #B0B0B0;
    margin-top: 12px;
}

/* --- Includes sub-list ---------------------------------------------------- */

.cart-bundle-includes {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #5a5a5a;
}

.clear-page .cart-bundle-includes {
    color: #8a8a8a;
}

.cart-bundle-includes li {
    margin: 0 0 4px;
    padding: 0;
}

.cart-bundle-includes li:last-child {
    margin-bottom: 0;
}

/* "included" tag on the straps line — the bundle's free component, called out
   in Catalyst Orange to match the trial label already emitted by
   MY_Cart::trial_label_html(). */
.cart-bundle-free {
    color: #ff4305;
    font-weight: 700;
    text-transform: lowercase;
}

/* A bundle component that is NOT free. Reads as a price, not as a tag — the
   orange "included" treatment would actively mislead here. */
.cart-bundle-extra-price {
    font-weight: 700;
    color: #2a2a2a;
}

.clear-page .cart-bundle-extra-price {
    color: #f2f2f2;
}

/* --- Membership row eyebrow ----------------------------------------------- */

.cart-bundle-eyebrow {
    display: block;
    margin: 0 0 4px;
    font-family: 'Univers LT', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ff4305;
}

/* --- Mobile touch targets -------------------------------------------------- */

@media all and (max-width: 991px) {
    /* 44px minimum tap area on the cascade-remove link (eo-design-tokens). */
    .cart-bundle-row .remove-product {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
        padding: 0 8px;
    }

    /* The orange rule needs breathing room from the row's own padding. */
    .cart-list tr.cart-bundle-row {
        padding-left: 16px;
    }
}

/* --- Desktop table layout -------------------------------------------------- */

@media all and (min-width: 992px) {
    /* Rows become table-rows here; move the binding rule onto the first cell,
       which does paint a border. */
    .cart-bundle-row {
        border-left: 0;
        border-top: 0;
        margin-top: 0;
    }

    /* Same bundle-to-bundle separator, moved onto the cells so it draws as one
       continuous rule across the table. */
    .cart-bundle-row + .cart-bundle-row-goods > td {
        border-top: 2px solid #B0B0B0;
        padding-top: 32px;
    }

    .cart-bundle-row > td:first-child {
        border-left: 3px solid #ff4305;
        padding-left: 16px;
    }

    .cart-bundle-includes {
        font-size: 13px;
    }
}