@charset "UTF-8";
/***************************************
    copyright by MakeWeb.com.tw
***************************************/

/* jPList 分頁控制項樣式 */
.jplist-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 60px;
}

.jplist-panel [data-jplist-control='pagination'] {
    display: flex;
    align-items: center;
    gap: 10px;
}

button.jplist-first,
button.jplist-prev,
button.jplist-next,
button.jplist-last {
    background: #8ec22d;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--fs-sm);
    transition: background-color 0.3s;
}

button.jplist-first:hover,
button.jplist-prev:hover,
button.jplist-next:hover,
button.jplist-last:hover {
    background: #7ab025;
}

button.jplist-first:disabled,
button.jplist-prev:disabled,
button.jplist-next:disabled,
button.jplist-last:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

.jplist-holder {
    display: flex;
    gap: 5px;
    margin: 0 15px;
}

.jplist-holder [data-type='page'],
.jplist-holder button[data-type='page'] {
    background: #e9ecef;
    color: #495057;
    border: 1px solid #ced4da;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    min-width: 40px;
    text-align: center;
    transition: all 0.3s;
    font-size: var(--fs-sm);
}

.jplist-holder .jplist-current {
    background: #8ec22d;
    color: white;
    border-color: #8ec22d;
}

.jplist-holder [data-type='page']:hover:not(.jplist-current),
.jplist-holder button[data-type='page']:hover:not(.jplist-current) {
    background: #dee2e6;
}

[data-jplist-control='counter'] {
    color: #6c757d;
    font-size: var(--fs-sm);
}

/* 初始佈局用 CSS Grid — JS 接管前就是三欄，避免單欄→三欄跳動 */
.list_vert .list_tilelist ul {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Shuffle 接管前由 Grid 控制寬度；Shuffle 接管後設 position:absolute + 自己的 width */
.list_vert .list_tilelist ul > li {
    width: auto;
    margin-bottom: 25px;
}

/* Shuffle 接管後用自己的寬度 */
.list_vert .list_tilelist ul > li.shuffle-item {
    width: calc(33.333% - 17px);
}

/* Shuffle 向上浮入效果 */
.list_vert .list_tilelist ul > li.shuffle-item--hidden {
    opacity: 0;
    transform: translateY(30px) scale(0.01);
}

.list_vert .list_tilelist ul > li.shuffle-item--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.shuffle-sizer {
    position: absolute;
    visibility: hidden;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
}

.list_vert .list_tilelist ul > .shuffle-sizer {
    width: calc(33.333% - 17px);
}

/* 空狀態訊息樣式 */
#no-results-message {
    background: #fff;
    border-radius: 8px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    padding: 14px 10px;
    box-sizing: border-box;
}

.no-results-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: #666;
    margin-bottom: 0;
}

/* 響應式設計 */
@media (max-width: 768px) {
    #no-results-message {
        padding: 30px 15px;
        margin: 25px;
        width: calc(100% - 50px);
    }

    .no-results-title {
        font-size: var(--fs-sm);
    }
}

/* 當分頁面板只有無結果訊息時的樣式 */
.jplist-panel:has(#no-results-message:only-child) {
    justify-content: center;
}

/* 為不支持 :has() 的瀏覽器提供後備樣式 */
.jplist-panel[data-no-results='true'] {
    justify-content: center;
}
#container {
    background-color: #fafafa;
}
#content2 {
    max-width: 1280px;
    min-height: 500px;
    padding: 50px 0;
    margin: auto;
    display: flex;
    gap: 40px;
    align-items: stretch;
}

#content2 #side1 {
    flex: 0 1 clamp(240px, 25%, 320px);
    width: 100%;
    min-width: clamp(220px, 24%, 300px);
}

#content2 #side2 {
    flex: 1 1 0;
    min-width: 0;
}
.tree_gray_green_v .mw-nav li .arrow-pad {
    padding: 0 0 0 10px;
}
.item_content {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 12px;
}
.item_content > a {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.item_content > a .item_text {
    flex: 1;
}

.item_top_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    min-height: 28px;
}

.item_compare_corner {
    margin-left: auto;
}

.compare_checkbox {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 5px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    font-size: var(--fs-base);
    color: #666;
}

.compare_checkbox input[type='checkbox'] {
    margin: 0;
    width: 16px;
    height: 16px;
}
.item_content a .item_info {
    min-height: calc(var(--fs-sm) * 1.5 * 4);
}
.item_content a .item_info p {
    color: #888888;
    font-weight: var(--fw-regular);
    font-size: var(--fs-sm);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/*-------------------------------------------------
 list_vert
--------------------------------------------------*/
.list_vert .label_combobox_year {
    margin: 10px 0;
    padding: 30px 40px;
    background: #ecf0f1;
    border-left: 5px solid #02759f;
}

.list_vert .label_combobox_year h3 {
    color: #888;
}

.list_vert .menu_content {
    margin: 30px 0 80px 0;
}

.list_vert ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.list_vert {
    display: block;
}

/*-------------------------------------------------
 product-filter
--------------------------------------------------*/
.product-filter-container {
    background: #fff;
    border-radius: 20px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    padding: 25px;
    margin-bottom: 30px;
}

.filter-section {
}

.filter-row {
    display: flex;
    gap: 40px;
    margin-bottom: 20px;
}

.filter-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
}

.filter-label {
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: #333;
    margin-bottom: 5px;
}

.filter-select {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: var(--fs-base);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.3s;
}

.filter-select:focus {
    outline: none;
    border-color: #02759f;
    box-shadow: 0 0 0 2px rgba(2, 117, 159, 0.1);
}

.connectivity-standards {
    border-radius: 20px;
    padding: 16px;
    background-color: #fafafa;
}

.standards-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 15px;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-group input[type='checkbox'] {
    width: 18px;
    height: 18px;
    accent-color: #02759f;
    cursor: pointer;
}

.checkbox-group label {
    font-size: var(--fs-base);
    color: #555;
    cursor: pointer;
    user-select: none;
}

.checkbox-group input[type='checkbox']:checked + label {
    color: #02759f;
    font-weight: var(--fw-medium);
}

/* Responsive */
@media screen and (max-width: 767px) {
    .filter-row {
        flex-direction: column;
        gap: 20px;
    }

    .standards-row {
        flex-direction: column;
        gap: 15px;
    }

    .product-filter-container {
        padding: 20px 15px;
    }
}

/*-------------------------------------------------
 port-filter
--------------------------------------------------*/
.port-filter {
    overflow: visible;
    border-bottom: 1px solid #e9ecef;
}

.port-filter ul {
    display: table;
    margin: 0px auto;
    padding: 0;
    list-style: none;
}

.port-filter ul li {
    overflow: visible;
    /*overflow: hidden;*/
    display: inline-block;
    position: relative;
    padding: 8px 12px;
}

.port-filter ul a {
    position: relative;
    padding: 8px 16px;
    color: #888;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}

.port-filter ul a:hover,
.port-filter ul a:focus,
.port-filter ul a.current {
    text-decoration: none;
    /*background: #FF0031;*/
    color: #000;
    border-bottom: 3px solid #000;
}

.list_vert .list_tilelist {
    margin: 0;
    padding: 0;
    color: #333;
}
.list_vert .list_tilelist ul {
    /* Shuffle.js 管理佈局，不使用 CSS Grid */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Isotope 佈局 - 完全覆蓋CSS Grid */
.list_vert .list_tilelist ul.isotope {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    justify-items: initial !important;
    justify-content: initial !important;
    align-items: initial !important;
    width: 100%;
    min-height: 400px;
}

.list_vert .list_tilelist ul.isotope .element_item {
    float: left;
    width: calc(33.333% - 50px); /* 減去左右padding的空間 */
    margin: 0 25px 50px 25px;
    padding: 0;
    box-sizing: border-box;
}

/* 確保商品項目有一致的最小高度，並限制寬度 */
.list_vert .list_tilelist ul.isotope .element_item .item_content {
    min-height: 400px;
    height: auto;
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* 防止內容溢出 */
}

/* 限制商品內部元素的寬度 */
.list_vert .list_tilelist ul.isotope .element_item .item_content img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.list_vert .list_tilelist ul.isotope .element_item .item_content * {
    max-width: 100%;
    box-sizing: border-box;
}

/* 清除浮動 */
.list_vert .list_tilelist ul.isotope::after {
    content: '';
    display: table;
    clear: both;
}
.list_vert .list_tilelist h2 {
    color: #325895;
}

/* Product status badges */
.product-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: #fff;
    line-height: 1.4;
    letter-spacing: 0.3px;
}
.badge-new { background-color: var(--brand-green, #8ec22d); }
.badge-soon { background-color: #f0ad4e; }
.badge-discontinued { background-color: #d9534f; }

@media (max-width: 575px) {
    .product-badge {
        padding: 2px 5px;
        font-size: 10px;
        letter-spacing: 0;
    }
}
.list_vert .list_tilelist ul > li .item_description {
    /*font-size: 1.5rem;*/
    text-align: center;
    color: #666;
}
.list_vert .list_tilelist ul > li .tag_box {
    display: table;
    margin: 4px auto;
    min-height: 21px;
}
.list_vert .list_tilelist ul > li img {
    display: block;
    margin: auto;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}
.list_vert .list_tilelist ul > li .price {
    font-size: var(--fs-sm);
    display: flex;
    gap: 10px;
    justify-content: center;
}
.list_vert .list_tilelist ul > li .price del {
    text-decoration: unset;
    color: #c4c4c4;
}
.list_vert .list_tilelist ul > li .price del .original-price {
    text-decoration: line-through;
}
.list_vert .list_tilelist ul > li .price ins {
    text-decoration: unset;
    color: #959494;
}

.list_verti .list_tilelist ul > li a:hover {
    color: #333;
}

.list_vert .list_tilelist ul > li .item_image {
    transition: 0.35s ease-out;
    width: 100%;
    max-width: 300px;
    /* 鎖 1:1 比例：避免不同比例圖片撐高容器，確保所有卡片等高（Shuffle masonry 不會錯位） */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list_vert .list_tilelist ul > li .item_image img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
}

.list_vert .list_tilelist ul > li h3 {
    color: #000;
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(var(--fs-md) * 2 * 1.4);
}

.slide_box {
    width: 800px;
    margin: auto;
    padding: 30px 0;
}

.slide_box .video_item {
    margin: 0 4px;
}

.slide_box .post_image img {
    width: 100%;
}

.slick-list:after,
.buttons::after {
    clear: both;
    content: '';
    display: table;
}

.other_info {
    display: block;
    padding: 0;
}

.other_info a {
    text-decoration: none; /* 移除链接的下划线 */
    color: #777; /* 设置链接颜色 */
    padding: 8px 12px;
    border: 1px solid #ddd; /* 给链接添加边框 */
    border-radius: 5px;
}

.other_info a:hover {
    background-color: #666; /* 悬停时更改背景色 */
    color: white; /* 悬停时文字变为白色 */
}

.other_info a:hover svg {
    fill: white; /* 悬停时将 SVG 图标的颜色改为白色 */
}

.other_info strong {
    padding: 8px 12px;
    background-color: #777; /* 当前页的背景色 */
    color: white; /* 当前页的文字颜色 */
    border: 1px solid #777;
    border-radius: 5px;
}

.other_info a:first-child,
.other_info a:last-child {
    font-weight: var(--fw-bold); /* 给第一页和最后一页设置较粗的字体 */
    color: #777;
}

.other_info a:first-child:hover,
.other_info a:last-child:hover {
    background-color: #666; /* 修改悬停时第一页和最后一页的颜色 */
    color: white;
}

.other_info a:first-child:hover svg,
.other_info a:last-child:hover svg {
    fill: white; /* 悬停时将 SVG 图标的颜色改为白色 */
}

/*-------------------------------------------- 
	Media Queries 
---------------------------------------------*/
/* Portrait and Landscape */
/*@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
}*/
/*iPad*/
@media screen and (max-width: 1023px) {
    #content2 {
        padding: 25px 20px;
    }
}
/*iPhone*/
@media screen and (max-width: 767px) {
    #content2 {
        padding: 15px;
        min-height: auto;
    }
}
/*iPad Pro*/
@media screen and (max-width: 1279px) {
    /* Shuffle 響應式 - 兩欄 */
    .list_vert .list_tilelist ul {
        grid-template-columns: repeat(2, 1fr);
    }
    .list_vert .list_tilelist ul > li,
    .list_vert .list_tilelist ul > li.shuffle-item {
        width: calc(50% - 13px);
    }
    .list_vert .list_tilelist ul > .shuffle-sizer {
        width: calc(50% - 13px);
    }
}
/*iPad*/
/*iPhone*/
@media screen and (max-width: 767px) {
    /* Shuffle 響應式 - 兩欄 (mobile) */
    .list_vert .list_tilelist ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .list_vert .list_tilelist ul > li,
    .list_vert .list_tilelist ul > li.shuffle-item {
        width: calc(50% - 6px);
        margin-bottom: 12px;
    }
    .list_vert .list_tilelist ul > .shuffle-sizer {
        width: calc(50% - 6px);
    }
    .list_vert .list_tilelist ul > li h3 {
        font-size: var(--fs-sm);
    }
    .list_vert .list_tilelist ul > li .item_content {
        padding: 8px;
        border-radius: 12px;
    }
    /* Compare checkbox smaller */
    .compare_checkbox {
        font-size: var(--fs-xs);
    }
    .compare_checkbox input[type='checkbox'] {
        width: 14px;
        height: 14px;
    }
    /* Product title smaller */
    .item_content a .item_info h3,
    .item_content a .item_text h3 {
        font-size: var(--fs-sm);
    }
    .item_content a .item_info {
        min-height: calc(var(--fs-xs) * 1.5 * 3);
    }
    .item_content a .item_info p {
        font-size: var(--fs-xs);
        -webkit-line-clamp: 3;
    }
    /* Isotope 響應式 - 兩欄佈局 */
    .list_vert .list_tilelist ul.isotope .element_item {
        width: calc(50% - 20px);
        margin: 0 10px 20px 10px;
        float: left;
    }
    .list_vert .list_tilelist ul.isotope .element_item .item_content {
        min-height: auto;
    }
    .list_vert .list_tilelist ul.isotope .element_item .item_content img {
        height: 150px;
    }
    .list_vert .label_combobox_year {
        /*margin: 10px 0;*/
        padding: 10px 20px;
        /*background: #ECF0F1;*/
        /*border-left: 5px solid #02759F;*/
    }
    .list_vert .label_combobox_year h1 {
        font-size: var(--fs-lg);
    }
    .list_vert .label_combobox_year h3 {
        font-size: var(--fs-md);
    }
    .port-filter ul li a {
        padding: 8px 0px;
        /*color: #888;*/
        font-size: var(--fs-base);
        /*font-weight: bold;*/
    }
    .list_vert li .list_tilelist ul > div .item_image img {
        /*width: 100%;*/
        max-width: 100%;
    }
    .list_vert .list_tilelist ul > div {
        width: 100%; /* 一個一行 */
    }
    .other_info {
        gap: 0;
    }
    .other_info a {
        font-size: var(--fs-xs);
        padding: 9px;
    }
}

/*-------------------------------------------------
 Hide sidebar when empty (no filter sidebar and no nav items)
--------------------------------------------------*/
#content2 #side1:not(:has(#product-filter-sidebar)):not(:has(.mw-nav li)) {
    display: none;
}
#content2:has(#side1:not(:has(#product-filter-sidebar)):not(:has(.mw-nav li))) #side2 {
    flex: 1 1 100%;
}

/* Sidebar 空時（#side2 取得全寬），桌機改 4 欄
   注意：CSS 不允許 :has() 巢狀，這裡把上面的「sidebar 為空」條件展平到 #content2 層 */
@media screen and (min-width: 1280px) {
    #content2:not(:has(#product-filter-sidebar)):not(:has(.mw-nav li)) .list_vert .list_tilelist ul {
        grid-template-columns: repeat(4, 1fr);
    }
    #content2:not(:has(#product-filter-sidebar)):not(:has(.mw-nav li)) .list_vert .list_tilelist ul > li.shuffle-item,
    #content2:not(:has(#product-filter-sidebar)):not(:has(.mw-nav li)) .list_vert .list_tilelist ul > .shuffle-sizer {
        width: calc(25% - 19px);
    }
}

/*-------------------------------------------------
 Product Categories Overview Grid
--------------------------------------------------*/
/* Hide empty sidebar so grid takes full width */
#content2:has(.product-categories-grid) #side1 {
    display: none;
}
#content2:has(.product-categories-grid) {
    gap: 0;
}

.product-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 10px 0;
}

.category-card {
    display: block;
    text-decoration: none;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 20px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.category-card:hover {
    transform: translateY(-4px);
    border-bottom-color: #8ec22d;
    text-decoration: none;
}

.category-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: #f5f5f5;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.category-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
    padding: 15px;
    box-sizing: border-box;
}

.category-card:hover .category-card-image img {
    transform: scale(1.05);
}

.category-card-name {
    text-align: center;
    padding: 15px 10px 0;
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.category-card:hover .category-card-name {
    color: #333;
}

/* Category grid responsive */
@media screen and (max-width: 1024px) {
    .product-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media screen and (max-width: 768px) {
    .product-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 10px 15px;
    }
    .category-card-name {
        font-size: var(--fs-sm);
        padding: 10px 5px 0;
    }
}

/* Compare start button (product list page) */
.compare-toolbar-area {
    margin-bottom: 16px;
    text-align: right;
}

.compare-start-btn {
    background: #8FC31F;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: background 0.2s;
}

.compare-start-btn:hover {
    background: #7ab018;
}