/* ==========================================
   PRODUCT DETAIL PAGE (page-product.css)
========================================== */

.product-title {
    letter-spacing: 1.5px;
    font-size: 20px;
}

@media (min-width: 992px) {
    .lg-ps-5 { padding-left: 3rem !important; }
}

.product-main-image img {
    border-radius: 0;
    transition: opacity 0.3s ease;
}

.thumbnail-img {
    cursor: pointer;
    transition: opacity 0.2s, border 0.2s;
    border: 1px solid transparent;
}

.thumbnail-img:hover {
    opacity: 1;
}

.thumbnail-img.active {
    opacity: 1;
    border-color: var(--main-black);
}

.variant-btn {
    border-radius: 0 !important;
    min-width: 50px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--PRODUCT-VARIANT-FONT-SIZE);
    letter-spacing: 1px;
    border-color: #ddd;
    color: var(--main-black);
    cursor: pointer;
    transition: all 0.2s;
}

.variant-btn:hover {
    border-color: var(--main-black);
}

.btn-check:checked + .variant-btn {
    background-color: var(--main-black) !important;
    color: #fff !important;
    border-color: var(--main-black) !important;
}

.product-accordion .accordion-button {
    letter-spacing: 1px;
    font-size: 13px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.product-accordion .accordion-button:not(.collapsed) {
    color: var(--main-black);
    background-color: transparent;
    box-shadow: none;
}

.product-accordion .accordion-button::after {
    background-size: 12px;
}


.variant-img-btn {
    border-radius: 0 !important;
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px !important;
    border: 1px solid #ddd;
    transition: all 0.2s;
    cursor: pointer;
    background: #fff;
}

.variant-img-btn img {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.variant-img-btn:hover {
    border-color: var(--main-black);
}


.btn-check:checked + .variant-img-btn {
    border-color: var(--main-black) !important;
    padding: 1px !important; 
}


#reviews-section .border-end-md {
    border-right: 1px solid #dee2e6;
}
@media (max-width: 767.98px) {
    #reviews-section .border-end-md {
        border-right: none;
    }
}

.w-15px { min-width: 35px; }

.review-card {
    padding: 20px 0;
    border-bottom: 1px solid #f4f4f4;
}
.review-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #f0f0f0;
}
.verified-badge {
    color: #0fa958;
    font-size: 12px;
}
.review-date {
    font-size: 12px;
    color: #999;
}
.review-content {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
}

.review-thumbnail {
    height: 150px; 
    width: auto; 
    max-width: 150px; 
    object-fit: contain; 
    border-radius: 6px; 
    cursor: pointer;
    border: 1px solid #eaeaea; 
    transition: opacity 0.2s ease;
    image-rendering: -webkit-optimize-contrast; 
    transform: translateZ(0); 
    will-change: transform;
}

.review-thumbnail:hover {
    opacity: 0.8; 
}


#star-rating-input i {
    transition: color 0.2s;
}
#star-rating-input i.active,
#star-rating-input i:hover ~ i {}

/* ==========================================
   5. PRODUCT CARD & RELATED PRODUCTS
   ========================================== */

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.scroll-snap-container {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap; 
}

.product-card {
    flex: 0 0 160px; 
    width: 160px;
    scroll-snap-align: start;
    scroll-margin-left: 1rem;
}

@media (min-width: 992px) {
    .product-card {
        flex: 0 0 240px; 
        width: 240px;
    }
}

.product-img-wrapper {
    overflow: hidden; 
}
.product-img-wrapper .secondary-img {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.product-img-wrapper:hover .secondary-img {
    opacity: 1;
}

/* Quick Shop */
.quick-shop-btn {
    transition: all 0.2s;
    background-color: transparent;
    color: var(--main-black);
    border-color: #ddd;
}
.quick-shop-btn:hover {
    background-color: var(--main-black);
    color: #fff;
    border-color: var(--main-black);
}

.scroll-arrow {
    position: absolute;
    top: calc(50% - 70px); 
    z-index: 10;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--main-black);
    border: 1px solid #eee;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.scroll-arrow:hover {
    background: var(--main-black);
    color: #fff;
    transform: scale(1.05);
}

.scroll-arrow.prev { left: 0; }
.scroll-arrow.next { right: 0; }

/* ==========================================
   "You May Also Like"
========================================== */


#relatedProductsScroll .product-card {
    /* calc(50% - (间距总和 / 显示数量)) */
    flex: 0 0 calc(50% - 0.5rem); 
    max-width: calc(50% - 0.5rem);
    scroll-snap-align: start; 
}

/* 中等屏幕（平板）：一行显示 3 个产品 (每个占比 33.333%) */
@media (min-width: 768px) {
    #relatedProductsScroll .product-card {
        flex: 0 0 calc(33.333% - 0.666rem);
        max-width: calc(33.333% - 0.666rem);
    }
}

/* 大屏幕（PC端）：一行显示 4 个产品 (每个占比 25%) */
@media (min-width: 992px) {
    #relatedProductsScroll .product-card {
        /* 25% 宽度，减去 gap-3(16px/1rem) 分摊下来的间距 0.75rem */
        flex: 0 0 calc(25% - 0.75rem);
        max-width: calc(25% - 0.75rem);
    }
}

/* ==========================================
   商品详情页 Tabs 样式美化
========================================== */

/* 默认状态：文字灰色，底部透明边框 */
#productTab .nav-link {
    color: #6c757d; /* 灰色 */
    border-bottom: 2px solid transparent !important;
    transition: all 0.3s ease;
}

/* 鼠标悬停：文字变黑 */
#productTab .nav-link:hover {
    color: #121212;
}

/* 激活状态 (Active)：文字变黑，底部出现 2px 黑色实线 */
#productTab .nav-link.active {
    color: #121212 !important; 
    border-bottom: 2px solid #121212 !important;
}


/* ==========================================
   商品缩略图横向滑动区域优化
========================================== */

/* 隐藏横向滚动条 (兼容主流浏览器) */
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* 缩略图激活状态的高亮边框 */
.thumbnail-img.active {
    border-color: #121212 !important; /* 黑色边框，可按品牌色修改 */
    opacity: 1;
}

/* 缩略图默认状态稍微降低透明度，增加 Hover 反馈 */
.thumbnail-img {
    transition: all 0.2s ease;
}

.thumbnail-img:hover {
    opacity: 1;
}

/* 默认手机端尺寸：稍微小一点 */
.custom-thumb-box {
    width: 80px;  
    height: 80px; 
}

/* 屏幕宽度大于 768px (平板和 PC 端)：自动变大 */
@media (min-width: 768px) {
    .custom-thumb-box {
        width: 80px;  
        height: 80px; 
    }
}

/* 2. 让内部图片完美填充并继承边框样式 */
.custom-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border: 1px solid transparent;
}


/* ==========================================
   主图与缩略图高度强制一致 & 内部滚动 (Grid 魔法)
========================================== */

/* 1. 手机端：保持原有的上下排列 (Flex) */
.product-gallery-container {
    display: flex;
    flex-direction: column;
}

/* 2. PC 端 (屏幕宽度 >= 768px)：启用 CSS Grid 布局 */
@media (min-width: 768px) {
    .product-gallery-container {
        display: grid;
        /* 右侧 1fr(主图) 填满剩余空间，左侧 100px(缩略图) */
        /* 🌟 如果你之前把缩略图改成了 120px，这里的 100px 也要对应改成 120px */
        grid-template-columns: 100px 1fr; 
        gap: 1.5rem; /* 控制主图和缩略图的间距 */
    }
    
    /* 3. 给缩略图的外层加一个相对定位，作为绝对定位的“笼子” */
    .product-thumbnails-container {
        position: relative; 
        height: 100%;
    }

    /* 4. 终极魔法：让滑动区域填满笼子，绝对不撑开高度！ */
    .custom-thumb-scroll {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; /* 紧紧锁死上下边界 */
        overflow-y: auto;
        max-height: none !important; /* 清除一切高度限制 */
    }
}

/* ==========================================
   Product Page Buttons (Add to Cart / Buy Now)
   ========================================== */

/* 1. 按钮基础通用样式 */
.product-btn {
    height: 54px; /* 与数量选择器保持高度一致 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px; /* 增加字母间距，提升高级感 */
    border-radius: 0; /* 直角风格，如果你喜欢圆角可以改成 4px 或 8px */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* 2. Add to Cart 按钮 (次级操作：空心/线框风格) */
.btn-add-to-cart {
    background-color: transparent;
    color: #111111;
    border: 1px solid #111111;
}

.btn-add-to-cart:hover,
.btn-add-to-cart:focus {
    background-color: #f8f9fa; /* 鼠标悬停时极其轻微的灰色背景 */
    color: #000000;
    border-color: #000000;
    box-shadow: none; /* 移除 bootstrap 默认的发光效果 */
}

/* 3. Buy It Now */
.btn-buy-now {
    background-color: #111111;
    color: #ffffff;
    border: 1px solid #111111;
    margin-top: 15px; /* 增加与上面元素的间距 */
}

.btn-buy-now:hover,
.btn-buy-now:focus {
    background-color: #333333; /* 悬停时稍微变亮 */
    color: #ffffff;
    border-color: #333333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 悬停时增加轻微阴影，提升点击欲望 */
}

/* 4. 禁用状态 (如果商品售罄) */
.product-btn:disabled,
.product-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #e9ecef !important;
    color: #6c757d !important;
    border-color: #dee2e6 !important;
}

/* ------------------------------------------
   优化数量选择器 (与按钮风格统一)
   ------------------------------------------ */
.cart-calculation {
    display: flex;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    background: #fff;
    width: 120px; /* 固定宽度，防止跳动 */
}

.cart-calculation .cart__counter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    color: #333;
    font-size: 18px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.cart-calculation .cart__counter:hover {
    background-color: #f5f5f5;
}

.cart-calculation .cart__qty-input {
    width: 40px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 600;
    color: #111;
    padding: 0;
    outline: none; /* 移除点击时的边框 */
    -moz-appearance: textfield; /* 隐藏 Firefox 的上下箭头 */
}

/* 隐藏 Chrome/Safari/Edge 的上下箭头 */
.cart-calculation .cart__qty-input::-webkit-outer-spin-button,
.cart-calculation .cart__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* =========================================
   前端色块与图纹展示样式 (Storefront Swatches)
   ========================================= */

/* 通用 Swatch 容器重置 */
.variant-swatch {
    cursor: pointer;
    display: inline-block;
    padding: 2px; /* 给外边框留出空间 */
    border: 1px solid transparent; 
    border-radius: 50%; /* 如果你想做成圆的，就留着；想要方块改成 4px */
    transition: all 0.2s ease-in-out;
}

/* 隐藏输入框被选中时，触发 label 的边框高亮 */
.product-info__variants_radio:checked + .variant-swatch {
    border-color: #111; /* 选中时的外圈颜色 (Shopify 经典黑) */
}

/* --- 颜色色块 (Color) 内部样式 --- */
.variant-color-btn .color-swatch-inner {
    display: block;
    width: 32px;  /* 色块大小 */
    height: 32px;
    border-radius: 50%; /* 圆形色块 */
    border: 1px solid rgba(0, 0, 0, 0.1); /* 防止白色色块看不见 */
    box-shadow: inset 0 0 2px rgba(0,0,0,0.05); /* 增加一点内阴影提升质感 */
}

/* 鼠标悬浮反馈 */
.variant-swatch:hover {
    transform: scale(1.05);
}