.main-card {
    border: 1px solid #e0e0e0 !important; /* Light gray border for normal cards */
    border-radius: 12px !important;
    padding: 20px 40px !important;
    position: relative;
    background: #ffffff !important;
    box-sizing: border-box !important;
    margin-top: 50px !important;
    margin-bottom: 30px !important;
    overflow: visible !important;
    
    /* Desktop 1440px+ */
    margin-left: -15% !important; 
    margin-right: -15% !important;
    width: 130% !important; 
    max-width: 1440px !important; 
}

div.card.main-card.top-choice {
    border: 3px solid red !important; /* Unique thick red border */
}

/* --- IMPROVED BADGE & TRIANGLE --- */
.card-number-main--container {
    position: absolute;
    top: -15px; /* Pulls badge slightly above the card top */
    left: -10px; /* Pulls badge slightly left of the card edge */
    z-index: 10;
}

.card-number {
    font-weight: bold;
    padding: 8px 18px;
    color: white !important;
    display: inline-block;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    border-radius: 4px 4px 4px 0; /* Rounds all corners except bottom-left */
}

/* Triangle: Now acts as the "fold" under the card border */
.card-number-main--triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0; /* Creates a small fold-in triangle */
    position: absolute;
    bottom: -10px; /* Places it exactly under the badge */
    left: 0;
}

/* --- COLOR LOGIC --- */

/* #1 Winner (Red) */

.top-choice .has-background-red {
    background-color: red !important;
}
.top-choice .card-number-main--triangle {
    border-color: transparent #990000 transparent transparent !important; /* Darker red for the fold effect */
}

/* #2 and beyond (Gray) */
.has-background-gray {
    background-color: #666666 !important;
}
.card-number-main--triangle {
    border-color: transparent #333333 transparent transparent; /* Darker gray for the fold effect */
}
/* --- THE FLEX ROW --- */
.product-flex-row {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100% !important;
}

/* --- INDIVIDUAL COLUMNS: Adjusted for better balance --- */
.flex-item {
    flex: 1;
}

/* 1. Image Side: Larger to see product */
.image-side { 
    flex: 0 0 22% !important; 
    max-width: 22% !important;
    text-align: center;
    padding: 5px !important;
    /* FIX: Force white background to hide gray default card boxes */
    background: #ffffff !important; 
}

/* 2. Pros/Cons Side: Tighter and smaller */
.pros-cons-side { 
    flex: 0 0 30% !important; 
    max-width: 30% !important;
    padding: 0 20px !important;
}

/* 3. Score Side: Thinner and centered */
.score-side { 
    flex: 0 0 18% !important; 
    max-width: 18% !important;
    text-align: center !important;
    border-left: 1px solid #eee !important;
    border-right: 1px solid #eee !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 140px !important; /* Forced narrow height */
}

/* 4. CTA Side: Takes remaining space */
.cta-side { 
    flex: 0 0 25% !important; 
    max-width: 25% !important;
    text-align: center;
    position: relative;
}

.cta-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 5px !important;
    padding-top: 15px !important; /* Extra room for the arrow offset */
}

/* --- THE RED POINTING DIALOG BOX (The Promo Bubble) --- */
div.main-card div.cta-side div.cta-promo-bubble {
    background-color: #ff0000 !important; /* Pure Red */
    color: #ffffff !important; /* Pure White Text */
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    position: relative !important; 
    margin-bottom: 15px !important; /* Space for the arrow */
    display: inline-block !important;
    width: auto !important;
    z-index: 5 !important;
}


/* THE ARROW (POINTING DOWN) */
div.main-card div.cta-side div.cta-promo-bubble::after {
    content: '' !important;
    position: absolute !important;
    bottom: -10px !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important; 
    height: 0 !important; 
    border-style: solid !important;
    border-width: 10px 10px 0 10px !important; 
    border-color: #ff0000 transparent transparent transparent !important; /* Match the red */
    display: block !important;
}

/* --- Visiting Site Button --- */
.cta-btn {
    background: #F0B217 !important; /* Keep original button color */
    color: #fff !important; 
    text-decoration: none !important;
    display: block !important;
    width: 100% !important; /* Fill container width */
    max-width: 200px; /* Cap so it doesn't get crazy on wide screens */
    padding: 12px !important; /* Professional standard padding */
    border-radius: 5px !important; /* Sleek rectangle */
    font-weight: 800 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    margin: 0 auto !important; /* Center the limited width */
    box-shadow: 0 3px 0 rgba(0,0,0,0.1) !important; /* Subtle bottom edge shadow */
    transition: transform 0.1s ease !important; /* Prep for hover */
}

/* Subtle Interaction effect (Optional) */
.cta-btn:active {
    transform: translateY(1px);
    box-shadow: none !important;
}

/* Tighter Text Scaling for CTA Elements */
.price-text { font-size: 1.6rem !important; font-weight: 800; color: #000; margin: 10px 0 2px 0 !important; line-height: 1.1 !important; }
.shipping-text { font-size: 0.7rem !important; color: #666; margin: 0 !important; line-height: 1 !important;}

/* --- ELEMENTS STYLING: Smaller and Compact --- */

.product-card-image {
    max-width: 100% !important;
    height: auto !important;
    max-height: 200px !important;
    display: block !important;
    margin: 0 auto 2px auto !important;
    object-fit: contain !important;
    background-color: transparent !important; 
}
.product-card-vendor { max-width: 80px !important; margin-top: 0 !important; }

/* Small & Compact Lists */
.title-blue, .title-orange {
    font-weight: bold;
    font-size: 0.9rem !important; /* Smaller header */
    margin: 0 !important;
}
.title-blue { color: #0d76ff !important; }
.title-orange { color: #ff460b !important; margin-top: 5px !important; } /* Tighter top margin */

.list-unstyled { 
    list-style: none !important; 
    padding: 0 !important; 
    margin: 0 !important; 
    width: 100% !important;
}

.list-unstyled li {
    font-size: 0.9rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
    padding-right: 0 !important;
}
.list-icon { width: 12px !important; height: 12px !important; } /* smaller icons */

/* Score Section: Compact */
.score-number { font-size: 3rem !important; font-weight: 900; color: #333; margin: 0 !important; line-height: 1 !important; }
.score-label { font-size: 0.7rem !important; color: #777; margin: 0 !important; }
.trust-img { width: 80px !important; margin: 0 auto !important; }
.verified-text { font-size: 0.7rem !important; color: #666; margin: 0 !important; line-height: 1.2 !important; }

/* CTA Section: Professional and Compact */
.price-text { font-size: 1.5rem !important; font-weight: 800; color: #000; margin: 5px 0 !important; }
.shipping-text { font-size: 0.75rem !important; color: #666; margin: 0 !important; }

.cta-btn {
    background: #F0B217 !important;
    color: #fff !important; /* changed to white for better contrast */
    text-decoration: none !important;
    display: block !important;
    padding: 10px !important; /* standard compact padding */
    border-radius: 5px !important; /* sleek rectangle button instead of pill */
    font-weight: 800 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    margin-top: 5px !important;
}

.card {
    background-color: #ffffff !important;
    box-shadow: none !important; /* Removes shadow if it's contributing to the "gray" look */
}

/* --- STATS BOX CONTAINER (The Wide Spread) --- */
.stats-box {
    margin-top: 40px;
    margin-bottom: 40px;
    background: #f9f9f9; /* Light contrast background */
    padding: 20px 10px;
    border-radius: 12px;
    
    /* Matches your 1440px spread logic */
    margin-left: -15% !important; 
    margin-right: -15% !important;
    width: 130% !important; 
    max-width: 1440px !important; 
}

.stats-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    max-width: 1200px; /* Keeps content from hitting the absolute edges */
    margin: 0 auto;
}

/* --- INDIVIDUAL STAT ITEM --- */
.stat-item {
    flex: 1;
    display: flex;
    flex-direction: row; /* Desktop: Icon on left, Text on right */
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.stat-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.stat-text {
    font-size: 0.9rem;
    line-height: 1.2 !important; /* Tight line height as requested */
    color: #333;
    margin: 0 !important;
}

.stat-text strong {
    font-size: 1.1rem;
    color: #000;
}

/* --- RECOMMENDATION WRAPPER --- */
.recommendation-wrapper {
    margin-top: 80px; /* Space from the list above */
    margin-bottom: 50px;
    position: relative;
    /* Matches your spread logic */
    margin-left: -15% !important; 
    margin-right: -15% !important;
    width: 130% !important; 
    max-width: 1440px !important;
}

/* --- THE HEADER BAR --- */
div.card.main-card.top-choice.with-green-border {
    border: 3px solid #58b77b !important; /* Unique thick red border */
}

.rec-header {
    background: #58b77b; /* Matching your "Top Choice" Red */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 12px 20px;
    border-radius: 12px 12px 0 0; /* Rounds only top corners */
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
}

.rec-title {
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    letter-spacing: 1px;
    margin: 0 !important;
    text-transform: uppercase;
    color: #fff !important;
    text-align: center;
}

/* ####################################################################################### */
/* ####################################################################################### */
/* ####################################################################################### */
/* ####################################################################################### */

/* --- ADJUSTING THE CARD BELOW IT --- */
.recommendation-wrapper .main-card.top-choice {
    margin-top: 0 !important; /* Removes the top margin so it sits flush with header */
    border-radius: 0 0 12px 12px !important; /* Flattens top corners to connect to header */
    border-top: none !important; /* Optional: hides the top border to make it look like one piece */
    
    /* Reset spread logic because the wrapper is already doing it */
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* --- CONTAINER --- */
.testimonial-section {
    /* Desktop 1440px+ */
    margin-left: -15% !important; 
    margin-right: -15% !important;
    width: 130% !important; 
    max-width: 1440px !important;
}

.testimonial-container {
    display: flex;
    flex-direction: row; /* Desktop: 1 row */
    gap: 25px;
    justify-content: space-between;
}

/* --- CARD LAYOUT --- */
.testimonial-card {
    flex: 1; /* Equal width columns */
    display: flex;
    flex-direction: column; /* Stack elements internally */
    background: #fff;
    text-align: left;
    border: solid #e4e4e456;
    border-radius: 10px;
    padding: 10px 20px;
}

.review-img {
    width: 100%;
    max-width: 300px; /* Optional: Adjust this if you don't want the image too large on desktop */
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
    
    /* --- THE FIX --- */
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.review-heading {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.3;
}

.review-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.star-rating {
    width: 90px;
}

.verified-badge {
    color: #28a745;
    font-weight: bold;
    font-size: 0.8rem;
}

.review-body {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #444;
    margin-bottom: 15px;
    flex-grow: 1; /* Ensures buttons/authors align even if text length varies */
}

.review-author {
    text-align: right;
    color: #f0ad4e;
    font-weight: bold;
    font-size: 0.9rem;
}

/* --- Target only the title inside this section --- */
#final-offer .title-blue {
    font-size: 2rem !important; /* Significantly bigger */
    margin-top: 25px !important;
    margin-bottom: 15px !important;
}

/* --- Target only the list items inside this section --- */
#final-offer .list-unstyled li {
    font-size: 1.2rem !important; /* Larger text for readability */
    justify-content: left; 
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}

/* --- Scale the icons to match the bigger text --- */
#final-offer .list-icon {
    width: 18px !important;
    height: 18px !important;
}

/* --- Centering the Image --- */
.final-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.final-promo-img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    /* max-width: 600px;  Add this if you want to cap the image size on desktop */
}

.final-cta-wrapper {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 50px;
}

.final-cta-btn {
    display: inline-block;
    background-color: #f0b217; /* Bright yellow/gold to grab attention */
    color: #000;
    font-size: 1.4rem;
    font-weight: 800;
    padding: 20px 40px;
    text-decoration: none;
    border-radius: 50px; /* Rounded pill shape */
    box-shadow: 0 4px 15px rgba(240, 178, 23, 0.4);
    transition: all 0.3s ease;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
}

.final-cta-btn:hover {
    background-color: #d9a114; /* Slightly darker on hover */
    transform: translateY(-3px); /* Lifts up slightly */
    box-shadow: 0 6px 20px rgba(240, 178, 23, 0.6);
    color: #000;
    text-decoration: none;
}

.author-bio-section {
    margin-top: 60px;
    padding-bottom: 40px;
}

.bio-divider {
    border: 0;
    border-top: 1px solid #e0e0e0;
    margin-bottom: 30px;
}

.author-flex {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fdfdfd;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
}

.bio-img {
    width: 80px;
    height: 80px;
    border-radius: 50%; /* Circular portrait */
    object-fit: cover;
    background: #eee; /* Placeholder color */
}

.author-name {
    font-size: 1rem;
    margin-bottom: 5px !important;
    color: #333;
}

.author-description {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #666;
    font-style: italic;
    margin: 0 !important;
}

.rating-team-box {
    background-color: #f8f9fa; /* Light grey background to separate from body text */
    padding: 25px;
    border-radius: 10px;
    border-left: 4px solid #0d76ff; /* A blue "Authority" accent bar */
    margin: 30px 0;
}

.rating-team-title {
    font-size: 1.1rem;
    margin-bottom: 15px !important;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rating-team-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rating-team-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #444;
}

.team-icon {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Logo Container Styles */
.logo {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

/* Image Specific Styles */
.logo-img {
    height: auto !important; /* Adjust this height to fit your nav bar */
    width: 200px !important;   /* Keeps the aspect ratio intact */
    display: block !important;
}

/* Optional: Adjust nav-inner to ensure vertical centering */
.nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* --- POPUP 2 SYSTEM --- */
#popup2 {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex !important;
    visibility: hidden !important; /* Start hidden */
    opacity: 0 !important;         /* Start transparent */
    pointer-events: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100000 !important;    /* One step above popup1 */
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* Active State */
#popup2.is-active {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
}

#popup2 .overlay {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(8, 10, 15, 0.9) !important; /* Slightly darker/bluer tint */
}

#popup2 .inner {
    position: relative !important;
    background: white !important;
    width: 95% !important;
    max-width: 650px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 60px rgba(0,0,0,0.6) !important;
}

#popup2 .overlay-header {
    background-color: #112a47 !important;
    text-align: center !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 10px !important;
    text-transform: uppercase;
    letter-spacing: 1px !important;
}

#popup2 .row {
    display: flex !important;
    align-items: stretch !important;
    margin: 0 !important;
}

#popup2 .col-md-6:first-child {
    flex: 0 0 40% !important;
    max-width: 40% !important;
    padding: 0 !important; /* Edge to edge image */
    background: #f8f9fa;
}

#popup2 .col-md-6:last-child {
    flex: 0 0 60% !important;
    max-width: 60% !important;
    padding: 30px !important;
}

#popup2 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Better for newsletter look */
}

#popup2 h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 24px !important;
    color: #112a47 !important;
    margin-bottom: 10px !important;
    text-transform: uppercase;
}

#popup2 p {
    color: #555 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
}

#popup2 .button {
    background: #e8390a !important; /* Accent red for CTA */
    color: white !important;
    display: block !important;
    padding: 14px !important;
    width: 100% !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-align: center !important;
    border-radius: 4px !important;
    border: none !important;
    cursor: pointer !important;
}

#popup2 .hide-overlay {
    color: #999 !important;
    font-size: 11px !important;
    text-decoration: none !important;
    display: block !important;
    margin-top: 15px !important;
    text-align: center !important;
}

/* X Close Button Custom Style Rules */
/* X Close Button Custom Style Rules */
#popup2 .modal-close-x {
    display: none !important; /* CHANGED: Hide it by default */
    position: absolute !important;
    top: 4px !important;
    right: 12px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    z-index: 101000 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: color 0.2s ease-in-out !important;
}

/* Subtle Hover Effect */
#popup2 .modal-close-x:hover {
    color: #ffffff !important; /* Full sharp white text highlight on hover */
}

#popup2 .hide-overlay:hover { text-decoration: underline !important; }

/* Mobile */
@media (max-width: 768px) {
    #popup2 .row { 
        flex-direction: column !important; 
    }
    
    #popup2 .col-md-6:first-child, 
    #popup2 .col-md-6:last-child {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    #popup2 img { 
        height: 180px !important; 
        width: 100% !important;
        
        /* 1. Ensure cover is active */
        object-fit: cover !important; 
        
        /* 2. Anchor the "camera" to the top of the image */
        object-position: top center !important; 
    }
}

/* --- 1. LARGE TABLET FIX (769px - 1000px) --- */
/* (Kept your working logic) */
@media screen and (max-width: 1000px) {
    .main-card {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 98% !important; 
        padding: 20px 15px !important;
    }
    
    .product-flex-row { gap: 10px !important; }

    .list-unstyled li {
        font-size: 0.9rem !important;
        white-space: normal !important; 
    }
    
    .score-side {
        flex: 0 0 15% !important;
        max-width: 15% !important;
    }

    /* Shrink the badge container position slightly */
    .card-number-main--container {
        top: -12px !important;
        left: -5px !important;
    }

    /* Shrink the main badge padding and font */
    .card-number {
        padding: 5px 12px !important; /* Smaller padding */
        font-size: 0.9rem !important;  /* Smaller "#1 KATORI" */
    }

    /* Shrink the subtext even further */
    .tested-pick-subtext {
        font-size: 0.55rem !important;
        margin-top: 0px !important;
        line-height: 1 !important;
    }

    /* Adjust triangle to match the smaller badge */
    .card-number-main--triangle {
        border-width: 0 8px 8px 0 !important; /* Smaller "fold" */
        bottom: -8px !important;
    }

    .stats-box {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important; /* Resets width for mobile screens */
        padding: 15px 5px;
    }

    .stats-container {
        gap: 10px;
    }

    .stat-item {
        flex-direction: column; /* Mobile: Icon on TOP, Text on BOTTOM */
        text-align: center;
    }

    .stat-icon {
        width: 30px; /* Slightly smaller icons for mobile */
        height: 30px;
    }

    .stat-text {
        font-size: 0.75rem; /* Tighter text for small screens */
    }

    .recommendation-wrapper {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }

    .rec-title {
        font-size: 1rem !important;
    }

    .testimonial-section {
        /* Reduce the spread so it fits tablet screens better */
        margin-left: -5% !important; 
        margin-right: -5% !important;
        width: 110% !important; 
        max-width: 100vw !important; /* Prevents it from ever going wider than the glass */
        overflow: hidden; /* Safety net for any stray pixels */
    }

    .testimonial-container {
        gap: 12px !important; /* Tighter gap to keep 3 columns comfortable */
        padding: 0 10px;
    }

    .testimonial-card {
        padding: 10px 12px !important; /* Smaller internal padding to save space */
    }

    /* Scaling fonts for the tight 3-column tablet view */
    .review-heading { 
        font-size: 0.9rem !important; 
        min-height: 40px; /* Helps keep headings aligned if one is longer */
    }

    .review-body { 
        font-size: 1rem !important; 
        line-height: 1.4 !important;
    }

    .verified-badge {
        font-size: 0.7rem !important;
    }

    .star-rating {
        width: 70px !important; /* Scale down stars to fit narrow columns */
    }
}

/* --- 2. THE NEW 2-COLUMN MOBILE LOOK (501px - 768px) --- */
/* This breakpoint stacks them into 2 columns as requested */
@media screen and (max-width: 768px) and (min-width: 501px) {
    .main-card {
        padding: 50px 20px 20px 20px !important;
    }

    .product-flex-row {
        flex-wrap: wrap !important;
        justify-content: space-between !important; /* Adjusted for better spacing */
        gap: 20px 10px !important;
    }

    /* --- THE IMAGE SIZE FIX (Column Widths) --- */
    /* Give the image significantly more room (e.g., 60%) */
    .image-side {
        flex: 0 0 60% !important; 
        max-width: 60% !important;
        border: none !important;
        order: 1 !important;
        display: flex !important; /* Ensure content centers properly */
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Shrink the text side (e.g., 35%) to accommodate the larger image */
    .pros-cons-side {
        flex: 0 0 35% !important; 
        max-width: 35% !important;
        padding: 0 !important;
        border: none !important;
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; /* Center text vertically with the larger image */
    }

    /* --- THE IMAGE SIZE FIX (Image Constraints) --- */
    .product-card-image { 
        width: 100% !important; /* Force the image to use its 60% container width */
        max-width: 280px !important; /* Increased from 120px */
        height: auto !important;
        max-height: 200px !important; /* Allow more height */
        object-fit: contain !important;
        margin-bottom: 10px !important;
    }

    /* Scaling vendor logo to match new image size */
    .product-card-vendor { max-width: 100px !important; }

    /* --- 2nd ROW: Keeping Score and CTA roughly balanced --- */
    .score-side {
        flex: 0 0 48% !important; 
        max-width: 48% !important;
        border: none !important;
        height: auto !important;
        order: 3 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .cta-side {
        flex: 0 0 48% !important; 
        max-width: 48% !important;
        order: 4 !important;
    }

    /* Elements tweaks for readability at 768px */
    .title-blue { font-size: 1rem !important; margin-bottom: 5px !important; }
    .list-unstyled li { 
        font-size: 0.9rem !important; /* Slightly larger text for mobile */
        white-space: normal !important; 
    }
    .score-number { font-size: 2.5rem !important; } /* Sightly larger score */
    .price-text { font-size: 1.2rem !important; margin: 5px 0 !important; }

    .testimonial-section {
        /* If you want it flush with the screen edges: */
        margin-left: -5 !important;
        margin-right: -5 !important;
        width: 110% !important;
        padding: 0 10px; /* Small gap so cards don't touch the glass */
    }

    .review-heading { font-size: 1rem; }
    .review-body { font-size: 1rem; }
    .testimonial-container { gap: 15px; }
}

@media screen and (max-width: 730px) {
    .testimonial-section {
        /* Reset the "Wide" Desktop logic */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important; 
        max-width: 100% !important;
        padding: 0 15px; /* Add some side breathing room for the cards */
    }

    .testimonial-container {
        flex-direction: column; /* Stack cards vertically */
        gap: 30px; /* Space between the stacked cards */
        width: 100%;
    }
    
    .testimonial-card {
        width: 100% !important; /* Force card to fill mobile screen width */
        box-sizing: border-box; /* Ensures padding doesn't add to width */
        align-items: flex-start; /* Keep text left-aligned even if layout is stacked */
    }

    .review-heading { 
        font-size: 1.1rem; 
        text-align: left; /* Ensures title stays clean */
    }

    .review-body { 
        font-size: 0.95rem; 
        text-align: left; 
    }

    .author-flex {
        flex-direction: column;
        text-align: center;
    }
    
    .author-image {
        margin-bottom: 10px;
    }

    .rating-team-box {
        padding: 15px;
    }
    .rating-team-list li {
        font-size: 0.9rem;
    }
}


/* --- 3. THE OLD VERTICAL STACK (500px and below) --- */
/* This is your old 768px vertical stack, applied only to very small screens */
@media screen and (max-width: 500px) {
    .main-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important; 
        padding: 45px 15px 15px 15px !important;
    }

    .list-unstyled li { 
        font-size: 1rem !important; /* Slightly larger text for mobile */
        white-space: normal !important; 
    }

    .product-flex-row {
        flex-direction: column !important; /* Simple vertical stack */
        gap: 25px !important;
    }

    .flex-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        border: none !important;
        padding: 0 !important;
    }

    .score-side {
        height: auto !important;
        padding: 20px 0 !important;
        border-top: 1px solid #eee !important;
        border-bottom: 1px solid #eee !important;
    }

    .product-card-image {
        max-width: 40% !important;
    }

    .product-card-image.main-product-image {
        max-width: 65% !important; /* Adjust this percentage to make it as large as you want */
        height: auto !important;
        margin: 0 auto 20px auto; /* Optional: Centers it if it's not full width */
        display: block;
    }

    .stats-box {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important; /* Resets width for mobile screens */
        padding: 10px 4px;
    }

    .stats-container {
        gap: 5px;
    }

    .stat-item {
        flex-direction: column; /* Mobile: Icon on TOP, Text on BOTTOM */
        text-align: center;
    }

    .stat-icon {
        width: 30px; /* Slightly smaller icons for mobile */
        height: 30px;
    }

    .stat-text {
        font-size: 0.1rem; /* Tighter text for small screens */
    }

    .rec-title {
        font-size: 0.8rem !important;
    }

    .review-author{
        text-align: right;
    }

    
}