/* ==============================================
   Mobile Responsive Styles
   تحسينات التصميم المتجاوب للموبايل والتابلت
   ============================================== */

/* ========================================
   1. Global Mobile Improvements
   ======================================== */

/* Improve touch targets - minimum 44px */
@media (max-width: 991px) {

    a,
    button,
    .btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
    }

    /* Better font rendering */
    body {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
}

/* ========================================
   2. Mobile Navigation Improvements
   ======================================== */

@media (max-width: 767px) {

    /* Mobile nav bar */
    .mobile-nav {
        display: flex !important;
        padding: 0.5em 1em;
        height: 60px;
    }

    .mobile-nav .amado-navbar-brand img {
        max-height: 45px;
        width: auto;
    }

    /* Sidebar improvements */
    .header-area {
        padding: 40px 25px !important;
        width: 280px !important;
        max-width: 280px !important;
    }

    .header-area .nav-close {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 16px;
    }

    .header-area .logo {
        margin-bottom: 50px;
    }

    .header-area .logo img {
        max-width: 120px;
    }

    .header-area .amado-nav li a {
        padding: 15px 0;
        font-size: 15px;
    }

    .header-area .amado-btn-group .amado-btn {
        width: 100%;
        text-align: center;
    }

    /* Main content margin */
    .main-content-wrapper {
        margin-top: 60px !important;
    }
}

/* ========================================
   3. Product Grid Responsiveness
   ======================================== */

/* Tablet */
@media (max-width: 991px) and (min-width: 768px) {
    .products-catagories-area {
        padding: 15px;
    }

    /* Grid handled by style.css */
}

/* Mobile landscape / Large phones */
@media (max-width: 767px) and (min-width: 576px) {
    .products-catagories-area {
        padding: 10px;
    }

    /* Grid handled by style.css */
}

/* Mobile portrait */
@media (max-width: 575px) {
    .products-catagories-area {
        padding: 5px;
    }

    /* Grid handled by style.css */

    /* Product card adjustments */
    .single-products-catagory {
        border-radius: 6px !important;
    }

    .single-products-catagory .hover-content {
        padding: 8px !important;
    }

    .single-products-catagory .hover-content p {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }

    .single-products-catagory .hover-content h4 {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .single-products-catagory .hover-content .line {
        width: 25px;
        height: 2px;
        margin-bottom: 6px;
    }
}

/* Small phones */
@media (max-width: 374px) {
    /* Grid handled by style.css */

    .single-products-catagory .hover-content p {
        font-size: 10px !important;
    }

    .single-products-catagory .hover-content h4 {
        font-size: 11px !important;
    }
}

/* ========================================
   4. Cart Table Mobile Layout
   ======================================== */

@media (max-width: 767px) {
    .cart-table-area {
        padding: 10px !important;
    }

    .cart-title h2 {
        font-size: 20px;
        text-align: center;
        margin-bottom: 20px;
    }

    /* ==========================================================================
       MOBILE CART REDESIGN - POLISHED TABLE LAYOUT (Final Refined)
       ========================================================================== */

    @media only screen and (max-width: 767px) {

        /* 1. TABLE STRUCTURE - Clean & Spaced */
        body .cart-table table {
            display: table !important;
            width: 100% !important;
            border-collapse: separate !important;
            border-spacing: 0 15px !important;
            /* More breathing room between rows */
        }

        /* 2. HEADER - Elegant Gray Bar */
        body .cart-table thead {
            display: table-header-group !important;
        }

        body .cart-table thead tr th {
            border: none !important;
            padding: 12px 5px !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            color: #555 !important;
            text-align: center !important;
            background-color: #f8f9fa !important;
            /* Add subtle border radius to header bar */
        }

        body .cart-table thead tr th:first-child {
            border-radius: 0 8px 8px 0 !important;
        }

        body .cart-table thead tr th:last-child {
            border-radius: 8px 0 0 8px !important;
        }

        /* 3. ROW STYLE - clean white card effect */
        body .cart-table tbody tr {
            background: #fff !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
            border-radius: 10px !important;
            /* Note: border-radius on TR specific fix requires separate handling in some browsers, 
               but cells radius handles it visually */
        }

        body .cart-table tbody tr td {
            vertical-align: middle !important;
            padding: 15px 5px !important;
            /* More top/bottom padding */
            border-top: 1px solid #f0f0f0 !important;
            border-bottom: 1px solid #f0f0f0 !important;
            background: #fff !important;
        }

        /* Rounded Corners for the Row Effect */
        body .cart-table tbody tr td:first-child {
            border-right: 1px solid #f0f0f0 !important;
            border-top-right-radius: 10px !important;
            border-bottom-right-radius: 10px !important;
        }

        body .cart-table tbody tr td:last-child {
            border-left: 1px solid #f0f0f0 !important;
            border-top-left-radius: 10px !important;
            border-bottom-left-radius: 10px !important;
        }

        /* 4. IMAGE CELL & DELETE BUTTON */
        body .cart-table tbody tr td.cart_product_img {
            width: 90px !important;
            min-width: 90px !important;
            position: relative !important;
            padding: 10px !important;
        }

        body .cart-table tbody tr td.cart_product_img img {
            width: 80px !important;
            height: 80px !important;
            object-fit: contain !important;
            /* Prevent cropping */
            border-radius: 6px !important;
            background: #fff !important;
            border: 1px solid #f5f5f5 !important;
        }

        /* Improved Delete Button */
        body .cart-table tbody tr td.cart_product_img form {
            position: absolute !important;
            top: 2px !important;
            /* Slightly inset so it doesn't look broken */
            right: 2px !important;
            left: auto !important;
            z-index: 100 !important;
        }

        body .cart-table tbody tr td.cart_product_img form button {
            background: #ff4444 !important;
            border: 2px solid #fff !important;
            width: 28px !important;
            /* Slightly larger touch target */
            height: 28px !important;
            border-radius: 50% !important;
            color: #fff !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            box-shadow: 0 2px 6px rgba(255, 68, 68, 0.4) !important;
            cursor: pointer !important;
        }

        body .cart-table tbody tr td.cart_product_img form button i {
            font-size: 14px !important;
            color: #fff !important;
        }

        /* 5. PRODUCT NAME (Middle) */
        body .cart-table tbody tr td.cart_product_desc {
            max-width: 100px !important;
            text-align: right !important;
            padding-right: 5px !important;
        }

        body .cart-table tbody tr td.cart_product_desc h5 {
            font-size: 13px !important;
            font-weight: 700 !important;
            color: #333 !important;
            margin: 0 !important;
            line-height: 1.4 !important;
        }

        /* 6. PRICE (Middle) */
        body .cart-table tbody tr td.price span {
            font-size: 15px !important;
            /* Larger price */
            font-weight: 600 !important;
            color: #fbb710 !important;
            /* Brand Color */
            white-space: nowrap !important;
        }

        /* 7. QUANTITY (Left) - CONFLICT-FREE DESIGN */
        body .cart-table tbody tr td.qty {
            min-width: 120px !important;
            padding-left: 5px !important;
            vertical-align: middle !important;
        }

        /* Container reset */
        body .cart-table .qty-btn {
            background: transparent !important;
            padding: 0 !important;
            border: none !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            margin: 0 !important;
            height: auto !important;
            box-shadow: none !important;
        }

        /* Label */
        body .cart-table .qty-btn p {
            display: block !important;
            font-size: 11px !important;
            margin-bottom: 5px !important;
            color: #888 !important;
            line-height: 1 !important;
        }

        /* The Box Wrapper */
        body .cart-table .quantity {
            display: inline-flex !important;
            /* Force inline flex */
            align-items: center !important;
            justify-content: center !important;
            width: auto !important;
            height: 32px !important;
            /* Explicit height */
            background: #fff !important;
            border: 1px solid #dcdcdc !important;
            border-radius: 4px !important;
            overflow: hidden !important;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
        }

        /* The Input (Middle) */
        body .cart-table .quantity input,
        body .cart-table .quantity input.qty-text {
            width: 36px !important;
            height: 32px !important;
            /* Match wrapper height */
            line-height: 32px !important;
            border: none !important;
            border-right: 1px solid #eee !important;
            border-left: 1px solid #eee !important;
            background: #fff !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            color: #333 !important;
            padding: 0 !important;
            margin: 0 !important;
            text-align: center !important;
            -moz-appearance: textfield !important;
            /* Remove arrows Firefox */
        }

        /* Remove arrows Chrome/Safari */
        body .cart-table .quantity input::-webkit-outer-spin-button,
        body .cart-table .quantity input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            margin: 0 !important;
        }

        /* Buttons (Sides) */
        .qty-minus,
        .qty-plus {
            width: 32px !important;
            height: 32px !important;
            /* Match wrapper height */
            background: #fcfcfc !important;
            border: none !important;
            cursor: pointer !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin: 0 !important;
            padding: 0 !important;
            font-size: 14px !important;
            color: #555 !important;
            transition: background 0.2s !important;
        }

        .qty-minus:hover,
        .qty-plus:hover {
            background: #f0f0f0 !important;
        }

        .qty-minus i,
        .qty-plus i {
            font-size: 10px !important;
            line-height: 0 !important;
            /* Fix vertical alignment of icon */
            display: block !important;
        }

        /* 8. CHECKOUT SUMMARY - Lifted & Centered */
        body .cart-summary {
            margin-top: 15px !important;
            padding: 15px 15px 20px 15px !important;
            /* Adjusted padding */
            background: #fff !important;
            border: 1px solid #eee !important;
            border-radius: 12px !important;
            text-align: center !important;
        }

        body .cart-summary h5 {
            font-size: 16px !important;
            margin-bottom: 15px !important;
            border-bottom: 1px solid #eee !important;
            padding-bottom: 10px !important;
            width: 100% !important;
            text-align: right !important;
        }

        body .cart-summary .btn {
            background: #fbb710 !important;
            color: #fff !important;
            border-radius: 8px !important;
            width: 100% !important;
            /* Full width looks better usually, or keep 95% */
            max-width: 300px !important;
            /* Max width constraint */
            margin: 0 auto !important;
            display: block !important;
            padding: 10px 0 !important;
            /* Reduced vertical padding to 'lift' text visually within button */
            height: 44px !important;
            /* Fixed comfortable height */
            line-height: 44px !important;
            /* Centers text vertically exactly */
            padding-top: 0 !important;
            /* Reset padding to rely on line-height */
            padding-bottom: 0 !important;
            font-size: 16px !important;
            font-weight: bold !important;
            box-shadow: 0 4px 10px rgba(251, 183, 16, 0.3) !important;
            border: none !important;
            transform: translateY(-5px) !important;
            /* Physical lift via transform */
        }
    }
}

/* ========================================
   5. Checkout/Cash Form Improvements
   ======================================== */

@media (max-width: 767px) {
    .checkout_details_area {
        margin-top: 20px !important;
    }

    .checkout_details_area .cart-title h2 {
        font-size: 22px;
        text-align: center;
        margin-bottom: 25px;
    }

    .checkout_details_area form .form-control {
        height: 55px;
        font-size: 15px;
        padding: 15px 20px;
        border-radius: 8px;
    }

    .checkout_details_area form textarea.form-control {
        height: 120px;
        padding: 15px 20px;
    }

    .checkout_details_area form label {
        font-size: 14px;
        margin-bottom: 8px;
    }

    /* Payment Modal Mobile */
    .payment-modal-content {
        width: 95% !important;
        max-width: 100% !important;
        padding: 25px 20px !important;
        margin: 10px;
        border-radius: 15px !important;
    }

    .payment-modal-content h2 {
        font-size: 20px !important;
    }

    .payment-modal-content p {
        font-size: 13px !important;
    }

    .payment-option {
        padding: 15px !important;
    }

    .payment-option label {
        font-size: 15px !important;
    }

    .confirm-payment-btn {
        padding: 16px !important;
        font-size: 16px !important;
    }
}

/* Small phones for checkout */
@media (max-width: 374px) {
    .checkout_details_area form .form-control {
        height: 50px;
        font-size: 14px;
        padding: 12px 15px;
    }
}

/* ========================================
   6. Single Product Page Mobile
   ======================================== */

@media (max-width: 767px) {
    .single-product-area {
        padding: 30px 0 !important;
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 12px;
        padding: 10px 0;
        flex-wrap: wrap;
    }

    .breadcrumb-item {
        margin-bottom: 5px;
    }

    /* Product slider */
    .single_product_thumb {
        margin-bottom: 30px !important;
    }

    #product_details_slider .carousel-indicators {
        margin-top: 10px;
    }

    #product_details_slider .carousel-indicators li {
        width: 50px !important;
        height: 50px !important;
    }

    /* Product details */
    .single_product_desc {
        padding: 0 15px;
    }

    .product-meta-data h6 {
        font-size: 22px !important;
    }

    .product-price-container {
        padding: 15px !important;
        margin: 15px 0 !important;
    }

    .product-price-main {
        font-size: 1.8rem !important;
    }

    /* Add to cart section */
    .add-to-cart-section {
        padding: 20px 15px !important;
        margin-top: 20px !important;
    }

    .quantity-section {
        width: 100%;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center;
        padding: 0 5px;
        gap: 0 !important;
    }

    .quantity-section p {
        font-size: 20px !important;
        font-weight: 700 !important;
        margin-bottom: 0 !important;
        display: flex;
        align-items: center;
        height: 50px;
        /* Match input height */
    }

    .quantity {
        width: 160px !important;
        /* Fixed width for the input box */
    }

    .add-to-cart-btn {
        font-size: 15px !important;
        padding: 16px !important;
    }
}

/* ========================================
   7. Footer Mobile Improvements
   ======================================== */

@media (max-width: 767px) {
    .footer_area {
        padding: 50px 15px !important;
    }

    .footer-logo img {
        max-width: 100px !important;
    }

    .footer-description {
        font-size: 13px !important;
        padding: 0 10px;
    }

    /* Payment icons */
    .footer_area .d-inline-flex img {
        height: 24px !important;
        margin: 4px !important;
    }

    /* Footer links */
    .footer_area a {
        display: inline-block;
        padding: 8px 10px;
        font-size: 13px;
    }

    /* Copyright text */
    .copywrite,
    .footer_area .col-12.text-center {
        font-size: 12px !important;
    }
}

/* ========================================
   8. Search Wrapper Mobile
   ======================================== */

@media (max-width: 767px) {
    .search-wrapper {
        height: 200px;
        padding: 30px 15px;
    }

    .search-wrapper .search-content form input {
        height: 50px;
        font-size: 14px;
        padding-right: 20px;
    }

    .search-wrapper .search-close {
        width: 35px;
        height: 35px;
        line-height: 35px;
    }

    /* Search suggestions */
    .search-suggestions {
        max-height: 300px;
        width: 100%;
    }

    .suggestion-item {
        padding: 10px 15px;
    }

    .suggestion-img {
        width: 50px;
        height: 50px;
    }
}

/* ========================================
   9. Shop/Category Page Mobile
   ======================================== */

@media (max-width: 767px) {
    .shop_sidebar_area {
        padding: 30px 20px !important;
        margin-bottom: 30px;
    }

    .widget .widget-title {
        font-size: 16px;
    }

    .widget .catagories-menu li a {
        padding: 12px 15px;
        font-size: 14px;
    }

    .product-topbar {
        margin-bottom: 20px;
    }

    .product-topbar .total-products p {
        font-size: 13px;
        text-align: center;
    }
}

/* ========================================
   10. General Utility Classes
   ======================================== */

@media (max-width: 767px) {

    /* Section padding adjustments */
    .section-padding-100 {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .section-padding-100-0 {
        padding-top: 50px !important;
    }

    /* Margins */
    .mb-100 {
        margin-bottom: 50px !important;
    }

    .mt-100 {
        margin-top: 50px !important;
    }

    .mt-50 {
        margin-top: 30px !important;
    }

    /* Container fluid padding */
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Hide overflow on mobile */
    html,
    body {
        overflow-x: hidden !important;
    }
}

/* ========================================
   11. Tablet Specific Styles
   ======================================== */

@media (min-width: 768px) and (max-width: 991px) {
    .header-area {
        padding: 40px 30px;
    }

    .checkout_details_area form .form-control {
        height: 55px;
    }

    .cart-summary {
        margin-top: 30px;
    }

    .single_product_desc .product-meta-data h6 {
        font-size: 24px;
    }
}

/* ========================================
   12. Landscape Mode Fixes
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .mobile-nav {
        height: 50px;
    }

    .main-content-wrapper {
        margin-top: 50px !important;
    }

    .header-area {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

/* ========================================
   13. High DPI / Retina Displays
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    .single-products-catagory img,
    .product-img img,
    .cart_product_img img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ========================================
   14. Safe Area for Notched Phones
   ======================================== */

@supports (padding: env(safe-area-inset-bottom)) {
    .mobile-nav {
        padding-top: env(safe-area-inset-top);
    }

    .footer_area {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

/* ========================================
   15. Print Styles (Optional)
   ======================================== */

@media print {

    .mobile-nav,
    .header-area,
    .search-wrapper,
    .footer_area {
        display: none !important;
    }

    .main-content-wrapper {
        margin-top: 0 !important;
    }

/* ==========================================================================
   MOBILE FINAL FIXES - CLEAN VERSION
   ========================================================================== */

@media only screen and (max-width: 767px) {

    /* =====================================================
       1. HEADER LAYOUT: Logo CENTER, Menu+Flag on RIGHT
       ===================================================== */
    
    .mobile-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important; /* Push items to right */
        position: relative !important;
        padding: 10px 15px !important;
        height: 70px !important;
    }

    /* Logo - ABSOLUTE CENTER & BIGGER */
    .amado-navbar-brand {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 10 !important;
    }

    .amado-navbar-brand img {
        max-height: 55px !important;
        width: auto !important;
    }

    /* Menu + Flag Container - RIGHT side */
    .mobile-nav .d-flex {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        z-index: 20 !important;
    }

    /* SWAP: Flag first (left), Menu second (right) */
    .mobile-currency-switcher {
        order: 1 !important;
    }

    .amado-navbar-toggler {
        order: 2 !important;
    }


    /* =====================================================
       2. SIDEBAR MENU: Opens from RIGHT
       ===================================================== */
    
    .header-area {
        left: auto !important;
        right: -320px !important;
        transition: right 0.4s ease !important;
    }

    .header-area.bp-xs-on {
        left: auto !important;
        right: 0 !important;
    }


    /* =====================================================
       3. QUANTITY BOX: [ - ] [ Number ] [ + ]
       ===================================================== */
    
    /* Reset wrapper */
    body .cart-table .qty-btn {
        all: unset !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    body .cart-table .qty-btn p {
        display: none !important;
    }

    /* Quantity Container */
    body .cart-table .quantity {
        display: inline-flex !important;
        direction: ltr !important;
        width: 110px !important;
        height: 36px !important;
        border: 1px solid #ccc !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    /* Form */
    body .cart-table .quantity form {
        display: flex !important;
        direction: ltr !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* MINUS Button - LEFT */
    body .cart-table .quantity .qty-minus {
        flex: 0 0 35px !important;
        height: 100% !important;
        background: #f5f5f5 !important;
        border: none !important;
        border-right: 1px solid #ddd !important;
        color: #333 !important;
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }

    /* NUMBER Input - CENTER */
    body .cart-table .quantity input.qty-text,
    body .cart-table .quantity input[type="number"] {
        flex: 1 !important;
        width: 40px !important;
        height: 100% !important;
        background: #fff !important;
        border: none !important;
        color: #000 !important;
        font-size: 15px !important;
        font-weight: bold !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
        -webkit-appearance: none !important;
        -moz-appearance: textfield !important;
    }

    /* PLUS Button - RIGHT */
    body .cart-table .quantity .qty-plus {
        flex: 0 0 35px !important;
        height: 100% !important;
        background: #f5f5f5 !important;
        border: none !important;
        border-left: 1px solid #ddd !important;
        color: #333 !important;
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }


    /* =====================================================
       4. CHECKOUT BUTTON
       ===================================================== */
    
    body .cart-summary .btn {
        background: #fbb710 !important;
        color: #fff !important;
        border-radius: 8px !important;
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important;
        font-weight: bold !important;
    }
}

/* ==========================================================================
   HEADER SWAP: Logo RIGHT, Menu+Flag LEFT
   ========================================================================== */

@media only screen and (max-width: 767px) {
    
    .mobile-nav {
        display: flex !important;
        flex-direction: row-reverse !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 15px !important;
    }

    /* Logo - RIGHT side (due to row-reverse) */
    .amado-navbar-brand {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 0 !important;
    }

    .amado-navbar-brand img {
        max-height: 50px !important;
    }

    /* Menu + Flag - LEFT side (due to row-reverse) */
    .mobile-nav .d-flex {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }
}

/* ==========================================================================
   HEADER FINAL: Flag LEFT | Logo CENTER BIG | Menu RIGHT
   ========================================================================== */

@media only screen and (max-width: 767px) {
    
    .mobile-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        padding: 10px 15px !important;
        height: 70px !important;
    }

    /* LOGO - ABSOLUTE CENTER & BIGGER */
    .amado-navbar-brand {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 10 !important;
    }

    .amado-navbar-brand img {
        max-height: 60px !important;
        width: auto !important;
    }

    /* Container for Menu + Flag */
    .mobile-nav .d-flex {
        display: contents !important; /* Break container, children become direct */
    }

    /* FLAG - ABSOLUTE LEFT */
    .mobile-currency-switcher {
        position: absolute !important;
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 20 !important;
    }

    /* MENU - ABSOLUTE RIGHT */
    .amado-navbar-toggler {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 20 !important;
    }
}

/* ==========================================================================
   QUANTITY BOX - CLEAN DESIGN (Matching Reference Image)
   [ - ] [ 1 ] [ + ]
   ========================================================================== */

@media only screen and (max-width: 767px) {

    /* Reset wrapper */
    body .cart-table .qty-btn {
        all: unset !important;
        display: block !important;
    }

    body .cart-table .qty-btn p {
        display: none !important;
    }

    /* Main Container - Rounded Capsule */
    body .cart-table .quantity {
        display: inline-flex !important;
        direction: ltr !important;
        width: 140px !important;
        height: 45px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        background: #fff !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    }

    body .cart-table .quantity form {
        display: flex !important;
        direction: ltr !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* MINUS Button - LEFT */
    body .cart-table .quantity .qty-minus {
        flex: 0 0 40px !important;
        height: 100% !important;
        background: #fff !important;
        border: none !important;
        color: #666 !important;
        font-size: 20px !important;
        font-weight: 300 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: background 0.2s !important;
    }

    body .cart-table .quantity .qty-minus:hover {
        background: #f5f5f5 !important;
    }

    /* NUMBER Input - CENTER with gray background */
    body .cart-table .quantity input.qty-text,
    body .cart-table .quantity input[type="number"] {
        flex: 1 !important;
        width: 60px !important;
        height: 100% !important;
        background: #f5f5f5 !important;
        border: none !important;
        border-left: 1px solid #eee !important;
        border-right: 1px solid #eee !important;
        color: #333 !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
        -webkit-appearance: none !important;
        -moz-appearance: textfield !important;
    }

    /* PLUS Button - RIGHT */
    body .cart-table .quantity .qty-plus {
        flex: 0 0 40px !important;
        height: 100% !important;
        background: #fff !important;
        border: none !important;
        color: #666 !important;
        font-size: 20px !important;
        font-weight: 300 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: background 0.2s !important;
    }

    body .cart-table .quantity .qty-plus:hover {
        background: #f5f5f5 !important;
    }

    /* Hide spin buttons */
    body .cart-table .quantity input::-webkit-outer-spin-button,
    body .cart-table .quantity input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }
}