.view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #1B365C;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    margin-right: 6px;
    transition: background-color .35s ease, border-color .35s ease, color .35s ease;
    color: #1B365C;
}
.view-btn::before {
    display: block;
    height: 16px;
}

.view-btn:hover {
    background: #1B365C;
}
.view-btn.active {
    background: #2F8F9D;
    border-color: #2F8F9D;
}

.view-btn.active::before {
    filter: brightness(0) invert(1);
}
/* ===== 條列 icon ===== */
.view-btn.list::before {
    content: "";
    width: 26px;
    height: 16px;
    transform: translateX(1.5px);
    background:
    linear-gradient(#1B365C 0 0) 0 1px, linear-gradient(#1B365C 0 0) 0 6px, linear-gradient(#1B365C 0 0) 0 11px,
    linear-gradient(#1B365C 0 0) 5px 1px, linear-gradient(#1B365C 0 0) 5px 6px, linear-gradient(#1B365C 0 0) 5px 11px;
    background-size: 3px 3px, 3px 3px, 3px 3px, 18px 3px, 18px 3px, 18px 3px;
    background-repeat: no-repeat;
}
.view-btn.list:hover::before {
    background:
    linear-gradient(#fff 0 0) 0 1px, linear-gradient(#fff 0 0) 0 6px, linear-gradient(#fff 0 0) 0 11px,
    linear-gradient(#fff 0 0) 5px 1px, linear-gradient(#fff 0 0) 5px 6px, linear-gradient(#fff 0 0) 5px 11px;
    background-size: 3px 3px, 3px 3px, 3px 3px, 18px 3px, 18px 3px, 18px 3px;
    background-repeat: no-repeat;
}

/* ===== Grid icon ===== */
.view-btn.grid::before {
    content: "";
    width: 16px;
    height: 16px;
    background: linear-gradient(#1B365C 0 0) 0 0, linear-gradient(#1B365C 0 0) 100% 0, linear-gradient(#1B365C 0 0) 0 100%, linear-gradient(#1B365C 0 0) 100% 100%;
    background-size: 7px 7px;
    background-repeat: no-repeat;
}
.view-btn.grid:hover::before {
    background: linear-gradient(#fff 0 0) 0 0, linear-gradient(#fff 0 0) 100% 0, linear-gradient(#fff 0 0) 0 100%, linear-gradient(#fff 0 0) 100% 100%;
    background-size: 7px 7px;
    background-repeat: no-repeat;
}

.product-list-item {
    display: flex;
    align-items: stretch;
    border: 1px solid #c9d3df;
    padding: 20px;
    margin-bottom: 16px;
    background: #FAFAF5;
}

/* 左：圖片 */
.pli-img {
    width: 260px;
    flex-shrink: 0;
}

/* 中：內容 */
.pli-content {
    flex: 1;
    padding: 0 24px;
    box-sizing: border-box;
    min-width: 0;
}

.pli-content-top {
    flex: 1;
    color: #fff;
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 2px;
    box-sizing: border-box;
}

.pli-en {
    color: #fff;
    text-align: center;
    padding: 8px;
    font-size: 15px;
    margin-bottom: 10px;
}

.pli-desc {
    color: #fff;
    padding: 16px;
    font-size: 15px;
    line-height: 1.6;
}


.pli-tags {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* 右：操作欄（只在這層用 flex） */
.pli-action {
    width: 180px;
    display: flex;
    flex-direction: column;
    text-align: center;
    box-sizing: border-box;
}

.pli-action-bottom {
    margin-top: auto;
}

.btn-spec {
    display: inline-block;
    background: #0080a3;
    color: #fff;
    padding: 12px 18px;
    text-decoration: none;
    font-size: 15px;
    border-radius: 4px;
    margin-top: 12px;
}

.btn-spec:hover {
    background: #095f6d;
    color: #fff;
    text-decoration: none;
}

.pli-pdBrowText {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.pli-ptgTitle {
    display: block;
    width: fit-content;
    margin: 12px 0 12px 0;
    padding: 10px 40px;
    background: #4A76B8;
    color: #fff;
    font-size: 18px;
    border-radius: 4px;
}

@media (max-width: 896px) {

    .product-list-item {
        flex-direction: column;
    }

    .pli-img,
    .pli-content,
    .pli-action {
        width: 100%;
    }

    .pli-content {
        padding: 16px 0;
    }

    .pli-action {
        margin-top: 16px;
    }

    .pli-action-bottom {
        margin-top: 12px;
    }
}