/* --- 产品详情页响应式补丁 --- */
/* 全局修复：为 body 增加顶部内边距，确保内容不被 fixed header 遮挡 */
body {
    padding-top: 100px; /* 移动端高度 */
}

@media (min-width: 1024px) {
    body {
        padding-top: 110px; /* 桌面端高度 */
    }
}

/* 平滑滚动及锚点偏移修复 */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px; 
}
/* 1. 解决图片加载前的容器塌陷问题 */
.productSwiper {
    min-height: 350px;
    background-color: #fcfcfc;
    border-radius: 1rem;
}
/* 2. 手机端 (小于 1024px) 专项优化 */
@media (max-width: 1024px) {
    /* 缩小顶部间距，让产品图在首屏露出更多 */
    main.py-12 {
        padding-top: 1.5rem !important;
        padding-bottom: 2rem !important;
    }

    /* 详情页网格间距优化 */
    .grid.gap-16 {
        gap: 2rem !important;
    }

    /* 标题字号缩小，避免长标题折行过多 */
    h1#p-name {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.75rem !important;
    }

    /* 购买按钮高度适中，方便点击 */
    button[onclick="handleBuyNow()"] {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
        font-size: 0.875rem !important;
    }

    /* 详情长图区域间距优化 */
    .mt-24 {
        margin-top: 3rem !important;
    }
}

/* 3. 详情图片显示优化 */
#details-images-container img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
    border-radius: 4px;
}

/* 4. 隐藏手机端可能导致溢出的横向滚动条 */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* ================================================ */
/*          手机端产品详情页优化 - 2025年12月新增     */
/* 只影响 max-width: 1023px 以下的设备              */
/* 桌面端显示完全不受影响                           */
/* ================================================ */

@media (max-width: 1023px) {
    /* 1. 核心修复：取消图片区域的 sticky 效果 */
    .productSwiper,
    main .grid > div:first-child {
        position: relative !important;
        top: auto !important;
    }

    /* 2. 主图区域高度控制 - 更适合手机竖屏浏览 */
    .productSwiper {
        aspect-ratio: 4 / 5;           /* 偏竖向比例，更自然 */
        max-height: 65vh;              /* 最多占屏幕65%左右 */
        min-height: 320px;
        margin-bottom: 1.25rem;
        border-radius: 0.75rem;
    }

    .productSwiper .swiper-slide img {
        object-fit: contain;           /* 优先完整显示图片 */
        background-color: #f9f9f9;     /* 加载中背景，避免白屏突兀 */
    }

    /* 3. 让商品信息和操作按钮更快出现在可视区域 */
    main .grid {
        gap: 1.25rem !important;
    }

    /* 商品名称、价格等文字适当调整 */
    h1#p-name {
        font-size: 1.625rem !important;
        margin-bottom: 0.5rem !important;
    }

    #p-price {
        font-size: 1.75rem !important;
    }

    /* 购买按钮优化 - 更大、更显眼、更容易点 */
    button[onclick="handleBuyNow()"] {
        min-height: 56px;
        font-size: 1.0625rem !important;
        font-weight: 600 !important;
        border-radius: 3rem !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
        padding-top: 1.125rem !important;
        padding-bottom: 1.125rem !important;
    }

    /* 数量选择器稍微缩小一点，节省空间 */
    .border.border-gray-200.rounded-xl.overflow-hidden {
        transform: scale(0.95);
        transform-origin: left center;
    }

    /* 描述文字阅读更舒适 */
    #p-desc {
        font-size: 0.9375rem !important;
        line-height: 1.7 !important;
    }

    /* 详情图片区域顶部间距适当收紧 */
    #details-images-container {
        margin-top: 2rem !important;
    }
}