/*
 * Category 21 premium product archive
 * 文件位置：/includes/css/category-21.css
 */

.hjk-product-archive {
    --hjk-ink: #172631;
    --hjk-muted: #67747d;
    --hjk-line: rgba(28, 43, 53, 0.12);
    --hjk-surface: #ffffff;
    --hjk-soft: #f5f7f8;
    --hjk-dark: #13202a;
    --hjk-dark-2: #1d303b;
    --hjk-accent: #e58a1f;
    --hjk-accent-dark: #b9650b;
    --hjk-accent-soft: #fff1df;
    --hjk-shadow: 0 24px 70px rgba(22, 38, 49, 0.12);
    overflow: clip;
    color: var(--hjk-ink);
}

/* =====================================================
   Hero
===================================================== */

.hjk-product-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(78px, 9vw, 132px) 0 78px;
    background:
        linear-gradient(
            112deg,
            rgba(13, 25, 34, 0.98),
            rgba(24, 43, 55, 0.94)
        ),
        radial-gradient(
            circle at 82% 20%,
            rgba(229, 138, 31, 0.3),
            transparent 32%
        );
    color: #fff;
}

.hjk-product-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.2;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        );
    background-size: 78px 78px;
}

.hjk-product-hero::after {
    content: "";
    position: absolute;
    top: -160px;
    right: -110px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    box-shadow:
        0 0 0 72px rgba(255, 255, 255, 0.025),
        0 0 0 144px rgba(255, 255, 255, 0.015);
}

.hjk-product-breadcrumb {
    position: relative;
    z-index: 2;
    margin-bottom: 28px;
}

.hjk-product-breadcrumb ol {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, 0.66);
    font-size: 13px;
}

.hjk-product-breadcrumb a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.hjk-product-breadcrumb a:hover {
    color: #fff;
}

.hjk-product-hero-kicker {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    color: #f2ac55;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.hjk-product-hero h1 {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0;
    color: #fff;
    font-size: clamp(38px, 5.6vw, 70px);
    font-weight: 850;
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.hjk-product-hero h1 span {
    display: block;
    margin-top: 10px;
    color: #f0a64b;
    font-size: 0.58em;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.hjk-product-hero p {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 17px;
    line-height: 1.9;
}

.hjk-product-hero-stats {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(16px);
}

.hjk-product-hero-stats > div {
    min-width: 0;
    padding: 22px 14px;
    text-align: center;
}

.hjk-product-hero-stats > div + div {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.hjk-product-hero-stats strong,
.hjk-product-hero-stats span {
    display: block;
}

.hjk-product-hero-stats strong {
    color: #fff;
    font-size: 27px;
    font-weight: 800;
}

.hjk-product-hero-stats span {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 11px;
}

/* =====================================================
   Sticky category navigation
===================================================== */

.hjk-product-category-bar {
    position: sticky;
    top: 88px;
    z-index: 900;
    border-bottom: 1px solid var(--hjk-line);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 30px rgba(21, 36, 47, 0.06);
    backdrop-filter: blur(16px);
}

.admin-bar .hjk-product-category-bar {
    top: 120px;
}

.hjk-product-category-scroll {
    display: flex;
    gap: 10px;
    padding: 14px 2px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.hjk-product-category-scroll::-webkit-scrollbar {
    display: none;
}

.hjk-product-category-scroll a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--hjk-line);
    border-radius: 999px;
    background: #fff;
    color: var(--hjk-ink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}

.hjk-product-category-scroll a span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 23px;
    height: 23px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--hjk-soft);
    color: var(--hjk-muted);
    font-size: 11px;
}

.hjk-product-category-scroll a:hover,
.hjk-product-category-scroll a.is-active {
    border-color: rgba(229, 138, 31, 0.4);
    background: var(--hjk-accent-soft);
    color: var(--hjk-accent-dark);
    transform: translateY(-1px);
}

/* =====================================================
   Catalog heading
===================================================== */

.hjk-product-catalog {
    position: relative;
    padding: clamp(70px, 8vw, 112px) 0;
    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(229, 138, 31, 0.07),
            transparent 28%
        ),
        #f5f7f8;
}

.hjk-product-catalog-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
    gap: 40px;
    align-items: end;
    margin-bottom: 38px;
}

.hjk-product-catalog-heading > div > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    color: var(--hjk-accent-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.hjk-product-catalog-heading h2 {
    margin: 0;
    color: var(--hjk-ink);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 830;
    line-height: 1.14;
    letter-spacing: -0.035em;
}

.hjk-product-catalog-heading h2 strong {
    color: var(--hjk-accent-dark);
    font-weight: inherit;
}

.hjk-product-catalog-heading > p {
    margin: 0;
    color: var(--hjk-muted);
    font-size: 16px;
    line-height: 1.85;
}

/* =====================================================
   Featured product
===================================================== */

.hjk-featured-product {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(350px, 0.8fr);
    min-height: 560px;
    margin-bottom: 34px;
    overflow: hidden;
    border: 1px solid rgba(26, 43, 54, 0.12);
    border-radius: 28px;
    background: var(--hjk-surface);
    box-shadow: var(--hjk-shadow);
}

.hjk-featured-product::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -90px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(229, 138, 31, 0.08);
    filter: blur(1px);
}

.hjk-featured-product-media {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    background: #111c24;
}

.hjk-featured-product-media > a {
    display: block;
    width: 100%;
    height: 100%;
}

.hjk-featured-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.5s ease;
}

.hjk-featured-product:hover
.hjk-featured-product-media img {
    transform: scale(1.045);
    filter: brightness(1.04);
}

.hjk-featured-product-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent 62%,
            rgba(17, 28, 36, 0.2)
        ),
        linear-gradient(
            180deg,
            rgba(17, 28, 36, 0.02),
            rgba(17, 28, 36, 0.36)
        );
}

.hjk-featured-product-badge,
.hjk-featured-product-code {
    position: absolute;
    z-index: 2;
    top: 22px;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(15, 27, 35, 0.62);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.hjk-featured-product-badge {
    left: 22px;
    gap: 7px;
}

.hjk-featured-product-badge i {
    color: #f4b363;
}

.hjk-featured-product-code {
    right: 22px;
    letter-spacing: 0.08em;
}

.hjk-featured-product-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(34px, 5vw, 62px);
}

.hjk-featured-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 18px;
}

.hjk-featured-product-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--hjk-accent-soft);
    color: var(--hjk-accent-dark);
    font-size: 12px;
    font-weight: 700;
}

.hjk-featured-product h2 {
    margin: 0 0 18px;
    font-size: clamp(31px, 4vw, 48px);
    font-weight: 820;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.hjk-featured-product h2 a {
    color: var(--hjk-ink);
    text-decoration: none;
}

.hjk-featured-product h2 a:hover {
    color: var(--hjk-accent-dark);
}

.hjk-featured-product-content > p {
    margin: 0;
    color: var(--hjk-muted);
    font-size: 16px;
    line-height: 1.85;
}

.hjk-featured-product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.hjk-featured-product-tags span {
    padding: 7px 12px;
    border: 1px solid var(--hjk-line);
    border-radius: 999px;
    background: var(--hjk-soft);
    color: #45545e;
    font-size: 12px;
    font-weight: 650;
}

.hjk-featured-product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hjk-product-primary-link,
.hjk-product-secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 11px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

.hjk-product-primary-link {
    background: var(--hjk-accent);
    color: #fff;
    box-shadow: 0 13px 28px rgba(229, 138, 31, 0.22);
}

.hjk-product-primary-link:hover {
    background: var(--hjk-accent-dark);
    color: #fff;
    transform: translateY(-2px);
}

.hjk-product-secondary-link {
    border: 1px solid var(--hjk-line);
    background: #fff;
    color: var(--hjk-ink);
}

.hjk-product-secondary-link:hover {
    border-color: rgba(229, 138, 31, 0.35);
    background: var(--hjk-accent-soft);
    color: var(--hjk-accent-dark);
}

/* =====================================================
   Standard product cards
===================================================== */

.hjk-product-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.hjk-product-list-item {
    min-width: 0;
}

.hjk-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--hjk-line);
    border-radius: 20px;
    background: var(--hjk-surface);
    box-shadow: 0 14px 38px rgba(22, 38, 49, 0.07);
    transition:
        border-color 0.3s ease,
        transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.35s ease;
}

.hjk-product-card:hover {
    border-color: rgba(229, 138, 31, 0.34);
    box-shadow: 0 25px 55px rgba(22, 38, 49, 0.14);
    transform: translateY(-7px);
}

.hjk-product-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 0;
    overflow: hidden;
    background: #e8edef;
}

.hjk-product-card-media > a {
    display: block;
    width: 100%;
    height: 100%;
}

.hjk-product-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.4s ease;
}

.hjk-product-card:hover
.hjk-product-card-media img {
    transform: scale(1.055);
    filter: saturate(1.06) contrast(1.02);
}

.hjk-product-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(16, 29, 38, 0.02),
            rgba(16, 29, 38, 0.42)
        );
}

.hjk-product-card-category,
.hjk-product-card-recommend,
.hjk-product-card-number {
    position: absolute;
    z-index: 2;
}

.hjk-product-card-category {
    top: 15px;
    left: 15px;
    max-width: calc(100% - 90px);
    overflow: hidden;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--hjk-ink);
    font-size: 11px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(10px);
}

.hjk-product-card-recommend {
    right: 15px;
    bottom: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--hjk-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 750;
}

.hjk-product-card-number {
    right: 15px;
    top: 14px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}

.hjk-product-card-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 22px;
}

.hjk-product-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--hjk-accent-dark);
    font-size: 11px;
    font-weight: 750;
}

.hjk-product-card h3 {
    margin: 0;
    font-size: 21px;
    font-weight: 780;
    line-height: 1.35;
}

.hjk-product-card h3 a {
    display: -webkit-box;
    overflow: hidden;
    color: var(--hjk-ink);
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hjk-product-card h3 a:hover {
    color: var(--hjk-accent-dark);
}

.hjk-product-card-content > p {
    display: -webkit-box;
    overflow: hidden;
    margin: 13px 0 0;
    color: var(--hjk-muted);
    font-size: 14px;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.hjk-product-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}

.hjk-product-card-tags span {
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--hjk-soft);
    color: #53616a;
    font-size: 11px;
    font-weight: 650;
}

.hjk-product-card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 20px;
    color: var(--hjk-ink);
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
}

.hjk-product-card-link i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--hjk-accent-soft);
    color: var(--hjk-accent-dark);
    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        color 0.25s ease;
}

.hjk-product-card:hover
.hjk-product-card-link i {
    background: var(--hjk-accent);
    color: #fff;
    transform: translateX(4px);
}

/* =====================================================
   Pagination
===================================================== */

.hjk-product-pagination {
    margin-top: 52px;
    text-align: center;
}

.hjk-product-pagination ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hjk-product-pagination a,
.hjk-product-pagination li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 46px;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--hjk-line);
    border-radius: 13px;
    background: #fff;
    color: var(--hjk-ink);
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(22, 38, 49, 0.05);
    transition:
        color 0.22s ease,
        border-color 0.22s ease,
        background-color 0.22s ease,
        transform 0.22s ease;
}

.hjk-product-pagination a:hover {
    border-color: rgba(229, 138, 31, 0.42);
    background: var(--hjk-accent-soft);
    color: var(--hjk-accent-dark);
    transform: translateY(-2px);
}

.hjk-product-pagination .current {
    border-color: var(--hjk-accent);
    background: var(--hjk-accent);
    color: #fff;
    box-shadow: 0 12px 28px rgba(229, 138, 31, 0.22);
}

.hjk-product-pagination .dots {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.hjk-product-pagination .is-disabled > span {
    opacity: 0.42;
    cursor: not-allowed;
}

.hjk-product-pagination > p {
    margin: 17px 0 0;
    color: var(--hjk-muted);
    font-size: 13px;
}

.hjk-product-pagination > p strong {
    color: var(--hjk-ink);
}

/* =====================================================
   Empty state
===================================================== */

.hjk-product-empty {
    padding: 80px 24px;
    border: 1px dashed rgba(24, 42, 53, 0.2);
    border-radius: 24px;
    background: #fff;
    text-align: center;
}

.hjk-product-empty > i {
    margin-bottom: 18px;
    color: var(--hjk-accent);
    font-size: 48px;
}

.hjk-product-empty h2 {
    margin: 0;
    font-size: 27px;
}

.hjk-product-empty p {
    margin: 12px auto 24px;
    color: var(--hjk-muted);
}

.hjk-product-empty a {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    padding: 10px 20px;
    border-radius: 12px;
    background: var(--hjk-accent);
    color: #fff;
    font-weight: 750;
    text-decoration: none;
}

/* =====================================================
   CTA
===================================================== */

.hjk-product-cta {
    padding: 0 0 clamp(72px, 8vw, 110px);
    background: #f5f7f8;
}

.hjk-product-cta-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    overflow: hidden;
    padding: clamp(32px, 5vw, 58px);
    border-radius: 26px;
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(229, 138, 31, 0.28),
            transparent 31%
        ),
        linear-gradient(
            125deg,
            #14232d,
            #243945
        );
    color: #fff;
    box-shadow: 0 28px 70px rgba(19, 34, 44, 0.2);
}

.hjk-product-cta-inner::after {
    content: "";
    position: absolute;
    top: -120px;
    right: -100px;
    width: 350px;
    height: 350px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;
    box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.02);
}

.hjk-product-cta-inner > div {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.hjk-product-cta-inner > div > span {
    display: block;
    margin-bottom: 8px;
    color: #f3ad58;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.hjk-product-cta h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 3.8vw, 44px);
    font-weight: 820;
}

.hjk-product-cta p {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.8;
}

.hjk-product-cta-inner > a {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    flex: 0 0 auto;
    min-height: 54px;
    padding: 12px 23px;
    border-radius: 13px;
    background: var(--hjk-accent);
    color: #fff;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 14px 32px rgba(229, 138, 31, 0.25);
    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}

.hjk-product-cta-inner > a:hover {
    background: #c86f12;
    color: #fff;
    transform: translateY(-3px);
}

/* =====================================================
   Responsive
===================================================== */

@media (max-width: 1199.98px) {
    .hjk-featured-product {
        grid-template-columns: minmax(0, 1fr) 390px;
    }

    .hjk-product-list {
        gap: 20px;
    }
}

@media (max-width: 991.98px) {
    .hjk-product-category-bar {
        top: 72px;
    }

    .admin-bar .hjk-product-category-bar {
        top: 104px;
    }

    .hjk-product-hero-stats {
        margin-top: 8px;
    }

    .hjk-product-catalog-heading {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hjk-featured-product {
        grid-template-columns: 1fr;
    }

    .hjk-featured-product-media {
        min-height: 460px;
    }

    .hjk-product-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hjk-product-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 782px) {
    .admin-bar .hjk-product-category-bar {
        top: 118px;
    }
}

@media (max-width: 575.98px) {
    .hjk-product-hero {
        padding: 64px 0 54px;
    }

    .hjk-product-hero p {
        font-size: 15px;
    }

    .hjk-product-hero-stats {
        grid-template-columns: 1fr;
    }

    .hjk-product-hero-stats > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 13px 17px;
        text-align: left;
    }

    .hjk-product-hero-stats > div + div {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-left: 0;
    }

    .hjk-product-category-bar {
        top: 64px;
    }

    .admin-bar .hjk-product-category-bar {
        top: 110px;
    }

    .hjk-product-category-scroll {
        padding-block: 11px;
    }

    .hjk-product-category-scroll a {
        min-height: 40px;
        padding: 8px 13px;
        font-size: 13px;
    }

    .hjk-product-catalog {
        padding: 60px 0;
    }

    .hjk-featured-product {
        min-height: 0;
        border-radius: 20px;
    }

    .hjk-featured-product-media {
        min-height: 330px;
    }

    .hjk-featured-product-content {
        padding: 25px 20px;
    }

    .hjk-featured-product-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hjk-product-primary-link,
    .hjk-product-secondary-link {
        width: 100%;
    }

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

    .hjk-product-card {
        border-radius: 18px;
    }

    .hjk-product-pagination a,
    .hjk-product-pagination li > span {
        min-width: 42px;
        height: 42px;
        padding: 0 11px;
        border-radius: 11px;
    }

    .hjk-product-pagination li:first-child span span,
    .hjk-product-pagination li:first-child a span,
    .hjk-product-pagination li:last-child span span,
    .hjk-product-pagination li:last-child a span {
        display: none;
    }

    .hjk-product-cta-inner {
        padding: 28px 21px;
        border-radius: 20px;
    }

    .hjk-product-cta-inner > a {
        width: 100%;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .hjk-product-archive *,
    .hjk-product-archive *::before,
    .hjk-product-archive *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}


/* =====================================================
   Product catalog technology redesign V2
   重点：减少空白、突出产品、增强科技感与动态感
===================================================== */

.hjk-product-catalog {
    isolation: isolate;
    background:
        linear-gradient(
            rgba(31, 48, 59, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(31, 48, 59, 0.035) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 8% 9%,
            rgba(229, 138, 31, 0.1),
            transparent 25%
        ),
        #f4f7f8;
    background-size:
        72px 72px,
        72px 72px,
        auto,
        auto;
}

.hjk-product-catalog::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 190px;
    right: -160px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(229, 138, 31, 0.12);
    border-radius: 50%;
    box-shadow:
        0 0 0 70px rgba(229, 138, 31, 0.025),
        0 0 0 140px rgba(229, 138, 31, 0.015);
    pointer-events: none;
}

.hjk-product-catalog-heading {
    align-items: center;
    max-width: 1420px;
    margin-inline: auto;
    margin-bottom: 30px;
}

.hjk-product-catalog-heading h2 {
    font-size: clamp(31px, 3.5vw, 48px);
}

.hjk-product-catalog-heading > p {
    max-width: 560px;
    justify-self: end;
    padding-left: 26px;
    border-left: 2px solid rgba(229, 138, 31, 0.36);
}

/* =====================================================
   Featured product V2
===================================================== */

.hjk-featured-product-v2 {
    grid-template-columns:
        minmax(0, 1.34fr)
        minmax(390px, 0.66fr);
    min-height: 438px;
    max-width: 1420px;
    margin-inline: auto;
    margin-bottom: 30px;
    border-color: rgba(34, 54, 66, 0.16);
    border-radius: 22px;
    background: #13232d;
    box-shadow:
        0 26px 70px rgba(21, 36, 47, 0.2);
}

.hjk-featured-product-v2::before {
    content: "";
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    width: 34%;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            var(--hjk-accent),
            rgba(229, 138, 31, 0)
        );
}

.hjk-featured-product-v2::after {
    right: -90px;
    bottom: -120px;
    width: 300px;
    height: 300px;
    background:
        radial-gradient(
            circle,
            rgba(229, 138, 31, 0.18),
            rgba(229, 138, 31, 0)
        );
}

.hjk-featured-product-v2
.hjk-featured-product-media {
    min-height: 438px;
}

.hjk-featured-product-v2
.hjk-featured-product-media::after {
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(11, 24, 32, 0.02) 58%,
            rgba(11, 24, 32, 0.28) 100%
        ),
        linear-gradient(
            180deg,
            rgba(11, 24, 32, 0.01) 54%,
            rgba(11, 24, 32, 0.74) 100%
        );
}

.hjk-featured-product-media-grid {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        );
    background-size: 44px 44px;
    transform: translateY(12px);
    transition:
        opacity 0.35s ease,
        transform 0.45s ease;
}

.hjk-featured-product-v2:hover
.hjk-featured-product-media-grid {
    opacity: 0.22;
    transform: translateY(0);
}

.hjk-featured-product-v2
.hjk-featured-product-badge,
.hjk-featured-product-v2
.hjk-featured-product-code {
    top: 18px;
    min-height: 34px;
    padding: 7px 12px;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(14, 29, 38, 0.72);
}

.hjk-featured-product-v2
.hjk-featured-product-badge {
    left: 18px;
}

.hjk-featured-product-v2
.hjk-featured-product-code {
    right: 18px;
}

.hjk-featured-product-media-caption {
    position: absolute;
    z-index: 3;
    right: 22px;
    bottom: 20px;
    left: 22px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    color: #fff;
}

.hjk-featured-product-media-caption span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(13, 27, 35, 0.56);
    backdrop-filter: blur(10px);
    font-size: 11px;
    font-weight: 750;
}

.hjk-featured-product-media-caption strong {
    max-width: 360px;
    font-size: 17px;
    line-height: 1.4;
    text-align: right;
}

.hjk-featured-product-v2
.hjk-featured-product-content {
    justify-content: center;
    padding: 34px 38px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0)
        ),
        #13232d;
}

.hjk-featured-product-v2
.hjk-featured-product-content::before {
    content: "";
    position: absolute;
    top: 28px;
    right: -36px;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    box-shadow:
        0 0 0 26px rgba(255, 255, 255, 0.018);
}

.hjk-featured-product-eyebrow {
    position: relative;
    z-index: 2;
    display: block;
    margin-bottom: 12px;
    color: #eea451;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.hjk-featured-product-v2
.hjk-featured-product-meta {
    position: relative;
    z-index: 2;
    margin-bottom: 12px;
}

.hjk-featured-product-v2
.hjk-featured-product-meta span {
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid rgba(229, 138, 31, 0.18);
    background: rgba(229, 138, 31, 0.1);
    color: #f2b56c;
    font-size: 11px;
}

.hjk-featured-product-v2 h2 {
    position: relative;
    z-index: 2;
    margin-bottom: 13px;
    font-size: clamp(29px, 3vw, 42px);
    line-height: 1.16;
}

.hjk-featured-product-v2 h2 a {
    color: #fff;
}

.hjk-featured-product-v2 h2 a:hover {
    color: #f2ad58;
}

.hjk-featured-product-v2
.hjk-featured-product-content > p {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.66);
    font-size: 14px;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.hjk-featured-product-v2
.hjk-featured-product-tags {
    position: relative;
    z-index: 2;
    margin-top: 16px;
}

.hjk-featured-product-v2
.hjk-featured-product-tags span {
    padding: 6px 10px;
    border-color: rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.76);
    font-size: 11px;
}

.hjk-featured-capabilities {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 19px;
}

.hjk-featured-capabilities > div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.035);
    transition:
        border-color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}

.hjk-featured-capabilities > div:hover {
    border-color: rgba(229, 138, 31, 0.26);
    background: rgba(229, 138, 31, 0.08);
    transform: translateY(-2px);
}

.hjk-featured-capabilities i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(229, 138, 31, 0.13);
    color: #efaa57;
    font-size: 13px;
}

.hjk-featured-capabilities span,
.hjk-featured-capabilities strong,
.hjk-featured-capabilities small {
    display: block;
    min-width: 0;
}

.hjk-featured-capabilities strong {
    overflow: hidden;
    color: #fff;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hjk-featured-capabilities small {
    margin-top: 2px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hjk-featured-product-v2
.hjk-featured-product-actions {
    position: relative;
    z-index: 2;
    margin-top: 20px;
}

.hjk-featured-product-v2
.hjk-product-primary-link,
.hjk-featured-product-v2
.hjk-product-secondary-link {
    min-height: 44px;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 12px;
}

.hjk-featured-product-v2
.hjk-product-secondary-link {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.82);
}

.hjk-featured-product-v2
.hjk-product-secondary-link:hover {
    border-color: rgba(229, 138, 31, 0.3);
    background: rgba(229, 138, 31, 0.1);
    color: #fff;
}

/* =====================================================
   Technology product cards V2
===================================================== */

.hjk-product-list {
    max-width: 1420px;
    margin-inline: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.hjk-product-card {
    position: relative;
    isolation: isolate;
    border-radius: 17px;
    border-color: rgba(33, 52, 64, 0.13);
    box-shadow: 0 12px 34px rgba(20, 36, 47, 0.075);
}

.hjk-product-card::before {
    content: "";
    position: absolute;
    z-index: 4;
    top: 0;
    left: 16px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            var(--hjk-accent),
            #f1b76f
        );
    transition: width 0.45s ease;
}

.hjk-product-card:hover::before {
    width: calc(100% - 32px);
}

.hjk-product-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -35px;
    bottom: -45px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: rgba(229, 138, 31, 0.075);
    opacity: 0;
    transform: scale(0.7);
    transition:
        opacity 0.35s ease,
        transform 0.45s ease;
}

.hjk-product-card:hover::after {
    opacity: 1;
    transform: scale(1);
}

.hjk-product-card:hover {
    border-color: rgba(229, 138, 31, 0.36);
    box-shadow: 0 22px 48px rgba(20, 36, 47, 0.14);
    transform: translateY(-6px);
}

.hjk-product-card-media {
    aspect-ratio: 16 / 10.5;
}

.hjk-product-card-media::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -30%;
    left: -60%;
    width: 38%;
    height: 160%;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent
        );
    transform: rotate(14deg);
    transition: left 0.7s ease;
}

.hjk-product-card:hover
.hjk-product-card-media::before {
    left: 130%;
}

.hjk-product-card-category {
    top: 13px;
    left: 13px;
    padding: 6px 9px;
    background: rgba(16, 33, 43, 0.74);
    color: #fff;
    backdrop-filter: blur(9px);
}

.hjk-product-card-number {
    top: auto;
    right: 13px;
    bottom: 13px;
    font-size: 11px;
}

.hjk-product-card-recommend {
    top: 13px;
    right: 13px;
    bottom: auto;
    padding: 6px 9px;
}

.hjk-product-card-content {
    padding: 18px 18px 17px;
}

.hjk-product-card-meta {
    margin-bottom: 9px;
    color: var(--hjk-accent-dark);
    font-size: 10px;
    letter-spacing: 0.04em;
}

.hjk-product-card h3 {
    font-size: 18px;
    line-height: 1.4;
}

.hjk-product-card-content > p {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.68;
    -webkit-line-clamp: 2;
}

.hjk-product-card-tags {
    gap: 6px;
    margin-top: 13px;
}

.hjk-product-card-tags span {
    padding: 5px 8px;
    font-size: 10px;
}

.hjk-product-card-link {
    padding-top: 16px;
    font-size: 12px;
}

.hjk-product-card-link i {
    width: 34px;
    height: 34px;
}

/* =====================================================
   Responsive V2
===================================================== */

@media (max-width: 1399.98px) {
    .hjk-product-list {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199.98px) {
    .hjk-featured-product-v2 {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(360px, 0.92fr);
    }

    .hjk-featured-capabilities {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .hjk-product-catalog-heading > p {
        justify-self: start;
        max-width: 760px;
        padding-top: 4px;
        padding-left: 18px;
    }

    .hjk-featured-product-v2 {
        grid-template-columns: 1fr;
    }

    .hjk-featured-product-v2
    .hjk-featured-product-media {
        min-height: 420px;
    }

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

    .hjk-product-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .hjk-product-catalog-heading > p {
        padding-left: 14px;
        font-size: 14px;
    }

    .hjk-featured-product-v2
    .hjk-featured-product-media {
        min-height: 300px;
    }

    .hjk-featured-product-media-caption {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .hjk-featured-product-media-caption strong {
        max-width: 100%;
        font-size: 14px;
        text-align: left;
    }

    .hjk-featured-product-v2
    .hjk-featured-product-content {
        padding: 24px 19px;
    }

    .hjk-featured-capabilities {
        grid-template-columns: 1fr;
    }

    .hjk-product-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}


/* =====================================================
   Uniform product grid V3
   取消重点大图，所有产品保持统一卡片尺寸
===================================================== */

.hjk-product-list-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    max-width: 1420px;
    margin: 0 auto 18px;
    padding: 13px 16px;
    border: 1px solid rgba(33, 52, 64, 0.1);
    border-radius: 13px;
    background:
        linear-gradient(
            90deg,
            rgba(229, 138, 31, 0.08),
            rgba(255, 255, 255, 0.84) 28%,
            rgba(255, 255, 255, 0.84)
        );
    color: #69767e;
    font-size: 12px;
    box-shadow: 0 8px 24px rgba(20, 36, 47, 0.045);
}

.hjk-product-list-summary span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hjk-product-list-summary i {
    color: var(--hjk-accent);
}

.hjk-product-list-summary strong {
    color: var(--hjk-ink);
    font-size: 13px;
    font-weight: 760;
}

/*
 * 所有卡片统一高度和结构。
 */
.hjk-product-list {
    align-items: stretch;
}

.hjk-product-list-item {
    display: flex;
}

.hjk-product-card {
    width: 100%;
}

.hjk-product-card-content {
    min-height: 250px;
}

/*
 * 第一张产品卡片不再使用特殊尺寸，
 * 只通过推荐徽标区分置顶文章。
 */
.hjk-product-list-item:first-child,
.hjk-product-list-item:first-child .hjk-product-card,
.hjk-product-list-item:first-child .hjk-product-card-media {
    grid-column: auto;
    grid-row: auto;
}

/*
 * 更协调的图片裁切比例，突出产品主体。
 */
.hjk-product-card-media {
    aspect-ratio: 4 / 3;
}

.hjk-product-card-media img {
    object-position: center;
}

/*
 * 科技感悬停描边。
 */
.hjk-product-card {
    background:
        linear-gradient(
            #fff,
            #fff
        ) padding-box,
        linear-gradient(
            135deg,
            rgba(229, 138, 31, 0),
            rgba(229, 138, 31, 0)
        ) border-box;
}

.hjk-product-card:hover {
    background:
        linear-gradient(
            #fff,
            #fff
        ) padding-box,
        linear-gradient(
            135deg,
            rgba(229, 138, 31, 0.72),
            rgba(35, 74, 94, 0.35)
        ) border-box;
}

/*
 * 推荐标识使用小型科技徽标，不影响整体排版。
 */
.hjk-product-card-recommend {
    box-shadow:
        0 8px 18px rgba(229, 138, 31, 0.24);
}

/*
 * 让卡片标题、摘要在不同产品之间保持整齐。
 */
.hjk-product-card h3 {
    min-height: 50px;
}

.hjk-product-card-content > p {
    min-height: 44px;
}

@media (max-width: 767.98px) {
    .hjk-product-list-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .hjk-product-card-content {
        min-height: 0;
    }

    .hjk-product-card h3,
    .hjk-product-card-content > p {
        min-height: 0;
    }
}
/*
新增
 */
/* =====================================================
   产品中心 Banner
   紧凑、协调、科技感动态背景
===================================================== */

.hjk-product-hero {
    position: relative;
    isolation: isolate;

    display: block;

    min-height: 540px;
    overflow: hidden;

    /*
     * 缩小导航栏与面包屑之间的距离。
     * 不再使用 align-items:center 垂直居中整个 Banner。
     */
    padding: 34px 0 48px;

    background: #10202a;
    color: #fff;
}

/* =====================================================
   背景图
===================================================== */

.hjk-product-hero-background {
    position: absolute;
    z-index: -3;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.hjk-product-hero-background > img {
    position: absolute;
    inset: -4%;

    width: 108%;
    height: 108%;

    object-fit: cover;
    object-position: center;

    filter:
            brightness(0.7)
            saturate(0.88)
            contrast(1.08);

    transform:
            scale(1.04)
            translate3d(0, 0, 0);

    animation:
            hjkProductHeroImageMove
            16s
            ease-in-out
            infinite
            alternate;
}

/* =====================================================
   背景遮罩
===================================================== */

.hjk-product-hero-overlay {
    position: absolute;
    z-index: 1;
    inset: 0;

    background:
            linear-gradient(
                    90deg,
                    rgba(8, 20, 29, 0.97) 0%,
                    rgba(9, 23, 32, 0.91) 36%,
                    rgba(11, 27, 38, 0.65) 68%,
                    rgba(8, 21, 30, 0.8) 100%
            ),
            linear-gradient(
                    180deg,
                    rgba(7, 18, 26, 0.2) 0%,
                    rgba(7, 18, 26, 0.42) 100%
            );
}

/* =====================================================
   工业网格
===================================================== */

.hjk-product-hero-grid {
    position: absolute;
    z-index: 2;
    inset: 0;

    opacity: 0.16;

    background-image:
            linear-gradient(
                    rgba(255, 255, 255, 0.11) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0.11) 1px,
                    transparent 1px
            );

    background-size: 76px 76px;

    -webkit-mask-image:
            linear-gradient(
                    90deg,
                    #000 0%,
                    rgba(0, 0, 0, 0.7) 58%,
                    transparent 90%
            );

    mask-image:
            linear-gradient(
                    90deg,
                    #000 0%,
                    rgba(0, 0, 0, 0.7) 58%,
                    transparent 90%
            );

    animation:
            hjkProductHeroGridMove
            20s
            linear
            infinite;
}

/* =====================================================
   扫描光线
===================================================== */

.hjk-product-hero-scan {
    position: absolute;
    z-index: 3;

    top: -35%;
    left: -30%;

    width: 20%;
    height: 170%;

    opacity: 0;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 179, 91, 0.45),
                    transparent
            );

    filter: blur(14px);

    transform: rotate(14deg);

    animation:
            hjkProductHeroScan
            9s
            ease-in-out
            infinite;
}

/* =====================================================
   浮动光圈
===================================================== */

.hjk-product-hero-glow {
    position: absolute;
    z-index: 2;

    border: 1px solid
    rgba(229, 138, 31, 0.24);

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(229, 138, 31, 0.12),
                    rgba(229, 138, 31, 0)
            );

    pointer-events: none;
}

.hjk-product-hero-glow.glow-one {
    top: -140px;
    right: 4%;

    width: 420px;
    height: 420px;

    box-shadow:
            0 0 0 60px
            rgba(255, 255, 255, 0.018),
            0 0 0 120px
            rgba(255, 255, 255, 0.012);

    animation:
            hjkProductHeroGlowFloat
            9s
            ease-in-out
            infinite;
}

.hjk-product-hero-glow.glow-two {
    right: 33%;
    bottom: -180px;

    width: 310px;
    height: 310px;

    animation:
            hjkProductHeroGlowFloat
            11s
            ease-in-out
            infinite
            reverse;
}

/* =====================================================
   内容层
===================================================== */

.hjk-product-hero > .container {
    position: relative;
    z-index: 5;
}

/* =====================================================
   面包屑
===================================================== */

.hjk-product-hero
.hjk-product-breadcrumb {
    position: relative;
    z-index: 5;

    /*
     * 面包屑靠近导航栏，
     * 解决顶部大面积空白问题。
     */
    margin: 0 0 22px;
}

.hjk-product-hero
.hjk-product-breadcrumb ol {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;

    color: rgba(255, 255, 255, 0.62);

    font-size: 13px;
    line-height: 1.5;
}

.hjk-product-hero
.hjk-product-breadcrumb a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;

    transition: color 0.2s ease;
}

.hjk-product-hero
.hjk-product-breadcrumb a:hover {
    color: #f2aa53;
}

.hjk-product-hero
.hjk-product-breadcrumb i {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
}

/* =====================================================
   主内容行
===================================================== */

.hjk-product-hero-main {
    /*
     * 防止 Bootstrap 中其他样式覆盖。
     */
    align-items: center !important;
}

.hjk-product-hero-content {
    max-width: 850px;
    padding: 0;
}

/* =====================================================
   英文小标题
===================================================== */

.hjk-product-hero
.hjk-product-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 37px;

    margin: 0 0 17px;
    padding: 8px 14px;

    border: 1px solid
    rgba(255, 177, 84, 0.34);

    border-radius: 999px;

    background:
            rgba(229, 138, 31, 0.1);

    color: #f4ad58;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* =====================================================
   主标题
===================================================== */

.hjk-product-hero
#hjkProductArchiveTitle {
    max-width: 950px;

    margin: 0;

    color: #fff;

    font-size: clamp(
            46px,
            6vw,
            80px
    );

    font-weight: 860;
    line-height: 1.02;
    letter-spacing: -0.045em;

    text-shadow:
            0 12px 35px
            rgba(0, 0, 0, 0.24);
}

.hjk-product-hero
#hjkProductArchiveTitle span {
    display: block;

    margin-top: 14px;

    color: #f0a64b;

    font-size: 0.47em;
    font-weight: 780;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

/* =====================================================
   描述文字
===================================================== */

.hjk-product-hero-description {
    max-width: 790px;

    margin: 21px 0 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 16px;
    line-height: 1.85;
}

/* =====================================================
   产品标签
===================================================== */

.hjk-product-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: 23px;
}

.hjk-product-hero-tags span {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 38px;

    padding: 8px 12px;

    border: 1px solid
    rgba(255, 255, 255, 0.14);

    border-radius: 10px;

    background:
            rgba(255, 255, 255, 0.06);

    color: rgba(255, 255, 255, 0.84);

    font-size: 12px;
    font-weight: 650;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
            border-color 0.25s ease,
            background-color 0.25s ease,
            transform 0.25s ease;
}

.hjk-product-hero-tags span:hover {
    border-color:
            rgba(240, 166, 75, 0.42);

    background:
            rgba(229, 138, 31, 0.14);

    transform: translateY(-3px);
}

.hjk-product-hero-tags i {
    color: #f2aa53;
}

/* =====================================================
   右侧统计
===================================================== */

.hjk-product-hero
.hjk-product-hero-stats {
    position: relative;

    display: grid;
    grid-template-columns: 1fr;

    overflow: hidden;

    margin: 0;

    border: 1px solid
    rgba(255, 255, 255, 0.16);

    border-radius: 19px;

    background:
            linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.13),
                    rgba(255, 255, 255, 0.045)
            );

    box-shadow:
            0 25px 60px
            rgba(0, 0, 0, 0.23);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.hjk-product-hero
.hjk-product-hero-stats::before {
    content: "";

    position: absolute;
    top: 0;
    left: 25px;

    width: 40%;
    height: 2px;

    background:
            linear-gradient(
                    90deg,
                    #e58a1f,
                    transparent
            );
}

.hjk-product-hero
.hjk-product-hero-stats > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    min-height: 82px;

    padding: 16px 22px;
}

.hjk-product-hero
.hjk-product-hero-stats > div + div {
    border-top: 1px solid
    rgba(255, 255, 255, 0.1);
}

.hjk-product-hero
.hjk-product-hero-stats strong {
    color: #fff;

    font-size: 30px;
    font-weight: 820;
    line-height: 1;
}

.hjk-product-hero
.hjk-product-hero-stats span {
    color: rgba(255, 255, 255, 0.62);

    font-size: 12px;
    font-weight: 600;
}

/* =====================================================
   底部装饰
===================================================== */

.hjk-product-hero-bottom {
    display: grid;
    grid-template-columns:
        minmax(45px, 145px)
        auto
        30px;

    gap: 13px;
    align-items: center;

    margin-top: 27px;

    color: rgba(255, 255, 255, 0.42);
}

.hjk-product-hero-bottom-line {
    height: 1px;

    background:
            linear-gradient(
                    90deg,
                    #e58a1f,
                    transparent
            );
}

.hjk-product-hero-bottom small {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.hjk-product-hero-bottom i {
    color: #f0a64b;

    animation:
            hjkProductHeroArrowMove
            1.7s
            ease-in-out
            infinite;
}

/* =====================================================
   动画
===================================================== */

@keyframes hjkProductHeroImageMove {
    0% {
        transform:
                scale(1.04)
                translate3d(0, 0, 0);
    }

    100% {
        transform:
                scale(1.1)
                translate3d(-1.6%, -0.8%, 0);
    }
}

@keyframes hjkProductHeroGridMove {
    from {
        background-position:
                0 0,
                0 0;
    }

    to {
        background-position:
                76px 76px,
                76px 76px;
    }
}

@keyframes hjkProductHeroScan {
    0%,
    22% {
        left: -30%;
        opacity: 0;
    }

    45% {
        opacity: 0.3;
    }

    76%,
    100% {
        left: 125%;
        opacity: 0;
    }
}

@keyframes hjkProductHeroGlowFloat {
    0%,
    100% {
        transform:
                translate3d(0, 0, 0)
                scale(1);
    }

    50% {
        transform:
                translate3d(0, 16px, 0)
                scale(1.04);
    }
}

@keyframes hjkProductHeroArrowMove {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* =====================================================
   平板
===================================================== */

@media (max-width: 991.98px) {
    .hjk-product-hero {
        min-height: auto;
        padding: 30px 0 45px;
    }

    .hjk-product-hero
    .hjk-product-breadcrumb {
        margin-bottom: 18px;
    }

    .hjk-product-hero
    #hjkProductArchiveTitle {
        font-size: clamp(
                43px,
                8vw,
                66px
        );
    }

    .hjk-product-hero
    .hjk-product-hero-stats {
        grid-template-columns:
            repeat(3, 1fr);

        margin-top: 10px;
    }

    .hjk-product-hero
    .hjk-product-hero-stats > div {
        display: block;

        min-height: auto;

        padding: 17px 10px;

        text-align: center;
    }

    .hjk-product-hero
    .hjk-product-hero-stats > div + div {
        border-top: 0;
        border-left: 1px solid
        rgba(255, 255, 255, 0.1);
    }

    .hjk-product-hero-bottom {
        margin-top: 24px;
    }
}

/* =====================================================
   手机
===================================================== */

@media (max-width: 575.98px) {
    .hjk-product-hero {
        padding: 24px 0 38px;
    }

    .hjk-product-hero
    .hjk-product-breadcrumb {
        margin-bottom: 14px;
    }

    .hjk-product-hero
    #hjkProductArchiveTitle {
        font-size: 41px;
    }

    .hjk-product-hero
    #hjkProductArchiveTitle span {
        margin-top: 10px;
        font-size: 0.5em;
    }

    .hjk-product-hero-description {
        margin-top: 17px;

        font-size: 14px;
        line-height: 1.75;
    }

    .hjk-product-hero-tags {
        gap: 7px;
        margin-top: 18px;
    }

    .hjk-product-hero-tags span {
        min-height: 34px;

        padding: 7px 9px;

        font-size: 11px;
    }

    .hjk-product-hero
    .hjk-product-hero-stats {
        grid-template-columns: 1fr;
    }

    .hjk-product-hero
    .hjk-product-hero-stats > div {
        display: flex;

        min-height: 61px;

        padding: 11px 15px;

        text-align: left;
    }

    .hjk-product-hero
    .hjk-product-hero-stats > div + div {
        border-top: 1px solid
        rgba(255, 255, 255, 0.1);

        border-left: 0;
    }

    .hjk-product-hero
    .hjk-product-hero-stats strong {
        font-size: 25px;
    }

    .hjk-product-hero-bottom {
        grid-template-columns:
            45px
            minmax(0, 1fr)
            24px;

        margin-top: 22px;
    }

    .hjk-product-hero-bottom small {
        overflow: hidden;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hjk-product-hero-glow.glow-one {
        right: -170px;
    }
}

/* =====================================================
   用户选择减少动画
===================================================== */

@media (prefers-reduced-motion: reduce) {
    .hjk-product-hero-background > img,
    .hjk-product-hero-grid,
    .hjk-product-hero-scan,
    .hjk-product-hero-glow,
    .hjk-product-hero-bottom i {
        animation: none !important;
    }
}