/* ========================================================================== */ /* 🟢 STEUERUNG & VERWALTUNG */ /* BLOCK-ID: CSS-WC-PRICE-03 */ /* TITEL: Durchgestrichener Preis | Loop Grid */ /* CSS-KLASSE: .hand-strike-produkt-loop (im Widget unter "Erweitert") */ /* AUSRICHTUNG: Vertikal (Preise übereinander) */ /* TYPO-REFERENZ ID: 35904e7 (del / Streichpreis) */ /* b678d7d (ins / Angebotspreis & regulärer Preis) */ /* FARB-REFERENZ ID: 215b9bc (Fh_Cl_Acc4 / Rot) */ /* ========================================================================== */ /* CONTAINER & AUSRICHTUNG (LOOP GRID) */ body .hand-strike-produkt-loop, body .hand-strike-produkt-loop .elementor-widget-container, body .hand-strike-produkt-loop p { display: flex !important; /* 🟠 Ausrichtung der Preise */ flex-direction: column !important; /* Preise übereinander */ align-items: flex-start !important; color: inherit !important; /* Schriftfarbe aus Widget */ margin: 0 !important; } /* Browser-Standarddekorationen aufheben */ body .hand-strike-produkt-loop del, body .hand-strike-produkt-loop ins { text-decoration: none !important; background: transparent !important; } /* LEERZEICHEN ZWISCHEN CHF UND ZAHL BEI ALLEN PREISEN ENTFERNEN */ body .hand-strike-produkt-loop .woocommerce-Price-currencySymbol { /* 🟠 Abstand Währungssymbol zum Betrag */ margin-right: -0.28em !important; /* Zieht den Betrag direkt an "CHF" */ display: inline-block !important; } /* ========================================================================== */ /* 1. ALTER PREIS (STREICHPREIS OBEN BEI SALE) */ /* ========================================================================== */ body .hand-strike-produkt-loop del, body .hand-strike-produkt-loop del .woocommerce-Price-amount, body .hand-strike-produkt-loop del .woocommerce-Price-amount bdi { /* 🟠 Typo-Eigenschaften über globale ID 35904e7 (Alter Streichpreis) */ font-family: var(--e-global-typography-35904e7-font-family), sans-serif !important; font-size: var(--e-global-typography-35904e7-font-size) !important; font-weight: var(--e-global-typography-35904e7-font-weight) !important; line-height: var(--e-global-typography-35904e7-line-height) !important; letter-spacing: var(--e-global-typography-35904e7-letter-spacing) !important; color: inherit !important; } body .hand-strike-produkt-loop del { position: relative !important; display: inline-block !important; width: fit-content !important; /* 🟠 Deckkraft & Abstand zum neuen Preis */ opacity: 0.75; margin-bottom: 0px !important; } /* 🟠 HANDGEZOGENER ROTER STRICH (NUR AUF DEM ALTEN PREIS) */ body .hand-strike-produkt-loop del::after { content: '' !important; position: absolute !important; left: -4% !important; top: 50% !important; width: 108% !important; /* 🟠 Strichstärke, Farbe & Neigung */ height: 1.8px !important; background-color: var(--e-global-color-215b9bc) !important; border-radius: 40% 60% 70% 30% / 50% 40% 60% 50% !important; transform-origin: left center !important; transform: rotate(-4deg) !important; pointer-events: none !important; opacity: 0.95 !important; } /* ========================================================================== */ /* 2. NEUER PREIS (ANGEBOTSPREIS UNTEN BEI SALE) */ /* ========================================================================== */ body .hand-strike-produkt-loop ins, body .hand-strike-produkt-loop ins .woocommerce-Price-amount, body .hand-strike-produkt-loop ins .woocommerce-Price-amount bdi { /* 🟠 Typo-Eigenschaften über globale ID b678d7d (Neuer Preis) */ font-family: var(--e-global-typography-b678d7d-font-family), sans-serif !important; font-size: var(--e-global-typography-b678d7d-font-size) !important; font-weight: var(--e-global-typography-b678d7d-font-weight) !important; line-height: var(--e-global-typography-b678d7d-line-height) !important; letter-spacing: var(--e-global-typography-b678d7d-letter-spacing) !important; color: inherit !important; } /* ========================================================================== */ /* 3. REGULÄRER EINZELPREIS (WENN KEIN ANGEBOT VORLIEGT) */ /* ========================================================================== */ body .hand-strike-produkt-loop:not(:has(del)) .woocommerce-Price-amount, body .hand-strike-produkt-loop:not(:has(del)) .woocommerce-Price-amount bdi, body .hand-strike-produkt-loop:not(:has(del)) span, body .hand-strike-produkt-loop:not(:has(del)) { /* 🟠 Typo-Eigenschaften über globale ID b678d7d (Regulärer Preis) */ font-family: var(--e-global-typography-b678d7d-font-family), sans-serif !important; font-size: var(--e-global-typography-b678d7d-font-size) !important; font-weight: var(--e-global-typography-b678d7d-font-weight) !important; line-height: var(--e-global-typography-b678d7d-line-height) !important; letter-spacing: var(--e-global-typography-b678d7d-letter-spacing) !important; color: inherit !important; opacity: 1 !important; } /* 🛑 ⛔ [STOP] ENDE DIESES ABSCHNITTS: Durchgestrichener Preis | Loop Grid / CSS-WC-PRICE-03 ⛔ 🛑 */ /* ========================================================================== */ /* 🟢 STEUERUNG & VERWALTUNG */ /* BLOCK-ID: CSS-WC-SAVINGS-10 */ /* TITEL: Ersparnis- & NEU-Badge Styling | Shortcode [product_savings] */ /* WICHTIG: TEIL 1/2 (CSS) – Gehört zwingend zu Teil 2/2: */ /* PHP-WC-SAVINGS-04 in inc/product-loop/product-loop.php */ /* BESCHREIBUNG: Steuert Pillen-Layout (voll abgerundet), Typo 5eddb55, */ /* Hover Scale 1.3, Rabattfarben & NEU-Farben. */ /* KLASSE: .custom-savings-badge, .badge-sale, .badge-new */ /* TYPO-REFERENZ ID: 5eddb55 */ /* FARB-REFERENZ ID: ff81f4e (Fh_Cl_Acc2 / BG Sale Grün) */ /* 5721865 (Fh_Cl_Acc3 / Text Sale Grün) */ /* 14ef391 (BG_Cr_dl / BG NEU Schwarz) */ /* 57c8da2 (SI_Cr_hl / Text NEU Weiß) */ /* ========================================================================== */ /* 1. Gemeinsames Pillen-Layout */ body .custom-savings-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; white-space: nowrap !important; /* 🟠 Typografie (Global Elementor 5eddb55) */ font-family: var(--e-global-typography-5eddb55-font-family), Sans-serif !important; font-size: var(--e-global-typography-5eddb55-font-size) !important; font-weight: var(--e-global-typography-5eddb55-font-weight) !important; line-height: var(--e-global-typography-5eddb55-line-height, 1) !important; letter-spacing: var(--e-global-typography-5eddb55-letter-spacing, 0.2px) !important; /* 🟠 Pillenform & Schatten */ border-radius: 999rem !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important; margin: 6px 0 !important; /* 🟠 Innenabstände Desktop */ padding-top: 4px !important; padding-right: 10px !important; padding-bottom: 2px !important; padding-left: 10px !important; /* 🟠 Hover-Transition */ transition: transform 0.2s ease, box-shadow 0.2s ease !important; will-change: transform !important; cursor: default !important; } /* 2. Hover-Effekt (Scale 1.3 auf Desktop) */ @media (hover: hover) and (pointer: fine) { body .custom-savings-badge:hover { transform: scale(1.3) !important; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18) !important; } } /* 3. Farb-Variante: Rabatt-Badge (-CHF) */ body .custom-savings-badge.badge-sale { background-color: var(--e-global-color-ff81f4e) !important; /* Fh_Cl_Acc2 */ color: var(--e-global-color-5721865) !important; /* Fh_Cl_Acc3 */ } /* 4. Farb-Variante: NEU-Badge (Schwarz / Weiß) */ body .custom-savings-badge.badge-new { background-color: var(--e-global-color-14ef391) !important; /* Schwarz */ color: var(--e-global-color-57c8da2) !important; /* Weiß */ } /* 5. Responsive Anpassung: Smartphones (unter 768px) */ @media (max-width: 767px) { body .custom-savings-badge { padding-top: 3px !important; padding-right: 7px !important; padding-bottom: 1px !important; padding-left: 7px !important; } } /* 🛑 ⛔ [STOP] ENDE DIESES ABSCHNITTS: Ersparnis-Badge Styling / CSS-WC-SAVINGS-10 ⛔ 🛑 */