/* Wrapper */
        .gv-similar-products-wrapper {
            display: flex;
            justify-content: flex-end;
            /* Align everything to the right */
            align-items: stretch;
            gap: 2em;
            padding: 2em 2em 2em 0em;
            overflow: hidden;
            /* Clip Background Layer */
            position: relative;
            /* For absolute background */
        }

        /* --- Parallax Background Layer --- */
        .gv-sp-bg-layer {
            position: absolute;
            top: 0;
            /* Was -50% for parallax */
            left: 0;
            width: 100%;
            height: 100%;
            /* Was 200% for parallax movement */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: -1;
            will-change: transform, filter;
            pointer-events: none;
        }

        /* --- Dark Overlay (Gradient Mask: Right to Left) --- */
        .gv-sp-bg-layer::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to left, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
            /* Blackish mask from Right (Text side) to Left (Image side) */
            z-index: 1;
        }

        /* --- Scroll Container (Grid + Arrows + FAKE MASK) --- */
        .gv-sp-scroll-container {
            display: flex;
            align-items: center;
            position: relative;
            flex: 1;
            /* Take remaining space */
            min-width: 0;
            /* Flexbox overflow fix */
            z-index: 1;
            /* Above BG */
        }


        /* Mask Wrapper (The viewport) */
        .gv-sp-mask-wrapper {
            width: 100%;
            overflow-x: auto;
            padding-left: 1.2em;
            /* Allow Scroll */
            /* Hide scrollbar, mask handles visual edge */
            -ms-overflow-style: none;
            scrollbar-width: none;

            /* User Request: Start Scroll at Right */
            direction: rtl;

            /* Gradient Mask Effect REMOVED to fix Blur */
            /* mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); */
            /* -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); */
        }

        .gv-sp-mask-wrapper::-webkit-scrollbar {
            display: none;
        }

        /* Left: List (Infinite Horizontal) */
        /* Flexbox allows natural infinite row */
        .gv-sp-grid {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            /* Single line */
            gap: 20px;
            /* Padding inside mask to avoid cut-off */
            padding: 1.6em 1.0em;

            /* User Request: Start from Right, go Left */
            direction: rtl;
            /* Start from the "Start" (Right in RTL) */
            justify-content: flex-start;

            /* CRITICAL FIX: Force container to be as wide as content for scrollWidth to work */
            width: max-content;
            min-width: 100%;
        }

        /* --- Navigation Arrows (Ported from Edition Showcase) --- */
        .gv-sp-nav-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            display: none;
            opacity: 0;

            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 20;
            transition: opacity 0.3s ease, background 0.3s ease, transform 0.2s ease, left 0.3s ease, right 0.3s ease;
        }

        /* Initial Positions (Outside/Hidden) */
        .gv-sp-nav-arrow.prev {
            left: -20px;
        }

        .gv-sp-nav-arrow.next {
            right: -20px;
        }

        /* Show arrows ONLY if overflow exists */
        .gv-sp-scroll-container.gv-has-overflow .gv-sp-nav-arrow {
            display: flex;
            opacity: 0;
            /* Default Hidden */
        }

        /* Reveal & Slide-In arrows ONLY on HOVER (and not disabled) */
        .gv-sp-scroll-container.gv-has-overflow:hover .gv-sp-nav-arrow:not(.gv-disabled) {
            opacity: 1;
        }

        /* Explicitly Hide Disabled Arrows */
        .gv-sp-nav-arrow.gv-disabled {
            opacity: 0 !important;
            pointer-events: none;
        }

        .gv-sp-scroll-container.gv-has-overflow:hover .gv-sp-nav-arrow.prev {
            left: 10px;
        }

        .gv-sp-scroll-container.gv-has-overflow:hover .gv-sp-nav-arrow.next {
            right: 10px;
        }

        .gv-sp-nav-arrow:hover {
            background: #fff;
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
            opacity: 1;
        }

        /* Arrow Icon Shape */
        .gv-sp-nav-arrow::after {
            content: '';
            width: 8px;
            height: 8px;
            border-right: 2px solid #fff;
            border-top: 2px solid #fff;
            transition: border-color 0.3s;
        }

        .gv-sp-nav-arrow:hover::after {
            border-color: #1a1a1a;
        }

        /* Next Icon Rotation */
        .gv-sp-nav-arrow.next {
            right: -20px;
            /* Overlap right edge slightly */
        }

        .gv-sp-nav-arrow.next::after {
            transform: rotate(45deg);
            margin-right: 2px;
        }

        /* Prev Icon Rotation */
        .gv-sp-nav-arrow.prev {
            left: -20px;
            /* Overlap left edge */
            z-index: 30;
            /* Ensure active */
        }

        .gv-sp-nav-arrow.prev::after {
            transform: rotate(225deg);
            /* Points Left */
            margin-left: 2px;
        }

        /* Animation Keyframes */
        @keyframes gvCardEntrance {
            from {
                opacity: 0;
                transform: translateX(30px);
                /* Start from Right */
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* Right: Sidebar */
        .gv-sp-sidebar {
            flex: 0 0 30rem;
            /* Fixed width, prevent squeezing */
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            /* Top align */
            /* align-items: flex-end; Removed to allow mixed alignment via align-self */
            /* text-align: right; Removed, set per container */
            padding-top: 0.9em;
            /* Add some top spacing */
        }

        .gv-sp-text-group {
            align-self: flex-end;
            /* Right align */
            text-align: right;
            width: 100%;
            margin-bottom: 1em;
        }

        .gv-sp-section-title {
            font-size: 2rem;
            font-weight: 600;
            color: #4a4a4a;
            /* Muted dark grey from image */
            margin: 0;
            font-family: inherit;
            text-transform: none;
            /* "Similar product" in image is mixed case */
        }

        /* Description Text */
        .gv-sp-description {
            font-size: 0.9rem;
            line-height: 1.5;
            color: #b6b6b6;
            max-width: 100%;
            margin: 0;
        }

        /* --- Short Description Box (Simplified) --- */
        .gv-sp-desc-box {
            width: 100%;
            position: relative;
            align-self: flex-end;
            /* Right align */
            text-align: right;
            /* max-width: 90%; Optional constraint */
        }

        .gv-sp-intro-heading {
            font-size: 1rem !important;
            text-transform: none !important;
            letter-spacing: normal;
            color: #80e9ff !important;
            margin: 0px;
            margin-bottom: 0.3em;
            font-weight: 600;
        }


        .gv-sp-desc-content {
            font-size: 0.9rem !important;
            line-height: 1.4em !important;
            color: #b3b3b3 !important;

            /* Line Clamp Logic */
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .gv-sp-desc-content p {
            margin-block-start: 0;
        }

        /* Expanded State */
        .gv-sp-desc-content.gv-expanded {
            -webkit-line-clamp: unset;
            line-clamp: unset;
            display: block;

            /* User Request: White text, Rounded Blackish Background */
            background-color: rgba(0, 0, 0, 0.1) !important;
            color: #fff !important;
            border-radius: 1em;
            padding: 1em;

            position: relative;
            z-index: 10;

            /* Optional: Nice backdrop blur and shadow */
            backdrop-filter: blur(25px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        /* Ensure all child text is white when expanded */
        .gv-sp-desc-content.gv-expanded * {
            color: #fff !important;
        }

        .gv-sp-desc-content p {
            margin-bottom: 0.5em;
        }

        /* Show More Button ("Read more") - Matches Main Desc Style */
        .gv-sp-show-more-btn {
            display: inline-block;
            margin-bottom: 1em;
            color: #b3b3b3 !important;
            font-size: 0.8em;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            transition: color 0.2s;
        }

        .gv-sp-show-more-btn:hover {
            color: #b1b0b0 !important;
        }

        .gv-sp-arrow {
            font-size: 10px;
            margin-left: 4px;
        }

        /* --- ACTION BUTTONS (Sidebar) --- */
        .gv-sp-sidebar-actions {
            display: flex;
            gap: 15px;
            margin-top: auto;
            /* Push to bottom */
            width: 100%;
            justify-content: flex-end;
            /* Align right */
        }

        /* New Button Style */
        /* New Button Style */
        /* New Button Style (View Product - Glass Default) */
        .gv-sp-new-btn {
            line-height: 1;
            text-decoration: none;
            display: inline-flex;
            border: none;
            cursor: pointer;
            align-items: center;
            gap: 0.5rem;

            /* Glass Style Default */
            background: rgba(255, 255, 255, 0.03);
            /* Very transparent */
            border: 1px solid rgba(255, 255, 255, 0.2);

            color: #4be0ff !important;
            /* Text Cyan by default */
            border-radius: 10rem;
            font-weight: 600;
            padding: 0.45rem 12px;
            /* Equal padding for centering */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /* transition: background-color 0.3s; Removed to let pseudo-element handle fill */
            /* flex: 1; Removed to reduce width */
            /* Match previous flex behavior */
            justify-content: center;
            /* Center content */
            font-size: 12px;
            /* Keep font size consistent with old buttons */
            text-transform: uppercase;
            /* Keep uppercase */
            letter-spacing: 0.5px;

            /* Animation Container Properties */
            position: relative;
            z-index: 1;
            isolation: isolate;
            transition: border-color 0.3s;
        }

        /* Sliding Circle Fill Animation (Heavy Warthog Style) */
        /* Using Gradient for Fill */
        .gv-sp-new-btn::before {
            content: "";
            position: absolute;
            top: 50%;
            left: -100%;
            /* Start off-screen left */
            width: 100%;
            aspect-ratio: 1/1;
            /* Square to make a circle */
            border-radius: 50%;

            /* Gradient Background: Cyan (#06b6d4) to Purple (#7808d0) */
            /* Adjusted to 'to right' to match visual appearance of the rectangular button gradient */
            background: linear-gradient(to right, #06b6d4 0%, #7808d0 100%);

            transform: translate(0, -50%) scale(1);
            /* Vertically centered */
            z-index: -1;
            /* Behind text */
            transition: all 0.6s ease;
            /* Smooth transition */
        }

        .gv-sp-new-btn:hover::before {
            left: 0;
            transform: translate(0, -50%) scale(1.5);
            /* Slide in and scale up to fill */
        }

        /* Remove border and background interference on hover when filled */
        .gv-sp-new-btn:hover {
            border-color: transparent;
            background: transparent;
            color: #fff !important;
            /* Ensure text becomes white on hover */
        }

        .gv-sp-new-btn__icon-wrapper {
            flex-shrink: 0;
            width: 18px;
            height: 18px;
            position: relative;
            color: var(--clr);
            /* Icon color white on glass? or var(--clr)? Let's stick to white or theme. */
            /* Actually user didn't specify icon color, but typically glass has white icons. 
               Previous was var(--clr). Let's stick to var(--clr) for now. */

            background-color: #fff;
            border-radius: 50%;
            display: grid;
            place-items: center;
            overflow: hidden;
            z-index: 2;
            /* Keep above fill */
        }

        .gv-sp-new-btn:hover {
            /* background-color: #000; Removed - handled by ::before */
            color: #fff;
            /* Ensure text remains white on hover */
        }

        .gv-sp-new-btn:hover .gv-sp-new-btn__icon-wrapper {
            color: #000;
        }

        .gv-sp-new-btn__icon-svg--copy {
            position: absolute;
            transform: translate(-150%, 150%);
        }

        .gv-sp-new-btn:hover .gv-sp-new-btn__icon-svg:first-child {
            transition: transform 0.3s ease-in-out;
            transform: translate(150%, -150%);
        }

        .gv-sp-new-btn:hover .gv-sp-new-btn__icon-svg--copy {
            transition: transform 0.3s ease-in-out 0.1s;
            transform: translate(0);
        }




        /* ---------------------------------------------------- */
        /* View All Button Style (Right Button) - User Provided Style */
        /* ---------------------------------------------------- */
        .gv-sp-view-all {
            line-height: 1;
            text-decoration: none;
            display: inline-flex;
            border: none;
            cursor: pointer;
            align-items: center;
            gap: 0.5rem;
            /* Gradient Background: Cyan (#06b6d4) to Purple (#7808d0) */
            background: linear-gradient(135deg, #06b6d4 0%, #7808d0 100%);
            background-repeat: no-repeat;
            /* Prevent gradient repeat leak */
            background-origin: border-box;
            /* Fill properly under transparent border */
            color: #fff !important;
            border-radius: 10rem;
            font-weight: 600;
            padding: 0.45rem 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: all 0.3s ease;
            /* Animate all properties including border/bg */

            /* Border for Glass effect (invisible initially or transparent) */
            border: 1px solid transparent;

            /* Fixes for rendering artifacts */
            transform: translateZ(0);
            -webkit-font-smoothing: antialiased;

            justify-content: center;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .gv-sp-view-all__icon-wrapper {
            flex-shrink: 0;
            width: 18px;
            height: 18px;
            position: relative;
            color: var(--clr);
            background-color: #fff;
            border-radius: 50%;
            display: grid;
            place-items: center;
            overflow: hidden;
        }

        /* Hover: Transparent Glass Effect */
        .gv-sp-view-all:hover {
            background: rgba(255, 255, 255, 0.03);
            border-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            color: #4be0ff !important;
            /* Text Cyan on hover */
        }

        .gv-sp-view-all:hover .gv-sp-view-all__icon-wrapper {
            color: #7808d0;
            /* Keep purple or switch to white? Keeping purple contrast */
        }

        .gv-sp-view-all__icon-svg--copy {
            position: absolute;
            transform: translate(-150%, 150%);
        }

        .gv-sp-view-all:hover .gv-sp-view-all__icon-svg:first-child {
            transition: transform 0.3s ease-in-out;
            transform: translate(150%, -150%);
        }

        .gv-sp-view-all:hover .gv-sp-view-all__icon-svg--copy {
            transition: transform 0.3s ease-in-out 0.1s;
            transform: translate(0);
        }

        /* --- CARD STYLING --- */
        .gv-sp-card {
            /* Fix squashing issue: Don't shrink, fixed width */
            flex: 0 0 270px;
            display: flex;
            flex-direction: column;
            border-radius: 1.3em;

            /* Animation Entrance (Smart Rendering) */
            opacity: 0;
            transform: translateX(-30px);
            transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);

            /* Kept original properties */
            overflow: hidden;
            /* Note: Transform transition is handled by .visible state now, but hover effect needs it too. */
            /* We combine them: regular state has transition for hover, .visible triggers entrance. */

            /* Glassmorphism Effect */
            background: rgba(50, 50, 50, 0.3);
            /* Subtle dark tint */
            backdrop-filter: blur(10px);
            background-color: rgba(17, 25, 40, 0.2);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

            /* Fixed Dimensions */
            width: 270px;
            height: 298.88px;
            cursor: pointer;

            /* Reset Direction for Content */
            direction: ltr;
        }

        /* Visible State (Triggered by JS IntersectionObserver) */
        .gv-sp-card.visible {
            opacity: 1;
            transform: translateX(0);
        }

        /* Staggered Delays - REMOVED for Stress Test */
        /* JS handles the timing naturally as you scroll */

        /* Selected State: Grow & Highlight */
        .gv-sp-card.selected {
            transform: scale(1.06);
            /* Increased from 1.05 for clearer effect */
            z-index: 10;
            box-shadow: 0 0.3em 0.4em rgba(0, 0, 0, 0.3);
            /* Stronger shadow */
            border-color: rgba(255, 255, 255, 0.5);
        }

        /* Hover State: Subtle grow (ignores selected cards) */
        .gv-sp-card:not(.selected):hover {
            transform: scale(1.03);
            /* Increased from 1.02 */
            z-index: 10;
            box-shadow: 0 0.3em 0.4em rgba(0, 0, 0, 0.3);
            /* Enhanced shadow */
            border-color: rgba(255, 255, 255, 0.45);
            /* Fast transition for hover in */
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .gv-sp-link-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
        }

        /* Image */
        .gv-sp-image {
            width: 100%;
            height: auto;
            aspect-ratio: 16/9;
            /* Strict 16:9 ratio */
            overflow: hidden;
            margin: 0;
            padding: 0;
            border-radius: 1.3em;
            /* As user requested */
            position: relative;
            /* Added relative for video positioning */
            transition: box-shadow 0.3s ease;
        }

        .gv-sp-card:hover .gv-sp-image,
        .gv-sp-card.selected .gv-sp-image {
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
        }

        .gv-sp-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 1;
            /* clear image */
            transition: opacity 0.1s ease-out;
            /* Super fast return */
            /* Changed to opacity transition */
            border-radius: 1.3em;
            /* As user requested */
            position: relative;
            z-index: 1;
        }

        /* External Link Icon */
        .gv-sp-external-link {
            position: absolute;
            top: 0.3em;
            right: 0.5em;
            width: 2em;
            height: 2em;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            z-index: 20;
            /* Above everything */
            transition: all 0.3s ease;
            text-decoration: none;

            /* Hidden by default */
            opacity: 0;
            transform: translateY(-5px);
        }

        .gv-sp-external-link img {
            width: 1em;
            /* Slightly smaller to fit well inside circle */
            height: 1em;
            filter: brightness(0) invert(1);
            /* Ensure white icon */
            transition: transform 0.3s ease;
        }

        /* Show on Card Hover */
        .gv-sp-card:hover .gv-sp-external-link,
        .gv-sp-card.selected .gv-sp-external-link {
            opacity: 1;
            transform: translateY(0);
        }

        /* Hover Effect: Glass Circle */
        .gv-sp-external-link:hover {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            transform: scale(1.1) !important;
        }

        /* Video Frame (Behind Image) */
        .gv-sp-video-frame {
            position: absolute;
            /* Aggressive crop: 300% size centered */
            width: 270% !important;
            height: 270% !important;
            top: -100% !important;
            left: -100% !important;
            z-index: 1;
            pointer-events: none;
            background: transparent;
            /* Changed from #000 to fix black corners */
        }

        .gv-sp-video-frame iframe {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 0.5s ease-in;
            pointer-events: none;
        }

        /* Hover State: Hide Image only when video is PLAYING */
        /* Hover State: Hide Image only when video is PLAYING */
        /* Increased specificity to override generic hover rule */
        .gv-sp-card.video-playing .gv-sp-image .gv-sp-main-img {
            opacity: 0 !important;
            /* Force hide */
            transition: opacity 0.3s ease-out;
        }

        /* Video Frame: Only show when playing */
        .gv-sp-card.video-playing .gv-sp-video-frame iframe {
            opacity: 1;
        }

        /* Hover Effect Removed as per request */

        /* Content - COMPACT */
        .gv-sp-content {
            padding: 0.75em;
            /* Reduced padding */
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .gv-sp-info-top {
            display: flex;
            flex-direction: column;
        }

        .gv-sp-title {
            font-size: 0.9rem;
            font-weight: 700;
            color: #fff;
            /* White text */
            margin: 0;
            line-height: 1.3 !important;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            /* Standard Property */
            -webkit-box-orient: vertical;
            flex-grow: 0;
        }

        /* Meta: Icon + Type (Platform, Type) */
        .gv-sp-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.2em;
            /* Added gap */
        }

        /* Type Container */
        .gv-sp-type {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.2em;
            /* Added gap */
        }

        /* Icons */
        .gv-sp-attr-icon {
            transform: scale(1.2);
            width: 17px;
            /* Increased size */
            height: 17px;
            object-fit: contain;
            display: block;
            /* Tint to #b3b3b3 (approximate) */
            filter: grayscale(100%) brightness(1.2) opacity(0.6);
        }

        /* Label Style */
        .gv-sp-label {
            font-size: 13px;
            color: #828282;
            /* White for better visibility on dark bg, assuming dark theme from context */
            font-weight: 600;
            opacity: 0.8;
            line-height: normal;
        }

        /* Fallback Text */
        .gv-sp-text-fallback {
            font-size: 0.75rem;
            color: #aaa;
            font-weight: 500;
        }

        /* Footer: Price + Wishlist */
        .gv-sp-footer {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            position: relative;
            /* Container for absolute wishlist */
            width: 100%;
        }

        .gv-sp-actions {
            display: flex;
            align-items: flex-end;
        }

        /* Price Styling */
        .gv-sp-price {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            align-self: center;
            /* Stack top (price+tag) and bottom (old price) */
            line-height: 1;
            gap: 2px;
            /* Ensure price doesn't overlap wishlist */
            max-width: 80%;
        }

        /* --- WISHLIST ACTIONS (Card) --- */
        .gv-sp-card .gv-sp-actions {
            position: absolute;
            bottom: 0;
            right: 0;
            margin: 0;
            padding: 0;
            display: flex;
            width: auto;
            z-index: 20;
        }

        /* Top Row: Current Price + Discount Tag */
        .gv-sp-price-top {
            display: flex;
            align-items: center;
            gap: 8px;
            order: 2;
            /* Move to bottom as requested */
        }

        /* Bottom Row: Old Price Container (Visually Top) */
        .gv-sp-price-bottom {
            display: flex;
            order: 1;
            /* Move to top as requested */
            align-items: center;
            gap: 4px;
            /* Space between Official > Regular */
        }

        .gv-sp-price-current,
        .gv-sp-price-current .amount {
            text-decoration: none;
            font-size: 1.25rem;
            /* Larger main price */
            font-weight: 800;
            color: #fff;
            /* White price */
            line-height: 1;
        }

        /* Discount Badge */
        .gv-sp-discount {
            background: linear-gradient(90deg, #ff4e00 0%, #ff0000 100%);
            /* Red gradient like image */
            color: #fff;
            font-size: 0.9rem;
            /* Comparable to price height */
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 4px;
            margin-left: 0;
            vertical-align: middle;
            transform: skewX(-10deg);
            /* Slight skew for dynamic look */
            box-shadow: 0 2px 4px rgba(255, 0, 0, 0.3);
        }

        /* --- 3-TIER PRICING STYLES --- */

        /* 1. Official Price */
        .gv-sp-price-official {
            font-size: 0.85rem;
            color: #a9a9a9 !important;
            /* Light Grey */
            text-decoration: line-through;
            text-decoration-color: #ff0000 !important;
            /* Red Strike */
            display: inline-block;
            font-weight: 500;
        }

        /* Force Inner Elements */
        .gv-sp-price-official .amount,
        .gv-sp-price-official bdi,
        .gv-sp-price-official .woocommerce-Price-currencySymbol {
            color: inherit !important;
            text-decoration: inherit !important;
        }

        /* 2. Separator */
        .gv-sp-price-separator {
            font-size: 0.85rem;
            color: #999;
            margin: 0 2px;
        }

        /* 3. Regular Price (Intermediate or Old) */
        .gv-sp-price-regular {
            font-size: 0.85rem;
            color: #a9a9a9 !important;
            /* Light Grey */
            display: inline-block;
            font-weight: 500;
        }

        /* Force Inner Elements for Regular */
        .gv-sp-price-regular .amount,
        .gv-sp-price-regular bdi,
        .gv-sp-price-regular .woocommerce-Price-currencySymbol {
            color: inherit !important;
            /* Inherit grey or red strike */
            text-decoration: inherit !important;
        }

        /* Strikethrough for Regular when Sale is Active */
        del.gv-sp-price-regular {
            text-decoration: line-through;
            text-decoration-color: #ff0000 !important;
        }

        /* Normal for Regular when NO Sale */
        span.gv-sp-price-regular {
            text-decoration: none;
        }

        /* Old .gv-sp-price-old kept for any legacy fallback, mapped to same style */
        .gv-sp-price-old {
            font-size: 0.85rem;
            color: #c7c7c7;
            text-decoration: line-through;
            display: block;
            margin-bottom: 0px;
            font-weight: 500;
        }

        .gv-sp-price-old .amount,
        .gv-sp-price-old bdi,
        .gv-sp-price-old .woocommerce-Price-currencySymbol {
            color: inherit !important;
            text-decoration: inherit !important;
        }

        /* Override Woo default ins/del styling if picking up global styles */
        .gv-sp-price ins {
            text-decoration: none;
        }

        /* Wishlist Icon */
        .gv-sp-wishlist {
            position: relative;
            z-index: 20;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .gv-sp-card:hover .gv-sp-wishlist,
        .gv-sp-card.selected .gv-sp-wishlist {
            opacity: 1;
        }

        .gv-sp-wishlist a {
            color: #666;
            font-size: 1.2rem;
            transition: color 0.3s;
        }

        .gv-sp-wishlist a:hover {
            color: #fff;
            /* White hover */
        }

        /* --- PRODUCT LABELS --- */
        .gv-sp-card .gv-label {
            position: absolute;
            top: 0.6em;
            left: 0.2em;
            z-index: 20;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.35em 0.8em 0.2em 0.8em;
            border-radius: 1.2em 0.2em 0.2em 0.2em;
            line-height: 1;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

            /* Prevent jitter on card scale */
            transform: translateZ(0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }




        /* --- RESPONSIVE --- */
        @media (max-width: 1024px) {
            .gv-similar-products-wrapper {
                flex-direction: column;
            }

            .gv-sp-grid {
                flex: auto;
            }

            .gv-sp-sidebar {
                align-items: center;
                text-align: center;
                order: -1;
                /* Title on top for mobile/tablet */
                padding-left: 0;
                margin-bottom: 20px;
            }

            .gv-sp-text-group,
            .gv-sp-desc-box {
                align-self: center;
                text-align: center;
                width: 100%;
                margin-bottom: 20px;
            }

            .gv-sp-sidebar-actions {
                justify-content: center;
                margin-top: 20px;
            }

            .gv-sp-pagelines {
                align-items: center;
                width: 60%;
            }
        }

        @media (max-width: 768px) {
            .gv-sp-grid {
                grid-template-columns: repeat(1, 1fr);
                /* 1 Column on mobile */
            }
        }