/* 独立商品详情页：沿用商品列表当前域名的主题配置 */
body.detail-page-open {
    width: 100%;
    max-width: 100vw;
    background: var(--theme-base) !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
    touch-action: pan-y;
}

#productDetailPage {
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    background: var(--theme-base) !important;
    color: #f8fafc !important;
}

#productDetailPage * {
    box-sizing: border-box;
}

#productDetailPage .detail-shell {
    width: min(100%, 1280px);
    margin: 0 auto;
}

#productDetailPage .detail-header {
    position: sticky;
    top: 0;
    z-index: 70;
    background: var(--theme-base) !important;
    border-bottom: 1px solid var(--theme-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

#productDetailPage .detail-panel {
    background: var(--theme-card) !important;
    border: 1px solid var(--theme-border) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

#productDetailPage .detail-subpanel {
    background: var(--theme-element) !important;
    border: 1px solid var(--theme-border-light) !important;
}

#productDetailPage .detail-title,
#productDetailPage .detail-strong,
#productDetailPage .detail-white {
    color: #f8fafc !important;
}

#productDetailPage .detail-muted {
    color: #9ca3af !important;
}

#productDetailPage .detail-price,
#productDetailPage #detailBrandName {
    color: var(--theme-primary) !important;
}

#productDetailPage .detail-accent-bg {
    background: var(--theme-button) !important;
    color: var(--theme-button-text) !important;
}

#productDetailPage .detail-accent-bg:hover {
    background: var(--theme-button-hover) !important;
}

#productDetailPage .detail-accent-border {
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
}

#productDetailPage .detail-subpanel:hover,
#productDetailPage .detail-panel:hover {
    border-color: var(--theme-border-hover) !important;
}

#productDetailPage button,
#productDetailPage input,
#productDetailPage a {
    -webkit-tap-highlight-color: transparent;
}

#productDetailPage .detail-panel,
#productDetailPage .detail-subpanel {
    border-radius: 18px !important;
}

#productDetailPage #detailBackBtn,
#productDetailPage #detailHeaderShareBtn,
#productDetailPage #detailBottomShareBtn {
    border-radius: 9999px !important;
}

#productDetailPage #detailSearchForm,
#productDetailPage #detailBuyBtn,
#productDetailPage #detailBottomBuyBtn,
#productDetailPage #detailWeidianBtn,
#productDetailPage #detailNotFoundBackBtn {
    border-radius: 9999px !important;
}

#productDetailPage #detailSearchForm button {
    border-radius: 9999px !important;
}

/* 商品详情主图：去掉中间的主题色背景层，让图片直接显示在白色外层卡片内 */
#productDetailPage #detailMainImageWrap {
    /* 上、右、下、左间距统一，避免单图时贴住卡片底部 */
    margin: 14px;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 16px !important;
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

#productDetailPage #detailMainGalleryViewport {
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden;
    transform: translateZ(0);
}

#productDetailPage #detailMainGalleryTrack {
    display: flex;
    height: 100%;
    transform: translate3d(0, 0, 0);
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
    backface-visibility: hidden;
}

#productDetailPage .detail-main-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    overflow: hidden;
}

#productDetailPage .detail-main-slide-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #ffffff !important;
    border-radius: 16px !important;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transform: translateZ(0);
    backface-visibility: hidden;
}

#productDetailPage #detailThumbs {
    margin: 12px 14px 14px;
    padding: 10px;
    gap: 10px;
    background: var(--theme-primary-alpha) !important;
    border: 1px solid var(--theme-border-light) !important;
    border-radius: 20px !important;
    scroll-padding-left: 10px;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
}

#productDetailPage #detailThumbs > button {
    flex: 0 0 96px;
    width: 96px !important;
    height: 96px !important;
    border-radius: 14px !important;
    scroll-snap-align: start;
}

#productDetailPage .detail-thumb-image {
    border-radius: 11px !important;
}

/* QC 图片：每张独占一行，只显示图片 */
#productDetailPage #detailQcSection {
    margin-top: 28px;
}

#productDetailPage #detailQcHeading {
    padding-left: 18px;
    padding-right: 18px;
}

#productDetailPage #detailQcGrid {
    display: flex !important;
    flex-direction: column;
    gap: 18px;
    padding-left: 18px;
    padding-right: 18px;
}

#productDetailPage .detail-qc-card {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--theme-border-light) !important;
    border-radius: 22px !important;
    background: var(--theme-primary-alpha) !important;
    padding: 7px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    content-visibility: auto;
    contain-intrinsic-size: 680px 680px;
}

#productDetailPage .detail-grid-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    background: #ffffff;
    border-radius: 16px !important;
}

#detailOriginalLink,
#detailSearchInput {
    user-select: text;
    color: #f8fafc !important;
    background: transparent !important;
    outline: none;
}

#detailOriginalLink::placeholder,
#detailSearchInput::placeholder {
    color: #6b7280 !important;
}

#productDetailPage #detailCopyOriginalBtn {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#productDetailPage #detailCopyOriginalBtn:hover {
    background: var(--theme-primary-alpha) !important;
    color: var(--theme-primary) !important;
}

.detail-thumb-active {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px var(--theme-primary-alpha) !important;
}

.detail-dot-active {
    width: 22px !important;
    background: var(--theme-primary) !important;
}

#productDetailPage #detailGalleryDots > * {
    background-color: var(--theme-border-hover);
}

#productDetailPage .border-t {
    border-color: var(--theme-border) !important;
}

#detailBottomBar {
    background: var(--theme-card) !important;
    border-color: var(--theme-border) !important;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.28) !important;
}

/* 独立搜索结果页不显示商品详情底部价格/购买栏 */
body.detail-search-page-open #detailBottomBar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 移动端底部购买栏：按钮宽度跟随文案，超长时才限制最大宽度 */
#detailBottomBar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}

#detailBottomActions {
    min-width: 0;
    margin-left: auto;
}

#detailBottomShareBtn {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 9999px !important;
}

#detailBottomBuyBtn {
    width: max-content;
    min-width: 132px;
    max-width: calc(100vw - 184px);
    flex: 0 1 auto;
    padding-left: 22px;
    padding-right: 22px;
}

#detailBottomBuyText {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
    font-size: clamp(11px, 3.6vw, 16px);
}

/* 商品卡片：价格单独一行，购买按钮在下一行居中并保留左右间距 */
.product-card-buy-wrap {
    width: 100%;
    padding-left: 2px;
    padding-right: 2px;
    margin-top: 12px;
}

.product-card-buy-btn {
    width: 100%;
    min-width: 0;
    max-width: none;
    border-radius: 0.5rem !important;
}

.product-card-buy-btn span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 640px) {
    .product-card-buy-wrap {
        padding-left: 4px;
        padding-right: 4px;
    }
}


/* 详情页目录面包屑：Home、一级目录、二级目录都可以点击 */
#detailBreadcrumb {
    white-space: normal;
}

#detailBreadcrumb .detail-breadcrumb-link {
    appearance: none;
    -webkit-appearance: none;
    display: inline;
    padding: 0 !important;
    margin: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
}

#detailBreadcrumb .detail-breadcrumb-link:hover,
#detailBreadcrumb .detail-breadcrumb-link:focus-visible {
    color: var(--theme-primary) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    outline: none;
}

#detailBreadcrumb .detail-breadcrumb-separator {
    display: inline-block;
    padding: 0 7px;
    opacity: 0.7;
}

/* 独立搜索结果页：不受当前目录限制 */
#detailSearchResultsSection .detail-search-results-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

#detailSearchResultsGrid > div {
    min-width: 0;
}

.detail-search-sort-controls {
    display: grid;
    grid-template-columns: minmax(64px, .72fr) minmax(0, 1.25fr) minmax(0, 1.25fr);
    align-items: center;
    gap: 8px;
    width: min(100%, 430px);
}

.detail-search-sort-btn {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 7px 6px;
    border-radius: 9999px !important;
    border: 1px solid var(--theme-border-light) !important;
    background: var(--theme-element) !important;
    color: #9ca3af !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: -0.02em;
    font-weight: 800;
    white-space: nowrap;
    text-align: center;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease, transform .15s ease;
}

.detail-search-sort-btn:hover {
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
}

.detail-search-sort-btn.is-active {
    background: var(--theme-button) !important;
    border-color: var(--theme-button) !important;
    color: var(--theme-button-text) !important;
}

#detailSearchLoadMore {
    border-radius: 9999px !important;
}

@media (max-width: 767px) {
    #detailSearchResultsSection {
        padding-left: 14px;
        padding-right: 14px;
    }

    #detailSearchResultsSection .detail-panel {
        border-left-width: 1px !important;
        border-right-width: 1px !important;
        border-radius: 18px !important;
    }

    #detailSearchResultsSection .detail-search-results-header {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .detail-search-sort-controls {
        grid-template-columns: minmax(58px, .7fr) minmax(0, 1.3fr) minmax(0, 1.3fr);
        gap: 6px;
        width: 100%;
    }

    .detail-search-sort-btn {
        min-height: 34px;
        padding-left: 3px;
        padding-right: 3px;
        font-size: clamp(9px, 2.45vw, 10.5px) !important;
    }
}

/* tigercloset 同款站点使用代码中已有的白底黑字、锐角风格 */
html[data-site-theme="tigercloset"] body.detail-page-open,
html[data-site-theme="tigercloset"] #productDetailPage {
    background: #ffffff !important;
    color: #000000 !important;
}

html[data-site-theme="tigercloset"] #productDetailPage .detail-header {
    background: #ffffff !important;
    border-color: #d9d9d9 !important;
    box-shadow: none !important;
}

html[data-site-theme="tigercloset"] #productDetailPage .detail-panel {
    background: #ffffff !important;
    border-color: #d9d9d9 !important;
    box-shadow: none !important;
}

html[data-site-theme="tigercloset"] #productDetailPage .detail-subpanel {
    background: #f6f6f6 !important;
    border-color: #d9d9d9 !important;
}

html[data-site-theme="tigercloset"] #productDetailPage .detail-title,
html[data-site-theme="tigercloset"] #productDetailPage .detail-strong,
html[data-site-theme="tigercloset"] #productDetailPage .detail-white,
html[data-site-theme="tigercloset"] #detailOriginalLink,
html[data-site-theme="tigercloset"] #detailSearchInput {
    color: #000000 !important;
}

html[data-site-theme="tigercloset"] #productDetailPage .detail-muted {
    color: #555555 !important;
}

html[data-site-theme="tigercloset"] #productDetailPage .detail-price,
html[data-site-theme="tigercloset"] #productDetailPage #detailBrandName {
    color: #000000 !important;
}

html[data-site-theme="tigercloset"] #productDetailPage .detail-accent-bg {
    background: #000000 !important;
    color: #ffffff !important;
}

html[data-site-theme="tigercloset"] #productDetailPage .detail-accent-border {
    border-color: #000000 !important;
    color: #000000 !important;
}

html[data-site-theme="tigercloset"] #productDetailPage .detail-panel,
html[data-site-theme="tigercloset"] #productDetailPage .detail-subpanel,
html[data-site-theme="tigercloset"] #productDetailPage button,
html[data-site-theme="tigercloset"] #productDetailPage input,
html[data-site-theme="tigercloset"] #productDetailPage a,
html[data-site-theme="tigercloset"] #productDetailPage img {
    border-radius: 2px !important;
}

html[data-site-theme="tigercloset"] #detailBottomBar {
    background: #ffffff !important;
    border-color: #d9d9d9 !important;
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.08) !important;
}

/* 商品详情页右上角三点菜单：币种与页面主题 */
#detailMoreMenuWrap {
    position: relative;
    z-index: 130;
}

#detailMoreBtn {
    border-radius: 9999px !important;
}

#detailMoreMenu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(290px, calc(100vw - 28px));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--theme-card) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.34);
    color: #f8fafc;
}

#detailMoreMenu.hidden {
    display: none !important;
}

#detailMoreMenu .detail-menu-heading {
    color: #9ca3af;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 16px 8px;
}

#detailMoreMenu .detail-menu-section + .detail-menu-section {
    border-top: 1px solid var(--theme-border);
}

#detailCurrencyOptions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 4px 10px 12px;
}

#detailThemeOptions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px 10px 12px;
}

#detailMoreMenu .detail-menu-option {
    min-width: 0;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    color: #d1d5db;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px !important;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

#detailMoreMenu .detail-menu-option:hover {
    background: var(--theme-element);
    border-color: var(--theme-border-light);
}

#detailMoreMenu .detail-menu-option.is-active {
    color: var(--theme-primary) !important;
    background: var(--theme-primary-alpha) !important;
    border-color: var(--theme-primary) !important;
}

#detailMoreMenu .detail-menu-option-label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

html[data-site-theme="tigercloset"] #detailMoreMenu {
    background: #ffffff !important;
    border-color: #d9d9d9 !important;
    color: #000000 !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.14) !important;
}

html[data-site-theme="tigercloset"] #detailMoreMenu .detail-menu-heading {
    color: #666666 !important;
}

html[data-site-theme="tigercloset"] #detailMoreMenu .detail-menu-option {
    color: #111111 !important;
}

html[data-site-theme="tigercloset"] #detailMoreMenu .detail-menu-option.is-active {
    color: #000000 !important;
    background: #f3f3f3 !important;
    border-color: #000000 !important;
}

@media (max-width: 767px) {
    #detailHeaderShareBtn {
        display: none !important;
    }

    #productDetailPage {
        padding-bottom: 88px;
    }

    #productDetailPage .detail-shell {
        width: 100%;
    }

    #productDetailPage .detail-header-inner {
        padding-left: 14px;
        padding-right: 14px;
    }

    #productDetailPage .detail-main-wrap {
        padding: 0;
    }

    #productDetailPage .detail-desktop-actions {
        display: none !important;
    }

    /* 移动端通过手指左右滑动大图，隐藏左右切换按钮 */
    #productDetailPage #detailPrevImageBtn,
    #productDetailPage #detailNextImageBtn {
        display: none !important;
    }

    #productDetailPage #detailMainImageWrap {
        /* 移动端同样保持上下左右间距一致 */
        margin: 12px;
        padding: 0;
        background: transparent !important;
        border: 0 !important;
        border-radius: 14px !important;
    }

    #productDetailPage #detailMainGalleryViewport,
    #productDetailPage .detail-main-slide-image {
        border-radius: 14px !important;
    }

    #productDetailPage #detailThumbs {
        margin: 10px 12px 12px;
        padding: 8px;
        gap: 10px;
        border-radius: 18px !important;
    }

    /* 一屏约显示 3.5 张，让下一张明显露出，提示可以左右滑动 */
    #productDetailPage #detailThumbs > button {
        flex: 0 0 28%;
        width: 28% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        min-width: 78px;
        max-width: 104px;
        border-radius: 13px !important;
    }

    #productDetailPage #detailQcSection {
        margin-top: 24px;
    }

    #productDetailPage #detailQcHeading,
    #productDetailPage #detailQcGrid {
        padding-left: 14px;
        padding-right: 14px;
    }

    #productDetailPage #detailQcGrid {
        gap: 14px;
    }

    #productDetailPage .detail-qc-card {
        padding: 6px;
        border-radius: 19px !important;
    }

    #productDetailPage .detail-grid-image {
        border-radius: 14px !important;
    }

    #productDetailPage .detail-panel {
        border-left-width: 0 !important;
        border-right-width: 0 !important;
        border-radius: 0 !important;
    }

    #productDetailPage aside.detail-panel {
        margin-top: 0;
        padding-bottom: 24px;
    }
}

@media (min-width: 768px) {
    #detailBottomBar {
        display: none !important;
    }
}

/* Product detail: tutorial and FAQ accordions */
#detailTipsContent {
    overflow: hidden;
}

.detail-guide-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail-guide-card {
    overflow: hidden;
    border: 1px solid var(--theme-border-light);
    border-radius: var(--site-card-button-radius) !important;
    background: var(--theme-card);
}

.detail-guide-toggle {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    color: #f8fafc;
    text-align: left;
    font-size: 14px;
    font-weight: 900;
}

.detail-guide-toggle:hover {
    background: var(--theme-primary-alpha);
    color: var(--theme-primary);
}

.detail-guide-toggle-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.detail-guide-toggle-title > i {
    flex: 0 0 auto;
    font-size: 19px;
}

.detail-guide-caret {
    flex: 0 0 auto;
    transition: transform 180ms ease;
}

.detail-guide-toggle[aria-expanded="true"] .detail-guide-caret {
    transform: rotate(180deg);
}

.detail-guide-article {
    max-height: min(68vh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 16px 18px;
    border-top: 1px solid var(--theme-border);
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.7;
    user-select: text;
}

.detail-guide-article h2 {
    margin: 16px 0 10px;
    color: #f8fafc;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 900;
}

.detail-guide-article h3 {
    margin: 18px 0 6px;
    color: #f8fafc;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 900;
}

.detail-guide-article p {
    margin: 8px 0;
}

.detail-guide-article ul {
    margin: 8px 0;
    padding-left: 20px;
    list-style: disc;
}

.detail-guide-article li + li {
    margin-top: 4px;
}

.detail-guide-article strong {
    color: #f8fafc;
}

.detail-guide-link {
    color: var(--theme-primary) !important;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.detail-guide-ending {
    margin-top: 18px !important;
    color: var(--theme-primary);
    font-weight: 900;
}

html[data-color-mode="light"] .detail-guide-card,
html[data-site-theme="tigercloset"] .detail-guide-card {
    background: #ffffff;
    border-color: var(--theme-border);
}

html[data-color-mode="light"] .detail-guide-toggle,
html[data-site-theme="tigercloset"] .detail-guide-toggle,
html[data-color-mode="light"] .detail-guide-article h2,
html[data-color-mode="light"] .detail-guide-article h3,
html[data-color-mode="light"] .detail-guide-article strong,
html[data-site-theme="tigercloset"] .detail-guide-article h2,
html[data-site-theme="tigercloset"] .detail-guide-article h3,
html[data-site-theme="tigercloset"] .detail-guide-article strong {
    color: #111827;
}

html[data-color-mode="light"] .detail-guide-article,
html[data-site-theme="tigercloset"] .detail-guide-article {
    color: #4b5563;
    border-color: var(--theme-border);
}

@media (max-width: 767px) {
    .detail-guide-toggle {
        padding: 11px 12px;
        font-size: 13px;
    }

    .detail-guide-article {
        max-height: 64vh;
        padding: 2px 13px 16px;
        font-size: 13px;
        line-height: 1.65;
    }

    .detail-guide-article h2 {
        font-size: 17px;
    }

    .detail-guide-article h3 {
        font-size: 14px;
    }
}