/* BASIC css start */
/* =========================================================
   SHOP BRAND OPTIMIZED CSS
========================================================= */

/* ---------- Layout ---------- */
.full-wrapper{
    max-width:1200px;
    width:100%;
    margin:0 auto;
}

.shopbrand-header{
    padding-top:var(--cw-size-60);
    background:var(--cw-color-white);
}

.shopbrand-header__title{
    display:flex;
    align-items:center;
    gap:var(--cw-size-10);

    font-size:var(--cw-size-24);
    line-height:var(--cw-size-32);
    font-weight:700;
    color:var(--cw-heading-color);
}

/* ---------- Navigation Common ---------- */
.shopbrand-header__nav-wrapper{
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
}

.shopbrand-header__nav,
.shopbrand-header__nav__s{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;

    overflow-x:auto;
    overflow-y:hidden;

    gap:20px;
    padding-bottom:10px;

    scrollbar-width:none;
    -ms-overflow-style:none;

    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;

    cursor:grab;
}

.shopbrand-header__nav::-webkit-scrollbar,
.shopbrand-header__nav__s::-webkit-scrollbar{
    display:none;
}

.shopbrand-header__nav:active,
.shopbrand-header__nav__s:active,
.shopbrand-header__nav.dragging,
.shopbrand-header__nav__s.dragging{
    cursor:grabbing;
}

/* ---------- Nav Items ---------- */
.shopbrand-header__nav li,
.shopbrand-header__nav__s li{
    flex:0 0 auto;
}

.shopbrand-header__nav a,
.shopbrand-header__nav__s a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;
    white-space:nowrap;

    color:var(--cw-heading-color);

    font-size:var(--cw-size-16);
    line-height:var(--cw-size-24);

    -webkit-user-select:none;
    user-select:none;
}

/* ---------- Image Category ---------- */
.shopbrand-header__nav-wrapper img{
    display:block;
    pointer-events:none;

    -webkit-user-drag:none;
    user-drag:none;
}

.shopbrand-header__nav a:has(img),
.shopbrand-header__nav__s a:has(img){
    padding:0;
    font-size:0;
    line-height:0;
}

.shopbrand-header__nav img,
.shopbrand-header__nav__s img{
    height:36px;
    object-fit:contain;

    padding:4px 18px;

    border:1px solid #e5e5e5;
    border-radius:10px;

    transition:border-color .2s ease;
}

.shopbrand-header__nav a:hover img,
.shopbrand-header__nav__s a:hover img{
    border-color:#000;
}

/* ---------- 1Depth ---------- */
.shopbrand-header__nav{
    margin-top:20px;
    padding-bottom:12px;

    gap:30px;

    border-bottom:1px solid #e5e5e5;
}

.shopbrand-header__nav .active{
    position:relative;
}

.shopbrand-header__nav .active::after{
    content:"";
    position:absolute;

    left:0;
    right:0;
    bottom:-12px;

    height:1px;
    background:var(--cw-heading-color);
}

.shopbrand-header__nav .active a{
    font-weight:700;
}

/* ---------- 2Depth ---------- */
.shopbrand-header__nav__s{
    margin-top:16px;
    padding:0 10px;

    gap:24px;
}

.shopbrand-header__nav__s li a{
    padding:8px 0;

    font-size:var(--cw-size-14);
    line-height:1.2;

    color:var(--cw-color-80);
}

.shopbrand-header__nav__s .active a{
    font-weight:600;
    color:var(--cw-heading-color);

    border-bottom:1px solid var(--cw-heading-color);
}

/* ---------- Category ---------- */
.category-title{
    padding:var(--cw-size-48) 0;
    text-align:center;
}

.category-title img{
    max-width:100%;
    height:auto;
}

/* ---------- Product Section ---------- */
.best-wrapper,
.recmd-wrapper,
.promotion-wrapper{
    margin-top:var(--cw-size-48);
}

.best-wrapper,
.recmd-wrapper{
    padding-bottom:20px;
    margin-bottom:20px;

    border-bottom:1px solid #e5e5e5;
}

.best-wrapper .prds--image,
.recmd-wrapper .prds--image > img {
    border-radius: 10px;
    overflow: hidden;   /* ÇÙ½É */
    border: 1px solid #ddd;
    
}

.best-wrapper .prds-list--item:hover .prds--image,
.recmd-wrapper .prds-list--item:hover .prds--image > img {
    border-color: #000;
}


/* ---------- Section Title ---------- */
.title-btns{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:var(--cw-size-16);
}

.title-btns span{
    font-size:var(--cw-size-18);
    line-height:var(--cw-size-26);
    font-weight:700;
}

.title-btns a{
    width:var(--cw-size-28);
    height:var(--cw-size-28);
}

.title-btns a.disable{
    opacity:.3;
}

/* ---------- Products ---------- */
.products-wrapper{
    padding-top:var(--cw-size-60);
}

.products-wrapper .prds-title{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;

    margin-bottom:var(--cw-size-16);
}

.products-wrapper .prds-title h2{
    font-size:var(--cw-size-14);
    line-height:var(--cw-size-20);
    font-weight:400;
}

.products-wrapper .prds-title strong{
    font-weight:700;
}

/* ---------- Product Grid ---------- */
.products-wrapper .prds-list.list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:40px 20px;

    margin-top:40px;
}

.products-wrapper .prds-list.gallery{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));

    gap:40px 8px;

    margin-top:40px;
}

.products-wrapper 
:where(.prds-list.list,.prds-list.gallery):first-of-type{
    margin-top:0 !important;
}

/* ---------- Product Image ---------- */
.products-wrapper .prds--image{
    overflow:hidden;
    border-radius:10px;
}

.products-wrapper .prds--image > img{
    display:block;
    width:100%;
    height:auto;

    border:1px solid var(--cw-color-30);
    border-radius:10px;

    transition:border-color .2s ease;
}

.products-wrapper .prds-list--item:hover .prds--image > img{
    border-color:#000;
}

/* ---------- Price ---------- */
.best-wrapper .prds--price-wrap,
.recmd-wrapper .prds--price-wrap{
    margin-bottom:10px;
}

/* ---------- Thumbnail Type ---------- */
.products-wrapper .prds-title .cw-select-box{
    min-width:var(--cw-size-100);
}

.products-wrapper .thumbnail-type{
    display:flex;
    align-items:center;
}

.products-wrapper .thumbnail-type .type::before{
    content:"";

    display:inline-block;

    width:1px;
    height:var(--cw-size-14);

    margin:0 var(--cw-size-16);

    background:var(--cw-color-30);

    vertical-align:middle;
}

/* ---------- More Button ---------- */
.prds-btn{
    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;
    margin-top:30px;
}

.prds-btn .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    min-width:150px;
    padding:5px 18px;
}

/* =========================================================
   TABLET
========================================================= */
@media (max-width:1200px){

    .full-wrapper{
        --bs-gutter-x:var(--cw-size-50);
    }

    .shopbrand-header{
        position:relative;
        min-height:100px;
    }

    .shopbrand-header__title{
        display:block !important;
    }

    .products-wrapper .prds-list.list{
        grid-template-columns:1fr;
    }

    .products-wrapper .prds-list.gallery{
        grid-template-columns:repeat(4,1fr);
        gap:10px;
    }

    .shopbrand-header__title .category-count{
        position:fixed;
        right:20px;
        bottom:80px;

        z-index:9999;

        display:flex;
        align-items:center;
        justify-content:center;

        height:40px;
        padding:0 15px 0 35px !important;

        background:#fff;
        border:1px solid #eee;

        box-shadow:0 4px 12px rgba(0,0,0,.15);
    }
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width:767.98px){

    /* Àüü ÄÁÅÙÃ÷ ÁÂ¿ì ¿©¹é */
    .full-wrapper,
    .shopbrand-header,
    .products-wrapper,
    .category-title,
    .best-wrapper,
    .recmd-wrapper,
    .promotion-wrapper{
        padding-left:6px;
        padding-right:6px;
        box-sizing:border-box;
    }

    /* image category */
    .shopbrand-header__nav a:has(img),
    .shopbrand-header__nav__s a:has(img){
    
        padding:0 !important;

        font-size:0 !important;
        line-height:0 !important;
    }

    /* product grid */
    .products-wrapper .prds-list.list{
        grid-template-columns:1fr;
    }

    .products-wrapper .prds-list.gallery{
        grid-template-columns:repeat(3,1fr);
        gap:6px;
    }

    /* price layout */
    .prices,
    .prices.prices-grid{
        display:flex !important;
        flex-direction:column;
        align-items:flex-start;

        gap:0;
    }

    .prices span{
        margin:0;
        line-height:1.2;
    }

    .prices .discount{
        order:1;

        width:100%;
        text-align:left;
    }

    .prices .original{
        order:2;
        width:100%;
    }

    .prices .price{
        order:3;

        display:flex;
        align-items:center;
        justify-content:space-between;

        width:100%;
    }

    .prds--price-wrap .preview-btn{
        position:static !important;
        margin-left:auto;
    }
}
/* BASIC css end */