/* ============================================================
   Shopping Cart - Responsive / Modern Layout
   Loaded by Show_big_cart.asp (responsive_cart_v1.css)

   IMPORTANT: every #tblCart rule is scoped to DIRECT cells
   (#tblCart > tbody > tr > td) so the nested shipping-estimator
   table inside the cart is never affected by the cart borders,
   card layout, or data-label rules. The estimator is handled
   separately in section 6.
   ============================================================ */

/* ---- 1. PAGE-LEVEL 2-COLUMN LAYOUT ---- */
.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

.cart-main {
    min-width: 0; /* allow the grid track to shrink instead of overflowing */
}

/* ---- 2. ORDER SUMMARY CARD (right column) ---- */
.cart-summary {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 18px;
    position: sticky;
    top: 16px;
    box-sizing: border-box;
}

.cart-summary-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f7;
}

/* Action buttons inside the summary card always stack vertically */
.cart-summary #tblActionButtons,
.cart-summary #tblActionButtons tbody,
.cart-summary #tblActionButtons tr,
.cart-summary #tblActionButtons td {
    display: block !important;
    width: 100% !important;
}

.cart-summary #tblActionButtons td {
    text-align: left !important;
}

.cart-summary #tblActionButtons td div {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
}

/* ---- 3. BUTTON UNIFORMITY (text/submit buttons only;
         image buttons keep their themed artwork) ---- */
#tblActionButtons input[type="submit"],
#tblActionButtons input[type="button"],
.cart-summary input[type="submit"],
.cart-summary input[type="button"] {
    display: block;
    height: 46px;
    padding: 0 10px;
    background-color: #1A232E;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

#tblActionButtons input[type="submit"]:hover,
#tblActionButtons input[type="button"]:hover {
    background-color: #2b3a4d;
}

/* Checkout = primary accent, pulled to the top of the summary card */
.cart-summary #tblActionButtons input[value*="CHECKOUT" i],
#tblActionButtons input[value*="CHECKOUT" i] {
    background-color: #F26722;
    order: -1;
    height: 54px;
    font-size: 15px;
}

.cart-summary #tblActionButtons input[value*="CHECKOUT" i]:hover {
    background-color: #d9550f;
}

/* ---- 4. CART ITEMS TABLE (desktop) - DIRECT CELLS ONLY ---- */
#tblCart {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #e2e8f0;
}

/* Borders/padding only on the cart's own cells, never the nested estimator */
#tblCart > tbody > tr > td {
    border: 1px solid #e2e8f0;
    padding: 10px;
    vertical-align: middle;
}

/* Header row */
#tblCart > tbody > tr:first-child > td {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}

/* ---- 5. CART ITEMS - MOBILE CARD LAYOUT (direct cells only) ---- */
@media screen and (max-width: 768px) {

    #tblCart,
    #tblCart > tbody,
    #tblCart > tbody > tr,
    #tblCart > tbody > tr > td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Hide the desktop header row */
    #tblCart > tbody > tr:first-child {
        display: none;
    }

    /* Each item row becomes a card */
    #tblCart > tbody > tr {
        margin-bottom: 18px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 14px;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    #tblCart > tbody > tr > td {
        border: none;
        padding: 7px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        text-align: right;
    }

    /* Field label generated from the data-label attribute */
    #tblCart > tbody > tr > td[data-label]:before {
        content: attr(data-label);
        font-weight: 600;
        color: #64748b;
        text-align: left;
        margin-right: auto;
        white-space: nowrap;
    }

    /* Image cell - centered, full width, no label */
    #tblCart > tbody > tr > td.cc-image {
        display: block;
        text-align: center;
        border-bottom: 1px solid #eef2f7;
        padding-bottom: 12px;
        margin-bottom: 8px;
    }
    #tblCart > tbody > tr > td.cc-image img {
        max-width: 140px;
        height: auto;
    }

    /* Product name - bold heading, full width */
    #tblCart > tbody > tr > td.cc-name {
        display: block;
        text-align: left;
        font-weight: 700;
        font-size: 16px;
        color: #1e293b;
        padding-bottom: 6px;
    }

    /* Remove cell - centered button */
    #tblCart > tbody > tr > td.cc-remove {
        justify-content: center;
        border-top: 1px dashed #eef2f7;
        margin-top: 6px;
        padding-top: 10px;
    }

    /* Rows that span the full cart (subtotal, estimator, links)
       are not product fields - no label, full-width block */
    #tblCart > tbody > tr > td[colspan] {
        display: block;
        text-align: left;
    }
    #tblCart > tbody > tr > td[colspan]:before {
        content: none;
    }

    /* Section rows (sub total, estimator, show/hide link) are full-width
       sections, NOT products - don't render them as bordered cards. Only
       real product rows (no colspan cell) remain cards. This removes the
       empty bordered rows seen around the estimator. */
    #tblCart > tbody > tr:has(> td[colspan]) {
        margin-bottom: 10px;
        border: none;
        border-radius: 0;
        padding: 0;
        background: none;
        box-shadow: none;
    }

    /* Remove the outer cart box on mobile so items, sub total, the show/hide
       link and the estimator flow as one continuous column - not separate
       bordered sections. */
    #tblCart {
        border: none;
    }

    /* Sub Total: compact, right-aligned line (label + amount on one row) */
    #tblCart > tbody > tr:has(#main-cart-subtotal) {
        display: flex;
        justify-content: flex-end;
        align-items: baseline;
        gap: 6px;
        margin: 6px 0 4px;
    }
    #tblCart > tbody > tr:has(#main-cart-subtotal) > td {
        display: inline-block;
        width: auto !important;
        border: none;
        padding: 0;
        text-align: right;
    }
    #tblCart > tbody > tr:has(#main-cart-subtotal) > td:before {
        content: none;
    }
}

/* ---- 6. SHIPPING ESTIMATOR ---- */
.shipping-estimator-wrap {
    width: 100%;
    box-sizing: border-box;
}

.shipping-estimator-wrap > table {
    width: 100% !important;
}

/* Match the estimator inputs/dropdowns to the rest of the site (38px, rounded) */
.shipping-estimator-wrap select,
.shipping-estimator-wrap input[type="text"] {
    height: 38px;
    padding: 0 10px;
    font-size: 0.95rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #1e293b;
    box-sizing: border-box;
    max-width: 100%;
}

.shipping-estimator-wrap select:focus,
.shipping-estimator-wrap input[type="text"]:focus {
    outline: none;
    border-color: #4a90d9;
    box-shadow: 0 0 0 3px rgba(74, 144, 217, .15);
}

@media screen and (max-width: 768px) {
    /* Stack only the two MAIN areas (inputs panel / totals panel);
       keep their inner tables intact so labels and values stay aligned. */
    .shipping-estimator-wrap > table,
    .shipping-estimator-wrap > table > tbody,
    .shipping-estimator-wrap > table > tbody > tr {
        display: block;
        width: 100% !important;
    }

    .shipping-estimator-wrap #trShippingArea,
    .shipping-estimator-wrap #trCalculationArea {
        display: block;
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .shipping-estimator-wrap #trCalculationArea {
        margin-top: 14px;
    }

    /* Inner tables (country/state/zip and the shipping/tax/total panel)
       fill the available width */
    .shipping-estimator-wrap #trShippingArea > table,
    .shipping-estimator-wrap #trCalculationArea > table {
        width: 100% !important;
    }

    .shipping-estimator-wrap select,
    .shipping-estimator-wrap input[type="text"] {
        width: 100% !important;
    }
}

/* ---- 7. RESPONSIVE: collapse the 2-column grid ---- */
@media screen and (max-width: 900px) {
    .cart-layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .cart-summary {
        position: static;
    }

    .cart-summary #tblActionButtons td div {
        flex-direction: column !important;
    }
}