/* Align discount preview with cart subtotal */
.card-total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 10px;
    text-transform: uppercase;
}

.card-total span {
    margin-left: 10px;
}

#cartDiscountAmount_ot_quantity_discount,
#cartDiscountAmount_ot_quantity_discount2,
#cartDiscountAmount_ot_quantity_discount3,
#cartDiscountAmount_ot_quantity_discount4,
#cartDiscountAmount_ot_quantity_discount5,
#cartDiscountAmount_ot_quantity_discount6 {
    font-weight: bold;
    color: #d9534f; /* Red for discounts, adjust as needed */
}

#cartNewSubTotalAmount {
    border-bottom: 1px solid #F2F2F2;
    border-top: medium none;
    text-transform: uppercase;
    text-align: right;
    padding: 20px 0;
    font-size: 24px;
    line-height: 27px;
    font-weight: 600;
}

/* =========================================================================
   PER-ROW TOTAL  —  hide on mobile (redundant with cart sub-total)
   ========================================================================= */
@media (max-width: 790px) {
    .cart-pg .tt-shopcart-table-02 td.cartTotalDisplay,
    #shoppingCartDefault td.cartTotalDisplay {
        display: none;
    }
}


/* =========================================================================
   CART ACTION BUTTONS
   -------------------------------------------------------------------------
   Template renders four real HTML buttons with consistent classes:
     CONTINUE SHOPPING   <a class="btn btn-border">
     UPDATE              <button class="btn btn-border smc-btn-update">
     PROCEED TO CHECKOUT <a class="btn smc-btn-primary">
     SHIPPING ESTIMATOR  <a class="btn btn-border smc-btn-shipping-estimator">

   Strategy: shared base shape on all four. Primary CTA gets distinct
   green styling. Mobile stacks everything full-width.
   ========================================================================= */


/* ---- Cart action-row alignment fix ----
   The global .buttonRow.back component is used on content/info pages and
   adds margin-top, padding-top, a border-top divider, and a generated left
   arrow.  The cart template also uses .buttonRow.back for Continue Shopping,
   Update, and Shipping Estimator, so those global rules were leaking into
   the cart action area and pulling the buttons out of alignment.

   These cart-scoped rules opt the shopping-cart action buttons out of the
   global back-button chrome while leaving the site-wide .buttonRow.back
   component unchanged everywhere else.
*/
#shoppingcartBody #shoppingCartDefault .tt-shopcart-btn .buttonRow,
#shoppingcartBody #shoppingCartDefault .tt-shopcart-btn .buttonRow.back,
#shoppingcartBody #shoppingCartDefault .tt-shopcart-btn .buttonRow.forward {
    margin: 0;
    padding: 0;
    border-top: 0;
    display: flex;
    align-items: center;
}

#shoppingcartBody #shoppingCartDefault .buttonRow.back > a::before {
    content: none;
    display: none;
}

#shoppingcartBody #shoppingCartDefault .tt-shopcart-btn .btn {
    min-height: 52px;
}

@media (min-width: 1200px) {
    #shoppingcartBody #shoppingCartDefault .tt-shopcart-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        width: 100%;
        padding: 28px 0 22px;
    }

    #shoppingcartBody #shoppingCartDefault .tt-shopcart-btn .col-left,
    #shoppingcartBody #shoppingCartDefault .tt-shopcart-btn .col-right {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    #shoppingcartBody #shoppingCartDefault .tt-shopcart-btn .col-left {
        justify-content: flex-start;
        flex: 1 1 auto;
    }

    #shoppingcartBody #shoppingCartDefault .tt-shopcart-btn .col-right,
    #shoppingcartBody #shoppingCartDefault .tt-shopcart-btn .col-right.wt-center-cont {
        justify-content: flex-end !important;
        flex: 0 1 auto;
        gap: 10px;
    }

    #shoppingcartBody #shoppingCartDefault .tt-shopcart-btn .col-right .buttonRow {
        margin: 0 !important;
    }
}

/* Keep Shipping Estimator as its own lower action row without inheriting
   the content-page back-button spacing/arrow. */
#shoppingcartBody #shoppingCartDefault > .buttonRow.back {
    margin-top: 18px;
    padding-top: 20px;
    border-top: 1px solid #f2f2f2;
    display: flex;
    justify-content: flex-start;
}

/* ---- Shared base: applied to all cart action buttons ---- */
.cart-pg .tt-shopcart-btn .btn,
#shoppingCartDefault .buttonRow .btn,
#shoppingCartDefault .buttonRow .btn.btn-border,
#shoppingCartDefault .buttonRow > a.btn,
#shoppingCartDefault .buttonRow > button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    color: #ffffff;
    border: 1px solid #1a1a1a;
    padding: 12px 24px;
    min-height: 46px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
    line-height: 1.2;
    border-radius: 2px;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    /* Reset any browser <button> defaults */
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.cart-pg .tt-shopcart-btn .btn:hover,
#shoppingCartDefault .buttonRow .btn:hover,
#shoppingCartDefault .buttonRow > a.btn:hover,
#shoppingCartDefault .buttonRow > button.btn:hover {
    background: #333333;
    border-color: #333333;
    color: #ffffff;
}

.cart-pg .tt-shopcart-btn .btn:active,
#shoppingCartDefault .buttonRow .btn:active {
    transform: translateY(1px);
}

.cart-pg .tt-shopcart-btn .btn:focus-visible,
#shoppingCartDefault .buttonRow .btn:focus-visible {
    outline: 2px solid #1a73e8;
    outline-offset: 2px;
}

/* CONTINUE SHOPPING has Wokiee's icon-e-19 inside; keep it inheriting white. */
.cart-pg .tt-shopcart-btn .btn i,
#shoppingCartDefault .buttonRow .btn i {
    color: inherit;
    margin-right: 6px;
}

/* ---- PROCEED TO CHECKOUT — primary CTA, coffee green, slightly larger ----
   We use !important here because Bootstrap 5's .btn rule uses CSS custom
   properties (--bs-btn-bg etc.) that can override our background unless
   we either set those variables or force with !important. We do both
   for belt-and-suspenders coverage.

   The selector chain matches three contexts:
   - #shoppingCartDefault .smc-btn-primary (cart page wrapper ID)
   - .cart-pg .smc-btn-primary (body class on cart page)
   - a.smc-btn-primary (no-prefix fallback — works anywhere) */
#shoppingCartDefault .smc-btn-primary,
.cart-pg .smc-btn-primary,
a.smc-btn-primary,
.btn.smc-btn-primary {
    background: var(--smc-buy, #2d7a3e) !important;
    background-color: var(--smc-buy, #2d7a3e) !important;
    border-color: var(--smc-buy, #2d7a3e) !important;
    color: #ffffff !important;
    padding: 14px 28px;
    min-height: 52px;
    font-size: 14px;
    font-weight: 700;
    /* Override Bootstrap's CSS variables too, so the var() lookups inside
       Bootstrap's .btn rule resolve to our green. */
    --bs-btn-bg: var(--smc-buy, #2d7a3e);
    --bs-btn-color: #ffffff;
    --bs-btn-border-color: var(--smc-buy, #2d7a3e);
    --bs-btn-hover-bg: var(--smc-buy-hover, #246430);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-border-color: var(--smc-buy-hover, #246430);
    --bs-btn-active-bg: var(--smc-buy-hover, #246430);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-border-color: var(--smc-buy-hover, #246430);
}

/* Explicitly force white on all descendants (the <i> icon, any inner spans,
   etc.) — fixes invisible text/icon when child selectors override color. */
#shoppingCartDefault .smc-btn-primary *,
.cart-pg .smc-btn-primary *,
a.smc-btn-primary *,
.btn.smc-btn-primary * {
    color: #ffffff !important;
}

#shoppingCartDefault .smc-btn-primary:hover,
.cart-pg .smc-btn-primary:hover,
a.smc-btn-primary:hover,
.btn.smc-btn-primary:hover {
    background: var(--smc-buy-hover, #246430) !important;
    background-color: var(--smc-buy-hover, #246430) !important;
    border-color: var(--smc-buy-hover, #246430) !important;
    color: #ffffff !important;
}
#shoppingCartDefault .smc-btn-primary:hover *,
.cart-pg .smc-btn-primary:hover *,
a.smc-btn-primary:hover *,
.btn.smc-btn-primary:hover * {
    color: #ffffff !important;
}

/* ---- Mobile: stack all buttons full-width (max 320px), centered ---- */
@media (max-width: 575px) {
    .cart-pg .tt-shopcart-btn {
        display: block;
    }
    .cart-pg .tt-shopcart-btn .col-left,
    .cart-pg .tt-shopcart-btn .col-right {
        display: block !important;
        width: 100%;
    }
    /* Override Bootstrap .d-flex on .col-right at mobile */
    .cart-pg .tt-shopcart-btn .col-right.d-flex {
        display: block !important;
    }
    /* Each .buttonRow becomes a centered full-width container */
    .cart-pg .tt-shopcart-btn .buttonRow,
    #shoppingCartDefault .buttonRow {
        display: block;
        width: 100%;
        max-width: 320px;
        margin: 0 auto 10px !important;
    }
    /* Buttons themselves go full-width inside their .buttonRow */
    .cart-pg .tt-shopcart-btn .btn,
    #shoppingCartDefault .buttonRow .btn,
    #shoppingCartDefault .buttonRow > a.btn,
    #shoppingCartDefault .buttonRow > button.btn {
        display: flex;
        width: 100%;
    }
    /* Primary CTA stays prominent */
    #shoppingCartDefault .smc-btn-primary,
    .cart-pg .smc-btn-primary {
        min-height: 54px;
    }
}

/* ---- Desktop: floor widths so buttons don't shrink-wrap ---- */
@media (min-width: 576px) {
    .cart-pg .tt-shopcart-btn .btn,
    #shoppingCartDefault .buttonRow .btn,
    #shoppingCartDefault .buttonRow > a.btn,
    #shoppingCartDefault .buttonRow > button.btn {
        min-width: 200px;
    }
    #shoppingCartDefault .smc-btn-primary,
    .cart-pg .smc-btn-primary {
        min-width: 240px;
    }
}


/* ---- Per-row Update / Remove icon buttons ----
   Replaces legacy image-button update and trash-icon image with
   Font Awesome glyphs in a clean square button. */
.smc-cart-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #f5f5f0;
    color: #555;
    border: 1px solid #d8d6d0;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.smc-cart-icon-btn:hover,
.smc-cart-icon-btn:focus {
    text-decoration: none;
    outline: 0;
}

/* Update icon - subtle blue on hover */
.smc-cart-icon-btn-update:hover,
.smc-cart-icon-btn-update:focus {
    background: var(--smc-action-hover, #007bff);
    color: #ffffff;
    border-color: var(--smc-action-hover, #007bff);
}

/* Remove icon - subtle red on hover */
.smc-cart-icon-btn-remove:hover,
.smc-cart-icon-btn-remove:focus {
    background: #c0392b;
    color: #ffffff;
    border-color: #c0392b;
}

/* Center the icon column cells vertically with the row content */
td.cartQuantityUpdate,
td.cartRemoveItemDisplay {
    vertical-align: middle;
    text-align: center;
}