/**
 * M8WL Store integrated product swatches.
 * Migrated from Code Snippet #899.
 * Developed by M8WL — https://www.m8wl.com/
 */
/* ========== 列表页颜色圆点基础样式 ========== */
.product_list .colors li {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    border: 0.35rem solid #ffffff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.18), 0 2px 5px rgba(0,0,0,0.12);
    transition: transform .2s ease, box-shadow .2s ease;
}

/* 列表页白色圆点 */
.product_list .colors li[style*="--color:#FFFFFF"],
.product_list .colors li[style*="--color: #FFFFFF"],
.product_list .colors li[style*="FFFFFF"],
.product_list .colors li[style*="#fff"],
.product_list .colors li[style*="#FFF"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 0.35rem solid #ffffff !important;
    box-shadow:
        inset 0 0 0 1px #dddddd,
        0 0 0 1.5px #b8b8b8,
        0 2px 6px rgba(0,0,0,0.16) !important;
}

/* ========== 商品详情页颜色圆点基础样式 ========== */
.product_show .left .size_box ul[name="attribute_pa_color"] .size_op {
    width: 5.5rem;
    height: 5.5rem;
    min-width: 5.5rem;
    min-height: 5.5rem;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.18), 0 2px 5px rgba(0,0,0,0.12) !important;
    transition: transform .2s ease, box-shadow .2s ease;
}

/* 商品详情页白色圆点 */
.product_show .left .size_box ul[name="attribute_pa_color"] .size_op[style*="background-color:#FFFFFF"],
.product_show .left .size_box ul[name="attribute_pa_color"] .size_op[style*="background-color: #FFFFFF"],
.product_show .left .size_box ul[name="attribute_pa_color"] .size_op[style*="#FFFFFF"],
.product_show .left .size_box ul[name="attribute_pa_color"] .size_op[style*="#fff"],
.product_show .left .size_box ul[name="attribute_pa_color"] .size_op[value="white"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 2px solid #ffffff !important;
    box-shadow:
        inset 0 0 0 1px #dddddd,
        0 0 0 1.5px #b8b8b8,
        0 2px 6px rgba(0,0,0,0.16) !important;
}

/* 取消旧版斜线 */
.product_list .colors li::after,
.product_show .left .size_box ul[name="attribute_pa_color"] .size_op::after {
    content: none !important;
}

/* Hover 效果 */
.product_list .colors li:hover,
.product_show .left .size_box ul[name="attribute_pa_color"] .size_op:hover {
    transform: scale(1.08);
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.12),
        0 0 0 1.5px #999999,
        0 3px 8px rgba(0,0,0,0.2) !important;
}

/* Keep swatches usable in both preserved and dynamically generated product cards. */
.product_list .colors ul{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.product_list .colors li.m8-product-swatch{background:var(--color,#d9d9d9);}
.product_list .colors li.m8-product-swatch.active{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 2px #111,0 2px 6px rgba(0,0,0,.16)!important;}
.product_show .left .size_box ul[name="attribute_pa_color"] .size_op{background-color:var(--color,inherit);}

/* M8WL v0.3.20 — storefront stock visibility. */
.product_list > li.is-out-of-stock .wrap,
.cart_products li.is-out-of-stock .wrap {
    position: relative;
}
.product_list .off.m8wl-stock-badge,
.cart_products .off.m8wl-stock-badge {
    background: #c62828 !important;
    color: #fff !important;
    min-width: 9.6rem;
    width: auto !important;
    max-width: none !important;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    white-space: nowrap;
}
.product_list > li.is-out-of-stock .icon.cart,
.product_list .icon.cart.m8wl-cart-disabled,
.cart_products .m8wl-cart-disabled {
    cursor: not-allowed;
    opacity: .45;
}
.product_list .colors li.m8-product-swatch.m8wl-option-unavailable {
    position: relative;
    cursor: not-allowed !important;
    opacity: .35;
    transform: none !important;
}
.product_list .colors li.m8-product-swatch.m8wl-option-unavailable::after {
    content: '' !important;
    position: absolute;
    left: 4%;
    right: 4%;
    top: 50%;
    height: 2px;
    background: #c62828;
    transform: rotate(-38deg);
    transform-origin: center;
    z-index: 2;
}