.elementor-40 .elementor-element.elementor-element-5ecb3df2{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:5%;--padding-bottom:5%;--padding-left:0%;--padding-right:0%;}.elementor-40 .elementor-element.elementor-element-56ab30dd{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );border-style:none;--border-style:none;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-40 .elementor-element.elementor-element-56ab30dd{--width:90%;}}/* Start custom CSS for shortcode, class: .elementor-element-9fc15f1 *//* ===============================
   OVERALL CART WRAPPER
   Controls the outer layout — left cards + right summary side by side
================================= */
.cw-wrap {
    display: flex;
    gap: 24px; /* space between product cards and order summary */
    align-items: flex-start; /* aligns both columns to the top */
    font-family: 'Inter', sans-serif;
    max-width: 1250px; /* maximum width of the entire cart section */
    margin: 0 auto; /* centers the cart on the page */
}

/* ===============================
   LEFT COLUMN — PRODUCT CARDS LIST
   The column that holds all the product cards stacked vertically
================================= */
.cw-left {
    display: flex;
    flex-direction: column;
    gap: 16px; /* space between each product card */
    width: 790px; /* width of the left column */
    flex-shrink: 0;
    min-width: 0;
}

/* ===============================
   INDIVIDUAL PRODUCT CARD
   The white rounded box for each cart item
================================= */
.cw-card {
    display: flex;
    align-items: center;
    gap: 16px; /* space between image, info and right column */
    background: #fff; /* card background color */
    border: 1px solid #EBEBEB; /* card border color */
    border-radius: 16px; /* card corner roundness */
    padding: 16px; /* inner spacing inside the card */
    box-sizing: border-box;
    width: 790px; /* card width — should match .cw-left width */
    height: 312px; /* card height */
}

/* ===============================
   PRODUCT IMAGE
   The square image on the left of each card
================================= */
.cw-card .cw-img {
    width: 268px; /* image width */
    height: 268px; /* image height */
    object-fit: cover; /* crops image to fit without stretching */
    border-radius: 35px !important; /* image corner roundness — !important overrides theme styles */
    flex-shrink: 0; /* prevents image from shrinking */
    margin-right: 30px;
}

/* ===============================
   PRODUCT INFO — MIDDLE SECTION
   Contains category, title, size label and description
================================= */
.cw-info {
    flex: 1; /* takes up all remaining space between image and right column */
    display: flex;
    flex-direction: column;
    gap: 6px; /* space between category, title, size, description */
}

/* ===============================
   PRODUCT TITLE
   The big bold product name
================================= */
.cw-name {
    width: 50%;
    color: #17171A;
font-family: Oswald;
font-size: 60px;
font-style: normal;
font-weight: 700;
line-height: 37px; /* 123.333% */
text-transform: uppercase; /* makes title all caps */
}

/* ===============================
   PRODUCT SIZE / VARIATION LABEL
   Shown below the title e.g. "16oz / Purple"
================================= */
.cw-size {
    font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 18.09px; /* 133.333% */
text-transform: uppercase;
    color: #000; /* size label color */
    margin-top: -15px;
}

/* ===============================
   PRODUCT EXCERPT
   The small text below the title and size
================================= */
.cw-desc {
    font-size: 13px; /* excerpt font size */
    color: #52525C; /* excerpt text color */
    line-height: 1.5;
    margin: 0;
    width: 75%;
}

/* ===============================
   RIGHT COLUMN INSIDE CARD
   Contains trash icon, price and quantity — stacked vertically on the right
================================= */
.cw-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* aligns everything to the right */
    justify-content: flex-start; /* stacks items from the top */
    gap: 10px; /* space between trash icon, price and quantity */
    flex-shrink: 0;
    padding-top: 4px;
}

/* ===============================
   TRASH / DELETE ICON
   The red delete icon at the top right of the card
================================= */
.cw-delete {
    display: flex;
    margin-bottom: 4px;
    width: 28px;
height: 31.518px;/* extra space below the trash icon */
}

/* ===============================
   PRODUCT PRICE
   The price shown on the right of each card
================================= */
.cw-price {
    color: #18181B;
font-family: Inter;
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: 49.723px;
}

/* ===============================
   QUANTITY SELECTOR
   The - number + pill shaped .elementor-40 .elementor-element.elementor-element-9fc15f1
================================= */
.cw-qty {
    display: flex;
    align-items: center;
    gap: 12px; /* space between minus, number and plus */
    border: 1.5px solid #E7000B; /* border color of quantity box */
    border-radius: 30px; /* roundness of quantity box */
    padding: 8px 18px; /* inner spacing of quantity box */
    font-size: 15px;
    font-weight: 600;
}

/* ===============================
   QUANTITY PLUS AND MINUS BUTTONS
================================= */
/* ===============================
   QUANTITY PLUS AND MINUS BUTTONS
   Now using button elements for proper AJAX functionality
================================= */
.cw-q {
    background: none; /* removes default button background */
    border: none; /* removes default button border */
    cursor: pointer; /* shows pointer cursor on hover */
    color: #111; /* color of + and - buttons */
    font-size: 18px; /* size of + and - symbols */
    line-height: 1;
    padding: 0; /* removes default button padding */
    font-weight: 600;
}

/* ===============================
   ORDER SUMMARY BOX — RIGHT SIDE
   The white box on the right showing subtotal, shipping, total
================================= */
.cw-summary {
    width: 400px; /* summary box width */
    height: 390px; /* summary box height */
    flex-shrink: 0;
    background: #fff; /* summary background color */
    border: 1px solid #EBEBEB; /* summary border color */
    border-radius: 16px; /* summary corner roundness */
    padding: 32px; /* inner spacing of summary box */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* ===============================
   ORDER SUMMARY TITLE
   The "Order Summary" heading text
================================= */
.cw-sum-title {
    font-size: 22px; /* title font size */
    font-weight: 800; /* title boldness */
    color: #111; /* title color */
    margin: 0 0 24px; /* space below the title */
}

/* ===============================
   SUMMARY ROWS — SUBTOTAL AND SHIPPING
   Each row with a label on the left and value on the right
================================= */
.cw-sum-row {
    display: flex;
    justify-content: space-between; /* pushes label left and value right */
    font-size: 14px; /* row text size */
    color: #52525C; /* row text color */
    margin-bottom: 16px; /* space between rows */
}

/* ===============================
   DIVIDER LINE BETWEEN ROWS AND TOTAL
================================= */
.cw-sum-divider {
    border-top: 1px solid #EBEBEB; /* divider line color */
    margin: 16px 0; /* space above and below divider */
}

/* ===============================
   TOTAL ROW
   The bold total amount row
================================= */
.cw-sum-total {
    font-size: 16px; /* total font size */
    font-weight: 700; /* total boldness */
    color: #111; /* total text color */
}

/* ===============================
   PROCEED TO CHECKOUT BUTTON
================================= */
.cw-checkout-btn {
    display: block;
    width: 100%;
    background: #E7000B; /* button background color */
    color: #fff !important; /* button text color */
    text-align: center;
    padding: 18px; /* button inner spacing */
    border-radius: 35px; /* button roundness */
    font-size: 13px; /* button text size */
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none !important;
    margin: auto 0 16px; /* pushes button to bottom of summary box */
    box-sizing: border-box;
}

/* ===============================
   CHECKOUT BUTTON HOVER STATE
================================= */
.cw-checkout-btn:hover {
    background: #c00009; /* button color when hovered */
}

/* ===============================
   FAST SHIPPING NOTE
   The small truck icon + text at the bottom of summary
================================= */
.cw-shipping-note {
    display: flex;
    align-items: center;
    gap: 8px; /* space between truck icon and text */
    font-size: 13px; /* shipping note text size */
    color: #52525C; /* shipping note text color */
    justify-content: center;
}

/* ===============================
   MOBILE RESPONSIVE — TABLETS AND PHONES
   Stacks everything vertically on smaller screens
================================= */
@media (max-width: 1024px) {
    .cw-wrap {
        flex-direction: column;
        padding: 12px;
    }

    .cw-left {
        width: 100%;
        gap: 12px;
    }

    /* Card becomes vertical — image on top, content below */
    .cw-card {
        width: 100%;
        height: auto;
        padding: 12px;
        gap: 12px;
        flex-direction: column; /* stacks image and content vertically */
        align-items: stretch;
    }

    /* Image takes full width on mobile */
    .cw-card .cw-img {
    border-radius: 35px !important;
    object-fit: contain;
    display: block; /* makes margin auto work */
    margin: 0 auto;
    margin-bottom: 20px;/* changed from cover to contain */
}

    /* Info and right column sit side by side below the image */
    .cw-info {
        flex: 1;
        gap: 4px;
    }

    .cw-name {
        font-size: 16px;
    }

    .cw-size {
        font-size: 11px;
    }

    .cw-desc {
        font-size: 12px;
        -webkit-line-clamp: 2;
    }

    /* Right column sits below info */
    .cw-right {
        flex-direction: row; /* price and quantity side by side */
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding-top: 0;
        width: 100%;
    }

    /* Move trash icon to top right of card using absolute positioning */
    .cw-delete {
        display: none; /* hides trash icon on mobile */
    }

    .cw-card {
        position: relative; /* needed for absolute trash icon */
    }

    .cw-price {
        font-size: 18px;
    }

    .cw-qty {
        padding: 6px 14px;
        gap: 10px;
        font-size: 14px;
    }

    .cw-q {
        font-size: 16px;
    }

    .cw-summary {
        width: 100%;
        height: auto;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5ecb3df2 */.eael-cart-qty-plus{
    display:none;
}
.eael-cart-qty-minus{
    display:none;
}/* End custom CSS */