/* BASIC css start */
/* ==================================================
   만냥몰 모바일 상품 분류 페이지
   - 베스트상품 및 갤러리 상품 2열
   - 마지막 홀수 상품 왼쪽 정렬
   - 썸네일 비율 유지 및 잘림 방지
================================================== */


/* ==================================================
   공통 영역
================================================== */

.shopbrand,
.product_list_outer,
.product_list_wrap {
    width:100%;
    box-sizing:border-box;
}

#MS_current_best_product_page_cnt {
    font-weight:500;
}

.product_list_wrap.list_st1 .product_item .desc_container {
    width:auto;
}


/* ==================================================
   베스트상품 2열 배치
================================================== */

#MK_best_product {
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    align-items:flex-start;
    column-gap:4%;
    row-gap:24px;
    width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.best_product_wrap .product_list_wrap.list_st2 {
    display:block;
    width:100%;
    margin:0;
    padding:0;
}

.best_product_wrap .product_list_wrap.list_st2 .product_item,
.list_st2.list_st2_3 .product_item {
    display:block;
    flex:0 0 48% !important;
    width:48% !important;
    max-width:48% !important;
    margin:0 !important;
    padding:0;
    float:none !important;
    list-style:none;
    border-top:0 !important;
    box-sizing:border-box;
}


/* ==================================================
   일반 상품 갤러리형 2열 배치
================================================== */

.product_list_outer > .product_list_wrap.list_st2 {
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    align-items:flex-start;
    column-gap:4%;
    row-gap:28px;
    width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* 메이크샵 block 태그가 중간 래퍼를 생성하는 경우에도 2열 유지 */
.product_list_outer > .product_list_wrap.list_st2 > [id^="MK_"],
.product_list_outer > .product_list_wrap.list_st2 > [id^="MS_"] {
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    align-items:flex-start;
    column-gap:4%;
    row-gap:28px;
    width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.product_list_outer > .product_list_wrap.list_st2 .product_item {
    display:block;
    flex:0 0 48% !important;
    width:48% !important;
    max-width:48% !important;
    min-width:0;
    margin:0 !important;
    padding:0;
    float:none !important;
    box-sizing:border-box;
}


/* ==================================================
   상품 figure 초기화
================================================== */

.product_list_wrap .product_item figure {
    display:block;
    width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* ==================================================
   썸네일 영역
================================================== */

.product_list_wrap.list_st2 .product_item .thumb,
.product_list_wrap.list_st3 .product_item .thumb {
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    margin:0;
    padding:0;
    overflow:hidden;
    background:#fff;
    box-sizing:border-box;
}

.product_list_wrap.list_st2 .product_item .thumb a,
.product_list_wrap.list_st3 .product_item .thumb a {
    display:block;
    width:100%;
    height:100%;
}

.product_list_wrap.list_st2 .product_item .thumb img,
.product_list_wrap.list_st3 .product_item .thumb img {
    display:block;
    width:100% !important;
    height:100% !important;
    margin:0 auto;
    object-fit:contain !important;
    object-position:center !important;
}


/* ==================================================
   상품 설명 영역
================================================== */

.product_list_wrap .product_item .desc_container {
    display:block;
    width:100%;
    margin:0;
    padding-top:12px;
    box-sizing:border-box;
}

.product_list_wrap .product_item .desc_container .info {
    width:100%;
    min-width:0;
    box-sizing:border-box;
}

.product_list_wrap.list_st2 .product_item .desc_container .info,
.product_list_wrap.list_st3 .product_item .desc_container .info p {
    font-family:'Noto Sans KR', sans-serif !important;
}

.product_list_wrap .product_item .desc_container .info p {
    margin:0;
}


/* ==================================================
   색상 옵션
================================================== */

.prd-color {
    margin-bottom:5px !important;
}


/* ==================================================
   상품명 및 부가 설명
================================================== */

.product_list_wrap .product_item .desc_container .info .pname {
    display:-webkit-box;
    min-height:40px;
    margin-top:4px;
    overflow:hidden;
    font-size:14px !important;
    font-weight:400 !important;
    line-height:20px;
    word-break:keep-all;
    overflow-wrap:break-word;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

.product_list_wrap .product_item .desc_container .info .pname a {
    color:inherit;
}

.product_item .info .psubname {
    display:-webkit-box;
    margin-top:5px !important;
    overflow:hidden;
    font-size:13px !important;
    font-weight:300 !important;
    line-height:19px;
    word-break:keep-all;
    overflow-wrap:break-word;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}


/* ==================================================
   가격 및 품절 문구
================================================== */

.product_item .info .listPrice,
.product_item .info .listReplce,
.product_item .info .listSoldout {
    margin-top:8px !important;
    font-size:14px !important;
    line-height:20px;
}

.info .listPrice {
    color:#000 !important;
    font-weight:700 !important;
}

.info .listPrice del {
    margin-left:4px;
    color:#aaa !important;
    font-weight:400 !important;
}


/* ==================================================
   리뷰 수
================================================== */

.product_item .info .prdreview {
    display:none !important;
    margin-top:6px !important;
    font-size:12px !important;
}

.product_item .info .prdreview span {
    font-weight:600;
}


/* ==================================================
   베스트상품 페이지 번호
================================================== */

.best_product_wrap .paging-num {
    clear:both;
    margin-top:24px;
    text-align:center;
}


/* ==================================================
   작은 모바일 화면 보정
================================================== */

@media screen and (max-width:359px) {
    #MK_best_product,
    .product_list_outer > .product_list_wrap.list_st2,
    .product_list_outer > .product_list_wrap.list_st2 > [id^="MK_"],
    .product_list_outer > .product_list_wrap.list_st2 > [id^="MS_"] {
        column-gap:3%;
    }

    .best_product_wrap .product_list_wrap.list_st2 .product_item,
    .list_st2.list_st2_3 .product_item,
    .product_list_outer > .product_list_wrap.list_st2 .product_item {
        flex-basis:48.5% !important;
        width:48.5% !important;
        max-width:48.5% !important;
    }

    .product_list_wrap .product_item .desc_container .info .pname {
        font-size:13px !important;
    }
}
/* BASIC css end */