/* 仟色2025 */


@charset "utf-8";

/* CSS Document */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    -webkit-tap-highlight-color: transparent;
}

:focus {
    outline: none;
}

/* Body捲軸樣式 */
body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #545558, #474d5b);
    border-radius: 5px;
}

body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #094c5c, #20363b);
}

/* Firefox捲軸 */
body {
    scrollbar-width: thin;
    scrollbar-color: #db5f79 #f1f1f1;
}

:root {
    --white: #fff;
    --black: #000;
    --bg: #1c1c1c;
    --fg: #1a1a1a;
    --hg: #333;
    --muted: #6b7280;
    --primary: #db5f79;
    --surface: #f3f4f6;
    --border: #e5e7eb;
    --radius: 16px;
    --shadow: 0 6px 24px rgba(0, 0, 0, .08);
    /* --font-brand: 'Inter', 'PingFang SC', 'Microsoft YaHei', Arial;  */

    --fs-hero: clamp(24px, 3vw + 12px, 40px);
    --fs-title: clamp(18px, 1.2vw + 10px, 24px);
    --fs-body: clamp(14px, .4vw + 12px, 16px);
    --container: 780px;
    --ant-font-family: -apple-system, BlinkMacSystemFont, 'Microsoft JhengHei', 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
        'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';
    --ant-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    --glass-blur: 5px;
    /* 背景模糊強度 */
    --glass-saturation: 1.12;
    /* 飽和度 */
    --glass-brightness: 1;
    /* 亮度 */
    --glass-tint-light: rgba(255, 255, 255, 0.55);
    /* 亮模式 tint */
    --glass-tint-dark: rgba(18, 18, 18, 0.45);
    /* 暗模式 tint */
    --glass-border: rgba(255, 255, 255, 0.28);
    /* 邊框顏色（亮） */
    --glass-border-dark: rgba(255, 255, 255, 0.08);
    /* 邊框顏色（暗） */
    --glass-inner-shadow: rgba(0, 0, 0, 0.06);
    --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    --glass-radius: 14px;
    --noise-opacity: 0.03;
    /* 噪點不透明度 */
    --scrollbar-track: #f5f5f5;
    --scrollbar-thumb: #db5f79;
    --scrollbar-thumb-hover: #c04d66;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--ant-font-family);
    background: #333;
    /* background: var(--hg);  */
    color: var(--fg);
    font-size: var(--fs-body);

}

.global-container {
    max-width: 780px;
    height: calc(var(--vh) * 100);
    margin: 0 auto;
    padding: 12px;
    background: white;
    border-radius: 16px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    margin-top: 20px;
    box-shadow: 0 15px 40px rgba(219, 95, 121, 0.2);
    /* 用動態 vh 控制 */
}

input,
textarea,
select,
button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 13.3333px Arial;
}


a {
    text-decoration: none;
}
ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sr-only {
    display: none;
}
img{
    width:100%;
}
header {
    background: var(--fg);
    max-width: var(--container);
    margin: 0 auto;
}
section {
    max-width: var(--container);
    margin: 0 auto;
    /* background: var(--fg); */
    overflow: hidden;
    padding-bottom: 60px;
    padding: 0;
    position: relative;
}

aside {
    max-width: var(--container);
    margin: 0 auto;
    background: var(--fg);
    overflow: hidden;
    padding-bottom: 60px;
    padding: 0;
    position: relative;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    margin-top: 10px;
}

a:link,
a:active,
a:visited,
a:hover {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

/* 覆蓋瀏覽器 autofill 預設背景色，設定為透明 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
    font-weight: bold !important;
    transition: background-color 5000s ease-in-out 0s;
    background-color: transparent !important;
}

.index-search input:-webkit-autofill {
    -webkit-transition-delay: 99999s;
    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
    -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, .6) inset;
}

input:focus {
    outline: none;
}

input:focus::-webkit-input-placeholder {
    opacity: 0;
    -webkit-transition: .4s;
    transition: .4s;
}

input:focus::-moz-placeholder {
    opacity: 0;
    -moz-transition: .4s;
}

input:focus:-ms-input-placeholder {
    opacity: 0;
    -webkit-transition: .4s;
    transition: .4s;
}

textarea:focus {
    outline: none;
}

textarea:focus::-webkit-input-placeholder {
    opacity: 0;
    -webkit-transition: .4s;
    transition: .4s;
}

textarea:focus::-moz-placeholder {
    opacity: 0;
    -moz-transition: .4s;
}

textarea:focus:-ms-input-placeholder {
    opacity: 0;
    -webkit-transition: .4s;
    transition: .4s;
}

@font-face {
    font-family: "AVANTI";
    src: url("fonts/AVANTI.eot");
    /* IE9 */
    src: url("fonts/AVANTI.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */
        url("fonts/AVANTI.woff") format("woff"),
        /* chrome、firefox */
        url("fonts/AVANTI.ttf") format("truetype"),
        /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
        url("fonts/AVANTI.svg#AVANTI") format("svg");
    /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "avenir";
    src: url("fonts/avenir.eot");
    /* IE9 */
    src: url("fonts/avenir.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */
        url("fonts/avenir.woff") format("woff"),
        /* chrome、firefox */
        url("fonts/avenir-next-bold.ttf") format("truetype"),
        /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
        url("fonts/avenir.svg#avenir") format("svg");
    /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "FZYUEJFW";
    src: url("fonts/FZYUEJFW.eot");
    /* IE9 */
    src: url("fonts/FZYUEJFW.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */

        url("fonts/FZYUEJFW.woff") format("woff"),
        /* chrome、firefox */
        url("fonts/FZYUEJFW.ttf") format("truetype"),
        /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */

        url("fonts/FZYUEJFW.svg#FZYUEJFW") format("svg");
    /* iOS 4.1- */

}


/* ----選擇城市---- */
.picker-container {
    width: 100%;
    max-width: 320px;
    /* background: rgba(28, 28, 30, 0.95); */
    background: #f4f3fd;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 0.4s ease;
    height: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1000;
}

.picker-container.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    height: auto;
}

.header {
    padding: 10px;
    text-align: center;
    color: #56646a;
    font-weight: 600;
    font-size: 16px;
    border-bottom: 1px solid #e3e3e5;
    /* background: rgba(44, 44, 46, 0.8); */
    background: #fdfdff;
    position: relative;
}

.picker-container .close-btn {
    width: 30%;
    height: 30%;
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'><path d='M825 770 563 509 825 248c15-15 15-39 0-54s-39-15-54 0L510 455 249 194c-15-15-39-15-54 0s-15 39 0 54l261 261-261 261c-15 15-15 39 0 54s39 15 54 0l261-261 261 261c15 15 39 15 54 0s15-39 0-54z' fill='%23999'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 15px;
    right: -50px;
    cursor: pointer;
}

.picker {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

.picker-list {
    list-style: none;
    padding: 0;
    margin: 0;
    transform: translateY(0);
    transition: transform 0.2s ease-out;
    /* background: -webkit-linear-gradient(#000 0%, #333 35%, #888 50%, #333 65%, #000 100%); */
}

.picker-list li {
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #56646a;
    font-size: 16px;
    user-select: none;
    transition: all 0.3s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding: 0 10px;
}

.picker-list li.selected {
    color: #000;
    font-size: 18px;
    font-weight: bold;
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 20px rgba(255, 155, 5, 0.1);
}
.picker-list li a{
    color: #56646a;
    text-decoration: none;
}
.picker-list li.selected a{
    color: #000;
    text-decoration: none;
}
.highlight {
    position: absolute;
    width: 100%;
    top: 85px;
    left: 0;
    right: 0;
    height: 0;
    /* background: url(../images/hightLight.png) center no-repeat; */
    background-size: contain;
    /* border-top: 1px solid rgba(255, 155, 5, 0.4);
    border-bottom: 1px solid #fff;
    box-shadow: 0 0 3px rgba(255, 155, 5, 0.6); */
    pointer-events: none;
    border-radius: 0;
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}



.picker-footer {
    text-align: center;
    border-top: 1px solid #e3e3e5;
    background: #fdfdff;
    margin-top: 20px;
}

.confirm-btn {
    background: linear-gradient(135deg, rgb(219, 95, 121), rgb(230, 120, 143));
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(155, 115, 50, 0.3);
    width: 100%;
    text-align: center;
}

.confirm-btn:hover {
    background: linear-gradient(135deg, #db5f79, #e6788f);
    box-shadow: 0 6px 15px rgba(85, 15, 15, 0.4);
}

.confirm-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(225, 135, 5, 0.3);
}

.selected-city {
    margin-top: 25px;
    padding: 15px 25px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 1;
    position: relative;
}

.selected-city span {
    color: #db5f79;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(219, 95, 121, 0.5);
}

.instructions {
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    font-size: 14px;
    max-width: 320px;
    z-index: 1;
    position: relative;
}

.api-response {
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 50px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    max-width: 320px;
    display: none;
}

.api-response.success {
    background: rgba(85, 165, 5, 0.8);
    display: block;
}

.api-response.error {
    background: rgba(231, 76, 60, 0.2);
    display: block;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(135deg, #2c3e50, #1a1a2e); */
    /* background: rgba(44, 62, 80, 0.7); */
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    z-index: 999;
    display: none;
}

.overlay.show {
    opacity: 1;
    visibility: visible;
}

/* ------- 18禁 ------- */
.container {
    max-width: 600px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 30px;
    text-align: center;
}

h1 {
    color: #db5f79;
    margin-bottom: 20px;
    font-size: 2.2rem;
}

p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.overlay-18 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: opacity 0.3s ease;
}

.agreement-box {
    background: white;
    border-radius: 12px;
    width: 90%;
    height: 80%;
    --agreement-box-ratio: 5 / 7;
    --agreement-btn-ratio: 9 / 3;
    max-width: 500px;
    padding: 25px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.4s ease;
    position: fixed;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 630px;
    display: none;
}

.warnning-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16%;
    height: 16%;
    margin: 0 auto;
}

.agreement-box.show {
    transform: scale(1);
    display: flex;
    flex-direction: column;
}

.agreement-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #e74c3c;
    margin-bottom: 15px;
    font-size: 1.8rem;
    margin-bottom: 20px;
    margin-top: 6px;
}

.agreement-title img {
    width: 38px;
    margin-right: 16px;
}

.agreement-content {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: justify;
    border: 1px solid #eee;
    line-height: 40px;
    text-indent: 1.8rem;
}

.agreement-content p {
    margin-bottom: 10px;
    color: #555;
}

/* 18 禁彈窗：移動端高度與內容區流體適配 */
@media (max-width: 768px) {
    .agreement-box {
        width: min(92vw, 520px);
        height: auto;
        aspect-ratio: var(--agreement-box-ratio);
        max-height: 90vh;
        padding: clamp(14px, 3.2vw, 22px);
        border-radius: 10px;
    }

    .warnning-logo {
        width: clamp(48px, 12vw, 72px);
        height: clamp(48px, 12vw, 72px);
    }

    .agreement-title {
        margin: 8px 0 14px;
        font-size: clamp(1.15rem, 4.8vw, 1.55rem);
    }

    .agreement-title img {
        width: clamp(24px, 6.2vw, 34px);
        margin-right: clamp(8px, 2vw, 12px);
    }

    .agreement-content {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        line-height: clamp(26px, 5.4vw, 34px);
        text-indent: 1.4rem;
        padding: clamp(10px, 2.5vw, 14px);
        margin-bottom: clamp(12px, 2.8vw, 18px);
    }

    .checkbox-container {
        margin-bottom: clamp(10px, 2.6vw, 16px);
        font-size: clamp(13px, 3.4vw, 15px);
    }

    .checkbox-container input {
        width: clamp(16px, 4.5vw, 18px);
        height: clamp(16px, 4.5vw, 18px);
    }

    .buttons {
        gap: clamp(8px, 2.4vw, 14px);
    }

    .btn {
        width: clamp(112px, 31vw, 156px);
        aspect-ratio: var(--agreement-btn-ratio);
        min-height: 0;
        height: auto;
        padding: 0;
        font-size: clamp(0.88rem, 3.2vw, 1rem);
        line-height: 1.15;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }
}

@media (max-width: 540px) {
    .agreement-box {
        width: 94vw;
        aspect-ratio: var(--agreement-box-ratio);
        max-height: 92vh;
        padding: clamp(12px, 3vw, 18px);
    }

    .agreement-content {
        max-height: none;
        line-height: 38px;
        text-indent: 1.2rem;
        font-size: 14px;
        padding: 30px;
    }
}

@media (max-width: 375px) {
    .agreement-box {
        width: 95vw;
        aspect-ratio: var(--agreement-box-ratio);
        max-height: 94vh;
        padding: 12px;
    }

    .agreement-content {
        max-height: none;
        line-height: 32px;
        text-indent: 1.2rem;
        font-size: 14px;
        padding: 30px;
    }

    .btn {
        width: clamp(100px, 34vw, 132px);
        font-size: 0.86rem;
    }
}

.checkbox-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: center;
    cursor: pointer;
}

.checkbox-container label {
    cursor: pointer;
}

.checkbox-container input {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.btn {
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-accept {
    background: #2ecc71;
    color: white;
}

.btn-accept:hover {
    background: #27ae60;
    transform: translateY(-2px);
}

.btn-reject {
    background: #e74c3c;
    color: white;
}

.btn-reject:hover {
    background: #c0392b;
    transform: translateY(-2px);
}

/* 18 禁彈窗按鈕：使用更高選擇器優先級，避免被全域 .btn 覆蓋 */
.agreement-box .buttons .btn {
    width: 118px;
    aspect-ratio: var(--agreement-btn-ratio, 10 / 3);
    min-height: 0;
    height: auto;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.15;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .agreement-box .buttons {
        gap: clamp(8px, 2.4vw, 14px);
    }

    .agreement-box .buttons .btn {
        width: clamp(84px, 24vw, 116px);
        font-size: clamp(0.76rem, 2.7vw, 0.86rem);
    }
}

@media (max-width: 540px) {
    .agreement-box .buttons .btn {
        width: clamp(78px, 26vw, 102px);
        font-size: clamp(0.80rem, 2.5vw, 0.85rem);
    }
}

@media (max-width: 375px) {
    .agreement-box .buttons .btn {
        width: clamp(72px, 24vw, 92px);
        font-size: clamp(0.68rem, 2.3vw, 0.76rem);
    }
}

.hidden {
    display: none;
}

/* 首頁樣式*/
.top-container {
    position: relative;
    height: 116px;
    background: #f76b88;
    background-size: cover;
    border-radius: 15px;
    overflow: hidden;
}

.homepage_logo {
    position: absolute;
    left: 5%;
    top: 109px;
    width: 12%;
    height: 12%;
    display: flex;
    align-items: center;
    z-index: 10;
}

.logo-container {
    position: absolute;
    top: 25px;
    left: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    z-index: 3;
    transition: opacity 0.3s ease;
    /* 為右側搜尋、會員按鈕留白，讓標題可觸發省略號 */
    max-width: calc(100% - 175px);
    box-sizing: border-box;
}

.logo-container.hidden {
    opacity: 0;
    pointer-events: none;
}

.logo-image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo-text {
    display: flex;
    flex-direction: column;
    color: white;
    text-align: center;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
    overflow: hidden;
}

.logo-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.logo-subtitle {
    font-size: 0.7rem;
    margin: 0;
    opacity: 0.9;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.user-menu {
    position: absolute;
    top: 35px;
    right: 20px;
    z-index: 15;
}
.user-menu a{
    text-decoration: none;
}
.user-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.user-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.user-btn i {
    font-size: 2.0rem;
    font-weight: lighter;
}

.user-btn .user-btn-icon {
    width: 55%;
    height: 55%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.user-dropdown {
    position: absolute;
    top: 60px;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    min-width: 250px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.user-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-info {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
    border-radius: 12px 12px 0 0;
}

.user-avatar {
    margin-right: 12px;
}

.user-avatar i {
    font-size: 2rem;
    color: #6c757d;
}

.user-details {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95rem;
}

.user-status {
    color: #6c757d;
    font-size: 0.8rem;
}

.user-actions {
    padding: 10px;
}

.user-action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border: none;
    background: transparent;
    color: #2c3e50;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.user-action-btn:hover {
    background: #f8f9fa;
    color: #db5f79;
}

.user-action-btn i {
    margin-right: 10px;
    width: 16px;
}

.user-action-btn:last-child {
    margin-bottom: 0;
}

/* 搜尋圖示按鈕 */
.search-icon-btn {
    position: absolute;
    top: 35px;
    right: 80px;
    z-index: 100;
    transition: opacity 0.3s ease;
    pointer-events: auto;
}

.search-icon-btn.hidden {
    opacity: 0;
    pointer-events: none;
}

.search-toggle-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.search-toggle-btn i {
    font-size: 1.6rem;
    color: white;
}

.search-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.search-container {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 18px;
    z-index: 10;
    transform: translateY(-50%) translateX(100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 450px;
    pointer-events: none;
}

.search-container.active {
    transform: translateY(-50%) translateX(-60px);
    opacity: 1;
    pointer-events: auto;
}

/* #header：Logo／搜尋圖示／會員區塊垂直居中 */
#header .header-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

#header .logo-container {
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

#header .user-menu {
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
}

#header .search-icon-btn {
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
}

.search-box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    padding: 8px 7px 8px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    width: 352px;
    height: 50px;
    position: relative;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    color: white;
    padding: 8px 12px;
    font-family: inherit;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.image-search-btn {
    background: linear-gradient(135deg, #db5f79, #db5f79);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
    margin-right: 8px;
}

.image-search-btn:hover {
    background: linear-gradient(135deg, #db5f79, #db5f79);
    transform: scale(1.05);
    box-shadow: none;
}

.image-search-btn:active {
    transform: scale(0.95);
}

.image-search-btn i {
    font-size: 0.9rem;
}

.search-btn {
    /* background: linear-gradient(135deg, #ffe7e1, #f97f98); */
    background: #ff0051;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

.search-btn:hover {
    background: #db5f79;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.4);
}

.search-btn:active {
    transform: scale(0.95);
}

.search-btn i {
    font-size: 0.9rem;
}

.advanced-search-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    margin-left: 8px;
    flex-shrink: 0;

}

.advanced-search-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.advanced-search-btn:active {
    transform: scale(0.95);
}

.advanced-search-btn i {
    font-size: 1.6rem;
}

/* 麵包屑：全端隱藏（保留樣式定義以便後續需要時快速恢復） */
.breadcrumb {
    display: none !important;
    align-items: center;
    margin-bottom: 24px;
    padding: 14px 18px;
    background: #eaf7ff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(219, 95, 121, 0.15);
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--muted);
}

.breadcrumb li[aria-current="page"] {
    color: var(--fg);
    font-weight: 600;
}

.breadcrumb a {
    color: #db5f79;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.breadcrumb a:hover {
    color: #a03d50;
    text-decoration: underline;
}

.breadcrumb span {
    margin: 0 10px;
    color: #7f8c8d;
}

.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

.product-gallery {
    position: relative;
    min-width: 0;
    /* 防止 grid 子元素溢位 */
    height: 540px;
    border-radius: 15px;
    overflow: visible;
    box-shadow: 0 10px 25px rgba(219, 95, 121, 0.2);
    padding: 10px;
    padding-bottom: 20px;
}

/* 確保 product-gallery 中的 aside 顯示 */
.product-gallery aside {
    display: block !important;
    max-width: 100%;
    background: transparent;
    padding: 0;
    overflow: visible;
    height: 100%;
}

/* 確保 product-gallery 中的 carousel-container 顯示 */
.product-gallery .carousel-container {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
}

/* 詳情頁：主圖 + 縮圖條垂直排列（與 moban-1 / carousel.js 行為一致） */
.product-gallery .carousel-container.subpage {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
}

.product-gallery .carousel-container.subpage > .thumbnails-container {
    flex-shrink: 0;
    width: 100%;
}

/* 確保 product-gallery 中的 main-image 顯示 */
.product-gallery .main-image {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    perspective: 1200px;
}

.product-gallery .main-image .carousel-track {
    display: flex;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* 每張與視區同寬，軌道橫向平移時才不會擠壓變形（JS 重建後可能是 carousel-slide） */
.product-gallery .main-image .details-slide,
.product-gallery .main-image .details-slide.slide-anim,
.product-gallery .main-image .carousel-slide,
.product-gallery .main-image .carousel-slide.slide-anim {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.product-gallery .main-image .details-slide > img,
.product-gallery .main-image .details-slide > video,
.product-gallery .main-image .carousel-slide > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-detail .product-info {
    min-width: 0;
    /* 防止 grid 子元素溢位 */
}

.product-detail .carousel-track {
    height: 100%;
}

.main-image {
    width: 100%;
    height: 100%;
    position: relative;
    flex-shrink: 0;
    /* 防止在 flex/grid 佈局中收縮 */
}

.product-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: linear-gradient(90deg, #fbbd39, #ff8a00);
    border: 2px solid rgba(240, 240, 240, 0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
    z-index: 2;

}
.yhzq-list .product-badge {
    left:4px;
    bottom: 40px;
}

.main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    /* border-radius: 10px; */
}



.main-image .video-container {
    height: 100%;
}


.carousel-arrow {
    width: 40px;
    height: 40px;
}

.carousel-arrow.prev {
    left: 10px;
}

.carousel-arrow.next {
    right: 10px;
}

.carousel-arrow svg {
    width: 20px;
    height: 20px;
}

.yhzq-list > .img-containe {
    flex-shrink: 0;
}

.yhzq-list > .details-containe {
    padding: 12px;
    padding-bottom: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.yhzq-list > .details-containe > ul {
    flex: 1 1 auto;
    min-height: 0;
}

.yhzq-list > .details-containe > .bottom-icons {
    margin-top: auto;
    flex-shrink: 0;
}

/* 觸控滑動時禁用過渡 */
.carousel-track.dragging {
    transition: none;
}




/* 首頁輪播圖 */
.carousel-container {
/* position: relative; */
width: 100%;
max-width: var(--container);
/* box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); */
}

.carousel-container.subpage {
border-radius: 8px;
overflow: visible;
max-width: 100%;
}

.carousel-container.subpage .main-image {
overflow: hidden;
border-radius: 8px 8px 0 0;
max-width: 100%;
white-space: nowrap;
/* 防止內容折行 */
}

.carousel {
position: relative;
width: 100%;
max-width: var(--container);
overflow: hidden;
perspective: 1200px;
touch-action: pan-y;
}

.carousel.float-active {
position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
}

.details-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 全屏容器樣式 */
.carousel-container.fullscreen-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 100%;
height: auto;
max-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
overflow: hidden;
animation: fullscreenEnter 1s cubic-bezier(0.34, 1.56, 0.64, 1);
border-radius: 0;
}

.main-image.float-active {
height: 100vh;
object-fit: cover;
}

.main-image.float-active img {
width: auto;
height: 100%;
}

.float-active .carousel-track {
height: 100%;
}

/* 全屏退出動畫 */
.carousel-container.fullscreen-exit {
animation: fullscreenExit 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 全屏進入動畫 */
@keyframes fullscreenEnter {
0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
}

60% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 1;
}

100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
}

/* 全屏退出動畫 */
@keyframes fullscreenExit {
0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

100% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
}
}

.carousel.fullscreen-active {
position: relative;
width: 100%;
height: 100%;
max-width: 780px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

/* 全屏模式下的輪播軌道 */
.carousel.fullscreen-active .carousel-track {
height: 100%;
display: flex;
align-items: center;
}

/* 全屏模式下的幻燈片容器 */
.carousel.fullscreen-active .carousel-slide {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #000;
}

/* 全屏模式下的圖片和影片樣式 */
.carousel.fullscreen-active img,
.carousel.fullscreen-active video {
max-width: 100%;
/* height: 100vh; */
object-fit: cover;
}

/* 全屏模式下的橫圖（寬>高）：寬度100% */
.carousel.fullscreen-active .carousel-slide img.landscape-img {
width: 100% !important;
height: auto !important;
max-height: 100vh;
object-fit: contain;
}

/* 全屏模式下的豎圖（寬<高）：高度100% */
.carousel.fullscreen-active .carousel-slide img.portrait-img {
width: auto !important;
height: 100% !important;
max-height: 100vh;
max-width: 100%;
object-fit: contain;
}

/* 隱藏影片進度條 */
video::-webkit-media-controls-timeline {
display: none;
}

video::-moz-progress-bar {
display: none;
}

video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display {
display: none;
}

/* 隱藏影片右邊的三個點選單 */
video::-webkit-media-controls-overflow-button {
display: none;
}

video::-internal-media-controls-overflow-button {
display: none;
}

/* 全屏模式下的指示器樣式 */
.carousel.fullscreen-active .dots,
.carousel.fullscreen-active .dots-counter {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1002;
}

/* 詳情頁 main-image 全屏（主體類名為 main-image，非 .carousel） */
.main-image.float-active.fullscreen-active {
position: relative;
width: 100%;
height: auto;
max-height: 100vh;
max-width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
object-fit: unset;
}

.main-image.float-active.fullscreen-active .carousel-track {
height: auto;
max-height: 100vh;
min-height: 0;
display: flex;
align-items: center;
}

.main-image.float-active.fullscreen-active .details-slide {
min-height: 0;
height: auto;
max-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #000;
flex: 0 0 100%;
}

.main-image.float-active.fullscreen-active img,
.main-image.float-active.fullscreen-active video {
max-width: 100%;
object-fit: cover;
}

.main-image.float-active.fullscreen-active .details-slide img.landscape-img {
width: 100% !important;
height: auto !important;
max-height: 100vh;
object-fit: contain;
}

.main-image.float-active.fullscreen-active .details-slide img.portrait-img {
width: auto !important;
height: 100% !important;
max-height: 100vh;
max-width: 100%;
object-fit: contain;
}

.main-image.fullscreen-active .dots,
.main-image.fullscreen-active .dots-counter {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1002;
}


.yhzq-containe .carousel {
height: 520px;
}

.carousel-track {
width: 100%;
display: flex;
position: relative;
transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
transform: translateX(0%);
}

.yhzq-containe .carousel-track {
height: auto;
}

.carousel-slide {
display: flex;
align-items: center;
justify-content: center;
}

.carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Slide */
.carousel-slide.slide-anim {
position: relative;
flex-shrink: 0;
width: 100%;
z-index: 1;
}

.carousel-slide.slide-anim.active {
z-index: 5;
}

/* Fade */
.carousel-slide.fade-anim {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transform: scale(0.95);
z-index: 1;
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.carousel-slide.fade-anim.active {
opacity: 1;
transform: scale(1);
z-index: 5;
}

.carousel-slide video {
width: 100%;
}

/* CoverFlow */
.carousel-slide.coverflow-anim {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.6s ease;
}

.carousel-slide.left {
transform: translateX(-30%) scale(0.7) rotateY(30deg);
opacity: 0.6;
z-index: 5;
}

.carousel-slide.right {
transform: translateX(30%) scale(0.7) rotateY(-30deg);
opacity: 0.6;
z-index: 5;
}

.carousel-slide.active.coverflow-anim {
transform: translateX(0) scale(1) rotateY(0deg);
opacity: 1;
z-index: 10;
}

/* 標題與簡介 */
.carousel-slide .caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
color: white;
padding: 30px;
z-index: 10;
transition: transform 0.3s ease;
pointer-events: none;
/* 不阻擋點選 */
}

.details-slide .caption {
display: none;

}

.carousel-slide .caption h2,
.carousel-slide .caption h3 {
    font-size: 24px;
    margin: 0 0 10px;
    font-weight: 600;
    line-height: 1.2;
}

.carousel-slide .caption p {
font-size: 14px;
opacity: 0.9;
color: white;
margin: 0;
}

.carousel-slide.fade-anim .caption {
opacity: 0;
}

.carousel-slide.fade-anim.active .caption {
opacity: 1;
}

/* 按鈕與圓點 */
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.4);
/* border: none; */
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10;
fill: #fff;
color: #fff;
font-size: 24px;
/* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); */
-webkit-tap-highlight-color: transparent;
outline: none;
}

.prev {
left: 15px;
}

.next {
right: 15px;
}

.prev:hover,
.next:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* 指示器 */

.dots {
width: 30%;
position: absolute;
bottom: 20px;
right: 10px;
display: flex;
justify-content: space-between;
gap: 4px;
z-index: 20;
}

.carousel-indicators {
width: 100%;
height: 75px;
background-color: var(--hg);
display: flex;
align-items: center;
justify-content: right;
padding-right: 16px;
border-radius: 0;
}

.carousel-indicators .dots {
justify-content: right;
gap: 8px;
}

.dots span {
flex: 1;
height: 5px;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
border-radius: 2px;
transition: all 0.3s ease;
}

.dots span.active {
background: #db5f79;
/* transform: scale(1.3); */
}

.carousel-indicators .dots span {
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
flex: none;
display: flex;
align-items: center;
justify-content: center;
color: #777;
}

.carousel-indicators .dots span.active {
background: #fff;
color: var(--black);
font-weight: bold;
/* transform: scale(1.3); */
}

/* 縮圖 */
.dots-counter {
position: absolute;
bottom: 20px;
right: 20px;
z-index: 20;
background: rgba(0, 0, 0, 0.5);
padding: 5px 10px;
border-radius: 12px;
font-size: 14px;
color: #fff;
}

.video-container {
width: 100%;
background: #000;
display: flex;
align-items: center;
justify-content: center;
}

.video-play-btn {
width: 50px;
height: 50px;
font-size: 24px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
position: absolute;
z-index: 999;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.65;
cursor: pointer;
}

.video-play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}

.thumbnails-container {
display: flex;
padding: 8px;
gap: 10px;
overflow-x: auto !important;
overflow-y: hidden !important;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(255, 255, 255, 0.2);
box-sizing: border-box;
position: relative;
margin-bottom: 0;
min-height: fit-content;
border-bottom-right-radius: 8px!important;
border-bottom-left-radius: 8px;
/* padding-bottom: 23px; */
}

/* 輪播縮圖：僅限縮圖列內，避免影響其他 .thumbnail */
.thumbnails-container .thumbnail {
flex-shrink: 0;
width: 15%;
aspect-ratio: 1;
height: auto;
box-sizing: border-box;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
transition: opacity 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 5px 5px rgba(52, 152, 219, 0.15);
border: 2px solid #eee;
position: relative;
}

.rank-thumbnails-container {
display: flex;
flex-wrap: wrap;
width: 100%;
padding: 0;
gap: 4px;
/* background: rgba(0, 0, 0, 0.3); 
backdrop-filter: blur(10px);
 border-top: 1px solid rgba(255, 255, 255, 0.2); */
}




.thumbnails-container .thumbnail:hover {
opacity: 0.8;
}

.thumbnails-container .thumbnail.active {
opacity: 1;
border-color: #db5f79;
}

.thumbnails-container .thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}

.rank-thumbnail {
height: 58px;
flex: 0 0 58px;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.3s;
border-radius: 5px;
overflow: hidden;
position: relative;
background-color: #db5f79;
}

.rank-thumbnail:hover {
opacity: 0.8;
}

.rank-thumbnail.active {
opacity: 1;
border-color: #db5f79;
}

.rank-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

.close-carousel {
position: fixed;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
/* font-size: 24px;*/
z-index: 1001;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 0;
outline: none;
padding: 10px;
}



@keyframes moveUpScale {
0% {
    transform: translateY(10px) scale(0.5);
    /* 初始：小且低 */
    opacity: 0;
}

100% {
    transform: translateY(0) scale(1);
    /* 結束：正常大小，位置回正 */
    opacity: 1;
}
}


.Site-Notice {
    width: 100%;
    height: 80px;
    background: #f76b88;
    display: flex;
    position: relative;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    overflow: hidden;
}

.sn-img {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 100%;
    z-index: 2;
    background-color: #f76b88;
}

.sn-img img {
    width: 24px;
}

.Site-Notice .left {
    width: 65%;
    height: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--fs-body);
    overflow: hidden;
}

.Site-Notice .right {
    height: 100%;
    flex: 1;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: right;
    color: white;
    font-size: 18px;
}

.Site-Notice .right .loaction {
    padding-right: 16px;
    cursor: pointer;
}

.Site-Notice .right svg {
    width: 15px;
    height: 15px;
    fill: white;
}

.sn_nr {
    width: 100%;
    height: 100%;

}

.marquee-content {
    width: 100%;
    /* position: absolute; */
    right: 0;
    top: 0;
    height: 100%;
    white-space: nowrap;
    z-index: 1;
    display: flex;
    animation: scroll 9s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(100%);
    }

    /* 從最右邊開始 */
    100% {
        transform: translateX(-100%);
    }

    /* 滾動到最左邊 */
}

.marquee-item {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 60px;
    font-size: var(--fs-body);
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;

}
.yhzq-top {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 16px;
    margin-top: 20px;
    margin-bottom: 5px;
    height: 90px;
    border-radius: 16px;
}

/* 優惠/推薦區外層：與 moban-1 一致，避免橫向 transform 撐出頁面捲軸 */
.yhzq-containe {
    width: 100%;
    height: auto;
    overflow: hidden;
}

/* -------優惠專區 / 推薦專區輪播（與 moban-1 一致）------- */
.slider-container {
    width: 100%;
    max-width: 900px;
    overflow: hidden;
    position: relative;
    padding-bottom: 15px;
    background-color: #fff;
}

.slider-container.subcategory {
    display: none;
}

.slider-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    transition: transform 0.5s ease;
    will-change: transform;
    margin-bottom: 15px;
    opacity: 0;
    visibility: hidden;
}

.slider-wrapper.initialized {
    opacity: 1;
    visibility: visible;
}

.slide {
    flex: 0 0 auto;
    padding: 0;
    text-align: center;
    margin: 6px;
    max-width: calc(100% - 12px);
    box-sizing: border-box;
}

.indicators {
    display: flex;
    justify-content: center;
}

.indicators span {
    width: 24px;
    height: 24px;
    margin: 0 5px;
    background: #ccc;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.indicators .active {
    background: #333;
    color: #fff;
}

/* 首頁優惠／推薦專區：切屏輪播（與 moban-1、yhzq.js gap／位移一致） */
#promotion-slider.slider-container,
#recommendation-slider.slider-container {
    max-width: 100%;
    width: 100%;
    margin-top: 12px;
    background-color: #fff;
}

#promotion-slider .slider-wrapper,
#recommendation-slider .slider-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    background: #fff;
}

#promotion-slider .slide,
#recommendation-slider .slide {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    height: auto;
    margin: 0;
    max-width: none;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(59, 130, 246, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 末屏不足一頁時由 JS 插入的空占位（yhzq.js syncPromotionPlaceholders） */
#promotion-slider .slide.promotion-slide-placeholder,
#recommendation-slider .slide.promotion-slide-placeholder {
    flex: 0 0 auto;
    align-self: stretch;
    min-height: 1px;
    border-radius: 18px;
    background-color: #fef0eb;
    border: 1px solid rgba(59, 130, 246, 0.1);
    box-shadow: none;
    pointer-events: none;
}

.yhzq-list-containe {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: stretch;
    padding: 16px;
    background-color: var(--white);
    box-sizing: border-box;
}

.yhzq-list {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(59, 130, 246, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 定點／外約：列表區一行三列（不影響輪播 slide 內的 .yhzq-list） */
.yhzq-list-containe > .yhzq-list {
    flex: 0 0 calc((100% - 28px) / 3);
    width: calc((100% - 28px) / 3);
    max-width: calc((100% - 28px) / 3);
    box-sizing: border-box;
}

#pickup-section .yhzq-list,
#delivery-section .yhzq-list {
    min-height: 588px;
}

#promotion-slider .promotion-slider__indicators,
#recommendation-slider .promotion-slider__indicators {
    margin-top: 6px;
    padding-bottom: 4px;
}

#promotion-slider .slider-wrapper,
#recommendation-slider .slider-wrapper {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

#promotion-slider .slider-wrapper img,
#recommendation-slider .slider-wrapper img {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}
.img-containe{
    width: 100%;
    position: relative;
    overflow: hidden;
}

.img-containe {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    height: 260px;
}

.promotion-grid .promotion-card .img-containe img,
.promotion-grid .promotion-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yhzq-activity-time-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    max-width: calc(100% - 24px);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 44px;
    height: 36px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(126, 73, 176, 0.56);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.yhzq-containe.dingdian .vip-badge{
    top:12px;
}
.yhzq-containe.dingdian .pingfen{
    top:12px;
    font-size: 20px;
}
.yhzq-containe.dingdian .pingfen span{
    font-size: 30px;
}
.countdown-timer-overlay {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px 8px;
    width: 100%;
    max-width: 100%;
    min-height: auto;
    min-width: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    padding: 6px 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 255, 0.3);
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.countdown-timer-overlay::-webkit-scrollbar {
    display: none;
}

.countdown-display-mini {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 2px 4px;
    box-sizing: border-box;
    white-space: nowrap;
}

.time-unit-mini {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    background: linear-gradient(135deg, #fbbd39 0%, #ff8a00 100%);
    border-radius: 4px;
    padding: 4px 6px;
    gap: 2px;
    box-sizing: border-box;
    white-space: nowrap;
}

.countdown-timer-overlay .time-unit {
    padding: 4px 6px;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    gap: 2px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    white-space: nowrap;
}
.countdown-timer-overlay .time-value {
    font-size: clamp(0.85rem, 2.2vw, 1.1rem);
    min-width: 0;
    width: auto;
    max-width: none;
    min-height: 22px;
    height: auto;
    max-height: none;
    padding: 2px 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
}
.countdown-timer-overlay .time-label {
    font-size: clamp(0.62rem, 1.8vw, 0.8rem);
    margin-top: 0;
    white-space: nowrap;
}
.countdown-timer-overlay .time-separator {
    font-size: clamp(0.85rem, 2.4vw, 1.2rem);
    flex: 0 0 auto;
    line-height: 1;
}

.time-value-mini {
    font-size: 0.9rem;
    font-weight: 800;
    color: white;
    font-family: avenir;
    line-height: 1;
    white-space: nowrap;
}

.time-label-mini {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    white-space: nowrap;
}

.time-separator-mini {
    font-size: 0.9rem;
    font-weight: 800;
    color: white;
    font-family: avenir;
    flex: 0 0 auto;
    flex-shrink: 0;
    line-height: 1;
    white-space: nowrap;
}

/* 列表頁 product_card：標題單行在上，數字單行在下（數字行不換行；必要時橫向滑動看全） */
.countdown-timer-overlay:has(.countdown-label) {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 4px;
}

.countdown-timer-overlay .countdown-label {
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    text-align: center;
    font-size: clamp(0.58rem, 1.6vw, 0.75rem);
    font-weight: 700;
    color: #fbbd39;
    line-height: 1.25;
    margin: 0;
    padding: 0 2px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.countdown-timer-overlay .countdown-label::-webkit-scrollbar {
    display: none;
}

.countdown-timer-overlay .countdown-display {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 2px 4px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
    white-space: nowrap;
}


/* -------排行榜------- */
.phb-containe {
    width: 100%;
    height: auto;
    min-height: 497px;
    overflow: hidden;
    background: #fff url(../images/phb.jpg) top center no-repeat;
    background-size: contain;
    position: relative;
    padding: 16px;
    padding-top: 150px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    margin-top: 30px;
}
.phb-containe .more{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top:110px;
    right: -16px;
    min-width: 90px;
    height: 40px;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.2);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    color: var(--white);
    cursor: pointer;
    padding-right: 30px;
    padding-left: 16px;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
.phb-containe .more a{
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}
.index-phb-div {
    width: 100%;
    height: auto;
    overflow: hidden;
    background: white;
    box-shadow: 0 0 16px #f591a6;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 14px;
    /*  overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch; */
    border-radius: 16px;
    margin-top: 20px;
}

.phb-list {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
    height: auto;
    min-height: 678px;
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(#e66465, #9198e5);
    padding: 8px;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.phb-list > .img-containe {
    flex-shrink: 0;
}

.phb-list > .details-containe {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.phb-list > .details-containe > ul {
    flex: 1 1 auto;
    min-height: 0;
}

.phb-list > .details-containe > .bottom-icons {
    margin-top: auto;
    flex-shrink: 0;
}
.index-phb-div .phb-list:nth-child(1){
	background-image: linear-gradient(#ffffff, #fec3b5);
}
.index-phb-div .phb-list:nth-child(2){
	background-image: linear-gradient(#ffffff, #ffb2ff);
}
.index-phb-div .phb-list:nth-child(3){
	background-image: linear-gradient(#ffffff, #c8d4ff);
}
.index-phb-div .phb-list:nth-child(4){
	background-image: linear-gradient(#ffffff, #ff6491);

}

.phb-list .img-containe {
    width: 100%;
    height: 380px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.details-containe {
    width: 100%;
    height: auto;
    font-size: 14px;
    background-color: white;
    position: relative;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.details-containe ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}
.details-containe .information {
    height: 32px;
    min-height: 32px;
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    line-height: 32px;
    border-bottom: 1px solid #f2eeee;
    display: flex;
    align-items: center;
    min-width: 0;
    box-sizing: border-box;
    white-space: nowrap;
    text-align: left;
}

/* 列表最後一個資訊行：去掉底邊線（避免與底欄重疊視覺） */
.details-containe ul > li.information:last-of-type {
    border-bottom: 0;
}

/* 暱稱等第一行資訊：固定高度 45px */
.details-containe .information.first,
.details-containe ul > li.information:first-of-type {
    height: 45px;
    min-height: 45px;
    line-height: 45px;
    text-align: left;
}

.details-containe .information span {
    color: #999;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.details-containe .information span.nickname {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
    color: #333;
}

.details-containe li.short {
    height: 30px;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    width: 50%;
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.details-containe .information.jq {
    height: 40px;
    line-height: 40px;
}
.details-containe .information.jq span {
    color: #5dc401;
    font-weight: bold;
    font-size: 15px;
    font-family: 'avenir';
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 6px;
}
.details-containe .information.yj span {
    font-size: 14px;
    text-decoration: line-through;
    text-align: left;
    display: block;
    padding-left: 6px;
    font-weight: bold;
    color: #f00;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.details-containe .information.xj span {
    font-size: 14px;
    text-align: left;
    display: block;
    padding-left: 6px;
    font-weight: bold;
    color: #5dc401;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bottom-icons {
    display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    padding: 0 10px;
    margin-top: 0;
    color: #999;
}
.top-bq {
    width: 70px;
    display: flex;
    align-items: center;
    position: absolute;
    left: 5%;
    top: 0;
}

.shake {
    display: inline-block;
    animation: shake 1.0s infinite ease-in-out;
    /* 可加上平滑效果 */
    transform-origin: center center;
}

@keyframes shake {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(2deg);
    }

    40% {
        transform: rotate(-2deg);
    }

    60% {
        transform: rotate(1.5deg);
    }

    80% {
        transform: rotate(-1.5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.top-bq span {
    display: inline-block;
    color: #ffde00;
    font-size: var(--fs-hero);
    text-align: center;
    font-weight: bolder;
}
.vip-badge{
    position: absolute;
    top: 18px;
    left: auto;
    right: 18px;
    z-index: 4;
    width: auto;
    min-width: 76px;
    height: 36px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 50px;
    border: 2px solid rgba(240, 240, 240, 0.8);
    background: linear-gradient(135deg, #8fe86a 0%, #5dc401 48%, #3fa802 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    margin: 0;
    bottom: auto;
    animation: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow: none;
    box-shadow: none;
}
.detail-item {
    display: flex;
    align-items: center;
    color: #999;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 16px;
    min-width: 0;
    overflow: hidden;
}

.detail-item .detail-city {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    display: block;
}

.detail-item i {
    margin-right: 5px;
    color: #db5f79;
    font-size: 0.85rem;
}
.pingfen {
    position: absolute;
    right: 20px;
    top: 6px;
    font-size: 20px;
    font-weight: bolder;
    color: red;

    /* 多方向 text-shadow 疊加，形成描邊 */
    text-shadow:
        2px 0 #fff,
        -2px 0 #fff,
        0 2px #fff,
        0 -2px #fff,
        2px 2px #fff,
        -2px -2px #fff,
        2px -2px #fff,
        -2px 2px #fff;
    z-index: 20;
}

.pingfen span {
    font-family: "avenir";
    /* font-style: italic; */
    font-size: 32px;
    /* color: #ffa200; */
    color: #333;
    /* text-shadow: 
    2px 0   #eee,
    -2px 0   #eee,
     0   2px #eee,
     0  -2px #eee,
     2px 2px #eee,
    -2px -2px #eee,
     2px -2px #eee,
    -2px 2px #eee; */
}
.detail-item.sub-pingfen{
    position: absolute;
    right: 20px;
    top: 0;
    font-size: 20px;
    font-weight: bolder;
    display: flex;
    align-items: center;
    color: #333;
    border-bottom: 0;
}
.detail-item.sub-pingfen .global-lable{
    font-size: 20px;
    white-space: nowrap;
}
.detail-item.sub-pingfen .rating-value{
    margin-left: 5px;
    margin-right: 0;
}
.detail-item.sub-pingfen .reviews{
    width: 100%;
    font-size: 12px;
    text-align: right;
    color: #333;
    font-weight: normal;
    margin-bottom: 10px;
}

.detail-item.sub-price .current-price{
    font-size: 20px;
    font-weight: bolder;
    color: #db5f79;
}
.detail-item.sub-price .original-price{
    font-weight: normal;
    color: #999;
    text-decoration: line-through;
}

.more {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -16px;
    min-width: 90px;
    height: 40px;
    font-size: 16px;
    /* background: rgba(0, 255, 255, 0.2); */
    background: #f76b88;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    color: var(--white);
    cursor: pointer;
    padding-right: 30px;
    padding-left: 16px;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.more:hover {
    background-color: #db5f79;
}

.more a {
    color: #fff;
    text-decoration: none;
}


/* 客服彈窗樣式 */
.customer-service-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
}

.customer-service-modal .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.customer-service-modal .modal-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-radius: 20px;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    width: 100%;
    max-width: 430px;
    height: 430px;
    margin: auto;
}

.customer-service-modal.show .modal-overlay {
    opacity: 1;
}

.customer-service-modal.show .modal-content {
    transform: translateY(0);
}

.customer-service-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    height: 60px;
}

.customer-service-modal .modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}



.customer-service-modal .close-btn:hover {
    background-color: #f0f0f0;
}

.customer-service-modal .modal-body {
    text-align: center;
}

.customer-service-modal .qr-codes-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
}

.customer-service-modal .qr-code-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.customer-service-modal .qr-code {
    width: 150px;
    height: 150px;
    border: 0;
    border-radius: 10px;
    background: #f9f9f9;
    margin-bottom: 10px;
}

.customer-service-modal .qr-label {
    margin: 0;
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.customer-service-modal .service-text {
    margin: 0;
    font-size: 16px;
    color: #666;
    line-height: 1.5;
    padding-top: 30px;;
}

.customer-service-modal .qr-code-item--link {
    text-decoration: none;
    color: inherit;
}

.customer-service-modal .qr-code--placeholder {
    object-fit: contain;
    background: #fff;
}

.customer-service-modal .qr-code-item--telegram {
    max-width: min(190px, 44vw);
}

.customer-service-modal .qr-code--telegram-qr.is-telegram-qr-adapted {
    width: var(--telegram-qr-w, 150px);
    height: calc(var(--telegram-qr-w, 150px) * 1.1);
    object-fit: cover;
    object-position: center 43%;
    padding: 0;
    background: #fff;
    border-radius: 16px;
    display: block;
}

.close-modal {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    transition: color 0.2s;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
}

.close-modal:hover {
    color: #ff4757;
    background-color: #f1f1f1;
}
.close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 100;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
}


/* -------底部導航------ */
footer {
    max-width: var(--container);
    height: 120px;
    margin: 0 auto;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    border-radius: 18px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom: 16px;
    text-align: center;
    padding: 16px 0;
    color: #7f8c8d;
    border-top: 1px solid #eaf7ff;
    font-size: 0.9rem;
}

footer div {
    flex: 1;
    height: 100%;
    font-size: 18px;
    color: #666;
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

footer div a {
    color: #666;
    text-decoration: none;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    font-weight: 600;
}

.foot-home {
    background: url(../images/i-home.png) center no-repeat;
    background-size: 30px 30px;
    background-position-y: 10px;
}

.foot-home:hover {
    background-image: url(../images/i-home-on.png);
}

.foot-home.active {
    background: url(../images/i-home-on.png) center no-repeat;
    background-size: 30px 30px;
    background-position-y: 10px;
    color: #db5f79;
    font-weight: bold;
}

.foot-home.active a {
    color: #db5f79;
}

.foot-home a:hover {
    background: none;
    color: #db5f79;
}


.foot-phb {
    background: url(../images/i-phb.png) center no-repeat;
    background-size: 30px 30px;
    background-position-y: 10px;
}

.foot-phb:hover {
    background-image: url(../images/i-phb-on.png);
}

.foot-phb.active {
    background: url(../images/i-phb-on.png) center no-repeat;
    background-size: 30px 30px;
    background-position-y: 10px;
}

.foot-phb.active a {
    color: #db5f79;
    font-weight: bold;
}

.foot-phb a:hover {
    background: none;
    color: #db5f79;
}

.foot-kf a {
    background: url(../images/i-kefu.png) center no-repeat;
    background-size: 30px 30px;
    background-position-y: 10px;
}

.foot-kf.active {
    background: url(../images/i-kefu-on.png) center no-repeat;
    background-size: 30px 30px;
    background-position-y: 10px;
    color: #db5f79;
    font-weight: bold;
}

.foot-kf.active a {
    color: #db5f79;
}

.foot-kf a:hover {
    background-image: url(../images/i-kefu-on.png);
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 10px;
    background-size: 30px 30px;
    color: #db5f79;
}

.foot-new {
    background: url(../images/i-new.png) center no-repeat;
    background-size: 30px 30px;
    background-position-y: 10px;
}

.foot-new:hover {
    background-image: url(../images/i-new-on.png);
}

.foot-new.active {
    background: url(../images/i-new-on.png) center no-repeat;
    background-size: 30px 30px;
    background-position-y: 10px;
    color: #db5f79;
    font-weight: bold;
}

.foot-new.active a {
    color: #db5f79;
}

.foot-new a:hover {
    background: none;
    color: #db5f79;
}

.foot-uc {
    background: url(../images/i-uc.png) center no-repeat;
    background-size: 30px 30px;
    background-position-y: 10px;
}

.foot-uc:hover {
    background-image: url(../images/i-uc-on.png);
}

.foot-uc.active {
    background: url(../images/i-uc-on.png) center no-repeat;
    background-size: 30px 30px;
    background-position-y: 10px;
    color: #db5f79;
    font-weight: bold;
}

.foot-uc.active a {
    color: #db5f79;
}

.foot-uc a:hover {
    background: none;
    color: #db5f79;
}

/* =============================================================================
   列表／排行頁 PC 樣式（評分排行 topList、今日新菜、優惠、更多等共用）
   僅適用於視寬 ≥768px；窄螢幕表格改卡片式時請寫在 @media (max-width: 767px) 內
   ============================================================================= */

/* 區塊外層：與首頁區塊節奏一致 */
.sub-section {
    margin-bottom: 28px;
}

/* 區塊標題列（含「評分排行」+ 城市下拉） */
.sub-header {
    width: 100%;
    text-align: center;
    margin: 1.25rem 0;
}

.sub-header.newcaipin {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    text-align: left;
    margin-bottom: 0;
    padding: 2.5rem 12px;
}

.sub-header-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    width: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    order: 2;
}

/* topList：標題在左、城市選擇在右 */
.toplist-header .sub-header-title {
    width: 100%;
    flex: 1 1 auto;
    justify-content: space-between;
    order: 1;
}

.toplist-header .sub-header-title h1 {
    flex: 0 1 auto;
}

.toplist-header .todaynew-city-dropdown {
    margin-left: auto;
}

/* youhuiList：標題在左、城市選擇在右 */
.youhui-header .sub-header-title {
    width: 100%;
    flex: 1 1 auto;
    justify-content: space-between;
    order: 1;
}

.youhui-header .sub-header-title h1 {
    flex: 0 1 auto;
}

.youhui-header .todaynew-city-dropdown {
    margin-left: auto;
}

/* moreList：四個下拉同一行等寬顯示 */
.filter-section .categories.more-filters-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
}

.filter-section .categories.more-filters-row .category-dropdown {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-left: 0 !important;
    order: 0;
}

.sub-header h1,
.sub-header-title h1 {
    margin: 0;
    font-size: clamp(1.35rem, 1.2vw + 1rem, 1.85rem);
    font-weight: 700;
    color: var(--fg);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.sub-header h1 i,
.sub-header-title h1 i {
    font-size: 1.35em;
    color: var(--primary);
}

/* 城市／條件下拉（與 qianse-common.js CityDropdown 搭配） */
.category-dropdown {
    position: relative;
    flex: 0 0 auto;
}

.category-dropdown.todaynew-city-dropdown {
    min-width: 140px;
    max-width: 220px;
}

.category-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fg);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.category-btn:hover {
    border-color: rgba(219, 95, 121, 0.45);
    box-shadow: 0 4px 16px rgba(219, 95, 121, 0.12);
}

.category-btn .btn-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.category-btn i {
    font-size: 1.1rem;
    color: var(--muted);
    flex-shrink: 0;
}

.category-btn.active i {
    transform: rotate(180deg);
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 80;
    max-height: min(320px, 50vh);
    overflow-y: auto;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: block;
    padding: 10px 16px;
    font-size: 0.9rem;
    color: var(--fg);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
    background: var(--surface);
    color: var(--primary);
}

.dropdown-item.active {
    font-weight: 700;
    color: var(--primary);
    background: rgba(219, 95, 121, 0.08);
}

/* 時間維度分頁籤（週／月／總排名等連結） */
.sub-container {
    width: 100%;
    margin-bottom: 24px;
    padding: 0 4px;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, rgba(219, 95, 121, 0.08), rgba(234, 247, 255, 0.95));
    border: 1px solid var(--border);
    border-radius: 999px;
    position: relative;
}

.tab-bg {
    display: none;
}

.tabs .tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 16px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    z-index: 1;
}

.tabs .tab:hover {
    color: var(--fg);
    background: rgba(255, 255, 255, 0.65);
}

.tabs .tab.active {
    color: var(--white);
    /* background: linear-gradient(135deg, #db5f79, #c04d66); */
    background: #f76b88;
    box-shadow: 0 4px 14px rgba(219, 95, 121, 0.35);
}

/* ---------- 評分排行表格（.points-table）---------- */
.points-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    margin-bottom: 24px;
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.points-table thead th {
    padding: 14px 10px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--hg);
    background: linear-gradient(180deg, #f0f9ff, #eaf7ff);
    border-bottom: 1px solid var(--border);
    position: relative;
    vertical-align: middle;
}

.points-table th.Order {
    width: 11%;
    white-space: nowrap;
}

.points-table th.Goods {
    width: 36%;
}

.points-table th.Rating {
    width: 12%;
}

.points-table th.General {
    width: 22%;
}

.points-table th.Trending {
    width: 19%;
}

.points-table th:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 22%;
    right: 0;
    height: 56%;
    width: 1px;
    background: rgba(0, 0, 0, 0.06);
}

.points-table th:last-child::after {
    display: none;
}

.points-table tbody tr {
    transition: background 0.18s ease;
}

.points-table tbody tr:nth-child(even) {
    background: rgba(243, 244, 246, 0.45);
}

.points-table tbody tr:hover {
    background: rgba(219, 95, 121, 0.06);
}

.points-table td {
    padding: 16px 10px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
    color: var(--fg);
}

.points-table tbody tr:last-child td {
    border-bottom: none;
}

/* 可點擊整列進詳情（對應 .caipin-item） */
tr.caipin-item {
    cursor: pointer;
}

/* 名次圓章（僅 .points-table 內，避免與其他元件類名衝突） */
.points-table .top-rank {
    width: 38px;
    height: 38px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 800;
    color: #6b7280;
    background: linear-gradient(145deg, #f3f4f6, #e5e7eb);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.points-table tbody tr:nth-child(1) .top-rank.rank-top,
.points-table tbody tr:nth-child(1) .top-rank {
    color: #fff;
    background: linear-gradient(145deg, #a78bfa, #7c3aed);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

.points-table tbody tr:nth-child(2) .top-rank.rank-top,
.points-table tbody tr:nth-child(2) .top-rank {
    color: #fff;
    background: linear-gradient(145deg, #fb923c, #ea580c);
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
}

.points-table tbody tr:nth-child(3) .top-rank.rank-top,
.points-table tbody tr:nth-child(3) .top-rank {
    color: #fff;
    background: linear-gradient(145deg, #f472b6, #db2777);
    box-shadow: 0 4px 12px rgba(219, 39, 119, 0.3);
}

/* 頭像 + 暱稱列 */
.points-table td[data-label="菜品"] {
    overflow: visible;
}

.points-table .player {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    text-align: left;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.points-table .avatar {
    position: relative;
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(219, 95, 121, 0.25);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.points-table .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.points-table .player .phb-vip {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background-color: #65bd07;
    border-radius: 30px;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(3px, -10px);
}

.points-table .player-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
}

/* .points-table .player:has(.phb-vip) .player-info .name {
    padding-right: 44px;
} */

.points-table .player-info .name {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.points-table .player-info .meta {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.35;
    word-break: break-word;
    box-sizing: border-box;
}

/* 評分數字（.phb-rating 僅用於「評分」欄，避免與趨勢欄 .stat 混淆） */
.points-table td[data-label="評分"] .stat.phb-rating {
    font-size: 1.35rem;
    font-weight: 800;
    color: #6b7280;
    letter-spacing: -0.02em;
}

/* 前三名著色：依 tbody 第 1～3 列（無資料時僅 colspan 一列，不會誤套） */
.points-table tbody tr:nth-child(1) td[data-label="評分"] .stat.phb-rating {
    font-size: 1.45rem;
    color: #7c3aed;
}

.points-table tbody tr:nth-child(2) td[data-label="評分"] .stat.phb-rating {
    font-size: 1.45rem;
    color: #ea580c;
}

.points-table tbody tr:nth-child(3) td[data-label="評分"] .stat.phb-rating {
    font-size: 1.45rem;
    color: #db2777;
}

/* 綜合欄：與首頁卡片 .bottom-icons 相同結構（見 index.html），沿用檔案上方 .bottom-icons 字級／間距／色 */
.general-detail {
    text-align: center;
}

/* 表格欄內置中；其餘與 .yhzq-list > .details-containe > .bottom-icons 一致由全域規則提供 */
.points-table .general-detail .bottom-icons {
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* 趨勢欄（僅排行表） */
.points-table .trend-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    white-space: nowrap;
}

.points-table .trend-indicator .trend-text {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
}

.points-table .trend-indicator .trend-text span {
    font-weight: 700;
}

/* 趨勢：上升綠、下降紅 */
.points-table .trend-text.up,
.points-table .trend-text.up span {
    color: #15803d;
}

.points-table .trend-text.down,
.points-table .trend-text.down span {
    color: #dc2626;
}

.points-table .trend-text.new,
.points-table .trend-text.new span {
    color: #ff8c00;
}

.points-table .trend-text.flat,
.points-table .trend-text.flat span {
    color: #6b7280;
}

.points-table .trend-indicator .trend-detail {
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.3;
    max-width: 100%;
}

/* 無資料列 */
.general-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 36px 20px;
    font-size: 1rem;
    color: var(--muted);
}

.general-empty i {
    color: var(--primary);
    font-size: 1.25rem;
}

/* 列表底部分頁（與 todaynewList 等共用） */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 12px 8px;
    margin-top: 8px;
}

/* 詳情評論：無翻頁按鈕時不占版面（避免空 .pagination 仍出現內邊距） */
#reviewPagination:empty {
    display: none !important;
    padding: 0;
    margin: 0;
}

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #999;
    text-decoration: none;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.page-btn:hover:not(.disabled):not(.active) {
    border-color: rgba(219, 95, 121, 0.45);
    color: var(--primary);
    background: rgba(219, 95, 121, 0.06);
}

.page-btn.active {
    color: var(--white);
    background: linear-gradient(135deg, #db5f79, #c04d66);
    border-color: transparent;
    cursor: default;
    box-shadow: 0 4px 12px rgba(219, 95, 121, 0.3);
}

.page-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.page-ellipsis {
    padding: 0 6px;
    color: var(--muted);
    font-weight: 600;
}

/* =============================================================================
   列表頁（今日新菜 todaynewList、優惠 youhuiList、更多 moreList 等）卡片網格與篩選
   ============================================================================= */

/* SEO 標題保留於 DOM，僅螢幕外隱藏（勿用 display:none 以免部分爬蟲忽視） */
.todaynew-heading-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

/* 給 AJAX／腳本克隆用的隱藏模板（原內聯 display:none） */
.product-card-template {
    display: none !important;
}

/* 區間切換（如：三日／一週／一月）——與 .tabs 視覺同系統 */
.sub-section .range-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 12px 0 0;
    padding: 0 4px;
    box-sizing: border-box;
}

.sub-header.newcaipin .range-tabs {
    justify-content: flex-start;
    width: auto;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    order: 1;
}

.range-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.range-tab:hover {
    color: var(--fg);
    border-color: rgba(219, 95, 121, 0.35);
    background: rgba(219, 95, 121, 0.06);
}

.range-tab.active {
    color: var(--white);
    background: linear-gradient(135deg, #db5f79, #c04d66);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(219, 95, 121, 0.32);
}

.range-tab span {
    font-size: 0.82em;
    font-weight: 700;
    color: inherit;
    opacity: 0.92;
}

/* 排序條（與區間列分開，視覺上貼卡片列表） */
.sort-container {
    width: 100%;
    margin: 16px 0 12px;
    padding: 0 4px;
    box-sizing: border-box;
}

.sort-buttons {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-sizing: border-box;
}

.sort-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    min-height: 44px;
    min-width: 110px;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
        box-shadow 0.15s ease;
}

.sort-btn:hover {
    color: var(--primary);
    border-color: rgba(219, 95, 121, 0.4);
    background: rgba(219, 95, 121, 0.05);
}

.sort-btn.active {
    color: var(--white);
    /* background: linear-gradient(135deg, #db5f79, #c04d66); */
    background: #f76b88;
    border-color: transparent;
    box-shadow: 0 3px 12px rgba(219, 95, 121, 0.28);
}

.sort-btn .arrow {
    transition: transform 0.2s ease;
    font-size: 0.85em;
}

.sort-btn.desc .arrow {
    transform: rotate(180deg);
}

/* 產品卡網格（共用 product_card partial） */
.products-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    gap: 14px;
    padding: 16px;
    background-color: var(--white);
    margin-bottom: 0;
    box-sizing: border-box;
}

.products-grid > .yhzq-list {
    flex: 0 0 calc((100% - 28px) / 3);
    width: calc((100% - 28px) / 3);
    max-width: calc((100% - 28px) / 3);
    box-sizing: border-box;
}

.todaynew-card-link {
    color: inherit;
    text-decoration: none;
}

.products-empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 200px;
    padding: 32px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--muted);
    background: rgba(243, 244, 246, 0.6);
    border: 1px dashed var(--border);
    border-radius: 14px;
    box-sizing: border-box;
}

.products-empty i {
    color: var(--primary);
    font-size: 1.2rem;
}

.products-empty span {
    display: inline-flex;
    align-items: center;
}

/* ===============================
   hl-search.html（桌面基礎樣式）
   來源：qianse2025.rtf（已忽略移動端 media）
   =============================== */
.container.hl-search-container {
    max-width: 780px;
    margin: 16px auto;
    padding: 12px;
    background: #fff;
    border-radius: 18px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}

.hl-search-container #searchForm {
    padding: 30px;
}

.hl-search-container .form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.hl-search-container .form-group {
    flex: 1;
    font-size: 14px;
    min-width: 0;
}

.hl-search-container .form-group-full {
    flex: 1 1 100%;
    min-width: 0;
}

.hl-search-container .form-group-half {
    flex: 1 1 50%;
    min-width: 0;
}

.hl-search-container .form-row label {
    display: block;
    font-weight: 700;
    text-align: left;
    color: #2c3e50;
    margin-bottom: 8px;
}

.hl-search-container .form-control {
    width: 100%;
    padding: 9px 35px 9px 15px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    transition: all 0.3s ease;
    background: #fff;
    box-sizing: border-box;
}

.hl-search-container .form-control:focus {
    outline: none;
    border-color: #db5f79;
    box-shadow: 0 0 0 3px rgba(219, 95, 121, 0.2);
}

.hl-search-container .select-wrapper,
.hl-search-container .area-selector {
    position: relative;
}

.hl-search-container .select-wrapper:after,
.hl-search-container .area-selector:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%) rotate(0deg);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #7f8c8d;
    pointer-events: none;
    transition: transform 0.3s ease;
    z-index: 5;
}

.hl-search-container .select-wrapper.active:after,
.hl-search-container .area-selector.active:after {
    transform: translateY(-50%) rotate(180deg);
    border-top-color: #db5f79;
}

.hl-search-container .custom-select {
    width: 100%;
    padding: 4px 16px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    box-sizing: border-box;
}

.hl-search-container .custom-select-placeholder {
    color: #7f8c8d;
}

.hl-search-container .select-wrapper.active .custom-select,
.hl-search-container .area-selector.active .form-control {
    border-color: #db5f79;
    box-shadow: 0 0 0 3px rgba(219, 95, 121, 0.2);
}

.hl-search-container .select-dropdown,
.hl-search-container .area-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 100;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    transform: translateY(-10px);
}

.hl-search-container .select-dropdown.show {
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
    overflow-y: auto;
}

.hl-search-container .area-dropdown.show {
    max-height: 300px;
    opacity: 1;
    transform: translateY(0);
}

.hl-search-container .select-option {
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    color: #999;
    text-align: left;
}

.hl-search-container .select-option:hover {
    background: #f1f8ff;
    color: #000;
}

.hl-search-container .select-option.selected {
    background: #db5f79;
    color: #fff;
}

.hl-search-container .select-option.error {
    color: #dc3545;
    cursor: not-allowed;
    background: #f8f9fa;
}

.hl-search-container .area-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
    font-weight: 500;
}

.hl-search-container .area-options {
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
    font-size: 13px;
}

.hl-search-container .checkbox-container {
    display: block;
    margin-top: 15px;
}

.hl-search-container .checkbox-section {
    margin-bottom: 20px;
    position: relative;
    font-size: 14px;
    padding: 12px 0;
}

.hl-search-container .checkbox-section-title {
    font-weight: 700;
    margin-bottom: 10px;
    color: #2c3e50;
    display: flex;
    align-items: center;
    position: relative;
}

.hl-search-container .custom-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hl-search-container .custom-checkbox-item {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    padding: 6px 15px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #ddd;
}

.hl-search-container .custom-checkbox-item:hover {
    background: #fdf1df;
    border-color: #f9c57a;
}

.hl-search-container .custom-checkbox-item.checked {
    background: #db5f79;
    color: #fff;
    border-color: #f9c57a;
}

.hl-search-container .hidden-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.hl-search-container .btn-group {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

.hl-search-container .btn {
    padding: 10px 20px;
    border: 0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hl-search-container .btn-primary {
    background: linear-gradient(135deg, rgb(219, 95, 121), rgb(230, 120, 143));
    color: #fff;
}

.hl-search-container .btn-primary:hover {
    background: #c04d66;
    transform: translateY(-2px);
}

.hl-search-container .btn-outline {
    background: transparent;
    border: 1px solid #db5f79;
    color: #db5f79;
}

.hl-search-container .btn-link,
.hl-search-container .select-all-btn,
.hl-search-container .invert-selection-btn {
    background: none;
    border: 0;
    color: #db5f79;
    cursor: pointer;
    font-size: 14px;
}

#messageArea .message {
    padding: 15px;
    margin: 15px 0;
    border-radius: 6px;
    text-align: center;
}

#messageArea .message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

#messageArea .message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

#messageArea .message.info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.error-toast {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #f00;
    padding: 15px 25px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transition: top 0.5s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid #f00;
}

.error-toast.show {
    top: 20px;
}

.error-toast i {
    font-size: 18px;
}

/* ===============================
   search-results.html（桌面基礎樣式）
   來源：qianse2025.rtf（已忽略移動端 media）
   =============================== */
.hl-search-container .results-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1.5rem 0;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.hl-search-container .results-count {
    font-size: 15px;
    color: #333;
    display: flex;
    width: 50%;
    align-items: center;
}

.hl-search-container .results-count i {
    color: #6ec902;
    margin-right: 6px;
}

.hl-search-container .results-count strong {
    color: #db5f79;
    font-weight: 600;
    padding: 0 4px;
}

.hl-search-container .sort-filter {
    display: flex;
    gap: 1rem;
    align-items: center;
    width: 50%;
    justify-content: flex-end;
}

.hl-search-container .sort-filter .select-wrapper {
    min-width: 120px;
}

.hl-search-container .filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #f76b88;
    color: #fff;
    border: 0;
    padding: 4px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    min-height: 33px;
    transition: all 0.3s ease;
}

.hl-search-container .filter-toggle:hover {
    background: #5a6fd8;
    transform: translateY(-2px);
}

.hl-search-container .filter-sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 350px;
    height: 100%;
    background: #fff;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: right 0.3s ease;
    overflow-y: auto;
    padding: 20px;
}

.hl-search-container .filter-sidebar.open {
    right: 0;
}

.hl-search-container .sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.hl-search-container .sidebar-title {
    font-size: 16px;
    color: #333;
}

.hl-search-container .sidebar-title i {
    color: #db5f79;
    margin-right: 6px;
}

.hl-search-container .close-sidebar {
    background: none;
    border: 0;
    font-size: 1.5rem;
    cursor: pointer;
    color: #777;
}

.hl-search-container .search-criteria {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.hl-search-container .criteria-item {
    position: relative;
    padding: 15px;
    margin: 8px 0;
    border-radius: 6px;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
    min-height: 60px;
    text-align: left;
}

.hl-search-container .criteria-item.active {
    background-color: #f0f9ff;
    border-color: #cfebfd;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
}

.hl-search-container .criteria-item strong {
    display: block;
    margin-bottom: 5px;
    color: #000;
    font-weight: 600;
    padding-right: 25px;
}

.hl-search-container .criteria-values {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}

.hl-search-container .criteria-value {
    padding: 4px 8px;
    border-radius: 4px;
    background: #f76b88;
    color: #fff;
    border: 1px solid #db5f79;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
    font-weight: 500;
}

.hl-search-container .criteria-value:not(.active) {
    background: #f5f5f5;
    color: #666;
    border-color: #ddd;
}

.hl-search-container .criteria-value:hover {
    background: #fec3b5;
    color: #fff;
    border-color: #f76b88;
}

.hl-search-container .filter-sidebar .criteria-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hl-search-container .filter-sidebar .facet-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 60px;
    background: #db5f79;
    color: #fff;
    font-size: 11px;
}

.hl-search-container .filter-sidebar .criteria-value.active .facet-count {
    background: #fff;
    color: #db5f79;
    font-weight: 600;
}

.hl-search-container .sidebar-footer {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

.hl-search-container .btn-secondary {
    background: transparent;
    border: 1px solid #db5f79;
    color: #db5f79;
}

.hl-search-container .btn-secondary:hover {
    background: #f8f9fa;
}

.hl-search-container .loading-message,
.hl-search-container .error-message,
.hl-search-container .no-results {
    text-align: center;
    grid-column: 1 / -1;
    border-radius: 12px;
}

.hl-search-container .loading-message {
    padding: 2rem;
    color: #666;
    background: #fff;
    border: 1px dashed var(--border);
}

.hl-search-container .error-message {
    padding: 2rem;
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
}

.hl-search-container .no-results {
    padding: 3rem;
    color: #b8b8b8;
}

.hl-search-container .no-results i {
    font-size: 4rem;
    color: #ddd;
    margin-bottom: 1rem;
}

.hl-search-container .no-results h3 {
    font-size: 24px;
    margin: 0 0 8px;
}

.hl-search-container .no-results p {
    color: #b8b8b8;
    font-size: 14px;
    margin: 0;
}

.hl-search-container .overlay {
    z-index: 999;
}
#total-count {
    color: #f76b88;
}
#closeSidebar{
    width:26px;
}
/* ===================================================================
   leda-details.html — 桌面樣式（自 qianse2025.rtf 抽取，寫入 767px 斷點之前）
   已排除 RTF 內行號 ≥8734 的窄屏樣式區塊
   =================================================================== */

/* 詳情子輪播箭頭：與首頁 index 輪播 .prev / .next 一致（圓形、50px、半透明＋blur），不使用 .glass 大圓角與偽元素 */
.carousel-container.subpage .main-image > button.prev.glass,
.carousel-container.subpage .main-image > button.next.glass {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 25;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: none;
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
fill: #fff;
font-size: 24px;
cursor: pointer;
transition: all 0.3s ease;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.carousel-container.subpage .main-image > button.prev.glass {
left: 15px;
}
.carousel-container.subpage .main-image > button.next.glass {
right: 15px;
}
.carousel-container.subpage .main-image > button.prev.glass::before,
.carousel-container.subpage .main-image > button.next.glass::before,
.carousel-container.subpage .main-image > button.prev.glass::after,
.carousel-container.subpage .main-image > button.next.glass::after {
display: none;
content: none;
}
.carousel-container.subpage .main-image > button.prev.glass:hover,
.carousel-container.subpage .main-image > button.next.glass:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
.container.details-container {
margin: 16px auto;
padding: 12px;
background: white;
border-radius: 18px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-bottom: 0;
max-width: 780px;
}
.product-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
margin-bottom: 0;
margin-top: 10px;
}
.product-title {
font-size: 1.6rem;
font-weight: 800;
color: #333;
padding: 0;
text-align: left;
margin: 10px 0;
}
.seller-tools {
margin: 16px 0;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 10px;
font-weight: 600;
box-sizing: border-box;
}

/* 詳情頁：機房 / 代調（覆蓋全域 button；高於內嵌 seller_tools_script 單類選擇器） */
.details-container .seller-jifang-link,
.details-container .seller-daidiao-btn {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 14px;
line-height: 1.25;
font-weight: 600;
border-radius: 14px;
padding: 10px 16px;
cursor: pointer;
box-sizing: border-box;
text-align: left;
display: inline-flex;
align-items: center;
justify-content: flex-start;
-webkit-tap-highlight-color: transparent;
}

.details-container .seller-jifang-link {
background: linear-gradient(180deg, #fafafa 0%, #ececec 100%);
color: #333;
border: 1px solid #fec3b5;
}

.details-container .seller-jifang-link:hover:not(:disabled):not(.is-disabled) {
background: #ededed;
border-color: #d5d5d5;
}

.details-container .seller-jifang-link.is-disabled,
.details-container .seller-jifang-link:disabled {
opacity: 0.55;
cursor: not-allowed;
}

.details-container .seller-daidiao-btn {
background: linear-gradient(135deg, #F66C87 0%, #D95F77 100%);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.45);
box-shadow: 0 4px 12px rgba(255, 143, 60, 0.28);
}

.details-container .seller-daidiao-btn:hover:not(:disabled) {
filter: brightness(1.06);
}

/* 詳情：編號區與機房／代調列整體水平靠左 */
.details-container .detail-identity-seller-cluster {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
text-align: left;
}

.details-container .detail-identity-seller-cluster > .detail-identity-block:not(.is-seller-session) {
align-self: stretch;
width: 100%;
min-width: 0;
}

/* 詳情頁編號卡（include moban-1 partial：單行「標籤 + 編號」） */
.detail-identity-block {
display: grid;
grid-template-columns: minmax(168px, max-content) minmax(0, 1fr);
gap: 12px;
align-items: stretch;
margin: 12px 0 16px;
margin-bottom: 30px;
}
.detail-identity-block.is-seller-session {
grid-template-columns: minmax(168px, max-content);
}

/* 賣家：編號列與「機房＋代調」同左緣對齊，寬度取兩者較寬（不超過版面） */
.details-container .detail-identity-seller-cluster:has(.detail-identity-block.is-seller-session) {
align-items: flex-start;
width: 100%;
}
.details-container .detail-identity-seller-cluster:has(.detail-identity-block.is-seller-session) .detail-identity-block.is-seller-session {
width: auto;
max-width: 100%;
min-width: 0;
grid-template-columns: minmax(0, max-content);
box-sizing: border-box;
margin-bottom: 8px;
}
.details-container .detail-identity-seller-cluster:has(.detail-identity-block.is-seller-session) .seller-tools {
width: 100%;
max-width: 100%;
align-self: stretch;
box-sizing: border-box;
margin-top: 0;
margin-bottom: 0;
justify-content: flex-start;
}

.detail-code-card {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 6px;
min-width: 0;
box-sizing: border-box;
padding: 10px 14px;
border-radius: 14px;
background: linear-gradient(145deg, #f6fbff 0%, #ffffff 100%);
border: 1px solid #fec3b5;
box-shadow: 0 8px 20px rgba(52, 152, 219, 0.08);
}
.detail-code-value {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.2;
color: #c04d66;
white-space: nowrap;
}
.detail-code-note {
font-size: 12px;
line-height: 1.2;
font-weight: 800;
}
.detail-booking-card {
display: flex;
flex-direction: column;
width: auto;
min-width: 0;
min-height: 50px;
align-self: stretch;
}
.detail-booking-eyebrow {
display: none;
}
.detail-booking-btn {
display: flex;
flex: 1 1 auto;
width: 100%;
min-height: 50px;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
padding: 0 18px;
box-sizing: border-box;
text-decoration: none;
border: none;
border-radius: 16px;
background: linear-gradient(135deg, #ff8fab 0%, #f76b88 45%, #db5f79 100%);
color: #fff;
box-shadow: 0 12px 26px rgba(219, 95, 121, 0.35);
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.detail-booking-btn:hover {
background: linear-gradient(135deg, #f76b88 0%, #db5f79 50%, #c94b6a 100%);
transform: translateY(-1px);
box-shadow: 0 18px 34px rgba(219, 95, 121, 0.42);
}
.detail-booking-btn.is-disabled {
pointer-events: none;
opacity: 0.58;
box-shadow: none;
}
.detail-booking-btn-text {
font-size: 1.2rem;
font-weight: 800;
line-height: 1.1;
}
.detail-booking-btn-note {
font-size: 12px;
font-weight: 700;
line-height: 1.2;
opacity: 0.88;
white-space: nowrap;
}
@media (max-width: 768px) {
/* 訪客：編號卡與約她同一行；賣家僅編號仍單欄 */
.detail-identity-block:not(.is-seller-session) {
grid-template-columns: auto minmax(0, 1fr);
gap: 8px;
align-items: stretch;
margin: 10px 0 14px;
}
.detail-identity-block:not(.is-seller-session) .detail-code-card,
.detail-identity-block:not(.is-seller-session) .detail-booking-card {
min-width: 0;
}
.detail-identity-block.is-seller-session {
grid-template-columns: minmax(0, 1fr);
margin: 10px 0 14px;
}
}

.product-title .nickname {
display: block;
width: 100%;
}
.product-title .code {
display: block;
margin-top: 4px;
font-size: 0.7em;
}
.sale-tag-container {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
border-radius: 20px;
animation: sale-pulse 2s ease-in-out infinite;
margin-left: 16px;
}
.sale-icon {
width: 20px;
height: 20px;
}
.sale-text {
font-size: 0.9rem;
font-weight: 600;
color: #fff;
line-height: 1;
white-space: nowrap;
}
@keyframes sale-pulse {
0%,
100% {
transform: scale(1);
/* box-shadow: 0 2px 8px rgba(115, 190, 200, 0.3); */
}
50% {
transform: scale(1.05);
/* box-shadow: 0 2px 8px rgba(115, 190, 200, 0.3); */
}
}
.product-code {
color: #999;
border-radius: 0;
font-size: 1.0rem;
/* font-family: avenir; */
width: 100%;
flex-basis: 100%;
text-align: left;
}
.product-rating {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.stars {
color: #db5f79;
margin-right: 10px;
font-size: 1.2rem;
}
.reviews {
color: #7f8c8d;
font-size: 0.9rem;
}
.product-price {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.current-price {
font-size: 2rem;
font-weight: 800;
color: #db5f79;
font-family: avenir;
}
.original-price {
text-decoration: line-through;
color: #95a5a6;
font-weight: 600;
font-size: 1.2rem;
font-family: avenir;
}
.discount {
background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-weight: 700;
font-size: 0.9rem;
box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}
.product-detail .original-price{
margin-left: 15px;
}
.product-detail .discount{
margin-left: 15px;
}
.countdown-timer {
margin-top: 15px;
margin-bottom: 20px;
}
.countdown-label {
font-size: 0.85rem;
color: #ff2442;
font-weight: 600;
margin-bottom: 8px;
text-align: left;
}
.countdown-display {
display: flex;
align-items: center;
gap: clamp(4px, 1vw, 8px);
/* width: min(420px, 100%); */
width: 100%;
justify-content: center;
}
.time-unit {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #fff 0%, #fec3b5 100%);
border-radius: 6px;
padding: clamp(4px, 1vw + 2px, 10px) clamp(6px, 1.5vw + 4px, 12px);
flex: 1 1 clamp(90px, 22vw, 120px);
border: 1px solid rgba(255, 255, 255, 0.2);
/* box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); */
gap: 3px;
height: 30px;
}
.time-value {
font-size: clamp(0.9rem, 2vw, 1.1rem);
font-weight: 800;
color: #f76b88;
font-family: avenir;
line-height: 1;
white-space: nowrap;
}
.time-label {
font-size: clamp(0.55rem, 1.4vw, 0.7rem);
color: #f76b88;
margin-top: 2px;
font-weight: 600;
white-space: nowrap;
}
.time-separator {
font-size: clamp(0.9rem, 2vw, 1.1rem);
font-weight: 800;
color: #db5f79;
font-family: avenir;
}
.product-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.feature-item {
display: flex;
align-items: center;
margin-bottom: 8px;
font-size: 0.95rem;
color: #000;
font-weight: 600;
white-space: nowrap;
min-height: 30px;
border-bottom: 1px solid #eee;
}
.feature-item span {
color: #999;
font-weight: normal;
}
.feature-item.full-width {
grid-column: 1 / -1;
}
.feature-item i {
color: #db5f79;
margin-right: 10px;
font-size: 1rem;
}
.feature-item .price-highlight {
color: #db5f79;
font-weight: 700;
padding-right: 4px;
}
.stat-item {
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
gap: 8px;
}
.stat-item i {
font-size: 1.4rem;
color: #db5f79;
}
.stat-item:nth-child(2) i {
font-size: 1.5rem;
}
.stat-value {
font-size: 1rem;
font-weight: 700;
color: #2c3e50;
font-family: avenir;
}
.product-specs {
margin-bottom: 40px;
}
.specs-title {
font-size: 1.5rem;
margin-bottom: 20px;
font-weight: 800;
color: #2c3e50;
padding-bottom: 10px;
border-bottom: 2px solid #eaf7ff;
}
.specs-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.spec-item {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 15px;
background: #fcf0f3;
border-radius: 10px;
font-size: 0.95rem;
gap: 8px;
font-weight: 600;
}
.spec-name {
color: #111;
padding-right: 2px;
width: 70px;
text-align: justify;
text-align-last: justify;
text-justify: distribute-all-lines;
align-items: center;
height: 20px;
}
.spec-value {
color: #777;
text-align: left;
align-items: center;
display: flex;
flex: 1;
border-left: 1px solid #fec3b5;
padding-left: 10px;
font-size: 15px;
font-weight: normal;
}
.spec-value.region-list {
flex-wrap: wrap;
white-space: normal;
line-height: 1.6;
}
.duration-price-panel {
/*margin: 20px 0 10px;
padding: 18px;
background: #eaf7ff;
border-radius: 16px; */
margin-top: 10px;
}
.duration-price-header {
font-size: 1.1rem;
font-weight: 700;
color: #f27121;
margin-bottom: 12px;
}
.duration-price-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.duration-price-item {
display: flex;
align-items: center;
background: #fff;
border-radius: 12px;
padding: 12px 8px;
border-left: 4px solid #f76b88;
box-shadow: 0 6px 14px rgba(242, 113, 33, 0.08);
}
.duration-time {
font-weight: 600;
color: #2c3e50;
}
.feature-item span.duration-label {
display: inline-block;
font-weight: 600;
color: #c04d66;
font-size: 0.90rem;
}
.duration-value {
display: flex;
align-items: baseline;
gap: 10px;
margin-left: auto;
font-weight: 700;
}
.feature-item span.duration-current {
font-size: 1.05rem;
color: #27ae60;
font-weight: 900;
}
.duration-original {
font-size: 1.05rem;
color: #ff2442;
text-decoration: line-through;
}
.customer-reviews {
margin-top: 50px;
grid-column: 1 / -1;
padding-bottom: 88px;
}
.reviews-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 15px;
}
.reviews-title {
font-size: 24px;
margin-bottom: 0;
font-weight: 800;
color: #2c3e50;
padding-top: 0;
/* border-bottom: 2px solid #eaf7ff; */
text-align: left;
padding-left: 15px;
}
.pingfen-header-right {
margin-left: auto;
display: flex;
align-items: center;
padding-right: 15px;
margin-top: 15px;
}
.current-rating {
font-size: 16px;
font-weight: 600;
color: #666;
margin-right: 15px;
}
.rating-participants{
font-size: 14px;
color: #666;
}
.rating-count{
color: #db5f79;
font-weight: 600;
font-family: 'avenir';
}
.rating-count.none{
color:#ccc;
font-weight: 600;
}
.review-item {
display: flex;
flex-direction: column;
gap: 0;
padding: 14px 0;
background: transparent;
border-bottom: 1px solid #f5f5f5;
margin-bottom: 0;
box-shadow: none;
}
.review-item:last-child {
border-bottom: 0;
}
.review-header-row {
display: flex;
align-items: center;
gap: 10px;
position: relative;
}
.review-avatar {
flex-shrink: 0;
}
.review-avatar img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 1px solid #fcf0f3;
background: #F6DED2;
}
.review-main {
width: 100%;
position: relative;
}
.zhiding {
position: absolute;
top: 0;
right: 0;
z-index: 10;
}
.zhiding img {
width: 40px;
height: auto;
display: block;
}
.jinghua {
position: absolute;
top: 0;
right: 0;
z-index: 10;
}
.jinghua img {
width: 40px;
height: auto;
display: block;
}
.review-header {
margin-bottom: 8px;
}
.review-user-info {
display: flex;
align-items: center;
gap: 6px;
}
.reviewer {
font-weight: 600;
font-size: 14px;
color: #333;
font-family: pingfang;
cursor: pointer;
transition: color 0.2s ease;
}
.reviewer:hover {
color: #007aff;
}
.review-date {
color: #b3b3b3;
font-size: 11px;
}
.review-content {
color: #666;
line-height: 1.5;
text-align: left;
font-size: 14px;
/* margin-bottom: 10px; */
word-break: break-word;
font-family: pingfang;
margin-top: 6px;
display: block;
width: 100%;
border-bottom: 1px solid #f5f5f5;
padding-left: 43px;
padding-bottom: 30px;
}
.review-content.none{
text-align: center;
font-size: 16px;
padding-left: 0;
}
.review-content.none i{
color: #ccc;
margin-right: 8px;
}
.products-empty{
width:100%;
text-align: center;
font-size: 16px;
padding-left: 0;
padding-bottom: 30px;
color: #666;
border-bottom: 1px solid #f5f5f5;
grid-column: 1 / -1;
}
.products-empty span{
color: #ccc;
margin-right: 8px;
}
.general-empty{
width:100%;
text-align: center;
font-size: 16px;
padding-left: 0;
padding-bottom: 30px;
color: #666;
/* border-bottom: 1px solid #f5f5f5; */
grid-column: 1 / -1;
}
.general-empty span{
color: #ccc;
margin-right: 8px;
}
.deleted-content {
color: #f44444;
font-style: italic;
background: #fce8ea;
padding: 12px 16px;
border-radius: 8px;
display: block;
border-left: 3px solid #ec1b21;
font-size: 13px;
}
.pending-content {
color: #954152;
font-style: italic;
background: #fcf0f3;
padding: 12px 16px;
border-radius: 8px;
display: block;
border-left: 3px solid #D95F77;
font-size: 13px;
}
.review-content:has(.deleted-content)~.review-actions {
display: none !important;
}
.comment-media-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
.comment-media-item {
width: 96px;
height: 96px;
object-fit: cover;
border-radius: 14px;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
background: #f7f7f7;
transition: transform 0.2s ease;
}
.comment-media-item:hover {
transform: scale(1.05);
}
.comment-video-wrapper {
width: 96px;
height: 96px;
position: relative;
border-radius: 14px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.comment-video-wrapper video {
width: 100%;
height: 100%;
object-fit: cover;
}
.comment-video-wrapper .video-play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
pointer-events: none;
}
.comment-media-list:has(.comment-media-item:only-child),
.comment-media-list:has(.comment-video-wrapper:only-child) {
grid-template-columns: 1fr;
max-width: 300px;
}
.comment-media-list:has(.comment-media-item:nth-child(2):last-child),
.comment-media-list:has(.comment-video-wrapper:nth-child(2):last-child) {
grid-template-columns: repeat(2, 1fr);
}
.comment-media-list:has(.comment-media-item:nth-child(3):last-child),
.comment-media-list:has(.comment-video-wrapper:nth-child(3):last-child) {
grid-template-columns: repeat(3, 1fr);
}
.review-actions {
display: flex;
flex-wrap: nowrap;
gap: 18px;
align-items: center;
margin-top: 2px;
}
.action-btn {
display: flex;
align-items: center;
gap: 4px;
background: none;
border: none;
color: #8a919f;
font-size: 12px;
cursor: pointer;
padding: 0;
transition: all 0.2s ease;
flex-shrink: 0;
white-space: nowrap;
}
.action-btn:hover {
}
.action-btn.active i,
.action-btn.liked i {
color: #ff2442 !important;
}
.action-btn i {
font-size: 15px;
}
.action-btn span {
font-size: 12px;
font-family: AVANTI;
}
.like-btn.active {
color: #ff2442 !important;
}
.like-btn.active i {
animation: likeAnimation 0.4s ease;
}
.like-btn.active i::before {
content: '\\f004';
font-weight: 900;
}
@keyframes likeAnimation {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
}
.review-list {
background: #fff;
border-radius: 12px;
padding: 0 16px;
grid-column: 1 / -1;
}
.comment-input-footer {
margin-top: 12px;
padding: 16px;
padding-top: 14px;
background: #fff;
border-radius: 0 0 12px 12px;
border-top: 1px solid #f5f5f5;
}
.comment-input-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.comment-input-wrapper {
flex: 1;
position: relative;
}
.comment-input {
width: 100%;
padding: 12px 16px;
border: 1px solid #e0e0e0;
border-radius: 14px;
background: #f8f9fa;
font-size: 14px;
color: #333;
outline: none;
transition: all 0.3s ease;
}
.comment-input:focus {
background: #fff;
border-color: #d0d0d0;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}
.comment-input::placeholder {
color: #999;
}
.interaction-stats {
display: flex;
align-items: center;
gap: 20px;
}
.interaction-stats .stat-item {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: all 0.3s ease;
padding: 4px 8px;
border-radius: 6px;
}
.interaction-stats .stat-item:hover {
transform: translateY(-1px);
}
.interaction-stats .stat-item i {
font-size: 16px;
color: #666;
}
.interaction-stats .stat-item.active i {
color: #ff2442 !important;
}
.interaction-stats .stat-item span {
font-size: 13px;
color: #666;
font-weight: 500;
}
.interaction-stats .stat-item:hover i,
.interaction-stats .stat-item:hover span {
color: #333;
}
.interaction-stats .stat-item:last-child {
gap: 0;
padding: 6px;
}
.interaction-stats .stat-item:last-child i {
font-size: 18px;
}
.interaction-stats.disabled .stat-item,
.interaction-stats.is-disabled .stat-item {
pointer-events: none;
opacity: 0.4;
}
.comment-input-footer.is-locked .comment-input,
.comment-input-footer.is-locked .interaction-stats {
opacity: 0.6;
pointer-events: none;
}
.interaction-locked-hint {
margin-top: 12px;
font-size: 13px;
color: #9b1b30;
}
.reply-input-module {
margin-top: 12px;
padding: 16px;
background: #fff;
border-radius: 0 0 12px 12px;
border-top: 1px solid #f5f5f5;
animation: slideUp 0.3s ease-out;
}
.reply-target-info {
display: none;
padding: 8px 12px;
}
.reply-target-header {
font-size: 14px;
color: #666;
margin-bottom: 4px;
text-align: left;
}
.reply-target-text {
color: #999;
margin-right: 4px;
}
.reply-target-user {
color: #ff2442;
font-weight: 500;
}
.reply-target-content {
font-size: 14px;
color: #000;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.input-row {
margin-bottom: 12px;
}
.reply-text-input {
width: 100%;
padding: 12px 32px;
border: none;
background: rgba(0, 0, 0, 0.03);
border-radius: 14px;
font-size: 14px;
color: #333;
outline: none;
transition: all 0.2s ease;
box-sizing: border-box;
resize: none;
min-height: 45px;
max-height: 200px;
font-family: inherit;
line-height: 1.5;
overflow-y: hidden;
resize: none;
height: auto;
}
.reply-text-input:focus {
background: rgba(0, 0, 0, 0.05);
}
.reply-text-input::placeholder {
color: #999;
}
.image-preview-container {
padding: 10px 0;
margin-bottom: 10px;
}
.image-preview-wrapper {
position: relative;
display: inline-block;
max-width: 200px;
}
.preview-image {
width: 100%;
height: 100%;
border-radius: 8px;
border: 2px solid #eaf7ff;
object-fit: cover;
}
.remove-image-btn {
position: absolute;
top: -8px;
right: -8px;
width: 24px;
height: 24px;
border-radius: 50%;
background: #ff4444;
color: white;
border: 2px solid white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
transition: all 0.2s ease;
}
.remove-image-btn:hover {
background: #cc0000;
transform: scale(1.1);
}
.controls-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.left-controls {
display: flex;
gap: 8px;
}
.right-controls {
display: flex;
gap: 8px;
}
.input-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
color: #666;
font-size: 24px;
border: 0;
font-weight: lighter;
}
/* .input-btn:hover {
background: #f5f5f5;
border-color: #b0b0b0;
color: #333;
}
.input-btn:active {
transform: scale(0.95);
} */
.review-main .action-btn {
padding: 0;
border: none;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
font-family: pingfang;
}
.controls-row .action-btn {
padding: 8px 16px;
border: none;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
min-width: 60px;
border-radius: 14px;
}
.send-btn {
background: #ff2442;
color: #fff;
box-shadow: 0 2px 4px rgba(255, 36, 66, 0.2);
}
.send-btn:hover {
background: #e61e3a;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(255, 36, 66, 0.3);
}
.send-btn:active {
transform: translateY(0);
}
.controls-row .action-btn.cancel-btn {
background: #fff;
color: #666;
border: 1px solid #d0d0d0;
}
.cancel-btn:hover {
background: #f5f5f5;
color: #333;
border-color: #b0b0b0;
}
.cancel-btn:active {
transform: scale(0.98);
}
.reply-list {
margin-top: 10px;
padding: 10px 12px;
background: #fcf0f3;
border-radius: 6px;
text-align: left;
display: block;
}
.reply-list .reply-item {
border-bottom: 1px dashed #ddd;
padding: 10px;
}
.reply-list .reply-item:last-child {
border-bottom: none;
}
.reply-list:empty {
display: none;
}
.reply-actions {
display: flex;
flex-wrap: nowrap;
gap: 12px;
margin-top: 6px;
padding-top: 4px;
align-items: center;
}
.reply-action-btn {
display: flex;
align-items: center;
gap: 4px;
background: none;
border: none;
color: #8a919f;
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
padding: 2px 0;
flex-shrink: 0;
white-space: nowrap;
}
.reply-action-btn:hover {
}
.reply-action-btn.active i,
.reply-action-btn.liked i {
color: #ff2442 !important;
}
.reply-action-btn i {
font-size: 13px;
}
.reply-action-btn span {
font-size: 12px;
font-weight: 500;
}
.reply-action-btn.like-btn.active {
color: #ff2442;
}
.reply-action-btn.like-btn.active i {
color: #ff2442;
}
.reply-item {
font-size: 14px;
line-height: 1.5;
color: #666;
margin-bottom: 6px;
word-break: break-all;
font-family: pingfang;
display: block;
}
.reply-item:last-child {
margin-bottom: 0;
}
/* reply-item\uc0\u20839 \u30340 \u30452 \u25509 \u25991 \u23383 \u21644 \u20803 \u32032 \u27171 \u24335  */
.reply-item>.reply-user,
.reply-item>.reply-text {
display: inline-block;
}
.reply-item>.reply-time,
.reply-item>.reply-actions {
display: block;
}
.reply-item>.reply-actions,
.reply-item-new>.reply-actions {
display: flex;
flex-wrap: nowrap;
}
.reply-item-new {
font-size: 14px;
line-height: 1.5;
color: #666;
margin-bottom: 6px;
margin-top: 8px;
margin-left: 10px;
padding: 8px 10px;
padding-left: 12px;
word-break: break-all;
font-family: pingfang;
background: #fff;
border-left: 2px solid #fcbfcb;
border-radius: 4px;
}
.reply-item-new .reply-item-new {
margin-left: 10px;
border-left-color: #f5a8b8;
}
.reply-item-new .reply-item-new .reply-item-new {
margin-left: 10px;
border-left-color: #e88a9d;
}
.reply-item-new .reply-item-new .reply-item-new .reply-item-new {
margin-left: 10px;
border-left-color: #db6b7f;
}
.reply-user {
color: #000;
font-weight: 600;
font-size: 14px;
}
.reply-to {
color: #b3b3b3;
margin: 0 2px;
font-size: 12px;
}
.reply-time {
color: #b3b3b3;
font-size: 11px;
margin-top: 4px;
margin-bottom: 8px;
}
.reply-target {
color: #f76b88;
font-size: 14px;
font-weight: 600;
}
.reply-text {
color: #000;
font-size: 14px;
}
.reply-text.deleted-content{
color: #f44444;
font-size: 13px;
background: #fce8ea;
}
.reply-text.pending-content {
color: #b77900;
font-size: 13px;
background: #fff4d6;
}
.show-more-replies {
display: inline-block;
margin-top: 6px;
padding: 2px 0;
background: none;
border: none;
color: #043b88;
font-size: 14px;
cursor: pointer;
transition: opacity 0.2s ease;
}
.show-more-replies:hover {
opacity: 0.7;
}
.reply-input-box {
margin-top: 10px;
padding: 0;
background: transparent;
}
.reply-input {
width: 100%;
padding: 8px 10px;
border: 1px solid #e3e3e3;
border-radius: 18px;
font-size: 12px;
outline: none;
transition: all 0.2s ease;
background: #f7f8fa;
box-sizing: border-box;
}
.reply-input:focus {
background: #fff;
border-color: #ff2442;
}
.reply-input::placeholder {
color: #b3b3b3;
}
.reply-actions-box {
display: flex;
justify-content: flex-end;
gap: 6px;
margin-top: 8px;
}
.reply-cancel-btn,
.reply-submit-btn {
padding: 5px 14px;
border: none;
border-radius: 14px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
font-weight: 500;
}
.reply-cancel-btn {
background: #f5f5f5;
color: #666;
}
.reply-cancel-btn:hover {
background: #e8e8e8;
}
.reply-submit-btn {
background: linear-gradient(135deg, #ff2442 0%, #ff6b6b 100%);
color: #fff;
box-shadow: 0 2px 8px rgba(255, 36, 66, 0.2);
}
.reply-submit-btn:hover {
box-shadow: 0 4px 12px rgba(255, 36, 66, 0.3);
transform: translateY(-1px);
}
.reply-submit-btn:active {
transform: translateY(0);
}
.reply-submit-btn:disabled {
background: #ffb3bf;
cursor: not-allowed;
box-shadow: none;
}
.radar-chart-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
padding: 30px;
background: #fff;
backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow: 0 4px 20px rgba(126, 179, 255, 0.12),
0 2px 10px rgba(160, 201, 255, 0.08);
border: 1px solid rgba(180, 190, 210, 0.3);
position: relative;
}
.radar-title {
font-size: 1.4rem;
margin-bottom: 20px;
font-weight: 700;
color: #333;
text-align: center;
/* text-shadow: 0 1px 2px rgba(74, 85, 104, 0.1); */
position: relative;
z-index: 1;
}
.radar-chart {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto 20px;
background: #fceef1;
border-radius: 50%;
padding: 20px;
box-shadow:
inset 0 0 30px rgba(248, 108, 136, 0.1),
0 4px 20px rgba(248, 108, 136, 0.2);
border: 1px solid #e6acb8;
z-index: 1;
}
.radar-canvas {
width: 100%;
height: 100%;
}
.radar-controls {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
width: 100%;
max-width: 650px;
}
.radar-control {
display: flex;
flex-direction: column;
align-items: center;
padding: 15px;
background: rgba(255, 255, 255, 0.85);
border-radius: 12px;
box-shadow: 0 2px 10px rgba(126, 179, 255, 0.1);
border: 1px solid rgba(180, 190, 210, 0.25);
position: relative;
z-index: 1;
}
.radar-label {
font-weight: 600;
margin-bottom: 8px;
color: #333;
font-size: 0.9rem;
/* text-shadow: 0 1px 2px rgba(90, 106, 127, 0.1); */
}
.radar-slider {
width: 100%;
margin: 5px 0;
background: rgba(226, 232, 240, 0.6);
border-radius: 5px;
outline: none;
-webkit-appearance: none;
appearance: none;
height: 6px;
}
.radar-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #f76b88;
cursor: pointer;
box-shadow: 0 0 8px rgba(228, 116, 139, 0.4);
border: 2px solid #fec3b5;
}
.radar-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #f76b88;
cursor: pointer;
box-shadow: 0 0 8px rgba(228, 116, 139, 0.4);
border: 2px solid #fec3b5;
}
.radar-value {
font-weight: 700;
color: #db5f79;
font-size: 1rem;
font-family: avenir;
/* text-shadow: 0 0 6px rgba(126, 179, 255, 0.4); */
}
.slider-ticks {
display: flex;
justify-content: space-between;
width: 100%;
margin: 5px 0;
padding: 0 5px;
}
.tick {
font-size: 0.65rem;
color: #8b95b0;
font-weight: 500;
position: relative;
text-shadow: 0 0 3px rgba(139, 149, 176, 0.3);
}
.tick::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 4px;
background-color: #a0b5cf;
box-shadow: 0 0 2px rgba(160, 181, 207, 0.3);
}
.radar-average {
text-align: center;
margin-top: 15px;
font-weight: 600;
color: #333;
font-size: 1.2rem;
/* text-shadow: 0 1px 2px rgba(90, 106, 127, 0.1); */
position: relative;
z-index: 1;
}
.radar-submit-container {
text-align: center;
margin-top: 20px;
}
.submit-rating-btn {
background: #f76b88;
color: white;
border: none;
padding: 12px 30px;
border-radius: 14px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(247, 107, 136, 0.25);
display: inline-flex;
align-items: center;
gap: 8px;
position: relative;
z-index: 1;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.submit-rating-btn:hover {
background: linear-gradient(135deg, rgb(255, 160, 0), rgb(255, 153, 0));
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(126, 179, 255, 0.35);
}
.submit-rating-btn:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(126, 179, 255, 0.25);
}
.submit-rating-btn:disabled {
background: #6c757d;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.submit-rating-btn i {
font-size: 0.9rem;
}
.notification {
position: fixed;
top: 20px;
right: 20px;
background: white;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
gap: 10px;
z-index: 10000;
transform: translateX(400px);
opacity: 0;
transition: all 0.3s ease;
border-left: 4px solid #db5f79;
}
.notification.show {
transform: translateX(0);
opacity: 1;
}
.notification-success {
border-left-color: #27ae60;
}
.notification-success i {
color: white !important;
background: #27ae60 !important;
border-radius: 50%;
padding: 4px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.notification-error {
border-left-color: #e74c3c;
}
.notification-error i {
color: white !important;
background: #e74c3c !important;
border-radius: 50%;
padding: 4px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.notification-warning {
border-left-color: #f39c12;
}
.notification-warning i {
color: white !important;
background: #f39c12 !important;
border-radius: 50%;
padding: 4px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.notification i {
font-size: 0.8rem;
}
.notification span {
font-weight: 500;
color: #2c3e50;
}
.review-form {
background: #f5fbff;
padding: 25px;
border-radius: 12px;
margin-bottom: 30px;
box-shadow: 0 5px 15px rgba(219, 95, 121, 0.1);
}
.form-title {
font-size: 1.2rem;
margin-bottom: 20px;
font-weight: 700;
color: #2c3e50;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #2c3e50;
}
.form-input,
.form-textarea {
width: 100%;
padding: 12px 15px;
border: 2px solid #eaf7ff;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
}
.form-input:focus,
.form-textarea:focus {
border-color: #db5f79;
outline: none;
box-shadow: 0 0 0 3px rgba(219, 95, 121, 0.2);
}
.form-textarea {
height: 120px;
resize: vertical;
}
.star-rating {
display: flex;
gap: 5px;
margin-bottom: 10px;
}
.star {
font-size: 1.5rem;
color: #e0e0e0;
cursor: pointer;
transition: color 0.2s ease;
}
.star.active {
color: #db5f79;
}
.submit-review {
background: linear-gradient(135deg, #db5f79 0%, #a03d50 100%);
color: white;
border: none;
padding: 12px 25px;
border-radius: 8px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(219, 95, 121, 0.3);
}
.submit-review:hover {
background: linear-gradient(135deg, #03b9fd 0%, #01a1dd 100%);
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(219, 95, 121, 0.4);
}
.review-controls {
display: flex;
justify-content: flex-start;
align-items: flex-end;
padding: 16px;
background: #fff;
grid-column: 1 / -1;
border-radius: 12px;
border-bottom: 1px solid #eaf7ff;
flex-wrap: wrap;
gap: 12px;
}
.sort-options {
display: flex;
}
.sort-options h2 {
display: inline-flex;
align-items: flex-end;
font-size: 24px;
padding: 0 15px;
height: 44px;
margin: 0;
}
.review-count {
display: inline-flex;
align-items: flex-end;
color: #7f8c8d;
font-size: 13px;
padding: 0 15px;
height: 38px;
margin-left: auto;
}
.review-count span {
color: #db5f79;
font-family: 'avenir';
padding: 0 6px;
}
#averageScore {
color: #db5f79;
font-family: 'avenir';
padding: 0 6px;
}
.rating-revision-tip{
font-size: 12px;
color: #ff2442;
padding: 10px 0;
}
.product-status.removed {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 12px 0 0;
padding: 6px 14px;
border-radius: 999px;
background: #ffecec;
color: #d4380d;
font-size: 13px;
font-weight: 600;
}
.review-controls .comment-filter-tabs {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 8px;
flex: 1 1 100%;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.comment-filter-button {
border: 1px solid #e0e0e0;
background: #fff;
color: #666;
border-radius: 8px;
padding: 4px 14px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s ease;
}
.comment-filter-button.active {
background:#f76b88;
color: #fff;
font-weight: 600;
border: 1px solid #DA6078;
}
.spec-member-locked {
color: #8f8f8f;
font-weight: 600;
}
.spec-member-locked .member-register-link {
color: #7a3aed;
font-weight: 700;
margin-right: 4px;
text-decoration: none;
}
.spec-member-locked .member-register-link:hover {
text-decoration: underline;
}
.review-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
justify-content: flex-start;
margin-top: 24px;
margin-bottom: 12px;
}
.review-controls .sort-options {
display: flex;
align-items: center;
gap: 12px;
}
.qianse-toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
}
.qianse-toast {
min-width: 200px;
max-width: 320px;
background: rgba(0, 0, 0, 0.82);
color: #fff;
padding: 12px 16px;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
font-size: 14px;
line-height: 1.4;
pointer-events: auto;
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.qianse-toast.show {
opacity: 1;
transform: translateY(0);
}
.qianse-toast.success {
background: rgba(0, 128, 64, 0.9);
}
.qianse-toast.error {
background: rgba(204, 41, 54, 0.95);
}
.qianse-toast.info {
background: rgba(30, 64, 175, 0.9);
}
/* 詳情頁輪播：slideClass 為 details-slide，需與 .carousel-slide 行為一致 */
.details-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    width: 100%;
    min-width: 100%;
    height: 100%;
}

.details-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* slide 模式（與 .carousel-slide.slide-anim 對齊，勿加底色以免遮圖） */
.details-slide.slide-anim {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    z-index: 1;
}

.details-slide.slide-anim.active {
    z-index: 5;
}

/* fade */
.details-slide.fade-anim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: scale(0.95);
    z-index: 1;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.details-slide.fade-anim.active {
    opacity: 1;
    transform: scale(1);
    z-index: 5;
}

/* coverflow */
.details-slide.coverflow-anim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease;
}

.details-slide.left {
    transform: translateX(-30%) scale(0.7) rotateY(30deg);
    opacity: 0.6;
    z-index: 5;
}

.details-slide.right {
    transform: translateX(30%) scale(0.7) rotateY(-30deg);
    opacity: 0.6;
    z-index: 5;
}

.details-slide.active.coverflow-anim {
    transform: translateX(0) scale(1) rotateY(0deg);
    opacity: 1;
    z-index: 10;
}

/* moban-1 leda-details：評論附件縮圖、預覽彈層、表情選擇器、確認 Toast（對齊 moban-1 實現） */
/* ==================== 全屏輪播時禁止頁面滾動（html + body） ==================== */
html.no-scroll,
body.no-scroll {
    overflow: hidden !important;
    width: 100%;
    height: auto;
    touch-action: none;
    overscroll-behavior: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html.no-scroll::-webkit-scrollbar,
body.no-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* ==================== 多媒體上傳元件樣式 ==================== */
.media-uploader-container {
    width: 100%;
    margin: 15px 0;
}

.upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    background: #f9fafb;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-area:hover {
    border-color: #57c8f2;
    background: #f0f9ff;
}

.upload-area.dragover {
    border-color: #57c8f2;
    background: #e0f2fe;
    transform: scale(1.02);
}

.upload-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.upload-text {
    font-size: 16px;
    color: #6b7280;
}

.upload-tip {
    font-size: 12px;
    color: #9ca3af;
}

.media-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 40px;
}

.media-item {
    position: relative;
    width: calc(20% - 8px);
    cursor: move;
}

.media-item.dragging {
    opacity: 0.8;
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.media-item.placeholder {
    opacity: 0.3;
    background: #e0f2fe;
    border: 2px dashed #57c8f2;
}

.media-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    /* 1:1 比例，保持正方形 */
    height: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f4f6;
    cursor: pointer;
}

.media-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.play-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

/* 刪除按鈕直接定位在右上角，始終顯示 */
.media-action-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.media-action-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.media-action-btn.delete-btn {
    color: #ef4444;
}

.file-name {
    margin-top: 5px;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 預覽對話方塊樣式 */
.media-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: modalFadeIn 0.3s ease forwards;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.media-preview-modal .preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

.preview-dialog {
    position: relative;
    width: 90%;
    max-width: 1200px;
    height: 70vh;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.preview-header h3 {
    margin: 0;
    font-size: 16px;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.media-preview-modal .preview-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6b7280;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.preview-close:hover {
    background: #e5e7eb;
    color: #374151;
}

/* 媒體預覽模態框的 preview-body */
.media-preview-modal .preview-body {
    padding: 16px 20px;
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    animation: bodyFadeIn 0.5s ease 0.2s forwards;
}

@keyframes bodyFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.media-preview-modal .preview-slide-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.media-preview-modal .preview-slide-wrapper {
    display: flex;
    height: 100%;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.media-preview-modal .preview-slide-item {
    flex: none;
    min-width: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.media-preview-modal .preview-media {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.preview-nav {
    position: absolute;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.preview-nav:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}

.preview-nav:active {
    transform: scale(0.95);
    background: rgba(0, 0, 0, 0.8);
}

.preview-nav.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.prev-nav {
    left: 20px;
}

.next-nav {
    right: 20px;
}

.preview-pagination {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    transition: all 0.3s ease;
    opacity: 0;
    animation: fadeInUp 0.4s ease 0.2s forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}



/* ==================== 表情選擇器樣式 ==================== */
.emoji-picker-popup {
    position: fixed;
    left: 50%;
    bottom: 145px;
    transform: translateX(-50%) translateY(100%);
    width: 360px;
    max-height: 60vh;
    background: white;
    border-radius: 12px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    z-index: 10001;
    overflow: hidden;
    transition: transform 0.3s ease;
    opacity: 1;
    padding-bottom: 10px;
}

.emoji-picker-popup.show {
    transform: translateX(-50%) translateY(0);
}

.emoji-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.emoji-picker-header span {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.emoji-close-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6b7280;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.emoji-close-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

.emoji-picker-body {
    padding: 10px;
    max-height: 340px;
    overflow: hidden;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.emoji-item {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    border-radius: 6px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    user-select: none;
}

.emoji-item:hover {
    background: #f3f4f6;
    transform: scale(1.2);
}

.emoji-item:active {
    background: #e5e7eb;
    transform: scale(1.1);
}

.emoji-item.selected {
    background: #e0f2fe;
    border: 2px solid #57c8f2;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(87, 200, 242, 0.3);
}


/* 捲軸樣式 */
.emoji-picker-body::-webkit-scrollbar {
    width: 6px;
}

.emoji-picker-body::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 3px;
}

.emoji-picker-body::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.emoji-picker-body::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ==================== Toast 確認框樣式 ==================== */
.confirm-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-150%);
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 10002;
    min-width: 320px;
    max-width: 90%;
    transition: transform 0.3s ease;
}

.confirm-toast.show {
    transform: translateX(-50%) translateY(0);
}

.confirm-toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
}

.confirm-toast-content i {
    font-size: 22px;
    color: #f59e0b;
    flex-shrink: 0;
}

.confirm-toast-message {
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}

.confirm-toast-actions {
    display: flex;
    gap: 8px;
    padding: 0 20px 16px 20px;
    justify-content: flex-end;
}

.confirm-toast-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.confirm-toast-btn.cancel-confirm {
    background: #f3f4f6;
    color: #6b7280;
}

.confirm-toast-btn.cancel-confirm:hover {
    background: #e5e7eb;
    color: #374151;
}

.confirm-toast-btn.confirm-delete {
    background: #ef4444;
    color: white;
}

.confirm-toast-btn.confirm-delete:hover {
    background: #dc2626;
}

.confirm-toast-btn:active {
    transform: scale(0.95);
}

/* 評論回覆：附件上傳狀態列 */
.attachment-upload-indicator {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
}

.attachment-upload-indicator .indicator-icon {
    flex-shrink: 0;
}
.current-rating .rating-value {
    font-size: 22px;
    font-weight: 800;
    color: #db5f79;
    font-family: avenir, "PingFang TC", sans-serif;
    margin-right: 4px;
}

/* 移動端：定點／外約列表區一行兩列 */
@media (max-width: 767px) {
    :root {
        --fs-hero: clamp(22px, 2.6vw + 11px, 36px);
        --fs-title: clamp(17px, 1vw + 9px, 22px);
        --fs-body: clamp(13px, 0.35vw + 11px, 15px);
        /* 底部固定導航佔位：與 footer 高度一致（見下方 footer height: 88px） */
        --site-footer-inset: 88px;
    }

    /* 麵包屑：小螢幕隱藏（PC 見檔案上方 .breadcrumb） */
    .breadcrumb {
        display: none !important;
    }

    /* 評分排行表：移動端隱藏「綜合」欄（收藏／讚／留言） */
    .points-table th.General,
    .points-table td[data-label="綜合"] {
        display: none !important;
    }

    .points-table td[data-label="菜品"] {
        overflow: visible;
    }

    .points-table .player {
        position: relative;
        gap: 4px;
        width: 100%;
        overflow: visible;
    }

    .points-table .player .phb-vip {
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(3px, -10px);
    }

    /* 列表標題列（.newcaipin）：移動端內距（PC 見檔案上方 .sub-header.newcaipin） */
    .sub-header.newcaipin {
        padding: 1.5rem 12px;
    }

    /* topList：移動端仍保持城市選擇在右側 */
    .toplist-header .sub-header-title {
        width: 100%;
        flex: 1 1 auto;
        justify-content: space-between;
        align-items: center;
        order: 1;
        gap: 10px;
    }

    .toplist-header .sub-header-title h1 {
        flex: 1 1 auto;
        min-width: 0;
    }

    .toplist-header .todaynew-city-dropdown {
        margin-left: auto !important;
        flex: 0 0 auto;
    }

    .youhui-header .sub-header-title {
        width: 100%;
        flex: 1 1 auto;
        justify-content: space-between;
        align-items: center;
        order: 1;
        gap: 10px;
    }

    .youhui-header .sub-header-title h1 {
        flex: 1 1 auto;
        min-width: 0;
    }

    .youhui-header .todaynew-city-dropdown {
        margin-left: auto !important;
        flex: 0 0 auto;
    }

    .filter-section .categories.more-filters-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .filter-section .categories.more-filters-row .category-btn {
        padding: 6px 8px;
        font-size: 12px;
    }

    /* 列表頁卡片網格／區間／排序（todaynew／優惠／更多等共用） */
    .products-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 0;
    }

    .products-grid > .yhzq-list {
        flex: 0 0 calc((100% - 10px) / 2);
        width: calc((100% - 10px) / 2);
        max-width: calc((100% - 10px) / 2);
    }

    .products-empty {
        min-height: 160px;
        padding: 22px 12px;
        font-size: 0.92rem;
    }

    .sub-section .range-tabs {
        gap: 6px;
        margin-top: 8px;
        justify-content: center;
    }

    .sub-header.newcaipin .range-tabs {
        justify-content: center;
    }

    .range-tab {
        padding: 8px 14px;
        font-size: 0.84rem;
    }

    .sort-container {
        margin-top: 12px;
        padding-left: 0;
        padding-right: 0;
    }

    .sort-buttons {
        padding: 6px;
        gap: 6px;
    }

    .sort-btn {
        flex: 0 0 auto;
        min-height: 42px;
        font-size: 0.8rem;
        min-width: 92px;
        padding: 8px 10px;
    }


    /* 移動端：首頁與列表頁均使用 body 滾動，以支援瀏覽器下拉刷新 */
    .global-container {
        margin-top: 0;
        height: auto;
        min-height: 0;
        max-height: none;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: visible;
        overscroll-behavior-y: auto;
        touch-action: pan-y;
        padding: 10px;
        padding-bottom: calc(10px + var(--site-footer-inset));
    }

    /* 頂部 header（#header = .top-container） */
    #header.top-container {
        height: 100px;
        border-radius: 14px;
        --header-search-inset-left: 16px;
        --header-search-inset-right: 60px;
        --header-search-gap: 6px;
        --header-search-box-height: 46px;
        --header-advanced-btn-size: 44px;
    }

    #header .logo-container {
        left: 14px;
        gap: 10px;
        max-width: calc(100% - 138px);
    }

    #header .logo-image {
        width: 56px;
        height: 56px;
    }

    #header .logo-title {
        font-size: 1.05rem;
    }

    #header .user-menu {
        right: 12px;
    }

    #header .user-btn {
        width: 44px;
        height: 44px;
    }

    #header .user-btn i {
        font-size: 1.65rem;
    }

    #header .search-icon-btn {
        right: 64px;
    }

    #header .search-toggle-btn {
        width: 44px;
        height: 44px;
    }

    #header .search-toggle-btn i {
        font-size: 1.4rem;
    }

    #header .search-container {
        left: var(--header-search-inset-left);
        right: var(--header-search-inset-right);
        top: 50%;
        width: auto;
        max-width: none;
        gap: var(--header-search-gap);
        justify-content: flex-end;
        align-items: center;
        transform: translateY(-50%) translateX(100%);
        transform-origin: right center;
        opacity: 0;
        pointer-events: none;
        transition:
            transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    #header .search-container.active {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
        pointer-events: auto;
        z-index: 25;
    }

    #header .search-box {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        max-width: none;
        height: var(--header-search-box-height);
        padding: 6px 6px 6px 14px;
        box-sizing: border-box;
        overflow: hidden;
    }

    #header .search-input {
        flex: 1 1 0%;
        min-width: 0;
        font-size: 0.9rem;
        padding: 6px 8px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #header .image-search-btn,
    #header .search-btn {
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        margin-right: 6px;
    }

    #header .search-btn {
        margin-right: 0;
    }

    #header .image-search-btn i,
    #header .search-btn i {
        font-size: 0.8rem;
    }

    #header .advanced-search-btn {
        flex: 0 0 var(--header-advanced-btn-size);
        width: var(--header-advanced-btn-size);
        height: var(--header-advanced-btn-size);
        min-width: var(--header-advanced-btn-size);
        min-height: var(--header-advanced-btn-size);
        margin-left: 0;
    }

    #header .advanced-search-btn i {
        font-size: 1.35rem;
    }

    /* 首頁圖片輪播左右切換 */
    .carousel .prev,
    .carousel .next {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    /* 詳情子輪播：與首頁同尺寸（767px 下 44px 圓） */
    .carousel-container.subpage .main-image > button.prev.glass,
    .carousel-container.subpage .main-image > button.next.glass {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    /* .carousel .prev {
        left: 8px;
    }

    .carousel .next {
        right: 8px;
    } */

    .carousel .prev:hover,
    .carousel .next:hover {
        transform: translateY(-50%) scale(1.06);
    }

    .carousel-container.subpage .main-image > button.prev.glass:hover,
    .carousel-container.subpage .main-image > button.next.glass:hover {
        transform: translateY(-50%) scale(1.06);
    }

    .Site-Notice {
        height: auto;
        min-height: 68px;
    }
    .sn-img img {
        width: 18px;
    }
    .Site-Notice .left {
        width: 62%;
        padding: 12px 10px 12px 62px;
        font-size: 13px;
        line-height: 32px;
    }

    .Site-Notice .right {
        padding: 12px 10px;
        font-size: 16px;
        margin-top: 7px;
    }

    .Site-Notice .right .loaction {
        padding-right: 8px;
    }

    .marquee-item {
        padding: 0 36px;
        font-size: 13px;
    }

    .yhzq-top {
        height: auto;
        min-height: 72px;
        padding: 12px 14px;
        margin-top: 14px;
    }

    .yhzq-top h2 {
        font-size: var(--fs-title);
        line-height: 1.25;
    }

    .yhzq-top .more a {
        font-size: 14px;
    }

    .yhzq-list-containe {
        padding: 12px;
        gap: 12px;
    }

    .yhzq-list > .details-containe {
        padding: 10px 10px 0;
    }

    .details-containe {
        font-size: 13px;
    }

    .details-containe .information {
        height: 30px;
        min-height: 30px;
        line-height: 30px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .details-containe ul > li.information:first-of-type {
        height: 42px;
        min-height: 42px;
        line-height: 42px;
    }

    .details-containe .information span.nickname {
        font-size: 17px;
    }

    .details-containe li.short {
        height: 28px;
        min-height: 28px;
        line-height: 28px;
    }

    .details-containe .information.jq {
        height: 36px;
        line-height: 36px;
    }

    .details-containe .information.jq span {
        font-size: 14px;
    }

    .details-containe .information.yj span,
    .details-containe .information.xj span {
        font-size: 13px;
    }

    .bottom-icons {
        height: 38px;
        gap: 14px;
        padding: 0 8px;
        font-size: 13px;
    }

    .bottom-icons span i {
        font-size: 14px;
    }

    .img-containe {
        height: 240px;
    }

    #pickup-section .yhzq-list,
    #delivery-section .yhzq-list {
        min-height: 500px;
    }

    /* 卡片標籤：優惠專區、定點、外約（折扣／VIP／活動時間） */
    #promotion-slider .product-badge,
    #pickup-section .yhzq-list .product-badge,
    #delivery-section .yhzq-list .product-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        max-width: calc(100% - 12px);
        height: 28px;
        min-height: 28px;
        padding: 0 9px;
        font-size: 12px;
        line-height: 1;
        border-width: 1.5px;
        box-sizing: border-box;
    }

    #pickup-section .yhzq-list .product-badge,
    #delivery-section .yhzq-list .product-badge {
        left: 4px;
        bottom: 36px;
    }

    #promotion-slider .product-badge {
        left: 4px;
        bottom: 34px;
    }

    #promotion-slider .vip-badge,
    #pickup-section .yhzq-list .vip-badge,
    #delivery-section .yhzq-list .vip-badge,
    #promotion-slider .no-image-badge,
    #pickup-section .yhzq-list .no-image-badge,
    #delivery-section .yhzq-list .no-image-badge {
        min-width: 0;
        max-width: calc(100% - 12px);
        height: 32px;
        min-height: 32px;
        padding: 0 8px;
        font-size: 14px;
        top: 12px;
        left: 10px;
        right: auto;
        border-width: 1.5px;
        box-sizing: border-box;
    }

    #pickup-section .yhzq-activity-time-badge,
    #delivery-section .yhzq-activity-time-badge {
        top: 8px;
        left: 8px;
        max-width: calc(100% - 16px);
        min-width: 40px;
        height: 32px;
        min-height: 32px;
        padding: 0 8px;
        font-size: 11px;
        border-width: 0;
        box-sizing: border-box;
    }

    .countdown-timer-overlay {
        padding: 5px 8px;
        gap: 4px 6px;
    }

    .countdown-display-mini {
        gap: 3px;
    }

    .countdown-timer-overlay .countdown-label {
        font-size: clamp(0.55rem, 3.5vw, 0.68rem);
    }

    .countdown-timer-overlay .countdown-display {
        gap: 3px;
    }

    .countdown-timer-overlay .time-unit {
        padding: 3px 5px;
    }

    .time-value-mini {
        font-size: 0.82rem;
    }

    .time-label-mini {
        font-size: 0.6rem;
    }

    .time-separator-mini {
        font-size: 0.8rem;
    }

    .indicators span {
        width: 22px;
        height: 22px;
        margin: 0 4px;
        font-size: 12px;
    }

    /* 首頁輪播 caption（模板為 h2） */
    .carousel-slide .caption {
        padding: 22px 18px 20px;
    }

    .carousel-slide .caption h2,
    .carousel-slide .caption h3 {
        font-size: clamp(17px, 1.2vw + 12px, 22px);
        margin: 0 0 8px;
    }

    .carousel-slide .caption p {
        font-size: 13px;
        line-height: 1.45;
    }

    /* 定點／外約卡片內評分 */
    #pickup-section .details-containe .pingfen,
    #delivery-section .details-containe .pingfen {
        font-size: 17px;
    }

    #pickup-section .details-containe .pingfen span,
    #delivery-section .details-containe .pingfen span {
        font-size: 24px;
    }

    /* 底部導航：浮動在視窗底部（主內容由 body padding-bottom 留白） */
    footer#footer,
    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        margin-bottom: 0;
        z-index: 200;
        border-radius: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
        height: 88px;
        padding: 8px 0 max(6px, env(safe-area-inset-bottom, 0px));
        font-size: 0.8rem;
        box-sizing: border-box;
    }

    footer div {
        font-size: 15px;
        padding-bottom: 2px;
    }

    footer div a {
        padding-bottom: 0;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }

    footer .foot-home,
    footer .foot-home.active,
    footer .foot-phb,
    footer .foot-phb.active,
    footer .foot-new,
    footer .foot-new.active,
    footer .foot-uc,
    footer .foot-uc.active,
    footer .foot-kf.active {
        background-size: 26px 26px;
        background-position: center bottom 30px;
    }

    footer .foot-home:hover {
        background-image: url(../images/i-home-on.png);
        background-size: 26px 26px;
        background-position: center bottom 30px;
        background-repeat: no-repeat;
    }

    footer .foot-phb:hover {
        background-image: url(../images/i-phb-on.png);
        background-size: 26px 26px;
        background-position: center bottom 30px;
        background-repeat: no-repeat;
    }

    footer .foot-new:hover {
        background-image: url(../images/i-new-on.png);
        background-size: 26px 26px;
        background-position: center bottom 30px;
        background-repeat: no-repeat;
    }

    footer .foot-uc:hover {
        background-image: url(../images/i-uc-on.png);
        background-size: 26px 26px;
        background-position: center bottom 30px;
        background-repeat: no-repeat;
    }

    footer .foot-home a:hover,
    footer .foot-phb a:hover,
    footer .foot-new a:hover,
    footer .foot-uc a:hover {
        background: none;
        color: #db5f79;
    }

    footer .foot-kf a,
    footer .foot-kf a:hover {
        background-size: 26px 26px;
        background-position: center bottom 30px;
    }

    footer .foot-kf a:hover {
        background-image: url(../images/i-kefu-on.png);
        background-repeat: no-repeat;
    }

    /* 客服彈窗：移動端底緣貼齊視口底部（全寬底欄式；底部預留安全區） */
    .customer-service-modal .modal-content {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        height: auto;
        max-height: min(520px, calc(100vh - max(8px, env(safe-area-inset-top, 0px))));
        max-height: min(520px, calc(100dvh - max(8px, env(safe-area-inset-top, 0px))));
        margin: 0;
        border-radius: 16px 16px 0 0;
        padding: 14px max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: 50px;
    }

    .customer-service-modal .modal-header {
        margin-bottom: 12px;
        padding-bottom: 10px;
        height: auto;
        min-height: 48px;
        position: relative;
        justify-content: flex-end;
        align-items: center;
    }

    /* 客服彈窗關閉鈕：移動端觸控區 ≥44px，錨定在標題欄右側（覆蓋全局 .close-modal 的 padding/絕對定位） */
    .customer-service-modal .modal-header .close-modal {
        position: absolute;
        right: 0;
        transform: translateY(-50%);
        z-index: 2;
        width: 36px;
        height: 36px;
        min-width: 32px;
        min-height: 32px;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        font-size: 0;
        line-height: 1;
        color: #444;
        background-color: rgba(0, 0, 0, 0.08);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .customer-service-modal .modal-header .close-modal i {
        font-size: 26px;
        line-height: 1;
        color: inherit;
    }

    .customer-service-modal .qr-codes-container {
        flex-wrap: wrap;
        gap: 12px 16px;
        margin-bottom: 12px;
        padding-top: 40px;
    }

    .customer-service-modal .qr-code {
        width: min(140px, 36vw);
        height: min(140px, 36vw);
    }

    .customer-service-modal .service-text {
        font-size: clamp(13px, 3.5vw, 16px);
    }

    .phb-containe {
        padding: 12px;
        padding-top: min(128px, 34vw);
        min-height: 0;
        margin-top: 0;
    }

    .phb-containe .more {
        top: max(30px, 8vw);
        right: -8px;
        height: 36px;
        font-size: 14px;
        padding-left: 12px;
        padding-right: 22px;
    }

    .phb-containe .more a {
        font-size: 14px;
    }


    .yhzq-containe.dingdian .yhzq-list-containe {
        padding: 0 0 10px;
        gap: 14px;
    }

    .yhzq-list-containe > .yhzq-list {
        flex: 0 0 calc((100% - 14px) / 2);
        width: calc((100% - 14px) / 2);
        max-width: calc((100% - 14px) / 2);
    }

    /* 排行榜：卡片內圖片與文字左右排列（單列全寬） */
    #ranking-section .index-phb-div {
        flex-direction: column;
        gap: 6px;
    }

    #ranking-section .phb-list {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        min-height: 0;
        flex-direction: row;
        align-items: stretch;
        padding: 6px;
        gap: 6px;
    }

    #ranking-section .phb-list > .img-containe {
        flex: 0 0 clamp(124px, calc(30vw + 20px), 162px);
        width: clamp(124px, calc(30vw + 20px), 162px);
        min-width: 124px;
        max-width: 162px;
        height: auto;
        min-height: 0;
        align-self: stretch;
        border-radius: 10px 0 0 10px;
        border-top-right-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #ranking-section .phb-list .img-containe > img {
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    #ranking-section .phb-list .top-bq {
        width: 48px;
        left: 4px;
        top: 2px;
        z-index: 5;
    }

    #ranking-section .phb-list .top-bq img {
        max-width: 100%;
        height: auto;
    }

    #ranking-section .phb-list .product-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        left: 4px;
        bottom: 4px;
        min-width: 64px;
        height: 26px;
        font-size: 12px;
        padding: 0 8px;
        z-index: 4;
        line-height: 1;
    }

    #ranking-section .phb-list .vip-badge {
        top: 4px;
        right: 6px;
        left: auto;
        bottom: auto;
        min-width: 0;
        height: 28px;
        min-height: 24px;
        font-size: 13px;
        padding: 0 6px;
        z-index: 4;
        border-width: 1px;
    }

    #ranking-section .phb-list > .details-containe {
        flex: 1 1 auto;
        min-width: 0;
        border-radius: 0 10px 10px 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    #ranking-section .phb-list .details-containe .pingfen {
        position: absolute;
        right: 8px;
        top: 6px;
        font-size: 14px;
        z-index: 3;
    }

    #ranking-section .phb-list .details-containe .pingfen span {
        font-size: 24px;
    }

    #ranking-section .phb-list .details-containe ul > li.information:first-of-type {
        padding-right: 72px;
    }

    /* 搜尋結果：統計與排序各佔滿寬一行 */
    .hl-search-container .results-summary {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
    }

    .hl-search-container .results-count {
        width: 100%;
        justify-content: center;
    }

    .hl-search-container .sort-filter {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* leda-details 評論：附件縮圖、表情、確認框（與 moban-1 窄屏對齊） */
    .media-preview-list {
        touch-action: pan-y;
    }

    .media-item {
        width: calc(33.333% - 7px);
    }

    .emoji-picker-popup {
        width: 80%;
        max-width: min(360px, 92vw);
        max-height: 70vh;
        bottom: 128px;
    }

    .emoji-picker-popup.show {
        transform: translateX(-50%) translateY(0);
    }

    .emoji-picker-body {
        grid-template-columns: repeat(8, 1fr);
        max-height: calc(70vh - 60px);
    }

    .confirm-toast {
        min-width: 280px;
        top: 20px;
    }

    .confirm-toast-content {
        padding: 14px 16px;
    }

    .confirm-toast-message {
        font-size: 13px;
    }

    .confirm-toast-actions {
        padding: 0 16px 14px 16px;
    }

    .confirm-toast-btn {
        padding: 10px 18px;
        border-radius: 20px;
        font-size: 14px;
    }

    .comment-media-list {
        grid-template-columns: repeat(3, 1fr) !important;
        max-width: 100%;
    }

    .comment-media-list:has(.comment-media-item:only-child),
    .comment-media-list:has(.comment-video-wrapper:only-child) {
        grid-template-columns: repeat(3, 1fr) !important;
        max-width: 100%;
    }

    .comment-media-list:has(.comment-media-item:nth-child(2):last-child),
    .comment-media-list:has(.comment-video-wrapper:nth-child(2):last-child) {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .comment-media-list:has(.comment-media-item:nth-child(3):last-child),
    .comment-media-list:has(.comment-video-wrapper:nth-child(3):last-child) {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* 詳情頁主圖輪播（moban-1 窄屏對齊） */
    .carousel-container.subpage {
        border-radius: 6px;
    }

    .carousel-slide.slide-anim,
    .details-slide.slide-anim {
        width: 100%;
        flex: 0 0 100% !important;
        min-width: 100%;
        max-width: 100%;
    }

    .carousel-slide.fade-anim,
    .details-slide.fade-anim {
        width: 100%;
        max-width: 100%;
    }

    .carousel-slide.coverflow-anim,
    .details-slide.coverflow-anim {
        width: 100%;
        max-width: 100%;
    }

    .carousel-container {
        max-height: 100%;
    }

    /* 詳情頁：移動端圖片區與文字區上下排列 */
    .details-container .product-detail {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .details-container .product-gallery,
    .details-container .product-info {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 8px;
        padding-bottom: 20px;
    }

    .product-gallery {
        background: #fff;
        height: 60vh;
        min-height: 320px;
    }

    .product-gallery .main-image {
        min-height: 200px;
    }

    .container.hl-search-container{
        margin: 0 auto;
        padding: 8px;
        padding-bottom: 80px;
    }
    .points-table .avatar {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }
}

@media (max-width: 640px) {
    :root {
        --fs-body: clamp(12.5px, 0.3vw + 11px, 14.5px);
        --site-footer-inset: 84px;
    }

    #header.top-container {
        height: 96px;
        --header-search-inset-right: 58px;
        --header-search-box-height: 44px;
        --header-advanced-btn-size: 42px;
    }

    #header .logo-container {
        left: 12px;
        gap: 8px;
        max-width: calc(100% - 128px);
    }

    #header .logo-image {
        width: 52px;
        height: 52px;
    }

    #header .logo-title {
        font-size: 1rem;
    }

    #header .user-menu {
        right: 10px;
    }

    #header .user-btn {
        width: 42px;
        height: 42px;
    }

    #header .user-btn i {
        font-size: 1.55rem;
    }

    #header .search-icon-btn {
        right: 58px;
    }

    #header .search-toggle-btn {
        width: 42px;
        height: 42px;
    }

    #header .search-toggle-btn i {
        font-size: 1.35rem;
    }

    #header .advanced-search-btn i {
        font-size: 1.28rem;
    }

    .carousel .prev,
    .carousel .next {
        width: 42px;
        height: 42px;
        font-size: 19px;
    }

    .carousel-container.subpage .main-image > button.prev.glass,
    .carousel-container.subpage .main-image > button.next.glass {
        width: 42px;
        height: 42px;
        font-size: 19px;
    }

    /* .carousel .prev {
        left: 6px;
    }

    .carousel .next {
        right: 6px;
    } */

    .global-container {
        padding: 9px;
        padding-bottom: calc(9px + var(--site-footer-inset));
    }

    .Site-Notice .left {
        padding: 10px 8px 10px 62px;
        font-size: 12.5px;
    }

    .Site-Notice .right {
        font-size: 15px;
    }

    .marquee-item {
        padding: 0 28px;
    }


    .phb-containe {
        padding-top: min(118px, 32vw);
    }

    #promotion-slider .product-badge,
    #pickup-section .yhzq-list .product-badge,
    #delivery-section .yhzq-list .product-badge {
        height: 26px;
        min-height: 26px;
        padding: 0 8px;
        font-size: 11.5px;
    }

    #promotion-slider .vip-badge,
    #pickup-section .yhzq-list .vip-badge,
    #delivery-section .yhzq-list .vip-badge {
        height: 30px;
        min-height: 30px;
        padding: 0 7px;
        font-size: 13px;
        top: 10px;
        right: 8px;
        right: auto;
    }

    #pickup-section .yhzq-activity-time-badge,
    #delivery-section .yhzq-activity-time-badge {
        height: 30px;
        min-height: 30px;
        padding: 0 7px;
        font-size: 10.5px;
        top: 6px;
        left: 6px;
    }

    .carousel-slide .caption {
        padding: 20px 16px 18px;
    }

    .carousel-slide .caption h2,
    .carousel-slide .caption h3 {
        font-size: clamp(16px, 1.1vw + 11px, 21px);
    }

    .carousel-slide .caption p {
        font-size: 12.5px;
    }

    #pickup-section .details-containe .pingfen,
    #delivery-section .details-containe .pingfen {
        font-size: 16px;
    }

    #pickup-section .details-containe .pingfen span,
    #delivery-section .details-containe .pingfen span {
        font-size: 22px;
    }

    footer {
        height: 84px;
        padding: 8px 0 5px;
        font-size: 0.76rem;
    }

    footer div {
        font-size: 14px;
        padding-bottom: 2px;
    }

    footer div a {
        padding-bottom: 0;
    }

    footer .foot-home,
    footer .foot-home.active,
    footer .foot-phb,
    footer .foot-phb.active,
    footer .foot-new,
    footer .foot-new.active,
    footer .foot-uc,
    footer .foot-uc.active,
    footer .foot-kf.active {
        background-size: 24px 24px;
        background-position: center bottom 28px;
    }

    footer .foot-home:hover {
        background-image: url(../images/i-home-on.png);
        background-size: 24px 24px;
        background-position: center bottom 28px;
        background-repeat: no-repeat;
    }

    footer .foot-phb:hover {
        background-image: url(../images/i-phb-on.png);
        background-size: 24px 24px;
        background-position: center bottom 28px;
        background-repeat: no-repeat;
    }

    footer .foot-new:hover {
        background-image: url(../images/i-new-on.png);
        background-size: 24px 24px;
        background-position: center bottom 28px;
        background-repeat: no-repeat;
    }

    footer .foot-uc:hover {
        background-image: url(../images/i-uc-on.png);
        background-size: 24px 24px;
        background-position: center bottom 28px;
        background-repeat: no-repeat;
    }

    footer .foot-home a:hover,
    footer .foot-phb a:hover,
    footer .foot-new a:hover,
    footer .foot-uc a:hover {
        background: none;
        color: #db5f79;
    }

    footer .foot-kf a,
    footer .foot-kf a:hover {
        background-size: 24px 24px;
        background-position: center bottom 28px;
    }

    footer .foot-kf a:hover {
        background-image: url(../images/i-kefu-on.png);
        background-repeat: no-repeat;
    }
}

@media (max-width: 480px) {
    :root {
        --fs-hero: clamp(20px, 2.2vw + 10px, 32px);
        --fs-title: clamp(16px, 0.9vw + 8px, 20px);
        --fs-body: clamp(12px, 0.25vw + 10.5px, 14px);
        --site-footer-inset: 80px;
    }

    #header.top-container {
        height: 92px;
        border-radius: 12px;
        --header-search-inset-right: 54px;
        --header-search-gap: 5px;
        --header-search-box-height: 42px;
        --header-advanced-btn-size: 40px;
    }

    #header .logo-container {
        left: 10px;
        gap: 8px;
        max-width: calc(100% - 118px);
    }

    #header .logo-image {
        width: 48px;
        height: 48px;
    }

    #header .logo-title {
        font-size: 0.95rem;
    }

    #header .user-menu {
        right: 8px;
    }

    #header .user-btn {
        width: 40px;
        height: 40px;
    }

    #header .user-btn i {
        font-size: 1.45rem;
    }

    #header .search-icon-btn {
        right: 54px;
    }

    #header .search-toggle-btn {
        width: 40px;
        height: 40px;
    }

    #header .search-toggle-btn i {
        font-size: 1.28rem;
    }

    #header .search-box {
        padding: 5px 5px 5px 12px;
        border-radius: 22px;
    }

    #header .search-input {
        font-size: 0.85rem;
        padding: 4px 6px;
    }

    #header .image-search-btn,
    #header .search-btn {
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }

    #header .advanced-search-btn i {
        font-size: 1.2rem;
    }

    .carousel .prev,
    .carousel .next {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .carousel-container.subpage .main-image > button.prev.glass,
    .carousel-container.subpage .main-image > button.next.glass {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    /* .carousel .prev {
        left: 5px;
    }

    .carousel .next {
        right: 5px;
    } */

    .carousel .prev:hover,
    .carousel .next:hover {
        transform: translateY(-50%) scale(1.05);
    }

    .carousel-container.subpage .main-image > button.prev.glass:hover,
    .carousel-container.subpage .main-image > button.next.glass:hover {
        transform: translateY(-50%) scale(1.05);
    }

    .global-container {
        padding: 8px;
        margin-top: 0;
        padding-bottom: calc(8px + var(--site-footer-inset));
    }

    .Site-Notice {
        min-height: 45px;
    }

    .Site-Notice .left {
        width: 58%;
        padding: 8px 6px 8px 54px;
        font-size: 12px;
    }

    .Site-Notice .right {
        padding: 8px 6px;
        font-size: 14px;
    }

    .sn-img {
        width: 48px;
    }

    .marquee-item {
        padding: 0 20px;
        font-size: 12px;
    }

    .yhzq-top {
        min-height: 64px;
        padding: 10px 12px;
        margin-top: 10px;
    }

    .yhzq-top .more a {
        font-size: 13px;
    }

    .yhzq-list-containe {
        padding: 10px;
        gap: 10px;
    }

    .yhzq-list > .details-containe {
        padding: 8px 8px 0;
    }

    .details-containe {
        font-size: 12.5px;
    }

    .details-containe .information {
        height: 28px;
        min-height: 28px;
        line-height: 28px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .details-containe ul > li.information:first-of-type {
        height: 38px;
        min-height: 38px;
        line-height: 38px;
    }

    .details-containe .information span.nickname {
        font-size: 15px;
    }

    .details-containe li.short {
        height: 26px;
        min-height: 26px;
        line-height: 26px;
    }

    .details-containe .information.jq span {
        font-size: 13px;
    }

    .details-containe .information.yj span,
    .details-containe .information.xj span {
        font-size: 12px;
    }

    .bottom-icons {
        height: 34px;
        gap: 10px;
        font-size: 12px;
        padding: 0 6px;
    }

    .img-containe {
        height: 220px;
    }



    #promotion-slider .product-badge,
    #pickup-section .yhzq-list .product-badge,
    #delivery-section .yhzq-list .product-badge {
        height: 24px;
        min-height: 24px;
        max-width: calc(100% - 10px);
        padding: 0 7px;
        font-size: 11px;
        border-radius: 16px;
        border-width: 1px;
    }

    #pickup-section .yhzq-list .product-badge,
    #delivery-section .yhzq-list .product-badge {
        bottom: 32px;
    }

    #promotion-slider .product-badge {
        bottom: 30px;
    }

    #promotion-slider .vip-badge,
    #pickup-section .yhzq-list .vip-badge,
    #delivery-section .yhzq-list .vip-badge {
        height: 28px;
        min-height: 28px;
        max-width: calc(100% - 10px);
        padding: 0 6px;
        font-size: 12px;
        top: 8px;
        left: auto;
        right: 6px;
        border-radius: 20px;
        border-width: 1px;
    }

    #pickup-section .yhzq-activity-time-badge,
    #delivery-section .yhzq-activity-time-badge {
        height: 28px;
        min-height: 28px;
        max-width: calc(100% - 12px);
        padding: 0 6px;
        font-size: 10px;
        top: 6px;
        left: 6px;
        letter-spacing: 0.02em;
    }

    .countdown-timer-overlay {
        padding: 4px 6px;
        gap: 2px 4px;
    }

    .countdown-display-mini {
        gap: 2px;
    }

    .countdown-timer-overlay:has(.countdown-label) {
        gap: 3px;
    }

    .countdown-timer-overlay .countdown-label {
        font-size: clamp(0.52rem, 3.2vw, 0.62rem);
        line-height: 1.2;
    }

    .countdown-timer-overlay .countdown-display {
        gap: 2px;
    }

    .countdown-timer-overlay .time-unit {
        padding: 2px 4px;
    }

    .time-unit-mini {
        padding: 3px 4px;
    }

    .time-value-mini {
        font-size: 0.75rem;
    }

    .time-label-mini {
        font-size: 0.55rem;
    }

    .time-separator-mini {
        font-size: 0.72rem;
    }

    .indicators span {
        width: 20px;
        height: 20px;
        margin: 0 3px;
        font-size: 11px;
    }

    .carousel-slide .caption {
        padding: 14px 12px 16px;
    }

    .carousel-slide .caption h2,
    .carousel-slide .caption h3 {
        font-size: clamp(14px, 3.2vw, 17px);
        margin: 0 0 6px;
    }

    .carousel-slide .caption p {
        font-size: 12px;
        line-height: 1.45;
    }

    #pickup-section .details-containe .pingfen,
    #delivery-section .details-containe .pingfen {
        font-size: 15px;
    }

    #pickup-section .details-containe .pingfen span,
    #delivery-section .details-containe .pingfen span {
        font-size: 20px;
    }

    footer {
        height: 80px;
        padding: 6px 0 4px;
        font-size: 0.72rem;
    }

    footer div {
        font-size: 13px;
        padding-bottom: 2px;
    }

    footer div a {
        padding-bottom: 10px;
    }

    footer .foot-home,
    footer .foot-home.active,
    footer .foot-phb,
    footer .foot-phb.active,
    footer .foot-new,
    footer .foot-new.active,
    footer .foot-uc,
    footer .foot-uc.active,
    footer .foot-kf.active {
        background-size: 22px 22px;
        background-position: center bottom 32px;
    }

    footer .foot-home:hover {
        background-image: url(../images/i-home-on.png);
        background-size: 22px 22px;
        background-position: center bottom 32px;
        background-repeat: no-repeat;
    }

    footer .foot-phb:hover {
        background-image: url(../images/i-phb-on.png);
        background-size: 22px 22px;
        background-position: center bottom 32px;
        background-repeat: no-repeat;
    }

    footer .foot-new:hover {
        background-image: url(../images/i-new-on.png);
        background-size: 22px 22px;
        background-position: center bottom 32px;
        background-repeat: no-repeat;
    }

    footer .foot-uc:hover {
        background-image: url(../images/i-uc-on.png);
        background-size: 22px 22px;
        background-position: center bottom 32px;
        background-repeat: no-repeat;
    }

    footer .foot-home a:hover,
    footer .foot-phb a:hover,
    footer .foot-new a:hover,
    footer .foot-uc a:hover {
        background: none;
        color: #db5f79;
    }

    footer .foot-kf a,
    footer .foot-kf a:hover {
        background-size: 22px 22px;
        background-position: center bottom 32px;
    }

    footer .foot-kf a:hover {
        background-image: url(../images/i-kefu-on.png);
        background-repeat: no-repeat;
    }

    .phb-containe {
        padding: 10px;
        padding-top: min(108px, 30vw);
    }

    .phb-containe .more {
        height: 34px;
        font-size: 13px;
        padding-right: 18px;
    }

    .phb-containe .more a {
        font-size: 13px;
    }


    .index-phb-div {
        padding: 10px;
        gap: 6px;
        margin-top: -20px;
    }

    #ranking-section .phb-list > .img-containe {
        flex: 0 0 clamp(116px, calc(28vw + 20px), 148px);
        width: clamp(116px, calc(28vw + 20px), 148px);
        min-width: 116px;
        max-width: 148px;
    }

    #ranking-section .phb-list .details-containe .pingfen span {
        font-size: 20px;
    }

    #ranking-section .phb-list .details-containe ul > li.information:first-of-type {
        padding-right: 64px;
    }
    .points-table thead th{
        font-size: 14px;
    }
    .points-table .player-info .name{
        font-size: 14px;
    }
    .points-table .player-info .meta{
        font-size: 12px;
    }
    .points-table .trend-indicator .trend-text {
        font-size: 12px;
        font-weight: 700;
        line-height: 1.25;
    }
    .points-table td[data-label="評分"] .stat.phb-rating {
        font-size: 17px;
    }
    .points-table tbody tr:nth-child(1) td[data-label="評分"] .stat.phb-rating {
        font-size: 20px
    }
    
    .points-table tbody tr:nth-child(2) td[data-label="評分"] .stat.phb-rating {
        font-size: 20px;
    }
    
    .points-table tbody tr:nth-child(3) td[data-label="評分"] .stat.phb-rating {
        font-size: 20px
    }
    .sub-header.newcaipin {
        padding: 1.5rem 3px;
    }
    .category-dropdown.todaynew-city-dropdown {
        min-width: 100px;
        max-width: 220px;
    }
    .category-btn {
        padding: 6px 10px;
        font-size: 13px
    }
    .dropdown-item{
        font-size: 13px;
    }
    .sort-btn {
        min-height: 32px;
        min-width: 72px;
        padding: 6px 8x;
    }
    .pingfen{
        font-size: 16px;
    }
    .pingfen span{
        font-size: 24px;
    }
    .pagination{
        padding: 0;
        margin-top: 24px;
    }
    .page-btn{
        min-width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 5px;
    }
    .product-features{
        padding: 6px;
        margin-top: 20px;
    }
    .product-detail{
        margin-bottom: 0;
    }
    .feature-item{
        font-size: 13px;
    }
    .spec-item{
        font-size: 13px;
    }
    .detail-code-value{
        font-size: 18px;
    }
    .detail-booking-btn-text{
        font-size: 17px;
    }
    .spec-value{
        font-size: 13px;
    }
    
    .spec-value{
        font-size: 13px;
    }
    .reviews-title{
        font-size: 18px;
    }
    .radar-title{
        font-size: 18px;
    }
    .radar-average{
        font-size: 16px;
    }
    .sort-options h2{
        font-size: 18px;
    }
}

@media (max-width: 390px) {
    :root {
        --site-footer-inset: 78px;
    }

    #header.top-container {
        height: 90px;
        --header-search-inset-right: 50px;
        --header-search-box-height: 40px;
        --header-advanced-btn-size: 38px;
    }

    #header .logo-container {
        max-width: calc(100% - 112px);
        left: 8px;
        gap: 6px;
    }

    #header .logo-image {
        width: 46px;
        height: 46px;
    }

    #header .logo-title {
        font-size: 0.92rem;
    }

    #header .user-menu {
        right: 6px;
    }

    #header .search-icon-btn {
        right: 50px;
    }

    #header .user-btn,
    #header .search-toggle-btn {
        width: 38px;
        height: 38px;
    }

    #header .user-btn i {
        font-size: 1.38rem;
    }

    #header .search-toggle-btn i {
        font-size: 1.22rem;
    }

    #header .search-box {
        padding: 4px 4px 4px 10px;
    }

    #header .search-input {
        font-size: 0.82rem;
    }

    #header .image-search-btn,
    #header .search-btn {
        width: 28px;
        height: 28px;
    }

    #header .advanced-search-btn i {
        font-size: 1.12rem;
    }

    .carousel .prev,
    .carousel .next {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .carousel-container.subpage .main-image > button.prev.glass,
    .carousel-container.subpage .main-image > button.next.glass {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    /* .carousel .prev {
        left: 4px;
    } */

    /* .carousel .next {
        right: 4px;
    } */

    .carousel .prev:hover,
    .carousel .next:hover {
        transform: translateY(-50%) scale(1.04);
    }

    .carousel-container.subpage .main-image > button.prev.glass:hover,
    .carousel-container.subpage .main-image > button.next.glass:hover {
        transform: translateY(-50%) scale(1.04);
    }

    .yhzq-containe.dingdian .yhzq-list-containe {
        gap: 10px;
    }

    .yhzq-list-containe > .yhzq-list {
        flex: 0 0 calc((100% - 10px) / 2);
        width: calc((100% - 10px) / 2);
        max-width: calc((100% - 10px) / 2);
    }

    .Site-Notice .left {
        width: 56%;
        font-size: 11.5px;
    }

    #pickup-section .yhzq-list,
    #delivery-section .yhzq-list {
        min-height: 340px;
    }

    #promotion-slider .product-badge,
    #pickup-section .yhzq-list .product-badge,
    #delivery-section .yhzq-list .product-badge {
        height: 23px;
        min-height: 23px;
        padding: 0 6px;
        font-size: 10.5px;
    }

    #promotion-slider .vip-badge,
    #pickup-section .yhzq-list .vip-badge,
    #delivery-section .yhzq-list .vip-badge {
        height: 26px;
        min-height: 26px;
        padding: 0 5px;
        font-size: 11px;
        top: 6px;
        left: 5px;
        right: auto;
    }

    #pickup-section .yhzq-activity-time-badge,
    #delivery-section .yhzq-activity-time-badge {
        height: 26px;
        min-height: 26px;
        padding: 0 6px;
        font-size: 9.5px;
        top: 5px;
        left: 5px;
        max-width: calc(100% - 10px);
    }

    .carousel-slide .caption {
        padding: 12px 10px 14px;
    }

    .carousel-slide .caption h2,
    .carousel-slide .caption h3 {
        font-size: clamp(13px, 3vw, 16px);
        margin: 0 0 5px;
    }

    .carousel-slide .caption p {
        font-size: 11.5px;
    }

    #pickup-section .details-containe .pingfen,
    #delivery-section .details-containe .pingfen {
        font-size: 14px;
    }

    #pickup-section .details-containe .pingfen span,
    #delivery-section .details-containe .pingfen span {
        font-size: 19px;
    }

    footer {
        height: 78px;
        padding: 6px 0 4px;
        font-size: 0.68rem;
    }

    footer div {
        font-size: 12px;
        padding-bottom: 2px;
    }

    footer div a {
        padding-bottom: 0;
    }

    footer .foot-home,
    footer .foot-home.active,
    footer .foot-phb,
    footer .foot-phb.active,
    footer .foot-new,
    footer .foot-new.active,
    footer .foot-uc,
    footer .foot-uc.active,
    footer .foot-kf.active {
        background-size: 20px 20px;
        background-position: center bottom 26px;
    }

    footer .foot-home:hover {
        background-image: url(../images/i-home-on.png);
        background-size: 20px 20px;
        background-position: center bottom 26px;
        background-repeat: no-repeat;
    }

    footer .foot-phb:hover {
        background-image: url(../images/i-phb-on.png);
        background-size: 20px 20px;
        background-position: center bottom 26px;
        background-repeat: no-repeat;
    }

    footer .foot-new:hover {
        background-image: url(../images/i-new-on.png);
        background-size: 20px 20px;
        background-position: center bottom 26px;
        background-repeat: no-repeat;
    }

    footer .foot-uc:hover {
        background-image: url(../images/i-uc-on.png);
        background-size: 20px 20px;
        background-position: center bottom 26px;
        background-repeat: no-repeat;
    }

    footer .foot-home a:hover,
    footer .foot-phb a:hover,
    footer .foot-new a:hover,
    footer .foot-uc a:hover {
        background: none;
        color: #db5f79;
    }

    footer .foot-kf a,
    footer .foot-kf a:hover {
        background-size: 20px 20px;
        background-position: center bottom 26px;
    }

    footer .foot-kf a:hover {
        background-image: url(../images/i-kefu-on.png);
        background-repeat: no-repeat;
    }
    .pagination{
        padding: 0;
        margin-top: 24px;
        gap: 6x;
    }
    .page-btn{
        min-width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 5px;
    }
}

@media (max-width: 376px) {
    :root {
        --site-footer-inset: 76px;
    }

    #header.top-container {
        height: 88px;
        --header-search-inset-right: 48px;
        --header-search-gap: 4px;
        --header-search-box-height: 38px;
        --header-advanced-btn-size: 36px;
    }

    #header .logo-container {
        max-width: calc(100% - 108px);
    }

    #header .logo-title {
        font-size: 0.88rem;
    }

    #header .search-icon-btn {
        right: 48px;
    }

    #header .user-btn,
    #header .search-toggle-btn {
        width: 36px;
        height: 36px;
    }

    #header .search-box {
        padding: 3px 3px 3px 8px;
        border-radius: 20px;
        border-width: 1px;
    }

    #header .search-input {
        font-size: 0.8rem;
        padding: 2px 4px;
    }

    #header .image-search-btn,
    #header .search-btn {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        margin-right: 3px;
    }

    #header .image-search-btn i,
    #header .search-btn i {
        font-size: 0.65rem;
    }

    #header .advanced-search-btn i {
        font-size: 1.05rem;
    }

    .carousel .prev,
    .carousel .next {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .carousel-container.subpage .main-image > button.prev.glass,
    .carousel-container.subpage .main-image > button.next.glass {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    /* .carousel .prev {
        left: 3px;
    } */

    /* .carousel .next {
        right: 3px;
    } */

    .global-container {
        padding: 7px;
        padding-bottom: calc(7px + var(--site-footer-inset));
    }

    .details-containe .information {
        padding-left: 6px;
        padding-right: 6px;
    }

    .bottom-icons {
        gap: 8px;
    }

    #promotion-slider .product-badge,
    #pickup-section .yhzq-list .product-badge,
    #delivery-section .yhzq-list .product-badge {
        font-size: 10px;
        padding: 0 6px;
    }

    #promotion-slider .vip-badge,
    #pickup-section .yhzq-list .vip-badge,
    #delivery-section .yhzq-list .vip-badge {
        font-size: 10.5px;
        padding: 0 5px;
    }

    #pickup-section .yhzq-activity-time-badge,
    #delivery-section .yhzq-activity-time-badge {
        font-size: 9px;
        padding: 0 5px;
    }

    .carousel-slide .caption h2,
    .carousel-slide .caption h3 {
        font-size: clamp(12.5px, 2.9vw, 15px);
    }

    .carousel-slide .caption p {
        font-size: 11px;
    }

    #pickup-section .details-containe .pingfen,
    #delivery-section .details-containe .pingfen {
        font-size: 13.5px;
    }

    #pickup-section .details-containe .pingfen span,
    #delivery-section .details-containe .pingfen span {
        font-size: 18px;
    }

    footer {
        height: 76px;
        padding: 6px 0 3px;
        font-size: 0.65rem;
    }

    footer div {
        font-size: 11.5px;
        padding-bottom: 2px;
    }

    footer div a {
        padding-bottom: 0;
    }

    footer .foot-home,
    footer .foot-home.active,
    footer .foot-phb,
    footer .foot-phb.active,
    footer .foot-new,
    footer .foot-new.active,
    footer .foot-uc,
    footer .foot-uc.active,
    footer .foot-kf.active {
        background-size: 19px 19px;
        background-position: center bottom 25px;
    }

    footer .foot-home:hover {
        background-image: url(../images/i-home-on.png);
        background-size: 19px 19px;
        background-position: center bottom 25px;
        background-repeat: no-repeat;
    }

    footer .foot-phb:hover {
        background-image: url(../images/i-phb-on.png);
        background-size: 19px 19px;
        background-position: center bottom 25px;
        background-repeat: no-repeat;
    }

    footer .foot-new:hover {
        background-image: url(../images/i-new-on.png);
        background-size: 19px 19px;
        background-position: center bottom 25px;
        background-repeat: no-repeat;
    }

    footer .foot-uc:hover {
        background-image: url(../images/i-uc-on.png);
        background-size: 19px 19px;
        background-position: center bottom 25px;
        background-repeat: no-repeat;
    }

    footer .foot-home a:hover,
    footer .foot-phb a:hover,
    footer .foot-new a:hover,
    footer .foot-uc a:hover {
        background: none;
        color: #db5f79;
    }

    footer .foot-kf a,
    footer .foot-kf a:hover {
        background-size: 19px 19px;
        background-position: center bottom 25px;
    }

    footer .foot-kf a:hover {
        background-image: url(../images/i-kefu-on.png);
        background-repeat: no-repeat;
    }
}

@media (max-width: 320px) {
    :root {
        --fs-body: 12px;
        --site-footer-inset: 72px;
    }

    #header.top-container {
        height: 86px;
        border-radius: 10px;
        --header-search-inset-right: 46px;
        --header-search-gap: 4px;
        --header-search-box-height: 38px;
        --header-advanced-btn-size: 36px;
    }

    #header .logo-container {
        left: 6px;
        max-width: calc(100% - 102px);
        gap: 5px;
    }

    #header .logo-image {
        width: 42px;
        height: 42px;
    }

    #header .logo-title {
        font-size: 0.82rem;
    }

    #header .user-menu {
        right: 4px;
    }

    #header .search-icon-btn {
        right: 46px;
    }

    #header .user-btn,
    #header .search-toggle-btn {
        width: 36px;
        height: 36px;
    }

    #header .user-btn i {
        font-size: 1.28rem;
    }

    #header .search-toggle-btn i {
        font-size: 1.1rem;
    }

    #header .search-box {
        padding: 3px 3px 3px 8px;
        border-radius: 20px;
        border-width: 1px;
    }

    #header .search-input {
        font-size: 0.78rem;
        padding: 2px 4px;
    }

    #header .image-search-btn,
    #header .search-btn {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        margin-right: 3px;
    }

    #header .image-search-btn i,
    #header .search-btn i {
        font-size: 0.65rem;
    }

    #header .advanced-search-btn i {
        font-size: 1rem;
    }

    .carousel .prev,
    .carousel .next {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .carousel-container.subpage .main-image > button.prev.glass,
    .carousel-container.subpage .main-image > button.next.glass {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    /* .carousel .prev {
        left: 3px;
    }

    .carousel .next {
        right: 3px;
    } */

    .carousel .prev:hover,
    .carousel .next:hover {
        transform: translateY(-50%) scale(1.03);
    }

    .carousel-container.subpage .main-image > button.prev.glass:hover,
    .carousel-container.subpage .main-image > button.next.glass:hover {
        transform: translateY(-50%) scale(1.03);
    }

    .global-container {
        padding: 6px;
        padding-bottom: calc(6px + var(--site-footer-inset));
    }

    .Site-Notice .left {
        width: 54%;
        padding: 6px 4px 6px 52px;
        font-size: 11px;
    }

    .Site-Notice .right {
        font-size: 13px;
    }

    .marquee-item {
        padding: 0 14px;
        font-size: 11px;
    }

    .yhzq-top {
        padding: 8px 10px;
        min-height: 58px;
    }

    .yhzq-list-containe {
        padding: 8px;
        gap: 8px;
    }

    .yhzq-list > .details-containe {
        padding: 6px 6px 0;
    }

    .details-containe {
        font-size: 12px;
    }

    .details-containe .information {
        height: 26px;
        min-height: 26px;
        line-height: 26px;
    }

    .details-containe ul > li.information:first-of-type {
        height: 36px;
        min-height: 36px;
        line-height: 36px;
    }

    .details-containe .information span.nickname {
        font-size: 14px;
    }

    .details-containe li.short {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        height: auto;
        min-height: 26px;
        line-height: 1.35;
        padding-top: 4px;
        padding-bottom: 4px;
        white-space: normal;
        align-items: flex-start;
    }

    .details-containe li.short span {
        white-space: normal;
        word-break: break-word;
    }

    .bottom-icons {
        height: 32px;
        font-size: 11px;
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .img-containe {
        height: 200px;
    }



    #promotion-slider .product-badge,
    #pickup-section .yhzq-list .product-badge,
    #delivery-section .yhzq-list .product-badge {
        height: 22px;
        min-height: 22px;
        max-width: calc(100% - 8px);
        padding: 0 5px;
        font-size: 9.5px;
        border-radius: 14px;
    }

    #pickup-section .yhzq-list .product-badge,
    #delivery-section .yhzq-list .product-badge {
        bottom: 28px;
    }

    #promotion-slider .vip-badge,
    #pickup-section .yhzq-list .vip-badge,
    #delivery-section .yhzq-list .vip-badge {
        height: 24px;
        min-height: 24px;
        max-width: calc(100% - 8px);
        padding: 0 4px;
        font-size: 10px;
        top: 5px;
        left: 4px;
        right: auto;
        border-radius: 10px;
    }

    #pickup-section .yhzq-activity-time-badge,
    #delivery-section .yhzq-activity-time-badge {
        height: auto;
        min-height: 24px;
        max-width: calc(100% - 8px);
        padding: 4px 6px;
        font-size: 8.5px;
        line-height: 1.25;
        white-space: normal;
        text-overflow: clip;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .carousel-slide .caption {
        padding: 10px 8px 12px;
    }

    .carousel-slide .caption h2,
    .carousel-slide .caption h3 {
        font-size: 12.5px;
        margin: 0 0 4px;
        line-height: 1.25;
    }

    .carousel-slide .caption p {
        font-size: 10.5px;
        line-height: 1.4;
    }

    #pickup-section .details-containe .pingfen,
    #delivery-section .details-containe .pingfen {
        font-size: 12px;
    }

    #pickup-section .details-containe .pingfen span,
    #delivery-section .details-containe .pingfen span {
        font-size: 17px;
    }

    footer {
        height: 72px;
        padding: 5px 0 3px;
        font-size: 0.62rem;
    }

    footer div {
        font-size: 11px;
        padding-bottom: 2px;
    }

    footer div a {
        padding-bottom: 0;
    }

    footer .foot-home,
    footer .foot-home.active,
    footer .foot-phb,
    footer .foot-phb.active,
    footer .foot-new,
    footer .foot-new.active,
    footer .foot-uc,
    footer .foot-uc.active,
    footer .foot-kf.active {
        background-size: 18px 18px;
        background-position: center bottom 26px;
    }

    footer .foot-home:hover {
        background-image: url(../images/i-home-on.png);
        background-size: 18px 18px;
        background-position: center bottom 26px;
        background-repeat: no-repeat;
    }

    footer .foot-phb:hover {
        background-image: url(../images/i-phb-on.png);
        background-size: 18px 18px;
        background-position: center bottom 26px;
        background-repeat: no-repeat;
    }

    footer .foot-new:hover {
        background-image: url(../images/i-new-on.png);
        background-size: 18px 18px;
        background-position: center bottom 26px;
        background-repeat: no-repeat;
    }

    footer .foot-uc:hover {
        background-image: url(../images/i-uc-on.png);
        background-size: 18px 18px;
        background-position: center bottom 26px;
        background-repeat: no-repeat;
    }

    footer .foot-home a:hover,
    footer .foot-phb a:hover,
    footer .foot-new a:hover,
    footer .foot-uc a:hover {
        background: none;
        color: #db5f79;
    }

    footer .foot-kf a,
    footer .foot-kf a:hover {
        background-size: 18px 18px;
        background-position: center bottom 26px;
    }

    footer .foot-kf a:hover {
        background-image: url(../images/i-kefu-on.png);
        background-repeat: no-repeat;
    }

    .indicators span {
        width: 18px;
        height: 18px;
        font-size: 10px;
        margin: 0 2px;
    }

    .phb-containe {
        padding: 8px;
        padding-top: min(96px, 28vw);
    }

    #ranking-section .phb-list {
        padding: 6px;
        gap: 8px;
    }

    #ranking-section .phb-list > .img-containe {
        flex: 0 0 112px;
        width: 112px;
        min-width: 108px;
        max-width: 116px;
    }

    #ranking-section .phb-list .details-containe .pingfen {
        font-size: 12px;
    }

    #ranking-section .phb-list .details-containe .pingfen span {
        font-size: 18px;
    }

    #ranking-section .phb-list .details-containe ul > li.information:first-of-type {
        padding-right: 56px;
    }

    #ranking-section .phb-list .product-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 56px;
        height: 22px;
        font-size: 10px;
        padding: 0 6px;
        line-height: 1;
    }

    .vip-badge {
        min-width: 48px;
        height: 24px;
        font-size: 11px;
        padding: 0 6px;
        top: 36px;
        left: auto;
        right: 6px;
        right: auto;
    }
}







/* 屏蔽前台轮播 caption */
.caption {
    display: none !important;
}

/* 菜品详情页：视频缩略图播放标识 */
.thumbnails-container .thumbnail.is-video .video-play-icon,
.thumbnails-container .thumbnail .video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}

.details-slide .video-play-overlay,
.main-image .video-play-overlay,
.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    pointer-events: none;
}

.details-slide .video-play-overlay i,
.main-image .video-play-overlay i,
.video-play-overlay i {
    color: #fff;
    font-size: 32px;
    margin-left: 4px;
}

.details-slide .video-poster-wrapper,
.main-image .video-poster-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}