/*
 * T-Forty Tripod detail page styles.
 *
 * 说明：
 * - 所有规则均限定在 `.t-forty-detail-page` 或 `.t-forty-banner` 命名空间下，避免污染其它配件详情页。
 * - 颜色、圆角、阴影与间距优先引用 root.css 中的 `--v2-*` token，确保与当前站点视觉规范一致。
 */

body.product-detail-v2 .t-forty-banner .atf-page-heading-title {
    max-width: min(760px, 100%);
    /*
     * T-Forty 当前没有独立 Banner 资源，首屏需要对齐 AAF 详情页同款浅色产品 Banner。
     * 因此标题回到深色文字，而不是前一版深色背景上的白色文案。
     */
    color: var(--v2-text-heading) !important;
    background: none;
    -webkit-text-fill-color: var(--v2-text-heading);
    text-shadow: none;
}

body.product-detail-v2 .t-forty-banner .atf-post-label {
    color: var(--v2-text-body);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

body.product-detail-v2 .t-forty-banner .atf-post-label span,
body.product-detail-v2 .t-forty-banner .atf-post-label a {
    color: var(--v2-text-body);
}

body.product-detail-v2 .t-forty-banner .atf-post-label a:hover {
    color: var(--v2-primary-600);
}

@media (min-width: 769px) {
    body.product-detail-v2 .atf-page-heading.atf-align-left.t-forty-banner .banner-center-btn {
        left: 68%;
        bottom: 16%;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 768px) {
    body.product-detail-v2 .atf-page-heading.atf-align-left.t-forty-banner .banner-center-btn {
        top: auto;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
    }
}

.t-forty-detail-page .t-forty-content {
    color: var(--v2-text-body);
}

.t-forty-detail-page .filter-floating-nav {
    position: fixed;
    left: 0;
    top: 50%;
    z-index: 1000;
    transform: translateY(-50%);
    transition: all var(--v2-home-transition-duration) ease;
}

.t-forty-detail-page .filter-floating-nav .nav-toggle {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-spacing-xs);
    min-height: var(--v2-button-height);
    padding: 0 var(--v2-spacing-md);
    color: var(--v2-text-inverse);
    background: var(--v2-primary-600);
    border: 0;
    border-radius: 0 var(--v2-radius-md) var(--v2-radius-md) 0;
    box-shadow: var(--v2-shadow-card);
    cursor: pointer;
    font-size: var(--v2-font-size-sm);
    font-weight: 700;
    line-height: 1;
    transition: all var(--v2-home-transition-duration) ease;
}

.t-forty-detail-page .filter-floating-nav .nav-toggle:hover,
.t-forty-detail-page .filter-floating-nav.active .nav-toggle {
    background: var(--v2-primary-700);
}

.t-forty-detail-page .filter-floating-nav.active .nav-toggle .nav-text {
    width: 0;
    opacity: 0;
    overflow: hidden;
}

.t-forty-detail-page .filter-floating-nav .nav-content {
    position: relative;
    width: 260px;
    max-height: min(78vh, 620px);
    padding: var(--v2-spacing-lg) var(--v2-spacing-xl) var(--v2-spacing-lg) var(--v2-spacing-md);
    overflow-y: auto;
    color: var(--v2-text-body);
    background: var(--v2-bg-primary);
    border: 1px solid var(--v2-bg-divider);
    border-left: 0;
    border-radius: 0 var(--v2-radius-lg) var(--v2-radius-lg) 0;
    box-shadow: var(--v2-shadow-card-hover);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100%);
    transition: all var(--v2-home-transition-duration) ease;
}

.t-forty-detail-page .filter-floating-nav.active .nav-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.t-forty-detail-page .filter-floating-nav .nav-content h3 {
    margin: 0 0 var(--v2-spacing-md);
    padding-bottom: var(--v2-spacing-sm);
    color: var(--v2-text-heading);
    border-bottom: 1px solid var(--v2-bg-divider);
    font-size: var(--v2-font-size-base);
    font-weight: 800;
    line-height: 1.2;
}

.t-forty-detail-page .filter-floating-nav .nav-content ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.t-forty-detail-page .filter-floating-nav .nav-content li {
    margin: 0 0 var(--v2-spacing-xs);
}

.t-forty-detail-page .filter-floating-nav .nav-link {
    display: block;
    padding: var(--v2-spacing-xs) var(--v2-spacing-sm);
    color: var(--v2-text-body);
    border-radius: var(--v2-radius-sm);
    font-size: var(--v2-font-size-sm);
    font-weight: 600;
    line-height: var(--v2-line-height-base);
    text-decoration: none;
    transition: all var(--v2-home-transition-duration) ease;
}

.t-forty-detail-page .filter-floating-nav .nav-link:hover,
.t-forty-detail-page .filter-floating-nav .nav-link.active {
    color: var(--v2-primary-700);
    background: var(--v2-primary-50);
}

.t-forty-detail-page .filter-floating-nav .nav-divider {
    height: 1px;
    margin: var(--v2-spacing-md) 0;
    background: var(--v2-bg-divider);
}

.t-forty-detail-page .filter-floating-nav .nav-close {
    position: absolute;
    top: var(--v2-spacing-sm);
    right: var(--v2-spacing-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--v2-text-secondary);
    background: var(--v2-bg-functional);
    border: 0;
    border-radius: var(--v2-radius-pill);
    cursor: pointer;
    font-size: var(--v2-font-size-sm);
    line-height: 1;
    transition: all var(--v2-home-transition-duration) ease;
}

.t-forty-detail-page .filter-floating-nav .nav-close:hover {
    color: var(--v2-text-inverse);
    background: var(--v2-primary-600);
}

.t-forty-detail-page .product-section {
    border: 1px solid var(--v2-bg-divider);
    border-radius: var(--v2-radius-lg);
    box-shadow: var(--v2-shadow-card);
}

.t-forty-detail-page .section-title {
    padding-left: var(--v2-spacing-md);
    border-left: 4px solid var(--v2-primary-500);
    color: var(--v2-text-heading);
    text-align: left;
}

.t-forty-detail-page .section-title::after {
    display: none;
}

.t-forty-detail-page .t-forty-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 var(--v2-spacing-md);
    margin: 0 auto var(--v2-spacing-md);
    color: var(--v2-primary-700);
    background: var(--v2-primary-50);
    border: 1px solid var(--v2-primary-100);
    border-radius: var(--v2-radius-pill);
    font-weight: 800;
    letter-spacing: 0.02em;
}

.t-forty-detail-page .t-forty-hero-image picture,
.t-forty-detail-page .t-forty-hero-image img {
    display: block;
    width: 100%;
    max-width: 960px;
    height: auto;
    margin-right: auto;
    margin-left: auto;
}

.t-forty-detail-page .t-forty-product-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--v2-spacing-lg);
    margin: 0 0 var(--v2-spacing-xl);
}

.t-forty-detail-page .t-forty-product-gallery-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: var(--v2-spacing-md);
    margin: 0;
    overflow: hidden;
    background: var(--v2-bg-functional);
    border: 1px solid var(--v2-bg-divider);
    border-radius: var(--v2-radius-lg);
    box-shadow: var(--v2-shadow-soft);
}

.t-forty-detail-page .t-forty-product-gallery-item picture,
.t-forty-detail-page .t-forty-product-gallery-item img {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
}

.t-forty-detail-page .t-forty-intro-card,
.t-forty-detail-page .t-forty-caution-card,
.t-forty-detail-page .t-forty-ordered-list,
.t-forty-detail-page .t-forty-check-list {
    padding: var(--v2-spacing-xl);
    background: var(--v2-bg-functional);
    border: 1px solid var(--v2-bg-divider);
    border-radius: var(--v2-radius-lg);
}

.t-forty-detail-page .t-forty-intro-card p,
.t-forty-detail-page .t-forty-section-intro,
.t-forty-detail-page .t-forty-caution-card p {
    margin: 0;
    color: var(--v2-text-body);
    font-size: var(--v2-font-size-base);
    line-height: 1.8;
}

.t-forty-detail-page .t-forty-feature-grid,
.t-forty-detail-page .t-forty-travel-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--v2-spacing-lg);
}

.t-forty-detail-page .t-forty-feature-card,
.t-forty-detail-page .t-forty-travel-card,
.t-forty-detail-page .t-forty-story-card {
    background: var(--v2-bg-primary);
    border: 1px solid var(--v2-bg-divider);
    border-radius: var(--v2-radius-lg);
    box-shadow: var(--v2-shadow-soft);
}

.t-forty-detail-page .t-forty-feature-card {
    padding: var(--v2-spacing-lg);
}

.t-forty-detail-page .t-forty-feature-card h3,
.t-forty-detail-page .t-forty-travel-card h3,
.t-forty-detail-page .t-forty-story-copy h3 {
    margin: 0 0 var(--v2-spacing-sm);
    color: var(--v2-text-heading);
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 800;
    line-height: var(--v2-h3-line-height);
}

.t-forty-detail-page .t-forty-feature-card p,
.t-forty-detail-page .t-forty-travel-card p,
.t-forty-detail-page .t-forty-story-copy p {
    margin: 0;
    color: var(--v2-text-body);
    font-size: var(--v2-font-size-base);
    line-height: 1.75;
}

.t-forty-detail-page .t-forty-image-card,
.t-forty-detail-page .t-forty-story-image,
.t-forty-detail-page .t-forty-travel-card picture,
.t-forty-detail-page .t-forty-travel-card img {
    overflow: hidden;
    border-radius: var(--v2-radius-md);
}

.t-forty-detail-page .t-forty-image-card picture,
.t-forty-detail-page .t-forty-image-card img,
.t-forty-detail-page .t-forty-story-image picture,
.t-forty-detail-page .t-forty-story-image img,
.t-forty-detail-page .t-forty-travel-card picture,
.t-forty-detail-page .t-forty-travel-card img,
.t-forty-detail-page .t-forty-image-stack picture,
.t-forty-detail-page .t-forty-image-stack img,
.t-forty-detail-page .t-forty-seamless-stack picture,
.t-forty-detail-page .t-forty-seamless-stack img {
    display: block;
    width: 100%;
    height: auto;
}

.t-forty-detail-page .t-forty-image-card {
    background: var(--v2-bg-primary);
    box-shadow: var(--v2-shadow-card);
}

.t-forty-detail-page .t-forty-story-stack {
    display: grid;
    gap: var(--v2-spacing-xl);
}

.t-forty-detail-page .t-forty-story-card {
    overflow: hidden;
}

.t-forty-detail-page .t-forty-story-copy,
.t-forty-detail-page .t-forty-travel-card h3,
.t-forty-detail-page .t-forty-travel-card p {
    padding-right: var(--v2-spacing-lg);
    padding-left: var(--v2-spacing-lg);
}

.t-forty-detail-page .t-forty-story-copy {
    padding-top: var(--v2-spacing-lg);
    padding-bottom: var(--v2-spacing-lg);
}

.t-forty-detail-page .t-forty-travel-card {
    overflow: hidden;
    padding-bottom: var(--v2-spacing-lg);
}

.t-forty-detail-page .t-forty-travel-card h3 {
    padding-top: var(--v2-spacing-lg);
}

.t-forty-detail-page .t-forty-section-intro {
    max-width: 980px;
    margin: 0 0 var(--v2-spacing-xl);
}

.t-forty-detail-page .t-forty-image-stack {
    display: grid;
    gap: var(--v2-spacing-lg);
}

.t-forty-detail-page .t-forty-image-stack picture,
.t-forty-detail-page .t-forty-image-stack img {
    border-radius: var(--v2-radius-md);
    box-shadow: var(--v2-shadow-soft);
}

.t-forty-detail-page .t-forty-caution-card {
    margin-top: var(--v2-spacing-xl);
    background: color-mix(in srgb, var(--v2-warning, #f59e0b) 10%, var(--v2-bg-primary));
    border-color: color-mix(in srgb, var(--v2-warning, #f59e0b) 34%, var(--v2-bg-divider));
}

.t-forty-detail-page .t-forty-caution-card p,
.t-forty-detail-page .t-forty-caution-card strong {
    color: var(--v2-text-heading);
}

.t-forty-detail-page .t-forty-ordered-list,
.t-forty-detail-page .t-forty-check-list {
    margin: var(--v2-spacing-xl) 0 0;
    padding-left: calc(var(--v2-spacing-xl) + var(--v2-spacing-md));
}

.t-forty-detail-page .t-forty-ordered-list li,
.t-forty-detail-page .t-forty-check-list li {
    margin-bottom: var(--v2-spacing-sm);
    color: var(--v2-text-body);
    line-height: 1.8;
}

.t-forty-detail-page .t-forty-check-list {
    margin-top: 0;
}

.t-forty-detail-page .t-forty-seamless-stack {
    overflow: hidden;
    background: var(--v2-bg-primary);
    border-radius: var(--v2-radius-md);
    box-shadow: var(--v2-shadow-card);
    font-size: 0;
    line-height: 0;
}

.t-forty-detail-page .t-forty-seamless-stack picture,
.t-forty-detail-page .t-forty-seamless-stack img {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.t-forty-detail-page #related .section-title {
    margin-bottom: var(--v2-spacing-xl);
}

@media (max-width: 1199px) {
    .t-forty-detail-page .t-forty-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .t-forty-detail-page .t-forty-product-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .t-forty-detail-page .t-forty-travel-grid {
        grid-template-columns: 1fr;
    }

    .t-forty-detail-page .t-forty-intro-card,
    .t-forty-detail-page .t-forty-caution-card,
    .t-forty-detail-page .t-forty-ordered-list,
    .t-forty-detail-page .t-forty-check-list {
        padding: var(--v2-spacing-lg);
    }
}

@media (max-width: 575px) {
    .t-forty-detail-page {
        padding-top: var(--v2-spacing-xl);
    }

    .t-forty-detail-page .product-section {
        padding: var(--v2-spacing-lg) var(--v2-spacing-sm);
    }

    .t-forty-detail-page .t-forty-feature-grid {
        grid-template-columns: 1fr;
    }

    .t-forty-detail-page .t-forty-product-gallery {
        grid-template-columns: 1fr;
    }

    .t-forty-detail-page .t-forty-eyebrow {
        max-width: 100%;
        white-space: normal;
        letter-spacing: 0;
    }
}

.t-forty-detail-page .product-section,
.t-forty-detail-page .t-forty-product-gallery-item,
.t-forty-detail-page .t-forty-intro-card,
.t-forty-detail-page .t-forty-caution-card,
.t-forty-detail-page .t-forty-ordered-list,
.t-forty-detail-page .t-forty-check-list,
.t-forty-detail-page .t-forty-feature-card,
.t-forty-detail-page .t-forty-travel-card,
.t-forty-detail-page .t-forty-story-card,
.t-forty-detail-page .t-forty-image-card,
.t-forty-detail-page .t-forty-story-image,
.t-forty-detail-page .t-forty-travel-card picture,
.t-forty-detail-page .t-forty-travel-card img,
.t-forty-detail-page .t-forty-image-stack picture,
.t-forty-detail-page .t-forty-image-stack img,
.t-forty-detail-page .t-forty-seamless-stack {
    border-radius: var(--v2-radius-sm);
}

body.product-detail-v2 .t-forty-detail-page .product-section {
    border-radius: var(--v2-radius-sm);
}

.t-forty-detail-page .t-forty-intro-card p,
.t-forty-detail-page .t-forty-section-intro,
.t-forty-detail-page .t-forty-caution-card p,
.t-forty-detail-page .t-forty-feature-card p,
.t-forty-detail-page .t-forty-travel-card p,
.t-forty-detail-page .t-forty-story-copy p,
.t-forty-detail-page .t-forty-ordered-list li,
.t-forty-detail-page .t-forty-check-list li {
    font-size: 16px;
    line-height: 24px;
}

.t-forty-detail-page .t-forty-feature-card h3,
.t-forty-detail-page .t-forty-travel-card h3,
.t-forty-detail-page .t-forty-story-copy h3 {
    font-size: var(--v2-h2-font-size);
    line-height: var(--v2-h2-line-height);
    font-weight: 500;
}

@media (max-width: 767px) {
    body.product-detail-v2 .t-forty-detail-page .t-forty-feature-card h3,
    body.product-detail-v2 .t-forty-detail-page .t-forty-travel-card h3,
    body.product-detail-v2 .t-forty-detail-page .t-forty-story-copy h3 {
        font-size: 20px;
        line-height: 28px;
    }
}