/* ========================================================= ECHTLEDERJACKEN WooCommerce Notices Premium shared styling for Cart / Checkout / My Account ========================================================= */ /* --------------------------------------------------------- NOTICE WRAPPER --------------------------------------------------------- */ body.woocommerce .woocommerce-notices-wrapper { width: 100%; } body.woocommerce .woocommerce-notices-wrapper:empty { display: none; } /* --------------------------------------------------------- BASE NOTICE --------------------------------------------------------- */ body.woocommerce .woocommerce-message, body.woocommerce .woocommerce-info, body.woocommerce .woocommerce-error { position: relative; display: flex; align-items: center; gap: 1rem; width: 100%; max-width: 1560px; min-height: 62px; margin: 1.5rem auto !important; padding: 1rem 1.15rem 1rem 3.4rem !important; background-color: var(--color-background-alt) !important; border: 1px solid var(--color-border) !important; border-radius: 0 !important; box-shadow: 0 12px 35px rgba(23, 35, 40, 0.04); color: var(--color-primary) !important; font-family: var(--font-body); font-size: 0.78rem; line-height: 1.55; list-style: none !important; } /* Remove WooCommerce's legacy colored top border */ body.woocommerce .woocommerce-message, body.woocommerce .woocommerce-info, body.woocommerce .woocommerce-error { border-top: 1px solid var(--color-border) !important; } /* --------------------------------------------------------- CUSTOM STATUS MARK --------------------------------------------------------- */ body.woocommerce .woocommerce-message::before, body.woocommerce .woocommerce-info::before, body.woocommerce .woocommerce-error::before { position: absolute !important; top: 50% !important; left: 1.15rem !important; display: flex !important; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 !important; border: 1px solid currentColor; border-radius: 50%; font-family: var(--font-body) !important; font-size: 0.65rem !important; font-weight: 700; line-height: 1 !important; transform: translateY(-50%); box-sizing: border-box; } /* Success */ body.woocommerce .woocommerce-message { border-left: 2px solid var(--color-accent-gold) !important; } body.woocommerce .woocommerce-message::before { content: "✓" !important; color: var(--color-accent-gold) !important; } /* Information */ body.woocommerce .woocommerce-info { border-left: 2px solid var(--color-primary) !important; } body.woocommerce .woocommerce-info::before { content: "i" !important; color: var(--color-primary) !important; } /* Error */ body.woocommerce .woocommerce-error { border-left: 2px solid var(--color-accent-red-dark) !important; } body.woocommerce .woocommerce-error::before { content: "!" !important; color: var(--color-accent-red-dark) !important; } /* --------------------------------------------------------- NOTICE LINKS --------------------------------------------------------- */ body.woocommerce .woocommerce-message a:not(.button), body.woocommerce .woocommerce-info a:not(.button), body.woocommerce .woocommerce-error a:not(.button) { color: var(--color-primary); text-decoration-color: var(--color-accent-gold); text-underline-offset: 0.18em; } /* --------------------------------------------------------- NOTICE ACTION BUTTON --------------------------------------------------------- */ body.woocommerce .woocommerce-message .button, body.woocommerce .woocommerce-info .button, body.woocommerce .woocommerce-error .button { order: 2; flex: 0 0 auto; float: none !important; min-height: 38px; margin-left: auto !important; padding: 0.65rem 0.9rem !important; background-color: transparent !important; border: 1px solid var(--color-primary) !important; border-radius: var(--radius-small) !important; box-shadow: none !important; color: var(--color-primary) !important; font-family: var(--font-body); font-size: 0.58rem !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0.075em; text-decoration: none !important; text-transform: uppercase; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } body.woocommerce .woocommerce-message .button:hover, body.woocommerce .woocommerce-info .button:hover { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; color: var(--color-secondary) !important; } body.woocommerce .woocommerce-error .button:hover { background-color: var(--color-accent-red-dark) !important; border-color: var(--color-accent-red-dark) !important; color: var(--color-white) !important; } /* --------------------------------------------------------- LIST-STYLE ERROR NOTICES --------------------------------------------------------- */ body.woocommerce ul.woocommerce-error { display: block; } body.woocommerce ul.woocommerce-error li { margin: 0.25rem 0; } /* --------------------------------------------------------- CART PAGE POSITIONING --------------------------------------------------------- */ /* * Keep notices aligned with the same 1560px cart canvas * rather than the narrower parent-page content width. */ body.woocommerce-cart .woocommerce-notices-wrapper { position: relative; left: 50%; width: 100vw; max-width: none !important; margin-left: -50vw !important; padding: 0 clamp(2rem, 4.5vw, 5rem) !important; } body.woocommerce-cart .woocommerce-notices-wrapper > * { max-width: calc( 1560px - clamp(4rem, 9vw, 10rem) ); margin-left: auto !important; margin-right: auto !important; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width: 680px) { body.woocommerce .woocommerce-message, body.woocommerce .woocommerce-info, body.woocommerce .woocommerce-error { align-items: flex-start; flex-direction: column; gap: 0.8rem; min-height: 0; margin: 1rem auto !important; padding: 1rem 1rem 1rem 3rem !important; font-size: 0.75rem; } body.woocommerce .woocommerce-message::before, body.woocommerce .woocommerce-info::before, body.woocommerce .woocommerce-error::before { top: 1.1rem !important; left: 0.95rem !important; width: 20px; height: 20px; transform: none; } body.woocommerce .woocommerce-message .button, body.woocommerce .woocommerce-info .button, body.woocommerce .woocommerce-error .button { width: 100%; margin: 0 !important; text-align: center; } body.woocommerce-cart .woocommerce-notices-wrapper { left: auto; width: 100%; margin-left: 0 !important; padding: 0 1.25rem !important; } } /* ========================================================= WOOCOMMERCE NOTICE ICON QUICK FIX ========================================================= */ /* * Remove both WooCommerce's legacy pseudo icon and the * custom notice-circle icon. The restrained left accent * remains as the status indicator. */ body.woocommerce .woocommerce-message::before, body.woocommerce .woocommerce-info::before, body.woocommerce .woocommerce-error::before { content: none !important; display: none !important; } body.woocommerce .woocommerce-message, body.woocommerce .woocommerce-info, body.woocommerce .woocommerce-error { padding-left: 1.25rem !important; } /* * Also cover block-style notice SVGs in case WooCommerce * or an extension renders those in a classic page. */ body.woocommerce .wc-block-components-notice-banner > svg { display: none !important; } body.woocommerce .wc-block-components-notice-banner { padding-left: 1.25rem !important; } /* ========================================================= ECHTLEDERJACKEN FINAL WOOCOMMERCE NOTICE RESET ========================================================= Put this at the VERY BOTTOM of woocommerce-notices.css. ========================================================= */ /* --------------------------------------------------------- REMOVE ALL LEGACY WOOCOMMERCE NOTICE ICONS --------------------------------------------------------- */ body.woocommerce-cart .woocommerce-message::before, body.woocommerce-cart .woocommerce-info::before, body.woocommerce-cart .woocommerce-error::before, body.woocommerce-checkout .woocommerce-message::before, body.woocommerce-checkout .woocommerce-info::before, body.woocommerce-checkout .woocommerce-error::before, body.woocommerce-account .woocommerce-message::before, body.woocommerce-account .woocommerce-info::before, body.woocommerce-account .woocommerce-error::before, body.woocommerce-page .woocommerce-message::before, body.woocommerce-page .woocommerce-info::before, body.woocommerce-page .woocommerce-error::before { content: none !important; display: none !important; position: static !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; font-family: inherit !important; box-shadow: none !important; } /* * Some WooCommerce / block notice variants use an actual * SVG or dedicated icon element rather than ::before. */ body.woocommerce-cart .wc-block-components-notice-banner__icon, body.woocommerce-checkout .wc-block-components-notice-banner__icon, body.woocommerce-account .wc-block-components-notice-banner__icon, body.woocommerce-cart .wc-block-components-notice-banner > svg, body.woocommerce-checkout .wc-block-components-notice-banner > svg, body.woocommerce-account .wc-block-components-notice-banner > svg { display: none !important; } /* --------------------------------------------------------- REMOVE WOO BLUE TOP BORDER --------------------------------------------------------- */ body.woocommerce-cart .woocommerce-message, body.woocommerce-cart .woocommerce-info, body.woocommerce-cart .woocommerce-error, body.woocommerce-checkout .woocommerce-message, body.woocommerce-checkout .woocommerce-info, body.woocommerce-checkout .woocommerce-error, body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-info, body.woocommerce-account .woocommerce-error, body.woocommerce-page .woocommerce-message, body.woocommerce-page .woocommerce-info, body.woocommerce-page .woocommerce-error { padding-left: 1.25rem !important; background-color: var(--color-background-alt) !important; border: 1px solid var(--color-border) !important; border-top: 1px solid var(--color-border) !important; border-radius: 0 !important; box-shadow: 0 12px 35px rgba(23, 35, 40, 0.04) !important; } /* Success */ body.woocommerce-cart .woocommerce-message, body.woocommerce-checkout .woocommerce-message, body.woocommerce-account .woocommerce-message { border-left: 2px solid var(--color-accent-gold) !important; } /* Information */ body.woocommerce-cart .woocommerce-info, body.woocommerce-checkout .woocommerce-info, body.woocommerce-account .woocommerce-info { border-left: 2px solid var(--color-primary) !important; } /* Errors */ body.woocommerce-cart .woocommerce-error, body.woocommerce-checkout .woocommerce-error, body.woocommerce-account .woocommerce-error { border-left: 2px solid var(--color-accent-red-dark) !important; } /* --------------------------------------------------------- CHECKOUT SPECIFIC NOTICE OVERRIDES --------------------------------------------------------- */ /* * Coupon and login notices appear above the Checkout form. * Explicitly prevent WooCommerce from restoring the blue * border through checkout-specific selectors. */ body.woocommerce-checkout .premium-checkout .woocommerce-info, body.woocommerce-checkout .premium-checkout__utility .woocommerce-info, body.woocommerce-checkout #payment .woocommerce-info { border-top: 1px solid var(--color-border) !important; border-right: 1px solid var(--color-border) !important; border-bottom: 1px solid var(--color-border) !important; border-left: 2px solid var(--color-primary) !important; background: var(--color-background-alt) !important; } /* * Payment gateway unavailable messages should use the * restrained dark theme treatment rather than Woo blue. */ body.woocommerce-checkout #payment .woocommerce-notice, body.woocommerce-checkout #payment .woocommerce-info, body.woocommerce-checkout #payment .woocommerce-error { border-top-color: var(--color-border) !important; } /* --------------------------------------------------------- BLOCK NOTICE FALLBACK --------------------------------------------------------- */ body.woocommerce-cart .wc-block-components-notice-banner, body.woocommerce-checkout .wc-block-components-notice-banner, body.woocommerce-account .wc-block-components-notice-banner { background: var(--color-background-alt) !important; border: 1px solid var(--color-border) !important; border-top: 1px solid var(--color-border) !important; border-left: 2px solid var(--color-primary) !important; border-radius: 0 !important; box-shadow: 0 12px 35px rgba(23, 35, 40, 0.04) !important; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width: 680px) { body.woocommerce-cart .woocommerce-message, body.woocommerce-cart .woocommerce-info, body.woocommerce-cart .woocommerce-error, body.woocommerce-checkout .woocommerce-message, body.woocommerce-checkout .woocommerce-info, body.woocommerce-checkout .woocommerce-error, body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-info, body.woocommerce-account .woocommerce-error { padding-left: 1rem !important; } }