/* ======================手機===================== */
/* ----左側選單區塊-手機版隱藏---- */
.sidebarFilters:not(.mobile-cloned-sidebar) {
    position: absolute;
    left: -9999px;
    visibility: hidden;
}

.mobile-cloned-sidebar {
    position: static;
    left: auto;
    visibility: visible;
}

/* 左側選單區塊-複製到手機版menuList */
.sidebarFilters.mobile-cloned-sidebar{
    border: none;
}

.menuList .filterCategoryItem {
    border: none;
    border-bottom: 1px solid var(--lightgray);
    background-color: var(--white);
    overflow: hidden;
}

/* 主選單按鈕-比照 menuList 樣式 */
.menuList .categoryToggleBtn {
    all: unset;
    display: block;
    width: 100%;
    padding: 24px 32px;

    font-weight: var(--fw-0);
    font-size: var(--fz-1);
    color: var(--primary);
    letter-spacing: 5.76px;

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

    transition: background-color 0.3s;
}
.menuList .categoryToggleBtn:hover {
    background-color: var(--brown);
  /* color: var(--white); */
}

/* 箭頭 */
.menuList .arrowIcon {
    font-size: 14px;
    transition: transform 0.3s ease;

    /* 調整箭頭偏移 */
    padding-right: 50px;
    /* 調整旋轉中心 */
    transform-origin: 5px; 
}

/* 子選單-預設收合 */
.menuList .subMenu {
    background-color: #fbfbfb;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* 展開狀態（JS 加上 .active） */
.menuList .filterCategoryItem.active .subMenu {
    /* max-height: fit-content; */
}

.menuList .filterCategoryItem.active .arrowIcon {
    transform: rotate(180deg);
    
    padding-right: 50px;
    /* 調整箭頭偏移 */
    transform-origin: 5px; 
    /* 調整旋轉中心 */
}

/* 子選單-項目樣式 */
.menuList .subMenuItem {
    padding: 0 30px 0 10px;
    font-size: var(--fz-1);
    color: var(--primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f0f0f0;
}

.menuList .subMenuItem a {
    width: 100%;
    color: var(--primary);
    text-decoration: none;
}

.nav.mobile-active .menuList .subMenuItem a:hover {
    color: var(--secondary);
    background-color: unset;
}

.menuList .colorbox {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    margin-left: 10px;
    flex-shrink: 0;
}

/* 顏色方塊 */
.colorBlue { background-color: #5A6AB6; }
.colorYellow { background-color: #F8D98C; } 
.colorRed { background-color: #E26E7E; }
.colorBrown { background-color: #A06F6F; }

/* ----右側商品區塊---- */
.productCardList > [class*="col-"]{
    display: flex;
    align-items: stretch;
}

.productCard{
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lightgray);
    background-color: var(--white);
    margin-bottom: 30px;
}
.productCard .productPic{
    overflow: hidden;
    border: 1px solid var(--lightgray);
    aspect-ratio: 16/13;
}

.productCard .productPic img{
    width: 100%;
    height: 100%;
    vertical-align: middle;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.5s ease;
}

.productCard .productPic img:hover{
    transform: scale(1.05);
}

.productCard .productInfo{
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 10px;

    flex-grow: 1;
}

.productCard .productInfo .productTitleSeries{
    display: flex;
    flex-direction: column;
    gap: 8px;
    

    a{
        text-decoration: none;
        color: var(--primary);
    }
    a:visited{
        color: var(--primary);
    }
    a:hover{
        color: var(--secondary);
    }

    .productTitle{
        color: var(--primary);
        font-size: var(--fz-1);
        font-weight: var(--fw-1);
    }
    
    .productSeries{
        color: var(--primary);
        font-size: var(--fz-0);
        font-weight: var(--fw-0);
    }
}

.productCard .productInfo .productPriceHeart{
    display: flex;
    justify-content: space-between;
    align-items: end;

    .productPrice{
        color: var(--green, #6AC7CA);
        font-size: var(--fz-1);
        font-weight: var(--fw-4);
    }
    .heart{
        font-size: var(--fz-2);
        color: var(--primary);
        cursor: pointer;
        transition: color 0.2s ease-in-out;
    }
    .heart .fa-solid {
    color: var(--primary)
    }
}



/* ======================480===================== */
@media screen and (min-width: 480px){
    .productCard .productInfo{
        gap: 16px;
        padding: 20px;
    }

    .productCard .productInfo .productTitleSeries{
        gap: 10px;

        .productTitle{
            font-size: var(--fz-2);
            font-weight: var(--fw-1);
        }
        
        .productSeries{
            color: var(--primary);
            font-size: var(--fz-2);
            font-weight: var(--fw-0);
        }
    }

    .productCard .productInfo .productPriceHeart{
        .productPrice{
            font-size: var(--fz-2);
            font-weight: var(--fw-4);
        }
        .heart{
            font-size: var(--fz-3);
        }
    }
}

/* ======================768===================== */
@media screen and (min-width: 768px) {
    .sidebarFilters.sidebarFilters:not(.mobile-cloned-sidebar) {
        position: static;
        left: auto;
        visibility: visible;
    }

 /* ----上方選單區塊---- */
    .sidebarFilters{
        background-color: var(--white);
        border: 1px solid var(--lightgray);
        /* overflow: hidden;  */
        margin-bottom: 20px;

        position: relative; 
    }
/* ----上方選單區塊-橫向排列---- */
    .sidebarFilters .filterCategoryList {
        display: flex;
        justify-content: center;
        align-items: stretch; 
        
    }
    .sidebarFilters .filterCategoryList .filterCategoryItem{
        border-left: 1px solid var(--lightgray);
        flex-grow: 1;

        position: relative; 
    }

    .sidebarFilters .filterCategoryList .filterCategoryItem:first-child{
        border-left: none;
    }

/* 主選單按鈕 */
    .filterCategoryItem .categoryToggleBtn{
        background-color: var(--white);
        color: var(--primary);
        font-size: var(--fz-2);
        font-weight: var(--fw-4);

        width: 100%;
        padding: 15px;
        text-align: left;
        cursor: pointer;
        display: flex;
        justify-content: space-between; 
        align-items: center;
        transition: background-color 0.2s ease;

        /* border: 1px solid #e0e0e0; */
        border: none;
    }
    .filterCategoryItem .categoryToggleBtn:hover{
        background-color: var(--brown); 
    }

/* 箭頭 */
    .arrowIcon {
        font-size: var(--fz-0);
        color: var(--primary);
        transition: transform 0.3s ease;
        /* 箭頭旋轉 */
    }

    .filterCategoryItem:active .arrowIcon {
        transform: rotate(180deg);
    }

/* 子選單 */
    .subMenu {
        padding: 0;
        margin: 0;
        background-color: #fbfbfb; 

        max-height: 0;
        /* 預設隱藏，高度為0 */
        
        overflow: hidden; 
        transition: max-height 0.3s ease-out; /* 高度變化 */

        position: absolute;
        top: 100%;
        left: -1px;
        width: 100%;
        z-index: 1;
        border: 1px solid var(--lightgray);
        border-top: none;

    }

/* css暫時確認用，之後改JS控制 */
    .filterCategoryItem:active .subMenu{
        background-color: #f9f9f9;
        /* max-height: fit-content; */
    }

/* 子選單項目 */
    .subMenuItem {
        /* padding: 12px 20px 12px 30px; */
        border-top: 1px solid var(--lightgray); /* 分割線 */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }


    .subMenuItem a {
        /* outline: 2px solid red; */
        width: 100%;
        padding: 12px 0px 12px 25px;

        text-decoration: none;
        color: var(--primary);
        font-size: var(--fz-1);
        /* transition: color 0.2s ease; */
    }

    .subMenuItem a:hover {
        color: var(--secondary); 
    }

    /* 顏色方塊 */
    .colorbox {
        width: 16px;
        height: 16px;
        border-radius: 3px; /* 輕微圓角 */
        margin-right: 20px;
        flex-shrink: 0; /* 防止方塊縮小 */
    }

    /* 各顏色方塊的背景色 */
    .colorBlue { background-color: #5A6AB6; }
    .colorYellow { background-color: #F8D98C; } 
    .colorRed { background-color: #E26E7E; }
    .colorBrown { background-color: #A06F6F; }

    /* ----右側商品區塊---- */
    .productCard{
        margin-bottom: 20px;
    }

    .productCard .productInfo{
        padding: 16px 24px;
    }

    .productCard .productInfo .productTitleSeries{
        gap: 14px;

        .productTitle{
            font-size: var(--fz-2);
            font-weight: var(--fw-2);
        }
        
        .productSeries{
            font-size: var(--fz-1);
            font-weight: var(--fw-1);
        }
    }

    .productCard .productInfo .productPriceHeart{
        .productPrice{
            font-size: var(--fz-2);
            font-weight: var(--fw-4);
        }
        .heart{
            font-size: var(--fz-3);
        }
    }
}


/* ======================1200===================== */
@media screen and (min-width: 1200px){

    .sidebarFilters{
        background-color: var(--white);
        overflow: hidden; 
    }
/* ----上方選單區塊-直向排列---- */
    .sidebarFilters .filterCategoryList {
        flex-direction: column;  
        /* border: none; */
    }
    
    .sidebarFilters .filterCategoryList .filterCategoryItem{
        border-left: none;
        border-bottom: 1px solid var(--lightgray);
    }

    .sidebarFilters .filterCategoryList .filterCategoryItem:last-child{
        border-bottom: none;
    }

/* 子選單 */
    .subMenu {
        position: static;
        border: none;
    }

/* 子選單項目 */
    .subMenuItem {
        border-top: 1px solid var(--lightgray); /* 分割線 */
    }

}