/*
Theme Name:     Emarket Child Theme
Theme Uri:      http://demo.wpthemego.com/themes/sw_emarket/
Description:    A child theme of SW Emarket
Author:         Magentech
Author Uri:     http://www.themeforest.net/user/magentech
Template:       emarket
Version:        1.0.0
License:        GNU General Public License v2 or later
*/

/* ========== 移动端导航菜单层级修复 ========== */
@media (max-width: 1024px) {
    /* 提高整个 header 容器的层级 */
    .header-mobile-style1,
    .header-mobile-style2,
    .header-mobile-style3 {
        z-index: 100000 !important;
    }
    
    /* 提高导航菜单容器的层级 */
    .header-mobile-style1 .header-menu-categories .vertical_megamenu .resmenu-container .menu-responsive-wrapper,
    .header-mobile-style2 .header-menu-categories .vertical_megamenu .resmenu-container .menu-responsive-wrapper,
    .header-mobile-style3 .header-menu-categories .vertical_megamenu .resmenu-container .menu-responsive-wrapper,
    .mobile-layout .vertical_megamenu .resmenu-container .menu-responsive-wrapper {
        z-index: 99999 !important;
    }
    
    /* 确保导航菜单的父容器也有足够高的层级 */
    .header-mobile-style1 .header-menu-categories .vertical_megamenu,
    .header-mobile-style2 .header-menu-categories .vertical_megamenu,
    .header-mobile-style3 .header-menu-categories .vertical_megamenu,
    .mobile-layout .vertical_megamenu {
        z-index: 99998 !important;
    }
    
    /* 导航菜单按钮也要提高层级 */
    .header-mobile-style1 .header-menu-categories .vertical_megamenu .resmenu-container .navbar-toggle,
    .header-mobile-style2 .header-menu-categories .vertical_megamenu .resmenu-container .navbar-toggle,
    .header-mobile-style3 .header-menu-categories .vertical_megamenu .resmenu-container .navbar-toggle,
    .mobile-layout .vertical_megamenu .resmenu-container .navbar-toggle {
        z-index: 99999 !important;
    }
    
    /* 导航菜单列表项 */
    .mobile-layout .vertical_megamenu .resmenu-container .menu-responsive-wrapper ul.emarket_resmenu,
    .mobile-layout .vertical_megamenu .resmenu-container .menu-responsive-wrapper ul {
        z-index: 99999 !important;
    }
    
    /* ========== Elementor 菜单层级修复 ========== */
    /* Elementor 菜单容器 */
    .elementor-nav-menu--main,
    .elementor-nav-menu--main ul,
    .elementor-nav-menu--main ul li,
    .elementor-nav-menu--main .elementor-item,
    .swg-menu,
    .swg-menu-horizontal,
    .swg-menu-vertical,
    .swg-menu .dropdown-menu,
    .swg-elementor-menu,
    .swg-elementor-menu > li,
    .swg-elementor-menu .elementor-item {
        z-index: 99999 !important;
    }
    
    /* Elementor 菜单切换按钮 */
    .menu-toggle,
    .elementor-menu-toggle,
    .svg-menu-toggle,
    .dropdown-toggle {
        z-index: 100000 !important;
    }
    
    /* 确保二级菜单展开按钮可点击 */
    .mobile-layout .vertical_megamenu .resmenu-container .menu-responsive-wrapper ul > li .show-dropdown {
        z-index: 100001 !important;
    }
    
    /* Elementor 菜单的下拉按钮 */
    .swg-nav-menu-responsive-mobile .child-menu-more,
    .swg-nav-menu-responsive-tablet .child-menu-more {
        z-index: 100001 !important;
    }
}

/* ========== 移动端标签自适应调整 ========== */
@media (max-width: 768px) {
    /* 推荐卖家分类容器 */
    .suggested-sellers-section .category-icons-container {
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }
    
    /* 分类图标盒自适应 - 4 个标签一行显示 */
    .suggested-sellers-section .category-icon-box {
        flex: 1 0 25%;
        min-width: unset;
        max-width: 25%;
        padding: 10px 5px !important;
        font-size: 10px !important;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 分类标题文字换行处理 */
    .suggested-sellers-section .category-icon-box .category-title {
        display: block;
        line-height: 1.1;
        font-size: 9px !important;
        white-space: normal;
        word-wrap: break-word;
    }
    
    /* 卖家头像容器调整 */
    .suggested-sellers-section .category-icons-row {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }
    
    /* 卖家头像大小调整 */
    .suggested-sellers-section .category-icon-item img {
        width: 60px;
        height: 60px;
        min-width: 60px;
    }
}

/* 超小屏幕进一步优化 */
@media (max-width: 375px) {
    .suggested-sellers-section .category-icon-box {
        font-size: 9px !important;
        padding: 8px 3px !important;
    }
    
    .suggested-sellers-section .category-icon-box .category-title {
        font-size: 8px !important;
    }
}

/* ========== 统一产品页面缩略图大小 ========== */
/* 确保所有缩略图尺寸一致 */
.item-thumbnail-product,
.item-thumbnail-product .thumbnail-wrapper {
    width: 100px !important;
    height: 100px !important;
    overflow: hidden;
}

.item-thumbnail-product img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* 确保缩略图容器大小一致 */
.woocommerce-product-gallery .item-thumbnail-product {
    flex: 0 0 auto !important;
    width: 100px !important;
    height: 100px !important;
}

/* 缩略图 wrapper 使用 flex 布局保持统一 */
.woocommerce-product-gallery .thumbnail-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100px !important;
    height: 100px !important;
}

/* ========== 产品标签 - 斜角丝带样式 ========== */
/*
 * 插件（WooCommerce Advanced Product Labels）默认把标签渲染成圆形浮动在容器角落。
 * 这里覆盖为右上角斜切丝带样式，并由 footer JS 把 DOM 元素移入图片容器内。
 * 主要样式由 PHP 过滤器注入 style_generate 的 <style> 块；
 * 下面的 !important 规则是额外保险，防止插件前端 CSS 覆盖。
 */

/* ── 商店列表：确保图片容器可成为定位锚点 ── */
/* emarket 主题的缩略图用 .item-img.products-thumb > <a> 包裹图片 */
.products li.product {
    position: relative;
}
.products li.product .item-img,
.products li.product .products-thumb,
.products li.product .item-img > a,
.products li.product .products-thumb > a,
.products li.product a:has(.product-thumb-hover),
.products li.product a.woocommerce-LoopProduct-link {
    position: relative;
    display: block;
}

/* ── 丝带外框（.br_alabel）：100×100 裁剪盒，贴紧图片右上角 ── */
.br_alabel.br_alabel_image,
.br_alabel_image {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: 100px !important;
    height: 100px !important;
    overflow: hidden !important;
    z-index: 10 !important;
    pointer-events: none;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* 确保 left 不覆盖 right 定位 */
.br_alabel.br_alabel_image.br_alabel_left,
.br_alabel_image.br_alabel_left {
    right: 0 !important;
    left: auto !important;
}

/* ── 丝带色带（span）：140px 宽，旋转 45° 形成斜角，多层阴影增加立体感 ── */
.br_alabel.br_alabel_image > span,
.br_alabel_image > span {
    position: absolute !important;
    display: block !important;
    width: 140px !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px 0 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    line-height: 1.4 !important;
    top: 24px !important;
    right: -35px !important;
    left: auto !important;
    bottom: auto !important;
    transform: rotate(45deg) !important;
    -webkit-transform: rotate(45deg) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.45),
                0 2px 4px rgba(0,0,0,0.3),
                inset 0 1px 0 rgba(255,255,255,0.25),
                inset 0 -1px 0 rgba(0,0,0,0.15) !important;
    border-radius: 0 !important;
    border: 0 !important;
    flex-direction: row !important;
}

.br_alabel.br_alabel_image > span b,
.br_alabel_image > span b {
    color: #ffffff !important;
}