/* HH_SHOP_GRID_RIBBON_FIX_START */

/* 1. 双排改成横向排序：1左 2右 3左 4右 */
#productList.products.double,
.products.double{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    column-count:initial!important;
    column-gap:0!important;
    align-items:start!important;
}

#productList.products.double .product,
.products.double .product{
    display:block!important;
    width:auto!important;
    margin:0!important;
    break-inside:auto!important;
    -webkit-column-break-inside:auto!important;
    page-break-inside:auto!important;
}

/* 防止双排时卡片图片区域太高 */
#productList.products.double .no-main,
.products.double .no-main{
    min-height:150px!important;
}

/* 2. 让商品主图区域成为徽章定位父级 */
.product .pic{
    position:relative!important;
    overflow:hidden!important;
}

/* 3. HOT 稍微收紧一点 */
.product .pic .hh-hot-badge,
.product .pic .hot-badge,
.product .pic [class*="hot"],
.product [class*="hot-badge"]{
    top:12px!important;
    right:12px!important;
    transform:scale(.92)!important;
    transform-origin:right top!important;
}

/* 4. 置顶绶带：更宽，往右上移动，文字居中且不被反光盖住 */
.product .pic .hh-top-ribbon,
.product .pic .hh-sticky-ribbon,
.product .pic .hh-pin-ribbon,
.product .pic .top-ribbon,
.product .pic .sticky-ribbon,
.product .pic .pin-ribbon,
.product .pic [class*="top-ribbon"],
.product .pic [class*="sticky-ribbon"],
.product .pic [class*="pin-ribbon"],
.product .pic [class*="ribbon-top"]{
    position:absolute!important;
    z-index:8!important;

    width:118px!important;
    height:34px!important;
    line-height:34px!important;

    left:-28px!important;
    top:14px!important;

    transform:rotate(-42deg)!important;
    transform-origin:center center!important;

    text-align:center!important;
    text-indent:8px!important;
    letter-spacing:2px!important;

    font-size:17px!important;
    font-weight:1000!important;
    color:#4a2a00!important;

    border-radius:0!important;
    overflow:hidden!important;

    background:linear-gradient(135deg,#ffd447 0%,#ffb300 42%,#fff0a0 55%,#ffba19 70%,#ffd447 100%)!important;
    box-shadow:0 10px 22px rgba(255,188,0,.38)!important;
}

/* 反光条：在黄色背景上滑过，文字保持在上层 */
.product .pic .hh-top-ribbon::before,
.product .pic .hh-sticky-ribbon::before,
.product .pic .hh-pin-ribbon::before,
.product .pic .top-ribbon::before,
.product .pic .sticky-ribbon::before,
.product .pic .pin-ribbon::before,
.product .pic [class*="top-ribbon"]::before,
.product .pic [class*="sticky-ribbon"]::before,
.product .pic [class*="pin-ribbon"]::before,
.product .pic [class*="ribbon-top"]::before{
    content:""!important;
    position:absolute!important;
    z-index:0!important;
    top:-8px!important;
    left:-42px!important;
    width:24px!important;
    height:54px!important;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent)!important;
    transform:skewX(-18deg)!important;
    animation:hhRibbonLight 2.2s linear infinite!important;
    pointer-events:none!important;
}

.product .pic .hh-top-ribbon::after,
.product .pic .hh-sticky-ribbon::after,
.product .pic .hh-pin-ribbon::after,
.product .pic .top-ribbon::after,
.product .pic .sticky-ribbon::after,
.product .pic .pin-ribbon::after,
.product .pic [class*="top-ribbon"]::after,
.product .pic [class*="sticky-ribbon"]::after,
.product .pic [class*="pin-ribbon"]::after,
.product .pic [class*="ribbon-top"]::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:-1!important;
}

@keyframes hhRibbonLight{
    0%{ left:-42px; }
    100%{ left:130px; }
}

/* 如果文字被伪元素影响，强制文字层更高 */
.product .pic .hh-top-ribbon *,
.product .pic .hh-sticky-ribbon *,
.product .pic .hh-pin-ribbon *,
.product .pic .top-ribbon *,
.product .pic .sticky-ribbon *,
.product .pic .pin-ribbon *{
    position:relative!important;
    z-index:2!important;
}

/* 小屏双排更紧凑 */
@media(max-width:390px){
    #productList.products.double,
    .products.double{
        gap:10px!important;
    }

    #productList.products.double .no-main,
    .products.double .no-main{
        min-height:138px!important;
    }

    .product .pic .hh-top-ribbon,
    .product .pic .hh-sticky-ribbon,
    .product .pic .hh-pin-ribbon,
    .product .pic .top-ribbon,
    .product .pic .sticky-ribbon,
    .product .pic .pin-ribbon,
    .product .pic [class*="top-ribbon"],
    .product .pic [class*="sticky-ribbon"],
    .product .pic [class*="pin-ribbon"],
    .product .pic [class*="ribbon-top"]{
        width:112px!important;
        height:32px!important;
        line-height:32px!important;
        left:-27px!important;
        top:13px!important;
        font-size:16px!important;
        text-indent:8px!important;
    }
}

/* HH_SHOP_GRID_RIBBON_FIX_END */