/*
Theme Name: JH Welltech Child
Template: blocksy
Version: 1.0.0
Description: Custom child theme for JH Welltech.
*/

:root {
    --jh-primary: #111827;
    --jh-accent: #ef3340;
    --jh-text: #1f2937;
    --jh-muted: #6b7280;
    --jh-border: #e5e7eb;
    --jh-bg-light: #f8fafc;
}

.jh-product-page {
    color: var(--jh-text);
}

.jh-product-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.jh-product-section {
    padding: 70px 0;
}

.jh-product-section--light {
    background: var(--jh-bg-light);
}

.jh-section-title {
    margin: 0 0 28px;
    font-size: 32px;
    line-height: 1.2;
    color: var(--jh-primary);
}

/* Hero */
.jh-product-hero {
    padding: 65px 0;
    background: #fff;
}

.jh-product-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 70px;
    align-items: center;
}

.jh-product-main-image {
    background: #f5f6f7;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.jh-product-main-image img {
    width: 100%;
    height: 100%;
    max-height: 600px;
    object-fit: contain;
}

.jh-product-eyebrow {
    margin-bottom: 12px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--jh-accent);
    font-weight: 700;
}

.jh-product-title {
    margin: 0 0 20px;
    font-size: clamp(36px, 5vw, 58px);
    line-height: 1.08;
    color: var(--jh-primary);
}

.jh-product-summary {
    margin-bottom: 30px;
    color: var(--jh-muted);
    font-size: 17px;
    line-height: 1.8;
}

.jh-product-meta {
    border-top: 1px solid var(--jh-border);
    border-bottom: 1px solid var(--jh-border);
    margin-bottom: 30px;
}

.jh-product-meta-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--jh-border);
}

.jh-product-meta-row:last-child {
    border-bottom: 0;
}

.jh-product-meta-label {
    font-weight: 700;
    color: var(--jh-primary);
}

.jh-product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.jh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid var(--jh-primary);
    text-decoration: none;
    font-weight: 700;
    transition: 0.2s ease;
}

.jh-btn--primary {
    color: #fff;
    background: var(--jh-accent);
    border-color: var(--jh-accent);
}

.jh-btn--primary:hover {
    background: #cc2631;
    color: #fff;
}

.jh-btn--secondary {
    background: #fff;
    color: var(--jh-primary);
}

.jh-btn--secondary:hover {
    background: var(--jh-primary);
    color: #fff;
}

/* Specs */
.jh-spec-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.jh-spec-table th,
.jh-spec-table td {
    padding: 18px 22px;
    text-align: left;
    border-bottom: 1px solid var(--jh-border);
}

.jh-spec-table th {
    width: 30%;
    background: #f8fafc;
    color: var(--jh-primary);
    font-weight: 700;
}

/* Application / Description */
.jh-richtext {
    font-size: 17px;
    line-height: 1.9;
    color: #374151;
}

.jh-richtext > *:first-child {
    margin-top: 0;
}

.jh-richtext > *:last-child {
    margin-bottom: 0;
}

/* Gallery */
.jh-product-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.jh-product-gallery-item {
    background: #f5f6f7;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.jh-product-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Datasheet */
.jh-download-card {
    padding: 30px;
    border: 1px solid var(--jh-border);
    background: #fff;
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
}

.jh-download-title {
    margin: 0 0 8px;
    font-size: 22px;
    color: var(--jh-primary);
}

.jh-download-text {
    margin: 0;
    color: var(--jh-muted);
}

/* Inquiry */
.jh-inquiry-box {
    padding: 50px;
    background: var(--jh-primary);
    color: #fff;
    text-align: center;
}

.jh-inquiry-box h2 {
    color: #fff;
    margin-top: 0;
    font-size: 36px;
}

.jh-inquiry-box p {
    max-width: 700px;
    margin: 0 auto 28px;
    opacity: 0.8;
    font-size: 17px;
}

.jh-product-main-image-section {
    background: #ffffff;
}

.jh-product-detail-image {
    width: 80%;
    overflow: hidden;
    background: #f5f6f7;
}

.jh-product-detail-image-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Responsive */
@media (max-width: 900px) {
    .jh-product-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .jh-product-main-image {
        min-height: 380px;
    }

    .jh-product-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .jh-product-container {
        width: min(100% - 24px, 1200px);
    }

    .jh-product-section,
    .jh-product-hero {
        padding: 45px 0;
    }

    .jh-product-gallery {
        grid-template-columns: 1fr;
    }

    .jh-product-meta-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .jh-spec-table th,
    .jh-spec-table td {
        display: block;
        width: 100%;
    }

    .jh-download-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .jh-inquiry-box {
        padding: 35px 20px;
    }
}

/* =========================================================
   Garderobe-style CPT Product Cards
   ========================================================= */

.jh-products-loop {
    display: grid;
    grid-template-columns: repeat(
        var(--jh-columns, 4),
        minmax(0, 1fr)
    );
    gap: 30px;
}

.jh-product-item {
    min-width: 0;
    background: #fff;
}

.jh-product-image-wrap {
    display: flex;
    width: 100%;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f6f6f6;
    text-decoration: none;
}

.jh-product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.jh-product-item:hover .jh-product-image {
    transform: scale(1.03);
}

.jh-product-no-image {
    color: #999;
    font-size: 14px;
}

.jh-product-info {
    padding-top: 18px;
}

.jh-product-name {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
}

.jh-product-name a {
    color: #111;
    text-decoration: none;
}

.jh-product-name a:hover {
    color: #ef3340;
}

.jh-product-model {
    margin-bottom: 8px;
    font-size: 14px;
    color: #666;
}

.jh-product-category {
    margin-bottom: 14px;
    font-size: 12px;
    text-transform: uppercase;
    color: #555;
}

.jh-product-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 0 18px;

    background: #ef3340;
    color: #fff;

    text-decoration: none;
    font-size: 13px;
    font-weight: 700;

    transition: 0.2s ease;
}

.jh-product-view-btn:hover {
    background: #111;
    color: #fff;
}

@media (max-width: 1000px) {
    .jh-products-loop {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .jh-products-loop {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   HOME PAGE
   ========================================================= */

.jh-home {
    background: #fff;
}

.jh-home-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}


/* Hero */

.jh-home-hero {
    background: #dfe1e3;
}

.jh-home-hero-grid {
    min-height: 650px;

    display: grid;
    grid-template-columns: 55% 45%;

    align-items: stretch;
}

.jh-home-hero-content {
    padding: 95px 70px 85px 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jh-home-hero-title {
    margin: 0 0 28px;

    max-width: 720px;

    font-size: clamp(48px, 5vw, 72px);
    line-height: 1.12;

    color: #111118;
}

.jh-home-hero-description {
    max-width: 720px;

    margin: 0 0 32px;

    font-size: 16px;
    line-height: 1.8;

    color: #333840;
}

.jh-home-hero-features {
    display: flex;
    flex-wrap: wrap;

    gap: 32px;

    margin-bottom: 36px;

    font-size: 14px;
}

.jh-home-hero-image {
    overflow: hidden;

    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.jh-home-hero-image img {
    width: 100%;
    height: 100%;

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


/* Buttons */

.jh-home-primary-button {
    align-self: flex-start;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding: 0 26px;

    background: #ef3340;

    color: #fff !important;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;
}

.jh-home-primary-button:hover {
    background: #111118;
}

.jh-home-outline-button {
    display: inline-flex;
    align-items: center;

    min-height: 46px;

    padding: 0 24px;

    border: 1px solid #111118;

    color: #111118;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;
}


/* Advantages */

.jh-home-advantages {
    padding: 46px 0;

    background: #111016;
}

.jh-home-advantages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 25px;
}

.jh-home-advantage {
    text-align: center;
    color: #fff;
}

.jh-home-advantage-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 18px;

    object-fit: contain;
}

.jh-home-advantage h3 {
    margin: 0 0 6px;

    color: #fff;

    font-size: 18px;
}

.jh-home-advantage p {
    margin: 0;

    font-size: 14px;

    color: rgba(255,255,255,.75);
}


/* Standard sections */

.jh-home-section {
    padding: 85px 0;
}

.jh-home-section-header {
    margin-bottom: 42px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;
}

.jh-home-section-eyebrow {
    display: block;

    margin-bottom: 9px;

    color: #9ca3af;

    font-size: 14px;
}

.jh-home-section-header h2 {
    margin: 0;

    font-size: 42px;
    line-height: 1.15;

    color: #111118;
}


/* Categories */

.jh-home-categories {
    padding: 70px 0;

    background: #111016;
}

.jh-home-category-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );

    gap: 25px;
}

.jh-home-category-card {
    padding: 34px 38px;

    display: block;

    background: #19181f;

    color: #fff;

    text-decoration: none;

    transition:
        transform .25s ease,
        background .25s ease;
}

.jh-home-category-card:hover {
    transform: translateY(-4px);
    background: #222128;
}

.jh-home-category-content h3 {
    margin: 8px 0 18px;

    color: #fff;

    font-size: 28px;
}

.jh-home-category-content strong {
    color: #ef3340;

    font-size: 12px;
}


/* About */

.jh-home-about {
    padding: 100px 0;
}

.jh-home-about-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;

    gap: 90px;

    align-items: center;
}

.jh-home-about-content h2 {
    margin: 0 0 28px;

    max-width: 700px;

    font-size: 44px;
    line-height: 1.2;

    color: #111118;
}

.jh-home-about-content p {
    max-width: 690px;

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

    color: #61666d;
}

.jh-home-about-panel {
    padding: 45px;

    background: #111016;

    color: #fff;
}

.jh-home-about-panel > div {
    padding: 24px 0;

    border-bottom: 1px solid rgba(255,255,255,.15);
}

.jh-home-about-panel > div:last-child {
    border-bottom: 0;
}

.jh-home-about-panel strong {
    display: block;

    margin-bottom: 5px;

    font-size: 30px;

    color: #fff;
}

.jh-home-about-panel span {
    color: rgba(255,255,255,.65);
}


/* News */

.jh-home-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 28px;
}

.jh-home-news-image {
    width: 100%;
    aspect-ratio: 4 / 3;

    object-fit: cover;
}

.jh-home-news-content {
    padding-top: 20px;
}

.jh-home-news-content time {
    color: #999;

    font-size: 12px;
}

.jh-home-news-content h3 {
    margin: 9px 0 15px;

    font-size: 20px;
}

.jh-home-news-content h3 a {
    color: #111118;

    text-decoration: none;
}

.jh-home-read-more {
    color: #ef3340;

    text-decoration: none;

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


/* CTA */

.jh-home-cta {
    padding: 90px 0;

    background: #111016;
}

.jh-home-cta-inner {
    max-width: 850px;

    margin: 0 auto;

    text-align: center;

    color: #fff;
}

.jh-home-cta-inner > span {
    color: #ef3340;

    font-size: 13px;
}

.jh-home-cta-inner h2 {
    margin: 12px 0 20px;

    color: #fff;

    font-size: 44px;
}

.jh-home-cta-inner p {
    max-width: 680px;

    margin: 0 auto 30px;

    color: rgba(255,255,255,.7);

    line-height: 1.8;
}

.jh-home-cta-inner .jh-home-primary-button {
    align-self: auto;
}


/* Responsive */

@media (max-width: 900px) {

    .jh-home-hero-grid {
        grid-template-columns: 1fr;
    }

    .jh-home-hero-content {
        padding: 70px 0;
    }

    .jh-home-hero-image {
        min-height: 480px;
    }

    .jh-home-advantages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 45px;
    }

    .jh-home-category-grid,
    .jh-home-news-grid {
        grid-template-columns: 1fr;
    }

    .jh-home-about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}


@media (max-width: 600px) {

    .jh-home-container {
        width: calc(100% - 28px);
    }

    .jh-home-hero-title {
        font-size: 42px;
    }

    .jh-home-advantages-grid {
        grid-template-columns: 1fr;
    }

    .jh-home-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .jh-home-section-header h2,
    .jh-home-about-content h2,
    .jh-home-cta-inner h2 {
        font-size: 34px;
    }
}

/* =========================================================
   SITE FOOTER
   ========================================================= */

.jh-site-footer {
    background: #ffffff;
    color: #61666d;
}

.jh-footer-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}


/* Main columns */

.jh-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.1fr;

    gap: 70px;

    padding: 80px 0 70px;
}

.jh-footer-column h3 {
    margin: 0 0 24px;

    color: #111118;

    font-size: 19px;
    line-height: 1.3;

    font-weight: 700;
}

.jh-footer-column p {
    margin: 0 0 22px;

    font-size: 15px;
    line-height: 1.8;

    color: #6b7280;
}

.jh-footer-column ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.jh-footer-column li {
    margin-bottom: 14px;
}

.jh-footer-column a {
    color: #6b7280;

    text-decoration: none;

    transition: color .2s ease;
}

.jh-footer-column a:hover {
    color: #ef3340;
}


/* Contact */

.jh-footer-contact-link {
    display: inline-block;

    margin-top: 5px;

    color: #ef3340 !important;

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

    letter-spacing: .04em;
}


/* Brand */

.jh-footer-brand {
    padding: 46px 0;

    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;

    text-align: center;
}

.jh-footer-brand a {
    text-decoration: none;
}

.jh-footer-brand-name {
    color: #111118;

    font-size: 31px;
    font-weight: 700;

    letter-spacing: .01em;
}


/* Bottom */

.jh-footer-bottom {
    padding: 35px 0;

    text-align: center;
}

.jh-footer-bottom p {
    margin: 0;

    color: #9ca3af;

    font-size: 13px;
}


/* Tablet */

@media (max-width: 900px) {

    .jh-footer-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 50px;

        padding: 65px 0;
    }
}


/* Mobile */

@media (max-width: 600px) {

    .jh-footer-container {
        width: calc(100% - 28px);
    }

    .jh-footer-grid {
        grid-template-columns: 1fr;

        gap: 38px;

        padding: 55px 0;
    }

    .jh-footer-brand {
        padding: 35px 0;
    }
}

.jh-home-category-description {
    display: block;

    margin-bottom: 8px;

    color: rgba(255, 255, 255, .6);

    font-size: 13px;
}


.jh-home-category-meta {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.jh-home-category-meta > span {
    color: rgba(255, 255, 255, .55);

    font-size: 12px;
}


.jh-home-category-meta strong {
    color: #ef3340;

    font-size: 12px;

    white-space: nowrap;
}

/* =========================================================
   SITE HEADER
   ========================================================= */

.jh-site-header {
    position: relative;

    z-index: 999;

    background: #fff;
}


/* ---------------------------------------------------------
   Container
   --------------------------------------------------------- */

.jh-header-container {
    width: min(1200px, calc(100% - 40px));

    margin: 0 auto;
}


/* ---------------------------------------------------------
   Top bar
   --------------------------------------------------------- */

.jh-header-topbar {
    background: #111016;

    color: rgba(255, 255, 255, .72);
}

.jh-header-topbar-inner {
    min-height: 36px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    font-size: 11px;

    letter-spacing: .02em;
}


/* ---------------------------------------------------------
   Main
   --------------------------------------------------------- */

.jh-header-main {
    position: relative;

    background: #fff;

    border-bottom: 1px solid #eeeeee;
}

.jh-header-main-inner {
    height: 94px;

    display: grid;

    grid-template-columns:
        minmax(190px, 1fr)
        auto
        minmax(190px, 1fr);

    align-items: center;

    gap: 35px;
}


/* ---------------------------------------------------------
   Brand
   --------------------------------------------------------- */

.jh-header-brand {
    justify-self: start;
}

.jh-header-brand-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #111118;

    text-decoration: none;
}

.jh-header-brand-mark {
    width: 38px;
    height: 38px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    background: #111118;

    color: #fff;

    font-family: monospace;

    font-size: 17px;
    font-weight: 700;

    letter-spacing: -.05em;
}

.jh-header-brand-text {
    font-family: monospace;

    font-size: 24px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: .01em;
}


/* ---------------------------------------------------------
   Desktop menu
   --------------------------------------------------------- */

.jh-header-nav {
    justify-self: center;
}

.jh-header-menu {
    display: flex;
    align-items: center;

    gap: 50px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.jh-header-menu > li {
    position: relative;

    margin: 0;
}

.jh-header-menu > li > a {
    position: relative;

    display: block;

    padding: 36px 0 34px;

    color: rgba(19, 17, 23, 0.7);

    text-decoration: none;

    font-family: "IBM Plex Mono", monospace;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;

    text-transform: uppercase;

    white-space: nowrap;

    transition: color .2s ease;
}

.jh-header-menu > li > a:hover,
.jh-header-menu > li.current-menu-item > a,
.jh-header-menu > li.current_page_item > a {
    color: #131117;
}

/* Underline */

.jh-header-menu > li > a::after {
    content: '';

    position: absolute;

    left: 0;
    right: 0;
    bottom: 27px;

    height: 2px;

    background: #ef3340;

    transform: scaleX(0);

    transform-origin: center;

    transition: transform .2s ease;
}

.jh-header-menu > li > a:hover::after,
.jh-header-menu > li.current-menu-item > a::after,
.jh-header-menu > li.current_page_item > a::after {
    transform: scaleX(1);
}


/* ---------------------------------------------------------
   Dropdown
   --------------------------------------------------------- */

.jh-header-menu .sub-menu {
    position: absolute;

    top: 100%;
    left: -20px;

    min-width: 220px;

    margin: 0;
    padding: 12px 0;

    list-style: none;

    background: #fff;

    border: 1px solid #eeeeee;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);

    opacity: 0;

    visibility: hidden;

    transform: translateY(8px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
}

.jh-header-menu li:hover > .sub-menu {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}

.jh-header-menu .sub-menu a {
    display: block;

    padding: 10px 20px;

    color: #333;

    text-decoration: none;

    font-size: 13px;
}

.jh-header-menu .sub-menu a:hover {
    color: #ef3340;
}


/* ---------------------------------------------------------
   Actions
   --------------------------------------------------------- */

.jh-header-actions {
    justify-self: end;

    display: flex;

    align-items: center;

    gap: 18px;
}

.jh-header-search-toggle,
.jh-mobile-menu-toggle {
    appearance: none;

    border: 0;

    padding: 0;

    background: transparent;

    color: #111118;

    cursor: pointer;
}

.jh-header-search-toggle {
    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* ---------------------------------------------------------
   Search panel
   --------------------------------------------------------- */

.jh-header-search-panel {
    display: none;

    position: absolute;

    z-index: 20;

    top: 100%;
    left: 0;
    right: 0;

    padding: 25px 0;

    background: #fff;

    border-top: 1px solid #eeeeee;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .06);
}

.jh-header-search-panel.is-open {
    display: block;
}

.jh-header-search-form {
    display: grid;

    grid-template-columns: 1fr auto;

    gap: 12px;
}

.jh-header-search-form input {
    width: 100%;

    height: 50px;

    padding: 0 18px;

    border: 1px solid #d7d7d7;

    background: #fff;

    color: #111118;

    outline: none;
}

.jh-header-search-form input:focus {
    border-color: #111118;
}

.jh-header-search-form button {
    min-width: 120px;

    border: 0;

    padding: 0 24px;

    background: #ef3340;

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

.jh-mobile-menu-toggle {
    display: none;

    width: 30px;
    height: 24px;

    flex-direction: column;

    justify-content: space-between;
}

.jh-mobile-menu-toggle span {
    display: block;

    width: 100%;
    height: 2px;

    background: #111118;

    transition:
        transform .2s ease,
        opacity .2s ease;
}

.jh-mobile-menu-toggle.is-open span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}

.jh-mobile-menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.jh-mobile-menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}


.jh-mobile-navigation {
    display: none;

    border-top: 1px solid #eeeeee;

    background: #fff;
}

.jh-mobile-navigation.is-open {
    display: block;
}

.jh-mobile-menu {
    margin: 0;

    padding: 15px 0 25px;

    list-style: none;
}

.jh-mobile-menu li {
    margin: 0;

    border-bottom: 1px solid #eeeeee;
}

.jh-mobile-menu a {
    display: block;

    padding: 16px 0;

    color: #111118;

    text-decoration: none;

    font-family: monospace;

    font-size: 14px;
}


/* ---------------------------------------------------------
   Tablet / Mobile
   --------------------------------------------------------- */

@media (max-width: 1050px) {

    .jh-header-main-inner {
        grid-template-columns:
            1fr
            auto;

        height: 78px;
    }

    .jh-header-nav {
        display: none;
    }

    .jh-mobile-menu-toggle {
        display: flex;
    }

}


@media (max-width: 600px) {

    .jh-header-container {
        width: calc(100% - 28px);
    }

    .jh-header-topbar-right {
        display: none;
    }

    .jh-header-topbar-inner {
        justify-content: center;

        text-align: center;
    }

    .jh-header-brand-mark {
        width: 34px;
        height: 34px;
    }

    .jh-header-brand-text {
        font-size: 20px;
    }

}

/* =========================================================
   PRODUCT ARCHIVE PAGE
   ========================================================= */

.jh-products-page {
    background: #fff;
}

.jh-products-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}


/* Page Header */

.jh-products-page-header {
    padding: 80px 0 75px;

    background: #dedfe1;

    text-align: center;
}

.jh-products-breadcrumb {
    margin-bottom: 25px;

    font-size: 13px;

    color: #66707a;
}

.jh-products-breadcrumb a {
    color: #66707a;

    text-decoration: none;
}

.jh-products-breadcrumb span {
    margin: 0 9px;
}

.jh-products-breadcrumb strong {
    color: #111118;
}

.jh-products-page-header h1 {
    margin: 0;

    color: #111118;

    font-size: 58px;
    line-height: 1.1;
}


/* Main */

.jh-products-content {
    padding: 70px 0 90px;
}

.jh-products-layout {
    display: grid;

    grid-template-columns: 260px minmax(0, 1fr);

    gap: 55px;

    align-items: start;
}


/* Sidebar */

.jh-products-sidebar-box h2 {
    margin: 0 0 25px;

    color: #111118;

    font-size: 23px;
    line-height: 1.3;
}

.jh-product-category-list {
    margin: 0;
    padding: 0;

    list-style: none;

    border-top: 1px solid #e7e7e7;
}

.jh-product-category-list li {
    margin: 0;

    border-bottom: 1px solid #e7e7e7;
}

.jh-product-category-list a {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 16px 0;

    color: #565b61;

    text-decoration: none;

    font-size: 14px;

    transition: color .2s ease;
}

.jh-product-category-list a:hover,
.jh-product-category-list .is-active a {
    color: #ef3340;
}

.jh-product-category-list small {
    color: #999;

    font-size: 12px;
}


/* Product Grid */

.jh-products-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 38px 28px;
}

.jh-products-card {
    min-width: 0;

    background: #fff;
}


/* Image */

.jh-products-card-image {
    display: flex;

    width: 100%;

    aspect-ratio: 1 / 1;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #f5f5f5;
}

.jh-products-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform .3s ease;
}

.jh-products-card:hover
.jh-products-card-image img {
    transform: scale(1.03);
}

.jh-products-no-image {
    color: #aaa;

    font-size: 13px;
}


/* Card Content */

.jh-products-card-content {
    padding-top: 18px;
}

.jh-products-card-category {
    margin-bottom: 8px;

    color: #70777e;

    font-size: 12px;

    text-transform: uppercase;
}

.jh-products-card-title {
    margin: 0 0 10px;

    font-size: 18px;
    line-height: 1.45;
}

.jh-products-card-title a {
    color: #111118;

    text-decoration: none;
}

.jh-products-card-title a:hover {
    color: #ef3340;
}

.jh-products-card-model {
    margin-bottom: 17px;

    color: #6b7280;

    font-size: 13px;
}

.jh-products-card-button {
    display: inline-flex;

    min-height: 42px;

    padding: 0 18px;

    align-items: center;
    justify-content: center;

    background: #ef3340;

    color: #fff;

    text-decoration: none;

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

    transition: background .2s ease;
}

.jh-products-card-button:hover {
    background: #111118;

    color: #fff;
}


/* Pagination */

.jh-products-pagination {
    margin-top: 55px;
}

.jh-products-pagination .nav-links {
    display: flex;

    gap: 8px;
}

.jh-products-pagination .page-numbers {
    width: 42px;
    height: 42px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border: 1px solid #ddd;

    color: #111118;

    text-decoration: none;
}

.jh-products-pagination .current {
    border-color: #ef3340;

    background: #ef3340;

    color: #fff;
}


/* Tablet */

@media (max-width: 1000px) {

    .jh-products-layout {
        grid-template-columns: 220px minmax(0, 1fr);

        gap: 35px;
    }

    .jh-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Mobile */

@media (max-width: 700px) {

    .jh-products-page-header {
        padding: 55px 0;
    }

    .jh-products-page-header h1 {
        font-size: 42px;
    }

    .jh-products-layout {
        grid-template-columns: 1fr;
    }

    .jh-products-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   SERVICES PAGE
   JH Welltech + Garderobe-inspired layout
   ========================================================= */

.jh-services-page {
    background: #ffffff;
}

/*
 * 同时兼容目前 Services Hero 和新模块使用的两个 container 名称。
 * 后面我们可以再统一类名，现在先保证结构稳定。
 */
.jh-service-container,
.jh-services-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.jh-services-hero {
    padding: 80px 0 75px;

    background: #dedfe1;

    text-align: center;
}

.jh-services-breadcrumb {
    margin-bottom: 25px;

    font-size: 13px;

    color: #687078;
}

.jh-services-breadcrumb a {
    color: #687078;

    text-decoration: none;
}

.jh-services-breadcrumb a:hover {
    color: #111118;
}

.jh-services-breadcrumb span {
    margin: 0 9px;
}

.jh-services-breadcrumb strong {
    color: #111118;
}

.jh-services-hero h1 {
    margin: 0;

    color: #111118;

    font-size: 58px;
    line-height: 1.1;
}

.jh-services-hero p {
    max-width: 700px;

    margin: 24px auto 0;

    color: #616870;

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   4 SERVICES
   ========================================================= */

.jh-service-features {
    position: relative;

    z-index: 1;

    margin-top: 0;

    padding: 80px 0 110px;

    background: #ffffff;
}

.jh-service-feature-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    background: #ffffff;

    border: 1px solid #eeeeee;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.055);
}

.jh-service-feature {
    min-height: 315px;

    padding: 48px 34px;

    border-right: 1px solid #eeeeee;

    text-align: center;

    background: #ffffff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.jh-service-feature:last-child {
    border-right: 0;
}

.jh-service-feature:hover {
    position: relative;

    z-index: 2;

    transform: translateY(-4px);

    box-shadow:
        0 14px 35px
        rgba(0, 0, 0, 0.07);
}

.jh-service-feature-icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 28px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.jh-service-feature-icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    /* 首页 SVG 原本是白色，这里转换成黑色 */
    filter: brightness(0) saturate(100%);

    opacity: 0.85;
}

.jh-service-feature h2 {
    margin: 0 0 17px;

    color: #111118;

    font-size: 20px;
    line-height: 1.35;
}

.jh-service-feature p {
    margin: 0;

    color: #72777d;

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


/* =========================================================
   SPLIT SECTIONS
   ========================================================= */

.jh-service-split {
    padding: 40px 0 120px;
}

.jh-service-split-alt {
    padding-top: 20px;
}

.jh-service-split-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 85px;

    align-items: center;
}


/* =========================================================
   SPLIT IMAGE
   ========================================================= */

.jh-service-split-image {
    min-height: 580px;

    overflow: hidden;

    background: #f2f2f2;
}

.jh-service-split-image img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 580px;

    object-fit: cover;
}


/* =========================================================
   SPLIT TEXT
   ========================================================= */

.jh-service-label {
    display: block;

    margin-bottom: 10px;

    color: #a0a5aa;

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

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.jh-service-split-content h2 {
    max-width: 560px;

    margin: 0 0 28px;

    color: #111118;

    font-size: 45px;
    line-height: 1.18;
}

.jh-service-split-content > p {
    max-width: 600px;

    margin: 0 0 18px;

    color: #6d747b;

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


/* =========================================================
   BUTTON
   ========================================================= */

.jh-service-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    margin-top: 22px;

    padding: 0 25px;

    background: #ef3340;

    color: #ffffff !important;

    text-decoration: none;

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

    letter-spacing: 0.02em;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.jh-service-button:hover {
    background: #111118;

    color: #ffffff !important;

    transform: translateY(-1px);
}


/* =========================================================
   ACCORDION
   ========================================================= */

.jh-service-accordion {
    max-width: 610px;

    margin-top: 30px;

    border-top: 1px solid #dedede;
}

.jh-service-accordion details {
    border-bottom: 1px solid #dedede;
}

.jh-service-accordion summary {
    position: relative;

    padding: 20px 42px 20px 0;

    color: #111118;

    cursor: pointer;

    list-style: none;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.jh-service-accordion summary::-webkit-details-marker {
    display: none;
}

.jh-service-accordion summary::after {
    content: '+';

    position: absolute;

    right: 5px;
    top: 15px;

    color: #ef3340;

    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}

.jh-service-accordion details[open] summary::after {
    content: '−';
}

.jh-service-accordion details p {
    margin: 0;

    padding: 0 42px 22px 0;

    color: #72777d;

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


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

.jh-service-cta {
    position: relative;

    padding: 125px 0;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    text-align: center;

    color: #ffffff;
}

.jh-service-cta-content {
    max-width: 720px;

    margin: 0 auto;
}

.jh-service-cta-content > span {
    display: block;

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

    font-size: 12px;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.jh-service-cta-content h2 {
    margin: 12px 0 20px;

    color: #ffffff;

    font-size: 46px;
    line-height: 1.18;
}

.jh-service-cta-content p {
    max-width: 650px;

    margin: 0 auto 15px;

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

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   LATEST PRODUCTS
   ========================================================= */

.jh-service-products {
    padding: 95px 0 110px;

    background: #ffffff;
}

.jh-service-products-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 45px;
}

.jh-service-products-header span {
    display: block;

    margin-bottom: 8px;

    color: #9aa0a6;

    font-size: 13px;
}

.jh-service-products-header h2 {
    margin: 0;

    color: #111118;

    font-size: 40px;
    line-height: 1.2;
}

.jh-service-outline-button {
    display: inline-flex;

    min-height: 44px;

    padding: 0 22px;

    align-items: center;
    justify-content: center;

    border: 1px solid #111118;

    color: #111118;

    text-decoration: none;

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

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.jh-service-outline-button:hover {
    background: #111118;

    color: #ffffff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .jh-service-feature-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .jh-service-feature:nth-child(2) {
        border-right: 0;
    }

    .jh-service-feature:nth-child(1),
    .jh-service-feature:nth-child(2) {
        border-bottom: 1px solid #eeeeee;
    }

    .jh-service-split-grid {
        gap: 45px;
    }

    .jh-service-split-content h2 {
        font-size: 39px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .jh-service-container,
    .jh-services-container {
        width: calc(100% - 28px);
    }


    /* Hero */

    .jh-services-hero {
        padding: 58px 0 55px;
    }

    .jh-services-hero h1 {
        font-size: 42px;
    }

    .jh-services-hero p {
        font-size: 14px;
    }


    /* Features */

    .jh-service-features {
        padding: 55px 0 75px;
    }

    .jh-service-feature-grid {
        grid-template-columns: 1fr;
    }

    .jh-service-feature {
        min-height: auto;

        padding: 40px 28px;

        border-right: 0;
        border-bottom: 1px solid #eeeeee;
    }

    .jh-service-feature:last-child {
        border-bottom: 0;
    }


    /* Split sections */

    .jh-service-split {
        padding: 30px 0 80px;
    }

    .jh-service-split-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .jh-service-split-alt .jh-service-split-image {
        order: -1;
    }

    .jh-service-split-image,
    .jh-service-split-image img {
        min-height: 390px;
    }

    .jh-service-split-content h2 {
        font-size: 34px;
    }


    /* CTA */

    .jh-service-cta {
        padding: 85px 0;
    }

    .jh-service-cta-content h2 {
        font-size: 34px;
    }


    /* Products */

    .jh-service-products {
        padding: 70px 0 80px;
    }

    .jh-service-products-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 22px;
    }

    .jh-service-products-header h2 {
        font-size: 34px;
    }

}

/* =========================================================
   ABOUT US PAGE
   ========================================================= */

.jh-about-page {
    background: #ffffff;
}

.jh-about-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.jh-about-hero {
    padding: 80px 0 75px;

    background: #dedfe1;

    text-align: center;
}

.jh-about-breadcrumb {
    margin-bottom: 25px;

    color: #687078;

    font-size: 13px;
}

.jh-about-breadcrumb a {
    color: inherit;

    text-decoration: none;
}

.jh-about-breadcrumb span {
    margin: 0 9px;
}

.jh-about-breadcrumb strong {
    color: #111118;
}

.jh-about-hero h1 {
    margin: 0;

    color: #111118;

    font-size: 58px;
    line-height: 1.1;
}

.jh-about-hero p {
    max-width: 700px;

    margin: 24px auto 0;

    color: #616870;

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   SPLIT SECTIONS
   ========================================================= */

.jh-about-company,
.jh-about-technical {
    padding: 105px 0;
}

.jh-about-split {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 90px;

    align-items: center;
}

.jh-about-image {
    min-height: 600px;

    overflow: hidden;

    background: #f3f3f3;
}

.jh-about-image img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 600px;

    object-fit: cover;
}

.jh-about-label {
    display: block;

    margin-bottom: 12px;

    color: #9ca3af;

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

    letter-spacing: .08em;
}

.jh-about-content h2 {
    max-width: 570px;

    margin: 0 0 28px;

    color: #111118;

    font-size: 45px;
    line-height: 1.18;
}

.jh-about-content p {
    max-width: 610px;

    margin: 0 0 18px;

    color: #6b7280;

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


/* =========================================================
   BUTTON
   ========================================================= */

.jh-about-button {
    display: inline-flex;

    min-height: 48px;

    margin-top: 20px;

    padding: 0 25px;

    align-items: center;
    justify-content: center;

    background: #ef3340;

    color: #ffffff !important;

    text-decoration: none;

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

    transition: background .2s ease;
}

.jh-about-button:hover {
    background: #111118;
}


/* =========================================================
   CAPABILITIES
   ========================================================= */

.jh-about-capabilities {
    padding: 100px 0;

    background: #111016;

    color: #ffffff;
}

.jh-about-capability-heading {
    max-width: 680px;

    margin-bottom: 60px;
}

.jh-about-capability-heading > span,
.jh-about-approach-heading > span {
    color: #ef3340;

    font-size: 12px;

    letter-spacing: .08em;
}

.jh-about-capability-heading h2 {
    margin: 12px 0 0;

    color: #ffffff;

    font-size: 43px;
    line-height: 1.2;
}

.jh-about-capability-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 35px;
}

.jh-about-capability-item {
    padding-top: 25px;

    border-top:
        1px solid rgba(255,255,255,.18);
}

.jh-about-capability-number {
    display: block;

    margin-bottom: 42px;

    color: #ef3340;

    font-size: 12px;

    font-weight: 700;
}

.jh-about-capability-item h3 {
    margin: 0 0 15px;

    color: #ffffff;

    font-size: 20px;
}

.jh-about-capability-item p {
    margin: 0;

    color: rgba(255,255,255,.62);

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


/* =========================================================
   CHECK LIST
   ========================================================= */

.jh-about-check-list {
    max-width: 600px;

    margin-top: 30px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top: 1px solid #dddddd;
}

.jh-about-check-list div {
    position: relative;

    padding: 17px 10px 17px 25px;

    border-bottom: 1px solid #dddddd;

    color: #343a40;

    font-size: 14px;
}

.jh-about-check-list div::before {
    content: '✓';

    position: absolute;

    left: 0;

    color: #ef3340;

    font-weight: 700;
}


/* =========================================================
   APPROACH
   ========================================================= */

.jh-about-approach {
    padding: 100px 0;

    background: #f6f6f6;
}

.jh-about-approach-heading {
    margin-bottom: 55px;
}

.jh-about-approach-heading h2 {
    margin: 12px 0 0;

    color: #111118;

    font-size: 42px;
}

.jh-about-approach-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 1px;

    background: #dddddd;

    border: 1px solid #dddddd;
}

.jh-about-approach-grid article {
    min-height: 245px;

    padding: 38px 32px;

    background: #ffffff;
}

.jh-about-approach-grid h3 {
    margin: 0 0 20px;

    color: #111118;

    font-size: 24px;
}

.jh-about-approach-grid p {
    margin: 0;

    color: #6b7280;

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


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

.jh-about-cta {
    padding: 125px 0;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    text-align: center;
}

.jh-about-cta-content {
    max-width: 750px;

    margin: 0 auto;
}

.jh-about-cta-content > span {
    color: rgba(255,255,255,.7);

    font-size: 12px;

    letter-spacing: .08em;
}

.jh-about-cta-content h2 {
    margin: 12px 0 20px;

    color: #ffffff;

    font-size: 46px;
    line-height: 1.18;
}

.jh-about-cta-content p {
    max-width: 650px;

    margin: 0 auto 12px;

    color: rgba(255,255,255,.75);

    line-height: 1.8;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .jh-about-split {
        gap: 50px;
    }

    .jh-about-capability-grid,
    .jh-about-approach-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .jh-about-container {
        width: calc(100% - 28px);
    }

    .jh-about-hero {
        padding: 58px 0 55px;
    }

    .jh-about-hero h1 {
        font-size: 42px;
    }

    .jh-about-company,
    .jh-about-technical {
        padding: 75px 0;
    }

    .jh-about-split {
        grid-template-columns: 1fr;

        gap: 42px;
    }

    .jh-about-technical
    .jh-about-image {
        order: -1;
    }

    .jh-about-image,
    .jh-about-image img {
        min-height: 400px;
    }

    .jh-about-content h2 {
        font-size: 34px;
    }

    .jh-about-capability-grid,
    .jh-about-approach-grid {
        grid-template-columns: 1fr;
    }

    .jh-about-check-list {
        grid-template-columns: 1fr;
    }

    .jh-about-capability-heading h2,
    .jh-about-approach-heading h2,
    .jh-about-cta-content h2 {
        font-size: 34px;
    }

}

/* =========================================================
   NEWS PAGE
   Garderobe-inspired
   ========================================================= */

.jh-news-page {
    background: #ffffff;
}

.jh-news-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.jh-news-hero {
    padding: 78px 0 82px;

    background: #dedfe1;

    text-align: center;
}

.jh-news-breadcrumb {
    margin-bottom: 26px;

    color: #687078;

    font-size: 13px;
}

.jh-news-breadcrumb a {
    color: #687078;

    text-decoration: none;
}

.jh-news-breadcrumb a:hover {
    color: #111118;
}

.jh-news-breadcrumb span {
    margin: 0 9px;
}

.jh-news-breadcrumb strong {
    color: #111118;
}

.jh-news-hero h1 {
    margin: 0;

    color: #111118;

    font-size: 58px;
    line-height: 1.1;
}


/* =========================================================
   NEWS CONTENT
   ========================================================= */

.jh-news-content {
    padding: 75px 0 110px;

    background: #ffffff;
}


/* =========================================================
   NEWS GRID
   ========================================================= */

.jh-news-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 75px 32px;
}


/* =========================================================
   NEWS CARD
   ========================================================= */

.jh-news-card {
    min-width: 0;
}


/* Category */

.jh-news-category {
    margin-bottom: 18px;

    color: #777e85;

    font-size: 11px;

    line-height: 1.4;

    text-transform: uppercase;
}


/* Title */

.jh-news-title {
    min-height: 58px;

    margin: 0 0 18px;

    color: #111118;

    font-size: 20px;
    line-height: 1.35;
}

.jh-news-title a {
    color: #111118;

    text-decoration: none;

    transition: color .2s ease;
}

.jh-news-title a:hover {
    color: #ef3340;
}


/* Image */

.jh-news-image {
    display: block;

    width: 100%;

    aspect-ratio: 1.42 / 1;

    overflow: hidden;

    background: #f1f1f1;
}

.jh-news-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .35s ease;
}

.jh-news-card:hover
.jh-news-image img {
    transform: scale(1.025);
}


/* Placeholder */

.jh-news-no-image {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #f1f1f1;

    color: #a1a1a1;
}

.jh-news-no-image span {
    font-size: 12px;

    letter-spacing: .08em;
}


/* Excerpt */

.jh-news-excerpt {
    margin: 22px 0;

    color: #687078;

    font-size: 14px;
    line-height: 1.8;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
}


/* Meta */

.jh-news-meta {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 23px;

    color: #646b72;

    font-size: 11px;

    text-transform: uppercase;
}

.jh-news-meta i {
    color: #a1a1a1;

    font-style: normal;
}

.jh-news-meta time {
    color: #646b72;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.jh-news-pagination {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 70px;
}

.jh-news-pagination .page-numbers {
    width: 42px;
    height: 42px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border: 1px solid #dedede;

    color: #111118;

    text-decoration: none;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.jh-news-pagination a.page-numbers:hover {
    border-color: #111118;
}

.jh-news-pagination .page-numbers.current {
    border-color: #ef3340;

    background: #ef3340;

    color: #ffffff;
}


/* =========================================================
   EMPTY
   ========================================================= */

.jh-news-empty {
    padding: 80px 30px;

    background: #f5f5f5;

    text-align: center;
}

.jh-news-empty h2 {
    margin: 0 0 12px;

    color: #111118;

    font-size: 28px;
}

.jh-news-empty p {
    margin: 0;

    color: #737980;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

    .jh-news-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 55px 28px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .jh-news-container {
        width: calc(100% - 28px);
    }

    .jh-news-hero {
        padding: 58px 0 55px;
    }

    .jh-news-hero h1 {
        font-size: 42px;
    }

    .jh-news-content {
        padding: 55px 0 75px;
    }

    .jh-news-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .jh-news-title {
        min-height: 0;
    }

}

/* =========================================================
   CONTACT PAGE
   ========================================================= */

.jh-contact-page {
    background: #ffffff;
}

.jh-contact-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.jh-contact-hero {
    padding: 80px 0 175px;

    background: #dedfe1;

    text-align: center;
}

.jh-contact-breadcrumb {
    margin-bottom: 25px;

    color: #687078;

    font-size: 13px;
}

.jh-contact-breadcrumb a {
    color: inherit;

    text-decoration: none;
}

.jh-contact-breadcrumb a:hover {
    color: #111118;
}

.jh-contact-breadcrumb span {
    margin: 0 9px;
}

.jh-contact-breadcrumb strong {
    color: #111118;
}

.jh-contact-hero h1 {
    margin: 0;

    color: #111118;

    font-size: 58px;
    line-height: 1.1;
}


/* =========================================================
   CONTACT MAIN
   ========================================================= */

.jh-contact-main {
    position: relative;

    padding: 80px 0 110px;

    background: #ffffff;
}

.jh-contact-main-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 55px;

    /*
     * 关键：
     * 左图和右表单以同一高度进行布局，
     * 从而保证底部能够对齐。
     */
    align-items: stretch;
}


/* =========================================================
   LEFT IMAGE
   ========================================================= */

.jh-contact-main-image {
    position: relative;

    z-index: 2;

    width: 100%;

    /*
     * 图片向上进入 Hero。
     */
    margin-top: -200px;

    /*
     * 向上移动多少，就增加多少高度。
     * 这样图片顶部进入 Hero，
     * 但底部仍然和右侧内容对齐。
     */
    height: calc(100% + 200px);

    overflow: hidden;

    background: #f2f2f2;
}

.jh-contact-main-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


/* =========================================================
   RIGHT FORM
   ========================================================= */

.jh-contact-form-column {
    width: 100%;

    min-width: 0;

    padding: 0;
}

.jh-contact-form-column h2 {
    margin: 0 0 38px;

    color: #111118;

    font-size: 32px;
    line-height: 1.25;

    font-weight: 700;
}


/* =========================================================
   DEMO FORM
   ========================================================= */

.jh-contact-demo-form {
    width: 100%;

    margin: 0;
}

.jh-demo-field {
    width: 100%;

    margin-bottom: 22px;
}

.jh-demo-field label {
    display: block;

    margin-bottom: 9px;

    color: #555b61;

    font-size: 13px;
    line-height: 1.4;

    font-weight: 400;
}

.jh-demo-field label span {
    color: #ef3340;
}

.jh-demo-field input,
.jh-demo-field textarea {
    display: block;

    width: 100%;

    box-sizing: border-box;

    border: 1px solid #d5dbe0;
    border-radius: 0;

    background: #ffffff;

    color: #111118;

    font: inherit;

    box-shadow: none;

    outline: none;

    transition:
        border-color .2s ease;
}

.jh-demo-field input {
    height: 44px;

    padding: 0 12px;
}

.jh-demo-field textarea {
    min-height: 170px;

    padding: 12px;

    resize: vertical;
}

.jh-demo-field input:focus,
.jh-demo-field textarea:focus {
    border-color: #111118;
}

.jh-contact-demo-form button {
    min-width: 155px;
    min-height: 44px;

    padding: 0 24px;

    border: 0;
    border-radius: 0;

    background: #ef3340;

    color: #ffffff;

    font-size: 12px;
    line-height: 1;

    font-weight: 700;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.jh-contact-demo-form button:hover {
    background: #111118;

    transform: translateY(-1px);
}


/* =========================================================
   WPFORMS
   ========================================================= */

.jh-contact-form {
    width: 100%;
}

.jh-contact-form .wpforms-container {
    width: 100% !important;

    margin: 0 !important;
}

.jh-contact-form
.wpforms-container
.wpforms-field {
    width: 100% !important;

    padding: 0 0 22px !important;
}

.jh-contact-form
.wpforms-container
.wpforms-field-label {
    margin: 0 0 9px !important;

    color: #555b61 !important;

    font-size: 13px !important;
    line-height: 1.4 !important;

    font-weight: 400 !important;
}

.jh-contact-form
.wpforms-container
.wpforms-required-label {
    color: #ef3340 !important;
}


/* Inputs */

.jh-contact-form
.wpforms-container
input[type="text"],

.jh-contact-form
.wpforms-container
input[type="email"],

.jh-contact-form
.wpforms-container
input[type="tel"],

.jh-contact-form
.wpforms-container
input[type="number"],

.jh-contact-form
.wpforms-container
input[type="url"],

.jh-contact-form
.wpforms-container
select {

    width: 100% !important;

    max-width: none !important;

    min-height: 44px !important;

    padding: 0 12px !important;

    box-sizing: border-box !important;

    border: 1px solid #d5dbe0 !important;

    border-radius: 0 !important;

    background: #ffffff !important;

    color: #111118 !important;

    box-shadow: none !important;

    outline: none !important;
}


/* Textarea */

.jh-contact-form
.wpforms-container
textarea {

    width: 100% !important;

    max-width: none !important;

    min-height: 170px !important;

    padding: 12px !important;

    box-sizing: border-box !important;

    border: 1px solid #d5dbe0 !important;

    border-radius: 0 !important;

    background: #ffffff !important;

    color: #111118 !important;

    box-shadow: none !important;

    outline: none !important;

    resize: vertical;
}


/* Focus */

.jh-contact-form
.wpforms-container
input:focus,

.jh-contact-form
.wpforms-container
textarea:focus,

.jh-contact-form
.wpforms-container
select:focus {

    border-color: #111118 !important;
}


/* Submit */

.jh-contact-form
.wpforms-container
.wpforms-submit-container {

    padding-top: 0 !important;
}

.jh-contact-form
.wpforms-container
button[type="submit"] {

    min-width: 155px !important;

    min-height: 44px !important;

    padding: 0 24px !important;

    border: 0 !important;

    border-radius: 0 !important;

    background: #ef3340 !important;

    color: #ffffff !important;

    font-size: 12px !important;

    line-height: 1 !important;

    font-weight: 700 !important;

    box-shadow: none !important;

    transition:
        background .2s ease,
        transform .2s ease;
}

.jh-contact-form
.wpforms-container
button[type="submit"]:hover {

    background: #111118 !important;

    transform: translateY(-1px);
}


/* Validation */

.jh-contact-form
.wpforms-container
.wpforms-error {

    color: #ef3340 !important;

    font-size: 11px !important;
}

.jh-contact-form
.wpforms-container
input.wpforms-error,

.jh-contact-form
.wpforms-container
textarea.wpforms-error,

.jh-contact-form
.wpforms-container
select.wpforms-error {

    border-color: #ef3340 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

    .jh-contact-container {
        width: min(1100px, calc(100% - 36px));
    }

    .jh-contact-main-grid {
        gap: 40px;
    }

    .jh-contact-main-image {
        margin-top: -160px;

        height: calc(100% + 160px);
    }

    .jh-contact-hero {
        padding-bottom: 145px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .jh-contact-container {
        width: calc(100% - 28px);
    }


    /* Hero */

    .jh-contact-hero {
        padding: 58px 0 55px;
    }

    .jh-contact-hero h1 {
        font-size: 42px;
    }


    /* Main */

    .jh-contact-main {
        padding: 60px 0 80px;
    }

    .jh-contact-main-grid {
        grid-template-columns: 1fr;

        gap: 45px;

        align-items: start;
    }


    /* 手机上取消图片上顶 */

    .jh-contact-main-image {
        margin-top: 0;

        height: auto;
    }

    .jh-contact-main-image img {
        height: auto;

        aspect-ratio: 4 / 5;

        object-fit: cover;
    }


    /* Form */

    .jh-contact-form-column h2 {
        margin-bottom: 30px;

        font-size: 28px;
    }

    .jh-demo-field textarea,
    .jh-contact-form
    .wpforms-container
    textarea {

        min-height: 150px !important;
    }

}

/* =========================================================
   NEWS SINGLE PAGE
   ========================================================= */

.jh-news-single {
    background: #ffffff;
}

.jh-news-single-container {
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.jh-news-single-hero {
    padding: 75px 0 90px;

    background: #dedfe1;

    text-align: center;
}


/* Breadcrumb */

.jh-news-single-breadcrumb {
    max-width: 850px;

    margin: 0 auto 28px;

    overflow: hidden;

    color: #687078;

    font-size: 12px;

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

.jh-news-single-breadcrumb a {
    color: #687078;

    text-decoration: none;
}

.jh-news-single-breadcrumb a:hover {
    color: #111118;
}

.jh-news-single-breadcrumb span {
    margin: 0 8px;
}

.jh-news-single-breadcrumb strong {
    color: #111118;

    font-weight: 600;
}


/* Meta */

.jh-news-single-meta {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 20px;

    color: #717880;

    font-size: 11px;

    letter-spacing: .04em;

    text-transform: uppercase;
}

.jh-news-single-meta a {
    color: #ef3340;

    text-decoration: none;
}

.jh-news-single-meta span {
    color: #9da2a6;
}


/* Title */

.jh-news-single-hero h1 {
    max-width: 950px;

    margin: 0 auto;

    color: #111118;

    font-size: 52px;
    line-height: 1.18;

    overflow-wrap: anywhere;
}


/* =========================================================
   ARTICLE
   ========================================================= */

.jh-news-single-article {
    padding: 85px 0 110px;
}

.jh-news-article-container {
    width: min(1000px, calc(100% - 40px));

    margin: 0 auto;
}


/* =========================================================
   FEATURED IMAGE
   ========================================================= */

.jh-news-single-image {
    margin: 0 0 65px;
}

.jh-news-single-image img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 680px;

    object-fit: cover;
}


/* =========================================================
   ARTICLE CONTENT
   ========================================================= */

.jh-news-article-content {
    width: min(780px, 100%);

    margin: 0 auto;

    color: #555d65;

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


/* Paragraph */

.jh-news-article-content p {
    margin: 0 0 25px;
}


/* Headings */

.jh-news-article-content h2 {
    margin: 55px 0 22px;

    color: #111118;

    font-size: 32px;
    line-height: 1.3;
}

.jh-news-article-content h3 {
    margin: 42px 0 18px;

    color: #111118;

    font-size: 25px;
    line-height: 1.35;
}

.jh-news-article-content h4 {
    margin: 35px 0 16px;

    color: #111118;

    font-size: 20px;
}


/* Links */

.jh-news-article-content a {
    color: #ef3340;

    text-decoration: underline;
}


/* Lists */

.jh-news-article-content ul,
.jh-news-article-content ol {
    margin: 0 0 28px;

    padding-left: 24px;
}

.jh-news-article-content li {
    margin-bottom: 9px;
}


/* Images inside article */

.jh-news-article-content img {
    max-width: 100%;
    height: auto;
}


/* Gutenberg wide images */

.jh-news-article-content
.wp-block-image {
    margin: 35px 0;
}


/* Quote */

.jh-news-article-content blockquote {
    margin: 40px 0;

    padding: 8px 0 8px 28px;

    border-left: 3px solid #ef3340;

    color: #343a40;

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


/* =========================================================
   TABLE
   ========================================================= */

.jh-news-article-content table {
    width: 100%;

    margin: 35px 0;

    border-collapse: collapse;

    font-size: 14px;
}

.jh-news-article-content th,
.jh-news-article-content td {
    padding: 13px 15px;

    border: 1px solid #dddddd;

    text-align: left;
}

.jh-news-article-content th {
    background: #f4f4f4;

    color: #111118;
}


/* =========================================================
   TAGS
   ========================================================= */

.jh-news-single-tags {
    width: min(780px, 100%);

    margin: 65px auto 0;

    padding-top: 25px;

    border-top: 1px solid #dedede;
}

.jh-news-single-tags > span {
    display: block;

    margin-bottom: 13px;

    color: #9a9fa4;

    font-size: 10px;

    letter-spacing: .08em;
}

.jh-news-single-tags > div {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.jh-news-single-tags a {
    display: inline-flex;

    padding: 7px 11px;

    border: 1px solid #dedede;

    color: #62686e;

    text-decoration: none;

    font-size: 11px;

    transition:
        border-color .2s ease,
        color .2s ease;
}

.jh-news-single-tags a:hover {
    border-color: #ef3340;

    color: #ef3340;
}


/* =========================================================
   PREVIOUS / NEXT
   ========================================================= */

.jh-news-single-navigation {
    width: min(780px, 100%);

    margin: 70px auto 0;

    padding: 35px 0;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 40px;

    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
}

.jh-news-single-nav-item > span {
    display: block;

    margin-bottom: 11px;

    color: #999fa5;

    font-size: 10px;

    letter-spacing: .08em;
}

.jh-news-single-nav-item a {
    color: #111118;

    text-decoration: none;

    font-size: 15px;
    line-height: 1.55;

    font-weight: 600;
}

.jh-news-single-nav-item a:hover {
    color: #ef3340;
}

.jh-news-single-nav-next {
    text-align: right;
}


/* =========================================================
   BACK TO NEWS
   ========================================================= */

.jh-news-single-back {
    width: min(780px, 100%);

    margin: 35px auto 0;

    text-align: center;
}

.jh-news-single-back a {
    color: #ef3340;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .04em;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .jh-news-single-hero h1 {
        font-size: 44px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .jh-news-single-container,
    .jh-news-article-container {
        width: calc(100% - 28px);
    }

    .jh-news-single-hero {
        padding: 55px 0 60px;
    }

    .jh-news-single-hero h1 {
        font-size: 35px;
    }

    .jh-news-single-breadcrumb {
        white-space: normal;
    }

    .jh-news-single-article {
        padding: 55px 0 75px;
    }

    .jh-news-single-image {
        margin-bottom: 45px;
    }

    .jh-news-article-content {
        font-size: 15px;
    }

    .jh-news-article-content h2 {
        font-size: 28px;
    }

    .jh-news-article-content h3 {
        font-size: 23px;
    }

    .jh-news-single-navigation {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .jh-news-single-nav-next {
        text-align: left;
    }

}

/* =========================================================
   JH WELLTECH FINAL GLOBAL DESIGN SYSTEM
   Home page visual language is the site-wide standard.
   Keep this section at the END of style.css.
   ========================================================= */

:root {
    --jh-primary: #111118;
    --jh-black: #111118;
    --jh-dark-bg: #111016;
    --jh-accent: #ef3340;

    --jh-text: #333840;
    --jh-body: #61666d;
    --jh-muted: #6b7280;
    --jh-light-text: #9ca3af;

    --jh-border: #e5e7eb;
    --jh-bg-light: #f8fafc;
    --jh-hero-bg: #dedfe1;

    --jh-btn-primary-height: 50px;
    --jh-btn-compact-height: 44px;
    --jh-btn-outline-height: 46px;

    --jh-btn-font-size: 13px;
    --jh-btn-font-weight: 700;
}


/* ---------------------------------------------------------
   Shared button typography
   --------------------------------------------------------- */

:is(
    .jh-home-primary-button,
    .jh-btn,
    .jh-product-view-btn,
    .jh-products-card-button,
    .jh-service-button,
    .jh-about-button,
    .jh-home-outline-button,
    .jh-btn--secondary,
    .jh-service-outline-button,
    .jh-header-search-form button,
    .jh-contact-form .wpforms-container button[type="submit"]
) {
    border-radius: 0 !important;
    box-shadow: none !important;

    font-family: inherit !important;
    font-size: var(--jh-btn-font-size) !important;
    font-weight: var(--jh-btn-font-weight) !important;
    line-height: 1 !important;

    letter-spacing: .02em !important;
    text-decoration: none !important;
    text-transform: uppercase;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease !important;
}


/* ---------------------------------------------------------
   Primary CTA buttons
   Home hero button = standard
   --------------------------------------------------------- */

:is(
    .jh-home-primary-button,
    .jh-btn--primary,
    .jh-service-button,
    .jh-about-button,
    .jh-contact-form .wpforms-container button[type="submit"]
) {
    display: inline-flex !important;

    min-height: var(--jh-btn-primary-height) !important;

    padding: 0 26px !important;

    align-items: center !important;
    justify-content: center !important;

    border: 1px solid var(--jh-accent) !important;

    background: var(--jh-accent) !important;

    color: #ffffff !important;
}

:is(
    .jh-home-primary-button,
    .jh-btn--primary,
    .jh-service-button,
    .jh-about-button,
    .jh-contact-form .wpforms-container button[type="submit"]
):hover {
    border-color: var(--jh-black) !important;

    background: var(--jh-black) !important;

    color: #ffffff !important;
}


/* ---------------------------------------------------------
   Compact product/card buttons
   Same style, intentionally smaller hierarchy
   --------------------------------------------------------- */

:is(
    .jh-product-view-btn,
    .jh-products-card-button
) {
    display: inline-flex !important;

    min-height: var(--jh-btn-compact-height) !important;

    padding: 0 18px !important;

    align-items: center !important;
    justify-content: center !important;

    border: 1px solid var(--jh-accent) !important;

    background: var(--jh-accent) !important;

    color: #ffffff !important;

    font-size: 12px !important;
}

:is(
    .jh-product-view-btn,
    .jh-products-card-button
):hover {
    border-color: var(--jh-black) !important;

    background: var(--jh-black) !important;

    color: #ffffff !important;
}


/* ---------------------------------------------------------
   Outline / secondary buttons
   --------------------------------------------------------- */

:is(
    .jh-home-outline-button,
    .jh-btn--secondary,
    .jh-service-outline-button
) {
    display: inline-flex !important;

    min-height: var(--jh-btn-outline-height) !important;

    padding: 0 24px !important;

    align-items: center !important;
    justify-content: center !important;

    border: 1px solid var(--jh-black) !important;

    background: transparent !important;

    color: var(--jh-black) !important;
}

:is(
    .jh-home-outline-button,
    .jh-btn--secondary,
    .jh-service-outline-button
):hover {
    border-color: var(--jh-black) !important;

    background: var(--jh-black) !important;

    color: #ffffff !important;
}


/* ---------------------------------------------------------
   Header search button
   --------------------------------------------------------- */

.jh-header-search-form button {
    min-width: 120px !important;
    min-height: var(--jh-btn-primary-height) !important;

    padding: 0 26px !important;

    border: 1px solid var(--jh-accent) !important;

    background: var(--jh-accent) !important;

    color: #ffffff !important;
}

.jh-header-search-form button:hover {
    border-color: var(--jh-black) !important;

    background: var(--jh-black) !important;

    color: #ffffff !important;
}


/* ---------------------------------------------------------
   Standard text links
   --------------------------------------------------------- */

:is(
    .jh-home-read-more,
    .jh-footer-contact-link,
    .jh-news-single-back a
) {
    color: var(--jh-accent) !important;

    text-decoration: none !important;

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

    letter-spacing: .02em;

    transition: color .2s ease;
}

:is(
    .jh-home-read-more,
    .jh-footer-contact-link,
    .jh-news-single-back a
):hover {
    color: var(--jh-black) !important;
}


/* ---------------------------------------------------------
   Page heroes
   Keep Contact's custom vertical overlap; unify typography.
   --------------------------------------------------------- */

:is(
    .jh-products-page-header,
    .jh-services-hero,
    .jh-about-hero,
    .jh-news-hero,
    .jh-contact-hero,
    .jh-news-single-hero
) {
    background: var(--jh-hero-bg);
}

:is(
    .jh-products-page-header h1,
    .jh-services-hero h1,
    .jh-about-hero h1,
    .jh-news-hero h1,
    .jh-contact-hero h1
) {
    color: var(--jh-black);

    font-size: 58px;
    line-height: 1.1;

    font-weight: 700;
}

:is(
    .jh-products-breadcrumb,
    .jh-services-breadcrumb,
    .jh-about-breadcrumb,
    .jh-news-breadcrumb,
    .jh-contact-breadcrumb,
    .jh-news-single-breadcrumb
) {
    color: #687078;

    font-size: 13px;
}


/* ---------------------------------------------------------
   Eyebrows / small section labels
   --------------------------------------------------------- */

:is(
    .jh-home-section-eyebrow,
    .jh-product-eyebrow,
    .jh-service-label,
    .jh-about-label,
    .jh-service-products-header > div > span
) {
    color: var(--jh-light-text);

    font-size: 13px;
    line-height: 1.4;

    font-weight: 500;

    letter-spacing: .04em;
}


/* ---------------------------------------------------------
   Standard section headings
   --------------------------------------------------------- */

:is(
    .jh-home-section-header h2,
    .jh-service-products-header h2,
    .jh-about-approach-heading h2
) {
    color: var(--jh-black);

    font-size: 42px;
    line-height: 1.18;

    font-weight: 700;
}

:is(
    .jh-home-about-content h2,
    .jh-service-split-content h2,
    .jh-about-content h2
) {
    color: var(--jh-black);

    font-size: 44px;
    line-height: 1.2;

    font-weight: 700;
}


/* ---------------------------------------------------------
   Body copy consistency
   --------------------------------------------------------- */

:is(
    .jh-home-about-content p,
    .jh-service-split-content > p,
    .jh-about-content p
) {
    color: var(--jh-body);

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


/* ---------------------------------------------------------
   Card/title consistency
   --------------------------------------------------------- */

:is(
    .jh-product-name,
    .jh-products-card-title,
    .jh-news-title,
    .jh-service-feature h2
) {
    color: var(--jh-black);

    font-weight: 700;
}


/* ---------------------------------------------------------
   Form consistency
   --------------------------------------------------------- */

.jh-contact-form
.wpforms-container
.wpforms-field-label {
    color: #555b61 !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

.jh-contact-form
.wpforms-container
:is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    select,
    textarea
) {
    border: 1px solid var(--jh-border) !important;
    border-radius: 0 !important;

    background: #ffffff !important;

    color: var(--jh-black) !important;

    font-family: inherit !important;
    font-size: 14px !important;

    box-shadow: none !important;
}

.jh-contact-form
.wpforms-container
:is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    select,
    textarea
):focus {
    border-color: var(--jh-black) !important;

    outline: none !important;
}


/* ---------------------------------------------------------
   Mobile refinements
   --------------------------------------------------------- */

@media (max-width: 700px) {

    :is(
        .jh-products-page-header h1,
        .jh-services-hero h1,
        .jh-about-hero h1,
        .jh-news-hero h1,
        .jh-contact-hero h1
    ) {
        font-size: 42px;
    }

    :is(
        .jh-home-primary-button,
        .jh-btn--primary,
        .jh-service-button,
        .jh-about-button,
        .jh-contact-form .wpforms-container button[type="submit"]
    ) {
        min-height: 48px !important;

        padding-left: 22px !important;
        padding-right: 22px !important;

        font-size: 12px !important;
    }
}

/* =========================================================
   GLOBAL FLOATING SOCIAL LINKS
   ========================================================= */

.jh-floating-social {
    position: fixed;

    z-index: 950;

    top: 50%;
    right: 16px;

    width: 78px;

    transform: translateY(-50%);

    overflow: visible;

    border: 1px solid #e5e7eb;

    background: #ffffff;

    box-shadow:
        0 8px 28px
        rgba(17, 17, 24, .10);
}


/* =========================================================
   ITEM
   ========================================================= */

.jh-floating-social-item {
    position: relative;

    display: flex;

    width: 100%;
    min-height: 72px;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 6px;

    margin: 0;

    padding: 10px 6px;

    box-sizing: border-box;

    border: 0;
    border-bottom: 1px solid #eeeeee;

    background: #ffffff;

    color: #555d65;

    text-decoration: none;

    transition:
        background .2s ease,
        color .2s ease;
}

.jh-floating-social-item:last-child {
    border-bottom: 0;
}

a.jh-floating-social-item:hover {
    background: #f8fafc;

    color: #111118;
}


/* =========================================================
   ICON
   ========================================================= */

.jh-floating-social-icon {
    display: flex;

    width: 24px;
    height: 24px;

    align-items: center;
    justify-content: center;
}

.jh-floating-social-icon svg {
    display: block;

    width: 100%;
    height: 100%;
}


/* Brand colors */

.jh-floating-social-facebook
.jh-floating-social-icon {
    color: #1877f2;
}

.jh-floating-social-linkedin
.jh-floating-social-icon {
    color: #0a66c2;
}

.jh-floating-social-youtube
.jh-floating-social-icon {
    color: #ff0000;
}

.jh-floating-social-whatsapp
.jh-floating-social-icon {
    color: #25d366;
}


/* =========================================================
   LABEL
   ========================================================= */

.jh-floating-social-label {
    display: block;

    color: #555d65;

    font-size: 11px;
    line-height: 1.2;

    font-weight: 500;

    text-align: center;

    white-space: nowrap;
}


/* =========================================================
   WHATSAPP BUTTON
   ========================================================= */

.jh-floating-social-whatsapp {
    padding: 0;
}

.jh-floating-social-whatsapp-button {
    appearance: none;

    display: flex;

    width: 100%;
    min-height: 71px;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 6px;

    padding: 10px 6px;

    border: 0;

    background: #ffffff;

    color: inherit;

    cursor: pointer;
}

.jh-floating-social-whatsapp-button:hover {
    background: #f8fafc;
}


/* =========================================================
   WHATSAPP QR
   ========================================================= */

.jh-floating-social-qr {
    position: absolute;

    z-index: 10;

    top: 50%;
    right: calc(100% + 14px);

    width: 210px;

    padding: 16px;

    transform:
        translateY(-50%)
        translateX(8px);

    border: 1px solid #e5e7eb;

    background: #ffffff;

    box-shadow:
        0 14px 40px
        rgba(17, 17, 24, .15);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
}


/* Little arrow */

.jh-floating-social-qr::after {
    content: '';

    position: absolute;

    top: 50%;
    right: -7px;

    width: 12px;
    height: 12px;

    transform:
        translateY(-50%)
        rotate(45deg);

    border-top: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;

    background: #ffffff;
}


.jh-floating-social-qr img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 1 / 1;

    object-fit: contain;

    background: #ffffff;
}


.jh-floating-social-qr > span {
    display: block;

    margin-top: 11px;

    color: #6b7280;

    font-size: 11px;

    text-align: center;
}


/* Desktop hover */

.jh-floating-social-whatsapp:hover
.jh-floating-social-qr,

.jh-floating-social-whatsapp:focus-within
.jh-floating-social-qr,

.jh-floating-social-whatsapp.is-open
.jh-floating-social-qr {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(-50%)
        translateX(0);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .jh-floating-social {
        right: 8px;

        width: 46px;
    }


    .jh-floating-social-item {
        min-height: 46px;

        padding: 8px;
    }


    .jh-floating-social-label {
        display: none;
    }


    .jh-floating-social-icon {
        width: 21px;
        height: 21px;
    }


    .jh-floating-social-whatsapp-button {
        min-height: 45px;

        padding: 8px;
    }


    .jh-floating-social-qr {
        right: calc(100% + 10px);

        width: 180px;

        padding: 12px;
    }

}


/* =========================================================
   PRINT
   ========================================================= */

@media print {

    .jh-floating-social {
        display: none !important;
    }

}