/* =========================================================
   1. Mini 商品卡片
   ========================================================= */

.block-product-card.block-product-card--mini {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: calc(var(--spacing-base) / 2);
}

.block-product-card.block-product-card--mini .block-product-card__layer-image-wrapper {
    width: 120px;
    height: auto;
    flex-shrink: 0;
}

.block-product-card.block-product-card--mini .block-product-card__image-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: var(--aspect-ratio);
}

.block-product-card.block-product-card--mini .block-product-card__title {
    padding-inline-end: 0;
}

.block-product-card.block-product-card--mini .block-product-card__quick-add {
    width: auto;
}


/* =========================================================
   2. Mini 商品卡片 - 移动端
   ========================================================= */

@media (max-width: 959px) {

    .block-product-card.block-product-card--mini .block-product-card__layer-image-wrapper {
        width: 90px;
    }

}


/* =========================================================
   3. 商品卡片信息
   ========================================================= */

.block-product-card__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-inline-start: var(--spacing-base);
}

.block-product-card__info theme-quick-add-modal {
    margin-top: 8px;
}

.block-product-card.product-card-style--card {
    background-color: rgb(var(--color-background));
}


/* =========================================================
   4. Quick Add 按钮
   ========================================================= */

.block-product-card__quick-add.button {
    margin-block-start: 8px;
}

.block-product-card__quick-add.block-product-card__quick-add--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.05);
    border: 0;
    border-radius: 50%;
    color: rgba(var(--color-text), 0.5);
    transition: all .25s ease;
}

.block-product-card__quick-add.block-product-card__quick-add--icon:hover {
    color: rgba(255, 255, 255, 0.65);
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 0 .2rem rgb(0, 0, 0, 0.8);
}

.block-product-card__quick-add.block-product-card__quick-add--icon:hover svg {
    transform: scale(0.9);
}

.block-product-card__quick-add svg {
    max-width: 20px;
    width: 100%;
    height: 100%;
}


/* =========================================================
   5. PC 端 Quick Add 图标 hover
   ========================================================= */

@media (min-width: 960px) {

    .block-product-card .block-product-card__quick-add--icon {
        opacity: 0;
        transform: translate(-100%);
    }

    .block-product-card:hover .block-product-card__quick-add--icon {
        opacity: 1;
        transform: translate(0);
    }

}


/* =========================================================
   6. 移动端 Quick Add 按钮
   ========================================================= */

@media (max-width: 959px) {

    .block-product-card__quick-add,
    .block-product-card__quick-add.block-product-card__quick-add--icon {
        width: 34px;
        min-width: 34px;
        height: 34px;
    }

}


/* =========================================================
   7. Quick Add Loading
   ========================================================= */

.block-product-card__quick-add .icon-loading {
    display: none;
    margin: 8px;
    color: rgb(255 255 255 / 100%);
    animation: animation-button-loading linear 1.5s infinite;
}

.block-product-card__quick-add.loading {
    pointer-events: none;
}

.block-product-card__quick-add.loading .icon-quick-add {
    display: none;
}

.block-product-card__quick-add.loading .icon-loading {
    display: block;
}


/* =========================================================
   8. Quick Add 弹窗 - PC 默认
   ========================================================= */

.block-product-card__modal-content {
    width: 80vw;
    max-width: 1200px;
    max-height: 80vh;
    overflow-y: auto;

    box-sizing: border-box;
}


/* =========================================================
   9. Quick Add 弹窗商品详情
   ========================================================= */

.block-product-card__modal-content theme-product-detail {

    --page-padding: 40px;

    --detail-padding-inline-start: 0px !important;
    --detail-padding-inline-end: 0px !important;
    --detail-padding-block-start: 0px !important;
    --detail-padding-block-end: 0px !important;

    padding: var(--page-padding);
}


/* =========================================================
   10. 隐藏 COMPLETE THE SET
   ========================================================= */

/*
   如果 COMPLETE THE SET 的外层 class 是
   .block-related-products
   直接隐藏
*/

.block-product-card__modal-content .block-related-products {
    display: none !important;
}


/*
   兼容一些主题结构：
   如果 COMPLETE THE SET 是商品推荐区域，
   一并隐藏相关推荐区域
*/

.block-product-card__modal-content .product-detail__related-products {
    display: none !important;
}


/* =========================================================
   11. Quick Add 弹窗中的隐藏项目
   ========================================================= */

.block-product-card__modal-content .quick-add-hidden {
    display: none !important;
}


/* =========================================================
   12. 移动端 Quick Add 弹窗
   ========================================================= */

@media (max-width: 959px) {

    /*
   * =======================================================
   * 12.1 弹窗本身
   *
   * 重点：
   * 这里使用 @media，而不是 @container
   * 因为我们需要控制的是弹窗父元素本身
   * =======================================================
   */

    .block-product-card__modal {

        position: fixed !important;

        left: 0 !important;
        right: 0 !important;

        top: auto !important;
        bottom: 0 !important;

        width: 100vw !important;
        max-width: 100vw !important;

        height: 75vh !important;

        min-height: 0 !important;
        max-height: 80vh !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;

        border-radius: 16px 16px 0 0 !important;

        background-color:
            rgb(var(--color-background, 255, 255, 255));

        z-index: 999999 !important;
    }


    /*
   * =======================================================
   * 12.2 弹窗内容
   * =======================================================
   */

    .block-product-card__modal-content {

        width: 100% !important;

        max-width: none !important;

        height: 100% !important;

        max-height: none !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow-x: hidden !important;

        overflow-y: auto !important;

        box-sizing: border-box !important;

        -webkit-overflow-scrolling: touch;
    }


    /*
   * =======================================================
   * 12.3 商品详情整体
   * =======================================================
   */

    .block-product-card__modal-content theme-product-detail {

        --page-padding: 0px;

        --detail-padding-inline-start: 0px !important;
        --detail-padding-inline-end: 0px !important;
        --detail-padding-block-start: 0px !important;
        --detail-padding-block-end: 0px !important;

        width: 100% !important;
        max-width: 100% !important;

        padding: 0 !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    /*
   * =======================================================
   * 12.4 商品详情主体
   * =======================================================
   */

    .block-product-card__modal-content theme-product-detail .product-detail {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        gap: 20px !important;

        padding: 20px !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    /*
   * =======================================================
   * 12.5 商品详情列
   * =======================================================
   */

    .block-product-card__modal-content theme-product-detail .product-detail__col--small,

    .block-product-card__modal-content theme-product-detail .product-detail__col--medium,

    .block-product-card__modal-content theme-product-detail .product-detail__col--large {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        flex: none !important;

        box-sizing: border-box !important;
    }


    /*
   * =======================================================
   * 12.6 商品信息
   * =======================================================
   */

    .block-product-card__modal-content theme-product-detail .product-detail__info {

        position: static !important;

        inset: auto !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /*
   * =======================================================
   * 12.7 商品信息容器
   * =======================================================
   */

    .block-product-card__modal-content theme-product-detail .product-detail__info-container {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /*
   * =======================================================
   * 12.8 商品媒体
   * =======================================================
   */

    .block-product-card__modal-content theme-product-detail .product-detail__media {

        position: static !important;

        inset: auto !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /*
   * =======================================================
   * 12.9 商品媒体组
   * =======================================================
   */

    .block-product-card__modal-content theme-product-detail .product-detail__media-group {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /*
   * =======================================================
   * 12.10 商品图片
   * =======================================================
   */

    .block-product-card__modal-content theme-product-detail theme-product-media-gallery {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /*
   * =======================================================
   * 12.11 移动端图片全宽
   * =======================================================
   */

    .block-product-card__modal-content theme-product-detail theme-product-media-gallery[data-mobile-layout="fullscreen"] {

        width: 100% !important;

        max-width: 100% !important;

        margin-inline: 0 !important;
    }


    /*
   * =======================================================
   * 12.12 隐藏 COMPLETE THE SET
   * =======================================================
   */

    .block-product-card__modal-content .block-related-products {

        display: none !important;
    }


    .block-product-card__modal-content .product-detail__related-products {

        display: none !important;
    }


    /*
   * =======================================================
   * 12.13 关闭按钮
   * =======================================================
   */

    .block-product-card__modal-close {

        position: absolute !important;

        top: 10px !important;
        right: 10px !important;

        z-index: 999999 !important;

        width: 32px !important;
        min-width: 32px !important;

        height: 32px !important;

        padding: 0 !important;

        margin: 0 !important;
    }

}


/* =========================================================
   13. 商品标题
   ========================================================= */

.block-product-card__title {

    display: -webkit-box;

    flex-shrink: 0;

    padding-inline-end: 4px;

    overflow: hidden;

    color: rgb(var(--color-text));

    text-overflow: ellipsis;

    -webkit-line-clamp: var(--max-row);

    -webkit-box-orient: vertical;
}

.block-product-card__title.product-card-style--card {
    padding-inline: 8px;
}


/* =========================================================
   14. 商品价格
   ========================================================= */

.block-product-card__price.product-card-style--card {
    padding-inline: 8px;
}


/* =========================================================
   15. 折扣标签
   ========================================================= */

.block-product-card__discount-tag {

    padding: 3px 8px;

    color: rgb(var(--color-tag-text));

    background-color: rgb(var(--color-tag-background));

    border-radius: var(--product-discount-radius);
}

@media (max-width: 959px) {

    .block-product-card__discount-tag {
        padding: 2px 8px;
    }

}


/* =========================================================
   16. 售罄标签
   ========================================================= */

.block-product-card__sold-out {

    padding: 3px 8px;

    color: rgb(0 0 0 / 100%);

    background-color: rgb(255 255 255 / 100%);

    border-radius: var(--product-discount-radius);
}

@media (max-width: 959px) {

    .block-product-card__sold-out {
        padding: 2px 8px;
    }

}


/* =========================================================
   17. 商品图片层
   ========================================================= */

.block-product-card__layer-image-wrapper {

    position: relative;

    display: flex;

    width: 100%;

    padding: var(--padding);

    overflow: hidden;
}


/* =========================================================
   18. PC 端商品图片 Hover 切换
   ========================================================= */

@media (min-width: 960px) {

    .block-product-card__layer-image-wrapper.hover:hover .block-product-card__image:nth-of-type(1) {

        opacity: 0;
    }

    .block-product-card__layer-image-wrapper.hover:hover .block-product-card__image:nth-of-type(2) {

        opacity: 1;
    }

}


/* =========================================================
   19. 商品图片容器
   ========================================================= */

.block-product-card__image-wrapper {

    position: relative;

    width: 100%;

    height: 100%;

    aspect-ratio: var(--aspect-ratio);

    overflow: hidden;

    background-color: rgb(243 243 243 / 100%);

    border-radius: var(--border-radius);
}

.block-product-card__image-wrapper>svg {

    width: 100%;

    height: 100%;
}


/* =========================================================
   20. 商品图片
   ========================================================= */

.block-product-card__image-wrapper>.block-product-card__image {

    position: absolute;

    width: 100%;

    height: 100%;

    object-fit: var(--fit-type);

    /*
   * 这里改成 0，
   * 实现鼠标经过时直接切换图片，
   * 不再渐变
   */
    transition: none !important;
}


/* 第一张图片 */

.block-product-card__image-wrapper>.block-product-card__image:nth-of-type(1) {

    opacity: 1;
}


/* 第二张图片 */

.block-product-card__image-wrapper>.block-product-card__image:nth-of-type(2) {

    opacity: 0;
}


/* =========================================================
   21. 商品图片 Layer
   ========================================================= */

.block-product-card__layer-wrapper {

    position: absolute;

    inset: 0;
}
/* =========================================================
   Quick Add 弹窗 - 移动端
   图片全宽贴顶，商品信息左右保留 20px
========================================================= */

@media (max-width: 959px) {

    /* 弹窗本身 */
    .block-product-card__modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 80vh !important;
        overflow-y: auto;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 商品详情容器 */
    .block-product-card__modal-content theme-product-detail {
        --page-padding: 0px !important;

        --detail-padding-inline-start: 0px !important;
        --detail-padding-inline-end: 0px !important;
        --detail-padding-block-start: 0px !important;
        --detail-padding-block-end: 0px !important;

        padding: 0 !important;
        margin: 0 !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    /* =====================================================
       商品详情整体
    ===================================================== */

    .block-product-card__modal-content theme-product-detail .product-detail {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* =====================================================
       商品图片区域
       图片贴弹窗顶部
    ===================================================== */

    .block-product-card__modal-content theme-product-detail .product-detail__col--small,

    .block-product-card__modal-content theme-product-detail .product-detail__col--medium,

    .block-product-card__modal-content theme-product-detail .product-detail__col--large {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .block-product-card__modal-content theme-product-detail .product-detail__media {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        position: static !important;
        inset: auto !important;
    }

    .block-product-card__modal-content theme-product-detail .product-detail__media-group {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* =====================================================
       商品信息区域
       这里才保留左右 20px
    ===================================================== */

    .block-product-card__modal-content theme-product-detail .product-detail__info {

        position: static !important;
        inset: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding: 20px !important;

        box-sizing: border-box;
    }

    .block-product-card__modal-content theme-product-detail .product-detail__info-container {

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

}

/* 默认不在正常商品详情页显示 */
.quick-add-promo {
    display: none;
}

/* 只在快速加购弹窗显示 */
.block-product-card__modal-content .quick-add-promo {
    display: block;
    width: 100%;
    margin: 16px 0 10px;
    position: relative;
}

/* 去掉 details 默认三角 */
.block-product-card__modal-content .quick-add-promo>summary {
    list-style: none;
}

.block-product-card__modal-content .quick-add-promo>summary::-webkit-details-marker {
    display: none;
}

.block-product-card__modal-content .quick-add-promo__toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px 20px;
    box-sizing: border-box;
    background: #fff7f7;
    color: #c90000;
    cursor: pointer;
}

.block-product-card__modal-content .quick-add-promo__icon {
    display: flex;
    flex-shrink: 0;
    color: #c90000;
}

.block-product-card__modal-content .quick-add-promo__content {
    flex: 1;
    min-width: 0;
}

.block-product-card__modal-content .quick-add-promo__title {
    font-size: 16px;
    font-weight: 600;
}

.block-product-card__modal-content .quick-add-promo__desc {
    margin-top: 3px;
    font-size: 14px;
}

.block-product-card__modal-content .quick-add-promo__badge {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 8px;
    background: #222;
    color: #fff;
    font-size: 13px;
}

.block-product-card__modal-content .quick-add-promo__arrow {
    font-size: 30px;
    color: #222;
    transition: transform .2s;
}

/* 默认隐藏 */
.block-product-card__modal-content .quick-add-promo__details {
    display: none;
    padding: 12px 20px;
    position: absolute;
    top: 100px;
    background: #fff;
    z-index: 99;
}

/* details 打开以后直接显示 */
.block-product-card__modal-content .quick-add-promo[open] .quick-add-promo__details {
    display: block;
    position: absolute;
    top: 100px;
    background: #fff;
    z-index: 99;
}

/* 箭头旋转 */
.block-product-card__modal-content .quick-add-promo[open] .quick-add-promo__arrow {
    transform: rotate(90deg);
}

.block-product-card__modal-content .quick-add-promo__details>div {
    padding: 6px;
    background: #fff7f7;
    color: #c90000;
    margin-top: 4px;
}

@media (max-width: 959px) {

    .mobile-fixed-buttons {
        position: fixed !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        z-index: 1000 !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 10px 16px !important;

        background: #fff !important;
        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;

        box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
        height: 64px;
    }

    .mobile-fixed-buttons>button,
    .mobile-fixed-buttons .shopline-payment-button-wrapper {
        width: 100% !important;
    }

    body {
        padding-bottom: 125px !important;
    }
}



/* =========================================================
   COMPLETE THE SET
   ========================================================= */

.block-related-products {
    width: 100%;
    /* overflow: hidden; */
}

/* 一直保持单行，由主题 carousel 控制左右切换 */
/* .block-related-products .block-related-product-list {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-rows: 1fr !important;


    grid-auto-columns: calc((100% - 32px) / 3) !important;

    gap: 16px !important;

    overflow: hidden !important;
} */

/* li 不再自己占 1/3，交给 grid-auto-columns */
.block-related-products .block-related-product-list>li {
    width: 100% !important;
    min-width: 0 !important;
}

/* 卡片上下结构 */
.block-related-products .block-product-card.block-product-card--mini {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: 100% !important;
    padding: 0 !important;
}

/* 图片区域作为定位容器 */
.block-related-products .block-product-card.block-product-card--mini .block-product-card__layer-image-wrapper {
    position: relative !important;

    width: 100% !important;
    height: auto !important;

    flex-shrink: 0 !important;
}

/* 图片 */
.block-related-products .block-product-card.block-product-card--mini .block-product-card__image-wrapper {
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;

    overflow: hidden !important;
}

.block-related-products .block-product-card__image {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
}

/* 商品信息 */
.block-related-products .block-product-card__info {
    width: 100% !important;
    min-width: 0 !important;

    padding: 8px 0 0 !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* 标题 */
.block-related-products .block-product-card__title {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* quick add 从 info 中绝对定位到图片底部 */
.block-related-products .block-product-card {
    position: relative !important;
}

.block-related-products theme-quick-add-modal {
    position: absolute !important;

    left: 10px !important;
    right: 10px !important;

    /* 图片底部 */
    top: calc(75% - 56px) !important;

    width: auto !important;

    z-index: 10 !important;
}

.block-related-products theme-quick-add-modal>details {
    width: 100% !important;
}

.block-related-products .block-product-card__quick-add--button {
    width: 100% !important;

    margin: 0 !important;

    background: #24211f !important;
    color: #fff !important;

    border: 0 !important;

    opacity: 0;
    visibility: hidden;

    transform: translateY(8px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
}

/* PC：鼠标经过卡片显示 */
@media (min-width: 960px) {
    .block-related-products .block-product-card:hover .block-product-card__quick-add--button {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}

/* 移动端：一直显示按钮 */
@media (max-width: 959px) {
    .block-related-products .block-product-card__quick-add--button {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}

.block-related-products .block-related-product-list.carousel__track {
    display: flex !important;
    flex-wrap: nowrap !important;

    gap: 16px !important;

    overflow: hidden !important;
}

/* 每个商品固定占 1/3 */
.block-related-products .block-related-product-list.carousel__track>li {
    flex: 0 0 calc((100% - 32px) / 3) !important;
    width: calc((100% - 32px) / 3) !important;
    max-width: calc((100% - 32px) / 3) !important;

    min-width: 0 !important;
}