/* 상품상세 구매하기 > 같이구매 팝업 css */
#cartBundlePop-layer-mask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 21; background-color: rgba(0, 0, 0, 0.4); display: none;}
#cartBundlePop-layer-mask.active {display: block; animation: show-up-mask 1s ease 0s 1 normal forwards;}
@keyframes show-up-mask {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.cartBundlePop { position: fixed; width: 100%; height: 100%; max-width: 480px; bottom: -100%; transition: bottom 0.4s; z-index: 5001; background-color: #fff; left: 50%; transform: translate(-50%, 0); overflow: hidden;display: flex; flex-direction: column; }
.cartBundlePop.active { bottom: 0;}

.cartBundlePop button { cursor: pointer; }

.cartBundlePop .cabupop-header { display: flex; align-items:center; padding: 20px 16px 4px 10px; font-size: 18px; }
.cartBundlePop .cabupop-header .title {font-weight: 700; font-size: 18px; }
.cartBundlePop .cabupop-header .close { background: url(https://img.monfood.co.kr/images/common/header_back.svg) 0 0 no-repeat; width: 32px; height: 32px; text-indent: -9999px; background-size: 20px; background-position: center}

.cartBundlePop .cabupop-event {font-size: 13px; color: #ff6b00; padding: 0 16px 8px;}
.cartBundlePop .cabupop-event .ico-tooltip {border: none; background: url(https://img.monfood.co.kr/images/common/ico_tooltip.svg) 0 0 no-repeat; vertical-align: middle; width: 32px; height: 32px; display: inline-block; background-size: 20px; background-position: center}
.cartBundlePop .cabupop-event .tooltip {line-height: 135%; position: absolute; top: 28px;  right: 15px; background: #333; color: #fff; font-size: 12px; padding: 10px 12px; border-radius: 6px; white-space: nowrap;display: none;z-index: 1000;}
.cartBundlePop .cabupop-event .tooltip::after {content: ""; position: absolute; top: -6px; right: 10px; border-width: 6px; border-style: solid; border-color: transparent transparent #333 transparent;}
.cartBundlePop .cabupop-event .tooltip.active {display: block;}
.cartBundlePop .cabupop-event strong {font-weight: 700}
.cartBundlePop .cabupop-event .ico-event {margin-right: 2px; font-size: 12px; color: #fff; font-weight: 700; background: #ff6b00; border-radius: 3px; padding: 1px 4px 2px;}

.cartBundlePop .cabupop-content { position: relative; padding: 16px; overflow-x: hidden; overflow-y: auto; flex: 1}
.cartBundlePop .cabupop-content.grid-col3 {display: flex; gap: 28px 16px; flex-wrap: wrap}
.cartBundlePop .cabupop-content.grid-col3 .product_item {width: calc(100% / 3 - 32px / 3)}


/* 추천상품, 최근본 상품 */
.add_product_wrap .add_product_swiper {overflow: hidden; z-index: -999;}
.add_product_wrap .swiper-wrapper {position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box;}
.add_product_wrap .swiper-slide {background-position: center; background-size: cover; height: 100%; position: relative; transition-property: transform; flex-shrink: 0;}
.cartBundlePop .cabupop-content .funcViewProductInfo { cursor: pointer; }
.cartBundlePop .cabupop-content .product_item img {max-width: 100%; border-radius: 8px;}
.cartBundlePop .cabupop-content .product_item video {max-width: 100%; border-radius: 8px;}
.cartBundlePop .cabupop-content .product_item .tit {font-size: 14px; line-height: 1.3; height:38px; margin: 8px 0 8px 0; font-weight: 400; white-space: normal; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.cartBundlePop .cabupop-content .product_item .price-wrapper{display: inline-block; line-height: 1; display: flex; position: relative; letter-spacing: -0.21px;}
.cartBundlePop .cabupop-content .product_item .org-price {color: #aeaeae; font-size: 12px; padding-top: 2px; height: 15px;}
.cartBundlePop .cabupop-content .product_item .price {display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: -0.5px; white-space: nowrap;}
.cartBundlePop .cabupop-content .product_item .dc-rate {font-size: 14px; font-weight: 700; color: #FF6B00; display: inline-block; margin-right: 8px; word-break: keep-all;}
.cartBundlePop .cabupop-content .product_item .review-area {display: inline-block; color: #a8a8a8; padding: 6px 0; font-size: 13px; float: left;}
.cartBundlePop .cabupop-content .product_item .review-area .review-area-wrap {width: auto;}
.cartBundlePop .cabupop-content .product_item .review-area .review-area-wrap p {float: left;}
.cartBundlePop .cabupop-content .product_item .review-area .review-area-wrap p:first-child {padding-right: 5px;}
.cartBundlePop .cabupop-content .product_item .review-area .review-area-wrap p.rate {display: flex;}
.cartBundlePop .cabupop-content .product_item .review-area .review-area-wrap p em.star {display: inline-block; background-image: url("https://img.monfood.co.kr/image/common/star.png"); width: 15px; height: 15px; background-size: contain; margin: 1px;}
.cartBundlePop .cabupop-content .product_item .review-area .review-area-wrap span {color: #727272; position: relative; padding-left: 16px; font-size: 12px;}
.cartBundlePop .cabupop-content .product_item .review-area .review-area-wrap span::before {content: ''; display: block; background-image: url("https://img.monfood.co.kr/images/common/ico_review.svg"); width: 14px; height: 14px; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); margin-top: 1px;}
@media screen and (max-width: 380px) {
    .cartBundlePop .cabupop-content .product_item .dc-rate.event-price {margin-right: 3px;}
}
@media screen and (max-width: 360px) {
    .cartBundlePop .cabupop-content .product_item .dc-rate.event-price {margin-right: 2px;}
}
.cartBundlePop .cabupop-content .product_item .cabu_btn_wrap { margin-top: 35px; }
.cartBundlePop .cabupop-content .product_item .cabu_btn_wrap > button { background-color: #000; color: #fff; border: 1px solid #000; border-radius: 5px; width: 100%; padding: 6px; cursor: pointer; }
.cartBundlePop .cabupop-content .product_item .cabu_btn_wrap > button.hide { display: none; }
.cabu-btn-select:focus, .cabu-btn-selected:focus { outline: none; }
.cartBundlePop .cabupop-content .product_item .cabu_btn_wrap .cabu-btn-select { }
.cartBundlePop .cabupop-content .product_item .cabu_btn_wrap .cabu-btn-selected { display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #FF6b00; color: #FF6b00; background-color: #fff; }
.cartBundlePop .cabupop-content .product_item .cabu_btn_wrap .cabu-btn-selected > img { width: 13px; height: 13px; }

.cartBundlePop .cabupop-footer {padding: 12px 16px; flex-shrink: 0;}
.cartBundlePop .cabupop-footer .cabu-total-wrap { font-weight: normal; padding: 5px 16px 16px; display: flex; align-items: center; justify-content: center; gap: 5px; /*text-align: center;*/ font-size: 13px; }
.cartBundlePop .cabupop-footer .cabu-total-wrap.hide { display: none; }
.cartBundlePop .cabupop-footer .cabu-total-wrap .cabu-totalprice-wrap { color: #FF6b00; }

.cartBundlePop .cabupop-footer .cabu-btn-order { width: 100%; border-radius: 5px; border: none; line-height: 50px; font-weight: bold; background-color: #ff6b00; font-size: 18px; text-align: center; color: #fff; }
.cartBundlePop .cabupop-footer .cabu-btn-order.hide { display: none; }


/* 상품정보 */
#cartBundleDetailPop-layer-mask {position: fixed; left: 50%; top: 0; width: 100%; height: 100%; z-index: 5001; background-color: rgba(0, 0, 0, 0.4); display: none; max-width: 480px; transform: translateX(-50%);}
#cartBundleDetailPop-layer-mask.active {display: block; animation: show-up-mask 1s ease 0s 1 normal forwards;}
.cartBundleDetailPop { position: fixed;border-top-right-radius: 16px; border-top-left-radius: 16px; width: 100%; max-width: 480px; bottom: -100%; transition: bottom 0.4s; z-index: 5001; background-color: #fff; left: 50%; transform: translate(-50%, 0); overflow: hidden; display: flex; flex-direction: column; }
.cartBundleDetailPop.active { bottom: 0; }

/*!* 모바일에서는 우좌 슬라이드 *!*/
/*@media (max-width: 768px) {*/
/*    .cartBundleDetailPop {top: 0;bottom: 0;left: 0;transform: translateX(100%);transition: transform 0.4s ease;}*/
/*    .cartBundleDetailPop.active {transform: translateX(0);}*/
/*}*/

.cartBundleDetailPop button { cursor: pointer; }

.cartBundleDetailPop .cabupop-header { position: relative; height: 50px; display: flex;align-items: center;justify-content: space-between;box-sizing: border-box; }
.cartBundleDetailPop .cabupop-header .close {position:absolute; top:10px; right: 10px; width:32px;height:32px;text-indent:-9999px;background:url(https://img.monfood.co.kr/images/common/btn_close.png) 0 0 no-repeat;background-size:16px; background-position: center}
.cartBundleDetailPop .cabupop-header .cabupop-title-wrap {
    padding: 0 50px 0 15px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    height: 50px;
}
.cartBundleDetailPop .cabupop-header .cabupop-title {
    display: inline-block;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cartBundleDetailPop .cabupop-header .cabupop-title-badge {
    white-space: nowrap;
    border: 1px solid #FF6b00;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.2;
    color: #FF6b00;
    display: inline-block;
    margin-right: 5px;
}
.cartBundleDetailPop .cabupop-header-cont1 { display:flex;align-items:center;gap:8px;min-width:0; padding: 16px 20px 10px;}
.cartBundleDetailPop .cabupop-header-cont2 {padding: 12px 20px; background: #FFF1ED; font-size:13px;line-height:1.4;color:#222;display: flex;align-items: center;justify-content: center; }
.cartBundleDetailPop .cabupop-header-cont2 .cabupop-pbanner { text-align: center; }
.cartBundleDetailPop .cabupop-header-cont2 .cabupop-pbanner .cabupop-optname {display: inline-block; color: #ff6b00}

.cartBundleDetailPop .cabupop-content {position: relative; padding: 16px; overflow-x: hidden; overflow-y: auto; padding: 0 15px;  max-height: 80vh;}
@media screen and (max-height: 740px) {
    .cartBundleDetailPop .cabupop-content {max-height: 65vh;}
}
@media screen and (min-height: 740px) {
    .cartBundleDetailPop .cabupop-content {max-height: 80vh;}
}
.cartBundleDetailPop .cabupop-content .cabupop-pinfo-wrap img { width: 100%; }
.cartBundleDetailPop .cabupop-content .cabupop-pinfo-wrap .cabupop-pdetail { margin-bottom: 10px; line-height: 1.4; }
.cartBundleDetailPop .cabupop-content .cabupop-pinfo-wrap .cabupop-pimg-wrap { display: flex; }

.cartBundleDetailPop .cabupop-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; /* 높이 고정 */ padding: 15px; }
.cartBundleDetailPop .cabupop-footer > button { border-radius: 5px; }
.cartBundleDetailPop .cabupop-footer .cabupop-btn-cancel { width: 20%; padding: 11px 0;  font-size: 16px; text-align: center; border: 1px solid #ff6b00; color: #ff6b00; background-color: #fff; height: 48px; font-weight: 700;}
.cartBundleDetailPop .cabupop-footer .cabupop-btn-select-pinfo { width: 80%; border: none; padding: 11px 0; background-color: #FF6b00; font-size: 16px; text-align: center; color: #fff; height: 48px; font-weight: 700}



/* 쉬머링 애니메이션 */
@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* 스켈레톤 공통 배경 및 효과 */
.cartBundlePop .cabupop-content .product_item.skeleton-loading .skel-img,
.cartBundlePop .cabupop-content .product_item.skeleton-loading .tit,
.cartBundlePop .cabupop-content .product_item.skeleton-loading .price-wrapper,
.cartBundlePop .cabupop-content .product_item.skeleton-loading .review-area,
.cartBundlePop .cabupop-content .product_item.skeleton-loading .cabu-btn-select {
    background: #f0f0f0;
    background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite ease-in-out;
    border: none !important;
    color: transparent !important;
}

/* 1) 썸네일 이미지 영역 (1:1 비율 강제 유지) */
.cartBundlePop .cabupop-content .product_item.skeleton-loading .skel-img {
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* 실제 이미지 비율이 다르면 이 값을 조절하세요 */
    border-radius: 8px;
    display: block;
}

/* 2) 상품명 (기존 CSS의 height: 38px 라인 유지) */
.cartBundlePop .cabupop-content .product_item.skeleton-loading .tit {
    width: 100%;
    height: 38px;
    margin: 8px 0 8px 0;
    border-radius: 4px;
    display: block; /* 기존 -webkit-box 말줄임 속성 덮어쓰기 */
}

/* 3) 가격 래퍼 */
.cartBundlePop .cabupop-content .product_item.skeleton-loading .price-wrapper {
    width: 60%;
    height: 18px;
    border-radius: 4px;
    margin-bottom: 8px;
}

/* 4) 리뷰 영역 */
.cartBundlePop .cabupop-content .product_item.skeleton-loading .review-area {
    width: 30%;
    height: 14px;
    margin: 6px 0;
    padding: 0; /* 기존 padding 6px 0 덮어쓰기 */
    border-radius: 4px;
}

/* 5) 하단 장바구니 버튼 */
.cartBundlePop .cabupop-content .product_item.skeleton-loading .cabu_btn_wrap {
    margin-top: 35px; /* 기존 간격 유지 */
}
.cartBundlePop .cabupop-content .product_item.skeleton-loading .cabu-btn-select {
    width: 100%;
    height: 32px; /* 폰트 크기와 패딩을 감안한 높이 */
    border-radius: 5px;
    display: block;
    cursor: default;
    pointer-events: none; /* 클릭 방지 */
}

/* 담기 완료시 레이어 팝업  */
.btn-comp-popup { background: rgba(0, 0, 0, 0.65); display: flex; align-items: center; justify-content: center; flex-direction: column; flex-wrap: wrap;position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 130px; height: 130px; border-radius: 8px; z-index: 5001; color: #fff; text-align: center; padding: 12px; font-weight: 400; line-height: 130%; font-size: 14px; letter-spacing: -0.21px; box-sizing: border-box; }
.btn-comp-popup.hide { display: none;}
.btn-comp-popup.on {/*display: block;*/ animation: show-up-popup 0.6s ease 0s 1 normal forwards;}
.btn-comp-popup > img.heart-like {width: 43%;}
.btn-comp-popup > img.heart-cancel {/*display: none;*/}
.btn-comp-popup > p.text-like {word-break: keep-all; margin-top: 3px;}
.btn-comp-popup > p.text-cancel { margin-top: 5px;/*display: none;*/}

@keyframes show-up-popup {
    0% {opacity: 1; transform: translate(-50%,-50%) scale3d(0, 0, 0);}
    50% {opacity: 1; transform: translate(-50%,-50%) scale3d(1.1, 1.1, 1.1);}
    100% {opacity: 1; transform: translate(-50%,-50%) scale3d(1, 1, 1);}
}