/*
 * 2007-2024 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This file is part of the module.
 *
 * @author    Gemini
 * @copyright 2007-2024 PrestaShop SA
 * @license   https://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 */
#ps-promo-banner{
    margin-bottom: 15px;
}
/* Main Banner Container */
.banner-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Strict Height Constraint: Updated to 42px */
    max-height: 42px;
    height: 42px;
    overflow: hidden;

    text-align: center;
    text-decoration: none;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Smooth transition for background changes */
    transition: all 0.3s ease;
    cursor: pointer;
}

.banner-container:hover {
    opacity: 0.95;
}

/* Content Positioning */
.banner-content {
    position: relative;
    z-index: 2; /* Above the overlay */
    padding: 0 20px;
    display: flex;
    /* Ensured content flows in a row */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Helps text readability */
    height: 100%;
    width: 100%; /* Ensure content fills width to better center on small devices */
}

/* Text Styling */
.banner-text {
    /* FIX: Use flexbox on the <p> element to align its children (text + CTA) horizontally */
    display: flex;
    align-items: center; /* Vertical center alignment */
    gap: 10px; /* Space between the text and the CTA button */

    /* Adjusted font size for better fit in the 42px height */
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    /* Removed line-height for better flex alignment */
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Call to Action (CTA) Button/Span */
.banner-cta {
    display: inline-block;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid;
    border-radius: 3px;
    transition: background-color 0.2s, color 0.2s;
    /* Ensure no vertical margin causes misalignment */
    margin: 0;
}

/* Overlay for better text contrast (optional but recommended) */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* Subtle dark overlay */
    z-index: 1;
}

/* Responsive Adjustments for Mobile */
@media (max-width: 768px) {
    .banner-container {
        /* Adjusted for mobile to be even tighter */
        height: 35px;
        max-height: 35px;
    }
    .banner-text {
        font-size: 0.9rem; /* Adjusted for tighter space */
    }
    .banner-cta {
        /* The CTA button might disappear or overlap at 35px height,
           so we reduce size and padding */
        font-size: 0.6rem;
        padding: 1px 4px;
        /* Removed margin-top, as flexbox handles vertical alignment now */
        margin: 0;
    }
}
#product .h1.page-title {
    font-size: 34px;
}
.product-info-row{
    display: flex; /* This creates the two-column layout */
    gap: 2rem; /* Adds space between the columns */
}
.product-info-row .col-product-image{
    flex: 1; /* This makes the left column take up one part of the available space */
    position: sticky; /* This is the key property */
    top: 0; /* Sticking to the top of the viewport */
    height: 100vh; /* Make the fixed column the full height of the viewport */
    display: flex; /* Use flexbox to align images if needed */
    flex-direction: column;
    justify-content: center; /* Center images vertically */
}
.product-info-row .col-product-info{
    flex: 1; /* This makes the right column also take one part of the available space */
    overflow-y: auto; /* This enables vertical scrolling on the right column if content overflows */
}
/* Optional: Add media queries for mobile responsiveness */
@media (max-width: 768px) {
    .product-info-row {
        flex-direction: column; /* Stacks the columns on small screens */
    }

    .product-info-row .col-product-image {
        position: static; /* Remove sticky position on mobile */
        height: auto;
    }
}