/* 仟色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: #ff9a56 #f1f1f1;
}

:root {
    --white: #fff;
    --black: #000;
    --bg: #1c1c1c;
    --fg: #1a1a1a;
    --hg: #333;
    --muted: #6b7280;
    --primary: #2563eb;
    --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: #64b5f6;
    --scrollbar-thumb-hover: #42a5f5;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--ant-font-family);
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    /* background: var(--hg);  */
    color: var(--fg);
    font-size: var(--fs-body);

}

.global-container {
    max-width: 780px;
    height: calc(var(--vh) * 100);
    margin: 16px auto;
    padding: 12px;
    background: white;
    border-radius: 18px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    box-shadow: 0 15px 40px rgba(52, 152, 219, 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;
}

/* img {
    width: 100%;
    object-fit: cover;
    object-position: center;
} */
a {
    text-decoration: none;
}
ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sr-only {
    display: none;
}
header {
    background: var(--fg);
    max-width: var(--container);
    margin: 0 auto;
}

nav {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

nav .nav-row {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: row;
    /* 左右排列 */
    justify-content: space-between;
    /* 左右分散 */
    align-items: center;
    /* 垂直居中，可選 */
    flex-wrap: nowrap;
    /* 禁止換行 */
}

nav .nav-row.left {
    width: 30%;
    align-items: first baseline;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    padding-left: 30px;
    padding-top: 25px;
}

nav .nav-row.right {
    width: 70%;
    display: flex;
    align-self: flex-end;
    align-items: flex-end;
    margin-bottom: 20px;
}

nav .welcome {
    width: 70%;
    height: 60px;
    color: var(--border);
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-left: 30px;
}

nav .signup {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: right;
    cursor: pointer;
}

nav .signup img {
    width: 45%;
}

/* nav .right{
    position: relative;
    display: flex;
    flex: 1;
} */

.index-search {
    width: 80%;
    height: 36px;
    background: #fff;
    border-radius: 28px;
    box-shadow: 2px 2px 2px #999 inset;
    padding-left: 4px;
}

.index-search-input {
    width: 75%;
    height: 30px;
    line-height: 36px;
    font-size: 14px;
    color: #f90;
    margin-top: 3px;
    border: none;
    outline: none;
    border-radius: 24px;
    padding-left: 14px;
}

.img-search {
    display: block;
    width: 30px;
    height: 30px;
    background: url(../images/img_s.png) center no-repeat;
    background-size: 100%;
    border: none;
    outline: none;
    float: right;
    margin-right: 4px;
    margin-top: 3px;
    cursor: pointer;
}

.index-search-button {
    width: 30px;
    height: 30px;
    background: url(../images/index-search.png) center no-repeat;
    background-size: 100%;
    border: none;
    outline: none;
    float: right;
    margin-right: 4px;
    margin-top: 3px;
    cursor: pointer;
}

.jj-search {
    display: flex;
    width: 20%;
    font-size: 16px;
    color: white;
    justify-content: left;
    cursor: pointer;
    padding-left: 16px;
    margin-bottom: 10px;
}

.jj-search a {
    color: white;
    text-decoration: none;
}

.jj-search a:hover {
    color: #f90;
}

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: var(--radius);
    border-top-right-radius: var(--radius);
}

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- */

}

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

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

        url("fonts/FZCCH_GBK.svg#FZCCH_GBK") format("svg");
    /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}

.top-container {
    position: relative;
    height: 116px;
    background: url(../images/index-header.jpg) no-repeat left;
    background-size: cover;
}

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

/* 通用玻璃類 */
.glass {
    border-radius: var(--glass-radius);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) brightness(var(--glass-brightness));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) brightness(var(--glass-brightness));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.12) 100%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    transition: background 200ms ease, border-color 200ms ease, transform 160ms ease;
}

/* 內側細邊線 + 高光效果，靠偽元素增加層次 */
.glass::before,
.glass::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
}

.glass::before {
    /* 內側陰影，增加深度 */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 var(--glass-inner-shadow);
    mix-blend-mode: overlay;
    opacity: 0.9;
}

.glass::after {
    /* 輕微的頂部光照漸變 */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
    opacity: 0.7;
}

/* 首頁輪播圖 */
.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;
}



/* 確保 subpage 中的 carousel 也使用 100% 寬度 */
.carousel-container.subpage .main-image {
    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%;
}

/* 全屏容器樣式 */
.carousel-container.fullscreen-container {
    position: fixed;
    top: 50%;
    left: calc(50% - 10px);
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 800px;
    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;
}

/* 隱藏手機 Chrome 中央暫停 / ±10 秒按鈕 */
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-start-playback-button {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

video::-webkit-media-controls-overlay-enclosure {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 全屏模式下的指示器樣式 */
.carousel.fullscreen-active .dots,
.carousel.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 h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

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

.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: #f90;
    /* 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; */
}

.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); */
}




.thumbnail:hover {
    opacity: 0.8;
}

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

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

.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: #007AFF;
}

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

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

.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;
    }
}

/* -------優惠專區------ */
.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;
    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); /* 確保單個slide時不超出容器（減去左右margin） */
    box-sizing: border-box;
}

/* 指示器 */
.indicators {
    display: flex;
    justify-content: center;
    /* margin: 15px 0; */
}

.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;
}

.Site-Notice {
    width: 100%;
    margin-bottom: 10px;
    height: 80px;
    background: var(--fg);
    display: flex;
    position: relative;
    /* 與首頁 aside 輪播區上圓角同用 --radius（16px），底部左右對齊視覺 */
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    overflow: hidden;
}

/* 僅排行頁 topList：公告欄頂部左、右圓角（首頁 Site-Notice 不加此類名） */
.Site-Notice.Site-Notice--toplist {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

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

.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-containe {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.yhzq-top {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 16px;
    margin-top: 10px;
    background-color: #fff;
    height: 90px;
}

.yhzq-top h1 {
    font-family: "FZCCH_GBK";
    font-size: 36px;
    font-weight: 500;
    margin: 0;
    color: #333;
    /* text-shadow: 
    2px 0   #aaa,
   -2px 0   white,
    0   2px #999,
    0  -2px white,
    2px 2px white,
   -2px -2px #999,
    2px -2px #888,
   -2px 2px #999; */
    /* -webkit-text-stroke: 1px #eee;  */
}

.yhzq-top i {
    font-size: 28px;
    font-weight: bolder;
    color: #666;
    padding-left: 19px;
    padding-right: 18px;
    cursor: pointer;
    transition: transform 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.yhzq-top i.rotate {
    transform: rotate(-180deg);
}

.yhzq-top .more {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -16px;
    min-width: 90px;
    height: 40px;
    font-size: 16px;
    background: #555;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    color: var(--white);
    cursor: pointer;
    padding-right: 30px;
    padding-left: 16px;
}

.yhzq-top .more:hover {
    background-color: #f90;
}

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

.yhzq-list-containe {
    display: flex;
    /* justify-content: space-between; */
    gap: 14px;
    background-color: var(--white);
    flex-wrap: wrap;
    align-items: stretch;
    padding: 16px;
}

.yhzq-list {
    flex: 1 1 calc(33.333% - 14px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* box-shadow: 3px 5px 10px #999; */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    transition: all 0.3s ease;
}

/* 確保定點和外約在桌面端顯示三列 */
.yhzq-containe.dingdian .yhzq-list {
    flex: 0 0 calc((100% - 28px) / 3);  /* 固定寬度，不伸縮 */
    width: calc((100% - 28px) / 3);
}
.yhzq-list .nickname{
    font-size: 16px;
    color: #000;
    font-weight: bold;
}
.phb-list .nickname{
    font-size: 18px;
    color: #000;
    font-weight: bold;
}
.yhzq-list .code, .phb-list .code{
    color: #000;
    font-weight: bold;
}
.product-info .code{
    font-size: 14px;
    color: #999;
    font-weight: bold;
}
.detail-rating{
    color:#f90;
    font-family: 'avenir';
    font-size: 24px;
}
.detail-price{
    color: #f90;
    font-family: 'avenir';
    font-size: 18px;
    white-space: nowrap;
}
.yhzq-list:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.yhzq-list .img-containe {
    width: 100%;
    flex-shrink: 0;
    height: 258px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.vip-badge,
.no-image-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    left: auto;
    bottom: auto;
    margin: 0;
    z-index: 10;
    width: auto;
    box-sizing: border-box;
    min-width: 44px;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    background: rgba(42, 32, 8, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        0 6px 14px rgba(0, 0, 0, 0.2),
        0 2px 5px rgba(0, 0, 0, 0.12);
}

.img-containe .vip-badge,
.img-containe .no-image-badge,
.yhzq-list .img-containe .vip-badge,
.yhzq-list .img-containe .no-image-badge {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
}

.img-containe .vip-badge::before,
.img-containe .no-image-badge::before,
.img-containe .vip-badge::after,
.img-containe .no-image-badge::after,
.yhzq-list .img-containe .vip-badge::before,
.yhzq-list .img-containe .no-image-badge::before,
.yhzq-list .img-containe .vip-badge::after,
.yhzq-list .img-containe .no-image-badge::after {
    display: none;
}

/* 確保產品卡片中的 VIP 標籤正確顯示 */
.product-image .vip-badge,
.product-image .no-image-badge,
.product-card .product-image .vip-badge,
.product-card .product-image .no-image-badge {
    top: 12px;
    left: 12px;
    right: auto;
    bottom: auto;
    margin: 0;
    z-index: 10;
}

.img-containe > a.img-containe-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.img-containe img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 填滿容器並裁切 */
    object-position: center;
    /* 居中對齊 */
}

.img-containe > a.img-containe-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.yhzq-list .details-containe {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 240px;
    overflow: hidden;
    padding: 16px;
    font-size: 13px;
    color: #000;

}

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

.yhzq-list .details-containe > .bottom-icons {
    margin-top: auto;
    flex-shrink: 0;
    box-sizing: border-box;
    /* min-height: 40px;
    height: 40px; */
    align-items: center;
}

.details-containe ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.details-containe ul .pingfen{
    top:-10px;
    right: 0;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
    line-height: 1;
}
.details-containe ul .pingfen .pingfen-value,
#ranking-section .phb-list .details-containe .pingfen .pingfen-value {
    font-size: 24px;
    line-height: 1;
    color: #e53935;
    font-weight: 800;
}
.details-containe ul .pingfen .pingfen-unit,
#ranking-section .phb-list .details-containe .pingfen .pingfen-unit {
    font-size: 1em;
    line-height: 1;
    color: #64748b;
    font-weight: 600;
}
.details-containe .information {
    width: 100%;
    display: flex;
    align-items: center;
    height: 30px;
    min-width: 0;
    text-align: left;
}
.details-containe .information.first {
    height: auto;
    padding-bottom: 10px;
    flex-direction: column;
        
}
.details-containe .information .nickname {
    display: block;
    width: 100%;
    white-space: normal;
    margin-top: 4px;
    text-align: left;
}
.details-containe .information .code {
    display: block;
    width: 100%;
    white-space: normal;
    margin-top: 4px;
    text-align: left;
}
.information.short {
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.information span {
    color: #999;
}

/* 地區顯示省略號 - 所有頁面（除詳細頁） */
.details-containe .information:not(.first):not(.yj):not(.xj) span,
.information.short:not(.yj):not(.xj) span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
    vertical-align: middle;
}

/* 針對地區資訊的特殊處理 - flex佈局 */
.details-containe .information:not(.first):not(.yj):not(.xj) {
    overflow: hidden;
}

.details-containe .information:not(.first):not(.yj):not(.xj) span {
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

.information.short:not(.yj):not(.xj) span {
    max-width: calc(100% - 60px);
}

.information.yj span {
    display: block;
    line-height: 50px;
    font-size: 16px;
    text-decoration: line-through;
    font-weight: 800;
    color: #f00;
    width: 50%;
    height: 50px;
    font-family: 'avenir';
    margin-left: 5px;
    text-align: left;
}

.information.xj span {
    display: block;
    line-height: 50px;
    font-size: 16px;
    font-weight: 800;
    color: #5dc401;
    width: 50%;
    height: 50px;
    font-family: 'avenir';
    margin-left: 5px;
    text-align: left;
}

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

/* -------排行榜------- */
.phb-containe {
    width: 100%;
    height: auto;
    min-height: 497px;
    overflow: hidden;
    background: #fff url(../images/phb_bg.jpg) top center no-repeat;
    background-size: contain;
    position: relative;
    padding: 16px;
    padding-top: 300px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.phb-containe .more{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top:240px;
    right: -16px;
    min-width: 90px;
    height: 40px;
    font-size: 16px;
    background: #555;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    color: var(--white);
    cursor: pointer;
    padding-right: 30px;
    padding-left: 16px;
}
.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 #98c4d9;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: top;
    justify-content: space-between;
    padding: 14px;
    /*  overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch; */
    border-radius: 16px;
    margin-top: 20px;
}

/* 首頁排行榜：新線稿——左列大卡第 1 名，右列 2/3/4 三行；其下兩行各 3 卡（5–7、8–10） */
#ranking-section .index-phb-div {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
}

/* 排行榜單卡：評分浮於卡片右上角；底部互動條不換行、無捲動條 */
#ranking-section .phb-list {
    position: relative;
}

#ranking-section .phb-list .details-containe .pingfen {
    position: absolute;
    top: 6px;
    right: 6px;
    left: auto;
    bottom: auto;
    margin: 0;
    z-index: 22;
    /* 與定點卡片 .details-containe ul .pingfen 一致：父級字號供「分」1em 參照 */
    font-size: 18px;
    color: transparent;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
    line-height: 1;
}

/* 數字／「分」樣式與定點模組共用，見上方 .details-containe ul .pingfen .pingfen-value|unit */

/* 第 2–4 名：評分距頂/右（其餘名次仍用上方 3px） */
#ranking-section .phb-layout-rank-2 .details-containe .pingfen,
#ranking-section .phb-layout-rank-3 .details-containe .pingfen,
#ranking-section .phb-layout-rank-4 .details-containe .pingfen {
    top: 10px;
    right: 15px;
}

/* 排行榜圖片區：折扣標籤左下；VIP 圓角矩形置圖片左上 */
#ranking-section .phb-list .img-containe .product-badge {
    position: absolute;
    top: auto !important;
    right: auto !important;
    left: 6px;
    bottom: 12px;
    z-index: 12;
    margin: 0;
    min-width: 44px;
    height: 28px;
    max-width: calc(100% - 24px);
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.15;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFA000, #f90);
    color: #fff;
}

#ranking-section .phb-list .img-containe .vip-badge,
.phb-list .img-containe .no-image-badge {
    position: absolute;
    top: 6px !important;
    left: auto !important;
    right: 6px !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 13;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    /* min-width: 44px;
    height: 28px;
    min-height: 28px;
    max-height: 28px; */
    padding: 0 10px;
    border-radius: 999px;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(255, 230, 150, 0.96), rgba(232, 174, 45, 0.96));
    color: #5b3a00;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    backdrop-filter: none;
    animation: none !important;
    text-shadow: none;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

/* 定點 / 外約 / 今日上新列表：圖片區 VIP，圓角矩形置左上 */
#pickup-section .yhzq-list .img-containe .vip-badge,
#delivery-section .yhzq-list .img-containe .vip-badge,
.page-todaynew-listing .yhzq-list .img-containe .vip-badge {
    position: absolute;
    top: 6px !important;
    right: 6px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none;
    margin: 0 !important;
    z-index: 14;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 44px;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(255, 230, 150, 0.96), rgba(232, 174, 45, 0.96));
    color: #5b3a00;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    backdrop-filter: none;
    animation: none !important;
    text-shadow: none;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

/* yhzq 卡片：封面左上角「時間」角標（沿用首頁樣式） */
.yhzq-list .img-containe .yhzq-activity-time-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    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: 28px;
    min-height: 28px;
    max-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(126, 73, 176, 0.72);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 6px 14px rgba(0, 0, 0, 0.2),
        0 2px 5px rgba(0, 0, 0, 0.12);
}

/* 定點 / 外約 / 今日上新列表：折扣標籤在底部倒計時條上方、靠左（.yhzq-list 倒計時貼底全寬，約 44–52px 高） */
#pickup-section .yhzq-list .img-containe .product-badge,
#delivery-section .yhzq-list .img-containe .product-badge,
.page-todaynew-listing .yhzq-list .img-containe .product-badge {
    position: absolute;
    top: auto !important;
    right: auto !important;
    bottom: 52px;
    left: 6px;
    transform: none;
    margin: 0;
    z-index: 11;
    min-width: 44px;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    max-width: calc(100% - 20px);
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.15;
    font-weight: 800;
    text-align: left;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    background: linear-gradient(135deg, #FFA000, #f90);
    color: #fff;
}

#ranking-section .phb-list .bottom-icons {
    flex-wrap: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    margin-top: auto;
    padding: 15px 8px;
}

#ranking-section .phb-list .bottom-icons span {
    flex-shrink: 0;
    white-space: nowrap;
    color: #999;
    font-weight: 600;
    font-family: 'AVANTI', ui-sans-serif, system-ui, sans-serif;
    font-size: 13px;
    line-height: 18px;
    min-height: 15px;
    gap: 3px;
    /* align-items: center; */
    justify-content: flex-start;
    text-align: left;
}

#ranking-section .phb-feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* 行高由右列第 2–4 名內容撐開；第 1 名跨三行，卡高與右列三卡總高一致 */
    grid-template-rows: repeat(3, minmax(0, auto));
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
}

#ranking-section .phb-feature-grid > .phb-list {
    min-width: 0;
    margin: 0;
    width: 100%;
    max-width: none;
    flex: none;
    display: flex;
    min-height: 0;
}

/* 僅第 1 名：上圖下文：column；撐滿跨三行格高度，主圖吃掉剩餘高度 */
#ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-1 {
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

#ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-2,
#ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-3,
#ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-4 {
    flex-direction: row;
    align-items: stretch;
    flex-wrap: nowrap;
}

#ranking-section .phb-layout-rank-1 {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
}

#ranking-section .phb-layout-rank-1 .details-containe,
#ranking-section .phb-layout-rank-1 .bottom-icons {
    flex: 0 0 auto;
}

#ranking-section .phb-layout-rank-2 {
    grid-column: 2;
    grid-row: 1;
}

#ranking-section .phb-layout-rank-3 {
    grid-column: 2;
    grid-row: 2;
}

#ranking-section .phb-layout-rank-4 {
    grid-column: 2;
    grid-row: 3;
}

#ranking-section .phb-layout-rank-1 .img-containe {
    flex: 1 1 0;
    min-height: clamp(140px, 30vw, 280px);
    height: auto;
    max-height: none;
}

/* 第 2–4 名：圖左文右（主軸 row 已在 .phb-feature-grid > .phb-list.phb-layout-rank-*） */
#ranking-section .phb-layout-rank-2,
#ranking-section .phb-layout-rank-3,
#ranking-section .phb-layout-rank-4 {
    gap: 8px;
}

#ranking-section .phb-layout-rank-2 .img-containe,
#ranking-section .phb-layout-rank-3 .img-containe,
#ranking-section .phb-layout-rank-4 .img-containe {
    flex: 0 0 42%;
    width: 42%;
    max-width: 148px;
    min-width: 76px;
    min-height: 88px;
    height: 100%;
    align-self: stretch;
    max-height: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#ranking-section .phb-layout-rank-2 .img-containe img,
#ranking-section .phb-layout-rank-3 .img-containe img,
#ranking-section .phb-layout-rank-4 .img-containe img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 第 2–4 名右欄：參考線稿——上為暱稱/國籍/地區/價錢直向多行，底為評論條 */
#ranking-section .phb-layout-rank-2 .details-containe,
#ranking-section .phb-layout-rank-3 .details-containe,
#ranking-section .phb-layout-rank-4 .details-containe {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: static;
    padding: 6px 8px 8px;
    border-top-left-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#ranking-section .phb-layout-rank-2 .details-containe ul,
#ranking-section .phb-layout-rank-3 .details-containe ul,
#ranking-section .phb-layout-rank-4 .details-containe ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 0 1 auto;
    align-items: stretch;
    width: 100%;
    min-height: 0;
    gap: 0;
    margin-bottom: auto;
}

#ranking-section .phb-layout-rank-2 .details-containe ul > li.information,
#ranking-section .phb-layout-rank-3 .details-containe ul > li.information,
#ranking-section .phb-layout-rank-4 .details-containe ul > li.information {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

#ranking-section .phb-layout-rank-2 .details-containe ul > li.information.yj,
#ranking-section .phb-layout-rank-2 .details-containe ul > li.information.xj,
#ranking-section .phb-layout-rank-3 .details-containe ul > li.information.yj,
#ranking-section .phb-layout-rank-3 .details-containe ul > li.information.xj,
#ranking-section .phb-layout-rank-4 .details-containe ul > li.information.yj,
#ranking-section .phb-layout-rank-4 .details-containe ul > li.information.xj {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 排行榜內原價/現價：覆蓋全域 .information.yj/.xj span 的 height:50px，避免與其它 li 行高不一致 */
#ranking-section .phb-layout-rank-1 .details-containe .information.yj span,
#ranking-section .phb-layout-rank-1 .details-containe .information.xj span,
#ranking-section .phb-layout-rank-2 .details-containe .information.yj span,
#ranking-section .phb-layout-rank-2 .details-containe .information.xj span,
#ranking-section .phb-layout-rank-3 .details-containe .information.yj span,
#ranking-section .phb-layout-rank-3 .details-containe .information.xj span,
#ranking-section .phb-layout-rank-4 .details-containe .information.yj span,
#ranking-section .phb-layout-rank-4 .details-containe .information.xj span,
#ranking-section .phb-row-trio .phb-list .details-containe .information.yj span,
#ranking-section .phb-row-trio .phb-list .details-containe .information.xj span {
    line-height: 1.35 !important;
    height: auto !important;
    width: auto !important;
    max-width: 100%;
}

#ranking-section .phb-layout-rank-1 .details-containe li,
#ranking-section .phb-layout-rank-2 .details-containe li,
#ranking-section .phb-layout-rank-3 .details-containe li,
#ranking-section .phb-layout-rank-4 .details-containe li,
#ranking-section .phb-row-trio .phb-list .details-containe li {
    height: auto;
    min-height: 28px;
    padding: 5px 4px;
    border: none;
    border-bottom: 1px solid #ededed;
    background: transparent;
    border-radius: 0;
}

#ranking-section .phb-layout-rank-2 .details-containe ul > li.information:last-child,
#ranking-section .phb-layout-rank-3 .details-containe ul > li.information:last-child,
#ranking-section .phb-layout-rank-4 .details-containe ul > li.information:last-child {
    border-bottom: none;
}

#ranking-section .phb-layout-rank-2 .bottom-icons,
#ranking-section .phb-layout-rank-3 .bottom-icons,
#ranking-section .phb-layout-rank-4 .bottom-icons {
    margin-top: 0;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    /* min-height: 40px;
    height: 40px; */
    padding: 0 6px;
    margin-bottom: 0;
    background: transparent;
    border-radius: 0;
    justify-content: space-between;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    align-items: center;
    padding-top: 20px;
}

#ranking-section .phb-layout-rank-2 .bottom-icons span,
#ranking-section .phb-layout-rank-3 .bottom-icons span,
#ranking-section .phb-layout-rank-4 .bottom-icons span {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0;
}

#ranking-section .phb-layout-rank-2 .bottom-icons i,
#ranking-section .phb-layout-rank-3 .bottom-icons i,
#ranking-section .phb-layout-rank-4 .bottom-icons i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 15px;
    min-width: 15px;
    height: 15px;
    min-height: 15px;
    font-size: 13px;
    line-height: 1;
}

#ranking-section .phb-row-trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
}

#ranking-section .phb-row-trio .phb-list {
    width: 100%;
    max-width: none;
    flex: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

#ranking-section .phb-row-trio .phb-list .details-containe {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

#ranking-section .phb-row-trio .phb-list .details-containe > ul {
    flex: 1 1 auto;
    min-height: 0;
}

/* 第 5–10 名（兩行三卡）：縮小主圖；底部互動條壓縮為單行完整顯示 */
#ranking-section .phb-row-trio .phb-list .img-containe {
    flex-shrink: 0;
    height: clamp(96px, 18vw, 160px);
    min-height: clamp(96px, 18vw, 160px);
    max-height: clamp(96px, 18vw, 160px);
}

#ranking-section .phb-row-trio .phb-list .bottom-icons {
    justify-content: space-between;
    gap: 0 !important;
    column-gap: 0;
    row-gap: 0;
    padding: 0 6px;
    height: 40px;
    min-height: 40px;
    box-sizing: border-box;
    overflow-x: visible;
    overflow-y: hidden;
}

#ranking-section .phb-row-trio .phb-list .bottom-icons span {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding: 0;
    white-space: nowrap;
}

#ranking-section .phb-row-trio .phb-list .bottom-icons i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 15px;
    min-width: 15px;
    height: 15px;
    min-height: 15px;
    margin-right: 0;
    font-size: 13px;
}

.promotion-grid {
    width: 100%;
    margin-top: 12px;
    padding: 0;
    gap: 14px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    align-items: stretch;
}

.promotion-grid .promotion-card {
    flex: 0 0 calc((100% - 28px) / 3);
    width: calc((100% - 28px) / 3);
    max-width: calc((100% - 28px) / 3);
    padding: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(17, 24, 39, 0.06);
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

/* 首頁優惠／推薦專區：橫向滑動輪播（桌面每屏 3 卡、移動端每屏 2 卡）；推薦區須與優惠區同一套 gap／無 margin，否則與 yhzq.js 位移不一致會裁切末卡 */
#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 控制卡間距，寬度由 JS 與 gap 精確對齊容器，避免露出下一張左緣 */
    gap: 10px;
}

#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;
}

/* 末屏不足一頁時由 JS 插入的空占位（優惠／推薦專區輪播），與真實卡同寬、同圓角語意 */
#promotion-slider.slider-container.promotion-slider .slide.promotion-slide-placeholder,
#recommendation-slider.slider-container.promotion-slider .slide.promotion-slide-placeholder {
    flex: 0 0 auto;
    align-self: stretch;
    min-height: 1px;
    border-radius: 18px;
    background-color: #e8f4fc;
    border: 1px solid rgba(59, 130, 246, 0.1);
    box-shadow: none;
    pointer-events: none;
}

#promotion-slider .slide .yhzq-list.promotion-card,
#recommendation-slider .slide .yhzq-list.promotion-card,
.promotion-grid .yhzq-list.promotion-card {
    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;
    /* 輪播內卡片不在 .promotion-grid 下，需與網格卡一致：四角 18px（與頂部圖區 .promotion-card__media 圓角一致） */
    border: 1px solid rgba(17, 24, 39, 0.06);
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

#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;
}

.promotion-card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #f5f7fb;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

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

.promotion-card .product-badge {
    bottom: 40px;
    left: 12px;
    right:auto;
    /* min-width: 76px; */
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 統一加強折扣 / VIP 標籤陰影（覆蓋排行榜、定點、外約與優惠卡） */
.product-badge {
    background: linear-gradient(90deg, rgb(255, 196, 64) 0%, rgb(255, 160, 24) 52%, rgb(236, 113, 0) 100%) !important;
    color: #fff8ee !important;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.42) inset,
        0 6px 16px rgba(0, 0, 0, 0.22),
        0 2px 6px rgba(0, 0, 0, 0.12),
        0 6px 14px rgba(249, 115, 22, 0.35);
    text-shadow: 0 1px 1px rgba(124, 56, 0, 0.45);
}

.vip-badge,
.vip-badge {
    background: linear-gradient(90deg, rgb(141, 215, 3) 0%, rgb(119, 181, 3) 52%, rgb(95, 144, 2) 100%) !important;
    color: #f7ffe8 !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.45) inset,
        0 6px 16px rgba(0, 0, 0, 0.22),
        0 2px 6px rgba(0, 0, 0, 0.12) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12) !important;
}

.vip-badge {
    position: absolute;
    top: 6px;
    right: 4px;
    z-index: 11;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* min-width: 76px; */
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: linear-gradient(135deg, rgba(255, 230, 150, 0.96), rgba(232, 174, 45, 0.96));
    color: #5b3a00;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.45) inset,
        0 6px 16px rgba(0, 0, 0, 0.22),
        0 2px 6px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}

.promotion-card .countdown-timer-overlay {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    border-radius: 999px;
    padding: 5px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(15, 23, 42, 0.62);
}

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

.promotion-card .time-unit-mini {
    padding: 3px 5px;
}

.promotion-card .time-value-mini {
    font-size: 12px;
}

.promotion-card .time-label-mini {
    font-size: 10px;
}

.promotion-card .time-separator-mini {
    font-size: 12px;
}

.promotion-card__details {
    padding: 14px 16px 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.promotion-card .details-containe > ul,
#promotion-slider .promotion-card .details-containe > ul {
    flex: 1 1 auto;
    min-height: 0;
}

.promotion-grid .promotion-card .details-containe ul,
#promotion-slider .promotion-card .details-containe ul {
    gap: 4px 0;
}

.promotion-grid .promotion-card .details-containe .information,
#promotion-slider .promotion-card .details-containe .information {
    height: auto;
    min-height: 24px;
    line-height: 1.4;
}

.promotion-grid .promotion-card .details-containe .information.first,
#promotion-slider .promotion-card .details-containe .information.first {
    padding-bottom: 4px;
}

.promotion-grid .promotion-card .details-containe .information.first .nickname,
#promotion-slider .promotion-card .details-containe .information.first .nickname {
    font-size: 18px;
    line-height: 1.2;
}

/* .promotion-grid .promotion-card .details-containe .information.promotion-meta,
#promotion-slider .promotion-card .details-containe .information.promotion-meta {
    color: #6b7280;
    font-weight: 600;
}

.promotion-grid .promotion-card .details-containe .information.promotion-meta span,
#promotion-slider .promotion-card .details-containe .information.promotion-meta span {
    color: #4b5563;
} */

.promotion-grid .promotion-card .details-containe .information.yj,
.promotion-grid .promotion-card .details-containe .information.xj,
#promotion-slider .promotion-card .details-containe .information.yj,
#promotion-slider .promotion-card .details-containe .information.xj {
    min-height: 32px;
}

.promotion-grid .promotion-card .details-containe .information.yj span,
.promotion-grid .promotion-card .details-containe .information.xj span,
#promotion-slider .promotion-card .details-containe .information.yj span,
#promotion-slider .promotion-card .details-containe .information.xj span {
    height: auto;
    line-height: 1.25;
    font-size: 15px;
}

.promotion-grid .promotion-card .details-containe .information.promotion-price--empty span,
#promotion-slider .promotion-card .details-containe .information.promotion-price--empty span {
    color: #64748b;
    font-size: 14px;
}

/* 優惠專區統計列：與定點卡 .bottom-icons.dingdian 相同字色／字重／圖示盒；僅保留優惠卡分隔線 */
.promotion-card__stats {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 15px !important;
    /* min-height: 40px;
    height: 40px; */
    box-sizing: border-box;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    align-items: center;
}

.promotion-card__stats span {
    display: inline-flex;
    /* align-items: center; */
    justify-content: flex-start;
    gap: 3px;
    color: #999;
    font-weight: 600;
    font-family: 'AVANTI', ui-sans-serif, system-ui, sans-serif;
    font-size: 13px;
    line-height: 15px;
    min-height: 15px;
    text-align: left;
}

.promotion-card__stats span i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 15px;
    min-width: 15px;
    height: 15px;
    min-height: 15px;
    margin-right: 0;
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
}

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

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

.phb-list .details-containe {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    font-size: 14px;
    background-color: white;
    position: relative;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding:0 6px;
}

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

.phb-list .details-containe > .bottom-icons {
    margin-top: auto;
    flex-shrink: 0;
    box-sizing: border-box;
    /* min-height: 40px;
    height: 40px; */
    align-items: center;
}

/* .phb-list .details-containe ul{
    display: flex;
    gap: 1px;
    background-color: white;
    justify-content: space-between;
    flex-direction: column;
} */
.phb-list .details-containe li {
    border: 1px solid #f2eeee;
    height: 40px;
    padding: 12px;
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

.yhzq-list .jq span {
    color: #f90;
    font-weight: bold;
    font-size: 16px;
    font-family: 'avenir';
}

.phb-list .jq span {
    color: #f90;
    font-weight: bold;
    font-size: 16px;
    font-family: 'avenir';
}

/* PC：排行榜卡片內原價、現價兩個 li 各佔 50% 同一行；其餘資訊行仍滿寬，short 仍兩欄 */
@media (min-width: 768px) {
    .phb-list .details-containe ul {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .phb-list .details-containe ul > li.information:not(.short):not(.yj):not(.xj):not(.jq) {
        flex: 1 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .phb-list .details-containe ul > li.information.jq {
        flex: 1 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .phb-list .details-containe ul > li.information.short {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
        box-sizing: border-box;
    }

    .phb-list .details-containe ul > li.information.yj,
    .phb-list .details-containe ul > li.information.xj {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .phb-list .details-containe ul > li.information.yj span,
    .phb-list .details-containe ul > li.information.xj span {
        width: auto !important;
        max-width: 100%;
        display: inline;
        white-space: nowrap;
        vertical-align: bottom;
        height: auto !important;
        line-height: 1.3 !important;
    }

    /* PC：優惠專區卡片——原價、現價各佔一整行（兩行顯示）；僅一行優惠價時仍滿寬 */
    .promotion-grid .promotion-card .details-containe ul,
    #promotion-slider .promotion-card .details-containe ul {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .promotion-grid .promotion-card .details-containe ul > li.information:not(.short):not(.yj):not(.xj):not(.jq),
    #promotion-slider .promotion-card .details-containe ul > li.information:not(.short):not(.yj):not(.xj):not(.jq) {
        flex: 1 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .promotion-grid .promotion-card .details-containe ul:not(:has(> li.information.yj)) > li.information.xj,
    #promotion-slider .promotion-card .details-containe ul:not(:has(> li.information.yj)) > li.information.xj {
        flex: 1 0 100%;
        width: 100%;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .promotion-grid .promotion-card .details-containe ul:has(> li.information.yj) > li.information.yj,
    .promotion-grid .promotion-card .details-containe ul:has(> li.information.yj) > li.information.xj,
    #promotion-slider .promotion-card .details-containe ul:has(> li.information.yj) > li.information.yj,
    #promotion-slider .promotion-card .details-containe ul:has(> li.information.yj) > li.information.xj {
        flex: 1 0 100%;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .promotion-grid .promotion-card .details-containe ul:has(> li.information.yj) > li.information.yj span,
    .promotion-grid .promotion-card .details-containe ul:has(> li.information.yj) > li.information.xj span,
    #promotion-slider .promotion-card .details-containe ul:has(> li.information.yj) > li.information.yj span,
    #promotion-slider .promotion-card .details-containe ul:has(> li.information.yj) > li.information.xj span {
        width: auto !important;
        max-width: 100%;
        display: inline;
        white-space: nowrap;
        vertical-align: bottom;
        height: auto !important;
        line-height: 1.3 !important;
    }

    .promotion-grid .promotion-card .details-containe ul:not(:has(> li.information.yj)) > li.information.xj span,
    #promotion-slider .promotion-card .details-containe ul:not(:has(> li.information.yj)) > li.information.xj span {
        width: auto !important;
        max-width: 100%;
        display: inline;
        white-space: nowrap;
        height: auto !important;
        line-height: 1.3 !important;
    }
}

.leaderboard-empty {
    width: 100%;
    padding: 32px 16px;
    text-align: center;
    color: #9a9a9a;
    font-size: 16px;
    letter-spacing: 1px;
    background: #f8fafc;
    border-radius: 12px;
}

.top-bq {
    width: 60px;
    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;
}

.detail-item {
    display: flex;
    align-items: center;
    color: #999;
    margin-bottom: 6px;
    font-size: 14px;
    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: #3498db;
    font-size: 0.85rem;
}
.pingfen {
    position: absolute;
    right: 20px;
    top: -60px;
    font-size: 30px;
    font-weight: bolder;
    color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
    line-height: 1;

    /* 多方向 text-shadow 疊加，形成描邊（數字見 .pingfen-value） */
    z-index: 20;
}

.pingfen .pingfen-value {
    font-family: "avenir";
    font-size: 40px;
    line-height: 1;
    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;
}

.pingfen .pingfen-unit {
    font-size: 1em;
    line-height: 1;
    font-weight: bolder;
    color: #e53935;
}
.detail-item.sub-pingfen{
    position: absolute;
    right: 20px;
    top: 8px;
    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: #f90;
}
.detail-item.sub-price .original-price{
    font-weight: normal;
    color: #999;
    text-decoration: line-through;
}

/* 收藏按鈕樣式 */
.wishlist-btn.favorited i {
    color: #ffd700;
}
/* .wishlist-btn:hover {
    transform: scale(1.1);
} */

/* 收藏動畫 */
/* 收藏動畫 - 已移除 */

/* 數字變化動畫 */
.number-change-animation {
    animation: numberChange 0.3s ease;
}
@keyframes numberChange {
    0% { transform: scale(1); color: inherit; }
    50% { transform: scale(1.3); color: #ffd700; }
    100% { transform: scale(1); color: inherit; }
}

.bottom-icons {
    display: flex;
    width: 100%;
    /* height: 40px;
    min-height: 40px; */
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 10px;
    margin-top: 5px;
}

.bottom-icons.dingdian {
    padding-left: 0;
    padding-top: 15px;
    margin-top: auto;
}

.bottom-icons span {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 15px;
    /* align-items: center; */
    justify-content: flex-start;
    align-self: center;
    gap: 3px;
    padding: 0 13px;
    color: #999;
    font-weight: 600;
    font-size: 13px;
    line-height: 18px;
    font-family: 'AVANTI';
    text-align: left;
}

.bottom-icons i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 15px;
    min-width: 15px;
    height: 15px;
    min-height: 15px;
    margin-right: 0;
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
}

.bottom-icons.dingdian span {
    padding: 0;
}

/* 背景圖標與數字：圖 15px + 與文字間距 3px */
.bottom-icons span.i-sc,
.bottom-icons span.i-zan,
.bottom-icons span.i-pl {
    gap: 0;
    padding-left: 18px;
    min-height: 15px;
    line-height: 15px;
    background-repeat: no-repeat;
    background-position: left center;
    justify-content: flex-start;
    text-align: left;
}

.bottom-icons span.i-sc {
    background-image: url(../images/i-sc.png);
    background-size: 15px 15px;
}

.bottom-icons span.i-zan {
    background-image: url(../images/i-zan.png);
    background-size: 15px 15px;
}

.bottom-icons span.i-pl {
    background-image: url(../images/i-pl.png);
    background-size: 15px 15px;
}

/* -------底部導航------ */
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;
}

footer div {
    flex: 1;
    height: 100%;
    font-size: 18px;
    color: #666;
    padding-bottom: 16px;
}

footer div a {
    color: #666;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: end;
    justify-content: center;
    text-align: center;
}

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

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

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

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


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

.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: #f90;
}

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

.foot-kf {
    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: #f90;
    font-weight: bold;
}

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

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

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

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

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

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

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

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

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

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

/* ----選擇城市---- */
.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(97, 209, 251), rgb(1, 184, 252));
    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, #f90, #faa72f);
    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: #007AFF;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(0, 122, 255, 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;
}

#agreementBox.agreement-box, .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;
}

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

#agreementBox .warnning-logo img, .warnning-logo img {
    width: 100%;
    height: auto;
    display: block;
}

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

#agreementBox .agreement-title, .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;
}

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

#agreementBox .agreement-content, .agreement-content {
    color: #555;
    font-size: 16px;
    font-weight: 400;
    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;
}

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

/* 18 禁彈窗：移動端高度與內容區流體適配 */
@media (max-width: 768px) {
    #agreementBox.agreement-box, .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;
    }

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

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

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

    #agreementBox .agreement-content, .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);
    }

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

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

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

    #agreementBox .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) {
    #agreementBox.agreement-box, .agreement-box {
        width: 94vw;
        aspect-ratio: var(--agreement-box-ratio);
        max-height: 92vh;
        padding: clamp(12px, 3vw, 18px);
    }

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

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

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

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

#agreementBox .checkbox-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: center;
    cursor: pointer;
    color: #333;
    font-size: 15px;
    font-weight: 400;
}

#agreementBox .checkbox-container label {
    cursor: pointer;
    color: #333;
    font-size: inherit;
    font-weight: 400;
}

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

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

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

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

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

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

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

/* 18 禁彈窗按鈕：使用更高選擇器優先級，避免被全域 .btn 覆蓋 */
#agreementBox .buttons .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) {
    #agreementBox .buttons, .agreement-box .buttons {
        gap: clamp(8px, 2.4vw, 14px);
    }

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

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

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

.hidden {
    display: none;
}

/* main{
    height: calc(100vh - 196px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; 
} */
.main-content {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.main-content.show {
    opacity: 1;
}

.feature {
    display: flex;
    margin: 25px 0;
    text-align: left;
    align-items: center;
}

.feature-icon {
    font-size: 2.5rem;
    margin-right: 20px;
    color: #3498db;
}

.feature-content h3 {
    color: #2c3e50;
    margin-bottom: 8px;
}

.general-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px;
    background: var(--fg);
    color: #97c3d9;
    font-size: 1.3rem;
}

.general-loading span {
    padding-right: 20px;
}

/* 排行榜 */
.sub-section {
    /* background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); */
    background-color: #fff;
    padding: 20px;
    border-radius: 18px;
    min-height: calc(100vh - 307px);
}

.details-section {
    background-color: #fff;
    padding: 0;
}

.sub-header {
    text-align: center;
    margin-bottom: 2rem;
}

.sub-header-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

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

.sub-header h1 {
    font-size: 1.8rem;
    /* background: linear-gradient(90deg, #ff8a00, #e52e71); */
    -webkit-background-clip: text;
    background-clip: text;
    color: #333;
    /* text-shadow: 0 0 10px rgba(229, 46, 113, 0.5); */
}
.range-tabs a{
    color:#333;
    font-size: 1.8rem;
    border-right: 2px solid #ccc;
    padding: 0 20px;
    font-weight: 600;
}
.range-tabs a:last-child{
    border-right: none;
}
.sub-header i {
    font-size: 2.0rem;
    color: transparent;
    background: linear-gradient(90deg, #ff8a00, #e52e71);
    -webkit-background-clip: text;
    background-clip: text;
}

.sub-header span {
    color: #f90;
}

.sub-header .subtitle {
    color: #a9a9a9;
    margin-bottom: 1.5rem;
}

.sub-container {
    width: 100%;
    margin-bottom: 25px;
    /* background: #fff; */
}

.tabs {
    display: flex;
    /* background: #e8f3f7; */
    background: #b4f3fc;
    border-radius: 50px;
    padding: 5px;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    color: #69888d;
    font-weight: 600;
}

.tab {
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
    z-index: 1;
    width: 25%;
    text-align: center;
    font-weight: 600;
    color: #69888d;
}

.tab.active {
    color: #000;
    background: rgba(255, 255, 255, .6);
}

/* .tab-bg {
    position: absolute;
    top: 5px;
    left: 6px;
    width: 25%;
    height: calc(100% - 10px);
    background: rgba(255, 255, 255, .6);
    border-radius: 50px;
    transition: all 0.3s ease;
    z-index: 0;
}

.tab[data-tab="weekly"].active~.tab-bg {
    transform: translateX(calc(100% - 6px));
}

.tab[data-tab="monthly"].active~.tab-bg {
    transform: translateX(calc(200% - 12px));
} */

.leaderboard {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.leaderboard-header {
    display: grid;
    grid-template-columns: 80px 1fr 100px 100px 100px 100px 100px;
    padding: 15px 20px;
    background: #e6f3fb;
    font-weight: 600;
    color: #333;
}

.leaderboard-item {
    display: grid;
    grid-template-columns: 80px 1fr 100px 100px 100px 100px 100px;
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.leaderboard-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(120, 200, 240, 0.1), transparent);
    transition: left 0.7s ease;
}

.leaderboard-item:hover::before {
    left: 100%;
}

.leaderboard-item:hover {
    background: rgba(215, 240, 250, 0.16);
    transform: translateY(-2px);
}

.leaderboard-item:active {
    transform: scale(0.99);
    background: rgba(50, 150, 210, 0.24);
}

.rank {
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.top-rank {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #bbb;
    font-weight: bold;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-family: "avenir";
    font-size: 18px;
    background: linear-gradient(135deg, #eee, #ddd);
    /* box-shadow: 0 0 15px rgba(160, 160, 160, 0.5); 
    background: linear-gradient(135deg, #a0a0a0, #707070);*/
}

tr:first-child .top-rank {
    /* background: linear-gradient(135deg, #fc6bc2, #ff0099);
    box-shadow: 0 0 10px rgba(180, 5, 115, 0.5); */
    background: linear-gradient(135deg, #a899f8, #7e09d8);
    box-shadow: 0 0 10px rgba(80, 65, 130, 0.5);
    color:#fff;
}

tr:nth-child(2) .top-rank {
    /* background: linear-gradient(135deg, #c0fb53, #8dd703);
    box-shadow: 0 0 10px rgba(95, 135, 20, 0.5); */
    background: linear-gradient(135deg, #fc7844, #ff4800);
    box-shadow: 0 0 10px rgba(205, 127, 50, 0.5);
    color:#fff;
}

tr:nth-child(3) .top-rank {
    /* background: linear-gradient(135deg, #fc7844, #ff4800);
    box-shadow: 0 0 10px rgba(205, 127, 50, 0.5); */
    background: linear-gradient(135deg, #fc6bc2, #ff0099);
    box-shadow: 0 0 10px rgba(180, 5, 115, 0.5);
    color:#fff;
}

/* tr:nth-child(4) .top-rank {
    background: linear-gradient(135deg, #55c1ec, #3aa3cd);
    box-shadow: 0 0 10px rgba(35, 100, 125, 0.5);
  }
  tr:nth-child(5) .top-rank {
    background: linear-gradient(135deg, #a899f8, #8b75fd);
    box-shadow: 0 0 10px rgba(80, 65, 130, 0.5);
  }
  tr:nth-child(6) .top-rank {
    background: linear-gradient(135deg, #fbe26f, #ffd200);
    box-shadow: 0 0 10px rgba(100, 90, 40, 0.5);
  }
  tr:nth-child(7) .top-rank {
    background: linear-gradient(135deg, #a0dde9, #35a2b8);
    box-shadow: 0 0 10px rgba(40, 80, 90, 0.5);
  }
  tr:nth-child(8) .top-rank {
    background: linear-gradient(135deg, #96bb4f, #659804);
    box-shadow: 0 0 10px rgba(205, 127, 50, 0.5);
  }
  tr:nth-child(9) .top-rank {
    background: linear-gradient(135deg, #eb6156, #e43123);
    box-shadow: 0 0 10px rgba(205, 127, 50, 0.5);
  }
  tr:nth-child(10) .top-rank {
    background: linear-gradient(135deg, #b8e8fa, #75d8fd);
    box-shadow: 0 0 10px rgba(50, 110, 130, 0.5);
  } */
.player {
    display: flex;
    align-items: center;
}

.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
    border: 3px solid rgba(85, 200, 250, 0.1);
    transition: transform 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    position: relative;
}

.leaderboard-item:hover .avatar {
    transform: scale(1.1);
}

.avatar > a.img-containe-link {
    display: block;
    width: 100%;
    height: 100%;
}

.avatar img,
.avatar > a.img-containe-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.phb-vip{
    position: absolute;
    top: 0;
    right: 0;
    background-color: #65bd07;
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 20px;
}
.player-info {
    display: flex;
    flex-direction: column;
    text-align: left;
    font-size: 13px;
    position: relative;
}

.name {
    font-weight: 600;
    margin-bottom: 4px;

}

.level {
    color: #a9a9a9;
    font-size: 12px;
}
.meta{
    font-size: 12px;  
}
.points-table .player {
    min-width: 0;
    position: relative;
}

.points-table .player-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name vip"
        "meta meta";
    align-items: center;
    column-gap: 6px;
    row-gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.points-table .player-info .phb-vip {
    grid-area: vip;
    position: absolute;
    top: 0;
    right: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 999px;
}

.points-table .player-info .name {
    grid-area: name;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.points-table .player-info .meta {
    grid-area: meta;
    width: 100%;
}
.general-detail{
    white-space: nowrap;
}
.general-detail svg{
    width:24px;
    height:24px;
    color:#65bd07;
}
.general-detail  .general-icons {
    display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 0 10px;
    margin-top: 5px;
    font-size: 14px;
    font-family: 'AVANTI';
    font-weight: 600;
}
.general-icons .lar{
    margin-left: 10px;
}
.points-table .stat {
    font-weight: 700;
    text-align: center;
    transition: transform 0.3s ease;
    font-family: 'AVANTI';
    font-size: 24px;
    color: #bbb;
}
.points-table th{
    white-space: nowrap;
}
.leaderboard-item:hover .stat {
    transform: translateY(-2px);
}

.points-table tr:nth-child(1) .attack {
    color: #7e09d8;
}

.points-table tr:nth-child(2) .attack {
    color: #ff4800;
}

.points-table tr:nth-child(3) .attack {
    color: #ff0099;
}

.defense {
    color: #2ed573;
}

.overall {
    color: #ffa502;
}

.skill {
    color: #1e90ff;
}

.popularity {
    color: #ff6b81;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.progress-container {
    width: 80%;
    position: relative;
}

.progress-bar {
    height: 8px;
    /* background: rgba(255, 255, 255, 0.1); */
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress {
    height: 100%;
    border-radius: 4px;
    width: 0;
    position: relative;
    transition: width 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.progress.normal {
    /* background: linear-gradient(90deg, #1e90ff, #4b9fff); */
    background: linear-gradient(90deg, #eee, #ccc);

}

.progress.hot {
    background: linear-gradient(90deg, #ffa502, #ff8a00);
}

.progress.very-hot {
    background: linear-gradient(90deg, #ff4757, #ff0000);
}

.progress.explode {
    background: linear-gradient(90deg, #ff4757, #ff0000);
    animation: pulse 2s infinite;
}

.progress-value {
    position: absolute;
    top: -20px;
    right: 0;
    font-size: 0.75rem;
    font-weight: 600;
}

.hot-text {
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 5px;
    opacity: 0;
    transition: opacity 0.5s ease;

}

.hot-text.normal {
    color: #999;
}

.hot-text.hot {
    color: #ffa502;
}

.hot-text.very-hot {
    color: #ff4757;
}

.hot-text.explode {
    color: #ff0000;
    animation: blink 1s infinite;
}

.trend-indicator {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
}

.trend-text {
    opacity: 1;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}

.trend-text.up {
    color: #188038;
}

.trend-text.down {
    color: #d93025;
}

/* 排行表：外層 .stat 有預設灰色字色，需提高優先級覆寫趨勢文案 */
.points-table .trend-text.up,
.points-table .trend-text.up span {
    color: #188038 !important;
    font-size: 0.8125rem;
}

.points-table .trend-text.down,
.points-table .trend-text.down span {
    color: #d93025 !important;
    font-size: 0.8125rem;
}

.points-table .trend-text.new,
.points-table .trend-text.new span,
.points-table .trend-text.flat,
.points-table .trend-text.flat span {
    font-size: 0.8125rem;
}

/* 排行表「趨勢」欄：主文案不折行（過長省略） */
.points-table .trend-indicator .trend-text {
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.points-table .trend-indicator .trend-detail {
    font-size: 0.6875rem;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trend-text.new {
    color: #ff8c00;
}

.trend-text.flat {
    color: #666;
}

.trend-detail {
    position: static;
    font-size: 0.78rem;
    color: #8a8a8a;
    line-height: 1.2;
}

/* 分頁控制元件 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    /* margin-top: 30px;
    margin-bottom: 30px; */
    grid-column: 1 / -1;
    /* 跨越所有grid列 */
    width: 100%;
    background: #fff;
    padding: 20px;
}

/* 詳情評論：無翻頁按鈕時不占版面（與 moban-2 對齊） */
#reviewPagination:empty {
    display: none !important;
    padding: 0;
    margin: 0;
}

.page-btn {
    width: 40px;
    height: 40px;
    min-width: 30px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    border-radius: 8px;
    background: white;
    color: #999;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-btn.active {
    /* background: #f90; */
    background: linear-gradient(90deg, #fbbd39, #ff8a00);
    color: white;
    border-color: #faae52;
}

.page-btn:hover:not(.active):not([disabled]) {
    background-color: #f1f8fc;
}

.page-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: #f5f5f5;
    border-color: #ddd;
    color: #ccc;
}

.page-ellipsis {
    padding: 0;
    color: #888;
}

/* 移動端：卡片列表頁等共用翻頁條，按鈕固定 30×30 */
@media (max-width: 767px) {
    .pagination .page-btn,
    .pagination a.page-btn,
    .pagination span.page-btn,
    .pagination button.page-btn {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
        padding: 0;
        box-sizing: border-box;
    }
}

.tab-content {
    display: none;
    animation: fadeIn 0.5s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* ===============================
    表格樣式
=============================== */
.points-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    font-size: 14px;
    margin-bottom: 60px;
}

.points-table th {
    padding: 8px;
    text-align: center;
    height: 45px;
}

.points-table td {
    padding: 20px;
    text-align: center;
    height: 40px;
}

.points-table th {
    /* background: #e6f3fb; */
    background: #eaf7ff;
    border-bottom: 1px solid #dde9f1;
    color: #333;
    position: relative;
    font-size: 16px;
    font-weight: normal;
}

.points-table th.Order {
    width: 10%;
}

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

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

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

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

.points-table th::before {
    content: "";
    position: absolute;
    top: 25%;
    right: 1px;
    height: 60%;
    border-right: 1px solid #fff;
}

.points-table th::after {
    content: "";
    position: absolute;
    top: 25%;
    right: 0;
    height: 60%;
    border-right: 1px solid #c3d6e2;
}

.points-table th:nth-child(1) {
    border-top-left-radius: 12px;
}

.points-table th:last-child {
    border-top-right-radius: 12px;
}

.points-table th:last-child::before,
.points-table th:last-child::after {
    border-right: 0;
}

.points-table tr {
    /* border: 1px solid #f0ecec; */
    border-bottom: 1px solid #f0ecec;
}

.points-table tr:last-child {
    border-bottom: 0;
}

.points-table td:last-child {
    text-align: left;
    border-right: 0;
}

.points-table td:first-child {
    border-left: 0;
}

.points-table .bottom-icons {
    gap: 16px;
    padding-left: 0;
    margin-top: 0;
    font-size: 13px;
    font-family: 'AVANTI';
}

.points-table span.i-sc {
    background: url(../images/i-sc.png) no-repeat left;
    background-size: 15px 15px;
}

.points-table span.i-zan {
    background: url(../images/i-zan.png) no-repeat left;
    background-size: 15px 15px;
}

.points-table span.i-pl {
    background: url(../images/i-pl.png) no-repeat left;
    background-size: 15px 15px;
}

.points-table .bottom-icons span {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 18px;
    font-size: 13px;
    line-height: 15px;
    min-height: 15px;
    gap: 3px;
    text-align: left;
}

/*
 * 排行頁 PC（≥541px，與 max-width:540px 隱藏「綜合」欄一致）：
 * 「綜合」列與首頁 index .bottom-icons.dingdian 圖示+數字一致。
 * 使用 .general-detail 提高優先級，並以 !important 壓過 .points-table .bottom-icons span 的背景圖留白。
 */
@media (min-width: 541px) {
    .points-table .general-detail .bottom-icons.dingdian {
        display: flex;
        width: 100%;
        min-height: 40px;
        box-sizing: border-box;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
        padding: 0;
        margin-top: 0;
        height: auto;
        font-family: 'AVANTI', sans-serif;
    }

    .points-table .general-detail .bottom-icons.dingdian span {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 3px;
        padding: 0 !important;
        padding-left: 0 !important;
        margin: 0;
        color: #999;
        font-weight: 600;
        font-size: 13px;
        line-height: 18px;
        min-height: 15px;
        font-family: 'AVANTI', sans-serif;
        text-align: left;
    }

    .points-table .general-detail .bottom-icons.dingdian span i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 15px;
        min-width: 15px;
        height: 15px;
        min-height: 15px;
        margin: 0;
        font-size: 13px;
        line-height: 1;
        flex-shrink: 0;
    }
}



/* 通用遮罩 */
.global-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.global-overlay.active {
    visibility: visible;
    opacity: 1;
}
#caipin-card-modal-overlay{
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
}
#caipin-card-modal-overlay .global-modal {
    max-width: 420px;

}

.global-modal {
    width: 90%;
    max-width: 618px;
    padding: 25px;
    background-color: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(30px) scale(0.95);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.global-overlay.active .global-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: 1px solid #eee;
    margin-bottom: 25px;
    min-height: 48px;
}

.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: -10px;
    right: 0;
}

.close-modal:hover {
    color: #ff4757;
    background-color: #f1f1f1;
}

.modal-body {
    margin-bottom: 25px;
    color: #666;
    line-height: 1.6;
    font-size: 16px;
}

#login-prompt-modal-overlay .global-modal {
    max-width: 420px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.modal-btn.gray {
    background-color: #f1f1f1;
    color: #666;
}

.modal-btn.gray:hover {
    border-color: #333;
    box-shadow: 0 0 0 1px rgba(100, 100, 100, 0.3);
    background-color: #fff;
}

.modal-btn.blue {
    background-color: #3498db !important;
    color: white;
}

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

.modal-btn.red {
    background-color: #ff4757;
    color: #fff;
}

/* 使用者資訊卡片模態框 */
.message-user-card {
    text-align: center;
}

.message-user-card-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 15px;
    border: 3px solid #f0f0f0;
}

.message-user-card-name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #2a6b8b;
}

.message-user-card-role {
    color: #666;
    margin-bottom: 15px;
    font-size: 14px;
}

.message-user-card-info {
    text-align: left;
    margin-bottom: 15px;
    font-size: 13px;
}

/* .message-user-card-info div {
    display: flex;
    color: #2a6b8b;
    font-weight: 600;
    padding: 0;
} */

.message-user-card-info span {
    color: #666;
    font-weight: 500;
    margin-left: auto;
}

.global-modal.top-list {
    height: 90vh;
    max-height: 743px;
    padding: 0;
    position: relative;
}

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

.modal-header-img {
    position: relative;
    width: 100%;
    max-height: 370px;
    overflow: hidden;
}

.modal-header-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.global-modal.top-list:hover .modal-header-img img {
    transform: scale(1.05);
}

.featured-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(90deg, #fbbd39, #ff8a00);
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 700;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.model-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 20px;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.global-modal.top-list:hover .model-overlay {
    opacity: 1;
}

/* 行動按鈕 */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.global-modal.top-list .btn {
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.global-modal.top-list .btn-primary {
    background: linear-gradient(45deg, #3498db, #5db0e8);
    color: #fff;
}

.global-modal.top-list .btn-secondary {
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid #3498db;
    color: #01243c;
}

.global-modal.top-list .btn-secondary i {
    color: #ff4902;
}

.global-modal.top-list .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.global-modal.top-list .bottom-icons {
    position: absolute;
    top: 10px;
    left: 140px;
    color: #fff;
    max-width: 40%;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    font-size: 13px;
}

.global-modal.top-list .bottom-icons span {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 13px;
    line-height: 15px;
    min-height: 15px;
    gap: 3px;
    text-align: left;
}

.global-modal.top-list .bottom-icons i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 15px;
    min-width: 15px;
    height: 15px;
    min-height: 15px;
    font-size: 13px;
    line-height: 1;
}

.model-info {
    padding: 0 20px 40px 20px;
    position: relative;
}

.info-row1 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    /* 左對齊 */
    align-items: center;
    /* 垂直置中 */
    gap: 10px;
    /* 元素間距 */
    align-items: center;
    margin-bottom: 15px;
}

.model-name {
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.caipin-code {
    font-size: 13px;
}

.model-origin {
    color: #ff8c02;
    font-weight: 600;
    font-size: 1.1rem;
}

.mpdel-price {
    position: absolute;
    top: 10px;
    right: 20px;
    font-weight: 600;
    font-size: 1.1rem;
    font-family: 'AVANTI';
    color: #ff8c02;
}

.mpdel-price span {
    color: #000;
    margin-right: 8px;
}

.model-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    text-align: center;
}



.model-stats .stat-value {
    display: flex;
    font-size: 1.3rem;
    font-weight: 700;
    color: #ff8c02;
    height: 30px;
    align-items: end;
    justify-content: center;
    min-width: 80px;
}

.model-stats .stat-label {
    font-size: 0.85rem;
    color: #999;
    font-weight: 500;
    min-width: 80px;
}

.model-description {
    color: #333;
    margin-bottom: 40px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.model-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.tag {
    background: #73b8e6;
    color: #fff;
    padding: 7px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
}

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

/* 輪播軌道 */
#caipin-card-modal-overlay .modal-track {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 單個幻燈片 */
#caipin-card-modal-overlay .modal-slide {
    min-width: 100%;
    box-sizing: border-box;
}


/* 禁止 body 滾動 */
.body-no-scroll {
    overflow: hidden;
}

/* 定點列表 */
.categories {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-bottom: 20px;
}

.category-btn {
    padding: 10px 20px;
    /* background: linear-gradient(135deg, rgb(150, 150, 150), rgb(85, 85, 85)); */
    /* background: linear-gradient(90deg, #fbbd39, #ff8a00); */
    /* background: #e8f3f7; */
    background: #b4f3fc;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    transition: all 0.3s ease;
    color: #fff;
    /* color: #3498db; */
    /* box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3); */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); */
    font-size: 16px;
    background: linear-gradient(135deg, rgb(97, 209, 251), rgb(1, 184, 252));
}

/* 下拉選單樣式 */
.category-dropdown {
    position: relative;
    display: flex;
}
.category-dropdown.todaynew-city-dropdown {
    width: 120px;
    margin-left: auto;
    flex-shrink: 0;
}
.category-dropdown.todaynew-city-dropdown  span{
    color:#fff;
    font-size: 16px;
}
.category-dropdown.todaynew-city-dropdown  i{
    color:#fff;
    font-size: 16px;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
    min-width: 150px;
    max-height: 200px;
    overflow: hidden;
    opacity: 0;
    margin-top: 5px;
    transition: all 0.3s ease;
    transform: translateY(-10px);
    scrollbar-width: thin;
    scrollbar-color: #c4c4c4 #f8f8f8;
}

.category-dropdown.todaynew-city-dropdown .dropdown-menu{
    left: -20px;
}
.dropdown-menu.show {
    max-height: min(200px, calc(100vh - 120px));
    opacity: 1;
    transform: translateY(0);
    overflow-y: auto;
    z-index: 1001;
}
.range-tabs{
    margin-top: 20px;
}
/* 禁用body滾動，但保持捲軸可見 */
body.no-scroll {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow-y: scroll !important; /* 強制顯示捲軸 */
    overscroll-behavior: none;
    /* top值由JavaScript透過內聯樣式控制，不在這裡設定 */
}

/* 使用偽元素建立背景，確保始終覆蓋視口 */
body.no-scroll::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    z-index: -1;
    pointer-events: 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: -17px;
    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;
}

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

.customer-service-modal .close-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 200%;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.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;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.customer-service-modal .qr-label svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.customer-service-modal .qr-label--line svg {
    fill: #0EB102;
}

.customer-service-modal .qr-label--telegram svg {
    fill: #31A6D8;
}

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

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

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

.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;
}

.dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
    display: block;
    color:#333;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
}

.dropdown-item.active {
    background-color: #3498db;
    color: #fff;
}

.category-btn i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

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

.sort-container {
    width: 100%;
    margin: 30px 0;
}

.sort-buttons {
    width: 100%;
    display: flex;
    background: #eaf7ff;
    /* background: #eee; */
    border-radius: 20px;
    overflow: hidden;

}

.sort-btn {
    flex: 1;
    padding: 10px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #69888d;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 16px;
    font-weight: normal;
    position: relative;
    z-index: 100;
}

.sort-btn:hover {
    background: rgba(52, 152, 219, 0.15);
}

.sort-btn.active {
    /* background: #3498db; */
    background: #b3c8d5;
    color: white;
    font-weight: 600;
}

.sort-btn .arrow {
    transition: transform 0.3s ease;
}

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

.products-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
    margin-top: 30px;
    margin-bottom: 2rem;
}

/* 今日上新列表：桌面默認三列（≤767px 仍由下方 .page-youhui-listing .products-grid 覆蓋為兩列） */
.page-todaynew-listing .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*
 * 僅優惠專區列表 youhuiList（.page-youhui-listing）：
 * 折扣標右上；VIP 左上；二者同寬高（與首頁優惠卡角標 pill 一致）。
 */
.page-youhui-listing .product-card .product-image .product-badge {
    top: 10px;
    right: 10px;
    left: auto;
    bottom: auto;
    min-width: 76px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    z-index: 12;
}

.page-youhui-listing .product-card .product-image .vip-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    right: auto;
    bottom: auto;
    margin: 0;
    width: auto;
    /* min-width: 76px; */
    height: 28px;
    padding: 0 10px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
    animation: none;
    z-index: 11;
}

/* 優惠專區列表：卡片內文字過長單行省略（含搜尋結果等共用 .page-youhui-listing 的頁） */
.page-youhui-listing .product-card,
.page-youhui-listing .details-container-top,
.page-youhui-listing .product-info {
    min-width: 0;
    max-width: 100%;
}

.page-youhui-listing .product-details {
    min-width: 0;
    max-width: 100%;
}

.page-youhui-listing .product-title {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.page-youhui-listing .product-title .nickname {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

.page-youhui-listing .detail-item:not(.sub-pingfen) {
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
}

/* 模板使用 <lable class="global-lable">，需 flex-shrink:0 否則佔滿寬度導致數值無法省略 */
.page-youhui-listing .detail-item:not(.sub-pingfen) lable.global-lable {
    flex-shrink: 0;
}

.page-youhui-listing .detail-item:not(.sub-pingfen) span[class^="detail-"] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.page-youhui-listing .detail-item .detail-city {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
}

/* 搜尋結果容器內網格卡片：再強化一層，避免與 hl-search 合併樣式搶寬度 */
.hl-search-container .page-youhui-listing .product-card {
    min-width: 0;
    max-width: 100%;
}

/*
 * 全部菜品 moreList（.page-more-list）：同列卡片等高，對齊含「優惠倒計時」區塊的卡片高度。
 * 覆蓋 .page-youhui-listing 網格的 align-items:start，並以 flex 填滿卡片本體。
 */
.page-youhui-listing.page-more-list .products-grid {
    align-items: stretch;
    grid-auto-rows: 1fr;
}

.page-youhui-listing .product-card {
    height: 620px;
}

.page-youhui-listing.page-more-list .product-card {
    height: 620px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.page-youhui-listing.page-more-list .details-container-top {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.page-youhui-listing.page-more-list .product-image {
    flex-shrink: 0;
}

.page-youhui-listing.page-more-list .product-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.page-youhui-listing.page-more-list .product-actions {
    margin-top: auto;
}

.page-youhui-listing.page-more-list .product-image .subpage.bottom-icons {
    left: 0;
    right: 0;
    bottom: 0;
}

/* 優惠專區列表：移動端一行兩列（覆蓋全局 .products-grid 小屏單列） */
@media (max-width: 767px) {
    .page-youhui-listing .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 10px;
        align-items: start;
    }

    .page-youhui-listing .products-empty {
        grid-column: 1 / -1;
    }

    /* 全部菜品 moreList：移動端卡片固定高度 */
    .page-youhui-listing .product-card,
    .page-youhui-listing.page-more-list .product-card {
        height: auto;
    }

    /* 卡片整體變矮：縮圖區 + 去掉過大 min-height / actions 上邊距 */
    .page-youhui-listing .product-image {
        height: clamp(120px, 38vw, 168px);
    }

    .page-youhui-listing .product-image img {
        max-height: none;
    }

    .page-youhui-listing .product-info {
        position: relative;
        min-height: 0;
        /* padding: 30px 8px 8px; */
    }

    .page-youhui-listing .product-title {
        font-size: 16px;
        font-weight: 700;
        margin: 6px 0 4px;
        line-height: 1.25;
        padding-right: 4.25rem;
    }

    .page-youhui-listing .product-title .nickname {
        font-size: 16px;
    }

    .page-youhui-listing .product-details {
        font-size: 12px;
        gap: 3px 6px;
        margin-bottom: 6px;
        line-height: 1.35;
    }

    /* 地區、價錢各占一整行（寬度 100%），不與其它項並列於雙列網格 */
    .page-youhui-listing .product-details .detail-item:has(.detail-city),
    .page-youhui-listing .product-details .detail-item:has(.detail-price) {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-youhui-listing .global-lable {
        font-size: 12px;
        font-weight: normal;
    }

    .page-youhui-listing .detail-item:not(.sub-pingfen) {
        min-width: 0;
        align-items: flex-start;
        gap: 2px;
        overflow: hidden;
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: normal;
    }

    /* .page-youhui-listing .detail-item span[class^="detail-"],
    .page-youhui-listing .detail-item span.detail-rating {
        font-weight: normal;
        font-size: 18px; 
    } */

    /* 評分：浮在文字區（.product-info）右上角；標籤與數字垂直居中 */
    .page-youhui-listing .detail-item.sub-pingfen {
        position: absolute;
        top: 12px;
        right: 6px;
        margin: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        font-size: 12px;
        font-weight: normal;
        width: auto;
        max-width: calc(100% - 12px);
    }

    .page-youhui-listing .detail-item.sub-pingfen .global-lable {
        font-size: 12px;
        font-weight: normal;
        line-height: 1;
        display: inline-flex;
        align-items: center;
    }

    .page-youhui-listing .detail-item.sub-pingfen .detail-rating {
        font-weight: normal;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        font-size: 18px;
    }

    /* 價錢：整行、單行顯示；過長省略 */
    .page-youhui-listing .detail-item:has(.detail-price) {
        flex-wrap: nowrap;
        min-width: 0;
    }

    .page-youhui-listing .detail-item .detail-price {
        flex: 1;
        min-width: 0;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .page-youhui-listing .product-actions {
        margin-top: 8px;
        padding-bottom: 8px;
    }

    .page-youhui-listing .product-info .countdown-timer-overlay {
        margin-top: 12px;
        margin-bottom: 6px;
    }

    .page-youhui-listing .countdown-label {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .page-youhui-listing .countdown-display {
        gap: 2px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .page-youhui-listing .time-unit {
        flex: 1 1 0;
        min-width: 0;
        min-height: 26px;
        padding: 2px 4px;
        gap: 2px;
    }

    .page-youhui-listing .time-value {
        font-size: 0.7rem;
    }

    .page-youhui-listing .time-label {
        font-size: 0.55rem;
        margin-top: 0;
    }

    .page-youhui-listing .time-separator {
        font-size: 0.65rem;
    }

    /* 圖片區底部統計：相對圖片容器水平居中（覆蓋 .subpage.bottom-icons span 的 flex:1 均分寬度） */
    .page-youhui-listing .product-image .subpage.bottom-icons {
        left: 0;
        right: 0;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        padding-left: 6px;
        padding-right: 6px;
        gap: clamp(6px, 2.5vw, 14px);
    }

    .page-youhui-listing .product-image .subpage.bottom-icons span {
        flex: 0 0 auto;
        justify-content: center;
        text-align: center;
        font-size: 11px;
        line-height: 1.2;
        min-height: 0;
        font-weight: normal;
    }

    .page-youhui-listing .product-image .subpage.bottom-icons span i {
        width: 13px;
        min-width: 13px;
        height: 13px;
        min-height: 13px;
        font-size: 11px;
    }

    /* VIP、折扣：介於過小與過大之間，適配雙列窄圖 */
    .page-youhui-listing .product-card .product-image .product-badge {
        min-width: 68px;
        height: 26px;
        padding: 0 8px;
        font-size: 11px;
        font-weight: 800;
        top: 6px;
        right: 6px;
    }

    .page-youhui-listing .product-card .product-image .vip-badge {
        left: 6px;
        right: auto;
        /* min-width: 68px; */
        height: 26px;
        padding: 0 8px;
        font-size: 11px;
        font-weight: 800;
        top: 6px;
        border-radius: 30px;
        box-shadow: none;
    }
}

.details-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.details-card {
    background: white;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.15);
    position: relative;
    padding: 10px;
}

.details-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(52, 152, 219, 0.25);
}

.product-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 10px 25px rgba(52, 152, 219, 0.15);
    position: relative;
    cursor: pointer;
}

/* 整卡點進詳情：底層全幅鏈接；內容區 pointer-events:none，收藏鈕單獨可點 */
.product-card > .product-card-stretch-link {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}

.product-card > .product-card-stretch-link:focus-visible {
    outline: 2px solid rgba(26, 95, 138, 0.85);
    outline-offset: 2px;
}

.product-card > .details-container-top {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

/* .product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(52, 152, 219, 0.25);
} */

.product-image {
    height: 260px;
    overflow: hidden;
    position: relative;
}
.product-image img {
    width: 100%;
    height: 100%;
    max-height: 418px;
    object-fit: cover;
    object-position: center;
    transition: transform 0.7s ease;
}

.details-image {
    height: 560px;
    overflow: hidden;
    position: relative;
}

.details-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.7s ease;
}

/* .product-card:hover .product-image img {
    transform: scale(1.15);
} */

.product-info {
    padding: 0 20px;
    position: relative;
    min-height: 280px;
    padding-top: 20px;
}

.product-info .countdown-timer-overlay {
    position: static;
    bottom: auto;
    right: auto;
    z-index: auto;
    background: transparent;
    backdrop-filter: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-top: 15px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.product-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: #7f8c8d;
}


.global-lable {
    color: #333;
    white-space: nowrap;
}

.product-rating-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.rating-value {
    font-weight: 800;
    color: #f90;
    font-size: 1.6rem;
    font-family: 'avenir';
    margin-right: 6px;
}

.product-desc {
    color: #7f8c8d;
    margin-bottom: 15px;
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 10px 20px;
}

.product-actions {
    display: block;
    padding-top: 0;
    padding-bottom: 20px;
    margin-top: 95px;
    min-height: 0;
}

/* 當倒計時顯示時（不是 display: none），移除 product-actions 的上邊距 */
.product-info .countdown-timer-overlay:not([style*="display: none"]) ~ .product-details ~ .product-actions {
    margin-top: 0;
}

/* .add-to-cart {
    flex-grow: 1;
    padding: 10px 0;
    background: linear-gradient(90deg, #fbbd39, #ff8a00);
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-weight: normal;
    transition: all 0.3s ease;
    box-shadow: 0 6px 12px rgba(52, 152, 219, 0.4);
    font-size: 0.9rem;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.add-to-cart::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: all 0.5s ease;
}

.add-to-cart:hover::before {
    left: 100%;
}

.add-to-cart:hover {
    background: linear-gradient(135deg, #edbd55 0%, #fdae05 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 8px rgba(52, 152, 219, 0.25);
} */

/* .wishlist-btn {
    width: 45px;
    background: #b6f2fc;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #3498db;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
} */

/* .wishlist-btn:hover {
    background: #3498db;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(52, 152, 219, 0.35);
} */

.product-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    /* height: 4px;
    background: linear-gradient(135deg, #3498db 0%, #1a5f8a 100%); */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card:hover::after {
    opacity: 1;
}

.card-decoration {
    position: absolute;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    top: -60px;
    right: -60px;
    z-index: 1;
}

.subpage.bottom-icons {
    position: absolute;
    bottom: 0;
    color: #fff;
    /* background: rgba(0, 0, 0, .6); */
    background: linear-gradient(to top, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));
    display: flex;
    justify-content: center;
}

.subpage.bottom-icons span {
    color: #fff;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: normal;
    padding-left: 0;
    gap: 3px;
    font-size: 13px;
    line-height: 15px;
    min-height: 15px;
    text-align: left;
}

.bottom-icons span.favs-num {
    justify-content: flex-start;
}

.subpage.bottom-icons span i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 15px;
    min-width: 15px;
    height: 15px;
    min-height: 15px;
    margin-right: 0;
    font-size: 13px;
    line-height: 1;
}

.favs-count {
    display: inline-flex;
    /* align-items: center; */
    gap: 2px;
}

.favs-num {
    margin-left: 0;
}

.dropdown-menu::-webkit-scrollbar {
    width: 8px;
}

.dropdown-menu::-webkit-scrollbar-track {
    background: #f8f8f8;
    border-radius: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

#customer-service-modal .modal-header {
    border-bottom: 0;
}

#customer-service-modal .close-modal {
    top: 0;
}

/* 詳細頁面 */
.container {
    max-width: 780px;
    margin: 20px auto;
    padding: 20px;
    background: white;
    /* border-radius: 20px; */
    box-shadow: 0 15px 40px rgba(52, 152, 219, 0.2);
}

.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;
}
.container.hl-search-container {
    margin: 16px auto;
    padding: 12px;
    background: white;
    border-radius: 18px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}

/* 搜尋結果：套用 youhuiList 的 .page-youhui-listing 卡片規則，避免與 hl-search 外層重複白底與大內邊距 */
.hl-search-container .sub-section.page-youhui-listing.qianse-search-results-cards {
    background: transparent;
    box-shadow: none;
    padding: 0;
    min-height: 0;
    border-radius: 0;
    min-height: 343px;
}
#searchForm{
    padding: 30px;
}
header {
    min-height: 115px;
    /* background: linear-gradient(135deg, #3498db 0%, #1a5f8a 100%); */
    background: url(../images/index-header.jpg) no-repeat center;
    background-size: cover;
    color: white;
    border-radius: 15px;
    margin-bottom: 15px;
    box-shadow: 0 15px 30px rgba(52, 152, 219, 0.3);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 40px;
}

.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../images/tinysquare.png);
    background-repeat: repeat;
    background-size: auto;
    opacity: 1.0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}



@keyframes headerShine {
    0% {
        left: -100%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    /* transform: rotate(30deg); */
    animation: headerShine 3.5s infinite linear;
}

/* 頂部主容器：左 logo-img，右上搜索 / 右下 logo-text */
.logo-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    z-index: 3;
    transition: opacity 0.3s ease;
    max-width: none;
    box-sizing: border-box;
}

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

.logo-image {
    width: var(--m1-logo-size, clamp(70px, 6vw + 40px, 100px));
    height: 100%;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.logo-img {
    width: 75%;
    object-fit: cover;
    border-radius: 50%;
}

.logo-main-right {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 8px;
    padding-top: 10px;
    box-sizing: border-box;
}

.logo-main-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.logo-main-top .search-container {
    flex: 1 1 auto;
    min-width: 0;
}

.logo-main-top .search-icon-btn,
.logo-main-top .user-menu {
    position: static;
    top: auto;
    right: auto;
    flex: 0 0 auto;
    z-index: 15;
}

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: stretch;
    color: white;
    text-align: left;
    min-width: 0;
    flex: 0 0 auto;
    max-width: 100%;
    padding-bottom: 20px;
    box-sizing: border-box;
}

.logo-title {
    font-size: clamp(16px, 0.9vw + 12px, 22px);
    font-weight: 800;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
    color: #fff;
    white-space: normal;
}

.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: static;
    top: auto;
    right: auto;
    z-index: 15;
    flex: 0 0 auto;
}
.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-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: #3498db;
}

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

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



/* 搜尋圖示按鈕：隱藏，搜尋框常顯 */
.search-icon-btn,
.search-toggle-btn {
    display: none !important;
}

.search-container {
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    top: auto;
    right: auto;
    z-index: 10;
    transform: none;
    opacity: 1;
    transition: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 560px;
    pointer-events: auto;
}

.search-container.active {
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

.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);
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 50px;
    position: relative;
    box-sizing: border-box;
}

.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, #FFA000, #f90);
    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, #FFA000, #f90);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}

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

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

.search-btn {
    background: linear-gradient(135deg, #61d1fb, #01b8fc);
    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(52, 152, 219, 0.3);
}

.search-btn:hover {
    background: linear-gradient(135deg, #2980b9, #1f5f8b);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 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: flex;
    align-items: center;
    margin-bottom: 30px;
    padding: 15px 20px;
    background: #eaf7ff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.15);
    display: none;
}

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

.breadcrumb a:hover {
    color: #1a5f8a;
    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(52, 152, 219, 0.2);
    padding: 10px;
}

/* 確保 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;
}

/* 確保 product-gallery 中的 main-image 顯示 */
.product-gallery .main-image {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: calc(100% - 82px);
}

.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: 40px;
    left: 10px;
    background: linear-gradient(135deg, #FFA000, #f90);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
    z-index: 2;

}

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

.main-image:hover img {
    /* transform: scale(1.05); */
}

.main-image .details-slide {
    /* height: 550px; */
}

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

/* 美化捲軸 - 桌面端 */
.thumbnails-container::-webkit-scrollbar {
    height: 6px !important;
    display: block !important;
    visibility: visible !important;
    z-index: 100 !important;
    position: relative;
}

.thumbnails-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px;
    margin: 0 10px;
    visibility: visible !important;
    z-index: 100 !important;
}

.thumbnails-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 10px;
    border-bottom-left-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
    min-width: 20px;
    visibility: visible !important;
    z-index: 100 !important;
}

.thumbnails-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.5);
}

.thumbnail {
    flex-shrink: 0;
    width: 15%;
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 5px rgba(52, 152, 219, 0.15);
    border: 2px solid #eee;
    position: relative;
}

.thumbnail:hover {
    box-shadow: 0 8px 20px rgba(52, 152, 219, 0.25);
}

.product-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 0;
    margin-top: 10px;
}

.product-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #2c3e50;
    padding: 0;
    margin: 20px 0;
    text-align: left;
    display: flex;
    flex-direction: column;
}
.product-title .nickname {
    display: block;
    width: 100%;
}
.product-title .code {
    display: block;
    width: 100%;
    margin-top: 4px;
}

/* 特價標籤容器 */
.sale-tag-container {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    /* background: linear-gradient(135deg, rgb(255, 125, 125) 0%, rgb(255, 36, 66) 100%); */
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    border-radius: 20px;
    animation: sale-pulse 2s ease-in-out infinite;
}

/* 特價圖示 */
.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;
    white-space: nowrap;
}

.product-rating {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.stars {
    color: #FFA000;
    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: #FFA000;
    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: 100%;
    justify-content: center;
}

.time-unit {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff2442 0%, #ff6b6b 100%);
    border-radius: 6px;
    padding: clamp(4px, 1vw + 2px, 10px) clamp(6px, 1.5vw + 4px, 12px);
    flex: 1 1 clamp(90px, 22vw, 120px);
    box-shadow: 0 2px 8px rgba(255, 36, 66, 0.3);
    gap: 3px;
    min-height: 35px;
}

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

.time-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 2px;
    font-weight: 600;
    white-space: nowrap;
}

.time-separator {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    font-weight: 800;
    color: #ff2442;
    font-family: avenir;
}

/* 倒計時浮動樣式（用於優惠專區產品卡片） */
.countdown-timer-overlay {
    position: absolute;
    bottom: 2px;
    right: 6px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.countdown-display-mini {
    display: flex;
    align-items: center;
    gap: 4px;
}

.time-unit-mini {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff2442 0%, #ff6b6b 100%);
    border-radius: 4px;
    padding: 4px 6px;
    gap: 2px;
}

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

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

.time-separator-mini {
    font-size: 0.9rem;
    font-weight: 800;
    color: white;
    font-family: avenir;
}

/* 優惠專區卡片中的倒計時模組水平鋪滿並居中 */
.yhzq-list .img-containe .countdown-timer-overlay {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
    /* border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; */
    padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 圖片預覽模態框樣式 */
.image-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(15px);
}

.preview-content {
    position: relative;
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 20px;
    max-width: 650px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    animation: slideUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes slideUp {
    from {
        transform: translateY(50px) scale(0.95);
        opacity: 0;
    }

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

.preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgb(97, 209, 251), rgb(1, 184, 252));
    color: white;
}

.preview-header h3 {
    font-size: 20px;
    font-weight: 500;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.preview-header h3 i {
    font-size: 24px;
}

.preview-close {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    padding: 0;
    color: #999;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    line-height: 0;
    backdrop-filter: blur(10px);
    box-sizing: border-box;
}

.preview-close svg {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 auto;
    margin: auto;
}

.preview-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg) scale(1.1);
}

.preview-close:active {
    transform: rotate(90deg) scale(0.95);
}

.preview-body {
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background: white;
}

.preview-image {
    max-width: 100%;
    max-height: 45vh;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 4px solid #f0f0f0;
    transition: all 0.3s ease;
}

.preview-image:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.preview-info {
    font-size: 15px;
    color: #666;
    margin: 0;
    text-align: center;
    word-break: break-all;
    background: #f9f9f9;
    padding: 10px 16px;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.preview-actions {
    display: flex;
    gap: 16px;
    width: 100%;
    margin-top: 12px;
}

.preview-search-btn,
.preview-cancel-btn {
    flex: 1;
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.preview-search-btn {
    background: linear-gradient(135deg, rgb(97, 209, 251), rgb(1, 184, 252));
    color: white;
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.35);
    text-align: center;
}

.preview-search-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.preview-search-btn:hover::before {
    width: 300px;
    height: 300px;
}

.preview-search-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(52, 152, 219, 0.45);
}

.preview-search-btn:active {
    transform: translateY(-1px);
}

.preview-cancel-btn {
    background: #f5f5f5;
    color: #666;
    border: 1px solid #e0e0e0;
    text-align: center;
}

.preview-cancel-btn:hover {
    background: #e8e8e8;
    color: #333;
    border-color: #d0d0d0;
    transform: translateY(-2px);
}

.preview-cancel-btn:active {
    transform: translateY(0);
}

.product-description {
    color: #7f8c8d;
    margin-bottom: 25px;
    line-height: 1.6;
    font-size: 0.95rem;
}

.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;
}

.feature-item span {
    color: #999;
}

.feature-item.full-width {
    grid-column: 1 / -1;
}

.feature-item i {
    color: #3498db;
    margin-right: 10px;
    font-size: 1rem;
}

.feature-item .price-highlight {
    color: #FFA000;
    font-weight: 700;
    padding-right: 4px;
}

.product-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin: 10px 0;
}

.stat-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 8px;
}

.stat-item i {
    font-size: 1.4rem;
    color: #FFA000;
}

.stat-item:nth-child(2) i {
    font-size: 1.5rem;
}

.stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: #2c3e50;
    font-family: avenir;
}

.product-options {
    margin-bottom: 25px;
}

.option-title {
    font-weight: 700;
    margin-bottom: 10px;
    color: #2c3e50;
}

.color-options,
.size-options {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.color-option,
.size-option {
    padding: 8px 15px;
    border: 2px solid #eaf7ff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.color-option:hover,
.size-option:hover {
    border-color: #3498db;
}

.color-option.active,
.size-option.active {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

.quantity-selector {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.quantity-btn {
    width: 40px;
    height: 40px;
    background: #eaf7ff;
    border: none;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #3498db;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quantity-btn:hover {
    background: #3498db;
    color: white;
}

.quantity-input {
    width: 60px;
    height: 40px;
    text-align: center;
    margin: 0 10px;
    border: 2px solid #eaf7ff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
}

.action-buttons {
    display: flex;
    gap: 15px;
}

.add-to-cart {
    flex-grow: 1;
    padding: 15px 0;
    background: linear-gradient(135deg, rgb(97, 209, 251), rgb(1, 184, 252));
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 800;
    transition: all 0.3s ease;
    box-shadow: 0 6px 12px rgba(52, 152, 219, 0.4);
    font-size: 1rem;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
}

.add-to-cart::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: all 0.5s ease;
}

.add-to-cart:hover::before {
    left: 100%;
}

.add-to-cart:hover {
    background: linear-gradient(135deg, #1a5f8a 0%, #13496e 100%);
    /* transform: translateY(-2px);
    box-shadow: 0 10px 15px rgba(52, 152, 219, 0.5); */
}

.wishlist-btn {
    width: 60px;
    background: #f0f0f0;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: #3498db;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.wishlist-btn:hover {
    background: #3498db;
    color: white;
    /* transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(52, 152, 219, 0.35); */
}

.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: #eaf7ff;
    border-radius: 10px;
    font-size: 0.95rem;
    gap: 8px;
    font-weight: 600;
}

.spec-name {
    color: #2c3e50;
    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: #7f8c8d;
    text-align: left;
    align-items: center;
    display: flex;
    flex: 1;
    border-left: 1px solid #c6dcea;
    padding-left: 10px;
}

.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 #f90;
    box-shadow: 0 6px 14px rgba(242, 113, 33, 0.08);
}
.duration-time {
    font-weight: 600;
    color: #2c3e50;
}

.duration-label {
    display: inline-block;
    font-weight: 600;
    color: #999;
}

.duration-value {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-left: auto;
    font-weight: 700;
}

.duration-current {
    font-size: 1.05rem;
    color: #27ae60;
}

.duration-original {
    font-size: 1.05rem;
    color: #ff2442;
    text-decoration: line-through;
}


.customer-reviews {
    margin-top: 50px;
    grid-column: 1 / -1;
    /* 跨越所有grid列 */
}

.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: #f90;
    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 #f5f5f5;
}

.review-main {
    width: 100%;
    position: relative;
    /* 設定為相對定位，作為zhiding的定位容器 */
}

/* 置頂標籤 */
.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容器 */
    grid-column: 1 / -1;
}
.products-empty span{
    color: #ccc;
    margin-right: 8px;
}
.general-empty{
    width:100%;
    text-align: center;
    font-size: 16px;
    padding: 30px 0;
    color: #666;
    /* border-bottom: 1px solid #f5f5f5; */
    /* 桌面端鋪滿整個grid容器 */
    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: #b77900;
    font-style: italic;
    background: #fff4d6;
    padding: 12px 16px;
    border-radius: 8px;
    display: block;
    border-left: 3px solid #f3b300;
    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);
}

/* 三張圖片時3列 */
.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;
    /* 跨越所有grid列 */
}

/* 底部評論輸入框 - 小紅書風格 */
.comment-input-footer {
    margin-top: 12px;
    padding: 16px;
    padding-top: 26px;
    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: 24px;
    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[data-interactions-locked="true"] {
    opacity: 0.6;
    pointer-events: none;
}

/* 點贊動畫 */
.liked {
    animation: likeAnimation 0.6s ease-out;
}

.unliked {
    animation: unlikeAnimation 0.6s ease-out !important;
}

@keyframes likeAnimation {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.2);
    }

    50% {
        transform: scale(1.1);
    }

    75% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes unlikeAnimation {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(0.7);
    }

    50% {
        transform: scale(0.8);
    }

    75% {
        transform: scale(0.75);
    }

    100% {
        transform: scale(1);
    }
}

/* 新的回覆輸入模組樣式 - 兩行佈局 */
.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: 60px;
    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: 60px;
}

.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: #f7f8fa;
    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內的直接文字和元素樣式 */
.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內的按鈕也不折行 */
}

.reply-item-new {
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    margin-bottom: 6px;
    margin-top: 8px;
    margin-left: 10px;
    /* 第一層縮排2個字元 */
    padding: 8px 10px;
    padding-left: 12px;
    word-break: break-all;
    font-family: pingfang;
    background: #fff;
    border-left: 2px solid #e6f4fc;
    border-radius: 4px;
}

/* 巢狀的reply-item-new，每層再增加縮排 */
.reply-item-new .reply-item-new {
    margin-left: 10px;
    /* 相對於父級再縮排2em */
    border-left-color: #ddeffa;
    /* 更深的邊框顏色 */
}

.reply-item-new .reply-item-new .reply-item-new {
    margin-left: 10px;
    /* 第三層 */
    border-left-color: #aae3fd;
    /* 更深的邊框顏色 */
}

.reply-item-new .reply-item-new .reply-item-new .reply-item-new {
    margin-left: 10px;
    /* 第四層及以後 */
    border-left-color: #83d5fb;
    /* 更深的邊框顏色 */
}

.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: #007aff;
    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: #4a5568;
    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: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 20px;
    box-shadow:
        inset 0 0 30px rgba(126, 179, 255, 0.08),
        0 4px 20px rgba(126, 179, 255, 0.12);
    border: 1px solid rgba(180, 190, 210, 0.3);
    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: #5a6a7f;
    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: linear-gradient(135deg, rgb(97, 209, 251), rgb(1, 184, 252));
    cursor: pointer;
    box-shadow: 0 0 8px rgba(126, 179, 255, 0.4);
    border: 2px solid #e8f2ff;
}

.radar-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7eb3ff, #a0c9ff);
    cursor: pointer;
    box-shadow: 0 0 8px rgba(126, 179, 255, 0.4);
    border: 2px solid #e8f2ff;
}

.radar-value {
    font-weight: 700;
    color: #f90;
    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: #5a6a7f;
    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: linear-gradient(135deg, rgb(97, 209, 251), rgb(1, 184, 252));
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(126, 179, 255, 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 #3498db;
}

.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(52, 152, 219, 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: #3498db;
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 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: #FFA000;
}

.submit-review {
    background: linear-gradient(135deg, #3498db 0%, #1a5f8a 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(52, 152, 219, 0.3);
}

.submit-review:hover {
    background: linear-gradient(135deg, #03b9fd 0%, #01a1dd 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4);
}

.review-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 16px;
    background: #fff;
    grid-column: 1 / -1;
    /* 跨越所有grid列 */
    border-radius: 12px;
    border-bottom: 1px solid #eaf7ff;
}

.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;
}

.review-count span {
    color: #f90;
    font-family: 'avenir';
    padding: 0 6px;
}

#averageScore {
    color: #f90;
    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;
}

.comment-filter-tabs {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

.comment-filter-button {
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #666;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.comment-filter-button.active {
    background: linear-gradient(135deg, rgb(97, 209, 251), rgb(1, 184, 252));
    color: #fff;
    font-weight: 600;
}

.spec-member-locked {
    color: #8f8f8f;
    font-weight: 600;
}

.spec-member-locked .member-register-link {
    color: #f90;
    font-weight: 700;
    margin-right: 4px;
    text-decoration: none;
}

.spec-member-locked .member-register-link:hover {
    text-decoration: underline;
}

.comment-badge-list {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: 12px;
    flex-wrap: wrap;
    display: none;
}

.comment-badge {
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 500;
}

.comment-badge.badge-featured {
    background: #fff0c2;
    color: #6b3d00;
}

.comment-badge.badge-pinned {
    background: #ffe1d4;
    color: #7b2b00;
}

/* ============================================
   詳情 CTA：模板 1
   ============================================ */
.detail-identity-block {
    display: grid;
    grid-template-columns: minmax(168px, max-content) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    margin: 12px 0 16px;
}

.detail-identity-block.is-seller-session {
    grid-template-columns: minmax(168px, max-content);
}

.detail-code-card {


    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: max-content;
    height: 45px;
    min-height: 45px;
    box-sizing: border-box;
    padding: 0 14px;
    border-radius: 50px;
    background: linear-gradient(145deg, #f6fbff 0%, #ffffff 100%);
    border: 1px solid #d9efff;
    box-shadow: 0 10px 24px rgba(52, 152, 219, 0.1);
    overflow: hidden;
    padding: 0 16px;
    white-space: nowrap;

    flex-shrink: 0;
    max-width: 100%;
    width: max-content;
}

.detail-code-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #74a9c7;
}

.detail-code-value {
    font-family: avenir;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
    color: #1a5f8a;
    white-space: nowrap;
    flex-shrink: 0;
}

.detail-code-note {
    font-size: 12px;
    line-height: 1.3;
    color: #7f8c8d;
    white-space: nowrap;
    flex-shrink: 0;
}

.detail-booking-card {
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 0;
    height: 50px;
    min-height: 50px;
    align-self: stretch;
}

.detail-booking-eyebrow {
    display: none;
}

.detail-booking-btn {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    height: 50px;
    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: 50px;
    background: linear-gradient(135deg, rgb(97, 209, 251), rgb(1, 184, 252));
    color: #fff;
    box-shadow: 0 12px 26px rgba(52, 152, 219, 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.detail-booking-btn:hover {
    background: linear-gradient(135deg, #1a5f8a 0%, #13496e 100%);
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(52, 152, 219, 0.28);
}

.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;
    white-space: nowrap;
}

.detail-booking-btn-note {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    opacity: 0.88;
    white-space: nowrap;
    text-align: left;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .detail-identity-block {
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 10px 0 14px;
    }

    .detail-code-card {
        height: 45px;
        min-height: 45px;
    }

    .detail-booking-card {
        height: 50px;
        min-height: 50px;
    }

    .detail-booking-btn {
        height: 50px;
        min-height: 50px;
        padding: 0 16px;
    }

    .detail-booking-btn-note {
        font-size: 11px;
        white-space: normal;
        text-align: right;
    }
}

.review-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    margin-top: 24px;
    margin-bottom: 12px;
}

.review-controls .sort-options {
    display: flex;
    align-items: center;
    gap: 12px;
}

.comment-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 18px;
    pointer-events: none;
}

.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);
}

footer {
    text-align: center;
    padding: 16px 0;
    color: #7f8c8d;
    border-top: 1px solid #eaf7ff;
    font-size: 0.9rem;
}

/* .close-carousel:hover {
    background: transparent;
    border-radius: 50%;
} */

.details-slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 100%;
}

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

/* 浮動狀態下圖片完整顯示，不裁切 */
.main-image.float-active img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: 100% !important;
    object-fit: contain !important;
}

.details-slide.slide-anim {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    z-index: 1;
    background: #000;
}

/* ==================== 拖拽時禁止頁面滾動 ==================== */
body.no-scroll {
    overflow: hidden;
    touch-action: 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: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    padding: 0;
    box-sizing: border-box;
    line-height: 0;
}

.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;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.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);
}

/* 代調確認彈框：文字/按鈕垂直分布，取消確定各半寬，右上角關閉 */
.confirm-toast.confirm-toast--daidiao {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%) scale(0.98);
    min-width: min(360px, 92vw);
    max-width: min(420px, 92vw);
}

.confirm-toast.confirm-toast--daidiao.show {
    transform: translate(-50%, -50%) scale(1);
}

.confirm-toast.confirm-toast--daidiao .confirm-toast-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px 16px 16px;
}

.confirm-toast.confirm-toast--daidiao .confirm-toast-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #9ca3af;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.confirm-toast.confirm-toast--daidiao .confirm-toast-close:hover {
    background: #f3f4f6;
    color: #4b5563;
}

.confirm-toast.confirm-toast--daidiao .confirm-toast-message {
    display: block;
    text-align: center;
    padding: 8px 28px 0;
    font-size: 15px;
    line-height: 1.6;
}

.confirm-toast.confirm-toast--daidiao .confirm-toast-actions {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    padding: 0;
    justify-content: stretch;
    box-sizing: border-box;
}

.confirm-toast.confirm-toast--daidiao .confirm-toast-btn {
    flex: 1 1 50%;
    width: 50%;
    min-width: 0;
    min-height: 42px;
    padding: 10px 12px;
    box-sizing: border-box;
}


/* ========================================
   hl-search.css 樣式（已合併）
   ======================================== */


/* .search-container {
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
    padding: 30px;
    position: relative;
} */

.search-top-title {
    width:100%;
    height: 100%;
    font-size: 1.8rem;
    color: #fff;
    display: flex;
    align-items: center;
    font-weight: 600;
    padding-left: 5%;
    text-shadow: 0 3px 7px rgba(0, 0, 0, 0.7);
}
.search-title {
    font-size: 1.4rem;
    color: #333;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.search-title i {
    margin-right: 10px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 20px;
}

.form-group {
    flex: 1;
    font-size: 14px;
}

.area-option label{
    margin-bottom: 0;
}
.form-row label{
    display: block;
    font-weight: 700;
    text-align: left;
    color: #2c3e50;
    margin-bottom: 8px;
}
.form-control {
    width: 100%;
    padding: 9px 15px;
    padding-right: 35px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 6px;
    transition: all 0.3s ease;
    background: white;
    font-size: 13px;
}

.form-control:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.select-wrapper {
    position: relative;
}

.select-wrapper: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;
}

.select-wrapper.active:after {
    transform: translateY(-50%) rotate(180deg);
}

.custom-select {
    width: 100%;
    padding: 9px 15px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.custom-select.active {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.custom-select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.custom-select-placeholder {
    color: #7f8c8d;
}
/* 銷售城市下拉框高亮效�?*/
.select-wrapper.active .custom-select {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

/* 銷售地區下拉框高亮效�?*/
.area-selector.active .form-control {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

/* 下拉箭頭顏色變化 */
.select-wrapper.active:after,
.area-selector.active:after {
    border-top-color: #3498db;
}

/* 選中專案的視覺反�?*/
.select-option.selected {
    background: #3498db;
    color: white;
}

.select-option:hover {
    background: #f1f8ff;
    color: #000;
}
.hl-search-container .checkbox-container {
    display: block;
    margin-top: 15px;
}

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

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

.checkbox-section-title i {
    margin-right: 8px;
    color: #3498db;
}

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

.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;
}

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

.custom-checkbox-item.checked {
    background: #f90;
    color: white;
    border-color: #f9c57a;
}

.custom-checkbox-item input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.full-width {
    width: 100%;
}

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

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

.btn-primary {
    background: linear-gradient(135deg, rgb(97, 209, 251), rgb(1, 184, 252));
    color: white;
    text-align: center;
}

.btn-primary:hover {
    background: #2980b9;
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    border: 1px solid #3498db;
    color: #3498db;
    text-align: center;
}

.btn-outline:hover {
    background: #f8f9fa;
}

.area-selector {
    position: relative;
}
.area-selector:hover {
    border-color: #3498db;
}
.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;
}

.area-selector.active:after {
    transform: translateY(-50%) rotate(180deg);
}
.area-selector input{
    cursor: pointer;
} 
.area-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    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);
}

.area-dropdown.show {
    max-height: min(60vh, 420px);
    opacity: 1;
    transform: translateY(0);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.area-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
    font-weight: 500;
    flex-shrink: 0;
}

.area-header button,
.area-header .btn-link {
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 0;
}

.area-options {
    padding: 10px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    font-size: 13px;
}

.area-option {
    padding: 8px 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.area-option:hover {
    background: #f1f8ff;
}
.area-option label{
    font-weight: normal;
}
.area-option input {
    margin-right: 10px;
    cursor: pointer;
}

.btn-link {
    background: none;
    border: none;
    color: #3498db;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
    transition: color 0.2s ease;
}

.btn-link:hover {
    color: #f90;
}

.loading {
    text-align: center;
    padding: 3rem;
    color: #666;
    grid-column: 1 / -1;
}

.loading i {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #3498db;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

.message {
    padding: 15px;
    margin: 15x 0;
    border-radius: 6px;
    text-align: center;
    transition: all 0.3s ease;
}

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

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

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

/* 下拉選擇動畫 */
.select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    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);
}

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

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

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

.select-option.selected {
    background: #3498db;
    color: white;
}

/* 頂部錯誤提示 */
.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;
}

/* 錯誤選項樣式 */
.select-option.error {
    color: #dc3545;
    cursor: not-allowed;
    background: #f8f9fa;
}

.select-option.error:hover {
    background: #f8f9fa;
}

/* 全選按鈕樣�?*/
.select-all-btn {
    position: absolute;
    right: 40px;
    top: 0;
    background: none;
    border: none;
    color: #f90;
    cursor: pointer;
    font-size: 14px;
    padding: 0 5px;
}

.select-all-btn:hover {
    text-decoration: underline;
}

/* 反選按鈕樣式*/
.invert-selection-btn {
    position: absolute;
    right: 0;
    top: 0;
    background: none;
    border: none;
    color: #f90;
    cursor: pointer;
    font-size: 14px;
    padding: 0 5px;
}

.invert-selection-btn:hover {
    text-decoration: underline;
}
.area-options .custom-checkbox-item {
    position: relative;
    padding: 8px 12px 8px 32px; /* 左邊留空間給checkbox */
    margin: 2px 0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    transition: all 0.3s ease;
    border: 0;
    background: none;
    color: #999;
}

.area-options .custom-checkbox-item:hover {
    background: #f1f8ff;
    color: #000;
}

.area-options .custom-checkbox-item.checked {
    background: none;
    border: 0;
    color: #000;
}

.area-options .hidden-input {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
}

.area-options .custom-checkbox-label {
    cursor: pointer;
    display: block;
}

/* 自定義checkbox樣式 */
.area-options .custom-checkbox-item:before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    background-color: white;

}

.area-options .custom-checkbox-item.checked:before {
    background-color: #fdb956;
    border-color: #e2982b;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.area-options .custom-checkbox-item.checked:after {
    content: '';
    position: absolute;
    left: 13.5px;
    top: 46%;
    transform: translateY(-50%) rotate(45deg);
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
}
:root {
    --scrollbar-track: #f5f5f5;
    --scrollbar-thumb: #64b5f6;
    --scrollbar-thumb-hover: #42a5f5;
}

.area-options {
    padding: 8px;
    margin: 5px;
    background: #fff;
}

.area-options::-webkit-scrollbar {
    width: 8px;
}

.area-options::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 4px;
}

.area-options::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

.area-options::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}


.select-dropdown::-webkit-scrollbar {
    width: 8px;
}

.select-dropdown::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 4px;
}

.select-dropdown::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

.select-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}
.select-dropdown {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
#sortDropdown{
    overflow-y: hidden;
}
.results-header {
    text-align: center;
    color: rgb(86, 100, 106);
    font-size: 14px;
    /* border-bottom: 1px solid rgb(227, 227, 229); */
    background: rgb(253, 253, 255);
    padding-bottom: 30px;
    /* margin-bottom: 30px; */
}
.results-header h1{
    font-size: 1.8rem;
    color: #000;
}

.filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #667eea;
    color: white;
    border: none;
    padding: 0.4rem 1.0rem;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
}

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

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

.filter-sidebar.open {
    right: 0;
}

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

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

.close-sidebar {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #777;
}
.sidebar-title i{
    color:#3498db;
    margin-right: 6px;
}
.sidebar-header svg{
    width:24px;
    height: 24px;
    cursor: pointer;
}
.sidebar-header svg{
    fill: #666;
}
.search-criteria {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

    /* criteria-item底部操作資訊樣式 */
    .operation-info {
        margin-top: 8px;
        padding: 6px 30px 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        position: relative;
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s ease;
    }
    
    .operation-info.show {
        opacity: 1;
        transform: translateY(0);
    }
    
    .operation-info.success {
        background: rgba(76, 175, 80, 0.1);
        color: #2e7d32;
        border: 1px solid rgba(76, 175, 80, 0.2);
    }
    
    .operation-info.info {
        background: #eee;
        color: #888;
        border: 1px solid #eee;
    }
    
    .operation-info-content {
        display: block;
    }
    
    .operation-info-close {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: inherit;
        cursor: pointer;
        opacity: 0.7;
        padding: 2px;
        font-size: 10px;
    }
    
    .operation-info-close:hover {
        opacity: 1;
    }
    
    /* 側邊欄底部按鈕樣�?*/
    .sidebar-footer {
        margin-top: 20px;
        margin-bottom: 20px;
        padding-top: 20px;
        /* border-top: 1px solid #e0e0e0; */
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 15px;
    }
    
    .back-to-search-btn {
        background: linear-gradient(135deg, #5ec7f8, #3498db);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 16px;
        width: calc(50% - 16px);
    }
    
    .back-to-search-btn:hover {
        background: linear-gradient(135deg, #a4dffb, #5ec7f8);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3);
    }
    #resetSearch.back-to-search-btn {
        background: linear-gradient(135deg, #b4df6f, #8bc82c);
    }
    #resetSearch.back-to-search-btn:hover {
        background: linear-gradient(135deg, #a5cc66, #b4df6f);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(80, 125, 10, 0.3);
    }
    /* 切換按鈕樣式 */
    .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;
    }
    
    .criteria-item.active {
        background-color: #f0f9ff;
        border-color: #cfebfd;
        box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
    }
    
    .criteria-toggle-btn {
        position: absolute;
        right: 5px;
        top: 5px;
        width: 20px;
        height: 20px;
        border: none;
        border-radius: 50%;
        background: #8bc82c;
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        z-index: 20;
        font-size: 10px;
    }
    
    .criteria-toggle-btn:hover {
        background: #f0f0f0;
        color: #666;
        transform: scale(1.1);
    }
    
    .criteria-toggle-btn:not(.active) {
        background: #f0f0f0;
        color: #666;
    }
    
    .criteria-toggle-btn:not(.active):hover {
        background: #e0e0e0;
        color: #333;
    }
    
    .criteria-toggle-btn i {
        font-size: 10px;
    }
    
    .criteria-values {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 5px;
        position: relative;
        z-index: 5;
    }
    
    .criteria-value {
        padding: 4px 8px;
        border-radius: 4px;
        background: #81d5fc;
        color: white;
        border: 1px solid #9acce3;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 12px;
        font-weight: 500;
    }
    
    .criteria-value:not(.active) {
        background: #f5f5f5;
        color: #666;
        border: 1px solid #ddd;
    }
    
    .criteria-value:hover {
        background: #e3f2fd;
        border-color: #2196f3;
        color: #2196f3;
        transform: translateY(-1px);
    }
    
    .criteria-value:not(.active):hover {
        background: #e3f2fd;
        border-color: #2196f3;
        color: #2196f3;
    }
    
    .filter-sidebar .criteria-value {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    
    .filter-sidebar .facet-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        padding: 0 6px;
        height: 20px;
        border-radius: 60px;
        background: #f90;
        font-size: 11px;
        color: #fff;
    }
    
    .filter-sidebar .criteria-value:not(.active) .facet-count {
        background: rgba(0, 0, 0, 0.08);
        color: #fff;
    }
    
    .filter-sidebar .criteria-value.active .facet-count {
        background: #ff0066;
        color: #fff;
    }
    
    .criteria-item strong {
        display: block;
        margin-bottom: 5px;
        color: #000;
        font-weight: 600;
        position: relative;
        z-index: 5;
        padding-right: 25px;
    }
    .criteria-item strong.active {
        color: #333;
        font-weight: 700;
    }

    .criteria-item.active strong {
        color: #333;
        font-weight: 700;
    }
    .plus-one {
    position: absolute;
    font-size: 14px;
    color: #ff5252;
    font-weight: bold;
    pointer-events: none;
    opacity: 1;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
    z-index: 1000;
}
.plus-one.animate {
    transform: translateY(-30px) scale(1.3);
    opacity: 0;
}

.overlay.show {
    display: block;
}
.container.result-container {
    max-width: 780px;
    margin: 0 auto;
    border-radius: 0;
}
.select-wrapper {
    position: relative;
    min-width: 120px;
}
.results-summary {
    display: flex;
    justify-content:space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 20px;
}
.results-count {
    font-size: 15px;
    color: #333;
    display: flex;
    width:50%;
    height: 100%;
    align-items: center;
}
.results-count i{
    color: #6ec902;
    margin-right: 6px;
}
.results-count strong{
    color: #f90;
    font-weight: 600;
    padding: 0 4px;
}
.sort-filter {
    display: flex;
    gap: 1rem;
    align-items: center;
    width: 50%;
    justify-content: end;
}

.sort-filter button {
    border-radius: 5px;
    background: #3498db;
    color: white;
    border: none;
    cursor: pointer;
}

.sort-filter button:hover {
    background: #2980b9;
    transform: translateY(-2px) 0.3s;
}

.product-image  .no-images{
    width:40%;
}

.no-results {
    text-align: center;
    padding: 3rem;
    color: #ddd;
    grid-column: 1 / -1;
}
.no-results h3{
    font-size: 24px;
}
.no-results p{
    color: #ddd;
    font-size: 14px;
}

.no-results i {
    font-size: 4rem;
    color: #ddd;
    margin-bottom: 1rem;
}
.product-actions .btn{
    font-size: 14px;
    padding: 9px 20px;
}
.countdown-container{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 16px;
}
.yhdjs{
    font-size: 16px;
    color: #333;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 767px) {
.product-detail {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 0;
}
.duration-price-list{
    margin-bottom: 20px;
}
}

/* 中小屏移動裝置 */
@media (max-width: 480px) {
    .prev,
    .next {
        width: 40px;
        height: 40px;
    }

    .prev svg,
    .next svg {
        width: 20px;
        height: 20px;
    }
    .detail-code-value{
        font-size: 18px;
    }
}

/* 響應式設計 */
@media (max-width: 540px) {
    .top-bq{
        width:48px;
    }
    .page-youhui-listing.page-more-list .product-card{
        height: auto
    }
    /* 倒計時在小屏防止溢位 */
    .countdown-timer {
        margin-top: 10px;
        margin-bottom: 14px;
    }

    .countdown-display {
        flex-wrap: nowrap;
        width: 100%;
        gap: clamp(2px, 1vw, 6px);
        justify-content: center;
    }

    .time-unit {
        flex: 1 1 0;
        min-width: 0;
        padding: clamp(3px, 1vw + 2px, 7px) clamp(5px, 1.5vw + 2px, 9px);
    }

    /* 倒計時 MINI 版防溢位 */
    .countdown-display-mini {
        flex-wrap: nowrap;
        width: 100%;
        gap: clamp(2px, 1vw, 5px);
    }

    .time-unit-mini {
        flex: 1 1 0;
        min-width: 0;
        width: 100%;
        padding: clamp(2px, 1vw + 1px, 5px) clamp(4px, 1vw + 2px, 7px);
        box-sizing: border-box;
    }

    .time-value-mini {
        font-size: clamp(0.7rem, 2.5vw, 0.85rem);
    }

    .time-label-mini {
        font-size: clamp(0.48rem, 1.8vw, 0.6rem);
    }

    .time-separator-mini {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: clamp(0.7rem, 1.8vw, 0.9rem);
        z-index: 11;
        position: relative;
    }

    .time-separator {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: clamp(0.9rem, 2.2vw, 1.1rem);
        z-index: 11;
        position: relative;
    }

    .countdown-timer-overlay {
        right: 0;
        padding: 3px 5px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    /* 資訊行：保持水平，只有 code 另起一行 */
    .details-containe .information {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        height: auto;
    }
    .details-containe .information span {
        display: inline-flex;
        align-items: center;
    }
    .details-containe .information .code {
        display: block;
        width: 100%;
        white-space: normal;
        margin-top: 4px;
        text-align: left;
    }
    .caption h2{
        display: block;
        font-size: 16px;
        padding: 0!important;
        margin: 0!important;
    }
    /* 排行榜資訊行保持同行，code 不換行 */
    .phb-list .details-containe .information {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }
    .phb-list .details-containe .information .code {
        display: inline-flex;
        width: auto;
        white-space: nowrap;
        margin-top: 0;
    }

    /* 優惠專區：第3條資訊另起一行 */
    .yhzq-list .details-containe li.information:nth-of-type(3) {
        /* display: block; */
        width: 100%;
        white-space: nowrap;

        text-align: left;
    }

    #caipin-card-modal-overlay{
     height: calc(100vh - 100px);
    }
    .product-rating-price {
        align-items: flex-start;
        gap: 8px;
    }

    .product-rating {
        margin-bottom: 0;
    }

    .product-price {
        align-self: flex-end;
    }



    .top-container {
        height: 96px;
    }

    .nav .welcome {
        height: 40px;
        padding: 12px;
    }

    nav .nav-row.left {
        font-size: 18px;
        padding-left: 12px;
        justify-content: flex-start;
    }

    nav .nav-row.right {
        width: 73%;
    }

    .index-search-input {
        width: 60%;
    }

    .index-search {
        width: 75%;
    }

    .jj-search {
        width: 25%;
        display: flex;
        font-size: 14px;
        color: white;
        padding-left: 6px;
        padding-top: 10px;
        white-space: nowrap;
    }

    .homepage_logo {
        left: 3%;
        top: 90px;
        width: 14%;
    }



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

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

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

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

    .carousel-slide .caption h3 {
        margin: 0;
    }

    .carousel-slide .caption p {
        margin: 0;
    }

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

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

    .Site-Notice {
        height: 50px;
    }

    .Site-Notice .left {
        width: 60%;
    }

    .Site-Notice .right {
        padding: 10px;
        font-size: 15px;
        justify-content: end;
        padding-right: 18px;
    }

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

    .Site-Notice .right svg {
        width: 14px;
        height: 14px;
    }

    .marquee-item {
        padding: 0 10px;
    }

    .yhzq-top h1 {
        font-size: 30px;
    }

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

    .information.yj span {
        font-size: 14px;
        font-weight: 700;
    }

    .information.xj span {
        font-size: 14px;
        font-weight: 700;
    }

    .phb-containe {
        padding: 8px;
        padding-top: 40vw;
    }
    .phb-containe .more{
        top:28vw;
    }
    .index-phb-div {
        width: 99.5%;
        margin: 0 auto;
        padding:5px;
    }

    .phb-list {
        flex: 0 0 calc((100% - 12px) / 2);
        width: calc((100% - 12px) / 2);
        max-width: calc((100% - 12px) / 2);
        height: auto;
    }

    #ranking-section .phb-feature-grid > .phb-list {
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
    }

    #ranking-section .phb-row-trio .phb-list {
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
    }
    #ranking-section .phb-row-trio{
        gap: 5px;
        margin-top: 5px;
    }
    .phb-list .details-containe {
        font-size: 13px;
    }

    .phb-list .jq span {
        font-size: 14px;
    }

    .phb-list .img-containe {
        height: 300px;
    }

    #ranking-section .phb-layout-rank-1 .img-containe,
    #ranking-section .phb-layout-rank-2 .img-containe,
    #ranking-section .phb-layout-rank-3 .img-containe,
    #ranking-section .phb-layout-rank-4 .img-containe {
        flex: 0 0 42% !important;
        width: 42% !important;
        max-width: 148px !important;
        min-width: 76px !important;
        min-height: 140px !important;
        height: 100% !important;
        max-height: none !important;
    }

    #ranking-section .phb-row-trio .phb-list .img-containe {
        height: 140px !important;
        min-height: 140px !important;
        max-height: 140px !important;
    }

    #ranking-section .phb-row-trio .phb-list .bottom-icons {
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 2px !important;
        gap: 0 !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
    }

    #ranking-section .phb-row-trio .phb-list .bottom-icons span {
        font-size: 13px !important;
        line-height: 18px !important;
        min-height: 15px !important;
        padding: 0 !important;
        gap: 3px;
        color: #999 !important;
        font-weight: 600 !important;
        font-family: 'AVANTI', ui-sans-serif, system-ui, sans-serif !important;
    }

    #ranking-section .phb-row-trio .phb-list .bottom-icons i {
        font-size: 13px !important;
        box-sizing: border-box;
        width: 15px !important;
        min-width: 15px !important;
        height: 15px !important;
        min-height: 15px !important;
    }

    #ranking-section .phb-list .img-containe .vip-badge,
    #pickup-section .yhzq-list .img-containe .vip-badge,
    #delivery-section .yhzq-list .img-containe .vip-badge,
    .page-todaynew-listing .yhzq-list .img-containe .vip-badge {
        top: 6px !important;
        right: 4px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        min-width: 40px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        font-size: 11px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
    }

    .yhzq-list .img-containe .yhzq-activity-time-badge {
        top: 6px !important;
        left: 4px !important;
        min-width: 40px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        font-size: 11px !important;
        padding: 0 10px !important;
    }

    #pickup-section .yhzq-list .img-containe .product-badge,
    #delivery-section .yhzq-list .img-containe .product-badge,
    .page-todaynew-listing .yhzq-list .img-containe .product-badge {
        top: auto !important;
        left: 6px !important;
        right: auto !important;
        bottom: 40px !important;
        transform: none !important;
        min-width: 40px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        font-size: 11px !important;
        padding: 0 10px !important;
    }

    #ranking-section .phb-list .img-containe .product-badge {
        left: 6px !important;
        bottom: 10px !important;
        min-width: 40px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        font-size: 11px !important;
        padding: 0 10px !important;
    }

    #ranking-section .phb-layout-rank-2 .details-containe li,
    #ranking-section .phb-layout-rank-3 .details-containe li,
    #ranking-section .phb-layout-rank-4 .details-containe li {
        height: auto !important;
        min-height: 24px !important;
    }

    .phb-list .details-containe {
        height: auto;
    }

    .phb-list .details-containe li {
        height: 32px;
    }

    .bottom-icons {
        margin-top: 0;
    }
    .bottom-icons.dingdian{
        gap: 6px;
    }
    .subpage.bottom-icons {
        padding: 0 4px;
        gap: 0;
    }
    .yhzq-containe.dingdian .yhzq-list-containe{
        padding: 0;
        padding-bottom: 10px;
        gap: 14px;
    }
    .yhzq-containe.dingdian .yhzq-list {
        flex: 0 0 calc((100% - 14px) / 2);
        width: calc((100% - 14px) / 2);
        max-width: auto;
    }

    .yhzq-list {
        display: flex;
        flex-direction: column;
    }

    .yhzq-list .img-containe,
    .yhzq-list .details-containe {
        width: 100%;
    }

    .vip-badge {
        height: 28px;
        min-height: 28px;
        max-height: 28px;
        padding: 0 10px;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.15;
        align-items: center;
        justify-content: center;
        animation: none;
    }

    .dingdian .details-containe {
        padding: 10px;
        font-size: 12px;
    }
    .details-containe .information {
        height: 24px;
    }
    .details-containe .information.yj {
        height: auto;
        font-size: 12px!important;
    }
    .details-containe .information.xj {
        height: auto;
                font-size: 12px!important;
    }
    .information.yj span{
        height: 24px;
        line-height: 24px;
    }
    .information.xj span{
        height: 24px;
        line-height: 24px;
    }
    .details-containe .information.first {
        height: auto;
        padding-bottom: 10px;
    }
    .pingfen{
        font-size: 30px;
    }
    .details-containe ul .pingfen {
        top:2px;
    }
    .pingfen .pingfen-value{
        font-size: 32px;
    }

    .dingdian .bottom-icons span {
        padding: 0 4px;
        font-size: 13px;
        line-height: 18px;
        min-height: 15px;
        gap: 3px;
    }

    .dingdian .bottom-icons span.i-sc {
        background: url(../images/i-sc.png) no-repeat left center;
        background-size: 15px 15px;
        padding-left: 18px;
        min-height: 15px;
        line-height: 15px;
        gap: 0;
    }

    .dingdian .bottom-icons span.i-zan {
        background: url(../images/i-zan.png) no-repeat left center;
        background-size: 15px 15px;
        padding-left: 18px;
        min-height: 15px;
        line-height: 15px;
        gap: 0;
    }

    .dingdian .bottom-icons span.i-pl {
        background: url(../images/i-pl.png) no-repeat left center;
        background-size: 15px 15px;
        padding-left: 18px;
        min-height: 15px;
        line-height: 15px;
        gap: 0;
    }

    #footer {
        position: sticky;
        width: 100%;
        z-index: 100;
        box-shadow: rgba(0, 0, 0, 0.1) 0px -3px 3px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        border-radius: 0;
        height: 100px;
        margin-bottom: 0;
    }

    footer div {
        font-size: 13px;
        padding-bottom: 6px;
    }

    .foot-home {
        background-position-y: 10px
    }

    .foot-home.active {
        background-position-y: 10px
    }

    .foot-home a:hover {
        background-position-y: 10px
    }

    .foot-phb {
        background-position-y: 10px
    }

    .foot-phb.active {
        background-position-y: 10px
    }

    .foot-phb a:hover {
        background-position-y: 10px
    }

    .foot-kf {
        background-position-y: 10px
    }

    .foot-kf.active {
        background-position-y: 10px
    }

    .foot-kf a:hover {
        background-position-y: 10px
    }

    .foot-new {
        background-position-y: 10px
    }

    .foot-new.active {
        background-position-y: 10px
    }

    .foot-new a:hover {
        background-position-y: 10px
    }

    .foot-uc {
        background-position-y: 10px
    }

    .foot-uc.active {
        background-position-y: 10px
    }

    .foot-uc a:hover {
        background-position-y: 10px
    }

    .sub-section {
        padding: 13px;
        padding-top: 0;
        min-height: calc(100vh - 234px);
        /* padding-bottom: 98px; */
    }

    .sub-header {
        margin-top: 2rem;
    }

    .sub-header h1 {
        font-size: 18px;
        /* font-weight: normal; */
    }

    .sub-header .subtitle {
        padding: 0;
        margin: 0;
        padding-left: 5%;
        margin-bottom: 20px;
        font-size: 18px;
    }

    .tab {
        font-size: 16px;
    }

    .points-table {
        margin-bottom: 20px;
    }

    .points-table th {
        padding: 0;
        white-space: nowrap;
        font-size: 15px;
    }

    .points-table th.Order {
        width: 15%;
    }

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

    .points-table th.General {
        display: none;
    }

    .points-table td {
        padding: 8px;
    }

    td[data-label="綜合"] {
        display: none;
    }

    .top-rank {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .player {
        justify-content: left;
        gap: 6px;
    }

    .avatar {
        width: 45px;
        min-width: 45px;
        height: 45px;
        border: 2px solid rgba(85, 200, 250, 0.1);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        margin-right: 0;
    }

    .name {
        margin-bottom: 0;
        font-size: 13px;
        text-align: left;
    }

    .level {
        font-size: 12px;
    }

    .points-table .stat {
        font-family: "avenir";
        font-size: 18px;
        font-weight: 600;
    }

    .hot-text {
        font-style: normal;
    }

    .progress-value {
        font-style: normal;
        top: -14px;
    }

    .points-table .bottom-icons {
        flex-direction: column;
        gap: 4px;
    }

    .points-table .bottom-icons i {
        width: 100%;
        min-height: 15px;
        height: 15px;
        box-sizing: border-box;
        text-align: left;
        padding-right: 6px;
    }

    .popularity {
        margin-top: 10px;
        font-weight: normal;
    }

    .model-overlay {
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    .global-modal.top-list:hover .model-overlay {
        opacity: 1;
    }

    .model-name,
    .model-origin {
        font-weight: normal;
    }

    .model-info .stat {
        font-style: normal;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .filter-section {
        flex-direction: column;
        align-items: stretch;
    }

    .categories {
        justify-content: center;
        white-space: nowrap;
        gap: 5px;
    }

    .category-dropdown {
        flex: 1;
    }
    .category-dropdown.todaynew-city-dropdown{
        flex: none;
    }
    .range-tabs a{
        font-size: 1.4rem;
    }
    .sort-container {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .sort-buttons {
        justify-content: center;
    }

    .category-btn {
        min-width: calc(25% - 10px);
        font-weight: normal;
        padding: 5px 9px;
        font-size: 14px;
    }

    .sort-btn {
        padding: 8px 0;
        white-space: nowrap;
        font-size: 14px;
    }

    .details-container-top {
        display: flex;
        flex-direction: column;
        height: auto;
        position: relative;
    }

    /* .product-details {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        font-weight: normal;
    } */

    .product-desc {
        padding-top: 20px;
    }

    /* .product-image {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 50%;
        height: 100%;
    }
    
    .product-info {
        margin-left: 50%;
        width: 50%;
        flex: 1;
        overflow: hidden;
        padding: 10px 15px;
        padding-bottom: 0;
    } */
     .product-info{
        padding: 0 14px;
     }

    .detail-item.sub-price .current-price{
        font-size: 14px;
    }
    /* .global-lable {
        font-weight: normal;
    } */

    .subpage.bottom-icons span {
        font-size: 13px;
        line-height: 15px;
        min-height: 15px;
        padding: 0;
        gap: 3px;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
    }

    .subpage.bottom-icons span i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 16px;
        min-width: 16px;
        height: 15px;
        min-height: 15px;
        margin-right: 0;
        font-size: 13px;
    }

    .product-badge {
        font-weight: normal;
        bottom: 40px;
        left: 15px;
        right:auto;
        padding: 6px 12px;
        /* font-size: 14px; */
        font-weight: 600;
    }

    body.no-scroll {
        width: 100%;
        overflow: hidden !important;
    }

    .customer-service-modal .modal-content {
        top: auto;
        bottom: 0;
        left: 0;
        border-radius: 20px 20px 0 0;
        height: 350px;
    }

    .customer-service-modal .qr-codes-container {
        gap: 15px;
    }

    .customer-service-modal .qr-code {
        width: 120px;
        height: 120px;
    }

    /* 詳細頁面樣式 */
    .container {
        padding: 0;
    }

    .container.details-container {
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        /* padding: 0; */
    }

    .product-detail {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0;
    }

    .product-detail .product-info {
        margin-left: 0;
        width: 100%;
        padding: 15px;
    }

    .thumbnail-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .thumbnail {
        aspect-ratio: 1;
    }

    .specs-grid {
        grid-template-columns: 1fr;
    }

    .action-buttons {
        flex-direction: column;
    }
    .global-modal.top-list .action-buttons {
        flex-direction: row;
    }
    /* .wishlist-btn {
        width: 100%;
        height: 50px;
    } */

    /* .review-controls {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    } */

    .radar-controls {
        grid-template-columns: 1fr;
    }

    header h1 {
        font-size: 1.8rem;
    }

    header p {
        font-size: 0.9rem;
    }

    header {
        flex-direction: column;
        padding: 20px 15px;
        min-height: 100px;
        gap: 20px;
        background-size: cover;
        margin-bottom: 10px;
    }

    .logo-container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 12px;
        right: 12px;
        height: 100%;
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-start;
        order: 1;
        max-width: none;
    }

    .logo-image {
        width: var(--m1-logo-size, clamp(48px, 14vw, 72px));
        height: 100%;
        aspect-ratio: 1 / 1;
    }

    .logo-img {
        width: 100%;
    }

    .logo-main-right {
        padding-top: 8px;
        gap: 6px;
    }

    .logo-text {
        padding-bottom: 10px;
    }

    .logo-title {
        font-size: clamp(16px, 4.8vw, 22px);
    }

    .logo-subtitle {
        font-size: 0.6rem;
    }

    .search-container,
    .search-container.active {
        position: relative;
        top: auto;
        right: auto;
        width: auto;
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
        transform: none;
        opacity: 1;
        margin: 0;
        pointer-events: auto;
    }

    .search-box {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        padding-right: 16px;
        margin-right: 4px;
    }

    .search-input {
        width: auto;
        min-width: 0;
        line-height: 20px;
        padding-inline: 0;
    }

    .user-menu,
    .search-icon-btn {
        position: static;
        top: auto;
        right: auto;
    }

    /* .user-btn{
        width: 34px;
        height: 34px;
    }
    .user-btn i{
        font-size: 1.6rem;
    } 

    .search-toggle-btn{
        width: 34px;
        height: 34px;
    }
    .search-toggle-btn i{
        font-size: 1.2rem;
    }
        */
    .advanced-search-btn {
        right: -42px;
        margin-left: 4px;
    }


    .image-search-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px;
        min-height: 36px;
        box-sizing: border-box;
    }

    .search-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px;
        min-height: 36px;
        box-sizing: border-box;
    }

    .search-input::placeholder {
        font-size: 13px;
    }

    .product-header {
        gap: 10px;
        justify-content: space-between;
    }

    .product-title {
        font-size: 1.6rem;
        margin: 10px 0;
    }
    .product-title .nickname{
        display: block;
        width: 100%;
        font-size: 20px;
    }
    .product-title .code{
        display: block;
        margin-top: 4px;
    }
    .detail-item.sub-pingfen{
        flex-wrap: wrap;
        justify-content: flex-end;
        top: 8px;
        right: 10px;
    }
    .product-code {
        font-size: 1.0rem;
        padding: 4px 8px;
    }

    .current-price {
        font-size: 1.6rem;
    }
    .detail-item.sub-price{
        grid-column: 1 / -1;
        width: 100%;
    }
    .detail-item.sub-price .original-price {
        font-size: 13px;
        margin-left: 0;
    }

    .radar-chart {
        width: 250px;
        height: 250px;
    }

    /* .product-features {
        grid-template-columns: 1fr;
    } */

    .product-stats {
        gap: 0;
        border-top: 1px solid #eaf7ff;
        border-bottom: 1px solid #eaf7ff;
        padding: 15px 0;
        margin: 0;
    }

    .product-features {
        margin-bottom: 10px;
        margin-top: 20px;
    }

    /* .stat-item {
        justify-content: flex-start;
        width: 100%;
        padding: 6px;
        background: rgba(248, 249, 250, 0.8);
        border-radius: 6px;
    } */
    
    /* .detail-item{
        margin-bottom: 0;
        font-weight: normal;
        font-size: 13px;
    } */
    
    /* 卡片中的地區內容一行顯示，超出顯示省略號 */
    .detail-item .detail-city {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: block !important;
        flex: 1;
        min-width: 0;
        max-width: 100%;
    }
    
    .product-actions{
        padding: 0;
        gap: 0;
        margin-top: 0;
    }
    .page-youhui-listing.page-more-list .product-actions{
        margin-top: auto;
    }
    .add-to-cart{
        box-shadow: none;
        border-bottom-right-radius: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .wishlist-btn{
        box-shadow: none;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .stat-item i {
        font-size: 1rem;
    }

    .stat-value {
        font-size: 0.9rem;
    }



    .carousel-container.subpage {
        border-radius: 6px;
    }

    /* Fade */
    .carousel-slide.fade-anim {
        width: 100vw;
    }

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

    /* CoverFlow */
    .carousel-slide.coverflow-anim {
        width: 100vw;
    }

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

    .product-gallery {
        background: #fff;
        height: 60vh;
        min-height: 540px;
        /* border-radius: 0; */
    }

    .product-gallery .main-image {
        height: calc(100% - 72px);
    }

    .customer-reviews {
        border-radius: 0;
        padding: 15px;
        padding-bottom: 0;
        margin-top: 10px;
    }

    .reviews-title {
        /* border-bottom: 1px solid #eaf7ff; 
        padding-left: 16px;*/
        font-size: 20px;
    }

    .sort-options h2 {
        font-size: 20px;
        padding-left: 0;
    }

    .reviewer {
        font-size: 13px;
    }

    .review-user-info {
        flex-wrap: wrap;
    }

    .review-date {
        flex-basis: 100%;
        width: 100%;
        text-align: left;
    }

    .reply-user {
        font-size: 12px;
    }
    .reply-target{
        font-size: 12px;
    }
    .reply-text{
        width: 100%;
        font-size: 13px;
    }
    .deleted-content{
        font-size: 12px;
    }
    .reply-text.deleted-content{
        font-size: 12px;
    }
    .comment-filter-tabs {
        margin-left: 0;
    }
    .comment-badge-list{
        display: none;
    }
    .product-specs {
        padding: 0 20px;
        margin-bottom: 0;
    }

    .interaction-stats {
        gap: 10px;
    }

    .radar-chart-container {
        margin-bottom: 10px;
    }

    .feature-item {
        font-weight: 500;
    }

    .spec-item {
        font-weight: 500;
    }

    .current-rating {
        font-weight: 500;
        font-size: 14px;
    }

    .rating-value {
        font-size: 20px;
    }

    /* 媒體上傳元件 */
    .media-item {
        width: calc(33.333% - 7px);
        /* 移動端一行顯示3個 */
        touch-action: none;
        /* 禁用瀏覽器預設的觸控手勢 */
    }

    .media-action-btn {
        width: 36px;
        height: 36px;
        top: 8px;
        right: 8px;
    }

    .preview-nav {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        touch-action: manipulation;
        /* 最佳化移動端觸控 */
    }

    .upload-area {
        padding: 20px;
    }

    .upload-prompt i {
        font-size: 40px !important;
    }

    /* 移動端拖拽最佳化 */
    .media-item.dragging {
        transform: scale(1.1);
        opacity: 0.9;
    }

    .media-preview-list {
        touch-action: pan-y;
        /* 允許垂直滾動，但禁用橫向手勢 */
    }

    /* 表情選擇器 */
    .emoji-picker-popup {
        width: 80%;
        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;
    }

    /* 代調確認彈框移動端保持垂直居中與半寬按鈕 */
    .confirm-toast.confirm-toast--daidiao {
        top: 50%;
        min-width: min(320px, 92vw);
        max-width: min(420px, 92vw);
    }

    .confirm-toast.confirm-toast--daidiao .confirm-toast-content {
        flex-direction: column;
        align-items: stretch;
        padding: 20px 14px 14px;
    }

    .confirm-toast.confirm-toast--daidiao .confirm-toast-message {
        font-size: 14px;
        padding: 8px 28px 0;
    }

    .confirm-toast.confirm-toast--daidiao .confirm-toast-actions {
        padding: 0;
        gap: 10px;
    }

    .confirm-toast.confirm-toast--daidiao .confirm-toast-btn {
        flex: 1 1 50%;
        width: 50%;
        border-radius: 20px;
    }


    /* 移動端評論媒體列表3列布局 */
    .comment-media-list {
        grid-template-columns: repeat(3, 1fr) !important;
        /* 3列網格 */
    }

    /* 移動端單張圖片也按3列中的1列顯示 */
    .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%;
    }

    /* 移動端兩張圖片也按3列布局 */
    .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;
    }

    /* 移動端三張圖片正好3列 */
    .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;
    }

    .global-container {
        border-radius: 0;
        box-shadow: none;
        margin: 0;
    }
    
    .thumbnails-container::-webkit-scrollbar {
        height: 0;
    }
    
    .thumbnails-container::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        margin: 0 0;
    }
    
    /* 以下樣式來自 hl-search.css */
    .container.hl-search-container{
        margin-top:0 ;
        border-radius: 0;
    }
    
    .search-title{
        font-size: 1.1rem;
    }
    .form-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .form-group {
        min-width: 100%;
    }
    
    .btn-group {
        flex-direction: column;
    }
    
    .custom-checkbox-group {
        gap: 8px;
    }
    
    .custom-checkbox-item {
        padding: 6px 12px;
        font-size: 14px;
    }
    
    .area-dropdown.show {
        max-height: min(55vh, 360px);
    }
    
    .error-toast {
        width: 60%;
        max-width: 400px;
        white-space: nowrap;
    }
    .container.result-container{
        height: auto;
        min-height: calc(100vh - 96px);
        padding: 20px;
    }
    .results-header{
        padding-bottom: 0;
    }
    .invert-selection-btn {
        right: 0;
    }
    .filter-sidebar {
        width: 85%;
    }
    .results-header h1{
        font-size: 20px;
    }
    .results-count{
        font-size: 14px;
        width: 100%;
        height: 30px;
    }
   .products-grid {
        grid-template-columns: 1fr;
    }
    
  .results-summary {
        flex-direction: column;
        gap: 1rem;
    }
    
    .sort-filter {
        flex-wrap: wrap;
        justify-content:center;
        width:100%;
    }
    .pagination {
        margin: 0;
    }
    .yhdjs{
        display: none;
    }
}




@media (max-width: 320px) {
    .logo-title {
        font-size: clamp(13px, 5vw, 16px);
    }
    .carousel-slide .caption{
        padding: 10px;
    }
    .caption h2 {
        font-size: 13px;
    }
    .carousel-slide .caption p {
        font-size: 11px;
    }
    /* 排行榜卡片垂直排列 */
    .phb-list {
        flex: 0 0 calc((100% - 8px) / 2);
        width: calc((100% - 8px) / 2);
        max-width: calc((100% - 8px) / 2);
        flex-direction: column;
        min-height: auto;
    }

    #ranking-section .phb-feature-grid > .phb-list {
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
    }

    #ranking-section .phb-row-trio .phb-list {
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
    }

    .phb-list .img-containe {
        width: 100%;
        height: 180px;
    }

    #ranking-section .phb-layout-rank-1 .img-containe,
    #ranking-section .phb-layout-rank-2 .img-containe,
    #ranking-section .phb-layout-rank-3 .img-containe,
    #ranking-section .phb-layout-rank-4 .img-containe {
        flex: 0 0 34% !important;
        width: 34% !important;
        max-width: 100px !important;
        min-width: 56px !important;
        min-height: 140px !important;
        height: 100% !important;
        max-height: none !important;
    }

    #ranking-section .phb-row-trio .phb-list .img-containe {
        height: 140px !important;
        min-height: 140px !important;
        max-height: 140px !important;
    }

    #ranking-section .phb-row-trio .phb-list .bottom-icons {
        /* height: 40px !important;
        min-height: 40px !important; */
        padding: 0 2px !important;
        gap: 0 !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
    }

    #ranking-section .phb-row-trio .phb-list .bottom-icons span {
        font-size: 13px !important;
        line-height: 15px !important;
        min-height: 15px !important;
        padding: 0 !important;
        gap: 3px;
    }

    #ranking-section .phb-row-trio .phb-list .bottom-icons i {
        font-size: 13px !important;
        box-sizing: border-box;
        width: 15px !important;
        min-width: 15px !important;
        height: 15px !important;
        min-height: 15px !important;
    }

    #ranking-section .phb-list .img-containe .vip-badge,
    #pickup-section .yhzq-list .img-containe .vip-badge,
    #delivery-section .yhzq-list .img-containe .vip-badge,
    .page-todaynew-listing .yhzq-list .img-containe .vip-badge {
        top: 10px !important;
        right: 8px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        min-width: 38px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        font-size: 11px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
    }

    .yhzq-list .img-containe .yhzq-activity-time-badge {
        top: 10px !important;
        left: 10px !important;
        min-width: 38px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        font-size: 11px !important;
        padding: 0 10px !important;
    }

    #pickup-section .yhzq-list .img-containe .product-badge,
    #delivery-section .yhzq-list .img-containe .product-badge,
    .page-todaynew-listing .yhzq-list .img-containe .product-badge {
        top: auto !important;
        left: 52px !important;
        right: auto !important;
        bottom: 44px !important;
        transform: none !important;
        min-width: 38px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        font-size: 10px !important;
        padding: 0 10px !important;
    }

    #ranking-section .phb-list .img-containe .product-badge {
        left: 52px !important;
        bottom: 8px !important;
        min-width: 38px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        font-size: 10px !important;
        padding: 0 10px !important;
    }

    #ranking-section .phb-layout-rank-2,
    #ranking-section .phb-layout-rank-3,
    #ranking-section .phb-layout-rank-4 {
        flex-direction: row !important;
    }

    #ranking-section .phb-layout-rank-2 .details-containe li,
    #ranking-section .phb-layout-rank-3 .details-containe li,
    #ranking-section .phb-layout-rank-4 .details-containe li {
        height: auto !important;
        min-height: 22px !important;
    }

    .phb-list .details-containe {
        width: 100%;
    }

    .phb-list .details-containe li {
        height: auto;
        min-height: 35px;
        padding: 8px 10px;
        font-size: 12px;
    }

    .phb-list .jq span {
        font-size: 14px;
    }

    .phb-list .nickname {
        font-size: 14px;
    }

    .details-containe .pingfen.phgList {
        top: auto;
        bottom: 5px;
        left: auto;
        right: 16px;
        width: auto;
        background: none;
        padding-left: 0;
        font-size: 18px;
        text-align: right;
        display: inline-flex;
        align-items: center;
        flex-wrap: nowrap;
        line-height: 1;
    }

    .promotion-grid .promotion-card {
        flex: 0 0 calc((100% - 8px) / 2);
        width: calc((100% - 8px) / 2);
        max-width: calc((100% - 8px) / 2);
    }

    .promotion-card__media {
        aspect-ratio: 5 / 6;
    }

    .vip-badge {
        top: 10px;
        right: 10px;
        min-width: 58px;
        height: 28px;
        min-height: 28px;
        max-height: 28px;
        font-size: 11px;
        padding: 0 10px;
    }

    .promotion-card .product-badge {
        /* top: 10px;
        right: 10px;
        width: 58px; */
        height: 28px;
        min-height: 28px;
        max-height: 28px;
        font-size: 10px;
        padding: 0 10px;
    }

    .promotion-card .countdown-timer-overlay {
        left: 8px;
        right: 8px;
        bottom: 8px;
        padding: 4px 6px;
    }

    .promotion-card__details {
        padding: 10px 10px 9px;
    }

    .promotion-grid .promotion-card .details-containe .information.first .nickname,
    #promotion-slider .promotion-card .details-containe .information.first .nickname {
        font-size: 15px;
    }

    .promotion-card__stats {
        gap: 4px;
    }

    .promotion-card__stats span {
        font-size: 13px;
        line-height: 15px;
        min-height: 15px;
        gap: 3px;
    }

    .promotion-card__stats span i {
        font-size: 13px;
        box-sizing: border-box;
        width: 15px;
        min-width: 15px;
        height: 15px;
        min-height: 15px;
    }

    /* 定點、外約卡片一行一列 */
    .yhzq-list-containe {
        flex-direction: column;
        gap: 12px;
    }

    .promotion-grid.yhzq-list-containe {
        flex-direction: row;
        gap: 8px;
    }

    .yhzq-list {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }

    .yhzq-containe.dingdian .yhzq-list {
        flex: 0 0 100%;
        width: 100%;
    }

    .promotion-grid .promotion-card {
        flex: 0 0 calc((100% - 8px) / 2);
        width: calc((100% - 8px) / 2);
        max-width: calc((100% - 8px) / 2);
    }

    .yhzq-list .img-containe {
        height: 180px;
    }

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

/* 超小屏移動裝置 */
@media (max-width: 320px) {
    nav .nav-row.right {
        width: 80%;
    }

    .index-search {
        width: 72%;
    }

    .jj-search {
        font-size: 13px;
        padding-left: 6px;
    }

    nav .nav-row.left {
        font-size: 14px;
    }

    .index-search-input {
        width: 50%;
        font-size: 12px;
    }

    .yhzq-top h1 {
        font-size: 20px;
    }

    .yhzq-top {
        height: 60px;
    }

    .yhzq-top .more {
        min-width: 70px;
        height: 32px;
        font-size: 12px;
    }

    .yhzq-list .jq span {
        font-size: 12px;
        font-weight: normal;
    }

    .dingdian .bottom-icons span {
        padding-left: 0;
        font-size: 13px;
        line-height: 15px;
        min-height: 15px;
        gap: 3px;
    }

    .dingdian .bottom-icons span.i-sc {
        background: url(../images/i-sc.png) no-repeat left center;
        background-size: 15px 15px;
        padding-left: 18px;
        min-height: 15px;
        line-height: 15px;
        gap: 0;
    }

    .dingdian .bottom-icons span.i-zan {
        background: url(../images/i-zan.png) no-repeat left center;
        background-size: 15px 15px;
        padding-left: 18px;
        min-height: 15px;
        line-height: 15px;
        gap: 0;
    }

    .dingdian .bottom-icons span.i-pl {
        background: url(../images/i-pl.png) no-repeat left center;
        background-size: 15px 15px;
        padding-left: 18px;
        min-height: 15px;
        line-height: 15px;
        gap: 0;
    }

    .sub-header h1 {
        font-size: 24px;
    }

    .sub-header .subtitle {
        font-size: 1.0rem;
    }

    .tab {
        font-size: 13px;
    }

    .points-table th {
        font-size: 14px;
    }

    .avatar {
        width: 38px;
        height: 38px;
    }

    .name {
        font-size: 12px;
    }

    td[data-label="菜品"] {
        white-space: nowrap;
    }

    .stat {
        font-size: 18px;
    }
    
    /* 以下樣式來自 hl-search.css */
    .results-count {
        font-size: 12px;
        width: 100%;
    }
    .select-wrapper{
        min-width: 100px;
    }
    .sort-filter button{
        border-radius: 3px;
    }
    .filter-toggle{
        border-radius: 3px;
        padding: 7px 12px;
    }
    .custom-select {
        padding: 6px 12px;
        border-radius: 3px;
        font-size: 13px;
    }
    .select-wrapper:after{
        right: 8px;
    }
    .container.result-container {
        padding: 15px;
    }
    .no-results{
        padding: 1.5rem;
        text-align: center;
        width: 100%;
    }
    .no-results i{
        font-size: 40px;
        margin-bottom: 0;
    }
    .no-results h3{
        font-size: 18px;
    }
    .no-results p{
        font-size: 13px;
    }
}

/* 產品卡片佔位元素樣式 - 用於保持卡片高度一致 */
.information.yj.price-placeholder,
.information.xj.price-placeholder,
.information.jq.price-placeholder {
    visibility: hidden;
    height: 30px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* 定點、外約區塊：沒有價錢時，底部按鈕與有價錢時頂部對齊 */
/* .yhzq-list .details-containe ul:has(.information.jq.price-placeholder:last-child) + .bottom-icons.dingdian {
    margin-top: 0 !important;
} */

/* 使用 :has() 選擇器（如果瀏覽器支援） */
/* .yhzq-list:has(.information.jq.price-placeholder) .bottom-icons.dingdian {
    margin-top: 0 !important;
} */

/* 相容方案：透過 JavaScript 動態調整 */
/* .yhzq-list.no-price .bottom-icons.dingdian {
    margin-top: 0 !important;
} */

/* qianse code case preserve */
.code,
.product-title .code,
.details-containe .information .code,
.yhzq-list .code,
.phb-list .code {
    text-transform: none !important;
    font-variant-caps: normal !important;
}

/* 首頁排行榜佈局兜底：新線稿網格 + 防全域 .phb-list 半寬擠壞 */
section#ranking-section .index-phb-div--ranking {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: visible;
}

section#ranking-section .index-phb-div--ranking .phb-feature-grid > .phb-list {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
}

section#ranking-section .index-phb-div--ranking .phb-feature-grid > .phb-list.phb-layout-rank-1 {
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

section#ranking-section .index-phb-div--ranking .phb-feature-grid > .phb-list.phb-layout-rank-2,
section#ranking-section .index-phb-div--ranking .phb-feature-grid > .phb-list.phb-layout-rank-3,
section#ranking-section .index-phb-div--ranking .phb-feature-grid > .phb-list.phb-layout-rank-4 {
    flex-direction: row !important;
    align-items: stretch;
    flex-wrap: nowrap;
}

section#ranking-section .index-phb-div--ranking .phb-row-trio .phb-list {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
}

/*
 * 移動端／窄視口：排行榜第 5–10 名兩列。
 * - 1024px：覆蓋常見平板直向；!important 防內聯或其它表；選擇器對齊 .index-phb-div--ranking 結構。
 */
@media (max-width: 1024px) {
    section#ranking-section .index-phb-div--ranking .phb-row-trio {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    section#ranking-section .index-phb-div--ranking .phb-row-trio .phb-list {
        min-width: 0 !important;
    }
}

/* 移動端：價錢(jq) / 原價(yj) / 現價(xj) 字級統一 14px（覆蓋 540/390/375 等處零散設定） */


/*
 * 移動端（≤768px）：排行榜第 1–4 名在 .phb-feature-grid 內垂直堆疊（單列），
 * 每卡圖左文右；第 1 名與第 2–4 名同一套間距、左圖、右欄、評分角、底部統計樣式。
 */
@media (max-width: 768px) {
    #ranking-section .phb-feature-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: none !important;
        grid-auto-rows: minmax(0, auto) !important;
        /* 第 1–4 名卡片垂直堆疊時的間距 */
        gap: 5px !important;
    }

    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-1,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-2,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-3,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-4 {
        grid-column: 1 !important;
        grid-row: auto !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    section#ranking-section .index-phb-div--ranking .phb-feature-grid > .phb-list.phb-layout-rank-1,
    section#ranking-section .index-phb-div--ranking .phb-feature-grid > .phb-list.phb-layout-rank-2,
    section#ranking-section .index-phb-div--ranking .phb-feature-grid > .phb-list.phb-layout-rank-3,
    section#ranking-section .index-phb-div--ranking .phb-feature-grid > .phb-list.phb-layout-rank-4 {
        flex-direction: row !important;
        height: auto !important;
    }

    /* 左圖：第 1–4 名同寬（含 max-width，避免第 1 名被 42% 撐得比 2–4 名更寬） */
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-1 .img-containe,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-2 .img-containe,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-3 .img-containe,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-4 .img-containe {
        flex: 0 0 42% !important;
        width: 42% !important;
        max-width: 148px !important;
        min-width: 76px !important;
        min-height: 140px !important;
        height: 100% !important;
        max-height: none !important;
        align-self: stretch !important;
        border-top-left-radius: 10px !important;
        border-bottom-left-radius: 10px !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-1 .img-containe img,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-2 .img-containe img,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-3 .img-containe img,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-4 .img-containe img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-1 .details-containe,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-2 .details-containe,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-3 .details-containe,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-4 .details-containe {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        position: static !important;
        padding: 6px 8px 8px !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-top-right-radius: 10px !important;
        border-bottom-right-radius: 10px !important;
    }

    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-1 .details-containe ul,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-2 .details-containe ul,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-3 .details-containe ul,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-4 .details-containe ul {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        flex: 0 1 auto !important;
        align-items: stretch !important;
        width: 100% !important;
        min-height: 0 !important;
        gap: 0 !important;
        margin-bottom: auto !important;
    }

    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-1 .details-containe ul > li.information:last-child,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-2 .details-containe ul > li.information:last-child,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-3 .details-containe ul > li.information:last-child,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-4 .details-containe ul > li.information:last-child {
        border-bottom: none !important;
    }

    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-1 .details-containe ul > li.information,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-2 .details-containe ul > li.information,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-3 .details-containe ul > li.information,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-4 .details-containe ul > li.information {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-1 .details-containe .pingfen,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-2 .details-containe .pingfen,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-3 .details-containe .pingfen,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-4 .details-containe .pingfen {
        top: 15px !important;
        right: 15px !important;
        left: auto !important;
        bottom: auto !important;
    }

    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-1 .bottom-icons,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-2 .bottom-icons,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-3 .bottom-icons,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-4 .bottom-icons {
        margin-top: 0 !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 6px !important;
        margin-bottom: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        justify-content: space-between !important;
        gap: 4px !important;
        flex-wrap: nowrap !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        align-items: center !important;
        padding-top: 15px !important;
    }

    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-1 .bottom-icons span,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-2 .bottom-icons span,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-3 .bottom-icons span,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-4 .bottom-icons span {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 0 !important;
    }

    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-1 .bottom-icons i,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-2 .bottom-icons i,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-3 .bottom-icons i,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-4 .bottom-icons i {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: 15px !important;
        min-width: 15px !important;
        height: 15px !important;
        min-height: 15px !important;
        font-size: 13px !important;
        line-height: 1 !important;
    }
}

/* 極窄屏：feature-grid 內第 1–4 名左圖比例與原 2–4 名 375 斷點一致 */
@media (max-width: 376px) {
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-1 .img-containe,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-2 .img-containe,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-3 .img-containe,
    #ranking-section .phb-feature-grid > .phb-list.phb-layout-rank-4 .img-containe {
        flex: 0 0 34% !important;
        width: 34% !important;
        max-width: 100px !important;
        min-width: 56px !important;
        min-height: 140px !important;
        height: 100% !important;
    }
    .image-search-btn i{
        font-size: 0.6rem;
    }
    .search-btn i{
        font-size: 0.6rem;
    }
}

/* 移動端：排行榜頁趨勢欄副文案 .trend-detail 與主趨勢文案右對齊 */
@media (max-width: 768px) {
    .points-table .trend-indicator .trend-detail,
    .trend-indicator .trend-detail {
        align-self: flex-end;
        text-align: right;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ===============================
   moban-1 頂部（#header）標題字號流體適配
   =============================== */
#header.top-container {
    --m1-title-size: clamp(16px, 1.1vw + 12px, 18px);
    --m1-logo-size: clamp(70px, 6vw + 40px, 100px);
}

#header .logo-title {
    font-size: var(--m1-title-size);
    line-height: 1.2;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    max-width: none;
}

@media (max-width: 768px) {
    #header.top-container {
        --m1-header-min-h: clamp(94px, 25vw, 116px);
        --m1-logo-size: clamp(42px, 12vw, 56px);
        --m1-title-size: clamp(14px, 4.8vw, 18px);
        --m1-icon-btn: clamp(34px, 9.8vw, 44px);
        --m1-search-h: clamp(34px, 9.8vw, 42px);
        --m1-search-action-btn: clamp(22px, 6.8vw, 30px);
        min-height: var(--m1-header-min-h);
        height: var(--m1-header-min-h);
        padding: 0;
        margin-bottom: 10px;
    }

    #header .logo-container {
        top: 0;
        bottom: 0;
        left: 12px;
        right: 12px;
        height: 100%;
        transform: none;
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-start;
        gap: clamp(8px, 2.2vw, 12px);
        max-width: none;
    }

    #header .logo-image {
        width: var(--m1-logo-size);
        height: 100%;
        aspect-ratio: 1 / 1;
        flex: 0 0 auto;
    }

    #header .logo-img {
        width: 100%;
    }

    #header .logo-main-right {
        padding-top: 20px;
        gap: 6px;
    }

    #header .logo-main-top {
        gap: clamp(6px, 1.5vw, 10px);
        flex-wrap: nowrap;
    }

    #header .user-menu,
    #header .search-icon-btn {
        position: static;
        top: auto;
        right: auto;
        transform: none;
        flex: 0 0 auto;
    }

    #header .user-btn {
        width: var(--m1-icon-btn);
        height: var(--m1-icon-btn);
        flex-shrink: 0;
    }

    #header .user-btn i {
        font-size: clamp(1.2rem, 4.7vw, 1.55rem);
    }

    #header .search-icon-btn,
    #header .search-toggle-btn {
        display: none !important;
    }

    #header .search-container,
    #header .search-container.active {
        position: relative;
        top: auto;
        right: auto;
        width: auto;
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
        transform: none;
        opacity: 1;
        margin: 0;
        pointer-events: auto;
    }

    /* 搜尋容器：內部元素流體縮放（勿用 width:100%，避免擠壓 advanced-search-btn 與 user-btn 重疊） */
    #header .search-container .search-box {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        height: var(--m1-search-h);
        padding: 0 clamp(5px, 1.2vw, 9px) 0 clamp(10px, 2.6vw, 16px);
        margin-right: clamp(4px, 1.1vw, 8px);
    }

    #header .search-container .search-input {
        font-size: clamp(12px, 3.2vw, 14px);
        line-height: var(--m1-search-h);
    }

    #header .search-container .search-input::placeholder {
        font-size: clamp(11px, 3vw, 13px);
    }

    #header .search-container .image-search-btn,
    #header .search-container .search-btn {
        width: var(--m1-search-action-btn) !important;
        height: var(--m1-search-action-btn) !important;
        min-width: var(--m1-search-action-btn);
        min-height: var(--m1-search-action-btn);
    }

    #header .search-container .advanced-search-btn {
        margin-left: clamp(2px, 0.6vw, 4px);
        width: var(--m1-icon-btn);
        height: var(--m1-icon-btn);
        min-width: var(--m1-icon-btn);
        min-height: var(--m1-icon-btn);
        flex: 0 0 auto;
        flex-shrink: 0;
    }

    #header .search-container .advanced-search-btn i {
        font-size: clamp(1rem, 3.8vw, 1.25rem);
    }

    #header .search-box {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        height: var(--m1-search-h);
        padding: 0 clamp(4px, 1vw, 8px) 0 clamp(10px, 2.5vw, 16px);
        margin-right: clamp(2px, 0.6vw, 6px);
    }

    #header .search-input {
        width: auto;
        min-width: 0;
        line-height: var(--m1-search-h);
        font-size: clamp(12px, 3.4vw, 14px);
    }

    #header .search-input::placeholder {
        font-size: clamp(12px, 3.2vw, 13px);
    }

    #header .image-search-btn,
    #header .search-btn {
        width: var(--m1-search-action-btn) !important;
        height: var(--m1-search-action-btn) !important;
        min-width: var(--m1-search-action-btn);
        min-height: var(--m1-search-action-btn);
    }

    #header .advanced-search-btn {
        right: auto;
        margin-left: clamp(4px, 1vw, 8px);
    }
}

@media (max-width: 540px) {
    #header.top-container {
        --m1-header-min-h: clamp(88px, 24vw, 102px);
        --m1-logo-size: clamp(38px, 11vw, 68px);
        --m1-title-size: clamp(12px, 4.5vw, 14px);
        --m1-icon-btn: clamp(32px, 9vw, 38px);
        --m1-search-h: clamp(32px, 9vw, 36px);
        --m1-search-action-btn: clamp(20px, 6.2vw, 26px);
    }

    #header .search-box {
        width: auto;
        border-radius: 20px;
    }

    #header .search-container .search-box {
        width: auto;
        padding-left: clamp(8px, 2.4vw, 12px);
        margin-right: 2px;
    }

    #header .search-container .advanced-search-btn {
        width: var(--m1-icon-btn);
        height: var(--m1-icon-btn);
        min-width: var(--m1-icon-btn);
        min-height: var(--m1-icon-btn);
        margin-left: 2px;
        flex: 0 0 auto;
    }
}

@media (max-width: 375px) {
    #header.top-container {
        --m1-header-min-h: 84px;
        --m1-logo-size: clamp(32px, 10vw, 40px);
        --m1-title-size: clamp(12px, 3.6vw, 14px);
        --m1-icon-btn: 28px;
        --m1-search-h: 28px;
        --m1-search-action-btn: 16px;
    }

    #header .logo-container {
        top: 0;
        bottom: 0;
        left: 8px;
        right: 8px;
        height: 100%;
        max-width: none;
        gap: 6px;
    }

    #header .logo-main-top {
        gap: 4px;
    }

    #header .search-box {
        width: auto;
        min-width: 0;
        padding-left: 8px;
        margin-right: 2px;
    }

    #header .search-container .search-box {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
    }

    #header .search-container .search-input {
        font-size: 12px;
    }

    #header .search-container .advanced-search-btn,
    #header .user-btn {
        width: var(--m1-icon-btn);
        height: var(--m1-icon-btn);
        min-width: var(--m1-icon-btn);
        min-height: var(--m1-icon-btn);
        margin-left: 2px;
        flex: 0 0 auto;
        flex-shrink: 0;
    }

    #header .user-menu {
        flex: 0 0 auto;
        margin-left: 0;
    }
}


/* 屏蔽前台轮播 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: 80px;
    height: 80px;
    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: 36px;
    margin-left: 4px;
}

.details-slide .video-poster-wrapper,
.main-image .video-poster-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* ===== 18禁彈窗最終鎖定（對齊 moban-2，防止後續全域樣式覆蓋） ===== */
#agreementBox.agreement-box {
    background: #fff;
    color: #333;
}
#agreementBox .agreement-title {
    color: #e74c3c;
    font-size: 1.8rem;
}
#agreementBox .agreement-content {
    color: #555;
    font-size: 16px;
    line-height: 40px;
    background: #f9f9f9;
    border: 1px solid #eee;
}
#agreementBox .checkbox-container {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 0;
    color: #333;
    font-size: 15px;
}
#agreementBox .checkbox-container input {
    display: inline-block !important;
    margin-right: 10px;
    width: 18px;
    height: 18px;
    visibility: visible !important;
}
#agreementBox .checkbox-container label {
    color: #333;
    font-size: inherit;
    cursor: pointer;
}
#agreementBox .btn-accept {
    background: #2ecc71;
    color: #fff;
}
#agreementBox .btn-reject {
    background: #e74c3c;
    color: #fff;
}
#agreementBox .buttons .btn {
    width: 118px;
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
}
@media (max-width: 768px) {
    #agreementBox .agreement-title {
        font-size: clamp(1.15rem, 4.8vw, 1.55rem);
    }
    #agreementBox .agreement-content {
        line-height: clamp(26px, 5.4vw, 34px);
    }
    #agreementBox .checkbox-container {
        margin-bottom: clamp(10px, 2.6vw, 16px);
        font-size: clamp(13px, 3.4vw, 15px);
    }
    #agreementBox .buttons .btn {
        width: clamp(84px, 24vw, 116px);
        font-size: clamp(0.76rem, 2.7vw, 0.86rem);
    }
}
@media (max-width: 540px) {
    #agreementBox .agreement-content {
        line-height: 38px;
        font-size: 14px;
    }
    #agreementBox .buttons .btn {
        width: clamp(78px, 26vw, 102px);
        font-size: clamp(0.80rem, 2.5vw, 0.85rem);
    }
}
@media (max-width: 375px) {
    #agreementBox .agreement-content {
        line-height: 32px;
        font-size: 14px;
    }
    #agreementBox .buttons .btn {
        width: clamp(72px, 24vw, 92px);
        font-size: clamp(0.68rem, 2.3vw, 0.76rem);
    }
}

/* mobile width lock: 無全域 border-box 時防止 95vw+padding 溢出 */
#agreementBox.agreement-box {
    box-sizing: border-box !important;
    max-width: min(500px, 95vw);
}
@media (max-width: 768px) {
    #agreementBox.agreement-box {
        width: min(92vw, 520px) !important;
        max-width: 95vw !important;
        box-sizing: border-box !important;
    }
}
@media (max-width: 540px) {
    #agreementBox.agreement-box {
        width: 94vw !important;
        max-width: 95vw !important;
        padding: clamp(12px, 3vw, 18px) !important;
        box-sizing: border-box !important;
    }
}
@media (max-width: 375px) {
    #agreementBox.agreement-box {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ===== 18禁彈窗層級鎖定 ===== */
#agreementOverlay,
#agreementOverlay.overlay,
#agreementOverlay.overlay.show {
    z-index: 10000000 !important;
}
#agreementBox,
#agreementBox.agreement-box,
#agreementBox.agreement-box.show {
    z-index: 10000001 !important;
}