@charset "utf-8";

/* ==========================================================================
   TEX ITEM
   ========================================================================== */
.tex-tag {
    display: flex; justify-content: center;  align-items: center;
    width: 68px; height: 26px;
    font-size: 12px; font-weight: bold; color: #fff; text-transform: uppercase;
    &.tag-new{color: var(--basic-color); background-color: rgba(255,255,255,.5);}
    &.tag-best{background-color: rgba(0,0,0,.5);}
    &.tag-season{width: auto; min-width: 71px; height: 28px; padding: 0 18px; border-radius: 14px 0 0 0; background-color: rgba(33,33,33,.5);}
    &.tag-rank{width: 30px; height: auto; aspect-ratio: 1 / 1; font-size: 14px; font-weight: bold;  background-color: rgba(0,0,0,.7); border-radius: 2px;}
    @media (width <= 640px) {
        &.tag-rank{width: 26px; font-size: 13px;}
        &.tag-season{min-width: 67px;}
    }
}

/*가운데 제목만*/
.tex-item {
    position: relative; overflow: hidden;
    .item-thumb{position: relative; width: 100%; aspect-ratio: 1 / 1;}
    .item-thumb .item-img{width: 100%; height: 100%; object-fit: cover; transition: .3s ease-out;}
    .item-info{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
    .item-info .info-wrap{position: relative; color: #fff; text-align: center;}
    .item-info .item-name{font-size: 18px; font-weight: bold;}
    .tex-tag {
        position: absolute; z-index: 1;
        &.tag-new{left: 0; top: 0;}
        &.tag-best{left: 0; top: 0;}
        &.tag-rank{left: 20px; top: 20px;}
        &.tag-season{right: 0; bottom: 0;}
        &.tag-best + .tag-new,
        &.tag-new + .tag-best{left: 68px;}
    }
    &:hover .item-thumb .item-img{scale: 1.15;}
    /*&.overlay-mask .item-thumb::after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); pointer-events: none;}*/
    &.overlay-mask .item-info .info-wrap{color: var(--basic-color);}
    @media (width <= 1024px) {
        .tex-tag.tag-rank{left: 14px; top: 14px;}
    }
    @media (width <= 860px) {
        .tex-tag.tag-rank{left: 10px; top: 10px;}
    }
    @media (width <= 640px) {
        .tex-tag.tag-rank{left: 8px; top: 8px;}
    }
}
.item-list {
    .category-list {
        padding: 76px var(--main-gap) 35px;
        display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px;
        .cate-btn{padding: 5px 10px;}
        .cate-btn span{font-size: 18px; font-weight: bold; color: #bbb; transition: .2s ease-out;}
        .cate-btn:hover span{color: var(--basic-color);}
        .cate-btn.active span{color: var(--basic-color); text-decoration: underline; text-underline-offset: 4px;}
    }
    > ul{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px 1px;}
    .paging{margin-top: 50px;}
    @media (width <= 1280px) {
        > ul{grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 1px;}
    }
    @media (width <= 1024px) {
        .category-list {gap: 8px 12px;}
    }
    @media (width <= 860px) {
        .category-list {padding: 70px var(--main-gap) 25px;}
        > ul{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 1px;}
    }
    @media (width <= 640px) {
        .category-list {
            padding: 60px var(--main-gap) 25px; gap: 8px 10px;
            .cate-btn span{font-size: 17px;}
        }
        .tex-item .item-info .item-name{font-size: 15px;}
    }
}

/* ==========================================================================
   FILTER PANEL
   ========================================================================== */
.filter-panel {
    padding: 11px 20px 60px;
    form{height: 100%;}
    &.offcanvas-end{width: 454px;  border-left: 0;}
    .panel-wrapper {display: flex; flex-direction: column; height: 100%;}
    .panel-header {
        display: flex; justify-content: space-between; align-items: center;
        .panel-title{font-size: 13px; font-weight: 900; text-transform: uppercase;}
        .btn-reset, .btn-x{position: relative; display: flex; justify-content: center; align-items: center; width: 34px; height: 34px;}
        .btn-reset{left: -8px;}
        .btn-reset img{width: 18px;}
        .btn-x{right: -11px;}
        .btn-x img{width: 14px;}
    }
    .panel-body {
        flex: 1; margin-top: 32px;
        /*&.has-scrollbar .filter-area{padding-right: 20px;}*/
    }
    .filter-area {
        .filter-section{padding: 15px 0 13px;}
        .filter-section:not(:last-child){border-bottom: 1px solid #eee;}
        .filter-title{font-size: 16px; font-weight: bold; margin-bottom: 15px;}
        .filter-group{display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 0;}
        .filter-option {
            input[type='checkbox'] {position: absolute; opacity: 0;}
            .option-name{display: inline-block; font-size: 14px; font-weight: 500; line-height: 25px; padding-right: 18px; user-select: none;}
            input[type='checkbox']:checked + .option-name{background: url('/assets/site/img/common/ico-check01.png') no-repeat right center / 14px auto;}
        }
    }
    @media (width <= 640px) {
        &.offcanvas-end{width: 300px;}
    }
}
/* ==========================================================================
   FABRIC SWATCH
   ========================================================================== */
/*뷰페이지*/
.swatch-list {
    /*> ul{display: grid; grid-template-columns: repeat(3, 146px); gap: 30px;}*/
    > ul{display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;}
    .swatch{width: 146px; border: 1px solid #ebebeb; box-shadow: 4px 7px 24px 0 rgba(0, 0, 0, 0.16);}
    .swatch .btn-view{display: block;}
    .swatch-code{display: flex; justify-content: center; align-items: center; height: 55px; font-size: 15px; font-weight: bold;}
    .swatch-thumb{display: flex; gap: 1px; aspect-ratio: 1 / 1; }
    .swatch-thumb .color-chip{display: block; flex: 1; height: 100%; overflow: hidden;}
    .swatch-img{width: 100%; height: 100%; object-fit: cover; transition: .2s ease-out;}
    .swatch:hover .swatch-img{scale: 1.15;}
}
/*스와치 조각 표현*/
.fabric-color {
    position: relative; overflow: hidden;
    &::after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/assets/site/img/common/swatch-frame.svg') no-repeat 0 0 / 100% auto; pointer-events: none;}
    .color-thumb{position: relative; aspect-ratio: 1 / 1; overflow: hidden;}
    .color-img{width: 100%; height: 100%; object-fit: cover;}
    /*.color-frame{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}*/
}
/*컬러웨이*/
.colorway-list {
    display: flex; flex-wrap: wrap; gap: 21px;
    .view-color{cursor: default;}
    .color-item{flex: 0 0 120px}
    .color-name {
        font-size: 14px; text-align: center;
        margin-top: 17px;
        .new{color: #bbb; margin-left: 8px;}
        .name-en{font-weight: bold;}
        .name-ko{font-weight: 500; margin-top: 10px;}
    }
}




    /* ==========================================================================
       New Arrivals Carousel
       ========================================================================== */
.fabric-carousel {
    padding-bottom: 41px;
    .controls{position: absolute; bottom: 0; padding: 0 40px; width: 100%;}
    .swiper-horizontal>.swiper-pagination-progressbar,
    .swiper-pagination-progressbar.swiper-pagination-horizontal{position: relative; top: -5px; height: 1px;}
    .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color: var(--basic-color);}
    .swiper-button-next{background: url('/assets/site/img/common/arr0202.png') no-repeat right center / 8px auto;}
    .swiper-button-prev{background: url('/assets/site/img/common/arr0201.png') no-repeat left center / 8px auto;}
}

/* ==========================================================================
   Best Sellers
   ========================================================================== */
.rank-list {
    max-width: 540px; width: 100%;
    border-top: 1px solid var(--basic-color);
    .rank-item {
        position: relative;
        border-bottom: 1px solid var(--border-color01);
        transition: .2s ease-out;
        button{display: flex; align-items: center; width: 100%; height: 60px;}
        .item-rank, .item-name{font-size: 16px; font-weight: bold;}
        .item-rank {width: 90px; margin-right: 10px; color: #999; text-align: center;}
        .item-name {flex: 1;}
        &:nth-child(-n+3) .item-rank{color: #ff1212}
        &:nth-child(4) .item-rank,
        &:nth-child(5) .item-rank{color: var(--basic-color);}
        &:last-child{border-color: #666;}
        &::after{content: ""; display: block; position: absolute; left: 0; top: -1px; width: 100%; height: calc(100% + 1px); border: 1px solid transparent; box-shadow: 4px 6.928px 24px 0px rgba(0, 0, 0, 0); pointer-events: none; transition: box-shadow .1s ease-out;}
        &.active::after{border-color: var(--basic-color); box-shadow: 4px 6.928px 24px 0px rgba(0, 0, 0, 0.22);}
    }
}

.synced-slider {
    .slider-container:has(.fabric-slider) {
        position: relative;
        width: 100%;
        .swiper-button-next{right: 0; background: url('/assets/site/img/common/arr0102.png') no-repeat right center / 18px auto;}
        .swiper-button-prev{left: 0; background: url('/assets/site/img/common/arr0101.png') no-repeat left center / 18px auto;}
    }
    .fabric-slider {max-width: 610px; width: 100%;}
    @media (width <= 1480px) {
        .slider-container:has(.fabric-slider) {
            .swiper-button-next,
            .swiper-button-prev{display: none;}
        }
    }
    @media (width <= 1340px) {
        .rank-list .rank-item button{height: 53px;}
        .tex-item .item-thumb{aspect-ratio: unset; height: 541px;}
    }
    @media (width <= 1200px) {
        .rank-list .rank-item {

            .item-rank {width: 70px;}
        }
    }
    @media (width <= 1024px) {
        .rank-list .rank-item button{height: 48px;}
        .tex-item .item-thumb{aspect-ratio: unset; height: 489px;}
    }
    @media (width <= 860px) {
        max-width: 520px;
        margin: 0 auto;
        .rank-list{max-width: 100%;}
        .fabric-slider {max-width: 100%;}
        .tex-item .item-thumb{aspect-ratio: 1 / 1; height: auto}
        .slider-container:has(.fabric-slider) {
            .swiper-button-next,
            .swiper-button-prev{display: block;}
            .swiper-button-next{right: calc(var(--minus-gap) - 20px);}
            .swiper-button-prev{left: calc(var(--minus-gap) - 20px);}
        }

    }
    @media (width <= 640px) {
        .slider-container:has(.fabric-slider) {
            .swiper-button-next,
            .swiper-button-prev{display: none;}
        }
    }
}


/* ==========================================================================

   ========================================================================== */
/*리스트 페이지 서치바*/
.search-item {
    .searchbar01 {}
}