/* DGM Header Cart – Frontend CSS */ /* ===================================================== * DGM HEADER CART – ZENTRALE DESIGNWERTE * ===================================================== */ .dgm-header-cart { --dgm-cart-orange: var(--dgm-color-primary); --dgm-cart-orange-hover: var(--dgm-color-accent); --dgm-cart-red: var(--dgm-color-price); --dgm-cart-text: #222222; --dgm-cart-text-light: #666666; --dgm-cart-border: #E5E5E5; --dgm-cart-background: #FFFFFF; --dgm-cart-icon-size: 32px; --dgm-cart-panel-width: 420px; } /* ===================================================== * 1. WARENKORB-ICON IM HEADER * ===================================================== */ .dgm-header-cart .elementor-menu-cart__toggle { margin: 0 !important; padding: 0 !important; } .dgm-header-cart .elementor-menu-cart__toggle .elementor-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--dgm-cart-orange) !important; } /* * Den Preis / das Gesamttotal neben dem * Warenkorb-Icon im Header ausblenden. */ .dgm-header-cart .elementor-menu-cart__toggle .elementor-button-text { display: none !important; } /* * Container für Icon + Mengenblase. */ .dgm-header-cart .elementor-menu-cart__toggle .elementor-button-icon { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: var(--dgm-cart-icon-size) !important; height: var(--dgm-cart-icon-size) !important; font-size: var(--dgm-cart-icon-size) !important; color: var(--dgm-cart-orange) !important; margin: 0 !important; } /* * Elementor-Icon. */ .dgm-header-cart .elementor-menu-cart__toggle .elementor-button-icon i { font-size: var(--dgm-cart-icon-size) !important; color: var(--dgm-cart-orange) !important; transition: color 0.18s ease; } /* * Falls Elementor ein SVG verwendet. */ .dgm-header-cart .elementor-menu-cart__toggle .elementor-button-icon svg { width: var(--dgm-cart-icon-size) !important; height: var(--dgm-cart-icon-size) !important; fill: currentColor !important; color: var(--dgm-cart-orange) !important; transition: color 0.18s ease; } /* ===================================================== * 2. ICON HOVER * ===================================================== */ .dgm-header-cart .elementor-menu-cart__toggle .elementor-button:hover .elementor-button-icon, .dgm-header-cart .elementor-menu-cart__toggle .elementor-button:focus .elementor-button-icon, .dgm-header-cart .elementor-menu-cart__toggle .elementor-button:hover i, .dgm-header-cart .elementor-menu-cart__toggle .elementor-button:focus i { color: var(--dgm-cart-orange-hover) !important; } /* ===================================================== * 3. MENGENBLASE * ===================================================== */ .dgm-header-cart .elementor-menu-cart__toggle .elementor-button-icon-qty { position: absolute !important; top: -7px !important; right: -9px !important; display: flex !important; align-items: center !important; justify-content: center !important; min-width: 17px !important; height: 17px !important; padding: 0 4px !important; background: var(--dgm-cart-red) !important; border: 2px solid #FFFFFF !important; border-radius: 999px !important; color: #FFFFFF !important; font-size: 9px !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; box-sizing: border-box !important; z-index: 2; } /* ===================================================== * 4. HINTERGRUND / OVERLAY DES SIDE-CARTS * ===================================================== */ .dgm-header-cart .elementor-menu-cart__container.elementor-menu-cart--shown { background-color: rgba(0, 0, 0, 0.42) !important; } /* ===================================================== * 5. SEITLICHER WARENKORB * ===================================================== */ .dgm-header-cart .elementor-menu-cart__main { width: var(--dgm-cart-panel-width) !important; max-width: 100vw !important; background: var(--dgm-cart-background) !important; color: var(--dgm-cart-text) !important; border: 0 !important; border-radius: 0 !important; box-shadow: -12px 0 32px rgba(0, 0, 0, 0.14) !important; padding: 28px 24px 24px !important; box-sizing: border-box !important; } /* ===================================================== * 6. SCHLIESSEN-BUTTON * ===================================================== */ .dgm-header-cart .elementor-menu-cart__close-button, .dgm-header-cart .elementor-menu-cart__close-button-custom { width: 28px !important; height: 28px !important; margin-bottom: 24px !important; color: var(--dgm-cart-text) !important; cursor: pointer !important; transition: color 0.18s ease, transform 0.18s ease; } .dgm-header-cart .elementor-menu-cart__close-button:hover, .dgm-header-cart .elementor-menu-cart__close-button-custom:hover { color: var(--dgm-cart-orange) !important; transform: rotate(3deg); } /* ===================================================== * 7. PRODUKTLISTE * ===================================================== */ .dgm-header-cart .elementor-menu-cart__products { border-color: var(--dgm-cart-border) !important; } .dgm-header-cart .elementor-menu-cart__product { padding-top: 18px !important; padding-bottom: 18px !important; border-color: var(--dgm-cart-border) !important; } /* ===================================================== * 8. PRODUKTBILD * ===================================================== */ .dgm-header-cart .elementor-menu-cart__product-image img { width: 72px !important; height: 72px !important; object-fit: contain !important; background: #FFFFFF !important; border: 1px solid #EEEEEE !important; border-radius: 4px !important; padding: 4px !important; } /* ===================================================== * 9. PRODUKTNAME * ===================================================== */ .dgm-header-cart .elementor-menu-cart__product-name, .dgm-header-cart .elementor-menu-cart__product-name a { color: var(--dgm-cart-text) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.35 !important; text-decoration: none !important; } .dgm-header-cart .elementor-menu-cart__product-name a:hover { color: var(--dgm-cart-orange) !important; } /* ===================================================== * 10. VARIANTEN / PRODUKT-META * ===================================================== */ .dgm-header-cart .elementor-menu-cart__product dl.variation { margin: 5px 0 0 !important; color: var(--dgm-cart-text-light) !important; font-size: 12px !important; line-height: 1.4 !important; } /* ===================================================== * 11. PREIS UND MENGE * ===================================================== */ .dgm-header-cart .elementor-menu-cart__product-price, .dgm-header-cart .elementor-menu-cart__product-price .amount { color: var(--dgm-cart-text) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important; } .dgm-header-cart .elementor-menu-cart__product-price .quantity { color: var(--dgm-cart-text-light) !important; } /* ===================================================== * 12. PRODUKT ENTFERNEN * ===================================================== */ .dgm-header-cart .elementor-menu-cart__product-remove { width: 24px !important; height: 24px !important; border-color: #D8D8D8 !important; transition: border-color 0.18s ease, background-color 0.18s ease; } .dgm-header-cart .elementor-menu-cart__product-remove:hover { border-color: var(--dgm-cart-red) !important; background: #FFF5F5 !important; } .dgm-header-cart .elementor-menu-cart__product-remove::before, .dgm-header-cart .elementor-menu-cart__product-remove::after { background: #777777 !important; } .dgm-header-cart .elementor-menu-cart__product-remove:hover::before, .dgm-header-cart .elementor-menu-cart__product-remove:hover::after { background: var(--dgm-cart-red) !important; } /* ===================================================== * 13. ZWISCHENSUMME * ===================================================== */ .dgm-header-cart .elementor-menu-cart__subtotal { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 20px !important; margin: 0 !important; padding: 20px 0 !important; border-color: var(--dgm-cart-border) !important; color: var(--dgm-cart-text) !important; font-size: 15px !important; font-weight: 600 !important; } .dgm-header-cart .elementor-menu-cart__subtotal .amount { margin-left: auto !important; color: var(--dgm-cart-orange) !important; font-weight: 700 !important; } /* ===================================================== * 14. FOOTER-BUTTONS * ===================================================== */ .dgm-header-cart .elementor-menu-cart__footer-buttons { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding-top: 20px !important; } .dgm-header-cart .elementor-menu-cart__footer-buttons .elementor-button { min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 11px 14px !important; border-radius: 4px !important; box-shadow: none !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: center !important; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } /* ===================================================== * 15. BUTTON "ZUM WARENKORB" * ===================================================== */ .dgm-header-cart .elementor-menu-cart__footer-buttons .elementor-button--view-cart { background: #FFFFFF !important; border: 1px solid var(--dgm-cart-text) !important; color: var(--dgm-cart-text) !important; } .dgm-header-cart .elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover { background: var(--dgm-cart-text) !important; border-color: var(--dgm-cart-text) !important; color: #FFFFFF !important; } /* ===================================================== * 16. BUTTON "ZUR KASSE" * ===================================================== */ .dgm-header-cart .elementor-menu-cart__footer-buttons .elementor-button--checkout { background: var(--dgm-cart-orange) !important; border: 1px solid var(--dgm-cart-orange) !important; color: #FFFFFF !important; } .dgm-header-cart .elementor-menu-cart__footer-buttons .elementor-button--checkout:hover { background: var(--dgm-cart-orange-hover) !important; border-color: var(--dgm-cart-orange-hover) !important; color: #FFFFFF !important; } /* ===================================================== * 17. LEERER WARENKORB * ===================================================== */ .dgm-header-cart .woocommerce-mini-cart__empty-message { margin: 50px 0 !important; padding: 0 !important; color: var(--dgm-cart-text-light) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.5 !important; text-align: center !important; } /* ===================================================== * 18. SCROLLBAR IM WARENKORB * ===================================================== */ .dgm-header-cart .elementor-menu-cart__main { scrollbar-width: thin; scrollbar-color: #CCCCCC transparent; } .dgm-header-cart .elementor-menu-cart__main::-webkit-scrollbar { width: 6px; } .dgm-header-cart .elementor-menu-cart__main::-webkit-scrollbar-track { background: transparent; } .dgm-header-cart .elementor-menu-cart__main::-webkit-scrollbar-thumb { background: #CCCCCC; border-radius: 10px; } /* ===================================================== * 19. TABLET / MOBILE * ===================================================== */ @media (max-width: 767px) { .dgm-header-cart { --dgm-cart-icon-size: 26px; } .dgm-header-cart .elementor-menu-cart__toggle .elementor-button { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; } .dgm-header-cart .elementor-menu-cart__main { width: 100vw !important; max-width: 100vw !important; padding: 24px 18px 20px !important; } .dgm-header-cart .elementor-menu-cart__footer-buttons { grid-template-columns: 1fr !important; } .dgm-header-cart .elementor-menu-cart__product-image img { width: 64px !important; height: 64px !important; } }