/* ───────────────────────────────────────────────────────────────────────── Dual-render price toggle. The cached HTML carries BOTH the retail and member views inside every .usago-price-block wrapper. The .usago-member-state class is added synchronously to by the wp_head early script (reading the usago_member_state cookie) before first paint, and toggled by JS on cart-membership change. CSS does the visual swap — no innerHTML rewriting, no DOM walk, no per-element JS work. ───────────────────────────────────────────────────────────────────────── */ .usago-price-block .usago-view-retail { display: inline; } .usago-price-block .usago-view-member { display: none; } .usago-member-state .usago-price-block .usago-view-retail { display: none; } .usago-member-state .usago-price-block .usago-view-member { display: inline; } /* Comparison block — server always emits the member-view HTML; CSS reveals it only for members. Same pattern as the saving-with-usago / show-memberships-link rules below. */ .woocommerce-comparation-price { display: none; } .usago-member-state .woocommerce-comparation-price { display: block; } /* Skeleton shimmer kept for the rare case where JS does need to rewrite a .usago-price-block (variation selection on single product page). Applied during the brief window between found_variation firing and the splice completing. Not used on shop loops. */ .usago-pricing-swap { position: relative; color: transparent !important; background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%); background-size: 200% 100%; animation: usagoShimmer 1.1s infinite linear; border-radius: 4px; } .usago-pricing-swap > * { visibility: hidden; } @keyframes usagoShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* Non-member CTAs hidden when .usago-member-state is on root. */ .usago-member-state .saving-with-usago, .usago-member-state .show-memberships-link { display: none !important; }