/* assets/css/pages/product-detail.css */

/* Styles specific to the product detail page can be added here. */

.product-detail-content {
    background-color: #FFFFFF; /* 白色背景 */
    font-size: 1rem; /* Standardize base font size */
    color: #212529; /* Standardize base text color (Bootstrap's default) */
    /* 您可以根据需要添加其他样式，例如 padding, margin, border-radius 等 */
}

/* Normalize .lead class to match standard text */
.product-detail-content .product-short-description.lead {
    font-size: 1rem; /* Override Bootstrap's larger size for .lead */
    font-weight: 400; /* Reset font-weight (Bootstrap .lead is 300) */
    /* Color will be inherited from .product-detail-content */
}

/* Standardize color for non-active tab navigation links */
.product-detail-content .nav-tabs .nav-link:not(.active) {
    color: #212529; /* Ensure non-active tabs use the standard text color */
}

/* Remove bold font-weight from specification table headers */
.product-specifications-summary table th {
    font-weight: normal; /* Override default bold for th */
}

/* Styling for SKU and Brand alignment */
.product-summary .product-meta-label {
    display: inline-block;
    width: 70px; /* Adjust as needed based on the longest label, e.g., "Brand:" */
    font-weight: 600; /* Optionally make labels slightly bolder if desired */
    margin-right: 5px; /* Space between label and value */
}

.product-summary .product-meta-value {
    /* Values will align naturally after the fixed-width label */
}

/* Breadcrumb link color */
.product-detail-content .breadcrumb-item a {
    color: var(--soft-gold);
    text-decoration: none; /* 移除下划线，如果需要的话 */
}

.product-detail-content .breadcrumb-item a:hover {
    color: var(--dark-gold);
    text-decoration: underline; /* 悬停时显示下划线，如果需要的话 */
}

/* Social share icon color */
.product-detail-content .social-share .social-icon-sm {
    color: var(--soft-gold);
}

.product-detail-content .social-share .social-icon-sm:hover {
    color: var(--dark-gold);
}

/* Main Image Zoom Container */
.main-image-zoom-container {
    position: relative; /* For positioning zoom lens/window */
    overflow: hidden; /* Might be needed depending on zoom implementation */
}

/* Thumbnail Navigation Wrapper */
.thumbnail-navigation-wrapper {
    position: relative;
    padding: 0 30px; /* Space for absolutely positioned arrows */
    margin-top: 1rem;
}

.thumb-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 4px;
    z-index: 10;
    transition: background-color 0.2s;
}

.thumb-nav-arrow:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.thumb-nav-arrow.prev {
    left: 0px;
}

.thumb-nav-arrow.next {
    right: 0px;
}

.thumbnail-images-strip-outer {
    overflow: hidden; /* This will hide the scrollbar and parts of the strip not in view */
    width: 100%;
}

/* Product Gallery Thumbnail Styling */
.product-gallery .thumbnail-images {
    /* gap: 0.5rem; */ /* Temporarily remove or adjust gap, handled by margin on thumbnail-item for scrolling */
    justify-content: center; /* Re-added: Center thumbnails if they don't fill the strip */
    flex-wrap: nowrap; /* Important: Prevent wrapping for horizontal scroll */
    padding-bottom: 5px; /* Space if scrollbar was visible, or just for breathing room */
    /* Add transition for smooth scrolling if using JS to animate scrollLeft */
    transition: transform 0.3s ease-in-out;
}

.product-gallery .thumbnail-item { /* This is the <div> container for each thumbnail image */
    width: 80px;  /* Fixed width for consistency */
    height: 70px; /* Fixed height for consistency */
    cursor: pointer;
    overflow: hidden; /* Ensure child image with object-fit:cover respects boundaries */
    flex-shrink: 0; /* Prevent thumbnails from shrinking when in flex container */
    margin-right: 0.5rem; /* Replaces gap for consistent spacing in a scrollable strip */
}
.product-gallery .thumbnail-item:last-child {
    margin-right: 0;
}

.product-gallery .thumbnail-item img.img-thumbnail {
    /* Bootstrap's .img-thumbnail class provides the default border and padding */
    width: 100%;  /* Fill the .thumbnail-item container */
    height: 100%; /* Fill the .thumbnail-item container */
    object-fit: cover; /* Cover the 100%x100% area, cropping if needed */
    display: block; /* Good practice for images */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.product-gallery .thumbnail-item:hover img.img-thumbnail {
    border-color: var(--soft-gold); /* Change border color of the image on hover */
}

.product-gallery .thumbnail-item.active img.img-thumbnail {
    border-color: var(--dark-gold); /* Change border color for active state */
    box-shadow: 0 0 0 0.2rem rgba(255, 184, 0, 0.35); /* Subtle gold shadow for active state */
}

/* Related Products Slider Styling */
.related-products-slider-wrapper {
    position: relative;
    padding: 0 40px; /* Space for absolutely positioned arrows */
    margin-bottom: 1rem;
}

.slider-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 20;
    transition: background-color 0.2s;
    line-height: 1; /* Ensure icon is centered in button */
}

.slider-nav-arrow:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.slider-nav-arrow.prev {
    left: 0px;
}

.slider-nav-arrow.next {
    right: 0px;
}

.related-products-viewport {
    overflow: hidden;
    width: 100%;
}

.related-products-track {
    /* display: flex; is already on the element via d-flex */
    transition: transform 0.5s ease-in-out; /* For smooth scrolling */
}

.related-product-slide {
    flex: 0 0 auto; 
    /* Default width for 3 items per view, assuming product-card has its own margins or adjust here */
    width: calc((100% / 3) - 1rem); /* Adjust 1rem for desired gap */
    margin-right: 1.5rem;
}

.related-product-slide:last-child {
    margin-right: 0;
}

/* Styles for .product-card.related-item-card and its children were here, 
   but are now removed to allow .product-card styles from product-listing.css to take precedence.
   The .product-card class itself is defined in product-listing.css and linked in the HTML. 
   Ensure that product-listing.css is loaded before product-detail.css if there were any
   conflicting general .product-card styles in product-detail.css (which there shouldn't be ideally).
*/

/* Responsive adjustments for related products slider */
@media (max-width: 992px) {
    .related-product-slide {
        width: calc((100% / 2) - 1rem); /* 2 items per view on medium screens */
    }
    .related-products-slider-wrapper {
        padding: 0 30px;
    }
}

@media (max-width: 768px) {
    .related-product-slide {
        width: calc(100% - 0.5rem); /* 1 item per view on small screens, allow small margin if not last */
        margin-right: 0.5rem; 
    }
     .related-products-slider-wrapper {
        padding: 0 25px;
    }
    .slider-nav-arrow {
        padding: 8px 10px;
    }
}