/** * Aura Cart Redesign v1.0 * * Matches AURA CHECKOUT v6.0 design system: * - Inter font, 14px border-radius cards, #f5f5f7 background * - 2-column grid (7fr / 5fr), sticky sidebar * - Shared design tokens with aura-checkout.css * * Scoped to body.woocommerce-cart to avoid leaking to other pages. * Uses !important sparingly — only where Shoptimizer overrides are strong. */ /* ========================================================================== 0. FONT ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* ========================================================================== 1. BASE RESETS Only scope to cart content area — header/footer stay normal. ========================================================================== */ /* Background ONLY on #content — header/footer keep their own backgrounds */ body.woocommerce-cart { background: #f5f5f7 !important; } body.woocommerce-cart .aura-cart, body.woocommerce-cart .aura-cart *, body.woocommerce-cart .aura-cart *::before, body.woocommerce-cart .aura-cart *::after { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; box-sizing: border-box; } /* Content area overrides — ONLY inside #content. Header and footer remain untouched (parent theme styles stay loaded). Uses high-specificity selectors to beat shoptimizer-main.css rules (.col-full { max-width:1170px; padding:0 42px; box-sizing:content-box }) */ body.woocommerce-cart #content { padding-top: 20px !important; } body.woocommerce-cart #content .col-full { max-width: 1200px !important; padding: 0 16px !important; box-sizing: border-box !important; margin: 0 auto !important; width: 100% !important; } body.woocommerce-cart #content #primary { width: 100% !important; max-width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important; } body.woocommerce-cart #content .hentry, body.woocommerce-cart #content .entry-content { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ========================================================================== 1b. FOUC PREVENTION JS adds .ac-cart-ready to . Fallback: CSS animation makes content visible after 0.6s if JS fails. ========================================================================== */ @keyframes ac-cart-fouc-fallback { to { opacity: 1; } } body.aura-cart-page:not(.ac-cart-ready) div.aura-cart { opacity: 0; animation: ac-cart-fouc-fallback 0.3s 0.6s forwards; } body.aura-cart-page.ac-cart-ready div.aura-cart { opacity: 1; } /* ========================================================================== 2. HIDE UNWANTED ELEMENTS ========================================================================== */ /* Sidebar widget area (inside #content only — don't touch header/footer widgets) */ body.woocommerce-cart #content #secondary, body.woocommerce-cart #content .widget-area { display: none !important; } /* Page title from Shoptimizer (inside #content only) */ body.woocommerce-cart #content .entry-header, body.woocommerce-cart #content .page-title, body.woocommerce-cart #content h1.entry-title { display: none !important; } /* Breadcrumbs (inside #content only) */ body.woocommerce-cart #content .woocommerce-breadcrumb, body.woocommerce-cart #content nav.woocommerce-breadcrumb, body.woocommerce-cart #content .site-breadcrumbs, body.woocommerce-cart #content .breadcrumbs, body.woocommerce-cart #content .archive-header { display: none !important; } /* Shoptimizer checkout progress bar if it appears on cart */ body.woocommerce-cart #content .checkout-wrap, body.woocommerce-cart #content .checkout-bar, body.woocommerce-cart #content .woocommerce-checkout-steps, body.woocommerce-cart #content .checkout-steps { display: none !important; } /* WC default coupon toggle */ body.woocommerce-cart #content .coupon-wrapper, body.woocommerce-cart #content section.coupon-wrapper { display: none !important; } /* WC rewards messages (scoped to content area) */ body.woocommerce-cart #content .rs_checkout_messages, body.woocommerce-cart #content [class*="rs_checkout"], body.woocommerce-cart #content [class*="sumo_reward"] { display: none !important; } /* Footer features strip — hidden on cart (trust strip replaces it) */ body.woocommerce-cart .aura-footer-features-container { display: none !important; } /* Clear divs */ body.woocommerce-cart div.aura-cart .clear { display: none !important; } /* ========================================================================== 3. MAIN GRID LAYOUT (2-column: 7fr / 5fr) ========================================================================== */ /* .col-full parent already constrains to 1200px via our #content override. .aura-cart just fills the available width and creates the grid. */ div.aura-cart { display: grid !important; grid-template-columns: 7fr 5fr !important; gap: 20px !important; align-items: start !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .aura-cart-left { grid-column: 1 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; min-width: 0 !important; } .aura-cart-right { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; } /* ========================================================================== 4. SECTION CARDS (shared pattern with checkout) ========================================================================== */ .aura-checkout-section { background: #ffffff !important; border-radius: 14px !important; padding: 20px 22px 18px !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; margin: 0 !important; } .aura-section-title { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: #0f172a !important; margin: 0 0 14px !important; padding: 0 !important; line-height: 1.3 !important; border: none !important; background: none !important; } .aura-section-title svg { flex-shrink: 0; color: #3f880b; stroke: #3f880b; } /* Section 5 (old heading card) removed — replaced by timeline + sub-heading in section 25 */ /* ========================================================================== 6. CART ITEMS CARD ========================================================================== */ .aura-cart-items-card { padding: 16px 18px !important; } /* Hide cart form table elements — our template uses div layout */ div.aura-cart .woocommerce-cart-form .shop_table, div.aura-cart .woocommerce-cart-form table { display: none !important; } /* ========================================================================== 7. PRODUCT ITEMS (matching checkout .aura-order-item pattern) ========================================================================== */ .aura-order-item { display: flex !important; align-items: center !important; gap: 12px !important; padding: 8px 0 !important; flex-wrap: nowrap !important; } .aura-order-item + .aura-order-item { border-top: 1px solid #f1f5f9 !important; padding-top: 10px !important; margin-top: 2px !important; } /* Thumbnail — slightly larger than checkout (64px vs 44px) */ .aura-order-item-thumb { width: 64px !important; min-width: 64px !important; height: 64px !important; border-radius: 10px !important; overflow: hidden !important; background: #f8fafc !important; border: 1px solid #f1f5f9 !important; flex-shrink: 0 !important; } .aura-order-item-thumb a { display: block; width: 100%; height: 100%; } .aura-order-item-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Details column */ .aura-order-item-details { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } .aura-order-item-name { font-size: 13px !important; font-weight: 500 !important; color: #0f172a !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .aura-order-item-name a { color: #0f172a !important; text-decoration: none !important; transition: color 0.15s; } .aura-order-item-name a:hover { color: #3f880b !important; } /* Addon items — static qty display */ .aura-order-item-qty { font-size: 12px !important; color: #64748b !important; margin-top: 2px !important; font-weight: 400 !important; } /* Item metadata (variation info, etc.) */ .aura-order-item-meta { font-size: 11px !important; color: #94a3b8 !important; margin-top: 2px !important; } .aura-order-item-meta dt, .aura-order-item-meta dd { display: inline !important; margin: 0 !important; padding: 0 !important; } /* Unit price (per item) */ .aura-order-item-unit-price { font-size: 11px !important; color: #94a3b8 !important; margin-top: 1px !important; } .aura-order-item-unit-price del { color: #cbd5e1 !important; text-decoration: line-through !important; margin-right: 4px !important; } .aura-order-item-unit-price ins { text-decoration: none !important; color: #94a3b8 !important; } /* Line total price */ .aura-order-item-price { font-size: 14px !important; font-weight: 600 !important; color: #0f172a !important; white-space: nowrap !important; flex-shrink: 0 !important; text-align: right !important; } .aura-order-item-price del { display: block !important; color: #cbd5e1 !important; font-size: 11px !important; font-weight: 400 !important; text-decoration: line-through !important; } .aura-order-item-price ins { text-decoration: none !important; } /* Kill stray clear divs */ .aura-order-item .clear, .aura-order-item-qty .clear { display: none !important; } /* ========================================================================== 8. QUANTITY CONTROLS + REMOVE BUTTON ========================================================================== */ .aura-order-item-controls { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 4px !important; } .aura-qty-control { display: inline-flex !important; align-items: center !important; border: 1px solid #e2e8f0 !important; border-radius: 6px !important; overflow: hidden !important; background: #f8fafc !important; height: 28px !important; } .aura-qty-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border: none !important; background: transparent !important; color: #475569 !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; transition: background 0.15s, color 0.15s !important; -webkit-appearance: none !important; appearance: none !important; outline: none !important; box-shadow: none !important; } .aura-qty-btn:hover { background: #e2e8f0 !important; color: #0f172a !important; } .aura-qty-btn:active { background: #cbd5e1 !important; } .aura-qty-value { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 26px !important; height: 28px !important; font-size: 12px !important; font-weight: 600 !important; color: #0f172a !important; text-align: center !important; user-select: none !important; -webkit-user-select: none !important; border-left: 1px solid #e2e8f0 !important; border-right: 1px solid #e2e8f0 !important; padding: 0 2px !important; } .aura-item-remove { display: flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; border: none !important; background: transparent !important; color: #94a3b8 !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; border-radius: 4px !important; transition: color 0.15s, background 0.15s !important; flex-shrink: 0 !important; -webkit-appearance: none !important; appearance: none !important; outline: none !important; box-shadow: none !important; } .aura-item-remove:hover { color: #ef4444 !important; background: #fef2f2 !important; } .aura-item-remove svg { width: 14px !important; height: 14px !important; } /* Loading state per item */ .aura-order-item.aura-item-loading { opacity: 0.4 !important; pointer-events: none !important; transition: opacity 0.2s !important; } /* ========================================================================== 9. SIDEBAR (sticky card) ========================================================================== */ .aura-cart-sidebar { background: #ffffff !important; border-radius: 14px !important; padding: 20px 22px !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; position: sticky !important; top: 20px !important; } /* ========================================================================== 10. SIDEBAR SECTIONS ========================================================================== */ .aura-sidebar-section { padding: 14px 0 !important; border-bottom: 1px solid #f1f5f9 !important; } .aura-sidebar-section-title { font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: #0f172a !important; margin: 0 0 8px !important; padding: 0 !important; } /* ========================================================================== 11. SHIPPING METHODS IN SIDEBAR ========================================================================== */ /* Hide stray "Wysylka" text node */ .aura-sidebar-shipping { font-size: 0 !important; } .aura-sidebar-shipping * { font-size: 12px !important; } .aura-sidebar-shipping .woocommerce-shipping-methods, #shipping_method { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } #shipping_method li, .aura-sidebar-shipping .woocommerce-shipping-methods li { background: #f8fafc !important; border: 1.5px solid #e2e8f0 !important; border-radius: 8px !important; padding: 8px 10px !important; margin-bottom: 0 !important; cursor: pointer; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; display: flex !important; flex-wrap: wrap; align-items: center !important; gap: 6px; position: relative; } #shipping_method li:hover, .aura-sidebar-shipping .woocommerce-shipping-methods li:hover { border-color: #3f880b !important; } /* Selected shipping card */ #shipping_method li.ac-selected, #shipping_method li:has(input[type="radio"]:checked), .aura-sidebar-shipping .woocommerce-shipping-methods li.ac-selected, .aura-sidebar-shipping .woocommerce-shipping-methods li:has(input[type="radio"]:checked) { border-color: #3f880b !important; background: #f0fdf4 !important; box-shadow: 0 0 0 3px rgba(63, 136, 11, 0.06) !important; } /* Custom radio buttons */ #shipping_method input[type="radio"], .aura-sidebar-shipping .woocommerce-shipping-methods input[type="radio"] { -webkit-appearance: none !important; appearance: none !important; width: 16px !important; height: 16px !important; min-width: 16px !important; border: 2px solid #cbd5e1 !important; border-radius: 50% !important; background: #ffffff !important; cursor: pointer; position: relative; margin: 0 !important; padding: 0 !important; flex-shrink: 0; transition: border-color 0.2s, background 0.2s; } #shipping_method input[type="radio"]:checked, .aura-sidebar-shipping .woocommerce-shipping-methods input[type="radio"]:checked { border-color: #3f880b !important; background: #3f880b !important; } #shipping_method input[type="radio"]:checked::after, .aura-sidebar-shipping .woocommerce-shipping-methods input[type="radio"]:checked::after { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #ffffff !important; } /* Shipping labels */ #shipping_method input[type="radio"] + label, .aura-sidebar-shipping .woocommerce-shipping-methods label { font-size: 12px !important; font-weight: 500 !important; color: #0f172a !important; cursor: pointer; flex: 1 !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: auto 1fr auto !important; align-items: center !important; gap: 1px 8px !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.35 !important; border-bottom: none !important; } #shipping_method label .shipping-name-wrap, .aura-sidebar-shipping .woocommerce-shipping-methods label .shipping-name-wrap { display: block !important; min-width: 0 !important; } /* Shipping subtitle */ .aura-sidebar-shipping .woocommerce-shipping-methods label .shipping-sub { display: block !important; font-size: 10px !important; font-weight: 400 !important; color: #94a3b8 !important; line-height: 1.3 !important; margin-top: 0 !important; } /* Shipping price */ #shipping_method label .woocommerce-Price-amount, .aura-sidebar-shipping .woocommerce-shipping-methods label .woocommerce-Price-amount { font-weight: 600 !important; white-space: nowrap; } /* Shipping logos */ #shipping_method label img, #shipping_method label .shipping-logo, .aura-sidebar-shipping .woocommerce-shipping-methods label img, .aura-sidebar-shipping .woocommerce-shipping-methods label .shipping-logo { height: 26px !important; width: auto !important; max-width: 60px !important; max-height: 26px !important; object-fit: contain !important; margin: 0 !important; vertical-align: middle; flex-shrink: 0 !important; border-radius: 4px !important; align-self: center; } /* Hide shipping destination text */ .aura-sidebar-shipping .woocommerce-shipping-destination { display: none !important; } .woocommerce-shipping-totals { border: none !important; padding: 0 !important; margin: 0 !important; background: transparent !important; } /* Free shipping badge */ .aura-sidebar-shipping .free-shipping-badge, .aura-sidebar-shipping .woocommerce-shipping-methods label .free-shipping { color: #3f880b !important; font-weight: 600 !important; } /* Hide sub-content in non-selected shipping LIs (InPost map, ORLEN dropdown) */ #shipping_method li:not(.ac-selected) > div:not(:empty), #shipping_method li:not(.ac-selected) > a, #shipping_method li:not(.ac-selected) > button, #shipping_method li:not(.ac-selected) > .shipping-pickup-store, #shipping_method li:not(.ac-selected) > .easypack-widget, #shipping_method li:not(.ac-selected) > [class*="inpost"], #shipping_method li:not(.ac-selected) > [class*="orlen"], #shipping_method li:not(.ac-selected) > .paczkomat-info, #shipping_method li:not(.ac-selected) > .paczkomat-select, #shipping_method li:not(.ac-selected) > #selected-paczkomat, #shipping_method li:not(.ac-selected) > .punkt-odbioru { display: none !important; } /* InPost / ORLEN sub-content wraps to full width */ .aura-sidebar-shipping .woocommerce-shipping-methods li > .shipping-pickup-store, .aura-sidebar-shipping .woocommerce-shipping-methods li > .easypack-widget, .aura-sidebar-shipping .woocommerce-shipping-methods li > [class*="inpost"], .aura-sidebar-shipping .woocommerce-shipping-methods li > [class*="orlen"], .aura-sidebar-shipping .woocommerce-shipping-methods li > .paczkomat-info, .aura-sidebar-shipping .woocommerce-shipping-methods li > .paczkomat-select, .aura-sidebar-shipping .woocommerce-shipping-methods li > div:not(:first-child), .aura-sidebar-shipping .woocommerce-shipping-methods li > a, .aura-sidebar-shipping .woocommerce-shipping-methods li > button { flex-basis: 100%; margin-top: 4px; font-size: 12px; } /* InPost Paczkomat — selected point details */ .aura-sidebar-shipping #selected-paczkomat, .woocommerce-shipping-methods #selected-paczkomat { font-size: 11px !important; line-height: 1.4 !important; color: #334155 !important; text-align: left !important; margin: 6px 0 2px !important; padding: 8px 10px !important; background: #f0fdf4 !important; border-radius: 6px !important; border: 1px solid #e2e8f0 !important; flex-basis: 100% !important; word-break: break-word !important; } .aura-sidebar-shipping #selected-paczkomat strong, .woocommerce-shipping-methods #selected-paczkomat strong { font-weight: 600 !important; color: #0f172a !important; font-size: 11px !important; display: block !important; margin-bottom: 2px !important; } /* Paczkomat / InPost buttons */ .aura-sidebar-shipping .woocommerce-shipping-methods li button, .aura-sidebar-shipping .woocommerce-shipping-methods li a.button, .aura-sidebar-shipping .woocommerce-shipping-methods li .button { background: #1e293b !important; color: #ffffff !important; border: none !important; border-radius: 6px !important; padding: 6px 14px !important; font-size: 11px !important; font-weight: 600 !important; cursor: pointer; transition: background 0.15s; display: inline-block !important; text-decoration: none !important; text-align: center !important; } .aura-sidebar-shipping .woocommerce-shipping-methods li button:hover, .aura-sidebar-shipping .woocommerce-shipping-methods li a.button:hover { background: #0f172a !important; } /* Delivery time badge */ .ac-delivery-badge { display: block !important; font-size: 10px !important; font-weight: 400 !important; color: #64748b !important; line-height: 1.3 !important; grid-column: 2 / -1 !important; } /* ========================================================================== 12. DISCOUNT TABS (Kod rabatowy | Aura Points) ========================================================================== */ .aura-coupon-section { padding: 0 !important; margin: 0 !important; } .aura-coupon-title { font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: #0f172a !important; margin: 0 0 8px !important; padding: 14px 0 0 !important; border-top: 1px solid #f1f5f9 !important; } /* Tab Container */ .aura-discount-tabs { padding: 14px 0 !important; border-bottom: 1px solid #f1f5f9 !important; margin: 0 !important; } /* Tab Navigation */ .aura-discount-tabs__nav { display: flex !important; gap: 0 !important; margin-bottom: 12px !important; background: #f1f5f9 !important; border-radius: 10px !important; padding: 3px !important; } .aura-tab-btn { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; height: 36px !important; padding: 0 12px !important; font-size: 13px !important; font-weight: 600 !important; color: #64748b !important; background: transparent !important; border: none !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.2s !important; white-space: nowrap !important; line-height: 1 !important; } .aura-tab-btn:hover { color: #0f172a !important; } .aura-tab-btn.active { background: #ffffff !important; color: #0f172a !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important; } .aura-tab-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 20px !important; min-width: 20px !important; padding: 0 6px !important; font-size: 11px !important; font-weight: 700 !important; color: #ffffff !important; background: #3f880b !important; border-radius: 10px !important; line-height: 1 !important; } /* Tab Panels */ .aura-tab-panel { display: none !important; } .aura-tab-panel.active { display: block !important; } /* --- Coupon Tab --- */ #custom-coupon-field { margin: 0 !important; padding: 0 !important; } #custom-coupon-fields { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; } #custom-coupon-fields .form-row-first { flex: 1; width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; } #custom-coupon-fields .form-row-last { width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; } #custom_coupon_code { height: 42px !important; padding: 0 12px !important; font-size: 13px !important; border: 1.5px solid #e2e8f0 !important; border-radius: 10px !important; background: #ffffff !important; width: 100% !important; box-sizing: border-box !important; transition: border-color 0.2s, box-shadow 0.2s; outline: none !important; } #custom_coupon_code:focus { border-color: #3f880b !important; box-shadow: 0 0 0 3px rgba(63, 136, 11, 0.1) !important; } #apply_custom_coupon { height: 42px !important; padding: 0 18px !important; font-size: 13px !important; font-weight: 600 !important; background: #0f172a !important; color: #ffffff !important; border: none !important; border-radius: 10px !important; cursor: pointer; white-space: nowrap !important; transition: background 0.2s; } #apply_custom_coupon:hover { background: #1e293b !important; } #custom_coupon_message { width: 100% !important; flex-basis: 100% !important; } #custom_coupon_message .woocommerce-message, #custom_coupon_message .woocommerce-error { font-size: 13px !important; padding: 8px 12px !important; margin: 8px 0 0 !important; border-radius: 8px !important; } #custom-coupon-fields .clear { display: none; } /* --- Aura Points Tab --- */ .aura-points-panel { padding: 0 !important; } .aura-points-balance { display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important; margin-bottom: 10px !important; } .aura-points-balance__label { font-size: 13px !important; color: #64748b !important; font-weight: 500 !important; } .aura-points-balance__value { font-size: 15px !important; font-weight: 700 !important; color: #3f880b !important; } .aura-points-balance__money { font-size: 12px !important; color: #94a3b8 !important; font-weight: 400 !important; } /* Points slider */ .aura-points-slider-wrap { margin-bottom: 10px !important; } .aura-points-slider { -webkit-appearance: none !important; appearance: none !important; width: 100% !important; height: 6px !important; border-radius: 3px !important; background: #e2e8f0 !important; outline: none !important; cursor: pointer !important; border: none !important; margin: 0 !important; padding: 0 !important; } .aura-points-slider::-webkit-slider-thumb { -webkit-appearance: none !important; appearance: none !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; background: #3f880b !important; cursor: pointer !important; border: 2px solid #ffffff !important; box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important; } .aura-points-slider::-moz-range-thumb { width: 18px !important; height: 18px !important; border-radius: 50% !important; background: #3f880b !important; cursor: pointer !important; border: 2px solid #ffffff !important; box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important; } .aura-points-slider__labels { display: flex !important; justify-content: space-between !important; font-size: 10px !important; color: #94a3b8 !important; margin-top: 2px !important; } .aura-points-redeem__row { display: flex !important; gap: 8px !important; } #aura_points_input { flex: 1 !important; height: 42px !important; padding: 0 12px !important; font-size: 13px !important; border: 1.5px solid #e2e8f0 !important; border-radius: 10px !important; background: #ffffff !important; width: 100% !important; box-sizing: border-box !important; transition: border-color 0.2s, box-shadow 0.2s; -moz-appearance: textfield !important; outline: none !important; } #aura_points_input::-webkit-outer-spin-button, #aura_points_input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } #aura_points_input:focus { border-color: #3f880b !important; box-shadow: 0 0 0 3px rgba(63, 136, 11, 0.1) !important; } #aura_apply_points { height: 42px !important; padding: 0 18px !important; font-size: 13px !important; font-weight: 600 !important; background: #3f880b !important; color: #ffffff !important; border: none !important; border-radius: 10px !important; cursor: pointer; white-space: nowrap !important; transition: background 0.2s; } #aura_apply_points:hover { background: #357309 !important; } #aura_points_message { margin-top: 8px !important; } #aura_points_message .woocommerce-message, #aura_points_message .woocommerce-error { font-size: 13px !important; padding: 8px 12px !important; margin: 0 !important; border-radius: 8px !important; } .aura-points-earn { margin-top: 10px !important; font-size: 13px !important; color: #3f880b !important; font-weight: 500 !important; } .aura-points-earn:empty { display: none !important; margin: 0 !important; } .aura-points-earn__icon { font-weight: 700 !important; font-size: 14px !important; } /* Not logged in state */ .aura-points-login { text-align: center !important; padding: 8px 0 !important; } .aura-points-login p { font-size: 13px !important; color: #64748b !important; margin: 0 0 8px !important; } .aura-points-login-link { display: inline-block !important; font-size: 13px !important; font-weight: 600 !important; color: #3f880b !important; text-decoration: underline !important; } .aura-points-unavailable p { font-size: 13px !important; color: #94a3b8 !important; text-align: center !important; margin: 0 !important; padding: 8px 0 !important; } .aura-coupon-section .aura-qb-banner--checkout { margin: 0 !important; border-radius: 8px !important; font-size: 11px !important; line-height: 1.35 !important; padding: 8px 10px !important; } .aura-qb-banner--cart { margin: 0 !important; border-radius: 10px !important; font-size: 11px !important; line-height: 1.4 !important; } .aura-qb-banner--cart .aura-qb-banner__desc { font-size: 11.5px !important; padding: 10px 12px !important; gap: 8px !important; } .aura-qb-banner--cart .aura-qb-banner__desc svg { width: 16px !important; height: 16px !important; min-width: 16px !important; max-width: 16px !important; } .aura-qb-banner--cart .aura-qb-banner__status { padding: 8px 10px !important; margin: 0 6px 6px !important; gap: 8px !important; } .aura-qb-banner--cart .aura-qb-banner__text { font-size: 11px !important; } .aura-qb-banner--cart .aura-qb-banner__code { font-size: 11px !important; padding: 2px 6px !important; } .aura-qb-banner--cart .aura-qb-banner__timer { font-size: 11px !important; padding: 4px 8px !important; } .aura-qb-banner--cart .aura-qb-banner__badge { font-size: 11px !important; padding: 4px 10px !important; } /* ========================================================================== 13. ORDER TOTALS ========================================================================== */ .aura-order-totals { padding-top: 14px !important; border-top: 1px solid #f1f5f9 !important; } .aura-totals-row { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 5px 0 !important; } .aura-totals-label { font-size: 13px !important; font-weight: 400 !important; color: #64748b !important; } .aura-totals-value { font-size: 13px !important; font-weight: 500 !important; color: #0f172a !important; } /* Discount rows (coupons, fees) */ .aura-totals-discount { background: #f0fdf4 !important; border: 1.5px dashed #86efac !important; border-radius: 6px !important; padding: 7px 10px !important; margin: 4px 0 !important; position: relative !important; } .aura-totals-discount .aura-totals-label { color: #0f172a !important; font-size: 12px !important; font-weight: 500 !important; } .aura-totals-discount .aura-totals-value { color: #16a34a !important; font-weight: 700 !important; font-size: 12px !important; } /* Coupon remove link */ .aura-totals-discount .aura-totals-value a { color: #94a3b8 !important; font-size: 10px !important; text-decoration: none !important; margin-left: 4px !important; } .aura-totals-discount .aura-totals-value a:hover { color: #ef4444 !important; } /* Grand Total */ .aura-totals-total { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 12px 0 0 !important; margin-top: 8px !important; border-top: 2px solid #e2e8f0 !important; } .aura-totals-total-label { font-size: 15px !important; font-weight: 700 !important; color: #0f172a !important; } .aura-totals-total-value { font-size: 22px !important; font-weight: 700 !important; color: #0f172a !important; } .aura-totals-total-value .includes_tax { display: block !important; font-size: 11px !important; font-weight: 400 !important; color: #94a3b8 !important; text-align: right !important; } /* ========================================================================== 14. CTA BUTTON (Proceed to Checkout) ========================================================================== */ .aura-cart-cta { padding-top: 16px !important; } .aura-cart-checkout-btn { display: block !important; width: 100% !important; padding: 16px 24px !important; font-size: 15px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; background: #3f880b !important; color: #ffffff !important; border: none !important; border-radius: 12px !important; cursor: pointer; transition: background 0.2s, box-shadow 0.2s; line-height: 1.3 !important; box-shadow: 0 2px 8px rgba(63, 136, 11, 0.25) !important; text-align: center !important; text-decoration: none !important; } .aura-cart-checkout-btn:hover { background: #357309 !important; box-shadow: 0 4px 12px rgba(63, 136, 11, 0.35) !important; color: #ffffff !important; text-decoration: none !important; } /* ========================================================================== 15. WC NOTICES (cart page) ========================================================================== */ body.woocommerce-cart #content .woocommerce-error, body.woocommerce-cart #content .woocommerce-message, body.woocommerce-cart #content .woocommerce-info { border-radius: 12px !important; font-size: 13px !important; padding: 14px 18px !important; margin-bottom: 16px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important; border: 1px solid !important; border-left: 4px solid !important; list-style: none !important; } body.woocommerce-cart #content .woocommerce-error::before, body.woocommerce-cart #content .woocommerce-message::before, body.woocommerce-cart #content .woocommerce-info::before { display: none !important; } body.woocommerce-cart #content .woocommerce-error { background: #fef2f2 !important; border-color: #fecaca !important; border-left-color: #ef4444 !important; color: #991b1b !important; } body.woocommerce-cart #content .woocommerce-message { background: #f0fdf4 !important; border-color: #bbf7d0 !important; border-left-color: #3f880b !important; color: #15803d !important; } body.woocommerce-cart #content .woocommerce-info { background: #eff6ff !important; border-color: #bfdbfe !important; border-left-color: #3b82f6 !important; color: #1e40af !important; } /* ========================================================================== 16. LOADING ANIMATION ========================================================================== */ .ac-loading { position: relative !important; pointer-events: none !important; opacity: 0.5 !important; transition: opacity 0.2s !important; } .ac-loading::after { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 20px !important; height: 20px !important; margin: -10px 0 0 -10px !important; border: 2px solid #e2e8f0 !important; border-top-color: #3f880b !important; border-radius: 50% !important; animation: ac-cart-spin 0.6s linear infinite !important; z-index: 10 !important; } @keyframes ac-cart-spin { to { transform: rotate(360deg); } } /* ========================================================================== 17. CROSS-SELLS SECTION ========================================================================== */ .aura-cart-cross-sells { margin-top: 4px; } .aura-cart-cross-sells .cross-sells { background: #ffffff !important; border-radius: 14px !important; padding: 20px 22px !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; } .aura-cart-cross-sells .cross-sells > h2 { font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: #0f172a !important; margin: 0 0 14px !important; padding: 0 !important; } .aura-cart-cross-sells .cross-sells ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 12px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } .aura-cart-cross-sells .cross-sells ul.products li.product { background: #f8fafc !important; border: 1px solid #f1f5f9 !important; border-radius: 10px !important; padding: 10px !important; text-align: center !important; transition: border-color 0.2s, box-shadow 0.2s; } .aura-cart-cross-sells .cross-sells ul.products li.product:hover { border-color: #e2e8f0 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; } .aura-cart-cross-sells .cross-sells ul.products li.product a img { border-radius: 8px !important; margin-bottom: 8px !important; } .aura-cart-cross-sells .cross-sells ul.products li.product a h2, .aura-cart-cross-sells .cross-sells ul.products li.product .woocommerce-loop-product__title { font-size: 12px !important; font-weight: 500 !important; color: #0f172a !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin: 0 0 4px !important; } .aura-cart-cross-sells .cross-sells ul.products li.product .price { font-size: 13px !important; font-weight: 600 !important; color: #0f172a !important; margin: 0 0 8px !important; } .aura-cart-cross-sells .cross-sells ul.products li.product .button { display: inline-block !important; background: #0f172a !important; color: #ffffff !important; font-size: 11px !important; font-weight: 600 !important; padding: 6px 14px !important; border-radius: 6px !important; border: none !important; text-decoration: none !important; transition: background 0.15s; } .aura-cart-cross-sells .cross-sells ul.products li.product .button:hover { background: #1e293b !important; } /* Hide empty cross-sells container */ .aura-cart-cross-sells:empty { display: none !important; } /* ========================================================================== 18. FOCUS-VISIBLE ACCESSIBILITY ========================================================================== */ div.aura-cart a:focus-visible, div.aura-cart button:focus-visible, div.aura-cart input:focus-visible, div.aura-cart select:focus-visible { outline: 2px solid #3f880b; outline-offset: 2px; } div.aura-cart a:focus:not(:focus-visible), div.aura-cart button:focus:not(:focus-visible), div.aura-cart input:focus:not(:focus-visible), div.aura-cart select:focus:not(:focus-visible) { outline: none; } /* ========================================================================== 19. WC DEFAULT CART FORM OVERRIDES Kill default table/button styles that may leak through ========================================================================== */ body.woocommerce-cart #content .woocommerce-cart-form { margin: 0 !important; padding: 0 !important; min-width: 0 !important; } body.woocommerce-cart .woocommerce-shipping-calculator { display: none !important; } /* Hide WC default "Update cart" and "Coupon" row */ body.woocommerce-cart #content .cart-collaterals .cart_totals { display: none !important; } body.woocommerce-cart #content .actions, body.woocommerce-cart #content .coupon { display: none !important; } /* ========================================================================== 20. MOBILE (<= 992px) — stacked single column ========================================================================== */ @media (max-width: 992px) { /* Flatten grid so all children participate in ordering */ div.aura-cart { display: flex !important; flex-direction: column !important; gap: 12px !important; } .aura-cart-left { display: contents !important; } .aura-cart-left > form.woocommerce-cart-form { display: contents !important; } /* Mobile order: 1. Products card 2. Sidebar (coupons, totals, CTA) 3. Recommended products 4. Protocol completer 5. Cross-sells */ .aura-cart-items-card { order: 1 !important; } .aura-cart-right { order: 2 !important; } .cart-after-table-container { order: 3 !important; } .pm-protocol-completer-wrap { order: 4 !important; } .aura-cart-cross-sells { order: 5 !important; } /* Noscript + hidden fields from form (keep at end) */ .woocommerce-cart-form > noscript, .woocommerce-cart-form > input[type="hidden"] { order: 99 !important; } /* Un-sticky sidebar on mobile */ .aura-cart-sidebar { position: static !important; } /* iOS Safari auto-zoom fix */ #custom_coupon_code, #aura_points_input { font-size: 16px !important; } /* Compact notices */ body.woocommerce-cart #content .woocommerce-error, body.woocommerce-cart #content .woocommerce-message, body.woocommerce-cart #content .woocommerce-info { font-size: 11px !important; padding: 10px 14px !important; border-radius: 10px !important; margin-bottom: 10px !important; } /* Section cards: slightly tighter padding */ .aura-checkout-section { padding: 16px 14px 14px !important; border-radius: 12px !important; } .aura-cart-sidebar { padding: 16px 14px !important; border-radius: 12px !important; } /* Product items: wrap price below */ .aura-order-item { flex-wrap: wrap !important; } .aura-order-item-price { width: 100% !important; text-align: right !important; padding-top: 4px !important; } /* Cross-sells: 2 columns min */ .aura-cart-cross-sells .cross-sells ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } /* Sticky CTA bar on mobile */ .aura-cart-cta { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 999 !important; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important; background: #ffffff !important; border-top: 1px solid #e2e8f0 !important; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08) !important; margin: 0 !important; } .aura-cart-checkout-btn { border-radius: 10px !important; padding: 14px 20px !important; } /* Prevent content from hiding behind fixed CTA */ body.woocommerce-cart { padding-bottom: 80px !important; } /* Lift Tidio chat above sticky CTA */ #tidio-chat { bottom: 60px !important; right: 10px !important; } } /* ========================================================================== 21. SMALL MOBILE (<= 480px) ========================================================================== */ @media (max-width: 480px) { div.aura-cart { gap: 8px !important; } .aura-checkout-section { padding: 14px 12px 12px !important; border-radius: 10px !important; } .aura-cart-sidebar { padding: 14px 12px !important; border-radius: 10px !important; } .aura-section-title { font-size: 13px !important; } /* Smaller thumbnails */ .aura-order-item-thumb { width: 52px !important; min-width: 52px !important; height: 52px !important; } /* Stack qty controls and remove on small screens */ .aura-order-item-controls { gap: 6px !important; } /* CTA button */ .aura-cart-checkout-btn { padding: 14px 20px !important; font-size: 14px !important; border-radius: 10px !important; } /* Total value */ .aura-totals-total-value { font-size: 18px !important; } /* Cross-sells: single column */ .aura-cart-cross-sells .cross-sells ul.products { grid-template-columns: 1fr 1fr !important; } } /* ========================================================================== 22. TRUST STRIP (replaces footer features on cart) ========================================================================== */ body.woocommerce-cart .aura-footer-features { background: transparent !important; } body.woocommerce-cart .aura-custom-footer { background: transparent !important; } body.woocommerce-cart .aura-checkout-strip { max-width: 1200px !important; margin: 30px auto !important; padding: 0 !important; background: #ffffff !important; border-radius: 14px !important; border: 1px solid #e2e8f0 !important; overflow: hidden !important; } body.woocommerce-cart .aura-checkout-strip__trust { display: flex !important; justify-content: space-evenly !important; align-items: center !important; gap: 0 !important; padding: 18px 24px !important; margin: 0 !important; border-bottom: 1px solid #f0f0f2 !important; } body.woocommerce-cart .aura-checkout-strip__item { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: 13px !important; font-weight: 500 !important; color: #1e293b !important; white-space: nowrap !important; background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; } body.woocommerce-cart .aura-checkout-strip__item svg { flex-shrink: 0 !important; width: 16px !important; height: 16px !important; padding: 6px !important; background: rgba(63, 136, 11, 0.08) !important; border: 1px solid rgba(63, 136, 11, 0.15) !important; border-radius: 8px !important; color: #3f880b !important; stroke: #3f880b !important; box-sizing: content-box !important; } body.woocommerce-cart .aura-checkout-strip__payments { display: flex !important; justify-content: center !important; align-items: center !important; gap: 28px !important; flex-wrap: wrap !important; padding: 16px 40px 18px !important; margin: 0 !important; border: none !important; } body.woocommerce-cart .aura-checkout-strip__payments img { height: 20px !important; width: auto !important; opacity: 0.4 !important; filter: grayscale(30%) !important; transition: opacity 0.15s ease !important; } body.woocommerce-cart .aura-checkout-strip__payments img:hover { opacity: 1 !important; filter: grayscale(0%) !important; } /* Hide recommended products section on cart (shown on checkout only) */ body.woocommerce-cart .aura-perfect-match-section { display: none !important; } /* Trust strip — mobile (matches checkout 1:1) */ @media (max-width: 992px) { body.woocommerce-cart .aura-checkout-strip__trust { gap: 16px !important; padding: 14px 16px !important; flex-wrap: wrap !important; justify-content: center !important; } body.woocommerce-cart .aura-checkout-strip__item { font-size: 11px !important; gap: 6px !important; white-space: nowrap !important; } body.woocommerce-cart .aura-checkout-strip__item svg { width: 13px !important; height: 13px !important; padding: 4px !important; border-radius: 6px !important; } body.woocommerce-cart .aura-checkout-strip__payments { gap: 14px !important; padding: 10px 16px 14px !important; } body.woocommerce-cart .aura-checkout-strip__payments img { height: 17px !important; } } /* ========================================================================== 24. PERFECT MATCH RECOMMENDED PRODUCTS ========================================================================== */ .cart-after-table-container { margin-top: 16px !important; padding: 0 !important; min-width: 0 !important; } .aura-perfect-match-section { background: #ffffff !important; border-radius: 14px !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; padding: 18px 20px 14px !important; margin: 0 !important; min-width: 0 !important; } .aura-pm-title { font-size: 12px !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 0 14px !important; padding: 0 !important; text-align: left !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; line-height: 1 !important; } .aura-pm-products-container { position: relative !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important; } .aura-pm-products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; } .aura-pm-product { display: flex !important; flex-direction: column !important; align-items: center !important; min-width: 0 !important; max-width: none !important; padding: 14px 10px 12px !important; background: #f8f9fb !important; border-radius: 12px !important; border: 1px solid #eef0f4 !important; box-sizing: border-box !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; } .aura-pm-product:hover { border-color: #d1d5db !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; } .aura-pm-image { width: 70px !important; height: 70px !important; margin: 0 auto 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .aura-pm-image a { display: block !important; width: 100% !important; height: 100% !important; } .aura-pm-image img { width: 100% !important; height: 100% !important; object-fit: contain !important; border-radius: 8px !important; max-width: 70px !important; max-height: 70px !important; } .aura-pm-content { display: flex !important; flex-direction: column !important; align-items: center !important; flex: 1 !important; width: 100% !important; min-height: 0 !important; } .aura-pm-name { font-size: 12px !important; line-height: 1.3 !important; color: #1e293b !important; text-align: center !important; margin: 0 0 8px !important; padding: 0 !important; font-weight: 600 !important; } .aura-pm-name a { color: #1e293b !important; text-decoration: none !important; } .aura-pm-name a:hover { color: #3f880b !important; } .aura-pm-name b { font-weight: 700 !important; font-size: 11px !important; color: #1e293b !important; display: block !important; margin-bottom: 1px !important; } .aura-pm-name br { display: none !important; } .aura-pm-name small { display: block !important; font-size: 8px !important; color: #94a3b8 !important; margin-top: 2px !important; letter-spacing: 0.02em !important; } .aura-pm-footer { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; gap: 6px !important; margin-top: auto !important; padding-top: 6px !important; border-top: 1px solid #f1f3f5 !important; } .aura-pm-price { font-size: 12px !important; font-weight: 700 !important; color: #1e293b !important; line-height: 1.2 !important; } .aura-pm-price del { display: block !important; font-size: 9px !important; color: #b0b8c4 !important; font-weight: 400 !important; text-decoration: line-through !important; } .aura-pm-price ins { text-decoration: none !important; color: #3f880b !important; font-weight: 700 !important; } .aura-pm-button, a.aura-pm-button { font-size: 10px !important; padding: 6px 12px !important; background: #3f880b !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; cursor: pointer !important; white-space: nowrap !important; text-decoration: none !important; line-height: 1 !important; transition: background 0.15s ease !important; letter-spacing: 0.01em !important; } .aura-pm-button:hover, a.aura-pm-button:hover { background: #357309 !important; color: #ffffff !important; } .aura-perfect-match-section .simpleshopmessage { display: none !important; } @media (max-width: 480px) { .aura-pm-products { grid-template-columns: repeat(2, 1fr) !important; } } /* ========================================================================== 25. CHECKOUT STEPS TIMELINE 3-step numbered progress: 1. Twój koszyk → 2. Dostawa i płatność → 3. Gotowe! ========================================================================== */ .aura-steps-timeline { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; max-width: 620px !important; margin: 0 auto 16px !important; padding: 0 !important; user-select: none !important; -webkit-user-select: none !important; } /* Individual step */ .aura-step { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 18px !important; border-radius: 50px !important; background: transparent !important; transition: all 0.2s ease !important; text-decoration: none !important; white-space: nowrap !important; border: none !important; cursor: default !important; flex-shrink: 0 !important; } a.aura-step { cursor: pointer !important; } a.aura-step:hover { text-decoration: none !important; } /* Step number circle */ .aura-step-num { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; min-width: 28px !important; border-radius: 50% !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; } .aura-step-num svg { width: 14px !important; height: 14px !important; } /* Step label */ .aura-step-label { font-size: 13px !important; font-weight: 600 !important; transition: color 0.2s ease !important; letter-spacing: 0.01em !important; line-height: 1 !important; } /* --- State: DONE (completed step) --- */ .aura-step.done .aura-step-num { background: #3f880b !important; color: #ffffff !important; } .aura-step.done .aura-step-num svg { stroke: #ffffff !important; } .aura-step.done .aura-step-label { color: #3f880b !important; } a.aura-step.done:hover { background: rgba(63, 136, 11, 0.04) !important; } a.aura-step.done:hover .aura-step-label { color: #2d6408 !important; } /* --- State: CURRENT (active step) --- */ .aura-step.current { background: #ffffff !important; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(63, 136, 11, 0.15) !important; } .aura-step.current .aura-step-num { background: #3f880b !important; color: #ffffff !important; } .aura-step.current .aura-step-label { color: #0f172a !important; font-weight: 700 !important; } /* --- State: FUTURE (upcoming step) --- */ .aura-step.future .aura-step-num { background: #f1f5f9 !important; color: #94a3b8 !important; border: 1.5px solid #e2e8f0 !important; } .aura-step.future .aura-step-label { color: #94a3b8 !important; } /* --- Connector line between steps --- */ .aura-steps-connector { flex: 1 !important; display: flex !important; align-items: center !important; min-width: 24px !important; max-width: 56px !important; padding: 0 2px !important; } .aura-steps-connector-line { width: 100% !important; height: 2px !important; background: #e2e8f0 !important; border-radius: 1px !important; transition: background 0.2s ease !important; } .aura-steps-connector.done .aura-steps-connector-line { background: #3f880b !important; } .aura-steps-connector.active .aura-steps-connector-line { background: linear-gradient(90deg, #3f880b 0%, #e2e8f0 100%) !important; } /* --- Cart items sub-heading inside white card --- */ .aura-cart-items-heading { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 0 12px !important; margin: 0 0 4px !important; border-bottom: 1px solid #f1f5f9 !important; } .aura-cart-items-label { font-size: 13px !important; font-weight: 700 !important; color: #0f172a !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } .aura-cart-count { position: unset !important; top: unset !important; right: unset !important; background-color: transparent !important; color: #64748b !important; font-size: 12px !important; font-weight: 500 !important; border-radius: 0 !important; padding: 0 !important; min-width: unset !important; width: auto !important; height: auto !important; line-height: normal !important; } /* --- MOBILE (<= 992px) --- */ @media (max-width: 992px) { .aura-steps-timeline { max-width: 100% !important; margin-bottom: 12px !important; } .aura-step { padding: 8px 12px !important; gap: 8px !important; } .aura-step-num { width: 26px !important; height: 26px !important; min-width: 26px !important; font-size: 12px !important; } .aura-step-num svg { width: 12px !important; height: 12px !important; } .aura-step-label { font-size: 12px !important; } .aura-steps-connector { min-width: 14px !important; max-width: 36px !important; } } /* --- SMALL MOBILE (<= 480px) --- */ @media (max-width: 480px) { .aura-steps-timeline { margin-bottom: 8px !important; } .aura-step { padding: 6px 8px !important; gap: 6px !important; } .aura-step-num { width: 24px !important; height: 24px !important; min-width: 24px !important; font-size: 11px !important; } .aura-step-num svg { width: 11px !important; height: 11px !important; } .aura-step-label { font-size: 11px !important; } /* Hide label on future steps for very narrow screens */ .aura-step.future .aura-step-label { display: none !important; } .aura-steps-connector { min-width: 8px !important; max-width: 24px !important; } } /* ========================================================================== FREE SHIPPING PROGRESS BAR (embedded in products card) ========================================================================== */ .aura-shipping-bar { margin: 0 !important; padding: 14px 0 4px !important; background: transparent !important; border: none !important; border-top: 1px solid #f1f5f9 !important; border-radius: 0 !important; box-shadow: none !important; } .aura-shipping-bar__msg { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 12.5px !important; font-weight: 400 !important; color: #475569 !important; margin-bottom: 10px !important; line-height: 1.4 !important; } .aura-shipping-bar__msg svg { flex-shrink: 0 !important; color: #94a3b8 !important; stroke: #94a3b8 !important; width: 16px !important; height: 16px !important; } .aura-shipping-bar__msg strong { font-weight: 600 !important; color: #0f172a !important; } /* Track */ .aura-shipping-bar__track { width: 100% !important; height: 5px !important; background: #f1f5f9 !important; border-radius: 3px !important; overflow: hidden !important; position: relative !important; } .aura-shipping-bar__fill { height: 100% !important; background: linear-gradient(90deg, #86c35e 0%, #3f880b 100%) !important; border-radius: 3px !important; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; } /* Shimmer animation on the fill */ .aura-shipping-bar__fill::after { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100% ) !important; background-size: 200% 100% !important; animation: aura-shipping-shimmer 2s ease-in-out infinite !important; } @keyframes aura-shipping-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Achieved state (free shipping unlocked) */ .aura-shipping-bar.achieved { background: rgba(63, 136, 11, 0.04) !important; border-top-color: rgba(63, 136, 11, 0.12) !important; border-radius: 0 0 12px 12px !important; padding: 12px 14px 12px !important; margin: 0 -18px -18px !important; width: calc(100% + 36px) !important; } .aura-shipping-bar.achieved .aura-shipping-bar__msg { margin-bottom: 0 !important; font-size: 12.5px !important; color: #3f880b !important; } .aura-shipping-bar.achieved .aura-shipping-bar__msg svg { color: #3f880b !important; stroke: #3f880b !important; } .aura-shipping-bar.achieved .aura-shipping-bar__msg strong { color: #3f880b !important; } .aura-shipping-bar.achieved .aura-shipping-bar__track { display: none !important; } /* Mobile tweaks */ @media (max-width: 992px) { .aura-shipping-bar__msg { font-size: 12px !important; gap: 8px !important; margin-bottom: 8px !important; } .aura-shipping-bar.achieved { padding: 10px 12px 10px !important; margin: 0 -14px -14px !important; width: calc(100% + 28px) !important; border-radius: 0 0 10px 10px !important; } } @media (max-width: 480px) { .aura-shipping-bar { padding: 12px 0 2px !important; } .aura-shipping-bar__msg { font-size: 11.5px !important; } .aura-shipping-bar.achieved { padding: 8px 10px 8px !important; margin: 0 -12px -12px !important; width: calc(100% + 24px) !important; border-radius: 0 0 8px 8px !important; } } /* ========================================================================== TRIPLE-SPECIFICITY OVERRIDES ========================================================================== */ html body.woocommerce-cart #content .col-full { max-width: 1200px !important; padding: 0 16px !important; box-sizing: border-box !important; } html body.woocommerce-cart #content #primary { width: 100% !important; float: none !important; } /* Fix header/nav max-width — override Customizer's shoptimizer_container_width: 1400 */ body.woocommerce-cart .site-header, body.woocommerce-cart .col-full-nav, body.woocommerce-cart .top-bar { max-width: 100% !important; } body.woocommerce-cart .site-header .col-full, body.woocommerce-cart .col-full-nav, body.woocommerce-cart .top-bar .col-full { box-sizing: border-box !important; } /* ========================================================================== LOGIN BAR + INLINE FORM (shared widget from checkout, styled for cart) ========================================================================== */ /* Dark CTA bar */ body.woocommerce-cart .aura-login-bar { background: #1a1a1a !important; border: none !important; border-radius: 12px !important; padding: 14px 18px !important; color: #ffffff !important; font-size: 13px !important; font-weight: 400 !important; margin: 0 0 16px !important; display: flex !important; align-items: center !important; gap: 14px !important; box-shadow: none !important; line-height: 1.4 !important; } body.woocommerce-cart .aura-login-bar__avatar { display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 50% !important; border: 1.5px solid #4a4a4a !important; color: #999999 !important; flex-shrink: 0 !important; } body.woocommerce-cart .aura-login-bar__avatar svg { width: 18px !important; height: 18px !important; } body.woocommerce-cart .aura-login-bar__text { display: flex !important; flex-direction: column !important; gap: 2px !important; flex: 1 !important; min-width: 0 !important; } body.woocommerce-cart .aura-login-bar__text strong { font-size: 14px !important; font-weight: 600 !important; color: #ffffff !important; line-height: 1.3 !important; } body.woocommerce-cart .aura-login-bar__text span { font-size: 12px !important; font-weight: 400 !important; color: #ffffff !important; line-height: 1.3 !important; } /* CTA button — olive green pill */ body.woocommerce-cart .aura-login-bar__btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #3f880b !important; color: #ffffff !important; font-size: 12px !important; font-weight: 500 !important; padding: 10px 22px !important; border-radius: 20px !important; text-decoration: none !important; white-space: nowrap !important; flex-shrink: 0 !important; transition: background 0.2s !important; cursor: pointer !important; line-height: 1.3 !important; letter-spacing: 0.01em !important; } body.woocommerce-cart .aura-login-bar__btn:hover { background: #357507 !important; text-decoration: none !important; color: #ffffff !important; } /* Inline login/register form */ body.woocommerce-cart .aura-login-inline { background: #ffffff !important; border-radius: 10px !important; padding: 14px 16px !important; margin: 0 0 14px !important; border: 1.5px solid #e2e8f0 !important; box-shadow: none !important; } body.woocommerce-cart .aura-login-inline__fields { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-bottom: 10px !important; } body.woocommerce-cart .aura-login-inline__field label { display: block !important; font-size: 10px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #64748b !important; margin-bottom: 4px !important; } body.woocommerce-cart .aura-login-inline__field label .required { color: #ef4444 !important; } body.woocommerce-cart .aura-login-inline input[type="text"], body.woocommerce-cart .aura-login-inline input[type="password"], body.woocommerce-cart .aura-login-inline input[type="email"] { height: 38px !important; padding: 0 10px !important; font-size: 13px !important; color: #0f172a !important; background: #ffffff !important; border: 1.5px solid #e2e8f0 !important; border-radius: 8px !important; width: 100% !important; outline: none !important; box-shadow: none !important; transition: border-color 0.2s, box-shadow 0.2s; } body.woocommerce-cart .aura-login-inline input[type="text"]:focus, body.woocommerce-cart .aura-login-inline input[type="password"]:focus, body.woocommerce-cart .aura-login-inline input[type="email"]:focus { border-color: #3f880b !important; box-shadow: 0 0 0 3px rgba(63, 136, 11, 0.1) !important; } body.woocommerce-cart .aura-login-inline__row { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 8px !important; } body.woocommerce-cart .aura-login-inline__remember { display: flex !important; align-items: center !important; gap: 5px !important; font-size: 11px !important; color: #64748b !important; cursor: pointer !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; } body.woocommerce-cart .aura-login-inline__remember input[type="checkbox"] { width: 14px !important; height: 14px !important; min-width: 14px !important; max-width: 14px !important; min-height: 14px !important; max-height: 14px !important; } body.woocommerce-cart .aura-login-inline .button { background: #0f172a !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; padding: 9px 22px !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer; transition: background 0.2s; line-height: 1.3 !important; } body.woocommerce-cart .aura-login-inline .button:hover { background: #1e293b !important; } body.woocommerce-cart .aura-login-inline .button:disabled { opacity: 0.6 !important; cursor: wait !important; } /* Tabs */ body.woocommerce-cart .aura-login-tabs { display: flex !important; gap: 0 !important; margin-bottom: 14px !important; border-bottom: 1.5px solid #e2e8f0 !important; } body.woocommerce-cart .aura-login-tab { flex: 1 !important; padding: 10px 0 !important; background: none !important; border: none !important; border-bottom: 2px solid transparent !important; margin-bottom: -1.5px !important; font-size: 13px !important; font-weight: 500 !important; color: #94a3b8 !important; cursor: pointer !important; transition: color 0.2s, border-color 0.2s !important; text-align: center !important; line-height: 1.3 !important; } body.woocommerce-cart .aura-login-tab:hover { color: #475569 !important; } body.woocommerce-cart .aura-login-tab--active { color: #0f172a !important; font-weight: 600 !important; border-bottom-color: #3f880b !important; } /* Register panel */ body.woocommerce-cart .aura-register-fields { margin-bottom: 10px !important; } body.woocommerce-cart .aura-register-field label { display: block !important; font-size: 10px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #64748b !important; margin-bottom: 4px !important; } body.woocommerce-cart .aura-register-field label .required { color: #ef4444 !important; } body.woocommerce-cart .aura-register-hint { font-size: 11px !important; color: #64748b !important; margin: 0 0 10px !important; } /* Social login */ body.woocommerce-cart .aura-login-inline__social { border-top: 1px solid #e2e8f0 !important; padding-top: 10px !important; margin-top: 4px !important; } body.woocommerce-cart .aura-login-inline__social p { font-size: 11px !important; font-weight: 500 !important; color: #94a3b8 !important; margin: 0 0 8px !important; text-align: center !important; } body.woocommerce-cart .aura-login-inline__social .nsl-container { display: flex !important; flex-direction: column !important; gap: 8px !important; } body.woocommerce-cart .aura-login-inline__social .nsl-container-buttons { display: flex !important; flex-direction: column !important; gap: 8px !important; } body.woocommerce-cart .aura-login-inline__social .nsl-container-buttons a { display: block !important; width: 100% !important; } body.woocommerce-cart .aura-login-inline__social .nsl-button { display: flex !important; align-items: center !important; width: 100% !important; padding: 6px 12px !important; border-radius: 8px !important; box-sizing: border-box !important; overflow: visible !important; min-height: 0 !important; height: auto !important; } body.woocommerce-cart .aura-login-inline__social .nsl-button-svg-container { flex: 0 0 auto !important; margin-right: 8px !important; } body.woocommerce-cart .aura-login-inline__social .nsl-button-svg-container svg, body.woocommerce-cart .aura-login-inline__social .nsl-button-svg-container img { width: 20px !important; height: 20px !important; display: block !important; } body.woocommerce-cart .aura-login-inline__social .nsl-button-label-container { flex: 1 1 auto !important; white-space: nowrap !important; overflow: visible !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; } /* Messages */ body.woocommerce-cart .aura-login-inline__msg { margin-top: 8px !important; padding: 8px 12px !important; border-radius: 8px !important; font-size: 12px !important; line-height: 1.4 !important; } body.woocommerce-cart .aura-login-inline__msg--error { background: #fef2f2 !important; color: #dc2626 !important; border: 1px solid #fecaca !important; } /* Open state */ body.woocommerce-cart .aura-login-bar--open { border-radius: 12px 12px 0 0 !important; margin-bottom: 0 !important; } body.woocommerce-cart .aura-login-bar--open + .aura-login-inline { border-top: none !important; border-radius: 0 0 10px 10px !important; margin-top: 0 !important; background: #ffffff !important; } /* Hide WC default login form on cart */ body.woocommerce-cart .woocommerce-form-login { display: none !important; } /* Mobile: allow wrapping */ @media (max-width: 768px) { body.woocommerce-cart .aura-login-bar { flex-wrap: wrap !important; gap: 10px !important; } body.woocommerce-cart .aura-login-bar__text { flex: 1 1 auto !important; min-width: 0 !important; } body.woocommerce-cart .aura-login-tab { font-size: 12px !important; } body.woocommerce-cart .aura-login-inline__fields { grid-template-columns: 1fr !important; } }