/* General Body Styles */
body {
    font-family: 'Poppins', sans-serif; /* Or specific Philips font if known */
    margin: 0;
    background-color: #f8f8f8; /* Light grey background */
    color: #17191d; /* Default text color */
    font-size: 16px;
    line-height: 1.6;
}

/* Top Bar Styles */
.top-bar {
    background-color: #003366; /* Dark blue */
    color: #ffffff;
    padding: 8px 0;
    font-size: 0.75rem; /* 12px */
}

.top-bar-container {
    max-width: 1440px; /* Adjust max-width as needed */
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Header Styles */
header {
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    padding: 0 16px; /* Padding similar to example */
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px; /* Height similar to example */
}

.menu-icon {
    font-size: 1.8rem; /* Adjust size if needed */
    cursor: pointer;
    display: block; /* Show on mobile */
    flex-basis: auto; /* Adjust flex basis if needed */
}

/* Side Menu Styles */
.side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px; /* Adjust width as needed */
    height: 100vh;
    background-color: #ffffff; /* White background */
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1100; /* Ensure it's above header */
    padding-top: 50px; /* Space for close button */
}

.side-menu.active {
    transform: translateX(0);
}

.close-menu-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    color: #333;
    cursor: pointer;
}

.side-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-menu li {
    border-bottom: 1px solid #eee;
}

.side-menu li a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.side-menu li a:hover {
    background-color: #f0f0f0;
}

/* Overlay for closing menu when clicking outside */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1050; /* Below menu, above content */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Prevent body scroll when menu is open */
body.menu-open {
    overflow: hidden;
}

.logo-container {
    text-align: center;
    flex-grow: 1; /* Allow logo container to take up space */
    /* Adjust margins if needed to center properly */
}

.logo {
    font-size: 1.8rem; /* Adjust size */
    font-weight: 600; /* Bold */
    color: #0052cc; /* Philips blue */
    letter-spacing: 1px;
    margin: 0;
    line-height: 1;
    display: inline-block; /* Ensure text-align works */
}

.logo-subtitle {
    font-size: 0.7rem; /* Smaller text */
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.header-icons {
    display: flex;
    gap: 20px; /* Space between icons */
    flex-basis: 50px; /* Give it a fixed basis or width, adjust as needed */
    justify-content: flex-end; /* Align icons to the right */
    flex-shrink: 0;
}

.header-icons .icon {
    font-size: 1.2rem; /* Adjust icon size */
    cursor: pointer;
}

/* Main Navigation (Simplified - adjust as needed) */
.main-nav {
    background-color: #f0f0f0; /* Light grey or white */
    padding: 10px 0;
    display: none; /* Hidden for now, implement dropdown/off-canvas later */
    position: fixed;
    left: -100%;
    top: 0;
    width: 300px;
    height: 100vh;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    transition: left 0.3s ease;
}

.main-nav.active {
    left: 0;
}

.main-nav ul {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.main-nav ul li {
    margin-bottom: 15px;
}

.main-nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
}

/* Main Content Area */
main {
    padding: 30px 0;
    max-width: 1440px;
    margin: 0 auto;
}

.product-page-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Product Main Content */
.product-main-content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 40px; /* Space between columns */
    margin-bottom: 40px;
}

/* Product Images Section (Left) */
.product-images {
    display: flex;
    flex-direction: row; /* Main image and thumbnails side-by-side */
    gap: 15px;
}

.thumbnail-gallery.vertical {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 80px; /* Adjust width */
    order: -1; /* Show thumbnails first (left) */
}

.thumbnail-gallery img {
    width: 100%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.thumbnail-gallery img.active,
.thumbnail-gallery img:hover {
    border-color: #0052cc; /* Highlight active/hovered thumbnail */
}

.main-image-container {
    position: relative;
    flex-grow: 1; /* Take remaining space */
}

.main-image-container1 {
    position: relative;
    flex-grow: 1; /* Take remaining space */
}

.main-image img {
    width: 100%;
    display: block;
    border: 1px solid #eee; /* Optional border */
}

.image-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    color: #333;
    font-size: 1.5rem;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.image-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

.image-nav-btn.prev {
    left: 10px;
}

.image-nav-btn.next {
    right: 10px;
}

/* Product Introduction Section (Right) */
.product-intro {
    padding: 24px 16px;
}

.breadcrumb {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 15px;
    padding: 16px;
    background-color: #f5f6f7; /* Light gray background */
}

.breadcrumb a {
    color: #0052cc;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.product-code {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 5px;
    font-weight: normal;
}

.product-intro h1 {
    font-size: 1.8rem; /* Adjust as needed */
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.3;
}

.price-section {
    margin-bottom: 25px;
}

.list-price {
    font-size: 0.9rem;
    color: #777;
    #text-decoration: line-through; /* Strikethrough for list price */
    margin: 0 0 5px 0;
}

.list-price .info-icon {
    display: inline-block;
    border: 1px solid #777;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    text-align: center;
    line-height: 14px;
    font-size: 0.7rem;
    cursor: help;
    margin-left: 5px;
}

.current-price {
    font-size: 1.6rem; /* Larger current price */
    font-weight: 700; /* Bold */
    color: #17191d;
    margin: 0;
}

.add-to-cart-section {
    margin-bottom: 30px;
}

.cta-primary.add-to-cart-btn {
    background-color: #0052cc; /* Philips blue */
    color: #ffffff;
    border: none;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 25px; /* Increased border-radius for more rounded corners */
    width: 100%; /* Make button full width of container */
    text-align: center;
    transition: background-color 0.3s ease;
}

.cta-primary.add-to-cart-btn:hover {
    background-color: #003d99; /* Darker blue on hover */
}

.additional-info {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between info points */
}

.info-point {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #555;
}

.info-point .icon {
    font-size: 1.2rem; /* Adjust icon size if using text placeholders */
    width: 20px; /* Ensure consistent alignment */
    text-align: center;
}

/* Product Description Section */
.product-description {
    max-width: 800px; /* Limit width for readability */
    margin: 0 auto 40px auto; /* Center and add bottom margin */
    padding: 0 20px;
    font-size: 1rem;
    color: #333;
}

/* Accordion Styles */
.product-details-accordion {
    padding: 32px 16px;
    border-top: 1px solid #e0e2e6;
}

.accordion-item {
    border-bottom: 1px solid #e0e2e6;
}

.accordion-header {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 16px 0;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-header::after {
    content: '+'; /* Simple indicator */
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-header::after {
    transform: rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0 16px;
    font-size: 0.95rem;
    color: #333;
}

.accordion-item.active .accordion-content {
    max-height: 500px; /* Adjust as needed */
    padding: 16px;
}

.accordion-content ul {
    padding-left: 20px;
    list-style: disc;
}

.accordion-content ul li {
    margin-bottom: 8px;
}

/* Related Products Carousel */
.related-products {
    padding: 40px 16px;
    background-color: #fff; /* Changed background to white */
    border-top: 1px solid #e0e2e6; /* Add border if needed */
}

/* New header for title and nav buttons */
.related-products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    max-width: 1200px; /* Match carousel container width */
    margin-left: auto;
    margin-right: auto;
}

.related-products h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0; /* Removed bottom margin */
    text-align: left; /* Align title left */
}

.carousel-nav-buttons {
    display: flex;
    gap: 8px;
}

/* Style for nav buttons in the header */
.carousel-nav-buttons .carousel-btn {
    position: static; /* Override absolute positioning */
    transform: none; /* Override transform */
    background-color: #f0f0f0; /* Light gray background */
    border: none; /* Remove border */
    border-radius: 50%;
    width: 36px; /* Adjust size */
    height: 36px; /* Adjust size */
    font-size: 1.2rem; /* Adjust arrow size */
    color: #555; /* Darker arrow color */
    cursor: pointer;
    display: flex; /* Center icon */
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.carousel-nav-buttons .carousel-btn:hover {
    background-color: #e0e0e0;
}

.carousel-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.carousel-content {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 20px;
    padding: 10px 0; /* Add some padding top/bottom */
    scrollbar-width: none; /* Firefox */
}

.carousel-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Style for the product box link wrapper */
.product-box-link {
    display: block; /* Make the link behave like a block element */
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit text color from parent */
    flex: 0 0 auto; /* Apply flex properties from product-box if needed */
    #min-width: 250px; /* Apply min-width from product-box if needed */
}

.product-box-link:hover {
    /* Optional: Add hover effect to the link wrapper if desired */
    /* e.g., box-shadow or slight background change */
}

/* Adjust product-box styles if they were moved to the link */
.product-box {
    background-color: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    height: 100%; /* Make the inner box fill the anchor tag */
}

.product-box:hover {
    box-shadow: none; /* Removed hover shadow */
}

.image-container {
    height: 220px; /* Adjust height */
    display: flex;
    align-items: center;
    justify-content: center;
    #padding: 5px;
    background-color: #f7f7f7; /* Light gray background for image */
    margin-bottom: 1px; /* Space below image */
}

.image-container1 {
    #height: 220px; /* Adjust height */
    display: flex;
    align-items: center;
    justify-content: center;
    #padding: 5px;
    #background-color: #f7f7f7; /* Light gray background for image */
    #margin-bottom: 1px; /* Space below image */
}

.image-container img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.image-container1 img {
    height: 225px;
    width: 400px;
    object-fit: cover;
}

.product-info {
    padding: 15px; /* Existing padding */
    flex-grow: 1; /* Ensure this container takes up available space */
    position: relative;
    display: flex; /* Make this a flex container */
    flex-direction: column; /* Stack children vertically */
    min-height: 180px; /* Adjust minimum height as needed */
    text-align: left; /* Ensure all text aligns left */
}

.product-info h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    flex-grow: 1; /* Allow title to grow */
}

.product-info .code {
    font-size: 0.8rem;
    color: #798291;
    margin-bottom: 10px;
}

.product-info .features {
    list-style: disc; /* Restore disc bullets */
    padding-left: 20px; /* Add padding for bullets */
    margin-left: 0; /* Keep margin at 0 */
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 15px;
    flex-grow: 1; /* Allow features list to grow */
}

.product-info .features li {
    padding-left: 0; /* Keep list item padding at 0 */
    margin-bottom: 5px; /* Add some space between items */
}

.product-info .rrp {
    font-size: 0.8rem;
    color: #798291;
    margin-bottom: 4px;
    margin-top: auto; /* Push RRP towards the bottom */
    #text-decoration: line-through; /* Add strikethrough */
}

.product-info .price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #17191d;
    margin-top: 0; /* Reset margin-top if RRP is present */
    padding-bottom: 0;
    /* If RRP is not present, this needs margin-top: auto */
}

/* Add a rule specifically for price when RRP is NOT present */
.product-info .rrp + .price {
    margin-top: 0; /* Price directly follows RRP, no auto margin needed */
}

.product-info > .price:not(.rrp + .price) {
    margin-top: auto; /* Push price to bottom if it's the last element or only RRP is missing */
}

/* Footer Styles */
footer {
    background-color: #0a2457; /* Dark blue from example */
    color: #aeb4bd; /* Light gray text */
    padding: 40px 16px 24px;
    font-size: 0.875rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.footer-section h4 {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: #aeb4bd;
}

.footer-section ul li a:hover {
    color: #fff;
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.social-icons a {
    color: #aeb4bd;
    font-size: 1.2rem; /* Adjust as needed */
}

.social-icons a:hover {
    color: #fff;
}

.region-selector span {
    cursor: pointer;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 24px;
    text-align: center;
}

.footer-bottom p {
    margin-bottom: 10px;
}

.footer-bottom ul {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-bottom ul li a {
    color: #aeb4bd;
}

.footer-bottom ul li a:hover {
    color: #fff;
}

/* More Articles Section Styles */
.more-articles {
    padding: 40px 16px;
    background-color: #ffffff; /* White background */
    border-top: 1px solid #e0e2e6;
    max-width: 1440px; /* Match other sections */
    margin: 40px auto 0 auto; /* Add top margin */
}

.more-articles-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.more-articles h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.more-articles .see-all {
    color: #0052cc; /* Philips blue */
    text-decoration: none;
    font-weight: 600;
}

.more-articles .see-all:hover {
    text-decoration: underline;
}

.articles-container {
    display: flex; /* Use flexbox for horizontal layout */
    overflow-x: auto; /* Enable horizontal scrolling */
    scroll-behavior: smooth;
    padding: 10px 0; /* Add some padding */
    scrollbar-width: none; /* Hide scrollbar Firefox */
    gap: 20px;
}

.articles-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome, Safari, Opera */
}

.article-card {
    position: relative;
    border-radius: 0px; /* Optional: slightly rounded corners for the card itself */
    overflow: hidden; /* Ensure content stays within bounds */
    background-color: #000; /* Fallback background */
    max-height: 225px;
    min-width: 400px; /* Set a minimum width for flex items */
    #flex: 0 0 ; /* Prevent flex items from growing or shrinking */
}

.article-card img {
    display: block;
    width: 100%;
    height: 250px; /* Adjust height as needed */
    object-fit: cover; /* Cover the area, might crop */
    opacity: 0.7; /* Darken the image slightly */
    transition: opacity 0.3s ease;
}

.article-card:hover img {
    opacity: 0.5; /* Darken more on hover */
}

.article-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    color: #ffffff;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); /* Gradient overlay */
}

.article-content h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.read-article-btn {
    background-color: #ffffff;
    color: #17191d; /* Dark text color */
    border: none;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 20px; /* Rounded corners */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.read-article-btn:hover {
    background-color: #f0f0f0; /* Slightly darker on hover */
}

/* Styles for Recipe Box in Carousel */
.recipe-box {
    background-color: rgb(243, 237, 237);
    max-width: 400px; /* Adjust width as needed */
    min-height: 225px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    #border: 1px solid #e0e2e6; /* Add border like in the image */
    #border-radius: 4px; /* Optional: slight rounding */
}

.recipe-info {
    padding: 15px;
    text-align: left;
}

.recipe-info .category {
    font-size: 0.75rem; /* Small text for category */
    color: #1454cc; /* Grey color */
    text-transform: uppercase;
    margin: 0 0 5px 0; /* Space below category */
    font-weight: 600;
}

.recipe-info h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0; /* Remove default margins */
    color: #17191d;
}

/* Adjustments for the header of the similar recipes section */
.similar-recipes-header h2 {
    /* Inherits styles from .related-products h2, adjust if needed */
}

/* Ensure carousel content uses the new class */
.recipes-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 20px;
    padding: 10px 0;
    scrollbar-width: none; /* Firefox */
}

.recipes-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Video Instruction Section Styles */
.video-instruction-container {
    margin-top: 60px; /* Space above the video section */
    padding-top: 40px; /* Space between buttons and video heading */
    border-top: 1px solid #eee; /* Optional separator line */
    max-width: 800px; /* Limit width for better focus */
    margin-left: auto;
    margin-right: auto;
}

.video-instruction-container h2 {
    margin-bottom: 20px;
    font-size: 1.8rem;
    color: #333;
    text-align: center;
}

.video-instruction-container video {
    display: block;
    margin: 0 auto; /* Center the video element */
    max-width: 100%; /* Ensure video is responsive */
    height: auto;
    background-color: #000; /* Black background while loading */
    border-radius: 8px; /* Optional rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow */
}

/* Responsive adjustments for video section */
@media (max-width: 768px) {
    .video-instruction-container {
        margin-top: 40px;
        padding-top: 30px;
    }
    .video-instruction-container h2 {
        font-size: 1.5rem;
    }
}

/* Responsive Adjustments for Articles */
@media (max-width: 768px) {
    .more-articles {
        padding: 30px 16px;
    }
    .articles-container {
        gap: 15px;
    }
    .article-card img {
        height: 200px;
    }
    .article-content h3 {
        font-size: 1.1rem;
    }
    .read-article-btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .articles-container {
        flex-direction: column; /* Stack on very small screens */
    }
}

/* Media Queries for Responsiveness */

/* Tablet */
@media (min-width: 768px) {
    header {
        padding: 0 24px;
    }
    .menu-icon {
        display: none; /* Hide burger on tablet+ */
    }
    .main-nav {
        display: block; /* Show nav */
        position: static;
        width: auto;
        height: auto;
        background: none;
        box-shadow: none;
        padding: 0;
        transition: none;
    }
    .main-nav ul {
        display: flex;
        gap: 20px;
    }
    .main-nav ul li {
        margin-bottom: 0;
    }
    .header-container {
        /* Adjust layout if needed, e.g., space for nav */
    }
    .product-main-content {
        grid-template-columns: 1fr 1fr; /* 2 columns for image and intro */
        gap: 20px; /* Gap between columns */
        padding: 24px;
    }
    .product-images {
        padding: 0;
        background: none;
        /* Potentially make images sticky */
    }
    .product-intro {
        padding: 0;
        /* Potentially make intro sticky */
    }
    .product-details-accordion {
        padding: 40px 24px;
    }
    .related-products {
        padding: 60px 24px;
    }
    /* Ensure header buttons are visible if hidden by default */
    .carousel-nav-buttons {
        display: flex;
    }
    footer {
        padding: 60px 24px 30px;
    }
}

/* Desktop */
@media (min-width: 992px) {
    header {
        padding: 0 32px;
    }
    .header-container {
        height: 74px;
    }
    .product-main-content {
        grid-template-columns: 57% 43%; /* Example ratio */
        gap: 32px;
        padding: 32px;
    }
    .product-intro h1 {
        font-size: 2rem;
    }
    .product-details-accordion {
        padding: 60px 32px;
    }
    .related-products {
        padding: 80px 32px;
    }
    .footer {
        padding: 80px 32px 40px;
    }
}

/* Larger Desktop */
@media (min-width: 1200px) {
    .product-main-content,
    .product-details-accordion,
    .related-products,
    .footer-container,
    .header-container {
        max-width: 1140px; /* Max width from example */
        margin-left: auto;
        margin-right: auto;
    }
    .breadcrumb {
        max-width: 1140px;
        margin: 0 auto;
    }
    .related-products-header,
    .carousel-container {
        max-width: 1140px; /* Align with other content */
    }
}

/* Very Large Desktop */
@media (min-width: 1600px) {
    .product-main-content,
    .product-details-accordion,
    .related-products,
    .footer-container,
    .header-container {
        max-width: 1440px; /* Wider max width */
    }
    .breadcrumb {
        max-width: 1440px;
    }
    .related-products-header,
    .carousel-container {
        max-width: 1440px; /* Align with other content */
    }
}

/* Responsive Adjustments (Example) */
@media (max-width: 992px) {
    .product-main-content {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
    }
    .product-images {
        flex-direction: column; /* Stack main image and thumbnails */
    }
    .thumbnail-gallery.vertical {
        flex-direction: row; /* Horizontal thumbnails */
        width: 100%;
        order: 1; /* Show thumbnails below main image */
        justify-content: center; /* Center thumbnails */
    }
    .thumbnail-gallery img {
        width: 60px; /* Adjust thumbnail size */
        height: auto;
    }
    .main-image-container {
        order: 0;
    }
}

@media (max-width: 768px) {
    .header-container {
        /* Adjust header for smaller screens, maybe hide nav items */
    }
    .top-bar-container {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }
    .product-intro h1 {
        font-size: 1.5rem;
    }
    .current-price {
        font-size: 1.4rem;
    }
    .cta-primary.add-to-cart-btn {
        padding: 12px 25px;
    }
}

/* Recipe Page Specific Styles */
.recipe-title {
    text-align: center;
    font-size: 4.1em;
    margin-bottom: 0.2em; /* Reduce space below main title */
}

.recipe-subtitle {
    text-align: center;
    margin-top: 0; /* Remove space above subtitle */
    font-size: 1.1em; /* Slightly larger subtitle */
    color: #555; /* Subtitle color */
}

/* Main Page Styles */
.main-page-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
}

.main-page-container h1 {
    margin-bottom: 40px;
    font-size: 2.5rem;
    color: #333;
}

.navigation-buttons {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.nav-button {
    display: block;
    position: relative;
    width: 300px; /* Adjust width as needed */
    height: 400px; /* Adjust height as needed */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nav-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.nav-button img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, might crop */
    transition: transform 0.3s ease;
}

.nav-button:hover img {
    transform: scale(1.05);
}

.nav-button span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
    padding: 20px 10px;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
}

/* Responsive adjustments for main page buttons */
@media (max-width: 1024px) {
    .nav-button {
        width: 250px;
        height: 350px;
    }
}

@media (max-width: 768px) {
    .navigation-buttons {
        flex-direction: column;
        align-items: center;
    }
    .nav-button {
        width: 80%;
        max-width: 350px;
        height: 250px;
    }
    .nav-button span {
        font-size: 1.2rem;
        padding: 15px 10px;
    }
}