/* 仟色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: 0 auto;
    padding: 0;
    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;
}

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;

}

.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: 50%;
    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;
    height: 190px;
    /* 不阻擋點選 */
}
.carousel-slide .caption  h2{
    padding: 0!important;
    margin: 0!important;
}
.details-slide .caption {
    display: none;

}

.carousel-slide .caption h3 {
    font-size: 24px;
}

.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%;
    height: 80px;
    background: #f5f5f5;
    display: flex;
    position: relative;
}

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

.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: #000;
    font-size: 18px;
    font-weight: bold;
}

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

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

.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: #000;
    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: 18px;
    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;
    padding: 16px;
}

.yhzq-list {
    flex: 1 1 calc(33.333% - 14px);
    /* 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;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* 確保定點和外約在桌面端顯示三列 */
.yhzq-containe.dingdian .yhzq-list {
    flex: 0 0 calc((100% - 28px) / 3);  /* 固定寬度，不伸縮 */
    width: calc((100% - 28px) / 3);
}

.yhzq-containe.dingdian .yhzq-list .img-containe .product-badge {
    top: auto;
    right: auto;
    bottom: 44px;
    left: 10px;
    z-index: 11;
}

.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%;
    height: 200px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 活動時間標籤（與 moban-5 定點／外約／優惠卡左上角「時間」膠囊一致） */
.yhzq-containe.dingdian .yhzq-list .img-containe .yhzq-activity-time-badge,
.yhzq-list .img-containe .yhzq-activity-time-badge {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 0 12px;
    box-sizing: border-box;
    line-height: 1;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 11;
    max-width: calc(100% - 24px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 44px;
    border-radius: 999px;
    background: rgba(126, 73, 176, 0.56);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 定點／外約：與 moban-5 相同，時間左上、VIP 右上，避免與時間標籤重疊 */
.yhzq-containe.dingdian .yhzq-list .img-containe .vip-badge {
    top: 12px;
    right: 12px;
    left: auto !important;
    bottom: auto;
}

@media (max-width: 768px) {
    .yhzq-containe.dingdian .yhzq-list .img-containe .yhzq-activity-time-badge,
    .yhzq-list .img-containe .yhzq-activity-time-badge {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        top: 11px !important;
        left: 11px !important;
        min-width: 40px !important;
        font-size: 11px !important;
    }

    .yhzq-containe.dingdian .yhzq-list .img-containe .vip-badge {
        top: 11px !important;
        right: 11px !important;
        left: auto !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 11px !important;
    }

    .yhzq-containe.dingdian .yhzq-list .img-containe .product-badge {
        bottom: 42px;
        left: 9px;
    }
}

@media (max-width: 480px) {
    .yhzq-containe.dingdian .yhzq-list .img-containe .yhzq-activity-time-badge,
    .yhzq-list .img-containe .yhzq-activity-time-badge {
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        padding-left: 9px !important;
        padding-right: 9px !important;
        top: 10px !important;
        left: 10px !important;
        min-width: 38px !important;
        font-size: 11px !important;
    }

    .yhzq-containe.dingdian .yhzq-list .img-containe .vip-badge {
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        padding-left: 9px !important;
        padding-right: 9px !important;
        font-size: 11px !important;
    }

    .yhzq-containe.dingdian .yhzq-list .img-containe .product-badge {
        bottom: 40px;
        left: 8px;
    }
}

.vip-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    right: auto;
    bottom: auto;
    margin: 0;
    z-index: 10;
    width: auto;
    min-width: 0;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 0 12px;
    border-radius: 30px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    background: #0ba0ca;
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: none;
    text-shadow: none;
    box-shadow: none;
}

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

.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;
    box-shadow: 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,
.img_div > 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,
.img_div > a.img-containe-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

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

.details-containe ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.details-containe ul .pingfen{
    top: clamp(-8px, -1.5vw, -10px);
    right: 0;
    font-size: clamp(14px, 2.2vw, 18px);
}
.details-containe ul .pingfen span{
    font-size: clamp(18px, 2.8vw, 24px);
}
.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;
    min-width: 0;
    overflow: hidden;
}
.details-containe .information .nickname {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 4px;
    text-align: left;
}
.details-containe .information .code {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    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;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.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;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.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-size: contain;
    position: relative;
    padding: 16px;
    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;
}

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

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

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

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

.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;
}
.top-bq img{
    width: 100%;
}
/* 從第二個 top-bq 開始，img 寬度為 70% */
.index_phb_row li:nth-child(n+2) .top-bq img {
    width: 70%;
}

.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;
    font-weight: 600;
    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 {
    width: 45%;
    background: url(../images/lable_1.png) no-repeat center center;
    background-size: 100%;
    position: absolute;
    right: clamp(10px, 2vw, 20px);
    top: clamp(-40px, -6vw, -60px);
    font-size: clamp(18px, 3.5vw, 30px);
    font-weight: bolder;
    color: #fff;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2px, 0.5vw, 3px);
}
.phb-list:nth-child(3n+1) .pingfen,
.yhzq-list:nth-child(3n+1) .pingfen {
    background: url(../images/lable_1.png) center no-repeat;
    background-size: contain;
}
.phb-list:nth-child(3n+2) .pingfen,
.yhzq-list:nth-child(3n+2) .pingfen {
    background: url(../images/lable_2.png) center no-repeat;
    background-size: contain;
}
.phb-list:nth-child(3n+3) .pingfen,
.yhzq-list:nth-child(3n+3) .pingfen {
    background: url(../images/lable_3.png) center no-repeat;
    background-size: contain;
}
.pingfen span {
    font-family: "avenir";
    font-size: clamp(24px, 4.5vw, 40px);
    color: #fff;
}
.detail-item.sub-pingfen{
    position: absolute;
    right: 20px;
    top: 0;
    font-size: 20px;
    font-weight: bolder;
    display: flex;
    align-items: center;
    color: #333;
    border-bottom: 0;
}
.detail-item.sub-pingfen .global-lable{
    font-size: 20px;
    white-space: nowrap;
}
.detail-item.sub-pingfen .rating-value{
    margin-left: 5px;
    margin-right: 0;
}
.detail-item.sub-pingfen .reviews{
    width: 100%;
    font-size: 12px;
    text-align: right;
    color: #333;
    font-weight: normal;
    margin-bottom: 10px;
}

.detail-item.sub-price .current-price{
    font-size: 20px;
    font-weight: bolder;
    color: #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;
    align-items: center;
    justify-content: left;
    gap: 20px;
    padding: 0 10px;
    margin-top: 5px;
}

.bottom-icons.dingdian {
    padding-left: 0;
    padding-top: 10px;
}
.bottom-icons.paihangbang {
    padding-left: 0;
    padding-top: 0;
    height: auto;
}

.bottom-icons span {
    display: flex;
    flex: 0 0 auto;
    height: 100%;
    align-items: center;
    padding: 0 13px;
    color: #999;
    font-weight: 600;
    font-size: 15px;
    font-family: 'AVANTI';
}
.bottom-icons i {
    margin-right: 3px;
}
.bottom-icons.dingdian  span{
    padding:0;
}
.bottom-icons span.i-sc {
    background: url(../images/i-sc.png) no-repeat left center;
    background-size: 22px 22px;
}

.bottom-icons span.i-zan {
    background: url(../images/i-zan.png) no-repeat left center;
    background-size: 22px 22px;
}

.bottom-icons span.i-pl {
    background: url(../images/i-pl.png) no-repeat left center;
    background-size: 22px 22px;
}

/* 首頁底部統計：排行榜與優惠／定點／外約／推薦同一套（.bottom-icons.paihangbang + .toolbar.yhzq；PNG + 字號） */
.yhzq-list .details-containe > .toolbar.yhzq,
.index_phb_row li .nr_div > .toolbar.yhzq {
    width: 100%;
    max-width: 100%;
    color: #78492b;
    height: 30px;
    min-height: 30px;
    line-height: 30px;
    font-size: clamp(11px, 2.6vw, 14px);
    box-sizing: border-box;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 5px;
    overflow: hidden;
    padding: 0;
}

/* 覆蓋通用 .bottom-icons（高度／間距），與排行榜列一致 */
.yhzq-list .details-containe > .bottom-icons.toolbar.yhzq {
    margin-top: 0;
    height: 30px;
    min-height: 30px;
    gap: 5px;
    justify-content: space-between;
    padding: 0;
}

/* 與排行榜 .nr_div 內統計列相同：貼底；左側空出 10px */
/* .yhzq-list .details-containe > .toolbar.yhzq {
    position: absolute;
    left: 10px;
    right: 0;
    bottom: 0;
    width: auto;
    margin-top: 0;
} */

.yhzq-list .details-containe > .toolbar.yhzq span,
.index_phb_row li .nr_div > .toolbar.yhzq span {
    height: 28px;
    min-height: 28px;
    display: flex;
    align-items:  flex-end;
    overflow: hidden;
    font-size: clamp(10px, 2.4vw, 13px);
    flex: 1 1 0;
    min-width: 0;
    padding-top: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    font-family: 'AVANTI', 'avenir', sans-serif;
    line-height: 23px;
}

.yhzq-list .details-containe > .toolbar.yhzq span.shoucang,
.index_phb_row li .nr_div > .toolbar.yhzq span.shoucang {
    background: url(../images/i-sc.png) left center no-repeat;
    background-size: clamp(12px, 3.2vw, 16px);
    padding-left: clamp(16px, 4.2vw, 22px);
    box-sizing: border-box;
}

.yhzq-list .details-containe > .toolbar.yhzq span.i_zan,
.index_phb_row li .nr_div > .toolbar.yhzq span.i_zan {
    background: url(../images/i-zan.png) left center no-repeat;
    background-size: clamp(12px, 3.2vw, 16px);
    padding-left: clamp(16px, 4.2vw, 22px);
    box-sizing: border-box;
}

.yhzq-list .details-containe > .toolbar.yhzq span.i_pinglun,
.index_phb_row li .nr_div > .toolbar.yhzq span.i_pinglun {
    background: url(../images/i-pl.png) left center no-repeat;
    background-size: clamp(12px, 3.2vw, 16px);
    padding-left: clamp(16px, 4.2vw, 22px);
    box-sizing: border-box;
}

/* .index_phb_row li .nr_div > .toolbar.yhzq,
.index_phb_row li .nr_div > .bottom-icons.paihangbang.toolbar.yhzq {
    position: absolute;
    left: 10px;
    right: 0;
    bottom: 0;
    width: auto;
    margin-top: 0;
} */

.index_phb_row li .nr_div > .bottom-icons.toolbar.yhzq {
    height: 30px;
    min-height: 30px;
    gap: 5px;
    padding: 0;
    justify-content: space-between;
    margin-left: 10px;
}

/* -------底部導航------ */
footer {
    max-width: var(--container);
    height: 120px;
    margin: 0 auto;
    background: #1183a5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
}

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

footer div a {
    color: #bbb;
    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: #fff;
    font-weight: bold;
}

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

.foot-home a:hover {
    background: url(../images/i-home-on.png) center no-repeat;
    background-size: 30px 30px;
    background-position-y: 10px;
    color: #fff;
    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;
    font-weight: bold;
}

.foot-phb.active a {
    color: #fff;
}

.foot-phb a:hover {
    background: url(../images/i-phb-on.png) center no-repeat;
    background-size: 30px 30px;
    background-position-y: 10px;
    color: #fff;
    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: #fff;
    font-weight: bold;
}

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

.foot-kf a:hover {
    background: url(../images/i-kefu-on.png) center no-repeat;
    background-size: 30px 30px;
    background-position-y: 10px;
    color: #fff;
    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: #fff;
    font-weight: bold;
}

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

.foot-new a:hover {
    background: url(../images/i-new-on.png) center no-repeat;
    background-size: 30px 30px;
    background-position-y: 10px;
    color: #fff;
    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: #fff;
    font-weight: bold;
}

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

.foot-uc a:hover {
    background: url(../images/i-uc-on.png) center no-repeat;
    background-size: 30px 30px;
    background-position-y: 10px;
    color: #fff;
    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, #0aa0c9, #1183a5);
    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: 199;
    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);
}
.sub-section.phb{
    width: 100%;
    height: auto;
    overflow: visible;
    background: #0c96bf url(../images/ss_phb.webp) no-repeat top center;
    background-size: contain;
    /* padding-top: 13px; */
}
.sub-section.newcaipin{
    background: #0c96bf;
}
.list-container.newcaipin{
    width: 100%;
    height: auto;
    overflow: hidden;
    background: #0c96bf url(../images/list_header.webp) no-repeat top center;
    background-size: 100%;
    margin-top: -102px;
    padding-top: 100px;
}
.list-container.morecaipin{
    width: 100%;
    height: auto;
    overflow: hidden;
    background: #0c96bf url(../images/new_header.webp) no-repeat top center;
    background-size: 100%;
    margin-top: -102px;
    padding-top: 100px;
}
.list-container.youhuicaipin{
    width: 100%;
    height: auto;
    overflow: hidden;
    background: #0c96bf url(../images/search_phb.webp) no-repeat top center;
    background-size: 100%;
    margin-top: -102px;
    padding-top: 100px;
}
.details-section {
    background-color: #fff;
    padding: 0;
}

.sub-header {
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
}
.sub-header.newcaipin{
    display: flex;
    height: 70px;
    align-items: center;
}
.sub-header.newcaipin .category-dropdown.todaynew-city-dropdown,
.sub-header.newcaipin .category-dropdown.todaynew-area-dropdown,
.sub-header.newcaipin .category-dropdown.todaynew-country-dropdown,
.sub-header.newcaipin .category-dropdown.todaynew-service-dropdown {
    width:100px;
    margin-left:2%;
}
.sub-header-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.sub-header-title.newcaipin{
    width: 60%;
}
.sub-header.newcaipin .range-tabs{
    margin-top: 70px;
}

.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{
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.range-tabs a{
    color:#fff;
    font-size: 3.6rem;
    padding: 0 20px;
    padding-right: 10px;
    font-weight: 600;
    display: inline-block;
    width:10.0rem;
    height: 10.0rem;
    font-weight: 600;
    border-left: 2px solid #fff;
}
.range-tabs a:first-child{
    border-left: none;
}
.range-tabs h1{
    color:#fff;
    font-size: 3.6rem;
    padding: 0 20px;
    padding-right: 0;
    padding-right: 10px;
    font-weight: 600;
    display: inline-block;
    width:10.0rem;
    height: 10.0rem;
    font-weight: 600;
    line-height: 4.0rem;
    border-right: 2px solid #fff;
}
.range-tabs a:last-child{
    border-right: none;
}
.range-tabs span{
    color:#fff;
    font-size: 6.0rem;
    font-weight: 600;
    display: inline-block;
    width:6.0rem;
    height: 10.0rem;
    font-weight: 600;
    /* border-right: 2px solid #ccc; */
    line-height: 10.0rem;
    padding-left: 10px;
}
.range-tabs span: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; */
    padding: 0 20px;
}
.sub-container.phb{
    margin-top: 100px;
}
.sub-section.phb .pagination {
    /* margin-top: 30px;
    margin-bottom: 30px; */
    padding: 20px;
    background: transparent;
    border-radius: 10px;
}
.tabs {
    display: flex;
    /* background: #e8f3f7; */
    background: rgba(180, 245, 250, .3);
    border-radius: 50px;
    padding: 5px;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    color: #69888d;
    font-weight: 600;
}
.tabs.phb{
    width:60%;
}
.tab {
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
    z-index: 100;
    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: 5px;
}
.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;
}

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

.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: 5px;
    /* margin-top: 30px;
    margin-bottom: 30px; */
    grid-column: 1 / -1;
    /* 跨越所有grid列 */
    width: 100%;
    /* background: #fff; */
    padding: 20px;
}

.page-btn {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    aspect-ratio: 1;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    color: #D2F7EF;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "AVANTI", sans-serif;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    -webkit-appearance: none;
    appearance: none;
    border:1px solid #D2F7EF;
}

.page-btn.active {
    border-color: #fff;
    background: #24b7dd;
    color: #fff;
    font-weight: 600;
}

.page-btn:hover:not(.active):not([disabled]) {
    border-color: #fff;
    background: #24b7dd;
    color: #fff;
    font-weight: 600;
}

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

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

.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;
    border: none;
}
.points-table.phb{
    background: rgba(255, 255, 255, .8);
    margin-bottom: 20px;
}
.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;
    font-weight: 600;
}

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

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

.points-table th.Rating {
    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 tbody tr {
    border-bottom: 1px solid #f0ecec;
}

/* 確保最後一行完全沒有邊框 */
.points-table tbody tr:last-child {
    border-bottom: 0 !important;
}
.points-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* 每10條記錄（每頁最後一條）不顯示底部邊框 */
.points-table tbody tr:nth-child(10n) {
    border-bottom: 0 !important;
}
.points-table tbody tr:nth-child(10n) td {
    border-bottom: 0 !important;
}

.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: 12px;
    font-family: 'AVANTI';
}

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

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

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

.points-table .bottom-icons span {
    padding-left: 15px;
    font-size: 12px;

}

/* 排行榜卡片樣式 - 來自 moban_7 */
.index_phb_row {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #f6f6f6, transparent);
    padding: 10px;
}

.index_phb_row ul,
.index_phb_row li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.index_phb_row ul {
    width: 100%;
    height: auto;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.index_phb_row li {
    box-sizing: border-box;
    padding: 15px;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    position: relative;
    background: #f3f3f3;
}

/* 第一個 li：佔左側，高度為 3 個 li 的總和（186px * 3 + 8px * 2 = 574px） */
.index_phb_row li:nth-child(1) {
    grid-row: 1 / 4;
    height: calc(206px * 3 + 8px * 2);
}

/* 第二、三、四個 li：佔右側，各佔一行 */
.index_phb_row li:nth-child(2) {
    grid-row: 1 / 2;
}

.index_phb_row li:nth-child(3) {
    grid-row: 2 / 3;
}

.index_phb_row li:nth-child(4) {
    grid-row: 3 / 4;
}

/* 從第五個 li 開始，正常的兩列布局 */
.index_phb_row li:nth-child(n+5) {
    grid-row: auto;
}

.index_phb_row li .jianlue {
    /* letter-spacing: 10px; */
    font-weight: 600;
}

/* 第1名特殊樣式 */
.index_phb_row li:nth-child(1) {
    box-sizing: border-box;
    padding: 10px;
    display: block;
    position: relative;
    background: #fadcb5;
}

.index_phb_row li:nth-child(1) .img_div {
    width: 100%;
    height: 63%;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.index_phb_row li:nth-child(1) .nr_div {
    width: 100%;
    height: 37%;
    position: relative;
    overflow: hidden;
}

.index_phb_row li:nth-child(1) .pingfen {
    width: 120px;
    height: 65px;
    font-size: 24px;
    font-family: "Microsoft JhengHei";
    position: absolute;
    top: 0;
    right: 18px;
    color: #fff;
    z-index: 9;
    background: url(../images/lable_1.png) center no-repeat;
    background-size: contain;
    text-align: center;
    line-height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.index_phb_row li:nth-child(1) .pingfen span{
    font-size: 24px;
}
.index_phb_row li:nth-child(1) .jianlue {
    width: 100%;
    height: 45px;
    background-color: rgba(240, 165, 70, 0.8);
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 24px;
    color: #fff;
    text-align: center;
    line-height: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 10px;
    box-sizing: border-box;
}

.index_phb_row li:nth-child(1) .lable {
    width: 48px;
    height: 48px;
    border-radius: 60px;
    border: 6px solid #f9e9d5;
    background-image: linear-gradient(to right, #fdcf89, #f1a746);
    position: absolute;
    top: 5%;
    right: 0;
    font-size: 36px;
    color: #fff;
    text-align: center;
    line-height: 48px;
    font-weight: 800;
}

/* 第2、3、4名背景色 */
.index_phb_row li:nth-child(2) {
    background: #ffe4ef;
}

.index_phb_row li:nth-child(3) {
    background: #e4e3ff;
}

/* .index_phb_row li:nth-child(4) {
    background: #fff;
} */

.index_phb_row li:nth-child(n+2) .img_div {
    width: 35%;
    height: 100%;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    float: left;
}

.index_phb_row li:nth-child(n+2) .jianlue {
    width: 100%;
    height: 35px;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 18px;
    color: #fff;
    text-align: center;
    line-height: 35px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 8px;
    box-sizing: border-box;
}

.index_phb_row li:nth-child(2) .jianlue {
    background-color: rgba(255, 110, 165, 0.8);
    height: 35px;
    line-height: 35px;
}

.index_phb_row li:nth-child(3) .jianlue {
    background-color: rgba(110, 105, 255, 0.8);
    height: 35px;
    line-height: 35px;
}

.index_phb_row li:nth-child(n+2) .nr_div {
    width: 65%;
    height: 100%;
    position: relative;
    float: left;
  
}

.index_phb_row .nr_div dl,
.index_phb_row .nr_div dt {
    padding: 0;
    margin: 0;
}

.index_phb_row .nr_div dl {
    padding-top: 15px;
    padding-left: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
}

.index_phb_row li:nth-child(1) .nr_div dl {
    padding-top: 15px;
    padding-left: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 4px;
}

.index_phb_row li:nth-child(n+2) .nr_div dl {
    padding-top: 0;
    padding-left: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 4px;
}

.index_phb_row .nr_div dt {
    width: auto;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    height: auto;
    min-height: 20px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.index_phb_row li:nth-child(n+2) .nr_div dt {
    width: auto;
    max-width: none;
    min-width: 0;
    height: auto;
    min-height: 18px;
    font-size: 12px;
}

.index_phb_row li:nth-child(1) .nr_div dt.long,
.index_phb_row li:nth-child(n+2) .nr_div dt.long,
.index_phb_row .nr_div dt.long {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
}

/* 國籍、地區：dl 內第 1、2 個 dt，單列滿寬 */
.index_phb_row .nr_div dl > dt:first-of-type:not(.long),
.index_phb_row .nr_div dl > dt:nth-of-type(2):not(.long) {
    grid-column: 1 / -1;
}

.index_phb_row .nr_div dt > span {
    display: inline-block;
    /* width: 50px;
    text-align: justify;
    text-align-last: justify; */
    color: #000;
    /* padding-right: 6px; */
}

.index_phb_row li .nr_div em {
    font-style: normal;
    display: inline-block;
    padding-left: 8px;
    color: #444;
}

.index_phb_row .nr_div dt > em.num {
    font-family: "AVANTI";
    font-weight: 600;
}

.index_phb_row .nr_div dt > em.price {
    font-family: "AVANTI";
    font-weight: 600;
    color: #f90;
    font-size: 14px;
}
.index_phb_row .nr_div dt > em.price.yj {
    font-family: "AVANTI";
    font-weight: 800;
    color: #f00;
    text-overflow: ellipsis;
    text-decoration: line-through;
}
.index_phb_row .nr_div dt > em.price.xj {
    font-family: "AVANTI";
    font-weight: 800;
    color: #5dc401;
    text-overflow: ellipsis;
}
.index_phb_row li:nth-child(n+2) .pingfen {
    width: 90px;
    height: 43px;
    font-size: 18px;
    font-family: "Microsoft JhengHei";
    position: absolute;
    top: -14px;
    right: 0;
    color: #fff;
    z-index: 9;
    background: url(../images/lable_4.png) center no-repeat;
    background-size: contain;
    text-align: center;
    line-height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.index_phb_row li:nth-child(2) .pingfen {
    background: url(../images/lable_2.png) center no-repeat;
    background-size: contain;
    top: -14px;
}

.index_phb_row li:nth-child(3) .pingfen {
    background: url(../images/lable_3.png) center no-repeat;
    background-size: contain;
    top: -14px;

}

.index_phb_row li:nth-child(n+2) .pingfen span {
    font-size: 24px;
}

.index_phb_row li:nth-child(n+2) .lable {
    width: 45px;
    height: 45px;
    border-radius: 60px;
    border: 4px solid #e8f1f9;
    background-image: linear-gradient(to right, #d3e6f9, #b5d5f5);
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
    color: #fff;
    text-align: center;
    line-height: 45px;
    font-weight: 800;
}

.index_phb_row li:nth-child(2) .lable {
    border: 4px solid #fdd4e5;
    background-image: linear-gradient(to right, #faafcc, #fe70a8);
}

.index_phb_row li:nth-child(3) .lable {
    border: 4px solid #dad9f9;
    background-image: linear-gradient(to right, #d7c3f8, #6d68ff);
    bottom: 30%;
    top: auto;
}

.index_phb_row li .icon_tool {
    position: absolute;
    left: 10px;
    bottom: 0;
    width: 100%;
    height: 35px;
}

.index_phb_row li:nth-child(1) .icon_tool {
    left: 10px;
    bottom: 0;
    width: 100%;
    height: 35px;
}

.index_phb_row li:nth-child(n+2) .icon_tool {
    position: absolute;
    left: 35%;
    bottom: 0;
    width: 65%;
    height: 35px;
}

.index_phb_row li .icon_tool span {
    display: block;
    width: 80px;
    height: 50px;
    padding-left: 33px;
    float: left;
    box-sizing: border-box;
}

.index_phb_row li:nth-child(n+2) .icon_tool span {
    width: 33.3333%;
    height: 30px;
    padding-left: 32px;
}

.index_phb_row li .icon_tool p {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    color: #666;
    font-family: "AVANTI";
    font-size: 16px;
    line-height: 30px;
}

.index_phb_row li:nth-child(1) .icon_tool p {
    color: #bf5007;
    font-size: 16px;
    line-height: 30px;
}

.index_phb_row li:nth-child(n+2) .icon_tool p {
    font-size: 13px;
    line-height: 38px;
}

.index_phb_row li:nth-child(1) .i_zan {
    background: url(../images/i_zan_1.png) no-repeat;
    background-size: 25%;
    font-size: 0;
    background-position: 10px 3px;
}

.index_phb_row li:nth-child(1) .i_sc {
    background: url(../images/i_sc_1.png) no-repeat;
    background-size: 25%;
    font-size: 0;
    background-position: 10px 3px;
}

.index_phb_row li:nth-child(1) .i_pl {
    background: url(../images/i_pl_1.png) no-repeat;
    background-size: 25%;
    font-size: 0;
    background-position: 10px 3px;
}

.index_phb_row li:nth-child(n+2) .i_zan {
    background: url(../images/i_zan.png) no-repeat;
    background-size: 25%;
    font-size: 0;
    background-position: 10px 8px;
}

.index_phb_row li:nth-child(n+2) .i_sc {
    background: url(../images/i_sc.png) no-repeat;
    background-size: 25%;
    font-size: 0;
    background-position: 10px 8px;
}

.index_phb_row li:nth-child(n+2) .i_pl {
    background: url(../images/i_pl.png) no-repeat;
    background-size: 25%;
    font-size: 0;
    background-position: 10px 8px;
}

.index_phb_row li .img_div img.ppiicc {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* 通用遮罩 */
.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: 14px;
}

.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;
    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;
    font-size: 16px;
    background: linear-gradient(135deg, rgb(97, 209, 251), rgb(1, 184, 252));
    padding-left: 15px;
}

/* 下拉選單樣式 */
.category-dropdown {
    position: relative;
    display: flex;
}
.category-dropdown.todaynew-city-dropdown {
    width: 150px;
    margin-left: 0;
    margin-right: auto;
    flex-shrink: 0;
    margin-left: 6%;
}
.category-dropdown.todaynew-area-dropdown,
.category-dropdown.todaynew-country-dropdown,
.category-dropdown.todaynew-service-dropdown {
    width: 150px;
    margin-left: 10px;
    margin-right: auto;
    flex-shrink: 0;
}
.category-dropdown.todaynew-city-dropdown span,
.category-dropdown.todaynew-area-dropdown span,
.category-dropdown.todaynew-country-dropdown span,
.category-dropdown.todaynew-service-dropdown span {
    color:#fff;
    font-size: 16px;
}
.category-dropdown.todaynew-city-dropdown i,
.category-dropdown.todaynew-area-dropdown i,
.category-dropdown.todaynew-country-dropdown i,
.category-dropdown.todaynew-service-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: min(200px, calc(100vh - 150px));
    overflow: hidden;
    opacity: 0;
    margin-top: 5px;
    transition: all 0.3s ease;
    transform: translateY(-10px);
    scrollbar-width: thin;
    scrollbar-color: #c4c4c4 #f8f8f8;
    pointer-events: none;
}

/* .category-dropdown.todaynew-city-dropdown .dropdown-menu{
    left: -20px;
} */
.dropdown-menu.show {
    display: block;
    max-height: min(200px, calc(100vh - 150px));
    opacity: 1;
    transform: translateY(0);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1001;
    pointer-events: auto;
}
.range-tabs{
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
/* 禁用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;
}

.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;
    padding: 4px;
    background: #fff;
}

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

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

.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%;
    height: 70px;
    overflow: hidden;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    margin-top: 42px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.list-container.morecaipin .sort-container{
    margin-top: 0;
}
.sort-buttons {
    width: 100%;
    height: 100%;
    display: flex;
    background: #eaf7ff;
    /* background: #eee; */
    border-radius: 16px;
    overflow: hidden;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

}

.sort-btn {
    flex: 1;
    padding: 10px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 18px;
    font-weight: normal;
    position: relative;
    z-index: 100;
}

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

.sort-btn.active {
    color: white;
    font-weight: 600;
}
.sort-btn:nth-child(1) {
    background-color: rgba(240, 165, 70, 1.0);
}
.sort-btn:nth-child(2) {
    background-color: rgba(255, 110, 165, 1.0);
}
.sort-btn:nth-child(3) {
    background-color: rgba(110, 105, 255, 1.0);
}
.sort-btn:nth-child(4) {
    background-color: rgba(35, 180, 220, 1.0);
}
.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: 1.5rem;
    /* margin-top: 30px; */
    margin-bottom: 2rem;
}
.products-grid.results{
    padding: 0 20px;
    min-height: 63.55vh;
}
.list-container .products-grid{
    padding: 40px 20px;
    background-color: rgba(255, 255, 255, .6);
    margin-bottom: 10px;
}

/* 列表頁改用與首頁定點相同的 yhzq 卡片容器時，沿用原 products-grid 區塊視覺 */
.list-container .page-list-yhzq-shell {
    padding: 40px 20px;
    background-color: rgba(255, 255, 255, .6);
    margin-bottom: 10px;
}

/* 搜尋結果：products-grid 內嵌定點卡片區，佔滿整行 */
.products-grid.results .listing-dingdian-mount {
    grid-column: 1 / -1;
    width: 100%;
}

/* 列表為 yhzq flex 容器時，空狀態仍佔滿一行 */
.yhzq-list-containe > .products-empty {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
}
.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;
}

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

.product-image {
    height: 360px;
    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;
}

.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;
    font-weight: 600;
    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: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 0;
    padding-bottom: 20px;
    margin-top: 95px;
}

/* 當倒計時顯示時（不是 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%;
    /* 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;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    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;
    align-items: center;
    z-index: 2;
}

.subpage.bottom-icons span {
    color: #fff;
    flex: 1;
    justify-content: center;
    font-weight: normal;
    padding-left: 0;
}
.bottom-icons span.favs-num{
    justify-content: flex-start;
}
.subpage.bottom-icons span i {
    margin-right: 3px;
}

.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: 8px;
}

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

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

#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: 0 auto;
    padding: 0;
    background: white;
    border-radius: 0;
    margin-bottom: 0;
}
.container.hl-search-container {
    margin: 0 auto;
    padding: 0;
    background: white;
    border-radius: 0;
    margin-bottom: 0;
    width: 100%;
    max-width: 780px;
    box-sizing: border-box;
    /* 勿固定高度 + overflow:hidden：搜尋結果頁與進階搜尋共用此容器，鎖定會導致結果無法垂直滾動 */
    min-height: 0;
    height: auto;
    overflow: visible;
}

.advanced-filter-container {
    /* 交給頁面滾動：下拉展開時仍可滾動整頁，且 absolute 下拉不被裁切 */
    max-height: none;
    overflow: visible;
}
#searchForm{
    padding: 30px;
}
header {
    min-height: 115px;
    /* background: linear-gradient(135deg, #3498db 0%, #1a5f8a 100%); */
    background:#1183a5;
    background-size: cover;
    color: white;
    /* 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;
    z-index: 101;
    top: -10px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 70px;
    background-image: linear-gradient(#1183a5 15%, transparent);
}
.site-notice-overlay{
    position: absolute;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: -10px;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.site-notice-overlay img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@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);
    animation: headerShine 3.5s infinite linear;
} */

/* 頂部主容器：左 logo-img，右上搜索+會員 / 右下 logo-text */
#header.top-container {
    --m6-logo-size: clamp(70px, 6vw + 40px, 100px);
}

.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(--m6-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;
    flex-wrap: nowrap;
}

.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;
    transform: none;
}

.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, 1.1vw + 12px, 18px);
    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: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    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: 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;
    z-index: 10;
    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;
    padding: 12px;
}

.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;
    padding: 12px;
    /* 跨越所有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: 22px;
    padding-left: 0;
    padding-bottom: 30px;
    color: #f00;
    border-bottom: 1px solid #f5f5f5;
    /* 桌面端鋪滿整個grid容器 */
    grid-column: 1 / -1;
    height: 232px;
    font-weight: 600;
}
.products-empty i{
    color: #f00;
    margin-right: 8px;
}
.products-empty span{
    color: #ccc;
    margin-right: 8px;
}
.general-empty{
    width:100%;
    text-align: center;
    font-size: 16px;
    padding-left: 0;
    padding-bottom: 30px;
    color: #666;
    /* border-bottom: 1px solid #f5f5f5; */
    /* 桌面端鋪滿整個grid容器 */
    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: #7a3aed;
    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：模板 6
   ============================================ */
.detail-identity-block {
    display: grid;
    grid-template-columns: minmax(168px, max-content) minmax(0, 1fr);
    gap: 12px;
    align-items: end;
    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;
    padding: 12px;
    border-radius: 10px;
    background: linear-gradient(145deg, #f0fbff 0%, #ffffff 100%);
    border: 1px solid #cfefff;
    box-shadow: 0 10px 24px rgba(17, 131, 165, 0.12);
    white-space: nowrap;

    flex-shrink: 0;
    max-width: 100%;
    width: max-content;
    height: 45px;
    min-height: 45px;
    box-sizing: border-box;
}

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

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

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

.detail-booking-card {
    display: block;
    width: auto;
    min-width: 0;
    align-self: stretch;
}

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

.detail-booking-btn {
    display: flex;
    width: 100%;
    min-height: 45px;
    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: 10px;
    background: linear-gradient(135deg, #1ba8cf 0%, #1183a5 100%);
    color: #fff;
    box-shadow: 0 12px 26px rgba(17, 131, 165, 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.detail-booking-btn:hover {
    background: linear-gradient(135deg, #0e6f8d 0%, #095a73 100%);
    transform: translateY(-1px);
    box-shadow: 0 20px 36px rgba(17, 131, 165, 0.3);
}

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

    /* 移動端：編號卡水平鋪滿（覆蓋共用 width:max-content） */
    .detail-code-card,
    .details-container .detail-code-card,
    .details-container .seller-detail-cta .detail-code-card,
    .details-container .detail-identity-block .detail-code-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        padding: 14px 16px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .detail-booking-btn {
        min-height: 45px;
        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.6rem 1.2rem;
    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;
}

/* 整合樣式 */

.jrtj_title{
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
}
.jrtj_title.first{
    background: #f5f5f5;
}
.jrtj_title h2{
    position: absolute;
    top: 30px;
    right: 10px;    
    display: block;
    font-size: clamp(36px, 12vw, 90px);
    color: #0ba0ca;
    font-weight: 600;
    line-height: 1;
    text-shadow: -1px -1px 0 #a3e2f0, 1px -1px 0 #a3e2f0, -1px 1px 0 #a3e2f0, 1px 1px 0 #a3e2f0, 0 1px 1px #075f78;
    -webkit-text-stroke: 0.002px #fff;
    width: auto;
    max-width: 200px;
    font-family: "FZCCH_GBK";
}
.jrtj_title.phb{
    background: #f6f6f6;
}

.jrtj_title.phb h2{
    top: clamp(30px, 2vw, 30px);
    left: clamp(15px, 2vw, 30px);
    font-size: clamp(28px, 10vw, 80px);
    color: #775e06;
    font-weight: 800;
    line-height: 1;
    text-shadow: -1px -1px 0 #f5e57a, 1px -1px 0 #f5e57a, -1px 1px 0 #f5e57a, 1px 1px 0 #f5e57a, 0 1px 1px #ad8a10;
    -webkit-text-stroke: 0.002px #fff;
    max-width: clamp(200px, 40vw, 300px);
}
.phb_title_02 {
    position: absolute;
    top: clamp(100px, 20vw, 170px);
    left: clamp(15px, 2vw, 30px);    
    display: block;
    font-size: clamp(14px, 2.5vw, 20px);
    text-align: left;
    line-height: clamp(20px, 3vw, 32px);
    color: #775e06;
}
.jrtj_title.third h2{
    top: 40px;
    right: 30px; 
}
.jrtj_title.fouth h2{
    top: 10px;
    left: 30px;
    font-size: clamp(40px, 13vw, 100px);
    color: #775e06;
    font-weight: 800;
    line-height: 1;
    text-shadow: -1px -1px 0 #f5e57a, 1px -1px 0 #f5e57a, -1px 1px 0 #f5e57a, 1px 1px 0 #f5e57a, 0 1px 1px #ad8a10;
    -webkit-text-stroke: 0.002px #fff;
    max-width: 200px;
}
.jrtj_title img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.index_phb_more {
    width: 38%;
    height: 70px;
    margin: 0 auto;
    line-height: 70px;
    color: #000;
    box-sizing: border-box;
    font-size: 18px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 55px;
    background: url(../images/m6-line.png) center no-repeat;
}
.index_phb_more a {
    text-decoration: none;
    color: #000;
    width: 40%;
    height: 100%;
    background: #fff;
    margin: 0 auto;
    padding-left: 18px;
    padding-right: 18px;
}
@media (max-width: 767px) {
    .index_phb_row li:nth-child(n+2) .top-bq img {
        width: 100%;
    }
.sub-header-title{
    min-height: 42px;
    margin-top: 12px;
}
.sub-container.phb{
    margin-top: 50px;
    padding: 0 10px;
}
/* 排行榜卡片移動端單列排列 */
.index_phb_row ul {
    grid-template-columns: 1fr;
}
.index_phb_row li {
    height: 220px;
}
.index_phb_row li:nth-child(1) {
    grid-row: auto;
    height: 220px;
    background: #fff;
    padding: 15px;
}
.index_phb_row li:nth-child(1) .img_div {
    width: 35%;
    height: 100%;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    float: left;
}
.index_phb_row li:nth-child(1) .nr_div {
    width: 65%;
    height: 100%;
    position: relative;
    float: left;
}
.index_phb_row li:nth-child(1) .nr_div dl {
    padding-top: 0;
    padding-left: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 4px;
}
.index_phb_row li:nth-child(1) .nr_div dt {
    width: auto;
    max-width: none;
    min-width: 0;
    height: auto;
    min-height: 18px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.index_phb_row li:nth-child(1) .jianlue {
    width: 100%;
    height: 35px;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 18px;
    color: #fff;
    text-align: center;
    line-height: 35px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 8px;
    box-sizing: border-box;
}
.index_phb_row li:nth-child(1) .pingfen {
    width: 90px;
    height: 43px;
    font-size: 18px;
    font-family: "Microsoft JhengHei";
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    z-index: 9;
    background: url(../images/lable_1.png) center no-repeat;
    background-size: contain;
    text-align: center;
    line-height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.index_phb_row li:nth-child(1) .pingfen span {
    font-size: 24px;
}
.index_phb_row li:nth-child(1) .lable {
    width: 45px;
    height: 45px;
    border-radius: 60px;
    border: 4px solid #e8f1f9;
    background-image: linear-gradient(to right, #d3e6f9, #b5d5f5);
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
    color: #fff;
    text-align: center;
    line-height: 45px;
    font-weight: 800;
}
.index_phb_row li:nth-child(2),
.index_phb_row li:nth-child(3),
.index_phb_row li:nth-child(4) {
    grid-row: auto;
}
.dropdown-menu {
    max-height: min(200px, calc(100vh - 120px));
}
.dropdown-menu.show {
    max-height: min(200px, calc(100vh - 120px));
}
.product-detail {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 0;
}
.duration-price-list{
    margin-bottom: 20px;
}
/* .jrtj_title h2 移動端適配 */
.jrtj_title h2{
    top: clamp(10px, 3vw, 30px);
    right: clamp(5px, 1.5vw, 10px);
    font-size: clamp(32px, 10vw, 70px);
    max-width: 150px;
}
.jrtj_title.third h2{
    top: clamp(15px, 4vw, 40px);
    right: clamp(10px, 3vw, 30px);
}
.jrtj_title.fouth h2{
    top: clamp(5px, 1.5vw, 10px);
    left: clamp(10px, 3vw, 30px);
    font-size: clamp(36px, 11vw, 80px);
    max-width: 150px;
}
.jrtj_title.phb h2{
    top: clamp(40px, 2vw, 30px);
    left: clamp(10px, 2vw, 30px);
    font-size: clamp(24px, 7vw, 60px);
    max-width: clamp(150px, 35vw, 250px);
}
.phb_title_02 {
    top: clamp(110px, 10vw, 150px);
    left: clamp(10px, 2vw, 30px);
    font-size: clamp(12px, 2vw, 18px);
    line-height: clamp(18px, 2.5vw, 28px);
}
.top-bq{
    width:45px;
}
}

/* 中小屏移動裝置 */
@media (max-width: 480px) {
    .prev,
    .next {
        width: 40px;
        height: 40px;
    }

    .prev svg,
    .next svg {
        width: 20px;
        height: 20px;
    }
    /* .jrtj_title h2 小螢幕進一步縮小 */
    .jrtj_title h2{
        font-size: clamp(28px, 12vw, 50px);
        max-width: 24vw;
        right:4vw!important;
    }
    .jrtj_title.fouth h2{
        font-size: clamp(30px, 12vw, 55px);
        max-width: 24vw;
        left:4vw!important;
    }
    .jrtj_title.phb h2{
        top: clamp(40px, 1.5vw, 20px);
        left: clamp(8px, 1.5vw, 20px);
        font-size: clamp(20px, 6vw, 50px);
        max-width: clamp(120px, 30vw, 200px);
    }
    .phb_title_02 {
        top: clamp(80px, 8vw, 120px);
        left: clamp(8px, 1.5vw, 20px);
        font-size: clamp(11px, 1.8vw, 16px);
        line-height: clamp(16px, 2.2vw, 24px);
    }
    /* .range-tabs 小螢幕進一步適配 */
    .range-tabs a {
        font-size: clamp(1rem, 3.5vw, 1.4rem);
        padding: clamp(4px, 1.2vw, 8px) clamp(8px, 1.8vw, 16px);
        min-width: clamp(50px, 12vw, 80px);
        min-height: clamp(30px, 7vw, 45px);
    }
    .range-tabs h1 {
        font-size: clamp(1rem, 3.5vw, 1.4rem);
        padding: clamp(4px, 1.2vw, 8px) clamp(8px, 1.8vw, 16px);
        min-width: clamp(50px, 12vw, 80px);
        min-height: clamp(30px, 7vw, 45px);
    }
    .range-tabs span {
        font-size: clamp(1.5rem, 4.5vw, 2.5rem);
        min-width: clamp(25px, 7vw, 50px);
        min-height: clamp(30px, 7vw, 45px);
    }
    .sub-header.newcaipin .range-tabs {
        margin-top: clamp(15px, 4vw, 50px);
    }
    /* .sub-header-title.newcaipin 下拉選單小螢幕適配 */
    .sub-header.newcaipin .category-dropdown.todaynew-city-dropdown,
    .sub-header.newcaipin .category-dropdown.todaynew-area-dropdown,
    .sub-header.newcaipin .category-dropdown.todaynew-country-dropdown,
    .sub-header.newcaipin .category-dropdown.todaynew-service-dropdown {
        width: calc(50% - 4px);
        min-width: 70px;
    }
    .sub-header.newcaipin .category-dropdown .category-btn {
        padding: clamp(6px, 1.5vw, 10px) clamp(8px, 2vw, 14px);
        font-size: clamp(11px, 2.5vw, 14px);
    }
}

/* 響應式設計 */
@media (max-width: 540px) {
    .sub-header.phb{
        margin-top: 0;
    }
    .sub-container.phb{
        padding: 0 0;
    }
    /* 倒計時在小屏防止溢位 */
    .tabs.phb{
        width: 100%;
    }
    .countdown-timer {
        margin-top: 10px;
        margin-bottom: 14px;
    }

    .countdown-display {
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        gap: clamp(2px, 1vw, 6px);
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    /* 確保倒計時顯示和產品操作按鈕寬度一致 */
    .product-info .countdown-timer-overlay {
        width: 100%;
        box-sizing: border-box;
    }
    .product-info .countdown-display {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .product-actions {
        width: 100%;
        box-sizing: border-box;
    }

    .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.8rem, 2.2vw, 1rem);
    }

    .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;
        font-size: 12px;
    }

    .yhzq-list .details-containe {
        padding: 12px 12px 40px 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: 13px;
        font-weight: 700;
    }

    .information.xj span {
        font-size: 13px;
        font-weight: 700;
    }

    .phb-containe {
        padding: 0;
        padding-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .phb-containe .more{
        top:28vw;
    }
    .index-phb-div {
        width: 96%;
        margin: 0 auto;
    }

    .phb-list {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

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

    .phb-list .jq span {
        font-size: 18px;
    }

    .phb-list .img-containe {
        height: 300px;
    }

    .phb-list .details-containe {
        height: auto;
    }

    .phb-list .details-containe li {
        height: 32px;
    }

    .bottom-icons {
        margin-top: 0;
    }
    .bottom-icons.paihangbang{
        position: absolute;
        bottom: 0;
    }
    .bottom-icons.dingdian{
        gap: 6px;
    }
    .subpage.bottom-icons {
        padding: 0 4px;
        gap: 0;
    }
    .yhzq-containe.dingdian .yhzq-list-containe{
        padding: 10px;
        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;
    }
    .index_phb_more{
        margin-bottom: 20px;
    }
    .yhzq-list .img-containe,
    .yhzq-list .details-containe {
        width: 100%;
    }

    .vip-badge {
        height: 32px;
        min-height: 32px;
        max-height: 32px;
        padding: 0 10px;
        border-radius: 30px;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        align-items: center;
        justify-content: center;
        animation: none;
        text-shadow: none;
        box-shadow: none;
    }

    .dingdian .details-containe {
        padding: 10px;
        font-size: 12px;
    }
    .details-containe .information {
        height: 24px;
    }
    .details-containe .information.yj {
        height: auto;
    }
    .details-containe .information.xj {
        height: auto;
    }
    .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: 16px;
        width:18vw;
        top: 10px;
    }
    .details-containe ul .pingfen{
        top: 5px;
    }
    .details-containe ul .pingfen span{
        font-size: 18px;
    }

    /* 移動端≤767：卡片 bottom-icons 字號／圖標統一對齊排行榜（參照 .index_phb_row … .bottom-icons.toolbar.yhzq） */
    .yhzq-list .details-containe > .bottom-icons.toolbar.yhzq span,
    .index_phb_row li .nr_div > .bottom-icons.toolbar.yhzq span,
    .points-table .bottom-icons span {
        padding: 0 4px;
        font-size: 13px;
        line-height: 23px;
        align-items: flex-end;
    }

    .yhzq-list .details-containe > .bottom-icons.toolbar.yhzq span.shoucang,
    .index_phb_row li .nr_div > .bottom-icons.toolbar.yhzq span.shoucang {
        background-size: clamp(12px, 7vw, 16px);
        padding-left: clamp(16px, 7vw, 22px);
    }

    .yhzq-list .details-containe > .bottom-icons.toolbar.yhzq span.i_zan,
    .index_phb_row li .nr_div > .bottom-icons.toolbar.yhzq span.i_zan {
        background-size: clamp(12px, 7vw, 16px);
        padding-left: clamp(16px, 7vw, 22px);
    }

    .yhzq-list .details-containe > .bottom-icons.toolbar.yhzq span.i_pinglun,
    .index_phb_row li .nr_div > .bottom-icons.toolbar.yhzq span.i_pinglun {
        background-size: clamp(12px, 7vw, 16px);
        padding-left: clamp(16px, 7vw, 22px);
    }

    .points-table span.i-sc,
    .points-table span.i-zan,
    .points-table span.i-pl {
        background-size: clamp(12px, 7vw, 16px);
    }

    .global-modal.top-list .bottom-icons {
        font-size: 13px;
    }

    .subpage.bottom-icons span {
        font-size: 13px;
        line-height: 1.25;
    }

    .subpage.bottom-icons span i {
        font-size: clamp(12px, 7vw, 16px);
        line-height: 1;
        vertical-align: middle;
        margin-right: 2px;
    }

    #footer {
        position: fixed;
        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: 0;
        padding-top: 0;
        min-height: calc(100vh - 234px);
    }
    .sub-header.newcaipin{
        padding: 0 12px;
    }
    .list-container.newcaipin{
        margin-top: -45px;
        padding-top: 75px;
    }
    .list-container.morecaipin{
        margin-top: -45px;
        padding-top: 35px;
    }
    .sub-header h1 {
        font-size: 24px;
        /* 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: 20px;
    }

    .hot-text {
        font-style: normal;
    }

    .progress-value {
        font-style: normal;
        top: -14px;
    }

    .points-table .bottom-icons {
        flex-direction: column;
        gap: 4px;
    }

    .bottom-icons i {
        width: 100%;
        text-align: left;
    }

    .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;
        width: 60%;
    }

    .categories {
        justify-content: center;
        white-space: nowrap;
    }

    .category-dropdown {
        flex: 1;
    }
    .category-dropdown.todaynew-city-dropdown{
        flex: none;
    }
    /* .sub-header-title.newcaipin 下拉選單移動端適配 */
    .sub-header-title.newcaipin {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }
    .sub-header.newcaipin .category-dropdown.todaynew-city-dropdown,
    .sub-header.newcaipin .category-dropdown.todaynew-area-dropdown,
    .sub-header.newcaipin .category-dropdown.todaynew-country-dropdown,
    .sub-header.newcaipin .category-dropdown.todaynew-service-dropdown {
        width: calc(25% - 6px);
        min-width: 80px;
        margin-left: 0;
        margin-right: 0;
    }
    .sub-header.newcaipin .category-dropdown.todaynew-city-dropdown span,
    .sub-header.newcaipin .category-dropdown.todaynew-area-dropdown span,
    .sub-header.newcaipin .category-dropdown.todaynew-country-dropdown span,
    .sub-header.newcaipin .category-dropdown.todaynew-service-dropdown span {
        font-size: clamp(12px, 3vw, 16px);
    }
    .sub-header.newcaipin .category-dropdown.todaynew-city-dropdown i,
    .sub-header.newcaipin .category-dropdown.todaynew-area-dropdown i,
    .sub-header.newcaipin .category-dropdown.todaynew-country-dropdown i,
    .sub-header.newcaipin .category-dropdown.todaynew-service-dropdown i {
        font-size: clamp(12px, 3vw, 16px);
    }
    .sub-header.newcaipin .category-dropdown .category-btn {
        padding: clamp(8px, 2vw, 12px) clamp(10px, 2.5vw, 16px);
        font-size: clamp(12px, 3vw, 16px);
    }
    /* .range-tabs 移動端適配 */
    .range-tabs {
        margin-top: 0;
        gap: clamp(5px, 1vw, 10px);
    }
    .range-tabs a {
        font-size: clamp(1.8rem, 4vw, 1.8rem);
        padding: clamp(5px, 1.5vw, 10px) clamp(10px, 2vw, 20px);
        width: 18%;
        min-width: clamp(60px, 15vw, 100px);
        height: auto;
        min-height: clamp(35px, 8vw, 50px);
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.8rem;
        padding-right: 0;
    }
    .range-tabs h1 {
        font-size: clamp(1.8rem, 4vw, 1.8rem);
        padding: clamp(5px, 1.5vw, 10px) clamp(10px, 2vw, 20px);
        width: 18%;
        min-width: clamp(60px, 15vw, 100px);
        height: auto;
        min-height: clamp(35px, 8vw, 50px);
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.8rem;
        padding-right: 0;
    }
    .range-tabs span {
        font-size: clamp(2.4rem, 5vw, 3rem);
        width: 8.5%;
        height: auto;
        min-height: clamp(35px, 8vw, 50px);
        display: flex;
        align-items: center;
        justify-content: left;
        padding: 0 0;
        padding-left: 0;
    }
    .sub-header.newcaipin .range-tabs {
        margin-top: clamp(20px, 5vw, 70px);
    }
    .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: 10px 18px;
        font-size: 14px;
    }

    .sort-btn {
        padding: 8px 0;
        white-space: nowrap;
        font-size: 16px;
    }

    .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: 20px;
     }

    .detail-item.sub-price .current-price{
        font-size: 14px;
    }
    /* .global-lable {
        font-weight: normal;
    } */

    .subpage.bottom-icons span {
        font-size: 13px;
        padding: 0;
    }

    .subpage.bottom-icons span i {
        text-align: center;
        margin-right: 2px;
        width: auto;
    }

    .product-badge {
        font-weight: normal;
        padding: 6px 12px;
        font-size: 12px;
        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-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }

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

    #header.top-container {
        --m6-logo-size: clamp(48px, 12vw, 56px);
    }

    .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(--m6-logo-size);
        height: 100%;
    }

    .logo-img {
        width: 100%;
    }

    .logo-main-right {
        padding-top: 20px;
        gap: 6px;
    }

    .logo-main-top {
        gap: clamp(6px, 1.5vw, 10px);
    }

    .logo-title {
        font-size: clamp(14px, 4.8vw, 18px);
    }

    .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;
        transition: none;
        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;
        flex: 0 0 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;
    }
    .search-box {
        height:42px;
    }

    .image-search-btn {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px;
        min-height: 30px;
        box-sizing: border-box;
    }

    .search-btn {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px;
        min-height: 30px;
        box-sizing: border-box;
    }

    .search-input::placeholder {
        font-size: 13px;
    }
    .user-btn{
        width:42px;
        height:42px;
    }
    .advanced-search-btn{
        width:42px;
        height:42px;
        min-width: 42px;
    min-height: 42px;
    }
    .product-header {
        gap: 10px;
        justify-content: space-between;
    }

    .product-title {
        font-size: 1.4rem;
        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: 10px 0;
        padding: 0 12px;
    }

    /* .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;
    }
    .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;
        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;
        font-size: 13px;
    }
    .duration-price-item{
        font-size: 13px;
    }
    .spec-item {
        font-weight: 500;
        font-size: 13px;
    }

    .current-rating {
        font-weight: 500;
        font-size: 13px;
    }

    .rating-value {
        font-size: 20px;
    }
    .radar-title{
        font-size: 16px;
    }
    .radar-average{
        font-size: 1.0rem;
    }
    /* 媒體上傳元件 */
    .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;
        /* 为固定底栏预留空间，避免排行榜等页底部分页被遮挡 */
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }
    
    .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;
        height: auto;
        overflow: visible;
        /* 固定底欄預留，避免結果底部與分頁被遮擋 */
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }

    .advanced-filter-container {
        max-height: none;
        overflow: visible;
    }
    
    .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;
    }
    .products-grid.results{
        padding: 0 8px;
        min-height: 55vh;
    }
    .list-container .page-list-yhzq-shell{
        padding: 8px;
    }
  .results-summary {
        flex-direction: column;
        gap: 1rem;
    }
    
    .sort-filter {
        flex-wrap: wrap;
        justify-content:center;
        width:100%;
    }
    .pagination {
        margin: 0 0 12px;
    }
    .yhdjs{
        display: none;
    }
    .carousel-slide .caption{
        height: 110px;
    }
    .detail-code-value{
        font-size: 1.4rem;
    }
}

/* 小屏移動裝置 */
@media (max-width: 390px) {

    .yhzq-list .details-containe {
        font-size: 12px;
    }

    .information.yj span {
        font-size: 13px;
    }
    .information.xj span {
        font-size: 13px;
    }
    .stat {
        font-weight: normal;
        font-size: 20px;
    }

    .category-btn {
        padding: 10px 12px;
        font-size: 12px;
    }

    .sort-btn {
        padding: 8px 0;
    }

    .details-container-top {
        display: flex;
        flex-direction: column;
        height: auto;
        position: relative;
    }

    .interaction-stats .stat-item {
        padding: 0;
        gap: 4px;
    }

    .details-containe .information {
        height: 24px;
        width: 100%;
    }
    .sort-btn{
        font-size: 14px;
    }
    .product-details{
        font-size: 14px;
    }
    .product-title{
        font-size: 1.3rem
    }
    .subpage.bottom-icons span {
        font-size: 13px;
    }
    .details-containe ul .pingfen{
        font-size: 14px;
        right: -5px;
    }
    /* .details-containe ul .pingfen span{
        font-size: 16px;
    } */
}

@media (max-width: 376px) {
    /* .sub-header-title.newcaipin 下拉選單超小螢幕適配 */
    .sub-header.newcaipin .category-dropdown.todaynew-city-dropdown,
    .sub-header.newcaipin .category-dropdown.todaynew-area-dropdown,
    .sub-header.newcaipin .category-dropdown.todaynew-country-dropdown,
    .sub-header.newcaipin .category-dropdown.todaynew-service-dropdown {
        width: calc(50% - 3px);
        min-width: 60px;
    }
    .sub-header.newcaipin .category-dropdown .category-btn {
        padding: clamp(5px, 1.2vw, 8px) clamp(6px, 1.5vw, 12px);
        font-size: clamp(10px, 2.2vw, 13px);
    }
    .sub-header.newcaipin .category-dropdown.todaynew-city-dropdown span,
    .sub-header.newcaipin .category-dropdown.todaynew-area-dropdown span,
    .sub-header.newcaipin .category-dropdown.todaynew-country-dropdown span,
    .sub-header.newcaipin .category-dropdown.todaynew-service-dropdown span {
        font-size: clamp(10px, 2.2vw, 13px);
    }
    .sub-header.newcaipin .category-dropdown.todaynew-city-dropdown i,
    .sub-header.newcaipin .category-dropdown.todaynew-area-dropdown i,
    .sub-header.newcaipin .category-dropdown.todaynew-country-dropdown i,
    .sub-header.newcaipin .category-dropdown.todaynew-service-dropdown i {
        font-size: clamp(10px, 2.2vw, 13px);
    }
    /* .range-tabs 超小螢幕適配 */
    .range-tabs a {
        font-size: 7vw;
        width:20%;
    }
    .range-tabs h1 {
        font-size: 7vw;
        width:20%;
    }
    .range-tabs span {
        font-size:8vw;
        min-height: clamp(28px, 6vw, 40px);
    }
    .sub-header.newcaipin .range-tabs {
        margin-top: clamp(10px, 3vw, 40px);
    }
    .no-results h3{
        font-size: 22px;
    }
    .yhzq-list .details-containe > .bottom-icons.toolbar.yhzq span,
    .index_phb_row li .nr_div > .bottom-icons.toolbar.yhzq span,
    .points-table .bottom-icons span,
    .subpage.bottom-icons span {
        padding: 0 2px;
        font-size: 12px;
        line-height: 1.25;
        align-items: center;
    }

    .yhzq-list .details-containe > .bottom-icons.toolbar.yhzq span.shoucang,
    .index_phb_row li .nr_div > .bottom-icons.toolbar.yhzq span.shoucang,
    .yhzq-list .details-containe > .bottom-icons.toolbar.yhzq span.i_zan,
    .index_phb_row li .nr_div > .bottom-icons.toolbar.yhzq span.i_zan,
    .yhzq-list .details-containe > .bottom-icons.toolbar.yhzq span.i_pinglun,
    .index_phb_row li .nr_div > .bottom-icons.toolbar.yhzq span.i_pinglun {
        background-size: clamp(11px, 6.5vw, 15px);
        padding-left: clamp(14px, 6.5vw, 21px);
    }

    .subpage.bottom-icons span i {
        font-size: clamp(11px, 6.5vw, 15px);
        line-height: 1;
        vertical-align: middle;
    }

    .points-table span.i-sc,
    .points-table span.i-zan,
    .points-table span.i-pl {
        background-size: clamp(11px, 6.5vw, 15px);
    }

    .global-modal.top-list .bottom-icons {
        font-size: 12px;
    }
}

@media (max-width: 375px) {
    .logo-title {
        font-size: 16px;
    }
    .carousel-slide .caption{
        padding: 10px;
    }
    .caption h2 {
        font-size: 13px;
    }
    .carousel-slide .caption p {
        font-size: 11px;
    }
    /* 排行榜卡片垂直排列 */
    .phb-list {
        flex-direction: column;
        min-height: auto;
    }

    .phb-list .img-containe {
        width: 100%;
        height: 180px;
    }

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

    /* 定點、外約卡片一行一列 */
    .yhzq-list-containe {
        flex-direction: column;
        gap: 12px;
    }

    .yhzq-list {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }

    .yhzq-containe.dingdian .yhzq-list {
        flex: 0 0 100%;
        width: 100%;
    }

    .yhzq-list .img-containe {
        height: 180px;
    }

    .yhzq-list .details-containe {
        padding: 12px 12px 40px 12px;
    }
    .jrtj_title.phb h2{
        top: clamp(20px, 1.5vw, 20px);
        left: clamp(8px, 1.5vw, 20px);
        font-size: clamp(20px, 6vw, 50px);
        max-width: clamp(120px, 30vw, 200px);
    }
    .phb_title_02 {
        top: clamp(50px, 8vw, 120px);
        left: clamp(8px, 1.5vw, 20px);
        font-size: clamp(11px, 1.8vw, 16px);
        line-height: clamp(16px, 2.2vw, 24px);
    }
}

/* 超小屏移動裝置 */
@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;
    }

    .yhzq-list .details-containe > .bottom-icons.toolbar.yhzq span,
    .index_phb_row li .nr_div > .bottom-icons.toolbar.yhzq span,
    .points-table .bottom-icons span,
    .subpage.bottom-icons span {
        padding-left: 17px;
        font-size: 11px;
        line-height: 1.25;
        align-items: center;
    }

    .yhzq-list .details-containe > .bottom-icons.toolbar.yhzq span.shoucang,
    .index_phb_row li .nr_div > .bottom-icons.toolbar.yhzq span.shoucang {
        background: url(../images/i-sc.png) no-repeat left center;
        background-size: 13px 13px;
    }

    .yhzq-list .details-containe > .bottom-icons.toolbar.yhzq span.i_zan,
    .index_phb_row li .nr_div > .bottom-icons.toolbar.yhzq span.i_zan {
        background: url(../images/i-zan.png) no-repeat left center;
        background-size: 13px 13px;
    }

    .yhzq-list .details-containe > .bottom-icons.toolbar.yhzq span.i_pinglun,
    .index_phb_row li .nr_div > .bottom-icons.toolbar.yhzq span.i_pinglun {
        background: url(../images/i-pl.png) no-repeat left center;
        background-size: 13px 13px;
    }

    .points-table span.i-sc,
    .points-table span.i-zan,
    .points-table span.i-pl {
        background-size: 13px 13px;
    }

    .subpage.bottom-icons span i {
        font-size: 13px;
        line-height: 1;
        vertical-align: middle;
    }

    .global-modal.top-list .bottom-icons {
        font-size: 11px;
    }

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

/* 產品卡片佔位元素樣式 - 用於保持卡片高度一致 */
.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;
} */
    .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;
    }
    .no-results i{
        font-size: 40px;
        margin-bottom: 0;
    }
    .no-results h3{
        font-size: 18px;
    }
    .no-results p{
        font-size: 13px;
    }
}

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

/* promotion grid */
.promotion-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.promotion-grid--standalone {
    margin-top: 18px;
}

/* 優惠網格（若單獨使用）：外觀與首頁定點 .yhzq-list 一致，不覆蓋徽章／倒計時／內文 */
.promotion-grid .promotion-card {
    flex: none !important;
    width: 100% !important;
    inline-size: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    height: auto;
    margin: 0;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    justify-self: stretch !important;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.promotion-grid .promotion-card .img-containe {
    position: relative;
    width: 100%;
    height: 200px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}

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

.promotion-grid .promotion-card .details-containe {
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 1024px) {
    .promotion-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 640px) {
    .promotion-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* 首頁優惠／推薦專區輪播：僅滑軌佈局；卡片繼承 .yhzq-list + .yhzq-containe 規則 */
#promotion-slider.slider-container,
#recommendation-slider.slider-container {
    max-width: 100%;
    width: 100%;
    margin-top: 0;
    padding-bottom: 8px;
}

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

#promotion-slider .slide,
#recommendation-slider .slide {
    margin: 0;
    max-width: none;
    text-align: left;
}

#promotion-slider .slide.promotion-slide-placeholder,
#recommendation-slider .slide.promotion-slide-placeholder {
    flex: 0 0 auto;
    align-self: stretch;
    min-height: 1px;
    border-radius: 10px;
    background: #f1f5f9;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    pointer-events: none;
}

#promotion-slider .slide .yhzq-list.promotion-card,
#recommendation-slider .slide .yhzq-list.promotion-card {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
}

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

/* ============================================
   賣家工具：機房詳情 / 全屏圖集（原 seller_tools_script.html 內聯樣式）
   ============================================ */
.seller-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 4px;
}

.seller-jifang-link,
.seller-daidiao-btn {
    font-size: 14px;
    line-height: 1;
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    border: none;
    font-weight: 600;
}

/* 詳情頁編號 / 機房 / 代調按鈕：覆蓋共用大圓角 */
.details-container .detail-code-card,
.details-container .seller-detail-cta .detail-code-card,
.details-container .seller-jifang-link,
.details-container .seller-jifang-above-region .seller-jifang-link,
.product-specs .seller-jifang-above-region .seller-jifang-link,
.details-container .seller-daidiao-btn,
.details-container .seller-detail-cta > .seller-daidiao-btn {
    border-radius: 10px;
}

.seller-jifang-link {
    background: linear-gradient(145deg, #f0fbff 0%, #ffffff 100%);
    border: 1px solid #cfefff;
    color: #333;
}

.seller-jifang-link:hover {
    background: #ededed;
}

.seller-daidiao-btn {
    background: #ff8f3c;
    color: #fff;
    box-shadow: 0 6px 12px rgba(255, 143, 60, 0.2);
}

.jifang-modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}

.jifang-modal-mask.is-open {
    display: flex;
}

.jifang-detail-modal {
    background: #fff;
    width: min(760px, 100%);
    max-height: 90vh;
    overflow: hidden;
    border-radius: 16px;
    padding: 20px;
    position: relative;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.jifang-modal-close {
    position: absolute;
    right: 16px;
    top: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.jifang-modal-header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.jifang-modal-logo img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #eee;
}

.jifang-modal-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #222;
}

.jifang-modal-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #444;
    text-align: left;
}

.jifang-modal-list li {
    margin-bottom: 6px;
    font-size: 14px;
}

.jifang-modal-list span {
    color: #ff6b6b;
    font-weight: 600;
}

.jifang-modal-rules {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e6e6e6;
    font-size: 14px;
    color: #444;
}

.jifang-modal-rules span {
    color: #ff6b6b;
    font-weight: 600;
}

.jifang-modal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.jifang-modal-header,
.jifang-modal-rules {
    flex-shrink: 0;
}

.jifang-modal-caipins {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px;
    flex: 1 1 auto;
    height: 158px;
    max-height: min(48vh, 420px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.jifang-caipin-card {
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    background: #fafafa;
    padding: 6px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.jifang-caipin-card img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
}

.jifang-caipin-card span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #333;
}

.jifang-caipin-card:hover {
    transform: translateY(-2px);
}

.jifang-modal-empty {
    font-size: 14px;
    color: #888;
    padding: 12px 4px;
}

/* 全屏輪播樣式 */
.jifang-gallery-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.jifang-gallery-overlay.is-open {
    display: flex;
}

.jifang-gallery-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.jifang-gallery-track {
    display: flex;
    transition: transform 0.4s ease;
    height: 100%;
    width: 100%;
}

.jifang-gallery-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
}

.jifang-gallery-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.jifang-gallery-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    z-index: 1001;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 0;
    outline: none;
    padding: 10px;
    transition: all 0.3s ease;
}

.jifang-gallery-close:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
}

.jifang-gallery-prev,
.jifang-gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.12) 100%);
    backdrop-filter: blur(5px) saturate(1.12) brightness(1);
    -webkit-backdrop-filter: blur(5px) saturate(1.12) brightness(1);
    border: 1px solid rgba(255, 255, 255, 0.28);
    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;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.jifang-gallery-prev::before,
.jifang-gallery-prev::after,
.jifang-gallery-next::before,
.jifang-gallery-next::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
}

.jifang-gallery-prev::before,
.jifang-gallery-next::before {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.06);
    mix-blend-mode: overlay;
    opacity: 0.9;
}

.jifang-gallery-prev::after,
.jifang-gallery-next::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
    opacity: 0.7;
}

.jifang-gallery-prev {
    left: 15px;
}

.jifang-gallery-next {
    right: 15px;
}

.jifang-gallery-prev:hover,
.jifang-gallery-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);
}

.jifang-gallery-prev i,
.jifang-gallery-next i {
    position: relative;
    z-index: 1;
    display: block;
}

.jifang-gallery-close svg {
    width: 100%;
    height: 100%;
    display: block;
}

.jifang-gallery-prev.disabled,
.jifang-gallery-next.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.jifang-gallery-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 16px;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 16px;
    border-radius: 20px;
    z-index: 10001;
}

body.no-scroll {
    overflow: hidden;
}

@media (max-width: 640px) {
    .jifang-modal-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .jifang-modal-logo img {
        width: 96px;
        height: 96px;
    }

    .jifang-gallery-prev,
    .jifang-gallery-next {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .jifang-gallery-prev {
        left: 10px;
    }

    .jifang-gallery-next {
        right: 10px;
    }

    .jifang-gallery-close {
        width: 45px;
        height: 45px;
        top: 10px;
        right: 10px;
    }
}

/* 屏蔽前台轮播 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;
}

/* ===============================
   moban-6 頂部新布局最終覆蓋（對齊 moban-1）
   左 logo-img｜右上搜索+user｜右下 logo-text
   =============================== */
#header.top-container {
    --m6-logo-size: clamp(70px, 6vw + 40px, 100px);
}

#header .logo-container {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 12px !important;
    right: 12px !important;
    height: 100% !important;
    max-width: none !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 10px !important;
}

#header .logo-image {
    width: var(--m6-logo-size) !important;
    height: 100% !important;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto !important;
}

#header .logo-img {
    width: 75%;
    height: auto;
    object-fit: cover;
}

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

#header .logo-main-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
}

#header .logo-main-top .search-container,
#header .search-container,
#header .search-container.active {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 560px;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

#header .search-box {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

#header .advanced-search-btn,
#header .user-btn {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
}

#header .user-menu,
#header .search-icon-btn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
}

#header .search-icon-btn,
#header .search-toggle-btn {
    display: none !important;
}

#header .logo-text {
    justify-content: flex-end;
    text-align: left;
    padding-bottom: 20px;
    max-width: none;
    overflow: visible;
}

#header .logo-title {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

@media (max-width: 768px) {
    #header.top-container {
        --m6-logo-size: clamp(48px, 12vw, 56px);
    }
    #header .logo-main-right {
        padding-top: 20px;
        gap: 6px;
    }
    #header .logo-img {
        width: 100%;
    }
}

@media (max-width: 540px) {
    #header.top-container {
        --m6-logo-size: clamp(40px, 11vw, 52px);
    }
    #header .logo-main-top {
        gap: 6px;
    }
}

@media (max-width: 375px) {
    #header.top-container {
        --m6-logo-size: clamp(32px, 10vw, 40px);
    }
    #header .logo-container {
        left: 8px !important;
        right: 8px !important;
        gap: 6px !important;
    }
    #header .logo-main-top {
        gap: 4px;
    }
    #header .user-btn,
    #header .advanced-search-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }
}