/* =========================================================
   Vitabolic cart redesign on existing classes
   Scope: #box-cart only
   Target: desktop compact / tablet landscape 1002px - 1480px
   Does NOT change checkout summary on the right.
   ========================================================= */

@media (min-width: 1002px) and (max-width: 1480px) {

    #box-cart.cos-cart-card {
        background: #fbf8f1 !important;
        border: 1px solid #ead8b8 !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        box-shadow: 0 14px 38px rgba(0,0,0,.035) !important;
    }

    /* Hide old legacy title if this page already has visual section title above */
    #box-cart #cart-title.cos-title-legacy {
        display: none !important;
    }

    /* Alert */
    #box-cart .cart-alert {
        display: flex !important;
        align-items: flex-start !important;
        gap: 14px !important;
        padding: 20px 24px !important;
        margin: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #ead8b8 !important;
        border-radius: 0 !important;
        background: #fffdf8 !important;
        color: #171717 !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
        box-shadow: none !important;
    }

    #box-cart .cart-alert i {
        color: #26a64d !important;
        font-size: 17px !important;
        margin-top: 3px !important;
        flex: 0 0 auto !important;
    }

    #box-cart .cart-alert span {
        display: block !important;
        max-width: 95% !important;
    }

    /* Table header */
    #box-cart .cos-cart-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1.55fr) 120px 160px 110px 42px !important;
        gap: 18px !important;
        align-items: center !important;
        border-bottom: 1px solid #ead8b8 !important;
        background: #fffdf8 !important;
    }

    #box-cart .cos-cart-head span:first-child {
        display: none !important;
    }

    #box-cart .cos-cart-head span {
        text-align: center;
        font-size: 13px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        letter-spacing: 3px !important;
        text-transform: uppercase !important;
        color: #a76f08 !important;
        white-space: nowrap !important;
    }

    /* Product item */
    #box-cart .cos-cart-items {
        background: #fbf8f1 !important;
    }

    #box-cart .cos-cart-item {
        display: grid !important;
        grid-template-columns: 126px minmax(0, 1fr) 120px 160px 110px 42px !important;
        gap: 18px !important;
        align-items: center !important;
        padding: 28px 24px !important;
        border-bottom: 1px solid #ead8b8 !important;
        background: #fbf8f1 !important;
    }

    #box-cart .cos-product-img {
        width: 126px !important;
        height: 126px !important;
        border: 1px solid #ead8b8 !important;
        border-radius: 18px !important;
        background: #fff !important;
        padding: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    #box-cart .cos-product-img img {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    #box-cart .cos-product-name {
        min-width: 0 !important;
    }

    #box-cart .cos-product-name strong {
        display: block !important;
        margin: 0 0 8px !important;
        font-size: 18px !important;
        line-height: 1.28 !important;
        font-weight: 600 !important;
        color: #111 !important;
    }

    #box-cart .cos-product-name small {
        display: block !important;
        margin-bottom: 10px !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
        color: #6f6254 !important;
    }

    #box-cart .cos-product-name em {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-style: normal !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        color: #189947 !important;
        white-space: nowrap !important;
    }

    #box-cart .cos-product-price,
    #box-cart .cos-product-total {
        text-align: center;
        font-size: 17px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        color: #060606 !important;
        white-space: nowrap !important;
    }

    #box-cart .cos-product-total {
        text-align: center !important;
    }

    /* Quantity */
    #box-cart .cos-product-qty {
        display: flex !important;
        justify-content: center !important;
    }

    #box-cart .cos-qty-stepper {
        display: grid !important;
        grid-template-columns: 42px 54px 42px !important;
        align-items: center !important;
        width: 138px !important;
        height: 52px !important;
        border: 1px solid #e0cda8 !important;
        border-radius: 16px !important;
        background: #fff !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #box-cart .cos-qty-btn {
        width: 42px !important;
        height: 52px !important;
        border: 0 !important;
        background: transparent !important;
        color: #d39a22 !important;
        font-size: 21px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        padding: 0 !important;
    }

    #box-cart .cos-qty-stepper input {
        width: 54px !important;
        height: 52px !important;
        border: 0 !important;
        border-left: 0px solid #f1e5cc !important;
        border-right: 0px solid #f1e5cc !important;
        background: transparent !important;
        text-align: center !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #111 !important;
        padding: 0 !important;
        outline: none !important;
        box-shadow: none !important;
    }

    #box-cart .cos-qty-stepper input::-webkit-outer-spin-button,
    #box-cart .cos-qty-stepper input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }

    #box-cart .cos-qty-stepper input[type=number] {
        -moz-appearance: textfield !important;
    }

    /* Remove */
    #box-cart .cos-product-remove {
        display: flex !important;
        justify-content: flex-end !important;
    }

    #box-cart .cos-remove-link {
        width: 40px !important;
        height: 40px !important;
        border: 1px solid #e0cda8 !important;
        border-radius: 50% !important;
        background: #fffaf0 !important;
        color: #c89223 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        text-decoration: none !important;
        box-shadow: none !important;
        font-size: 22px !important;
        line-height: 1 !important;
    }

    #box-cart .cos-remove-link span {
        display: block !important;
        transform: translateY(-1px) !important;
    }

    /* Discount row */
    #box-cart .cos-cart-bottom {
        padding: 0 !important;
        border-bottom: 1px solid #ead8b8 !important;
        background: #fffdf8 !important;
    }

    #box-cart .cos-discount-box {
        display: grid !important;
        grid-template-columns: minmax(210px, .9fr) minmax(260px, 1fr) 190px !important;
        gap: 18px !important;
        align-items: center !important;
        padding: 24px !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #box-cart .cos-discount-box label {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin: 0 !important;
        color: #9b6a0c !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
    }

    #box-cart .cos-discount-box label i {
        color: #d39a22 !important;
        margin-top: 2px !important;
        flex: 0 0 auto !important;
    }

    #box-cart .cos-discount-box input {
        width: 100% !important;
        height: 56px !important;
        box-sizing: border-box !important;
        border: 1px solid #e0cda8 !important;
        border-radius: 16px !important;
        background: #fff !important;
        color: #111 !important;
        font-size: 15px !important;
        padding: 0 18px !important;
        box-shadow: none !important;
        outline: none !important;
    }

    #box-cart .cos-discount-box input::placeholder {
        color: #b5aa99 !important;
    }

    #box-cart .cos-discount-box #apply-discount-code {
        height: 56px !important;
        border: 0 !important;
        border-radius: 16px !important;
        background: linear-gradient(180deg, #dfb145, #c99120) !important;
        color: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 0 16px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    /* Actions */
    #box-cart .cos-cart-actions {
        display: grid !important;
        grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) !important;
        gap: 18px !important;
        align-items: center !important;
        padding: 24px !important;
        border-bottom: 1px solid #ead8b8 !important;
        background: #fbf8f1 !important;
    }

    #box-cart .cos-cart-update-hidden {
        display: none !important;
    }

    #box-cart .cos-continue-shopping,
    #box-cart .cos-empty-cart {
        min-height: 54px !important;
        border-radius: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 0 20px !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: .7px !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }

    #box-cart .cos-continue-shopping {
        border: 1px solid #d5a23a !important;
        background: transparent !important;
        color: #c18b18 !important;
    }

    #box-cart .cos-empty-cart {
        border: 1px solid #e0cda8 !important;
        background: #fffaf0 !important;
        color: #9f6b13 !important;
    }

    #box-cart .cos-empty-cart span {
        display: inline !important;
    }

    /* Engros note */
    #box-cart .cos-engros-note {
        padding: 17px 24px 22px !important;
        margin: 0 !important;
        background: #fbf8f1 !important;
        color: #111 !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
    }

    #box-cart .cos-engros-note i {
        margin-right: 8px !important;
    }

    #box-cart .cos-engros-note a {
        color: #d8422f !important;
        text-decoration: none !important;
    }
}

/* Slightly tighter layout for 1002px - 1180px */
@media (min-width: 1002px) and (max-width: 1300px) {
    #box-cart .cos-cart-head {
        grid-template-columns: minmax(0, 1.35fr) 100px 132px 90px 36px !important;
        gap: 12px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #box-cart .cos-cart-item {
        grid-template-columns: 104px minmax(0, 1fr) 100px 132px 90px 36px !important;
        gap: 12px !important;
        padding: 24px 20px !important;
    }

    #box-cart .cos-product-img {
        width: 104px !important;
        height: 104px !important;
    }

    #box-cart .cos-product-name strong {
        font-size: 16px !important;
    }

    #box-cart .cos-product-name small,
    #box-cart .cos-product-name em {
        font-size: 13px !important;
    }

    #box-cart .cos-product-price,
    #box-cart .cos-product-total {
        font-size: 15px !important;
    }

    #box-cart .cos-qty-stepper {
        grid-template-columns: 36px 48px 36px !important;
        width: 120px !important;
        height: 48px !important;
        border-radius: 14px !important;
    }

    #box-cart .cos-qty-btn {
        width: 36px !important;
        height: 48px !important;
    }

    #box-cart .cos-qty-stepper input {
        width: 48px !important;
        height: 48px !important;
    }

    #box-cart .cos-discount-box {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 22px 20px !important;
    }

    #box-cart .cos-cart-actions {
        padding: 22px 20px !important;
    }
}

/* Under 1002px: keep it readable and avoid horizontal overflow */
@media (max-width: 1001px) {
    #box-cart.cos-cart-card {
        border-radius: 20px !important;
        overflow: hidden !important;
    }

    #box-cart #cart-title.cos-title-legacy {
        display: none !important;
    }

    #box-cart .cart-alert {
        display: flex !important;
        gap: 12px !important;
        padding: 18px !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    #box-cart .cos-cart-head {
        display: none !important;
    }

    #box-cart .cos-cart-item {
        display: grid !important;
        grid-template-columns: 104px minmax(0, 1fr) 38px !important;
        gap: 14px !important;
        padding: 20px 18px !important;
        border-bottom: 1px solid #ead8b8 !important;
        position: relative !important;
    }

    #box-cart .cos-product-img {
        grid-row: span 4 !important;
        width: 104px !important;
        height: 104px !important;
        border: 1px solid #ead8b8 !important;
        border-radius: 16px !important;
        background: #fff !important;
        padding: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    #box-cart .cos-product-img img {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    #box-cart .cos-product-name {
        grid-column: 2 / 3 !important;
    }

    #box-cart .cos-product-name strong {
        display: block !important;
        font-size: 16px !important;
        line-height: 1.25 !important;
        margin-bottom: 6px !important;
    }

    #box-cart .cos-product-name small {
        display: block !important;
        font-size: 13px !important;
        color: #6f6254 !important;
        margin-bottom: 8px !important;
    }

    #box-cart .cos-product-name em {
        display: inline-flex !important;
        gap: 6px !important;
        font-size: 13px !important;
        font-style: normal !important;
        color: #189947 !important;
    }

    #box-cart .cos-product-price {
        grid-column: 2 / 3 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    #box-cart .cos-product-price::before {
        content: "Preț: ";
        font-weight: 500 !important;
        color: #6f6254 !important;
    }

    #box-cart .cos-product-qty {
        grid-column: 2 / 3 !important;
    }

    #box-cart .cos-qty-stepper {
        width: 128px !important;
        height: 48px !important;
        display: grid !important;
        grid-template-columns: 38px 52px 38px !important;
        border: 1px solid #e0cda8 !important;
        border-radius: 14px !important;
        background: #fff !important;
        overflow: hidden !important;
    }

    #box-cart .cos-qty-btn {
        border: 0 !important;
        background: transparent !important;
        color: #d39a22 !important;
        font-size: 20px !important;
    }

    #box-cart .cos-qty-stepper input {
        width: 52px !important;
        border: 0 !important;
        border-left: 1px solid #f1e5cc !important;
        border-right: 1px solid #f1e5cc !important;
        text-align: center !important;
        font-weight: 600 !important;
        background: transparent !important;
    }

    #box-cart .cos-product-total {
        grid-column: 2 / 3 !important;
        font-size: 17px !important;
        font-weight: 600 !important;
    }

    #box-cart .cos-product-total::before {
        content: "Total: ";
        font-weight: 500 !important;
        color: #6f6254 !important;
    }

    #box-cart .cos-product-remove {
        grid-column: 4 / 4 !important;
        grid-row: 1 / 2 !important;
    }

    #box-cart .cos-remove-link {
        width: 36px !important;
        height: 36px !important;
        border: 1px solid #e0cda8 !important;
        border-radius: 50% !important;
        background: #fffaf0 !important;
        color: #c89223 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        text-decoration: none !important;
        font-size: 20px !important;
    }

    #box-cart .cos-discount-box {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 20px 18px !important;
        border-bottom: 1px solid #ead8b8 !important;
    }

    #box-cart .cos-discount-box label {
        font-size: 14px !important;
        line-height: 1.4 !important;
        color: #9b6a0c !important;
        font-weight: 600 !important;
    }

    #box-cart .cos-discount-box input,
    #box-cart .cos-discount-box #apply-discount-code {
        width: 100% !important;
        height: 54px !important;
        border-radius: 15px !important;
        box-sizing: border-box !important;
    }

    #box-cart .cos-cart-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 20px 18px !important;
    }

    #box-cart .cos-cart-update-hidden {
        display: none !important;
    }

    #box-cart .cos-continue-shopping,
    #box-cart .cos-empty-cart {
        width: 100% !important;
        min-height: 54px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        border-radius: 15px !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        font-weight: 600 !important;
        font-size: 14px !important;
    }

    #box-cart .cos-engros-note {
        padding: 16px 18px 20px !important;
        font-size: 14px !important;
    }
}

/* =========================================================
   Vitabolic cart redesign HOTFIX v2
   Include AFTER vtb-cart-current-classes-redesign.css
   Fixes 1002px - 1180px where the cart column is too narrow.
   ========================================================= */

@media (min-width: 1002px) and (max-width: 1300px) {

    /* The checkout page still has 2 columns here, so the cart box is narrow.
       Do NOT use table/grid columns inside the left cart card. */
    #box-cart.cos-cart-card {
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    #box-cart .cos-cart-head {
        display: none !important;
    }

    #box-cart .cart-alert {
        padding: 20px 22px !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
    }

    #box-cart .cart-alert span {
        max-width: none !important;
    }

    #box-cart .cos-cart-item {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 112px minmax(0, 1fr) !important;
        grid-template-areas:
            "img name"
            "img price"
            "img qty"
            "img total" !important;
        gap: 12px 16px !important;
        align-items: start !important;
        padding: 24px 22px 26px !important;
        border-bottom: 1px solid #ead8b8 !important;
        background: #fbf8f1 !important;
    }

    #box-cart .cos-product-img {
        grid-area: img !important;
        width: 112px !important;
        height: 112px !important;
        border-radius: 17px !important;
        align-self: start !important;
    }

    #box-cart .cos-product-name {
        grid-area: name !important;
        padding-right: 42px !important;
        min-width: 0 !important;
    }

    #box-cart .cos-product-name strong {
        font-size: 17px !important;
        line-height: 1.25 !important;
        margin-bottom: 7px !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    #box-cart .cos-product-name small {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }

    #box-cart .cos-product-name em {
        font-size: 13px !important;
    }

    #box-cart .cos-product-price {
        grid-area: price !important;
        display: flex !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
        font-size: 15px !important;
        text-align: left !important;
    }

    #box-cart .cos-product-price::before {
        content: "Preț unitar" !important;
        font-weight: 500 !important;
        color: #6f6254 !important;
    }

    #box-cart .cos-product-qty {
        grid-area: qty !important;
        display: flex !important;
        justify-content: flex-start !important;
        margin-top: 2px !important;
    }

    #box-cart .cos-qty-stepper {
        width: 132px !important;
        height: 48px !important;
        grid-template-columns: 38px 56px 38px !important;
        border-radius: 14px !important;
    }

    #box-cart .cos-qty-btn {
        width: 38px !important;
        height: 48px !important;
    }

    #box-cart .cos-qty-stepper input {
        width: 56px !important;
        height: 48px !important;
        font-size: 17px !important;
    }

    #box-cart .cos-product-total {
        grid-area: total !important;
        display: flex !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
        font-size: 18px !important;
        text-align: left !important;
        padding-top: 4px !important;
    }

    #box-cart .cos-product-total::before {
        content: "Total produs" !important;
        font-weight: 500 !important;
        color: #6f6254 !important;
    }

    #box-cart .cos-product-remove {
        position: absolute !important;
        top: 18px !important;
        right: 18px !important;
        display: flex !important;
        justify-content: center !important;
        z-index: 3 !important;
    }

    #box-cart .cos-remove-link {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 20px !important;
    }

    #box-cart .cos-discount-box {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 22px !important;
    }

    #box-cart .cos-discount-box label {
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    #box-cart .cos-discount-box input {
        height: 54px !important;
    }

    #box-cart .cos-discount-box #apply-discount-code {
        height: 54px !important;
    }

    #box-cart .cos-cart-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 22px !important;
    }

    #box-cart .cos-continue-shopping,
    #box-cart .cos-empty-cart {
        width: 100% !important;
        min-height: 54px !important;
        box-sizing: border-box !important;
    }

    #box-cart .cos-engros-note {
        padding: 16px 22px 22px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
}

/* From 1181px upward, the original redesigned table layout can be used. */
@media (min-width: 1301px) and (max-width: 1480px) {
    #box-cart .cos-cart-head {
        grid-template-columns: minmax(0, 1.55fr) 120px 160px 110px 42px !important;
    }

    #box-cart .cos-cart-item {
        grid-template-columns: 126px minmax(0, 1fr) 120px 160px 110px 42px !important;
    }
}