/*rzm:s51*/ /** * EMERGENCY RESPONSIVE FIXES - MAXIMUM SPECIFICITY v1.0.6 * These rules are designed to override ALL theme styles * Add this file AFTER the main CSS file * * NOTE: Action buttons moved OUTSIDE table structure via JavaScript * This solves the narrow button issue at all screen sizes */ /* ============================================ */ /* REMOVE × SYMBOL FROM MINI-CART REMOVE BUTTON */ /* ============================================ */ /* Aggressively remove any ::before or ::after that might add × */ .cart-item .nav-dropdown .remove::before, .cart-item .nav-dropdown .remove::after, .woocommerce .widget_shopping_cart .remove::before, .woocommerce .widget_shopping_cart .remove::after, .woocommerce-mini-cart .remove::before, .woocommerce-mini-cart .remove::after, a.remove::before, a.remove::after, a.remove_from_cart_button::before, a.remove_from_cart_button::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; } /* Set font-size to 0 to hide any text content inside remove button */ .cart-item .nav-dropdown .remove, .woocommerce .widget_shopping_cart .remove, .woocommerce-mini-cart .remove { font-size: 0 !important; text-indent: -9999px !important; overflow: hidden !important; } /* RZK 2026-08-02 (task 1): the hard 18px width/height that used to live here is GONE. It loaded after the main stylesheet and silently defeated the main file's fluid trash-icon size, so the icon never scaled on a phone -- the exact "one rule overriding another" problem. The size now lives only in beautiful-fast-cart.css, on --bfc-mc-u. Everything below is unrelated to size and is still needed (it undoes the theme's text-indent trick). */ .cart-item .nav-dropdown .remove svg, .woocommerce .widget_shopping_cart .remove svg, .woocommerce-mini-cart .remove svg { stroke: #ffffff !important; color: #ffffff !important; fill: none !important; display: block !important; flex-shrink: 0 !important; text-indent: 0 !important; position: relative !important; left: auto !important; right: auto !important; margin: 0 auto !important; } /* ============================================ */ /* HEADER CART BADGE VISIBILITY OVERRIDES */ /* ============================================ */ #header .cart-item, #header .cart-item .header-button, #header .cart-item .header-button .header-cart-link { overflow: visible !important; } #header .cart-item .header-button { position: relative !important; } /* RZK 2026-08-02: the doubled-class `.cart-item.cart-item` copy of the overflow rule was deleted. The unconditional rule above already sets `overflow: visible` on the same three elements at every width, so this block was specificity escalation with no effect. */ /* ============================================ */ /* EXTERNAL CART ACTIONS WRAPPER (OUTSIDE TABLE) */ /* ============================================ */ /* Hide original table actions row - ALL SCREEN SIZES */ body.woocommerce-cart table.shop_table td.actions, body.woocommerce-cart table.shop_table tbody tr td.actions, body.woocommerce-cart form.woocommerce-cart-form table.shop_table td.actions, .woocommerce-cart table.shop_table td.actions { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; position: absolute !important; left: -99999px !important; } /* Hide the entire row containing actions */ body.woocommerce-cart table.shop_table tbody tr:has(td.actions), .woocommerce-cart table.shop_table tbody tr:has(td.actions) { display: none !important; visibility: hidden !important; } /* Style the external actions wrapper - Desktop/Tablet (side by side) */ body.woocommerce-cart .cart-actions-wrapper-external, .woocommerce-cart .cart-actions-wrapper-external { width: 100% !important; max-width: 100% !important; padding: 24px 30px !important; background: linear-gradient(135deg, #f9fafb 0%, #f5f6f7 100%) !important; border-radius: 0 0 18px 18px !important; margin-top: -18px !important; box-sizing: border-box !important; display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; flex-wrap: nowrap !important; overflow: visible !important; } /* Buttons inside wrapper - auto width */ body.woocommerce-cart .cart-actions-wrapper-external button, body.woocommerce-cart .cart-actions-wrapper-external .continue-shopping, .woocommerce-cart .cart-actions-wrapper-external button, .woocommerce-cart .cart-actions-wrapper-external .continue-shopping { flex-shrink: 1 !important; flex-grow: 0 !important; width: auto !important; max-width: fit-content !important; min-width: 150px !important; } body.woocommerce-cart .cart-actions-wrapper-external a, .woocommerce-cart .cart-actions-wrapper-external a { width: auto !important; max-width: fit-content !important; } /* Tablet adjustments - reduce padding but keep side by side */ @media (max-width: 1023px) and (min-width: 750px) { body.woocommerce-cart .cart-actions-wrapper-external, .woocommerce-cart .cart-actions-wrapper-external { padding: 20px 20px !important; gap: 10px !important; } body.woocommerce-cart .cart-actions-wrapper-external button, body.woocommerce-cart .cart-actions-wrapper-external a, .woocommerce-cart .cart-actions-wrapper-external button, .woocommerce-cart .cart-actions-wrapper-external a { padding: 12px 20px !important; min-height: 48px !important; font-size: clamp(12px, calc(9.93px + 0.3983vw), 14px) !important;; min-width: 130px !important; } } /* Small tablet adjustments */ @media (max-width: 768px) and (min-width: 600px) { body.woocommerce-cart .cart-actions-wrapper-external, .woocommerce-cart .cart-actions-wrapper-external { padding: 18px 16px !important; gap: 8px !important; } body.woocommerce-cart .cart-actions-wrapper-external button, body.woocommerce-cart .cart-actions-wrapper-external a, .woocommerce-cart .cart-actions-wrapper-external button, .woocommerce-cart .cart-actions-wrapper-external a { padding: 12px 18px !important; font-size: clamp(12px, calc(8.54px + 0.5804vw), 13px) !important;; min-width: 120px !important; } } /* ============================================ */ /* FIX: MOBILE CARD LAYOUT BELOW 750PX */ /* ============================================ */ @media (max-width: 749px) { /* Mobile - stack actions vertically and full width */ body.woocommerce-cart .cart-actions-wrapper-external, .woocommerce-cart .cart-actions-wrapper-external { flex-direction: column !important; gap: 14px !important; padding: 20px 16px !important; flex-wrap: nowrap !important; } body.woocommerce-cart .cart-actions-wrapper-external button, body.woocommerce-cart .cart-actions-wrapper-external .continue-shopping, body.woocommerce-cart .cart-actions-wrapper-external a, .woocommerce-cart .cart-actions-wrapper-external button, .woocommerce-cart .cart-actions-wrapper-external .continue-shopping, .woocommerce-cart .cart-actions-wrapper-external a { width: 100% !important; max-width: 100% !important; min-width: 100% !important; flex-shrink: 0 !important; } /* Hide table header */ body.woocommerce-cart table.shop_table thead, body.woocommerce-cart form.woocommerce-cart-form table.shop_table thead, .woocommerce-cart table.shop_table thead { display: none !important; } /* Force card layout */ body.woocommerce-cart table.shop_table, body.woocommerce-cart form.woocommerce-cart-form table.shop_table, .woocommerce-cart table.shop_table { display: block !important; width: 100% !important; } body.woocommerce-cart table.shop_table tbody, .woocommerce-cart table.shop_table tbody { display: block !important; width: 100% !important; } /* Card-style rows */ body.woocommerce-cart table.shop_table tbody tr.cart_item, body.woocommerce-cart table.shop_table tbody tr.woocommerce-cart-form__cart-item, .woocommerce-cart table.shop_table tbody tr { display: block !important; width: 100% !important; background: #ffffff !important; border-radius: 20px !important; padding: 28px 24px !important; margin-bottom: 20px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important; border: 2px solid #f3f4f6 !important; position: relative !important; } /* All cells in card layout */ body.woocommerce-cart table.shop_table tbody tr td, .woocommerce-cart table.shop_table tbody tr td { display: block !important; width: 100% !important; max-width: 100% !important; padding: 10px 0 !important; text-align: center !important; border: none !important; float: none !important; margin: 0 auto !important; } /* Product Remove - HIDE ON MOBILE */ body.woocommerce-cart table.shop_table tbody tr td.product-remove, .woocommerce-cart table.shop_table tbody tr td.product-remove { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; position: absolute !important; left: -99999px !important; } body.woocommerce-cart table.shop_table tbody tr td.product-remove a, .woocommerce-cart table.shop_table tbody tr td.product-remove a { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* Product Thumbnail - Centered */ body.woocommerce-cart table.shop_table tbody tr td.product-thumbnail, .woocommerce-cart table.shop_table tbody tr td.product-thumbnail { text-align: center !important; padding: 0 0 20px 0 !important; width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; flex-direction: column !important; } /* * RZK 2026-10-13: the four sizing declarations that used to live here * (width/height/max-width/max-height: 130px !important) have been removed. * * WHY. This block sits inside @media (max-width: 749px) and therefore flattened * EVERY mobile breakpoint to 130px, overriding the correct per-breakpoint sizes in * beautiful-fast-cart.css (90 / 100 / 110 / 120px at <=327 / 328-399 / 400-479 / * 480-599). cart-page-fix.js then forced the correct size back via an inline * !important style - but it runs after first paint, so the thumbnail cell collapsed * from 236px to 133px about three seconds in. Measured on production at 390px: * CSS alone rendered 130px while the JS forced 100px, a 30px disagreement that * pushed CLS to 0.10 and failed the metric. * * Three layers were fighting over one value: main CSS said 100, this file said 130, * and the JS said 100 again. Removing the override lets the main CSS win, which * makes the JS inline style a no-op and the layout shift structurally impossible. * The size a visitor ends up seeing is unchanged - only the first paint is now * already correct. */ body.woocommerce-cart table.shop_table tbody tr td.product-thumbnail a, body.woocommerce-cart table.shop_table tbody tr td.product-thumbnail img, .woocommerce-cart table.shop_table tbody tr td.product-thumbnail a, .woocommerce-cart table.shop_table tbody tr td.product-thumbnail img { margin: 0 auto !important; display: block !important; } /* Product Name - Centered */ body.woocommerce-cart table.shop_table tbody tr td.product-name, .woocommerce-cart table.shop_table tbody tr td.product-name { text-align: center !important; font-size: clamp(14.4px, calc(11.71px + 0.8392vw), 18.0px) !important; font-weight: 600 !important; padding: 0 20px 16px 20px !important; min-width: 0 !important; width: 100% !important; line-height: 1.5 !important; display: block !important; } /* Product Price - Centered with Label */ body.woocommerce-cart table.shop_table tbody tr td.product-price, .woocommerce-cart table.shop_table tbody tr td.product-price { display: block !important; width: 100% !important; padding: 12px 20px !important; font-size: clamp(12.8px, calc(10.41px + 0.7459vw), 16.0px) !important; text-align: center !important; font-weight: 700 !important; } /* Product Subtotal - Centered with Label and Button Below */ body.woocommerce-cart table.shop_table tbody tr td.product-subtotal, .woocommerce-cart table.shop_table tbody tr td.product-subtotal { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 16px 20px 20px 20px !important; font-size: clamp(12.8px, calc(10.41px + 0.7459vw), 16.0px) !important; text-align: center !important; font-weight: 700 !important; gap: 4px !important; line-height: 1.5 !important; } /* Subtotal price/amount text */ body.woocommerce-cart table.shop_table tbody tr td.product-subtotal > *:not(.mobile-remove-button), .woocommerce-cart table.shop_table tbody tr td.product-subtotal > *:not(.mobile-remove-button) { display: block !important; width: 100% !important; text-align: center !important; margin-bottom: 8px !important; } /* New Remove Button Under Subtotal - Beautiful Red Button */ body.woocommerce-cart table.shop_table tbody tr td.product-subtotal .mobile-remove-button, .woocommerce-cart table.shop_table tbody tr td.product-subtotal .mobile-remove-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 14px 40px !important; margin-top: 12px !important; margin-bottom: 0 !important; margin-left: 10px !important; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; color: #ffffff !important; border-radius: 12px !important; font-weight: 700 !important; font-size: clamp(12.0px, calc(9.76px + 0.6993vw), 15.0px) !important; border: none !important; cursor: pointer !important; box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35) !important; text-decoration: none !important; min-height: 48px !important; width: auto !important; text-align: center !important; clear: both !important; float: none !important; } body.woocommerce-cart table.shop_table tbody tr td.product-subtotal .mobile-remove-button:hover, .woocommerce-cart table.shop_table tbody tr td.product-subtotal .mobile-remove-button:hover { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important; transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45) !important; } body.woocommerce-cart table.shop_table tbody tr td.product-subtotal .mobile-remove-button:active, .woocommerce-cart table.shop_table tbody tr td.product-subtotal .mobile-remove-button:active { transform: translateY(0) scale(0.98) !important; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important; } /* Product Quantity - Centered */ body.woocommerce-cart table.shop_table tbody tr td.product-quantity, .woocommerce-cart table.shop_table tbody tr td.product-quantity { width: 100% !important; padding: 16px 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; } body.woocommerce-cart table.shop_table tbody tr td.product-quantity .quantity, .woocommerce-cart table.shop_table tbody tr td.product-quantity .quantity { margin: 0 auto !important; display: inline-flex !important; } } /* ============================================ */ /* 2 PRODUCTS PER ROW FOR 600-749PX */ /* ============================================ */ @media (min-width: 600px) and (max-width: 749px) { /* Make tbody a flex container for 2-column layout */ body.woocommerce-cart table.shop_table tbody, .woocommerce-cart table.shop_table tbody { display: flex !important; flex-wrap: wrap !important; gap: 16px !important; justify-content: space-between !important; align-items: stretch !important; } /* Each cart item takes approximately 48% width (2 per row) */ body.woocommerce-cart table.shop_table tbody tr.cart_item, body.woocommerce-cart table.shop_table tbody tr.woocommerce-cart-form__cart-item, .woocommerce-cart table.shop_table tbody tr { width: calc(50% - 8px) !important; flex: 0 0 calc(50% - 8px) !important; margin-bottom: 0 !important; display: flex !important; flex-direction: column !important; } /* Make all cells flex to allow proper spacing */ body.woocommerce-cart table.shop_table tbody tr.cart_item td, body.woocommerce-cart table.shop_table tbody tr.woocommerce-cart-form__cart-item td, .woocommerce-cart table.shop_table tbody tr td { display: flex !important; flex-direction: column !important; width: 100% !important; } /* Product name should have flex-grow to take remaining space */ body.woocommerce-cart table.shop_table tbody tr td.product-name, .woocommerce-cart table.shop_table tbody tr td.product-name { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; min-height: 0 !important; } /* Add spacer div after product name to push content down */ body.woocommerce-cart table.shop_table tbody tr td.product-name::after, .woocommerce-cart table.shop_table tbody tr td.product-name::after { content: '' !important; flex: 1 1 auto !important; min-height: 0 !important; } /* Other cells should not grow */ body.woocommerce-cart table.shop_table tbody tr td.product-thumbnail, body.woocommerce-cart table.shop_table tbody tr td.product-price, body.woocommerce-cart table.shop_table tbody tr td.product-quantity, body.woocommerce-cart table.shop_table tbody tr td.product-subtotal, .woocommerce-cart table.shop_table tbody tr td.product-thumbnail, .woocommerce-cart table.shop_table tbody tr td.product-price, .woocommerce-cart table.shop_table tbody tr td.product-quantity, .woocommerce-cart table.shop_table tbody tr td.product-subtotal { flex: 0 0 auto !important; } } /* ============================================ */ /* FIX: HIDE MOBILE PRICE ELEMENT BELOW 549PX */ /* ============================================ */ @media (max-width: 549px) { /* Aggressively hide mobile-product-price */ body.woocommerce-cart .show-for-small.mobile-product-price, body.woocommerce-cart .mobile-product-price.show-for-small, body.woocommerce-cart .mobile-product-price, .woocommerce-cart .show-for-small.mobile-product-price, .woocommerce-cart .mobile-product-price.show-for-small, .woocommerce-cart .mobile-product-price { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; overflow: hidden !important; position: absolute !important; left: -99999px !important; pointer-events: none !important; } } /* ============================================ */ /* BEAUTIFUL SHIPPING SECTION - CLEAN & MOBILE FRIENDLY */ /* ============================================ */ /* Hide shipping destination address */ .woocommerce-cart .woocommerce-shipping-destination, .woocommerce-checkout .woocommerce-shipping-destination, .woocommerce-cart .cart_totals .woocommerce-shipping-destination { display: none !important; } /* Hide shipping calculator button and form */ .woocommerce-cart .shipping-calculator-button, .woocommerce-cart .woocommerce-shipping-calculator, .woocommerce-cart .shipping-calculator-form, .woocommerce-cart a.shipping-calculator-button { display: none !important; } /* Clean up shipping table structure */ .woocommerce-cart .cart_totals .shipping td, .woocommerce-cart .cart_totals .shipping__inner { padding: 0 !important; border: none !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .woocommerce-cart .cart_totals .shipping__table { width: 100% !important; max-width: 100% !important; border: none !important; table-layout: fixed !important; box-sizing: border-box !important; } .woocommerce-cart .cart_totals .shipping__table tbody { border: none !important; width: 100% !important; display: block !important; } .woocommerce-cart .cart_totals .shipping__table tbody tr { width: 100% !important; display: block !important; } .woocommerce-cart .cart_totals .shipping__table tbody td { width: 100% !important; display: block !important; padding: 0 !important; box-sizing: border-box !important; } /* Hide shipping table header */ .woocommerce-cart .cart_totals .shipping__table th, .woocommerce-cart .cart_totals .shipping tr th { display: none !important; } /* Style shipping methods list beautifully */ .woocommerce-cart #shipping_method, .woocommerce-cart .woocommerce-shipping-methods, .woocommerce-cart .shipping__list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Individual shipping method item - ALL methods will show */ .woocommerce-cart #shipping_method li, .woocommerce-cart .woocommerce-shipping-methods li, .woocommerce-cart .shipping__list_item { padding: 0 !important; margin: 0 !important; list-style: none !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; display: block !important; visibility: visible !important; opacity: 1 !important; } /* Hide original radio input */ .woocommerce-cart #shipping_method input[type="radio"], .woocommerce-cart #shipping_method input[type="hidden"], .woocommerce-cart .woocommerce-shipping-methods input[type="radio"], .woocommerce-cart .woocommerce-shipping-methods input[type="hidden"], .woocommerce-cart .shipping__list input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; } /* Shipping method label - compact horizontal layout with icon on left, radio on right */ .woocommerce-cart #shipping_method label, .woocommerce-cart .woocommerce-shipping-methods label, .woocommerce-cart .shipping__list_label { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px !important; padding: 14px 16px !important; background: #ffffff !important; border: 2px solid #e5e7eb !important; border-radius: 12px !important; cursor: pointer !important; font-size: clamp(12px, calc(9.2px + 0.625vw), 14px) !important;; font-weight: 600 !important; color: #374151 !important; position: relative !important; min-height: 52px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Content wrapper (icon + text) - FORCE HORIZONTAL */ .woocommerce-cart #shipping_method label > *:not(.radio-indicator), .woocommerce-cart .woocommerce-shipping-methods label > *:not(.radio-indicator), .woocommerce-cart .shipping__list_label > *:not(.radio-indicator) { flex: 1 1 auto !important; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* NO ICON - Removed for cleaner look */ /* Custom radio indicator on the right - BEAUTIFUL! */ .woocommerce-cart #shipping_method label::after, .woocommerce-cart .woocommerce-shipping-methods label::after, .woocommerce-cart .shipping__list_label::after { content: '' !important; width: 20px !important; height: 20px !important; min-width: 20px !important; max-width: 20px !important; border: 3px solid #d1d5db !important; border-radius: 50% !important; background: #ffffff !important; flex-shrink: 0 !important; margin-right: 0 !important; } /* Hover state - BETTER HIGHLIGHT */ .woocommerce-cart #shipping_method label:hover, .woocommerce-cart .woocommerce-shipping-methods label:hover, .woocommerce-cart .shipping__list_label:hover { border-color: #9d4edd !important; background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(157, 78, 221, 0.2) !important; } .woocommerce-cart #shipping_method label:hover::after, .woocommerce-cart .woocommerce-shipping-methods label:hover::after, .woocommerce-cart .shipping__list_label:hover::after { border-color: #9d4edd !important; transform: scale(1.1) !important; } /* Selected state - CLEAR HIGHLIGHT! */ .woocommerce-cart #shipping_method input:checked + label, .woocommerce-cart .woocommerce-shipping-methods input:checked + label, .woocommerce-cart .shipping__list input:checked + label { border-color: #9d4edd !important; background: linear-gradient(135deg, #e9d5ff 0%, #f3e8ff 100%) !important; color: #6b21a8 !important; box-shadow: 0 4px 16px rgba(157, 78, 221, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; } /* Selected radio indicator - FILLED! */ .woocommerce-cart #shipping_method input:checked + label::after, .woocommerce-cart .woocommerce-shipping-methods input:checked + label::after, .woocommerce-cart .shipping__list input:checked + label::after { border-color: #9d4edd !important; border-width: 6px !important; background: #9d4edd !important; box-shadow: 0 0 0 2px #ffffff, 0 2px 8px rgba(157, 78, 221, 0.4) !important; } /* Mobile optimization - below 400px */ @media (max-width: 400px) { .woocommerce-cart #shipping_method label, .woocommerce-cart .woocommerce-shipping-methods label, .woocommerce-cart .shipping__list_label { padding: 14px 14px !important; font-size: clamp(12px, calc(0.0px + 3.5vw), 14px) !important;; min-height: 52px !important; } /* Icon removed - no need for size adjustments */ .woocommerce-cart #shipping_method label::after, .woocommerce-cart .woocommerce-shipping-methods label::after, .woocommerce-cart .shipping__list_label::after { width: 20px !important; height: 20px !important; min-width: 20px !important; } } /* HIDE the woocommerce-shipping-totals shipping TR completely - ONLY ON CART PAGE */ .woocommerce-cart tr.woocommerce-shipping-totals.shipping, body.woocommerce-cart tr.woocommerce-shipping-totals.shipping, body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals.shipping, body.woocommerce-cart table.shop_table tr.woocommerce-shipping-totals.shipping { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; position: absolute !important; left: -9999px !important; } /* HIDE product-remove column for ALL screen sizes (750px and up will hide via PHP/CSS, mobile uses mobile-remove-button) */ .woocommerce-cart table.shop_table td.product-remove, .woocommerce-cart table.shop_table th.product-remove, body.woocommerce-cart table.shop_table td.product-remove, body.woocommerce-cart table.shop_table th.product-remove, table.woocommerce-cart-form__contents td.product-remove, table.woocommerce-cart-form__contents th.product-remove, .woocommerce-cart-form__cart-item td.product-remove, .cart_item td.product-remove { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; position: absolute !important; left: -9999px !important; } /* Extra strong rules for 750px and above to ensure product-remove is completely hidden */ @media (min-width: 750px) { .woocommerce-cart table.shop_table td.product-remove, .woocommerce-cart table.shop_table th.product-remove, body.woocommerce-cart table.shop_table td.product-remove, body.woocommerce-cart table.shop_table th.product-remove, table.woocommerce-cart-form__contents td.product-remove, table.woocommerce-cart-form__contents th.product-remove, .woocommerce-cart-form__cart-item td.product-remove, .cart_item td.product-remove { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; position: absolute !important; left: -9999px !important; } } /* Fix table header alignment after removing product-remove column */ .woocommerce-cart table.shop_table thead tr, body.woocommerce-cart table.shop_table thead tr { display: table-row !important; } .woocommerce-cart table.shop_table thead th, body.woocommerce-cart table.shop_table thead th { display: table-cell !important; vertical-align: middle !important; } /* Fix table body alignment - Exclude cart totals table (shop_table_responsive) */ .woocommerce-cart table.shop_table:not(.shop_table_responsive) tbody tr, body.woocommerce-cart table.shop_table:not(.shop_table_responsive) tbody tr { display: table-row !important; } .woocommerce-cart table.shop_table:not(.shop_table_responsive) tbody td, body.woocommerce-cart table.shop_table:not(.shop_table_responsive) tbody td { display: table-cell !important; vertical-align: middle !important; } /* Ensure thumbnail cell has proper layout for flexbox content */ .woocommerce-cart table.shop_table td.product-thumbnail, body.woocommerce-cart table.shop_table td.product-thumbnail { display: table-cell !important; vertical-align: middle !important; } /* Remove purple line under shipping methods for 750px and up */ @media (min-width: 750px) { /* AGGRESSIVE: Remove ALL borders from shipping table row and ALL its children */ .woocommerce-cart tr.woocommerce-shipping-totals.shipping, .woocommerce-cart tr.woocommerce-shipping-totals.shipping *, .woocommerce-cart tr.woocommerce-shipping-totals.shipping th, .woocommerce-cart tr.woocommerce-shipping-totals.shipping td, .woocommerce-checkout tr.woocommerce-shipping-totals.shipping, .woocommerce-checkout tr.woocommerce-shipping-totals.shipping *, .woocommerce-checkout tr.woocommerce-shipping-totals.shipping th, .woocommerce-checkout tr.woocommerce-shipping-totals.shipping td, .cart_totals tr.woocommerce-shipping-totals.shipping, .cart_totals tr.woocommerce-shipping-totals.shipping *, .cart_totals tr.woocommerce-shipping-totals.shipping th, .cart_totals tr.woocommerce-shipping-totals.shipping td { border: none !important; border-top: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; border-width: 0 !important; border-color: transparent !important; } /* Remove any border-bottom from shipping methods */ .woocommerce-cart #shipping_method, .woocommerce-cart #shipping_method *, .woocommerce-cart #shipping_method li, .woocommerce-cart #shipping_method li label, .woocommerce-cart .woocommerce-shipping-methods, .woocommerce-cart .woocommerce-shipping-methods *, .woocommerce-cart .woocommerce-shipping-methods li, .woocommerce-cart .woocommerce-shipping-methods li label, .woocommerce-cart .shipping__list_item, .woocommerce-cart .shipping__list_item label, .woocommerce-cart #shipping_method input:checked + label, .woocommerce-cart .woocommerce-shipping-methods input:checked + label, .woocommerce-cart .shipping__list input:checked + label { border-bottom: none !important; border-bottom-width: 0 !important; border-bottom-color: transparent !important; } /* Remove ALL pseudo-elements creating lines */ .woocommerce-cart tr.woocommerce-shipping-totals.shipping::before, .woocommerce-cart tr.woocommerce-shipping-totals.shipping::after, .woocommerce-cart tr.woocommerce-shipping-totals.shipping *::before, .woocommerce-cart tr.woocommerce-shipping-totals.shipping *::after, .woocommerce-cart tr.woocommerce-shipping-totals.shipping th::before, .woocommerce-cart tr.woocommerce-shipping-totals.shipping th::after, .woocommerce-cart tr.woocommerce-shipping-totals.shipping td::before, .woocommerce-cart tr.woocommerce-shipping-totals.shipping td::after, .woocommerce-cart #shipping_method li::before, .woocommerce-cart #shipping_method li::after, .woocommerce-cart #shipping_method li label::before, .woocommerce-cart .woocommerce-shipping-methods li::before, .woocommerce-cart .woocommerce-shipping-methods li::after, .woocommerce-cart .woocommerce-shipping-methods li label::before, .woocommerce-cart .shipping__list_item::before, .woocommerce-cart .shipping__list_item::after, .woocommerce-cart .shipping__list_item label::before { display: none !important; content: none !important; border: none !important; background: none !important; opacity: 0 !important; visibility: hidden !important; } } /* ============================================ */ /* FORCE TRASH ICON TO BE 30PX × 30PX - 750PX+ */ /* ============================================ */ @media (min-width: 750px) { /* EXTREMELY AGGRESSIVE STYLING for thumbnail trash button */ .woocommerce-cart table.shop_table td.product-thumbnail .thumbnail-remove-button, body.woocommerce-cart table.shop_table td.product-thumbnail .thumbnail-remove-button, .woocommerce-cart table.shop_table td.product-thumbnail a.thumbnail-remove-button, body.woocommerce-cart table.shop_table td.product-thumbnail a.thumbnail-remove-button, .woocommerce-cart .thumbnail-remove-button.remove, body.woocommerce-cart .thumbnail-remove-button.remove, .woocommerce-cart a.thumbnail-remove-button, body.woocommerce-cart a.thumbnail-remove-button, .thumbnail-remove-button.bfc-trash-icon, a.thumbnail-remove-button.bfc-trash-icon, a.thumbnail-remove-button.remove.bfc-trash-icon { display: inline-flex; width: 30px !important; height: 30px !important; min-width: 30px !important; max-width: 30px !important; min-height: 30px !important; max-height: 30px !important; background: #ef4444 !important; background-color: #ef4444 !important; color: #ffffff !important; border-radius: 0 !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; box-shadow: none !important; cursor: pointer !important; border: none !important; border-width: 0 !important; margin: 0 10px 25px 0 !important; margin-bottom: 25px !important; margin-right: 10px !important; padding: 5px !important; line-height: 0 !important; flex-shrink: 0 !important; flex-grow: 0 !important; position: static !important; transform: none !important; font-size: 0 !important; } /* SVG inside trash button */ .woocommerce-cart .thumbnail-remove-button svg, body.woocommerce-cart .thumbnail-remove-button svg, .thumbnail-remove-button.bfc-trash-icon svg { width: 18px !important; height: 18px !important; stroke: #ffffff !important; color: #ffffff !important; fill: none !important; } /* Product thumbnail: the picture fills its rounded frame edge to edge. The light ring is drawn ON the picture's edge (outline + negative offset, which follows the corner radius) instead of a border + white padding around a shrunken picture, so there is no white gap and no square corner inside the frame. */ .woocommerce-cart table.shop_table td.product-thumbnail img, body.woocommerce-cart table.shop_table td.product-thumbnail img { outline: 3px solid #e5e7eb; outline-offset: -3px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05) !important; } /* Hover effect for product thumbnail images */ .woocommerce-cart table.shop_table tr:hover td.product-thumbnail img, body.woocommerce-cart table.shop_table tr:hover td.product-thumbnail img { outline-color: #9333ea; box-shadow: 0 6px 16px rgba(147, 51, 234, 0.2), 0 0 0 1px rgba(147, 51, 234, 0.1) !important; } } /* ============================================ */ /* MOBILE LAYOUT UNDER 500PX - FLEX CART ITEMS */ /* MUST BE LAST TO OVERRIDE ALL OTHER RULES! */ /* ============================================ */ @media (max-width: 499px) { /* VERY AGGRESSIVE: Force flex layout for cart items ONLY (not cart totals) */ /* Targets only form table (cart items), never cart_totals table (shop_table_responsive) */ body.woocommerce-cart form.woocommerce-cart-form table.shop_table:not(.shop_table_responsive) tbody tr.cart_item, body.woocommerce-cart form.woocommerce-cart-form table.shop_table:not(.shop_table_responsive) tbody tr.woocommerce-cart-form__cart-item, body.woocommerce-cart form.woocommerce-cart-form table.shop_table:not(.shop_table_responsive) tbody tr, .woocommerce-cart form.woocommerce-cart-form table.shop_table:not(.shop_table_responsive) tbody tr.cart_item, .woocommerce-cart form.woocommerce-cart-form table.shop_table:not(.shop_table_responsive) tbody tr.woocommerce-cart-form__cart-item, .woocommerce-cart form.woocommerce-cart-form table.shop_table:not(.shop_table_responsive) tbody tr { display: flex !important; align-content: stretch !important; justify-content: space-evenly !important; align-items: center !important; } /* Also force td to work with flex - only for cart items table */ body.woocommerce-cart form.woocommerce-cart-form table.shop_table:not(.shop_table_responsive) tbody tr td, .woocommerce-cart form.woocommerce-cart-form table.shop_table:not(.shop_table_responsive) tbody tr td { display: block !important; } } /* ============================================ */ /* REMOVE HOVER EFFECTS FROM DISABLED QUANTITY BUTTONS */ /* ============================================ */ /* Disabled quantity buttons - remove hover effects and pointer cursor */ body.woocommerce-cart .quantity button.minus[disabled], body.woocommerce-cart .quantity button.plus[disabled], body.woocommerce-cart .quantity input[type="button"][disabled], body.woocommerce-cart .ux-quantity__button[disabled], .woocommerce-cart .quantity button.minus[disabled], .woocommerce-cart .quantity button.plus[disabled], .woocommerce-cart .quantity input[type="button"][disabled], .woocommerce-cart .ux-quantity__button[disabled] { cursor: not-allowed !important; opacity: 0.5 !important; pointer-events: none !important; } /* Remove hover effects on disabled buttons */ body.woocommerce-cart .quantity button.minus[disabled]:hover, body.woocommerce-cart .quantity button.plus[disabled]:hover, body.woocommerce-cart .quantity input[type="button"][disabled]:hover, body.woocommerce-cart .ux-quantity__button[disabled]:hover, .woocommerce-cart .quantity button.minus[disabled]:hover, .woocommerce-cart .quantity button.plus[disabled]:hover, .woocommerce-cart .quantity input[type="button"][disabled]:hover, .woocommerce-cart .ux-quantity__button[disabled]:hover { background: inherit !important; background-color: inherit !important; transform: none !important; box-shadow: none !important; border-color: inherit !important; color: inherit !important; opacity: 0.5 !important; cursor: not-allowed !important; } /* ============================================ */ /* SHOW ORDER-TOTAL ON CHECKOUT PAGE */ /* ============================================ */ /* FORCE order-total row to be VISIBLE on checkout page - MAXIMUM SPECIFICITY */ body.woocommerce-checkout tr.order-total, body.woocommerce-checkout table.shop_table tr.order-total, body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total, body.woocommerce-checkout table tr.order-total, .woocommerce-checkout tr.order-total, .woocommerce-checkout table.shop_table tr.order-total, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total { display: table-row !important; visibility: visible !important; opacity: 1 !important; height: auto !important; overflow: visible !important; position: relative !important; left: auto !important; right: auto !important; } /* FORCE order-total th and td to be VISIBLE on checkout page */ body.woocommerce-checkout tr.order-total th, body.woocommerce-checkout tr.order-total td, body.woocommerce-checkout table.shop_table tr.order-total th, body.woocommerce-checkout table.shop_table tr.order-total td, .woocommerce-checkout tr.order-total th, .woocommerce-checkout tr.order-total td { display: table-cell !important; visibility: visible !important; opacity: 1 !important; height: auto !important; overflow: visible !important; position: relative !important; left: auto !important; right: auto !important; padding: 12px !important; } /* Keep order-total HIDDEN on cart page ONLY - cart page doesn't need total row */ body.woocommerce-cart tr.order-total, body.woocommerce-cart table.shop_table tr.order-total, .woocommerce-cart tr.order-total, .woocommerce-cart table.shop_table tr.order-total { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; position: absolute !important; left: -9999px !important; } /* * RZK 2026-10-13: close the last CSS/JS disagreement, at >=1366px. * * beautiful-fast-cart.css covers every breakpoint up to 1365px, but above that the base * rule falls through to --cart-thumbnail-size: clamp(75px, 8vw, 95px), which resolves to * 95px. getResponsiveImageSize() in cart-page-fix.js returns 90px for that range, so the * JS was still nudging the thumbnail by 5px after paint. Stating 90px here makes the two * agree and removes the residual shift on large desktops. */ @media (min-width: 1366px) { body.woocommerce-cart table.shop_table td.product-thumbnail a, body.woocommerce-cart table.shop_table td.product-thumbnail img, .woocommerce-cart table.shop_table td.product-thumbnail a, .woocommerce-cart table.shop_table td.product-thumbnail img { width: 90px !important; height: 90px !important; max-width: 90px !important; max-height: 90px !important; } } /* * RZK 2026-10-13 (round 8): restore two declarations that Remove-Unused-CSS drops * on /cart/. * * WHY THESE ARE MISSING. WP Rocket computes the used-CSS for a URL by fetching * that URL itself. It has no WooCommerce session, so it always sees an EMPTY * cart. Every selector that exists only when the cart has items is therefore * classified as unused and removed. Measured against the stock build at 768px, * that cost us Flatsome's base `.show-for-small{display:none}` rule, which left * the mobile-only price line visible on tablets and made every cart row 18-25px * taller, and `.col{position:relative}`, which left `.cart-collaterals` * statically positioned. * * `.show-for-small` is handled by a safelist entry, because the rule has to keep * Flatsome's own breakpoint behaviour. The positioning below is stated here * instead of safelisting `.col`, which would drag in a large amount of grid CSS * for the sake of one declaration. */ body.woocommerce-cart .cart-collaterals, body.woocommerce-cart .cart-collaterals.large-5, body.woocommerce-cart .woocommerce > .row > .cart-collaterals, body.theme-flatsome.woocommerce-cart .cart-collaterals { position: relative !important; }