{"id":3287,"date":"2026-04-24T14:18:26","date_gmt":"2026-04-24T14:18:26","guid":{"rendered":"https:\/\/topvisionqa.com\/cart\/"},"modified":"2026-06-25T07:43:37","modified_gmt":"2026-06-25T07:43:37","slug":"cart","status":"publish","type":"page","link":"https:\/\/topvisionqa.com\/en\/cart\/","title":{"rendered":"Cart"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3287\" class=\"elementor elementor-3287 elementor-9\">\n\t\t\t\t<div class=\"elementor-element elementor-element-418eaaaf e-con-full break-out e-flex e-con e-parent\" data-id=\"418eaaaf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-734d8d8 elementor-widget elementor-widget-heading\" data-id=\"734d8d8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u0627\u0644\u0633\u0644\u0629<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6696385 elementor-widget elementor-widget-hfe-breadcrumbs-widget\" data-id=\"6696385\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hfe-breadcrumbs-widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<nav aria-label=\"Breadcrumb\"><ul class=\"hfe-breadcrumbs hfe-breadcrumbs-show-home\"><li class=\"hfe-breadcrumbs-item hfe-breadcrumbs-first\"><span class=\"hfe-breadcrumbs-home-icon\"><\/span><a href=\"https:\/\/topvisionqa.com\/en\/\"><span class=\"hfe-breadcrumbs-text\">\u0627\u0644\u0631\u0626\u064a\u0633\u0629<\/span><\/a><\/li><\/ul><\/nav>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-902010e elementor-widget elementor-widget-text-editor\" data-id=\"902010e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<div class=\"woocommerce\"><div class=\"woocommerce-notices-wrapper\"><\/div><div class=\"wc-empty-cart-message\">\n\t<div class=\"cart-empty woocommerce-info\" role=\"status\">\n\t\tYour cart is currently empty.\t<\/div>\n<\/div>\t<p class=\"return-to-shop\">\n\t\t<a class=\"button wc-backward\" href=\"https:\/\/topvisionqa.com\/en\/shop\/\">\n\t\t\tReturn to shop\t\t<\/a>\n\t<\/p>\n<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-04a1900 elementor-widget elementor-widget-html\" data-id=\"04a1900\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* 1. Force the parent container to fill the entire width *\/\n.woocommerce-page .woocommerce {\n    display: flex !important;\n    flex-direction: row-reverse !important; \/* Table on Right, Summary on Left *\/\n    align-items: flex-start !important;\n    justify-content: space-between !important; \/* Pushes items to the edges *\/\n    width: 100% !important;\n    max-width: 100% !important;\n    gap: 40px !important; \/* Adjust gap as needed *\/\n}\n\n\/* 2. Expand the Product Table *\/\n.woocommerce-cart-form {\n    flex: 1 1 auto !important; \/* Grow to fill space, but allow shrinking if needed *\/\n    width: 100% !important;\n    margin: 0 !important;\n}\n\n\/* 3. Set a stable width for the Summary Box *\/\n.cart-collaterals {\n    flex: 0 0 400px !important; \/* Fixed width so it doesn't get \"squished\" *\/\n    width: 400px !important;\n    margin: 0 !important;\n}\n\n\/* 4. Fix Table Width *\/\n.woocommerce-cart-form__contents {\n    width: 100% !important;\n    table-layout: auto !important;\n}\n\n\/* 5. Match the Order Summary Box from image_a40321.png *\/\n.cart_totals {\n    width: 100% !important;\n    padding: 30px !important;\n    background-color: #fff !important;\n    border: 1px solid #f0ebe3 !important;\n    border-radius: 8px !important;\n}\n\n\/* 1. Remove padding and width restrictions from the Elementor Text Editor wrappers *\/\n.elementor-element-902010e,\n.elementor-element-902010e .elementor-widget-container {\n    width: 100% !important;\n    max-width: 100% !important;\n    padding: 0 !important;\n    margin: 0 !important;\n}\n\n\/* 2. Update the main Flex container to ensure it fills the newly opened space *\/\n.woocommerce-page .woocommerce {\n    display: flex !important;\n    flex-direction: row-reverse !important; \/* Product list on Right, Summary on Left for RTL *\/\n    align-items: flex-start !important;\n    justify-content: space-between !important; \n    width: 100% !important;\n    max-width: 100% !important;\n    margin: 0 !important;\n    gap: 40px !important;\n}\n\n\/* 3. Ensure the Cart Form (Product List) expands fully *\/\n.woocommerce-cart-form {\n    flex: 1 1 auto !important; \n    width: auto !important; \/* Let flex-grow handle it *\/\n    margin: 0 !important;\n}\n\n\/* 4. Keep the Summary box stable but wide enough *\/\n.cart-collaterals {\n    flex: 0 0 420px !important; \/* Increased slightly for better balance on wider screens *\/\n    width: 420px !important;\n    margin: 0 !important;\n}\n\n\/* 5. Force the Table to fill its flex item *\/\n.shop_table.woocommerce-cart-form__contents {\n    width: 100% !important;\n    margin: 0 !important;\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-15ae5b0 elementor-widget elementor-widget-html\" data-id=\"15ae5b0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* 1. The Main Responsive Container *\/\n.woocommerce-page .woocommerce {\n    display: flex !important;\n    flex-direction: row-reverse !important; \/* Side-by-side on desktop *\/\n    align-items: flex-start !important;\n    justify-content: space-between !important;\n    width: 100% !important;\n    max-width: 100% !important;\n    gap: 30px !important;\n    flex-wrap: wrap !important; \/* Allows stacking when space runs out *\/\n}\n\n\/* 2. Dynamic Widths for Desktop *\/\n.woocommerce-cart-form {\n    flex: 1 1 65% !important; \/* Takes 65% of the space *\/\n    min-width: 300px !important;\n}\n\n.cart-collaterals {\n    flex: 1 1 30% !important; \/* Takes 30% of the space *\/\n    min-width: 320px !important; \/* Ensures summary doesn't get too skinny *\/\n}\n\n\/* 3. iPad & Mobile stacking (Responsive Breakpoint) *\/\n@media (max-width: 1024px) {\n    .woocommerce-page .woocommerce {\n        flex-direction: column !important; \/* Stacks Summary to the bottom *\/\n    }\n\n    .woocommerce-cart-form, \n    .cart-collaterals {\n        flex: 1 1 100% !important;\n        width: 100% !important;\n    }\n}\n\n\/* 4. Quantity Styling - Cleaned up for all screens *\/\n.quantity {\n    display: inline-flex !important;\n    border: 1px solid #f0f0f0 !important;\n    border-radius: 8px !important;\n    background: #fff !important;\n    overflow: hidden !important;\n}\n\n.quantity input::-webkit-outer-spin-button,\n.quantity input::-webkit-inner-spin-button {\n    -webkit-appearance: none !important;\n    margin: 0 !important;\n}\n\n.quantity input[type=number] {\n    -moz-appearance: textfield !important;\n}\n\n.q-btn {\n    width: 35px !important;\n    height: 40px !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    cursor: pointer !important;\n    background: #fcfcfc !important;\n    color: #666 !important;\n    font-size: 18px !important;\n    user-select: none !important;\n}\n\n.quantity input.qty {\n    width: 45px !important;\n    border: none !important;\n    border-left: 1px solid #f0f0f0 !important;\n    border-right: 1px solid #f0f0f0 !important;\n    text-align: center !important;\n    padding: 0 !important;\n}\n\n\/* 5. Summary Header Match *\/\n.cart_totals {\n    background: #fbfbfb !important;\n    border: 1px solid #f0f0f0 !important;\n    border-radius: 12px !important;\n}\n\n.cart_totals h2 {\n    font-size: 24px !important; \/* Balanced size for all screens *\/\n    padding: 15px !important;\n    margin: 0 !important;\n    border-bottom: 1px solid #eee !important;\n}\n<\/style>\n\n<script>\ndocument.addEventListener('click', function(e) {\n    \/\/ Look for the plus or minus click\n    if (e.target.classList.contains('q-btn')) {\n        const parent = e.target.closest('.quantity');\n        const input = parent.querySelector('input.qty');\n        let val = parseFloat(input.value) || 0;\n        const step = parseFloat(input.getAttribute('step')) || 1;\n        const min = parseFloat(input.getAttribute('min')) || 0;\n\n        if (e.target.classList.contains('plus')) {\n            input.value = val + step;\n        } else if (e.target.classList.contains('minus')) {\n            if (val > min) input.value = val - step;\n        }\n\n        \/\/ Trigger 'change' so WooCommerce knows the price needs to update\n        input.dispatchEvent(new Event('change', { bubbles: true }));\n        \n        \/\/ Enable the \"Update Cart\" button\n        const updateBtn = document.querySelector('[name=\"update_cart\"]');\n        if (updateBtn) updateBtn.disabled = false;\n    }\n});\n\n\/\/ This part wraps your existing inputs with the buttons automatically\ndocument.querySelectorAll('.quantity').forEach(q => {\n    if (!q.querySelector('.q-btn')) {\n        const minus = document.createElement('div');\n        minus.className = 'q-btn minus';\n        minus.innerText = '-';\n        \n        const plus = document.createElement('div');\n        plus.className = 'q-btn plus';\n        plus.innerText = '+';\n        \n        q.prepend(minus);\n        q.append(plus);\n    }\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3287","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/topvisionqa.com\/en\/wp-json\/wp\/v2\/pages\/3287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/topvisionqa.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/topvisionqa.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/topvisionqa.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/topvisionqa.com\/en\/wp-json\/wp\/v2\/comments?post=3287"}],"version-history":[{"count":0,"href":"https:\/\/topvisionqa.com\/en\/wp-json\/wp\/v2\/pages\/3287\/revisions"}],"wp:attachment":[{"href":"https:\/\/topvisionqa.com\/en\/wp-json\/wp\/v2\/media?parent=3287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}