.product-page {
    background: #f7f4ef
}

.product-header {
    background: rgba(247, 244, 239, .92);
    box-shadow: 0 1px 15px rgba(30, 44, 40, .06);
    backdrop-filter: blur(12px)
}

.header-cta {
    font-size: 12px;
    border-bottom: 1px solid #82908a;
    padding: 7px 0
}

.header-cta span {
    margin-left: 8px
}

.products-hero {
    min-height: 560px;
    height: calc(100vh - 86px);
    max-height: 700px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 49% 51%;
    align-items: center;
    padding: 0 9vw
}

.products-hero:before {
    content: '';
    position: absolute;
    width: 57vw;
    height: 57vw;
    border-radius: 50%;
    right: -11vw;
    top: -17vw;
    background: #efd6cd
}

.hero-orb {
    position: absolute;
    width: 31vw;
    height: 31vw;
    right: 16vw;
    bottom: -19vw;
    border: 1px solid rgba(184, 121, 103, .35);
    border-radius: 50%
}

.products-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 610px
}

.products-hero h1,
.collection h2,
.product-service h2 {
    font: 600 clamp(44px, 5vw, 72px)/1.2 var(--serif);
    letter-spacing: -.08em;
    margin: 0
}

.products-hero h1 span,
.product-service h2 span {
    color: #bd7967
}

.products-hero-copy>p:not(.eyebrow) {
    color: #65736d;
    font-size: 14px;
    line-height: 1.85;
    max-width: 410px;
    margin: 22px 0 26px
}

.hero-product-stack {
    height: 460px;
    position: relative;
    z-index: 1
}

.stack-card {
    position: absolute;
    margin: 0;
    overflow: hidden;
    background: #ded8d1;
    box-shadow: 0 20px 35px rgba(57, 43, 36, .13)
}

.stack-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(.75)
}

.card-back {
    width: 43%;
    height: 65%;
    right: 0;
    top: 5%;
    transform: rotate(8deg)
}

.card-middle {
    width: 46%;
    height: 70%;
    right: 22%;
    bottom: 2%;
    transform: rotate(-8deg)
}

.card-front {
    width: 48%;
    height: 77%;
    right: 6%;
    top: 14%;
    transform: rotate(2deg)
}

.card-front figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 20px;
    background: rgba(255, 255, 255, .9);
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    line-height: 1.5
}

.card-front figcaption b {
    font: 600 28px var(--serif);
    color: #bd7967
}

.hero-note {
    position: absolute;
    bottom: 28px;
    left: 9vw;
    font-size: 9px;
    letter-spacing: .18em;
    color: #75817b
}

.hero-note i {
    font-size: 18px;
    font-style: normal;
    margin-left: 10px
}

.category-nav {
    padding: 16px 5.8vw;
    background: #263b37;
    color: #fff;
    display: flex;
    gap: 36px;
    align-items: center
}

.category-nav>p {
    font-size: 13px;
    letter-spacing: .06em;
    white-space: nowrap;
    color: #cbd3cf
}

.category-tabs {
    display: flex;
    gap: 8px;
    overflow: auto;
    scrollbar-width: none
}

.category-tabs button {
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 24px;
    background: transparent;
    color: #fff;
    padding: 9px 17px;
    white-space: nowrap;
    font: 500 12px var(--sans);
    cursor: pointer;
    transition: .25s
}

.category-tabs button:hover,
.category-tabs button.active {
    background: #edb8a7;
    color: #263b37;
    border-color: #edb8a7
}

.category-tabs em {
    font-style: normal;
    margin-left: 7px;
    opacity: .65
}

.collection {
    padding: 60px 5.8vw 75px;
    max-width: 1600px;
    margin: auto
}

.collection-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 24px
}

.collection h2 {
    font-size: 38px
}

.collection-head>p {
    max-width: 310px;
    font-size: 13px;
    line-height: 1.8;
    color: #738079;
    margin: 0
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.collection-card {
    background: #eeebe6;
    transition: transform .45s ease, box-shadow .45s ease;
    min-width: 0
}

.collection-card.is-hidden {
    display: none
}

.card-image {
    aspect-ratio: 1/1;
    position: relative;
    overflow: hidden;
    background: #ddd6cf
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.72);
    transition: .65s ease
}

.collection-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(38, 59, 55, .1)
}

.collection-card:hover img {
    transform: scale(1.04)
}

.card-content {
    padding: 14px 16px 16px
}

.card-content p {
    color: #b67462;
    font-size: 9px;
    letter-spacing: .1em;
    margin: 0
}

.card-content h3 {
    font: 600 16px/1.25 var(--serif);
    margin: 5px 0 12px
}

.card-content a {
    font-size: 10px;
    border-bottom: 1px solid #78827d;
    padding-bottom: 4px;
    transition: border-color .3s;
    display: inline-block
}

.card-content a b {
    font-size: 14px;
    margin-left: 8px
}

.collection-card:hover .card-content a {
    border-color: #b67462
}

.empty-state {
    text-align: center;
    color: #75817b;
    margin: 40px 0 0
}

.product-service {
    background: #263b37;
    color: #fff;
    padding: 55px 9vw;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 50px
}

.product-service h2 {
    font-size: 38px
}

.service-side {
    max-width: 370px
}

.service-side p {
    font-size: 13px;
    line-height: 2;
    color: #c5ceca;
    margin: 0 0 23px
}

.product-service .button {
    background: #edb8a7
}

.product-service .button:hover {
    background: #fff
}

@media(max-width:900px) {
    .products-hero {
        padding: 0 7vw
    }

    .category-nav {
        gap: 18px
    }
}

@media(max-width:720px) {
    .product-header {
        height: 70px
    }

    .header-cta {
        display: none
    }

    .products-hero {
        height: auto;
        min-height: 600px;
        display: block;
        padding: 70px 25px 45px
    }

    .products-hero:before {
        width: 110vw;
        height: 110vw;
        top: 290px;
        right: -32vw
    }

    .hero-orb {
        width: 67vw;
        height: 67vw;
        right: 5vw;
        bottom: 20px
    }

    .products-hero h1 {
        font-size: 43px
    }

    .hero-product-stack {
        height: 290px;
        margin: 22px -4px 0
    }

    .card-back {
        height: 62%
    }

    .card-middle {
        height: 66%;
        right: 24%
    }

    .card-front {
        height: 70%;
        right: 7%
    }

    .hero-note {
        display: none
    }

    .category-nav {
        padding: 18px 20px;
        display: block
    }

    .category-nav>p {
        margin: 0 0 12px
    }

    .category-tabs {
        padding-bottom: 2px
    }

    .collection {
        padding: 45px 20px 60px
    }

    .collection-head {
        display: block;
        margin-bottom: 20px
    }

    .collection h2 {
        font-size: 32px
    }

    .collection-head>p {
        margin-top: 15px
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px
    }

    .card-image {
        aspect-ratio: 4/5
    }

    .card-content {
        padding: 14px 16px 17px
    }

    .card-content h3 {
        font-size: 15px;
        margin: 4px 0 10px
    }

    .product-service {
        padding: 42px 25px;
        display: block
    }

    .product-service h2 {
        font-size: 30px
    }

    .service-side {
        margin-top: 25px
    }

    .nav.open {
        z-index: 30
    }

    .nav.open+.header-cta {
        display: none
    }
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 30px
}

.page-numbers {
    display: flex;
    gap: 7px
}

.pagination button {
    height: 38px;
    min-width: 38px;
    border: 1px solid #cfc8c0;
    background: transparent;
    color: #51605a;
    font: 500 12px var(--sans);
    cursor: pointer;
    transition: .2s
}

.pagination .page-arrow {
    font-size: 18px
}

.pagination button:hover:not(:disabled),
.pagination .is-current {
    background: #263b37;
    color: #fff;
    border-color: #263b37
}

.pagination button:disabled {
    opacity: .35;
    cursor: not-allowed
}

@media(max-width:720px) {
    .pagination {
        margin-top: 24px
    }

    .pagination button {
        height: 35px;
        min-width: 35px
    }
}

/* 分类入口（产品中心总览页） */
.category-entry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px
}

.category-entry-card {
    background: #eeebe6;
    overflow: hidden;
    transition: transform .45s ease, box-shadow .45s ease
}

.category-entry-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(38, 59, 55, .1)
}

.entry-image {
    aspect-ratio: 1/1;
    overflow: hidden;
    background: #ddd6cf
}

.entry-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.72);
    transition: .65s ease
}

.category-entry-card:hover .entry-image img {
    transform: scale(1.05)
}

.entry-content {
    padding: 16px 18px 18px
}

.entry-content p {
    color: #b67462;
    font-size: 9px;
    letter-spacing: .12em;
    margin: 0
}

.entry-content h3 {
    font: 600 20px/1.3 var(--serif);
    margin: 7px 0 14px
}

.entry-content span {
    font-size: 11px;
    border-bottom: 1px solid #78827d;
    padding-bottom: 4px;
    transition: border-color .3s
}

.entry-content span b {
    font-size: 14px;
    margin-left: 8px
}

.category-entry-card:hover .entry-content span {
    border-color: #b67462
}

/* 分类子页面横幅 */
.category-hero {
    min-height: 380px;
    position: relative;
    overflow: hidden;
    background: #263b37;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 70px 9vw
}

.category-hero:before {
    content: '';
    position: absolute;
    width: 46vw;
    height: 46vw;
    border-radius: 50%;
    right: -10vw;
    top: -16vw;
    background: #efd6cd;
    opacity: .16
}

.category-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 640px
}

.category-hero h1 {
    font: 600 clamp(40px, 4.6vw, 66px)/1.2 var(--serif);
    letter-spacing: -.07em;
    margin: 0
}

.category-hero h1 span {
    color: #eeb8a6
}

.category-hero-copy>p:not(.eyebrow):not(.breadcrumb) {
    color: #c5ceca;
    font-size: 14px;
    line-height: 1.85;
    max-width: 440px;
    margin: 20px 0 26px
}

.breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #aab5b0;
    margin: 0 0 22px
}

.breadcrumb a {
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    padding-bottom: 3px;
    transition: color .3s
}

.breadcrumb a:hover {
    color: #fff
}

@media(max-width:720px) {
    .category-entry-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px
    }

    .entry-content {
        padding: 13px 14px 15px
    }

    .entry-content h3 {
        font-size: 17px
    }

    .category-hero {
        min-height: 300px;
        padding: 50px 25px
    }

    .category-hero h1 {
        font-size: 38px
    }
}

/* ===== 统一产品中心 · 主视觉 / 四列网格 / 加载更多 ===== */
.products-hero-visual {
    position: relative;
    z-index: 1;
    height: 460px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(38, 59, 55, .14)
}

.products-hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.9)
}

.category-nav {
    position: relative;
    z-index: 2
}

.unified-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px
}

.load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 38px
}

.load-more {
    display: inline-flex;
    align-items: center;
    padding: 13px 34px;
    border: 1px solid #263b37;
    background: transparent;
    color: #263b37;
    font: 500 13px var(--sans);
    letter-spacing: .04em;
    cursor: pointer;
    transition: .25s
}

.load-more:hover {
    background: #263b37;
    color: #fff
}

.load-more span {
    margin-left: 10px
}

@media(max-width:900px) {
    .unified-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:720px) {
    .products-hero-visual {
        height: 300px;
        margin-top: 22px
    }

    .unified-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px
    }

    .load-more-wrap {
        margin-top: 28px
    }
}

#collection {
    scroll-margin-top: 110px
}

/* 产品中心目录式布局 */
.products-hero {
    min-height: 0;
    height: clamp(350px, 34vw, 500px);
    max-height: none;
    grid-template-columns: 42% 58%;
    grid-template-rows: 1fr auto;
    align-items: center;
    padding: 30px 7.8vw 24px;
    background: #f3ece4;
}

.products-hero:before,
.hero-orb,
.hero-note { display: none; }

.products-hero-copy { grid-column: 1; grid-row: 1; max-width: 520px; }
.products-hero h1 { font-size: clamp(42px, 4.4vw, 60px); line-height: 1.2; }
.products-hero h1 span { color: #bd7967; white-space: nowrap; }
.products-hero-copy > p:not(.eyebrow) { margin: 18px 0 0; font-size: 14px; line-height: 1.9; }
.products-hero-visual {
    grid-column: 2; grid-row: 1 / 3; height: auto; min-height: 0; margin: -30px -7.8vw -24px 0;
    border-radius: 0; box-shadow: none; background: transparent; overflow: visible;
}
.products-hero-visual img {
    mix-blend-mode: multiply;
    /* 保留原图比例和完整构图，避免 cover 把提手与包底裁掉。 */
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    margin-left: auto;
    mask-image: linear-gradient(to right, transparent 0%, #000 12%);
}
.products-hero .category-nav {
    grid-column: 1 / -1; grid-row: 2; z-index: 3; position: relative;
    padding: 0; background: transparent; color: #263b37;
}
.category-tabs { gap: 12px; overflow-x: auto; }
.category-tabs button {
    padding: 11px 20px; border: 0; border-radius: 24px; background: #fff;
    color: #52605a; box-shadow: 0 3px 12px rgba(50, 44, 37, .06); font-size: 12px;
}
.category-tabs button:hover,
.category-tabs button.active { color: #fff; background: #263b37; border: 0; }
.category-tabs em { display: none; }
.collection { padding: 38px 6.5vw 56px; }
.collection-head { align-items: center; margin-bottom: 18px; }
.collection h2 { font-size: 34px; }
.collection-head > p { margin-left: auto; margin-right: 24px; max-width: 400px; }
.product-sort {
    flex: 0 0 auto; color: #718078; font: 11px var(--sans);
}
.product-sort select {
    margin-left: 8px; padding: 8px 10px; border: 1px solid #e5e0da; border-radius: 3px;
    background: #fff; color: #52605a; font: inherit;
}
.unified-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 17px; }
.collection-card { background: #fff; border: 1px solid rgba(38, 59, 55, .06); }
.card-image { aspect-ratio: 1 / 1; background: #eee8e1; }
.card-image img { filter: saturate(.88); }
.card-content { padding: 11px 13px 14px; }
.card-content > p:first-child { font-size: 9px; letter-spacing: .04em; color: #bd7967; }
.card-content h3 { font-size: 15px; margin: 5px 0 5px; }
.card-content .product-description { color: #89928d; font-size: 10px; line-height: 1.5; margin: 0 0 10px; }
.card-content a { font-size: 10px; border: 0; padding: 0; }
.card-content a b { margin-left: 5px; }
.pagination { margin-top: 22px; }
.pagination button { height: 34px; min-width: 34px; border: 0; border-radius: 4px; background: #fff; }
.pagination .is-current { background: #263b37; }

@media(max-width:900px) {
    .products-hero { padding-left: 6vw; padding-right: 6vw; }
    .unified-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .collection-head > p { max-width: 280px; }
}

@media(max-width:720px) {
    .products-hero {
        height: auto; min-height: 0; display: grid; grid-template-columns: 1fr;
        grid-template-rows: auto auto auto; padding: 38px 20px 20px;
    }
    .products-hero-copy { grid-column: 1; grid-row: 1; }
    .products-hero h1 { font-size: clamp(36px, 9vw, 42px); }
    .products-hero-copy > p:not(.eyebrow) { margin-top: 12px; }
    .products-hero-visual { grid-column: 1; grid-row: 2; width: calc(100% + 24px); height: auto; margin: 0 -12px; overflow: visible; }
    .products-hero-visual img { display: block; width: 100%; height: auto; max-width: none; margin: 0 auto; object-fit: contain; mask-image: none; }
    .products-hero .category-nav { grid-column: 1; grid-row: 3; margin: 8px -20px 0; padding: 0 20px; }
    .category-tabs { width: 100%; flex-wrap: wrap; gap: 8px; overflow: visible; padding: 4px 0 8px; }
    .category-tabs button { padding: 9px 13px; }
    .collection { padding: 38px 20px 48px; }
    .collection-head { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
    .collection-head > p { grid-column: 1 / -1; grid-row: 2; margin: 0; max-width: none; }
    .product-sort { grid-column: 2; grid-row: 1; }
    .collection h2 { font-size: 30px; }
    .unified-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .card-content { padding: 10px 11px 13px; }
    .card-content h3 { font-size: 14px; }
    .card-content .product-description { font-size: 9px; }
}