/**
 * Joy Detail Page - 详情页专用CSS
 * 
 * 包含两套样式：
 * 1. STYLE A (Detail Style): 主商品大图区域 - 黑色背景，白色圆点，右下角堆叠
 * 2. STYLE B (Card Style): FBT/Related区域 - 透明背景，黑色圆点，与卡片页面一致
 * 
 * 文件位置：/wp-content/themes/woodmart-child/css/joy-detail-page.css
 * 
 * @version 3.4.0
 * @changelog
 * 3.4.0 - 合并修复：
 *       - Elementor 兼容性：主图区域使用 .woocommerce-product-gallery（替代 .product-images）
 *       - FBT 定位修复：添加 .product-labels { display: contents } 让子元素正确定位
 * 3.2.1 - 修复 FBT 区域 .product-labels 缺少 display:contents 导致 Badge 消失的问题
 * 3.2.0 - 修复 Elementor 结构兼容性
 * 3.1.0 - 分离主图样式和FBT/Related样式，避免相互污染
 */

/* ==========================================================================
   STYLE A: DETAIL STYLE (主商品大图区域)
   特点：黑色背景，白色圆点(joy-dot)，右下角垂直堆叠
   作用范围：.woocommerce-product-gallery 内的轮播图/画廊
   【修复】使用 .woocommerce-product-gallery 替代 .product-images（Elementor兼容）
   ========================================================================== */

/* 1. 容器设置为 display:contents，让子元素可以独立定位 */
.single-product .woocommerce-product-gallery .wd-carousel-container .product-labels,
.single-product .woocommerce-product-gallery .wd-gallery-images .product-labels {
    display: contents !important;
}

/* 2. 主图区域：隐藏不需要的 labels */
.single-product .woocommerce-product-gallery .label-attribute-pa_pouch-count,
.single-product .woocommerce-product-gallery .label-attribute-pa_pouch-flavor-category {
    display: none !important;
}

/* 3. 主图区域：隐藏默认的OnSale Badge（红色SALE样式） */
.single-product .woocommerce-product-gallery .wd-carousel-container .onsale,
.single-product .woocommerce-product-gallery .wd-gallery-images .onsale {
    display: none !important;
}

/* 3.1 主图区域：Promo / Hot / New Badge - 左上角 */
.single-product .woocommerce-product-gallery .jp-promo-badge {
    position: absolute !important;
    left: 10px !important;
    top: 10px !important;
    z-index: 11 !important;
    display: block !important;
    background: #83b735 !important;
    color: #fff !important;
    padding: 5px 12px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

/* 3.1.1 FBT/Related 模块中的 Promo Badge - 绝对定位到左上角 */
.wd-fbt .product-labels .jp-promo-badge,
.related .product-labels .jp-promo-badge,
.up-sells .product-labels .jp-promo-badge,
.cross-sells .product-labels .jp-promo-badge {
    position: absolute !important;
    left: 0 !important;
    top: 10px !important; /* 顶部 */
    z-index: 11 !important;
    display: block !important;
    background: #83b735 !important;
    color: #fff !important;
    padding: 4px 10px !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

/* 3.2 主图区域：折扣百分比 Badge - 左上角 */
.jp-discount-badge {
    position: absolute !important;
    left: 10px !important;
    top: 10px !important;
    z-index: 10 !important;
    display: none !important;
    background: #E53935 !important;
    color: #fff !important;
    padding: 5px 12px !important;
    border-radius: 3px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

.jp-discount-badge.jp-show {
    display: block !important;
}

/* 如果同时有promo badge，调整位置 */
.jp-has-promo-badge .jp-discount-badge.jp-show {
    top: 45px !important;
}

/* 如果同时有promo badge和折扣badge，调整折扣badge位置到promo下方 */
/* 通过JS添加 jp-has-promo-badge 类来控制 */
.single-product .woocommerce-product-gallery.jp-has-promo-badge .jp-discount-badge,
.single-product .woocommerce-product-gallery.jp-has-promo-badge .wd-carousel-container .jp-discount-badge,
.single-product .woocommerce-product-gallery.jp-has-promo-badge .wd-gallery-images .jp-discount-badge {
    top: 45px !important;
}

/* 4. 主图区域：右上角 badges 基础定位 */
.single-product .woocommerce-product-gallery .wd-carousel-container .label-attribute-pa_pouch-type,
.single-product .woocommerce-product-gallery .wd-gallery-images .label-attribute-pa_pouch-type {
    position: absolute !important;
    right: 10px !important;
    z-index: 10 !important;
}

/* 4.1 默认隐藏MG和Strength Badge（等JS处理后再显示） */
.single-product .woocommerce-product-gallery .wd-carousel-container .label-attribute-pa_nicotine-content-per-pouch,
.single-product .woocommerce-product-gallery .wd-carousel-container .label-attribute-pa_nicotine-strength-level,
.single-product .woocommerce-product-gallery .wd-gallery-images .label-attribute-pa_nicotine-content-per-pouch,
.single-product .woocommerce-product-gallery .wd-gallery-images .label-attribute-pa_nicotine-strength-level {
    display: none !important;
}

/* 4.2 在容器内时才显示 */
.single-product .woocommerce-product-gallery .jp-nicotine-group .label-attribute-pa_nicotine-content-per-pouch {
    display: block !important;
}

.single-product .woocommerce-product-gallery .jp-nicotine-group .label-attribute-pa_nicotine-strength-level {
    display: flex !important;
}

/* 5. 主图区域：Type Badge - 右上角（最上面） */
.single-product .woocommerce-product-gallery .label-attribute-pa_pouch-type {
    top: 10px !important;
    background: #000 !important;
    color: #fff !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    min-width: 60px !important;
    text-align: center !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}

/* 6. 主图区域：MG和Strength合并容器 - 右上角（Type下面） */
.single-product .woocommerce-product-gallery .jp-nicotine-group {
    position: absolute !important;
    right: 10px !important;
    top: 50px !important;
    z-index: 10 !important;
    background: #000 !important;
    border-radius: 4px !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    min-width: 60px !important;
}

/* 6.1 容器内的MG Badge */
.single-product .woocommerce-product-gallery .jp-nicotine-group .label-attribute-pa_nicotine-content-per-pouch {
    position: static !important;
    background: transparent !important;
    color: #fff !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    min-width: auto !important;
    text-align: center !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* 6.2 容器内的Strength 圆点 */
.single-product .woocommerce-product-gallery .jp-nicotine-group .label-attribute-pa_nicotine-strength-level {
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    min-width: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: none !important;
    font-size: 0 !important;
    color: transparent !important;
    width: 100% !important;
}

/* 主图圆点样式 (joy-dot) - 放大圆点，白色边框/白色实心 */
.single-product .woocommerce-product-gallery .jp-nicotine-group .label-attribute-pa_nicotine-strength-level .joy-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    border: 1.5px solid #fff !important;
    background: transparent !important;
    box-sizing: border-box !important;
    display: inline-block !important;
}

.single-product .woocommerce-product-gallery .jp-nicotine-group .label-attribute-pa_nicotine-strength-level .joy-dot.filled {
    background: #fff !important;
}

/* 8. 主图区域：Flavor Pill Badge - 底部中间 */
.single-product .woocommerce-product-gallery .wd-carousel-container .label-attribute-pa_pouch-flavor,
.single-product .woocommerce-product-gallery .wd-gallery-images .label-attribute-pa_pouch-flavor {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    background: #fff !important;
    border: 2px solid #8C8C8C;
    color: #8C8C8C;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    white-space: nowrap !important;
}


/* ==========================================================================
   STYLE B: CARD STYLE (FBT / Related Products / Up-sells 区域)
   特点：透明背景，黑色圆点(jp-dot)，与 joy-card-page.css 保持一致
   作用范围：.wd-fbt, .related, .up-sells, .cross-sells
   ========================================================================== */

/* 0. 强制给 FBT 产品卡片加上相对定位 */
.wd-fbt .product-grid-item,
.wd-fbt .wd-product,
.related .product-grid-item,
.up-sells .product-grid-item,
.cross-sells .product-grid-item {
    position: relative !important;
}

/* 【关键修复】FBT/Related区域：Product Labels 容器必须为 contents，否则子元素无法正确定位 */
.wd-fbt .product-labels,
.related .product-labels,
.up-sells .product-labels,
.cross-sells .product-labels {
    display: contents !important;
}

/* 1. FBT/Related区域：隐藏不需要的 labels */
.wd-fbt .label-attribute-pa_pouch-count,
.wd-fbt .label-attribute-pa_pouch-type,
.wd-fbt .label-attribute-pa_pouch-flavor-category,
.related .label-attribute-pa_pouch-count,
.related .label-attribute-pa_pouch-type,
.related .label-attribute-pa_pouch-flavor-category,
.up-sells .label-attribute-pa_pouch-count,
.up-sells .label-attribute-pa_pouch-type,
.up-sells .label-attribute-pa_pouch-flavor-category,
.cross-sells .label-attribute-pa_pouch-count,
.cross-sells .label-attribute-pa_pouch-type,
.cross-sells .label-attribute-pa_pouch-flavor-category {
    display: none !important;
}

/* 2. FBT/Related区域：Strength Level - 透明背景，右上角 */
.wd-fbt .label-attribute-pa_nicotine-strength-level,
.related .label-attribute-pa_nicotine-strength-level,
.up-sells .label-attribute-pa_nicotine-strength-level,
.cross-sells .label-attribute-pa_nicotine-strength-level {
    position: absolute !important;
    right: -5px !important;
    top: 10px !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    background: transparent !important;
    padding: 0 8px !important;
    border-radius: 3px !important;
    font-size: 0 !important;
    color: transparent !important;
    box-shadow: none !important;
}

/* 卡片样式圆点 (jp-dot) - 黑色边框/黑色实心 */
.wd-fbt .label-attribute-pa_nicotine-strength-level .jp-dot,
.related .label-attribute-pa_nicotine-strength-level .jp-dot,
.up-sells .label-attribute-pa_nicotine-strength-level .jp-dot,
.cross-sells .label-attribute-pa_nicotine-strength-level .jp-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    border: 1.5px solid #000 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    display: inline-block !important;
}

.wd-fbt .label-attribute-pa_nicotine-strength-level .jp-dot.filled,
.related .label-attribute-pa_nicotine-strength-level .jp-dot.filled,
.up-sells .label-attribute-pa_nicotine-strength-level .jp-dot.filled,
.cross-sells .label-attribute-pa_nicotine-strength-level .jp-dot.filled {
    background: #000 !important;
}

/* 3. FBT/Related区域：MG Badge - 右上角，圆点下方 */
.wd-fbt .label-attribute-pa_nicotine-content-per-pouch,
.related .label-attribute-pa_nicotine-content-per-pouch,
.up-sells .label-attribute-pa_nicotine-content-per-pouch,
.cross-sells .label-attribute-pa_nicotine-content-per-pouch {
    position: absolute !important;
    right: 0 !important;
    top: 25px !important;
    z-index: 10 !important;
    display: block !important;
    background: #000 !important;
    color: #fff !important;
    padding: 5px 12px !important;
    border-radius: 3px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    min-width: 55px !important;
    text-align: center !important;
    box-shadow: none !important;
}

/* 4. FBT/Related区域：Flavor Badge - 图片底部居中 */
.wd-fbt .label-attribute-pa_pouch-flavor,
.related .label-attribute-pa_pouch-flavor,
.up-sells .label-attribute-pa_pouch-flavor,
.cross-sells .label-attribute-pa_pouch-flavor {
    position: absolute !important;
    bottom: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    display: block !important;
    background: #fff !important;
    border: 2px solid #8C8C8C;
    color: #8C8C8C;
    border-radius: 20px !important;
    padding: 5px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    text-transform: none !important;
    box-shadow: none !important;
}

/* 5. FBT区域：OnSale Badge - 默认左上角 */
.wd-fbt .product-labels .onsale,
.related .product-labels .onsale,
.up-sells .product-labels .onsale,
.cross-sells .product-labels .onsale {
    position: absolute !important;
    left: 0 !important;
    top: 10px !important;
    z-index: 10 !important;
    display: block !important;
    background: #E53935 !important;
    color: #fff !important;
    border-radius: 3px !important;
}

/* 5.1 如果有 jp-promo-badge，SALE 移到下方 */
.wd-fbt .product-labels .jp-promo-badge ~ .onsale,
.related .product-labels .jp-promo-badge ~ .onsale,
.up-sells .product-labels .jp-promo-badge ~ .onsale,
.cross-sells .product-labels .jp-promo-badge ~ .onsale {
    top: 40px !important;
}


/* ==========================================================================
   RESPONSIVE STYLES
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    /* 主图区域 - 右上角badges */
    .single-product .woocommerce-product-gallery .label-attribute-pa_pouch-type {
        top: 8px !important;
        font-size: 11px !important;
        padding: 5px 8px !important;
    }
    
    .single-product .woocommerce-product-gallery .jp-nicotine-group {
        top: 45px !important;
        padding: 6px 8px !important;
        gap: 5px !important;
    }
    
    .single-product .woocommerce-product-gallery .jp-nicotine-group .label-attribute-pa_nicotine-content-per-pouch {
        font-size: 12px !important;
    }
    
    .single-product .woocommerce-product-gallery .jp-nicotine-group .label-attribute-pa_nicotine-strength-level .joy-dot {
        width: 7px !important;
        height: 7px !important;
    }
    
    /* FBT/Related区域 */
    .wd-fbt .label-attribute-pa_nicotine-content-per-pouch,
    .related .label-attribute-pa_nicotine-content-per-pouch,
    .up-sells .label-attribute-pa_nicotine-content-per-pouch,
    .cross-sells .label-attribute-pa_nicotine-content-per-pouch {
        font-size: 11px !important;
        padding: 4px 10px !important;
        top: 28px !important;
    }
    
    .wd-fbt .label-attribute-pa_nicotine-strength-level .jp-dot,
    .related .label-attribute-pa_nicotine-strength-level .jp-dot,
    .up-sells .label-attribute-pa_nicotine-strength-level .jp-dot,
    .cross-sells .label-attribute-pa_nicotine-strength-level .jp-dot {
        width: 8px !important;
        height: 8px !important;
    }
    
    .wd-fbt .label-attribute-pa_pouch-flavor,
    .related .label-attribute-pa_pouch-flavor,
    .up-sells .label-attribute-pa_pouch-flavor,
    .cross-sells .label-attribute-pa_pouch-flavor {
        font-size: 12px !important;
        padding: 4px 12px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* 主图区域 - 右上角badges */
    .single-product .woocommerce-product-gallery .label-attribute-pa_pouch-type {
        top: 5px !important;
        font-size: 10px !important;
        padding: 4px 6px !important;
    }
    
    .single-product .woocommerce-product-gallery .jp-nicotine-group {
        top: 38px !important;
        padding: 5px 6px !important;
        gap: 4px !important;
        min-width: 50px !important;
    }
    
    .single-product .woocommerce-product-gallery .jp-nicotine-group .label-attribute-pa_nicotine-content-per-pouch {
        font-size: 11px !important;
    }
    
    .single-product .woocommerce-product-gallery .jp-nicotine-group .label-attribute-pa_nicotine-strength-level .joy-dot {
        width: 6px !important;
        height: 6px !important;
    }
    
    .single-product .woocommerce-product-gallery .label-attribute-pa_pouch-flavor {
        font-size: 11px !important;
        padding: 3px 10px !important;
    }
    
    /* FBT/Related区域 */
    .wd-fbt .label-attribute-pa_nicotine-strength-level .jp-dot,
    .related .label-attribute-pa_nicotine-strength-level .jp-dot,
    .up-sells .label-attribute-pa_nicotine-strength-level .jp-dot,
    .cross-sells .label-attribute-pa_nicotine-strength-level .jp-dot {
        width: 7px !important;
        height: 7px !important;
    }
    
    .wd-fbt .label-attribute-pa_nicotine-content-per-pouch,
    .related .label-attribute-pa_nicotine-content-per-pouch,
    .up-sells .label-attribute-pa_nicotine-content-per-pouch,
    .cross-sells .label-attribute-pa_nicotine-content-per-pouch {
        font-size: 10px !important;
        padding: 3px 8px !important;
    }
    
    .wd-fbt .label-attribute-pa_pouch-flavor,
    .related .label-attribute-pa_pouch-flavor,
    .up-sells .label-attribute-pa_pouch-flavor,
    .cross-sells .label-attribute-pa_pouch-flavor {
        font-size: 11px !important;
        padding: 3px 10px !important;
    }
}