/* ============================================================
   产品中心 / 产品详情页样式（ticket 18 爆品详情页试点）
   版式依据：品牌方示意图（左主图右信息 + 折叠规格表）+
   汤臣倍健产品页版式参考 by-health.com/product/192.html
   独立样式文件，不改动既有 product.css（旗下品牌页在用）。
   文字对比度均经 WCAG 实测 ≥4.5:1（大字 ≥3:1）。
   ============================================================ */

/* 通用容器 */
.pdp-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 跳到主要内容（键盘用户第一个可达元素） */
.pdp-skip {
    position: absolute;
    left: -9999px;
}
.pdp-skip:focus-visible {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 2000;
    background: #fff;
    color: #1a1a1a;
    border: 2px solid #cf3a18;
    border-radius: 8px;
    padding: 10px 18px;
    text-decoration: none;
    font-size: 14px;
}

/* ---------- 面包屑 ---------- */
/* 顶部导航 .caidan 为 fixed（高约 70-90px），页面主体需预留空间避免重叠 */
.pdp-breadcrumb {
    background: #f7f8fa;
    border-bottom: 1px solid #ececec;
    font-size: 14px;
    color: #6b6b6b; /* 5.02:1 on #f7f8fa */
    padding-top: clamp(80px, 9vw, 110px);
}
.pdp-breadcrumb a { color: #555; text-decoration: none; margin: 0 6px; }
.pdp-breadcrumb a:hover { color: #cf3a18; }
.pdp-breadcrumb a:first-child { margin-left: 0; }
.pdp-breadcrumb i { font-size: 11px; color: #6b6b6b; }
.pdp-breadcrumb span { color: #1a1a1a; margin-left: 6px; }

/* ---------- 详情主体：左主图 右信息（主流商城阅读习惯） ---------- */
.pdp-main { padding: 44px 0 24px; }
.pdp-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    align-items: flex-start;
}
.pdp-info { flex: 1 1 520px; min-width: 0; }
.pdp-figure {
    flex: 0 1 460px;
    min-width: 0;
    background: #f7f8fa;
    border-radius: 12px;
    overflow: hidden;
    order: -1; /* 视觉上主图居左；DOM 保持 H1 在前，对 SEO/GEO 更友好 */
}
.pdp-figure img {
    width: 100%;
    display: block;
    outline: 1px solid oklch(0 0 0 / 0.1); /* 内容图描边，inset 防 JSON 般硬边 */
    outline-offset: -1px;
}

/* 类别标签：蓝帽=蓝 / 普通食品=橙 / 特膳食品=绿（浅底深字，对比度实测达标） */
.pdp-pcat {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 13px;
    margin-bottom: 14px;
    letter-spacing: 0.06em;
}
.pdp-pcat.pcat-bluehat { background: #dbeafe; color: #1e40af; } /* 7.15:1 */
.pdp-pcat.pcat-normal { background: #ffedd5; color: #9a3412; }  /* 6.38:1 */
.pdp-pcat.pcat-special { background: #dcfce7; color: #166534; } /* 6.49:1 */

.pdp-title {
    font-size: 30px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.35;
    margin: 0 0 8px;
    text-wrap: balance;
    overflow-wrap: break-word;
}
.pdp-slogan {
    font-size: 16px;
    color: #6b6b6b; /* 5.33:1 on white */
    margin: 0 0 20px;
    line-height: 1.6;
}

/* 价格行 */
.pdp-price-row {
    background: #fdf4f0;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 24px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}
.pdp-price-label { font-size: 14px; color: #595959; }      /* 7.0:1 on white 系 */
.pdp-price {
    font-size: 30px;
    font-weight: 800;
    color: #c81e1e; /* 5.29:1 on #fdf4f0，大字 3:1 亦通过 */
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pdp-price-note {
    font-size: 12px;
    color: #6f6f6f; /* 4.64:1 on #fdf4f0 */
    width: 100%;
}

/* 字段块（核心成分 / 适用人群 / 产品标签 / 购买渠道） */
.pdp-field {
    display: flex;
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.7;
}
.pdp-field dt {
    flex: 0 0 110px;
    color: #595959; /* 7.0:1 on white */
    margin: 0;
}
.pdp-field dd {
    margin: 0;
    color: #333;
    flex: 1;
    min-width: 0;
}

/* 标签组 */
.pdp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-chip {
    display: inline-block;
    padding: 3px 12px;
    border: 1px solid #e3b98a;
    background: #fffaf3;
    color: #8a5a1d; /* 5.68:1 on #fffaf3 */
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
}
.pdp-chip-light {
    border-color: #d9d9d9;
    background: #f7f7f7;
    color: #595959;
}

/* 购买渠道按钮（白字 #cf3a18 4.92:1；hover 6.03:1） */
.pdp-channels { display: flex; flex-wrap: wrap; gap: 10px; }
.pdp-buy-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #cf3a18;
    color: #fff;
    border-radius: 8px;
    padding: 12px 24px; /* 高度 ≥44px 触达 */
    font-size: 14px;
    text-decoration: none;
    transition: background .2s;
}
span.pdp-buy-btn { background: #767676; cursor: default; } /* 4.54:1 */
.pdp-buy-btn i { font-size: 12px; }

/* ---------- 规格参数卡片（可折叠） ---------- */
.pdp-specs { padding: 8px 0 16px; }
.pdp-specs-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    overflow: hidden;
}
.pdp-specs-card summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 22px;
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}
.pdp-specs-card summary::-webkit-details-marker { display: none; }
.pdp-specs-card summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: auto;
    color: #595959; /* 展开箭头 7.0:1 */
    font-size: 13px;
    transition: transform .2s;
}
.pdp-specs-card[open] summary::after { transform: rotate(180deg); }
.pdp-specs-card summary i { color: #cf3a18; }

.pdp-specs-table {
    width: calc(100% - 44px);
    margin: 0 22px 22px;
    border-collapse: collapse;
    font-size: 14px;
}
.pdp-specs-table th,
.pdp-specs-table td {
    border: 1px solid #f0f0f0;
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
}
.pdp-specs-table th {
    background: #fafafa;
    color: #555;
    font-weight: 500;
    white-space: nowrap;
    width: 160px;
}
.pdp-specs-table td { color: #333; line-height: 1.7; }
.pdp-specs-table tr.alt td,
.pdp-specs-table tr.alt th { background: #fcfcfc; }

/* ---------- 图文详情 ---------- */
.pdp-content { padding: 8px 0 24px; }
.pdp-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 20px 0 18px;
    padding-inline-start: 12px;
    border-inline-start: 4px solid #cf3a18;
}
.pdp-rich { font-size: 15px; line-height: 1.9; color: #444; }
.pdp-rich img { max-width: 100%; height: auto; }

/* ---------- 更多产品 / 列表网格 ---------- */
.pdp-more { padding: 8px 0 48px; }
.pdp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.pdp-grid-lg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pdp-card {
    display: block;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .2s, transform .2s;
}
.pdp-card-img {
    background: #f7f8fa;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.pdp-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    outline: 1px solid oklch(0 0 0 / 0.1);
    outline-offset: -1px;
}
.pdp-card-body { padding: 14px 16px 18px; }
.pdp-card-cat {
    display: inline-block;
    font-size: 12px;
    color: #8a5a1d; /* 5.68:1 on #fffaf3 */
    background: #fffaf3;
    border: 1px solid #e3b98a;
    border-radius: 4px;
    padding: 1px 8px;
    margin-bottom: 8px;
}
.pdp-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin: 0 0 6px;
    line-height: 1.5;
    text-wrap: balance;
    overflow-wrap: break-word;
}
.pdp-card-slogan {
    font-size: 13px;
    color: #595959; /* 7.0:1 on white */
    margin: 0 0 8px;
    line-height: 1.5;
}
.pdp-card-price {
    font-size: 17px;
    font-weight: 700;
    color: #c81e1e; /* 5.74:1 on white */
    font-variant-numeric: tabular-nums;
}

/* ---------- 列表页 banner ---------- */
.plp-banner {
    background: linear-gradient(135deg, #1f2430 0%, #3a4254 60%, #cf3a18 160%);
    color: #fff;
    padding: clamp(104px, 13vw, 150px) 0 64px;
    text-align: center;
}
.plp-banner-inner h1 { font-size: 34px; margin: 0 0 10px; letter-spacing: 0.05em; }
.plp-banner-inner p { font-size: 15px; color: rgba(255, 255, 255, .75); margin: 0; letter-spacing: 0.06em; }
.plp-section { padding: 36px 0 48px; }

/* ---------- 分页（产品页不加载 news.css，样式自带；白字 #cf3a18 4.92:1） ---------- */
.pdp-container .pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 28px 0 10px;
    padding: 0;
}
.pdp-container .pagination li {
    list-style: none;
    border: 1px solid #e0e0e0;
    margin-left: -1px;
}
.pdp-container .pagination li:first-child {
    border-radius: 8px 0 0 8px;
    margin-left: 0;
}
.pdp-container .pagination li:last-child { border-radius: 0 8px 8px 0; }
.pdp-container .pagination li a,
.pdp-container .pagination li span {
    display: block;
    padding: 9px 16px;
    background: #f8f9fa;
    color: #333;
    font-size: 14px;
    line-height: 22px;
    text-decoration: none;
}
.pdp-container .pagination li a:hover { background: #cf3a18; color: #fff; }
.pdp-container .pagination li.active a,
.pdp-container .pagination li a.active {
    background: #cf3a18;
    color: #fff;
}
.pdp-container .pagination li span { color: #6f6f6f; background: #fafafa; }

/* 空列表状态 */
.plp-empty {
    text-align: center;
    padding: 64px 0 24px;
    color: #6b6b6b;
    font-size: 15px;
}
.plp-empty i {
    font-size: 40px;
    color: #d9d9d9;
    margin-bottom: 14px;
    display: block;
}

/* 屏幕阅读器辅助 */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ---------- 回到顶部（产品页不加载 news.css，样式自带） ---------- */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: #cf3a18;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
}
.back-to-top.visible { opacity: 1; visibility: visible; }

/* ---------- 悬停态：仅限支持 hover 的指针（触屏不粘连） ---------- */
@media (hover: hover) {
    a.pdp-buy-btn:hover { background: #b8310f; color: #fff; }
    .pdp-card:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
        transform: translateY(-2px);
    }
    .back-to-top:hover { background: #b8310f; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 999px) {
    .pdp-grid, .pdp-grid-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .pdp-flex { gap: 24px; }
    .pdp-title { font-size: 24px; }
}
@media (max-width: 599px) {
    .pdp-grid, .pdp-grid-lg { grid-template-columns: minmax(0, 1fr); }
    .pdp-field dt { flex-basis: 92px; }
    .pdp-figure { order: -1; flex-basis: 100%; }
    .pdp-specs-table th { white-space: normal; width: auto; }
    .plp-banner { padding: 92px 0 44px; }
    .plp-banner-inner h1 { font-size: 26px; }
}

/* ---------- 减弱动态效果偏好：只保留必要反馈 ---------- */
@media (prefers-reduced-motion: reduce) {
    .pdp-card,
    .pdp-buy-btn,
    .back-to-top,
    .pdp-specs-card summary::after {
        transition: none;
    }
    .pdp-card:hover { transform: none; } /* 保留阴影作为静态提示 */
}