.product-gallery .swiper-slide {
    display: flex; /* Ensure slides behave well with child elements */
    justify-content: center;
    align-items: center;
}
.product-image-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Let's define a max-height for the container. 
       This could be a fixed value or a viewport unit. */
    max-height: 70vh; /* Example: Max 70% of viewport height */
    /* Or, if you prefer a fixed max height for the wrapper:
    max-height: 600px; 
    */
    display: flex; /* To help center the image if it's smaller than the wrapper */
    justify-content: center;
    align-items: center;
}

.single-product-image {
    display: block;
    max-width: 100%;  /* Ensure it doesn't overflow its container horizontally */
    max-height: 100%; /* Ensure it doesn't overflow its container vertically */
    width: auto;      /* Allow image to scale based on height if height is constrained by wrapper */
    height: auto;     /* Allow image to scale based on width if width is constrained by wrapper */
    object-fit: contain; /* Ensures the entire image is visible, maintains aspect ratio */
}
/* Styles for the right column containing zoom and product details */
.sp_right_product {
    position: relative; /* Context for absolute positioning of zoom-pane-container */
}

/* Styles for Drift zoom */
#zoom-pane-container {
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* Aspect ratio 4:3 - matches .product-details-content-area padding-top when zooming */
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid #eee;
    z-index: 10;
    display: none; /* Initially hidden */
}

.sp_right_product.product-view-zooming #zoom-pane-container {
    display: block; /* Show when zooming */
}

.drift-zoom-pane.drift-open {
    /* Ensure Drift's generated pane fills our container if it doesn't already */
    background-size: cover; /* Or contain, depending on desired zoom image fit */
}

.product-details-content-area {
    transition: padding-top 0.3s ease; /* Smooth transition for padding change */
    /* No padding-top initially */
}

.sp_right_product.product-view-zooming .product-details-content-area {
    padding-top: 75%; /* Add padding when zoom pane is active. Matches zoom-pane-container's padding-bottom */
}

/* --- Product Detail Styling Enhancements --- */

.sp_product_detail {
    padding: 15px;
}

/* Breadcrumbs - Assuming a common class like .woocommerce-breadcrumb or simple p/nav styling */
.sp_product_detail .woocommerce-breadcrumb,
.sp_product_detail nav[aria-label="breadcrumb"] {
    font-size: 0.875rem;
    color: #6c757d; /* Bootstrap secondary color */
    margin-bottom: 1rem;
}

.sp_product_detail .woocommerce-breadcrumb a,
.sp_product_detail nav[aria-label="breadcrumb"] a {
    color: #007bff; /* Bootstrap primary color */
    text-decoration: none;
}

.sp_product_detail .woocommerce-breadcrumb a:hover,
.sp_product_detail nav[aria-label="breadcrumb"] a:hover {
    text-decoration: underline;
}

/* Product Title */
.sp_product_detail h1.h2 {
    font-weight: 600;   /* Bolder */
    margin-bottom: 0.75rem; /* Adjusted spacing */
    color: #343a40; /* Darker color */
}

/* Product Price */
.sp_price {
    font-size: 1.75rem; /* Larger price */
    font-weight: 700;
    color: #007bff; /* Theme primary color for price */
    display: block; /* Ensure it takes its own line if needed */
}

/* Product Meta (Information section) */
.product-meta h6 {
    font-size: 0.9rem;
    color: #495057;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.product-meta .d-flex span {
    font-size: 0.95rem;
    color: #343a40;
}

.product-meta .fas.fa-tag {
    color: #28a745 !important; /* Bootstrap success green for the tag icon */
    margin-right: 8px !important; /* Ensure Bootstrap class doesn't override */
}

/* Product Description (Accordion) */
.product-description .card {
    border: 1px solid #dee2e6; /* Light border for the card */
    border-radius: 0.375rem; /* Bootstrap's default card radius */
}

.product-description .card-header {
    background-color: #f8f9fa; /* Light background for header */
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #dee2e6;
}

.product-description .card-header h5 {
    margin-bottom: 0;
}

.product-description .card-header .btn-link {
    font-weight: 600;
    color: #343a40;
    text-decoration: none;
    font-size: 1rem;
    padding: 0 !important; /* Override Bootstrap's default button padding */
}

.product-description .card-header .btn-link:hover,
.product-description .card-header .btn-link:focus {
    color: #0056b3;
    text-decoration: none;
}

.product-description .card-header .btn-link .fas {
    transition: transform 0.2s ease-in-out;
}

.product-description .card-header .btn-link[aria-expanded="true"] .fas {
    transform: rotate(180deg);
}

.product-description .card-body {
    padding: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #495057;
}

/* WhatsApp Contact Button */
.contact-section .btn-success {
    background-color: #007bff;; /* Official WhatsApp Green */
    border-color: #007bff;;
    font-size: 1rem; /* Adjust size as needed */
    padding: 0.6rem 1.2rem;
    border-radius: 0.375rem;
}

.contact-section .btn-success:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.contact-section .btn-success .fab.fa-whatsapp {
    font-size: 1.25em; /* Make icon slightly larger than text */
    margin-right: 0.5em;
}


.drift-bounding-box {
    border: 2px solid rgba(0, 123, 255, 0.5); /* Brighter, semi-transparent blue border */
    background-color: rgba(0, 123, 255, 0.1); /* Very light, semi-transparent blue background */
    z-index: 1050;
}