/* ==========================================================================
   FASHIONPHILE 风格 · 内页样式（商品详情 / 列表 / 购物袋 / 会员中心）
   依赖 fp.css 的 :root 变量，必须在其后加载
   ========================================================================== */

/* --------------------------------------------------------------------------
   面包屑（极简灰字，斜杠分隔）
   -------------------------------------------------------------------------- */
.fp-pd-crumb {
    font-size: 11.5px;
    color: var(--m-text-3);
    padding: 18px 0 14px;
    line-height: 1.6;
    letter-spacing: .02em;
}

.fp-pd-crumb a {
    color: var(--m-text-3);
    text-decoration: none;
}

.fp-pd-crumb a:hover {
    color: var(--fp-ink);
    text-decoration: underline;
}

.fp-pd-crumb span,
.fp-pd-crumb b {
    color: var(--fp-ink);
    font-weight: 400;
}

/* ==========================================================================
   一、商品详情页
   ========================================================================== */
.fp-pd {
    display: grid;
    grid-template-columns: minmax(0, 1.58fr) minmax(330px, 1fr);
    gap: 84px;
    padding-bottom: 64px;
}

/* ---------- 左侧图库 ---------- */
.fp-gal-main {
    background: #fff;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.fp-gal-main img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .4s ease;
}

.fp-gal-main:hover img {
    transform: scale(1.04);
}

.fp-gal-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.fp-gal-thumb {
    flex: 0 0 calc((100% - 50px) / 6);
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .18s;
    overflow: hidden;
}

.fp-gal-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.fp-gal-thumb:hover {
    border-color: var(--m-line);
}

.fp-gal-thumb.fp-on {
    border-color: var(--fp-ink);
}

/* 分享 / 收藏 */
.fp-gal-acts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    font-size: 12px;
    color: var(--m-text-3);
}

.fp-gal-share {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fp-gal-share b {
    font-weight: 400;
    color: var(--m-text-3);
    font-size: 11.5px;
    letter-spacing: .04em;
}

.fp-gal-share a {
    color: var(--m-text-2);
    font-size: 15px;
    text-decoration: none;
    transition: color .16s;
}

.fp-gal-share a:hover {
    color: var(--fp-ink);
}

.fp-fav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--m-text-2);
    text-decoration: none;
    border: 1px solid var(--m-line);
    padding: 8px 14px;
    transition: all .18s;
}

.fp-fav:hover,
.fp-fav.fp-fav-on {
    border-color: var(--fp-ink);
    color: var(--fp-ink);
}

/* ---------- 右侧信息栏 ---------- */
.fp-pd-info {
    padding-top: 2px;
}

.fp-pd-auth {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--m-text-2);
    margin-bottom: 20px;
    letter-spacing: .02em;
}

.fp-pd-auth i {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--fp-ink);
    color: #fff;
    font-size: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 15px;
}

.fp-pd-auth span {
    color: var(--m-text-3);
    margin-left: 2px;
}

.fp-pd-brand {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--fp-ink);
    margin-bottom: 10px;
}

.fp-pd-name {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--fp-ink);
    margin: 0 0 4px;
    letter-spacing: .01em;
}

.fp-pd-sub {
    font-size: 14px;
    line-height: 1.65;
    color: var(--fp-ink);
    margin-bottom: 18px;
}

.fp-pd-price {
    font-size: 16px;
    font-weight: 500;
    color: var(--fp-ink);
    margin-bottom: 2px;
    letter-spacing: .01em;
}

.fp-pd-price del {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--m-text-4);
    margin-left: 10px;
}

.fp-pd-price-2 {
    font-size: 14.5px;
    color: var(--fp-ink);
    margin-bottom: 14px;
}

.fp-pd-inst {
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--m-text-3);
    margin-bottom: 16px;
    letter-spacing: .01em;
}

.fp-pd-inst a {
    color: var(--m-text-2);
    text-decoration: underline;
}

/* 主按钮 */
.fp-pd-bag {
    display: block;
    width: 100%;
    background: var(--fp-ink);
    color: #fff;
    text-align: center;
    padding: 14px 12px;
    border: 0;
    border-radius: 0;
    font-size: 12.5px;
    line-height: 1.55;
    letter-spacing: .05em;
    cursor: pointer;
    font-family: inherit;
    transition: background .18s;
}

.fp-pd-bag:hover {
    background: #000;
}

.fp-pd-bag em {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: rgba(255, 255, 255, .78);
    letter-spacing: .02em;
}

.fp-pd-btn2 {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.fp-pd-btn2 .fp-pd-bag {
    margin-top: 0;
}

.fp-pd-btn2 .fp-pd-bag-line {
    background: #fff;
    color: var(--fp-ink);
    border: 1px solid var(--fp-ink);
}

.fp-pd-btn2 .fp-pd-bag-line:hover {
    background: var(--fp-ink);
    color: #fff;
}

.fp-pd-ship {
    font-size: 10.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-align: center;
    color: var(--m-text-2);
    line-height: 1.6;
    margin: 12px 0 0;
}

.fp-pd-ship em {
    display: block;
    font-style: normal;
    text-transform: none;
    letter-spacing: .04em;
    color: var(--m-text-3);
    font-size: 10.5px;
    margin-top: 2px;
}

.fp-pd-hr {
    height: 1px;
    background: var(--m-line);
    margin: 24px 0 0;
}

/* 成色 */
.fp-pd-cond-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0 0;
    font-size: 12.5px;
    color: var(--fp-ink);
}

.fp-pd-cond-hd b {
    font-weight: 400;
}

.fp-pd-cond-hd span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fp-pd-cond-hd i.fa {
    font-size: 12px;
    color: var(--m-text-4);
}

.fp-scale {
    display: flex;
    margin: 12px 0 4px;
    border-top: 1px solid var(--m-line);
}

.fp-scale-i {
    flex: 1;
    text-align: center;
    font-size: 10.5px;
    color: var(--m-text-3);
    padding-top: 9px;
    position: relative;
    line-height: 1.4;
}

.fp-scale-i em {
    display: block;
    font-style: normal;
    font-size: 9.5px;
    color: var(--m-text-4);
    margin-top: 1px;
}

.fp-scale-i.fp-on {
    color: var(--fp-ink);
    font-weight: 600;
}

.fp-scale-i.fp-on em {
    color: var(--m-text-2);
}

.fp-scale-i.fp-on:before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    width: 22px;
    height: 2px;
    margin-left: -11px;
    background: #cf6d97;
}

/* 属性行 */
.fp-pd-attrs {
    margin-top: 16px;
}

.fp-pd-attr {
    display: flex;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.65;
    padding: 3px 0;
    color: var(--fp-ink);
}

.fp-pd-attr b {
    font-weight: 500;
    flex: 0 0 auto;
    color: var(--fp-ink);
}

.fp-pd-attr span {
    color: var(--m-text-2);
}

/* 物品编号 */
.fp-pd-itemno {
    text-align: right;
    font-size: 11px;
    color: var(--m-text-3);
    padding: 16px 0 0;
    letter-spacing: .02em;
}

/* 自取 / 门店信息块 */
.fp-pd-pick {
    display: flex;
    gap: 11px;
    background: var(--fp-pink-2);
    padding: 13px 15px;
    margin: 14px 0 0;
    cursor: pointer;
}

.fp-pd-pick > i {
    font-size: 13px;
    color: var(--fp-ink);
    margin-top: 2px;
}

.fp-pd-pick-txt {
    flex: 1;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--fp-ink);
}

.fp-pd-pick-txt em {
    display: block;
    font-style: normal;
    color: var(--m-text-2);
    font-size: 11px;
}

.fp-pd-pick > i.fa-chevron-down {
    font-size: 10px;
    color: var(--m-text-3);
    align-self: center;
    margin-top: 0;
}

/* 折叠面板 */
.fp-acc {
    border-bottom: 1px solid var(--m-line);
}

.fp-acc:first-of-type {
    border-top: 1px solid var(--m-line);
    margin-top: 18px;
}

.fp-acc summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    font-size: 12.5px;
    color: var(--fp-ink);
    letter-spacing: .02em;
}

.fp-acc summary::-webkit-details-marker {
    display: none;
}

.fp-acc summary:after {
    content: '\f107';
    font-family: FontAwesome;
    font-size: 11px;
    color: var(--m-text-3);
    transition: transform .2s;
}

.fp-acc[open] summary:after {
    transform: rotate(180deg);
}

.fp-acc-body {
    padding: 0 0 16px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--m-text-2);
}

.fp-acc-body img {
    max-width: 100%;
    height: auto;
}

/* 分期 / 预订色块 */
.fp-lay {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #f9e9f0;
    padding: 16px 18px;
    margin-top: 18px;
    text-decoration: none;
    color: var(--fp-ink);
    transition: background .18s;
}

.fp-lay:hover {
    background: #f5dde9;
}

.fp-lay-txt b {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .02em;
}

.fp-lay-txt em {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: var(--m-text-2);
    margin-top: 3px;
}

.fp-lay > i {
    font-size: 13px;
}

/* SKU 选择 */
.fp-pd-sku {
    margin-top: 18px;
}

.fp-pd-skurow {
    margin-bottom: 14px;
}

.fp-pd-skulb {
    display: block;
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--m-text-3);
    margin-bottom: 9px;
}

.fp-pd-skuvals {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fp-pd-skuval {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid var(--m-line);
    font-size: 12px;
    color: var(--m-text-2);
    text-decoration: none;
    transition: all .16s;
    line-height: 1.2;
}

.fp-pd-skuval:hover {
    border-color: var(--m-text-3);
    color: var(--fp-ink);
}

.fp-pd-skuval.fp-on {
    border-color: var(--fp-ink);
    background: var(--fp-ink);
    color: #fff;
}

/* 数量 */
.fp-pd-qty {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 20px;
}

.fp-qty {
    display: inline-flex;
    border: 1px solid var(--m-line);
    height: 38px;
}

.fp-qty a {
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--m-text-2);
    text-decoration: none;
    font-size: 15px;
    transition: background .16s;
}

.fp-qty a:hover {
    background: var(--m-line-2);
    color: var(--fp-ink);
}

.fp-qty input {
    width: 46px;
    border: 0;
    border-left: 1px solid var(--m-line);
    border-right: 1px solid var(--m-line);
    text-align: center;
    font-size: 13px;
    color: var(--fp-ink);
    font-family: inherit;
    background: #fff;
    outline: none;
}

.fp-pd-stock {
    font-size: 11.5px;
    color: var(--m-text-3);
}

/* 保障条 */
.fp-pd-promise {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 11.5px;
    color: var(--m-text-3);
    padding: 16px 0 0;
    border-top: 1px solid var(--m-line);
    margin-top: 4px;
}

.fp-pd-promise i {
    color: #4c9a6a;
    margin-right: 5px;
}

/* ==========================================================================
   二、详情页下方：猜你喜欢 + 详情/评价选项卡
   ========================================================================== */
.fp-like {
    padding: 56px 0 40px;
    border-top: 1px solid var(--m-line);
}

.fp-like-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.fp-like-hd h3 {
    font-family: var(--fp-serif);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--fp-ink);
    margin: 0;
}

.fp-like-hd h3 em {
    display: block;
    font-style: normal;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--m-text-3);
    margin-top: 3px;
}

.fp-like-nav {
    display: flex;
    gap: 8px;
}

.fp-like-nav a {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fp-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    text-decoration: none;
    transition: background .18s;
}

.fp-like-nav a:hover {
    background: #000;
}

.fp-like-track {
    display: flex;
    gap: 26px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 6px;
}

.fp-like-track::-webkit-scrollbar {
    height: 0;
}

.fp-like-track .fp-card {
    flex: 0 0 calc((100% - 130px) / 6);
}

/* 选项卡 */
.fp-tabs {
    border-top: 1px solid var(--m-line);
    padding-top: 6px;
}

.fp-tabs-nav {
    display: flex;
    gap: 34px;
    border-bottom: 1px solid var(--m-line);
    margin-bottom: 34px;
}

.fp-tabs-nav li {
    list-style: none;
    padding: 18px 0 15px;
    font-size: 12.5px;
    letter-spacing: .06em;
    color: var(--m-text-3);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all .18s;
    text-transform: uppercase;
}

.fp-tabs-nav li:hover {
    color: var(--fp-ink);
}

.fp-tabs-nav li.fp-cur {
    color: var(--fp-ink);
    border-bottom-color: var(--fp-ink);
}

.fp-tabs-nav li em {
    font-style: normal;
    margin-left: 5px;
    color: var(--m-text-4);
}

.fp-pane-content {
    font-size: 13.5px;
    line-height: 2;
    color: var(--m-text-2);
    max-width: 980px;
    margin: 0 auto;   /* 内容块整体居中，避免右侧留白 */
}

.fp-pane-content img {
    max-width: 100%;
    height: auto;
    margin: 14px 0;
}

.fp-pane-content p {
    margin: 0 0 12px;
}

/* 评价区 */
.fp-cmt-sum {
    display: flex;
    align-items: center;
    gap: 44px;
    padding: 4px 0 26px;
    border-bottom: 1px solid var(--m-line);
    margin-bottom: 26px;
}

.fp-cmt-score b {
    font-size: 34px;
    font-weight: 400;
    color: var(--fp-ink);
    line-height: 1;
}

.fp-cmt-score span {
    font-size: 12px;
    color: var(--m-text-3);
    margin-left: 4px;
}

.fp-cmt-stars {
    color: #d8a72c;
    font-size: 12px;
    margin-top: 8px;
    letter-spacing: 2px;
}

.fp-cmt-meta p {
    font-size: 12.5px;
    color: var(--m-text-3);
    margin: 0 0 5px;
}

.fp-cmt-meta em {
    font-style: normal;
    color: var(--fp-ink);
    font-weight: 500;
}

.fp-cmt-login {
    text-align: center;
    padding: 40px 0;
    color: var(--m-text-3);
    font-size: 12.5px;
}

.fp-cmt-login i {
    font-size: 30px;
    color: var(--m-text-4);
    display: block;
    margin-bottom: 12px;
}

.fp-cmt-login a {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 28px;
    background: var(--fp-ink);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: .06em;
}

.fp-cmt-form {
    border: 1px solid var(--m-line);
    padding: 20px;
    margin-bottom: 30px;
}

.fp-cmt-starrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.fp-cmt-lb {
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--m-text-3);
}

.fp-cmt-star a {
    color: var(--m-line);
    font-size: 16px;
    text-decoration: none;
    margin-right: 3px;
}

.fp-cmt-star a.on {
    color: #d8a72c;
}

.fp-cmt-startxt {
    font-size: 11.5px;
    color: var(--m-text-3);
}

.fp-cmt-form textarea {
    width: 100%;
    box-sizing: border-box;
    height: 92px;
    border: 1px solid var(--m-line);
    padding: 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--fp-ink);
    resize: vertical;
    outline: none;
    line-height: 1.7;
}

.fp-cmt-form textarea:focus {
    border-color: var(--m-text-3);
}

.fp-cmt-subrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}

.fp-cmt-subrow span {
    font-size: 11px;
    color: var(--m-text-4);
}

.fp-cmt-subrow input {
    background: var(--fp-ink);
    color: #fff;
    border: 0;
    padding: 10px 26px;
    font-size: 12px;
    letter-spacing: .06em;
    cursor: pointer;
    font-family: inherit;
}

.fp-cmt-subrow input:hover {
    background: #000;
}

.fp-cmt-list {
    margin: 0;
    padding: 0;
}

.fp-cmt {
    list-style: none;
    display: flex;
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--m-line-2);
}

.fp-cmt-ava {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fp-pink);
    color: var(--fp-pink-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    overflow: hidden;
}

.fp-cmt-ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fp-cmt-main {
    flex: 1;
    min-width: 0;
}

.fp-cmt-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}

.fp-cmt-top strong {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--fp-ink);
}

.fp-cmt-mini {
    font-style: normal;
    font-size: 11px;
    color: #d8a72c;
}

.fp-cmt-body {
    font-size: 13px;
    line-height: 1.8;
    color: var(--m-text-2);
}

.fp-cmt-more {
    font-size: 11.5px;
    color: var(--m-text-4);
    text-align: center;
    padding: 18px 0 0;
}

.fp-empty {
    text-align: center;
    padding: 40px 0;
    font-size: 13px;
    color: var(--m-text-3);
}

/* ==========================================================================
   三、列表 / 栏目页
   ========================================================================== */
.fp-list-crumb {
    padding: 20px 0 16px;
}

.fp-list {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 54px;
    padding-bottom: 70px;
    align-items: start;
}

/* 栏目标题区 */
.fp-cat-hd {
    padding: 0 0 26px;
}

.fp-cat-hd h1 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--fp-ink);
    margin: 0 0 4px;
    line-height: 1.4;
}

.fp-cat-hd h1 em {
    display: block;
    font-style: normal;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--m-text-2);
    margin-top: 2px;
}

.fp-cat-hd p {
    font-size: 12px;
    line-height: 1.85;
    color: var(--m-text-3);
    margin: 14px 0 0;
    max-width: 620px;
}

.fp-cat-hd .fp-cat-more {
    display: inline-block;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--m-text-2);
    text-decoration: underline;
}

/* 子分类卡片横条（参考图顶部那排） */
.fp-subrow {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 22px 0 30px;
    margin-bottom: 8px;
    border-top: 1px solid var(--m-line);
}

.fp-subrow::-webkit-scrollbar {
    height: 3px;
}

.fp-subrow::-webkit-scrollbar-thumb {
    background: var(--m-line);
}

.fp-subcard {
    flex: 0 0 132px;
    text-align: center;
    text-decoration: none;
    color: var(--m-text-2);
}

.fp-subcard-img {
    background: #fff;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 10px;
}

.fp-subcard-img img {
    max-width: 84%;
    max-height: 84%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .3s;
}

.fp-subcard:hover .fp-subcard-img img {
    transform: scale(1.07);
}

.fp-subcard b {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--m-text-2);
    text-decoration: underline;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fp-subcard em {
    display: block;
    font-style: normal;
    font-size: 10.5px;
    color: var(--m-text-4);
    margin-top: 2px;
}

.fp-subcard.fp-on b {
    color: var(--fp-ink);
    font-weight: 600;
}

/* 左侧筛选栏 */
.fp-side {
    position: sticky;
    top: 96px;
}

.fp-side-hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 8px;
}

.fp-side-hd b {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--fp-ink);
}

.fp-side-hd em {
    font-style: normal;
    font-size: 11px;
    color: var(--m-text-3);
}

.fp-side-save {
    display: block;
    background: var(--fp-ink);
    color: #fff;
    text-align: center;
    font-size: 11px;
    letter-spacing: .06em;
    padding: 10px 0;
    text-decoration: none;
    margin: 12px 0 4px;
    transition: background .18s;
}

.fp-side-save:hover {
    background: #000;
}

.fp-fgrp {
    border-top: 1px solid var(--m-line);
    padding: 16px 0 10px;
}

.fp-fgrp:first-of-type {
    border-top: 0;
}

.fp-fgrp-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 500;
    color: var(--fp-ink);
    margin-bottom: 11px;
    letter-spacing: .02em;
}

.fp-fgrp-hd i {
    font-size: 9px;
    color: var(--m-text-4);
    transition: transform .2s;
}

.fp-fgrp.fp-fold .fp-fgrp-bd {
    display: none;
}

.fp-fgrp.fp-fold .fp-fgrp-hd i {
    transform: rotate(180deg);
}

.fp-fopt {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11.5px;
    color: var(--m-text-2);
    padding: 5px 0;
    text-decoration: none;
    line-height: 1.5;
    transition: color .16s;
}

.fp-fopt:hover {
    color: var(--fp-ink);
}

.fp-fbox {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border: 1px solid #c9ccd0;
    background: #fff;
    position: relative;
    transition: all .16s;
}

.fp-fopt.fp-on {
    color: var(--fp-ink);
    font-weight: 500;
}

.fp-fopt.fp-on .fp-fbox {
    background: var(--fp-ink);
    border-color: var(--fp-ink);
}

.fp-fopt.fp-on .fp-fbox:after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 4px;
    height: 7px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(42deg);
}

.fp-fopt em {
    font-style: normal;
    color: var(--m-text-4);
    font-size: 10.5px;
    font-weight: 400;
    margin-left: auto;
}

.fp-fmore {
    display: inline-block;
    font-size: 11px;
    color: var(--m-text-2);
    text-decoration: underline;
    margin-top: 6px;
    cursor: pointer;
}

/* 右侧工具条 */
.fp-list-main {
    min-width: 0;
}

.fp-sortbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 24px;
    font-size: 11.5px;
    color: var(--m-text-3);
    letter-spacing: .02em;
}

.fp-sortbar-total b {
    color: var(--fp-ink);
    font-weight: 500;
}

.fp-sorts {
    display: flex;
    align-items: center;
    gap: 14px;
}

.fp-sorts > b {
    font-weight: 400;
    color: var(--m-text-3);
}

.fp-sorts a {
    color: var(--m-text-2);
    text-decoration: none;
    font-size: 11.5px;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: all .16s;
}

.fp-sorts a:hover {
    color: var(--fp-ink);
}

.fp-sorts a.fp-on {
    color: var(--fp-ink);
    border-bottom-color: var(--fp-ink);
}

/* 商品网格 */
.fp-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 46px 26px;
}

.fp-card {
    display: block;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.fp-card-img {
    aspect-ratio: 1 / 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 4%;
    box-sizing: border-box;
}

.fp-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .45s ease;
}

.fp-card:hover .fp-card-img img {
    transform: scale(1.06);
}

.fp-card-brand {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fp-ink);
    margin-top: 15px;
    line-height: 1.5;
}

.fp-card-name {
    font-size: 11.5px;
    line-height: 1.65;
    color: #3a3d41;
    margin-top: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fp-card-cond {
    font-size: 10.5px;
    color: var(--m-text-3);
    margin-top: 9px;
    line-height: 1.5;
}

.fp-card-cond em {
    display: block;
    font-style: normal;
    color: var(--m-text-4);
}

.fp-card-price {
    font-size: 12.5px;
    color: var(--fp-ink);
    margin-top: 7px;
    font-weight: 500;
    letter-spacing: .01em;
}

.fp-card-price del {
    font-size: 10.5px;
    color: var(--m-text-4);
    font-weight: 400;
    margin-left: 6px;
}

/* 分页 */
.fp-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 56px 0 0;
    font-size: 12px;
}

.fp-pager a,
.fp-pager span {
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--m-line);
    color: var(--m-text-2);
    text-decoration: none;
    transition: all .16s;
    box-sizing: border-box;
}

.fp-pager a:hover {
    border-color: var(--fp-ink);
    color: var(--fp-ink);
}

.fp-pager span.fp-on,
.fp-pager .current {
    background: var(--fp-ink);
    border-color: var(--fp-ink);
    color: #fff;
}

/* 空状态 */
.fp-list-empty {
    text-align: center;
    padding: 90px 0;
    color: var(--m-text-3);
}

.fp-list-empty i {
    font-size: 34px;
    color: var(--m-text-4);
    display: block;
    margin-bottom: 16px;
}

.fp-list-empty p {
    font-size: 13px;
    margin: 0 0 18px;
}

.fp-list-empty a {
    display: inline-block;
    padding: 11px 30px;
    background: var(--fp-ink);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: .06em;
}

/* 文章列表（资料中心等） */
.fp-artlist {
    border-top: 1px solid var(--m-line);
}

.fp-artlist li {
    list-style: none;
    display: flex;
    gap: 26px;
    padding: 26px 0;
    border-bottom: 1px solid var(--m-line);
}

.fp-artlist-img {
    flex: 0 0 200px;
    aspect-ratio: 4 / 3;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-artlist-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.fp-artlist li:hover .fp-artlist-img img {
    transform: scale(1.05);
}

.fp-artlist-txt {
    flex: 1;
    min-width: 0;
}

.fp-artlist-txt h3 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

.fp-artlist-txt h3 a {
    color: var(--fp-ink);
    text-decoration: none;
}

.fp-artlist-txt h3 a:hover {
    text-decoration: underline;
}

.fp-artlist-txt p {
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--m-text-2);
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fp-artlist-txt time {
    font-size: 11px;
    color: var(--m-text-4);
    letter-spacing: .04em;
}

/* 文章正文 */
.fp-art-wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 10px 0 70px;
}

.fp-art-wrap h1 {
    font-size: 26px;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.45;
    color: var(--fp-ink);
    margin: 0 0 28px;
    text-align: center;
}

.fp-art-meta {
    text-align: center;
    font-size: 11.5px;
    color: var(--m-text-4);
    letter-spacing: .04em;
    margin: -16px 0 34px;
}

.fp-art-content {
    font-size: 14px;
    line-height: 2.05;
    color: #33363a;
}

.fp-art-content img {
    max-width: 100%;
    height: auto;
    margin: 18px 0;
}

.fp-art-content p {
    margin: 0 0 16px;
}

.fp-art-content h2,
.fp-art-content h3 {
    font-weight: 500;
    color: var(--fp-ink);
    margin: 30px 0 14px;
}

/* ==========================================================================
   四、搜索框下拉 / 列表页小工具
   ========================================================================== */
.fp-hide {
    display: none !important;
}

@media (max-width: 1440px) {
    .fp-pd {
        gap: 56px;
    }

    .fp-grid {
        gap: 38px 20px;
    }

    .fp-list {
        grid-template-columns: 190px minmax(0, 1fr);
        gap: 40px;
    }
}

@media (max-width: 1280px) {
    .fp-pd {
        grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
        gap: 40px;
    }

    .fp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fp-like-track .fp-card {
        flex: 0 0 calc((100% - 78px) / 4);
    }
}

@media (max-width: 1024px) {
    .fp-pd {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .fp-list {
        grid-template-columns: 1fr;
    }

    .fp-side {
        position: static;
    }

    .fp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 16px;
    }

    .fp-like-track .fp-card {
        flex: 0 0 calc((100% - 52px) / 3);
    }

    .fp-subrow {
        gap: 10px;
    }

    .fp-subcard {
        flex: 0 0 104px;
    }

    .fp-artlist li {
        flex-direction: column;
        gap: 14px;
    }

    .fp-artlist-img {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   修正：shop-new.css 里的 .m-page a{color:inherit} 权重为 (0,1,1)，
   会把单类选择器上的颜色覆盖掉（按钮文字变同色不可见），
   这里统一用 a.类名 提升权重。
   -------------------------------------------------------------------------- */
a.fp-subcard {
    color: var(--m-text-2);
}

a.fp-subcard b {
    color: var(--m-text-2);
}

a.fp-subcard.fp-on b {
    color: var(--fp-ink);
}

a.fp-fopt {
    color: var(--m-text-2);
}

a.fp-fopt.fp-on {
    color: var(--fp-ink);
}

a.fp-fopt:hover {
    color: var(--fp-ink);
}

a.fp-fopt em {
    color: var(--m-text-4);
}

a.fp-pd-skuval {
    color: var(--m-text-2);
}

a.fp-pd-skuval.fp-on {
    color: #fff;
}

a.fp-fav {
    color: var(--m-text-2);
}

a.fp-fav.fp-fav-on,
a.fp-fav:hover {
    color: var(--fp-ink);
}

a.fp-side-save {
    color: #fff;
}

a.fp-lay {
    color: var(--fp-ink);
}

a.fp-card {
    color: inherit;
}

a.fp-list-empty,
a.fp-list-empty:hover {
    color: #fff;
}

/* ==========================================================================
   链接类按钮文字色修复
   shop-new.css 里有 `.m-page a { color: inherit; }`，权重 (0,1,1)，
   会盖掉 `.fp-btn` / `.fp-btn-line` / `.fp-btn-pink`（0,1,0）的文字色：
     · 白底按钮 → 继承父级白字 → 白底白字（看不见）
     · 黑底按钮 → 继承父级深字 → 黑底黑字（看不见）
   鼠标 hover 时才正常，是因为 `.fp-btn:hover`（0,2,0）权重够高。
   这里统一用 `body a.xxx`（0,1,2）把默认态压回去。
   ========================================================================== */

/* 主按钮：黑底白字 */
body a.fp-btn,
body a.fp-btn:visited,
body a.fp-btn:hover {
    color: #fff;
}

/* 描边按钮：白底深字 */
body a.fp-btn-line,
body a.fp-btn-line:visited {
    background: #fff;
    border-color: #d9dbdd;
    color: var(--fp-ink);
}

body a.fp-btn-line:hover {
    color: var(--fp-ink);
    border-color: var(--fp-ink);
}

/* 粉色按钮：粉底深字 */
body a.fp-btn-pink,
body a.fp-btn-pink:visited {
    color: var(--fp-ink);
}

body a.fp-btn-pink:hover {
    color: var(--fp-ink);
}

/* 黑色信息条里的描边按钮：白底 → 必须是深色字 */
.fp-strip a.fp-btn-line,
.fp-strip a.fp-btn-line:visited {
    background: #fff;
    border-color: #fff;
    color: var(--fp-ink);
}

.fp-strip a.fp-btn-line:hover {
    background: #fff;
    border-color: var(--fp-ink);
    color: var(--fp-ink);
}

/* 深色区块里的描边按钮：透明底 → 白字 */
.fp-way-btns a.fp-btn-line,
.fp-way-btns a.fp-btn-line:visited {
    background: transparent;
    border-color: rgba(255, 255, 255, .8);
    color: #fff;
}

.fp-way-btns a.fp-btn-line:hover {
    background: #fff;
    border-color: #fff;
    color: var(--fp-ink);
}

/* 文字链接 */
body a.fp-link,
body a.fp-link:visited {
    color: var(--fp-ink);
}

/* 详情页「立即购买」按钮：白底版本里 em 小字仍是白色 → 改成灰色 */
.fp-pd-btn2 a.fp-pd-bag-line em,
.fp-pd-btn2 button.fp-pd-bag-line em {
    color: var(--m-text-3);
}

.fp-pd-btn2 a.fp-pd-bag-line:hover em,
.fp-pd-btn2 button.fp-pd-bag-line:hover em {
    color: rgba(255, 255, 255, .78);
}

/* 浅色底的「如何选购」区块：描边按钮要用白底深字，
   不能沿用深色区块的透明底白字（否则白字落在浅底上同样看不见） */
.fp-way-light .fp-way-btns a.fp-btn-line,
.fp-way-light .fp-way-btns a.fp-btn-line:visited {
    background: #fff;
    border-color: #d9dbdd;
    color: var(--fp-ink);
}

.fp-way-light .fp-way-btns a.fp-btn-line:hover {
    background: var(--fp-ink);
    border-color: var(--fp-ink);
    color: #fff;
}

/* Hero 首屏的描边按钮：背景是浅粉/图片，边框太淡会看不出是按钮，加深一档 */
.fp-hero-btns a.fp-btn-line,
.fp-hero-btns a.fp-btn-line:visited {
    border-color: var(--fp-ink);
}

/* ==========================================================================
   登录 / 注册（FASHIONPHILE 风格）
   直角 + 1px 细线 + 下划线输入 + 黑底按钮 + 衬线标题
   ========================================================================== */

.fp-auth {
    padding: 68px 0 88px;
    background: var(--fp-pink-2);
}

.fp-auth-box {
    width: var(--m-wrap);
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border: 1px solid var(--m-line);
}

/* ---------------------------- 左侧品牌区 ---------------------------- */
.fp-auth-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 58px;
    background: var(--fp-pink);
}

.fp-auth-eb {
    font-size: 9.5px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--fp-pink-ink);
}

.fp-auth-side h2 {
    margin: 18px 0 16px;
    font-family: var(--fp-serif);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .01em;
    color: var(--fp-ink);
}

.fp-auth-side h2 em {
    display: block;
    margin-top: 10px;
    font-family: var(--fp-sans, inherit);
    font-style: normal;
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(26, 28, 31, .45);
}

.fp-auth-side > p {
    max-width: 330px;
    font-size: 12.5px;
    line-height: 2;
    color: var(--m-text-2);
}

.fp-auth-perks {
    margin-top: 42px;
    border-top: 1px solid rgba(26, 28, 31, .13);
}

.fp-auth-perks li {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(26, 28, 31, .13);
}

.fp-auth-perks li b {
    flex: 0 0 22px;
    font-family: var(--fp-serif);
    font-size: 11px;
    font-weight: 400;
    color: rgba(26, 28, 31, .42);
}

.fp-auth-perks li span {
    font-size: 12.5px;
    color: var(--fp-ink);
}

.fp-auth-perks li span em {
    margin-left: 9px;
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(26, 28, 31, .38);
}

/* ---------------------------- 右侧表单区 ---------------------------- */
.fp-auth-main {
    padding: 64px 62px;
}

.fp-auth-main h1 {
    font-family: var(--fp-serif);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: .05em;
    color: var(--fp-ink);
}

.fp-auth-main h1 em {
    margin-left: 12px;
    font-family: var(--fp-sans, inherit);
    font-style: normal;
    font-size: 10px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--m-text-4);
    vertical-align: 5px;
}

.fp-auth-sub {
    margin: 12px 0 36px;
    font-size: 12px;
    letter-spacing: .02em;
    color: var(--m-text-3);
}

/* 下划线输入 */
.fp-fld {
    display: block;
    margin-bottom: 26px;
}

.fp-fld > span {
    display: block;
    margin-bottom: 9px;
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--m-text-3);
}

.fp-fld > span em {
    margin-left: 7px;
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--m-text-4);
}

.fp-fld input {
    display: block;
    width: 100%;
    height: 42px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--m-line);
    border-radius: 0;
    background: transparent;
    font-size: 14px;
    color: var(--fp-ink);
    outline: none;
    box-shadow: none;
    transition: border-color .2s;
}

.fp-fld input:focus {
    border-bottom-color: var(--fp-ink);
    box-shadow: none;
}

.fp-fld input::placeholder {
    color: var(--m-text-4);
    font-size: 12.5px;
}

/* 协议勾选 */
.fp-auth-agree {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 4px 0 26px;
    font-size: 11.5px;
    line-height: 1.9;
    color: var(--m-text-3);
    cursor: pointer;
}

.fp-auth-agree input {
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    margin: 4px 0 0;
    accent-color: var(--fp-ink);
    cursor: pointer;
}

.fp-auth-agree a {
    color: var(--fp-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 按钮 */
.fp-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 50px;
    padding: 0;
    border: 1px solid var(--fp-ink);
    border-radius: 0;
    background: var(--fp-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .14em;
    color: #fff;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.fp-auth-btn em {
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .55;
}

.fp-auth-btn:hover {
    background: #000;
    color: #fff;
}

.fp-auth-btn2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 50px;
    margin-top: 12px;
    border: 1px solid var(--m-line);
    border-radius: 0;
    background: #fff;
    font-size: 13px;
    letter-spacing: .14em;
    color: var(--fp-ink);
    transition: border-color .2s;
}

.fp-auth-btn2 em {
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--m-text-4);
}

.fp-auth-btn2:hover {
    border-color: var(--fp-ink);
    color: var(--fp-ink);
}

.fp-auth-alt {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--m-line-2);
    font-size: 12px;
    color: var(--m-text-3);
    text-align: center;
}

.fp-auth-alt a {
    margin-left: 6px;
    color: var(--fp-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 优先级修正：`.m-page a{color:inherit}` (0,1,1) 会盖掉单类选择器 */
body a.fp-auth-btn,
body a.fp-auth-btn:visited,
body a.fp-auth-btn:hover {
    color: #fff;
}

body a.fp-auth-btn2,
body a.fp-auth-btn2:visited {
    color: var(--fp-ink);
}

body a.fp-auth-btn2:hover {
    color: var(--fp-ink);
}

body .fp-auth-alt a,
body .fp-auth-agree a {
    color: var(--fp-ink);
}

body.m-page .fp-auth-perks li span,
body .fp-auth-perks li span {
    color: var(--fp-ink);
}

/* 窄屏（1024 以下）改为上下结构 */
@media (max-width: 1100px) {
    .fp-auth-box {
        width: 92%;
    }
    .fp-auth-side {
        padding: 44px 38px;
    }
    .fp-auth-main {
        padding: 44px 38px;
    }
    .fp-auth-side h2 {
        font-size: 32px;
    }
}

@media (max-width: 860px) {
    .fp-auth-box {
        grid-template-columns: 1fr;
    }
    .fp-auth-side {
        display: none;
    }
    .fp-auth-main {
        padding: 38px 26px;
    }
}

/* 登录卡：左右等高 + 表单垂直居中（内容少时不至于全挤在上方） */
.fp-auth-box {
    align-items: stretch;
    min-height: 540px;
}

.fp-auth-side,
.fp-auth-main {
    height: 100%;
}

.fp-auth-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 输入下划线加深一档，浅灰在粉白背景上几乎看不见 */
.fp-fld input {
    border-bottom-color: #d8dadd;
}

.fp-fld input:hover {
    border-bottom-color: #b9bcc0;
}

/* 表单底部说明行 */
.fp-auth-note {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--m-line-2);
    font-size: 11px;
    letter-spacing: .02em;
    color: var(--m-text-4);
    text-align: center;
}

.fp-auth-note i {
    margin-right: 6px;
    font-size: 11px;
}
