@font-face {
    font-family: "NunitoSans";
    src: url("../fonts/Nunito_Sans/NunitoSans.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@keyframes aboutbutzz_spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes aboutbutzz_heartBounce {
    0%   { transform: scale(1);    filter: brightness(1); }
    25%  { transform: scale(1.3);  filter: brightness(1.5) drop-shadow(0 0 10px #fed529); }
    50%  { transform: scale(1.1);  filter: brightness(1.3) drop-shadow(0 0 5px #fed529); }
    75%  { transform: scale(1.15); filter: brightness(1.2); }
    100% { transform: scale(1.1);  filter: brightness(1.1); }
}

@scope (.aboutbuzz-reviews-host) {
        :scope {
            all: revert-layer;

            --aboutbuzz-card-bg: #F0F0F0;
            --aboutbuzz-text: #545454;
            --aboutbuzz-muted: #888;
            --aboutbuzz-accent: #007cba;
            --aboutbuzz-star-filled: #FFB600;
            --aboutbuzz-star-empty: #C7C7C7;
            --aboutbuzz-radius: 15px;
            --aboutbuzz-video-height: 350px;

            position: relative;
            overflow: hidden;
            font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.4;
            color: var(--aboutbuzz-text);
            box-sizing: border-box;
            width: 100%;
            margin: 0;
            padding: 0;
            background: transparent;
            word-wrap: break-word;
            max-width: 100%;
        }

        *, *::before, *::after {
            box-sizing: border-box;
            max-width: 100%;
            word-wrap: break-word;
        }

        .aboutbutzz_videos_grid {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            scroll-behavior: smooth;
            cursor: grab;
            user-select: none;
            will-change: scroll-position;
            gap: 1rem;
            margin: 0 0 1.5rem 0;
            padding: 0;
            list-style: none;
            background: transparent;
            width: 100%;
            max-width: 100%;
        }

        .aboutbutzz_videos_grid:active { cursor: grabbing; }
        .aboutbutzz_videos_grid::-webkit-scrollbar { display: none; }

        .aboutbutzz_carousel_left  { left: 15px; display: flex; }
        .aboutbutzz_carousel_right { right: 15px; display: flex; }

        .aboutbutzz_video_item,
        .ab-video-card {
            position: relative;
            overflow: hidden;
            background: var(--aboutbuzz-card-bg);
            border-radius: var(--aboutbuzz-radius);
            padding: 54px 36px 18px;
            margin: 0;
            margin-right: 0;
            touch-action: manipulation;
            flex: 0 0 auto;
            min-width: 200px;
            max-width: 500px;
            scroll-snap-align: center;
            will-change: transform;
            transform: translateZ(0);
        }

        .aboutbutzz_video_wrapper,
        .ab-video {
            position: relative;
            width: auto;
            height: var(--aboutbuzz-video-height);
            background-color: #f0f0f0;
            border-radius: 5px;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }

        .aboutbutzz_video_wrapper video,
        .ab-video video {
            width: 100%;
            height: 100%;
            display: block;
            cursor: pointer;
            object-fit: cover;
            background-color: #f0f0f0;
            position: absolute;
            top: 0;
            left: 0;
            transition: opacity 0.3s ease;
        }

        .aboutbutzz_mobile_placeholder img.abz_thumbnail,
        .aboutbutzz_desktop_placeholder img.abz_thumbnail {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .aboutbutzz_mobile_placeholder,
        .aboutbutzz_desktop_placeholder {
            width: 100%;
            height: 100%;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }

        .aboutbutzz_play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 72px;
            height: 72px;
            border-radius: 999px;
            background: transparent;
        }

        img.aboutbutzz-play-icon {
            width: 3em;
            height: 48px;
            display: block;
        }

        .aboutbutzz_mobile_loading,
        .aboutbutzz_desktop_loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            color: white;
            font-size: 14px;
            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
            margin: 0;
            padding: 0;
            background: transparent;
        }

        .aboutbutzz_desktop_loading {
            font-size: 14px;
            background: rgba(0,0,0,0.6);
            padding: 20px;
            border-radius: 8px;
        }

        .aboutbutzz_spinner {
            width: 20px;
            height: 20px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid #3498db;
            border-radius: 50%;
            animation: aboutbutzz_spin 1s linear infinite;
            margin: 0;
            padding: 0;
            background: transparent;
        }

        .aboutbutzz_under_video {
            display: flex;
            justify-content: start;
            padding: 0;
            font-size: 14px;
            margin: 0;
            line-height: 1.4;
            color: var(--aboutbuzz-text);
            font-family: inherit;
            position: relative;
            z-index: 1;
            width: 100%;
            min-height: 44px;
            align-items: center;
            border-radius: 0 0 8px 8px;
        }

        .aboutbutzz_rating_display {
            display: inline;
            margin: 0;
            padding: 0;
            line-height: 1;
            vertical-align: baseline;
            font-size: 14px;
        }

        .aboutbutzz_verified {
            display: inline;
            margin: 0;
            padding-left: 0.5em;
            background: transparent;
            line-height: 1;
            vertical-align: baseline;
            color: var(--aboutbuzz-text);
            font-size: 14px;
        }

        .aboutbutzz_useful {
            display: inline;
            margin: 0;
            padding: 0;
            background: transparent;
            line-height: 1;
            vertical-align: baseline;
            color: var(--aboutbuzz-text);
            font-size: 14px;
        }

        .aboutbutzz_like_btn {
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            cursor: pointer;
            font-size: inherit;
            line-height: 1;
            color: inherit;
            box-shadow: none;
            display: inline;
            vertical-align: baseline;
            font-family: inherit;
            font-weight: inherit;
            pointer-events: auto;
            position: relative;
        }

        .row-0,
        .ab-info-row {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 1em 0.5em 0 0.5em;
            width: 100%;
            box-sizing: border-box;
        }

        .aboutbutzz_like_wrapper {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .aboutbutzz-star-icon,
        .aboutbutzz_heart,
        .aboutbutzz_check {
            display: inline-block;
            vertical-align: middle;
        }

        .aboutbutzz-star-size { width: 1.5em; }
        .aboutbutzz_heart     { width: 1em !important; height: 1em !important; }
        .aboutbutzz_check     { width: 1.2em; }

        .aboutbutzz_like_wrapper { margin-left: auto !important; }

        svg.aboutbutzz-star-icon {
            display: inline-block;
            width: 1.5em;
            height: 1.5em;
            vertical-align: middle;
        }

        svg.aboutbutzz-star-filled path { fill: var(--aboutbuzz-star-filled); }
        svg.aboutbutzz-star-empty  path { stroke: var(--aboutbuzz-star-empty); }

        .aboutbutzz_vote_count {
            color: var(--aboutbuzz-text);
            display: inline;
            margin: 0;
            padding: 0;
            font-size: 14px;
            background: transparent;
            line-height: 1;
            vertical-align: baseline;
        }

        span.aboutbutzz_heart { position: relative; }

        .aboutbutzz_footer_inline {
            display: flex;
            align-items: center;
            font-size: 17px;
            justify-content: center;
            flex-direction: column;
            gap: 10px;
            margin-top: 20px;
            padding: 15px;
            text-align: center;
            line-height: 1.4;
            color: var(--aboutbuzz-text);
        }

        .aboutbutzz_caption_inline {
            color: var(--aboutbuzz-text);
            font-size: 14px;
            margin: 0;
            padding: 0;
            background: transparent;
            line-height: 1.4;
            display: inline;
            vertical-align: baseline;
        }

        .aboutbutzz_link_inline {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: inherit;
            margin: 0;
            padding: 0;
            background: transparent;
            line-height: 1;
            cursor: pointer;
        }

        .aboutbutzz_logo_inline {
            display: inline-block;
            height: 24px;
            width: 100px;
            margin: 0 5px;
            padding: 0;
            vertical-align: baseline;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .aboutbutzz_logo_text {
            color: var(--aboutbuzz-accent);
            font-weight: bold;
            font-size: 14px;
            margin: 0 5px;
            padding: 0;
            background: transparent;
            vertical-align: baseline;
        }

        .aboutbutzz_error {
            color: #d32f2f;
            background: #ffebee;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #ffcdd2;
            margin: 10px 0;
            font-size: 14px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 200px;
            width: 100%;
            line-height: 1.4;
            font-family: inherit;
        }

        img.aboutbutzz_heart.entered.litespeed-loaded { width: 1em !important; height: 1em !important; }

        .aboutbutzz_no_stories {
            color: var(--aboutbuzz-text);
            background: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            font-size: 14px;
            margin: 20px 0;
            line-height: 1.4;
            font-family: inherit;
        }

        .aboutbutzz_video_item[data-is-mobile="true"] .aboutbutzz_desktop_placeholder,
        .ab-video-card[data-is-mobile="true"] .aboutbutzz_desktop_placeholder {
            display: none;
        }

        .aboutbutzz_video_item[data-is-mobile="false"] .aboutbutzz_mobile_placeholder,
        .ab-video-card[data-is-mobile="false"] .aboutbutzz_mobile_placeholder {
            display: none;
        }

        .aboutbutzz_like_btn:disabled {
            opacity: 1;
            cursor: not-allowed;
            pointer-events: none;
        }

        .aboutbutzz_mobile_placeholder[data-loading="true"],
        .aboutbutzz_desktop_placeholder[data-loading="true"] {
            pointer-events: none;
        }

        .aboutbutzz_carousel_arrow {
            position: absolute;
            top: 40%;
            transform: translateY(-50%);
            z-index: 1001;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            user-select: none;
            pointer-events: auto;
        }

        .aboutbutzz_carousel_arrow img {
            width: 24px;
            height: 24px;
            opacity: 1;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        .aboutbutzz_carousel_arrow:hover img { opacity: 1; }

        /* Product source badge (Verified Purchase / Verified Tester) */
        .aboutbutzz_video_wrapper .ab-source-badge,
        .ab-video .ab-source-badge {
            position: absolute !important;
            left: -0.2rem !important;
            bottom: 2rem !important;
            height: auto !important;
            max-width: 65% !important;
            width: auto !important;
            z-index: 3 !important;
            pointer-events: none !important;
            opacity: 0.9 !important;
        }

        /* Brand name row beneath verified row */
        .aboutbutzz_brand_name,
        .ab-brand-name {
            padding: 0.25em 0.5em 0 0.5em;
            font-size: 13px;
            color: var(--aboutbuzz-muted);
            line-height: 1.3;
            font-family: inherit;
        }

        /* Heart transition + final states */
        img.aboutbutzz_heart { transition: transform 0.2s ease, opacity 0.2s ease; }

        img.aboutbutzz_heart.aboutbutzz_heart-liked-animation {
            animation: aboutbutzz_heartBounce 0.6s ease-out;
        }

        .aboutbutzz_like_btn.liked img.aboutbutzz_heart { transform: scale(1.0); }

        .aboutbutzz_like_btn:not(.liked):hover img.aboutbutzz_heart {
            transform: scale(1.05);
            opacity: 0.7;
        }

        /* Font smoothing */
        :scope, :scope * {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }

        /* --- Responsive --- */

        @media (min-width: 1400px) {
            .aboutbutzz_videos_grid {
                max-width: 1320px;
                width: 100%;
                margin: 0 auto 1.5rem auto;
            }
        }

        @media (max-width: 1024px) {
            .aboutbutzz_videos_grid {
                width: 100%;
                max-width: 100%;
                padding: 0 40px;
                gap: 5em;
            }
        }

        @media (max-width: 600px) {
            .aboutbutzz_videos_grid {
                width: 100%;
                max-width: 100%;
                padding: 0 10px;
                gap: 1rem;
                scroll-behavior: auto;
                overscroll-behavior-x: contain;
                scroll-padding-inline: calc((100% - 58%) / 2);
            }

            .aboutbutzz_video_item,
            .ab-video-card {
                flex: 0 0 58%;
                width: 58%;
                min-width: auto;
                max-width: none;
                padding: 24px 12px 14px;
            }

            .aboutbutzz_video_wrapper,
            .ab-video {
                height: auto;
                aspect-ratio: 9 / 16;
            }

            .aboutbutzz_video_wrapper video,
            .ab-video video,
            .aboutbutzz_mobile_placeholder,
            .aboutbutzz_desktop_placeholder {
                height: 100%;
            }

            .aboutbutzz_carousel_left  { left: 15px; }
            .aboutbutzz_carousel_right { right: 15px; }

            .aboutbutzz_footer_inline { text-align: center; margin-top: 1rem; font-size: 14px; }
            .aboutbutzz_caption_inline { font-size: 12px; }
        }

        @media (min-width: 768px) {
            .aboutbutzz_carousel_arrow.aboutbutzz_carousel_left,
            .aboutbutzz_carousel_arrow.aboutbutzz_carousel_right { display: none; }
        }

        @media (max-width: 768px) {
            .aboutbutzz_carousel_arrow { width: auto; height: 55px; }
            .aboutbutzz_carousel_arrow img { width: auto; height: 35px; }
            .aboutbutzz_carousel_left  { left: 15px; }
            .aboutbutzz_carousel_right { right: 15px; }
        }

        @media (max-width: 480px) {
            .aboutbutzz_carousel_arrow { width: auto; height: 40px; }
            .aboutbutzz_carousel_arrow img { width: auto; height: 30px; }
        }

        @media (prefers-contrast: high) {
            .aboutbutzz_carousel_arrow {
                background: rgba(255, 255, 255, 1);
                border: 2px solid #333;
            }
            .aboutbutzz_carousel_arrow img { opacity: 1; }
        }

        @media (prefers-reduced-motion: reduce) {
            .aboutbutzz_carousel_arrow { transition: none; }
            .aboutbutzz_carousel_arrow:hover { transform: translateY(-50%); }
        }
    }