/** * Atom Buy Box — the discount indicator shown beside #dynamic-price once the * authoritative resolve confirms a product-level discount (the price dropped * below the optimistic full value). Hidden by default; revealed with a pop. * Hovering/tapping it reveals a breakdown: original / discounted product + add-on. */ /* Vertically centre the add-to-cart button's content (label, price, badge); the * theme leaves it at WooCommerce's default inline-block, so a 24px badge next to * smaller text sits off-centre. inline-flex keeps the content-width button. */ .single_add_to_cart_button { display: inline-flex; align-items: center; justify-content: center; } /* Flex collapses the whitespace after "Lägg till –", which made the price read * like a negative ("–167,50 kr"). Restore the gap before the price. */ .single_add_to_cart_button #dynamic-price { margin-inline-start: 0.35em; } .atom-bb-discount { display: none; margin-inline-start: 0.4em; line-height: 0; color: currentColor; cursor: help; transform-origin: center; backface-visibility: hidden; } .atom-bb-discount.is-shown { display: inline-flex; align-items: center; } .atom-bb-discount svg { width: 24px; height: 24px; display: block; } @keyframes atom-bb-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } } .atom-bb-discount.is-pop { /* `backwards` applies the 0% (scale 0) state immediately, before the first * frame, so the badge never flashes at full size; will-change composites it. */ animation: atom-bb-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards; will-change: transform; } @media (prefers-reduced-motion: reduce) { .atom-bb-discount.is-pop { animation: none; } } /* ---- Hover/tap breakdown ---------------------------------------------- * Portalled to and positioned by JS (position:fixed) so the product * summary's overflow:hidden cannot clip it. */ .atom-bb-tip { display: none; position: fixed; z-index: 100000; min-width: 11em; padding: 8px 10px; border-radius: 8px; background: #1a1a1a; color: #fff; font-size: 12px; line-height: 1.6; text-transform: none; letter-spacing: normal; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); } .atom-bb-tip.is-open { display: block; } .atom-bb-tip-row { display: flex; justify-content: space-between; gap: 1.5em; } .atom-bb-tip-row .atom-bb-tip-val { font-weight: 600; }