/* products/product.css */

/* --- CSS Variables (Product-Specific Additions ONLY) --- */
/* These variables extend or override general ones from style.css */
:root {
    --color-primary-orange: #E87747;
    --color-text-dark: #333333;
    --color-text-light: #555555;
    --color-border: #EAEAEA;
    --color-border-selected: #4CAF50;
    --color-background-light: #FAFAFA;
    --color-button-secondary: #F0F0F0;

    --header-height: 60px;
    --mobile-header-height: 50px;

    /* Define glass properties directly for reuse */
    --liquid-glass-bg: rgba(255, 255, 255, 0.1);
    --liquid-glass-backdrop-filter: blur(10px) saturate(180%);
    --liquid-glass-border: rgba(255, 255, 255, 0.2);
}

body {
    background-color: #FFFFFF;
    overflow-y: auto;
    overflow-x: hidden; /* Keep this to prevent horizontal scroll from layout shifts */
}

.container {
    max-width: 90vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 2rem 0;
}

.viewport-main-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
    padding-top: var(--header-height);
    padding-left: var(--padding-mobile-x);
    padding-right: var(--padding-mobile-x);
}

.breadcrumbs {
    color: var(--color-text-light);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
}
.breadcrumbs span {
    margin: 0 0.25rem;
    color: var(--color-text-light);
}
.breadcrumbs a {
    color: var(--color-text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}
.breadcrumbs a:hover {
    color: var(--color-text-dark);
}
.breadcrumbs strong {
    color: var(--color-text-dark);
    font-weight: 500;
}

.product-section {
    display: flex;
    align-items: stretch; /* This makes children match height */
    flex-grow: 1;
    min-height: 0;
    padding: 0 var(--padding-mobile-x);
    overflow: visible; /* Keep visible to allow border to show */
    overflow-x: hidden; /* Prevent horizontal overflow */
    gap: var(--product-section-gap); /* Use the variable defined in style.css */
    position: relative; /* REQUIRED: For the ::after pseudo-element to position correctly */
}

/* NEW/MOVED: Border for the gap in the product-section */
/* Apply the pseudo-element to the .product-section instead of .product-info */
@media (min-width: 1201px) {
    .product-section::after {
        content: '';
        position: absolute;
        top: 0; /* Align with the top of the product-section */
        bottom: 0; /* Align with the bottom of the product-section */
        /* height: 100%; is implicit with top/bottom 0 */
        width: 1px; /* The thickness of the border */
        background-color: var(--color-border);
        z-index: 1; /* Ensure it's visible above the background */

        /* Adjusted as per your request */
        left: 64%;
    }
}

/* --- Left Column: Product Gallery --- */
.product-gallery {
    width: 65%;
    flex-shrink: 1;
    display: flex;
    flex-direction: column; /* Essential for vertical distribution */
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 1.5rem;
    position: relative; /* Essential for absolute positioning of gallery-footer */
    background-color: var(--color-white);

    max-height: 80vh; /* Keep for desktop to constrain height */
    overflow: hidden; /* Keep for desktop to hide main image overflow, not footer */
}

.main-image-container {
    width: 100%; /* Takes full width of parent */
    overflow: hidden;
    position: relative;
    cursor: pointer; /* Default cursor for all devices */
    border-radius: 10px;
    touch-action: manipulation;
    flex-shrink: 0;

    flex-grow: 1; /* Allow it to grow to fill available vertical space */
    min-height: 0; /* Essential for flex-grow to work properly */
    height: 100%; /* This makes the image container fill its parent's height */
}

.main-image-container img {
    width: 100%;
    height: 100%; /* This makes the image fill the container */
    object-fit: contain; /* This makes the image fill the container, cropping if aspect ratios don't match */
    border-radius: 10px;
}

/* NEW/UPDATED: Zoom Lens Styling */
#zoomLens {
    display: none; /* Default: hidden for mobile/tablet */
    position: absolute;
    border: 2px solid var(--color-primary-orange);
    border-radius: 8px; /* Slightly rounded rectangle */
    background-repeat: no-repeat;
    opacity: 0; /* Start hidden, fade in with JS */
    transition: opacity 0.2s ease; /* Smooth fade for appearance */
    cursor: none; /* Hide the mouse cursor over the lens */
    pointer-events: none; /* Ensures mouse events pass through to the container */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    z-index: 10; /* Ensure it's above the image */
    background-color: #fff; /* A background color to ensure clarity of the magnified image */
    overflow: hidden; /* Important for the background-image to clip properly */
}

/* Show zoom lens on desktop */
@media (min-width: 1201px) {
    .main-image-container {
        cursor: crosshair; /* Indicate zoomable area on desktop */
    }
    #zoomLens {
        display: block; /* Make it visible (but opaque) on desktop */
    }
}


.gallery-footer {
    /* DEFAULT (MOBILE/TABLET): Static positioning */
    position: static;
    margin-top: 1rem; /* Standard spacing from image */
    flex-direction: column; /* Stack vertically by default */
    align-items: center; /* Center everything by default */
    gap: 1rem;
    z-index: 11;
    flex-shrink: 0; /* Prevents it from shrinking due to flex properties */

    background: none; /* Ensure no glass effect/background by default */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    padding: 0;
}

/* Desktop Positioning for gallery-footer: Absolute to sit over main image content */
@media (min-width: 1201px) { /* This breakpoint aligns with your main product-section layout */
    .gallery-footer {
        position: absolute;
        bottom: 1.5rem; /* Matches padding of product-gallery */
        left: 1.5rem;   /* Matches padding of product-gallery */
        /* REMOVED right: 1.5rem; */ /* This was causing it to stretch full width */

        display: flex; /* Make it a flex container on desktop */
        flex-direction: column; /* Desktop: Stack vertically */
        align-items: flex-start; /* Align to the start (left) */
        gap: 1rem; /* Space between thumbnails and live button */

        /* ADDED: Constrain width to content and add some max-width */
        width: auto; /* Allow width to be determined by content */
        max-width: calc(100% - 3rem); /* Max width same as gallery padding for robustness */

        /* Ensure no glass effect/background by default,
           these rules should ideally be set in the default style above
           and then specific rules applied in responsive sections if needed.
           But explicitly setting them here for clarity if they were inherited. */
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        padding: 0;
    }
}


.thumbnails {
    display: flex;
    flex-direction: column; /* Desktop: Stack thumbnails vertically */
    gap: 0.75rem;
    flex-wrap: nowrap; /* Prevent wrapping horizontally in desktop column */
    align-items: flex-start; /* Align individual thumbnails to left */
}
.thumbnails img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    background-color: rgba(255,255,255,0.5);
    padding: 2px;
}
.thumbnails img.active {
    border-color: var(--color-primary-orange); /* Highlight active thumbnail */
    box-shadow: 0 0 0 2px var(--color-primary-orange);
}
.thumbnails img:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.live-btn {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;
    border: 1px solid var(--color-border); background: #fff; border-radius: 50px; font-weight: 500;
    cursor: pointer;
    place-self: anchor-center;
    margin:0;  
}
.live-btn:hover { background-color: var(--color-background-light); }


/* --- Right Column: Product Info --- */
.product-info {
    width: 35%;
    display: flex;
    flex-direction: column;
    padding: 1rem; /* Vertical padding only for the container itself */
    background-color: var(--color-white);

    max-height: 80vh; /* Keep for desktop */
    overflow-y: auto; /* Enable vertical scrolling */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: var(--color-border) transparent; /* For Firefox */
    gap: 1rem;
    /* position: relative; Removed, as the border is now on .product-section */
}


/* Scrollbar styling for WebKit browsers */
.product-info::-webkit-scrollbar {
    width: 8px;
}
.product-info::-webkit-scrollbar-track {
    background: transparent;
}
.product-info::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 10px;
    border: 2px solid transparent; /* Keeps the thumb from touching track */
}


/* Ensure children within product-info fit horizontally */
.product-tag,
.product-title,
.product-description,
.variations,
.size-info-box,
.three-d-download-section,
.action-buttons {
    flex-shrink: 0;
    overflow: visible; /* Prevent internal scrollbars on these elements */
    width: 100%; /* Ensure they take full available width of product-info */
    box-sizing: border-box; /* Include padding/border in width calculation */
}

.variations {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-border);
}



/* Make product description text more flexible to fit */
.product-description {
    color: var(--color-text-light);
    line-height: 1.6;
    font-size: 0.95rem;
    min-height: 0; /* Essential for flex-grow to work properly */
    margin: 0;
    margin-bottom: 0 !important;
}

/* Action buttons at the bottom of product-info */
.action-buttons {
    display: flex;
    gap: 1rem;
    margin-top: auto; /* This pushes action-buttons to the very bottom within product-info */
    flex-wrap: nowrap; /* Prevent wrapping on desktop */
}

/* Other direct children of product-info */
.variations h2, .size-info-box h2 {
    font-family: var(--font-heading);
    font-weight: 400; font-size: 1.5rem; margin-bottom: 0.75rem;
    margin: 0;
}
.variations h3 { font-weight: 500; color: var(--color-text-light); margin-bottom: 0.75rem; font-size: 1rem; }
.variation-swatches { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.variation-swatches img {
    width: 70px; height: 70px; object-fit: contain; border: 2px solid var(--color-border);
    border-radius: 10px; cursor: pointer; transition: all 0.3s;
}
.variation-swatches img.active { border: 2px solid var(--color-border-selected); box-shadow: 0 0 0 2px var(--color-border-selected); }

.size-info-box {
    border: 1px solid var(--color-border); border-radius: 15px; padding: 1.25rem;
    display: flex; flex-direction: column; gap: 1rem;
}
.size-dimension { display: flex; justify-content: space-between; align-items: center; font-size: 1rem; }
.size-dimension .label { color: var(--color-text-light); }
.size-dimension .value { font-weight: 500; }

.three-d-download-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.show-3d-options-btn {
    background-color: var(--color-button-secondary);
    padding: 0.75rem 1.25rem; /* Adjusted padding */
    border-radius: 8px;
    font-family: outfit;
    font-weight: 500;
    transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid var(--color-border); /* Changed to full border */
    cursor: pointer;
}
.show-3d-options-btn:hover {
    background-color: var(--color-border);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-color: var(--color-text-dark); /* Darker border on hover */
}

.three-d-file-buttons {
    display: flex;
    gap: 0.75rem;

    flex-wrap: nowrap; /* Prevent wrapping on desktop */
}
.three-d-file-buttons a {
    flex-grow: 1;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    background-color: var(--color-background-light);
    border: 1px solid var(--color-border);
    text-align: center;
    font-weight: 500;
    transition: background-color 0.2s, border-color 0.2s;
    white-space: nowrap;
    color: var(--color-primary);
}
.three-d-file-buttons a:hover {
    background-color: var(--color-border);
    border-color: var(--color-text-dark);
}
.hidden-3d-buttons {
    display: none;
}

.action-buttons button {
    flex-grow: 1; padding: 1rem; border-radius: 12px;
    font-size: 1rem; font-weight: 500; transition: all 0.3s;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

.action-buttons span{
    font-family: outfit;
}

.enquiry-list-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    background-color: #c9c9c9; border: 1px solid var(--color-border);
}
.enquiry-list-btn:hover { background-color: var(--color-background-light); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.enquiry-btn {
    background-color: var(--color-primary-orange);
    color: #fff;
    font-weight: 800;
    font-family: Playfair Display;
    font-size: 1.1rem;
}
.enquiry-btn:hover { background-color: #d66a3a; transform: translateY(-2px); }

/* --- NEW SECTION: Product Details Section (Moved) --- */
.product-details-section {
    margin-top: 4rem;
    background-color: var(--color-white);
    border-radius: 20px;
    box-shadow: var(--shadow-subtle);
    padding: 2.5rem var(--padding-mobile-x);
}
.product-details-section .section-content {
    text-align: left;
    padding: 0;
}
.product-details-section h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}
.product-details-section p {
    color: var(--color-text-light);
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Added style for the new full-width image within product-details-section */
.product-details-section .full-width-image {
    width: 100%; /* Make the image take full width of its parent */
    height: auto; /* Maintain aspect ratio */
    margin-top: 2rem; /* Space above the image */
    margin-bottom: 2rem; /* Space below the image */
    border-radius: 15px; /* Match the section's border-radius or adjust as desired */
    object-fit: cover; /* Cover the area, potentially cropping */
}


/* --- Bottom Sections (Similar Products) --- */
.similar-products-section {
    margin-top: 4rem;
    flex-shrink: 0;
    padding: 0 var(--padding-mobile-x);
}
.section-title {
    font-family: var(--font-heading);
    font-size: 2rem; margin-bottom: 1.5rem;
    text-align: center;
}
.similar-products-section p { color: var(--color-text-light); line-height: 1.7; max-width: 80%; }
.similar-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.similar-product-card {
    border: 1px solid var(--color-border); border-radius: 20px; padding: 1rem; height: 350px;
    display: flex; justify-content: center; align-items: center;
    background-color: var(--color-white);
}
.similar-product-card img { max-height: 90%; width: auto; object-fit: contain; }


/* --- NEW: Fullscreen Lightbox Styles --- */
.fullscreen-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9); /* Darker overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow: hidden; /* Prevent body scroll when open */
}

.fullscreen-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 90%; /* Max width for the content area */
    height: 90%; /* Max height for the content area */
    max-width: 1400px; /* Limit max width on large screens */
    max-height: 900px; /* Limit max height on large screens */
    background-color: #fff;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    overflow: hidden; /* Hide internal scrollbars on content wrapper itself */
}

.lightbox-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--color-background-light);
    color: var(--color-text-dark);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1010; /* Above all other lightbox content */
    border: none;
    transition: background-color 0.2s;
}
.lightbox-close-btn:hover {
    background-color: var(--color-border);
}

.lightbox-main-view {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden; /* Hide overflow of the zoomed image */
    margin-bottom: 20px;
    background-color: #f5f5f5; /* Light background for the image area */
    border-radius: 10px;
}

#lightboxMainImage {
    max-width: 100%; /* Start at 100% of its container */
    max-height: 100%;
    object-fit: contain; /* Ensure the image fits */
    cursor: grab; /* Indicate draggable when zoomed */
    transition: transform 0.1s ease-out; /* Smooth zoom transition */
    will-change: transform; /* Optimize for transformations */
}

/* Draggable cursor when zoomed */
#lightboxMainImage.dragging {
    cursor: grabbing;
}

.lightbox-zoom-controls {
    position: absolute;
    bottom: 15px;
    right: 15px;
    display: flex;
    gap: 10px;
    z-index: 5; /* Above the image, but below close button */
}

.lightbox-zoom-controls button {
    background-color: var(--color-background-light);
    color: var(--color-text-dark);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.8rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}
.lightbox-zoom-controls button:hover {
    background-color: var(--color-border);
    transform: translateY(-2px);
}
.lightbox-zoom-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.lightbox-thumbnails-wrapper {
    flex-shrink: 0; /* Don't allow it to shrink */
    max-height: 100px; /* Limit height of thumbnails section */
    overflow-x: auto; /* Enable horizontal scrolling for thumbnails */
    padding-bottom: 5px; /* Space for scrollbar */
    border-top: 1px solid var(--color-border);
    padding-top: 15px;
}

.lightbox-thumbnails {
    display: flex;
    gap: 10px;
    justify-content: center; /* Center thumbnails */
    min-width: max-content; /* Prevent wrapping in some cases */
}

.lightbox-thumbnails img {
    width: 70px; /* Larger thumbnails in lightbox */
    height: 70px;
    object-fit: cover;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0; /* Prevent thumbnails from shrinking */
}

.lightbox-thumbnails img.active {
    border-color: var(--color-primary-orange); /* Highlight active thumbnail */
    box-shadow: 0 0 0 2px var(--color-primary-orange);
}

/* ==========================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================== */

/* --- Global adjustments for smaller laptops/large tablets (e.g., iPad Pro, common 1280px/1024px widths) --- */
@media (max-width: 1200px) {
    .container {
        padding: 1.5rem 0;
    }

    .viewport-main-content {
        flex-grow: 0;
    }
    .product-section {
        flex-direction: column; /* Stack columns on smaller screens */
        align-items: flex-start;
        flex-grow: 0;
        min-height: auto;
        max-height: none; /* Remove max height when stacked */
        overflow: visible; /* No internal scrolling when stacked */
        padding: 0 var(--padding-mobile-x);
        /* gap property is now handled by style.css for product-section-gap */

        /* Hide the vertical border when columns are stacked */
        &::after {
            content: none;
        }
    }
    .product-gallery, .product-info {
        width: 100%; /* Take full width when stacked */
        max-width: 100%;
        height: auto; /* Height is determined by content */
        flex-grow: 0;
        min-height: auto;
        overflow: visible; /* No internal scrolling when stacked */
        max-height: none; /* No max height when stacked */
    }
    .product-info {
        padding: 1rem 0; /* Vertical padding only */
        margin-top: 0;
        gap: 1.5rem; /* Increased gap between internal elements */
        overflow-y: visible; /* Prevent scrollbar when stacked */
    }
    /* Ensure content inside product-info uses full width even when stacked */
    .product-info > * {
        padding-left: var(--padding-mobile-x);
        padding-right: var(--padding-mobile-x);
        box-sizing: border-box; /* Include padding in width */
    }
    .product-info .product-description {
        padding-left: var(--padding-mobile-x); /* Ensure consistency */
        padding-right: var(--padding-mobile-x); /* Ensure consistency */
    }
    .product-info .size-info-box {
        /* Reapply original internal padding, overriding the general * selector */
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* Adjust padding for the 3D download section buttons and action buttons */
    .three-d-download-section,
    .action-buttons {
        padding-left: var(--padding-mobile-x);
        padding-right: var(--padding-mobile-x);
    }
    .three-d-download-section .show-3d-options-btn,
    .three-d-file-buttons a,
    .action-buttons button {
        width: auto; /* Allow buttons to size naturally */
        flex-shrink: 0; /* Prevent shrinking below content */
    }
    .three-d-file-buttons, .action-buttons {
        flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
        justify-content: center; /* Center buttons when wrapped */
    }


    .similar-products-grid { grid-template-columns: repeat(2, 1fr); }

    .product-details-section {
        margin-top: 2rem;
        padding: 1.5rem var(--padding-mobile-x);
    }

    /* Gallery footer for tablet (horizontal) */
    .gallery-footer {
        /* Position already set to static in default style, now only adjust flex direction */
        flex-direction: row; /* Horizontal */
        justify-content: space-between; /* Spread content */
        align-items: center; /* Vertically center */
        width: 100%; /* Take full width of parent */
        padding: 0; /* No specific padding */
        /* Also remove the glass effect and border if they were accidentally re-applied */
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
    }

    .thumbnails {
        flex-direction: row; /* Horizontal thumbnails */
        flex-wrap: wrap; /* Allow wrapping if many thumbnails */
        justify-content: flex-start; /* Start from left */
        align-items: center;
    }
    .thumbnails img {
        width: 100px;
        height: 100px;
        border-radius: 8px;
    }
    .live-btn {
        padding: 0.5rem 1rem;
        font-size: inherit; /* Keep original font size */
        width: auto; /* Revert to auto width on tablet */
        max-width: none; /* No max width on tablet */
    }
}

/* --- Mobile Phones (up to 768px) --- */
@media (max-width: 768px) {
    .header-nav {
        padding-top: var(--mobile-header-height);
        padding-left: var(--padding-mobile-x-calculated);
        padding-right: var(--padding-mobile-x-calculated);
    }
    .product-section {
        padding: 0 var(--padding-mobile-x-calculated);
        /* gap property is now handled by style.css for product-section-gap */
    }
    .product-title { font-size: 2.2rem; }
    .product-description { font-size: 0.85rem; }
    .product-gallery {
        height: auto;
        padding: 0.5rem;
        max-height: none; /* Remove max-height when stacked on mobile */
        overflow: visible; /* No internal scrolling when stacked */
    }
    .product-info {
        height: auto;
        padding: 1rem 0; /* Vertical padding only */
        max-height: none; /* Remove max-height when stacked on mobile */
        overflow: visible; /* No internal scrolling when stacked */
        gap: 1rem;
    }
    /* Ensure content inside product-info uses full width even on mobile */
    .product-info > * {
        padding-left: var(--padding-mobile-x-calculated);
        padding-right: var(--padding-mobile-x-calculated);
        box-sizing: border-box;
    }
    .product-info .product-description {
        padding-left: var(--padding-mobile-x-calculated);
        padding-right: var(--padding-mobile-x-calculated);
    }
    .product-info .size-info-box {
        padding-left: 1.25rem; /* Reapply original internal padding */
        padding-right: 1.25rem; /* Reapply original internal padding */
    }

    /* Adjust padding for the 3D download section buttons and action buttons on mobile */
    .three-d-download-section,
    .action-buttons {
        padding-left: var(--padding-mobile-x-calculated);
        padding-right: var(--padding-mobile-x-calculated);
    }
    .three-d-download-section .show-3d-options-btn,
    .three-d-file-buttons a,
    .action-buttons button {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        border-radius: 10px;
        flex-basis: 48%; /* Try to make them occupy roughly half the width */
        flex-grow: 1;
        /* max-width: calc(50% - 0.375rem); REMOVED as requested */
    }
    .three-d-file-buttons, .action-buttons {
        gap: 0.75rem;
        flex-wrap: wrap; /* Ensure wrapping on mobile */
        justify-content: center; /* Center buttons when wrapped */
    }

    /* Gallery footer for mobile (horizontal and centered) */
    .gallery-footer {
        position: static; /* Remains static */
        margin-top: 1rem; /* Spacing for mobile */
        padding: 0;
        box-shadow: none;
        flex-direction: column; /* Stack Live button below thumbnails */
        align-items: center; /* Center everything */
        gap: 1rem;
        background-color: transparent; /* No glass effect */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none; /* No border */
        width: 100%;
    }
    .thumbnails {
        flex-direction: row; /* Horizontal thumbnails */
        flex-wrap: wrap; /* Allow wrapping if many thumbnails */
        justify-content: center; /* Center thumbnails */
        align-items: center;
        width: 100%; /* Take full width of footer */
        gap: 0.5rem;
    }
    .thumbnails img {
        width: 40px;
        height: 40px;
        border-radius: 8px;
    }
    .live-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        width: 100%;
        max-width: 200px;
    
        justify-content: center; 
    
    }

    .product-info h2 { font-size: 1.3rem; }
    .product-info p { font-size: 0.9rem; }
    .variation-swatches img { width: 60px; height: 60px; border-radius: 8px; }

    .size-info-box { padding: 1rem; border-radius: 12px; }
    .size-dimension { font-size: 0.9rem; }

    .enquiry-btn { font-size: 1rem; }

    .similar-products-section { margin-top: 3rem; padding: 0 var(--padding-mobile-x-calculated); }
    .similar-products-grid { grid-template-columns: 1fr; gap: 1rem; }
    .similar-product-card { height: 250px; padding: 0.75rem; border-radius: 15px; }

    .product-details-section {
        margin-top: 1.5rem;
        padding: 1.5rem var(--padding-mobile-x-calculated);
    }
    .product-details-section h2 { font-size: 1.5rem; }
    .product-details-section p { text-align: left; } }