:root { --teas-brand: #274b65; --teas-brand-dark: #1b3548; --teas-brand-light: #3a6a8f; --teas-radius-pill: 50px; --teas-radius-soft: 10px; --teas-transition: 0.25s ease; } .woocommerce-cart .button, .woocommerce-checkout .button { border-radius: var(--teas-radius-pill) !important; transition: background-color var(--teas-transition), box-shadow var(--teas-transition), transform var(--teas-transition) !important; } .woocommerce-cart .button:hover, .woocommerce-checkout .button:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(39, 75, 101, 0.25) !important; } .woocommerce-cart .wc-proceed-to-checkout { display: flex !important; flex-direction: column !important; gap: 20px !important; } .woocommerce-cart .wc-proceed-to-checkout .checkout-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; box-sizing: border-box !important; border-radius: var(--teas-radius-pill) !important; background-color: var(--teas-brand) !important; color: #fff !important; font-weight: 700 !important; letter-spacing: 0.02em !important; padding: 15px 28px !important; margin: 0 !important; text-align: center !important; box-shadow: 0 2px 10px rgba(39, 75, 101, 0.20) !important; } .woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover { background-color: var(--teas-brand-dark) !important; box-shadow: 0 5px 18px rgba(39, 75, 101, 0.35) !important; transform: translateY(-1px) !important; } .woocommerce-cart .wc-proceed-to-checkout .wcppec-checkout-buttons, .woocommerce-cart .wc-proceed-to-checkout #wc-stripe-payment-request-wrapper, .woocommerce-cart .wc-proceed-to-checkout #wc-stripe-payment-request-button, .woocommerce-cart .wc-proceed-to-checkout .ppc-button-wrapper, .woocommerce-cart .wc-proceed-to-checkout .woocommerce-paypal-payments-checkout-button, .woocommerce-cart .wc-proceed-to-checkout .wcpay-payment-request-wrapper { margin: 0 !important; border-radius: var(--teas-radius-pill) !important; overflow: hidden !important; } .woocommerce-cart .ct-cart-totals-modules { display: flex !important; flex-direction: column !important; } .woocommerce-cart .ct-suggested-products--cart { order: 1 !important; } .woocommerce-cart .ct-shipping-progress-cart-page { order: 2 !important; margin: 16px 0 8px !important; padding: 12px 16px !important; background: rgba(39, 75, 101, 0.05) !important; border-radius: var(--teas-radius-soft) !important; border: 1px solid rgba(39, 75, 101, 0.12) !important; } .woocommerce-cart .ct-shipping-progress-cart-page .ct-progress-bar { border-radius: 99px !important; overflow: hidden !important; height: 6px !important; background: rgba(39, 75, 101, 0.15) !important; } .woocommerce-cart .ct-shipping-progress-cart-page .ct-progress-bar > * { border-radius: 99px !important; background-color: var(--teas-brand) !important; transition: width 0.4s ease !important; } .woocommerce-cart .ct-shipping-progress-cart-page .ct-message { font-size: 0.85em !important; color: var(--teas-brand) !important; font-weight: 600 !important; margin-bottom: 8px !important; } .woocommerce-cart .ct-message { order: 3 !important; } .woocommerce-cart .wc-proceed-to-checkout { order: 4 !important; padding-top: 4px !important; } .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 14px !important; padding: 22px 24px !important; border-radius: var(--teas-radius-soft) !important; } .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a.showlogin { display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: var(--teas-brand) !important; color: #ffffff !important; padding: 12px 30px !important; border-radius: var(--teas-radius-pill) !important; text-decoration: none !important; font-weight: 600 !important; letter-spacing: 0.02em !important; border: none !important; box-shadow: 0 2px 10px rgba(39, 75, 101, 0.22) !important; transition: background-color var(--teas-transition), box-shadow var(--teas-transition), transform var(--teas-transition) !important; } .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a.showlogin:hover { background-color: var(--teas-brand-dark) !important; box-shadow: 0 5px 16px rgba(39, 75, 101, 0.32) !important; transform: translateY(-1px) !important; }