/* ============================================================================= Lernsehen – WooCommerce Overrides (WC 7.0+ / Bootstrap 5.3 / nm-* System) ============================================================================= */ /* ----------------------------------------------------------------------------- 1. Reset & Basis ----------------------------------------------------------------------------- */ .woocommerce, .woocommerce-page { color: var(--nm-text); } /* WC injiziert manchmal eigene Stile in – überschreiben */ .woocommerce-page body, body.woocommerce-page { background-color: var(--nm-bg); } /* ----------------------------------------------------------------------------- 2. Buttons – alle WC-Buttons → nm-btn Stil ----------------------------------------------------------------------------- */ /* Basis-Button (nm-btn neutral) */ .woocommerce a.button, .woocommerce button.button, .woocommerce input[type="button"], .woocommerce input[type="submit"], .woocommerce #respond input#submit { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .4rem !important; padding: .55rem 1.25rem !important; font-size: .9rem !important; font-weight: 600 !important; line-height: 1.4 !important; border: 1px solid var(--nm-border) !important; border-radius: 14px !important; background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%) !important; box-shadow: 8px 8px 20px var(--nm-shadow-dark), -6px -6px 14px var(--nm-shadow-light) !important; color: var(--nm-text) !important; text-decoration: none !important; cursor: pointer !important; transition: box-shadow .15s ease, transform .1s ease !important; white-space: nowrap; height: auto !important; vertical-align: middle; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input[type="submit"]:hover, .woocommerce #respond input#submit:hover { transform: translateY(-1px) !important; color: var(--nm-text) !important; text-decoration: none !important; background: linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.04) 100%) !important; } .woocommerce a.button:active, .woocommerce button.button:active { transform: none !important; box-shadow: inset 4px 4px 10px var(--nm-shadow-dark), inset -3px -3px 8px var(--nm-shadow-light) !important; } /* Primary-Button (.alt) – Checkout, Place Order, Add to Cart */ .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #payment #place_order, .woocommerce .cart .button[name="add-to-cart"], .single_add_to_cart_button { background: linear-gradient(160deg, #1d4ed8 0%, #1e40af 100%) !important; border-color: rgba(106, 169, 255, .35) !important; color: #e9eef7 !important; } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce #payment #place_order:hover { background: linear-gradient(160deg, #2563eb 0%, #1d4ed8 100%) !important; color: #fff !important; } [data-theme="light"] .woocommerce a.button.alt, [data-theme="light"] .woocommerce button.button.alt, [data-theme="light"] .woocommerce #payment #place_order { background: linear-gradient(160deg, #4d9de0 0%, #3a8fd4 100%) !important; } /* Disabled */ .woocommerce a.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button.disabled { opacity: .5 !important; cursor: not-allowed !important; transform: none !important; } /* ----------------------------------------------------------------------------- 3. Formulare – Input / Select / Textarea ----------------------------------------------------------------------------- */ .woocommerce form .form-row label, .woocommerce-page form .form-row label { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--nm-muted); margin-bottom: .4rem; display: block; } .woocommerce form .form-row .input-text, .woocommerce-page form .form-row .input-text, .woocommerce form .form-row select, .woocommerce-page form .form-row select, .woocommerce form .form-row textarea { background: var(--nm-surface-2) !important; color: var(--nm-text) !important; border: 1px solid var(--nm-border) !important; border-radius: 14px !important; padding: .6rem 1rem !important; width: 100%; font-size: .9rem; line-height: 1.5; box-shadow: inset 8px 8px 16px var(--nm-shadow-dark), inset -6px -6px 12px var(--nm-shadow-light) !important; transition: border-color .15s, box-shadow .15s; } .woocommerce form .form-row .input-text:focus, .woocommerce form .form-row select:focus { border-color: rgba(106, 169, 255, .45) !important; outline: none; box-shadow: inset 8px 8px 16px var(--nm-shadow-dark), inset -6px -6px 12px var(--nm-shadow-light), 0 0 0 3px rgba(106, 169, 255, .18) !important; } /* Required asterisk */ .woocommerce form .form-row .required { color: #fca5a5; } /* Inline form rows */ .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 48%; } /* ----------------------------------------------------------------------------- 4. Cart – Warenkorb ----------------------------------------------------------------------------- */ .woocommerce-cart-form { width: 100%; } .woocommerce table.shop_table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--nm-surface-2); border: 1px solid var(--nm-border); border-radius: 16px; overflow: hidden; box-shadow: inset 8px 8px 16px var(--nm-shadow-dark), inset -6px -6px 12px var(--nm-shadow-light); } .woocommerce table.shop_table th { color: var(--nm-muted); font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; background: rgba(255,255,255,.03); padding: .75rem 1rem; border-bottom: 1px solid var(--nm-border); white-space: nowrap; } .woocommerce table.shop_table td { color: var(--nm-text); background: transparent; padding: .85rem 1rem; vertical-align: middle; border-bottom: 1px solid var(--nm-border); } .woocommerce table.shop_table tr:last-child td { border-bottom: none; } .woocommerce table.shop_table .product-thumbnail img { border-radius: 10px; width: 64px; height: 64px; object-fit: cover; } .woocommerce table.shop_table .product-name a { color: var(--nm-text); font-weight: 600; text-decoration: none; } .woocommerce table.shop_table .product-name a:hover { color: var(--nm-accent); } .woocommerce table.shop_table a.remove { color: #fca5a5 !important; font-size: 1.2rem; font-weight: 700; line-height: 1; text-decoration: none; border: none; background: none; } .woocommerce table.shop_table a.remove:hover { color: var(--nm-danger) !important; } /* Quantity input im Cart */ .woocommerce .quantity .qty { background: var(--nm-surface-2) !important; color: var(--nm-text) !important; border: 1px solid var(--nm-border) !important; border-radius: 12px !important; padding: .35rem .6rem !important; width: 64px !important; text-align: center; font-size: .9rem; box-shadow: inset 4px 4px 8px var(--nm-shadow-dark), inset -3px -3px 6px var(--nm-shadow-light) !important; } /* Coupon-Eingabe */ .woocommerce table.cart td.actions .coupon .input-text { background: var(--nm-surface-2) !important; color: var(--nm-text) !important; border: 1px solid var(--nm-border) !important; border-radius: 14px !important; padding: .5rem 1rem !important; font-size: .9rem; box-shadow: inset 4px 4px 8px var(--nm-shadow-dark), inset -3px -3px 6px var(--nm-shadow-light) !important; } /* Cart Totals Box */ .woocommerce .cart-collaterals .cart_totals { background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%); border: 1px solid var(--nm-border); border-radius: 18px; padding: 1.5rem; box-shadow: 10px 10px 24px var(--nm-shadow-dark), -8px -8px 18px var(--nm-shadow-light); } .woocommerce .cart-collaterals .cart_totals h2 { font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--nm-muted); margin-bottom: 1rem; } .woocommerce .cart-collaterals .cart_totals table { background: none; border: none; box-shadow: none; border-radius: 0; } .woocommerce .cart-collaterals .cart_totals table th, .woocommerce .cart-collaterals .cart_totals table td { background: none; padding: .5rem 0; border-bottom: 1px solid var(--nm-border); font-size: .9rem; } .woocommerce .cart-collaterals .cart_totals table tr:last-child th, .woocommerce .cart-collaterals .cart_totals table tr:last-child td { border-bottom: none; font-weight: 700; font-size: 1rem; } /* ----------------------------------------------------------------------------- 5. Checkout ----------------------------------------------------------------------------- */ .woocommerce-checkout .woocommerce-billing-fields h3, .woocommerce-checkout .woocommerce-shipping-fields h3, .woocommerce-checkout #order_review_heading { font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--nm-muted); margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--nm-border); } /* Zahlung-Box */ .woocommerce-checkout #payment { background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%); border: 1px solid var(--nm-border); border-radius: 18px; padding: 1.25rem; box-shadow: 8px 8px 20px var(--nm-shadow-dark), -6px -6px 14px var(--nm-shadow-light); } .woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--nm-border); padding: 0 0 1rem; margin: 0 0 1rem; list-style: none; } .woocommerce-checkout #payment ul.payment_methods li label { color: var(--nm-text); font-size: .9rem; font-weight: 500; } .woocommerce-checkout #payment div.payment_box { background: var(--nm-surface-2); border-radius: 12px; padding: .75rem 1rem; color: var(--nm-muted); font-size: .88rem; margin-top: .5rem; } /* Bestellübersicht-Tabelle */ .woocommerce-checkout-review-order-table { background: none; border: none; box-shadow: none; border-radius: 0; } .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { background: none !important; color: var(--nm-text) !important; border-bottom: 1px solid var(--nm-border) !important; padding: .65rem .25rem !important; font-size: .9rem; } .woocommerce-checkout-review-order-table tfoot th { color: var(--nm-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; } .woocommerce-checkout-review-order-table tfoot tr:last-child th, .woocommerce-checkout-review-order-table tfoot tr:last-child td { font-size: 1rem; font-weight: 700; color: var(--nm-text) !important; } /* ----------------------------------------------------------------------------- 6. My Account – Navigation & Content ----------------------------------------------------------------------------- */ .woocommerce-account .woocommerce-MyAccount-navigation { background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%); border: 1px solid var(--nm-border); border-radius: 18px; box-shadow: 10px 10px 24px var(--nm-shadow-dark), -8px -8px 18px var(--nm-shadow-light); overflow: hidden; margin-bottom: 1.5rem; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: .5rem; margin: 0; } .woocommerce-account .woocommerce-MyAccount-navigation ul li { margin-bottom: .15rem; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; padding: .55rem .9rem; border-radius: 12px; color: var(--nm-muted); font-size: .88rem; font-weight: 500; text-decoration: none; transition: color .15s, background .15s; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover, .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active a { color: var(--nm-text); background: rgba(106, 169, 255, .09); } .woocommerce-account .woocommerce-MyAccount-content { background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%); border: 1px solid var(--nm-border); border-radius: 18px; box-shadow: 10px 10px 24px var(--nm-shadow-dark), -8px -8px 18px var(--nm-shadow-light); padding: 1.5rem; } /* ----------------------------------------------------------------------------- 7. Order Status Badges ----------------------------------------------------------------------------- */ mark.order-status, .woocommerce-orders-table__cell-order-status .woocommerce-order-status { display: inline-block; border: 1px solid var(--nm-border); border-radius: 999px; padding: .2rem .7rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: transparent; color: var(--nm-muted); } mark.order-status.status-completed { border-color: rgba(34, 197, 94, .35); color: #86efac; } mark.order-status.status-processing { border-color: rgba(106, 169, 255, .35); color: #93c5fd; } mark.order-status.status-on-hold { border-color: rgba(245, 158, 11, .35); color: #fcd34d; } mark.order-status.status-cancelled, mark.order-status.status-failed { border-color: rgba(239, 68, 68, .35); color: #fca5a5; } mark.order-status.status-refunded { border-color: rgba(245, 158, 11, .35); color: #fcd34d; } mark.order-status.status-pending { border-color: var(--nm-border); color: var(--nm-muted); } /* ----------------------------------------------------------------------------- 8. Thank You / Order Confirmation ----------------------------------------------------------------------------- */ .woocommerce-order .woocommerce-order-details, .woocommerce-order .woocommerce-customer-details { background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%); border: 1px solid var(--nm-border); border-radius: 18px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 10px 10px 24px var(--nm-shadow-dark), -8px -8px 18px var(--nm-shadow-light); } .woocommerce-order h2 { font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--nm-muted); margin-bottom: 1rem; } /* ----------------------------------------------------------------------------- 9. Login / Register ----------------------------------------------------------------------------- */ .woocommerce-form-login, .woocommerce-form-register { background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%); border: 1px solid var(--nm-border); border-radius: 18px; box-shadow: 10px 10px 24px var(--nm-shadow-dark), -8px -8px 18px var(--nm-shadow-light); padding: 2rem; } /* ----------------------------------------------------------------------------- 10. Notices (WooCommerce eigene Klassen) ----------------------------------------------------------------------------- */ .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-error { border-radius: 14px; border: 1px solid; padding: .9rem 1.1rem; font-size: .9rem; list-style: none; margin: 0 0 1rem; } .woocommerce-message { background: rgba(34, 197, 94, .09); border-color: rgba(34, 197, 94, .30) !important; color: #86efac !important; } .woocommerce-info { background: rgba(106, 169, 255, .09); border-color: rgba(106, 169, 255, .30) !important; color: #93c5fd !important; } .woocommerce-error { background: rgba(239, 68, 68, .09); border-color: rgba(239, 68, 68, .30) !important; color: #fca5a5 !important; padding-left: 1.1rem; } /* ----------------------------------------------------------------------------- 11. Responsive ----------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .woocommerce table.shop_table { font-size: .85rem; } .woocommerce table.shop_table td, .woocommerce table.shop_table th { padding: .6rem .75rem; } /* Responsive cart table labels */ .woocommerce table.shop_table.responsive-enabled td::before { color: var(--nm-muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; } }