/* ===== 搜索框 ===== */
.my-woo-grid .my-search-box {
    margin-bottom: 16px;
    text-align: center;
}

.my-woo-grid #my-search-input {
    width: 100%;
    max-width: 420px;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 999px;
    outline: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.my-woo-grid #my-search-input:focus {
    border-color: #333;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

/* ===== 搜索模式 ===== */
/* ✅ 搜索时隐藏分类 */
.my-woo-grid.is-search .my-cat-filter-wrap {
    display: none;
}

.my-woo-grid.is-search .my-load-more-wrap {
    margin-top: 20px;
}

/* ===== 搜索时卡片更紧凑一点 ===== */
.my-woo-grid.is-search .my-products {
    gap: 16px;
}

/* ===== 搜索时让按钮更明显  ===== */
.my-woo-grid.is-search #my-load-more {
    opacity: 1;
    background: #333;
}

/* ===== 空结果优化 ===== */
.my-woo-grid .no-result {
    text-align: center;
    padding: 40px 0;
    color: #999;
    font-size: 14px;
}

/* ===== 分类 Tabs ===== */
.my-woo-grid .my-cat-filter {
    display: flex;
    flex-wrap: wrap;        /* ✅ 允许换行 */
    gap: 10px;              /* 行间距 + 列间距 */
    justify-content: center; /* 多行但居中（更美观）*/
    padding-top: 10px;
    padding-bottom: 20px;
}
.my-woo-grid .my-cat-filter::-webkit-scrollbar { display: none; }

.my-woo-grid .my-cat-filter span {
    white-space: nowrap;    /* ✅ 防止文字被拆行 */
    padding: 6px 12px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: #f7f5f0;
    color: #333333;
}
.my-woo-grid .my-cat-filter .active {
    background: #b89555;
    color: #fff;
    border: 1px solid #b89555;
}
.my-woo-grid .my-cat-filter span:not(.active):hover {
    background: #e8dccb;
    border: 1px solid #e8dccb;
}

/* ===== 商品 Grid ===== */
.my-woo-grid .my-products {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    gap: 24px;
}

.my-woo-grid .my-products li.product {
    list-style: none !important;
    transition: all 0.3s ease;
    position: relative;
    border-radius: 16px;
}

/* ✅ 卡片上浮 + 阴影 */
.my-woo-grid .my-products li.product:hover {
    list-style: none !important;
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* 图片 */
.my-woo-grid .my-products img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 不裁剪 */
    border-radius: 16px;
    background: #f5f5f5;
}

/* 标题 */
.my-woo-grid .my-products h2 {
    font-family: "DM Sans", Sans-serif;
    font-size: 22px;
    font-weight: 400;
    margin-top: 10px;
    color: #000 !important;
    text-decoration: none;
    margin-left: 10px;
}

/* 隐藏多余 */
.my-woo-grid .my-products .price,
.my-woo-grid .my-products .button {
    display: none !important;
}

/* ===== 加载 ===== */
.my-woo-grid .my-load-more-wrap {
    text-align: center;
    margin-top: 30px;
}
.my-woo-grid #my-load-more {
    opacity: 1;
    background: #b89555;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 999px;
    cursor: pointer;
    
    /* 核心：让上浮和阴影变化变平滑 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* 鼠标悬停：实现上浮效果 */
.my-woo-grid #my-load-more:hover {
    opacity: 1;
    /* 向上移动 4 像素 */
    transform: translateY(-4px);
    
    /* 阴影变大、变深，增强悬空立体感 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.my-woo-grid .my-loader {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;   /* 垂直居中 */
    height: 200px;
}
.my-woo-grid .my-loader-dot {
    width: 14px;
    height: 14px;
    background: #000;
    border-radius: 50%;
    animation: pulse 1.2s infinite;
}
@keyframes pulse {
    0% { transform: scale(0.6); opacity: 0.5; }
    50% { transform: scale(1.4); opacity: 1; }
    100% { transform: scale(0.6); opacity: 0.5; }
}

.my-woo-grid .my-products li.product .woocommerce-LoopProduct-link {
    position: relative;
    display: block;
}


/* 👉 替换文字 */
.my-woo-grid .my-products li.product .onsale::after {
    content: "セール！";
    font-size: 12px;
}

.my-woo-grid .my-products li.product .onsale {
    position: absolute;
    top: 8px;
    right: 8px !important;
    left: auto !important;

    min-width: 50px;
    height: 50px;

    line-height: 50px;
    text-align: center;

    border-radius: 50%;
    background: #ff0000;
    color: #ffffff;

    font-size: 0;          /* ✅ 隐藏原文字 */
    overflow: hidden;      /* ✅ 关键：防止原文字露出来 */

    padding: 0;
    margin: 0;

    z-index: 9;
}

.my-woo-grid .product-cats {
    font-size: 12px;
    color: #b89555;
    margin-top: 10px;
    margin-bottom: 4px;
    margin-left: 10px;
}

.my-woo-grid .my-products li.product h2 {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

@media (max-width: 768px) {

    /* =========================
       整体容器
    ========================= */
    .my-woo-grid {
        position: relative;
        scroll-margin-top: 60px;
    }

    /* =========================
       Sticky 分类栏
    ========================= */
    .my-cat-filter-wrap {

        position: sticky;
        top: 0;
        z-index: 99;

        overflow: hidden;

        border-radius: 12px;

        /* 完全透明 */
        background: transparent;
    }

    /* Sticky 状态也保持透明 */
    .my-cat-filter-wrap.is-sticky {
        background: transparent;
    }

    /* =========================
       分类栏主体
    ========================= */
    .my-woo-grid .my-cat-filter {

        display: flex;
        flex-wrap: nowrap;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        gap: 10px;

        justify-content: flex-start;

        padding: 0 36px;
    }

    .my-woo-grid .my-cat-filter span {
        flex: 0 0 auto;
    }

    /* 隐藏滚动条 */
    .my-woo-grid .my-cat-filter::-webkit-scrollbar {
        display: none;
    }

    /* =========================
       产品区域
    ========================= */
    .my-woo-grid .my-products {

        padding-top: 10px;

        grid-template-columns:
            repeat(var(--cols-mobile, 1), 1fr);

        padding: 10px 12px;

        gap: 16px;
    }

    /* =========================
       左右提示层（保留）
    ========================= */
    .my-cat-filter-wrap::before,
    .my-cat-filter-wrap::after {

        position: absolute;

        top: 0;
        bottom: 0;

        width: 36px;

        z-index: 3;

        pointer-events: none;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 18px;

        color: #fff;

        opacity: 0;

        transition: opacity 0.2s ease;
    }

    /* =========================
       左提示
    ========================= */
    .my-cat-filter-wrap::before {

        content: '‹';
        font-size: 30px; 

        left: 0;

        background: linear-gradient(
            to right,
            rgba(122,122,122,0.85),
            rgba(122,122,122,0.45),
            rgba(122,122,122,0)
        );

        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
    }

    /* =========================
       右提示
    ========================= */
    .my-cat-filter-wrap::after {

        content: '›';
        font-size: 30px; 

        right: 0;

        background: linear-gradient(
            to left,
            rgba(122,122,122,0.85),
            rgba(122,122,122,0.45),
            rgba(122,122,122,0)
        );

        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
    }

    /* =========================
       状态控制
    ========================= */
    .my-cat-filter-wrap.has-left::before {
        opacity: 1;
    }

    .my-cat-filter-wrap.has-right::after {
        opacity: 1;
    }
}

@media (max-width: 768px) {

    .my-woo-grid .my-search-box {
        padding: 0 12px;
    }

    .my-woo-grid #my-search-input {
        width: 100%;
        font-size: 14px;
        padding: 10px 12px;
    }

    /* 搜索时去掉顶部空隙 */
    .my-woo-grid.is-search .my-products {
        padding-top: 0;
    }
}