/* ========================================================================= Checkout — theme-aware helpers. Brand colors (--primary-brand, -rgb variants, --brand-gradient) are injected by helpers.php::storefront_brand_css() into every storefront , so this file only consumes those variables. ========================================================================= */ .bg-brand { background-color: var(--primary-brand); } .bg-brand-hover:hover { background-color: var(--primary-hover); } .text-brand { color: var(--primary-brand); } .border-brand { border-color: var(--primary-border); } .bg-brand-light { background-color: var(--primary-light); } /* Card surface */ .surface-card { background-color: var(--surface); border: 1px solid var(--border); } /* Product thumbnail container */ .checkout-img-container, .checkout-thumb-box { width: 52px; height: 52px; min-width: 52px; min-height: 52px; background-color: var(--primary-light); border-color: var(--primary-border); } /* Form validation error text — driven by the theme variable, not a hardcoded red */ .form-err { color: var(--primary-dark); } /* Quantity spinner removal */ .no-spin::-webkit-outer-spin-button, .no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .no-spin { -moz-appearance: textfield; } /* Step panel entrance */ @keyframes popIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .step-panel { animation: popIn .35s ease-out both; }