/* Responsive badge sizing: make badges slightly larger on narrow screens
           while keeping desktop sizes compact. Use !important to override
           inline styles applied in the renderer. */
        @media (max-width: 480px) {
            .boost-badge-prominent > div {
                padding: 9px 14px !important;
                font-size: 16px !important;
                gap: 9px !important;
                box-shadow: none !important;
            }
            .boost-badge-prominent > div span:first-child { font-size: 22px !important; }
            .boost-badge-prominent > div span:last-child { font-size: 14px !important; }

            .badge.sell {
                padding: 8px 11px !important;
                font-size: 14px !important;
                gap: 9px !important;
                box-shadow: 0 6px 18px rgba(59,130,246,0.28) !important;
            }

            /* Make prominent sell badge match boost sizing on narrow screens */
            .sell-badge-prominent .sell-inner {
                padding: 9px 14px !important;
                gap: 9px !important;
                box-shadow: 0 10px 30px rgba(59,130,246,0.28) !important;
            }
            .sell-badge-prominent .sell-icon { font-size: 22px !important; }
            .sell-badge-prominent .sell-label { font-size: 14px !important; }

            /* Keep LIKED badge at 75% of the Buy badge on narrow screens */
            .liked-badge-prominent .liked-inner {
                padding: 9px 14px !important;
                gap: 9px !important;
                box-shadow: 0 10px 30px rgba(255,255,255,0.28) !important;
            }
            .liked-badge-prominent .liked-label { font-size: 14px !important; }

            /* Keep NEW badge the same size as the LIKED badge on narrow screens */
            .new-badge-prominent .new-inner {
                padding: 7px 11px !important;
                gap: 7px !important;
                box-shadow: 0 10px 30px rgba(255,255,255,0.28) !important;
            }
            .new-badge-prominent .new-label { font-size: 11px !important; }

            .post-badges .badge { transform-origin: center top; }
        }

        /* Slight downscale on very large screens to avoid dominance */
        @media (min-width: 1400px) {
            .boost-badge-prominent > div { transform: scale(0.9); transform-origin: left top; }
            .badge.sell { transform: scale(0.9); transform-origin: center top; }
        }
        /* Very small phones: reduce badges further so they don't overwhelm the UI */
        @media (max-width: 360px) {
            .boost-badge-prominent > div {
                padding: 5px 7px !important;
                font-size: 10px !important;
                gap: 5px !important;
                box-shadow: none !important;
            }
            .boost-badge-prominent > div span:first-child { font-size: 14px !important; }
            .boost-badge-prominent > div span:last-child { font-size: 9px !important; }

            .badge.sell {
                padding: 5px 7px !important;
                font-size: 9px !important;
                gap: 6px !important;
                box-shadow: 0 3px 8px rgba(59,130,246,0.18) !important;
            }

            .sell-badge-prominent .sell-inner {
                padding: 5px 7px !important;
                gap: 6px !important;
                box-shadow: 0 3px 8px rgba(59,130,246,0.18) !important;
            }
            .sell-badge-prominent .sell-icon { font-size: 14px !important; }
            .sell-badge-prominent .sell-label { font-size: 9px !important; }

            /* Keep LIKED badge at 75% of the Buy badge on very small phones */
            .liked-badge-prominent .liked-inner {
                padding: 5px 7px !important;
                gap: 6px !important;
                box-shadow: 0 3px 8px rgba(255,255,255,0.18) !important;
            }
            .liked-badge-prominent .liked-label { font-size: 9px !important; }

            /* Keep NEW badge the same size as the LIKED badge on very small phones */
            .new-badge-prominent .new-inner {
                padding: 4px 5px !important;
                gap: 5px !important;
                box-shadow: 0 3px 8px rgba(255,255,255,0.18) !important;
            }
            .new-badge-prominent .new-label { font-size: 7px !important; }

            .post-badges .badge { transform-origin: center top; }
        }

        /* Strong override when JS detects a small device. This uses a high-specificity
           class and !important so it reliably overrides inline styles injected
           by the renderer without affecting larger screens. */
        /* DISABLED: scale(0.55) was causing inconsistent glitchy rendering on mobile.
           Now using CSS variables + media queries in style.css instead. */
        .small-badges .boost-badge-prominent > div {
            /* transform: scale(0.55) !important; */
            transform-origin: left top !important;
            padding: 8px 12px !important;
            font-size: 16px !important;
            gap: 8px !important;
            box-shadow: none !important;
        }
        .small-badges .boost-badge-prominent > div span:first-child { font-size: 20px !important; }
        .small-badges .boost-badge-prominent > div span:last-child  { font-size: 14px !important; }

        .small-badges .badge.sell {
            /* transform: scale(0.55) !important; */
            transform-origin: center top !important;
            padding: 8px 12px !important;
            font-size: 14px !important;
            gap: 8px !important;
            box-shadow: 0 8px 30px rgba(59,130,246,0.20) !important;
        }

        .small-badges .sell-badge-prominent .sell-inner {
            /* transform: scale(0.55) !important; */
            transform-origin: left top !important;
            padding: 8px 12px !important;
            font-size: 14px !important;
            gap: 8px !important;
            box-shadow: 0 8px 30px rgba(59,130,246,0.20) !important;
        }
        .small-badges .sell-badge-prominent .sell-icon { font-size: 16px !important; }
        .small-badges .sell-badge-prominent .sell-label { font-size: 14px !important; }

        /* Keep LIKED badge at readable size on mobile */
        .small-badges .liked-badge-prominent .liked-inner {
            /* transform: scale(0.4125) !important; */
            transform-origin: right top !important;
            padding: 8px 12px !important;
            font-size: 14px !important;
            gap: 8px !important;
            box-shadow: 0 8px 30px rgba(255,255,255,0.18) !important;
        }
        .small-badges .liked-badge-prominent .liked-label { font-size: 14px !important; }

        /* Keep NEW badge readable on mobile */
        .small-badges .new-badge-prominent .new-inner {
            /* transform: scale(0.4125) !important; */
            transform-origin: left top !important;
            padding: 8px 12px !important;
            font-size: 14px !important;
            gap: 8px !important;
            box-shadow: 0 8px 30px rgba(255,255,255,0.18) !important;
        }
        .small-badges .new-badge-prominent .new-label { font-size: 12px !important; }