.elementor-12 .elementor-element.elementor-element-c491938{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for shortcode, class: .elementor-element-592a3d7 *//* ============================================================ SAKTYA — Cart Page CSS ----------------------------------------------------------------- WHERE THIS GOES: this is NOT a shortcode - your Cart page already has WooCommerce's own [woocommerce_cart] shortcode on it (that's the default WooCommerce setup). Paste this CSS into that page's Elementor "Custom CSS" panel, or a site-wide CSS snippet. No PHP needed for this page - the cart's real logic (quantity updates, coupon validation, totals) is untouched, only restyled. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&family=Gilda+Display&display=swap'); /* IMPORTANT: .woocommerce-cart is WordPress's BODY class on the Cart page (added by body_class()), not a content div. Styling it directly affects the whole - header included, since the header is also inside that same body. Everything layout-related below is scoped as a DESCENDANT .elementor-12 .elementor-element.elementor-element-592a3d7 instead, so it only reaches the actual cart content area. */ .woocommerce-cart .woocommerce { font-family: 'Karla', Arial, sans-serif !important; color: #1a1a1a; max-width: 90rem; margin: 0 auto; padding: 2.5rem 3.75% 4rem; } .cart_totals { width:100% !important; } .woocommerce-cart .page-title, .woocommerce-cart h1.entry-title { font-family: 'Gilda Display', Georgia, serif !important; font-weight: 400 !important; font-size: clamp(1.8rem, 3.5vw, 40px) !important; color: #4D3223 !important; margin-bottom: 2rem !important; } /* ---------- Layout: line items left, totals right ---------- */ .woocommerce-cart-form { margin-bottom: 2rem; } @media (min-width: 992px) { .woocommerce-cart .woocommerce { display: grid; grid-template-columns: 1fr 22rem; gap: 3rem; align-items: start; } .woocommerce-cart-form { grid-column: 1; } .cart-collaterals { grid-column: 2; } } /* ---------- Cart table ---------- */ table.cart { width: 100% !important; border-collapse: collapse !important; border: none !important; } table.cart thead th { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: rgba(0,0,0,0.5) !important; text-align: left !important; padding: 0 0 1rem !important; border: none !important; border-bottom: 1px solid rgba(0,0,0,0.1) !important; background: none !important; } table.cart tbody tr.cart_item { border-bottom: 1px solid rgba(0,0,0,0.08) !important; } table.cart tbody td { padding: 1.25rem 0.5rem !important; border: none !important; vertical-align: middle !important; background: none !important; } .product-thumbnail img { width: 5.5rem !important; height: 5.5rem !important; object-fit: cover !important; } .product-name a { font-size: 15px !important; font-weight: 600 !important; color: #1a1a1a !important; text-decoration: none !important; } .product-name .variation { font-size: 12px !important; color: rgba(0,0,0,0.5) !important; margin-top: 0.25rem !important; } .product-price, .product-subtotal { font-size: 14px !important; font-weight: 700 !important; color: #1a1a1a !important; } /* Quantity input - same visual language as the single product stepper box, though without the +/- buttons (this is the native input; can be upgraded to the same JS stepper on request). */ .quantity .qty { width: 3.5rem !important; height: 2.75rem !important; border: 1px solid rgba(0,0,0,0.2) !important; background: #ffffff !important; text-align: center !important; font-family: 'Karla', Arial, sans-serif !important; font-size: 15px !important; border-radius: 0 !important; } .product-remove a.remove { display: flex !important; align-items: center !important; justify-content: center !important; width: 1.75rem !important; height: 1.75rem !important; background: none !important; color: rgba(0,0,0,0.4) !important; font-size: 20px !important; border-radius: 50% !important; text-decoration: none !important; } .product-remove a.remove:hover { background: #f5f0e8 !important; color: #a6342a !important; } /* ---------- Coupon row + Update cart button ---------- */ .cart .coupon { display: flex !important; align-items: center !important; gap: 0.75rem !important; margin: 1.5rem 0 0 !important; } .cart .coupon label { display: none !important; } .cart .coupon input#coupon_code { height: 2.9rem !important; border: 1px solid rgba(0,0,0,0.2) !important; padding: 0 1rem !important; font-family: 'Karla', Arial, sans-serif !important; font-size: 14px !important; border-radius: 0 !important; min-width: 12rem !important; } .cart .coupon button, table.cart button[name="update_cart"] { background: #ffffff !important; color: #4D3223 !important; border: 1px solid rgba(0,0,0,0.2) !important; border-radius: 0 !important; font-family: 'Karla', Arial, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; padding: 0 1.5rem !important; height: 2.9rem !important; cursor: pointer !important; box-shadow: none !important; text-transform: none !important; } .cart .coupon button:hover, table.cart button[name="update_cart"]:hover { background: #f5f0e8 !important; } table.cart button[name="update_cart"] { margin-top: 1.5rem !important; } /* ---------- Cart totals sidebar ---------- */ .cart-collaterals { margin-top: 2rem; } @media (min-width: 992px) { .cart-collaterals { margin-top: 0; } } .cart_totals { background: #FDF9F2 !important; padding: 1.75rem !important; } .cart_totals h2 { font-family: 'Gilda Display', Georgia, serif !important; font-weight: 400 !important; font-size: 22px !important; color: #4D3223 !important; margin: 0 0 1.25rem !important; } .cart_totals table.shop_table { width: 100% !important; border: none !important; border-collapse: collapse !important; } .cart_totals table.shop_table tr { border-bottom: 1px solid rgba(0,0,0,0.08) !important; } .cart_totals table.shop_table th, .cart_totals table.shop_table td { padding: 0.85rem 0 !important; border: none !important; font-size: 14px !important; background: none !important; } .cart_totals table.shop_table th { font-weight: 600 !important; color: rgba(0,0,0,0.6) !important; } .cart_totals table.shop_table .order-total th, .cart_totals table.shop_table .order-total td { font-size: 17px !important; font-weight: 700 !important; color: #1a1a1a !important; border-bottom: none !important; } .wc-proceed-to-checkout { margin-top: 1.5rem !important; } .wc-proceed-to-checkout a.checkout-button { display: block !important; width: 100% !important; text-align: center !important; background: #2A231D !important; color: #ffffff !important; border: none !important; border-radius: 0 !important; font-family: 'Karla', Arial, sans-serif !important; font-size: 16px !important; font-weight: 700 !important; padding: 1rem !important; text-decoration: none !important; box-shadow: none !important; text-transform: none !important; } .wc-proceed-to-checkout a.checkout-button:hover { background: #40342a !important; } /* ---------- Empty cart state ---------- */ .woocommerce-cart .cart-empty { font-size: 15px !important; color: rgba(0,0,0,0.7) !important; margin-bottom: 1.5rem !important; } .woocommerce-cart .wc-empty-cart-message + .return-to-shop a.button, .woocommerce-cart .return-to-shop a.button { display: inline-block !important; background: #2A231D !important; color: #ffffff !important; border: none !important; border-radius: 0 !important; font-family: 'Karla', Arial, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; padding: 0.9rem 2rem !important; text-decoration: none !important; box-shadow: none !important; } /* ---------- Cross-sells ---------- */ .cart-collaterals ~ .cross-sells, .woocommerce-cart .cross-sells { margin-top: 3rem; } .cross-sells h2 { font-family: 'Gilda Display', Georgia, serif !important; font-weight: 400 !important; font-size: clamp(1.6rem, 3vw, 32px) !important; color: #4D3223 !important; margin: 0 0 1.5rem !important; } .cross-sells ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 1.5rem !important; list-style: none !important; padding: 0 !important; } .cross-sells ul.products li.product img { width: 100% !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; margin-bottom: 0.75rem !important; } .cross-sells ul.products li.product .woocommerce-loop-product__title { font-size: 15px !important; font-weight: 600 !important; margin: 0 0 0.2rem !important; } .cross-sells ul.products li.product .price { font-size: 14px !important; font-weight: 700 !important; } /* ================= Responsive ================= */ @media (max-width: 768px) { .woocommerce-cart .woocommerce { padding: 1.25rem 5% 2.5rem; } .woocommerce-cart .page-title, .woocommerce-cart h1.entry-title { font-size: 1.6rem !important; margin-bottom: 1.25rem !important; } table.cart thead { display: none !important; } /* Work WITH the theme's own responsive stacking (each cell on its own line with a "Label:" prefix) instead of fighting it with a grid layout that wasn't reliably taking hold - just make it properly compact. */ table.cart tbody tr.cart_item { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 0 !important; padding: 1rem 0 !important; position: relative !important; } table.cart tbody tr.cart_item td { display: flex !important; align-items: center !important; gap: 0.4rem !important; padding: 0.15rem 0 !important; margin: 0 !important; border: none !important; font-size: 13px !important; line-height: 1.3 !important; min-height: 0 !important; } table.cart tbody tr.cart_item td::before { font-size: 11px !important; font-weight: 700 !important; color: rgba(0,0,0,0.45) !important; margin: 0 !important; } .product-thumbnail { order: -1 !important; width: 3.25rem !important; flex: 0 0 3.25rem !important; padding-right: 0.75rem !important; } .product-thumbnail::before { display: none !important; } .product-thumbnail img { width: 3.25rem !important; height: 3.25rem !important; object-fit: cover !important; } .product-name { width: calc(100% - 4rem) !important; } .product-name::before { display: none !important; } .product-name a { font-size: 14px !important; font-weight: 600 !important; } .product-price::before { content: 'Price: ' !important; } .product-price { width: 100% !important; padding-left: 4rem !important; } .product-quantity { width: 100% !important; padding-left: 4rem !important; } .product-quantity::before { content: 'Qty: ' !important; } .quantity .qty { width: 2.75rem !important; height: 2.1rem !important; font-size: 13px !important; } .product-remove { position: absolute !important; top: 1rem !important; right: 0 !important; width: auto !important; } .product-remove::before { display: none !important; } .product-remove a.remove { width: 1.5rem !important; height: 1.5rem !important; font-size: 16px !important; } .product-subtotal { display: none !important; } .cart .coupon { flex-wrap: wrap !important; gap: 0.6rem !important; } .cart .coupon input#coupon_code { min-width: 0 !important; flex: 1 1 auto !important; } .cart .coupon button { flex: 0 0 auto !important; padding: 0 1.1rem !important; } table.cart button[name="update_cart"] { width: 100% !important; margin-top: 1rem !important; } .cart_totals { padding: 1.25rem !important; } .cart_totals h2 { font-size: 19px !important; } .cross-sells ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; } }/* End custom CSS */