@charset "UTF-8";

.test-wr {
    position: relative;
    width: 86%;
    margin: 0% auto;
    padding: 2% 12% 4% 4%;

}

.test {
    width: 100%;

    border-radius: 16px;
}

section .product-index {
    position: absolute;
    /* 初始位置設為絕對定位 */
    transition: all 0.4s ease-in-out;
    /* 過渡效果，讓固定更加平滑 */
    display: flex;
    flex-direction: column;
    /* 垂直排列 */
    /* 每個連結之間的間距 */
    text-align: center;
    /* 讓文字居中（可選） */
    top: 0vh;
    right: 12vw;
    z-index: 2;
}

section .product-index a {
    font-size: 1vw;
    font-weight: 600;
    padding: 1.5vh 1vw;
    margin: 2vh 0 0;
    letter-spacing: 3px;
    writing-mode: vertical-rl;
    /* 文字垂直排列，從右向左 */
    text-orientation: upright;
    /* 每個字直立顯示 */
    transition: color 0.4s ease-in;
    /* 增加滑鼠懸停效果 */
    color: #797979;
    background-color: #efefef;
    box-shadow: inset -1px -2px 4px rgba(64, 42, 12, 0.1764705882);
    border-radius: 8px;
}

section .product-index a:hover {
    color: #474747;
    background-color: #F6AA31;
}

section .product-display {
    width: 36vw;
    position: sticky;
    height: 100%;
    top: 20vh;
}

section .product-display__image--main {
    max-width: 100%;
    height: auto;
    display: block;
}


section .product-card {
    width: 50vw;
    position: relative;
    top: 0vh;
    margin: 0vh 0 4vh;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

section .product-card--main {
    position: relative;
    z-index: 4;
    width: 80%;
    background-color: rgba(228, 228, 228, 0.7921568627);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    /* 背景模糊 */
    box-shadow: 4px 4px 10px rgba(224, 224, 224, 0.2823529412);
    box-shadow: inset -1px -2px 8px rgba(41, 41, 41, 0.1647058824);
    padding: 6vh 4.5vh;
    border-radius: 32px;
}

section .product-card__title {
    font-size: 2.9vw;
    font-weight: 700;
    line-height: 1.2;
    margin: 1vh 0 3vh;
}

section .product-card__subtitle {
    color: #848484;
    font-weight: 500;
    font-size: 1vw;
    letter-spacing: 1.5px;
}

section .product-card__description {
    font-weight: 400;
}

section .product-card__description-subtitle {
    font-size: 1.1vw;
    letter-spacing: 0.2vw;
    line-height: 2;
}

section .product-card__description p {
    font-weight: 300;
    font-size: 1vw;
    letter-spacing: 0.2vw;
    line-height: 2;
}

section .product-card__description ul {
    margin: 4% auto;
    display: flex;
    font-size: 1.1vw;
}

section .product-card__description ul li {
    border: 1.5px solid #6c6c6c;
    border-radius: 0.4vw;
    padding: 1vw;
    margin: 0 0.7vw 0 0;
}

section .product-card .product-specifications {
    font-weight: 200;
    display: flex;
    align-items: center;
    padding: 2% 0;
    margin: 3% 0;
}

section .product-card .product-specifications__title {
    font-size: 16px;
    margin-right: 3%;
}

section .product-card .product-specifications__group {
    display: flex;
    align-items: center;
    margin: 0 3%;
}

section .product-card .product-specifications__size {
    font-size: 14px;
    margin: 0 4px;
}

section .product-card .product-specifications__options {
    display: flex;
    gap: 5px;
}

section .product-card .product-specifications__option {
    padding: 5px 10px;
    border: 1px solid #8b8b8b;
    border-radius: 5px;
    font-size: 14px;
}

section .product-card__more {
    font-size: 12px;
    color: #313131;
    letter-spacing: 2px;
}

section .product-feature__title {
    margin: 5vh 0 2vh;
    font-size: 2.5vw;
    font-weight: 700;
    letter-spacing: 3px;
}

section .product-feature__description h3 {
    width: 100%;
    font-size: 1.25vw;
    font-weight: 400;
    padding: 1%;
    margin: 5% 0 2%;
    letter-spacing: 1px;
    border: 1.75px solid rgb(94, 94, 94);
    color: rgb(67, 67, 67);
    border-radius: 4px;
}

section .product-feature__description p {
    font-weight: 300;
    font-size: 1vw;
    letter-spacing: 0.2vw;
    line-height: 2;
}

section .product-feature__recommand {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

section .product-feature__recommand li {
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: 100%;
}

section .product-feature__recommand li div {
    width: 50%;
    display: flex;
    justify-content: space-around;
    padding: 2%;
    margin: 1% 2%;
    border-radius: 4px;
    border: 1px solid rgb(94, 94, 94);
}

section .product-feature__recommand li div p {
    font-weight: 600;
    font-size: 1vw;
    letter-spacing: 0.05vw;
    line-height: 1.2;
}


























.product-feature__description>ul {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* 永遠單欄 */
    gap: 12px;
}

/* 單一卡片 */
.product-feature__description>ul>li {
    position: relative;
    padding: 14px 14px 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    line-height: 1.75;
    letter-spacing: 0.2px;
}

/* 左側標記條 */
.product-feature__description>ul>li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

/* 標題（原液 / 1:1 / 1:3） */
.product-feature__description>ul>li>strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    margin-right: 6px;
    white-space: nowrap;
}

/* 做成小 badge：更像「比例」而不是正文 */
.product-feature__description>ul>li>strong {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

/* 讓 strong 後面的文字自動換行更舒服 */
.product-feature__description>ul>li {
    word-break: break-word;
}

/* 針對三個項目做「差異化」視覺：依序上色（不依賴額外 class） */
.product-feature__description>ul>li:nth-child(1)::before {
    background: rgba(255, 75, 75, 0.55);
    /* 原液：高強度 */
}

.product-feature__description>ul>li:nth-child(2)::before {
    background: rgba(252, 171, 32, 0.55);
    /* 1:1：中強度 */
}

.product-feature__description>ul>li:nth-child(3)::before {
    background: rgba(90, 200, 120, 0.55);
    /* 1:3：維護 */
}

/* hover：更像文章頁卡片互動 */
.product-feature__description>ul>li:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

/* 卡片內的標點/換行看起來更一致 */
.product-feature__description>ul>li br {
    display: none;
    /* 如果你未來有 <br>，預設不讓它破壞節奏 */
}

/* RWD：寬螢幕時改成 3 欄卡片（更像「比例選擇器」） */
@media (min-width: 920px) {
    .product-feature__description>ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-feature__description>ul>li {
        padding: 16px 16px 16px 18px;
    }
}

/* 手機：字距/間距稍微縮一點 */
@media (max-width: 420px) {
    .product-feature__description>ul>li {
        padding: 12px 12px 12px 14px;
        border-radius: 10px;
    }

    .product-feature__description>ul>li>strong {
        padding: 3px 8px;
    }
}