/*
 * VOLOS - Layout fuer Promo-Banner, Shop-Badges und die Ersparnis-Anzeige.
 *
 * Eigenes Stylesheet, weil es SYNCHRON geladen werden muss: frontend.css laeuft
 * ueber einen non-render-blocking Swap (media=print + onload). Die Regeln hier
 * positionieren Elemente, die schon im ersten Paint sichtbar sind - kaemen sie
 * verspaetet, saesse ein absolut gesetztes Shop-Badge kurz am Viewport statt an
 * der Produktkarte und wuerde sichtbar springen.
 *
 * 1.12.3: aus VOLOS_Cart::render_promo_banner_css() ausgelagert. Bis 1.12.2 gab
 * diese Methode die Regeln im Kopfbereich der Seite aus. Farben und
 * Schriftgroessen der Banner kommen weiterhin als Inline-Style auf der
 * jeweiligen Karte - hier steht ausschliesslich statisches Layout.
 */

.volos-savings-amount { color: #00a32a; }

/* Header-Banner (Topbar) */
.volos-promo-banner.volos-promo-banner-header { text-align: center; padding: 10px 20px; position: relative; z-index: 999; font-weight: 600; }
.volos-promo-banner a { color: inherit; text-decoration: underline; }
.volos-promo-banner .volos-promo-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; opacity: 0.7; font-size: 18px; line-height: 1; }
.volos-promo-banner .volos-promo-close:hover { opacity: 1; }

/* 1.10.37: Produkt-Banner (im Single-Product-Summary oberhalb der Kurzbeschreibung) */
.volos-promo-banner-product-wrap { margin: 0 0 14px; }
.volos-promo-banner.volos-promo-banner-product { padding: 8px 14px; border-radius: 6px; font-weight: 600; margin-bottom: 8px; }
.volos-promo-banner.volos-promo-banner-product:last-child { margin-bottom: 0; }

/* 1.11.41: Warenkorb-/Kassen-Banner (im Inhalt, unter der Ueberschrift) */
.volos-promo-banner-cart-wrap { margin: 0 0 20px; }
.volos-promo-banner.volos-promo-banner-cart { padding: 10px 16px; border-radius: 6px; font-weight: 600; margin-bottom: 8px; text-align: center; }
.volos-promo-banner.volos-promo-banner-cart:last-child { margin-bottom: 0; }

/* 1.10.39: Gueltigkeits-Anhang, kleiner und leicht abgesetzt */
.volos-promo-banner .volos-promo-validity { font-size: 0.82em; opacity: 0.9; font-weight: 400; margin-left: 4px; white-space: nowrap; }

/* 1.10.55/57: Shop-Loop-Badge - absolut ueber dem Produktbild (wie WCs .onsale).
   1.10.95: 5 Positionen (top-/bottom- x left/right + center) und 5 Formen. */
.volos-shop-badges { position: absolute; display: flex; flex-direction: column; gap: 4px; z-index: 10; pointer-events: none; }
.volos-shop-badges-top-right { top: 8px; right: 8px; align-items: flex-end; }
.volos-shop-badges-top-left { top: 8px; left: 8px; align-items: flex-start; }
.volos-shop-badges-bottom-right { bottom: 8px; right: 8px; align-items: flex-end; }
.volos-shop-badges-bottom-left { bottom: 8px; left: 8px; align-items: flex-start; }

/* 1.10.98 FIX: right/bottom explizit auf auto, damit Theme-CSS den absolut
   positionierten Wrapper nicht von 50% bis zum Kartenboden streckt. */
.volos-shop-badges-center { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); align-items: center; }

/* Rueckwaertskompatibel: alte Klassen aus 1.10.55-1.10.94 -> top-Variante */
.volos-shop-badges-right:not([class*="bottom"]):not([class*="top"]) { top: 8px; right: 8px; align-items: flex-end; }
.volos-shop-badges-left:not([class*="bottom"]):not([class*="top"]) { top: 8px; left: 8px; align-items: flex-start; }

/* Klassenloser Fallback (vor 1.10.55) -> oben rechts */
.volos-shop-badges:not([class*="volos-shop-badges-"]) { top: 8px; right: 8px; align-items: flex-end; }

/* Basis aller Badges (Default = rounded) */
.volos-shop-badge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); pointer-events: auto; text-align: center; }
.volos-shop-badge--rounded { border-radius: 4px; }
.volos-shop-badge--pill { border-radius: 999px; padding: 4px 14px; }

/* 1.10.97 FIX: Circle/Splash brauchen box-sizing:border-box - sonst macht das
   Padding die Box rechteckig und clip-path verzerrt den Sticker zum Oval.
   flex:0 0 auto verhindert Schrumpfen im Flex-Parent.
   1.10.98: Star-Form entfernt (clip-path nicht sauber genug fuer variable Texte). */
.volos-shop-badge--circle,
.volos-shop-badge--splash { box-sizing: border-box; flex: 0 0 auto; }
.volos-shop-badge--circle { border-radius: 50%; width: 60px; height: 60px; padding: 6px; font-size: 11px; line-height: 1.1; white-space: normal; word-break: break-word; hyphens: auto; }
.volos-shop-badge--splash { width: 80px; height: 80px; padding: 16px 10px; font-size: 11px; line-height: 1.1; border-radius: 0; white-space: normal; word-break: break-word; clip-path: polygon(50% 0%, 60% 12%, 75% 5%, 80% 22%, 95% 25%, 90% 40%, 100% 50%, 90% 60%, 95% 75%, 80% 78%, 75% 95%, 60% 88%, 50% 100%, 40% 88%, 25% 95%, 20% 78%, 5% 75%, 10% 60%, 0% 50%, 10% 40%, 5% 25%, 20% 22%, 25% 5%, 40% 12%); box-shadow: none; }

li.product,
.product.type-product { position: relative; }